feat(sp7): LineReconciliationTab component

2026-06-20 19:47:49 -06:00
parent b538c0939b
commit 2569ff99a0
2 changed files with 277 additions and 0 deletions
@@ -0,0 +1,159 @@
+import { fmt } from "@/lib/format";
+import type {
+  LineReconciliationResponse,
+  LineReconciliationRow,
+} from "@/types";
+
+/**
+ * Per-line reconciliation tab for the ClaimDrawer (SP7 §6.2).
+ *
+ * Two-column layout: left = "Billed (837 SV1)", right = "Adjudicated
+ * (835 SVC)". Each row is a service line, matched when both sides
+ * are present; unmatched 835 lines appear at the bottom with an
+ * oxblood accent rail. Per-line CAS adjustments are listed under each
+ * row.
+ */
+export function LineReconciliationTab({
+  data,
+}: {
+  data: LineReconciliationResponse;
+}) {
+  const { summary, lines } = data;
+  const allMatched = summary.matchedLines === summary.totalLines;
+  const leftRows = lines.filter((l) => l.status !== "unmatched_835_only");
+  const rightRows = lines;
+
+  return (
+    <section className="flex flex-col gap-4 px-6 py-4">
+      <header
+        className="flex items-baseline justify-between"
+        data-testid="line-reconciliation-summary"
+      >
+        <div className="flex gap-6 font-mono tabular-nums text-sm">
+          <span data-testid="billed-total">
+            <span className="text-[color:var(--m-ink-tertiary)] text-xs uppercase mr-2">
+              Billed
+            </span>
+            {fmt.usdPrecise(Number(summary.billedTotal))}
+          </span>
+          <span data-testid="paid-total">
+            <span className="text-[color:var(--m-ink-tertiary)] text-xs uppercase mr-2">
+              Paid
+            </span>
+            {fmt.usdPrecise(Number(summary.paidTotal))}
+          </span>
+          <span data-testid="adjustments-total">
+            <span className="text-[color:var(--m-ink-tertiary)] text-xs uppercase mr-2">
+              Adjustments
+            </span>
+            {fmt.usdPrecise(Number(summary.adjustmentTotal))}
+          </span>
+        </div>
+        <span
+          className="font-mono text-xs uppercase tracking-wider"
+          style={{
+            color: allMatched ? "var(--tt-amber)" : "var(--tt-oxblood)",
+          }}
+          data-testid="match-summary"
+        >
+          {allMatched
+            ? `matched ${summary.matchedLines} of ${summary.totalLines} lines`
+            : `matched ${summary.matchedLines} of ${summary.totalLines} lines (${summary.totalLines - summary.matchedLines} unmatched)`}
+        </span>
+      </header>
+
+      <div className="grid grid-cols-2 gap-4">
+        <div data-testid="left-column">
+          <h3 className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-[color:var(--m-ink-tertiary)] mb-2">
+            Billed (837 SV1)
+          </h3>
+          {leftRows.map((row) => (
+            <LineCard key={rowKey(row, "left")} row={row} side="left" />
+          ))}
+        </div>
+        <div data-testid="right-column">
+          <h3 className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-[color:var(--m-ink-tertiary)] mb-2">
+            Adjudicated (835 SVC)
+          </h3>
+          {rightRows.map((row) => (
+            <LineCard key={rowKey(row, "right")} row={row} side="right" />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function rowKey(row: LineReconciliationRow, side: "left" | "right"): string {
+  const ln =
+    row.claimServiceLine?.lineNumber ??
+    row.serviceLinePayment?.lineNumber ??
+    -1;
+  return `${side}-${row.status}-${ln}`;
+}
+
+function LineCard({
+  row,
+  side,
+}: {
+  row: LineReconciliationRow;
+  side: "left" | "right";
+}) {
+  const cl = row.claimServiceLine;
+  const svc = row.serviceLinePayment;
+  const isUnmatched835 = row.status === "unmatched_835_only";
+  const accentColor = isUnmatched835 ? "var(--tt-oxblood)" : "var(--tt-ink-blue)";
+  const procCode = cl?.procedureCode ?? svc?.procedureCode ?? "—";
+  const lineNumber = cl?.lineNumber ?? svc?.lineNumber ?? null;
+
+  return (
+    <div
+      className="flex flex-col gap-1 py-2 px-3 mb-2"
+      style={{
+        borderLeft: `3px solid ${accentColor}`,
+        background: "rgba(255,255,255,0.02)",
+      }}
+      data-line-status={row.status}
+    >
+      <div className="flex items-baseline justify-between">
+        <div className="font-mono text-sm">
+          <span className="font-semibold">{procCode}</span>
+          {lineNumber !== null ? (
+            <span className="text-[color:var(--m-ink-tertiary)] ml-2">
+              #{lineNumber}
+            </span>
+          ) : null}
+          {isUnmatched835 ? (
+            <span
+              className="ml-2 text-xs italic"
+              style={{ color: "var(--tt-oxblood)" }}
+            >
+              no 837 line matched
+            </span>
+          ) : null}
+          {row.status === "unmatched_837_only" ? (
+            <span
+              className="ml-2 text-xs italic"
+              style={{ color: "var(--tt-oxblood)" }}
+            >
+              no 835 line adjudicated this line
+            </span>
+          ) : null}
+        </div>
+        <div className="font-mono tabular-nums text-xs">
+          {side === "left" && cl ? <span>{fmt.usdPrecise(Number(cl.charge))}</span> : null}
+          {side === "right" && svc ? <span>{fmt.usdPrecise(Number(svc.payment))}</span> : null}
+        </div>
+      </div>
+      {row.adjustments.length > 0 ? (
+        <ul className="text-xs font-mono text-[color:var(--m-ink-tertiary)] mt-1 space-y-0.5">
+          {row.adjustments.map((a, i) => (
+            <li key={i}>
+              {a.groupCode} · {a.reasonCode} · {fmt.usdPrecise(Number(a.amount))}
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  );
+}