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