Web-Frontend/client/src/components/layout/Canvas/views/WidgetCanvas.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';
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>
    );
}