remove: commented out the 'Test View' in the source drop down selection as it doesn't work atm

update: data explorer was using v2 api in development, moving to v3 for production
refactor: small styling changes
2026-11-03 10:47:44 -08:00 · 2026-10-30 12:03:53 -07:00 · 2026-10-30 11:43:33 -07:00 · 2026-10-29 13:34:53 -07:00 · 2026-10-27 16:23:11 +00:00 · 2026-10-20 16:19:45 -07:00
36 changed files with 2092 additions and 1239 deletions
@@ -0,0 +1,23 @@
+# Stage 1: The Node Builder
+FROM node:20-alpine AS builder
+WORKDIR /app
+
+# Install dependencies
+COPY package*.json ./
+RUN npm ci
+
+# Copy React source code and build it
+COPY . .
+RUN npm run build 
+
+# Stage 2: The Nginx Server
+FROM nginx:alpine
+
+# Copy the compiled files from Stage 1 (Change /dist to /build if using Create-React-App instead of Vite)
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+# Copy your custom Nginx routing file
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
@@ -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>
@@ -0,0 +1,23 @@
+server {
+    listen 80;
+    server_name localhost;
+
+    location / {
+        root /usr/share/nginx/html;
+        index index.html index.htm;
+        # SPA routing: if a file isn't found, serve index.html
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Optional: Cache static assets
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+        root /usr/share/nginx/html;
+        expires 1y;
+        add_header Cache-Control "public, no-transform";
+    }
+
+    error_page 500 502 503 504 /50x.html;
+    location = /50x.html {
+        root /usr/share/nginx/html;
+    }
+}
@@ -1,7 +1,7 @@
 import 'leaflet/dist/leaflet.css';
-import { useEffect } from 'react';
-import { Routes, Route, Navigate, Outlet } from 'react-router-dom';
-import { useRecipe, Grid, GridItem, useDialog, Flex, Heading } from "@chakra-ui/react";
+import {useEffect} from 'react';
+import {Routes, Route, Navigate, Outlet} from 'react-router-dom';
+import {useRecipe, Grid, GridItem, useDialog, Flex, Heading} from "@chakra-ui/react";

 // --- NEW AUTH IMPORTS ---
 import useAuthStore from './store/authStore';
@@ -20,84 +20,78 @@ 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";
+import DataExplorer from "@/pages/data_explorer/DataExplorer.jsx";

+export default function App() {
+  // 1. Pull the initialization function from Zustand
+  const checkAuth = useAuthStore((state) => state.checkAuth);
+
+  // 2. Ping Django to verify the HttpOnly cookie the moment the app boots
+  useEffect(() => {
+    checkAuth();
+  }, [checkAuth]);
+
+  return (
+    <Routes>
+      {/* --- Public Routes --- */}
+      <Route path="/login" element={<Login/>}/>
+
+      {/* --- Secure Routes --- */}
+      <Route element={<ProtectedRoute/>}>
+
+        {/* --- Non-Public Routes (Now completely locked down) --- */}
+        <Route element={<AppFoundation/>}>
+
+          <Route path="/home" element={<Home/>}>
+            <Route index element={<MyDashboard/>}/>
+            <Route path="gas" element={<Placeholder name="Gas"/>}/>
+            <Route path="seismic" element={<Placeholder name="Seismic"/>}/>
+            <Route path="remote" element={<Placeholder name="Remote Sensing"/>}/>
+            <Route path="daily" element={<Placeholder name="Daily Activity"/>}/>
+          </Route>
+
+          <Route path="/global-map" element={<GlobalMap/>}/>
+          <Route path="/regional-map" element={<RegionalMap/>}/>
+          <Route path="/volcano" element={<Volcano/>}/>
+          <Route path="/admin" element={<Admin/>}/>
+          <Route path="/data-explorer" element={<DataExplorer/>}/>
+        </Route>
+
+      </Route>
+
+      {/* --- Redirect Routes --- */}
+      <Route path="/" element={<Navigate to="/home" replace/>}/>
+    </Routes>
+  );
+}
+
+// The fundamental layout of the webpage
 function AppFoundation() {
-  const recipe = useRecipe({ key: "dashboard" });
+  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 />
+      <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}>
-          <Sidebar />
-        </GridItem>
-        <GridItem colSpan={1} width="100%" overflow="auto">
-          <Outlet />
+          <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);
-
-    // 2. Ping Django to verify the HttpOnly cookie the moment the app boots
-    useEffect(() => {
-        checkAuth();
-    }, [checkAuth]);
-
-    return (
-        <Routes>
-            {/* --- Public Routes --- */}
-            <Route path="/login" element={<Login />} />
-
-            {/* --- SECURE ROUTES --- */}
-            <Route element={<ProtectedRoute />}>
-
-                {/* --- Non-Public Routes (Now completely locked down) --- */}
-                <Route element={<AppFoundation />}>
-
-                    <Route path="/home" element={<Home />}>
-                        <Route index element={<MyDashboard />} />
-                        <Route path="gas" element={<Placeholder name="Gas" />} />
-                        <Route path="seismic" element={<Placeholder name="Seismic" />} />
-                        <Route path="remote" element={<Placeholder name="Remote Sensing" />} />
-                        <Route path="daily" element={<Placeholder name="Daily Activity" />} />
-                    </Route>
-
-                    <Route path="/settings" element={<Settings />} />
-                    <Route path="/web-admin" element={<WebAdmin />} />
-
-                    <Route path="/global-map" element={<GlobalMap />} />
-                    <Route path="/regional-map" element={<RegionalMap />} />
-                    <Route path="/volcano" element={<Volcano />} />
-                    <Route path="/admin" element={<Admin />} />
-                </Route>
-
-            </Route>
-
-            {/* --- Redirect Routes --- */}
-            <Route path="/" element={<Navigate to="/home" replace />} />
-        </Routes>
-    );
-}
-
-export default App;
+// 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>
+);
@@ -60,38 +60,38 @@ export default function AlertChanges({ settings, widgetID}) {
    return sorted_entries;
  }, [apiData, thisWidget]);

