Wire Dashboard to live API hooks

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.
This commit is contained in:
Nora
2026-06-22 17:20:48 -06:00
parent fb913f0617
commit 7e4bb4d2c8
+15 -5
View File
@@ -17,13 +17,16 @@ import { AnimatedNumber } from "@/components/AnimatedNumber";
import { DrillableCell } from "@/components/drill/DrillableCell"; import { DrillableCell } from "@/components/drill/DrillableCell";
import { fmt } from "@/lib/format"; import { fmt } from "@/lib/format";
import { eventKindToUrl } from "@/lib/event-routing"; import { eventKindToUrl } from "@/lib/event-routing";
import { useAppStore } from "@/store";
import { useAuth } from "@/auth/useAuth"; 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"; import { toast } from "sonner";
const MONTHS_BACK = 6; const MONTHS_BACK = 6;
function buildMonthly(claims: ReturnType<typeof useAppStore.getState>["claims"]) { function buildMonthly(claims: Claim[]) {
const now = new Date(); const now = new Date();
const months: { const months: {
key: string; key: string;
@@ -71,9 +74,16 @@ function buildMonthly(claims: ReturnType<typeof useAppStore.getState>["claims"])
} }
export function Dashboard() { export function Dashboard() {
const claims = useAppStore((s) => s.claims); // Live data: hooks fetch from /api/* when api.isConfigured; otherwise
const providers = useAppStore((s) => s.providers); // they fall back to the in-memory store. Pulling from the hooks (not
const activity = useAppStore((s) => s.activity); // 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(); const navigate = useNavigate();
// Time-of-day greeting + live operator name from the auth context. // Time-of-day greeting + live operator name from the auth context.