From 5ddbbcfc2a085ed61fbb243ada0b9d70f51bb692 Mon Sep 17 00:00:00 2001
From: Tyler <tyler@crispygoat.com>
Date: Sat, 20 Jun 2026 00:02:36 -0600
Subject: [PATCH] feat(frontend): ClaimStateBadge primitive (7 states, same
 palette)

---
 src/components/ui/claim-state-badge.tsx | 82 +++++++++++++++++++++++++
 1 file changed, 82 insertions(+)
 create mode 100644 src/components/ui/claim-state-badge.tsx

diff --git a/src/components/ui/claim-state-badge.tsx b/src/components/ui/claim-state-badge.tsx
new file mode 100644
index 0000000..e4832f0
--- /dev/null
+++ b/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>
+  );
+}