feat(ui): cohesive frontend polish — design system + per-screen refinement
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.
This commit is contained in:
Tyler
@@ -6,6 +6,7 @@ import { ApiError } from "@/lib/api";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { EmptyState } from "@/components/ui/empty-state";
|
||||
import { ErrorState } from "@/components/ui/error-state";
|
||||
import { PageHeader } from "@/components/PageHeader";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
@@ -15,10 +16,6 @@ import { cn } from "@/lib/utils";
|
||||
* selected" to POST /api/reconciliation/match. The hook's invalidation
|
||||
* cascade refreshes the unmatched bucket + claims + remits + activity feeds
|
||||
* on success.
|
||||
*
|
||||
* Loading / error / empty states each early-return so the two-column
|
||||
* selection JSX stays readable and doesn't have to defensively check
|
||||
* `unmatched.data` everywhere.
|
||||
*/
|
||||
export function ReconciliationPage() {
|
||||
const { unmatched, match } = useReconciliation();
|
||||
@@ -27,16 +24,11 @@ export function ReconciliationPage() {
|
||||
|
||||
if (unmatched.isLoading) {
|
||||
return (
|
||||
<div className="space-y-6 md: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" />
|
||||
Reconciliation
|
||||
</div>
|
||||
<h1 className="text-[22px] sm:text-[26px] font-semibold tracking-tight">
|
||||
Manual pairing
|
||||
</h1>
|
||||
</header>
|
||||
<div className="space-y-6 lg:space-y-8 animate-fade-in">
|
||||
<PageHeader
|
||||
eyebrow="Reconciliation"
|
||||
title={<>Manual <span className="display italic text-muted-foreground">pairing</span></>}
|
||||
/>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Skeleton variant="default" height={320} />
|
||||
<Skeleton variant="default" height={320} />
|
||||
@@ -51,16 +43,11 @@ export function ReconciliationPage() {
|
||||
? unmatched.error.message
|
||||
: String(unmatched.error);
|
||||
return (
|
||||
<div className="space-y-6 md: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" />
|
||||
Reconciliation
|
||||
</div>
|
||||
<h1 className="text-[22px] sm:text-[26px] font-semibold tracking-tight">
|
||||
Manual pairing
|
||||
</h1>
|
||||
</header>
|
||||
<div className="space-y-6 lg:space-y-8 animate-fade-in">
|
||||
<PageHeader
|
||||
eyebrow="Reconciliation"
|
||||
title={<>Manual <span className="display italic text-muted-foreground">pairing</span></>}
|
||||
/>
|
||||
<ErrorState
|
||||
message="Couldn't load unmatched claims and remittances."
|
||||
detail={detail}
|
||||
@@ -78,16 +65,11 @@ export function ReconciliationPage() {
|
||||
|
||||
if (empty) {
|
||||
return (
|
||||
<div className="space-y-6 md: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" />
|
||||
Reconciliation
|
||||
</div>
|
||||
<h1 className="text-[22px] sm:text-[26px] font-semibold tracking-tight">
|
||||
Manual pairing
|
||||
</h1>
|
||||
</header>
|
||||
<div className="space-y-6 lg:space-y-8 animate-fade-in">
|
||||
<PageHeader
|
||||
eyebrow="Reconciliation"
|
||||
title={<>Manual <span className="display italic text-muted-foreground">pairing</span></>}
|
||||
/>
|
||||
<div className="surface rounded-xl">
|
||||
<EmptyState
|
||||
icon={<CircleDashed className="h-4 w-4" strokeWidth={1.5} />}
|
||||
@@ -107,8 +89,6 @@ export function ReconciliationPage() {
|
||||
setSelectedClaim(null);
|
||||
setSelectedRemit(null);
|
||||
} catch (e) {
|
||||
// ApiError carries the HTTP status; 409 is the backend's "already
|
||||
// matched" signal, so surface a friendlier message than the raw body.
|
||||
const msg =
|
||||
e instanceof ApiError && e.status === 409
|
||||
? "Already matched — view the existing match."
|
||||
@@ -125,25 +105,19 @@ export function ReconciliationPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6 md: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" />
|
||||
Reconciliation
|
||||
</div>
|
||||
<h1 className="text-[22px] sm:text-[26px] font-semibold tracking-tight">
|
||||
Manual pairing
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-1.5 text-[14px]">
|
||||
Pick one claim and one remittance, then match them.
|
||||
</p>
|
||||
</header>
|
||||
<div className="space-y-6 lg:space-y-8 animate-fade-in">
|
||||
<PageHeader
|
||||
eyebrow="Reconciliation"
|
||||
title={<>Manual <span className="display italic text-muted-foreground">pairing</span></>}
|
||||
subtitle="Pick one claim and one remittance, then match them."
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{/* Claims column */}
|
||||
<div className="surface rounded-xl border border-border/60 p-4 space-y-2">
|
||||
<h2 className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
|
||||
Unmatched claims ({claims.length})
|
||||
<div className="surface-2 rounded-xl p-4 space-y-2">
|
||||
<h2 className="eyebrow flex items-center justify-between">
|
||||
Unmatched claims
|
||||
<span className="mono text-[10.5px] text-foreground/80">{claims.length}</span>
|
||||
</h2>
|
||||
<div className="space-y-2">
|
||||
{claims.map((c) => {
|
||||
@@ -155,17 +129,17 @@ export function ReconciliationPage() {
|
||||
onClick={() => setSelectedClaim(c.id)}
|
||||
aria-pressed={active}
|
||||
className={cn(
|
||||
"w-full text-left p-3 min-h-[44px] rounded-md border transition-colors",
|
||||
"w-full text-left p-3 min-h-[44px] rounded-md border transition-colors text-left",
|
||||
active
|
||||
? "border-accent bg-accent/5"
|
||||
: "border-border/60 hover:border-border"
|
||||
? "border-accent bg-accent/10 ring-1 ring-inset ring-accent/30"
|
||||
: "border-border/60 hover:border-border hover:bg-muted/30"
|
||||
)}
|
||||
>
|
||||
<div className="display num text-sm">{c.id}</div>
|
||||
<div className="font-mono text-xs text-muted-foreground">
|
||||
<div className="display mono text-[13px]">{c.id}</div>
|
||||
<div className="text-[12px] text-muted-foreground">
|
||||
{c.patientName}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground mt-0.5">
|
||||
<div className="mono text-[11px] text-muted-foreground mt-0.5">
|
||||
{c.serviceDate ?? "—"} · ${c.billedAmount.toFixed(2)} · NPI{" "}
|
||||
{c.providerNpi ?? "—"}
|
||||
</div>
|
||||
@@ -176,9 +150,10 @@ export function ReconciliationPage() {
|
||||
</div>
|
||||
|
||||
{/* Remits column */}
|
||||
<div className="surface rounded-xl border border-border/60 p-4 space-y-2">
|
||||
<h2 className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
|
||||
Unmatched remits ({remittances.length})
|
||||
<div className="surface-2 rounded-xl p-4 space-y-2">
|
||||
<h2 className="eyebrow flex items-center justify-between">
|
||||
Unmatched remits
|
||||
<span className="mono text-[10.5px] text-foreground/80">{remittances.length}</span>
|
||||
</h2>
|
||||
<div className="space-y-2">
|
||||
{remittances.map((r) => {
|
||||
@@ -190,13 +165,13 @@ export function ReconciliationPage() {
|
||||
onClick={() => setSelectedRemit(r.id)}
|
||||
aria-pressed={active}
|
||||
className={cn(
|
||||
"w-full text-left p-3 min-h-[44px] rounded-md border transition-colors",
|
||||
"w-full text-left p-3 min-h-[44px] rounded-md border transition-colors text-left",
|
||||
active
|
||||
? "border-accent bg-accent/5"
|
||||
: "border-border/60 hover:border-border"
|
||||
? "border-accent bg-accent/10 ring-1 ring-inset ring-accent/30"
|
||||
: "border-border/60 hover:border-border hover:bg-muted/30"
|
||||
)}
|
||||
>
|
||||
<div className="font-mono text-sm flex items-center gap-2">
|
||||
<div className="mono text-[13px] flex items-center gap-2">
|
||||
{r.payerClaimControlNumber}
|
||||
{r.isReversal ? (
|
||||
<span className="text-[10px] text-warning uppercase tracking-wider">
|
||||
@@ -204,7 +179,7 @@ export function ReconciliationPage() {
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground mt-0.5">
|
||||
<div className="mono text-[11px] text-muted-foreground mt-0.5">
|
||||
Status {r.status} · ${r.paidAmount.toFixed(2)} paid · $
|
||||
{r.adjustmentAmount.toFixed(2)} adj
|
||||
</div>
|
||||
@@ -234,7 +209,7 @@ export function ReconciliationPage() {
|
||||
Clear selection
|
||||
</Button>
|
||||
{selectedClaim || selectedRemit ? (
|
||||
<span className="text-xs text-muted-foreground sm:ml-2 basis-full sm:basis-auto">
|
||||
<span className="text-[11.5px] text-muted-foreground sm:ml-2 basis-full sm:basis-auto mono">
|
||||
{selectedClaim ? `Claim ${selectedClaim}` : "No claim"}
|
||||
{" · "}
|
||||
{selectedRemit ? `Remit ${selectedRemit}` : "No remit"}
|
||||
|
||||
Reference in New Issue
Block a user