feat: enhance DoctorFormPage with searchable specialties and improved UI components

- Refactored DoctorFormPage to use Controller from react-hook-form for better form handling.
- Added a new Field component for consistent input styling and error handling.
- Implemented a SpecialtyPicker component with improved selection logic for specialties.
- Updated the layout and styling of the form sections for better user experience.
- Integrated SearchableSelect for selecting specialties and roles in DoctorsPage and UsersPage.
- Added createClinic API endpoint to handle clinic creation with validation for mobile and name fields.

assets/admin/pages/UsersPage.tsx

@@ -12,6 +12,7 @@ import type { ApiResponse, PaginatedResponse } from '../lib/api';
 import { formatDate, formatNumber, maskMobile } from '../lib/utils';
 import ConfirmDialog from '../components/ui/ConfirmDialog';
 import Pagination from '../components/ui/Pagination';
+import SearchableSelect from '../components/ui/SearchableSelect';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 
 // ── Types ─────────────────────────────────────────────────────────────────
@@ -292,12 +293,13 @@ export default function UsersPage() {
                 placeholder="نام، موبایل یا ایمیل..."
               />
             </div>
-            <div className="field">
-              <select value={role} onChange={(e) => setRole(e.target.value)}>
-                {ROLE_TABS.map((t) => (
-                  <option key={t.key} value={t.key}>{t.label}</option>
-                ))}
-              </select>
+            <div style={{ minWidth: 160 }}>
+              <SearchableSelect
+                options={ROLE_TABS.map(t => ({ value: t.key, label: t.label }))}
+                value={role || ''}
+                onChange={(v) => setRole(v ? String(v) : '')}
+                height={36}
+              />
             </div>
             <div className="seg">
               <button className={!status ? 'on' : ''} onClick={() => setStatus('')}>همه</button>