From 1d5b00448be26ae847a10b2e2ce41e32a2a331cf Mon Sep 17 00:00:00 2001
From: Venessa Kuchenik <vkuchenik@contractor.usgs.gov>
Date: Thu, 24 Jul 2025 08:52:20 -0700
Subject: [PATCH] added tabs and file restructure

---
 .../src/components/layout/Canvas/Canvas.jsx   | 24 ++++---
 .../components/layout/Canvas/CanvasHeader.jsx | 33 ----------
 .../layout/Canvas/CanvasHeaderNav.jsx         | 22 -------
 .../Canvas/{ => components}/SearchBar.jsx     |  0
 .../{ => components}/SettingsButton.jsx       |  0
 .../layout/Canvas/{ => components}/Widget.jsx |  0
 .../layout/Canvas/views/AdminCanvas.jsx       | 40 ++++++------
 .../layout/Canvas/views/DashboardCanvas.jsx   | 64 +++++++++++++++++++
 .../DashboardCanvasNav/DailyActivity.jsx      | 22 +++++++
 .../Canvas/views/DashboardCanvasNav/Gas.jsx   | 22 +++++++
 .../DashboardCanvasNav/RemoteSensing.jsx      | 22 +++++++
 .../views/DashboardCanvasNav/Seismic.jsx      | 22 +++++++
 .../{ => DashboardCanvasNav}/WidgetCanvas.jsx |  2 +-
 13 files changed, 184 insertions(+), 89 deletions(-)
 delete mode 100644 client/src/components/layout/Canvas/CanvasHeader.jsx
 delete mode 100644 client/src/components/layout/Canvas/CanvasHeaderNav.jsx
 rename client/src/components/layout/Canvas/{ => components}/SearchBar.jsx (100%)
 rename client/src/components/layout/Canvas/{ => components}/SettingsButton.jsx (100%)
 rename client/src/components/layout/Canvas/{ => components}/Widget.jsx (100%)
 create mode 100644 client/src/components/layout/Canvas/views/DashboardCanvas.jsx
 create mode 100644 client/src/components/layout/Canvas/views/DashboardCanvasNav/DailyActivity.jsx
 create mode 100644 client/src/components/layout/Canvas/views/DashboardCanvasNav/Gas.jsx
 create mode 100644 client/src/components/layout/Canvas/views/DashboardCanvasNav/RemoteSensing.jsx
 create mode 100644 client/src/components/layout/Canvas/views/DashboardCanvasNav/Seismic.jsx
 rename client/src/components/layout/Canvas/views/{ => DashboardCanvasNav}/WidgetCanvas.jsx (97%)

diff --git a/client/src/components/layout/Canvas/Canvas.jsx b/client/src/components/layout/Canvas/Canvas.jsx
index a527aa8..585d3d6 100644
--- a/client/src/components/layout/Canvas/Canvas.jsx
+++ b/client/src/components/layout/Canvas/Canvas.jsx
@@ -1,25 +1,23 @@
 // This Canvas component will be used to dynamically populate 
 // the main canvas section of the web App with a default state
-// of 'WidgetCanvas' 
+// of 'DashboardCanvas' 
 
 import { Box } from "@chakra-ui/react";
-import CanvasHeader from "./CanvasHeader";
-import WidgetCanvas from "./views/WidgetCanvas";
 import GlobalMapCanvas from "./views/GlobalMapCanvas";
 import RegionalMapCanvas from "./views/RegionalMapCanvas";
 import VolcanoCanvas from "./views/VolcanoCanvas";
 import AdminCanvas from "./views/AdminCanvas";
+import { DashboardCanvas } from "./views/DashboardCanvas";
 
 export default function Canvas({ view }) {
-    return (
-        <Box height="100%" width="100%">
-            <CanvasHeader />
-            {view === "widget" && <WidgetCanvas />}
-            {view === "global" && <GlobalMapCanvas />}
-            {view === "regional" && <RegionalMapCanvas />}
-            {view === "volcano" && <VolcanoCanvas />}
-            {view === "admin" && <AdminCanvas />}
-        </Box>
-    );
+  return (
+    <Box height="100%" width="100%">
+      {view === "widget" && <DashboardCanvas />}
+      {view === "global" && <GlobalMapCanvas />}
+      {view === "regional" && <RegionalMapCanvas />}
+      {view === "volcano" && <VolcanoCanvas />}
+      {view === "admin" && <AdminCanvas />}
+    </Box>
+  );
 }
 
