162 lines
8.2 KiB
TypeScript
162 lines
8.2 KiB
TypeScript
import { useEffect } from 'react';
|
||
import { useForm } from 'react-hook-form';
|
||
import { zodResolver } from '@hookform/resolvers/zod';
|
||
import { z } from 'zod';
|
||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||
import { useParams, useNavigate, Link } from 'react-router-dom';
|
||
import { ChevronRightIcon } from '@heroicons/react/24/outline';
|
||
import { toast } from 'sonner';
|
||
import { api } from '../lib/api';
|
||
import type { ApiResponse } from '../lib/api';
|
||
import type { PatientRecord } from '../types';
|
||
import PersianDateInput from '../components/ui/PersianDateInput';
|
||
import SearchableSelect from '../components/ui/SearchableSelect';
|
||
|
||
const REFERRAL_OPTIONS = ['اینستاگرام', 'معرفی دوستان و آشنایان', 'جستجوی اینترنتی', 'تابلو مطب', 'سایر'];
|
||
|
||
const schema = z.object({
|
||
name: z.string().min(1, 'نام و نام خانوادگی الزامی است'),
|
||
record_number: z.string().min(1, 'شماره پرونده الزامی است'),
|
||
gender: z.enum(['male', 'female'], { errorMap: () => ({ message: 'جنسیت را انتخاب کنید' }) }),
|
||
national_code: z.string().regex(/^\d{10}$/, 'کد ملی باید ۱۰ رقم باشد'),
|
||
mobile: z.string().regex(/^09\d{9}$/, 'شماره تماس نامعتبر است'),
|
||
birth_date: z.string().optional(),
|
||
referral_source: z.string().optional(),
|
||
description: z.string().optional(),
|
||
});
|
||
type Form = z.infer<typeof schema>;
|
||
|
||
const toEpoch = (iso?: string) => (iso ? Math.floor(new Date(iso).getTime() / 1000) : null);
|
||
const fromEpoch = (ts?: number | null) => (ts ? new Date(ts * 1000).toISOString().slice(0, 10) : '');
|
||
|
||
/** تشکیل/ویرایش پرونده — patient record create & edit form (Figma "تشکیل پرونده"). */
|
||
export default function PatientRecordFormPage() {
|
||
const { uuid } = useParams<{ uuid: string }>();
|
||
const isEdit = !!uuid;
|
||
const navigate = useNavigate();
|
||
const qc = useQueryClient();
|
||
|
||
const form = useForm<Form>({
|
||
resolver: zodResolver(schema),
|
||
defaultValues: { name: '', record_number: '', gender: undefined as any, national_code: '', mobile: '', birth_date: '', referral_source: '', description: '' },
|
||
});
|
||
|
||
const { data: recordData } = useQuery<ApiResponse<PatientRecord>>({
|
||
queryKey: ['patient', uuid],
|
||
queryFn: () => api.get(`/api/v1/patient/${uuid}`),
|
||
enabled: isEdit,
|
||
});
|
||
|
||
useEffect(() => {
|
||
const r = recordData?.data;
|
||
if (!r) return;
|
||
const p: any = r.profile ?? {};
|
||
form.reset({
|
||
name: r.user_name ?? '',
|
||
record_number: r.record_number ?? '',
|
||
gender: (p.gender as 'male' | 'female') ?? undefined,
|
||
national_code: r.user_national_code ?? '',
|
||
mobile: r.user_mobile ?? '',
|
||
birth_date: fromEpoch(p.date_of_birth),
|
||
referral_source: p.referral_source ?? '',
|
||
description: p.description ?? '',
|
||
});
|
||
}, [recordData]); // eslint-disable-line react-hooks/exhaustive-deps
|
||
|
||
const save = useMutation({
|
||
mutationFn: async (d: Form) => {
|
||
const profilePayload = {
|
||
gender: d.gender,
|
||
date_of_birth: toEpoch(d.birth_date),
|
||
referral_source: d.referral_source || null,
|
||
description: d.description || null,
|
||
};
|
||
if (isEdit) {
|
||
return api.patch(`/api/v1/patient/${uuid}`, {
|
||
name: d.name, national_code: d.national_code, mobile: d.mobile, record_number: d.record_number, ...profilePayload,
|
||
});
|
||
}
|
||
// create: POST creates the record + identity, then PATCH applies the profile demographics
|
||
const created = await api.post<ApiResponse<PatientRecord>>('/api/v1/patient', {
|
||
name: d.name, mobile: d.mobile, national_code: d.national_code, record_number: d.record_number,
|
||
});
|
||
const newUuid = (created as any)?.data?.uuid;
|
||
if (newUuid) await api.patch(`/api/v1/patient/${newUuid}`, profilePayload);
|
||
return created;
|
||
},
|
||
onSuccess: () => {
|
||
qc.invalidateQueries({ queryKey: ['patients'] });
|
||
toast.success(isEdit ? 'پرونده ویرایش شد' : 'پرونده تشکیل شد');
|
||
navigate('/admin/patients');
|
||
},
|
||
onError: (e: any) => toast.error(e.message),
|
||
});
|
||
|
||
const Field = ({ label, required, error, children }: { label: string; required?: boolean; error?: string; children: React.ReactNode }) => (
|
||
<div>
|
||
<label className="field-label">{label} {required && <span style={{ color: 'var(--danger)' }}>*</span>}</label>
|
||
{children}
|
||
{error && <span className="field-error">{error}</span>}
|
||
</div>
|
||
);
|
||
|
||
return (
|
||
<div className="fade-in" style={{ maxWidth: 1000, margin: '0 auto' }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
|
||
<Link to="/admin/patients" className="btn sm ghost" style={{ color: 'var(--text-2)' }}><ChevronRightIcon style={{ width: 16 }} /> بازگشت</Link>
|
||
<div style={{ fontSize: 14, color: 'var(--text-3)' }}>پرونده › <b style={{ color: 'var(--text)' }}>{isEdit ? 'ویرایش پرونده' : 'تشکیل پرونده'}</b></div>
|
||
</div>
|
||
|
||
<form onSubmit={form.handleSubmit((d) => save.mutate(d))}
|
||
style={{ background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-lg)', padding: 24 }}>
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 18 }}>
|
||
<Field label="نام و نام خانوادگی مراجعه کننده" required error={form.formState.errors.name?.message}>
|
||
<div className="field"><input {...form.register('name')} placeholder="نام و نام خانوادگی را وارد نمایید" /></div>
|
||
</Field>
|
||
<Field label="شماره پرونده" required error={form.formState.errors.record_number?.message}>
|
||
<div className="field"><input {...form.register('record_number')} placeholder="شماره پرونده" /></div>
|
||
</Field>
|
||
<Field label="جنسیت" required error={form.formState.errors.gender?.message}>
|
||
<SearchableSelect
|
||
options={[{ value: 'female', label: 'زن' }, { value: 'male', label: 'مرد' }]}
|
||
value={form.watch('gender') ?? null}
|
||
onChange={(v) => form.setValue('gender', v as Form['gender'], { shouldValidate: true, shouldDirty: true })}
|
||
placeholder="انتخاب..."
|
||
height={38}
|
||
/>
|
||
</Field>
|
||
<Field label="کد ملی" required error={form.formState.errors.national_code?.message}>
|
||
<div className="field"><input {...form.register('national_code')} inputMode="numeric" placeholder="کد ملی را وارد نمایید" /></div>
|
||
</Field>
|
||
<Field label="شماره تماس" required error={form.formState.errors.mobile?.message}>
|
||
<div className="field"><input {...form.register('mobile')} inputMode="numeric" placeholder="شماره تماس را وارد نمایید" /></div>
|
||
</Field>
|
||
<Field label="تاریخ تولد">
|
||
<PersianDateInput value={form.watch('birth_date') ?? ''} onChange={(v) => form.setValue('birth_date', v)} enableYearPicker />
|
||
</Field>
|
||
<Field label="نحوه آشنایی">
|
||
<SearchableSelect
|
||
options={REFERRAL_OPTIONS.map((o) => ({ value: o, label: o }))}
|
||
value={form.watch('referral_source') || null}
|
||
onChange={(v) => form.setValue('referral_source', v ? String(v) : '', { shouldDirty: true })}
|
||
placeholder="انتخاب کنید..."
|
||
isClearable
|
||
height={38}
|
||
/>
|
||
</Field>
|
||
</div>
|
||
|
||
<div style={{ marginTop: 18 }}>
|
||
<Field label="توضیحات">
|
||
<div className="field" style={{ height: 'auto' }}><textarea {...form.register('description')} rows={4} placeholder="توضیحات" style={{ width: '100%', border: 'none', background: 'transparent', fontFamily: 'inherit', resize: 'vertical' }} /></div>
|
||
</Field>
|
||
</div>
|
||
|
||
<button type="submit" className="btn primary" style={{ marginTop: 22, height: 44, padding: '0 24px' }} disabled={save.isPending}>
|
||
{save.isPending ? 'در حال ذخیره...' : 'ثبت اطلاعات'}
|
||
</button>
|
||
</form>
|
||
</div>
|
||
);
|
||
}
|