Redesign/data entry page

package.json

@@ -50,13 +50,14 @@
     "gcp-metadata": "^6.1.0",
     "kysely": "^0.27.4",
     "ms": "^2.1.3",
+    "mustache": "^4.2.0",
     "next": "^14.2.18",
     "next-auth": "4.24.10",
     "nodemailer": "^6.9.16",
     "pg": "^8.13.1",
     "pg-connection-string": "^2.7.0",
     "postgres-migrations": "^5.3.0",
-    "puppeteer": "24.16.0",
+    "puppeteer": "^24.16.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-timer-hook": "^3.0.8",

src/backend/routers/para.ts

@@ -75,7 +75,9 @@ export const para = router({
         "task.task_id",
         "student.first_name",
         "student.last_name",
+        "student.student_id",
         "goal.category",
+        "goal.goal_id",
         "benchmark.benchmark_id",
         "benchmark.description",
         "benchmark.instructions",

src/components/benchmarks/BenchmarkListElement.tsx

@@ -172,7 +172,9 @@ const BenchmarkListElement = ({
                   textAlign: "center",
                 }}
               >
-                <Link href={`/benchmarks/${benchmark.benchmark_id}`}>
+                <Link
+                  href={`${router.asPath}/benchmarks/${benchmark.benchmark_id}/dataEntry`}
+                >
                   <Button
                     variant="tertiary"
                     startIcon={<ContentPasteOutlinedIcon fontSize="medium" />}

src/components/data-entry/GoalCard.module.css

@@ -0,0 +1,27 @@
+.GridItems {
+  background-color: var(--primary-99);
+  border-radius: 8px;
+  padding: 16px;
+  gap: 16px;
+  text-align: start;
+
+  @media (max-width: 600px) {
+    width: 100%;
+  }
+}
+.GridItems > h1 {
+  color: var(--primary-20);
+  font-weight: 600;
+  font-size: 20px;
+
+  font-family: var(--quicksand);
+}
+
+.GridItems > p {
+  margin-top: 5px;
+  font-family: var(--inter);
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 150%;
+  color: var(--primary-20);
+}

src/components/data-entry/GoalCard.tsx

@@ -0,0 +1,64 @@
+import { Card, CardContent, Grid2, Stack } from "@mui/material";
+
+import Chip from "../design_system/chip/Chip";
+
+import Button from "@/components/design_system/button/Button";
+
+import type { Benchmark } from "@/types/global";
+
+import styles from "./GoalCard.module.css";
+
+import { useRouter } from "next/router";
+
+export default function BenchmarksContainer({
+  benchmarks,
+}: {
+  benchmarks: Benchmark | undefined;
+}) {
+  const router = useRouter();
+  return (
+    <Card>
+      <CardContent>
+        <Chip
+          variant="task"
+          label={`Benchmark #${benchmarks ? benchmarks?.number.toString() : ""}`}
+          sx={{ marginTop: "10px", marginBottom: "10px" }}
+        />
+        <p>{benchmarks?.description}</p>
+        <Grid2
+          container
+          spacing={2}
+          columnSpacing={{ xs: 1, sm: 2, md: 3 }}
+          direction={{ xs: "column", sm: "row" }}
+          sx={{ marginTop: "30px", width: "100%", marginBottom: "1.5rem" }}
+        >
+          <Grid2 size={6} className={styles.GridItems}>
+            <h1>Frequency</h1>
+            <p>{benchmarks?.frequency}</p>
+          </Grid2>
+          <Grid2 size={6} className={styles.GridItems}>
+            <h1>Instructions</h1>
+            <p>{benchmarks?.instructions}</p>
+          </Grid2>
+          <Grid2 size={6} className={styles.GridItems}>
+            <h1>Materials</h1>
+            <p>{benchmarks?.materials}</p>
+          </Grid2>
+          <Grid2 size={6} className={styles.GridItems}>
+            <h1>Activity Setup</h1>
+            <p>{benchmarks?.setup}</p>
+          </Grid2>
+        </Grid2>
+        <Stack alignItems="center">
+          <Button
+            onClick={() =>
+              router.push(`/benchmarks/${benchmarks?.benchmark_id}`)
+            }
+          >
+            Start Trial
+          </Button>
+        </Stack>
+      </CardContent>
+    </Card>
+  );
+}

src/components/design_system/chip/Chip.tsx

@@ -4,6 +4,7 @@ import { ReactElement } from "react";
 
 import CalendarMonthOutlinedIcon from "@mui/icons-material/CalendarMonthOutlined";
 import ContentPasteIcon from "@mui/icons-material/ContentPaste";
+import AdsClickOutlinedIcon from "@mui/icons-material/AdsClickOutlined";
 
 interface ChipProps {
   clickable?: boolean;
@@ -25,7 +26,8 @@ interface ChipProps {
     | "primary"
     | "secondary"
     | "calendar"
-    | "task";
+    | "task"
+    | "target";
   icon?: ReactElement;
   className?: string;
 }
@@ -60,6 +62,14 @@ function Chip({
               gap: "8px",
             }}
           />
+        ) : variant === "target" ? (
+          <AdsClickOutlinedIcon
+            style={{
+              color: "black",
+              width: "16px",
+              gap: "8px",
+            }}
+          />
         ) : (
           icon
         )

src/components/goal-header/goal-header.tsx

@@ -1,16 +1,18 @@
 import {
   Stack,
   Typography,
-  Grid,
   Container,
   TextareaAutosize,
+  Box,
 } from "@mui/material";
 import { format } from "date-fns";
 import { useState } from "react";
 
+import Chip from "@/components/design_system/chip/Chip";
 import Button from "@/components/design_system/button/Button";
 import { trpc } from "@/client/lib/trpc";
 import $GoalPage from "@/styles/GoalPage.module.css";
+
 type GoalHeaderProps = {
   goalId: string;
   name: string;
@@ -29,6 +31,7 @@ export const GoalHeader = ({
   const [editGoal, setEditGoal] = useState(false);
   const [editGoalInput, setEditGoalInput] = useState("");
   const utils = trpc.useContext();
+
   const showEditGoal = () => {
     setEditGoal(true);
     setEditGoalInput(description || "");
@@ -53,80 +56,120 @@ export const GoalHeader = ({
     setEditGoal(false);
     setEditGoalInput("");
   };
+
   return (
     <Container className={$GoalPage.goalDescriptionContainer}>
-      <Grid container justifyContent="space-between">
-        <Stack spacing={2} sx={{ marginBottom: "28px" }}>
-          <Stack direction="row" alignItems="center" spacing={1}>
-            <Typography variant="h3" color="var(--primary-40)">
-              {name}
-            </Typography>
-            <Typography variant="h3">|</Typography>
-            <Typography variant="h3" color="#788591">
-              Added: {format(new Date(createdAt), "MM/dd/yyyy")}
-            </Typography>
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          gap: 2,
+        }}
+      >
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: { xs: "column", md: "row" },
+            justifyContent: "space-between",
+            alignItems: { xs: "flex-start", md: "center" },
+            gap: 2,
+          }}
+        >
+          <Stack
+            direction={{ xs: "column", md: "row" }}
+            spacing={1.5}
+            alignItems="flex-start"
+            sx={{ flexShrink: 0 }}
+          >
+            <Chip label={name} variant="target" />
+            <Chip
+              label={`Created on: ${format(new Date(createdAt), "MMM, dd, yyyy")}`}
+              variant="calendar"
+            />
           </Stack>
-        </Stack>
-        {editable && (
-          <Grid
+          {editable && (
+            <Box
+              sx={{
+                display: "flex",
+                flexDirection: { xs: "column", sm: "row" },
+                gap: 1,
+                width: { xs: "100%", md: "auto" },
+              }}
+            >
+              {!editGoal && (
+                <Box sx={{ display: "flex", justifyContent: "right" }}>
+                  <Button
+                    variant="tertiary"
+                    onClick={showEditGoal}
+                    sx={{ width: { md: "auto" } }}
+                  >
+                    Edit goal
+                  </Button>
+                  <Button
+                    variant="secondary"
+                    onClick={() => alert("to be implemented")}
+                    sx={{ width: { md: "auto" } }}
+                  >
+                    View all goals
+                  </Button>
+                </Box>
+              )}
+              {editGoal && (
+                <>
+                  <Button
+                    variant="tertiary"
+                    onClick={cancelEditGoal}
+                    sx={{ width: { xs: "100%", md: "auto" } }}
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    onClick={submitEditGoal}
+                    sx={{ width: { xs: "100%", md: "auto" } }}
+                  >
+                    Save
+                  </Button>
+                </>
+              )}
+            </Box>
+          )}
+        </Box>
+        {editGoal && editable ? (
+          <TextareaAutosize
+            className={$GoalPage.editGoalFormTextArea}
+            value={editGoalInput}
+            name="description"
+            onChange={(e) => {
+              setEditGoalInput(e.target.value);
+            }}
+            style={{
+              width: "100%",
+              padding: "24px",
+              fontSize: "0.95rem",
+              lineHeight: "1.6",
+              borderRadius: "8px",
+              border: "1px solid var(--outline)",
+              fontFamily: "inherit",
+              minHeight: "100px",
+              backgroundColor: "var(--on-primary)",
+            }}
+          />
+        ) : (
+          <Typography
+            variant="body1"
             sx={{
-              display: "flex",
-              flexDirection: "start",
-              justifyContent: "start",
-              justifyItems: "start",
-              height: "100%",
-              pb: 1,
+              fontSize: "16px",
+              lineHeight: "150%",
+              color: "var(--on-background)",
+              fontFamily: "var(--inter)",
+              fontWeight: 400,
+              letterSpacing: "0%",
             }}
-            item
           >
-            {!editGoal && (
-              <>
-                <Button
-                  variant="tertiary"
-                  onClick={showEditGoal}
-                  sx={{
-                    margin: "auto",
-                  }}
-                >
-                  Edit Goal
-                </Button>
-                <Button
-                  variant="secondary"
-                  onClick={() => alert("to be implemented")}
-                >
-                  View all goals
-                </Button>
-              </>
-            )}
-            {editGoal && (
-              <>
-                <Button
-                  variant="tertiary"
-                  form="editGoalForm"
-                  onClick={cancelEditGoal}
-                >
-                  Cancel
-                </Button>
-                <Button form="editGoalForm" onClick={submitEditGoal}>
-                  Save
-                </Button>
-              </>
-            )}
-          </Grid>
+            {description}
+          </Typography>
         )}
-      </Grid>
-      {editGoal && editable && (
-        <TextareaAutosize
-          className={$GoalPage.editGoalFormTextArea}
-          value={editGoalInput}
-          name="description"
-          onChange={(e) => {
-            setEditGoalInput(e.target.value);
-          }}
-        />
-      )}
-
-      {!editGoal && <Typography variant="body1">{description}</Typography>}
+      </Box>
     </Container>
   );
 };