Add user account and settings boilerplate. UserAvatarMenu now navigates to placeholder pages for both Account and Settings

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

@@ -7,6 +7,8 @@ import GlobalMapCanvas from "./views/GlobalMapCanvas";
 import RegionalMapCanvas from "./views/RegionalMapCanvas";
 import VolcanoCanvas from "./views/VolcanoCanvas";
 import AdminCanvas from "./views/AdminCanvas";
+import AccountCanvas from "./views/AccountCanvas"
+import SettingsCanvas from "./views/SettingsCanvas"
 import { DashboardCanvas } from "./views/DashboardCanvas";
 import { DASHBOARD_VIEWS } from "@/constants/viewKeys";
 
@@ -30,6 +32,8 @@ export default function Canvas({ view, setView, layout, setLayout, onLayoutChang
             {view === "regional" && <RegionalMapCanvas />}
             {view === "volcano" && <VolcanoCanvas />}
             {view === "admin" && <AdminCanvas />}
+            {view === "account" && <AccountCanvas />}
+            {view === "settings" && <SettingsCanvas />}
         </Box>
     );
 }

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

@@ -0,0 +1,24 @@
+import { Box, Text } from '@chakra-ui/react';
+
+export default function AccountCanvas() {
+  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">
+            Account Canvas coming soon!
+        </Text>
+      </Box>
+    </Box>
+  );
+}

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

@@ -0,0 +1,24 @@
+import { Box, Text } from '@chakra-ui/react';
+
+export default function SettingsCanvas() {
+  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">
+            Settings Canvas coming soon!
+        </Text>
+      </Box>
+    </Box>
+  );
+}

client/src/components/layout/Dashboard.jsx

@@ -61,12 +61,16 @@ export default function Dashboard() {
         width="100vw"
       >
         <GridItem rowSpan={1} colSpan={2}>
-          <Header />
+          <Header
+            view={ view }
+            setView={ setView }
+          />
         </GridItem>
         <GridItem colSpan={1}>
           <Sidebar 
             view={ view }
-            onChangeView={ setView }/>
+            onChangeView={ setView }
+          />
         </GridItem>
         <GridItem colSpan={1} width="100%" overflow="auto">
           <Canvas 

client/src/components/layout/Header/Header.jsx

@@ -8,7 +8,7 @@ const user = {
   // avatar: "src\\assets\\user_profile.svg"
 }
 
-export default function Header() {
+export default function Header({ view, setView }) {
   const recipe = useRecipe({ key: "header" });
   const styles = recipe();
 
@@ -20,7 +20,12 @@ export default function Header() {
           <Text color="color" fontWeight="bold" textStyle="lg">{user.name}</Text>
           <Text color="fg.muted" textStyle="sm">{user.email}</Text>
         </Stack>
-        <UserAvatarMenu name={user.name} avatar={user.avatar} />
+        <UserAvatarMenu 
+          name={user.name} 
+          avatar={user.avatar} 
+          view={ view }
+          setView={ setView }
+        />
       </Flex>
     </chakra.div>
   );

client/src/components/layout/Header/UserAvatarMenu.jsx

@@ -1,7 +1,7 @@
 import { Avatar, Menu, Portal, Box } from "@chakra-ui/react"
 
 
-export default function UserAvatarMenu({ name, avatar }) {
+export default function UserAvatarMenu({ view, setView, name, avatar }) {
 	return (
 		<Menu.Root>
 			<Menu.Trigger focusRing="none">
@@ -21,9 +21,15 @@ export default function UserAvatarMenu({ name, avatar }) {
 				{/* zIndex: overlay = 1300 */}
 				<Menu.Positioner zIndex="overlay"> 
 					<Menu.Content>
-						<Menu.Item value="account">Account</Menu.Item>
+						<Menu.Item value="account" onClick={() => setView("account")}>
-						<Menu.Item value="settings">Settings</Menu.Item>
+							Account
-						<Menu.Item value="logout">Logout</Menu.Item>
+						</Menu.Item>
+						<Menu.Item value="settings" onClick={() => setView("settings")}>
+							Settings
+						</Menu.Item>
+						<Menu.Item value="logout" onClick={() => console.log("Log out triggered")}>
+							Logout
+						</Menu.Item>
 					</Menu.Content>
 				</Menu.Positioner>
 			</Portal>