feature: Preview added for treatments.

frontend/src/components/ui/appointments/AppointmentBookingModal.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import { X } from 'lucide-react';
 import { Button } from '@/components/ui/common/Button';
 import { Dropdown } from '@/components/ui/common/Dropdown';
-import { APPOINTMENT_PURPOSES, type AppointmentPurpose } from '@/types/appointment';
+import type { AppointmentPurpose } from '@/types/appointment';
 import { APPOINTMENT_PURPOSE_LABEL } from '@/components/ui/appointments/appointmentPurposeStyles';
 import type { Patient } from '@/types/patient';
 import {
@@ -46,6 +46,16 @@ export function AppointmentBookingModal({
   const [endTime, setEndTime] = useState('10:00');
   const [purpose, setPurpose] = useState<AppointmentPurpose>('consultation');
   const [error, setError] = useState('');
+  const purposeTextColor =
+    purpose === 'consultation'
+      ? '#ddd6fe'
+      : purpose === 'filling'
+        ? '#fed7aa'
+        : purpose === 'endo'
+          ? '#fecaca'
+          : purpose === 'visit'
+            ? '#bae6fd'
+            : '#d9f99d';
 
   useEffect(() => {
     if (!open) {
@@ -175,12 +185,23 @@ export function AppointmentBookingModal({
           label="Purpose"
           value={purpose}
           onChange={(e) => setPurpose(e.target.value as AppointmentPurpose)}
+          style={{ color: purposeTextColor }}
         >
-          {APPOINTMENT_PURPOSES.map((p) => (
+          <option value="consultation" style={{ color: '#ddd6fe', backgroundColor: '#14253d' }}>
-            <option key={p} value={p}>
+            {APPOINTMENT_PURPOSE_LABEL.consultation}
-              {APPOINTMENT_PURPOSE_LABEL[p]}
+          </option>
+          <option value="filling" style={{ color: '#fed7aa', backgroundColor: '#14253d' }}>
+            {APPOINTMENT_PURPOSE_LABEL.filling}
+          </option>
+          <option value="endo" style={{ color: '#fecaca', backgroundColor: '#14253d' }}>
+            {APPOINTMENT_PURPOSE_LABEL.endo}
+          </option>
+          <option value="visit" style={{ color: '#bae6fd', backgroundColor: '#14253d' }}>
+            {APPOINTMENT_PURPOSE_LABEL.visit}
+          </option>
+          <option value="hygiene" style={{ color: '#d9f99d', backgroundColor: '#14253d' }}>
+            {APPOINTMENT_PURPOSE_LABEL.hygiene}
           </option>
-          ))}
         </Dropdown>
 
         {error && <p className="text-sm text-red-400">{error}</p>}

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

@@ -6,9 +6,16 @@ import type { PastTreatment } from '@/types/treatment';
 interface PastTreatmentsPanelProps {
   items: PastTreatment[];
   loading?: boolean;
+  selectedTreatmentId?: string | null;
+  onSelectTreatment?: (treatment: PastTreatment) => void;
 }
 
-export function PastTreatmentsPanel({ items, loading }: PastTreatmentsPanelProps) {
+export function PastTreatmentsPanel({
+  items,
+  loading,
+  selectedTreatmentId,
+  onSelectTreatment,
+}: PastTreatmentsPanelProps) {
   return (
     <div className="surface-card p-4 space-y-3">
       <div>
@@ -28,7 +35,11 @@ export function PastTreatmentsPanel({ items, loading }: PastTreatmentsPanelProps
         {items.map((t) => (
           <article
             key={t.id}
-            className="border border-border/70 rounded-[var(--radius-md)] p-3 bg-background-secondary/40"
+            className={`border rounded-[var(--radius-md)] p-3 ${
+              selectedTreatmentId === t.id
+                ? 'border-primary/70 bg-primary-soft/35'
+                : 'border-border/70 bg-background-secondary/40'
+            }`}
           >
             <div className="flex items-start justify-between gap-2">
               <p className="text-sm font-medium text-text-primary">{t.title}</p>
@@ -43,6 +54,8 @@ export function PastTreatmentsPanel({ items, loading }: PastTreatmentsPanelProps
                 {t.records.map((r) => (
                   <li key={r.id}>
                     <span className="text-text-primary font-medium">Record: </span>
+                    <span className="capitalize">{r.treatmentType}</span>
+                    {' | '}
                     {r.teeth.length > 0 ? `Teeth ${[...r.teeth].sort().join(', ')}` : 'No teeth tagged'}
                     {r.notes ? ` — ${r.notes}` : ''}
                   </li>
@@ -50,6 +63,18 @@ export function PastTreatmentsPanel({ items, loading }: PastTreatmentsPanelProps
               </ul>
             )}
 
+            {onSelectTreatment && (
+              <div className="mt-3 pt-2 border-t border-border/50 flex justify-end">
+                <button
+                  type="button"
+                  onClick={() => onSelectTreatment(t)}
+                  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"
+                >
+                  Review details
+                </button>
+              </div>
+            )}
+
             {t.documents.length > 0 && (
               <div className="mt-3 pt-2 border-t border-border/50">
                 <p className="text-[11px] uppercase tracking-wide text-text-muted mb-1.5">Attachments</p>

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

@@ -6,6 +6,8 @@ import { FdiToothChart } from '@/components/ui/treatment/FdiToothChart';
 import { PastTreatmentsPanel } from '@/components/ui/treatment/PastTreatmentsPanel';
 import { Checkbox } from '@/components/ui/common/Checkbox';
 import { Button } from '@/components/ui/common/Button';
+import { Dropdown } from '@/components/ui/common/Dropdown';
+import { SearchBar } from '@/components/ui/common/SearchBar';
 import { isSameLocalCalendarDay, startOfLocalDay } from '@/lib/appointmentTime';
 import {
   fetchLinkedOrganizations,
@@ -32,6 +34,7 @@ function newRecord(): TreatmentRecordDraft {
       typeof crypto !== 'undefined' && 'randomUUID' in crypto
         ? crypto.randomUUID()
         : `rec-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+    treatmentType: 'consultation',
     teeth: [],
     comment: '',
     attachmentMetas: [],
@@ -74,6 +77,9 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
   const [saveBusy, setSaveBusy] = useState(false);
   const [sendBusyId, setSendBusyId] = useState<string | null>(null);
   const [banner, setBanner] = useState<string | null>(null);
+  const [organizationSearch, setOrganizationSearch] = useState('');
+  const [recentOrganizationIds, setRecentOrganizationIds] = useState<string[]>([]);
+  const [reviewTreatment, setReviewTreatment] = useState<PastTreatment | null>(null);
 
   const selectedAppointment = useMemo(
     () => appointments.find((a) => a.id === selectedAppointmentId) ?? null,
@@ -86,6 +92,48 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
   );
 
   const selectedTeethSet = useMemo(() => new Set(activeRecord.teeth), [activeRecord.teeth]);
+  const activeLinkedOrganizations = useMemo(() => orgs.filter((o) => o.active), [orgs]);
+  const filteredOrganizations = useMemo(() => {
+    const q = organizationSearch.trim().toLowerCase();
+    if (!q) return activeLinkedOrganizations;
+    return activeLinkedOrganizations.filter((o) => o.name.toLowerCase().includes(q));
+  }, [organizationSearch, activeLinkedOrganizations]);
+  const recentOrganizations = useMemo(() => {
+    if (recentOrganizationIds.length === 0) return [];
+    const recentSet = new Set(recentOrganizationIds);
+    return activeLinkedOrganizations
+      .filter((o) => recentSet.has(o.id))
+      .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 {
+      id: 'current-draft',
+      patientId: selectedAppointment.patientId,
+      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,
+      })),
+      documents: records.flatMap((r) => r.attachmentMetas),
+    };
+  }, [records, selectedAppointment]);
+
+  const treatmentTypeTextColor = useMemo(() => {
+    const map: Record<TreatmentRecordDraft['treatmentType'], string> = {
+      consultation: '#ddd6fe',
+      filling: '#fed7aa',
+      endo: '#fecaca',
+      visit: '#bae6fd',
+      hygiene: '#d9f99d',
+    };
+    return map[activeRecord.treatmentType];
+  }, [activeRecord.treatmentType]);
 
   useEffect(() => {
     setSelectionLocked(false);
@@ -159,6 +207,8 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
     const first = newRecord();
     setRecords([first]);
     setActiveRecordId(first.clientId);
+    setOrganizationSearch('');
+    setReviewTreatment(null);
   }, [selectedAppointment?.id]);
 
   const fixActiveAfterRecordsChange = useCallback((next: TreatmentRecordDraft[]) => {
@@ -250,6 +300,10 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
             r.clientId === record.clientId ? { ...r, sentAt: new Date().toISOString() } : r,
           ),
         );
+        setRecentOrganizationIds((prev) => {
+          const next = [...record.sendToOrganizationIds.filter((id) => id && !prev.includes(id)), ...prev];
+          return next.slice(0, 10);
+        });
         setBanner('Record sent to selected organizations (mock).');
       } finally {
         setSendBusyId(null);
@@ -316,7 +370,58 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
             </div>
           )}
 
-          <PastTreatmentsPanel items={history} loading={historyLoading} />
+          <PastTreatmentsPanel
+            items={history}
+            loading={historyLoading}
+            selectedTreatmentId={reviewTreatment?.id ?? null}
+            onSelectTreatment={setReviewTreatment}
+          />
+          <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">Treatment review</h3>
+              <Button
+                type="button"
+                variant="primary"
+                disabled={!selectedAppointment}
+                onClick={() => setReviewTreatment(currentDraftPreview)}
+              >
+                Preview current treatment
+              </Button>
+            </div>
+            {!reviewTreatment && (
+              <p className="text-sm text-text-muted">
+                Select a treatment from history, or preview the current draft.
+              </p>
+            )}
+            {reviewTreatment && (
+              <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">{reviewTreatment.title}</p>
+                  <span className="text-xs text-text-muted tabular-nums">
+                    {new Date(reviewTreatment.treatmentAt).toLocaleDateString()}
+                  </span>
+                </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>
+                      <p className="text-xs text-text-secondary capitalize mt-1">
+                        Type: {r.treatmentType}
+                      </p>
+                      <p className="text-xs text-text-secondary">
+                        Teeth: {r.teeth.length ? [...r.teeth].sort().join(', ') : 'None selected'}
+                      </p>
+                      {r.notes && <p className="text-xs text-text-muted mt-1">Notes: {r.notes}</p>}
+                    </div>
+                  ))}
+                </div>
+                <p className="text-xs text-text-muted">
+                  Attachments: {reviewTreatment.documents.length}
+                </p>
+              </div>
+            )}
+          </div>
         </div>
 
         <div className="space-y-4 min-w-0">
@@ -391,6 +496,30 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
                   />
                 </label>
 
+                <div>
+                  <Dropdown
+                    label="Treatment type"
+                    value={activeRecord.treatmentType}
+                    onChange={(e) => {
+                      const nextType = e.target.value as TreatmentRecordDraft['treatmentType'];
+                      setRecords((prev) =>
+                        prev.map((r) =>
+                          r.clientId === activeRecordId ? { ...r, treatmentType: nextType } : r,
+                        ),
+                      );
+                    }}
+                    disabled={!selectedAppointment}
+                    className="capitalize"
+                    style={{ color: treatmentTypeTextColor }}
+                  >
+                    <option value="consultation" style={{ color: '#ddd6fe', backgroundColor: '#14253d' }} className="capitalize">consultation</option>
+                    <option value="filling" style={{ color: '#fed7aa', backgroundColor: '#14253d' }} className="capitalize">filling</option>
+                    <option value="endo" style={{ color: '#fecaca', backgroundColor: '#14253d' }} className="capitalize">endo</option>
+                    <option value="visit" style={{ color: '#bae6fd', backgroundColor: '#14253d' }} className="capitalize">visit</option>
+                    <option value="hygiene" style={{ color: '#d9f99d', backgroundColor: '#14253d' }} className="capitalize">hygiene</option>
+                  </Dropdown>
+                </div>
+
                 <div>
                   <p className="text-xs font-medium text-text-secondary mb-2">Attachments (mock)</p>
                   <input
@@ -430,12 +559,42 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
                   <p className="text-xs font-medium text-text-secondary mb-2">
                     Send this record to linked organizations
                   </p>
+                  <div className="space-y-2 mb-2">
+                    <SearchBar
+                      value={organizationSearch}
+                      onChange={setOrganizationSearch}
+                      placeholder="Search active organizations..."
+                    />
+                    {recentOrganizations.length > 0 && (
+                      <div className="flex flex-wrap items-center gap-2">
+                        <span className="text-xs text-text-muted">Recent:</span>
+                        {recentOrganizations.map((o) => (
+                          <button
+                            key={o.id}
+                            type="button"
+                            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] };
+                                }),
+                              );
+                            }}
+                            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"
+                          >
+                            {o.name}
+                          </button>
+                        ))}
+                      </div>
+                    )}
+                  </div>
                   <div className="flex flex-col gap-2">
-                    {orgs.map((o) => (
+                    {filteredOrganizations.map((o) => (
                       <Checkbox
                         key={o.id}
                         checked={activeRecord.sendToOrganizationIds.includes(o.id)}
-                        disabled={!o.active || !selectedAppointment || Boolean(activeRecord.sentAt)}
+                        disabled={!selectedAppointment || Boolean(activeRecord.sentAt)}
                         onChange={(checked) => {
                           setRecords((prev) =>
                             prev.map((r) => {
@@ -450,6 +609,9 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
                         label={`${o.name}${o.active ? '' : ' (inactive)'}`}
                       />
                     ))}
+                    {filteredOrganizations.length === 0 && (
+                      <p className="text-xs text-text-muted">No active organization matches your search.</p>
+                    )}
                   </div>
                 </div>
 

frontend/src/lib/mocks/treatmentMockApi.ts

@@ -108,6 +108,7 @@ const MOCK_HISTORY: Record<string, PastTreatment[]> = {
       records: [
         {
           id: 'ptr-1',
+          treatmentType: 'endo',
           teeth: ['45'] as FdiToothId[],
           notes: 'Instrumented and temporized.',
         },
@@ -136,6 +137,7 @@ const MOCK_HISTORY: Record<string, PastTreatment[]> = {
       records: [
         {
           id: 'ptr-2',
+          treatmentType: 'filling',
           teeth: ['14', '15'] as FdiToothId[],
           notes: 'Composite restoration.',
         },
@@ -157,7 +159,7 @@ const MOCK_HISTORY: Record<string, PastTreatment[]> = {
       title: 'Hygiene visit',
       treatmentAt: addCalendarDays(new Date(), -21).toISOString(),
       status: 'completed',
-      records: [{ id: 'ptr-a', teeth: [], notes: 'Scale & polish.' }],
+      records: [{ id: 'ptr-a', treatmentType: 'hygiene', teeth: [], notes: 'Scale & polish.' }],
       documents: [],
     },
   ],

frontend/src/types/treatment.ts

@@ -51,8 +51,19 @@ export interface TreatmentAttachmentMeta {
   sizeBytes: number;
 }
 
+export const TREATMENT_TYPES = [
+  'consultation',
+  'filling',
+  'endo',
+  'visit',
+  'hygiene',
+] as const;
+
+export type TreatmentType = (typeof TREATMENT_TYPES)[number];
+
 export interface PastTreatmentRecord {
   id: string;
+  treatmentType: TreatmentType;
   teeth: FdiToothId[];
   notes?: string | null;
 }
@@ -75,6 +86,7 @@ export interface LinkedOrganizationOption {
 
 export interface TreatmentRecordDraft {
   clientId: string;
+  treatmentType: TreatmentType;
   teeth: FdiToothId[];
   comment: string;
   attachmentMetas: TreatmentAttachmentMeta[];