Save point, page renders and is functional

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

@@ -5,8 +5,8 @@ import { useState } from "react";
 import { Box } from "@chakra-ui/react";
 import CanvasHeader from "./CanvasHeader";
 import WidgetCanvas from "./views/WidgetCanvas";
-import MapCanvas from "./views/MapCanvas";
-import AdminCanvas from "./views/AdminCanvas";
+// import MapCanvas from "./views/MapCanvas";
+// import AdminCanvas from "./views/AdminCanvas";
 
 export default function Canvas() {
     const [view, setView] = useState("widget");
@@ -15,8 +15,8 @@ export default function Canvas() {
         <Box height="100%" width="100%">
             <CanvasHeader onSwitchView={setView} />
             {view === "widget" && <WidgetCanvas />}
-            {view === "map" && <MapCanvas />}
-            {view === "admin" && <AdminCanvas />}
+            {/* {view === "map" && <MapCanvas />} */}
+            {/* {view === "admin" && <AdminCanvas />} */}
         </Box>
     );
 }

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

@@ -0,0 +1,42 @@
+// This component defines a generic Widget that can be dynamically resized and 
+// dragged inside the canvas
+// Content not included, must be populated using custom charts plots and notifications
+
+import { useState } from 'react';
+import GridLayout from 'react-grid-layout';
+import Widget from '../Widget.jsx';
+import { Box } from '@chakra-ui/react';
+
+export default function WidgetCanvas() {
+    // Define widgets initial position and size
+    // TODO Add dynamic adding/deleting of widgets via options button 
+    const [layout, setLayout] = useState([
+        { i: 'myWidget1', x: 0, y: 0, w: 3, h: 3, minH: 3, static: false },
+        { i: 'myWidget2', x: 3, y: 0, w: 3, h: 3, minH: 3, static: false },
+        { i: 'myWidget3', x: 6, y: 0, w: 3, h: 3, minH: 3, static: false }
+    ]);
+
+    const onLayoutChange = (newLayout) => { 
+        setLayout(newLayout);
+        console.log('Updated layout:', newLayout)
+    };
+
+    return (
+        <GridLayout
+            className="layout"
+            layout={layout}
+            cols={12} // Total columns in grid
+            rowHeight={30} //Height of a single row in px
+            width={1200} // Total width of the grid
+            margin={[10, 10]} // [horizontal, vertical] gap
+            onLayoutChange={onLayoutChange}
+            draggableHandle=".widget-handle" // Make only the header draggable
+        >
+            {layout.map((item) => (
+                <div key={item.i} style={{ background: '#f0f0f0', borderRadius: 4 }}>
+                    <Widget title="VDAP Widget" />
+                </div>
+            ))}
+        </GridLayout>
+    );
+}