Tyler
115 lines
4.0 KiB
TypeScript
115 lines
4.0 KiB
TypeScript
import { ExternalLink, X } from "lucide-react";
|
|
import { Badge, type BadgeProps } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { fmt } from "@/lib/format";
|
|
import { cn } from "@/lib/utils";
|
|
import type { RemitDetail } from "@/hooks/useRemitDetail";
|
|
|
|
type RemitDrawerHeaderProps = {
|
|
remit: RemitDetail;
|
|
onClose: () => void;
|
|
};
|
|
|
|
/**
|
|
* Remittance status → Badge variant. Mirrors the list-endpoint mapping
|
|
* used by `MatchedRemitCard` (received / posted / reconciled). Unknown
|
|
* statuses (the type is an unconstrained string) fall back to ``muted``
|
|
* so a future backend status doesn't blow up the drawer.
|
|
*
|
|
* received → secondary (in-flight, not yet posted)
|
|
* posted → default (brand-colored, posted to ledger)
|
|
* reconciled → success (matched to claims, settled)
|
|
*/
|
|
const STATUS_VARIANT: Record<string, BadgeProps["variant"]> = {
|
|
received: "secondary",
|
|
posted: "default",
|
|
reconciled: "success",
|
|
};
|
|
|
|
function badgeVariantFor(status: string): BadgeProps["variant"] {
|
|
return STATUS_VARIANT[status] ?? "muted";
|
|
}
|
|
|
|
/**
|
|
* Header band for the remittance detail drawer (RemitDrawer).
|
|
*
|
|
* Mirror of `ClaimDrawerHeader` — same instrument-style eyebrow +
|
|
* mono ID on the left, status badge + total paid on the right, plus a
|
|
* "View raw 835" link below the ID. The close button reuses the same
|
|
* `X` icon at the same position so the two drawers have visually
|
|
* identical chrome.
|
|
*
|
|
* The "View raw 835" link points at `/api/remittances/{id}/raw` — the
|
|
* backend's text/835 endpoint for inspecting the source X12 file. The
|
|
* fallback (when the backend doesn't yet expose that endpoint) is the
|
|
* detail JSON endpoint so the link never 404s on a misconfigured
|
|
* deployment.
|
|
*/
|
|
export function RemitDrawerHeader({ remit, onClose }: RemitDrawerHeaderProps) {
|
|
const rawLink = `/api/remittances/${encodeURIComponent(remit.id)}/raw`;
|
|
|
|
return (
|
|
<header
|
|
className={cn(
|
|
"flex items-start justify-between gap-4 px-6 py-5",
|
|
"border-b border-[color:var(--m-border-heavy)]",
|
|
"bg-[color:var(--m-surface)]"
|
|
)}
|
|
data-testid="remit-drawer-header"
|
|
>
|
|
{/* Left: eyebrow + mono remit ID + raw link */}
|
|
<div className="flex min-w-0 flex-col gap-1">
|
|
<span className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-[color:var(--m-ink-tertiary)]">
|
|
Remittance
|
|
</span>
|
|
<span
|
|
data-testid="header-id"
|
|
className="font-mono text-2xl font-semibold tracking-tight text-[color:var(--m-ink-primary)]"
|
|
style={{ fontFamily: "var(--m-font-mono)" }}
|
|
>
|
|
{remit.id}
|
|
</span>
|
|
<a
|
|
href={rawLink}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
data-testid="header-raw-link"
|
|
className="mt-1 inline-flex w-fit items-center gap-1 text-[11px] text-[color:var(--m-ink-tertiary)] hover:text-[color:var(--m-ink-secondary)]"
|
|
>
|
|
View raw 835
|
|
<ExternalLink className="h-3 w-3" strokeWidth={1.75} aria-hidden />
|
|
</a>
|
|
</div>
|
|
|
|
{/* Right: status badge + total paid + close */}
|
|
<div className="flex items-start gap-4">
|
|
<div className="flex flex-col items-end gap-1">
|
|
<Badge
|
|
variant={badgeVariantFor(remit.status)}
|
|
data-testid="header-status"
|
|
className="uppercase tracking-[0.14em]"
|
|
>
|
|
{remit.status}
|
|
</Badge>
|
|
<span
|
|
data-testid="header-paid"
|
|
className="font-mono text-lg tabular-nums text-[color:var(--m-ink-primary)]"
|
|
style={{ fontFamily: "var(--m-font-mono)" }}
|
|
>
|
|
{fmt.usdPrecise(remit.paidAmount)}
|
|
</span>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={onClose}
|
|
aria-label="Close drawer"
|
|
data-testid="header-close"
|
|
>
|
|
<X className="h-4 w-4" strokeWidth={1.75} />
|
|
</Button>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|