confirmation-modal

.env

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

.env.development

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

.env.production

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

docker-compose.yml

@@ -24,9 +24,9 @@ services:
 volumes:
   src:
 
-networks:
-  default:
-    driver: bridge
-    ipam:
-      config:
-        - subnet: 172.15.56.0/24
+#networks:
+#  default:
+#    driver: bridge
+#    ipam:
+#      config:
+#        - subnet: 172.15.56.0/24

src/App.js

@@ -8,6 +8,18 @@ import { generalLayoutContext } from './context/GeneralLayoutContext';
 
 import './App.css';
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: 3,
+      staleTime: 300000 //5 mins
+      // refetchOnMount: false,
+      // staleTime: Infinity // can also be a number in millisecond
+    },
+  },
+})
+
 function App() {
 
   const {pathname} = useLocation()
@@ -18,17 +30,6 @@ function App() {
     window.scrollTo(0,0)
   },[pathname])
 
-  const queryClient = new QueryClient({
-    defaultOptions: {
-      queries: {
-        refetchOnWindowFocus: false,
-        retry: 3,
-        staleTime: 300000 //5 mins
-        // refetchOnMount: false,
-        // staleTime: Infinity // can also be a number in millisecond
-      },
-    },
-  })
 
   return (
     <>

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/auth/LoginCom.jsx

@@ -11,6 +11,7 @@ import { loginUser } from '../../services/siteServices'
 
 import RouteLinks from '../../RouteLinks'
 import Icons from '../Icons'
+import localImgLoader from '../../helpers/localImageLoader'
 
 
 const initialValues = {
@@ -83,13 +84,17 @@ export default function LoginCom() {
               {(props)=>(
                 <Form>
                   <div className='flex flex-col gap-8 w-full bg-white rounded-xl p-16 sm:px-20 sm:py-16 shadow'>
+                    <div className='flex justify-center w-full mb-10'>
+                      <img className='w-auto h-8 xs:h-16' src={localImgLoader('simbrella-bko-logo.png')} />
+                    </div>
+
                     <div className='w-full flex flex-col gap-1 items-center'>
                       <h1 className='text-2xl md:text-3xl font-bold text-black-body'>Sign In</h1>
                       <p className='text-sm font-medium text-slate-500'>Welcome back, please login to your account</p>
                     </div>
 
                     {/* social login */}
-                    <div className='grid grid-cols-2 gap-4 text-sm'>
+                    {/* <div className='grid grid-cols-2 gap-4 text-sm'>
                       <div className='px-4 py-2 flex gap-2 items-center justify-center text-black-body font-medium border border-slate-300/50 rounded-md hover:text-primary hover:bg-sky-50 cursor-pointer'>
                         <Icons name='google' />
                         <span>Sign in with Google</span>
@@ -102,7 +107,7 @@ export default function LoginCom() {
 
                     <div className='relative h-[1px] bg-slate-300/50'>
                       <p className='absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 bg-white p-4 text-12 text-slate-500'>Or with email</p>
-                    </div>
+                    </div> */}
 
                     <div className='flex flex-col gap-6'>
                       <div className='relative text-input flex flex-col gap-2'>
@@ -146,11 +151,11 @@ export default function LoginCom() {
 
                     {/* <p className='text-sm text-center font-medium text-slate-500'>Not yet a member? <span className='text-primary'>Sign Up</span></p> */}
 
-                    <div className='flex justify-end gap-4 mt-6 text-[13px] font-medium'>
+                    {/* <div className='flex justify-end gap-4 mt-6 text-[13px] font-medium'>
                       <Link className='text-primary' to=''>Terms</Link>
                       <Link className='text-primary' to=''>Plans</Link>
                       <Link className='text-primary' to=''>Contact Us</Link>
-                    </div>
+                    </div> */}
 
 
                   </div>

src/components/home/HomeCom.jsx

@@ -1,182 +1,201 @@
 import React from 'react'
-import  {Link} from 'react-router-dom'
-import { useQuery } from "@tanstack/react-query";
+import {Link} from 'react-router-dom'
+import {useQuery} from "@tanstack/react-query";
 import BreadcrumbCom from '../../components/breadcrumb/BreadcrumbCom'
 import CustomCounter from '../../components/CustomCounter'
 import Icons from '../../components/Icons'
 import formatNumber from '../../helpers/formatNumber'
 
 import queryKeys from '../../services/queryKeys'
-import { getDashData } from '../../services/siteServices'
+import {getDashData} from '../../services/siteServices'
 import getDateFromDateString from '../../helpers/GetDateFromDateString';
 import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
 import localImgLoader from '../../helpers/localImageLoader';
+import localSiteIcons from "../../helpers/localSiteIcons";
 import RouteLinks from '../../RouteLinks';
 
 export default function HomeCom() {
 
-  const {data, isFetching, isError, error} = useQuery({
-    queryKey: queryKeys.dashboard,
-    queryFn: () => getDashData(),
-  })
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.dashboard,
+        queryFn: () => getDashData(),
+    })
 
-  const dashData = data?.data // DASHBOARD DATA
+    const dashData = data?.data // DASHBOARD DATA
 
-  // console.log('dashData', dashData)
-  // loans, payments, recent_transactions [], request_summary
+    // console.log('dashData', dashData)
+    // loans, payments, recent_transactions [], request_summary
 
-  return (
-    <div className='w-full flex flex-col gap-8'>
-      <BreadcrumbCom title='Dashboard' paths={['Home', 'Dashboard']} />
+    return (
+        <div className='w-full flex flex-col gap-8'>
+            <BreadcrumbCom title='Dashboard' paths={['Home', 'Dashboard']}/>
 
-      {(isFetching || isError) ?
-      <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
-        {isError ? <p className='text-red-500'>{error.message}</p> : <p className='text-slate-800'>Loading...</p>}
-      </div>
-      :
-      <div className='grid grid-cols-1 gap-8'>
-        <div className='w-full grid grid-cols-1 xl:grid-cols-3 gap-8'>
-          <div className='box min-h-[230] justify-between bg-[#F7D9E3] dark:bg-black-box text-black-body dark:text-white-body'>
-            <p className='text-base sm:text-lg font-bold hover:text-primary'>Loans</p>
-            <div className='flex flex-wrap gap-2 items-end font-bold'>
-              {/* <p className='text-3xl sm:text-[39px]'><span className='text-xl sm:text-2xl'>{dashData?.loans?.currency_text}</span><CustomCounter targetNumber={formatNumber(dashData?.loans?.value)} timeInSeconds='1' /></p> */}
-              <p className='text-xl sm:text-[30px]'><span className='text-lg sm:text-xl'>{dashData?.loans?.currency_text}</span><CustomCounter targetNumber={formatNumber(dashData?.loans?.value)} timeInSeconds='1' /></p>
-              <p className='sm:text-[13.9px]'>{dashData?.loans?.text}</p>
-            </div>
-          </div>
-          <div className='box min-h-[230] justify-between bg-[#CBF0F5] dark:bg-black-box text-black-body dark:text-white-body'>
-            <p className='text-base sm:text-lg font-bold hover:text-primary'>Payments</p>
-            <div className='flex flex-wrap gap-2 items-end font-bold'>
-              <p className='text-xl sm:text-[30px]'><span className='text-lg sm:text-xl'>{dashData?.payments?.currency_text}</span><CustomCounter targetNumber={formatNumber(dashData?.payments?.value)} timeInSeconds='1' /></p>
-              <p className='sm:text-[13.9px]'>{dashData?.payments?.text}</p>
-            </div>
-          </div>
-          <div className='box min-h-[230] justify-between bg-[#CBD4F4] dark:bg-black-box text-black-body dark:text-white-body'>
-            <p className='mb-4 text-base sm:text-lg font-bold hover:text-primary'>Request Summary</p>
-            <div className='grid grid-cols-2 gap-4 font-bold'>
-              {
-              Object.values(dashData?.request_summary).map((item, index) => {
-                return (
-                  <div key={index} className='flex items-center gap-2'>
-                    <div className='min-w-10 min-h-10 bg-white-body dark:bg-black-box dark:shadow-[0_0_0_1px_#f9f9f9] rounded-md flex justify-center items-center'>
-                      <Icons name='sales' />
+            {(isFetching || isError) ?
+                <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+                    {isError ? <p className='text-red-500'>{error.message}</p> :
+                        <p className='text-slate-800'>Loading...</p>}
+                </div>
+                :
+                <div className='grid grid-cols-1 gap-8'>
+                    <div className='w-full grid grid-cols-1 xl:grid-cols-3 gap-8'>
+                        <div
+                            className='box min-h-[230] justify-between bg-[#F7D9E3] dark:bg-black-box text-black-body dark:text-white-body'>
+                            <p className='text-base sm:text-lg font-bold hover:text-primary'>Loans</p>
+                            <div className='flex flex-wrap gap-2 items-end font-bold'>
+                                {/* <p className='text-3xl sm:text-[39px]'><span className='text-xl sm:text-2xl'>{dashData?.loans?.currency_text}</span><CustomCounter targetNumber={dashData?.loans?.value} timeInSeconds='1' /></p> */}
+                                <p className='text-xl sm:text-[30px]'><span className='text-lg sm:text-xl'>
+                {dashData?.loans?.currency_text}
+                </span><CustomCounter targetNumber={formatNumber(dashData?.loans?.value)} timeInSeconds='1'/>
+                                </p>
+                                <p className='sm:text-[13.9px]'>{dashData?.loans?.text}</p>
+                            </div>
+                        </div>
+                        <div
+                            className='box min-h-[230] justify-between bg-[#CBF0F5] dark:bg-black-box text-black-body dark:text-white-body'>
+                            <p className='text-base sm:text-lg font-bold hover:text-primary'>Payments</p>
+                            <div className='flex flex-wrap gap-2 items-end font-bold'>
+                                <p className='text-xl sm:text-[30px]'><span className='text-lg sm:text-xl'>
+                {dashData?.payments?.currency_text}
+                </span><CustomCounter targetNumber={formatNumber(dashData?.payments?.value)} timeInSeconds='1'/>
+                                </p>
+                                <p className='sm:text-[13.9px]'>{dashData?.payments?.text}</p>
+                            </div>
+                        </div>
+                        <div
+                            className='box min-h-[230] justify-between bg-[#CBD4F4] dark:bg-black-box text-black-body dark:text-white-body'>
+                            <p className='mb-4 text-base sm:text-lg font-bold hover:text-primary'>Request Summary</p>
+                            <div className='grid grid-cols-2 gap-4 font-bold'>
+                                {
+                                    Object.values(dashData?.request_summary).map((item, index) => {
+                                        return (
+                                            <div key={index} className='flex items-center gap-2'>
+                                                <div
+                                                    className='min-w-10 min-h-10 bg-white-body dark:bg-black-box dark:shadow-[0_0_0_1px_#f9f9f9] rounded-md flex justify-center items-center'>
+                                                    <Icons name='sales'/>
+                                                </div>
+                                                <div>
+                                                    <p className='font-bold text-base'><CustomCounter
+                                                        targetNumber={Object.values(item)[0]} timeInSeconds='1'/></p>
+                                                    <p className='text-12 text-slate-500'>{Object.keys(item)[0]}</p>
+                                                </div>
+                                            </div>
+                                        )
+                                    })
+                                }
+                            </div>
+                        </div>
                     </div>
-                    <div>
-                      <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>
-                )
-              })
-              }
-            </div>
-          </div>
-        </div>
 
-        <div className='w-full'>
-          <div className='box gap-8 bg-white dark:bg-black-box text-black-body dark:text-white-body'>
-            <div className='grid grid-cols-1 xs:grid-cols-2 gap-4'>
-              <div className='flex flex-col gap-1 order-2 xs:order-1'>
-                <p className='font-bold text-base'>Recent Request</p>
-                {/* <p className='text-12'>Over 500 members</p> */}
-              </div>
-              {/* <div className='order-1 xs:order-2 text-left xs:text-right'>
+                    <div className='w-full'>
+                        <div className='box gap-8 bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+                            <div className='grid grid-cols-1 xs:grid-cols-2 gap-4'>
+                                <div className='flex flex-col gap-1 order-2 xs:order-1'>
+                                    <p className='font-bold text-base'>Recent Request</p>
+                                    {/* <p className='text-12'>Over 500 members</p> */}
+                                </div>
+                                {/* <div className='order-1 xs:order-2 text-left xs:text-right'>
                 <button className='font-bold bg-white-aside text-black-body text-12 px-4 py-2 hover:text-primary hover:bg-sky-50 dark:hover:text-white dark:hover:bg-primary dark:text-white-body dark:bg-black-body rounded-md'>+ New Member</button>
               </div> */}
-            </div>
+                            </div>
 
-              <table className="py-2 w-full text-sm">
-                  <thead className="py-2 text-sm text-slate-500 text-left font-semibold">
-                      <tr>
-                          <th scope="col" className="px-2 py-2">
-                              Request
-                          </th>
-                          <th scope="col" className="px-2">
-                              Account
-                          </th>
-                          <th scope="col" className="px-2">
-                              Activity
-                          </th>
-                          <th scope="col" className="px-2 text-right">
-                              Action
-                          </th>
-                      </tr>
-                  </thead>
-                  <tbody>
-                    {(dashData?.recent_transactions && dashData?.recent_transactions.length > 0) ? dashData?.recent_transactions?.map((item, index) => {
-                      if(index <= 10) {
-                        return (
-                          <tr key={item?.id} className="py-2 border-t border-dashed border-slate-300">
-                              <td className="px-2 py-2">
-                                <div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
-                                  <img className="w-10 h-10 rounded-md" src={localImgLoader(`loan_icons/${item?.type}.png`)} alt="Icon" />
-                                  <div className="text-left">
-                                      <div className="text-base font-semibold">{item?.transaction_id}</div>
-                                      <div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)} {getTimeFromDateString(item?.created_at)}</div>
-                                  </div>  
-                                </div>
-                              </td>
-                              <td className="px-2">
-                                <div className="text-left">
-                                    <div className="text-base font-semibold">{item?.account_id}</div>
-                                    <div className="font-normal text-gray-500">{item?.type}</div>
-                                </div> 
-                              </td>
-                              <td className="px-2">
-                                <div className="text-left">
-                                    <div className="font-normal text-gray-500">50%</div>
-                                    <div className="relative h-[6px] w-full bg-white-body dark:bg-black-body rounded-full overflow-hidden">
-                                      <div className={`absolute left-0 h-full w-1/2 bg-emerald-600`}></div>
-                                    </div>
-                                </div> 
-                              </td>
-                              <td className="px-2 text-right">
-                                <div className='flex items-center justify-end gap-3 md:gap-4'>
-                                  {/* <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
+                            <table className="py-2 w-full text-sm">
+                                <thead className="py-2 text-sm text-slate-500 text-left font-semibold">
+                                <tr>
+                                    <th scope="col" className="px-2 py-2">
+                                        Request
+                                    </th>
+                                    <th scope="col" className="px-2">
+                                        Account
+                                    </th>
+                                    <th scope="col" className="px-2">
+                                        Channel
+                                    </th>
+                                    <th scope="col" className="px-2 text-right">
+                                        Action
+                                    </th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                {(dashData?.recent_transactions && dashData?.recent_transactions.length > 0) ? dashData?.recent_transactions?.map((item, index) => {
+                                            if (index <= 10) {
+                                                return (
+                                                    <tr key={item?.id} className="py-2 border-t border-dashed border-slate-300">
+                                                        <td className="px-2 py-2">
+                                                            <div
+                                                                className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
+                                                                <img className="w-10 h-10 rounded-md"
+                                                                     src={localSiteIcons(`loan_icons/${item?.type}`)}
+                                                                     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="text-base font-semibold">{item?.channel}</div>
+                                                            </div>
+                                                        </td>
+                                                        <td className="px-2 text-right">
+                                                            <div className='flex items-center justify-end gap-3 md:gap-4'>
+                                                                {/* <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
                                     <Icons name='edit' />
                                   </div> */}
-                                  <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
-                                    <Link to={RouteLinks.transaction_details_page} state={{transactionID: item?.transaction_id}}>
-                                        <Icons name='eye' />
-                                    </Link>
-                                  </div>
-                                  {/* <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
+                                                                <div
+                                                                    className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
+                                                                    <Link to={RouteLinks.transaction_details_page}
+                                                                          state={{transactionID: item?.transaction_id}}>
+                                                                        <Icons name='eye'/>
+                                                                    </Link>
+                                                                </div>
+                                                                {/* <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
                                     <Icons name='trash' />
                                   </div> */}
-                                </div>
-                              </td>
-                          </tr>
-                        )
-                      }
-                    }
-                    )
-                    :
-                    <tr className="py-2 border-t border-dashed border-slate-300">
-                        <td className="px-3 py-2" colSpan={4}>
-                            <div className="flex justify-center items-center">
-                                No Record Found
-                            </div>
-                        </td>
-                    </tr>
-                    }
-                    <>
-                    {dashData?.recent_transactions.length > 10 &&
-                      <tr className="py-2 border-t border-dashed text-right text-primary border-slate-300">
-                        <td className="px-3 py-2" colSpan={4}>
-                            <Link to={RouteLinks.transactionsPage} className="flex justify-end items-center">
-                                More ...
-                            </Link>
-                        </td>
-                      </tr>
-                    }
-                    </>
-                  </tbody>
-              </table>
+                                                            </div>
+                                                        </td>
+                                                    </tr>
+                                                )
+                                            }
+                                        }
+                                    )
+                                    :
+                                    <tr className="py-2 border-t border-dashed border-slate-300">
+                                        <td className="px-3 py-2" colSpan={4}>
+                                            <div className="flex justify-center items-center">
+                                                No Record Found
+                                            </div>
+                                        </td>
+                                    </tr>
+                                }
+                                <>
+                                    {dashData?.recent_transactions.length > 10 &&
+                                        <tr className="py-2 border-t border-dashed text-right text-primary border-slate-300">
+                                            <td className="px-3 py-2" colSpan={4}>
+                                                <Link to={RouteLinks.transactionsPage}
+                                                      className="flex justify-end items-center">
+                                                    More ...
+                                                </Link>
+                                            </td>
+                                        </tr>
+                                    }
+                                </>
+                                </tbody>
+                            </table>
 
-          </div>
+                        </div>
+                    </div>
+                </div>
+            }
         </div>
-      </div>
-      }
-    </div>
-  )
+    )
 }

