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>
|
||||
);
|
||||
|
||||
@@ -54,6 +54,28 @@ export type InboxClaimRow = {
|
||||
payer_rejected_by_277ca_id?: string | null;
|
||||
payer_rejected_acknowledged_at?: string | null;
|
||||
payer_rejected_acknowledged_actor?: string | null;
|
||||
// SP29: present on `rejected`-lane rows (999 envelope rejects).
|
||||
// Newest 5 AK2 set-responses for this claim plus a `total` /
|
||||
// `rejected` summary. `null` when the claim has zero linked
|
||||
// 999 acks. Filtered to ack_kind='999' only — the
|
||||
// `payer_rejected` lane carries 277CA evidence separately.
|
||||
claim_acks?: InboxClaimAckSummary | null;
|
||||
};
|
||||
|
||||
/**
|
||||
* SP29: per-claim 999 ack-evidence summary for the Inbox
|
||||
* `rejected`-lane drill. Newest-first; up to 5 items.
|
||||
*/
|
||||
export type InboxClaimAckSummary = {
|
||||
total: number;
|
||||
rejected: number;
|
||||
items: Array<{
|
||||
ack_id: number;
|
||||
set_control_number: string;
|
||||
set_accept_reject_code: string;
|
||||
ak2_index: number;
|
||||
linked_at: string;
|
||||
}>;
|
||||
};
|
||||
|
||||
export type InboxCandidateRow = {
|
||||
|
||||
@@ -6,6 +6,7 @@ import { MemoryRouter, useLocation, useNavigate } from "react-router-dom";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import Inbox from "./Inbox";
|
||||
import * as inboxApi from "@/lib/inbox-api";
|
||||
import * as apiModule from "@/lib/api";
|
||||
import * as downloadModule from "@/lib/download";
|
||||
|
||||
// The Inbox's write-affordance BulkBars (resubmit / acknowledge /
|
||||
@@ -769,4 +770,112 @@ describe("Inbox page", () => {
|
||||
expect(options[0]?.getAttribute("data-claim-id")).toBe("CLM-A");
|
||||
expect(options[1]?.getAttribute("data-claim-id")).toBe("CLM-B");
|
||||
});
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// SP29: per-row Resubmit button on rejected-lane claim rows downloads
|
||||
// the single-claim corrected 837. The bulk resubmit path (multi-select)
|
||||
// is exercised above in the "SP8 multi-select resubmit" test; this
|
||||
// covers the dedicated single-claim gesture and the operator's
|
||||
// most-click flow ("I see one reject in the lane, I click Resubmit
|
||||
// next to it").
|
||||
// -------------------------------------------------------------------------
|
||||
it("SP29: per-row Resubmit button downloads the single-claim 837", async () => {
|
||||
// Lane returns one rejected claim. The page is responsible for
|
||||
// calling api.serializeClaim837(id) and handing the returned
|
||||
// text to downloadTextFile as <id>.x12.
|
||||
vi.stubGlobal(
|
||||
"fetch",
|
||||
vi.fn().mockImplementation(async (url: string) => {
|
||||
if (url.includes("/api/inbox/lanes")) {
|
||||
return {
|
||||
ok: true,
|
||||
json: async () => ({
|
||||
rejected: [
|
||||
{
|
||||
id: "REJ1",
|
||||
kind: "claim",
|
||||
patient_control_number: "REJ1",
|
||||
charge_amount: 175,
|
||||
payer_id: "P1",
|
||||
provider_npi: "1234567890",
|
||||
state: "rejected",
|
||||
rejection_reason: "999 AK9 R",
|
||||
rejected_at: "2026-07-02T09:00:00Z",
|
||||
service_date_from: null,
|
||||
claim_acks: {
|
||||
total: 2,
|
||||
rejected: 1,
|
||||
items: [
|
||||
{
|
||||
ack_id: 50,
|
||||
set_control_number: "991102989",
|
||||
set_accept_reject_code: "R",
|
||||
ak2_index: 0,
|
||||
linked_at: "2026-07-02T09:00:00Z",
|
||||
},
|
||||
{
|
||||
ack_id: 51,
|
||||
set_control_number: "991102989",
|
||||
set_accept_reject_code: "A",
|
||||
ak2_index: 1,
|
||||
linked_at: "2026-07-02T08:59:00Z",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
payer_rejected: [],
|
||||
candidates: [],
|
||||
unmatched: [],
|
||||
done_today: [],
|
||||
}),
|
||||
};
|
||||
}
|
||||
return { ok: true, json: async () => ({}) };
|
||||
}),
|
||||
);
|
||||
|
||||
// Spy on the api call AND the download sink. The page calls
|
||||
// `api.serializeClaim837(id)` (namespace import from @/lib/api),
|
||||
// and downloadTextFile is on the download module.
|
||||
const serializeSpy = vi
|
||||
.spyOn(apiModule.api, "serializeClaim837")
|
||||
.mockResolvedValue({
|
||||
text: "ISA*00*~...",
|
||||
filename: "claim-REJ1.x12",
|
||||
});
|
||||
const downloadSpy = vi
|
||||
.spyOn(downloadModule, "downloadTextFile")
|
||||
.mockImplementation(() => {});
|
||||
|
||||
const view = renderInbox();
|
||||
await waitFor(() => {
|
||||
expect(view.container.textContent).toContain("REJ1");
|
||||
});
|
||||
|
||||
// Click the per-row Resubmit button — its testid includes the
|
||||
// claim id so the operator can target one row at a time.
|
||||
const btn = view.container.querySelector(
|
||||
'[data-testid="resubmit-REJ1"]',
|
||||
) as HTMLButtonElement | null;
|
||||
expect(btn).not.toBeNull();
|
||||
expect(btn!.textContent).toBe("Resubmit");
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.click(btn!);
|
||||
});
|
||||
|
||||
// The api was called with the row's claim id, and the resulting
|
||||
// .x12 was handed to downloadTextFile with text/x12 mime so the
|
||||
// browser saves it as a download.
|
||||
await waitFor(() => {
|
||||
expect(serializeSpy).toHaveBeenCalledTimes(1);
|
||||
expect(serializeSpy).toHaveBeenCalledWith("REJ1");
|
||||
});
|
||||
expect(downloadSpy).toHaveBeenCalledTimes(1);
|
||||
const [filename, mime, text] = downloadSpy.mock.calls[0];
|
||||
expect(filename).toBe("claim-REJ1.x12");
|
||||
expect(mime).toBe("text/x12");
|
||||
expect(text).toBe("ISA*00*~...");
|
||||
});
|
||||
});
|
||||
|
||||
+24
-1
@@ -30,7 +30,8 @@ import {
|
||||
resubmitRejectedWithDownload,
|
||||
acknowledgePayerRejected,
|
||||
} from "@/lib/inbox-api";
|
||||
import { downloadBlob } from "@/lib/download";
|
||||
import { api } from "@/lib/api";
|
||||
import { downloadBlob, downloadTextFile } from "@/lib/download";
|
||||
import { RoleGate } from "@/auth/RoleGate";
|
||||
|
||||
type LaneKey =
|
||||
@@ -107,6 +108,24 @@ export default function Inbox() {
|
||||
await refetch();
|
||||
}
|
||||
|
||||
// SP29: per-row Resubmit gesture for the rejected lane. Downloads
|
||||
// the single-claim corrected 837 (read-only — see spec §D1). The
|
||||
// operator reconciles via their own workflow, then resubmits via
|
||||
// the bulk path or the existing single-claim modal flow.
|
||||
async function performResubmitOne(claimId: string) {
|
||||
try {
|
||||
const { text, filename } = await api.serializeClaim837(claimId);
|
||||
downloadTextFile(filename, "text/x12", text);
|
||||
} catch (err) {
|
||||
console.error("resubmit single failed:", claimId, err);
|
||||
// Surface the failure — the Inbox doesn't have a toast yet, so
|
||||
// we fall back to an alert. v2 swaps in a sonner toast.
|
||||
window.alert(
|
||||
`Failed to download 837 for ${claimId}: ${err instanceof Error ? err.message : String(err)}`,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
async function onResubmit() {
|
||||
const ids = selected.rejected;
|
||||
if (ids.length === 0) return;
|
||||
@@ -298,6 +317,10 @@ export default function Inbox() {
|
||||
}
|
||||
}}
|
||||
onSelectionChange={(ids) => setLaneSelected("rejected", ids)}
|
||||
// SP29: per-row Resubmit button. Downloads the single-claim
|
||||
// corrected 837 (read-only). InboxRow renders the button only
|
||||
// on rejected claim rows; remit rows ignore the prop.
|
||||
onResubmitOne={(claimId) => void performResubmitOne(claimId)}
|
||||
/>
|
||||
{/*
|
||||
SP14: payer-rejected (277CA STC A4/A6/A7). Distinct accent
|
||||
|
||||
Reference in New Issue
Block a user