feature: a minimal v1 backend implemented for treatments feature.

frontend/src/components/ui/patient/TreatmentHistoryPreview.tsx

@@ -1,37 +0,0 @@
-import { TreatmentHistoryItem } from '@/types/patient';
-
-interface TreatmentHistoryPreviewProps {
-  items: TreatmentHistoryItem[];
-  loading?: boolean;
-}
-
-export function TreatmentHistoryPreview({ items, loading = false }: TreatmentHistoryPreviewProps) {
-  return (
-    <div className="surface-card p-4 space-y-3">
-      <h3 className="text-base font-semibold text-text-primary">Treatment History</h3>
-
-      {loading && <p className="text-sm text-text-muted">Loading treatment history...</p>}
-
-      {!loading && items.length === 0 && (
-        <p className="text-sm text-text-muted">No treatment history yet.</p>
-      )}
-
-      <div className="space-y-2">
-        {items.map((item) => (
-          <div key={item.id} className="border border-border/60 rounded-[var(--radius-sm)] p-3">
-            <div className="flex items-center justify-between">
-              <p className="text-sm font-medium text-text-primary">{item.title}</p>
-              <p className="text-xs text-text-muted">
-                {new Date(item.treatmentAt).toLocaleDateString()}
-              </p>
-            </div>
-            <p className="text-xs text-text-secondary mt-1">
-              Status: {item.status}
-              {item.tooth ? ` | Tooth: ${item.tooth}` : ''}
-            </p>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

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

@@ -153,7 +153,7 @@ export function FdiToothChart({ selected, onToggle, disabled }: FdiToothChartPro
         <div>
           <h3 className="text-sm font-semibold text-text-primary">FDI tooth chart</h3>
           <p className="text-xs text-text-muted mt-0.5">
-            Tap teeth to multi-select (FDI). Selection applies to the active treatment record until you save.
+            Tap teeth to multi-select (FDI). Selection applies to the active treatment case until you save.
           </p>
         </div>
         <div className="flex flex-col gap-2 sm:items-end w-full sm:max-w-xs">

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

@@ -49,15 +49,15 @@ export function PastTreatmentsPanel({
             </div>
             <p className="text-xs text-text-secondary mt-1">Status: {t.status}</p>
 
-            {t.records.length > 0 && (
+            {t.cases.length > 0 && (
               <ul className="mt-2 space-y-1.5 text-xs text-text-secondary">
-                {t.records.map((r) => (
-                  <li key={r.id}>
-                    <span className="text-text-primary font-medium">Record: </span>
-                    <span className="capitalize">{r.treatmentType}</span>
+                {t.cases.map((c) => (
+                  <li key={c.id}>
+                    <span className="text-text-primary font-medium">Case: </span>
+                    <span className="capitalize">{c.treatmentType}</span>
                     {' | '}
-                    {r.teeth.length > 0 ? `Teeth ${[...r.teeth].sort().join(', ')}` : 'No teeth tagged'}
-                    {r.notes ? ` — ${r.notes}` : ''}
+                    {c.teeth.length > 0 ? `Teeth ${[...c.teeth].sort().join(', ')}` : 'No teeth tagged'}
+                    {c.notes ? ` — ${c.notes}` : ''}
                   </li>
                 ))}
               </ul>

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

@@ -9,32 +9,35 @@ import { Button } from '@/components/ui/shared/Button';
 import { Dropdown } from '@/components/ui/shared/Dropdown';
 import { SearchBar } from '@/components/ui/shared/SearchBar';
 import { Toast } from '@/components/ui/shared/Toast';
-import { compareLocalDayStart, isSameLocalCalendarDay, startOfLocalDay } from '@/components/appointments/appointmentTime';
 import {
-  fetchLinkedOrganizations,
-  fetchMyAppointmentsForDay,
-  fetchPastTreatments,
-  saveTreatmentDraft,
-  sendTreatmentRecord,
-} from '@/lib/mocks/treatmentMockApi';
+  addCalendarDays,
+  compareLocalDayStart,
+  isSameLocalCalendarDay,
+  startOfLocalDay,
+} from '@/components/appointments/appointmentTime';
+import { appointmentsApi } from '@/lib/api/appointments';
+import { treatmentsApi } from '@/lib/api/treatments';
 import { pickAutoAppointment } from '@/components/shared/treatmentSelection';
-import { canEditTreatment } from '@/components/shared/permissions';
+import { canEditTreatment, canViewTreatment } from '@/components/shared/permissions';
+import { formatApiErrorMessage } from '@/components/shared/formatApiError';
 import type { Organization } from '@/types/organization';
+import type { AppointmentRecord } from '@/types/appointment';
 import type {
   FdiToothId,
   LinkedOrganizationOption,
   PastTreatment,
+  PastTreatmentCase,
   TreatmentAppointment,
   TreatmentAttachmentMeta,
-  TreatmentRecordDraft,
+  TreatmentCaseDraft,
 } from '@/types/treatment';
 
-function newRecord(): TreatmentRecordDraft {
+function newCase(): TreatmentCaseDraft {
   return {
     clientId:
       typeof crypto !== 'undefined' && 'randomUUID' in crypto
         ? crypto.randomUUID()
-        : `rec-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+        : `case-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
     treatmentType: 'consultation',
     teeth: [],
     comment: '',
@@ -44,12 +47,54 @@ function newRecord(): TreatmentRecordDraft {
   };
 }
 
+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 mapCaseFromApi(c: PastTreatmentCase): TreatmentCaseDraft {
+  return {
+    clientId: c.clientId,
+    id: c.id,
+    treatmentType: c.treatmentType,
+    teeth: c.teeth,
+    comment: c.notes ?? '',
+    attachmentMetas: c.attachmentMetas ?? [],
+    sendToOrganizationIds: c.sendToOrganizationIds ?? [],
+    sentAt: c.sentAt ?? null,
+  };
+}
+
+function serializeCases(cases: TreatmentCaseDraft[]) {
+  return JSON.stringify(
+    cases.map((c) => ({
+      clientId: c.clientId,
+      id: c.id,
+      treatmentType: c.treatmentType,
+      teeth: c.teeth,
+      comment: c.comment,
+      attachmentMetas: c.attachmentMetas,
+      sendToOrganizationIds: c.sendToOrganizationIds,
+      sentAt: c.sentAt,
+    })),
+  );
+}
+
 interface TreatmentWorkspaceProps {
   userId: string;
   currentOrganization: Organization | null;
 }
 
 export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWorkspaceProps) {
+  const canView = canViewTreatment(currentOrganization);
   const canEdit = canEditTreatment(currentOrganization);
 
   const [stripHidden, setStripHidden] = useState(false);
@@ -67,8 +112,9 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
 
   const [orgs, setOrgs] = useState<LinkedOrganizationOption[]>([]);
 
-  const [records, setRecords] = useState<TreatmentRecordDraft[]>(() => [newRecord()]);
-  const [activeRecordId, setActiveRecordId] = useState<string>(() => records[0].clientId);
+  const [cases, setCases] = useState<TreatmentCaseDraft[]>(() => [newCase()]);
+  const [activeCaseId, setActiveCaseId] = useState<string>(() => cases[0].clientId);
+  const [savedSnapshot, setSavedSnapshot] = useState<string | null>(null);
 
   const selectionLockedRef = useRef(selectionLocked);
   selectionLockedRef.current = selectionLocked;
@@ -77,11 +123,20 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
 
   const [saveBusy, setSaveBusy] = useState(false);
   const [sendBusyId, setSendBusyId] = useState<string | null>(null);
+  const [uploadBusy, setUploadBusy] = useState(false);
   const [banner, setBanner] = useState<string | null>(null);
+  const [errorBanner, setErrorBanner] = useState<string | null>(null);
   const [organizationSearch, setOrganizationSearch] = useState('');
   const [recentOrganizationIds, setRecentOrganizationIds] = useState<string[]>([]);
   const [reviewTreatment, setReviewTreatment] = useState<PastTreatment | null>(null);
 
+  const isDirty = useMemo(() => {
+    if (savedSnapshot === null) {
+      return cases.length !== 1 || cases[0].comment !== '' || cases[0].teeth.length > 0;
+    }
+    return serializeCases(cases) !== savedSnapshot;
+  }, [cases, savedSnapshot]);
+
   const selectedAppointment = useMemo(
     () => appointments.find((a) => a.id === selectedAppointmentId) ?? null,
     [appointments, selectedAppointmentId],
@@ -92,14 +147,14 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
     [selectedDay, todayStart],
   );
 
-  const canEditTreatmentForDay = Boolean(selectedAppointment) && !isViewingPastDay;
+  const canEditTreatmentForDay = canEdit && Boolean(selectedAppointment) && !isViewingPastDay;
 
-  const activeRecord = useMemo(
-    () => records.find((r) => r.clientId === activeRecordId) ?? records[0],
-    [records, activeRecordId],
+  const activeCase = useMemo(
+    () => cases.find((c) => c.clientId === activeCaseId) ?? cases[0],
+    [cases, activeCaseId],
   );
 
-  const selectedTeethSet = useMemo(() => new Set(activeRecord.teeth), [activeRecord.teeth]);
+  const selectedTeethSet = useMemo(() => new Set(activeCase.teeth), [activeCase.teeth]);
   const activeLinkedOrganizations = useMemo(() => orgs.filter((o) => o.active), [orgs]);
   const filteredOrganizations = useMemo(() => {
     const q = organizationSearch.trim().toLowerCase();
@@ -114,6 +169,7 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
       .sort((a, b) => recentOrganizationIds.indexOf(a.id) - recentOrganizationIds.indexOf(b.id))
       .slice(0, 3);
   }, [recentOrganizationIds, activeLinkedOrganizations]);
+
   const currentDraftPreview = useMemo<PastTreatment | null>(() => {
     if (!selectedAppointment) return null;
     return {
@@ -122,26 +178,44 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
       title: `Current draft for ${selectedAppointment.patientFirstName} ${selectedAppointment.patientLastName}`,
       treatmentAt: new Date().toISOString(),
       status: 'draft',
-      records: records.map((r, idx) => ({
-        id: r.clientId || `draft-${idx + 1}`,
-        treatmentType: r.treatmentType,
-        teeth: r.teeth,
-        notes: r.comment || null,
+      cases: cases.map((c, idx) => ({
+        id: c.id ?? c.clientId ?? `draft-${idx + 1}`,
+        clientId: c.clientId,
+        treatmentType: c.treatmentType,
+        teeth: c.teeth,
+        notes: c.comment || null,
       })),
-      documents: records.flatMap((r) => r.attachmentMetas),
+      documents: cases.flatMap((c) => c.attachmentMetas),
     };
-  }, [records, selectedAppointment]);
+  }, [cases, selectedAppointment]);
 
   const treatmentTypeTextColor = useMemo(() => {
-    const map: Record<TreatmentRecordDraft['treatmentType'], string> = {
+    const map: Record<TreatmentCaseDraft['treatmentType'], string> = {
       consultation: '#ddd6fe',
       filling: '#fed7aa',
       endo: '#fecaca',
       visit: '#bae6fd',
       hygiene: '#d9f99d',
     };
-    return map[activeRecord.treatmentType];
-  }, [activeRecord.treatmentType]);
+    return map[activeCase.treatmentType];
+  }, [activeCase.treatmentType]);
+
+  const loadDraftForAppointment = useCallback(async (appointmentId: string) => {
+    const response = await treatmentsApi.getDraft(appointmentId);
+    if (response.data?.cases?.length) {
+      const mapped = response.data.cases.map(mapCaseFromApi);
+      setCases(mapped);
+      setActiveCaseId(mapped[0].clientId);
+      setSavedSnapshot(serializeCases(mapped));
+    } else {
+      const first = newCase();
+      setCases([first]);
+      setActiveCaseId(first.clientId);
+      setSavedSnapshot(serializeCases([first]));
+    }
+    setOrganizationSearch('');
+    setReviewTreatment(null);
+  }, []);
 
   useEffect(() => {
     setSelectionLocked(false);
@@ -152,12 +226,24 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
     setApptsLoading(true);
     void (async () => {
       try {
-        const list = await fetchMyAppointmentsForDay(userId, selectedDay);
+        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) {
+          setErrorBanner(formatApiErrorMessage(error, 'Failed to load appointments.'));
+        }
       } finally {
         if (!cancelled) setApptsLoading(false);
       }
@@ -184,8 +270,14 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
   useEffect(() => {
     let cancelled = false;
     void (async () => {
-      const list = await fetchLinkedOrganizations();
-      if (!cancelled) setOrgs(list);
+      try {
+        const list = await treatmentsApi.listLinkedOrganizations();
+        if (!cancelled) setOrgs(list.data);
+      } catch (error: unknown) {
+        if (!cancelled) {
+          setErrorBanner(formatApiErrorMessage(error, 'Failed to load linked organizations.'));
+        }
+      }
     })();
     return () => {
       cancelled = true;
@@ -200,10 +292,17 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
     let cancelled = false;
     setHistoryLoading(true);
     void (async () => {
-      const items = await fetchPastTreatments(selectedAppointment.patientId);
-      if (!cancelled) {
-        setHistory(items);
-        setHistoryLoading(false);
+      try {
+        const response = await treatmentsApi.listPatientHistory(selectedAppointment.patientId);
+        if (!cancelled) {
+          setHistory(response.data);
+        }
+      } catch (error: unknown) {
+        if (!cancelled) {
+          setErrorBanner(formatApiErrorMessage(error, 'Failed to load treatment history.'));
+        }
+      } finally {
+        if (!cancelled) setHistoryLoading(false);
       }
     })();
     return () => {
@@ -212,121 +311,184 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
   }, [selectedAppointment?.patientId]);
 
   useEffect(() => {
-    const first = newRecord();
-    setRecords([first]);
-    setActiveRecordId(first.clientId);
-    setOrganizationSearch('');
-    setReviewTreatment(null);
-  }, [selectedAppointment?.id]);
+    if (!selectedAppointment?.id) return;
+    let cancelled = false;
+    void (async () => {
+      try {
+        await loadDraftForAppointment(selectedAppointment.id);
+      } catch (error: unknown) {
+        if (!cancelled) {
+          setErrorBanner(formatApiErrorMessage(error, 'Failed to load treatment draft.'));
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [selectedAppointment?.id, loadDraftForAppointment]);
 
-  const fixActiveAfterRecordsChange = useCallback((next: TreatmentRecordDraft[]) => {
-    setRecords(next);
-    setActiveRecordId((id) => (next.some((r) => r.clientId === id) ? id : next[0].clientId));
+  const fixActiveAfterCasesChange = useCallback((next: TreatmentCaseDraft[]) => {
+    setCases(next);
+    setActiveCaseId((id) => (next.some((c) => c.clientId === id) ? id : next[0].clientId));
   }, []);
 
   const toggleTooth = useCallback(
     (fdi: FdiToothId) => {
-      if (!canEdit) return;
-      setRecords((prev) =>
-        prev.map((r) => {
-          if (r.clientId !== activeRecordId) return r;
-          const set = new Set(r.teeth);
+      if (!canEditTreatmentForDay) return;
+      setCases((prev) =>
+        prev.map((c) => {
+          if (c.clientId !== activeCaseId) return c;
+          const set = new Set(c.teeth);
           if (set.has(fdi)) set.delete(fdi);
           else set.add(fdi);
-          return { ...r, teeth: [...set].sort() as FdiToothId[] };
+          return { ...c, teeth: [...set].sort() as FdiToothId[] };
         }),
       );
     },
-    [activeRecordId, canEdit],
+    [activeCaseId, canEditTreatmentForDay],
   );
 
-  const onPickAppointment = useCallback((id: string) => {
-    setSelectionLocked(true);
-    setSelectedAppointmentId(id);
-  }, []);
+  const confirmDiscardIfDirty = useCallback(() => {
+    if (!isDirty) return true;
+    return window.confirm('You have unsaved changes. Discard them and continue?');
+  }, [isDirty]);
+
+  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 addAttachments = useCallback(
-    (files: FileList | null) => {
-      if (!files?.length || !canEdit) return;
-      setRecords((prev) =>
-        prev.map((r) => {
-          if (r.clientId !== activeRecordId) return r;
-          const added: TreatmentAttachmentMeta[] = [...r.attachmentMetas];
-          for (let i = 0; i < files.length; i++) {
-            const f = files[i];
-            added.push({
-              id: `local-${Date.now()}-${i}-${Math.random().toString(36).slice(2, 7)}`,
-              fileName: f.name,
-              mimeType: f.type || 'application/octet-stream',
-              sizeBytes: f.size,
-            });
-          }
-          return { ...r, attachmentMetas: added };
-        }),
-      );
+    async (files: FileList | null) => {
+      if (!files?.length || !canEditTreatmentForDay || !selectedAppointment) return;
+      setUploadBusy(true);
+      setErrorBanner(null);
+      try {
+        const uploaded = await treatmentsApi.uploadCaseAttachments(
+          selectedAppointment.id,
+          activeCaseId,
+          Array.from(files),
+        );
+        setCases((prev) =>
+          prev.map((c) => {
+            if (c.clientId !== activeCaseId) return c;
+            return { ...c, attachmentMetas: [...c.attachmentMetas, ...uploaded.data] };
+          }),
+        );
+      } catch (error: unknown) {
+        setErrorBanner(formatApiErrorMessage(error, 'Failed to upload attachments.'));
+      } finally {
+        setUploadBusy(false);
+      }
     },
-    [activeRecordId, canEdit],
+    [activeCaseId, canEditTreatmentForDay, selectedAppointment],
   );
 
+  const persistDraft = useCallback(async () => {
+    if (!selectedAppointment) {
+      throw new Error('No appointment selected');
+    }
+    const response = await treatmentsApi.saveDraft(selectedAppointment.id, {
+      cases: cases.map(({ clientId, id, treatmentType, teeth, comment, attachmentMetas }) => ({
+        clientId,
+        id,
+        treatmentType,
+        teeth,
+        comment,
+        attachmentIds: attachmentMetas.map((a) => a.id),
+      })),
+    });
+    const mapped = response.data.cases.map(mapCaseFromApi);
+    setCases(mapped);
+    setActiveCaseId((prev) => {
+      const stillExists = mapped.some((c) => c.clientId === prev);
+      return stillExists ? prev : mapped[0]?.clientId ?? prev;
+    });
+    setSavedSnapshot(serializeCases(mapped));
+    return response.data;
+  }, [cases, selectedAppointment]);
+
   const handleSaveAll = useCallback(async () => {
-    if (!canEdit || !selectedAppointment) return;
+    if (!canEditTreatmentForDay || !selectedAppointment) return;
     setSaveBusy(true);
     setBanner(null);
+    setErrorBanner(null);
     try {
-      await saveTreatmentDraft({
-        appointmentId: selectedAppointment.id,
-        patientId: selectedAppointment.patientId,
-        records: records.map(({ clientId: _c, sentAt: _s, ...rest }) => rest),
-      });
-      setBanner('Treatment draft saved (mock). You can send records later.');
+      await persistDraft();
+      setBanner('Treatment draft saved. You can send cases later.');
+    } catch (error: unknown) {
+      setErrorBanner(formatApiErrorMessage(error, 'Failed to save treatment draft.'));
     } finally {
       setSaveBusy(false);
     }
-  }, [canEdit, selectedAppointment, records]);
+  }, [canEditTreatmentForDay, selectedAppointment, persistDraft]);
 
-  const handleSendRecord = useCallback(
-    async (record: TreatmentRecordDraft) => {
-      if (!canEdit || !selectedAppointment) return;
-      const targets = record.sendToOrganizationIds.filter((id) =>
+  const handleSendCase = useCallback(
+    async (treatmentCase: TreatmentCaseDraft) => {
+      if (!canEditTreatmentForDay || !selectedAppointment) return;
+      const targets = treatmentCase.sendToOrganizationIds.filter((id) =>
         orgs.some((o) => o.id === id && o.active),
       );
       if (targets.length === 0) {
-        setBanner('Choose at least one active organization to send this record.');
+        setErrorBanner('Choose at least one active organization to send this case.');
         return;
       }
-      setSendBusyId(record.clientId);
+      setSendBusyId(treatmentCase.clientId);
       setBanner(null);
+      setErrorBanner(null);
       try {
-        await sendTreatmentRecord({
-          appointmentId: selectedAppointment.id,
-          patientId: selectedAppointment.patientId,
-          recordClientId: record.clientId,
-          organizationIds: targets,
+        const saved = await persistDraft();
+        const serverCase = saved.cases.find((c) => c.clientId === treatmentCase.clientId);
+        if (!serverCase?.id) {
+          throw new Error('Case must be saved before sending.');
+        }
+        const response = await treatmentsApi.sendCase(serverCase.id, { organizationIds: targets });
+        setCases((prev) => {
+          const next = prev.map((c) =>
+            c.clientId === treatmentCase.clientId
+              ? {
+                  ...c,
+                  id: response.data.id,
+                  sentAt: response.data.sentAt,
+                  sendToOrganizationIds: response.data.sendToOrganizationIds,
+                }
+              : c,
+          );
+          setSavedSnapshot(serializeCases(next));
+          return next;
         });
-        setRecords((prev) =>
-          prev.map((r) =>
-            r.clientId === record.clientId ? { ...r, sentAt: new Date().toISOString() } : r,
-          ),
-        );
         setRecentOrganizationIds((prev) => {
-          const next = [...record.sendToOrganizationIds.filter((id) => id && !prev.includes(id)), ...prev];
+          const next = [...targets.filter((id) => id && !prev.includes(id)), ...prev];
           return next.slice(0, 10);
         });
-        setBanner('Record sent to selected organizations (mock).');
+        setBanner('Case sent to selected organizations.');
+      } catch (error: unknown) {
+        setErrorBanner(formatApiErrorMessage(error, 'Failed to send case.'));
       } finally {
         setSendBusyId(null);
       }
     },
-    [canEdit, selectedAppointment, orgs],
+    [canEditTreatmentForDay, selectedAppointment, orgs, persistDraft, cases],
   );
 
-  if (!canEdit) {
+  if (!canView) {
     return (
       <div className="surface-card p-6 max-w-xl">
         <h2 className="text-lg font-semibold text-text-primary">Treatment workspace</h2>
         <p className="text-sm text-text-secondary mt-2">
-          Your role can view the Treatment tab, but editing clinical workflows requires{' '}
-          <span className="text-text-primary font-medium">Treatment edit</span> permission.
+          You do not have permission to view the Treatment tab for this organization.
         </p>
       </div>
     );
@@ -337,7 +499,9 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
       <header className="space-y-1">
         <h1 className="text-2xl font-semibold text-text-primary">Treatment</h1>
         <p className="text-sm text-text-secondary">
-          Mocked data — appointments, history, save, and send are simulated until backend endpoints exist.
+          {canEdit
+            ? 'Document cases for your appointments, save drafts, and send work to linked organizations.'
+            : 'View-only access — you can review appointments and treatment history but cannot edit.'}
         </p>
       </header>
 
@@ -345,7 +509,7 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
         stripHidden={stripHidden}
         onToggleStripHidden={() => setStripHidden((s) => !s)}
         selectedDay={selectedDay}
-        onSelectDay={setSelectedDay}
+        onSelectDay={onSelectDay}
         appointments={appointments}
         selectedAppointmentId={selectedAppointmentId}
         onSelectAppointment={onPickAppointment}
@@ -354,7 +518,7 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
 
       {isViewingPastDay && (
         <p className="text-sm text-text-secondary rounded-[var(--radius-md)] border border-border/60 bg-background-secondary/50 px-3 py-2">
-          Past days are view-only. You can review appointments and history, but treatment records
+          Past days are view-only. You can review appointments and history, but treatment cases
           cannot be added or changed.
         </p>
       )}
@@ -411,16 +575,16 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
                 </div>
                 <p className="text-xs text-text-secondary capitalize">Status: {reviewTreatment.status}</p>
                 <div className="space-y-2">
-                  {reviewTreatment.records.map((r, idx) => (
-                    <div key={r.id} className="rounded-[var(--radius-sm)] border border-border/60 px-2.5 py-2">
-                      <p className="text-xs text-text-primary font-medium">Record {idx + 1}</p>
+                  {reviewTreatment.cases.map((c, idx) => (
+                    <div key={c.id} className="rounded-[var(--radius-sm)] border border-border/60 px-2.5 py-2">
+                      <p className="text-xs text-text-primary font-medium">Case {idx + 1}</p>
                       <p className="text-xs text-text-secondary capitalize mt-1">
-                        Type: {r.treatmentType}
+                        Type: {c.treatmentType}
                       </p>
                       <p className="text-xs text-text-secondary">
-                        Teeth: {r.teeth.length ? [...r.teeth].sort().join(', ') : 'None selected'}
+                        Teeth: {c.teeth.length ? [...c.teeth].sort().join(', ') : 'None selected'}
                       </p>
-                      {r.notes && <p className="text-xs text-text-muted mt-1">Notes: {r.notes}</p>}
+                      {c.notes && <p className="text-xs text-text-muted mt-1">Notes: {c.notes}</p>}
                     </div>
                   ))}
                 </div>
@@ -442,9 +606,9 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
           <div className="surface-card p-4 space-y-4">
             <div className="flex flex-wrap items-center justify-between gap-3">
               <div>
-                <h3 className="text-sm font-semibold text-text-primary">Treatment records</h3>
+                <h3 className="text-sm font-semibold text-text-primary">Treatment cases</h3>
                 <p className="text-xs text-text-muted mt-0.5">
-                  Each record has its own teeth, notes, attachments, and destinations for send.
+                  Each case has its own teeth, notes, attachments, and destinations for send.
                 </p>
               </div>
               <Button
@@ -452,54 +616,52 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
                 variant="primary"
                 disabled={!canEditTreatmentForDay}
                 onClick={() => {
-                  const nr = newRecord();
-                  fixActiveAfterRecordsChange([...records, nr]);
-                  setActiveRecordId(nr.clientId);
+                  const nextCase = newCase();
+                  fixActiveAfterCasesChange([...cases, nextCase]);
+                  setActiveCaseId(nextCase.clientId);
                 }}
               >
-                Add record
+                Add case
               </Button>
             </div>
 
             <div className="flex flex-wrap gap-2">
-              {records.map((r, idx) => (
+              {cases.map((c, idx) => (
                 <button
-                  key={r.clientId}
+                  key={c.clientId}
                   type="button"
-                  onClick={() => setActiveRecordId(r.clientId)}
+                  onClick={() => setActiveCaseId(c.clientId)}
                   className={`
                     rounded-[var(--radius-md)] border px-3 py-1.5 text-sm transition-colors
                     focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/45
                     ${
-                      r.clientId === activeRecordId
+                      c.clientId === activeCaseId
                         ? 'border-primary bg-primary-soft font-medium text-text-primary'
                         : 'border-border/70 text-text-secondary hover:border-border hover:bg-background-card/50'
                     }
                   `}
                 >
-                  Record {idx + 1}
-                  {r.sentAt ? ' · sent' : ''}
+                  Case {idx + 1}
+                  {c.sentAt ? ' · sent' : ''}
                 </button>
               ))}
             </div>
 
-            {activeRecord && (
+            {activeCase && (
               <div className="space-y-4 border border-border/60 rounded-[var(--radius-md)] p-4 bg-background-secondary/30">
                 <label className="block text-xs font-medium text-text-secondary">
                   Comments
                   <textarea
-                    value={activeRecord.comment}
+                    value={activeCase.comment}
                     onChange={(e) => {
                       const v = e.target.value;
-                      setRecords((prev) =>
-                        prev.map((r) =>
-                          r.clientId === activeRecordId ? { ...r, comment: v } : r,
-                        ),
+                      setCases((prev) =>
+                        prev.map((c) => (c.clientId === activeCaseId ? { ...c, comment: v } : c)),
                       );
                     }}
-                    placeholder="Write clinical notes for this record…"
+                    placeholder="Write clinical notes for this case…"
                     rows={5}
-                    disabled={!canEditTreatmentForDay}
+                    disabled={!canEditTreatmentForDay || Boolean(activeCase.sentAt)}
                     className="mt-1.5 w-full rounded-[var(--radius-md)] border border-border bg-background-secondary/90 text-text-primary text-sm px-3 py-2 placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-primary/35 resize-y min-h-[120px]"
                   />
                 </label>
@@ -507,16 +669,16 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
                 <div>
                   <Dropdown
                     label="Treatment type"
-                    value={activeRecord.treatmentType}
+                    value={activeCase.treatmentType}
                     onChange={(e) => {
-                      const nextType = e.target.value as TreatmentRecordDraft['treatmentType'];
-                      setRecords((prev) =>
-                        prev.map((r) =>
-                          r.clientId === activeRecordId ? { ...r, treatmentType: nextType } : r,
+                      const nextType = e.target.value as TreatmentCaseDraft['treatmentType'];
+                      setCases((prev) =>
+                        prev.map((c) =>
+                          c.clientId === activeCaseId ? { ...c, treatmentType: nextType } : c,
                         ),
                       );
                     }}
-                    disabled={!canEditTreatmentForDay}
+                    disabled={!canEditTreatmentForDay || Boolean(activeCase.sentAt)}
                     className="capitalize"
                     style={{ color: treatmentTypeTextColor }}
                   >
@@ -529,32 +691,33 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
                 </div>
 
                 <div>
-                  <p className="text-xs font-medium text-text-secondary mb-2">Attachments (mock)</p>
+                  <p className="text-xs font-medium text-text-secondary mb-2">Attachments</p>
                   <input
                     ref={attachmentInputRef}
-                    id="treatment-record-attachments"
+                    id="treatment-case-attachments"
                     type="file"
                     multiple
-                    disabled={!canEditTreatmentForDay}
+                    disabled={!canEditTreatmentForDay || uploadBusy || Boolean(activeCase.sentAt)}
                     onChange={(e) => {
-                      addAttachments(e.target.files);
+                      void addAttachments(e.target.files);
                       e.target.value = '';
                     }}
                     className="sr-only"
-                    aria-label="Attach files for this treatment record"
+                    aria-label="Attach files for this treatment case"
                   />
                   <Button
                     type="button"
                     variant="primary"
-                    disabled={!canEditTreatmentForDay}
+                    disabled={!canEditTreatmentForDay || uploadBusy || Boolean(activeCase.sentAt)}
+                    isLoading={uploadBusy}
                     onClick={() => attachmentInputRef.current?.click()}
-                    aria-controls="treatment-record-attachments"
+                    aria-controls="treatment-case-attachments"
                   >
                     Choose files
                   </Button>
-                  {activeRecord.attachmentMetas.length > 0 && (
+                  {activeCase.attachmentMetas.length > 0 && (
                     <ul className="mt-2 space-y-1 text-xs text-text-muted">
-                      {activeRecord.attachmentMetas.map((f) => (
+                      {activeCase.attachmentMetas.map((f) => (
                         <li key={f.id} className="truncate">
                           {f.fileName} ({(f.sizeBytes / 1024).toFixed(1)} KB)
                         </li>
@@ -565,7 +728,7 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
 
                 <div>
                   <p className="text-xs font-medium text-text-secondary mb-2">
-                    Send this record to linked organizations
+                    Send this case to linked organizations
                   </p>
                   <div className="space-y-2 mb-2">
                     <SearchBar
@@ -580,16 +743,17 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
                           <button
                             key={o.id}
                             type="button"
+                            disabled={!canEditTreatmentForDay || Boolean(activeCase.sentAt)}
                             onClick={() => {
-                              setRecords((prev) =>
-                                prev.map((r) => {
-                                  if (r.clientId !== activeRecordId || r.sentAt) return r;
-                                  if (r.sendToOrganizationIds.includes(o.id)) return r;
-                                  return { ...r, sendToOrganizationIds: [...r.sendToOrganizationIds, o.id] };
+                              setCases((prev) =>
+                                prev.map((c) => {
+                                  if (c.clientId !== activeCaseId || c.sentAt) return c;
+                                  if (c.sendToOrganizationIds.includes(o.id)) return c;
+                                  return { ...c, sendToOrganizationIds: [...c.sendToOrganizationIds, o.id] };
                                 }),
                               );
                             }}
-                            className="text-xs rounded-[var(--radius-sm)] border border-border/70 px-2 py-1 text-text-secondary hover:text-text-primary hover:border-border focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"
+                            className="text-xs rounded-[var(--radius-sm)] border border-border/70 px-2 py-1 text-text-secondary hover:text-text-primary hover:border-border focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 disabled:opacity-50"
                           >
                             {o.name}
                           </button>
@@ -601,20 +765,20 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
                     {filteredOrganizations.map((o) => (
                       <Checkbox
                         key={o.id}
-                        checked={activeRecord.sendToOrganizationIds.includes(o.id)}
-                        disabled={!canEditTreatmentForDay || Boolean(activeRecord.sentAt)}
+                        checked={activeCase.sendToOrganizationIds.includes(o.id)}
+                        disabled={!canEditTreatmentForDay || Boolean(activeCase.sentAt)}
                         onChange={(checked) => {
-                          setRecords((prev) =>
-                            prev.map((r) => {
-                              if (r.clientId !== activeRecordId) return r;
-                              const next = new Set(r.sendToOrganizationIds);
+                          setCases((prev) =>
+                            prev.map((c) => {
+                              if (c.clientId !== activeCaseId) return c;
+                              const next = new Set(c.sendToOrganizationIds);
                               if (checked) next.add(o.id);
                               else next.delete(o.id);
-                              return { ...r, sendToOrganizationIds: [...next] };
+                              return { ...c, sendToOrganizationIds: [...next] };
                             }),
                           );
                         }}
-                        label={`${o.name}${o.active ? '' : ' (inactive)'}`}
+                        label={o.name}
                       />
                     ))}
                     {filteredOrganizations.length === 0 && (
@@ -627,43 +791,54 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
                   <Button
                     type="button"
                     variant="primary"
-                    disabled={!canEditTreatmentForDay || Boolean(activeRecord.sentAt) || sendBusyId === activeRecord.clientId}
-                    isLoading={sendBusyId === activeRecord.clientId}
-                    onClick={() => void handleSendRecord(activeRecord)}
+                    disabled={
+                      !canEditTreatmentForDay ||
+                      Boolean(activeCase.sentAt) ||
+                      sendBusyId === activeCase.clientId
+                    }
+                    isLoading={sendBusyId === activeCase.clientId}
+                    onClick={() => void handleSendCase(activeCase)}
                   >
-                    Send this record
+                    Send this case
                   </Button>
-                  {activeRecord.sentAt && (
+                  {activeCase.sentAt && (
                     <span className="text-xs text-text-muted">
-                      Sent at {new Date(activeRecord.sentAt).toLocaleString()}
+                      Sent at {new Date(activeCase.sentAt).toLocaleString()}
                     </span>
                   )}
                 </div>
               </div>
             )}
 
-            <div className="flex flex-wrap gap-3 pt-2 border-t border-border/60">
-              <Button
-                type="button"
-                variant="primary"
-                disabled={!canEditTreatmentForDay || saveBusy}
-                isLoading={saveBusy}
-                onClick={() => void handleSaveAll()}
-              >
-                Save treatment draft
-              </Button>
-              <p className="text-xs text-text-muted self-center">
-                Saving stores all records locally (mock). Sending is per record and can happen after save.
-              </p>
-            </div>
+            {canEdit && (
+              <div className="flex flex-wrap gap-3 pt-2 border-t border-border/60">
+                <Button
+                  type="button"
+                  variant="primary"
+                  disabled={!canEditTreatmentForDay || saveBusy}
+                  isLoading={saveBusy}
+                  onClick={() => void handleSaveAll()}
+                >
+                  Save treatment draft
+                </Button>
+                <p className="text-xs text-text-muted self-center">
+                  {isDirty ? 'Unsaved changes' : 'Draft saved'}. Sending is per case and saves first automatically.
+                </p>
+              </div>
+            )}
           </div>
         </div>
       </div>
 
-      {banner && (
+      {(banner || errorBanner) && (
         <div className="fixed bottom-4 left-0 right-0 z-[70] px-4 pointer-events-none">
           <div className="pointer-events-auto w-full">
-            <Toast variant="success">{banner}</Toast>
+            {banner && <Toast variant="success">{banner}</Toast>}
+            {errorBanner && (
+              <div className={banner ? 'mt-2' : ''}>
+                <Toast variant="danger">{errorBanner}</Toast>
+              </div>
+            )}
           </div>
         </div>
       )}