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>
 

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

@@ -10,6 +10,8 @@ import { CancelButton } from "../CanvasComponents/CancelButton";
 import { SaveButton } from "../CanvasComponents/SaveButton";
 import DeleteAllButton from "../CanvasComponents/DeleteAllButton";
 import { v4 as uuid } from 'uuid';
+import { CanvasHeaderTabs } from '../CanvasComponents/CanvasHeaderTabs';
+import { DASHBOARD_TABS } from "@/constants/viewKeys";
 
 export default function Home(props) {
   // deconstructing props
@@ -34,8 +36,6 @@ export default function Home(props) {
       ...prev,
       {
         i: newID,
-        // x: (prev.length * 3) % 12,
-        // y: Infinity,
         x: (prev.length * W) % COLS, 
         y: 0,
         w: w, 
@@ -120,31 +120,15 @@ export default function Home(props) {
 				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="mydashboard" fontSize="lg">
-            My Dashboard
-          </Tabs.Trigger>
-          <Tabs.Trigger value="gas" fontSize="lg">
-            Gas
-          </Tabs.Trigger>
-          <Tabs.Trigger value="seismic" fontSize="lg">
-            Seismic
-          </Tabs.Trigger>
-          <Tabs.Trigger value="remote" fontSize="lg">
-            Remote Sensing
-          </Tabs.Trigger>
-          <Tabs.Trigger value="daily" fontSize="lg">
-            Daily Activity
-          </Tabs.Trigger>
-        </Tabs.List>
-
+        <CanvasHeaderTabs tabs={DASHBOARD_TABS} />
         <HStack width="258px" justifyContent="flex-end">
           {isEditable ? (
             <>

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

@@ -1,7 +1,7 @@
-import { Box, Text, Heading, DataList, HStack, Tabs } from '@chakra-ui/react';
+import { Box, Text, Heading, DataList, Flex, HStack, Tabs } from '@chakra-ui/react';
 import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
 import { CanvasHeaderTabs } from '../CanvasComponents/CanvasHeaderTabs';
-import { VOLCANO_VIEWS } from '@/constants/viewKeys';
+import { VOLCANO_TABS } from '@/constants/viewKeys';
 import { VolcanoHome } from './VolcanoTabs/VolcanoHome';
 import { PartnerData } from './VolcanoTabs/PartnerData';
 import { Reports } from './VolcanoTabs/Reports';
@@ -15,7 +15,6 @@ export default function Volcano({ view, onChangeView }) {
         <Tabs.Root
             key={view}
             value={view}
-            // onValueChange={(e) => onChangeView(e.value)}
             variant="line"
             width="100%"
             height="100%"
@@ -25,9 +24,27 @@ export default function Volcano({ view, onChangeView }) {
                 const nextView = e.value;
                 onChangeView(nextView); 
             }}
-        >        
-            {/* HEADER */}
-            <CanvasHeaderTabs tabs={VOLCANO_VIEWS} />
+        >       
+            <Flex 
+                as="header"
+                position="sticky"
+                top="0"
+                zIndex="dropdown" // zIndex: 1100
+                bg="base200"
+                pl={5}
+                pr={2}
+                pt={3}
+                align="center"
+                justify="space-between"
+                width="100%"
+            > 
+                {/* HEADER */}
+                <CanvasHeaderTabs tabs={VOLCANO_TABS} />
+                <HStack width="258px" justifyContent="flex-end">
+                    <SearchBar />
+                    <SettingsButton />
+                </HStack>
+            </Flex>
             
             {/* CANVAS */}
             <Tabs.Content value="volcanohome">

client/src/components/Canvas/views/VolcanoTabs/VolcanoHome.jsx

@@ -23,7 +23,7 @@ export function VolcanoHome() {
   `;
 
     return (
-        <Box width="100%" px={6} py={4}>
+        <Box width="100%" px={6} py={2}>
             <Heading textAlign="center" mb={6} size="xl" fontWeight="bold">
                 Mount St. Helens - United States CVO
             </Heading>