-  // list of alert colors used for coloring text below
+  // Alert colors are now light/dark mode responsive
  const alertColors = {
-    Red: "red.400",
-    Orange: "orange.400",
-    Yellow: "yellow.400",
-    Green: "green.400",
+    Red: "alertRed",
+    Orange: "alertOrange",
+    Yellow: "alertYellow",
+    Green: "alertGreen",
  };

  if (isLoading) return (
-    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
+    <Flex w="100%" h="100%" align="center" justify="center" bg="transparent">
      <Spinner size="xl" color="blue.400" thickness="4px"/>
    </Flex>
  );

  if (error) return (
-    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
+    <Flex w="100%" h="100%" align="center" justify="center" bg="transparent">
      <Text color="red.400">{error}</Text>
    </Flex>
  );

  if (data.length === 0) return (
-    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
-      <Text textAlign="center" color="gray.400">No flight level data available for the selected dates.</Text>
+    <Flex w="100%" h="100%" align="center" justify="center" bg="transparent">
+      <Text textAlign="center" color="widgetTextMuted">No flight level data available for the selected dates.</Text>
    </Flex>
  );

  return (
-    <Box display="flex" flexDirection="column" gap={2} p={2} w="100%" h="100%" borderRadius="lg" bg="gray.800" overflowY="auto">
+    // bg="transparent" to let the glass panel show through
+    <Box display="flex" flexDirection="column" gap={2} p={2} w="100%" h="100%" bg="transparent" overflowY="auto">
      {data.map((volcano, index) => {
        if (thisWidget?.size === "large") return (
          <Collapsible.Root key={index} w="100%">
-            {/* Using context to dynamically change the border radii of the triggers */}
            <Collapsible.Context>
              {(collapsible) => (
                <>
@@ -102,57 +102,58 @@ export default function AlertChanges({ settings, widgetID}) {
                          p={1} pl={3} pr={3}
                          borderTopRadius="lg"
                          borderBottomRadius={collapsible.open ? "0" : "lg"}
-                          bg="gray.600"
+                          bg="widgetItemBg"
                    >
-                      <Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
-                        <Text truncate >{volcano[0]}</Text> {/* volcano name */}
-                        <Text truncate fontSize="xs" color="gray.300/90">{volcano[1][0]?.alert_start_date_local}</Text>
+                      <Flex direction="column" w="100%" minW={0} textAlign="left">
+                        <Text truncate color="text" fontWeight="medium">{volcano[0]}</Text>
+                        <Text truncate fontSize="xs" color="widgetTextMuted">{volcano[1][0]?.alert_start_date_local}</Text>
                      </Flex>
                      <Flex w="100%" minW={0} justify="right">
-                        <Text truncate pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100" fontWeight="semibold">{volcano[1][0]?.alert_level_name}</Text>
+                        <Text truncate pl={2} pr={2} borderRadius="lg" bg="widgetBadgeBg" color="text" fontWeight="semibold">
+                          {volcano[1][0]?.alert_level_name}
+                        </Text>
                      </Flex>
                    </Flex>
                  </Collapsible.Trigger>
-                  <Collapsible.Content w="100%" p={3} borderBottomRadius="lg" bg="gray.700">
+
+                  <Collapsible.Content w="100%" p={3} borderBottomRadius="lg" bg="widgetItemExpandedBg">
                    <Timeline.Root size="md" variant="subtle">
                      {volcano[1]?.map((object, index) => (
                        <Timeline.Item key={index} w="100%" h="100%">
                          <Timeline.Connector >
-                            {/*<Timeline.Separator borderWidth="1px" borderColor="gray.600"/>*/}
-                            <Timeline.Indicator outline="none" bg="gray.200" color="gray.500" size="lg">
+                            <Timeline.Indicator outline="none" bg="widgetBadgeBg" color="iconColor" size="lg">
                              {object?.alert_scheme_domain === "terrestrial" && <Footprints size={15} />}
                              {object?.alert_scheme_domain === "aviation" && <Plane size={15} />}
                              {object?.alert_scheme_domain === "maritime" && <Sailboat size={15} />}
                            </Timeline.Indicator>
-                            <Timeline.Indicator h="50%" outline="none" bg="gray.700" color="gray.100" size="lg">
+                            <Timeline.Indicator h="50%" outline="none" bg="widgetBadgeBg" color="iconColor" size="lg">
                              {object?.change_type === "increase" ? <TrendingUp /> : <TrendingDown />}
                            </Timeline.Indicator>
                          </Timeline.Connector>
                          <Timeline.Content w="100%" h="100%">
-                            {/*<Timeline.Title>{object?.volcano}</Timeline.Title>*/}
                            <Timeline.Description w="100%" h="100%" gap={1}>
                              <Flex direction="column" gap={1}>
-                                <Text w="100%" h="100%" color="gray.200">{object?.alert_start_date_local}</Text>
+                                <Text w="100%" h="100%" color="widgetTextMuted">{object?.alert_start_date_local}</Text>
                                <Text w="100%" h="100%"
-                                      color={alertColors[object?.alert_level_name] || "gray.200"}
+                                      color={alertColors[object?.alert_level_name] || "text"}
                                      fontSize="md"
                                      fontWeight="semibold"
                                >
                                  {object?.alert_level_name}
                                </Text>
                                <Flex w="100%" h="20px" direction="row" justify="left" align="center">
-                                  <Text color="gray.300">Alert Scale: </Text>
+                                  <Text color="widgetTextMuted">Alert Scale: </Text>
                                  {(Array.from({ length: Number(object?.alert_scheme_highest) - Number(object?.alert_scheme_lowest) + 1}, (v, i) => Number(object?.alert_scheme_lowest) + i))
                                    .map((num) => (
                                      <Center
                                        key={num}
                                        w="20px" h="100%"
-                                        color="gray.300"
-                                        bg={num === Number(object?.alert_level_rank) ? "gray.300/20" : null} // alert level rank is a string for some reason
-                                        borderRadius={num === Number(object?.alert_level_rank) ? "xl" : null}
+                                        color="text"
+                                        bg={num === Number(object?.alert_level_rank) ? "widgetBadgeBg" : "transparent"}
+                                        borderRadius={num === Number(object?.alert_level_rank) ? "xl" : "none"}
                                        textAlign="center"
                                        fontSize="sm"
-                                        fontWeight="semibold"
+                                        fontWeight="bold"
                                      >
                                        {num}
                                      </Center>
@@ -181,30 +182,30 @@ export default function AlertChanges({ settings, widgetID}) {
              justify="space-between" align="center"
              p={1} pl={3} pr={3}
              borderRadius="lg"
-              bg="gray.600"
+              bg="widgetItemBg"
            >
-              <Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
+              <Flex direction="column" w="100%" minW={0} textAlign="left" color="text">
                <Flex direction="row" w="100%" gap={2} align="center">
-                  <Flex color="gray.300">
+                  <Flex color="iconColor">
                    {domain[0] === "aviation" && <Plane size={15}/>}
                    {domain[0] === "terrestrial" && <Footprints size={15}/>}
                    {domain[0] === "maritime" && <Sailboat size={15}/>}
                  </Flex>
-                  <Text truncate>{volcano[0] || ""}</Text> {/* volcano name */}
+                  <Text truncate fontWeight="medium">{volcano[0] || ""}</Text>
                </Flex>
-                <Text truncate w="100%" fontSize="xs" color="gray.300/90">{domain[1]?.[0]?.alert_start_date_local || ""}</Text>
+                <Text truncate w="100%" fontSize="xs" color="widgetTextMuted">{domain[1]?.[0]?.alert_start_date_local || ""}</Text>
              </Flex>

-              <Flex direction="row" w="100%" minW={0} justify="right" gap={2} color="gray.200">
-                <Flex w="25px" justify="right">
+              <Flex direction="row" w="100%" minW={0} justify="right" gap={2} color="text">
+                <Flex w="25px" justify="right" color="iconColor">
                  {domain[1]?.[0]?.change_type === "increase" ? <TrendingUp/> : <TrendingDown/>}
                </Flex>
                <Text
                  truncate
                  pl={2} pr={2}
                  borderRadius="lg"
-                  bg="gray.800/50"
-                  color={alertColors[domain[1]?.[0]?.alert_level_name] || "gray.100"}
+                  bg="widgetBadgeBg"
+                  color={alertColors[domain[1]?.[0]?.alert_level_name] || "text"}
                  fontWeight="semibold"
                >
                  {domain[1]?.[0]?.alert_level_name}
@@ -5,13 +5,17 @@ import Plot from 'react-plotly.js';
 import VdapApi from '../../hooks/useVdapApi.js';
 import useBuildUrl from "@/hooks/useBuildUrl.js";

+// 1. Import your central color dictionary
+import { rawWidgetColors } from '../../theme.js';
+
 export default function ExplosionEvents({ settings, widgetID }) {
    // Plotly expects 'linear' for normal axes
    const plotYAxisType = settings?.yAxisScale === 'log' ? 'log' : 'linear';

    // 🎨 Let's check color mode so we can make people happy with light and dark
    const { colorMode } = useColorMode();
-    const isDark = colorMode === 'dark';
+    // Assign the active palette based on the current mode
+    const plotColors = colorMode === 'dark' ? rawWidgetColors.dark : rawWidgetColors.light;

    // Generate url with input dates, default to 7 day range
    const url = useBuildUrl('/api/v2/explosion_events', settings?.startDate, settings?.endDate);
@@ -53,58 +57,46 @@ export default function ExplosionEvents({ settings, widgetID }) {
            mode: 'markers',
            marker: {
                size: 7,
-                line: { width: .5, color: 'rgba(255, 255, 255, 0.7)' },
+                line: { width: .5, color: plotColors.text },
                symbol: Symbolway[index % Symbolway.length],
            },
            // Replicating the clean D3/Observable tooltip
            hovertemplate:
-                `<b>${volcanoName}</b><br>` +
-                'Date (UTC): %{x|%b %d %Y %H:%M}<br>' +
-                'Number of Explosions: %{y}<extra></extra>'
+              `<b>${volcanoName}</b><br>` +
+              'Date (UTC): %{x|%b %d %Y %H:%M}<br>' +
+              'Number of Explosions: %{y}<extra></extra>'
        }));
-    }, [apiData]);
+    }, [apiData, plotColors]);

    // 2. Build the Layout (Styling and Grid)
    const layout = useMemo(() => {
-
        return {
            autosize: true,
-            paper_bgcolor: 'transparent', // Let Chakra UI background show through
+            paper_bgcolor: 'transparent',
            plot_bgcolor: 'transparent',
-            font: { color: '#d1d5db' }, // gray.300
+            font: { color: plotColors.muted },
            margin: { t: 40, r: 20, l: 20, b: 20 },
-            // title: {
-            //     text: '7 Day Consolidated Flight Levels',
-            //     font: { size: 16, color: 'white' },
-            //     x: 0.05
-            // },
            xaxis: {
                title: {
                    text: 'Date (UTC)',
-                    font: { color: 'white', size: 12 }
+                    font: { color: plotColors.text, size: 12 }
                },
                type: 'date',
-                tickformat: '%b %d<br>%Y', // D3 requested %b %d \n %Y formatting
-                gridcolor: '#4b5563',
-                zerolinecolor: '#4b5563',
+                tickformat: '%b %d<br>%Y',
+                gridcolor: plotColors.grid,
+                zerolinecolor: plotColors.grid,
                automargin: true,
            },
            yaxis: {
                title: {
                    text: 'Number of Explosions',
-                    font: { color: 'white', size: 12 }
+                    font: { color: plotColors.text, size: 12 }
                },
                type: plotYAxisType,
-                gridcolor: '#4b5563',
-                zerolinecolor: '#ffffff',
+                gridcolor: plotColors.grid,
+                zerolinecolor: plotColors.text,
                automargin: true,
            },
-            // legend: {
-            //     orientation: 'h',
-            //     y: -0.2,
-            //     x: 0.5,
-            //     xanchor: 'center'
-            // },
            hovermode: 'closest',
            shapes: [
                {
@@ -115,40 +107,40 @@ export default function ExplosionEvents({ settings, widgetID }) {
                    y0: 0,
                    y1: 0,
                    yref: 'y',
-                    line: { color: 'white', width: 1 }
+                    line: { color: plotColors.text, width: 1 }
                }
            ],
        };
-    }, [apiData, plotYAxisType]);
+    }, [plotYAxisType, plotColors]);

    if (isLoading) return (
-        <Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center">
-            <Spinner size="xl" color="blue.400" thickness="4px" />
-        </Flex>
+      <Flex w="100%" h="100%" bg="transparent" align="center" justify="center">
+          <Spinner size="xl" color="blue.400" thickness="4px" />
+      </Flex>
    );

    if (error) return (
-        <Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center" p={4}>
-            <Text color="red.400">{error}</Text>
-        </Flex>
+      <Flex w="100%" h="100%" bg="transparent" align="center" justify="center" p={4}>
+          <Text color="red.400">{error}</Text>
+      </Flex>
    );

    if (plotTraces.length === 0) return (
-        <Flex height="100%" width="100%" align="center" justify="center" bg="gray.800" borderRadius="md">
-            <Text color="gray.400">No data available for current filter.</Text>
-        </Flex>
+      <Flex height="100%" width="100%" align="center" justify="center" bg="transparent">
+          <Text color="var(--chakra-colors-widgetTextMuted)">No data available for current filter.</Text>
+      </Flex>
    );

    return (
-        <Box height="100%" width="100%" bg="transparent" borderRadius="md" p={2} overflow="hidden">
-            <Plot
-                key={plotYAxisType}
-                data={plotTraces}
-                layout={layout}
-                useResizeHandler={true} // Essential for dashboard grid resizing!
-                style={{ width: '100%', height: '100%' }}
-                config={{ responsive: true, displayModeBar: true, displaylogo: false }}
-            />
-        </Box>
+      <Box height="100%" width="100%" bg="transparent" overflow="hidden">
+          <Plot
+            key={`${plotYAxisType}-${colorMode}`}
+            data={plotTraces}
+            layout={layout}
+            useResizeHandler={true}
+            style={{ width: '100%', height: '100%' }}
+            config={{ responsive: true, displayModeBar: true, displaylogo: false }}
+          />
+      </Box>
    );
 }
@@ -43,30 +43,31 @@ export default function IvansAlerts({ settings, widgetID }) {
      }).join('\n\n');
      navigator.clipboard.writeText(dataText)
        .then(() => {
-            alert('Copied to clipboard!');
+          alert('Copied to clipboard!');
        })
        .catch((err => {
-            console.error('Failed to copy: ', err);
+          console.error('Failed to copy: ', err);
        }));
      updateSettings(widgetID, {copyToClipboard: false});
    }
  }, [settings, some_data, widgetID, updateSettings]);

+  // Cleaned hardcoded grays for transparent so glass shell shows through
  if (isLoading) return (
-    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
+    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="transparent">
      <Spinner size="xl" color="blue.400" thickness="4px"/>
    </Flex>
  );

  if (error) return (
-    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
+    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="transparent">
      <Text color="red.400">{error}</Text>
    </Flex>
  );

  if (some_data.length === 0) return (
-    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
-      <Text textAlign="center" color="gray.400">No flight level data available for the selected dates.</Text>
+    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="transparent">
+      <Text textAlign="center" color="widgetTextMuted">No flight level data available for the selected dates.</Text>
    </Flex>
  );

@@ -78,7 +79,7 @@ export default function IvansAlerts({ settings, widgetID }) {
          p={2} gap={2}
          overflow="auto"
          borderRadius="xl"
-          bg="gray.800"
+          bg="transparent" // Let the global widgetRecipe glass shell show through
    >
      {some_data.map((item, index) => {
        if (thisWidget?.size === "large") return (
@@ -96,31 +97,31 @@ export default function IvansAlerts({ settings, widgetID }) {
                      gap={2}
                      borderTopRadius="lg"
                      borderBottomRadius={collapsible.open ? "0" : "lg"}
-                      bg="gray.600"
+                      bg="widgetItemBg"
                    >
-                      <Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
+                      <Flex direction="column" w="100%" minW={0} textAlign="left" color="text">
                        <Text truncate>{item.volcano_name}</Text>
-                        <Text truncate fontSize="xs" color="gray.300/90">{item.send_time}</Text>
+                        <Text truncate fontSize="xs" color="widgetTextMuted">{item.send_time}</Text>
                      </Flex>
                      <Flex w="100%" minW={0} justify="right">
-                        <Text truncate pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100" fontWeight="semibold">{item.report_num}</Text>
+                        <Text truncate pl={2} pr={2} borderRadius="lg" bg="widgetBadgeBg" color="text" fontWeight="semibold">{item.report_num}</Text>
                      </Flex>
                    </Flex>
                  </Collapsible.Trigger>
                  <Collapsible.Content w="100%" h="auto">
                    {/* This box needs to be at h="100%" for the pdf toolbar to appear */}
-                    <Box w="100%" h="100%" p={1} borderBottomRadius="lg" bg="gray.700/45">
-                      <Flex direction="column" gap={2} bg="gray.800/75" borderRadius="lg" p={2} align="end">
-                        <Text w="100%" h="100%" fontSize="sm" color="gray.100" textAlign="left" whiteSpace="pre-line">{item?.summary}</Text>
-                        <Text w="fit" fontSize="sm" color="gray.200" pl={1} pr={1} bg="gray.700/50" borderRadius="md">Preparer: {item?.preparer}</Text>
+                    <Box w="100%" h="100%" p={1} borderBottomRadius="lg" bg="widgetItemExpandedBg">
+                      <Flex direction="column" gap={2} bg="widgetItemBg" borderRadius="lg" p={2} align="end">
+                        <Text w="100%" h="100%" fontSize="sm" color="text" textAlign="left" whiteSpace="pre-line">{item?.summary}</Text>
+                        <Text w="fit" fontSize="sm" color="text" pl={1} pr={1} bg="widgetBadgeBg" borderRadius="md">Preparer: {item?.preparer}</Text>
                      </Flex>
                      {item?.files?.map((file, index) => {
                        return (
                          <Box w="100%" h="100%" key={index} p={1}>
                            <br />
                            <Flex mb={2} justify="space-between">
-                              <Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300">{file?.name}</Text>
-                              <Box borderRadius="lg" bg="gray.700" color="gray.300" pl={1} pr={1} fontSize={13} asChild>
+                              <Text pl={1} pr={1} bg="widgetBadgeBg" borderRadius="md" fontSize="xs" color="text">{file?.name}</Text>
+                              <Box borderRadius="lg" bg="widgetBadgeBg" color="text" pl={1} pr={1} fontSize={13} asChild>
                                <a href={`${file?.url}#view=FitV&toolbar=1`} target="_blank" rel="noopener noreferrer">
                                  Open
                                </a>
@@ -131,8 +132,8 @@ export default function IvansAlerts({ settings, widgetID }) {
                              type="application/pdf"
                              style={{ width: '100%', height: '100%', display: 'block' }}
                            >
-                              <Flex w="100%" h="100%" p={4} color="gray.400">
-                                <Text mb={2} color="fg.muted">
+                              <Flex w="100%" h="100%" p={4} color="widgetTextMuted">
+                                <Text mb={2}>
                                  Your browser cannot display this PDF directly.
                                </Text>
                                <a href={file?.url} target="_blank">
@@ -151,19 +152,20 @@ export default function IvansAlerts({ settings, widgetID }) {
        )
        else if (thisWidget?.size === "small") return (
          <Flex direction="row"
+                key={index} // Added missing map key
                w="100%"
                justify="space-between" align="center"
                p={1} pl={3} pr={3}
                gap={2}
                borderRadius="lg"
-                bg="gray.600"
+                bg="widgetItemBg"
          >
-            <Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
+            <Flex direction="column" w="100%" minW={0} textAlign="left" color="text">
              <Text truncate>{item.volcano_name}</Text>
-              <Text truncate fontSize="xs" color="gray.300/90">{item.send_time}</Text>
+              <Text truncate fontSize="xs" color="widgetTextMuted">{item.send_time}</Text>
            </Flex>
            <Flex w="100%" minW={0} justify="right">
-              <Text truncate pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100" fontWeight="semibold">{item.report_num}</Text>
+              <Text truncate pl={2} pr={2} borderRadius="lg" bg="widgetBadgeBg" color="text" fontWeight="semibold">{item.report_num}</Text>
            </Flex>
          </Flex>
        )
@@ -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);
-        tn_percent = ((apiData[0]['tn_count']/apiData[0]['tot_count'])*100).toFixed(2);
-        fp_percent = ((apiData[0]['fp_count']/apiData[0]['tot_count'])*100).toFixed(2);
-        fn_percent = ((apiData[0]['fn_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]['vr_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]['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="row" w="100%" bg="gray.800" borderTopRadius="lg" justifyItems="center" alignItems="start" p={2} pb={0} pl={4} justifyContent="end">
-                {/*<Text fontWeight="bold" fontSize="lg" color="white">Alert Level Changes Quad Plot</Text>*/}
-                <Text bg="cyan.200/5" borderRadius="sm" padding="1" fontWeight="normal" fontSize="sm" color="white">All time</Text>
+        <Flex direction="column" w="100%" h="100%" bg="gray.800" borderRadius="lg" gap={1} p={1}>
+            <Flex direction="column" align="end" justify="center" color="white" gap={1}>
+                <Text w="fit" bg="cyan.200/5" borderRadius="sm" p={1}>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>
    )
@@ -1,10 +1,18 @@
-import VdapApi from '../../hooks/useVdapApi.js';
 import { useMemo } from 'react';
+import { Box, Flex, Spinner, Text } from "@chakra-ui/react";
+import { useColorMode } from "@/components/ui/color-mode.jsx";
 import Plot from 'react-plotly.js';
-import {Box, Flex, Spinner, Text} from "@chakra-ui/react";
+import VdapApi from '../../hooks/useVdapApi.js';
 import useBuildUrl from "@/hooks/useBuildUrl.js";

+// 1. Import your central color dictionary
+import { rawWidgetColors } from '../../theme.js';
+
 export default function PlumeEvents({ settings, widgetID}) {
+  const { colorMode } = useColorMode();
+  // 2. Assign the active palette based on the current mode
+  const plotColors = colorMode === 'dark' ? rawWidgetColors.dark : rawWidgetColors.light;
+
  // Build url, defaults to 7 days past
  const url = useBuildUrl('/api/v2/plume_events', settings?.startDate, settings?.endDate);

@@ -44,7 +52,7 @@ export default function PlumeEvents({ settings, widgetID}) {
      mode: 'markers',
      marker: {
        size: 7,
-        line: { width: .5, color: 'rgba(255, 255, 255, 0.7)' },
+        line: { width: .5, color: plotColors.text },
        symbol: Symbolway[index % Symbolway.length],
      },
      // Replicating the clean D3/Observable tooltip
@@ -53,88 +61,77 @@ export default function PlumeEvents({ settings, widgetID}) {
        'Date (UTC): %{x|%b %d %Y %H:%M}<br>' +
        'Plume Height (m): %{y}<extra></extra>'
    }));
-  }, [apiData]);
+  }, [apiData, plotColors]);

  const layout = useMemo(() => {
-
    return {
      autosize: true,
      paper_bgcolor: 'transparent', // Let Chakra UI background show through
      plot_bgcolor: 'transparent',
-      font: { color: '#d1d5db' }, // gray.300
+      font: { color: plotColors.muted },
      margin: { t: 40, r: 20, l: 20, b: 20 },
-      // title: {
-      //     text: '7 Day Consolidated Flight Levels',
-      //     font: { size: 16, color: 'white' },
-      //     x: 0.05
-      // },
      xaxis: {
        title: {
          text: 'Date (UTC)',
-          font: { color: 'white', size: 12 }
+          font: { color: plotColors.text, size: 12 }
        },
        type: 'date',
-        tickformat: '%b %d<br>%Y', // D3 requested %b %d \n %Y formatting
-        gridcolor: '#4b5563',
-        zerolinecolor: '#4b5563',
+        tickformat: '%b %d<br>%Y',
+        gridcolor: plotColors.grid,
+        zerolinecolor: plotColors.grid,
        automargin: true,
      },
      yaxis: {
        title: {
          text: 'Plume Height',
-          font: { color: 'white', size: 12 }
+          font: { color: plotColors.text, size: 12 }
        },
        type: 'linear',
-        gridcolor: '#4b5563',
-        zerolinecolor: '#ffffff',
+        gridcolor: plotColors.grid,
+        zerolinecolor: plotColors.text,
        automargin: true,
      },
-      // legend: {
-      //     orientation: 'h',
-      //     y: -0.2,
-      //     x: 0.5,
-      //     xanchor: 'center'
-      // },
      hovermode: 'closest',
      shapes: [
        {
          type: 'line',
          x0: 0,
          x1: 1,
-          xref: 'paper', // Spans entire chart width
+          xref: 'paper',
          y0: 0,
          y1: 0,
          yref: 'y',
-          line: { color: 'white', width: 1 }
+          line: { color: plotColors.text, width: 1 }
        }
      ],
    };
-  }, []);
+  }, [plotColors]);

  if (isLoading) return (
-    <Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center">
+    <Flex w="100%" h="100%" bg="transparent" align="center" justify="center">
      <Spinner size="xl" color="blue.400" thickness="4px" />
    </Flex>
  );

  if (error) return (
-    <Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center" p={4}>
+    <Flex w="100%" h="100%" bg="transparent" align="center" justify="center" p={4}>
      <Text color="red.400">{error}</Text>
    </Flex>
  );

  if (plotTraces.length === 0) return (
-    <Flex height="100%" width="100%" align="center" justify="center" bg="gray.800" borderRadius="md">
-      <Text color="gray.400">No data available for current filter.</Text>
+    <Flex height="100%" width="100%" align="center" justify="center" bg="transparent">
+      <Text color="widgetTextMuted">No data available for current filter.</Text>
    </Flex>
  );

  return (
-    <Box height="100%" width="100%" bg="transparent" borderRadius="md" p={2} overflow="hidden">
+    <Box height="100%" width="100%" bg="transparent" overflow="hidden">
      <Plot
+        key={colorMode}
        data={plotTraces}
        layout={layout}
-        useResizeHandler={true} // Essential for dashboard grid resizing!
+        useResizeHandler={true}
        style={{ width: '100%', height: '100%' }}
        config={{ responsive: true, displayModeBar: true, displaylogo: false }}
      />
@@ -52,25 +52,25 @@ export default function RemoteSensing({ settings, widgetID }) {
  }, [settings, data, widgetID, updateSettings]);

  if (isLoading) return (
-    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="md" bg="gray.800">
+    <Flex w="100%" h="100%" align="center" justify="center" bg="transparent">
      <Spinner size="xl" color="blue.400" thickness="4px"/>
    </Flex>
  );

  if (error) return (
-    <Flex w="100%" h="100%" align="center" justify="center" p={4} borderRadius="md" bg="gray.800">
+    <Flex w="100%" h="100%" align="center" justify="center" p={4} bg="transparent">
      <Text color="red.400">{error}</Text>
    </Flex>
  );

  if (data.length === 0) return (
-    <Flex height="100%" width="100%" align="center" justify="center" bg="gray.800" borderRadius="md">
-      <Text color="gray.400">No Remote Sensing data available this week.</Text>
+    <Flex height="100%" width="100%" align="center" justify="center" bg="transparent">
+      <Text color="widgetTextMuted">No Remote Sensing data available this week.</Text>
    </Flex>
  );

  return (
-    <Flex direction="column" w="100%" h="100%" pos="relative" justify="top" align="center" p={2} gap={2} overflow="auto" borderRadius="xl" bg="gray.800">
+    <Flex direction="column" w="100%" h="100%" pos="relative" justify="top" align="center" p={2} gap={2} overflow="auto" bg="transparent">
      {data.map((item, index) => {
        if (thisWidget?.size === "large" || thisWidget?.size === "medium") return (
          <Collapsible.Root key={index} w="100%">
@@ -80,14 +80,14 @@ export default function RemoteSensing({ settings, widgetID }) {
                <>
                  <Collapsible.Trigger w="100%" overflow="hidden">
                    <Flex direction="row" w="100%" h="100%" justify="space-between" align="center" gap={2} p={1} pl={3} pr={3}
-                          borderTopRadius="lg" borderBottomRadius={collapsible.open ? "0" : "lg"} bg="gray.600"
+                          borderTopRadius="lg" borderBottomRadius={collapsible.open ? "0" : "lg"} bg="widgetItemBg"
                    >
-                      <Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
+                      <Flex direction="column" w="100%" minW={0} textAlign="left" color="text">
                        <Text truncate>{item?.volcano_name}</Text>
-                        <Text truncate fontSize="xs" color="gray.300/90">{item?.country}</Text>
+                        <Text truncate fontSize="xs" color="widgetTextMuted">{item?.country}</Text>
                      </Flex>
                      <Flex w="100%" minW={0} justify="right">
-                        <Text truncate pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100" fontSize="sm" fontWeight="semibold">
+                        <Text truncate pl={2} pr={2} borderRadius="lg" bg="widgetBadgeBg" color="text" fontSize="sm" fontWeight="semibold">
                          {item?.report_time}
                        </Text>
                      </Flex>
@@ -95,10 +95,10 @@ export default function RemoteSensing({ settings, widgetID }) {
                  </Collapsible.Trigger>
                  <Collapsible.Content w="100%" h="auto">
                    {/* This box needs to be at h="100%" for the pdf toolbar to appear */}
-                    <Box w="100%" h="100%" p={1} borderBottomRadius="lg" bg="gray.700/45">
-                      <Flex direction="column" gap={2} bg="gray.800/75" borderRadius="lg" p={2} align="end">
-                        <Text w="100%" h="100%" fontSize="sm" color="gray.100" textAlign="left" whiteSpace="pre-line">{item?.summary}</Text>
-                        <Text w="fit" fontSize="sm" color="gray.200" pl={1} pr={1} bg="gray.700/50" borderRadius="md">Source: {item?.sender}</Text>
+                    <Box w="100%" h="100%" p={1} borderBottomRadius="lg" bg="widgetItemExpandedBg">
+                      <Flex direction="column" gap={2} bg="widgetItemBg" borderRadius="lg" p={2} align="end">
+                        <Text w="100%" h="100%" fontSize="sm" color="text" textAlign="left" whiteSpace="pre-line">{item?.summary}</Text>
+                        <Text w="fit" fontSize="sm" color="text" pl={1} pr={1} bg="widgetBadgeBg" borderRadius="md">Source: {item?.sender}</Text>
                      </Flex>
                      {item?.files?.map((file, index) => {

@@ -107,15 +107,15 @@ export default function RemoteSensing({ settings, widgetID }) {
                          <Box w="100%" h="100%" key={index} p={1}>
                            <br />
                            <Flex dir="row" justify="space-between" align="center" mb={2}>
-                              <Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300">{file?.name}</Text>
-                              <Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300/90">PDF</Text>
+                              <Text pl={1} pr={1} bg="widgetBadgeBg" borderRadius="md" fontSize="xs" color="text">{file?.name}</Text>
+                              <Text pl={1} pr={1} bg="widgetBadgeBg" borderRadius="md" fontSize="xs" color="widgetTextMuted">PDF</Text>
                            </Flex>
                            <object
                              data={`${file?.url}#view=FitH&toolbar=1`}
                              type="application/pdf"
                              style={{width: '100%', height: '100%', display: 'block'}}
                            >
-                              <Flex w="100%" h="100%" p={4} color="gray.400">
+                              <Flex w="100%" h="100%" p={4} color="widgetTextMuted">
                                <Text mb={2} color="fg.muted">
                                  Your browser cannot display this PDF directly.
                                </Text>
@@ -132,8 +132,8 @@ export default function RemoteSensing({ settings, widgetID }) {
                          <Box key={index} w="100%" h="100%" p={1}>
                            <br />
                            <Flex dir="row" justify="space-between" align="center" mb={2}>
-                              <Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300">{file?.name}</Text>
-                              <Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300/90">PNG</Text>
+                              <Text pl={1} pr={1} bg="widgetBadgeBg" borderRadius="md" fontSize="xs" color="text">{file?.name}</Text>
+                              <Text pl={1} pr={1} bg="widgetBadgeBg" borderRadius="md" fontSize="xs" color="widgetTextMuted">PNG</Text>
                            </Flex>
                            <a href={file?.url} target="_blank" rel="noopener noreferrer">
                              <img src={file?.url} alt={file?.name} />
@@ -146,7 +146,7 @@ export default function RemoteSensing({ settings, widgetID }) {
                          <>
                            <br />
                            <Flex key={index} dir="row" w="100%" h="100%" p={1} align="center" justify="space-between">
-                              <Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300">{file?.name}</Text>
+                              <Text pl={1} pr={1} bg="widgetBadgeBg" borderRadius="md" fontSize="xs" color="text">{file?.name}</Text>
                              <Button asChild variant="surface" size="xxs" fontSize="xs" pl={2} pr={2}>
                                <a href={file?.url} target="_blank" rel="noopener noreferrer">Download</a>
                              </Button>
@@ -162,17 +162,17 @@ export default function RemoteSensing({ settings, widgetID }) {
          </Collapsible.Root>
        )
        else if (thisWidget?.size === "small") return (
-          <Flex key={index} direction="row" w="100%" justify="space-between" align="center" gap={2} p={1} pl={3} pr={3} borderRadius="lg" bg="gray.600">
-            <Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
+          <Flex key={index} direction="row" w="100%" justify="space-between" align="center" gap={2} p={1} pl={3} pr={3} borderRadius="lg" bg="widgetItemBg">
+            <Flex direction="column" w="100%" minW={0} textAlign="left" color="text">
              <Text truncate>{item?.volcano_name}</Text>
-              <Text truncate fontSize="xs" color="gray.300/90">{item?.country}</Text>
+              <Text truncate fontSize="xs" color="widgetTextMuted">{item?.country}</Text>
            </Flex>
            <Flex w="100%" minW={0} justify="right">
              <Text
                truncate
                pl={2} pr={2}
                borderRadius="lg"
-                bg="gray.800/50" color="gray.100"
+                bg="widgetBadgeBg" color="text"
                fontSize="sm" fontWeight="semibold"
              >
                {item?.report_time}
@@ -185,7 +185,6 @@ export default function RemoteSensing({ settings, widgetID }) {
  );
 }

-
 function ascTimeVolcanoSort(a, b) {
  if (a.volcano_name < b.volcano_name) return -1
  else if (a.volcano_name > b.volcano_name) return 1
@@ -1,10 +1,18 @@
 import VdapApi from '../../hooks/useVdapApi.js';
 import { useMemo } from 'react';
 import Plot from 'react-plotly.js';
-import {Box, Flex, Spinner, Text} from "@chakra-ui/react";
+import { Box, Flex, Spinner, Text } from "@chakra-ui/react";
 import useBuildUrl from "@/hooks/useBuildUrl.js";

+// 1. Import Chakra color mode and your central color dictionary
+import { useColorMode } from "@/components/ui/color-mode.jsx";
+import { rawWidgetColors } from '../../theme.js';
+
 export default function SeismicEvents({ settings, widgetID}) {
+  const { colorMode } = useColorMode();
+  // 2. Assign the active palette based on the current mode
+  const plotColors = colorMode === 'dark' ? rawWidgetColors.dark : rawWidgetColors.light;
+
  // build url, defaults to 7 days past
  const url = useBuildUrl('/api/v2/seismic_events', settings?.startDate, settings?.endDate);

@@ -44,7 +52,7 @@ export default function SeismicEvents({ settings, widgetID}) {
      mode: 'markers',
      marker: {
        size: 7,
-        line: { width: .5, color: 'rgba(255, 255, 255, 0.7)' },
+        line: { width: .5, color: plotColors.text },
        symbol: Symbolway[index % Symbolway.length],
      },
      // Replicating the clean D3/Observable tooltip
@@ -53,48 +61,36 @@ export default function SeismicEvents({ settings, widgetID}) {
        'Date (UTC): %{x|%b %d %Y %H:%M}<br>' +
        'Number of Seismic Events: %{y}<extra></extra>'
    }));
-  }, [apiData]);
+  }, [apiData, plotColors]);

  const layout = useMemo(() => {
-
    return {
      autosize: true,
      paper_bgcolor: 'transparent', // Let Chakra UI background show through
      plot_bgcolor: 'transparent',
-      font: { color: '#d1d5db' }, // gray.300
+      font: { color: plotColors.muted },
      margin: { t: 40, r: 20, l: 20, b: 20 },
-      // title: {
-      //     text: '',
-      //     font: { size: 16, color: 'white' },
-      //     x: 0.05
-      // },
      xaxis: {
        title: {
          text: 'Date (UTC)',
-          font: { color: 'white', size: 12 }
+          font: { color: plotColors.text, size: 12 }
        },
        type: 'date',
        tickformat: '%b %d<br>%Y', // D3 requested %b %d \n %Y formatting
-        gridcolor: '#4b5563',
-        zerolinecolor: '#4b5563',
+        gridcolor: plotColors.grid,
+        zerolinecolor: plotColors.grid,
        automargin: true,
      },
      yaxis: {
        title: {
          text: 'Seismic Count',
-          font: { color: 'white', size: 12 }
+          font: { color: plotColors.text, size: 12 }
        },
        type: 'linear',
-        gridcolor: '#4b5563',
-        zerolinecolor: '#ffffff',
+        gridcolor: plotColors.grid,
+        zerolinecolor: plotColors.text,
        automargin: true,
      },
-      // legend: {
-      //     orientation: 'h',
-      //     y: -0.2,
-      //     x: 0.5,
-      //     xanchor: 'center'
-      // },
      hovermode: 'closest',
      shapes: [
        {
@@ -105,33 +101,34 @@ export default function SeismicEvents({ settings, widgetID}) {
          y0: 0,
          y1: 0,
          yref: 'y',
-          line: { color: 'white', width: 1 }
+          line: { color: plotColors.text, width: 1 }
        }
      ],
    };
-  }, []);
+  }, [plotColors]);

  if (isLoading) return (
-    <Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center">
+    <Flex w="100%" h="100%" bg="transparent" align="center" justify="center">
      <Spinner size="xl" color="blue.400" thickness="4px" />
    </Flex>
  );

  if (error) return (
-    <Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center" p={4}>
+    <Flex w="100%" h="100%" bg="transparent" align="center" justify="center" p={4}>
      <Text color="red.400">{error}</Text>
    </Flex>
  );

  if (plotTraces.length === 0) return (
-    <Flex height="100%" width="100%" align="center" justify="center" bg="gray.800" borderRadius="md">
-      <Text color="gray.400">No data available for current filter.</Text>
+    <Flex height="100%" width="100%" align="center" justify="center" bg="transparent">
+      <Text color="var(--chakra-colors-widgetTextMuted)">No data available for current filter.</Text>
    </Flex>
  );

  return (
-    <Box height="100%" width="100%" bg="transparent" borderRadius="md" p={2} overflow="hidden">
+    <Box height="100%" width="100%" bg="transparent" overflow="hidden">
      <Plot
+        key={colorMode}
        data={plotTraces}
        layout={layout}
        useResizeHandler={true} // Essential for dashboard grid resizing!
@@ -1,11 +1,18 @@
 import { useMemo } from 'react';
 import { Box, Flex, Spinner, Text } from '@chakra-ui/react';
 import Plot from 'react-plotly.js';
-import VdapApi from '../../hooks/useVdapApi.js'; // Adjust path as needed
+import VdapApi from '../../hooks/useVdapApi.js';
+import { useColorMode } from "@/components/ui/color-mode.jsx";
+
+// Import central color dictionary
+import { rawWidgetColors } from '../../theme.js'; // Adjust path if needed

 export default function VaaActivity7Day({ settings, widgetID }) {
-    console.log("3. Chart received settings:", settings);
-    // Plotly expects 'linear' for normal axes
+    const { colorMode } = useColorMode();
+
+    // 2. Assign the active palette based on the current mode
+    const plotColors = colorMode === 'dark' ? rawWidgetColors.dark : rawWidgetColors.light;
+
    const plotYAxisType = settings?.yAxisScale === 'symlog' ? 'symlog' : 'linear';

    // Clean, single-line data fetching
@@ -17,13 +24,10 @@ export default function VaaActivity7Day({ settings, widgetID }) {

        // Array of distinct Plotly shapes
        const Symbolway = [
-            'circle', 'square', 'diamond',
-            'triangle-up', 'triangle-down',
-            'star', 'hexagram', 'pentagon',
-            'hexagon', 'octagon', 'cross', 'x'
+            'circle', 'square', 'diamond', 'triangle-up', 'triangle-down',
+            'star', 'hexagram', 'pentagon', 'hexagon', 'octagon', 'cross', 'x'
        ];

-        // Sort data descending by flight level (matching Observable behavior)
        const sortedData = [...apiData].sort((a, b) => b.obs_fl - a.obs_fl);

        // Efficiently group into Plotly traces by volcano
@@ -44,102 +48,90 @@ export default function VaaActivity7Day({ settings, widgetID }) {
            mode: 'markers',
            marker: {
                size: 7,
-                line: { width: .5, color: 'rgba(255, 255, 255, 0.7)' },
+                line: { width: 0.5, color: plotColors.text },
                symbol: Symbolway[index % Symbolway.length],
            },
            // Replicating the clean Observable tooltip
            hovertemplate:
-                `<b>${volcanoName}</b><br>` +
-                'Date: %{x|%b %d %Y %H:%M}<br>' +
-                'Flight Level: %{y}<extra></extra>'
+              `<b>${volcanoName}</b><br>` +
+              'Date: %{x|%b %d %Y %H:%M}<br>' +
+              'Flight Level: %{y}<extra></extra>'
        }));
-    }, [apiData]);
+    }, [apiData, plotColors]);

    // 2. Build the Layout (Styling and Grid)
    const layout = useMemo(() => {
-
        return {
            autosize: true,
-            paper_bgcolor: 'transparent', // Let Chakra UI background show through
+            paper_bgcolor: 'transparent',
            plot_bgcolor: 'transparent',
-            font: { color: '#d1d5db' }, // gray.300
+            font: { color: plotColors.muted },
            margin: { t: 40, r: 20, l: 20, b: 20 },
-            // title: {
-            //     text: '7 Day Consolidated Flight Levels',
-            //     font: { size: 16, color: 'white' },
-            //     x: 0.05
-            // },
            xaxis: {
                title: {
                    text: 'Date (UTC)',
-                    font: { color: 'white', size: 12 }
+                    font: { color: plotColors.text, size: 12 }
                },
                type: 'date',
-                tickformat: '%b %d<br>%Y %H:%M', // Multiline ticks from Observable
-                gridcolor: '#4b5563',
-                zerolinecolor: '#4b5563',
+                tickformat: '%b %d<br>%Y %H:%M',
+                gridcolor: plotColors.grid, 
+                zerolinecolor: plotColors.grid,
                automargin: true,
            },
            yaxis: {
                title: {
                    text: 'Flight Level',
-                    font: { color: 'white', size: 12 }
+                    font: { color: plotColors.text, size: 12 }
                },
                type: plotYAxisType,
-                gridcolor: '#4b5563',
-                zerolinecolor: '#ffffff',
+                gridcolor: plotColors.grid,
+                zerolinecolor: plotColors.text,
                automargin: true,
            },
-            // legend: {
-            //     orientation: 'h',
-            //     y: -0.2,
-            //     x: 0.5,
-            //     xanchor: 'center'
-            // },
            hovermode: 'closest',
            shapes: [
                {
                    type: 'line',
                    x0: 0,
                    x1: 1,
-                    xref: 'paper', // Spans entire chart width
+                    xref: 'paper',
                    y0: 0,
                    y1: 0,
                    yref: 'y',
-                    line: { color: 'white', width: 1 }
+                    line: { color: plotColors.text, width: 1 }
                }
            ],
        };
-    }, [apiData, plotYAxisType]);
+    }, [plotYAxisType, plotColors]);

    if (isLoading) return (
-        <Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center">
-            <Spinner size="xl" color="blue.400" thickness="4px" />
-        </Flex>
+      <Flex w="100%" h="100%" bg="transparent" align="center" justify="center">
+          <Spinner size="xl" color="blue.400" thickness="4px" />
+      </Flex>
    );

    if (error) return (
-        <Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center" p={4}>
-            <Text color="red.400">{error}</Text>
-        </Flex>
+      <Flex w="100%" h="100%" bg="transparent" align="center" justify="center" p={4}>
+          <Text color="red.400">{error}</Text>
+      </Flex>
    );

    if (plotTraces.length === 0) return (
-        <Flex height="100%" width="100%" align="center" justify="center" bg="gray.800" borderRadius="md">
-            <Text color="gray.400">No flight level data available.</Text>
-        </Flex>
+      <Flex height="100%" width="100%" align="center" justify="center" bg="transparent">
+          <Text color="widgetTextMuted">No flight level data available.</Text>
+      </Flex>
    );

    return (
-        <Box height="100%" width="100%" bg="gray.800" borderRadius="md" p={2} overflow="hidden">
-            <Plot
-                key={plotYAxisType}
-                data={plotTraces}
-                layout={layout}
-                useResizeHandler={true} // Essential for dashboard grid resizing!
-                style={{ width: '100%', height: '100%' }}
-                config={{ responsive: true, displayModeBar: true, displaylogo: false }}
-            />
-        </Box>
+      <Box height="100%" width="100%" bg="transparent" overflow="hidden">
+          <Plot
+            key={`${plotYAxisType}-${colorMode}`}
+            data={plotTraces}
+            layout={layout}
+            useResizeHandler={true}
+            style={{ width: '100%', height: '100%' }}
+            config={{ responsive: true, displayModeBar: true, displaylogo: false }}
+          />
+      </Box>
    );
 }
@@ -4,21 +4,23 @@ 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" gap={2} pb={2}>
+    <Flex flexDirection="column" justifyContent="space-between" align="center" gap={2} pb={2}>
      {/* SLIDER DATE RANGE SELECTION */}
      <Slider.Root
-        width="80%" h="100%"
+        w="90%" h="100%"
        min={1} max={14}
-        defaultValue={[7]}
+        defaultValue={[1]}
        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?.endDate} to {currentSettings?.startDate}</Slider.Label>
+        <Slider.Label>{currentSettings?.startDate} to {currentSettings?.endDate}</Slider.Label>
        <Slider.Control>
          <Slider.Track>
            <Slider.Range />
@@ -1,162 +1,279 @@
-import { useState, useMemo, useRef } from "react";
+import {useState, useMemo, useRef, useEffect, useCallback} from "react";
 import {
-    Button,
-    IconButton,
-    Box,
-    Text,
-    Flex,
-    Grid,
-    Dialog,
-    Tabs,
-    Badge,
-    Menu,
-    HStack
+  Button,
+  Box,
+  Text,
+  Flex,
+  Grid,
+  Dialog,
+  Tabs,
+  Badge,
+  Menu,
+  HStack,
+  useRecipe,
+  useSlotRecipe
 } from "@chakra-ui/react";
-import { Settings, Plus, LayoutGrid, Move, Save, X } from 'lucide-react';
-import { useDashboardStore } from "../../store/useDashboardStore.jsx";
-import { WIDGET_REGISTRY } from "../../constants/widgetRegistry.jsx";
+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);
+  // 1. ☁Store connections
+  const isEditing = useDashboardStore(state => state.isEditing);
+  const enterEditMode = useDashboardStore(state => state.enterEditMode);
+  const saveEdit = useDashboardStore(state => state.saveEdit);
+  const cancelEdit = useDashboardStore(state => state.cancelEdit);
+  const addWidget = useDashboardStore(state => state.addWidget);

-    // This now handles both local UI lock AND database saving!
-    const saveEdit = useDashboardStore(state => state.saveEdit);
+  const glassTabRecipe = useRecipe({key: "glassTab"});
+  const tabStyles = glassTabRecipe();

-    const cancelEdit = useDashboardStore(state => state.cancelEdit);
-    const addWidget = useDashboardStore(state => state.addWidget);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);

-    const [isLibraryOpen, setIsLibraryOpen] = useState(false);
+  // Pull the glass container styles for the dropdown and modal
+  const popoverRecipe = useSlotRecipe({ key: "glassPopover" });
+  const popoverStyles = popoverRecipe();

-    // Smart Add Handler
-    const handleAddWidget = (widgetId, sizeKey) => {
-        enterEditMode();
-        addWidget(widgetId, sizeKey);
-    };
+  const dialogRecipe = useSlotRecipe({ key: "glassDialog" });
+  const dialogStyles = dialogRecipe();

-    const categorizedWidgets = useMemo(() => {
-        return Object.entries(WIDGET_REGISTRY).reduce((acc, [id, widget]) => {
-            const cat = widget.category || 'General';
-            if (!acc[cat]) acc[cat] = [];
-            acc[cat].push({ id, ...widget });
-            return acc;
-        }, {});
-    }, []);
+  const [isLibraryOpen, setIsLibraryOpen] = useState(false);

-    const categories = Object.keys(categorizedWidgets);
+  // ⬅️ ➡️ This is the callbacks and scroll control to add the chevron arrows in the tab list
+  const tabsRef = useRef(null);

-    // use ref to capture html node for placing menu accordingly
-    const menuRef = useRef(null);
-    const getAnchorRect = () => {
-        if (!menuRef.current) return null;
-        return menuRef.current.getBoundingClientRect();
-    };
+  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);
+    }
+  }, []);

-    return (
-        <>
-            {/* THE STATIC DROPDOWN MENU */}
-            <Menu.Root positioning={{ getAnchorRect }}>
-                <Menu.Trigger asChild>
-                    <IconButton
-                        ref={menuRef}
-                        aria-label="Settings"
-                        bg="vdap.darkGreen"
-                        color="white"
-                        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>
+  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]);

-                                <Menu.Item onClick={cancelEdit} color="red.500" cursor="pointer" _hover={{ bg: "red.50" }}>
-                                    <X size={16} style={{ marginRight: '8px' }} /> Discard Changes
-                                </Menu.Item>
-                            </>
-                        ) : (
-                            <Menu.Item onClick={enterEditMode} cursor="pointer" _hover={{ bg: "gray.100" }}>
-                                <Move size={16} style={{ marginRight: '8px' }} /> Edit Layout
-                            </Menu.Item>
-                        )}
+  // Smart Add Handler
+  const handleAddWidget = (widgetId, sizeKey) => {
+    enterEditMode();
+    addWidget(widgetId, sizeKey);
+  };

-                        <Menu.Separator my={1} borderColor="gray.200" />
+  const categorizedWidgets = useMemo(() => {
+    return Object.entries(WIDGET_REGISTRY).reduce((acc, [id, widget]) => {
+      const cat = widget.category || 'General';
+      if (!acc[cat]) acc[cat] = [];
+      acc[cat].push({id, ...widget});
+      return acc;
+    }, {});
+  }, []);

-                        <Menu.Item onClick={() => setIsLibraryOpen(true)} cursor="pointer" _hover={{ bg: "gray.100" }}>
-                            <LayoutGrid size={16} style={{ marginRight: '8px' }} /> Widget Library
-                        </Menu.Item>
-                    </Menu.Content>
-                </Menu.Positioner>
-            </Menu.Root>
+  const categories = Object.keys(categorizedWidgets);

-            {/* THE WIDGET LIBRARY MODAL (Controlled by isLibraryOpen) */}
-            <Dialog.Root open={isLibraryOpen} onOpenChange={(e) => setIsLibraryOpen(e.open)} size="xl" placement="center">
-                <Dialog.Backdrop bg="blackAlpha.600" />
-                <Dialog.Positioner>
-                    <Dialog.Content bg="gray.50" borderRadius="xl" overflow="hidden" boxShadow="xl" maxW="800px">
-                        <Dialog.Header bg="vdap.darkGreen" color="white" py={4}>
-                            <Dialog.Title fontSize="xl" fontWeight="bold">Add Dashboard Widgets</Dialog.Title>
-                        </Dialog.Header>
+  // use ref to capture html node for placing menu accordingly
+  const menuRef = useRef(null);
+  const getAnchorRect = () => {
+    if (!menuRef.current) return null;
+    return menuRef.current.getBoundingClientRect();
+  };

-                        <Dialog.Body p={0}>
-                            <Tabs.Root defaultValue={categories[0]} variant="enclosed" colorScheme="blue">
-                                <Tabs.List bg="white" px={4} pt={4} borderBottom="1px solid" borderColor="gray.200">
-                                    {categories.map(cat => (
-                                        <Tabs.Trigger key={cat} value={cat} pb={2}>{cat}</Tabs.Trigger>
-                                    ))}
-                                </Tabs.List>
+  return (
+    <>
+      {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>

-                                {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">
-                                                    <Text fontWeight="bold" fontSize="md" mb={1}>{widget.name}</Text>
-                                                    <Text fontSize="sm" color="gray.500" mb={4} flex="1">{widget.description}</Text>
+          {/* 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>

-                                                    <Box borderTop="1px solid" borderColor="gray.100" pt={3}>
-                                                        <Text fontSize="xs" fontWeight="bold" color="gray.400" textTransform="uppercase" mb={2}>Add to Grid:</Text>
-                                                        <HStack gap={2} flexWrap="wrap">
-                                                            {Object.keys(widget.allowedSizes).map(sizeKey => (
-                                                                <Badge
-                                                                    key={sizeKey}
-                                                                    as="button"
-                                                                    onClick={() => handleAddWidget(widget.id, sizeKey)}
-                                                                    colorScheme="gray"
-                                                                    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' }}/>
-                                                                    {sizeKey.charAt(0).toUpperCase() + sizeKey.slice(1)}
-                                                                </Badge>
-                                                            ))}
-                                                        </HStack>
-                                                    </Box>
-                                                </Flex>
-                                            ))}
-                                        </Grid>
-                                    </Tabs.Content>
-                                ))}
-                            </Tabs.Root>
-                        </Dialog.Body>
-                        <Dialog.CloseTrigger position="absolute" top={3} right={3} color="white" />
-                    </Dialog.Content>
-                </Dialog.Positioner>
-            </Dialog.Root>
-        </>
-    );
+          {/* 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>
+            <Box ref={menuRef} as="button" css={tabStyles}>
+              {/* settings icon size set to 24 to match tabs. flexShrink 0 is CRITICAL */}
+              <Settings size={24} style={{flexShrink: 0}}/>
+              <Box as="span">Dashboard Settings</Box>
+            </Box>
+          </Menu.Trigger>
+
+          <Menu.Positioner>
+            <Menu.Content css={popoverStyles.content} zIndex="dropdown" minW="200px">
+              <Menu.Item
+                onClick={enterEditMode}
+                cursor="pointer"
+                _hover={{WebkitTextStroke: "0.5px currentColor"}}
+              >
+                <Move size={16} style={{marginRight: '8px'}}/> Edit Layout
+              </Menu.Item>
+
+              <Menu.Separator my={1} borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}/>
+
+              <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) */}
+      <Dialog.Root
+        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 css={dialogStyles.content}>
+
+            <Dialog.Header css={dialogStyles.header}>
+              <Dialog.Title>Widgets Shop</Dialog.Title>
+            </Dialog.Header>
+
+            <Dialog.Body css={dialogStyles.body}>
+              <Tabs.Root defaultValue={categories[0]} variant="unstyled">
+                {/* 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}>
+                        {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={{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={{base: "gray.200", _dark: "whiteAlpha.200"}}
+                               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 => (
+                                <Box
+                                  key={sizeKey}
+                                  as="button"
+                                  css={tabStyles}
+                                  onClick={() => handleAddWidget(widget.id, sizeKey)}
+                                  color={{base: "blue.600", _dark: "blue.300"}}
+                                >
+                                  {/* THE ABBREVIATION ICON: Always visible */}
+                                  <Flex
+                                    align="center"
+                                    justify="center"
+                                    w="24px"
+                                    h="24px"
+                                    flexShrink={0}
+                                    borderRadius="full"
+                                    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>
+                        </Flex>
+                      ))}
+                    </Grid>
+                  </Tabs.Content>
+                ))}
+              </Tabs.Root>
+            </Dialog.Body>
+            <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>
+    </>
+  );
 }
