f

src/app/dashboard/admin/programs/healthy-habits/page.tsx

@@ -1,11 +1,11 @@
 import { Box, Typography } from "@mui/material";
 
 import HealthyHabitsDashboard from "@/components/AdminDashboard/HealthyHabitsDashboard";
-import { getHealthHabitsProgramEnrollments } from "@/server/api/program-enrollments/queries";
+import { getHealthyHabitsProgramEnrollments } from "@/server/api/program-enrollments/queries";
 
 export default async function HealthyHabits() {
-  const [healthHabitsProgramEnrollments, error] =
-    await getHealthHabitsProgramEnrollments();
+  const [healthyHabitsProgramEnrollments, error] =
+    await getHealthyHabitsProgramEnrollments();
 
   if (error !== null) {
     return (
@@ -25,14 +25,16 @@ export default async function HealthyHabits() {
   return (
     <Box
       sx={{
-        height: "100vh",
         display: "flex",
+        flexDirection: "column",
         justifyContent: "center",
         alignItems: "center",
+        marginTop: "100px",
+        padding: 4,
       }}
     >
       <HealthyHabitsDashboard
-        healthHabitsProgramEnrollments={healthHabitsProgramEnrollments}
+        healthyHabitsProgramEnrollments={healthyHabitsProgramEnrollments}
       />
     </Box>
   );

src/components/AdminDashboard/HealthyHabitsDashboard/HealthyHabitsClientDashboard.tsx

@@ -27,11 +27,7 @@ const createRowFromHealthyHabitsProgramEnrollment = (
   let completed = false;
 
   if (user.healthyHabitsTrackingForms.length > 0) {
-    const date = dayjsUtil(user.healthyHabitsTrackingForms[0]?.submittedDate);
-    const lastSunday = dayjsUtil()
-      .subtract(dayjsUtil().day(), "day")
-      .startOf("day");
-
+    const latestFormSubmission = user.healthyHabitsTrackingForms[0];
     completed = date.isSame(lastSunday, "day");
   }
 
@@ -50,42 +46,40 @@ function getRows(programEnrollments: ProgramEnrollment[]): Row[] {
 }
 
 type HealthyHabitsClientDashboardProps = {
-  healthHabitsProgramEnrollments: ProgramEnrollment[];
+  healthyHabitsProgramEnrollments: ProgramEnrollment[];
 };
 
 export default function HealthyHabitsClientDashboard({
-  healthHabitsProgramEnrollments,
+  healthyHabitsProgramEnrollments,
 }: HealthyHabitsClientDashboardProps) {
-  const rows = getRows(healthHabitsProgramEnrollments);
+  const rows = getRows(healthyHabitsProgramEnrollments);
   const [searchQuery, setSearchQuery] = useState("");
 
   const columns: GridColDef<Row>[] = [
     {
       field: "firstName",
       headerName: "First name",
-      width: 150,
+      flex: 1,
     },
     {
       field: "lastName",
       headerName: "Last name",
-      width: 150,
+      flex: 1,
     },
     {
       field: "phoneNumber",
       headerName: "Phone Number",
-      width: 125,
+      flex: 1,
     },
     {
       field: "email",
       headerName: "Email",
-      minWidth: 200,
-      flex: 1,
+      flex: 2,
     },
     {
       field: "competed",
-      headerName: "Completed",
+      headerName: "Completed tracking form this week?",
       sortable: false,
-      minWidth: 100,
       flex: 1,
       renderCell: (params) => {
         const completed = params.row.completed;
@@ -120,7 +114,7 @@ export default function HealthyHabitsClientDashboard({
     <>
       <Box>
         <Typography align="center" variant="h4" sx={{ m: 2 }}>
-          Health Habits
+          Healthy Habits Clients
         </Typography>
         <Box display="flex" alignItems="center" sx={{ py: 2 }}>
           <TextField

src/components/AdminDashboard/HealthyHabitsDashboard/HealthyHabitsMetrics.tsx

@@ -1,7 +1,11 @@
 "use client";
 
-import { Typography } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 
 export default function HealthyHabitsMetrics() {
-  return <Typography>Healthy Habits Metrics</Typography>;
+  return (
+    <Box sx={{ width: "100%", display: "flex", justifyContent: "center" }}>
+      <Typography variant="h6">Metrics</Typography>
+    </Box>
+  );
 }

src/components/AdminDashboard/HealthyHabitsDashboard/index.tsx

@@ -10,11 +10,11 @@ import { ProgramEnrollment } from "@/types";
 type HealthyHabitsSections = "clients" | "metrics";
 
 type HealthyHabitsDashboardProps = {
-  healthHabitsProgramEnrollments: ProgramEnrollment[];
+  healthyHabitsProgramEnrollments: ProgramEnrollment[];
 };
 
 export default function HealthyHabitsDashboard({
-  healthHabitsProgramEnrollments,
+  healthyHabitsProgramEnrollments,
 }: HealthyHabitsDashboardProps) {
   const [selectedSection, setSelectedSection] =
     useState<HealthyHabitsSections>("clients");
@@ -31,7 +31,7 @@ export default function HealthyHabitsDashboard({
       case "clients":
         return (
           <HealthyHabitsClientDashboard
-            healthHabitsProgramEnrollments={healthHabitsProgramEnrollments}
+            healthyHabitsProgramEnrollments={healthyHabitsProgramEnrollments}
           />
         );
       case "metrics":
@@ -46,17 +46,15 @@ export default function HealthyHabitsDashboard({
       <Box
         sx={{
           display: "flex",
-          justifyContent: "flex-start",
-          alignItems: "center",
           flexDirection: "column",
-          width: "95%",
-          height: "75%",
-          marginTop: "100px",
+          justifyContent: "center",
+          alignItems: "center",
+          width: "100%",
         }}
       >
         <Box
           sx={{
-            width: "100%",
+            alignSelf: "flex-start",
           }}
         >
           <Tabs
@@ -69,7 +67,9 @@ export default function HealthyHabitsDashboard({
             <Tab label="Metrics" value="metrics" />
           </Tabs>
         </Box>
-        <Box sx={{ marginTop: 3 }}>{getSectionContent(selectedSection)}</Box>
+        <Box sx={{ marginTop: 3, width: "100%" }}>
+          {getSectionContent(selectedSection)}
+        </Box>
       </Box>
     </>
   );

src/server/api/program-enrollments/queries.ts

@@ -76,12 +76,12 @@ export async function getProgramEnrollmentForUser(
   }
 }
 
-export async function getHealthHabitsProgramEnrollments(): Promise<
+export async function getHealthyHabitsProgramEnrollments(): Promise<
   ApiResponse<ProgramEnrollment[]>
 > {
   await dbConnect();
   try {
-    const healthHabitsEnrollments = ProgramEnrollmentModel.find({
+    const healthyHabitsEnrollments = await ProgramEnrollmentModel.find({
       status: "accepted",
       program: "Healthy Habits For The Long Haul",
     })
@@ -100,7 +100,7 @@ export async function getHealthHabitsProgramEnrollments(): Promise<
       .lean<ProgramEnrollment[]>()
       .exec();
 
-    return [await healthHabitsEnrollments, null];
+    return [serializeMongooseObject(healthyHabitsEnrollments), null];
   } catch (error) {
     console.error(error);
     return [null, handleMongooseError(error)];