Open the table selector
Open the full-screen table selector for a floor plan at the current location, inspect zones and tables, and make a local selection before returning to the reservation workflow. This action does not save table assignments to a reservation.
In this article
The standalone table selector helps front-of-house teams inspect the live floor plan for the selected location. It loads the layout, displays zones and tables, and lets the operator zoom, pan, select tables and review capacity feedback.
Use this guide when documenting the direct selector route for Harbor Soho in the GB demo. The selection is local to the screen or to the in-memory session draft when a sessionId is supplied; the action does not create or update reservation table assignments.
Before you start
- The operator is signed in with an organisation and location selected, or opens a contextual URL that includes both values.
- The route includes a non-empty layoutId query parameter for a layout that belongs to the current location and has not been deleted.
- The screen gate can pass with reservation:manage, reservation:view, layout:manage or layout:view, but the actual floor-plan read requires layout:view.
- For the GB demo, use Harbor Demo Group at Harbor Soho with BOOKING_TABLES_SELECTOR_LAYOUT_ID and demo tables C1, C2 and C3.
Instructions
- 1.
Open the selector route
Open /:orgId/:locationId/reservations/tables/select?layoutId=:layoutId for the current location. In the GB demo, the deep link uses APP_DEEPLINK_BASE, ORG_ID, LOCATION_ID and BOOKING_TABLES_SELECTOR_LAYOUT_ID to open the Harbor Soho floor plan directly.
- 2.
Wait for the floor plan to load
The screen loads the layout payload for the selected location and prepares the selector with zones, tables, table types, combinations and layout metadata. If the layout cannot be loaded, the selector is replaced by an error state.
- 3.
Review the plan
Use the full-screen plan to inspect the table layout. The selector fits the viewport to the layout content, shows zones and table labels, and provides pan, zoom and reset controls.
- 4.
Select or deselect tables
Tap a table without dragging to toggle it in the local selection. For the GB demo capture, select C1, C2 and C3 to show a multi-table selection on the Harbor Soho plan.
- 5.
Check capacity and combination status
Review the capacity card for maximum capacity, selected-table count and any combination warning. A multi-table selection is treated as configured only when the exact set of selected table IDs matches a layout table combination.
- 6.
Restore or leave the selector
Use the restore control to return to the selection that existed when the selector opened, or use Back to leave the selector. If occurrenceId was supplied, Back returns towards LocationReservationOccurrenceDetail with that occurrence context.
Validations and limits
- layoutId, occurrenceId and sessionId are accepted only as strings and are trimmed before use.
- The layout query runs only when organisation, location, layoutId and the frontend screen gate are all present.
- GET /api/app/{orgId}/{locationId}/layouts/{layoutId} requires layout:view and rejects an empty, deleted or wrong-location layout.
- On web, the selector first prepares Skia/CanvasKit; if preparation fails, the selector shows a preparation error.
- Dragging or pinch zooming does not select a table; only a tap without movement toggles selection.
- Selected table IDs are trimmed, deduplicated and filtered to tables that exist in the loaded layout.
- Several selected tables use an exact configured combination when one exists; otherwise the UI sums table capacities and shows the non-configured combination warning without blocking the selection.
- If sessionId is present, selection changes are stored only in a frontend in-memory draft and are lost when the app or bundle reloads.
- occurrenceId is only used for navigation back from this screen; it is not sent to useLayout from this route.
- This action does not call PUT /api/app/{orgId}/{locationId}/reservations/{reservationId}/tables.
Expected result
The operator can inspect the Harbor Soho floor plan, make a local table selection and review capacity feedback, but no reservation_table_assignment is saved by this action alone.