Additional charts and data

src/components/Admin/AdminData.tsx

@@ -1,35 +1,60 @@
 import React, { useEffect, useState } from "react";
 import Spinner from "../Spinner";
 import { trpc } from "../../utils/trpc";
-import { TempUser, TempGroup } from "../../utils/types";
+import {
+  TempUser,
+  TempGroup,
+  TempConversation,
+  TempMessage,
+  TempRequest,
+} from "../../utils/types";
 import BarChartUserCounts from "./BarChartUserCounts";
 import LineChartCount from "./LineChartCount";
+import BarChartDaysFrequency from "./BarChartDaysFrequency";
+import QuickStats from "./QuickStats";
 
 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[]>();
+  const { data: conversations } =
+    trpc.user.admin.getConversationsMessageCount.useQuery<TempConversation[]>();
+  const { data: messages = [] } =
+    trpc.user.admin.getMessages.useQuery<TempMessage[]>();
+  const { data: requests = [] } =
+    trpc.user.admin.getRequests.useQuery<TempRequest[]>();
 
   useEffect(() => {
-    if (users && groups) {
+    if (users && groups && messages && requests && conversations) {
       setLoading(false);
     }
-  }, [users, groups]);
+  }, [users, groups, messages, requests, conversations]);
 
   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] ">
+    <div className="relative my-4 h-full w-full">
+      <div className=" flex h-full flex-col  space-y-4  px-8">
+        <div className=" h-[600px] w-full">
+          <QuickStats
+            groups={groups}
+            requests={requests}
+            conversations={conversations}
+            users={users}
+          />
+        </div>
+        <div className=" h-[500px] ">
           <BarChartUserCounts users={users} />
         </div>
-        <div className="min-h-0 flex-[2]">
-          <LineChartCount users={users} groups={groups} />
+        <div className=" h-[500px]">
+          <LineChartCount users={users} groups={groups} requests={requests} />
+        </div>
+        <div className=" h-[500px]">
+          <BarChartDaysFrequency users={users} />
         </div>
       </div>
     </div>

src/components/Admin/BarChartDaysFrequency.tsx

@@ -0,0 +1,134 @@
+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 activeUsers = users.filter((user) => user.status === "ACTIVE");
+
+  const drivers = activeUsers.filter((user) => user.role === "DRIVER");
+
+  const riders = activeUsers.filter((user) => user.role === "RIDER");
+  const riderDayCount = [0, 0, 0, 0, 0, 0, 0];
+  const driverDayCount = [0, 0, 0, 0, 0, 0, 0];
+
+  riders.forEach((rider) => {
+    rider.daysWorking.split(",").forEach((day, index) => {
+      if (day === "1") {
+        riderDayCount[index] += 1;
+      }
+    });
+  });
+  drivers.forEach((driver) => {
+    driver.daysWorking.split(",").forEach((day, index) => {
+      if (day === "1") {
+        driverDayCount[index] += 1;
+      }
+    });
+  });
+
+  const labels = ["Su", "M", "Tu", "W", "Th", "F", "S"];
+
+  const barData: ChartData<"bar"> = {
+    labels,
+
+    datasets: [
+      {
+        label: "Riders",
+        data: riderDayCount,
+        backgroundColor: "#DA7D25",
+      },
+      {
+        label: "Drivers",
+        data: driverDayCount,
+        backgroundColor: "#C8102E",
+      },
+    ],
+  };
+
+  const barOptions: ChartOptions<"bar"> = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        display: true,
+      },
+      title: {
+        display: true,
+        text: "Days Carpooling Frequency",
+        font: {
+          family: "Montserrat",
+          size: 18,
+          style: "normal",
+          weight: "bold",
+        },
+        color: "#000000",
+      },
+    },
+    scales: {
+      x: {
+        stacked: true,
+        ticks: {
+          font: {
+            family: "Montserrat",
+            size: 16,
+            style: "normal",
+            weight: "bold",
+          },
+        },
+      },
+      y: {
+        stacked: true,
+        beginAtZero: true,
+        title: {
+          display: true,
+          text: "Number of Users",
+          font: {
+            family: "Montserrat",
+            size: 16,
+            style: "normal",
+            weight: "bold",
+          },
+        },
+      },
+    },
+  };
+
+  return (
+    <div className="relative  w-full ">
+      <div className="  flex h-[500px] flex-col">
+        <Bar data={barData} options={barOptions} />
+        <span className="w-full text-center font-lato text-sm text-gray-400">
+          All bars currently only include active users aside from
+          &quot;Inactive&quot;
+        </span>
+      </div>
+    </div>
+  );
+}
+
+export default BarChartUserCounts;

src/components/Admin/BarChartUserCounts.tsx

@@ -126,8 +126,8 @@ function BarChartUserCounts({ users }: BarChartOnboardingProps) {
   };
 
   return (
-    <div className="h-full w-full ">
-      <div className="relative flex h-full flex-col">
+    <div className="relative h-full w-full ">
+      <div className="relative flex max-h-[500px]  flex-col">
         <Bar data={barData} options={barOptions} />
         <span className="w-full text-center font-lato text-sm text-gray-400">
           All bars currently only include active users aside from

src/components/Admin/DisplayBox.tsx

@@ -0,0 +1,29 @@
+interface DisplayBoxProps {
+  data: {
+    data: number | string;
+    label: string;
+  }[];
+  title: string;
+}
+const DisplayBox = ({ data, title }: DisplayBoxProps) => {
+  return (
+    <div className="flex flex-col justify-center space-y-2 rounded-lg border border-black p-6 font-montserrat drop-shadow-2xl  ">
+      <div className="text-center text-2xl font-bold">{title}</div>
+      <div className="grid grid-flow-col items-center gap-1 divide-x text-center">
+        {data.map((data, index) => {
+          return (
+            <div
+              key={index}
+              className="flex h-full w-full flex-col  p-2 text-base"
+            >
+              <strong>{data.label}: </strong>
+              {data.data}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default DisplayBox;