DigiFi/digifi-FirstOffice
1
0
Fork 0
Code Issues Pull Requests Releases Activity

home page updated

Browse Source
This commit was merged in pull request #13.
This commit is contained in:
victorAnumudu
2025-04-15 18:06:48 +01:00
parent d684281253
commit c699e17533
12 changed files with 421 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/RouteLinks.js
+2
View File
@@ -8,6 +8,8 @@ const RouteLinks = {
disbursementsLoanPage: '/loans/disbursements',
selectedLoanPage: '/loans/select',
loanOffersPage: '/loans/offers',
loansPage: '/loans',
requestPage: '/request',
}
export default RouteLinks
src/SiteRoutes.jsx
+5
View File
@@ -13,6 +13,8 @@ import DisbursementsLoanPage from './pages/DisbursementsLoanPage' // DISBURSEMEN
import ApplicationsLoanPage from './pages/ApplicationsLoanPage' // APPLICATIONS LOANS PAGE
import SelectedLoanPage from './pages/SelectedLoanPage' // SELECTED LOANS PAGE
import LoanOffersPage from './pages/LoanOffersPage' // SELECTED LOANS PAGE
import LoansPage from './pages/LoansPage' // SELECTED LOANS PAGE
import RequestPage from './pages/RequestPage' // SELECTED LOANS PAGE
// const Home = lazy(() => import('./pages/Home'));
@@ -30,6 +32,9 @@ export default function SiteRoutes() {
<Route path={RouteLinks.applicationsLoanPage} element={<ApplicationsLoanPage />} /> {`*/APPLICATIONS LOANS PAGE*/`}
<Route path={RouteLinks.selectedLoanPage} element={<SelectedLoanPage />} /> {`*/SELECTED LOANS PAGE*/`}
<Route path={RouteLinks.loanOffersPage} element={<LoanOffersPage />} /> {`*/LOANS OFFERS PAGE*/`}
<Route path={RouteLinks.loansPage} element={<LoansPage />} /> {`*/LOANS PAGE*/`}
<Route path={RouteLinks.requestPage} element={<RequestPage />} /> {`*/Request PAGE*/`}
</Route>
{/* ERROR PAGE */}
src/components/auth/LoginCom.jsx
+8 -7
View File
@@ -103,6 +103,14 @@ export default function LoginCom() {
{/* <button onClick={()=>{login.mutate(fields)}} disabled={login.isPending} className='px-3 py-2 bg-purple-800 text-white font-bold rounded'>{login.isPending ? 'loading...' : 'Login'}</button> */}
<button onClick={handleLogin} className='w-full h-full bg-primary text-white font-bold rounded-md'>{loading ? 'Loading...' : 'Sign In'}</button>
</div>
{/* {login.error &&
<>
<div className="w-full text-center">
<p className='text-red-500 text-sm'>{login.error.message}</p>
</div>
</>
} */}
</div>
{/* <p className='text-sm text-center font-medium text-slate-500'>Not yet a member? <span className='text-primary'>Sign Up</span></p> */}
@@ -114,13 +122,6 @@ export default function LoginCom() {
</div>
{/* {login.error &&
<>
<div className="w-full text-center p-2">
<p className='text-red-500 text-sm'>{login.error.message}</p>
</div>
</>
} */}
</div>
</div>
<div className='col-span-1 md:col-span-1 lg:col-span-1 h-full flex flex-col gap-3 justify-center items-center md:items-start'>
src/components/home/HomeCom.jsx
+157
View File
@@ -0,0 +1,157 @@
import React from 'react'
import BreadcrumbCom from '../../components/breadcrumb/BreadcrumbCom'
import CustomCounter from '../../components/CustomCounter'
import Icons from '../../components/Icons'
import TableWrapper from '../../components/tableWrapper/TableWrapper'
import Avatar from '../../assets/user_avatar.jpg'
import { Widget1 } from './Widget1'
import { Widget2 } from './Widget2'
export default function HomeCom() {
return (
<div className='w-full flex flex-col gap-8'>
<BreadcrumbCom title='Dashboard' paths={['Home', 'Dashboard']} />
<div className='grid grid-cols-1 gap-8'>
<div className='w-full grid grid-cols-1 xl:grid-cols-3 gap-8'>
<div className='box min-h-[230] justify-between bg-[#F7D9E3] dark:bg-black-box text-black-body dark:text-white-body'>
<p className='text-base sm:text-lg font-bold hover:text-primary'>Loans</p>
<Widget1 />
<div className='flex gap-2 items-end font-bold'>
<p className='text-3xl sm:text-[39px]'><span className='text-xl sm:text-2xl'>$</span><CustomCounter targetNumber='47' timeInSeconds='1' /></p>
<p className='sm:text-[13.9px]'>This week</p>
</div>
</div>
<div className='box min-h-[230] justify-between bg-[#CBF0F5] dark:bg-black-box text-black-body dark:text-white-body'>
<p className='text-base sm:text-lg font-bold hover:text-primary'>Payments</p>
{/* <Widget2 /> */}
<div className='flex gap-2 items-end font-bold'>
<p className='text-3xl sm:text-[39px]'><CustomCounter targetNumber='500' timeInSeconds='1' /></p>
<p className='sm:text-[13.9px]'>This week</p>
</div>
</div>
<div className='box min-h-[230] justify-between bg-[#CBD4F4] dark:bg-black-box text-black-body dark:text-white-body'>
<p className='mb-4 text-base sm:text-lg font-bold hover:text-primary'>Request Summary</p>
<div className='grid grid-cols-2 gap-4 font-bold'>
<div className='flex items-center gap-2'>
<div className='w-10 h-10 bg-white-body dark:bg-black-box dark:shadow-[0_0_0_1px_#f9f9f9] rounded-md flex justify-center items-center'>
<Icons name='sales' />
</div>
<div>
<p className='font-bold text-base'>$<CustomCounter targetNumber='50' timeInSeconds='1' />K</p>
<p className='text-12 text-slate-500'>Sales</p>
</div>
</div>
<div className='flex items-center gap-2'>
<div className='w-10 h-10 bg-white-body dark:bg-black-box dark:shadow-[0_0_0_1px_#f9f9f9] rounded-md flex justify-center items-center'>
<Icons name='sales' />
</div>
<div>
<p className='font-bold text-base'>$<CustomCounter targetNumber='50' timeInSeconds='1' />K</p>
<p className='text-12 text-slate-500'>Revenue</p>
</div>
</div>
<div className='flex items-center gap-2'>
<div className='w-10 h-10 bg-white-body dark:bg-black-box dark:shadow-[0_0_0_1px_#f9f9f9] rounded-md flex justify-center items-center'>
<Icons name='sales' />
</div>
<div>
<p className='font-bold text-base'>$<CustomCounter targetNumber='265' timeInSeconds='1' />K</p>
<p className='text-12 text-slate-500'>Tickets</p>
</div>
</div>
<div className='flex items-center gap-2'>
<div className='w-10 h-10 bg-white-body dark:bg-black-box dark:shadow-[0_0_0_1px_#f9f9f9] rounded-md flex justify-center items-center'>
<Icons name='sales' />
</div>
<div>
<p className='font-bold text-base'>$<CustomCounter targetNumber='5' timeInSeconds='1' />M</p>
<p className='text-12 text-slate-500'>Tasks</p>
</div>
</div>
</div>
</div>
</div>
<div className='w-full'>
<div className='box gap-8 bg-white dark:bg-black-box text-black-body dark:text-white-body'>
<div className='grid grid-cols-1 xs:grid-cols-2 gap-4'>
<div className='flex flex-col gap-1 order-2 xs:order-1'>
<p className='font-bold text-base'>Recent Request</p>
{/* <p className='text-12'>Over 500 members</p> */}
</div>
{/* <div className='order-1 xs:order-2 text-left xs:text-right'>
<button className='font-bold bg-white-aside text-black-body text-12 px-4 py-2 hover:text-primary hover:bg-sky-50 dark:hover:text-white dark:hover:bg-primary dark:text-white-body dark:bg-black-body rounded-md'>+ New Member</button>
</div> */}
</div>
<TableWrapper data={[1,2,3,4,5]} itemsPerPage={15}>
{({ data }) => (
<>
<table className="py-2 w-full text-sm">
<thead className="py-2 text-sm text-slate-500 text-left font-semibold">
<tr>
<th scope="col" className="px-2 py-2">
Request
</th>
<th scope="col" className="px-2">
Account
</th>
<th scope="col" className="px-2">
Activity
</th>
<th scope="col" className="px-2 text-right">
Action
</th>
</tr>
</thead>
<tbody>
{data.map(item => (
<tr className="py-2 border-t border-dashed border-slate-300">
<td className="px-2 py-2">
<div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
<img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />
<div className="text-left">
<div className="text-base font-semibold">John Dummy</div>
<div className="font-normal text-gray-500">HTML, JS, ReactJS</div>
</div>
</div>
</td>
<td className="px-2">
<div className="text-left">
<div className="text-base font-semibold">chiefSoft</div>
<div className="font-normal text-gray-500">Web, UI/UX Design</div>
</div>
</td>
<td className="px-2">
<div className="text-left">
<div className="font-normal text-gray-500">50%</div>
<div className="relative h-[6px] w-full bg-white-body dark:bg-black-body rounded-full overflow-hidden">
<div className={`absolute left-0 h-full w-1/2 bg-emerald-600`}></div>
</div>
</div>
</td>
<td className="px-2 text-right">
<div className='flex items-center justify-end gap-3 md:gap-4'>
{/* <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
<Icons name='edit' />
</div> */}
<div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
<Icons name='eye' />
</div>
{/* <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
<Icons name='trash' />
</div> */}
</div>
</td>
</tr>
))}
</tbody>
</table>
</>
)}
</TableWrapper>
</div>
</div>
</div>
</div>
)
}
src/components/home/Widget1.jsx
+2 -2
View File
@@ -52,7 +52,7 @@ const chartOptions = (chartHeight) => {
return {
series: [
{
name: 'Net Profit',
name: 'Loans',
data: [15, 25, 15, 40, 20, 50],
},
],
@@ -171,7 +171,7 @@ const chartOptions = (chartHeight) => {
},
y: {
formatter: function (val) {
return '$' + val + ' thousands'
return '$' + val + ' thousand'
},
},
},
src/components/home/Widget2.jsx
+1 -1
View File
@@ -48,7 +48,7 @@ const chartOptions = (chartHeight) => {
return {
series: [
{
name: 'Inflation',
name: 'Payments',
data: [1, 2.1, 1, 2.1, 4.1, 6.1, 4.1, 4.1, 2.1, 4.1, 2.1, 3.1, 1, 1, 2.1],
},
],
src/components/layouts/aside/DashboardAside.jsx
+4 -2
View File
@@ -51,7 +51,7 @@ export default function DashboardAside() {
return (
<div key={index} className="w-full">
{link.title &&
<h1 className="px-4 py-2 text-sm sm:text-sm text-slate-500 dark:text-white font-semibold uppercase mt-3 mb-1 border-b border-slate-800">{link.title}</h1>
<h1 className="px-4 py-2 text-sm sm:text-sm text-slate-500 dark:text-white font-semibold uppercase mt-3 mb-1 border-b border-slate-500 dark:border-white">{link.title}</h1>
}
<AsideLinkWithSubLinks name={link.name} icon={link.icon} isOpen={subLinkList.includes(pathname) || index==1} >
<>
@@ -137,7 +137,9 @@ export default function DashboardAside() {
const asideNavLinks = [
{name:'Dashboard', status:1, icon: 'dashboard', to: RouteLinks.homePage},
{name:'Salary Loan', title:'Loan', status:1, icon: 'arrow-right', subLinks: [
{name:'First Advance', title:'Loan', status:1, icon: 'arrow-right', subLinks: [
{name: 'Request', status:1, icon: 'dot', to: RouteLinks.requestPage},
{name: 'Loans', status:1, icon: 'dot', to: RouteLinks.loansPage},
{name: 'Selected Loans', status:1, icon: 'dot', to: RouteLinks.selectedLoanPage},
{name: 'Applications', status:1, icon: 'dot', to: RouteLinks.applicationsLoanPage},
{name: 'Approved Loans', status:1, icon: 'dot', to: RouteLinks.approvedLoansPage},
src/components/loanscom/LoansCom.jsx
+112
View File
@@ -0,0 +1,112 @@
import React from 'react'
import { useQuery } from "@tanstack/react-query";
import {Link} from 'react-router-dom'
import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
import TableWrapper from '../tableWrapper/TableWrapper'
import Icons from '../Icons'
import Avatar from '../../assets/user_avatar.jpg'
import queryKeys from '../../services/queryKeys'
import { selectLoan } from '../../services/siteServices'
import getDateFromDateString from '../../helpers/GetDateFromDateString';
import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
export default function LoansCom() {
const {data, isFetching, isError, error} = useQuery({
queryKey: queryKeys.select_loan,
queryFn: () => selectLoan()
})
const selectUsers = data?.data?.result_data?.data // APPLY LOAN LIST
return (
<div className='w-full flex flex-col gap-8'>
<BreadcrumbCom title='Loans' paths={['Dashboard', 'Loans']} />
<div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
{isFetching ?
<>
<p className='text-slate-800'>Loading...</p>
</>
: isError ?
<p className='text-red-500'>{error.message}</p>
:
<TableWrapper data={selectUsers} itemsPerPage={15}>
{({ data }) => (
<>
<table className="py-2 w-full text-sm">
<thead className="py-2 text-sm text-slate-500 text-left">
<tr>
<th scope="col" className="px-2 py-2">
Name
</th>
<th scope="col" className="px-2">
Loan
</th>
<th scope="col" className="px-2">
Added
</th>
<th scope="col" className="px-2 text-right">
Action
</th>
</tr>
</thead>
<tbody>
{(data && data.length > 0) ? data?.map((item, index) => (
<tr className="py-2 border-t border-dashed border-slate-300">
<td className="px-2 py-2">
<div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
<img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />
<div className="text-left">
<div className="text-base font-semibold">{item?.name || ''}</div>
<div className="font-normal text-gray-500">{item?.bvn}</div>
</div>
</div>
</td>
<td className="px-2">
<div className="text-left">
<div className="text-base font-semibold">{item?.loan}</div>
<div className="font-normal text-gray-500">{item?.description}</div>
</div>
</td>
<td className="px-2">
<div className="text-left">
<div className="font-normal text-gray-500">{getDateFromDateString(item?.added)} {getTimeFromDateString(item?.added)}</div>
</div>
</td>
<td className="px-2 text-right">
<div className='flex items-center justify-end gap-3 md:gap-4'>
<div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
<Icons name='edit' />
</div>
<div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
<Icons name='eye' />
</div>
<div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
<Icons name='trash' />
</div>
</div>
</td>
</tr>
))
:
<tr className="py-2 border-t border-dashed border-slate-300">
<td className="px-3 py-2" colSpan={4}>
<div className="flex justify-center items-center">
No Record Found
</div>
</td>
</tr>
}
</tbody>
</table>
</>
)}
</TableWrapper>
}
</div>
</div>
)
}
src/components/request/RequestCom.jsx
+112
View File
@@ -0,0 +1,112 @@
import React from 'react'
import { useQuery } from "@tanstack/react-query";
import {Link} from 'react-router-dom'
import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
import TableWrapper from '../tableWrapper/TableWrapper'
import Icons from '../Icons'
import Avatar from '../../assets/user_avatar.jpg'
import queryKeys from '../../services/queryKeys'
import { selectLoan } from '../../services/siteServices'
import getDateFromDateString from '../../helpers/GetDateFromDateString';
import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
export default function RequestCom() {
const {data, isFetching, isError, error} = useQuery({
queryKey: queryKeys.select_loan,
queryFn: () => selectLoan()
})
const selectUsers = data?.data?.result_data?.data // APPLY LOAN LIST
return (
<div className='w-full flex flex-col gap-8'>
<BreadcrumbCom title='Request' paths={['Dashboard', 'Request']} />
<div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
{isFetching ?
<>
<p className='text-slate-800'>Loading...</p>
</>
: isError ?
<p className='text-red-500'>{error.message}</p>
:
<TableWrapper data={selectUsers} itemsPerPage={15}>
{({ data }) => (
<>
<table className="py-2 w-full text-sm">
<thead className="py-2 text-sm text-slate-500 text-left">
<tr>
<th scope="col" className="px-2 py-2">
Name
</th>
<th scope="col" className="px-2">
Loan
</th>
<th scope="col" className="px-2">
Added
</th>
<th scope="col" className="px-2 text-right">
Action
</th>
</tr>
</thead>
<tbody>
{(data && data.length > 0) ? data?.map((item, index) => (
<tr className="py-2 border-t border-dashed border-slate-300">
<td className="px-2 py-2">
<div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
<img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />
<div className="text-left">
<div className="text-base font-semibold">{item?.name || ''}</div>
<div className="font-normal text-gray-500">{item?.bvn}</div>
</div>
</div>
</td>
<td className="px-2">
<div className="text-left">
<div className="text-base font-semibold">{item?.loan}</div>
<div className="font-normal text-gray-500">{item?.description}</div>
</div>
</td>
<td className="px-2">
<div className="text-left">
<div className="font-normal text-gray-500">{getDateFromDateString(item?.added)} {getTimeFromDateString(item?.added)}</div>
</div>
</td>
<td className="px-2 text-right">
<div className='flex items-center justify-end gap-3 md:gap-4'>
<div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
<Icons name='edit' />
</div>
<div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
<Icons name='eye' />
</div>
<div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
<Icons name='trash' />
</div>
</div>
</td>
</tr>
))
:
<tr className="py-2 border-t border-dashed border-slate-300">
<td className="px-3 py-2" colSpan={4}>
<div className="flex justify-center items-center">
No Record Found
</div>
</td>
</tr>
}
</tbody>
</table>
</>
)}
</TableWrapper>
}
</div>
</div>
)
}
src/pages/HomePage.jsx
+2 -151
View File
@@ -1,157 +1,8 @@
import React from 'react'
import BreadcrumbCom from '../components/breadcrumb/BreadcrumbCom'
import CustomCounter from '../components/CustomCounter'
import Icons from '../components/Icons'
import TableWrapper from '../components/tableWrapper/TableWrapper'
import Avatar from '../assets/user_avatar.jpg'
import { Widget1 } from '../components/home/Widget1'
import { Widget2 } from '../components/home/Widget2'
import HomeCom from '../components/home/HomeCom'
export default function HomePage() {
return (
<div className='w-full flex flex-col gap-8'>
<BreadcrumbCom title='Dashboard' paths={['Home', 'Dashboard']} />
<div className='grid grid-cols-1 gap-8'>
<div className='w-full grid grid-cols-1 xl:grid-cols-3 gap-8'>
<div className='box min-h-[230] justify-between bg-[#F7D9E3] dark:bg-black-box text-black-body dark:text-white-body'>
<p className='text-base sm:text-lg font-bold hover:text-primary'>Earnings</p>
{/* <Widget1 /> */}
<div className='flex gap-2 items-end font-bold'>
<p className='text-3xl sm:text-[39px]'><span className='text-xl sm:text-2xl'>$</span><CustomCounter targetNumber='47' timeInSeconds='1' /></p>
<p className='sm:text-[13.9px]'>- 12% this week</p>
</div>
</div>
<div className='box min-h-[230] justify-between bg-[#CBF0F5] dark:bg-black-box text-black-body dark:text-white-body'>
<p className='text-base sm:text-lg font-bold hover:text-primary'>Contributions</p>
{/* <Widget2 /> */}
<div className='flex gap-2 items-end font-bold'>
<p className='text-3xl sm:text-[39px]'><CustomCounter targetNumber='500' timeInSeconds='1' /></p>
<p className='sm:text-[13.9px]'>+ 56% this week</p>
</div>
</div>
<div className='box min-h-[230] justify-between bg-[#CBD4F4] dark:bg-black-box text-black-body dark:text-white-body'>
<p className='mb-4 text-base sm:text-lg font-bold hover:text-primary'>Summary</p>
<div className='grid grid-cols-2 gap-4 font-bold'>
<div className='flex items-center gap-2'>
<div className='w-10 h-10 bg-white-body dark:bg-black-box dark:shadow-[0_0_0_1px_#f9f9f9] rounded-md flex justify-center items-center'>
<Icons name='sales' />
</div>
<div>
<p className='font-bold text-base'>$<CustomCounter targetNumber='50' timeInSeconds='1' />K</p>
<p className='text-12 text-slate-500'>Sales</p>
</div>
</div>
<div className='flex items-center gap-2'>
<div className='w-10 h-10 bg-white-body dark:bg-black-box dark:shadow-[0_0_0_1px_#f9f9f9] rounded-md flex justify-center items-center'>
<Icons name='sales' />
</div>
<div>
<p className='font-bold text-base'>$<CustomCounter targetNumber='50' timeInSeconds='1' />K</p>
<p className='text-12 text-slate-500'>Revenue</p>
</div>
</div>
<div className='flex items-center gap-2'>
<div className='w-10 h-10 bg-white-body dark:bg-black-box dark:shadow-[0_0_0_1px_#f9f9f9] rounded-md flex justify-center items-center'>
<Icons name='sales' />
</div>
<div>
<p className='font-bold text-base'>$<CustomCounter targetNumber='265' timeInSeconds='1' />K</p>
<p className='text-12 text-slate-500'>Tickets</p>
</div>
</div>
<div className='flex items-center gap-2'>
<div className='w-10 h-10 bg-white-body dark:bg-black-box dark:shadow-[0_0_0_1px_#f9f9f9] rounded-md flex justify-center items-center'>
<Icons name='sales' />
</div>
<div>
<p className='font-bold text-base'>$<CustomCounter targetNumber='5' timeInSeconds='1' />M</p>
<p className='text-12 text-slate-500'>Tasks</p>
</div>
</div>
</div>
</div>
</div>
<div className='w-full'>
<div className='box gap-8 bg-white dark:bg-black-box text-black-body dark:text-white-body'>
<div className='grid grid-cols-1 xs:grid-cols-2 gap-4'>
<div className='flex flex-col gap-1 order-2 xs:order-1'>
<p className='font-bold text-base'>Members Statistics</p>
<p className='text-12'>Over 500 members</p>
</div>
<div className='order-1 xs:order-2 text-left xs:text-right'>
<button className='font-bold bg-white-aside text-black-body text-12 px-4 py-2 hover:text-primary hover:bg-sky-50 dark:hover:text-white dark:hover:bg-primary dark:text-white-body dark:bg-black-body rounded-md'>+ New Member</button>
</div>
</div>
<TableWrapper data={[1,2,3,4,5]} itemsPerPage={15}>
{({ data }) => (
<>
<table className="py-2 w-full text-sm">
<thead className="py-2 text-sm text-slate-500 text-left">
<tr>
<th scope="col" className="px-2 py-2">
Authors
</th>
<th scope="col" className="px-2">
Company
</th>
<th scope="col" className="px-2">
Progress
</th>
<th scope="col" className="px-2 text-right">
Action
</th>
</tr>
</thead>
<tbody>
{data.map(item => (
<tr className="py-2 border-t border-dashed border-slate-300">
<td className="px-2 py-2">
<div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
<img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />
<div className="text-left">
<div className="text-base font-semibold">John Dummy</div>
<div className="font-normal text-gray-500">HTML, JS, ReactJS</div>
</div>
</div>
</td>
<td className="px-2">
<div className="text-left">
<div className="text-base font-semibold">chiefSoft</div>
<div className="font-normal text-gray-500">Web, UI/UX Design</div>
</div>
</td>
<td className="px-2">
<div className="text-left">
<div className="font-normal text-gray-500">50%</div>
<div className="relative h-[6px] w-full bg-white-body dark:bg-black-body rounded-full overflow-hidden">
<div className={`absolute left-0 h-full w-1/2 bg-emerald-600`}></div>
</div>
</div>
</td>
<td className="px-2 text-right">
<div className='flex items-center justify-end gap-3 md:gap-4'>
<div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
<Icons name='edit' />
</div>
<div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
<Icons name='eye' />
</div>
<div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
<Icons name='trash' />
</div>
</div>
</td>
</tr>
))}
</tbody>
</table>
</>
)}
</TableWrapper>
</div>
</div>
</div>
</div>
<HomeCom />
)
}
src/pages/LoansPage.jsx
+8
View File
@@ -0,0 +1,8 @@
import React from 'react'
import LoansCom from '../components/loanscom/LoansCom'
export default function LoansPage() {
return (
<LoansCom />
)
}
src/pages/RequestPage.jsx
+8
View File
@@ -0,0 +1,8 @@
import React from 'react'
import RequestCom from '../components/request/RequestCom'
export default function RequestPage() {
return (
<RequestCom/>
)
}