#1565: Added an alert for overdue work packages

Author: ItsEricSun

src/frontend/src/pages/HomePage/Home.tsx

@@ -5,6 +5,7 @@
 
 import { Typography, Alert, Link } from '@mui/material';
 import { routes } from '../../utils/routes';
+import OverdueWorkPackageAlerts from './OverdueWorkPackageAlerts';
 import UsefulLinks from './UsefulLinks';
 import WorkPackagesByTimelineStatus from './WorkPackagesByTimelineStatus';
 import UpcomingDeadlines from './UpcomingDeadlines';
@@ -36,6 +37,7 @@ const Home = () => {
           .
         </Alert>
       )}
+      <OverdueWorkPackageAlerts />
       <UsefulLinks />
       <UpcomingDeadlines />
       <WorkPackagesByTimelineStatus />

src/frontend/src/pages/HomePage/OverdueWorkPackageAlert.tsx

@@ -0,0 +1,56 @@
+import { useHistory } from 'react-router-dom';
+import { useState, useEffect } from 'react';
+import { wbsPipe, WorkPackage } from 'shared';
+import { Box, Alert, IconButton, Collapse, Link, Typography, AlertTitle, Card } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import { routes } from '../../utils/routes';
+import { Link as RouterLink } from 'react-router-dom';
+import { datePipe } from '../../utils/pipes';
+import { NERButton } from '../../components/NERButton';
+
+const OverdueWorkPackageAlert = ({ wp }: { wp: WorkPackage }) => {
+  const history = useHistory();
+  const [open, setOpen] = useState(true);
+
+  return (
+    <Box sx={{ width: '100%', my: 2 }}>
+      <Collapse in={open}>
+        <Alert
+          variant="filled"
+          severity="warning"
+          action={
+            <IconButton
+              aria-label="close"
+              color="inherit"
+              size="small"
+              onClick={() => {
+                setOpen(false);
+              }}
+            >
+              <CloseIcon fontSize="inherit" />
+            </IconButton>
+          }
+        >
+          <AlertTitle>Overdue Work Package:</AlertTitle>
+          <Link color="inherit" component={RouterLink} to={`${routes.PROJECTS}/${wbsPipe(wp.wbsNum)}`} noWrap>
+            <Typography fontWeight={'regular'} variant="inherit">
+              {wbsPipe(wp.wbsNum)} - {wp.name}
+            </Typography>
+          </Link>
+          <Typography fontWeight={'regular'} variant="inherit" noWrap my={0.5}>
+            {'Due: ' + datePipe(wp.endDate)}
+          </Typography>
+          <NERButton
+            variant="contained"
+            size="small"
+            onClick={() => history.push(`${routes.PROJECTS}/${wbsPipe(wp.wbsNum)}`)}
+          >
+            Create Change Request
+          </NERButton>
+        </Alert>
+      </Collapse>
+    </Box>
+  );
+};
+
+export default OverdueWorkPackageAlert;

src/frontend/src/pages/HomePage/OverdueWorkPackageAlerts.tsx

@@ -0,0 +1,24 @@
+import Box from '@mui/material/Box';
+import { useAllWorkPackages } from '../../hooks/work-packages.hooks';
+import { WbsElementStatus } from 'shared';
+import OverdueWorkPackageAlert from './OverdueWorkPackageAlert';
+import { useCurrentUser } from '../../hooks/users.hooks';
+
+const OverdueWorkPackageAlerts: React.FC = () => {
+  const user = useCurrentUser();
+  const workPackages = useAllWorkPackages({ status: WbsElementStatus.Active });
+  const currentDate = new Date();
+
+  return (
+    <Box>
+      {workPackages.data
+        ?.filter((wp) => wp.projectLead?.userId === user.userId)
+        ?.filter((wp) => new Date(wp.endDate) < currentDate)
+        .map((wp) => (
+          <OverdueWorkPackageAlert wp={wp} />
+        ))}
+    </Box>
+  );
+};
+
+export default OverdueWorkPackageAlerts;