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

@@ -12,6 +12,7 @@ import { formatDate, toGregorianDate } from '../lib/utils';
 import { useAuthStore } from '../stores/authStore';
 import AppointmentStatusDropdown from '../components/ui/AppointmentStatusDropdown';
 import PersianCalendar from '../components/ui/PersianCalendar';
+import SearchableSelect from '../components/ui/SearchableSelect';
 
 const EMPTY_ARR: Appointment[] = [];
 
@@ -704,20 +705,16 @@ export default function AppointmentsPage() {
 
           {/* Doctor selector (admin / clinic) */}
           {!isDoctor && (
-            <select
-              value={selectedDoctorUuid}
-              onChange={e => setSelectedDoctorUuid(e.target.value)}
-              style={{
-                height: 36, padding: '0 10px', borderRadius: 'var(--r-sm)',
-                border: '1px solid var(--border)', background: 'var(--surface)',
-                fontSize: 13, color: 'var(--text)', minWidth: 180, cursor: 'pointer',
-              }}
-            >
-              <option value="">پرسنل را انتخاب کنید...</option>
-              {doctors.map(d => (
-                <option key={d.uuid} value={d.uuid}>{d.name}</option>
-              ))}
-            </select>
+            <div style={{ minWidth: 200 }}>
+              <SearchableSelect
+                options={doctors.map(d => ({ value: d.uuid, label: d.name }))}
+                value={selectedDoctorUuid || null}
+                onChange={(v) => setSelectedDoctorUuid(v ? String(v) : '')}
+                placeholder="انتخاب پزشک..."
+                isClearable
+                height={36}
+              />
+            </div>
           )}
 
           <div style={{ flex: 1 }} />