{slotNumber}

\n {slot.review_type && }\n {hasWaitlist && (\n \n +{slot.waitlist_count}\n \n )}\n {isMultiSlot && (\n

\n {bookingDuration}min\n

\n )}\n

{slot.designer_name}

{slot.topic}

\n \n

\n {onJoinWaitlist && (\n \n +\n \n )}\n {onCancel && (\n \n ×\n \n )}\n

\n );\n }\n \n return (\n onBook(slot)}\n >\n

\n {slotNumber}\n

\n Available\n

\n \n );\n}\n\nfunction WaitlistModal({ slot, onClose, onSubmit }: {\n slot: Slot;\n onClose: () => void;\n onSubmit: (data: any) => void;\n}) {\n const [formData, setFormData] = React.useState({\n designerName: '',\n topic: '',\n reviewType: 'shareout',\n xfnPartners: ''\n });\n\n // Convert timestamp to 12-hour format for display\n const displayTime = React.useMemo(() => {\n return formatDisplayTimeFromTimestamp(slot.start_timestamp);\n }, [slot.start_timestamp]);\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n onSubmit(formData);\n };\n\n return (\n

Join Waitlist

\n {displayTime} ({slot.duration} minutes)\n

\n Currently booked by: {slot.designer_name}\n {(slot.waitlist_count || 0) > 0 && (\n \n {slot.waitlist_count} already on waitlist\n \n )}\n

\n \n

\n \n Designer Name *\n \n setFormData({...formData, designerName: e.target.value})}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand focus:border-transparent\"\n required\n />\n

\n \n

\n \n Topic *\n \n setFormData({...formData, topic: e.target.value})}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand focus:border-transparent\"\n required\n />\n

\n \n

\n \n Review Type *\n \n setFormData({...formData, reviewType: e.target.value})}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand focus:border-transparent\"\n required\n >\n \n \n \n \n \n

\n \n

\n \n XFN Partners\n \n setFormData({...formData, xfnPartners: e.target.value})}\n placeholder=\"e.g., PM, Eng, Research\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand focus:border-transparent\"\n />\n

\n \n

\n \n Join Waitlist\n \n \n Cancel\n \n

