improvement: treatment preview and treatment history components overhauled. draft & completed status for treatment plan completely removed from the flow.

frontend/src/components/ui/treatment/TreatmentPreviewCard.tsx

@@ -2,71 +2,61 @@
 
 import { useTranslations } from 'next-intl';
 import { Button } from '@/components/ui/shared/Button';
-import type { PastTreatment } from '@/types/treatment';
-
-const TREATMENT_TYPE_KEYS = {
-  consultation: 'typeConsultation',
-  filling: 'typeFilling',
-  endo: 'typeEndo',
-  visit: 'typeVisit',
-  hygiene: 'typeHygiene',
-} as const;
+import { TreatmentDetailSummaryRow } from '@/components/ui/treatment/TreatmentDetailSummaryRow';
+import type { LinkedOrganizationOption, PastTreatment } from '@/types/treatment';
 
 interface TreatmentPreviewCardProps {
-  draft: PastTreatment | null;
-  disabled?: boolean;
-  onPreview: () => void;
+  treatment: PastTreatment | null;
+  labDependentCodes: Set<string>;
+  orgs?: LinkedOrganizationOption[];
+  openDisabled?: boolean;
+  onOpen: () => void;
 }
 
-export function TreatmentPreviewCard({ draft, disabled, onPreview }: TreatmentPreviewCardProps) {
+export function TreatmentPreviewCard({
+  treatment,
+  labDependentCodes,
+  orgs,
+  openDisabled = false,
+  onOpen,
+}: TreatmentPreviewCardProps) {
   const t = useTranslations('treatment');
 
-  const attachmentCount = draft
-    ? draft.details.reduce((n, c) => n + (c.attachmentMetas?.length ?? 0), 0)
-    : 0;
-
   return (
     <div className="surface-card p-4 space-y-3">
       <div className="flex items-center justify-between gap-2">
         <h3 className="text-sm font-semibold text-text-primary">{t('previewTitle')}</h3>
-        <Button type="button" variant="primary" disabled={disabled || !draft} onClick={onPreview}>
-          {t('previewDraft')}
+        <Button type="button" variant="primary" disabled={openDisabled || !treatment} onClick={onOpen}>
+          {t('openTreatment')}
         </Button>
       </div>
-      {!draft ? (
+      {!treatment ? (
         <p className="text-sm text-text-muted">{t('selectAppointment')}</p>
       ) : (
         <div className="border border-border/70 rounded-[var(--radius-md)] p-3 bg-background-secondary/40 space-y-2">
           <div className="flex items-start justify-between gap-2">
-            <p className="text-sm font-medium text-text-primary">{draft.title}</p>
-            <span className="text-xs text-text-muted tabular-nums shrink-0 capitalize">{draft.status}</span>
+            <p className="text-sm font-medium text-text-primary">{treatment.title}</p>
+            <time
+              className="text-xs text-text-muted tabular-nums shrink-0"
+              dateTime={treatment.treatmentAt}
+            >
+              {new Date(treatment.treatmentAt).toLocaleDateString()}
+            </time>
           </div>
-          <p className="text-xs text-text-secondary">
-            {t('caseCount', { n: draft.details.length })} ·{' '}
-            {t('attachmentCount', { n: attachmentCount })}
-          </p>
-          <div className="space-y-2">
-            {draft.details.slice(0, 2).map((c, idx) => {
-              const typeKey = TREATMENT_TYPE_KEYS[c.treatmentType as keyof typeof TREATMENT_TYPE_KEYS];
-              const typeLabel = typeKey ? t(typeKey) : c.treatmentType;
-              return (
-              <div
-                key={c.id}
-                className="rounded-[var(--radius-sm)] border border-border/60 px-2.5 py-2 text-xs text-text-secondary"
-              >
-                <span className="text-text-primary font-medium capitalize">
-                  {t('caseSummary', { n: idx + 1, type: typeLabel })}
-                </span>
-                {c.teeth.length > 0 && (
-                  <span className="ml-1 tabular-nums">
-                    {t('teethPrefix')} {[...c.teeth].sort().join(', ')}
-                  </span>
-                )}
-              </div>
-              );
-            })}
-            {draft.details.length > 2 && (
-              <p className="text-xs text-text-muted">{t('moreCases', { n: draft.details.length - 2 })}</p>
+          <div className="space-y-2 max-h-[min(280px,40vh)] overflow-y-auto pr-1">
+            {treatment.details.length === 0 ? (
+              <p className="text-xs text-text-muted">{t('noDetails')}</p>
+            ) : (
+              treatment.details.map((detail, idx) => (
+                <TreatmentDetailSummaryRow
+                  key={detail.clientId ?? detail.id}
+                  detail={detail}
+                  detailNumber={idx + 1}
+                  labDependentCodes={labDependentCodes}
+                  orgs={orgs}
+                  compact
+                />
+              ))
             )}
           </div>
         </div>