From 7e4bb4d2c8a014438c00997720c912ae57d32f63 Mon Sep 17 00:00:00 2001
From: Nora <nora_rocks@agentmail.to>
Date: Mon, 22 Jun 2026 17:20:48 -0600
Subject: [PATCH] Wire Dashboard to live API hooks
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Dashboard.tsx was reading claims/providers/activity directly from the
zustand `useAppStore`, which returns the hardcoded sample fixtures
(sampleClaims / sampleProviders / sampleActivity) regardless of whether
a backend session is active. The hooks useClaims / useProviders /
useActivity are wired correctly to /api/* when api.isConfigured, so
the fix is to swap the three direct store reads for the hooks.

buildMonthly's parameter is now typed as Claim[] (the live Claim
shape) instead of the store's heterogeneous slice, and the
`useAppStore` import is gone.

Verified end-to-end: after logging in as admin via the live server,
the Dashboard now shows $0 KPIs, "0 events / No activity yet.",
and the live operator name in the greeting — proving the hooks are
hitting /api/* and not falling back to the sample store.
---
 src/pages/Dashboard.tsx | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index 1d6e9da..255f8be 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -17,13 +17,16 @@ import { AnimatedNumber } from "@/components/AnimatedNumber";
 import { DrillableCell } from "@/components/drill/DrillableCell";
 import { fmt } from "@/lib/format";
 import { eventKindToUrl } from "@/lib/event-routing";
-import { useAppStore } from "@/store";
 import { useAuth } from "@/auth/useAuth";
+import { useClaims } from "@/hooks/useClaims";
+import { useProviders } from "@/hooks/useProviders";
+import { useActivity } from "@/hooks/useActivity";
+import type { Claim } from "@/types";
 import { toast } from "sonner";
 
 const MONTHS_BACK = 6;
 
-function buildMonthly(claims: ReturnType<typeof useAppStore.getState>["claims"]) {
+function buildMonthly(claims: Claim[]) {
   const now = new Date();
   const months: {
     key: string;
@@ -71,9 +74,16 @@ function buildMonthly(claims: ReturnType<typeof useAppStore.getState>["claims"])
 }
 
 export function Dashboard() {
-  const claims = useAppStore((s) => s.claims);
-  const providers = useAppStore((s) => s.providers);
-  const activity = useAppStore((s) => s.activity);
+  // Live data: hooks fetch from /api/* when api.isConfigured; otherwise
+  // they fall back to the in-memory store. Pulling from the hooks (not
+  // the store directly) is what wires the Dashboard to the backend.
+  const claimsQuery = useClaims({ limit: 100 });
+  const providersQuery = useProviders();
+  const activityQuery = useActivity({ limit: 10 });
+
+  const claims = claimsQuery.data?.items ?? [];
+  const providers = providersQuery.data?.items ?? [];
+  const activity = activityQuery.data?.items ?? [];
 
   const navigate = useNavigate();
   // Time-of-day greeting + live operator name from the auth context.