loan table tenor field added

.env

@@ -14,7 +14,4 @@ VITE_EMAIL_ENDPOINT='fcmbloan@support.com'
 
 #BANK NAME
 VITE_BANK_NAME='First City Monument Bank'
-VITE_BANK_NAME_SHORT='FCMB'
-
-# Inactivity timeout/logout AT 10MINS
-REACT_APP_TIMEOUT=600000
+VITE_BANK_NAME_SHORT='FCMB'

.env.development

@@ -14,7 +14,4 @@ VITE_EMAIL_ENDPOINT='fcmbloan@support.com'
 
 #BANK NAME
 VITE_BANK_NAME='First City Monument Bank'
-VITE_BANK_NAME_SHORT='FCMB'
-
-# Inactivity timeout/logout AT 10MINS
-REACT_APP_TIMEOUT=600000
+VITE_BANK_NAME_SHORT='FCMB'

.env.production

@@ -14,7 +14,4 @@ VITE_EMAIL_ENDPOINT='fcmbloan@support.com'
 
 #BANK NAME
 VITE_BANK_NAME='First City Monument Bank'
-VITE_BANK_NAME_SHORT='FCMB'
-
-# Inactivity timeout/logout AT 10MINS
-REACT_APP_TIMEOUT=600000
+VITE_BANK_NAME_SHORT='FCMB'

src/authorization/UserExist.jsx

@@ -6,56 +6,15 @@ 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/Icons.jsx

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

src/components/breadcrumb/BreadcrumbCom.jsx

@@ -8,6 +8,8 @@ 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', ()=>{

src/components/home/HomeCom.jsx

@@ -9,7 +9,6 @@ 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';
 
@@ -40,20 +39,14 @@ export default function HomeCom() {
             <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='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='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>
@@ -68,7 +61,7 @@ export default function HomeCom() {
                       <Icons name='sales' />
                     </div>
                     <div>
-                      <p className='font-bold text-base'><CustomCounter targetNumber={formatNumber(Object.values(item)[0])} timeInSeconds='1' /></p>
+                      <p className='font-bold text-base'>$<CustomCounter targetNumber={formatNumber(Object.values(item)[0])} timeInSeconds='1' />K</p>
                       <p className='text-12 text-slate-500'>{Object.keys(item)[0]}</p>
                     </div>
                   </div>
@@ -118,7 +111,7 @@ export default function HomeCom() {
                                   <img className="w-10 h-10 rounded-md" src={localImgLoader(`loan_icons/${item?.type}.png`)} alt="Icon" />
                                   <div className="text-left">
                                       <div className="text-base font-semibold">{item?.transaction_id}</div>
-                                      <div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)} {getTimeFromDateString(item?.created_at)}</div>
+                                      <div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</div>
                                   </div>  
                                 </div>
                               </td>

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'>Recent Eligibility</p>
+                <p className='text-base text-white-body font-bold'>Support Ticket</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'>Recent Loans</p>
+                <p className='text-base text-white-body font-bold'>Best Ticket</p>
                 <div className='flex flex-col gap-4'>
                     <div className='flex gap-3 items-center'>
                         <div className='px-4 py-2 bg-[#0E172E] rounded-md'>

src/components/layouts/rightaside/Tickets.jsx

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

src/components/loan_charges/LoanChargesCom.jsx

@@ -1,84 +1,42 @@
-import { useEffect, useState } from 'react'
+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'
-import Avatar from '../../assets/user_avatar.jpg'
+import formatNumber from '../../helpers/formatNumber';
 
-
-export default function LoansChargesCom() {
+export default function LoanChargesCom() {
 
     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 {data, isFetching, isError, error} = useQuery({
+        queryKey: [...queryKeys.loan_charges, page],
+        queryFn: () => getLoanCharges({page}),
+        staleTime: 0,
+        // placeholderData: keepPreviousData,
+    })
 
-    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])
+    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='Transactions' paths={['Dashboard', 'Transactions']} />
+            <BreadcrumbCom title='Loan Charges' paths={['Dashboard', 'Loan Charges']} />
 
             <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>
-                :
+                {isFetching ? 
                 <>
-                    {/* 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 */}
-
+                    <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 }) => (
                         <>
@@ -110,7 +68,7 @@ export default function LoansChargesCom() {
                                                 <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 className="font-normal text-gray-500 line-clamp-1">{item?.description}</div>
                                                 </div>  
                                                 </div>
                                             </td>
@@ -148,7 +106,6 @@ export default function LoansChargesCom() {
                         </>
                     )}
                     </TablePaginatedWrapper>
-                </>
                 }
             </div>
         </div>

