Charleen/stat toggles

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

@@ -1,17 +1,21 @@
 "use client";
+import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { Label } from "@/components/ui/label";
 import Heatmap from "./heatmap";
 import { AGES, DIETS, GENDERS, SHIRTS } from "@/data/form/information";
 import { api } from "@/utils/api";
 import { STATUSES } from "@/data/statuses";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 
 const Statistics = () => {
   const { data } = useQuery({
     queryKey: ["/admin/statistics"],
     queryFn: async () => api({ url: "/api/statistics", method: "GET" }),
   });
 
+  const [value, setValue] = useState("Accepted");
+
   const roles = [
     "participants",
     "judges",
@@ -30,6 +34,12 @@ const Statistics = () => {
     gender: GENDERS,
   };
 
+  const mappings = {
+    Pending: 0,
+    Accepted: 1,
+    Rejected: 2,
+  };
+
   const heatmaps = Object.keys(orders).map((label) => ({
     key: label,
     labels: orders[label],
@@ -41,29 +51,31 @@ const Statistics = () => {
   return (
     <div className="flex h-full flex-col py-4 font-poppins">
       <Label className="pr-5 text-2xl font-bold">Statistics</Label>
+      <div className="flex h-full items-start">
+        <ToggleGroup
+          type="single"
+          value={value}
+          onValueChange={(value) => {
+            if (value) setValue(value);
+          }}
+        >
+          {Object.keys(mappings).map((value, index) => (
+            <ToggleGroupItem value={value} key={index}>
+              {value}
+            </ToggleGroupItem>
+          ))}
+        </ToggleGroup>
+      </div>
+
       {heatmaps.map(({ key, values, labels }) => (
         <>
           <Label className="pr-5 text-xl font-medium capitalize">{key}</Label>
-          <div className="grid grid-cols-3 gap-4">
-            <Heatmap
-              label="Pending"
-              data={values[0]}
-              xLabels={labels}
-              yLabels={roles}
-            />
-            <Heatmap
-              label="Accepted"
-              data={values[1]}
-              xLabels={labels}
-              yLabels={roles}
-            />
-            <Heatmap
-              label="Rejected"
-              data={values[2]}
-              xLabels={labels}
-              yLabels={roles}
-            />
-          </div>
+          <Heatmap
+            label={value}
+            data={values[mappings[value]]}
+            xLabels={labels}
+            yLabels={roles}
+          />
         </>
       ))}
     </div>

src/components/user/find/index.tsx

@@ -47,7 +47,7 @@ const Find = () => {
   return (
     <div className="flex h-[calc(100vh-48px)] w-full flex-col">
       <div className="pb-3 pt-4">
-        <Label className="pr-5 text-2xl font-bold">Team</Label>
+        <Label className="pr-5 text-2xl font-bold">Find a Team</Label>
       </div>
       <Toolbar data={ideas} setSearch={setSearch} />
       <div ref={ref} className="relative h-full overflow-y-scroll">
@@ -60,10 +60,11 @@ const Find = () => {
             {getVirtualItems().map(({ index, size, start }) => {
               if (index % 4) return null;
               const row = search.slice(index, index + 4);
+
               return (
                 <div
                   key={`row: ${Math.floor(index / 4)}`}
-                  className="absolute left-0 top-0 grid w-full grid-cols-4"
+                  className="grid w-full grid-cols-4 gap-4"
                   style={{
                     height: `${size}px`,
                     transform: `translateY(${start}px)`,
@@ -74,7 +75,7 @@ const Find = () => {
                       key={`column: ${i}`}
                       ref={measureElement}
                       data-index={index + i}
-                      className="flex items-start p-2"
+                      className="py-4"
                     >
                       <Idea
                         title={title}

src/components/user/resources/resources.tsx

@@ -11,7 +11,7 @@ const Resources = () => {
   return (
     <div className="flex h-full flex-col gap-3 py-4">
       <div className="sticky top-0 z-20 bg-gray-100">
-        <Label className="pr-5 text-2xl font-bold">Hackpacks</Label>
+        <Label className="pr-5 text-2xl font-bold">Resources</Label>
         <Toolbar data={HACKPACKS} setSearch={setSearch} />
       </div>