I'll create a prototype frontend based on your medical appointment booking system sequence diagram. This will implement the complete flow from phone number verification to appointment confirmation.

I've created a complete prototype frontend that implements the medical appointment booking flow from your sequence diagram. Here's what the system includes:

Key Features:

1. Phone Number Verification: Users enter their phone number to check if they're existing patients
2. Patient Registration: New patients complete a registration form with personal details
3. Calendar Selection: Both existing and new patients can select available dates and times
4. Appointment Confirmation: Final confirmation screen with appointment details

Flow Implementation:

• Existing Patient Path: Phone verification → Calendar selection → Confirmation
• New Patient Path: Phone verification → Registration → Calendar selection → Confirmation
• JWT Simulation: Mock temporary JWT tokens are generated for authentication
• Responsive Design: Works on both desktop and mobile devices

Mock Data:

• Test with phone number +1234567890 to simulate an existing patient (María García)
• Any other phone number will trigger the new patient registration flow
• Calendar shows available time slots and prevents booking on Sundays or past dates

The prototype uses modern UI components and follows the exact sequence from your diagram, making it perfect for demonstrations and further development.