added transaction time to request table

src/RouteLinks.js

@@ -5,6 +5,7 @@ const RouteLinks = {
     transactionsPage: '/transactions',
     repaymentsPage: '/repayments',
     loanChargesPage: '/loan-charges',
+    offers: '/offers',
     transaction_details_page: '/transaction/details',
     errorPage: '*',
 }

src/SiteRoutes.jsx

@@ -11,8 +11,9 @@ import LoansPage from './pages/LoansPage' // SELECTED LOANS PAGE
 import TransactionsPage from './pages/TransactionsPage' // TRANSACTIONS PAGE
 import RepaymentsPage from './pages/RepaymentsPage' // REPAYMENTS PAGE
 import LoanChargesPage from './pages/LoanChargesPage' // LOAN CHARGES PAGE
-import TransactionDetailsPage from './pages/TransactionDetailsPage'
-import ErrorPage from './pages/ErrorPage'
+import TransactionDetailsPage from './pages/TransactionDetailsPage' // TRANSACTION DETAILS PAGE
+import OffersPage from './pages/OffersPage' // LOAN OFFERS PAGE
+import ErrorPage from './pages/ErrorPage' // ERROR PAGE
 
 
 // const Home = lazy(() => import('./pages/Home'));
@@ -29,6 +30,7 @@ export default function SiteRoutes() {
         <Route path={RouteLinks.repaymentsPage} element={<RepaymentsPage />} /> {`*/REPAYMENTS PAGE*/`}
         <Route path={RouteLinks.loanChargesPage} element={<LoanChargesPage />} /> {`*/LOAN CHARGES PAGE*/`}
         <Route path={RouteLinks.transaction_details_page} element={<TransactionDetailsPage />} /> {`*/TRANSACTION PAGE*/`}
+        <Route path={RouteLinks.offers} element={<OffersPage />} /> {`*/LOAN OFFERS PAGE*/`}
       </Route>
 
       {/* ERROR PAGE */}

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/home/HomeCom.jsx

@@ -9,6 +9,7 @@ import formatNumber from '../../helpers/formatNumber'
 import queryKeys from '../../services/queryKeys'
 import { getDashData } from '../../services/siteServices'
 import getDateFromDateString from '../../helpers/GetDateFromDateString';
+import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
 import localImgLoader from '../../helpers/localImageLoader';
 import RouteLinks from '../../RouteLinks';
 
@@ -111,7 +112,7 @@ export default function HomeCom() {
                                   <img className="w-10 h-10 rounded-md" src={localImgLoader(`loan_icons/${item?.type}.png`)} alt="Icon" />
                                   <div className="text-left">
                                       <div className="text-base font-semibold">{item?.transaction_id}</div>
-                                      <div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</div>
+                                      <div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)} {getTimeFromDateString(item?.created_at)}</div>
                                   </div>  
                                 </div>
                               </td>

src/components/layouts/aside/DashboardAside.jsx

@@ -143,7 +143,7 @@ const asideNavLinks = [
         {name: 'Repayments', status:1, icon: 'dot', to: RouteLinks.repaymentsPage},
         {name: 'Loan Charges', status:1, icon: 'dot', to: RouteLinks.loanChargesPage},
         {name: 'Configurations', status:1, icon: 'arrow-right', subLinks: [
-            {name: 'Loan Offers', status:1, icon: 'dot', to: RouteLinks.loanOffersPage },
+            {name: 'Loan Offers', status:1, icon: 'dot', to: RouteLinks.offers },
             ]
         },
         ],

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,11 +82,13 @@ 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(item?.product_id)}</div>
+                                                    <div className="font-normal text-gray-500">{item?.tenor} days</div>
                                                 </div> 
                                             </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(item?.installment_amount)}</div>
                                                 </div> 
                                             </td>
@@ -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'>
-                                                        <Icons name='eye' />
+                                                        <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/offers/OffersCom.jsx

