feat(frontend): StateHistoryTimeline with kind-colored dots

2026-06-20 11:43:49 -06:00
parent 1671e96a10
commit dc89244100
2 changed files with 402 additions and 0 deletions
@@ -0,0 +1,126 @@
+import { fmt } from "@/lib/format";
+import type { ClaimDetail } from "@/types";
+
+type StateHistoryTimelineProps = {
+  history: ClaimDetail["stateHistory"];
+};
+
+/**
+ * Event-kind → dot background color. The dot is the only colored element
+ * per row; the rest of the row uses the standard ink tokens so the
+ * timeline reads as a calm list of facts, with the dot color doing the
+ * signal work.
+ *
+ *   claim_submitted   → ink-secondary  (neutral, in-flight)
+ *   claim_accepted    → success        (payer accepted)
+ *   claim_paid        → success        (funds received)
+ *   claim_denied      → error          (needs attention)
+ *   manual_match      → warning        (operator action)
+ *   manual_unmatch    → warning        (operator action)
+ *   remit_received    → accent         (ERA arrived)
+ *   anything else     → muted          (forward-compat with new kinds)
+ */
+const DOT_BG: Record<string, string> = {
+  claim_submitted: "bg-[color:var(--m-ink-secondary)]",
+  claim_accepted: "bg-[color:var(--m-success)]",
+  claim_paid: "bg-[color:var(--m-success)]",
+  claim_denied: "bg-[color:var(--m-error)]",
+  manual_match: "bg-[color:var(--m-warning)]",
+  manual_unmatch: "bg-[color:var(--m-warning)]",
+  remit_received: "bg-[color:var(--m-accent)]",
+};
+
+function dotColorFor(kind: string): string {
+  return DOT_BG[kind] ?? "bg-[color:var(--m-ink-tertiary)]";
+}
+
+/**
+ * Display label for the event kind. The raw kind is a snake-case machine
+ * value (e.g. ``claim_paid``); replacing underscores with spaces gives a
+ * friendlier visual label without losing the original token (it's still
+ * on the ``<li data-kind="…">`` attribute for tests/inspection). The
+ * CSS ``uppercase`` transform handles visual casing.
+ */
+function kindLabel(kind: string): string {
+  return kind.replace(/_/g, " ");
+}
+
+/**
+ * State-history timeline for the claim detail drawer (SP4).
+ *
+ * Vertical timeline: a 2px left rule on the outer <ol> with a colored
+ * dot on each <li> centered on the rule (negative offset). Events
+ * render in input order — the backend already returns them
+ * most-recent-first per the type comment, so the visual order matches
+ * the audit order without resorting. Each row shows the kind eyebrow,
+ * a mono ts (date + time), and an optional remittance id underneath
+ * when the event was triggered by an ERA.
+ */
+export function StateHistoryTimeline({ history }: StateHistoryTimelineProps) {
+  return (
+    <section
+      className="flex flex-col gap-3 px-6 py-4"
+      data-testid="state-history-section"
+    >
+      <h3
+        data-testid="section-label"
+        className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-[color:var(--m-ink-tertiary)]"
+      >
+        State History ({history.length})
+      </h3>
+
+      {history.length === 0 ? (
+        <p
+          data-testid="state-history-empty"
+          className="text-sm text-[color:var(--m-ink-tertiary)]"
+        >
+          No history events
+        </p>
+      ) : (
+        <ol
+          data-testid="state-history-timeline"
+          className="relative ml-2 flex flex-col gap-3 border-l-2 border-[color:var(--m-border-heavy)] pl-5"
+        >
+          {history.map((event, i) => (
+            <li
+              key={`${event.kind}-${event.ts}-${i}`}
+              data-testid="state-history-item"
+              data-kind={event.kind}
+              className="relative flex flex-col gap-1"
+            >
+              <span
+                data-testid="state-history-dot"
+                aria-hidden
+                className={`absolute -left-[25px] top-1.5 h-2 w-2 rounded-full ${dotColorFor(event.kind)}`}
+              />
+              <div className="flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
+                <span
+                  data-testid="state-history-kind"
+                  className="text-[10px] font-semibold uppercase tracking-[0.14em] text-[color:var(--m-ink-tertiary)]"
+                >
+                  {kindLabel(event.kind)}
+                </span>
+                <span
+                  data-testid="state-history-ts"
+                  className="font-mono text-xs text-[color:var(--m-ink-secondary)] tabular-nums"
+                  style={{ fontFamily: "var(--m-font-mono)" }}
+                >
+                  {fmt.date(event.ts)} · {fmt.time(event.ts)}
+                </span>
+              </div>
+              {event.remittanceId ? (
+                <span
+                  data-testid="history-remit-id"
+                  className="font-mono text-xs text-[color:var(--m-ink-tertiary)]"
+                  style={{ fontFamily: "var(--m-font-mono)" }}
+                >
+                  Remit {event.remittanceId}
+                </span>
+              ) : null}
+            </li>
+          ))}
+        </ol>
+      )}
+    </section>
+  );
+}