Merge pull request #2184 from Northeastern-Electric-Racing/#2128-admin-tools-tab-design

#2128 admin tools tabs

Author: RChandler234

src/frontend/src/pages/AdminToolsPage/AdminToolsPage.tsx

@@ -12,18 +12,77 @@ import AdminToolsFinanceConfig from './AdminToolsFinanceConfig';
 import TeamsTools from './TeamsTools';
 import AdminToolsBOMConfig from './AdminToolsBOMConfig';
 import AdminToolsProjectsConfig from './AdminToolsProjectsConfig';
+import { useState } from 'react';
+import NERTabs from '../../components/Tabs';
+import { routes } from '../../utils/routes';
 
 const AdminToolsPage: React.FC = () => {
   const currentUser = useCurrentUser();
+  const [tabIndex, setTabIndex] = useState<number>(0);
+
+  const isUserHead = isHead(currentUser.role);
+  const isUserAdmin = isAdmin(currentUser.role);
+  const isUserFinanceLead = currentUser.isAtLeastFinanceLead;
+
+  const defaultTab = isUserAdmin || isUserHead ? 'user-management' : 'finance-configuration';
+
+  const tabs = [];
+
+  if (isUserHead || isUserAdmin) {
+    tabs.push({ tabUrlValue: 'user-management', tabName: 'User Management' });
+    tabs.push({ tabUrlValue: 'project-configuration', tabName: 'Project Configuration' });
+  }
+  if (isUserAdmin || isUserFinanceLead) {
+    tabs.push({ tabUrlValue: 'finance-configuration', tabName: 'Finance Configuration' });
+  }
+  if (isUserAdmin) {
+    tabs.push({ tabUrlValue: 'miscellaneous', tabName: 'Miscellaneous' });
+  }
+
+  const UserManagementTab = () => {
+    return isUserAdmin ? (
+      <>
+        <AdminToolsUserManagement />
+        <TeamsTools />
+      </>
+    ) : (
+      <AdminToolsUserManagement />
+    );
+  };
+
+  const ProjectConfigurationTab = () => {
+    return isUserAdmin ? (
+      <>
+        <AdminToolsProjectsConfig />
+        <AdminToolsBOMConfig />
+      </>
+    ) : (
+      <AdminToolsProjectsConfig />
+    );
+  };
 
   return (
-    <PageLayout title="Admin Tools">
-      {isHead(currentUser.role) && <AdminToolsUserManagement />}
-      {isAdmin(currentUser.role) && <AdminToolsSlackUpcomingDeadlines />}
-      {(isAdmin(currentUser.role) || currentUser.isAtLeastFinanceLead) && <AdminToolsFinanceConfig />}
-      {isAdmin(currentUser.role) && <TeamsTools />}
-      {isAdmin(currentUser.role) && <AdminToolsBOMConfig />}
-      {isHead(currentUser.role) && <AdminToolsProjectsConfig />}
+    <PageLayout
+      title="Admin Tools"
+      tabs={
+        <NERTabs
+          setTab={setTabIndex}
+          tabsLabels={tabs}
+          baseUrl={routes.ADMIN_TOOLS}
+          defaultTab={defaultTab}
+          id="admin-tools-tabs"
+        />
+      }
+    >
+      {tabIndex === 0 ? (
+        <UserManagementTab />
+      ) : tabIndex === 1 ? (
+        <ProjectConfigurationTab />
+      ) : tabIndex === 2 ? (
+        <AdminToolsFinanceConfig />
+      ) : (
+        <AdminToolsSlackUpcomingDeadlines />
+      )}
     </PageLayout>
   );
 };