RestroAI POS SaaS Hospitality UI Guide
Ctrl+K
Visual System
Docs / Hospitality UI Redesign
Whole-App Visual System

Hospitality UI Redesign Guide

This page documents the RestroAI visual redesign: warm hospitality tokens, grouped restaurant operations navigation, shared components, module-specific visual direction, screenshots, graphics, and flow diagrams for the whole application.

1. Quick Summary

The redesign changes RestroAI from a generic admin dashboard into a restaurant operations product. The app now uses a shared hospitality visual layer, grouped tenant navigation, operational page-header graphics, consistent cards/tables/actions, and local-only assets.

Charcoal ink Tomato action Herb success Brass warning Blue info Plum AI
Hospitality warm visual system board
Visual system board showing the color tokens, card structure, table pattern, operational graphics, and action language used across the redesigned shell.

2. Screenshots And Visual Mockups

The current local development database redirects to the installer, so the live screenshot below captures the redesigned installer/auth shell. The tenant workspace visual is a documentation mockup that reflects the grouped navigation and hospitality product direction.

Live installer screenshot after the hospitality UI redesign
Live screenshot captured from /install. Installer pages now load the shared hospitality CSS while still rendering without the duplicate full-page loader.
Tenant workspace visual mock screenshot
Tenant workspace target visual: grouped module navigation, restaurant workspace header, module search, compact nav toggle, KPI cards, table map, POS drawer, KDS state, and AI action area.

3. Whole-App Flow Diagram

RestroAI has two major data boundaries: central SaaS records and tenant-local restaurant operations. Central billing and provisioning activate the restaurant workspace; operational modules create tenant-local snapshots; reports and AI read those snapshots as evidence.

Whole app operating loop diagram
Whole-app operating loop from central SaaS through setup, menu, operations, inventory, guests, reports, and AI intelligence.

4. Shell And Navigation

Tenant Workspace Header
  • Shows tenant/restaurant identity as the first visual signal.
  • Adds a restaurant workspace subtitle and active status chips.
  • Provides module search and compact navigation controls.
  • Keeps logout behind the existing confirm Swal flow.
Grouped Module Navigation
  • Operations: Dashboard, POS, POS Ops, Pay Recovery, POS QA, KDS, Waiter PWA.
  • Setup: Setup, Branches, Floors, Tables, Stations, Staff.
  • Menu & QR: Menu, Table Map, QR Codes, QR Orders.
  • Guest, Inventory, and Intelligence groups reduce scrolling and wrapping.

5. Module Visual Coverage

Platform / SaaS Central tenancy, plans, subscriptions, payment sandbox, Mailpit, and provisioning actions use the shared table and action patterns.
Restaurant Setup Readiness boards, floor lab, tables, stations, staff assignments, and plan usage meters use map-first visuals.
Menu Operations Category rails, item inspectors, draft/publish timelines, QA warnings, media panels, and AI copy areas use Pro Studio framing.
POS Cashier Touch-first cart, bill, payment, receipt, table state, shift warning, split studio, and manager approval flows are visually prioritized.
KDS Station boards use colored bands, timers, delay glow, ready/served states, sound toggles, and print controls.
Waiter PWA Mobile table cards, offline queue state, alert pulse, sync progress, and order workspace drawers are compact and touch-friendly.
QR Menu Guest cart, modifier prompts, upsells, submit states, waiter approval, and table heatmaps are customer-safe and token scoped.
Inventory Recipe cost cards, unit conversion hints, low-stock badges, expiry timelines, stock ledger, and variance visuals show operational risk.
Guests Customer 360, loyalty ledger, coupons, gift cards, calendar reservations, waitlist, and reminders get timeline-first views.
Reports + AI Chart.js widgets, heatmaps, drilldowns, evidence drawers, anomaly rails, and AI actions form the intelligence studio.

6. POS, KDS, And Inventory Flow

POS is the operational source for order and payment state. Sending items creates KDS tickets and inventory bridge events. Refunds and voids reverse the same facts without rewriting historical snapshots.

POS to KDS flow diagram
POS to KDS flow with open-shift enforcement, cart building, KDS routing, payments, receipt/KOT printing, inventory hooks, and reporting evidence.

7. QR Menu And Waiter Approval Flow

QR ordering is customer-facing but never trusted as a direct kitchen mutation. The table QR token opens a customer session, the guest submits an order request, then an assigned waiter or manager approves it into POS/KDS.

QR ordering and waiter approval flow diagram
QR customer menu workflow from published table layout through guest cart, waiter approval, POS conversion, KDS ticket, and table revenue heatmap.

8. Reports And AI Flow

Reports use tenant-local operational facts. AI is disabled by default, gated by plan credits and provider configuration, and must cite stored metric evidence for every generated insight.

Reports and AI evidence flow diagram
Reports and AI evidence flow from operational sources to snapshots, visual widgets, deterministic checks, provider calls, evidence drawers, and manager actions.

9. Shared UI Components

Existing Components Preserved
  • x-ui.page-header keeps module title, subtitle, actions, and compact metadata.
  • x-ui.kpi-card is restyled with status stripes, icon badges, and sparkline space.
  • x-ui.chart-card gets stronger framing for Chart.js widgets and loading states.
  • Shared table patterns keep dense headers, status pills, actions, empty states, and pagination.
New Components Added
  • x-ui.status-pill for semantic states.
  • x-ui.module-card for module launch cards and demo cards.
  • x-ui.metric-strip for compact operational metrics.
  • x-ui.empty-state and x-ui.action-toolbar for consistent screens.

10. Motion And Accessibility

  • Card entrance, KPI count-up, nav hover, table pulse, drawer motion, and report chart entrance are restrained and state-driven.
  • prefers-reduced-motion is respected so nonessential motion is disabled automatically.
  • Radius is controlled at 6-8px for operational surfaces, avoiding oversized marketing-card styling.
  • Decorative orbs are replaced by ticket lines, table grids, receipt strips, station bands, and chart strokes.

11. Verification

Completed checks: php artisan test passed with 86 passed, 1226 assertions. npm run build passed. Route lists for r/, demo-studio, and guided-demo passed. Browser smoke confirmed local redesigned assets load and installer pages render with zero [data-page-loader] nodes.

12. Files To Know

  • public/assets/css/restroai-hospitality.css is the global visual-system override layer.
  • public/assets/js/restroai-hospitality.js handles module search, compact nav, active scrolling, and count-up motion.
  • resources/views/layout/tenant/app.blade.php contains the grouped tenant workspace shell.
  • documentation/assets/media/ui-redesign/* contains screenshots, graphics, and flow diagrams for this guide.