fix date filter

drb-frontend/app/calls/page.tsx

@@ -14,8 +14,6 @@ const inputCls =
 function filterCalls(calls: CallRecord[], filters: Filters): CallRecord[] {
   const q    = filters.query.trim().toLowerCase();
   const tgid = filters.tgid.trim();
-  const fromMs   = filters.dateFrom ? new Date(filters.dateFrom + "T00:00:00").getTime() : null;
-  const toMs     = filters.dateTo   ? new Date(filters.dateTo + "T23:59:59").getTime() : null;
 
   return calls.filter((c) => {
     // System filter
@@ -24,11 +22,6 @@ function filterCalls(calls: CallRecord[], filters: Filters): CallRecord[] {
     // TGID filter (exact match on the number)
     if (tgid && String(c.talkgroup_id ?? "") !== tgid) return false;
 
-    // Date range
-    const ts = new Date(c.started_at).getTime();
-    if (fromMs !== null && ts < fromMs) return false;
-    if (toMs   !== null && ts > toMs)   return false;
-
     // Free-text: talkgroup name, node_id, transcript, tags
     if (q) {
       const hay = [
@@ -67,12 +60,16 @@ function isActive(f: Filters) {
 
 export default function CallsPage() {
   const [limitCount, setLimitCount] = useState(100);
-  const { calls, loading } = useCalls(limitCount);
+  const [filters, setFilters] = useState<Filters>(DEFAULT_FILTERS);
+
+  const dateFrom = filters.dateFrom ? new Date(filters.dateFrom + "T00:00:00") : undefined;
+  const dateTo   = filters.dateTo   ? new Date(filters.dateTo   + "T23:59:59") : undefined;
+
+  const { calls, loading } = useCalls(limitCount, dateFrom, dateTo);
   const { systems } = useSystems();
   const { isAdmin } = useAuth();
   const systemMap = Object.fromEntries(systems.map((s) => [s.system_id, s]));
 
-  const [filters, setFilters] = useState<Filters>(DEFAULT_FILTERS);
   const [showFilters, setShowFilters] = useState(false);
 
   function set<K extends keyof Filters>(key: K, value: string) {

drb-frontend/lib/useCalls.ts

@@ -6,11 +6,15 @@ import { onAuthStateChanged } from "firebase/auth";
 import { db, auth } from "@/lib/firebase";
 import type { CallRecord } from "@/lib/types";
 
-export function useCalls(limitCount = 50) {
+export function useCalls(limitCount = 50, dateFrom?: Date, dateTo?: Date) {
   const [calls, setCalls] = useState<CallRecord[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
+  // Stable ms values so the effect dependency doesn't fire on every render
+  const dateFromMs = dateFrom?.getTime();
+  const dateToMs = dateTo?.getTime();
+
   useEffect(() => {
     let unsubFirestore: (() => void) | undefined;
 
@@ -23,11 +27,16 @@ export function useCalls(limitCount = 50) {
         return;
       }
 
-      const q = query(
-        collection(db, "calls"),
+      const from = dateFromMs != null ? new Date(dateFromMs) : undefined;
+      const to   = dateToMs   != null ? new Date(dateToMs)   : undefined;
+
+      const constraints = [
+        ...(from ? [where("started_at", ">=", from)] : []),
+        ...(to   ? [where("started_at", "<=", to)]   : []),
         orderBy("started_at", "desc"),
-        limit(limitCount)
-      );
+        limit(limitCount),
+      ];
+      const q = query(collection(db, "calls"), ...constraints);
       const toISO = (v: any): string | null =>
         v?.toDate?.()?.toISOString?.() ?? (typeof v === "string" ? v : null);
       unsubFirestore = onSnapshot(q, (snap) => {
@@ -43,7 +52,7 @@ export function useCalls(limitCount = 50) {
       unsubAuth();
       if (unsubFirestore) unsubFirestore();
     };
-  }, [limitCount]);
+  }, [limitCount, dateFromMs, dateToMs]);
 
   return { calls, loading, error };
 }