40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import { useTranslations } from 'next-intl';
|
|
import { TreatmentTypeBadge } from '@/components/ui/treatment/TreatmentTypeBadge';
|
|
import { treatmentTypeLabelFromCatalog } from '@/components/shared/treatmentTypeDisplay';
|
|
import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
|
|
import type { PastTreatmentDetail } from '@/types/treatment';
|
|
|
|
interface TreatmentHistoryDetailLineProps {
|
|
detail: PastTreatmentDetail;
|
|
detailNumber: number;
|
|
treatmentCatalog: TreatmentCatalogEntry[];
|
|
}
|
|
|
|
export function TreatmentHistoryDetailLine({
|
|
detail,
|
|
detailNumber,
|
|
treatmentCatalog,
|
|
}: TreatmentHistoryDetailLineProps) {
|
|
const t = useTranslations('treatment');
|
|
const teeth = detail.teeth.length ? [...detail.teeth].sort().join(', ') : t('teethNone');
|
|
const attachmentCount = detail.attachmentMetas?.length ?? 0;
|
|
|
|
return (
|
|
<div className="flex items-center gap-2 min-w-0 text-[11px] leading-tight">
|
|
<span className="text-text-muted tabular-nums shrink-0">{detailNumber}.</span>
|
|
<TreatmentTypeBadge
|
|
type={detail.treatmentType}
|
|
label={treatmentTypeLabelFromCatalog(detail.treatmentType, treatmentCatalog)}
|
|
/>
|
|
<span className="text-text-secondary truncate min-w-0">{teeth}</span>
|
|
{attachmentCount > 0 && (
|
|
<span className="text-text-muted shrink-0 tabular-nums">
|
|
{t('detailAttachmentCount', { n: attachmentCount })}
|
|
</span>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|