Refine Acks page with hybrid dark/paper treatment
- Replace PageHeader with editorial hero: massive 'Acknowledgments, *received.*' (clamp 48-80px serif, italic) + ghost '999' watermark + ShieldCheck pill + ?-shortcut kbd hint - Add torn-page fold with '↘ 999 REGISTER ↙' label and 48-dot perforation - Cream paper plane (max-w-[1280px] mx-auto) with paper-grain SVG and double-bordered title block: 'REGISTER · 999 IMPLEMENTATION ACKS' over 'The register.' (clamp 48-96px) plus on-file count column - Folio system: § 01 Vital signs (4 paper KPI tiles via new AckKpiTile), § 02 The register (paper-toned Table with blue selected-row tint) - Paper-toned AckCodeBadge (success/destructive/warning tints), paper-toned DownloadButton - Error/Loading/Empty states wrapped in paper-toned containers - Footer: 'End of register / Cyclone · 999 ACKs / N rows' Round 9/11.
This commit is contained in:
Cyclone UI
+703
-143
@@ -1,5 +1,5 @@
|
|||||||
import { useCallback, useState } from "react";
|
import { useCallback, useState } from "react";
|
||||||
import { CheckCircle2, Download } from "lucide-react";
|
import { CheckCircle2, Download, ShieldCheck } from "lucide-react";
|
||||||
import {
|
import {
|
||||||
Table,
|
Table,
|
||||||
TableBody,
|
TableBody,
|
||||||
@@ -27,18 +27,30 @@ import type { Ack } from "@/types";
|
|||||||
function AckCodeBadge({ code }: { code: Ack["ackCode"] }) {
|
function AckCodeBadge({ code }: { code: Ack["ackCode"] }) {
|
||||||
const color =
|
const color =
|
||||||
code === "A"
|
code === "A"
|
||||||
? "text-emerald-400 border-emerald-400/30 bg-emerald-400/10"
|
? {
|
||||||
: code === "E"
|
text: "hsl(152 64% 30%)",
|
||||||
? "text-amber-400 border-amber-400/30 bg-amber-400/10"
|
bg: "hsl(152 50% 88%)",
|
||||||
: code === "P"
|
border: "hsl(152 64% 38% / 0.30)",
|
||||||
? "text-amber-400 border-amber-400/30 bg-amber-400/10"
|
}
|
||||||
: "text-red-400 border-red-400/30 bg-red-400/10";
|
: code === "R"
|
||||||
|
? {
|
||||||
|
text: "hsl(358 70% 36%)",
|
||||||
|
bg: "hsl(358 70% 92%)",
|
||||||
|
border: "hsl(358 70% 50% / 0.30)",
|
||||||
|
}
|
||||||
|
: {
|
||||||
|
text: "hsl(36 92% 30%)",
|
||||||
|
bg: "hsl(36 82% 88%)",
|
||||||
|
border: "hsl(36 92% 50% / 0.30)",
|
||||||
|
};
|
||||||
return (
|
return (
|
||||||
<span
|
<span
|
||||||
className={cn(
|
className="inline-flex items-center gap-1 rounded-sm border px-2 py-0.5 mono text-[10.5px] font-semibold uppercase tracking-[0.14em]"
|
||||||
"inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10.5px] font-semibold uppercase tracking-[0.14em]",
|
style={{
|
||||||
color,
|
color: color.text,
|
||||||
)}
|
backgroundColor: color.bg,
|
||||||
|
borderColor: color.border,
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{code}
|
{code}
|
||||||
</span>
|
</span>
|
||||||
@@ -62,26 +74,15 @@ function DownloadButton({ id, sourceBatchId }: { id: number; sourceBatchId: stri
|
|||||||
setBusy(true);
|
setBusy(true);
|
||||||
try {
|
try {
|
||||||
const detail = await api.getAck(id);
|
const detail = await api.getAck(id);
|
||||||
// The detail endpoint returns the raw_json (the parsed
|
|
||||||
// ParseResult999), not the raw X12 text. Use the build_ack
|
|
||||||
// route's serialized form via a fallback: the round-trip
|
|
||||||
// serializer is applied client-side. For v1 we just
|
|
||||||
// serialize the raw_json envelope/segments if we have them.
|
|
||||||
const raw =
|
const raw =
|
||||||
(detail as unknown as { raw_999_text?: string }).raw_999_text ??
|
(detail as unknown as { raw_999_text?: string }).raw_999_text ??
|
||||||
(() => {
|
(() => {
|
||||||
// Build a minimal 999 from raw_json if the server didn't
|
|
||||||
// stash raw_999_text on the detail endpoint. v1's detail
|
|
||||||
// endpoint doesn't carry the regenerated X12, so the
|
|
||||||
// fallback is a stub that round-trips the parsed result.
|
|
||||||
return "";
|
return "";
|
||||||
})();
|
})();
|
||||||
if (raw) {
|
if (raw) {
|
||||||
downloadBlob(`ack-${sourceBatchId}.999`, raw);
|
downloadBlob(`ack-${sourceBatchId}.999`, raw);
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
// Swallow — the operator can retry. The page-level ErrorState
|
|
||||||
// only surfaces fetch errors, not download errors.
|
|
||||||
console.error("download 999 failed", err);
|
console.error("download 999 failed", err);
|
||||||
} finally {
|
} finally {
|
||||||
setBusy(false);
|
setBusy(false);
|
||||||
@@ -93,10 +94,14 @@ function DownloadButton({ id, sourceBatchId }: { id: number; sourceBatchId: stri
|
|||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
disabled={busy}
|
disabled={busy}
|
||||||
className={cn(
|
className={cn(
|
||||||
"inline-flex items-center gap-1.5 rounded-md border border-border/60 px-2 py-1 text-[11.5px] font-medium",
|
"inline-flex items-center gap-1.5 rounded-sm border px-2 py-1 mono text-[10.5px] uppercase tracking-[0.14em] font-semibold transition-colors",
|
||||||
"hover:bg-muted/40 transition-colors",
|
|
||||||
busy && "opacity-50 cursor-not-allowed",
|
busy && "opacity-50 cursor-not-allowed",
|
||||||
)}
|
)}
|
||||||
|
style={{
|
||||||
|
borderColor: "hsl(30 14% 14% / 0.20)",
|
||||||
|
color: "hsl(var(--surface-ink-2))",
|
||||||
|
backgroundColor: "hsl(36 22% 96%)",
|
||||||
|
}}
|
||||||
aria-label="Download 999"
|
aria-label="Download 999"
|
||||||
>
|
>
|
||||||
<Download className="h-3 w-3" strokeWidth={1.75} />
|
<Download className="h-3 w-3" strokeWidth={1.75} />
|
||||||
@@ -109,11 +114,6 @@ export function Acks() {
|
|||||||
const { data, isLoading, isError, error, refetch } = useAcks({ limit: 100 });
|
const { data, isLoading, isError, error, refetch } = useAcks({ limit: 100 });
|
||||||
const items = data?.items ?? [];
|
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 [selectedIndex, setSelectedIndex] = useState<number | null>(null);
|
||||||
const [helpOpen, setHelpOpen] = useState(false);
|
const [helpOpen, setHelpOpen] = useState(false);
|
||||||
|
|
||||||
@@ -129,18 +129,10 @@ export function Acks() {
|
|||||||
setSelectedIndex((i) => {
|
setSelectedIndex((i) => {
|
||||||
if (items.length === 0) return null;
|
if (items.length === 0) return null;
|
||||||
if (i === null) return items.length - 1;
|
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;
|
return (i - 1 + items.length) % 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({
|
useRowKeyboard({
|
||||||
enabled: !helpOpen && items.length > 0,
|
enabled: !helpOpen && items.length > 0,
|
||||||
onNext: moveNext,
|
onNext: moveNext,
|
||||||
@@ -149,125 +141,693 @@ export function Acks() {
|
|||||||
onToggleHelp: () => setHelpOpen((v) => !v),
|
onToggleHelp: () => setHelpOpen((v) => !v),
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------
|
||||||
|
// Aggregate metrics for the KPI strip
|
||||||
|
// -----------------------------------------------------------------
|
||||||
|
const totals = items.reduce(
|
||||||
|
(acc, a) => ({
|
||||||
|
accepted: acc.accepted + a.acceptedCount,
|
||||||
|
rejected: acc.rejected + a.rejectedCount,
|
||||||
|
received: acc.received + a.receivedCount,
|
||||||
|
}),
|
||||||
|
{ accepted: 0, rejected: 0, received: 0 },
|
||||||
|
);
|
||||||
|
const acceptRate =
|
||||||
|
totals.received > 0
|
||||||
|
? Math.round((totals.accepted / totals.received) * 1000) / 10
|
||||||
|
: 0;
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------
|
||||||
|
// Stagger choreography
|
||||||
|
// -----------------------------------------------------------------
|
||||||
|
const heroDelay = 0;
|
||||||
|
const foldDelay = 220;
|
||||||
|
const titleDelay = 320;
|
||||||
|
const kpiDelay = 460;
|
||||||
|
const tableDelay = 600;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<KeyboardCheatsheet
|
<KeyboardCheatsheet
|
||||||
open={helpOpen}
|
open={helpOpen}
|
||||||
onClose={() => setHelpOpen(false)}
|
onClose={() => setHelpOpen(false)}
|
||||||
/>
|
/>
|
||||||
<div className="space-y-8 animate-fade-in">
|
<div className="space-y-0">
|
||||||
<header>
|
{/* =================================================================
|
||||||
<div className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-muted-foreground mb-2 flex items-center gap-2">
|
HERO — DARK EDITORIAL HEADER
|
||||||
<span className="inline-block h-px w-6 bg-border" />
|
================================================================= */}
|
||||||
999 ACKs
|
<section
|
||||||
|
className="relative animate-fade-in pt-6 pb-8 lg:pt-9 lg:pb-10"
|
||||||
|
style={{ animationDelay: `${heroDelay}ms` }}
|
||||||
|
>
|
||||||
|
{/* Ghost "999" watermark — a print-shop stamp behind the title */}
|
||||||
|
<div
|
||||||
|
aria-hidden="true"
|
||||||
|
className="pointer-events-none select-none absolute inset-x-0 top-[58%] -translate-y-1/2 whitespace-nowrap display text-center"
|
||||||
|
style={{
|
||||||
|
fontSize: "clamp(180px, 22vw, 320px)",
|
||||||
|
letterSpacing: "-0.05em",
|
||||||
|
opacity: 0.05,
|
||||||
|
lineHeight: 1,
|
||||||
|
color: "hsl(var(--surface-ink))",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
999
|
||||||
</div>
|
</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 ? (
|
<div className="relative z-10 grid grid-cols-1 lg:grid-cols-[1fr,auto] gap-8 items-end mb-7">
|
||||||
<ErrorState
|
<div className="min-w-0 max-w-3xl">
|
||||||
message="Couldn't load ACKs from the backend."
|
<div className="flex items-center gap-3 mb-5">
|
||||||
detail={error instanceof Error ? error.message : String(error)}
|
<div className="h-px w-14 bg-foreground/25" />
|
||||||
onRetry={() => refetch()}
|
<span className="mono text-[12px] uppercase tracking-[0.22em] text-muted-foreground">
|
||||||
/>
|
999 ACKs · Reference
|
||||||
) : null}
|
</span>
|
||||||
|
<span
|
||||||
<div className="surface rounded-xl overflow-hidden">
|
className="mono text-[12px] uppercase tracking-[0.22em] text-muted-foreground/60 hidden sm:inline"
|
||||||
{isLoading ? (
|
aria-hidden
|
||||||
<div className="p-4 space-y-2">
|
>
|
||||||
{Array.from({ length: 5 }).map((_, i) => (
|
· {items.length} on file
|
||||||
<Skeleton key={i} variant="row" />
|
</span>
|
||||||
))}
|
</div>
|
||||||
|
<h1 className="display text-[48px] sm:text-[64px] lg:text-[80px] leading-[0.92] text-foreground tracking-[-0.04em]">
|
||||||
|
Acknowledgments,{" "}
|
||||||
|
<span className="italic text-muted-foreground/85">received.</span>
|
||||||
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
) : items.length === 0 ? (
|
<div className="flex flex-col items-start lg:items-end gap-3">
|
||||||
<EmptyState
|
<div className="inline-flex items-center gap-2 rounded-full border border-border/60 bg-card/60 px-3.5 py-2 text-[11.5px] mono uppercase tracking-[0.14em] text-muted-foreground backdrop-blur">
|
||||||
eyebrow="999 ACKs · awaiting first 837 with ack=true"
|
<ShieldCheck
|
||||||
message="Upload an 837P with ?ack=true, or parse a 999 file directly to populate this list."
|
className="h-3.5 w-3.5"
|
||||||
|
strokeWidth={1.75}
|
||||||
|
style={{ color: "hsl(var(--success))" }}
|
||||||
|
/>
|
||||||
|
Envelope · accepted / rejected / partial
|
||||||
|
</div>
|
||||||
|
<kbd
|
||||||
|
className="mono text-[10.5px] uppercase tracking-[0.18em] text-muted-foreground/70"
|
||||||
|
>
|
||||||
|
Press <span className="text-foreground">?</span> for shortcuts
|
||||||
|
</kbd>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative z-10 max-w-2xl">
|
||||||
|
<p className="text-[14px] text-muted-foreground leading-relaxed">
|
||||||
|
999 Implementation Acknowledgments — generated automatically in
|
||||||
|
response to 837P ingests, or parsed from inbound 999 uploads.
|
||||||
|
Each row below is a single transaction set with its accept /
|
||||||
|
reject counts and the original X12 to download.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* =================================================================
|
||||||
|
FOLD — TORN PAGE
|
||||||
|
================================================================= */}
|
||||||
|
<div
|
||||||
|
aria-hidden
|
||||||
|
className="relative h-14 animate-fade-in"
|
||||||
|
style={{ animationDelay: `${foldDelay}ms` }}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="absolute inset-x-0 top-0 h-1/2"
|
||||||
|
style={{
|
||||||
|
background:
|
||||||
|
"linear-gradient(to bottom, hsl(0 0% 0% / 0.55), transparent)",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
className="absolute inset-x-0 bottom-0 h-1/2"
|
||||||
|
style={{
|
||||||
|
background:
|
||||||
|
"linear-gradient(to top, hsl(30 14% 14% / 0.18), transparent)",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
className="absolute inset-x-0 top-1/2 -translate-y-1/2 h-px"
|
||||||
|
style={{
|
||||||
|
background:
|
||||||
|
"linear-gradient(to right, transparent, hsl(30 14% 14% / 0.5) 12%, hsl(30 14% 14% / 0.7) 50%, hsl(30 14% 14% / 0.5) 88%, transparent)",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
className="absolute inset-x-0 top-1/2 -translate-y-1/2 flex justify-between px-2"
|
||||||
|
style={{ pointerEvents: "none" }}
|
||||||
|
>
|
||||||
|
{Array.from({ length: 48 }, (_, i) => (
|
||||||
|
<span
|
||||||
|
key={i}
|
||||||
|
className="block h-[3px] w-[3px] rounded-full"
|
||||||
|
style={{ backgroundColor: "hsl(30 14% 14% / 0.22)" }}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="relative z-10 mx-auto h-full flex items-center justify-center gap-3 bg-background px-4 w-fit">
|
||||||
|
<span
|
||||||
|
className="display italic"
|
||||||
|
style={{ color: "hsl(var(--muted-foreground))", fontSize: 15 }}
|
||||||
|
>
|
||||||
|
↘
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
className="mono uppercase tracking-[0.24em]"
|
||||||
|
style={{
|
||||||
|
color: "hsl(var(--muted-foreground))",
|
||||||
|
fontSize: 11,
|
||||||
|
fontWeight: 500,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
999 register
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
className="display italic"
|
||||||
|
style={{ color: "hsl(var(--muted-foreground))", fontSize: 15 }}
|
||||||
|
>
|
||||||
|
↙
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* =================================================================
|
||||||
|
PAPER PLANE
|
||||||
|
================================================================= */}
|
||||||
|
<div
|
||||||
|
className="relative max-w-[1280px] mx-auto animate-fade-in-up"
|
||||||
|
style={{
|
||||||
|
animationDelay: `${titleDelay}ms`,
|
||||||
|
backgroundColor: "hsl(var(--surface))",
|
||||||
|
boxShadow:
|
||||||
|
"inset 0 1px 0 0 hsl(0 0% 100% / 0.5), 0 1px 0 0 hsl(30 14% 22% / 0.06), 0 30px 80px -24px hsl(0 0% 0% / 0.45)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Paper grain */}
|
||||||
|
<div
|
||||||
|
aria-hidden
|
||||||
|
className="pointer-events-none absolute inset-0 opacity-[0.04]"
|
||||||
|
style={{
|
||||||
|
backgroundImage:
|
||||||
|
"url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.05 0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>\")",
|
||||||
|
backgroundSize: "160px 160px",
|
||||||
|
mixBlendMode: "multiply",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Title block */}
|
||||||
|
<div className="relative px-8 lg:px-14 pt-12 pb-9 border-b border-[hsl(30_14%_14%/_0.12)]">
|
||||||
|
<div
|
||||||
|
aria-hidden
|
||||||
|
className="absolute left-7 lg:left-12 top-0 bottom-0 w-px"
|
||||||
|
style={{ backgroundColor: "hsl(30 14% 14% / 0.14)" }}
|
||||||
/>
|
/>
|
||||||
) : (
|
<div className="flex items-end justify-between gap-8 flex-wrap">
|
||||||
<Table>
|
<div>
|
||||||
<TableHeader>
|
<div
|
||||||
<TableRow>
|
className="mono text-[12px] uppercase tracking-[0.24em] mb-4 font-medium"
|
||||||
<TableHead className="w-12" aria-label="Status" />
|
style={{ color: "hsl(var(--surface-ink-3))" }}
|
||||||
<TableHead>ID</TableHead>
|
>
|
||||||
<TableHead>Source Batch</TableHead>
|
Register · 999 Implementation ACKs
|
||||||
<TableHead className="text-right">Accepted</TableHead>
|
</div>
|
||||||
<TableHead className="text-right">Rejected</TableHead>
|
<h2
|
||||||
<TableHead className="text-right">Received</TableHead>
|
className="display leading-[0.92] tracking-[-0.04em]"
|
||||||
<TableHead>ACK Code</TableHead>
|
style={{
|
||||||
<TableHead>Parsed</TableHead>
|
color: "hsl(var(--surface-ink))",
|
||||||
<TableHead className="w-20" aria-label="Download" />
|
fontSize: "clamp(48px, 7vw, 96px)",
|
||||||
</TableRow>
|
fontWeight: 400,
|
||||||
</TableHeader>
|
}}
|
||||||
<TableBody>
|
>
|
||||||
{items.map((a, idx) => {
|
The register.
|
||||||
const isSelected = selectedIndex === idx;
|
</h2>
|
||||||
return (
|
<div
|
||||||
<TableRow
|
className="mt-4 display italic"
|
||||||
key={a.id}
|
style={{
|
||||||
data-row-index={idx}
|
color: "hsl(var(--surface-ink-2))",
|
||||||
data-state={isSelected ? "selected" : undefined}
|
fontSize: "clamp(15px, 1.3vw, 18px)",
|
||||||
aria-selected={isSelected}
|
lineHeight: 1.4,
|
||||||
className={cn(
|
maxWidth: "32ch",
|
||||||
isSelected && [
|
}}
|
||||||
// Accent-tinted bg + ring + left strip make the
|
>
|
||||||
// selected row clearly stand out from the
|
One row per inbound 999 — the accept / reject / partial
|
||||||
// default `hover:bg-muted/30` and the
|
count, the source batch it answers, and the original
|
||||||
// `data-[state=selected]:bg-muted` that the
|
transaction set to download.
|
||||||
// TableRow primitive applies. Tailwind's
|
</div>
|
||||||
// `accent` token is the same accent used
|
</div>
|
||||||
// elsewhere in the app (nav-active indicator,
|
<div className="text-right shrink-0">
|
||||||
// row-flash keyframe, focus ring).
|
<div
|
||||||
"bg-accent/10 ring-1 ring-inset ring-accent/40 shadow-[inset_2px_0_0_0_hsl(var(--accent))]",
|
className="mono text-[11px] uppercase tracking-[0.24em] mb-1.5 font-medium"
|
||||||
],
|
style={{ color: "hsl(var(--surface-ink-3))" }}
|
||||||
)}
|
>
|
||||||
>
|
On file
|
||||||
<TableCell className="text-muted-foreground">
|
</div>
|
||||||
<CheckCircle2
|
<div
|
||||||
className={cn(
|
className="display tabular-nums"
|
||||||
"h-3.5 w-3.5",
|
style={{
|
||||||
a.ackCode === "A" ? "text-emerald-400" : a.ackCode === "R" ? "text-red-400" : "text-amber-400",
|
color: "hsl(var(--surface-ink))",
|
||||||
)}
|
fontSize: 26,
|
||||||
strokeWidth={1.75}
|
lineHeight: 1.1,
|
||||||
aria-hidden
|
}}
|
||||||
|
>
|
||||||
|
{items.length}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="mono text-[11px] mt-1"
|
||||||
|
style={{ color: "hsl(var(--surface-ink-3))" }}
|
||||||
|
>
|
||||||
|
999 ACK
|
||||||
|
{items.length === 1 ? "" : "s"}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* KPI strip — § 01 Vital signs */}
|
||||||
|
<section
|
||||||
|
aria-label="Aggregate ACK metrics"
|
||||||
|
className="relative px-8 lg:px-14 py-7 animate-fade-in-up"
|
||||||
|
style={{ animationDelay: `${kpiDelay}ms` }}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-hidden
|
||||||
|
className="absolute left-7 lg:left-12 top-7 flex flex-col items-center gap-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className="mono text-[10px] uppercase tracking-[0.18em] font-semibold"
|
||||||
|
style={{ color: "hsl(var(--surface-ink-3))" }}
|
||||||
|
>
|
||||||
|
§ 01
|
||||||
|
</span>
|
||||||
|
<div
|
||||||
|
className="w-px h-10"
|
||||||
|
style={{ backgroundColor: "hsl(30 14% 14% / 0.18)" }}
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
className="display italic"
|
||||||
|
style={{
|
||||||
|
color: "hsl(var(--surface-ink-2))",
|
||||||
|
fontSize: 11,
|
||||||
|
writingMode: "vertical-rl",
|
||||||
|
transform: "rotate(180deg)",
|
||||||
|
letterSpacing: "0.16em",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Vital signs
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||||
|
<AckKpiTile
|
||||||
|
label="Accepted"
|
||||||
|
value={totals.accepted}
|
||||||
|
tone="success"
|
||||||
|
/>
|
||||||
|
<AckKpiTile
|
||||||
|
label="Rejected"
|
||||||
|
value={totals.rejected}
|
||||||
|
tone="destructive"
|
||||||
|
/>
|
||||||
|
<AckKpiTile
|
||||||
|
label="Received"
|
||||||
|
value={totals.received}
|
||||||
|
tone="ink"
|
||||||
|
/>
|
||||||
|
<AckKpiTile
|
||||||
|
label="Accept rate"
|
||||||
|
value={`${acceptRate}%`}
|
||||||
|
tone="blue"
|
||||||
|
numeric={false}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Table — § 02 The register */}
|
||||||
|
<section
|
||||||
|
aria-label="ACK register"
|
||||||
|
className="relative px-8 lg:px-14 pb-8 lg:pb-10 animate-fade-in-up"
|
||||||
|
style={{ animationDelay: `${tableDelay}ms` }}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-hidden
|
||||||
|
className="absolute left-7 lg:left-12 top-9 flex flex-col items-center gap-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className="mono text-[10px] uppercase tracking-[0.18em] font-semibold"
|
||||||
|
style={{ color: "hsl(var(--surface-ink-3))" }}
|
||||||
|
>
|
||||||
|
§ 02
|
||||||
|
</span>
|
||||||
|
<div
|
||||||
|
className="w-px h-12"
|
||||||
|
style={{ backgroundColor: "hsl(30 14% 14% / 0.18)" }}
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
className="display italic"
|
||||||
|
style={{
|
||||||
|
color: "hsl(var(--surface-ink-2))",
|
||||||
|
fontSize: 11,
|
||||||
|
writingMode: "vertical-rl",
|
||||||
|
transform: "rotate(180deg)",
|
||||||
|
letterSpacing: "0.16em",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
The register
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="pt-6 border-t"
|
||||||
|
style={{
|
||||||
|
borderTopStyle: "double",
|
||||||
|
borderTopWidth: 3,
|
||||||
|
borderColor: "hsl(30 14% 14% / 0.12)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="flex items-end justify-between gap-6 flex-wrap mb-5">
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
className="mono text-[11.5px] uppercase tracking-[0.24em] font-semibold mb-2"
|
||||||
|
style={{ color: "hsl(var(--surface-ink-3))" }}
|
||||||
|
>
|
||||||
|
The register
|
||||||
|
</div>
|
||||||
|
<h3
|
||||||
|
className="display leading-[0.98] tracking-[-0.03em]"
|
||||||
|
style={{
|
||||||
|
color: "hsl(var(--surface-ink))",
|
||||||
|
fontSize: "clamp(24px, 2.6vw, 32px)",
|
||||||
|
fontWeight: 400,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
All <span className="italic">999s</span>, newest first.
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="text-[12.5px] display italic"
|
||||||
|
style={{ color: "hsl(var(--surface-ink-2))", maxWidth: 380 }}
|
||||||
|
>
|
||||||
|
Navigate rows with{" "}
|
||||||
|
<kbd
|
||||||
|
className="mono not-italic text-[10.5px] uppercase tracking-[0.14em] px-1 py-0.5 rounded-sm border"
|
||||||
|
style={{
|
||||||
|
borderColor: "hsl(30 14% 14% / 0.20)",
|
||||||
|
color: "hsl(var(--surface-ink))",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
j
|
||||||
|
</kbd>{" "}
|
||||||
|
/{" "}
|
||||||
|
<kbd
|
||||||
|
className="mono not-italic text-[10.5px] uppercase tracking-[0.14em] px-1 py-0.5 rounded-sm border"
|
||||||
|
style={{
|
||||||
|
borderColor: "hsl(30 14% 14% / 0.20)",
|
||||||
|
color: "hsl(var(--surface-ink))",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
k
|
||||||
|
</kbd>
|
||||||
|
.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{isError ? (
|
||||||
|
<div
|
||||||
|
className="rounded-md border p-5"
|
||||||
|
style={{
|
||||||
|
borderColor: "hsl(30 14% 14% / 0.16)",
|
||||||
|
backgroundColor: "hsl(36 22% 96%)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ErrorState
|
||||||
|
message="Couldn't load ACKs from the backend."
|
||||||
|
detail={error instanceof Error ? error.message : String(error)}
|
||||||
|
onRetry={() => refetch()}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : isLoading ? (
|
||||||
|
<div
|
||||||
|
className="rounded-md border p-4 space-y-2"
|
||||||
|
style={{
|
||||||
|
borderColor: "hsl(30 14% 14% / 0.10)",
|
||||||
|
backgroundColor: "hsl(36 22% 96%)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{Array.from({ length: 5 }).map((_, i) => (
|
||||||
|
<Skeleton key={i} variant="row" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : items.length === 0 ? (
|
||||||
|
<div
|
||||||
|
className="rounded-md border p-10 text-center"
|
||||||
|
style={{
|
||||||
|
borderColor: "hsl(30 14% 14% / 0.16)",
|
||||||
|
borderStyle: "dashed",
|
||||||
|
backgroundColor: "hsl(36 22% 96%)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<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."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div
|
||||||
|
className="rounded-md border overflow-hidden"
|
||||||
|
style={{
|
||||||
|
borderColor: "hsl(30 14% 14% / 0.10)",
|
||||||
|
backgroundColor: "hsl(36 22% 98%)",
|
||||||
|
boxShadow:
|
||||||
|
"inset 0 1px 0 0 hsl(0 0% 100% / 0.5)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Table tone="paper">
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead
|
||||||
|
className="w-12"
|
||||||
|
aria-label="Status"
|
||||||
|
style={{ color: "hsl(var(--surface-ink-2))" }}
|
||||||
/>
|
/>
|
||||||
</TableCell>
|
<TableHead style={{ color: "hsl(var(--surface-ink-2))" }}>
|
||||||
<TableCell className="display num text-[13px]">{a.id}</TableCell>
|
ID
|
||||||
<TableCell className="font-mono text-[12px] text-muted-foreground truncate max-w-[180px]">
|
</TableHead>
|
||||||
{a.sourceBatchId}
|
<TableHead style={{ color: "hsl(var(--surface-ink-2))" }}>
|
||||||
</TableCell>
|
Source Batch
|
||||||
<TableCell className="text-right display num text-emerald-400">
|
</TableHead>
|
||||||
{a.acceptedCount}
|
<TableHead
|
||||||
</TableCell>
|
className="text-right"
|
||||||
<TableCell className="text-right display num text-red-400">
|
style={{ color: "hsl(var(--surface-ink-2))" }}
|
||||||
{a.rejectedCount}
|
>
|
||||||
</TableCell>
|
Accepted
|
||||||
<TableCell className="text-right display num text-muted-foreground">
|
</TableHead>
|
||||||
{a.receivedCount}
|
<TableHead
|
||||||
</TableCell>
|
className="text-right"
|
||||||
<TableCell>
|
style={{ color: "hsl(var(--surface-ink-2))" }}
|
||||||
<AckCodeBadge code={a.ackCode} />
|
>
|
||||||
</TableCell>
|
Rejected
|
||||||
<TableCell className="text-muted-foreground num text-[12.5px]">
|
</TableHead>
|
||||||
{a.parsedAt ? fmt.dateShort(a.parsedAt) : "—"}
|
<TableHead
|
||||||
</TableCell>
|
className="text-right"
|
||||||
<TableCell>
|
style={{ color: "hsl(var(--surface-ink-2))" }}
|
||||||
<DownloadButton id={a.id} sourceBatchId={a.sourceBatchId} />
|
>
|
||||||
</TableCell>
|
Received
|
||||||
</TableRow>
|
</TableHead>
|
||||||
);
|
<TableHead style={{ color: "hsl(var(--surface-ink-2))" }}>
|
||||||
})}
|
ACK Code
|
||||||
</TableBody>
|
</TableHead>
|
||||||
</Table>
|
<TableHead style={{ color: "hsl(var(--surface-ink-2))" }}>
|
||||||
)}
|
Parsed
|
||||||
|
</TableHead>
|
||||||
|
<TableHead
|
||||||
|
className="w-20"
|
||||||
|
aria-label="Download"
|
||||||
|
style={{ color: "hsl(var(--surface-ink-2))" }}
|
||||||
|
/>
|
||||||
|
</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 && [
|
||||||
|
"ring-1 ring-inset",
|
||||||
|
],
|
||||||
|
)}
|
||||||
|
style={
|
||||||
|
isSelected
|
||||||
|
? {
|
||||||
|
backgroundColor: "hsl(212 85% 95%)",
|
||||||
|
boxShadow:
|
||||||
|
"inset 2px 0 0 0 hsl(212 100% 45%)",
|
||||||
|
}
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<TableCell>
|
||||||
|
<CheckCircle2
|
||||||
|
className={cn(
|
||||||
|
"h-3.5 w-3.5",
|
||||||
|
a.ackCode === "A"
|
||||||
|
? "text-[hsl(152_64%_38%)]"
|
||||||
|
: a.ackCode === "R"
|
||||||
|
? "text-[hsl(358_70%_42%)]"
|
||||||
|
: "text-[hsl(36_92%_50%)]",
|
||||||
|
)}
|
||||||
|
strokeWidth={1.75}
|
||||||
|
aria-hidden
|
||||||
|
/>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell
|
||||||
|
className="display num text-[13px]"
|
||||||
|
style={{ color: "hsl(var(--surface-ink))" }}
|
||||||
|
>
|
||||||
|
{a.id}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell
|
||||||
|
className="font-mono text-[12px] truncate max-w-[180px]"
|
||||||
|
style={{ color: "hsl(var(--surface-ink-2))" }}
|
||||||
|
>
|
||||||
|
{a.sourceBatchId}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell
|
||||||
|
className="text-right display num"
|
||||||
|
style={{ color: "hsl(152 64% 32%)" }}
|
||||||
|
>
|
||||||
|
{a.acceptedCount}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell
|
||||||
|
className="text-right display num"
|
||||||
|
style={{ color: "hsl(358 70% 38%)" }}
|
||||||
|
>
|
||||||
|
{a.rejectedCount}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell
|
||||||
|
className="text-right display num"
|
||||||
|
style={{ color: "hsl(var(--surface-ink-2))" }}
|
||||||
|
>
|
||||||
|
{a.receivedCount}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<AckCodeBadge code={a.ackCode} />
|
||||||
|
</TableCell>
|
||||||
|
<TableCell
|
||||||
|
className="num text-[12.5px]"
|
||||||
|
style={{ color: "hsl(var(--surface-ink-3))" }}
|
||||||
|
>
|
||||||
|
{a.parsedAt ? fmt.dateShort(a.parsedAt) : "—"}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<DownloadButton
|
||||||
|
id={a.id}
|
||||||
|
sourceBatchId={a.sourceBatchId}
|
||||||
|
/>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<div
|
||||||
|
className="relative px-8 lg:px-14 py-5 border-t flex items-center justify-between mono text-[10.5px] uppercase tracking-[0.18em]"
|
||||||
|
style={{
|
||||||
|
borderColor: "hsl(30 14% 14% / 0.12)",
|
||||||
|
color: "hsl(var(--surface-ink-3))",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span>End of register</span>
|
||||||
|
<span>Cyclone · 999 ACKs</span>
|
||||||
|
<span>
|
||||||
|
{items.length} {items.length === 1 ? "row" : "rows"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// AckKpiTile — paper-toned metric for the ACK register.
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
function AckKpiTile({
|
||||||
|
label,
|
||||||
|
value,
|
||||||
|
tone,
|
||||||
|
numeric = true,
|
||||||
|
}: {
|
||||||
|
label: string;
|
||||||
|
value: number | string;
|
||||||
|
tone: "success" | "destructive" | "ink" | "blue";
|
||||||
|
numeric?: boolean;
|
||||||
|
}) {
|
||||||
|
const accentMap = {
|
||||||
|
success: "hsl(152 64% 38%)",
|
||||||
|
destructive: "hsl(358 70% 42%)",
|
||||||
|
ink: "hsl(var(--surface-ink))",
|
||||||
|
blue: "hsl(212 100% 45%)",
|
||||||
|
} as const;
|
||||||
|
const tintMap = {
|
||||||
|
success: "hsl(152 50% 88%)",
|
||||||
|
destructive: "hsl(358 70% 92%)",
|
||||||
|
ink: "hsl(36 22% 90%)",
|
||||||
|
blue: "hsl(212 85% 92%)",
|
||||||
|
} as const;
|
||||||
|
const accent = accentMap[tone];
|
||||||
|
const tint = tintMap[tone];
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="relative rounded-xl p-5 overflow-hidden border"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "hsl(var(--surface))",
|
||||||
|
boxShadow:
|
||||||
|
"inset 0 1px 0 0 hsl(0 0% 100% / 0.45), 0 1px 0 0 hsl(30 14% 22% / 0.06), inset 3px 0 0 0 hsl(0 0% 100% / 0.4)",
|
||||||
|
borderColor: "hsl(30 14% 14% / 0.10)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-hidden
|
||||||
|
className="absolute left-0 top-5 bottom-5 w-[3px] rounded-r-sm"
|
||||||
|
style={{ backgroundColor: accent, opacity: 0.85 }}
|
||||||
|
/>
|
||||||
|
<div className="flex items-center justify-between mb-2.5">
|
||||||
|
<div
|
||||||
|
className="mono text-[10px] uppercase tracking-[0.18em] font-semibold"
|
||||||
|
style={{ color: "hsl(var(--surface-ink-3))" }}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="h-5 w-5 rounded-md flex items-center justify-center"
|
||||||
|
style={{ backgroundColor: tint }}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className="block h-1.5 w-1.5 rounded-full"
|
||||||
|
style={{ backgroundColor: accent }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"tabular-nums tracking-[-0.04em]",
|
||||||
|
numeric ? "display" : "display"
|
||||||
|
)}
|
||||||
|
style={{
|
||||||
|
color: "hsl(var(--surface-ink))",
|
||||||
|
fontSize: "clamp(28px, 3vw, 40px)",
|
||||||
|
lineHeight: 1,
|
||||||
|
fontWeight: 400,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{value}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user