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
2026-07-02 13:16:38 -06:00
parent 9cc13e7940
commit ffacfd8665
8 changed files with 596 additions and 8 deletions
+119 -5
View File
@@ -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>
);
}