Refine Batch Diff page with hybrid dark/paper treatment
- Replace small header with editorial hero: massive 'Compare *batches.*'
(clamp 48-80px serif, italic for 'batches.') + ghost 'DIFF' watermark
+ GitCompareArrows pill (837P/835/first vs second) + pick-a-batch hint
- Add torn-page fold with '↘ A → B ↙' label and 48-dot perforation
- Cream paper plane (max-w-[1280px] mx-auto) with paper-grain SVG and
double-bordered title block: 'SHEET 01 · COMPARE TWO BATCHES' over
'Compare them.' (clamp 48-96px) plus A→B wire indicator (blue A,
amber B, paper-ink-3 placeholder)
- New Folio helper renders the § N + vertical-rl italic label; reused
on the picks and diff sections
- § 01 The picks: BatchPicker gets a paper-toned card with side badge
(A blue / B amber tinted square) and claim count, preserving the
data-testid='diff-picker-{a,b}' and 'diff-picker-kind-{kind}' and
'diff-picker-option-{id}' contracts
- § 02 The diff: conditional rendering (awaiting-picks dashed card,
loading skeleton, not-found, error, empty diff, full diff view)
with paper-toned wrappers
- BatchDiffView refactored to paper-toned chrome: SideMeta cards
(warm surface, surface-ink text), SummaryCards → new DiffKpiTile
helper (success/destructive/amber/ink accent rails with lucide
icons), SectionTables → tone='paper' tables with cream header band
and surface-ink text. All section/row/indicator testids preserved.
- Action footer: 'Comparing A with B.' italic note + Refresh / Clear
picks buttons; paper-toned container, sits inside the paper plane
- Bottom footer: 'End of sheet 01 / Cyclone · Batch diff / A vs B
or awaiting picks'
Round 11/11 — last page in the hybrid sweep.
This commit is contained in:
Cyclone UI
@@ -1,4 +1,10 @@
|
||||
import { Plus, Minus, Equal, ArrowRight, type LucideIcon } from "lucide-react";
|
||||
import {
|
||||
ArrowRight,
|
||||
Equal,
|
||||
Minus,
|
||||
Plus,
|
||||
type LucideIcon,
|
||||
} from "lucide-react";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import {
|
||||
@@ -9,19 +15,20 @@ import {
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { KpiCard } from "@/components/KpiCard";
|
||||
import { fmt } from "@/lib/format";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type {
|
||||
BatchClaimDiffSummary,
|
||||
BatchDiff,
|
||||
BatchDiffChangedRow,
|
||||
BatchDiffSideMeta,
|
||||
BatchDiffSummary,
|
||||
BatchClaimDiffSummary,
|
||||
} from "@/types";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Side meta header — small panel identifying which batch is on the left / right.
|
||||
// Side meta header — small panel identifying which batch is on the
|
||||
// left / right. Paper-toned to sit inside the cream "paper plane" of
|
||||
// the BatchDiff page. data-testid pinned by BatchDiff.test.tsx.
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function SideMeta({
|
||||
@@ -39,10 +46,19 @@ function SideMeta({
|
||||
: "text-amber-300 border-amber-400/30 bg-amber-400/10";
|
||||
return (
|
||||
<div
|
||||
className="surface rounded-xl p-4 flex flex-col gap-2"
|
||||
className="rounded-xl p-4 flex flex-col gap-2 border"
|
||||
data-testid={`batch-diff-side-${label.toLowerCase()}`}
|
||||
style={{
|
||||
backgroundColor: "hsl(36 22% 98%)",
|
||||
borderColor: "hsl(30 14% 14% / 0.10)",
|
||||
boxShadow:
|
||||
"inset 0 1px 0 0 hsl(0 0% 100% / 0.45), 0 1px 0 0 hsl(30 14% 22% / 0.06)",
|
||||
}}
|
||||
>
|
||||
<div className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
|
||||
<div
|
||||
className="text-[10.5px] font-semibold uppercase tracking-[0.18em]"
|
||||
style={{ color: "hsl(var(--surface-ink-3))" }}
|
||||
>
|
||||
{label}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
@@ -54,12 +70,23 @@ function SideMeta({
|
||||
>
|
||||
{side.kind}
|
||||
</span>
|
||||
<span className="display num text-[13px]">{side.id}</span>
|
||||
<span
|
||||
className="display num text-[13px]"
|
||||
style={{ color: "hsl(var(--surface-ink))" }}
|
||||
>
|
||||
{side.id}
|
||||
</span>
|
||||
</div>
|
||||
<div className="font-mono text-[12px] text-muted-foreground truncate">
|
||||
<div
|
||||
className="font-mono text-[12px] truncate"
|
||||
style={{ color: "hsl(var(--surface-ink-2))" }}
|
||||
>
|
||||
{side.inputFilename}
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
||||
<div
|
||||
className="flex items-center justify-between text-xs"
|
||||
style={{ color: "hsl(var(--surface-ink-3))" }}
|
||||
>
|
||||
<span>Parsed {side.parsedAt ? fmt.dateShort(side.parsedAt) : "—"}</span>
|
||||
<span className="font-mono num">
|
||||
{fmt.num(side.claimCount)} claim{side.claimCount === 1 ? "" : "s"}
|
||||
@@ -70,40 +97,125 @@ function SideMeta({
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Summary cards — the four-count tile row.
|
||||
// Summary cards — the four-count tile row. Paper-toned via
|
||||
// DiffKpiTile so the counts sit naturally on the cream paper plane.
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function SummaryCards({ summary }: { summary: BatchDiffSummary }) {
|
||||
return (
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3" data-testid="batch-diff-summary">
|
||||
<KpiCard
|
||||
<div
|
||||
className="grid grid-cols-2 md:grid-cols-4 gap-3"
|
||||
data-testid="batch-diff-summary"
|
||||
>
|
||||
<DiffKpiTile
|
||||
label="Added in B"
|
||||
value={fmt.num(summary.addedCount)}
|
||||
icon={Plus}
|
||||
hint="In B, not in A"
|
||||
tone="success"
|
||||
/>
|
||||
<KpiCard
|
||||
<DiffKpiTile
|
||||
label="Removed from A"
|
||||
value={fmt.num(summary.removedCount)}
|
||||
icon={Minus}
|
||||
hint="In A, not in B"
|
||||
tone="destructive"
|
||||
/>
|
||||
<KpiCard
|
||||
<DiffKpiTile
|
||||
label="Changed"
|
||||
value={fmt.num(summary.changedCount)}
|
||||
icon={Equal}
|
||||
hint="Deltas in either side"
|
||||
tone="amber"
|
||||
/>
|
||||
<KpiCard
|
||||
<DiffKpiTile
|
||||
label="Unchanged"
|
||||
value={fmt.num(summary.unchangedCount)}
|
||||
icon={Equal}
|
||||
hint="Identical across A & B"
|
||||
tone="ink"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// DiffKpiTile — paper-toned metric tile for the diff summary row.
|
||||
// Mirrors AckKpiTile / BatchesKpiTile from the other hybrid pages.
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function DiffKpiTile({
|
||||
label,
|
||||
value,
|
||||
icon: Icon,
|
||||
hint,
|
||||
tone,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
icon: LucideIcon;
|
||||
hint: string;
|
||||
tone: "success" | "destructive" | "amber" | "ink";
|
||||
}) {
|
||||
const accentMap = {
|
||||
success: "hsl(152 64% 38%)",
|
||||
destructive: "hsl(358 70% 42%)",
|
||||
amber: "hsl(36 92% 50%)",
|
||||
ink: "hsl(var(--surface-ink))",
|
||||
} as const;
|
||||
const tintMap = {
|
||||
success: "hsl(152 50% 88%)",
|
||||
destructive: "hsl(358 70% 92%)",
|
||||
amber: "hsl(36 82% 92%)",
|
||||
ink: "hsl(36 22% 90%)",
|
||||
} as const;
|
||||
const accent = accentMap[tone];
|
||||
const tint = tintMap[tone];
|
||||
return (
|
||||
<div
|
||||
className="relative rounded-xl p-4 overflow-hidden border"
|
||||
title={hint}
|
||||
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-4 bottom-4 w-[3px] rounded-r-sm"
|
||||
style={{ backgroundColor: accent, opacity: 0.85 }}
|
||||
/>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<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, color: accent }}
|
||||
>
|
||||
<Icon className="h-3 w-3" strokeWidth={1.75} />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="display tabular-nums tracking-[-0.04em]"
|
||||
style={{
|
||||
color: "hsl(var(--surface-ink))",
|
||||
fontSize: "clamp(26px, 2.8vw, 36px)",
|
||||
lineHeight: 1,
|
||||
fontWeight: 400,
|
||||
}}
|
||||
>
|
||||
{value}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Row indicator — `+` / `-` / `~` gutter on the left of every row.
|
||||
// ---------------------------------------------------------------------------
|
||||
@@ -152,7 +264,10 @@ function RowIndicator({
|
||||
|
||||
function ClaimIdCell({ id }: { id: string }) {
|
||||
return (
|
||||
<span className="font-mono text-[12px] tracking-tight" data-testid="diff-claim-id">
|
||||
<span
|
||||
className="font-mono text-[12px] tracking-tight"
|
||||
data-testid="diff-claim-id"
|
||||
>
|
||||
{id}
|
||||
</span>
|
||||
);
|
||||
@@ -160,14 +275,31 @@ function ClaimIdCell({ id }: { id: string }) {
|
||||
|
||||
function PatientCell({ name }: { name: string }) {
|
||||
if (!name) {
|
||||
return <span className="text-muted-foreground/60 text-[12px]">—</span>;
|
||||
return (
|
||||
<span
|
||||
className="text-[12px]"
|
||||
style={{ color: "hsl(var(--surface-ink-3))" }}
|
||||
>
|
||||
—
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return <span className="text-[13px]">{name}</span>;
|
||||
return (
|
||||
<span
|
||||
className="text-[13px]"
|
||||
style={{ color: "hsl(var(--surface-ink))" }}
|
||||
>
|
||||
{name}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function ChargeCell({ value }: { value: number }) {
|
||||
return (
|
||||
<span className="display num text-[13px] tabular-nums">
|
||||
<span
|
||||
className="display num text-[13px] tabular-nums"
|
||||
style={{ color: "hsl(var(--surface-ink))" }}
|
||||
>
|
||||
{fmt.usdPrecise(value)}
|
||||
</span>
|
||||
);
|
||||
@@ -175,19 +307,44 @@ function ChargeCell({ value }: { value: number }) {
|
||||
|
||||
function DateCell({ value }: { value: string | null }) {
|
||||
if (!value) {
|
||||
return <span className="text-muted-foreground/60 text-[12px]">—</span>;
|
||||
return (
|
||||
<span
|
||||
className="text-[12px]"
|
||||
style={{ color: "hsl(var(--surface-ink-3))" }}
|
||||
>
|
||||
—
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return <span className="num text-[12.5px]">{value}</span>;
|
||||
return (
|
||||
<span
|
||||
className="num text-[12.5px]"
|
||||
style={{ color: "hsl(var(--surface-ink-2))" }}
|
||||
>
|
||||
{value}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function StatusCell({ value }: { value: string }) {
|
||||
if (!value) {
|
||||
return <span className="text-muted-foreground/60 text-[12px]">—</span>;
|
||||
return (
|
||||
<span
|
||||
className="text-[12px]"
|
||||
style={{ color: "hsl(var(--surface-ink-3))" }}
|
||||
>
|
||||
—
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="font-mono uppercase tracking-wider text-[10px]"
|
||||
style={{
|
||||
color: "hsl(var(--surface-ink))",
|
||||
borderColor: "hsl(30 14% 14% / 0.20)",
|
||||
}}
|
||||
>
|
||||
{value}
|
||||
</Badge>
|
||||
@@ -196,17 +353,28 @@ function StatusCell({ value }: { value: string }) {
|
||||
|
||||
function CptCell({ codes }: { codes: string[] }) {
|
||||
if (!codes || codes.length === 0) {
|
||||
return <span className="text-muted-foreground/60 text-[12px]">—</span>;
|
||||
return (
|
||||
<span
|
||||
className="text-[12px]"
|
||||
style={{ color: "hsl(var(--surface-ink-3))" }}
|
||||
>
|
||||
—
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<span className="font-mono text-[11.5px] tracking-tight">
|
||||
<span
|
||||
className="font-mono text-[11.5px] tracking-tight"
|
||||
style={{ color: "hsl(var(--surface-ink-2))" }}
|
||||
>
|
||||
{codes.join(", ")}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Section tables — one per bucket (added / removed / changed).
|
||||
// Section tables — one per bucket (added / removed / changed). Uses
|
||||
// `tone="paper"` so the table chrome matches the cream paper plane.
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
type Side = "a" | "b";
|
||||
@@ -386,25 +554,53 @@ function SectionTable({
|
||||
<section className="space-y-3" data-testid={testid}>
|
||||
<header className="flex items-baseline justify-between">
|
||||
<div>
|
||||
<div className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-muted-foreground mb-0.5">
|
||||
<div
|
||||
className="text-[10.5px] font-semibold uppercase tracking-[0.18em] mb-0.5"
|
||||
style={{ color: "hsl(var(--surface-ink-3))" }}
|
||||
>
|
||||
{eyebrow}
|
||||
</div>
|
||||
<h2 className="text-[15px] font-semibold tracking-tight">{title}</h2>
|
||||
<h3
|
||||
className="display leading-[0.98] tracking-[-0.03em]"
|
||||
style={{
|
||||
color: "hsl(var(--surface-ink))",
|
||||
fontSize: "clamp(20px, 2.2vw, 26px)",
|
||||
fontWeight: 400,
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</h3>
|
||||
</div>
|
||||
<span className="font-mono num text-[12.5px] text-muted-foreground">
|
||||
<span
|
||||
className="font-mono num text-[12.5px]"
|
||||
style={{ color: "hsl(var(--surface-ink-3))" }}
|
||||
>
|
||||
{fmt.num(count)}
|
||||
</span>
|
||||
</header>
|
||||
{count === 0 ? (
|
||||
<div
|
||||
className="surface rounded-xl border border-dashed border-border/60 p-6 text-center text-[12.5px] text-muted-foreground"
|
||||
className="rounded-xl border p-6 text-center text-[12.5px]"
|
||||
data-testid={`${testid}-empty`}
|
||||
style={{
|
||||
borderColor: "hsl(30 14% 14% / 0.16)",
|
||||
borderStyle: "dashed",
|
||||
backgroundColor: "hsl(36 22% 96%)",
|
||||
color: "hsl(var(--surface-ink-3))",
|
||||
}}
|
||||
>
|
||||
{emptyMessage}
|
||||
</div>
|
||||
) : (
|
||||
<div className="surface rounded-xl overflow-hidden">
|
||||
<Table>
|
||||
<div
|
||||
className="rounded-xl 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-10" aria-label="Diff indicator" />
|
||||
@@ -425,7 +621,8 @@ function SectionTable({
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Skeleton — used by the page while the diff is loading.
|
||||
// Skeleton — used by the page while the diff is loading. Paper-toned
|
||||
// (cream blocks) to match the paper plane chrome.
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export function BatchDiffViewSkeleton() {
|
||||
@@ -462,11 +659,24 @@ export function BatchDiffEmpty({ data }: { data: BatchDiff }) {
|
||||
<SideMeta side={data.b} label="B (right)" />
|
||||
</div>
|
||||
<SummaryCards summary={data.summary} />
|
||||
<div className="surface rounded-xl border border-dashed border-border/60 p-10 text-center">
|
||||
<div className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-muted-foreground mb-1.5">
|
||||
<div
|
||||
className="rounded-xl border p-10 text-center"
|
||||
style={{
|
||||
borderColor: "hsl(30 14% 14% / 0.16)",
|
||||
borderStyle: "dashed",
|
||||
backgroundColor: "hsl(36 22% 96%)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="text-[10.5px] font-semibold uppercase tracking-[0.18em] mb-1.5"
|
||||
style={{ color: "hsl(var(--surface-ink-3))" }}
|
||||
>
|
||||
Diff · no deltas
|
||||
</div>
|
||||
<div className="text-[13.5px] text-muted-foreground">
|
||||
<div
|
||||
className="text-[13.5px]"
|
||||
style={{ color: "hsl(var(--surface-ink-2))" }}
|
||||
>
|
||||
These two batches are identical — no claims added, removed, or
|
||||
changed between A and B.
|
||||
</div>
|
||||
|
||||
+621
-101
@@ -1,6 +1,11 @@
|
||||
import { useCallback, useMemo } from "react";
|
||||
import { useSearchParams } from "react-router-dom";
|
||||
import { GitCompareArrows, CircleDashed, AlertCircle } from "lucide-react";
|
||||
import {
|
||||
AlertCircle,
|
||||
ArrowRight,
|
||||
CircleDashed,
|
||||
GitCompareArrows,
|
||||
} from "lucide-react";
|
||||
import { ApiError } from "@/lib/api";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
@@ -12,7 +17,10 @@ import {
|
||||
} from "@/components/ui/select";
|
||||
import { EmptyState } from "@/components/ui/empty-state";
|
||||
import { ErrorState } from "@/components/ui/error-state";
|
||||
import { BatchDiffView, BatchDiffViewSkeleton } from "@/components/BatchDiffView";
|
||||
import {
|
||||
BatchDiffView,
|
||||
BatchDiffViewSkeleton,
|
||||
} from "@/components/BatchDiffView";
|
||||
import { useBatches } from "@/hooks/useBatches";
|
||||
import { useBatchDiff } from "@/hooks/useBatchDiff";
|
||||
import type { BatchSummary as ApiBatchSummary } from "@/lib/api";
|
||||
@@ -38,9 +46,11 @@ function readIdsFromParams(params: URLSearchParams): {
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Batch picker — one Select dropdown for each side. Keeps the same
|
||||
// kind-colored badge inline so the operator can spot which batch is
|
||||
// which at a glance.
|
||||
// Kind badge — small inline label so the operator can spot which batch
|
||||
// is which at a glance. Identical contract to the one in
|
||||
// `BatchesList.tsx`; duplicated here because each lives inside a
|
||||
// different page surface (the picker is part of this page, the row
|
||||
// badge belongs to Batches).
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function KindBadge({ kind }: { kind: ApiBatchSummary["kind"] }) {
|
||||
@@ -63,6 +73,7 @@ function KindBadge({ kind }: { kind: ApiBatchSummary["kind"] }) {
|
||||
|
||||
function BatchPicker({
|
||||
label,
|
||||
side,
|
||||
value,
|
||||
onChange,
|
||||
items,
|
||||
@@ -70,6 +81,7 @@ function BatchPicker({
|
||||
testid,
|
||||
}: {
|
||||
label: string;
|
||||
side: "A" | "B";
|
||||
value: string | null;
|
||||
onChange: (id: string) => void;
|
||||
items: ApiBatchSummary[];
|
||||
@@ -85,10 +97,54 @@ function BatchPicker({
|
||||
[items, excludeId],
|
||||
);
|
||||
const selected = items.find((it) => it.id === value);
|
||||
const accent = side === "A" ? "hsl(212 100% 45%)" : "hsl(36 92% 50%)";
|
||||
const tint = side === "A" ? "hsl(212 85% 95%)" : "hsl(36 82% 92%)";
|
||||
return (
|
||||
<div className="space-y-1.5" data-testid={testid}>
|
||||
<div className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
|
||||
{label}
|
||||
<div
|
||||
className="rounded-xl border p-4 space-y-2"
|
||||
data-testid={testid}
|
||||
style={{
|
||||
backgroundColor: "hsl(36 22% 98%)",
|
||||
borderColor: "hsl(30 14% 14% / 0.10)",
|
||||
boxShadow:
|
||||
"inset 0 1px 0 0 hsl(0 0% 100% / 0.45), 0 1px 0 0 hsl(30 14% 22% / 0.06)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute left-0 top-4 bottom-4 w-[3px] rounded-r-sm"
|
||||
style={{ backgroundColor: accent, opacity: 0.85 }}
|
||||
/>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div
|
||||
aria-hidden
|
||||
className="h-5 w-5 rounded-md flex items-center justify-center mono font-semibold"
|
||||
style={{ backgroundColor: tint, color: accent, fontSize: 11 }}
|
||||
>
|
||||
{side}
|
||||
</div>
|
||||
<span
|
||||
className="mono text-[10.5px] uppercase tracking-[0.18em] font-semibold"
|
||||
style={{ color: "hsl(var(--surface-ink-3))" }}
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
</div>
|
||||
{selected ? (
|
||||
<span
|
||||
className="display tabular-nums text-[12.5px]"
|
||||
style={{ color: "hsl(var(--surface-ink-2))" }}
|
||||
>
|
||||
{selected.claimCount}{" "}
|
||||
<span
|
||||
className="mono not-italic uppercase tracking-[0.14em] text-[10px]"
|
||||
style={{ color: "hsl(var(--surface-ink-3))" }}
|
||||
>
|
||||
claims
|
||||
</span>
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
<Select value={value ?? ""} onValueChange={(v) => onChange(v)}>
|
||||
<SelectTrigger>
|
||||
@@ -96,7 +152,10 @@ function BatchPicker({
|
||||
<span className="flex items-center gap-2 truncate">
|
||||
<KindBadge kind={selected.kind} />
|
||||
<span className="font-mono num text-[12.5px]">{selected.id}</span>
|
||||
<span className="text-muted-foreground text-[12px] truncate">
|
||||
<span
|
||||
className="text-[12px] truncate"
|
||||
style={{ color: "hsl(var(--surface-ink-2))" }}
|
||||
>
|
||||
· {selected.inputFilename}
|
||||
</span>
|
||||
</span>
|
||||
@@ -157,6 +216,50 @@ function NotFoundState({
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Section header — § N + small italic vertical-rl label. Reused by
|
||||
// both the picks and diff sections so the folio is uniform.
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function Folio({ section, label, topClass = "top-7" }: {
|
||||
section: string;
|
||||
label: string;
|
||||
topClass?: string;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
aria-hidden
|
||||
className={cn(
|
||||
"absolute left-7 lg:left-12 flex flex-col items-center gap-1",
|
||||
topClass,
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className="mono text-[10px] uppercase tracking-[0.18em] font-semibold"
|
||||
style={{ color: "hsl(var(--surface-ink-3))" }}
|
||||
>
|
||||
{section}
|
||||
</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",
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Page
|
||||
// ---------------------------------------------------------------------------
|
||||
@@ -193,8 +296,13 @@ export function BatchDiff() {
|
||||
);
|
||||
const reset = useCallback(() => updateIds({ a: null, b: null }), [updateIds]);
|
||||
|
||||
const { data: batches, isLoading: loadingBatches, isError: batchesError, error: batchesErrorMsg, refetch: refetchBatches } =
|
||||
useBatches(100);
|
||||
const {
|
||||
data: batches,
|
||||
isLoading: loadingBatches,
|
||||
isError: batchesError,
|
||||
error: batchesErrorMsg,
|
||||
refetch: refetchBatches,
|
||||
} = useBatches(100);
|
||||
|
||||
// Only fire the diff once both pickers have a value. The hook also
|
||||
// gates on this internally (defense-in-depth), so a half-picked URL
|
||||
@@ -209,112 +317,524 @@ export function BatchDiff() {
|
||||
: "network"
|
||||
: null;
|
||||
|
||||
// -----------------------------------------------------------------
|
||||
// Stagger choreography
|
||||
// -----------------------------------------------------------------
|
||||
const heroDelay = 0;
|
||||
const foldDelay = 220;
|
||||
const titleDelay = 320;
|
||||
const picksDelay = 460;
|
||||
const diffDelay = 600;
|
||||
|
||||
// --- render -------------------------------------------------------
|
||||
return (
|
||||
<div className="space-y-6 md:space-y-8 animate-fade-in" data-testid="batch-diff-page">
|
||||
<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" />
|
||||
Diff
|
||||
<div
|
||||
className="space-y-0 animate-fade-in"
|
||||
data-testid="batch-diff-page"
|
||||
>
|
||||
{/* =================================================================
|
||||
HERO — DARK EDITORIAL HEADER
|
||||
================================================================= */}
|
||||
<section
|
||||
className="relative pt-6 pb-8 lg:pt-9 lg:pb-10"
|
||||
style={{ animationDelay: `${heroDelay}ms` }}
|
||||
>
|
||||
{/* Ghost "DIFF" 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(160px, 20vw, 300px)",
|
||||
letterSpacing: "-0.05em",
|
||||
opacity: 0.05,
|
||||
lineHeight: 1,
|
||||
color: "hsl(var(--surface-ink))",
|
||||
}}
|
||||
>
|
||||
DIFF
|
||||
</div>
|
||||
<h1 className="text-[22px] sm:text-[26px] font-semibold tracking-tight">
|
||||
Batch diff
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-1.5 text-[14px]">
|
||||
Pick two parsed batches — typically a submitted 837P and its
|
||||
corrected follow-up — and see what was added, removed, or changed
|
||||
between them.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div className="surface rounded-xl p-4 grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-4">
|
||||
<BatchPicker
|
||||
label="A · left"
|
||||
value={a}
|
||||
onChange={setA}
|
||||
items={batches ?? []}
|
||||
excludeId={b}
|
||||
testid="diff-picker-a"
|
||||
<div className="relative z-10 grid grid-cols-1 lg:grid-cols-[1fr,auto] gap-8 items-end mb-7">
|
||||
<div className="min-w-0 max-w-3xl">
|
||||
<div className="flex items-center gap-3 mb-5">
|
||||
<div className="h-px w-14 bg-foreground/25" />
|
||||
<span className="mono text-[12px] uppercase tracking-[0.22em] text-muted-foreground">
|
||||
Diff · Sheet 01
|
||||
</span>
|
||||
<span
|
||||
className="mono text-[12px] uppercase tracking-[0.22em] text-muted-foreground/60 hidden sm:inline"
|
||||
aria-hidden
|
||||
>
|
||||
· A vs B
|
||||
</span>
|
||||
</div>
|
||||
<h1 className="display text-[48px] sm:text-[64px] lg:text-[80px] leading-[0.92] text-foreground tracking-[-0.04em]">
|
||||
Compare{" "}
|
||||
<span className="italic text-muted-foreground/85">batches.</span>
|
||||
</h1>
|
||||
</div>
|
||||
<div className="flex flex-col items-start lg:items-end gap-3">
|
||||
<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">
|
||||
<GitCompareArrows
|
||||
className="h-3.5 w-3.5"
|
||||
strokeWidth={1.75}
|
||||
style={{ color: "hsl(var(--accent))" }}
|
||||
/>
|
||||
837P · 835 · first vs second
|
||||
</div>
|
||||
<kbd
|
||||
className="mono text-[10.5px] uppercase tracking-[0.18em] text-muted-foreground/70"
|
||||
>
|
||||
Pick a batch for each side
|
||||
</kbd>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 max-w-2xl">
|
||||
<p className="text-[14px] text-muted-foreground leading-relaxed">
|
||||
Pick two parsed batches — typically a submitted 837P and its
|
||||
corrected follow-up — and see what was added, removed, or changed
|
||||
between them.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* =================================================================
|
||||
FOLD — TORN PAGE
|
||||
================================================================= */}
|
||||
<div
|
||||
aria-hidden
|
||||
className="relative h-14"
|
||||
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)",
|
||||
}}
|
||||
/>
|
||||
<BatchPicker
|
||||
label="B · right"
|
||||
value={b}
|
||||
onChange={setB}
|
||||
items={batches ?? []}
|
||||
excludeId={a}
|
||||
testid="diff-picker-b"
|
||||
<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,
|
||||
}}
|
||||
>
|
||||
A → B
|
||||
</span>
|
||||
<span
|
||||
className="display italic"
|
||||
style={{ color: "hsl(var(--muted-foreground))", fontSize: 15 }}
|
||||
>
|
||||
↙
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{batchesError ? (
|
||||
<ErrorState
|
||||
message="Couldn't load batches from the backend."
|
||||
detail={
|
||||
batchesErrorMsg instanceof Error
|
||||
? batchesErrorMsg.message
|
||||
: String(batchesErrorMsg)
|
||||
}
|
||||
onRetry={() => refetchBatches()}
|
||||
{/* =================================================================
|
||||
PAPER PLANE
|
||||
================================================================= */}
|
||||
<div
|
||||
className="relative max-w-[1280px] mx-auto"
|
||||
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",
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{!ready ? (
|
||||
<div className="surface rounded-xl">
|
||||
<EmptyState
|
||||
icon={<GitCompareArrows className="h-4 w-4" strokeWidth={1.5} />}
|
||||
eyebrow="Batch diff · awaiting picks"
|
||||
message="Choose one batch for A and one for B to compute the diff."
|
||||
{/* Title block */}
|
||||
<div
|
||||
className="relative px-8 lg:px-14 pt-12 pb-9 border-b animate-fade-in-up"
|
||||
style={{
|
||||
animationDelay: `${titleDelay}ms`,
|
||||
borderColor: "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">
|
||||
<div>
|
||||
<div
|
||||
className="mono text-[12px] uppercase tracking-[0.24em] mb-4 font-medium"
|
||||
style={{ color: "hsl(var(--surface-ink-3))" }}
|
||||
>
|
||||
Sheet 01 · Compare two batches
|
||||
</div>
|
||||
<h2
|
||||
className="display leading-[0.92] tracking-[-0.04em]"
|
||||
style={{
|
||||
color: "hsl(var(--surface-ink))",
|
||||
fontSize: "clamp(48px, 7vw, 96px)",
|
||||
fontWeight: 400,
|
||||
}}
|
||||
>
|
||||
Compare them.
|
||||
</h2>
|
||||
<div
|
||||
className="mt-4 display italic"
|
||||
style={{
|
||||
color: "hsl(var(--surface-ink-2))",
|
||||
fontSize: "clamp(15px, 1.3vw, 18px)",
|
||||
lineHeight: 1.4,
|
||||
maxWidth: "32ch",
|
||||
}}
|
||||
>
|
||||
Two picks, three buckets. What the second batch added, what
|
||||
the first batch dropped, and which claims moved between them.
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right shrink-0">
|
||||
<div
|
||||
className="mono text-[11px] uppercase tracking-[0.24em] mb-1.5 font-medium"
|
||||
style={{ color: "hsl(var(--surface-ink-3))" }}
|
||||
>
|
||||
On the wire
|
||||
</div>
|
||||
<div
|
||||
className="flex items-center justify-end gap-2 tabular-nums"
|
||||
style={{
|
||||
color: "hsl(var(--surface-ink))",
|
||||
fontSize: 26,
|
||||
lineHeight: 1.1,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="display"
|
||||
style={{ color: a ? "hsl(212 100% 45%)" : "hsl(var(--surface-ink-3))" }}
|
||||
>
|
||||
{a ? "A" : "—"}
|
||||
</span>
|
||||
<ArrowRight
|
||||
className="h-4 w-4 mt-0.5"
|
||||
strokeWidth={1.5}
|
||||
style={{ color: "hsl(var(--surface-ink-3))" }}
|
||||
/>
|
||||
<span
|
||||
className="display"
|
||||
style={{ color: b ? "hsl(36 92% 50%)" : "hsl(var(--surface-ink-3))" }}
|
||||
>
|
||||
{b ? "B" : "—"}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="mono text-[11px] mt-1"
|
||||
style={{ color: "hsl(var(--surface-ink-3))" }}
|
||||
>
|
||||
{ready ? "ready to diff" : "two picks needed"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : loadingBatches ? (
|
||||
<BatchDiffViewSkeleton />
|
||||
) : errKind === "not_found" ? (
|
||||
<NotFoundState a={a as string} b={b as string} onReset={reset} />
|
||||
) : diff.isError ? (
|
||||
<ErrorState
|
||||
message="Couldn't compute the diff between these two batches."
|
||||
detail={
|
||||
diff.error instanceof Error
|
||||
? diff.error.message
|
||||
: String(diff.error)
|
||||
}
|
||||
onRetry={() => diff.refetch()}
|
||||
/>
|
||||
) : diff.isLoading || !diff.data ? (
|
||||
<BatchDiffViewSkeleton />
|
||||
) : (
|
||||
<BatchDiffView data={diff.data} />
|
||||
)}
|
||||
|
||||
{/* Action footer — always visible so the operator can clear or
|
||||
force-refresh without scrolling back to the picker. */}
|
||||
{ready ? (
|
||||
<div className="flex items-center justify-end gap-2 pt-2">
|
||||
{diff.isFetching ? (
|
||||
<span className="text-[12px] text-muted-foreground inline-flex items-center gap-1.5">
|
||||
<CircleDashed className="h-3 w-3 animate-spin" strokeWidth={1.75} />
|
||||
Refreshing…
|
||||
</span>
|
||||
) : null}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => diff.refetch()}
|
||||
data-testid="diff-refresh-button"
|
||||
{/* § 01 The picks */}
|
||||
<section
|
||||
aria-label="The picks"
|
||||
className="relative px-8 lg:px-14 py-7 animate-fade-in-up"
|
||||
style={{ animationDelay: `${picksDelay}ms` }}
|
||||
>
|
||||
<Folio section="§ 01" label="The picks" />
|
||||
<div
|
||||
className="pt-6 border-t"
|
||||
style={{
|
||||
borderTopStyle: "double",
|
||||
borderTopWidth: 3,
|
||||
borderColor: "hsl(30 14% 14% / 0.12)",
|
||||
}}
|
||||
>
|
||||
Refresh
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={reset}
|
||||
data-testid="diff-clear-button"
|
||||
<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 picks
|
||||
</div>
|
||||
<h3
|
||||
className="display leading-[0.98] tracking-[-0.03em]"
|
||||
style={{
|
||||
color: "hsl(var(--surface-ink))",
|
||||
fontSize: "clamp(24px, 2.6vw, 32px)",
|
||||
fontWeight: 400,
|
||||
}}
|
||||
>
|
||||
One on each <span className="italic">side.</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
className="text-[12.5px] display italic"
|
||||
style={{ color: "hsl(var(--surface-ink-2))", maxWidth: 380 }}
|
||||
>
|
||||
A is the "before" — B is the "after". A picked batch can't
|
||||
be picked again on the other side.
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<BatchPicker
|
||||
label="A · left"
|
||||
side="A"
|
||||
value={a}
|
||||
onChange={setA}
|
||||
items={batches ?? []}
|
||||
excludeId={b}
|
||||
testid="diff-picker-a"
|
||||
/>
|
||||
<BatchPicker
|
||||
label="B · right"
|
||||
side="B"
|
||||
value={b}
|
||||
onChange={setB}
|
||||
items={batches ?? []}
|
||||
excludeId={a}
|
||||
testid="diff-picker-b"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* § 02 The diff */}
|
||||
<section
|
||||
aria-label="The diff"
|
||||
className="relative px-8 lg:px-14 pb-8 lg:pb-10 animate-fade-in-up"
|
||||
style={{ animationDelay: `${diffDelay}ms` }}
|
||||
>
|
||||
<Folio section="§ 02" label="The diff" topClass="top-9" />
|
||||
<div
|
||||
className="pt-6 border-t"
|
||||
style={{
|
||||
borderTopStyle: "double",
|
||||
borderTopWidth: 3,
|
||||
borderColor: "hsl(30 14% 14% / 0.12)",
|
||||
}}
|
||||
>
|
||||
<AlertCircle className="h-3.5 w-3.5 mr-1" strokeWidth={1.75} />
|
||||
Clear picks
|
||||
</Button>
|
||||
<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 diff
|
||||
</div>
|
||||
<h3
|
||||
className="display leading-[0.98] tracking-[-0.03em]"
|
||||
style={{
|
||||
color: "hsl(var(--surface-ink))",
|
||||
fontSize: "clamp(24px, 2.6vw, 32px)",
|
||||
fontWeight: 400,
|
||||
}}
|
||||
>
|
||||
What <span className="italic">moved.</span>
|
||||
</h3>
|
||||
</div>
|
||||
{ready ? (
|
||||
<div
|
||||
className="text-[12.5px] display italic"
|
||||
style={{
|
||||
color: "hsl(var(--surface-ink-2))",
|
||||
maxWidth: 380,
|
||||
}}
|
||||
>
|
||||
Three buckets — added in B, removed from A, changed in
|
||||
place. Unchanged claims are summarized but not listed.
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{batchesError ? (
|
||||
<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 batches from the backend."
|
||||
detail={
|
||||
batchesErrorMsg instanceof Error
|
||||
? batchesErrorMsg.message
|
||||
: String(batchesErrorMsg)
|
||||
}
|
||||
onRetry={() => refetchBatches()}
|
||||
/>
|
||||
</div>
|
||||
) : !ready ? (
|
||||
<div
|
||||
className="rounded-md border p-12 text-center"
|
||||
style={{
|
||||
borderColor: "hsl(30 14% 14% / 0.16)",
|
||||
borderStyle: "dashed",
|
||||
backgroundColor: "hsl(36 22% 96%)",
|
||||
}}
|
||||
data-testid="batch-diff-awaiting"
|
||||
>
|
||||
<EmptyState
|
||||
icon={
|
||||
<GitCompareArrows
|
||||
className="h-4 w-4"
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
}
|
||||
eyebrow="Batch diff · awaiting picks"
|
||||
message="Choose one batch for A and one for B to compute the diff."
|
||||
/>
|
||||
</div>
|
||||
) : loadingBatches ? (
|
||||
<BatchDiffViewSkeleton />
|
||||
) : errKind === "not_found" ? (
|
||||
<NotFoundState a={a as string} b={b as string} onReset={reset} />
|
||||
) : diff.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 compute the diff between these two batches."
|
||||
detail={
|
||||
diff.error instanceof Error
|
||||
? diff.error.message
|
||||
: String(diff.error)
|
||||
}
|
||||
onRetry={() => diff.refetch()}
|
||||
/>
|
||||
</div>
|
||||
) : diff.isLoading || !diff.data ? (
|
||||
<BatchDiffViewSkeleton />
|
||||
) : (
|
||||
<BatchDiffView data={diff.data} />
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Action footer — always visible when ready so the operator can
|
||||
clear or force-refresh without scrolling back to the picker. */}
|
||||
{ready ? (
|
||||
<div
|
||||
className="relative px-8 lg:px-14 py-5 border-t flex items-center justify-between gap-3 flex-wrap"
|
||||
style={{
|
||||
borderColor: "hsl(30 14% 14% / 0.12)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="text-[12.5px] display italic"
|
||||
style={{ color: "hsl(var(--surface-ink-2))" }}
|
||||
>
|
||||
{diff.isFetching ? (
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
<CircleDashed
|
||||
className="h-3 w-3 animate-spin"
|
||||
strokeWidth={1.75}
|
||||
/>
|
||||
Refreshing…
|
||||
</span>
|
||||
) : (
|
||||
<>
|
||||
Comparing{" "}
|
||||
<span
|
||||
className="display mono not-italic"
|
||||
style={{ color: "hsl(var(--surface-ink))" }}
|
||||
>
|
||||
{a}
|
||||
</span>{" "}
|
||||
with{" "}
|
||||
<span
|
||||
className="display mono not-italic"
|
||||
style={{ color: "hsl(var(--surface-ink))" }}
|
||||
>
|
||||
{b}
|
||||
</span>
|
||||
.
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => diff.refetch()}
|
||||
data-testid="diff-refresh-button"
|
||||
>
|
||||
Refresh
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={reset}
|
||||
data-testid="diff-clear-button"
|
||||
>
|
||||
<AlertCircle className="h-3.5 w-3.5 mr-1" strokeWidth={1.75} />
|
||||
Clear picks
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* 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 sheet 01</span>
|
||||
<span>Cyclone · Batch diff</span>
|
||||
<span>{ready ? "A vs B" : "awaiting picks"}</span>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user