feature: Preview added for treatments.

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>