diff --git a/.claude/prompt/admin-native-select-to-searchableselect.md b/.claude/prompt/admin-native-select-to-searchableselect.md
new file mode 100644
index 00000000..614ed610
--- /dev/null
+++ b/.claude/prompt/admin-native-select-to-searchableselect.md
@@ -0,0 +1,180 @@
+# جایگزینی همه‌ی `<select>` بومی پنل ادمین با `SearchableSelect`
+
+## پروژه
+
+`clinicpro` (React 19 admin SPA — `assets/admin/`)
+
+## زمینه
+
+در سراسر پنل ادمین از `<select>` بومی HTML استفاده شده (استایل درون‌خطی تکراری،
+بدون جست‌وجو، ظاهر ناهماهنگ با طراحی‌سیستم، بدون RTL/dark درست). طراحی‌سیستم یک
+کامپوننت مشترک دارد: `assets/admin/components/ui/SearchableSelect.tsx` (روی `react-select`،
+قابل جست‌وجو، RTL، هماهنگ با توکن‌های CSS و dark mode، منو portal با `zIndex 9999`).
+
+**هدف:** همه‌ی `<select>`های بومی پنل با `SearchableSelect` جایگزین شوند تا ظاهر و رفتار
+یکدست شود (مثل دسته‌بندی «افزودن کالا» در `AddItemModal.tsx` که از قبل `SearchableSelect` است).
+
+## API کامپوننت `SearchableSelect` (مرجع — تغییرش نده)
+
+```tsx
+interface SelectOption { value: string | number; label: string }
+interface Props {
+  options: SelectOption[];
+  value?: string | number | null;
+  onChange?: (value: string | number | null) => void;   // مقدار خام، نه event
+  placeholder?: string;          // پیش‌فرض «انتخاب کنید...»
+  isLoading?: boolean;
+  isDisabled?: boolean;
+  isClearable?: boolean;
+  noOptionsMessage?: string;     // پیش‌فرض «موردی یافت نشد»
+  inputId?: string;
+  height?: number;               // پیش‌فرض 42؛ برای هم‌ارتفاعی با فیلدهای 38px مقدار بده
+}
+```
+
+نکات مهمِ تفاوت با `<select>`:
+- `onChange` مقدار خام می‌دهد (`string|number|null`) نه `e.target.value`.
+- `options` باید `{ value, label }` باشد — نه `<option>`.
+- گزینه‌ی خالی (`<option value="">انتخاب...</option>`) حذف و به `placeholder` منتقل شود؛
+  اگر خالی‌کردن مجاز است `isClearable` بده.
+- `disabled` → `isDisabled`.
+
+## فایل‌های دارای `<select>` بومی (۱۶ فایل، ~۳۵ مورد)
+
+| فایل | تعداد | نکته |
+|------|:----:|------|
+| `pages/MyPatientsPage.tsx` | 4 | فیلترها |
+| `pages/AppointmentEditPage.tsx` | 4 | |
+| `pages/AppointmentCreatePage.tsx` | 4 | |
+| `components/NewAppointmentDrawer.tsx` | 4 | بخش/زیربخش/سرویس (وابسته) |
+| `components/AppointmentActions.tsx` | 4 | خطوط 850,869,961,976 |
+| `pages/DoctorDetailPage.tsx` | 3 | |
+| `pages/PatientRecordFormPage.tsx` | 2 | **RHF `register`** (gender:119، referral_source:135) |
+| `components/AppointmentFiltersModal.tsx` | 2 | `sel` استایل مشترک؛ سرویس وابسته به بخش (`disabled`) |
+| `pages/ReserveAppointmentsPage.tsx` | 1 | |
+| `pages/RepresentationSettlementPage.tsx` | 1 | |
+| `pages/MyPaymentsPage.tsx` | 1 | |
+| `pages/InventoryPage.tsx` | 1 | فیلتر دسته |
+| `pages/AppointmentsPage.tsx` | 1 | سرویس (خط 653) |
+| `components/inventory/AddPackageModal.tsx` | 1 | |
+| `components/dashboard/TauriDashboardView.tsx` | 1 | |
+| `components/PatientsFilterModal.tsx` | 1 | |
+
+## وضعیت فعلی — سه الگوی رایج
+
+### الگوی A — controlled با `value` + `onChange` (بیشترین)
+```tsx
+// AppointmentsPage.tsx:653
+<select aria-label="سرویس" value={value} onChange={e => onChange(e.target.value)} style={sel}>
+  <option value="">سرویس مورد نظر را انتخاب کنید...</option>
+  {options.map(s => <option key={s.uuid} value={s.uuid}>{s.name}</option>)}
+</select>
+```
+
+### الگوی B — گزینه‌های وابسته / disabled
+```tsx
+// AppointmentFiltersModal.tsx:100
+<select aria-label="سرویس" style={{ ...sel, margin: '6px 0 14px' }} value={f.itemUuid} disabled={!f.sectionUuid}
+  onChange={...}>
+  <option value="">انتخاب سرویس</option>
+  {(itemsQ.data?.data ?? []).map(o => <option key={o.uuid} value={o.uuid}>{o.name}</option>)}
+</select>
+```
+
+### الگوی C — React Hook Form با `register` (خاص — نیازمند Controller)
+```tsx
+// PatientRecordFormPage.tsx:119
+<div className="field"><select {...form.register('gender')} style={{...}}>
+  <option value="">انتخاب...</option>
+  <option value="female">زن</option>
+  <option value="male">مرد</option>
+</select></div>
+```
+
+## وظایف
+
+> **یک فایل در هر مرحله.** بعد از هر فایل: `tsc` سبز شود، بعد فایل بعدی. ترتیب: از فایل‌های کم‌مورد به پرمورد، یا هر ترتیبی، ولی هر فایل مستقل تست/تایپ‌چک شود.
+
+### ۱. تبدیل الگوی A (controlled)
+
+هر `<select value onChange>` را با این جایگزین کن:
+
+```tsx
+<SearchableSelect
+  options={options.map(s => ({ value: s.uuid, label: s.name }))}
+  value={value || null}
+  onChange={v => onChange(v ? String(v) : '')}   // اگر state رشته است String() بزن
+  placeholder="سرویس مورد نظر را انتخاب کنید..."  // همان متن option خالی
+  isClearable                                     // اگر خالی‌کردن مجاز بود
+  height={38}                                     // برای هم‌ارتفاعی با فیلدهای فعلی
+/>
+```
+
+- import در بالای فایل: `import SearchableSelect from '../ui/SearchableSelect';`
+  (عمق مسیر را بر اساس محل فایل تنظیم کن: از `pages/` → `'../components/ui/SearchableSelect'`).
+- استایل درون‌خطی `sel`/`style` روی select حذف شود (کامپوننت خودش استایل دارد).
+  اگر `margin` بیرونی لازم بود، در یک `<div style={{ margin }}>` دور کامپوننت بگذار.
+- `aria-label` را حفظ کن: چون react-select خودش input دارد، برای دسترس‌پذیری از
+  `inputId` + یک `<label htmlFor>` مخفی یا `aria-label` روی wrapper استفاده کن (اختیاری ولی بهتر).
+
+### ۲. تبدیل الگوی B (وابسته/disabled)
+
+مثل A ولی `isDisabled` را از شرط قبلی بده و در صورت لود‌شدن آسنکرون `isLoading` را از
+`query.isLoading` بده:
+
+```tsx
+<SearchableSelect
+  options={(itemsQ.data?.data ?? []).map(o => ({ value: o.uuid, label: o.name }))}
+  value={f.itemUuid || null}
+  onChange={v => setF({ ...f, itemUuid: v ? String(v) : '' })}
+  placeholder="انتخاب سرویس"
+  isDisabled={!f.sectionUuid}
+  isLoading={itemsQ.isLoading}
+  isClearable
+  height={38}
+/>
+```
+
+### ۳. تبدیل الگوی C (React Hook Form)
+
+`register` روی `SearchableSelect` کار نمی‌کند (input بومی نیست). دو راه — راه ساده `watch`+`setValue`:
+
+```tsx
+<SearchableSelect
+  options={[{ value: 'female', label: 'زن' }, { value: 'male', label: 'مرد' }]}
+  value={form.watch('gender') || null}
+  onChange={v => form.setValue('gender', v ? String(v) : '', { shouldValidate: true, shouldDirty: true })}
+  placeholder="انتخاب..."
+  isClearable
+  height={38}
+/>
+```
+
+- برای فیلدهای الزامیِ Zod، `shouldValidate: true` را نگه دار تا خطاها به‌روز شوند.
+- اگر فیلد قبلاً از `REFERRAL_OPTIONS` می‌ساخت: `REFERRAL_OPTIONS.map(o => ({ value: o, label: o }))`.
+
+### ۴. حذف کد مرده
+
+بعد از تبدیل، هر متغیر استایل مشترکِ بلااستفاده (`const sel = {...}`) و importهای بی‌استفاده
+را حذف کن (`tsc`/eslint نشان می‌دهد).
+
+## نکات مهم
+
+- **رفتار داده تغییر نکند:** مقداری که به state/RHF/API می‌رود همان `uuid`/کلید قبلی بماند
+  (فقط `''` ↔ `null` را مدیریت کن — `SearchableSelect` هنگام خالی `null` می‌دهد، اگر state
+  انتظار رشته دارد به `''` تبدیل کن).
+- **ارتفاع:** فیلدهای فعلی معمولاً `height: 38px`‌اند؛ `height={38}` بده تا ردیف‌ها جابه‌جا نشوند.
+  پیش‌فرض کامپوننت 42 است.
+- **گزینه‌های وابسته (بخش→زیربخش→سرویس در NewAppointmentDrawer / AppointmentActions):**
+  با تغییر والد، مقدار فرزند ریست شود (همان منطق فعلی onChange والد را حفظ کن).
+- **منوی داخل Modal/Drawer:** `SearchableSelect` منو را با `menuPortal`+`zIndex 9999` به `body`
+  می‌برد؛ مشکل بریدگی/overflow نخواهد داشت — نیازی به تنظیم اضافه نیست.
+- **تست:** بعد از هر فایل `ddev exec npx tsc --noEmit --project tsconfig.json`؛ در پایان
+  `npx vitest run` (روی host؛ داخل ddev esbuild پلتفرم mismatch دارد). تست‌های موجودِ
+  فایل‌هایی که select داشتند (مثل `AppointmentFiltersModal.test.tsx`، `PatientRecordInfoForm.test.tsx`)
+  را اجرا کن؛ اگر با `getByRole('combobox')`/`selectOptions` بودند، به تعامل react-select
+  (کلیک + انتخاب گزینه با متن) به‌روز کن.
+- **بدون کتابخانه جدید:** `react-select` از قبل نصب است. RTL و dark از خود کامپوننت می‌آید.
+- تغییر فقط-UI است؛ backend و `docs/api/*` تغییری ندارد.
+- **این یک قاعده‌ی دائمی است:** از این پس هیچ `<select>` بومیِ جدیدی در پنل ادمین نساز؛
+  همیشه `SearchableSelect`.
diff --git a/assets/admin/components/AppointmentActions.test.tsx b/assets/admin/components/AppointmentActions.test.tsx
index 0c9cd8a5..a9643fc5 100644
--- a/assets/admin/components/AppointmentActions.test.tsx
+++ b/assets/admin/components/AppointmentActions.test.tsx
@@ -92,8 +92,8 @@ describe('AppointmentActionsMenu (عملیات نوبت)', () => {
     // the original slot is shown read-only
     expect(screen.getByDisplayValue('2024-12-31')).toBeDisabled();
     expect(screen.getByDisplayValue('09:00')).toBeDisabled();
-    // prefilled from the appointment's current specs
-    expect((screen.getByLabelText('وضعیت') as HTMLSelectElement).value).toBe('confirmed');
+    // prefilled from the appointment's current specs (react-select single value)
+    expect(screen.getByText('قطعی شده')).toBeInTheDocument();
 
     fireEvent.change(screen.getByPlaceholderText('نام و نام خانوادگی'), { target: { value: 'ساغر صابری' } });
     fireEvent.change(screen.getByPlaceholderText('شماره تماس'), { target: { value: '09356619438' } });
diff --git a/assets/admin/components/AppointmentActions.tsx b/assets/admin/components/AppointmentActions.tsx
index ec6f8690..76607193 100644
--- a/assets/admin/components/AppointmentActions.tsx
+++ b/assets/admin/components/AppointmentActions.tsx
@@ -26,6 +26,7 @@ import AppointmentStatusDropdown from "./ui/AppointmentStatusDropdown";
 import Modal from "./ui/Modal";
 import PersianDateInput from "./ui/PersianDateInput";
 import PriceInput from "./ui/PriceInput";
+import SearchableSelect from "./ui/SearchableSelect";
 
 /** Row actions for the appointments table (Figma عملیات menu). */
 type ModalKind = null | "info" | "move" | "transfer" | "replace";
@@ -732,16 +733,6 @@ export function ReplaceAppointmentModal({
     });
 
     const label = { fontSize: 12.5, color: "var(--text-3)" } as const;
-    const sel = {
-        width: "100%",
-        height: 38,
-        borderRadius: "var(--r-sm)",
-        border: "1px solid var(--border)",
-        background: "var(--surface)",
-        fontSize: 13,
-        fontFamily: "inherit",
-        padding: "0 10px",
-    } as const;
     const lockedField = { margin: "6px 0 12px", opacity: 0.6 } as const;
     const patients = patientsQ.data?.data ?? [];
 
@@ -847,39 +838,32 @@ export function ReplaceAppointmentModal({
                 >
                     <div>
                         <label style={label}>بخش</label>
-                        <select
-                            aria-label="بخش"
-                            style={{ ...sel, marginTop: 6 }}
-                            value={sectionUuid}
-                            onChange={(e) => {
-                                setSectionUuid(e.target.value);
-                                setItemUuid("");
-                            }}
-                        >
-                            <option value="">انتخاب بخش</option>
-                            {(sectionsQ.data?.data ?? []).map((o) => (
-                                <option key={o.uuid} value={o.uuid}>
-                                    {o.name}
-                                </option>
-                            ))}
-                        </select>
+                        <div style={{ marginTop: 6 }}>
+                            <SearchableSelect
+                                options={(sectionsQ.data?.data ?? []).map((o) => ({ value: o.uuid, label: o.name ?? "" }))}
+                                value={sectionUuid || null}
+                                onChange={(v) => { setSectionUuid(v ? String(v) : ""); setItemUuid(""); }}
+                                placeholder="انتخاب بخش"
+                                isLoading={sectionsQ.isLoading}
+                                isClearable
+                                height={38}
+                            />
+                        </div>
                     </div>
                     <div>
                         <label style={label}>سرویس</label>
-                        <select
-                            aria-label="سرویس"
-                            style={{ ...sel, marginTop: 6 }}
-                            value={itemUuid}
-                            onChange={(e) => setItemUuid(e.target.value)}
-                            disabled={!sectionUuid}
-                        >
-                            <option value="">انتخاب زیر بخش</option>
-                            {(itemsQ.data?.data ?? []).map((o) => (
-                                <option key={o.uuid} value={o.uuid}>
-                                    {o.name}
-                                </option>
-                            ))}
-                        </select>
+                        <div style={{ marginTop: 6 }}>
+                            <SearchableSelect
+                                options={(itemsQ.data?.data ?? []).map((o) => ({ value: o.uuid, label: o.name ?? "" }))}
+                                value={itemUuid || null}
+                                onChange={(v) => setItemUuid(v ? String(v) : "")}
+                                placeholder="انتخاب زیر بخش"
+                                isDisabled={!sectionUuid}
+                                isLoading={itemsQ.isLoading}
+                                isClearable
+                                height={38}
+                            />
+                        </div>
                     </div>
                 </div>
 
@@ -958,35 +942,28 @@ export function ReplaceAppointmentModal({
                 </div>
 
                 <label style={label}>انتخاب پرسنل</label>
-                <select
-                    aria-label="پرسنل"
-                    style={{ ...sel, margin: "6px 0 12px" }}
-                    value={staffUuid}
-                    onChange={(e) => setStaffUuid(e.target.value)}
-                >
-                    <option value="">انتخاب...</option>
-                    {(staffQ.data?.data ?? []).map((o) => (
-                        <option key={o.uuid} value={o.uuid}>
-                            {o.full_name}
-                        </option>
-                    ))}
-                </select>
+                <div style={{ margin: "6px 0 12px" }}>
+                    <SearchableSelect
+                        options={(staffQ.data?.data ?? []).map((o) => ({ value: o.uuid, label: o.full_name ?? "" }))}
+                        value={staffUuid || null}
+                        onChange={(v) => setStaffUuid(v ? String(v) : "")}
+                        placeholder="انتخاب..."
+                        isLoading={staffQ.isLoading}
+                        isClearable
+                        height={38}
+                    />
+                </div>
 
                 <label style={label}>انتخاب وضعیت</label>
-                <select
-                    aria-label="وضعیت"
-                    style={{ ...sel, margin: "6px 0 12px" }}
-                    value={status}
-                    onChange={(e) =>
-                        setStatus(e.target.value as Appointment["status"])
-                    }
-                >
-                    {statusOptions.map(([v, l]) => (
-                        <option key={v} value={v}>
-                            {l}
-                        </option>
-                    ))}
-                </select>
+                <div style={{ margin: "6px 0 12px" }}>
+                    <SearchableSelect
+                        options={statusOptions.map(([v, l]) => ({ value: v, label: l }))}
+                        value={status || null}
+                        onChange={(v) => setStatus((v ? String(v) : "") as Appointment["status"])}
+                        placeholder="انتخاب وضعیت"
+                        height={38}
+                    />
+                </div>
 
                 <label style={label}>توضیحات</label>
                 <div
diff --git a/assets/admin/components/AppointmentFiltersModal.tsx b/assets/admin/components/AppointmentFiltersModal.tsx
index 1ab3e40d..d0053694 100644
--- a/assets/admin/components/AppointmentFiltersModal.tsx
+++ b/assets/admin/components/AppointmentFiltersModal.tsx
@@ -5,6 +5,7 @@ import { api } from '../lib/api';
 import type { ApiResponse } from '../lib/api';
 import type { Appointment } from '../types';
 import Modal from './ui/Modal';
+import SearchableSelect from './ui/SearchableSelect';
 
 interface Option { uuid: string; name?: string }
 
@@ -70,7 +71,6 @@ export default function AppointmentFiltersModal({ value, onApply, onClose }: {
   }));
 
   const label = { fontSize: 12.5, color: 'var(--text-3)' } as const;
-  const sel = { width: '100%', height: 38, borderRadius: 'var(--r-sm)', border: '1px solid var(--border)', background: 'var(--surface)', fontSize: 13, fontFamily: 'inherit', padding: '0 10px' } as const;
 
   return (
     <Modal open title="فیلترها" onClose={onClose}>
@@ -91,17 +91,30 @@ export default function AppointmentFiltersModal({ value, onApply, onClose }: {
         </div>
 
         <label style={label}>بخش</label>
-        <select aria-label="بخش" style={{ ...sel, margin: '6px 0 12px' }} value={f.sectionUuid}
-          onChange={e => setF(v => ({ ...v, sectionUuid: e.target.value, itemUuid: '' }))}>
-          <option value="">انتخاب بخش</option>
-          {(sectionsQ.data?.data ?? []).map(o => <option key={o.uuid} value={o.uuid}>{o.name}</option>)}
-        </select>
+        <div style={{ margin: '6px 0 12px' }}>
+          <SearchableSelect
+            options={(sectionsQ.data?.data ?? []).map(o => ({ value: o.uuid, label: o.name ?? '' }))}
+            value={f.sectionUuid || null}
+            onChange={v => setF(prev => ({ ...prev, sectionUuid: v ? String(v) : '', itemUuid: '' }))}
+            placeholder="انتخاب بخش"
+            isLoading={sectionsQ.isLoading}
+            isClearable
+            height={38}
+          />
+        </div>
         <label style={label}>سرویس</label>
-        <select aria-label="سرویس" style={{ ...sel, margin: '6px 0 14px' }} value={f.itemUuid} disabled={!f.sectionUuid}
-          onChange={e => setF(v => ({ ...v, itemUuid: e.target.value }))}>
-          <option value="">انتخاب سرویس</option>
-          {(itemsQ.data?.data ?? []).map(o => <option key={o.uuid} value={o.uuid}>{o.name}</option>)}
-        </select>
+        <div style={{ margin: '6px 0 14px' }}>
+          <SearchableSelect
+            options={(itemsQ.data?.data ?? []).map(o => ({ value: o.uuid, label: o.name ?? '' }))}
+            value={f.itemUuid || null}
+            onChange={v => setF(prev => ({ ...prev, itemUuid: v ? String(v) : '' }))}
+            placeholder="انتخاب سرویس"
+            isDisabled={!f.sectionUuid}
+            isLoading={itemsQ.isLoading}
+            isClearable
+            height={38}
+          />
+        </div>
 
         <div style={{ fontSize: 13.5, fontWeight: 700, marginBottom: 8 }}>وضعیت نوبت</div>
         <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 14 }}>
diff --git a/assets/admin/components/NewAppointmentDrawer.test.tsx b/assets/admin/components/NewAppointmentDrawer.test.tsx
index b6afa740..7991af9f 100644
--- a/assets/admin/components/NewAppointmentDrawer.test.tsx
+++ b/assets/admin/components/NewAppointmentDrawer.test.tsx
@@ -2,6 +2,16 @@ import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { screen, fireEvent, waitFor } from '@testing-library/react';
 import { renderWithProviders } from '../test/utils';
 
+/** react-select (SearchableSelect) را با placeholder پیدا و گزینه را با متن انتخاب می‌کند. */
+async function pickSelect(placeholder: string, optionLabel: string) {
+  const ph = await screen.findByText(placeholder);
+  const control = ph.closest('div[class*="control"]') as HTMLElement;
+  const input = control.querySelector('input') as HTMLInputElement;
+  fireEvent.focus(input);
+  fireEvent.keyDown(input, { key: 'ArrowDown' });
+  fireEvent.click(await screen.findByText(optionLabel));
+}
+
 vi.mock('../lib/api', () => ({
   api: { get: vi.fn(), post: vi.fn(), patch: vi.fn(), put: vi.fn(), delete: vi.fn() },
   ApiError: class extends Error {},
@@ -53,12 +63,9 @@ describe('NewAppointmentDrawer (اضافه کردن نوبت جدید)', () => {
     fireEvent.change(screen.getByPlaceholderText('نام و نام خانوادگی مراجعه کننده را وارد نمایید'), { target: { value: 'مریم خلیلی' } });
     fireEvent.change(screen.getByPlaceholderText('شماره تماس مراجعه کننده را وارد نمایید'), { target: { value: '09136549874' } });
     fireEvent.change(screen.getByPlaceholderText('کد ملی مراجعه کننده را وارد نمایید'), { target: { value: '1234567891' } });
-    await screen.findByRole('option', { name: 'زیبایی' });
-    fireEvent.change(screen.getByLabelText('بخش'), { target: { value: 'sec1' } });
-    await screen.findByRole('option', { name: 'لیزر توتال' });
-    fireEvent.change(screen.getByLabelText('سرویس'), { target: { value: 'it1' } });
-    await screen.findByRole('option', { name: 'سحر ایمانی' });
-    fireEvent.change(screen.getByLabelText('پرسنل'), { target: { value: 'st1' } });
+    await pickSelect('انتخاب بخش', 'زیبایی');
+    await pickSelect('انتخاب سرویس', 'لیزر توتال');
+    await pickSelect('انتخاب...', 'سحر ایمانی');
 
     fireEvent.click(screen.getByRole('button', { name: 'ثبت نوبت' }));
     await waitFor(() => expect(post).toHaveBeenCalledWith('/api/v1/my/appointment', expect.objectContaining({
@@ -112,9 +119,8 @@ describe('NewAppointmentDrawer (اضافه کردن نوبت جدید)', () => {
     // حالت سرویس: منوی زمان‌دهیِ دستی نباید باشد
     await waitFor(() => expect(screen.queryByLabelText('ساعت شروع')).toBeNull());
 
-    fireEvent.change(screen.getByLabelText('بخش'), { target: { value: 'sec1' } });
-    await screen.findByRole('option', { name: 'لیزر توتال' });
-    fireEvent.change(screen.getByLabelText('سرویس'), { target: { value: 'it1' } });
+    await pickSelect('انتخاب بخش', 'زیبایی');
+    await pickSelect('افزودن سرویس', 'لیزر توتال');
 
     // زمانِ خالیِ پیشنهادی ظاهر می‌شود؛ انتخاب می‌کنیم
     const slotBtn = await screen.findByRole('button', { name: '15:00' });
diff --git a/assets/admin/components/NewAppointmentDrawer.tsx b/assets/admin/components/NewAppointmentDrawer.tsx
index 730e398c..47540190 100644
--- a/assets/admin/components/NewAppointmentDrawer.tsx
+++ b/assets/admin/components/NewAppointmentDrawer.tsx
@@ -7,6 +7,7 @@ import type { ApiResponse } from '../lib/api';
 import Modal from './ui/Modal';
 import PersianDateInput from './ui/PersianDateInput';
 import PriceInput from './ui/PriceInput';
+import SearchableSelect from './ui/SearchableSelect';
 import { WalletChargeLink } from './AppointmentActions';
 import { tehranWallClockToUnix } from '../lib/utils';
 
@@ -153,7 +154,6 @@ export default function NewAppointmentDrawer({ doctorUuid, defaultDate, queryKey
   });
 
   const label = { fontSize: 12.5, color: 'var(--text-3)' } as const;
-  const sel = { width: '100%', height: 38, borderRadius: 'var(--r-sm)', border: '1px solid var(--border)', background: 'var(--surface)', fontSize: 13, fontFamily: 'inherit', padding: '0 10px' } as const;
   const patients = useMemo(() => patientsQ.data?.data ?? [], [patientsQ.data]);
 
   return (
@@ -205,33 +205,41 @@ export default function NewAppointmentDrawer({ doctorUuid, defaultDate, queryKey
         <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 10 }}>
           <div>
             <label style={label}>بخش</label>
-            <select aria-label="بخش" style={{ ...sel, marginTop: 6 }} value={sectionUuid} onChange={e => { setSectionUuid(e.target.value); setItemUuid(''); }}>
-              <option value="">انتخاب بخش</option>
-              {(sectionsQ.data?.data ?? []).map(o => <option key={o.uuid} value={o.uuid}>{o.name}</option>)}
-            </select>
+            <div style={{ marginTop: 6 }}>
+              <SearchableSelect
+                options={(sectionsQ.data?.data ?? []).map(o => ({ value: o.uuid, label: o.name ?? '' }))}
+                value={sectionUuid || null}
+                onChange={v => { setSectionUuid(v ? String(v) : ''); setItemUuid(''); }}
+                placeholder="انتخاب بخش"
+                isLoading={sectionsQ.isLoading}
+                isClearable
+                height={38}
+              />
+            </div>
           </div>
           <div>
             <label style={label}>سرویس{serviceMode ? ' (یک یا چند)' : ''}</label>
-            <select
-              aria-label="سرویس"
-              style={{ ...sel, marginTop: 6 }}
-              value={serviceMode ? '' : itemUuid}
-              disabled={!sectionUuid}
-              onChange={e => {
-                const uuid = e.target.value;
-                if (!uuid) return;
-                if (serviceMode) {
-                  const name = (itemsQ.data?.data ?? []).find(o => o.uuid === uuid)?.name ?? '';
-                  setServiceUuids(prev => prev.includes(uuid) ? prev : [...prev, uuid]);
-                  setSvcNames(prev => ({ ...prev, [uuid]: name }));
-                } else {
-                  setItemUuid(uuid);
-                }
-              }}
-            >
-              <option value="">{serviceMode ? 'افزودن سرویس' : 'انتخاب سرویس'}</option>
-              {(itemsQ.data?.data ?? []).map(o => <option key={o.uuid} value={o.uuid}>{o.name}</option>)}
-            </select>
+            <div style={{ marginTop: 6 }}>
+              <SearchableSelect
+                options={(itemsQ.data?.data ?? []).map(o => ({ value: o.uuid, label: o.name ?? '' }))}
+                value={serviceMode ? null : (itemUuid || null)}
+                isDisabled={!sectionUuid}
+                isLoading={itemsQ.isLoading}
+                placeholder={serviceMode ? 'افزودن سرویس' : 'انتخاب سرویس'}
+                onChange={v => {
+                  const uuid = v ? String(v) : '';
+                  if (!uuid) { if (!serviceMode) setItemUuid(''); return; }
+                  if (serviceMode) {
+                    const name = (itemsQ.data?.data ?? []).find(o => o.uuid === uuid)?.name ?? '';
+                    setServiceUuids(prev => prev.includes(uuid) ? prev : [...prev, uuid]);
+                    setSvcNames(prev => ({ ...prev, [uuid]: name }));
+                  } else {
+                    setItemUuid(uuid);
+                  }
+                }}
+                height={38}
+              />
+            </div>
           </div>
         </div>
         {serviceMode && serviceUuids.length > 0 && (
@@ -247,10 +255,17 @@ export default function NewAppointmentDrawer({ doctorUuid, defaultDate, queryKey
           </div>
         )}
         <label style={label}>انتخاب پرسنل</label>
-        <select aria-label="پرسنل" style={{ ...sel, margin: '6px 0 12px' }} value={staffUuid} onChange={e => setStaffUuid(e.target.value)}>
-          <option value="">انتخاب...</option>
-          {(staffQ.data?.data ?? []).map(o => <option key={o.uuid} value={o.uuid}>{o.full_name}</option>)}
-        </select>
+        <div style={{ margin: '6px 0 12px' }}>
+          <SearchableSelect
+            options={(staffQ.data?.data ?? []).map(o => ({ value: o.uuid, label: o.full_name ?? '' }))}
+            value={staffUuid || null}
+            onChange={v => setStaffUuid(v ? String(v) : '')}
+            placeholder="انتخاب..."
+            isLoading={staffQ.isLoading}
+            isClearable
+            height={38}
+          />
+        </div>
 
         <div style={{ fontSize: 13.5, fontWeight: 700, margin: '6px 0 10px' }}>زمان نوبت:</div>
         <label style={label}>انتخاب تاریخ</label>
@@ -326,10 +341,15 @@ export default function NewAppointmentDrawer({ doctorUuid, defaultDate, queryKey
         )}
 
         <label style={label}>انتخاب وضعیت</label>
-        <select aria-label="وضعیت" style={{ ...sel, margin: '6px 0 12px' }} value={status} onChange={e => setStatus(e.target.value)}>
-          <option value="pending">ثبت شده</option>
-          <option value="confirmed">قطعی شده</option>
-        </select>
+        <div style={{ margin: '6px 0 12px' }}>
+          <SearchableSelect
+            options={[{ value: 'pending', label: 'ثبت شده' }, { value: 'confirmed', label: 'قطعی شده' }]}
+            value={status || null}
+            onChange={v => setStatus(v ? String(v) : '')}
+            placeholder="انتخاب وضعیت"
+            height={38}
+          />
+        </div>
 
         <div className="field" style={{ height: 'auto', marginBottom: 16 }}>
           <textarea value={note} onChange={e => setNote(e.target.value)} rows={3} placeholder="توضیحات..."
diff --git a/assets/admin/components/PatientsFilterModal.tsx b/assets/admin/components/PatientsFilterModal.tsx
index 4e7de44f..31248670 100644
--- a/assets/admin/components/PatientsFilterModal.tsx
+++ b/assets/admin/components/PatientsFilterModal.tsx
@@ -4,6 +4,7 @@ import { api } from '../lib/api';
 import type { ApiResponse } from '../lib/api';
 import Modal from './ui/Modal';
 import PersianDateInput from './ui/PersianDateInput';
+import SearchableSelect from './ui/SearchableSelect';
 
 export interface PatientFilters {
   gender?: string;         // male | female
@@ -89,10 +90,14 @@ export default function PatientsFilterModal({ open, onClose, value, onApply }: {
 
         <div>
           <label style={label}>نوع بیمه</label>
-          <select className="input" value={f.insurance_id ?? ''} onChange={(e) => set('insurance_id', e.target.value || undefined)} aria-label="نوع بیمه">
-            <option value="">همه بیمه‌ها</option>
-            {insurances.map((i) => <option key={i.insurance_id} value={String(i.insurance_id)}>{i.insurance_name}</option>)}
-          </select>
+          <SearchableSelect
+            options={insurances.map((i) => ({ value: String(i.insurance_id), label: i.insurance_name }))}
+            value={f.insurance_id ?? null}
+            onChange={(v) => set('insurance_id', v ? String(v) : undefined)}
+            placeholder="همه بیمه‌ها"
+            isClearable
+            height={38}
+          />
         </div>
 
         <div>
diff --git a/assets/admin/components/dashboard/TauriDashboardView.tsx b/assets/admin/components/dashboard/TauriDashboardView.tsx
index 5b59c73a..d0821118 100644
--- a/assets/admin/components/dashboard/TauriDashboardView.tsx
+++ b/assets/admin/components/dashboard/TauriDashboardView.tsx
@@ -9,27 +9,19 @@ import { Link } from 'react-router-dom';
 import { TauriStatCards, type DashboardStats } from './TauriStatCards';
 import { TauriBarChart, TauriLineChart, type ChartPoint } from './TauriCharts';
 import { NewAppointmentsTable, type ApptRow } from './NewAppointmentsTable';
+import SearchableSelect from '../ui/SearchableSelect';
 
 /** small cosmetic dropdown — mirrors source SmSelector (does not drive data) */
 function SmSelector({ options }: { options: string[] }) {
+  const [value, setValue] = React.useState<string | number | null>(options[0] ?? null);
   return (
-    <div className="relative">
-      <select
-        className="appearance-none bg-transparent text-[#7E7E7E] dark:text-[#A1A1A1] text-[12px] font-normal min-w-[92px] rounded-[6px] border border-solid border-[#D7D7D7] dark:border-[#35343D] py-[8px] pr-[8px] pl-[24px] cursor-pointer"
-        defaultValue={options[0]}
-        aria-label="بازه"
-      >
-        {options.map((o) => (
-          <option key={o}>{o}</option>
-        ))}
-      </select>
-      <svg
-        className="pointer-events-none absolute left-[6px] top-1/2 -translate-y-1/2"
-        width="16" height="16" viewBox="0 0 20 20" fill="none"
-      >
-        <path d="M16.6004 7.4585L11.1671 12.8918C10.5254 13.5335 9.47539 13.5335 8.83372 12.8918L3.40039 7.4585"
-          stroke="#7E7E7E" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-      </svg>
+    <div style={{ minWidth: 110 }}>
+      <SearchableSelect
+        options={options.map((o) => ({ value: o, label: o }))}
+        value={value}
+        onChange={setValue}
+        height={34}
+      />
     </div>
   );
 }
diff --git a/assets/admin/components/inventory/AddPackageModal.tsx b/assets/admin/components/inventory/AddPackageModal.tsx
index 8038a8f4..4c723f75 100644
--- a/assets/admin/components/inventory/AddPackageModal.tsx
+++ b/assets/admin/components/inventory/AddPackageModal.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { TrashIcon } from '@heroicons/react/24/outline';
 import Modal from '../ui/Modal';
+import SearchableSelect from '../ui/SearchableSelect';
 import { formatRial } from '../../lib/utils';
 import type { InventoryItem, InventoryPackage, PackagePayload } from '../../hooks/useInventory';
 
@@ -76,12 +77,14 @@ export default function AddPackageModal({ open, editing, items, saving, onClose,
             </div>
             <div>
               <label className="field-label">اجزای پکیج</label>
-              <div className="field">
-                <select value={pickUuid} onChange={(e) => setPickUuid(e.target.value)} disabled={items.length === 0}>
-                  {items.length === 0 && <option value="">ابتدا کالا اضافه کنید</option>}
-                  {items.map((i) => <option key={i.uuid} value={i.uuid}>{i.name}</option>)}
-                </select>
-              </div>
+              <SearchableSelect
+                options={items.map((i) => ({ value: i.uuid, label: i.name }))}
+                value={pickUuid || null}
+                onChange={(v) => setPickUuid(v ? String(v) : '')}
+                placeholder={items.length === 0 ? 'ابتدا کالا اضافه کنید' : 'انتخاب کالا'}
+                isDisabled={items.length === 0}
+                height={38}
+              />
             </div>
             <div>
               <label className="field-label">مقدار</label>
diff --git a/assets/admin/pages/AppointmentCreatePage.tsx b/assets/admin/pages/AppointmentCreatePage.tsx
index 30238ed3..d544f06c 100644
--- a/assets/admin/pages/AppointmentCreatePage.tsx
+++ b/assets/admin/pages/AppointmentCreatePage.tsx
@@ -31,7 +31,6 @@ const addMinutes = (time: string, min: number) => {
 };
 
 const label = { fontSize: 12.5, color: 'var(--text-3)', display: 'block' } as const;
-const sel: React.CSSProperties = { width: '100%', height: 38, borderRadius: 'var(--r-sm)', border: '1px solid var(--border)', background: 'var(--surface)', fontSize: 13, fontFamily: 'inherit', padding: '0 10px' };
 const sectionTitle: React.CSSProperties = { fontSize: 14, fontWeight: 700, color: 'var(--text)', margin: '18px 0 12px' };
 
 export default function AppointmentCreatePage() {
@@ -228,25 +227,47 @@ export default function AppointmentCreatePage() {
           <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 10 }}>
             <div>
               <label style={label}>بخش</label>
-              <select aria-label="بخش" style={{ ...sel, marginTop: 6 }} value={sectionUuid} onChange={e => { setSectionUuid(e.target.value); setItemUuid(''); }}>
-                <option value="">انتخاب بخش</option>
-                {(sectionsQ.data?.data ?? []).map(o => <option key={o.uuid} value={o.uuid}>{o.name}</option>)}
-              </select>
+              <div style={{ marginTop: 6 }}>
+                <SearchableSelect
+                  options={(sectionsQ.data?.data ?? []).map(o => ({ value: o.uuid, label: o.name ?? '' }))}
+                  value={sectionUuid || null}
+                  onChange={v => { setSectionUuid(v ? String(v) : ''); setItemUuid(''); }}
+                  placeholder="انتخاب بخش"
+                  isLoading={sectionsQ.isLoading}
+                  isClearable
+                  height={38}
+                />
+              </div>
             </div>
             <div>
               <label style={label}>سرویس</label>
-              <select aria-label="سرویس" style={{ ...sel, marginTop: 6 }} value={itemUuid} onChange={e => setItemUuid(e.target.value)} disabled={!sectionUuid}>
-                <option value="">انتخاب سرویس</option>
-                {(itemsQ.data?.data ?? []).map(o => <option key={o.uuid} value={o.uuid}>{o.name}</option>)}
-              </select>
+              <div style={{ marginTop: 6 }}>
+                <SearchableSelect
+                  options={(itemsQ.data?.data ?? []).map(o => ({ value: o.uuid, label: o.name ?? '' }))}
+                  value={itemUuid || null}
+                  onChange={v => setItemUuid(v ? String(v) : '')}
+                  placeholder="انتخاب سرویس"
+                  isDisabled={!sectionUuid}
+                  isLoading={itemsQ.isLoading}
+                  isClearable
+                  height={38}
+                />
+              </div>
             </div>
           </div>
         )}
         <label style={label}>انتخاب پرسنل</label>
-        <select aria-label="پرسنل" style={{ ...sel, margin: '6px 0 4px' }} value={staffUuid} onChange={e => setStaffUuid(e.target.value)}>
-          <option value="">انتخاب...</option>
-          {(staffQ.data?.data ?? []).map(o => <option key={o.uuid} value={o.uuid}>{o.full_name}</option>)}
-        </select>
+        <div style={{ margin: '6px 0 4px' }}>
+          <SearchableSelect
+            options={(staffQ.data?.data ?? []).map(o => ({ value: o.uuid, label: o.full_name ?? '' }))}
+            value={staffUuid || null}
+            onChange={v => setStaffUuid(v ? String(v) : '')}
+            placeholder="انتخاب..."
+            isLoading={staffQ.isLoading}
+            isClearable
+            height={38}
+          />
+        </div>
 
         {/* زمان نوبت */}
         <div style={sectionTitle}>زمان نوبت:</div>
@@ -301,10 +322,15 @@ export default function AppointmentCreatePage() {
         )}
 
         <label style={label}>انتخاب وضعیت</label>
-        <select aria-label="وضعیت" style={{ ...sel, margin: '6px 0 12px' }} value={status} onChange={e => setStatus(e.target.value)}>
-          <option value="pending">ثبت شده</option>
-          <option value="confirmed">قطعی شده</option>
-        </select>
+        <div style={{ margin: '6px 0 12px' }}>
+          <SearchableSelect
+            options={[{ value: 'pending', label: 'ثبت شده' }, { value: 'confirmed', label: 'قطعی شده' }]}
+            value={status || null}
+            onChange={v => setStatus(v ? String(v) : '')}
+            placeholder="انتخاب وضعیت"
+            height={38}
+          />
+        </div>
 
         <label style={label}>توضیحات</label>
         <div className="field" style={{ height: 'auto', margin: '6px 0 16px' }}>
diff --git a/assets/admin/pages/AppointmentEditPage.test.tsx b/assets/admin/pages/AppointmentEditPage.test.tsx
index 5f382841..8699b949 100644
--- a/assets/admin/pages/AppointmentEditPage.test.tsx
+++ b/assets/admin/pages/AppointmentEditPage.test.tsx
@@ -46,7 +46,7 @@ describe('AppointmentEditPage (ویرایش نوبت)', () => {
     renderEdit();
     expect(await screen.findByText('مشخصات سرویس:')).toBeInTheDocument();
     expect((screen.getByLabelText('ساعت شروع') as HTMLInputElement).value).toBe('15:00');
-    expect((screen.getByLabelText('وضعیت') as HTMLSelectElement).value).toBe('confirmed');
+    expect(screen.getByText('قطعی شده')).toBeInTheDocument(); // react-select single value = confirmed
     expect(screen.getByDisplayValue('یادداشت')).toBeInTheDocument();
   });
 
diff --git a/assets/admin/pages/AppointmentEditPage.tsx b/assets/admin/pages/AppointmentEditPage.tsx
index 66de5384..03f6ec16 100644
--- a/assets/admin/pages/AppointmentEditPage.tsx
+++ b/assets/admin/pages/AppointmentEditPage.tsx
@@ -7,6 +7,7 @@ import { api } from '../lib/api';
 import type { ApiResponse } from '../lib/api';
 import PersianDateInput from '../components/ui/PersianDateInput';
 import PriceInput from '../components/ui/PriceInput';
+import SearchableSelect from '../components/ui/SearchableSelect';
 import { WalletChargeLink } from '../components/AppointmentActions';
 
 interface Option { uuid: string; name?: string; full_name?: string }
@@ -100,7 +101,6 @@ export default function AppointmentEditPage() {
   });
 
   const label = { fontSize: 12.5, color: 'var(--text-3)' } as const;
-  const sel = { width: '100%', height: 38, borderRadius: 'var(--r-sm)', border: '1px solid var(--border)', background: 'var(--surface)', fontSize: 13, fontFamily: 'inherit', padding: '0 10px' } as const;
 
   if (isLoading || !a) return <div style={{ padding: 24, color: 'var(--text-3)', fontSize: 13 }}>در حال بارگذاری...</div>;
 
@@ -122,24 +122,46 @@ export default function AppointmentEditPage() {
         <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 12, marginBottom: 18 }}>
           <div>
             <label style={label}>بخش</label>
-            <select aria-label="بخش" style={{ ...sel, marginTop: 6 }} value={sectionUuid} onChange={e => { setSectionUuid(e.target.value); setItemUuid(''); }}>
-              <option value="">انتخاب بخش</option>
-              {(sectionsQ.data?.data ?? []).map(o => <option key={o.uuid} value={o.uuid}>{o.name}</option>)}
-            </select>
+            <div style={{ marginTop: 6 }}>
+              <SearchableSelect
+                options={(sectionsQ.data?.data ?? []).map(o => ({ value: o.uuid, label: o.name ?? '' }))}
+                value={sectionUuid || null}
+                onChange={v => { setSectionUuid(v ? String(v) : ''); setItemUuid(''); }}
+                placeholder="انتخاب بخش"
+                isLoading={sectionsQ.isLoading}
+                isClearable
+                height={38}
+              />
+            </div>
           </div>
           <div>
             <label style={label}>سرویس</label>
-            <select aria-label="سرویس" style={{ ...sel, marginTop: 6 }} value={itemUuid} onChange={e => setItemUuid(e.target.value)} disabled={!sectionUuid}>
-              <option value="">انتخاب سرویس</option>
-              {(itemsQ.data?.data ?? []).map(o => <option key={o.uuid} value={o.uuid}>{o.name}</option>)}
-            </select>
+            <div style={{ marginTop: 6 }}>
+              <SearchableSelect
+                options={(itemsQ.data?.data ?? []).map(o => ({ value: o.uuid, label: o.name ?? '' }))}
+                value={itemUuid || null}
+                onChange={v => setItemUuid(v ? String(v) : '')}
+                placeholder="انتخاب سرویس"
+                isDisabled={!sectionUuid}
+                isLoading={itemsQ.isLoading}
+                isClearable
+                height={38}
+              />
+            </div>
           </div>
           <div>
             <label style={label}>پرسنل</label>
-            <select aria-label="پرسنل" style={{ ...sel, marginTop: 6 }} value={staffUuid} onChange={e => setStaffUuid(e.target.value)}>
-              <option value="">انتخاب پرسنل</option>
-              {(staffQ.data?.data ?? []).map(o => <option key={o.uuid} value={o.uuid}>{o.full_name}</option>)}
-            </select>
+            <div style={{ marginTop: 6 }}>
+              <SearchableSelect
+                options={(staffQ.data?.data ?? []).map(o => ({ value: o.uuid, label: o.full_name ?? '' }))}
+                value={staffUuid || null}
+                onChange={v => setStaffUuid(v ? String(v) : '')}
+                placeholder="انتخاب پرسنل"
+                isLoading={staffQ.isLoading}
+                isClearable
+                height={38}
+              />
+            </div>
           </div>
         </div>
 
@@ -178,9 +200,15 @@ export default function AppointmentEditPage() {
 
         <div style={{ maxWidth: 320, marginBottom: 18 }}>
           <label style={label}>انتخاب وضعیت</label>
-          <select aria-label="وضعیت" style={{ ...sel, marginTop: 6 }} value={status} onChange={e => setStatus(e.target.value)}>
-            {statusOptions.map(([v, l]) => <option key={v} value={v}>{l}</option>)}
-          </select>
+          <div style={{ marginTop: 6 }}>
+            <SearchableSelect
+              options={statusOptions.map(([v, l]) => ({ value: v, label: l }))}
+              value={status || null}
+              onChange={v => setStatus(v ? String(v) : '')}
+              placeholder="انتخاب وضعیت"
+              height={38}
+            />
+          </div>
         </div>
 
         <label style={label}>توضیحات</label>
diff --git a/assets/admin/pages/AppointmentsPage.tsx b/assets/admin/pages/AppointmentsPage.tsx
index 4825990f..b21ddb11 100644
--- a/assets/admin/pages/AppointmentsPage.tsx
+++ b/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>
   );
 }
diff --git a/assets/admin/pages/DoctorDetailPage.tsx b/assets/admin/pages/DoctorDetailPage.tsx
index 31efe5a0..20efae81 100644
--- a/assets/admin/pages/DoctorDetailPage.tsx
+++ b/assets/admin/pages/DoctorDetailPage.tsx
@@ -1053,15 +1053,23 @@ function TimeSelect({ value, onChange }: { value: string; onChange: (v: string)
 
   return (
     <div className="cp-time-select" style={{ display: 'flex', alignItems: 'center', gap: 6 }} dir="ltr">
-      <select className="cp-input" style={{ height: 38, width: 72, textAlign: 'center' }}
-        value={h} onChange={e => onChange(`${e.target.value}:${m}`)}>
-        {HOUR_VALUES.map(hv => <option key={hv} value={hv}>{hv}</option>)}
-      </select>
+      <div style={{ width: 92 }}>
+        <GlobalSearchableSelect
+          options={HOUR_VALUES.map(hv => ({ value: hv, label: hv }))}
+          value={h}
+          onChange={v => onChange(`${v ? String(v) : h}:${m}`)}
+          height={38}
+        />
+      </div>
       <span style={{ fontWeight: 700, color: 'var(--text-2)' }}>:</span>
-      <select className="cp-input" style={{ height: 38, width: 72, textAlign: 'center' }}
-        value={m} onChange={e => onChange(`${h}:${e.target.value}`)}>
-        {MINUTE_VALUES.map(mv => <option key={mv} value={mv}>{mv}</option>)}
-      </select>
+      <div style={{ width: 92 }}>
+        <GlobalSearchableSelect
+          options={MINUTE_VALUES.map(mv => ({ value: mv, label: mv }))}
+          value={m}
+          onChange={v => onChange(`${h}:${v ? String(v) : m}`)}
+          height={38}
+        />
+      </div>
     </div>
   );
 }
@@ -1494,24 +1502,24 @@ export function WeeklyScheduleTab({ doctorUuid, addresses, readOnly = false }: {
         <div className={`px-4 py-3 transition-opacity ${meta.online_booking_enabled ? '' : 'opacity-50 pointer-events-none'}`}>
           <div className="flex flex-wrap items-center gap-2">
             <span className="text-sm text-slate-600 dark:text-slate-400">رزرو آنلاین تا</span>
-            <div className="flex items-stretch rounded-lg border border-slate-200 dark:border-gray-700 overflow-hidden bg-white dark:bg-gray-900">
+            <div className="flex items-stretch gap-2">
               <input
                 type="number"
                 min={1}
                 value={meta.booking_window_value}
                 disabled={!meta.online_booking_enabled}
                 onChange={(e) => setMeta(m => ({ ...m, booking_window_value: Math.max(1, Number(e.target.value) || 1) }))}
-                className="w-14 text-center text-sm bg-transparent border-0 focus:outline-none focus:ring-0 px-2 py-1.5"
+                className="w-14 text-center text-sm rounded-lg border border-slate-200 dark:border-gray-700 bg-white dark:bg-gray-900 focus:outline-none focus:ring-0 px-2 py-1.5"
               />
-              <select
-                value={meta.booking_window_unit}
-                disabled={!meta.online_booking_enabled}
-                onChange={(e) => setMeta(m => ({ ...m, booking_window_unit: e.target.value as 'week' | 'month' }))}
-                className="text-sm bg-slate-50 dark:bg-gray-800 border-0 border-r border-slate-200 dark:border-gray-700 focus:outline-none focus:ring-0 px-2 py-1.5"
-              >
-                <option value="week">هفته</option>
-                <option value="month">ماه</option>
-              </select>
+              <div style={{ width: 110 }}>
+                <GlobalSearchableSelect
+                  options={[{ value: 'week', label: 'هفته' }, { value: 'month', label: 'ماه' }]}
+                  value={meta.booking_window_unit}
+                  onChange={(v) => setMeta(m => ({ ...m, booking_window_unit: (v as 'week' | 'month') }))}
+                  isDisabled={!meta.online_booking_enabled}
+                  height={38}
+                />
+              </div>
             </div>
             <span className="text-sm text-slate-600 dark:text-slate-400">آینده</span>
           </div>
diff --git a/assets/admin/pages/InventoryPage.tsx b/assets/admin/pages/InventoryPage.tsx
index 5a5517bf..19c0114b 100644
--- a/assets/admin/pages/InventoryPage.tsx
+++ b/assets/admin/pages/InventoryPage.tsx
@@ -1,6 +1,7 @@
 import React, { useMemo, useState } from 'react';
 import { PlusIcon, MagnifyingGlassIcon, ArchiveBoxIcon } from '@heroicons/react/24/outline';
 import ConfirmDialog from '../components/ui/ConfirmDialog';
+import SearchableSelect from '../components/ui/SearchableSelect';
 import { useInventory } from '../hooks/useInventory';
 import type { InventoryItem, InventoryPackage, ItemPayload, PackagePayload } from '../hooks/useInventory';
 import InventoryStatCards from '../components/inventory/InventoryStatCards';
@@ -68,11 +69,15 @@ export default function InventoryPage() {
                   style={{ border: 'none', background: 'transparent', flex: 1, padding: 0 }}
                 />
               </div>
-              <div className="field" style={{ minWidth: 200, flex: '1 1 260px', maxWidth: 397 }}>
-                <select value={category} onChange={(e) => setCategory(e.target.value)}>
-                  <option value="">دسته‌بندی کالا را انتخاب کنید...</option>
-                  {categories.map((c) => <option key={c} value={c}>{c}</option>)}
-                </select>
+              <div style={{ minWidth: 200, flex: '1 1 260px', maxWidth: 397 }}>
+                <SearchableSelect
+                  options={categories.map((c) => ({ value: c, label: c }))}
+                  value={category || null}
+                  onChange={(v) => setCategory(v ? String(v) : '')}
+                  placeholder="دسته‌بندی کالا را انتخاب کنید..."
+                  isClearable
+                  height={38}
+                />
               </div>
             </div>
             <button className="btn primary" onClick={() => setItemModal({ open: true, editing: null })}>
diff --git a/assets/admin/pages/MyPatientsPage.tsx b/assets/admin/pages/MyPatientsPage.tsx
index d7bc30ba..7bc55972 100644
--- a/assets/admin/pages/MyPatientsPage.tsx
+++ b/assets/admin/pages/MyPatientsPage.tsx
@@ -1393,29 +1393,25 @@ function MyPatientsPageInner() {
                         >
                             <div className="field" style={{ flexDirection: "column", alignItems: "stretch", height: "auto", gap: 5, padding: 0, border: "none", background: "none" }}>
                                 <label style={{ fontSize: 12.5, fontWeight: 600 }}>بیمه پایه</label>
-                                <select
-                                    className="input"
-                                    value={baseInsuranceId}
-                                    onChange={(e) => applyBaseInsurance(e.target.value)}
-                                >
-                                    <option value="">بدون بیمه پایه</option>
-                                    {baseInsuranceOptions.map((o) => (
-                                        <option key={o.value} value={o.value}>{o.label}</option>
-                                    ))}
-                                </select>
+                                <SearchableSelect
+                                    options={baseInsuranceOptions}
+                                    value={baseInsuranceId || null}
+                                    onChange={(v) => applyBaseInsurance(v ? String(v) : "")}
+                                    placeholder="بدون بیمه پایه"
+                                    isClearable
+                                    height={38}
+                                />
                             </div>
                             <div className="field" style={{ flexDirection: "column", alignItems: "stretch", height: "auto", gap: 5, padding: 0, border: "none", background: "none" }}>
                                 <label style={{ fontSize: 12.5, fontWeight: 600 }}>بیمه تکمیلی</label>
-                                <select
-                                    className="input"
-                                    value={suppInsuranceId}
-                                    onChange={(e) => applySuppInsurance(e.target.value)}
-                                >
-                                    <option value="">بدون بیمه تکمیلی</option>
-                                    {suppInsuranceOptions.map((o) => (
-                                        <option key={o.value} value={o.value}>{o.label}</option>
-                                    ))}
-                                </select>
+                                <SearchableSelect
+                                    options={suppInsuranceOptions}
+                                    value={suppInsuranceId || null}
+                                    onChange={(v) => applySuppInsurance(v ? String(v) : "")}
+                                    placeholder="بدون بیمه تکمیلی"
+                                    isClearable
+                                    height={38}
+                                />
                             </div>
                         </div>
                         <div
@@ -1460,17 +1456,14 @@ function MyPatientsPageInner() {
                             </div>
                         </div>
                         <div style={{ fontWeight: 700, fontSize: 13.5, color: "var(--text-2)", borderTop: "1px solid var(--border)", paddingTop: 12 }}>پرداخت و یادداشت</div>
-                        <div className="field">
+                        <div className="field" style={{ flexDirection: "column", alignItems: "stretch", height: "auto", gap: 5, padding: 0, border: "none", background: "none" }}>
                             <label>روش پرداخت</label>
-                            <select {...form.register("payment_method")}>
-                                {Object.entries(PAYMENT_LABELS).map(
-                                    ([v, l]) => (
-                                        <option key={v} value={v}>
-                                            {l}
-                                        </option>
-                                    ),
-                                )}
-                            </select>
+                            <SearchableSelect
+                                options={Object.entries(PAYMENT_LABELS).map(([v, l]) => ({ value: v, label: l }))}
+                                value={form.watch("payment_method")}
+                                onChange={(v) => form.setValue("payment_method", v as "cash" | "card" | "insurance" | "online" | "pending", { shouldDirty: true })}
+                                height={38}
+                            />
                         </div>
                         <div className="field">
                             <label>یادداشت</label>
@@ -2026,18 +2019,14 @@ function EditSessionModal({
     return (
         <Modal open={!!session} onClose={onClose} title="ویرایش مراجعه">
             <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
-                <div className="field">
+                <div className="field" style={{ flexDirection: "column", alignItems: "stretch", height: "auto", gap: 5, padding: 0, border: "none", background: "none" }}>
                     <label>روش پرداخت</label>
-                    <select
+                    <SearchableSelect
+                        options={Object.entries(PAYMENT_LABELS).map(([v, l]) => ({ value: v, label: l }))}
                         value={method}
-                        onChange={(e) => setMethod(e.target.value)}
-                    >
-                        {Object.entries(PAYMENT_LABELS).map(([v, l]) => (
-                            <option key={v} value={v}>
-                                {l}
-                            </option>
-                        ))}
-                    </select>
+                        onChange={(v) => setMethod(v ? String(v) : "cash")}
+                        height={38}
+                    />
                 </div>
                 <div className="field">
                     <label>یادداشت</label>
diff --git a/assets/admin/pages/MyPaymentsPage.tsx b/assets/admin/pages/MyPaymentsPage.tsx
index 834cb511..5c0dbf11 100644
--- a/assets/admin/pages/MyPaymentsPage.tsx
+++ b/assets/admin/pages/MyPaymentsPage.tsx
@@ -4,6 +4,7 @@ import { MagnifyingGlassIcon, EyeIcon, BanknotesIcon, UserPlusIcon } from '@hero
 import PageHeader from '../components/ui/PageHeader';
 import Pagination from '../components/ui/Pagination';
 import PersianDateInput from '../components/ui/PersianDateInput';
+import SearchableSelect from '../components/ui/SearchableSelect';
 import { formatRial, formatDate, formatNumber, toDate } from '../lib/utils';
 import {
   usePayments,
@@ -92,17 +93,16 @@ export default function MyPaymentsPage() {
           />
         </div>
 
-        <select
-          className="input"
-          style={{ flex: '0 0 auto', width: 160 }}
-          value={status}
-          onChange={(e) => { setStatus(e.target.value); reset(); }}
-          aria-label="وضعیت"
-        >
-          <option value="">همه وضعیت‌ها</option>
-          <option value="paid">پرداخت شده</option>
-          <option value="unsettled">تسویه نشده</option>
-        </select>
+        <div style={{ flex: '0 0 auto', width: 160 }}>
+          <SearchableSelect
+            options={[{ value: 'paid', label: 'پرداخت شده' }, { value: 'unsettled', label: 'تسویه نشده' }]}
+            value={status || null}
+            onChange={(v) => { setStatus(v ? String(v) : ''); reset(); }}
+            placeholder="همه وضعیت‌ها"
+            isClearable
+            height={38}
+          />
+        </div>
 
         <div style={{ width: 150 }}>
           <PersianDateInput value={from} onChange={(v) => { setFrom(v); reset(); }} placeholder="از تاریخ" />
diff --git a/assets/admin/pages/PatientRecordFormPage.test.tsx b/assets/admin/pages/PatientRecordFormPage.test.tsx
index 8a0e9182..401cf8b5 100644
--- a/assets/admin/pages/PatientRecordFormPage.test.tsx
+++ b/assets/admin/pages/PatientRecordFormPage.test.tsx
@@ -11,6 +11,16 @@ vi.mock('../lib/api', () => ({
 import { api } from '../lib/api';
 import PatientRecordFormPage from './PatientRecordFormPage';
 
+/** react-select (SearchableSelect) را با placeholder پیدا و گزینه را با متن انتخاب می‌کند. */
+async function pickSelect(placeholder: string, optionLabel: string) {
+  const ph = await screen.findByText(placeholder);
+  const control = ph.closest('div[class*="control"]') as HTMLElement;
+  const input = control.querySelector('input') as HTMLInputElement;
+  fireEvent.focus(input);
+  fireEvent.keyDown(input, { key: 'ArrowDown' });
+  fireEvent.click(await screen.findByText(optionLabel));
+}
+
 const post = api.post as ReturnType<typeof vi.fn>;
 const patch = api.patch as ReturnType<typeof vi.fn>;
 
@@ -26,7 +36,7 @@ describe('PatientRecordFormPage (تشکیل پرونده)', () => {
 
     fireEvent.change(screen.getByPlaceholderText('نام و نام خانوادگی را وارد نمایید'), { target: { value: 'بیمار نمونه' } });
     fireEvent.change(screen.getByPlaceholderText('شماره پرونده'), { target: { value: 'P-1001' } });
-    fireEvent.change(screen.getAllByRole('combobox')[0], { target: { value: 'female' } }); // gender
+    await pickSelect('انتخاب...', 'زن'); // gender = female
     fireEvent.change(screen.getByPlaceholderText('کد ملی را وارد نمایید'), { target: { value: '1234567890' } });
     fireEvent.change(screen.getByPlaceholderText('شماره تماس را وارد نمایید'), { target: { value: '09120000000' } });
     fireEvent.click(screen.getByRole('button', { name: 'ثبت اطلاعات' }));
@@ -42,7 +52,7 @@ describe('PatientRecordFormPage (تشکیل پرونده)', () => {
 
     fireEvent.change(screen.getByPlaceholderText('نام و نام خانوادگی را وارد نمایید'), { target: { value: 'ب' } });
     fireEvent.change(screen.getByPlaceholderText('شماره پرونده'), { target: { value: 'P-1' } });
-    fireEvent.change(screen.getAllByRole('combobox')[0], { target: { value: 'male' } });
+    await pickSelect('انتخاب...', 'مرد');
     fireEvent.change(screen.getByPlaceholderText('کد ملی را وارد نمایید'), { target: { value: '12' } });
     fireEvent.change(screen.getByPlaceholderText('شماره تماس را وارد نمایید'), { target: { value: '09120000000' } });
     fireEvent.click(screen.getByRole('button', { name: 'ثبت اطلاعات' }));
diff --git a/assets/admin/pages/PatientRecordFormPage.tsx b/assets/admin/pages/PatientRecordFormPage.tsx
index 414f86dc..ff5a10db 100644
--- a/assets/admin/pages/PatientRecordFormPage.tsx
+++ b/assets/admin/pages/PatientRecordFormPage.tsx
@@ -10,6 +10,7 @@ import { api } from '../lib/api';
 import type { ApiResponse } from '../lib/api';
 import type { PatientRecord } from '../types';
 import PersianDateInput from '../components/ui/PersianDateInput';
+import SearchableSelect from '../components/ui/SearchableSelect';
 
 const REFERRAL_OPTIONS = ['اینستاگرام', 'معرفی دوستان و آشنایان', 'جستجوی اینترنتی', 'تابلو مطب', 'سایر'];
 
@@ -116,11 +117,13 @@ export default function PatientRecordFormPage() {
             <div className="field"><input {...form.register('record_number')} placeholder="شماره پرونده" /></div>
           </Field>
           <Field label="جنسیت" required error={form.formState.errors.gender?.message}>
-            <div className="field"><select {...form.register('gender')} style={{ width: '100%', border: 'none', background: 'transparent', fontFamily: 'inherit' }}>
-              <option value="">انتخاب...</option>
-              <option value="female">زن</option>
-              <option value="male">مرد</option>
-            </select></div>
+            <SearchableSelect
+              options={[{ value: 'female', label: 'زن' }, { value: 'male', label: 'مرد' }]}
+              value={form.watch('gender') ?? null}
+              onChange={(v) => form.setValue('gender', v as Form['gender'], { shouldValidate: true, shouldDirty: true })}
+              placeholder="انتخاب..."
+              height={38}
+            />
           </Field>
           <Field label="کد ملی" required error={form.formState.errors.national_code?.message}>
             <div className="field"><input {...form.register('national_code')} inputMode="numeric" placeholder="کد ملی را وارد نمایید" /></div>
@@ -132,10 +135,14 @@ export default function PatientRecordFormPage() {
             <PersianDateInput value={form.watch('birth_date') ?? ''} onChange={(v) => form.setValue('birth_date', v)} enableYearPicker />
           </Field>
           <Field label="نحوه آشنایی">
-            <div className="field"><select {...form.register('referral_source')} style={{ width: '100%', border: 'none', background: 'transparent', fontFamily: 'inherit' }}>
-              <option value="">انتخاب کنید...</option>
-              {REFERRAL_OPTIONS.map((o) => <option key={o} value={o}>{o}</option>)}
-            </select></div>
+            <SearchableSelect
+              options={REFERRAL_OPTIONS.map((o) => ({ value: o, label: o }))}
+              value={form.watch('referral_source') || null}
+              onChange={(v) => form.setValue('referral_source', v ? String(v) : '', { shouldDirty: true })}
+              placeholder="انتخاب کنید..."
+              isClearable
+              height={38}
+            />
           </Field>
         </div>
 
diff --git a/assets/admin/pages/RepresentationSettlementPage.tsx b/assets/admin/pages/RepresentationSettlementPage.tsx
index f9f60647..9c82d028 100644
--- a/assets/admin/pages/RepresentationSettlementPage.tsx
+++ b/assets/admin/pages/RepresentationSettlementPage.tsx
@@ -5,6 +5,7 @@ import { api } from '../lib/api';
 import type { ApiResponse } from '../lib/api';
 import { formatRial, formatDate, tomanToRial } from '../lib/utils';
 import Pagination from '../components/ui/Pagination';
+import SearchableSelect from '../components/ui/SearchableSelect';
 
 interface WalletBalance { balance_rials: number }
 interface RepSummary { income: { settlable_rials: number; settled_rials: number; pending_rials: number } }
@@ -130,15 +131,16 @@ export default function RepresentationSettlementPage() {
               onChange={(e) => setAmount(e.target.value)}
               style={{ width: 200, height: 38, padding: '0 12px', borderRadius: 'var(--r-sm)', border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)', fontSize: 13.5, boxSizing: 'border-box' }}
             />
-            <select
-              value={ibanId} onChange={(e) => setIbanId(e.target.value)} dir="ltr"
-              style={{ width: 320, height: 38, padding: '0 10px', borderRadius: 'var(--r-sm)', border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)', fontSize: 12.5, boxSizing: 'border-box' }}
-            >
-              <option value="">انتخاب شماره شبا...</option>
-              {ibans.map((b) => (
-                <option key={b.id} value={b.id}>{b.iban}{b.bank_name ? ` — ${b.bank_name}` : ''}</option>
-              ))}
-            </select>
+            <div style={{ width: 320 }}>
+              <SearchableSelect
+                options={ibans.map((b) => ({ value: String(b.id), label: `${b.iban}${b.bank_name ? ` — ${b.bank_name}` : ''}` }))}
+                value={ibanId || null}
+                onChange={(v) => setIbanId(v ? String(v) : '')}
+                placeholder="انتخاب شماره شبا..."
+                isClearable
+                height={38}
+              />
+            </div>
             <button className="btn primary" onClick={submit} disabled={createMut.isPending}>
               {createMut.isPending ? 'در حال ثبت...' : 'ثبت درخواست'}
             </button>
diff --git a/assets/admin/pages/ReserveAppointmentsPage.tsx b/assets/admin/pages/ReserveAppointmentsPage.tsx
index d16838ee..0b257dc3 100644
--- a/assets/admin/pages/ReserveAppointmentsPage.tsx
+++ b/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}