src/components/layouts/DashboardHeader.jsx

@@ -57,6 +57,8 @@ export default function DashboardHeader() {
                     <div onClick={()=>handleActiveMenu('avatar')} className='relative cursor-pointer w-10 h-10 rounded shadow-round_black dark:shadow-round_white'>
                         <img src={UserAvatar} alt='user avatar' className='w-full h-full p-1 rounded-full' />
                         {activeMenu == 'avatar' &&
+                        <>
+                            <div className="fixed top-0 left-0 right-0 bottom-0 bg-black/10"></div>
                             <div className="pop-modal z-[777] absolute p-4 w-52 sm:w-96 bg-white dark:bg-black-box right-0 top-16 rounded shadow-round_black dark:shadow-round_white">
                                 <div className="w-full h-full flex flex-col gap-4">
                                     <div className="flex flex-col text-black dark:text-white text-base sm:text-lg">
@@ -74,6 +76,7 @@ export default function DashboardHeader() {
                                     </div>
                                 </div>
                             </div>
+                        </>
                         }
                     </div>
                 </div>

src/components/layouts/aside/DashboardAside.jsx

@@ -9,6 +9,7 @@ import { generalLayoutContext } from "../../../context/GeneralLayoutContext";
 import { TbLogout2 } from "react-icons/tb";
 import UserAvatar from '../../../assets/user_avatar.jpg'
 import Icons from "../../Icons";
+import localImgLoader from '../../../helpers/localImageLoader';
 
 export default function DashboardAside() {
 
@@ -22,7 +23,8 @@ export default function DashboardAside() {
   return (
     <div className='w-full h-full flex flex-col'>
         <div className="mb-3 w-full h-24 logo flex items-center">
-            <DummyLogo />
+            {/* <DummyLogo /> */}
+            <img className='w-2/3 h-auto' src={localImgLoader('simbrella-bko-logo.png')} />
         </div>
         {/* <hr className="border-slate-400" /> */}
 

src/components/layouts/rightaside/Orders.jsx

@@ -1,78 +1,33 @@
 import React from 'react'
-import Img from '../../../assets/user_avatar.jpg'
+import {Link} from 'react-router-dom'
+import Img from '../../../assets/loans.png'
+import formatNumber from '../../../helpers/formatNumber'
 import CustomCounter from '../../CustomCounter'
+import RouteLinks from '../../../RouteLinks'
 
-export default function Orders() {
+export default function Orders({data}) {
     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>
-                <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'>
-                        <CustomCounter targetNumber={18} timeInSeconds={1} />
-                        </p>
-                        <p className='text-sm text-slate-500'>Pending</p>
-                    </div>
-                    <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'>
-                        <CustomCounter targetNumber={5} timeInSeconds={1} />
-                        </p>
-                        <p className='text-sm text-slate-500'>Approved</p>
-                    </div>
-                    <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'>
-                        <CustomCounter targetNumber={1} timeInSeconds={1} />
-                        </p>
-                        <p className='text-sm text-slate-500'>Rejected</p>
-                    </div>
-                    <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'>
-                        <CustomCounter targetNumber={1} timeInSeconds={1} />
-                        </p>
-                        <p className='text-sm text-slate-500'>Created</p>
-                    </div>
-                </div>
-            </div>
+        <div className='h-full 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 Loans</p>
                 <div className='flex flex-col gap-4'>
-                    <div className='flex gap-3 items-center'>
-                        <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
-                            <img src={Img} className='w-8' alt="Order Image" />
-                        </div>
-                        <div className='flex-col'>
-                            <p className='text-base font-bold text-white-body'>Project Briefing</p>
-                            <p className='text-sm text-slate-500'>Project Manager</p>
-                        </div>
-                    </div>
-                    <div className='flex gap-3 items-center'>
-                        <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
-                            <img src={Img} className='w-8' alt="Order Image" />
-                        </div>
-                        <div className='flex-col'>
-                            <p className='text-base font-bold text-white-body'>Project Briefing</p>
-                            <p className='text-sm text-slate-500'>Project Manager</p>
-                        </div>
-                    </div>
-                    <div className='flex gap-3 items-center'>
-                        <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
-                            <img src={Img} className='w-8' alt="Order Image" />
-                        </div>
-                        <div className='flex-col'>
-                            <p className='text-base font-bold text-white-body'>Project Briefing</p>
-                            <p className='text-sm text-slate-500'>Project Manager</p>
-                        </div>
-                    </div>
-                    <div className='flex gap-3 items-center'>
-                        <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
-                            <img src={Img} className='w-8' alt="Order Image" />
-                        </div>
-                        <div className='flex-col'>
-                            <p className='text-base font-bold text-white-body'>Project Briefing</p>
-                            <p className='text-sm text-slate-500'>Project Manager</p>
-                        </div>
-                    </div>
+                    {data.map((item, index)=>{
+                        return (
+                            <Link 
+                                to={RouteLinks.transaction_details_page}
+                                state={{transactionID: item?.transaction_id}}
+                                key={index} className='flex gap-3 items-center'
+                            >
+                                <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
+                                    <img src={Img} className='w-8' alt="Order Image" />
+                                </div>
+                                <div className='flex-col'>
+                                    <p className='text-sm font-bold text-white-body'>{item?.customer_id}</p>
+                                    <p className='text-sm text-slate-500'>{formatNumber(item?.current_loan_amount)}</p>
+                                </div>
+                            </Link>
+                        )
+                    })}
                 </div>
             </div>
         </div>

src/components/layouts/rightaside/RightAsideBar.jsx

@@ -1,4 +1,7 @@
 import React, { useState } from 'react'
+import { useQuery } from "@tanstack/react-query";
+import queryKeys from '../../../services/queryKeys'
+import { getRecentLoans } from '../../../services/siteServices'
 import Icons from '../../Icons'
 import Orders from './Orders'
 import Tickets from './Tickets'
@@ -13,25 +16,41 @@ export default function RightAsideBar() {
         setActive(lowerStr)
     }
 
-  return (
-    <div className='w-full h-full flex flex-col gap-8'>
-        {/* Menu */}
-        <div className='grid grid-cols-3 gap-8'>
-            <button name='orders' onClick={() => handleActiveMenu('orders')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'orders' && 'scale-[1.2]'}`}>
-                <Icons name='dashboard' className='text-3xl' />
-            </button>
-            <button name='tickets' onClick={() => handleActiveMenu('tickets')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'tickets' && 'scale-[1.2]'}`}>
-                <Icons name='settings' className='text-3xl' />
-            </button>
-            <button name='tasks' onClick={() => handleActiveMenu('tasks')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'tasks' && 'scale-[1.2]'}`}>
-                <Icons name='dashboard' className='text-3xl' />
-            </button>
-        </div>
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.recent_loans,
+        queryFn: () => getRecentLoans()
+    })
 
-        {/* Body */}
-        {active == 'orders' && <Orders />}
-        {active == 'tickets' && <Tickets />}
-        {active == 'tasks' && <Tasks />}
-    </div>
-  )
+    const loanList = data?.data?.loans
+
+    return (
+        <div className='w-full h-full flex flex-col gap-8'>
+            {/* Menu */}
+            <div className='grid grid-cols-3 gap-8'>
+                <button name='orders' onClick={() => handleActiveMenu('orders')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'orders' && 'scale-[1.2]'}`}>
+                    <Icons name='dashboard' className='text-3xl' />
+                </button>
+                {/*<button name='tickets' onClick={() => handleActiveMenu('tickets')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'tickets' && 'scale-[1.2]'}`}>*/}
+                {/*    <Icons name='settings' className='text-3xl' />*/}
+                {/*</button>*/}
+                {/*<button name='tasks' onClick={() => handleActiveMenu('tasks')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'tasks' && 'scale-[1.2]'}`}>*/}
+                {/*    <Icons name='dashboard' className='text-3xl' />*/}
+                {/*</button>*/}
+            </div>
+
+            {/* Body */}
+            {(isFetching || isError) ?
+                <div className=''>
+                    {isError ? <p className='p-8 bg-white text-red-500'>{error.message}</p> :
+                        <p className='text-white'>Loading...</p>}
+                </div>
+                :
+                <div className='w-full'>
+                    {active === 'orders' && <Orders data={loanList} />}
+                    {/*{active == 'tickets' && <Tickets />}*/}
+                    {/*{active == 'tasks' && <Tasks />}*/}
+                </div>
+            }
+        </div>
+    )
 }

src/components/loan_charges/LoanChargesCom.jsx

@@ -1,111 +1,167 @@
-import React, { useState } from 'react'
-import { useQuery } from "@tanstack/react-query";
+import {useEffect, useState} from 'react'
 
 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 {getLoanCharges} from '../../services/siteServices'
 import getDateFromDateString from '../../helpers/GetDateFromDateString';
-import formatNumber from '../../helpers/formatNumber';
+import formatNumber from '../../helpers/formatNumber'
+import Avatar from '../../assets/repay.png'
 
-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({
-        queryKey: [...queryKeys.loan_charges, page],
-        queryFn: () => getLoanCharges({page}),
-        staleTime: 0,
-        // placeholderData: keepPreviousData,
-    })
+    const [willFilter, setWillFilter] = useState(false)
+    const [filter, setFilter] = useState({type: '', id: ''})
+    const handleFilter = ({target: {name, value}}) => {
+        setFilter(prev => ({...prev, [name]: value}))
+    }
 
-    const loanCharges = data?.data?.loan_charges // LOAN CHARGES LIST
-    const pagination = data?.data?.pagination
+    const handleFilterByParams = () => {
+        if (filter.type && !filter.id) {
+            return
+        } else if (!filter.type) {
+            setPage(1)
+            setWillFilter(prev => !prev)
+            setFilter({type: '', id: ''})
+        } else {
+            setPage(1)
+            setWillFilter(prev => !prev)
+        }
+    }
+
+    const loanCharges = allLoanCharges?.data?.loan_charges // LOAN CHARGES LIST
+    const pagination = allLoanCharges?.data?.pagination
+    const isFetching = allLoanCharges?.loading
+    const isError = allLoanCharges?.error
+
+    useEffect(() => {
+        setAllLoanCharges(prev => ({...prev, loading: true}))
+        const payload = filter?.type ? {[filter?.type]: filter.id} : {}
+        getLoanCharges({...payload, page}).then(res => {
+            if (res?.status != 200) {
+                setAllLoanCharges(prev => ({...prev, loading: false}))
+                return
+            }
+            setAllLoanCharges({loading: false, error: '', data: res?.data})
+        }).catch(err => {
+            setAllLoanCharges({loading: false, error: 'error occurred', data: {}})
+            console.log('ERR', err)
+        })
+    }, [page, willFilter])
 
     return (
         <div className='w-full flex flex-col gap-8'>
-            <BreadcrumbCom title='Loan Charges' paths={['Dashboard', 'Loan Charges']} />
+            <BreadcrumbCom title='Charges' paths={['Dashboard', '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">
+                {isError ?
+                    <p className='text-red-500'>{allLoanCharges?.error}</p>
+                    :
+                    <>
+                        {/* filter section */}
+                        <div className='px-2 py-2 mb-4 flex flex-col sm:flex-row flex-wrap sm:items-center gap-2'>
+                            <Icons name='filter' className='text-3xl'/>
+                            <div className='w-full sm:max-w-48'>
+                                <select name='type' value={filter?.type} className='h-10 w-full p-2 rounded-md'
+                                        onChange={handleFilter}>
+                                    <option value=''>All</option>
+                                    <option value='transaction_id'>Transaction ID</option>
+                                    <option value='account_id'>Account ID</option>
+                                </select>
+                            </div>
+                            <div className='w-full sm:max-w-48'>
+                                <input name='id' value={filter?.id} disabled={!filter.type}
+                                       className={`h-10 w-full p-2 rounded-md outline-none border border-black-aside ${!filter.type && 'opacity-30'}`}
+                                       onChange={handleFilter}/>
+                            </div>
+                            <button onClick={handleFilterByParams} disabled={filter.type && !filter.id}
+                                    className={`h-10 bg-primary px-2 py-1 rounded-md text-white font-medium sm:self-end ${(filter.type && !filter.id) && 'opacity-50'}`}>Submit
+                            </button>
+                        </div>
+                        {/* end of filter section */}
+
+                        <TablePaginatedWrapper data={loanCharges} isFetching={isFetching} setPage={setPage}
+                                               itemsPerPage={pagination?.limit} pagination={pagination}>
+                            {({data}) => (
+                                <>
+                                    <table className="py-2 w-full text-sm">
+                                        <thead className="py-2 text-sm text-slate-500 text-left">
+                                        <tr>
+                                            <th scope="col" className="px-2 py-2">
+                                                TransactionID/Fee Type
+                                            </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>
+                                            <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>
-                                    ))
-                                    :
-                                    <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>
+                                        </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-semibold text-green-500">#{formatNumber(item?.amount)}</div>
+                                                        </div>
+                                                    </td>
+                                                    <td className="px-2">
+                                                        <div className="text-right">
+                                                            <div
+                                                                className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</div>
+                                                        </div>
+                                                    </td>
+                                                    <td className="px-2 text-right">
+                                                        <div className='flex items-center justify-end gap-3 md:gap-4'>
+                                                            <div
+                                                                className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
+                                                                <Icons name='eye'/>
+                                                            </div>
+                                                        </div>
+                                                    </td>
+                                                </tr>
+                                            ))
+                                            :
+                                            <tr className="py-2 border-t border-dashed border-slate-300">
+                                                <td className="px-3 py-2" colSpan={4}>
+                                                    <div className="flex justify-center items-center">
+                                                        No Record Found
+                                                    </div>
+                                                </td>
+                                            </tr>
+                                        }
+                                        </tbody>
+                                    </table>
+                                </>
+                            )}
+                        </TablePaginatedWrapper>
+                    </>
                 }
             </div>
         </div>

src/components/loan_charges/_LoanChargesCom.jsx

@@ -0,0 +1,119 @@
+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' style={{backgroundColor: 'aliceblue'}}>
+            <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'>
+                                                            <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,130 +1,191 @@
-import React, { useState } from 'react'
-import { useQuery } from "@tanstack/react-query";
+import {useEffect, useState} from 'react'
 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 {getLoans} from '../../services/siteServices'
 import getDateFromDateString from '../../helpers/GetDateFromDateString';
-import formatNumber from '../../helpers/formatNumber'
+import Avatar from '../../assets/loans.png'
 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({
-        queryKey: [...queryKeys.loans, page],
-        queryFn: () => getLoans({page}),
-        staleTime: 0,
-    })
+    const [willFilter, setWillFilter] = useState(false)
+    const [filter, setFilter] = useState({type: '', id: ''})
+    const handleFilter = ({target: {name, value}}) => {
+        setFilter(prev => ({...prev, [name]: value}))
+    }
+
+    const handleFilterByParams = () => {
+        if (filter.type && !filter.id) {
+            return
+        } else if (!filter.type) {
+            setPage(1)
+            setWillFilter(prev => !prev)
+            setFilter({type: '', id: ''})
+        } else {
+            setPage(1)
+            setWillFilter(prev => !prev)
+        }
+    }
 
     const loans = allLoans?.data?.loans // LOANS LIST
     const pagination = allLoans?.data?.pagination
+    const isFetching = allLoans?.loading
+    const isError = allLoans?.error
+
+    useEffect(() => {
+        setAllLoans(prev => ({...prev, loading: true}))
+        const payload = filter?.type ? {[filter?.type]: filter.id} : {}
+        getLoans({...payload, page}).then(res => {
+            if (res?.status != 200) {
+                setAllLoans(prev => ({...prev, loading: false}))
+                return
+            }
+            setAllLoans({loading: false, error: '', data: res?.data})
+        }).catch(err => {
+            setAllLoans({loading: false, error: 'error occurred', data: {}})
+            console.log('ERR', err)
+        })
+    }, [page, willFilter])
 
     return (
         <div className='w-full flex flex-col gap-8'>
-            <BreadcrumbCom title='Loans' paths={['Dashboard', 'Loans']} />
+            <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>
+                {isError ?
+                    <p className='text-red-500'>{allLoans?.error}</p>
+                    :
+                    <>
+                        {/* filter section */}
+                        <div className='px-2 py-2 mb-4 flex flex-col sm:flex-row flex-wrap sm:items-center gap-2'>
+                            <Icons name='filter' className='text-3xl'/>
+                            <div className='w-full sm:max-w-48'>
+                                <select name='type' value={filter?.type} className='h-10 w-full p-2 rounded-md'
+                                        onChange={handleFilter}>
+                                    <option value=''>All</option>
+                                    <option value='transaction_id'>Transaction ID</option>
+                                    <option value='account_id'>Account ID</option>
+                                </select>
+                            </div>
+                            <div className='w-full sm:max-w-48'>
+                                <input name='id' value={filter?.id} disabled={!filter.type}
+                                       className={`h-10 w-full p-2 rounded-md outline-none border border-black-aside ${!filter.type && 'opacity-30'}`}
+                                       onChange={handleFilter}/>
+                            </div>
+                            <button onClick={handleFilterByParams} disabled={filter.type && !filter.id}
+                                    className={`h-10 bg-primary px-2 py-1 rounded-md text-white font-medium sm:self-end ${(filter.type && !filter.id) && 'opacity-50'}`}>Submit
+                            </button>
+                        </div>
+                        {/* end of filter section */}
+
+                        <TablePaginatedWrapper data={loans} isFetching={isFetching} setPage={setPage}
+                                               itemsPerPage={pagination?.limit} pagination={pagination}>
+                            {({data}) => (
+                                <>
+                                    <table className="table-auto py-2 w-full text-sm">
+                                        <thead className="py-2 text-sm text-slate-500 text-left">
+                                        <tr>
+                                            <th scope="col" className="px-2 py-2">
+                                                Name
+                                            </th>
+                                            <th scope="col" className="px-2 text-right">
+                                                Loan Amount
+                                            </th>
+                                            <th scope="col" className="px-2 text-right">
+                                                Product/Tenor
+                                            </th>
+                                            <th scope="col" className="px-2 text-right">
+                                                Repay/Install Amount
+                                            </th>
+                                            <th scope="col" className="px-2 text-right">
+                                                Added
+                                            </th>
+                                            <th scope="col" className="px-2 text-right">
+                                                Action
+                                            </th>
                                         </tr>
-                                    ))
-                                    :
-                                    <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>
+                                        </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-semibold text-green-500">#{formatNumber(item?.initial_loan_amount)}</div>
+                                                            <div className="font-normal text-red-500">{item?.status}</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-red-500">{item?.tenor} days
+                                                            </div>
+                                                        </div>
+                                                    </td>
+                                                    <td className="px-2">
+                                                        <div className="text-right">
+                                                            <div
+                                                                className="font-normal text-gray-500">{formatNumber(item?.repayment_amount)}</div>
+                                                            <div
+                                                                className="font-normal text-gray-500">{formatNumber(item?.installment_amount)}</div>
+                                                        </div>
+                                                    </td>
+                                                    <td className="px-2">
+                                                        <div className="text-right">
+                                                            <div
+                                                                className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</div>
+                                                        </div>
+                                                    </td>
+                                                    <td className="px-2 text-right">
+                                                        <div className='flex items-center justify-end gap-3 md:gap-4'>
+                                                            <div
+                                                                className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
+                                                                <Link to={RouteLinks.transaction_details_page}
+                                                                      state={{transactionID: item?.transaction_id}}>
+                                                                    <Icons name='eye'/>
+                                                                </Link>
+                                                            </div>
+                                                        </div>
+                                                    </td>
+                                                </tr>
+                                            ))
+                                            :
+                                            <tr className="py-2 border-t border-dashed border-slate-300">
+                                                <td className="px-3 py-2" colSpan={6}>
+                                                    <div className="flex justify-center items-center">
+                                                        No Record Found
+                                                    </div>
+                                                </td>
+                                            </tr>
+                                        }
+                                        </tbody>
+                                    </table>
+                                </>
+                            )}
+                        </TablePaginatedWrapper>
+                    </>
                 }
             </div>
         </div>

