diff --git a/assets/admin/App.tsx b/assets/admin/App.tsx index 6df5e321..aa4e7cb3 100644 --- a/assets/admin/App.tsx +++ b/assets/admin/App.tsx @@ -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() { } /> } /> } /> + } /> } /> } /> } /> diff --git a/assets/admin/pages/PatientDetailPage.test.tsx b/assets/admin/pages/PatientDetailPage.test.tsx new file mode 100644 index 00000000..1c8243e7 --- /dev/null +++ b/assets/admin/pages/PatientDetailPage.test.tsx @@ -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; + +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( + + } /> + , + { 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(); + }); +}); diff --git a/assets/admin/pages/PatientDetailPage.tsx b/assets/admin/pages/PatientDetailPage.tsx new file mode 100644 index 00000000..9e37abc6 --- /dev/null +++ b/assets/admin/pages/PatientDetailPage.tsx @@ -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 = { male: 'مرد', female: 'زن' }; + +function Placeholder({ label }: { label: string }) { + return ( +
+ محتوای «{label}» به‌زودی تکمیل می‌شود. +
+ ); +} + +function InfoRow({ label, value }: { label: string; value?: string | null }) { + return ( +
+ {label} + {value || '—'} +
+ ); +} + +/** پرونده — the tabbed patient case-file (Figma "جزئیات پرونده"). */ +export default function PatientDetailPage() { + const { uuid } = useParams<{ uuid: string }>(); + const [tab, setTab] = useState('services'); + + const { data, isLoading } = useQuery>({ + queryKey: ['patient', uuid], + queryFn: () => api.get(`/api/v1/patient/${uuid}`), + enabled: !!uuid, + }); + const record = data?.data; + const profile: any = record?.profile ?? {}; + + const sessionsQ = useQuery>({ + queryKey: ['patient-sessions', uuid], + queryFn: () => api.get(`/api/v1/patient/${uuid}/sessions`), + enabled: !!uuid && tab === 'services', + }); + const appointmentsQ = useQuery>({ + queryKey: ['patient-appointments', uuid], + queryFn: () => api.get(`/api/v1/patient/${uuid}/appointments`), + enabled: !!uuid && tab === 'appointments', + }); + + return ( +
+ {/* header */} +
+
+ بازگشت +
{record?.user_name || 'پرونده'}
+ {record?.record_number && #{record.record_number}} +
+ ویرایش +
+ + {/* tab bar */} +
+ {TABS.map((t) => { + const on = t.key === tab; + const Icon = t.icon; + return ( + + ); + })} +
+ + {/* tab content */} + {isLoading ? ( +
در حال بارگذاری...
+ ) : tab === 'info' ? ( +
+ + + + + + + + + +
+ ) : tab === 'services' ? ( + ({ title: s.section_name || s.name || 'سرویس', meta: s.created_at ? formatDate(s.created_at) : '', badge: s.status })} /> + ) : tab === 'appointments' ? ( + ({ 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 })} /> + ) : ( + t.key === tab)!.label} /> + )} +
+ ); +} + +function TabList({ q, emptyLabel, row }: { + q: { data?: ApiResponse; isLoading: boolean }; + emptyLabel: string; + row: (item: any) => { title: string; meta?: string; badge?: string }; +}) { + if (q.isLoading) return
در حال بارگذاری...
; + const items = q.data?.data ?? []; + if (items.length === 0) return
{emptyLabel}
; + return ( +
+ {items.map((item, i) => { + const r = row(item); + return ( +
+
+
{r.title}
+ {r.meta &&
{r.meta}
} +
+ {r.badge && {r.badge}} +
+ ); + })} +
+ ); +} diff --git a/assets/admin/pages/PatientsListPage.tsx b/assets/admin/pages/PatientsListPage.tsx index 8a220a14..6c8bef25 100644 --- a/assets/admin/pages/PatientsListPage.tsx +++ b/assets/admin/pages/PatientsListPage.tsx @@ -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 (