#2811 setup onboarding progress bar

src/backend/tests/unmocked/organization.test.ts

@@ -280,8 +280,8 @@ describe('Organization Tests', () => {
       });
 
       expect(allContacts.length).toBe(2);
-      expect(allContacts[0].userId).toBe(testBatman.userId);
-      expect(allContacts[1].userId).toBe(testSuperman.userId);
+      expect(allContacts.some((contact) => contact.userId === testBatman.userId)).toBeTruthy();
+      expect(allContacts.some((contact) => contact.userId === testSuperman.userId)).toBeTruthy();
 
       expect(updatedOrganization).not.toBeNull();
       expect(updatedOrganization.contacts[0].title).toBe('Chief Software Engineer');

src/frontend/src/components/OnboardingProgressBar.tsx

@@ -0,0 +1,44 @@
+import { Box, LinearProgress, linearProgressClasses, styled, SxProps, Typography } from '@mui/material';
+
+interface OnboardingProgressBarProps {
+  value: number;
+  text?: string;
+  typographySx?: SxProps;
+  progressBarSx?: SxProps;
+}
+
+const StyledProgressBar = styled(LinearProgress)(() => ({
+  height: '2.5vh',
+  borderRadius: 15,
+  border: '1px solid white',
+  [`&.${linearProgressClasses.colorPrimary}`]: {
+    backgroundColor: 'transparent'
+  },
+  [`& .${linearProgressClasses.bar}`]: {
+    borderRadius: 5,
+    backgroundColor: '#ef4345'
+  }
+}));
+
+const OnboardingProgressBar: React.FC<OnboardingProgressBarProps> = ({ value, text, typographySx, progressBarSx }) => {
+  return (
+    <Box position="relative" display="flex" alignItems="center" width="100%">
+      <StyledProgressBar variant="determinate" value={value} style={{ flexGrow: 1 }} sx={progressBarSx} />
+      <Typography
+        variant="caption"
+        sx={{
+          ml: 1,
+          position: 'absolute',
+          left: '10px',
+          fontWeight: 'bold',
+          color: value > 50 ? 'white' : 'text.primary',
+          ...typographySx
+        }}
+      >
+        {`${Math.round(value)}% ${text ? text : ''}`}
+      </Typography>
+    </Box>
+  );
+};
+
+export default OnboardingProgressBar;

src/frontend/src/pages/HomePage/OnboardingHomePage.tsx

@@ -1,16 +1,19 @@
-import { Box, Grid, Typography } from '@mui/material';
+import React, { useEffect } from 'react';
+import { Box, Grid, Typography, useTheme } from '@mui/material';
 import PageLayout from '../../components/PageLayout';
 import { useCurrentOrganization } from '../../hooks/organizations.hooks';
-import { useEffect } from 'react';
 import LoadingIndicator from '../../components/LoadingIndicator';
 import ErrorPage from '../ErrorPage';
 import { useHomePageContext } from '../../app/HomePageContext';
 import ChecklistSection from './components/ChecklistSection';
 import OnboardingInfoSection from './components/OnboardingInfoSection';
