confirmation-modal

src/components/layouts/rightaside/Orders.jsx

@@ -1,24 +1,31 @@
 import React from 'react'
-import Img from '../../../assets/user_avatar.jpg'
+import {Link} from 'react-router-dom'
+import Img from '../../../assets/loans.png'
+import formatNumber from '../../../helpers/formatNumber'
 import CustomCounter from '../../CustomCounter'
+import RouteLinks from '../../../RouteLinks'
 
 export default function Orders({data}) {
     return (
-        <div className='h-full p-2 sm:p-4 large:p-8 flex flex-col gap-16 overflow-y-auto aside-scroll-design'>
+        <div className='h-full flex flex-col gap-16 overflow-y-auto aside-scroll-design'>
             <div className='flex flex-col gap-4'>
                 <p className='text-base text-white-body font-bold'>Recent Loans</p>
                 <div className='flex flex-col gap-4'>
                     {data.map((item, index)=>{
                         return (
-                            <div key={index} className='flex gap-3 items-center'>
+                            <Link 
+                                to={RouteLinks.transaction_details_page}
+                                state={{transactionID: item?.transaction_id}}
+                                key={index} className='flex gap-3 items-center'
+                            >
                                 <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
                                     <img src={Img} className='w-8' alt="Order Image" />
                                 </div>
                                 <div className='flex-col'>
-                                    <p className='text-base font-bold text-white-body'>Project Briefing</p>
+                                    <p className='text-sm font-bold text-white-body'>{item?.customer_id}</p>
-                                    <p className='text-sm text-slate-500'>Project Manager</p>
+                                    <p className='text-sm text-slate-500'>{formatNumber(item?.current_loan_amount)}</p>
                                 </div>
-                            </div>
+                            </Link>
                         )
                     })}
                 </div>

src/components/layouts/rightaside/RightAsideBar.jsx

@@ -21,7 +21,7 @@ export default function RightAsideBar() {
         queryFn: () => getRecentLoans()
     })
 
-    console.log('data', data?.data)
+    const loanList = data?.data?.loans
 
     return (
         <div className='w-full h-full flex flex-col gap-8'>
@@ -46,7 +46,7 @@ export default function RightAsideBar() {
                 </div>
                 :
                 <div className='w-full'>
-                    {active === 'orders' && <Orders data={[1,2,3,4,5]} />}
+                    {active === 'orders' && <Orders data={loanList} />}
                     {/*{active == 'tickets' && <Tickets />}*/}
                     {/*{active == 'tasks' && <Tasks />}*/}
                 </div>

src/components/loanscom/LoansCom.jsx

@@ -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">

src/components/offers/OffersCom.jsx

@@ -68,9 +68,9 @@ export default function OffersCom() {
                                         <th scope="col" className="px-2 text-right">
                                             Tenor
                                         </th>
-                                        <th scope="col" className="px-2 text-right">
+                                        {/*<th scope="col" className="px-2 text-right">*/}
-                                            Action
+                                        {/*    Action*/}
-                                        </th>
+                                        {/*</th>*/}
                                     </tr>
                                 </thead>
                                 <tbody>
@@ -121,13 +121,13 @@ export default function OffersCom() {
                                                     <div className="font-normal text-gray-500">{item?.tenor}</div>
                                                 </div> 
                                             </td>
-                                            <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' />
+                                            {/*            <Icons name='eye' />*/}
-                                                    </div>
+                                            {/*        </div>*/}
-                                                </div>
+                                            {/*    </div>*/}
-                                            </td>
+                                            {/*</td>*/}
                                         </tr>
                                     ))
                                     :

src/components/repayments/RepaymentsCom.jsx

@@ -93,14 +93,11 @@ export default function RepaymentsCom() {
                                             <th scope="col" className="px-2 py-2">
                                                 CustomerID / ID:TrxID
                                             </th>
-                                            {/* <th scope="col" className="px-2">
+                                            <th scope="col" className="px-8 ">
-                                            Loan
+                                                Descriptions
-                                        </th> */}
-                                            <th scope="col" className="px-2">
-                                                Added
                                             </th>
                                             <th scope="col" className="px-2 text-right">
-                                                Action
+                                                Date/Result Codes
                                             </th>
                                         </tr>
                                         </thead>
@@ -118,6 +115,12 @@ export default function RepaymentsCom() {
                                                                 <div
                                                                     className="font-normal text-blue-500">{item?.loan_id} :<b> {item?.transaction_id}</b>
                                                                 </div>
+                                                                <div
+                                                                    className="font-normal text-red-500">{item?.initiated_by}
+                                                                </div>
+                                                                <div
+                                                                    className="font-normal text-green-500"><b> {item?.product_id}</b>
+                                                                </div>
                                                             </div>
                                                         </div>
                                                     </td>
@@ -127,18 +130,26 @@ export default function RepaymentsCom() {
                                                     <div className="font-normal text-gray-500">{item?.description}</div>
                                                 </div> 
                                             </td> */}
-                                                    <td className="px-2">
+                                                    <td className="px-8">
                                                         <div className="text-left">
-                                                            <div
+
-                                                                className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</div>
+                                                            <div className="font-normal text-gray-500">Repay Date : {getDateFromDateString(item?.repay_date)}</div>
+
+                                                            <div className="font-normal">Repay Desc : {item?.repay_description || ''}</div>
+
+                                                            <div className="font-normal text-gray-500">Verify Repay Date : {getDateFromDateString(item?.verify_date)}</div>
+
+                                                            <div className="font-normal">Verify Repay Desc : {item?.verify_description || ''}</div>
+
+
+
                                                         </div>
                                                     </td>
                                                     <td className="px-2 text-right">
-                                                        <div className='flex items-center justify-end gap-3 md:gap-4'>
+                                                        <div className="text-left">
-                                                            <div
+                                                            <div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</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="font-normal text-red-500">Repay Result :{item?.repay_result || ''}</div>
-                                                                <Icons name='eye'/>
+                                                            <div className="font-normal text-blue-500">Verify Repay Result :{item?.verify_result || ''}</div>
-                                                            </div>
                                                         </div>
                                                     </td>
                                                 </tr>

src/components/transactionDetails/LoanChargeDetails.jsx

@@ -14,7 +14,7 @@ export default function LoanChargeDetails({transactionID}) {
     const [page, setPage] = useState(1)
 
     const {data, isFetching, isError, error} = useQuery({
-        queryKey: [...queryKeys.loan_charges, page],
+        queryKey: [...queryKeys.loan_charges, page, transactionID],
         queryFn: () => getLoanCharges({transaction_id: transactionID, page}),
         staleTime: 0,
         // placeholderData: keepPreviousData,

src/components/transactionDetails/LoanDetails.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import {useQuery} from "@tanstack/react-query";
 
 import Icons from '../Icons'
@@ -9,12 +9,26 @@ 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"
+import ModalWrapper from '../modals/ModalWrapper';
+import MainBtn from '../MainBtn';
 
 export default function LoanDetails({transactionID}) {
 
+    const [retryDisbursementModal, setRetryDisbursementModal] = useState({})
+    const [retryVerifyModal, setRetryVerifyModal] = useState({})
+    const handleSetRetryDisbursementModal = (transactioID) => {
+        setRetryDisbursementModal({status:true, transactioID})
+    }
+    const closeRetryDisbursementModal = () => {setRetryDisbursementModal({})}
+
+    const handleSetRetryVerifyModal = (transactioID) => {
+        setRetryVerifyModal({status:true, transactioID})
+    }
+    const closeRetryVerifyModal = () => {setRetryVerifyModal({})}
+
     const {data: allLoans, isFetching, isError, error} = useQuery({
-        queryKey: queryKeys.loans,
+        queryKey: [...queryKeys.loans, transactionID],
         queryFn: () => getLoans({transaction_id: transactionID})
     })
 
@@ -22,14 +36,26 @@ export default function LoanDetails({transactionID}) {
     // const loansCount = allLoans?.data?.count // LOANS LIST COUNT
 
     const handleClick = (transactioID) => {
-       // alert(transactioID)
+        // alert(transactioID)
-        const fields={
+        const fields = {
             "transactionId": transactioID
         }
+        closeRetryDisbursementModal() // CLOSES THE DISBURSEMENT MODAL
         return initiateDisburseRetrials(fields)
-       // console.log('Button clicked!');
+        // console.log('Button clicked!');
     };
 
+    const handleRetryClick = (transactioID) => {
+        alert(transactioID)
+        const fields = {
+            "transactionId": transactioID
+        }
+        closeRetryVerifyModal() // CLOSES THE VERIFY MODAL
+        return initiateDisburseVerify(fields)
+        // console.log('Button clicked!');
+    };
+
+
     return (
         <>
             {isFetching ?
@@ -43,7 +69,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">
@@ -137,7 +164,8 @@ export default function LoanDetails({transactionID}) {
                                                         <div style={{width: '50%', textAlign: 'right'}}>
                                                             <button
                                                                 className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 roundede"
-                                                                onClick={() => handleClick(item?.transaction_id)}>
+                                                                // onClick={() => handleClick(item?.transaction_id)}>
+                                                                onClick={() => handleSetRetryDisbursementModal(item?.transaction_id)}>
                                                                 Retry Disbursement
                                                             </button>
                                                         </div>
@@ -150,12 +178,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
+                                                    <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={() => handleSetRetryVerifyModal(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>
@@ -171,6 +218,34 @@ export default function LoanDetails({transactionID}) {
                         :
                         null
             }
+            {retryDisbursementModal.status &&
+                <ModalWrapper maxWidth='max-w-lg'>
+                    <div className="p-4 md:p-5 text-center bg-white rounded-md">
+                        <svg className="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+                            <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
+                        </svg>
+                        <h3 className="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">{'Confirm Retry Disbursement?'}</h3>
+                        <div className="flex justify-center items-center gap-6 sm:gap-20">
+                            <MainBtn onClick={closeRetryDisbursementModal} text='Cancel' className="border text-black dark:text-white" />
+                            <MainBtn onClick={()=>handleClick(retryDisbursementModal.transactioID)} text='Yes' className="text-white bg-primary hover:bg-primary/90 focus:ring-0 focus:outline-none ring-0 font-medium rounded-lg text-sm px-5 py-2.5 text-center" />
+                        </div>
+                    </div>
+                </ModalWrapper>
+            }
+            {retryVerifyModal.status &&
+                <ModalWrapper maxWidth='max-w-lg'>
+                    <div className="p-4 md:p-5 text-center bg-white rounded-md">
+                        <svg className="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+                            <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
+                        </svg>
+                        <h3 className="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">{'Continue Verify Disburesement?'}</h3>
+                        <div className="flex justify-center items-center gap-6 sm:gap-20">
+                            <MainBtn onClick={closeRetryVerifyModal} text='Cancel' className="border text-black dark:text-white" />
+                            <MainBtn onClick={()=>handleRetryClick(retryVerifyModal.transactioID)} text='Yes' className="text-white bg-primary hover:bg-primary/90 focus:ring-0 focus:outline-none ring-0 font-medium rounded-lg text-sm px-5 py-2.5 text-center" />
+                        </div>
+                    </div>
+                </ModalWrapper>
+            }
         </>
     )
 }

src/components/transactionDetails/RepaymentScheduleDetails.jsx

@@ -1,20 +1,30 @@
-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 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"
+import ModalWrapper from '../modals/ModalWrapper';
+import MainBtn from '../MainBtn';
 export default function RepaymentScheduleDetails({transactionID}) {
     
+    const [retryPaymentModal, setRetryPaymentModal] = useState({})
+    const handleSetRetryPaymentModal = (transactioID) => {
+        setRetryPaymentModal({status:true, transactioID})
+    }
+
+    const closeRetryPaymentModal = () => {setRetryPaymentModal({})}
+
     const [page, setPage] = useState(1)
 
     const {data, isFetching, isError, error} = useQuery({
-        queryKey: [...queryKeys.repayment_schedule, page],
+        queryKey: [...queryKeys.repayment_schedule, page, transactionID],
         queryFn: () => getRepaymentSchedule({transaction_id: transactionID, page}),
         staleTime: 0,
         // placeholderData: keepPreviousData,
@@ -22,23 +32,33 @@ 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
+        }
+        closeRetryPaymentModal() // CLOSES PAYMENT INITIATE MODAL
+        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>
+                    <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>
                             <th scope="col" className="px-2 py-2">
                                 ID/TrxID
@@ -61,56 +81,88 @@ 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>
+                        </thead>
-                    <tbody>
+                        <tbody>
                         {(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={() => handleSetRetryPaymentModal(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>
+                        </tbody>
-                </table>
+                    </table>
             }
         </div>
+        {retryPaymentModal.status &&
+            <ModalWrapper maxWidth='max-w-lg'>
+                <div className="p-4 md:p-5 text-center bg-white rounded-md">
+                    <svg className="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+                        <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
+                    </svg>
+                    <h3 className="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">{'Continue Initiate Payment?'}</h3>
+                    <div className="flex justify-center items-center gap-6 sm:gap-20">
+                        <MainBtn onClick={closeRetryPaymentModal} text='Cancel' className="border text-black dark:text-white" />
+                        <MainBtn onClick={()=>handleClick(retryDisbursementModal.transactioID)} text='Yes' className="text-white bg-primary hover:bg-primary/90 focus:ring-0 focus:outline-none ring-0 font-medium rounded-lg text-sm px-5 py-2.5 text-center" />
+                    </div>
+                </div>
+            </ModalWrapper>
+        }
+        </>
     )
 }

src/components/transactionDetails/TransactionDetails.jsx

@@ -15,7 +15,7 @@ export default function TransactionDetails({transactionID}) {
     const [page, setPage] = useState(1)
 
     const {data, isFetching, isError, error} = useQuery({
-        queryKey: [...queryKeys.transactions, page],
+        queryKey: [...queryKeys.transactions, page, transactionID],
         queryFn: () => getTransactions({transaction_id: transactionID, page}),
         staleTime: 0,
         // placeholderData: keepPreviousData,

src/services/siteEventService.js

@@ -14,8 +14,8 @@ axios.interceptors.request.use(
         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 res
     }).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
         // 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)
+}