victorAnumudu
87 lines
4.4 KiB
React
87 lines
4.4 KiB
React
import React from 'react'
|
|
import {Link} from 'react-router-dom'
|
|
import Img from '../../../assets/user_avatar.jpg'
|
|
import CustomCounter from '../../CustomCounter'
|
|
|
|
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 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 ?
|
|
<div className='w-full flex justify-center'>
|
|
<div className="w-6 h-6 border-2 border-gray-300 border-b-gray-500 rounded-full animate-spin"></div>
|
|
</div>
|
|
:
|
|
isError ?
|
|
<p className='text-base text-white-body font-bold'>{error?.message}</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={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={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={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={recentPayment?.total} timeInSeconds={1} />
|
|
</p>
|
|
<p className='text-sm text-slate-500'>Total</p>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
<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'>
|
|
<div className="w-6 h-6 border-2 border-gray-300 border-b-gray-500 rounded-full animate-spin"></div>
|
|
</div>
|
|
:
|
|
isError ?
|
|
<p className='text-base text-white-body font-bold'>{error?.message}</p>
|
|
:
|
|
<div className='flex flex-col gap-4'>
|
|
{recentLogin.map((item, index)=> {
|
|
return (
|
|
<Link
|
|
to={`/account-view/${item?.member_uid}`}
|
|
state={{customerID: item?.id, memberUID: item?.member_uid}}
|
|
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>
|
|
</Link>
|
|
)
|
|
}
|
|
)}
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|