From 397146d4c696506404fa3e9e3ede2df21c928d47 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Wed, 30 Apr 2025 09:02:55 +0100 Subject: [PATCH] modified transaction details page --- src/components/breadcrumb/BreadcrumbCom.jsx | 2 +- src/components/loanscom/LoansCom.jsx | 18 +- .../transactionDetails/LoanChargeDetails.jsx | 135 +++++++------ .../transactionDetails/LoanDetails.jsx | 180 +++++++++--------- .../RepaymentScheduleDetails.jsx | 152 +++++++-------- .../transactionDetails/TransactionDetails.jsx | 139 +++++++------- .../TransactionDetailsCom.jsx | 2 +- src/helpers/formatNumber.js | 6 +- 8 files changed, 306 insertions(+), 328 deletions(-) diff --git a/src/components/breadcrumb/BreadcrumbCom.jsx b/src/components/breadcrumb/BreadcrumbCom.jsx index 5ff71a3..7bf98dc 100644 --- a/src/components/breadcrumb/BreadcrumbCom.jsx +++ b/src/components/breadcrumb/BreadcrumbCom.jsx @@ -30,7 +30,7 @@ export default function BreadcrumbCom({title, span, paths}) {

{title}

- {span && span} + {span && span}
diff --git a/src/components/loanscom/LoansCom.jsx b/src/components/loanscom/LoansCom.jsx index 6cef16c..cfcc321 100644 --- a/src/components/loanscom/LoansCom.jsx +++ b/src/components/loanscom/LoansCom.jsx @@ -1,5 +1,6 @@ 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' @@ -10,6 +11,7 @@ import queryKeys from '../../services/queryKeys' import { getLoans } from '../../services/siteServices' import getDateFromDateString from '../../helpers/GetDateFromDateString'; import formatNumber from '../../helpers/formatNumber' +import RouteLinks from '../../RouteLinks'; export default function LoansCom() { @@ -47,10 +49,10 @@ export default function LoansCom() { Loan Amount - Repay Amount + Product/Tenor - Install Amount + Repay/Install Amount Added @@ -68,7 +70,7 @@ export default function LoansCom() { Jese image
{item?.account_id || ''}
-
{item?.customer_id}
+
{item?.id} : {item?.transaction_id}
@@ -80,12 +82,14 @@ export default function LoansCom() {
-
{formatNumber(item?.repayment_amount)}
+
{formatNumber(0)}
+
{formatNumber(0)}
{formatNumber(item?.installment_amount)}
+
{formatNumber(item?.repayment_amount)}
@@ -96,7 +100,9 @@ export default function LoansCom() {
- + + +
@@ -104,7 +110,7 @@ export default function LoansCom() { )) : - +
No Record Found
diff --git a/src/components/transactionDetails/LoanChargeDetails.jsx b/src/components/transactionDetails/LoanChargeDetails.jsx index 69ae923..91fc01e 100644 --- a/src/components/transactionDetails/LoanChargeDetails.jsx +++ b/src/components/transactionDetails/LoanChargeDetails.jsx @@ -1,7 +1,6 @@ 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' @@ -22,11 +21,11 @@ export default function LoanChargeDetails({transactionID}) { }) const loanCharges = data?.data?.loan_charges // LOAN CHARGES LIST - const pagination = data?.data?.pagination + // const pagination = data?.data?.pagination return (
-

Loan Charges

+

Loan Charges

{isFetching ? <>

Loading...

@@ -34,75 +33,69 @@ export default function LoanChargeDetails({transactionID}) { : 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 + + + + + {/* */} + + + + + + + {(loanCharges && loanCharges.length > 0) ? loanCharges?.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 +
+
}
) diff --git a/src/components/transactionDetails/LoanDetails.jsx b/src/components/transactionDetails/LoanDetails.jsx index b2fd88b..ec8a139 100644 --- a/src/components/transactionDetails/LoanDetails.jsx +++ b/src/components/transactionDetails/LoanDetails.jsx @@ -1,7 +1,6 @@ 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' @@ -18,102 +17,97 @@ export default function LoanDetails({transactionID}) { }) const loans = allLoans?.data?.loans // LOANS LIST - const loansCount = allLoans?.data?.count // LOANS LIST COUNT - // console.log('LOANS', loans) + // const loansCount = allLoans?.data?.count // LOANS LIST COUNT return ( -
-

Loans

- {isFetching ? - <> + <> + {isFetching ? +
+

Loans

Loading...

- - : isError ? +
+ : isError ? +
+

Loans

{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 +
+ : (loans && loans.length > 0) ? +
+

Loans

+ + + + + + + + + + + + + {loans?.map((item, index) => ( + + + + + + + - - } - -
+ Name + + Loan Amount + + Product/Tenor + + Repay/Install Amount + + Added + + Action +
+
+ Jese image +
+
{item?.account_id || ''}
+
{item?.id} : {item?.transaction_id}
+
+
+ 		+
+ {/*
{formatNumber(item?.initial_loan_amount)}
*/} +
{formatNumber(item?.initial_loan_amount)}
+
+ 		+
+
{formatNumber(0)}
+
{formatNumber(0)}
+
+ 		+
+
{formatNumber(item?.installment_amount)}
+
{formatNumber(item?.repayment_amount)}
+
+ 		+
+
{getDateFromDateString(item?.created_at)}
+
+ 		+
+
+
-
- - )} - - } -
+ +
+
+ : + null + } + ) } \ No newline at end of file diff --git a/src/components/transactionDetails/RepaymentScheduleDetails.jsx b/src/components/transactionDetails/RepaymentScheduleDetails.jsx index 6cd179e..70c77b9 100644 --- a/src/components/transactionDetails/RepaymentScheduleDetails.jsx +++ b/src/components/transactionDetails/RepaymentScheduleDetails.jsx @@ -1,7 +1,6 @@ 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' @@ -21,14 +20,12 @@ export default function RepaymentScheduleDetails({transactionID}) { // placeholderData: keepPreviousData, }) - console.log('data', data) - const loanCharges = data?.data?.repayment_schedules // LOAN CHARGES LIST - const pagination = data?.data?.pagination + // const pagination = data?.data?.pagination return (
-

Repayment Schedule

+

Repayment Schedule

{isFetching ? <>

Loading...

@@ -36,82 +33,77 @@ export default function RepaymentScheduleDetails({transactionID}) { : 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 + + + + + {/* */} + + + + + + + + {(loanCharges && loanCharges.length > 0) ? loanCharges?.map((item, index) => ( + + + + + + - - } - -
+ Name + + Loan + + Repay Amount + + Install Amount + + Due Date + + Action +
+
+ Jese image +
+ {/*
{item?.transaction_id || ''}
+
{item?.description}
*/} +
have no idea how to get this yet
+
+
+ 		+
+
{formatNumber(item?.total_repayment_amount)}
+
+ 		+
+
{formatNumber(item?.installment_amount)}
+
+ 		+
+
{getDateFromDateString(item?.due_date)}
+
+ 		+
+
+
-
- - )} - +
+
+
+ No Record Found +
+
}
) diff --git a/src/components/transactionDetails/TransactionDetails.jsx b/src/components/transactionDetails/TransactionDetails.jsx index 8b45e3a..93d2209 100644 --- a/src/components/transactionDetails/TransactionDetails.jsx +++ b/src/components/transactionDetails/TransactionDetails.jsx @@ -1,15 +1,12 @@ 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}) { @@ -23,11 +20,11 @@ export default function TransactionDetails({transactionID}) { }) const transactions = data?.data?.transactions // TRANSACTIONS LIST - const pagination = data?.data?.pagination + // const pagination = data?.data?.pagination return (
-

