removed unresolved packages

src/components/CustomCounter.jsx

@@ -29,11 +29,12 @@
 // export default CustomCounter;
 
 
-import React from 'react';
+// import React from 'react';
-import CountUp from 'react-countup';
+// 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'
@@ -37,18 +35,16 @@ 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'>
-            <div className='flex 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-base sm:text-lg'><span className='text-sm'>{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>
-            {/* <Widget2 /> */}
+            <div className='flex flex-wrap gap-2 items-end font-bold'>
-            <div className='flex gap-2 items-end font-bold'>
+              <p className='text-xl sm:text-[30px]'><span className='text-lg sm:text-xl'>{dashData?.payments?.currency_text}</span><CustomCounter targetNumber={formatNumber(dashData?.payments?.value)} timeInSeconds='1' /></p>
-              <p className='text-sm sm:text-base'><span className='text-sm'>{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>

src/components/home/Widget1.jsx

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

src/components/home/Widget2.jsx

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

src/components/tableWrapper/TableWrapper.jsx

@@ -1,4 +1,4 @@
-import { ReactNode, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import MainBtn from "../MainBtn";
 import Icons from "../Icons";
 
@@ -19,7 +19,7 @@ export default function TableWrapper({
   const numberOfSelection = itemsPerPage;
 
   const handlePrev = () => {
-    if (currentPage != 0) {
+    if (currentPage !== 0) {
       setCurrentPage((prev) => prev - numberOfSelection);
     }
   };
@@ -46,7 +46,7 @@ export default function TableWrapper({
       );
       setIsLoading(false)
     },1000)
-  }, [currentPage, filteredData]);
+  }, [currentPage, filteredData, numberOfSelection]);
 
   useEffect(()=>{
     setCurrentPage(0)
@@ -92,7 +92,7 @@ export default function TableWrapper({
                   <MainBtn 
                       onClick={handlePrev}
                       // text='Prev' 
-                      className={`${currentPage == 0 ? 'bg-primary/50 pointer-events-none' : 'bg-primary'} text-white-light text-center flex justify-center gap-2 items-center`} 
+                      className={`${currentPage === 0 ? 'bg-primary/50 pointer-events-none' : 'bg-primary'} text-white-light text-center flex justify-center gap-2 items-center`} 
                       disabled={isLoading}
                   >
                   <Icons name='prev' />

src/helpers/formatNumber.js

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