Save point, page is rendering with view tracking

client/src/components/layout/Canvas/Canvas.jsx

@@ -9,7 +9,7 @@ import VolcanoCanvas from "./views/VolcanoCanvas";
 import AdminCanvas from "./views/AdminCanvas";
 import { DashboardCanvas } from "./views/DashboardCanvas";
 
-export default function Canvas({ view, layout, setLayout, onLayoutChange }) {
+export default function Canvas({ view, setView, layout, setLayout, onLayoutChange }) {
   const recipe = useRecipe({ key: "canvas" });
   const styles = recipe();
 
@@ -17,6 +17,8 @@ export default function Canvas({ view, layout, setLayout, onLayoutChange }) {
         <Box height="100%" width="100%">
             {view === "widget" && 
                 <DashboardCanvas
+                    view={ view }
+                    setView={ setView } 
                     layout={ layout }
                     setLayout={ setLayout }
                     onLayoutChange={ onLayoutChange }

client/src/components/layout/Canvas/views/DashboardCanvas.jsx

@@ -10,7 +10,7 @@ import { useState, useEffect, useDebugValue } from "react";
 import { CancelButton } from "../components/CancelButton";
 import { SaveButton } from "../components/SaveButton";
 
-export function DashboardCanvas({ layout, setLayout, onLayoutChange }) {
+export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChange }) {
   const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa)
   const [isDelete, setIsDelete] = useState(false);
   const [newCounter, setNewCounter] = useState(3);
@@ -81,7 +81,12 @@ export function DashboardCanvas({ layout, setLayout, onLayoutChange }) {
 
   return (
     /* HEADER */
-    <Tabs.Root lazyMount defaultValue="my dashboard">
+    <Tabs.Root 
+      lazyMount 
+      defaultValue="my dashboard"
+      value={ view }
+      onValueChange={ setView }  
+    >
       <Flex 
         as="header"
 				position="sticky"
@@ -94,7 +99,7 @@ export function DashboardCanvas({ layout, setLayout, onLayoutChange }) {
 				justify="space-between"
       >
         <Tabs.List>
-          <Tabs.Trigger value="my dashboard">
+          <Tabs.Trigger value="widget">
             My Dashboard
           </Tabs.Trigger>
           <Tabs.Trigger value="gas">
@@ -131,7 +136,7 @@ export function DashboardCanvas({ layout, setLayout, onLayoutChange }) {
       </Flex>
 
       {/* CANVAS */}
-      <Tabs.Content value="my dashboard">
+      <Tabs.Content value="widget">
         <WidgetCanvas 
           layout={layout}
           onLayoutChange={onLayoutChange}

client/src/components/layout/Dashboard.jsx

@@ -64,11 +64,14 @@ export default function Dashboard() {
           <Header />
         </GridItem>
         <GridItem colSpan={1}>
-          <Sidebar onChangeView={ setView }/>
+          <Sidebar 
+            view={ view }
+            onChangeView={ setView }/>
         </GridItem>
         <GridItem colSpan={1} width="100%" overflow="auto">
           <Canvas 
             view={ view }
+            setView={ setView }
             layout={ layout }
             setLayout={ setLayout }
             onLayoutChange={( newLayout ) => setLayout( newLayout )}

client/src/components/layout/Sidebar/Sidebar.jsx

@@ -7,9 +7,10 @@ import { FaGlobeAmericas } from "react-icons/fa";
 import { FaMapMarkerAlt } from "react-icons/fa";
 import { HiUsers } from "react-icons/hi2";
 import { VscThreeBars } from "react-icons/vsc";
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import { Seismic } from "../Canvas/views/DashboardCanvasNav/Seismic";
 
-export default function Sidebar({ onChangeView }) {
+export default function Sidebar({ view, onChangeView }) {
   const [isOpen, setIsOpen] = useState(true);
   const [activeButton, setActiveButton] = useState(0)
 
@@ -30,6 +31,25 @@ export default function Sidebar({ onChangeView }) {
     else setIsOpen(true);
   };
 
+  // Track currrent view from both Sidebar and Canvas when 'view' changes
+  useEffect(() => {
+    console.log("Current view = ", view);
+    const dashboardViews = ["widget", "gas", "seismic", "remote", "activity"];
+
+    const newIndex = buttons.findIndex((btn) => {
+      if (btn.view === "widget") {
+        return dashboardViews.includes(view); // Group match
+      }
+      return btn.view === view; // Exact match
+    });
+
+    if (newIndex !== -1 ) {
+      setActiveButton(newIndex);
+    }
+  }, [view]);
+  
+  
+
   return (
     <Box
       css={styles.root}
@@ -53,7 +73,7 @@ export default function Sidebar({ onChangeView }) {
                   // key={idx} 
                   css={styles.buttons} 
                   onClick={() => {
-                    setActiveButton(idx);
+                    // setActiveButton(idx);
                     onChangeView(button.view); // Trigger state change in Dashboard
                   }} 
                   bg={activeButton === idx ? "primary":undefined}