Реалізація вибору часу та дати для бронювання
Вибір часу та дати — двохшаговий UI: спочатку дата в календарі, потім доступні часові слоти. Ключові вимоги: відображення тільки реально вільного часу, оновлення в реальному часі при одночасних бронюваннях, коректна робота з часовими поясами.
Часові слоти
function TimeSlotPicker({ resourceId, date, onSelect }: Props) {
const { data: slots, isLoading } = useQuery({
queryKey: ['slots', resourceId, format(date, 'yyyy-MM-dd')],
queryFn: () => fetchTimeSlots(resourceId, date),
});
if (isLoading) return <SlotsSkeleton />;
const grouped = groupBy(slots, slot =>
slot.datetime.getHours() < 13 ? 'morning' : 'afternoon'
);
return (
<div className="space-y-4">
{grouped.morning && (
<div>
<p className="text-sm text-gray-500 mb-2">Ранок</p>
<div className="grid grid-cols-4 gap-2">
{grouped.morning.map(slot => (
<button
key={slot.id}
disabled={!slot.available}
onClick={() => onSelect(slot)}
className={cn(
'py-2 rounded-lg text-sm border transition',
slot.available
? 'border-blue-200 hover:bg-blue-50 hover:border-blue-500'
: 'border-gray-100 text-gray-300 cursor-not-allowed'
)}
>
{format(slot.datetime, 'HH:mm')}
</button>
))}
</div>
</div>
)}
</div>
);
}
Часові пояси
Сервер зберігає час в UTC. Клієнт відображає в локальному часі користувача:
// Конвертація серверного UTC в локальний час користувача
const localSlot = utcToZonedTime(slot.datetime_utc, userTimezone);
const displayTime = format(localSlot, 'HH:mm', { timeZone: userTimezone });
Для мультирегіональних сервісів — явний вибір часового поясу клієнтом.
Захист від двійного бронювання
Песимістичне блокування: слот тимчасово резервується на 10 хвилин при спробі бронювання, знімається при скасуванні або завершенні процесу.
Час реалізації: 2–3 робочих дні.