+import OnboardingProgressBar from '../../components/OnboardingProgressBar';
+import { NERButton } from '../../components/NERButton';
 
 const OnboardingHomePage = () => {
   const { data: organization, isError, error, isLoading } = useCurrentOrganization();
   const { setCurrentHomePage } = useHomePageContext();
+  const theme = useTheme();
 
   useEffect(() => {
     setCurrentHomePage('onboarding');
@@ -21,14 +24,11 @@ const OnboardingHomePage = () => {
 
   return (
     <PageLayout title="Home" hidePageTitle>
-      <Grid container display={'flex'} alignItems={'center'} marginLeft={2} marginTop={4}>
+      <Grid container display="flex" alignItems="center" justifyContent={'space-between'} padding={1} marginTop={4}>
         <Grid item xs={12} md={7}>
           <Typography sx={{ fontSize: '2.5em' }}>Welcome to the {organization.name} Team</Typography>
         </Grid>
-        {/* This will be replaced with the 'Finished' button*/}
-        <Grid item xs={12} md={5} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
-          <Typography sx={{ fontSize: '2em' }}>Finished</Typography>
-        </Grid>
+        <NERButton variant="contained">Finished?</NERButton>
       </Grid>
       <Grid
         container
@@ -38,11 +38,29 @@ const OnboardingHomePage = () => {
           flexDirection: 'column'
         }}
       >
-        <Box display={'flex'} justifyContent={'center'}>
-          {/* This will be replaced with the 'Progress Bar' component*/}
-          <Typography sx={{ fontSize: '2em', mt: 4, ml: 2 }}>Progress Bar</Typography>
+        <Box display="flex" justifyContent="center">
+          <Box
+            sx={{
+              backgroundColor: theme.palette.background.paper,
+              borderRadius: 5,
+              p: 3.5,
+              flexGrow: 1,
+              width: '100%',
+              mt: 5,
+              ml: 4,
+              display: 'flex',
+              alignItems: 'center'
+            }}
+          >
+            <OnboardingProgressBar
+              value={50}
+              text={'Complete'}
+              typographySx={{ fontSize: '1.2em' }}
+              progressBarSx={{ height: '3vh' }}
+            />
+          </Box>
         </Box>
-        <Grid container display={'flex'}>
+        <Grid container display="flex">
           <Grid
             item
             xs={12}
@@ -67,4 +85,5 @@ const OnboardingHomePage = () => {
     </PageLayout>
   );
 };
+
 export default OnboardingHomePage;

src/frontend/src/pages/HomePage/components/Checklist.tsx

@@ -3,6 +3,7 @@ import { Checklist as ChecklistType } from 'shared';
 import { Typography, Grid, Box, IconButton, useTheme } from '@mui/material';
 import { KeyboardArrowRight, KeyboardArrowDown } from '@mui/icons-material';
 import Task from './Task';
+import OnboardingProgressBar from '../../../components/OnboardingProgressBar';
 
 const Checklist: React.FC<{ parentChecklists: ChecklistType[]; checklistName?: string }> = ({
   parentChecklists,
@@ -16,19 +17,19 @@ const Checklist: React.FC<{ parentChecklists: ChecklistType[]; checklistName?: s
   };
 
   return (
-    <Box sx={{ backgroundColor: theme.palette.background.paper, borderRadius: 5 }}>
-      <Grid container>
-        <Grid item xs={12} padding={2.5}>
-          <Grid display="flex" alignItems="center" justifyContent="space-between">
-            <Typography fontSize="2em" fontWeight="bold">
-              {checklistName} Checklist
-            </Typography>
-            <Grid display="flex" alignItems="center" gap={2}>
-              <progress value={50} max={100} />
-              <IconButton onClick={toggleShowTasks}>{showTasks ? <KeyboardArrowDown /> : <KeyboardArrowRight />}</IconButton>
-            </Grid>
-          </Grid>
-          {showTasks && (
+    <Box sx={{ backgroundColor: theme.palette.background.paper, borderRadius: 5, p: 2 }}>
+      <Grid container spacing={2}>
+        <Grid item xs={12} container justifyContent="space-between" alignItems="center" sx={{ flexGrow: 1 }}>
+          <Typography fontSize="2em" fontWeight="bold" sx={{ marginRight: 2 }}>
+            {checklistName ?? 'General'} Checklist
+          </Typography>
+          <Box sx={{ flexGrow: 1, mx: 2 }}>
+            <OnboardingProgressBar value={51} />
+          </Box>
+          <IconButton onClick={toggleShowTasks}>{showTasks ? <KeyboardArrowDown /> : <KeyboardArrowRight />}</IconButton>
+        </Grid>
+        {showTasks && (
+          <Grid item xs={12}>
             <Box
               sx={{
                 marginTop: 3,
@@ -38,12 +39,12 @@ const Checklist: React.FC<{ parentChecklists: ChecklistType[]; checklistName?: s
                 justifyContent: 'center'
               }}
             >
-              {parentChecklists.map((parentChecklist) => (
-                <Task subtasks={parentChecklist.subtasks} parentTask={parentChecklist} />
+              {parentChecklists.map((parentChecklist, index) => (
+                <Task key={index} subtasks={parentChecklist.subtasks} parentTask={parentChecklist} />
               ))}
             </Box>
-          )}
-        </Grid>
+          </Grid>
+        )}
       </Grid>
     </Box>
   );

src/frontend/src/pages/HomePage/components/OnboardingInfoSection.tsx

@@ -54,7 +54,7 @@ const OnboardingInfoSection: React.FC = () => {
                       backgroundColor: '#616161',
                       color: 'white',
                       borderRadius: '10px',
-                      height: '5vh',
+                      padding: 2.5,
                       '&:hover': { backgroundColor: '#ef4345' }
                     }}
                     href={link.url}