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:
+15
-5
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user