#2128 scuffed implementation for tabs

Author: bderbs30

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

@@ -12,18 +12,81 @@ 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);
+
+  /*
+  User Management Tab
+  {isHead(currentUser.role) && <AdminToolsUserManagement />}
+  {isAdmin(currentUser.role) && <TeamsTools />}
+
+  Project Configuration Tab
+  {isAdmin(currentUser.role) && <AdminToolsBOMConfig />}
+  {isHead(currentUser.role) && <AdminToolsProjectsConfig />}
+
+
+
+  Finance Configuration Tab
+  {(isAdmin(currentUser.role) || currentUser.isAtLeastFinanceLead) && <AdminToolsFinanceConfig />}
+
+
+  Miscellaneous Tab
+  {isAdmin(currentUser.role) && <AdminToolsSlackUpcomingDeadlines />}
+  */
+
+  const isUserHead = isHead(currentUser.role);
+  const isUserAdmin = isAdmin(currentUser.role);
+  const isUserFinanceLead = currentUser.isAtLeastFinanceLead;
+
+  const defaultTab = isUserAdmin || isUserHead ? 'user-management' : 'finance-configuration';
+
+  const tabs = [
+    { tabUrlValue: 'user-management', tabName: 'User Management', roles: ['head', 'admin'] },
+    { tabUrlValue: 'project-configuration', tabName: 'Project Configuration', roles: ['head', 'admin'] },
+    { tabUrlValue: 'finance-configuration', tabName: 'Finance Configuration', roles: ['financeLead', 'admin'] },
+    { tabUrlValue: 'miscellaneous', tabName: 'Miscellaneous', roles: ['admin'] }
+  ];
+
+  const userRole = isUserAdmin ? 'admin' : isUserHead ? 'head' : isUserFinanceLead ? 'financeLead' : 'user';
+
+  const filteredTabs = tabs.filter((tab) => tab.roles.includes(userRole));
+
+  const showUserManagement = () => {
+    return isUserAdmin ? <TeamsTools /> : <AdminToolsUserManagement />;
+  };
+
+  const showProjectConfiguration = () => {
+    return isUserAdmin ? <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={filteredTabs}
+          baseUrl={routes.ADMIN_TOOLS}
+          defaultTab={defaultTab}
+          id="admin-tabs"
+        />
+      }
+    >
+      {tabIndex === 0 ? (
+        showUserManagement()
+      ) : tabIndex === 1 ? (
+        showProjectConfiguration()
+      ) : tabIndex === 2 ? (
+        <AdminToolsFinanceConfig />
+      ) : (
+        <AdminToolsSlackUpcomingDeadlines />
+      )}
     </PageLayout>
   );
 };