update: display new data from llm quad plot view

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/Widgets/settings/AlertChangeSettings.jsx

@@ -4,23 +4,21 @@ import {useDashboardStore} from "@/store/useDashboardStore.jsx";
 export default function IvansAlertsSettings({ widgetId, currentSettings }) {
   const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
 
-  console.log("currentSettings:", currentSettings);
-
   return (
-    <Flex flexDirection="column" justifyContent="space-between" align="center" gap={2} pb={2}>
+    <Flex flexDirection="column" justifyContent="space-between" gap={2} pb={2}>
       {/* SLIDER DATE RANGE SELECTION */}
       <Slider.Root
-        w="90%" h="100%"
+        width="80%" h="100%"
         min={1} max={14}
-        defaultValue={[1]}
+        defaultValue={[7]}
         step={1}
         onValueChangeEnd={(e) => {
-          console.log("change end", e);
           const day = new Date(Date.now() - (e.value[0])*86400000).toLocaleDateString('en-CA');
+          console.log("new start: ", day);
           updateSettings(widgetId, {...currentSettings, startDate: day});
         }}
       >
-        <Slider.Label>{currentSettings?.startDate} to {currentSettings?.endDate}</Slider.Label>
+        <Slider.Label>{currentSettings?.endDate} to {currentSettings?.startDate}</Slider.Label>
         <Slider.Control>
           <Slider.Track>
             <Slider.Range />

client/src/components/dashboard/SettingsButton.jsx

@@ -38,11 +38,9 @@ export function SettingsButton() {
   const [canScrollRight, setCanScrollRight] = useState(false);
 
   // Pull the glass container styles for the dropdown and modal
-  const popoverRecipe = useSlotRecipe({ key: "glassPopover" });
+  const panelRecipe = useSlotRecipe({key: "glassPanel"});
-  const popoverStyles = popoverRecipe();
+  const panelStyles = panelRecipe({layout: "dropdown"});
-
+  const modalStyles = panelRecipe({layout: "popover"});
-  const dialogRecipe = useSlotRecipe({ key: "glassDialog" });
-  const dialogStyles = dialogRecipe();
 
   const [isLibraryOpen, setIsLibraryOpen] = useState(false);
 
@@ -132,7 +130,7 @@ export function SettingsButton() {
           </Menu.Trigger>
 
           <Menu.Positioner>
-            <Menu.Content css={popoverStyles.content} zIndex="dropdown" minW="200px">
+            <Menu.Content css={panelStyles.root} zIndex="dropdown" minW="200px">
               <Menu.Item
                 onClick={enterEditMode}
                 cursor="pointer"
@@ -170,13 +168,12 @@ export function SettingsButton() {
         {/* Soft blur can be added to the background behind the modal */}
         {/*<Dialog.Backdrop bg="blackAlpha.100" backdropFilter="blur(2px)"/>*/}
         <Dialog.Positioner>
-          <Dialog.Content css={dialogStyles.content}>
+          <Dialog.Content css={modalStyles.root}>
-
+            <Dialog.Header>
-            <Dialog.Header css={dialogStyles.header}>
               <Dialog.Title>Widgets Shop</Dialog.Title>
             </Dialog.Header>
 
-            <Dialog.Body css={dialogStyles.body}>
+            <Dialog.Body>
               <Tabs.Root defaultValue={categories[0]} variant="unstyled">
                 {/* HORIZONTAL SCROLLABLE MENU OF WIDGET CATEGORIES */}
                 <Box>
@@ -249,6 +246,7 @@ export function SettingsButton() {
                                     h="24px"
                                     flexShrink={0}
                                     borderRadius="full"
+                                    // bg={{base: "blue.50", _dark: "whiteAlpha.200"}}
                                     fontWeight="black"
                                     fontSize="xs"
                                     bg='transparent'

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/pages/home/tabs/MyDashboard.jsx

@@ -29,14 +29,11 @@ export default function MyDashboard() {
   const hasHydrated = useRef(false);
 
   // 1. Pull the global slot recipes
-  const widgetRecipe = useSlotRecipe({ key: "widget" });
+  const recipe = useSlotRecipe({key: "glassPanel"});
-  const popoverRecipe = useSlotRecipe({ key: "glassPopover" });
+  const styles = recipe({ layout: "widget" });
+  const popoverStyles = recipe({ layout: "popover" });
 
-  // 2. Pass the editing state directly into the widget recipe!
+  // 2. Populate widgets
-  const widgetStyles = widgetRecipe({ mode: isEditing ? "editing" : undefined });
-  const popoverStyles = popoverRecipe();
-
-  // 3. Populate widgets
   useEffect(() => {
     if (user?.preferences?.dashboard_layout && !hasHydrated.current) {
       const savedLayout = user.preferences.dashboard_layout;
@@ -58,7 +55,7 @@ export default function MyDashboard() {
     isResizable: false // The magic lock! No resizing allowed globally.
   }));
 
-  // 4. The component mapper
+  // 3. The component mapper
   const renderWidget = (widget) => {
     const registryEntry = WIDGET_REGISTRY[widget.type];
 
@@ -70,7 +67,7 @@ export default function MyDashboard() {
 
       return (
         <>
-          <Box css={widgetStyles.header}>
+          <Box css={styles.header}>
             <Text>
               {registryEntry.name}
             </Text>
@@ -86,7 +83,7 @@ export default function MyDashboard() {
 
                 {/* NEW: The Positioner lifts the content out of the Flexbox flow */}
                 <Popover.Positioner zIndex={1}>
-                  <Popover.Content css={popoverStyles.content}>
+                  <Popover.Content css={popoverStyles.root}>
                     <Suspense fallback={<Spinner size="sm"/>}>
                       <SettingsUI
                         widgetId={widget.id}
@@ -99,7 +96,7 @@ export default function MyDashboard() {
             )}
           </Box>
 
-          <Box css={widgetStyles.body}>
+          <Box css={styles.body}>
             <Component settings={widget.settings || {}} widgetID={widget.id || {}}/>
           </Box>
         </>
@@ -108,7 +105,7 @@ export default function MyDashboard() {
 
     // Fallback if someone asks for a widget that doesn't exist
     return (
-      <Flex css={widgetStyles.body} align="center" justify="center" direction="column">
+      <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>
@@ -132,7 +129,13 @@ export default function MyDashboard() {
         {widgets.map(widget => (
           <Box
             key={widget.id}
-            css={widgetStyles.root}
+            css={styles.root}
+            // Grid-specific state overrides remain inline
+            boxShadow={isEditing ? "outline" : styles.root.boxShadow}
+            borderStyle={isEditing ? "dashed" : "solid"}
+            borderWidth={isEditing ? "2px" : "1px"}
+            borderColor={isEditing ? "orange.300" : styles.root.borderColor}
+            cursor={isEditing ? "grab" : "default"}
             position="relative" // REQUIRED so the absolute button stays inside this box
           >
             {/* THE DELETE BUTTON */}
@@ -160,7 +163,7 @@ export default function MyDashboard() {
 
             {/* SUSPENSE BOUNDARY wrapping the render function */}
             <Suspense fallback={
-              <Flex css={widgetStyles.body} align="center" justify="center">
+              <Flex css={styles.body} align="center" justify="center">
                 <Spinner size="md" color="blue.400" thickness="3px"/>
               </Flex>
             }>

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,

client/src/theme.js

@@ -1,25 +1,11 @@
 import {defineSlotRecipe, createSystem, defaultConfig, defineConfig, defineRecipe} from "@chakra-ui/react";
 
-// REUSABLE GLASS SURFACE
+// CONSOLIDATED ✔
-const glassSurface = {
-  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",
-};
-
-/* ==========================================================================
-   RECIPES
-   ========================================================================== */
-
-// 1. Header
 const headerRecipe = defineSlotRecipe({
   slots: ["root", "search_bar", "user_info"],
   base: {
     root: {
-      bg: "transparent",
+      bg: "{transparent}",
       color: "text",
       width: "100%",
       height: "100%",
@@ -34,7 +20,7 @@ const headerRecipe = defineSlotRecipe({
       // input element in search bar component
       "& input": {
         width: "410px",
-      },
+      }
     },
     user_info: {
       flexDirection: "row",
@@ -46,29 +32,21 @@ const headerRecipe = defineSlotRecipe({
       // The Text component
       "& p": {
         fontWeight: "600",
-        fontSize: "md",
+        fontSize: "md"     // equivalent to 16px
-      },
+      }
-    },
+    }
   },
 });
 
-// 2. Sidebar
+// CONSOLIDATED ✔
 const sidebarRecipe = defineSlotRecipe({
-  slots: [
+  slots: ["root", "logo", "logo_text", "footer", "button_text", "buttons", "collapse_button", "color_mode_button"],
-    "root",
-    "logo",
-    "logo_text",
-    "footer",
-    "button_text",
-    "buttons",
-    "collapse_button",
-    "color_mode_button",
-  ],
   base: {
     root: {
       // 1. Semi-transparent backgrounds
       bg: {
-        base: "linear-gradient(to bottom right, #97282880 20%, #EB7F3160 60%, #FCAD3840 100%)",
+        // 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%)"
       },
 
@@ -84,6 +62,8 @@ const sidebarRecipe = defineSlotRecipe({
       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: "calc(100% - 16px)",
       margin: "8px",
@@ -112,18 +92,18 @@ const sidebarRecipe = defineSlotRecipe({
 
       "& svg": {
         transition: "stroke-width 0.4s ease",
-        flexShrink: "0",
+        flexShrink: "0"
       },
 
       _hover: {
         bg: "rgba(255, 255, 255, 0.2)",
         color: "{text}",
         "& svg": {
-          strokeWidth: "3",
+          strokeWidth: "3"
         },
         "& span": {
           fontWeight: "700",
-        },
+        }
       },
 
       fontSize: "l",
@@ -142,8 +122,12 @@ const sidebarRecipe = defineSlotRecipe({
         _hover: {
           bg: "{MainBackground}",
           color: "{textInverted}",
-          "& svg": { strokeWidth: "2" },
+          "& svg": {
-          "& span": { fontWeight: "500" },
+            strokeWidth: "2" // Keeps the active icon at normal thickness on hover
+          },
+          "& span": {
+            fontWeight: "500",
+          }
         },
 
         // The Top Inverted Curve
@@ -172,7 +156,7 @@ const sidebarRecipe = defineSlotRecipe({
           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: {
@@ -213,8 +197,30 @@ const sidebarRecipe = defineSlotRecipe({
         _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: {
@@ -244,7 +250,7 @@ const sidebarRecipe = defineSlotRecipe({
   }
 });
 
-// 3. Dashboard Shell
+// CONSOLIDATED ✔
 const dashboardRecipe = defineRecipe({
   base: {
     height: "100vh",
@@ -259,7 +265,7 @@ const dashboardRecipe = defineRecipe({
   }
 });
 
-// 4. Home Page Tabs
+// CONSOLIDATED ✔
 const homeRecipe = defineSlotRecipe({
   slots: ["root", "header", "body"],
   base: {
@@ -284,52 +290,305 @@ const homeRecipe = defineSlotRecipe({
       "& > div": {
         alignItems: "center",
         gap: 2,
-      },
+
+        // icon in each tab button
+        "& svg": {
+          // TODO: bring over svg styling
+        }
+      }
     },
     body: {
       flex: 1,
       overflow: "auto",
-    },
+    }
   },
-});
+})
 
-// 5. Dashboard Widget Card
+// const canvasRecipe = defineRecipe({
-const widgetRecipe = defineSlotRecipe({
+//   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",
-      ...glassSurface,
-      width: "100%",
-      height: "100%",
-      borderRadius: "3xl",
       overflow: "hidden",
-    },
+      bg: {base: "rgba(255, 255, 255, 0.4)", _dark: "rgba(255, 255, 255, 0.04)"},
-    header: {
+      backdropFilter: "blur(12px)",
-      display: "flex",
+      WebkitBackdropFilter: "blur(12px)",
-      justifyContent: "space-between",
+      border: "1px solid",
-      alignItems: "center",
+      borderColor: {base: "gray.200", _dark: "whiteAlpha.200"},
-      px: 3,
+      boxShadow: "sm",
-      pt: 2,
+    }
-      pb: 0,
-      "& > p": {
-        color: "titleColor",
-        fontWeight: "500",
-        fontSize: "16px",
-        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},
   },
+
+  // 📏 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: {
@@ -338,116 +597,16 @@ const widgetRecipe = defineSlotRecipe({
           borderWidth: "2px",
           borderColor: "orange.300",
           cursor: "grab",
-        },
-      },
-    },
-  },
-});
-
-// 6. TRUE POPOVER: Compact floating card for 3-dots menus
-const glassPopoverRecipe = defineSlotRecipe({
-  slots: ["content", "arrow", "positioner"],
-  base: {
-    content: {
-      ...glassSurface,
-      borderRadius: "xl",
-      p: 3,
-      boxShadow: "lg",
-      bg: {base: "rgba(255, 255, 255, 0.85)", _dark: "rgba(20, 22, 25, 0.85)"},
-      backdropFilter: "blur(15px)",
-      WebkitBackdropFilter: "blur(15px)",
-    },
-  },
-});
-
-// 7. MODAL DIALOG: Large view for the Widget Shop
-const glassDialogRecipe = defineSlotRecipe({
-  slots: ["content", "header", "body", "backdrop"],
-  base: {
-    backdrop: {
-      bg: "rgba(0, 0, 0, 0.4)",
-      backdropFilter: "blur(4px)",
-      WebkitBackdropFilter: "blur(4px)",
-    },
-    content: {
-      display: "flex",
-      flexDirection: "column",
-      position: "relative",
-      ...glassSurface,
-      borderRadius: "2xl",
-      p: 2,
-      boxShadow: "xl",
-      minW: "240px",
-      maxW: "60%",
-      minH: "80%",
-      overflow: "hidden",
-      bg: {base: "rgba(255, 255, 255, 0.75)", _dark: "rgba(20, 22, 25, 0.8)"},
-      backdropFilter: "blur(15px)",
-      WebkitBackdropFilter: "blur(15px)",
-    },
-    header: {
-      bg: "transparent",
-      color: {base: "gray.800", _dark: "white"},
-      py: 4,
-      borderColor: {base: "gray.200", _dark: "whiteAlpha.200"},
-      "& h2": {fontSize: "xl", fontWeight: "bold"},
-    },
-    body: {
-      p: 0,
-      "& div.chakra-tabs__root > div:first-child": {
-        position: "relative",
-        display: "flex",
-        maxW: "100%",
-        mx: 5,
-        mt: 4,
-        mb: 6
-      },
-      "& 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"},
-        "& 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"
-          }
         }
-      },
+      }
-      "& 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",
-          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",
-          WebkitMaskImage: "radial-gradient(circle at 0% 50%, transparent 30px, black 19px)",
-          maskImage: "radial-gradient(circle at 0% 50%, transparent 30px, black 35px)"
-        },
-      },
-    },
   },
+
+  defaultVariants: {
+    layout: "widget"
+  }
 });
 
-// 6. Pill/Glass Expanding Tab Button
 const glassTabRecipe = defineRecipe({
   base: {
     display: "flex",
@@ -504,14 +663,11 @@ const glassTabRecipe = defineRecipe({
         bg: "{gooeyButtonBackground}",
         cursor: "default",
         textDecoration: "none",
-      },
+      }
-    },
+    }
-  },
+  }
 });
 
-/* ==========================================================================
-   CONFIG & SYSTEM
-   ========================================================================== */
 const config = defineConfig({
   globalCss: {
     ".react-grid-placeholder": {
@@ -550,14 +706,36 @@ const config = defineConfig({
     "::-webkit-scrollbar-track": {
       background: "transparent",
     },
-    ".leaflet-control-zoom-in, .leaflet-control-zoom-out, .leaflet-control-attribution, .leaflet-container": {
+    // '.leaflet-tile': {
+    //   _dark: {
+    //     filter: "invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)",
+    //   }
+    // },
+    '.leaflet-control-zoom-in, .leaflet-control-zoom-out, .leaflet-control-attribution, .leaflet-container': {
       _dark: {
         filter: "invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)",
-      },
+      }
     },
-    ".leaflet-container": {
+    '.leaflet-control-attribution': {
+      _dark: {
+        filter: "invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)",
+      }
+    },
+    '.leaflet-container': {
       fontFamily: "system-ui, sans-serif !important",
+      _dark: {
+        filter: "invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)",
+      }
     },
+    // ".leaflet-popup-content": {
+    //   fontFamily: "georgia, system-ui, sans-serif !important"
+    // },
+    // ".leaflet-control a": {
+    //   fontFamily: "georgia, system-ui, sans-serif !important"
+    // },
+    // ".leaflet-tooltip": {
+    //   fontFamily: "georgia, system-ui, sans-serif !important"
+    // },
     ".react-grid-item": {
       transition: "none !important"
     },
@@ -565,13 +743,22 @@ const config = defineConfig({
   theme: {
     semanticTokens: {
       colors: {
-        text: { value: { base: "#000000", _dark: "#FFFFFF" } },
+        // base100: {value: {base: "#f6f9faff", _dark: "#1617199e"}},
-        textInverted: { value: { base: "#000000", _dark: "#FFFFFF" } }, // Fixed: Properly inverted
+        // base200: {value: {base: "#e6ecf1ff", _dark: "#242424"}},
-        MainBackground: { value: { base: "#F9F9F9", _dark: "#141414" } },
+        // base300: {value: {base: "#d3dae4ff", _dark: "#0a0b0bff"}},
-        titleColor: { value: { base: "gray.800", _dark: "#FFFFFF" } },
+        // primary: {value: {base: "#2B98F8", _dark: "#2B98F8"}},
-        iconColor: { value: { base: "gray.600", _dark: "gray.300" } }, // Fixed: Visible in dark mode
+        // primaryLt: {value: {base: "#98cdffff", _dark: "#98cdffff"}},
-        glassSeperator: { value: { base: "#0000001A", _dark: "#FFFFFF3F" } },
+        // secondaryBG: {value: {base: "#EDF1F1", _dark: "#121212"}},
+        // border: {value: {base: "#000000", _dark: "#cbcbcb84"}},
+        text: {value: {base: "#000000", _dark: "#FFFFFF"}},
+        textInverted: {value: {base: "#000000", _dark: "#FFFFFF"}},
+        // 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: {
@@ -581,17 +768,19 @@ const config = defineConfig({
     },
     recipes: {
       dashboard: dashboardRecipe,
-      glassTab: glassTabRecipe,
+      // canvas: canvasRecipe,
+      glassTab: glassTabRecipe
     },
     slotRecipes: {
       header: headerRecipe,
       sidebar: sidebarRecipe,
+      // widget: widgetRecipe,
+      glassPanel: glassPanelRecipe,
       home: homeRecipe,
-      widget: widgetRecipe,
-      glassPopover: glassPopoverRecipe,
-      glassDialog: glassDialogRecipe,
     },
   },
 });
 
+
+// Define semantic tokens and export recipes
 export const system = createSystem(defaultConfig, config);