Merge pull request #2047 from Northeastern-Electric-Racing/#1872-FinanceFixes-ShowReimbursedStatusonFrontend

#1872: Added reimbursed status on frontend

Author: RChandler234

src/frontend/src/components/ReimbursementRequestStatusPill.tsx

@@ -0,0 +1,45 @@
+/*
+ * This file is part of NER's FinishLine and licensed under GNU AGPLv3.
+ * See the LICENSE file in the repository root folder for details.
+ */
+
+import Chip from '@mui/material/Chip';
+import { green, red, grey, purple, yellow, orange } from '@mui/material/colors';
+import { ReimbursementStatusType } from 'shared';
+import { displayEnum } from '../utils/pipes';
+
+const determineStatusPillColor = (status: ReimbursementStatusType) => {
+  switch (status) {
+    case ReimbursementStatusType.PENDING_FINANCE:
+      return yellow[700];
+    case ReimbursementStatusType.SABO_SUBMITTED:
+      return orange[600];
+    case ReimbursementStatusType.ADVISOR_APPROVED:
+      return purple[600];
+    case ReimbursementStatusType.REIMBURSED:
+      return green[600];
+    case ReimbursementStatusType.DENIED:
+      return red[600];
+    default:
+      return grey[600];
+  }
+};
+
+const ReimbursementRequestStatusPill = ({ status }: { status: ReimbursementStatusType }) => {
+  const statusPillColor = determineStatusPillColor(status);
+  return (
+    <Chip
+      size="small"
+      label={displayEnum(status)}
+      variant="filled"
+      sx={{
+        fontSize: 12,
+        color: 'white',
+        backgroundColor: statusPillColor,
+        width: 125
+      }}
+    />
+  );
+};
+
+export default ReimbursementRequestStatusPill;

src/frontend/src/layouts/PageTitle/PageTitle.tsx

@@ -39,17 +39,19 @@ const PageTitle: React.FC<PageTitleProps> = ({ title, headerRight, tabs, sticky,
       >
         <Grid container>
           <Grid container item md={12} display="flex" alignItems={'center'}>
-            <Grid item md={chips ? 3 : 6} xs={8}>
-              <Typography variant="h4" fontSize={30}>
-                {title}
-              </Typography>
-            </Grid>
-            {chips && (
-              <Grid item md={3} xs={4}>
-                {chips}
+            <Grid container md={8} xs={12} spacing={2}>
+              <Grid item>
+                <Typography variant="h4" fontSize={30}>
+                  {title}
+                </Typography>
               </Grid>
-            )}
-            <Grid item md={6} xs={12}>
+              {chips && (
+                <Grid item mt={1}>
+                  {chips}
+                </Grid>
+              )}
+            </Grid>
+            <Grid item md={4} xs={12}>
               <Box textAlign={['left', 'right']}>{headerRight}</Box>
             </Grid>
           </Grid>

src/frontend/src/pages/FinancePage/ReimbursementRequestDetailPage/ReimbursementRequestDetailsView.tsx

@@ -49,6 +49,7 @@ import AddSABONumberModal from './AddSABONumberModal';
 import ReimbursementProductsView from './ReimbursementProductsView';
 import SubmitToSaboModal from './SubmitToSaboModal';
 import DownloadIcon from '@mui/icons-material/Download';
+import ReimbursementRequestStatusPill from '../../../components/ReimbursementRequestStatusPill';
 
 interface ReimbursementRequestDetailsViewProps {
   reimbursementRequest: ReimbursementRequest;
@@ -313,13 +314,17 @@ const ReimbursementRequestDetailsView: React.FC<ReimbursementRequestDetailsViewP
     }
   ];
 
+  const sortedStatus = reimbursementRequest.reimbursementStatuses.sort((a) => a.dateCreated.getDate());
+  const statusTypes = sortedStatus.map((status) => status.type);
+  const recentStatus = statusTypes[statusTypes.length - 1];
   return (
     <PageLayout
-      title={`${
-        isReimbursementRequestDenied(reimbursementRequest)
-          ? `${fullNamePipe(reimbursementRequest.recipient)}'s Reimbursement Request - Denied`
-          : `${fullNamePipe(reimbursementRequest.recipient)}'s Reimbursement Request`
-      }`}
+      title={`${fullNamePipe(reimbursementRequest.recipient)}'s Reimbursement Request`}
+      chips={
+        <Box id="status" display="flex">
+          {statusTypes.length > 0 && <ReimbursementRequestStatusPill status={recentStatus} />}
+        </Box>
+      }
       previousPages={[
         {
           name: 'Finance',

src/frontend/src/utils/enum-pipes.ts

@@ -2,7 +2,6 @@
  * This file is part of NER's FinishLine and licensed under GNU AGPLv3.
  * See the LICENSE file in the repository root folder for details.
  */
-
 import { yellow, green, blue, purple, grey, orange } from '@mui/material/colors';
 import { ChangeRequestStatus, ChangeRequestType, WorkPackageStage } from 'shared';