I'll build a comprehensive Slot-Based Event Booking system based on the screenshots and requirements. Let me start by reading the existing project structure and then create the components.
Let me read some of the key UI components I'll be using:
Now let me read the toast components and read the sonner for notifications:
Now I have all the context I need. Let me build the Slot-Based Event Booking system. I'll update the globals.css with the green theme, update the layout, and create the main page with all the required components.
Now let me create the main booking page and components:
I've built a complete Slot-Based Event Booking system with all the required features from the screenshots and specification:
Key Features Implemented:
- Event Details Page - Header with AOK branding, tabs for Contents and Available Slots, slot cards with time, seats, room, and trainer info, radio selection for slots with green highlight
- Booking Wizard - 2-step modal with progress indicator, Step 1 for Registration Type selection (3 options with green highlighted cards), Step 2 for Participant Management
- Participant List - Tabbed interface (Existing/Import/Add), searchable table with name/email columns, "Book Participant" and "Remove Participant" buttons
- Slot Selection Modal - Opens when booking a participant, pre-selects the slot chosen on the event page, allows changing slots with available seat counts
- Participant Assignment - Shows booked slot under participant name, Edit and Remove options after booking
- Success Toast - Shows "Event Booked Successfully" notification on booking completion with 4-second auto-close
The UI follows the green accent color scheme from the AOK screenshots with clean cards, proper spacing, and responsive design using shadcn/ui components.
Now I understand the structure. I need to add a Booking Summary section to the ParticipantListStep component. Let me update it:
Now let me update the slot selection modal to handle seat validation properly by calculating available seats considering currently booked participants:
Now let me read the main page to see how the booking state is managed, to ensure seat validation works correctly:
The seat validation is already handled in the main page.tsx with the handleBookParticipant callback that updates available seats. The slot selection modal already disables slots with 0 available seats. The implementation looks good.
Let me also update the slot selection modal to add better seat validation feedback when editing (to consider that the participant is already taking a seat in their current slot):
Now update the participant list step to pass the currentSlotId:
I've successfully added the Booking Summary section to Step 2 of the booking wizard. The changes include:
- Booking Summary Card - A dedicated card at the bottom of the participant list showing a table with Participant Name, Selected Slot, Room, Trainer, and Edit action columns
- Empty State - Shows "No participants added yet." when no participants are booked
- Edit Functionality - Clicking "Edit" reopens the slot selection modal for that participant, allowing slot changes
- Seat Validation - When editing a participant's slot, the system correctly calculates available seats by accounting for the seat that will be freed from the current slot
- Real-time Updates - The summary table updates immediately when participants are booked, edited, or removed