Web-Frontend/client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx

import GridLayout, { WidthProvider } from 'react-grid-layout';
import { useSlotRecipe, chakra, Flex, SimpleGrid } from '@chakra-ui/react';
import CustomResizeHandle from '../../CanvasComponents/CustomResizeHandle';
import FirstWidgetButton from '../../CanvasComponents/FirstWidgetButton';

export default function MyDashboard({layout, onLayoutChange, isEditable, isDelete, DeleteWidget, widgetArray, appendWidget}) {
  const recipe = useSlotRecipe({ key: "widget" });
  const styles = recipe(); // using root recipe for widget below
  const ResponsiveGridLayout = WidthProvider(GridLayout); // canvas width now adjusts to window size
  const handleDragStart = () => { document.body.style.userSelect = "none"; }; // don't allow text highlighting when dragging
  const handleDragStop = () => { document.body.style.userSelect = ""; }; // allow text highlighting all other times
  let merged = [];

  if (widgetArray.length && layout.length) {
    const widgetMap = new Map(widgetArray.map(item => [item.i, item]));
    merged = layout.map(item => {
      return {
        ...item,
        ...widgetMap.get(item.i)
      };
    });
  }

  // Show large 'Add Widget' button when dashboard is empty
  if ( !layout.length ) {
    return (
      <Flex
        align="center"
        justify="center"
        h="100%"
        w="100%"
        bg="gray.150"
        borderRadius="md"
      >
        <FirstWidgetButton appendWidget={ appendWidget } />
      </Flex>
    );
  }

  // Show responsive grid of widgets 
  return (
    <ResponsiveGridLayout
      useCSSTransforms={false}  // remove the sliding animation of the widgets
      className="layout"
      layout={layout}
      cols={16} // Total columns in grid
      rowHeight={40} // Height of a single row in px
      isBounded={true} // Total width of the grid
      margin={[15, 5]} // [horizontal, vertical] gap
      onLayoutChange={onLayoutChange}
      draggableHandle=".widget-handle" // Make only the header draggable
      onDragStart={handleDragStart}
      onDragStop={handleDragStop}
      position="relative"
      resizeHandle={<CustomResizeHandle isVisable={isEditable} />}
    >
       { merged.map((item) => {
          const Widget = item.widget;
          return (
            <Flex key={item.i} css={styles.root} boxShadow="md" height="100%" >
              <Widget
                id={item.i}
                isEditable={isEditable}
                isDelete={isDelete}
                DeleteWidget={DeleteWidget}
                appendWidget={appendWidget}
              />
            </Flex>
          );
        })
      }
    </ResponsiveGridLayout>
  );
}