Merge pull request #4155 from Northeastern-Electric-Racing/#3875-project-management-page

#3875 project management page

Author: wavehassman

src/frontend/src/app/AppAuthenticated.tsx

@@ -29,6 +29,7 @@ import Statistics from '../pages/StatisticsPage/Statistics';
 import RetrospectiveGanttChartPage from '../pages/RetrospectivePage/Retrospective';
 import Calendar from '../pages/CalendarPage/Calendar';
 import GuestEventPage from '../pages/GuestEventPage/GuestEventPage';
+import ProjectManagementPage from '../pages/ProjectManagementPage/ProjectManagementPage';
 import SidebarLayout from '../layouts/SidebarLayout';
 
 interface AppAuthenticatedProps {
@@ -79,6 +80,7 @@ const AppAuthenticated: React.FC<AppAuthenticatedProps> = ({ userId, userRole })
               <Route path={routes.STATISTICS} component={Statistics} />
               <Route path={routes.HOME} component={Home} />
               <Route path={routes.RETROSPECTIVE} component={RetrospectiveGanttChartPage} />
+              <Route path={routes.PROJECT_MANAGEMENT} component={ProjectManagementPage} />
               <Route path={routes.EVENTS} component={GuestEventPage} />
               <Redirect from={routes.BASE} to={routes.HOME} />
               <Route path="*" component={PageNotFound} />

src/frontend/src/layouts/Sidebar/NavPageLink.tsx

@@ -3,7 +3,7 @@
  * See the LICENSE file in the repository root folder for details.
  */
 
-import { NavLink } from 'react-router-dom';
+import { NavLink, useHistory } from 'react-router-dom';
 import { LinkItem } from '../../utils/types';
 import { routes } from '../../utils/routes';
 import { Box, Typography, useTheme, Collapse } from '@mui/material';
@@ -28,6 +28,7 @@ const NavPageLink: React.FC<NavPageLinkItemProps> = ({
   isClickableWithSubitems
 }) => {
   const theme = useTheme();
+  const history = useHistory();
 
   const renderLink = () => {
     const content = (
@@ -47,6 +48,7 @@ const NavPageLink: React.FC<NavPageLinkItemProps> = ({
       return (
         <Box
           onMouseEnter={onSubmenuHover}
+          onClick={() => history.push(route)}
           sx={{
             textDecoration: 'none',
             color: theme.palette.text.primary,

src/frontend/src/layouts/Sidebar/Sidebar.tsx

@@ -85,7 +85,7 @@ const Sidebar = ({ drawerOpen, setDrawerOpen, moveContent, setMoveContent }: Sid
       : {
           name: 'Project Management',
           icon: <DashboardIcon />,
-          route: routes.PROJECTS,
+          route: routes.PROJECT_MANAGEMENT,
           subItems: [
             {
               name: 'Gantt',

src/frontend/src/pages/ProjectManagementPage/ProjectManagementCard.tsx

@@ -0,0 +1,57 @@
+import { Box, Card, CardContent, Icon, Link, Typography, useTheme } from '@mui/material';
+import { GuestDefinition } from 'shared';
+import { NERButton } from '../../components/NERButton';
+import { Link as RouterLink } from 'react-router-dom';
+
+interface ProjectManagementCardProps {
+  definition: GuestDefinition;
+}
+
+const ProjectManagementCard: React.FC<ProjectManagementCardProps> = ({ definition }) => {
+  const theme = useTheme();
+
+  return (
+    <Card
+      variant="outlined"
+      sx={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        background: theme.palette.background.paper,
+        borderRadius: 2
+      }}
+    >
+      <CardContent sx={{ padding: 2, display: 'flex', flexDirection: 'column', flexGrow: 1 }}>
+        <Box display="flex" alignItems="center" gap={1} mb={1}>
+          {definition.icon && <Icon>{definition.icon}</Icon>}
+          <Typography variant="h6" fontWeight="regular">
+            {definition.term}
+          </Typography>
+        </Box>
+        <Typography fontSize={14} color="text.secondary" sx={{ flexGrow: 1 }}>
+          {definition.description}
+        </Typography>
+        {definition.buttonText && definition.buttonLink && (
+          <Link component={RouterLink} to={definition.buttonLink} sx={{ width: '100%', textDecoration: 'none' }}>
+            <NERButton
+              fullWidth
+              sx={{
+                marginTop: 2,
+                backgroundColor: theme.palette.error.main,
+                color: theme.palette.error.contrastText,
+                '&:hover': {
+                  backgroundColor: theme.palette.error.dark
+                }
+              }}
+            >
+              {definition.buttonText}
+            </NERButton>
+          </Link>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default ProjectManagementCard;

src/frontend/src/pages/ProjectManagementPage/ProjectManagementPage.tsx

@@ -0,0 +1,34 @@
+import { Grid } from '@mui/material';
+import { GuestDefinitionType } from 'shared';
+import PageLayout from '../../components/PageLayout';
+import ProjectManagementCard from './ProjectManagementCard';
+import { useAllGuestDefinitions } from '../../hooks/recruitment.hooks';
+import LoadingIndicator from '../../components/LoadingIndicator';
+import ErrorPage from '../ErrorPage';
+
+const ProjectManagementPage: React.FC = () => {
+  const { data: definitions, isLoading, isError, error } = useAllGuestDefinitions();
+
+  if (isError) {
+    return <ErrorPage message={error.message} />;
+  }
+  if (isLoading || !definitions) return <LoadingIndicator />;
+
+  const filteredDefinitions = definitions.filter((definition) => definition.type === GuestDefinitionType.PROJECT_MANAGEMENT);
+
+  return (
+    <PageLayout title="Project Management">
+      <Grid container spacing={2} sx={{ mt: 1 }}>
+        {filteredDefinitions
+          .sort((a, b) => a.order - b.order)
+          .map((definition) => (
+            <Grid item xs={12} sm={6} md={4} key={definition.definitionId} sx={{ display: 'flex' }}>
+              <ProjectManagementCard definition={definition} />
+            </Grid>
+          ))}
+      </Grid>
+    </PageLayout>
+  );
+};
+
+export default ProjectManagementPage;

src/frontend/src/utils/routes.ts

@@ -30,6 +30,7 @@ const COMPANIES = FINANCE + `/companies`;
 
 /**************** Projects Section ****************/
 const PROJECTS = `/projects`;
+const PROJECT_MANAGEMENT = `/project-management`;
 const PROJECTS_OVERVIEW = PROJECTS + '/overview';
 const PROJECTS_ALL = PROJECTS + '/all';
 const PROJECTS_BY_WBS = PROJECTS + `/:wbsNum`;
@@ -100,6 +101,7 @@ export const routes = {
   GANTT,
 
   PROJECTS,
+  PROJECT_MANAGEMENT,
   PROJECTS_OVERVIEW,
   PROJECTS_ALL,
   PROJECTS_BY_WBS,