feat(frontend): MatchedRemitCard with view-remittance link

2026-06-20 11:41:30 -06:00
parent 7c7e724464
commit 1671e96a10
2 changed files with 293 additions and 0 deletions
@@ -0,0 +1,114 @@
+import { ArrowRight } from "lucide-react";
+import { Badge, type BadgeProps } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { fmt } from "@/lib/format";
+import type { ClaimDetail } from "@/types";
+
+type MatchedRemitCardProps = {
+  matchedRemittance: ClaimDetail["matchedRemittance"];
+};
+
+/**
+ * Remittance status → Badge variant. Mirrors the list-endpoint mapping
+ * in ``RemittanceStatus`` (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.
+ */
+const STATUS_VARIANT: Record<string, BadgeProps["variant"]> = {
+  received: "secondary",
+  posted: "default",
+  reconciled: "success",
+};
+
+function statusVariantFor(status: string): BadgeProps["variant"] {
+  return STATUS_VARIANT[status] ?? "muted";
+}
+
+/**
+ * Matched-remittance card for the claim detail drawer (SP4).
+ *
+ * Renders only when the claim has been paired with an ERA (the
+ * ``matchedRemittance`` field is non-null). Layout: a single card with
+ * remit id + status badge + received date on the left, big mono
+ * ``totalPaid`` on the right, plus a "View remittance →" link that
+ * deep-links to ``/remittances?id={id}`` (v1: full page navigation via
+ * ``window.location.href``; a router-based nav handler is a v2 concern).
+ */
+export function MatchedRemitCard({ matchedRemittance }: MatchedRemitCardProps) {
+  if (matchedRemittance === null) return null;
+
+  const { id, totalPaid, status, receivedAt } = matchedRemittance;
+
+  const handleViewRemittance = () => {
+    window.location.href = `/remittances?id=${id}`;
+  };
+
+  return (
+    <section
+      className="flex flex-col gap-3 px-6 py-4"
+      data-testid="matched-remit-card"
+    >
+      <h3
+        data-testid="section-label"
+        className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-[color:var(--m-ink-tertiary)]"
+      >
+        Matched Remittance
+      </h3>
+
+      <div
+        data-testid="matched-remit-card-inner"
+        className="flex flex-col gap-4 rounded-lg border border-[color:var(--m-border-heavy)]/15 bg-[color:var(--m-surface)] p-4 sm:flex-row sm:items-start sm:justify-between"
+      >
+        {/* Left: remit id + status badge + received date */}
+        <div className="flex min-w-0 flex-col gap-2">
+          <span
+            data-testid="matched-remit-id"
+            className="font-mono text-sm text-[color:var(--m-ink-primary)]"
+            style={{ fontFamily: "var(--m-font-mono)" }}
+          >
+            {id}
+          </span>
+          <div className="flex flex-wrap items-center gap-2">
+            <Badge
+              variant={statusVariantFor(status)}
+              data-testid="matched-remit-status"
+              className="uppercase tracking-[0.14em]"
+            >
+              {status}
+            </Badge>
+            <span
+              data-testid="matched-remit-received"
+              className="text-xs text-[color:var(--m-ink-tertiary)]"
+            >
+              Received {fmt.date(receivedAt)}
+            </span>
+          </div>
+        </div>
+
+        {/* Right: total paid + view-remittance link */}
+        <div className="flex flex-col items-start gap-2 sm:items-end">
+          <span
+            data-testid="matched-remit-total-paid"
+            className="font-mono text-2xl font-semibold tabular-nums text-[color:var(--m-ink-primary)]"
+            style={{ fontFamily: "var(--m-font-mono)" }}
+          >
+            {fmt.usdPrecise(totalPaid)}
+          </span>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleViewRemittance}
+            data-testid="view-remittance-link"
+          >
+            View remittance
+            <ArrowRight
+              className="h-3.5 w-3.5"
+              strokeWidth={1.75}
+              aria-hidden
+            />
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+}