From 59c1ce6ae7d168893477e9136d8ee29a8f997b49 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Tue, 29 Apr 2025 09:24:48 +0100 Subject: [PATCH] added transaction details page --- src/RouteLinks.js | 1 + src/SiteRoutes.jsx | 2 + src/components/home/HomeCom.jsx | 6 +- .../loan_charges/LoanChargesCom.jsx | 30 +++-- .../transactionDetails/LoanChargeDetails.jsx | 109 ++++++++++++++++ .../transactionDetails/LoanDetails.jsx | 119 ++++++++++++++++++ .../RepaymentScheduleDetails.jsx | 118 +++++++++++++++++ .../transactionDetails/TransactionDetails.jsx | 112 +++++++++++++++++ .../TransactionDetailsCom.jsx | 18 +++ .../transactions/TransactionsCom.jsx | 6 +- src/pages/TransactionDetailsPage.jsx | 18 +++ src/services/queryKeys.js | 2 + src/services/siteServices.js | 8 +- 13 files changed, 531 insertions(+), 18 deletions(-) create mode 100644 src/components/transactionDetails/LoanChargeDetails.jsx create mode 100644 src/components/transactionDetails/LoanDetails.jsx create mode 100644 src/components/transactionDetails/RepaymentScheduleDetails.jsx create mode 100644 src/components/transactionDetails/TransactionDetails.jsx create mode 100644 src/components/transactionDetails/TransactionDetailsCom.jsx create mode 100644 src/pages/TransactionDetailsPage.jsx diff --git a/src/RouteLinks.js b/src/RouteLinks.js index 2b0811e..5359dd3 100644 --- a/src/RouteLinks.js +++ b/src/RouteLinks.js @@ -5,6 +5,7 @@ const RouteLinks = { transactionsPage: '/transactions', repaymentsPage: '/repayments', loanChargesPage: '/loan-charges', + transaction_details_page: '/transaction/details', errorPage: '*', } diff --git a/src/SiteRoutes.jsx b/src/SiteRoutes.jsx index 4646b4f..83eb3ba 100644 --- a/src/SiteRoutes.jsx +++ b/src/SiteRoutes.jsx @@ -11,6 +11,7 @@ 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' @@ -27,6 +28,7 @@ export default function SiteRoutes() { } /> {`*/Transactions PAGE*/`} } /> {`*/REPAYMENTS PAGE*/`} } /> {`*/LOAN CHARGES PAGE*/`} + } /> {`*/TRANSACTION PAGE*/`} {/* ERROR PAGE */} diff --git a/src/components/home/HomeCom.jsx b/src/components/home/HomeCom.jsx index 9e0326b..b90b3bf 100644 --- a/src/components/home/HomeCom.jsx +++ b/src/components/home/HomeCom.jsx @@ -4,8 +4,6 @@ import { useQuery } from "@tanstack/react-query"; 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 formatNumber from '../../helpers/formatNumber' import queryKeys from '../../services/queryKeys' @@ -137,7 +135,9 @@ export default function HomeCom() { */}
- + + +
{/*
diff --git a/src/components/loan_charges/LoanChargesCom.jsx b/src/components/loan_charges/LoanChargesCom.jsx index 0ac5042..26380aa 100644 --- a/src/components/loan_charges/LoanChargesCom.jsx +++ b/src/components/loan_charges/LoanChargesCom.jsx @@ -9,19 +9,20 @@ import Avatar from '../../assets/user_avatar.jpg' import queryKeys from '../../services/queryKeys' import { getLoanCharges } from '../../services/siteServices' import getDateFromDateString from '../../helpers/GetDateFromDateString'; +import formatNumber from '../../helpers/formatNumber'; export default function LoanChargesCom() { const [page, setPage] = useState(1) const {data, isFetching, isError, error} = useQuery({ - queryKey: [...queryKeys.transactions, page], + queryKey: [...queryKeys.loan_charges, page], queryFn: () => getLoanCharges({page}), staleTime: 0, // placeholderData: keepPreviousData, }) - const loanCharges = data?.data?.transactions // LOAN CHARGES LIST + const loanCharges = data?.data?.loan_charges // LOAN CHARGES LIST const pagination = data?.data?.pagination return ( @@ -48,7 +49,10 @@ export default function LoanChargesCom() { {/* Loan */} - + + Amount + + Added @@ -63,19 +67,19 @@ export default function LoanChargesCom() {
Jese image
-
{item?.account_id || ''}
-
{item?.transaction_id}
+
{item?.transaction_id || ''}
+
{item?.description}
- {/* -
-
{item?.loan}
-
{item?.description}
-
- */} -
+
+ {/*
{formatNumber(item?.initial_loan_amount)}
*/} +
{formatNumber(item?.amount)}
+
+ + +
{getDateFromDateString(item?.created_at)}
@@ -90,7 +94,7 @@ export default function LoanChargesCom() { )) : - +
No Record Found
diff --git a/src/components/transactionDetails/LoanChargeDetails.jsx b/src/components/transactionDetails/LoanChargeDetails.jsx new file mode 100644 index 0000000..69ae923 --- /dev/null +++ b/src/components/transactionDetails/LoanChargeDetails.jsx @@ -0,0 +1,109 @@ +import React, { useState } from 'react' +import { useQuery } from "@tanstack/react-query"; + +import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper' +import Icons from '../Icons' + +import Avatar from '../../assets/user_avatar.jpg' +import queryKeys from '../../services/queryKeys' +import { getLoanCharges } from '../../services/siteServices' +import getDateFromDateString from '../../helpers/GetDateFromDateString'; +import formatNumber from '../../helpers/formatNumber'; + +export default function LoanChargeDetails({transactionID}) { + + const [page, setPage] = useState(1) + + const {data, isFetching, isError, error} = useQuery({ + queryKey: [...queryKeys.loan_charges, page], + queryFn: () => getLoanCharges({transaction_id: transactionID, page}), + staleTime: 0, + // placeholderData: keepPreviousData, + }) + + const loanCharges = data?.data?.loan_charges // LOAN CHARGES LIST + const pagination = data?.data?.pagination + + return ( +
+

