Web-Frontend/client/src/components/layout/Dashboard.jsx

import { Global, css } from "@emotion/react";
import Header from './Header/Header.jsx';
import Sidebar from './Sidebar/Sidebar.jsx';
import Canvas from './Canvas/Canvas.jsx';
import { Grid, GridItem, useRecipe } from '@chakra-ui/react';
import { useState } from 'react';

export default function Dashboard() {
  const recipe = useRecipe({ key: "dashboard" });
  const styles = recipe();

  const [darkMode, setDarkMode] = useState(false);
  // Lifted State - defaults to widget dashboard
  const [view, setView] = useState("widget");
  const [layout, setLayout] = useState([
    { i: '0', x: 0, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: true },
    { i: '1', x: 3, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: true },
    { i: '2', x: 6, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: true }
  ]);

  return (
    <>
      <Grid css={styles}
        templateRows="1fr 11fr"
        templateColumns="1fr 20fr"
        height="100vh"
        width="100vw"
      >
        <GridItem rowSpan={1} colSpan={2}>
          <Header
            view={ view }
            setView={ setView }
          />
        </GridItem>
        <GridItem colSpan={1}>
          <Sidebar 
            darkMode={ darkMode }
            setDarkMode={ setDarkMode }
            view={ view }
            onChangeView={ setView }
          />
        </GridItem>
        <GridItem colSpan={1} width="100%" overflow="auto">
          <Canvas 
            darkMode={ darkMode }
            view={ view }
            setView={ setView }
            layout={ layout }
            setLayout={ setLayout }
            onLayoutChange={( newLayout ) => setLayout( newLayout )}
          />
        </GridItem> 
      </Grid>
    </>
  );
}