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);
  const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa)
  const [isDelete, setIsDelete] = useState(false);
  const [originalLayout, setOriginalLayout] = useState([]);
  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 }
  ]);

  const onCancel = () => {
    console.log("canceling changes...");
    if (originalLayout.length) { 
      setLayout(originalLayout.map(item => ({
        ...item, 
        static: true
      })));
    };
    setIsEditable(false);
    setIsDelete(false);
    setOriginalLayout([]); 
  }
  
  // Prevent navigation while in Edit mode without saving or cancelling
  const handleViewChange = (nextView) => { 
    if (view === "widget" && isEditable) {
      const confirmed = window.confirm(
        "You have unsaved changes. Discard them and continue?"
      );
      if (!confirmed) return; 
      onCancel(); // Discards the layout
    }
    setView(nextView);
  };

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