Loan Charges

+ {isFetching ? + <> +

Loading...

+ + : isError ? +

{error.message}

+ : + + {({ data }) => ( + <> + + + + + {/* */} + + + + + + + {(data && data.length > 0) ? data?.map((item, index) => ( + + + + + + + )) + : + + + + } + +
+ Name + + Loan + + Amount + + Added + + Action +
+
+ Jese image +
+
{item?.transaction_id || ''}
+
{item?.description}
+
+
+ 		+
+ {/*
{formatNumber(item?.initial_loan_amount)}
*/} +
{formatNumber(item?.amount)}
+
+ 		+
+
{getDateFromDateString(item?.created_at)}
+
+ 		+
+
+ +
+
+
+
+ No Record Found +
+
+ + )} + + } +
+ ) +} \ No newline at end of file diff --git a/src/components/transactionDetails/LoanDetails.jsx b/src/components/transactionDetails/LoanDetails.jsx new file mode 100644 index 0000000..b2fd88b --- /dev/null +++ b/src/components/transactionDetails/LoanDetails.jsx @@ -0,0 +1,119 @@ +import React from 'react' +import { useQuery } from "@tanstack/react-query"; + +import TableWrapper from '../tableWrapper/TableWrapper' +import Icons from '../Icons' + +import Avatar from '../../assets/user_avatar.jpg' +import queryKeys from '../../services/queryKeys' +import { getLoans } from '../../services/siteServices' +import getDateFromDateString from '../../helpers/GetDateFromDateString'; +import formatNumber from '../../helpers/formatNumber' + +export default function LoanDetails({transactionID}) { + + const {data:allLoans, isFetching, isError, error} = useQuery({ + queryKey: queryKeys.loans, + queryFn: () => getLoans({transaction_id: transactionID}) + }) + + const loans = allLoans?.data?.loans // LOANS LIST + const loansCount = allLoans?.data?.count // LOANS LIST COUNT + // console.log('LOANS', loans) + + return ( +
+

Loans

+ {isFetching ? + <> +

Loading...

+ + : isError ? +

{error.message}

+ : + + {({ data }) => ( + <> + + + + + + + + + + + + + {(data && data.length > 0) ? data?.map((item, index) => ( + + + + + + + + + )) + : + + + + } + +
+ Name + + Loan Amount + + Repay Amount + + Install Amount + + Added + + Action +
+
+ Jese image +
+
{item?.account_id || ''}
+
{item?.customer_id}
+
+
+ 		+
+ {/*
{formatNumber(item?.initial_loan_amount)}
*/} +
{formatNumber(item?.initial_loan_amount)}
+
+ 		+
+
{formatNumber(item?.repayment_amount)}
+
+ 		+
+
{formatNumber(item?.installment_amount)}
+
+ 		+
+
{getDateFromDateString(item?.created_at)}
+
+ 		+
+
+ +
+
+
+
+ No Record Found +
+
+ + )} + + } +
+ ) +} \ No newline at end of file diff --git a/src/components/transactionDetails/RepaymentScheduleDetails.jsx b/src/components/transactionDetails/RepaymentScheduleDetails.jsx new file mode 100644 index 0000000..6cd179e --- /dev/null +++ b/src/components/transactionDetails/RepaymentScheduleDetails.jsx @@ -0,0 +1,118 @@ +import React, { useState } from 'react' +import { useQuery } from "@tanstack/react-query"; + +import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper' +import Icons from '../Icons' + +import Avatar from '../../assets/user_avatar.jpg' +import queryKeys from '../../services/queryKeys' +import { getRepaymentSchedule } from '../../services/siteServices' +import getDateFromDateString from '../../helpers/GetDateFromDateString'; +import formatNumber from '../../helpers/formatNumber'; + +export default function RepaymentScheduleDetails({transactionID}) { + + const [page, setPage] = useState(1) + + const {data, isFetching, isError, error} = useQuery({ + queryKey: [...queryKeys.repayment_schedule, page], + queryFn: () => getRepaymentSchedule({transaction_id: transactionID, page}), + staleTime: 0, + // placeholderData: keepPreviousData, + }) + + console.log('data', data) + + const loanCharges = data?.data?.repayment_schedules // LOAN CHARGES LIST + const pagination = data?.data?.pagination + + return ( +
+

