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/dashboard/TauriDashboardView.tsx

@@ -9,27 +9,19 @@ import { Link } from 'react-router-dom';
 import { TauriStatCards, type DashboardStats } from './TauriStatCards';
 import { TauriBarChart, TauriLineChart, type ChartPoint } from './TauriCharts';
 import { NewAppointmentsTable, type ApptRow } from './NewAppointmentsTable';
+import SearchableSelect from '../ui/SearchableSelect';
 
 /** small cosmetic dropdown — mirrors source SmSelector (does not drive data) */
 function SmSelector({ options }: { options: string[] }) {
+  const [value, setValue] = React.useState<string | number | null>(options[0] ?? null);
   return (
-    <div className="relative">
-      <select
-        className="appearance-none bg-transparent text-[#7E7E7E] dark:text-[#A1A1A1] text-[12px] font-normal min-w-[92px] rounded-[6px] border border-solid border-[#D7D7D7] dark:border-[#35343D] py-[8px] pr-[8px] pl-[24px] cursor-pointer"
-        defaultValue={options[0]}
-        aria-label="بازه"
-      >
-        {options.map((o) => (
-          <option key={o}>{o}</option>
-        ))}
-      </select>
-      <svg
-        className="pointer-events-none absolute left-[6px] top-1/2 -translate-y-1/2"
-        width="16" height="16" viewBox="0 0 20 20" fill="none"
-      >
-        <path d="M16.6004 7.4585L11.1671 12.8918C10.5254 13.5335 9.47539 13.5335 8.83372 12.8918L3.40039 7.4585"
-          stroke="#7E7E7E" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-      </svg>
+    <div style={{ minWidth: 110 }}>
+      <SearchableSelect
+        options={options.map((o) => ({ value: o, label: o }))}
+        value={value}
+        onChange={setValue}
+        height={34}
+      />
     </div>
   );
 }