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/loanscom/LoansCom.jsx
+1
View File
@@ -133,6 +133,7 @@ export default function LoansCom() {
{/* <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 <div
className="font-semibold text-green-500">#{formatNumber(item?.initial_loan_amount)}</div> className="font-semibold text-green-500">#{formatNumber(item?.initial_loan_amount)}</div>
<div className="font-normal text-red-500">{item?.status}</div>
</div> </div>
</td> </td>
<td className="px-2"> <td className="px-2">
src/components/transactionDetails/LoanDetails.jsx
+40 -11
View File
@@ -9,7 +9,7 @@ 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 getTimeFromDateString from "../../helpers/GetTimeFromDateString"; import getTimeFromDateString from "../../helpers/GetTimeFromDateString";
import { initiateDisburseRetrials } from "../../services/siteEventService" import {initiateDisburseRetrials, initiateDisburseVerify} from "../../services/siteEventService"
export default function LoanDetails({transactionID}) { export default function LoanDetails({transactionID}) {
@@ -22,12 +22,21 @@ export default function LoanDetails({transactionID}) {
// const loansCount = allLoans?.data?.count // LOANS LIST COUNT // const loansCount = allLoans?.data?.count // LOANS LIST COUNT
const handleClick = (transactioID) => { const handleClick = (transactioID) => {
// alert(transactioID) // alert(transactioID)
const fields={ const fields = {
"transactionId": transactioID "transactionId": transactioID
} }
return initiateDisburseRetrials(fields) return initiateDisburseRetrials(fields)
// console.log('Button clicked!'); // console.log('Button clicked!');
};
const handleRetryClick = (transactioID) => {
alert(transactioID)
const fields = {
"transactionId": transactioID
}
return initiateDisburseVerify(fields)
// console.log('Button clicked!');
}; };
return ( return (
@@ -43,7 +52,8 @@ export default function LoanDetails({transactionID}) {
<p className='text-red-500'>{error.message}</p> <p className='text-red-500'>{error.message}</p>
</div> </div>
: (loans && loans.length > 0) ? : (loans && loans.length > 0) ?
<div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body' style={{backgroundColor: '#f7d9e3'}}> <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'
style={{backgroundColor: '#f7d9e3'}}>
<p className='pb-4 font-bold text-base'>Loan</p> <p className='pb-4 font-bold text-base'>Loan</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">
@@ -150,12 +160,31 @@ export default function LoanDetails({transactionID}) {
<div className="font-bold text-red-500">Disburse Result <div className="font-bold text-red-500">Disburse Result
: {item?.disburseResult}</div> : {item?.disburseResult}</div>
<div><br/></div> <div><br/></div>
<div className="font-bold text-blue-500">Disburse Verify <div style={{display: 'flex'}}>
Date: {getDateFromDateString(item?.disburseVerify)} {getTimeFromDateString(item?.disburseVerify)} </div> <div style={{width: '70%'}}>
<div className="font-bold text-gray-500">Verify Description <div className="font-bold text-blue-500">Disburse Verify
: {item?.verifyDescription}</div> Date: {getDateFromDateString(item?.disburseVerify)} {getTimeFromDateString(item?.disburseVerify)} </div>
<div className="font-bold text-red-500">Verify Result <div className="font-bold text-gray-500">Verify Description
: {item?.verifyResult}</div> : {item?.verifyDescription}</div>
<div className="font-bold text-red-500">Verify Result
: {item?.verifyResult}</div>
</div>
<div style={{width: '30%', textAlign: 'right'}}>
<button
className="bg-blue-500 hover:bg-red-700 text-white font-bold py-2 px-4 roundede"
onClick={() => handleRetryClick(item?.transaction_id)}>
Retry Verification
</button>
</div>
</div>
{/*<div className="font-bold text-blue-500">Disburse Verify*/}
{/* Date: {getDateFromDateString(item?.disburseVerify)} {getTimeFromDateString(item?.disburseVerify)} </div>*/}
{/*<div className="font-bold text-gray-500">Verify Description*/}
{/* : {item?.verifyDescription}</div>*/}
{/*<div className="font-bold text-red-500">Verify Result*/}
{/* : {item?.verifyResult}</div>*/}
</div> </div>
</td> </td>
</tr> </tr>
src/components/transactionDetails/RepaymentScheduleDetails.jsx
+82 -56
View File
@@ -1,14 +1,15 @@
import React, { useEffect, useState } from 'react' import React, {useEffect, useState} from 'react'
import { useQuery } from "@tanstack/react-query"; import {useQuery} from "@tanstack/react-query";
import Icons from '../Icons' import Icons from '../Icons'
import Avatar from '../../assets/user_avatar.jpg' import Avatar from '../../assets/user_avatar.jpg'
import queryKeys from '../../services/queryKeys' import queryKeys from '../../services/queryKeys'
import { getRepaymentSchedule } from '../../services/siteServices' import {getRepaymentSchedule} from '../../services/siteServices'
import getDateFromDateString from '../../helpers/GetDateFromDateString'; import getDateFromDateString from '../../helpers/GetDateFromDateString';
import formatNumber from '../../helpers/formatNumber'; import formatNumber from '../../helpers/formatNumber';
import localSiteIcons from "../../helpers/localSiteIcons"; import localSiteIcons from "../../helpers/localSiteIcons";
import {initiateLoanPayment } from "../../services/siteEventService"
export default function RepaymentScheduleDetails({transactionID}) { export default function RepaymentScheduleDetails({transactionID}) {
const [page, setPage] = useState(1) const [page, setPage] = useState(1)
@@ -22,23 +23,31 @@ export default function RepaymentScheduleDetails({transactionID}) {
const repaymentSchedule = data?.data?.repayment_schedules // LOAN CHARGES LIST const repaymentSchedule = data?.data?.repayment_schedules // LOAN CHARGES LIST
// const pagination = data?.data?.pagination // const pagination = data?.data?.pagination
const handleClick = (transactioID) => {
alert(transactioID)
const fields = {
"transactionId": transactioID
}
return initiateLoanPayment(fields)
// console.log('Button clicked!');
};
useEffect(()=>{ useEffect(() => {
},[]) }, [])
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='pb-4 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>
</> </>
: isError ? : isError ?
<p className='text-red-500'>{error.message}</p> <p className='text-red-500'>{error.message}</p>
: :
<table className="py-2 w-full text-sm"> <table className="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">
ID/TrxID ID/TrxID
@@ -61,55 +70,72 @@ export default function RepaymentScheduleDetails({transactionID}) {
<th scope="col" className="px-2 text-right"> <th scope="col" className="px-2 text-right">
Paid ? Paid ?
</th> </th>
<th scope="col" className="px-2 text-right">
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{(repaymentSchedule && repaymentSchedule.length > 0) ? repaymentSchedule?.map((item, index) => ( {(repaymentSchedule && repaymentSchedule.length > 0) ? repaymentSchedule?.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="text-left"> <div className="text-left">
<div className="text-base font-semibold">{item?.loan_id || ''}</div> <div className="text-base font-semibold">{item?.loan_id || ''}</div>
<div className="text-base font-semibold">{item?.transaction_id || ''}</div> <div className="text-base font-semibold">{item?.transaction_id || ''}</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?.total_repayment_amount)}</div> <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
</td> className="font-normal text-gray-500">{formatNumber(item?.installment_amount)}</div>
<td className="px-2"> </div>
<div className="text-right"> </td>
<div className="font-normal text-gray-500">{getDateFromDateString(item?.due_date)}</div> <td className="px-2">
</div> <div className="text-right">
</td> <div
<td className="px-2"> className="font-normal text-gray-500">{getDateFromDateString(item?.due_date)}</div>
<div className="text-right"> </div>
<div className="font-normal text-gray-500">{item?.paid_at ? getDateFromDateString(item?.paid_at) : 'Not available'}</div> </td>
</div> <td className="px-2">
</td> <div className="text-right">
<td className="px-2"> <div
<div className="text-right"> className="font-normal text-gray-500">{item?.paid_at ? getDateFromDateString(item?.paid_at) : 'Not available'}</div>
<div className="text-base font-semibold">{item?.paid || 'false'}</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> </div>
</td> </td>
</tr> </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> </tbody>
</table> </table>
} }
</div> </div>
) )
src/services/siteEventService.js
+18 -5
View File
@@ -14,8 +14,8 @@ axios.interceptors.request.use(
return Promise.reject(error); return Promise.reject(error);
} }
); );
const postAuxEnd = (path, postData, media=false) => { const postAuxEnd = (path, postData, media = false) => {
const basePath = media ? process.env.REACT_APP_EVENT_API : process.env.REACT_APP_EVENT_API const basePath = media ? process.env.REACT_APP_EVENT_API : process.env.REACT_APP_EVENT_API
return axios.post(`${basePath}${path}`, postData).then(res => { return axios.post(`${basePath}${path}`, postData).then(res => {
return res return res
}).catch(err => { }).catch(err => {
@@ -24,10 +24,10 @@ const postAuxEnd = (path, postData, media=false) => {
}) })
} }
const getAuxEnd = (path, reqData= null) => { const getAuxEnd = (path, reqData = null) => {
const basePath = media ? process.env.REACT_APP_EVENT_API : process.env.REACT_APP_EVENT_API const basePath = media ? process.env.REACT_APP_EVENT_API : process.env.REACT_APP_EVENT_API
return axios.get(`${basePath}${path}`,{ params: reqData }).then(res => { return axios.get(`${basePath}${path}`, {params: reqData}).then(res => {
return res return res
// localStorage.clear(); // localStorage.clear();
// window.location.href = `/login?sessionExpired=true`; // window.location.href = `/login?sessionExpired=true`;
@@ -45,3 +45,16 @@ export const initiateDisburseRetrials = (reqData) => {
} }
return postAuxEnd('/autocall/retry-disbursement', postData, false) return postAuxEnd('/autocall/retry-disbursement', postData, false)
} }
export const initiateDisburseVerify = (reqData) => {
let postData = {
...reqData
}
return postAuxEnd('/autocall/verify-disbursement', postData, false)
}
export const initiateLoanPayment = (reqData) => {
let postData = {
...reqData
}
return postAuxEnd('/autocall/start-repayment', postData, false)
}