diff --git a/client/src/components/layout/Canvas/CanvasHeader.jsx b/client/src/components/layout/Canvas/CanvasHeader.jsx
deleted file mode 100644
index cfe2076..0000000
--- a/client/src/components/layout/Canvas/CanvasHeader.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Flex, HStack, chakra, useRecipe } from "@chakra-ui/react";
-import { CanvasHeaderNav } from "./CanvasHeaderNav";
-import { SearchBar } from "./SearchBar";
-import { SettingsButton } from "./SettingsButton";
-
-
-
-export default function CanvasHeader() {
-    const recipe = useRecipe({ key: "canvas" });
-    const styles = recipe();
-    return (
-        <chakra.div css={styles}>
-            <Flex
-                as="header"
-                position="sticky"
-                top="0"
-                bg="base200"
-                borderBottom="1px solid"
-                borderColor="gray.200"
-                px={6}
-                py={3}
-                align="center"
-                justify="space-between"
-            >
-                <CanvasHeaderNav />
-                <HStack spacing={3}>
-                    <SearchBar />
-                    <SettingsButton />
-                </HStack>
-            </Flex>
-        </chakra.div>
-    );
-}
\ No newline at end of file
diff --git a/client/src/components/layout/Canvas/CanvasHeaderNav.jsx b/client/src/components/layout/Canvas/CanvasHeaderNav.jsx
deleted file mode 100644
index b80d7c5..0000000
--- a/client/src/components/layout/Canvas/CanvasHeaderNav.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { HStack, Link } from "@chakra-ui/react"
-
-const navItems = [
-    { label: "My Dashboard", href: "#dashboard" },
-    { label: "Gas", href: "#gas" },
-    { label: "Seismic", href: "#seismic" },
-    { label: "Remote Sensing", href: "#remote" },
-    { label: "Daily Activity", href: "#daily" },
-];
-
-export function CanvasHeaderNav() {
-    return (
-        <HStack as="nav" gap="8">
-            {navItems.map(({ label, href }) => (
-                <Link key={href} href={href} fontWeight="medium">
-                    {label}
-                </Link> 
-            ))}
-        </HStack>
-    );
-}
-
diff --git a/client/src/components/layout/Canvas/SearchBar.jsx b/client/src/components/layout/Canvas/components/SearchBar.jsx
similarity index 100%
rename from client/src/components/layout/Canvas/SearchBar.jsx
rename to client/src/components/layout/Canvas/components/SearchBar.jsx
diff --git a/client/src/components/layout/Canvas/SettingsButton.jsx b/client/src/components/layout/Canvas/components/SettingsButton.jsx
similarity index 100%
rename from client/src/components/layout/Canvas/SettingsButton.jsx
rename to client/src/components/layout/Canvas/components/SettingsButton.jsx
diff --git a/client/src/components/layout/Canvas/Widget.jsx b/client/src/components/layout/Canvas/components/Widget.jsx
similarity index 100%
rename from client/src/components/layout/Canvas/Widget.jsx
rename to client/src/components/layout/Canvas/components/Widget.jsx
diff --git a/client/src/components/layout/Canvas/views/AdminCanvas.jsx b/client/src/components/layout/Canvas/views/AdminCanvas.jsx
index 5cbb749..51a85c4 100644
--- a/client/src/components/layout/Canvas/views/AdminCanvas.jsx
+++ b/client/src/components/layout/Canvas/views/AdminCanvas.jsx
@@ -1,24 +1,24 @@
 import { Box, Text } from '@chakra-ui/react';
 
 export default function AdminCanvas() {
-    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">
-                    Admin Canvas coming soon!
-                </Text>
-            </Box>
-        </Box>
-    );
+  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">
+            Admin Canvas coming soon!
+        </Text>
+      </Box>
+    </Box>
+  );
 }
