fix: copy fn in zustand was directly altering state (anti pattern) and crashing the page

refactor: now using MyQueryBuilder (temp name) in Data Explorer pg as it implements zustand state management to aid the transition from retriggering an api call on every new filter added
add: attempted to create a slot recipe for the data explorer pg
2026-11-12 10:23:44 -08:00 · 2026-11-12 09:59:00 -08:00 · 2026-11-12 09:54:44 -08:00 · 2026-11-12 09:53:08 -08:00 · 2026-11-10 17:23:05 +00:00 · 2026-11-10 17:23:04 +00:00
28 changed files with 2913 additions and 1076 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;"]
@@ -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;
+    }
+}
@@ -20,6 +20,7 @@ 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
@@ -53,6 +54,7 @@ export default function App() {
          <Route path="/regional-map" element={<RegionalMap/>}/>
          <Route path="/volcano" element={<Volcano/>}/>
          <Route path="/admin" element={<Admin/>}/>
+          <Route path="/data-explorer" element={<DataExplorer/>}/>
        </Route>

      </Route>
@@ -72,7 +74,7 @@ function AppFoundation() {
  return (
    <>
      <DialogPopup dialog={dialog}/>
-      <Grid css={styles} templateRows="1fr 11fr" templateColumns="auto 1fr">
+      <Grid css={styles} templateRows="1fr 13fr" templateColumns="auto 1fr">
        <GridItem rowSpan={2} colSpan={1}>
          <Sidebar/>
        </GridItem>
@@ -1,28 +1,51 @@
-import {useDashboardStore} from "@/store/useDashboardStore.jsx";
+import { useDashboardStore } from "@/store/useDashboardStore.jsx";
 import VdapApi from "../../hooks/useVdapApi.js";
 import useBuildUrl from "../../hooks/useBuildUrl.js";
-import { Footprints, Plane, Sailboat, TrendingUp, TrendingDown } from 'lucide-react';
-import {Box, Collapsible, Flex, Spinner, Text, Timeline, Center} from "@chakra-ui/react";
+import {
+  Footprints,
+  Plane,
+  Sailboat,
+  TrendingUp,
+  TrendingDown,
+} from "lucide-react";
+import {
+  Box,
+  Collapsible,
+  Flex,
+  Spinner,
+  Text,
+  Timeline,
+  Center,
+} from "@chakra-ui/react";
 import { useMemo, useCallback } from "react";

+export default function AlertChanges({ settings, widgetID }) {
+  // 0) CREATE SELF AWARENESS, by finding this specific widgets object in the state-list of active/displayed widgets
+  const thisWidget = useDashboardStore(
+    useCallback(
+      (state) => state.widgets.find((widget) => widget.id === widgetID),
+      [widgetID],
+    ),
+  );

-export default function AlertChanges({ settings, widgetID}) {
-  // Find this specific widgets object in the state list of active & displayed widgets
-  const thisWidget = useDashboardStore(useCallback((state) =>
-    state.widgets.find((widget) => widget.id === widgetID), [widgetID]
-  ));
+  // 1) BUILD URL, default is 7 days past
+  const url = useBuildUrl(
+    "/api/v2/alert_changes",
+    settings?.startDate,
+    settings?.endDate,
+  );

-  // build url, default is 7 days past
-  const url = useBuildUrl('/api/v2/alert_changes', settings?.startDate, settings?.endDate);
+  // 2) CALL API hook to retrieve data
+  const { data: apiData, isLoading, error } = VdapApi(url);

-  // call api hook to retrieve data
-  const {data: apiData, isLoading, error} = VdapApi(url);
-
-  const data = useMemo(() => {
+  // 3) SORT the data by grouping into volcanoes and sorting form newest to oldest
+  //    doing this 1st bc the filters might change w/ user input but the sorts (currently) wont and thus will
+  //    only run when the api retrieves new data
+  const sortedData = useMemo(() => {
    if (apiData.length === 0) return [];

    // .reduce() is a built-in array method used to transform an entire array into a single value (like an object)
-    // here it returns a single massive object w/ volcano names as keys
+    // here we sort the data by volcano, and return it as a single massive object w/ volcano names as keys
    const grouped = apiData.reduce((accumulator, item) => {
      if (!accumulator[item.volcano]) accumulator[item.volcano] = [];
      accumulator[item.volcano].push(item);
@@ -33,187 +56,384 @@ export default function AlertChanges({ settings, widgetID}) {
    const group_arr = Object.entries(grouped);

    // sort data newest to oldest within each volcano
-    const sorted = group_arr.map((item) =>
-      [
-        item[0], // volcano name
-        [...(item[1])].sort((a, b) =>
-          new Date(b.alert_start_date_local) - new Date(a.alert_start_date_local))
-      ]
+    const sorted = group_arr.map((item) => [
+      item[0], // volcano name
+      [...item[1]].sort( // item[1] is the array of al changes for a volcano
+        (a, b) =>
+          new Date(b.alert_start_date_local) -
+          new Date(a.alert_start_date_local),
+      ),
+    ]);
+
+    // the volcanoes with the most recent issued alert level change appear at the top of the list (newest -> oldest)
+    const sorted_entries = [...sorted].sort(
+      (a, b) =>
+        new Date(b[1][0].alert_start_date_local) -
+        new Date(a[1][0].alert_start_date_local),
    );

-    // volcano with most recent alert level change appears at top of list
-    const sorted_entries = [...sorted].sort((a, b) => new Date(b[1][0].alert_start_date_local) - new Date(a[1][0].alert_start_date_local));
-
+    // additionally, seperates out data into domains within a volcano for sm widgets,
+    // to list all most recent al changes w/in a volcano w/in a domain
    if (thisWidget?.size === "small") {
-      return (sorted_entries.map((volcano) => {
+      return sorted_entries.map((volcano) => {
        const domain = volcano[1].reduce((acc, curr) => {
-          if (!acc[curr.alert_scheme_domain]) acc[curr.alert_scheme_domain] = [];
+          if (!acc[curr.alert_scheme_domain])
+            acc[curr.alert_scheme_domain] = [];
          acc[curr.alert_scheme_domain].push(curr);
          return acc;
        }, {});

        const domain_arr = Object.entries(domain);
+        console.log("sm data: ", [volcano[0], domain_arr]);
        return [volcano[0], domain_arr];
-      }));
+      });
    }

+    console.log("lg data: ", sorted_entries);
    return sorted_entries;
  }, [apiData, thisWidget]);

-  // list of alert colors used for coloring text below
+  // 4) FILTER according to what is set in the widgets settings
+  const filteredData = useMemo(() => {
+    if (sortedData.length === 0) return [];
+    let filtered_arr = [];
+
+    // must show at least one inc or dec alert levels, otherwise no data is displayed
+    if (
+      !settings?.filters?.levelIncreases &&
+      !settings?.filters?.levelDecreases
+    )
+      return [];
+
+    // return all data
+    if (
+      settings?.filters?.levelIncreases &&
+      settings?.filters?.levelDecreases &&
+      !settings?.filters.elevatedLevels
+    )
+      return sortedData;
+
+    // only elevated alert levels
+    filtered_arr = settings?.filters.elevatedLevels
+      ? sortedData.map((volcano) => [
+          volcano[0],
+          volcano[1].filter(
+            (item) =>
+              item.alert_scheme_highest - Number(item.alert_level_rank) <= 1,
+          ),
+        ])
+        .filter((volcano) => volcano[1].length > 0)
+      : sortedData;
+
+    // only decreases (rm inc)
+    filtered_arr = !settings?.filters.levelIncreases
+      ? filtered_arr.map((volcano) => [
+          volcano[0],
+          volcano[1].filter((item) => !(item.change_type === "increase")),
+        ])
+        .filter((volcano) => volcano[1].length > 0)
+      : filtered_arr;
+
+    // only increases (rm dec)
+    filtered_arr = !settings?.filters?.levelDecreases
+      ? filtered_arr.map((volcano) => [
+          volcano[0],
+          volcano[1].filter((item) => !(item.change_type === "decrease")),
+        ])
+        .filter((volcano) => volcano[1].length > 0)
+      : filtered_arr;
+
+    console.log("filtered_arr: ", filtered_arr);
+    return filtered_arr;
+  }, [sortedData, settings]);
+
+  // 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">
-      <Spinner size="xl" color="blue.400" thickness="4px"/>
-    </Flex>
-  );
+  const options = {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    second: "2-digit",
+    timeZoneName: "short"
+  };

-  if (error) return (
-    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
-      <Text color="red.400">{error}</Text>
-    </Flex>
-  );
+  if (isLoading)
+    return (
+      <Flex w="100%" h="100%" align="center" justify="center" bg="transparent">
+        <Spinner size="xl" color="blue.400" thickness="4px" />
+      </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>
-  );
+  if (error)
+    return (
+      <Flex w="100%" h="100%" align="center" justify="center" bg="transparent">
+        <Text color="red.400">{error}</Text>
+      </Flex>
+    );
+
+  if (filteredData.length === 0)
+    return (
+      <Flex w="100%" h="100%" align="center" justify="center" bg="transparent">
+        <Text textAlign="center" color="widgetTextMuted">
+          No alert 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">
-      {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) => (
-                <>
+    <Box
+      display="flex"
+      flexDirection="column"
+      gap={2}
+      p={2}
+      w="100%"
+      h="100%"
+      bg="transparent"
+      overflowY="auto"
+    >
+      {filteredData.map((volcano, index) => {
+        if (thisWidget?.size === "large")
+          return (
+            <Collapsible.Root key={index} w="100%">
+              <Collapsible.Context>
+                {(collapsible) => (
                  <Collapsible.Trigger w="100%">
-                    <Flex direction="row"
-                          w="100%"
-                          justify="space-between" align="center"
-                          p={1} pl={3} pr={3}
-                          borderTopRadius="lg"
-                          borderBottomRadius={collapsible.open ? "0" : "lg"}
-                          bg="gray.600"
+                    <Flex
+                      direction="row"
+                      w="100%"
+                      justify="space-between"
+                      align="center"
+                      p={1}
+                      pl={3}
+                      pr={3}
+                      borderTopRadius="lg"
+                      borderBottomRadius={collapsible.open ? "0" : "lg"}
+                      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">
+                          {new Date(volcano[1][0]?.alert_start_date_local)
+                            .toLocaleString('en-US', options)
+                          }
+                        </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>
+                      <Flex w="100%" minW={0} justify="right" gap={2}>
+                        <Flex w="fit" color="iconColor">
+                          {volcano[1][0]?.change_type === "increase" ? (
+                            <TrendingUp />
+                          ) : (
+                            <TrendingDown />
+                          )}
+                        </Flex>
+                        <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">
-                    <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">
-                              {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">
-                              {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={alertColors[object?.alert_level_name] || "gray.200"}
-                                      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>
-                                  {(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}
-                                        textAlign="center"
-                                        fontSize="sm"
-                                        fontWeight="semibold"
-                                      >
-                                        {num}
-                                      </Center>
-                                    ))
+                )}
+              </Collapsible.Context>
+
+              <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.Indicator
+                          outline="none"
+                          bg="transparent"
+                          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="transparent"
+                          color="iconColor"
+                          size="lg"
+                        >
+                          {object?.change_type === "increase" ? (
+                            <TrendingUp />
+                          ) : (
+                            <TrendingDown />
+                          )}
+                        </Timeline.Indicator>
+                      </Timeline.Connector>
+                      <Timeline.Content w="100%" h="100%">
+                        <Timeline.Description w="100%" h="100%" gap={1}>
+                          <Flex direction="column" gap={1}>
+                            <Text
+                              w="100%"
+                              h="100%"
+                              color="widgetTextMuted"
+                            >
+                              {new Date(object?.alert_start_date_local)
+                                .toLocaleString('en-US', {...options, timeZone: 'UTC'})
+                              }
+                            </Text>
+                            <Text
+                              w="100%"
+                              h="100%"
+                              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="widgetTextMuted" mr={1}>
+                                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="text"
+                                  bg={
+                                    num === Number(object?.alert_level_rank)
+                                      ? "widgetInnerBadgeBg"
+                                      : "transparent"
                                  }
-                                </Flex>
-                              </Flex>
-                            </Timeline.Description>
-                          </Timeline.Content>
-                        </Timeline.Item>
-                      ))}
-                    </Timeline.Root>
-                  </Collapsible.Content>
-                </>
-              )}
-            </Collapsible.Context>
-          </Collapsible.Root>
-        )
-        else if (thisWidget?.size === "small") return (
-          volcano[1]?.map((domain, index) => (
+                                  borderRadius={
+                                    num === Number(object?.alert_level_rank)
+                                      ? "xl"
+                                      : "none"
+                                  }
+                                  textAlign="center"
+                                  fontSize="sm"
+                                  fontWeight="bold"
+                                >
+                                  {num}
+                                </Center>
+                              ))}
+                            </Flex>
+                          </Flex>
+                        </Timeline.Description>
+                      </Timeline.Content>
+                    </Timeline.Item>
+                  ))}
+                </Timeline.Root>
+              </Collapsible.Content>
+            </Collapsible.Root>
+          );
+        else if (thisWidget?.size === "small")
+          return volcano[1]?.map((domain, index) => (
            <Flex
              key={index}
              direction="row"
              w="100%"
              gap={2}
-              justify="space-between" align="center"
-              p={1} pl={3} pr={3}
+              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">
-                    {domain[0] === "aviation" && <Plane size={15}/>}
-                    {domain[0] === "terrestrial" && <Footprints size={15}/>}
-                    {domain[0] === "maritime" && <Sailboat size={15}/>}
+                  <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">
-                  {domain[1]?.[0]?.change_type === "increase" ? <TrendingUp/> : <TrendingDown/>}
+              <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}
+                  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}
                </Text>
              </Flex>
            </Flex>
-          ))
-        );
+          ));
      })}
    </Box>
