feat: implement pool filtering functionality in dashboard with new PoolSection component and API integration

Author: williamluke4

components/dashboard/Dashboard.tsx

@@ -16,9 +16,9 @@ import type { TimelineBucket } from "./sections";
 import { SettingsPanel, type ExpandedSections } from "./SettingsPanel";
 import { TimelineBar } from "./TimelineBar";
 
-import { useFieldReports } from "@/hooks/dashboard";
+import { useFieldReports, useImagePreloader } from "@/hooks/dashboard";
 import type { DataResponse } from "@/pages/api/data";
-import type { FieldReportsResponse } from "@/types";
+import type { FieldReportsResponse, Pool, PoolsResponse } from "@/types";
 import type { Voucher } from "@/types/voucher";
 
 // Fetcher function for SWR
@@ -51,11 +51,24 @@ export function Dashboard() {
     }
   );
 
+  // Fetch pools
+  const { data: poolsData, isLoading: poolsLoading } = useSWR<PoolsResponse>(
+    "/api/pools",
+    fetcher,
+    {
+      refreshInterval: 5 * 60 * 1000,
+      revalidateOnFocus: false,
+    }
+  );
+
   // Panel states
   const [optionsOpen, setOptionsOpen] = React.useState(false);
   const [graphType, setGraphType] = React.useState<"2D" | "3D">("3D");
   const [showTimelineBar, setShowTimelineBar] = React.useState(true);
 
+  // Pool filtering
+  const [selectedPools, setSelectedPools] = React.useState<Pool[]>([]);
+
   // Token filtering
   const [selectedTokens, setSelectedTokens] = React.useState<Voucher[]>([]);
   const [filteredByToken, setFilteredByToken] = React.useState<
