Tyler
1db6b8841c
Quality-fix iteration on 078c9ad. Resolves the 4 Important issues
flagged in the code review while preserving everything that's working.
Issue 1 — ProviderDrawer silently swallowed error states (infinite
skeleton on any failure). Now mirrors ClaimDrawer/RemitDrawer:
- Destructure { data, isLoading, isError, error, refetch }
- Compute errorKind = ApiError(404) → not_found, else → network
- New ProviderDrawerError.tsx renders the right copy + retry/close
- Body branches on errorKind → loading → data
Issue 2 — useProviderDetail did not match the useClaimDetail contract:
- 404 retry guard (no retries on 404, <=3 on everything else)
- Explicit typed return shape { data, isLoading, isError, error,
refetch }
- npi === null short-circuit after the useQuery call
Issue 3 — Provider drilldown was non-functional in demo mode. Added
the useSyncExternalStore fallback to useAppStore.providers (same
pattern as useProviders), gated by api.isConfigured. Unknown NPI in
demo mode surfaces via the error branch instead of an infinite
skeleton.
Issue 4 — Test was shape-only (1 case). Rewrote with vi.hoisted +
vi.fn() hook mock and 7 cases covering null/loading/404/network/
close/success/hook-call-shape.
Issue 5 — Replaced h-[calc(100%-64px)] with a flex layout
(flex h-full flex-col on DialogContent, flex h-full flex-col
overflow-y-auto on inner wrappers). Mirrors RemitDrawer's pattern;
no more coupling to DrillDrawerHeader's padding/font sizes.
Issue 7 — Removed the dead npi === null ? null : (...) wrapper
inside DialogContent; Dialog open={npi !== null} already gates it.
Issue 8 — Trailing newlines added across all touched + created files.
Self-review: tsc clean on changed files; drawer test suite 211/211
passing; full test suite 369/372 (3 pre-existing Inbox/Reconciliation
failures unchanged). ProviderDrawer now 7/7.
44 lines
1.6 KiB
TypeScript
44 lines
1.6 KiB
TypeScript
import type { Provider } from "@/types";
|
|
import { fmt } from "@/lib/format";
|
|
|
|
/**
|
|
* Overview tab content for the provider drill-down drawer (SP21
|
|
* Task 2.2). Renders the base provider fields in a two-column grid:
|
|
*
|
|
* - Identity: NPI, Tax ID, address, phone
|
|
* - Activity: claim count, outstanding AR
|
|
*
|
|
* Subsequent tasks (Phase 3) will hang ``recent_claims`` and
|
|
* ``recent_activity`` off this surface; for now we only render the
|
|
* base fields the drawer needs to present "who is this provider and
|
|
* what's their activity shape" at a glance.
|
|
*/
|
|
export function ProviderOverview({ provider }: { provider: Provider }) {
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<Field label="NPI" value={provider.npi} mono />
|
|
<Field label="Tax ID" value={provider.taxId} mono />
|
|
<Field
|
|
label="Address"
|
|
value={`${provider.address}, ${provider.city}, ${provider.state} ${provider.zip}`}
|
|
/>
|
|
<Field label="Phone" value={provider.phone} mono />
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3 pt-3 border-t border-border/30">
|
|
<Field label="Claims" value={fmt.num(provider.claimCount)} mono />
|
|
<Field label="Outstanding AR" value={fmt.usd(provider.outstandingAr)} mono />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Field({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
|
|
return (
|
|
<div>
|
|
<div className="eyebrow">{label}</div>
|
|
<div className={`text-[13px] mt-1 ${mono ? "display mono" : ""}`}>{value}</div>
|
|
</div>
|
|
);
|
|
}
|