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

Refactor theme.js for better separation of component styling

See merge request vkuchenik/website-framework!114

client/Dockerfile

@@ -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;"]

client/nginx.conf

@@ -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;
+    }
+}

client/src/App.jsx

@@ -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>

client/src/components/Widgets/LlmAlChangesQuadPlot.jsx

@@ -8,6 +8,10 @@ export default function LlmAlChangesQuadPlot(props) {
     let tn_percent = 0;
     let fp_percent = 0;
     let fn_percent = 0;
+    let jf_percent = 0;
+    let error_count = 0;
+    let no_dvar_data_count = 0;
+
 
     // Clean, single-line data fetching
     const { data: apiData, isLoading, error } = VdapApi('/api/v2/llm_quadrant_plot');
@@ -32,32 +36,34 @@ export default function LlmAlChangesQuadPlot(props) {
 
     if (apiData) {
         console.log(apiData);
-        tp_percent = ((apiData[0]['tp_count']/apiData[0]['tot_count'])*100).toFixed(2);
-        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>
     )

client/src/components/layout/Sidebar.jsx

@@ -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() {

client/src/constants/widgetRegistry.jsx

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

client/src/pages/data_explorer/DataExplorer.jsx

@@ -0,0 +1,190 @@
+import React, { useState, useRef, useEffect } from "react";
+import { Box, Stack, Separator, Center, Spinner, Alert, Flex } from "@chakra-ui/react";
+import { toaster } from "../../components/ui/toaster.jsx"; // Adjust path to your v3 toaster if needed
+
+// Import our newly consolidated engine and presentation components
+import QueryBuilder from "./QueryBuilder.jsx";
+import DataTable from "./DataTable.jsx";
+// import { exportToCSV } from "../utils/csvExport.js";
+
+export default function DataExplorer() {
+  // 1. Core State
+  const [results, setResults] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [allColumns, setAllColumns] = useState([]);
+  const isReadyRef = useRef(false);
+
+  // 2. The Master Query State
+  const [url, setUrl] = useState({
+    source: "",
+    page: 1,
+    columns: [],
+    bundles: [],
+    ordering: "id",
+  });
+
+  // 3. API & URL Logic
+  const buildUrlParams = () => {
+    const { source, page, columns, bundles, ordering } = url;
+    const params = new URLSearchParams();
+
+    if (bundles.length > 0) {
+      // Scrub out incomplete filters before sending to the backend
+      const cleanBundles = bundles.map(bundle => {
+        const validFilters = bundle.filters
+          .filter(f => f.column && f.type && f.value)
+          .map(({ id, ...rest }) => rest);
+        return { ...bundle, filters: validFilters };
+      }).filter(bundle => bundle.filters.length > 0); // Only send bundles that actually have filters
+
+      if (cleanBundles.length > 0) {
+        params.append("bundles", JSON.stringify(cleanBundles));
+      }
+    }
+
+    if (source) params.append("source", source);
+    if (columns?.length > 0) params.append("columns", columns.join(","));
+    if (ordering) params.append("ordering", ordering);
+    if (page) params.append("page", page);
+
+    return params.toString();
+  };
+
+  const getColumns = async (endpoint) => {
+    setError(null);
+    isReadyRef.current = false; // does this need to be set to true at the end?
+    try {
+      // 🚨 Relative pathing so Traefik proxy handles it
+      const response = await fetch(endpoint);
+      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+
+      const data = await response.json();
+      setAllColumns(data);
+      setUrl({ ...url, columns: Object.keys(data.types), source: data.view }); // changed it from (prev => {...prev, columns: __, source: __ })
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const pullTable = async () => {
+    setIsLoading(true);
+    setError(null);
+
+    if (!url.source) {
+      setError("Please select a source (table) before fetching data.");
+      setIsLoading(false);
+      return;
+    }
+
+    try {
+      // 🚨 Relative pathing for your production API
+      const response = await fetch(`/api/v3/table_view?${buildUrlParams()}`);
+      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+
+      const data = await response.json();
+      setResults(data);
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Auto-fetch when pagination, columns, or sorting changes (but skip first render)
+  useEffect(() => {
+    if (! isReadyRef.current) {
+      isReadyRef.current = false; // why are we resetting the readyRef back to false since it already is false?
+      return;
+    }
+    pullTable();
+  }, [url.page, url.columns, url.ordering]);
+
+  // 4. Export Utility
+  const handleDownloadCSV = () => {
+    if (results?.results?.length > 0) {
+      const timestamp = new Date().toISOString().slice(0, 10);
+      const filename = `${url.source}_${timestamp}.csv`;
+      // exportToCSV(results.results, filename);
+      toaster.create({
+        title: "Dummy Success Toaster (csv download fn has been disabled for now)",
+        description: `Downloaded ${results.results.length} records as CSV`,
+        type: "success",
+      });
+    } else {
+      toaster.create({
+        title: "No Data",
+        description: "No results to download",
+        type: "error",
+      });
+    }
+  };
+
+  // 5. Render Shell
+  return (
+    // 🚨 Stripped hardcoded #FFFBFA background.
+    // This Flex container will perfectly fill your new Sidebar Route canvas.
+    <Flex p={8} flex="1" direction="column" overflowY="auto" bg="transparent" h="100%">
+      <Stack direction="column" gap={6} align="stretch" w="100%">
+
+        {/* The Engine */}
+        <QueryBuilder
+          url={url}
+          setUrl={setUrl}
+          allColumns={allColumns}
+          getColumns={getColumns}
+          pullTable={pullTable}
+          isLoading={isLoading}
+          isReadyRef={isReadyRef}
+        />
+
+        {results && <Separator borderColor="widgetBadgeBg" />}
+
+        {/* Global Loading & Error States */}
+        {isLoading && (
+          <Center p={10}>
+            <Spinner color="blue.500" size="xl" thickness="4px" />
+          </Center>
+        )}
+
+        {error && (
+          <Alert.Root status="error" mt={4} bg="red.900" color="white">
+            <Alert.Indicator />
+            <Alert.Content>
+              <Alert.Title>Error Fetching Data</Alert.Title>
+              <Alert.Description>{error}</Alert.Description>
+            </Alert.Content>
+          </Alert.Root>
+        )}
+
+        {/* The Display (Table, Pagination, Download, Columns) */}
+        {results && !isLoading && !error && (
+          <Box w="100%">
+            {results.results.length > 0 ? (
+              <DataTable
+                data={results.results}
+                count={results.count}
+                url={url}
+                setUrl={setUrl}
+                allColumns={allColumns.types}
+                isLoading={isLoading}
+                onDownload={handleDownloadCSV}
+              />
+            ) : (
+              <Alert.Root status="warning" mt={4} bg="widgetItemExpandedBg" color="text">
+                <Alert.Indicator />
+                <Alert.Content>
+                  <Alert.Title>No Results Found</Alert.Title>
+                  <Alert.Description>Try loosening your filter criteria.</Alert.Description>
+                </Alert.Content>
+              </Alert.Root>
+            )}
+          </Box>
+        )}
+
+      </Stack>
+    </Flex>
+  );
+};

client/src/pages/data_explorer/DataTable.jsx

@@ -0,0 +1,220 @@
+import React from "react";
+import {
+  Button,
+  ButtonGroup,
+  Table,
+  HoverCard,
+  Text,
+  Flex,
+  Menu,
+  Portal,
+  useCheckboxGroup,
+  IconButton,
+  Pagination,
+} from "@chakra-ui/react";
+import { ChevronDown, ChevronLeft, ChevronRight, Download, Files, ClipboardPaste } from 'lucide-react';
+// import { LuChevronDown, LuChevronLeft, LuChevronRight } from "react-icons/lu";
+// import { FiDownload, FiCopy, FiClipboard } from "react-icons/fi";
+
+// ============================================================================
+// 1. COLUMN SELECTOR (Toggles visible columns)
+// ============================================================================
+const ColumnSelector = ({ allColumns, url, setUrl, isLoading }) => {
+  const group = useCheckboxGroup({ defaultValue: url.columns || Object.keys(allColumns) });
+
+  return (
+    <Menu.Root closeOnSelect={false}>
+      <Menu.Trigger asChild>
+        <Button variant="surface" bg="widgetBadgeBg" color="text" _hover={{ bg: "widgetItemExpandedBg" }}>
+          Show Columns <ChevronDown />
+        </Button>
+      </Menu.Trigger>
+      <Portal>
+        <Menu.Positioner>
+          <Menu.Content bg="widgetItemBg" borderColor="widgetBadgeBg">
+            <Menu.ItemGroup>
+              <Menu.ItemGroupLabel color="widgetTextMuted">Available Columns</Menu.ItemGroupLabel>
+              {Object.keys(allColumns).map((colName) => (
+                <Menu.CheckboxItem
+                  key={colName}
+                  value={colName}
+                  checked={group.value.includes(colName)}
+                  onCheckedChange={() => group.toggleValue(colName)}
+                  color="text"
+                >
+                  <Menu.ItemIndicator />
+                  {colName}
+                </Menu.CheckboxItem>
+              ))}
+            </Menu.ItemGroup>
+            <Menu.Item
+              onClick={() => setUrl((prev) => ({ ...prev, columns: [...group.value] }))}
+              p="2"
+            >
+              <Button size="sm" w="100%" loading={isLoading} bg="blue.600" color="white" _hover={{ bg: "blue.500" }}>
+                Apply Columns
+              </Button>
+            </Menu.Item>
+          </Menu.Content>
+        </Menu.Positioner>
+      </Portal>
+    </Menu.Root>
+  );
+};
+
+// ============================================================================
+// 2. PAGE FOOTER (Pagination & Query Saving)
+// ============================================================================
+const PageFooter = ({ count, pageSize, url, setUrl }) => {
+  const page = url.page || 1;
+
+  const handleSaveQuery = () => {
+    navigator.clipboard.writeText(JSON.stringify(url)).then(() => {
+      alert("Query copied to clipboard!"); // Optional: replace with your Toast
+    });
+  };
+
+  const handlePasteQuery = async () => {
+    try {
+      const text = await navigator.clipboard.readText();
+      const clipBoardText = JSON.parse(text);
+      setUrl(clipBoardText);
+    } catch (err) {
+      console.error("Invalid clipboard content", err);
+      alert("Failed to paste. Make sure you copied a valid query.");
+    }
+  };
+
+  return (
+    <Flex w="100%" justify="space-between" align="center" mt="4">
+      {/* Query Save/Paste Tools */}
+      <ButtonGroup size="sm" attached>
+        <Button onClick={handleSaveQuery} variant="outline" borderColor="widgetBadgeBg" color="text">
+          <Files style={{ marginRight: "8px" }} /> Save Query
+        </Button>
+        <Button onClick={handlePasteQuery} variant="outline" borderColor="widgetBadgeBg" color="text">
+          <ClipboardPaste style={{ marginRight: "8px" }} /> Paste Query
+        </Button>
+      </ButtonGroup>
+
+      {/* Pagination Controls */}
+      <Pagination.Root count={count} pageSize={pageSize} page={page}>
+        <ButtonGroup variant="ghost" size="sm">
+          <Pagination.PrevTrigger asChild>
+            <IconButton onClick={() => setUrl((prev) => ({ ...prev, page: page - 1 }))} isDisabled={page <= 1} color="text">
+              <ChevronLeft />
+            </IconButton>
+          </Pagination.PrevTrigger>
+
+          <Pagination.Items
+            render={(pageItem) => (
+              <IconButton
+                key={pageItem.value}
+                variant={pageItem.value === page ? "surface" : "ghost"}
+                bg={pageItem.value === page ? "widgetBadgeBg" : "transparent"}
+                color="text"
+                onClick={() => setUrl((prev) => ({ ...prev, page: pageItem.value }))}
+              >
+                {pageItem.value}
+              </IconButton>
+            )}
+          />
+
+          <Pagination.NextTrigger asChild>
+            <IconButton onClick={() => setUrl((prev) => ({ ...prev, page: page + 1 }))} isDisabled={page * pageSize >= count} color="text">
+              <ChevronRight />
+            </IconButton>
+          </Pagination.NextTrigger>
+        </ButtonGroup>
+      </Pagination.Root>
+    </Flex>
+  );
+};
+
+// ============================================================================
+// 3. MAIN DATA TABLE (The Exported Presentation Wrapper)
+// ============================================================================
+const DataTable = React.memo(({ data, count, url, setUrl, allColumns, isLoading, onDownload }) => {
+  const columns = Object.keys(data[0] || {});
+
+  const handleSort = (col) => {
+    let order = col;
+    if (url.ordering === col) {
+      order = `-${col}`;
+    }
+    setUrl((prev) => ({ ...prev, ordering: order }));
+  };
+
+  return (
+    <Flex direction="column" w="100%" gap="4">
+      {/* Top Table Toolbar */}
+      <Flex w="100%" justify="space-between" align="center">
+        {allColumns && (
+          <ColumnSelector allColumns={allColumns} url={url} setUrl={setUrl} isLoading={isLoading} />
+        )}
+        <Button onClick={onDownload} variant="outline" borderColor="widgetBadgeBg" color="text" size="sm" _hover={{ bg: "widgetItemExpandedBg" }}>
+          <Download style={{ marginRight: "8px" }} /> Download CSV
+        </Button>
+      </Flex>
+
+      {/* Main Scrollable Table */}
+      <Table.ScrollArea borderWidth="1px" borderColor="widgetBadgeBg" rounded="md" maxH="65vh" bg="widgetItemBg">
+        <Table.Root stickyHeader showColumnBorder size="sm">
+          <Table.Header>
+            <Table.Row bg="widgetItemExpandedBg">
+              {columns.map((col) => (
+                <Table.ColumnHeader key={col} color="text" py="2">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    color="text"
+                    onClick={() => handleSort(col)}
+                    w="100%"
+                    justifyContent="flex-start"
+                    _hover={{ bg: "widgetBadgeBg" }}
+                  >
+                    {col}{" "}
+                    <ChevronDown
+                      style={{
+                        opacity: url.ordering === col || url.ordering === `-${col}` ? 1 : 0,
+                        transform: url.ordering === col ? "rotate(180deg)" : "rotate(0deg)",
+                        transition: "transform 0.2s",
+                        marginLeft: "8px",
+                      }}
+                    />
+                  </Button>
+                </Table.ColumnHeader>
+              ))}
+            </Table.Row>
+          </Table.Header>
+
+          <Table.Body>
+            {data.map((row, i) => (
+              <Table.Row key={i} _hover={{ bg: "widgetItemExpandedBg" }}>
+                {columns.map((col) => (
+                  <Table.Cell key={col} maxW="150px" textAlign="start" truncate color="text" borderColor="widgetBadgeBg">
+                    <HoverCard.Root>
+                      <HoverCard.Trigger asChild>
+                        <span style={{ cursor: "pointer" }}>{row[col]}</span>
+                      </HoverCard.Trigger>
+                      <HoverCard.Positioner>
+                        <HoverCard.Content p="4" maxW="400px" whiteSpace="normal" wordBreak="break-word" rounded="md" shadow="lg" bg="widgetItemExpandedBg" color="text">
+                          <Text>{row[col]}</Text>
+                        </HoverCard.Content>
+                      </HoverCard.Positioner>
+                    </HoverCard.Root>
+                  </Table.Cell>
+                ))}
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table.Root>
+      </Table.ScrollArea>
+
+      {/* Bottom Pagination Footer */}
+      <PageFooter count={count} pageSize={50} url={url} setUrl={setUrl} />
+    </Flex>
+  );
+});
+
+export default DataTable;

client/src/pages/data_explorer/QueryBuilder.jsx

@@ -0,0 +1,318 @@
+import React, { useRef } from "react";
+import { Button, Stack, Flex, Field, NativeSelect, Input, HoverCard, Text, NumberInput, Box } from "@chakra-ui/react";
+import { Plus, CircleMinus, Files, ClipboardPaste, Trash } from 'lucide-react';
+// import { GrAdd, GrSubtractCircle } from "react-icons/gr";
+// import { FaCopy, FaPaste, FaTrash } from "react-icons/fa";
+
+// ============================================================================
+// 1. FILTER ROW (The individual criteria inputs)
+// ============================================================================
+const FilterRow = React.memo(({ filter, columns, setUrl, bundleId, copiedFilter }) => {
+  const types = {
+    AutoField: ["=", "<", ">", "<=", ">="],
+    IntegerField: ["=", "<", ">", "<=", ">="],
+    CharField: ["=", "contains"],
+    DateTimeField: ["range"],
+  };
+
+  const columnType = columns[filter.column];
+  const operators = types[columnType] || ["="]; // default to equals if unknown
+
+  const handleRemoveFilter = () => {
+    setUrl(prev => ({
+      ...prev,
+      bundles: prev.bundles.map((bundle) =>
+        bundle.id === bundleId ?
+          { ...bundle, filters: bundle.filters.filter((fil) => fil.id !== filter.id) }
+          : bundle
+      ),
+    }));
+  };
+
+  const updateFilterField = (field, value) => {
+    setUrl(prev => ({
+      ...prev,
+      bundles: prev.bundles.map(bundle =>
+        bundle.id === bundleId
+          ? {
+            ...bundle,
+            filters: bundle.filters.map(fil =>
+              fil.id === filter.id ? { ...fil, [field]: value } : fil
+            ),
+          }
+          : bundle
+      ),
+    }));
+  };
+
+  const handleColumnChange = (newCol) => {
+    setUrl((prev) => ({
+      ...prev,
+      bundles: prev.bundles.map((bundle) =>
+        bundle.id === bundleId
+          ? {
+            ...bundle,
+            filters: bundle.filters.map((fil) =>
+              fil.id === filter.id
+                ? { ...fil, column: newCol, type: columns[newCol], operator: null, value: null }
+                : fil
+            ),
+          }
+          : bundle
+      ),
+    }));
+  };
+
+  const handleDateChange = (type, newDate) => {
+    const currentValue = filter.value || { start: null, end: null };
+    const updatedValue = { ...currentValue, [type]: newDate || null };
+    updateFilterField("value", updatedValue);
+    updateFilterField("operator", "range");
+  };
+
+  return (
+    <Flex gap="2" align="center">
+      {/* Remove button */}
+      <HoverCard.Root positioning={{ placement: "top" }}>
+        <HoverCard.Trigger asChild>
+          <Button onClick={handleRemoveFilter} variant="ghost" size="sm" color="red.400">
+            <CircleMinus />
+          </Button>
+        </HoverCard.Trigger>
+        <HoverCard.Positioner>
+          <HoverCard.Content p="2" bg="widgetItemExpandedBg"><Text fontSize="sm">Remove Filter</Text></HoverCard.Content>
+        </HoverCard.Positioner>
+      </HoverCard.Root>
+
+      {/* Copy / Paste Buttons */}
+      <HoverCard.Root positioning={{ placement: "top" }}>
+        <HoverCard.Trigger asChild>
+          <Button onClick={() => (copiedFilter.current = { ...filter })} variant="ghost" size="sm" color="text">
+            <Files />
+          </Button>
+        </HoverCard.Trigger>
+        <HoverCard.Positioner>
+          <HoverCard.Content p="2" bg="widgetItemExpandedBg"><Text fontSize="sm">Copy Filter</Text></HoverCard.Content>
+        </HoverCard.Positioner>
+      </HoverCard.Root>
+
+      <HoverCard.Root positioning={{ placement: "top" }}>
+        <HoverCard.Trigger asChild>
+          <Button
+            onClick={() => {
+              if (copiedFilter.current) {
+                setUrl((prev) => ({
+                  ...prev,
+                  bundles: prev.bundles.map((bundle) =>
+                    bundle.id === bundleId
+                      ? {
+                        ...bundle,
+                        filters: bundle.filters.map((fil) =>
+                          fil.id === filter.id ? { ...copiedFilter.current, id: filter.id } : fil
+                        ),
+                      }
+                      : bundle
+                  ),
+                }));
+              }
+            }}
+            variant="ghost"
+            size="sm"
+            color="text"
+          >
+            <ClipboardPaste />
+          </Button>
+        </HoverCard.Trigger>
+        <HoverCard.Positioner>
+          <HoverCard.Content p="2" bg="widgetItemExpandedBg"><Text fontSize="sm">Paste Filter</Text></HoverCard.Content>
+        </HoverCard.Positioner>
+      </HoverCard.Root>
+
+      {/* Column selector */}
+      <Field.Root w={columnType === "DateTimeField" ? "30%" : "30%"}>
+        <NativeSelect.Root>
+          <NativeSelect.Field
+            bg="widgetItemBg"
+            color="text"
+            value={filter.column ?? ""}
+            onChange={(e) => handleColumnChange(e.target.value)}
+          >
+            <option value="" disabled hidden>Select Column</option>
+            {Object.keys(columns).map((colName) => (
+              <option key={colName} value={colName}>{colName}</option>
+            ))}
+          </NativeSelect.Field>
+          <NativeSelect.Indicator />
+        </NativeSelect.Root>
+      </Field.Root>
+
+      {/* Operator selector */}
+      <Field.Root w={columnType === "DateTimeField" ? "20%" : "20%"}>
+        {columnType === "DateTimeField" ? (
+          <Input type="date" bg="widgetItemBg" color="text" value={filter.value?.start || ""} onChange={(e) => handleDateChange("start", e.target.value)} />
+        ) : (
+          <NativeSelect.Root>
+            <NativeSelect.Field bg="widgetItemBg" color="text" value={filter.operator ?? ""} onChange={(e) => updateFilterField("operator", e.target.value)}>
+              <option value="" disabled hidden>Operator</option>
+              {filter.type && operators.map((op) => <option key={op} value={op}>{op}</option>)}
+            </NativeSelect.Field>
+            <NativeSelect.Indicator />
+          </NativeSelect.Root>
+        )}
+      </Field.Root>
+
+      {/* Value input */}
+      <Field.Root w={columnType === "DateTimeField" ? "20%" : "50%"}>
+        {columnType === "DateTimeField" ? (
+          <Input type="date" bg="widgetItemBg" color="text" value={filter.value?.end || ""} onChange={(e) => handleDateChange("end", e.target.value)} />
+        ) : columnType === "IntegerField" || columnType === "AutoField" ? (
+          <NumberInput.Root value={filter.value ?? ""} onValueChange={(e) => updateFilterField("value", e.value)}>
+            <NumberInput.Input placeholder="Value" bg="widgetItemBg" color="text" />
+          </NumberInput.Root>
+        ) : (
+          <Input placeholder="Value" bg="widgetItemBg" color="text" value={filter.value ?? ""} onChange={(e) => updateFilterField("value", e.target.value)} />
+        )}
+      </Field.Root>
+    </Flex>
+  );
+});
+
+// ============================================================================
+// 2. FILTER BUNDLES (The AND logic groups)
+// ============================================================================
+const FilterBundle = ({ bundle, columns, url, setUrl, copiedFilter }) => {
+  const handleRemoveBundle = () => {
+    setUrl(prev => ({
+      ...prev,
+      bundles: prev.bundles.filter(b => b.id !== bundle.id)
+    }));
+  };
+
+  const handleAddFilter = () => {
+    setUrl(prev => ({
+      ...prev,
+      bundles: prev.bundles.map(b =>
+        b.id === bundle.id ? ({
+          ...b,
+          filters: [
+            ...b.filters,
+            {
+              id: crypto.randomUUID(),
+              column: null,
+              type: null,
+              operator: null,
+              value: null
+            }
+          ]
+        }) : (b)
+      ),
+    }));
+  };
+
+  return (
+    <Stack bg="widgetItemBg" borderWidth="1px" borderColor="widgetBadgeBg" borderRadius="lg" p="3" spacing="3">
+      <Flex justify="space-between" align="center">
+        <Input placeholder="Group Name (Optional)" maxW="200px" size="sm" variant="flushed" color="text" />
+        <Button onClick={handleRemoveBundle} variant="ghost" size="sm" color="red.400">
+          <Trash />
+        </Button>
+      </Flex>
+
+      <Stack spacing="2">
+        {bundle.filters.map((filter) => (
+          <FilterRow key={filter.id} filter={filter} columns={columns} setUrl={setUrl} bundleId={bundle.id} copiedFilter={copiedFilter} />
+        ))}
+        <Button onClick={handleAddFilter} variant="outline" size="sm" color="text" borderColor="widgetBadgeBg" _hover={{ bg: "widgetBadgeBg" }}>
+          Add Filter <Plus />
+        </Button>
+      </Stack>
+    </Stack>
+  );
+};
+
+// ============================================================================
+// 3. MAIN QUERY BUILDER (The Engine Wrapper)
+// ============================================================================
+export default function QueryBuilder({ url, setUrl, allColumns, getColumns, pullTable, isLoading, isReadyRef }) {
+  const copiedFilter = useRef(null);
+
+  const handleAddBundle = () => {
+    setUrl(prev => ({
+      ...prev,
+      bundles: [
+        ...prev.bundles,
+        {
+          id: crypto.randomUUID(),
+          filters: [{
+            id: crypto.randomUUID(),
+            column: null,
+            type: null,
+            operator: null,
+            value: null
+          }],
+        },
+      ],
+    }));
+  };
+
+  return (
+    <Flex direction="column" gap="4" w="100%" p="4" bg="transparent">
+      {/* Top Controls: Source & Execute */}
+      <Flex gap="4" align="flex-end">
+        <Field.Root maxW="300px">
+          <Field.Label color="text">Data Source</Field.Label>
+          <NativeSelect.Root>
+            <NativeSelect.Field
+              bg="widgetItemBg"
+              color="text"
+              value={url.source || ""}
+              onChange={(e) => {
+                const selectedView = e.target.value;
+                setUrl(prev => ({ ...prev, source: selectedView }));
+                // 🚨 FIXED: Now uses relative pathing for the production API
+                const endpoint = "/api/v3/view_dash_event_search_columns";
+                getColumns(endpoint);
+              }}
+            >
+              <option value="" disabled hidden>Select View</option>
+              <option value="main">Main View</option>
+              {/*<option value="test">Test View</option>*/}
+            </NativeSelect.Field>
+            <NativeSelect.Indicator />
+          </NativeSelect.Root>
+        </Field.Root>
+
+        <Button
+          bg="blue.600"
+          color="white"
+          _hover={{ bg: "blue.500" }}
+          loading={isLoading}
+          onClick={() => {
+            isReadyRef.current = true;
+            pullTable();
+          }}
+        >
+          Execute Search
+        </Button>
+      </Flex>
+
+      {/* Filter Builder Engine */}
+      {url.source && allColumns?.types && (
+        <Stack w="100%" gap="4">
+          <Text fontSize="lg" fontWeight="bold" color="text">Filters</Text>
+
+          <Box w="100%" maxH="400px" overflow="auto">
+            <Stack w="100%" gap="4" pr="4">
+              {url.bundles.map((bundle) => (
+                <FilterBundle key={bundle.id} bundle={bundle} columns={allColumns.types} url={url} setUrl={setUrl} copiedFilter={copiedFilter} />
+              ))}
+              <Button onClick={handleAddBundle} variant="outline" borderColor="widgetBadgeBg" color="text" _hover={{ bg: "widgetBadgeBg" }}>
+                New Filter Group <Plus />
+              </Button>
+            </Stack>
+          </Box>
+        </Stack>
+      )}
+    </Flex>
+  );
+}

client/src/store/authStore.js

@@ -46,6 +46,11 @@ const useAuthStore = create((set) => ({
             // Hit the new lightweight endpoint
             const res = await api.get('session/');
 
+            // 🔨 Security Fix a broken API call, Verify we actually got a user object back, not HTML fallback text
+            if (typeof res.data === 'string' || !res.data.username) {
+                throw new Error("Received invalid data format instead of user session");
+            }
+
             // Rehydrate the store with the user's info!
             set({
                 isAuthenticated: true,

client/src/theme.js

@@ -118,11 +118,11 @@ const sidebarRecipe = defineSlotRecipe({
       _hover: {
         bg: "rgba(255, 255, 255, 0.2)",
         color: "{text}",
-        "& svg": {
-          strokeWidth: "3",
-        },
+        // "& svg": {
+        //   strokeWidth: "3",
+        // },
         "& span": {
-          fontWeight: "700",
+          fontWeight: "800",
         },
       },