Refactor the way TABS and VIEWS are handeled, now derived inside viewKeys.js

client/src/components/Canvas/views/Admin.jsx

@@ -5,7 +5,10 @@ import { NASApplication } from './AdminTabs/NASApplication';
 import { IVANS } from './AdminTabs/IVANS'
 import { SearchBar } from "../CanvasComponents/SearchBar";
 import { SettingsButton } from "../CanvasComponents/SettingsButton";
+import { CanvasHeaderTabs } from '../CanvasComponents/CanvasHeaderTabs';
+import { ADMIN_TABS } from '@/constants/viewKeys';
 
+// TODO - refactor this. Currently Admin doesn't use onEditWidgets or appendWidget
 export default function Admin({ view, onChangeView, onEditWidgets, appendWidget }) {
   const settingsButtonProps = { onEditWidgets, appendWidget };
   
@@ -29,30 +32,19 @@ export default function Admin({ view, onChangeView, onEditWidgets, appendWidget
         top="0"
         zIndex="dropdown" // zIndex: 1100
         bg="base200"
-        px={5}
+        pl={5}
+        pr={2}
         pt={3}
         pb={2}
         align="center"
         justify="space-between"
         width="100%"
       >
-        <Tabs.List>
-          <Tabs.Trigger value="medataentry" fontSize="lg">
-            M&E Data Entry
-          </Tabs.Trigger>
-          <Tabs.Trigger value="projectcollector" fontSize="lg">
-            Project Collector
-          </Tabs.Trigger>
-          <Tabs.Trigger value="nasapplication" fontSize="lg">
-            NAS Application
-          </Tabs.Trigger><Tabs.Trigger value="ivans" fontSize="lg">
-            IVANS
-          </Tabs.Trigger>
-        </Tabs.List>
-
+        {/* HEADER */}
+        <CanvasHeaderTabs tabs={ADMIN_TABS} />
         <HStack width="258px" justifyContent="flex-end">
-          <SearchBar />
-          <SettingsButton {...settingsButtonProps}/>
+            <SearchBar />
+            <SettingsButton />
         </HStack>
       </Flex>