Merge branch 'feature/admin-view' into 'main'

Feature/admin view

See merge request vkuchenik/website-framework!68

client/src/components/Canvas/Canvas.jsx

@@ -4,23 +4,29 @@ 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";
 
+const ADMIN_DEFAULT = "medataentry";
+
 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,74 @@
-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({ view, onChangeView, onEditWidgets, appendWidget }) {
+  const settingsButtonProps = { onEditWidgets, appendWidget };
   
-export default function Admin() {
   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"
+    /* 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); 
+      }}
     >
-        <Text fontsize="2xl" fontWeight="bold" color="gray.700">
-            Admin Canvas coming soon!
-        </Text>
-      </Box>
-    </Box>
+      <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 {...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>
   );
 }  

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,6 +15,10 @@ export const VIEW_LABELS = {
     regional: "Regional Map", 
     volcano: "Volcano", 
     admin: "Admin",
+    medataentry: "M&E Data Entry",
+    projectcollector: "Project Collector", 
+    nasapplication: "NAS Application", 
+    ivans: "IVANS",
     settings: "Settings",
     personal: "Personal Info",
     security: "Security",