refactor(frontend): StatusBadge delegates to ClaimStateBadge; Claims uses API state

src/components/StatusBadge.tsx

@@ -1,5 +1,7 @@
 import { Badge } from "@/components/ui/badge";
-import type { ClaimStatus, RemittanceStatus } from "@/types";
+import { ClaimStateBadge } from "@/components/ui/claim-state-badge";
+import type { ClaimState, ClaimStatus, RemittanceStatus } from "@/types";
+import { CLAIM_STATES } from "@/types";
 import { cn } from "@/lib/utils";
 
 const claimStyles: Record<ClaimStatus, { dot: string; label: string }> = {
@@ -17,7 +19,47 @@ const remitStyles: Record<RemittanceStatus, { dot: string; label: string }> = {
   reconciled: { dot: "bg-[hsl(var(--success))]", label: "Reconciled" },
 };
 
+/**
+ * Generic status badge: delegates to `ClaimStateBadge` when the value is one
+ * of the seven canonical `ClaimState` values from the reconciliation model,
+ * otherwise falls back to a plain Badge with the legacy color. This is the
+ * single entry point that pages should use; it lets the live API's 7-state
+ * `state` field drive the visual while still tolerating legacy `status`
+ * strings like "draft" / "pending" that aren't part of the new model.
+ */
+export function StatusBadge({
+  status,
+  className,
+}: {
+  status: string;
+  className?: string;
+}) {
+  if (CLAIM_STATES.includes(status as ClaimState)) {
+    return (
+      <ClaimStateBadge state={status as ClaimState} className={className} />
+    );
+  }
+  return (
+    <Badge
+      variant="outline"
+      className={cn(
+        "uppercase tracking-wider text-[10px]",
+        "bg-muted text-muted-foreground border-border",
+        className,
+      )}
+    >
+      {status}
+    </Badge>
+  );
+}
+
 export function ClaimStatusBadge({ status }: { status: ClaimStatus }) {
+  // Forward to the canonical 7-state primitive when possible; fall back to
+  // the legacy dot+label for the three non-ClaimState values (draft,
+  // accepted, pending).
+  if (CLAIM_STATES.includes(status as ClaimState)) {
+    return <ClaimStateBadge state={status as ClaimState} />;
+  }
   const s = claimStyles[status];
   return (
     <Badge variant="outline" className="bg-transparent border-border/60">
@@ -28,6 +70,9 @@ export function ClaimStatusBadge({ status }: { status: ClaimStatus }) {
 }
 
 export function RemitStatusBadge({ status }: { status: RemittanceStatus }) {
+  if (CLAIM_STATES.includes(status as ClaimState)) {
+    return <ClaimStateBadge state={status as ClaimState} />;
+  }
   const s = remitStyles[status];
   return (
     <Badge variant="outline" className="bg-transparent border-border/60">

src/pages/Claims.tsx

@@ -16,7 +16,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { ClaimStatusBadge } from "@/components/StatusBadge";
+import { StatusBadge } from "@/components/StatusBadge";
 import { NewClaimDialog } from "@/components/NewClaimDialog";
 import { Skeleton } from "@/components/ui/skeleton";
 import { EmptyState } from "@/components/ui/empty-state";
@@ -255,7 +255,7 @@ export function Claims() {
                         {c.receivedAmount > 0 ? fmt.usd(c.receivedAmount) : "—"}
                       </TableCell>
                       <TableCell>
-                        <ClaimStatusBadge status={c.status} />
+                        <StatusBadge status={c.status} />
                       </TableCell>
                       <TableCell className="text-muted-foreground text-[13px] num">
                         {fmt.dateShort(c.submissionDate)}