feat: wire editable «اطلاعات پرونده» form into patient case-file info tab
Port tauri /files-services FileInfoSection into PatientDetailPage's info
tab. The tab previously rendered a stripped read-only InfoRow list; it now
renders the inline editable PatientRecordInfoForm (18 fields + ثبت اطلاعات),
matching the tauri source. Reuses the existing form component, patientForm
helpers, and the already-present patient/provinces/cities/insurance-pricing
endpoints (no new API). PATCH /api/v1/patient/{uuid} on submit.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
hamed
@@ -1,4 +1,4 @@
|
||||
import { useRef, useState } from 'react';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useParams, useSearchParams, Link } from 'react-router-dom';
|
||||
import {
|
||||
@@ -25,6 +25,11 @@ import { TurnsFilter, AddTurn } from '../components/icons/FilesToolbarIcons';
|
||||
import {
|
||||
TabServices, TabInfo, TabCalendar, TabCard, TabWallet, TabSMS, TabCall, TabAttach, TabBody,
|
||||
} from '../components/icons/FilesServiceIcons';
|
||||
import PatientRecordInfoForm from '../components/PatientRecordInfoForm';
|
||||
import {
|
||||
profileToFormValues, formValuesToPayload,
|
||||
GENDER_OPTS, MARITAL_OPTS, EDUCATION_OPTS, REFERRAL_OPTS,
|
||||
} from '../lib/patientForm';
|
||||
|
||||
type TabKey = 'services' | 'info' | 'appointments' | 'payments' | 'wallet' | 'messages' | 'callcenter' | 'attach' | 'records';
|
||||
|
||||
@@ -40,8 +45,6 @@ const TABS: { key: TabKey; label: string; icon: (c: string) => React.ReactNode }
|
||||
{ key: 'records', label: 'پرونده پزشکی', icon: (c) => <TabBody color={c} /> },
|
||||
];
|
||||
|
||||
const GENDER_LABEL: Record<string, string> = { male: 'مرد', female: 'زن' };
|
||||
|
||||
const PAYMENT_STATUS: Record<string, string> = {
|
||||
pending: 'در انتظار', success: 'موفق', failed: 'ناموفق', canceled: 'لغو شده', refunded: 'بازگشت',
|
||||
};
|
||||
@@ -54,15 +57,6 @@ function Placeholder({ label }: { label: string }) {
|
||||
);
|
||||
}
|
||||
|
||||
function InfoRow({ label, value }: { label: string; value?: string | null }) {
|
||||
return (
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', padding: '10px 0', borderTop: '1px solid var(--border)', gap: 12 }}>
|
||||
<span style={{ fontSize: 13, color: 'var(--text-3)' }}>{label}</span>
|
||||
<span style={{ fontSize: 13.5, color: 'var(--text)', fontWeight: 600, direction: 'ltr' }}>{value || '—'}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** پرونده — the tabbed patient case-file (Figma "جزئیات پرونده"). */
|
||||
export default function PatientDetailPage() {
|
||||
const { uuid } = useParams<{ uuid: string }>();
|
||||
@@ -79,11 +73,51 @@ export default function PatientDetailPage() {
|
||||
enabled: !!uuid,
|
||||
});
|
||||
const record = data?.data;
|
||||
const profile: any = record?.profile ?? {};
|
||||
|
||||
const qc = useQueryClient();
|
||||
const [invoiceUuid, setInvoiceUuid] = useState<string | null>(null);
|
||||
|
||||
// ── فرم «اطلاعات پرونده» (اینلاین، معادل tauri FileInfoSection) ──────────────
|
||||
// استان/شهر (Location) و بیمهٔ پایه (insurance-pricing) برای گزینههای فرم.
|
||||
const [editProvinceId, setEditProvinceId] = useState<number | null>(null);
|
||||
const seededProvince = useRef(false);
|
||||
useEffect(() => {
|
||||
if (!seededProvince.current && record?.profile) {
|
||||
setEditProvinceId(record.profile.province_id ?? null);
|
||||
seededProvince.current = true;
|
||||
}
|
||||
}, [record]);
|
||||
|
||||
const provincesQ = useQuery<any>({
|
||||
queryKey: ['provinces'],
|
||||
queryFn: () => api.get('/api/v1/provinces'),
|
||||
staleTime: 600_000,
|
||||
});
|
||||
const citiesQ = useQuery<any>({
|
||||
queryKey: ['cities', editProvinceId],
|
||||
queryFn: () => api.get(`/api/v1/cities${editProvinceId ? `?province_id=${editProvinceId}` : ''}`),
|
||||
staleTime: 300_000,
|
||||
});
|
||||
const pricingQ = useQuery<ApiResponse<any>>({
|
||||
queryKey: ['insurance-pricing'],
|
||||
queryFn: () => api.get('/api/v1/insurance-pricing'),
|
||||
enabled: !!uuid,
|
||||
});
|
||||
const locOpts = (raw: any) =>
|
||||
(raw?.data?.data ?? raw?.data ?? []).map((x: any) => ({ value: Number(x.id), label: x.name }));
|
||||
const baseInsuranceOptions = ((pricingQ.data?.data as any)?.insurances ?? [])
|
||||
.filter((i: any) => i.type === 'basic')
|
||||
.map((i: any) => ({ value: String(i.insurance_id), label: i.insurance_name }));
|
||||
|
||||
const updateProfileMut = useMutation({
|
||||
mutationFn: (body: object) => api.patch(`/api/v1/patient/${uuid}`, body),
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ['patient', uuid] });
|
||||
toast.success('اطلاعات بیمار بهروزرسانی شد');
|
||||
},
|
||||
onError: (e: any) => toast.error(e?.message || 'خطا در بهروزرسانی اطلاعات بیمار'),
|
||||
});
|
||||
|
||||
// sessions + appointments load eagerly so the banner (debt / next visit) is ready.
|
||||
const sessionsQ = useQuery<ApiResponse<SessionCardData[]>>({
|
||||
queryKey: ['patient-sessions', uuid],
|
||||
@@ -151,16 +185,23 @@ export default function PatientDetailPage() {
|
||||
{isLoading ? (
|
||||
<div style={{ padding: 24, color: 'var(--text-3)', fontSize: 13 }}>در حال بارگذاری...</div>
|
||||
) : tab === 'info' ? (
|
||||
<div style={{ background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-lg)', padding: 20, maxWidth: 620 }}>
|
||||
<InfoRow label="شماره پرونده" value={record?.record_number} />
|
||||
<InfoRow label="نام مراجعهکننده" value={record?.user_name} />
|
||||
<InfoRow label="کد ملی" value={record?.user_national_code} />
|
||||
<InfoRow label="شماره تماس" value={record?.user_mobile} />
|
||||
<InfoRow label="جنسیت" value={profile.gender ? GENDER_LABEL[profile.gender] : null} />
|
||||
<InfoRow label="تاریخ تولد" value={profile.date_of_birth ? formatDate(profile.date_of_birth) : null} />
|
||||
<InfoRow label="نحوه آشنایی" value={profile.referral_source} />
|
||||
<InfoRow label="آدرس" value={profile.address} />
|
||||
<InfoRow label="توضیحات" value={profile.description} />
|
||||
<div style={{ background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-lg)', padding: 20 }}>
|
||||
<PatientRecordInfoForm
|
||||
defaultValues={profileToFormValues(record?.profile ?? null)}
|
||||
recordNumber={record?.record_number}
|
||||
options={{
|
||||
gender: GENDER_OPTS,
|
||||
marital: MARITAL_OPTS,
|
||||
education: EDUCATION_OPTS,
|
||||
referral: REFERRAL_OPTS,
|
||||
insurance: baseInsuranceOptions,
|
||||
province: locOpts(provincesQ.data),
|
||||
city: locOpts(citiesQ.data),
|
||||
}}
|
||||
onSubmit={(v) => updateProfileMut.mutate(formValuesToPayload(v))}
|
||||
isSubmitting={updateProfileMut.isPending}
|
||||
onProvinceChange={setEditProvinceId}
|
||||
/>
|
||||
</div>
|
||||
) : tab === 'services' ? (
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user