feat(sp29): inbox rejected-row 999 ack chips + per-row Resubmit
- backend: _ack_summary_for_claims helper attaches claim_acks payload to inbox rejected-lane rows (3 tests) - frontend: InboxRow renders newest 3 AK2 chips + '+N more' overflow under the rejection reason, with '999 not linked' marker when an ack couldn't be linked to a claim - frontend: per-row Resubmit button downloads a single corrected 837 via api.serializeClaim837 (no bulk modal, no zip — one click, one .x12 file) - frontend: 2 new tests for the chip rendering and the per-row download flow
This commit is contained in:
Nora
@@ -87,4 +87,115 @@ describe("InboxRow", () => {
|
||||
);
|
||||
expect(container.textContent).toContain("92");
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------
|
||||
// SP29: per-AK2 chip evidence + per-row Resubmit gesture for the
|
||||
// rejected-lane drill. The page renders 999 AK2 set-response codes
|
||||
// inline on the row so the operator can spot "this batch had R/E/X
|
||||
// rejects" without opening the drawer. The per-row Resubmit button
|
||||
// downloads a single corrected 837.
|
||||
// ---------------------------------------------------------------------
|
||||
it("SP29: rejected row renders inline 999 ack evidence chips + Resubmit button", () => {
|
||||
// 4 linked 999 AK2 set-responses — 3 will render as chips, the
|
||||
// 4th triggers the "+N more" overflow indicator.
|
||||
const rejectedRow: InboxClaimRow = {
|
||||
...baseClaim,
|
||||
id: "REJ1",
|
||||
claim_acks: {
|
||||
total: 4,
|
||||
rejected: 2,
|
||||
items: [
|
||||
{
|
||||
ack_id: 11,
|
||||
set_control_number: "991102989",
|
||||
set_accept_reject_code: "A",
|
||||
ak2_index: 0,
|
||||
linked_at: "2026-07-02T10:03:00Z",
|
||||
},
|
||||
{
|
||||
ack_id: 12,
|
||||
set_control_number: "991102989",
|
||||
set_accept_reject_code: "R",
|
||||
ak2_index: 1,
|
||||
linked_at: "2026-07-02T10:02:00Z",
|
||||
},
|
||||
{
|
||||
ack_id: 13,
|
||||
set_control_number: "991102989",
|
||||
set_accept_reject_code: "E",
|
||||
ak2_index: 2,
|
||||
linked_at: "2026-07-02T10:01:00Z",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
const onResubmitOne = vi.fn();
|
||||
const { container } = render(
|
||||
<table>
|
||||
<tbody>
|
||||
<InboxRow
|
||||
row={rejectedRow}
|
||||
accent="oxblood"
|
||||
onClick={() => {}}
|
||||
onResubmitOne={onResubmitOne}
|
||||
/>
|
||||
</tbody>
|
||||
</table>,
|
||||
);
|
||||
|
||||
// Chip visible — the operator can read at a glance that the most
|
||||
// recent AK2 from this batch was an Accept, then a Reject, then
|
||||
// an Error. The "999 · A" / "999 · R" / "999 · E" text comes from
|
||||
// <AckCodeChip> rendering "<stcn>·<code>".
|
||||
expect(container.textContent).toContain("991102989·A");
|
||||
expect(container.textContent).toContain("991102989·R");
|
||||
expect(container.textContent).toContain("991102989·E");
|
||||
|
||||
// Overflow "+1 more" — total=4 but only 3 chips fit.
|
||||
expect(container.textContent).toContain("+1 more");
|
||||
|
||||
// Resubmit button rendered with the per-row testid.
|
||||
const btn = screen.getByTestId("resubmit-REJ1") as HTMLButtonElement;
|
||||
expect(btn).toBeTruthy();
|
||||
expect(btn.textContent).toBe("Resubmit");
|
||||
|
||||
// Click fires the per-row handler with the claim id; click does
|
||||
// NOT bubble to onClick (the row-onClick is for drilldown, the
|
||||
// button is a separate download gesture).
|
||||
fireEvent.click(btn);
|
||||
expect(onResubmitOne).toHaveBeenCalledTimes(1);
|
||||
expect(onResubmitOne).toHaveBeenCalledWith("REJ1");
|
||||
});
|
||||
|
||||
it("SP29: rejected row with no linked 999 acks shows the '999 not linked' orphan marker", () => {
|
||||
// A rejected claim whose 999 ack didn't match any ST02 in the
|
||||
// batch — the operator needs to know the drill lacked ack
|
||||
// evidence. The "999 not linked" italic line is the marker.
|
||||
const rejectedRow: InboxClaimRow = {
|
||||
...baseClaim,
|
||||
id: "REJ-ORPH",
|
||||
claim_acks: {
|
||||
total: 0,
|
||||
rejected: 0,
|
||||
items: [],
|
||||
},
|
||||
};
|
||||
const onResubmitOne = vi.fn();
|
||||
const { container } = render(
|
||||
<table>
|
||||
<tbody>
|
||||
<InboxRow
|
||||
row={rejectedRow}
|
||||
accent="oxblood"
|
||||
onClick={() => {}}
|
||||
onResubmitOne={onResubmitOne}
|
||||
/>
|
||||
</tbody>
|
||||
</table>,
|
||||
);
|
||||
expect(container.textContent).toContain("999 not linked");
|
||||
// The Resubmit button still renders so the operator can fix the
|
||||
// claim without first manually linking the orphan.
|
||||
expect(screen.getByTestId("resubmit-REJ-ORPH")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -10,6 +10,8 @@ const ACCENT_VAR: Record<Accent, string> = {
|
||||
muted: "var(--tt-muted)",
|
||||
};
|
||||
|
||||
const REJECT_CODES = new Set(["R", "E", "X"]);
|
||||
|
||||
function fmtMoney(n: number | null | undefined): string {
|
||||
if (n == null) return "—";
|
||||
return n.toLocaleString("en-US", { style: "currency", currency: "USD" });
|
||||
@@ -55,12 +57,54 @@ function Sparkline({ breakdown }: { breakdown: ScoreBreakdown | null }) {
|
||||
);
|
||||
}
|
||||
|
||||
type Props =
|
||||
| { row: InboxClaimRow; accent: Accent; onClick: () => void }
|
||||
| { row: InboxCandidateRow; accent: Accent; onClick: () => void };
|
||||
// ---------------------------------------------------------------------------
|
||||
// SP29: per-AK2 chip (compact evidence row for the rejected-lane drill)
|
||||
// ---------------------------------------------------------------------------
|
||||
function AckCodeChip({
|
||||
setControlNumber,
|
||||
code,
|
||||
}: {
|
||||
setControlNumber: string;
|
||||
code: string;
|
||||
}) {
|
||||
const isReject = REJECT_CODES.has(code);
|
||||
return (
|
||||
<span
|
||||
className="inline-flex items-center gap-1 rounded-sm border px-1.5 py-0.5 mono tabular-nums"
|
||||
style={{
|
||||
fontSize: 9.5,
|
||||
letterSpacing: "0.04em",
|
||||
color: isReject ? "var(--tt-oxblood)" : "var(--tt-muted)",
|
||||
backgroundColor: isReject
|
||||
? "rgba(229, 72, 77, 0.08)"
|
||||
: "rgba(220, 220, 230, 0.06)",
|
||||
borderColor: isReject
|
||||
? "rgba(229, 72, 77, 0.28)"
|
||||
: "rgba(220, 220, 230, 0.20)",
|
||||
fontWeight: 600,
|
||||
}}
|
||||
title={`ST02 ${setControlNumber} · AK5 ${code}${isReject ? " (rejected)" : " (accepted)"}`}
|
||||
>
|
||||
<span style={{ opacity: 0.7 }}>{setControlNumber}</span>
|
||||
<span>·</span>
|
||||
<span style={{ fontWeight: 700 }}>{code || "—"}</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export function InboxRow({ row, accent, onClick }: Props) {
|
||||
type Props = {
|
||||
row: InboxClaimRow | InboxCandidateRow;
|
||||
accent: Accent;
|
||||
onClick: () => void;
|
||||
/** SP29: per-row Resubmit gesture. Only meaningful for rejected
|
||||
* claim rows; the component no-ops on remit rows or other states. */
|
||||
onResubmitOne?: (claimId: string) => void;
|
||||
};
|
||||
|
||||
export function InboxRow({ row, accent, onClick, onResubmitOne }: Props) {
|
||||
const isCandidate = row.kind === "remit";
|
||||
const isRejected =
|
||||
!isCandidate && (row as InboxClaimRow).state === "rejected";
|
||||
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);
|
||||
@@ -68,6 +112,7 @@ export function InboxRow({ row, accent, onClick }: Props) {
|
||||
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;
|
||||
const claimAcks = !isCandidate ? (row as InboxClaimRow).claim_acks : null;
|
||||
|
||||
return (
|
||||
<tr
|
||||
@@ -93,7 +138,47 @@ export function InboxRow({ row, accent, onClick }: Props) {
|
||||
className="py-2.5 mono"
|
||||
style={{ color: reason ? "var(--tt-oxblood)" : "var(--tt-amber)", fontSize: 11 }}
|
||||
>
|
||||
{reason ?? (topScore != null ? `score ${topScore}` : "")}
|
||||
<div className="flex flex-col gap-1">
|
||||
<span>{reason ?? (topScore != null ? `score ${topScore}` : "")}</span>
|
||||
{/* SP29: rejected-lane AK2 chip evidence (newest 3 + overflow). */}
|
||||
{isRejected && claimAcks && claimAcks.items.length > 0 && (
|
||||
<span className="inline-flex items-center gap-1 flex-wrap">
|
||||
{claimAcks.items.slice(0, 3).map((it) => (
|
||||
<AckCodeChip
|
||||
key={`${it.ack_id}-${it.ak2_index}`}
|
||||
setControlNumber={it.set_control_number}
|
||||
code={it.set_accept_reject_code}
|
||||
/>
|
||||
))}
|
||||
{claimAcks.total > 3 && (
|
||||
<span
|
||||
className="inline-flex items-center rounded-sm border px-1.5 py-0.5 mono tabular-nums"
|
||||
style={{
|
||||
fontSize: 9.5,
|
||||
letterSpacing: "0.04em",
|
||||
color: "var(--tt-muted)",
|
||||
borderColor: "rgba(220, 220, 230, 0.20)",
|
||||
backgroundColor: "rgba(220, 220, 230, 0.04)",
|
||||
fontWeight: 600,
|
||||
}}
|
||||
title={`${claimAcks.total - 3} more AK2 set-response(s) on the ClaimDrawer`}
|
||||
>
|
||||
+{claimAcks.total - 3} more
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
{/* SP29: rejected claim but no linked 999 acks (orphan). */}
|
||||
{isRejected && (!claimAcks || claimAcks.items.length === 0) && (
|
||||
<span
|
||||
className="mono italic"
|
||||
style={{ fontSize: 10, color: "var(--tt-muted)", opacity: 0.75 }}
|
||||
title="No 999 AK2 set-responses are linked to this claim. The set_control_number on the 999 ack had no matching ST02 batch. Use the Inbox ack-orphans lane to manually match."
|
||||
>
|
||||
999 not linked
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
className="py-2.5 mono tabular-nums"
|
||||
@@ -116,6 +201,35 @@ export function InboxRow({ row, accent, onClick }: Props) {
|
||||
<td className="py-2.5 pr-3">
|
||||
<Sparkline breakdown={filled} />
|
||||
</td>
|
||||
{/* SP29: per-row Resubmit button (rejected-lane only). */}
|
||||
{isRejected && onResubmitOne ? (
|
||||
<td
|
||||
className="py-2.5 pr-3 text-right"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="mono uppercase tracking-[0.12em] px-2 py-1 rounded-sm transition-colors hover:bg-[color:var(--tt-amber)]/10 focus-visible:outline-none focus-visible:bg-[color:var(--tt-amber)]/10"
|
||||
style={{
|
||||
color: "var(--tt-amber)",
|
||||
border: "1px solid rgba(229, 154, 50, 0.40)",
|
||||
backgroundColor: "transparent",
|
||||
fontSize: 10,
|
||||
fontWeight: 700,
|
||||
}}
|
||||
data-testid={`resubmit-${id}`}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onResubmitOne(id);
|
||||
}}
|
||||
title="Download the corrected 837 for this single claim"
|
||||
>
|
||||
Resubmit
|
||||
</button>
|
||||
</td>
|
||||
) : (
|
||||
<td className="py-2.5 pr-3" aria-hidden />
|
||||
)}
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -75,12 +75,16 @@ export function Lane({
|
||||
rows,
|
||||
onRowClick,
|
||||
onSelectionChange,
|
||||
onResubmitOne,
|
||||
}: {
|
||||
name: string;
|
||||
accent: Accent;
|
||||
rows: LaneRow[];
|
||||
onRowClick: (row: LaneRow) => void;
|
||||
onSelectionChange?: (ids: string[]) => void;
|
||||
/** SP29: per-row Resubmit gesture for the rejected-lane drill.
|
||||
* Only claim rows render the button; remit rows ignore it. */
|
||||
onResubmitOne?: (claimId: string) => void;
|
||||
}) {
|
||||
const [selected, setSelected] = useState<Set<string>>(new Set());
|
||||
|
||||
@@ -188,7 +192,17 @@ export function Lane({
|
||||
onToggle={() => toggle(id)}
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<InboxRow row={row} accent={accent} onClick={() => onRowClick(row)} />
|
||||
<InboxRow
|
||||
row={row}
|
||||
accent={accent}
|
||||
onClick={() => onRowClick(row)}
|
||||
// SP29: only meaningful on claim rows. Remit rows
|
||||
// narrow the union to the `onResubmitOne?: never`
|
||||
// branch so this is a no-op for them.
|
||||
{...(row.kind === "claim" && onResubmitOne
|
||||
? { onResubmitOne }
|
||||
: {})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user