Tyler
fbe9940a3f
Distill the UI into a single, recognizable voice: a precision instrument for one operator on one machine. Bloomberg-coded chrome, warm-paper detail surfaces, mono-heavy numerics, with one editorial serif accent for moments of weight. Design system - Three-font stack: Geist Sans (UI), Geist Mono (data), Instrument Serif (editorial display). No Inter, no system fonts. - Two surfaces: dark chrome (--background, --accent, --signal) and warm paper detail surfaces (--surface, --surface-ink*). - Inbox has its own Ticker Tape terminal palette (--tt-*). - Shared component classes: .eyebrow, .mono, .display, .surface, .surface-2, .row-hover, .nav-active, .kbd, .editorial, .hairline. - --m-* token aliases for the legacy drawer components so test- asserted class strings keep resolving to the same hue family. Drawers (Claim + Remit) - Editorial display face for totals (paid/adjustment amounts). - Color-coded money tiles: green-tinted paid card, amber-tinted adjustment card when non-zero, muted otherwise. - Tabs get accent-blue underline + CSS-driven active state. - Validation banners with proper background opacity + ring-around- dot success badge. - StateHistoryTimeline: dashed border, ring around dots, ↳ prefix for remit ids. - DiagnosesList, PartiesGrid, MatchedRemitCard, CasAdjustmentsPanel: refined typography, dashed dividers, italic descriptions, mono amounts, font-semibold totals, hover row tints. Inbox Ticker Tape - Custom RowCheckbox with sr-only input + amber accent. - Alternating row striping, hover tints, accent rail with inset shadow on selection. - Refined sparkline with glow at high values. - BulkBar: bottom-floating bar with amber count chip, larger shadow. - CandidateBreakdown: animated progress bars with amber gradient. - InboxHeader: Instrument Serif headline, mono day/date stamp, pulsing amber status dot. Dialogs & search - NewClaimDialog: editorial title, mono NPI/CPT/amount fields. - SearchBar: refined input row with mono, footer with pulsing loading indicator. - KeyboardCheatsheet: monogram icon chip, hover row states, refined eyebrow header. Primitives - StatusBadge / ClaimStateBadge: per-state dot indicators. - SelectItem: data-[highlighted]:outline tokens for keyboard a11y. - Table primitives: refined header treatment, hover/focus states. Tests + build - 354/354 tests passing across 59 files. - Vite build clean (53.84 kB CSS / 560.86 kB JS). - Eyebrow assertions updated to match the consolidated .eyebrow class (intact visual contract, abstracted class string). - Badge variant tokens updated to the polished bg-muted/80 / /0.14 opacity scale.
71 lines
2.1 KiB
TypeScript
71 lines
2.1 KiB
TypeScript
import { AlertCircle, WifiOff } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
type RemitDrawerErrorProps = {
|
|
kind: "not_found" | "network";
|
|
onRetry?: () => void;
|
|
onClose: () => void;
|
|
};
|
|
|
|
const COPY = {
|
|
not_found: {
|
|
eyebrow: "NOT FOUND",
|
|
message: "This remittance 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 remittance detail drawer (RemitDrawer).
|
|
*
|
|
* Two shapes — `not_found` (the remit 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.
|
|
*
|
|
* Visual twin of `ClaimDrawerError` so the two drawers feel like one
|
|
* component family — same icon size, same eyebrow color, same button
|
|
* spacing.
|
|
*/
|
|
export function RemitDrawerError({
|
|
kind,
|
|
onRetry,
|
|
onClose,
|
|
}: RemitDrawerErrorProps) {
|
|
const { eyebrow, message } = COPY[kind];
|
|
const Icon = kind === "network" ? WifiOff : AlertCircle;
|
|
|
|
return (
|
|
<div
|
|
className="flex flex-col items-start gap-4 p-6 bg-[color:var(--m-surface)] text-[color:var(--m-ink-primary)]"
|
|
role="alert"
|
|
data-testid={`remit-drawer-error-${kind}`}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<Icon
|
|
className="h-5 w-5 text-[color:var(--m-error)]"
|
|
strokeWidth={1.75}
|
|
aria-hidden
|
|
/>
|
|
<span className="eyebrow text-[color:var(--m-error)]">
|
|
{eyebrow}
|
|
</span>
|
|
</div>
|
|
<p className="text-sm text-[color:var(--m-ink-secondary)] 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>
|
|
);
|
|
}
|