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

recent payments

Browse Source
This commit is contained in:
CHIEFSOFT\ameye
2025-09-13 10:02:07 -04:00
parent e85ac7b292
commit 82b5ac085d
2 changed files with 83 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layouts/rightaside/RecentPaymentsBar.jsx
+80
View File
@@ -0,0 +1,80 @@
import React from 'react'
import Img from '../../../assets/user_avatar.jpg'
import CustomCounter from '../../CustomCounter'
export default function RecentPaymentsBar() {
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 Payments[7 days]</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'>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} />
</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} />
</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} />
</p>
<p className='text-sm text-slate-500'>Total</p>
</div>
</div>
</div>
<div className='flex flex-col gap-4'>
<p className='text-base text-white-body font-bold'>Recent Login</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>
</div>
</div>
</div>
)
}
src/components/layouts/rightaside/RightAsideBar.jsx
+3 -2
View File
@@ -1,8 +1,9 @@
import React, { useState } from 'react'
import Icons from '../../Icons'
import Orders from './Orders'
//import Orders from './Orders'
import Tickets from './Tickets'
import Tasks from './Tasks'
import RecentPaymentsBar from "./RecentPaymentsBar";
export default function RightAsideBar() {
@@ -29,7 +30,7 @@ export default function RightAsideBar() {
</div>
{/* Body */}
{active === 'orders' && <Orders />}
{active === 'orders' && <RecentPaymentsBar />}
{active === 'tickets' && <Tickets />}
{active === 'tasks' && <Tasks />}
</div>