table update

src/App.js

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

src/components/CustomCounter.jsx

@@ -29,11 +29,12 @@
 // export default CustomCounter;
 
 
-import React from 'react';
-import CountUp from 'react-countup';
+// import React from 'react';
+// import CountUp from 'react-countup';
 
 const CustomCounter = ({ targetNumber, timeInSeconds }) => {
-  return <CountUp end={targetNumber} duration={timeInSeconds} />;
+  // return <CountUp end={targetNumber} duration={timeInSeconds} />;
+  return targetNumber
 };
 
 export default CustomCounter;

src/components/home/HomeCom.jsx

@@ -5,8 +5,6 @@ import CustomCounter from '../../components/CustomCounter'
 import Icons from '../../components/Icons'
 import TableWrapper from '../../components/tableWrapper/TableWrapper'
 import Avatar from '../../assets/user_avatar.jpg'
-import { Widget1 } from './Widget1'
-import { Widget2 } from './Widget2'
 import formatNumber from '../../helpers/formatNumber'
 
 import queryKeys from '../../services/queryKeys'
@@ -16,7 +14,7 @@ export default function HomeCom() {
 
   const {data, isFetching, isError, error} = useQuery({
     queryKey: queryKeys.dashboard,
-    queryFn: () => getDashData()
+    queryFn: () => getDashData(),
   })
 
   const dashData = data?.data // DASHBOARD DATA
@@ -37,7 +35,6 @@ export default function HomeCom() {
         <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>
-            <Widget1 />
             <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>
@@ -46,7 +43,6 @@ export default function HomeCom() {
           </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>
-            {/* <Widget2 /> */}
             <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>

src/components/home/Widget1.jsx

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

src/components/home/Widget2.jsx

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

src/components/layouts/aside/DashboardAside.jsx

@@ -32,7 +32,7 @@ export default function DashboardAside() {
                 let hasSubLinks = (link.subLinks && link.subLinks.length > 0) ? true : false
                 if(active && !hasSubLinks){
                     return (
-                        <div key={index}>
+                        <div key={link.name}>
                             <AsideLink to={link.to} name={link.name} icon={link.icon} />
                         </div>
                     )
@@ -49,7 +49,7 @@ export default function DashboardAside() {
                         }
                     })
                     return (
-                    <div key={index} className="w-full">
+                    <div key={link.name} className="w-full">
                         {link.title &&
                             <h1 className="px-4 py-2 text-sm sm:text-sm text-slate-500 dark:text-white font-semibold uppercase mt-3 mb-1 border-b border-slate-500 dark:border-white">{link.title}</h1>
                         }
@@ -60,8 +60,8 @@ export default function DashboardAside() {
                                 let hasSubLinks = (subItem.subLinks && subItem.subLinks.length > 0) ? true : false
                                 if(active && !hasSubLinks){
                                     return (
-                                    <div key={index}>
-                                        <AsideLink key={index} to={subItem.to} name={subItem.name} icon={subItem.icon} />
+                                    <div key={subItem.name}>
+                                        <AsideLink to={subItem.to} name={subItem.name} icon={subItem.icon} />
                                     </div>
                                 )
                                 }else if(active && hasSubLinks){
@@ -71,7 +71,7 @@ export default function DashboardAside() {
                                         }
                                     })
                                     return(
-                                        <AsideLinkWithSubLinks name={subItem.name} icon={subItem.icon} isOpen={subLinkList.includes(pathname)}>
+                                        <AsideLinkWithSubLinks key={subItem.name} name={subItem.name} icon={subItem.icon} isOpen={subLinkList.includes(pathname)}>
                                             <>
                                             {subItem.subLinks.map((item, index)=>{
                                                 let active = item.status == 1 ? true : false

src/components/loanscom/LoansCom.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { useQuery } from "@tanstack/react-query";
-import {Link} from 'react-router-dom'
 
 import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
 import TableWrapper from '../tableWrapper/TableWrapper'
@@ -8,18 +7,21 @@ import Icons from '../Icons'
 
 import Avatar from '../../assets/user_avatar.jpg'
 import queryKeys from '../../services/queryKeys'
-import { selectLoan } from '../../services/siteServices'
+import { getLoans } from '../../services/siteServices'
 import getDateFromDateString from '../../helpers/GetDateFromDateString';
+import formatNumber from '../../helpers/formatNumber'
 import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
 
 export default function LoansCom() {
 
-    const {data, isFetching, isError, error} = useQuery({
-        queryKey: queryKeys.select_loan,
-        queryFn: () => selectLoan()
+    const {data:allLoans, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.loans,
+        queryFn: () => getLoans()
     })
 
-    const selectUsers = data?.data?.result_data?.data // APPLY LOAN LIST
+    const loans = allLoans?.data?.loans // LOANS LIST
+    const loansCount = allLoans?.data?.count // LOANS LIST COUNT
+    // console.log('LOANS', loans)
 
     return (
         <div className='w-full flex flex-col gap-8'>
@@ -33,19 +35,19 @@ export default function LoansCom() {
                 : isError ?
                     <p className='text-red-500'>{error.message}</p>
                 :
-                    <TableWrapper data={selectUsers} itemsPerPage={15}>
+                    <TableWrapper data={loans} itemsPerPage={15}>
                     {({ data }) => (
                         <>
-                            <table className="py-2 w-full text-sm">
+                            <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">
-                                            Loan
+                                        <th scope="col" className="px-2 text-right">
+                                            Loan Amount
                                         </th>
-                                        <th scope="col" className="px-2">
+                                        <th scope="col" className="px-2 text-right">
                                             Added
                                         </th>
                                         <th scope="col" className="px-2 text-right">
@@ -55,25 +57,25 @@ export default function LoansCom() {
                                 </thead>
                                 <tbody>
                                     {(data && data.length > 0) ? data?.map((item, index) => (
-                                        <tr className="py-2 border-t border-dashed border-slate-300">
+                                        <tr key={index} className="py-2 border-t border-dashed border-slate-300">
                                             <td className="px-2 py-2">
                                                 <div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
                                                 <img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />
                                                 <div className="text-left">
-                                                    <div className="text-base font-semibold">{item?.name || ''}</div>
-                                                    <div className="font-normal text-gray-500">{item?.bvn}</div>
+                                                    <div className="text-base font-semibold">{item?.account_id || ''}</div>
+                                                    <div className="font-normal text-gray-500">{item?.customer_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 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-left">
-                                                    <div className="font-normal text-gray-500">{getDateFromDateString(item?.added)} {getTimeFromDateString(item?.added)}</div>
+                                                <div className="text-right">
+                                                    <div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</div>
                                                 </div> 
                                             </td>
                                             <td className="px-2 text-right">

src/components/request/RequestCom.jsx

@@ -1,39 +1,43 @@
-import React from 'react'
-import { useQuery } from "@tanstack/react-query";
+import React, { useState } from 'react'
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import {Link} from 'react-router-dom'
 
 import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
-import TableWrapper from '../tableWrapper/TableWrapper'
+import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
 import Icons from '../Icons'
 
 import Avatar from '../../assets/user_avatar.jpg'
 import queryKeys from '../../services/queryKeys'
-import { selectLoan } from '../../services/siteServices'
+import { getTransactions } from '../../services/siteServices'
 import getDateFromDateString from '../../helpers/GetDateFromDateString';
 import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
 
 export default function RequestCom() {
 
-    const {data, isFetching, isError, error} = useQuery({
-        queryKey: queryKeys.select_loan,
-        queryFn: () => selectLoan()
+    const [page, setPage] = useState(1)
+
+    const {data, isFetching, isError, error, isPlaceholderData, isPending} = useQuery({
+        queryKey: [...queryKeys.transactions, page],
+        queryFn: () => getTransactions({page}),
+        // placeholderData: keepPreviousData,
     })
 
-    const selectUsers = data?.data?.result_data?.data // APPLY LOAN LIST
+    const selectUsers = data?.data?.transactions // TRANSACTIONS LIST
+    const pagination = data?.data?.pagination
 
     return (
         <div className='w-full flex flex-col gap-8'>
             <BreadcrumbCom title='Request' paths={['Dashboard', 'Request']} />
 
             <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
-                {isFetching ? 
+                {isPending ? 
                 <>
                     <p className='text-slate-800'>Loading...</p>
                 </>
                 : isError ?
                     <p className='text-red-500'>{error.message}</p>
                 :
-                    <TableWrapper data={selectUsers} itemsPerPage={15}>
+                    <TablePaginatedWrapper data={selectUsers} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
                     {({ data }) => (
                         <>
                             <table className="py-2 w-full text-sm">
@@ -42,9 +46,9 @@ export default function RequestCom() {
                                         <th scope="col" className="px-2 py-2">
                                             Name
                                         </th>
-                                        <th scope="col" className="px-2">
+                                        {/* <th scope="col" className="px-2">
                                             Loan
-                                        </th>
+                                        </th> */}
                                         <th scope="col" className="px-2">
                                             Added
                                         </th>
@@ -55,25 +59,25 @@ export default function RequestCom() {
                                 </thead>
                                 <tbody>
                                     {(data && data.length > 0) ? data?.map((item, index) => (
-                                        <tr className="py-2 border-t border-dashed border-slate-300">
+                                        <tr key={index} className="py-2 border-t border-dashed border-slate-300">
                                             <td className="px-2 py-2">
                                                 <div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
                                                 <img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />
                                                 <div className="text-left">
-                                                    <div className="text-base font-semibold">{item?.name || ''}</div>
-                                                    <div className="font-normal text-gray-500">{item?.bvn}</div>
+                                                    <div className="text-base font-semibold">{item?.account_id || ''}</div>
+                                                    <div className="font-normal text-gray-500">{item?.transaction_id}</div>
                                                 </div>  
                                                 </div>
                                             </td>
-                                            <td className="px-2">
+                                            {/* <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> */}
                                             <td className="px-2">
                                                 <div className="text-left">
-                                                    <div className="font-normal text-gray-500">{getDateFromDateString(item?.added)} {getTimeFromDateString(item?.added)}</div>
+                                                    <div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</div>
                                                 </div> 
                                             </td>
                                             <td className="px-2 text-right">
@@ -93,7 +97,7 @@ export default function RequestCom() {
                                     ))
                                     :
                                     <tr className="py-2 border-t border-dashed border-slate-300">
-                                        <td className="px-3 py-2" colSpan={4}>
+                                        <td className="px-3 py-2" colSpan={3}>
                                             <div className="flex justify-center items-center">
                                                 No Record Found
                                             </div>
@@ -104,7 +108,7 @@ export default function RequestCom() {
                             </table>
                         </>
                     )}
-                    </TableWrapper>
+                    </TablePaginatedWrapper>
                 }
             </div>
         </div>

src/components/tableWrapper/TablePaginatedWrapper.jsx

@@ -0,0 +1,121 @@
+import { useEffect, useState } from "react";
+import MainBtn from "../MainBtn";
+import Icons from "../Icons";
+
+
+export default function TablePaginatedWrapper({
+  data = [],
+  itemsPerPage = 5,
+  pagination,
+  setPage,
+  isFetching,
+  filterItem,
+  children,
+}) {
+  const [isLoading, setIsLoading] = useState(isFetching)
+  const [searchTerm, setSearchTerm] = useState("");
+  const [filteredData, setFilteredData] = useState(data);
+
+  const [currentPage, setCurrentPage] = useState(0);
+  const [newData, setNewData] = useState([]);
+
+  const numberOfSelection = itemsPerPage;
+
+  const handlePrev = () => {
+    setPage(prev => prev - 1)
+  };
+  const handleNext = () => {
+    setPage(prev => prev + 1)
+  };
+
+  const handleSearch = ({ target: { value } }, name) => {
+    setSearchTerm(value);
+    let newFilteredData = data.filter((item) =>
+      item[name].toLowerCase().startsWith(value.toLowerCase())
+    );
+    setFilteredData(newFilteredData);
+    setCurrentPage(0);
+  };
+
+  useEffect(() => {
+    setIsLoading(true)
+    setTimeout(()=>{
+      setNewData(
+        filteredData?.slice(currentPage, numberOfSelection + currentPage)
+      );
+      setIsLoading(false)
+    },1000)
+  }, [currentPage, filteredData, numberOfSelection]);
+
+  useEffect(()=>{
+    setCurrentPage(0)
+  },[itemsPerPage])
+
+  return (
+    <div className="relative w-full">
+      {data.length > 0 && filterItem && (
+        <div className="mb-10 flex justify-end items-center gap-2">
+          {filterItem.map((item, index) => (
+            <label
+              key={index}
+              className="flex flex-col sm:flex-row items-center gap-2 text-slate-600 dark:text-slate-100 transition-all duration-500"
+            >
+              Search by {item[0].toUpperCase() + item.slice(1)}
+              <input
+                name={item}
+                type="text"
+                className="py-1 px-2 text-sm min-w-[100px] text-black dark:text-white bg-white dark:bg-slate-800 rounded-full border-0 outline-none ring-1 ring-slate-300 dark:ring-white transition-all duration-500"
+                value={searchTerm}
+                onChange={(e) => {
+                  handleSearch(e, item);
+                }}
+              />
+            </label>
+          ))}
+        </div>
+      )}
+    
+      <div className="flex flex-col">
+        <div className="w-full overflow-x-auto">
+          {children({ data: newData })}
+        </div>
+
+        <div className='w-full flex flex-col lg:flex-row justify-center items-center gap-3 md:gap-6'>
+            <div className="text-sm text-center lg:text-left font-normal text-gray-500 dark:text-gray-400 block w-full">Showing <span className="font-semibold text-gray-900 dark:text-white">
+              {isLoading ? '----' : `page ${pagination?.current_page}`}</span> of <span className="font-semibold text-gray-900 dark:text-white">{pagination?.total_pages}</span>
+            </div>
+            {(newData.length >= 0) &&
+              <div className='flex items-center gap-3 md:gap-6'>
+                  <MainBtn 
+                      onClick={handlePrev}
+                      // text='Prev' 
+                      className={`${!pagination?.has_prev ? 'bg-primary/50 pointer-events-none' : 'bg-primary'} text-white-light text-center flex justify-center gap-2 items-center`} 
+                      disabled={isLoading || !pagination?.has_prev}
+                  >
+                  <Icons name='prev' />
+                  </MainBtn>
+                  <MainBtn 
+                      onClick={handleNext}
+                      // text='Next' 
+                      className={`${!pagination?.has_next ? 'bg-primary/50 pointer-events-none' : 'bg-primary'} text-white-light text-center flex justify-center gap-2 items-center`} 
+                      disabled={isLoading || !pagination?.has_next}
+                  > 
+                  <Icons name='next' />
+                  </MainBtn>
+              </div>
+            }
+          </div>
+      </div>
+      
+    {isLoading && <TableIsLoading />}
+    </div>
+  );
+}
+
+const TableIsLoading = () => {
+  return (
+    <div className="w-full absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[991] inset-0 flex justify-center items-center">
+      <p className="rounded-md shadow-md p-4 bg-white/90 dark:bg-gray-900 text-brown dark:text-white">Loading...</p>
+    </div>
+  )
+}

src/helpers/formatNumber.js

@@ -1,6 +1,6 @@
 const formatNumber = (number = 0) => {
-    // return new Intl.NumberFormat().format(number);
-    return number.toFixed(2);
+    return new Intl.NumberFormat().format(number);
+    // return number.toFixed(2);
   };
   
   export default formatNumber

src/services/queryKeys.js

@@ -1,5 +1,7 @@
 const queryKeys = {
     dashboard: ['dashboard'],
+    loans: ['loans'],
+    transactions: ['transactions'],
     apply_loan: ['apply'],
     select_loan: ['select-loan'],
     approved_loan: ['approved-loan'],

src/services/siteServices.js

@@ -8,7 +8,7 @@ axios.interceptors.request.use(
             "Access-Control-Allow-Origin": "*",
             // "Access-Control-Expose-Headers": "Access-Control-Allow-Origin",
             // "Access-Control-Allow-Headers": "Origin, X-API-KEY, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Access-Control-Allow-Headers, Authorization, observe, enctype, Content-Length, X-Csrf-Token",
-            "Content-Type": "application/json;charset=UTF-8",
+            // "Content-Type": "application/json;charset=UTF-8",
             'Authorization': (localStorage && localStorage.getItem('token')) ? `Bearer ${localStorage.getItem('token')}` : ''
           };
     // config.headers['Authorization'] = `Bearer ${localStorage.getItem('token')}`;
@@ -56,6 +56,21 @@ export const getDashData = (reqData) => {
     return getAuxEnd(`/dashboard`, postData)
 }
 
+// FUNCTION TO GET LOANS TABLE
+export const getLoans = (reqData) => {
+    const postData = { ...reqData }
+    return getAuxEnd(`/loans`, postData)
+}
+
+// FUNCTION TO GET TRANSACTIONS TABLE
+export const getTransactions = (reqData) => {
+    const postData = { ...reqData }
+    return getAuxEnd(`/transactions`, postData)
+}
+
+
+
+
 // FUNCTION TO GET APPLIED LOANS TABLE
 export const applyLoan = (reqData) => {
     const postData = { ...reqData }