Merge pull request #133 from sandboxnu/adminData

Admin data dashboard

chartjs-adapter-date-fns.d.ts

@@ -0,0 +1 @@
+declare module "chartjs-adapter-date-fns";

package.json

@@ -49,6 +49,9 @@
     "@types/styled-components": "^5.1.26",
     "antd": "^5.22.1",
     "axios": "^0.27.2",
+    "chart.js": "^4.4.6",
+    "chartjs-adapter-date-fns": "^3.0.0",
+    "chartjs-plugin-zoom": "^2.2.0",
     "date-fns": "^4.1.0",
     "dayjs": "1.11.13",
     "envsafe": "^2.0.3",
@@ -63,6 +66,7 @@
     "rc-picker": "^4.8.1",
     "rc-trigger": "^5.3.4",
     "react": "^18.3.1",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.3.1",
     "react-easy-crop": "^5.1.0",
     "react-hook-form": "^7.32.2",

src/components/Admin/AdminData.tsx

@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from "react";
+import Spinner from "../Spinner";
+import { trpc } from "../../utils/trpc";
+import { TempUser, TempGroup } from "../../utils/types";
+import BarChartUserCounts from "./BarChartUserCounts";
+import LineChartCount from "./LineChartCount";
+
+function AdminData() {
+  const [loading, setLoading] = useState<boolean>(true);
+  const { data: users = [] } =
+    trpc.user.admin.getAllUsers.useQuery<TempUser[]>();
+  const { data: groups = [] } =
+    trpc.user.admin.getCarpoolGroups.useQuery<TempGroup[]>();
+
+  useEffect(() => {
+    if (users && groups) {
+      setLoading(false);
+    }
+  }, [users, groups]);
+
+  if (loading) {
+    return <Spinner />;
+  }
+
+  return (
+    <div className="relative my-4 h-[91.5%]  w-full">
+      <div className="absolute inset-0 flex h-full flex-col  space-y-6  px-8">
+        <div className="min-h-0 flex-[1.5] ">
+          <BarChartUserCounts users={users} />
+        </div>
+        <div className="min-h-0 flex-[2]">
+          <LineChartCount users={users} groups={groups} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AdminData;

src/components/Admin/AdminSidebar.tsx

@@ -4,8 +4,7 @@ type AdminSidebarProps = {
 };
 
 const AdminSidebar = ({ option, setOption }: AdminSidebarProps) => {
-  const baseButton =
-    "px-4 py-2 text-northeastern-red font-montserrat text-base md:text-lg ";
+  const baseButton = "px-4 py-2 text-northeastern-red font-montserrat text-xl ";
   const selectedButton = " font-bold underline underline-offset-8 ";
   return (
     <div className="h-full w-full  ">

src/components/Admin/BarChartUserCounts.tsx

@@ -0,0 +1,130 @@
+import React from "react";
+import { Bar } from "react-chartjs-2";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+  ChartData,
+  ChartOptions,
+} from "chart.js";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend
+);
+
+import { TempUser } from "../../utils/types";
+
+interface BarChartOnboardingProps {
+  users: TempUser[];
+}
+
+function BarChartUserCounts({ users }: BarChartOnboardingProps) {
+  const totalCount = users.length;
+  const countOnboarded = users.filter((user) => user.isOnboarded).length;
+  const countNotOnboarded = totalCount - countOnboarded;
+  const driverCount = users.filter((user) => user.role === "DRIVER").length;
+  const riderCount = users.filter((user) => user.role === "RIDER").length;
+
+  const viewerCount = totalCount - (driverCount + riderCount);
+  const dataPoints = [
+    totalCount,
+    countOnboarded,
+    countNotOnboarded,
+    driverCount,
+    riderCount,
+    viewerCount,
+  ];
+  const barColors = [
+    "#000000",
+    "#FFA9A9",
+    "#808080",
+    "#C8102E",
+    "#DA7D25",
+    "#2454DD",
+  ];
+  const labels = [
+    "Total",
+    "Onboarded",
+    "Not Onboarded",
+    "Driver",
+    "Rider",
+    "Viewer",
+  ];
+
+  const barData: ChartData<"bar"> = {
+    labels,
+
+    datasets: [
+      {
+        label: "User Counts",
+        data: dataPoints,
+        backgroundColor: barColors,
+      },
+    ],
+  };
+
+  const barOptions: ChartOptions<"bar"> = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        display: false,
+      },
+      title: {
+        display: true,
+        text: "User Counts",
+        font: {
+          family: "Montserrat",
+          size: 18,
+          style: "normal",
+          weight: "bold",
+        },
+        color: "#000000",
+      },
+    },
+    scales: {
+      x: {
+        ticks: {
+          font: {
+            family: "Montserrat",
+            size: 16,
+            style: "normal",
+            weight: "bold",
+          },
+        },
+      },
+      y: {
+        beginAtZero: true,
+        title: {
+          display: true,
+          text: "Number of Users",
+          font: {
+            family: "Montserrat",
+            size: 16,
+            style: "normal",
+            weight: "bold",
+          },
+        },
+      },
+    },
+  };
+
+  return (
+    <div className="h-full w-full ">
+      <div className="relative h-full">
+        <Bar data={barData} options={barOptions} />
+      </div>
+    </div>
+  );
+}
+
+export default BarChartUserCounts;