From a274fd5958235fb08c13218f36fa9eb2bfec62c9 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Mon, 10 Mar 2025 19:03:00 +0100 Subject: [PATCH] amount and fee aligned --- src/RouteLinks.js | 1 + src/SiteRoutes.jsx | 2 + .../ApplicationsLoanCom.jsx | 31 +-- .../approvedloancom/ApprovedLoanCom.jsx | 20 +- .../DisbursementsLoanCom.jsx | 215 +++++++++--------- .../ViewSingleDisbursement.jsx | 40 ++++ .../layouts/aside/DashboardAside.jsx | 2 +- src/components/payments/LoanPaymentsCom.jsx | 23 ++ .../selectedloancom/SelectedLoanCom.jsx | 14 +- src/pages/LoanPaymentsPage.jsx | 8 + 10 files changed, 207 insertions(+), 149 deletions(-) create mode 100644 src/components/disbursementsloancom/ViewSingleDisbursement.jsx create mode 100644 src/components/payments/LoanPaymentsCom.jsx create mode 100644 src/pages/LoanPaymentsPage.jsx diff --git a/src/RouteLinks.js b/src/RouteLinks.js index ae3ba44..34d103a 100644 --- a/src/RouteLinks.js +++ b/src/RouteLinks.js @@ -8,6 +8,7 @@ const RouteLinks = { disbursementsLoanPage: '/loans/disbursements', selectedLoanPage: '/loans/select', loanOffersPage: '/loans/offers', + loanPayments: '/loans/payments', } export default RouteLinks \ No newline at end of file diff --git a/src/SiteRoutes.jsx b/src/SiteRoutes.jsx index 479c7e8..f29a553 100644 --- a/src/SiteRoutes.jsx +++ b/src/SiteRoutes.jsx @@ -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() { } /> {`*/APPLICATIONS LOANS PAGE*/`} } /> {`*/SELECTED LOANS PAGE*/`} } /> {`*/LOANS OFFERS PAGE*/`} + } /> {`*/LOANS PAYMENTS PAGE*/`} {/* ERROR PAGE */} diff --git a/src/components/applicationsloancom/ApplicationsLoanCom.jsx b/src/components/applicationsloancom/ApplicationsLoanCom.jsx index 9d0afdd..7aba591 100644 --- a/src/components/applicationsloancom/ApplicationsLoanCom.jsx +++ b/src/components/applicationsloancom/ApplicationsLoanCom.jsx @@ -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() { {({ data }) => ( <> - +
- - - @@ -73,23 +74,15 @@ export default function LoanOffersCom() { - + - - - - @@ -89,21 +89,15 @@ export default function ApprovedLoanCom() { {getDateFromDateString(item?.verified)} {getTimeFromDateString(item?.verified)} - - - @@ -75,16 +75,10 @@ export default function SelectedLoanCom() { diff --git a/src/pages/LoanPaymentsPage.jsx b/src/pages/LoanPaymentsPage.jsx new file mode 100644 index 0000000..75791c9 --- /dev/null +++ b/src/pages/LoanPaymentsPage.jsx @@ -0,0 +1,8 @@ +import React from 'react' +import LoanPaymentsCom from '../components/payments/LoanPaymentsCom' + +export default function LoanPaymentsPage() { + return ( + + ) +}
@@ -49,13 +50,13 @@ export default function LoanOffersCom() { Loan + Amount + Added + Action
{item?.loan} - {item?.description} - {item?.amount || ''} + + {formatNumber(item?.amount)} + + {getDateFromDateString(item?.added)} {getTimeFromDateString(item?.added)} -
- {getDateFromDateString(item?.added)} {getTimeFromDateString(item?.added)} -
- 		- {/* */} - {/* - - */} - {/* */} - {/* */} -
- +
+
diff --git a/src/components/approvedloancom/ApprovedLoanCom.jsx b/src/components/approvedloancom/ApprovedLoanCom.jsx index 1e24bad..b5c19ff 100644 --- a/src/components/approvedloancom/ApprovedLoanCom.jsx +++ b/src/components/approvedloancom/ApprovedLoanCom.jsx @@ -55,13 +55,13 @@ export default function ApprovedLoanCom() {
Verified + Initail Amount + Fee + Action
+ {formatNumber(item?.amount)} + {formatNumber(item?.total_fee)} - {/* */} - {/* - - */} - {/* */} - {/* */} -
- +
+
diff --git a/src/components/disbursementsloancom/DisbursementsLoanCom.jsx b/src/components/disbursementsloancom/DisbursementsLoanCom.jsx index 0a76aa3..5e5166e 100644 --- a/src/components/disbursementsloancom/DisbursementsLoanCom.jsx +++ b/src/components/disbursementsloancom/DisbursementsLoanCom.jsx @@ -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 ( -
- + const [viewModal, setViewModal] = useState(false) - {isFetching ? - <> -
-

Loading...

-
- - : isError ? -
-

{error.message}

-
- : - - {({ data }) => ( - <> - - - - - - - - - - - - - - - {(data && data.length > 0) ? data?.map((item, index) => ( - - +
- Name - - Loan - - Added - - Due Date - - Amount - - Disbursement Status - - Fee - - Action -
- Jese image -
-
{item?.name || ''}
-
{item?.bvn}
-
+ const handleViewModal = () => { + // setViewModal(prev => !prev) + } + + return ( + <> +
+ + + {isFetching ? + <> +
+

Loading...

+
+ + : isError ? +
+

{error.message}

+
+ : + + {({ data }) => ( + <> + + + + - - + + + + + + + + + + {(data && data.length > 0) ? data?.map((item, index) => ( + + + + + + + + + + + )) + : + + - - - - - - )) - : - - - - } - -
+ Name - {item?.loan} - {item?.description} - -
- {getDateFromDateString(item?.added)} {getTimeFromDateString(item?.added)} +
+ Loan + + Added + + Due Date + + Amount + + Fee + + Disbursement Status + + Action +
+ Jese image +
+
{item?.name || ''}
+
{item?.bvn}
+
+ 		+ {item?.loan} - {item?.description} + + {getDateFromDateString(item?.added)} {getTimeFromDateString(item?.added)} + + {getDateFromDateString(item?.due_date)} {getTimeFromDateString(item?.due_date)} + + {formatNumber(item?.approved_amount)} + + {formatNumber(item?.total_fee)} + + {item?.transmission_status} + +
+
+ +
+ +
+
+
+ No Record Found
-
- {getDateFromDateString(item?.due_date)} {getTimeFromDateString(item?.due_date)} -
- 		- {formatNumber(item?.approved_amount)} - - {item?.transmission_status} - - {formatNumber(item?.total_fee)} - -
- - -
- {/* */} - {/* - - */} - {/* */} - {/* */} - {/* */} -
-
- No Record Found -
-
- - )} - - } -
+ } +
+ + )} + + } +
+ + {viewModal && } + ) } \ No newline at end of file diff --git a/src/components/disbursementsloancom/ViewSingleDisbursement.jsx b/src/components/disbursementsloancom/ViewSingleDisbursement.jsx new file mode 100644 index 0000000..c890946 --- /dev/null +++ b/src/components/disbursementsloancom/ViewSingleDisbursement.jsx @@ -0,0 +1,40 @@ +import ModalWrapper from "../../components/modals/ModalWrapper" +import MainBtn from "../../components/MainBtn" + + +export default function ViewSingleDisbursement({close}) { + return ( + +
+ {/* */} +
+

+ DISBURSEMENT DETAILS +

+ +
+ {/* */} +
+

+ COMING SOON +

+

+ COMING SOON +

+
+ {/* */} +
+ + +
+
+ + ) +} diff --git a/src/components/layouts/aside/DashboardAside.jsx b/src/components/layouts/aside/DashboardAside.jsx index a5f270e..dc79f14 100644 --- a/src/components/layouts/aside/DashboardAside.jsx +++ b/src/components/layouts/aside/DashboardAside.jsx @@ -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 }, ] diff --git a/src/components/payments/LoanPaymentsCom.jsx b/src/components/payments/LoanPaymentsCom.jsx new file mode 100644 index 0000000..4caa811 --- /dev/null +++ b/src/components/payments/LoanPaymentsCom.jsx @@ -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 ( +
+ +
+ ) +} \ No newline at end of file diff --git a/src/components/selectedloancom/SelectedLoanCom.jsx b/src/components/selectedloancom/SelectedLoanCom.jsx index f0d02d9..75579eb 100644 --- a/src/components/selectedloancom/SelectedLoanCom.jsx +++ b/src/components/selectedloancom/SelectedLoanCom.jsx @@ -51,7 +51,7 @@ export default function SelectedLoanCom() {
Added + Action
- {/* */} - {/* - - */} - {/* */} - {/* */} -
- +
+ {/* */} - + {/* */}