adding stats for shirts, diet, schools

cypress/component/user/Hackpack.cy.jsx

@@ -19,7 +19,7 @@ describe("HackPacks", () => {
     cy.get('[data-cy="hackpack-link"]')
       .should(
         "have.class",
-        "flex items-center justify-between opacity-100 hover:opacity-70",
+        "items-center justify-between rounded-xl bg-white p-3 opacity-100 hover:opacity-70",
       )
       .should("have.attr", "href", link)
       .should("have.attr", "target", "_black");

package.json

@@ -49,6 +49,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
     "@react-email/components": "^0.0.25",
+    "@shadcn/ui": "^0.0.4",
     "@tailwindcss/typography": "^0.5.15",
     "@tanstack/react-query": "^5.51.11",
     "@tanstack/react-query-devtools": "^5.55.0",
@@ -58,13 +59,14 @@
     "clsx": "^2.1.1",
     "compressorjs": "^1.2.1",
     "firebase": "^10.13.1",
-    "firebase-admin": "^11.4.1",
+    "firebase-admin": "^12.5.0",
     "gray-matter": "^4.0.3",
     "input-otp": "^1.2.4",
     "jszip": "^3.10.1",
     "lucide-react": "^0.438.0",
     "next": "^14.2.7",
     "next-auth": "^4.24.7",
+    "next-route-visualizer": "^1.1.3",
     "qrcode.react": "^4.0.1",
     "react": "^18.3.1",
     "react-big-calendar": "^1.13.4",

src/app/api/contacts/route.js → src/app/api/contacts/route.ts

@@ -1,9 +1,10 @@
 import { authenticate } from "@/utils/auth";
 import { db } from "@/utils/firebase";
 import { collection, getDocs, query, where } from "firebase/firestore";
-import { NextResponse } from "next/server";
+import { NextRequest, NextResponse } from "next/server";
+import { contact } from "@/types/contacts";
 
-export const GET = async (req) => {
+export const GET = async (req: NextRequest) => {
   const res = NextResponse;
 
   const { auth, message } = await authenticate({
@@ -18,9 +19,9 @@ export const GET = async (req) => {
   }
 
   const role = req.nextUrl.searchParams.get("role");
-  const status = parseInt(req.nextUrl.searchParams.get("status"));
+  const status = parseInt(req.nextUrl.searchParams.get("status")!);
 
-  const output = [];
+  const output: contact[] = [];
 
   try {
     const snapshot = await getDocs(

src/app/api/dashboard/[type]/route.js

@@ -62,7 +62,10 @@ export const POST = async (req, { params }) => {
           [`roles.${params.type}`]: 0,
         }),
         updateDoc(doc(db, "statistics", "statistics"), {
-          [`${params.type}.0`]: increment(1),
+          [`${params.type}.status.0`]: increment(1),
+          [`${params.type}.shirt.0.${element.size}`]: increment(1),
+          [`${params.type}.diet.0.${element.diet}`]: increment(1),
+          [`${params}.participants.school.0.${element.school}`]: increment(1),
         }),
         send({
           email: user.email,
@@ -167,7 +170,6 @@ export const GET = async (req, { params }) => {
     const total = countFromServer.data().count;
     const lastDoc = output.length > 0 ? output[output.length - 1].uid : "";
     const firstDoc = output.length > 0 ? output[0].uid : "";
-
     return res.json(
       {
         message: "OK",
@@ -228,19 +230,31 @@ export const PUT = async (req, { params }) => {
           });
 
           const size = object.shirt;
+          const diet = object.diet;
+          const school = object.school;
 
           status === 1 &&
             (await updateDoc(doc(db, "statistics", "statistics"), {
-              [`${params.type}.1`]: increment(1),
-              [`${params.type}.0`]: increment(-1),
-              [`${params.type}.${size}`]: increment(1),
+              [`${params.type}.status.1`]: increment(1),
+              [`${params.type}.status.0`]: increment(-1),
+              [`${params.type}.shirt.1.${size}`]: increment(1),
+              [`${params.type}.shirt.0${size}`]: increment(-1),
+              [`${params.type}.diet.1.${diet}`]: increment(1),
+              [`${params.type}.diet.0${diet}`]: increment(-1),
+              [`${params}.participants.school.1.${school}`]: increment(1),
+              [`${params}.participants.school.0.${school}`]: increment(-1),
             }));
 
           status === -1 &&
             (await updateDoc(doc(db, "statistics", "statistics"), {
-              [`${params.type}.-1`]: increment(1),
-              [`${params.type}.0`]: increment(-1),
-              [`${params.type}.${size}`]: increment(-1),
+              [`${params.type}.status.-1`]: increment(1),
+              [`${params.type}.status.0`]: increment(-1),
+              [`${params.type}.shirt.-1.${size}`]: increment(1),
+              [`${params.type}.shirt.0.${size}`]: increment(-1),
+              [`${params.type}.diet.-1.${diet}`]: increment(1),
+              [`${params.type}.diet.0.${diet}`]: increment(-1),
+              [`${params}.participants.school.-1.${school}`]: increment(1),
+              [`${params}.participants.school.0.${school}`]: increment(-1),
             }));
         }),
       );

src/app/api/settings/route.js

@@ -23,14 +23,37 @@ const syncStatsWithDatabase = async () => {
     updateRoleCounts("teams"),
   ]);
 };
-const getRoleCount = async (role, value) => {
+const getRoleCount = async (role, value, subType, subValue) => {
   if (role === "teams") {
     return (
       await getCountFromServer(
         query(collection(db, "teams"), where(`status`, "==", value)),
       )
     ).data().count;
   }
+
+  if (subType) {
+    return (
+      await getCountFromServer(
+        query(
+          collection(db, "users"),
+          where(`${subType}`, "==", subValue),
+          where(`roles.${role}`, "==", value),
+        ),
+      )
+    ).data().count;
+  }
+  if (role === "participants" && subType === "school") {
+    return (
+      await getCountFromServer(
+        query(
+          collection(db, "users"),
+          where(`school`, "==", subValue),
+          where(`roles.${role}`, "==", value),
+        ),
+      )
+    ).data().count;
+  }
   return (
     await getCountFromServer(
       query(collection(db, "users"), where(`roles.${role}`, "==", value)),
@@ -44,11 +67,90 @@ const updateRoleCounts = async (role) => {
     getRoleCount(role, 1),
   ]);
 
-  await updateDoc(doc(db, "statistics", "statistics"), {
-    [`${role}.-1`]: roleMinusOneCount,
-    [`${role}.0`]: roleZeroCount,
-    [`${role}.1`]: roleOneCount,
+  const shirtSizes = ["XS", "S", "M", "L", "XL", "XXL"];
+  const dietOptions = [
+    "Halal",
+    "Vegan",
+    "Vegetarian",
+    "Nut Allergy",
+    "No Gluten",
+    "Lactose Intolerant",
+  ];
+  const schoolOptions = [
+    "University of California, Riverside",
+    "New York University",
+  ];
+
+  const [schoolMinusOneCount, schoolZeroCount, schoolOneCount] =
+    await Promise.all([
+      Promise.all(
+        schoolOptions.map((school) =>
+          getRoleCount("participants", -1, "school", school),
+        ),
+      ),
+      Promise.all(
+        schoolOptions.map((school) =>
+          getRoleCount("participants", 0, "school", school),
+        ),
+      ),
+      Promise.all(
+        schoolOptions.map((school) =>
+          getRoleCount("participants", 1, "school", school),
+        ),
+      ),
+    ]);
+
+  const [shirtMinusOneCount, shirtZeroCount, shirtOneCount] = await Promise.all(
+    [
+      Promise.all(
+        shirtSizes.map((size) => getRoleCount(role, -1, "shirt", size)),
+      ),
+      Promise.all(
+        shirtSizes.map((size) => getRoleCount(role, 0, "shirt", size)),
+      ),
+      Promise.all(
+        shirtSizes.map((size) => getRoleCount(role, 1, "shirt", size)),
+      ),
+    ],
+  );
+
+  const [dietMinusOneCount, dietZeroCount, dietOneCount] = await Promise.all([
+    Promise.all(
+      dietOptions.map((option) => getRoleCount(role, -1, "diet", option)),
+    ),
+    Promise.all(
+      dietOptions.map((option) => getRoleCount(role, 0, "diet", option)),
+    ),
+    Promise.all(
+      dietOptions.map((option) => getRoleCount(role, 1, "diet", option)),
+    ),
+  ]);
+
+  const updateData = {
+    [`${role}.status.-1`]: roleMinusOneCount,
+    [`${role}.status.0`]: roleZeroCount,
+    [`${role}.status.1`]: roleOneCount,
+  };
+
+  schoolOptions.forEach((school, index) => {
+    updateData[`participants.school.-1.${school}`] = schoolMinusOneCount[index];
+    updateData[`participants.school.0.${school}`] = schoolZeroCount[index];
+    updateData[`participants.school.1.${school}`] = schoolOneCount[index];
   });
+
+  shirtSizes.forEach((size, index) => {
+    updateData[`${role}.shirt.-1.${size}`] = shirtMinusOneCount[index];
+    updateData[`${role}.shirt.0.${size}`] = shirtZeroCount[index];
+    updateData[`${role}.shirt.1.${size}`] = shirtOneCount[index];
+  });
+
+  dietOptions.forEach((option, index) => {
+    updateData[`${role}.diet.-1.${option}`] = dietMinusOneCount[index];
+    updateData[`${role}.diet.0.${option}`] = dietZeroCount[index];
+    updateData[`${role}.diet.1.${option}`] = dietOneCount[index];
+  });
+
+  await updateDoc(doc(db, "statistics", "statistics"), updateData);
 };
 export const GET = async () => {
   const res = NextResponse;

src/app/visualize/page.tsx

@@ -0,0 +1,4 @@
+import Visualizer from "next-route-visualizer";
+
+const Page = () => <Visualizer />;
+export default Page;

src/components/Checkbox.tsx

@@ -2,7 +2,7 @@ import { Checkbox as Check } from "./ui/checkbox";
 
 type checkbox = {
   toggle: boolean;
-  text: string;
+  text?: string;
   color?: string;
   onClick?: () => void;
 };

src/components/admin/Tag.tsx

@@ -0,0 +1,32 @@
+import { StatusMapping } from "@/data/Statuses";
+import { Badge } from "../ui/badge";
+
+type color = {
+  background: string;
+  text: string;
+  hover: string;
+};
+
+type props = {
+  color: color;
+  text: string;
+  onClick?: () => void;
+  classes?: string;
+  statuses?: StatusMapping;
+};
+
+const Tag = ({ color, text, onClick, classes, statuses }: props) => {
+  return (
+    <Badge
+      data-cy={`${text}-tag`}
+      className={`m-0 w-fit whitespace-nowrap rounded px-2 py-0.5 text-xs md:text-sm ${classes} ${color.background} ${color.text} ${
+        onClick && `hover:cursor-pointer ${color.hover}`
+      }`}
+      onClick={onClick}
+    >
+      {isNaN(Number(text)) ? text : statuses?.[text as keyof StatusMapping]}
+    </Badge>
+  );
+};
+
+export default Tag;

src/components/admin/services/statistics/Chart.jsx

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import { Label, Pie, PieChart } from "recharts";
-import { ROLES, SIZES } from "@/data/admin/Statistics";
+import { ROLES, SIZES, DIETS, SCHOOLS } from "@/data/admin/Statistics";
 
 import { Card, CardContent } from "@/components/ui/card";
 import {
@@ -11,17 +11,27 @@ import {
   ChartTooltipContent,
 } from "@/components/ui/chart";
 
-const Chart = ({ title, data }) => {
-  const ITEMS = { ...ROLES, ...SIZES };
+const Chart = ({ title, status = null, data }) => {
+  const ITEMS = { ...ROLES, ...SIZES, ...DIETS, ...SCHOOLS };
 
-  const chartData = Object.entries(data)
-    .filter(([type]) => ROLES[type])
-    .map(([type, value]) => ({
-      type: ITEMS[type].label,
-      value: value,
-      className: ITEMS[type].className,
-      fill: ITEMS[type].fill,
-    }));
+  const statusData =
+    status !== null
+      ? [
+          {
+            type: ROLES[status].label,
+            value: 1,
+            className: ROLES[status].className,
+            fill: ROLES[status].fill,
+          },
+        ]
+      : [];
+
+  const chartData = Object.entries(data).map(([type, value]) => ({
+    type: ITEMS[type].label,
+    value: value,
+    className: ITEMS[type].className,
+    fill: ITEMS[type].fill,
+  }));
 
   const chartConfig = Object.entries(data).map(([type, value]) => {
     const label = ITEMS[type].label;
@@ -103,6 +113,14 @@ const Chart = ({ title, data }) => {
                 }}
               />
             </Pie>
+            <Pie
+              data={statusData}
+              dataKey="value"
+              nameKey="type"
+              innerRadius={55}
+              outerRadius={60}
+              strokeWidth={5}
+            />
           </PieChart>
         </ChartContainer>
       </CardContent>