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

2026-06-28 21:45:33 +03:30
parent 94b97aa0fa
commit feb0b26ad0
20 changed files with 571 additions and 608 deletions
--- a/frontend/src/components/ui/treatment/TreatmentWorkspace.tsx
+++ b/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) {
-      setHistory([]);
-      return;
+    if (selectedAppointment?.patientId) {
+      setHistoryPatientId(selectedAppointment.patientId);
    }
+  }, [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}
-            disabled={!selectedAppointment}
-            onPreview={openCurrentDraftPreview}
+            treatment={previewTreatment}
+            labDependentCodes={labDependentCodes}
+            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>
  );
 }