update: display new data from llm quad plot view

fix: ivans, rs, and al were failing to load data

See merge request vkuchenik/website-framework!111

client/index.html

@@ -2,6 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
     <link rel="icon" type="image/svg+xml" href="volcano.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>VDAP</title>

client/src/App.jsx

@@ -18,42 +18,10 @@ import Volcano from "@/pages/volcano/Volcano.jsx";
 import GlobalMap from "./pages/maps/GlobalMap.jsx";
 import Admin from "./pages/admin/Admin.jsx";
 import MyDashboard from "./pages/home/tabs/MyDashboard.jsx";
+import Settings from "./pages/auth/Settings.jsx";
+import WebAdmin from "./pages/auth/WebAdmin.jsx";
 
-function AppFoundation() {
+export default function App() {
-  const recipe = useRecipe({ key: "dashboard" });
-  const styles = recipe();
-  const dialog = useDialog();
-
-  return (
-    <>
-      <DialogPopup dialog={dialog} />
-      <Grid css={styles}
-        templateRows="1fr 11fr"
-        templateColumns="auto 1fr"
-        height="100vh"
-        width="100vw"
-      >
-        <GridItem rowSpan={1} colSpan={2}>
-          <Header />
-        </GridItem>
-        <GridItem colSpan={1}>
-          <Sidebar />
-        </GridItem>
-        <GridItem colSpan={1} width="100%" overflow="auto">
-          <Outlet />
-        </GridItem>
-      </Grid>
-    </>
-  )
-}
-
-const Placeholder = ({ name }) => (
-    <Flex width="100%" height="100%" align="center" justify="center">
-        <Heading color="gray.500" _dark={{ color: "gray.200" }} size="lg">{name} Dashboard - Coming Soon</Heading>
-    </Flex>
-);
-
-function App() {
   // 1. Pull the initialization function from Zustand
   const checkAuth = useAuthStore((state) => state.checkAuth);
 
@@ -67,7 +35,7 @@ function App() {
       {/* --- Public Routes --- */}
       <Route path="/login" element={<Login/>}/>
 
-            {/* --- SECURE ROUTES --- */}
+      {/* --- Secure Routes --- */}
       <Route element={<ProtectedRoute/>}>
 
         {/* --- Non-Public Routes (Now completely locked down) --- */}
@@ -95,4 +63,33 @@ function App() {
   );
 }
 
-export default App;
+// The fundamental layout of the webpage
+function AppFoundation() {
+  const recipe = useRecipe({key: "dashboard"});
+  const styles = recipe();
+  const dialog = useDialog();
+
+  return (
+    <>
+      <DialogPopup dialog={dialog}/>
+      <Grid css={styles} templateRows="1fr 11fr" templateColumns="auto 1fr">
+        <GridItem rowSpan={2} colSpan={1}>
+          <Sidebar/>
+        </GridItem>
+        <GridItem rowSpan={1} colSpan={1}>
+          <Header/>
+        </GridItem>
+        <GridItem colSpan={1}>
+          <Outlet/>
+        </GridItem>
+      </Grid>
+    </>
+  )
+}
+
+// A dummy page that acts as a placeholder for pages that aren't developed yet but are navigatable to
+const Placeholder = ({name}) => (
+  <Flex width="100%" height="100%" align="center" justify="center">
+    <Heading color="gray.500" _dark={{color: "gray.200"}} size="lg">{name} Dashboard - Coming Soon</Heading>
+  </Flex>
+);

client/src/components/Widgets/LlmAlChangesQuadPlot.jsx

@@ -8,6 +8,10 @@ export default function LlmAlChangesQuadPlot(props) {
     let tn_percent = 0;
     let fp_percent = 0;
     let fn_percent = 0;
+    let jf_percent = 0;
+    let error_count = 0;
+    let no_dvar_data_count = 0;
+
 
     // Clean, single-line data fetching
     const { data: apiData, isLoading, error } = VdapApi('/api/v2/llm_quadrant_plot');
@@ -32,32 +36,34 @@ export default function LlmAlChangesQuadPlot(props) {
 
     if (apiData) {
         console.log(apiData);
-        tp_percent = ((apiData[0]['tp_count']/apiData[0]['tot_count'])*100).toFixed(2);
+        tp_percent = ((apiData[0]['tp_count']/apiData[0]['vr_count'])*100).toFixed(2);
-        tn_percent = ((apiData[0]['tn_count']/apiData[0]['tot_count'])*100).toFixed(2);
+        tn_percent = ((apiData[0]['tn_count']/apiData[0]['vr_count'])*100).toFixed(2);
-        fp_percent = ((apiData[0]['fp_count']/apiData[0]['tot_count'])*100).toFixed(2);
+        fp_percent = ((apiData[0]['fp_count']/apiData[0]['vr_count'])*100).toFixed(2);
-        fn_percent = ((apiData[0]['fn_count']/apiData[0]['tot_count'])*100).toFixed(2);
+        fn_percent = ((apiData[0]['fn_count']/apiData[0]['vr_count'])*100).toFixed(2);
+        jf_percent = ((apiData[0]['jf_count']/apiData[0]['vr_count'])*100).toFixed(2);
+        error_count = apiData[0]['e_count'];
+        no_dvar_data_count = apiData[0]['ndd_count'];
     }
 
     return (
-        <Flex direction="column" w="100%" h="100%" borderRadius="lg">
+        <Flex direction="column" w="100%" h="100%" bg="gray.800" borderRadius="lg" gap={1} p={1}>
-            <Flex direction="row" w="100%" bg="gray.800" borderTopRadius="lg" justifyItems="center" alignItems="start" p={2} pb={0} pl={4} justifyContent="end">
+            <Flex direction="column" align="end" justify="center" color="white" gap={1}>
-                {/*<Text fontWeight="bold" fontSize="lg" color="white">Alert Level Changes Quad Plot</Text>*/}
+                <Text w="fit" bg="cyan.200/5" borderRadius="sm" p={1}>All Time</Text>
-                <Text bg="cyan.200/5" borderRadius="sm" padding="1" fontWeight="normal" fontSize="sm" color="white">All time</Text>
             </Flex>
-            <Flex direction="column" w="100%" h="100%" bg="gray.800" gap="2" padding="2" borderBottomRadius="lg">
+            <Flex direction="column" w="100%" h="100%" gap="2" borderBottomRadius="lg">
                 <Flex direction="row" w="100%" h="100%" gap="2">
                     <Center bg={`blue.200/${tp_percent % 50}`} w="100%" h="100%" borderRadius="lg" color="white" fontSize="sm" fontWeight="bold">
                         <Flex direction="column" w="100%" h="100%" justifyContent="center" alignItems="center">
                             <Text>True Positive</Text>
                             <Text fontSize="lg"> {tp_percent}% </Text>
-                            <Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['tp_count']}/{apiData[0]['tot_count']} </Text>
+                            <Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['tp_count']}/{apiData[0]['vr_count']} </Text>
                         </Flex>
                     </Center>
                     <Center bg={`blue.200/${tn_percent % 50}`} w="100%" h="100%" borderRadius="lg" color="white" fontSize="sm" fontWeight="bold">
                         <Flex direction="column" w="100%" h="100%" justifyContent="center" alignItems="center">
                             <Text>True Negative</Text>
                             <Text fontSize="lg"> {tn_percent}% </Text>
-                            <Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['tn_count']}/{apiData[0]['tot_count']} </Text>
+                            <Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['tn_count']}/{apiData[0]['vr_count']} </Text>
                         </Flex>
                     </Center>
                 </Flex>
@@ -66,17 +72,30 @@ export default function LlmAlChangesQuadPlot(props) {
                         <Flex direction="column" w="100%" h="100%" justifyContent="center" alignItems="center">
                             <Text>False Positive</Text>
                             <Text fontSize="lg"> {fp_percent}% </Text>
-                            <Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['fp_count']}/{apiData[0]['tot_count']} </Text>
+                            <Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['fp_count']}/{apiData[0]['vr_count']} </Text>
                         </Flex>
                     </Center>
                     <Center bg={`blue.200/${fn_percent % 50}`} w="100%" h="100%" borderRadius="lg" color="white" fontSize="sm" fontWeight="bold">
                         <Flex direction="column" w="100%" h="100%" justifyContent="center" alignItems="center">
                             <Text>False Negative</Text>
                             <Text fontSize="lg"> {fn_percent}% </Text>
-                            <Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['fn_count']}/{apiData[0]['tot_count']} </Text>
+                            <Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['fn_count']}/{apiData[0]['vr_count']} </Text>
                         </Flex>
                     </Center>
                 </Flex>
+                <Flex direction="row" w="100%" h="100%" gap="2">
+                    <Center bg={`blue.200/${jf_percent % 50}`} w="100%" h="100%" borderRadius="lg" color="white" fontSize="sm" fontWeight="bold">
+                        <Flex direction="column" w="100%" h="100%" justifyContent="center" alignItems="center">
+                            <Text>Just False</Text>
+                            <Text fontSize="lg"> {jf_percent}% </Text>
+                            <Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['jf_count']}/{apiData[0]['vr_count']} </Text>
+                        </Flex>
+                    </Center>
+                </Flex>
+            </Flex>
+            <Flex direction="row" w="100%" justify="space-between" gap={1} color="white">
+                <Text w="fit" bg="blue.200/5" borderRadius="sm" p={1}>Errors: {error_count}</Text>
+                <Text w="fit" bg="blue.200/5" borderRadius="sm" p={1}>No DVAR Data: {no_dvar_data_count}</Text>
             </Flex>
         </Flex>
     )

client/src/components/dashboard/SettingsButton.jsx

