feat(patients): phase B1 — tabbed patient detail page
Add a standalone PatientDetailPage at /admin/patients/:uuid: a header + the 9-tab case-file bar (services, info, appointments, payments, wallet, messages, call-center, attachments, medical-record). The info, services (sessions) and appointments tabs are wired to existing endpoints; the remaining tabs render a placeholder until their backends land (phases B2–B5). The list "مشاهده" action now opens this detail page. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
hamed
@@ -55,6 +55,7 @@ import TagsSettingsPage from './pages/TagsSettingsPage';
|
||||
import AppointmentSettingsPage from './pages/AppointmentSettingsPage';
|
||||
import PatientsListPage from './pages/PatientsListPage';
|
||||
import PatientRecordFormPage from './pages/PatientRecordFormPage';
|
||||
import PatientDetailPage from './pages/PatientDetailPage';
|
||||
import PaymentSuccessPage from './pages/PaymentSuccessPage';
|
||||
import PwaInstallBanner from './components/ui/PwaInstallBanner';
|
||||
|
||||
@@ -195,6 +196,7 @@ export default function App() {
|
||||
<Route path="patients" element={<RoleRoute roles={['doctor', 'secretary', 'clinic']} blockClinicScope><PatientsListPage /></RoleRoute>} />
|
||||
<Route path="patients/new" element={<RoleRoute roles={['doctor', 'secretary', 'clinic']} blockClinicScope><PatientRecordFormPage /></RoleRoute>} />
|
||||
<Route path="patients/:uuid/edit" element={<RoleRoute roles={['doctor', 'secretary', 'clinic']} blockClinicScope><PatientRecordFormPage /></RoleRoute>} />
|
||||
<Route path="patients/:uuid" element={<RoleRoute roles={['doctor', 'secretary', 'clinic']} blockClinicScope><PatientDetailPage /></RoleRoute>} />
|
||||
<Route path="my-patients/:recordUuid/session/new" element={<RoleRoute roles={['doctor', 'secretary', 'clinic']} blockClinicScope><NewSessionPage /></RoleRoute>} />
|
||||
<Route path="insurance-pricing" element={<RoleRoute roles={['doctor', 'clinic']} blockClinicScope><InsurancePricingPage /></RoleRoute>} />
|
||||
<Route path="claims" element={<RoleRoute roles={['doctor', 'clinic']} blockClinicScope><ClaimsPage /></RoleRoute>} />
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
import { describe, it, expect, beforeEach, vi } from 'vitest';
|
||||
import { screen, fireEvent } from '@testing-library/react';
|
||||
import { Routes, Route } from 'react-router-dom';
|
||||
import { renderWithProviders } from '../test/utils';
|
||||
|
||||
vi.mock('../lib/api', () => ({
|
||||
api: { get: vi.fn(), post: vi.fn(), patch: vi.fn(), put: vi.fn(), delete: vi.fn() },
|
||||
ApiError: class extends Error {},
|
||||
}));
|
||||
|
||||
import { api } from '../lib/api';
|
||||
import PatientDetailPage from './PatientDetailPage';
|
||||
|
||||
const get = api.get as ReturnType<typeof vi.fn>;
|
||||
|
||||
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',
|
||||
profile: { gender: 'female', referral_source: 'اینستاگرام', address: 'یزد', description: 'یادداشت' },
|
||||
} });
|
||||
return Promise.resolve({ success: true, data: [] });
|
||||
});
|
||||
});
|
||||
|
||||
function renderDetail() {
|
||||
return renderWithProviders(
|
||||
<Routes>
|
||||
<Route path="/admin/patients/:uuid" element={<PatientDetailPage />} />
|
||||
</Routes>,
|
||||
{ route: '/admin/patients/r1' },
|
||||
);
|
||||
}
|
||||
|
||||
describe('PatientDetailPage (پرونده تبدار)', () => {
|
||||
it('renders the header and tab bar', async () => {
|
||||
renderDetail();
|
||||
expect(await screen.findByText('ساغر صابری')).toBeInTheDocument();
|
||||
expect(screen.getByText('سرویسها')).toBeInTheDocument();
|
||||
expect(screen.getByText('اطلاعات پرونده')).toBeInTheDocument();
|
||||
expect(screen.getByText('پرونده پزشکی')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows patient info on the info tab', async () => {
|
||||
renderDetail();
|
||||
await screen.findByText('ساغر صابری');
|
||||
fireEvent.click(screen.getByText('اطلاعات پرونده'));
|
||||
expect(screen.getByText('کد ملی')).toBeInTheDocument();
|
||||
expect(screen.getByText('1234567890')).toBeInTheDocument();
|
||||
expect(screen.getByText('اینستاگرام')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows a placeholder for not-yet-built tabs', async () => {
|
||||
renderDetail();
|
||||
await screen.findByText('ساغر صابری');
|
||||
fireEvent.click(screen.getByText('پیامها'));
|
||||
expect(screen.getByText(/بهزودی تکمیل میشود/)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,154 @@
|
||||
import { useState } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useParams, Link } from 'react-router-dom';
|
||||
import {
|
||||
ChevronRightIcon, PencilIcon, ClipboardDocumentCheckIcon, DocumentTextIcon,
|
||||
CalendarDaysIcon, CreditCardIcon, BanknotesIcon, ChatBubbleLeftRightIcon,
|
||||
PhoneArrowUpRightIcon, PaperClipIcon, ClipboardDocumentListIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
import { api } from '../lib/api';
|
||||
import type { ApiResponse } from '../lib/api';
|
||||
import type { PatientRecord } from '../types';
|
||||
import { formatDate } from '../lib/utils';
|
||||
|
||||
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 })} />
|
||||
) : (
|
||||
<Placeholder label={TABS.find((t) => t.key === tab)!.label} />
|
||||
)}
|
||||
</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>
|
||||
);
|
||||
}
|
||||
@@ -45,8 +45,7 @@ export default function PatientsListPage() {
|
||||
const total = data?.meta?.totalRecords ?? 0;
|
||||
|
||||
const editHref = (r: PatientRecord) => `/admin/patients/${r.uuid}/edit`;
|
||||
// detail page arrives in phase B; view currently opens the edit form
|
||||
const viewHref = editHref;
|
||||
const viewHref = (r: PatientRecord) => `/admin/patients/${r.uuid}`;
|
||||
|
||||
return (
|
||||
<div className="fade-in" style={{ maxWidth: 1160, margin: '0 auto' }}>
|
||||
|
||||
Reference in New Issue
Block a user