Add Nav tab for benchmarks

src/components/design_system/button/Button.module.css

@@ -69,6 +69,7 @@
 .pilled {
   border-radius: 20px;
   padding: 5px 10px;
+  background-color: var(--primary-90);
 }
 
 .circular {

src/components/layout/Layout.tsx

@@ -22,8 +22,9 @@ const Layout = ({ children }: LayoutProps) => {
       <main
         className={`${isPurpleBg ? $layout.mainPurple : $layout.main}
         ${router.query.student_id ? $layout.mainStudent : ""}
-        ${router.query.goal_id ? $layout.mainGoal : ""} 
-        ${router.query.user_id ? $layout.mainStaff : ""}`}
+        ${router.query.goal_id ? $layout.mainGoal : ""}
+        ${router.query.user_id ? $layout.mainStaff : ""}
+        ${router.pathname.includes("benchmarks") ? $layout.mainPurple : ""}`}
       >
         {children}
       </main>

src/components/navbar/NavBar.tsx

@@ -1,9 +1,10 @@
 import CloseIcon from "@mui/icons-material/Close";
-import CoPresent from "@mui/icons-material/CoPresent";
+import PeopleOutline from "@mui/icons-material/PeopleOutline";
 import Logout from "@mui/icons-material/Logout";
 import MenuIcon from "@mui/icons-material/Menu";
-import PeopleOutline from "@mui/icons-material/PeopleOutline";
-import Settings from "@mui/icons-material/Settings";
+import SchoolOutlined from "@mui/icons-material/SchoolOutlined";
+import ContentPaste from "@mui/icons-material/ContentPaste";
+import SettingsOutlined from "@mui/icons-material/SettingsOutlined";
 import AppBar from "@mui/material/AppBar";
 import Box from "@mui/material/Box";
 import Drawer from "@mui/material/Drawer";
@@ -90,9 +91,10 @@ export default function NavBar() {
   const drawer = (
     <div className={$navbar.navbarDropdown}>
       <List>
-        <NavItem href="/students" icon={<PeopleOutline />} text="Students" />
-        <NavItem href="/staff" icon={<CoPresent />} text="Staff" />
-        <NavItem href="/settings" icon={<Settings />} text="Settings" />
+        <NavItem href="/benchmarks" icon={<ContentPaste />} text="Assigned" />
+        <NavItem href="/students" icon={<SchoolOutlined />} text="Students" />
+        <NavItem href="/staff" icon={<PeopleOutline />} text="Staff" />
+        <NavItem href="/settings" icon={<SettingsOutlined />} text="Settings" />
         <NavItem
           icon={<Logout />}
           text="Logout"

src/components/taskCard/TaskCard.module.css

@@ -48,7 +48,8 @@
   color: var(--grey-30);
   display: flex;
   flex-direction: column;
+  justify-content: flex-end;
   align-items: flex-end;
   gap: 3px;
-  margin: 10px 0;
+  width: 65%;
 }

src/components/taskCard/taskCard.tsx

@@ -1,11 +1,9 @@
-// import Image from "next/image";
-import React, { useMemo } from "react";
-import $taskCard from "./TaskCard.module.css";
 import $button from "@/components/design_system/button/Button.module.css";
 import $box from "@/styles/Box.module.css";
-import Link from "next/link";
-import ProgressBar from "../progressBar/progressBar";
 import { differenceInWeeks, format } from "date-fns";
+import Link from "next/link";
+import { useMemo } from "react";
+import $taskCard from "./TaskCard.module.css";
 
 interface ParaTaskCard {
   task_id: string;
@@ -23,9 +21,10 @@ interface ParaTaskCard {
 
 interface TaskCardProps {
   task: ParaTaskCard;
+  isPara: boolean;
 }
 
-const TaskCard = ({ task }: TaskCardProps) => {
+const TaskCard = ({ task, isPara }: TaskCardProps) => {
   const completionRate = useMemo(() => {
     const num = parseInt(task.completed_trials as string) || 0;
     const calculatedRate = Math.floor(
@@ -63,35 +62,35 @@ const TaskCard = ({ task }: TaskCardProps) => {
             }`}
       </div>
       <div className={$taskCard.profile}>
-        {/* <Image src={task.profile_img} height={50} width={50} alt="Student's profile picture."/> */}
-        <div
-          className={
-            completionRate >= 100 ? $taskCard.imageDone : $taskCard.image
-          }
-        ></div>
-        <div>
-          {task.first_name} {task.last_name}
-        </div>
+        {task.first_name} {task.last_name}
       </div>
-      <div>
+
+      <div style={{ display: "flex", justifyContent: "space-between" }}>
         <p>
-          <strong>{task.category}</strong> - {task.description}
+          <strong>{task?.category}</strong> - {task?.description}
         </p>
-      </div>
 
-      <div className={$taskCard.progressBar}>
-        {completionRate}% complete
-        <ProgressBar fillPercent={completionRate} />
-      </div>
+        <div style={{ display: "flex", gap: "1rem" }}>
+          {/* Para smaller screen view can click on card instead */}
+          {!isPara ? (
+            <Link
+              href={`/benchmarks/${task.task_id}`}
+              className={`${$button.secondary}`}
+            >
+              View benchmark
+            </Link>
+          ) : null}
 
-      <Link
-        href={`/benchmarks/${task.task_id}`}
-        className={`${$button.default} ${
-          completionRate >= 100 ? $button.inactive : ""
-        }`}
-      >
-        Collect data
-      </Link>
+          <Link
+            href={`/benchmarks/${task.task_id}`}
+            className={`${$button.default} ${
+              completionRate >= 100 ? $button.inactive : ""
+            }`}
+          >
+            Collect data
+          </Link>
+        </div>
+      </div>
     </div>
   );
 };