@@ -0,0 +1,135 @@
+import React, { useState } from 'react'
+import { useQuery } from "@tanstack/react-query";
+
+import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
+import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
+import Icons from '../Icons'
+
+import Avatar from '../../assets/user_avatar.jpg'
+import queryKeys from '../../services/queryKeys'
+import { getOffers } from '../../services/siteServices'
+import getDateFromDateString from '../../helpers/GetDateFromDateString';
+import formatNumber from '../../helpers/formatNumber';
+
+export default function OffersCom() {
+
+    const [page, setPage] = useState(1)
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: [...queryKeys.offers, page],
+        queryFn: () => getOffers({page}),
+        staleTime: 0,
+        // placeholderData: keepPreviousData,
+    })
+
+    const offers = data?.data?.offers // LOAN CHARGES LIST
+    const pagination = data?.data?.pagination
+    console.log('offers', offers)
+
+    return (
+        <div className='w-full flex flex-col gap-8'>
+            <BreadcrumbCom title='Offers' paths={['Dashboard', 'Offers']} />
+
+            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+                {isFetching ? 
+                <>
+                    <p className='text-slate-800'>Loading...</p>
+                </>
+                : isError ?
+                    <p className='text-red-500'>{error.message}</p>
+                :
+                    <TablePaginatedWrapper data={offers} 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>
+                                        <th scope="col" className="px-2 py-2">
+                                            Name
+                                        </th>
+                                        <th scope="col" className="px-2 text-right">
+                                            Interest Rate
+                                        </th>
+                                        <th scope="col" className="px-2 text-right">
+                                            Insurance Rate
+                                        </th>
+                                        <th scope="col" className="px-2 text-right">
+                                            Mgt. Rate
+                                        </th>
+                                        <th scope="col" className="px-2 text-right">
+                                            Max/Min Amount
+                                        </th>
+                                        <th scope="col" className="px-2 text-right">
+                                            Tenor
+                                        </th>
+                                        <th scope="col" className="px-2 text-right">
+                                            Action
+                                        </th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {(data && data.length > 0) ? data?.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?.product_id || ''}</div>
+                                                    {/* <div className="font-normal text-gray-500 line-clamp-1">{item?.description}</div> */}
+                                                </div>  
+                                                </div>
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-right">
+                                                    <div className="font-normal text-gray-500">{formatNumber(item?.interest_rate)}</div>
+                                                </div> 
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-right">
+                                                    <div className="font-normal text-gray-500">{formatNumber(item?.insurance_rate)}</div>
+                                                </div> 
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-right">
+                                                    <div className="font-normal text-gray-500">{formatNumber(item?.management_rate)}</div>
+                                                </div> 
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-right">
+                                                    <div className="font-normal text-gray-500">{formatNumber(item?.maximum_amount)}</div>
+                                                    <div className="font-normal text-gray-500">{formatNumber(item?.minimum_amount)}</div>
+                                                </div> 
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-right">
+                                                    <div className="font-normal text-gray-500">{getDateFromDateString(item?.tenor)}</div>
+                                                </div> 
+                                            </td>
+                                            <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'>
+                                                        <Icons name='eye' />
+                                                    </div>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    ))
+                                    :
+                                    <tr className="py-2 border-t border-dashed border-slate-300">
+                                        <td className="px-3 py-2" colSpan={7}>
+                                            <div className="flex justify-center items-center">
+                                                No Record Found
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    }
+                                </tbody>
+                            </table>
+                        </>
+                    )}
+                    </TablePaginatedWrapper>
+                }
+            </div>
+        </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,75 +33,70 @@ 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>
-                                    <th scope="col" className="px-2 py-2">
-                                        Name
-                                    </th>
-                                    {/* <th scope="col" className="px-2">
-                                        Loan
-                                    </th> */}
-                                    <th scope="col" className="px-2 text-right">
-                                        Amount
-                                    </th>
-                                    <th scope="col" className="px-2 text-right">
-                                        Added
-                                    </th>
-                                    <th scope="col" className="px-2 text-right">
-                                        Action
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {(data && data.length > 0) ? data?.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="font-normal text-gray-500 line-clamp-1">{item?.description}</div>
-                                            </div>  
-                                            </div>
-                                        </td>
-                                        <td className="px-2">
-                                            <div className="text-right">
-                                                {/* <div className="text-base font-semibold">{formatNumber(item?.initial_loan_amount)}</div> */}
-                                                <div className="font-normal text-gray-500">{formatNumber(item?.amount)}</div>
-                                            </div> 
-                                        </td>
-                                        <td className="px-2">
-                                            <div className="text-right">
-                                                <div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</div>
-                                            </div> 
-                                        </td>
-                                        <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'>
-                                                    <Icons name='eye' />
-                                                </div>
-                                            </div>
-                                        </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
+                <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">
+                                Name
+                            </th>
+                            {/* <th scope="col" className="px-2">
+                                Loan
+                            </th> */}
+                            <th scope="col" className="px-2 text-right">
+                                Amount
+                            </th>
+                            <th scope="col" className="px-2 text-right">
+                                Added
+                            </th>
+                            {/* <th scope="col" className="px-2 text-right">
+                                Action
+                            </th> */}
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {(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="font-normal text-gray-500 line-clamp-1">{item?.description}</div> */}
+                                        <div className="font-normal text-gray-500">{item?.loan_id} : {item?.code}</div>
+                                    </div>  
+                                    </div>
+                                </td>
+                                <td className="px-2">
+                                    <div className="text-right">
+                                        {/* <div className="text-base font-semibold">{formatNumber(item?.initial_loan_amount)}</div> */}
+                                        <div className="font-normal text-gray-500">{formatNumber(item?.amount)}</div>
+                                    </div> 
+                                </td>
+                                <td className="px-2">
+                                    <div className="text-right">
+                                        <div className="font-normal text-gray-500">{item?.created_at ? getDateFromDateString(item?.created_at) : 'Not available'}</div>
+                                    </div> 
+                                </td>
+                                {/* <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'>
+                                            <Icons name='eye' />
                                         </div>
-                                    </td>
-                                </tr>
-                                }
-                            </tbody>
-                        </table>
-                    </>
-                )}
-                </TablePaginatedWrapper>
+                                    </div>
+                                </td> */}
+                            </tr>
+                        ))
+                        :
+                        <tr className="py-2 border-t border-dashed border-slate-300">
+                            <td className="px-3 py-2" colSpan={3}>
+                                <div className="flex justify-center items-center">
+                                    No Record Found
+                                </div>
+                            </td>
+                        </tr>
+                        }
+                    </tbody>
+                </table>
             }
         </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,102 +17,102 @@ export default function LoanDetails({transactionID}) {
     })
 
     const loans = allLoans?.data?.loans // LOANS LIST