@@ -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>
-  );
-}
@@ -1,7 +0,0 @@
-import { Button } from "@chakra-ui/react";
-
-export function CancelButton ({onCancel}) {
-  return (
-    <Button onClick={onCancel} borderRadius="md">Cancel</Button>
-  )
-}
@@ -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>
-//     );
-// }
@@ -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;
@@ -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>
-//     </>
-//   );
-// }
@@ -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>
-  )
-}
@@ -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>
-  );
-}
@@ -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>
-  )
-}
@@ -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>
-  );
-}
-
@@ -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>
-  )
-}
@@ -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>
-  )
-})
@@ -1,40 +1,37 @@
-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 styles = recipe();
+  const recipe = useSlotRecipe({key: "header"});
+  const styles = recipe();

-    const { user } = useAuthStore();
-    console.log(user);
-    const displayName = user ? (user.fullName || user.username) : "Loading...";
+  const {user} = useAuthStore();
+  console.log(user);
+  const displayName = user ? (user.firstName || user.username) : "Loading...";
+  const avatarname = user ? (user.fullName || user.username) : "Loading...";

-    const displayEmail = user?.email || "LDAP User";
+  const displayEmail = user?.email || "LDAP User";

-    return (
-        <Flex css={styles} justify="space-between" align="center" width="100%">
-            {/* Home Link Logo */}
-            <Button as={NavLink} to="/home" color="color" variant="plain" textStyle="5xl" fontWeight="bold">
-                VDAP
-            </Button>
+  return (
+    <Flex css={styles.root}>
+      <Flex css={styles.search_bar}>
+       <SearchBar placeholder="Enter a volcano to search"/>
+      </Flex>

-            {/* User Profile Section */}
-            <Flex align="center" gap={3} pr={6}>
-                <Stack gap="0" textAlign="right" cursor="default">
-                    <Text color="color" fontWeight="bold" textStyle="lg">{displayName}</Text>
-                    <Text color="fg.muted" textStyle="sm">{displayEmail}</Text>
-                </Stack>
-                <UserAvatarMenu
-                    name={displayName}
-                    // avatar={user.avatar}
-                />
-            </Flex>
-        </Flex>
-    );
+      {/* User Profile Section */}
+      <Flex css={styles.user_info}>
+        <Text>{displayName}</Text>
+        <UserAvatarMenu
+          name={avatarname}
+          // avatar={user.avatar}
+        />
+      </Flex>
+    </Flex>
+  );
 }