Repayment Schedule

+ {isFetching ? + <> +

Loading...

+ + : isError ? +

{error.message}

+ : + + {({ data }) => ( + <> + + + + + {/* */} + + + + + + + + {(data && data.length > 0) ? data?.map((item, index) => ( + + + + + + + + )) + : + + + + } + +
+ Name + + Loan + + Repay Amount + + Install Amount + + Due Date + + Action +
+
+ Jese image +
+
{item?.transaction_id || ''}
+
{item?.description}
+
+
+ 		+
+
{formatNumber(item?.total_repayment_amount)}
+
+ 		+
+
{formatNumber(item?.installment_amount)}
+
+ 		+
+
{getDateFromDateString(item?.due_date)}
+
+ 		+
+
+ +
+
+
+
+ No Record Found +
+
+ + )} + + } +
+ ) +} \ No newline at end of file diff --git a/src/components/transactionDetails/TransactionDetails.jsx b/src/components/transactionDetails/TransactionDetails.jsx new file mode 100644 index 0000000..8b45e3a --- /dev/null +++ b/src/components/transactionDetails/TransactionDetails.jsx @@ -0,0 +1,112 @@ +import React, { useState } from 'react' +import { useQuery } from "@tanstack/react-query"; +import {Link} from 'react-router-dom' + +import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper' +import Icons from '../Icons' + +import queryKeys from '../../services/queryKeys' +import { getTransactions } from '../../services/siteServices' +import getDateFromDateString from '../../helpers/GetDateFromDateString'; +import localImgLoader from '../../helpers/localImageLoader'; +import RouteLinks from '../../RouteLinks'; + +export default function TransactionDetails({transactionID}) { + + const [page, setPage] = useState(1) + + const {data, isFetching, isError, error} = useQuery({ + queryKey: [...queryKeys.transactions, page], + queryFn: () => getTransactions({transaction_id: transactionID, page}), + staleTime: 0, + // placeholderData: keepPreviousData, + }) + + const transactions = data?.data?.transactions // TRANSACTIONS LIST + const pagination = data?.data?.pagination + + return ( +
+

Transactions

