updated filter section

.env

@@ -6,7 +6,7 @@ TWITTER_URL=https://twitter.com
 INSTAGRAM_URL=https://www.instagram.com
 
 # BACKEND END POINTS
-REACT_APP_MAIN_API='http://backoffice-apidev.simbrellang.net:14700'
+REACT_APP_MAIN_API='https://backoffice-apidev.simbrellang.net'
 
 # ENQUIRIES CONTACTS
 VITE_CALL_ENDPOINT='09099000000'

.env.development

@@ -6,7 +6,7 @@ VITE_TWITTER_URL=https://twitter.com
 VITE_INSTAGRAM_URL=https://www.instagram.com
 
 # BACKEND END POINTS
-REACT_APP_MAIN_API='http://backoffice-apidev.simbrellang.net:14700'
+REACT_APP_MAIN_API='https://backoffice-apidev.simbrellang.net'
 
 # ENQUIRIES CONTACTS
 VITE_CALL_ENDPOINT='09099000000'

.env.production

@@ -6,7 +6,7 @@ TWITTER_URL=https://twitter.com
 INSTAGRAM_URL=https://www.instagram.com
 
 # BACKEND END POINTS
-REACT_APP_MAIN_API='http://backoffice-apidev.simbrellang.net:14700'
+REACT_APP_MAIN_API='https://backoffice-apidev.simbrellang.net'
 
 # ENQUIRIES CONTACTS
 VITE_CALL_ENDPOINT='09099000000'

src/RouteLinks.js

@@ -1,15 +1,13 @@
 const RouteLinks = {
     loginPage: '/auth/login',
-    errorPage: '*',
     homePage: '/',
-    usersPage: '/users',
-    approvedLoansPage: '/loans/approved',
-    applicationsLoanPage: '/loans/apply',
-    disbursementsLoanPage: '/loans/disbursements',
-    selectedLoanPage: '/loans/select',
-    loanOffersPage: '/loans/offers',
     loansPage: '/loans',
-    requestPage: '/request',
+    transactionsPage: '/transactions',
+    repaymentsPage: '/repayments',
+    loanChargesPage: '/loan-charges',
+    offers: '/offers',
+    transaction_details_page: '/transaction/details',
+    errorPage: '*',
 }
 
 export default RouteLinks

src/SiteRoutes.jsx

@@ -7,14 +7,13 @@ import PageLoader from './components/PageLoader'
 
 import LoginPage from './pages/LoginPage' // LOGIN PAGE
 import HomePage from './pages/HomePage' // Home PAGE
-import UsersPage from './pages/UsersPage' // Users PAGE
-import ApprovedLoansPage from './pages/ApprovedLoansPage' // APPROVED LOANS PAGE
-import DisbursementsLoanPage from './pages/DisbursementsLoanPage' // DISBURSEMENTS LOANS PAGE
-import ApplicationsLoanPage from './pages/ApplicationsLoanPage' // APPLICATIONS LOANS PAGE
-import SelectedLoanPage from './pages/SelectedLoanPage' // SELECTED LOANS PAGE
-import LoanOffersPage from './pages/LoanOffersPage' // SELECTED LOANS PAGE
 import LoansPage from './pages/LoansPage' // SELECTED LOANS PAGE
-import RequestPage from './pages/RequestPage' // 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' // TRANSACTION DETAILS PAGE
+import OffersPage from './pages/OffersPage' // LOAN OFFERS PAGE
+import ErrorPage from './pages/ErrorPage' // ERROR PAGE
 
 
 // const Home = lazy(() => import('./pages/Home'));
