feature: Preview added for treatments.

2026-05-07 14:20:50 +03:30
parent 58cb35e26d
commit c2d490a5e7
5 changed files with 234 additions and 12 deletions
--- a/frontend/src/components/ui/appointments/AppointmentBookingModal.tsx
+++ b/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 key={p} value={p}>
-              {APPOINTMENT_PURPOSE_LABEL[p]}
-            </option>
-          ))}
+          <option value="consultation" style={{ color: '#ddd6fe', backgroundColor: '#14253d' }}>
+            {APPOINTMENT_PURPOSE_LABEL.consultation}
+          </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>}
--- a/frontend/src/components/ui/treatment/PastTreatmentsPanel.tsx
+++ b/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>
--- a/frontend/src/components/ui/treatment/TreatmentWorkspace.tsx
+++ b/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>

--- a/frontend/src/lib/mocks/treatmentMockApi.ts
+++ b/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: [],
    },
  ],
--- a/frontend/src/types/treatment.ts
+++ b/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[];