93 lines
3.2 KiB
TypeScript
93 lines
3.2 KiB
TypeScript
'use client';
|
|
|
|
import { useTranslations } from 'next-intl';
|
|
import { TreatmentHistoryDetailLine } from '@/components/ui/treatment/TreatmentHistoryDetailLine';
|
|
import type { PastTreatment } from '@/types/treatment';
|
|
|
|
interface PastTreatmentsPanelProps {
|
|
items: PastTreatment[];
|
|
loading?: boolean;
|
|
selectedPreviewId?: string | null;
|
|
onSelectTreatment?: (treatment: PastTreatment) => void;
|
|
}
|
|
|
|
export function PastTreatmentsPanel({
|
|
items,
|
|
loading,
|
|
selectedPreviewId,
|
|
onSelectTreatment,
|
|
}: PastTreatmentsPanelProps) {
|
|
const t = useTranslations('treatment');
|
|
|
|
return (
|
|
<div className="surface-card p-4 space-y-3">
|
|
<div>
|
|
<h3 className="text-sm font-semibold text-text-primary">{t('historyTitle')}</h3>
|
|
<p className="text-[11px] text-text-muted mt-0.5">{t('historySubtitle')}</p>
|
|
</div>
|
|
|
|
{loading && <p className="text-sm text-text-muted">{t('loadingHistory')}</p>}
|
|
|
|
{!loading && items.length === 0 && (
|
|
<p className="text-sm text-text-muted">{t('historyEmpty')}</p>
|
|
)}
|
|
|
|
<div className="space-y-1.5 max-h-[min(420px,50vh)] overflow-y-auto pr-1">
|
|
{items.map((treatment) => {
|
|
const isSelected = selectedPreviewId === treatment.id;
|
|
|
|
return (
|
|
<article
|
|
key={treatment.id}
|
|
role="button"
|
|
tabIndex={0}
|
|
onClick={() => onSelectTreatment?.(treatment)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
e.preventDefault();
|
|
onSelectTreatment?.(treatment);
|
|
}
|
|
}}
|
|
className={`
|
|
border rounded-[var(--radius-sm)] px-2 py-1.5 cursor-pointer transition-colors
|
|
focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/45
|
|
${
|
|
isSelected
|
|
? 'border-primary bg-primary/5'
|
|
: 'border-border/60 bg-background-secondary/30 hover:border-border hover:bg-background-secondary/50'
|
|
}
|
|
`}
|
|
>
|
|
<time
|
|
className="text-xs font-medium text-text-primary tabular-nums block"
|
|
dateTime={treatment.treatmentAt}
|
|
>
|
|
{new Date(treatment.treatmentAt).toLocaleDateString(undefined, {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
})}
|
|
</time>
|
|
|
|
{treatment.details.length === 0 ? (
|
|
<p className="text-[10px] text-text-muted mt-1">{t('noDetails')}</p>
|
|
) : (
|
|
<div className="mt-1.5 divide-y divide-border/50 border-t border-border/40 pointer-events-none">
|
|
{treatment.details.map((detail, idx) => (
|
|
<div key={detail.clientId ?? detail.id} className="py-1.5">
|
|
<TreatmentHistoryDetailLine
|
|
detail={detail}
|
|
detailNumber={idx + 1}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</article>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|