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

759 lines
26 KiB
TypeScript
Raw Normal View History

'use client';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useTranslations } from 'next-intl';
import { AppointmentsStrip } from '@/components/ui/treatment/AppointmentsStrip';
import { FdiToothChart } from '@/components/ui/treatment/FdiToothChart';
import { LabCasesDispatchPanel } from '@/components/ui/treatment/LabCasesDispatchPanel';
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 {
addCalendarDays,
compareLocalDayStart,
isSameLocalCalendarDay,
startOfLocalDay,
} from '@/components/appointments/appointmentTime';
import { appointmentsApi } from '@/lib/api/appointments';
import { treatmentCatalogApi } from '@/lib/api/treatment-catalog';
import { treatmentsApi } from '@/lib/api/treatments';
import { pickAutoAppointment } from '@/components/shared/treatmentSelection';
import { canEditTreatment, canViewTreatment } from '@/components/shared/permissions';
import { formatApiErrorMessage } from '@/components/shared/formatApiError';
import { useToast } from '@/lib/hooks/useToast';
import type { Organization } from '@/types/organization';
import type { AppointmentRecord } from '@/types/appointment';
import type {
FdiToothId,
LabCaseDraft,
LinkedOrganizationOption,
PastLabCase,
PastTreatment,
PastTreatmentCase,
TreatmentAppointment,
TreatmentDetailDraft,
} from '@/types/treatment';
function newDetail(): TreatmentDetailDraft {
return {
clientId:
typeof crypto !== 'undefined' && 'randomUUID' in crypto
? crypto.randomUUID()
: `detail-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
2026-05-07 14:20:50 +03:30
treatmentType: 'consultation',
teeth: [],
comment: '',
attachmentMetas: [],
sendToOrganizationIds: [],
sentAt: null,
};
}
function newLabCaseDraft(): LabCaseDraft {
return {
clientId:
typeof crypto !== 'undefined' && 'randomUUID' in crypto
? crypto.randomUUID()
: `lab-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
destinationOrganizationId: null,
labComment: '',
detailClientIds: [],
sentAt: null,
sends: [],
};
}
function mapAppointment(record: AppointmentRecord): TreatmentAppointment {
return {
id: record.id,
patientId: record.patientId,
patientFirstName: record.patient.firstName,
patientLastName: record.patient.lastName,
providerUserId: record.providerUserId,
startAt: record.startAt,
endAt: record.endAt,
purpose: record.purpose,
};
}
function mapDetailFromApi(d: PastTreatmentCase): TreatmentDetailDraft {
return {
clientId: d.clientId,
id: d.id,
treatmentType: d.treatmentType,
teeth: d.teeth,
comment: d.notes ?? '',
attachmentMetas: d.attachmentMetas ?? [],
labCaseId: d.labCaseId ?? null,
sendToOrganizationIds: d.destinationOrganizationId ? [d.destinationOrganizationId] : [],
sends: d.sends ?? [],
sentAt: d.sentAt ?? null,
};
}
function mapLabCaseDraftFromApi(lc: PastLabCase): LabCaseDraft {
return {
clientId: lc.clientId,
id: lc.id,
destinationOrganizationId: lc.destinationOrganizationId,
labComment: lc.labComment ?? '',
detailClientIds: lc.details.map((d) => d.clientId),
sentAt: lc.sentAt ?? null,
sends: lc.sends ?? [],
};
}
function serializeDetails(details: TreatmentDetailDraft[]) {
return JSON.stringify(
details.map((d) => ({
clientId: d.clientId,
id: d.id,
treatmentType: d.treatmentType,
teeth: d.teeth,
comment: d.comment,
attachmentMetas: d.attachmentMetas,
})),
);
}
function detailsToPreviewTreatment(
details: TreatmentDetailDraft[],
meta: { title: string; patientId: string; treatmentAt: string; status: 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,
treatmentType: d.treatmentType,
teeth: d.teeth,
notes: d.comment || null,
attachmentMetas: d.attachmentMetas,
labCaseId: d.labCaseId ?? null,
destinationOrganizationId: d.sendToOrganizationIds[0] ?? null,
sends: d.sends ?? [],
sentAt: d.sentAt ?? null,
})),
labCases: [],
documents: [],
};
}
interface TreatmentWorkspaceProps {
userId: string;
currentOrganization: Organization | null;
}
export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWorkspaceProps) {
const t = useTranslations('treatment');
const { showError, showSuccess, messages: toastMessages } = useToast();
const canView = canViewTreatment(currentOrganization);
const canEdit = canEditTreatment(currentOrganization);
const [stripHidden, setStripHidden] = useState(false);
const todayStart = useMemo(() => startOfLocalDay(new Date()), []);
const [selectedDay, setSelectedDay] = useState(() => startOfLocalDay(new Date()));
const [appointments, setAppointments] = useState<TreatmentAppointment[]>([]);
const [apptsLoading, setApptsLoading] = useState(false);
const [selectionLocked, setSelectionLocked] = useState(false);
const [selectedAppointmentId, setSelectedAppointmentId] = useState<string | null>(null);
const [history, setHistory] = useState<PastTreatment[]>([]);
const [historyLoading, setHistoryLoading] = useState(false);
const [orgs, setOrgs] = useState<LinkedOrganizationOption[]>([]);
const [labDependentCodes, setLabDependentCodes] = useState<Set<string>>(new Set());
const [details, setDetails] = useState<TreatmentDetailDraft[]>(() => [newDetail()]);
const [labCaseDrafts, setLabCaseDrafts] = useState<LabCaseDraft[]>([]);
const [activeDetailId, setActiveDetailId] = useState<string>(() => details[0].clientId);
const [activeLabCaseId, setActiveLabCaseId] = useState<string | null>(null);
const [savedSnapshot, setSavedSnapshot] = useState<string | null>(null);
const selectionLockedRef = useRef(selectionLocked);
selectionLockedRef.current = selectionLocked;
const [saveBusy, setSaveBusy] = useState(false);
const [saveLabBusy, setSaveLabBusy] = useState(false);
const [sendBusyId, setSendBusyId] = useState<string | null>(null);
const [uploadBusyDetailId, setUploadBusyDetailId] = useState<string | null>(null);
2026-05-07 14:20:50 +03:30
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)),
[labCaseDrafts],
);
const isDirty = useMemo(() => {
if (savedSnapshot === null) {
return details.length !== 1 || details[0].comment !== '' || details[0].teeth.length > 0;
}
return serializeDetails(details) !== savedSnapshot;
}, [details, savedSnapshot]);
const selectedAppointment = useMemo(
() => appointments.find((a) => a.id === selectedAppointmentId) ?? null,
[appointments, selectedAppointmentId],
);
const isViewingPastDay = useMemo(
() => compareLocalDayStart(selectedDay, todayStart) < 0,
[selectedDay, todayStart],
);
const canEditTreatmentForDay = canEdit && Boolean(selectedAppointment) && !isViewingPastDay;
const activeDetail = useMemo(
() => details.find((d) => d.clientId === activeDetailId) ?? details[0],
[details, activeDetailId],
);
const selectedTeethSet = useMemo(() => new Set(activeDetail?.teeth ?? []), [activeDetail?.teeth]);
2026-05-07 14:20:50 +03:30
const currentDraftPreview = useMemo<PastTreatment | null>(() => {
if (!selectedAppointment) return null;
return detailsToPreviewTreatment(details, {
title: t('draftTitle', {
patientName: `${selectedAppointment.patientFirstName} ${selectedAppointment.patientLastName}`,
}),
2026-05-07 14:20:50 +03:30
patientId: selectedAppointment.patientId,
treatmentAt: new Date().toISOString(),
status: 'draft',
});
}, [details, selectedAppointment, t]);
2026-05-07 14:20:50 +03:30
useEffect(() => {
setSelectionLocked(false);
}, [selectedDay]);
useEffect(() => {
let cancelled = false;
setApptsLoading(true);
void (async () => {
try {
const dayStart = startOfLocalDay(selectedDay);
const dayEnd = addCalendarDays(dayStart, 1);
const response = await appointmentsApi.list({
from: dayStart.toISOString(),
to: dayEnd.toISOString(),
});
if (cancelled) return;
const list = response.data
.filter((a) => a.providerUserId === userId)
.map(mapAppointment);
setAppointments(list);
if (!selectionLockedRef.current) {
setSelectedAppointmentId(pickAutoAppointment(list, selectedDay));
}
} catch (error: unknown) {
if (!cancelled) {
showError(formatApiErrorMessage(error, t('errorLoadAppointments')));
}
} finally {
if (!cancelled) setApptsLoading(false);
}
})();
return () => {
cancelled = true;
};
}, [userId, selectedDay, showError, t]);
useEffect(() => {
const today = startOfLocalDay(new Date());
if (!isSameLocalCalendarDay(selectedDay, today) || selectionLocked) return;
const id = window.setInterval(() => {
setSelectedAppointmentId((prev) => {
const next = pickAutoAppointment(appointments, selectedDay);
return next ?? prev;
});
}, 60_000);
return () => window.clearInterval(id);
}, [selectedDay, appointments, selectionLocked]);
useEffect(() => {
let cancelled = false;
void (async () => {
try {
const [orgsResponse, catalogResponse] = await Promise.all([
treatmentsApi.listLinkedOrganizations(),
treatmentCatalogApi.list(),
]);
if (cancelled) return;
setOrgs(orgsResponse.data);
setLabDependentCodes(
new Set(catalogResponse.data.filter((entry) => entry.labDependent).map((entry) => entry.code)),
);
} catch (error: unknown) {
if (!cancelled) {
showError(formatApiErrorMessage(error, t('errorLoadOrgs')));
}
}
})();
return () => {
cancelled = true;
};
}, [showError, t]);
useEffect(() => {
if (!selectedAppointment) {
setHistory([]);
return;
}
let cancelled = false;
setHistoryLoading(true);
void (async () => {
try {
const response = await treatmentsApi.listPatientHistory(selectedAppointment.patientId);
if (!cancelled) setHistory(response.data);
} catch (error: unknown) {
if (!cancelled) {
showError(formatApiErrorMessage(error, t('errorLoadHistory')));
}
} finally {
if (!cancelled) setHistoryLoading(false);
}
})();
return () => {
cancelled = true;
};
}, [selectedAppointment?.patientId, showError, t]);
useEffect(() => {
const appointmentId = selectedAppointment?.id;
if (!appointmentId) return;
let cancelled = false;
void (async () => {
try {
const response = await treatmentsApi.getDraft(appointmentId);
if (cancelled) return;
if (response.data?.details?.length) {
const mapped = response.data.details.map(mapDetailFromApi);
setDetails(mapped);
setActiveDetailId((prev) => {
const stillExists = mapped.some((d) => d.clientId === prev);
return stillExists ? prev : mapped[0].clientId;
});
setSavedSnapshot(serializeDetails(mapped));
} else {
const first = newDetail();
setDetails([first]);
setActiveDetailId(first.clientId);
setSavedSnapshot(serializeDetails([first]));
}
const mappedLabCases = (response.data?.labCases ?? []).map(mapLabCaseDraftFromApi);
setLabCaseDrafts(mappedLabCases);
setActiveLabCaseId(mappedLabCases[0]?.clientId ?? null);
setOrganizationSearch('');
} catch (error: unknown) {
if (!cancelled) {
showError(formatApiErrorMessage(error, t('errorLoadDraft')));
}
}
})();
return () => {
cancelled = true;
};
}, [selectedAppointment?.id, showError, t]);
const confirmDiscardIfDirty = useCallback(() => {
if (!isDirty) return true;
return window.confirm(t('confirmDiscard'));
}, [isDirty, t]);
const onPickAppointment = useCallback(
(id: string) => {
if (!confirmDiscardIfDirty()) return;
setSelectionLocked(true);
setSelectedAppointmentId(id);
},
[confirmDiscardIfDirty],
);
const onSelectDay = useCallback(
(day: Date) => {
if (!confirmDiscardIfDirty()) return;
setSelectedDay(day);
},
[confirmDiscardIfDirty],
);
const uploadForDetail = useCallback(
async (detailClientId: string, files: FileList | File[]) => {
if (!canEditTreatmentForDay || !selectedAppointment) return;
const list = files instanceof FileList ? Array.from(files) : files;
if (!list.length) return;
setUploadBusyDetailId(detailClientId);
try {
const uploaded = await treatmentsApi.uploadCaseAttachments(
selectedAppointment.id,
detailClientId,
list,
);
setDetails((prev) =>
prev.map((d) =>
d.clientId === detailClientId
? { ...d, attachmentMetas: [...d.attachmentMetas, ...uploaded.data] }
: d,
),
);
showSuccess(t('successFilesUploaded', { count: uploaded.data.length }));
} catch (error: unknown) {
showError(formatApiErrorMessage(error, t('errorUpload')));
} finally {
setUploadBusyDetailId(null);
}
},
[canEditTreatmentForDay, selectedAppointment, showSuccess, showError, t],
);
const persistDraft = useCallback(async () => {
if (!selectedAppointment) throw new Error('No appointment selected');
const response = await treatmentsApi.saveDraft(selectedAppointment.id, {
details: details.map(({ clientId, id, treatmentType, teeth, comment, attachmentMetas }) => ({
clientId,
id,
treatmentType,
teeth,
comment,
attachmentIds: attachmentMetas.map((a) => a.id),
})),
});
const mapped = response.data.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));
return response.data;
}, [details, selectedAppointment]);
const persistLabCases = useCallback(
async (savedTreatment: PastTreatment) => {
if (!selectedAppointment) throw new Error('No appointment selected');
const detailIdByClientId = new Map(
savedTreatment.details.map((d) => [d.clientId, d.id]),
);
const payload = labCaseDrafts.map((lc) => ({
clientId: lc.clientId,
id: lc.id,
destinationOrganizationId: lc.destinationOrganizationId ?? undefined,
labComment: lc.labComment.trim() || undefined,
treatmentDetailIds: lc.detailClientIds
.map((clientId) => detailIdByClientId.get(clientId))
.filter((id): id is string => Boolean(id)),
}));
if (payload.length === 0) {
return savedTreatment;
}
const response = await treatmentsApi.saveLabCases(selectedAppointment.id, {
labCases: payload,
});
const mapped = response.data.labCases.map(mapLabCaseDraftFromApi);
setLabCaseDrafts(mapped);
setActiveLabCaseId((prev) => {
if (prev && mapped.some((lc) => lc.clientId === prev)) return prev;
return mapped[0]?.clientId ?? null;
});
return response.data;
},
[labCaseDrafts, selectedAppointment],
);
const handleSaveAll = useCallback(async () => {
if (!canEditTreatmentForDay || !selectedAppointment) return;
setSaveBusy(true);
try {
await persistDraft();
showSuccess(t('successDraftSaved'));
} catch (error: unknown) {
showError(formatApiErrorMessage(error, t('errorSaveDraft')));
} finally {
setSaveBusy(false);
}
}, [canEditTreatmentForDay, selectedAppointment, persistDraft, showSuccess, showError, t]);
const handleSaveLabCases = useCallback(async () => {
if (!canEditTreatmentForDay || !selectedAppointment) return;
setSaveLabBusy(true);
try {
const saved = await persistDraft();
await persistLabCases(saved);
showSuccess(t('successLabShipmentsSaved'));
} catch (error: unknown) {
showError(formatApiErrorMessage(error, t('errorSaveLabShipments')));
} finally {
setSaveLabBusy(false);
}
}, [
canEditTreatmentForDay,
selectedAppointment,
persistDraft,
persistLabCases,
showSuccess,
showError,
t,
]);
const handleSendLabCase = useCallback(
async (labCase: LabCaseDraft) => {
if (!canEditTreatmentForDay || !selectedAppointment) return;
if (!labCase.destinationOrganizationId) {
showError(t('errorChooseOrg'));
return;
}
if (labCase.detailClientIds.length === 0) {
showError(t('errorLabCaseNeedsDetails'));
return;
}
setSendBusyId(labCase.clientId);
try {
const saved = await persistDraft();
const afterLabCases = await persistLabCases(saved);
const refreshedLabCase = afterLabCases.labCases.find(
(lc) => lc.clientId === labCase.clientId || lc.id === labCase.id,
);
if (!refreshedLabCase?.id) throw new Error(t('errorSendCase'));
const response = await treatmentsApi.sendLabCase(refreshedLabCase.id);
setLabCaseDrafts((prev) =>
prev.map((lc) =>
lc.clientId === labCase.clientId
? {
...lc,
id: response.data.id,
sentAt: response.data.sentAt,
destinationOrganizationId: response.data.destinationOrganizationId,
sends: response.data.sends,
}
: lc,
),
);
2026-05-07 14:20:50 +03:30
setRecentOrganizationIds((prev) => {
const orgId = labCase.destinationOrganizationId!;
return [orgId, ...prev.filter((id) => id !== orgId)].slice(0, 10);
2026-05-07 14:20:50 +03:30
});
showSuccess(t('successCaseSent'));
} catch (error: unknown) {
showError(formatApiErrorMessage(error, t('errorSendCase')));
} finally {
setSendBusyId(null);
}
},
[
canEditTreatmentForDay,
selectedAppointment,
persistDraft,
persistLabCases,
showSuccess,
showError,
t,
],
);
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">
<h2 className="text-lg font-semibold text-text-primary">{t('noPermissionTitle')}</h2>
<p className="text-sm text-text-secondary mt-2">{t('noPermissionBody')}</p>
</div>
);
}
return (
<div className="space-y-4">
<header className="space-y-1">
<h1 className="text-2xl font-semibold text-text-primary">{t('title')}</h1>
<p className="text-sm text-text-secondary">
{canEdit ? t('subtitleEditPhase4') : t('subtitleReadOnly')}
</p>
</header>
<ToastStack {...toastMessages} />
<AppointmentsStrip
stripHidden={stripHidden}
onToggleStripHidden={() => setStripHidden((s) => !s)}
selectedDay={selectedDay}
onSelectDay={onSelectDay}
appointments={appointments}
selectedAppointmentId={selectedAppointmentId}
onSelectAppointment={onPickAppointment}
loading={apptsLoading}
/>
{isViewingPastDay && (
<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>
)}
<div className="grid grid-cols-1 xl:grid-cols-[minmax(300px,380px)_minmax(0,1fr)] gap-4 items-start">
<div className="space-y-3 min-w-0 xl:max-w-[380px]">
{selectedAppointment ? (
<div className="surface-card p-3 space-y-0.5">
<p className="text-[10px] uppercase tracking-wide text-text-muted">{t('selectedPatient')}</p>
<p className="text-base font-semibold text-text-primary">
{selectedAppointment.patientFirstName} {selectedAppointment.patientLastName}
</p>
<p className="text-[11px] text-text-secondary">
{t('purposeLabel')}{' '}
<span className="capitalize text-text-primary">
{t(
treatmentTypeLabelKey(selectedAppointment.purpose) as 'typeConsultation',
)}
</span>
</p>
</div>
) : (
<div className="surface-card p-3 text-sm text-text-muted">
{apptsLoading ? t('loadingAppointments') : t('selectDayWithAppointment')}
</div>
)}
<TreatmentPreviewCard
draft={currentDraftPreview}
disabled={!selectedAppointment}
onPreview={openCurrentDraftPreview}
/>
2026-05-07 14:20:50 +03:30
<PastTreatmentsPanel
items={history}
loading={historyLoading}
onReviewTreatment={(item) => openPreview(item, 'readonly')}
2026-05-07 14:20:50 +03:30
/>
</div>
<div className="space-y-3 min-w-0 w-full">
<FdiToothChart
selected={selectedTeethSet}
onToggle={(fdi) => {
if (!canEditTreatmentForDay || isDetailLocked(activeDetail)) return;
setDetails((prev) =>
prev.map((d) => {
if (d.clientId !== activeDetailId) return d;
const set = new Set(d.teeth);
if (set.has(fdi)) set.delete(fdi);
else set.add(fdi);
return { ...d, teeth: [...set].sort() as FdiToothId[] };
}),
);
}}
disabled={!canEditTreatmentForDay || isDetailLocked(activeDetail)}
/>
<TreatmentDetailsEditor
details={details}
activeDetailId={activeDetailId}
onActiveDetailChange={setActiveDetailId}
onDetailsChange={setDetails}
isDetailLocked={isDetailLocked}
disabled={!canEditTreatmentForDay}
canEdit={canEdit}
isDirty={isDirty}
saveBusy={saveBusy}
uploadBusy={uploadBusyDetailId === activeDetailId}
onAddDetail={() => {
const next = newDetail();
setDetails((prev) => [...prev, next]);
setActiveDetailId(next.clientId);
}}
onPreview={openCurrentDraftPreview}
onSave={() => void handleSaveAll()}
onUploadFiles={(files) => void uploadForDetail(activeDetailId, files ?? [])}
/>
<LabCasesDispatchPanel
details={details}
labCases={labCaseDrafts}
labDependentCodes={labDependentCodes}
activeLabCaseId={activeLabCaseId}
onActiveLabCaseChange={setActiveLabCaseId}
onLabCasesChange={setLabCaseDrafts}
disabled={!canEditTreatmentForDay}
canEdit={canEdit}
orgs={orgs}
organizationSearch={organizationSearch}
onOrganizationSearchChange={setOrganizationSearch}
recentOrganizationIds={recentOrganizationIds}
onRecentOrganizationPick={(orgId) => {
if (!activeLabCaseId) return;
setLabCaseDrafts((prev) =>
prev.map((lc) =>
lc.clientId === activeLabCaseId && !lc.sentAt
? { ...lc, destinationOrganizationId: orgId }
: lc,
),
);
}}
sendBusyId={sendBusyId}
saveLabBusy={saveLabBusy}
onAddLabCase={() => {
const next = newLabCaseDraft();
setLabCaseDrafts((prev) => [...prev, next]);
setActiveLabCaseId(next.clientId);
}}
onSaveLabCases={() => void handleSaveLabCases()}
onSendLabCase={(lc) => void handleSendLabCase(lc)}
/>
</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>
);
}