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