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/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="از تاریخ" />