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>
57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
|
|
interface Props {
|
|
expiresAt: number;
|
|
onExpired: () => void;
|
|
}
|
|
|
|
/**
|
|
* شمارش معکوس مهلت رزرو موقت.
|
|
*
|
|
* بدون این، اپراتور نمیداند چقدر وقت دارد و رزرو در سکوت منقضی میشود — بعد کلیک
|
|
* «ثبت» یک ۴۰۹ میگیرد که هیچجا توضیحش را ندیده.
|
|
*
|
|
* مبنا `expires_at` سرور است، نه شمارندهای که از لحظهٔ رندر شروع شود: ساعت مرورگر و
|
|
* تأخیر شبکه هر دو میتوانند چند ثانیه اختلاف بسازند و آن چند ثانیه دقیقاً همانجایی
|
|
* است که رزرو از دست میرود.
|
|
*/
|
|
export default function HoldCountdown({ expiresAt, onExpired }: Props) {
|
|
const [remaining, setRemaining] = useState(() => expiresAt - Math.floor(Date.now() / 1000));
|
|
|
|
useEffect(() => {
|
|
const tick = () => {
|
|
const left = expiresAt - Math.floor(Date.now() / 1000);
|
|
setRemaining(left);
|
|
|
|
if (left <= 0) onExpired();
|
|
};
|
|
|
|
tick();
|
|
const timer = setInterval(tick, 1000);
|
|
|
|
return () => clearInterval(timer);
|
|
}, [expiresAt, onExpired]);
|
|
|
|
if (remaining <= 0) {
|
|
return (
|
|
<span className="badge red">
|
|
<span className="bdot" />
|
|
مهلت تمام شد
|
|
</span>
|
|
);
|
|
}
|
|
|
|
const minutes = Math.floor(remaining / 60);
|
|
const seconds = remaining % 60;
|
|
|
|
// زیر یک دقیقه هشدار میگیرد؛ همان لحظهای که اپراتور باید تصمیمش را بگیرد.
|
|
const urgent = remaining < 60;
|
|
|
|
return (
|
|
<span className={urgent ? 'badge red' : 'badge amber'}>
|
|
<span className="bdot" />
|
|
مهلت ثبت: {minutes}:{String(seconds).padStart(2, '0')}
|
|
</span>
|
|
);
|
|
}
|