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

Loan Repayment

Browse Source
This commit is contained in:
CHIEFSOFT\ameye
2025-11-09 14:26:20 -05:00
parent c8365d2cb6
commit 976c95b5fd
4 changed files with 143 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/transactionDetails/RepaymentScheduleDetails.jsx
+84 -58
View File
@@ -1,14 +1,15 @@
import React, { useEffect, useState } from 'react'
import { useQuery } from "@tanstack/react-query";
import React, {useEffect, useState} from 'react'
import {useQuery} from "@tanstack/react-query";
import Icons from '../Icons'
import Avatar from '../../assets/user_avatar.jpg'
import queryKeys from '../../services/queryKeys'
import { getRepaymentSchedule } from '../../services/siteServices'
import {getRepaymentSchedule} from '../../services/siteServices'
import getDateFromDateString from '../../helpers/GetDateFromDateString';
import formatNumber from '../../helpers/formatNumber';
import localSiteIcons from "../../helpers/localSiteIcons";
import {initiateLoanPayment } from "../../services/siteEventService"
export default function RepaymentScheduleDetails({transactionID}) {
const [page, setPage] = useState(1)
@@ -22,23 +23,31 @@ export default function RepaymentScheduleDetails({transactionID}) {
const repaymentSchedule = data?.data?.repayment_schedules // LOAN CHARGES LIST
// const pagination = data?.data?.pagination
const handleClick = (transactioID) => {
alert(transactioID)
const fields = {
"transactionId": transactioID
}
return initiateLoanPayment(fields)
// console.log('Button clicked!');
};
useEffect(()=>{
},[])
useEffect(() => {
}, [])
return (
<div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
<p className='pb-4 font-bold text-base'>Repayment Schedule</p>
{isFetching ?
<>
<p className='text-slate-800'>Loading...</p>
</>
: isError ?
<p className='text-red-500'>{error.message}</p>
:
<table className="py-2 w-full text-sm">
<thead className="py-2 text-sm text-slate-500 text-left">
{isFetching ?
<>
<p className='text-slate-800'>Loading...</p>
</>
: isError ?
<p className='text-red-500'>{error.message}</p>
:
<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">
ID/TrxID
@@ -61,55 +70,72 @@ export default function RepaymentScheduleDetails({transactionID}) {
<th scope="col" className="px-2 text-right">
Paid ?
</th>
<th scope="col" className="px-2 text-right">
</th>
</tr>
</thead>
<tbody>
</thead>
<tbody>
{(repaymentSchedule && repaymentSchedule.length > 0) ? repaymentSchedule?.map((item, index) => (
<tr key={index} className="py-2 border-t border-dashed border-slate-300">
<td className="px-2 py-2">
<div className="text-left">
<div className="text-base font-semibold">{item?.loan_id || ''}</div>
<div className="text-base font-semibold">{item?.transaction_id || ''}</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">
<div className="text-right">
<div className="font-normal text-gray-500">{item?.paid_at ? getDateFromDateString(item?.paid_at) : 'Not available'}</div>
</div>
</td>
<td className="px-2">
<div className="text-right">
<div className="text-base font-semibold">{item?.paid || 'false'}</div>
<tr key={index} className="py-2 border-t border-dashed border-slate-300">
<td className="px-2 py-2">
<div className="text-left">
<div className="text-base font-semibold">{item?.loan_id || ''}</div>
<div className="text-base font-semibold">{item?.transaction_id || ''}</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">
<div className="text-right">
<div
className="font-normal text-gray-500">{item?.paid_at ? getDateFromDateString(item?.paid_at) : 'Not available'}</div>
</div>
</td>
<td className="px-2">
<div className="text-right">
<div className="text-base font-semibold">{item?.paid || 'false'}</div>
</div>
</td>
<td className="px-2">
<div className="text-right">
<button
className="bg-blue-500 hover:bg-red-700 text-white font-bold py-2 px-4 roundede"
onClick={() => handleClick(item?.transaction_id)}>
Process Payment
</button>
</div>
</td>
</tr>
))
:
<tr className="py-2 border-t border-dashed border-slate-300">
<td className="px-3 py-2" colSpan={6}>
<div className="flex justify-center items-center">
No Record Found
</div>
</td>
</tr>
))
:
<tr className="py-2 border-t border-dashed border-slate-300">
<td className="px-3 py-2" colSpan={6}>
<div className="flex justify-center items-center">
No Record Found
</div>
</td>
</tr>
}
</tbody>
</table>
</tbody>
</table>
}
</div>
)