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.
This commit is contained in:
hamed
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react'
|
||||
import { createPortal } from 'react-dom';
|
||||
import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { useForm, Controller } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { z } from 'zod';
|
||||
import {
|
||||
@@ -25,6 +25,7 @@ import { formatNumber } from '../lib/utils';
|
||||
import Modal from '../components/ui/Modal';
|
||||
import ConfirmDialog from '../components/ui/ConfirmDialog';
|
||||
import NotificationMobileCard from '../components/ui/NotificationMobileCard';
|
||||
import GlobalSearchableSelect from '../components/ui/SearchableSelect';
|
||||
|
||||
// Fix leaflet default marker icons
|
||||
delete (L.Icon.Default.prototype as any)._getIconUrl;
|
||||
@@ -996,10 +997,14 @@ function SlotEditor({ slots, onChange }: {
|
||||
<span className="text-xs text-slate-500 dark:text-slate-400 shrink-0">تا</span>
|
||||
<input type="time" value={slot.end} onChange={e => update(i, 'end', e.target.value)}
|
||||
className="cp-input h-8 w-28 text-sm font-mono text-center px-2" />
|
||||
<select value={slot.duration} onChange={e => update(i, 'duration', Number(e.target.value))}
|
||||
className="cp-select h-8 text-sm w-24">
|
||||
{DURATION_OPTS.map(d => <option key={d} value={d}>{d} دقیقه</option>)}
|
||||
</select>
|
||||
<div style={{ width: 110 }}>
|
||||
<GlobalSearchableSelect
|
||||
options={DURATION_OPTS.map(d => ({ value: d, label: `${d} دقیقه` }))}
|
||||
value={slot.duration}
|
||||
onChange={(v) => update(i, 'duration', Number(v))}
|
||||
height={32}
|
||||
/>
|
||||
</div>
|
||||
<button type="button" onClick={() => remove(i)}
|
||||
className="w-7 h-7 flex items-center justify-center rounded-lg text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors shrink-0">
|
||||
<XMarkIcon className="w-3.5 h-3.5" />
|
||||
@@ -1052,37 +1057,30 @@ function SessionEditor({ session, onChange, onRemove, addresses }: {
|
||||
<div style={{ padding: '0 16px 14px', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
|
||||
<div>
|
||||
<div style={{ fontSize: 12, color: 'var(--text-2)', marginBottom: 5 }}>بازه هر نوبت</div>
|
||||
<div className="field">
|
||||
<select value={session.duration_per_patient}
|
||||
onChange={e => upd('duration_per_patient', Number(e.target.value))}>
|
||||
{DURATION_OPTS.map(d => <option key={d} value={d}>{d} دقیقه</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<GlobalSearchableSelect
|
||||
options={DURATION_OPTS.map(d => ({ value: d, label: `${d} دقیقه` }))}
|
||||
value={session.duration_per_patient}
|
||||
onChange={(v) => upd('duration_per_patient', Number(v))}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ fontSize: 12, color: 'var(--text-2)', marginBottom: 5 }}>مکان نوبت</div>
|
||||
<div className="field">
|
||||
<select value={session.location_id ?? ''}
|
||||
onChange={e => upd('location_id', e.target.value ? Number(e.target.value) : null)}>
|
||||
<option value="">انتخاب کنید</option>
|
||||
{addresses.filter(a => a.type === 'personal').length > 0 && (
|
||||
<optgroup label="مطب شخصی">
|
||||
{addresses.filter(a => a.type === 'personal').map(a => (
|
||||
<option key={a.id} value={a.id}>{a.name ?? a.address ?? `مطب ${a.id}`}</option>
|
||||
))}
|
||||
</optgroup>
|
||||
)}
|
||||
{addresses.filter(a => a.type === 'clinic').length > 0 && (
|
||||
<optgroup label="کلینیکها">
|
||||
{addresses.filter(a => a.type === 'clinic').map(a => (
|
||||
<option key={a.id} value={a.id}>
|
||||
{a.clinic_name ? `${a.clinic_name}${a.name ? ` — ${a.name}` : ''}` : (a.name ?? a.address ?? `کلینیک ${a.id}`)}
|
||||
</option>
|
||||
))}
|
||||
</optgroup>
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
<GlobalSearchableSelect
|
||||
options={[
|
||||
...addresses.filter(a => a.type === 'personal').map(a => ({
|
||||
value: Number(a.id),
|
||||
label: `🏥 ${a.name ?? a.address ?? `مطب ${a.id}`}`,
|
||||
})),
|
||||
...addresses.filter(a => a.type === 'clinic').map(a => ({
|
||||
value: Number(a.id),
|
||||
label: `🏨 ${a.clinic_name ? `${a.clinic_name}${a.name ? ` — ${a.name}` : ''}` : (a.name ?? a.address ?? `کلینیک ${a.id}`)}`,
|
||||
})),
|
||||
]}
|
||||
value={session.location_id ?? null}
|
||||
onChange={(v) => upd('location_id', v ? Number(v) : null)}
|
||||
placeholder="انتخاب مکان"
|
||||
isClearable
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ fontSize: 12, color: 'var(--text-2)', marginBottom: 5 }}>حداکثر نوبت</div>
|
||||
@@ -1850,7 +1848,7 @@ export default function DoctorDetailPage({ isOwnProfile = false }: { isOwnProfil
|
||||
|
||||
// ── Edit form ──
|
||||
|
||||
const { register, handleSubmit, reset, watch, setValue } = useForm<EditForm>({
|
||||
const { register, handleSubmit, reset, watch, setValue, control: editControl } = useForm<EditForm>({
|
||||
resolver: zodResolver(editSchema),
|
||||
});
|
||||
const watchedSpecialties = (watch('specialties') ?? []) as number[];
|
||||
@@ -2279,17 +2277,27 @@ export default function DoctorDetailPage({ isOwnProfile = false }: { isOwnProfil
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">جنسیت</label>
|
||||
<select className="cp-select h-11" {...register('gender')}>
|
||||
<option value="">انتخاب کنید</option>
|
||||
{GENDER_OPTIONS.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
|
||||
</select>
|
||||
<Controller name="gender" control={editControl} render={({ field }) => (
|
||||
<GlobalSearchableSelect
|
||||
options={GENDER_OPTIONS}
|
||||
value={field.value ?? null}
|
||||
onChange={(v) => field.onChange(v ?? '')}
|
||||
placeholder="انتخاب کنید"
|
||||
isClearable
|
||||
/>
|
||||
)} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">درجه تحصیلی</label>
|
||||
<select className="cp-select h-11" {...register('degree')}>
|
||||
<option value="">انتخاب کنید</option>
|
||||
{DEGREE_OPTIONS.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
|
||||
</select>
|
||||
<Controller name="degree" control={editControl} render={({ field }) => (
|
||||
<GlobalSearchableSelect
|
||||
options={DEGREE_OPTIONS}
|
||||
value={field.value ?? null}
|
||||
onChange={(v) => field.onChange(v ?? '')}
|
||||
placeholder="انتخاب کنید"
|
||||
isClearable
|
||||
/>
|
||||
)} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">کد نظام پزشکی</label>
|
||||
|
||||
Reference in New Issue
Block a user