backend/prisma/migrations/20260628170000_remove_treatment_status/migration.sql

@@ -0,0 +1,8 @@
+-- DropIndex
+DROP INDEX IF EXISTS "treatments_organizationId_status_idx";
+
+-- AlterTable
+ALTER TABLE "treatments" DROP COLUMN "status";
+
+-- DropEnum
+DROP TYPE "TreatmentStatus";

backend/prisma/schema.prisma

@@ -114,11 +114,6 @@ model Appointment {
   @@map("appointments")
 }
 
-enum TreatmentStatus {
-  DRAFT
-  COMPLETED
-}
-
 enum LabTaskStatus {
   PENDING
   IN_PROGRESS
@@ -132,7 +127,6 @@ model Treatment {
   appointmentId  String?  @unique
   providerUserId String
   title          String
-  status         TreatmentStatus @default(DRAFT)
   treatmentAt    DateTime
 
   organization Organization    @relation(fields: [organizationId], references: [id], onDelete: Cascade)
@@ -145,7 +139,6 @@ model Treatment {
   updatedAt DateTime @updatedAt
 
   @@index([patientId, treatmentAt])
-  @@index([organizationId, status])
   @@map("treatments")
 }
 

backend/src/modules/treatments/treatment.utils.ts

@@ -1,5 +1,3 @@
-import { TreatmentStatus } from '@prisma/client';
-
 const FDI_TOOTH_IDS = new Set([
   '11', '12', '13', '14', '15', '16', '17', '18',
   '21', '22', '23', '24', '25', '26', '27', '28',
@@ -39,7 +37,3 @@ export function generateTreatmentTitle(
 
   return parts.join(' · ');
 }
-
-export function mapTreatmentStatusForApi(status: TreatmentStatus): string {
-  return status === TreatmentStatus.DRAFT ? 'draft' : 'completed';
-}

backend/src/modules/treatments/treatments.controller.ts

@@ -40,7 +40,7 @@ export class TreatmentsController {
   }
 
   @Get('patients/:patientId/history')
-  @ApiOperation({ summary: 'List completed treatments for a patient (TAB_TREATMENT_READ)' })
+  @ApiOperation({ summary: 'List treatments for a patient (draft and completed, TAB_TREATMENT_READ)' })
   listPatientHistory(
     @Param('patientId') patientId: string,
     @Query('limit', new ParseIntPipe({ optional: true })) limit = 20,

backend/src/modules/treatments/treatments.service.ts

@@ -4,7 +4,7 @@ import {
   Injectable,
   NotFoundException,
 } from '@nestjs/common';
-import { LinkStatus, TreatmentStatus } from '@prisma/client';
+import { LinkStatus } from '@prisma/client';
 import { createReadStream, existsSync, mkdirSync } from 'fs';
 import { join } from 'path';
 import { randomUUID } from 'crypto';
@@ -17,7 +17,6 @@ import {
 } from './dto/treatment.dto';
 import {
   generateTreatmentTitle,
-  mapTreatmentStatusForApi,
   normalizeTeeth,
 } from './treatment.utils';
 
@@ -117,7 +116,7 @@ export class TreatmentsService {
       where: {
         patientId,
         organizationId,
-        status: TreatmentStatus.COMPLETED,
+        details: { some: {} },
       },
       include: treatmentInclude,
       orderBy: [{ treatmentAt: 'desc' }],
@@ -144,7 +143,6 @@ export class TreatmentsService {
       where: {
         appointmentId: appointment.id,
         organizationId,
-        status: TreatmentStatus.DRAFT,
       },
       include: treatmentInclude,
     });
@@ -196,7 +194,6 @@ export class TreatmentsService {
               treatmentAt: appointment.startAt,
               patientId: appointment.patientId,
               providerUserId: appointment.providerUserId,
-              status: TreatmentStatus.DRAFT,
             },
           })
         : await tx.treatment.create({
@@ -206,7 +203,6 @@ export class TreatmentsService {
               appointmentId: appointment.id,
               providerUserId: appointment.providerUserId,
               title,
-              status: TreatmentStatus.DRAFT,
               treatmentAt: appointment.startAt,
             },
           });
@@ -314,7 +310,7 @@ export class TreatmentsService {
     );
 
     const treatment = await this.prisma.treatment.findFirst({
-      where: { appointmentId: appointment.id, organizationId, status: TreatmentStatus.DRAFT },
+      where: { appointmentId: appointment.id, organizationId },
       select: { id: true },
     });
 
@@ -605,7 +601,6 @@ export class TreatmentsService {
     patientId: string;
     appointmentId: string | null;
     title: string;
-    status: TreatmentStatus;
     treatmentAt: Date;
     details: Array<{
       id: string;
@@ -660,7 +655,6 @@ export class TreatmentsService {
       appointmentId: treatment.appointmentId,
       title: treatment.title,
       treatmentAt: treatment.treatmentAt.toISOString(),
-      status: mapTreatmentStatusForApi(treatment.status),
       details: treatment.details.map((d) => this.mapDetail(d)),
       labCases: treatment.labCases.map((lc) => this.mapLabCase(lc)),
       documents,

frontend/messages/en.json

@@ -416,7 +416,6 @@
     "loadingAppointments": "Loading appointments…",
     "selectDayWithAppointment": "Select a day with at least one appointment.",
     "confirmDiscard": "You have unsaved changes. Discard them and continue?",
-    "successDraftSaved": "Treatment draft saved.",
     "errorChooseOrg": "Choose at least one active organization to send this case.",
     "successCaseSent": "Case sent to selected organizations.",
     "successFilesUploaded": "{count} file(s) uploaded successfully.",
@@ -428,7 +427,7 @@
     "errorSaveDraft": "Failed to save treatment draft.",
     "errorSendCase": "Failed to send case.",
     "errorCaseMustSave": "Case must be saved before sending.",
-    "draftTitle": "Draft · {patientName}",
+    "treatmentPlanTitle": "Treatment · {patientName}",
     "hiddenMessage": "Appointments are hidden.",
     "showAppointments": "Show appointments",
     "appointmentsTitle": "My appointments",
@@ -483,36 +482,30 @@
     "successLabShipmentsSaved": "Lab shipments saved.",
     "errorSaveLabShipments": "Failed to save lab shipments.",
     "errorLabCaseNeedsDetails": "Select at least one treatment detail for this shipment.",
-    "saveDraft": "Save treatment draft",
     "unsavedChanges": "Unsaved changes",
-    "draftSaved": "Draft saved",
     "saveStatusSaving": "Saving…",
     "saveStatusSaved": "All changes saved",
     "saveStatusError": "Could not save — check your connection",
     "sendSavesFirst": "Sending is per case and saves first automatically.",
     "historyTitle": "Previous treatments",
-    "historySubtitle": "Completed treatments for this patient. Each case is listed separately.",
+    "historySubtitle": "Click a treatment to preview it. Use Open in the preview card to load it in the workspace.",
     "loadingHistory": "Loading history…",
-    "historyEmpty": "No prior treatments for this patient.",
+    "historyEmpty": "No other treatments recorded for this patient yet.",
-    "statusLabel": "Status:",
+    "historyDetailLabel": "Detail {n} · {type}",
-    "historyCaseLabel": "Case {n} · {type}",
+    "previewTitle": "Treatment preview",
+    "openTreatment": "Open",
+    "selectAppointment": "Select an appointment to preview its treatment.",
+    "detailCount": "{n} detail(s)",
+    "detailSummary": "Detail {n}: {type}",
+    "detailAttachmentCount": "{n, plural, one {# file} other {# files}}",
+    "detailNotSentToLab": "Not sent to lab",
+    "detailPendingLabSend": "This lab detail has not been sent yet.",
     "teethLabel": "Teeth:",
     "teethNone": "None selected",
-    "reviewDetails": "Review details",
+    "historicalReadonlyNotice": "You are viewing a past treatment (read-only).",
-    "previewTitle": "Treatment preview",
+    "errorNoAppointmentForTreatment": "This treatment has no linked appointment and cannot be opened.",
-    "previewDraft": "Preview current draft",
-    "selectAppointment": "Select an appointment to preview its draft.",
-    "caseCount": "{n} case(s)",
-    "attachmentCount": "{n} attachment(s)",
-    "caseSummary": "Case {n}: {type}",
-    "teethPrefix": "· Teeth",
-    "moreCases": "+ {n} more case(s)",
-    "previewDialogTitle": "Treatment preview",
-    "previewDialogSubtitle": "Review cases, attachments, and send destinations.",
-    "previewDialogSubtitlePhase4": "Review treatment details and attachments.",
-    "previewLabDispatchHint": "Use the lab dispatch panel in the workspace to send work to labs.",
     "noCases": "No cases in this treatment.",
-    "noDetails": "No treatment details in this draft.",
+    "noDetails": "No treatment details yet.",
     "typeLabel": "Type:",
     "commentsLabel": "Comments:",
     "commentsEmpty": "Comments: —",

frontend/messages/fa.json

@@ -416,7 +416,6 @@
     "loadingAppointments": "در حال بارگذاری نوبت‌ها...",
     "selectDayWithAppointment": "روزی را انتخاب کنید که حداقل یک نوبت داشته باشد.",
     "confirmDiscard": "تغییرات ذخیره‌نشده دارید. آنها را کنار بگذارید و ادامه دهید؟",
-    "successDraftSaved": "پیش‌نویس درمان ذخیره شد.",
     "errorChooseOrg": "حداقل یک سازمان فعال را برای ارسال این پرونده انتخاب کنید.",
     "successCaseSent": "پرونده به سازمان‌های انتخاب شده ارسال شد.",
     "successFilesUploaded": "{count} فایل با موفقیت بارگذاری شد.",
@@ -428,7 +427,7 @@
     "errorSaveDraft": "ذخیره پیش‌نویس درمان ناموفق بود.",
     "errorSendCase": "ارسال پرونده ناموفق بود.",
     "errorCaseMustSave": "پرونده باید قبل از ارسال ذخیره شود.",
-    "draftTitle": "پیش‌نویس · {patientName}",
+    "treatmentPlanTitle": "درمان · {patientName}",
     "hiddenMessage": "نوبت‌ها پنهان هستند.",
     "showAppointments": "نمایش نوبت‌ها",
     "appointmentsTitle": "نوبت‌های من",
@@ -483,35 +482,29 @@
     "successLabShipmentsSaved": "محموله‌های لاب ذخیره شد.",
     "errorSaveLabShipments": "ذخیره محموله‌های لاب ناموفق بود.",
     "errorLabCaseNeedsDetails": "حداقل یک جزئیات درمان برای این محموله انتخاب کنید.",
-    "saveDraft": "ذخیره پیش‌نویس درمان",
     "unsavedChanges": "تغییرات ذخیره‌نشده",
-    "draftSaved": "پیش‌نویس ذخیره شد",
     "saveStatusSaving": "در حال ذخیره…",
     "saveStatusSaved": "همه تغییرات ذخیره شد",
     "saveStatusError": "ذخیره ناموفق بود — اتصال را بررسی کنید",
     "sendSavesFirst": "ارسال برای هر پرونده به صورت جداگانه است و ابتدا به طور خودکار ذخیره می‌کند.",
     "historyTitle": "درمان‌های قبلی",
-    "historySubtitle": "درمان‌های تکمیل شده برای این بیمار. هر پرونده به طور جداگانه فهرست شده است.",
+    "historySubtitle": "برای پیش‌نمایش روی یک درمان کلیک کنید. از دکمه باز کردن در کارت پیش‌نمایش برای بارگذاری در فضای کاری استفاده کنید.",
     "loadingHistory": "در حال بارگذاری تاریخچه...",
-    "historyEmpty": "هیچ درمان قبلی برای این بیمار وجود ندارد.",
+    "historyEmpty": "هیچ درمان دیگری برای این بیمار ثبت نشده است.",
-    "statusLabel": "وضعیت:",
+    "historyDetailLabel": "جزئیات {n} · {type}",
-    "historyCaseLabel": "پرونده {n} · {type}",
+    "previewTitle": "پیش‌نمایش درمان",
+    "openTreatment": "باز کردن",
+    "selectAppointment": "یک نوبت را برای پیش‌نمایش درمان انتخاب کنید.",
+    "detailCount": "{n} جزئیات",
+    "detailSummary": "جزئیات {n}: {type}",
+    "detailAttachmentCount": "{n} فایل",
+    "detailNotSentToLab": "به لاب ارسال نشده",
+    "detailPendingLabSend": "این جزئیات لاب هنوز ارسال نشده است.",
+    "historicalReadonlyNotice": "در حال مشاهده یک درمان گذشته (فقط خواندنی) هستید.",
+    "errorNoAppointmentForTreatment": "این درمان نوبت مرتبطی ندارد و قابل باز کردن نیست.",
     "teethLabel": "دندان‌ها:",
     "teethNone": "هیچکدام انتخاب نشده",
-    "reviewDetails": "بررسی جزئیات",
+    "noDetails": "هنوز جزئیات درمانی وجود ندارد.",
-    "previewTitle": "پیش‌نمایش درمان",
-    "previewDraft": "پیش‌نمایش پیش‌نویس فعلی",
-    "selectAppointment": "یک نوبت را برای پیش‌نمایش پیش‌نویس آن انتخاب کنید.",
-    "caseCount": "{n} پرونده",
-    "attachmentCount": "{n} پیوست",
-    "caseSummary": "پرونده {n}: {type}",
-    "teethPrefix": "· دندان‌ها",
-    "moreCases": "+ {n} پرونده دیگر",
-    "previewDialogTitle": "پیش‌نمایش درمان",
-    "previewDialogSubtitle": "بررسی پرونده‌ها، پیوست‌ها و مقصدهای ارسال.",
-    "previewDialogSubtitlePhase4": "بررسی جزئیات درمان و پیوست‌ها.",
-    "previewLabDispatchHint": "برای ارسال کار به لابراتوار از بخش ارسال لاب در فضای کاری استفاده کنید.",
-    "noDetails": "جزئیات درمانی در این پیش‌نویس وجود ندارد.",
     "noCases": "هیچ پرونده‌ای در این درمان وجود ندارد.",
     "typeLabel": "نوع:",
     "commentsLabel": "نظرات:",

frontend/messages/nl.json

@@ -416,7 +416,6 @@
     "loadingAppointments": "Afspraken laden...",
     "selectDayWithAppointment": "Selecteer een dag met ten minste één afspraak.",
     "confirmDiscard": "U heeft niet-opgeslagen wijzigingen. Wilt u deze negeren en doorgaan?",
-    "successDraftSaved": "Behandelconcept opgeslagen.",
     "errorChooseOrg": "Kies ten minste één actieve organisatie om deze case te verzenden.",
     "successCaseSent": "Case verzonden naar geselecteerde organisaties.",
     "successFilesUploaded": "{count} bestand(en) succesvol geüpload.",
@@ -428,7 +427,7 @@
     "errorSaveDraft": "Behandelconcept opslaan mislukt.",
     "errorSendCase": "Case verzenden mislukt.",
     "errorCaseMustSave": "Case moet worden opgeslagen voor verzending.",
-    "draftTitle": "Concept · {patientName}",
+    "treatmentPlanTitle": "Behandeling · {patientName}",
     "hiddenMessage": "Afspraken zijn verborgen.",
     "showAppointments": "Afspraken tonen",
     "appointmentsTitle": "Mijn afspraken",
@@ -483,36 +482,30 @@
     "successLabShipmentsSaved": "Labzendingen opgeslagen.",
     "errorSaveLabShipments": "Labzendingen opslaan mislukt.",
     "errorLabCaseNeedsDetails": "Selecteer minimaal één behandeldetail voor deze zending.",
-    "saveDraft": "Behandelconcept opslaan",
     "unsavedChanges": "Niet-opgeslagen wijzigingen",
-    "draftSaved": "Concept opgeslagen",
     "saveStatusSaving": "Opslaan…",
     "saveStatusSaved": "Alle wijzigingen opgeslagen",
     "saveStatusError": "Opslaan mislukt — controleer uw verbinding",
     "sendSavesFirst": "Verzenden is per case en slaat eerst automatisch op.",
     "historyTitle": "Eerdere behandelingen",
-    "historySubtitle": "Voltooide behandelingen voor deze patiënt. Elke case wordt afzonderlijk weergegeven.",
+    "historySubtitle": "Klik op een behandeling om te bekijken. Gebruik Open in de voorbeeldkkaart om deze in de werkruimte te laden.",
     "loadingHistory": "Geschiedenis laden...",
-    "historyEmpty": "Geen eerdere behandelingen voor deze patiënt.",
+    "historyEmpty": "Geen andere behandelingen voor deze patiënt geregistreerd.",
-    "statusLabel": "Status:",
+    "historyDetailLabel": "Detail {n} · {type}",
-    "historyCaseLabel": "Case {n} · {type}",
+    "previewTitle": "Behandelvoorbeeld",
+    "openTreatment": "Openen",
+    "selectAppointment": "Selecteer een afspraak om de behandeling te bekijken.",
+    "detailCount": "{n} detail(s)",
+    "detailSummary": "Detail {n}: {type}",
+    "detailAttachmentCount": "{n, plural, one {# bestand} other {# bestanden}}",
+    "detailNotSentToLab": "Niet naar lab verzonden",
+    "detailPendingLabSend": "Dit labdetail is nog niet verzonden.",
+    "historicalReadonlyNotice": "U bekijkt een eerdere behandeling (alleen-lezen).",
+    "errorNoAppointmentForTreatment": "Deze behandeling heeft geen gekoppelde afspraak en kan niet worden geopend.",
     "teethLabel": "Tanden:",
     "teethNone": "Geen geselecteerd",
-    "reviewDetails": "Details bekijken",
-    "previewTitle": "Behandelvoorbeeld",
-    "previewDraft": "Bekijk huidig concept",
-    "selectAppointment": "Selecteer een afspraak om het concept te bekijken.",
-    "caseCount": "{n} case(s)",
-    "attachmentCount": "{n} bijlage(n)",
-    "caseSummary": "Case {n}: {type}",
-    "teethPrefix": "· Tanden",
-    "moreCases": "+ {n} meer case(s)",
-    "previewDialogTitle": "Behandelvoorbeeld",
-    "previewDialogSubtitle": "Bekijk casussen, bijlagen en verzendbestemmingen.",
-    "previewDialogSubtitlePhase4": "Bekijk behandeldetails en bijlagen.",
-    "previewLabDispatchHint": "Gebruik het lab-dispatchpaneel in de werkruimte om werk naar labs te sturen.",
     "noCases": "Geen casussen in deze behandeling.",
-    "noDetails": "Geen behandeldetails in dit concept.",
+    "noDetails": "Nog geen behandeldetails.",
     "typeLabel": "Type:",
     "commentsLabel": "Opmerkingen:",
     "commentsEmpty": "Opmerkingen: —",

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

@@ -0,0 +1,43 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { CaseSentLabel } from '@/components/ui/treatment/CaseSentLabel';
+import { labNotSentBadgeClass, labSentBadgeClass } from '@/components/ui/treatment/treatmentStatusStyles';
+import type { LinkedOrganizationOption, PastTreatmentDetail } from '@/types/treatment';
+
+interface DetailLabSendBadgeProps {
+  detail: Pick<
+    PastTreatmentDetail,
+    'treatmentType' | 'sentAt' | 'sends' | 'destinationOrganizationId'
+  >;
+  labDependentCodes: Set<string>;
+  orgs?: LinkedOrganizationOption[];
+  className?: string;
+}
+
+export function DetailLabSendBadge({
+  detail,
+  labDependentCodes,
+  orgs,
+  className = '',
+}: DetailLabSendBadgeProps) {
+  const t = useTranslations('treatment');
+
+  if (!labDependentCodes.has(detail.treatmentType)) {
+    return null;
+  }
+
+  if (detail.sentAt) {
+    return (
+      <CaseSentLabel
+        treatmentCase={detail}
+        orgs={orgs}
+        className={`${labSentBadgeClass} ${className}`.trim()}
+      />
+    );
+  }
+
+  return (
+    <span className={`${labNotSentBadgeClass} ${className}`.trim()}>{t('detailNotSentToLab')}</span>
+  );
+}

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

@@ -1,39 +1,29 @@
 'use client';
 
 import { useTranslations } from 'next-intl';
-import { FileText } from 'lucide-react';
+import { TreatmentHistoryDetailLine } from '@/components/ui/treatment/TreatmentHistoryDetailLine';
 import type { PastTreatment } from '@/types/treatment';
-import { CaseSentLabel } from '@/components/ui/treatment/CaseSentLabel';
-
-const TREATMENT_TYPE_KEYS = {
-  consultation: 'typeConsultation',
-  filling: 'typeFilling',
-  endo: 'typeEndo',
-  visit: 'typeVisit',
-  hygiene: 'typeHygiene',
-} as const;
 
 interface PastTreatmentsPanelProps {
   items: PastTreatment[];
   loading?: boolean;
-  onReviewTreatment?: (treatment: PastTreatment) => void;
+  selectedPreviewId?: string | null;
+  onSelectTreatment?: (treatment: PastTreatment) => void;
 }
 
 export function PastTreatmentsPanel({
   items,
   loading,
-  onReviewTreatment,
+  selectedPreviewId,
+  onSelectTreatment,
 }: PastTreatmentsPanelProps) {
   const t = useTranslations('treatment');
-  const tCommon = useTranslations('common');
 
   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">
+        <p className="text-[11px] text-text-muted mt-0.5">{t('historySubtitle')}</p>
-          {t('historySubtitle')}
-        </p>
       </div>
 
       {loading && <p className="text-sm text-text-muted">{t('loadingHistory')}</p>}
@@ -42,95 +32,60 @@ export function PastTreatmentsPanel({
         <p className="text-sm text-text-muted">{t('historyEmpty')}</p>
       )}
 
-      <div className="space-y-3 max-h-[min(420px,50vh)] overflow-y-auto pr-1">
+      <div className="space-y-1.5 max-h-[min(420px,50vh)] overflow-y-auto pr-1">
-        {items.map((treatment) => (
+        {items.map((treatment) => {
+          const isSelected = selectedPreviewId === treatment.id;
+
+          return (
             <article
               key={treatment.id}
-            className="border border-border/70 rounded-[var(--radius-md)] p-2.5 bg-background-secondary/40 space-y-2"
+              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'
+                }
+              `}
             >
-            <div className="flex items-start justify-between gap-2">
-              <div className="min-w-0">
-                <p className="text-sm font-medium text-text-primary truncate">{treatment.title}</p>
-                <p className="text-[11px] text-text-secondary capitalize mt-0.5">
-                  {t('statusLabel')} {treatment.status}
-                </p>
-              </div>
               <time
-                className="text-[11px] text-text-muted tabular-nums shrink-0"
+                className="text-xs font-medium text-text-primary tabular-nums block"
                 dateTime={treatment.treatmentAt}
               >
-                {new Date(treatment.treatmentAt).toLocaleDateString()}
+                {new Date(treatment.treatmentAt).toLocaleDateString(undefined, {
-              </time>
+                  year: 'numeric',
-            </div>
+                  month: 'short',
-
+                  day: 'numeric',
-            <div className="space-y-1.5">
-              {treatment.details.map((c, idx) => {
-                const attachments = c.attachmentMetas ?? [];
-                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="border border-border/60 rounded-[var(--radius-sm)] px-2.5 py-2 bg-background-secondary/30 space-y-1"
-                  >
-                    <div className="flex items-center justify-between gap-2">
-                      <p className="text-xs font-medium text-text-primary capitalize">
-                        {t('historyCaseLabel', { n: idx + 1, type: typeLabel })}
-                      </p>
-                      {c.sentAt && (
-                        <CaseSentLabel
-                          treatmentCase={c}
-                          className="text-[10px] text-text-muted shrink-0 text-right"
-                        />
-                      )}
-                    </div>
-                    <p className="text-[11px] text-text-secondary">
-                      {t('teethLabel')} {c.teeth.length ? [...c.teeth].sort().join(', ') : t('teethNone')}
-                    </p>
-                    {c.notes?.trim() && (
-                      <p className="text-[11px] text-text-muted line-clamp-2">{c.notes}</p>
-                    )}
-                    <div>
-                      <p className="text-[10px] uppercase tracking-wide text-text-muted mb-1">
-                        {t('attachments')}
-                      </p>
-                      {attachments.length === 0 ? (
-                        <p className="text-[11px] text-text-muted">{tCommon('none')}</p>
-                      ) : (
-                        <ul className="space-y-0.5">
-                          {attachments.map((doc) => (
-                            <li
-                              key={doc.id}
-                              className="flex items-center gap-1.5 text-[11px] text-text-secondary"
-                            >
-                              <FileText className="w-3 h-3 shrink-0 icon-flat" aria-hidden />
-                              <span className="truncate">{doc.fileName}</span>
-                              <span className="text-text-muted tabular-nums shrink-0">
-                                {(doc.sizeBytes / 1024).toFixed(1)} KB
-                              </span>
-                            </li>
-                          ))}
-                        </ul>
-                      )}
-                    </div>
-                  </div>
-                );
                 })}
-            </div>
+              </time>
 
-            {onReviewTreatment && (
+              {treatment.details.length === 0 ? (
-              <div className="pt-1 flex justify-end">
+                <p className="text-[10px] text-text-muted mt-1">{t('noDetails')}</p>
-                <button
+              ) : (
-                  type="button"
+                <div className="mt-1.5 divide-y divide-border/50 border-t border-border/40 pointer-events-none">
-                  onClick={() => onReviewTreatment(treatment)}
+                  {treatment.details.map((detail, idx) => (
-                  className="text-xs text-primary hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 rounded-[var(--radius-sm)] px-1"
+                    <div key={detail.clientId ?? detail.id} className="py-1.5">
-                >
+                      <TreatmentHistoryDetailLine
-                  {t('reviewDetails')}
+                        detail={detail}
-                </button>
+                        detailNumber={idx + 1}
+                      />
+                    </div>
+                  ))}
                 </div>
               )}
             </article>
-        ))}
+          );
+        })}
       </div>
     </div>
   );

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

@@ -0,0 +1,57 @@
+'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>
+  );
+}

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

@@ -4,6 +4,11 @@ import { useRef } from 'react';
 import { useTranslations } from 'next-intl';
 import { Button } from '@/components/ui/shared/Button';
 import { Dropdown } from '@/components/ui/shared/Dropdown';
+import {
+  autosaveStatusClass,
+  labPendingBannerClass,
+  labSentBannerClass,
+} from '@/components/ui/treatment/treatmentStatusStyles';
 import type { TreatmentDetailDraft } from '@/types/treatment';
 import { TREATMENT_TYPE_COLORS, treatmentTypeLabelKey } from '@/components/ui/treatment/treatmentTypeDisplay';
 
@@ -13,12 +18,12 @@ interface TreatmentDetailsEditorProps {
   onActiveDetailChange: (id: string) => void;
   onDetailsChange: (details: TreatmentDetailDraft[]) => void;
   isDetailLocked: (detail: TreatmentDetailDraft) => boolean;
+  labDependentCodes: Set<string>;
   disabled: boolean;
   canEdit: boolean;
   saveStatus: 'idle' | 'dirty' | 'saving' | 'saved' | 'error';
   uploadBusy: boolean;
   onAddDetail: () => void;
-  onPreview: () => void;
   onUploadFiles: (files: FileList | null) => void;
 }
 
@@ -28,16 +33,15 @@ export function TreatmentDetailsEditor({
   onActiveDetailChange,
   onDetailsChange,
   isDetailLocked,
+  labDependentCodes,
   disabled,
   canEdit,
   saveStatus,
   uploadBusy,
   onAddDetail,
-  onPreview,
   onUploadFiles,
 }: TreatmentDetailsEditorProps) {
   const t = useTranslations('treatment');
-  const tCommon = useTranslations('common');
   const attachmentInputRef = useRef<HTMLInputElement>(null);
   const activeDetail = details.find((d) => d.clientId === activeDetailId) ?? details[0];
 
@@ -46,6 +50,8 @@ export function TreatmentDetailsEditor({
   const locked = isDetailLocked(activeDetail);
   const readOnly = disabled || locked;
   const treatmentTypeTextColor = TREATMENT_TYPE_COLORS[activeDetail.treatmentType];
+  const isLabDependent = labDependentCodes.has(activeDetail.treatmentType);
+  const showPendingLabHint = isLabDependent && !locked && !readOnly;
 
   return (
     <div className="surface-card p-4 space-y-4">
@@ -54,15 +60,10 @@ export function TreatmentDetailsEditor({
           <h3 className="text-sm font-semibold text-text-primary">{t('detailsTitle')}</h3>
           <p className="text-xs text-text-muted mt-0.5">{t('detailsSubtitle')}</p>
         </div>
-        <div className="flex flex-wrap items-center gap-2">
-          <Button type="button" variant="secondary" disabled={!canEdit || disabled} onClick={onPreview}>
-            {tCommon('preview')}
-          </Button>
         <Button type="button" variant="primary" disabled={!canEdit || disabled} onClick={onAddDetail}>
           {t('addDetail')}
         </Button>
       </div>
-      </div>
 
       <div className="flex flex-wrap gap-2">
         {details.map((d, idx) => (
@@ -88,9 +89,10 @@ export function TreatmentDetailsEditor({
 
       <div className="space-y-4 border border-border/60 rounded-[var(--radius-md)] p-4 bg-background-secondary/30">
         {locked && (
-          <p className="text-xs text-text-muted rounded-[var(--radius-sm)] border border-border/50 bg-background-secondary/50 px-2 py-1.5">
+          <p className={labSentBannerClass}>{t('detailLockedInShipment')}</p>
-            {t('detailLockedInShipment')}
+        )}
-          </p>
+        {showPendingLabHint && (
+          <p className={labPendingBannerClass}>{t('detailPendingLabSend')}</p>
         )}
 
         <label className="block text-xs font-medium text-text-secondary">
@@ -173,9 +175,7 @@ export function TreatmentDetailsEditor({
 
       {canEdit && saveStatus !== 'idle' && (
         <p
-          className={`text-xs pt-2 border-t border-border/60 ${
+          className={`text-xs pt-2 border-t border-border/60 ${autosaveStatusClass(saveStatus)}`}
-            saveStatus === 'error' ? 'text-red-500' : 'text-text-muted'
-          }`}
           role="status"
           aria-live="polite"
         >

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

@@ -0,0 +1,32 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { TreatmentTypeBadge } from '@/components/ui/treatment/TreatmentTypeBadge';
+import type { PastTreatmentDetail } from '@/types/treatment';
+
+interface TreatmentHistoryDetailLineProps {
+  detail: PastTreatmentDetail;
+  detailNumber: number;
+}
+
+export function TreatmentHistoryDetailLine({
+  detail,
+  detailNumber,
+}: 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} />
+      <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>
+  );
+}

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

@@ -1,106 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import { useTranslations } from 'next-intl';
-import { FileText } from 'lucide-react';
-import { treatmentsApi } from '@/lib/api/treatments';
-import type { TreatmentAttachmentMeta } from '@/types/treatment';
-
-interface TreatmentLatestAttachmentPreviewProps {
-  attachment?: TreatmentAttachmentMeta | null;
-  className?: string;
-}
-
-function isImageMime(mimeType: string): boolean {
-  return mimeType.startsWith('image/');
-}
-
-function isPdfMime(mimeType: string): boolean {
-  return mimeType === 'application/pdf';
-}
-
-export function TreatmentLatestAttachmentPreview({
-  attachment,
-  className = '',
-}: TreatmentLatestAttachmentPreviewProps) {
-  const tCommon = useTranslations('common');
-  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
-  const [loadFailed, setLoadFailed] = useState(false);
-  const [loading, setLoading] = useState(false);
-
-  const canRenderPreview = attachment
-    ? isImageMime(attachment.mimeType) || isPdfMime(attachment.mimeType)
-    : false;
-
-  useEffect(() => {
-    if (!attachment || !canRenderPreview) {
-      setPreviewUrl(null);
-      setLoadFailed(false);
-      setLoading(false);
-      return;
-    }
-
-    let cancelled = false;
-    let objectUrl: string | null = null;
-
-    setLoading(true);
-    setLoadFailed(false);
-    setPreviewUrl(null);
-
-    void treatmentsApi
-      .getAttachmentFileBlob(attachment.id)
-      .then((blob) => {
-        if (cancelled) return;
-        objectUrl = URL.createObjectURL(blob);
-        setPreviewUrl(objectUrl);
-      })
-      .catch(() => {
-        if (!cancelled) setLoadFailed(true);
-      })
-      .finally(() => {
-        if (!cancelled) setLoading(false);
-      });
-
-    return () => {
-      cancelled = true;
-      if (objectUrl) URL.revokeObjectURL(objectUrl);
-    };
-  }, [attachment, canRenderPreview]);
-
-  return (
-    <div
-      className={`aspect-square w-[6rem] shrink-0 overflow-hidden rounded-[var(--radius-md)] border border-border/70 bg-background-secondary/50 ${className}`}
-      title={attachment?.fileName}
-    >
-      {!attachment ? (
-        <div className="flex h-full w-full items-center justify-center text-[10px] text-text-muted">
-          {tCommon('none')}
-        </div>
-      ) : loading ? (
-        <div className="flex h-full w-full items-center justify-center text-[10px] text-text-muted">
-          {tCommon('loadingEllipsis')}
-        </div>
-      ) : loadFailed || !canRenderPreview || !previewUrl ? (
-        <div className="flex h-full w-full flex-col items-center justify-center gap-1 p-1.5 text-center">
-          <FileText className="h-4 w-4 shrink-0 icon-flat text-text-muted" aria-hidden />
-          <span className="line-clamp-2 text-[9px] leading-tight text-text-secondary">
-            {attachment.fileName}
-          </span>
-        </div>
-      ) : isImageMime(attachment.mimeType) ? (
-        // eslint-disable-next-line @next/next/no-img-element
-        <img
-          src={previewUrl}
-          alt={attachment.fileName}
-          className="h-full w-full object-fill"
-        />
-      ) : (
-        <iframe
-          src={previewUrl}
-          title={attachment.fileName}
-          className="h-full w-full border-0"
-        />
-      )}
-    </div>
-  );
-}

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';
+import { TreatmentDetailSummaryRow } from '@/components/ui/treatment/TreatmentDetailSummaryRow';
-
+import type { LinkedOrganizationOption, PastTreatment } from '@/types/treatment';
-const TREATMENT_TYPE_KEYS = {
-  consultation: 'typeConsultation',
-  filling: 'typeFilling',
-  endo: 'typeEndo',
-  visit: 'typeVisit',
-  hygiene: 'typeHygiene',
-} as const;
 
 interface TreatmentPreviewCardProps {
-  draft: PastTreatment | null;
+  treatment: PastTreatment | null;
-  disabled?: boolean;
+  labDependentCodes: Set<string>;
-  onPreview: () => void;
+  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}>
+        <Button type="button" variant="primary" disabled={openDisabled || !treatment} onClick={onOpen}>
-          {t('previewDraft')}
+          {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>
+            <p className="text-sm font-medium text-text-primary">{treatment.title}</p>
-            <span className="text-xs text-text-muted tabular-nums shrink-0 capitalize">{draft.status}</span>
+            <time
-          </div>
+              className="text-xs text-text-muted tabular-nums shrink-0"
-          <p className="text-xs text-text-secondary">
+              dateTime={treatment.treatmentAt}
-            {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">
+              {new Date(treatment.treatmentAt).toLocaleDateString()}
-                  {t('caseSummary', { n: idx + 1, type: typeLabel })}
+            </time>
-                </span>
-                {c.teeth.length > 0 && (
-                  <span className="ml-1 tabular-nums">
-                    {t('teethPrefix')} {[...c.teeth].sort().join(', ')}
-                  </span>
-                )}
           </div>
-              );
+          <div className="space-y-2 max-h-[min(280px,40vh)] overflow-y-auto pr-1">
-            })}
+            {treatment.details.length === 0 ? (
-            {draft.details.length > 2 && (
+              <p className="text-xs text-text-muted">{t('noDetails')}</p>
-              <p className="text-xs text-text-muted">{t('moreCases', { n: draft.details.length - 2 })}</p>
+            ) : (
+              treatment.details.map((detail, idx) => (
+                <TreatmentDetailSummaryRow
+                  key={detail.clientId ?? detail.id}
+                  detail={detail}
+                  detailNumber={idx + 1}
+                  labDependentCodes={labDependentCodes}
+                  orgs={orgs}
+                  compact
+                />
+              ))
             )}
           </div>
         </div>

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

@@ -1,180 +0,0 @@
-'use client';
-
-import { useRef } from 'react';
-import { useTranslations } from 'next-intl';
-import { Loader2, Paperclip } from 'lucide-react';
-import { DialogCloseButton } from '@/components/ui/shared/DialogCloseButton';
-import type { LinkedOrganizationOption, PastTreatment, PastTreatmentCase } from '@/types/treatment';
-import { CaseSentLabel } from '@/components/ui/treatment/CaseSentLabel';
-import { TreatmentLatestAttachmentPreview } from '@/components/ui/treatment/TreatmentLatestAttachmentPreview';
-import { treatmentTypeLabelKey } from '@/components/ui/treatment/treatmentTypeDisplay';
-
-export type TreatmentPreviewMode = 'readonly' | 'editable';
-
-interface TreatmentPreviewDialogProps {
-  open: boolean;
-  onClose: () => void;
-  treatment: PastTreatment | null;
-  mode: TreatmentPreviewMode;
-  orgs?: LinkedOrganizationOption[];
-  uploadBusyCaseId?: string | null;
-  onAttach?: (caseKey: string, files: FileList) => void | Promise<void>;
-}
-
-function caseKey(c: PastTreatmentCase): string {
-  return c.clientId ?? c.id;
-}
-
-const caseActionIconClass =
-  'inline-flex items-center justify-center rounded-[var(--radius-sm)] p-1.5 text-text-secondary transition-colors hover:bg-background-card/80 hover:text-text-primary disabled:cursor-not-allowed disabled:opacity-40';
-
-export function TreatmentPreviewDialog({
-  open,
-  onClose,
-  treatment,
-  mode,
-  orgs = [],
-  uploadBusyCaseId,
-  onAttach,
-}: TreatmentPreviewDialogProps) {
-  const t = useTranslations('treatment');
-  const fileInputsRef = useRef<Record<string, HTMLInputElement | null>>({});
-
-  if (!open || !treatment) return null;
-
-  const editable = mode === 'editable';
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
-      <div
-        className="w-full max-w-[min(56rem,calc(100vw-15rem))] max-h-[90vh] overflow-y-auto rounded-[var(--radius-md)] border border-border bg-background-secondary p-6 shadow-xl space-y-4"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="treatment-preview-title"
-      >
-        <div className="flex items-start justify-between gap-3">
-          <div className="min-w-0">
-            <h2 id="treatment-preview-title" className="text-lg font-semibold text-text-primary pr-2">
-              {t('previewDialogTitle')}
-            </h2>
-            <p className="text-xs text-text-muted mt-0.5">{t('previewDialogSubtitlePhase4')}</p>
-          </div>
-          <DialogCloseButton onClick={onClose} />
-        </div>
-
-        <div className="border border-border/70 rounded-[var(--radius-md)] p-4 bg-background-secondary/40 space-y-3">
-          <div className="flex items-start justify-between gap-2">
-            <p className="text-sm font-medium text-text-primary">{treatment.title}</p>
-            <span className="text-xs text-text-muted tabular-nums shrink-0">
-              {new Date(treatment.treatmentAt).toLocaleDateString()}
-            </span>
-          </div>
-          <p className="text-xs text-text-secondary capitalize">
-            {t('statusLabel')} {treatment.status}
-          </p>
-
-          {editable && (
-            <p className="text-xs text-text-muted">{t('previewLabDispatchHint')}</p>
-          )}
-
-          {treatment.details.length === 0 ? (
-            <p className="text-sm text-text-muted">{t('noDetails')}</p>
-          ) : (
-            <div className="space-y-2">
-              {treatment.details.map((c, idx) => {
-                const key = caseKey(c);
-                const attachments = c.attachmentMetas ?? [];
-                const latestAttachment =
-                  attachments.length > 0 ? attachments[attachments.length - 1] : null;
-                const sent = Boolean(c.sentAt);
-                const actionsEnabled = editable && !sent;
-                const comment = c.notes?.trim() ?? '';
-                const attachBusy = uploadBusyCaseId === key;
-                const typeKey = treatmentTypeLabelKey(c.treatmentType);
-                const typeLabel = t(typeKey as 'typeConsultation');
-
-                return (
-                  <div
-                    key={key}
-                    className="rounded-[var(--radius-md)] border border-border/60 px-3 py-2 bg-background-secondary/30"
-                  >
-                    <div className="grid grid-cols-[minmax(0,1fr)_auto] gap-x-4 gap-y-1">
-                      <div className="min-w-0 space-y-0.5">
-                        <div className="flex items-center gap-2">
-                          <p className="text-xs font-medium text-text-primary">
-                            {t('detailLabel', { n: idx + 1 })}
-                          </p>
-                          {actionsEnabled && onAttach && (
-                            <div className="flex items-center gap-0.5">
-                              <input
-                                ref={(el) => {
-                                  fileInputsRef.current[key] = el;
-                                }}
-                                type="file"
-                                multiple
-                                className="sr-only"
-                                aria-hidden
-                                onChange={(e) => {
-                                  if (e.target.files?.length) {
-                                    void onAttach(key, e.target.files);
-                                  }
-                                  e.target.value = '';
-                                }}
-                              />
-                              <button
-                                type="button"
-                                className={caseActionIconClass}
-                                disabled={attachBusy}
-                                aria-label={t('attachFilesShort')}
-                                title={t('attachFilesShort')}
-                                onClick={() => fileInputsRef.current[key]?.click()}
-                              >
-                                {attachBusy ? (
-                                  <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden />
-                                ) : (
-                                  <Paperclip className="h-3.5 w-3.5" aria-hidden />
-                                )}
-                              </button>
-                            </div>
-                          )}
-                        </div>
-                        <p className="text-[11px] text-text-secondary capitalize">
-                          {t('typeLabel')} {typeLabel}
-                        </p>
-                        <p className="text-[11px] text-text-secondary">
-                          {t('teethLabel')}{' '}
-                          {c.teeth.length ? [...c.teeth].sort().join(', ') : t('teethNone')}
-                        </p>
-                        {comment ? (
-                          <p className="text-[11px] text-text-muted line-clamp-2" title={comment}>
-                            {t('commentsLabel')} {comment}
-                          </p>
-                        ) : (
-                          <p className="text-text-muted text-[11px]">{t('commentsEmpty')}</p>
-                        )}
-                      </div>
-
-                      <div className="flex min-w-[6rem] flex-col items-end gap-1">
-                        {sent && (
-                          <CaseSentLabel
-                            treatmentCase={c}
-                            orgs={orgs}
-                            className="text-[10px] text-text-muted text-right"
-                          />
-                        )}
-                        <p className="text-[10px] uppercase tracking-wide text-text-muted">
-                          {t('attachments')}
-                        </p>
-                        <TreatmentLatestAttachmentPreview attachment={latestAttachment} />
-                      </div>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -0,0 +1,25 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { purposeStyle } from '@/components/ui/appointments/appointmentPurposeStyles';
+import { TREATMENT_TYPE_KEYS, treatmentTypeLabelKey } from '@/components/ui/treatment/treatmentTypeDisplay';
+
+interface TreatmentTypeBadgeProps {
+  type: string;
+  className?: string;
+}
+
+export function TreatmentTypeBadge({ type, className = '' }: TreatmentTypeBadgeProps) {
+  const t = useTranslations('treatment');
+  const typeKey = treatmentTypeLabelKey(type);
+  const label =
+    type in TREATMENT_TYPE_KEYS ? t(typeKey as 'typeEndo') : type;
+
+  return (
+    <span
+      className={`inline-flex items-center justify-center box-border rounded-md border min-h-[1.75rem] px-2.5 py-1 text-xs font-medium capitalize leading-none shrink-0 ${purposeStyle(type)} ${className}`.trim()}
+    >
+      {label}
+    </span>
+  );
+}

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

@@ -8,10 +8,6 @@ import { LabCasesDispatchPanel } from '@/components/ui/treatment/LabCasesDispatc
 import { PastTreatmentsPanel } from '@/components/ui/treatment/PastTreatmentsPanel';
 import { TreatmentDetailsEditor } from '@/components/ui/treatment/TreatmentDetailsEditor';
 import { TreatmentPreviewCard } from '@/components/ui/treatment/TreatmentPreviewCard';
-import {
-  TreatmentPreviewDialog,
-  type TreatmentPreviewMode,
-} from '@/components/ui/treatment/TreatmentPreviewDialog';
 import { ToastStack } from '@/components/ui/shared/Toast';
 import { treatmentTypeLabelKey } from '@/components/ui/treatment/treatmentTypeDisplay';
 import {
@@ -40,6 +36,57 @@ import type {
   TreatmentDetailDraft,
 } from '@/types/treatment';
 
+type WorkspaceMode = 'live' | 'historical';
+
+function isTreatmentDayHistorical(treatmentAt: string, todayStart: Date): boolean {
+  return compareLocalDayStart(new Date(treatmentAt), todayStart) < 0;
+}
+
+function labCaseDraftsToPast(
+  labCaseDrafts: LabCaseDraft[],
+  details: TreatmentDetailDraft[],
+): PastLabCase[] {
+  return labCaseDrafts.map((lc) => ({
+    id: lc.id ?? lc.clientId,
+    clientId: lc.clientId,
+    destinationOrganizationId: lc.destinationOrganizationId,
+    labComment: lc.labComment || null,
+    sentAt: lc.sentAt ?? null,
+    treatmentDetailIds: lc.detailClientIds
+      .map((cid) => details.find((d) => d.clientId === cid)?.id)
+      .filter((id): id is string => Boolean(id)),
+    details: lc.detailClientIds.map((cid) => {
+      const d = details.find((x) => x.clientId === cid);
+      return {
+        id: d?.id ?? cid,
+        clientId: cid,
+        treatmentType: d?.treatmentType ?? 'consultation',
+        teeth: d?.teeth ?? [],
+      };
+    }),
+    sends: lc.sends ?? [],
+  }));
+}
+
+function buildWorkspaceSnapshot(
+  appointment: TreatmentAppointment,
+  details: TreatmentDetailDraft[],
+  labCaseDrafts: LabCaseDraft[],
+  title: string,
+  id?: string,
+): PastTreatment {
+  return {
+    ...detailsToPreviewTreatment(details, {
+      id: id ?? `preview-${appointment.id}`,
+      title,
+      patientId: appointment.patientId,
+      treatmentAt: appointment.startAt,
+    }),
+    appointmentId: appointment.id,
+    labCases: labCaseDraftsToPast(labCaseDrafts, details),
+  };
+}
+
 function newDetail(): TreatmentDetailDraft {
   return {
     clientId:
@@ -134,14 +181,13 @@ function isDetailsDirty(
 
 function detailsToPreviewTreatment(
   details: TreatmentDetailDraft[],
-  meta: { title: string; patientId: string; treatmentAt: string; status: string; id?: string },
+  meta: { title: string; patientId: string; treatmentAt: string; id?: string },
 ): PastTreatment {
   return {
     id: meta.id ?? 'current-draft',
     patientId: meta.patientId,
     title: meta.title,
     treatmentAt: meta.treatmentAt,
-    status: meta.status,
     details: details.map((d, idx) => ({
       id: d.id ?? d.clientId ?? `draft-${idx + 1}`,
       clientId: d.clientId,
@@ -181,6 +227,7 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
 
   const [history, setHistory] = useState<PastTreatment[]>([]);
   const [historyLoading, setHistoryLoading] = useState(false);
+  const [historyPatientId, setHistoryPatientId] = useState<string | null>(null);
 
   const [orgs, setOrgs] = useState<LinkedOrganizationOption[]>([]);
   const [labDependentCodes, setLabDependentCodes] = useState<Set<string>>(new Set());
@@ -191,6 +238,8 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
   const [activeLabCaseId, setActiveLabCaseId] = useState<string | null>(null);
   const [savedSnapshot, setSavedSnapshot] = useState<string | null>(null);
   const [saveStatus, setSaveStatus] = useState<'idle' | 'dirty' | 'saving' | 'saved' | 'error'>('idle');
+  const [selectedPreviewId, setSelectedPreviewId] = useState<string | null>(null);
+  const [workspaceMode, setWorkspaceMode] = useState<WorkspaceMode>('live');
 
   const selectionLockedRef = useRef(selectionLocked);
   selectionLockedRef.current = selectionLocked;
@@ -203,16 +252,17 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
   const saveInFlightRef = useRef(false);
   const saveQueuedRef = useRef(false);
   const draftHydratingRef = useRef(false);
+  const workspaceModeRef = useRef(workspaceMode);
+  workspaceModeRef.current = workspaceMode;
+  const labCaseDraftsRef = useRef(labCaseDrafts);
+  labCaseDraftsRef.current = labCaseDrafts;
+  const skipNextGetDraftRef = useRef(false);
 
   const [sendBusyId, setSendBusyId] = useState<string | null>(null);
   const [uploadBusyDetailId, setUploadBusyDetailId] = useState<string | null>(null);
   const [organizationSearch, setOrganizationSearch] = useState('');
   const [recentOrganizationIds, setRecentOrganizationIds] = useState<string[]>([]);
 
-  const [previewOpen, setPreviewOpen] = useState(false);
-  const [previewTreatment, setPreviewTreatment] = useState<PastTreatment | null>(null);
-  const [previewMode, setPreviewMode] = useState<TreatmentPreviewMode>('readonly');
-
   const isDetailLocked = useCallback(
     (detail: TreatmentDetailDraft) =>
       labCaseDrafts.some((lc) => lc.sentAt && lc.detailClientIds.includes(detail.clientId)),
@@ -236,7 +286,66 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
     [selectedDay, todayStart],
   );
 
-  const canEditTreatmentForDay = canEdit && Boolean(selectedAppointment) && !isViewingPastDay;
+  const canEditTreatmentForDay =
+    canEdit &&
+    Boolean(selectedAppointment) &&
+    !isViewingPastDay &&
+    workspaceMode === 'live';
+
+  const historyPanelItems = useMemo(() => {
+    return history.filter((item) => {
+      if (
+        workspaceMode === 'live' &&
+        selectedAppointmentId &&
+        item.appointmentId === selectedAppointmentId
+      ) {
+        return false;
+      }
+      return true;
+    });
+  }, [history, selectedAppointmentId, workspaceMode]);
+
+  const currentDraftPreview = useMemo<PastTreatment | null>(() => {
+    if (!selectedAppointment) return null;
+    return buildWorkspaceSnapshot(
+      selectedAppointment,
+      details,
+      labCaseDrafts,
+      t('treatmentPlanTitle', {
+        patientName: `${selectedAppointment.patientFirstName} ${selectedAppointment.patientLastName}`,
+      }),
+      'current-draft',
+    );
+  }, [details, labCaseDrafts, selectedAppointment, t]);
+
+  const previewTreatment = useMemo(() => {
+    if (!selectedPreviewId) return currentDraftPreview;
+    return historyPanelItems.find((item) => item.id === selectedPreviewId) ?? currentDraftPreview;
+  }, [selectedPreviewId, historyPanelItems, currentDraftPreview]);
+
+  const isPreviewAlreadyOpen = useMemo(() => {
+    if (!previewTreatment?.appointmentId || !selectedAppointmentId) return false;
+    if (selectedAppointmentId !== previewTreatment.appointmentId) return false;
+    if (workspaceMode === 'historical') return true;
+    if (workspaceMode === 'live' && selectedPreviewId === null) return true;
+    if (workspaceMode === 'live' && selectedPreviewId === previewTreatment.id) return true;
+    return false;
+  }, [previewTreatment, selectedAppointmentId, workspaceMode, selectedPreviewId]);
+
+  const hydrateFromTreatment = useCallback((treatment: PastTreatment) => {
+    const mapped = treatment.details.map(mapDetailFromApi);
+    setDetails(mapped);
+    setActiveDetailId((prev) => {
+      const stillExists = mapped.some((d) => d.clientId === prev);
+      return stillExists ? prev : mapped[0]?.clientId ?? prev;
+    });
+    setSavedSnapshot(serializeDetails(mapped));
+    const mappedLabCases = (treatment.labCases ?? []).map(mapLabCaseDraftFromApi);
+    setLabCaseDrafts(mappedLabCases);
+    setActiveLabCaseId(mappedLabCases[0]?.clientId ?? null);
+    setOrganizationSearch('');
+    setSaveStatus('idle');
+  }, []);
 
   const activeDetail = useMemo(
     () => details.find((d) => d.clientId === activeDetailId) ?? details[0],
@@ -245,18 +354,6 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
 
   const selectedTeethSet = useMemo(() => new Set(activeDetail?.teeth ?? []), [activeDetail?.teeth]);
 
-  const currentDraftPreview = useMemo<PastTreatment | null>(() => {
-    if (!selectedAppointment) return null;
-    return detailsToPreviewTreatment(details, {
-      title: t('draftTitle', {
-        patientName: `${selectedAppointment.patientFirstName} ${selectedAppointment.patientLastName}`,
-      }),
-      patientId: selectedAppointment.patientId,
-      treatmentAt: new Date().toISOString(),
-      status: 'draft',
-    });
-  }, [details, selectedAppointment, t]);
-
   useEffect(() => {
     setSelectionLocked(false);
   }, [selectedDay]);
@@ -332,15 +429,18 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
   }, [showError, t]);
 
   useEffect(() => {
-    if (!selectedAppointment) {
+    if (selectedAppointment?.patientId) {
-      setHistory([]);
+      setHistoryPatientId(selectedAppointment.patientId);
-      return;
     }
+  }, [selectedAppointment?.patientId]);
+
+  useEffect(() => {
+    if (!historyPatientId) return;
     let cancelled = false;
     setHistoryLoading(true);
     void (async () => {
       try {
-        const response = await treatmentsApi.listPatientHistory(selectedAppointment.patientId);
+        const response = await treatmentsApi.listPatientHistory(historyPatientId);
         if (!cancelled) setHistory(response.data);
       } catch (error: unknown) {
         if (!cancelled) {
@@ -353,11 +453,16 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
     return () => {
       cancelled = true;
     };
-  }, [selectedAppointment?.patientId, showError, t]);
+  }, [historyPatientId, showError, t]);
 
   useEffect(() => {
     const appointmentId = selectedAppointment?.id;
-    if (!appointmentId) return;
+    if (!appointmentId || workspaceMode !== 'live') return;
+
+    if (skipNextGetDraftRef.current) {
+      skipNextGetDraftRef.current = false;
+      return;
+    }
 
     let cancelled = false;
     draftHydratingRef.current = true;
@@ -405,7 +510,7 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
       cancelled = true;
       draftHydratingRef.current = false;
     };
-  }, [selectedAppointment?.id, showError, t]);
+  }, [selectedAppointment?.id, workspaceMode, showError, t]);
 
   const persistDraft = useCallback(
     async (options?: { force?: boolean }) => {
@@ -416,12 +521,11 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
 
       if (!options?.force && !dirty) {
         return detailsToPreviewTreatment(currentDetails, {
-          title: t('draftTitle', {
+          title: t('treatmentPlanTitle', {
             patientName: `${selectedAppointment.patientFirstName} ${selectedAppointment.patientLastName}`,
           }),
           patientId: selectedAppointment.patientId,
           treatmentAt: selectedAppointment.startAt,
-          status: 'draft',
         });
       }
 
@@ -479,13 +583,24 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
     }
   }, [selectedAppointment, persistDraft, showError, t]);
 
+  const refreshHistory = useCallback(async (patientId: string) => {
+    try {
+      const response = await treatmentsApi.listPatientHistory(patientId);
+      setHistory(response.data);
+    } catch (error: unknown) {
+      showError(formatApiErrorMessage(error, t('errorLoadHistory')));
+    }
+  }, [showError, t]);
+
   const flushDraftSave = useCallback(async (): Promise<boolean> => {
     if (autosaveTimerRef.current) {
       clearTimeout(autosaveTimerRef.current);
       autosaveTimerRef.current = null;
     }
 
-    if (!selectedAppointment || !canEditTreatmentForDay) return true;
+    if (workspaceModeRef.current !== 'live' || !selectedAppointment || !canEditTreatmentForDay) {
+      return true;
+    }
 
     while (saveInFlightRef.current) {
       await new Promise((resolve) => setTimeout(resolve, 50));
@@ -497,11 +612,14 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
 
     try {
       await runDraftSave();
+      if (historyPatientId) {
+        await refreshHistory(historyPatientId);
+      }
       return true;
     } catch {
       return window.confirm(t('confirmDiscard'));
     }
-  }, [selectedAppointment, canEditTreatmentForDay, runDraftSave, t]);
+  }, [selectedAppointment, canEditTreatmentForDay, runDraftSave, historyPatientId, refreshHistory, t]);
 
   useEffect(() => {
     if (draftHydratingRef.current || !canEditTreatmentForDay || !selectedAppointment?.id) {
@@ -528,16 +646,22 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
     };
   }, [details, isDirty, canEditTreatmentForDay, selectedAppointment?.id, runDraftSave]);
 
+  const resetToLiveContext = useCallback(() => {
+    setWorkspaceMode('live');
+    setSelectedPreviewId(null);
+  }, []);
+
   const onPickAppointment = useCallback(
     (id: string) => {
       void (async () => {
         const ok = await flushDraftSave();
         if (!ok) return;
+        resetToLiveContext();
         setSelectionLocked(true);
         setSelectedAppointmentId(id);
       })();
     },
-    [flushDraftSave],
+    [flushDraftSave, resetToLiveContext],
   );
 
   const onSelectDay = useCallback(
@@ -545,12 +669,56 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
       void (async () => {
         const ok = await flushDraftSave();
         if (!ok) return;
+        const patientIdToRefresh = historyPatientId;
+        resetToLiveContext();
         setSelectedDay(day);
+        if (patientIdToRefresh) {
+          await refreshHistory(patientIdToRefresh);
+        }
       })();
     },
-    [flushDraftSave],
+    [flushDraftSave, resetToLiveContext, historyPatientId, refreshHistory],
   );
 
+  const handleSelectPreviewTreatment = useCallback((treatment: PastTreatment) => {
+    setSelectedPreviewId(treatment.id);
+  }, []);
+
+  const handleOpenTreatment = useCallback(() => {
+    void (async () => {
+      const treatment = previewTreatment;
+      if (!treatment?.appointmentId) {
+        showError(t('errorNoAppointmentForTreatment'));
+        return;
+      }
+
+      if (isPreviewAlreadyOpen) return;
+
+      const ok = workspaceModeRef.current === 'live' ? await flushDraftSave() : true;
+      if (!ok) return;
+
+      const isHistorical = isTreatmentDayHistorical(treatment.treatmentAt, todayStart);
+      setWorkspaceMode(isHistorical ? 'historical' : 'live');
+      setSelectedPreviewId(treatment.id);
+      setSelectedDay(startOfLocalDay(new Date(treatment.treatmentAt)));
+      setSelectionLocked(true);
+      setSelectedAppointmentId(treatment.appointmentId);
+
+      skipNextGetDraftRef.current = true;
+      draftHydratingRef.current = true;
+      hydrateFromTreatment(treatment);
+      draftHydratingRef.current = false;
+    })();
+  }, [
+    previewTreatment,
+    isPreviewAlreadyOpen,
+    flushDraftSave,
+    hydrateFromTreatment,
+    showError,
+    t,
+    todayStart,
+  ]);
+
   const uploadForDetail = useCallback(
     async (detailClientId: string, files: FileList | File[]) => {
       if (!canEditTreatmentForDay || !selectedAppointment) return;
@@ -685,17 +853,6 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
     ],
   );
 
-  const openPreview = useCallback((treatment: PastTreatment, mode: TreatmentPreviewMode) => {
-    setPreviewTreatment(treatment);
-    setPreviewMode(mode);
-    setPreviewOpen(true);
-  }, []);
-
-  const openCurrentDraftPreview = useCallback(() => {
-    if (!currentDraftPreview) return;
-    openPreview(currentDraftPreview, canEditTreatmentForDay ? 'editable' : 'readonly');
-  }, [currentDraftPreview, canEditTreatmentForDay, openPreview]);
-
   if (!canView) {
     return (
       <div className="surface-card p-6 max-w-xl">
@@ -727,7 +884,13 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
         loading={apptsLoading}
       />
 
-      {isViewingPastDay && (
+      {workspaceMode === 'historical' && (
+        <p className="text-sm text-emerald-700 dark:text-emerald-400 rounded-[var(--radius-md)] border border-emerald-500/40 bg-emerald-500/10 px-3 py-2">
+          {t('historicalReadonlyNotice')}
+        </p>
+      )}
+
+      {isViewingPastDay && workspaceMode === 'live' && (
         <p className="text-sm text-text-secondary rounded-[var(--radius-md)] border border-border/60 bg-background-secondary/50 px-3 py-2">
           {t('pastDayNotice')}
         </p>
@@ -757,15 +920,18 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
           )}
 
           <TreatmentPreviewCard
-            draft={currentDraftPreview}
+            treatment={previewTreatment}
-            disabled={!selectedAppointment}
+            labDependentCodes={labDependentCodes}
-            onPreview={openCurrentDraftPreview}
+            orgs={orgs}
+            openDisabled={isPreviewAlreadyOpen}
+            onOpen={handleOpenTreatment}
           />
 
           <PastTreatmentsPanel
-            items={history}
+            items={historyPanelItems}
             loading={historyLoading}
-            onReviewTreatment={(item) => openPreview(item, 'readonly')}
+            selectedPreviewId={selectedPreviewId}
+            onSelectTreatment={handleSelectPreviewTreatment}
           />
         </div>
 
@@ -793,6 +959,7 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
             onActiveDetailChange={setActiveDetailId}
             onDetailsChange={setDetails}
             isDetailLocked={isDetailLocked}
+            labDependentCodes={labDependentCodes}
             disabled={!canEditTreatmentForDay}
             canEdit={canEdit}
             saveStatus={saveStatus}
@@ -802,7 +969,6 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
               setDetails((prev) => [...prev, next]);
               setActiveDetailId(next.clientId);
             }}
-            onPreview={openCurrentDraftPreview}
             onUploadFiles={(files) => void uploadForDetail(activeDetailId, files ?? [])}
           />
 
@@ -839,18 +1005,6 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
           />
         </div>
       </div>
-
-      <TreatmentPreviewDialog
-        open={previewOpen}
-        onClose={() => setPreviewOpen(false)}
-        treatment={
-          previewMode === 'editable' && currentDraftPreview ? currentDraftPreview : previewTreatment
-        }
-        mode={previewMode}
-        orgs={orgs}
-        uploadBusyCaseId={uploadBusyDetailId}
-        onAttach={(caseKey, files) => uploadForDetail(caseKey, files)}
-      />
     </div>
   );
 }

frontend/src/components/ui/treatment/treatmentStatusStyles.ts

@@ -0,0 +1,26 @@
+export const labSentBadgeClass =
+  'inline-flex items-center rounded-[var(--radius-sm)] border border-emerald-500/40 bg-emerald-500/10 px-2 py-0.5 text-[11px] font-medium text-emerald-600 dark:text-emerald-400';
+
+export const labNotSentBadgeClass =
+  'inline-flex items-center rounded-[var(--radius-sm)] border border-amber-500/40 bg-amber-500/10 px-2 py-0.5 text-[11px] font-medium text-amber-600 dark:text-amber-400';
+
+export const labSentBannerClass =
+  'text-xs rounded-[var(--radius-sm)] border border-emerald-500/40 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 px-2 py-1.5';
+
+export const labPendingBannerClass =
+  'text-xs rounded-[var(--radius-sm)] border border-amber-500/40 bg-amber-500/10 text-amber-700 dark:text-amber-400 px-2 py-1.5';
+
+export function autosaveStatusClass(status: 'dirty' | 'saving' | 'saved' | 'error'): string {
+  switch (status) {
+    case 'dirty':
+      return 'text-amber-600 dark:text-amber-400';
+    case 'saving':
+      return 'text-text-muted animate-pulse';
+    case 'saved':
+      return 'text-emerald-600 dark:text-emerald-400';
+    case 'error':
+      return 'text-red-500';
+    default:
+      return 'text-text-muted';
+  }
+}

frontend/src/types/treatment.ts

@@ -108,7 +108,6 @@ export interface PastTreatment {
   appointmentId?: string | null;
   title: string;
   treatmentAt: string;
-  status: string;
   details: PastTreatmentDetail[];
   labCases: PastLabCase[];
   documents: TreatmentAttachmentMeta[];