src/components/loan_charges/_LoanChargesCom.jsx

@@ -1,113 +0,0 @@
-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/loanscom/LoansCom.jsx

@@ -1,86 +1,42 @@
-import { useEffect, useState } from 'react'
+import React from 'react'
+import { useQuery } from "@tanstack/react-query";
 import {Link} from 'react-router-dom'
 
 import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
-import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
+import TableWrapper from '../tableWrapper/TableWrapper'
 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 Avatar from '../../assets/user_avatar.jpg'
-import RouteLinks from '../../RouteLinks';
 import formatNumber from '../../helpers/formatNumber'
+import RouteLinks from '../../RouteLinks';
 
 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 {data:allLoans, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.loans,
+        queryFn: () => getLoans()
+    })
 
     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])
+    const loansCount = allLoans?.data?.count // LOANS LIST COUNT
+    // console.log('LOANS', loans)
 
     return (
         <div className='w-full flex flex-col gap-8'>
-            <BreadcrumbCom title='Transactions' paths={['Dashboard', 'Transactions']} />
+            <BreadcrumbCom title='Loans' paths={['Dashboard', 'Loans']} />
 
             <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>
-                :
+                {isFetching ? 
                 <>
-                    {/* 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}>
+                    <p className='text-slate-800'>Loading...</p>
+                </>
+                : isError ?
+                    <p className='text-red-500'>{error.message}</p>
+                :
+                    <TableWrapper data={loans} itemsPerPage={15}>
                     {({ data }) => (
                         <>
                             <table className="table-auto py-2 w-full text-sm">
@@ -127,7 +83,7 @@ export default function LoansCom() {
                                             <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 className="font-normal text-gray-500">{formatNumber(item?.tenor)}</div>
                                                 </div> 
                                             </td>
                                             <td className="px-2">
@@ -165,8 +121,7 @@ export default function LoansCom() {
                             </table>
                         </>
                     )}
-                    </TablePaginatedWrapper>
-                </>
+                    </TableWrapper>
                 }
             </div>
         </div>

src/components/loanscom/_LoansCom.jsx

@@ -1,132 +0,0 @@
-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/offers/OffersCom.jsx

@@ -102,7 +102,7 @@ export default function OffersCom() {
                                             </td>
                                             <td className="px-2">
                                                 <div className="text-right">
-                                                    <div className="font-normal text-gray-500">{item?.tenor}</div>
+                                                    <div className="font-normal text-gray-500">{getDateFromDateString(item?.tenor)}</div>
                                                 </div> 
                                             </td>
                                             <td className="px-2 text-right">

src/components/repayments/RepaymentsCom.jsx

@@ -1,83 +1,41 @@
-import { useEffect, useState } from 'react'
+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';
-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 {data, isFetching, isError, error} = useQuery({
+        queryKey: [...queryKeys.transactions, page],
+        queryFn: () => getRepayments({page}),
+        staleTime: 0,
+        // placeholderData: keepPreviousData,
+    })
 
-    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])
+    const repayments = data?.data?.repayments // REPAYMENTS LIST
+    const pagination = data?.data?.pagination
 
     return (
         <div className='w-full flex flex-col gap-8'>
-            <BreadcrumbCom title='Transactions' paths={['Dashboard', 'Transactions']} />
+            <BreadcrumbCom title='Repayments' paths={['Dashboard', 'Repayments']} />
 
             <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>
-                :
+                {isFetching ? 
                 <>
-                    {/* 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 */}
-
+                    <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 }) => (
                         <>
@@ -106,7 +64,7 @@ export default function RepaymentsCom() {
                                                 <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 className="font-normal text-gray-500">{item?.transaction_id}</div>
                                                 </div>  
                                                 </div>
                                             </td>
@@ -144,7 +102,6 @@ export default function RepaymentsCom() {
                         </>
                     )}
                     </TablePaginatedWrapper>
-                </>
                 }
             </div>
         </div>

