improvement: appointment dialog UX improved.

2026-07-12 22:07:11 +03:30
parent 53b43f2cdb
commit abf0371a5b
18 changed files with 1006 additions and 759 deletions
--- a/backend/src/common/errors/error-codes.ts
+++ b/backend/src/common/errors/error-codes.ts
@@ -61,6 +61,7 @@ export const ErrorCode = {
  NOT_FOUND: 'NOT_FOUND',
  CONFLICT: 'CONFLICT',
  CONFLICT_FUTURE_APPOINTMENTS: 'CONFLICT_FUTURE_APPOINTMENTS',
+  APPOINTMENT_PATIENT_LOCKED: 'APPOINTMENT_PATIENT_LOCKED',
  BAD_REQUEST: 'BAD_REQUEST',
  INTERNAL_ERROR: 'INTERNAL_ERROR',
 } as const;
--- a/backend/src/modules/appointments/appointments.service.ts
+++ b/backend/src/modules/appointments/appointments.service.ts
@@ -104,11 +104,18 @@ export class AppointmentsService {
        patient: {
          select: { id: true, firstName: true, lastName: true, mobile: true },
        },
+        treatment: { select: { id: true } },
      },
      orderBy: [{ startAt: 'asc' }],
    });

-    return { success: true, data: items };
+    return {
+      success: true,
+      data: items.map(({ treatment, ...appointment }) => ({
+        ...appointment,
+        hasTreatment: Boolean(treatment),
+      })),
+    };
  }

  async create(
@@ -202,6 +209,18 @@ export class AppointmentsService {
    const providerUserId = dto.providerUserId ?? existing.providerUserId;
    const purpose = dto.purpose ?? existing.purpose;

+    if (dto.patientId && dto.patientId !== existing.patientId) {
+      const linkedTreatment = await this.prisma.treatment.findUnique({
+        where: { appointmentId: id },
+        select: { id: true },
+      });
+      if (linkedTreatment) {
+        throw new BadRequestException(
+          'Cannot change the patient while a treatment is linked to this appointment',
+        );
+      }
+    }
+
    this.treatmentCatalog.assertKnownTreatmentType(purpose);

    await this.ensurePatientInOrg(patientId, organizationId);
--- a/backend/src/modules/patients/dto/create-patient.dto.ts
+++ b/backend/src/modules/patients/dto/create-patient.dto.ts
@@ -1,6 +1,14 @@
+import { Transform } from 'class-transformer';
 import { IsDateString, IsEmail, IsOptional, IsString, MaxLength, MinLength } from 'class-validator';
 import { ErrorCode } from '../../../common/errors';

+function emptyStringToUndefined({ value }: { value: unknown }): unknown {
+  if (typeof value === 'string' && value.trim() === '') {
+    return undefined;
+  }
+  return value;
+}
+
 export class CreatePatientDto {
  @IsString()
  @MinLength(1, { message: ErrorCode.VALIDATION_FIELD_REQUIRED })
@@ -18,6 +26,7 @@ export class CreatePatientDto {
  mobile: string;

  @IsOptional()
+  @Transform(emptyStringToUndefined)
  @IsEmail({}, { message: ErrorCode.VALIDATION_EMAIL_INVALID })
  email?: string;

--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -546,6 +546,9 @@
    "endLabel": "End",
    "purposeLabel": "Purpose",
    "errorSelectPatient": "Select a patient first.",
+    "patientSearchPlaceholder": "Search patients by name, phone, or email",
+    "patientSearchEmpty": "No patients match this search.",
+    "patientLockedHint": "Patient cannot be changed because a treatment is linked to this appointment.",
    "errorEndAfterStart": "End time must be after start time.",
    "errorPastSchedule": "Cannot schedule in the past.",
    "errorPastViewOnly": "Past appointments are view-only.",
@@ -901,6 +904,7 @@
    "NOT_FOUND": "The requested item was not found.",
    "CONFLICT": "This action conflicts with existing data.",
    "CONFLICT_FUTURE_APPOINTMENTS": "You cannot stop participating in treatments while you have future appointments. Reassign or cancel them first.",
+    "APPOINTMENT_PATIENT_LOCKED": "Cannot change the patient while a treatment is linked to this appointment.",
    "BAD_REQUEST": "The request could not be processed.",
    "INTERNAL_ERROR": "Something went wrong on our end. Please try again later."
  }
--- a/frontend/messages/fa.json
+++ b/frontend/messages/fa.json
@@ -547,6 +547,9 @@
    "endLabel": "پایان",
    "purposeLabel": "هدف",
    "errorSelectPatient": "ابتدا یک بیمار را انتخاب کنید.",
+    "patientSearchPlaceholder": "جستجوی بیمار بر اساس نام، تلفن یا ایمیل",
+    "patientSearchEmpty": "بیماری با این جستجو یافت نشد.",
+    "patientLockedHint": "به‌دلیل وجود درمان مرتبط با این نوبت، امکان تغییر بیمار وجود ندارد.",
    "errorEndAfterStart": "زمان پایان باید بعد از زمان شروع باشد.",
    "errorPastSchedule": "نمی‌توان در گذشته زمان‌بندی کرد.",
    "errorPastViewOnly": "نوبت‌های گذشته فقط قابل مشاهده هستند.",
@@ -902,6 +905,7 @@
    "NOT_FOUND": "مورد درخواستی یافت نشد.",
    "CONFLICT": "این عمل با داده‌های موجود در تضاد است.",
    "CONFLICT_FUTURE_APPOINTMENTS": "تا وقتی نوبت‌های آینده دارید نمی‌توانید مشارکت در درمان را متوقف کنید. ابتدا آن‌ها را لغو یا واگذار کنید.",
+    "APPOINTMENT_PATIENT_LOCKED": "تا وقتی درمانی به این نوبت متصل است، امکان تغییر بیمار وجود ندارد.",
    "BAD_REQUEST": "درخواست قابل پردازش نبود.",
    "INTERNAL_ERROR": "مشکلی در سرور رخ داد. لطفاً بعداً تلاش کنید."
  }
--- a/frontend/messages/nl.json
+++ b/frontend/messages/nl.json
@@ -547,6 +547,9 @@
    "endLabel": "Einde",
    "purposeLabel": "Doel",
    "errorSelectPatient": "Selecteer eerst een patiënt.",
+    "patientSearchPlaceholder": "Zoek patiënten op naam, telefoon of e-mail",
+    "patientSearchEmpty": "Geen patiënten gevonden voor deze zoekopdracht.",
+    "patientLockedHint": "Patiënt kan niet worden gewijzigd omdat er een behandeling aan deze afspraak is gekoppeld.",
    "errorEndAfterStart": "Eindtijd moet na de starttijd liggen.",
    "errorPastSchedule": "Kan niet in het verleden plannen.",
    "errorPastViewOnly": "Afspraken uit het verleden zijn alleen-lezen.",
@@ -902,6 +905,7 @@
    "NOT_FOUND": "Het gevraagde item is niet gevonden.",
    "CONFLICT": "Deze actie conflicteert met bestaande gegevens.",
    "CONFLICT_FUTURE_APPOINTMENTS": "U kunt niet stoppen met deelnemen aan behandelingen zolang u toekomstige afspraken hebt. Wijs ze eerst opnieuw toe of annuleer ze.",
+    "APPOINTMENT_PATIENT_LOCKED": "De patiënt kan niet worden gewijzigd zolang er een behandeling aan deze afspraak is gekoppeld.",
    "BAD_REQUEST": "Het verzoek kon niet worden verwerkt.",
    "INTERNAL_ERROR": "Er is iets misgegaan aan onze kant. Probeer het later opnieuw."
  }
--- a/frontend/src/components/appointments/appointmentTime.ts
+++ b/frontend/src/components/appointments/appointmentTime.ts
@@ -61,3 +61,22 @@ export function compareLocalDayStart(a: Date, b: Date): number {
  const tb = new Date(b.getFullYear(), b.getMonth(), b.getDate()).getTime();
  return ta - tb;
 }
+
+export function parseTimeInputToMinutes(time: string): number {
+  const [h, m] = time.split(':').map(Number);
+  if (!Number.isFinite(h) || !Number.isFinite(m)) {
+    return 0;
+  }
+  return h * 60 + m;
+}
+
+export function minutesToTimeInput(minutes: number): string {
+  const clamped = Math.max(0, Math.min(24 * 60 - 1, minutes));
+  const h = Math.floor(clamped / 60);
+  const m = clamped % 60;
+  return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
+}
+
+export function adjustTimeInput(time: string, deltaMinutes: number): string {
+  return minutesToTimeInput(parseTimeInputToMinutes(time) + deltaMinutes);
+}
--- a/frontend/src/components/ui/appointments/AppointmentBookingModal.tsx
+++ b/frontend/src/components/ui/appointments/AppointmentBookingModal.tsx
@@ -1,11 +1,12 @@
 'use client';

-import { useEffect, useState } from 'react';
+

 import { useEffect, useId, useState } from 'react';

 import { useTranslations } from 'next-intl';

+import { Button } from '@/components/ui/shared/Button';

 import { DialogCloseButton } from '@/components/ui/shared/DialogCloseButton';

@@ -13,6 +14,8 @@ import {

 import { Dropdown } from '@/components/ui/shared/Dropdown';

+import { TimeStepInput } from '@/components/ui/shared/TimeStepInput';
+
 import type { AppointmentPurpose, AppointmentRecord } from '@/types/appointment';

 import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
@@ -20,10 +23,16 @@ import {
 import {

  DROPDOWN_OPTION_BG,
+
+  treatmentTypeColor,

 } from '@/components/shared/treatmentTypeDisplay';

-  patient: Patient | undefined;
+import type { Patient } from '@/types/patient';
+
+import { PatientSearchCombobox } from '@/components/ui/patient/PatientSearchCombobox';
+
+import { usePatientSearchQuery } from '@/lib/hooks/usePatientSearchQuery';

 import {

@@ -43,10 +52,24 @@ interface AppointmentBookingModalProps {



+interface AppointmentBookingModalProps {
+
+  open: boolean;
+
+  scheduleDate: Date;
+
+  /** Pre-selected patient from the page sidebar (optional). */
+
+  initialPatient?: Patient;
+
+  onPatientChange?: (patient: Patient | undefined) => void;

  canAddPatient?: boolean;

-  patient,
+  onAddPatient?: () => void;
+
+  providerUserId: string | null;
+
  providerName: string;

  initialStartMinute: number;
@@ -61,14 +84,22 @@ export function AppointmentBookingModal({

    startAt: string;

-  const tPatients = useTranslations('patients');
+    endAt: string;
+
    purpose: AppointmentPurpose;

  }) => Promise<void>;

-  const [endTime, setEndTime] = useState('10:00');
+  treatmentCatalog: TreatmentCatalogEntry[];

+  editingAppointment?: AppointmentRecord | null;
+
+  loading?: boolean;

+  canDelete?: boolean;
+
+  onDelete?: () => void | Promise<void>;
+
  deleting?: boolean;

 }
@@ -76,12 +107,14 @@ export function AppointmentBookingModal({


 function patientFromRecord(
+
  patient: AppointmentRecord['patient'],

 ): Pick<Patient, 'id' | 'firstName' | 'lastName' | 'mobile'> {

  return {

+    id: patient.id,

    firstName: patient.firstName,

@@ -92,7 +125,10 @@ export function AppointmentBookingModal({
  };

 }
-      const endMinute = Math.min(initialStartMinute + 60, 24 * 60 - 1);
+
+
+
+export function AppointmentBookingModal({

  open,

@@ -105,23 +141,55 @@ export function AppointmentBookingModal({
  canAddPatient = false,

  onAddPatient,
+
+  providerUserId,
+
+  providerName,
+
+  initialStartMinute,
+
+  onClose,
+
+  onSubmit,

  treatmentCatalog,
-  }, [open, scheduleDate, initialStartMinute, editingAppointment, defaultPurpose]);
+
+  editingAppointment = null,
+
+  loading = false,
+
+  canDelete = false,
+
+  onDelete,
+
  deleting = false,

 }: AppointmentBookingModalProps) {

  const t = useTranslations('appointments');
-  const inputClass =
-    'w-full rounded-[var(--radius-md)] border border-border bg-background-secondary/90 text-text-primary px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/35';
+
+  const tCommon = useTranslations('common');
+
+  const startInputId = useId();
+
+  const endInputId = useId();
+
+
+
+  const defaultPurpose = treatmentCatalog[0]?.code ?? '';
+
+
+
+  const [startTime, setStartTime] = useState('09:00');
+
+  const [endTime, setEndTime] = useState('09:30');

  const [purpose, setPurpose] = useState<AppointmentPurpose>(defaultPurpose);

  const [selectedPatient, setSelectedPatient] = useState<

    Pick<Patient, 'id' | 'firstName' | 'lastName' | 'mobile'> | null
-    if (!editingAppointment && !patient) {
+
  >(null);

  const [error, setError] = useState('');
@@ -146,22 +214,24 @@ export function AppointmentBookingModal({

      return;

-    const effectivePatientId = editingAppointment?.patientId ?? patient?.id;
-    const effectiveProviderId = editingAppointment?.providerUserId ?? providerUserId;
-    if (!effectivePatientId || !effectiveProviderId) {
-      setError(t('errorMissingDetails'));
-      return;
-    }
-
    }
-      patientId: effectivePatientId,
-      providerUserId: effectiveProviderId,
+
+    setSearch('');

    if (editingAppointment) {

      const start = new Date(editingAppointment.startAt);

      const end = new Date(editingAppointment.endAt);
+
+      setStartTime(formatTimeForInput(start));
+
+      setEndTime(formatTimeForInput(end));
+
+      setPurpose(editingAppointment.purpose || defaultPurpose);
+
+      setSelectedPatient(patientFromRecord(editingAppointment.patient));
+
    } else {

      const start = new Date(
@@ -183,45 +253,43 @@ export function AppointmentBookingModal({
      );

      const endMinute = Math.min(
-        <div>
-          <label className="block text-sm font-medium text-text-secondary mb-1">
+
+        initialStartMinute + DEFAULT_DURATION_MINUTES,

        24 * 60 - 1,
-          <p className="text-sm text-text-primary rounded-[var(--radius-md)] border border-border bg-background-secondary/60 px-3 py-2">
-            {editingAppointment
-              ? `${editingAppointment.patient.firstName} ${editingAppointment.patient.lastName}`
-              : patient
-                ? `${patient.firstName} ${patient.lastName}`
-                : tPatients('emptyValue')}
-          </p>
+
+      );
+
+      const end = new Date(
+
+        scheduleDate.getFullYear(),
+
+        scheduleDate.getMonth(),
+
+        scheduleDate.getDate(),
+
+        Math.floor(endMinute / 60),
+
+        endMinute % 60,
+
+        0,
+
        0,

      );
-          <div>
-            <label className="block text-sm font-medium text-text-secondary mb-1">
-              {t('startLabel')}
-            </label>
-            <input
-              type="time"
-              step={60}
-              className={inputClass}
+
+      setStartTime(formatTimeForInput(start));
+
      setEndTime(formatTimeForInput(end));
-              onChange={(e) => setStartTime(e.target.value)}
+
      setPurpose(defaultPurpose);
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-text-secondary mb-1">
-              {t('endLabel')}
-            </label>
-            <input
-              type="time"
-              step={60}
-              className={inputClass}
+
+      setSelectedPatient(
+
        initialPatient
-              onChange={(e) => setEndTime(e.target.value)}
+
          ? {

-        </div>
              id: initialPatient.id,

              firstName: initialPatient.firstName,
--- a/frontend/src/components/ui/appointments/AppointmentScheduleGrid.tsx
+++ b/frontend/src/components/ui/appointments/AppointmentScheduleGrid.tsx
@@ -326,12 +326,12 @@ export function AppointmentScheduleGrid({
                              e.currentTarget,
                            )
                          }
-                          className={`absolute min-h-0 overflow-hidden rounded-[var(--radius-sm)] border pointer-events-auto z-10 flex text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 ${
+                          className={`absolute min-h-0 overflow-hidden rounded-[var(--radius-sm)] border pointer-events-auto z-10 flex text-center focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 ${
                            outsideHours ? 'opacity-70 ring-1 ring-amber-500/60' : ''
                          } ${
                            isUnderOneHour
                              ? 'items-center justify-center px-0.5 py-0'
-                              : 'flex-col justify-start gap-0.5 px-1 py-0.5'
+                              : 'flex-col items-center justify-center gap-0.5 px-1 py-0.5'
                          }`}
                          style={{
                            top: pos.top,
@@ -343,19 +343,19 @@ export function AppointmentScheduleGrid({
                          title={bannerTitle}
                        >
                          <span
-                            className={`block w-full truncate pointer-events-none font-medium ${shortBannerNameClass(durationMin, rangeMinutes, gridHeight)}`}
+                            className={`block w-full truncate pointer-events-none text-center font-medium ${shortBannerNameClass(durationMin, rangeMinutes, gridHeight)}`}
                          >
                            {patientName}
                          </span>
                          {!isUnderOneHour &&
                            apt.patient.mobile &&
                            lane.laneCount === 1 && (
-                              <span className="block w-full truncate pointer-events-none text-[10px] leading-tight opacity-90">
+                              <span className="block w-full truncate pointer-events-none text-center text-[10px] leading-tight opacity-90">
                                {formatMobileForDisplay(apt.patient.mobile)}
                              </span>
                            )}
                          {!isUnderOneHour && clusterSize > 1 && (
-                            <span className="block w-full truncate pointer-events-none text-[9px] leading-tight opacity-75">
+                            <span className="block w-full truncate pointer-events-none text-center text-[9px] leading-tight opacity-75">
                              {t('overlapping', { count: clusterSize })}
                            </span>
                          )}
--- a/frontend/src/components/ui/appointments/AppointmentsPage.tsx
+++ b/frontend/src/components/ui/appointments/AppointmentsPage.tsx
@@ -2,19 +2,19 @@



+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';

-import { patientsApi } from '@/lib/api/patients';
 import { useTranslations } from 'next-intl';

 import { useRouter } from '@/i18n/navigation';
+
 import { appointmentsApi } from '@/lib/api/appointments';

-import type { CreatePatientInput, Patient } from '@/types/patient';
-import { CreatePatientModal } from '@/components/ui/patient/CreatePatientModal';
+import { treatmentCatalogApi } from '@/lib/api/treatment-catalog';

+import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';

 import { useAuth } from '@/lib/hooks/useAuth';
-import { AppointmentsPatientSearch } from '@/components/ui/appointments/AppointmentsPatientSearch';

 import { usePatientSearchQuery } from '@/lib/hooks/usePatientSearchQuery';

@@ -22,17 +22,10 @@ import type { AppointmentPurpose } from '@/types/appointment';

 import type { AppointmentColumnProvider, AppointmentRecord } from '@/types/appointment';

-const EMPTY_PATIENT_FORM: CreatePatientInput = {
-  firstName: '',
-  lastName: '',
-  mobile: '',
-  email: '',
-};
-
 import type { Patient } from '@/types/patient';

 import { PatientSummaryCard } from '@/components/ui/patient/PatientSummaryCard';
-  const tPatients = useTranslations('patients');
+
 import { PatientSearchCombobox } from '@/components/ui/patient/PatientSearchCombobox';

 import { AppointmentBookingModal } from '@/components/ui/appointments/AppointmentBookingModal';
@@ -42,14 +35,8 @@ export function AppointmentsPage() {
 import { AppointmentScheduleLegend } from '@/components/ui/appointments/AppointmentScheduleLegend';

 import { ScheduleDayPicker } from '@/components/ui/shared/ScheduleDayPicker';
-  const [search, setSearch] = useState('');
-  const [patients, setPatients] = useState<Patient[]>([]);
+
 import { useToast } from '@/lib/hooks/useToast';
-  const [loadingPatients, setLoadingPatients] = useState(false);
-
-  const [isCreateOpen, setIsCreateOpen] = useState(false);
-  const [savingPatient, setSavingPatient] = useState(false);
-  const [patientForm, setPatientForm] = useState<CreatePatientInput>(EMPTY_PATIENT_FORM);

 import type { AppointmentPurpose } from '@/types/appointment';

@@ -59,7 +46,6 @@ export function AppointmentsPage() {



-
 export function AppointmentsPage() {

  const t = useTranslations('appointments');
@@ -83,6 +69,13 @@ export function AppointmentsPage() {
  const [loadingSchedule, setLoadingSchedule] = useState(false);

  const toast = useToast();
+
+
+
+  const { search, setSearch, patients, loading: loadingPatients } = usePatientSearchQuery();
+
+  const [selectedPatient, setSelectedPatient] = useState<Patient | undefined>();
+


  const [bookingOpen, setBookingOpen] = useState(false);
@@ -99,8 +92,8 @@ export function AppointmentsPage() {

  const [deletingAppointment, setDeletingAppointment] = useState(false);

-      setProviders(pRes.data);
-      setAppointments(aRes.data);
+
+
  const canManageAppointments = canEditAppointments(currentOrganization);

  const canEditPatients = hasPermission(currentOrganization, 'TAB_PATIENTS_EDIT');
@@ -111,7 +104,7 @@ export function AppointmentsPage() {

  const isViewingPastDay = useMemo(

-  }, [currentOrganization?.id, scheduleDate, t]);
+    () => compareLocalDayStart(scheduleDate, todayStart) < 0,

    [scheduleDate, todayStart],

@@ -120,70 +113,10 @@ export function AppointmentsPage() {
  const activeEditingAppointment = useMemo(

    () => appointments.find((a) => a.id === editingAppointmentId) ?? null,
-      .then((r) => setTreatmentCatalog(r.data))
+
    [appointments, editingAppointmentId],

  );
-  useEffect(() => {
-    const t = setTimeout(() => {
-      void loadPatientsSearch(search);
-    }, 300);
-    return () => clearTimeout(t);
-  }, [search]);
-
-  async function loadPatientsSearch(q: string) {
-    if (!currentOrganization) {
-      return;
-    }
-    setLoadingPatients(true);
-    try {
-      const response = await patientsApi.list({ q, page: 1, limit: 25 });
-      const items = response.data.items;
-      setPatients(items);
-      if (selectedPatient) {
-        const stillThere = items.find((p) => p.id === selectedPatient.id);
-        if (stillThere) {
-          setSelectedPatient(stillThere);
-        }
-      }
-    } catch {
-      setPatients([]);
-    } finally {
-      setLoadingPatients(false);
-    }
-  }
-
-  async function handleCreatePatient() {
-    setSavingPatient(true);
-    toast.setError('');
-    try {
-      const response = await patientsApi.create(patientForm);
-      setIsCreateOpen(false);
-      setPatientForm(EMPTY_PATIENT_FORM);
-      await loadPatientsSearch(search);
-      setSelectedPatient(response.data);
-      if (response.existing) {
-        toast.showInfo(
-          tPatients('patientAlreadyExists', {
-            firstName: response.data.firstName,
-            lastName: response.data.lastName,
-          }),
-        );
-      } else {
-        toast.showSuccess(
-          t('successPatientSaved', {
-            firstName: response.data.firstName,
-            lastName: response.data.lastName,
-          }),
-        );
-      }
-    } catch (err: unknown) {
-      toast.showError(getUserFacingError(err, tErrors, tPatients('errorSavePatient')));
-    } finally {
-      setSavingPatient(false);
-    }
-  }
-



@@ -192,10 +125,6 @@ export function AppointmentsPage() {


  const sortedPatients = useMemo(
-    if (!selectedPatient) {
-      toast.showInfo(t('infoSelectPatient'));
-      return;
-    }

    () =>

@@ -287,22 +216,22 @@ export function AppointmentsPage() {

  useEffect(() => {

-          <AppointmentsPatientSearch
+    void loadSchedule();
+
  }, [loadSchedule]);


-            selectedPatientId={selectedPatient?.id}
-            onSelectPatient={setSelectedPatient}

+  useEffect(() => {
+
    void treatmentCatalogApi
-            onAddPatient={() => {
-              if (!canEditPatients) {
-                return;
-              }
-              setPatientForm(EMPTY_PATIENT_FORM);
-              setIsCreateOpen(true);
-            }}
+
+      .list('appointment')
+
+      .then((r) => setTreatmentCatalog(r.data ?? []))
+
      .catch(() => {});
+
  }, []);


@@ -335,7 +264,10 @@ export function AppointmentsPage() {

  }

-        patient={selectedPatient}
+
+
+  function handleAppointmentClick(appointment: AppointmentRecord) {
+
    if (!canManageAppointments) {

      return;
@@ -351,20 +283,6 @@ export function AppointmentsPage() {
    }

    const provider = providers.find((p) => p.userId === appointment.providerUserId);
-
-      <CreatePatientModal
-        variant="dialog"
-        isOpen={isCreateOpen}
-        formData={patientForm}
-        onChange={(patch) => setPatientForm((prev) => ({ ...prev, ...patch }))}
-        onSubmit={() => void handleCreatePatient()}
-        onClose={() => {
-          setIsCreateOpen(false);
-          setPatientForm(EMPTY_PATIENT_FORM);
-        }}
-        loading={savingPatient}
-      />
-

    const start = new Date(appointment.startAt);

--- a/frontend/src/components/ui/appointments/AppointmentsPatientSearch.tsx
+++ b/frontend/src/components/ui/appointments/AppointmentsPatientSearch.tsx
@@ -1,94 +0,0 @@
-'use client';
-
-import { Search } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { Button } from '@/components/ui/shared/Button';
-import { Input } from '@/components/ui/shared/Input';
-import { formatMobileForDisplay } from '@/lib/phone';
-import type { Patient } from '@/types/patient';
-
-interface AppointmentsPatientSearchProps {
-  search: string;
-  onSearchChange: (value: string) => void;
-  patients: Patient[];
-  selectedPatientId?: string;
-  onSelectPatient: (patient: Patient) => void;
-  loading?: boolean;
-  canAddPatient: boolean;
-  onAddPatient: () => void;
-}
-
-export function AppointmentsPatientSearch({
-  search,
-  onSearchChange,
-  patients,
-  selectedPatientId,
-  onSelectPatient,
-  loading = false,
-  canAddPatient,
-  onAddPatient,
-}: AppointmentsPatientSearchProps) {
-  const t = useTranslations('appointments');
-  const tPatients = useTranslations('patients');
-
-  const trimmed = search.trim();
-  const showAddForEmptyResults =
-    trimmed.length > 0 && !loading && patients.length === 0;
-
-  return (
-    <div className="surface-card p-4 space-y-4">
-      <div className="flex flex-col sm:flex-row gap-3 sm:items-center">
-        <div className="flex-1">
-          <Input
-            placeholder={t('searchPlaceholder')}
-            value={search}
-            onChange={(e) => onSearchChange(e.target.value)}
-            icon={<Search className="h-4 w-4 icon-flat" />}
-          />
-        </div>
-        {showAddForEmptyResults && (
-          <Button
-            type="button"
-            variant="primary"
-            disabled={!canAddPatient}
-            onClick={onAddPatient}
-            title={!canAddPatient ? t('noPermissionAdd') : undefined}
-          >
-            {tPatients('newPatient')}
-          </Button>
-        )}
-      </div>
-
-      <div className="space-y-2 max-h-72 overflow-y-auto">
-        {loading && <p className="text-sm text-text-muted">{t('searching')}</p>}
-
-        {!loading && trimmed.length === 0 && (
-          <p className="text-sm text-text-muted">{t('searchHint')}</p>
-        )}
-
-        {patients.map((patient) => {
-          const isSelected = selectedPatientId === patient.id;
-          return (
-            <button
-              key={patient.id}
-              type="button"
-              onClick={() => onSelectPatient(patient)}
-              className={`w-full text-left rounded-[var(--radius-sm)] border px-3 py-2 transition-colors ${
-                isSelected
-                  ? 'bg-primary-soft border-primary/60'
-                  : 'border-border/60 hover:bg-background-card/70'
-              }`}
-            >
-              <p className="text-sm font-medium text-text-primary">
-                {patient.firstName} {patient.lastName}
-              </p>
-              <p className="text-xs text-text-muted">
-                {formatMobileForDisplay(patient.mobile) || patient.email || tPatients('noContact')}
-              </p>
-            </button>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
--- a/frontend/src/components/ui/patient/CreatePatientModal.tsx
+++ b/frontend/src/components/ui/patient/CreatePatientModal.tsx
@@ -85,6 +85,29 @@ function CreatePatientFormFields({
    [formData.firstName, formData.lastName, formData.mobile],
  );

+  const mobileDisplayError = useMemo(() => {
+    if (fieldErrors.mobile) {
+      return fieldErrors.mobile;
+    }
+    const raw = formData.mobile?.trim() ?? '';
+    if (!raw) {
+      if (formData.firstName?.trim() && formData.lastName?.trim()) {
+        return tValidation('mobileRequired');
+      }
+      return undefined;
+    }
+    if (!isValidMobile(normalizeMobile(formData.mobile) ?? '')) {
+      return tValidation('mobileInvalid');
+    }
+    return undefined;
+  }, [
+    fieldErrors.mobile,
+    formData.mobile,
+    formData.firstName,
+    formData.lastName,
+    tValidation,
+  ]);
+
  return (
    <>
      <p className="text-sm text-text-muted">{t('requiredFieldsHint')}</p>
@@ -125,11 +148,13 @@ function CreatePatientFormFields({
          }}
          placeholder={t('mobilePlaceholder')}
          required
-          error={fieldErrors.mobile}
+          error={mobileDisplayError}
        />
        <Input
          label={t('emailOptional')}
-          type="email"
+          type="text"
+          inputMode="email"
+          autoComplete="email"
          value={formData.email || ''}
          onChange={(e) => {
            onChange({ email: e.target.value });
--- a/frontend/src/components/ui/patient/PatientSearchCombobox.tsx
+++ b/frontend/src/components/ui/patient/PatientSearchCombobox.tsx
@@ -0,0 +1,136 @@
+'use client';
+
+import { Search } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { Button } from '@/components/ui/shared/Button';
+import { Input } from '@/components/ui/shared/Input';
+import { formatMobileForDisplay } from '@/lib/phone';
+import type { Patient } from '@/types/patient';
+
+interface PatientSearchComboboxProps {
+  search: string;
+  onSearchChange: (value: string) => void;
+  patients: Patient[];
+  loading?: boolean;
+  selectedPatient?: Patient | null;
+  onSelectPatient: (patient: Patient) => void;
+  /** When false, sidebar uses an external summary card instead. */
+  showInlineSummary?: boolean;
+  canAddPatient?: boolean;
+  onAddPatient?: () => void;
+  placeholder?: string;
+  idleHint?: string;
+  emptyResultsMessage?: string;
+  noPermissionMessage?: string;
+  readOnly?: boolean;
+  readOnlyHint?: string;
+}
+
+export function PatientSearchCombobox({
+  search,
+  onSearchChange,
+  patients,
+  loading = false,
+  selectedPatient,
+  onSelectPatient,
+  showInlineSummary = false,
+  canAddPatient = false,
+  onAddPatient,
+  placeholder,
+  idleHint,
+  emptyResultsMessage,
+  noPermissionMessage,
+  readOnly = false,
+  readOnlyHint,
+}: PatientSearchComboboxProps) {
+  const tPatients = useTranslations('patients');
+  const trimmed = search.trim();
+  const showResults = !readOnly && trimmed.length > 0;
+
+  function handleSelect(patient: Patient) {
+    onSelectPatient(patient);
+    onSearchChange('');
+  }
+
+  if (readOnly) {
+    return (
+      <div className="space-y-2">
+        <p className="text-sm text-text-primary rounded-[var(--radius-md)] border border-border bg-background-secondary/60 px-3 py-2">
+          {selectedPatient
+            ? `${selectedPatient.firstName} ${selectedPatient.lastName}`
+            : tPatients('emptyValue')}
+        </p>
+        {readOnlyHint ? <p className="text-xs text-text-muted">{readOnlyHint}</p> : null}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      <Input
+        placeholder={placeholder ?? tPatients('searchPlaceholder')}
+        value={search}
+        onChange={(e) => onSearchChange(e.target.value)}
+        icon={<Search className="h-4 w-4 icon-flat" />}
+      />
+
+      {!trimmed && !selectedPatient && idleHint ? (
+        <p className="text-sm text-text-muted">{idleHint}</p>
+      ) : null}
+
+      {showResults ? (
+        <div className="space-y-2 rounded-[var(--radius-md)] border border-border/60 bg-background-secondary/30 p-2">
+          {loading ? (
+            <p className="text-sm text-text-muted px-1 py-2">{tPatients('loadingPatients')}</p>
+          ) : patients.length === 0 ? (
+            <div className="space-y-2 px-1 py-1">
+              <p className="text-sm text-text-muted">
+                {emptyResultsMessage ?? tPatients('noResults')}
+              </p>
+              {canAddPatient && onAddPatient ? (
+                <Button type="button" variant="primary" onClick={onAddPatient} fullWidth>
+                  {tPatients('newPatient')}
+                </Button>
+              ) : noPermissionMessage ? (
+                <p className="text-xs text-text-muted">{noPermissionMessage}</p>
+              ) : null}
+            </div>
+          ) : (
+            <div className="max-h-48 space-y-1.5 overflow-y-auto">
+              {patients.map((patient) => (
+                <button
+                  key={patient.id}
+                  type="button"
+                  onClick={() => handleSelect(patient)}
+                  className="w-full rounded-[var(--radius-sm)] border border-transparent px-2.5 py-2 text-left transition-colors hover:bg-background-card/70"
+                >
+                  <p className="text-sm font-medium text-text-primary">
+                    {patient.firstName} {patient.lastName}
+                  </p>
+                  <p className="text-xs text-text-muted">
+                    {formatMobileForDisplay(patient.mobile) ||
+                      patient.email ||
+                      tPatients('noContact')}
+                  </p>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      ) : null}
+
+      {showInlineSummary && selectedPatient ? (
+        <div className="rounded-[var(--radius-md)] border border-border bg-background-secondary/60 px-3 py-2.5 space-y-1">
+          <p className="text-sm font-medium text-text-primary">
+            {selectedPatient.firstName} {selectedPatient.lastName}
+          </p>
+          <p className="text-xs text-text-muted">
+            {formatMobileForDisplay(selectedPatient.mobile) ||
+              selectedPatient.email ||
+              tPatients('noContact')}
+          </p>
+        </div>
+      ) : null}
+    </div>
+  );
+}
--- a/frontend/src/components/ui/patient/PatientsPage.tsx
+++ b/frontend/src/components/ui/patient/PatientsPage.tsx
@@ -1,7 +1,9 @@
 'use client';

 import { useEffect, useMemo, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
+import { useRouter } from '@/i18n/navigation';
 import { Button } from '@/components/ui/shared/Button';
 import { patientsApi } from '@/lib/api/patients';
 import { getUserFacingError } from '@/components/shared/formatApiError';
@@ -25,6 +27,8 @@ export function PatientsPage() {
  const t = useTranslations('patients');
  const tErrors = useTranslations('errors');
  const tCommon = useTranslations('common');
+  const searchParams = useSearchParams();
+  const router = useRouter();
  const { currentOrganization } = useAuth();
  const toast = useToast();
  const [search, setSearch] = useState('');
@@ -55,6 +59,15 @@ export function PatientsPage() {
    void loadPatients('');
  }, []);

+  useEffect(() => {
+    if (searchParams.get('action') !== 'create' || !canEditPatients) {
+      return;
+    }
+    setPatientForm(EMPTY_PATIENT_FORM);
+    setIsCreateOpen(true);
+    router.replace('/patients');
+  }, [searchParams, canEditPatients, router]);
+
  async function loadPatients(q: string) {
    setLoadingPatients(true);
    toast.setError('');
--- a/frontend/src/components/ui/shared/TimeStepInput.tsx
+++ b/frontend/src/components/ui/shared/TimeStepInput.tsx
@@ -0,0 +1,69 @@
+'use client';
+
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { adjustTimeInput } from '@/components/appointments/appointmentTime';
+
+interface TimeStepInputProps {
+  id?: string;
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  stepMinutes?: number;
+  disabled?: boolean;
+}
+
+const inputClassName =
+  'min-w-0 flex-1 rounded-[var(--radius-md)] border border-border bg-background-secondary/90 text-text-primary px-3 py-2 text-sm text-center tabular-nums focus:outline-none focus:ring-2 focus:ring-primary/35';
+
+export function TimeStepInput({
+  id,
+  label,
+  value,
+  onChange,
+  stepMinutes = 5,
+  disabled = false,
+}: TimeStepInputProps) {
+  const step = (delta: number) => {
+    if (disabled) return;
+    onChange(adjustTimeInput(value, delta * stepMinutes));
+  };
+
+  return (
+    <div>
+      <label htmlFor={id} className="block text-sm font-medium text-text-secondary mb-1">
+        {label}
+      </label>
+        <div className="flex items-stretch gap-1.5">
+          <div className="flex flex-col justify-center gap-0.5 shrink-0 self-stretch py-0.5">
+            <button
+              type="button"
+              aria-label={`${label} +${stepMinutes}m`}
+              disabled={disabled}
+              onClick={() => step(1)}
+              className="flex flex-1 min-h-[1.25rem] items-center justify-center rounded-[var(--radius-sm)] border border-border bg-background-secondary/90 px-1.5 text-text-muted hover:text-text-primary hover:bg-background-card/80 disabled:opacity-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"
+            >
+              <ChevronUp className="h-3.5 w-3.5 icon-flat" />
+            </button>
+            <button
+              type="button"
+              aria-label={`${label} -${stepMinutes}m`}
+              disabled={disabled}
+              onClick={() => step(-1)}
+              className="flex flex-1 min-h-[1.25rem] items-center justify-center rounded-[var(--radius-sm)] border border-border bg-background-secondary/90 px-1.5 text-text-muted hover:text-text-primary hover:bg-background-card/80 disabled:opacity-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"
+            >
+              <ChevronDown className="h-3.5 w-3.5 icon-flat" />
+            </button>
+          </div>
+        <input
+          id={id}
+          type="time"
+          step={stepMinutes * 60}
+          className={inputClassName}
+          value={value}
+          disabled={disabled}
+          onChange={(e) => onChange(e.target.value)}
+        />
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/lib/api/patients.ts
+++ b/frontend/src/lib/api/patients.ts
@@ -14,7 +14,12 @@ export const patientsApi = {
  },

  create: async (data: CreatePatientInput): Promise<CreatePatientResponse> => {
-    const response = await apiClient.post('/patients', data);
+    const { email, ...rest } = data;
+    const body = {
+      ...rest,
+      ...(email?.trim() ? { email: email.trim() } : {}),
+    };
+    const response = await apiClient.post('/patients', body);
    return response.data;
  },

--- a/frontend/src/lib/hooks/usePatientSearchQuery.ts
+++ b/frontend/src/lib/hooks/usePatientSearchQuery.ts
@@ -0,0 +1,45 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { patientsApi } from '@/lib/api/patients';
+import { useAuth } from '@/lib/hooks/useAuth';
+import type { Patient } from '@/types/patient';
+
+/** Debounced patient search — only queries when `search` is non-empty. */
+export function usePatientSearchQuery(enabled = true) {
+  const { currentOrganization } = useAuth();
+  const [search, setSearch] = useState('');
+  const [patients, setPatients] = useState<Patient[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!enabled || !currentOrganization) {
+      return;
+    }
+
+    const trimmed = search.trim();
+    if (!trimmed) {
+      setPatients([]);
+      setLoading(false);
+      return;
+    }
+
+    const timeout = setTimeout(() => {
+      void (async () => {
+        setLoading(true);
+        try {
+          const response = await patientsApi.list({ q: trimmed, page: 1, limit: 25 });
+          setPatients(response.data.items ?? []);
+        } catch {
+          setPatients([]);
+        } finally {
+          setLoading(false);
+        }
+      })();
+    }, 300);
+
+    return () => clearTimeout(timeout);
+  }, [search, enabled, currentOrganization]);
+
+  return { search, setSearch, patients, loading };
+}
--- a/frontend/src/types/appointment.ts
+++ b/frontend/src/types/appointment.ts
@@ -23,4 +23,6 @@ export interface AppointmentRecord {
  endAt: string;
  purpose: string;
  patient: Pick<Patient, 'id' | 'firstName' | 'lastName' | 'mobile'>;
+  /** True when a treatment record is linked to this appointment. */
+  hasTreatment?: boolean;
 }