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.
83 lines
2.7 KiB
TypeScript
83 lines
2.7 KiB
TypeScript
import type { ClaimDetail } from "@/types";
|
|
|
|
type DiagnosesListProps = {
|
|
diagnoses: ClaimDetail["diagnoses"];
|
|
};
|
|
|
|
// Minimal ICD-10 description lookup. Covers the most common codes
|
|
// likely to appear in the test fixtures; the full ICD-10 catalog is
|
|
// ~95k entries and out of scope. Codes not in this map render without
|
|
// a description (the code + qualifier still display).
|
|
const ICD10_DESCRIPTION: Record<string, string> = {
|
|
"E11.9": "Type 2 diabetes mellitus without complications",
|
|
"E11.65": "Type 2 diabetes mellitus with hyperglycemia",
|
|
"I10": "Essential (primary) hypertension",
|
|
"J45.909": "Unspecified asthma, uncomplicated",
|
|
"M54.5": "Low back pain",
|
|
"R51": "Headache",
|
|
"Z00.00": "General adult medical examination",
|
|
};
|
|
|
|
function describe(code: string): string | null {
|
|
return ICD10_DESCRIPTION[code] ?? null;
|
|
}
|
|
|
|
/**
|
|
* Diagnoses list for the claim detail drawer (SP4).
|
|
*
|
|
* Inline list of mono codes + (when present) qualifier + (when the
|
|
* code is in our small ICD-10 dictionary) a short human description.
|
|
* The dictionary is intentionally tiny — the drawer's purpose is to
|
|
* show what the claim says, not to be an ICD-10 reference.
|
|
*/
|
|
export function DiagnosesList({ diagnoses }: DiagnosesListProps) {
|
|
return (
|
|
<section className="flex flex-col gap-3 px-6 py-4">
|
|
<h3
|
|
data-testid="section-label"
|
|
className="eyebrow text-[color:var(--m-ink-tertiary)]"
|
|
>
|
|
Diagnoses ({diagnoses.length})
|
|
</h3>
|
|
|
|
{diagnoses.length === 0 ? (
|
|
<p
|
|
data-testid="diagnoses-empty"
|
|
className="text-sm text-[color:var(--m-ink-tertiary)]"
|
|
>
|
|
No diagnoses
|
|
</p>
|
|
) : (
|
|
<ul className="flex flex-col gap-2" data-testid="diagnoses-list">
|
|
{diagnoses.map((d, i) => {
|
|
const desc = describe(d.code);
|
|
return (
|
|
<li
|
|
key={`${d.code}-${i}`}
|
|
data-testid="diagnosis-item"
|
|
className="flex items-baseline gap-3 text-sm"
|
|
>
|
|
<span
|
|
className="mono text-[color:var(--m-ink-primary)] font-medium"
|
|
>
|
|
{d.qualifier ? `${d.qualifier} ${d.code}` : d.code}
|
|
</span>
|
|
{desc ? (
|
|
<>
|
|
<span
|
|
className="h-px w-3 bg-[color:var(--m-border-heavy)]/30"
|
|
aria-hidden
|
|
/>
|
|
<span className="text-[color:var(--m-ink-secondary)] italic">
|
|
{desc}
|
|
</span>
|
|
</>
|
|
) : null}
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
)}
|
|
</section>
|
|
);
|
|
} |