add daily user count chart for admin

src/pages/admin/Admin.js

@@ -1,11 +1,36 @@
-import React, { useEffect, useState } from 'react';
-import { checkAdminUser, getAllUserNumber } from '../../tools/auth';
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  checkAdminUser,
+  getAllUserNumber,
+  getAllUsers,
+} from '../../tools/auth';
 import { useNavigate } from 'react-router';
+import { Line } from 'react-chartjs-2';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Filler,
+  Tooltip,
+  Legend,
+} from 'chart.js';
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Filler,
+  Tooltip,
+  Legend
+);
 
 const Admin = () => {
   const navigate = useNavigate();
   const [isAdminUser, setIsAdminUser] = useState(false);
   const [allUserCount, setAllUserCount] = useState(0);
+  const [allUsers, setAllUsers] = useState([]);
 
   useEffect(() => {
     checkAdminUser().then((isAdmin) => {
@@ -23,14 +48,69 @@ const Admin = () => {
       getAllUserNumber().then((count) => {
         setAllUserCount(count);
       });
+      getAllUsers().then((data) => {
+        setAllUsers(data);
+      });
     }
   }, [isAdminUser]);
 
+  const dailyCounts = useMemo(() => {
+    // Group data by date
+    const counts = allUsers.reduce((acc, item) => {
+      // Convert UTC string to date string (YYYY-MM-DD)
+      const date = new Date(item.created_at).toISOString().split('T')[0];
+
+      // Increment count for this date
+      acc[date] = (acc[date] || 0) + 1;
+      return acc;
+    }, {});
+
+    // Convert to array and sort by date
+    return Object.entries(counts)
+      .sort(([dateA], [dateB]) => dateA.localeCompare(dateB))
+      .map(([date, count]) => ({ date, count }));
+  }, [allUsers]);
+
+  const data = {
+    labels: dailyCounts?.map((data) => data?.date),
+    datasets: [
+      {
+        label: 'My First Dataset',
+        data: dailyCounts?.map((data) => data?.count),
+        fill: false,
+        borderColor: '#e62182',
+        tension: 0.1,
+      },
+    ],
+  };
+
+  const options = {
+    scales: {
+      x: {
+        type: 'category',
+      },
+      y: {
+        beginAtZero: true,
+      },
+    },
+  };
+
   return (
     <div>
       <h1>KTEST DASHBOARD</h1>
       <h2>All User Count</h2>
       <h3>{allUserCount}</h3>
+
+      <Line
+        style={{
+          width: '100%',
+          maxWidth: '25rem',
+          height: '100%',
+          margin: '0 auto',
+        }}
+        data={data}
+        options={options}
+      />
     </div>
   );
 };

src/tools/auth.js

@@ -146,3 +146,14 @@ export const getAllUserNumber = async () => {
     .select('*', { count: 'exact' });
   return count;
 };
+
+export const getAllUsers = async () => {
+  const { data } = await supabase
+    .from(USER_INFO_TABLE)
+    .select('id, created_at')
+    .gte(
+      'created_at',
+      new Date(new Date().setDate(new Date().getDate() - 7)).toISOString() // the last 7 days
+    );
+  return data;
+};