Details modal & inline edit

Click any event card and a bottom-sheet (mobile) / centered (desktop) modal opens with everything about the booking. Click Edit in the header and the modal flips to inline-edit mode — every field becomes editable.

Read-only view

Default mode when you tap an event:

• Customer — name in bold; phone (click to call) and email (click to mailto) below
• Service — full service name
• When — long date + time range
• Staff — assigned staff member
• Notes — optional internal notes

Status pill in the header (Confirmed / Complete / No-show / Cancelled).

Footer actions for confirmed bookings:

• Mark complete — sets status to completed
• No-show — sets status to no_show
• Cancel booking — sets status to cancelled and (per your channel toggles) sends a cancellation email/SMS to the customer

Completed / no-show / cancelled events show a quieter modal — no status actions in the footer, just the read-only data.

Edit mode

Click Edit in the modal header to flip into edit mode. The header changes to “Edit appointment” and every row becomes an input or dropdown:

• Service — dropdown of active services. Changing this auto-recomputes end_at from the new service’s duration unless you override the time.
• Staff — dropdown of active staff
• When — date + time pickers
• Status — dropdown: Confirmed / Complete / No-show / Cancelled
• Notes — multi-line textarea

Customer name + contacts stay read-only here — those edits live on the Customers page (one customer record can have many appointments; editing it from a single appointment would have weird side-effects).

Bottom of the modal:

• Cancel — discard edits, return to read-only
• Save changes — submit the patch

What the patch sends

Save calls PATCH /api/dashboard/appointments/:id with only the fields that changed plus a few derived ones:

{
  "service_ids": ["svc-..."],
  "staff_id": "stf-...",
  "start_at": "2026-05-05T18:00:00.000Z",
  "notes": "...",
  "status": "completed"     // only sent if changed
}

The server validates the new staff exists and is active, that the new time doesn’t overlap another booking on the target staff (unless you’re choosing to overlap from elsewhere), and recomputes duration from the new service if service_ids changed.

Right-click / long-press shortcuts

You don’t have to open the full modal for the common status actions. Right-click any event (or long-press on touch) and pick from the context menu:

• View details — opens the read-only modal (same as click)
• Mark complete
• Mark no-show
• Copy customer info — copies Name\nPhone\nEmail to the clipboard
• Cancel booking

Disabled items render greyed out (e.g., “Mark complete” is disabled on an already-completed booking).