[Kennyando]

Why

To cancel a booking, a user had to click the coloured status button (e.g. Pending) to reveal a hidden Cancel option. Nothing on the page hinted at this, so users didn't know they could cancel. Cancelling also happened instantly, with no confirmation.

What changed

In the user's bookings table (admin table unchanged):

• The status is now a plain coloured label, with a red outlined ✕ Cancel button beside it.
• Cancel shows for Pending and Approved bookings, the same rules as before. Cancelled and Rejected bookings show the label only.
• Clicking Cancel opens a confirm popup:
  • red ! icon and "Cancel this booking?"
  • the booking's venue and time, e.g. "MPSH · 19/11/2026 7.00 PM - 10.30 PM"
  • "You can't undo this."
  • Keep booking / Cancel booking
• Clicking Cancel or the popup buttons no longer opens or closes the row's details.
• The Status column is wider (110 → 210 px) to fit the label and button.

screenshot

Where to look

• booking-status-button.tsx: new user-view branch (label, Cancel button, confirm popup). It reuses the existing cancelButton and onUpdateStatus, so the cancel request, toast and store update are unchanged. A wrapper stops click propagation so the row's expand handler doesn't fire. React passes popup clicks up to the parent, so this covers the popup too.
• booking-base-table.tsx: builds the "venue · time" line with the existing displayDateTimeRange and passes it as a new optional details prop.
• booking-user-table.tsx: Status column width.
• booking-status-button.module.scss: layout and popup styles.

Testing

• tsc --noEmit and eslint pass.
• Tested by hand against 10 local bookings (Pending, Approved, Rejected) on the user dashboard:
  • Cancel shows only on Pending and Approved rows.
  • The popup's Keep and Cancel buttons both work.
  • The row no longer expands when you click Cancel.
• Not checked: narrow screens, where the wider Status column may push other columns.