modified transaction details page
This commit was merged in pull request #23.
This commit is contained in:
victorAnumudu
@@ -30,7 +30,7 @@ export default function BreadcrumbCom({title, span, paths}) {
|
||||
<div className='flex flex-col gap-2'>
|
||||
<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>
|
||||
<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 className='flex gap-2 items-center text-black-gray dark:text-white-body text-base'>
|
||||
<TiHomeOutline className='text-black dark:text-white-body' />
|
||||
|
||||
@@ -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
|
||||
</th>
|
||||
<th scope="col" className="px-2 text-right">
|
||||
Repay Amount
|
||||
Product/Tenor
|
||||
</th>
|
||||
<th scope="col" className="px-2 text-right">
|
||||
Install Amount
|
||||
Repay/Install Amount
|
||||
</th>
|
||||
<th scope="col" className="px-2 text-right">
|
||||
Added
|
||||
@@ -68,7 +70,7 @@ export default function LoansCom() {
|
||||
<img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />
|
||||
<div className="text-left">
|
||||
<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>
|
||||
</td>
|
||||
@@ -80,12 +82,14 @@ export default function LoansCom() {
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<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>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<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?.repayment_amount)}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
@@ -96,7 +100,9 @@ export default function LoansCom() {
|
||||
<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'>
|
||||
<Icons name='eye' />
|
||||
<Link to={RouteLinks.transaction_details_page} state={{transactionID: item?.transaction_id}}>
|
||||
<Icons name='eye' />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
@@ -104,7 +110,7 @@ export default function LoansCom() {
|
||||
))
|
||||
:
|
||||
<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">
|
||||
No Record Found
|
||||
</div>
|
||||
|
||||
@@ -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 (
|
||||
<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 ?
|
||||
<>
|
||||
<p className='text-slate-800'>Loading...</p>
|
||||
@@ -34,75 +33,69 @@ export default function LoanChargeDetails({transactionID}) {
|
||||
: isError ?
|
||||
<p className='text-red-500'>{error.message}</p>
|
||||
:
|
||||
<TablePaginatedWrapper data={loanCharges} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
|
||||
{({ data }) => (
|
||||
<>
|
||||
<table className="py-2 w-full text-sm">
|
||||
<thead className="py-2 text-sm text-slate-500 text-left">
|
||||
<tr>
|
||||
<th scope="col" className="px-2 py-2">
|
||||
Name
|
||||
</th>
|
||||
{/* <th scope="col" className="px-2">
|
||||
Loan
|
||||
</th> */}
|
||||
<th scope="col" className="px-2 text-right">
|
||||
Amount
|
||||
</th>
|
||||
<th scope="col" className="px-2 text-right">
|
||||
Added
|
||||
</th>
|
||||
<th scope="col" className="px-2 text-right">
|
||||
Action
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(data && data.length > 0) ? data?.map((item, index) => (
|
||||
<tr key={index} className="py-2 border-t border-dashed border-slate-300">
|
||||
<td className="px-2 py-2">
|
||||
<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" />
|
||||
<div className="text-left">
|
||||
<div className="text-base font-semibold">{item?.transaction_id || ''}</div>
|
||||
<div className="font-normal text-gray-500 line-clamp-1">{item?.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-right">
|
||||
{/* <div className="text-base font-semibold">{formatNumber(item?.initial_loan_amount)}</div> */}
|
||||
<div className="font-normal text-gray-500">{formatNumber(item?.amount)}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-right">
|
||||
<div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</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'>
|
||||
<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
|
||||
<table className="py-2 w-full text-sm">
|
||||
<thead className="py-2 text-sm text-slate-500 text-left">
|
||||
<tr>
|
||||
<th scope="col" className="px-2 py-2">
|
||||
Name
|
||||
</th>
|
||||
{/* <th scope="col" className="px-2">
|
||||
Loan
|
||||
</th> */}
|
||||
<th scope="col" className="px-2 text-right">
|
||||
Amount
|
||||
</th>
|
||||
<th scope="col" className="px-2 text-right">
|
||||
Added
|
||||
</th>
|
||||
<th scope="col" className="px-2 text-right">
|
||||
Action
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(loanCharges && loanCharges.length > 0) ? loanCharges?.map((item, index) => (
|
||||
<tr key={index} className="py-2 border-t border-dashed border-slate-300">
|
||||
<td className="px-2 py-2">
|
||||
<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" />
|
||||
<div className="text-left">
|
||||
<div className="text-base font-semibold">{item?.transaction_id || ''}</div>
|
||||
<div className="font-normal text-gray-500 line-clamp-1">{item?.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-right">
|
||||
{/* <div className="text-base font-semibold">{formatNumber(item?.initial_loan_amount)}</div> */}
|
||||
<div className="font-normal text-gray-500">{formatNumber(item?.amount)}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-right">
|
||||
<div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</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'>
|
||||
<Icons name='eye' />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</>
|
||||
)}
|
||||
</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>
|
||||
)
|
||||
|
||||
@@ -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 (
|
||||
<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>
|
||||
</>
|
||||
: isError ?
|
||||
</div>
|
||||
: 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>
|
||||
:
|
||||
<TableWrapper data={loans} itemsPerPage={15}>
|
||||
{({ data }) => (
|
||||
<>
|
||||
<table className="table-auto py-2 w-full text-sm">
|
||||
<thead className="py-2 text-sm text-slate-500 text-left">
|
||||
<tr>
|
||||
<th scope="col" className="px-2 py-2">
|
||||
Name
|
||||
</th>
|
||||
<th scope="col" className="px-2 text-right">
|
||||
Loan Amount
|
||||
</th>
|
||||
<th scope="col" className="px-2 text-right">
|
||||
Repay Amount
|
||||
</th>
|
||||
<th scope="col" className="px-2 text-right">
|
||||
Install Amount
|
||||
</th>
|
||||
<th scope="col" className="px-2 text-right">
|
||||
Added
|
||||
</th>
|
||||
<th scope="col" className="px-2 text-right">
|
||||
Action
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(data && data.length > 0) ? data?.map((item, index) => (
|
||||
<tr key={index} className="py-2 border-t border-dashed border-slate-300">
|
||||
<td className="px-2 py-2">
|
||||
<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" />
|
||||
<div className="text-left">
|
||||
<div className="text-base font-semibold">{item?.account_id || ''}</div>
|
||||
<div className="font-normal text-gray-500">{item?.customer_id}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-right">
|
||||
{/* <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>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-right">
|
||||
<div className="font-normal text-gray-500">{formatNumber(item?.repayment_amount)}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-right">
|
||||
<div className="font-normal text-gray-500">{formatNumber(item?.installment_amount)}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-right">
|
||||
<div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</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'>
|
||||
<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>
|
||||
: (loans && loans.length > 0) ?
|
||||
<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">
|
||||
<thead className="py-2 text-sm text-slate-500 text-left">
|
||||
<tr>
|
||||
<th scope="col" className="px-2 py-2">
|
||||
Name
|
||||
</th>
|
||||
<th scope="col" className="px-2 text-right">
|
||||
Loan Amount
|
||||
</th>
|
||||
<th scope="col" className="px-2 text-right">
|
||||
Product/Tenor
|
||||
</th>
|
||||
<th scope="col" className="px-2 text-right">
|
||||
Repay/Install Amount
|
||||
</th>
|
||||
<th scope="col" className="px-2 text-right">
|
||||
Added
|
||||
</th>
|
||||
<th scope="col" className="px-2 text-right">
|
||||
Action
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loans?.map((item, index) => (
|
||||
<tr key={index} className="py-2 border-t border-dashed border-slate-300">
|
||||
<td className="px-2 py-2">
|
||||
<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" />
|
||||
<div className="text-left">
|
||||
<div className="text-base font-semibold">{item?.account_id || ''}</div>
|
||||
<div className="font-normal text-gray-500">{item?.id} : {item?.transaction_id}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-right">
|
||||
{/* <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>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-right">
|
||||
<div className="font-normal text-gray-500">{formatNumber(0)}</div>
|
||||
<div className="font-normal text-gray-500">{formatNumber(0)}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<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?.repayment_amount)}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-right">
|
||||
<div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</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'>
|
||||
<Icons name='eye' />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</>
|
||||
)}
|
||||
</TableWrapper>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -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 (
|
||||
<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 ?
|
||||
<>
|
||||
<p className='text-slate-800'>Loading...</p>
|
||||
@@ -36,82 +33,77 @@ export default function RepaymentScheduleDetails({transactionID}) {
|
||||
: isError ?
|
||||
<p className='text-red-500'>{error.message}</p>
|
||||
:
|
||||
<TablePaginatedWrapper data={loanCharges} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
|
||||
{({ data }) => (
|
||||
<>
|
||||
<table className="py-2 w-full text-sm">
|
||||
<thead className="py-2 text-sm text-slate-500 text-left">
|
||||
<tr>
|
||||
<th scope="col" className="px-2 py-2">
|
||||
Name
|
||||
</th>
|
||||
{/* <th scope="col" className="px-2">
|
||||
Loan
|
||||
</th> */}
|
||||
<th scope="col" className="px-2 text-right">
|
||||
Repay Amount
|
||||
</th>
|
||||
<th scope="col" className="px-2 text-right">
|
||||
Install Amount
|
||||
</th>
|
||||
<th scope="col" className="px-2 text-right">
|
||||
Due Date
|
||||
</th>
|
||||
<th scope="col" className="px-2 text-right">
|
||||
Action
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(data && data.length > 0) ? data?.map((item, index) => (
|
||||
<tr key={index} className="py-2 border-t border-dashed border-slate-300">
|
||||
<td className="px-2 py-2">
|
||||
<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" />
|
||||
<div className="text-left">
|
||||
<div className="text-base font-semibold">{item?.transaction_id || ''}</div>
|
||||
<div className="font-normal text-gray-500 line-clamp-1">{item?.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-right">
|
||||
<div className="font-normal text-gray-500">{formatNumber(item?.total_repayment_amount)}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-right">
|
||||
<div className="font-normal text-gray-500">{formatNumber(item?.installment_amount)}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-right">
|
||||
<div className="font-normal text-gray-500">{getDateFromDateString(item?.due_date)}</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'>
|
||||
<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
|
||||
<table className="py-2 w-full text-sm">
|
||||
<thead className="py-2 text-sm text-slate-500 text-left">
|
||||
<tr>
|
||||
<th scope="col" className="px-2 py-2">
|
||||
Name
|
||||
</th>
|
||||
{/* <th scope="col" className="px-2">
|
||||
Loan
|
||||
</th> */}
|
||||
<th scope="col" className="px-2 text-right">
|
||||
Repay Amount
|
||||
</th>
|
||||
<th scope="col" className="px-2 text-right">
|
||||
Install Amount
|
||||
</th>
|
||||
<th scope="col" className="px-2 text-right">
|
||||
Due Date
|
||||
</th>
|
||||
<th scope="col" className="px-2 text-right">
|
||||
Action
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(loanCharges && loanCharges.length > 0) ? loanCharges?.map((item, index) => (
|
||||
<tr key={index} className="py-2 border-t border-dashed border-slate-300">
|
||||
<td className="px-2 py-2">
|
||||
<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" />
|
||||
<div className="text-left">
|
||||
{/* <div className="text-base font-semibold">{item?.transaction_id || ''}</div>
|
||||
<div className="font-normal text-gray-500 line-clamp-1">{item?.description}</div> */}
|
||||
<div className="font-normal text-gray-500 line-clamp-1">have no idea how to get this yet</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-right">
|
||||
<div className="font-normal text-gray-500">{formatNumber(item?.total_repayment_amount)}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-right">
|
||||
<div className="font-normal text-gray-500">{formatNumber(item?.installment_amount)}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-right">
|
||||
<div className="font-normal text-gray-500">{getDateFromDateString(item?.due_date)}</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'>
|
||||
<Icons name='eye' />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</>
|
||||
)}
|
||||
</TablePaginatedWrapper>
|
||||
</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>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -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 (
|
||||
<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 ?
|
||||
<>
|
||||
<p className='text-slate-800'>Loading...</p>
|
||||
@@ -35,77 +32,69 @@ export default function TransactionDetails({transactionID}) {
|
||||
: isError ?
|
||||
<p className='text-red-500'>{error.message}</p>
|
||||
:
|
||||
<TablePaginatedWrapper data={transactions} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
|
||||
{({ data }) => (
|
||||
<>
|
||||
<table className="py-2 w-full text-sm">
|
||||
<thead className="py-2 text-sm text-slate-500 text-left">
|
||||
<tr>
|
||||
<th scope="col" className="px-2 py-2">
|
||||
Request
|
||||
</th>
|
||||
<th scope="col" className="px-2">
|
||||
Account
|
||||
</th>
|
||||
<th scope="col" className="px-2">
|
||||
Activity
|
||||
</th>
|
||||
<th scope="col" className="px-2 text-right">
|
||||
Action
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(data && data.length > 0) ? data?.map((item, index) => (
|
||||
<tr key={index} className="py-2 border-t border-dashed border-slate-300">
|
||||
<td className="px-2 py-2">
|
||||
<div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
|
||||
<img className="w-10 h-10 rounded-md" src={localImgLoader(`loan_icons/${item?.type}.png`)} alt="Icon" />
|
||||
<div className="text-left">
|
||||
<div className="text-base font-semibold">{item?.transaction_id}</div>
|
||||
<div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-left">
|
||||
<div className="text-base font-semibold">{item?.account_id}</div>
|
||||
<div className="font-normal text-gray-500">{item?.type}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-left">
|
||||
<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
|
||||
<table className="py-2 w-full text-sm">
|
||||
<thead className="py-2 text-sm text-slate-500 text-left">
|
||||
<tr>
|
||||
<th scope="col" className="px-2 py-2">
|
||||
Request
|
||||
</th>
|
||||
<th scope="col" className="px-2">
|
||||
Account
|
||||
</th>
|
||||
<th scope="col" className="px-2">
|
||||
Activity
|
||||
</th>
|
||||
<th scope="col" className="px-2 text-right">
|
||||
Action
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(transactions && transactions.length > 0) ? transactions?.map((item, index) => (
|
||||
<tr key={index} className="py-2 border-t border-dashed border-slate-300">
|
||||
<td className="px-2 py-2">
|
||||
<div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
|
||||
<img className="w-10 h-10 rounded-md" src={localImgLoader(`loan_icons/${item?.type}.png`)} alt="Icon" />
|
||||
<div className="text-left">
|
||||
<div className="text-base font-semibold">{item?.transaction_id}</div>
|
||||
<div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-left">
|
||||
<div className="text-base font-semibold">{item?.account_id}</div>
|
||||
<div className="font-normal text-gray-500">{item?.type}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-left">
|
||||
<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>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</>
|
||||
)}
|
||||
</TablePaginatedWrapper>
|
||||
</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'>
|
||||
<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>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -8,7 +8,7 @@ import RepaymentScheduleDetails from './RepaymentScheduleDetails'
|
||||
export default function TransactionDetailsCom({id}) {
|
||||
return (
|
||||
<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} />
|
||||
<LoanDetails transactionID={id} />
|
||||
<RepaymentScheduleDetails transactionID={id} />
|
||||
|
||||
@@ -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
|
||||
Reference in New Issue
Block a user