feat(sp7): LineReconciliationTab component

src/components/ClaimDrawer/LineReconciliationTab.test.tsx

@@ -0,0 +1,118 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it } from "vitest";
+import { cleanup, render } from "@testing-library/react";
+import { LineReconciliationTab } from "./LineReconciliationTab";
+import type { LineReconciliationResponse } from "@/types";
+
+afterEach(() => cleanup());
+
+const matchedAll: LineReconciliationResponse = {
+  claimId: "CLM-1",
+  summary: {
+    billedTotal: "200.00",
+    paidTotal: "160.00",
+    adjustmentTotal: "40.00",
+    matchedLines: 2,
+    totalLines: 2,
+  },
+  lines: [
+    {
+      claimServiceLine: {
+        lineNumber: 1,
+        procedureQualifier: "HC",
+        procedureCode: "99213",
+        modifiers: [],
+        charge: "100.00",
+        units: "1",
+        unitType: "UN",
+        serviceDate: "2026-06-01",
+      },
+      serviceLinePayment: {
+        id: 1,
+        lineNumber: 1,
+        procedureQualifier: "HC",
+        procedureCode: "99213",
+        modifiers: [],
+        charge: "100.00",
+        payment: "80.00",
+        units: "1",
+        unitType: "UN",
+        serviceDate: "2026-06-01",
+      },
+      status: "matched",
+      adjustments: [
+        { groupCode: "CO", reasonCode: "45", amount: "20.00" },
+      ],
+    },
+  ],
+};
+
+describe("LineReconciliationTab", () => {
+  it("renders summary totals", () => {
+    const { container } = render(<LineReconciliationTab data={matchedAll} />);
+    expect(container.textContent).toMatch(/billed/i);
+    expect(container.textContent).toMatch(/paid/i);
+    expect(container.textContent).toMatch(/adjustments/i);
+  });
+
+  it("renders full-match summary line", () => {
+    const { container } = render(<LineReconciliationTab data={matchedAll} />);
+    expect(container.textContent).toMatch(/matched 2 of 2 lines/i);
+  });
+
+  it("renders partial-match summary line when lines are unmatched", () => {
+    const partial: LineReconciliationResponse = {
+      ...matchedAll,
+      summary: { ...matchedAll.summary, matchedLines: 1, totalLines: 2 },
+      lines: [
+        matchedAll.lines[0]!,
+        {
+          claimServiceLine: {
+            lineNumber: 2,
+            procedureQualifier: "HC",
+            procedureCode: "99214",
+            modifiers: [],
+            charge: "100.00",
+            units: "1",
+            unitType: "UN",
+            serviceDate: "2026-06-01",
+          },
+          serviceLinePayment: null,
+          status: "unmatched_837_only",
+          adjustments: [],
+        },
+      ],
+    };
+    const { container } = render(<LineReconciliationTab data={partial} />);
+    expect(container.textContent).toMatch(/matched 1 of 2 lines/i);
+  });
+
+  it("renders unmatched 835 line with oxblood accent", () => {
+    const with835Only: LineReconciliationResponse = {
+      ...matchedAll,
+      lines: [
+        matchedAll.lines[0]!,
+        {
+          claimServiceLine: null,
+          serviceLinePayment: {
+            id: 2,
+            lineNumber: 2,
+            procedureQualifier: "HC",
+            procedureCode: "90837",
+            modifiers: [],
+            charge: "100.00",
+            payment: "70.00",
+            units: "1",
+            unitType: "UN",
+            serviceDate: "2026-06-01",
+          },
+          status: "unmatched_835_only",
+          adjustments: [],
+        },
+      ],
+    };
+    const { container } = render(<LineReconciliationTab data={with835Only} />);
+    expect(container.textContent).toMatch(/90837/);
+    expect(container.textContent).toMatch(/no 837 line matched/i);
+  });
+});

src/components/ClaimDrawer/LineReconciliationTab.tsx

@@ -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>
+  );
+}