feat: Update enrollment form info modal

package.json

@@ -56,7 +56,7 @@
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "prettier": "^3.3.3",
-    "typescript": "^5.6.2"
+    "typescript": "^5.6.3"
   },
   "packageManager": "pnpm@9.4.0"
 }

src/app/dashboard/admin/applications/page.tsx

@@ -16,7 +16,7 @@ export default async function AdminDashboardPage() {
           alignItems: "center",
         }}
       >
-        <Typography variant="body1">
+        <Typography>
           There was an error fetching pending applications
         </Typography>
       </Box>

src/app/dashboard/admin/clients/page.tsx

@@ -10,7 +10,7 @@ export default async function AdminClientsPage() {
         alignItems: "center",
       }}
     >
-      <Typography variant="body1">Admin Clients Page</Typography>
+      <Typography>Admin Clients Page</Typography>
     </Box>
   );
 }

src/app/dashboard/admin/notifications/page.tsx

@@ -10,7 +10,7 @@ export default async function AdminNotificationsPage() {
         alignItems: "center",
       }}
     >
-      <Typography variant="body1">Admin Notifications Page</Typography>
+      <Typography>Admin Notifications Page</Typography>
     </Box>
   );
 }

src/app/dashboard/admin/programs/page.tsx

@@ -10,7 +10,7 @@ export default async function AdminProgramsPage() {
         alignItems: "center",
       }}
     >
-      <Typography variant="body1">Admin Programs Page</Typography>
+      <Typography>Admin Programs Page</Typography>
     </Box>
   );
 }

src/components/AdminDashboard/PendingApplicationDashboard/PendingApplicationInfoModal/FormResponse.tsx

@@ -0,0 +1,33 @@
+import { Typography } from "@mui/material";
+
+type FormResponse = {
+  label: string;
+  value: string;
+  isListItem?: boolean;
+};
+
+export default function FormResponse({
+  label,
+  value,
+  isListItem = false,
+}: FormResponse) {
+  if (isListItem) {
+    return (
+      <Typography>
+        <Typography component="span" sx={{ fontWeight: "bold" }}>
+          - {label}:{" "}
+        </Typography>
+        {value}
+      </Typography>
+    );
+  } else {
+    return (
+      <Typography>
+        <Typography component="span" sx={{ fontWeight: "bold" }}>
+          {label}:{" "}
+        </Typography>
+        {value}
+      </Typography>
+    );
+  }
+}

src/components/AdminDashboard/PendingApplicationDashboard/PendingApplicationInfoModal/GeneralInformationResponses.tsx

@@ -0,0 +1,148 @@
+import { Box, Typography } from "@mui/material";
+
+import FormResponse from "@/components/AdminDashboard/PendingApplicationDashboard/PendingApplicationInfoModal/FormResponse";
+import { GeneralInformationSection } from "@/types/EnrollmentForm";
+
+type GeneralInformationResponsesProps = {
+  generalInformationSection: GeneralInformationSection;
+};
+
+export default function GeneralInformationResponses({
+  generalInformationSection,
+}: GeneralInformationResponsesProps) {
+  return (
+    <Box>
+      <Typography variant="h5" gutterBottom>
+        General Information Responses
+      </Typography>
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          gap: 2,
+        }}
+      >
+        <FormResponse
+          label="First Name"
+          value={generalInformationSection.firstName}
+        />
+        <FormResponse
+          label="Last Name"
+          value={generalInformationSection.lastName}
+        />
+        <FormResponse label="Email" value={generalInformationSection.email} />
+        <FormResponse
+          label="Phone Number"
+          value={generalInformationSection.phoneNumber}
+        />
+        <FormResponse
+          label="Date of Birth"
+          value={generalInformationSection.dateOfBirth}
+        />
+        <FormResponse label="Sex" value={generalInformationSection.sex} />
+        <FormResponse
+          label="Address"
+          value={generalInformationSection.address}
+        />
+        <FormResponse
+          label="Preferred Method of Contact"
+          value={generalInformationSection.preferredMethodOfContact}
+        />
+        <FormResponse
+          label="U.S. Citizen"
+          value={generalInformationSection.isUsCitizen ? "Yes" : "No"}
+        />
+        <FormResponse
+          label="Class A CDL"
+          value={generalInformationSection.hasClassACdl ? "Yes" : "No"}
+        />
+        {generalInformationSection.hasClassACdl && (
+          <FormResponse
+            label="CDL Number"
+            value={generalInformationSection.cdlNumber || "Not Provided"}
+          />
+        )}
+        <FormResponse
+          label="Trucking Industry Affiliation"
+          value={generalInformationSection.truckingIndustryAffiliation}
+        />
+        <FormResponse
+          label="Job Description"
+          value={generalInformationSection.jobDescription}
+        />
+        <FormResponse
+          label="Referral Source"
+          value={generalInformationSection.referralSource}
+        />
+        {generalInformationSection.employer.name && (
+          <FormResponse
+            label="Employer Name"
+            value={generalInformationSection.employer.name}
+          />
+        )}
+        {generalInformationSection.employer.contact && (
+          <FormResponse
+            label="Employer Contact"
+            value={generalInformationSection.employer.contact}
+          />
+        )}
+
+        <FormResponse
+          label="Monthly Household Expenses"
+          value={`$${generalInformationSection.monthlyHouseholdExpenses}`}
+        />
+        <FormResponse
+          label="Is A Owner Or Operator"
+          value={generalInformationSection.isOwnerOperator ? "Yes" : "No"}
+        />
+        {generalInformationSection.isOwnerOperator && (
+          <Box display="flex" flexDirection="column" gap={1}>
+            <FormResponse
+              label="Business Income"
+              value={
+                generalInformationSection.ownerOperatorInfo.businessIncome
+                  ? `$${generalInformationSection.ownerOperatorInfo.businessIncome}`
+                  : "Not Provided"
+              }
+              isListItem={true}
+            />
+            <FormResponse
+              label="Business Expenses"
+              value={
+                generalInformationSection.ownerOperatorInfo.businessExpenses
+                  ? `$${generalInformationSection.ownerOperatorInfo.businessExpenses}`
+                  : "Not Provided"
+              }
+              isListItem={true}
+            />
+          </Box>
+        )}
+        <FormResponse
+          label="Acknowledged Privacy Notice"
+          value={
+            generalInformationSection.hasAcknowledgedPrivacyNotice
+              ? "Yes"
+              : "No"
+          }
+        />
+        <FormResponse
+          label="Acknowledged HIPAA Notice"
+          value={
+            generalInformationSection.hasAcknowledgedHipaaNotice ? "Yes" : "No"
+          }
+        />
+        {generalInformationSection.doctors.map((doctor, index) => (
+          <Box key={doctor.id} display="flex" flexDirection="column" gap={1}>
+            <Typography variant="h6">Doctor {index + 1}</Typography>
+            <FormResponse label="Name" value={doctor.name} isListItem={true} />
+            <FormResponse
+              label="Phone"
+              value={doctor.phone}
+              isListItem={true}
+            />
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+}