#3130 finance tab divided into subtabs

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

@@ -6,21 +6,70 @@
 import { NavLink } from 'react-router-dom';
 import { LinkItem } from '../../utils/types';
 import { routes } from '../../utils/routes';
-import { Typography, useTheme } from '@mui/material';
+import { Box, Typography, useTheme, Collapse } from '@mui/material';
 
 export interface NavPageLinkItemProps extends LinkItem {
-  open?: boolean;
+  isSubmenuOpen?: boolean;
+  onSubmenuHover?: () => void;
+  onSubmenuCollapse?: () => void;
+  isSubItem?: boolean;
 }
 
-const NavPageLink: React.FC<NavPageLinkItemProps> = ({ name, route, icon }) => {
+const NavPageLink: React.FC<NavPageLinkItemProps> = ({
+  name,
+  route,
+  icon,
+  subItems,
+  isSubmenuOpen,
+  onSubmenuHover,
+  onSubmenuCollapse,
+  isSubItem = false
+}) => {
   const theme = useTheme();
-  return (
-    <NavLink
-      key={name}
-      to={route}
-      exact={route === routes.HOME}
-      style={(isActive) => {
-        return {
+
+  const renderLink = () => {
+    const content = (
+      <>
+        {icon}
+        <Typography
+          sx={{
+            fontSize: isSubItem ? '0.8rem' : '1rem'
+          }}
+        >
+          {name}
+        </Typography>
+      </>
+    );
+
+    if (subItems) {
+      return (
+        <Box
+          onMouseEnter={onSubmenuHover}
+          sx={{
+            textDecoration: 'none',
+            color: theme.palette.text.primary,
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'flex-start',
+            alignItems: 'center',
+            gap: '8px',
+            borderRadius: '8px',
+            padding: '8px',
+            margin: '8px',
+            cursor: 'pointer'
+          }}
+        >
+          {content}
+        </Box>
+      );
+    }
+
+    return (
+      <NavLink
+        to={route}
+        exact={route === routes.HOME}
+        onClick={onSubmenuCollapse}
+        style={(isActive) => ({
           textDecoration: 'none',
           color: isActive ? '#ef4345' : theme.palette.text.primary,
           backgroundColor: isActive ? 'white' : 'transparent',
@@ -29,14 +78,27 @@ const NavPageLink: React.FC<NavPageLinkItemProps> = ({ name, route, icon }) => {
           justifyContent: 'flex-start',
           gap: '8px',
           borderRadius: '8px',
-          padding: '8px',
-          margin: '8px'
-        };
-      }}
-    >
-      {icon}
-      <Typography>{name}</Typography>
-    </NavLink>
+          padding: isSubItem ? '2px' : '8px',
+          margin: isSubItem ? '2px' : '8px',
+          marginLeft: isSubItem ? '28px' : '8px'
+        })}
+      >
+        {content}
+      </NavLink>
+    );
+  };
+
+  return (
+    <Box>
+      {renderLink()}
+      {subItems && (
+        <Collapse in={isSubmenuOpen} timeout="auto" unmountOnExit>
+          {subItems.map((subItem) => (
+            <NavPageLink {...subItem} isSubItem={true} />
+          ))}
+        </Collapse>
+      )}
+    </Box>
   );
 };
 

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

@@ -21,6 +21,10 @@ import NavUserMenu from '../PageTitle/NavUserMenu';
 import DrawerHeader from '../../components/DrawerHeader';
 import { ChevronLeft, ChevronRight } from '@mui/icons-material';
 import BarChartIcon from '@mui/icons-material/BarChart';
+import QueryStatsIcon from '@mui/icons-material/QueryStats';
+import CurrencyExchangeIcon from '@mui/icons-material/CurrencyExchange';
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
+import { useState } from 'react';
 
 interface SidebarProps {
   drawerOpen: boolean;
@@ -30,6 +34,7 @@ interface SidebarProps {
 }
 
 const Sidebar = ({ drawerOpen, setDrawerOpen, moveContent, setMoveContent }: SidebarProps) => {
+  const [openSubmenu, setOpenSubmenu] = useState<string | null>(null);
   const linkItems: LinkItem[] = [
     {
       name: 'Home',
@@ -54,7 +59,30 @@ const Sidebar = ({ drawerOpen, setDrawerOpen, moveContent, setMoveContent }: Sid
     {
       name: 'Finance',
       icon: <AttachMoneyIcon />,
-      route: routes.FINANCE
+      route: routes.FINANCE,
+      subItems: [
+        {
+          name: 'Finance Dashboard',
+          icon: <QueryStatsIcon sx={{ fontSize: '20px' }} />,
+          route: routes.FINANCE_DASHBOARD
+        },
+        {
+          name: 'Reimbursments',
+          icon: <CurrencyExchangeIcon sx={{ fontSize: '20px' }} />,
+          route: routes.REIMBURSEMENT_REQUESTS
+        },
+        {
+          name: 'Companies & Sponsors',
+          icon: <ShoppingCartIcon sx={{ fontSize: '20px' }} />,
+          route: routes.COMPANIES_SPONSORS
+        },
+        {
+          /* FOR REFRENCE (TO BE REMOVED) */
+          name: 'Original Page',
+          icon: <AttachMoneyIcon sx={{ fontSize: '20px' }} />,
+          route: routes.FINANCE
+        }
+      ]
     },
     {
       name: 'Teams',
@@ -85,6 +113,14 @@ const Sidebar = ({ drawerOpen, setDrawerOpen, moveContent, setMoveContent }: Sid
     setMoveContent(!moveContent);
   };
 
+  const handleOpenSubmenu = (name: string) => {
+    setOpenSubmenu(name);
+  };
+
+  const handleCloseSubmenu = () => {
+    setOpenSubmenu(null);
+  };
+
   return (
     <NERDrawer
       open={drawerOpen}
@@ -107,7 +143,12 @@ const Sidebar = ({ drawerOpen, setDrawerOpen, moveContent, setMoveContent }: Sid
       >
         <Box>
           {linkItems.map((linkItem) => (
-            <NavPageLink {...linkItem} />
+            <NavPageLink
+              {...linkItem}
+              isSubmenuOpen={openSubmenu === linkItem.name}
+              onSubmenuHover={() => handleOpenSubmenu(linkItem.name)}
+              onSubmenuCollapse={() => handleCloseSubmenu()}
+            />
           ))}
           {<NavUserMenu open={drawerOpen} />}
         </Box>

src/frontend/src/pages/FinancePage/CompaniesAndSponsors.tsx

@@ -0,0 +1,7 @@
+import { Box } from '@mui/system';
+
+const CompaniesAndSponsors: React.FC = () => {
+  return <Box>Companies and Sponsoring Vendors</Box>;
+};
+
+export default CompaniesAndSponsors;

src/frontend/src/pages/FinancePage/Finance.tsx

@@ -8,13 +8,19 @@ import FinancePage from './FinancePage';
 import CreateReimbursementRequestPage from './CreateReimbursementRequest';
 import EditReimbursementRequestPage from './EditReimbursementRequest/EditReimbursementRequest';
 import ReimbursementRequestDetails from './ReimbursementRequestDetailPage/ReimbursementRequestDetails';
+import FinanceDashboard from './FinanceDashboard';
+import ReimbursmentRequests from './ReimbursmentRequests';
+import CompaniesAndSponsors from './CompaniesAndSponsors';
 
 const Finance: React.FC = () => {
   return (
     <Switch>
       <Route path={routes.REIMBURSEMENT_REQUEST_EDIT} component={EditReimbursementRequestPage} />
       <Route path={routes.NEW_REIMBURSEMENT_REQUEST} component={CreateReimbursementRequestPage} />
       <Route path={routes.REIMBURSEMENT_REQUEST_BY_ID} component={ReimbursementRequestDetails} />
+      <Route path={routes.FINANCE_DASHBOARD} component={FinanceDashboard} />
+      <Route path={routes.REIMBURSEMENT_REQUESTS} component={ReimbursmentRequests} />
+      <Route path={routes.COMPANIES_SPONSORS} component={CompaniesAndSponsors} />
       <Route path={routes.FINANCE} component={FinancePage} />
     </Switch>
   );

src/frontend/src/pages/FinancePage/FinanceDashboard.tsx

@@ -0,0 +1,7 @@
+import { Box } from '@mui/system';
+
+const FinanceDashboard: React.FC = () => {
+  return <Box>Finance Dashboard</Box>;
+};
+
+export default FinanceDashboard;

src/frontend/src/pages/FinancePage/ReimbursmentRequests.tsx

@@ -0,0 +1,7 @@
+import { Box } from '@mui/system';
+
+const ReimbursementRequests: React.FC = () => {
+  return <Box>Reimbursement Requests</Box>;
+};
+
+export default ReimbursementRequests;

src/frontend/src/utils/routes.ts

@@ -17,6 +17,8 @@ const REIMBURSEMENT_REQUESTS = FINANCE + '/reimbursement-requests';
 const REIMBURSEMENT_REQUEST_BY_ID = REIMBURSEMENT_REQUESTS + `/:id`;
 const REIMBURSEMENT_REQUEST_EDIT = REIMBURSEMENT_REQUEST_BY_ID + `/edit`;
 const NEW_REIMBURSEMENT_REQUEST = REIMBURSEMENT_REQUESTS + `/new`;
+const FINANCE_DASHBOARD = FINANCE + `/dashboard`;
+const COMPANIES_SPONSORS = FINANCE + `/companies-sponsors`;
 
 /**************** Projects Section ****************/
 const PROJECTS = `/projects`;
@@ -95,6 +97,8 @@ export const routes = {
   REIMBURSEMENT_REQUESTS,
   REIMBURSEMENT_REQUEST_BY_ID,
   REIMBURSEMENT_REQUEST_EDIT,
+  FINANCE_DASHBOARD,
+  COMPANIES_SPONSORS,
 
   SETTINGS,
   SETTINGS_DETAILS,

src/frontend/src/utils/types.ts

@@ -19,6 +19,7 @@ export interface LinkItem {
   name: string;
   icon?: JSX.Element;
   route: string;
+  subItems?: LinkItem[];
 }
 
 export interface VersionObject {