Merge branch 'develop' into #2140-rm-page-blocks-user-management

RChandler234 · RChandler234 · commit 529801c57f12 · 2024-03-19T22:09:01.000-04:00
diff --git a/src/frontend/src/components/Tabs.tsx b/src/frontend/src/components/Tabs.tsx
@@ -13,9 +13,10 @@ interface TabProps {
   baseUrl: string; //the URL that all the tab URLs extend
   defaultTab: string; //tab that the tabs component defaults to
   id: string;
+  noUnderline?: boolean;
 }
 
-const NERTabs = ({ setTab, tabsLabels, baseUrl, defaultTab, id }: TabProps) => {
+const NERTabs = ({ setTab, tabsLabels, baseUrl, defaultTab, id, noUnderline = false }: TabProps) => {
   const tabUrlValues = tabsLabels.map((tab) => tab.tabUrlValue);
   const match = useRouteMatch<{ tabValueString: string }>(`${baseUrl}/:tabValueString`);
   const tabValueString = match?.params?.tabValueString;
@@ -39,7 +40,7 @@ const NERTabs = ({ setTab, tabsLabels, baseUrl, defaultTab, id }: TabProps) => {
     <Tabs value={tabValue} onChange={handleTabChange} aria-label={`${id}-tabs`}>
       {tabsLabels.map((tab, idx) => (
         <Tab
-          sx={{ borderBottom: 1, borderColor: 'divider' }}
+          sx={noUnderline ? {} : { borderBottom: 1, borderColor: 'divider' }}
           label={tab.tabName}
           aria-label={tab.tabUrlValue}
           value={idx}
diff --git a/src/frontend/src/pages/AdminToolsPage/AdminToolsBOMConfig.tsx b/src/frontend/src/pages/AdminToolsPage/AdminToolsBOMConfig.tsx
@@ -1,12 +1,15 @@
-import { Grid } from '@mui/material';
-import PageBlock from '../../layouts/PageBlock';
+import { Grid, Typography } from '@mui/material';
 import ManufacturerTable from './BOMConfig/ManufacturerTable';
 import MaterialTypeTable from './BOMConfig/MaterialTypeTable';
 import UnitTable from './BOMConfig/UnitTable';
+import { Box } from '@mui/system';
 
 const AdminToolsBOMConfig: React.FC = () => {
   return (
-    <PageBlock title="Bill of Material Config">
+    <Box>
+      <Typography variant="h5" gutterBottom borderBottom={1} color="red" borderColor={'white'}>
+        Bill of Materials Config
+      </Typography>
       <Grid container spacing="3%">
         <Grid item direction="column" xs={12} md={6}>
           <ManufacturerTable />
@@ -18,7 +21,7 @@ const AdminToolsBOMConfig: React.FC = () => {
           <UnitTable />
         </Grid>
       </Grid>
-    </PageBlock>
+    </Box>
   );
 };
 
diff --git a/src/frontend/src/pages/AdminToolsPage/AdminToolsFinanceConfig.tsx b/src/frontend/src/pages/AdminToolsPage/AdminToolsFinanceConfig.tsx
@@ -5,7 +5,7 @@ import AccountCodesTable from './FinanceConfig/AccountCodesTable';
 const AdminToolsFinanceConfig: React.FC = () => {
   return (
     <Box padding="5px">
-      <Typography marginBottom="15px" variant="h5">
+      <Typography variant="h5" gutterBottom borderBottom={1} color="red" borderColor={'white'}>
         Finance Config
       </Typography>
       <Grid container spacing="3%">
diff --git a/src/frontend/src/pages/AdminToolsPage/AdminToolsPage.tsx b/src/frontend/src/pages/AdminToolsPage/AdminToolsPage.tsx
@@ -69,13 +69,16 @@ const AdminToolsPage: React.FC = () => {
     <PageLayout
       title="Admin Tools"
       tabs={
-        <NERTabs
-          setTab={setTabIndex}
-          tabsLabels={tabs}
-          baseUrl={routes.ADMIN_TOOLS}
-          defaultTab={defaultTab}
-          id="admin-tools-tabs"
-        />
+        <Box borderBottom={1} borderColor={'divider'} width={'100%'}>
+          <NERTabs
+            noUnderline
+            setTab={setTabIndex}
+            tabsLabels={tabs}
+            baseUrl={routes.ADMIN_TOOLS}
+            defaultTab={defaultTab}
+            id="admin-tools-tabs"
+          />
+        </Box>
       }
     >
       {tabIndex === 0 ? (
diff --git a/src/frontend/src/pages/AdminToolsPage/AdminToolsProjectsConfig.tsx b/src/frontend/src/pages/AdminToolsPage/AdminToolsProjectsConfig.tsx
@@ -1,11 +1,15 @@
-import PageBlock from '../../layouts/PageBlock';
+import { Box } from '@mui/system';
 import LinkTypeTable from './ProjectsConfig/LinkTypeTable';
+import { Typography } from '@mui/material';
 
 const AdminToolsProjectsConfig: React.FC = () => {
   return (
-    <PageBlock title="Projects Config">
+    <Box>
+      <Typography variant="h5" gutterBottom borderBottom={1} color="red" borderColor={'white'}>
+        Links Config
+      </Typography>
       <LinkTypeTable />
-    </PageBlock>
+    </Box>
   );
 };
 
diff --git a/src/frontend/src/pages/AdminToolsPage/BOMConfig/ManufacturerTable.tsx b/src/frontend/src/pages/AdminToolsPage/BOMConfig/ManufacturerTable.tsx
@@ -1,4 +1,4 @@
-import { TableRow, TableCell, Typography, Box } from '@mui/material';
+import { TableRow, TableCell, Box } from '@mui/material';
 import LoadingIndicator from '../../../components/LoadingIndicator';
 import { datePipe } from '../../../utils/pipes';
 import ErrorPage from '../../ErrorPage';
@@ -36,7 +36,6 @@ const ManufacturerTable: React.FC = () => {
   return (
     <Box>
       <CreateManufacturerModal showModal={createModalShow} handleClose={() => setCreateModalShow(false)} />
-      <Typography variant="subtitle1">Registered Manufacturers</Typography>
       <AdminToolTable columns={[{ name: 'Date Registered' }, { name: 'Manufacturer Name' }]} rows={manufacturersTableRows} />
       <Box sx={{ display: 'flex', justifyContent: 'right', marginTop: '10px' }}>
         <NERButton
diff --git a/src/frontend/src/pages/AdminToolsPage/BOMConfig/MaterialTypeTable.tsx b/src/frontend/src/pages/AdminToolsPage/BOMConfig/MaterialTypeTable.tsx
@@ -1,4 +1,4 @@
-import { TableRow, TableCell, Typography, Box } from '@mui/material';
+import { TableRow, TableCell, Box } from '@mui/material';
 import LoadingIndicator from '../../../components/LoadingIndicator';
 import { datePipe } from '../../../utils/pipes';
 import ErrorPage from '../../ErrorPage';
@@ -36,7 +36,6 @@ const MaterialTypeTable: React.FC = () => {
   return (
     <Box>
       <CreateMaterialTypeModal showModal={createModalShow} handleClose={() => setCreateModalShow(false)} />
-      <Typography variant="subtitle1">Registered Material Types</Typography>
       <AdminToolTable columns={[{ name: 'Date Registered' }, { name: 'Material Type' }]} rows={materialTypesTableRows} />
       <Box sx={{ display: 'flex', justifyContent: 'right', marginTop: '10px' }}>
         <NERButton
diff --git a/src/frontend/src/pages/AdminToolsPage/BOMConfig/UnitTable.tsx b/src/frontend/src/pages/AdminToolsPage/BOMConfig/UnitTable.tsx
@@ -1,6 +1,5 @@
-import { TableRow, TableCell, Typography, Box } from '@mui/material';
+import { TableRow, TableCell, Box } from '@mui/material';
 import LoadingIndicator from '../../../components/LoadingIndicator';
-// import { datePipe } from '../../../utils/pipes';
 import ErrorPage from '../../ErrorPage';
 import { NERButton } from '../../../components/NERButton';
 import { useState } from 'react';
@@ -35,7 +34,6 @@ const UnitTypeTable: React.FC = () => {
   return (
     <Box>
       <CreateUnitFormModal showModal={createModalShow} handleClose={() => setCreateModalShow(false)} />
-      <Typography variant="subtitle1">Registered Units</Typography>
       <AdminToolTable columns={[{ name: 'Unit' }]} rows={unitTypesTableRows} />
       <Box sx={{ display: 'flex', justifyContent: 'right', marginTop: '10px' }}>
         <NERButton
diff --git a/src/frontend/src/pages/AdminToolsPage/FinanceConfig/AccountCodesTable.tsx b/src/frontend/src/pages/AdminToolsPage/FinanceConfig/AccountCodesTable.tsx
@@ -64,9 +64,6 @@ const AccountCodesTable = () => {
           accountCode={clickedAccountCode}
         />
       )}
-      <Typography variant="subtitle1" textAlign="left">
-        Account Codes
-      </Typography>
       <AdminToolTable
         columns={[
           { name: 'Account Name', width: '25%' },
diff --git a/src/frontend/src/pages/AdminToolsPage/FinanceConfig/VendorsTable.tsx b/src/frontend/src/pages/AdminToolsPage/FinanceConfig/VendorsTable.tsx
@@ -1,4 +1,4 @@
-import { TableRow, TableCell, Typography, Box } from '@mui/material';
+import { TableRow, TableCell, Box } from '@mui/material';
 import LoadingIndicator from '../../../components/LoadingIndicator';
 import { useGetAllVendors } from '../../../hooks/finance.hooks';
 import { datePipe } from '../../../utils/pipes';
@@ -52,7 +52,6 @@ const VendorsTable = () => {
           vendors={vendors}
         />
       )}
-      <Typography variant="subtitle1">Registered Vendors</Typography>
       <AdminToolTable columns={[{ name: 'Date Registered' }, { name: 'Vendor Name' }]} rows={vendorTableRows} />
       <Box sx={{ display: 'flex', justifyContent: 'right', marginTop: '10px' }}>
         <NERButton
diff --git a/src/frontend/src/pages/AdminToolsPage/ProjectsConfig/LinkTypeTable.tsx b/src/frontend/src/pages/AdminToolsPage/ProjectsConfig/LinkTypeTable.tsx
@@ -42,7 +42,6 @@ const LinkTypeTable = () => {
   return (
     <Box>
       <CreateLinkTypeModal showModal={createModalShow} handleClose={() => setCreateModalShow(false)} linkTypes={linkTypes} />
-      <Typography variant="subtitle1">Registered LinkTypes</Typography>
       <AdminToolTable columns={[{ name: 'Name' }, { name: 'Icon Name' }, { name: 'Required' }]} rows={linkTypeTableRows} />
       <Box sx={{ display: 'flex', justifyContent: 'right', marginTop: '10px' }}>
         {isAdmin(currentUser.role) && (
diff --git a/src/frontend/src/pages/CalendarPage/CalendarPage.tsx b/src/frontend/src/pages/CalendarPage/CalendarPage.tsx
@@ -17,6 +17,7 @@ import { useCurrentUser } from '../../hooks/users.hooks';
 import { datePipe } from '../../utils/pipes';
 import { useAllTeamTypes } from '../../hooks/design-reviews.hooks';
 import LoadingIndicator from '../../components/LoadingIndicator';
+import { DesignReviewAttendeeModal } from './DesignReviewAttendeeModal';
 
 const CalendarPage = () => {
   const theme = useTheme();
@@ -30,6 +31,7 @@ const CalendarPage = () => {
   const [displayMonthYear, setDisplayMonthYear] = useState<Date>(new Date());
   const { isLoading, isError, error, data: allDesignReviews } = useAllDesignReviews();
   const user = useCurrentUser();
+  const [unconfirmedDesignReview, setUnconfirmedDesignReview] = useState<DesignReview>();
 
   if (isLoading || !allDesignReviews) return <LoadingIndicator />;
   if (isError) return <ErrorPage message={error.message} />;
@@ -72,7 +74,9 @@ const CalendarPage = () => {
       return {
         icon: getTeamTypeIcon(designReview.teamType.name),
         title: designReview.wbsName,
-        onClick: () => {},
+        onClick: () => {
+          setUnconfirmedDesignReview(designReview);
+        },
         disabled: false
       };
     });
@@ -102,54 +106,66 @@ const CalendarPage = () => {
   if (allTeamTypesIsError) return <ErrorPage error={allTeamTypesError} message={allTeamTypesError?.message} />;
 
   return (
-    <PageLayout
-      title="Design Review Calendar"
-      headerRight={
-        <Stack direction="row" justifyContent="flex-end">
-          <MonthSelector displayMonth={displayMonthYear} setDisplayMonth={setDisplayMonthYear} />
-          <Box marginLeft={1}>{unconfirmedDRSDropdown}</Box>
-        </Stack>
-      }
-    >
-      <Grid container>
-        {EnumToArray(DAY_NAMES).map((day) => (
-          <Grid item xs={12 / 7}>
-            <Typography align={'center'} sx={{ fontWeight: 'bold', fontSize: 18 }}>
-              {day}
-            </Typography>
-          </Grid>
-        ))}
-      </Grid>
-      <Box sx={{ border: '2px solid grey', borderRadius: 2, bgcolor: theme.palette.background.paper }}>
-        <Grid container marginBottom={2}>
-          {startOfEachWeek.map((week) => (
-            <Grid container>
-              {daysThisMonth.slice(week, week + 7).map((day) => {
-                const cardDate = new Date(displayMonthYear.getFullYear(), displayMonthYear.getMonth(), day);
-                return (
-                  <Grid item xs={12 / 7}>
-                    <Box marginLeft={1.5} marginTop={2} sx={{ justifyContent: 'center', display: 'flex' }}>
-                      {isDayInDifferentMonth(day, week) ? (
-                        <FillerCalendarDayCard day={day} />
-                      ) : (
-                        <CalendarDayCard
-                          cardDate={cardDate}
-                          events={
-                            eventDict.get(datePipe(new Date(cardDate.getTime() - cardDate.getTimezoneOffset() * -60000))) ??
-                            []
-                          }
-                          teamTypes={allTeamTypes}
-                        />
-                      )}
-                    </Box>
-                  </Grid>
-                );
-              })}
+    <>
+      {unconfirmedDesignReview && (
+        <DesignReviewAttendeeModal
+          open={!!unconfirmedDesignReview}
+          onHide={() => {
+            setUnconfirmedDesignReview(undefined);
+          }}
+          designReview={unconfirmedDesignReview as DesignReview}
+        />
+      )}
+      <PageLayout
+        title="Design Review Calendar"
+        headerRight={
+          <Stack direction="row" justifyContent="flex-end">
+            <MonthSelector displayMonth={displayMonthYear} setDisplayMonth={setDisplayMonthYear} />
+            <Box marginLeft={1}>{unconfirmedDRSDropdown}</Box>
+          </Stack>
+        }
+      >
+        <Grid container>
+          {EnumToArray(DAY_NAMES).map((day) => (
+            <Grid item xs={12 / 7}>
+              <Typography align={'center'} sx={{ fontWeight: 'bold', fontSize: 18 }}>
+                {day}
+              </Typography>
             </Grid>
           ))}
         </Grid>
-      </Box>
-    </PageLayout>
+        <Box sx={{ border: '2px solid grey', borderRadius: 2, bgcolor: theme.palette.background.paper }}>
+          <Grid container marginBottom={2}>
+            {startOfEachWeek.map((week) => (
+              <Grid container>
+                {daysThisMonth.slice(week, week + 7).map((day) => {
+                  const cardDate = new Date(displayMonthYear.getFullYear(), displayMonthYear.getMonth(), day);
+                  return (
+                    <Grid item xs={12 / 7}>
+                      <Box marginLeft={1.5} marginTop={2} sx={{ justifyContent: 'center', display: 'flex' }}>
+                        {isDayInDifferentMonth(day, week) ? (
+                          <FillerCalendarDayCard day={day} />
+                        ) : (
+                          <CalendarDayCard
+                            cardDate={cardDate}
+                            events={
+                              eventDict.get(
+                                datePipe(new Date(cardDate.getTime() - cardDate.getTimezoneOffset() * -60000))
+                              ) ?? []
+                            }
+                            teamTypes={allTeamTypes}
+                          />
+                        )}
+                      </Box>
+                    </Grid>
+                  );
+                })}
+              </Grid>
+            ))}
+          </Grid>
+        </Box>
+      </PageLayout>
+    </>
   );
 };
 
diff --git a/src/frontend/src/pages/CalendarPage/DesignReviewAttendeeModal.tsx b/src/frontend/src/pages/CalendarPage/DesignReviewAttendeeModal.tsx
@@ -0,0 +1,78 @@
+import { DesignReview } from 'shared';
+import NERModal from '../../components/NERModal';
+import { Grid, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from '@mui/material';
+import ColumnHeader from '../FinancePage/FinanceComponents/ColumnHeader';
+import { fullNamePipe } from '../../utils/pipes';
+
+interface DesignReviewAttendeeModalProps {
+  open: boolean;
+  onHide: () => void;
+  designReview: DesignReview;
+}
+
+export const DesignReviewAttendeeModal: React.FC<DesignReviewAttendeeModalProps> = ({ open, onHide, designReview }) => {
+  return (
+    <NERModal open={open} title={designReview.wbsName} onHide={onHide} hideFormButtons showCloseButton>
+      <Grid container columnSpacing={8} rowSpacing={2}>
+        <Grid item>
+          <TableContainer>
+            <Table>
+              <TableHead>
+                <Typography variant="h6">Required Members</Typography>
+                <TableRow>
+                  <ColumnHeader leftAlign title="Name" />
+                  <ColumnHeader leftAlign title="Confirmed?" />
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {designReview.requiredMembers.map((member) => (
+                  <TableRow key={member.userId}>
+                    <TableCell>
+                      <Typography>{fullNamePipe(member)}</Typography>
+                    </TableCell>
+                    <TableCell>
+                      <Typography>
+                        {designReview.confirmedMembers.some((confirmedMember) => confirmedMember.userId === member.userId)
+                          ? 'Yes'
+                          : 'No'}
+                      </Typography>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </Grid>
+        <Grid item>
+          <TableContainer>
+            <Table>
+              <TableHead>
+                <Typography variant="h6">Optional Members</Typography>
+                <TableRow>
+                  <ColumnHeader leftAlign title="Name" />
+                  <ColumnHeader leftAlign title="Confirmed?" />
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {designReview.optionalMembers.map((member) => (
+                  <TableRow key={member.userId}>
+                    <TableCell>
+                      <Typography>{fullNamePipe(member)}</Typography>
+                    </TableCell>
+                    <TableCell>
+                      <Typography>
+                        {designReview.confirmedMembers.some((confirmedMember) => confirmedMember.userId === member.userId)
+                          ? 'Yes'
+                          : 'No'}
+                      </Typography>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </Grid>
+      </Grid>
+    </NERModal>
+  );
+};
diff --git a/src/frontend/src/pages/FinancePage/FinanceComponents/ColumnHeader.tsx b/src/frontend/src/pages/FinancePage/FinanceComponents/ColumnHeader.tsx
