Add Volcano tabs along with functioning boilerplate component views

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, ADMIN_VIEWS } from "@/constants/viewKeys";
+import { DASHBOARD_VIEWS, VOLCANO_VIEWS, ADMIN_VIEWS } from "@/constants/viewKeys";
 import { chakra } from "@chakra-ui/react";
 import Personal from "./views/Personal";
 import Security from "./views/Security";
@@ -12,19 +12,26 @@ import Security from "./views/Security";
 export default function Canvas(props) {
   const { view } = props;
 
+  // Derive values for volcano tabs 
+  const VOLCANO_VALUES = VOLCANO_VIEWS.map(t => typeof t === "string" ? t : t.value)
+    
   return (
         <chakra.div width="100%" height="100%">
             {/* Check if view is a tab inside the Home Header */}
             { DASHBOARD_VIEWS.includes(view) && (
                 <Home {...props}/>
             )}
+            {/* Check if view is a tab inside the Volcano Header */}
+            { VOLCANO_VALUES.includes(view) && (
+                <Volcano {...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 === "volcano" && <Volcano />} */}
             {view === "account" && <Account />}
             {view === "settings" && <Personal />}
             {view === "personal" && <Personal />}

client/src/components/Canvas/CanvasComponents/CanvasHeaderTabs.jsx

@@ -0,0 +1,28 @@
+import { Flex, Tabs } from '@chakra-ui/react'
+
+// This component needs to be nested inside of a Tabs.Root to work properly
+export function CanvasHeaderTabs({ view, onChangeView, tabs }) {
+    return (
+            <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.map(({ value, label }) =>
+                    <Tabs.Trigger key={value} value={value} fontSize="lg">
+                        { label }
+                    </Tabs.Trigger>
+                )}
+            </Tabs.List>
+        </Flex>
+    )
+}

client/src/components/Canvas/CanvasComponents/DialogPopup.jsx

@@ -20,7 +20,7 @@ export default function DialogPopup({dialog}) {
               <Dialog.ActionTrigger asChild>
                 <Button variant="outline">No</Button>
               </Dialog.ActionTrigger>
-              <Button bg="tomato">Yes</Button>
+              <Button bg="red.500">Yes</Button>
             </Dialog.Footer>
             <Dialog.CloseTrigger asChild>
               <CloseButton size="sm" />

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

@@ -1,4 +1,4 @@
-import { Box, Text, Flex, Tabs, HStack } from '@chakra-ui/react';
+import { Flex, Tabs, HStack } from '@chakra-ui/react';
 import { MEDataEntry } from './AdminTabs/MEDataEntry';
 import { ProjectCollector } from './AdminTabs/ProjectCollector';
 import { NASApplication } from './AdminTabs/NASApplication';

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

@@ -1,70 +1,50 @@
-import { Box, Text, Heading, DataList, HStack } from '@chakra-ui/react';
+import { Box, Text, Heading, DataList, HStack, Tabs } from '@chakra-ui/react';
-import React from "react";
 import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
+import { CanvasHeaderTabs } from '../CanvasComponents/CanvasHeaderTabs';
+import { VOLCANO_VIEWS } from '@/constants/viewKeys';
+import { VolcanoHome } from './VolcanoTabs/VolcanoHome';
+import { PartnerData } from './VolcanoTabs/PartnerData';
+import { Reports } from './VolcanoTabs/Reports';
+import { OfficialInstitutions } from './VolcanoTabs/OfficialInstitutions';
+import { SocialMedia } from './VolcanoTabs/SocialMedia';
+import { SearchBar } from "../CanvasComponents/SearchBar";
+import { SettingsButton } from "../CanvasComponents/SettingsButton";
 
-export default function Volcano() {
+export default function Volcano({ view, onChangeView }) {
-    const position = [46.2, -122.18]; // Mt. St. Helens
-    const stats = [
-        { label: "Elevation", value: "2,539 (m) 8,330 (ft)", helpText: "Volcano Elevation" },
-        { label: "Volcano Type", value: "Stratovolcano", helpText: "Volcano Type" },
-        { label: "Composition", value: "Basalt to Ryodacite", helpText: "Volcano Composition" },
-        { label: "Recent Eruptions", value: "1980, 2004-2008", helpText: "Last Eruption" },
-        { label: "Threat Potential", value: "Very High", helpText: "Threat Potential" },
-    
-    ]
-
-    const historyText = `
-    Mount St. Helens, located in the Cascade Range of Washington State, is one of the most
-    active and well-known volcanoes in the United States. It famously erupted on May 18, 1980,
-    in one of the most significant volcanic events in U.S. history, which caused widespread
-    devastation and loss of life. The eruption reduced the mountain’s summit and created a large
-    crater. Subsequent dome-building eruptions continued through the 2000s, and the volcano
-    remains closely monitored today.
-  `;
-
     return (
-        <Box width="100%" px={6} py={4}>
+        <Tabs.Root
-            <Heading textAlign="center" mb={6} size="xl" fontWeight="bold">
+            key={view}
-                Mount St. Helens - United States CVO
+            value={view}
-            </Heading>
+            // onValueChange={(e) => onChangeView(e.value)}
+            variant="line"
+            width="100%"
+            height="100%"
+            lazyMount
+            // Prevent navigation away from 'My Dashboard' while in Edit mode
+            onValueChange={(e) => {
+                const nextView = e.value;
+                onChangeView(nextView); 
+            }}
+        >        
+            {/* HEADER */}
+            <CanvasHeaderTabs tabs={VOLCANO_VIEWS} />
             
-            <Box height="550px" borderRadius="md" overflow="hidden" boxShadow="md" mb={6}>
+            {/* CANVAS */}
-                <MapContainer center={position} zoom={10} style={{ height: "100%", width: "100%" }}>
+            <Tabs.Content value="volcanohome">
-                    <TileLayer
+                <VolcanoHome />
-                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            </Tabs.Content>
-                        attribution='&copy; OpenStreetMap contributors'
+            <Tabs.Content value="partner">
-                    />
+                <PartnerData />
-                    <Marker position={position}>
+            </Tabs.Content>
-                        <Popup>
+            <Tabs.Content value="reports">
-                            CVO — Home of the volcanoligists
+                <Reports />
-                        </Popup>
+            </Tabs.Content>
-                    </Marker>
+            <Tabs.Content value="official">
-                </MapContainer>
+                <OfficialInstitutions />
-            </Box>
+            </Tabs.Content>
-            
+            <Tabs.Content value="social">
-            <HStack align="start" spacing={10} mt={4}>
+                <SocialMedia />
-                <Box width="300px" height="200px" overflowY="auto" p={4} border="1px solid" borderColor="gray.200" borderRadius="md" bg="gray.50" boxShadow="sm">
+            </Tabs.Content>
-                    <DataList.Root orientation="horizontal">
+        </Tabs.Root>
-                        {stats.map((item) => (
-                            <DataList.Item key={item.label}>
-                                <DataList.ItemLabel>
-                                    {item.label}
-                                </DataList.ItemLabel>
-                                <DataList.ItemValue>
-                                    {item.value}
-                                </DataList.ItemValue>
-                            </DataList.Item>
-                        ))}
-                    </DataList.Root>
-                </Box>
-
-                <Box flex="1" height="200px" overflowY="auto" p={4} border="1px solid" borderColor="gray.200" borderRadius="md" bg="gray.50" boxShadow="sm">
-                    <Heading textAlign="center" pb={2}>Historical Summary</Heading>
-                    <Text>
-                        { historyText}
-                    </Text>
-                </Box>
-            </HStack>
-        </Box>
     );
 }

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

@@ -0,0 +1,22 @@
+import { Box, Text } from "@chakra-ui/react";
+
+export function OfficialInstitutions() {
+    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">Official Institutions dashboard coming soon.</Text>
+            </Box>
+        </Box>
+  );
+}

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

@@ -0,0 +1,22 @@
+import { Box, Text } from "@chakra-ui/react";
+
+export function PartnerData() {
+    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">Partner Data dashboard coming soon.</Text>
+            </Box>
+        </Box>
+  );
+}

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

@@ -0,0 +1,22 @@
+import { Box, Text } from "@chakra-ui/react";
+
+export function Reports() {
+    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">Reports dashboard coming soon.</Text>
+            </Box>
+        </Box>
+  );
+}

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

@@ -0,0 +1,22 @@
+import { Box, Text } from "@chakra-ui/react";
+
+export function SocialMedia() {
+    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">Social Media dashboard coming soon.</Text>
+            </Box>
+        </Box>
+  );
+}

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

