Interactive mockup of the proposed design. Click around — the drawer, the slide-to-confirm gestures, the recording player scrubber/speed, the campaign combobox, and the edit before/after gate are all live. Sample data = the Ram client.
Every client table uses identical fixed column widths (CSS table-layout:fixed + a shared <colgroup>), so columns line up vertically across all tables as you scroll. Long text truncates with ellipsis instead of pushing widths around. Row cell = recordings count + Details ›; whole row opens the drawer.
Try it: click any row → opens the drawer (section 2). Notice the Time / Campaign / Owner / Confirmation columns are perfectly aligned between the two client cards.
No more inline reschedule. Confirm is a deliberate slide-to-confirm with a call-first warning + optional note. Once confirmed, the card flips inline (no toast) and offers a lightweight Reset to pending. Recordings use the full player (drag-seek + speed). Edit / Full history open above the drawer and return to it.
Try it: open the pending one → click Mark Confirmed → slide the thumb right. Then use Reset to pending. Open Edit or Full history — the drawer stays underneath; closing them returns you to the drawer, never the table.
The long campaign/order <select> becomes a searchable Combobox (same UX as the dialer) fed by appointment-scoped campaigns — shows Client — Campaign with the order & remaining count. Saving opens a before/after diff with an irreversible-action warning and a slide-to-save gate.
Try it: change the campaign (type to search) and/or the time, then Review & save → see the before/after diff → slide to save.
The deliverables list gains a Confirmation column and the same Details drawer (self-loading by appointmentId), plus the lead-history slide-over. The single-item page gets the same drawer actions + confirmation status. (Edit already exists there.)
Try it: click a row's Details → the identical appointment drawer opens here too.
Today the toast is z-100 at right-0 with the same bg-background as the drawer → it merges borderlessly. Fix: success now shows inline in the drawer (no toast). Toasts are reserved for errors/background events and get a clear shadow + border + offset so they always read as separate.
Note the floating card with shadow + border, offset from the edge — never flush against a drawer.
Carried as recommendations (adjust freely): recording player standardized to full mode everywhere (drag-seek + speed); reschedule editor removed (Edit covers it); past-date confirm blocked (appt's Pacific day < today; same-day allowed even if time passed); column alignment via fixed widths; "Mark Confirmed" label + call-first warning; reverse-confirm keeps the note; Edit/History preserve the drawer. Every UI piece will be built with frontend-design + reviewed with emil-design-eng + prod real-eyes.