src/components/repayments/_RepaymentsCom.jsx

@@ -1,109 +0,0 @@
-import React, { useState } from 'react'
-import { useQuery } from "@tanstack/react-query";
-
-import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
-import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
-import Icons from '../Icons'
-
-import Avatar from '../../assets/user_avatar.jpg'
-import queryKeys from '../../services/queryKeys'
-import { getRepayments } from '../../services/siteServices'
-import getDateFromDateString from '../../helpers/GetDateFromDateString';
-
-export default function RepaymentsCom() {
-
-    const [page, setPage] = useState(1)
-
-    const {data, isFetching, isError, error} = useQuery({
-        queryKey: [...queryKeys.transactions, page],
-        queryFn: () => getRepayments({page}),
-        staleTime: 0,
-        // placeholderData: keepPreviousData,
-    })
-
-    const repayments = data?.data?.repayments // REPAYMENTS LIST
-    const pagination = data?.data?.pagination
-
-    return (
-        <div className='w-full flex flex-col gap-8'>
-            <BreadcrumbCom title='Repayments' paths={['Dashboard', 'Repayments']} />
-
-            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
-                {isFetching ? 
-                <>
-                    <p className='text-slate-800'>Loading...</p>
-                </>
-                : isError ?
-                    <p className='text-red-500'>{error.message}</p>
-                :
-                    <TablePaginatedWrapper data={repayments} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
-                    {({ data }) => (
-                        <>
-                            <table className="py-2 w-full text-sm">
-                                <thead className="py-2 text-sm text-slate-500 text-left">
-                                    <tr>
-                                        <th scope="col" className="px-2 py-2">
-                                            Name
-                                        </th>
-                                        {/* <th scope="col" className="px-2">
-                                            Loan
-                                        </th> */}
-                                        <th scope="col" className="px-2">
-                                            Added
-                                        </th>
-                                        <th scope="col" className="px-2 text-right">
-                                            Action
-                                        </th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    {(data && data.length > 0) ? data?.map((item, index) => (
-                                        <tr key={index} className="py-2 border-t border-dashed border-slate-300">
-                                            <td className="px-2 py-2">
-                                                <div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
-                                                <img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />
-                                                <div className="text-left">
-                                                    <div className="text-base font-semibold">{item?.customer_id || ''}</div>
-                                                    <div className="font-normal text-gray-500">{item?.loan_id} : {item?.transaction_id}</div>
-                                                </div>  
-                                                </div>
-                                            </td>
-                                            {/* <td className="px-2">
-                                                <div className="text-left">
-                                                    <div className="text-base font-semibold">{item?.loan}</div>
-                                                    <div className="font-normal text-gray-500">{item?.description}</div>
-                                                </div> 
-                                            </td> */}
-                                            <td className="px-2">
-                                                <div className="text-left">
-                                                    <div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</div>
-                                                </div> 
-                                            </td>
-                                            <td className="px-2 text-right">
-                                                <div className='flex items-center justify-end gap-3 md:gap-4'>
-                                                    <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
-                                                        <Icons name='eye' />
-                                                    </div>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                    ))
-                                    :
-                                    <tr className="py-2 border-t border-dashed border-slate-300">
-                                        <td className="px-3 py-2" colSpan={3}>
-                                            <div className="flex justify-center items-center">
-                                                No Record Found
-                                            </div>
-                                        </td>
-                                    </tr>
-                                    }
-                                </tbody>
-                            </table>
-                        </>
-                    )}
-                    </TablePaginatedWrapper>
-                }
-            </div>
-        </div>
-    )
-}

src/components/tableWrapper/TablePaginatedWrapper.jsx

