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/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>