Add initial widget functionality using react-grid-layout and react-resizable

client/src/components/Widget.jsx

@@ -0,0 +1,52 @@
+import { useState } from 'react';
+import GridLayout from 'react-grid-layout';
+
+export default function Widget() {
+    // Define widgets initial position and size 
+    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/sidebar.jsx

@@ -1,7 +1,7 @@
 import { Box, Button, createIcon, CloseButton, IconButton, Stack } from "@chakra-ui/react";
 import { FaVolcano } from "react-icons/fa6";
 import { RxHamburgerMenu } from "react-icons/rx";
-import { useState } from "react"
+import { useState } from "react";
 
 // ICONS
 export const PushPin = createIcon({