Tyler
43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
import type { Provider } from "@/types";
|
|
import { fmt } from "@/lib/format";
|
|
|
|
/**
|
|
* Claims tab content for the ProviderDrawer (SP21 Task 3.1).
|
|
*
|
|
* Reads `provider.recent_claims` — the top-10 claims joined to this
|
|
* provider from the extended `GET /api/config/providers/{npi}` endpoint
|
|
* (Task 1.6). Renders one row per claim (`id` + `patientName` +
|
|
* `billedAmount`) with a "View all claims →" link to the global claims
|
|
* page at the bottom. Falls back to an empty-state line when the
|
|
* provider has no recent claims (e.g. legacy callers that hit the
|
|
* detail endpoint without the recent-claims slice).
|
|
*/
|
|
export function ProviderRecentClaims({ provider }: { provider: Provider }) {
|
|
const claims = provider.recent_claims ?? [];
|
|
if (claims.length === 0) {
|
|
return (
|
|
<div className="text-muted-foreground text-[13px]">No recent claims.</div>
|
|
);
|
|
}
|
|
return (
|
|
<div className="space-y-2">
|
|
{claims.map((c) => (
|
|
<div
|
|
key={c.id}
|
|
className="flex items-center gap-3 py-2 border-b border-border/30 last:border-0"
|
|
>
|
|
<div className="display mono text-[12.5px] w-32 shrink-0">{c.id}</div>
|
|
<div className="flex-1 min-w-0 text-[12.5px] text-muted-foreground truncate">
|
|
{c.patientName ?? "—"}
|
|
</div>
|
|
<div className="display mono text-[13px]">
|
|
{fmt.usd(c.billedAmount)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
<a href="/claims" className="text-[12.5px] text-accent hover:underline">
|
|
View all claims →
|
|
</a>
|
|
</div>
|
|
);
|
|
} |