-    const loansCount = allLoans?.data?.count // LOANS LIST COUNT
-    // console.log('LOANS', loans)
+    // const loansCount = allLoans?.data?.count // LOANS LIST COUNT
 
     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 ? 
-            <>
+        <>
+        {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>
-            </>
-            : isError ?
+            </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>
-            :
-                <TableWrapper data={loans} itemsPerPage={15}>
-                {({ data }) => (
-                    <>
-                        <table className="table-auto 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">
-                                        Name
-                                    </th>
-                                    <th scope="col" className="px-2 text-right">
-                                        Loan Amount
-                                    </th>
-                                    <th scope="col" className="px-2 text-right">
-                                        Repay Amount
-                                    </th>
-                                    <th scope="col" className="px-2 text-right">
-                                        Install Amount
-                                    </th>
-                                    <th scope="col" className="px-2 text-right">
-                                        Added
-                                    </th>
-                                    <th scope="col" className="px-2 text-right">
-                                        Action
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {(data && data.length > 0) ? data?.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>  
-                                            </div>
-                                        </td>
-                                        <td className="px-2">
-                                            <div className="text-right">
-                                                {/* <div className="text-base font-semibold">{formatNumber(item?.initial_loan_amount)}</div> */}
-                                                <div className="font-normal text-gray-500">{formatNumber(item?.initial_loan_amount)}</div>
-                                            </div> 
-                                        </td>
-                                        <td className="px-2">
-                                            <div className="text-right">
-                                                <div className="font-normal text-gray-500">{formatNumber(item?.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?.created_at)}</div>
-                                            </div> 
-                                        </td>
-                                        <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'>
-                                                    <Icons name='eye' />
-                                                </div>
-                                            </div>
-                                        </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>
+        : (loans && loans.length > 0) ?
+            <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>
+                            <th scope="col" className="px-2 py-2">
+                                Name
+                            </th>
+                            <th scope="col" className="px-2 text-right">
+                                Loan/Eligible Amount
+                            </th>
+                            <th scope="col" className="px-2 text-right">
+                                Product/Tenor
+                            </th>
+                            <th scope="col" className="px-2 text-right">
+                                Repay/Install Amount.
+                            </th>
+                            <th scope="col" className="px-2 text-right">
+                                Added/Due
+                            </th>
+                            <th scope="col" className="px-2 text-right">
+                                Action
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {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?.id} : {item?.transaction_id}</div>
+                                        <div className="font-semibold text-red-500">ORIGIN : {item?.original_transaction}</div>
+                                        <div className="font-bold text-blue-500">OFFER : {item?.offer_id}</div>
+                                    </div>  
+                                    </div>
+                                </td>
+                                <td className="px-2">
+                                    <div className="text-right">
+                                        {/* <div className="text-base font-semibold">{formatNumber(item?.initial_loan_amount)}</div> */}
+                                        <div className="font-normal text-gray-500">{formatNumber(item?.initial_loan_amount)}</div>
+                                        <div className="font-semibold text-red-500">{formatNumber(item?.eligible_amount)}</div>
+
+                                    </div> 
+                                </td>
+                                <td className="px-2">
+                                    <div className="text-right">
+                                        <div className="font-normal text-gray-500">{formatNumber(item?.product_id)}</div>
+                                        <div className="font-normal text-gray-500">{item?.tenor} days</div>
+                                    </div> 
+                                </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(item?.installment_amount)}</div>
+                                    </div> 
+                                </td>
+                                <td className="px-2">
+                                    <div className="text-right">
+                                        <div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</div>
+                                        <div className="font-semibold text-red-500">{getDateFromDateString(item?.due_date)}</div>
+                                    </div> 
+                                </td>
+                                <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'>
+                                            <Icons name='eye' />
                                         </div>
-                                    </td>
-                                </tr>
-                                }
-                            </tbody>
-                        </table>
-                    </>
-                )}
-                </TableWrapper>
-            }
-        </div>
+                                    </div>
+                                </td>
+                            </tr>
+                        ))
+                        }
+                    </tbody>
+                </table>
+            </div>
+        :
+            null
+        }
+        </>
     )
 }

