#3287 Parts Review Submission Guide

src/frontend/src/components/NERSwitch.tsx

@@ -0,0 +1,51 @@
+import { Switch, SwitchProps, styled } from '@mui/material';
+
+const NERSwitch = styled((props: SwitchProps) => (
+  <Switch focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />
+))(({ theme }) => ({
+  width: 34,
+  height: 18,
+  padding: 0,
+  '& .MuiSwitch-switchBase': {
+    padding: 0,
+    margin: 2,
+    transitionDuration: '300ms',
+    '&.Mui-checked': {
+      transform: 'translateX(16px)',
+      color: '#fff',
+      '& + .MuiSwitch-track': {
+        backgroundColor: theme.palette.mode === 'dark' ? '#ef4345' : '#ef4345',
+        opacity: 1,
+        border: 0
+      },
+      '&.Mui-disabled + .MuiSwitch-track': {
+        opacity: 0.5
+      }
+    },
+    '&.Mui-focusVisible .MuiSwitch-thumb': {
+      color: '#ef4345',
+      border: '6px solid #fff'
+    },
+    '&.Mui-disabled .MuiSwitch-thumb': {
+      color: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600]
+    },
+    '&.Mui-disabled + .MuiSwitch-track': {
+      opacity: theme.palette.mode === 'light' ? 0.7 : 0.3
+    }
+  },
+  '& .MuiSwitch-thumb': {
+    boxSizing: 'border-box',
+    width: 14,
+    height: 14
+  },
+  '& .MuiSwitch-track': {
+    borderRadius: 18 / 2,
+    backgroundColor: theme.palette.mode === 'light' ? '#E9E9EA' : '#39393D',
+    opacity: 1,
+    transition: theme.transitions.create(['background-color'], {
+      duration: 500
+    })
+  }
+}));
+
+export default NERSwitch;

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/PartReview/PartsReviewPage.tsx

@@ -1,8 +1,54 @@
 import LoadingIndicator from '../../../../components/LoadingIndicator';
+import { Box } from '@mui/system';
+import { Grid, FormGroup, FormControlLabel, Typography } from '@mui/material';
+import { useState } from 'react';
+import { useCurrentUser } from '../../../../hooks/users.hooks';
+import { rankUserRole } from 'shared';
+import NERSwitch from '../../../../components/NERSwitch';
 
 const PartsReviewPage = () => {
-  //TODO: Parts Review Page content will go here
-  return <LoadingIndicator />;
+  const currentUser = useCurrentUser();
+  const [showSubmissionGuide, setShowSubmissionGuide] = useState(() => {
+    const userRole = currentUser.role;
+    return rankUserRole(userRole) < rankUserRole('LEADERSHIP');
+  });
+
+  return (
+    <Box>
+      <Grid container spacing={3}>
+        <Grid item xs={12}>
+          <FormGroup>
+            <FormControlLabel
+              label="View Submission Guide?"
+              control={
+                <NERSwitch
+                  sx={{ m: 1 }}
+                  checked={showSubmissionGuide}
+                  onChange={() => setShowSubmissionGuide(!showSubmissionGuide)}
+                />
+              }
+            />
+          </FormGroup>
+        </Grid>
+        <Grid item xs={12}>
+          {/* The guide should be toggled off by default for admins, heads, and leads and toggled on for all other roles */}
+
+          {showSubmissionGuide ? (
+            <Grid container spacing={3}>
+              <Grid item xs={12}>
+                <Typography variant="h4">Submission Guide</Typography>
+                {/* Submission Guide components will go here */}
+                <LoadingIndicator />
+                {/* Loading indicator will be replaced by a grid of all the part cards */}
+              </Grid>
+            </Grid>
+          ) : (
+            <LoadingIndicator /> /* Loading indicator will be replaced by a grid of all the part cards */
+          )}
+        </Grid>
+      </Grid>
+    </Box>
+  );
 };
 
 export default PartsReviewPage;