added filter component

.env

@@ -6,7 +6,7 @@ TWITTER_URL=https://twitter.com
 INSTAGRAM_URL=https://www.instagram.com
 
 # BACKEND END POINTS
-REACT_APP_MAIN_API='https://devcore.digifi.chiefsoft.net'
+REACT_APP_MAIN_API='https://backoffice-apidev.simbrellang.net'
 
 # ENQUIRIES CONTACTS
 VITE_CALL_ENDPOINT='09099000000'
@@ -14,4 +14,7 @@ VITE_EMAIL_ENDPOINT='fcmbloan@support.com'
 
 #BANK NAME
 VITE_BANK_NAME='First City Monument Bank'
-VITE_BANK_NAME_SHORT='FCMB'
+VITE_BANK_NAME_SHORT='FCMB'
+
+# Inactivity timeout/logout AT 10MINS
+REACT_APP_TIMEOUT=600000

.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='https://devcore.digifi.chiefsoft.net'
+REACT_APP_MAIN_API='https://backoffice-apidev.simbrellang.net'
 
 # ENQUIRIES CONTACTS
 VITE_CALL_ENDPOINT='09099000000'
@@ -14,4 +14,7 @@ VITE_EMAIL_ENDPOINT='fcmbloan@support.com'
 
 #BANK NAME
 VITE_BANK_NAME='First City Monument Bank'
-VITE_BANK_NAME_SHORT='FCMB'
+VITE_BANK_NAME_SHORT='FCMB'
+
+# Inactivity timeout/logout AT 10MINS
+REACT_APP_TIMEOUT=600000

.env.production

@@ -6,7 +6,7 @@ TWITTER_URL=https://twitter.com
 INSTAGRAM_URL=https://www.instagram.com
 
 # BACKEND END POINTS
-REACT_APP_MAIN_API='https://devcore.digifi.chiefsoft.net'
+REACT_APP_MAIN_API='https://backoffice-apidev.simbrellang.net'
 
 # ENQUIRIES CONTACTS
 VITE_CALL_ENDPOINT='09099000000'
@@ -14,4 +14,7 @@ VITE_EMAIL_ENDPOINT='fcmbloan@support.com'
 
 #BANK NAME
 VITE_BANK_NAME='First City Monument Bank'
-VITE_BANK_NAME_SHORT='FCMB'
+VITE_BANK_NAME_SHORT='FCMB'
+
+# Inactivity timeout/logout AT 10MINS
+REACT_APP_TIMEOUT=600000

docker-compose.yml

@@ -1,6 +1,7 @@
 version: '3'
 services:
   digifi-office:
+    image: registry.chiefsoft.net/digifi-firstoffice:latest
     build:
       context: .
       dockerfile: Dockerfile
@@ -28,4 +29,4 @@ networks:
     driver: bridge
     ipam:
       config:
-        - subnet: 172.15.56.0/24
+        - subnet: 172.15.56.0/24

package.json

@@ -5,10 +5,13 @@
   "dependencies": {
     "@reduxjs/toolkit": "^2.5.1",
     "@tanstack/react-query": "^5.66.0",
+    "apexcharts": "^4.5.0",
     "axios": "^1.7.9",
     "cra-template": "1.2.0",
     "formik": "^2.4.6",
     "react": "^19.0.0",
+    "react-apexcharts": "^1.7.0",
+    "react-countup": "^6.5.3",
     "react-dom": "^19.0.0",
     "react-icons": "^5.4.0",
     "react-redux": "^9.2.0",

src/App.js

@@ -23,8 +23,9 @@ function App() {
       queries: {
         refetchOnWindowFocus: false,
         retry: 3,
+        staleTime: 300000 //5 mins
         // refetchOnMount: false,
-        staleTime: Infinity // can also be a number in millisecond
+        // staleTime: Infinity // can also be a number in millisecond
       },
     },
   })

src/RouteLinks.js

@@ -1,13 +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',
+    transactionsPage: '/transactions',
+    repaymentsPage: '/repayments',
+    loanChargesPage: '/loan-charges',
+    offers: '/offers',
+    transaction_details_page: '/transaction/details',
+    errorPage: '*',
 }
 
 export default RouteLinks

src/SiteRoutes.jsx

@@ -7,12 +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 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'));
@@ -24,12 +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.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 */}
@@ -37,7 +38,7 @@ export default function SiteRoutes() {
         path={RouteLinks.errorPage} // error page
         element={
           <Suspense fallback={<PageLoader />}>
-            <p>Error Page 1</p>
+            <ErrorPage />
           </Suspense>
         } 
       />

src/authorization/UserExist.jsx

@@ -6,15 +6,56 @@ import DashboardLayout from "../components/layouts/DashboardLayout"
 import PageLoader from "../components/PageLoader"
 import { updateUserDetails } from "../store/UserDetails"
 import RouteLinks from "../RouteLinks"
+import debounceFunction from '../helpers/debounceFunction'
+
 
 export default function UserExist() {
     const dispatch = useDispatch()
     const navigate = useNavigate()
 
+    const [lastActivityTime, setLastActivityTime] = useState(Date.now()); // HOLDS THE INITIAL TIME USER LOGS IN
+
     const [pageIsLoading, setPageIsLoading] = useState(true)
 
     const {userDetails} = useSelector((state) => state.userDetails)
 
+
+        // Function to log the user out
+    const logoutUser = () => {
+      localStorage.clear()
+      navigate(RouteLinks.login, {replace:true})
+      window.location.reload()
+    };
+  
+    // Function to reset the activity time
+    const resetTimer = () => {
+      debounceFunction(setLastActivityTime(Date.now()), 1000)
+    };
+
+    useEffect(()=>{
+      const timer = setTimeout(()=>{
+        if(Date.now() - Number(lastActivityTime) >= Number(process.env.REACT_APP_TIMEOUT)){
+          logoutUser()
+        }
+      }, Number(process.env.REACT_APP_TIMEOUT))
+
+      // Listen for activity events
+      const events = ['mousemove', 'keydown', 'click', 'scroll', 'touchstart'];
+
+      // Adding event listeners
+      events.forEach(event => {
+        window.addEventListener(event, resetTimer);
+      });
+      
+      return () => {
+        clearTimeout(timer)
+        events.forEach(event => {
+          window.removeEventListener(event, resetTimer);
+        })
+      }
+    },[lastActivityTime])
+
+
     useEffect(()=>{
         const loadUser = (token) =>{
             const userExist = [{name:'dummy'}]

src/components/CustomCounter.jsx

@@ -1,29 +1,40 @@
-import React, { useEffect, useState } from 'react';
+// import React, { useEffect, useState } from 'react';
+
+// const CustomCounter = ({ targetNumber, timeInSeconds }) => {
+//   const [count, setCount] = useState(0);
+
+//   useEffect(() => {
+//     if (targetNumber <= 0 || timeInSeconds <= 0) return; // Handle edge cases
+
+//     const interval = Math.floor(timeInSeconds * 1000 / targetNumber); // Time interval for each count in milliseconds
+//     const totalTime = timeInSeconds * 1000; // Total time for the entire count in milliseconds
+
+//     let currentCount = 0;
+//     const intervalId = setInterval(() => {
+//       currentCount++;
+//       setCount((prevCount) => prevCount + 1); // Update state using the previous state
+
+//       if (currentCount >= targetNumber) {
+//         clearInterval(intervalId); // Stop the counting when the target number is reached
+//       }
+//     }, interval);
+
+//     // Cleanup the interval on component unmount
+//     return () => clearInterval(intervalId);
+//   }, [targetNumber, timeInSeconds]);
+
+//   return <>{count}</>;
+// };
+
+// export default CustomCounter;
+
+
+// import React from 'react';
+// import CountUp from 'react-countup';
 
 const CustomCounter = ({ targetNumber, timeInSeconds }) => {
-  const [count, setCount] = useState(0);
-
-  useEffect(() => {
-    if (targetNumber <= 0 || timeInSeconds <= 0) return; // Handle edge cases
-
-    const interval = Math.floor(timeInSeconds * 1000 / targetNumber); // Time interval for each count in milliseconds
-    const totalTime = timeInSeconds * 1000; // Total time for the entire count in milliseconds
-
-    let currentCount = 0;
-    const intervalId = setInterval(() => {
-      currentCount++;
-      setCount((prevCount) => prevCount + 1); // Update state using the previous state
-
-      if (currentCount >= targetNumber) {
-        clearInterval(intervalId); // Stop the counting when the target number is reached
-      }
-    }, interval);
-
-    // Cleanup the interval on component unmount
-    return () => clearInterval(intervalId);
-  }, [targetNumber, timeInSeconds]);
-
-  return <>{count}</>;
+  // return <CountUp end={targetNumber} duration={timeInSeconds} />;
+  return targetNumber
 };
 
-export default CustomCounter;
+export default CustomCounter;

src/components/Icons.jsx

@@ -8,8 +8,10 @@ import { TbPlayerTrackNext, TbPlayerTrackPrev } from 'react-icons/tb'
 import { IoMdSettings } from "react-icons/io";
 import { LuMessageSquareText } from "react-icons/lu";
 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, FaFilter } from "react-icons/fa";
 
 export default function Icons({name, className}) {
   return (
@@ -40,6 +42,16 @@ export default function Icons({name, className}) {
     <LuMessageSquareText className={`text-base ${className}`} />
     :name.toLowerCase() == 'right-panel' ?
     <LuPanelRight className={`text-base ${className}`} />
+    :name.toLowerCase() == 'google' ?
+    <FcGoogle className={`text-base ${className}`} />
+    :name.toLowerCase() == 'apple' ?
+    <IoLogoApple className={`text-base ${className}`} />
+    :name.toLowerCase() == 'sales' ?
+    <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/InputText.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 
-export default function InputText({id, name, type='text', value, handleChange}) {
+export default function InputText({id, name, type='text', placeholder, value, handleChange}) {
   return (
-    <div className='w-full h-10 round overflow-hidden'>
-        <input id={id} name={name} type={type} value={value} onChange={handleChange} className='p-2 w-full h-full text-black outline-0 ring-0 border border-slate-400 focus:border-purple-600 rounded' />
+    <div className='w-full h-12 overflow-hidden'>
+        <input id={id} name={name} type={type} value={value} placeholder={placeholder} onChange={handleChange} className='p-2 w-full h-full text-black outline-0 ring-0 border border-slate-300 focus:border-purple-600 rounded-md' />
     </div>
   )
 }

src/components/_applicationsloancom/ApplicationsLoanCom.jsx

@@ -0,0 +1,128 @@
+import React from 'react'
+import { useQuery } from "@tanstack/react-query";
+import {Link} from 'react-router-dom'
+
+import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
+import TableWrapper from '../tableWrapper/TableWrapper'
+import Icons from '../Icons'
+
+import Avatar from '../../assets/user_avatar.jpg'
+import queryKeys from '../../services/queryKeys'
+import { applyLoan } from '../../services/siteServices'
+
+import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
+import getDateFromDateString from '../../helpers/GetDateFromDateString';
+
+export default function LoanOffersCom() {
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.apply_loan,
+        queryFn: () => applyLoan()
+    })
+
+    const appliedUsers = data?.data?.result_data?.data // APPLY LOAN LIST
+
+    return (
+        <div className='w-full flex flex-col gap-8'>
+            <BreadcrumbCom title='Applications' paths={['Dashboard', 'Applications']} />
+
+            <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>
+                :
+                    <TableWrapper data={appliedUsers} itemsPerPage={15}>
+                    {({ 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">
+                                            Amount
+                                        </th>
+                                        <th scope="col" className="px-2">
+                                            Added
+                                        </th>
+                                        <th scope="col" className="px-2">
+                                            Verified
+                                        </th>
+                                        <th scope="col" className="px-2 text-right">
+                                            Action
+                                        </th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {(data && data.length > 0) ? data?.map((item, index) => (
+                                        <tr 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>  
+                                                </div>
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-left">
+                                                    <div className="font-normal text-gray-500">{item?.loan}</div>
+                                                </div> 
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-left">
+                                                    <div className="font-normal text-gray-500">{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> 
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-left">
+                                                    {!item?.verified ? 'N/A' : `${getDateFromDateString(item?.verified)} ${getTimeFromDateString(item?.verified)}`}
+                                                </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='hidden fle p-2 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>
+                        </>
+                    )}
+                    </TableWrapper>
+                }
+            </div>
+        </div>
+    )
+}

src/components/_approvedloancom/ApprovedLoanCom.jsx

@@ -0,0 +1,112 @@
+import React from 'react'
+import { useQuery } from "@tanstack/react-query";
+import {Link} from 'react-router-dom'
+
+import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
+import TableWrapper from '../tableWrapper/TableWrapper'
+import Icons from '../Icons'
+
+import Avatar from '../../assets/user_avatar.jpg'
+import queryKeys from '../../services/queryKeys'
+import { approvedLoan } from '../../services/siteServices'
+import getDateFromDateString from '../../helpers/GetDateFromDateString';
+import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
+
+export default function ApprovedLoanCom() {
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.approved_loan,
+        queryFn: () => approvedLoan()
+    })
+
+    const approvedUsers = data?.data?.result_data?.data // APPLY LOAN LIST
+
+    return (
+        <div className='w-full flex flex-col gap-8'>
+            <BreadcrumbCom title='Approved' paths={['Dashboard', 'Approved']} />
+
+            <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>
+                :
+                    <TableWrapper data={approvedUsers} itemsPerPage={15}>
+                    {({ 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 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>  
+                                                </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?.added)} {getTimeFromDateString(item?.added)}</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>
+                        </>
+                    )}
+                    </TableWrapper>
+                }
+            </div>
+        </div>
+    )
+}

src/components/_disbursementsloancom/DisbursementsLoanCom.jsx

@@ -0,0 +1,111 @@
+import React from 'react'
+import { useQuery } from "@tanstack/react-query";
+import {Link} from 'react-router-dom'
+
+import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
+import TableWrapper from '../tableWrapper/TableWrapper'
+import Icons from '../Icons'
+
+import Avatar from '../../assets/user_avatar.jpg'
+import queryKeys from '../../services/queryKeys'
+import { approvedLoan } from '../../services/siteServices'
+import getDateFromDateString from '../../helpers/GetDateFromDateString';
+import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
+
+export default function DisbursementsLoanCom() {
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.approved_loan,
+        queryFn: () => approvedLoan()
+    })
+
+    const approvedUsers = data?.data?.result_data?.data // DISBURSED LOAN LIST
+
+    return (
+        <div className='w-full flex flex-col gap-8'>
+            <BreadcrumbCom title='Disbursements' paths={['Dashboard', 'Disbursements']} />
+            <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>
+                :
+                    <TableWrapper data={approvedUsers} itemsPerPage={15}>
+                    {({ 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 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>  
+                                                </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?.added)} {getTimeFromDateString(item?.added)}</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='hidden fle p-2 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>
+                        </>
+                    )}
+                    </TableWrapper>
+                }
+            </div>
+        </div>
+    )
+}

src/components/_loanofferscom/LoanOffersCom.jsx

@@ -0,0 +1,135 @@
+import React from 'react'
+import { useQuery } from "@tanstack/react-query";
+import {Link} from 'react-router-dom'
+
+import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
+import TableWrapper from '../tableWrapper/TableWrapper'
+import Icons from '../Icons'
+
+import Avatar from '../../assets/user_avatar.jpg'
+import queryKeys from '../../services/queryKeys'
+import { loanOffers } from '../../services/siteServices'
+
+import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
+import getDateFromDateString from '../../helpers/GetDateFromDateString';
+
+export default function ApplicationsLoanCom() {
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.apply_loan,
+        queryFn: () => loanOffers()
+    })
+
+    const loanOffersUsersList = data?.data // LOAN OFFERS LIST
+
+    return (
+        <div className='w-full flex flex-col gap-8'>
+            <BreadcrumbCom title='Loan offers' paths={['Dashboard', 'Loan 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>
+                :
+                    <TableWrapper data={loanOffersUsersList} itemsPerPage={15}>
+                    {({ 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">
+                                            CID
+                                        </th>
+                                        <th scope="col" className="px-2">
+                                            Loan
+                                        </th>
+                                        <th scope="col" className="px-2">
+                                            Amount
+                                        </th>
+                                        <th scope="col" className="px-2">
+                                            Description
+                                        </th>
+                                        <th scope="col" className="px-2 text-right">
+                                            Days Duration
+                                        </th>
+                                        <th scope="col" className="px-2 text-right">
+                                            Active
+                                        </th>
+                                        <th scope="col" className="px-2 text-right">
+                                            Score
+                                        </th>
+                                        <th scope="col" className="px-2 text-right">
+                                            Lorder
+                                        </th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {(data && data.length > 0) ? data?.map((item, index) => (
+                                        <tr 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?.cid || ''}</div>
+                                                </div>  
+                                                </div>
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-left">
+                                                    <div className="font-normal text-gray-500">{item?.loan}</div>
+                                                </div> 
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-left">
+                                                    <div className="font-normal text-gray-500">{item?.amount}</div>
+                                                </div> 
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-left">
+                                                    <div className="font-normal text-gray-500">{item?.description}</div>
+                                                </div> 
+                                            </td>
+
+                                            <td className="px-2">
+                                                <div className="text-right">
+                                                    <div className="font-normal text-gray-500">{item?.days_duration}</div>
+                                                </div> 
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-right">
+                                                    <div className="font-normal text-gray-500">{item?.active}</div>
+                                                </div> 
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-right">
+                                                    <div className="font-normal text-gray-500">{item?.score}</div>
+                                                </div> 
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-right">
+                                                    <div className="font-normal text-gray-500">{item?.lorder}</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>
+                        </>
+                    )}
+                    </TableWrapper>
+                }
+            </div>
+        </div>
+    )
+}

src/components/_selectedloancom/SelectedLoanCom.jsx

@@ -0,0 +1,112 @@
+import React from 'react'
+import { useQuery } from "@tanstack/react-query";
+import {Link} from 'react-router-dom'
+
+import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
+import TableWrapper from '../tableWrapper/TableWrapper'
+import Icons from '../Icons'
+
+import Avatar from '../../assets/user_avatar.jpg'
+import queryKeys from '../../services/queryKeys'
+import { selectLoan } from '../../services/siteServices'
+import getDateFromDateString from '../../helpers/GetDateFromDateString';
+import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
+
+export default function SelectedLoanCom() {
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.select_loan,
+        queryFn: () => selectLoan()
+    })
+
+    const selectUsers = data?.data?.result_data?.data // APPLY LOAN LIST
+
+    return (
+        <div className='w-full flex flex-col gap-8'>
+            <BreadcrumbCom title='Selected - ' span='Loan options selected by the users before applying' paths={['Dashboard', 'Selected']} />
+
+            <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>
+                :
+                    <TableWrapper data={selectUsers} itemsPerPage={15}>
+                    {({ 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 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>  
+                                                </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?.added)} {getTimeFromDateString(item?.added)}</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>
+                        </>
+                    )}
+                    </TableWrapper>
+                }
+            </div>
+        </div>
+    )
+}

