hamedandClaude Opus 4.8
293eb8a0d2
Add patient medical-exam entries: a new PatientMedicalRecord entity (record-scoped, CASCADE) + repository, and owner-scoped CRUD endpoints (GET list, POST create, PATCH, DELETE) under /api/v1/patient. Wire the "پرونده پزشکی" tab in PatientDetailPage (list + add/edit modal with title, date and notes + delete). PHPUnit covers CRUD + ownership + validation; Vitest covers the tab. API docs updated. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
352 lines
18 KiB
TypeScript
352 lines
18 KiB
TypeScript
import { useRef, useState } from 'react';
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import { useParams, Link } from 'react-router-dom';
|
|
import {
|
|
ChevronRightIcon, PencilIcon, ClipboardDocumentCheckIcon, DocumentTextIcon,
|
|
CalendarDaysIcon, CreditCardIcon, BanknotesIcon, ChatBubbleLeftRightIcon,
|
|
PhoneArrowUpRightIcon, PaperClipIcon, ClipboardDocumentListIcon,
|
|
ArrowUpTrayIcon, TrashIcon, DocumentIcon,
|
|
} from '@heroicons/react/24/outline';
|
|
import { PlusIcon } 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 { useAuthStore } from '../stores/authStore';
|
|
import { formatDate } from '../lib/utils';
|
|
import Modal from '../components/ui/Modal';
|
|
import ConfirmDialog from '../components/ui/ConfirmDialog';
|
|
import PersianDateInput from '../components/ui/PersianDateInput';
|
|
|
|
type TabKey = 'services' | 'info' | 'appointments' | 'payments' | 'wallet' | 'messages' | 'callcenter' | 'attach' | 'records';
|
|
|
|
const TABS: { key: TabKey; label: string; icon: React.ElementType }[] = [
|
|
{ key: 'services', label: 'سرویسها', icon: ClipboardDocumentCheckIcon },
|
|
{ key: 'info', label: 'اطلاعات پرونده', icon: DocumentTextIcon },
|
|
{ key: 'appointments', label: 'نوبتها', icon: CalendarDaysIcon },
|
|
{ key: 'payments', label: 'پرداختها', icon: CreditCardIcon },
|
|
{ key: 'wallet', label: 'کیف پول', icon: BanknotesIcon },
|
|
{ key: 'messages', label: 'پیامها', icon: ChatBubbleLeftRightIcon },
|
|
{ key: 'callcenter', label: 'کال سنتر', icon: PhoneArrowUpRightIcon },
|
|
{ key: 'attach', label: 'ضمیمه', icon: PaperClipIcon },
|
|
{ key: 'records', label: 'پرونده پزشکی', icon: ClipboardDocumentListIcon },
|
|
];
|
|
|
|
const GENDER_LABEL: Record<string, string> = { male: 'مرد', female: 'زن' };
|
|
|
|
function Placeholder({ label }: { label: string }) {
|
|
return (
|
|
<div style={{ padding: '48px 0', textAlign: 'center', color: 'var(--text-3)', fontSize: 14 }}>
|
|
محتوای «{label}» بهزودی تکمیل میشود.
|
|
</div>
|
|
);
|
|
}
|
|
|
|
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 }>();
|
|
const [tab, setTab] = useState<TabKey>('services');
|
|
|
|
const { data, isLoading } = useQuery<ApiResponse<PatientRecord>>({
|
|
queryKey: ['patient', uuid],
|
|
queryFn: () => api.get(`/api/v1/patient/${uuid}`),
|
|
enabled: !!uuid,
|
|
});
|
|
const record = data?.data;
|
|
const profile: any = record?.profile ?? {};
|
|
|
|
const sessionsQ = useQuery<ApiResponse<any[]>>({
|
|
queryKey: ['patient-sessions', uuid],
|
|
queryFn: () => api.get(`/api/v1/patient/${uuid}/sessions`),
|
|
enabled: !!uuid && tab === 'services',
|
|
});
|
|
const appointmentsQ = useQuery<ApiResponse<any[]>>({
|
|
queryKey: ['patient-appointments', uuid],
|
|
queryFn: () => api.get(`/api/v1/patient/${uuid}/appointments`),
|
|
enabled: !!uuid && tab === 'appointments',
|
|
});
|
|
|
|
return (
|
|
<div className="fade-in" style={{ maxWidth: 1060, margin: '0 auto' }}>
|
|
{/* header */}
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap', marginBottom: 18 }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
|
<Link to="/admin/patients" className="btn sm ghost" style={{ color: 'var(--text-2)' }}><ChevronRightIcon style={{ width: 16 }} /> بازگشت</Link>
|
|
<div style={{ fontSize: 15, fontWeight: 700 }}>{record?.user_name || 'پرونده'}</div>
|
|
{record?.record_number && <span className="badge gray" style={{ fontSize: 11 }}>#{record.record_number}</span>}
|
|
</div>
|
|
<Link to={`/admin/patients/${uuid}/edit`} className="btn sm ghost" style={{ color: 'var(--accent)' }}><PencilIcon style={{ width: 15 }} /> ویرایش</Link>
|
|
</div>
|
|
|
|
{/* tab bar */}
|
|
<div style={{ display: 'flex', gap: 4, overflowX: 'auto', borderBottom: '1px solid var(--border)', marginBottom: 18 }}>
|
|
{TABS.map((t) => {
|
|
const on = t.key === tab;
|
|
const Icon = t.icon;
|
|
return (
|
|
<button key={t.key} onClick={() => setTab(t.key)} style={{
|
|
display: 'inline-flex', alignItems: 'center', gap: 6, whiteSpace: 'nowrap',
|
|
padding: '10px 14px', border: 'none', background: 'none', cursor: 'pointer',
|
|
fontFamily: 'inherit', fontSize: 13.5, fontWeight: on ? 700 : 500,
|
|
color: on ? 'var(--primary)' : 'var(--text-2)',
|
|
borderBottom: `2px solid ${on ? 'var(--primary)' : 'transparent'}`,
|
|
}}>
|
|
<Icon style={{ width: 16 }} /> {t.label}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* tab content */}
|
|
{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>
|
|
) : tab === 'services' ? (
|
|
<TabList q={sessionsQ} emptyLabel="سرویسی ثبت نشده است"
|
|
row={(s) => ({ title: s.section_name || s.name || 'سرویس', meta: s.created_at ? formatDate(s.created_at) : '', badge: s.status })} />
|
|
) : tab === 'appointments' ? (
|
|
<TabList q={appointmentsQ} emptyLabel="نوبتی ثبت نشده است"
|
|
row={(a) => ({ title: a.service_name || a.doctor_name || 'نوبت', meta: a.date ? formatDate(a.date) : (a.starts_at ? formatDate(a.starts_at) : ''), badge: a.status_label || a.status })} />
|
|
) : tab === 'attach' ? (
|
|
<AttachmentsTab uuid={uuid!} />
|
|
) : tab === 'records' ? (
|
|
<MedicalRecordsTab uuid={uuid!} />
|
|
) : (
|
|
<Placeholder label={TABS.find((t) => t.key === tab)!.label} />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface Attachment { uuid: string; name: string; url: string; mime?: string | null; size?: number | null }
|
|
|
|
const formatBytes = (n?: number | null) => {
|
|
if (!n) return '';
|
|
if (n < 1024) return `${n} B`;
|
|
if (n < 1024 * 1024) return `${Math.round(n / 1024)} KB`;
|
|
return `${(n / 1024 / 1024).toFixed(1)} MB`;
|
|
};
|
|
|
|
/** ضمیمه — patient attachments: upload (raw body), list, delete. */
|
|
function AttachmentsTab({ uuid }: { uuid: string }) {
|
|
const qc = useQueryClient();
|
|
const fileRef = useRef<HTMLInputElement>(null);
|
|
const [uploading, setUploading] = useState(false);
|
|
|
|
const { data, isLoading } = useQuery<ApiResponse<Attachment[]>>({
|
|
queryKey: ['patient-attachments', uuid],
|
|
queryFn: () => api.get(`/api/v1/patient/${uuid}/attachments`),
|
|
});
|
|
const items = data?.data ?? [];
|
|
|
|
const del = useMutation({
|
|
mutationFn: (attUuid: string) => api.delete(`/api/v1/patient/attachment/${attUuid}`),
|
|
onSuccess: () => { qc.invalidateQueries({ queryKey: ['patient-attachments', uuid] }); toast.success('ضمیمه حذف شد'); },
|
|
onError: (e: any) => toast.error(e.message),
|
|
});
|
|
|
|
const onFile = async (file: File) => {
|
|
setUploading(true);
|
|
try {
|
|
const token = useAuthStore.getState().token;
|
|
const res = await fetch(`/api/v1/patient/${uuid}/attachment?name=${encodeURIComponent(file.name)}`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/octet-stream',
|
|
'Content-Disposition': `attachment; filename="${file.name}"`,
|
|
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
|
},
|
|
body: file,
|
|
});
|
|
if (!res.ok) throw new Error('خطا در آپلود فایل');
|
|
qc.invalidateQueries({ queryKey: ['patient-attachments', uuid] });
|
|
toast.success('فایل آپلود شد');
|
|
} catch (e: any) {
|
|
toast.error(e.message);
|
|
} finally {
|
|
setUploading(false);
|
|
if (fileRef.current) fileRef.current.value = '';
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<div style={{ marginBottom: 14 }}>
|
|
<input ref={fileRef} type="file" hidden onChange={(e) => e.target.files?.[0] && onFile(e.target.files[0])} />
|
|
<button className="btn primary" disabled={uploading} onClick={() => fileRef.current?.click()}>
|
|
<ArrowUpTrayIcon style={{ width: 16 }} /> {uploading ? 'در حال آپلود...' : 'آپلود فایل جدید'}
|
|
</button>
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<div style={{ padding: 16, color: 'var(--text-3)', fontSize: 13 }}>در حال بارگذاری...</div>
|
|
) : items.length === 0 ? (
|
|
<div style={{ padding: '40px 0', textAlign: 'center', color: 'var(--text-3)', fontSize: 14 }}>هنوز فایلی ضمیمه نشده است.</div>
|
|
) : (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
|
{items.map((a) => (
|
|
<div key={a.uuid} style={{ background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-lg)', padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 12 }}>
|
|
<DocumentIcon style={{ width: 22, color: 'var(--primary)', flexShrink: 0 }} />
|
|
<div style={{ flex: 1, minWidth: 0 }}>
|
|
<a href={a.url} target="_blank" rel="noreferrer" style={{ fontWeight: 600, fontSize: 14, color: 'var(--text)', textDecoration: 'none', wordBreak: 'break-all' }}>{a.name}</a>
|
|
{a.size ? <div style={{ fontSize: 12, color: 'var(--text-3)' }}>{formatBytes(a.size)}</div> : null}
|
|
</div>
|
|
<button className="btn sm ghost" aria-label="حذف" style={{ color: 'var(--danger)' }} onClick={() => del.mutate(a.uuid)}><TrashIcon style={{ width: 16 }} /></button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface MedicalItem { uuid: string; title: string; body?: string | null; recorded_at: number }
|
|
|
|
/** پرونده پزشکی — medical exam entries: list + add/edit modal + delete. */
|
|
function MedicalRecordsTab({ uuid }: { uuid: string }) {
|
|
const qc = useQueryClient();
|
|
const [modal, setModal] = useState<'create' | MedicalItem | null>(null);
|
|
const [delTarget, setDelTarget] = useState<MedicalItem | null>(null);
|
|
const [title, setTitle] = useState('');
|
|
const [date, setDate] = useState('');
|
|
const [body, setBody] = useState('');
|
|
|
|
const { data, isLoading } = useQuery<ApiResponse<MedicalItem[]>>({
|
|
queryKey: ['patient-medical', uuid],
|
|
queryFn: () => api.get(`/api/v1/patient/${uuid}/medical-records`),
|
|
});
|
|
const items = data?.data ?? [];
|
|
const invalidate = () => qc.invalidateQueries({ queryKey: ['patient-medical', uuid] });
|
|
|
|
const open = (m?: MedicalItem) => {
|
|
setTitle(m?.title ?? ''); setBody(m?.body ?? '');
|
|
setDate(m?.recorded_at ? new Date(m.recorded_at * 1000).toISOString().slice(0, 10) : '');
|
|
setModal(m ?? 'create');
|
|
};
|
|
|
|
const save = useMutation({
|
|
mutationFn: () => {
|
|
const payload = { title, body: body || null, recorded_at: date ? Math.floor(new Date(date).getTime() / 1000) : undefined };
|
|
return modal === 'create'
|
|
? api.post(`/api/v1/patient/${uuid}/medical-record`, payload)
|
|
: api.patch(`/api/v1/patient/medical-record/${(modal as MedicalItem).uuid}`, payload);
|
|
},
|
|
onSuccess: () => { invalidate(); setModal(null); toast.success('ذخیره شد'); },
|
|
onError: (e: any) => toast.error(e.message),
|
|
});
|
|
const del = useMutation({
|
|
mutationFn: (u: string) => api.delete(`/api/v1/patient/medical-record/${u}`),
|
|
onSuccess: () => { invalidate(); setDelTarget(null); toast.success('حذف شد'); },
|
|
onError: (e: any) => { toast.error(e.message); setDelTarget(null); },
|
|
});
|
|
|
|
return (
|
|
<div>
|
|
<div style={{ marginBottom: 14 }}>
|
|
<button className="btn primary" onClick={() => open()}><PlusIcon style={{ width: 16 }} /> ثبت معاینه جدید</button>
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<div style={{ padding: 16, color: 'var(--text-3)', fontSize: 13 }}>در حال بارگذاری...</div>
|
|
) : items.length === 0 ? (
|
|
<div style={{ padding: '40px 0', textAlign: 'center', color: 'var(--text-3)', fontSize: 14 }}>معاینهای ثبت نشده است.</div>
|
|
) : (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
|
|
{items.map((m) => (
|
|
<div key={m.uuid} style={{ background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-lg)', padding: '14px 16px' }}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 10 }}>
|
|
<div style={{ flex: 1 }}>
|
|
<div style={{ fontWeight: 700, fontSize: 14 }}>{m.title}</div>
|
|
<div style={{ fontSize: 12, color: 'var(--text-3)', marginTop: 2 }}>{formatDate(m.recorded_at)}</div>
|
|
{m.body && <div style={{ fontSize: 13, color: 'var(--text-2)', marginTop: 8, whiteSpace: 'pre-wrap' }}>{m.body}</div>}
|
|
</div>
|
|
<div style={{ display: 'flex', gap: 6 }}>
|
|
<button className="btn sm ghost" aria-label="ویرایش" style={{ color: 'var(--accent)' }} onClick={() => open(m)}><PencilIcon style={{ width: 15 }} /></button>
|
|
<button className="btn sm ghost" aria-label="حذف" style={{ color: 'var(--danger)' }} onClick={() => setDelTarget(m)}><TrashIcon style={{ width: 15 }} /></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<Modal open={modal !== null} onClose={() => setModal(null)} title={modal === 'create' ? 'ثبت معاینه جدید' : 'ویرایش معاینه'}>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
|
|
<div>
|
|
<label className="field-label">عنوان *</label>
|
|
<div className="field"><input value={title} onChange={(e) => setTitle(e.target.value)} placeholder="مثلاً: معاینه اولیه" autoFocus /></div>
|
|
</div>
|
|
<div>
|
|
<label className="field-label">تاریخ</label>
|
|
<PersianDateInput value={date} onChange={setDate} />
|
|
</div>
|
|
<div>
|
|
<label className="field-label">شرح</label>
|
|
<div className="field" style={{ height: 'auto' }}><textarea value={body} onChange={(e) => setBody(e.target.value)} rows={4} placeholder="شرح معاینه" style={{ width: '100%', border: 'none', background: 'transparent', fontFamily: 'inherit', resize: 'vertical' }} /></div>
|
|
</div>
|
|
<div style={{ display: 'flex', gap: 8 }}>
|
|
<button className="btn primary" disabled={!title.trim() || save.isPending} onClick={() => save.mutate()}>ذخیره</button>
|
|
<button className="btn" onClick={() => setModal(null)}>انصراف</button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
|
|
<ConfirmDialog
|
|
open={!!delTarget}
|
|
title="حذف معاینه"
|
|
message={`آیا از حذف «${delTarget?.title}» مطمئن هستید؟`}
|
|
confirmLabel="حذف"
|
|
onConfirm={() => delTarget && del.mutate(delTarget.uuid)}
|
|
onCancel={() => setDelTarget(null)}
|
|
loading={del.isPending}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function TabList({ q, emptyLabel, row }: {
|
|
q: { data?: ApiResponse<any[]>; isLoading: boolean };
|
|
emptyLabel: string;
|
|
row: (item: any) => { title: string; meta?: string; badge?: string };
|
|
}) {
|
|
if (q.isLoading) return <div style={{ padding: 16, color: 'var(--text-3)', fontSize: 13 }}>در حال بارگذاری...</div>;
|
|
const items = q.data?.data ?? [];
|
|
if (items.length === 0) return <div style={{ padding: '40px 0', textAlign: 'center', color: 'var(--text-3)', fontSize: 14 }}>{emptyLabel}</div>;
|
|
return (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
|
|
{items.map((item, i) => {
|
|
const r = row(item);
|
|
return (
|
|
<div key={item.uuid ?? i} style={{ background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-lg)', padding: '14px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10 }}>
|
|
<div>
|
|
<div style={{ fontWeight: 600, fontSize: 14 }}>{r.title}</div>
|
|
{r.meta && <div style={{ fontSize: 12.5, color: 'var(--text-3)', marginTop: 2 }}>{r.meta}</div>}
|
|
</div>
|
|
{r.badge && <span className="badge gray" style={{ fontSize: 11 }}>{r.badge}</span>}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|