Files
dyolink/frontend/src/components/ui/treatment/TreatmentDetailSummaryRow.tsx

65 lines
2.4 KiB
TypeScript

'use client';
import { useTranslations } from 'next-intl';
import { DetailLabSendBadge } from '@/components/ui/treatment/DetailLabSendBadge';
import { TreatmentTypeBadge } from '@/components/ui/treatment/TreatmentTypeBadge';
import { treatmentTypeLabelFromCatalog } from '@/components/ui/treatment/treatmentTypeDisplay';
import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
import type { LinkedOrganizationOption, PastTreatmentDetail } from '@/types/treatment';
interface TreatmentDetailSummaryRowProps {
detail: PastTreatmentDetail;
detailNumber: number;
labDependentCodes: Set<string>;
treatmentCatalog: TreatmentCatalogEntry[];
orgs?: LinkedOrganizationOption[];
compact?: boolean;
}
export function TreatmentDetailSummaryRow({
detail,
detailNumber,
labDependentCodes,
treatmentCatalog,
orgs,
compact = false,
}: TreatmentDetailSummaryRowProps) {
const t = useTranslations('treatment');
const teeth = detail.teeth.length ? [...detail.teeth].sort().join(', ') : t('teethNone');
const attachmentCount = detail.attachmentMetas?.length ?? 0;
return (
<div
className={`rounded-[var(--radius-sm)] border border-border/60 bg-background-secondary/30 ${
compact ? 'px-2.5 py-2' : 'px-3 py-2'
} space-y-1`}
>
<div className="flex flex-wrap items-center justify-between gap-2">
<div className="flex flex-wrap items-center gap-1.5 min-w-0">
<span className={`text-text-muted tabular-nums ${compact ? 'text-[11px]' : 'text-xs'}`}>
{t('detailLabel', { n: detailNumber })}
</span>
<TreatmentTypeBadge
type={detail.treatmentType}
label={treatmentTypeLabelFromCatalog(detail.treatmentType, treatmentCatalog)}
/>
</div>
<DetailLabSendBadge detail={detail} labDependentCodes={labDependentCodes} orgs={orgs} />
</div>
<p className={`text-text-secondary ${compact ? 'text-[11px]' : 'text-xs'}`}>
{t('teethLabel')} {teeth}
</p>
{attachmentCount > 0 && (
<p className={`text-text-muted ${compact ? 'text-[11px]' : 'text-xs'}`}>
{t('detailAttachmentCount', { n: attachmentCount })}
</p>
)}
{detail.notes?.trim() && (
<p className={`text-text-muted line-clamp-2 ${compact ? 'text-[11px]' : 'text-xs'}`}>
{detail.notes}
</p>
)}
</div>
);
}