\n );\n}\n\ntype RelatedSlot = {\n id: number;\n start_time: string;\n duration: number;\n};\n\nfunction CancelModal({ slot, onClose, onSubmit }: {\n slot: Slot;\n onClose: () => void;\n onSubmit: (slotIds: number[]) => void;\n}) {\n const [relatedSlots, setRelatedSlots] = React.useState([]);\n const [selectedSlots, setSelectedSlots] = React.useState>(new Set());\n const [loading, setLoading] = React.useState(true);\n const [isPartialCancellation, setIsPartialCancellation] = React.useState(false);\n\n // Fetch related slots when modal opens\n React.useEffect(() => {\n const fetchRelatedSlots = async () => {\n try {\n console.log(`[DEBUG] Fetching related slots for slot ${slot.id}`);\n const response = await fetch(`/api/slots/${slot.id}/related`);\n if (response.ok) {\n const data = await response.json();\n console.log(`[DEBUG] Related slots API response:`, data);\n setRelatedSlots(data.slots || []);\n // Pre-select all slots by default\n const allSlotIds = new Set(data.slots.map((s: RelatedSlot) => s.id));\n setSelectedSlots(allSlotIds);\n const isMultiSlot = data.slots.length > 1;\n console.log(`[DEBUG] Setting isPartialCancellation to: ${isMultiSlot} (${data.slots.length} slots found)`);\n setIsPartialCancellation(isMultiSlot);\n } else {\n console.log(`[DEBUG] Related slots API failed with status: ${response.status}`);\n // Fallback to single slot if API fails\n const singleSlot = [{ id: slot.id, start_time: slot.start_time, duration: slot.duration }];\n setRelatedSlots(singleSlot);\n setSelectedSlots(new Set([slot.id]));\n }\n } catch (_error) {\n console.error('Failed to fetch related slots:', error);\n // Fallback to single slot\n const singleSlot = [{ id: slot.id, start_time: slot.start_time, duration: slot.duration }];\n setRelatedSlots(singleSlot);\n setSelectedSlots(new Set([slot.id]));\n } finally {\n setLoading(false);\n }\n };\n\n fetchRelatedSlots();\n }, [slot.id, slot.start_timestamp, slot.duration]);\n\n const formatTimeRange = (timestamp: number, duration: number) => {\n const startFormatted = formatDisplayTimeFromTimestamp(timestamp);\n const endTimestamp = timestamp + (duration * 60 * 1000);\n const endFormatted = formatDisplayTimeFromTimestamp(endTimestamp);\n return `${startFormatted} - ${endFormatted}`;\n };\n\n const handleSlotToggle = (slotId: number) => {\n const newSelected = new Set(selectedSlots);\n if (newSelected.has(slotId)) {\n newSelected.delete(slotId);\n } else {\n newSelected.add(slotId);\n }\n setSelectedSlots(newSelected);\n };\n\n const handleSelectAll = () => {\n const allSlotIds = new Set(relatedSlots.map(s => s.id));\n setSelectedSlots(allSlotIds);\n };\n\n const handleSelectNone = () => {\n setSelectedSlots(new Set());\n };\n\n const handleConfirm = () => {\n const slotIdsToCancel = Array.from(selectedSlots);\n onSubmit(slotIdsToCancel);\n };\n\n const selectedCount = selectedSlots.size;\n const totalDuration = relatedSlots\n .filter(slot => selectedSlots.has(slot.id))\n .reduce((total, slot) => total + slot.duration, 0);\n\n if (loading) {\n return (\n

Loading booking details...

\n );\n }\n\n return (\n

\n {isPartialCancellation ? 'Cancel Booking Slots' : 'Cancel Booking'}\n

\n \n

\n Booked by: {slot.designer_name}\n

\n\n {isPartialCancellation && (\n <>\n

\n Select which time slots to cancel. Keep the slots you still need:\n

\n \n

\n \n Select All\n \n \n Select None\n \n

\n \n

\n {relatedSlots.map((relatedSlot) => (\n \n handleSlotToggle(relatedSlot.id)}\n className=\"rounded border-gray-300 text-brand focus:ring-brand\"\n />\n \n {formatTimeRange(relatedSlot.start_timestamp, relatedSlot.duration)}\n \n \n ))}\n

\n \n {selectedCount > 0 && (\n

\n Selected: {selectedCount} slot{selectedCount !== 1 ? 's' : ''} ({totalDuration} minutes total)\n

\n )}\n \n )}\n\n {!isPartialCancellation && (\n

\n {formatDisplayTimeFromTimestamp(slot.start_timestamp)} ({slot.duration} minutes)
\n This will cancel the booking and make the slot available to others.\n

\n )}\n \n

\n \n {selectedCount === 0 \n ? 'Select slots to cancel'\n : `Cancel ${selectedCount} Slot${selectedCount !== 1 ? 's' : ''}`\n }\n \n \n Keep Booking\n \n

\n );\n}\n\nfunction BookingModal({ slot, onClose, onSubmit }: {\n slot: Slot;\n onClose: () => void;\n onSubmit: (data: any) => void;\n}) {\n const [formData, setFormData] = React.useState({\n designerName: '',\n topic: '',\n reviewType: 'shareout',\n xfnPartners: '',\n duration: 15\n });\n const [consecutiveAvailability, setConsecutiveAvailability] = React.useState<{\n [key: number]: { available: boolean; error?: string; }\n }>({});\n const [checkingAvailability, setCheckingAvailability] = React.useState(false);\n\n // Convert timestamp to 12-hour format for display\n const displayTime = React.useMemo(() => {\n return formatDisplayTimeFromTimestamp(slot.start_timestamp);\n }, [slot.start_timestamp]);\n\n // Check consecutive slot availability when duration changes\n React.useEffect(() => {\n const checkConsecutiveAvailability = async (duration: number) => {\n if (duration === 15) {\n setConsecutiveAvailability(prev => ({ ...prev, [duration]: { available: true } }));\n return;\n }\n \n setCheckingAvailability(true);\n try {\n const response = await fetch(`/api/slots/${slot.id}/consecutive?duration=${duration}`);\n const data = await response.json();\n \n setConsecutiveAvailability(prev => ({\n ...prev,\n [duration]: {\n available: data.available,\n error: data.error\n }\n }));\n } catch (_error) {\n setConsecutiveAvailability(prev => ({\n ...prev,\n [duration]: {\n available: false,\n error: 'Failed to check availability'\n }\n }));\n } finally {\n setCheckingAvailability(false);\n }\n };\n\n checkConsecutiveAvailability(formData.duration);\n }, [formData.duration, slot.id]);\n\n const durationOptions = [\n { value: 15, label: '15 minutes (1 slot)' },\n { value: 30, label: '30 minutes (2 slots)' },\n { value: 45, label: '45 minutes (3 slots)' },\n { value: 60, label: '60 minutes (4 slots)' }\n ];\n\n const currentAvailability = consecutiveAvailability[formData.duration];\n const isAvailable = currentAvailability?.available !== false;\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n onSubmit(formData);\n };\n\n return (\n

Book Review Slot

\n {displayTime} starting slot\n

\n {formData.duration > 15 && (\n

\n Will book {formData.duration / 15} consecutive slots ({formData.duration} minutes total)\n

\n )}\n \n

\n \n Duration *\n \n setFormData({...formData, duration: parseInt(e.target.value)})}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand focus:border-transparent\"\n required\n >\n {durationOptions.map(option => (\n \n ))}\n \n {checkingAvailability && (\n

\n Checking availability...\n

\n )}\n {!isAvailable && currentAvailability?.error && (\n

\n {currentAvailability.error}\n

\n )}\n {isAvailable && formData.duration > 15 && (\n

\n {formData.duration / 15} consecutive slots available\n

\n )}\n

