feat(sp7): LineReconciliationTab component
This commit is contained in:
Tyler
@@ -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);
|
||||
});
|
||||
});
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user