hamedandClaude Opus 4.8
1a783971c9
Replace the placeholder row list on the patient detail «نوبتها» tab with the
card-grid design ported pixel-for-pixel from clinic-pro-tauri TurnsSection:
- New AppointmentTurnCard mirrors tauri TurnsCard (success icon, title, date/time
chips, personnel, status). Status uses the live AppointmentStatusDropdown
instead of the tauri mock.
- New AppointmentsTab in PatientDetailPage: sort/filter toolbar (client-side) +
reserve/new buttons linking to existing /admin/appointments pages + card grid.
- Add CalendarD/ClockP/UserD/StatusGlobe icons (verbatim from tauri).
- Backend: expose version on GET /patient/{uuid}/appointments so the status
dropdown can optimistic-lock. No new endpoint.
- Tests: PatientAppointmentsTest (shape/version/order/empty/ownership) +
AppointmentTurnCard + tab data/empty cases. docs/api/patient.md updated.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
94 lines
3.9 KiB
TypeScript
94 lines
3.9 KiB
TypeScript
import type { CSSProperties, ReactNode } from 'react';
|
|
import { formatDate, formatTime } from '../lib/utils';
|
|
import {
|
|
FilesServiceSuccess, FilesServiceMore, CalendarD, ClockP, UserD, StatusGlobe,
|
|
} from './icons/FilesServiceIcons';
|
|
import AppointmentStatusDropdown from './ui/AppointmentStatusDropdown';
|
|
|
|
export interface AppointmentCardData {
|
|
uuid: string;
|
|
starts_at: number;
|
|
status: string;
|
|
version: number;
|
|
doctor_name?: string | null;
|
|
service_name?: string | null;
|
|
}
|
|
|
|
/**
|
|
* label/value row inside the turn card — mirrors tauri ServiceInfoRow
|
|
* (separatedValues variant): icon+label on one side, value (optionally chip) on
|
|
* the other.
|
|
*/
|
|
function InfoRow({ icon, label, value, chip = false, valueStyle }: {
|
|
icon: ReactNode; label: string; value: ReactNode; chip?: boolean; valueStyle?: CSSProperties;
|
|
}) {
|
|
return (
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
|
{icon}
|
|
<span className="dark:text-[#A1A1A1]" style={{ fontSize: 12, color: '#616161' }}>{label}:</span>
|
|
</div>
|
|
<span
|
|
className={chip ? 'dark:bg-[#404040] dark:text-[#D7D8ED]' : 'dark:text-[#D7D8ED]'}
|
|
style={{
|
|
fontSize: 12, color: '#525252', textAlign: 'left',
|
|
...(chip ? { background: '#efefef', borderRadius: 8, padding: '2px 8px', color: '#2f2f2f' } : {}),
|
|
...valueStyle,
|
|
}}
|
|
>
|
|
{value}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* A patient «نوبت» card — ported pixel-for-pixel from tauri
|
|
* files/services/TurnsCard. The status uses the admin's live
|
|
* AppointmentStatusDropdown (backed by PATCH /appointment/{uuid}/status)
|
|
* instead of the tauri mock.
|
|
*/
|
|
export default function AppointmentTurnCard({ appointment, queryKey }: {
|
|
appointment: AppointmentCardData;
|
|
queryKey: unknown[];
|
|
}) {
|
|
const title = appointment.service_name || 'نوبت';
|
|
return (
|
|
<div
|
|
className="bg-white dark:bg-[#222433] border border-[#EDEDED] dark:border-[#35343D]"
|
|
style={{ width: 277, maxWidth: '100%', minHeight: 249, borderRadius: 12, padding: 14, display: 'flex', flexDirection: 'column', gap: 10, boxShadow: '0 1px 6px rgba(15,23,42,0.06)' }}
|
|
>
|
|
{/* Header */}
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 2 }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
|
|
<FilesServiceSuccess />
|
|
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 3, minWidth: 0 }}>
|
|
<span className="dark:text-[#D7D8ED]" style={{ fontSize: 14, fontWeight: 600, color: '#525252', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: 180 }}>{title}</span>
|
|
</div>
|
|
</div>
|
|
<FilesServiceMore style={{ color: '#9CA3AF', flexShrink: 0 }} />
|
|
</div>
|
|
|
|
<div className="dark:border-[#35343D]" style={{ borderTop: '1px solid #F1F1F1' }} />
|
|
|
|
{/* Middle: date & time chips */}
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
|
<InfoRow icon={<CalendarD />} label="تاریخ" chip value={formatDate(appointment.starts_at)} />
|
|
<InfoRow icon={<ClockP />} label="ساعت" chip value={formatTime(appointment.starts_at)} />
|
|
</div>
|
|
|
|
<div className="dark:border-[#35343D]" style={{ borderTop: '1px solid #F1F1F1' }} />
|
|
|
|
{/* Bottom: personnel & status */}
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
|
|
<InfoRow icon={<UserD size={19} />} label="پرسنل" value={appointment.doctor_name || '—'} valueStyle={{ fontWeight: 500 }} />
|
|
<InfoRow
|
|
icon={<StatusGlobe size={19} />}
|
|
label="وضعیت"
|
|
value={<AppointmentStatusDropdown uuid={appointment.uuid} currentStatus={appointment.status} version={appointment.version} queryKey={queryKey} />}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|