From 3c0f8938fcb7aa2424442bfa867d389c06163cc5 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Wed, 30 Apr 2025 19:53:35 +0100 Subject: [PATCH] added offer page --- src/RouteLinks.js | 1 + src/SiteRoutes.jsx | 6 +- .../layouts/aside/DashboardAside.jsx | 2 +- src/components/offers/OffersCom.jsx | 135 ++++++++++++++++++ .../transactionDetails/LoanChargeDetails.jsx | 3 +- src/pages/OffersPage.jsx | 8 ++ src/services/queryKeys.js | 1 + src/services/siteServices.js | 6 + 8 files changed, 158 insertions(+), 4 deletions(-) create mode 100644 src/components/offers/OffersCom.jsx create mode 100644 src/pages/OffersPage.jsx diff --git a/src/RouteLinks.js b/src/RouteLinks.js index 5359dd3..e2960ca 100644 --- a/src/RouteLinks.js +++ b/src/RouteLinks.js @@ -5,6 +5,7 @@ const RouteLinks = { transactionsPage: '/transactions', repaymentsPage: '/repayments', loanChargesPage: '/loan-charges', + offers: '/offers', transaction_details_page: '/transaction/details', errorPage: '*', } diff --git a/src/SiteRoutes.jsx b/src/SiteRoutes.jsx index 83eb3ba..120568b 100644 --- a/src/SiteRoutes.jsx +++ b/src/SiteRoutes.jsx @@ -11,8 +11,9 @@ import LoansPage from './pages/LoansPage' // SELECTED LOANS PAGE import TransactionsPage from './pages/TransactionsPage' // TRANSACTIONS PAGE import RepaymentsPage from './pages/RepaymentsPage' // REPAYMENTS PAGE import LoanChargesPage from './pages/LoanChargesPage' // LOAN CHARGES PAGE -import TransactionDetailsPage from './pages/TransactionDetailsPage' -import ErrorPage from './pages/ErrorPage' +import TransactionDetailsPage from './pages/TransactionDetailsPage' // TRANSACTION DETAILS PAGE +import OffersPage from './pages/OffersPage' // LOAN OFFERS PAGE +import ErrorPage from './pages/ErrorPage' // ERROR PAGE // const Home = lazy(() => import('./pages/Home')); @@ -29,6 +30,7 @@ export default function SiteRoutes() { } /> {`*/REPAYMENTS PAGE*/`} } /> {`*/LOAN CHARGES PAGE*/`} } /> {`*/TRANSACTION PAGE*/`} + } /> {`*/LOAN OFFERS PAGE*/`} {/* ERROR PAGE */} diff --git a/src/components/layouts/aside/DashboardAside.jsx b/src/components/layouts/aside/DashboardAside.jsx index 598fb55..5d35fc9 100644 --- a/src/components/layouts/aside/DashboardAside.jsx +++ b/src/components/layouts/aside/DashboardAside.jsx @@ -143,7 +143,7 @@ const asideNavLinks = [ {name: 'Repayments', status:1, icon: 'dot', to: RouteLinks.repaymentsPage}, {name: 'Loan Charges', status:1, icon: 'dot', to: RouteLinks.loanChargesPage}, {name: 'Configurations', status:1, icon: 'arrow-right', subLinks: [ - {name: 'Loan Offers', status:1, icon: 'dot', to: RouteLinks.loanOffersPage }, + {name: 'Loan Offers', status:1, icon: 'dot', to: RouteLinks.offers }, ] }, ], diff --git a/src/components/offers/OffersCom.jsx b/src/components/offers/OffersCom.jsx new file mode 100644 index 0000000..7a19476 --- /dev/null +++ b/src/components/offers/OffersCom.jsx @@ -0,0 +1,135 @@ +import React, { useState } from 'react' +import { useQuery } from "@tanstack/react-query"; + +import BreadcrumbCom from '../breadcrumb/BreadcrumbCom' +import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper' +import Icons from '../Icons' + +import Avatar from '../../assets/user_avatar.jpg' +import queryKeys from '../../services/queryKeys' +import { getOffers } from '../../services/siteServices' +import getDateFromDateString from '../../helpers/GetDateFromDateString'; +import formatNumber from '../../helpers/formatNumber'; + +export default function OffersCom() { + + const [page, setPage] = useState(1) + + const {data, isFetching, isError, error} = useQuery({ + queryKey: [...queryKeys.offers, page], + queryFn: () => getOffers({page}), + staleTime: 0, + // placeholderData: keepPreviousData, + }) + + const offers = data?.data?.offers // LOAN CHARGES LIST + const pagination = data?.data?.pagination + console.log('offers', offers) + + return ( +
+ + +
+ {isFetching ? + <> +

Loading...

+ + : isError ? +

{error.message}

+ : + + {({ data }) => ( + <> + + + + + + + + + + + + + + {(data && data.length > 0) ? data?.map((item, index) => ( + + + + + + + + + + )) + : + + + + } + +
+ Name + + Interest Rate + + Insurance Rate + + Mgt. Rate + + Max/Min Amount + + Tenor + + Action +
+
+ Jese image +
+
{item?.product_id || ''}
+ {/*
{item?.description}
*/} +
+
+ 		+
+
{formatNumber(item?.interest_rate)}
+
+ 		+
+
{formatNumber(item?.insurance_rate)}
+
+ 		+
+
{formatNumber(item?.management_rate)}
+
+ 		+
+
{formatNumber(item?.maximum_amount)}
+
{formatNumber(item?.minimum_amount)}
+
+ 		+
+
{getDateFromDateString(item?.tenor)}
+
+ 		+
+
+ +
+
+
+
+ No Record Found +
+
+ + )} + + } +
+
+ ) +} \ No newline at end of file diff --git a/src/components/transactionDetails/LoanChargeDetails.jsx b/src/components/transactionDetails/LoanChargeDetails.jsx index 91fc01e..751fb8c 100644 --- a/src/components/transactionDetails/LoanChargeDetails.jsx +++ b/src/components/transactionDetails/LoanChargeDetails.jsx @@ -61,7 +61,8 @@ export default function LoanChargeDetails({transactionID}) { Jese image
{item?.transaction_id || ''}
-
{item?.description}
+ {/*
{item?.description}
*/} +
{item?.loan_id} : {item?.code}
diff --git a/src/pages/OffersPage.jsx b/src/pages/OffersPage.jsx new file mode 100644 index 0000000..4e874ae --- /dev/null +++ b/src/pages/OffersPage.jsx @@ -0,0 +1,8 @@ +import React from 'react' +import OffersCom from '../components/offers/OffersCom' + +export default function OffersPage() { + return ( + + ) +} diff --git a/src/services/queryKeys.js b/src/services/queryKeys.js index ee2b9bf..86ff66a 100644 --- a/src/services/queryKeys.js +++ b/src/services/queryKeys.js @@ -4,6 +4,7 @@ const queryKeys = { transactions: ['transactions'], repayment_schedule: ['repayment-schedule'], loan_charges: ['loan-charges'], + offers: ['offers'], apply_loan: ['apply'], select_loan: ['select-loan'], approved_loan: ['approved-loan'], diff --git a/src/services/siteServices.js b/src/services/siteServices.js index 13b82d0..0ce3a2f 100644 --- a/src/services/siteServices.js +++ b/src/services/siteServices.js @@ -80,6 +80,12 @@ export const getLoanCharges = (reqData) => { return getAuxEnd(`/loan-charges`, postData) } +// FUNCTION TO GET OFFERS LIST TABLE +export const getOffers = (reqData) => { + const postData = { ...reqData } + return getAuxEnd(`/offers`, postData) +} + // FUNCTION TO GET REPAYMENT SCHEDULE TABLE export const getRepaymentSchedule = (reqData) => { const postData = { ...reqData } -- 2.34.1