@@ -1,74 +1,58 @@
-import { useSlotRecipe, Box, Button, IconButton } 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 { Mountain, House, Earth, MapPin, ShieldUser, Menu } from 'lucide-react';
+import {Mountain, House, Earth, MapPin, ShieldUser, PanelLeftClose, PanelLeftOpen, ChartScatter, Telescope, Map, UserLock} from 'lucide-react';
+import {useSlotRecipe, Box, Button, IconButton, Text, Flex} from "@chakra-ui/react";
+import {ColorModeButton} from "@/components/ui/color-mode.jsx";
+import {NavLink} from "react-router-dom";
+import {useState} from "react";

 const SIDEBAR_DEFAULT_BUTTONS = [
-  { icon: House, name: "Home", url: "/home" },
-  { icon: Earth, name: "Global Map", url: "/global-map" },
-  { icon: MapPin, name: "Regional Map", url: "/regional-map" },
-  { icon: Mountain, name: "Volcano", url: "/volcano" },
-  { icon: ShieldUser, name: "Admin", url: "/admin" } // TODO remove in the future as default should not have admin
+  {icon: House, name: "Home", url: "/home"},
+  {icon: Earth, name: "Global Map", url: "/global-map"},
+  {icon: Map, name: "Regional Map", url: "/regional-map"},
+  {icon: Mountain, name: "Volcano", url: "/volcano"},
+  {icon: Telescope, name: "Data Explorer", url: "/data-explorer"},
+  {icon: UserLock, name: "Admin", url: "/admin"}, // TODO remove in the future as default should not have admin
 ];

 export default function Sidebar() {
  const [isOpen, setIsOpen] = useState(true);
-  const recipe = useSlotRecipe({ key: "sidebar" });
-  const styles = recipe();
-
-  // 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 recipe = useSlotRecipe({key: "sidebar"});
+  const styles = recipe({state: isOpen ? "open" : "closed"});
+  const visibleButtons = SIDEBAR_DEFAULT_BUTTONS; // TODO: call btns here according to users authorization

  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}
