Add new 'views' directory that handles what the Canvas displays. Refactor Canvas.jsx to act as a router between canvas views. Add /views/WidgetCanvas to handle default view

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

@@ -1,45 +1,23 @@
-// 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 CanvasHeader from './CanvasHeader';
-import GridLayout from 'react-grid-layout';
-import Widget from './Widget.jsx';
-import { Box } from '@chakra-ui/react';
+// This Canvas component will be used to dynamically populate 
+// the main canvas section of the web App with a default state
+// of 'WidgetCanvas' 
+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";
 
 export default function Canvas() {
-    // 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)
-    };
+    const [view, setView] = useState("widget");
 
     return (
         <Box height="100%" width="100%">
-            <CanvasHeader />
-            <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>
+            <CanvasHeader onSwitchView={setView} />
+            {view === "widget" && <WidgetCanvas />}
+            {view === "map" && <MapCanvas />}
+            {view === "admin" && <AdminCanvas />}
         </Box>
     );
 }
+