popertots/Crussell
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: admin BookingCreateModal to use shared time slot utilities

Browse Source 
Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
popertots
2026-05-28 16:30:32 +01:00
co-authored by Sisyphus
parent efbcfbaaf0
commit 6cf1f12442
1 changed files with 159 additions and 414 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/admin/BookingCreateModal.svelte
+137 -392
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { authStore } from '$lib/stores/auth.svelte';
import { toast } from 'svelte-sonner';
import { SvelteMap, SvelteDate } from 'svelte/reactivity';
import { SvelteDate } from 'svelte/reactivity';
import { CalendarDate, getLocalTimeZone, type DateValue } from '@internationalized/date';
// UI Components
@@ -18,11 +18,22 @@
import BookingActions from '$lib/components/booking/BookingActions.svelte';
import ServiceSelector from '$lib/components/booking/ServiceSelector.svelte';
import DatePicker from '$lib/components/booking/DatePicker.svelte';
import TimeSlotList from '$lib/components/booking/TimeSlotList.svelte';
import SelectedTimeSummary from '$lib/components/booking/SelectedTimeSummary.svelte';
// Types
import type { Service, WorkingHoursDay, AvailableHoursDay } from '$lib/types/booking';
import { extractBookedSlots, getLunchProtectionForSlots } from '$lib/lunchProtection';
import {
buildLunchProtection,
generateAvailableTimeSlots,
generateGroupedTimeSlots,
formatTime,
calculateEndTime,
getDayWithOrdinal,
type DayHours,
type DayAvailability
} from '$lib/utils/timeSlots';
// =============== Props ===============
interface Props {
@@ -67,16 +78,12 @@
);
let selectedDate = $state<CalendarDate | undefined>(undefined);
let selectedTime = $state<string | null>(null);
let workingHours = $state<Record<
string,
{ isOpen: boolean; startTime: string; endTime: string }
> | null>(null);
let availableHours = $state<Record<
string,
{ isOpen: boolean; slots: Array<{ startTime: string; endTime: string }> }
> | null>(null);
let workingHours = $state<Record<string, DayHours> | null>(null);
let availableHours = $state<Record<string, DayAvailability> | null>(null);
let loadingWorkingHours = $state(false);
let loadingAvailableHours = $state(false);
let hoursRangeGeneration = $state(0);
let hoursMonthGeneration = $state(0);
// Date Boundaries
const today = new SvelteDate();
@@ -98,8 +105,9 @@
let isReserving = $state(false);
// =============== Cache ===============
const workingHoursCache = new SvelteMap<string, Record<string, any>>();
const availableHoursCache = new SvelteMap<string, Record<string, any>>();
let workingHoursCache: Record<string, Record<string, any>> = {};
let availableHoursCache: Record<string, Record<string, any>> = {};
let loadingMonthKeys: Set<string> = new Set();
// =============== Derived Helpers ===============
function getTotalDuration() {
@@ -120,68 +128,19 @@
}
// =============== Lunch Protection ===============
const lunchProtectionStatus = $derived(() => {
if (!selectedDate || !workingHours || !availableHours || selectedServices.length === 0) {
return new Map();
}
const dateStr = selectedDate.toString();
const dayWorkingHours = workingHours[dateStr];
const dayAvailableHours = availableHours[dateStr];
if (!dayWorkingHours?.isOpen || !dayAvailableHours?.slots) {
return new Map();
}
const existingBookings = extractBookedSlots(
dayWorkingHours.startTime,
dayWorkingHours.endTime,
dayAvailableHours.slots
const lunchProtection = $derived(
(selectedDate && selectedServices.length > 0)
? buildLunchProtection(selectedDate, workingHours, availableHours, getTotalDuration(), true)
: new Map()
);
return getLunchProtectionForSlots(
dayWorkingHours.startTime,
dayWorkingHours.endTime,
existingBookings,
getTotalDuration(),
15,
true // Admin journey - 30min minimum, warn if <1h
);
});
function formatDuration(minutes: number): string {
const hours = Math.floor(minutes / 60);
const remainingMinutes = minutes % 60;
if (hours === 0) {
return `${remainingMinutes} minutes`;
} else if (remainingMinutes === 0) {
return `${hours} ${hours === 1 ? 'hour' : 'hours'}`;
} else {
if (hours === 0) return `${remainingMinutes} minutes`;
if (remainingMinutes === 0) return `${hours} ${hours === 1 ? 'hour' : 'hours'}`;
return `${hours} ${hours === 1 ? 'hour' : 'hours'} ${remainingMinutes} minutes`;
}
}
function getDayWithOrdinal(date: CalendarDate): string {
const monthName = new SvelteDate(date.year, date.month - 1, date.day).toLocaleDateString(
'en-GB',
{
month: 'long'
}
);
const day = date.day;
if (day > 3 && day < 21) return monthName + ' ' + day + 'th';
switch (day % 10) {
case 1:
return monthName + ' ' + day + 'st';
case 2:
return monthName + ' ' + day + 'nd';
case 3:
return monthName + ' ' + day + 'rd';
default:
return monthName + ' ' + day + 'th';
}
}
const formattedTotalDuration = $derived(formatDuration(getTotalDuration()));
const formattedSelectedDate = $derived(
@@ -197,7 +156,7 @@
// =============== Effects ===============
let wasOpen = false;
let bookingCreateInitialLoadDone = $state(false);
let userNavigatedCalendar = $state(false);
$effect(() => {
if (open && !wasOpen) {
@@ -216,24 +175,56 @@
}
});
// Preload 3 months when entering step 4 to prevent snap-back
// Preload current + next month on entering step 4; individual months fetched on navigation
let bookingCreateInitialLoadDone = $state(false);
$effect(() => {
if (open && currentStep === 4 && !bookingCreateInitialLoadDone) {
fetchHoursRange(placeholder, 3);
fetchHoursRange(placeholder, 2);
bookingCreateInitialLoadDone = true;
}
});
// Fetch additional months when navigating beyond preloaded range
// Safety net: fetch when navigating to an uncached month
$effect(() => {
if (open && currentStep === 4 && bookingCreateInitialLoadDone && placeholder) {
if (open && currentStep === 4 && bookingCreateInitialLoadDone) {
const monthKey = `${placeholder.year}-${String(placeholder.month).padStart(2, '0')}`;
if (!workingHoursCache.has(monthKey)) {
if (!(monthKey in workingHoursCache) && !loadingMonthKeys.has(monthKey)) {
fetchHoursForMonth(placeholder);
}
}
});
// Auto-select first available date once data loads (timing-safe, data-driven)
let bookingCreateAutoSelectDone = $state(false);
$effect(() => {
if (open && currentStep === 4 && workingHours && availableHours && !selectedDate && selectedServices.length > 0 && !userNavigatedCalendar && !bookingCreateAutoSelectDone) {
bookingCreateAutoSelectDone = true;
const now = new SvelteDate();
const maxDateJs = new SvelteDate(
maxCalendarDate.year,
maxCalendarDate.month - 1,
maxCalendarDate.day
);
const daysDifference = Math.floor(
(maxDateJs.getTime() - now.getTime()) / (1000 * 60 * 60 * 24)
);
const daysToCheck = Math.min(daysDifference, 180);
for (let i = 0; i <= daysToCheck; i++) {
const checkDate = new SvelteDate(now);
checkDate.setDate(now.getDate() + i);
const dateStr = checkDate.toISOString().split('T')[0];
const calDate = new CalendarDate(checkDate.getFullYear(), checkDate.getMonth() + 1, checkDate.getDate());
if (workingHours[dateStr]?.isOpen && !isDateUnavailable(calDate)) {
selectedDate = calDate;
if (!userNavigatedCalendar) {
placeholder = new CalendarDate(checkDate.getFullYear(), checkDate.getMonth() + 1, 1);
}
break;
}
}
}
});
// =============== Reset State ===============
function resetState() {
currentStep = 1;
@@ -248,11 +239,14 @@
selectedTime = null;
notes = '';
serviceOverrides = {};
workingHoursCache.clear();
availableHoursCache.clear();
workingHoursCache = {};
availableHoursCache = {};
workingHours = null;
availableHours = null;
bookingCreateInitialLoadDone = false;
userNavigatedCalendar = false;
bookingCreateAutoSelectDone = false;
loadingMonthKeys = new Set();
// Clear reservation state
reservationId = null;
reservationExpiresAt = null;
@@ -325,6 +319,9 @@
const startStr = startDate.toString();
const endStr = `${endYear}-${String(endMonth).padStart(2, '0')}-${String(daysInEndMonth).padStart(2, '0')}`;
hoursRangeGeneration++;
const gen = hoursRangeGeneration;
loadingWorkingHours = true;
loadingAvailableHours = true;
@@ -348,6 +345,8 @@
whData.forEach((d) => (whMap[d.date] = { isOpen: d.isOpen, startTime: d.startTime, endTime: d.endTime }));
ahData.forEach((d) => (ahMap[d.date] = { isOpen: d.isOpen, slots: d.slots }));
if (gen !== hoursRangeGeneration) return; // Stale response, discard
// Cache by month key
for (let i = 0; i < months; i++) {
let mYear = startDate.year;
@@ -357,12 +356,13 @@
mYear++;
}
const key = `${mYear}-${String(mMonth).padStart(2, '0')}`;
workingHoursCache.set(key, whMap);
availableHoursCache.set(key, ahMap);
workingHoursCache[key] = whMap;
availableHoursCache[key] = ahMap;
}
workingHours = whMap;
availableHours = ahMap;
// MERGE instead of replace — preserves data from previously loaded months
workingHours = { ...workingHours, ...whMap };
availableHours = { ...availableHours, ...ahMap };
}
} catch (err) {
console.error('Failed to fetch hours', err);
@@ -376,12 +376,20 @@
async function fetchHoursForMonth(date: CalendarDate) {
const monthKey = `${date.year}-${String(date.month).padStart(2, '0')}`;
if (workingHoursCache.has(monthKey) && availableHoursCache.has(monthKey)) {
workingHours = workingHoursCache.get(monthKey)!;
availableHours = availableHoursCache.get(monthKey)!;
if (monthKey in workingHoursCache && monthKey in availableHoursCache) {
// MERGE instead of replace — preserves data from other loaded months
workingHours = { ...workingHours, ...workingHoursCache[monthKey] };
availableHours = { ...availableHours, ...availableHoursCache[monthKey] };
return;
}
// Prevent re-entrant calls for the same month
if (loadingMonthKeys.has(monthKey)) return;
loadingMonthKeys = new Set(loadingMonthKeys).add(monthKey);
hoursMonthGeneration++;
const gen = hoursMonthGeneration;
loadingWorkingHours = true;
loadingAvailableHours = true;
@@ -414,10 +422,12 @@
);
ahData.forEach((d) => (ahMap[d.date] = { isOpen: d.isOpen, slots: d.slots }));
workingHoursCache.set(monthKey, whMap);
availableHoursCache.set(monthKey, ahMap);
workingHours = whMap;
availableHours = ahMap;
if (gen !== hoursMonthGeneration) return; // Stale response, discard
workingHoursCache[monthKey] = whMap;
availableHoursCache[monthKey] = ahMap;
workingHours = { ...workingHours, ...whMap };
availableHours = { ...availableHours, ...ahMap };
}
} catch (err) {
console.error('Failed to fetch hours', err);
@@ -425,6 +435,7 @@
} finally {
loadingWorkingHours = false;
loadingAvailableHours = false;
loadingMonthKeys = new Set([...loadingMonthKeys].filter(k => k !== monthKey));
}
}
@@ -562,216 +573,9 @@
selectedTime = null;
}
// Time Slot Generation
function calculateEndTime(startTime: string, durationMinutes: number): string {
const [hours, minutes] = startTime.split(':').map(Number);
const totalMinutes = hours * 60 + minutes + durationMinutes;
const endHours = Math.floor(totalMinutes / 60);
const endMinutes = totalMinutes % 60;
return `${String(endHours).padStart(2, '0')}:${String(endMinutes).padStart(2, '0')}`;
}
function timeToMinutes(time: string): number {
const [hours, minutes] = time.split(':').map(Number);
return hours * 60 + minutes;
}
function calculatePreviousTime(time: string): string {
const [hours, minutes] = time.split(':').map(Number);
let totalMinutes = hours * 60 + minutes;
totalMinutes -= 15;
const prevHours = Math.floor(totalMinutes / 60);
const prevMinutes = totalMinutes % 60;
return `${String(prevHours).padStart(2, '0')}:${String(prevMinutes).padStart(2, '0')}`;
}
function formatTime(time: string): string {
const parts = time.split(':').map(Number);
const hours = parts[0];
const minutes = parts.length > 1 ? parts[1] : 0;
if (hours === 12 && minutes === 0) {
return 'Noon';
} else if (hours === 0 && minutes === 0) {
return 'Midnight';
}
const period = hours >= 12 ? 'PM' : 'AM';
const displayHours = hours % 12 || 12;
return `${displayHours}:${minutes.toString().padStart(2, '0')} ${period}`;
}
function normalizeTime(time: string): string {
// Strip seconds if present (convert HH:MM:SS to HH:MM)
const parts = time.split(':');
return `${parts[0]}:${parts[1]}`;
}
function generateAvailableTimeSlots(duration: number, date: CalendarDate | undefined): string[] {
if (!date || !workingHours || !availableHours) return [];
const dateStr = date.toString();
const dayWorkingHours = workingHours[dateStr];
const dayAvailableHours = availableHours[dateStr];
if (!dayWorkingHours?.isOpen || !dayAvailableHours?.slots) return [];
const slots: string[] = [];
const now = new SvelteDate();
const today = new CalendarDate(now.getFullYear(), now.getMonth() + 1, now.getDate());
const isToday = date.compare(today) === 0;
const protection = lunchProtectionStatus();
for (const slot of dayAvailableHours.slots) {
const [startHour, startMinute] = slot.startTime.split(':').map(Number);
const [endHour, endMinute] = slot.endTime.split(':').map(Number);
let startTotalMinutes = startHour * 60 + startMinute;
const endTotalMinutes = endHour * 60 + endMinute;
if (isToday) {
// Calculate current time + buffer
const currentMinutes = now.getHours() * 60 + now.getMinutes();
let minimumStart = currentMinutes + 15;
// FIX: Snap to the NEXT 15-minute interval
// Math.ceil(x / 15) * 15 rounds up to the nearest 15
minimumStart = Math.ceil(minimumStart / 15) * 15;
startTotalMinutes = Math.max(startTotalMinutes, minimumStart);
}
for (let minutes = startTotalMinutes; minutes < endTotalMinutes; minutes += 15) {
const slotEndMinutes = minutes + duration;
if (slotEndMinutes <= endTotalMinutes) {
const hour = Math.floor(minutes / 60);
const minute = minutes % 60;
const timeStr = `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;
const protectionResult = protection.get(timeStr);
if (!protectionResult || !protectionResult.isBlocked) {
slots.push(timeStr);
}
// If blocked, skip adding this slot
}
}
}
return slots;
}
function generateGroupedTimeSlots(
duration: number,
date: CalendarDate | undefined
): Array<{
type: 'available' | 'unavailable';
startTime: string;
endTime: string;
isGrouped?: boolean;
}> {
if (!date || !workingHours) return [];
const dateStr = date.toString();
const dayWorkingHours = workingHours[dateStr];
if (!dayWorkingHours || !dayWorkingHours.isOpen) return [];
const groupedSlots: Array<{
type: 'available' | 'unavailable';
startTime: string;
endTime: string;
isGrouped?: boolean;
}> = [];
const [startHour, startMinute] = dayWorkingHours.startTime.split(':').map(Number);
const [endHour, endMinute] = dayWorkingHours.endTime.split(':').map(Number);
let startTotalMinutes = startHour * 60 + startMinute;
const endTotalMinutes = endHour * 60 + endMinute;
const now = new SvelteDate();
const today = new CalendarDate(now.getFullYear(), now.getMonth() + 1, now.getDate());
const isToday = date.compare(today) === 0;
if (isToday) {
const currentMinutes = now.getHours() * 60 + now.getMinutes();
let minimumStart = currentMinutes + 15;
// FIX: Also snap here so the visual blocks start at 00, 15, 30, 45
minimumStart = Math.ceil(minimumStart / 15) * 15;
startTotalMinutes = Math.max(startTotalMinutes, minimumStart);
}
const availableSlots = generateAvailableTimeSlots(duration, date);
let currentUnavailableStart: string | null = null;
let lastAvailableEndTime: string | null = null;
const protection = lunchProtectionStatus();
for (let minutes = startTotalMinutes; minutes < endTotalMinutes; minutes += 15) {
const hour = Math.floor(minutes / 60);
const minute = minutes % 60;
const timeStr = `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;
const isInAvailableSlots = availableSlots.includes(timeStr);
const protectionResult = protection.get(timeStr);
const isLunchBlocked = protectionResult?.isBlocked || false;
const isAvailable = isInAvailableSlots && !isLunchBlocked;
if (isAvailable) {
if (currentUnavailableStart !== null) {
const unavailableStartTime = lastAvailableEndTime || currentUnavailableStart;
const groupEndTime = calculatePreviousTime(timeStr);
if (timeToMinutes(unavailableStartTime) < timeToMinutes(groupEndTime)) {
groupedSlots.push({
type: 'unavailable',
startTime: unavailableStartTime,
endTime: groupEndTime,
isGrouped: true
});
}
currentUnavailableStart = null;
}
const slotEndTime = calculateEndTime(timeStr, duration);
lastAvailableEndTime = slotEndTime;
groupedSlots.push({
type: 'available',
startTime: timeStr,
endTime: slotEndTime
});
if (timeToMinutes(slotEndTime) >= endTotalMinutes) break;
} else {
if (currentUnavailableStart === null) {
currentUnavailableStart = timeStr;
}
}
}
if (currentUnavailableStart !== null) {
const lastAvailableSlot = groupedSlots.filter((s) => s.type === 'available').pop();
const lastAvailableEnd = lastAvailableSlot ? timeToMinutes(lastAvailableSlot.endTime) : 0;
const unavailableStartMinutes = timeToMinutes(currentUnavailableStart);
if (unavailableStartMinutes < endTotalMinutes && lastAvailableEnd < endTotalMinutes) {
const unavailableStartTime = lastAvailableSlot
? lastAvailableSlot.endTime
: currentUnavailableStart;
groupedSlots.push({
type: 'unavailable',
startTime: unavailableStartTime,
endTime: normalizeTime(dayWorkingHours.endTime),
isGrouped: true
});
}
}
return groupedSlots;
}
const groupedTimeSlots = $derived(
currentStep === 4 && selectedServices.length > 0 && selectedDate
? generateGroupedTimeSlots(getTotalDuration(), selectedDate)
? generateGroupedTimeSlots(selectedDate, workingHours, availableHours, getTotalDuration(), lunchProtection)
: []
);
@@ -784,30 +588,20 @@
const dayHours = workingHours[dateStr];
if (!dayHours?.isOpen) return true;
if (selectedServices.length > 0) {
const duration = getTotalDuration();
const slots = generateAvailableTimeSlots(duration, date);
if (slots.length === 0) return true;
// No available hours data for this date = data not loaded = unavailable
if (!availableHours?.[dateStr]) return true;
// API returned empty slots = no availability at all
if (!availableHours[dateStr].slots || availableHours[dateStr].slots.length === 0) return true;
const dayAvailableHours = availableHours?.[dateStr];
if (dayAvailableHours?.slots) {
const existingBookings = extractBookedSlots(
dayHours.startTime,
dayHours.endTime,
dayAvailableHours.slots
);
const lunchProtection = getLunchProtectionForSlots(
dayHours.startTime,
dayHours.endTime,
existingBookings,
duration,
15,
true
);
const validSlots = slots.filter((t) => !lunchProtection.get(t)?.isBlocked);
if (validSlots.length === 0) return true;
}
}
// Determine the duration to check: if services are selected use their total,
// otherwise use a minimum of 15 minutes (any meaningful booking needs at least this)
const duration = selectedServices.length > 0 ? getTotalDuration() : 15;
if (duration <= 0) return true;
// Build lunch protection specifically for the date being checked
const dayProtection = buildLunchProtection(date as CalendarDate, workingHours, availableHours, duration, true);
const slots = generateAvailableTimeSlots(date as CalendarDate, workingHours, availableHours, duration, dayProtection);
if (slots.length === 0) return true;
return false;
}
@@ -894,6 +688,7 @@
if (res.ok) {
toast.success('Booking created successfully!');
open = false;
window.dispatchEvent(new CustomEvent('bookingApproved'));
onBookingCreated?.();
} else {
const errorText = await res.text();
@@ -934,12 +729,12 @@
// Clear date/time and cache when duration changes
selectedDate = undefined;
selectedTime = null;
availableHoursCache.clear();
availableHoursCache = {};
}
</script>
<Modal.Root bind:open>
<Modal.Content class="max-h-[90vh] max-w-4xl overflow-y-auto">
<Modal.Content class="max-h-[90vh] max-w-[calc(100%-2rem)] overflow-y-auto sm:max-w-2xl md:max-w-4xl">
<Modal.Header>
<Modal.Title>Create Admin Booking</Modal.Title>
<Modal.Description>
@@ -1205,7 +1000,7 @@
{#if serviceOverrides[service.id]}
<div class="rounded-lg border bg-white p-4">
<div class="mb-3 font-medium">{service.name}</div>
<div class="grid grid-cols-2 gap-4">
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div class="space-y-2">
<Label for="price-{service.id}" class="text-xs text-gray-600"
>Price (£)</Label
@@ -1317,11 +1112,6 @@
</div>
</div>
{/if}
{#if loadingWorkingHours}
<div class="flex items-center justify-center p-6">
<p>Loading available dates...</p>
</div>
{:else}
<div class="flex items-center justify-center p-6">
<DatePicker
date={selectedDate}
@@ -1335,87 +1125,42 @@
}}
onPlaceholderChange={(newPlaceholder) => {
placeholder = newPlaceholder;
userNavigatedCalendar = true;
fetchHoursForMonth(newPlaceholder);
}}
/>
</div>
{/if}
{#if loadingAvailableHours}
{#if loadingAvailableHours && selectedDate}
<div class="flex items-center justify-center border-t p-6">
<p class="text-sm text-gray-500">Loading times...</p>
</div>
{:else if selectedDate}
<div
class="no-scrollbar flex max-h-40 w-full scroll-pb-6 flex-col gap-4 overflow-y-auto border-t p-6"
>
<div class="border-t">
<div class="max-h-64 overflow-y-auto p-6">
{#if formattedSelectedDate}
<div class="grid justify-center gap-2">{formattedSelectedDate}</div>
<div class="mb-3 grid justify-center gap-2 text-sm font-medium">{formattedSelectedDate}</div>
{/if}
{#if groupedTimeSlots.length > 0}
<div class="grid gap-2">
{#each groupedTimeSlots as slot (slot.type + '-' + slot.startTime + '-' + slot.endTime)}
{#if slot.type === 'available'}
{@const protection = lunchProtectionStatus().get(slot.startTime)}
{#if protection?.isBlocked}
<!-- Blocked by lunch protection -->
<Button
variant="outline"
class="w-full cursor-not-allowed opacity-50 hover:bg-gray-100"
disabled
title={protection.warningMessage || 'Lunch protection'}
>
{formatTime(slot.startTime)}
<span class="text-gray-500">- {formatTime(slot.endTime)}</span>
</Button>
{:else}
<Button
variant="outline"
onclick={() => {
selectedTime = slot.startTime;
}}
class={`w-full hover:bg-fuchsia-50 ${
slot.startTime === selectedTime ? 'bg-fuchsia-100' : ''
} ${protection?.showWarning ? 'border-amber-400 bg-amber-50' : ''}`}
title={protection?.warningMessage}
>
{#if protection?.showWarning}
<span class="mr-1 text-amber-500">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
clip-rule="evenodd"
<TimeSlotList
slots={groupedTimeSlots}
{selectedTime}
duration={getTotalDuration()}
protection={lunchProtection}
onSelect={(time) => { selectedTime = time; }}
/>
</svg>
</span>
{/if}
{formatTime(slot.startTime)}
<span class="text-gray-500">- {formatTime(slot.endTime)}</span>
</Button>
{/if}
{:else}
<Button
variant="outline"
class="w-full cursor-not-allowed opacity-50 hover:bg-gray-100"
disabled
>
{formatTime(slot.startTime)}
<span class="text-gray-500">- {formatTime(slot.endTime)}</span>
</Button>
{/if}
{/each}
</div>
{:else}
<p class="text-center text-sm text-gray-500">No available slots</p>
{/if}
</div>
{#if selectedDate && selectedTime}
<div class="px-6 pb-4">
<SelectedTimeSummary
selectedDate={formattedSelectedDate || ''}
selectedTime={formatTime(selectedTime)}
endTime={formatTime(calculateEndTime(selectedTime, getTotalDuration()))}
duration={getTotalDuration()}
protection={lunchProtection.get(selectedTime)}
/>
</div>
{/if}
{:else}
<div class="flex items-center justify-center border-t p-6">
<p class="text-center text-sm text-gray-500">