-      >
-        {/* Menu Trigger */}
-        <IconButton aria-label="Toggle Sidebar" variant="plain" size="md" onClick={toggleSidebar} width="54px" alignSelf="flex-start"
-        >
-          <Menu />
+    <Box css={styles.root}>
+       {/* Logo Navigates to Home Page */}
+      <Button as={NavLink} to="/home" variant="plain" css={styles.logo}>
+        <Flex>
+          <Text>🌋</Text>
+          <Text css={styles.logo_text}>VDAP</Text>
+        </Flex>
+      </Button>
+
+      {/* Navigation Buttons */}
+      {visibleButtons.map((button) => {
+        const Icon = button.icon;
+        return (
+          <Button as={NavLink} to={button.url} css={styles.buttons}> {/* Navigation buttons are [icon text] */}
+            <Icon/>
+            <Box as="span" css={styles.button_text}>
+              {button.name}
+            </Box>
+          </Button>
+        );
+      })}
+
+      {/* Collapse Sidebar and Theme Footer Buttons */}
+      <Flex css={styles.footer}>
+        <IconButton aria-label="Toggle Sidebar" variant="plain" onClick={toggleSidebar} css={styles.collapse_button}>
+          {isOpen ? <PanelLeftClose /> : <PanelLeftOpen />}
        </IconButton>
-
-        {/* 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}
-                    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 */}
-        <ColorModeButton
-            position="absolute"
-            bottom="4"
-            left="4"
-        />
-      </Box>
+        <Flex css={styles.color_mode_button}>
+          <ColorModeButton />
+        </Flex>
+      </Flex>
+    </Box>
  );
 }