\n \n

\n \n {checkingAvailability \n ? 'Checking...' \n : `Book ${formData.duration === 15 ? 'Slot' : `${formData.duration / 15} Slots`}`\n }\n \n \n Cancel\n \n

\n );\n}\n\nfunction _SessionSection({\n session,\n _date,\n slots,\n onBookSlot,\n onCancelSlot,\n onJoinWaitlist\n}: {\n session: ReviewSession;\n _date: string;\n slots: Slot[];\n onBookSlot: (slot: Slot) => void;\n onCancelSlot?: (slot: Slot) => void;\n onJoinWaitlist?: (slot: Slot) => void;\n}) {\n const availableSlots = slots.filter(slot => slot.status === 'available');\n\n return (\n

{session.name}

\n {formatSessionTimeMultiTimezone(session)}\n

\n 0 \n ? 'bg-green-100 text-green-800' \n : 'bg-red-100 text-red-800'\n }`}>\n {availableSlots.length} / {slots.length} \n {slots.length === 1 ? ' slot' : ' slots'} open\n \n {availableSlots.length === 0 && (\n \n All slots booked\n \n )}\n

\n \n {slots.length === 0 ? (\n

\n No slots available for this session\n

\n ) : (\n

\n {slots.map((slot) => (\n \n ))}\n

\n )}\n

\n );\n}\n\nfunction CalendarDaySection({ \n timestamp, \n dayName, \n allSlots, \n onBookSlot,\n onCancelSlot,\n onJoinWaitlist,\n isPastDate\n}: {\n timestamp: number;\n dayName: string;\n allSlots: Record>;\n onBookSlot: (slot: Slot) => void;\n onCancelSlot?: (slot: Slot) => void;\n onJoinWaitlist?: (slot: Slot) => void;\n isPastDate: boolean;\n}) {\n const dateSlots = allSlots[timestamp] || {};\n const availableSessionIds = Object.keys(dateSlots).map(id => parseInt(id)).sort();\n const hasData = availableSessionIds.length > 0;\n\n return (\n

\n {/* Day Header */}\n

\n {dayName}\n

\n {isPastDate && (\n \n Past Sessions\n \n )}\n

\n {hasData ? (\n availableSessionIds.length === 1 ? '1 session' : `${availableSessionIds.length} sessions`\n ) : 'No sessions'}\n

\n\n {/* Sessions Grid */}\n

\n {hasData ? (\n

\n {availableSessionIds.map((sessionId) => {\n const session = REVIEW_SESSIONS[sessionId];\n const sessionSlots = dateSlots[sessionId] || [];\n \n if (!session) {\n return (\n

⚠️ Unknown session ID: {sessionId}

\n );\n }\n \n return (\n \n );\n })}\n

\n ) : (\n

No sessions scheduled

This day has no design review sessions

\n )}\n

\n );\n}\n\n// Helper function to group consecutive slots into booking blocks\nfunction groupSlotsIntoBlocks(slots: Slot[]): Array {\n const result: Array = [];\n const processed = new Set();\n \n slots.forEach((slot, index) => {\n if (processed.has(slot.id)) return;\n \n // If this slot is booked and has a booking duration > 15, find consecutive slots\n if (slot.status === 'booked' && (slot.booking_duration || 15) > 15) {\n const duration = slot.booking_duration || 15;\n const slotsNeeded = duration / 15;\n const consecutiveSlots = [slot];\n \n // Find the next consecutive slots with same designer\n for (let i = 1; i < slotsNeeded; i++) {\n const nextSlot = slots.find((s, idx) => \n idx > index && \n s.status === 'booked' && \n s.designer_name === slot.designer_name &&\n !processed.has(s.id)\n );\n \n if (nextSlot) {\n consecutiveSlots.push(nextSlot);\n processed.add(nextSlot.id);\n }\n }\n \n // Only group if we found multiple slots\n if (consecutiveSlots.length > 1) {\n result.push(consecutiveSlots);\n consecutiveSlots.forEach(s => processed.add(s.id));\n } else {\n result.push(slot);\n processed.add(slot.id);\n }\n } else {\n // Single slot (available or single booked slot)\n result.push(slot);\n processed.add(slot.id);\n }\n });\n \n return result;\n}\n\nfunction MultiSlotBookingBlock({ slots, onCancel, onJoinWaitlist }: {\n slots: Slot[];\n onCancel?: (slot: Slot) => void;\n onJoinWaitlist?: (slot: Slot) => void;\n}) {\n const firstSlot = slots[0];\n const lastSlot = slots[slots.length - 1];\n const totalDuration = slots.reduce((sum, slot) => sum + slot.duration, 0);\n const hasWaitlist = slots.some(slot => (slot.waitlist_count || 0) > 0);\n const totalWaitlist = slots.reduce((sum, slot) => sum + (slot.waitlist_count || 0), 0);\n\n // Format time range for the entire booking\n const formatTimeRange = () => {\n\n const startTime = formatDisplayTimeFromTimestamp(firstSlot.start_timestamp);\n \n // Calculate end time based on last slot's timestamp + duration\n const endTimestamp = lastSlot.start_timestamp + (lastSlot.duration * 60 * 1000);\n const endTime = formatDisplayTimeFromTimestamp(endTimestamp);\n \n return `${startTime}–${endTime}`;\n };\n\n const handleCancel = (e: React.MouseEvent) => {\n e.stopPropagation();\n if (onCancel) onCancel(firstSlot); // Pass the first slot as the representative\n };\n\n const handleJoinWaitlist = (e: React.MouseEvent) => {\n e.stopPropagation();\n if (onJoinWaitlist) onJoinWaitlist(firstSlot);\n };\n\n // Calculate width based on total duration (base 128px per 15-minute slot)\n const baseSlotWidth = 128;\n const widthMultiplier = totalDuration / 15;\n const minWidth = `${baseSlotWidth}px`;\n const flexBasis = `${baseSlotWidth * widthMultiplier}px`;\n\n return (\n

{formatTimeRange()}

{firstSlot.designer_name}

{firstSlot.topic}

\n {firstSlot.review_type && }\n {hasWaitlist && (\n \n +{totalWaitlist}\n \n )}\n

\n {totalDuration}min\n

\n \n Extended\n \n

\n \n

\n {onJoinWaitlist && (\n \n +\n \n )}\n {onCancel && (\n \n ×\n \n )}\n

\n );\n}\n\nfunction CompactSessionSection({\n session,\n timestamp,\n slots,\n onBookSlot,\n onCancelSlot,\n onJoinWaitlist,\n isPastDate\n}: {\n session: ReviewSession;\n timestamp: number;\n slots: Slot[];\n onBookSlot: (slot: Slot) => void;\n onCancelSlot?: (slot: Slot) => void;\n onJoinWaitlist?: (slot: Slot) => void;\n isPastDate: boolean;\n}) {\n const availableSlots = slots.filter(slot => slot.status === 'available');\n const slotBlocks = groupSlotsIntoBlocks(slots);\n const sessionId = session.name.replace(/\\s+/g, '-');\n\n\n return (\n

\n {/* Session Header */}\n

{session.name}

\n {formatSessionTimeMultiTimezone(session)}\n

0 \n ? 'bg-green-100 text-green-700' \n : 'bg-red-100 text-red-700'\n }`}>\n {availableSlots.length} / {slots.length} \n {slots.length === 1 ? ' slot' : ' slots'} open\n