+ {isFetching ? + <> +

Loading...

+ + : isError ? +

{error.message}

+ : + + {({ data }) => ( + <> + + + + + + + + + + + {(data && data.length > 0) ? data?.map((item, index) => ( + + + + + + + )) + : + + + + } + +
+ Request + + Account + + Activity + + Action +
+
+ Icon +
+
{item?.transaction_id}
+
{getDateFromDateString(item?.created_at)}
+
+
+ 		+
+
{item?.account_id}
+
{item?.type}
+
+ 		+
+
50%
+
+
+
+
+ 		+
+
+ + + +
+
+
+
+ No Record Found +
+
+ + )} + + } +
+ ) +} \ No newline at end of file diff --git a/src/components/transactionDetails/TransactionDetailsCom.jsx b/src/components/transactionDetails/TransactionDetailsCom.jsx new file mode 100644 index 0000000..3c318d9 --- /dev/null +++ b/src/components/transactionDetails/TransactionDetailsCom.jsx @@ -0,0 +1,18 @@ +import React from 'react' +import BreadcrumbCom from '../breadcrumb/BreadcrumbCom' +import TransactionDetails from './TransactionDetails' +import LoanDetails from './LoanDetails' +import LoanChargeDetails from './LoanChargeDetails' +import RepaymentScheduleDetails from './RepaymentScheduleDetails' + +export default function TransactionDetailsCom({id}) { + return ( +
+ + + + + +
+ ) +} diff --git a/src/components/transactions/TransactionsCom.jsx b/src/components/transactions/TransactionsCom.jsx index 80c7aa0..7d158da 100644 --- a/src/components/transactions/TransactionsCom.jsx +++ b/src/components/transactions/TransactionsCom.jsx @@ -1,5 +1,6 @@ import React, { useState } from 'react' import { useQuery } from "@tanstack/react-query"; +import {Link} from 'react-router-dom' import BreadcrumbCom from '../breadcrumb/BreadcrumbCom' import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper' @@ -10,6 +11,7 @@ import queryKeys from '../../services/queryKeys' import { getTransactions } from '../../services/siteServices' import getDateFromDateString from '../../helpers/GetDateFromDateString'; import localImgLoader from '../../helpers/localImageLoader'; +import RouteLinks from '../../RouteLinks'; export default function TransactionsCom() { @@ -86,7 +88,9 @@ export default function TransactionsCom() {
- + + +
diff --git a/src/pages/TransactionDetailsPage.jsx b/src/pages/TransactionDetailsPage.jsx new file mode 100644 index 0000000..fcec4ed --- /dev/null +++ b/src/pages/TransactionDetailsPage.jsx @@ -0,0 +1,18 @@ +import React, { useEffect } from 'react' +import {useLocation, useNavigate} from 'react-router-dom' +import TransactionDetailsCom from '../components/transactionDetails/TransactionDetailsCom' + + +export default function TransactionDetailsPage() { + const {state} = useLocation() + const navigate = useNavigate() + + useEffect(()=>{ + if(!state?.transactionID){ + navigate('/', {replace: true}) + } + },[]) + return ( + + ) +} diff --git a/src/services/queryKeys.js b/src/services/queryKeys.js index 72aad99..ee2b9bf 100644 --- a/src/services/queryKeys.js +++ b/src/services/queryKeys.js @@ -2,6 +2,8 @@ const queryKeys = { dashboard: ['dashboard'], loans: ['loans'], transactions: ['transactions'], + repayment_schedule: ['repayment-schedule'], + loan_charges: ['loan-charges'], apply_loan: ['apply'], select_loan: ['select-loan'], approved_loan: ['approved-loan'], diff --git a/src/services/siteServices.js b/src/services/siteServices.js index 01e85ab..13b82d0 100644 --- a/src/services/siteServices.js +++ b/src/services/siteServices.js @@ -77,5 +77,11 @@ export const getRepayments = (reqData) => { // FUNCTION TO GET LOAN CHARGES TABLE export const getLoanCharges = (reqData) => { const postData = { ...reqData } - return getAuxEnd(`/transactions`, postData) + return getAuxEnd(`/loan-charges`, postData) +} + +// FUNCTION TO GET REPAYMENT SCHEDULE TABLE +export const getRepaymentSchedule = (reqData) => { + const postData = { ...reqData } + return getAuxEnd(`/repayment-schedules`, postData) } \ No newline at end of file -- 2.34.1