added filter component

.env

@@ -15,3 +15,6 @@ 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

.env.development

@@ -15,3 +15,6 @@ 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

.env.production

@@ -15,3 +15,6 @@ 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

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

@@ -40,14 +40,20 @@ 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>
@@ -62,7 +68,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' />K</p>
+                      <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>

src/components/loan_charges/LoanChargesCom.jsx

@@ -1,42 +1,84 @@
-import React, { useState } from 'react'
+import { useEffect, 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 formatNumber from '../../helpers/formatNumber'
+import Avatar from '../../assets/user_avatar.jpg'
 
-export default function LoanChargesCom() {
+
+export default function LoansChargesCom() {
 
     const [page, setPage] = useState(1)
+    const [allLoanCharges, setAllLoanCharges] = useState({loading:true, error:'', data:{}})
 
-    const {data, isFetching, isError, error} = useQuery({
+    const [willFilter, setWillFilter] = useState(false)
-        queryKey: [...queryKeys.loan_charges, page],
+    const [filter, setFilter] = useState({type: '', id: ''})
-        queryFn: () => getLoanCharges({page}),
+    const handleFilter = ({target:{name, value}}) => {
-        staleTime: 0,
+        setFilter(prev => ({...prev, [name]:value}))
-        // placeholderData: keepPreviousData,
+    }
-    })
 
-    const loanCharges = data?.data?.loan_charges // LOAN CHARGES LIST
+    const handleFilterByParams = () => {
-    const pagination = data?.data?.pagination
+        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='Loan Charges' paths={['Dashboard', 'Loan Charges']} />
+            <BreadcrumbCom title='Transactions' paths={['Dashboard', 'Transactions']} />
 
             <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
-                {isFetching ? 
+                { isError ?
-                <>
+                    <p className='text-red-500'>{allLoanCharges?.error}</p>
-                    <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 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 }) => (
                         <>
@@ -106,6 +148,7 @@ export default function LoanChargesCom() {
                         </>
                     )}
                     </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/loanscom/LoansCom.jsx

@@ -1,44 +1,85 @@
-import React, { useState } from 'react'
+import { useEffect, 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 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 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 {data:allLoans, isFetching, isError, error} = useQuery({
+    const [willFilter, setWillFilter] = useState(false)
-        queryKey: [...queryKeys.loans, page],
+    const [filter, setFilter] = useState({type: '', id: ''})
-        queryFn: () => getLoans({page}),
+    const handleFilter = ({target:{name, value}}) => {
-        staleTime: 0,
+        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='Loans' paths={['Dashboard', 'Loans']} />
+            <BreadcrumbCom title='Transactions' paths={['Dashboard', 'Transactions']} />
 
             <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
-                {isFetching ? 
+                { isError ?
-                <>
+                    <p className='text-red-500'>{allLoans?.error}</p>
-                    <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 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 }) => (
                         <>
@@ -125,6 +166,7 @@ export default function LoansCom() {
                         </>
                     )}
                     </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/repayments/RepaymentsCom.jsx

@@ -1,41 +1,83 @@
-import React, { useState } from 'react'
+import { useEffect, 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 {data, isFetching, isError, error} = useQuery({
+    const [willFilter, setWillFilter] = useState(false)
-        queryKey: [...queryKeys.transactions, page],
+    const [filter, setFilter] = useState({type: '', id: ''})
-        queryFn: () => getRepayments({page}),
+    const handleFilter = ({target:{name, value}}) => {
-        staleTime: 0,
+        setFilter(prev => ({...prev, [name]:value}))
-        // placeholderData: keepPreviousData,
+    }
-    })
 
-    const repayments = data?.data?.repayments // REPAYMENTS LIST
+    const handleFilterByParams = () => {
-    const pagination = data?.data?.pagination
+        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='Repayments' paths={['Dashboard', 'Repayments']} />
+            <BreadcrumbCom title='Transactions' paths={['Dashboard', 'Transactions']} />
 
             <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
-                {isFetching ? 
+                { isError ?
-                <>
+                    <p className='text-red-500'>{allRepayments?.error}</p>
-                    <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 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 }) => (
                         <>
@@ -102,6 +144,7 @@ export default function RepaymentsCom() {
                         </>
                     )}
                     </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/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