Refactor making changes to home and how widgets are altered

client/src/App.jsx

@@ -1,6 +1,6 @@
 import 'leaflet/dist/leaflet.css';
 import { Routes, Route, Navigate, Outlet } from 'react-router-dom';
-import { useRecipe, Grid, GridItem, useDialog } from "@chakra-ui/react";
+import { useRecipe, Grid, GridItem, useDialog, Flex, Heading } from "@chakra-ui/react";
 import { createContext } from "react";
 import Login from "@/Login.jsx";
 import Sidebar from "./components/Sidebar/Sidebar.jsx";
@@ -44,7 +44,11 @@ function AppFoundation() {
 //   if (user) return children;
 //   else return <Navigate to="/login" replace />;
 // }
-
+const Placeholder = ({ name }) => (
+    <Flex width="100%" height="100%" align="center" justify="center" bg="gray.50"_dark={{ bg: "gray.900" }}>
+        <Heading color="gray.400" _dark={{ bg: "gray.600" }} size="md">{name} Dashboard - Coming Soon</Heading>
+    </Flex>
+);
 function App() {
     const sidebarContext = createContext(["Home", "Global Map", "Regional Map", "Volcano", "Admin"]);
     // const [user, setUser] = useState(null);
@@ -56,7 +60,16 @@ function App() {
 
             {/*Non-Public Routes*/}
             <Route element={<AppFoundation />}>
-                <Route path="/home" element={<Home />} />
+
+                <Route path="/home" element={<Home />}>
+                    {/* We use our "pass" component to fill the Outlet until the real pages are built */}
+                    <Route index element={<Placeholder name="My" />} />
+                    <Route path="gas" element={<Placeholder name="Gas" />} />
+                    <Route path="seismic" element={<Placeholder name="Seismic" />} />
+                    <Route path="remote" element={<Placeholder name="Remote Sensing" />} />
+                    <Route path="daily" element={<Placeholder name="Daily Activity" />} />
+                </Route>
+
                 <Route path="/global-map" element={<GlobalMap />} />
                 <Route path="/regional-map" element={<RegionalMap />} />
                 <Route path="/volcano" element={<Volcano />} />

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

@@ -1,186 +1,64 @@
-import { HStack, Flex, Tabs, Button } from "@chakra-ui/react";
+import { HStack, Flex, Box } from "@chakra-ui/react";
-import { useState } from "react";
+import { NavLink, Outlet, useLocation } from "react-router-dom";
-import MyDashboard from "./HomeTabs/MyDashboard";
 import { SearchBar } from "../CanvasComponents/SearchBar";
 import { SettingsButton } from "../CanvasComponents/SettingsButton";
-import { DailyActivity } from "./HomeTabs/DailyActivity";
-import { Gas } from "./HomeTabs/Gas";
-import { Seismic } from "./HomeTabs/Seismic";
-import { RemoteSensing } from "./HomeTabs/RemoteSensing";
-import { CancelButton } from "../CanvasComponents/CancelButton";
-import { SaveButton } from "../CanvasComponents/SaveButton";
-import DeleteAllButton from "../CanvasComponents/DeleteAllButton";
-import { v4 as uuid } from 'uuid';
-import { CanvasHeaderTabs } from '../CanvasComponents/CanvasHeaderTabs';
-import { DASHBOARD_TABS } from "@/constants/viewKeys";
 
 export default function Home() {
-  const [isEditable, setIsEditable]           = useState(false); // editable=true means static=false (vice versa)
+  const location = useLocation();
-  const [isDelete, setIsDelete]               = useState(false);
+  const isPersonalDashboard = location.pathname === "/home" || location.pathname === "/home/";
-  const [originalLayout, setOriginalLayout]   = useState([]);
-  const [originalWidgets, setOriginalWidgets] = useState([]);
-  const [layout, setLayout]                   = useState([]);
-  const [widgetArray, setWidgetArray]         = useState([]);
 
-  function appendWidget(name, w, h, min_w, minh, max_w, max_h) {
+  // 1. 🎨 CSS Magic: Replicates Chakra's `<Tabs variant="line">` exactly
-    saveLayoutState(); // Save state before anything else
+  const tabStyles = {
-
+    fontSize: "lg",
-    const newID = uuid();      // could be replaced with something else like guid
+    fontWeight: "normal",
-    const COLS = 16;
+    color: "fg.muted",
-    const W = w ?? 3;
+    px: 4,                   // Horizontal padding
-    const H = h ?? 3; 
+    py: 2,                   // Vertical padding
-
+    borderBottom: "2px solid transparent",
-    setWidgetArray([           // updating widget array containing info on the types of widgets
+    mb: "-2px",              // 🔥 The trick: Pulls the active border down to overlap the container's line
-      ...widgetArray,
+    transition: "all 0.2s",
-      {i: newID, widget: name }
+    _hover: { color: "fg" },
-    ]);
+    _activeLink: {
-    // onAddWidget(newID, w, h, min_w, minh, max_w, max_h);       // updating array containing info on layout of widgets
+      color: "color",        // Or whatever your primary text color is
-    
+      borderColor: "currentColor", // The active underline
-    setLayout(prev => [
-      ...prev,
-      {
-        i: newID,
-        x: (prev.length * W) % COLS, 
-        y: 0,
-        w: w, 
-        h: h,
-        minW: min_w,
-        minH: minh,
-        maxW: max_w,
-        maxH: max_h,
-        static: false,
-        resizeHandles: ['se']
-      },
-    ]);
-  }
-
-  const onSave = () => {
-    console.log("saving widgets...");
-    // Set all widgets back to static: true
-    setLayout(prevLayout => 
-      prevLayout.map(item => ({
-        ...item,
-        static: true
-    }))
-  );
-    setIsEditable(false);
-    setIsDelete(false);
-    setOriginalLayout([]); // Clear backup layout
-    setOriginalWidgets([]);
-  }
-
-  const onEditWidgets = () => {
-    console.log("Start deleting widgets...");
-    saveLayoutState(); // Save state before anything else
-    setLayout(prevLayout =>
-      prevLayout.map(item => ({
-        ...item, 
-        static: false
-      }))
-    );
-    setIsEditable(true);
-    setIsDelete(true);
-  }
-
-  const DeleteWidget = (ID) => {
-    console.log("Deleting widget with id: ", ID);
-    setLayout(layout => layout.filter(w => w.i !== ID));
-    setWidgetArray(widgetArray => widgetArray.filter(w => w.i !== ID));
-  }
-
-  const DeleteAll = () => {
-    const confirm = window.confirm(
-      "Are you sure you want to delete all widgets?"
-    );
-    if (confirm) {
-      setLayout([]);
-      setWidgetArray([]);
-      onSave();
-    }
-    else return;
-  }
-
-
-  const saveLayoutState = () => {
-    if ( !isEditable ) {
-      setOriginalLayout(layout);
-      setOriginalWidgets(widgetArray);
     }
   };
 
-  const onCancel = () => {
-    console.log("canceling changes...");
-    console.log(originalWidgets);
-    if (originalLayout.length) {
-      setLayout(originalLayout.map(item => ({
-        ...item,
-        static: true
-      })));
-    }
-    setWidgetArray(originalWidgets);
-    setIsEditable(false);
-    setIsDelete(false);
-    setOriginalLayout([]);
-    setOriginalWidgets([]);
-  }
-
-  const onLayoutChange = (newLayout) => setLayout(newLayout);
-
-
-  // Prop Forwarding
-  const MyDashboardProps = { layout, onLayoutChange, isEditable, saveLayoutState, isDelete, DeleteWidget, widgetArray, appendWidget };
-  const settingsButtonProps = { onEditWidgets, appendWidget };
-  
   return (
-    /* SUB HEADER */
+      <Flex direction="column" height="100%" width="100%">
-    <Tabs.Root width="100%" height="100%" lazyMount variant="line">
-      <Flex as="header" position="sticky" top="0" zIndex="dropdown" bg="base200" p={5} align="center" justify="space-between" width="100%">
-        {/* TABS */}
-        {/* <CanvasHeaderTabs tabs={DASHBOARD_TABS} />*/} {/* TODO: rename to SubHeaderTabs */}
-        <Tabs.List>
-          {DASHBOARD_TABS.map(({ value, label }) =>
-            <Tabs.Trigger key={value} value={value} fontSize="lg">
-              { label }
-            </Tabs.Trigger>
-          )}
-        </Tabs.List>
 
-        {/* EDIT MODE BUTTONS */}
+        {/* 2. 🛠️ SUB HEADER: Matches your original padding and background */}
-        <HStack width="258px" justifyContent="flex-end">
+        <Flex as="header" position="sticky" top="0" zIndex="dropdown" bg="base200" p={5} align="center" justify="space-between" width="100%">
-          {isEditable ? (
+
-            <>
+          {/* TABS CONTAINER - Replicates the Tabs.List line container */}
-              <Button onClick={onSave} borderRadius="md" bg="primary" _hover={{bg: "primaryLt"}}>Save</Button>
+          <Flex borderBottom="2px solid" borderColor="border.muted" gap={2}>
-              <Button onClick={onCancel} borderRadius="md">Cancel</Button>
+            <Box as={NavLink} to="/home" end css={tabStyles}>My Dashboard</Box>
-              {isDelete ? (
+            <Box as={NavLink} to="/home/gas" css={tabStyles}>Gas</Box>
-                <DeleteAllButton onDeleteAll={ DeleteAll } />
+            <Box as={NavLink} to="/home/seismic" css={tabStyles}>Seismic</Box>
-              ):(null)
+            <Box as={NavLink} to="/home/remote" css={tabStyles}>Remote Sensing</Box>
-              }
+            <Box as={NavLink} to="/home/daily" css={tabStyles}>Daily Activity</Box>
-            </>
-          ):(
-            <>
-              <SearchBar placeholder="Enter a volcano to search" size="sm" width="210px" />
-              <SettingsButton {...settingsButtonProps}/>
-            </>
-          )}
-        </HStack>
           </Flex>
 
-      {/* CANVAS */}
+          {/* EDIT MODE BUTTONS & CONTROLS */}
-      <Tabs.Content value="mydashboard">
+          <HStack width="258px" justifyContent="flex-end">
-        <MyDashboard {...MyDashboardProps}/>
+            {isPersonalDashboard ? (
-      </Tabs.Content>
+                <>
-      <Tabs.Content value="gas">
+                  <SearchBar placeholder="Enter a volcano to search" size="sm" width="210px" />
-        <Gas />
+                  {/* This will eventually trigger your Zustand store's edit mode! */}
-      </Tabs.Content>
+                  <SettingsButton />
-      <Tabs.Content value="seismic">
+                </>
-        <Seismic />
+            ) : (
-      </Tabs.Content>
+                <SearchBar placeholder="Enter a volcano to search" size="sm" width="210px" />
-      <Tabs.Content value="remote">
+            )}
-        <RemoteSensing />
+          </HStack>
-      </Tabs.Content>
+
-      <Tabs.Content value="daily">
+        </Flex>
-        <DailyActivity />
+
-      </Tabs.Content>
+        {/* 3. 🛠️ CANVAS AREA */}
-    </Tabs.Root>
+        <Flex flex="1" overflow="auto">
+          <Outlet />
+        </Flex>
+
+      </Flex>
   );
 }

client/src/constants/widgetRegistry.jsx

@@ -0,0 +1,52 @@
+// config/widgetRegistry.js
+
+// We assume a 12-column grid.
+// w: 12 = full screen width
+// w: 6 = half screen width
+// w: 4 = one-third screen width
+// w: 3 = one-quarter screen width
+
+export const WIDGET_REGISTRY = {
+    "vaa_activity": {
+        name: "VAA 7 Day Activity",
+        description: "Displays 7-day flight level timelines across multiple volcanoes.",
+        allowedSizes: {
+            large: { w: 12, h: 8 }, // Spans the entire width of the screen
+        }
+    },
+
+    "db_cache_health": {
+        name: "DB Cache Health",
+        description: "Bar chart showing cache table operational status.",
+        allowedSizes: {
+            medium: { w: 4, h: 6 }, // 1/3 width
+            large:  { w: 6, h: 6 }  // 1/2 width
+        }
+    },
+
+    "ivans_alerts": {
+        name: "IVANS",
+        description: "Feed of recent IVANS reports and reviewer statuses.",
+        allowedSizes: {
+            small:  { w: 3, h: 6 }, // 1/4 width (tall and skinny)
+            medium: { w: 4, h: 8 }  // 1/3 width
+        }
+    },
+
+    "remote_sensing": {
+        name: "Remote Sensing",
+        description: "Feed of recent remote sensing reports.",
+        allowedSizes: {
+            medium: { w: 4, h: 5 }, // 1/3 width
+        }
+    },
+
+    "alert_levels": {
+        name: "Alert Level Changes",
+        description: "List of 7-day alert level changes with trend arrows.",
+        allowedSizes: {
+            small: { w: 3, h: 5 },
+            medium: { w: 4, h: 5 }
+        }
+    }
+};