My Bookings
A personal portal where authenticated users manage their upcoming appointments, reschedule within availability, and review past booking history.
Overview
My Bookings is the customer-facing management portal for bookings made through TotalApp. It is split into two tabs — Upcoming and Past — so users can quickly distinguish appointments they still need to attend from those that are complete or cancelled. Each booking appears as a card with the resource name, customer details, date, time, status badge, and contextual action buttons.
Authentication required
My Bookings requires a TotalApp account. The screen displays only bookings whose customer email matches the signed-in user's account email (case-insensitive). Unauthenticated visitors should use the Public Booking Page to make new appointments; they cannot access My Bookings without signing in.
Tabs
Upcoming Tab
Shows all bookings that are on or after today's date and have a status of either Confirmed or Pending. The count badge on the tab updates whenever bookings are loaded or modified. When there are no upcoming bookings, a centred calendar icon and "No upcoming bookings" message is shown.
Past Tab
Shows all bookings with a date before today, or with a status of Completed or Cancelled regardless of date. Past bookings show a Book Again button that opens the Public Booking Page with the same resource type and resource pre-selected and automatically jumps to Step 2, so the customer can re-book the same service without scrolling through the resource grid.
Booking Card
Each booking is displayed as a card containing:
- Resource name — the full name of the booked service or room.
- Customer name and email — shown in the sub-header row beneath the resource name.
- Date — formatted as YYYY-MM-DD.
- Time range — start time to end time (e.g. 10:00 – 11:00).
- Status badge — colour-coded: green for Confirmed, amber for Pending, red for Cancelled, grey for Completed.
- Notes — shown in an indented italic block when non-empty.
- Action buttons — contextual; vary by booking state (see below).
Actions Per Status
| Status | Reschedule | Cancel | Book Again |
|---|---|---|---|
| Confirmed | ✓ — if cancellation notice period has not passed | ✓ — if within notice window | — |
| Pending | ✓ — if within notice window | ✓ — if within notice window | — |
| Cancelled | — | — | ✓ |
| Completed | — | — | ✓ |
Cancellation notice window
Whether Cancel and Reschedule buttons appear depends on the resource's cancellationHours setting. The system calculates how many hours remain until the appointment start time. If that number is greater than or equal to cancellationHours, the buttons appear. If the window has closed, the buttons are hidden and the booking can only be changed by an admin via the Resource Calendar.
Cancelling a Booking
- Find the booking in the Upcoming tab.
- Click the Cancel button (red outline, X icon) on the booking card.
- An inline confirmation appears: "Cancel this booking? Yes / No".
- Click Yes to confirm. The booking status changes to Cancelled and the card moves to the Past tab on the next reload.
- Click No to dismiss without changes.
Cancellations are not reversible
Once a booking is cancelled its status cannot be reverted by the customer. If the customer wants to rebook, they must create a new booking through the Public Booking Page or use the Book Again button on the cancelled card. Admins can manually change the status back to Confirmed in the Resource Calendar.
Rescheduling a Booking
Rescheduling opens a modal that allows the customer to pick a new date and time slot for the same resource, without cancelling the original booking first.
- Click Reschedule (circular arrow icon) on an upcoming booking card.
- The Reschedule modal opens, showing a month calendar for the same resource.
- Navigate to the desired month and click an available (non-grey) day.
- A time slot grid appears below the calendar. Click an available slot.
- Click Confirm Reschedule. The system updates the booking's date, start time, end time, and resets the status to Confirmed.
Availability in the Reschedule Modal
The modal computes availability exactly as the Public Booking Page does, but excludes the current booking being rescheduled from the conflict check — so if the customer happens to pick the same slot they already hold, it is not shown as blocked by their own appointment.
Summary Stats Bar
Below all the booking cards, a four-tile summary shows:
- Total — all bookings regardless of status.
- Upcoming — future Confirmed and Pending bookings.
- Completed — bookings with status Completed.
- Cancelled — bookings with status Cancelled.
The stats bar only appears when there is at least one booking. If the booking store is empty the tiles are hidden.