78 lines
3.0 KiB
TypeScript
78 lines
3.0 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { FileText } from 'lucide-react';
|
||
|
|
import type { PastTreatment } from '@/types/treatment';
|
||
|
|
|
||
|
|
interface PastTreatmentsPanelProps {
|
||
|
|
items: PastTreatment[];
|
||
|
|
loading?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function PastTreatmentsPanel({ items, loading }: PastTreatmentsPanelProps) {
|
||
|
|
return (
|
||
|
|
<div className="surface-card p-4 space-y-3">
|
||
|
|
<div>
|
||
|
|
<h3 className="text-sm font-semibold text-text-primary">Previous treatments</h3>
|
||
|
|
<p className="text-xs text-text-muted mt-0.5">
|
||
|
|
Document preview is not implemented yet; file names are listed for context.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{loading && <p className="text-sm text-text-muted">Loading history...</p>}
|
||
|
|
|
||
|
|
{!loading && items.length === 0 && (
|
||
|
|
<p className="text-sm text-text-muted">No prior treatments for this patient.</p>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<div className="space-y-3 max-h-[min(420px,55vh)] overflow-y-auto pr-1">
|
||
|
|
{items.map((t) => (
|
||
|
|
<article
|
||
|
|
key={t.id}
|
||
|
|
className="border border-border/70 rounded-[var(--radius-md)] p-3 bg-background-secondary/40"
|
||
|
|
>
|
||
|
|
<div className="flex items-start justify-between gap-2">
|
||
|
|
<p className="text-sm font-medium text-text-primary">{t.title}</p>
|
||
|
|
<time className="text-xs text-text-muted tabular-nums shrink-0" dateTime={t.treatmentAt}>
|
||
|
|
{new Date(t.treatmentAt).toLocaleDateString()}
|
||
|
|
</time>
|
||
|
|
</div>
|
||
|
|
<p className="text-xs text-text-secondary mt-1">Status: {t.status}</p>
|
||
|
|
|
||
|
|
{t.records.length > 0 && (
|
||
|
|
<ul className="mt-2 space-y-1.5 text-xs text-text-secondary">
|
||
|
|
{t.records.map((r) => (
|
||
|
|
<li key={r.id}>
|
||
|
|
<span className="text-text-primary font-medium">Record: </span>
|
||
|
|
{r.teeth.length > 0 ? `Teeth ${[...r.teeth].sort().join(', ')}` : 'No teeth tagged'}
|
||
|
|
{r.notes ? ` — ${r.notes}` : ''}
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{t.documents.length > 0 && (
|
||
|
|
<div className="mt-3 pt-2 border-t border-border/50">
|
||
|
|
<p className="text-[11px] uppercase tracking-wide text-text-muted mb-1.5">Attachments</p>
|
||
|
|
<ul className="space-y-1">
|
||
|
|
{t.documents.map((doc) => (
|
||
|
|
<li
|
||
|
|
key={doc.id}
|
||
|
|
className="flex items-center gap-2 text-xs text-text-secondary"
|
||
|
|
>
|
||
|
|
<FileText className="w-3.5 h-3.5 shrink-0 icon-flat" aria-hidden />
|
||
|
|
<span className="truncate">{doc.fileName}</span>
|
||
|
|
<span className="text-text-muted tabular-nums shrink-0">
|
||
|
|
{(doc.sizeBytes / 1024).toFixed(1)} KB
|
||
|
|
</span>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</article>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|