Replace all native <select> elements in the admin panel with SearchableSelect for a consistent UI experience. This change enhances accessibility, supports RTL and dark mode, and improves the overall design by utilizing a common component. The updates include adjustments to state management and event handling to ensure seamless integration with existing functionality across various pages and components.

assets/admin/pages/ReserveAppointmentsPage.tsx

@@ -12,6 +12,7 @@ import type { Appointment } from '../types';
 import { formatDate } from '../lib/utils';
 import { useAuthStore } from '../stores/authStore';
 import AppointmentStatusDropdown from '../components/ui/AppointmentStatusDropdown';
+import SearchableSelect from '../components/ui/SearchableSelect';
 import Pagination from '../components/ui/Pagination';
 import NewAppointmentDrawer from '../components/NewAppointmentDrawer';
 import { AppointmentInfoModal, TransferReserveModal } from '../components/AppointmentActions';
@@ -118,11 +119,16 @@ export default function ReserveAppointmentsPage() {
         <h1 style={{ fontSize: 17, fontWeight: 800 }}>نوبت های رزرو شده</h1>
         <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
           {isClinic && (
-            <select aria-label="پزشک" value={doctorUuid} onChange={e => setDoctorUuid(e.target.value)}
-              style={{ height: 34, borderRadius: 'var(--r-sm)', border: '1px solid var(--border)', background: 'var(--surface)', fontSize: 13, fontFamily: 'inherit', padding: '0 10px' }}>
-              <option value="">انتخاب پزشک...</option>
-              {clinicDoctors.map(d => <option key={d.uuid} value={d.uuid}>{d.name}</option>)}
-            </select>
+            <div style={{ minWidth: 180 }}>
+              <SearchableSelect
+                options={clinicDoctors.map(d => ({ value: d.uuid, label: d.name }))}
+                value={doctorUuid || null}
+                onChange={v => setDoctorUuid(v ? String(v) : '')}
+                placeholder="انتخاب پزشک..."
+                isClearable
+                height={34}
+              />
+            </div>
           )}
           {primaryRole !== 'representation' && (
             <button className="btn primary sm" disabled={!doctorUuid}