updated transaction details page

src/components/loanscom/LoansCom.jsx

@@ -82,14 +82,14 @@ export default function LoansCom() {
                                             </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(item?.product_id)}</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 className="font-normal text-gray-500">{formatNumber(item?.installment_amount)}</div>
                                                 </div> 
                                             </td>
                                             <td className="px-2">

src/components/transactionDetails/LoanDetails.jsx

@@ -77,14 +77,14 @@ export default function LoanDetails({transactionID}) {
                                 </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(item?.product_id)}</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 className="font-normal text-gray-500">{formatNumber(item?.installment_amount)}</div>
                                     </div> 
                                 </td>
                                 <td className="px-2">

src/components/transactionDetails/RepaymentScheduleDetails.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useQuery } from "@tanstack/react-query";
 
 import Icons from '../Icons'
@@ -20,9 +20,13 @@ export default function RepaymentScheduleDetails({transactionID}) {
         // placeholderData: keepPreviousData,
     })
 
-    const loanCharges = data?.data?.repayment_schedules // LOAN CHARGES LIST
+    const repaymentSchedule = data?.data?.repayment_schedules // LOAN CHARGES LIST
     // const pagination = data?.data?.pagination
 
+    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>
@@ -37,7 +41,7 @@ export default function RepaymentScheduleDetails({transactionID}) {
                     <thead className="py-2 text-sm text-slate-500 text-left">
                         <tr>
                             <th scope="col" className="px-2 py-2">
-                                Name
+                                ID
                             </th>
                             {/* <th scope="col" className="px-2">
                                 Loan
@@ -57,15 +61,14 @@ export default function RepaymentScheduleDetails({transactionID}) {
                         </tr>
                     </thead>
                     <tbody>
-                        {(loanCharges && loanCharges.length > 0) ? loanCharges?.map((item, index) => (
+                        {(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='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="text-base font-semibold">{item?.loan_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">{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>