\n\n {/* Responsive Grid Layout */}\n {slots.length === 0 ? (\n

\n No slots available for this session\n

\n ) : (\n

\n {slotBlocks.map((block, _index) => {\n if (Array.isArray(block)) {\n // Multi-slot booking block\n return (\n \n );\n } else {\n // Single slot\n return (\n \n );\n }\n })}\n

\n )}\n

\n );\n}\n\nfunction WeekNavigation({ currentWeek, onWeekChange, isPastWeek }: {\n currentWeek: Date;\n onWeekChange: (week: Date) => void;\n isPastWeek: boolean;\n}) {\n const getWeekString = (date: Date) => {\n const start = new Date(date);\n start.setDate(date.getDate() - date.getDay() + 1); // Monday\n const end = new Date(start);\n end.setDate(start.getDate() + 6); // Sunday\n \n return `${start.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })} - ${end.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}`;\n };\n\n const goToPrevWeek = () => {\n const prev = new Date(currentWeek);\n prev.setDate(currentWeek.getDate() - 7);\n onWeekChange(prev);\n };\n\n const goToNextWeek = () => {\n const next = new Date(currentWeek);\n next.setDate(currentWeek.getDate() + 7);\n onWeekChange(next);\n };\n\n const goToCurrentWeek = () => {\n onWeekChange(new Date());\n };\n\n return (\n

\n \n \n \n \n

\n {getWeekString(currentWeek)}\n

\n {isPastWeek && (\n

\n Historical Week\n

\n )}\n

\n \n \n \n \n

\n \n \n This Week\n \n

\n );\n}\n\nfunction ChevronLeftIcon({ className }: { className?: string }) {\n return (\n \n );\n}\n\nfunction ChevronRightIcon({ className }: { className?: string }) {\n return (\n \n );\n}\n\nfunction Toast({ message, type, onClose }: {\n message: string;\n type: 'success' | 'error';\n onClose: () => void;\n}) {\n React.useEffect(() => {\n const timer = setTimeout(() => {\n onClose();\n }, 4000);\n \n return () => clearTimeout(timer);\n }, [onClose]);\n\n const bgColor = type === 'success' ? 'bg-green-600' : 'bg-red-600';\n const icon = type === 'success' ? '✓' : '⚠';\n\n return (\n

\n {icon}\n {message}\n \n ×\n \n

\n );\n}\n\nfunction App() {\n const [allSlots, setAllSlots] = React.useState>>({});\n const [loading, setLoading] = React.useState(false);\n const [error, setError] = React.useState(\"\");\n const [bookingSlot, setBookingSlot] = React.useState(null);\n const [cancelSlot, setCancelSlot] = React.useState(null);\n const [waitlistSlot, setWaitlistSlot] = React.useState(null);\n const [currentWeek, setCurrentWeek] = React.useState(new Date());\n const [toast, setToast] = React.useState<{ message: string; type: 'success' | 'error' } | null>(null);\n\n const showToast = (message: string, type: 'success' | 'error') => {\n setToast({ message, type });\n };\n\n // Get UTC timestamps for current week (Tuesday only)\n const weekDates = React.useMemo(() => {\n const dates = [];\n \n // Find Monday of current week in UTC\n const startOfWeek = new Date(currentWeek);\n startOfWeek.setUTCDate(currentWeek.getUTCDate() - currentWeek.getUTCDay() + 1);\n startOfWeek.setUTCHours(0, 0, 0, 0); // Start of day in UTC\n \n // Add Tuesday only\n for (const dayOffset of [1]) { // Tuesday=1 (relative to Monday)\n const dateTimestamp = startOfWeek.getTime() + (dayOffset * 24 * 60 * 60 * 1000);\n const dateObj = new Date(dateTimestamp);\n \n // Display name in UTC to match the actual session day\n const dayName = dateObj.toLocaleDateString('en-US', { \n weekday: 'long', \n month: 'long', \n day: 'numeric',\n timeZone: 'UTC'\n });\n \n console.log(`Created: timestamp=${dateTimestamp}, dayName=${dayName}, utcDate=${dateObj.toISOString()}`);\n dates.push({ \n timestamp: dateTimestamp,\n dayName, \n dateObj \n });\n }\n \n console.log('weekDates calculated:', dates);\n return dates;\n }, [currentWeek]);\n\n const isPastWeek = React.useMemo(() => {\n const now = new Date();\n const endOfCurrentWeek = new Date(currentWeek);\n endOfCurrentWeek.setDate(currentWeek.getDate() - currentWeek.getDay() + 7); // End of week\n return endOfCurrentWeek < now;\n }, [currentWeek]);\n\n // Fetch slots when week changes\n React.useEffect(() => {\n const timestamps = weekDates.map(d => d.timestamp);\n if (timestamps.length > 0) {\n fetchSlotsForTimestamps(timestamps);\n }\n }, [weekDates]);\n\n const fetchSlotsForTimestamps = React.useCallback(async (timestamps: number[]) => {\n console.log('fetchSlotsForTimestamps CALLED with timestamps:', timestamps);\n setLoading(true);\n setError(\"\");\n \n try {\n const slotsMap: Record> = {};\n \n // For each timestamp, fetch all relevant sessions\n for (const timestamp of timestamps) {\n console.log(`Processing timestamp: ${timestamp}`);\n const utcDate = new Date(timestamp);\n const dayOfWeek = utcDate.getUTCDay();\n const sessionIds = dayOfWeek === 2 ? [1, 2, 3] : [];\n \n console.log(`Timestamp ${timestamp} (${utcDate.toISOString()}) is UTC day ${dayOfWeek}, sessions: [${sessionIds.join(', ')}]`);\n \n slotsMap[timestamp] = {};\n \n if (sessionIds.length === 0) {\n console.log(`No sessions for timestamp ${timestamp} (day ${dayOfWeek})`);\n continue;\n }\n \n // Fetch slots for each session on this timestamp\n const sessionPromises = sessionIds.map(async (sessionId) => {\n try {\n const url = `/api/sessions/${sessionId}/slots?timestamp=${timestamp}`;\n console.log(`Fetching: ${url}`);\n const response = await fetch(url);\n if (!response.ok) {\n console.warn(`Failed to fetch session ${sessionId} for timestamp ${timestamp}: ${response.status}`);\n return { sessionId, slots: [] };\n }\n const data = await response.json();\n console.log(`Fetched session ${sessionId} for timestamp ${timestamp}:`, data.slots?.length || 0, 'slots');\n return { sessionId, slots: Array.isArray(data.slots) ? data.slots : [] };\n } catch (err) {\n console.warn(`Error fetching session ${sessionId} for timestamp ${timestamp}:`, err);\n return { sessionId, slots: [] };\n }\n });\n\n const sessionResults = await Promise.all(sessionPromises);\n sessionResults.forEach(({ sessionId, slots }) => {\n // Always add the session data, even if empty, so we know it was fetched\n slotsMap[timestamp][sessionId] = slots;\n console.log(`Added session ${sessionId} for timestamp ${timestamp}: ${slots.length} slots`);\n });\n }\n \n console.log('DEBUG: Final slots map:', slotsMap);\n setAllSlots(slotsMap);\n } catch (err) {\n console.error('Error fetching slots:', err);\n setError(err instanceof Error ? err.message : 'Failed to fetch slots');\n setAllSlots({});\n } finally {\n setLoading(false);\n }\n }, []);\n\n // This effect is now handled above with weekDates\n\n const handleBookSlot = async (formData: any) => {\n if (!bookingSlot) return;\n \n try {\n const response = await fetch(`/api/slots/${bookingSlot.id}/book`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify(formData),\n });\n \n if (response.ok) {\n // Refresh slots for all timestamps\n const timestamps = weekDates.map(d => d.timestamp);\n await fetchSlotsForTimestamps(timestamps);\n setBookingSlot(null);\n const duration = formData.duration || 15;\n const slotText = duration === 15 ? 'slot' : `${duration / 15} slots`;\n showToast(`Successfully booked ${slotText} for ${formData.designerName}`, 'success');\n } else {\n const error = await response.json();\n showToast(error.error || 'Failed to book slot', 'error');\n }\n } catch (_error) {\n showToast('Failed to book slot', 'error');\n }\n };\n\n const handleCancelSlot = async (slotIds: number[]) => {\n if (!cancelSlot || slotIds.length === 0) return;\n \n console.log(`[DEBUG] Attempting to cancel slots:`, slotIds);\n \n try {\n let response;\n let url;\n \n if (slotIds.length === 1 && slotIds[0] === cancelSlot.id) {\n // Single slot or full booking cancellation - use DELETE endpoint\n url = `/api/slots/${cancelSlot.id}/cancel`;\n console.log(`[DEBUG] Making DELETE request to: ${url}`);\n response = await fetch(url, { method: 'DELETE' });\n } else {\n // Partial cancellation - use POST endpoint\n url = `/api/slots/cancel-partial`;\n console.log(`[DEBUG] Making POST request to: ${url} with slots:`, slotIds);\n response = await fetch(url, {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ slotIds })\n });\n }\n \n console.log(`[DEBUG] Response status: ${response.status}`);\n \n if (response.ok) {\n const result = await response.json();\n console.log(`[DEBUG] Cancellation successful:`, result);\n \n // Refresh slots for all timestamps\n const timestamps = weekDates.map(d => d.timestamp);\n await fetchSlotsForTimestamps(timestamps);\n setCancelSlot(null);\n \n const message = slotIds.length === 1 \n ? 'Booking cancelled successfully'\n : `${slotIds.length} slots cancelled successfully`;\n showToast(message, 'success');\n } else {\n const errorText = await response.text();\n console.error(`[ERROR] Cancellation failed with status ${response.status}:`, errorText);\n \n try {\n const error = JSON.parse(errorText);\n showToast(error.error || `Failed to cancel booking (${response.status})`, 'error');\n } catch {\n showToast(`Failed to cancel booking (${response.status}): ${errorText}`, 'error');\n }\n }\n } catch (error) {\n console.error(`[ERROR] Exception during cancellation:`, error);\n showToast(`Network error: ${error.message}`, 'error');\n }\n };\n\n const handleJoinWaitlist = async (formData: any) => {\n if (!waitlistSlot) return;\n \n try {\n const response = await fetch(`/api/slots/${waitlistSlot.id}/waitlist`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify(formData),\n });\n \n if (response.ok) {\n const result = await response.json();\n // Refresh slots for all timestamps\n const timestamps = weekDates.map(d => d.timestamp);\n await fetchSlotsForTimestamps(timestamps);\n setWaitlistSlot(null);\n showToast(result.message || 'Successfully joined waitlist', 'success');\n } else {\n const error = await response.json();\n showToast(error.error || 'Failed to join waitlist', 'error');\n }\n } catch (_error) {\n showToast('Failed to join waitlist', 'error');\n }\n };\n\n // Date expansion no longer needed with calendar view\n\n if (loading && Object.keys(allSlots).length === 0) {\n return (\n

Design Review Scheduler

Loading your sessions...

\n );\n }\n\n if (error && Object.keys(allSlots).length === 0) {\n return (\n

Design Review Scheduler

⚠️

Connection Error

{error}

Please check the browser console for more details.

\n \n

\n );\n }\n\n return (\n

\n Design Review Scheduler\n

\n\n {/* Week Navigation */}\n \n\n {/* Loading indicator */}\n {loading && (\n

Loading week sessions...

\n )}\n\n {/* Calendar Week View */}\n

\n {weekDates.map(({ timestamp, dayName }) => (\n \n ))}\n

\n\n {/* Booking Modal */}\n {bookingSlot && (\n setBookingSlot(null)}\n onSubmit={handleBookSlot}\n />\n )}\n\n {/* Cancel Modal */}\n {cancelSlot && (\n setCancelSlot(null)}\n onSubmit={handleCancelSlot}\n />\n )}\n\n {/* Waitlist Modal */}\n {waitlistSlot && (\n setWaitlistSlot(null)}\n onSubmit={handleJoinWaitlist}\n />\n )}\n\n {/* Toast Notification */}\n {toast && (\n setToast(null)}\n />\n )}\n

