first commit
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,80 @@
|
||||
import React from 'react'
|
||||
import Img from '../../../assets/user_avatar.jpg'
|
||||
import CustomCounter from '../../CustomCounter'
|
||||
|
||||
export default function Orders() {
|
||||
return (
|
||||
<div className='h-full p-2 sm:p-4 large:p-8 flex flex-col gap-16 overflow-y-auto aside-scroll-design'>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<p className='text-base text-white-body font-bold'>Recent Eligibility</p>
|
||||
<div className='grid grid-cols-2 gap-4 sm:gap-6 large:gap-8'>
|
||||
<div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
|
||||
<p className='text-base font-bold text-white-body'>
|
||||
<CustomCounter targetNumber={18} timeInSeconds={1} />
|
||||
</p>
|
||||
<p className='text-sm text-slate-500'>Pending</p>
|
||||
</div>
|
||||
<div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
|
||||
<p className='text-base font-bold text-white-body'>
|
||||
<CustomCounter targetNumber={5} timeInSeconds={1} />
|
||||
</p>
|
||||
<p className='text-sm text-slate-500'>Approved</p>
|
||||
</div>
|
||||
<div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
|
||||
<p className='text-base font-bold text-white-body'>
|
||||
<CustomCounter targetNumber={1} timeInSeconds={1} />
|
||||
</p>
|
||||
<p className='text-sm text-slate-500'>Rejected</p>
|
||||
</div>
|
||||
<div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
|
||||
<p className='text-base font-bold text-white-body'>
|
||||
<CustomCounter targetNumber={1} timeInSeconds={1} />
|
||||
</p>
|
||||
<p className='text-sm text-slate-500'>Created</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<p className='text-base text-white-body font-bold'>Recent Loans</p>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<div className='flex gap-3 items-center'>
|
||||
<div className='px-4 py-2 bg-[#0E172E] rounded-md'>
|
||||
<img src={Img} className='w-8' alt="Order Image" />
|
||||
</div>
|
||||
<div className='flex-col'>
|
||||
<p className='text-base font-bold text-white-body'>Project Briefing</p>
|
||||
<p className='text-sm text-slate-500'>Project Manager</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-3 items-center'>
|
||||
<div className='px-4 py-2 bg-[#0E172E] rounded-md'>
|
||||
<img src={Img} className='w-8' alt="Order Image" />
|
||||
</div>
|
||||
<div className='flex-col'>
|
||||
<p className='text-base font-bold text-white-body'>Project Briefing</p>
|
||||
<p className='text-sm text-slate-500'>Project Manager</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-3 items-center'>
|
||||
<div className='px-4 py-2 bg-[#0E172E] rounded-md'>
|
||||
<img src={Img} className='w-8' alt="Order Image" />
|
||||
</div>
|
||||
<div className='flex-col'>
|
||||
<p className='text-base font-bold text-white-body'>Project Briefing</p>
|
||||
<p className='text-sm text-slate-500'>Project Manager</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-3 items-center'>
|
||||
<div className='px-4 py-2 bg-[#0E172E] rounded-md'>
|
||||
<img src={Img} className='w-8' alt="Order Image" />
|
||||
</div>
|
||||
<div className='flex-col'>
|
||||
<p className='text-base font-bold text-white-body'>Project Briefing</p>
|
||||
<p className='text-sm text-slate-500'>Project Manager</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import React, { useState } from 'react'
|
||||
import Icons from '../../Icons'
|
||||
import Orders from './Orders'
|
||||
import Tickets from './Tickets'
|
||||
import Tasks from './Tasks'
|
||||
|
||||
export default function RightAsideBar() {
|
||||
|
||||
let [active, setActive] = useState('orders')
|
||||
|
||||
const handleActiveMenu = (name) => {
|
||||
let lowerStr = name.toLowerCase()
|
||||
setActive(lowerStr)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full h-full flex flex-col gap-8'>
|
||||
{/* Menu */}
|
||||
<div className='grid grid-cols-3 gap-8'>
|
||||
<button name='orders' onClick={() => handleActiveMenu('orders')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'orders' && 'scale-[1.2]'}`}>
|
||||
<Icons name='dashboard' className='text-3xl' />
|
||||
</button>
|
||||
<button name='tickets' onClick={() => handleActiveMenu('tickets')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'tickets' && 'scale-[1.2]'}`}>
|
||||
<Icons name='settings' className='text-3xl' />
|
||||
</button>
|
||||
<button name='tasks' onClick={() => handleActiveMenu('tasks')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'tasks' && 'scale-[1.2]'}`}>
|
||||
<Icons name='dashboard' className='text-3xl' />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
{active == 'orders' && <Orders />}
|
||||
{active == 'tickets' && <Tickets />}
|
||||
{active == 'tasks' && <Tasks />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
import React from 'react'
|
||||
import Img from '../../../assets/user_avatar.jpg'
|
||||
import CustomCounter from '../../CustomCounter'
|
||||
|
||||
export default function Tasks() {
|
||||
return (
|
||||
<div className='h-full p-2 sm:p-4 large:p-8 flex flex-col gap-16 overflow-y-auto aside-scroll-design'>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<p className='text-base text-white-body font-bold'>Support Tasks</p>
|
||||
<div className='grid grid-cols-2 gap-4 sm:gap-6 large:gap-8'>
|
||||
<div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
|
||||
<p className='text-base font-bold text-white-body'>
|
||||
<CustomCounter targetNumber={2} timeInSeconds={1} />
|
||||
</p>
|
||||
<p className='text-sm text-slate-500'>Pending</p>
|
||||
</div>
|
||||
<div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
|
||||
<p className='text-base font-bold text-white-body'>
|
||||
<CustomCounter targetNumber={20} timeInSeconds={1} />
|
||||
</p>
|
||||
<p className='text-sm text-slate-500'>Completed</p>
|
||||
</div>
|
||||
<div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
|
||||
<p className='text-base font-bold text-white-body'>
|
||||
<CustomCounter targetNumber={3} timeInSeconds={1} />
|
||||
</p>
|
||||
<p className='text-sm text-slate-500'>Rejected</p>
|
||||
</div>
|
||||
<div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
|
||||
<p className='text-base font-bold text-white-body'>
|
||||
<CustomCounter targetNumber={8} timeInSeconds={1} />
|
||||
</p>
|
||||
<p className='text-sm text-slate-500'>Created</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<p className='text-base text-white-body font-bold'>Best Tasks</p>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<div className='flex gap-3 items-center'>
|
||||
<div className='px-4 py-2 bg-[#0E172E] rounded-md'>
|
||||
<img src={Img} className='w-8' alt="Order Image" />
|
||||
</div>
|
||||
<div className='flex-col'>
|
||||
<p className='text-base font-bold text-white-body'>Project Briefing</p>
|
||||
<p className='text-sm text-slate-500'>Project Manager</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-3 items-center'>
|
||||
<div className='px-4 py-2 bg-[#0E172E] rounded-md'>
|
||||
<img src={Img} className='w-8' alt="Order Image" />
|
||||
</div>
|
||||
<div className='flex-col'>
|
||||
<p className='text-base font-bold text-white-body'>Project Briefing</p>
|
||||
<p className='text-sm text-slate-500'>Project Manager</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-3 items-center'>
|
||||
<div className='px-4 py-2 bg-[#0E172E] rounded-md'>
|
||||
<img src={Img} className='w-8' alt="Order Image" />
|
||||
</div>
|
||||
<div className='flex-col'>
|
||||
<p className='text-base font-bold text-white-body'>Project Briefing</p>
|
||||
<p className='text-sm text-slate-500'>Project Manager</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-3 items-center'>
|
||||
<div className='px-4 py-2 bg-[#0E172E] rounded-md'>
|
||||
<img src={Img} className='w-8' alt="Order Image" />
|
||||
</div>
|
||||
<div className='flex-col'>
|
||||
<p className='text-base font-bold text-white-body'>Project Briefing</p>
|
||||
<p className='text-sm text-slate-500'>Project Manager</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
import React from 'react'
|
||||
import Img from '../../../assets/user_avatar.jpg'
|
||||
import CustomCounter from '../../CustomCounter'
|
||||
|
||||
export default function Tickets() {
|
||||
return (
|
||||
<div className='h-full p-2 sm:p-4 large:p-8 flex flex-col gap-16 overflow-y-auto aside-scroll-design'>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<p className='text-base text-white-body font-bold'>Recent Repayment</p>
|
||||
<div className='grid grid-cols-2 gap-4 sm:gap-6 large:gap-8'>
|
||||
<div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
|
||||
<p className='text-base font-bold text-white-body'>
|
||||
<CustomCounter targetNumber={18} timeInSeconds={1} />
|
||||
</p>
|
||||
<p className='text-sm text-slate-500'>Pending</p>
|
||||
</div>
|
||||
<div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
|
||||
<p className='text-base font-bold text-white-body'>
|
||||
<CustomCounter targetNumber={2} timeInSeconds={1} />
|
||||
</p>
|
||||
<p className='text-sm text-slate-500'>Offers</p>
|
||||
</div>
|
||||
<div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
|
||||
<p className='text-base font-bold text-white-body'>
|
||||
<CustomCounter targetNumber={3} timeInSeconds={1} />
|
||||
</p>
|
||||
<p className='text-sm text-slate-500'>Created</p>
|
||||
</div>
|
||||
<div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
|
||||
<p className='text-base font-bold text-white-body'>
|
||||
<CustomCounter targetNumber={1} timeInSeconds={1} />
|
||||
</p>
|
||||
<p className='text-sm text-slate-500'>Rejected</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<p className='text-base text-white-body font-bold'>Tracked Errors</p>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<div className='flex gap-3 items-center'>
|
||||
<div className='px-4 py-2 bg-[#0E172E] rounded-md'>
|
||||
<img src={Img} className='w-8' alt="Order Image" />
|
||||
</div>
|
||||
<div className='flex-col'>
|
||||
<p className='text-base font-bold text-white-body'>Project Briefing</p>
|
||||
<p className='text-sm text-slate-500'>Project Manager</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-3 items-center'>
|
||||
<div className='px-4 py-2 bg-[#0E172E] rounded-md'>
|
||||
<img src={Img} className='w-8' alt="Order Image" />
|
||||
</div>
|
||||
<div className='flex-col'>
|
||||
<p className='text-base font-bold text-white-body'>Project Briefing</p>
|
||||
<p className='text-sm text-slate-500'>Project Manager</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-3 items-center'>
|
||||
<div className='px-4 py-2 bg-[#0E172E] rounded-md'>
|
||||
<img src={Img} className='w-8' alt="Order Image" />
|
||||
</div>
|
||||
<div className='flex-col'>
|
||||
<p className='text-base font-bold text-white-body'>Project Briefing</p>
|
||||
<p className='text-sm text-slate-500'>Project Manager</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-3 items-center'>
|
||||
<div className='px-4 py-2 bg-[#0E172E] rounded-md'>
|
||||
<img src={Img} className='w-8' alt="Order Image" />
|
||||
</div>
|
||||
<div className='flex-col'>
|
||||
<p className='text-base font-bold text-white-body'>Project Briefing</p>
|
||||
<p className='text-sm text-slate-500'>Project Manager</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user