feat(frontend): ClaimStateBadge primitive (7 states, same palette)

src/components/ui/claim-state-badge.tsx

@@ -0,0 +1,82 @@
+import { Badge } from "@/components/ui/badge";
+import type { ClaimState } from "@/types";
+import { cn } from "@/lib/utils";
+import {
+  Send,
+  Inbox,
+  CheckCircle2,
+  AlertTriangle,
+  Ban,
+  CheckCheck,
+  RotateCcw,
+} from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+
+const STATE_CONFIG: Record<
+  ClaimState,
+  {
+    label: string;
+    icon: LucideIcon;
+    className: string;
+  }
+> = {
+  submitted: {
+    label: "Submitted",
+    icon: Send,
+    className: "bg-accent/15 text-accent border-accent/30",
+  },
+  received: {
+    label: "Received",
+    icon: Inbox,
+    className: "bg-accent/10 text-accent/80 border-accent/20",
+  },
+  paid: {
+    label: "Paid",
+    icon: CheckCircle2,
+    className: "bg-success/15 text-success border-success/30",
+  },
+  partial: {
+    label: "Partial",
+    icon: AlertTriangle,
+    className: "bg-warning/15 text-warning border-warning/30",
+  },
+  denied: {
+    label: "Denied",
+    icon: Ban,
+    className: "bg-destructive/15 text-destructive border-destructive/30",
+  },
+  reconciled: {
+    label: "Reconciled",
+    icon: CheckCheck,
+    className: "bg-success/15 text-success border-success/30",
+  },
+  reversed: {
+    label: "Reversed",
+    icon: RotateCcw,
+    className: "bg-warning/15 text-warning border-warning/30",
+  },
+};
+
+export function ClaimStateBadge({
+  state,
+  className,
+}: {
+  state: ClaimState;
+  className?: string;
+}) {
+  const cfg = STATE_CONFIG[state];
+  const Icon = cfg.icon;
+  return (
+    <Badge
+      variant="outline"
+      className={cn(
+        "gap-1.5 font-mono uppercase tracking-wider text-[10px]",
+        cfg.className,
+        className,
+      )}
+    >
+      <Icon className="h-3 w-3" strokeWidth={1.75} />
+      {cfg.label}
+    </Badge>
+  );
+}