fix the capacity and NaN participants issue

apps/web/components/TimeSlotSelector.tsx

@@ -4,7 +4,7 @@ import { useTranslations } from 'next-intl';
 import { TimeSlot } from '@/types/bookings';
 
 interface TimeSlotSelectorProps {
-  timeSlots: TimeSlot[];
+  timeSlots: (TimeSlot & { availableCapacity?: number })[];
   selectedTimeSlot: string;
   onTimeSlotChange: (slotId: string) => void;
   loading?: boolean;
@@ -85,6 +85,11 @@ const TimeSlotSelector: React.FC<TimeSlotSelectorProps> = ({
                 <div className="font-medium">
                   {formattedTime}
                 </div>
+                {slot.availableCapacity !== undefined && slot.availableCapacity > 0 && (
+                  <div className="text-xs mt-1 text-green-600">
+                    {slot.availableCapacity} spots left
+                  </div>
+                )}
                 {!isAvailable && (
                   <div className="text-xs mt-1">Unavailable</div>
                 )}