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 
+// This Canvas component will be used to dynamically populate 
-// dragged inside the canvas
+// the main canvas section of the web App with a default state
-// Content not included, must be populated using custom charts plots and notifications
+// of 'WidgetCanvas' 
-import { useState } from 'react';
+import { useState } from "react";
-import CanvasHeader from './CanvasHeader';
+import { Box } from "@chakra-ui/react";
-import GridLayout from 'react-grid-layout';
+import CanvasHeader from "./CanvasHeader";
-import Widget from './Widget.jsx';
+import WidgetCanvas from "./views/WidgetCanvas";
-import { Box } from '@chakra-ui/react';
+import MapCanvas from "./views/MapCanvas";
+import AdminCanvas from "./views/AdminCanvas";
 
 export default function Canvas() {
-    // Define widgets initial position and size
+    const [view, setView] = useState("widget");
-    // 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 (
         <Box height="100%" width="100%">
-            <CanvasHeader />
+            <CanvasHeader onSwitchView={setView} />
-            <GridLayout
+            {view === "widget" && <WidgetCanvas />}
-                className="layout"
+            {view === "map" && <MapCanvas />}
-                layout={layout}
+            {view === "admin" && <AdminCanvas />}
-                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>
         </Box>
     );
 }
+

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

@@ -1,7 +1,7 @@
 import { Flex, HStack, chakra, useRecipe } from "@chakra-ui/react";
-import { CanvasHeaderNav } from "./CanvasHeaderNav.jsx";
+import { CanvasHeaderNav } from "./CanvasHeaderNav";
-import { SearchBar } from "./SearchBar.jsx";
+import { SearchBar } from "./SearchBar";
-import { SettingsButton } from "./SettingsButton.jsx";
+import { SettingsButton } from "./SettingsButton";
 
 
 

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

@@ -1,4 +1,3 @@
-// Widget.jsx
 export default function Widget({ title }) {
     return (
       <>
@@ -15,62 +14,3 @@ export default function Widget({ title }) {
     );
   }
 
-// The below code has been moved to Canvas.jsx   
-
-// // 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';
-
-// export default function Widget() {
-//     // 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
-//         >
-//             <div key="myWidget1" style={{ background: '#f0f0f0', borderRadius: 4 }}>
-//                 <div className="widget-handle" style={{ padding: '4px', cursor: 'move', background: '#ddd' }}>
-//                     VDAP Widget
-//                 </div>
-//                 <div style={{ padding: '8px' }}>
-//                     This is the widget content - drag or resize me!
-//                 </div>
-//             </div><div key="myWidget2" style={{ background: '#f0f0f0', borderRadius: 4 }}>
-//                 <div className="widget-handle" style={{ padding: '4px', cursor: 'move', background: '#ddd' }}>
-//                     VDAP Widget
-//                 </div>
-//                 <div style={{ padding: '8px' }}>
-//                     This is the widget content - drag or resize me!
-//                 </div>
-//             </div><div key="myWidget3" style={{ background: '#f0f0f0', borderRadius: 4 }}>
-//                 <div className="widget-handle" style={{ padding: '4px', cursor: 'move', background: '#ddd' }}>
-//                     VDAP Widget
-//                 </div>
-//                 <div style={{ padding: '8px' }}>
-//                     This is the widget content - drag or resize me!
-//                 </div>
-//             </div>
-//         </GridLayout>
-//     );
-// }

client/src/components/layout/Header/UserAvatarMenu.jsx

@@ -8,7 +8,7 @@ export default function UserAvatarMenu({ name, avatar }) {
                 <Box
                     rounded="full" 
                     tabIndex={0}
-                    _hover={{ boxShadow: "0 0 0 2px rgb(37, 77, 197)" }}
+                    _hover={{ boxShadow: "0 0 0 2px rgb(102, 122, 182)" }}
                 >
                     <Avatar.Root shape="full">
                         <Avatar.Fallback name={name} />