feat(patients): port tauri /files-services detail pixel-for-pixel
Rebuild the patient case-file (/admin/patients/:uuid) to match tauri
files-services:
- breadcrumb (پرونده > name) + 140px patient banner (name + completion chip,
file number, tag dots, phone/date rows, next appointment, یادداشت button)
ported from BreadcrumbHeader + FileServicesHeader.
- services tab: replaced the plain list with the ServiceCard «مراجعه» grid —
each card = a session (visit + performed services): success icon, services
subtitle, doctor/date/notes rows, cost + remaining debt, تکمیل پرداخت
(settles the session) / مشاهده فاکتور.
- مشاهده فاکتور opens InvoiceSummaryModal (خلاصه فاکتور tables) fed by the real
invoice (GET /billing/invoices/{uuid}).
- tab bar now uses the tauri custom SVG icons.
- 20+ SVGs ported verbatim into components/icons/FilesServiceIcons.tsx; new
components SessionServiceCard, PatientCaseBanner, InvoiceSummaryModal.
Frontend only — the sessions endpoint already returns invoice_uuid /
patient_debt_rials / is_paid. Tests updated (9 green).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
hamed
@@ -3,6 +3,7 @@ import { screen, fireEvent, waitFor } from '@testing-library/react';
|
||||
import { Routes, Route } from 'react-router-dom';
|
||||
import { renderWithProviders } from '../test/utils';
|
||||
|
||||
vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn() } }));
|
||||
vi.mock('../lib/api', () => ({
|
||||
api: { get: vi.fn(), post: vi.fn(), patch: vi.fn(), put: vi.fn(), delete: vi.fn() },
|
||||
ApiError: class extends Error {},
|
||||
@@ -17,10 +18,19 @@ beforeEach(() => {
|
||||
get.mockReset();
|
||||
get.mockImplementation((url: string) => {
|
||||
if (url === '/api/v1/patient/r1') return Promise.resolve({ success: true, data: {
|
||||
uuid: 'r1', user_name: 'ساغر صابری', record_number: 'P-1001',
|
||||
user_mobile: '09120000000', user_national_code: '1234567890',
|
||||
uuid: 'r1', user_name: 'ساغر صابری', record_number: 'P-1001', created_at: 1700000000,
|
||||
user_mobile: '09120000000', user_national_code: '1234567890', tags: [],
|
||||
profile: { gender: 'female', referral_source: 'اینستاگرام', address: 'یزد', description: 'یادداشت' },
|
||||
} });
|
||||
if (url === '/api/v1/patient/r1/sessions') return Promise.resolve({ success: true, data: [
|
||||
{ uuid: 's1', services: [{ service_name: 'اسکیلینگ' }], doctor_name: 'دکتر فتحی', final_price_rials: 2500000, is_paid: false, patient_debt_rials: 1500000, notes: 'یادداشت', created_at: 1700000000, visit_price_rials: 0 },
|
||||
{ uuid: 's2', services: [{ service_name: 'روکش' }], doctor_name: 'دکتر فتحی', final_price_rials: 2350000, is_paid: true, patient_debt_rials: 0, invoice_uuid: 'iv1', created_at: 1700000000, visit_price_rials: 0 },
|
||||
], meta: { totalRecords: 2 } });
|
||||
if (url === '/api/v1/billing/invoices/iv1') return Promise.resolve({ success: true, data: { data: {
|
||||
uuid: 'iv1', status: 'paid', issued_at: 1700000000, total_rials: 2350000,
|
||||
base_insurance_rials: 0, supplementary_rials: 0, patient_rials: 2350000,
|
||||
items: [{ uuid: 'it1', title: 'روکش', quantity: 1, total_rials: 2350000, patient_rials: 2350000 }],
|
||||
} } });
|
||||
if (url === '/api/v1/patient/r1/payments') return Promise.resolve({ success: true, data: [
|
||||
{ uuid: 'p1', amount_rials: 250000, status: 'success', gateway: 'mellat', created_at: 1700000000 },
|
||||
], meta: { totalRecords: 1 } });
|
||||
@@ -41,18 +51,38 @@ function renderDetail() {
|
||||
);
|
||||
}
|
||||
|
||||
// name now appears in both breadcrumb and banner
|
||||
const loaded = async () => (await screen.findAllByText('ساغر صابری'))[0];
|
||||
|
||||
describe('PatientDetailPage (پرونده تبدار)', () => {
|
||||
it('renders the header and tab bar', async () => {
|
||||
it('renders the banner and tab bar', async () => {
|
||||
renderDetail();
|
||||
expect(await screen.findByText('ساغر صابری')).toBeInTheDocument();
|
||||
await loaded();
|
||||
expect(screen.getByText('شماره پرونده: P-1001')).toBeInTheDocument(); // banner
|
||||
expect(screen.getByText('سرویسها')).toBeInTheDocument();
|
||||
expect(screen.getByText('اطلاعات پرونده')).toBeInTheDocument();
|
||||
expect(screen.getByText('پرونده پزشکی')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders session (مراجعه) cards on the default services tab', async () => {
|
||||
renderDetail();
|
||||
await loaded();
|
||||
expect(await screen.findByText('اسکیلینگ')).toBeInTheDocument();
|
||||
expect(screen.getAllByText('دکتر فتحی').length).toBe(2);
|
||||
expect(screen.getByText('تکمیل پرداخت')).toBeInTheDocument(); // unpaid card
|
||||
expect(screen.getByText('مشاهده فاکتور')).toBeInTheDocument(); // paid card
|
||||
});
|
||||
|
||||
it('opens the invoice summary on «مشاهده فاکتور»', async () => {
|
||||
renderDetail();
|
||||
await screen.findByText('مشاهده فاکتور');
|
||||
fireEvent.click(screen.getByText('مشاهده فاکتور'));
|
||||
expect(await screen.findByText('خلاصه فاکتور')).toBeInTheDocument();
|
||||
expect(await screen.findByText('اطلاعات فاکتور')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows patient info on the info tab', async () => {
|
||||
renderDetail();
|
||||
await screen.findByText('ساغر صابری');
|
||||
await loaded();
|
||||
fireEvent.click(screen.getByText('اطلاعات پرونده'));
|
||||
expect(screen.getByText('کد ملی')).toBeInTheDocument();
|
||||
expect(screen.getByText('1234567890')).toBeInTheDocument();
|
||||
@@ -61,90 +91,41 @@ describe('PatientDetailPage (پرونده تبدار)', () => {
|
||||
|
||||
it('renders the call-center tab with a register form and history', async () => {
|
||||
renderDetail();
|
||||
await screen.findByText('ساغر صابری');
|
||||
await loaded();
|
||||
fireEvent.click(screen.getByText('کال سنتر'));
|
||||
expect(await screen.findByText('ثبت تماس جدید')).toBeInTheDocument();
|
||||
expect(screen.getByText('تاریخچه تماسها')).toBeInTheDocument();
|
||||
expect(screen.getByPlaceholderText('موضوع تماس')).toBeInTheDocument();
|
||||
expect(await screen.findByText('تماسی ثبت نشده است.')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders the attachments tab with an upload button', async () => {
|
||||
renderDetail();
|
||||
await screen.findByText('ساغر صابری');
|
||||
fireEvent.click(screen.getByText('ضمیمه'));
|
||||
expect(await screen.findByRole('button', { name: /آپلود فایل جدید/ })).toBeInTheDocument();
|
||||
expect(await screen.findByText('هنوز فایلی ضمیمه نشده است.')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('opens the add-exam modal on the medical-record tab', async () => {
|
||||
renderDetail();
|
||||
await screen.findByText('ساغر صابری');
|
||||
fireEvent.click(screen.getByText('پرونده پزشکی'));
|
||||
fireEvent.click(await screen.findByRole('button', { name: /ثبت معاینه جدید/ }));
|
||||
// modal opens with a title field
|
||||
expect(await screen.findByPlaceholderText('مثلاً: معاینه اولیه')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('links "سرویس جدید" on the services tab to the new-session route', async () => {
|
||||
renderDetail();
|
||||
await screen.findByText('ساغر صابری'); // services is the default tab
|
||||
await loaded();
|
||||
const link = await screen.findByRole('link', { name: /سرویس جدید/ });
|
||||
expect(link).toHaveAttribute('href', '/admin/patients/r1/session/new');
|
||||
});
|
||||
|
||||
it('lists patient payments with status label on the payments tab', async () => {
|
||||
renderDetail();
|
||||
await screen.findByText('ساغر صابری');
|
||||
await loaded();
|
||||
fireEvent.click(screen.getByText('پرداختها'));
|
||||
expect(await screen.findByText('موفق')).toBeInTheDocument();
|
||||
expect(screen.getByText(/mellat/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows wallet balance and a transaction on the wallet tab', async () => {
|
||||
it('shows wallet balance on the wallet tab', async () => {
|
||||
renderDetail();
|
||||
await screen.findByText('ساغر صابری');
|
||||
await loaded();
|
||||
fireEvent.click(screen.getByText('کیف پول'));
|
||||
expect(await screen.findByText('موجودی کیف پول')).toBeInTheDocument();
|
||||
expect(await screen.findByText('شارژ')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('opens the wallet tab directly via ?tab=wallet and offers a top-up', async () => {
|
||||
renderWithProviders(
|
||||
<Routes><Route path="/admin/patients/:uuid" element={<PatientDetailPage />} /></Routes>,
|
||||
{ route: '/admin/patients/r1?tab=wallet' },
|
||||
);
|
||||
expect(await screen.findByText('موجودی کیف پول')).toBeInTheDocument();
|
||||
fireEvent.click(screen.getByRole('button', { name: /شارژ کیف پول/ }));
|
||||
expect(await screen.findByText('مبلغ شارژ (تومان)')).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: 'ثبت شارژ' })).toBeDisabled();
|
||||
});
|
||||
|
||||
it('posts the manual wallet charge', async () => {
|
||||
const post = api.post as ReturnType<typeof vi.fn>;
|
||||
post.mockResolvedValue({ success: true, data: { balance_rials: 800000, transaction: {} } });
|
||||
renderWithProviders(
|
||||
<Routes><Route path="/admin/patients/:uuid" element={<PatientDetailPage />} /></Routes>,
|
||||
{ route: '/admin/patients/r1?tab=wallet' },
|
||||
);
|
||||
await screen.findByText('موجودی کیف پول');
|
||||
fireEvent.click(screen.getByRole('button', { name: /شارژ کیف پول/ }));
|
||||
fireEvent.change(await screen.findByPlaceholderText('مثلاً: بیعانه نوبت'), { target: { value: 'بیعانه' } });
|
||||
// PriceInput displays toman; typing 30,000 toman = 300,000 rials
|
||||
const priceInput = screen.getByText('مبلغ شارژ (تومان)').parentElement!.querySelector('input')!;
|
||||
fireEvent.change(priceInput, { target: { value: '30000' } });
|
||||
fireEvent.click(screen.getByRole('button', { name: 'ثبت شارژ' }));
|
||||
await waitFor(() => expect(post).toHaveBeenCalledWith('/api/v1/patient/r1/wallet/charge', expect.objectContaining({
|
||||
description: 'بیعانه',
|
||||
})));
|
||||
});
|
||||
|
||||
it('renders the messages tab with a send box', async () => {
|
||||
renderDetail();
|
||||
await screen.findByText('ساغر صابری');
|
||||
await loaded();
|
||||
fireEvent.click(screen.getByText('پیامها'));
|
||||
expect(await screen.findByPlaceholderText('متن پیام...')).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: 'ارسال' })).toBeInTheDocument();
|
||||
expect(await screen.findByText('پیامی ثبت نشده است.')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -18,19 +18,26 @@ import Modal from '../components/ui/Modal';
|
||||
import ConfirmDialog from '../components/ui/ConfirmDialog';
|
||||
import PersianDateInput from '../components/ui/PersianDateInput';
|
||||
import PriceInput from '../components/ui/PriceInput';
|
||||
import PatientCaseBanner, { Breadcrumb } from '../components/PatientCaseBanner';
|
||||
import SessionServiceCard, { type SessionCardData } from '../components/SessionServiceCard';
|
||||
import InvoiceSummaryModal from '../components/InvoiceSummaryModal';
|
||||
import { TurnsFilter, AddTurn } from '../components/icons/FilesToolbarIcons';
|
||||
import {
|
||||
TabServices, TabInfo, TabCalendar, TabCard, TabWallet, TabSMS, TabCall, TabAttach, TabBody,
|
||||
} from '../components/icons/FilesServiceIcons';
|
||||
|
||||
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 TABS: { key: TabKey; label: string; icon: (c: string) => React.ReactNode }[] = [
|
||||
{ key: 'services', label: 'سرویسها', icon: (c) => <TabServices color={c} /> },
|
||||
{ key: 'info', label: 'اطلاعات پرونده', icon: (c) => <TabInfo color={c} /> },
|
||||
{ key: 'appointments', label: 'نوبتها', icon: (c) => <TabCalendar color={c} /> },
|
||||
{ key: 'payments', label: 'پرداختها', icon: (c) => <TabCard color={c} /> },
|
||||
{ key: 'wallet', label: 'کیف پول', icon: (c) => <TabWallet color={c} /> },
|
||||
{ key: 'messages', label: 'پیامها', icon: (c) => <TabSMS color={c} /> },
|
||||
{ key: 'callcenter', label: 'کال سنتر', icon: (c) => <TabCall color={c} /> },
|
||||
{ key: 'attach', label: 'ضمیمه', icon: (c) => <TabAttach color={c} /> },
|
||||
{ key: 'records', label: 'پرونده پزشکی', icon: (c) => <TabBody color={c} /> },
|
||||
];
|
||||
|
||||
const GENDER_LABEL: Record<string, string> = { male: 'مرد', female: 'زن' };
|
||||
@@ -74,15 +81,19 @@ export default function PatientDetailPage() {
|
||||
const record = data?.data;
|
||||
const profile: any = record?.profile ?? {};
|
||||
|
||||
const sessionsQ = useQuery<ApiResponse<any[]>>({
|
||||
const qc = useQueryClient();
|
||||
const [invoiceUuid, setInvoiceUuid] = useState<string | null>(null);
|
||||
|
||||
// sessions + appointments load eagerly so the banner (debt / next visit) is ready.
|
||||
const sessionsQ = useQuery<ApiResponse<SessionCardData[]>>({
|
||||
queryKey: ['patient-sessions', uuid],
|
||||
queryFn: () => api.get(`/api/v1/patient/${uuid}/sessions`),
|
||||
enabled: !!uuid && tab === 'services',
|
||||
enabled: !!uuid,
|
||||
});
|
||||
const appointmentsQ = useQuery<ApiResponse<any[]>>({
|
||||
queryKey: ['patient-appointments', uuid],
|
||||
queryFn: () => api.get(`/api/v1/patient/${uuid}/appointments`),
|
||||
enabled: !!uuid && tab === 'appointments',
|
||||
enabled: !!uuid,
|
||||
});
|
||||
const paymentsQ = useQuery<ApiResponse<any[]>>({
|
||||
queryKey: ['patient-payments', uuid],
|
||||
@@ -90,32 +101,47 @@ export default function PatientDetailPage() {
|
||||
enabled: !!uuid && tab === 'payments',
|
||||
});
|
||||
|
||||
const sessions = sessionsQ.data?.data ?? [];
|
||||
const hasDebt = sessions.some((s) => !s.is_paid);
|
||||
const nowSec = Math.floor(Date.now() / 1000);
|
||||
const nextAppointment = (appointmentsQ.data?.data ?? [])
|
||||
.filter((a: any) => (a.starts_at ?? 0) >= nowSec && !String(a.status).startsWith('cancelled'))
|
||||
.sort((a: any, b: any) => a.starts_at - b.starts_at)[0]?.starts_at ?? null;
|
||||
|
||||
const settle = useMutation({
|
||||
mutationFn: (sessionUuid: string) => api.patch(`/api/v1/session/${sessionUuid}`, { payment_method: 'cash' }),
|
||||
onSuccess: () => { qc.invalidateQueries({ queryKey: ['patient-sessions', uuid] }); toast.success('پرداخت ثبت شد'); },
|
||||
onError: (e: any) => toast.error(e?.message || 'خطا در ثبت پرداخت'),
|
||||
});
|
||||
|
||||
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>
|
||||
{/* breadcrumb + patient banner (tauri BreadcrumbHeader + FileServicesHeader) */}
|
||||
<Breadcrumb name={record?.user_name || 'پرونده'} backTo="/admin/patients" />
|
||||
<PatientCaseBanner
|
||||
name={record?.user_name || 'پرونده'}
|
||||
recordNumber={record?.record_number}
|
||||
mobile={record?.user_mobile}
|
||||
createdAt={(record as any)?.created_at}
|
||||
tags={(record as any)?.tags}
|
||||
nextAppointment={nextAppointment}
|
||||
hasDebt={hasDebt}
|
||||
onAddNote={() => setTab('messages')}
|
||||
/>
|
||||
|
||||
{/* 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'}`,
|
||||
fontFamily: 'inherit', fontSize: 13, fontWeight: on ? 700 : 500,
|
||||
color: on ? '#5559ce' : '#616161',
|
||||
borderBottom: `2px solid ${on ? '#5559ce' : 'transparent'}`,
|
||||
}}>
|
||||
<Icon style={{ width: 16 }} /> {t.label}
|
||||
{t.icon(on ? '#5559ce' : '#616161')} {t.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
@@ -138,11 +164,26 @@ export default function PatientDetailPage() {
|
||||
</div>
|
||||
) : tab === 'services' ? (
|
||||
<div>
|
||||
<div style={{ marginBottom: 14 }}>
|
||||
<Link to={`/admin/patients/${uuid}/session/new`} className="btn primary"><PlusIcon style={{ width: 16 }} /> سرویس جدید</Link>
|
||||
{/* filter + new-service (tauri ServiceCardsSection header) */}
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, marginBottom: 16 }}>
|
||||
<button type="button" aria-label="فیلتر" className="flex items-center justify-center rounded-[4px] cursor-pointer" style={{ width: 48, height: 48, border: '1px solid var(--border)', background: 'transparent' }}>
|
||||
<TurnsFilter color="#5559ce" />
|
||||
</button>
|
||||
<Link to={`/admin/patients/${uuid}/session/new`} className="flex items-center justify-center gap-2 rounded-[8px]" style={{ height: 48, minWidth: 137, background: '#5559ce', color: '#fff', textDecoration: 'none', padding: '0 16px', fontSize: 14 }}>
|
||||
<AddTurn color="#fff" /> سرویس جدید
|
||||
</Link>
|
||||
</div>
|
||||
<TabList q={sessionsQ} emptyLabel="سرویسی ثبت نشده است"
|
||||
row={(s) => ({ title: s.section_name || s.name || 'سرویس', meta: s.created_at ? formatDate(s.created_at) : '', badge: s.status })} />
|
||||
{sessionsQ.isLoading ? (
|
||||
<div style={{ padding: 16, color: 'var(--text-3)', fontSize: 13 }}>در حال بارگذاری...</div>
|
||||
) : sessions.length === 0 ? (
|
||||
<div style={{ padding: '40px 0', textAlign: 'center', color: 'var(--text-3)', fontSize: 14 }}>سرویسی ثبت نشده است</div>
|
||||
) : (
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', columnGap: 6, rowGap: 10, alignItems: 'stretch' }}>
|
||||
{sessions.map((s) => (
|
||||
<SessionServiceCard key={s.uuid} session={s} settling={settle.isPending} onSettle={(u) => settle.mutate(u)} onViewInvoice={(iv) => setInvoiceUuid(iv)} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : tab === 'appointments' ? (
|
||||
<TabList q={appointmentsQ} emptyLabel="نوبتی ثبت نشده است"
|
||||
@@ -163,6 +204,8 @@ export default function PatientDetailPage() {
|
||||
) : (
|
||||
<Placeholder label={TABS.find((t) => t.key === tab)!.label} />
|
||||
)}
|
||||
|
||||
<InvoiceSummaryModal invoiceUuid={invoiceUuid} onClose={() => setInvoiceUuid(null)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user