Applicant View Cleanup (#215)

* fixed the frontend boxes

* merge fix

---------

Co-authored-by: Ryaken Nakamoto <108379394+Ryaken-Nakamoto@users.noreply.github.com>
Co-authored-by: ryaken-nakamoto <ryakenNakamoto@gmail.com>

Author: SushiS1ay3r

apps/backend/scripts/seed.config.json

@@ -1,8 +1,8 @@
 {
   "personalUser": {
-    "firstName": "Ryaken",
-    "lastName": "Nakamoto",
-    "email": "nakamoto.r@husky.neu.edu",
+    "firstName": "Daniel",
+    "lastName": "Huang",
+    "email": "huang.danie@husky.neu.edu",
     "status": "Admin"
   }
 }

apps/frontend/src/features/applicant/components/ApplicantView/ApplicationDetailsCard.tsx

@@ -0,0 +1,65 @@
+import { Box, Typography, Stack } from '@mui/material';
+import { Application } from '@sharedTypes/types/application.types';
+
+interface ApplicationDetailsCardProps {
+  application: Application;
+}
+
+export const ApplicationDetailsCard = ({
+  application,
+}: ApplicationDetailsCardProps) => {
+  return (
+    <Box sx={{ mt: 3 }}>
+      <Typography variant="h6" sx={{ mb: 2 }}>
+        Application Details
+      </Typography>
+      <Box
+        sx={{
+          padding: 3,
+          backgroundColor: '#1e1e1e',
+          borderRadius: 2,
+          boxShadow: 2,
+        }}
+      >
+        <Stack spacing={1.5}>
+          <Box>
+            <Typography variant="caption" sx={{ color: '#999' }}>
+              Year
+            </Typography>
+            <Typography variant="body1">{application.year}</Typography>
+          </Box>
+          <Box>
+            <Typography variant="caption" sx={{ color: '#999' }}>
+              Semester
+            </Typography>
+            <Typography variant="body1">{application.semester}</Typography>
+          </Box>
+          <Box>
+            <Typography variant="caption" sx={{ color: '#999' }}>
+              Position
+            </Typography>
+            <Typography variant="body1">{application.position}</Typography>
+          </Box>
+          <Box>
+            <Typography variant="caption" sx={{ color: '#999' }}>
+              Stage
+            </Typography>
+            <Typography variant="body1">{application.stage}</Typography>
+          </Box>
+          <Box>
+            <Typography variant="caption" sx={{ color: '#999' }}>
+              Status
+            </Typography>
+            <Typography variant="body1">{application.stageProgress}</Typography>
+          </Box>
+          <Box>
+            <Typography variant="caption" sx={{ color: '#999' }}>
+              Applications
+            </Typography>
+            <Typography variant="body1">{application.numApps}</Typography>
+          </Box>
+        </Stack>
+      </Box>
+    </Box>
+  );
+};

apps/frontend/src/features/applicant/components/ApplicantView/ApplicationResponsesList.tsx

@@ -0,0 +1,61 @@
+import {
+  Typography,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  Box,
+} from '@mui/material';
+import { DoneOutline } from '@mui/icons-material';
+import { Response } from '@sharedTypes/types/application.types';
+
+interface ApplicationResponsesListProps {
+  responses: Response[];
+}
+
+export const ApplicationResponsesList = ({
+  responses,
+}: ApplicationResponsesListProps) => {
+  if (!responses || responses.length === 0) {
+    return null;
+  }
+
+  return (
+    <Box sx={{ mt: 3 }}>
+      <Typography variant="h6" sx={{ mb: 2 }}>
+        Application Responses
+      </Typography>
+      <List disablePadding dense>
+        {responses.map((response, index) => (
+          <ListItem
+            key={index}
+            sx={{
+              alignItems: 'flex-start',
+              backgroundColor: '#1e1e1e',
+              borderRadius: 1,
+              mb: 1,
+              padding: 2,
+            }}
+          >
+            <ListItemIcon sx={{ minWidth: 'auto', mr: 2, mt: 0.5 }}>
+              <DoneOutline sx={{ color: '#4CAF50' }} />
+            </ListItemIcon>
+            <ListItemText
+              primary={
+                <Typography variant="body2" sx={{ color: '#999', mb: 0.5 }}>
+                  {response.question}
+                </Typography>
+              }
+              secondary={
+                <Typography variant="body1" sx={{ color: 'white' }}>
+                  {response.answer}
+                </Typography>
+              }
+              sx={{ m: 0 }}
+            />
+          </ListItem>
+        ))}
+      </List>
+    </Box>
+  );
+};

apps/frontend/src/features/applicant/components/ApplicantView/RecruitmentStageCard.tsx

@@ -0,0 +1,27 @@
+import { Box, Typography } from '@mui/material';
+
+interface RecruitmentStageCardProps {
+  stage: string;
+}
+
+export const RecruitmentStageCard = ({ stage }: RecruitmentStageCardProps) => {
+  return (
+    <Box
+      sx={{
+        padding: 3,
+        backgroundColor: '#1e1e1e',
+        borderRadius: 2,
+        boxShadow: 2,
+        textAlign: 'center',
+        mb: 3,
+      }}
+    >
+      <Typography variant="h6" sx={{ mb: 1 }}>
+        Recruitment Stage
+      </Typography>
+      <Typography variant="body1" sx={{ color: '#90caf9' }}>
+        {stage}
+      </Typography>
+    </Box>
+  );
+};