\ No newline at end of file
diff --git a/client/src/components/layout/Canvas/views/DashboardCanvas.jsx b/client/src/components/layout/Canvas/views/DashboardCanvas.jsx
new file mode 100644
index 0000000..5fee2cc
--- /dev/null
+++ b/client/src/components/layout/Canvas/views/DashboardCanvas.jsx
@@ -0,0 +1,64 @@
+import { HStack, Flex, Tabs } from "@chakra-ui/react";
+import WidgetCanvas from "./DashboardCanvasNav/WidgetCanvas";
+import { SearchBar } from "../components/SearchBar";
+import { SettingsButton } from "../components/SettingsButton";
+import { DailyActivity } from "./DashboardCanvasNav/DailyActivity";
+import { Gas } from "./DashboardCanvasNav/Gas";
+import { Seismic } from "./DashboardCanvasNav/Seismic";
+import { RemoteSensing } from "./DashboardCanvasNav/RemoteSensing";
+
+export function DashboardCanvas() {
+  return (
+    <Tabs.Root defaultValue="my dashboard">
+      <Flex 
+        as="header"
+				position="sticky"
+				top="0"
+				bg="base200"
+				px={6}
+				py={3}
+				align="center"
+				justify="space-between"
+      >
+        <Tabs.List>
+          <Tabs.Trigger value="my dashboard">
+            My Dashboard
+          </Tabs.Trigger>
+          <Tabs.Trigger value="gas">
+            Gas
+          </Tabs.Trigger>
+          <Tabs.Trigger value="seismic">
+            Seismic
+          </Tabs.Trigger>
+          <Tabs.Trigger value="remote sensing">
+            Remote Sensing
+          </Tabs.Trigger>
+                  <Tabs.Trigger value="daily activity">
+            Daily Activity
+          </Tabs.Trigger>
+        </Tabs.List>
+
+        <HStack>
+          <SearchBar />
+          <SettingsButton />
+        </HStack>
+      </Flex>
+
+      <Tabs.Content value="my dashboard">
+        <WidgetCanvas />
+      </Tabs.Content>
+      <Tabs.Content value="gas">
+        <Gas />
+      </Tabs.Content>
+      <Tabs.Content value="seismic">
+        <Seismic />
+      </Tabs.Content>
+      <Tabs.Content value="remote sensing">
+        <RemoteSensing />
+      </Tabs.Content>
+      <Tabs.Content value="daily activity">
+        <DailyActivity />
+      </Tabs.Content>
+    </Tabs.Root>
+  );
+}
\ No newline at end of file
diff --git a/client/src/components/layout/Canvas/views/DashboardCanvasNav/DailyActivity.jsx b/client/src/components/layout/Canvas/views/DashboardCanvasNav/DailyActivity.jsx
new file mode 100644
index 0000000..888ff00
--- /dev/null
+++ b/client/src/components/layout/Canvas/views/DashboardCanvasNav/DailyActivity.jsx
@@ -0,0 +1,22 @@
+import { Box, Text } from "@chakra-ui/react";
+
+export function DailyActivity() {
+  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">Daily Activity dashboard coming soon.</Text>
+      </Box>
+    </Box>
+  );
+}
\ No newline at end of file
diff --git a/client/src/components/layout/Canvas/views/DashboardCanvasNav/Gas.jsx b/client/src/components/layout/Canvas/views/DashboardCanvasNav/Gas.jsx
new file mode 100644
index 0000000..7589d69
--- /dev/null
+++ b/client/src/components/layout/Canvas/views/DashboardCanvasNav/Gas.jsx
@@ -0,0 +1,22 @@
+import { Box, Text } from "@chakra-ui/react";
+
+export function Gas() {
+	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">Gas dashboard coming soon.</Text>
+			</Box>
+		</Box>
+	);
+}
\ No newline at end of file
diff --git a/client/src/components/layout/Canvas/views/DashboardCanvasNav/RemoteSensing.jsx b/client/src/components/layout/Canvas/views/DashboardCanvasNav/RemoteSensing.jsx
new file mode 100644
index 0000000..1f0437b
--- /dev/null
+++ b/client/src/components/layout/Canvas/views/DashboardCanvasNav/RemoteSensing.jsx
@@ -0,0 +1,22 @@
+import { Box, Text } from "@chakra-ui/react";
+
+export function RemoteSensing() {
+  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">Remote Sensing dashboard coming soon.</Text>
+			</Box>
+		</Box>
+  );
+}
\ No newline at end of file
diff --git a/client/src/components/layout/Canvas/views/DashboardCanvasNav/Seismic.jsx b/client/src/components/layout/Canvas/views/DashboardCanvasNav/Seismic.jsx
new file mode 100644
index 0000000..42d2570
--- /dev/null
+++ b/client/src/components/layout/Canvas/views/DashboardCanvasNav/Seismic.jsx
@@ -0,0 +1,22 @@
+import { Box, Text } from "@chakra-ui/react";
+
+export function Seismic() {
+	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">Seismic dashboard coming soon.</Text>
+			</Box>
+		</Box>
+  );
+}
\ No newline at end of file
diff --git a/client/src/components/layout/Canvas/views/WidgetCanvas.jsx b/client/src/components/layout/Canvas/views/DashboardCanvasNav/WidgetCanvas.jsx
similarity index 97%
rename from client/src/components/layout/Canvas/views/WidgetCanvas.jsx
rename to client/src/components/layout/Canvas/views/DashboardCanvasNav/WidgetCanvas.jsx
index 33e0912..68d5532 100644
--- a/client/src/components/layout/Canvas/views/WidgetCanvas.jsx
+++ b/client/src/components/layout/Canvas/views/DashboardCanvasNav/WidgetCanvas.jsx
@@ -4,7 +4,7 @@
 
 import { useState } from 'react';
 import GridLayout, { WidthProvider } from 'react-grid-layout';
-import Widget from '../Widget.jsx';
+import Widget from '../../components/Widget.jsx';
 import { useSlotRecipe, chakra, Flex } from '@chakra-ui/react';
 
 export default function WidgetCanvas() {