src/components/loanscom/_LoansCom.jsx

@@ -0,0 +1,132 @@
+import React, { useState } from 'react'
+import { useQuery } from "@tanstack/react-query";
+import {Link} from 'react-router-dom'
+
+import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
+// import TableWrapper from '../tableWrapper/TableWrapper'
+import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper';
+import Icons from '../Icons'
+
+import Avatar from '../../assets/user_avatar.jpg'
+import queryKeys from '../../services/queryKeys'
+import { getLoans } from '../../services/siteServices'
+import getDateFromDateString from '../../helpers/GetDateFromDateString';
+import formatNumber from '../../helpers/formatNumber'
+import RouteLinks from '../../RouteLinks';
+
+export default function LoansCom() {
+
+    const [page, setPage] = useState(1)
+
+    const {data:allLoans, isFetching, isError, error} = useQuery({
+        queryKey: [...queryKeys.loans, page],
+        queryFn: () => getLoans({page}),
+        staleTime: 0,
+    })
+
+    const loans = allLoans?.data?.loans // LOANS LIST
+    const pagination = allLoans?.data?.pagination
+
+    return (
+        <div className='w-full flex flex-col gap-8'>
+            <BreadcrumbCom title='Loans' paths={['Dashboard', 'Loans']} />
+
+            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+                {isFetching ? 
+                <>
+                    <p className='text-slate-800'>Loading...</p>
+                </>
+                : isError ?
+                    <p className='text-red-500'>{error.message}</p>
+                :
+                    <TablePaginatedWrapper data={loans} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
+                    {({ data }) => (
+                        <>
+                            <table className="table-auto py-2 w-full text-sm">
+                                <thead className="py-2 text-sm text-slate-500 text-left">
+                                    <tr>
+                                        <th scope="col" className="px-2 py-2">
+                                            Name
+                                        </th>
+                                        <th scope="col" className="px-2 text-right">
+                                            Loan Amount
+                                        </th>
+                                        <th scope="col" className="px-2 text-right">
+                                            Product/Tenor
+                                        </th>
+                                        <th scope="col" className="px-2 text-right">
+                                            Repay/Install Amount
+                                        </th>
+                                        <th scope="col" className="px-2 text-right">
+                                            Added
+                                        </th>
+                                        <th scope="col" className="px-2 text-right">
+                                            Action
+                                        </th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {(data && data.length > 0) ? data?.map((item, index) => (
+                                        <tr key={index} className="py-2 border-t border-dashed border-slate-300">
+                                            <td className="px-2 py-2">
+                                                <div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
+                                                <img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />
+                                                <div className="text-left">
+                                                    <div className="text-base font-semibold">{item?.account_id || ''}</div>
+                                                    <div className="font-normal text-gray-500">{item?.id} : {item?.transaction_id}</div>
+                                                </div>  
+                                                </div>
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-right">
+                                                    {/* <div className="text-base font-semibold">{formatNumber(item?.initial_loan_amount)}</div> */}
+                                                    <div className="font-normal text-gray-500">{formatNumber(item?.initial_loan_amount)}</div>
+                                                </div> 
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-right">
+                                                    <div className="font-normal text-gray-500">{formatNumber(item?.product_id)}</div>
+                                                    <div className="font-normal text-gray-500">{item?.tenor} days</div>
+                                                </div> 
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-right">
+                                                    <div className="font-normal text-gray-500">{formatNumber(item?.repayment_amount)}</div>
+                                                    <div className="font-normal text-gray-500">{formatNumber(item?.installment_amount)}</div>
+                                                </div> 
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-right">
+                                                    <div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</div>
+                                                </div> 
+                                            </td>
+                                            <td className="px-2 text-right">
+                                                <div className='flex items-center justify-end gap-3 md:gap-4'>
+                                                    <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
+                                                        <Link to={RouteLinks.transaction_details_page} state={{transactionID: item?.transaction_id}}>
+                                                            <Icons name='eye' />
+                                                        </Link>
+                                                    </div>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    ))
+                                    :
+                                    <tr className="py-2 border-t border-dashed border-slate-300">
+                                        <td className="px-3 py-2" colSpan={6}>
+                                            <div className="flex justify-center items-center">
+                                                No Record Found
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    }
+                                </tbody>
+                            </table>
+                        </>
+                    )}
+                    </TablePaginatedWrapper>
+                }
+            </div>
+        </div>
+    )
+}

