Merge branch 'main' into 'add/widgets/conditional-deleting'

# Conflicts:
#   client/src/components/layout/Canvas/views/DashboardCanvas.jsx

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

@@ -9,10 +9,15 @@ import VolcanoCanvas from "./views/VolcanoCanvas";
 import AdminCanvas from "./views/AdminCanvas";
 import { DashboardCanvas } from "./views/DashboardCanvas";
 
-export default function Canvas({ view }) {
+export default function Canvas({ view, layout, setLayout, onLayoutChange }) {
     return (
         <Box height="100%" width="100%">
-            {view === "widget" && <DashboardCanvas />}
+            {view === "widget" && 
+                <DashboardCanvas 
+                    layout={ layout }
+                    setLayout={ setLayout }
+                    onLayoutChange={ onLayoutChange }
+                />}
             {view === "global" && <GlobalMapCanvas />}
             {view === "regional" && <RegionalMapCanvas />}
             {view === "volcano" && <VolcanoCanvas />}

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

@@ -10,16 +10,10 @@ import { useState, useEffect, useDebugValue } from "react";
 import { CancelButton } from "../components/CancelButton";
 import { SaveButton } from "../components/SaveButton";
 
-export function DashboardCanvas() {
-  console.log("rendering dashboardcanvas");
+export function DashboardCanvas({ layout, setLayout, onLayoutChange }) {
   const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa)
   const [isDelete, setIsDelete] = useState(false);
   const [newCounter, setNewCounter] = useState(3);
-  const [layout, setLayout] = useState([
-    { i: '0', x: 0, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: !isEditable },
-    { i: '1', x: 3, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: !isEditable },
-    { i: '2', x: 6, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: !isEditable }
-  ]);
   const [originalLayout, setOriginalLayout] = useState([]);
 
   const onAddWidget = () => {
@@ -85,11 +79,6 @@ export function DashboardCanvas() {
     setLayout(layout => layout.filter(w => w.i !== id));
   }
 
-  const onLayoutChange = (newLayout) => { 
-    setLayout(newLayout);
-    console.log('Updated layout:', newLayout)
-  };
-
   return (
     /* HEADER */
     <Tabs.Root lazyMount defaultValue="my dashboard">
@@ -97,7 +86,7 @@ export function DashboardCanvas() {
         as="header"
 				position="sticky"
 				top="0"
-        zIndex="banner"
+        zIndex="dropdown" // zIndex: 1100
 				bg="base200"
 				px={6}
 				py={3}

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

@@ -14,8 +14,6 @@ export default function RegionalMapCanvas() {
                 display="flex"
                 alignItems="center"
                 justifyContent="center"
-
-            
             >
                 <Text fontsize="2xl" fontWeight="bold" color="gray.700">
                     Regional Map Canvas coming soon!