25 — Tablet Front-Desk Specification
Surface: iPad Pro 12.9" (primary) or Android tablet 11"–13" — used at the hotel front desk by operators Phase: P2 / R2 Shell: Operator shell (tablet-density variant;
data-density="compact") Competitive reference: Lightspeed Hospitality (iPad), Mews (iPad), Apaleo (web-responsive)
1. Overview
The tablet front-desk app brings the full operator experience to a touch-first iPad/Android tablet form factor. It is the same codebase as the operator desktop app (21-desktop-app-specification.md) rendered at tablet density, with a touch-optimised layout, swipe gestures, and secondary-screen support for guest-facing displays.
Why separate from desktop: Desktop uses a mouse, keyboard shortcuts, dense data tables, and 1440px+ wide layout. Tablet is touch-first, uses compact density, portrait/landscape adaptive layout, and relies on large tap targets and swipe gestures.
2. Tech stack
Same as desktop operator app:
- React + Vite (web-based; served from
bff-tenant-booking-service) - Hosted in Safari (iPad) or Chrome (Android) — no Electron wrapper
- OR wrapped in Capacitor (for native push notifications + biometric auth)
- State: Zustand + TanStack Query
- UI: Operator shell with
data-density="compact"
3. Layout — Portrait (1024×1366 typical iPad Pro)
┌─────────────────────────────────────────────┐
│ [TopBar: property logo · search · alerts] │
├──────────┬──────────────────────────────────┤
│ │ │
│ [TabBar] │ [Main content area] │
│ │ │
│ □ Dash │ (e.g., Arrivals list) │
│ □ Resv │ │
│ □ H/K │ │
│ □ Folio │ │
│ □ Guests │ │
│ │ │
└──────────┴──────────────────────────────────┘
In portrait: left tab rail (48px wide, icons only) + main content.
Landscape (1366×1024)
Same as portrait but main content expands; detail panel slides in from the right (master-detail pattern) instead of navigating to a new screen.
4. Touch-specific interactions
| Interaction | Action |
|---|---|
| Swipe right on reservation row | Quick "Check in" action (haptic feedback) |
| Swipe left on reservation row | "Add note" or "Move room" |
| Long press on room in housekeeping grid | Multi-select mode |
| Pinch-to-zoom on folio | Zoom in on charge details |
| Pull-to-refresh | Refresh any list |
| Two-finger swipe from left edge | Navigate back |
5. Secondary screen (guest-facing display)
Many iPad front-desk setups include a second display facing the guest (e.g., mounted on a bracket or a second iPad). The tablet app can project to a secondary screen via:
- AirPlay (iOS) to a TV or secondary iPad
- USB-C display output (Android / iPad Pro)
Secondary screen content: Guest-facing confirmation UI (reservation summary, folio total, payment prompt, e-signature pad).
Implementation: SecondaryScreenContext in the tablet app; mirrors the GuestFacingView React component to the secondary screen via the Presentation API or Capacitor plugin.
6. Key screens and tablet-specific adaptations
6.1 Arrivals list
- Compact row height (48px vs 56px on desktop)
- Swipe actions (check-in, add note)
- Pull-to-refresh
- Search bar always visible (not collapsed)
6.2 Reservation detail
- Master-detail: reservation list on left (320px), detail on right (full remaining width) in landscape
- In portrait: detail occupies full screen; back button returns to list
6.3 Check-in flow
- Step-by-step wizard (full-screen steps; no desktop-style split pane)
- ID scan: camera permission → iOS/Android camera API → MRZ OCR (via
C6) - E-signature: finger/stylus on guest-facing secondary screen
- Payment: Adyen terminal tethered via USB or Bluetooth; OR Tap-to-Pay on iPhone (iOS 16+, no external terminal needed)
6.4 Folio
- Pinch-to-zoom on charge line items
- "Add charge" floating action button (FAB) bottom-right
- Swipe left on charge row: "Void" or "Split"
6.5 Housekeeping board
- Grid view (rooms as cards) vs list view toggle
- Drag card to reorder assignment
- Long press to multi-select (assign to attendant in bulk)
7. Offline behaviour
Same as desktop operator app (21-desktop-app-specification.md §offline):
- Read operations: from SQLite cache
- Write operations: outbox queue + sync on reconnect
- Conflict resolution: server wins; local pending changes shown with "syncing..." indicator
8. Native capabilities (Capacitor)
| Capability | Use |
|---|---|
| Camera | ID / passport scan |
| Biometric auth | Operator login (Face ID / Touch ID) |
| Push notifications | Housekeeping alerts, guest messages |
| NFC | Room key encoding (if NFC reader tethered) |
| Tap-to-Pay | Payment collection without external terminal (iOS 16+) |
9. Performance budgets
| Metric | Target |
|---|---|
| App launch to interactive (cached) | ≤ 2 s |
| List scroll frame rate | ≥ 60 fps |
| Reservation detail load | ≤ 800 ms |
| Touch response (tap to visual feedback) | ≤ 100 ms |