Add new tabs and views under Admin sidebar tab

client/src/components/Canvas/Canvas.jsx

@@ -4,7 +4,7 @@ import Volcano from "./views/Volcano";
 import Admin from "./views/Admin";
 import Account from "./views/Account"
 import Home from "./views/Home";
-import { DASHBOARD_VIEWS } from "@/constants/viewKeys";
+import { DASHBOARD_VIEWS, ADMIN_VIEWS } from "@/constants/viewKeys";
 import { chakra } from "@chakra-ui/react";
 import Personal from "./views/Personal";
 import Security from "./views/Security";
@@ -13,14 +13,17 @@ export default function Canvas(props) {
   const { view } = props;
     return (
         <chakra.div width="100%" height="100%">
-            {/* Check if view is a tab inside the Canvas Header */}
+            {/* Check if view is a tab inside the Home Header */}
             { DASHBOARD_VIEWS.includes(view) && (
                 <Home {...props}/>
             )}
+            {/* Check if view is a tab inside the Admin Header */}
+            { ADMIN_VIEWS.includes(view) && (
+                <Admin {...props}/>
+            )}
             {view === "global" && <GlobalMap />}
             {view === "regional" && <RegionalMap />}
             {view === "volcano" && <Volcano />}
-            {view === "admin" && <Admin />}
             {view === "account" && <Account />}
             {view === "settings" && <Personal />}
             {view === "personal" && <Personal />}

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

@@ -1,24 +1,144 @@
-import { Box, Text } from '@chakra-ui/react';
+import { Box, Text, Flex, Tabs, HStack } from '@chakra-ui/react';
+import { MEDataEntry } from './AdminTabs/MEDataEntry';
+import { ProjectCollector } from './AdminTabs/ProjectCollector';
+import { NASApplication } from './AdminTabs/NASApplication';
+import { IVANS } from './AdminTabs/IVANS'
+import { SearchBar } from "../CanvasComponents/SearchBar";
+import { SettingsButton } from "../CanvasComponents/SettingsButton";
 
-export default function Admin() {
+export default function Admin({ view, onChangeView, onEditWidgets, appendWidget }) {
+  // Prop Forwarding
+  // const { view, layout, setLayout, setOriginalLayout,  onLayoutChange, onChangeView, onCancel, setOriginalWidgets,
+  //   isDelete, setIsDelete, beginEditIfNeeded, isEditable, setIsEditable, widgetArray, setWidgetArray } = props;
+  
+  // const MyDashboardProps = { layout, onLayoutChange, isEditable, beginEditIfNeeded, isDelete, DeleteWidget, widgetArray, appendWidget };
+  const settingsButtonProps = { onEditWidgets, appendWidget };
+  
   return (
-    <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
+    /* HEADER */
-      <Box 
+    <Tabs.Root 
-        bg="bg" 
+      width="100%"
-        shadow="md" 
+      height="100%"
-        borderRadius="md"
+      lazyMount 
-        p={8}
+      value={ view }
-        width="600px"
+      variant="line"
-        height="100px"
+      // Prevent navigation away from 'My Dashboard' while in Edit mode
-        textAlign="center"
+      onValueChange={(e) => {
-        display="flex"
+        const nextView = e.value;
-        alignItems="center"
+        onChangeView(nextView); 
-        justifyContent="center"
+      }}
+    >
+      <Flex 
+        as="header"
+        position="sticky"
+        top="0"
+        zIndex="dropdown" // zIndex: 1100
+        bg="base200"
+        px={5}
+        pt={3}
+        pb={2}
+        align="center"
+        justify="space-between"
+        width="100%"
       >
-        <Text fontsize="2xl" fontWeight="bold" color="gray.700">
+        <Tabs.List>
-            Admin Canvas coming soon!
+          <Tabs.Trigger value="medataentry" fontSize="lg">
-        </Text>
+            M&E Data Entry
-      </Box>
+          </Tabs.Trigger>
-    </Box>
+          <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>
+
+        <HStack width="258px" justifyContent="flex-end">
+              <SearchBar />
+              <SettingsButton {...settingsButtonProps}/>
+        </HStack>
+      </Flex>
+
+      {/* CANVAS */}
+      <Tabs.Content value="medataentry">
+          <MEDataEntry />
+        </Tabs.Content>
+        <Tabs.Content value="projectcollector">
+          <ProjectCollector />
+        </Tabs.Content>
+        <Tabs.Content value="nasapplication">
+          <NASApplication />
+        </Tabs.Content>
+        <Tabs.Content value="ivans">
+          <IVANS />
+        </Tabs.Content>
+    </Tabs.Root>
   );
-}
+}  
+
+
+  // return (
+  //     /* HEADER */
+  //     <Tabs.Root 
+  //       width="100%"
+  //       height="100%"
+  //       lazyMount 
+  //       value={ view }
+  //       variant="line"
+  //       // Prevent navigation away from 'My Dashboard' while in Edit mode
+  //       onValueChange={(e) => {
+  //         const nextView = e.value;
+  //         onChangeView(nextView); 
+  //       }}
+  //     >
+  //       <Flex 
+  //         as="header"
+  //         position="sticky"
+  //         top="0"
+  //         zIndex="dropdown" // zIndex: 1100
+  //         bg="base200"
+  //         px={5}
+  //         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>
+  //         <HStack width="258px" justifyContent="flex-end">
+  //           <SearchBar />
+  //           <SettingsButton onEditWidgets={onEditWidgets} appendWidget={appendWidget}/>
+  //         </HStack>
+  //       </Flex>
+  
+  //       {/* CANVAS */}
+        // <Tabs.Content value="medataentry">
+        //   <MEDataEntry />
+        // </Tabs.Content>
+        // <Tabs.Content value="projectcollector">
+        //   <ProjectCollector />
+        // </Tabs.Content>
+        // <Tabs.Content value="nasapplication">
+        //   <NASApplication />
+        // </Tabs.Content>
+        // <Tabs.Content value="ivans">
+        //   <IVANS />
+        // </Tabs.Content>
+  //     </Tabs.Root>
+  //   );
+  // }
+  

client/src/components/Canvas/views/AdminTabs/IVANS.jsx

@@ -0,0 +1,22 @@
+import { Box, Text } from "@chakra-ui/react";
+
+export function IVANS() {
+    return(
+        <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
+            <Box
+                bg="bg" 
+                shadow="md" 
+                borderRadius="md"
+                p={8}
+                width="600px"
+                height="100px"
+                textAlign="center"
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+            >
+                <Text fontsize="2xl" fontWeight="bold" color="gray.700">IVANS dashboard coming soon.</Text>
+            </Box>
+        </Box>
+    );
+}

client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx

@@ -0,0 +1,22 @@
+import { Box, Text } from "@chakra-ui/react";
+
+export function MEDataEntry() {
+    return(
+        <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
+            <Box
+                bg="bg" 
+                shadow="md" 
+                borderRadius="md"
+                p={8}
+                width="600px"
+                height="100px"
+                textAlign="center"
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+            >
+                <Text fontsize="2xl" fontWeight="bold" color="gray.700">M&E Data Entry dashboard coming soon.</Text>
+            </Box>
+        </Box>
+    );
+}

client/src/components/Canvas/views/AdminTabs/NASApplication.jsx

@@ -0,0 +1,22 @@
+import { Box, Text } from "@chakra-ui/react";
+
+export function NASApplication() {
+    return(
+        <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
+            <Box
+                bg="bg" 
+                shadow="md" 
+                borderRadius="md"
+                p={8}
+                width="600px"
+                height="100px"
+                textAlign="center"
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+            >
+                <Text fontsize="2xl" fontWeight="bold" color="gray.700">NAS Application dashboard coming soon.</Text>
+            </Box>
+        </Box>
+    );
+}

client/src/components/Canvas/views/AdminTabs/ProjectCollector.jsx

@@ -0,0 +1,22 @@
+import { Box, Text } from "@chakra-ui/react";
+
+export function ProjectCollector() {
+    return(
+        <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
+            <Box
+                bg="bg" 
+                shadow="md" 
+                borderRadius="md"
+                p={8}
+                width="600px"
+                height="100px"
+                textAlign="center"
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+            >
+                <Text fontsize="2xl" fontWeight="bold" color="gray.700">Project Collector dashboard coming soon.</Text>
+            </Box>
+        </Box>
+    );
+}

client/src/constants/viewKeys.js

@@ -1,6 +1,9 @@
-// Main views called from Sidebar
+// Main views called from Home tab -> Canvas navigation header
 export const DASHBOARD_VIEWS = ["mydashboard", "gas", "seismic", "remote", "daily"]
 
+// Admin views called from Admin tab -> Canvas navigation header
+export const ADMIN_VIEWS = ["admin", "medataentry", "projectcollector", "nasapplication", "ivans"]
+
 // Sub views called from inside Home.jsx
 export const VIEW_LABELS = {
     mydashboard: "My Dashboard",
@@ -12,4 +15,8 @@ export const VIEW_LABELS = {
     regional: "Regional Map", 
     volcano: "Volcano", 
     admin: "Admin",
+    medataentry: "M&E Data Entry",
+    projectcollector: "Project Collector", 
+    nasapplication: "NAS Application", 
+    ivans: "IVANS"
 };