Merge branch 'main' into 'add/widgets/theme'

# Conflicts:
#   client/src/App.jsx

client/src/App.jsx

@@ -1,67 +1,8 @@
-import { Global, css } from "@emotion/react";
+import Dashboard from './components/layout/Dashboard.jsx'
-import Header from './components/layout/Header/Header.jsx';
-import Sidebar from './components/layout/Sidebar/Sidebar.jsx';
-import Canvas from './components/layout/Canvas/Canvas.jsx';
-import { Grid, GridItem, useRecipe, Box } from '@chakra-ui/react';
 
 function App() {
-  const recipe = useRecipe({ key: "canvas" });
-  const styles = recipe();
-
   return (
-  <>
+    <Dashboard />
-    <Global // change the background color of widget shadow when moving
-      styles={css`
-        .react-grid-placeholder {
-          background: #c0d2e3ff !important;
-          border-color: #a9b6c2ff !important;
-          box-shadow: 0 0 10px #c0d2e3ff !important;
-          opacity: 1 !important;
-          border-radius: 5px;
-        }
-
-        .react-resizable-handle-se {
-          position: absolute;
-          bottom: 0;
-          z-index: 1;
-          border-radius: 5px;
-        }
-
-        * {
-          scrollbar-width: thin;              /* Firefox */
-          scrollbar-color: #a0aec0 transparent; /* Firefox */
-        }
-
-        /* Chrome, Edge, Safari */
-        ::-webkit-scrollbar {
-          width: 8px;
-        }
-        ::-webkit-scrollbar-thumb {
-          background-color: rgba(100, 100, 100, 0.4);
-          border-radius: 4px;
-        }
-        ::-webkit-scrollbar-track {
-          background: transparent;
-        }
-      `}
-    />
-    <Grid css={styles}
-      templateRows="1fr 11fr"
-      templateColumns="1fr 20fr"
-      height="100vh"
-      width="100vw"
-    >
-      <GridItem rowSpan={1} colSpan={2}>
-        <Header />
-      </GridItem>
-      <GridItem colSpan={1}>
-        <Sidebar />
-      </GridItem>
-      <GridItem colSpan={1} width="100%">
-        <Canvas />
-      </GridItem> 
-    </Grid>
-    </>
   );
 }
 

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

@@ -1,22 +1,24 @@
 // This Canvas component will be used to dynamically populate 
 // the main canvas section of the web App with a default state
 // of 'WidgetCanvas' 
-import { useState } from "react";
+
 import { Box } from "@chakra-ui/react";
 import CanvasHeader from "./CanvasHeader";
 import WidgetCanvas from "./views/WidgetCanvas";