@@ -91,6 +104,7 @@ export function Dashboard() {
   // Collapsible sections state
   const [expandedSections, setExpandedSections] =
     React.useState<ExpandedSections>({
+      pools: false,
       vouchers: true,
       animation: false,
       display: false,
@@ -107,6 +121,23 @@ export function Dashboard() {
     return () => clearTimeout(timer);
   }, [chargeStrengthInput, linkDistanceInput, centerGravityInput]);
 
+  // Compute available vouchers based on selected pools
+  const availableVouchers = React.useMemo(() => {
+    if (!data?.vouchers) return [];
+    if (selectedPools.length === 0) return data.vouchers;
+
+    // Union of all allowed tokens from selected pools
+    const allowedSet = new Set<string>();
+    for (const pool of selectedPools) {
+      for (const token of pool.allowed_tokens) {
+        allowedSet.add(token.toLowerCase());
+      }
+    }
+    return data.vouchers.filter((v) =>
+      allowedSet.has(v.contract_address.toLowerCase())
+    );
+  }, [data?.vouchers, selectedPools]);
+
   // Initialize selected tokens when data loads
   React.useEffect(() => {
     if (data) {
@@ -115,6 +146,26 @@ export function Dashboard() {
     }
   }, [data]);
 
+  // Auto-select pool tokens when pools change
+  React.useEffect(() => {
+    if (!data?.vouchers) return;
+
+    if (selectedPools.length > 0) {
+      // Union of all allowed tokens from selected pools
+      const allowedSet = new Set<string>();
+      for (const pool of selectedPools) {
+        for (const token of pool.allowed_tokens) {
+          allowedSet.add(token.toLowerCase());
+        }
+      }
+      const poolTokens = data.vouchers.filter((v) =>
+        allowedSet.has(v.contract_address.toLowerCase())
+      );
+      setSelectedTokens(poolTokens);
+    }
+    // When no pools selected, keep current selection
+  }, [selectedPools, data?.vouchers]);
+
   // Filter graph data by selected tokens
   React.useEffect(() => {
     if (!data) return;
@@ -287,12 +338,20 @@ export function Dashboard() {
     maxVisible: 3,
   });
 
-  // Reset dismissed reports when animation restarts from beginning
+  // Image preloading for field reports
+  const { resetPreloaded } = useImagePreloader({
+    reports: reportsData?.reports ?? [],
+    currentDate: date,
+    selectedVoucherAddresses,
+  });
+
+  // Reset dismissed reports and preloaded images when animation restarts from beginning
   React.useEffect(() => {
     if (date === dateRange.start) {
       resetDismissed();
+      resetPreloaded();
     }
-  }, [date, dateRange.start, resetDismissed]);
+  }, [date, dateRange.start, resetDismissed, resetPreloaded]);
 
   // Callbacks
   const toggleSection = React.useCallback((section: keyof ExpandedSections) => {
@@ -410,8 +469,12 @@ export function Dashboard() {
           voucherCount={selectedTokens.length}
           expandedSections={expandedSections}
           toggleSection={toggleSection}
+          pools={poolsData?.pools ?? []}
+          poolsLoading={poolsLoading}
+          selectedPools={selectedPools}
+          onSelectPools={setSelectedPools}
           selectedTokens={selectedTokens}
-          allVouchers={data.vouchers}
+          allVouchers={availableVouchers}
           onSelectTokens={setSelectedTokens}
           date={date}
           setDate={setDate}

components/dashboard/SettingsPanel.tsx

@@ -6,16 +6,19 @@ import React from "react";
 import { CloseIcon } from "@components/icons";
 import { StatsBar } from "./StatsBar";
 import {
+  PoolSection,
   VoucherSection,
   AnimationSection,
   DisplaySection,
   PhysicsSection,
 } from "./sections";
 import type { TimelineBucket } from "./sections";
+import type { Pool } from "@/types";
 import type { Voucher } from "@/types/voucher";
 import type { DateRange, PhysicsInputs } from "@hooks/dashboard";
 
 export interface ExpandedSections {
+  pools: boolean;
   vouchers: boolean;
   animation: boolean;
   display: boolean;
@@ -31,9 +34,17 @@ export interface SettingsPanelProps {
   linkCount: number;
   voucherCount: number;
 
-  // Vouchers
+  // Sections
   expandedSections: ExpandedSections;
   toggleSection: (section: keyof ExpandedSections) => void;
+
+  // Pools
+  pools: Pool[];
+  poolsLoading?: boolean;
+  selectedPools: Pool[];
+  onSelectPools: (pools: Pool[]) => void;
+
+  // Vouchers
   selectedTokens: Voucher[];
   allVouchers: Voucher[];
   onSelectTokens: (tokens: Voucher[]) => void;
@@ -76,6 +87,10 @@ export function SettingsPanel({
   voucherCount,
   expandedSections,
   toggleSection,
+  pools,
+  poolsLoading,
+  selectedPools,
+  onSelectPools,
   selectedTokens,
   allVouchers,
   onSelectTokens,
@@ -121,6 +136,16 @@ export function SettingsPanel({
           voucherCount={voucherCount}
         />
 
+        {/* Pool Section */}
+        <PoolSection
+          expanded={expandedSections.pools}
+          onToggle={() => toggleSection("pools")}
+          pools={pools}
+          selectedPools={selectedPools}
+          onSelectPools={onSelectPools}
+          isLoading={poolsLoading}
+        />
+
         {/* Vouchers Section */}
         <VoucherSection
           expanded={expandedSections.vouchers}

components/dashboard/sections/PoolSection.tsx

@@ -0,0 +1,90 @@
+/**
+ * Pool filter section component
+ */
+
+import React from "react";
+import { ChevronDownIcon } from "@components/icons";
+import { MultiSelect } from "@components/select";
+import type { Pool } from "@/types";
+
+export interface PoolSectionProps {
+  expanded: boolean;
+  onToggle: () => void;
+  pools: Pool[];
+  selectedPools: Pool[];
+  onSelectPools: (pools: Pool[]) => void;
+  isLoading?: boolean;
+}
+
+export function PoolSection({
+  expanded,
+  onToggle,
+  pools,
+  selectedPools,
+  onSelectPools,
+  isLoading,
+}: PoolSectionProps) {
+  // Calculate total unique tokens across selected pools
+  const totalTokens = React.useMemo(() => {
+    if (selectedPools.length === 0) return 0;
+    const tokenSet = new Set<string>();
+    for (const pool of selectedPools) {
+      for (const token of pool.allowed_tokens) {
+        tokenSet.add(token.toLowerCase());
+      }
+    }
+    return tokenSet.size;
+  }, [selectedPools]);
+
+  return (
+    <div className="border border-gray-200 rounded-lg">
+      <button
+        onClick={onToggle}
+        className="w-full flex items-center justify-between px-4 py-3 bg-gray-50 hover:bg-gray-100 transition-colors"
+      >
+        <span className="font-medium text-gray-700">Filter by Pool</span>
+        <ChevronDownIcon
+          className={`w-4 h-4 text-gray-500 transition-transform ${
+            expanded ? "rotate-180" : ""
+          }`}
+        />
+      </button>
+      {expanded && (
+        <div className="p-3 sm:p-4 space-y-3">
+          <MultiSelect
+            selected={selectedPools}
+            options={pools}
+            label="Select Pools"
+            optionToKey={(p: Pool) => p.pool_address}
+            optionToLabel={(p: Pool) => `${p.pool_name} (${p.pool_symbol})`}
+            optionToSearchFields={(p: Pool) => [p.pool_name, p.pool_symbol]}
+            onChange={onSelectPools}
+            disabled={isLoading}
+          />
+          <div className="flex gap-2">
+            <button
+              className="flex-1 px-3 py-2 sm:py-1.5 text-sm text-green-600 border border-green-200 rounded-md hover:bg-green-50 active:bg-green-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              onClick={() => onSelectPools(pools)}
+              disabled={isLoading}
+            >
+              Select All
+            </button>
+            <button
+              className="flex-1 px-3 py-2 sm:py-1.5 text-sm text-gray-600 border border-gray-200 rounded-md hover:bg-gray-50 active:bg-gray-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              onClick={() => onSelectPools([])}
+              disabled={isLoading}
+            >
+              Clear
+            </button>
+          </div>
+          {selectedPools.length > 0 && (
+            <div className="text-sm text-gray-500">
+              {totalTokens} token{totalTokens !== 1 ? "s" : ""} in{" "}
+              {selectedPools.length} pool{selectedPools.length !== 1 ? "s" : ""}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

components/dashboard/sections/index.ts

@@ -2,6 +2,9 @@
  * Settings panel section components barrel export
  */
 
+export { PoolSection } from "./PoolSection";
+export type { PoolSectionProps } from "./PoolSection";
+
 export { VoucherSection } from "./VoucherSection";
 export type { VoucherSectionProps } from "./VoucherSection";
 

components/ui/select/MultiSelect.tsx

@@ -44,6 +44,7 @@ interface MultiSelectProps<T> {
   optionToKey: (value: T) => string;
   optionToSearchFields?: (value: T) => string[];
   prioritizeSymbol?: string;
+  disabled?: boolean;
 }
 
 export function MultiSelect<T>(props: MultiSelectProps<T>) {
@@ -61,6 +62,7 @@ export function MultiSelect<T>(props: MultiSelectProps<T>) {
     optionToKey,
     optionToSearchFields,
     prioritizeSymbol,
+    disabled,
   } = props;
 
   // Close on click outside
@@ -153,8 +155,11 @@ export function MultiSelect<T>(props: MultiSelectProps<T>) {
       <span className="inline-block w-full rounded-md shadow-sm">
         <button
           type="button"
-          onClick={() => setIsOpen(!isOpen)}
-          className="cursor-default relative w-full rounded-md border border-gray-300 bg-white pl-3 pr-10 py-2 text-left transition ease-in-out duration-150"
+          onClick={() => !disabled && setIsOpen(!isOpen)}
+          disabled={disabled}
+          className={`cursor-default relative w-full rounded-md border border-gray-300 bg-white pl-3 pr-10 py-2 text-left transition ease-in-out duration-150 ${
+            disabled ? "bg-gray-100 cursor-not-allowed opacity-60" : ""
+          }`}
         >
           <span className="block truncate text-black">
             {selected.length === options.length

config/cache.ts

@@ -9,5 +9,9 @@ export const CACHE_TTL_SECONDS = 86400 * 30; // 30 days
 export const REPORTS_CACHE_KEY = "field-reports-1";
 export const REPORTS_CACHE_TTL_SECONDS = 3600; // 1 hour
 
+// Pools cache
+export const POOLS_CACHE_KEY = "pools-1";
+export const POOLS_CACHE_TTL_SECONDS = 3600; // 1 hour
+
 // SWR configuration
 export const SWR_REFRESH_INTERVAL = 5 * 60 * 1000; // 5 minutes

hooks/dashboard/index.ts

@@ -33,3 +33,9 @@ export type {
   UseFieldReportsOptions,
   UseFieldReportsReturn,
 } from "./useFieldReports";
+
+export { useImagePreloader } from "./useImagePreloader";
+export type {
+  UseImagePreloaderOptions,
+  UseImagePreloaderReturn,
+} from "./useImagePreloader";