Add dashboard filter context to remove prop drilling

frontend/src/pages/DashboardPage.tsx

@@ -6,7 +6,6 @@
  * database.  The time-range selection controls how far back to look.
  */
 
-import { useState } from "react";
 import { Text, makeStyles, tokens } from "@fluentui/react-components";
 import { BanTable } from "../components/BanTable";
 import { BanTrendChart } from "../components/BanTrendChart";
@@ -17,8 +16,7 @@ import { TopCountriesBarChart } from "../components/TopCountriesBarChart";
 import { TopCountriesPieChart } from "../components/TopCountriesPieChart";
 import { useCommonSectionStyles } from "../components/commonStyles";
 import { useDashboardCountryData } from "../hooks/useDashboardCountryData";
-import { getDataSource } from "../utils/queryUtils";
-import type { BanOriginFilter, TimeRange } from "../types/ban";
+import { DashboardFilterProvider, useDashboardFilters } from "../providers/DashboardFilterProvider";
 
 
 // ---------------------------------------------------------------------------
@@ -73,12 +71,9 @@ const useStyles = makeStyles({
  * Displays the fail2ban server status, a time-range selector, and the
  * ban list table.
  */
-export function DashboardPage(): React.JSX.Element {
+function DashboardPageContent(): React.JSX.Element {
   const styles = useStyles();
-  const [timeRange, setTimeRange] = useState<TimeRange>("24h");
-  const [originFilter, setOriginFilter] = useState<BanOriginFilter>("all");
-
-  const source = getDataSource(timeRange);
+  const { timeRange, originFilter, source } = useDashboardFilters();
 
   const { countries, countryNames, loading: countryLoading, error: countryError, reload: reloadCountry } =
     useDashboardCountryData(timeRange, originFilter, source);
@@ -96,12 +91,7 @@ export function DashboardPage(): React.JSX.Element {
       {/* Global filter bar                                                  */}
       {/* ------------------------------------------------------------------ */}
       <div className={styles.filterRow}>
-        <DashboardFilterBar
-          timeRange={timeRange}
-          onTimeRangeChange={setTimeRange}
-          originFilter={originFilter}
-          onOriginFilterChange={setOriginFilter}
-        />
+        <DashboardFilterBar />
       </div>
 
       {/* ------------------------------------------------------------------ */}
@@ -114,7 +104,7 @@ export function DashboardPage(): React.JSX.Element {
           </Text>
         </div>
         <div className={styles.tabContent}>
-          <BanTrendChart timeRange={timeRange} origin={originFilter} source={source} />
+          <BanTrendChart />
         </div>
       </div>
 
@@ -165,10 +155,18 @@ export function DashboardPage(): React.JSX.Element {
 
         {/* Ban table */}
         <div className={styles.tabContent}>
-          <BanTable timeRange={timeRange} origin={originFilter} source={source} />
+          <BanTable />
         </div>
       </div>
     </div>
   );
 }
 
+export function DashboardPage(): React.JSX.Element {
+  return (
+    <DashboardFilterProvider>
+      <DashboardPageContent />
+    </DashboardFilterProvider>
+  );
+}
+