Merge branch 'transaction-details-modification' of DigiFi/digifi-FirstOffice into master

src/components/breadcrumb/BreadcrumbCom.jsx

@@ -30,7 +30,7 @@ export default function BreadcrumbCom({title, span, paths}) {
         <div className='flex flex-col gap-2'>
           <div className='flex flex-col md:flex-row gap-1 md:items-center'>
             <h1 className='text-12 sm:text-lg md:text-2xl text-black dark:text-white-body font-semibold'>{title}</h1>
-            <span className='text-red-500 text-10 sm:text-base md:text-xl'>{span && span}</span>
+            <span className='text-red-500 text-10 sm:text-base'>{span && span}</span>
           </div>
           <div className='flex gap-2 items-center text-black-gray dark:text-white-body text-base'>
               <TiHomeOutline className='text-black dark:text-white-body' />

src/components/loanscom/LoansCom.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { useQuery } from "@tanstack/react-query";
+import {Link} from 'react-router-dom'
 
 import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
 import TableWrapper from '../tableWrapper/TableWrapper'
@@ -10,6 +11,7 @@ import queryKeys from '../../services/queryKeys'
 import { getLoans } from '../../services/siteServices'
 import getDateFromDateString from '../../helpers/GetDateFromDateString';
 import formatNumber from '../../helpers/formatNumber'
+import RouteLinks from '../../RouteLinks';
 
 export default function LoansCom() {
 
@@ -47,10 +49,10 @@ export default function LoansCom() {
                                             Loan Amount
                                         </th>
                                         <th scope="col" className="px-2 text-right">
-                                            Repay Amount
+                                            Product/Tenor
                                         </th>
                                         <th scope="col" className="px-2 text-right">
-                                            Install Amount
+                                            Repay/Install Amount
                                         </th>
                                         <th scope="col" className="px-2 text-right">
                                             Added
@@ -68,7 +70,7 @@ export default function LoansCom() {
                                                 <img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />
                                                 <div className="text-left">
                                                     <div className="text-base font-semibold">{item?.account_id || ''}</div>
-                                                    <div className="font-normal text-gray-500">{item?.customer_id}</div>
+                                                    <div className="font-normal text-gray-500">{item?.id} : {item?.transaction_id}</div>
                                                 </div>  
                                                 </div>
                                             </td>
@@ -80,12 +82,14 @@ export default function LoansCom() {
                                             </td>
                                             <td className="px-2">
                                                 <div className="text-right">
-                                                    <div className="font-normal text-gray-500">{formatNumber(item?.repayment_amount)}</div>
+                                                    <div className="font-normal text-gray-500">{formatNumber(0)}</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> 
                                             </td>
                                             <td className="px-2">
@@ -96,7 +100,9 @@ export default function LoansCom() {
                                             <td className="px-2 text-right">
                                                 <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'>
+                                                        <Link to={RouteLinks.transaction_details_page} state={{transactionID: item?.transaction_id}}>
                                                             <Icons name='eye' />
+                                                        </Link>
                                                     </div>
                                                 </div>
                                             </td>
@@ -104,7 +110,7 @@ export default function LoansCom() {
                                     ))
                                     :
                                     <tr className="py-2 border-t border-dashed border-slate-300">
-                                        <td className="px-3 py-2" colSpan={4}>
+                                        <td className="px-3 py-2" colSpan={6}>
                                             <div className="flex justify-center items-center">
                                                 No Record Found
                                             </div>

src/components/transactionDetails/LoanChargeDetails.jsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 import { useQuery } from "@tanstack/react-query";
 
-import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
 import Icons from '../Icons'
 
 import Avatar from '../../assets/user_avatar.jpg'
@@ -22,11 +21,11 @@ export default function LoanChargeDetails({transactionID}) {
     })
 
     const loanCharges = data?.data?.loan_charges // LOAN CHARGES LIST
-    const pagination = data?.data?.pagination
+    // const pagination = data?.data?.pagination
 
     return (
         <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
-            <p className='font-bold text-base'>Loan Charges</p>
+            <p className='pb-4 font-bold text-base'>Loan Charges</p>
             {isFetching ? 
             <>
                 <p className='text-slate-800'>Loading...</p>
@@ -34,9 +33,6 @@ export default function LoanChargeDetails({transactionID}) {
             : isError ?
                 <p className='text-red-500'>{error.message}</p>
             :
-                <TablePaginatedWrapper data={loanCharges} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
-                {({ data }) => (
-                    <>
                 <table className="py-2 w-full text-sm">
                     <thead className="py-2 text-sm text-slate-500 text-left">
                         <tr>
@@ -58,7 +54,7 @@ export default function LoanChargeDetails({transactionID}) {
                         </tr>
                     </thead>
                     <tbody>
-                                {(data && data.length > 0) ? data?.map((item, index) => (
+                        {(loanCharges && loanCharges.length > 0) ? loanCharges?.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'>
@@ -100,9 +96,6 @@ export default function LoanChargeDetails({transactionID}) {
                         }
                     </tbody>
                 </table>
-                    </>
-                )}
-                </TablePaginatedWrapper>
             }
         </div>
     )

src/components/transactionDetails/LoanDetails.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { useQuery } from "@tanstack/react-query";
 
-import TableWrapper from '../tableWrapper/TableWrapper'
 import Icons from '../Icons'
 
 import Avatar from '../../assets/user_avatar.jpg'
@@ -18,22 +17,23 @@ export default function LoanDetails({transactionID}) {
     })
 
     const loans = allLoans?.data?.loans // LOANS LIST
-    const loansCount = allLoans?.data?.count // LOANS LIST COUNT
+    // const loansCount = allLoans?.data?.count // LOANS LIST COUNT
-    // console.log('LOANS', loans)
 
     return (
-        <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+        <>
-            <p className='font-bold text-base'>Loans</p>
         {isFetching ? 
-            <>
+            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+                <p className='pb-4 font-bold text-base'>Loans</p>
                 <p className='text-slate-800'>Loading...</p>
-            </>
+            </div>
         : isError ?
+            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+                <p className='pb-4 font-bold text-base'>Loans</p>
                 <p className='text-red-500'>{error.message}</p>
-            :
+            </div>
-                <TableWrapper data={loans} itemsPerPage={15}>
+        : (loans && loans.length > 0) ?
-                {({ data }) => (
+            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
-                    <>
+                <p className='pb-4 font-bold text-base'>Loans</p>
                 <table className="table-auto py-2 w-full text-sm">
                     <thead className="py-2 text-sm text-slate-500 text-left">
                         <tr>
@@ -44,10 +44,10 @@ export default function LoanDetails({transactionID}) {
                                 Loan Amount
                             </th>
                             <th scope="col" className="px-2 text-right">
-                                        Repay Amount
+                                Product/Tenor
                             </th>
                             <th scope="col" className="px-2 text-right">
-                                        Install Amount
+                                Repay/Install Amount
                             </th>
                             <th scope="col" className="px-2 text-right">
                                 Added
@@ -58,14 +58,14 @@ export default function LoanDetails({transactionID}) {
                         </tr>
                     </thead>
                     <tbody>
-                                {(data && data.length > 0) ? data?.map((item, index) => (
+                        {loans?.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?.account_id || ''}</div>
-                                                <div className="font-normal text-gray-500">{item?.customer_id}</div>
+                                        <div className="font-normal text-gray-500">{item?.id} : {item?.transaction_id}</div>
                                     </div>  
                                     </div>
                                 </td>
@@ -77,12 +77,14 @@ export default function LoanDetails({transactionID}) {
                                 </td>
                                 <td className="px-2">
                                     <div className="text-right">
-                                                <div className="font-normal text-gray-500">{formatNumber(item?.repayment_amount)}</div>
+                                        <div className="font-normal text-gray-500">{formatNumber(0)}</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> 
                                 </td>
                                 <td className="px-2">
@@ -99,21 +101,13 @@ export default function LoanDetails({transactionID}) {
                                 </td>
                             </tr>
                         ))
-                                :
-                                <tr className="py-2 border-t border-dashed border-slate-300">
-                                    <td className="px-3 py-2" colSpan={4}>
-                                        <div className="flex justify-center items-center">
-                                            No Record Found
-                                        </div>
-                                    </td>
-                                </tr>
                         }
                     </tbody>
                 </table>
-                    </>
-                )}
-                </TableWrapper>
-            }
             </div>
+        :
+            null
+        }
+        </>
     )
 }

src/components/transactionDetails/RepaymentScheduleDetails.jsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 import { useQuery } from "@tanstack/react-query";
 
-import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
 import Icons from '../Icons'
 
 import Avatar from '../../assets/user_avatar.jpg'
@@ -21,14 +20,12 @@ export default function RepaymentScheduleDetails({transactionID}) {
         // placeholderData: keepPreviousData,
     })
 
-    console.log('data', data)
-
     const loanCharges = data?.data?.repayment_schedules // LOAN CHARGES LIST
-    const pagination = data?.data?.pagination
+    // const pagination = data?.data?.pagination
 
     return (
         <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
-            <p className='font-bold text-base'>Repayment Schedule</p>
+            <p className='pb-4 font-bold text-base'>Repayment Schedule</p>
             {isFetching ? 
             <>
                 <p className='text-slate-800'>Loading...</p>
@@ -36,9 +33,6 @@ export default function RepaymentScheduleDetails({transactionID}) {
             : isError ?
                 <p className='text-red-500'>{error.message}</p>
             :
-                <TablePaginatedWrapper data={loanCharges} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
-                {({ data }) => (
-                    <>
                 <table className="py-2 w-full text-sm">
                     <thead className="py-2 text-sm text-slate-500 text-left">
                         <tr>
@@ -63,14 +57,15 @@ export default function RepaymentScheduleDetails({transactionID}) {
                         </tr>
                     </thead>
                     <tbody>
-                                {(data && data.length > 0) ? data?.map((item, index) => (
+                        {(loanCharges && loanCharges.length > 0) ? loanCharges?.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?.transaction_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>
@@ -109,9 +104,6 @@ export default function RepaymentScheduleDetails({transactionID}) {
                         }
                     </tbody>
                 </table>
-                    </>
-                )}
-                </TablePaginatedWrapper>
             }
         </div>
     )

src/components/transactionDetails/TransactionDetails.jsx

@@ -1,15 +1,12 @@
 import React, { useState } from 'react'
 import { useQuery } from "@tanstack/react-query";
-import {Link} from 'react-router-dom'
 
-import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
 import Icons from '../Icons'
 
 import queryKeys from '../../services/queryKeys'
 import { getTransactions } from '../../services/siteServices'
 import getDateFromDateString from '../../helpers/GetDateFromDateString';
 import localImgLoader from '../../helpers/localImageLoader';
-import RouteLinks from '../../RouteLinks';
 
 export default function TransactionDetails({transactionID}) {
 
@@ -23,11 +20,11 @@ export default function TransactionDetails({transactionID}) {
     })
 
     const transactions = data?.data?.transactions // TRANSACTIONS LIST
-    const pagination = data?.data?.pagination
+    // const pagination = data?.data?.pagination
 
     return (
         <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
-            <p className='font-bold text-base'>Transactions</p>
+            <p className='pb-4 font-bold text-base'>Transactions</p>
             {isFetching ? 
             <>
                 <p className='text-slate-800'>Loading...</p>
@@ -35,9 +32,6 @@ export default function TransactionDetails({transactionID}) {
             : isError ?
                 <p className='text-red-500'>{error.message}</p>
             :   
-                <TablePaginatedWrapper data={transactions} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
-                {({ data }) => (
-                    <>
                 <table className="py-2 w-full text-sm">
                     <thead className="py-2 text-sm text-slate-500 text-left">
                         <tr>
@@ -56,7 +50,7 @@ export default function TransactionDetails({transactionID}) {
                         </tr>
                     </thead>
                     <tbody>
-                                {(data && data.length > 0) ? data?.map((item, index) => (
+                        {(transactions && transactions.length > 0) ? transactions?.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'>
@@ -84,9 +78,7 @@ export default function TransactionDetails({transactionID}) {
                                 <td className="px-2 text-right">
                                     <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'>
-                                                    <Link to={RouteLinks.transaction_details_page} state={{transactionID: item?.transaction_id}}>
                                             <Icons name='eye' />
-                                                    </Link>
                                         </div>
                                     </div>
                                 </td>
@@ -103,9 +95,6 @@ export default function TransactionDetails({transactionID}) {
                         }
                     </tbody>
                 </table>
-                    </>
-                )}
-                </TablePaginatedWrapper>
             }
         </div>
     )

src/components/transactionDetails/TransactionDetailsCom.jsx

@@ -8,7 +8,7 @@ import RepaymentScheduleDetails from './RepaymentScheduleDetails'
 export default function TransactionDetailsCom({id}) {
   return (
     <div className='w-full flex flex-col gap-8'>
-        <BreadcrumbCom title='Transaction Details' paths={['Dashboard', 'Transactions Details']} />
+        <BreadcrumbCom title='Transaction Details' span={`[${id}]`} paths={['Dashboard', 'Transactions Details']} />
         <TransactionDetails transactionID={id} />
         <LoanDetails transactionID={id} />
         <RepaymentScheduleDetails transactionID={id} />

src/helpers/formatNumber.js

@@ -1,6 +1,10 @@
 const formatNumber = (number = 0) => {
-    return new Intl.NumberFormat().format(number);
+    // return new Intl.NumberFormat().format(number);
     // return number.toFixed(2);
+    return number.toLocaleString('en-US', {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    });
   };
   
   export default formatNumber