Merge branch 'add/dashboard/tabs' into 'main'

Add/dashboard/tabs

See merge request vkuchenik/website-framework!24

client/src/components/layout/Canvas/Canvas.jsx

@@ -3,59 +3,16 @@
 // of 'WidgetCanvas' 
 
 import { Box } from "@chakra-ui/react";
-import { useState } from '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 }) {
-    const [layout, setLayout] = useState([
-        { i: '0', x: 0, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false },
-        { i: '1', x: 3, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false },
-        { i: '2', x: 6, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false }
-    ]);
-    const [newCounter, setNewCounter] = useState(3);
-
-    const addWidget = () => {
-        const newId = newCounter.toString();
-        setLayout(prev => [
-            ...prev,
-            {
-                i: newId,
-                x: (prev.length * 3) % 12,
-                y: Infinity, 
-                w: 3, 
-                h: 3
-            }
-        ]);
-        setNewCounter(prev => prev + 1);
-    };
-
-    const removeWidget = (id) => {
-        setLayout(prev => prev.filter(w => w.i !== id));
-    }
-
-    const onLayoutChange = (newLayout) => { 
-        setLayout(newLayout);
-        console.log('Updated layout:', newLayout)
-    };
-
     return (
         <Box height="100%" width="100%">
-            <CanvasHeader 
+            {view === "widget" && <DashboardCanvas />}
-                onAddWidget={ addWidget }
-                onEditWidgets={() => console.log('Edit Widgets')}
-                onDeleteWidgets={() => console.log('Delete Widgets')}
-            />
-            {view === "widget" && 
-                <WidgetCanvas 
-                    layout={ layout }
-                    onLayoutChange={ onLayoutChange }
-                    removeWidget={ removeWidget }
-                />}
             {view === "global" && <GlobalMapCanvas />}
             {view === "regional" && <RegionalMapCanvas />}
             {view === "volcano" && <VolcanoCanvas />}
@@ -63,4 +20,3 @@ export default function Canvas({ view }) {
         </Box>
     );
 }
-

client/src/components/layout/Canvas/CanvasHeader.jsx

@@ -1,35 +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({ onAddWidget, onEditWidgets, onDeleteWidgets }) {
-    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
-                        onAddWidget={ onAddWidget }
-                        onEditWidgets={ onEditWidgets }
-                        onDeleteWidgets={ onDeleteWidgets }
-                    />
-                </HStack>
-            </Flex>
-        </chakra.div>
-    );
-}

client/src/components/layout/Canvas/CanvasHeaderNav.jsx

@@ -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>
-    );
-}
-

client/src/components/layout/Canvas/components/SettingsButton.jsx

@@ -5,22 +5,7 @@
 import { Button, IconButton, Menu, Portal } from "@chakra-ui/react";
 import { FiSettings } from "react-icons/fi";
 
-export function SettingsButton({ onAddWidget, onEditWidgets, onDeleteWidgets }) {
+export function SettingsButton({onAddWidget, onEditWidgdets, onRemoveWidgets}) {    
-    // const handleAddWidget = () => {
-    //     console.log("Add Widget clicked");
-    //     // TODO: Implement widget-adding logic
-    // }
-
-    // const handleEditWidgdets = () => {
-    //     console.log("Edit Widgets clicked")
-    //     // TODO: Implement widget-editing logic
-    // }
-
-    // const handleDeleteWidgets = () => {
-    //     console.log("Delete Widgets clicked");
-    //     // TODO: Implement widget-deletion logic
-    // }
-    
     return (
         // This uses Chakra's built in menu component
         <Menu.Root>
@@ -33,9 +18,9 @@ export function SettingsButton({ onAddWidget, onEditWidgets, onDeleteWidgets })
                 <Menu.Positioner>
                     <Menu.Content>
                         <Menu.Item onClick={onAddWidget} value="addwidget">Add Widget</Menu.Item>
-                        <Menu.Item onClick={ onEditWidgets } value ="editwidget">Edit Widgets</Menu.Item>
+                        <Menu.Item onClick={onEditWidgdets} value ="editwidget">Edit Widgets</Menu.Item>
                         <Menu.Item 
-                            onClick={ onDeleteWidgets }
+                            onClick={onRemoveWidgets}
                             color="fg.error"
                             _hover={{ bg: "bg.error", color: "fg.error "}}
                         >

client/src/components/layout/Canvas/views/DashboardCanvas.jsx

@@ -0,0 +1,106 @@
+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";
+import { useState } from "react";
+
+export function DashboardCanvas() {
+  const [layout, setLayout] = useState([
+    { i: '0', x: 0, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false },
+    { i: '1', x: 3, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false },
+    { i: '2', x: 6, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false }
+  ]);
+
+  const [newCounter, setNewCounter] = useState(3);
+
+  const onAddWidget = () => {
+    const newId = newCounter.toString();
+    setLayout(prev => [
+    ...prev,
+    {
+      i: newId,
+      x: (prev.length * 3) % 12,
+      y: Infinity, 
+      w: 3, 
+      h: 3
+    }
+    ]);
+    setNewCounter(prev => prev + 1);
+  };
+
+  const onRemoveWidget = (id) => {
+    setLayout(prev => prev.filter(w => w.i !== id));
+  }
+
+  const onLayoutChange = (newLayout) => { 
+    setLayout(newLayout);
+    console.log('Updated layout:', newLayout)
+  };
+
+  return (
+    /* HEADER */
+    <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 
+            onAddWidget={ onAddWidget }
+            // onEditWidgets={ onEditWidgets }
+            onDeleteWidgets={ onRemoveWidget }
+          />
+        </HStack>
+      </Flex>
+
+      {/* CANVAS */}
+      <Tabs.Content value="my dashboard">
+        <WidgetCanvas 
+          layout={layout}
+          onLayoutChange={onLayoutChange}
+        />
+      </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>
+  );
+}

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>
+  );
+}

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>
+	);
+}

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>
+  );
+}

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>
+  );
+}

client/src/components/layout/Canvas/views/DashboardCanvasNav/WidgetCanvas.jsx

@@ -4,27 +4,16 @@
 
 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({ layout, onLayoutChange, removeWidget }) {
+export default function WidgetCanvas({layout, onLayoutChange}) {
     // Define widgets initial position and size
     // TODO Add dynamic adding/deleting of widgets via options button 
     const recipe = useSlotRecipe({ key: "widget" });
     const styles = recipe(); // using root recipe for widget below
     const ResponsiveGridLayout = WidthProvider(GridLayout); // canvas width now adjusts to window size
 
-    // const [layout, setLayout] = useState([
-    //     { i: '0', x: 0, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false },
-    //     { i: '1', x: 3, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false },
-    //     { i: '2', x: 6, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false }
-    // ]);
-
-    // const onLayoutChange = (newLayout) => { 
-    //     setLayout(newLayout);
-    //     console.log('Updated layout:', newLayout)
-    // };
-
     // don't allow text highlighting when dragging
     const handleDragStart = () => {
         document.body.style.userSelect = "none";