@@ -1,7 +1,6 @@
-import { useState, useMemo, useRef } from "react";
+import {useState, useMemo, useRef, useEffect, useCallback} from "react";
 import {
   Button,
-    IconButton,
   Box,
   Text,
   Flex,
@@ -10,25 +9,62 @@ import {
   Tabs,
   Badge,
   Menu,
-    HStack
+  HStack,
+  useRecipe,
+  useSlotRecipe
 } from "@chakra-ui/react";
-import { Settings, Plus, LayoutGrid, Move, Save, X } from 'lucide-react';
+import {Settings, LayoutGrid, Move, Save, X, ChevronRight, ChevronLeft} from 'lucide-react';
 import {useDashboardStore} from "../../store/useDashboardStore.jsx";
 import {WIDGET_REGISTRY} from "../../constants/widgetRegistry.jsx";
 
+// 🚨 NEW: Tiny helper to convert size keys into abbreviations
+const getSizeAbbreviation = (key) => {
+  const mapping = {small: "S", medium: "M", large: "L", xlarge: "XL"};
+  return mapping[key.toLowerCase()] || key.charAt(0).toUpperCase();
+};
+
 export function SettingsButton() {
   // 1. ☁Store connections
   const isEditing = useDashboardStore(state => state.isEditing);
   const enterEditMode = useDashboardStore(state => state.enterEditMode);
-
-    // This now handles both local UI lock AND database saving!
   const saveEdit = useDashboardStore(state => state.saveEdit);
-
   const cancelEdit = useDashboardStore(state => state.cancelEdit);
   const addWidget = useDashboardStore(state => state.addWidget);
 
+  const glassTabRecipe = useRecipe({key: "glassTab"});
+  const tabStyles = glassTabRecipe();
+
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+
+  // Pull the glass container styles for the dropdown and modal
+  const panelRecipe = useSlotRecipe({key: "glassPanel"});
+  const panelStyles = panelRecipe({layout: "dropdown"});
+  const modalStyles = panelRecipe({layout: "popover"});
+
   const [isLibraryOpen, setIsLibraryOpen] = useState(false);
 
+  // ⬅️ ➡️ This is the callbacks and scroll control to add the chevron arrows in the tab list
+  const tabsRef = useRef(null);
+
+  const checkScroll = useCallback(() => {
+    if (tabsRef.current) {
+      const {scrollLeft, scrollWidth, clientWidth} = tabsRef.current;
+      setCanScrollLeft(scrollLeft > 0);
+      // We use -1 here to account for sub-pixel rendering in some browsers
+      setCanScrollRight(Math.ceil(scrollLeft + clientWidth) < scrollWidth - 1);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (isLibraryOpen) {
+      // Small timeout ensures the DOM has rendered the tabs before measuring
+      setTimeout(checkScroll, 50);
+      window.addEventListener('resize', checkScroll);
+      return () => window.removeEventListener('resize', checkScroll);
+    }
+  }, [isLibraryOpen, checkScroll]);
+
   // Smart Add Handler
   const handleAddWidget = (widgetId, sizeKey) => {
     enterEditMode();
@@ -55,94 +91,172 @@ export function SettingsButton() {
 
   return (
     <>
-            {/* THE STATIC DROPDOWN MENU */}
+      {isEditing ? (
+        // 📝 EDIT MODE: The 3-Pill Layout
+        <HStack>
+          {/* 1. The Add Widget Button */}
+          <Box as="button" css={tabStyles} data-state="open" onClick={() => setIsLibraryOpen(true)}
+            color={{base: "blue.500", _dark: "blue.300"}} _hover={{bg: "rgba(66, 153, 225, 0.1)"}}
+          >
+            <LayoutGrid size={20} style={{flexShrink: 0}}/>
+            <Box as="span">Widget Library</Box>
+          </Box>
+
+          {/* 2. The Save Button */}
+          <Box as="button" css={tabStyles} data-state="open" onClick={saveEdit} color={{base: "green.600", _dark: "green.400"}}
+            _hover={{bg: "rgba(72, 187, 120, 0.1)"}}
+          >
+            <Save size={20} style={{flexShrink: 0}}/>
+            <Box as="span">Save Layout</Box>
+          </Box>
+
+          {/* 3. The Discard Button */}
+          <Box as="button" css={tabStyles} data-state="open" onClick={cancelEdit} color={{base: "red.500", _dark: "red.400"}}
+            _hover={{bg: "rgba(245, 101, 101, 0.1)"}}
+          >
+            <X size={20} style={{flexShrink: 0}}/>
+            <Box as="span">Discard</Box>
+          </Box>
+        </HStack>
+      ) : (
+        // 👀 VIEW MODE: The Static Dropdown Menu
         <Menu.Root positioning={{getAnchorRect}}>
           <Menu.Trigger asChild>
-                    <IconButton
+            <Box ref={menuRef} as="button" css={tabStyles}>
-                        ref={menuRef}
+              {/* settings icon size set to 24 to match tabs. flexShrink 0 is CRITICAL */}
-                        aria-label="Settings"
+              <Settings size={24} style={{flexShrink: 0}}/>
-                        bg="vdap.darkGreen"
+              <Box as="span">Dashboard Settings</Box>
-                        color="white"
+            </Box>
-                        size="sm"
-                        borderRadius="md"
-                        _hover={{ bg: "vdap.darkGreenHover" }}
-                    >
-                        <Settings size={18} />
-                    </IconButton>
           </Menu.Trigger>
-                <Menu.Positioner>
-                    <Menu.Content bg="white" boxShadow="lg" borderRadius="md" p={1} zIndex="dropdown">
-                        {isEditing ? (
-                            <>
-                                {/* WIRE DIRECTLY TO saveEdit */}
-                                <Menu.Item onClick={saveEdit} color="green.600" fontWeight="bold" cursor="pointer" _hover={{ bg: "green.50" }}>
-                                    <Save size={16} style={{ marginRight: '8px' }} /> Save Layout
-                                </Menu.Item>
 
-                                <Menu.Item onClick={cancelEdit} color="red.500" cursor="pointer" _hover={{ bg: "red.50" }}>
+          <Menu.Positioner>
-                                    <X size={16} style={{ marginRight: '8px' }} /> Discard Changes
+            <Menu.Content css={panelStyles.root} zIndex="dropdown" minW="200px">
-                                </Menu.Item>
+              <Menu.Item
-                            </>
+                onClick={enterEditMode}
-                        ) : (
+                cursor="pointer"
-                            <Menu.Item onClick={enterEditMode} cursor="pointer" _hover={{ bg: "gray.100" }}>
+                _hover={{WebkitTextStroke: "0.5px currentColor"}}
+              >
                 <Move size={16} style={{marginRight: '8px'}}/> Edit Layout
               </Menu.Item>
-                        )}
 
-                        <Menu.Separator my={1} borderColor="gray.200" />
+              <Menu.Separator my={1} borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}/>
 
-                        <Menu.Item onClick={() => setIsLibraryOpen(true)} cursor="pointer" _hover={{ bg: "gray.100" }}>
+              <Menu.Item
+                onClick={() => setIsLibraryOpen(true)}
+                cursor="pointer"
+                _hover={{
+                  bg: {base: "rgba(0, 0, 0, 0.05)", _dark: "rgba(255, 255, 255, 0.1)"},
+                  WebkitTextStroke: "0.5px currentColor"
+                }}
+              >
                 <LayoutGrid size={16} style={{marginRight: '8px'}}/> Widget Library
               </Menu.Item>
             </Menu.Content>
           </Menu.Positioner>
         </Menu.Root>
+      )}
 
-            {/* THE WIDGET LIBRARY MODAL (Controlled by isLibraryOpen) */}
+      {/* 📚📚📚 THE WIDGET LIBRARY MODAL (Controlled by isLibraryOpen) */}
-            <Dialog.Root open={isLibraryOpen} onOpenChange={(e) => setIsLibraryOpen(e.open)} size="xl" placement="center">
+      <Dialog.Root
-                <Dialog.Backdrop bg="blackAlpha.600" />
+        open={isLibraryOpen}
+        onOpenChange={(e) => setIsLibraryOpen(e.open)}
+        closeOnInteractOutside={true}
+        closeOnEscapeKeyDown={true}
+        size="xl"
+        placement="center"
+      >
+        {/* Soft blur can be added to the background behind the modal */}
+        {/*<Dialog.Backdrop bg="blackAlpha.100" backdropFilter="blur(2px)"/>*/}
         <Dialog.Positioner>
-                    <Dialog.Content bg="gray.50" borderRadius="xl" overflow="hidden" boxShadow="xl" maxW="800px">
+          <Dialog.Content css={modalStyles.root}>
-                        <Dialog.Header bg="vdap.darkGreen" color="white" py={4}>
+            <Dialog.Header>
-                            <Dialog.Title fontSize="xl" fontWeight="bold">Add Dashboard Widgets</Dialog.Title>
+              <Dialog.Title>Widgets Shop</Dialog.Title>
             </Dialog.Header>
 
-                        <Dialog.Body p={0}>
+            <Dialog.Body>
-                            <Tabs.Root defaultValue={categories[0]} variant="enclosed" colorScheme="blue">
+              <Tabs.Root defaultValue={categories[0]} variant="unstyled">
-                                <Tabs.List bg="white" px={4} pt={4} borderBottom="1px solid" borderColor="gray.200">
+                {/* HORIZONTAL SCROLLABLE MENU OF WIDGET CATEGORIES */}
+                <Box>
+                  {/* left glass crescent */}
+                  {canScrollLeft && (
+                    <Flex onClick={() => tabsRef.current.scrollBy({left: -200, behavior: 'smooth'})}>
+                      <ChevronLeft size={18} style={{ marginLeft: "-30px" }}/> {/* Shifted slightly left to optically center it in the crescent mass */}
+                    </Flex>
+                  )}
+
+                  {/* the categories */}
+                  <Tabs.List ref={tabsRef} onScroll={checkScroll}
+                    // For desktop users (not on trackpad) to scroll
+                    onWheel={(e) => { if (e.currentTarget) e.currentTarget.scrollLeft += e.deltaY; }}
+                  >
                     {categories.map(cat => (
-                                        <Tabs.Trigger key={cat} value={cat} pb={2}>{cat}</Tabs.Trigger>
+                      <Tabs.Trigger key={cat} value={cat}>
+                        {cat}
+                      </Tabs.Trigger>
                     ))}
                   </Tabs.List>
 
+                  {/* right glass crescent */}
+                  {canScrollRight && (
+                    <Flex onClick={() => tabsRef.current.scrollBy({left: 200, behavior: 'smooth'})}>
+                      {/* Shifted slightly right to optically center it in the crescent mass */}
+                      <ChevronRight size={18} style={{ marginRight: "-30px" }}/>
+                    </Flex>
+                  )}
+                </Box>
+
+                {/* THE WIDGET OPTIONS W/IN EACH CATEGORY */}
                 {categories.map(cat => (
                   <Tabs.Content key={cat} value={cat} p={6}>
                     <Grid templateColumns="repeat(auto-fill, minmax(300px, 1fr))" gap={4}>
                       {categorizedWidgets[cat].map(widget => (
-                                                <Flex key={widget.id} direction="column" bg="white" p={4} borderRadius="md" border="1px solid" borderColor="gray.200" boxShadow="sm">
+                        <Flex
+                          key={widget.id}
+                          direction="column"
+                          bg={{base: "rgba(255, 255, 255, 0.6)", _dark: "rgba(0, 0, 0, 0.2)"}}
+                          p={4}
+                          borderRadius="xl"
+                          border="1px solid"
+                          borderColor={{base: "rgba(255, 255, 255, 0.9)", _dark: "whiteAlpha.200"}}
+                          boxShadow="sm"
+                        >
                           <Text fontWeight="bold" fontSize="md" mb={1}>{widget.name}</Text>
                           <Text fontSize="sm" color="gray.500" mb={4} flex="1">{widget.description}</Text>
 
-                                                    <Box borderTop="1px solid" borderColor="gray.100" pt={3}>
+                          <Box borderTop="1px solid" borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}
-                                                        <Text fontSize="xs" fontWeight="bold" color="gray.400" textTransform="uppercase" mb={2}>Add to Grid:</Text>
+                               pt={3}>
+                            <Text fontSize="xs" fontWeight="bold" color="gray.400" textTransform="uppercase"
+                                  mb={2}>
+                              Add to Dashboard:
+                            </Text>
                             <HStack gap={2} flexWrap="wrap">
                               {Object.keys(widget.allowedSizes).map(sizeKey => (
-                                                                <Badge
+                                <Box
                                   key={sizeKey}
                                   as="button"
+                                  css={tabStyles}
                                   onClick={() => handleAddWidget(widget.id, sizeKey)}
-                                                                    colorScheme="gray"
+                                  color={{base: "blue.600", _dark: "blue.300"}}
-                                                                    variant="subtle"
-                                                                    px={3}
-                                                                    py={1}
-                                                                    borderRadius="full"
-                                                                    cursor="pointer"
-                                                                    _hover={{ bg: "blue.50", color: "blue.600", transform: "scale(1.05)" }}
-                                                                    transition="all 0.2s"
                                 >
-                                                                    <Plus size={12} style={{ display: 'inline', marginRight: '4px' }}/>
+                                  {/* THE ABBREVIATION ICON: Always visible */}
-                                                                    {sizeKey.charAt(0).toUpperCase() + sizeKey.slice(1)}
+                                  <Flex
-                                                                </Badge>
+                                    align="center"
+                                    justify="center"
+                                    w="24px"
+                                    h="24px"
+                                    flexShrink={0}
+                                    borderRadius="full"
+                                    // bg={{base: "blue.50", _dark: "whiteAlpha.200"}}
+                                    fontWeight="black"
+                                    fontSize="xs"
+                                    bg='transparent'
+                                  >
+                                    {getSizeAbbreviation(sizeKey)}
+                                  </Flex>
+
+                                  {/* THE EXPANDED TEXT: Only visible on hover */}
+                                  <Box as="span">Add Widget</Box>
+                                </Box>
                               ))}
                             </HStack>
                           </Box>
@@ -153,7 +267,8 @@ export function SettingsButton() {
                 ))}
               </Tabs.Root>
             </Dialog.Body>
-                        <Dialog.CloseTrigger position="absolute" top={3} right={3} color="white" />
+            <Dialog.CloseTrigger position="absolute" top={3} right={3}
+                                 color={{base: "gray.500", _dark: "whiteAlpha.800"}} _hover={{color: "red.400"}}/>
           </Dialog.Content>
         </Dialog.Positioner>
       </Dialog.Root>

client/src/components/deprecated/AlertLevelWidget.jsx

@@ -1,79 +0,0 @@
-import Widget from "./Widget.jsx";
-import { Fieldset, NativeSelect, For, Box, Field, Input, Button, Text, Flex } from "@chakra-ui/react";
-import { useForm } from "react-hook-form";
-import { useState } from "react";
-import { Asterisk } from 'lucide-react';
-
-export default function AlertLevel({id, isEditable, isDelete, DeleteWidget}) {
-  const { register, handleSubmit, reset, formState: {errors} } = useForm();
-  const [isSubmit, setIsSubmit] = useState(false);
-
-  const onSubmit = (data) => {
-    setIsSubmit(true);
-    reset();
-  }
-
-  // Prop Forwarding
-  const widgetProps = { id, isEditable, isDelete, DeleteWidget, isSubmit, setIsSubmit }
-
-  return (
-    <Widget title="Alert Level" {...widgetProps} >
-      {!isSubmit ? (
-        // DISPLAYING INPUT FIElDS AND LABELS
-        <Box 
-          as="form" 
-          onSubmit={handleSubmit(onSubmit)}
-          width="100%"
-          p={3}
-          display="flex"
-          flexDir="column"
-        >
-          <Fieldset.Root size="md" maxW="md">
-            <Fieldset.Content>
-              <Field.Root>
-                <Field.Label fontWeight="semibold">Volcano</Field.Label>
-                <Input name="volcanoname" />
-              </Field.Root>
-
-              <Field.Root>
-                <Field.Label fontWeight="semibold">Country</Field.Label>
-                <NativeSelect.Root>
-                  <NativeSelect.Field name="country">
-                    <For each={["United Kingdom", "Canada", "United States"]}>
-                      {(item) => (
-                        <option key={item} value={item}>
-                          {item}
-                        </option>
-                      )}
-                    </For>
-                  </NativeSelect.Field>
-                  <NativeSelect.Indicator />
-                </NativeSelect.Root>
-              </Field.Root>
-            </Fieldset.Content>
-
-            <Button type="submit" size="sm">Submit</Button>
-          </Fieldset.Root>
-        </Box>
-      ):(
-        // DISPLAYING ALERT LEVEL DATA
-        <Box p={1} mt={1} ml="auto" mr="auto" width="200px">
-          <Box
-            bg="bg" 
-            shadow="md" 
-            borderRadius="md"
-            p={8}
-            width="200px"
-            height="10px"
-            textAlign="center"
-            display="flex"
-            alignItems="center"
-            justifyContent="center"
-          >
-            <Text fontsize="2xl" fontWeight="bold" color="gray.700">Alert Level Data Coming Soon.</Text>
-          </Box>
-        </Box>
-      )}
-    </Widget>
-  );
-}

client/src/components/deprecated/CancelButton.jsx

@@ -1,7 +0,0 @@
-import { Button } from "@chakra-ui/react";
-
-export function CancelButton ({onCancel}) {
-  return (
-    <Button onClick={onCancel} borderRadius="md">Cancel</Button>
-  )
-}

client/src/components/deprecated/Canvas.jsx

@@ -1,39 +0,0 @@
-// DEPRECATED
-
-// import GlobalMap from "./views/GlobalMap";
-// import RegionalMap from "./views/RegionalMap";
-// import Volcano from "./views/Volcano";
-// import Admin from "./views/Admin";
-// import Account from "./views/Account"
-// import Home from "./views/Home";
-// import { DASHBOARD_VIEWS, ADMIN_VIEWS, VOLCANO_VIEWS } from "@/constants/viewKeys";
-// import { chakra } from "@chakra-ui/react";
-// import Personal from "./views/Personal";
-// import Security from "./views/Security";
-//
-// export default function Canvas(props) {
-//   const { view } = props;
-//
-//   return (
-//         <chakra.div width="100%" height="100%">
-//             {/* Check if view is a tab inside the Home Header */}
-//             { DASHBOARD_VIEWS.includes(view) && (
-//                 <Home {...props}/>
-//             )}
-//             {/* Check if view is a tab inside the Volcano Header */}
-//             { VOLCANO_VIEWS.includes(view) && (
-//                 <Volcano {...props}/>
-//             )}
-//             {/* Check if view is a tab inside the Admin Header */}
-//             { ADMIN_VIEWS.includes(view) && (
-//                 <Admin {...props}/>
-//             )}
-//             {view === "global" && <GlobalMap />}
-//             {view === "regional" && <RegionalMap />}
-//             {view === "account" && <Account />}
-//             {view === "settings" && <Personal />}
-//             {view === "personal" && <Personal />}
-//             {view === "security" && <Security />}
-//         </chakra.div>
-//     );
-// }

client/src/components/deprecated/CustomResizeHandle.jsx

@@ -1,27 +0,0 @@
-import { MoveDiagonal2 } from 'lucide-react';
-import React from "react";
-
-const CustomResizeHandle = React.forwardRef((props, ref) => {
-  const { handleAxis, isVisable, ...restProps } = props;
-  if (!isVisable) return null;
-  return (
-    <div
-      ref={ref}
-      {...restProps}
-      className={`resize-hande-${handleAxis}`}
-      style={{
-        position: 'absolute',
-        bottom: 0,
-        right: 0,
-        cursor: "pointer",
-        width: "20px",
-        height: "20px",
-        zIndex: "1",
-      }}
-    >
-      <MoveDiagonal2 />
-    </div>
-  );
-});
-
-export default CustomResizeHandle;

client/src/components/deprecated/Dashboard.jsx

@@ -1,95 +0,0 @@
-// DEPRECATED
-
-// import Header from './Header/Header.jsx';
-// import Sidebar from './Sidebar/Sidebar.jsx';
-// import Canvas from './Canvas/Canvas.jsx';
-// import { Grid, GridItem, useRecipe, useDialog } from '@chakra-ui/react';
-// import { useState } from 'react';
-// import DialogPopup from './Canvas/CanvasComponents/DialogPopup.jsx';
-//
-// export default function Dashboard() {
-//   const recipe = useRecipe({ key: "dashboard" });
-//   const styles = recipe();
-//
-//   const [darkMode, setDarkMode] = useState(false);
-//   const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa)
-//   const [isDelete, setIsDelete] = useState(false);
-//   const [originalLayout, setOriginalLayout] = useState([]);
-//   const [originalWidgets, setOriginalWidgets] = useState([]);
-//   const [view, setView] = useState("mydashboard");
-//   const [layout, setLayout] = useState([]);
-//   const [widgetArray, setWidgetArray] = useState([]);
-//   const dialog = useDialog();
-//
-//   const beginEditIfNeeded = () => {
-//     if ( !isEditable ) {
-//       setOriginalLayout(layout);
-//       setOriginalWidgets(widgetArray);
-//     }
-//   };
-//
-//   const onCancel = () => {
-//     console.log("canceling changes...");
-//     console.log(originalWidgets);
-//     if (originalLayout.length) {
-//       setLayout(originalLayout.map(item => ({
-//         ...item,
-//         static: true
-//       })));
-//     };
-//     setWidgetArray(originalWidgets);
-//     setIsEditable(false);
-//     setIsDelete(false);
-//     setOriginalLayout([]);
-//     setOriginalWidgets([]);
-//   }
-//
-//   // Prevent navigation while in Edit mode without saving or cancelling
-//   const handleViewChange = (nextView) => {
-//     console.log("1. handling view change")
-//     if (view === "mydashboard" && isEditable) {
-//       console.log("2. currently editing");
-//       dialog.setOpen(true);
-//       return;
-//
-//       // const confirmed = window.confirm(
-//       //   "You have unsaved changes. Discard them and continue?"
-//       // );
-//       // if (!confirmed) return;
-//       // onCancel();
-//     }
-//     setView(nextView);
-//   };
-//
-//   const onLayoutChange = (newLayout) => setLayout(newLayout);
-//
-//   // Prop Forwarding
-//   const canvasProps = { view, layout, setLayout, setOriginalLayout, onLayoutChange, onChangeView: handleViewChange,
-//     onCancel, isEditable, setIsEditable, isDelete, setIsDelete, widgetArray, setWidgetArray, originalWidgets, setOriginalWidgets, beginEditIfNeeded
-//   };
-//   const sidebarProps = { view, onChangeView: handleViewChange, darkMode, setDarkMode };
-//   const headerProps = { onChangeView: handleViewChange };
-//
-//   return (
-//     <>
-//       <DialogPopup dialog={dialog} />
-//       <Grid css={styles}
-//         templateRows="1fr 11fr"
-//         // templateColumns="1fr 20fr"
-//         templateColumns="auto 1fr"
-//         height="100vh"
-//         width="100vw"
-//       >
-//         <GridItem rowSpan={1} colSpan={2}>
-//           <Header {...headerProps}/>
-//         </GridItem>
-//         <GridItem colSpan={1}>
-//           <Sidebar {...sidebarProps}/>
-//         </GridItem>
-//         <GridItem colSpan={1} width="100%" overflow="auto">
-//           <Canvas {...canvasProps}/>
-//         </GridItem>
-//       </Grid>
-//     </>
-//   );
-// }

client/src/components/deprecated/DeleteAllButton.jsx

@@ -1,9 +0,0 @@
-import { Button } from "@chakra-ui/react";
-
-export default function DeleteAllButton ({onDeleteAll}) {
-  return (
-    <Button onClick={onDeleteAll} color="#FFFFFF" bg="#EF4444" _hover={{ bg: "bg.error", color: "#EF4444"}}>
-      Delete All
-    </Button>
-  )
-}

client/src/components/deprecated/FirstWidgetButton.jsx

@@ -1,57 +0,0 @@
-import { Box, Menu, Portal } from '@chakra-ui/react'
-import AlertLevel from "@/components/deprecated/AlertLevelWidget.jsx";
-
-export default function FirstWidgetButton({ appendWidget }) {
-  const triggerItem = (
-    <>
-      <Menu.Trigger asChild>
-        <Box
-          p={6}
-          m="auto"
-          mt={6}
-          align="center"
-          textAlign="center"
-          justify="center"
-          width="400px"
-          borderRadius="md"
-          boxShadow="md"
-          border="2px dashed"
-          borderColor="gray.300"
-          bg="gray.50"
-          cursor="pointer"
-          _hover = {{
-            bg: "gray.100",
-            borderColor: "gray.400",
-            boxShadow: "lg",
-          }}
-        >
-          Add Your First Widget
-        </Box>
-      </Menu.Trigger>
-    </>
-  );
-  const positioning = { placement: "bottom-middle" };
-  // const WidgetMenuProps = { appendWidget, triggerItem, positioning };
-  return (
-    // <WidgetMenu {...WidgetMenuProps} />
-    <Menu.Root positioning={positioning}>
-      {triggerItem}
-      <Portal>
-        <Menu.Positioner>
-          <Menu.Content>
-            <Menu.Item
-              value="AlertLevel"
-              onClick={() => appendWidget(AlertLevel, 4, 7, 4, 7, 8, 14)}  // width and height are passed through here for each widget
-            >
-              Alert Level
-            </Menu.Item>
-            <Menu.Item value="CO2">CO2</Menu.Item>
-            <Menu.Item value="Ivans">IVANS</Menu.Item>
-            <Menu.Item value="PlumeHeights">Plume Heights</Menu.Item>
-            <Menu.Item value="AlertLevelChanges">Alert Level Changes</Menu.Item>
-          </Menu.Content>
-        </Menu.Positioner>
-      </Portal>
-    </Menu.Root>
-  );
-}

client/src/components/deprecated/SaveButton.jsx

@@ -1,7 +0,0 @@
-import { Button } from "@chakra-ui/react";
-
-export function SaveButton ({onSave}) {
-  return (
-    <Button onClick={onSave} borderRadius="md" bg="primary" _hover={{bg: "primaryLt"}}>Save</Button>
-  )
-}

client/src/components/deprecated/Widget.jsx

@@ -1,32 +0,0 @@
-import { useSlotRecipe, chakra, Flex, CloseButton, Text, IconButton } from "@chakra-ui/react"
-import { Undo } from 'lucide-react';
-
-export default function Widget(props) {
-  // deconstructing props
-  const { id, title, isEditable, isDelete, DeleteWidget, isSubmit, setIsSubmit, children } = props;
-
-  const recipe = useSlotRecipe({ key: "widget" });
-  const styles = recipe();
-
-  return (
-    <Flex flexDirection="column" w="100%" h="auto">
-      {/* HEADER */}
-      <Flex css={styles.header} cursor={isEditable ? "move":"default"} flexDirection="row" w="100%" h="auto" justifyContent="space-between" alignItems="center">
-        <Text className="widget-handle" w="100%" display="flex" alignItems="center" height="32px" fontWeight="bold">{title}</Text>
-        {isDelete ? (
-          <CloseButton onClick={() => DeleteWidget(id)} size="xs" _hover={{bg: "tomato", color: "white"}}/>
-        ):(
-          isSubmit ? (
-            <IconButton onClick={() => setIsSubmit(false)} size="xs" bg="base300" cursor="pointer"><Undo fill="text" /></IconButton>
-          ):null
-        )}
-      </Flex>
-
-      {/* CHILDREN */}
-      <Flex w="100%" h="auto">
-        {children}
-      </Flex>
-    </Flex>
-  );
-}
-

client/src/components/deprecated/WidgetMenu.jsx

@@ -1,26 +0,0 @@
-import { Menu, Portal } from "@chakra-ui/react";
-import AlertLevel from "./AlertLevelWidget.jsx";
-
-export default function WidgetMenu({appendWidget, triggerItem, positioning}) {
-  return (
-    <Menu.Root positioning={positioning}>
-      {triggerItem}
-      <Portal>
-        <Menu.Positioner>
-          <Menu.Content>
-            <Menu.Item 
-              value="AlertLevel" 
-              onClick={() => appendWidget(AlertLevel, 4, 7, 4, 7, 8, 14)}  // width and height are passed through here for each widget
-            >
-              Alert Level
-            </Menu.Item>
-            <Menu.Item value="CO2">CO2</Menu.Item>
-            <Menu.Item value="Ivans">IVANS</Menu.Item>
-            <Menu.Item value="PlumeHeights">Plume Heights</Menu.Item>
-            <Menu.Item value="AlertLevelChanges">Alert Level Changes</Menu.Item>
-          </Menu.Content>
-        </Menu.Positioner>
-      </Portal>
-    </Menu.Root>
-  )
-}

client/src/components/deprecated/tooltip.jsx

@@ -1,35 +0,0 @@
-import { Tooltip as ChakraTooltip, Portal } from '@chakra-ui/react'
-import * as React from 'react'
-
-export const Tooltip = React.forwardRef(function Tooltip(props, ref) {
-  const {
-    showArrow,
-    children,
-    disabled,
-    portalled = true,
-    content,
-    contentProps,
-    portalRef,
-    ...rest
-  } = props
-
-  if (disabled) return children
-
-  return (
-    <ChakraTooltip.Root {...rest}>
-      <ChakraTooltip.Trigger asChild>{children}</ChakraTooltip.Trigger>
-      <Portal disabled={!portalled} container={portalRef}>
-        <ChakraTooltip.Positioner>
-          <ChakraTooltip.Content ref={ref} {...contentProps}>
-            {showArrow && (
-              <ChakraTooltip.Arrow>
-                <ChakraTooltip.ArrowTip />
-              </ChakraTooltip.Arrow>
-            )}
-            {content}
-          </ChakraTooltip.Content>
-        </ChakraTooltip.Positioner>
-      </Portal>
-    </ChakraTooltip.Root>
-  )
-})

client/src/components/layout/Header.jsx

@@ -1,37 +1,34 @@
-import { useRecipe, Button, Stack, Text, Flex } from "@chakra-ui/react"
+import {useSlotRecipe, Text, Flex} from "@chakra-ui/react"
 import UserAvatarMenu from "./UserAvatarMenu.jsx";
-import { NavLink } from "react-router-dom";
 import useAuthStore from "@/store/authStore";
+import {SearchBar} from "@/components/dashboard/SearchBar.jsx";
 
 // Import the asset properly so Vite can bundle it for any server
 // import defaultAvatar from "@/assets/user_profile.svg";
 
 // Accept a 'user' prop now, fallback to placeholder if empty
 export default function Header() {
-    const recipe = useRecipe({ key: "header" });
+  const recipe = useSlotRecipe({key: "header"});
   const styles = recipe();
 
   const {user} = useAuthStore();
   console.log(user);
-    const displayName = user ? (user.fullName || user.username) : "Loading...";
+  const displayName = user ? (user.firstName || user.username) : "Loading...";
+  const avatarname = user ? (user.fullName || user.username) : "Loading...";
 
   const displayEmail = user?.email || "LDAP User";
 
   return (
-        <Flex css={styles} justify="space-between" align="center" width="100%">
+    <Flex css={styles.root}>
-            {/* Home Link Logo */}
+      <Flex css={styles.search_bar}>
-            <Button as={NavLink} to="/home" color="color" variant="plain" textStyle="5xl" fontWeight="bold">
+       <SearchBar placeholder="Enter a volcano to search"/>
-                VDAP
+      </Flex>
-            </Button>
 
       {/* User Profile Section */}
-            <Flex align="center" gap={3} pr={6}>
+      <Flex css={styles.user_info}>
-                <Stack gap="0" textAlign="right" cursor="default">
+        <Text>{displayName}</Text>
-                    <Text color="color" fontWeight="bold" textStyle="lg">{displayName}</Text>
-                    <Text color="fg.muted" textStyle="sm">{displayEmail}</Text>
-                </Stack>
         <UserAvatarMenu
-                    name={displayName}
+          name={avatarname}
           // avatar={user.avatar}
         />
       </Flex>

client/src/components/layout/Sidebar.jsx

@@ -1,9 +1,8 @@
-import { useSlotRecipe, Box, Button, IconButton } from "@chakra-ui/react";
+import {Mountain, House, Earth, MapPin, ShieldUser, PanelLeftClose, PanelLeftOpen} from 'lucide-react';
+import {useSlotRecipe, Box, Button, IconButton, Text, Flex} from "@chakra-ui/react";
 import {ColorModeButton} from "@/components/ui/color-mode.jsx";
-import { useState } from "react";
 import {NavLink} from "react-router-dom";
-import Tooltip from "../ui/Tooltip.jsx";
+import {useState} from "react";
-import { Mountain, House, Earth, MapPin, ShieldUser, Menu } from 'lucide-react';
 
 const SIDEBAR_DEFAULT_BUTTONS = [
   {icon: House, name: "Home", url: "/home"},
@@ -16,59 +15,43 @@ const SIDEBAR_DEFAULT_BUTTONS = [
 export default function Sidebar() {
   const [isOpen, setIsOpen] = useState(true);
   const recipe = useSlotRecipe({key: "sidebar"});
-  const styles = recipe();
+  const styles = recipe({state: isOpen ? "open" : "closed"});
-
+  const visibleButtons = SIDEBAR_DEFAULT_BUTTONS; // TODO: call btns here according to users authorization
-  // TODO we will need to call buttons here by authorized user, for now we update the visible buttons as simply the default buttons
-  const visibleButtons = SIDEBAR_DEFAULT_BUTTONS;
 
   const toggleSidebar = () => setIsOpen((prev) => !prev);
 
   return (
-      <Box css={styles.root} width={isOpen ? "210px" : "71px"} transition="width 0.4s ease" position="relative" display="flex" flexDirection="column" gap={2}
+    <Box css={styles.root}>
-      >
+       {/* Logo Navigates to Home Page */}
-        {/* Menu Trigger */}
+      <Button as={NavLink} to="/home" variant="plain" css={styles.logo}>
-        <IconButton aria-label="Toggle Sidebar" variant="plain" size="md" onClick={toggleSidebar} width="54px" alignSelf="flex-start"
+        <Flex>
-        >
+          <Text>🌋</Text>
-          <Menu />
+          <Text css={styles.logo_text}>VDAP</Text>
-        </IconButton>
+        </Flex>
+      </Button>
 
       {/* Navigation Buttons */}
       {visibleButtons.map((button) => {
         const Icon = button.icon;
         return (
-              <Tooltip key={button.name} content={button.name} sidebarIsOpen={isOpen}>
+          <Button as={NavLink} to={button.url} css={styles.buttons}> {/* Navigation buttons are [icon text] */}
-                <Button
+            <Icon/>
-                    as={NavLink}
+            <Box as="span" css={styles.button_text}>
-                    to={button.url}
-                    css={styles.buttons}
-                    justifyContent="flex-start"
-                    width="100%"
-                    overflow="hidden" // Prevents text popout on collapse
-                >
-                  <Icon style={{ flexShrink: 0 }} /> {/* Prevents icon from squishing */}
-
-                  {/* Cleaned conditional transition styling */}
-                  <Box
-                      as="span"
-                      ml={isOpen ? 3 : 0}
-                      opacity={isOpen ? 1 : 0}
-                      visibility={isOpen ? "visible" : "hidden"} // Prevents phantom width calculations and overflow into canvas
-                      transition="opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease"
-                      whiteSpace="nowrap"
-                  >
               {button.name}
             </Box>
           </Button>
-              </Tooltip>
         );
       })}
 
-        {/* Theme Toggler */}
+      {/* Collapse Sidebar and Theme Footer Buttons */}
-        <ColorModeButton
+      <Flex css={styles.footer}>
-            position="absolute"
+        <IconButton aria-label="Toggle Sidebar" variant="plain" onClick={toggleSidebar} css={styles.collapse_button}>
-            bottom="4"
+          {isOpen ? <PanelLeftClose /> : <PanelLeftOpen />}
-            left="4"
+        </IconButton>
-        />
+        <Flex css={styles.color_mode_button}>
+          <ColorModeButton />
+        </Flex>
+      </Flex>
     </Box>
   );
 }

client/src/constants/widgetRegistry.jsx

@@ -50,8 +50,8 @@ export const WIDGET_REGISTRY = {
         name: "IVANS",
         category: "Communications",
         description: "Feed of recent IVANS reports and reviewer statuses.",
-        component: lazy(() => import('../components/Widgets/IvansAlerts.jsx')),
+        component: lazy(() => import('../components/widgets/IvansAlerts.jsx')),
-        settingsComponent: lazy(() => import('../components/Widgets/settings/IvansAlertsSettings.jsx')),
+        settingsComponent: lazy(() => import('../components/widgets/settings/IvansAlertsSettings.jsx')),
         defaultSettings: {
             startDate: getStartDate(),
             endDate: getEndDate(),
@@ -72,8 +72,8 @@ export const WIDGET_REGISTRY = {
         name: "Remote Sensing",
         category: "Remote Sensing",
         description: "Feed of recent remote sensing reports.",
-        component: lazy(() => import('../components/Widgets/RemoteSensing.jsx')),
+        component: lazy(() => import('../components/widgets/RemoteSensing.jsx')),
-        settingsComponent: lazy(() => import('../components/Widgets/Settings/RemoteSensingSettings.jsx')),
+        settingsComponent: lazy(() => import('../components/widgets/settings/RemoteSensingSettings.jsx')),
         defaultSettings: {
             startDate: getStartDate(),
             endDate: getEndDate(),
@@ -94,8 +94,8 @@ export const WIDGET_REGISTRY = {
         name: "Alert Level Changes",
         category: "Daily Alerts",
         description: "List of 7-day alert level changes with trend arrows.",
-        component: lazy(() => import('../components/Widgets/AlertChanges.jsx')),
+        component: lazy(() => import('../components/widgets/AlertChanges.jsx')),
-        settingsComponent: lazy(() => import('../components/Widgets/settings/AlertChangeSettings.jsx')),
+        settingsComponent: lazy(() => import('../components/widgets/settings/AlertChangeSettings.jsx')),
         defaultSettings: {
             startDate: getStartDate(),
             endDate: getEndDate(),
@@ -111,7 +111,7 @@ export const WIDGET_REGISTRY = {
         category: "Daily Volcanic Activity",
         description: "List of explosion events over a specified time period.",
 
-        component: lazy(() => import('../components/Widgets/ExplosionEvents.jsx')),
+        component: lazy(() => import('../components/widgets/ExplosionEvents.jsx')),
 
         // The specific settings UI for this widget
         settingsComponent: lazy(() => import('../components/widgets/settings/ExplosionEventsSettings.jsx')),
@@ -131,8 +131,8 @@ export const WIDGET_REGISTRY = {
         name: "Plume Events",
         category: "Daily Volcanic Activity",
         description: "Plot of explosion heights over a weeks time.",
-        component: lazy(() => import('../components/Widgets/PlumeEvents.jsx')),
+        component: lazy(() => import('../components/widgets/PlumeEvents.jsx')),
-        settingsComponent: lazy(() => import('../components/Widgets/settings/PlumeEventsSettings.jsx')),
+        settingsComponent: lazy(() => import('../components/widgets/settings/PlumeEventsSettings.jsx')),
         defaultSettings: {
             startDate: getStartDate(),
             endDate: getEndDate(),
@@ -146,8 +146,8 @@ export const WIDGET_REGISTRY = {
         name: "Seismic Events",
         category: "Daily Volcanic Activity",
         description: "Plot of number of seismic events over a weeks time.",
-        component: lazy(() => import('../components/Widgets/SeismicEvents.jsx')),
+        component: lazy(() => import('../components/widgets/SeismicEvents.jsx')),
-        settingsComponent: lazy(() => import('../components/Widgets/settings/SeismicEventsSettings.jsx')),
+        settingsComponent: lazy(() => import('../components/widgets/settings/SeismicEventsSettings.jsx')),
         defaultSettings: {
             startDate: getStartDate(),
             endDate: getEndDate(),
@@ -161,7 +161,7 @@ export const WIDGET_REGISTRY = {
         name: "Alert Level Changes Quad Plot",
         category: "Computer Science",
         description: "Percentage of TP, TN, FP, and FN changes in viable alert levels.",
-        component: lazy(() => import('../components/Widgets/LlmAlChangesQuadPlot.jsx')),
+        component: lazy(() => import('../components/widgets/LlmAlChangesQuadPlot.jsx')),
         allowedSizes: {
             medium: { w: 3, h: 12 }
         }
@@ -171,8 +171,8 @@ export const WIDGET_REGISTRY = {
         name: "Communication Coordinator Report",
         category: "Daily Volcanic Activity",
         description: "Generated Report",
-        component: lazy(() => import('../components/Widgets/CommCoorReport.jsx')),
+        component: lazy(() => import('../components/widgets/CommCoorReport.jsx')),
-        settingsComponent: lazy(() => import('../components/Widgets/settings/CommCoorReportSettings.jsx')),
+        settingsComponent: lazy(() => import('../components/widgets/settings/CommCoorReportSettings.jsx')),
         defaultSettings: {
             copyToClipboard: false,
             downloadReport: false,
@@ -188,8 +188,8 @@ export const WIDGET_REGISTRY = {
         name: "VAA Polygon Projections Map",
         category: "Maps",
         description: "By selecting a volcano, the map will take you to it and show a polygon of the ash in 8, 12, and 18 hours",
-        component: lazy(() => import('../components/Widgets/VaaMap.jsx')),
+        component: lazy(() => import('../components/widgets/VaaMap.jsx')),
-        settingsComponent: lazy(() => import('../components/Widgets/settings/VaaMapSettings.jsx')),
+        settingsComponent: lazy(() => import('../components/widgets/settings/VaaMapSettings.jsx')),
         defaultSettings: {
             position: [45.61142, -122.49630], // CVO's coordinates
             startDate: getToday(),
@@ -209,7 +209,7 @@ export const WIDGET_REGISTRY = {
         name: "Travel Gantt Chart",
         category: "Communications",
         description: "View upcoming travels in a gantt chart",
-        component: lazy(() => import('../components/Widgets/TravelGanttChart.jsx')),
+        component: lazy(() => import('../components/widgets/TravelGanttChart.jsx')),
         allowedSizes: {
             medium: { w: 6, h: 12 }
         }

client/src/css/index.css

@@ -1,5 +1,6 @@
 :root {
-  font-family: Georgia, 'Times New Roman', Times, serif;
+  /*font-family: Georgia, 'Times New Roman', Times, serif;*/
+  font-family: "Roboto", sans-serif;
 }
 
 .wx-theme {

client/src/pages/auth/Settings.jsx

@@ -0,0 +1,131 @@
+import { Flex, Text, Input, Field, Button, Separator, NativeSelect, Image } from '@chakra-ui/react';
+import useAuthStore from "../../store/authStore.js";
+import { useForm } from "react-hook-form";
+import { useState } from "react";
+
+export default function Settings() {
+  const { user } = useAuthStore();
+  const { register, handleSubmit, errors } = useForm();
+  const [value, setValue] = useState(undefined);
+  const updateProfile = useAuthStore((state) => state.updateProfile);
+
+  const onSubmit = (data, event) => {
+    // TODO: check for identical usernames
+    event.preventDefault();
+    console.log(data);
+    if (data.username && data.username.length !== "") updateProfile(data);
+  }
+
+  const ivansRequest = () => {
+    console.log(user.username, "requested ivans permissions");
+    // TODO: log users request in database here which will then display request in web-admin page
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Flex direction="column" w="100%" h="100%" p="15rem" pt="3rem" gap="5rem">
+
+        {/* CONTENT */}
+        <Flex direction="column" w="100%" h="100%" gap={4}>
+          {/* header */}
+          <Text fontWeight="semibold" fontSize="xl">Settings</Text>
+
+          <Separator borderColor="gray.300"/>
+
+          {/* personal info */}
+          <Flex direction="column" w="100%" gap={4}>
+            <Text fontWeight="semibold" fontSize="lg">Personal Information</Text>
+            {/* profile picture & name */}
+            <Flex direction="row" w="100%" align="center" justify="space-between" gap={5}>
+              <Flex direction="row" w="100%" align="center" gap={5}>
+                <Image borderRadius="full" boxSize="100px" src="https://i.pravatar.cc/300?img=10" />
+                <Flex direction="column">
+                  <Text fontWeight="semibold">Name</Text>
+                  <Text pl={2}>{user.firstName || "first name"}, {user.lastName || "last name"}</Text>
+                </Flex>
+              </Flex>
+              <Button variant="subtle" size="sm">Update photo</Button>
+            </Flex>
+
+            <Flex direction="row" w="100%" gap={5}>
+              <Field.Root>
+                <Field.Label fontWeight="semibold">Username</Field.Label>
+                <Input {...register("username")} placeholder={user.username} variant="subtle" />
+              </Field.Root>
+
+              <Field.Root>
+                <Field.Label fontWeight="semibold">Email</Field.Label>
+                <Input {...register("email")} type="email" placeholder={user.email || "example@usgs.gov"} variant="subtle" />
+              </Field.Root>
+            </Flex>
+
+            <Flex direction="row" w="100%" gap={5}>
+              <Field.Root pb={8}>
+                <Field.Label fontWeight="semibold">Descipline</Field.Label>
+                <NativeSelect.Root size="sm" variant="subtle">
+                  <NativeSelect.Field
+                    w="100%"
+                    h="2.5rem"
+                    placeholder="Select option"
+                    {...register("discipline")}
+                  >
+                    <option value="RS">Remote Sensing</option>
+                    <option value="CS">Computer Science</option>
+                    <option value="Engineering">Engineering</option>
+                    <option value="HR">Human Resources (HR)</option>
+                  </NativeSelect.Field>
+                  <NativeSelect.Indicator />
+                </NativeSelect.Root>
+                <Field.ErrorText></Field.ErrorText>
+              </Field.Root>
+              <Flex w="100%"></Flex> {/* filler so that discipline dropdown sizes correctly */}
+            </Flex>
+          </Flex>
+
+          <Separator borderColor="gray.300"/>
+
+          {/* permission requests */}
+          <Flex direction="column" gap={2}>
+            <Text fontWeight="semibold" fontSize="lg">Permissions</Text>
+            <Flex direction="row" w="100%" align="center" justify="space-between" pl={2}>
+              <Text>Request access to IVANS</Text>
+              <Button variant="subtle" size="sm" onClick={ivansRequest}>IVANS Request</Button>
+            </Flex>
+            <Flex direction="row" w="100%" align="center" justify="space-between" pl={2}>
+              <Text>Request access to Remote Sensing</Text>
+              <Button variant="subtle" size="sm" onClick={ivansRequest}>Remote Sensing Request</Button>
+            </Flex>
+          </Flex>
+
+          <Separator borderColor="gray.300" />
+
+          {/* themes */}
+          <Flex direction="column">
+            <Text fontWeight="semibold" fontSize="lg">Theme</Text>
+            <Flex direction="row" align="center" justify="space-between" pl={2}>
+              <Text fontSize="md">Appearance</Text>
+              <NativeSelect.Root size="sm" w="10rem" variant="subtle">
+                <NativeSelect.Field
+                  placeholder="Select option"
+                  {...register("theme")}
+                  value={value}
+                  onChange={(e) => setValue(e.currentTarget.value)}
+                >
+                  <option value="Light">Light</option>
+                  <option value="Dark">Dark</option>
+                </NativeSelect.Field>
+                <NativeSelect.Indicator />
+              </NativeSelect.Root>
+            </Flex>
+          </Flex>
+        </Flex>
+
+        {/* SAVE-ALL PREFERENCES BUTTON */}
+        {/* TODO: grey out button until changes are detected */}
+        <Button type="submit" w="150px" variant="subtle" borderRadius="lg" alignSelf="center">
+          Save Changes
+        </Button>
+      </Flex>
+    </form>
+  );
+}

client/src/pages/auth/WebAdmin.jsx

@@ -0,0 +1,234 @@
+import {Flex, Separator, Text, Table, IconButton, NativeSelect, Button} from "@chakra-ui/react";
+import { useMemo } from "react";
+import { useForm, useFieldArray } from "react-hook-form";
+import { Check, X, PenLine } from 'lucide-react';
+import VdapApi from "../../hooks/useVdapApi.js";
+import useBuildUrl from "../../hooks/useBuildUrl.js";
+
+export default function WebAdmin() {
+  // TODO: add below api endpoint
+  // const {data: users, isLoading, error} = VdapApi('/api/v2/vdap_web_users');
+
+  const users = useMemo(() => [
+    {
+      "username": "vkuchenik",
+      "firstName": "Venessa",
+      "lastName": "Kuchenik",
+      "permissions": {
+        "ivans": 2, // 2 => requested permission
+        "rs": 0,    // 0 => no permissions and not requested
+      },
+      "team": "Computer Science",
+      "group": "Super User",
+    },
+    {
+      "username": "amack",
+      "firstName": "Adeiline",
+      "lastName": "Mack",
+      "permissions": {
+        "ivans": 2, // 0 => no permissions and not requested
+        "rs": 2,    // 1 => has permission
+      },
+      "team": "Remote Sensing",
+      "group": "Member",
+    }
+  ], []);
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    errors,
+    formState: { isDirty }
+  } = useForm({
+    defaultValues: {users: users}
+  });
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "users" // Matches the key in defaultValues
+  })
+
+  const grant = (user, category) => {
+    // 1. post data via api
+    // 2. fetch the new data via api again to force re-render
+    console.log(user.username, "was granted", category, "permission");
+  }
+
+  const deny = (user, category) => {
+    console.log(user.username, "was denied", category, "permission");
+  }
+
+  const users_req_ivans = useMemo(() => {
+    return users.filter(user => user.permissions.ivans === 2);
+  }, [users]);
+
+  const users_req_rs = useMemo(() => {
+    return users.filter(user => user.permissions.rs === 2);
+  }, [users]);
+
+  const onSubmit = (data, event) => {
+    event.preventDefault();
+    console.log(data);
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Flex direction="column" w="100%" h="100%" p="15rem" pt="3rem" gap="3rem">
+
+        {/* CONTENT */}
+        <Flex direction="column" w="100%" gap={4}>
+          {/* Header */}
+          <Text fontSize="xl" fontWeight="bold">Web Admin Panel</Text>
+
+          <Separator borderColor="gray.300"/>
+
+          {/* Permission Requests */}
+          <Flex direction="column" w="100%" gap={2} pb={4}>
+            <Text fontSize="lg" fontWeight="bold">Incoming Permission Requests</Text>
+            <Flex direction="row" w="100%" gap={5}>
+              {/* ivans requests table */}
+              <Flex direction="column" w="100%" gap={2}>
+                <Text fontSize="sm" fontWeight="bold">IVANS</Text>
+                <Table.Root w="100%" size="sm" variant="outline" borderRadius="lg">
+                  <Table.Header>
+                    <Table.Row>
+                      <Table.ColumnHeader w="100%" fontWeight="bold">User</Table.ColumnHeader>
+                      <Table.ColumnHeader fontWeight="bold" textAlign="left">Permission</Table.ColumnHeader>
+                    </Table.Row>
+                  </Table.Header>
+                  <Table.Body>
+                    {users_req_ivans.map((user) => (
+                      <Table.Row key={user.username}>
+                        <Table.Cell w="100%">{user.lastName}, {user.firstName}</Table.Cell>
+                        <Table.Cell >
+                          <Flex w="100%" gap={1} justify="left">
+                            <IconButton borderRadius="xl" size="xs" variant="subtle" onClick={() => grant(user, "ivans")}>
+                              <Check />
+                            </IconButton>
+                            <IconButton borderRadius="xl" size="xs" variant="subtle" onClick={() => deny(user, "ivans")}>
+                              <X />
+                            </IconButton>
+                          </Flex>
+                        </Table.Cell>
+                      </Table.Row>
+                    ))}
+                  </Table.Body>
+                </Table.Root>
+              </Flex>
+              {/* rs requests table */}
+              <Flex direction="column" w="100%" gap={2}>
+                <Text fontSize="sm" fontWeight="bold">Remote Sensing</Text>
+                <Table.Root w="100%" size="sm" variant="outline" borderRadius="lg">
+                  <Table.Header>
+                    <Table.Row>
+                      <Table.ColumnHeader w="100%" fontWeight="bold">User</Table.ColumnHeader>
+                      <Table.ColumnHeader fontWeight="bold" textAlign="left">Permission</Table.ColumnHeader>
+                    </Table.Row>
+                  </Table.Header>
+                  <Table.Body>
+                    {users_req_rs.map((user) => (
+                      <Table.Row key={user.username}>
+                        <Table.Cell>{user.lastName}, {user.firstName}</Table.Cell>
+                        <Table.Cell>
+                          <Flex w="100%" gap={1} justify="left">
+                            <IconButton borderRadius="xl" size="xs" variant="subtle" onClick={() => grant(user, "rs")}>
+                              <Check />
+                            </IconButton>
+                            <IconButton borderRadius="xl" size="xs" variant="subtle" onClick={() => deny(user, "rs")}>
+                              <X />
+                            </IconButton>
+                          </Flex>
+                        </Table.Cell>
+                      </Table.Row>
+                    ))}
+                  </Table.Body>
+                </Table.Root>
+              </Flex>
+            </Flex>
+          </Flex>
+
+          <Separator borderColor="gray.300"/>
+
+          {/* Group Assignment */}
+          <Flex direction="column" w="100%" gap={2} pb={4}>
+            <Text fontWeight="bold" fontSize="lg">Groups</Text>
+            <Table.Root w="50%" size="sm" variant="outline" borderRadius="lg">
+              <Table.Header>
+                <Table.Row>
+                  <Table.ColumnHeader fontWeight="bold">User</Table.ColumnHeader>
+                  <Table.ColumnHeader fontWeight="bold" textAlign="left">Group</Table.ColumnHeader>
+                </Table.Row>
+              </Table.Header>
+              <Table.Body>
+                {users.map((user, index) => (
+                  <Table.Row key={user.username}>
+                    <Table.Cell w="100%">{user.lastName}, {user.firstName}</Table.Cell>
+                    <Table.Cell>
+                      <Flex w="100%" justify="left">
+                        <NativeSelect.Root size="sm" w="175px" variant="subtle">
+                          <NativeSelect.Field
+                            defaultValue={user.group}
+                            {...register(`users.${index}.group`)}
+                          >
+                            <option value="Super User">Super User</option>
+                            <option value="Member">Member</option>
+                          </NativeSelect.Field>
+                          <NativeSelect.Indicator />
+                        </NativeSelect.Root>
+                      </Flex>
+                    </Table.Cell>
+                  </Table.Row>
+                ))}
+              </Table.Body>
+            </Table.Root>
+          </Flex>
+
+          <Separator borderColor="gray.300"/>
+
+          {/* Team Assignment */}
+          <Flex direction="column" w="100%" gap={2} pb={4}>
+            <Text fontWeight="bold" fontSize="lg">Teams</Text>
+            <Table.Root w="50%" size="sm" variant="outline" borderRadius="lg">
+              <Table.Header>
+                <Table.Row>
+                  <Table.ColumnHeader fontWeight="bold" w="100%">User</Table.ColumnHeader>
+                  <Table.ColumnHeader fontWeight="bold" textAlign="left">Team</Table.ColumnHeader>
+                </Table.Row>
+              </Table.Header>
+              <Table.Body>
+                {users.map((user, index) => {
+                  console.log("user in team: ", user.team);
+                  return(
+                  <Table.Row key={user.username}>
+                    <Table.Cell>
+                      {user.lastName}, {user.firstName}
+                    </Table.Cell>
+                    <Table.Cell>
+                      <Flex w="100%" justify="right">
+                        <NativeSelect.Root size="sm" w="175px" variant="subtle">
+                          <NativeSelect.Field
+                            defaultValue={user.team}
+                            {...register(`users.${index}.team`)}
+                          >
+                            <option value="Computer Science">Computer Science</option>
+                            <option value="Remote Sensing">Remote Sensing</option>
+                          </NativeSelect.Field>
+                          <NativeSelect.Indicator />
+                        </NativeSelect.Root>
+                      </Flex>
+                    </Table.Cell>
+                  </Table.Row>
+                )})}
+              </Table.Body>
+            </Table.Root>
+          </Flex>
+        </Flex>
+
+        <Button type="submit" w="100px" variant="subtle" alignSelf="center">
+          Save
+        </Button>
+      </Flex>
+    </form>
+  )
+}

client/src/pages/home/Home.jsx

@@ -1,61 +1,58 @@
-import { HStack, Flex, Box } from "@chakra-ui/react";
+import {HStack, Flex, Box, useRecipe, useSlotRecipe} from "@chakra-ui/react";
 import {NavLink, Outlet, useLocation} from "react-router-dom";
 import {SearchBar} from "../../components/dashboard/SearchBar.jsx";
 import {SettingsButton} from "../../components/dashboard/SettingsButton.jsx";
 
+// 1. Import your icons (Swap these for whichever you prefer!)
+import {LayoutDashboard, CalendarDays, Cloud, Satellite, Activity} from "lucide-react";
+
+// 2. Define the tabs array
+const HOME_TABS = [
+  {name: "My Dashboard", url: "/home", icon: LayoutDashboard, exact: true},
+  {name: "Daily Activity", url: "/home/daily", icon: CalendarDays},
+  {name: "Gas", url: "/home/gas", icon: Cloud},
+  {name: "Remote Sensing", url: "/home/remote", icon: Satellite},
+  {name: "Seismic", url: "/home/seismic", icon: Activity},
+];
+
 export default function Home() {
+  const glassTabsRecipe = useRecipe({key: "glassTab"});
+  const homeRecipe = useSlotRecipe({key: "home"});
+  const glassTabsStyle = glassTabsRecipe();
+  const homeStyle = homeRecipe();
+
   const location= useLocation();
   const isPersonalDashboard= location.pathname === "/home" || location.pathname === "/home/";
 
-  // 1. CSS making this look like how we want it, TODO turn to theme?
-  const tabStyles = {
-    fontSize: "lg",
-    fontWeight: "bold",
-    color: "fg.muted",
-    px: 2,                   // Horizontal padding
-    // py: 2,                   // Vertical padding
-    borderBottom: "1px solid transparent",
-    transition: "all 0.2s",
-    _hover: { color: "fg" },
-
-    "&.active": {         // Target the active class applied by React Router NavLink
-      color: "fg",
-      borderColor: "fg",
-    }
-  };
-
   return (
-      <Flex direction="column" height="100%" width="100%">
+    <Flex css={homeStyle.root}>
+      <Flex as="header" css={homeStyle.header}>
+        {/* TABS CONTAINER */}
+        <Flex>
+          {HOME_TABS.map((tab) => {
+            const Icon = tab.icon;
+            return (
+              <Box key={tab.name} as={NavLink} to={tab.url} end={tab.exact} css={glassTabsStyle}> {/* CRITICAL: 'end' prop forces exact match so "/home" deactivates on sub-routes*/}
+                {/* flexShrink: 0 ensures the icon never squishes during the gooey animation */}
+                <Icon size={24} style={{flexShrink: 0}}/>
+                <Box as="span">{tab.name}</Box>
+              </Box>
+            );
+          })}
 
-        {/* 2. 🛠️ SUB HEADER: Matches your original padding and background */}
+          {/* The Settings button is now inline with the tabs and only renders on the personal dashboard */}
-        <Flex as="header" position="sticky" top="0" zIndex="dropdown" bg="base200" p={5} align="center" justify="space-between" width="100%">
+          {isPersonalDashboard && <SettingsButton/>}
-
-          {/* TABS CONTAINER - Replicates the Tabs.List line container */}
-          <Flex borderBottom="1px solid" borderColor="fg.muted" gap={2}>
-            <Box as={NavLink} to="/home" end css={tabStyles}>My Dashboard</Box>
-            <Box as={NavLink} to="/home/daily" css={tabStyles}>Daily Activity</Box>
-            <Box as={NavLink} to="/home/gas" css={tabStyles}>Gas</Box>
-            <Box as={NavLink} to="/home/remote" css={tabStyles}>Remote Sensing</Box>
-            <Box as={NavLink} to="/home/seismic" css={tabStyles}>Seismic</Box>
         </Flex>
 
         {/* EDIT MODE BUTTONS & CONTROLS */}
+        {/* Leaving this HStack here in case you plan to put the SearchBar or other global tools back on the right side */}
         <HStack width="258px" justifyContent="flex-end">
-            {isPersonalDashboard ? (
+          {/* Future global controls go here */}
-                <>
-                  <SearchBar placeholder="Enter a volcano to search" size="sm" width="210px" />
-                  {/* This will eventually trigger your Zustand store's edit mode! */}
-                  <SettingsButton />
-                </>
-            ) : (
-                <SearchBar placeholder="Enter a volcano to search" size="sm" width="210px" />
-            )}
         </HStack>
-
       </Flex>
 
-        {/* 3. 🛠️ CANVAS AREA */}
+      {/* TABS CONTENT */}
-        <Flex flex="1" overflow="auto">
+      <Flex css={homeStyle.body}>
         <Outlet/>
       </Flex>
 

client/src/pages/home/tabs/MyDashboard.jsx

@@ -1,9 +1,9 @@
-import {Box, Text, Flex, IconButton, Spinner, Popover} from "@chakra-ui/react";
+import {Box, Text, Flex, IconButton, Spinner, Popover, useSlotRecipe} from "@chakra-ui/react";
 import {X, MoreVertical} from "lucide-react";
 import {Responsive, WidthProvider} from "react-grid-layout";
 import {useDashboardStore} from "@/store/useDashboardStore.jsx";
 import {Suspense, useEffect, useRef} from 'react';
-import {useColorModeValue} from "@/components/ui/color-mode";
+
 // 1. Import database messenger
 import useAuthStore from "@/store/authStore";
 
@@ -13,13 +13,8 @@ import {WIDGET_REGISTRY} from '@/constants/widgetRegistry.jsx';
 // React-Grid-Layout requires this wrapper to automatically calculate screen width
 const ResponsiveGridLayout = WidthProvider(Responsive);
 
-export default function MyDashboard() {
-  // 🌗 Let's adjust for our light and dark mode
-  const frameBg = useColorModeValue("gray.100", "gray.800");
-  const titleColor = useColorModeValue("gray.800", "gray.100");
-  const iconColor = useColorModeValue("gray.600", "gray.400");
-  const iconHoverBg = useColorModeValue("gray.100", "gray.700");
 
+export default function MyDashboard() {
   // ☁️ Database Connection
   const {user} = useAuthStore();
 
@@ -33,24 +28,23 @@ export default function MyDashboard() {
   // 🔒 Safety lock to prevent infinite re-renders
   const hasHydrated = useRef(false);
 
-  // ==========================================
+  // 1. Pull the global slot recipes
-  // INITIAL LOAD: Grab data from Django
+  const recipe = useSlotRecipe({key: "glassPanel"});
-  // ==========================================
+  const styles = recipe({ layout: "widget" });
+  const popoverStyles = recipe({ layout: "popover" });
+
+  // 2. Populate widgets
   useEffect(() => {
     if (user?.preferences?.dashboard_layout && !hasHydrated.current) {
       const savedLayout = user.preferences.dashboard_layout;
 
       // Safety check: Only inject if it's actually an array of widgets.
       // (Prevents a crash if MariaDB returns a default empty object {})
-      if (Array.isArray(savedLayout)) {
+      if (Array.isArray(savedLayout)) setWidgets(savedLayout);
-        setWidgets(savedLayout);
-      }
-
       hasHydrated.current = true;
     }
   }, [user, setWidgets]);
 
-
   // 🛠️ Format the data for RGL
   const rglLayout = widgets.map(w => ({
     i: w.id,
@@ -58,10 +52,10 @@ export default function MyDashboard() {
     y: w.y,
     w: w.w,
     h: w.h,
-    isResizable: false // 🚫 The magic lock! No resizing allowed globally.
+    isResizable: false // The magic lock! No resizing allowed globally.
   }));
 
-  // 3. THE COMPONENT MAPPER
+  // 3. The component mapper
   const renderWidget = (widget) => {
     const registryEntry = WIDGET_REGISTRY[widget.type];
 
@@ -72,38 +66,24 @@ export default function MyDashboard() {
       const SettingsUI = registryEntry.settingsComponent;
 
       return (
-        // The "Frame" that holds both the Title and the Chart
+        <>
-        <Flex direction="column" height="100%" width="100%" bg={frameBg}>
+          <Box css={styles.header}>
-
+            <Text>
-          {/* THE TITLE BAR */}
-          <Flex
-            justify="space-between"
-            align="center"
-            px={3}
-            py={2}
-          >
-            <Text color={titleColor} fontWeight="semibold" fontSize="md" isTruncated>
               {registryEntry.name}
             </Text>
 
-            {/* THE SETTINGS ELLIPSIS */}
+            {/* WIDGET SETTINGS BUTTON (ELLIPSES) */}
-            {SettingsUI ? (
+            {SettingsUI && (
               <Popover.Root positioning={{placement: "bottom-end"}}>
                 <Popover.Trigger asChild>
-                  <IconButton
+                  <IconButton size="xs" variant="ghost" aria-label="Widget Settings">
-                    size="xs"
-                    variant="ghost"
-                    color="gray.400"
-                    _hover={{color: "white", bg: "gray.700"}}
-                    aria-label="Widget Settings"
-                  >
                     <MoreVertical size={16}/>
                   </IconButton>
                 </Popover.Trigger>
 
                 {/* NEW: The Positioner lifts the content out of the Flexbox flow */}
-                <Popover.Positioner zIndex={10}>
+                <Popover.Positioner zIndex={1}>
-                  <Popover.Content bg="gray.50" p={4} boxShadow="xl" borderRadius="md">
+                  <Popover.Content css={popoverStyles.root}>
                     <Suspense fallback={<Spinner size="sm"/>}>
                       <SettingsUI
                         widgetId={widget.id}
@@ -113,25 +93,19 @@ export default function MyDashboard() {
                   </Popover.Content>
                 </Popover.Positioner>
               </Popover.Root>
-            ) : (
-              <Box w="20px" h="20px"/>
             )}
-          </Flex>
-
-          {/* THE CHART CANVAS */}
-          <Box flex="1" overflow="hidden" position="relative" p={1}>
-            {/* Pass the settings object into the actual chart component */}
-            {/* Pass widget ID to allow updating settings in widget component rather than just in settings component */}
-            <Component settings={widget.settings || {}} widgetID={widget.id || {}}/>
           </Box>
 
-        </Flex>
+          <Box css={styles.body}>
+            <Component settings={widget.settings || {}} widgetID={widget.id || {}}/>
+          </Box>
+        </>
       );
     }
 
     // Fallback if someone asks for a widget that doesn't exist
     return (
-      <Flex width="100%" height="100%" align="center" justify="center" direction="column" bg="gray.800">
+      <Flex css={styles.body} align="center" justify="center" direction="column">
         <Text fontWeight="bold" color="red.400">Error</Text>
         <Text fontSize="sm" color="gray.400">Widget '{widget.type}' not found.</Text>
       </Flex>
@@ -148,36 +122,37 @@ export default function MyDashboard() {
         rowHeight={30}
         isDraggable={isEditing}     // Only allows dragging when Settings tools toggle this
         isResizable={false}         // Double lock-down
-        onLayoutChange={(newLayout) => updateLayoutPositions(newLayout)} // Fires when user drops a widget
         compactType="vertical"      // Auto-packs widgets to the top
+        onLayoutChange={(newLayout) => updateLayoutPositions(newLayout)} // Fires when user drops a widget
       >
-        {/* 3. 🎨 Paint the Widgets */}
+        {/* 🎨 Paint the Widgets */}
         {widgets.map(widget => (
           <Box
             key={widget.id}
-            bg="white"
+            css={styles.root}
-            borderRadius="md"
+            // Grid-specific state overrides remain inline
-            boxShadow={isEditing ? "outline" : "sm"} // Visual cue when editing
+            boxShadow={isEditing ? "outline" : styles.root.boxShadow}
-            border={isEditing ? "2px dashed gray" : "1px solid"}
+            borderStyle={isEditing ? "dashed" : "solid"}
-            borderColor={isEditing ? "gray.400" : "gray.200"}
+            borderWidth={isEditing ? "2px" : "1px"}
-            overflow="hidden"
+            borderColor={isEditing ? "orange.300" : styles.root.borderColor}
             cursor={isEditing ? "grab" : "default"}
-            position="relative" // 3. REQUIRED so the absolute button stays inside this box
+            position="relative" // REQUIRED so the absolute button stays inside this box
           >
-            {/* 4. THE DELETE BUTTON */}
+            {/* THE DELETE BUTTON */}
             {isEditing && (
               <IconButton
-                aria-label="Remove widget"
                 position="absolute"
                 top={2}
                 right={2}
-                size="xs"
                 bg="white"
-                color={iconColor}
+                color="black"
                 border="1px solid"
+                borderRadius="xl"
                 borderColor="gray.200"
                 _hover={{bg: "red.50", color: "red.500", borderColor: "red.200"}}
                 zIndex={2}
+                aria-label="Remove widget"
+                size="xs"
                 onClick={() => removeWidget(widget.id)}
                 onMouseDown={(e) => e.stopPropagation()} // 🚫 Stops RGL from grabbing the widget
                 onTouchStart={(e) => e.stopPropagation()} // 🚫 Same protection for mobile touches
@@ -186,15 +161,14 @@ export default function MyDashboard() {
               </IconButton>
             )}
 
-            {/* 4. SUSPENSE BOUNDARY wrapping the render function */}
+            {/* SUSPENSE BOUNDARY wrapping the render function */}
             <Suspense fallback={
-              <Flex w="100%" h="100%" align="center" justify="center" bg="gray.800">
+              <Flex css={styles.body} align="center" justify="center">
                 <Spinner size="md" color="blue.400" thickness="3px"/>
               </Flex>
             }>
               {renderWidget(widget)}
             </Suspense>
-
           </Box>
         ))}
       </ResponsiveGridLayout>

client/src/store/authStore.js

@@ -46,6 +46,11 @@ const useAuthStore = create((set) => ({
             // Hit the new lightweight endpoint
             const res = await api.get('session/');
 
+            // 🔨 Security Fix a broken API call, Verify we actually got a user object back, not HTML fallback text
+            if (typeof res.data === 'string' || !res.data.username) {
+                throw new Error("Received invalid data format instead of user session");
+            }
+
             // Rehydrate the store with the user's info!
             set({
                 isAuthenticated: true,
@@ -86,7 +91,22 @@ const useAuthStore = create((set) => ({
         } catch (error) {
             console.error("Failed to save layout to database", error);
         }
-    }
+    },
+
+    // updateProfile: async (newProfile) => {
+    //     try {
+    //         set((state) => ({
+    //             user: {
+    //                 ...state.user,
+    //                 username: newProfile.username,
+    //             }
+    //         }));
+    //
+    //         await api.post('profile/update/', { profile: newProfile });
+    //     } catch (error) {
+    //         console.error("Failed to update profile", error);
+    //     }
+    // }
 }));
 
 export default useAuthStore;

client/src/theme.js

@@ -1,98 +1,670 @@
 import {defineSlotRecipe, createSystem, defaultConfig, defineConfig, defineRecipe} from "@chakra-ui/react";
 
-// RECIPES
+// CONSOLIDATED ✔
-const headerRecipe = defineRecipe({
+const headerRecipe = defineSlotRecipe({
+  slots: ["root", "search_bar", "user_info"],
   base: {
-    bg: "{base200}",
+    root: {
+      bg: "{transparent}",
       color: "text",
       width: "100%",
       height: "100%",
-    borderBottom: "1px solid",
-    borderBottomColor:"{border}",
       display: "flex",
       flexDirection: "row",
       justifyContent: "space-between",
       alignItems: "center",
+      pl: 3,
+    },
+    search_bar: {
+      width: "100%",
+      // input element in search bar component
+      "& input": {
+        width: "410px",
       }
+    },
+    user_info: {
+      flexDirection: "row",
+      justifyContent: "flex-end",
+      alignItems: "center",
+      gap: 3,
+      pr: 6,
+
+      // The Text component
+      "& p": {
+        fontWeight: "600",
+        fontSize: "md"     // equivalent to 16px
+      }
+    }
+  },
 });
 
-const dashboardRecipe = defineRecipe({
+// CONSOLIDATED ✔
-  base: {
-    bg: "{base200}"
-  }
-});
-
-const canvasRecipe = defineRecipe({
-  base: {
-    bg: "{base200}",
-    zIndex: "-1",
-    color: "{text}"
-  }
-});
-
 const sidebarRecipe = defineSlotRecipe({
-  slots: ["root", "close_button", "buttons", "dark_mode_button"],
+  slots: ["root", "logo", "logo_text", "footer", "button_text", "buttons", "collapse_button", "color_mode_button"],
   base: {
     root: {
-      bg: "{base200}",
+      // 1. Semi-transparent backgrounds
-      borderRight: "1px solid",
+      bg: {
-      borderColor: "{border}", 
+        // base: "linear-gradient(to bottom right, #99000040 20%, #FF660040 60%, #EEEE0040 100%)", // this is too pale for light mode imo
+        base: "linear-gradient(to bottom right, #97282880 20%, #EB7F3160 60%, #FCAD3840 100%)",    // colors from: https://colorhunt.co/palette/972828e45742eb7f31fcad38
+        _dark: "linear-gradient(to bottom right, #9900003C 20%, #FF66003C 60%, #FFC0003C 100%)"
+      },
+
+      // 2. The glass blur effect
+      backdropFilter: "blur(12px)",
+      WebkitBackdropFilter: "blur(12px)",
+
+      // 3. Subtle semi-transparent borders
+      border: "1px solid",
+      borderColor: {base: "rgba(255, 255, 255, 0.8)", _dark: "rgba(255, 255, 255, 0.1)"},
+
+      // CRITICAL: Remove the right border so it doesn't draw a line through your cutout
+      borderRight: "none",
+
+      borderRadius: "2xl",
+      // boxShadow: "0 4px 30px rgba(0, 0, 0, 0.1)",
+      // boxShadow: "-10px 4px 30px rgba(0, 0, 0, 0.1)",
       width: "100%",
-      height: "100%",
+      height: "calc(100% - 16px)",
+      margin: "8px",
       display: "flex",
       flexDirection: "column",
+      position: "relative",
       justifyContent: "start",
-      alignItems: "start",
+      alignItems: "stretch",
-      gap: 2,
+      gap: 4,
-      p: 2,
+      transition: "width 0.5s ease",
+
+      // CRITICAL: Adjust padding and overflow to allow the button to touch the right edge
+      pl: 2, // Keep left padding
+      py: 2, // Keep top/bottom padding
+      pr: 0, // Remove right padding
+      pt: 4, // Added top padding to give the logo room to breathe
+      overflow: "visible", // Allows the curved corner patches to render outside the button
+      zIndex: 10,
     },
     buttons: {
+      position: "relative", // Required to anchor the corner patches
       bg: "transparent",
-      _hover: {bg: "{primaryLt}", color: "{textInverted}"},
+
-      "&.active": {bg: "{primary}", color: "{textInverted}"},
+      justifyContent: "flex-start",
-      fontSize: "xl",
+      transition: "background-color 0.3s ease, color 0.3s ease",
+
+      "& svg": {
+        transition: "stroke-width 0.4s ease",
+        flexShrink: "0"
+      },
+
+      _hover: {
+        bg: "rgba(255, 255, 255, 0.2)",
+        color: "{text}",
+        "& svg": {
+          strokeWidth: "3"
+        },
+        "& span": {
+          fontWeight: "700",
+        }
+      },
+
+      fontSize: "l",
       color: {base: "{text}"},
       variant: "ghost",
       width: "100%",
+
+      // Flat on the right, rounded on the left
+      borderRightRadius: "0",
+      borderLeftRadius: "4xl",
+
+      "&.active": {
+        bg: "{MainBackground}",
+        color: "{textInverted}",
+
+        _hover: {
+          bg: "{MainBackground}",
+          color: "{textInverted}",
+          "& svg": {
+            strokeWidth: "2" // Keeps the active icon at normal thickness on hover
           },
+          "& span": {
+            fontWeight: "500",
+          }
+        },
+
+        // The Top Inverted Curve
+        _before: {
+          content: '""',
+          position: "absolute",
+          right: "-1px",
+          top: "-25px",
+          width: "25px",
+          height: "25px",
+          bg: "inherit",
+          WebkitMaskImage: "radial-gradient(circle at top left, transparent 25px, black 25.5px)",
+          maskImage: "radial-gradient(circle at top left, transparent 25px, black 25.5px)",
+          pointerEvents: "none",
+        },
+
+        // The Bottom Inverted Curve
+        _after: {
+          content: '""',
+          position: "absolute",
+          right: "-1px",
+          bottom: "-25px",
+          width: "25px",
+          height: "25px",
+          bg: "inherit",
+          WebkitMaskImage: "radial-gradient(circle at bottom left, transparent 25px, black 25.5px)",
+          maskImage: "radial-gradient(circle at bottom left, transparent 25px, black 25.5px)",
+          pointerEvents: "none",
+        }
+      },
+    },
+    logo: {
+      width: "100%",
+      justifyContent: "flex-start",
+      ml: 2,
+      textStyle: "4xl",
+      fontWeight: "bold",
+      overflow: "hidden",
+      px: 0,
+    },
+    logo_text: {
+      transition: "opacity 0.2s ease, visibility 0.2s ease, margin 0.2s ease",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "clip",
+    },
+    footer: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      width: "100%",
+      mt: "auto",
+      pl: 2,
+      pr: 2,
+    },
+    button_text: {
+      transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "clip",
+      fontWeight: "500",
+    },
+    collapse_button: {
+      "& svg": {flexShrink: "0"},
+    },
+    color_mode_button: {
+      "& button": {
+        _hover: {
+          bg: "transparent",
+        },
+      }
+    }
+    // opened_theme_button: {
+    //   width: "100%",
+    //   align: "center",
+    //   justifyContent: "right",
+    //   mr: 6,
+    //   // "& button": {
+    //   //   alignSelf: "center",
+    //   //   transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
+    //   //   _hover: {
+    //   //     bg: "transparent",
+    //   //   }
+    //   // }
+    // },
+    // closed_theme_button: {
+    //   // ml: 0.9,
+    //   // "& button": {
+    //   //   transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
+    //   //   _hover: {
+    //   //     bg: "transparent",
+    //   //   }
+    //   // }
+    // },
+  },
+  variants: {
+    state: {
+      open: {
+        root: {width: "190px"},
+        button_text: {ml: 3, opacity: 1, visibility: "visible"},
+        logo_text: {ml: 3, opacity: 1, visibility: "visible", transition: "opacity 0.5s ease, visibility 0.5s ease, margin 0.5s ease"},
+        color_mode_button: {
+          "& button": {
+            position: "static",
+          },
+          // the css below is equivalent to chakra's 'truncate' prop
+          // it makes sure the icon doesn't jump out of the bounds of the sidebar while it's transitioning from closed to open
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "clip",
+        },
+      },
+      closed: {
+        root: {width: "71px"},
+        button_text: {opacity: 0, visibility: "hidden"},
+        logo_text: {opacity: 0, visibility: "hidden", transition: "opacity 0.2s ease, visibility 0.2s ease, margin 0.2s ease"},
+        color_mode_button: {"& button": {position: "relative", bottom: "35px", right: "37px",}
+        },
+      }
+    }
   }
 });
 
-const widgetRecipe = defineSlotRecipe({
+// CONSOLIDATED ✔
-  slots: ["root", "header", "canvas"],
+const dashboardRecipe = defineRecipe({
+  base: {
+    height: "100vh",
+    width: "100vw",
+    bg: "{MainBackground}",
+
+    // selects the third div in the grid layout (the canvas)
+    "& > div:nth-of-type(3)": {
+      width: "100%",
+      overflow: "auto",
+    }
+  }
+});
+
+// CONSOLIDATED ✔
+const homeRecipe = defineSlotRecipe({
+  slots: ["root", "header", "body"],
   base: {
     root: {
       flexDirection: "column",
-      gap: "1",
-      position: "relative",
-      bg: "base100",
-      borderRadius: "md",
-      p: "1",
-      paddingBottom: "2",
-      border: "1px solid",
-      borderColor: "{base300}",
-      textAlign: "center",
       height: "100%",
-      position: "fixed"
+      width: "100%",
     },
     header: {
-      flexShrink: "0",
+      // Flex contianer as a header that contains all the tabs
-      bg: "{base300}",
+      width: "100%",
-      color: "{text}",
+      align: "center",
-      cursor: "move",
+      justify: "space-between",
-      borderRadius: "sm",
+      top: "0",
-      whiteSpace: "nowrap",
+      p: 5,
-      textAlign: "left",
+      position: "sticky",
-      pl: "2"
+      zIndex: "dropdown",
-    },
-    canvas: {
-      flex: "1 1 auto",
       bg: "transparent",
-      color: "{text}",
+
-      cursor: "default",
+      // THE TABS
-      borderRadius: "md",
+      // Flex container renders as div for all the buttons within the header
+      "& > div": {
+        alignItems: "center",
+        gap: 2,
+
+        // icon in each tab button
+        "& svg": {
+          // TODO: bring over svg styling
+        }
+      }
+    },
+    body: {
+      flex: 1,
       overflow: "auto",
     }
+  },
+})
+
+// const canvasRecipe = defineRecipe({
+//   base: {
+//     bg: "{transparent}",
+//     zIndex: "-1",
+//     color: "{text}"
+//   }
+// });
+
+// const widgetRecipe = defineSlotRecipe({
+//   slots: ["root", "header", "canvas"],
+//   base: {
+//     root: {
+//       flexDirection: "column",
+//       gap: "1",
+//       position: "relative",
+//       bg: "base100",
+//       borderRadius: "md",
+//       p: "1",
+//       paddingBottom: "2",
+//       border: "1px solid",
+//       borderColor: "{base300}",
+//       textAlign: "center",
+//       height: "100%",
+//       // position: "fixed"
+//     },
+//     header: {
+//       flexShrink: "0",
+//       bg: "{base300}",
+//       color: "{text}",
+//       cursor: "move",
+//       borderRadius: "sm",
+//       whiteSpace: "nowrap",
+//       textAlign: "left",
+//       pl: "2"
+//     },
+//     canvas: {
+//       flex: "1 1 auto",
+//       bg: "transparent",
+//       color: "{text}",
+//       cursor: "default",
+//       borderRadius: "md",
+//       overflow: "auto",
+//     }
+//   }
+// });
+
+// USED IN COMPONENTS:
+// * Settings Button
+// * My Dashboard
+const glassPanelRecipe = defineSlotRecipe({
+  slots: ["root", "header", "body"],
+
+  // 🧊 THE GLASS MATH (Applies to everything)
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      position: "relative",
+      overflow: "hidden",
+      bg: {base: "rgba(255, 255, 255, 0.4)", _dark: "rgba(255, 255, 255, 0.04)"},
+      backdropFilter: "blur(12px)",
+      WebkitBackdropFilter: "blur(12px)",
+      border: "1px solid",
+      borderColor: {base: "gray.200", _dark: "whiteAlpha.200"},
+      boxShadow: "sm",
+    }
+  },
+
+  // 📏 THE LAYOUTS (Applies selectively)
+  variants: {
+    layout: {
+      widget: {
+        root: {
+          width: "100%",
+          height: "100%",
+          borderRadius: "3xl",
+        },
+        header: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          px: 3,
+          pt: 2,
+          pb: 0,
+
+          "& > p": {
+            color: "titleColor",
+            fontWeight: "500",
+            fontSize: "16px",
+
+            // the following three specifications are equivalent to Chakra's 'truncate' prop
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "clip",
+          },
+
+          "& > button": {
+            borderRadius: "xl",
+
+            _hover: {
+              color: "white",
+              bg: "gray.500",
+            },
+          }
+        },
+        body: {
+          flex: "1",
+          overflow: "hidden",
+          position: "relative",
+          px: 1,
+          pb: 1,
+          pt: 0
+        }
+      },
+      dropdown: {
+        root: {
+          borderRadius: "xl",
+          p: 1
+        }
+        // (Header and body slots are ignored here because dropdowns don't use them)
+      },
+      popover: {
+        root: {
+          borderRadius: "2xl",
+          p: 0,
+          boxShadow: "xl",
+          minW: "240px",
+          maxW: "60%",
+          minH: "80%",
+          overflow: "hidden",
+          // OVERRIDES: Make the background 85-90% opaque instead of 40%
+          bg: {
+            base: "rgba(255, 255, 255, 0.75)",
+            _dark: "rgba(20, 22, 25, 0.8)"
+          },
+
+          // OVERRIDES: Increase the blur just to smooth out any stubborn gridlines
+          backdropFilter: "blur(15px)",
+          WebkitBackdropFilter: "blur(15px)",
+
+
+          // IMPORTANT: everything below is specific to the widget menu found in the settingsButton component
+          // dialog header
+          "& > div.chakra-dialog__header": {
+            bg: "transparent",
+            color: {
+              base: "gray.800",
+              _dark: "white"
+            },
+            py: 4,
+            borderColor: {
+              base: "gray.200",
+              _dark: "whiteAlpha.200"
+            },
+
+            // title
+            "& h2": {
+              fontSize: "xl",
+              fontWeight: "bold"
+            },
+          },
+
+          // dialog body
+          "& > div.chakra-dialog__body": {
+            p: 0,
+
+            // box container of the widget category menu
+            "& div.chakra-tabs__root > div:first-child": {
+              position: "relative",
+              display: "flex",
+              maxW: "100%",
+              mx: 5,
+              mt: 4,
+              mb: 6
+            },
+
+            // the horizontal widget categories menu
+            "& div.chakra-tabs__list": {
+              bg: {
+                base: "rgba(0, 0, 0, 0.04)",
+                _dark: "rgba(255, 255, 255, 0.05)"
+              },
+              p: 1,
+              borderRadius: "full",
+              display: "flex",
+              flexWrap: "nowrap",
+              overflowX: "auto",
+              maxW: "100%",
+              border: "1px solid",
+              borderColor: {
+                base: "blackAlpha.50",
+                _dark: "whiteAlpha.100"
+              },
+              scrollbarWidth: "none",
+              "&::-webkit-scrollbar": {display: "none"},
+
+              // the pill shaped menu options
+              "& button.chakra-tabs__trigger": {
+                px: 5,
+                py: 2,
+                borderRadius: "full",
+                whiteSpace: "nowrap",
+                flexShrink: 0,
+                color: {
+                  base: "gray.500",
+                  _dark: "gray.400"
+                },
+                fontWeight: "medium",
+                transition: "background-color 0.2s, color 0.2s, box-shadow 0.2s",
+                _hover: {
+                  color: {
+                    base: "gray.800",
+                    _dark: "gray.200"
+                  },
+                },
+                _selected: {
+                  bg: {
+                    base: "white",
+                    _dark: "rgba(255, 255, 255, 0.12)"
+                  },
+                  color: {
+                    base: "blue.600",
+                    _dark: "blue.200"
+                  },
+                  boxShadow: "sm",
+                  fontWeight: "bold",
+                }
+              }
+            },
+
+            // base styling applied to both chevron navigators
+            "& div.chakra-tabs__root > div:first-child div:has(svg)": {
+              position: "absolute",
+              top: "0",
+              bottom: "0",
+              w: "50px",
+              alignItems: "center",
+              justifyContent: "center",
+              zIndex: 2,
+              cursor: "pointer",
+              bg: {
+                base: "rgba(255, 255, 255, 0.7)",
+                _dark: "rgba(30, 30, 30, 0.8)"
+              },
+              color: {
+                base: "gray.600",
+                _dark: "gray.300"
+              },
+              backdropFilter: "blur(1px)",
+              transition: "background-color 0.2s",
+
+              _hover: {
+                color: {
+                  base: "blue.500",
+                  _dark: "blue.300"
+                },
+                bg: {
+                  base: "rgba(255, 255, 255, 0.9)",
+                  _dark: "rgba(40, 40, 40, 0.95)"
+                },
+              },
+
+              "&:has(.lucide-chevron-left)": {
+                left: 0,
+                borderTopLeftRadius: "full",
+                borderBottomLeftRadius: "full",
+                // Bites a transparent circle out of the flat right side!
+                WebkitMaskImage: "radial-gradient(circle at 100% 50%, transparent 30px, black 19px)",
+                maskImage: "radial-gradient(circle at 100% 50%, transparent 30px, black 35px)",
+              },
+
+              "&:has(.lucide-chevron-right)": {
+                right: 0,
+                borderTopRightRadius: "full",
+                borderBottomRightRadius: "full",
+                // THE MAGIC: Bites a transparent circle out of the flat left side!
+                WebkitMaskImage: "radial-gradient(circle at 0% 50%, transparent 30px, black 19px)",
+                maskImage: "radial-gradient(circle at 0% 50%, transparent 30px, black 35px)",
+              }
+            }
+
+          }
+        }
+      }
+    },
+    mode: {
+      editing: {
+        root: {
+          boxShadow: "outline",
+          borderStyle: "dashed",
+          borderWidth: "2px",
+          borderColor: "orange.300",
+          cursor: "grab",
+        }
+      }
+    }
+  },
+
+  defaultVariants: {
+    layout: "widget"
+  }
+});
+
+const glassTabRecipe = defineRecipe({
+  base: {
+    display: "flex",
+    alignItems: "center",
+    height: "40px",
+
+    // The Circle State (Inactive)
+    maxWidth: "40px",
+    minWidth: "40px",
+    px: "8px",
+    gap: 2,
+
+    // CRITICAL: Locks the shape to a perfect circle/pill
+    borderRadius: "full",
+
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    textDecoration: "none",
+    fontWeight: "500",
+    color: "fg.muted",
+
+    // --- THE GLASS EFFECT (Inactive) ---
+    // Uses a highly transparent white/black depending on mode
+    bg: {base: "rgba(255, 255, 255, 0.4)", _dark: "rgba(255, 255, 255, 0.03)"},
+    backdropFilter: "blur(12px)",
+    WebkitBackdropFilter: "blur(12px)",
+    border: "1px solid",
+    borderColor: {base: "rgba(0, 0, 0, 0.05)", _dark: "rgba(255, 255, 255, 0.08)"},
+    boxShadow: "0 4px 6px rgba(0, 0, 0, 0.02)", // Tiny shadow to lift it off the canvas
+
+    transition: "all 0.85s cubic-bezier(0.34, 1.56, 0.64, 1)",
+
+    "&:hover, &[data-state='open'], &[aria-expanded='true']": {
+      maxWidth: "250px",
+      pr: "16px",
+      // --- THE GLASS EFFECT (Hover) ---
+      // Becomes slightly more opaque when you mouse over
+      bg: {base: "rgba(255, 255, 255, 0.8)", _dark: "rgba(255, 255, 255, 0.1)"},
+      borderColor: {base: "rgba(0, 0, 0, 0.1)", _dark: "rgba(255, 255, 255, 0.15)"},
+      color: "fg",
+      textDecoration: "none",
+    },
+
+    "&.active": {
+      maxWidth: "250px",
+      pr: "16px",
+
+      bg: "{gooeyButtonBackground}",
+      borderColor: "transparent",
+      color: "{textInverted}",
+      boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)", // Stronger shadow for the active tab
+
+      _hover: {
+        bg: "{gooeyButtonBackground}",
+        cursor: "default",
+        textDecoration: "none",
+      }
+    }
   }
 });
 
@@ -171,16 +743,22 @@ const config = defineConfig({
   theme: {
     semanticTokens: {
       colors: {
-        base100: { value: {base: "#f6f9faff", _dark: "#1617199e"}},
+        // base100: {value: {base: "#f6f9faff", _dark: "#1617199e"}},
-        base200: { value: {base: "#e6ecf1ff", _dark: "#242424"}},
+        // base200: {value: {base: "#e6ecf1ff", _dark: "#242424"}},
-        base300: { value: {base: "#d3dae4ff", _dark: "#0a0b0bff"}},
+        // base300: {value: {base: "#d3dae4ff", _dark: "#0a0b0bff"}},
-        primary: { value: {base: "#2B98F8", _dark: "#2B98F8"}},
+        // primary: {value: {base: "#2B98F8", _dark: "#2B98F8"}},
-        primaryLt: { value: {base: "#98cdffff", _dark: "#98cdffff"}},
+        // primaryLt: {value: {base: "#98cdffff", _dark: "#98cdffff"}},
-        secondaryBG: { value: {base: "#EDF1F1", _dark: "#121212"}},
+        // secondaryBG: {value: {base: "#EDF1F1", _dark: "#121212"}},
-        border: {value: {base: "#000000", _dark: "#cbcbcb84"}},
+        // border: {value: {base: "#000000", _dark: "#cbcbcb84"}},
-        text: {value: {base: "#000000", _dark: "lightgrey"}},
+        text: {value: {base: "#000000", _dark: "#FFFFFF"}},
-        textInverted: {value: "white"},
+        textInverted: {value: {base: "#000000", _dark: "#FFFFFF"}},
-        icon: {value: {base: "#000000", _dark: "lightgrey"}},
+        // icon: {value: {base: "#000000", _dark: "#FFFFFF"}},
+
+        gooeyButtonBackground: {value: {base: "rgba(255, 255, 255, 0.1)", _dark: "rgba(255, 255, 255, 0.1)"}},
+        MainBackground: {value: {base: "#F9F9F9", _dark: "#141414"}},
+        titleColor: {value: {base: "gray.800", _dark: "#FFFFFF"}},
+        iconColor: {value: {base: "gray.600", _dark: "#000000"}},
+        glassSeperator: {value: {base: "#0000001A", _dark: "#FFFFFF3F"}},
       },
     },
     tokens: {
@@ -189,15 +767,20 @@ const config = defineConfig({
       },
     },
     recipes: {
-      header: headerRecipe,
       dashboard: dashboardRecipe,
-      canvas: canvasRecipe,
+      // canvas: canvasRecipe,
+      glassTab: glassTabRecipe
     },
     slotRecipes: {
+      header: headerRecipe,
       sidebar: sidebarRecipe,
-      widget: widgetRecipe,
+      // widget: widgetRecipe,
+      glassPanel: glassPanelRecipe,
+      home: homeRecipe,
     },
   },
 });
 
+
+// Define semantic tokens and export recipes
 export const system = createSystem(defaultConfig, config);