@@ -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')),
-        settingsComponent: lazy(() => import('../components/Widgets/settings/IvansAlertsSettings.jsx')),
+        component: lazy(() => import('../components/widgets/IvansAlerts.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')),
-        settingsComponent: lazy(() => import('../components/Widgets/Settings/RemoteSensingSettings.jsx')),
+        component: lazy(() => import('../components/widgets/RemoteSensing.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')),
-        settingsComponent: lazy(() => import('../components/Widgets/settings/AlertChangeSettings.jsx')),
+        component: lazy(() => import('../components/widgets/AlertChanges.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')),
-        settingsComponent: lazy(() => import('../components/Widgets/settings/PlumeEventsSettings.jsx')),
+        component: lazy(() => import('../components/widgets/PlumeEvents.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')),
-        settingsComponent: lazy(() => import('../components/Widgets/settings/SeismicEventsSettings.jsx')),
+        component: lazy(() => import('../components/widgets/SeismicEvents.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')),
-        settingsComponent: lazy(() => import('../components/Widgets/settings/CommCoorReportSettings.jsx')),
+        component: lazy(() => import('../components/widgets/CommCoorReport.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')),
-        settingsComponent: lazy(() => import('../components/Widgets/settings/VaaMapSettings.jsx')),
+        component: lazy(() => import('../components/widgets/VaaMap.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 }
        }
@@ -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 {
@@ -0,0 +1,190 @@
+import React, { useState, useRef, useEffect } from "react";
+import { Box, Stack, Separator, Center, Spinner, Alert, Flex } from "@chakra-ui/react";
+import { toaster } from "../../components/ui/toaster.jsx"; // Adjust path to your v3 toaster if needed
+
+// Import our newly consolidated engine and presentation components
+import QueryBuilder from "./QueryBuilder.jsx";
+import DataTable from "./DataTable.jsx";
+// import { exportToCSV } from "../utils/csvExport.js";
+
+export default function DataExplorer() {
+  // 1. Core State
+  const [results, setResults] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [allColumns, setAllColumns] = useState([]);
+  const isReadyRef = useRef(false);
+
+  // 2. The Master Query State
+  const [url, setUrl] = useState({
+    source: "",
+    page: 1,
+    columns: [],
+    bundles: [],
+    ordering: "id",
+  });
+
+  // 3. API & URL Logic
+  const buildUrlParams = () => {
+    const { source, page, columns, bundles, ordering } = url;
+    const params = new URLSearchParams();
+
+    if (bundles.length > 0) {
+      // Scrub out incomplete filters before sending to the backend
+      const cleanBundles = bundles.map(bundle => {
+        const validFilters = bundle.filters
+          .filter(f => f.column && f.type && f.value)
+          .map(({ id, ...rest }) => rest);
+        return { ...bundle, filters: validFilters };
+      }).filter(bundle => bundle.filters.length > 0); // Only send bundles that actually have filters
+
+      if (cleanBundles.length > 0) {
+        params.append("bundles", JSON.stringify(cleanBundles));
+      }
+    }
+
+    if (source) params.append("source", source);
+    if (columns?.length > 0) params.append("columns", columns.join(","));
+    if (ordering) params.append("ordering", ordering);
+    if (page) params.append("page", page);
+
+    return params.toString();
+  };
+
+  const getColumns = async (endpoint) => {
+    setError(null);
+    isReadyRef.current = false; // does this need to be set to true at the end?
+    try {
+      // 🚨 Relative pathing so Traefik proxy handles it
+      const response = await fetch(endpoint);
+      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+
+      const data = await response.json();
+      setAllColumns(data);
+      setUrl({ ...url, columns: Object.keys(data.types), source: data.view }); // changed it from (prev => {...prev, columns: __, source: __ })
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const pullTable = async () => {
+    setIsLoading(true);
+    setError(null);
+
+    if (!url.source) {
+      setError("Please select a source (table) before fetching data.");
+      setIsLoading(false);
+      return;
+    }
+
+    try {
+      // 🚨 Relative pathing for your production API
+      const response = await fetch(`/api/v3/table_view?${buildUrlParams()}`);
+      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+
+      const data = await response.json();
+      setResults(data);
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Auto-fetch when pagination, columns, or sorting changes (but skip first render)
+  useEffect(() => {
+    if (! isReadyRef.current) {
+      isReadyRef.current = false; // why are we resetting the readyRef back to false since it already is false?
+      return;
+    }
+    pullTable();
+  }, [url.page, url.columns, url.ordering]);
+
+  // 4. Export Utility
+  const handleDownloadCSV = () => {
+    if (results?.results?.length > 0) {
+      const timestamp = new Date().toISOString().slice(0, 10);
+      const filename = `${url.source}_${timestamp}.csv`;
+      // exportToCSV(results.results, filename);
+      toaster.create({
+        title: "Dummy Success Toaster (csv download fn has been disabled for now)",
+        description: `Downloaded ${results.results.length} records as CSV`,
+        type: "success",
+      });
+    } else {
+      toaster.create({
+        title: "No Data",
+        description: "No results to download",
+        type: "error",
+      });
+    }
+  };
+
+  // 5. Render Shell
+  return (
+    // 🚨 Stripped hardcoded #FFFBFA background.
+    // This Flex container will perfectly fill your new Sidebar Route canvas.
+    <Flex p={8} flex="1" direction="column" overflowY="auto" bg="transparent" h="100%">
+      <Stack direction="column" gap={6} align="stretch" w="100%">
+
+        {/* The Engine */}
+        <QueryBuilder
+          url={url}
+          setUrl={setUrl}
+          allColumns={allColumns}
+          getColumns={getColumns}
+          pullTable={pullTable}
+          isLoading={isLoading}
+          isReadyRef={isReadyRef}
+        />
+
+        {results && <Separator borderColor="widgetBadgeBg" />}
+
+        {/* Global Loading & Error States */}
+        {isLoading && (
+          <Center p={10}>
+            <Spinner color="blue.500" size="xl" thickness="4px" />
+          </Center>
+        )}
+
+        {error && (
+          <Alert.Root status="error" mt={4} bg="red.900" color="white">
+            <Alert.Indicator />
+            <Alert.Content>
+              <Alert.Title>Error Fetching Data</Alert.Title>
+              <Alert.Description>{error}</Alert.Description>
+            </Alert.Content>
+          </Alert.Root>
+        )}
+
+        {/* The Display (Table, Pagination, Download, Columns) */}
+        {results && !isLoading && !error && (
+          <Box w="100%">
+            {results.results.length > 0 ? (
+              <DataTable
+                data={results.results}
+                count={results.count}
+                url={url}
+                setUrl={setUrl}
+                allColumns={allColumns.types}
+                isLoading={isLoading}
+                onDownload={handleDownloadCSV}
+              />
+            ) : (
+              <Alert.Root status="warning" mt={4} bg="widgetItemExpandedBg" color="text">
+                <Alert.Indicator />
+                <Alert.Content>
+                  <Alert.Title>No Results Found</Alert.Title>
+                  <Alert.Description>Try loosening your filter criteria.</Alert.Description>
+                </Alert.Content>
+              </Alert.Root>
+            )}
+          </Box>
+        )}
+
+      </Stack>
+    </Flex>
+  );
+};
@@ -0,0 +1,220 @@
+import React from "react";
+import {
+  Button,
+  ButtonGroup,
+  Table,
+  HoverCard,
+  Text,
+  Flex,
+  Menu,
+  Portal,
+  useCheckboxGroup,
+  IconButton,
+  Pagination,
+} from "@chakra-ui/react";
+import { ChevronDown, ChevronLeft, ChevronRight, Download, Files, ClipboardPaste } from 'lucide-react';
+// import { LuChevronDown, LuChevronLeft, LuChevronRight } from "react-icons/lu";
+// import { FiDownload, FiCopy, FiClipboard } from "react-icons/fi";
+
+// ============================================================================
+// 1. COLUMN SELECTOR (Toggles visible columns)
+// ============================================================================
+const ColumnSelector = ({ allColumns, url, setUrl, isLoading }) => {
+  const group = useCheckboxGroup({ defaultValue: url.columns || Object.keys(allColumns) });
+
+  return (
+    <Menu.Root closeOnSelect={false}>
+      <Menu.Trigger asChild>
+        <Button variant="surface" bg="widgetBadgeBg" color="text" _hover={{ bg: "widgetItemExpandedBg" }}>
+          Show Columns <ChevronDown />
+        </Button>
+      </Menu.Trigger>
+      <Portal>
+        <Menu.Positioner>
+          <Menu.Content bg="widgetItemBg" borderColor="widgetBadgeBg">
+            <Menu.ItemGroup>
+              <Menu.ItemGroupLabel color="widgetTextMuted">Available Columns</Menu.ItemGroupLabel>
+              {Object.keys(allColumns).map((colName) => (
+                <Menu.CheckboxItem
+                  key={colName}
+                  value={colName}
+                  checked={group.value.includes(colName)}
+                  onCheckedChange={() => group.toggleValue(colName)}
+                  color="text"
+                >
+                  <Menu.ItemIndicator />
+                  {colName}
+                </Menu.CheckboxItem>
+              ))}
+            </Menu.ItemGroup>
+            <Menu.Item
+              onClick={() => setUrl((prev) => ({ ...prev, columns: [...group.value] }))}
+              p="2"
+            >
+              <Button size="sm" w="100%" loading={isLoading} bg="blue.600" color="white" _hover={{ bg: "blue.500" }}>
+                Apply Columns
+              </Button>
+            </Menu.Item>
+          </Menu.Content>
+        </Menu.Positioner>
+      </Portal>
+    </Menu.Root>
+  );
+};
+
+// ============================================================================
+// 2. PAGE FOOTER (Pagination & Query Saving)
+// ============================================================================
+const PageFooter = ({ count, pageSize, url, setUrl }) => {
+  const page = url.page || 1;
+
+  const handleSaveQuery = () => {
+    navigator.clipboard.writeText(JSON.stringify(url)).then(() => {
+      alert("Query copied to clipboard!"); // Optional: replace with your Toast
+    });
+  };
+
+  const handlePasteQuery = async () => {
+    try {
+      const text = await navigator.clipboard.readText();
+      const clipBoardText = JSON.parse(text);
+      setUrl(clipBoardText);
+    } catch (err) {
+      console.error("Invalid clipboard content", err);
+      alert("Failed to paste. Make sure you copied a valid query.");
+    }
+  };
+
+  return (
+    <Flex w="100%" justify="space-between" align="center" mt="4">
+      {/* Query Save/Paste Tools */}
+      <ButtonGroup size="sm" attached>
+        <Button onClick={handleSaveQuery} variant="outline" borderColor="widgetBadgeBg" color="text">
+          <Files style={{ marginRight: "8px" }} /> Save Query
+        </Button>
+        <Button onClick={handlePasteQuery} variant="outline" borderColor="widgetBadgeBg" color="text">
+          <ClipboardPaste style={{ marginRight: "8px" }} /> Paste Query
+        </Button>
+      </ButtonGroup>
+
+      {/* Pagination Controls */}
+      <Pagination.Root count={count} pageSize={pageSize} page={page}>
+        <ButtonGroup variant="ghost" size="sm">
+          <Pagination.PrevTrigger asChild>
+            <IconButton onClick={() => setUrl((prev) => ({ ...prev, page: page - 1 }))} isDisabled={page <= 1} color="text">
+              <ChevronLeft />
+            </IconButton>
+          </Pagination.PrevTrigger>
+
+          <Pagination.Items
+            render={(pageItem) => (
+              <IconButton
+                key={pageItem.value}
+                variant={pageItem.value === page ? "surface" : "ghost"}
+                bg={pageItem.value === page ? "widgetBadgeBg" : "transparent"}
+                color="text"
+                onClick={() => setUrl((prev) => ({ ...prev, page: pageItem.value }))}
+              >
+                {pageItem.value}
+              </IconButton>
+            )}
+          />
+
+          <Pagination.NextTrigger asChild>
+            <IconButton onClick={() => setUrl((prev) => ({ ...prev, page: page + 1 }))} isDisabled={page * pageSize >= count} color="text">
+              <ChevronRight />
+            </IconButton>
+          </Pagination.NextTrigger>
+        </ButtonGroup>
+      </Pagination.Root>
+    </Flex>
+  );
+};
+
+// ============================================================================
+// 3. MAIN DATA TABLE (The Exported Presentation Wrapper)
+// ============================================================================
+const DataTable = React.memo(({ data, count, url, setUrl, allColumns, isLoading, onDownload }) => {
+  const columns = Object.keys(data[0] || {});
+
+  const handleSort = (col) => {
+    let order = col;
+    if (url.ordering === col) {
+      order = `-${col}`;
+    }
+    setUrl((prev) => ({ ...prev, ordering: order }));
+  };
+
+  return (
+    <Flex direction="column" w="100%" gap="4">
+      {/* Top Table Toolbar */}
+      <Flex w="100%" justify="space-between" align="center">
+        {allColumns && (
+          <ColumnSelector allColumns={allColumns} url={url} setUrl={setUrl} isLoading={isLoading} />
+        )}
+        <Button onClick={onDownload} variant="outline" borderColor="widgetBadgeBg" color="text" size="sm" _hover={{ bg: "widgetItemExpandedBg" }}>
+          <Download style={{ marginRight: "8px" }} /> Download CSV
+        </Button>
+      </Flex>
+
+      {/* Main Scrollable Table */}
+      <Table.ScrollArea borderWidth="1px" borderColor="widgetBadgeBg" rounded="md" maxH="65vh" bg="widgetItemBg">
+        <Table.Root stickyHeader showColumnBorder size="sm">
+          <Table.Header>
+            <Table.Row bg="widgetItemExpandedBg">
+              {columns.map((col) => (
+                <Table.ColumnHeader key={col} color="text" py="2">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    color="text"
+                    onClick={() => handleSort(col)}
+                    w="100%"
+                    justifyContent="flex-start"
+                    _hover={{ bg: "widgetBadgeBg" }}
+                  >
+                    {col}{" "}
+                    <ChevronDown
+                      style={{
+                        opacity: url.ordering === col || url.ordering === `-${col}` ? 1 : 0,
+                        transform: url.ordering === col ? "rotate(180deg)" : "rotate(0deg)",
+                        transition: "transform 0.2s",
+                        marginLeft: "8px",
+                      }}
+                    />
+                  </Button>
+                </Table.ColumnHeader>
+              ))}
+            </Table.Row>
+          </Table.Header>
+
+          <Table.Body>
+            {data.map((row, i) => (
+              <Table.Row key={i} _hover={{ bg: "widgetItemExpandedBg" }}>
+                {columns.map((col) => (
+                  <Table.Cell key={col} maxW="150px" textAlign="start" truncate color="text" borderColor="widgetBadgeBg">
+                    <HoverCard.Root>
+                      <HoverCard.Trigger asChild>
+                        <span style={{ cursor: "pointer" }}>{row[col]}</span>
+                      </HoverCard.Trigger>
+                      <HoverCard.Positioner>
+                        <HoverCard.Content p="4" maxW="400px" whiteSpace="normal" wordBreak="break-word" rounded="md" shadow="lg" bg="widgetItemExpandedBg" color="text">
+                          <Text>{row[col]}</Text>
+                        </HoverCard.Content>
+                      </HoverCard.Positioner>
+                    </HoverCard.Root>
+                  </Table.Cell>
+                ))}
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table.Root>
+      </Table.ScrollArea>
+
+      {/* Bottom Pagination Footer */}
+      <PageFooter count={count} pageSize={50} url={url} setUrl={setUrl} />
+    </Flex>
+  );
+});
+
+export default DataTable;
@@ -0,0 +1,318 @@
+import React, { useRef } from "react";
+import { Button, Stack, Flex, Field, NativeSelect, Input, HoverCard, Text, NumberInput, Box } from "@chakra-ui/react";
+import { Plus, CircleMinus, Files, ClipboardPaste, Trash } from 'lucide-react';
+// import { GrAdd, GrSubtractCircle } from "react-icons/gr";
+// import { FaCopy, FaPaste, FaTrash } from "react-icons/fa";
+
+// ============================================================================
+// 1. FILTER ROW (The individual criteria inputs)
+// ============================================================================
+const FilterRow = React.memo(({ filter, columns, setUrl, bundleId, copiedFilter }) => {
+  const types = {
+    AutoField: ["=", "<", ">", "<=", ">="],
+    IntegerField: ["=", "<", ">", "<=", ">="],
+    CharField: ["=", "contains"],
+    DateTimeField: ["range"],
+  };
+
+  const columnType = columns[filter.column];
+  const operators = types[columnType] || ["="]; // default to equals if unknown
+
+  const handleRemoveFilter = () => {
+    setUrl(prev => ({
+      ...prev,
+      bundles: prev.bundles.map((bundle) =>
+        bundle.id === bundleId ?
+          { ...bundle, filters: bundle.filters.filter((fil) => fil.id !== filter.id) }
+          : bundle
+      ),
+    }));
+  };
+
+  const updateFilterField = (field, value) => {
+    setUrl(prev => ({
+      ...prev,
+      bundles: prev.bundles.map(bundle =>
+        bundle.id === bundleId
+          ? {
+            ...bundle,
+            filters: bundle.filters.map(fil =>
+              fil.id === filter.id ? { ...fil, [field]: value } : fil
+            ),
+          }
+          : bundle
+      ),
+    }));
+  };
+
+  const handleColumnChange = (newCol) => {
+    setUrl((prev) => ({
+      ...prev,
+      bundles: prev.bundles.map((bundle) =>
+        bundle.id === bundleId
+          ? {
+            ...bundle,
+            filters: bundle.filters.map((fil) =>
+              fil.id === filter.id
+                ? { ...fil, column: newCol, type: columns[newCol], operator: null, value: null }
+                : fil
+            ),
+          }
+          : bundle
+      ),
+    }));
+  };
+
+  const handleDateChange = (type, newDate) => {
+    const currentValue = filter.value || { start: null, end: null };
+    const updatedValue = { ...currentValue, [type]: newDate || null };
+    updateFilterField("value", updatedValue);
+    updateFilterField("operator", "range");
+  };
+
+  return (
+    <Flex gap="2" align="center">
+      {/* Remove button */}
+      <HoverCard.Root positioning={{ placement: "top" }}>
+        <HoverCard.Trigger asChild>
+          <Button onClick={handleRemoveFilter} variant="ghost" size="sm" color="red.400">
+            <CircleMinus />
+          </Button>
+        </HoverCard.Trigger>
+        <HoverCard.Positioner>
+          <HoverCard.Content p="2" bg="widgetItemExpandedBg"><Text fontSize="sm">Remove Filter</Text></HoverCard.Content>
+        </HoverCard.Positioner>
+      </HoverCard.Root>
+
+      {/* Copy / Paste Buttons */}
+      <HoverCard.Root positioning={{ placement: "top" }}>
+        <HoverCard.Trigger asChild>
+          <Button onClick={() => (copiedFilter.current = { ...filter })} variant="ghost" size="sm" color="text">
+            <Files />
+          </Button>
+        </HoverCard.Trigger>
+        <HoverCard.Positioner>
+          <HoverCard.Content p="2" bg="widgetItemExpandedBg"><Text fontSize="sm">Copy Filter</Text></HoverCard.Content>
+        </HoverCard.Positioner>
+      </HoverCard.Root>
+
+      <HoverCard.Root positioning={{ placement: "top" }}>
+        <HoverCard.Trigger asChild>
+          <Button
+            onClick={() => {
+              if (copiedFilter.current) {
+                setUrl((prev) => ({
+                  ...prev,
+                  bundles: prev.bundles.map((bundle) =>
+                    bundle.id === bundleId
+                      ? {
+                        ...bundle,
+                        filters: bundle.filters.map((fil) =>
+                          fil.id === filter.id ? { ...copiedFilter.current, id: filter.id } : fil
+                        ),
+                      }
+                      : bundle
+                  ),
+                }));
+              }
+            }}
+            variant="ghost"
+            size="sm"
+            color="text"
+          >
+            <ClipboardPaste />
+          </Button>
+        </HoverCard.Trigger>
+        <HoverCard.Positioner>
+          <HoverCard.Content p="2" bg="widgetItemExpandedBg"><Text fontSize="sm">Paste Filter</Text></HoverCard.Content>
+        </HoverCard.Positioner>
+      </HoverCard.Root>
+
+      {/* Column selector */}
+      <Field.Root w={columnType === "DateTimeField" ? "30%" : "30%"}>
+        <NativeSelect.Root>
+          <NativeSelect.Field
+            bg="widgetItemBg"
+            color="text"
+            value={filter.column ?? ""}
+            onChange={(e) => handleColumnChange(e.target.value)}
+          >
+            <option value="" disabled hidden>Select Column</option>
+            {Object.keys(columns).map((colName) => (
+              <option key={colName} value={colName}>{colName}</option>
+            ))}
+          </NativeSelect.Field>
+          <NativeSelect.Indicator />
+        </NativeSelect.Root>
+      </Field.Root>
+
+      {/* Operator selector */}
+      <Field.Root w={columnType === "DateTimeField" ? "20%" : "20%"}>
+        {columnType === "DateTimeField" ? (
+          <Input type="date" bg="widgetItemBg" color="text" value={filter.value?.start || ""} onChange={(e) => handleDateChange("start", e.target.value)} />
+        ) : (
+          <NativeSelect.Root>
+            <NativeSelect.Field bg="widgetItemBg" color="text" value={filter.operator ?? ""} onChange={(e) => updateFilterField("operator", e.target.value)}>
+              <option value="" disabled hidden>Operator</option>
+              {filter.type && operators.map((op) => <option key={op} value={op}>{op}</option>)}
+            </NativeSelect.Field>
+            <NativeSelect.Indicator />
+          </NativeSelect.Root>
+        )}
+      </Field.Root>
+
+      {/* Value input */}
+      <Field.Root w={columnType === "DateTimeField" ? "20%" : "50%"}>
+        {columnType === "DateTimeField" ? (
+          <Input type="date" bg="widgetItemBg" color="text" value={filter.value?.end || ""} onChange={(e) => handleDateChange("end", e.target.value)} />
+        ) : columnType === "IntegerField" || columnType === "AutoField" ? (
+          <NumberInput.Root value={filter.value ?? ""} onValueChange={(e) => updateFilterField("value", e.value)}>
+            <NumberInput.Input placeholder="Value" bg="widgetItemBg" color="text" />
+          </NumberInput.Root>
+        ) : (
+          <Input placeholder="Value" bg="widgetItemBg" color="text" value={filter.value ?? ""} onChange={(e) => updateFilterField("value", e.target.value)} />
+        )}
+      </Field.Root>
+    </Flex>
+  );
+});
+
+// ============================================================================
+// 2. FILTER BUNDLES (The AND logic groups)
+// ============================================================================
+const FilterBundle = ({ bundle, columns, url, setUrl, copiedFilter }) => {
+  const handleRemoveBundle = () => {
+    setUrl(prev => ({
+      ...prev,
+      bundles: prev.bundles.filter(b => b.id !== bundle.id)
+    }));
+  };
+
+  const handleAddFilter = () => {
+    setUrl(prev => ({
+      ...prev,
+      bundles: prev.bundles.map(b =>
+        b.id === bundle.id ? ({
+          ...b,
+          filters: [
+            ...b.filters,
+            {
+              id: crypto.randomUUID(),
+              column: null,
+              type: null,
+              operator: null,
+              value: null
+            }
+          ]
+        }) : (b)
+      ),
+    }));
+  };
+
+  return (
+    <Stack bg="widgetItemBg" borderWidth="1px" borderColor="widgetBadgeBg" borderRadius="lg" p="3" spacing="3">
+      <Flex justify="space-between" align="center">
+        <Input placeholder="Group Name (Optional)" maxW="200px" size="sm" variant="flushed" color="text" />
+        <Button onClick={handleRemoveBundle} variant="ghost" size="sm" color="red.400">
+          <Trash />
+        </Button>
+      </Flex>
+
+      <Stack spacing="2">
+        {bundle.filters.map((filter) => (
+          <FilterRow key={filter.id} filter={filter} columns={columns} setUrl={setUrl} bundleId={bundle.id} copiedFilter={copiedFilter} />
+        ))}
+        <Button onClick={handleAddFilter} variant="outline" size="sm" color="text" borderColor="widgetBadgeBg" _hover={{ bg: "widgetBadgeBg" }}>
+          Add Filter <Plus />
+        </Button>
+      </Stack>
+    </Stack>
+  );
+};
+
+// ============================================================================
+// 3. MAIN QUERY BUILDER (The Engine Wrapper)
+// ============================================================================
+export default function QueryBuilder({ url, setUrl, allColumns, getColumns, pullTable, isLoading, isReadyRef }) {
+  const copiedFilter = useRef(null);
+
+  const handleAddBundle = () => {
+    setUrl(prev => ({
+      ...prev,
+      bundles: [
+        ...prev.bundles,
+        {
+          id: crypto.randomUUID(),
+          filters: [{
+            id: crypto.randomUUID(),
+            column: null,
+            type: null,
+            operator: null,
+            value: null
+          }],
+        },
+      ],
+    }));
+  };
+
+  return (
+    <Flex direction="column" gap="4" w="100%" p="4" bg="transparent">
+      {/* Top Controls: Source & Execute */}
+      <Flex gap="4" align="flex-end">
+        <Field.Root maxW="300px">
+          <Field.Label color="text">Data Source</Field.Label>
+          <NativeSelect.Root>
+            <NativeSelect.Field
+              bg="widgetItemBg"
+              color="text"
+              value={url.source || ""}
+              onChange={(e) => {
+                const selectedView = e.target.value;
+                setUrl(prev => ({ ...prev, source: selectedView }));
+                // 🚨 FIXED: Now uses relative pathing for the production API
+                const endpoint = "/api/v3/view_dash_event_search_columns";
+                getColumns(endpoint);
+              }}
+            >
+              <option value="" disabled hidden>Select View</option>
+              <option value="main">Main View</option>
+              {/*<option value="test">Test View</option>*/}
+            </NativeSelect.Field>
+            <NativeSelect.Indicator />
+          </NativeSelect.Root>
+        </Field.Root>
+
+        <Button
+          bg="blue.600"
+          color="white"
+          _hover={{ bg: "blue.500" }}
+          loading={isLoading}
+          onClick={() => {
+            isReadyRef.current = true;
+            pullTable();
+          }}
+        >
+          Execute Search
+        </Button>
+      </Flex>
+
+      {/* Filter Builder Engine */}
+      {url.source && allColumns?.types && (
+        <Stack w="100%" gap="4">
+          <Text fontSize="lg" fontWeight="bold" color="text">Filters</Text>
+
+          <Box w="100%" maxH="400px" overflow="auto">
+            <Stack w="100%" gap="4" pr="4">
+              {url.bundles.map((bundle) => (
+                <FilterBundle key={bundle.id} bundle={bundle} columns={allColumns.types} url={url} setUrl={setUrl} copiedFilter={copiedFilter} />
+              ))}
+              <Button onClick={handleAddBundle} variant="outline" borderColor="widgetBadgeBg" color="text" _hover={{ bg: "widgetBadgeBg" }}>
+                New Filter Group <Plus />
+              </Button>
+            </Stack>
+          </Box>
+        </Stack>
+      )}
+    </Flex>
+  );
+}
@@ -1,64 +1,61 @@
-import { HStack, Flex, Box } 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";
+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 location = useLocation();
-  const isPersonalDashboard = location.pathname === "/home" || location.pathname === "/home/";
+  const glassTabsRecipe = useRecipe({key: "glassTab"});
+  const homeRecipe = useSlotRecipe({key: "home"});
+  const glassTabsStyle = glassTabsRecipe();
+  const homeStyle = homeRecipe();

-  // 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",
-    }
-  };
+  const location= useLocation();
+  const isPersonalDashboard= location.pathname === "/home" || location.pathname === "/home/";

  return (
-      <Flex direction="column" height="100%" width="100%">
-
-        {/* 2. 🛠️ SUB HEADER: Matches your original padding and background */}
-        <Flex as="header" position="sticky" top="0" zIndex="dropdown" bg="base200" p={5} align="center" justify="space-between" width="100%">
-
-          {/* 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 */}
-          <HStack width="258px" justifyContent="flex-end">
-            {isPersonalDashboard ? (
-                <>
-                  <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 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>
+            );
+          })}

+          {/* The Settings button is now inline with the tabs and only renders on the personal dashboard */}
+          {isPersonalDashboard && <SettingsButton/>}
        </Flex>

-        {/* 3. 🛠️ CANVAS AREA */}
-        <Flex flex="1" overflow="auto">
-          <Outlet />
-        </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">
+          {/* Future global controls go here */}
+        </HStack>
      </Flex>
+
+      {/* TABS CONTENT */}
+      <Flex css={homeStyle.body}>
+        <Outlet/>
+      </Flex>
+
+    </Flex>
  );
 }
@@ -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,26 @@ export default function MyDashboard() {
  // 🔒 Safety lock to prevent infinite re-renders
  const hasHydrated = useRef(false);

-  // ==========================================
-  // INITIAL LOAD: Grab data from Django
-  // ==========================================
+  // 1. Pull the global slot recipes
+  const widgetRecipe = useSlotRecipe({ key: "widget" });
+  const popoverRecipe = useSlotRecipe({ key: "glassPopover" });
+
+  // 2. Pass the editing state directly into the widget recipe!
+  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;

      // 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)) {
-        setWidgets(savedLayout);
-      }
-
+      if (Array.isArray(savedLayout)) setWidgets(savedLayout);
      hasHydrated.current = true;
    }
  }, [user, setWidgets]);

-
  // 🛠️ Format the data for RGL
  const rglLayout = widgets.map(w => ({
    i: w.id,
@@ -58,10 +55,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
+  // 4. The component mapper
  const renderWidget = (widget) => {
    const registryEntry = WIDGET_REGISTRY[widget.type];

@@ -72,38 +69,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}>
-
-          {/* THE TITLE BAR */}
-          <Flex
-            justify="space-between"
-            align="center"
-            px={3}
-            py={2}
-          >
-            <Text color={titleColor} fontWeight="semibold" fontSize="md" isTruncated>
+        <>
+          <Box css={widgetStyles.header}>
+            <Text>
              {registryEntry.name}
            </Text>

-            {/* THE SETTINGS ELLIPSIS */}
-            {SettingsUI ? (
+            {/* WIDGET SETTINGS BUTTON (ELLIPSES) */}
+            {SettingsUI && (
              <Popover.Root positioning={{placement: "bottom-end"}}>
                <Popover.Trigger asChild>
-                  <IconButton
-                    size="xs"
-                    variant="ghost"
-                    color="gray.400"
-                    _hover={{color: "white", bg: "gray.700"}}
-                    aria-label="Widget Settings"
-                  >
+                  <IconButton size="xs" variant="ghost" 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.Content bg="gray.50" p={4} boxShadow="xl" borderRadius="md">
+                <Popover.Positioner zIndex={1}>
+                  <Popover.Content css={popoverStyles.content}>
                    <Suspense fallback={<Spinner size="sm"/>}>
                      <SettingsUI
                        widgetId={widget.id}
@@ -113,25 +96,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={widgetStyles.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={widgetStyles.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 +125,31 @@ 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"
-            borderRadius="md"
-            boxShadow={isEditing ? "outline" : "sm"} // Visual cue when editing
-            border={isEditing ? "2px dashed gray" : "1px solid"}
-            borderColor={isEditing ? "gray.400" : "gray.200"}
-            overflow="hidden"
-            cursor={isEditing ? "grab" : "default"}
-            position="relative" // 3. REQUIRED so the absolute button stays inside this box
+            css={widgetStyles.root}
+            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 +158,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={widgetStyles.body} align="center" justify="center">
                <Spinner size="md" color="blue.400" thickness="3px"/>
              </Flex>
            }>
              {renderWidget(widget)}
            </Suspense>
-
          </Box>
        ))}
      </ResponsiveGridLayout>
@@ -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,
@@ -1,114 +1,546 @@
-import { defineSlotRecipe, createSystem, defaultConfig, defineConfig, defineRecipe } from "@chakra-ui/react";
+import {defineSlotRecipe, createSystem, defaultConfig, defineConfig, defineRecipe} from "@chakra-ui/react";

-// RECIPES
-const headerRecipe = defineRecipe({
-  base: {
-    bg: "{base200}",
-    color: "text",
-    width: "100%",
-    height: "100%",
-    borderBottom: "1px solid",
-    borderBottomColor:"{border}",
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-  }
-});
+// REUSABLE GLASS SURFACE
+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",
+};

-const dashboardRecipe = defineRecipe({
-  base: {
-    bg: "{base200}"
-  }
-});
+/* ==========================================================================
+   RECIPES
+   ========================================================================== */

-const canvasRecipe = defineRecipe({
-  base: {
-    bg: "{base200}",
-    zIndex: "-1",
-    color: "{text}"
-  }
-});
-
-const sidebarRecipe = defineSlotRecipe({
-  slots: ["root", "close_button", "buttons", "dark_mode_button"],
+// 1. Header
+const headerRecipe = defineSlotRecipe({
+  slots: ["root", "search_bar", "user_info"],
  base: {
    root: {
-      bg: "{base200}",
-      borderRight: "1px solid",
-      borderColor: "{border}", 
+      bg: "transparent",
+      color: "text",
      width: "100%",
      height: "100%",
      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",
+      },
+    },
+  },
+});
+
+// 2. Sidebar
+const sidebarRecipe = defineSlotRecipe({
+  slots: [
+    "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%)",
+        _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",
+      width: "100%",
+      height: "calc(100% - 16px)",
+      margin: "8px",
+      display: "flex",
      flexDirection: "column",
-      justifyContent: "start", 
-      alignItems: "start",
-      gap: 2,
-      p: 2,
+      position: "relative",
+      justifyContent: "start",
+      alignItems: "stretch",
+      gap: 4,
+      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}"},
-      fontSize: "xl",
+
+      justifyContent: "flex-start",
+      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: "800",
+        },
+      },
+
+      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" },
+          "& 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",
+        },
+      },
+    },
+  },
+  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({
-  slots: ["root", "header", "canvas"],
+// 3. Dashboard Shell
+const dashboardRecipe = defineRecipe({
  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",
+    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",
    }
  }
 });

+// 4. Home Page Tabs
+const homeRecipe = defineSlotRecipe({
+  slots: ["root", "header", "body"],
+  base: {
+    root: {
+      flexDirection: "column",
+      height: "100%",
+      width: "100%",
+    },
+    header: {
+      // Flex contianer as a header that contains all the tabs
+      width: "100%",
+      align: "center",
+      justify: "space-between",
+      top: "0",
+      p: 5,
+      position: "sticky",
+      zIndex: "dropdown",
+      bg: "transparent",
+
+      // THE TABS
+      // Flex container renders as div for all the buttons within the header
+      "& > div": {
+        alignItems: "center",
+        gap: 2,
+      },
+    },
+    body: {
+      flex: 1,
+      overflow: "auto",
+    },
+  },
+});
+
+// 5. Dashboard Widget Card
+const widgetRecipe = defineSlotRecipe({
+  slots: ["root", "header", "body"],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      position: "relative",
+      ...glassSurface,
+      width: "100%",
+      height: "100%",
+      borderRadius: "3xl",
+      overflow: "hidden",
+    },
+    header: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      px: 3,
+      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},
+  },
+  variants: {
+    mode: {
+      editing: {
+        root: {
+          boxShadow: "outline",
+          borderStyle: "dashed",
+          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)"
+        },
+      },
+    },
+  },
+});
+
+// 6. Pill/Glass Expanding Tab Button
+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",
+      },
+    },
+  },
+});
+
+/* ==========================================================================
+   RAW WIDGET COLORS (For Canvas/Plotly libraries that reject CSS variables)
+   ========================================================================== */
+export const rawWidgetColors = {
+  light: {
+    text: "#000000",
+    muted: "#4A5568", // gray.600
+    grid: "rgba(0, 0, 0, 0.1)",
+  },
+  dark: {
+    text: "#FFFFFF",
+    muted: "#A0AEC0", // gray.400
+    grid: "rgba(255, 255, 255, 0.15)",
+  }
+};
+
+/* ==========================================================================
+   CONFIG & SYSTEM
+   ========================================================================== */
 const config = defineConfig({
  globalCss: {
    ".react-grid-placeholder": {
-    background: "#c0d2e3ff !important",
-    borderColor: "#a9b6c2ff !important",
-    boxShadow: "0 0 10px #c0d2e3ff !important",
-    opacity: "1 !important",
-    borderRadius: "5px",
-    _dark: {
-      background: "#393c3fff !important",
-      borderColor: "#000000ff !important",
-      boxShadow: "0 0 10px #16181bff !important",
+      background: "#c0d2e3ff !important",
+      borderColor: "#a9b6c2ff !important",
+      boxShadow: "0 0 10px #c0d2e3ff !important",
      opacity: "1 !important",
+      borderRadius: "5px",
+      _dark: {
+        background: "#393c3fff !important",
+        borderColor: "#000000ff !important",
+        boxShadow: "0 0 10px #16181bff !important",
+        opacity: "1 !important",
      },
    },
    ".react-resizable-handle-se": {
@@ -134,36 +566,14 @@ const config = defineConfig({
    "::-webkit-scrollbar-track": {
      background: "transparent",
    },
-    // '.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': {
+    ".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-control-attribution': {
-      _dark: {
-        filter: "invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)",
-      }
-    },
-    '.leaflet-container': {
+    ".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"
    },
@@ -171,31 +581,43 @@ const config = defineConfig({
  theme: {
    semanticTokens: {
      colors: {
-        base100: { value: {base: "#f6f9faff", _dark: "#1617199e"}},
-        base200: { value: {base: "#e6ecf1ff", _dark: "#242424"}},
-        base300: { value: {base: "#d3dae4ff", _dark: "#0a0b0bff"}},
-        primary: { value: {base: "#2B98F8", _dark: "#2B98F8"}},
-        primaryLt: { value: {base: "#98cdffff", _dark: "#98cdffff"}},
-        secondaryBG: { value: {base: "#EDF1F1", _dark: "#121212"}},
-        border: {value: {base: "#000000", _dark: "#cbcbcb84"}},
-        text: {value: {base: "#000000", _dark: "lightgrey"}},
-        textInverted: {value: "white"},
-        icon: {value: {base: "#000000", _dark: "lightgrey"}},
+        text: { value: { base: "#000000", _dark: "#FFFFFF" } },
+        textInverted: { value: { base: "#000000", _dark: "#FFFFFF" } }, // Fixed: Properly inverted
+        MainBackground: { value: { base: "#F9F9F9", _dark: "#141414" } },
+        titleColor: { value: { base: "gray.800", _dark: "#FFFFFF" } },
+        iconColor: { value: { base: "gray.600", _dark: "gray.300" } }, // Fixed: Visible in dark mode
+        glassSeperator: { value: { base: "#0000001A", _dark: "#FFFFFF3F" } },
+        gooeyButtonBackground: {value: {base: "rgba(255, 255, 255, 0.1)", _dark: "rgba(255, 255, 255, 0.1)"}},
+
+        // WIDGET SPECIFIC VALUES
+        widgetItemBg: { value: { base: "rgba(0, 0, 0, 0.04)", _dark: "rgba(255, 255, 255, 0.05)" } },
+        widgetItemExpandedBg: { value: { base: "rgba(0, 0, 0, 0.08)", _dark: "rgba(0, 0, 0, 0.3)" } },
+        widgetBadgeBg: { value: { base: "rgba(255, 255, 255, 0.6)", _dark: "rgba(0, 0, 0, 0.5)" } },
+        widgetTextMuted: { value: { base: "gray.600", _dark: "gray.400" } },
+
+        // ALERT COLORS
+        alertRed: { value: { base: "red.600", _dark: "red.400" } },
+        alertOrange: { value: { base: "orange.600", _dark: "orange.400" } },
+        alertYellow: { value: { base: "yellow.600", _dark: "yellow.400" } },
+        alertGreen: { value: { base: "green.600", _dark: "green.400" } },
      },
    },
    tokens: {
      fonts: {
-        body: { value: "system-ui, sans-serif" },
+        body: {value: "system-ui, sans-serif"},
      },
    },
    recipes: {
-      header: headerRecipe,
      dashboard: dashboardRecipe,
-      canvas: canvasRecipe,
+      glassTab: glassTabRecipe,
    },
    slotRecipes: {
+      header: headerRecipe,
      sidebar: sidebarRecipe,
+      home: homeRecipe,
      widget: widgetRecipe,
+      glassPopover: glassPopoverRecipe,
+      glassDialog: glassDialogRecipe,
    },
  },
 });
Author	SHA1	Message	Date
vkuchenik	5d32e48947	remove: commented out the 'Test View' in the source drop down selection as it doesn't work atm	2026-11-03 10:47:44 -08:00
vkuchenik	24e3ee69c6	update: data explorer was using v2 api in development, moving to v3 for production	2026-10-30 12:03:53 -07:00
vkuchenik	c83ace710f	refactor: small styling changes	2026-10-30 11:43:33 -07:00
vkuchenik	306823a8a8	add: data explorer page added to sidebar with wsu students code being rendered in said page	2026-10-29 13:34:53 -07:00
chight	c4df4495b5	Merge branch '20260916_1007_update_widget_settings_ui' into '20260605_1123_Hight_updates' Refactor theme.js for better separation of component styling See merge request vkuchenik/website-framework!114	2026-10-27 16:23:11 +00:00
chight	0c178baa01	Refactor changed widgets to match themes.	2026-10-20 16:19:45 -07:00
chight	0ec4f27640	Refactor CSS for scatter plots	2026-10-20 14:59:03 -07:00
chight	c027a30b3f	Refactor widgets to use theme better. Alert change and 7day vaa	2026-10-20 14:05:52 -07:00
chight	bd5e02ac1b	Refactor connecting more of theme.js	2026-10-19 14:59:01 -07:00
chight	c810056d67	Refactor dashboard to use new theme.js	2026-10-19 14:34:40 -07:00
chight	56ae6d2e3f	Refactor theme.js to split components out more.	2026-10-19 14:24:43 -07:00
chight	f43cfb649e	Bug Fix copy paste errors repaired	2026-10-19 14:06:34 -07:00
chight	91af70dbb5	Refactor lots of changes to normaliz theme.js a bit more	2026-10-19 13:44:59 -07:00
chight	64c78cea70	Refactor starting to update theme.js	2026-10-19 10:43:28 -07:00
chight	0999d64807	Merge remote-tracking branch 'origin/20260605_1123_Hight_updates' into 20260605_1123_Hight_updates	2026-10-07 12:48:09 -07:00
vkuchenik	df431d9219	Merge branch '20261005_1531_updateQuadPlotWidget' into '20260605_1123_Hight_updates' 20261005 1531 updatequadplotwidget See merge request vkuchenik/website-framework!113	2026-10-07 19:07:14 +00:00
vkuchenik	7f39dca405	update: display new data from llm quad plot view	2026-10-07 19:07:14 +00:00
vkuchenik	bc9fbaae6e	wip - committing to check out another branch	2026-10-05 15:21:51 -07:00
chight	1c2044801e	Added nginx for compile into proxy setup	2026-10-02 13:56:10 -07:00
chight	b8aa67f64c	Fix linux cares about case sensitivity.	2026-10-01 15:20:34 -07:00
chight	79f7e9661c	Fix security, we check for broken API calls.	2026-10-01 15:18:08 -07:00
vkuchenik	feaa1c9f14	Merge branch '20260916_0925_UI_hot_fix' into '20260605_1123_Hight_updates' fix: ivans, rs, and al were failing to load data See merge request vkuchenik/website-framework!111	2026-09-16 16:59:43 +00:00
vkuchenik	91d77b8bd4	fix: ivans, rs, and al were failing to load data MyDashboard was not passing widgetID to widget components	2026-09-16 09:54:00 -07:00
chight	a01ae24908	Merge branch '20260721_0845_Venessa_addingWidgets' into 20260605_1123_Hight_updates	2026-09-15 14:57:43 -07:00
chight	8ce490f0ef	Merge branch '20260828_1350_settings_page' into 20260721_0845_Venessa_addingWidgets	2026-09-15 14:53:45 -07:00
chight	49f3b0807d	Merge branch '20260902_1249_Kuchenik_Flatten_CSS' into 20260605_1123_Hight_updates	2026-09-15 14:50:24 -07:00
chight	4474b8ae33	Merge branch '20260715_UI_update' into 20260605_1123_Hight_updates	2026-09-15 14:48:52 -07:00
vkuchenik	c32afff1c5	reformatting slot recipes for better orginization	2026-09-15 14:45:32 -07:00
vkuchenik	4523f8035f	refactoring theme.js by breaking up the root slot into further header, body slots to better compartmentalize css in components	2026-09-15 10:59:20 -07:00
vkuchenik	18c1df93d1	fixed disappearing color mode button on re-opening of sidebar	2026-09-15 08:30:53 -07:00
vkuchenik	243bb13537	fix color mode button bg to be transparent on hover	2026-09-14 15:50:28 -07:00
vkuchenik	3595599dae	Updated color more button by consolidating into one button, it now uses css positioning w respect to state rather then visibility	2026-09-14 15:31:23 -07:00
vkuchenik	8e514418d4	removed some leftover code from a recipe that was unused	2026-09-14 09:04:16 -07:00
vkuchenik	10cbedb6ef	wip moved the category-menu css in the widget library to the themes file	2026-09-14 08:58:09 -07:00
vkuchenik	0c8820d109	wip moving menu nav buttons in widget menu	2026-09-11 14:45:39 -07:00
vkuchenik	4914b64fe2	fixed color mode button background	2026-09-09 11:54:24 -07:00
vkuchenik	4aa8eb7ff0	updated header so all styling is now in the designated themes file	2026-09-03 14:07:39 -07:00
vkuchenik	cde2c4660b	updated themes file to further reduce styling in sidebar component page	2026-09-03 12:32:49 -07:00
vkuchenik	1c6951d245	fixed sidebar animation issues by truncating btn text and using css transitions on footer icons	2026-09-03 11:21:50 -07:00
chight	60f71485da	Refactor CSS on mydashboard started needs completed	2026-09-02 12:45:40 -07:00
chight	8e9b17f6dd	Refactor, cleaned up header file	2026-08-26 13:10:02 -07:00
chight	c45bc778ec	Refactor, cleaned up sidebar and theme	2026-08-26 13:04:17 -07:00
chight	816046d05a	Fix the color mode button was highlighting odd. removed highlight	2026-08-24 10:58:09 -07:00
chight	12e540b61b	Fix adjustment to VDAP logo and emoji	2026-08-24 08:58:31 -07:00
chight	1e1130f965	Update widget library will now open to a percentage of screen	2026-08-21 14:39:57 -07:00
chight	8ddf9ff393	Update chevrons are updated for better UI	2026-08-21 13:30:02 -07:00
chight	9abcb78327	Refactor only formatting of file	2026-08-21 12:58:28 -07:00
chight	f5f09e31fe	Update added chevrons to scrollbar - bug in size of chevrons	2026-08-21 12:55:54 -07:00
chight	510c63e7b0	Update tabs in widget library now scroll and look nice	2026-08-21 11:41:08 -07:00
chight	3017535d02	Update to buttons on widget choices	2026-08-20 14:45:13 -07:00
chight	9b1ddf6dcc	Refactor widget library UI code	2026-08-20 12:51:58 -07:00
chight	2b0300b075	Refactor continued of UI. changes to theme to make baselines	2026-08-04 09:05:30 -07:00
chight	a6ebe5af1e	Refactor recipe adjustment	2026-07-29 14:18:10 -07:00
chight	6d0af310ae	Refactor continuing to work on UI	2026-07-29 13:48:38 -07:00
chight	2283d156ea	Refactoring some theme colors	2026-07-24 14:11:17 -07:00
chight	3697575f54	Refactor the UI for light mode is at an acceptable point	2026-07-23 15:47:51 -07:00
chight	9fbf22bc32	Refactor still working on UI changes	2026-07-22 14:58:59 -07:00
chight	7568d0dba4	Merge remote-tracking branch 'origin/20260721_0845_Venessa_addingWidgets' into 20260715_UI_update	2026-07-22 10:37:09 -07:00
chight	022d4169b5	Reformat starting changes on layout for better UI visuals	2026-07-22 10:37:01 -07:00