@@ -0,0 +1,70 @@
+import { Box, Text, Heading, DataList, HStack } from '@chakra-ui/react';
+import React from "react";
+import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
+
+export function VolcanoHome() {
+    const position = [46.2, -122.18]; // Mt. St. Helens
+    const stats = [
+        { label: "Elevation", value: "2,539 (m) 8,330 (ft)", helpText: "Volcano Elevation" },
+        { label: "Volcano Type", value: "Stratovolcano", helpText: "Volcano Type" },
+        { label: "Composition", value: "Basalt to Ryodacite", helpText: "Volcano Composition" },
+        { label: "Recent Eruptions", value: "1980, 2004-2008", helpText: "Last Eruption" },
+        { label: "Threat Potential", value: "Very High", helpText: "Threat Potential" },
+    
+    ]
+
+    const historyText = `
+    Mount St. Helens, located in the Cascade Range of Washington State, is one of the most
+    active and well-known volcanoes in the United States. It famously erupted on May 18, 1980,
+    in one of the most significant volcanic events in U.S. history, which caused widespread
+    devastation and loss of life. The eruption reduced the mountain’s summit and created a large
+    crater. Subsequent dome-building eruptions continued through the 2000s, and the volcano
+    remains closely monitored today.
+  `;
+
+    return (
+        <Box width="100%" px={6} py={4}>
+            <Heading textAlign="center" mb={6} size="xl" fontWeight="bold">
+                Mount St. Helens - United States CVO
+            </Heading>
+            
+            <Box height="550px" borderRadius="md" overflow="hidden" boxShadow="md" mb={6}>
+                <MapContainer center={position} zoom={10} style={{ height: "100%", width: "100%" }}>
+                    <TileLayer
+                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                        attribution='&copy; OpenStreetMap contributors'
+                    />
+                    <Marker position={position}>
+                        <Popup>
+                            CVO — Home of the volcanoligists
+                        </Popup>
+                    </Marker>
+                </MapContainer>
+            </Box>
+            
+            <HStack align="start" spacing={10} mt={4}>
+                <Box width="300px" height="200px" overflowY="auto" p={4} border="1px solid" borderColor="gray.200" borderRadius="md" bg="gray.50" boxShadow="sm">
+                    <DataList.Root orientation="horizontal">
+                        {stats.map((item) => (
+                            <DataList.Item key={item.label}>
+                                <DataList.ItemLabel>
+                                    {item.label}
+                                </DataList.ItemLabel>
+                                <DataList.ItemValue>
+                                    {item.value}
+                                </DataList.ItemValue>
+                            </DataList.Item>
+                        ))}
+                    </DataList.Root>
+                </Box>
+
+                <Box flex="1" height="200px" overflowY="auto" p={4} border="1px solid" borderColor="gray.200" borderRadius="md" bg="gray.50" boxShadow="sm">
+                    <Heading textAlign="center" pb={2}>Historical Summary</Heading>
+                    <Text>
+                        { historyText}
+                    </Text>
+                </Box>
+            </HStack>
+        </Box>
+    );
+}

