I'll help you integrate these APIs into your reservation page and create the necessary forms. Let me first explore your codebase to understand the current structure.

I can see you have a reservation page and related components. Let me examine the existing reservation form and events page to understand the current structure:

Now I understand your current structure. I'll update the reservation page to integrate with your APIs and match the payload structure you provided. Let me implement the following:

1. Reservation Page API Integration - Update to match your payload fields
2. Events API Integration - Fetch events from /api/events/public/
3. Booking API Integration - Post bookings to /api/events/public/book
4. Catering API Integration - Post catering requests to /api/events/public/catering

Let me update the reservation page:

Now let me continue updating the component:

Now let me update the events-catering page to integrate the catering API:

I've successfully integrated all three APIs into your reservation and catering system. Here's what I've implemented:

Summary of Changes:

1. Reservation Page (/reservation)

• Fetches branches from http://127.0.0.1:8000/api/events/public/
• Posts booking data to http://127.0.0.1:8000/api/events/public/book
• Updated form fields to match your payload: name, email, phone, branch, guests, reservation_datetime
• Added proper datetime formatting (combines date + time into ISO format)
• Error handling and loading states
• Shows confirmation with all submitted details

2. Events & Catering Page (/events-catering)

• Integrated catering request POST to http://127.0.0.1:8000/api/events/public/catering
• Updated form to use the same payload structure for consistency
• Added catering package selection UI
• Improved form layout with proper validation
• Success/error messaging
• All fields align with your API requirements

3. Key Features Added:

• Loading states with spinner icons
• Error handling with user-friendly messages
• Success confirmation messages
• Proper datetime formatting for API compatibility
• Form field validation before submission
• Responsive design maintained
• All API endpoints use the exact payload structure you specified

The forms now properly collect all the required data and send it to your backend APIs. Make sure your backend is running on http://127.0.0.1:8000 for the APIs to work correctly.