src/components/applicationsloancom/ApplicationsLoanCom.jsx

@@ -1,122 +0,0 @@
-import React from 'react'
-import { useQuery } from "@tanstack/react-query";
-import {Link} from 'react-router-dom'
-
-import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
-import TableWrapper from '../tableWrapper/TableWrapper'
-import Icons from '../Icons'
-
-import Avatar from '../../assets/user_avatar.jpg'
-import queryKeys from '../../services/queryKeys'
-import { applyLoan } from '../../services/siteServices'
-
-import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
-import getDateFromDateString from '../../helpers/GetDateFromDateString';
-
-export default function LoanOffersCom() {
-
-    const {data, isFetching, isError, error} = useQuery({
-        queryKey: queryKeys.apply_loan,
-        queryFn: () => applyLoan()
-    })
-
-    const appliedUsers = data?.data?.result_data?.data // APPLY LOAN LIST
-
-    return (
-        <div className='w-full flex flex-col gap-8'>
-            <BreadcrumbCom title='Applications' paths={['Dashboard', 'Applications']} />
-
-            {isFetching ? 
-              <>
-                  <div className="w-full py-4">
-                    <p className='text-slate-800'>Loading...</p>
-                  </div>
-              </>
-              : isError ?
-                <div className="w-full py-4">
-                    <p className='text-red-500'>{error.message}</p>
-                </div>
-              :
-                <TableWrapper data={appliedUsers} itemsPerPage={15}>
-                {({ data }) => (
-                    <>
-                        <table className="py-2 w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-                            <thead className="text-sm md:text-base text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
-                                <tr>
-                                    <th scope="col" className="px-4 py-2">
-                                        Name
-                                    </th>
-                                    <th scope="col" className="px-4 py-2">
-                                        Loan
-                                    </th>
-                                    <th scope="col" className="px-4 py-2">
-                                        Amount
-                                    </th>
-                                    <th scope="col" className="px-4 py-2">
-                                        Added
-                                    </th>
-                                    <th scope="col" className="px-4 py-2">
-                                        Verified
-                                    </th>
-                                    <th scope="col" className="px-4 py-2">
-                                        Action
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {(data && data.length > 0) ? data?.map((item, index) => (
-                                    <tr key={index} className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
-                                        <th scope="row" className="mr-4 flex items-center px-3 py-2 text-gray-900 whitespace-nowrap dark:text-white">
-                                            <img className="w-10 h-10 rounded-full" src={Avatar} alt="Jese image" />
-                                            <div className="px-3">
-                                                <div className="text-base font-semibold">{item?.name || ''}</div>
-                                                <div className="font-normal text-gray-500">{item?.bvn}</div>
-                                            </div>  
-                                        </th>
-                                        <td className="px-3 py-2">
-                                            {item?.loan} - {item?.description}
-                                        </td>
-                                        <td className="px-3 py-2">
-                                            {item?.amount || ''}
-                                        </td>
-                                        <td className="px-3 py-2">
-                                            <div className="flex items-center">
-                                                {getDateFromDateString(item?.added)} {getTimeFromDateString(item?.added)}
-                                            </div>
-                                        </td>
-                                        <td className="px-3 py-2">
-                                            <div className="flex items-center">
-                                                {!item?.verified ? 'N/A' : `${getDateFromDateString(item?.verified)} ${getTimeFromDateString(item?.verified)}`}
-                                            </div>
-                                        </td>
-                                        <td className="px-3 py-2 flex gap-3 md:gap-4">
-                                            {/* <!-- Modal toggle --> */}
-                                            {/* <Link to={RouteLinks.manageAdminPage}>
-                                                <i onClick={handleShowEditModal} className="fa-solid fa-eye text-base md:text-lg cursor-pointer p-2 text-sky-600"></i>
-                                            </Link> */}
-                                            {/* <i onClick={handleShowEditModal} className="fa-solid fa-pen-to-square text-base md:text-lg cursor-pointer p-2"></i> */}
-                                            {/* <i onClick={handleDeleteModal} className="fa-solid fa-trash text-base md:text-lg cursor-pointer p-2 text-red-500"></i> */}
-                                            <Icons name='edit' />
-                                            <Icons name='eye' />
-                                            <Icons name='trash' className={'hidden text-red-500'} />
-                                        </td>
-                                    </tr>
-                                ))
-                                :
-                                <tr className="w-3 p-3">
-                                    <td className="px-3 py-2" colSpan={6}>
-                                        <div className="flex justify-center items-center">
-                                            No Record Found
-                                        </div>
-                                    </td>
-                                </tr>
-                                }
-                            </tbody>
-                        </table>
-                    </>
-                )}
-                </TableWrapper>
-            }
-        </div>
-    )
-}

src/components/approvedloancom/ApprovedLoanCom.jsx

@@ -1,107 +0,0 @@
-import React from 'react'
-import { useQuery } from "@tanstack/react-query";
-import {Link} from 'react-router-dom'
-
-import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
-import TableWrapper from '../tableWrapper/TableWrapper'
-import Icons from '../Icons'
-
-import Avatar from '../../assets/user_avatar.jpg'
-import queryKeys from '../../services/queryKeys'
-import { approvedLoan } from '../../services/siteServices'
-import getDateFromDateString from '../../helpers/GetDateFromDateString';
-import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
-
-export default function ApprovedLoanCom() {
-
-    const {data, isFetching, isError, error} = useQuery({
-        queryKey: queryKeys.approved_loan,
-        queryFn: () => approvedLoan()
-    })
-
-    const approvedUsers = data?.data?.result_data?.data // APPLY LOAN LIST
-
-    return (
-        <div className='w-full flex flex-col gap-8'>
-            <BreadcrumbCom title='Approved' paths={['Dashboard', 'Approved']} />
-
-            {isFetching ? 
-              <>
-                  <div className="w-full py-4">
-                    <p className='text-slate-800'>Loading...</p>
-                  </div>
-              </>
-              : isError ?
-                <div className="w-full py-4">
-                    <p className='text-red-500'>{error.message}</p>
-                </div>
-              :
-                <TableWrapper data={approvedUsers} itemsPerPage={15}>
-                {({ data }) => (
-                    <>
-                        <table className="py-2 w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-                            <thead className="text-sm md:text-base text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
-                                <tr>
-                                    <th scope="col" className="px-4 py-2">
-                                        Name
-                                    </th>
-                                    <th scope="col" className="px-4 py-2">
-                                        Loan
-                                    </th>
-                                    <th scope="col" className="px-4 py-2">
-                                        Added
-                                    </th>
-                                    <th scope="col" className="px-4 py-2">
-                                        Action
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {(data && data.length > 0) ? data?.map((item, index) => (
-                                    <tr key={index} className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
-                                        <th scope="row" className="mr-4 flex items-center px-3 py-2 text-gray-900 whitespace-nowrap dark:text-white">
-                                            <img className="w-10 h-10 rounded-full" src={Avatar} alt="Jese image" />
-                                            <div className="px-3">
-                                                <div className="text-base font-semibold">{item?.name || ''}</div>
-                                                <div className="font-normal text-gray-500">{item?.bvn}</div>
-                                            </div>  
-                                        </th>
-                                        <td className="px-3 py-2">
-                                            {item?.loan} - {item?.description}
-                                        </td>
-                                        <td className="px-3 py-2">
-                                            <div className="flex items-center">
-                                            {getDateFromDateString(item?.added)} {getTimeFromDateString(item?.added)}
-                                            </div>
-                                        </td>
-                                        <td className="px-3 py-2 flex gap-3 md:gap-4">
-                                            {/* <!-- Modal toggle --> */}
-                                            {/* <Link to={RouteLinks.manageAdminPage}>
-                                                <i onClick={handleShowEditModal} className="fa-solid fa-eye text-base md:text-lg cursor-pointer p-2 text-sky-600"></i>
-                                            </Link> */}
-                                            {/* <i onClick={handleShowEditModal} className="fa-solid fa-pen-to-square text-base md:text-lg cursor-pointer p-2"></i> */}
-                                            {/* <i onClick={handleDeleteModal} className="fa-solid fa-trash text-base md:text-lg cursor-pointer p-2 text-red-500"></i> */}
-                                            <Icons name='edit' />
-                                            <Icons name='eye' />
-                                            <Icons name='trash' className={'hidden text-red-500'} />
-                                        </td>
-                                    </tr>
-                                ))
-                                :
-                                <tr className="w-3 p-3">
-                                    <td className="px-3 py-2" colSpan={4}>
-                                        <div className="flex justify-center items-center">
-                                            No Record Found
-                                        </div>
-                                    </td>
-                                </tr>
-                                }
-                            </tbody>
-                        </table>
-                    </>
-                )}
-                </TableWrapper>
-            }
-        </div>
-    )
-}