src/components/offers/OffersCom.jsx

@@ -44,7 +44,10 @@ export default function OffersCom() {
                             <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">
+                                        <th scope="col" className="px-1 py-1">
+                                            ID
+                                        </th>
+                                        <th scope="col" className="px-1 py-1">
                                             Name
                                         </th>
                                         <th scope="col" className="px-2 text-right">
@@ -53,26 +56,34 @@ export default function OffersCom() {
                                         <th scope="col" className="px-2 text-right">
                                             Insurance Rate
                                         </th>
-                                        <th scope="col" className="px-2 text-right">
+                                        <th scope="col" className="px-1 text-right">
                                             Mgt. Rate
                                         </th>
+                                        <th scope="col" className="px-1 text-right">
+                                            Vat. Rate
+                                        </th>
                                         <th scope="col" className="px-2 text-right">
                                             Max/Min Amount
                                         </th>
                                         <th scope="col" className="px-2 text-right">
                                             Tenor
                                         </th>
-                                        <th scope="col" className="px-2 text-right">
-                                            Action
-                                        </th>
+                                        {/*<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">
+                                                <div className="text-right">
+                                                    <div className="font-normal text-gray-500">{item?.id || ''}</div>
+                                                </div>
+                                            </td>
                                             <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" />
+                                                {/*<img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />*/}
                                                 <div className="text-left">
                                                     <div className="text-base font-semibold">{item?.product_id || ''}</div>
                                                     {/* <div className="font-normal text-gray-500 line-clamp-1">{item?.description}</div> */}
@@ -89,15 +100,20 @@ export default function OffersCom() {
                                                     <div className="font-normal text-gray-500">{formatNumber(item?.insurance_rate)}</div>
                                                 </div> 
                                             </td>
-                                            <td className="px-2">
+                                            <td className="px-1">
                                                 <div className="text-right">
                                                     <div className="font-normal text-gray-500">{formatNumber(item?.management_rate)}</div>
                                                 </div> 
                                             </td>
+                                            <td className="px-1">
+                                                <div className="text-right">
+                                                    <div className="font-normal text-gray-500">{formatNumber(item?.vat_rate)}</div>
+                                                </div>
+                                            </td>
                                             <td className="px-2">
                                                 <div className="text-right">
-                                                    <div className="font-normal text-gray-500">{formatNumber(item?.maximum_amount)}</div>
-                                                    <div className="font-normal text-gray-500">{formatNumber(item?.minimum_amount)}</div>
+                                                    <div className="font-normal text-gray-500">{formatNumber(item?.max_amount)}</div>
+                                                    <div className="font-normal text-gray-500">{formatNumber(item?.min_amount)}</div>
                                                 </div> 
                                             </td>
                                             <td className="px-2">
@@ -105,13 +121,13 @@ export default function OffersCom() {
                                                     <div className="font-normal text-gray-500">{item?.tenor}</div>
                                                 </div> 
                                             </td>
-                                            <td className="px-2 text-right">
-                                                <div className='flex items-center justify-end gap-3 md:gap-4'>
-                                                    <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
-                                                        <Icons name='eye' />
-                                                    </div>
-                                                </div>
-                                            </td>
+                                            {/*<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>
                                     ))
                                     :

src/components/repayments/RepaymentsCom.jsx

@@ -1,107 +1,174 @@
-import React, { useState } from 'react'
-import { useQuery } from "@tanstack/react-query";
+import {useEffect, useState} from 'react'
 
 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 {getRepayments} from '../../services/siteServices'
 import getDateFromDateString from '../../helpers/GetDateFromDateString';
+import Avatar from '../../assets/loans2.png';
+
 
 export default function RepaymentsCom() {
 
     const [page, setPage] = useState(1)
+    const [allRepayments, setAllRepayments] = useState({loading: true, error: '', data: {}})
 
-    const {data, isFetching, isError, error} = useQuery({
-        queryKey: [...queryKeys.transactions, page],
-        queryFn: () => getRepayments({page}),
-        staleTime: 0,
-        // placeholderData: keepPreviousData,
-    })
+    const [willFilter, setWillFilter] = useState(false)
+    const [filter, setFilter] = useState({type: '', id: ''})
+    const handleFilter = ({target: {name, value}}) => {
+        setFilter(prev => ({...prev, [name]: value}))
+    }
 
-    const repayments = data?.data?.repayments // REPAYMENTS LIST
-    const pagination = data?.data?.pagination
+    const handleFilterByParams = () => {
+        if (filter.type && !filter.id) {
+            return
+        } else if (!filter.type) {
+            setPage(1)
+            setWillFilter(prev => !prev)
+            setFilter({type: '', id: ''})
+        } else {
+            setPage(1)
+            setWillFilter(prev => !prev)
+        }
+    }
+
+    const repayments = allRepayments?.data?.repayments // LOAN REPAYMENTS LIST
+    const pagination = allRepayments?.data?.pagination
+    const isFetching = allRepayments?.loading
+    const isError = allRepayments?.error
+
+    useEffect(() => {
+        setAllRepayments(prev => ({...prev, loading: true}))
+        const payload = filter?.type ? {[filter?.type]: filter.id} : {}
+        getRepayments({...payload, page}).then(res => {
+            if (res?.status != 200) {
+                setAllRepayments(prev => ({...prev, loading: false}))
+                return
+            }
+            setAllRepayments({loading: false, error: '', data: res?.data})
+        }).catch(err => {
+            setAllRepayments({loading: false, error: 'error occurred', data: {}})
+            console.log('ERR', err)
+        })
+    }, [page, willFilter])
 
     return (
         <div className='w-full flex flex-col gap-8'>
-            <BreadcrumbCom title='Repayments' paths={['Dashboard', 'Repayments']} />
+            <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">
+                {isError ?
+                    <p className='text-red-500'>{allRepayments?.error}</p>
+                    :
+                    <>
+                        {/* filter section */}
+                        <div className='px-2 py-2 mb-4 flex flex-col sm:flex-row flex-wrap sm:items-center gap-2'>
+                            <Icons name='filter' className='text-3xl'/>
+                            <div className='w-full sm:max-w-48'>
+                                <select name='type' value={filter?.type} className='h-10 w-full p-2 rounded-md'
+                                        onChange={handleFilter}>
+                                    <option value=''>All</option>
+                                    <option value='transaction_id'>Transaction ID</option>
+                                    <option value='account_id'>Account ID</option>
+                                </select>
+                            </div>
+                            <div className='w-full sm:max-w-48'>
+                                <input name='id' value={filter?.id} disabled={!filter.type}
+                                       className={`h-10 w-full p-2 rounded-md outline-none border border-black-aside ${!filter.type && 'opacity-30'}`}
+                                       onChange={handleFilter}/>
+                            </div>
+                            <button onClick={handleFilterByParams} disabled={filter.type && !filter.id}
+                                    className={`h-10 bg-primary px-2 py-1 rounded-md text-white font-medium sm:self-end ${(filter.type && !filter.id) && 'opacity-50'}`}>Submit
+                            </button>
+                        </div>
+                        {/* end of filter section */}
+
+                        <TablePaginatedWrapper data={repayments} isFetching={isFetching} setPage={setPage}
+                                               itemsPerPage={pagination?.limit} pagination={pagination}>
+                            {({data}) => (
+                                <>
+                                    <table className="py-2 w-full text-sm">
+                                        <thead className="py-2 text-sm text-slate-500 text-left">
+                                        <tr>
+                                            <th scope="col" className="px-2 py-2">
+                                                CustomerID / ID:TrxID
+                                            </th>
+                                            <th scope="col" className="px-8 ">
+                                                Descriptions
+                                            </th>
+                                            <th scope="col" className="px-2 text-right">
+                                                Date/Result Codes
+                                            </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-blue-500">{item?.loan_id} :<b> {item?.transaction_id}</b>
+                                                                </div>
+                                                                <div
+                                                                    className="font-normal text-red-500">{item?.initiated_by}
+                                                                </div>
+                                                                <div
+                                                                    className="font-normal text-green-500"><b> {item?.product_id}</b>
+                                                                </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' />
+                                                    <td className="px-8">
+                                                        <div className="text-left">
+
+                                                            <div className="font-normal text-gray-500">Repay Date : {getDateFromDateString(item?.repay_date)}</div>
+
+                                                            <div className="font-normal">Repay Desc : {item?.repay_description || ''}</div>
+
+                                                            <div className="font-normal text-gray-500">Verify Repay Date : {getDateFromDateString(item?.verify_date)}</div>
+
+                                                            <div className="font-normal">Verify Repay Desc : {item?.verify_description || ''}</div>
+
+
+
+                                                        </div>
+                                                    </td>
+                                                    <td className="px-2 text-right">
+                                                        <div className="text-left">
+                                                            <div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</div>
+                                                            <div className="font-normal text-red-500">Repay Result :{item?.repay_result || ''}</div>
+                                                            <div className="font-normal text-blue-500">Verify Repay Result :{item?.verify_result || ''}</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>
-                                                </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>
+                                                </td>
+                                            </tr>
+                                        }
+                                        </tbody>
+                                    </table>
+                                </>
+                            )}
+                        </TablePaginatedWrapper>
+                    </>
                 }
             </div>
         </div>

src/components/repayments/_RepaymentsCom.jsx

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

src/components/tableWrapper/TablePaginatedWrapper.jsx

@@ -17,7 +17,7 @@ export default function TablePaginatedWrapper({
   const handleNext = () => {
     setPage(prev => prev + 1)
   };
-console.log('isFetching', isFetching)
+
   return (
     <div className="relative w-full">
       <div className="flex flex-col">

src/components/transactionDetails/LoanChargeDetails.jsx

@@ -14,7 +14,7 @@ export default function LoanChargeDetails({transactionID}) {
     const [page, setPage] = useState(1)
 
     const {data, isFetching, isError, error} = useQuery({
-        queryKey: [...queryKeys.loan_charges, page],
+        queryKey: [...queryKeys.loan_charges, page, transactionID],
         queryFn: () => getLoanCharges({transaction_id: transactionID, page}),
         staleTime: 0,
         // placeholderData: keepPreviousData,
@@ -24,7 +24,7 @@ export default function LoanChargeDetails({transactionID}) {
     // const pagination = data?.data?.pagination
 
     return (
-        <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+        <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body' style={{backgroundColor: 'aliceblue'}}>
             <p className='pb-4 font-bold text-base'>Loan Charges</p>
             {isFetching ? 
             <>
@@ -58,7 +58,7 @@ export default function LoanChargeDetails({transactionID}) {
                             <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" />
+                                    {/*<img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />*/}
                                     <div className="text-left">
                                         <div className="text-base font-semibold">{item?.transaction_id || ''}</div>
                                         {/* <div className="font-normal text-gray-500 line-clamp-1">{item?.description}</div> */}

src/components/transactionDetails/LoanDetails.jsx

@@ -1,118 +1,251 @@
-import React from 'react'
-import { useQuery } from "@tanstack/react-query";
+import React, { useState } from 'react'
+import {useQuery} from "@tanstack/react-query";
 
 import Icons from '../Icons'
 
-import Avatar from '../../assets/user_avatar.jpg'
+import Avatar from '../../assets/loans.png'
 import queryKeys from '../../services/queryKeys'
-import { getLoans } from '../../services/siteServices'
+import {getLoans} from '../../services/siteServices'
 import getDateFromDateString from '../../helpers/GetDateFromDateString';
 import formatNumber from '../../helpers/formatNumber'
+import getTimeFromDateString from "../../helpers/GetTimeFromDateString";
+import {initiateDisburseRetrials, initiateDisburseVerify} from "../../services/siteEventService"
+import ModalWrapper from '../modals/ModalWrapper';
+import MainBtn from '../MainBtn';
 
 export default function LoanDetails({transactionID}) {
 
-    const {data:allLoans, isFetching, isError, error} = useQuery({
-        queryKey: queryKeys.loans,
+    const [retryDisbursementModal, setRetryDisbursementModal] = useState({})
+    const [retryVerifyModal, setRetryVerifyModal] = useState({})
+    const handleSetRetryDisbursementModal = (transactioID) => {
+        setRetryDisbursementModal({status:true, transactioID})
+    }
+    const closeRetryDisbursementModal = () => {setRetryDisbursementModal({})}
+
+    const handleSetRetryVerifyModal = (transactioID) => {
+        setRetryVerifyModal({status:true, transactioID})
+    }
+    const closeRetryVerifyModal = () => {setRetryVerifyModal({})}
+
+    const {data: allLoans, isFetching, isError, error} = useQuery({
+        queryKey: [...queryKeys.loans, transactionID],
         queryFn: () => getLoans({transaction_id: transactionID})
     })
 
     const loans = allLoans?.data?.loans // LOANS LIST
     // const loansCount = allLoans?.data?.count // LOANS LIST COUNT
 
+    const handleClick = (transactioID) => {
+        // alert(transactioID)
+        const fields = {
+            "transactionId": transactioID
+        }
+        closeRetryDisbursementModal() // CLOSES THE DISBURSEMENT MODAL
+        return initiateDisburseRetrials(fields)
+        // console.log('Button clicked!');
+    };
+
+    const handleRetryClick = (transactioID) => {
+        alert(transactioID)
+        const fields = {
+            "transactionId": transactioID
+        }
+        closeRetryVerifyModal() // CLOSES THE VERIFY MODAL
+        return initiateDisburseVerify(fields)
+        // console.log('Button clicked!');
+    };
+
+
     return (
         <>
-        {isFetching ? 
-            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
-                <p className='pb-4 font-bold text-base'>Loans</p>
-                <p className='text-slate-800'>Loading...</p>
-            </div>
-        : isError ?
-            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
-                <p className='pb-4 font-bold text-base'>Loans</p>
-                <p className='text-red-500'>{error.message}</p>
-            </div>
-        : (loans && loans.length > 0) ?
-            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
-                <p className='pb-4 font-bold text-base'>Loans</p>
-                <table className="table-auto py-2 w-full text-sm">
-                    <thead className="py-2 text-sm text-slate-500 text-left">
-                        <tr>
-                            <th scope="col" className="px-2 py-2">
-                                Name
-                            </th>
-                            <th scope="col" className="px-2 text-right">
-                                Loan/Eligible Amount
-                            </th>
-                            <th scope="col" className="px-2 text-right">
-                                Product/Tenor
-                            </th>
-                            <th scope="col" className="px-2 text-right">
-                                Repay/Install Amount.
-                            </th>
-                            <th scope="col" className="px-2 text-right">
-                                Added/Due
-                            </th>
-                            <th scope="col" className="px-2 text-right">
-                                Action
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {loans?.map((item, index) => (
-                            <tr key={index} className="py-2 border-t border-dashed border-slate-300">
-                                <td className="px-2 py-2">
-                                    <div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
-                                    <img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />
-                                    <div className="text-left">
-                                        <div className="text-base font-semibold">{item?.account_id || ''}</div>
-                                        <div className="font-normal text-gray-500">{item?.id} : {item?.transaction_id}</div>
-                                        <div className="font-semibold text-red-500">ORIGIN : {item?.original_transaction}</div>
-                                        <div className="font-bold text-blue-500">OFFER : {item?.offer_id}</div>
-                                    </div>  
-                                    </div>
-                                </td>
-                                <td className="px-2">
-                                    <div className="text-right">
-                                        {/* <div className="text-base font-semibold">{formatNumber(item?.initial_loan_amount)}</div> */}
-                                        <div className="font-normal text-gray-500">{formatNumber(item?.initial_loan_amount)}</div>
-                                        <div className="font-semibold text-red-500">{formatNumber(item?.eligible_amount)}</div>
+            {isFetching ?
+                <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+                    <p className='pb-4 font-bold text-base'>Loans</p>
+                    <p className='text-slate-800'>Loading...</p>
+                </div>
+                : isError ?
+                    <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+                        <p className='pb-4 font-bold text-base'>Loans</p>
+                        <p className='text-red-500'>{error.message}</p>
+                    </div>
+                    : (loans && loans.length > 0) ?
+                        <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'
+                             style={{backgroundColor: '#f7d9e3'}}>
+                            <p className='pb-4 font-bold text-base'>Loan</p>
+                            <table className="table-auto py-2 w-full text-sm">
+                                <thead className="py-2 text-sm text-slate-500 text-left">
+                                <tr>
+                                    <th scope="col" className="px-2 py-2">
+                                        Name
+                                    </th>
+                                    <th scope="col" className="px-2 text-right">
+                                        Loan/Eligible Amount
+                                    </th>
+                                    <th scope="col" className="px-2 text-right">
+                                        Product/Tenor
+                                    </th>
+                                    <th scope="col" className="px-2 text-right">
+                                        Repay/Install Amount.
+                                    </th>
+                                    <th scope="col" className="px-2 text-right">
+                                        Added/Due
+                                    </th>
+                                    <th scope="col" className="px-2 text-right">
+                                        Status
+                                    </th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                {loans?.map((item, index) => (
+                                    <>
+                                        <tr key={index} className="py-2 border-t border-dashed border-slate-300">
+                                            <td className="px-2 py-2">
+                                                <div
+                                                    className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
+                                                    <img className="w-10 h-10 rounded-md" src={Avatar}
+                                                         alt="Jese image"/>
+                                                    <div className="text-left">
+                                                        <div
+                                                            className="text-base font-semibold">{item?.account_id || ''}</div>
+                                                        <div
+                                                            className="font-normal text-gray-500">{item?.id} : {item?.transaction_id}</div>
+                                                        <div className="font-semibold text-red-500">ORIGIN
+                                                            : {item?.original_transaction}</div>
+                                                        <div className="font-bold text-blue-500">OFFER
+                                                            : {item?.offer_id}</div>
+                                                    </div>
+                                                </div>
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-right">
+                                                    {/* <div className="text-base font-semibold">{formatNumber(item?.initial_loan_amount)}</div> */}
+                                                    <div
+                                                        className="font-semibold text-green-500">#{formatNumber(item?.initial_loan_amount)}</div>
+                                                    <div
+                                                        className="font-semibold text-red-500">#{formatNumber(item?.eligible_amount)}</div>
 
-                                    </div> 
-                                </td>
-                                <td className="px-2">
-                                    <div className="text-right">
-                                        <div className="font-normal text-gray-500">{formatNumber(item?.product_id)}</div>
-                                        <div className="font-normal text-gray-500">{item?.tenor} days</div>
-                                    </div> 
-                                </td>
-                                <td className="px-2">
-                                    <div className="text-right">
-                                        <div className="font-normal text-gray-500">{formatNumber(item?.repayment_amount)}</div>
-                                        <div className="font-normal text-gray-500">{formatNumber(item?.installment_amount)}</div>
-                                    </div> 
-                                </td>
-                                <td className="px-2">
-                                    <div className="text-right">
-                                        <div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</div>
-                                        <div className="font-semibold text-red-500">{getDateFromDateString(item?.due_date)}</div>
-                                    </div> 
-                                </td>
-                                <td className="px-2 text-right">
-                                    <div className='flex items-center justify-end gap-3 md:gap-4'>
-                                        <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
-                                            <Icons name='eye' />
-                                        </div>
-                                    </div>
-                                </td>
-                            </tr>
-                        ))
-                        }
-                    </tbody>
-                </table>
-            </div>
-        :
-            null
-        }
+                                                </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-semibold text-gray-500">#{formatNumber(item?.repayment_amount)}</div>
+                                                    <div
+                                                        className="font-semibold text-red-500">#{formatNumber(item?.installment_amount)}</div>
+                                                </div>
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-right">
+                                                    <div
+                                                        className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</div>
+                                                    <div
+                                                        className="font-semibold text-red-500">{getDateFromDateString(item?.due_date)}</div>
+                                                </div>
+                                            </td>
+                                            <td className="px-2 text-right">
+                                                <div className="font-semibold  text-red-500">{item?.status}</div>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td colSpan="8">
+                                                <div>
+                                                    <div style={{display: 'flex'}}>
+                                                        <div style={{width: '50%'}}>
+                                                            <p className='pb-4 font-bold text-base'>Loans Disbursement
+                                                                Details</p>
+                                                        </div>
+                                                        <div style={{width: '50%', textAlign: 'right'}}>
+                                                            <button
+                                                                className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 roundede"
+                                                                // onClick={() => handleClick(item?.transaction_id)}>
+                                                                onClick={() => handleSetRetryDisbursementModal(item?.transaction_id)}>
+                                                                Retry Disbursement
+                                                            </button>
+                                                        </div>
+                                                    </div>
+
+                                                    <div className="font-bold text-blue-500">Disburse Date
+                                                        : {getDateFromDateString(item?.disburseDate)} {getTimeFromDateString(item?.disburseDate)} </div>
+                                                    <div className="font-bold text-gray-500">Disburse Description
+                                                        : {item?.disburseDescription}</div>
+                                                    <div className="font-bold text-red-500">Disburse Result
+                                                        : {item?.disburseResult}</div>
+                                                    <div><br/></div>
+                                                    <div style={{display: 'flex'}}>
+                                                        <div style={{width: '70%'}}>
+                                                            <div className="font-bold text-blue-500">Disburse Verify
+                                                                Date: {getDateFromDateString(item?.disburseVerify)} {getTimeFromDateString(item?.disburseVerify)} </div>
+                                                            <div className="font-bold text-gray-500">Verify Description
+                                                                : {item?.verifyDescription}</div>
+                                                            <div className="font-bold text-red-500">Verify Result
+                                                                : {item?.verifyResult}</div>
+                                                        </div>
+                                                        <div style={{width: '30%', textAlign: 'right'}}>
+                                                            <button
+                                                                className="bg-blue-500 hover:bg-red-700 text-white font-bold py-2 px-4 roundede"
+                                                                onClick={() => handleSetRetryVerifyModal(item?.transaction_id)}>
+                                                                Retry Verification
+                                                            </button>
+                                                        </div>
+                                                    </div>
+
+
+                                                    {/*<div className="font-bold text-blue-500">Disburse Verify*/}
+                                                    {/*    Date: {getDateFromDateString(item?.disburseVerify)} {getTimeFromDateString(item?.disburseVerify)} </div>*/}
+                                                    {/*<div className="font-bold text-gray-500">Verify Description*/}
+                                                    {/*    : {item?.verifyDescription}</div>*/}
+                                                    {/*<div className="font-bold text-red-500">Verify Result*/}
+                                                    {/*    : {item?.verifyResult}</div>*/}
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    </>
+
+
+                                ))
+                                }
+                                </tbody>
+                            </table>
+
+                        </div>
+                        :
+                        null
+            }
+            {retryDisbursementModal.status &&
+                <ModalWrapper maxWidth='max-w-lg'>
+                    <div className="p-4 md:p-5 text-center bg-white rounded-md">
+                        <svg className="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+                            <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
+                        </svg>
+                        <h3 className="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">{'Confirm Retry Disbursement?'}</h3>
+                        <div className="flex justify-center items-center gap-6 sm:gap-20">
+                            <MainBtn onClick={closeRetryDisbursementModal} text='Cancel' className="border text-black dark:text-white" />
+                            <MainBtn onClick={()=>handleClick(retryDisbursementModal.transactioID)} text='Yes' className="text-white bg-primary hover:bg-primary/90 focus:ring-0 focus:outline-none ring-0 font-medium rounded-lg text-sm px-5 py-2.5 text-center" />
+                        </div>
+                    </div>
+                </ModalWrapper>
+            }
+            {retryVerifyModal.status &&
+                <ModalWrapper maxWidth='max-w-lg'>
+                    <div className="p-4 md:p-5 text-center bg-white rounded-md">
+                        <svg className="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+                            <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
+                        </svg>
+                        <h3 className="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">{'Continue Verify Disburesement?'}</h3>
+                        <div className="flex justify-center items-center gap-6 sm:gap-20">
+                            <MainBtn onClick={closeRetryVerifyModal} text='Cancel' className="border text-black dark:text-white" />
+                            <MainBtn onClick={()=>handleRetryClick(retryVerifyModal.transactioID)} text='Yes' className="text-white bg-primary hover:bg-primary/90 focus:ring-0 focus:outline-none ring-0 font-medium rounded-lg text-sm px-5 py-2.5 text-center" />
+                        </div>
+                    </div>
+                </ModalWrapper>
+            }
         </>
     )
 }

src/components/transactionDetails/RepaymentScheduleDetails.jsx

@@ -1,20 +1,30 @@
-import React, { useEffect, useState } from 'react'
-import { useQuery } from "@tanstack/react-query";
+import React, {useEffect, useState} from 'react'
+import {useQuery} from "@tanstack/react-query";
 
 import Icons from '../Icons'
 
 import Avatar from '../../assets/user_avatar.jpg'
 import queryKeys from '../../services/queryKeys'
-import { getRepaymentSchedule } from '../../services/siteServices'
+import {getRepaymentSchedule} from '../../services/siteServices'
 import getDateFromDateString from '../../helpers/GetDateFromDateString';
 import formatNumber from '../../helpers/formatNumber';
-
+import localSiteIcons from "../../helpers/localSiteIcons";
+import {initiateLoanPayment } from "../../services/siteEventService"
+import ModalWrapper from '../modals/ModalWrapper';
+import MainBtn from '../MainBtn';
 export default function RepaymentScheduleDetails({transactionID}) {
+    
+    const [retryPaymentModal, setRetryPaymentModal] = useState({})
+    const handleSetRetryPaymentModal = (transactioID) => {
+        setRetryPaymentModal({status:true, transactioID})
+    }
+
+    const closeRetryPaymentModal = () => {setRetryPaymentModal({})}
 
     const [page, setPage] = useState(1)
 
     const {data, isFetching, isError, error} = useQuery({
-        queryKey: [...queryKeys.repayment_schedule, page],
+        queryKey: [...queryKeys.repayment_schedule, page, transactionID],
         queryFn: () => getRepaymentSchedule({transaction_id: transactionID, page}),
         staleTime: 0,
         // placeholderData: keepPreviousData,
@@ -22,26 +32,36 @@ export default function RepaymentScheduleDetails({transactionID}) {
 
     const repaymentSchedule = data?.data?.repayment_schedules // LOAN CHARGES LIST
     // const pagination = data?.data?.pagination
+    const handleClick = (transactioID) => {
+        alert(transactioID)
+        const fields = {
+            "transactionId": transactioID
+        }
+        closeRetryPaymentModal() // CLOSES PAYMENT INITIATE MODAL
+        return initiateLoanPayment(fields)
+        // console.log('Button clicked!');
+    };
 
-    useEffect(()=>{
-        
-    },[])
+    useEffect(() => {
+
+    }, [])
 
     return (
+        <>
         <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
             <p className='pb-4 font-bold text-base'>Repayment Schedule</p>
-            {isFetching ? 
-            <>
-                <p className='text-slate-800'>Loading...</p>
-            </>
-            : isError ?
-                <p className='text-red-500'>{error.message}</p>
-            :
-                <table className="py-2 w-full text-sm">
-                    <thead className="py-2 text-sm text-slate-500 text-left">
+            {isFetching ?
+                <>
+                    <p className='text-slate-800'>Loading...</p>
+                </>
+                : isError ?
+                    <p className='text-red-500'>{error.message}</p>
+                    :
+                    <table className="py-2 w-full text-sm">
+                        <thead className="py-2 text-sm text-slate-500 text-left">
                         <tr>
                             <th scope="col" className="px-2 py-2">
-                                ID
+                                ID/TrxID
                             </th>
                             {/* <th scope="col" className="px-2">
                                 Loan
@@ -59,63 +79,90 @@ export default function RepaymentScheduleDetails({transactionID}) {
                                 Paid Date
                             </th>
                             <th scope="col" className="px-2 text-right">
-                                Action
+                                Paid ?
+                            </th>
+                            <th scope="col" className="px-2 text-right">
+
                             </th>
                         </tr>
-                    </thead>
-                    <tbody>
+                        </thead>
+                        <tbody>
                         {(repaymentSchedule && repaymentSchedule.length > 0) ? repaymentSchedule?.map((item, index) => (
-                            <tr key={index} className="py-2 border-t border-dashed border-slate-300">
-                                <td className="px-2 py-2">
-                                    <div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
-                                    <img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />
-                                    <div className="text-left">
-                                        <div className="text-base font-semibold">{item?.loan_id || ''}</div>
-                                        {/* <div className="font-normal text-gray-500 line-clamp-1">{item?.description}</div> */}
-                                    </div>  
-                                    </div>
-                                </td>
-                                <td className="px-2">
-                                    <div className="text-right">
-                                        <div className="font-normal text-gray-500">{formatNumber(item?.total_repayment_amount)}</div>
-                                    </div> 
-                                </td>
-                                <td className="px-2">
-                                    <div className="text-right">
-                                        <div className="font-normal text-gray-500">{formatNumber(item?.installment_amount)}</div>
-                                    </div> 
-                                </td>
-                                <td className="px-2">
-                                    <div className="text-right">
-                                        <div className="font-normal text-gray-500">{getDateFromDateString(item?.due_date)}</div>
-                                    </div> 
-                                </td>
-                                <td className="px-2">
-                                    <div className="text-right">
-                                        <div className="font-normal text-gray-500">{item?.paid_at ? getDateFromDateString(item?.paid_at) : 'Not available'}</div>
-                                    </div>
-                                </td>
-                                <td className="px-2 text-right">
-                                    <div className='flex items-center justify-end gap-3 md:gap-4'>
-                                        <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
-                                            <Icons name='eye' />
+                                <tr key={index} className="py-2 border-t border-dashed border-slate-300">
+                                    <td className="px-2 py-2">
+                                        <div className="text-left">
+                                            <div className="text-base font-semibold">{item?.loan_id || ''}</div>
+                                            <div className="text-base font-semibold">{item?.transaction_id || ''}</div>
                                         </div>
+                                    </td>
+                                    <td className="px-2">
+                                        <div className="text-right">
+                                            <div
+                                                className="font-normal text-gray-500">{formatNumber(item?.total_repayment_amount)}</div>
+                                        </div>
+                                    </td>
+                                    <td className="px-2">
+                                        <div className="text-right">
+                                            <div
+                                                className="font-normal text-gray-500">{formatNumber(item?.installment_amount)}</div>
+                                        </div>
+                                    </td>
+                                    <td className="px-2">
+                                        <div className="text-right">
+                                            <div
+                                                className="font-normal text-gray-500">{getDateFromDateString(item?.due_date)}</div>
+                                        </div>
+                                    </td>
+                                    <td className="px-2">
+                                        <div className="text-right">
+                                            <div
+                                                className="font-normal text-gray-500">{item?.paid_at ? getDateFromDateString(item?.paid_at) : 'Not available'}</div>
+                                        </div>
+                                    </td>
+                                    <td className="px-2">
+                                        <div className="text-right">
+                                            <div className="text-base font-semibold">{item?.paid || 'false'}</div>
+                                        </div>
+                                    </td>
+                                    <td className="px-2">
+                                        <div className="text-right">
+                                            <button
+                                                className="bg-blue-500 hover:bg-red-700 text-white font-bold py-2 px-4 roundede"
+                                                onClick={() => handleSetRetryPaymentModal(item?.transaction_id)}>
+                                                Process Payment
+                                            </button>
+
+                                        </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>
-                        ))
-                        :
-                        <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>
+                        </tbody>
+                    </table>
             }
         </div>
+        {retryPaymentModal.status &&
+            <ModalWrapper maxWidth='max-w-lg'>
+                <div className="p-4 md:p-5 text-center bg-white rounded-md">
+                    <svg className="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+                        <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
+                    </svg>
+                    <h3 className="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">{'Continue Initiate Payment?'}</h3>
+                    <div className="flex justify-center items-center gap-6 sm:gap-20">
+                        <MainBtn onClick={closeRetryPaymentModal} text='Cancel' className="border text-black dark:text-white" />
+                        <MainBtn onClick={()=>handleClick(retryDisbursementModal.transactioID)} text='Yes' className="text-white bg-primary hover:bg-primary/90 focus:ring-0 focus:outline-none ring-0 font-medium rounded-lg text-sm px-5 py-2.5 text-center" />
+                    </div>
+                </div>
+            </ModalWrapper>
+        }
+        </>
     )
 }

src/components/transactionDetails/TransactionDetails.jsx

@@ -8,13 +8,14 @@ import { getTransactions } from '../../services/siteServices'
 import getDateFromDateString from '../../helpers/GetDateFromDateString';
 import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
 import localImgLoader from '../../helpers/localImageLoader';
+import localSiteIcons from '../../helpers/localSiteIcons';
 
 export default function TransactionDetails({transactionID}) {
 
     const [page, setPage] = useState(1)
 
     const {data, isFetching, isError, error} = useQuery({
-        queryKey: [...queryKeys.transactions, page],
+        queryKey: [...queryKeys.transactions, page, transactionID],
         queryFn: () => getTransactions({transaction_id: transactionID, page}),
         staleTime: 0,
         // placeholderData: keepPreviousData,
@@ -43,10 +44,10 @@ export default function TransactionDetails({transactionID}) {
                                 Account
                             </th>
                             <th scope="col" className="px-2">
-                                Activity
+                                Customer
                             </th>
                             <th scope="col" className="px-2 text-right">
-                                Action
+                                Channel
                             </th>
                         </tr>
                     </thead>
@@ -55,7 +56,7 @@ export default function TransactionDetails({transactionID}) {
                             <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" />
+                                    <img className="w-10 h-10 rounded-md" src={localSiteIcons(`loan_icons/${item?.type}`)} 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>
@@ -70,18 +71,11 @@ export default function TransactionDetails({transactionID}) {
                                 </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 className="text-base font-semibold">{item?.customer_id}</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>
+                                    <div className="text-base font-semibold">{item?.channel}</div>
                                 </td>
                             </tr>
                         ))

src/components/transactions/TransactionsCom.jsx

@@ -1,160 +1,166 @@
-import { useEffect, 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 TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
 import Icons from '../Icons'
-import { getTransactions } from '../../services/siteServices'
+import {getTransactions} from '../../services/siteServices'
 import getDateFromDateString from '../../helpers/GetDateFromDateString';
 import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
 import localImgLoader from '../../helpers/localImageLoader';
 import RouteLinks from '../../RouteLinks';
+import localSiteIcons from '../../helpers/localSiteIcons';
+import queryKeys from '../../services/queryKeys'
 
 export default function TransactionsCom() {
 
     const [page, setPage] = useState(1)
-    const [allTransactions, setAllTransaction] = useState({loading:true, error:'', data:{}})
-
+    const [filter, setFilter] = useState({type: '', id: ''})
     const [willFilter, setWillFilter] = useState(false)
-    const [filter, setFilter] = useState({transaction_id: '', account_id: ''})
+
     const handleFilter = ({target:{name, value}}) => {
         setFilter(prev => ({...prev, [name]:value}))
     }
 
     const handleFilterByParams = () => {
-        setPage(1)
-        setWillFilter(prev => !prev)
+        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}))
-        getTransactions({...filter, page}).then(res => {
-            if(res?.status != 200){
-                setAllTransaction(prev => ({...prev, loading:false}))
-                return
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: [...queryKeys.transactions, page, willFilter],
+        queryFn: () => {
+            const filterData = filter?.type ? {[filter?.type]: filter.id} : {}
+            const reqData = {
+                page,
+                ...filterData
             }
-            setAllTransaction({loading:false, error:'', data:res?.data})
-        }).catch(err => {
-            setAllTransaction({loading:false, error:'error occurred', data:{}})
-            console.log('ERR', err)
-        })
-    },[page, willFilter])
+            return getTransactions(reqData)
+        },
+        staleTime: 0 //0 mins
+    })
+    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']} />
+            <BreadcrumbCom title='Transactions' paths={['Dashboard', 'Transactions']}/>
 
             <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
-                { isError ?
-                    <p className='text-red-500'>{allTransactions?.error}</p>
-                :
-                <>
-                    {/* filter section */}
-                    <div className='px-2 py-2 mb-4 flex flex-col sm:flex-row flex-wrap sm:items-center gap-2'>
-                        <Icons name='filter' className='text-3xl' />
-                        <div className='w-full sm:max-w-48'>
-                            <p>Transaction ID</p>
-                            <select name='transaction_id' value={filter?.transaction_id} className='h-10 w-full p-2 rounded-md' onChange={handleFilter}>
-                                <option value=''>All</option>
-                                <>
-                                {transactions?.map((item, index) => (
-                                    <option key={index} value={item?.transaction_id}>{item?.transaction_id}</option>
-                                ))}
-                                </>
-                            </select>
+                {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>
-                        <div className='w-full sm:max-w-48'>
-                            <p>Account ID</p>
-                            <select name='account_id' value={filter?.account_id} className='h-10 w-full p-2 rounded-md' onChange={handleFilter}>
-                                <option value=''>All</option>
-                                <>
-                                {transactions?.map((item, index) => (
-                                    <option key={index} value={item?.account_id}>{item?.account_id}</option>
-                                ))}
-                                </>
-                            </select>
-                        </div>
-                        <button onClick={handleFilterByParams} className={`h-10 bg-primary px-2 py-1 rounded-md text-white font-medium sm:self-end`}>Submit</button>
-                    </div>
-                     {/* end of filter section */}
+                        {/* 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>
+                        <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">
+                                                Customer/ID
+                                            </th>
+                                            <th scope="col" className="px-2 text-right">
+                                                Action
+                                            </th>
                                         </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>
-                </>
+                                        </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={localSiteIcons(`loan_icons/${item?.type}`)}
+                                                                 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="text-base font-semibold">{item?.customer_id}</div>
+                                                            <div className="font-normal text-red-500"><b>ID:</b>{item?.id}</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/GetDateFromDateString.js

@@ -1,6 +1,8 @@
 function getDateFromDateString(dateString) {
     const date = new Date(dateString);
-    
+
+    if (dateString == null || dateString.trim() === '' ) return '';
+
     // Ensure the date is valid
     if (isNaN(date)) {
         return "Invalid date string";

src/helpers/GetTimeFromDateString.js

@@ -1,6 +1,8 @@
 function getTimeFromDateString(dateString) {
     const date = new Date(dateString);
-    
+
+    if (dateString == null || dateString.trim() === '' ) return '';
+
     // Ensure the date is valid
     if (isNaN(date)) {
         return "Invalid date string";

src/helpers/debounceFunction.js

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

src/helpers/localSiteIcons.js

@@ -0,0 +1,7 @@
+const localSiteIcons = (location) => {
+
+    let localParts;
+    localParts = location.split(".")
+   return  require(`../assets/${localParts[0]}.png`);
+}
+export default localSiteIcons

src/services/queryKeys.js

@@ -1,7 +1,6 @@
 const queryKeys = {
     dashboard: ['dashboard'],
     loans: ['loans'],
-    transactions: ['transactions'],
     repayment_schedule: ['repayment-schedule'],
     loan_charges: ['loan-charges'],
     offers: ['offers'],
@@ -9,6 +8,10 @@ const queryKeys = {
     select_loan: ['select-loan'],
     approved_loan: ['approved-loan'],
     loan_offers: ['loan-offers'],
+
+    //new
+    transactions: ['transactions'],
+    recent_loans: ['recent_loans'],
 }
 
 export default queryKeys

src/services/siteEventService.js

@@ -0,0 +1,60 @@
+import axios from "axios"
+// import dotenv from 'dotenv';
+//dotenv.config();
+
+axios.interceptors.request.use(
+    config => {
+        config.headers = {
+            Accept: "application/json",
+            "Access-Control-Allow-Origin": "*",
+        };
+        return config;
+    },
+    error => {
+        return Promise.reject(error);
+    }
+);
+const postAuxEnd = (path, postData, media = false) => {
+    const basePath = media ? process.env.REACT_APP_EVENT_API : process.env.REACT_APP_EVENT_API
+    return axios.post(`${basePath}${path}`, postData).then(res => {
+        return res
+    }).catch(err => {
+        // throw new Error(err.response.data.message);
+        throw new Error(err);
+    })
+}
+
+const getAuxEnd = (path, reqData = null) => {
+    const basePath = media ? process.env.REACT_APP_EVENT_API : process.env.REACT_APP_EVENT_API
+
+    return axios.get(`${basePath}${path}`, {params: reqData}).then(res => {
+        return res
+        // localStorage.clear();
+        // window.location.href = `/login?sessionExpired=true`;
+    }).catch(err => {
+        throw new Error(err);
+        // throw new Error(err.response.data.message);
+        // return err
+    })
+}
+
+// FUNCTION TO GET SALARY RECEIVED
+export const initiateDisburseRetrials = (reqData) => {
+    let postData = {
+        ...reqData
+    }
+    return postAuxEnd('/autocall/retry-disbursement', postData, false)
+}
+export const initiateDisburseVerify = (reqData) => {
+    let postData = {
+        ...reqData
+    }
+    return postAuxEnd('/autocall/verify-disbursement', postData, false)
+}
+
+export const initiateLoanPayment = (reqData) => {
+    let postData = {
+        ...reqData
+    }
+    return postAuxEnd('/autocall/start-repayment', postData, false)
+}

src/services/siteServices.js

@@ -90,4 +90,10 @@ export const getOffers = (reqData) => {
 export const getRepaymentSchedule = (reqData) => {
     const postData = { ...reqData }
     return getAuxEnd(`/repayment-schedules`, postData)
+}
+
+// FUNCTION TO GET RECENT LOANS
+export const getRecentLoans = (reqData) => {
+    const postData = { ...reqData }
+    return getAuxEnd(`/recent-loans`, postData)
 }