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/AppointmentsPage.tsx

@@ -15,6 +15,7 @@ import Pagination from '../components/ui/Pagination';
 import AppointmentFiltersModal, { applyAppointmentFilters, EMPTY_FILTERS } from '../components/AppointmentFiltersModal';
 import type { AppointmentFilters } from '../components/AppointmentFiltersModal';
 import PersianCalendar from '../components/ui/PersianCalendar';
+import SearchableSelect from '../components/ui/SearchableSelect';
 // اجزای طرح نوبت‌های tauri
 import TurnsStatInfo from '../components/appointments/TurnsStatInfo';
 import TurnsViewToggle from '../components/appointments/TurnsViewToggle';
@@ -650,10 +651,15 @@ function ServiceFilterSelect({ value, options, onChange }: {
   value: string; options: { uuid: string; name: string }[]; onChange: (v: string) => void;
 }) {
   return (
-    <select aria-label="سرویس" value={value} onChange={e => onChange(e.target.value)}
-      style={{ height: 44, borderRadius: 'var(--r-sm)', border: '1px solid var(--border)', background: 'var(--surface)', fontSize: 13, fontFamily: 'inherit', padding: '0 12px', minWidth: 280 }}>
-      <option value="">سرویس مورد نظر را انتخاب کنید...</option>
-      {options.map(s => <option key={s.uuid} value={s.uuid}>{s.name}</option>)}
-    </select>
+    <div style={{ minWidth: 280 }}>
+      <SearchableSelect
+        options={options.map(s => ({ value: s.uuid, label: s.name }))}
+        value={value || null}
+        onChange={v => onChange(v ? String(v) : '')}
+        placeholder="سرویس مورد نظر را انتخاب کنید..."
+        isClearable
+        height={44}
+      />
+    </div>
   );
 }