feat(admin): table/card views for treatment cases, matching the patients list
The list was cards only, so comparing courses across patients meant reading four stacked blocks instead of scanning columns. It now has the same table/card toggle the patients page uses, reusing that page's toggle icons and keeping the choice in the URL so back and refresh hold it. Table is the default here: the operator, status and session progress are the columns a manager scans. Both views derive the operator the same way, through one helper — history (performed_by) when a session has been done, otherwise the plan (assigned_staff), labelled as not yet performed. Also fixes a three-states slip in the operator picker I added last time: it rendered "no staff defined" while the staff list was still loading, which is what an empty list looks like from the user's side. Loading now says so. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
hamed
@@ -10,6 +10,7 @@ import { formatDate, formatDateTime, formatNumber } from '../lib/utils';
|
||||
import { useUrlState } from '../hooks/useUrlState';
|
||||
import PersianDateInput from '../components/ui/PersianDateInput';
|
||||
import TreatmentCaseEditModal from '../components/TreatmentCaseEditModal';
|
||||
import { PatientsGridView, PatientsCategoryView } from '../components/icons/FilesToolbarIcons';
|
||||
import type { TreatmentCaseSummary, StaffTreatmentSession, SlotSuggestionResponse } from '../types';
|
||||
|
||||
const TABS = [
|
||||
@@ -32,7 +33,7 @@ const CASE_STATUS_LABEL: Record<TreatmentCaseSummary['status'], string> = {
|
||||
* را جواب میدهند — «کدام بیمار در چه مرحلهای است و چه کاری مانده».
|
||||
*/
|
||||
export default function TreatmentCasesPage() {
|
||||
const [urlState, setUrlState] = useUrlState({ tab: 'cases', status: '', q: '', from: '', to: '' });
|
||||
const [urlState, setUrlState] = useUrlState({ tab: 'cases', status: '', q: '', from: '', to: '', view: 'table' });
|
||||
const tab = (TABS.some((t) => t.id === urlState.tab) ? urlState.tab : 'cases') as TabId;
|
||||
|
||||
return (
|
||||
@@ -62,6 +63,8 @@ export default function TreatmentCasesPage() {
|
||||
onFrom={(from) => setUrlState({ from })}
|
||||
to={urlState.to}
|
||||
onTo={(to) => setUrlState({ to })}
|
||||
view={urlState.view === 'card' ? 'card' : 'table'}
|
||||
onView={(v) => setUrlState({ view: v })}
|
||||
/>
|
||||
: <UnbookedTab />}
|
||||
</>
|
||||
@@ -75,7 +78,7 @@ const STATUS_FILTERS = [
|
||||
['abandoned', 'رها شده'],
|
||||
] as const;
|
||||
|
||||
function CasesTab({ status, onStatus, search, onSearch, from, onFrom, to, onTo }: {
|
||||
function CasesTab({ status, onStatus, search, onSearch, from, onFrom, to, onTo, view, onView }: {
|
||||
status: string;
|
||||
onStatus: (s: string) => void;
|
||||
search: string;
|
||||
@@ -85,6 +88,9 @@ function CasesTab({ status, onStatus, search, onSearch, from, onFrom, to, onTo }
|
||||
onFrom: (s: string) => void;
|
||||
to: string;
|
||||
onTo: (s: string) => void;
|
||||
/** جدولی یا کارتی — همان الگوی صفحهٔ پروندهها، در URL تا «بازگشت» نما را نپراند. */
|
||||
view: 'table' | 'card';
|
||||
onView: (v: 'table' | 'card') => void;
|
||||
}) {
|
||||
// فیلد جستجو محلی میماند و فقط مقدار نهایی به URL میرود؛ وگرنه هر حرف یک ورودی
|
||||
// تاریخچه میسازد و «بازگشت» بیمعنی میشود.
|
||||
@@ -134,6 +140,29 @@ function CasesTab({ status, onStatus, search, onSearch, from, onFrom, to, onTo }
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
display: 'flex', flexShrink: 0, overflow: 'hidden',
|
||||
border: '1px solid var(--border-2)', borderRadius: 4,
|
||||
}}>
|
||||
{([['table', 'نمایش جدولی', PatientsGridView], ['card', 'نمایش کارتی', PatientsCategoryView]] as const).map(
|
||||
([v, label, Icon]) => (
|
||||
<button
|
||||
key={v}
|
||||
type="button"
|
||||
aria-label={label}
|
||||
aria-pressed={view === v}
|
||||
onClick={() => onView(v)}
|
||||
style={{
|
||||
padding: 8, border: 'none', cursor: 'pointer', display: 'grid', placeItems: 'center',
|
||||
background: view === v ? 'var(--primary-soft)' : 'transparent',
|
||||
}}
|
||||
>
|
||||
<Icon color={view === v ? 'var(--primary)' : 'var(--text-2)'} />
|
||||
</button>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="seg">
|
||||
{STATUS_FILTERS.map(([v, label]) => (
|
||||
<button
|
||||
@@ -201,6 +230,8 @@ function CasesTab({ status, onStatus, search, onSearch, from, onFrom, to, onTo }
|
||||
? 'در این بازهٔ تاریخ پروندهای باز نشده است.'
|
||||
: 'پروندهای یافت نشد. پرونده وقتی ساخته میشود که نوبتِ سرویسی با «طول درمان» قطعی شود.'}
|
||||
</div>
|
||||
) : view === 'table' ? (
|
||||
<CasesTable cases={cases} onEdit={setEditing} />
|
||||
) : (
|
||||
<div style={{ display: 'grid', gap: 12 }}>
|
||||
{cases.map((c) => <CaseCard key={c.uuid} item={c} onEdit={() => setEditing(c.uuid)} />)}
|
||||
@@ -214,10 +245,89 @@ function CasesTab({ status, onStatus, search, onSearch, from, onFrom, to, onTo }
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* انجامدهنده از جلسات میآید (سابقه) و اختصاصیافته برنامه است؛ تا وقتی جلسهای
|
||||
* انجام نشده، همان برنامه را نشان میدهیم. هر دو نما یک قاعده دارند.
|
||||
*/
|
||||
function operatorOf(c: TreatmentCaseSummary): { text: string; planned: boolean } | null {
|
||||
if (c.performed_by.length > 0) {
|
||||
return { text: c.performed_by.map((s) => s.name).join('، '), planned: false };
|
||||
}
|
||||
|
||||
if (c.assigned_staff.length > 0) {
|
||||
return { text: c.assigned_staff.map((s) => s.name).join('، '), planned: true };
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
const TABLE_HEADS = ['ردیف', 'بیمار', 'سرویس', 'پرسنل', 'وضعیت', 'جلسات', 'شروع', 'عملیات'];
|
||||
|
||||
function CasesTable({ cases, onEdit }: { cases: TreatmentCaseSummary[]; onEdit: (uuid: string) => void }) {
|
||||
return (
|
||||
<div style={{
|
||||
background: 'var(--surface)', border: '1px solid var(--border)',
|
||||
borderRadius: 'var(--r-lg)', overflow: 'auto',
|
||||
}}>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse', minWidth: 900 }}>
|
||||
<thead>
|
||||
<tr style={{ background: 'var(--surface-2)', color: 'var(--text-2)', fontSize: 13 }}>
|
||||
{TABLE_HEADS.map((h) => (
|
||||
<th key={h} style={{ padding: '12px 14px', textAlign: 'center', fontWeight: 600, whiteSpace: 'nowrap' }}>
|
||||
{h}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{cases.map((c, i) => {
|
||||
const operator = operatorOf(c);
|
||||
|
||||
return (
|
||||
<tr key={c.uuid} style={{ borderTop: '1px solid var(--border)', fontSize: 13.5, textAlign: 'center' }}>
|
||||
<td style={{ padding: '12px 14px', color: 'var(--text-3)' }}>{formatNumber(i + 1)}</td>
|
||||
<td style={{ padding: '12px 14px' }}>
|
||||
<div style={{ fontWeight: 600 }}>{c.patient.name || 'بیمار بدون نام'}</div>
|
||||
<div style={{ fontSize: 12, color: 'var(--text-3)', direction: 'ltr' }}>{c.patient.mobile}</div>
|
||||
</td>
|
||||
<td style={{ padding: '12px 14px' }}>{c.service.name}</td>
|
||||
<td style={{ padding: '12px 14px', color: operator?.planned ? 'var(--text-3)' : 'var(--text)' }}>
|
||||
{operator === null ? '—' : operator.planned ? `${operator.text} (هنوز انجام نشده)` : operator.text}
|
||||
</td>
|
||||
<td style={{ padding: '12px 14px' }}>
|
||||
<span className={`badge ${c.status === 'active' ? 'blue' : c.status === 'completed' ? 'green' : 'gray'}`}>
|
||||
<span className="bdot" />{CASE_STATUS_LABEL[c.status]}
|
||||
</span>
|
||||
</td>
|
||||
<td style={{ padding: '12px 14px', whiteSpace: 'nowrap' }}>
|
||||
{formatNumber(c.completed_sessions)} از {formatNumber(c.total_sessions)}
|
||||
</td>
|
||||
<td style={{ padding: '12px 14px', whiteSpace: 'nowrap' }}>{formatDateTime(c.opened_at)}</td>
|
||||
<td style={{ padding: '12px 14px' }}>
|
||||
<button
|
||||
type="button"
|
||||
className="mini-btn"
|
||||
aria-label={`ویرایش پروندهٔ ${c.patient.name ?? ''}`}
|
||||
onClick={() => onEdit(c.uuid)}
|
||||
style={{ color: 'var(--accent)' }}
|
||||
>
|
||||
<PencilSquareIcon style={{ width: 18, height: 18 }} />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CaseCard({ item: c, onEdit }: { item: TreatmentCaseSummary; onEdit: () => void }) {
|
||||
const percent = c.total_sessions > 0
|
||||
? Math.round((c.completed_sessions / c.total_sessions) * 100)
|
||||
: 0;
|
||||
const operator = operatorOf(c);
|
||||
|
||||
return (
|
||||
<div className="card card-pad" style={{ display: 'grid', gap: 10 }}>
|
||||
@@ -242,15 +352,11 @@ function CaseCard({ item: c, onEdit }: { item: TreatmentCaseSummary; onEdit: ()
|
||||
{/* ساعت هم لازم است: چند پروندهٔ یک روز فقط با ساعت از هم جدا میشوند. */}
|
||||
<span>شروع: {formatDateTime(c.opened_at)}</span>
|
||||
{c.supervisor && <span>پزشک ناظر: {c.supervisor.name}</span>}
|
||||
{/* انجامدهنده از جلسات میآید (سابقه) و اختصاصیافته برنامه است؛ تا وقتی
|
||||
جلسهای انجام نشده، همان برنامه را نشان میدهیم. */}
|
||||
{c.performed_by.length > 0 ? (
|
||||
<span>انجامدهنده: {c.performed_by.map((s) => s.name).join('، ')}</span>
|
||||
) : c.assigned_staff.length > 0 ? (
|
||||
<span style={{ color: 'var(--text-3)' }}>
|
||||
اپراتور: {c.assigned_staff.map((s) => s.name).join('، ')} (هنوز انجام نشده)
|
||||
</span>
|
||||
) : null}
|
||||
{operator !== null && (
|
||||
operator.planned
|
||||
? <span style={{ color: 'var(--text-3)' }}>اپراتور: {operator.text} (هنوز انجام نشده)</span>
|
||||
: <span>انجامدهنده: {operator.text}</span>
|
||||
)}
|
||||
{c.areas.length > 0 && <span>نواحی: {c.areas.map((a) => a.name).join('، ')}</span>}
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user