feat(sp6): InboxRow with Ticker Tape accents

2026-06-20 18:38:52 -06:00
parent ab841653d4
commit 713f0932b2
2 changed files with 199 additions and 0 deletions
@@ -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>
+  );
+}