feat(frontend): RemitDrawer component with CAS adjustments + parties + claim payments

2026-06-20 17:16:23 -06:00
parent 4cd52c3084
commit 25d47a5621
21 changed files with 2899 additions and 0 deletions
@@ -0,0 +1,114 @@
+import { ExternalLink, X } from "lucide-react";
+import { Badge, type BadgeProps } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { fmt } from "@/lib/format";
+import { cn } from "@/lib/utils";
+import type { RemitDetail } from "@/hooks/useRemitDetail";
+
+type RemitDrawerHeaderProps = {
+  remit: RemitDetail;
+  onClose: () => void;
+};
+
+/**
+ * Remittance status → Badge variant. Mirrors the list-endpoint mapping
+ * used by `MatchedRemitCard` (received / posted / reconciled). Unknown
+ * statuses (the type is an unconstrained string) fall back to ``muted``
+ * so a future backend status doesn't blow up the drawer.
+ *
+ *   received    → secondary  (in-flight, not yet posted)
+ *   posted      → default    (brand-colored, posted to ledger)
+ *   reconciled  → success    (matched to claims, settled)
+ */
+const STATUS_VARIANT: Record<string, BadgeProps["variant"]> = {
+  received: "secondary",
+  posted: "default",
+  reconciled: "success",
+};
+
+function badgeVariantFor(status: string): BadgeProps["variant"] {
+  return STATUS_VARIANT[status] ?? "muted";
+}
+
+/**
+ * Header band for the remittance detail drawer (RemitDrawer).
+ *
+ * Mirror of `ClaimDrawerHeader` — same instrument-style eyebrow +
+ * mono ID on the left, status badge + total paid on the right, plus a
+ * "View raw 835" link below the ID. The close button reuses the same
+ * `X` icon at the same position so the two drawers have visually
+ * identical chrome.
+ *
+ * The "View raw 835" link points at `/api/remittances/{id}/raw` — the
+ * backend's text/835 endpoint for inspecting the source X12 file. The
+ * fallback (when the backend doesn't yet expose that endpoint) is the
+ * detail JSON endpoint so the link never 404s on a misconfigured
+ * deployment.
+ */
+export function RemitDrawerHeader({ remit, onClose }: RemitDrawerHeaderProps) {
+  const rawLink = `/api/remittances/${encodeURIComponent(remit.id)}/raw`;
+
+  return (
+    <header
+      className={cn(
+        "flex items-start justify-between gap-4 px-6 py-5",
+        "border-b border-[color:var(--m-border-heavy)]",
+        "bg-[color:var(--m-surface)]"
+      )}
+      data-testid="remit-drawer-header"
+    >
+      {/* Left: eyebrow + mono remit ID + raw link */}
+      <div className="flex min-w-0 flex-col gap-1">
+        <span className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-[color:var(--m-ink-tertiary)]">
+          Remittance
+        </span>
+        <span
+          data-testid="header-id"
+          className="font-mono text-2xl font-semibold tracking-tight text-[color:var(--m-ink-primary)]"
+          style={{ fontFamily: "var(--m-font-mono)" }}
+        >
+          {remit.id}
+        </span>
+        <a
+          href={rawLink}
+          target="_blank"
+          rel="noreferrer"
+          data-testid="header-raw-link"
+          className="mt-1 inline-flex w-fit items-center gap-1 text-[11px] text-[color:var(--m-ink-tertiary)] hover:text-[color:var(--m-ink-secondary)]"
+        >
+          View raw 835
+          <ExternalLink className="h-3 w-3" strokeWidth={1.75} aria-hidden />
+        </a>
+      </div>
+
+      {/* Right: status badge + total paid + close */}
+      <div className="flex items-start gap-4">
+        <div className="flex flex-col items-end gap-1">
+          <Badge
+            variant={badgeVariantFor(remit.status)}
+            data-testid="header-status"
+            className="uppercase tracking-[0.14em]"
+          >
+            {remit.status}
+          </Badge>
+          <span
+            data-testid="header-paid"
+            className="font-mono text-lg tabular-nums text-[color:var(--m-ink-primary)]"
+            style={{ fontFamily: "var(--m-font-mono)" }}
+          >
+            {fmt.usdPrecise(remit.paidAmount)}
+          </span>
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onClose}
+          aria-label="Close drawer"
+          data-testid="header-close"
+        >
+          <X className="h-4 w-4" strokeWidth={1.75} />
+        </Button>
+      </div>
+    </header>
+  );
+}