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

58 lines
2.0 KiB
TypeScript
Raw Normal View History

'use client';
import { useTranslations } from 'next-intl';
import { DetailLabSendBadge } from '@/components/ui/treatment/DetailLabSendBadge';
import { TreatmentTypeBadge } from '@/components/ui/treatment/TreatmentTypeBadge';
import type { LinkedOrganizationOption, PastTreatmentDetail } from '@/types/treatment';
interface TreatmentDetailSummaryRowProps {
detail: PastTreatmentDetail;
detailNumber: number;
labDependentCodes: Set<string>;
orgs?: LinkedOrganizationOption[];
compact?: boolean;
}
export function TreatmentDetailSummaryRow({
detail,
detailNumber,
labDependentCodes,
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} />
</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>
);
}