\n );\n}\n\nconst container = document.getElementById(\"root\");\nif (container) {\n const root = createRoot(container);\n root.render();\n}",[],[201,208],{"_104":218,"_95":219,"_153":220,"_155":202,"_156":138,"_157":221,"_159":160,"_106":222,"_100":223,"_162":176,"_164":224,"_165":22,"_166":-5,"_167":225,"_98":226},"7b03fb30-7165-11f0-9a66-0224a6c84d84","index.html","d3cb32fa-677a-11f0-8a66-0224a6c84d84",275,["D",1754334111784],7,"\n\n \n Design Review Scheduler\n \n \n \n \n \n \n

\n \n \n",[],[201,219],[201],{"_104":229,"_95":230,"_153":231,"_155":-5,"_156":138,"_157":232,"_159":160,"_106":233,"_100":32,"_162":176,"_164":234,"_165":22,"_166":-5,"_167":235,"_98":236},"1a3b7552-677a-11f0-bfe0-0224a6c84d84",".vtignore","1a3b7606-677a-11f0-bfe0-0224a6c84d84",2,["D",1753243457219],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[],[230],{"_104":238,"_95":239,"_153":240,"_155":-5,"_156":138,"_157":241,"_159":160,"_106":242,"_100":243,"_162":176,"_164":244,"_165":22,"_166":-5,"_167":245,"_98":246},"5c574d24-677c-11f0-852b-0224a6c84d84","CLAUDE.md","4329c3a4-677c-11f0-b416-0224a6c84d84",38,["D",1753244427120],1,"# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.\n\n## Project Overview\n\nThis is a **Val Town project** - a full-stack web application combining React frontend with Hono backend, designed for Val Town's Deno-based serverless platform.\n\n## Architecture\n\n### Core Structure\n```\n├── backend/\n│ └── server.ts # Hono HTTP server with API routes\n├── frontend/\n│ ├── index.html # HTML entry point\n│ └── app.tsx # React application component\n├── deno.json # Deno configuration\n└── .cursorrules # Val Town development guidelines\n```\n\n### Technology Stack\n- **Runtime**: Deno (not Node.js)\n- **Backend**: Hono web framework serving HTTP requests\n- **Frontend**: React 18.2.0 from ESM.sh CDN\n- **Modules**: ESM imports from esm.sh and esm.town\n- **Platform**: Val Town serverless environment\n\n### Key Patterns\n\n#### File Serving\nUses Val Town's `serveFile` utility for proper content-type handling:\n```ts\nimport { serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\napp.get(\"/frontend/**/*\", c => serveFile(c.req.path, import.meta.url));\n```\n\n#### React Configuration\nAll React files must include JSX pragma and use pinned versions:\n```tsx\n/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18\";\n```\n\n#### Error Handling\nInclude error unwrapping for proper debugging:\n```ts\napp.onError((err, c) => {\n throw err;\n});\n```\n\n#### Entry Point\nHTTP vals must export the fetch handler:\n```ts\nexport default app.fetch;\n```\n\n## Development Commands\n\nNo traditional build commands - code runs directly on Val Town's platform. Files are served and executed as-is.\n\n### Code Verification\n- **Lint code**: `deno lint` - Check for code quality issues\n- **Type check**: `deno check backend/server.ts` - Verify TypeScript types\n\n## Platform Constraints\n\n- **No binary files** - text-only file system\n- **ESM modules only** - no Node.js compatibility required\n- **CDN dependencies** - external module loading from esm.sh\n- **Serverless limitations** - stateless request handling only\n\n## Val Town Standard Libraries\n\nKey utilities available:\n- **Blob storage**: `import { blob } from \"https://esm.town/v/std/blob\"`\n- **SQLite**: `import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\"`\n- **OpenAI**: `import { OpenAI } from \"https://esm.town/v/std/openai\"`\n- **Email**: `import { email } from \"https://esm.town/v/std/email\"`\n\n## Important Rules\n\n1. **Always pin React to 18.2.0** across all dependencies\n2. **Use `npm:` prefix** for npm imports in server-side code only\n3. **Use esm.sh URLs** for client-side imports\n4. **Include JSX pragma** in all TSX files\n5. **Change SQLite table names** instead of altering schemas\n6. **Use environment variables** for secrets via `Deno.env.get()`\n7. **Avoid Node.js APIs** - stick to Deno and web standards\n\n## Current Application\n\nSimple React counter app demonstrating:\n- Hono server with static file serving\n- React state management\n- API endpoints (`/api/health`)\n- Proper file separation between frontend/backend",[],[239],{"_104":248,"_95":249,"_153":250,"_155":-5,"_156":138,"_157":251,"_159":22,"_106":252,"_100":253,"_162":176,"_164":254,"_165":22,"_166":-5,"_167":255,"_98":256},"afbd26b2-7214-11f0-a5fa-0224a6c84d84","TODO.md","362f2426-68fa-11f0-aa46-0224a6c84d84",403,["D",1754409362165],17,"// 5 Aug 2025\n\nAdd protection against concurrent booking conflicts when multiple designers try to book the same slot simultaneously.\n\nWhen someone submits a booking, verify the slot is still available before confirming. If another designer booked it while they were filling out the form, show a clear message explaining the slot was just taken and automatically highlight the next available slot in that session. \n\nConsider adding real-time availability updates so slots that get booked appear as unavailable immediately across all open browsers, reducing the chance of conflicts. The goal is to handle this race condition gracefully without frustrating designers who thought they had secured a slot.\n\nMake the experience feel fair and transparent - if someone loses out on a slot, they should understand why and have an immediate alternative option presented to them.",[],[249],{"_104":258,"_95":259,"_153":260,"_155":-5,"_156":138,"_157":261,"_159":160,"_106":262,"_100":243,"_162":176,"_164":263,"_165":22,"_166":-5,"_167":264,"_98":265},"e157f0fa-677c-11f0-b4ac-0224a6c84d84","deno.json","1a3e9b74-677a-11f0-84ec-0224a6c84d84",41,["D",1753244650260],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"include\": [\n \"deno:/https/esm.town/**/*\"\n ],\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}",[],[259],"files",[150,169,181,187,199,206,217,228,237,247,257],"counts",{"_270":32,"_271":243,"_272":243,"_273":32},"pulls","branches","forks","envVars","contents",[276],{"_104":188,"_95":189,"_153":190,"_155":183,"_156":138,"_157":101,"_159":22,"_106":277,"_100":192,"_162":193,"_164":194,"_165":22,"_166":195,"_98":278},["D",1754409398522],[99,189],{"_104":182,"_95":99,"_153":183,"_155":-5,"_156":138,"_157":184,"_159":160,"_106":280,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_98":281},["D",1753243571149],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":290,"_148":295,"_266":329,"_176":330,"_274":332,"_335":-5,"_336":22,"_337":-5,"_338":-5,"_339":-5,"_340":341},{"_104":105,"_95":96,"_106":291,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":292,"_132":293,"_135":294,"_147":22},["D",1753215432501],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_100":137,"_95":43,"_104":138,"_139":105,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":96,"_146":94},[296,302,308,317,320,323,326],{"_104":151,"_95":152,"_153":154,"_155":-5,"_156":138,"_157":158,"_159":160,"_106":161,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":297,"_98":301},[298],{"_104":170,"_95":171,"_153":172,"_155":154,"_156":138,"_157":173,"_159":22,"_106":174,"_100":175,"_162":176,"_164":177,"_165":22,"_166":-5,"_167":299,"_98":300},[],[152,171],[152],{"_104":182,"_95":99,"_153":183,"_155":-5,"_156":138,"_157":184,"_159":160,"_106":185,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":303,"_98":307},[304],{"_104":188,"_95":189,"_153":190,"_155":183,"_156":138,"_157":101,"_159":22,"_106":191,"_100":192,"_162":193,"_164":194,"_165":22,"_166":195,"_167":305,"_98":306},[],[99,189],[99],{"_104":200,"_95":201,"_153":202,"_155":-5,"_156":138,"_157":203,"_159":160,"_106":204,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":309,"_98":316},[310,313],{"_104":207,"_95":208,"_153":209,"_155":202,"_156":138,"_157":210,"_159":22,"_106":211,"_100":212,"_162":213,"_164":214,"_165":22,"_166":-5,"_167":311,"_98":312},[],[201,208],{"_104":218,"_95":219,"_153":220,"_155":202,"_156":138,"_157":221,"_159":160,"_106":222,"_100":223,"_162":176,"_164":224,"_165":22,"_166":-5,"_167":314,"_98":315},[],[201,219],[201],{"_104":229,"_95":230,"_153":231,"_155":-5,"_156":138,"_157":232,"_159":160,"_106":233,"_100":32,"_162":176,"_164":234,"_165":22,"_166":-5,"_167":318,"_98":319},[],[230],{"_104":238,"_95":239,"_153":240,"_155":-5,"_156":138,"_157":241,"_159":160,"_106":242,"_100":243,"_162":176,"_164":244,"_165":22,"_166":-5,"_167":321,"_98":322},[],[239],{"_104":248,"_95":249,"_153":250,"_155":-5,"_156":138,"_157":251,"_159":22,"_106":252,"_100":253,"_162":176,"_164":254,"_165":22,"_166":-5,"_167":324,"_98":325},[],[249],{"_104":258,"_95":259,"_153":260,"_155":-5,"_156":138,"_157":261,"_159":160,"_106":262,"_100":243,"_162":176,"_164":263,"_165":22,"_166":-5,"_167":327,"_98":328},[],[259],[296,298,302,304,308,310,313,317,320,323,326],{"_104":182,"_95":99,"_153":183,"_155":-5,"_156":138,"_157":184,"_159":160,"_106":280,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_98":331},[99],[333],{"_104":188,"_95":189,"_153":190,"_155":183,"_156":138,"_157":101,"_159":22,"_106":277,"_100":192,"_162":193,"_164":194,"_165":22,"_166":195,"_98":334},[99,189],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]