MERMS/MermsFirstOffice
1
0
Fork 0
Code Issues Pull Requests 1 Releases Activity

Added recent payments #30

Merged
ameye merged 1 commits from recent-payment into master 2025-10-16 22:20:01 +00:00
Conversation 0 Commits 1 Files Changed 3
+39 -55
3 changed files with 39 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layouts/rightaside/RecentPaymentsBar.jsx
+28 -42
View File
@@ -1,10 +1,16 @@
import React from 'react'
import {Link} from 'react-router-dom'
import Img from '../../../assets/user_avatar.jpg'
import CustomCounter from '../../CustomCounter'
import RouteLinks from '../../../RouteLinks'
export default function RecentPaymentsBar({data, isFetching, isError, error}) {
const recentPayment = data?.data?.recent_payment_summary
const recentLogin = data?.data?.recent_login
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='h-full p-2 sm:p-4 large:p-8 flex flex-col gap-16 aside-scroll-design'>
<div className='flex flex-col gap-4'>
<p className='text-base text-white-body font-bold'>Recent Payments [7 days]</p>
{isFetching ?
@@ -18,32 +24,32 @@ export default function RecentPaymentsBar({data, isFetching, isError, error}) {
<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} />
<CustomCounter targetNumber={recentPayment?.approved} 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={5} timeInSeconds={1} />
<CustomCounter targetNumber={recentPayment?.verified} timeInSeconds={1} />
</p>
<p className='text-sm text-slate-500'>Verified</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} />
<CustomCounter targetNumber={recentPayment?.failed} timeInSeconds={1} />
</p>
<p className='text-sm text-slate-500'>Failed</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} />
<CustomCounter targetNumber={recentPayment?.total} timeInSeconds={1} />
</p>
<p className='text-sm text-slate-500'>Total</p>
</div>
</div>
}
</div>
<div className='flex flex-col gap-4'>
<div className='overflow-y-auto h-full flex flex-col gap-4'>
<p className='text-base text-white-body font-bold'>Recent Login</p>
{isFetching ?
<div className='w-full flex justify-center'>
@@ -54,42 +60,22 @@ export default function RecentPaymentsBar({data, isFetching, isError, error}) {
<p className='text-base text-white-body font-bold'>{error?.message}</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" />
</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" />
</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" />
</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" />
</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>
{recentLogin.map((item, index)=> {
if(index < 5){
return (
<div key={index} className='flex gap-3 items-center'>
<div className='px-4 py-2 bg-[#0E172E] rounded-md'>
<img src={Img} className='w-8' alt="Order" />
</div>
<div className='flex-col'>
<p className='text-base font-bold text-white-body'>{item.firstname} {item.lastname}</p>
<p className='text-sm text-slate-500'>{item.username}</p>
</div>
</div>
)
}
}
)}
</div>
}
</div>
src/components/layouts/rightaside/RightAsideBar.jsx
+4 -9
View File
@@ -29,14 +29,9 @@ export default function RightAsideBar() {
},
// staleTime: 0 //0 mins
})
const recentData = [] // RECENT LIST
// const recentData = data?.data // RECENT LIST
// const pagination = data?.data?.pagination
// console.log('RIGHT', data?.data)
return (
<div className='w-full h-full flex flex-col gap-8'>
<div className='w-full h-full pb-8 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]'}`}>
@@ -51,9 +46,9 @@ export default function RightAsideBar() {
</div>
{/* Body */}
{active === 'orders' && <RecentPaymentsBar data={recentData} isFetching={isFetching} isError={isError} error={error} />}
{active === 'tickets' && <Tickets data={recentData} isFetching={isFetching} isError={isError} error={error} />}
{active === 'tasks' && <Tasks data={recentData} isFetching={isFetching} isError={isError} error={error} />}
{active === 'orders' && <RecentPaymentsBar data={data} isFetching={isFetching} isError={isError} error={error} />}
{active === 'tickets' && <Tickets data={data} isFetching={isFetching} isError={isError} error={error} />}
{active === 'tasks' && <Tasks data={data} isFetching={isFetching} isError={isError} error={error} />}
</div>
)
}
src/components/layouts/rightaside/Tickets.jsx
+7 -4
View File
@@ -3,6 +3,9 @@ import Img from '../../../assets/user_avatar.jpg'
import CustomCounter from '../../CustomCounter'
export default function Tickets({data, isFetching, isError, error}) {
const recentDeployment = data?.data?.recent_deployment_summary
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'>
@@ -18,25 +21,25 @@ export default function Tickets({data, isFetching, isError, error}) {
<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} />
<CustomCounter targetNumber={recentDeployment?.pending} 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} />
<CustomCounter targetNumber={recentDeployment?.started} timeInSeconds={1} />
</p>
<p className='text-sm text-slate-500'>Started</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} />
<CustomCounter targetNumber={recentDeployment?.stuck} timeInSeconds={1} />
</p>
<p className='text-sm text-slate-500'>Stuck</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} />
<CustomCounter targetNumber={recentDeployment?.completed} timeInSeconds={1} />
</p>
<p className='text-sm text-slate-500'>Completed</p>
</div>