57 lines
2.4 KiB
TypeScript
57 lines
2.4 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { Button } from '@/components/ui/shared/Button';
|
||
|
|
import type { PastTreatment } from '@/types/treatment';
|
||
|
|
|
||
|
|
interface TreatmentPreviewCardProps {
|
||
|
|
draft: PastTreatment | null;
|
||
|
|
disabled?: boolean;
|
||
|
|
onPreview: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function TreatmentPreviewCard({ draft, disabled, onPreview }: TreatmentPreviewCardProps) {
|
||
|
|
return (
|
||
|
|
<div className="surface-card p-4 space-y-3">
|
||
|
|
<div className="flex items-center justify-between gap-2">
|
||
|
|
<h3 className="text-sm font-semibold text-text-primary">Treatment preview</h3>
|
||
|
|
<Button type="button" variant="primary" disabled={disabled || !draft} onClick={onPreview}>
|
||
|
|
Preview current draft
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
{!draft ? (
|
||
|
|
<p className="text-sm text-text-muted">Select an appointment to preview its draft.</p>
|
||
|
|
) : (
|
||
|
|
<div className="border border-border/70 rounded-[var(--radius-md)] p-3 bg-background-secondary/40 space-y-2">
|
||
|
|
<div className="flex items-start justify-between gap-2">
|
||
|
|
<p className="text-sm font-medium text-text-primary">{draft.title}</p>
|
||
|
|
<span className="text-xs text-text-muted tabular-nums shrink-0 capitalize">{draft.status}</span>
|
||
|
|
</div>
|
||
|
|
<p className="text-xs text-text-secondary">
|
||
|
|
{draft.cases.length} case{draft.cases.length === 1 ? '' : 's'} ·{' '}
|
||
|
|
{draft.cases.reduce((n, c) => n + (c.attachmentMetas?.length ?? 0), 0)} attachment
|
||
|
|
{draft.cases.reduce((n, c) => n + (c.attachmentMetas?.length ?? 0), 0) === 1 ? '' : 's'}
|
||
|
|
</p>
|
||
|
|
<div className="space-y-2">
|
||
|
|
{draft.cases.slice(0, 2).map((c, idx) => (
|
||
|
|
<div
|
||
|
|
key={c.id}
|
||
|
|
className="rounded-[var(--radius-sm)] border border-border/60 px-2.5 py-2 text-xs text-text-secondary"
|
||
|
|
>
|
||
|
|
<span className="text-text-primary font-medium capitalize">
|
||
|
|
Case {idx + 1}: {c.treatmentType}
|
||
|
|
</span>
|
||
|
|
{c.teeth.length > 0 && (
|
||
|
|
<span className="ml-1 tabular-nums">· Teeth {[...c.teeth].sort().join(', ')}</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
{draft.cases.length > 2 && (
|
||
|
|
<p className="text-xs text-text-muted">+ {draft.cases.length - 2} more case(s)</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|