@@ -1,15 +1,25 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import MainBtn from "../MainBtn";
 import Icons from "../Icons";
 
 
 export default function TablePaginatedWrapper({
   data = [],
-  isFetching,
+  itemsPerPage = 5,
   pagination,
   setPage,
+  isFetching,
+  filterItem,
   children,
 }) {
+  const [isLoading, setIsLoading] = useState(isFetching)
+  const [searchTerm, setSearchTerm] = useState("");
+  const [filteredData, setFilteredData] = useState(data);
+
+  const [currentPage, setCurrentPage] = useState(0);
+  const [newData, setNewData] = useState([]);
+
+  const numberOfSelection = itemsPerPage;
 
   const handlePrev = () => {
     setPage(prev => prev - 1)
@@ -18,23 +28,69 @@ export default function TablePaginatedWrapper({
     setPage(prev => prev + 1)
   };
 
+  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, numberOfSelection]);
+
+  useEffect(()=>{
+    setCurrentPage(0)
+  },[itemsPerPage])
+
   return (
     <div className="relative w-full">
+      {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 })}
+          {children({ data: newData })}
         </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>
+              {isLoading ? '----' : `page ${pagination?.current_page}`}</span> of <span className="font-semibold text-gray-900 dark:text-white">{pagination?.total_pages}</span>
             </div>
+            {(newData.length >= 0) &&
               <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}
+                      disabled={isLoading || !pagination?.has_prev}
                   >
                   <Icons name='prev' />
                   </MainBtn>
@@ -42,22 +98,23 @@ export default function TablePaginatedWrapper({
                       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}
+                      disabled={isLoading || !pagination?.has_next}
                   > 
                   <Icons name='next' />
                   </MainBtn>
               </div>
+            }
           </div>
       </div>
       
-    {isFetching && <TableIsLoading />}
+    {isLoading && <TableIsLoading />}
     </div>
   );
 }
 
