\n {/* Header */}\n

Class Schedule

\n \n 🔄\n Refresh\n \n

\n\n {/* Message */}\n {message && (\n

\n {message.text}\n

\n )}\n\n {/* Classes */}\n {Object.keys(classesByDate).length === 0 ? (\n

No upcoming classes scheduled

\n ) : (\n

\n {Object.entries(classesByDate).map(([date, dateClasses]) => (\n

\n {formatDate(date)}\n

\n {dateClasses.map((cls) => {\n const availability = getAvailabilityStatus(cls);\n const isBookingThis = bookingLoading === cls.id;\n \n return (\n \n

\n {cls.name}\n

\n {cls.description}\n

\n \n {cls.difficulty_level}\n \n

\n\n

\n 👨‍🏫\n {cls.instructor}\n

\n ⏰\n \n {formatTime(cls.start_time)} - {formatTime(cls.end_time)}\n \n

\n 🏋️\n {cls.workout_type}\n

\n 👥\n \n {availability.text}\n \n

\n\n

\n {cls.current_bookings}/{cls.max_capacity} booked\n

\n handleBookClass(cls.id)}\n disabled={!selectedMember || isBookingThis || cls.current_bookings >= cls.max_capacity}\n className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${\n !selectedMember\n ? 'bg-gray-200 text-gray-500 cursor-not-allowed'\n : cls.current_bookings >= cls.max_capacity\n ? 'bg-yellow-500 hover:bg-yellow-600 text-white'\n : 'bg-blue-600 hover:bg-blue-700 text-white'\n }`}\n >\n {isBookingThis ? (\n

\n Booking...\n

\n ) : !selectedMember ? (\n 'Select Member'\n ) : cls.current_bookings >= cls.max_capacity ? (\n 'Join Waitlist'\n ) : (\n 'Book Class'\n )}\n \n

\n );\n })}\n

\n ))}\n

\n )}\n \n );\n}","deleted","label",[168,169,150],"frontend","components","permalink","https://www.val.town/x/newbienate/my-first-val/code/frontend/components/ClassSchedule.tsx","extension","actionData","errors"]