-  )
-}
+  );
+}
@@ -114,23 +114,26 @@ export default function CommCoorReport({ settings, widgetID }) {
    }
  }, [settings, widgetID, updateSettings, apiData]);

-  if (isLoading) return (
-    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
-      <Spinner size="xl" color="blue.400" thickness="4px"/>
-    </Flex>
-  );
+  if (isLoading)
+    return (
+      <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" textAlign="center" borderRadius="lg" bg="gray.800">
-      <Text color="red.400">{error}</Text>
-    </Flex>
-  );
+  if (error)
+    return (
+      <Flex w="100%" h="100%" align="center" justify="center" textAlign="center" borderRadius="lg" bg="transparent">
+        <Text color="red.400">{error}</Text>
+      </Flex>
+    );

-  if (!apiData) return (
-    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
-      <Text textAlign="center" color="gray.400">No data</Text>
-    </Flex>
-  );
+  if (!apiData)
+    return (
+      <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="transparent">
+        <Text textAlign="center" color="gray.400">No data</Text>
+      </Flex>
+    );

  return (
    <Flex direction="row" w="100%" h="100%" p={1} overflowY="auto">
@@ -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>
    );
 }
@@ -1,4 +1,4 @@
-import {Button, Flex, Spinner, Text, Box, Collapsible} from "@chakra-ui/react";
+import {Button, Flex, Spinner, Text, Box, Collapsible, Highlight} from "@chakra-ui/react";
 import {useEffect, useMemo, useCallback } from 'react';
 import {useDashboardStore} from "@/store/useDashboardStore.jsx";
 import VdapApi from '../../hooks/useVdapApi.js';
@@ -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,47 +97,46 @@ 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">
-                        <Text truncate>{item.volcano_name}</Text>
-                        <Text truncate fontSize="xs" color="gray.300/90">{item.send_time}</Text>
+                      <Flex direction="column" w="100%" minW={0} textAlign="left" color="text">
+                        <Text truncate color="text" fontWeight="medium">{item.volcano_name}</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} borderRadius="lg" p={2} align="start">
+                        <Text w="fit" fontSize="sm" color="text" p={1} bg="widgetInnerBadgeBg" borderRadius="md">Preparer: {item?.preparer}</Text>
+                        <Text w="100%" h="100%" fontSize="sm" color="text" textAlign="left" whiteSpace="pre-line">{item?.summary}</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>
-                                <a href={`${file?.url}#view=FitV&toolbar=1`} target="_blank" rel="noopener noreferrer">
-                                  Open
-                                </a>
-                              </Box>
+                          <Box w="100%" h="100%" key={index} >
+                            <Flex direction="row" w="100%">
+                              <Text w="100%" p={1} fontWeight="semibold" bg="widgetInnerBadgeBg" borderLeftRadius="lg" fontSize="sm" color="text">File: </Text>
+                              <a href={`${file?.url}#view=FitV&toolbar=0`} target="_blank" rel="noopener noreferrer">
+                                <Text truncate w="100%" p={1} bg="widgetInnerBadgeBg" borderRightRadius="lg" fontSize="sm" color="text">
+                                  {file?.name}
+                                </Text>
+                              </a>
                            </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">
-                                <Text mb={2} color="fg.muted">
+                              <Flex direction="column" w="100%" h="100%" align="center" p={4} mt={1} color="widgetTextMuted" bg="widgetInnerBadgeBg" borderRadius="lg">
+                                <Text mb={2} fontSize="xs" color="red.300">
                                  Your browser cannot display this PDF directly.
                                </Text>
-                                <a href={file?.url} target="_blank">
-                                  Download PDF
+                                <a href={file?.url} target="_blank" bg="widgetBadgeBg" rel="noopener noreferrer">
+                                  <Text fontSize="xs" bg="widgetBadgeBg" borderRadius="md" p={1}>Download PDF Instead</Text>
                                </a>
                              </Flex>
                            </object>
@@ -151,19 +151,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} 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>
    );
 }
@@ -1,36 +1,283 @@
-import {Flex, Slider, Switch} from "@chakra-ui/react";
-import {useDashboardStore} from "@/store/useDashboardStore.jsx";
+import {
+  Flex,
+  Slider,
+  Switch,
+  Text,
+  Field,
+  Fieldset,
+  Input,
+  CheckboxCard,
+  CheckboxGroup,
+  Combobox,
+  Portal,
+  useFilter,
+  useListCollection,
+  Wrap,
+  Badge, Separator, HStack, useSlotRecipe
+} from "@chakra-ui/react";
+import { useDashboardStore } from "@/store/useDashboardStore.jsx";
+import { useState, useMemo } from "react";