client/src/components/Sidebar/Sidebar.jsx

@@ -31,7 +31,7 @@ export default function Sidebar({ view, onChangeView, darkMode, setDarkMode }) {
       {icon: FaHome, name: "Home", view: "mydashboard"},
       {icon: FaGlobeAmericas, name: "Global Map", view: "global"},
       {icon: FaMapMarkerAlt, name: "Regional Map", view: "regional"},
-      {icon: FaVolcano, name: "Volcano", view: "volcano"},
+      {icon: FaVolcano, name: "Volcano", view: "volcanohome"},
       {icon: HiUsers, name: "Admin", view: "medataentry"}
     ];
   }, [view]);

client/src/constants/viewKeys.js

@@ -1,8 +1,18 @@
 // Main views called from Home tab -> Canvas navigation header
 export const DASHBOARD_VIEWS = ["mydashboard", "gas", "seismic", "remote", "daily"]
 
+// Volcano views called from Volcano tab -> Canvas navigation header
+// export const VOLCANO_VIEWS = ["volcanohome", "partner", "reports", "official", "social"]
+export const VOLCANO_VIEWS = [
+    { value: "volcanohome", label: "Volcano Home" },
+    { value: "partner", label: "Partner Data" },
+    { value: "reports", label: "Reports" },
+    { value: "official", label: "Official Institutions" },
+    { value: "social", label: "Social Media" },
+]
+
 // Admin views called from Admin tab -> Canvas navigation header
-export const ADMIN_VIEWS = ["admin", "medataentry", "projectcollector", "nasapplication", "ivans"]
+export const ADMIN_VIEWS = ["medataentry", "projectcollector", "nasapplication", "ivans"]
 
 // Sub views called from inside Home.jsx
 export const VIEW_LABELS = {
@@ -15,6 +25,13 @@ export const VIEW_LABELS = {
     regional: "Regional Map", 
     volcano: "Volcano", 
 
+    // Volcano navigation tabs
+    volcanohome: "Volcano Home", 
+    partner: "Partner Data", 
+    reports: "Reports", 
+    official: "Official Institutions", 
+    social: "Social Media",
+    
     // Admin navigation tabs 
     admin: "Admin",
     medataentry: "M&E Data Entry",