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