Add keyViews.js file inside src/constants to track current view in Sidebar and Canvas

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

@@ -8,6 +8,7 @@ import RegionalMapCanvas from "./views/RegionalMapCanvas";
 import VolcanoCanvas from "./views/VolcanoCanvas";
 import AdminCanvas from "./views/AdminCanvas";
 import { DashboardCanvas } from "./views/DashboardCanvas";
+import { DASHBOARD_VIEWS } from "@/constants/viewKeys";
 
 export default function Canvas({ view, setView, layout, setLayout, onLayoutChange }) {
   const recipe = useRecipe({ key: "canvas" });
@@ -15,14 +16,16 @@ export default function Canvas({ view, setView, layout, setLayout, onLayoutChang
 
     return (
         <Box height="100%" width="100%">
-            {view === "widget" && 
+            {/* {view === "widget" &&  */}
+            { DASHBOARD_VIEWS.includes(view) && (
                 <DashboardCanvas
                     view={ view }
                     setView={ setView } 
                     layout={ layout }
                     setLayout={ setLayout }
                     onLayoutChange={ onLayoutChange }
-                />}
+                />
+            )}
             {view === "global" && <GlobalMapCanvas />}
             {view === "regional" && <RegionalMapCanvas />}
             {view === "volcano" && <VolcanoCanvas />}

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

@@ -83,9 +83,11 @@ export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChan
     /* HEADER */
     <Tabs.Root 
       lazyMount 
-      defaultValue="my dashboard"
+      // defaultValue="widget"
       value={ view }
-      onValueChange={ setView }  
+      // onValueChange={ setView }
+      onValueChange={(e) => setView(e.value)}  
+      // onValueChange={(value) => setView(value)}
     >
       <Flex 
         as="header"
@@ -108,10 +110,10 @@ export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChan
           <Tabs.Trigger value="seismic">
             Seismic
           </Tabs.Trigger>
-          <Tabs.Trigger value="remote sensing">
+          <Tabs.Trigger value="remote">
             Remote Sensing
           </Tabs.Trigger>
-                  <Tabs.Trigger value="daily activity">
+                  <Tabs.Trigger value="daily">
             Daily Activity
           </Tabs.Trigger>
         </Tabs.List>
@@ -151,10 +153,10 @@ export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChan
       <Tabs.Content value="seismic">
         <Seismic />
       </Tabs.Content>
-      <Tabs.Content value="remote sensing">
+      <Tabs.Content value="remote">
         <RemoteSensing />
       </Tabs.Content>
-      <Tabs.Content value="daily activity">
+      <Tabs.Content value="daily">
         <DailyActivity />
       </Tabs.Content>
     </Tabs.Root>

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

@@ -9,6 +9,7 @@ import { HiUsers } from "react-icons/hi2";
 import { VscThreeBars } from "react-icons/vsc";
 import { useState, useEffect } from "react";
 import { Seismic } from "../Canvas/views/DashboardCanvasNav/Seismic";
+import { DASHBOARD_VIEWS } from "@/constants/viewKeys";
 
 export default function Sidebar({ view, onChangeView }) {
   const [isOpen, setIsOpen] = useState(true);
@@ -33,12 +34,13 @@ export default function Sidebar({ view, onChangeView }) {
 
   // Track currrent view from both Sidebar and Canvas when 'view' changes
   useEffect(() => {
+    console.log("typeof view =", typeof view);
     console.log("Current view = ", view);
-    const dashboardViews = ["widget", "gas", "seismic", "remote", "activity"];
+    // const dashboardViews = ["widget", "gas", "seismic", "remote", "daily"];
 
     const newIndex = buttons.findIndex((btn) => {
       if (btn.view === "widget") {
-        return dashboardViews.includes(view); // Group match
+        return DASHBOARD_VIEWS.includes(view); // Group match
       }
       return btn.view === view; // Exact match
     });
@@ -48,8 +50,6 @@ export default function Sidebar({ view, onChangeView }) {
     }
   }, [view]);
 
-  
-
   return (
     <Box
       css={styles.root}

client/src/constants/viewKeys.js

@@ -0,0 +1,15 @@
+// Main views called from Sidebar
+export const DASHBOARD_VIEWS = ["widget", "gas", "seismic", "remote", "daily"]
+
+// Sub views called from inside DashboardCanvas
+export const VIEW_LABELS = {
+    widget: "My Dashboard",
+    gas: "Gas", 
+    seismic: "Seismic", 
+    remote: "Remote Sensing",
+    daily: "Daily Activity",
+    global: "Global Map",
+    regional: "Regional Map", 
+    volcano: "Volcano", 
+    admin: "Admin",
+};