src/pages/benchmarks/index.tsx

@@ -1,14 +1,25 @@
-import React from "react";
-import TaskCard from "@/components/taskCard/taskCard";
 import { trpc } from "@/client/lib/trpc";
+import TaskCard from "@/components/taskCard/taskCard";
 import $typo from "@/styles/Typography.module.css";
-import { Container, Box } from "@mui/material";
+import FilterAlt from "@mui/icons-material/FilterAlt";
+import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
+import Sort from "@mui/icons-material/Sort";
+import { Box, Container } from "@mui/material";
 import Image from "next/image";
+import Link from "next/link";
+import { useState } from "react";
+import $button from "../../components/design_system/button/Button.module.css";
 import noBenchmarks from "../../public/img/no-benchmarks.png";
+import SearchIcon from "@mui/icons-material/Search";
 
 function Benchmarks() {
+  const [isPara, setIsPara] = useState(false);
   const { data: tasks, isLoading } = trpc.para.getMyTasks.useQuery();
 
+  const handleTogglePara = () => {
+    setIsPara(!isPara);
+  };
+
   if (isLoading) {
     return <div>Loading...</div>;
   }
@@ -33,15 +44,90 @@ function Benchmarks() {
           </Box>
         </Container>
       ) : (
-        <ul>
-          {tasks?.map((task) => {
-            return (
-              <li key={task.task_id} className={$typo.noDecoration}>
-                <TaskCard task={task} />
-              </li>
-            );
-          })}
-        </ul>
+        <Container sx={{ marginTop: "2rem" }}>
+          <Box
+            sx={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+          >
+            <h3>Assigned Students</h3>
+            <div style={{ display: "flex", gap: "1rem", alignItems: "center" }}>
+              {/* Temporary Toggle View of CM and Para */}
+              <span>{isPara ? "Para" : "Case Manager"}</span>
+              <button
+                onClick={() => handleTogglePara()}
+                style={{ padding: "0 4px" }}
+              >
+                Toggle View
+              </button>
+
+              {/* Search Pill Placeholder */}
+              <span
+                className={`${$button.secondary}`}
+                style={{
+                  display: "flex",
+                  maxWidth: "fit-content",
+                  alignItems: "center",
+                  borderRadius: "30px",
+                  padding: "4px 20px",
+                }}
+              >
+                <SearchIcon /> Search
+              </span>
+
+              {/* Filter Pill Placeholder */}
+              <span
+                className={`${$button.pilled}`}
+                style={{
+                  display: "flex",
+                  maxWidth: "fit-content",
+                  alignItems: "center",
+                  gap: "4px",
+                }}
+              >
+                <FilterAlt /> Filter <KeyboardArrowDown />
+              </span>
+
+              {/* Sort Pill Placeholder*/}
+              <span
+                className={`${$button.pilled}`}
+                style={{
+                  display: "flex",
+                  maxWidth: "fit-content",
+                  alignItems: "center",
+                  gap: "4px",
+                }}
+              >
+                <Sort /> Sort <KeyboardArrowDown />
+              </span>
+            </div>
+          </Box>
+
+          <Box sx={{ height: "75vh", overflowY: "scroll" }}>
+            {tasks?.map((task) => {
+              const completed = Math.floor(
+                Number(task.completed_trials) / Number(task.target_max_attempts)
+              );
+              return (
+                <div key={task.task_id} className={$typo.noDecoration}>
+                  {/* Temporary CM & Para View */}
+                  {isPara && !completed ? (
+                    <Link
+                      href={`/benchmarks/${task.task_id}`}
+                      style={{ color: "black", textDecoration: "none" }}
+                    >
+                      <TaskCard task={task} isPara={isPara} />
+                    </Link>
+                  ) : (
+                    <TaskCard task={task} isPara={isPara} />
+                  )}
+                </div>
+              );
+            })}
+          </Box>
+        </Container>
       )}
     </>
   );

src/styles/Box.module.css

@@ -17,7 +17,7 @@
 .inactive {
   composes: default;
   background-color: var(--grey-80);
-  border: none;
+  /* border: none; */
   color: var(--grey-50);
 }