feat: Add healthy habits client history modal to admin view (#104)

src/components/AdminDashboard/HealthyHabitsDashboard/HealthyHabitsClientDashboard.tsx

@@ -7,17 +7,26 @@ import { Box, TextField, Typography } from "@mui/material";
 import { DataGrid, GridColDef } from "@mui/x-data-grid";
 import { useState } from "react";
 
-import { ClientUser, ProgramEnrollment } from "@/types";
+import {
+  ClientUser,
+  HealthyHabitsTrackingForm,
+  ProgramEnrollment,
+  User,
+} from "@/types";
 import dayjsUtil from "@/utils/dayjsUtil";
 import getClosestPastSunday from "@/utils/getClosestPastSunday";
 
+import HealthyHabitsHistoryModal from "./HealthyHabitsHistoryModal";
+
 export type Row = {
   id?: string;
   lastName: string;
   firstName: string;
   phoneNumber: string;
   email: string;
+  trackingForms: HealthyHabitsTrackingForm[];
   completed: boolean;
+  user: User;
 };
 
 const createRowFromHealthyHabitsProgramEnrollment = (
@@ -44,7 +53,9 @@ const createRowFromHealthyHabitsProgramEnrollment = (
     firstName: user.firstName,
     phoneNumber: user.enrollmentForm.generalInformationSection.phoneNumber,
     email: user.email,
+    trackingForms: user.healthyHabitsTrackingForms,
     completed,
+    user,
   };
 };
 
@@ -67,27 +78,48 @@ export default function HealthyHabitsClientDashboard({
       field: "firstName",
       headerName: "First name",
       flex: 1,
+      minWidth: 150,
     },
     {
       field: "lastName",
       headerName: "Last name",
       flex: 1,
+      minWidth: 150,
     },
     {
       field: "phoneNumber",
       headerName: "Phone Number",
       flex: 1,
+      minWidth: 125,
     },
     {
       field: "email",
       headerName: "Email",
       flex: 2,
+      minWidth: 200,
+    },
+    {
+      field: "history",
+      headerName: "View history",
+      sortable: false,
+      align: "center",
+      flex: 1,
+      minWidth: 100,
+      renderCell: (params) => {
+        return (
+          <HealthyHabitsHistoryModal
+            trackingForms={params.row.trackingForms}
+            user={params.row.user}
+          />
+        );
+      },
     },
     {
-      field: "competed",
+      field: "completed",
       headerName: "Completed tracking form this week?",
       sortable: false,
       flex: 1,
+      minWidth: 250,
       renderCell: (params) => {
         const completed = params.row.completed;
 

src/components/AdminDashboard/HealthyHabitsDashboard/HealthyHabitsHistoryModal.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import InfoIcon from "@mui/icons-material/Info";
+import { Box, Button, Fade, Modal, Typography } from "@mui/material";
+import { useState } from "react";
+
+import HealthyHabitsHistory from "@/components/ClientDashboard/HealthyHabits/HealthyHabitsHistory";
+import { ClientUser, HealthyHabitsTrackingForm, User } from "@/types";
+
+type HealthyHabitsHistoryModalProps = {
+  trackingForms: HealthyHabitsTrackingForm[];
+  user: User;
+};
+
+const style = {
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  width: "80vw",
+  maxHeight: "80vh",
+  overflowY: "auto",
+  bgcolor: "background.paper",
+  boxShadow: 2,
+  p: 4,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: 2,
+};
+
+export default function HealthyHabitsHistoryModal({
+  trackingForms,
+  user,
+}: HealthyHabitsHistoryModalProps) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Box width="100%">
+      {/* Info Button */}
+      <Button variant="contained" onClick={() => setOpen(true)}>
+        <InfoIcon />
+      </Button>
+
+      {/* Modal */}
+      <Modal
+        aria-labelledby="transition-modal-title"
+        aria-describedby="transition-modal-description"
+        open={open}
+        onClose={() => setOpen(false)}
+        closeAfterTransition
+      >
+        <Fade in={open}>
+          <Box sx={style}>
+            <Typography variant="h4">
+              Healthy Habits Tracking Form History
+            </Typography>
+            <HealthyHabitsHistory
+              initialForms={trackingForms}
+              user={user as ClientUser}
+            />
+            <Button
+              variant="outlined"
+              onClick={() => setOpen(false)}
+              sx={{ width: "50%" }}
+            >
+              Close
+            </Button>
+          </Box>
+        </Fade>
+      </Modal>
+    </Box>
+  );
+}