-export const TableIsLoading = () => {
+const TableIsLoading = () => {
   return (
-    <div className="w-full fixed z-[991] inset-0 flex justify-center items-center bg-black/10">
+    <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/transactionDetails/LoanChargeDetails.jsx

@@ -74,7 +74,7 @@ export default function LoanChargeDetails({transactionID}) {
                                 </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 className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</div>
                                     </div> 
                                 </td>
                                 {/* <td className="px-2 text-right">

src/components/transactionDetails/LoanDetails.jsx

@@ -41,16 +41,16 @@ export default function LoanDetails({transactionID}) {
                                 Name
                             </th>
                             <th scope="col" className="px-2 text-right">
-                                Loan/Eligible Amount
+                                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.
+                                Repay/Install Amount
                             </th>
                             <th scope="col" className="px-2 text-right">
-                                Added/Due
+                                Added
                             </th>
                             <th scope="col" className="px-2 text-right">
                                 Action
@@ -66,8 +66,7 @@ export default function LoanDetails({transactionID}) {
                                     <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 className="font-normal text-gray-500">ORIGIN : {item?.original_transaction}</div>
                                     </div>  
                                     </div>
                                 </td>
@@ -75,14 +74,12 @@ export default function LoanDetails({transactionID}) {
                                     <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 className="font-normal text-gray-500">{formatNumber(item?.tenor)}</div>
                                     </div> 
                                 </td>
                                 <td className="px-2">
@@ -94,7 +91,6 @@ export default function LoanDetails({transactionID}) {
                                 <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">

src/components/transactionDetails/RepaymentScheduleDetails.jsx

@@ -92,7 +92,7 @@ export default function RepaymentScheduleDetails({transactionID}) {
                                 </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 className="font-normal text-gray-500">{item?.paid_at ? getDateFromDateString(item?.paid_at) : 'NULL'}</div>
                                     </div>
                                 </td>
                                 <td className="px-2 text-right">
@@ -106,7 +106,7 @@ export default function RepaymentScheduleDetails({transactionID}) {
                         ))
                         :
                         <tr className="py-2 border-t border-dashed border-slate-300">
-                            <td className="px-3 py-2" colSpan={6}>
+                            <td className="px-3 py-2" colSpan={5}>
                                 <div className="flex justify-center items-center">
                                     No Record Found
                                 </div>

src/components/transactionDetails/TransactionDetails.jsx

@@ -6,7 +6,6 @@ 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}) {
@@ -58,7 +57,7 @@ export default function TransactionDetails({transactionID}) {
                                     <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 className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</div>
                                     </div>  
                                     </div>
                                 </td>

src/components/transactions/TransactionsCom.jsx

@@ -1,85 +1,44 @@
-import { useEffect, useState } from 'react'
+import React, { useState } from 'react'
+import { useQuery } from "@tanstack/react-query";
 import {Link} from 'react-router-dom'
 
 import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
 import 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 [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 {data, isFetching, isError, error, isPlaceholderData, isPending} = useQuery({
+        queryKey: [...queryKeys.transactions, page],
+        queryFn: () => getTransactions({page}),
+        staleTime: 0,
+        // placeholderData: keepPreviousData,
+    })
 
-    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])
+    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'>
-                { isError ?
-                    <p className='text-red-500'>{allTransactions?.error}</p>
-                :
+                {isFetching ? 
                 <>
-                    {/* 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 */}
-
+                    <p className='text-slate-800'>Loading...</p>
+                </>
+                : isError ?
+                    <p className='text-red-500'>{error.message}</p>
+                :
                     <TablePaginatedWrapper data={transactions} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
                     {({ data }) => (
                         <>
@@ -108,7 +67,7 @@ export default function TransactionsCom() {
                                                 <img className="w-10 h-10 rounded-md" src={localImgLoader(`loan_icons/${item?.type}.png`)} alt="Icon" />
                                                 <div className="text-left">
                                                     <div className="text-base font-semibold">{item?.transaction_id}</div>
-                                                    <div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)} {getTimeFromDateString(item?.created_at)}</div>
+                                                    <div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</div>
                                                 </div>  
                                                 </div>
                                             </td>
@@ -151,7 +110,6 @@ export default function TransactionsCom() {
                         </>
                     )}
                     </TablePaginatedWrapper>
-                </>
                 }
             </div>
         </div>

src/components/transactions/_TransactionsCom.jsx

@@ -1,163 +0,0 @@
-import React, { useState } from 'react'
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import {Link} from 'react-router-dom'
-
-import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
-import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
-import Icons from '../Icons'
-
-import Avatar from '../../assets/user_avatar.jpg'
-import queryKeys from '../../services/queryKeys'
-import { getTransactions } from '../../services/siteServices'
-import getDateFromDateString from '../../helpers/GetDateFromDateString';
-import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
-import localImgLoader from '../../helpers/localImageLoader';
-import RouteLinks from '../../RouteLinks';
-
-export default function TransactionsCom() {
-
-    const queryClient = useQueryClient()
-
-    const [page, setPage] = useState(1)
-
-    const [filter, setFilter] = useState({transaction_id: '', account_id: ''})
-    const handleFilter = ({target:{name, value}}) => {
-        setFilter(prev => ({...prev, [name]:value}))
-    }
-
-    const handleFilterByParams = () => {
-        // setPage(1)
-        queryClient.invalidateQueries({ queryKey: [...queryKeys.transactions] })
-    }
-
-    const {data, isFetching, isError, error, isPlaceholderData, isPending} = useQuery({
-        queryKey: [...queryKeys.transactions, page],
-        queryFn: () => getTransactions({...filter, page}),
-        staleTime: 0,
-        // placeholderData: keepPreviousData,
-    })
-
-    const transactions = data?.data?.transactions // TRANSACTIONS LIST
-    const pagination = data?.data?.pagination
-
-    return (
-        <div className='w-full flex flex-col gap-8'>
-            <BreadcrumbCom title='Transactions' paths={['Dashboard', 'Transactions']} />
-
-            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
-                {isFetching ? 
-                <>
-                    <p className='text-slate-800'>Loading...</p>
-                </>
-                : isError ?
-                    <p className='text-red-500'>{error.message}</p>
-                :
-                <>
-                    {/* filter section */}
-                    <div className='px-2 py-2 mb-4 flex items-end gap-2'>
-                        <Icons name='filter' className='text-3xl' />
-                        <div className='flex gap-4 items-center'>
-                            <div className=''>
-                                <p>Transaction ID</p>
-                                <select name='transaction_id' value={filter?.transaction_id} className='p-2' onChange={handleFilter}>
-                                    <option value=''>select</option>
-                                    <>
-                                    {transactions.map((item, index) => (
-                                        <option key={index} value={item?.transaction_id}>{item?.transaction_id}</option>
-                                    ))}
-                                    </>
-                                </select>
-                            </div>
-                            <div className=''>
-                                <p>Account ID</p>
-                                <select name='account_id' value={filter?.account_id} className='p-2' onChange={handleFilter}>
-                                    <option value=''>select</option>
-                                    <>
-                                    {transactions.map((item, index) => (
-                                        <option key={index} value={item?.account_id}>{item?.account_id}</option>
-                                    ))}
-                                    </>
-                                </select>
-                            </div>
-                        </div>
-                        <button onClick={handleFilterByParams} className={`bg-primary px-2 py-1 rounded-md text-white font-medium`}>Submit</button>
-                    </div>
-                     {/* end of filter section */}
-
-                    <TablePaginatedWrapper data={transactions} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
-                    {({ data }) => (
-                        <>
-                            <table className="py-2 w-full text-sm">
-                                <thead className="py-2 text-sm text-slate-500 text-left">
-                                    <tr>
-                                        <th scope="col" className="px-2 py-2">
-                                            Request
-                                        </th>
-                                        <th scope="col" className="px-2">
-                                            Account
-                                        </th>
-                                        <th scope="col" className="px-2">
-                                            Activity
-                                        </th>
-                                        <th scope="col" className="px-2 text-right">
-                                            Action
-                                        </th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    {(data && data.length > 0) ? data?.map((item, index) => (
-                                        <tr key={index} className="py-2 border-t border-dashed border-slate-300">
-                                            <td className="px-2 py-2">
-                                                <div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
-                                                <img className="w-10 h-10 rounded-md" src={localImgLoader(`loan_icons/${item?.type}.png`)} alt="Icon" />
-                                                <div className="text-left">
-                                                    <div className="text-base font-semibold">{item?.transaction_id}</div>
-                                                    <div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)} {getTimeFromDateString(item?.created_at)}</div>
-                                                </div>  
-                                                </div>
-                                            </td>
-                                            <td className="px-2">
-                                                <div className="text-left">
-                                                    <div className="text-base font-semibold">{item?.account_id}</div>
-                                                    <div className="font-normal text-gray-500">{item?.type}</div>
-                                                </div> 
-                                            </td>
-                                            <td className="px-2">
-                                                <div className="text-left">
-                                                    <div className="font-normal text-gray-500">50%</div>
-                                                    <div className="relative h-[6px] w-full bg-white-body dark:bg-black-body rounded-full overflow-hidden">
-                                                    <div className={`absolute left-0 h-full w-1/2 bg-emerald-600`}></div>
-                                                    </div>
-                                                </div> 
-                                            </td>
-                                            <td className="px-2 text-right">
-                                                <div className='flex items-center justify-end gap-3 md:gap-4'>
-                                                    <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
-                                                        <Link to={RouteLinks.transaction_details_page} state={{transactionID: item?.transaction_id}}>
-                                                            <Icons name='eye' />
-                                                        </Link>
-                                                    </div>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                    ))
-                                    :
-                                    <tr className="py-2 border-t border-dashed border-slate-300">
-                                        <td className="px-3 py-2" colSpan={4}>
-                                            <div className="flex justify-center items-center">
-                                                No Record Found
-                                            </div>
-                                        </td>
-                                    </tr>
-                                    }
-                                </tbody>
-                            </table>
-                        </>
-                    )}
-                    </TablePaginatedWrapper>
-                </>
-                }
-            </div>
-        </div>
-    )
-}

src/helpers/debounceFunction.js

@@ -1,15 +0,0 @@
-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/index.css

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