fix(frontend): replay row-flash on every refetch via dataUpdatedAt key

The previous static key={c.id} let React reuse the same <TableRow>
element across refetches, so animate-row-flash only played on
initial mount and on the first render of a brand-new claim_id.
Updated rows whose claim_id was unchanged never re-flashed.

Re-keying on `${c.id}-${dataUpdatedAt}` re-mounts the row on
every refetch (initial load, filter change, parse invalidation),
so the 1.2s accent-tint flash replays each time.

Also: README's 'Frontend unit tests (when added)' is stale — npm
test now exists and runs 3 passing tests.

hooks: add dataUpdatedAt: 0 to the !isConfigured fallback return
so the pages type-check.

README.md

@@ -61,7 +61,7 @@ cd backend && .venv/bin/pytest
 npm run typecheck
 npm run build
 
-# Frontend unit tests (when added)
+# Frontend unit tests
 npm test
 ```
 

src/hooks/useClaims.ts

@@ -54,6 +54,7 @@ export function useClaims(params: ListClaimsParams) {
       isError: false,
       error: null,
       refetch: () => Promise.resolve(),
+      dataUpdatedAt: 0,
     } as const;
   }
   return q;

src/hooks/useRemittances.ts

@@ -37,6 +37,7 @@ export function useRemittances(params: ListRemittancesParams) {
       isError: false,
       error: null,
       refetch: () => Promise.resolve(),
+      dataUpdatedAt: 0,
     } as const;
   }
   return q;

src/pages/Claims.tsx

@@ -63,7 +63,7 @@ export function Claims() {
     offset: (page - 1) * PAGE_SIZE,
   };
 
-  const { data, isLoading, isError, error, refetch } = useClaims(params);
+  const { data, isLoading, isError, error, refetch, dataUpdatedAt } = useClaims(params);
   const items = data?.items ?? [];
 
   const totals = useMemo(
@@ -224,12 +224,12 @@ export function Claims() {
                   const provider = providerMap[c.providerNpi];
                   return (
                     <TableRow
-                      key={c.id}
+                      key={`${c.id}-${dataUpdatedAt}`}
                       className={cn(
                         "animate-row-flash",
-                        // Suppress flash when filtering so only the new
+                        // Re-keying on dataUpdatedAt re-mounts the row on
-                        // page's first paint flashes; subsequent renders
+                        // every refetch (initial load, filter change, parse
-                        // use the existing fade-in from the page wrapper.
+                        // invalidation) so the row-flash keyframe replays.
                       )}
                     >
                       <TableCell>

src/pages/Remittances.tsx

@@ -30,7 +30,7 @@ export function Remittances() {
   const [page, setPage] = useState(1);
   const [status, setStatus] = useState<RemittanceStatus | null>(null);
 
-  const { data, isLoading, isError, error, refetch } = useRemittances({
+  const { data, isLoading, isError, error, refetch, dataUpdatedAt } = useRemittances({
     sort: "receivedDate",
     order: "desc",
     limit: PAGE_SIZE,
@@ -128,7 +128,7 @@ export function Remittances() {
               </TableHeader>
               <TableBody>
                 {items.map((r) => (
-                  <TableRow key={r.id} className={cn("animate-row-flash")}>
+                  <TableRow key={`${r.id}-${dataUpdatedAt}`} className={cn("animate-row-flash")}>
                     <TableCell className="display num text-[13px]">{r.id}</TableCell>
                     <TableCell className="display num text-[13px] text-muted-foreground">
                       {r.claimId}