Files
cyclone/src/components/ClaimDrawer/ClaimDrawerError.tsx
T
Tyler 9bca4b608a feat(release): v0.2.0 — batch 837 export, ClaimCard, theme tokens
Backend:

- New POST /api/batches/{id}/export-837: regenerate X12 837 files
  for a list of claim_ids into a ZIP using HCPF file naming standards,
  with a unique interchange/group control number per export. Wire
  the clearhouse Loop 1000A (NM1*41 + PER) and per-payer receiver
  (NM1*40) blocks so the serializer no longer falls back to
  CYCLONE / RECEIVER placeholders.
- /api/parse-837 and /api/parse-835 now surface the server-side
  batch_id in both JSON and NDJSON response shapes so the frontend
  can hit batch-scoped endpoints without an extra listBatches
  round-trip.
- Filename helpers and the 837 serializer updated to match the new
  HCPF envelope; tests cover batch export, parse batch_id, and the
  serializer's control-number uniqueness guarantee.

Frontend:
- New shared components: ClaimCard, ClaimCard837, DominantKpiCard,
  EditorialNote, ExportBar, TickerTape, and a charts/ set
  (BarChart, HBarChart, SegmentedBar, AgingBars).
- New useBatchExport hook driving ExportBar's download flow against
  the new endpoint.
- ClaimDrawer, Lane, and Layout migrated from raw CSS-variable
  colors to Tailwind theme tokens (bg-card, text-foreground,
  border/60, etc.) for consistency with the rest of the instrument
  chrome; the active tab indicator gains a subtle accent glow.
- Upload, Inbox, Batches, BatchDiff, Reconciliation, and Acks pages
  reworked to compose the new shared components and consume the new
  batch-scoped API surface (notably ExportBar wired into Batches).

Tooling / Docs:
- Add audit-uiux.mjs and a docs/goodclaim.x12 sample fixture.
- Update ClaimDrawer testids and add coverage for the new
  components and the useBatchExport hook.

Rolls up into the v0.2.0 release tag.
2026-06-22 11:01:58 -06:00

62 lines
1.9 KiB
TypeScript

import { AlertCircle, WifiOff } from "lucide-react";
import { Button } from "@/components/ui/button";
type ClaimDrawerErrorProps = {
kind: "not_found" | "network";
onRetry?: () => void;
onClose: () => void;
};
const COPY = {
not_found: {
eyebrow: "NOT FOUND",
message: "This claim doesn't exist or has been removed.",
},
network: {
eyebrow: "CONNECTION",
message: "Couldn't reach the server. Check your connection and try again.",
},
} as const;
/**
* Error state for the claim detail drawer (SP4).
*
* Two shapes — `not_found` (the claim id in the URL doesn't resolve on
* the server, e.g. a stale deep link) and `network` (the request
* failed). The not_found variant has no retry affordance (retrying won't
* help), the network variant does when `onRetry` is supplied.
*/
export function ClaimDrawerError({ kind, onRetry, onClose }: ClaimDrawerErrorProps) {
const { eyebrow, message } = COPY[kind];
const Icon = kind === "network" ? WifiOff : AlertCircle;
return (
<div
className="flex flex-col items-start gap-4 p-6 bg-card text-foreground"
role="alert"
data-testid={`claim-drawer-error-${kind}`}
>
<div className="flex items-center gap-2">
<Icon
className="h-5 w-5 text-destructive"
strokeWidth={1.75}
aria-hidden
/>
<span className="eyebrow text-destructive">
{eyebrow}
</span>
</div>
<p className="text-sm text-muted-foreground max-w-sm">{message}</p>
<div className="flex items-center gap-2">
{kind === "network" && onRetry ? (
<Button variant="outline" size="sm" onClick={onRetry} data-testid="error-retry">
Retry
</Button>
) : null}
<Button variant="ghost" size="sm" onClick={onClose} data-testid="error-close">
Close
</Button>
</div>
</div>
);
}