@@ -26,15 +25,12 @@ export default function SiteRoutes() {
 
       <Route element={<UserExist />}>
         <Route path={RouteLinks.homePage} element={<HomePage />} /> {`*/HOME PAGE*/`}
-        <Route path={RouteLinks.usersPage} element={<UsersPage />} /> {`*/USERS PAGE*/`}
-        <Route path={RouteLinks.approvedLoansPage} element={<ApprovedLoansPage />} /> {`*/APPROVED LOANS PAGE*/`}
-        <Route path={RouteLinks.disbursementsLoanPage} element={<DisbursementsLoanPage />} /> {`*/DISBURSEMENTS LOANS PAGE*/`}
-        <Route path={RouteLinks.applicationsLoanPage} element={<ApplicationsLoanPage />} /> {`*/APPLICATIONS LOANS PAGE*/`}
-        <Route path={RouteLinks.selectedLoanPage} element={<SelectedLoanPage />} /> {`*/SELECTED LOANS PAGE*/`}
-        <Route path={RouteLinks.loanOffersPage} element={<LoanOffersPage />} /> {`*/LOANS OFFERS PAGE*/`}
-
         <Route path={RouteLinks.loansPage} element={<LoansPage />} /> {`*/LOANS PAGE*/`}
-        <Route path={RouteLinks.requestPage} element={<RequestPage />} /> {`*/Request PAGE*/`}
+        <Route path={RouteLinks.transactionsPage} element={<TransactionsPage />} /> {`*/Transactions PAGE*/`}
+        <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 */}
@@ -42,7 +38,7 @@ export default function SiteRoutes() {
         path={RouteLinks.errorPage} // error page
         element={
           <Suspense fallback={<PageLoader />}>
-            <p>Error Page 1</p>
+            <ErrorPage />
           </Suspense>
         } 
       />

src/components/Icons.jsx

@@ -11,7 +11,7 @@ import { LuPanelRight } from "react-icons/lu";
 import { FcGoogle } from "react-icons/fc";
 import { IoLogoApple } from "react-icons/io5";
 import { FcSalesPerformance } from "react-icons/fc";
-import { FaLongArrowAltRight } from "react-icons/fa";
+import { FaLongArrowAltRight, FaFilter } from "react-icons/fa";
 
 export default function Icons({name, className}) {
   return (
@@ -50,6 +50,8 @@ export default function Icons({name, className}) {
     <FcSalesPerformance className={`text-base ${className}`} />
     :name.toLowerCase() == 'arrow-right' ?
     <FaLongArrowAltRight className={`text-base ${className}`} />
+    :name.toLowerCase() == 'filter' ?
+    <FaFilter className={`text-base ${className}`} />
     :
     null
     }

src/components/breadcrumb/BreadcrumbCom.jsx

@@ -8,8 +8,6 @@ export default function BreadcrumbCom({title, span, paths}) {
   const [stickNav, setStickNav] = useState(false)
 
   useEffect(()=>{
-    console.log('tru')
-
       // var rect = navRef?.current?.getBoundingClientRect()?.bottom;
       var rect = 10;
       window.addEventListener('scroll', ()=>{
@@ -30,7 +28,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/error/ErrorCom.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { useNavigate } from 'react-router-dom'
+
+import ErrorLogo from '../../assets/404-error.png'
+
+export default function ErrorCom() {
+
+  const navigate = useNavigate()
+  
+  return (
+    <>
+      <div className={`h-screen bg-sky-300 flex flex-col items-center justify-center bg-[url('./assets/login-bg.jpg')] bg-cover bg-center bg-no-repeat`}>
+        <div className='p-4 sm:p-8 w-full max-w-7xl mx-auto grid gap-8 place-content-center'>
+          <div className='w-4/5 md:w-[650px] h-full'>
+                <div className='flex flex-col gap-8 w-full bg-white rounded-xl p-16 sm:px-20 sm:py-16 shadow'>
+                    <div className='w-full flex flex-col gap-1 items-center'>
+                        <h1 className='text-2xl md:text-3xl font-bold text-black-body'>Oops!</h1>
+                        <p className='text-sm font-medium text-slate-500'>We can't find that page.</p>
+                    </div>
+
+                    {/* <div className='relative h-[1px] bg-slate-300/50'>
+                        <p className='absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 bg-white p-4 text-12 text-slate-500'>Or with email</p>
+                    </div> */}
+
+                    <div className='flex flex-col items-center gap-6'>
+                        <img src={ErrorLogo} className='w-4/5 md:w-80 h-auto' alt='error logo' />
+                        <div className='h-10 mb-10 flex justify-center'>
+                            <button onClick={()=>navigate('/', {replace:true})} className='px-2 h-full bg-primary text-sm text-white font-medium rounded-md'>Return Home</button>
+                        </div>
+                    </div>
+                </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/home/HomeCom.jsx

@@ -1,14 +1,17 @@
 import React from 'react'
+import  {Link} from 'react-router-dom'
 import { useQuery } from "@tanstack/react-query";
 import BreadcrumbCom from '../../components/breadcrumb/BreadcrumbCom'
 import CustomCounter from '../../components/CustomCounter'
 import Icons from '../../components/Icons'
-import TableWrapper from '../../components/tableWrapper/TableWrapper'
-import Avatar from '../../assets/user_avatar.jpg'
 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';
 
 export default function HomeCom() {
 
@@ -82,81 +85,94 @@ export default function HomeCom() {
               </div> */}
             </div>
 
-            <TableWrapper data={dashData?.recent_transactions} itemsPerPage={10}>
-                {({ data }) => (
+              <table className="py-2 w-full text-sm">
+                  <thead className="py-2 text-sm text-slate-500 text-left font-semibold">
+                      <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>
+                    {(dashData?.recent_transactions && dashData?.recent_transactions.length > 0) ? dashData?.recent_transactions?.map((item, index) => {
+                      if(index <= 10) {
+                        return (
+                          <tr key={item?.id} 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>
+                                </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='edit' />
+                                  </div> */}
+                                  <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 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='trash' />
+                                  </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>
+                    }
                     <>
-                        <table className="py-2 w-full text-sm">
-                            <thead className="py-2 text-sm text-slate-500 text-left font-semibold">
-                                <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={item?.id} 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?.channel}</div>
-                                        </div>  
-                                      </div>
-                                    </td>
-                                    <td className="px-2">
-                                      <div className="text-left">
-                                          <div className="text-base font-semibold">{item?.transaction_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'>
-                                          <Icons name='edit' />
-                                        </div> */}
-                                        <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 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='trash' />
-                                        </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>
+                    {dashData?.recent_transactions.length > 10 &&
+                      <tr className="py-2 border-t border-dashed text-right text-primary border-slate-300">
+                        <td className="px-3 py-2" colSpan={4}>
+                            <Link to={RouteLinks.transactionsPage} className="flex justify-end items-center">
+                                More ...
+                            </Link>
+                        </td>
+                      </tr>
+                    }
                     </>
-                )}
-            </TableWrapper>
+                  </tbody>
+              </table>
+
           </div>
         </div>
       </div>

src/components/layouts/DashboardHeader.jsx

@@ -5,16 +5,15 @@ import { generalLayoutContext } from "../../context/GeneralLayoutContext"
 
 import UserAvatar from '../../assets/user_avatar.jpg'
 import HandBurger from "./HandBurger"
-import { Link, useLocation } from "react-router-dom"
+import { Link } from "react-router-dom"
 import RouteLinks from "../../RouteLinks"
-import { useState } from "react";
 import MainBtn from "../MainBtn";
 import { TbLogout2 } from "react-icons/tb";
 import Icons from "../Icons";
 
 export default function DashboardHeader() {
 
-    let {pathname} = useLocation()
+    // let {pathname} = useLocation()
 
     const {theme, handleTheme, setLogoutModal, activeMenu, handleActiveMenu, showAsideDrawer, setShowAsideDrawer} = generalLayoutContext()
 
@@ -36,11 +35,9 @@ export default function DashboardHeader() {
                     </Link>
 
                     {/* RIGHT DRAWER BUTTON */}
-                    {pathname == '/' &&
                      <div onClick={()=>setShowAsideDrawer('right-aside')} className='large:hidden  w-10 h-10 border border-slate-300 text-slate-500 dark:text-white-body rounded-md px-2 flex justify-center items-center gap-2 cursor-pointer' title='Switch Color Mode'>
                         <Icons name='right-panel' className="text-sm md:text-xl font-bold" />
                     </div>
-                    }
 
                      {/* MESSAGE */}
                      {/* <button onClick={()=>handleDrawer(drawerName.chat)} className="relative px-2 flex justify-center items-center gap-2 cursor-pointer">

src/components/layouts/DashboardLayout.jsx

@@ -1,5 +1,4 @@
-import { useEffect, useState } from 'react'
-import { Outlet, useLocation } from 'react-router-dom'
+import { Outlet } from 'react-router-dom'
 
 import DashboardHeader from './DashboardHeader'
 import { generalLayoutContext } from '../../context/GeneralLayoutContext'
@@ -8,7 +7,7 @@ import RightAsideBar from './rightaside/RightAsideBar'
 
 export default function DashboardLayout() {
 
-    let {pathname} = useLocation()
+    // let {pathname} = useLocation()
 
   const {showAsideDrawer, setShowAsideDrawer} = generalLayoutContext()
   
@@ -18,9 +17,6 @@ export default function DashboardLayout() {
             <DashboardAside />
         </div>
 
-        {/* <div className={`${showAsideDrawer =='aside' ? 'left-0' : '-left-full'} w-4/5 sm:w-72 px-8 py-4 lg:hidden fixed inset-0 z-[999] bg-white-aside dark:bg-black-aside dark:text-white-light`}>
-            <DashboardAside />
-        </div> */}
         <div className={`${showAsideDrawer =='aside' ? 'left-0' : '-left-full'} lg:hidden w-full fixed inset-0 z-[999]`}>
             <div className={`${showAsideDrawer =='aside' ? 'fixed left-0 top-0 inset-0' : '-left-full'} w-full bg-[rgba(0,_0,_0,_0.2)] dark:bg-[rgba(0,_0,_0,_0.4)] transition-all cursor-pointer`} onClick={()=>setShowAsideDrawer('')} ></div>
             <div className={`fixed px-8 py-4 h-full w-4/5 sm:w-[400px] bg-white-aside dark:bg-black-aside dark:text-white-light`}>
@@ -28,7 +24,7 @@ export default function DashboardLayout() {
             </div>
         </div>
 
-        <div className={`main w-full bg-inherit ${pathname == '/' && 'large:mr-[400px]'}`}>
+        <div className={`main w-full bg-inherit large:mr-[400px]`}>
             <div className='fixed top-0 left-0 z-[980] w-full px-8 bg-inherit lg:hidden'>
                 <DashboardHeader />
             </div> 
@@ -45,7 +41,6 @@ export default function DashboardLayout() {
         </div>
 
         {/* Right Aisde */}
-        {pathname == '/' &&
         <>
             <div className={`px-8 py-4 hidden large:flex fixed right-5 top-0 bottom-0 sm:w-[400px] bg-[#192440] dark:bg-[#1E1E2D] text-white-body`}>
                 <RightAsideBar />
@@ -57,7 +52,6 @@ export default function DashboardLayout() {
                 </div>
             </div>
         </>
-        }
     </div>
   )
 }

src/components/layouts/aside/DashboardAside.jsx

@@ -138,15 +138,12 @@ export default function DashboardAside() {
 const asideNavLinks = [
     {name:'Dashboard', status:1, icon: 'dashboard', to: RouteLinks.homePage},
     {name:'First Advance', title:'Loan', status:1, icon: 'arrow-right', subLinks: [
-        {name: 'Request', status:1, icon: 'dot', to: RouteLinks.requestPage},
+        {name: 'Transactions', status:1, icon: 'dot', to: RouteLinks.transactionsPage},
         {name: 'Loans', status:1, icon: 'dot', to: RouteLinks.loansPage},
-        {name: 'Selected Loans', status:1, icon: 'dot', to: RouteLinks.selectedLoanPage},
-        {name: 'Applications', status:1, icon: 'dot', to: RouteLinks.applicationsLoanPage},
-        {name: 'Approved Loans', status:1, icon: 'dot', to: RouteLinks.approvedLoansPage},
-        {name: 'Disbursements', status:1, icon: 'dot', to: RouteLinks.disbursementsLoanPage},
-        {name: 'Payments', status:1, icon: 'dot', to: ''},
+        {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/layouts/rightaside/Orders.jsx

@@ -6,7 +6,7 @@ export default function Orders() {
     return (
         <div className='h-full p-2 sm:p-4 large:p-8 flex flex-col gap-16 overflow-y-auto aside-scroll-design'>
             <div className='flex flex-col gap-4'>
-                <p className='text-base text-white-body font-bold'>Support Ticket</p>
+                <p className='text-base text-white-body font-bold'>Recent Eligibility</p>
                 <div className='grid grid-cols-2 gap-4 sm:gap-6 large:gap-8'>
                     <div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
                         <p className='text-base font-bold text-white-body'>
@@ -35,7 +35,7 @@ export default function Orders() {
                 </div>
             </div>
             <div className='flex flex-col gap-4'>
-                <p className='text-base text-white-body font-bold'>Best Ticket</p>
+                <p className='text-base text-white-body font-bold'>Recent Loans</p>
                 <div className='flex flex-col gap-4'>
                     <div className='flex gap-3 items-center'>
                         <div className='px-4 py-2 bg-[#0E172E] rounded-md'>

src/components/layouts/rightaside/Tickets.jsx

@@ -6,7 +6,7 @@ export default function Tickets() {
   return (
     <div className='h-full p-2 sm:p-4 large:p-8 flex flex-col gap-16 overflow-y-auto aside-scroll-design'>
         <div className='flex flex-col gap-4'>
-            <p className='text-base text-white-body font-bold'>Support Ticket</p>
+            <p className='text-base text-white-body font-bold'>Recent Repayment</p>
             <div className='grid grid-cols-2 gap-4 sm:gap-6 large:gap-8'>
                 <div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
                     <p className='text-base font-bold text-white-body'>
@@ -35,7 +35,7 @@ export default function Tickets() {
             </div>
         </div>
         <div className='flex flex-col gap-4'>
-            <p className='text-base text-white-body font-bold'>Best Ticket</p>
+            <p className='text-base text-white-body font-bold'>Tracked Errors</p>
             <div className='flex flex-col gap-4'>
                 <div className='flex gap-3 items-center'>
                     <div className='px-4 py-2 bg-[#0E172E] rounded-md'>

src/components/loan_charges/LoanChargesCom.jsx

@@ -1,29 +1,33 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { useQuery } from "@tanstack/react-query";
-import {Link} from 'react-router-dom'
 
 import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
-import TableWrapper from '../tableWrapper/TableWrapper'
+import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
 import Icons from '../Icons'
 
 import Avatar from '../../assets/user_avatar.jpg'
 import queryKeys from '../../services/queryKeys'
-import { selectLoan } from '../../services/siteServices'
+import { getLoanCharges } from '../../services/siteServices'
 import getDateFromDateString from '../../helpers/GetDateFromDateString';
-import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
+import formatNumber from '../../helpers/formatNumber';
 
-export default function RequestCom() {
+export default function LoanChargesCom() {
+
+    const [page, setPage] = useState(1)
 
     const {data, isFetching, isError, error} = useQuery({
-        queryKey: queryKeys.select_loan,
-        queryFn: () => selectLoan()
+        queryKey: [...queryKeys.loan_charges, page],
+        queryFn: () => getLoanCharges({page}),
+        staleTime: 0,
+        // placeholderData: keepPreviousData,
     })
 
-    const selectUsers = data?.data?.result_data?.data // APPLY LOAN LIST
+    const loanCharges = data?.data?.loan_charges // LOAN CHARGES LIST
+    const pagination = data?.data?.pagination
 
     return (
         <div className='w-full flex flex-col gap-8'>
-            <BreadcrumbCom title='Request' paths={['Dashboard', 'Request']} />
+            <BreadcrumbCom title='Loan Charges' paths={['Dashboard', 'Loan Charges']} />
 
             <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
                 {isFetching ? 
@@ -33,7 +37,7 @@ export default function RequestCom() {
                 : isError ?
                     <p className='text-red-500'>{error.message}</p>
                 :
-                    <TableWrapper data={selectUsers} itemsPerPage={15}>
+                    <TablePaginatedWrapper data={loanCharges} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
                     {({ data }) => (
                         <>
                             <table className="py-2 w-full text-sm">
@@ -42,10 +46,13 @@ export default function RequestCom() {
                                         <th scope="col" className="px-2 py-2">
                                             Name
                                         </th>
-                                        <th scope="col" className="px-2">
+                                        {/* <th scope="col" className="px-2">
                                             Loan
+                                        </th> */}
+                                        <th scope="col" className="px-2 text-right">
+                                            Amount
                                         </th>
-                                        <th scope="col" className="px-2">
+                                        <th scope="col" className="px-2 text-right">
                                             Added
                                         </th>
                                         <th scope="col" className="px-2 text-right">
@@ -55,38 +62,32 @@ export default function RequestCom() {
                                 </thead>
                                 <tbody>
                                     {(data && data.length > 0) ? data?.map((item, index) => (
-                                        <tr className="py-2 border-t border-dashed border-slate-300">
+                                        <tr key={index} className="py-2 border-t border-dashed border-slate-300">
                                             <td className="px-2 py-2">
                                                 <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?.name || ''}</div>
-                                                    <div className="font-normal text-gray-500">{item?.bvn}</div>
+                                                    <div className="text-base font-semibold">{item?.transaction_id || ''}</div>
+                                                    <div className="font-normal text-gray-500 line-clamp-1">{item?.code}</div>
                                                 </div>  
                                                 </div>
                                             </td>
                                             <td className="px-2">
-                                                <div className="text-left">
-                                                    <div className="text-base font-semibold">{item?.loan}</div>
-                                                    <div className="font-normal text-gray-500">{item?.description}</div>
+                                                <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-left">
-                                                    <div className="font-normal text-gray-500">{getDateFromDateString(item?.added)} {getTimeFromDateString(item?.added)}</div>
+                                                <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='edit' />
-                                                </div>
-                                                <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 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='trash' />
-                                                </div>
+                                                    <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>
@@ -104,7 +105,7 @@ export default function RequestCom() {
                             </table>
                         </>
                     )}
-                    </TableWrapper>
+                    </TablePaginatedWrapper>
                 }
             </div>
         </div>

src/components/loanscom/LoansCom.jsx

@@ -1,8 +1,10 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { useQuery } from "@tanstack/react-query";
+import {Link} from 'react-router-dom'
 
 import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
-import TableWrapper from '../tableWrapper/TableWrapper'
+// import TableWrapper from '../tableWrapper/TableWrapper'
+import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper';
 import Icons from '../Icons'
 
 import Avatar from '../../assets/user_avatar.jpg'
@@ -10,18 +12,20 @@ import queryKeys from '../../services/queryKeys'
 import { getLoans } from '../../services/siteServices'
 import getDateFromDateString from '../../helpers/GetDateFromDateString';
 import formatNumber from '../../helpers/formatNumber'
-import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
+import RouteLinks from '../../RouteLinks';
 
 export default function LoansCom() {
 
+    const [page, setPage] = useState(1)
+
     const {data:allLoans, isFetching, isError, error} = useQuery({
-        queryKey: queryKeys.loans,
-        queryFn: () => getLoans()
+        queryKey: [...queryKeys.loans, page],
+        queryFn: () => getLoans({page}),
+        staleTime: 0,
     })
 
     const loans = allLoans?.data?.loans // LOANS LIST
-    const loansCount = allLoans?.data?.count // LOANS LIST COUNT
-    // console.log('LOANS', loans)
+    const pagination = allLoans?.data?.pagination
 
     return (
         <div className='w-full flex flex-col gap-8'>
@@ -35,7 +39,7 @@ export default function LoansCom() {
                 : isError ?
                     <p className='text-red-500'>{error.message}</p>
                 :
-                    <TableWrapper data={loans} itemsPerPage={15}>
+                    <TablePaginatedWrapper data={loans} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
                     {({ data }) => (
                         <>
                             <table className="table-auto py-2 w-full text-sm">
@@ -47,6 +51,12 @@ export default function LoansCom() {
                                         <th scope="col" className="px-2 text-right">
                                             Loan 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
                                         </th>
@@ -63,7 +73,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>
@@ -73,6 +83,18 @@ export default function LoansCom() {
                                                     <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?.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>
@@ -80,22 +102,18 @@ export default function LoansCom() {
                                             </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='edit' />
-                                                </div>
-                                                <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 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='trash' />
-                                                </div>
+                                                    <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}>
+                                        <td className="px-3 py-2" colSpan={6}>
                                             <div className="flex justify-center items-center">
                                                 No Record Found
                                             </div>
@@ -106,7 +124,7 @@ export default function LoansCom() {
                             </table>
                         </>
                     )}
-                    </TableWrapper>
+                    </TablePaginatedWrapper>
                 }
             </div>
         </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">{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/repayments/RepaymentsCom.jsx

@@ -0,0 +1,109 @@
+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 { getRepayments } from '../../services/siteServices'
+import getDateFromDateString from '../../helpers/GetDateFromDateString';
+
+export default function RepaymentsCom() {
+
+    const [page, setPage] = useState(1)
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: [...queryKeys.transactions, page],
+        queryFn: () => getRepayments({page}),
+        staleTime: 0,
+        // placeholderData: keepPreviousData,
+    })
+
+    const repayments = data?.data?.repayments // REPAYMENTS LIST
+    const pagination = data?.data?.pagination
+
+    return (
+        <div className='w-full flex flex-col gap-8'>
+            <BreadcrumbCom title='Repayments' paths={['Dashboard', 'Repayments']} />
+
+            <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={repayments} 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">
+                                            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?.customer_id || ''}</div>
+                                                    <div className="font-normal text-gray-500">{item?.loan_id} : {item?.transaction_id}</div>
+                                                </div>  
+                                                </div>
+                                            </td>
+                                            {/* <td className="px-2">
+                                                <div className="text-left">
+                                                    <div className="text-base font-semibold">{item?.loan}</div>
+                                                    <div className="font-normal text-gray-500">{item?.description}</div>
+                                                </div> 
+                                            </td> */}
+                                            <td className="px-2">
+                                                <div className="text-left">
+                                                    <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={3}>
+                                            <div className="flex justify-center items-center">
+                                                No Record Found
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    }
+                                </tbody>
+                            </table>
+                        </>
+                    )}
+                    </TablePaginatedWrapper>
+                }
+            </div>
+        </div>
+    )
+}

src/components/tableWrapper/TablePaginatedWrapper.jsx

@@ -0,0 +1,64 @@
+import { useState } from "react";
+import MainBtn from "../MainBtn";
+import Icons from "../Icons";
+
+
+export default function TablePaginatedWrapper({
+  data = [],
+  isFetching,
+  pagination,
+  setPage,
+  children,
+}) {
+
+  const handlePrev = () => {
+    setPage(prev => prev - 1)
+  };
+  const handleNext = () => {
+    setPage(prev => prev + 1)
+  };
+
+  return (
+    <div className="relative w-full">
+      <div className="flex flex-col">
+        <div className="w-full overflow-x-auto">
+          {children({ data })}
+        </div>
+
+        <div className='w-full flex flex-col lg:flex-row justify-center items-center gap-3 md:gap-6'>
+            <div className="text-sm text-center lg:text-left font-normal text-gray-500 dark:text-gray-400 block w-full">Showing <span className="font-semibold text-gray-900 dark:text-white">
+              {isFetching ? '----' : `page ${pagination?.current_page}`}</span> of <span className="font-semibold text-gray-900 dark:text-white">{pagination?.total_pages}</span>
+            </div>
+              <div className='flex items-center gap-3 md:gap-6'>
+                  <MainBtn 
+                      onClick={handlePrev}
+                      // text='Prev' 
+                      className={`${!pagination?.has_prev ? 'bg-primary/50 pointer-events-none' : 'bg-primary'} text-white-light text-center flex justify-center gap-2 items-center`} 
+                      disabled={isFetching || !pagination?.has_prev}
+                  >
+                  <Icons name='prev' />
+                  </MainBtn>
+                  <MainBtn 
+                      onClick={handleNext}
+                      // text='Next' 
+                      className={`${!pagination?.has_next ? 'bg-primary/50 pointer-events-none' : 'bg-primary'} text-white-light text-center flex justify-center gap-2 items-center`} 
+                      disabled={isFetching || !pagination?.has_next}
+                  > 
+                  <Icons name='next' />
+                  </MainBtn>
+              </div>
+          </div>
+      </div>
+      
+    {isFetching && <TableIsLoading />}
+    </div>
+  );
+}
+
+export const TableIsLoading = () => {
+  return (
+    <div className="w-full fixed z-[991] inset-0 flex justify-center items-center bg-black/10">
+      <p className="rounded-md shadow-md p-4 bg-white/90 dark:bg-gray-900 text-brown dark:text-white">Loading...</p>
+    </div>
+  )
+}

src/components/transactionDetails/LoanChargeDetails.jsx

@@ -0,0 +1,103 @@
+import React, { useState } from 'react'
+import { useQuery } from "@tanstack/react-query";
+
+import Icons from '../Icons'
+
+import Avatar from '../../assets/user_avatar.jpg'
+import queryKeys from '../../services/queryKeys'
+import { getLoanCharges } from '../../services/siteServices'
+import getDateFromDateString from '../../helpers/GetDateFromDateString';
+import formatNumber from '../../helpers/formatNumber';
+
+export default function LoanChargeDetails({transactionID}) {
+
+    const [page, setPage] = useState(1)
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: [...queryKeys.loan_charges, page],
+        queryFn: () => getLoanCharges({transaction_id: transactionID, page}),
+        staleTime: 0,
+        // placeholderData: keepPreviousData,
+    })
+
+    const loanCharges = data?.data?.loan_charges // LOAN CHARGES LIST
+    // const pagination = data?.data?.pagination
+
+    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'>Loan Charges</p>
+            {isFetching ? 
+            <>
+                <p className='text-slate-800'>Loading...</p>
+            </>
+            : isError ?
+                <p className='text-red-500'>{error.message}</p>
+            :
+                <table className="py-2 w-full text-sm">
+                    <thead className="py-2 text-sm text-slate-500 text-left">
+                        <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>
+                                    </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

@@ -0,0 +1,118 @@
+import React from 'react'
+import { useQuery } from "@tanstack/react-query";
+
+import Icons from '../Icons'
+
+import Avatar from '../../assets/user_avatar.jpg'
+import queryKeys from '../../services/queryKeys'
+import { getLoans } from '../../services/siteServices'
+import getDateFromDateString from '../../helpers/GetDateFromDateString';
+import formatNumber from '../../helpers/formatNumber'
+
+export default function LoanDetails({transactionID}) {
+
+    const {data:allLoans, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.loans,
+        queryFn: () => getLoans({transaction_id: transactionID})
+    })
+
+    const loans = allLoans?.data?.loans // LOANS LIST
+    // const loansCount = allLoans?.data?.count // LOANS LIST COUNT
+
+    return (
+        <>
+        {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>
+        : (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>
+                                    </div>
+                                </td>
+                            </tr>
+                        ))
+                        }
+                    </tbody>
+                </table>
+            </div>
+        :
+            null
+        }
+        </>
+    )
+}

src/components/transactionDetails/RepaymentScheduleDetails.jsx

@@ -0,0 +1,121 @@
+import React, { useEffect, useState } from 'react'
+import { useQuery } from "@tanstack/react-query";
+
+import Icons from '../Icons'
+
+import Avatar from '../../assets/user_avatar.jpg'
+import queryKeys from '../../services/queryKeys'
+import { getRepaymentSchedule } from '../../services/siteServices'
+import getDateFromDateString from '../../helpers/GetDateFromDateString';
+import formatNumber from '../../helpers/formatNumber';
+
+export default function RepaymentScheduleDetails({transactionID}) {
+
+    const [page, setPage] = useState(1)
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: [...queryKeys.repayment_schedule, page],
+        queryFn: () => getRepaymentSchedule({transaction_id: transactionID, page}),
+        staleTime: 0,
+        // placeholderData: keepPreviousData,
+    })
+
+    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>
+            {isFetching ? 
+            <>
+                <p className='text-slate-800'>Loading...</p>
+            </>
+            : isError ?
+                <p className='text-red-500'>{error.message}</p>
+            :
+                <table className="py-2 w-full text-sm">
+                    <thead className="py-2 text-sm text-slate-500 text-left">
+                        <tr>
+                            <th scope="col" className="px-2 py-2">
+                                ID
+                            </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>
+                                    </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

@@ -0,0 +1,102 @@
+import React, { useState } from 'react'
+import { useQuery } from "@tanstack/react-query";
+
+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';
+
+export default function TransactionDetails({transactionID}) {
+
+    const [page, setPage] = useState(1)
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: [...queryKeys.transactions, page],
+        queryFn: () => getTransactions({transaction_id: transactionID, page}),
+        staleTime: 0,
+        // placeholderData: keepPreviousData,
+    })
+
+    const transactions = data?.data?.transactions // TRANSACTIONS LIST
+    // const pagination = data?.data?.pagination
+
+    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'>Transactions</p>
+            {isFetching ? 
+            <>
+                <p className='text-slate-800'>Loading...</p>
+            </>
+            : isError ?
+                <p className='text-red-500'>{error.message}</p>
+            :   
+                <table className="py-2 w-full text-sm">
+                    <thead className="py-2 text-sm text-slate-500 text-left">
+                        <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>
+                                    </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

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

src/components/transactions/TransactionsCom.jsx

@@ -0,0 +1,159 @@
+import { useEffect, useState } from 'react'
+import {Link} from 'react-router-dom'
+
+import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
+import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
+import Icons from '../Icons'
+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 TransactionsCom() {
+
+    const [page, setPage] = useState(1)
+    const [allTransactions, setAllTransaction] = useState({loading:true, error:'', data:{}})
+
+    const [willFilter, setWillFilter] = useState(false)
+    const [filter, setFilter] = useState({type: '', id: ''})
+    const handleFilter = ({target:{name, value}}) => {
+        setFilter(prev => ({...prev, [name]:value}))
+    }
+
+    const handleFilterByParams = () => {
+        if(filter.type && !filter.id){
+            return
+        }else if(!filter.type){
+            setPage(1)
+            setWillFilter(prev => !prev)
+            setFilter({type: '', id: ''})
+        }else{
+            setPage(1)
+            setWillFilter(prev => !prev)
+        }
+    }
+
+    const transactions = allTransactions?.data?.transactions // TRANSACTIONS LIST
+    const pagination = allTransactions?.data?.pagination
+    const isFetching = allTransactions?.loading
+    const isError = allTransactions?.error
+
+    useEffect(()=>{
+        setAllTransaction(prev => ({...prev, loading:true}))
+        const payload = filter?.type ? {[filter?.type]: filter.id} : {}
+        getTransactions({...payload, page}).then(res => {
+            if(res?.status != 200){
+                setAllTransaction(prev => ({...prev, loading:false}))
+                return
+            }
+            setAllTransaction({loading:false, error:'', data:res?.data})
+        }).catch(err => {
+            setAllTransaction({loading:false, error:'error occurred', data:{}})
+            console.log('ERR', err)
+        })
+    },[page, willFilter])
+
+    return (
+        <div className='w-full flex flex-col gap-8'>
+            <BreadcrumbCom title='Transactions' paths={['Dashboard', 'Transactions']} />
+
+            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+                { isError ?
+                    <p className='text-red-500'>{allTransactions?.error}</p>
+                :
+                <>
+                    {/* filter section */}
+                    <div className='px-2 py-2 mb-4 flex flex-col sm:flex-row flex-wrap sm:items-center gap-2'>
+                        <Icons name='filter' className='text-3xl' />
+                        <div className='w-full sm:max-w-48'>
+                            <select name='type' value={filter?.type} className='h-10 w-full p-2 rounded-md' onChange={handleFilter}>
+                                <option value=''>All</option>
+                                <option value='transaction_id'>Transaction ID</option>
+                                <option value='account_id'>Account ID</option>
+                            </select>
+                        </div>
+                        <div className='w-full sm:max-w-48'>
+                            <input name='id' value={filter?.id} disabled={!filter.type} className={`h-10 w-full p-2 rounded-md outline-none border border-black-aside ${!filter.type && 'opacity-30'}`} onChange={handleFilter} />
+                        </div>
+                        <button onClick={handleFilterByParams} disabled={filter.type && !filter.id} className={`h-10 bg-primary px-2 py-1 rounded-md text-white font-medium sm:self-end ${(filter.type && !filter.id) && 'opacity-50'}`}>Submit</button>
+                    </div>
+                     {/* end of filter section */}
+
+                    <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)} {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>
+                                                </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
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    }
+                                </tbody>
+                            </table>
+                        </>
+                    )}
+                    </TablePaginatedWrapper>
+                </>
+                }
+            </div>
+        </div>
+    )
+}

src/components/transactions/_TransactionsCom.jsx

@@ -0,0 +1,163 @@
+import React, { useState } from 'react'
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import {Link} from 'react-router-dom'
+
+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 { 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 TransactionsCom() {
+
+    const queryClient = useQueryClient()
+
+    const [page, setPage] = useState(1)
+
+    const [filter, setFilter] = useState({transaction_id: '', account_id: ''})
+    const handleFilter = ({target:{name, value}}) => {
+        setFilter(prev => ({...prev, [name]:value}))
+    }
+
+    const handleFilterByParams = () => {
+        // setPage(1)
+        queryClient.invalidateQueries({ queryKey: [...queryKeys.transactions] })
+    }
+
+    const {data, isFetching, isError, error, isPlaceholderData, isPending} = useQuery({
+        queryKey: [...queryKeys.transactions, page],
+        queryFn: () => getTransactions({...filter, page}),
+        staleTime: 0,
+        // placeholderData: keepPreviousData,
+    })
+
+    const transactions = data?.data?.transactions // TRANSACTIONS LIST
+    const pagination = data?.data?.pagination
+
+    return (
+        <div className='w-full flex flex-col gap-8'>
+            <BreadcrumbCom title='Transactions' paths={['Dashboard', 'Transactions']} />
+
+            <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>
+                :
+                <>
+                    {/* filter section */}
+                    <div className='px-2 py-2 mb-4 flex items-end gap-2'>
+                        <Icons name='filter' className='text-3xl' />
+                        <div className='flex gap-4 items-center'>
+                            <div className=''>
+                                <p>Transaction ID</p>
+                                <select name='transaction_id' value={filter?.transaction_id} className='p-2' onChange={handleFilter}>
+                                    <option value=''>select</option>
+                                    <>
+                                    {transactions.map((item, index) => (
+                                        <option key={index} value={item?.transaction_id}>{item?.transaction_id}</option>
+                                    ))}
+                                    </>
+                                </select>
+                            </div>
+                            <div className=''>
+                                <p>Account ID</p>
+                                <select name='account_id' value={filter?.account_id} className='p-2' onChange={handleFilter}>
+                                    <option value=''>select</option>
+                                    <>
+                                    {transactions.map((item, index) => (
+                                        <option key={index} value={item?.account_id}>{item?.account_id}</option>
+                                    ))}
+                                    </>
+                                </select>
+                            </div>
+                        </div>
+                        <button onClick={handleFilterByParams} className={`bg-primary px-2 py-1 rounded-md text-white font-medium`}>Submit</button>
+                    </div>
+                     {/* end of filter section */}
+
+                    <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)} {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>
+                                                </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
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    }
+                                </tbody>
+                            </table>
+                        </>
+                    )}
+                    </TablePaginatedWrapper>
+                </>
+                }
+            </div>
+        </div>
+    )
+}

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/helpers/localImageLoader.js

@@ -0,0 +1,2 @@
+const localImgLoader = (location) => require(`../assets/${location}`);
+export default localImgLoader

src/index.css

@@ -29,7 +29,7 @@ code {
     @apply [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 [&::-webkit-scrollbar-track]:rounded-full [&::-webkit-scrollbar-thumb]:rounded-full
   }
   .box {
-    @apply flex flex-col w-full p-8 cursor-pointer rounded-lg h-full border-[1px] border-[#F1F1F4] dark:border-[#1E2027] shadow-[0px_3px_4px_0px_rgba(0,_0,_0,_0.03)]
+    @apply flex flex-col w-full p-8 rounded-lg h-full border-[1px] border-[#F1F1F4] dark:border-[#1E2027] shadow-[0px_3px_4px_0px_rgba(0,_0,_0,_0.03)]
   }
 }
 

src/pages/ApplicationsLoanPage.jsx

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

src/pages/ApprovedLoansPage.jsx

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

src/pages/DisbursementsLoanPage.jsx

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

src/pages/ErrorPage.jsx

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

src/pages/LoanChargesPage.jsx

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

src/pages/LoanOffersPage.jsx

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

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/pages/RepaymentsPage.jsx

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

src/pages/RequestPage.jsx

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

src/pages/SelectedLoanPage.jsx

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

src/pages/TransactionDetailsPage.jsx

@@ -0,0 +1,18 @@
+import React, { useEffect } from 'react'
+import {useLocation, useNavigate} from 'react-router-dom'
+import TransactionDetailsCom from '../components/transactionDetails/TransactionDetailsCom'
+
+
+export default function TransactionDetailsPage() {
+  const {state} = useLocation()
+  const navigate = useNavigate()
+
+  useEffect(()=>{
+    if(!state?.transactionID){
+        navigate('/', {replace: true})
+    }
+  },[])
+  return (
+    <TransactionDetailsCom id={state?.transactionID} />
+  )
+}

src/pages/TransactionsPage.jsx

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

src/pages/UsersPage.jsx

@@ -1,13 +0,0 @@
-import React from 'react'
-import BreadcrumbCom from '../components/breadcrumb/BreadcrumbCom'
-
-export default function UsersPage() {
-  return (
-    <div className='w-full'>
-      <BreadcrumbCom title='Users' paths={['Dashboard', 'Users']} />
-      <p className=''>
-        coming soon ...
-      </p>
-    </div>
-  )
-}

src/services/queryKeys.js

@@ -1,6 +1,10 @@
 const queryKeys = {
     dashboard: ['dashboard'],
     loans: ['loans'],
+    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

@@ -56,35 +56,38 @@ export const getDashData = (reqData) => {
     return getAuxEnd(`/dashboard`, postData)
 }
 
-// FUNCTION TO GET APPLIED LOANS TABLE
+// FUNCTION TO GET LOANS TABLE
 export const getLoans = (reqData) => {
     const postData = { ...reqData }
     return getAuxEnd(`/loans`, postData)
 }
 
-
-
-
-// FUNCTION TO GET APPLIED LOANS TABLE
-export const applyLoan = (reqData) => {
+// FUNCTION TO GET TRANSACTIONS TABLE
+export const getTransactions = (reqData) => {
     const postData = { ...reqData }
-    return getAuxEnd(`/office/loan/apply`, postData)
+    return getAuxEnd(`/transactions`, postData)
 }
 
-// FUNCTION TO GET APPLIED LOANS TABLE
-export const loanOffers = (reqData) => {
+// FUNCTION TO GET REPAYMENTS TABLE
+export const getRepayments = (reqData) => {
     const postData = { ...reqData }
-    return getAuxEnd(`/office/offers`, postData)
+    return getAuxEnd(`/repayments`, postData)
 }
 
-// FUNCTION TO GET APPLIED LOANS TABLE
-export const selectLoan = (reqData) => {
+// FUNCTION TO GET LOAN CHARGES TABLE
+export const getLoanCharges = (reqData) => {
     const postData = { ...reqData }
-    return getAuxEnd(`/office/loan/select`, postData)
+    return getAuxEnd(`/loan-charges`, postData)
 }
 
-// FUNCTION TO GET APPLIED LOANS TABLE
-export const approvedLoan = (reqData) => {
+// FUNCTION TO GET OFFERS LIST TABLE
+export const getOffers = (reqData) => {
     const postData = { ...reqData }
-    return getAuxEnd(`/office/loan/approved`, postData)
+    return getAuxEnd(`/offers`, postData)
+}
+
+// FUNCTION TO GET REPAYMENT SCHEDULE TABLE
+export const getRepaymentSchedule = (reqData) => {
+    const postData = { ...reqData }
+    return getAuxEnd(`/repayment-schedules`, postData)
 }