src/components/transactionDetails/RepaymentScheduleDetails.jsx

@@ -1,7 +1,6 @@
-import React, { useState } from 'react'
+import React, { useEffect, 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,16 @@ export default function RepaymentScheduleDetails({transactionID}) {
         // placeholderData: keepPreviousData,
     })
 
-    console.log('data', data)
+    const repaymentSchedule = data?.data?.repayment_schedules // LOAN CHARGES LIST
+    // const pagination = data?.data?.pagination
 
-    const loanCharges = 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='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,82 +37,84 @@ 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>
-                                    <th scope="col" className="px-2 py-2">
-                                        Name
-                                    </th>
-                                    {/* <th scope="col" className="px-2">
-                                        Loan
-                                    </th> */}
-                                    <th scope="col" className="px-2 text-right">
-                                        Repay Amount
-                                    </th>
-                                    <th scope="col" className="px-2 text-right">
-                                        Install Amount
-                                    </th>
-                                    <th scope="col" className="px-2 text-right">
-                                        Due Date
-                                    </th>
-                                    <th scope="col" className="px-2 text-right">
-                                        Action
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {(data && data.length > 0) ? data?.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="font-normal text-gray-500 line-clamp-1">{item?.description}</div>
-                                            </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 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'>
-                                                    <Icons name='eye' />
-                                                </div>
-                                            </div>
-                                        </td>
-                                    </tr>
-                                ))
-                                :
-                                <tr className="py-2 border-t border-dashed border-slate-300">
-                                    <td className="px-3 py-2" colSpan={5}>
-                                        <div className="flex justify-center items-center">
-                                            No Record Found
+                <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
+                            </th>
+                            {/* <th scope="col" className="px-2">
+                                Loan
+                            </th> */}
+                            <th scope="col" className="px-2 text-right">
+                                Repay Amount
+                            </th>
+                            <th scope="col" className="px-2 text-right">
+                                Install Amount
+                            </th>
+                            <th scope="col" className="px-2 text-right">
+                                Due Date
+                            </th>
+                            <th scope="col" className="px-2 text-right">
+                                Paid Date
+                            </th>
+                            <th scope="col" className="px-2 text-right">
+                                Action
+                            </th>
+                        </tr>
+                    </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='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?.loan_id || ''}</div>
+                                        {/* <div className="font-normal text-gray-500 line-clamp-1">{item?.description}</div> */}
+                                    </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 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'>
+                                            <Icons name='eye' />
                                         </div>
-                                    </td>
-                                </tr>
-                                }
-                            </tbody>
-                        </table>
-                    </>
-                )}
-                </TablePaginatedWrapper>
+                                    </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>
             }
         </div>
     )

src/components/transactionDetails/TransactionDetails.jsx

@@ -1,15 +1,13 @@
 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 getTimeFromDateString from '../../helpers/GetTimeFromDateString';
 import localImgLoader from '../../helpers/localImageLoader';
