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

Merge branch 'transaction-details-modification' of DigiFi/digifi-FirstOffice into master

Browse Source
This commit is contained in:
Olusesan Ameye
2025-04-30 08:07:05 +00:00
committed by Gogs
parent 3a5f3662aa 397146d4c6
commit eb9ec59eb2
8 changed files with 306 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/breadcrumb/BreadcrumbCom.jsx
+1 -1
View File
@@ -30,7 +30,7 @@ export default function BreadcrumbCom({title, span, paths}) {
<div className='flex flex-col gap-2'> <div className='flex flex-col gap-2'>
<div className='flex flex-col md:flex-row gap-1 md:items-center'> <div className='flex flex-col md:flex-row gap-1 md:items-center'>
<h1 className='text-12 sm:text-lg md:text-2xl text-black dark:text-white-body font-semibold'>{title}</h1> <h1 className='text-12 sm:text-lg md:text-2xl text-black dark:text-white-body font-semibold'>{title}</h1>
<span className='text-red-500 text-10 sm:text-base md:text-xl'>{span && span}</span> <span className='text-red-500 text-10 sm:text-base'>{span && span}</span>
</div> </div>
<div className='flex gap-2 items-center text-black-gray dark:text-white-body text-base'> <div className='flex gap-2 items-center text-black-gray dark:text-white-body text-base'>
<TiHomeOutline className='text-black dark:text-white-body' /> <TiHomeOutline className='text-black dark:text-white-body' />
src/components/loanscom/LoansCom.jsx
+12 -6
View File
@@ -1,5 +1,6 @@
import React from 'react' import React from 'react'
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import {Link} from 'react-router-dom'
import BreadcrumbCom from '../breadcrumb/BreadcrumbCom' import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
import TableWrapper from '../tableWrapper/TableWrapper' import TableWrapper from '../tableWrapper/TableWrapper'
@@ -10,6 +11,7 @@ import queryKeys from '../../services/queryKeys'
import { getLoans } from '../../services/siteServices' import { getLoans } from '../../services/siteServices'
import getDateFromDateString from '../../helpers/GetDateFromDateString'; import getDateFromDateString from '../../helpers/GetDateFromDateString';
import formatNumber from '../../helpers/formatNumber' import formatNumber from '../../helpers/formatNumber'
import RouteLinks from '../../RouteLinks';
export default function LoansCom() { export default function LoansCom() {
@@ -47,10 +49,10 @@ export default function LoansCom() {
Loan Amount Loan Amount
</th> </th>
<th scope="col" className="px-2 text-right"> <th scope="col" className="px-2 text-right">
Repay Amount Product/Tenor
</th> </th>
<th scope="col" className="px-2 text-right"> <th scope="col" className="px-2 text-right">
Install Amount Repay/Install Amount
</th> </th>
<th scope="col" className="px-2 text-right"> <th scope="col" className="px-2 text-right">
Added Added
@@ -68,7 +70,7 @@ export default function LoansCom() {
<img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" /> <img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />
<div className="text-left"> <div className="text-left">
<div className="text-base font-semibold">{item?.account_id || ''}</div> <div className="text-base font-semibold">{item?.account_id || ''}</div>
<div className="font-normal text-gray-500">{item?.customer_id}</div> <div className="font-normal text-gray-500">{item?.id} : {item?.transaction_id}</div>
</div> </div>
</div> </div>
</td> </td>
@@ -80,12 +82,14 @@ export default function LoansCom() {
</td> </td>
<td className="px-2"> <td className="px-2">
<div className="text-right"> <div className="text-right">
<div className="font-normal text-gray-500">{formatNumber(item?.repayment_amount)}</div> <div className="font-normal text-gray-500">{formatNumber(0)}</div>
<div className="font-normal text-gray-500">{formatNumber(0)}</div>
</div> </div>
</td> </td>
<td className="px-2"> <td className="px-2">
<div className="text-right"> <div className="text-right">
<div className="font-normal text-gray-500">{formatNumber(item?.installment_amount)}</div> <div className="font-normal text-gray-500">{formatNumber(item?.installment_amount)}</div>
<div className="font-normal text-gray-500">{formatNumber(item?.repayment_amount)}</div>
</div> </div>
</td> </td>
<td className="px-2"> <td className="px-2">
@@ -96,7 +100,9 @@ export default function LoansCom() {
<td className="px-2 text-right"> <td className="px-2 text-right">
<div className='flex items-center justify-end gap-3 md:gap-4'> <div className='flex items-center justify-end gap-3 md:gap-4'>
<div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'> <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
<Icons name='eye' /> <Link to={RouteLinks.transaction_details_page} state={{transactionID: item?.transaction_id}}>
<Icons name='eye' />
</Link>
</div> </div>
</div> </div>
</td> </td>
@@ -104,7 +110,7 @@ export default function LoansCom() {
)) ))
: :
<tr className="py-2 border-t border-dashed border-slate-300"> <tr className="py-2 border-t border-dashed border-slate-300">
<td className="px-3 py-2" colSpan={4}> <td className="px-3 py-2" colSpan={6}>
<div className="flex justify-center items-center"> <div className="flex justify-center items-center">
No Record Found No Record Found
</div> </div>
src/components/transactionDetails/LoanChargeDetails.jsx
+64 -71
View File
@@ -1,7 +1,6 @@
import React, { useState } from 'react' import React, { useState } from 'react'
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
import Icons from '../Icons' import Icons from '../Icons'
import Avatar from '../../assets/user_avatar.jpg' 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 loanCharges = data?.data?.loan_charges // LOAN CHARGES LIST
const pagination = data?.data?.pagination // const pagination = data?.data?.pagination
return ( return (
<div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'> <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
<p className='font-bold text-base'>Loan Charges</p> <p className='pb-4 font-bold text-base'>Loan Charges</p>
{isFetching ? {isFetching ?
<> <>
<p className='text-slate-800'>Loading...</p> <p className='text-slate-800'>Loading...</p>
@@ -34,75 +33,69 @@ export default function LoanChargeDetails({transactionID}) {
: isError ? : isError ?
<p className='text-red-500'>{error.message}</p> <p className='text-red-500'>{error.message}</p>
: :
<TablePaginatedWrapper data={loanCharges} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}> <table className="py-2 w-full text-sm">
{({ data }) => ( <thead className="py-2 text-sm text-slate-500 text-left">
<> <tr>
<table className="py-2 w-full text-sm"> <th scope="col" className="px-2 py-2">
<thead className="py-2 text-sm text-slate-500 text-left"> Name
<tr> </th>
<th scope="col" className="px-2 py-2"> {/* <th scope="col" className="px-2">
Name Loan
</th> </th> */}
{/* <th scope="col" className="px-2"> <th scope="col" className="px-2 text-right">
Loan Amount
</th> */} </th>
<th scope="col" className="px-2 text-right"> <th scope="col" className="px-2 text-right">
Amount Added
</th> </th>
<th scope="col" className="px-2 text-right"> <th scope="col" className="px-2 text-right">
Added Action
</th> </th>
<th scope="col" className="px-2 text-right"> </tr>
Action </thead>
</th> <tbody>
</tr> {(loanCharges && loanCharges.length > 0) ? loanCharges?.map((item, index) => (
</thead> <tr key={index} className="py-2 border-t border-dashed border-slate-300">
<tbody> <td className="px-2 py-2">
{(data && data.length > 0) ? data?.map((item, index) => ( <div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
<tr key={index} className="py-2 border-t border-dashed border-slate-300"> <img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />
<td className="px-2 py-2"> <div className="text-left">
<div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'> <div className="text-base font-semibold">{item?.transaction_id || ''}</div>
<img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" /> <div className="font-normal text-gray-500 line-clamp-1">{item?.description}</div>
<div className="text-left"> </div>
<div className="text-base font-semibold">{item?.transaction_id || ''}</div> </div>
<div className="font-normal text-gray-500 line-clamp-1">{item?.description}</div> </td>
</div> <td className="px-2">
</div> <div className="text-right">
</td> {/* <div className="text-base font-semibold">{formatNumber(item?.initial_loan_amount)}</div> */}
<td className="px-2"> <div className="font-normal text-gray-500">{formatNumber(item?.amount)}</div>
<div className="text-right"> </div>
{/* <div className="text-base font-semibold">{formatNumber(item?.initial_loan_amount)}</div> */} </td>
<div className="font-normal text-gray-500">{formatNumber(item?.amount)}</div> <td className="px-2">
</div> <div className="text-right">
</td> <div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</div>
<td className="px-2"> </div>
<div className="text-right"> </td>
<div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</div> <td className="px-2 text-right">
</div> <div className='flex items-center justify-end gap-3 md:gap-4'>
</td> <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
<td className="px-2 text-right"> <Icons name='eye' />
<div className='flex items-center justify-end gap-3 md:gap-4'>
<div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
<Icons name='eye' />
</div>
</div>
</td>
</tr>
))
:
<tr className="py-2 border-t border-dashed border-slate-300">
<td className="px-3 py-2" colSpan={4}>
<div className="flex justify-center items-center">
No Record Found
</div> </div>
</td> </div>
</tr> </td>
} </tr>
</tbody> ))
</table> :
</> <tr className="py-2 border-t border-dashed border-slate-300">
)} <td className="px-3 py-2" colSpan={4}>
</TablePaginatedWrapper> <div className="flex justify-center items-center">
No Record Found
</div>
</td>
</tr>
}
</tbody>
</table>
} }
</div> </div>
) )
src/components/transactionDetails/LoanDetails.jsx
+87 -93
View File
@@ -1,7 +1,6 @@
import React from 'react' import React from 'react'
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import TableWrapper from '../tableWrapper/TableWrapper'
import Icons from '../Icons' import Icons from '../Icons'
import Avatar from '../../assets/user_avatar.jpg' import Avatar from '../../assets/user_avatar.jpg'
@@ -18,102 +17,97 @@ export default function LoanDetails({transactionID}) {
}) })
const loans = allLoans?.data?.loans // LOANS LIST const loans = allLoans?.data?.loans // LOANS LIST
const loansCount = allLoans?.data?.count // LOANS LIST COUNT // const loansCount = allLoans?.data?.count // LOANS LIST COUNT
// console.log('LOANS', loans)
return ( return (
<div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'> <>
<p className='font-bold text-base'>Loans</p> {isFetching ?
{isFetching ? <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
<> <p className='pb-4 font-bold text-base'>Loans</p>
<p className='text-slate-800'>Loading...</p> <p className='text-slate-800'>Loading...</p>
</> </div>
: isError ? : isError ?
<div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
<p className='pb-4 font-bold text-base'>Loans</p>
<p className='text-red-500'>{error.message}</p> <p className='text-red-500'>{error.message}</p>
: </div>
<TableWrapper data={loans} itemsPerPage={15}> : (loans && loans.length > 0) ?
{({ data }) => ( <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
<> <p className='pb-4 font-bold text-base'>Loans</p>
<table className="table-auto py-2 w-full text-sm"> <table className="table-auto py-2 w-full text-sm">
<thead className="py-2 text-sm text-slate-500 text-left"> <thead className="py-2 text-sm text-slate-500 text-left">
<tr> <tr>
<th scope="col" className="px-2 py-2"> <th scope="col" className="px-2 py-2">
Name Name
</th> </th>
<th scope="col" className="px-2 text-right"> <th scope="col" className="px-2 text-right">
Loan Amount Loan Amount
</th> </th>
<th scope="col" className="px-2 text-right"> <th scope="col" className="px-2 text-right">
Repay Amount Product/Tenor
</th> </th>
<th scope="col" className="px-2 text-right"> <th scope="col" className="px-2 text-right">
Install Amount Repay/Install Amount
</th> </th>
<th scope="col" className="px-2 text-right"> <th scope="col" className="px-2 text-right">
Added Added
</th> </th>
<th scope="col" className="px-2 text-right"> <th scope="col" className="px-2 text-right">
Action Action
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{(data && data.length > 0) ? data?.map((item, index) => ( {loans?.map((item, index) => (
<tr key={index} className="py-2 border-t border-dashed border-slate-300"> <tr key={index} className="py-2 border-t border-dashed border-slate-300">
<td className="px-2 py-2"> <td className="px-2 py-2">
<div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'> <div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
<img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" /> <img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />
<div className="text-left"> <div className="text-left">
<div className="text-base font-semibold">{item?.account_id || ''}</div> <div className="text-base font-semibold">{item?.account_id || ''}</div>
<div className="font-normal text-gray-500">{item?.customer_id}</div> <div className="font-normal text-gray-500">{item?.id} : {item?.transaction_id}</div>
</div> </div>
</div> </div>
</td> </td>
<td className="px-2"> <td className="px-2">
<div className="text-right"> <div className="text-right">
{/* <div className="text-base font-semibold">{formatNumber(item?.initial_loan_amount)}</div> */} {/* <div className="text-base font-semibold">{formatNumber(item?.initial_loan_amount)}</div> */}
<div className="font-normal text-gray-500">{formatNumber(item?.initial_loan_amount)}</div> <div className="font-normal text-gray-500">{formatNumber(item?.initial_loan_amount)}</div>
</div> </div>
</td> </td>
<td className="px-2"> <td className="px-2">
<div className="text-right"> <div className="text-right">
<div className="font-normal text-gray-500">{formatNumber(item?.repayment_amount)}</div> <div className="font-normal text-gray-500">{formatNumber(0)}</div>
</div> <div className="font-normal text-gray-500">{formatNumber(0)}</div>
</td> </div>
<td className="px-2"> </td>
<div className="text-right"> <td className="px-2">
<div className="font-normal text-gray-500">{formatNumber(item?.installment_amount)}</div> <div className="text-right">
</div> <div className="font-normal text-gray-500">{formatNumber(item?.installment_amount)}</div>
</td> <div className="font-normal text-gray-500">{formatNumber(item?.repayment_amount)}</div>
<td className="px-2"> </div>
<div className="text-right"> </td>
<div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</div> <td className="px-2">
</div> <div className="text-right">
</td> <div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</div>
<td className="px-2 text-right"> </div>
<div className='flex items-center justify-end gap-3 md:gap-4'> </td>
<div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'> <td className="px-2 text-right">
<Icons name='eye' /> <div className='flex items-center justify-end gap-3 md:gap-4'>
</div> <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
</div> <Icons name='eye' />
</td>
</tr>
))
:
<tr className="py-2 border-t border-dashed border-slate-300">
<td className="px-3 py-2" colSpan={4}>
<div className="flex justify-center items-center">
No Record Found
</div> </div>
</td> </div>
</tr> </td>
} </tr>
</tbody> ))
</table> }
</> </tbody>
)} </table>
</TableWrapper> </div>
} :
</div> null
}
</>
) )
} }
src/components/transactionDetails/RepaymentScheduleDetails.jsx
+72 -80
View File
@@ -1,7 +1,6 @@
import React, { useState } from 'react' import React, { useState } from 'react'
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
import Icons from '../Icons' import Icons from '../Icons'
import Avatar from '../../assets/user_avatar.jpg' import Avatar from '../../assets/user_avatar.jpg'
@@ -21,14 +20,12 @@ export default function RepaymentScheduleDetails({transactionID}) {
// placeholderData: keepPreviousData, // placeholderData: keepPreviousData,
}) })
console.log('data', data)
const loanCharges = data?.data?.repayment_schedules // LOAN CHARGES LIST const loanCharges = data?.data?.repayment_schedules // LOAN CHARGES LIST
const pagination = data?.data?.pagination // const pagination = data?.data?.pagination
return ( return (
<div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'> <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
<p className='font-bold text-base'>Repayment Schedule</p> <p className='pb-4 font-bold text-base'>Repayment Schedule</p>
{isFetching ? {isFetching ?
<> <>
<p className='text-slate-800'>Loading...</p> <p className='text-slate-800'>Loading...</p>
@@ -36,82 +33,77 @@ export default function RepaymentScheduleDetails({transactionID}) {
: isError ? : isError ?
<p className='text-red-500'>{error.message}</p> <p className='text-red-500'>{error.message}</p>
: :
<TablePaginatedWrapper data={loanCharges} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}> <table className="py-2 w-full text-sm">
{({ data }) => ( <thead className="py-2 text-sm text-slate-500 text-left">
<> <tr>
<table className="py-2 w-full text-sm"> <th scope="col" className="px-2 py-2">
<thead className="py-2 text-sm text-slate-500 text-left"> Name
<tr> </th>
<th scope="col" className="px-2 py-2"> {/* <th scope="col" className="px-2">
Name Loan
</th> </th> */}
{/* <th scope="col" className="px-2"> <th scope="col" className="px-2 text-right">
Loan Repay Amount
</th> */} </th>
<th scope="col" className="px-2 text-right"> <th scope="col" className="px-2 text-right">
Repay Amount Install Amount
</th> </th>
<th scope="col" className="px-2 text-right"> <th scope="col" className="px-2 text-right">
Install Amount Due Date
</th> </th>
<th scope="col" className="px-2 text-right"> <th scope="col" className="px-2 text-right">
Due Date Action
</th> </th>
<th scope="col" className="px-2 text-right"> </tr>
Action </thead>
</th> <tbody>
</tr> {(loanCharges && loanCharges.length > 0) ? loanCharges?.map((item, index) => (
</thead> <tr key={index} className="py-2 border-t border-dashed border-slate-300">
<tbody> <td className="px-2 py-2">
{(data && data.length > 0) ? data?.map((item, index) => ( <div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
<tr key={index} className="py-2 border-t border-dashed border-slate-300"> <img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />
<td className="px-2 py-2"> <div className="text-left">
<div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'> {/* <div className="text-base font-semibold">{item?.transaction_id || ''}</div>
<img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" /> <div className="font-normal text-gray-500 line-clamp-1">{item?.description}</div> */}
<div className="text-left"> <div className="font-normal text-gray-500 line-clamp-1">have no idea how to get this yet</div>
<div className="text-base font-semibold">{item?.transaction_id || ''}</div> </div>
<div className="font-normal text-gray-500 line-clamp-1">{item?.description}</div> </div>
</div> </td>
</div> <td className="px-2">
</td> <div className="text-right">
<td className="px-2"> <div className="font-normal text-gray-500">{formatNumber(item?.total_repayment_amount)}</div>
<div className="text-right"> </div>
<div className="font-normal text-gray-500">{formatNumber(item?.total_repayment_amount)}</div> </td>
</div> <td className="px-2">
</td> <div className="text-right">
<td className="px-2"> <div className="font-normal text-gray-500">{formatNumber(item?.installment_amount)}</div>
<div className="text-right"> </div>
<div className="font-normal text-gray-500">{formatNumber(item?.installment_amount)}</div> </td>
</div> <td className="px-2">
</td> <div className="text-right">
<td className="px-2"> <div className="font-normal text-gray-500">{getDateFromDateString(item?.due_date)}</div>
<div className="text-right"> </div>
<div className="font-normal text-gray-500">{getDateFromDateString(item?.due_date)}</div> </td>
</div> <td className="px-2 text-right">
</td> <div className='flex items-center justify-end gap-3 md:gap-4'>
<td className="px-2 text-right"> <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
<div className='flex items-center justify-end gap-3 md:gap-4'> <Icons name='eye' />
<div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
<Icons name='eye' />
</div>
</div>
</td>
</tr>
))
:
<tr className="py-2 border-t border-dashed border-slate-300">
<td className="px-3 py-2" colSpan={5}>
<div className="flex justify-center items-center">
No Record Found
</div> </div>
</td> </div>
</tr> </td>
} </tr>
</tbody> ))
</table> :
</> <tr className="py-2 border-t border-dashed border-slate-300">
)} <td className="px-3 py-2" colSpan={5}>
</TablePaginatedWrapper> <div className="flex justify-center items-center">
No Record Found
</div>
</td>
</tr>
}
</tbody>
</table>
} }
</div> </div>
) )
src/components/transactionDetails/TransactionDetails.jsx
+64 -75
View File
@@ -1,15 +1,12 @@
import React, { useState } from 'react' import React, { useState } from 'react'
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import {Link} from 'react-router-dom'
import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
import Icons from '../Icons' import Icons from '../Icons'
import queryKeys from '../../services/queryKeys' import queryKeys from '../../services/queryKeys'
import { getTransactions } from '../../services/siteServices' import { getTransactions } from '../../services/siteServices'
import getDateFromDateString from '../../helpers/GetDateFromDateString'; import getDateFromDateString from '../../helpers/GetDateFromDateString';
import localImgLoader from '../../helpers/localImageLoader'; import localImgLoader from '../../helpers/localImageLoader';
import RouteLinks from '../../RouteLinks';
export default function TransactionDetails({transactionID}) { export default function TransactionDetails({transactionID}) {
@@ -23,11 +20,11 @@ export default function TransactionDetails({transactionID}) {
}) })
const transactions = data?.data?.transactions // TRANSACTIONS LIST const transactions = data?.data?.transactions // TRANSACTIONS LIST
const pagination = data?.data?.pagination // const pagination = data?.data?.pagination
return ( return (
<div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'> <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
<p className='font-bold text-base'>Transactions</p> <p className='pb-4 font-bold text-base'>Transactions</p>
{isFetching ? {isFetching ?
<> <>
<p className='text-slate-800'>Loading...</p> <p className='text-slate-800'>Loading...</p>
@@ -35,77 +32,69 @@ export default function TransactionDetails({transactionID}) {
: isError ? : isError ?
<p className='text-red-500'>{error.message}</p> <p className='text-red-500'>{error.message}</p>
: :
<TablePaginatedWrapper data={transactions} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}> <table className="py-2 w-full text-sm">
{({ data }) => ( <thead className="py-2 text-sm text-slate-500 text-left">
<> <tr>
<table className="py-2 w-full text-sm"> <th scope="col" className="px-2 py-2">
<thead className="py-2 text-sm text-slate-500 text-left"> Request
<tr> </th>
<th scope="col" className="px-2 py-2"> <th scope="col" className="px-2">
Request Account
</th> </th>
<th scope="col" className="px-2"> <th scope="col" className="px-2">
Account Activity
</th> </th>
<th scope="col" className="px-2"> <th scope="col" className="px-2 text-right">
Activity Action
</th> </th>
<th scope="col" className="px-2 text-right"> </tr>
Action </thead>
</th> <tbody>
</tr> {(transactions && transactions.length > 0) ? transactions?.map((item, index) => (
</thead> <tr key={index} className="py-2 border-t border-dashed border-slate-300">
<tbody> <td className="px-2 py-2">
{(data && data.length > 0) ? data?.map((item, index) => ( <div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
<tr key={index} className="py-2 border-t border-dashed border-slate-300"> <img className="w-10 h-10 rounded-md" src={localImgLoader(`loan_icons/${item?.type}.png`)} alt="Icon" />
<td className="px-2 py-2"> <div className="text-left">
<div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'> <div className="text-base font-semibold">{item?.transaction_id}</div>
<img className="w-10 h-10 rounded-md" src={localImgLoader(`loan_icons/${item?.type}.png`)} alt="Icon" /> <div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</div>
<div className="text-left"> </div>
<div className="text-base font-semibold">{item?.transaction_id}</div> </div>
<div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</div> </td>
</div> <td className="px-2">
</div> <div className="text-left">
</td> <div className="text-base font-semibold">{item?.account_id}</div>
<td className="px-2"> <div className="font-normal text-gray-500">{item?.type}</div>
<div className="text-left"> </div>
<div className="text-base font-semibold">{item?.account_id}</div> </td>
<div className="font-normal text-gray-500">{item?.type}</div> <td className="px-2">
</div> <div className="text-left">
</td> <div className="font-normal text-gray-500">50%</div>
<td className="px-2"> <div className="relative h-[6px] w-full bg-white-body dark:bg-black-body rounded-full overflow-hidden">
<div className="text-left"> <div className={`absolute left-0 h-full w-1/2 bg-emerald-600`}></div>
<div className="font-normal text-gray-500">50%</div>
<div className="relative h-[6px] w-full bg-white-body dark:bg-black-body rounded-full overflow-hidden">
<div className={`absolute left-0 h-full w-1/2 bg-emerald-600`}></div>
</div>
</div>
</td>
<td className="px-2 text-right">
<div className='flex items-center justify-end gap-3 md:gap-4'>
<div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
<Link to={RouteLinks.transaction_details_page} state={{transactionID: item?.transaction_id}}>
<Icons name='eye' />
</Link>
</div>
</div>
</td>
</tr>
))
:
<tr className="py-2 border-t border-dashed border-slate-300">
<td className="px-3 py-2" colSpan={4}>
<div className="flex justify-center items-center">
No Record Found
</div> </div>
</td> </div>
</tr> </td>
} <td className="px-2 text-right">
</tbody> <div className='flex items-center justify-end gap-3 md:gap-4'>
</table> <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
</> <Icons name='eye' />
)} </div>
</TablePaginatedWrapper> </div>
</td>
</tr>
))
:
<tr className="py-2 border-t border-dashed border-slate-300">
<td className="px-3 py-2" colSpan={4}>
<div className="flex justify-center items-center">
No Record Found
</div>
</td>
</tr>
}
</tbody>
</table>
} }
</div> </div>
) )
src/components/transactionDetails/TransactionDetailsCom.jsx
+1 -1
View File
@@ -8,7 +8,7 @@ import RepaymentScheduleDetails from './RepaymentScheduleDetails'
export default function TransactionDetailsCom({id}) { export default function TransactionDetailsCom({id}) {
return ( return (
<div className='w-full flex flex-col gap-8'> <div className='w-full flex flex-col gap-8'>
<BreadcrumbCom title='Transaction Details' paths={['Dashboard', 'Transactions Details']} /> <BreadcrumbCom title='Transaction Details' span={`[${id}]`} paths={['Dashboard', 'Transactions Details']} />
<TransactionDetails transactionID={id} /> <TransactionDetails transactionID={id} />
<LoanDetails transactionID={id} /> <LoanDetails transactionID={id} />
<RepaymentScheduleDetails transactionID={id} /> <RepaymentScheduleDetails transactionID={id} />
src/helpers/formatNumber.js
+5 -1
View File
@@ -1,6 +1,10 @@
const formatNumber = (number = 0) => { const formatNumber = (number = 0) => {
return new Intl.NumberFormat().format(number); // return new Intl.NumberFormat().format(number);
// return number.toFixed(2); // return number.toFixed(2);
return number.toLocaleString('en-US', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
}; };
export default formatNumber export default formatNumber