feat(frontend): j/k row nav + ? cheatsheet on Acks and Remittances
This commit is contained in:
Tyler
+158
-89
@@ -1,4 +1,4 @@
|
||||
import { useState } from "react";
|
||||
import { useCallback, useState } from "react";
|
||||
import { CheckCircle2, Download } from "lucide-react";
|
||||
import {
|
||||
Table,
|
||||
@@ -11,7 +11,9 @@ import {
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { EmptyState } from "@/components/ui/empty-state";
|
||||
import { ErrorState } from "@/components/ui/error-state";
|
||||
import { KeyboardCheatsheet } from "@/components/KeyboardCheatsheet";
|
||||
import { useAcks } from "@/hooks/useAcks";
|
||||
import { useRowKeyboard } from "@/hooks/useRowKeyboard";
|
||||
import { api } from "@/lib/api";
|
||||
import { fmt } from "@/lib/format";
|
||||
import { cn } from "@/lib/utils";
|
||||
@@ -107,98 +109,165 @@ export function Acks() {
|
||||
const { data, isLoading, isError, error, refetch } = useAcks({ limit: 100 });
|
||||
const items = data?.items ?? [];
|
||||
|
||||
// Row navigation state (SP4-style j/k). `selectedIndex === null`
|
||||
// means "no row focused yet" — the initial render shows no
|
||||
// highlight, and the first j press lands on row 0 (and the first k
|
||||
// press lands on the last row, so the user can quickly jump to
|
||||
// either end of the list).
|
||||
const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
|
||||
const [helpOpen, setHelpOpen] = useState(false);
|
||||
|
||||
const moveNext = useCallback(() => {
|
||||
setSelectedIndex((i) => {
|
||||
if (items.length === 0) return null;
|
||||
if (i === null) return 0;
|
||||
return (i + 1) % items.length;
|
||||
});
|
||||
}, [items.length]);
|
||||
|
||||
const movePrev = useCallback(() => {
|
||||
setSelectedIndex((i) => {
|
||||
if (items.length === 0) return null;
|
||||
if (i === null) return items.length - 1;
|
||||
// Add items.length before the modulo so the negative index
|
||||
// (first row → wrap to last) wraps correctly.
|
||||
return (i - 1 + items.length) % items.length;
|
||||
});
|
||||
}, [items.length]);
|
||||
|
||||
// `enabled: !helpOpen` so j/k navigation yields to the cheatsheet
|
||||
// while it's open. The cheatsheet's own dismiss listener still fires
|
||||
// for any non-`?` keypress (including j/k), so pressing j will close
|
||||
// the cheatsheet but won't move the row — exactly the behavior the
|
||||
// user expects: "the cheatsheet is in the way, get it out of my
|
||||
// way; I'll start navigating on the next keypress".
|
||||
useRowKeyboard({
|
||||
enabled: !helpOpen && items.length > 0,
|
||||
onNext: moveNext,
|
||||
onPrev: movePrev,
|
||||
onClose: () => setHelpOpen(false),
|
||||
onToggleHelp: () => setHelpOpen((v) => !v),
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="space-y-8 animate-fade-in">
|
||||
<header>
|
||||
<div className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-muted-foreground mb-2 flex items-center gap-2">
|
||||
<span className="inline-block h-px w-6 bg-border" />
|
||||
999 ACKs
|
||||
</div>
|
||||
<h1 className="text-[22px] font-semibold tracking-tight">
|
||||
999 Implementation Acknowledgments
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-1.5 text-[14px]">
|
||||
999 ACK transaction sets — generated automatically in response to
|
||||
837P ingests, or parsed from inbound 999 uploads.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{isError ? (
|
||||
<ErrorState
|
||||
message="Couldn't load ACKs from the backend."
|
||||
detail={error instanceof Error ? error.message : String(error)}
|
||||
onRetry={() => refetch()}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<div className="surface rounded-xl overflow-hidden">
|
||||
{isLoading ? (
|
||||
<div className="p-4 space-y-2">
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<Skeleton key={i} variant="row" />
|
||||
))}
|
||||
<>
|
||||
<KeyboardCheatsheet
|
||||
open={helpOpen}
|
||||
onClose={() => setHelpOpen(false)}
|
||||
/>
|
||||
<div className="space-y-8 animate-fade-in">
|
||||
<header>
|
||||
<div className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-muted-foreground mb-2 flex items-center gap-2">
|
||||
<span className="inline-block h-px w-6 bg-border" />
|
||||
999 ACKs
|
||||
</div>
|
||||
) : items.length === 0 ? (
|
||||
<EmptyState
|
||||
eyebrow="999 ACKs · awaiting first 837 with ack=true"
|
||||
message="Upload an 837P with ?ack=true, or parse a 999 file directly to populate this list."
|
||||
<h1 className="text-[22px] font-semibold tracking-tight">
|
||||
999 Implementation Acknowledgments
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-1.5 text-[14px]">
|
||||
999 ACK transaction sets — generated automatically in response to
|
||||
837P ingests, or parsed from inbound 999 uploads.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{isError ? (
|
||||
<ErrorState
|
||||
message="Couldn't load ACKs from the backend."
|
||||
detail={error instanceof Error ? error.message : String(error)}
|
||||
onRetry={() => refetch()}
|
||||
/>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-12" aria-label="Status" />
|
||||
<TableHead>ID</TableHead>
|
||||
<TableHead>Source Batch</TableHead>
|
||||
<TableHead className="text-right">Accepted</TableHead>
|
||||
<TableHead className="text-right">Rejected</TableHead>
|
||||
<TableHead className="text-right">Received</TableHead>
|
||||
<TableHead>ACK Code</TableHead>
|
||||
<TableHead>Parsed</TableHead>
|
||||
<TableHead className="w-20" aria-label="Download" />
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{items.map((a) => (
|
||||
<TableRow key={a.id}>
|
||||
<TableCell className="text-muted-foreground">
|
||||
<CheckCircle2
|
||||
className={cn(
|
||||
"h-3.5 w-3.5",
|
||||
a.ackCode === "A" ? "text-emerald-400" : a.ackCode === "R" ? "text-red-400" : "text-amber-400",
|
||||
)}
|
||||
strokeWidth={1.75}
|
||||
aria-hidden
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className="display num text-[13px]">{a.id}</TableCell>
|
||||
<TableCell className="font-mono text-[12px] text-muted-foreground truncate max-w-[180px]">
|
||||
{a.sourceBatchId}
|
||||
</TableCell>
|
||||
<TableCell className="text-right display num text-emerald-400">
|
||||
{a.acceptedCount}
|
||||
</TableCell>
|
||||
<TableCell className="text-right display num text-red-400">
|
||||
{a.rejectedCount}
|
||||
</TableCell>
|
||||
<TableCell className="text-right display num text-muted-foreground">
|
||||
{a.receivedCount}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<AckCodeBadge code={a.ackCode} />
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground num text-[12.5px]">
|
||||
{a.parsedAt ? fmt.dateShort(a.parsedAt) : "—"}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<DownloadButton id={a.id} sourceBatchId={a.sourceBatchId} />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : null}
|
||||
|
||||
<div className="surface rounded-xl overflow-hidden">
|
||||
{isLoading ? (
|
||||
<div className="p-4 space-y-2">
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<Skeleton key={i} variant="row" />
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
) : items.length === 0 ? (
|
||||
<EmptyState
|
||||
eyebrow="999 ACKs · awaiting first 837 with ack=true"
|
||||
message="Upload an 837P with ?ack=true, or parse a 999 file directly to populate this list."
|
||||
/>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-12" aria-label="Status" />
|
||||
<TableHead>ID</TableHead>
|
||||
<TableHead>Source Batch</TableHead>
|
||||
<TableHead className="text-right">Accepted</TableHead>
|
||||
<TableHead className="text-right">Rejected</TableHead>
|
||||
<TableHead className="text-right">Received</TableHead>
|
||||
<TableHead>ACK Code</TableHead>
|
||||
<TableHead>Parsed</TableHead>
|
||||
<TableHead className="w-20" aria-label="Download" />
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{items.map((a, idx) => {
|
||||
const isSelected = selectedIndex === idx;
|
||||
return (
|
||||
<TableRow
|
||||
key={a.id}
|
||||
data-row-index={idx}
|
||||
data-state={isSelected ? "selected" : undefined}
|
||||
aria-selected={isSelected}
|
||||
className={cn(
|
||||
isSelected && [
|
||||
// Accent-tinted bg + ring + left strip make the
|
||||
// selected row clearly stand out from the
|
||||
// default `hover:bg-muted/30` and the
|
||||
// `data-[state=selected]:bg-muted` that the
|
||||
// TableRow primitive applies. Tailwind's
|
||||
// `accent` token is the same accent used
|
||||
// elsewhere in the app (nav-active indicator,
|
||||
// row-flash keyframe, focus ring).
|
||||
"bg-accent/10 ring-1 ring-inset ring-accent/40 shadow-[inset_2px_0_0_0_hsl(var(--accent))]",
|
||||
],
|
||||
)}
|
||||
>
|
||||
<TableCell className="text-muted-foreground">
|
||||
<CheckCircle2
|
||||
className={cn(
|
||||
"h-3.5 w-3.5",
|
||||
a.ackCode === "A" ? "text-emerald-400" : a.ackCode === "R" ? "text-red-400" : "text-amber-400",
|
||||
)}
|
||||
strokeWidth={1.75}
|
||||
aria-hidden
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className="display num text-[13px]">{a.id}</TableCell>
|
||||
<TableCell className="font-mono text-[12px] text-muted-foreground truncate max-w-[180px]">
|
||||
{a.sourceBatchId}
|
||||
</TableCell>
|
||||
<TableCell className="text-right display num text-emerald-400">
|
||||
{a.acceptedCount}
|
||||
</TableCell>
|
||||
<TableCell className="text-right display num text-red-400">
|
||||
{a.rejectedCount}
|
||||
</TableCell>
|
||||
<TableCell className="text-right display num text-muted-foreground">
|
||||
{a.receivedCount}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<AckCodeBadge code={a.ackCode} />
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground num text-[12.5px]">
|
||||
{a.parsedAt ? fmt.dateShort(a.parsedAt) : "—"}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<DownloadButton id={a.id} sourceBatchId={a.sourceBatchId} />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user