booking capacity check for time slots

apps/web/components/BookingForm.tsx

@@ -119,21 +119,58 @@ const BookingInterface = () => {
     }
   };
 
-  const handleDateChange = (date: string) => {
+  const handleDateChange = async (date: string) => {
     setSelectedDate(date);
     setSelectedTimeSlot('');
     
     // Get time slots for the selected date from availableSlotsByDate
     const slotsForDate = availableSlotsByDate[date] || [];
-    console.log(`Time slots for ${date}:`, slotsForDate);
     
-    // Convert to TimeSlot format for TimeSlotSelector
-    const formattedTimeSlots: TimeSlot[] = slotsForDate.map((slot, index) => ({
+    // Get bookings for this date filtered by booking type IDs
+    let bookingOverlapCounts: { [key: string]: number } = {};
+    try {
+      const bookings = await bookingApi.getBookingsForDate(date, [selectedBookingType]);
+      
+      // Count overlapping bookings for each time slot
+      slotsForDate.forEach(slot => {
+        const slotStart = new Date(slot.start_time);
+        const slotEnd = new Date(slot.end_time);
+        
+        const overlappingBookings = bookings.filter(booking => {
+          const bookingStart = new Date(booking.start_time);
+          const bookingEnd = new Date(booking.end_time);
+          
+          // Check if bookings overlap with time slot
+          return bookingStart < slotEnd && bookingEnd > slotStart;
+        });
+        
+        const totalParticipants = overlappingBookings.reduce((sum, booking) => 
+          sum + (booking.participants_count || 0), 0
+        );
+        
+        const key = `${slot.start_time}-${slot.end_time}`;
+        bookingOverlapCounts[key] = totalParticipants;
+      });
+      
+      console.log('Booking overlap counts:', bookingOverlapCounts);
+    } catch (error) {
+      console.error('Error fetching bookings for date:', error);
+    }
+    
+    // Convert to TimeSlot format and filter out fully booked slots
+    const bookingTypeCapacity = selectedBookingTypeData?.booking_capacity || 8;
+    const availableTimeSlots = slotsForDate.filter(slot => {
+      const key = `${slot.start_time}-${slot.end_time}`;
+      const overlappingCount = bookingOverlapCounts[key] || 0;
+      return overlappingCount < bookingTypeCapacity;
+    });
+    
+    const formattedTimeSlots: TimeSlot[] = availableTimeSlots.map((slot, index) => ({
       id: `slot-${date}-${index}`,
       start_time: slot.start_time,
       end_time: slot.end_time,
       is_active: true,
-      max_capacity: 8,
+      booking_capacity: bookingTypeCapacity,
       booking_types: [selectedBookingType],
       is_reccuring: false,
       recurrence_pattern: undefined,