Web-Frontend/client/src/components/Widget.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>
    );
}