SCRUM-47 Basic information about Carpool Group

chartjs-adapter-date-fns.d.ts

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

next-auth.d.ts

@@ -1,4 +1,5 @@
 import { DefaultSession } from "next-auth";
+import { Permission } from "@prisma/client";
 
 declare module "next-auth" {
   /**
@@ -8,10 +9,12 @@ declare module "next-auth" {
     user?: {
       id?: string;
       isOnboarded: boolean;
+      permission: Permission;
     } & DefaultSession["user"];
   }
 
-  interface User {
-    isOnboarded: boolean & DefaultUser;
+  interface User extends DefaultUser {
+    isOnboarded: boolean;
+    permission: Permission;
   }
 }

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",

prisma/migrations/20241119202005_increase_group_message_length/migration.sql

@@ -0,0 +1,13 @@
+-- AlterTable
+ALTER TABLE `conversation` ADD COLUMN `dateCreated` DATETIME(3) NOT NULL DEFAULT CURRENT_TIMESTAMP(3);
+
+-- AlterTable
+ALTER TABLE `group` ADD COLUMN `dateCreated` DATETIME(3) NOT NULL DEFAULT CURRENT_TIMESTAMP(3);
+
+-- AlterTable
+ALTER TABLE `user` ADD COLUMN `coop_end_date` DATE NULL,
+    ADD COLUMN `coop_start_date` DATE NULL,
+    ADD COLUMN `dateCreated` DATETIME(3) NOT NULL DEFAULT CURRENT_TIMESTAMP(3),
+    ADD COLUMN `dateModified` DATETIME(3) NOT NULL DEFAULT CURRENT_TIMESTAMP(3),
+    ADD COLUMN `group_message` TEXT NULL,
+    MODIFY `role` ENUM('RIDER', 'DRIVER', 'VIEWER') NOT NULL DEFAULT 'VIEWER';

prisma/migrations/20241119202706_add_text_type/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE `group` MODIFY `message` TEXT NOT NULL;

prisma/schema.prisma

@@ -22,6 +22,12 @@ enum Role {
   VIEWER
 }
 
+enum Permission {
+  USER
+  ADMIN
+  MANAGER
+}
+
 // Represents a Status.
 enum Status {
   ACTIVE
@@ -132,6 +138,7 @@ model User {
   accounts           Account[] // can have multiple accounts
   sessions           Session[] // can have multiple settings
   role               Role          @default(VIEWER)
+  permission         Permission    @default(USER)
   status             Status        @default(ACTIVE)
   seatAvail          Int           @default(0) @map("seat_avail")
   companyName        String        @default("") @map("company_name")
@@ -163,6 +170,7 @@ model User {
   Message            Message[]
   dateCreated        DateTime      @default(now())
   dateModified       DateTime      @default(now()) @updatedAt
+  groupMessage       String?       @map("group_message") @db.Text
 
   @@index([carpoolId])
   @@map(name: "user")
@@ -176,4 +184,4 @@ model VerificationToken {
 
   @@unique([identifier, token])
   @@map(name: "verification_token")
-}
+}

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

@@ -0,0 +1,28 @@
+type AdminSidebarProps = {
+  option: string;
+  setOption: React.Dispatch<React.SetStateAction<string>>;
+};
+
+const AdminSidebar = ({ option, setOption }: AdminSidebarProps) => {
+  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  ">
+      <div className="mt-6 flex flex-col items-start gap-4">
+        <button
+          className={baseButton + (option === "management" && selectedButton)}
+          onClick={() => setOption("management")}
+        >
+          Management
+        </button>
+        <button
+          className={baseButton + (option === "data" && selectedButton)}
+          onClick={() => setOption("data")}
+        >
+          Data
+        </button>
+      </div>
+    </div>
+  );
+};
+export default AdminSidebar;

src/components/Admin/BarChartUserCounts.tsx

@@ -0,0 +1,141 @@
+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 totalCount = activeUsers.length;
+  const inactiveCount = users.length - totalCount;
+  const countOnboarded = activeUsers.filter((user) => user.isOnboarded).length;
+  const countNotOnboarded = totalCount - countOnboarded;
+  const driverCount = activeUsers.filter(
+    (user) => user.role === "DRIVER"
+  ).length;
+  const riderCount = activeUsers.filter((user) => user.role === "RIDER").length;
+
+  const viewerCount = totalCount - (driverCount + riderCount);
+  const dataPoints = [
+    totalCount,
+    countOnboarded,
+    countNotOnboarded,
+    driverCount,
+    riderCount,
+    viewerCount,
+    inactiveCount,
+  ];
+  const barColors = [
+    "#000000",
+    "#FFA9A9",
+    "#808080",
+    "#C8102E",
+    "#DA7D25",
+    "#2454DD",
+    "#808080",
+  ];
+  const labels = [
+    "Total",
+    "Onboarded",
+    "Not Onboarded",
+    "Driver",
+    "Rider",
+    "Viewer",
+    "Inactive",
+  ];
+
+  const barData: ChartData<"bar"> = {
+    labels,
+
+    datasets: [
+      {
+        label: "Active 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 flex h-full 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;