counter and chart package added

package.json

@@ -5,10 +5,13 @@
   "dependencies": {
     "@reduxjs/toolkit": "^2.5.1",
     "@tanstack/react-query": "^5.66.0",
+    "apexcharts": "^4.5.0",
     "axios": "^1.7.9",
     "cra-template": "1.2.0",
     "formik": "^2.4.6",
     "react": "^19.0.0",
+    "react-apexcharts": "^1.7.0",
+    "react-countup": "^6.5.3",
     "react-dom": "^19.0.0",
     "react-icons": "^5.4.0",
     "react-redux": "^9.2.0",

src/components/CustomCounter.jsx

@@ -1,29 +1,39 @@
-import React, { useEffect, useState } from 'react';
+// import React, { useEffect, useState } from 'react';
+
+// const CustomCounter = ({ targetNumber, timeInSeconds }) => {
+//   const [count, setCount] = useState(0);
+
+//   useEffect(() => {
+//     if (targetNumber <= 0 || timeInSeconds <= 0) return; // Handle edge cases
+
+//     const interval = Math.floor(timeInSeconds * 1000 / targetNumber); // Time interval for each count in milliseconds
+//     const totalTime = timeInSeconds * 1000; // Total time for the entire count in milliseconds
+
+//     let currentCount = 0;
+//     const intervalId = setInterval(() => {
+//       currentCount++;
+//       setCount((prevCount) => prevCount + 1); // Update state using the previous state
+
+//       if (currentCount >= targetNumber) {
+//         clearInterval(intervalId); // Stop the counting when the target number is reached
+//       }
+//     }, interval);
+
+//     // Cleanup the interval on component unmount
+//     return () => clearInterval(intervalId);
+//   }, [targetNumber, timeInSeconds]);
+
+//   return <>{count}</>;
+// };
+
+// export default CustomCounter;
+
+
+import React from 'react';
+import CountUp from 'react-countup';
 
 const CustomCounter = ({ targetNumber, timeInSeconds }) => {
-  const [count, setCount] = useState(0);
-
-  useEffect(() => {
-    if (targetNumber <= 0 || timeInSeconds <= 0) return; // Handle edge cases
-
-    const interval = Math.floor(timeInSeconds * 1000 / targetNumber); // Time interval for each count in milliseconds
-    const totalTime = timeInSeconds * 1000; // Total time for the entire count in milliseconds
-
-    let currentCount = 0;
-    const intervalId = setInterval(() => {
-      currentCount++;
-      setCount((prevCount) => prevCount + 1); // Update state using the previous state
-
-      if (currentCount >= targetNumber) {
-        clearInterval(intervalId); // Stop the counting when the target number is reached
-      }
-    }, interval);
-
-    // Cleanup the interval on component unmount
-    return () => clearInterval(intervalId);
-  }, [targetNumber, timeInSeconds]);
-
-  return <>{count}</>;
+  return <CountUp end={targetNumber} duration={timeInSeconds} />;
 };
 
-export default CustomCounter;
+export default CustomCounter;

src/components/auth/LoginCom.jsx

@@ -68,10 +68,6 @@ export default function LoginCom() {
     <>
       <div className={`h-screen bg-sky-300 flex flex-col items-center justify-center bg-[url('./assets/login-bg.jpg')] bg-cover bg-center bg-no-repeat`}>
         <div className='p-4 sm:p-8 w-full max-w-7xl mx-auto grid gap-8 grid-cols-1 md:grid-cols-3 lg:grid-cols-2'>
-          <div className='col-span-1 md:col-span-1 lg:col-span-1 h-full flex flex-col gap-3 justify-center items-center md:items-start'>
-            {/* <DummyLogo />
-            <p className='text-4xl text-black-body font-bold'>Dummy Text Here</p> */}
-          </div>
           <div className='col-span-1 md:col-span-2 lg:col-span-1 h-full'>
             <div className='flex flex-col gap-8 w-full bg-white rounded-xl p-16 sm:px-20 sm:py-16 shadow'>
               <div className='w-full flex flex-col gap-1 items-center'>
@@ -99,17 +95,17 @@ export default function LoginCom() {
                 <div className='text-input flex flex-col gap-2'>
                   <InputText id='username' placeholder='Username' name='username' value={fields.username} handleChange={handleChange} />
                 </div>
-                <div className='text-input flex flex-col gap-2'>
+                <div className='text-input flex flex-col gap-2 mb-10'>
                   <InputText id='password' placeholder='Password' name='password' type='password' value={fields.password} handleChange={handleChange} />
-                  <p className='text-sm text-end font-medium text-primary'>Forget password ?</p>
+                  {/* <p className='text-sm text-end font-medium text-primary'>Forget password ?</p> */}
                 </div>
-                <div className='h-10'>
+                <div className='h-10 mb-10'>
                   {/* <button onClick={()=>{login.mutate(fields)}} disabled={login.isPending} className='px-3 py-2 bg-purple-800 text-white font-bold rounded'>{login.isPending ? 'loading...' : 'Login'}</button> */}
                   <button onClick={handleLogin} className='w-full h-full bg-primary text-white font-bold rounded-md'>{loading ? 'Loading...' : 'Sign In'}</button>
                 </div>
               </div>
 
-              <p className='text-sm text-center font-medium text-slate-500'>Not yet a member? <span className='text-primary'>Sign Up</span></p>
+              {/* <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'>
                 <Link className='text-primary' to=''>Terms</Link>
@@ -127,6 +123,10 @@ export default function LoginCom() {
               } */}
             </div>
           </div>
+          <div className='col-span-1 md:col-span-1 lg:col-span-1 h-full flex flex-col gap-3 justify-center items-center md:items-start'>
+            {/* <DummyLogo />
+            <p className='text-4xl text-black-body font-bold'>Dummy Text Here</p> */}
+          </div>
         </div>
       </div>
     </>

src/components/breadcrumb/BreadcrumbCom.jsx

@@ -25,7 +25,7 @@ export default function BreadcrumbCom({title, span, paths}) {
 
   return (
     // ${stickNav ? 'sticky top-0 transition-[top] duration-1000 shadow-md shadow-black' : '-top-[100px] static'}
-    <div className={`sticky z-[999] -top-10 bg-white-body dark:bg-black-body dark:border-b dark:border-black-box dark:shadow-sm dark:shadow-black-box`}>
+    <div className={`sticky z-[970] top-[78px] lg:-top-10 bg-white-body dark:bg-black-body dark:border-b dark:border-black-box dark:shadow-sm dark:shadow-black-box`}>
       <div className= {`w-full py-2 flex justify-between items-center`}>
         <div className='flex flex-col gap-2'>
           <div className='flex flex-col md:flex-row gap-1 md:items-center'>

src/components/home/Widget1.jsx

@@ -0,0 +1,187 @@
+import {useEffect, useRef} from 'react'
+import ApexCharts from 'apexcharts'
+
+const Widget1 = ({chartHeight='50px'}) => {
+  const chartRef = useRef(null)
+
+  const {mode} = '' // to be replaced by theme mode value later
+
+  useEffect(() => {
+    const chart = refreshChart()
+
+    return () => {
+      if (chart) {
+        chart.destroy()
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chartRef, mode])
+
+  const refreshChart = () => {
+    if (!chartRef.current) {
+      return
+    }
+
+    const chart = new ApexCharts(chartRef.current, chartOptions(chartHeight))
+    if (chart) {
+      chart.render()
+    }
+
+    return chart
+  }
+
+  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
+
+  return {
+    series: [
+      {
+        name: 'Net Profit',
+        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 + ' thousands'
+        },
+      },
+    },
+    colors: ['#ffffff'],
+    markers: {
+      colors: [labelColor],
+      strokeColors: [strokeColor],
+      strokeWidth: 3,
+    },
+  }
+}
+
+export {Widget1}

src/components/home/Widget2.jsx

@@ -0,0 +1,147 @@
+import {useEffect, useRef} from 'react'
+import ApexCharts from 'apexcharts'
+
+const Widget2 = ({chartHeight='100px'}) => {
+  const chartRef = useRef(null)
+
+  const {mode} = '' // to be replaced by theme mode value later
+
+  useEffect(() => {
+    const chart = refreshChart()
+
+    return () => {
+      if (chart) {
+        chart.destroy()
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chartRef, mode])
+
+  const refreshChart = () => {
+    if (!chartRef.current) {
+      return
+    }
+
+    const chart = new ApexCharts(chartRef.current, chartOptions(chartHeight))
+    if (chart) {
+      chart.render()
+    }
+
+    return chart
+  }
+
+  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')
+  
+    return {
+      series: [
+        {
+          name: 'Inflation',
+          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}

src/components/layouts/DashboardLayout.jsx

@@ -29,7 +29,7 @@ export default function DashboardLayout() {
         </div>
 
         <div className={`main w-full bg-inherit ${pathname == '/' && 'large:mr-[400px]'}`}>
-            <div className='fixed top-0 left-0 z-[777] w-full px-8 bg-inherit lg:hidden'>
+            <div className='fixed top-0 left-0 z-[980] w-full px-8 bg-inherit lg:hidden'>
                 <DashboardHeader />
             </div> 
 

src/components/layouts/LogoutModal.jsx

@@ -21,7 +21,7 @@ export default function LogoutModal({close}) {
   return (
     <ModalWrapper
     >
-        <div className="relative bg-white rounded-lg shadow-round_black dark:shadow-round_white dark:bg-gray-700 dark:text-white">
+        <div className="relative bg-white-body rounded-lg shadow-round_black dark:border-[1px] dark:border-[#1E2027] dark:bg-black-box dark:text-white">
             {/* <!-- Modal header --> */}
             <div className="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
                 <h3 className="text-xl font-semibold text-gray-900 dark:text-white">

src/components/modals/ModalWrapper.jsx

@@ -1,7 +1,7 @@
 
 export default function ModalWrapper({children, maxWidth}) {
   return (
-    <div className="bg-gray-900/40 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-[999] flex flex-col justify-center items-center w-full md:inset-0 h-[calc(100%)] max-h-full">
+    <div className="bg-[rgba(0,_0,_0,_0.2)] dark:bg-[rgba(0,_0,_0,_0.4)] overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-[999] flex flex-col justify-center items-center w-full md:inset-0 h-[calc(100%)] max-h-full">
         <div className={`pop-modal relative p-4 w-full ${maxWidth ? maxWidth : 'max-w-2xl'} max-h-full`}>
             {/* <!-- Modal content --> */}
             <div className="pb-4">

src/index.css

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

src/pages/HomePage.jsx

@@ -4,15 +4,18 @@ 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 '../components/home/Widget1'
+import { Widget2 } from '../components/home/Widget2'
 
 export default function HomePage() {
   return (
     <div className='w-full flex flex-col gap-8'>
       <BreadcrumbCom title='Dashboard' paths={['Home', 'Dashboard']} />
       <div className='grid grid-cols-1 gap-8'>
-        <div className='w-full grid grid-cols-1 lg:grid-cols-3 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'>Earnings</p>
+            {/* <Widget1 /> */}
             <div className='flex gap-2 items-end font-bold'>
               <p className='text-3xl sm:text-[39px]'><span className='text-xl sm:text-2xl'>$</span><CustomCounter targetNumber='47' timeInSeconds='1' /></p>
               <p className='sm:text-[13.9px]'>- 12% this week</p>
@@ -20,13 +23,14 @@ export default function HomePage() {
           </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'>Contributions</p>
+            {/* <Widget2 /> */}
             <div className='flex gap-2 items-end font-bold'>
               <p className='text-3xl sm:text-[39px]'><CustomCounter targetNumber='500' timeInSeconds='1' /></p>
               <p className='sm:text-[13.9px]'>+ 56% this week</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='text-base sm:text-lg font-bold hover:text-primary'>Summary</p>
+            <p className='mb-4 text-base sm:text-lg font-bold hover:text-primary'>Summary</p>
             <div className='grid grid-cols-2 gap-4 font-bold'>
               <div className='flex items-center gap-2'>
                 <div className='w-10 h-10 bg-white-body dark:bg-black-box dark:shadow-[0_0_0_1px_#f9f9f9] rounded-md flex justify-center items-center'>
@@ -68,7 +72,7 @@ export default function HomePage() {
           </div>
         </div>
         <div className='w-full'>
-          <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+          <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'>Members Statistics</p>