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

amount and fee aligned

Browse Source
This commit is contained in:
victorAnumudu
2025-03-10 19:03:00 +01:00
parent 3b619a4fae
commit a274fd5958
10 changed files with 207 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/RouteLinks.js
+1
View File
@@ -8,6 +8,7 @@ const RouteLinks = {
disbursementsLoanPage: '/loans/disbursements',
selectedLoanPage: '/loans/select',
loanOffersPage: '/loans/offers',
loanPayments: '/loans/payments',
}
export default RouteLinks
src/SiteRoutes.jsx
+2
View File
@@ -13,6 +13,7 @@ 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 LoanPaymentsPage from './pages/LoanPaymentsPage' // SELECTED LOANS PAGE
// const Home = lazy(() => import('./pages/Home'));
@@ -30,6 +31,7 @@ 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.loanPayments} element={<LoanPaymentsPage />} /> {`*/LOANS PAYMENTS PAGE*/`}
</Route>
{/* ERROR PAGE */}
src/components/applicationsloancom/ApplicationsLoanCom.jsx
+12 -19
View File
@@ -12,6 +12,7 @@ import { applyLoan } from '../../services/siteServices'
import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
import getDateFromDateString from '../../helpers/GetDateFromDateString';
import formatNumber from '../../helpers/formatNumber';
export default function LoanOffersCom() {
@@ -40,7 +41,7 @@ export default function LoanOffersCom() {
<TableWrapper data={appliedUsers} itemsPerPage={15}>
{({ data }) => (
<>
<table className="py-2 w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<table className="table-auto py-2 w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead className="text-sm md:text-base text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" className="px-4 py-2">
@@ -49,13 +50,13 @@ export default function LoanOffersCom() {
<th scope="col" className="px-4 py-2">
Loan
</th>
<th scope="col" className="px-4 py-2">
<th scope="col" className="px-4 py-2 text-right">
Amount
</th>
<th scope="col" className="px-4 py-2">
<th scope="col" className="px-4 py-2 text-right">
Added
</th>
<th scope="col" className="px-4 py-2">
<th scope="col" className="px-4 py-2 text-center">
Action
</th>
</tr>
@@ -73,23 +74,15 @@ export default function LoanOffersCom() {
<td className="px-3 py-2">
{item?.loan} - {item?.description}
</td>
<td className="px-3 py-2">
{item?.amount || ''}
<td className="px-3 py-2 text-right font-bold">
{formatNumber(item?.amount)}
</td>
<td className="px-3 py-2 text-right">
{getDateFromDateString(item?.added)} {getTimeFromDateString(item?.added)}
</td>
<td className="px-3 py-2">
<div className="flex items-center">
{getDateFromDateString(item?.added)} {getTimeFromDateString(item?.added)}
</div>
</td>
<td className="px-3 py-2">
{/* <!-- Modal toggle --> */}
{/* <Link to={RouteLinks.manageAdminPage}>
<i onClick={handleShowEditModal} className="fa-solid fa-eye text-base md:text-lg cursor-pointer p-2 text-sky-600"></i>
</Link> */}
{/* <i onClick={handleShowEditModal} className="fa-solid fa-pen-to-square text-base md:text-lg cursor-pointer p-2"></i> */}
{/* <i onClick={handleDeleteModal} className="fa-solid fa-trash text-base md:text-lg cursor-pointer p-2 text-red-500"></i> */}
<div className='flex items-center gap-3 md:gap-4'>
<Icons name='edit' />
<div className='w-full flex justify-center items-center gap-3 md:gap-4'>
<Icons name='edit' className={'hidden'} />
<Icons name='eye' />
<Icons name='trash' className={'hidden text-red-500'} />
</div>
src/components/approvedloancom/ApprovedLoanCom.jsx
+7 -13
View File
@@ -55,13 +55,13 @@ export default function ApprovedLoanCom() {
<th scope="col" className="px-4 py-2">
Verified
</th>
<th scope="col" className="px-4 py-2">
<th scope="col" className="px-4 py-2 text-right">
Initail Amount
</th>
<th scope="col" className="px-4 py-2">
<th scope="col" className="px-4 py-2 text-right">
Fee
</th>
<th scope="col" className="px-4 py-2">
<th scope="col" className="px-4 py-2 text-center">
Action
</th>
</tr>
@@ -89,21 +89,15 @@ export default function ApprovedLoanCom() {
{getDateFromDateString(item?.verified)} {getTimeFromDateString(item?.verified)}
</div>
</td>
<td className="px-3 py-2">
<td className="px-3 py-2 text-right font-bold">
{formatNumber(item?.amount)}
</td>
<td className="px-3 py-2">
<td className="px-3 py-2 text-right font-bold">
{formatNumber(item?.total_fee)}
</td>
<td className="px-3 py-2">
{/* <!-- Modal toggle --> */}
{/* <Link to={RouteLinks.manageAdminPage}>
<i onClick={handleShowEditModal} className="fa-solid fa-eye text-base md:text-lg cursor-pointer p-2 text-sky-600"></i>
</Link> */}
{/* <i onClick={handleShowEditModal} className="fa-solid fa-pen-to-square text-base md:text-lg cursor-pointer p-2"></i> */}
{/* <i onClick={handleDeleteModal} className="fa-solid fa-trash text-base md:text-lg cursor-pointer p-2 text-red-500"></i> */}
<div className='flex items-center gap-3 md:gap-4'>
<Icons name='edit' />
<div className='flex justify-center items-center gap-3 md:gap-4'>
<Icons name='edit' className={'hidden'} />
<Icons name='eye' />
<Icons name='trash' className={'hidden text-red-500'} />
</div>
src/components/disbursementsloancom/DisbursementsLoanCom.jsx
+109 -106
View File
@@ -1,4 +1,4 @@
import React from 'react'
import React, { useState } from 'react'
import { useQuery } from "@tanstack/react-query";
import {Link} from 'react-router-dom'
@@ -12,6 +12,8 @@ import { disbursementsLoan } from '../../services/siteServices'
import getDateFromDateString from '../../helpers/GetDateFromDateString';
import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
import formatNumber from '../../helpers/formatNumber';
import ViewSingleDisbursement from './ViewSingleDisbursement';
import HandBurger from '../layouts/HandBurger';
export default function DisbursementsLoanCom() {
@@ -22,115 +24,116 @@ export default function DisbursementsLoanCom() {
const approvedUsers = data?.data?.result_data?.data // DISBURSED LOAN LIST
return (
<div className='w-full flex flex-col gap-8'>
<BreadcrumbCom title='Disbursements' paths={['Dashboard', 'Disbursements']} />
const [viewModal, setViewModal] = useState(false)
{isFetching ?
<>
<div className="w-full py-4">
<p className='text-slate-800'>Loading...</p>
</div>
</>
: isError ?
<div className="w-full py-4">
<p className='text-red-500'>{error.message}</p>
</div>
:
<TableWrapper data={approvedUsers} itemsPerPage={15}>
{({ data }) => (
<>
<table className="py-2 w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead className="text-sm md:text-base text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" className="px-4 py-2">
Name
</th>
<th scope="col" className="px-4 py-2">
Loan
</th>
<th scope="col" className="px-4 py-2">
Added
</th>
<th scope="col" className="px-4 py-2">
Due Date
</th>
<th scope="col" className="px-4 py-2">
Amount
</th>
<th scope="col" className="px-4 py-2">
Disbursement Status
</th>
<th scope="col" className="px-4 py-2">
Fee
</th>
<th scope="col" className="px-4 py-2">
Action
</th>
</tr>
</thead>
<tbody>
{(data && data.length > 0) ? data?.map((item, index) => (
<tr key={index} className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<th scope="row" className="mr-4 flex items-center px-3 py-2 text-gray-900 whitespace-nowrap dark:text-white">
<img className="w-10 h-10 rounded-full" src={Avatar} alt="Jese image" />
<div className="px-3">
<div className="text-base font-semibold">{item?.name || ''}</div>
<div className="font-normal text-gray-500">{item?.bvn}</div>
</div>
const handleViewModal = () => {
// setViewModal(prev => !prev)
}
return (
<>
<div className='w-full flex flex-col gap-8'>
<BreadcrumbCom title='Disbursements' paths={['Dashboard', 'Disbursements']} />
{isFetching ?
<>
<div className="w-full py-4">
<p className='text-slate-800'>Loading...</p>
</div>
</>
: isError ?
<div className="w-full py-4">
<p className='text-red-500'>{error.message}</p>
</div>
:
<TableWrapper data={approvedUsers} itemsPerPage={15}>
{({ data }) => (
<>
<table className="py-2 w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead className="text-sm md:text-base text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" className="px-4 py-2">
Name
</th>
<td className="px-3 py-2">
{item?.loan} - {item?.description}
</td>
<td className="px-3 py-2">
<div className="flex items-center">
{getDateFromDateString(item?.added)} {getTimeFromDateString(item?.added)}
<th scope="col" className="px-4 py-2">
Loan
</th>
<th scope="col" className="px-4 py-2 text-right">
Added
</th>
<th scope="col" className="px-4 py-2 text-right">
Due Date
</th>
<th scope="col" className="px-4 py-2 text-right">
Amount
</th>
<th scope="col" className="px-4 py-2 text-right">
Fee
</th>
<th scope="col" className="px-4 py-2 text-center">
Disbursement Status
</th>
<th scope="col" className="px-4 py-2 text-center">
Action
</th>
</tr>
</thead>
<tbody>
{(data && data.length > 0) ? data?.map((item, index) => (
<tr key={index} className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<th scope="row" className="mr-4 flex items-center px-3 py-2 text-gray-900 whitespace-nowrap dark:text-white">
<img className="w-10 h-10 rounded-full" src={Avatar} alt="Jese image" />
<div className="px-3">
<div className="text-base font-semibold">{item?.name || ''}</div>
<div className="font-normal text-gray-500">{item?.bvn}</div>
</div>
</th>
<td className="px-3 py-2">
{item?.loan} - {item?.description}
</td>
<td className="px-3 py-2 text-right">
{getDateFromDateString(item?.added)} {getTimeFromDateString(item?.added)}
</td>
<td className="px-3 py-2 text-right">
{getDateFromDateString(item?.due_date)} {getTimeFromDateString(item?.due_date)}
</td>
<td className="px-3 py-2 text-right font-bold">
{formatNumber(item?.approved_amount)}
</td>
<td className="px-3 py-2 text-right font-bold">
{formatNumber(item?.total_fee)}
</td>
<td className="px-3 py-2 text-center">
{item?.transmission_status}
</td>
<td className="px-3 py-2">
<div className='flex justify-center items-center gap-3 md:gap-4'>
<div onClick={handleViewModal}>
<Icons name='eye' className='cursor-pointer' />
</div>
<Icons name='trash' className={'hidden text-red-500'} />
</div>
</td>
</tr>
))
:
<tr className="w-3 p-3">
<td className="px-3 py-2" colSpan={7}>
<div className="flex justify-center items-center">
No Record Found
</div>
</td>
<td className="px-3 py-2">
<div className="flex items-center">
{getDateFromDateString(item?.due_date)} {getTimeFromDateString(item?.due_date)}
</div>
</td>
<td className="px-3 py-2">
{formatNumber(item?.approved_amount)}
</td>
<td className="px-3 py-2">
{item?.transmission_status}
</td>
<td className="px-3 py-2">
{formatNumber(item?.total_fee)}
</td>
<td className="px-3 py-2">
<div className='flex items-center gap-3 md:gap-4'>
<Icons name='eye' />
<Icons name='trash' className={'hidden text-red-500'} />
</div>
{/* <!-- Modal toggle --> */}
{/* <Link to={RouteLinks.manageAdminPage}>
<i onClick={handleShowEditModal} className="fa-solid fa-eye text-base md:text-lg cursor-pointer p-2 text-sky-600"></i>
</Link> */}
{/* <i onClick={handleShowEditModal} className="fa-solid fa-pen-to-square text-base md:text-lg cursor-pointer p-2"></i> */}
{/* <i onClick={handleDeleteModal} className="fa-solid fa-trash text-base md:text-lg cursor-pointer p-2 text-red-500"></i> */}
{/* <Icons name='edit' /> */}
</td>
</tr>
))
:
<tr className="w-3 p-3">
<td className="px-3 py-2" colSpan={7}>
<div className="flex justify-center items-center">
No Record Found
</div>
</td>
</tr>
}
</tbody>
</table>
</>
)}
</TableWrapper>
}
</div>
}
</tbody>
</table>
</>
)}
</TableWrapper>
}
</div>
{viewModal && <ViewSingleDisbursement close={handleViewModal} />}
</>
)
}
src/components/disbursementsloancom/ViewSingleDisbursement.jsx
+40
View File
@@ -0,0 +1,40 @@
import ModalWrapper from "../../components/modals/ModalWrapper"
import MainBtn from "../../components/MainBtn"
export default function ViewSingleDisbursement({close}) {
return (
<ModalWrapper
maxWidth='max-w-3xl'
>
<div className="relative bg-white rounded-lg shadow dark:bg-gray-700">
{/* <!-- Modal header --> */}
<div className="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
<h3 className="text-xl font-semibold text-gray-900 dark:text-white">
DISBURSEMENT DETAILS
</h3>
<button onClick={close} type="button" className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="default-modal">
<svg className="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
</svg>
<span className="sr-only">Close modal</span>
</button>
</div>
{/* <!-- Modal body --> */}
<div className="p-4 md:p-5 space-y-4 h-[400px]">
<p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
COMING SOON
</p>
<p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
COMING SOON
</p>
</div>
{/* <!-- Modal footer --> */}
<div className="w-full flex justify-between items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
<MainBtn onClick={close} text='Cancel' className="ring-1 ring-transparent hover:ring-red-500" />
<MainBtn text='Proceed' className="text-white bg-primary hover:bg-primary/90 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" />
</div>
</div>
</ModalWrapper>
)
}
src/components/layouts/aside/DashboardAside.jsx
+1 -1
View File
@@ -140,7 +140,7 @@ const asideNavLinks = [
{name: 'Applications', status:1, icon: 'dot', to: RouteLinks.applicationsLoanPage},
{name: 'Approved Loans', status:1, icon: 'dot', to: RouteLinks.approvedLoansPage},
{name: 'Disbursements', status:1, icon: 'dot', to: RouteLinks.disbursementsLoanPage},
{name: 'Payments', status:1, icon: 'dot', to: ''},
{name: 'Payments', status:1, icon: 'dot', to: RouteLinks.loanPayments},
{name: 'Configurations', status:1, icon: 'dot', subLinks: [
{name: 'Loan Offers', status:1, icon: 'dot', to: RouteLinks.loanOffersPage },
]
src/components/payments/LoanPaymentsCom.jsx
+23
View File
@@ -0,0 +1,23 @@
import React from 'react'
import { useQuery } from "@tanstack/react-query";
import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
import queryKeys from '../../services/queryKeys'
import { approvedLoan } from '../../services/siteServices'
export default function LoanPaymentsCom() {
const {data, isFetching, isError, error} = useQuery({
queryKey: queryKeys.approved_loan,
queryFn: () => approvedLoan()
})
const approvedUsers = data?.data?.result_data?.data // APPLY LOAN LIST
return (
<div className='w-full flex flex-col gap-8'>
<BreadcrumbCom title='Payments' paths={['Dashboard', 'Payments']} />
</div>
)
}
src/components/selectedloancom/SelectedLoanCom.jsx
+4 -10
View File
@@ -51,7 +51,7 @@ export default function SelectedLoanCom() {
<th scope="col" className="px-4 py-2">
Added
</th>
<th scope="col" className="px-4 py-2">
<th scope="col" className="px-4 py-2 text-center">
Action
</th>
</tr>
@@ -75,16 +75,10 @@ export default function SelectedLoanCom() {
</div>
</td>
<td className="px-3 py-2">
{/* <!-- Modal toggle --> */}
{/* <Link to={RouteLinks.manageAdminPage}>
<i onClick={handleShowEditModal} className="fa-solid fa-eye text-base md:text-lg cursor-pointer p-2 text-sky-600"></i>
</Link> */}
{/* <i onClick={handleShowEditModal} className="fa-solid fa-pen-to-square text-base md:text-lg cursor-pointer p-2"></i> */}
{/* <i onClick={handleDeleteModal} className="fa-solid fa-trash text-base md:text-lg cursor-pointer p-2 text-red-500"></i> */}
<div className='flex items-center gap-3 md:gap-4'>
<Icons name='edit' />
<div className='flex justify-center items-center gap-3 md:gap-4'>
{/* <Icons name='edit' className={'hidden'} /> */}
<Icons name='eye' />
<Icons name='trash' className={'hidden text-red-500'} />
{/* <Icons name='trash' className={'hidden text-red-500'} /> */}
</div>
</td>
</tr>
src/pages/LoanPaymentsPage.jsx
+8
View File
@@ -0,0 +1,8 @@
import React from 'react'
import LoanPaymentsCom from '../components/payments/LoanPaymentsCom'
export default function LoanPaymentsPage() {
return (
<LoanPaymentsCom />
)
}