-export default function IvansAlertsSettings({ widgetId, currentSettings }) {
-  const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
+export default function AlertChangeSettings({ widgetId, currentSettings }) {
+  // STYLING
+  const popoverRecipe = useSlotRecipe({ key: "glassPopover" });
+  const popoverStyles = popoverRecipe();
+
+  // STATE MANAGEMENT
+  const updateSettings = useDashboardStore(
+    (state) => state.updateWidgetSettings,
+  );
+  const [startError, setStartError] = useState(null);
+  const [endError, setEndError] = useState(null);
+  const [selectedVolcanoes, setSelectedVolcanoes] = useState([]);
+  const { startsWith } = useFilter({ sensitivity: "base" });
+
+  const { collection, filter, reset } = useListCollection({
+    initialItems: volcanoes,
+    filter: startsWith,
+    limit: 10,
+  });
+
+  // FUNCTIONS
+  const handleValueChange = (details) => {
+    setSelectedVolcanoes(details.value)
+  }

  return (
-    <Flex flexDirection="column" justifyContent="space-between" gap={2} pb={2}>
-      {/* SLIDER DATE RANGE SELECTION */}
-      <Slider.Root
-        width="80%" h="100%"
-        min={1} max={14}
-        defaultValue={[7]}
-        step={1}
-        onValueChangeEnd={(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.Control>
-          <Slider.Track>
-            <Slider.Range />
-          </Slider.Track>
-          <Slider.Thumbs />
-          <Slider.MarkerGroup p={3}>
-            <Slider.Marker value={1} whiteSpace="nowrap">today</Slider.Marker>
-            <Slider.Marker value={7} whiteSpace="nowrap">1 week ago</Slider.Marker>
-            <Slider.Marker value={14} whiteSpace="nowrap">2 weeks ago</Slider.Marker>
-          </Slider.MarkerGroup>
-        </Slider.Control>
-      </Slider.Root>
+    <Flex direction="column" pb={2} overflowY="auto">
+      <Fieldset.Root>
+        <Fieldset.Content>
+          {/* SELECTING DATE RANGE */}
+          <HStack>
+            <Text flexShrink="0" fontWeight="semibold">Date Range Selection</Text>
+            <Separator flex="1" size="sm"/> {/*line seperator*/}
+          </HStack>
+          <Flex direction="column" w="100%" h="100%" justify="center" gap={2} pr={1}>
+            {/* start date */}
+            <Field.Root invalid={!!startError}>
+              <Flex
+                direction="row"
+                w="100%"
+                h="100%"
+                align="center"
+                justify="center"
+              >
+                <Text w="50%" align="center" justify="center" color="text">
+                  Start Date
+                </Text>
+                <Flex direction="column" w="100%">
+                  <Input
+                    type="date"
+                    css={popoverStyles.date}
+                    value={currentSettings?.startDate || ""}
+                    onChange={(e) => {
+                      const value = e.target.value;
+                      updateSettings(widgetId, {
+                        ...currentSettings,
+                        startDate: value,
+                      });
+
+                      const dateSelected = new Date(value);
+                      const today = new Date();
+                      today.setHours(0, 0, 0, 0);
+
+                      if (value && dateSelected > today)
+                        setStartError("Can't Choose a Future Date");
+                      else setStartError("");
+                    }}
+                  />
+                  {startError && (
+                    <Field.ErrorText>{startError}</Field.ErrorText>
+                  )}
+                </Flex>
+              </Flex>
+            </Field.Root>
+
+            {/* end date */}
+            <Field.Root invalid={!!endError}>
+              <Flex
+                direction="row"
+                w="100%"
+                h="100%"
+                align="center"
+                justify="center"
+              >
+                <Text w="50%" align="center" justify="center" color="text">
+                  End Date
+                </Text>
+                <Flex direction="column" w="100%">
+                  <Input
+                    type="date"
+                    css={popoverStyles.date}
+
+                    value={currentSettings?.endDate || ""}
+                    onChange={(e) => {
+                      const value = e.target.value;
+                      updateSettings(widgetId, {
+                        ...currentSettings,
+                        endDate: value,
+                      });
+
+                      const dateSelected = new Date(value);
+                      const today = new Date();
+                      today.setHours(0, 0, 0, 0);
+
+                      if (value && dateSelected > today)
+                        setEndError("Can't Choose a Future Date");
+                      else setEndError("");
+                    }}
+                  />
+                  {endError && <Field.ErrorText>{endError}</Field.ErrorText>}
+                </Flex>
+              </Flex>
+            </Field.Root>
+          </Flex>
+
+          {/* FILTERS */}
+          <CheckboxGroup w="100%">
+            <Flex direction="column" w="100%" gap={2}>
+              <HStack>
+                <Text flexShrink="0" fontWeight="semibold">Filters</Text>
+                <Separator flex="1" size="sm"/> {/*line seperator*/}
+              </HStack>
+
+              {/* level increases */}
+              <CheckboxCard.Root
+                css={popoverStyles.checkboxcard}
+
+                defaultChecked={currentSettings?.filters?.levelIncreases}
+                onCheckedChange={(e) => {
+                  updateSettings(widgetId, {
+                    ...currentSettings,
+                    filters: {
+                      ...currentSettings.filters,
+                      levelIncreases: e.checked,
+                    },
+                  });
+                }}
+              >
+                <CheckboxCard.HiddenInput /> {/* when removed can't check/uncheck box */}
+                <CheckboxCard.Control>
+                  <CheckboxCard.Content>
+                    <CheckboxCard.Label fontWeight={400}>
+                      Level Increases
+                    </CheckboxCard.Label>
+                  </CheckboxCard.Content>
+                  <CheckboxCard.Indicator css={popoverStyles.checkbox} />
+                </CheckboxCard.Control>
+              </CheckboxCard.Root>
+
+              {/* level decreases */}
+              <CheckboxCard.Root
+                css={popoverStyles.checkboxcard}
+
+                defaultChecked={currentSettings?.filters?.levelDecreases}
+                onCheckedChange={(e) => {
+                  updateSettings(widgetId, {
+                    ...currentSettings,
+                    filters: {
+                      ...currentSettings.filters,
+                      levelDecreases: e.checked,
+                    },
+                  });
+                }}
+              >
+                <CheckboxCard.HiddenInput />
+                <CheckboxCard.Control>
+                  <CheckboxCard.Content>
+                    <CheckboxCard.Label fontWeight={400}>
+                      Level Decreases
+                    </CheckboxCard.Label>
+                  </CheckboxCard.Content>
+                  <CheckboxCard.Indicator css={popoverStyles.checkbox} />
+                </CheckboxCard.Control>
+              </CheckboxCard.Root>
+
+              {/* elevated levels */}
+              <CheckboxCard.Root
+                css={popoverStyles.checkboxcard}
+
+                defaultChecked={currentSettings?.filters?.elevatedLevels}
+                onCheckedChange={(e) => {
+                  updateSettings(widgetId, {
+                    ...currentSettings,
+                    filters: {
+                      ...currentSettings.filters,
+                      elevatedLevels: e.checked,
+                    },
+                  });
+                }}
+              >
+                <CheckboxCard.HiddenInput />
+                <CheckboxCard.Control>
+                  <CheckboxCard.Content>
+                    <CheckboxCard.Label fontWeight={400}>
+                      Only Elevated Levels
+                    </CheckboxCard.Label>
+                  </CheckboxCard.Content>
+                  <CheckboxCard.Indicator css={popoverStyles.checkbox}/>
+                </CheckboxCard.Control>
+              </CheckboxCard.Root>
+            </Flex>
+          </CheckboxGroup>
+
+          {/* select volcano to filter on */}
+          <Combobox.Root
+            mt={1}
+            variant="subtle"
+            multiple
+            openOnClick
+            collection={collection}
+            onValueChange={handleValueChange}
+            onInputValueChange={(e) => filter(e.inputValue)}
+          >
+
+            <Wrap gap="2">
+              {selectedVolcanoes.map((volcano) => (
+                <Badge key={volcano}>{volcano}</Badge>
+              ))}
+            </Wrap>
+
+            <Combobox.Label fontSize="xs" >Select Volcano (s)</Combobox.Label>
+
+            <Combobox.Control>
+              <Combobox.Input placeholder="Type to search" borderRadius="lg"/>
+              <Combobox.IndicatorGroup>
+                <Combobox.ClearTrigger />
+                <Combobox.Trigger onClick={reset} />
+              </Combobox.IndicatorGroup>
+            </Combobox.Control>
+            <Portal>
+              <Combobox.Positioner>
+                <Combobox.Content>
+                  {volcanoes.map((item) => (
+                    <Combobox.Item item={item} key={item.value}>
+                      {item.label}
+                      <Combobox.ItemIndicator />
+                    </Combobox.Item>
+                  ))}
+                  <Combobox.Empty>No items found</Combobox.Empty>
+                </Combobox.Content>
+              </Combobox.Positioner>
+            </Portal>
+          </Combobox.Root>
+        </Fieldset.Content>
+      </Fieldset.Root>
    </Flex>
-  )
-}
+  );
+}
+
+const volcanoes = [
+  { label: "Mt. St. Helens", value: "helens" },
+  { label: "Mt. Adams", value: "adams" },
+  { label: "Rainier", value: "rainier" },
+  { label: "The Three Sisters", value: "three sisters" },
+  { label: "Fuego", value: "fuego" },
+  { label: "Laki Laki", value: "lakilaki" },
+  { label: "Lewotobi", value: "lewotobi" },
+  { label: "Karangatang", value: "karangatang" },
+  { label: "Cotopaxi", value: "cotopaxi" },
+  { label: "Merapi", value: "merapi" },
+  { label: "Marapi", value: "marapi" },
+  { label: "Kick 'Em Jenny", value: "kick em jenny"}
+]
@@ -1,12 +1,18 @@
-import {Button, Field, Flex, Input, Switch, Text} from "@chakra-ui/react";
+import {Button, Field, Flex, Input, Switch, Text, Fieldset, Separator, HStack, useSlotRecipe} from "@chakra-ui/react";
 import {useDashboardStore} from "@/store/useDashboardStore.jsx";
 import {useState} from "react";

 export default function CommCoorReportSettings({ widgetId, currentSettings }) {
+  // STYLING
+  const popoverRecipe = useSlotRecipe({ key: "glassPopover" });
+  const popoverStyles = popoverRecipe();
+
+  // STATE MANAGEMENT
  const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
  const [startError, setStartError] = useState(null);
  const [endError, setEndError] = useState(null);

+  // FUNCTIONS
  const handleCopyToClipboard = () => {
    updateSettings(widgetId, {copyToClipboard: true});
  }
@@ -17,67 +23,84 @@ export default function CommCoorReportSettings({ widgetId, currentSettings }) {

  return (
    <Flex flexDirection="column" justifyContent="space-between" gap={2} overflowY="auto">
-      {/* COPY TO CLIPBOARD */}
-      <Button w="fit" size="xs" onClick={handleCopyToClipboard}>Copy Report</Button>
+      <Fieldset.Root>
+        <Fieldset.Content>
+          {/* SELECTING DATE RANGE */}
+          <HStack>
+            <Text flexShrink="0" fontWeight="semibold">Date Range Selection</Text>
+            <Separator flex="1" size="sm"/> {/*line seperator*/}
+          </HStack>
+          <Flex direction="column" w="100%" h="100%" justify="center" gap={2} pr={1}>
+            {/* start date */}
+            <Field.Root invalid={!!startError}>
+              <Flex direction="row" w="100%" h="100%" align="center" justify="center">
+                <Text w="50%" align="center" justify="center" mt={2} color="text">
+                  Start Date
+                </Text>
+                <Flex direction="column" w="100%">
+                  <Input
+                    w="100%"
+                    css={popoverStyles.date}
+                    type="date"
+                    value={currentSettings?.startDate || ""}
+                    onChange={(e) => {
+                      const value = e.target.value;
+                      updateSettings(widgetId, {...currentSettings, startDate: value});

-      {/* DOWNLOAD REPORT */}
-      <Button w="fit" size="xs" onClick={handleDownloadReport}>Download Report</Button>
+                      const dateSelected = new Date(value);
+                      const today = new Date();
+                      today.setHours(0, 0, 0, 0);

-      {/* SELECTING DATE RANGE */}
-      <Flex direction="column" w="100%" h="100%" align="center" justify="center" gap="2">
-        <Field.Root invalid={!!startError}>
-          <Flex direction="row" w="100%" h="100%" align="center" justify="center">
-            <Text w="50%" align="center" justify="center" mt={2} color="gray.700">
-              Start Date
-            </Text>
-            <Flex direction="column" w="100%">
-              <Input
-                w="100%"
-                type="date"
-                value={currentSettings?.startDate || ""}
-                onChange={(e) => {
-                  const value = e.target.value;
-                  updateSettings(widgetId, {...currentSettings, startDate: value});
+                      if (value && (dateSelected > today)) setStartError("Can't Choose a Future Date");
+                      else setStartError("");
+                    }}
+                  />
+                  {startError && <Field.ErrorText>{startError}</Field.ErrorText>}
+                </Flex>
+              </Flex>
+            </Field.Root>
+            {/* end date */}
+            <Field.Root invalid={!!endError}>
+              <Flex direction="row" w="100%" h="100%" align="center" justify="center">
+                <Text w="50%" align="center" justify="center" mt={2} color="text">
+                  End Date
+                </Text>
+                <Flex direction="column" w="100%">
+                  <Input
+                    w="100%"
+                    css={popoverStyles.date}
+                    type="date"
+                    value={currentSettings?.endDate || ""}
+                    onChange={(e) => {
+                      const value = e.target.value;
+                      updateSettings(widgetId, {...currentSettings, endDate: value});

-                  const dateSelected = new Date(value);
-                  const today = new Date();
-                  today.setHours(0, 0, 0, 0);
+                      const dateSelected = new Date(value);
+                      const today = new Date();
+                      today.setHours(0, 0, 0, 0);

-                  if (value && (dateSelected > today)) setStartError("Can't Choose a Future Date");
-                  else setStartError("");
-                }}
-              />
-              {startError && <Field.ErrorText>{startError}</Field.ErrorText>}
-            </Flex>
+                      if (value && (dateSelected > today)) setEndError("Can't Choose a Future Date");
+                      else setEndError("");
+                    }}
+                  />
+                  {endError && <Field.ErrorText>{endError}</Field.ErrorText>}
+                </Flex>
+              </Flex>
+            </Field.Root>
          </Flex>
-        </Field.Root>
-        <Field.Root invalid={!!endError}>
-          <Flex direction="row" w="100%" h="100%" align="center" justify="center">
-            <Text w="50%" align="center" justify="center" mt={2} color="gray.700">
-              End Date
-            </Text>
-            <Flex direction="column" w="100%">
-              <Input
-                w="100%"
-                type="date"
-                value={currentSettings?.endDate || ""}
-                onChange={(e) => {
-                  const value = e.target.value;
-                  updateSettings(widgetId, {...currentSettings, endDate: value});

-                  const dateSelected = new Date(value);
-                  const today = new Date();
-                  today.setHours(0, 0, 0, 0);
-
-                  if (value && (dateSelected > today)) setEndError("Can't Choose a Future Date");
-                  else setEndError("");
-                }}
-              />
-              {endError && <Field.ErrorText>{endError}</Field.ErrorText>}
-            </Flex>
+          <HStack>
+            <Text flexShrink="0" fontWeight="semibold">Tools</Text>
+            <Separator flex="1" size="sm"/> {/*line seperator*/}
+          </HStack>
+          <Flex direction="column" w="100%" h="100%" justify="center" gap={2}>
+            {/* COPY TO CLIPBOARD */}
+            <Button css={popoverStyles.button} onClick={handleCopyToClipboard}>Copy Report</Button>
+            {/* DOWNLOAD REPORT */}
+            <Button css={popoverStyles.button} onClick={handleDownloadReport}>Download Report</Button>
          </Flex>
-        </Field.Root>
-      </Flex>
+        </Fieldset.Content>
+      </Fieldset.Root>
    </Flex>
  )
 }
@@ -1,12 +1,30 @@
-import {Button, Field, Flex, Input, Switch, Text} from "@chakra-ui/react";
+import {
+  Button,
+  Field,
+  Flex,
+  Input,
+  Switch,
+  Text,
+  Fieldset,
+  CheckboxCard,
+  Separator,
+  HStack,
+  useSlotRecipe
+} from "@chakra-ui/react";
 import {useDashboardStore} from "../../../store/useDashboardStore.jsx";
 import {useState} from "react";

 export default function IvansAlertsSettings({ widgetId, currentSettings }) {
+  // STYLING
+  const popoverRecipe = useSlotRecipe({ key: "glassPopover" });
+  const popoverStyles = popoverRecipe();
+
+  // STATE MANAGEMENT
  const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
  const [startError, setStartError] = useState(null);
  const [endError, setEndError] = useState(null);

+  // FUNCTIONS
  const handleCopyToClipboard = () => {
    updateSettings(widgetId, {copyToClipboard: true});
  }
@@ -20,89 +38,174 @@ export default function IvansAlertsSettings({ widgetId, currentSettings }) {
  }

  return (
-    <Flex flexDirection="column" justifyContent="space-between" gap={2} overflowY="auto">
-      {/* COPY TO CLIPBOARD */}
-      <Button w="fit" size="xs" onClick={handleCopyToClipboard}>Copy All IVANS</Button>
-
-      {/* SORTS */}
-      <Switch.Root
-        checked={currentSettings?.activeSorts?.timeSort === "asc"}
-        onCheckedChange={handleTimeSort}
-        colorPalette="blue"
-      >
-        <Switch.HiddenInput />
-        <Switch.Control>
-          <Switch.Thumb />
-        </Switch.Control>
-        <Switch.Label>Sort Oldest to Newest</Switch.Label>
-      </Switch.Root>
-      <Switch.Root
-        checked={currentSettings?.activeSorts?.volcanoSort}
-        onCheckedChange={handleVolcanoSort}
-        colorPalette="blue"
-      >
-        <Switch.HiddenInput />
-        <Switch.Control>
-          <Switch.Thumb />
-        </Switch.Control>
-        <Switch.Label>Sort by Volcano</Switch.Label>
-      </Switch.Root>
-
-      {/* SELECTING DATE RANGE */}
-      <Flex direction="column" w="100%" h="100%" align="center" justify="center" gap="2">
-        <Field.Root invalid={!!startError}>
-          <Flex direction="row" w="100%" h="100%" align="center" justify="center">
-            <Text w="50%" align="center" justify="center" mt={2} color="gray.700">
-              Start Date
-            </Text>
-            <Flex direction="column" w="100%">
-              <Input
+    <Flex flexDirection="column" justifyContent="space-between" overflowY="auto">
+      <Fieldset.Root>
+        <Fieldset.Content>
+          {/* SELECTING DATE RANGE */}
+          <HStack>
+            <Text flexShrink="0" fontWeight="semibold">Date Range Selection</Text>
+            <Separator flex="1" size="sm"/> {/*line seperator*/}
+            </HStack>
+          <Flex direction="column" w="100%" h="100%" justify="center" gap={2} pr={1}>
+            {/* start date */}
+            <Field.Root invalid={!!startError}>
+              <Flex
+                direction="row"
                w="100%"
-                type="date"
-                value={currentSettings?.startDate || ""}
-                onChange={(e) => {
-                  const value = e.target.value;
-                  updateSettings(widgetId, {...currentSettings, startDate: value});
+                h="100%"
+                align="center"
+                justify="center"
+              >
+                <Text w="50%" align="center" justify="center" color="text">
+                  Start Date
+                </Text>
+                <Flex direction="column" w="100%">
+                  <Input
+                    type="date"
+                    w="100%"
+                    borderRadius="lg"
+                    css={popoverStyles.date}
+                    value={currentSettings?.startDate || ""}
+                    onChange={(e) => {
+                      const value = e.target.value;
+                      updateSettings(widgetId, {
+                        ...currentSettings,
+                        startDate: value,
+                      });

-                  const dateSelected = new Date(value);
-                  const today = new Date();
-                  today.setHours(0, 0, 0, 0);
+                      const dateSelected = new Date(value);
+                      const today = new Date();
+                      today.setHours(0, 0, 0, 0);

-                  if (value && (dateSelected > today)) setStartError("Can't Choose a Future Date");
-                  else setStartError("");
-                }}
-              />
-              {startError && <Field.ErrorText>{startError}</Field.ErrorText>}
-            </Flex>
-          </Flex>
-        </Field.Root>
-        <Field.Root invalid={!!endError}>
-          <Flex direction="row" w="100%" h="100%" align="center" justify="center">
-            <Text w="50%" align="center" justify="center" mt={2} color="gray.700">
-              End Date
-            </Text>
-            <Flex direction="column" w="100%">
-              <Input
+                      if (value && dateSelected > today)
+                        setStartError("Can't Choose a Future Date");
+                      else setStartError("");
+                    }}
+                  />
+                  {startError && (
+                    <Field.ErrorText>{startError}</Field.ErrorText>
+                  )}
+                </Flex>
+              </Flex>
+            </Field.Root>
+
+            {/* end date */}
+            <Field.Root invalid={!!endError}>
+              <Flex
+                direction="row"
                w="100%"
-                type="date"
-                value={currentSettings?.endDate || ""}
-                onChange={(e) => {
-                  const value = e.target.value;
-                  updateSettings(widgetId, {...currentSettings, endDate: value});
+                h="100%"
+                align="center"
+                justify="center"
+              >
+                <Text w="50%" align="center" justify="center" color="text">
+                  End Date
+                </Text>
+                <Flex direction="column" w="100%">
+                  <Input
+                    type="date"
+                    w="100%"
+                    borderRadius="lg"
+                    css={popoverStyles.date}
+                    value={currentSettings?.endDate || ""}
+                    onChange={(e) => {
+                      const value = e.target.value;
+                      updateSettings(widgetId, {
+                        ...currentSettings,
+                        endDate: value,
+                      });

-                  const dateSelected = new Date(value);
-                  const today = new Date();
-                  today.setHours(0, 0, 0, 0);
+                      const dateSelected = new Date(value);
+                      const today = new Date();
+                      today.setHours(0, 0, 0, 0);

-                  if (value && (dateSelected > today)) setEndError("Can't Choose a Future Date");
-                  else setEndError("");
-                }}
-              />
-              {endError && <Field.ErrorText>{endError}</Field.ErrorText>}
-            </Flex>
+                      if (value && dateSelected > today)
+                        setEndError("Can't Choose a Future Date");
+                      else setEndError("");
+                    }}
+                  />
+                  {endError && <Field.ErrorText>{endError}</Field.ErrorText>}
+                </Flex>
+              </Flex>
+            </Field.Root>
          </Flex>
-        </Field.Root>
-      </Flex>
+
+          {/* SORTS */}
+          <HStack>
+            <Text flexShrink="0" fontWeight="semibold">Sorts</Text>
+            <Separator flex="1" size="sm"/> {/*line seperator*/}
+          </HStack>
+
+          {/* time sort */}
+          <Switch.Root
+            checked={currentSettings?.activeSorts?.timeSort === "asc"}
+            onCheckedChange={handleTimeSort}
+          >
+            <Switch.HiddenInput />
+            <Switch.Control css={popoverStyles.switch}>
+              <Switch.Thumb bg="white"/>
+            </Switch.Control>
+            <Switch.Label fontWeight={400}>Oldest to Newest</Switch.Label>
+          </Switch.Root>
+
+          {/* alphabetic sort */}
+          <Switch.Root
+            checked={currentSettings?.activeSorts?.volcanoSort}
+            onCheckedChange={handleVolcanoSort}
+          >
+            <Switch.HiddenInput />
+            <Switch.Control css={popoverStyles.switch}>
+              <Switch.Thumb bg="white" />
+            </Switch.Control>
+            <Switch.Label fontWeight={400}>Alphabetically by Volcano</Switch.Label>
+          </Switch.Root>
+
+          <HStack>
+            <Text flexShrink="0" fontWeight="semibold">Filters</Text>
+            <Separator flex="1" size="sm"/> {/*line seperator*/}
+          </HStack>
+
+          {/* elevated levels */}
+          <CheckboxCard.Root
+            // size="sm"
+            // variant="surface"
+            css={popoverStyles.checkboxcard}
+
+            defaultChecked={currentSettings?.filters?.elevatedLevels}
+            onCheckedChange={(e) => {
+              updateSettings(widgetId, {
+                ...currentSettings,
+                filters: {
+                  ...currentSettings.filters,
+                  elevatedLevels: e.checked,
+                },
+              });
+            }}
+          >
+            <CheckboxCard.HiddenInput />
+            <CheckboxCard.Control>
+              <CheckboxCard.Content>
+                <CheckboxCard.Label fontWeight={400}>
+                  Only Elevated Levels
+                </CheckboxCard.Label>
+              </CheckboxCard.Content>
+              <CheckboxCard.Indicator css={popoverStyles.checkbox} />
+            </CheckboxCard.Control>
+          </CheckboxCard.Root>
+
+          {/* COPY TO CLIPBOARD */}
+          <HStack>
+            <Text flexShrink="0" fontWeight="semibold">Tools</Text>
+            <Separator flex="1" size="sm"/> {/*line seperator*/}
+          </HStack>
+          <Button mt={-2} w="100%" size="xs" borderRadius="lg" variant="subtle"
+                  css={popoverStyles.button}
+                  onClick={handleCopyToClipboard}
+          >
+            Copy All IVANS
+          </Button>
+        </Fieldset.Content>
+      </Fieldset.Root>
    </Flex>
  )
-}
+}
@@ -1,12 +1,18 @@
-import {Button, Field, Flex, Input, Switch, Text} from "@chakra-ui/react";
+import {Button, Field, Flex, HStack, Input, Separator, Switch, Text, useSlotRecipe, Fieldset} from "@chakra-ui/react";
 import {useDashboardStore} from "@/store/useDashboardStore.jsx";
 import {useState} from "react";

 export default function RemoteSensingSettings({ widgetId, currentSettings }) {
+  // STYLING
+  const popoverRecipe = useSlotRecipe({ key: "glassPopover" });
+  const popoverStyles = popoverRecipe();
+
+  // STATE MANAGEMENT
  const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
  const [startError, setStartError] = useState(null);
  const [endError, setEndError] = useState(null);

+  // FUNCTIONS
  const handleCopyToClipboard = () => {
    updateSettings(widgetId, {copyToClipboard: true});
  }
@@ -21,88 +27,111 @@ export default function RemoteSensingSettings({ widgetId, currentSettings }) {

  return (
    <Flex flexDirection="column" justifyContent="space-between" gap={2} overflowY="auto">
-      {/* COPYING TO CLIPBOARD */}
-      <Button w="fit" size="xs" onClick={handleCopyToClipboard}>Copy All RS</Button>
+      <Fieldset.Root>
+        <Fieldset.Content>
+          {/* SELECTING DATE RANGE */}
+            <HStack>
+              <Text flexShrink="0" fontWeight="semibold">Date Range Selection</Text>
+              <Separator flex="1" size="sm"/> {/*line seperator*/}
+            </HStack>
+          <Flex direction="column" w="100%" h="100%" justify="center" gap={2} pr={1}>
+            {/* start date */}
+            <Field.Root invalid={!!startError}>
+              <Flex direction="row" w="100%" h="100%" align="center" justify="center">
+                <Text w="50%" align="center" justify="center" mt={2} color="text">
+                  Start Date
+                </Text>
+                <Flex direction="column" w="100%">
+                  <Input
+                    type="date"
+                    css={popoverStyles.date}

-      {/* SORTING */}
-      <Switch.Root
-        checked={currentSettings?.activeSorts?.timeSort === "asc"}
-        onCheckedChange={handleTimeSort}
-        colorPalette="blue"
-      >
-        <Switch.HiddenInput />
-        <Switch.Control>
-          <Switch.Thumb />
-        </Switch.Control>
-        <Switch.Label>Sort Oldest to Newest</Switch.Label>
-      </Switch.Root>
-      <Switch.Root
-        checked={currentSettings?.activeSorts?.volcanoSort}
-        onCheckedChange={handleVolcanoSort}
-        colorPalette="blue"
-      >
-        <Switch.HiddenInput />
-        <Switch.Control>
-          <Switch.Thumb />
-        </Switch.Control>
-        <Switch.Label>Sort by Volcano</Switch.Label>
-      </Switch.Root>
+                    value={currentSettings?.startDate || ""}
+                    onChange={(e) => {
+                      const value = e.target.value;
+                      updateSettings(widgetId, {...currentSettings, startDate: value});

-      {/* SELECTING DATE RANGE */}
-      <Flex direction="column" w="100%" h="100%" align="center" justify="center" gap="2">
-        <Field.Root invalid={!!startError}>
-          <Flex direction="row" w="100%" h="100%" align="center" justify="center">
-            <Text w="50%" align="center" justify="center" mt={2} color="gray.700">
-              Start Date
-            </Text>
-            <Flex direction="column" w="100%">
-              <Input
-                w="100%"
-                type="date"
-                value={currentSettings?.startDate || ""}
-                onChange={(e) => {
-                  const value = e.target.value;
-                  updateSettings(widgetId, {...currentSettings, startDate: value});
+                      const dateSelected = new Date(value);
+                      const today = new Date();
+                      today.setHours(0, 0, 0, 0);

-                  const dateSelected = new Date(value);
-                  const today = new Date();
-                  today.setHours(0, 0, 0, 0);
+                      if (value && (dateSelected > today)) setStartError("Can't Choose a Future Date");
+                      else setStartError("");
+                    }}
+                  />
+                  {startError && <Field.ErrorText>{startError}</Field.ErrorText>}
+                </Flex>
+              </Flex>
+            </Field.Root>

-                  if (value && (dateSelected > today)) setStartError("Can't Choose a Future Date");
-                  else setStartError("");
-                }}
-              />
-              {startError && <Field.ErrorText>{startError}</Field.ErrorText>}
-            </Flex>
+            {/* end date */}
+            <Field.Root invalid={!!endError}>
+              <Flex direction="row" w="100%" h="100%" align="center" justify="center">
+                <Text w="50%" align="center" justify="center" mt={2} color="text">
+                  End Date
+                </Text>
+                <Flex direction="column" w="100%">
+                  <Input
+                    type="date"
+                    css={popoverStyles.date}
+
+                    value={currentSettings?.endDate || ""}
+                    onChange={(e) => {
+                      const value = e.target.value;
+                      updateSettings(widgetId, {...currentSettings, endDate: value});
+
+                      const dateSelected = new Date(value);
+                      const today = new Date();
+                      today.setHours(0, 0, 0, 0);
+
+                      if (value && (dateSelected > today)) setEndError("Can't Choose a Future Date");
+                      else setEndError("");
+                    }}
+                  />
+                  {endError && <Field.ErrorText>{endError}</Field.ErrorText>}
+                </Flex>
+              </Flex>
+            </Field.Root>
          </Flex>
-        </Field.Root>
-        <Field.Root invalid={!!endError}>
-          <Flex direction="row" w="100%" h="100%" align="center" justify="center">
-            <Text w="50%" align="center" justify="center" mt={2} color="gray.700">
-              End Date
-            </Text>
-            <Flex direction="column" w="100%">
-              <Input
-                w="100%"
-                type="date"
-                value={currentSettings?.endDate || ""}
-                onChange={(e) => {
-                  const value = e.target.value;
-                  updateSettings(widgetId, {...currentSettings, endDate: value});

-                  const dateSelected = new Date(value);
-                  const today = new Date();
-                  today.setHours(0, 0, 0, 0);
+          {/* SORTING */}
+          <HStack>
+            <Text flexShrink="0" fontWeight="semibold">Sorting</Text>
+            <Separator flex="1" size="sm"/> {/*line seperator*/}
+          </HStack>
+          <Switch.Root
+            checked={currentSettings?.activeSorts?.timeSort === "asc"}
+            onCheckedChange={handleTimeSort}
+          >
+            <Switch.HiddenInput />
+            <Switch.Control css={popoverStyles.switch}>
+              <Switch.Thumb bg="white" />
+            </Switch.Control>
+            <Switch.Label>Oldest to Newest</Switch.Label>
+          </Switch.Root>

-                  if (value && (dateSelected > today)) setEndError("Can't Choose a Future Date");
-                  else setEndError("");
-                }}
-              />
-              {endError && <Field.ErrorText>{endError}</Field.ErrorText>}
-            </Flex>
-          </Flex>
-        </Field.Root>
-      </Flex>
+          <Switch.Root
+            checked={currentSettings?.activeSorts?.volcanoSort}
+            onCheckedChange={handleVolcanoSort}
+            colorPalette="blue"
+          >
+            <Switch.HiddenInput />
+            <Switch.Control css={popoverStyles.switch}>
+              <Switch.Thumb bg="white"/>
+            </Switch.Control>
+            <Switch.Label>By Volcano</Switch.Label>
+          </Switch.Root>
+
+          {/* COPYING TO CLIPBOARD */}
+          <HStack>
+            <Text flexShrink="0" fontWeight="semibold">Tools</Text>
+            <Separator flex="1" size="sm"/> {/*line seperator*/}
+          </HStack>
+          <Button css={popoverStyles.button} onClick={handleCopyToClipboard}>
+            Copy All RS
+          </Button>
+        </Fieldset.Content>
+      </Fieldset.Root>
    </Flex>
  )
 }
@@ -38,9 +38,11 @@ export function SettingsButton() {
  const [canScrollRight, setCanScrollRight] = useState(false);

  // Pull the glass container styles for the dropdown and modal
-  const panelRecipe = useSlotRecipe({key: "glassPanel"});
-  const panelStyles = panelRecipe({layout: "dropdown"});
-  const modalStyles = panelRecipe({layout: "popover"});
+  const popoverRecipe = useSlotRecipe({ key: "glassPopover" });
+  const popoverStyles = popoverRecipe();
+
+  const dialogRecipe = useSlotRecipe({ key: "glassDialog" });
+  const dialogStyles = dialogRecipe();

  const [isLibraryOpen, setIsLibraryOpen] = useState(false);

@@ -130,7 +132,7 @@ export function SettingsButton() {
          </Menu.Trigger>

          <Menu.Positioner>
-            <Menu.Content css={panelStyles.root} zIndex="dropdown" minW="200px">
+            <Menu.Content css={popoverStyles.content} zIndex="dropdown" minW="200px">
              <Menu.Item
                onClick={enterEditMode}
                cursor="pointer"
@@ -168,12 +170,13 @@ export function SettingsButton() {
        {/* Soft blur can be added to the background behind the modal */}
        {/*<Dialog.Backdrop bg="blackAlpha.100" backdropFilter="blur(2px)"/>*/}
        <Dialog.Positioner>
-          <Dialog.Content css={modalStyles.root}>
-            <Dialog.Header>
+          <Dialog.Content css={dialogStyles.content}>
+
+            <Dialog.Header css={dialogStyles.header}>
              <Dialog.Title>Widgets Shop</Dialog.Title>
            </Dialog.Header>

-            <Dialog.Body>
+            <Dialog.Body css={dialogStyles.body}>
              <Tabs.Root defaultValue={categories[0]} variant="unstyled">
                {/* HORIZONTAL SCROLLABLE MENU OF WIDGET CATEGORIES */}
                <Box>
@@ -246,7 +249,6 @@ export function SettingsButton() {
                                    h="24px"
                                    flexShrink={0}
                                    borderRadius="full"
-                                    // bg={{base: "blue.50", _dark: "whiteAlpha.200"}}
                                    fontWeight="black"
                                    fontSize="xs"
                                    bg='transparent'
@@ -1,7 +1,8 @@
-import {useSlotRecipe, Text, Flex} from "@chakra-ui/react"
+import {useSlotRecipe, Text, Flex, Input, InputGroup} from "@chakra-ui/react"
 import UserAvatarMenu from "./UserAvatarMenu.jsx";
 import useAuthStore from "@/store/authStore";
 import {SearchBar} from "@/components/dashboard/SearchBar.jsx";
+import {Search} from "lucide-react";

 // Import the asset properly so Vite can bundle it for any server
 // import defaultAvatar from "@/assets/user_profile.svg";
@@ -20,9 +21,11 @@ export default function Header() {

  return (
    <Flex css={styles.root}>
-      <Flex css={styles.search_bar}>
-       <SearchBar placeholder="Enter a volcano to search"/>
-      </Flex>
+      <InputGroup startElement={<Search />} css={styles.search_bar}>
+        <Input
+          placeholder="Enter a volcano to search"
+        />
+      </InputGroup>

      {/* User Profile Section */}
      <Flex css={styles.user_info}>
@@ -1,4 +1,4 @@
-import {Mountain, House, Earth, MapPin, ShieldUser, PanelLeftClose, PanelLeftOpen} 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";
@@ -7,9 +7,10 @@ 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: Map, 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: 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() {
@@ -63,7 +63,6 @@ export const WIDGET_REGISTRY = {
        },
        allowedSizes: {
            small: { w: 3, h: 6 },
-            medium: { w: 3, h: 9 },
            large: { w: 3, h: 12 },
        }
    },
@@ -85,7 +84,6 @@ export const WIDGET_REGISTRY = {
        },
        allowedSizes: {
            small: { w: 3, h: 6 },
-            medium: { w: 3, h: 9 },
            large: { w: 3, h: 12 },
        }
    },
@@ -99,6 +97,12 @@ export const WIDGET_REGISTRY = {
        defaultSettings: {
            startDate: getStartDate(),
            endDate: getEndDate(),
+            filters: {
+                levelIncreases: true,
+                levelDecreases: true,
+                elevatedLevels: false,    // will filter to show only volcanoes in their top 2 highest alert levels
+                volcanoes: 'all', // filter on what volcanoes to display, defaults to 'all' instead of listing every volc
+            },
        },
        allowedSizes: {
            small: { w: 3, h: 6 },
@@ -180,7 +184,7 @@ export const WIDGET_REGISTRY = {
            endDate: getEndDate(),
        },
        allowedSizes: {
-            medium: { w: 3, h: 12 },
+            large: { w: 3, h: 12 },
        }
    },

@@ -65,7 +65,7 @@ const Login = () => {

  return (
      <Flex p={8} bg="gray.50" _dark={{ bg: "gray.900" }} flex="1" minH="100vh" align="center" justify="center">
-        <Box w="full" maxW="450px" bg="white" _dark={{ bg: "gray.800", borderColor: "gray.700" }} p={8} borderRadius="2xl" boxShadow="sm" borderWidth="1px" borderColor="gray.200">
+        <Box w="full" maxW="450px" bg="white" borderColor="gray.200" _dark={{ bg: "gray.800", borderColor: "gray.700" }} p={8} borderRadius="2xl" boxShadow="sm" borderWidth="1px">
          <Stack gap={6} align="stretch" as="form" onSubmit={handleSubmit}>

            <Stack gap={2} textAlign="center">
@@ -88,6 +88,7 @@ const Login = () => {
                  onChange={(e) => setUsername(e.target.value)}
                  placeholder="jdoe"
                  {...fieldStyles}
+                  color="gray.800"
              />
            </Field.Root>

@@ -102,8 +103,9 @@ const Login = () => {
                  type="password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
-                  placeholder="••••••••"
+                  // placeholder="••••••••" // not a necessary placeholder
                  {...fieldStyles}
+                  color="gray.800"
              />
            </Field.Root>

@@ -0,0 +1,188 @@
+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 VdapApi from "../../hooks/useVdapApi.js";
+
+// Import our newly consolidated engine and presentation components
+import QueryBuilder from "./QueryBuilder.jsx";
+import MyQueryBuilder from "./MyQueryBuilder.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();
+  };
+
+  // pulls list of column names and datatypes of said columns
+  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);
+    }
+  };
+
+
+  // pulls the data
+  const pullTable = async () => {
+    setIsLoading(true);
+    setError(null);
+
+    if (!url.source) {
+      setError("Please select a source (table) before fetching data.");
+      setIsLoading(false);
+      return;
+    }
+
+    try {
+      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) return;
+    // {
+      // 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",
+      });
+    }
+  };
+
+  return (
+    // This Flex container will perfectly fill your new Sidebar Route canvas.
+    <Flex direction="column" p={2} gap={3} bg="transparent">
+      {/* The Engine */}
+      <MyQueryBuilder
+        url={url}
+        setUrl={setUrl}
+        allColumns={allColumns}
+        getColumns={getColumns}
+        pullTable={pullTable}
+        isLoading={isLoading}
+        isReadyRef={isReadyRef}
+      />
+
+      <Separator borderColor="widgetBadgeBg" />
+
+      {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 && (
+        <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>
+      )}
+    </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="white" 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="white">
+              {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,272 @@
+// CHAKRA COMPONENTS
+import {
+  Button,
+  Stack,
+  Flex,
+  Field,
+  NativeSelect,
+  Input,
+  HoverCard,
+  Text,
+  NumberInput,
+  Box,
+  useSlotRecipe,
+  Combobox,
+  Portal,
+  useFilter,
+  useListCollection
+} from "@chakra-ui/react";
+// ICONS
+import {
+  Plus,
+  CircleMinus,
+  Files,
+  ClipboardPaste,
+  Trash
+} from 'lucide-react';
+// OTHER
+import { useState } from 'react';
+import useDataFilterStore from '../../store/useDataFilterStore.jsx';
+
+// ============================================================================
+// 1. MAIN QUERY BUILDER (The Engine Wrapper)
+// ============================================================================
+export default function MyQueryBuilder({ url, setUrl, allColumns, getColumns, pullTable, isLoading, isReadyRef }) {
+  // STYLING
+  const dataExplorerRecipe = useSlotRecipe({ key: "dataExplorer" });
+  const dataExplorerStyle = dataExplorerRecipe();
+
+  // THE SELECT DROPDOWN MENU
+  const { contains } = useFilter({ sensitivity: "base" })
+
+  const { collection, filter } = useListCollection({
+    initialItems: tables,
+    filter: contains,
+  })
+
+  // STATE MANAGEMENT
+  const [value, setValue] = useState([]);
+  const addNewGroup = useDataFilterStore(state => state.addNewGroup);
+  const filterGroups = useDataFilterStore(state => state.filterGroups);
+
+  console.log("filter groups", filterGroups);
+
+  return (
+    <Flex direction="column" gap={2} w="100%" bg="transparent" css={dataExplorerStyle.query_builder}>
+      {/* Top Controls: Source & Execute */}
+      <Flex gap={2} align="flex-end">
+        <Combobox.Root
+          collection={collection}
+          onInputValueChange={(e) => filter(e.inputValue)}
+          value={value}
+          onValueChange={(e) => {
+            setValue(e.value);
+            const selectedView = e.value;
+            setUrl(prev => ({ ...prev, source: selectedView }));
+            // need to get all columns as default in param building
+            const endpoint = "/api/v3/view_dash_event_search_columns";
+            getColumns(endpoint);
+          }}
+          width="320px"
+        >
+          <Combobox.Label>Select Table</Combobox.Label>
+          <Combobox.Control>
+            <Combobox.Input placeholder="Type to search" />
+            <Combobox.IndicatorGroup>
+              <Combobox.ClearTrigger />
+              <Combobox.Trigger />
+            </Combobox.IndicatorGroup>
+          </Combobox.Control>
+          <Portal>
+            <Combobox.Positioner>
+              <Combobox.Content>
+                <Combobox.Empty>No items found</Combobox.Empty>
+                {collection.items.map((item) => (
+                  <Combobox.Item item={item} key={item.value}>
+                    {item.label}
+                    <Combobox.ItemIndicator />
+                  </Combobox.Item>
+                ))}
+              </Combobox.Content>
+            </Combobox.Positioner>
+          </Portal>
+        </Combobox.Root>
+
+        <Button
+          loading={isLoading}
+          onClick={() => {
+            isReadyRef.current = true;
+            pullTable();
+          }}
+        >
+          Execute Search
+        </Button>
+      </Flex>
+
+      {/* Filter Builder Engine */}
+      {url.source && allColumns?.types && (
+        <Stack w="100%" gap="2">
+          <Text fontSize="sm" fontWeight="bold" color="text">Filters</Text>
+
+          <Box w="100%" maxH="400px" overflow="auto">
+            <Stack w="100%" gap="2" pr="4">
+              {filterGroups.map((group) => (
+                <FilterGroup key={group.id} groupID={group.id} filters={group.filters} columns={allColumns.types} />
+              ))}
+              <Button onClick={() => addNewGroup()} variant="outline" borderColor="widgetBadgeBg" color="text" _hover={{ bg: "widgetBadgeBg" }}>
+                New Filter Group <Plus />
+              </Button>
+            </Stack>
+          </Box>
+        </Stack>
+      )}
+    </Flex>
+  );
+}
+
+// LIST OF TABLES USER CAN EXPLORE
+const tables = [
+  { label: "Events Table", value: "ViewDashEventSearch" },
+];
+
+// ============================================================================
+// 2. FILTERS GROUPS (The AND logic groups)
+// ============================================================================
+function FilterGroup({ groupID, filters, columns }) {
+  const removeGroup = useDataFilterStore(state => state.removeGroup);
+  const addFilter = useDataFilterStore(state => state.addFilter);
+
+  console.log("in filter group. GroupID: ", groupID, "filters: ", filters);
+
+  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={() => removeGroup(groupID)} variant="ghost" size="sm" color="red.400">
+          <Trash />
+        </Button>
+      </Flex>
+
+      <Stack spacing="2">
+        {filters?.map((filter) => (
+          <FilterRow key={filter.id} groupID={groupID} filterID={filter.id} filter={filter} columns={columns} />
+        ))}
+        <Button onClick={() => addFilter(groupID)} variant="outline" size="sm" color="text" borderColor="widgetBadgeBg" _hover={{ bg: "widgetBadgeBg" }}>
+          Add Filter <Plus />
+        </Button>
+      </Stack>
+    </Stack>
+  );
+};
+
+// ============================================================================
+// 3. FILTER ROW (The individual criteria inputs)
+// ============================================================================
+function FilterRow({ groupID, filterID, filter, columns }) {
+  // STATE MANAGEMENT
+  const removeFilter = useDataFilterStore(state => state.removeFilter);
+  const updateFilterColumn = useDataFilterStore(state => state.updateFilterColumn);
+  const updateFilterOp = useDataFilterStore(state => state.updateFilterOps);
+  const updateFilterValue = useDataFilterStore(state => state.updateFilterValue);
+  const copyFilter = useDataFilterStore(state => state.copyFilter);
+  const pasteFilter = useDataFilterStore(state => state.pasteFilter);
+
+  // CONSTANTS
+  const types = {
+    AutoField: ["=", "<", ">", "<=", ">="],
+    IntegerField: ["=", "<", ">", "<=", ">="],
+    CharField: ["=", "contains"],
+    DateTimeField: ["range"],
+  };
+
+  return (
+    <Flex gap="2" align="center">
+      {/* Remove button */}
+      <HoverCard.Root positioning={{ placement: "top" }}>
+        <HoverCard.Trigger asChild>
+          <Button onClick={() => removeFilter(groupID, filterID)} variant="ghost" size="sm" color="red.400">
+            <CircleMinus />
+          </Button>
+        </HoverCard.Trigger>
+        <HoverCard.Positioner>
+          <HoverCard.Content p="2" bg="white"><Text fontSize="sm">Remove Filter</Text></HoverCard.Content>
+        </HoverCard.Positioner>
+      </HoverCard.Root>
+
+      {/* Copy Button */}
+      <HoverCard.Root positioning={{ placement: "top" }}>
+        <HoverCard.Trigger asChild>
+          <Button onClick={() => copyFilter(filter)} variant="ghost" size="sm" color="text">
+            <Files />
+          </Button>
+        </HoverCard.Trigger>
+        <HoverCard.Positioner>
+          <HoverCard.Content p="2" bg="white"><Text fontSize="sm">Copy Filter</Text></HoverCard.Content>
+        </HoverCard.Positioner>
+      </HoverCard.Root>
+
+      {/* paste button */}
+      <HoverCard.Root positioning={{ placement: "top" }}>
+        <HoverCard.Trigger asChild>
+          <Button
+            onClick={() => pasteFilter(groupID, filterID)}
+            variant="ghost"
+            size="sm"
+            color="text"
+          >
+            <ClipboardPaste />
+          </Button>
+        </HoverCard.Trigger>
+        <HoverCard.Positioner>
+          <HoverCard.Content p="2" bg="white"><Text fontSize="sm">Paste Filter</Text></HoverCard.Content>
+        </HoverCard.Positioner>
+      </HoverCard.Root>
+
+      {/* Column selector */}
+      <Field.Root w={filter?.type === "DateTimeField" ? "30%" : "30%"}>
+        <NativeSelect.Root>
+          <NativeSelect.Field
+            bg="widgetItemBg"
+            color="text"
+            value={filter.col ?? ""}
+            onChange={(e) => updateFilterColumn(groupID, filterID, e.target.value, columns[e.target.value], null, null)} // e.target.value is the new column
+          >
+            <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 or start date for range */}
+      <Field.Root w={filter?.type === "DateTimeField" ? "20%" : "20%"}>
+        {filter?.type === "DateTimeField" ? (
+          <Input type="date" bg="widgetItemBg" color="text" value={filter.value?.start || ""} onChange={(e) => updateFilterValue(groupID, filterID, e.target.value, "s")} />
+        ) : (
+          <NativeSelect.Root>
+            <NativeSelect.Field bg="widgetItemBg" color="text" value={filter.op ?? ""} onChange={(e) => updateFilterOp(groupID, filterID, e.target.value)}>
+              <option value="" disabled hidden>Operator</option>
+              {filter?.type && types[filter?.type].map((op) => <option key={op} value={op}>{op}</option>)} {/* maps over the 'filter.type' corresponding ops from the types dictionary */}
+            </NativeSelect.Field>
+            <NativeSelect.Indicator />
+          </NativeSelect.Root>
+        )}
+      </Field.Root>
+
+      {/* Value input or end date for range */}
+      <Field.Root w={filter.type === "DateTimeField" ? "20%" : "50%"}>
+        {filter?.type === "DateTimeField" ? (
+          <Input type="date" bg="widgetItemBg" color="text" value={filter.value?.end || ""} onChange={(e) => updateFilterValue(groupID, filterID, e.target.value, "e")} />
+        ) : filter?.type === "IntegerField" || filter?.type === "AutoField" ? (
+          <NumberInput.Root value={filter.value ?? ""} onValueChange={(e) => updateFilterValue(groupID, filterID, e.value)}>
+            <NumberInput.Input placeholder="Value" bg="widgetItemBg" color="text" />
+          </NumberInput.Root>
+        ) : (
+          <Input placeholder="Value" bg="widgetItemBg" color="text" value={filter.value ?? ""} onChange={(e) => updateFilterValue(groupID, filterID, e.target.value)} />
+        )}
+      </Field.Root>
+    </Flex>
+  );
+};
@@ -0,0 +1,375 @@
+import React, { useRef } from "react";
+import {
+  Button,
+  Stack,
+  Flex,
+  Field,
+  NativeSelect,
+  Input,
+  HoverCard,
+  Text,
+  NumberInput,
+  Box,
+  useSlotRecipe,
+  Combobox,
+  Portal,
+  useFilter,
+  useListCollection
+} from "@chakra-ui/react";
+import { Plus, CircleMinus, Files, ClipboardPaste, Trash } from 'lucide-react';
+import { useState } from 'react';
+import useDataFilterStore from '../../store/useDataFilterStore.jsx';
+
+// ============================================================================
+// 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="white"><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="white"><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="white"><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 }) {
+  // STYLING
+  const dataExplorerRecipe = useSlotRecipe({ key: "dataExplorer" });
+  const dataExplorerStyle = dataExplorerRecipe();
+
+  // SELECT DROPDOWN MENU
+  const { contains } = useFilter({ sensitivity: "base" })
+
+  const { collection, filter } = useListCollection({
+    initialItems: tables,
+    filter: contains,
+  })
+
+  // STATE MANAGEMENT
+  const copiedFilter = useRef(null);
+  const [value, setValue] = useState([]);
+  const addNewGroup = useDataFilterStore(state => state.addNewGroup);
+  const filterGroups = useDataFilterStore(state => state.filterGroups);
+
+  // FUNCTIONS
+  const handleAddBundle = () => {
+    setUrl(prev => ({
+      ...prev,
+      bundles: [
+        ...prev.bundles,
+        {
+          id: crypto.randomUUID(),
+          filters: [{
+            id: crypto.randomUUID(),
+            column: null,
+            type: null,
+            operator: null,
+            value: null
+          }],
+        },
+      ],
+    }));
+
+    // adding zustand state management as a test here
+    addNewGroup();
+  };
+
+  console.log("filter groups", filterGroups);
+
+  return (
+    <Flex direction="column" gap={2} w="100%" bg="transparent" css={dataExplorerStyle.query_builder}>
+      {/* Top Controls: Source & Execute */}
+      <Flex gap={2} align="flex-end">
+          <Combobox.Root
+            collection={collection}
+            onInputValueChange={(e) => filter(e.inputValue)}
+            value={value}
+            onValueChange={(e) => {
+              setValue(e.value);
+              const selectedView = e.value;
+              setUrl(prev => ({ ...prev, source: selectedView }));
+              // need to get all columns as default in param building
+              const endpoint = "/api/v3/view_dash_event_search_columns";
+              getColumns(endpoint);
+            }}
+            width="320px"
+          >
+            <Combobox.Label>Select Table</Combobox.Label>
+            <Combobox.Control>
+              <Combobox.Input placeholder="Type to search" />
+              <Combobox.IndicatorGroup>
+                <Combobox.ClearTrigger />
+                <Combobox.Trigger />
+              </Combobox.IndicatorGroup>
+            </Combobox.Control>
+            <Portal>
+              <Combobox.Positioner>
+                <Combobox.Content>
+                  <Combobox.Empty>No items found</Combobox.Empty>
+                  {collection.items.map((item) => (
+                    <Combobox.Item item={item} key={item.value}>
+                      {item.label}
+                      <Combobox.ItemIndicator />
+                    </Combobox.Item>
+                  ))}
+                </Combobox.Content>
+              </Combobox.Positioner>
+            </Portal>
+          </Combobox.Root>
+        {/*</Field.Root>*/}
+
+        <Button
+          loading={isLoading}
+          onClick={() => {
+            isReadyRef.current = true;
+            pullTable();
+          }}
+        >
+          Execute Search
+        </Button>
+      </Flex>
+
+      {/* Filter Builder Engine */}
+      {url.source && allColumns?.types && (
+        <Stack w="100%" gap="2">
+          <Text fontSize="sm" fontWeight="bold" color="text">Filters</Text>
+
+          <Box w="100%" maxH="400px" overflow="auto">
+            <Stack w="100%" gap="2" 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>
+  );
+}
+
+// LIST OF TABLES USER CAN EXPLORE
+const tables = [
+  { label: "Events Table", value: "ViewDashEventSearch" },
+]
@@ -29,11 +29,14 @@ export default function MyDashboard() {
  const hasHydrated = useRef(false);

  // 1. Pull the global slot recipes
-  const recipe = useSlotRecipe({key: "glassPanel"});
-  const styles = recipe({ layout: "widget" });
-  const popoverStyles = recipe({ layout: "popover" });
+  const widgetRecipe = useSlotRecipe({ key: "widget" });
+  const popoverRecipe = useSlotRecipe({ key: "glassPopover" });

-  // 2. Populate widgets
+  // 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;
@@ -55,7 +58,7 @@ export default function MyDashboard() {
    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];

@@ -67,7 +70,7 @@ export default function MyDashboard() {

      return (
        <>
-          <Box css={styles.header}>
+          <Box css={widgetStyles.header}>
            <Text>
              {registryEntry.name}
            </Text>
@@ -83,7 +86,7 @@ export default function MyDashboard() {

                {/* NEW: The Positioner lifts the content out of the Flexbox flow */}
                <Popover.Positioner zIndex={1}>
-                  <Popover.Content css={popoverStyles.root}>
+                  <Popover.Content css={popoverStyles.content}>
                    <Suspense fallback={<Spinner size="sm"/>}>
                      <SettingsUI
                        widgetId={widget.id}
@@ -96,7 +99,7 @@ export default function MyDashboard() {
            )}
          </Box>

-          <Box css={styles.body}>
+          <Box css={widgetStyles.body}>
            <Component settings={widget.settings || {}} widgetID={widget.id || {}}/>
          </Box>
        </>
@@ -105,7 +108,7 @@ export default function MyDashboard() {

    // Fallback if someone asks for a widget that doesn't exist
    return (
-      <Flex css={styles.body} align="center" justify="center" direction="column">
+      <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>
@@ -129,13 +132,7 @@ export default function MyDashboard() {
        {widgets.map(widget => (
          <Box
            key={widget.id}
-            css={styles.root}
-            // Grid-specific state overrides remain inline
-            boxShadow={isEditing ? "outline" : styles.root.boxShadow}
-            borderStyle={isEditing ? "dashed" : "solid"}
-            borderWidth={isEditing ? "2px" : "1px"}
-            borderColor={isEditing ? "orange.300" : styles.root.borderColor}
-            cursor={isEditing ? "grab" : "default"}
+            css={widgetStyles.root}
            position="relative" // REQUIRED so the absolute button stays inside this box
          >
            {/* THE DELETE BUTTON */}
@@ -163,7 +160,7 @@ export default function MyDashboard() {

            {/* SUSPENSE BOUNDARY wrapping the render function */}
            <Suspense fallback={
-              <Flex css={styles.body} align="center" justify="center">
+              <Flex css={widgetStyles.body} align="center" justify="center">
                <Spinner size="md" color="blue.400" thickness="3px"/>
              </Flex>
            }>
@@ -0,0 +1,141 @@
+import { create } from 'zustand';
+
+const useDataFilterStore = create((set, get) => ({
+  filterGroups: [],
+  copiedFilter: {},
+
+  addNewGroup: () => {
+    const newGroup = {
+      id: crypto.randomUUID(),
+      filters: []
+    }
+
+    set((state) => ({filterGroups: [...state.filterGroups, newGroup]}));
+  },
+
+  removeGroup: (groupID) => set((state) => ({
+      filterGroups: state.filterGroups.filter((group) => group.id !== groupID),
+  })),
+
+  addFilter: (groupID) => set((state) => ({
+    filterGroups: state.filterGroups.map(filterGroup =>
+      filterGroup.id === groupID ?
+        {
+          ...filterGroup,
+          filters: [
+            ...filterGroup.filters,
+            {
+              id: crypto.randomUUID(),
+              col: null,
+              type: null,
+              op: null,
+              value: null
+            }
+          ]
+        }
+      : filterGroup
+    )
+  })),
+
+  updateFilterColumn: (groupID, filterID, col, type, op, value) => set((state) => ({
+    filterGroups: state.filterGroups.map((group) =>
+      groupID === group.id ?
+        {
+          ...group,
+          filters: group.filters.map(filter =>
+            filterID === filter.id ?
+              {
+                ...filter,
+                col: col,
+                type: type,
+                op: op,
+                value: value
+              }
+            : filter
+          )
+        }
+      : group
+    ),
+  })),
+
+  updateFilterOps: (groupID, filterID, op) => set((state) => ({
+    filterGroups: state.filterGroups.map((group) =>
+      groupID === group.id ?
+        {
+          ...group,
+          filters: group.filters.map(filter =>
+            filterID === filter.id ?
+              {
+                ...filter,
+                op: op,
+              }
+            : filter
+          )
+        }
+        : group
+      ),
+  })),
+
+  updateFilterValue: (groupID, filterID, value, dateType = undefined) => set((state) => ({
+    filterGroups: state.filterGroups.map((group) =>
+      groupID === group.id ?
+      {
+        ...group,
+        filters: group.filters.map(filter =>
+          filterID === filter.id ?
+            {
+              ...filter,
+              value: (dateType === "s") ? {...filter.value, start: value} : (dateType === "e") ? {...filter.value, end: value } : value
+            }
+          : filter
+        )
+      }
+      : group
+    ),
+  })),
+
+  removeFilter: (groupID, filterID) => set((state) => ({
+    filterGroups: state.filterGroups.map((group) =>
+      group.id === groupID ?
+        {
+          ...group,
+          filters: group.filters.filter((f) => f.id !== filterID)
+        }
+      : group
+    ),
+  })),
+
+  copyFilter: (filter) => set({
+    copiedFilter: {
+      col: filter.col,
+      type: filter.type,
+      op: filter.op,
+      value: filter.value
+    }
+  }),
+
+  pasteFilter: (groupID, filterID) => set((state) => ({
+    filterGroups: state.filterGroups.map((group) =>
+      groupID === group.id ?
+        {
+          ...group,
+          filters: group.filters.map(filter =>
+            filterID === filter.id ?
+              {
+                ...filter,
+                col: state.copiedFilter.col,
+                type: state.copiedFilter.type,
+                op: state.copiedFilter.op,
+                value: state.copiedFilter.value
+              }
+            : filter
+          )
+        }
+      : group
+  )})),
+
+
+}));
+
+export default useDataFilterStore;
+
@@ -1,15 +1,28 @@
 import {defineSlotRecipe, createSystem, defaultConfig, defineConfig, defineRecipe} from "@chakra-ui/react";

-// CONSOLIDATED ✔
+// REUSABLE GLASS SURFACE
+const glassSurface = {
+  bg: {base: "rgb(253 253 253 / 0.4)", _dark: "rgb(37 38 46 / 0.8)"},
+  backdropFilter: "blur(12px)",
+  WebkitBackdropFilter: "blur(12px)",
+  border: "1px solid",
+  borderColor: {base: "gray.200", _dark: "whiteAlpha.200"},
+  boxShadow: "sm",
+};
+
+/* ==========================================================================
+   RECIPES
+   ========================================================================== */
+
+// 1. Header
 const headerRecipe = defineSlotRecipe({
  slots: ["root", "search_bar", "user_info"],
  base: {
    root: {
-      bg: "{transparent}",
+      bg: "transparent",
      color: "text",
      width: "100%",
      height: "100%",
-      display: "flex",
      flexDirection: "row",
      justifyContent: "space-between",
      alignItems: "center",
@@ -18,9 +31,14 @@ const headerRecipe = defineSlotRecipe({
    search_bar: {
      width: "100%",
      // input element in search bar component
+      "& svg": {
+        w: "20px",
+        h: "20px",
+      },
      "& input": {
        width: "410px",
-      }
+        borderRadius: "full",
+      },
    },
    user_info: {
      flexDirection: "row",
@@ -32,22 +50,30 @@ const headerRecipe = defineSlotRecipe({
      // The Text component
      "& p": {
        fontWeight: "600",
-        fontSize: "md"     // equivalent to 16px
-      }
-    }
+        fontSize: "md",
+      },
+    },
  },
 });

-// CONSOLIDATED ✔
+// 2. Sidebar
 const sidebarRecipe = defineSlotRecipe({
-  slots: ["root", "logo", "logo_text", "footer", "button_text", "buttons", "collapse_button", "color_mode_button"],
+  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, #99000040 20%, #FF660040 60%, #EEEE0040 100%)", // this is too pale for light mode imo
-        base: "linear-gradient(to bottom right, #97282880 20%, #EB7F3160 60%, #FCAD3840 100%)",    // colors from: https://colorhunt.co/palette/972828e45742eb7f31fcad38
-        _dark: "linear-gradient(to bottom right, #9900003C 20%, #FF66003C 60%, #FFC0003C 100%)"
+        base: "linear-gradient(to bottom right, #B63B1F88 20%, #FF990060 70%, #FFBF0040 90%)",
+        _dark: "linear-gradient(to bottom right, #9900004C 20%, #FF66003C 60%, #FFAE003C 100%)"
      },

      // 2. The glass blur effect
@@ -62,8 +88,6 @@ const sidebarRecipe = defineSlotRecipe({
      borderRight: "none",

      borderRadius: "2xl",
-      // boxShadow: "0 4px 30px rgba(0, 0, 0, 0.1)",
-      // boxShadow: "-10px 4px 30px rgba(0, 0, 0, 0.1)",
      width: "100%",
      height: "calc(100% - 16px)",
      margin: "8px",
@@ -92,18 +116,18 @@ const sidebarRecipe = defineSlotRecipe({

      "& svg": {
        transition: "stroke-width 0.4s ease",
-        flexShrink: "0"
+        flexShrink: "0",
      },

      _hover: {
        bg: "rgba(255, 255, 255, 0.2)",
        color: "{text}",
-        "& svg": {
-          strokeWidth: "3"
-        },
+        // "& svg": {
+        //   strokeWidth: "3",
+        // },
        "& span": {
-          fontWeight: "700",
-        }
+          fontWeight: "800",
+        },
      },

      fontSize: "l",
@@ -122,12 +146,8 @@ const sidebarRecipe = defineSlotRecipe({
        _hover: {
          bg: "{MainBackground}",
          color: "{textInverted}",
-          "& svg": {
-            strokeWidth: "2" // Keeps the active icon at normal thickness on hover
-          },
-          "& span": {
-            fontWeight: "500",
-          }
+          "& svg": { strokeWidth: "2" },
+          "& span": { fontWeight: "500" },
        },

        // The Top Inverted Curve
@@ -156,7 +176,7 @@ const sidebarRecipe = defineSlotRecipe({
          WebkitMaskImage: "radial-gradient(circle at bottom left, transparent 25px, black 25.5px)",
          maskImage: "radial-gradient(circle at bottom left, transparent 25px, black 25.5px)",
          pointerEvents: "none",
-        }
+        },
      },
    },
    logo: {
@@ -197,30 +217,8 @@ const sidebarRecipe = defineSlotRecipe({
        _hover: {
          bg: "transparent",
        },
-      }
-    }
-    // opened_theme_button: {
-    //   width: "100%",
-    //   align: "center",
-    //   justifyContent: "right",
-    //   mr: 6,
-    //   // "& button": {
-    //   //   alignSelf: "center",
-    //   //   transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
-    //   //   _hover: {
-    //   //     bg: "transparent",
-    //   //   }
-    //   // }
-    // },
-    // closed_theme_button: {
-    //   // ml: 0.9,
-    //   // "& button": {
-    //   //   transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
-    //   //   _hover: {
-    //   //     bg: "transparent",
-    //   //   }
-    //   // }
-    // },
+      },
+    },
  },
  variants: {
    state: {
@@ -250,7 +248,7 @@ const sidebarRecipe = defineSlotRecipe({
  }
 });

-// CONSOLIDATED ✔
+// 3. Dashboard Shell
 const dashboardRecipe = defineRecipe({
  base: {
    height: "100vh",
@@ -260,12 +258,12 @@ const dashboardRecipe = defineRecipe({
    // selects the third div in the grid layout (the canvas)
    "& > div:nth-of-type(3)": {
      width: "100%",
-      overflow: "auto",
+      overflowY: "auto",
    }
  }
 });

-// CONSOLIDATED ✔
+// 4. Home Page Tabs
 const homeRecipe = defineSlotRecipe({
  slots: ["root", "header", "body"],
  base: {
@@ -290,305 +288,52 @@ const homeRecipe = defineSlotRecipe({
      "& > div": {
        alignItems: "center",
        gap: 2,
-
-        // icon in each tab button
-        "& svg": {
-          // TODO: bring over svg styling
-        }
-      }
+      },
    },
    body: {
      flex: 1,
      overflow: "auto",
-    }
+    },
  },
-})
+});

-// const canvasRecipe = defineRecipe({
-//   base: {
-//     bg: "{transparent}",
-//     zIndex: "-1",
-//     color: "{text}"
-//   }
-// });
-
-// const widgetRecipe = defineSlotRecipe({
-//   slots: ["root", "header", "canvas"],
-//   base: {
-//     root: {
-//       flexDirection: "column",
-//       gap: "1",
-//       position: "relative",
-//       bg: "base100",
-//       borderRadius: "md",
-//       p: "1",
-//       paddingBottom: "2",
-//       border: "1px solid",
-//       borderColor: "{base300}",
-//       textAlign: "center",
-//       height: "100%",
-//       // position: "fixed"
-//     },
-//     header: {
-//       flexShrink: "0",
-//       bg: "{base300}",
-//       color: "{text}",
-//       cursor: "move",
-//       borderRadius: "sm",
-//       whiteSpace: "nowrap",
-//       textAlign: "left",
-//       pl: "2"
-//     },
-//     canvas: {
-//       flex: "1 1 auto",
-//       bg: "transparent",
-//       color: "{text}",
-//       cursor: "default",
-//       borderRadius: "md",
-//       overflow: "auto",
-//     }
-//   }
-// });
-
-// USED IN COMPONENTS:
-// * Settings Button
-// * My Dashboard
-const glassPanelRecipe = defineSlotRecipe({
+// 5. Dashboard Widget Card
+const widgetRecipe = defineSlotRecipe({
  slots: ["root", "header", "body"],
-
-  // 🧊 THE GLASS MATH (Applies to everything)
  base: {
    root: {
      display: "flex",
      flexDirection: "column",
      position: "relative",
+      ...glassSurface,
+      width: "100%",
+      height: "100%",
+      borderRadius: "3xl",
      overflow: "hidden",
-      bg: {base: "rgba(255, 255, 255, 0.4)", _dark: "rgba(255, 255, 255, 0.04)"},
-      backdropFilter: "blur(12px)",
-      WebkitBackdropFilter: "blur(12px)",
-      border: "1px solid",
-      borderColor: {base: "gray.200", _dark: "whiteAlpha.200"},
-      boxShadow: "sm",
-    }
-  },
-
-  // 📏 THE LAYOUTS (Applies selectively)
-  variants: {
-    layout: {
-      widget: {
-        root: {
-          width: "100%",
-          height: "100%",
-          borderRadius: "3xl",
-        },
-        header: {
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-          px: 3,
-          pt: 2,
-          pb: 0,
-
-          "& > p": {
-            color: "titleColor",
-            fontWeight: "500",
-            fontSize: "16px",
-
-            // the following three specifications are equivalent to Chakra's 'truncate' prop
-            whiteSpace: "nowrap",
-            overflow: "hidden",
-            textOverflow: "clip",
-          },
-
-          "& > button": {
-            borderRadius: "xl",
-
-            _hover: {
-              color: "white",
-              bg: "gray.500",
-            },
-          }
-        },
-        body: {
-          flex: "1",
-          overflow: "hidden",
-          position: "relative",
-          px: 1,
-          pb: 1,
-          pt: 0
-        }
-      },
-      dropdown: {
-        root: {
-          borderRadius: "xl",
-          p: 1
-        }
-        // (Header and body slots are ignored here because dropdowns don't use them)
-      },
-      popover: {
-        root: {
-          borderRadius: "2xl",
-          p: 0,
-          boxShadow: "xl",
-          minW: "240px",
-          maxW: "60%",
-          minH: "80%",
-          overflow: "hidden",
-          // OVERRIDES: Make the background 85-90% opaque instead of 40%
-          bg: {
-            base: "rgba(255, 255, 255, 0.75)",
-            _dark: "rgba(20, 22, 25, 0.8)"
-          },
-
-          // OVERRIDES: Increase the blur just to smooth out any stubborn gridlines
-          backdropFilter: "blur(15px)",
-          WebkitBackdropFilter: "blur(15px)",
-
-
-          // IMPORTANT: everything below is specific to the widget menu found in the settingsButton component
-          // dialog header
-          "& > div.chakra-dialog__header": {
-            bg: "transparent",
-            color: {
-              base: "gray.800",
-              _dark: "white"
-            },
-            py: 4,
-            borderColor: {
-              base: "gray.200",
-              _dark: "whiteAlpha.200"
-            },
-
-            // title
-            "& h2": {
-              fontSize: "xl",
-              fontWeight: "bold"
-            },
-          },
-
-          // dialog body
-          "& > div.chakra-dialog__body": {
-            p: 0,
-
-            // box container of the widget category menu
-            "& div.chakra-tabs__root > div:first-child": {
-              position: "relative",
-              display: "flex",
-              maxW: "100%",
-              mx: 5,
-              mt: 4,
-              mb: 6
-            },
-
-            // the horizontal widget categories menu
-            "& div.chakra-tabs__list": {
-              bg: {
-                base: "rgba(0, 0, 0, 0.04)",
-                _dark: "rgba(255, 255, 255, 0.05)"
-              },
-              p: 1,
-              borderRadius: "full",
-              display: "flex",
-              flexWrap: "nowrap",
-              overflowX: "auto",
-              maxW: "100%",
-              border: "1px solid",
-              borderColor: {
-                base: "blackAlpha.50",
-                _dark: "whiteAlpha.100"
-              },
-              scrollbarWidth: "none",
-              "&::-webkit-scrollbar": {display: "none"},
-
-              // the pill shaped menu options
-              "& button.chakra-tabs__trigger": {
-                px: 5,
-                py: 2,
-                borderRadius: "full",
-                whiteSpace: "nowrap",
-                flexShrink: 0,
-                color: {
-                  base: "gray.500",
-                  _dark: "gray.400"
-                },
-                fontWeight: "medium",
-                transition: "background-color 0.2s, color 0.2s, box-shadow 0.2s",
-                _hover: {
-                  color: {
-                    base: "gray.800",
-                    _dark: "gray.200"
-                  },
-                },
-                _selected: {
-                  bg: {
-                    base: "white",
-                    _dark: "rgba(255, 255, 255, 0.12)"
-                  },
-                  color: {
-                    base: "blue.600",
-                    _dark: "blue.200"
-                  },
-                  boxShadow: "sm",
-                  fontWeight: "bold",
-                }
-              }
-            },
-
-            // base styling applied to both chevron navigators
-            "& div.chakra-tabs__root > div:first-child div:has(svg)": {
-              position: "absolute",
-              top: "0",
-              bottom: "0",
-              w: "50px",
-              alignItems: "center",
-              justifyContent: "center",
-              zIndex: 2,
-              cursor: "pointer",
-              bg: {
-                base: "rgba(255, 255, 255, 0.7)",
-                _dark: "rgba(30, 30, 30, 0.8)"
-              },
-              color: {
-                base: "gray.600",
-                _dark: "gray.300"
-              },
-              backdropFilter: "blur(1px)",
-              transition: "background-color 0.2s",
-
-              _hover: {
-                color: {
-                  base: "blue.500",
-                  _dark: "blue.300"
-                },
-                bg: {
-                  base: "rgba(255, 255, 255, 0.9)",
-                  _dark: "rgba(40, 40, 40, 0.95)"
-                },
-              },
-
-              "&:has(.lucide-chevron-left)": {
-                left: 0,
-                borderTopLeftRadius: "full",
-                borderBottomLeftRadius: "full",
-                // Bites a transparent circle out of the flat right side!
-                WebkitMaskImage: "radial-gradient(circle at 100% 50%, transparent 30px, black 19px)",
-                maskImage: "radial-gradient(circle at 100% 50%, transparent 30px, black 35px)",
-              },
-
-              "&:has(.lucide-chevron-right)": {
-                right: 0,
-                borderTopRightRadius: "full",
-                borderBottomRightRadius: "full",
-                // THE MAGIC: Bites a transparent circle out of the flat left side!
-                WebkitMaskImage: "radial-gradient(circle at 0% 50%, transparent 30px, black 19px)",
-                maskImage: "radial-gradient(circle at 0% 50%, transparent 30px, black 35px)",
-              }
-            }
-
-          }
-        }
-      }
    },
+    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: {
@@ -597,16 +342,202 @@ const glassPanelRecipe = defineSlotRecipe({
          borderWidth: "2px",
          borderColor: "orange.300",
          cursor: "grab",
+        },
+      },
+    },
+  },
+});
+
+// 6. TRUE POPOVER: Compact floating card for 3-dots menus
+const glassPopoverRecipe = defineSlotRecipe({
+  slots: ["content", "arrow", "positioner", "date", "checkboxcard", "checkbox", "switch", "button"],
+  base: {
+    content: {
+      ...glassSurface,
+      borderRadius: "1rem",
+      p: 3,
+      boxShadow: "lg",
+      bg: {base: "rgb(246 246 246 / 0.85)", _dark: "rgb(51 53 64 / 0.80)"},
+      backdropFilter: "blur(8px)",
+      WebkitBackdropFilter: "blur(8px)",
+    },
+    date: {
+      color: "text",
+      bg: "widgetBadgeBg",
+      borderRadius: "lg",
+      h: "2rem",
+      _focus: {
+        borderStyle: "none",
+      }
+    },
+    checkboxcard: {
+      // applies to both dark & lt modes
+      w: "100%",
+      borderRadius: "lg",
+      color: "text",
+
+      "& div[data-part='control']": {
+        alignItems: "center",
+        padding: "6px",
+      },
+
+      bg: "widgetItemBg",
+      _checked: {
+        boxShadow: "none",
+        bg: "rgb(182 59 31 / 0.2)",
+        borderColor: "#B63B1F"
+      },
+
+      _dark: {
+        bg: "widgetBadgeBg",
+        _checked: {
+          boxShadow: "none",
+          color: "text",
+          bg: "#503D40",
+          borderColor: "#B55038"
+        }
+      }
+    },
+    checkbox: {
+      bg: "widgetInnerBadgeBg",
+      _checked: {
+        bg: "#B63B1F",
+        borderColor: "#B63B1F"
+      },
+
+      _dark: {
+        bg: "widgetBadgeBg",
+        _checked: {
+          color: "text",
+          bg: "#B55038",
+          borderColor: "#B55038"
+        }
+      }
+    },
+    switch: {
+      color: "text",
+      bg: "widgetBadgeBg",
+
+      _checked: {
+        bg: "#B63B1F",
+
+        _dark: {
+          bg: "#b55038"
+        }
+      },
+    },
+    button: {
+      w: "100%",
+      fontSize: "xs",
+      h: "2rem",
+      borderRadius: "lg",
+
+      color: "white",
+      bg: "#B63B1F",
+      _hover: {
+        color: "text",
+        bg: "#B63B1F32"
+      },
+
+      _dark: {
+        bg: "#b55038",
+        color: "text",
+        _hover: {
+          bg: "#503D40"
        }
      }
    }
  },
-
-  defaultVariants: {
-    layout: "widget"
-  }
 });

+// 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: "rgb(22 23 28 / 0.9)"},
+      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)"
+        },
+      },
+    },
+  },
+});
+
+// 8. Pill/Glass Expanding Tab Button
 const glassTabRecipe = defineRecipe({
  base: {
    display: "flex",
@@ -630,7 +561,7 @@ const glassTabRecipe = defineRecipe({

    // --- 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)"},
+    bg: {base: "rgba(255, 255, 255, 0.4)", _dark: "#1e2027"},
    backdropFilter: "blur(12px)",
    WebkitBackdropFilter: "blur(12px)",
    border: "1px solid",
@@ -644,7 +575,7 @@ const glassTabRecipe = defineRecipe({
      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)"},
+      bg: {base: "rgba(255, 255, 255, 0.8)", _dark: "#191a22"},
      borderColor: {base: "rgba(0, 0, 0, 0.1)", _dark: "rgba(255, 255, 255, 0.15)"},
      color: "fg",
      textDecoration: "none",
@@ -663,29 +594,77 @@ const glassTabRecipe = defineRecipe({
        bg: "{gooeyButtonBackground}",
        cursor: "default",
        textDecoration: "none",
-      }
+      },
+    },
+  },
+});
+
+// 9. Data Explorer Page
+const dataExplorerRecipe = defineSlotRecipe({
+  slots: ["root", "query_builder", "data_table"],
+  base: {
+    root: {
+
+    },
+    query_builder: {
+      // "& button": {
+      //   borderRadius: "lg",
+      //
+      //   color: "white",
+      //   bg: "#B63B1F",
+      //   _hover: {
+      //     color: "text",
+      //     bg: "#B63B1F32"
+      //   },
+      //
+      //   _dark: {
+      //     bg: "#b55038",
+      //     color: "text",
+      //     _hover: {
+      //       bg: "#503D40"
+      //     }
+      //   }
+      // },
+
    }
  }
 });

+/* ==========================================================================
+   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: {
+    // the shadow box behind widgets when editing layout
    ".react-grid-placeholder": {
      background: "#c0d2e3ff !important",
      borderColor: "#a9b6c2ff !important",
      boxShadow: "0 0 10px #c0d2e3ff !important",
      opacity: "1 !important",
-      borderRadius: "5px",
+      borderRadius: "3xl",
      _dark: {
-        background: "#393c3fff !important",
+        background: "#3B3D49FF !important",
        borderColor: "#000000ff !important",
        boxShadow: "0 0 10px #16181bff !important",
        opacity: "1 !important",
      },
    },
-    ".react-resizable-handle-se": {
-      zIndex: "1",
-    },
    "*": {
      scrollbarWidth: "thin",
      scrollbarColor: "#a0aec0 transparent",
@@ -706,59 +685,43 @@ 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': {
+    // this is what changes the maps colors to 'dark mode'
+    ".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"
+    // removes the animation of moving widgets, seems very harsh and jumpy w/o animation
+    // ".react-grid-item": {
+    //   transition: "none !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"
-    },
  },
  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: "#FFFFFF"}},
-        textInverted: {value: {base: "#000000", _dark: "#FFFFFF"}},
-        // icon: {value: {base: "#000000", _dark: "#FFFFFF"}},
+        text: { value: { base: "#131315", _dark: "rgb(234 234 234 / 0.94)" } },
+        textInverted: { value: { base: "#000000", _dark: "#FFFFFF" } }, // Fixed: Properly inverted
+        MainBackground: { value: { base: "#f1f1f1", _dark: "#16171c" } },
+        titleColor: { value: { base: "colors.gray.800", _dark: "#e1e1e1" } },
+        iconColor: { value: { base: "#191919", _dark: "rgb(255 255 255 / 0.82)" } }, // Fixed: Visible in dark mode
+        glassSeperator: { value: { base: "#0000001A", _dark: "#FFFFFF3F" } },
+        gooeyButtonBackground: {value: {base: "rgba(255, 255, 255, 0.1)", _dark: "#333540"}},

-        gooeyButtonBackground: {value: {base: "rgba(255, 255, 255, 0.1)", _dark: "rgba(255, 255, 255, 0.1)"}},
-        MainBackground: {value: {base: "#F9F9F9", _dark: "#141414"}},
-        titleColor: {value: {base: "gray.800", _dark: "#FFFFFF"}},
-        iconColor: {value: {base: "gray.600", _dark: "#000000"}},
-        glassSeperator: {value: {base: "#0000001A", _dark: "#FFFFFF3F"}},
+        // WIDGET SPECIFIC VALUES
+        widgetItemBg: { value: { base: "rgb(115 132 166 / 0.17)", _dark: "rgb(51 53 64 / 0.8)" } },
+        widgetItemExpandedBg: { value: { base: "rgb(184 197 220 / 0.17)", _dark: "rgb(59 61 73 / 0.8)" } },
+        widgetBadgeBg: { value: { base: "rgb(154 163 179 / 0.45)", _dark: "rgb(75 77 90 / 0.8)" } },
+        widgetInnerBadgeBg: { value: { base: "rgb(224 226 232 / 0.6)", _dark: "rgb(100 103 119 / 0.8)" } },
+        widgetTextMuted: { value: { base: "#262627", _dark: "rgb(236 236 236 / 0.9)" } },
+
+        // ALERT COLORS
+        alertRed: { value: { base: "colors.red.600", _dark: "colors.red.400" } },
+        alertOrange: { value: { base: "colors.orange.600", _dark: "colors.orange.400" } },
+        alertYellow: { value: { base: "colors.yellow.600", _dark: "colors.yellow.400" } },
+        alertGreen: { value: { base: "colors.green.600", _dark: "colors.green.400" } },
      },
    },
    tokens: {
@@ -768,19 +731,18 @@ const config = defineConfig({
    },
    recipes: {
      dashboard: dashboardRecipe,
-      // canvas: canvasRecipe,
-      glassTab: glassTabRecipe
+      glassTab: glassTabRecipe,
    },
    slotRecipes: {
      header: headerRecipe,
      sidebar: sidebarRecipe,
-      // widget: widgetRecipe,
-      glassPanel: glassPanelRecipe,
      home: homeRecipe,
+      widget: widgetRecipe,
+      glassPopover: glassPopoverRecipe,
+      glassDialog: glassDialogRecipe,
+      dataExplorer: dataExplorerRecipe,
    },
  },
 });

-
-// Define semantic tokens and export recipes
 export const system = createSystem(defaultConfig, config);
Author	SHA1	Message	Date
vkuchenik	e597adfd13	fix: copy fn in zustand was directly altering state (anti pattern) and crashing the page	2026-11-12 10:23:44 -08:00
vkuchenik	34a2501e5e	refactor: now using MyQueryBuilder (temp name) in Data Explorer pg as it implements zustand state management to aid the transition from retriggering an api call on every new filter added	2026-11-12 09:59:00 -08:00
vkuchenik	39ee717a6c	add: attempted to create a slot recipe for the data explorer pg	2026-11-12 09:54:44 -08:00
vkuchenik	d7ecbc6f65	refactor: adjusting height of header to reduce extra white space below search bar	2026-11-12 09:53:08 -08:00
vkuchenik	ebc3f38b0c	Merge branch '20261028_1547_add_data_explorer_page' into '20260605_1123_Hight_updates' add: new data explorer page See merge request vkuchenik/website-framework!118	2026-11-10 17:23:05 +00:00
vkuchenik	0f209c2e25	add: new data explorer page	2026-11-10 17:23:04 +00:00
vkuchenik	23ecfcf890	Merge branch '20261022_1505_ui_touchups' into '20260605_1123_Hight_updates' Updated UI for the widget settings menu See merge request vkuchenik/website-framework!117	2026-11-10 17:07:59 +00:00
vkuchenik	882724ea2d	Updated UI for the widget settings menu	2026-11-10 17:07:58 +00: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