hamedandClaude Opus 4.8
170cd5f37e
Widen card to 1080px, 18px section headings, multi-column grids (patient 3-col, service 3-col, slot-mode time 4-col), search field + outlined 'new patient' button row, toggle switch for deposit, orange wallet charge button, right-aligned submit. Service/slot booking logic, endpoints, validation, and placeholders unchanged. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
385 lines
19 KiB
TypeScript
385 lines
19 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react';
|
||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||
import { useNavigate, useSearchParams } from 'react-router-dom';
|
||
import { PlusIcon, ChevronRightIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
|
||
import { toast } from 'sonner';
|
||
import { api } from '../lib/api';
|
||
import type { ApiResponse } from '../lib/api';
|
||
import { useAuthStore } from '../stores/authStore';
|
||
import PersianDateInput from '../components/ui/PersianDateInput';
|
||
import PriceInput from '../components/ui/PriceInput';
|
||
import SearchableSelect from '../components/ui/SearchableSelect';
|
||
import { WalletChargeLink } from '../components/AppointmentActions';
|
||
import { useDoctorBookingServices } from '../hooks/useDoctorBookingServices';
|
||
import ServiceSlotPicker from '../components/appointments/ServiceSlotPicker';
|
||
import { tehranWallClockToUnix } from '../lib/utils';
|
||
|
||
/**
|
||
* افزودن نوبت — صفحهٔ کامل (بازسازی `CreateTurn.jsx` طرح tauri). از همان endpointهای
|
||
* موجود استفاده میکند: `POST /api/v1/my/appointment` (یا admin) + در صورت نیاز
|
||
* `PATCH .../status`. هیچ endpoint جدیدی ساخته نشده است.
|
||
*/
|
||
|
||
interface Option { uuid: string; name?: string; full_name?: string }
|
||
interface PatientRow { uuid: string; user_name?: string; user_mobile?: string; user_national_code?: string }
|
||
|
||
const toEpoch = (isoDate: string, time: string) => tehranWallClockToUnix(isoDate, time);
|
||
const addMinutes = (time: string, min: number) => {
|
||
const [h, m] = time.split(':').map(Number);
|
||
const t = h * 60 + m + min;
|
||
return `${String(Math.floor(t / 60) % 24).padStart(2, '0')}:${String(t % 60).padStart(2, '0')}`;
|
||
};
|
||
|
||
const label = { fontSize: 12.5, color: 'var(--text-3)', display: 'block' } as const;
|
||
const sectionTitle: React.CSSProperties = { fontSize: 18, fontWeight: 700, color: 'var(--text)', margin: '22px 0 14px' };
|
||
|
||
export default function AppointmentCreatePage() {
|
||
const navigate = useNavigate();
|
||
const [params] = useSearchParams();
|
||
const qc = useQueryClient();
|
||
const primaryRole = useAuthStore(s => s.primaryRole);
|
||
const dbUuid = useAuthStore(s => s.dbUuid);
|
||
const isDoctor = primaryRole === 'doctor';
|
||
|
||
const today = new Date().toISOString().slice(0, 10);
|
||
|
||
// ── پزشک
|
||
const [doctorUuid, setDoctorUuid] = useState(isDoctor && dbUuid ? dbUuid : (params.get('doctor') ?? ''));
|
||
const clinicDoctorsQuery = useQuery<ApiResponse<{ data: { uuid: string; name: string }[] }>>({
|
||
queryKey: ['clinic-doctors', dbUuid],
|
||
queryFn: () => api.get(`/api/v1/clinic/doctor-list/${dbUuid}`),
|
||
enabled: !isDoctor && !!dbUuid,
|
||
});
|
||
const doctorOptions = (clinicDoctorsQuery.data?.data?.data ?? []).map(d => ({ value: d.uuid, label: d.name }));
|
||
|
||
// ── بیمار: جستجوی رکورد موجود یا ورود شخص جدید
|
||
const [patientSearch, setPatientSearch] = useState('');
|
||
const [picked, setPicked] = useState<PatientRow | null>(null);
|
||
const [name, setName] = useState('');
|
||
const [mobile, setMobile] = useState('');
|
||
const [nationalCode, setNationalCode] = useState('');
|
||
const patientsQ = useQuery<ApiResponse<PatientRow[]>>({
|
||
queryKey: ['create-patients', patientSearch],
|
||
queryFn: () => api.get(`/api/v1/patients?search=${encodeURIComponent(patientSearch)}&limit=10`),
|
||
enabled: patientSearch.trim().length >= 2,
|
||
});
|
||
const patients = useMemo(() => patientsQ.data?.data ?? [], [patientsQ.data]);
|
||
|
||
// ── مشخصات سرویس
|
||
const [sectionUuid, setSectionUuid] = useState('');
|
||
const [itemUuid, setItemUuid] = useState('');
|
||
const [staffUuid, setStaffUuid] = useState('');
|
||
const sectionsQ = useQuery<ApiResponse<Option[]>>({ queryKey: ['service-sections'], queryFn: () => api.get('/api/v1/service-sections') });
|
||
const itemsQ = useQuery<ApiResponse<Option[]>>({
|
||
queryKey: ['service-items', sectionUuid],
|
||
queryFn: () => api.get(`/api/v1/service-items/${sectionUuid}`),
|
||
enabled: !!sectionUuid,
|
||
});
|
||
const staffQ = useQuery<ApiResponse<Option[]>>({ queryKey: ['staff-list'], queryFn: () => api.get('/api/v1/staff') });
|
||
|
||
// ── روش نوبتدهی پزشک (سرویسی/اسلاتی)
|
||
const { bookingMode, services } = useDoctorBookingServices(doctorUuid);
|
||
const serviceMode = bookingMode === 'service';
|
||
const [servicePick, setServicePick] = useState<{ serviceUuids: string[]; slot: { start: number; end: number } | null }>({ serviceUuids: [], slot: null });
|
||
|
||
// ── زمان نوبت
|
||
const [date, setDate] = useState(params.get('date') || today);
|
||
const [duration, setDuration] = useState(40);
|
||
const [start, setStart] = useState('15:00');
|
||
const [end, setEnd] = useState(addMinutes('15:00', 40));
|
||
useEffect(() => { setEnd(addMinutes(start, duration)); }, [start, duration]);
|
||
|
||
// ── بیعانه / وضعیت / توضیحات
|
||
const [depositRequired, setDepositRequired] = useState(false);
|
||
const [depositRials, setDepositRials] = useState(0);
|
||
const [status, setStatus] = useState('pending');
|
||
const [note, setNote] = useState('');
|
||
|
||
const effectiveName = picked?.user_name || name.trim();
|
||
const effectiveMobile = picked?.user_mobile || mobile.trim();
|
||
const effectiveNationalCode = (picked?.user_national_code || nationalCode).replace(/\D/g, '');
|
||
const timingValid = serviceMode
|
||
? (servicePick.serviceUuids.length > 0 && !!servicePick.slot)
|
||
: (!!start && !!end);
|
||
const valid = !!doctorUuid && !!date && effectiveName.length >= 2 && effectiveMobile.length >= 10
|
||
&& effectiveNationalCode.length === 10 && timingValid;
|
||
|
||
const create = useMutation({
|
||
mutationFn: async () => {
|
||
const createEndpoint = primaryRole === 'admin' ? '/api/v1/admin/appointment' : '/api/v1/my/appointment';
|
||
const payload: Record<string, unknown> = {
|
||
doctor_uuid: doctorUuid,
|
||
slot_start: serviceMode ? servicePick.slot!.start : toEpoch(date, start),
|
||
slot_end: serviceMode ? servicePick.slot!.end : toEpoch(date, end),
|
||
patient_name: effectiveName,
|
||
patient_mobile: effectiveMobile,
|
||
patient_national_code: effectiveNationalCode,
|
||
...(serviceMode
|
||
? { service_item_uuids: servicePick.serviceUuids }
|
||
: {
|
||
...(sectionUuid ? { service_section_uuid: sectionUuid } : {}),
|
||
...(itemUuid ? { service_item_uuid: itemUuid } : {}),
|
||
}),
|
||
...(staffUuid ? { staff_uuid: staffUuid } : {}),
|
||
...(depositRequired ? { deposit_required: true, deposit_amount_rials: depositRials } : {}),
|
||
...(note.trim() ? { note: note.trim() } : {}),
|
||
};
|
||
const res: any = await api.post(createEndpoint, payload);
|
||
if (status !== 'pending' && res?.data?.uuid) {
|
||
await api.patch(`/api/v1/appointment/${res.data.uuid}/status`, { status, version: 1 });
|
||
}
|
||
return res;
|
||
},
|
||
onSuccess: () => {
|
||
qc.invalidateQueries({ queryKey: ['appointments'] });
|
||
toast.success('نوبت با موفقیت ثبت شد');
|
||
// به همان روزِ نوبت برگرد، نه امروز.
|
||
navigate(`/admin/appointments?date=${date}`);
|
||
},
|
||
onError: (e: any) => toast.error(e.message || 'خطا در ثبت نوبت'),
|
||
});
|
||
|
||
return (
|
||
<div style={{ padding: '20px 24px', maxWidth: 1080, margin: '0 auto' }}>
|
||
{/* بردکرامب */}
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 18 }}>
|
||
<button onClick={() => navigate(-1)} className="btn sm" style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
||
<ChevronRightIcon style={{ width: 15, height: 15 }} /> بازگشت
|
||
</button>
|
||
<span style={{ fontSize: 13, color: 'var(--text-3)' }}>نوبت ها</span>
|
||
<span style={{ color: 'var(--text-3)' }}>›</span>
|
||
<span style={{ fontSize: 15, fontWeight: 700, color: 'var(--text)' }}>ثبت نوبت جدید</span>
|
||
</div>
|
||
|
||
<div style={{ background: 'var(--surface)', border: '1px solid var(--border-2)', borderRadius: 'var(--r-sm)', padding: 28 }}>
|
||
{/* پزشک — فقط برای admin/clinic */}
|
||
{!isDoctor && (
|
||
<>
|
||
<div style={{ ...sectionTitle, marginTop: 0 }}>پزشک:</div>
|
||
<label style={label}>انتخاب پزشک</label>
|
||
<div style={{ margin: '6px 0 4px', maxWidth: 400 }}>
|
||
<SearchableSelect
|
||
options={doctorOptions}
|
||
value={doctorUuid || null}
|
||
onChange={(v) => setDoctorUuid(v ? String(v) : '')}
|
||
placeholder="انتخاب پزشک..."
|
||
isClearable
|
||
height={44}
|
||
/>
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{/* مراجعه کننده */}
|
||
<div style={{ ...sectionTitle, marginTop: isDoctor ? 0 : 18 }}>اطلاعات مراجعه کننده :</div>
|
||
<label style={label}>انتخاب مراجعه کننده</label>
|
||
<div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 12, margin: '6px 0 8px' }}>
|
||
<div className="field" style={{ width: 400, maxWidth: '100%' }}>
|
||
<MagnifyingGlassIcon style={{ width: 18, height: 18, color: 'var(--text-3)', flexShrink: 0 }} />
|
||
<input value={picked ? `${picked.user_name ?? ''} — ${picked.user_mobile ?? ''}` : patientSearch}
|
||
onChange={e => { setPicked(null); setPatientSearch(e.target.value); }}
|
||
placeholder="جستجوی نام، شماره تماس، شماره پرونده..." />
|
||
</div>
|
||
<button type="button" className="btn outline" onClick={() => { setPicked(null); setPatientSearch(''); }}
|
||
style={{ height: 44, minWidth: 161, gap: 6 }}>
|
||
<PlusIcon style={{ width: 16, height: 16 }} /> مراجعه کننده جدید
|
||
</button>
|
||
</div>
|
||
{!picked && patients.length > 0 && (
|
||
<div style={{ border: '1px solid var(--border)', borderRadius: 'var(--r-sm)', marginBottom: 10, overflow: 'hidden', maxWidth: 400 }}>
|
||
{patients.map(p => (
|
||
<button key={p.uuid} onClick={() => setPicked(p)} style={{
|
||
display: 'block', width: '100%', padding: '8px 10px', fontSize: 13, textAlign: 'right',
|
||
background: 'transparent', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
|
||
}}>
|
||
{p.user_name} <span style={{ color: 'var(--text-3)', direction: 'ltr' }}>{p.user_mobile}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
)}
|
||
{picked === null && (
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginTop: 8 }}>
|
||
<div>
|
||
<label style={label}>نام و نام خانوادگی مراجعه کننده</label>
|
||
<div className="field" style={{ marginTop: 6, height: 44 }}>
|
||
<input value={name} onChange={e => setName(e.target.value)} placeholder="نام و نام خانوادگی مراجعه کننده" />
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label style={label}>شماره تماس</label>
|
||
<div className="field" style={{ marginTop: 6, height: 44 }}>
|
||
<input value={mobile} onChange={e => setMobile(e.target.value)} placeholder="شماره تماس مراجعه کننده" dir="ltr" />
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label style={label}>کد ملی</label>
|
||
<div className="field" style={{ marginTop: 6, height: 44 }}>
|
||
<input value={nationalCode} onChange={e => setNationalCode(e.target.value.replace(/\D/g, '').slice(0, 10))}
|
||
placeholder="کد ملی مراجعه کننده" dir="ltr" inputMode="numeric" maxLength={10} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* مشخصات سرویس */}
|
||
<div style={sectionTitle}>مشخصات سرویس</div>
|
||
{!serviceMode ? (
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginBottom: 10 }}>
|
||
<div>
|
||
<label style={label}>بخش</label>
|
||
<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={44}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label style={label}>سرویس</label>
|
||
<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={44}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label style={label}>پرسنل</label>
|
||
<div style={{ marginTop: 6 }}>
|
||
<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={44}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div style={{ maxWidth: 400, marginBottom: 10 }}>
|
||
<label style={label}>پرسنل</label>
|
||
<div style={{ marginTop: 6 }}>
|
||
<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={44}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* زمان نوبت */}
|
||
<div style={sectionTitle}>زمان نوبت</div>
|
||
{serviceMode ? (
|
||
<>
|
||
<label style={label}>انتخاب تاریخ</label>
|
||
<div style={{ margin: '6px 0 10px', maxWidth: 400 }}><PersianDateInput value={date} onChange={setDate} /></div>
|
||
<div style={{ marginBottom: 12 }}>
|
||
{doctorUuid ? (
|
||
<ServiceSlotPicker
|
||
doctorUuid={doctorUuid}
|
||
date={date}
|
||
services={services}
|
||
onSelect={setServicePick}
|
||
/>
|
||
) : (
|
||
<div style={{ fontSize: 12.5, color: 'var(--text-3)' }}>ابتدا پزشک را انتخاب کنید.</div>
|
||
)}
|
||
</div>
|
||
</>
|
||
) : (
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 12 }}>
|
||
<div>
|
||
<label style={label}>انتخاب تاریخ</label>
|
||
<div style={{ marginTop: 6 }}><PersianDateInput value={date} onChange={setDate} /></div>
|
||
</div>
|
||
<div>
|
||
<label style={label}>زمان پیش فرض (دقیقه)</label>
|
||
<div className="field" style={{ marginTop: 6, height: 44 }}>
|
||
<input aria-label="زمان پیش فرض" type="number" min={5} value={duration} onChange={e => setDuration(Math.max(5, Number(e.target.value) || 0))} dir="ltr" />
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label style={label}>ساعت شروع</label>
|
||
<div className="field" style={{ marginTop: 6, height: 44 }}><input aria-label="ساعت شروع" type="time" value={start} onChange={e => setStart(e.target.value)} dir="ltr" /></div>
|
||
</div>
|
||
<div>
|
||
<label style={label}>ساعت پایان</label>
|
||
<div className="field" style={{ marginTop: 6, height: 44 }}><input aria-label="ساعت پایان" type="time" value={end} onChange={e => setEnd(e.target.value)} dir="ltr" /></div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* بیعانه */}
|
||
<div style={sectionTitle}>بیعانه</div>
|
||
<div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 20, marginBottom: 12 }}>
|
||
<label style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontSize: 14, cursor: 'pointer' }}>
|
||
<span style={{
|
||
position: 'relative', width: 42, height: 22, borderRadius: 999, flexShrink: 0,
|
||
background: depositRequired ? 'var(--primary)' : '#c4c4c4', transition: 'background .2s',
|
||
}}>
|
||
<input type="checkbox" checked={depositRequired} onChange={e => setDepositRequired(e.target.checked)}
|
||
style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', margin: 0, opacity: 0, cursor: 'pointer' }} />
|
||
<span style={{
|
||
position: 'absolute', top: 2, insetInlineStart: depositRequired ? 22 : 2, width: 18, height: 18,
|
||
borderRadius: 999, background: '#fff', transition: 'inset-inline-start .2s', boxShadow: '0 1px 2px rgba(0,0,0,.2)',
|
||
}} />
|
||
</span>
|
||
بیعانه مورد نیاز است.
|
||
</label>
|
||
{depositRequired && (
|
||
<div style={{ width: 300, maxWidth: '100%' }}>
|
||
<label style={label}>مبلغ بیعانه (تومان)</label>
|
||
<div style={{ marginTop: 6 }}><PriceInput value={depositRials} onChange={setDepositRials} /></div>
|
||
</div>
|
||
)}
|
||
{depositRequired && <WalletChargeLink mobile={effectiveMobile} />}
|
||
</div>
|
||
|
||
<div style={{ maxWidth: 500 }}>
|
||
<label style={label}>انتخاب وضعیت</label>
|
||
<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={44}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<label style={label}>توضیحات</label>
|
||
<div className="field" style={{ height: 'auto', margin: '6px 0 16px' }}>
|
||
<textarea value={note} onChange={e => setNote(e.target.value)} rows={4} placeholder="توضیحات..."
|
||
style={{ width: '100%', border: 'none', background: 'transparent', fontFamily: 'inherit', resize: 'vertical' }} />
|
||
</div>
|
||
|
||
<div style={{ display: 'flex', justifyContent: 'flex-end', paddingTop: 4 }}>
|
||
<button className="btn primary lg" disabled={!valid || create.isPending} onClick={() => create.mutate()}>
|
||
{create.isPending ? '...' : 'ثبت اطلاعات'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|