-import RouteLinks from '../../RouteLinks';
 
 export default function TransactionDetails({transactionID}) {
 
@@ -23,11 +21,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,77 +33,69 @@ 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>
-                                    <th scope="col" className="px-2 py-2">
-                                        Request
-                                    </th>
-                                    <th scope="col" className="px-2">
-                                        Account
-                                    </th>
-                                    <th scope="col" className="px-2">
-                                        Activity
-                                    </th>
-                                    <th scope="col" className="px-2 text-right">
-                                        Action
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {(data && data.length > 0) ? data?.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={localImgLoader(`loan_icons/${item?.type}.png`)} alt="Icon" />
-                                            <div className="text-left">
-                                                <div className="text-base font-semibold">{item?.transaction_id}</div>
-                                                <div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</div>
-                                            </div>  
-                                            </div>
-                                        </td>
-                                        <td className="px-2">
-                                            <div className="text-left">
-                                                <div className="text-base font-semibold">{item?.account_id}</div>
-                                                <div className="font-normal text-gray-500">{item?.type}</div>
-                                            </div> 
-                                        </td>
-                                        <td className="px-2">
-                                            <div className="text-left">
-                                                <div className="font-normal text-gray-500">50%</div>
-                                                <div className="relative h-[6px] w-full bg-white-body dark:bg-black-body rounded-full overflow-hidden">
-                                                <div className={`absolute left-0 h-full w-1/2 bg-emerald-600`}></div>
-                                                </div>
-                                            </div> 
-                                        </td>
-                                        <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>
-                                    </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
+                <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">
+                                Request
+                            </th>
+                            <th scope="col" className="px-2">
+                                Account
+                            </th>
+                            <th scope="col" className="px-2">
+                                Activity
+                            </th>
+                            <th scope="col" className="px-2 text-right">
+                                Action
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {(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'>
+                                    <img className="w-10 h-10 rounded-md" src={localImgLoader(`loan_icons/${item?.type}.png`)} alt="Icon" />
+                                    <div className="text-left">
+                                        <div className="text-base font-semibold">{item?.transaction_id}</div>
+                                        <div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)} {getTimeFromDateString(item?.created_at)}</div>
+                                    </div>  
+                                    </div>
+                                </td>
+                                <td className="px-2">
+                                    <div className="text-left">
+                                        <div className="text-base font-semibold">{item?.account_id}</div>
+                                        <div className="font-normal text-gray-500">{item?.type}</div>
+                                    </div> 
+                                </td>
+                                <td className="px-2">
+                                    <div className="text-left">
+                                        <div className="font-normal text-gray-500">50%</div>
+                                        <div className="relative h-[6px] w-full bg-white-body dark:bg-black-body rounded-full overflow-hidden">
+                                        <div className={`absolute left-0 h-full w-1/2 bg-emerald-600`}></div>
                                         </div>
-                                    </td>
-                                </tr>
-                                }
-                            </tbody>
-                        </table>
-                    </>
-                )}
-                </TablePaginatedWrapper>
+                                    </div> 
+                                </td>
+                                <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'>
+                                            <Icons name='eye' />
+                                        </div>
+                                    </div>
+                                </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>
             }
         </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/components/transactions/TransactionsCom.jsx

@@ -10,6 +10,7 @@ import Avatar from '../../assets/user_avatar.jpg'
 import queryKeys from '../../services/queryKeys'
 import { getTransactions } from '../../services/siteServices'
 import getDateFromDateString from '../../helpers/GetDateFromDateString';
+import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
 import localImgLoader from '../../helpers/localImageLoader';
 import RouteLinks from '../../RouteLinks';
 
@@ -67,7 +68,7 @@ export default function TransactionsCom() {
                                                 <img className="w-10 h-10 rounded-md" src={localImgLoader(`loan_icons/${item?.type}.png`)} alt="Icon" />
                                                 <div className="text-left">
                                                     <div className="text-base font-semibold">{item?.transaction_id}</div>
-                                                    <div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</div>
+                                                    <div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)} {getTimeFromDateString(item?.created_at)}</div>
                                                 </div>  
                                                 </div>
                                             </td>

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

src/pages/OffersPage.jsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import OffersCom from '../components/offers/OffersCom'
+
+export default function OffersPage() {
+  return (
+    <OffersCom />
+  )
+}

src/services/queryKeys.js

@@ -4,6 +4,7 @@ const queryKeys = {
     transactions: ['transactions'],
     repayment_schedule: ['repayment-schedule'],
     loan_charges: ['loan-charges'],
+    offers: ['offers'],
     apply_loan: ['apply'],
     select_loan: ['select-loan'],
     approved_loan: ['approved-loan'],

src/services/siteServices.js

@@ -80,6 +80,12 @@ export const getLoanCharges = (reqData) => {
     return getAuxEnd(`/loan-charges`, postData)
 }
 
+// FUNCTION TO GET OFFERS LIST TABLE
+export const getOffers = (reqData) => {
+    const postData = { ...reqData }
+    return getAuxEnd(`/offers`, postData)
+}
+
 // FUNCTION TO GET REPAYMENT SCHEDULE TABLE
 export const getRepaymentSchedule = (reqData) => {
     const postData = { ...reqData }