-// import MapCanvas from "./views/MapCanvas";
+import GlobalMapCanvas from "./views/GlobalMapCanvas";
-// import AdminCanvas from "./views/AdminCanvas";
+import RegionalMapCanvas from "./views/RegionalMapCanvas";
-
+import VolcanoCanvas from "./views/VolcanoCanvas";
-export default function Canvas() {
+import AdminCanvas from "./views/AdminCanvas";
-    const [view, setView] = useState("widget");
 
+export default function Canvas({ view }) {
     return (
         <Box height="100%" width="100%">
-            <CanvasHeader onSwitchView={setView} />
+            <CanvasHeader />
             {view === "widget" && <WidgetCanvas />}
-            {/* {view === "map" && <MapCanvas />} */}
+            {view === "global" && <GlobalMapCanvas />}
-            {/* {view === "admin" && <AdminCanvas />} */}
+            {view === "regional" && <RegionalMapCanvas />}
+            {view === "volcano" && <VolcanoCanvas />}
+            {view === "admin" && <AdminCanvas />}
         </Box>
     );
 }

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

@@ -0,0 +1,24 @@
+import { Box, Text } from '@chakra-ui/react';
+
+export default function AdminCanvas() {
+    return (
+        <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
+            <Box 
+                bg="bg" 
+                shadow="md" 
+                borderRadius="md"
+                p={8}
+                width="600px"
+                height="100px"
+                textAlign="center"
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+            >
+                <Text fontsize="2xl" fontWeight="bold" color="gray.700">
+                    Admin Canvas coming soon!
+                </Text>
+            </Box>
+        </Box>
+    );
+}

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

@@ -0,0 +1,24 @@
+import { Box, Text } from '@chakra-ui/react';
+
+export default function GlobalMapCanvas() {
+    return (
+        <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
+            <Box 
+                bg="bg" 
+                shadow="md" 
+                borderRadius="md"
+                p={8}
+                width="600px"
+                height="100px"
+                textAlign="center"
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+            >
+                <Text fontsize="2xl" fontWeight="bold" color="gray.700">
+                    Global Map Canvas coming soon!
+                </Text>
+            </Box>
+        </Box>
+    );
+}

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

@@ -0,0 +1,26 @@
+import { Box, Text } from '@chakra-ui/react';
+
+export default function RegionalMapCanvas() {
+    return (
+        <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
+            <Box 
+                bg="bg" 
+                shadow="md" 
+                borderRadius="md"
+                p={8}
+                width="600px"
+                height="100px"
+                textAlign="center"
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+
+            
+            >
+                <Text fontsize="2xl" fontWeight="bold" color="gray.700">
+                    Regional Map Canvas coming soon!
+                </Text>
+            </Box>
+        </Box>
+    );
+}

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

@@ -0,0 +1,26 @@
+import { Box, Text } from '@chakra-ui/react';
+
+export default function VolcanoCanvas() {
+    return (
+        <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
+            <Box 
+                bg="bg" 
+                shadow="md" 
+                borderRadius="md"
+                p={8}
+                width="600px"
+                height="100px"
+                textAlign="center"
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+
+            
+            >
+                <Text fontsize="2xl" fontWeight="bold" color="gray.700">
+                    Volcano Canvas coming soon!
+                </Text>
+            </Box>
+        </Box>
+    );
+}

client/src/components/layout/Dashboard.jsx

@@ -0,0 +1,54 @@
+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: "canvas" });
+  const styles = recipe();
+
+  // Lifted State - defaults to widget dashboard
+  const [view, setView] = useState("widget");
+
+  return (
+  <>
+    <Global // change the background color of widget shadow when moving
+      styles={css`
+        .react-grid-placeholder {
+          background: #c0d2e3ff !important;
+          border-color: #a9b6c2ff !important;
+          box-shadow: 0 0 10px #c0d2e3ff !important;
+          opacity: 1 !important;
+          border-radius: 5px;
+        }
+
+        .react-resizable-handle-se {
+          position: sticky;
+          right: 0;
+          bottom: 0;
+        }
+      `}
+    />
+    <Grid css={styles}
+      templateRows="1fr 11fr"
+      templateColumns="1fr 20fr"
+      height="100vh"
+      width="100vw"
+    >
+      <GridItem rowSpan={1} colSpan={2}>
+        <Header />
+      </GridItem>
+      <GridItem colSpan={1}>
+        <Sidebar onChangeView={ setView } />
+      </GridItem>
+      <GridItem colSpan={1} width="100%">
+        <Canvas view={ view }/>
+      </GridItem> 
+    </Grid>
+    </>
+  );
+}
+
+

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

@@ -57,19 +57,19 @@ export const Users = createIcon({
   ),
 });
 
-export default function Sidebar() {
+export default function Sidebar({ onChangeView }) {
   const [isOpen, setIsOpen] = useState(true);
+  const [activeButton, setActiveButton] = useState(0)
 
     // this list of btns will come from the db (not every usr will have access to admin)
   const buttons = [
-    {icon: PushPin, name: "Dashboard"},
+    {icon: PushPin, name: "Dashboard", view: "widget"},
-    {icon: Globe, name: "Global Map"},
+    {icon: Globe, name: "Global Map", view: "global"},
-    {icon: MapMarker, name: "Regional Map"},
+    {icon: MapMarker, name: "Regional Map", view: "regional"},
-    {icon: FaVolcano, name: "Volcano"},
+    {icon: FaVolcano, name: "Volcano", view: "volcano"},
-    {icon: Users, name: "Admin"}
+    {icon: Users, name: "Admin", view: "admin"}
   ];
   
-  const [activeButton, setActiveButton] = useState(0)
   const recipe = useSlotRecipe({ key: "sidebar" });
   const styles = recipe();
 
@@ -99,7 +99,10 @@ export default function Sidebar() {
         return (
           <Button key={idx} 
                   css={styles.buttons} 
-                  onClick={() => setActiveButton(idx)} 
+                  onClick={() => {
+                    setActiveButton(idx);
+                    onChangeView(button.view); // Trigger state change in Dashboard
+                  }} 
                   bg={activeButton === idx ? "primary":undefined} 
                   justifyContent="flex-start"
           >