Loan Repayment
This commit is contained in:
@@ -133,6 +133,7 @@ export default function LoansCom() {
|
||||
{/* <div className="text-base font-semibold">{formatNumber(item?.initial_loan_amount)}</div> */}
|
||||
<div
|
||||
className="font-semibold text-green-500">#{formatNumber(item?.initial_loan_amount)}</div>
|
||||
<div className="font-normal text-red-500">{item?.status}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
|
||||
@@ -9,7 +9,7 @@ import {getLoans} from '../../services/siteServices'
|
||||
import getDateFromDateString from '../../helpers/GetDateFromDateString';
|
||||
import formatNumber from '../../helpers/formatNumber'
|
||||
import getTimeFromDateString from "../../helpers/GetTimeFromDateString";
|
||||
import { initiateDisburseRetrials } from "../../services/siteEventService"
|
||||
import {initiateDisburseRetrials, initiateDisburseVerify} from "../../services/siteEventService"
|
||||
|
||||
export default function LoanDetails({transactionID}) {
|
||||
|
||||
@@ -22,12 +22,21 @@ export default function LoanDetails({transactionID}) {
|
||||
// const loansCount = allLoans?.data?.count // LOANS LIST COUNT
|
||||
|
||||
const handleClick = (transactioID) => {
|
||||
// alert(transactioID)
|
||||
const fields={
|
||||
// alert(transactioID)
|
||||
const fields = {
|
||||
"transactionId": transactioID
|
||||
}
|
||||
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 (
|
||||
@@ -43,7 +52,8 @@ export default function LoanDetails({transactionID}) {
|
||||
<p className='text-red-500'>{error.message}</p>
|
||||
</div>
|
||||
: (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>
|
||||
<table className="table-auto py-2 w-full text-sm">
|
||||
<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
|
||||
: {item?.disburseResult}</div>
|
||||
<div><br/></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 style={{display: 'flex'}}>
|
||||
<div style={{width: '70%'}}>
|
||||
<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 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>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
|
||||
@@ -14,8 +14,8 @@ axios.interceptors.request.use(
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
const postAuxEnd = (path, postData, media=false) => {
|
||||
const basePath = media ? process.env.REACT_APP_EVENT_API : process.env.REACT_APP_EVENT_API
|
||||
const postAuxEnd = (path, postData, media = false) => {
|
||||
const basePath = media ? process.env.REACT_APP_EVENT_API : process.env.REACT_APP_EVENT_API
|
||||
return axios.post(`${basePath}${path}`, postData).then(res => {
|
||||
return res
|
||||
}).catch(err => {
|
||||
@@ -24,10 +24,10 @@ const postAuxEnd = (path, postData, media=false) => {
|
||||
})
|
||||
}
|
||||
|
||||
const getAuxEnd = (path, reqData= null) => {
|
||||
const basePath = media ? process.env.REACT_APP_EVENT_API : process.env.REACT_APP_EVENT_API
|
||||
const getAuxEnd = (path, reqData = null) => {
|
||||
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
|
||||
// localStorage.clear();
|
||||
// window.location.href = `/login?sessionExpired=true`;
|
||||
@@ -45,3 +45,16 @@ export const initiateDisburseRetrials = (reqData) => {
|
||||
}
|
||||
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)
|
||||
}
|
||||
Reference in New Issue
Block a user