Merge branch 'main' into 'feature/admin-view'

# Conflicts:
#   client/src/components/Sidebar/Sidebar.jsx
#   client/src/constants/viewKeys.js

client/src/components/Canvas/CanvasComponents/Tooltip.jsx

@@ -3,7 +3,7 @@ import { chakra, useSlotRecipe } from "@chakra-ui/react";
 
 
 export default function Tooltip ({tooltipkey, content, sidebarIsOpen, children}) {
-  const [isVisible, setIsVisible] = useState(!sidebarIsOpen);
+  const [isVisible, setIsVisible] = useState(false);
   const recipe = useSlotRecipe({ key: "sidebar" });
   const styles = recipe();
   const timeoutId = useRef(null);
@@ -41,7 +41,7 @@ export default function Tooltip ({tooltipkey, content, sidebarIsOpen, children})
             py={1}
             borderRadius="md"
             whiteSpace="nowrap"
-            zIndex={10}
+            zIndex="overlay" // zIndex = 1300
           >
             {content}
           </chakra.div>

client/src/components/Sidebar/Sidebar.jsx

@@ -9,7 +9,7 @@ import { HiUsers } from "react-icons/hi2";
 import { VscThreeBars } from "react-icons/vsc";
 import { MdOutlineSecurity } from "react-icons/md";
 import { IoPersonCircleSharp } from "react-icons/io5";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { DASHBOARD_VIEWS } from "@/constants/viewKeys";
 
 export default function Sidebar({ view, onChangeView, darkMode, setDarkMode }) {
@@ -19,22 +19,21 @@ export default function Sidebar({ view, onChangeView, darkMode, setDarkMode }) {
   const styles = recipe();
   const { toggleColorMode } = useColorMode();
 
-    // this list of btns will come from the db (not every usr will have access to admin)
-  let buttons = [
-    {icon: FaHome, name: "Home", view: "mydashboard"},
-    {icon: FaGlobeAmericas, name: "Global Map", view: "global"},
-    {icon: FaMapMarkerAlt, name: "Regional Map", view: "regional"},
-    {icon: FaVolcano, name: "Volcano", view: "volcano"},
-    {icon: HiUsers, name: "Admin", view: "medataentry"}
-  ];
-
-  // Different Sidebar Button Options for Settings View
-  if (view === "settings" || view === "personal" || view === "security") {
-    buttons = [
-      {icon: IoPersonCircleSharp, name: "Personal Info", view: "personal"},
-      {icon: MdOutlineSecurity, name: "Security", view: "security"},
-    ]
-  };
+  const buttons = useMemo(() => {
+    if (["settings", "personal", "security"].includes(view)) {
+      return [
+        {icon: IoPersonCircleSharp, name: "Personal Info", view: "personal"},
+        {icon: MdOutlineSecurity, name: "Security", view: "security"},
+      ];
+    }
+    return [
+      {icon: FaHome, name: "Home", view: "mydashboard"},
+      {icon: FaGlobeAmericas, name: "Global Map", view: "global"},
+      {icon: FaMapMarkerAlt, name: "Regional Map", view: "regional"},
+      {icon: FaVolcano, name: "Volcano", view: "volcano"},
+      {icon: HiUsers, name: "Admin", view: "admin"}
+    ];
+  }, [view]);
 
   const toggleSidebar = () => {
     if (isOpen) setIsOpen(false);

client/src/constants/viewKeys.js

@@ -18,5 +18,8 @@ export const VIEW_LABELS = {
     medataentry: "M&E Data Entry",
     projectcollector: "Project Collector", 
     nasapplication: "NAS Application", 
-    ivans: "IVANS"
+    ivans: "IVANS",
+    settings: "Settings",
+    personal: "Personal Info",
+    security: "Security",
 };