feat(sp6): InboxRow with Ticker Tape accents

src/components/inbox/InboxRow.test.tsx

@@ -0,0 +1,90 @@
+// @vitest-environment happy-dom
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { InboxRow } from "./InboxRow";
+import type { InboxClaimRow, InboxCandidateRow } from "@/lib/inbox-api";
+
+const baseClaim: InboxClaimRow = {
+  id: "CLP-7741",
+  kind: "claim",
+  patient_control_number: "PCN-001",
+  charge_amount: 1240,
+  payer_id: "CO-MCD",
+  provider_npi: "1234567890",
+  state: "rejected",
+  rejection_reason: "999 AK9 R",
+  rejected_at: "2026-06-20T09:12:00Z",
+  service_date_from: null,
+  score: null,
+  score_tier: null,
+  score_breakdown: null,
+};
+
+describe("InboxRow", () => {
+  it("renders the claim id, payer, and formatted charge", () => {
+    const { container } = render(
+      <table>
+        <tbody>
+          <InboxRow row={baseClaim} accent="oxblood" onClick={() => {}} />
+        </tbody>
+      </table>,
+    );
+    expect(container.textContent).toContain("CLP-7741");
+    expect(container.textContent).toContain("CO-MCD");
+    expect(container.textContent).toContain("$1,240.00");
+  });
+
+  it("renders the rejection reason when present", () => {
+    const { container } = render(
+      <table>
+        <tbody>
+          <InboxRow row={baseClaim} accent="oxblood" onClick={() => {}} />
+        </tbody>
+      </table>,
+    );
+    expect(container.textContent).toContain("999 AK9 R");
+  });
+
+  it("calls onClick when the row is clicked", () => {
+    const onClick = vi.fn();
+    const { container } = render(
+      <table>
+        <tbody>
+          <InboxRow row={baseClaim} accent="oxblood" onClick={onClick} />
+        </tbody>
+      </table>,
+    );
+    const row = container.querySelector("tr");
+    expect(row).not.toBeNull();
+    fireEvent.click(row!);
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+
+  it("renders the top candidate score for remit rows", () => {
+    const candidateRow: InboxCandidateRow = {
+      id: "R-1",
+      kind: "remit",
+      payer_claim_control_number: "PCN-X",
+      charge_amount: 500,
+      payer_id: "AETNA",
+      rendering_provider_npi: "1234567890",
+      service_date: null,
+      candidates: [
+        {
+          claim_id: "C-1",
+          score: 92,
+          tier: "strong",
+          breakdown: { patient: 1, date: 1, amount: 1, provider: 1 },
+        },
+      ],
+    };
+    const { container } = render(
+      <table>
+        <tbody>
+          <InboxRow row={candidateRow} accent="amber" onClick={() => {}} />
+        </tbody>
+      </table>,
+    );
+    expect(container.textContent).toContain("92");
+  });
+});

src/components/inbox/InboxRow.tsx

@@ -0,0 +1,109 @@
+import type { InboxClaimRow, InboxCandidateRow, ScoreBreakdown } from "@/lib/inbox-api";
+
+export type Accent = "oxblood" | "amber" | "ink-blue" | "muted";
+
+const ACCENT_VAR: Record<Accent, string> = {
+  oxblood: "var(--tt-oxblood)",
+  amber: "var(--tt-amber)",
+  "ink-blue": "var(--tt-ink-blue)",
+  muted: "var(--tt-muted)",
+};
+
+function fmtMoney(n: number | null | undefined): string {
+  if (n == null) return "—";
+  return n.toLocaleString("en-US", { style: "currency", currency: "USD" });
+}
+
+function fmtAgo(iso: string | null | undefined): string {
+  if (!iso) return "";
+  const ms = Date.now() - new Date(iso).getTime();
+  if (Number.isNaN(ms)) return "";
+  const mins = Math.round(ms / 60_000);
+  if (mins < 60) return `${mins}m`;
+  const hrs = Math.round(mins / 60);
+  if (hrs < 24) return `${hrs}h`;
+  const days = Math.round(hrs / 24);
+  return `${days}d`;
+}
+
+function Sparkline({ breakdown }: { breakdown: ScoreBreakdown | null }) {
+  if (!breakdown) return null;
+  const fields: Array<keyof ScoreBreakdown> = ["patient", "date", "amount", "provider"];
+  return (
+    <span className="inline-flex items-end gap-0.5 align-middle h-3">
+      {fields.map((k) => {
+        const v = breakdown[k] as number;
+        const h = Math.max(2, Math.round(v * 12));
+        return (
+          <span
+            key={k}
+            title={`${k}: ${v.toFixed(2)}`}
+            className="inline-block w-1.5"
+            style={{
+              height: `${h}px`,
+              background: v >= 0.5 ? "var(--tt-amber)" : "var(--tt-muted)",
+            }}
+          />
+        );
+      })}
+    </span>
+  );
+}
+
+type Props =
+  | { row: InboxClaimRow; accent: Accent; onClick: () => void }
+  | { row: InboxCandidateRow; accent: Accent; onClick: () => void };
+
+export function InboxRow({ row, accent, onClick }: Props) {
+  const isCandidate = row.kind === "remit";
+  const id = isCandidate ? (row as InboxCandidateRow).payer_claim_control_number : row.id;
+  const payer = (isCandidate ? (row as InboxCandidateRow).payer_id : (row as InboxClaimRow).payer_id) ?? "";
+  const charge = fmtMoney(row.charge_amount);
+  const reason = !isCandidate ? (row as InboxClaimRow).rejection_reason : null;
+  const rejectedAt = !isCandidate ? (row as InboxClaimRow).rejected_at : null;
+  const topScore = isCandidate && row.candidates.length > 0 ? row.candidates[0].score : null;
+  const filled = isCandidate && row.candidates.length > 0 ? row.candidates[0].breakdown : null;
+
+  return (
+    <tr
+      onClick={onClick}
+      className="cursor-pointer hover:bg-white/[0.03] transition-colors"
+      style={{ borderBottom: "1px solid var(--tt-bg-elev)" }}
+    >
+      <td style={{ width: 4, background: ACCENT_VAR[accent], padding: 0 }} />
+      <td
+        className="py-2 pl-3 font-mono"
+        style={{ color: "var(--tt-ink)", fontSize: 12 }}
+      >
+        {id}
+      </td>
+      <td
+        className="py-2 font-mono"
+        style={{ color: "var(--tt-ink-dim)", fontSize: 11 }}
+      >
+        {reason ?? (topScore != null ? `score ${topScore}` : "")}
+      </td>
+      <td
+        className="py-2 font-mono tabular-nums"
+        style={{ color: "var(--tt-ink-dim)", fontSize: 11 }}
+      >
+        {fmtAgo(rejectedAt)}
+      </td>
+      <td
+        className="py-2 text-right font-mono tabular-nums"
+        style={{ color: "var(--tt-ink)", fontSize: 12 }}
+      >
+        {charge}
+      </td>
+      <td
+        className="py-2 pl-4 uppercase tracking-wider"
+        style={{ color: "var(--tt-ink-dim)", fontSize: 10 }}
+      >
+        {payer}
+      </td>
+      <td className="py-2 pr-3">
+        <Sparkline breakdown={filled} />
+      </td>
+    </tr>
+  );
+}