Transactions

+

Transactions

{isFetching ? <>

Loading...

@@ -35,77 +32,69 @@ export default function TransactionDetails({transactionID}) { : 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 + + + + + + + + + + + {(transactions && transactions.length > 0) ? transactions?.map((item, index) => ( + + + + - - } - -
+ Request + + Account + + Activity + + Action +
+
+ Icon +
+
{item?.transaction_id}
+
{getDateFromDateString(item?.created_at)}
+
+
+ 		+
+
{item?.account_id}
+
{item?.type}
+
+ 		+
+
50%
+
+
-
- - )} - +
+ 		+
+
+ +
+
+
+
+ No Record Found +
+
}
) diff --git a/src/components/transactionDetails/TransactionDetailsCom.jsx b/src/components/transactionDetails/TransactionDetailsCom.jsx index 3c318d9..d56f88c 100644 --- a/src/components/transactionDetails/TransactionDetailsCom.jsx +++ b/src/components/transactionDetails/TransactionDetailsCom.jsx @@ -8,7 +8,7 @@ import RepaymentScheduleDetails from './RepaymentScheduleDetails' export default function TransactionDetailsCom({id}) { return (
- + diff --git a/src/helpers/formatNumber.js b/src/helpers/formatNumber.js index c0b5016..0967480 100644 --- a/src/helpers/formatNumber.js +++ b/src/helpers/formatNumber.js @@ -1,6 +1,10 @@ const formatNumber = (number = 0) => { - return new Intl.NumberFormat().format(number); + // return new Intl.NumberFormat().format(number); // return number.toFixed(2); + return number.toLocaleString('en-US', { + minimumFractionDigits: 2, + maximumFractionDigits: 2 + }); }; export default formatNumber \ No newline at end of file