Save point, Sidebar prevents navigation without first saving or cancelling current changes

client/src/components/layout/Dashboard.jsx

@@ -10,7 +10,9 @@ export default function Dashboard() {
   const styles = recipe();
 
   const [darkMode, setDarkMode] = useState(false);
-  // Lifted State - defaults to widget dashboard
+  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 },
@@ -18,6 +20,18 @@ export default function Dashboard() {
     { i: '2', x: 6, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: true }
   ]);
 
+  // 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}
@@ -30,6 +44,7 @@ export default function Dashboard() {
           <Header
             view={ view }
             setView={ setView }
+            onChangeView={ handleViewChange }
           />
         </GridItem>
         <GridItem colSpan={1}>
@@ -37,7 +52,9 @@ export default function Dashboard() {
             darkMode={ darkMode }
             setDarkMode={ setDarkMode }
             view={ view }
-            onChangeView={ setView }
+            onChangeView={ handleViewChange }
+            isEditabe={ isEditable }
+            // onChangeView={ setView }
           />
         </GridItem>
         <GridItem colSpan={1} width="100%" overflow="auto">
@@ -47,7 +64,14 @@ export default function Dashboard() {
             setView={ setView }
             layout={ layout }
             setLayout={ setLayout }
+            originalLayout={ originalLayout }
+            setOriginalLayout={ setOriginalLayout }
             onLayoutChange={( newLayout ) => setLayout( newLayout )}
+            onChangeView={ handleViewChange }
+            isEditable={ isEditable }
+            setIsEditable={ setIsEditable }
+            isDelete={ isDelete }
+            setIsDelete={ setIsDelete }
           />
         </GridItem> 
       </Grid>