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/AppointmentCreatePage.tsx

@@ -31,7 +31,6 @@ const addMinutes = (time: string, min: number) => {
 };
 
 const label = { fontSize: 12.5, color: 'var(--text-3)', display: 'block' } as const;
-const sel: React.CSSProperties = { width: '100%', height: 38, borderRadius: 'var(--r-sm)', border: '1px solid var(--border)', background: 'var(--surface)', fontSize: 13, fontFamily: 'inherit', padding: '0 10px' };
 const sectionTitle: React.CSSProperties = { fontSize: 14, fontWeight: 700, color: 'var(--text)', margin: '18px 0 12px' };
 
 export default function AppointmentCreatePage() {
@@ -228,25 +227,47 @@ export default function AppointmentCreatePage() {
           <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 10 }}>
             <div>
               <label style={label}>بخش</label>
-              <select aria-label="بخش" style={{ ...sel, marginTop: 6 }} value={sectionUuid} onChange={e => { setSectionUuid(e.target.value); setItemUuid(''); }}>
-                <option value="">انتخاب بخش</option>
-                {(sectionsQ.data?.data ?? []).map(o => <option key={o.uuid} value={o.uuid}>{o.name}</option>)}
-              </select>
+              <div style={{ marginTop: 6 }}>
+                <SearchableSelect
+                  options={(sectionsQ.data?.data ?? []).map(o => ({ value: o.uuid, label: o.name ?? '' }))}
+                  value={sectionUuid || null}
+                  onChange={v => { setSectionUuid(v ? String(v) : ''); setItemUuid(''); }}
+                  placeholder="انتخاب بخش"
+                  isLoading={sectionsQ.isLoading}
+                  isClearable
+                  height={38}
+                />
+              </div>
             </div>
             <div>
               <label style={label}>سرویس</label>
-              <select aria-label="سرویس" style={{ ...sel, marginTop: 6 }} value={itemUuid} onChange={e => setItemUuid(e.target.value)} disabled={!sectionUuid}>
-                <option value="">انتخاب سرویس</option>
-                {(itemsQ.data?.data ?? []).map(o => <option key={o.uuid} value={o.uuid}>{o.name}</option>)}
-              </select>
+              <div style={{ marginTop: 6 }}>
+                <SearchableSelect
+                  options={(itemsQ.data?.data ?? []).map(o => ({ value: o.uuid, label: o.name ?? '' }))}
+                  value={itemUuid || null}
+                  onChange={v => setItemUuid(v ? String(v) : '')}
+                  placeholder="انتخاب سرویس"
+                  isDisabled={!sectionUuid}
+                  isLoading={itemsQ.isLoading}
+                  isClearable
+                  height={38}
+                />
+              </div>
             </div>
           </div>
         )}
         <label style={label}>انتخاب پرسنل</label>
-        <select aria-label="پرسنل" style={{ ...sel, margin: '6px 0 4px' }} value={staffUuid} onChange={e => setStaffUuid(e.target.value)}>
-          <option value="">انتخاب...</option>
-          {(staffQ.data?.data ?? []).map(o => <option key={o.uuid} value={o.uuid}>{o.full_name}</option>)}
-        </select>
+        <div style={{ margin: '6px 0 4px' }}>
+          <SearchableSelect
+            options={(staffQ.data?.data ?? []).map(o => ({ value: o.uuid, label: o.full_name ?? '' }))}
+            value={staffUuid || null}
+            onChange={v => setStaffUuid(v ? String(v) : '')}
+            placeholder="انتخاب..."
+            isLoading={staffQ.isLoading}
+            isClearable
+            height={38}
+          />
+        </div>
 
         {/* زمان نوبت */}
         <div style={sectionTitle}>زمان نوبت:</div>
@@ -301,10 +322,15 @@ export default function AppointmentCreatePage() {
         )}
 
         <label style={label}>انتخاب وضعیت</label>
-        <select aria-label="وضعیت" style={{ ...sel, margin: '6px 0 12px' }} value={status} onChange={e => setStatus(e.target.value)}>
-          <option value="pending">ثبت شده</option>
-          <option value="confirmed">قطعی شده</option>
-        </select>
+        <div style={{ margin: '6px 0 12px' }}>
+          <SearchableSelect
+            options={[{ value: 'pending', label: 'ثبت شده' }, { value: 'confirmed', label: 'قطعی شده' }]}
+            value={status || null}
+            onChange={v => setStatus(v ? String(v) : '')}
+            placeholder="انتخاب وضعیت"
+            height={38}
+          />
+        </div>
 
         <label style={label}>توضیحات</label>
         <div className="field" style={{ height: 'auto', margin: '6px 0 16px' }}>