hamedandClaude Opus 5
0074162bb1
The engine from tasks 06 and 07 could find slots and hold them, but nothing in the panel could actually book one. - Search, hold, confirm stay three separate steps because they are three separate states: between seeing a slot and taking it the seat is still open, and between taking and confirming there is a deadline - HoldCountdown reads the server's expires_at rather than starting its own timer at render: browser clock skew and network latency both cost seconds, and those seconds are exactly where a hold is lost. It turns urgent under a minute and tells the parent the moment it lapses - Per-role resource swap offers only the resources the engine returned for that same slot. Listing every resource in the branch would let an operator pick one that was never free and collect a 409 - An empty result is not an error: the reason code renders as a sentence saying what to change - Confirm requires a doctor and stays disabled until one is chosen — the endpoint rejects it anyway, and finding that out after the hold clock has been running is the wrong time Reached from the appointments page as a separate action rather than folded into the existing form: its search comes from the intersection of resource calendars, not from one doctor's slots, and merging the two would confuse both. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
332 lines
13 KiB
TypeScript
332 lines
13 KiB
TypeScript
import React, { useCallback, useMemo, useState } from 'react';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import PageHeader from '../components/ui/PageHeader';
|
||
import SearchableSelect from '../components/ui/SearchableSelect';
|
||
import HoldCountdown from '../components/HoldCountdown';
|
||
import { formatDate } from '../lib/utils';
|
||
import { useBranches } from '../hooks/useBranches';
|
||
import { useAllServiceItems } from '../hooks/useServiceCatalog';
|
||
import {
|
||
REASON_LABELS,
|
||
useAvailabilitySearch,
|
||
useHold,
|
||
type AvailableSlot,
|
||
type HoldResult,
|
||
} from '../hooks/useResourceBooking';
|
||
import { api, ApiError, type ApiResponse } from '../lib/api';
|
||
import { useQuery } from '@tanstack/react-query';
|
||
|
||
const DAY = 86400;
|
||
|
||
function timeOf(ts: number): string {
|
||
return new Date(ts * 1000).toLocaleTimeString('fa-IR', { hour: '2-digit', minute: '2-digit' });
|
||
}
|
||
|
||
/**
|
||
* رزرو نوبت در حالت منبعمحور.
|
||
*
|
||
* سه مرحلهٔ جدا و عمداً جدا: جستجو → گرفتن موقت → ثبت نهایی. بین دومی و سومی یک مهلت
|
||
* هست و صفحه آن را با شمارش معکوس نشان میدهد؛ رزروی که در سکوت منقضی شود، اپراتور را
|
||
* با یک ۴۰۹ بیتوضیح تنها میگذارد.
|
||
*/
|
||
export default function ResourceBookingPage() {
|
||
const navigate = useNavigate();
|
||
const { branches } = useBranches();
|
||
const { items: services } = useAllServiceItems();
|
||
const { create, release, confirm } = useHold();
|
||
|
||
const [serviceUuid, setServiceUuid] = useState('');
|
||
const [branchUuid, setBranchUuid] = useState('');
|
||
const [days, setDays] = useState('7');
|
||
const [searching, setSearching] = useState(false);
|
||
|
||
const [doctorUuid, setDoctorUuid] = useState('');
|
||
const [hold, setHold] = useState<HoldResult | null>(null);
|
||
const [expired, setExpired] = useState(false);
|
||
|
||
/** جایگزینی منبع per نقش، فقط برای همان زمانِ انتخابشده. */
|
||
const [picked, setPicked] = useState<Record<string, string[]> | null>(null);
|
||
const [pickedSlot, setPickedSlot] = useState<AvailableSlot | null>(null);
|
||
|
||
/**
|
||
* پزشکِ نوبت — ثبت نهایی بدونش ممکن نیست.
|
||
*
|
||
* منشی از اندپوینت احرازشده میگیرد تا فقط پزشکان تخصیصیافتهاش بیایند؛ همان
|
||
* قاعدهای که صفحهٔ نوبتها از قبل دارد.
|
||
*/
|
||
const doctorsQuery = useQuery<ApiResponse<{ data: { uuid: string; name: string }[] }>>({
|
||
queryKey: ['booking-doctors'],
|
||
queryFn: () => api.get('/api/v1/my/clinic-doctors'),
|
||
staleTime: 60_000,
|
||
});
|
||
|
||
const doctors = doctorsQuery.data?.data?.data ?? [];
|
||
|
||
const range = useMemo(() => {
|
||
const from = Math.floor(Date.now() / 1000);
|
||
return { from, to: from + Number(days) * DAY };
|
||
}, [days]);
|
||
|
||
const { result, loading, error } = useAvailabilitySearch(
|
||
{ serviceUuid, branchUuid, from: range.from, to: range.to },
|
||
searching,
|
||
);
|
||
|
||
const onExpired = useCallback(() => setExpired(true), []);
|
||
|
||
const chooseSlot = (slot: AvailableSlot) => {
|
||
setPickedSlot(slot);
|
||
setPicked(
|
||
Object.fromEntries(
|
||
Object.entries(slot.assignment).map(([role, resources]) => [role, resources.map((r) => r.uuid)]),
|
||
),
|
||
);
|
||
};
|
||
|
||
/**
|
||
* گزینههای جایگزین یک نقش: منابعی که در **همین زمان** پیشنهاد شدهاند.
|
||
*
|
||
* فهرست کاملِ منابع شعبه اینجا غلط است — منبعی که موتور برای این زمان نداده، آزاد
|
||
* نبوده، و نشان دادنش یعنی اپراتور چیزی انتخاب کند که ۴۰۹ میگیرد.
|
||
*/
|
||
const optionsFor = (role: string): { value: string; label: string }[] =>
|
||
(pickedSlot?.assignment[role] ?? []).map((r) => ({ value: r.uuid, label: r.name }));
|
||
|
||
const takeHold = async () => {
|
||
if (!pickedSlot || !picked) return;
|
||
|
||
const created = await create.mutateAsync({
|
||
service_uuid: serviceUuid,
|
||
branch_uuid: branchUuid,
|
||
start: pickedSlot.start,
|
||
assignment: picked,
|
||
});
|
||
|
||
setHold(created.data);
|
||
setExpired(false);
|
||
};
|
||
|
||
const reasonText = result?.reason ? REASON_LABELS[result.reason] ?? result.reason : null;
|
||
|
||
return (
|
||
<div className="fade-in">
|
||
<PageHeader
|
||
title="رزرو نوبت منبعمحور"
|
||
description="وقت آزاد از تقاطع تقویم منابع میآید؛ هر وقت با منابع پیشنهادی خودش نمایش داده میشود."
|
||
backTo="/admin/appointments"
|
||
/>
|
||
|
||
<div className="card" style={{ marginBottom: 16, display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'flex-end' }}>
|
||
<div className="field" style={{ minWidth: 220, margin: 0 }}>
|
||
<label>خدمت</label>
|
||
<SearchableSelect
|
||
value={serviceUuid}
|
||
onChange={(v) => {
|
||
setServiceUuid(String(v ?? ''));
|
||
setPickedSlot(null);
|
||
}}
|
||
options={services.map((s) => ({ value: s.uuid, label: s.name }))}
|
||
placeholder="انتخاب خدمت"
|
||
/>
|
||
</div>
|
||
|
||
<div className="field" style={{ minWidth: 200, margin: 0 }}>
|
||
<label>شعبه</label>
|
||
<SearchableSelect
|
||
value={branchUuid}
|
||
onChange={(v) => {
|
||
setBranchUuid(String(v ?? ''));
|
||
setPickedSlot(null);
|
||
}}
|
||
options={branches.map((b) => ({ value: b.uuid, label: b.name || 'بدون نام' }))}
|
||
placeholder="انتخاب شعبه"
|
||
/>
|
||
</div>
|
||
|
||
<div className="field" style={{ minWidth: 160, margin: 0 }}>
|
||
<label>بازه</label>
|
||
<SearchableSelect
|
||
value={days}
|
||
onChange={(v) => setDays(String(v ?? '7'))}
|
||
options={[
|
||
{ value: '7', label: 'یک هفته' },
|
||
{ value: '30', label: 'یک ماه' },
|
||
{ value: '90', label: 'سه ماه' },
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<button
|
||
type="button"
|
||
className="btn primary sm"
|
||
disabled={serviceUuid === '' || branchUuid === '' || loading}
|
||
onClick={() => setSearching(true)}
|
||
>
|
||
جستجوی وقت
|
||
</button>
|
||
</div>
|
||
|
||
{error && (
|
||
<div className="card" style={{ marginBottom: 16, fontSize: 13, color: 'var(--danger)' }}>
|
||
{error instanceof ApiError ? error.message : 'جستجوی وقت ناموفق بود'}
|
||
</div>
|
||
)}
|
||
|
||
{result && (
|
||
<div className="card" style={{ marginBottom: 16, display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||
<div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', fontSize: 14 }}>
|
||
<span>
|
||
مدت نوبت: <strong>{result.plan.total_minutes}</strong> دقیقه
|
||
</span>
|
||
<span style={{ color: 'var(--text-2)' }}>
|
||
{result.plan.segments.length} بخش · {result.slots.length} وقت پیدا شد
|
||
</span>
|
||
</div>
|
||
|
||
{/* فهرست خالی خطا نیست؛ دلیلش را میگوییم تا کاربر حدس نزند. */}
|
||
{result.slots.length === 0 && reasonText && (
|
||
<span style={{ fontSize: 13, color: 'var(--warning)' }}>{reasonText}</span>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{result && result.slots.length > 0 && (
|
||
<div style={{ overflowX: 'auto' }} className="card">
|
||
<table style={{ width: '100%', fontSize: 13, borderCollapse: 'collapse', minWidth: 520 }}>
|
||
<thead>
|
||
<tr style={{ color: 'var(--text-3)', textAlign: 'right' }}>
|
||
<th style={{ padding: '8px 6px', fontWeight: 500 }}>تاریخ</th>
|
||
<th style={{ padding: '8px 6px', fontWeight: 500 }}>ساعت</th>
|
||
<th style={{ padding: '8px 6px', fontWeight: 500 }}>منابع پیشنهادی</th>
|
||
<th style={{ padding: '8px 6px', fontWeight: 500 }} />
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{result.slots.slice(0, 100).map((slot) => (
|
||
<tr
|
||
key={slot.start}
|
||
style={{
|
||
borderTop: '1px solid var(--border)',
|
||
background: pickedSlot?.start === slot.start ? 'var(--primary-soft)' : undefined,
|
||
}}
|
||
>
|
||
<td style={{ padding: '8px 6px' }}>{formatDate(slot.start)}</td>
|
||
<td style={{ padding: '8px 6px' }} dir="ltr">
|
||
{timeOf(slot.start)} – {timeOf(slot.end)}
|
||
</td>
|
||
<td style={{ padding: '8px 6px', color: 'var(--text-2)' }}>
|
||
{Object.values(slot.assignment)
|
||
.flat()
|
||
.map((r) => r.name)
|
||
.join('، ')}
|
||
</td>
|
||
<td style={{ padding: '8px 6px' }}>
|
||
<button
|
||
type="button"
|
||
className="btn secondary sm"
|
||
disabled={hold !== null}
|
||
onClick={() => chooseSlot(slot)}
|
||
>
|
||
انتخاب
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
)}
|
||
|
||
{pickedSlot && (
|
||
<div className="card" style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
|
||
<h3 style={{ fontSize: 15, margin: 0 }}>
|
||
{formatDate(pickedSlot.start)} · <span dir="ltr">{timeOf(pickedSlot.start)}</span>
|
||
</h3>
|
||
{hold && !expired && <HoldCountdown expiresAt={hold.expires_at} onExpired={onExpired} />}
|
||
{expired && (
|
||
<span className="badge red">
|
||
<span className="bdot" />
|
||
مهلت تمام شد — دوباره جستجو کنید
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||
{Object.entries(pickedSlot.assignment).map(([role, resources]) => (
|
||
<div key={role} style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
|
||
<span style={{ fontSize: 13, minWidth: 90, color: 'var(--text-2)' }}>{role}</span>
|
||
<div style={{ minWidth: 220 }}>
|
||
<SearchableSelect
|
||
value={picked?.[role]?.[0] ?? resources[0]?.uuid ?? ''}
|
||
onChange={(v) =>
|
||
setPicked((prev) => ({ ...(prev ?? {}), [role]: [String(v ?? '')] }))
|
||
}
|
||
options={optionsFor(role)}
|
||
isDisabled={hold !== null}
|
||
/>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<span style={{ fontSize: 12, color: 'var(--text-3)' }}>
|
||
فهرست هر نقش فقط منابعی است که در همین زمان آزادند؛ تخصیص منابع به بیمار
|
||
نمایش داده نمیشود.
|
||
</span>
|
||
|
||
<div className="field" style={{ maxWidth: 280, margin: 0 }}>
|
||
<label>پزشک نوبت</label>
|
||
<SearchableSelect
|
||
value={doctorUuid}
|
||
onChange={(v) => setDoctorUuid(String(v ?? ''))}
|
||
options={doctors.map((d) => ({ value: d.uuid, label: d.name }))}
|
||
placeholder="انتخاب پزشک"
|
||
/>
|
||
</div>
|
||
|
||
<div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
|
||
{hold === null ? (
|
||
<button
|
||
type="button"
|
||
className="btn primary"
|
||
disabled={create.isPending}
|
||
onClick={takeHold}
|
||
>
|
||
نگهداشتن این زمان
|
||
</button>
|
||
) : (
|
||
<>
|
||
<button
|
||
type="button"
|
||
className="btn primary"
|
||
disabled={expired || doctorUuid === '' || confirm.isPending}
|
||
onClick={async () => {
|
||
await confirm.mutateAsync({ hold_uuid: hold.hold_uuid, doctor_uuid: doctorUuid });
|
||
navigate('/admin/appointments');
|
||
}}
|
||
>
|
||
ثبت نهایی نوبت
|
||
</button>
|
||
|
||
<button
|
||
type="button"
|
||
className="btn secondary"
|
||
disabled={release.isPending}
|
||
onClick={async () => {
|
||
await release.mutateAsync(hold.hold_uuid);
|
||
setHold(null);
|
||
setPickedSlot(null);
|
||
}}
|
||
>
|
||
آزادکردن
|
||
</button>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|