refactors, specific day playtime controls

components/booking/enhanced-booking-calendar.tsx

@@ -25,6 +25,11 @@ interface Booking {
 	status: string;
 	userId: string;
 	notes?: string;
+	user?: {
+		id: string;
+		name: string;
+		surname: string;
+	};
 }
 
 interface BookingSlot {
@@ -33,6 +38,15 @@ interface BookingSlot {
 	courtName: string;
 	available: boolean;
 	bookingId?: string;
+	bookedBy?: string;
+}
+
+interface TimeSlot {
+	id: string;
+	dayOfWeek: number;
+	startTime: string;
+	endTime: string;
+	isActive: boolean;
 }
 
 interface Settings {
@@ -47,6 +61,7 @@ export function EnhancedBookingCalendar() {
 	const [courts, setCourts] = useState<Court[]>([]);
 	const [bookings, setBookings] = useState<Booking[]>([]);
 	const [bookingSlots, setBookingSlots] = useState<BookingSlot[]>([]);
+	const [timeSlots, setTimeSlots] = useState<TimeSlot[]>([]);
 	const [settings, setSettings] = useState<Settings | null>(null);
 	const [loading, setLoading] = useState(false);
 	const [partnerName, setPartnerName] = useState('');
@@ -58,13 +73,14 @@ export function EnhancedBookingCalendar() {
 	useEffect(() => {
 		fetchSettings();
 		fetchCourts();
+		fetchTimeSlots();
 	}, []);
 
 	useEffect(() => {
-		if (courts.length > 0 && settings) {
+		if (courts.length > 0 && timeSlots.length > 0) {
 			fetchBookings();
 		}
-	}, [selectedDate, courts, settings]);
+	}, [selectedDate, courts, timeSlots]);
 
 	// Fetch settings from public endpoint (not admin)
 	const fetchSettings = async () => {
@@ -125,9 +141,24 @@ export function EnhancedBookingCalendar() {
 		}
 	};
 
+	// Fetch time slots for day-specific booking times
+	const fetchTimeSlots = async () => {
+		try {
+			const response = await fetch('/api/time-slots');
+			if (response.ok) {
+				const data = await response.json();
+				setTimeSlots(data.timeSlots);
+			}
+		} catch (error) {
+			console.error('Error fetching time slots:', error);
+			// If time slots fetch fails, we'll use fallback settings
+		}
+	};
+
 	const fetchBookings = async () => {
 		try {
-			const response = await fetch('/api/bookings');
+			const dateStr = selectedDate.toISOString().split('T')[0];
+			const response = await fetch(`/api/bookings/all?date=${dateStr}`);
 			if (response.ok) {
 				const data = await response.json();
 				setBookings(data.bookings);
@@ -144,17 +175,45 @@ export function EnhancedBookingCalendar() {
 	};
 
 	const generateTimeSlots = (): string[] => {
-		if (!settings) return [];
+		const dayOfWeek = selectedDate.getDay();
+		
+		// Get time slots for the selected day
+		const dayTimeSlots = timeSlots.filter(
+			slot => slot.dayOfWeek === dayOfWeek && slot.isActive
+		);
 
-		const start = parseInt(settings.booking_start_time.split(':')[0]);
-		const end = parseInt(settings.booking_end_time.split(':')[0]);
-		const slots = [];
-
-		for (let hour = start; hour < end; hour++) {
-			slots.push(`${hour.toString().padStart(2, '0')}:00`);
+		if (dayTimeSlots.length > 0) {
+			// Use day-specific time slots
+			const slots: string[] = [];
+			dayTimeSlots.forEach(timeSlot => {
+				const start = parseInt(timeSlot.startTime.split(':')[0]);
+				const end = parseInt(timeSlot.endTime.split(':')[0]);
+				
+				for (let hour = start; hour < end; hour++) {
+					slots.push(`${hour.toString().padStart(2, '0')}:00`);
+				}
+			});
+			
+			// Remove duplicates and sort
+			return [...new Set(slots)].sort();
 		}
 
-		return slots;
+		// NO FALLBACK - If no day-specific time slots, return empty array
+		// This prevents booking on days where no play is scheduled
+		return [];
+	};
+
+	const isDayBookable = (): boolean => {
+		const dayOfWeek = selectedDate.getDay();
+		const dayTimeSlots = timeSlots.filter(
+			slot => slot.dayOfWeek === dayOfWeek && slot.isActive
+		);
+		return dayTimeSlots.length > 0;
+	};
+
+	const getDayName = (dayOfWeek: number): string => {
+		const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+		return days[dayOfWeek];
 	};
 
 	const generateBookingSlots = (existingBookings: Booking[]) => {
@@ -172,12 +231,17 @@ export function EnhancedBookingCalendar() {
 						booking.status === 'active'
 				);
 
+				const bookedBy = existingBooking?.user 
+					? `${existingBooking.user.name} ${existingBooking.user.surname}`
+					: undefined;
+
 				slots.push({
 					time,
 					courtId: court.id,
 					courtName: court.name,
 					available: !existingBooking,
 					bookingId: existingBooking?.id,
+					bookedBy,
 				});
 			});
 		});
@@ -202,7 +266,17 @@ export function EnhancedBookingCalendar() {
 		maxDate.setDate(today.getDate() + parseInt(settings.booking_window_days));
 		if (selectedDateOnly > maxDate) return false;
 
-		// Check weekend restrictions
+		// CRITICAL: Check if there are any active time slots for this day
+		const dayOfWeek = selectedDateOnly.getDay();
+		const dayTimeSlots = timeSlots.filter(
+			slot => slot.dayOfWeek === dayOfWeek && slot.isActive
+		);
+		
+		// If no time slots are configured for this day, it's not selectable
+		if (dayTimeSlots.length === 0) return false;
+
+		// Legacy weekend restriction check (now superseded by time slot configuration)
+		// Keep for backward compatibility if global settings still matter
 		if (settings.allow_weekend_bookings === 'false') {
 			const dayOfWeek = selectedDateOnly.getDay();
 			if (dayOfWeek === 0 || dayOfWeek === 6) return false; // Sunday or Saturday
@@ -214,6 +288,16 @@ export function EnhancedBookingCalendar() {
 	const handleSlotClick = (slot: BookingSlot) => {
 		if (!slot.available) return;
 
+		// Double-check that this day is actually bookable
+		if (!isDayBookable()) {
+			toast({
+				title: 'Booking Not Available',
+				description: `Courts are closed on ${getDayName(selectedDate.getDay())}s`,
+				variant: 'destructive',
+			});
+			return;
+		}
+
 		setSelectedSlot(slot);
 		setPartnerName('');
 		setNotes('');
@@ -223,6 +307,17 @@ export function EnhancedBookingCalendar() {
 	const handleBookingConfirm = async () => {
 		if (!selectedSlot) return;
 
+		// Final validation before API call
+		if (!isDayBookable()) {
+			toast({
+				title: 'Booking Not Available',
+				description: `Courts are closed on ${getDayName(selectedDate.getDay())}s`,
+				variant: 'destructive',
+			});
+			setShowBookingDialog(false);
+			return;
+		}
+
 		setLoading(true);
 		try {
 			const dateStr = selectedDate.toISOString().split('T')[0];
@@ -426,7 +521,13 @@ export function EnhancedBookingCalendar() {
 														<MapPin className='h-4 w-4' />
 														{slot.courtName}
 													</div>
-													{!slot.available && (
+													{!slot.available && slot.bookedBy && (
+														<div className='flex items-center gap-2 text-xs text-red-600'>
+															<Users className='h-3 w-3' />
+															Booked by {slot.bookedBy}
+														</div>
+													)}
+													{!slot.available && !slot.bookedBy && (
 														<div className='text-xs text-red-600'>Already booked</div>
 													)}
 												</div>
@@ -447,7 +548,19 @@ export function EnhancedBookingCalendar() {
 						{/* No Slots Message */}
 						{!loading && courts.length > 0 && bookingSlots.length === 0 && (
 							<div className='text-center py-8'>
-								<p className='text-gray-500'>No booking slots available for this date</p>
+								{!isDayBookable() ? (
+									<div className='space-y-2'>
+										<div className='text-red-600 font-medium'>
+											No courts available on {getDayName(selectedDate.getDay())}s
+										</div>
+										<p className='text-gray-500 text-sm'>
+											This facility is closed on {getDayName(selectedDate.getDay())}s. 
+											Please select a different day to make a booking.
+										</p>
+									</div>
+								) : (
+									<p className='text-gray-500'>No booking slots available for this date</p>
+								)}
 							</div>
 						)}
 					</div>