9:41●●● ▮

My appointments

Loading your appointments…

No appointments yet.Book a service and it shows here.Book a service

Upcoming

Engine Tune-UpsIn progressMonday, November 9 · Morning 8–10am2021 Ford F-150 Oil ChangeBookedThursday, November 12 · Morning 8–10am2018 Honda Civic Suspension & Brake ServicesBookedFriday, November 20 · Afternoon 12–2pm2018 Honda Civic

No upcoming appointments.Book a service

Past

Oil ChangeCompletedWednesday, October 14 · Afternoon 12–2pm2018 Honda Civic A/C ServicesCancelledThursday, September 3 · Morning 8–10am2021 Ford F-150 Electrical Diagnostics & RepairsNo-showWednesday, August 12 · Morning 8–10am2018 Honda Civic Suspension & Brake ServicesCompletedWednesday, July 22 · Afternoon 12–2pm2021 Ford F-150 Oil ChangeCompletedTuesday, May 5 · Morning 8–10am2021 Ford F-150

My appointments

Spec: My appointments, Appointment rules. Task: WB-9 (acceptance rows 1, 2). Vehicles, dates and the name “Alex” are placeholders. Today in the drawing is Monday, November 9.

States

State	What shows
Normal	Upcoming (soonest first) and Past (newest first), each appointment a card: service, status, day, drop-off window, vehicle. A card opens that appointment’s detail.
No upcoming	“No upcoming appointments.” with Book a service; Past still shows.
Empty	No appointments at all: “No appointments yet.” and Book a service.
Loading	“Loading your appointments…” and grey cards.
Failure	Banner “We couldn’t load your appointments.” with Try again.

Statuses

Booked, In progress, Completed, Cancelled, No-show (Appointment rules in the spec). The word is always on the card; colour only adds to it. Upcoming holds Booked and In progress; Past holds Completed, Cancelled and No-show, so a cancelled appointment moves to Past at once, whatever its day. If Past has none, the Past heading is not shown (not drawn).

Controls in this task

Every card opens Appointment detail (appointment.html, drawn here; in the mockup the card’s status picks the detail state).
Book a service (empty and no-upcoming states) opens booking (WB-8).
Back goes to Home. Bottom navigation as on Home; My appointments in gold.

?

? Paging or “show more” for a long Past list. Waits on how many appointments a customer is expected to have; not drawn, the list just scrolls.
? Whether a staff-created appointment (phone or walk-in) looks different. Not in the spec; drawn the same.