feat(appointments): reserve list page (نوبت های رزرو شده) — phase D
ReserveAppointmentsPage lists day-level reserve entries (/my/appointments?reserve=1, paginated) with the reserve-table.pdf columns (مراجعه کننده/شماره تماس/تاریخ/سرویس/پرسنل/وضعیت/عملیات). The row menu offers only the design's three actions — مشاهده (shared info modal), ویرایش (edit page) and انتقال به لیست نوبت ها (shared transfer modal flipping is_reserve back to a live slot). «نوبت رزرو» opens NewAppointmentDrawer in isReserve mode; clinics pick the doctor first (doctor-list), doctors book for themselves via dbUuid. Routed at /admin/appointments/reserve (before the :uuid route) and added to the sidebar under نوبتها for the three management role blocks. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
hamed
@@ -0,0 +1,204 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
PlusIcon, EllipsisHorizontalIcon, EyeIcon, PencilIcon, ArrowDownOnSquareIcon,
|
||||
UserCircleIcon, PhoneIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
import { api } from '../lib/api';
|
||||
import type { PaginatedResponse } from '../lib/api';
|
||||
import type { Appointment } from '../types';
|
||||
import { formatDate } from '../lib/utils';
|
||||
import { useAuthStore } from '../stores/authStore';
|
||||
import AppointmentStatusDropdown from '../components/ui/AppointmentStatusDropdown';
|
||||
import Pagination from '../components/ui/Pagination';
|
||||
import NewAppointmentDrawer from '../components/NewAppointmentDrawer';
|
||||
import { AppointmentInfoModal, TransferReserveModal } from '../components/AppointmentActions';
|
||||
|
||||
const LIMIT = 20;
|
||||
|
||||
/** Row menu for reserve entries — the design offers only مشاهده/ویرایش/انتقال. */
|
||||
function ReserveRowMenu({ appointment, queryKey }: { appointment: Appointment; queryKey: unknown[] }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [modal, setModal] = useState<null | 'info' | 'transfer'>(null);
|
||||
const [pos, setPos] = useState<{ top: number; right: number } | null>(null);
|
||||
const btnRef = useRef<HTMLButtonElement>(null);
|
||||
const menuRef = useRef<HTMLDivElement>(null);
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const handler = (e: MouseEvent) => {
|
||||
const t = e.target as Node;
|
||||
if (!btnRef.current?.contains(t) && !menuRef.current?.contains(t)) setOpen(false);
|
||||
};
|
||||
document.addEventListener('mousedown', handler);
|
||||
return () => document.removeEventListener('mousedown', handler);
|
||||
}, [open]);
|
||||
|
||||
const items = [
|
||||
{ label: 'مشاهده', icon: EyeIcon, onClick: () => { setOpen(false); setModal('info'); } },
|
||||
{ label: 'ویرایش', icon: PencilIcon, onClick: () => { setOpen(false); navigate(`/admin/appointments/${appointment.uuid}/edit`); } },
|
||||
{ label: 'انتقال به لیست نوبت ها', icon: ArrowDownOnSquareIcon, onClick: () => { setOpen(false); setModal('transfer'); } },
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<button ref={btnRef} aria-label="عملیات" className="btn sm ghost" style={{ color: 'var(--primary)', gap: 4 }}
|
||||
onClick={() => {
|
||||
if (!open && btnRef.current) {
|
||||
const r = btnRef.current.getBoundingClientRect();
|
||||
setPos({ top: r.bottom + 4, right: window.innerWidth - r.right });
|
||||
}
|
||||
setOpen(o => !o);
|
||||
}}>
|
||||
<EllipsisHorizontalIcon style={{ width: 18 }} /> عملیات
|
||||
</button>
|
||||
{open && pos && ReactDOM.createPortal(
|
||||
<div ref={menuRef} style={{
|
||||
position: 'fixed', top: pos.top, right: pos.right, zIndex: 9000,
|
||||
background: 'var(--surface)', border: '1px solid var(--border)',
|
||||
borderRadius: 'var(--r)', boxShadow: 'var(--shadow-lg)', minWidth: 190, overflow: 'hidden',
|
||||
}}>
|
||||
{items.map(({ label, icon: Icon, onClick }) => (
|
||||
<button key={label} onClick={onClick} style={{
|
||||
display: 'flex', alignItems: 'center', gap: 8, width: '100%', padding: '9px 12px',
|
||||
fontSize: 13, background: 'transparent', border: 'none', cursor: 'pointer',
|
||||
color: 'var(--text)', fontFamily: 'inherit', textAlign: 'right',
|
||||
}}
|
||||
onMouseEnter={e => (e.currentTarget.style.background = 'var(--surface-2)')}
|
||||
onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}>
|
||||
<Icon style={{ width: 15, color: 'var(--text-2)' }} /> {label}
|
||||
</button>
|
||||
))}
|
||||
</div>,
|
||||
document.body,
|
||||
)}
|
||||
{modal === 'info' && <AppointmentInfoModal appointment={appointment} queryKey={queryKey} onClose={() => setModal(null)} />}
|
||||
{modal === 'transfer' && <TransferReserveModal appointment={appointment} queryKey={queryKey} onClose={() => setModal(null)} />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
/** نوبتهای رزرو شده (reserve-table.pdf) — day-level reserve entries with transfer back to the live list. */
|
||||
export default function ReserveAppointmentsPage() {
|
||||
const [page, setPage] = useState(1);
|
||||
const [drawerOpen, setDrawerOpen] = useState(false);
|
||||
const primaryRole = useAuthStore(s => s.primaryRole);
|
||||
const dbUuid = useAuthStore(s => s.dbUuid);
|
||||
const isClinic = primaryRole === 'clinic';
|
||||
// the doctor the new reserve is booked for (doctors book for themselves)
|
||||
const [doctorUuid, setDoctorUuid] = useState(primaryRole === 'doctor' && dbUuid ? dbUuid : '');
|
||||
|
||||
const clinicDoctorsQ = useQuery<any>({
|
||||
queryKey: ['clinic-doctors', dbUuid],
|
||||
queryFn: () => api.get(`/api/v1/clinic/doctor-list/${dbUuid}`),
|
||||
enabled: isClinic && !!dbUuid,
|
||||
});
|
||||
const clinicDoctors: { uuid: string; name: string }[] = clinicDoctorsQ.data?.data?.data ?? [];
|
||||
|
||||
const queryKey = ['reserve-appointments', page];
|
||||
const { data, isLoading } = useQuery<PaginatedResponse<Appointment>>({
|
||||
queryKey,
|
||||
queryFn: () => api.get(`/api/v1/my/appointments?reserve=1&page=${page}&limit=${LIMIT}`),
|
||||
});
|
||||
const items = data?.data ?? [];
|
||||
const total = data?.meta?.totalRecords ?? 0;
|
||||
|
||||
const today = new Date();
|
||||
const defaultDate = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
|
||||
|
||||
const th: React.CSSProperties = { padding: '10px 14px', textAlign: 'right', fontWeight: 600, color: 'var(--text-2)', whiteSpace: 'nowrap' };
|
||||
const td: React.CSSProperties = { padding: '10px 14px', textAlign: 'right', color: 'var(--text)', verticalAlign: 'middle' };
|
||||
|
||||
return (
|
||||
<div className="fade-in" style={{ padding: '20px 24px' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 10, marginBottom: 16 }}>
|
||||
<h1 style={{ fontSize: 17, fontWeight: 800 }}>نوبت های رزرو شده</h1>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
{isClinic && (
|
||||
<select aria-label="پزشک" value={doctorUuid} onChange={e => setDoctorUuid(e.target.value)}
|
||||
style={{ height: 34, borderRadius: 'var(--r-sm)', border: '1px solid var(--border)', background: 'var(--surface)', fontSize: 13, fontFamily: 'inherit', padding: '0 10px' }}>
|
||||
<option value="">انتخاب پزشک...</option>
|
||||
{clinicDoctors.map(d => <option key={d.uuid} value={d.uuid}>{d.name}</option>)}
|
||||
</select>
|
||||
)}
|
||||
{primaryRole !== 'representation' && (
|
||||
<button className="btn primary sm" disabled={!doctorUuid}
|
||||
onClick={() => setDrawerOpen(true)} style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
|
||||
<PlusIcon style={{ width: 15 }} /> نوبت رزرو
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r)', overflow: 'hidden' }}>
|
||||
{isLoading ? (
|
||||
<div style={{ padding: 40, textAlign: 'center', color: 'var(--text-3)' }}>در حال بارگذاری...</div>
|
||||
) : items.length === 0 ? (
|
||||
<div style={{ padding: 40, textAlign: 'center', color: 'var(--text-3)' }}>نوبت رزروی ثبت نشده است</div>
|
||||
) : (
|
||||
<div style={{ overflowX: 'auto' }}>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
|
||||
<thead>
|
||||
<tr style={{ borderBottom: '1px solid var(--border)', background: 'var(--surface-2)' }}>
|
||||
<th style={th}>ردیف</th>
|
||||
<th style={th}>مراجعه کننده</th>
|
||||
<th style={th}>شماره تماس</th>
|
||||
<th style={th}>تاریخ</th>
|
||||
<th style={th}>سرویس</th>
|
||||
<th style={th}>پرسنل</th>
|
||||
<th style={th}>وضعیت</th>
|
||||
<th style={th}>عملیات</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{items.map((a, i) => (
|
||||
<tr key={a.uuid} style={{ borderBottom: '1px solid var(--border)' }}>
|
||||
<td style={td}>{((page - 1) * LIMIT + i + 1).toLocaleString('fa-IR')}</td>
|
||||
<td style={td}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
||||
<UserCircleIcon style={{ width: 18, color: 'var(--text-3)' }} />
|
||||
{a.patient_name || '—'}
|
||||
</div>
|
||||
</td>
|
||||
<td style={{ ...td, direction: 'ltr', textAlign: 'right' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 4, justifyContent: 'flex-end' }}>
|
||||
<PhoneIcon style={{ width: 14, color: 'var(--text-3)' }} />
|
||||
{a.patient_mobile}
|
||||
</div>
|
||||
</td>
|
||||
<td style={{ ...td, fontWeight: 600 }}>{formatDate(a.slot_start)}</td>
|
||||
<td style={td}>{a.service_item?.name || '—'}</td>
|
||||
<td style={td}>{a.staff?.full_name || '—'}</td>
|
||||
<td style={td}>
|
||||
<AppointmentStatusDropdown uuid={a.uuid} currentStatus={a.status} version={a.version} queryKey={queryKey} />
|
||||
</td>
|
||||
<td style={td}><ReserveRowMenu appointment={a} queryKey={queryKey} /></td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{total > LIMIT && (
|
||||
<div style={{ marginTop: 14 }}>
|
||||
<Pagination page={page} total={total} limit={LIMIT} onPageChange={setPage} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{drawerOpen && (
|
||||
<NewAppointmentDrawer
|
||||
doctorUuid={doctorUuid}
|
||||
defaultDate={defaultDate}
|
||||
queryKey={queryKey}
|
||||
onClose={() => setDrawerOpen(false)}
|
||||
isReserve
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user