src/components/auth/LoginCom.jsx

@@ -1,17 +1,28 @@
 import React, { useEffect, useState } from 'react'
 import { useDispatch } from 'react-redux'
-import { useLocation, useNavigate } from 'react-router-dom'
-// import { useMutation } from '@tanstack/react-query'
+import { useLocation, useNavigate, Link } from 'react-router-dom'
+import { useMutation } from '@tanstack/react-query'
+import {Formik, Form} from 'formik'
+import * as Yup from "yup";
 
-import Label from '../Label'
 import InputText from '../InputText'
-import PageLoader from '../PageLoader'
 import { updateUserDetails } from "../../store/UserDetails";
-// import { loginUser } from '../../services/siteServices'
+import { loginUser } from '../../services/siteServices'
 
-import GoogleDownload from '../../assets/download/andriod.jpg'
-import IOSDownload from '../../assets/download/apple.jpg'
 import RouteLinks from '../../RouteLinks'
+import Icons from '../Icons'
+
+
+const initialValues = {
+  username: "",
+  password: "",
+};
+
+// To get the validation schema
+const validationSchema = Yup.object().shape({
+  username: Yup.string().required("username is required"),
+  password: Yup.string().required("password is required").min(6, 'must be upto 6 characters').max(12, 'must not exceed 12 characters'),
+});
 
 export default function LoginCom() {
 
@@ -20,91 +31,132 @@ export default function LoginCom() {
   
   const [loading, setLoading] = useState(false)
 
-  const [fields, setFields] = useState({
-    username: '',
-    password: '',
+  const login = useMutation({
+    mutationFn: (fields) => {
+        if(!fields.username || !fields.password){
+            throw new Error('Please provide all fields marked *')
+        }
+        return loginUser(fields)
+    },
+    onError: (error) => {
+        console.log(error)
+    },
+      onSuccess: (res) => {
+        const {jwt_token, user} = res?.data
+        if(jwt_token){
+            localStorage.setItem('token', jwt_token)
+            // localStorage.setItem('room', room)
+            const data = {jwt_token}
+            dispatch(updateUserDetails({ ...data, ...user }));
+          }
+          navigate(RouteLinks.homePage, {state:{proceed:'true'}}) // later add redux to dispatch state
+    }
   })
 
-  const handleChange = ({target:{name, value}}) => {
-      setFields(prev => ({...prev, [name]:value}))
-  }
+  // const handleLogin = () => {
+  //   setLoading(true)
+  //   const data = {name: 'dummy'}
+  //   localStorage.setItem('token', 'token')
+  //   dispatch(updateUserDetails({ ...data }));
+  //   setTimeout(()=>{
+  //     navigate(RouteLinks.homePage, {replace:true})
+  //   },500)
+  // }
 
-  // const login = useMutation({
-  //   mutationFn: (fields) => {
-  //       if(!fields.username || !fields.password){
-  //           throw new Error('Please provide all fields marked *')
-  //       }
-  //       return loginUser(fields)
-  //   },
-  //   onError: (error) => {
-  //       console.log(error)
-  //   },
-  //     onSuccess: (res) => {
-  //       // const {token, room} = res?.data?.data
-  //       // if(token){
-  //       //     localStorage.setItem('token', token)
-  //       //     localStorage.setItem('room', room)
-  //       //     // const data = {token}
-  //       //     // dispatch(updateUserDetails({ ...data }));
-  //       //   }
-  //         navigate(myLinks.home, {state:{proceed:'true'}}) // later add redux to dispatch state
-  //   }
-  // })
+  //FUNCTION TO HANDLE LOGIN
+  const handleSubmit = (values, helper) => {
+    login.mutate(values)
+    // handleLogin()
+  };
 
 
-  const handleLogin = () => {
-    setLoading(true)
-    const data = {name: 'dummy'}
-    localStorage.setItem('token', 'token')
-    dispatch(updateUserDetails({ ...data }));
-    setTimeout(()=>{
-      navigate(RouteLinks.homePage, {replace:true})
-    },500)
-  }
-
   return (
     <>
-      <div className={`h-screen bg-sky-300 flex flex-col items-center bg-[url('./assets/login-bg.jpg')] bg-cover bg-center bg-no-repeat`}>
-        <div className='flex flex-col gap-3 w-[80%] sm:w-[500px] bg-white rounded-xl mt-8 p-8 shadow'>
-          <div className='w-full mb-8 flex flex-col gap-1'>
-            <h1 className='text-2xl md:text-3xl font-bold'>Digifi BackOffice</h1>
-            <p className='text-sm font-medium text-slate-400'>Welcome back, please login to your account</p>
-          </div>
-          <div className='text-input flex flex-col gap-2'>
-            <Label name='Username' htmlfor='username' />
-            <InputText id='username' name='username' value={fields.username} handleChange={handleChange} />
-          </div>
-          <div className='text-input flex flex-col gap-2'>
-            <Label name='Password' htmlfor='password' />
-            <InputText id='password' name='password' type='password' value={fields.password} handleChange={handleChange} />
-          </div>
+      <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 grid-cols-1 md:grid-cols-3 lg:grid-cols-2'>
+          <div className='col-span-1 md:col-span-2 lg:col-span-1 h-full'>
+            <Formik
+              initialValues={initialValues}
+              validationSchema={validationSchema}
+              onSubmit={handleSubmit}
+            >
+              {(props)=>(
+                <Form>
+                  <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'>Sign In</h1>
+                      <p className='text-sm font-medium text-slate-500'>Welcome back, please login to your account</p>
+                    </div>
 
-          {/* {login.error &&
-          <>
-            <div className="w-full text-center p-2">
-              <p className='text-red-500 text-sm'>{login.error.message}</p>
-          </div>
-          </>
-          } */}
+                    {/* social login */}
+                    <div className='grid grid-cols-2 gap-4 text-sm'>
+                      <div className='px-4 py-2 flex gap-2 items-center justify-center text-black-body font-medium border border-slate-300/50 rounded-md hover:text-primary hover:bg-sky-50 cursor-pointer'>
+                        <Icons name='google' />
+                        <span>Sign in with Google</span>
+                      </div>
+                      <div className='px-4 py-2 flex gap-2 items-center justify-center text-black-body font-medium border border-slate-300/50 rounded-md hover:text-primary hover:bg-sky-50 cursor-pointer'>
+                        <Icons name='apple' />
+                        <span>Sign in with Apple</span>
+                      </div>
+                    </div>
 
-          <div className='mt-5 flex justify-end items-center'>
-            {/* <button onClick={()=>{login.mutate(fields)}} disabled={login.isPending} className='px-3 py-2 bg-purple-800 text-white font-bold rounded'>{login.isPending ? 'loading...' : 'Login'}</button> */}
-            <button onClick={handleLogin} className='px-4 py-[5px] bg-purple-600 text-white font-bold rounded'>{loading ? 'Loading...' : 'SIGN IN'}</button>
-          </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="hidden mt-8 gri grid-cols-2 gap-8">
-              <div className="w-full">
-                <a className="icon google"
-                    href='#' >
-                    <img src={IOSDownload} className='w-100 h-auto' alt='IOS Download' />
-                </a>
-              </div>
+                    <div className='flex flex-col gap-6'>
+                      <div className='relative text-input flex flex-col gap-2'>
+                        <p className='absolute left-0 -top-4 text-red-500 text-10'>
+                          {(props.errors.username && props.touched.username) ? props.errors.username : ''}
+                        </p>
+                        <InputText 
+                          id='username' 
+                          placeholder='Username' 
+                          name='username' 
+                          value={props.values.username}
+                          handleChange={props.handleChange}
+                        />
+                      </div>
+                      <div className='relative text-input flex flex-col gap-2 mb-10'>
+                        <p className='absolute left-0 -top-4 text-red-500 text-10'>
+                          {(props.errors.password && props.touched.password) ? props.errors.password : ''}
+                        </p>
+                        <InputText 
+                          id='password' 
+                          placeholder='Password' 
+                          name='password' 
+                          type='password' 
+                          value={props.values.password}
+                          handleChange={props.handleChange}
+                        />
+                        {/* <p className='text-sm text-end font-medium text-primary'>Forget password ?</p> */}
+                      </div>
+                      <div className='h-10 mb-10'>
+                        <button type='submit' disabled={login.isPending} className='w-full h-full bg-primary text-white font-bold rounded-md'>{login.isPending || loading ? 'loading...' : 'Login'}</button>
+                      </div>
+                  
+                      {login.error &&
+                      <>
+                        <div className="w-full text-center">
+                          <p className='text-red-500 text-sm'>{login.error.message}</p>
+                      </div>
+                      </>
+                      }
+                    </div>
 
-              <div className="w-full">
-                <a className="icon apple"  href='#'>
-                    <img src={GoogleDownload} className='w-100 h-auto' alt='IOS Download' />
-                </a>
-              </div>
+                    {/* <p className='text-sm text-center font-medium text-slate-500'>Not yet a member? <span className='text-primary'>Sign Up</span></p> */}
+
+                    <div className='flex justify-end gap-4 mt-6 text-[13px] font-medium'>
+                      <Link className='text-primary' to=''>Terms</Link>
+                      <Link className='text-primary' to=''>Plans</Link>
+                      <Link className='text-primary' to=''>Contact Us</Link>
+                    </div>
+
+
+                  </div>
+                </Form>
+              )}
+            </Formik>
           </div>
         </div>
       </div>

src/components/breadcrumb/BreadcrumbCom.jsx

@@ -8,52 +8,42 @@ 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', ()=>{
-      //     if(window.scrollY >= rect + 20){
-      //         setStickNav(true)
-      //         console.log('tru')
-      //     }else{
-      //         setStickNav(false)
-      //         console.log('false')
-      //     }
-      // })
-
-    //   return () => window.removeEventListener('scroll', window.addEventListener('scroll', ()=>{
-    //     if(window.scrollY >= rect + 20){
-    //         setStickNav(true)
-    //     }else{
-    //         setStickNav(false)
-    //     }
-    // }))
+      window.addEventListener('scroll', ()=>{
+          if(window.scrollY >= rect + 20){
+              setStickNav(true)
+              console.log('tru')
+          }else{
+              setStickNav(false)
+              console.log('false')
+          }
+      })
   },[])
 
   return (
-    <div className={`${stickNav ? 'sticky top-0 transition-[top] duration-1000 shadow-md shadow-black' : '-top-[100px] static'}`}>
-
-    <div className= {`w-full py-2 flex justify-between items-center`}>
-      <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>
+    // ${stickNav ? 'sticky top-0 transition-[top] duration-1000 shadow-md shadow-black' : '-top-[100px] static'}
+    <div className={`sticky z-[970] top-[78px] lg:-top-10 bg-white-body dark:bg-black-body dark:border-b dark:border-black-box dark:shadow-sm dark:shadow-black-box`}>
+      <div className= {`w-full py-2 flex justify-between items-center`}>
+        <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'>{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' />
+              {paths.map((item, index) => (
+                <div className='flex gap-2 items-center text-black dark:text-white-body text-10 sm:text-sm' key={index}>
+                  <MdKeyboardDoubleArrowRight />
+                  <p className={`${index + 1 == paths.length ? 'text-sky-600 dark:text-white-body/70' : ''}`}>{item}</p>
+                </div>
+              ))}
+          </div>
         </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' />
-            {paths.map((item, index) => (
-              <div className='flex gap-2 items-center text-black dark:text-white-body text-10 sm:text-sm' key={index}>
-                <MdKeyboardDoubleArrowRight />
-                <p className={`${index + 1 == paths.length ? 'text-sky-600 dark:text-white-body/70' : ''}`}>{item}</p>
-              </div>
-            ))}
+        <div className='hidden lg:flex'>
+          <DashboardHeader />
         </div>
       </div>
-      <div className='hidden lg:flex'>
-        <DashboardHeader />
-      </div>
-    </div>
     </div>
   )
 }

src/components/disbursementsloancom/DisbursementsLoanCom.jsx

@@ -1,107 +0,0 @@
-import React from 'react'
-import { useQuery } from "@tanstack/react-query";
-import {Link} from 'react-router-dom'
-
-import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
-import TableWrapper from '../tableWrapper/TableWrapper'
-import Icons from '../Icons'
-
-import Avatar from '../../assets/user_avatar.jpg'
-import queryKeys from '../../services/queryKeys'
-import { approvedLoan } from '../../services/siteServices'
-import getDateFromDateString from '../../helpers/GetDateFromDateString';
-import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
-
-export default function DisbursementsLoanCom() {
-
-    const {data, isFetching, isError, error} = useQuery({
-        queryKey: queryKeys.approved_loan,
-        queryFn: () => approvedLoan()
-    })
-
-    const approvedUsers = data?.data?.result_data?.data // DISBURSED LOAN LIST
-
-    return (
-        <div className='w-full flex flex-col gap-8'>
-            <BreadcrumbCom title='Disbursements' paths={['Dashboard', 'Disbursements']} />
-
-            {isFetching ? 
-              <>
-                  <div className="w-full py-4">
-                    <p className='text-slate-800'>Loading...</p>
-                  </div>
-              </>
-              : isError ?
-                <div className="w-full py-4">
-                    <p className='text-red-500'>{error.message}</p>
-                </div>
-              :
-                <TableWrapper data={approvedUsers} itemsPerPage={15}>
-                {({ data }) => (
-                    <>
-                        <table className="py-2 w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-                            <thead className="text-sm md:text-base text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
-                                <tr>
-                                    <th scope="col" className="px-4 py-2">
-                                        Name
-                                    </th>
-                                    <th scope="col" className="px-4 py-2">
-                                        Loan
-                                    </th>
-                                    <th scope="col" className="px-4 py-2">
-                                        Added
-                                    </th>
-                                    <th scope="col" className="px-4 py-2">
-                                        Action
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {(data && data.length > 0) ? data?.map((item, index) => (
-                                    <tr key={index} className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
-                                        <th scope="row" className="mr-4 flex items-center px-3 py-2 text-gray-900 whitespace-nowrap dark:text-white">
-                                            <img className="w-10 h-10 rounded-full" src={Avatar} alt="Jese image" />
-                                            <div className="px-3">
-                                                <div className="text-base font-semibold">{item?.name || ''}</div>
-                                                <div className="font-normal text-gray-500">{item?.bvn}</div>
-                                            </div>  
-                                        </th>
-                                        <td className="px-3 py-2">
-                                            {item?.loan} - {item?.description}
-                                        </td>
-                                        <td className="px-3 py-2">
-                                            <div className="flex items-center">
-                                            {getDateFromDateString(item?.added)} {getTimeFromDateString(item?.added)}
-                                            </div>
-                                        </td>
-                                        <td className="px-3 py-2 flex gap-3 md:gap-4">
-                                            {/* <!-- Modal toggle --> */}
-                                            {/* <Link to={RouteLinks.manageAdminPage}>
-                                                <i onClick={handleShowEditModal} className="fa-solid fa-eye text-base md:text-lg cursor-pointer p-2 text-sky-600"></i>
-                                            </Link> */}
-                                            {/* <i onClick={handleShowEditModal} className="fa-solid fa-pen-to-square text-base md:text-lg cursor-pointer p-2"></i> */}
-                                            {/* <i onClick={handleDeleteModal} className="fa-solid fa-trash text-base md:text-lg cursor-pointer p-2 text-red-500"></i> */}
-                                            <Icons name='edit' />
-                                            <Icons name='eye' />
-                                            <Icons name='trash' className={'hidden text-red-500'} />
-                                        </td>
-                                    </tr>
-                                ))
-                                :
-                                <tr className="w-3 p-3">
-                                    <td className="px-3 py-2" colSpan={4}>
-                                        <div className="flex justify-center items-center">
-                                            No Record Found
-                                        </div>
-                                    </td>
-                                </tr>
-                                }
-                            </tbody>
-                        </table>
-                    </>
-                )}
-                </TableWrapper>
-            }
-        </div>
-    )
-}

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

@@ -0,0 +1,188 @@
+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 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() {
+
+  const {data, isFetching, isError, error} = useQuery({
+    queryKey: queryKeys.dashboard,
+    queryFn: () => getDashData(),
+  })
+
+  const dashData = data?.data // DASHBOARD DATA
+
+  // console.log('dashData', dashData)
+  // loans, payments, recent_transactions [], request_summary
+
+  return (
+    <div className='w-full flex flex-col gap-8'>
+      <BreadcrumbCom title='Dashboard' paths={['Home', 'Dashboard']} />
+
+      {(isFetching || isError) ?
+      <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+        {isError ? <p className='text-red-500'>{error.message}</p> : <p className='text-slate-800'>Loading...</p>}
+      </div>
+      :
+      <div className='grid grid-cols-1 gap-8'>
+        <div className='w-full grid grid-cols-1 xl:grid-cols-3 gap-8'>
+          <div className='box min-h-[230] justify-between bg-[#F7D9E3] dark:bg-black-box text-black-body dark:text-white-body'>
+            <p className='text-base sm:text-lg font-bold hover:text-primary'>Loans</p>
+            <div className='flex flex-wrap gap-2 items-end font-bold'>
+              {/* <p className='text-3xl sm:text-[39px]'><span className='text-xl sm:text-2xl'>{dashData?.loans?.currency_text}</span><CustomCounter targetNumber={formatNumber(dashData?.loans?.value)} timeInSeconds='1' /></p> */}
+              <p className='text-xl sm:text-[30px]'><span className='text-lg sm:text-xl'>
+                {/* {dashData?.loans?.currency_text} */}
+                </span><CustomCounter targetNumber={formatNumber(dashData?.loans?.value)} timeInSeconds='1' />
+              </p>
+              <p className='sm:text-[13.9px]'>{dashData?.loans?.text}</p>
+            </div>
+          </div>
+          <div className='box min-h-[230] justify-between bg-[#CBF0F5] dark:bg-black-box text-black-body dark:text-white-body'>
+            <p className='text-base sm:text-lg font-bold hover:text-primary'>Payments</p>
+            <div className='flex flex-wrap gap-2 items-end font-bold'>
+              <p className='text-xl sm:text-[30px]'><span className='text-lg sm:text-xl'>
+                {/* {dashData?.payments?.currency_text} */}
+                </span><CustomCounter targetNumber={formatNumber(dashData?.payments?.value)} timeInSeconds='1' />
+              </p>
+              <p className='sm:text-[13.9px]'>{dashData?.payments?.text}</p>
+            </div>
+          </div>
+          <div className='box min-h-[230] justify-between bg-[#CBD4F4] dark:bg-black-box text-black-body dark:text-white-body'>
+            <p className='mb-4 text-base sm:text-lg font-bold hover:text-primary'>Request Summary</p>
+            <div className='grid grid-cols-2 gap-4 font-bold'>
+              {
+              Object.values(dashData?.request_summary).map((item, index) => {
+                return (
+                  <div key={index} className='flex items-center gap-2'>
+                    <div className='min-w-10 min-h-10 bg-white-body dark:bg-black-box dark:shadow-[0_0_0_1px_#f9f9f9] rounded-md flex justify-center items-center'>
+                      <Icons name='sales' />
+                    </div>
+                    <div>
+                      <p className='font-bold text-base'><CustomCounter targetNumber={formatNumber(Object.values(item)[0])} timeInSeconds='1' /></p>
+                      <p className='text-12 text-slate-500'>{Object.keys(item)[0]}</p>
+                    </div>
+                  </div>
+                )
+              })
+              }
+            </div>
+          </div>
+        </div>
+
+        <div className='w-full'>
+          <div className='box gap-8 bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+            <div className='grid grid-cols-1 xs:grid-cols-2 gap-4'>
+              <div className='flex flex-col gap-1 order-2 xs:order-1'>
+                <p className='font-bold text-base'>Recent Request</p>
+                {/* <p className='text-12'>Over 500 members</p> */}
+              </div>
+              {/* <div className='order-1 xs:order-2 text-left xs:text-right'>
+                <button className='font-bold bg-white-aside text-black-body text-12 px-4 py-2 hover:text-primary hover:bg-sky-50 dark:hover:text-white dark:hover:bg-primary dark:text-white-body dark:bg-black-body rounded-md'>+ New Member</button>
+              </div> */}
+            </div>
+
+              <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>
+                    }
+                    <>
+                    {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>
+                    }
+                    </>
+                  </tbody>
+              </table>
+
+          </div>
+        </div>
+      </div>
+      }
+    </div>
+  )
+}

src/components/home/Widget1.jsx

@@ -0,0 +1,187 @@
+// import {useEffect, useRef} from 'react'
+// import ApexCharts from 'apexcharts'
+
+// const Widget1 = ({chartHeight='50px'}) => {
+//   const chartRef = useRef(null)
+
+//   const {mode} = '' // to be replaced by theme mode value later
+
+//   useEffect(() => {
+//     const chart = refreshChart()
+
+//     return () => {
+//       if (chart) {
+//         chart.destroy()
+//       }
+//     }
+//     // eslint-disable-next-line react-hooks/exhaustive-deps
+//   }, [chartRef, mode])
+
+//   const refreshChart = () => {
+//     if (!chartRef.current) {
+//       return
+//     }
+
+//     const chart = new ApexCharts(chartRef.current, chartOptions(chartHeight))
+//     if (chart) {
+//       chart.render()
+//     }
+
+//     return chart
+//   }
+
+//   return (
+//     <div className='w-full'>
+//         {/* end::Title */}
+//         <div
+//           ref={chartRef}
+//           className='mixed-widget-13-chart'
+//           style={{height: chartHeight, minHeight: chartHeight}}
+//         ></div>
+//     </div>
+//   )
+// }
+
+// const chartOptions = (chartHeight) => {
+//   // const labelColor = getCSSVariableValue('--bs-gray-800')
+//   // const strokeColor = getCSSVariableValue('--bs-gray-300')
+//   const labelColor = '#e9e9e9'
+//   const strokeColor = '#e3e3e3'
+//   // const strokeColor = getCSSVariableValue('--bs-gray-300') as string
+
+//   return {
+//     series: [
+//       {
+//         name: 'Loans',
+//         data: [15, 25, 15, 40, 20, 50],
+//       },
+//     ],
+//     grid: {
+//       show: false,
+//       padding: {
+//         top: 0,
+//         bottom: 0,
+//         left: 0,
+//         right: 0,
+//       },
+//     },
+//     chart: {
+//       fontFamily: 'inherit',
+//       type: 'area',
+//       height: chartHeight,
+//       toolbar: {
+//         show: false,
+//       },
+//       zoom: {
+//         enabled: false,
+//       },
+//       sparkline: {
+//         enabled: true,
+//       },
+//     },
+//     plotOptions: {},
+//     legend: {
+//       show: false,
+//     },
+//     dataLabels: {
+//       enabled: false,
+//     },
+//     fill: {
+//       type: 'gradient',
+//       gradient: {
+//         opacityFrom: 0.4,
+//         opacityTo: 0,
+//         stops: [20, 120, 120, 120],
+//       },
+//     },
+//     stroke: {
+//       curve: 'smooth',
+//       show: true,
+//       width: 3,
+//       colors: ['#FFFFFF'],
+//     },
+//     xaxis: {
+//       categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+//       axisBorder: {
+//         show: false,
+//       },
+//       axisTicks: {
+//         show: false,
+//       },
+//       labels: {
+//         show: false,
+//         style: {
+//           colors: labelColor,
+//           fontSize: '12px',
+//         },
+//       },
+//       crosshairs: {
+//         show: false,
+//         position: 'front',
+//         stroke: {
+//           color: strokeColor,
+//           width: 1,
+//           dashArray: 3,
+//         },
+//       },
+//       tooltip: {
+//         enabled: true,
+//         formatter: undefined,
+//         offsetY: 0,
+//         style: {
+//           fontSize: '12px',
+//         },
+//       },
+//     },
+//     yaxis: {
+//       min: 0,
+//       max: 60,
+//       labels: {
+//         show: false,
+//         style: {
+//           colors: labelColor,
+//           fontSize: '12px',
+//         },
+//       },
+//     },
+//     states: {
+//       normal: {
+//         filter: {
+//           type: 'none',
+//           value: 0,
+//         },
+//       },
+//       hover: {
+//         filter: {
+//           type: 'none',
+//           value: 0,
+//         },
+//       },
+//       active: {
+//         allowMultipleDataPointsSelection: false,
+//         filter: {
+//           type: 'none',
+//           value: 0,
+//         },
+//       },
+//     },
+//     tooltip: {
+//       style: {
+//         fontSize: '12px',
+//       },
+//       y: {
+//         formatter: function (val) {
+//           return '$' + val + ' thousand'
+//         },
+//       },
+//     },
+//     colors: ['#ffffff'],
+//     markers: {
+//       colors: [labelColor],
+//       strokeColors: [strokeColor],
+//       strokeWidth: 3,
+//     },
+//   }
+// }
+
+// export {Widget1}

src/components/home/Widget2.jsx

@@ -0,0 +1,147 @@
+// import {useEffect, useRef} from 'react'
+// import ApexCharts from 'apexcharts'
+
+// const Widget2 = ({chartHeight='100px'}) => {
+//   const chartRef = useRef(null)
+
+//   const {mode} = '' // to be replaced by theme mode value later
+
+//   useEffect(() => {
+//     const chart = refreshChart()
+
+//     return () => {
+//       if (chart) {
+//         chart.destroy()
+//       }
+//     }
+//     // eslint-disable-next-line react-hooks/exhaustive-deps
+//   }, [chartRef, mode])
+
+//   const refreshChart = () => {
+//     if (!chartRef.current) {
+//       return
+//     }
+
+//     const chart = new ApexCharts(chartRef.current, chartOptions(chartHeight))
+//     if (chart) {
+//       chart.render()
+//     }
+
+//     return chart
+//   }
+
+//   return (
+//     <div className='w-full'>
+//         {/* end::Title */}
+//         <div
+//           ref={chartRef}
+//           className='mixed-widget-13-chart'
+//           style={{height: chartHeight, minHeight: chartHeight}}
+//         ></div>
+//     </div>
+//   )
+// }
+
+// const chartOptions = (chartHeight) => {
+//     // const labelColor = getCSSVariableValue('--bs-gray-800')
+  
+//     return {
+//       series: [
+//         {
+//           name: 'Payments',
+//           data: [1, 2.1, 1, 2.1, 4.1, 6.1, 4.1, 4.1, 2.1, 4.1, 2.1, 3.1, 1, 1, 2.1],
+//         },
+//       ],
+//       chart: {
+//         fontFamily: 'inherit',
+//         height: chartHeight,
+//         type: 'bar',
+//         toolbar: {
+//           show: false,
+//         },
+//       },
+//       grid: {
+//         show: false,
+//         padding: {
+//           top: 0,
+//           bottom: 0,
+//           left: 0,
+//           right: 0,
+//         },
+//       },
+//       colors: ['#ffffff'],
+//       plotOptions: {
+//         bar: {
+//           borderRadius: 2.5,
+//           dataLabels: {
+//             position: 'top', // top, center, bottom
+//           },
+//           columnWidth: '20%',
+//         },
+//       },
+//       dataLabels: {
+//         enabled: false,
+//         formatter: function (val) {
+//           return val + '%'
+//         },
+//         offsetY: -20,
+//         style: {
+//           fontSize: '12px',
+//           colors: ['#304758'],
+//         },
+//       },
+//       xaxis: {
+//         labels: {
+//           show: false,
+//         },
+//         categories: [
+//           'Jan',
+//           'Feb',
+//           'Mar',
+//           'Apr',
+//           'May',
+//           'Jun',
+//           'Jul',
+//           'Aug',
+//           'Sep',
+//           'Oct',
+//           'Nov',
+//           'Dec',
+//           'Jan',
+//           'Feb',
+//           'Mar',
+//         ],
+//         position: 'top',
+//         axisBorder: {
+//           show: false,
+//         },
+//         axisTicks: {
+//           show: false,
+//         },
+//         crosshairs: {
+//           show: false,
+//         },
+//         tooltip: {
+//           enabled: false,
+//         },
+//       },
+//       yaxis: {
+//         show: false,
+//         axisBorder: {
+//           show: false,
+//         },
+//         axisTicks: {
+//           show: false,
+//           // background: labelColor,
+//         },
+//         labels: {
+//           show: false,
+//           formatter: function (val) {
+//             return val + '%'
+//           },
+//         },
+//       },
+//     }
+//   }
+
+// export {Widget2}

src/components/layouts/DashboardHeader.jsx

@@ -7,13 +7,14 @@ import UserAvatar from '../../assets/user_avatar.jpg'
 import HandBurger from "./HandBurger"
 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()
+
     const {theme, handleTheme, setLogoutModal, activeMenu, handleActiveMenu, showAsideDrawer, setShowAsideDrawer} = generalLayoutContext()
 
   return (
@@ -33,9 +34,11 @@ export default function DashboardHeader() {
                         <i className="fa-solid fa-wallet text-xl"></i>
                     </Link>
 
+                    {/* RIGHT DRAWER BUTTON */}
                      <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">
                         <i className="fa-regular fa-envelope text-xl"></i>
@@ -54,7 +57,7 @@ export default function DashboardHeader() {
                     <div onClick={()=>handleActiveMenu('avatar')} className='relative cursor-pointer w-10 h-10 rounded shadow-round_black dark:shadow-round_white'>
                         <img src={UserAvatar} alt='user avatar' className='w-full h-full p-1 rounded-full' />
                         {activeMenu == 'avatar' &&
-                            <div className="pop-modal z-[777] absolute p-4 w-52 sm:w-96 bg-white-body dark:bg-black-box right-0 top-16 rounded shadow-round_black dark:shadow-round_white">
+                            <div className="pop-modal z-[777] absolute p-4 w-52 sm:w-96 bg-white dark:bg-black-box right-0 top-16 rounded shadow-round_black dark:shadow-round_white">
                                 <div className="w-full h-full flex flex-col gap-4">
                                     <div className="flex flex-col text-black dark:text-white text-base sm:text-lg">
                                         <h1 className="font-semibold">Username</h1>

src/components/layouts/DashboardLayout.jsx

@@ -1,4 +1,3 @@
-import { useEffect, useState } from 'react'
 import { Outlet } from 'react-router-dom'
 
 import DashboardHeader from './DashboardHeader'
@@ -8,6 +7,8 @@ import RightAsideBar from './rightaside/RightAsideBar'
 
 export default function DashboardLayout() {
 
+    // let {pathname} = useLocation()
+
   const {showAsideDrawer, setShowAsideDrawer} = generalLayoutContext()
   
   return (
@@ -16,18 +17,15 @@ 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-white/20 transition-all cursor-pointer`} onClick={()=>setShowAsideDrawer('')} ></div>
-            <div className={`px-8 py-4 h-full w-4/5 sm:w-72 bg-white-aside dark:bg-black-aside dark:text-white-light`}>
+            <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`}>
                 <DashboardAside />
             </div>
         </div>
 
-        <div className='main w-full bg-inherit large:mr-[350px]'>
-            <div className='fixed top-0 left-0 z-[777] w-full px-8 bg-inherit lg:hidden'>
+        <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> 
 
@@ -43,15 +41,17 @@ export default function DashboardLayout() {
         </div>
 
         {/* Right Aisde */}
-        <div className={`px-8 py-4 hidden large:flex fixed right-5 top-0 bottom-0 sm:w-[350px] bg-[#192440] dark:bg-[#1E1E2D] text-white-body`}>
-            <RightAsideBar />
-        </div>
-        <div className={`${showAsideDrawer =='right-aside' ? 'right-0 w-full' : '-right-full w-0'} fixed inset-0 z-[999] large:hidden bg-white/20 transition-all cursor-pointer`} onClick={()=>setShowAsideDrawer('')}>
-            {/* <div className={`${showAsideDrawer =='right-aside' ? 'right-0' : '-right-full'} fixed z-[999] right-0 top-0 inset-0 w-full bg-white/20 bg-red-400 transition-all cursor-pointer`} onClick={()=>setShowAsideDrawer('')} ></div> */}
-            <div className={`${showAsideDrawer =='right-aside' ? 'right-0' : '-right-full'} fixed z-[999] top-0 botom-0 px-8 py-4 h-full w-4/5 sm:w-[350px] bg-[#192440] dark:bg-[#1E1E2D] text-white-body`}>
+        <>
+            <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 />
             </div>
-        </div>
+            <div className={`${showAsideDrawer =='right-aside' ? 'right-0 w-full' : '-right-full w-0'} fixed inset-0 z-[999] large:hidden bg-[rgba(0,_0,_0,_0.2)] dark:bg-[rgba(0,_0,_0,_0.4)] transition-all cursor-pointer`} onClick={()=>setShowAsideDrawer('')}>
+                {/* <div className={`${showAsideDrawer =='right-aside' ? 'right-0' : '-right-full'} fixed z-[999] right-0 top-0 inset-0 w-full bg-white/20 bg-red-400 transition-all cursor-pointer`} onClick={()=>setShowAsideDrawer('')} ></div> */}
+                <div onClick={(e)=>e.stopPropagation()} className={`${showAsideDrawer =='right-aside' ? 'right-0' : '-right-full'} fixed z-[999] top-0 botom-0 px-8 py-4 h-full w-4/5 sm:w-[400px] bg-[#192440] dark:bg-[#1E1E2D] text-white-body`}>
+                    <RightAsideBar />
+                </div>
+            </div>
+        </>
     </div>
   )
 }

src/components/layouts/LogoutModal.jsx

@@ -21,7 +21,7 @@ export default function LogoutModal({close}) {
   return (
     <ModalWrapper
     >
-        <div className="relative bg-white rounded-lg shadow-round_black dark:shadow-round_white dark:bg-gray-700 dark:text-white">
+        <div className="relative bg-white-body rounded-lg shadow-round_black dark:border-[1px] dark:border-[#1E2027] dark:bg-black-box dark:text-white">
             {/* <!-- Modal header --> */}
             <div className="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
                 <h3 className="text-xl font-semibold text-gray-900 dark:text-white">

src/components/layouts/aside/AsideLinkWithSubLinks.jsx

@@ -18,13 +18,13 @@ export default function AsideLinkWithSubLinks({name, icon, to, children, isOpen}
 
   return (
     <div 
-        className={`w-full px-4 py-2 my-1 text-[13px] sm:text-sm font-semibold rounded`} 
+        className={`w-full px-4 py-2 my-1 text-[13px] sm:text-sm font-semibold rounded overflow-hidden`} 
     >   
         <button onClick={()=>setHideSubMenu(prev => !prev)} name={name} className="py-2 w-full flex items-center justify-between gap-2 cursor-pointer text-slate-500 dark:text-white-body/90">
             <span className="flex gap-2 items-center">{icon && <Icons name={icon} />}{shrinkAside ? '' : name}</span>
             <FaCaretDown className={`text-base ${(hideSubMenu) ? 'rotate-180' : 'rotate-0'}`} />
         </button>
-        <div className={`w-full ${(hideSubMenu) ? 'block' : 'hidden'}`}>
+        <div className={`w-full ${(hideSubMenu) ? 'opacity-100 min-h-72' : 'opacity-0 h-0'} transition-all duration-500`}>
             {children}
         </div>
     </div>

src/components/layouts/aside/DashboardAside.jsx

@@ -32,17 +32,12 @@ export default function DashboardAside() {
                 let hasSubLinks = (link.subLinks && link.subLinks.length > 0) ? true : false
                 if(active && !hasSubLinks){
                     return (
-                        <div key={index}>
+                        <div key={link.name}>
                             <AsideLink to={link.to} name={link.name} icon={link.icon} />
                         </div>
                     )
                 }
                 if(active && hasSubLinks){
-                    // let subLinkList = link.subLinks.filter(value => value.to).map(item => { //any of all open
-                    //     if(item.to){
-                    //         return item.to
-                    //     }
-                    // })
                     let subLinkList = []
                     link.subLinks.forEach(item =>{
                         if(item.to){
@@ -53,21 +48,20 @@ export default function DashboardAside() {
                             })
                         }
                     })
-                    // console.log('subLinkList', subLinkList)
                     return (
-                    <div key={index} className="w-full">
+                    <div key={link.name} className="w-full">
                         {link.title &&
-                            <h1 className="px-4 py-2 text-sm sm:text-sm text-slate-500 dark:text-white font-semibold uppercase mt-3 mb-1 border-b border-slate-800">{link.title}</h1>
+                            <h1 className="px-4 py-2 text-sm sm:text-sm text-slate-500 dark:text-white font-semibold uppercase mt-3 mb-1 border-b border-slate-500 dark:border-white">{link.title}</h1>
                         }
-                        <AsideLinkWithSubLinks name={link.name} icon={link.icon} isOpen={subLinkList.includes(pathname)} >
+                        <AsideLinkWithSubLinks name={link.name} icon={link.icon} isOpen={subLinkList.includes(pathname) || index==1} >
                             <>
                             {link.subLinks.map((subItem, index)=>{
                                 let active = subItem.status == 1 ? true : false
                                 let hasSubLinks = (subItem.subLinks && subItem.subLinks.length > 0) ? true : false
                                 if(active && !hasSubLinks){
                                     return (
-                                    <div key={index}>
-                                        <AsideLink key={index} to={subItem.to} name={subItem.name} icon={subItem.icon} />
+                                    <div key={subItem.name}>
+                                        <AsideLink to={subItem.to} name={subItem.name} icon={subItem.icon} />
                                     </div>
                                 )
                                 }else if(active && hasSubLinks){
@@ -77,7 +71,7 @@ export default function DashboardAside() {
                                         }
                                     })
                                     return(
-                                        <AsideLinkWithSubLinks name={subItem.name} icon={subItem.icon} isOpen={subLinkList.includes(pathname)}>
+                                        <AsideLinkWithSubLinks key={subItem.name} name={subItem.name} icon={subItem.icon} isOpen={subLinkList.includes(pathname)}>
                                             <>
                                             {subItem.subLinks.map((item, index)=>{
                                                 let active = item.status == 1 ? true : false
@@ -105,7 +99,7 @@ export default function DashboardAside() {
         </div>
 
         <div className='py-2 mt-4 relative'>
-            <div className="w-full flex items-center gap-2">
+            <div className="group w-full flex items-center gap-2">
                 <div className="w-full flex items-center gap-2">
                     <img src={UserAvatar} alt='user avatar' className='w-12 h-12 p-1 rounded-full' />
                     <div>
@@ -113,12 +107,10 @@ export default function DashboardAside() {
                         <p className="text-12 text-black-box/90 dark:text-white-body/80">username@gmail.com</p>
                     </div>
                 </div>
-                <button onClick={()=>handleActiveMenu('settings')}  className="text-slate-500 dark:text-white-body">
+                <button onClick={()=>handleActiveMenu('settings')}  className="peer text-slate-500 dark:text-white-body">
                     <Icons name='settings' className='text-3xl' />
                 </button>
-            </div>
-            {activeMenu == 'settings' &&
-                <div className="pop-modal-down absolute p-4 w-full bg-white-body dark:bg-black-box left-0 bottom-[60%] rounded shadow-round_black dark:shadow-round_white">
+                <div className="hidden group-hover:block pop-modal-down absolute p-4 w-full bg-white dark:bg-black-box left-0 bottom-[60%] rounded shadow-round_black dark:shadow-round_white">
                     <div className="w-full min-h-48 flex flex-col justify-between gap-4">
                         <div className="w-full h-full">
                             <div className="flex flex-col text-black dark:text-white text-base sm:text-lg">
@@ -137,7 +129,7 @@ export default function DashboardAside() {
                         </div>
                     </div>
                 </div>
-            }
+            </div>
         </div>
     </div>
   )
@@ -145,14 +137,13 @@ export default function DashboardAside() {
 
 const asideNavLinks = [
     {name:'Dashboard', status:1, icon: 'dashboard', to: RouteLinks.homePage},
-    {name:'Salary Loan', title:'Loan', status:1, icon: 'money', subLinks: [
-        {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: 'Configurations', status:1, icon: 'dot', subLinks: [
-            {name: 'Loan Offers', status:1, icon: 'dot', to: RouteLinks.loanOffersPage },
+    {name:'First Advance', title:'Loan', status:1, icon: 'arrow-right', subLinks: [
+        {name: 'Transactions', status:1, icon: 'dot', to: RouteLinks.transactionsPage},
+        {name: 'Loans', status:1, icon: 'dot', to: RouteLinks.loansPage},
+        {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.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/RightAsideBar.jsx

@@ -8,7 +8,7 @@ export default function RightAsideBar() {
 
     let [active, setActive] = useState('orders')
 
-    const handleActiveMenu = ({target:{name}}) => {
+    const handleActiveMenu = (name) => {
         let lowerStr = name.toLowerCase()
         setActive(lowerStr)
     }
@@ -17,13 +17,13 @@ export default function RightAsideBar() {
     <div className='w-full h-full flex flex-col gap-8'>
         {/* Menu */}
         <div className='grid grid-cols-3 gap-8'>
-            <button name='orders' onClick={(e) => handleActiveMenu(e)} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'orders' && 'scale-[1.2]'}`}>
+            <button name='orders' onClick={() => handleActiveMenu('orders')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'orders' && 'scale-[1.2]'}`}>
                 <Icons name='dashboard' className='text-3xl' />
             </button>
-            <button name='tickets' onClick={(e) => handleActiveMenu(e)} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'tickets' && 'scale-[1.2]'}`}>
+            <button name='tickets' onClick={() => handleActiveMenu('tickets')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'tickets' && 'scale-[1.2]'}`}>
                 <Icons name='settings' className='text-3xl' />
             </button>
-            <button name='tasks' onClick={(e) => handleActiveMenu(e)} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'tasks' && 'scale-[1.2]'}`}>
+            <button name='tasks' onClick={() => handleActiveMenu('tasks')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'tasks' && 'scale-[1.2]'}`}>
                 <Icons name='dashboard' className='text-3xl' />
             </button>
         </div>

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

@@ -0,0 +1,156 @@
+import { useEffect, useState } from 'react'
+
+import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
+import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
+import Icons from '../Icons'
+import { getLoanCharges } from '../../services/siteServices'
+import getDateFromDateString from '../../helpers/GetDateFromDateString';
+import formatNumber from '../../helpers/formatNumber'
+import Avatar from '../../assets/user_avatar.jpg'
+
+
+export default function LoansChargesCom() {
+
+    const [page, setPage] = useState(1)
+    const [allLoanCharges, setAllLoanCharges] = 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 loanCharges = allLoanCharges?.data?.loan_charges // LOAN CHARGES LIST
+    const pagination = allLoanCharges?.data?.pagination
+    const isFetching = allLoanCharges?.loading
+    const isError = allLoanCharges?.error
+
+    useEffect(()=>{
+        setAllLoanCharges(prev => ({...prev, loading:true}))
+        const payload = filter?.type ? {[filter?.type]: filter.id} : {}
+        getLoanCharges({...payload, page}).then(res => {
+            if(res?.status != 200){
+                setAllLoanCharges(prev => ({...prev, loading:false}))
+                return
+            }
+            setAllLoanCharges({loading:false, error:'', data:res?.data})
+        }).catch(err => {
+            setAllLoanCharges({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'>{allLoanCharges?.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={loanCharges} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
+                    {({ data }) => (
+                        <>
+                            <table className="py-2 w-full text-sm">
+                                <thead className="py-2 text-sm text-slate-500 text-left">
+                                    <tr>
+                                        <th scope="col" className="px-2 py-2">
+                                            Name
+                                        </th>
+                                        {/* <th scope="col" className="px-2">
+                                            Loan
+                                        </th> */}
+                                        <th scope="col" className="px-2 text-right">
+                                            Amount
+                                        </th>
+                                        <th scope="col" className="px-2 text-right">
+                                            Added
+                                        </th>
+                                        <th scope="col" className="px-2 text-right">
+                                            Action
+                                        </th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {(data && data.length > 0) ? data?.map((item, index) => (
+                                        <tr key={index} className="py-2 border-t border-dashed border-slate-300">
+                                            <td className="px-2 py-2">
+                                                <div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
+                                                <img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />
+                                                <div className="text-left">
+                                                    <div className="text-base font-semibold">{item?.transaction_id || ''}</div>
+                                                    <div className="font-normal text-gray-500 line-clamp-1">{item?.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">{getDateFromDateString(item?.created_at)}</div>
+                                                </div> 
+                                            </td>
+                                            <td className="px-2 text-right">
+                                                <div className='flex items-center justify-end gap-3 md:gap-4'>
+                                                    <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
+                                                        <Icons name='eye' />
+                                                    </div>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    ))
+                                    :
+                                    <tr className="py-2 border-t border-dashed border-slate-300">
+                                        <td className="px-3 py-2" colSpan={4}>
+                                            <div className="flex justify-center items-center">
+                                                No Record Found
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    }
+                                </tbody>
+                            </table>
+                        </>
+                    )}
+                    </TablePaginatedWrapper>
+                </>
+                }
+            </div>
+        </div>
+    )
+}

src/components/loan_charges/_LoanChargesCom.jsx

@@ -0,0 +1,113 @@
+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 { getLoanCharges } from '../../services/siteServices'
+import getDateFromDateString from '../../helpers/GetDateFromDateString';
+import formatNumber from '../../helpers/formatNumber';
+
+export default function LoanChargesCom() {
+
+    const [page, setPage] = useState(1)
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: [...queryKeys.loan_charges, page],
+        queryFn: () => getLoanCharges({page}),
+        staleTime: 0,
+        // placeholderData: keepPreviousData,
+    })
+
+    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='Loan Charges' paths={['Dashboard', 'Loan Charges']} />
+
+            <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={loanCharges} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
+                    {({ data }) => (
+                        <>
+                            <table className="py-2 w-full text-sm">
+                                <thead className="py-2 text-sm text-slate-500 text-left">
+                                    <tr>
+                                        <th scope="col" className="px-2 py-2">
+                                            Name
+                                        </th>
+                                        {/* <th scope="col" className="px-2">
+                                            Loan
+                                        </th> */}
+                                        <th scope="col" className="px-2 text-right">
+                                            Amount
+                                        </th>
+                                        <th scope="col" className="px-2 text-right">
+                                            Added
+                                        </th>
+                                        <th scope="col" className="px-2 text-right">
+                                            Action
+                                        </th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {(data && data.length > 0) ? data?.map((item, index) => (
+                                        <tr key={index} className="py-2 border-t border-dashed border-slate-300">
+                                            <td className="px-2 py-2">
+                                                <div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
+                                                <img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />
+                                                <div className="text-left">
+                                                    <div className="text-base font-semibold">{item?.transaction_id || ''}</div>
+                                                    <div className="font-normal text-gray-500 line-clamp-1">{item?.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">{getDateFromDateString(item?.created_at)}</div>
+                                                </div> 
+                                            </td>
+                                            <td className="px-2 text-right">
+                                                <div className='flex items-center justify-end gap-3 md:gap-4'>
+                                                    <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
+                                                        <Icons name='eye' />
+                                                    </div>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    ))
+                                    :
+                                    <tr className="py-2 border-t border-dashed border-slate-300">
+                                        <td className="px-3 py-2" colSpan={4}>
+                                            <div className="flex justify-center items-center">
+                                                No Record Found
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    }
+                                </tbody>
+                            </table>
+                        </>
+                    )}
+                    </TablePaginatedWrapper>
+                }
+            </div>
+        </div>
+    )
+}

src/components/loanofferscom/LoanOffersCom.jsx

@@ -1,129 +0,0 @@
-import React from 'react'
-import { useQuery } from "@tanstack/react-query";
-import {Link} from 'react-router-dom'
-
-import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
-import TableWrapper from '../tableWrapper/TableWrapper'
-import Icons from '../Icons'
-
-import Avatar from '../../assets/user_avatar.jpg'
-import queryKeys from '../../services/queryKeys'
-import { loanOffers } from '../../services/siteServices'
-
-import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
-import getDateFromDateString from '../../helpers/GetDateFromDateString';
-
-export default function ApplicationsLoanCom() {
-
-    const {data, isFetching, isError, error} = useQuery({
-        queryKey: queryKeys.apply_loan,
-        queryFn: () => loanOffers()
-    })
-
-    const loanOffersUsersList = data?.data // LOAN OFFERS LIST
-
-    return (
-        <div className='w-full flex flex-col gap-8'>
-            <BreadcrumbCom title='Loan offers' paths={['Dashboard', 'Loan offers']} />
-
-            {isFetching ? 
-              <>
-                  <div className="w-full py-4">
-                    <p className='text-slate-800'>Loading...</p>
-                  </div>
-              </>
-              : isError ?
-                <div className="w-full py-4">
-                    <p className='text-red-500'>{error.message}</p>
-                </div>
-              :
-                <TableWrapper data={loanOffersUsersList} itemsPerPage={15}>
-                {({ data }) => (
-                    <>
-                        <table className="py-2 w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-                            <thead className="text-sm md:text-base text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
-                                <tr>
-                                    <th scope="col" className="px-4 py-2">
-                                        CID
-                                    </th>
-                                    <th scope="col" className="px-4 py-2">
-                                        Loan
-                                    </th>
-                                    <th scope="col" className="px-4 py-2">
-                                        Amount
-                                    </th>
-                                    <th scope="col" className="px-4 py-2">
-                                        Description
-                                    </th>
-                                    <th scope="col" className="px-4 py-2">
-                                        Days Duration
-                                    </th>
-                                    <th scope="col" className="px-4 py-2">
-                                        Ative
-                                    </th>
-                                    <th scope="col" className="px-4 py-2">
-                                        Score
-                                    </th>
-                                    <th scope="col" className="px-4 py-2">
-                                        Lorder
-                                    </th>
-                                    {/* <th scope="col" className="px-4 py-2">
-                                        Action
-                                    </th> */}
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {(data && data.length > 0) ? data?.map((item, index) => (
-                                    <tr key={index} className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
-                                        <th scope="row" className="mr-4 flex items-center px-3 py-2 text-gray-900 whitespace-nowrap dark:text-white">
-                                            <img className="w-10 h-10 rounded-full" src={Avatar} alt="Jese image" />
-                                            <div className="px-3">
-                                                <div className="text-base font-semibold">{item?.cid}</div>
-                                            </div>  
-                                        </th>
-                                        <td className="px-3 py-2">
-                                            {item?.loan}
-                                        </td>
-                                        <td className="px-3 py-2">
-                                            {item?.amount || ''}
-                                        </td>
-                                        <td className="px-3 py-2">
-                                           {item?.description}
-                                        </td>
-                                        <td className="px-3 py-2">
-                                           {item?.days_duration}
-                                        </td>
-                                        <td className="px-3 py-2">
-                                           {item?.active}
-                                        </td>
-                                        <td className="px-3 py-2">
-                                           {item?.score}
-                                        </td>
-                                        <td className="px-3 py-2">
-                                           {item?.lorder}
-                                        </td>
-                                        {/* <td className="px-3 py-2 flex gap-3 md:gap-4">
-                                            <Icons name='edit' />
-                                            <Icons name='eye' />
-                                            <Icons name='trash' className={'hidden text-red-500'} />
-                                        </td> */}
-                                    </tr>
-                                ))
-                                :
-                                <tr className="w-3 p-3">
-                                    <td className="px-3 py-2" colSpan={8}>
-                                        <div className="flex justify-center items-center">
-                                            No Record Found
-                                        </div>
-                                    </td>
-                                </tr>
-                                }
-                            </tbody>
-                        </table>
-                    </>
-                )}
-                </TableWrapper>
-            }
-        </div>
-    )
-}

src/components/loanscom/LoansCom.jsx

@@ -0,0 +1,174 @@
+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 { getLoans } from '../../services/siteServices'
+import getDateFromDateString from '../../helpers/GetDateFromDateString';
+import Avatar from '../../assets/user_avatar.jpg'
+import RouteLinks from '../../RouteLinks';
+import formatNumber from '../../helpers/formatNumber'
+
+export default function LoansCom() {
+
+    const [page, setPage] = useState(1)
+    const [allLoans, setAllLoans] = 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 loans = allLoans?.data?.loans // LOANS LIST
+    const pagination = allLoans?.data?.pagination
+    const isFetching = allLoans?.loading
+    const isError = allLoans?.error
+
+    useEffect(()=>{
+        setAllLoans(prev => ({...prev, loading:true}))
+        const payload = filter?.type ? {[filter?.type]: filter.id} : {}
+        getLoans({...payload, page}).then(res => {
+            if(res?.status != 200){
+                setAllLoans(prev => ({...prev, loading:false}))
+                return
+            }
+            setAllLoans({loading:false, error:'', data:res?.data})
+        }).catch(err => {
+            setAllLoans({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'>{allLoans?.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={loans} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
+                    {({ data }) => (
+                        <>
+                            <table className="table-auto py-2 w-full text-sm">
+                                <thead className="py-2 text-sm text-slate-500 text-left">
+                                    <tr>
+                                        <th scope="col" className="px-2 py-2">
+                                            Name
+                                        </th>
+                                        <th scope="col" className="px-2 text-right">
+                                            Loan Amount
+                                        </th>
+                                        <th scope="col" className="px-2 text-right">
+                                            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>
+                                        <th scope="col" className="px-2 text-right">
+                                            Action
+                                        </th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {(data && data.length > 0) ? data?.map((item, index) => (
+                                        <tr key={index} className="py-2 border-t border-dashed border-slate-300">
+                                            <td className="px-2 py-2">
+                                                <div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
+                                                <img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />
+                                                <div className="text-left">
+                                                    <div className="text-base font-semibold">{item?.account_id || ''}</div>
+                                                    <div className="font-normal text-gray-500">{item?.id} : {item?.transaction_id}</div>
+                                                </div>  
+                                                </div>
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-right">
+                                                    {/* <div className="text-base font-semibold">{formatNumber(item?.initial_loan_amount)}</div> */}
+                                                    <div className="font-normal text-gray-500">{formatNumber(item?.initial_loan_amount)}</div>
+                                                </div> 
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-right">
+                                                    <div className="font-normal text-gray-500">{formatNumber(item?.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> 
+                                            </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={6}>
+                                            <div className="flex justify-center items-center">
+                                                No Record Found
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    }
+                                </tbody>
+                            </table>
+                        </>
+                    )}
+                    </TablePaginatedWrapper>
+                </>
+                }
+            </div>
+        </div>
+    )
+}

src/components/loanscom/_LoansCom.jsx

@@ -0,0 +1,132 @@
+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 { getLoans } from '../../services/siteServices'
+import getDateFromDateString from '../../helpers/GetDateFromDateString';
+import formatNumber from '../../helpers/formatNumber'
+import RouteLinks from '../../RouteLinks';
+
+export default function LoansCom() {
+
+    const [page, setPage] = useState(1)
+
+    const {data:allLoans, isFetching, isError, error} = useQuery({
+        queryKey: [...queryKeys.loans, page],
+        queryFn: () => getLoans({page}),
+        staleTime: 0,
+    })
+
+    const loans = allLoans?.data?.loans // LOANS LIST
+    const pagination = allLoans?.data?.pagination
+
+    return (
+        <div className='w-full flex flex-col gap-8'>
+            <BreadcrumbCom title='Loans' paths={['Dashboard', 'Loans']} />
+
+            <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={loans} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
+                    {({ data }) => (
+                        <>
+                            <table className="table-auto py-2 w-full text-sm">
+                                <thead className="py-2 text-sm text-slate-500 text-left">
+                                    <tr>
+                                        <th scope="col" className="px-2 py-2">
+                                            Name
+                                        </th>
+                                        <th scope="col" className="px-2 text-right">
+                                            Loan Amount
+                                        </th>
+                                        <th scope="col" className="px-2 text-right">
+                                            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>
+                                        <th scope="col" className="px-2 text-right">
+                                            Action
+                                        </th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {(data && data.length > 0) ? data?.map((item, index) => (
+                                        <tr key={index} className="py-2 border-t border-dashed border-slate-300">
+                                            <td className="px-2 py-2">
+                                                <div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
+                                                <img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />
+                                                <div className="text-left">
+                                                    <div className="text-base font-semibold">{item?.account_id || ''}</div>
+                                                    <div className="font-normal text-gray-500">{item?.id} : {item?.transaction_id}</div>
+                                                </div>  
+                                                </div>
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-right">
+                                                    {/* <div className="text-base font-semibold">{formatNumber(item?.initial_loan_amount)}</div> */}
+                                                    <div className="font-normal text-gray-500">{formatNumber(item?.initial_loan_amount)}</div>
+                                                </div> 
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-right">
+                                                    <div className="font-normal text-gray-500">{formatNumber(item?.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> 
+                                            </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={6}>
+                                            <div className="flex justify-center items-center">
+                                                No Record Found
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    }
+                                </tbody>
+                            </table>
+                        </>
+                    )}
+                    </TablePaginatedWrapper>
+                }
+            </div>
+        </div>
+    )
+}

src/components/modals/ModalWrapper.jsx

@@ -1,7 +1,7 @@
 
 export default function ModalWrapper({children, maxWidth}) {
   return (
-    <div className="bg-gray-900/40 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-[999] flex flex-col justify-center items-center w-full md:inset-0 h-[calc(100%)] max-h-full">
+    <div className="bg-[rgba(0,_0,_0,_0.2)] dark:bg-[rgba(0,_0,_0,_0.4)] overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-[999] flex flex-col justify-center items-center w-full md:inset-0 h-[calc(100%)] max-h-full">
         <div className={`pop-modal relative p-4 w-full ${maxWidth ? maxWidth : 'max-w-2xl'} max-h-full`}>
             {/* <!-- Modal content --> */}
             <div className="pb-4">

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,152 @@
+import { useEffect, useState } from 'react'
+
+import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
+import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
+import Icons from '../Icons'
+import { getRepayments } from '../../services/siteServices'
+import getDateFromDateString from '../../helpers/GetDateFromDateString';
+import Avatar from '../../assets/user_avatar.jpg'
+
+
+export default function RepaymentsCom() {
+
+    const [page, setPage] = useState(1)
+    const [allRepayments, setAllRepayments] = 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 repayments = allRepayments?.data?.repayments // LOAN REPAYMENTS LIST
+    const pagination = allRepayments?.data?.pagination
+    const isFetching = allRepayments?.loading
+    const isError = allRepayments?.error
+
+    useEffect(()=>{
+        setAllRepayments(prev => ({...prev, loading:true}))
+        const payload = filter?.type ? {[filter?.type]: filter.id} : {}
+        getRepayments({...payload, page}).then(res => {
+            if(res?.status != 200){
+                setAllRepayments(prev => ({...prev, loading:false}))
+                return
+            }
+            setAllRepayments({loading:false, error:'', data:res?.data})
+        }).catch(err => {
+            setAllRepayments({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'>{allRepayments?.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={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/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/selectedloancom/SelectedLoanCom.jsx

@@ -1,112 +0,0 @@
-import React from 'react'
-import { useQuery } from "@tanstack/react-query";
-import {Link} from 'react-router-dom'
-
-import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
-import TableWrapper from '../tableWrapper/TableWrapper'
-import Icons from '../Icons'
-
-import Avatar from '../../assets/user_avatar.jpg'
-import queryKeys from '../../services/queryKeys'
-import { selectLoan } from '../../services/siteServices'
-import getDateFromDateString from '../../helpers/GetDateFromDateString';
-import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
-
-export default function SelectedLoanCom() {
-
-    const {data, isFetching, isError, error} = useQuery({
-        queryKey: queryKeys.select_loan,
-        queryFn: () => selectLoan()
-    })
-
-    const selectUsers = data?.data?.result_data?.data // APPLY LOAN LIST
-
-    return (
-        <div className='w-full flex flex-col gap-8'>
-            <BreadcrumbCom title='Selected - ' span='Loan options selected by the users before applying' paths={['Dashboard', 'Selected']} />
-
-            {isFetching ? 
-              <>
-                  <div className="w-full py-4">
-                    <p className='text-slate-800'>Loading...</p>
-                  </div>
-              </>
-              : isError ?
-                <div className="w-full py-4">
-                    <p className='text-red-500'>{error.message}</p>
-                </div>
-              :
-                <TableWrapper data={selectUsers} itemsPerPage={15}>
-                {({ data }) => (
-                    <>
-                        <table className="py-2 w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-                            <thead className="text-sm md:text-base text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
-                                <tr>
-                                    <th scope="col" className="px-4 py-2">
-                                        Name
-                                    </th>
-                                    <th scope="col" className="px-4 py-2">
-                                        Loan
-                                    </th>
-                                    <th scope="col" className="px-4 py-2">
-                                        Added
-                                    </th>
-                                    <th scope="col" className="px-4 py-2">
-                                        Action
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {(data && data.length > 0) ? data?.map((item, index) => (
-                                    <tr key={index} className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
-                                        <th scope="row" className="mr-4 flex items-center px-3 py-2 text-gray-900 whitespace-nowrap dark:text-white">
-                                            <img className="w-10 h-10 rounded-full" src={Avatar} alt="Jese image" />
-                                            <div className="px-3">
-                                                <div className="text-base font-semibold">{item?.name || ''}</div>
-                                                <div className="font-normal text-gray-500">{item?.bvn}</div>
-                                            </div>  
-                                        </th>
-                                        <td className="px-3 py-2">
-                                            {item?.loan} - {item?.description}
-                                        </td>
-                                        <td className="px-3 py-2">
-                                            <div className="flex items-center">
-                                            {getDateFromDateString(item?.added)} {getTimeFromDateString(item?.added)}
-                                            </div>
-                                        </td>
-                                        <td className="px-3 py-2 flex gap-3 md:gap-4">
-                                            {/* <!-- Modal toggle --> */}
-                                            {/* <Link to={RouteLinks.manageAdminPage}>
-                                                <i onClick={handleShowEditModal} className="fa-solid fa-eye text-base md:text-lg cursor-pointer p-2 text-sky-600"></i>
-                                            </Link> */}
-                                            {/* <i onClick={handleShowEditModal} className="fa-solid fa-pen-to-square text-base md:text-lg cursor-pointer p-2"></i> */}
-                                            {/* <i onClick={handleDeleteModal} className="fa-solid fa-trash text-base md:text-lg cursor-pointer p-2 text-red-500"></i> */}
-                                            <Icons name='edit' />
-                                            <Icons name='eye' />
-                                            <Icons name='trash' className={'hidden text-red-500'} />
-                                        </td>
-                                    </tr>
-                                ))
-                                :
-                                <tr className="w-3 p-3">
-                                    <td className="px-3 py-2" colSpan={4}>
-                                        <div className="flex justify-center items-center">
-                                            No Record Found
-                                        </div>
-                                    </td>
-                                </tr>
-                                }
-                            </tbody>
-                        </table>
-                    </>
-                )}
-                </TableWrapper>
-            }
-        </div>
-    )
-}
-
-
-const dummy = [
-    {name:'ok'}
-]

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/tableWrapper/TableWrapper.jsx

@@ -1,4 +1,4 @@
-import { ReactNode, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import MainBtn from "../MainBtn";
 import Icons from "../Icons";
 
@@ -19,7 +19,7 @@ export default function TableWrapper({
   const numberOfSelection = itemsPerPage;
 
   const handlePrev = () => {
-    if (currentPage != 0) {
+    if (currentPage !== 0) {
       setCurrentPage((prev) => prev - numberOfSelection);
     }
   };
@@ -46,14 +46,14 @@ export default function TableWrapper({
       );
       setIsLoading(false)
     },1000)
-  }, [currentPage, filteredData]);
+  }, [currentPage, filteredData, numberOfSelection]);
 
   useEffect(()=>{
     setCurrentPage(0)
   },[itemsPerPage])
 
   return (
-    <div className="p-2 w-full bg-white shadow-round_black dark:shadow-round_white dark:bg-gray-800 rounded-md">
+    <div className="relative w-full">
       {data.length > 0 && filterItem && (
         <div className="mb-10 flex justify-end items-center gap-2">
           {filterItem.map((item, index) => (
@@ -83,16 +83,16 @@ export default function TableWrapper({
         
         {/* PAGINATION BUTTON */}
         {newData.length > 0 &&
-          <div className='p-2 w-full flex flex-col lg:flex-row justify-center items-center gap-3 md:gap-6'>
+          <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">
               {isLoading ? '----' : `${currentPage + 1}-${currentPage + numberOfSelection >= data.length ? data.length : (currentPage + numberOfSelection)}`}</span> of <span className="font-semibold text-gray-900 dark:text-white">{data.length}</span>
             </div>
-            {(newData.length >= itemsPerPage) &&
+            {(newData.length >= 0) &&
               <div className='flex items-center gap-3 md:gap-6'>
                   <MainBtn 
                       onClick={handlePrev}
                       // text='Prev' 
-                      className={`${currentPage == 0 ? 'bg-primary/50 pointer-events-none' : 'bg-primary'} text-white-light text-center flex justify-center gap-2 items-center`} 
+                      className={`${currentPage === 0 ? 'bg-primary/50 pointer-events-none' : 'bg-primary'} text-white-light text-center flex justify-center gap-2 items-center`} 
                       disabled={isLoading}
                   >
                   <Icons name='prev' />
@@ -118,7 +118,7 @@ export default function TableWrapper({
 
 const TableIsLoading = () => {
   return (
-    <div className="w-full fixed z-[991] inset-0 flex justify-center items-center">
+    <div className="w-full absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[991] inset-0 flex justify-center items-center">
       <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/tableWrapper/_TableWrapper.jsx

@@ -0,0 +1,125 @@
+import { ReactNode, useEffect, useState } from "react";
+import MainBtn from "../MainBtn";
+import Icons from "../Icons";
+
+
+export default function TableWrapper({
+  data = [],
+  itemsPerPage = 5,
+  filterItem,
+  children,
+}) {
+  const [isLoading, setIsLoading] = useState(true)
+  const [searchTerm, setSearchTerm] = useState("");
+  const [filteredData, setFilteredData] = useState(data);
+
+  const [currentPage, setCurrentPage] = useState(0);
+  const [newData, setNewData] = useState([]);
+
+  const numberOfSelection = itemsPerPage;
+
+  const handlePrev = () => {
+    if (currentPage != 0) {
+      setCurrentPage((prev) => prev - numberOfSelection);
+    }
+  };
+  const handleNext = () => {
+    if (currentPage < data.length) {
+      setCurrentPage((prev) => prev + numberOfSelection);
+    }
+  };
+
+  const handleSearch = ({ target: { value } }, name) => {
+    setSearchTerm(value);
+    let newFilteredData = data.filter((item) =>
+      item[name].toLowerCase().startsWith(value.toLowerCase())
+    );
+    setFilteredData(newFilteredData);
+    setCurrentPage(0);
+  };
+
+  useEffect(() => {
+    setIsLoading(true)
+    setTimeout(()=>{
+      setNewData(
+        filteredData?.slice(currentPage, numberOfSelection + currentPage)
+      );
+      setIsLoading(false)
+    },1000)
+  }, [currentPage, filteredData]);
+
+  useEffect(()=>{
+    setCurrentPage(0)
+  },[itemsPerPage])
+
+  return (
+    <div className="p-2 w-full bg-white shadow-round_black dark:shadow-round_white dark:bg-gray-800 rounded-md">
+      {data.length > 0 && filterItem && (
+        <div className="mb-10 flex justify-end items-center gap-2">
+          {filterItem.map((item, index) => (
+            <label
+              key={index}
+              className="flex flex-col sm:flex-row items-center gap-2 text-slate-600 dark:text-slate-100 transition-all duration-500"
+            >
+              Search by {item[0].toUpperCase() + item.slice(1)}
+              <input
+                name={item}
+                type="text"
+                className="py-1 px-2 text-sm min-w-[100px] text-black dark:text-white bg-white dark:bg-slate-800 rounded-full border-0 outline-none ring-1 ring-slate-300 dark:ring-white transition-all duration-500"
+                value={searchTerm}
+                onChange={(e) => {
+                  handleSearch(e, item);
+                }}
+              />
+            </label>
+          ))}
+        </div>
+      )}
+    
+      <div className="flex flex-col">
+        <div className="w-full overflow-x-auto">
+          {children({ data: newData })}
+        </div>
+        
+        {/* PAGINATION BUTTON */}
+        {newData.length > 0 &&
+          <div className='p-2 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">
+              {isLoading ? '----' : `${currentPage + 1}-${currentPage + numberOfSelection >= data.length ? data.length : (currentPage + numberOfSelection)}`}</span> of <span className="font-semibold text-gray-900 dark:text-white">{data.length}</span>
+            </div>
+            {(newData.length >= itemsPerPage) &&
+              <div className='flex items-center gap-3 md:gap-6'>
+                  <MainBtn 
+                      onClick={handlePrev}
+                      // text='Prev' 
+                      className={`${currentPage == 0 ? 'bg-primary/50 pointer-events-none' : 'bg-primary'} text-white-light text-center flex justify-center gap-2 items-center`} 
+                      disabled={isLoading}
+                  >
+                  <Icons name='prev' />
+                  </MainBtn>
+                  <MainBtn 
+                      onClick={handleNext}
+                      // text='Next' 
+                      className={`${currentPage + numberOfSelection >= data.length ? 'bg-primary/50 pointer-events-none' : 'bg-primary'} text-white-light text-center flex justify-center gap-2 items-center`} 
+                      disabled={isLoading}
+                  > 
+                  <Icons name='next' />
+                  </MainBtn>
+              </div>
+            }
+          </div>
+        }
+      </div>
+      
+    {isLoading && <TableIsLoading />}
+    </div>
+  );
+}
+
+const TableIsLoading = () => {
+  return (
+    <div className="w-full fixed z-[991] inset-0 flex justify-center items-center">
+      <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/context/GeneralLayoutContext.jsx

@@ -80,10 +80,12 @@ export default function GeneralLayoutContext({children}) {
       window.addEventListener('resize', ()=>{
           setShrinkAside(false)
           setShowAsideDrawer('')
+          setActiveMenu('')
       })
       return () => window.removeEventListener('resize', window.addEventListener('resize', ()=>{
           setShrinkAside(false)
           setShowAsideDrawer('')
+          setActiveMenu('')
       }))
   },[])
 

src/helpers/debounceFunction.js

@@ -0,0 +1,15 @@
+function debounceFunction(func, delay) {
+  let timer;
+  
+  return function(...args) {
+      // Clear the previous timer if the function is called before the delay
+      clearTimeout(timer);
+
+      // Set a new timer to execute the function after the specified delay
+      timer = setTimeout(() => {
+          func(...args);
+      }, delay);
+  };
+}
+
+  export default debounceFunction

src/helpers/formatNumber.js

@@ -0,0 +1,10 @@
+const formatNumber = (number = 0) => {
+    // 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

@@ -28,6 +28,9 @@ code {
   .aside-scroll-design {
     @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 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/HomePage.jsx

@@ -1,29 +1,8 @@
 import React from 'react'
-import BreadcrumbCom from '../components/breadcrumb/BreadcrumbCom'
+import HomeCom from '../components/home/HomeCom'
 
 export default function HomePage() {
   return (
-    <div className='w-full flex flex-col gap-8'>
-      <BreadcrumbCom title='Dashboard' paths={['Home', 'Dashboard']} />
-      <div className='grid grid-cols-1 gap-8'>
-        <div className='w-full grid grid-cols-1 md:grid-cols-2 gap-8'>
-          <div className='w-full bg-[#F7D9E3] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[300px] shadow-round_black dark:shadow-round_white'></div>
-          <div className='w-full bg-[#CBF0F5] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[300px] shadow-round_black dark:shadow-round_white'></div>
-          <div className='w-full bg-[#CBD4F4] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[300px] shadow-round_black dark:shadow-round_white'></div>
-          <div className='w-full bg-[#F7D9E3] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[300px] shadow-round_black dark:shadow-round_white'></div>
-        </div>
-        <div className='w-full'>
-          <div className='w-full p-8 min-h-96 bg-white dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-full shadow-[0px_0px_2px_rgba(0,_0,_0,_50)] dark:shadow-round_white'>
-            <div className='flex justify-between items-center'>
-              <div className='flex flex-col gap-1'>
-                <p className='font-bold text-base'>Members Statistics</p>
-                <p className='text-12'>Over 500 members</p>
-              </div>
-              <button className='font-bold text-primary text-12 px-4 py-2 bg-sky-100 rounded-md'>+ New Member</button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <HomeCom />
   )
 }

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/LoansPage.jsx

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

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/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,4 +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

@@ -8,8 +8,8 @@ axios.interceptors.request.use(
             "Access-Control-Allow-Origin": "*",
             // "Access-Control-Expose-Headers": "Access-Control-Allow-Origin",
             // "Access-Control-Allow-Headers": "Origin, X-API-KEY, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Access-Control-Allow-Headers, Authorization, observe, enctype, Content-Length, X-Csrf-Token",
-            "Content-Type": "application/json;charset=UTF-8",
-            // 'Authorization': `Bearer ${localStorage.getItem('token')}`
+            // "Content-Type": "application/json;charset=UTF-8",
+            'Authorization': (localStorage && localStorage.getItem('token')) ? `Bearer ${localStorage.getItem('token')}` : ''
           };
     // config.headers['Authorization'] = `Bearer ${localStorage.getItem('token')}`;
     // config.baseURL = process.env.REACT_APP_MAIN_API
@@ -25,7 +25,7 @@ const postAuxEnd = (path, postData, media=false) => {
     return axios.post(`${basePath}${path}`, postData).then(res => {
         return res
     }).catch(err => {
-        throw new Error(err.response.data.message);
+        throw new Error(err);
     })
 }
 
@@ -47,29 +47,47 @@ export const loginUser = (reqData) => {
     let postData = {
         ...reqData
     }
-    return postAuxEnd('/salary/login', postData, false)
+    return postAuxEnd('/login', postData, false)
 }
 
-// FUNCTION TO GET APPLIED LOANS TABLE
-export const applyLoan = (reqData) => {
+// FUNCTION TO GET DASHBOARD DATA
+export const getDashData = (reqData) => {
     const postData = { ...reqData }
-    return getAuxEnd(`/office/loan/apply`, postData)
+    return getAuxEnd(`/dashboard`, postData)
 }
 
-// FUNCTION TO GET APPLIED LOANS TABLE
-export const loanOffers = (reqData) => {
+// FUNCTION TO GET LOANS TABLE
+export const getLoans = (reqData) => {
     const postData = { ...reqData }
-    return getAuxEnd(`/office/offers`, postData)
+    return getAuxEnd(`/loans`, postData)
 }
 
-// FUNCTION TO GET APPLIED LOANS TABLE
-export const selectLoan = (reqData) => {
+// FUNCTION TO GET TRANSACTIONS TABLE
+export const getTransactions = (reqData) => {
     const postData = { ...reqData }
-    return getAuxEnd(`/office/loan/select`, postData)
+    return getAuxEnd(`/transactions`, postData)
 }
 
-// FUNCTION TO GET APPLIED LOANS TABLE
-export const approvedLoan = (reqData) => {
+// FUNCTION TO GET REPAYMENTS TABLE
+export const getRepayments = (reqData) => {
     const postData = { ...reqData }
-    return getAuxEnd(`/office/loan/approved`, postData)
+    return getAuxEnd(`/repayments`, postData)
+}
+
+// FUNCTION TO GET LOAN CHARGES TABLE
+export const getLoanCharges = (reqData) => {
+    const postData = { ...reqData }
+    return getAuxEnd(`/loan-charges`, postData)
+}
+
+// FUNCTION TO GET OFFERS LIST TABLE
+export const getOffers = (reqData) => {
+    const postData = { ...reqData }
+    return getAuxEnd(`/offers`, postData)
+}
+
+// FUNCTION TO GET REPAYMENT SCHEDULE TABLE
+export const getRepaymentSchedule = (reqData) => {
+    const postData = { ...reqData }
+    return getAuxEnd(`/repayment-schedules`, postData)
 }

tailwind.config.js

@@ -29,6 +29,8 @@ module.exports = {
         }
       },
       screens: {
+        xxs: '300px',
+        xs: '400px',
         large: '1535px',
         max_width: '1700px'
       },