Restaurant Ordering System ( GUI )

Restaurant Ordering System - Functional & Business Logic Specification

This document defines the UI structure, functionality, user interactions, business rules, and expected system behavior for the restaurant self-ordering system.

Sample UI: 

The system is designed for customer to:

• Select Dine-In or Takeaway
• Browse and search the restaurant menu
• View detailed food information
• Check allergens and nutrition information
• Customize dishes
• Add items to cart
• Place multiple orders during the same dining session
• Track order status and previous order rounds
• Call restaurant staff digitally
• Change language and display theme
• View table and system information

User	Main Responsibility
Customer	Browse menu, customize food, place orders, track orders, request staff assistance
Floor Staff	Receive guest assistance requests and respond to them
Kitchen Staff	Receive food orders, preparation instructions, and takeaway packing instructions
Restaurant Management	Configure menu, prices, taxes, allergens, categories, cancellation policy and ordering rules

QR Code Access & Session Initialization

The customer's ordering session begins by scanning a QR code placed at the table.

• Step 1 - Scan: The customer scans the table QR code using their phone camera (no app installation required).
• Step 2 - Link Opens: The QR code resolves to a mobile web link that opens directly in the customer mobile browser and loads the Restaurant Ordering System for that specific table.
• Step 3 - Session Loads: The system initializes a session tied to the table and immediately displays the current table/session information, including the customer (guest) count.
  

Note: The guest/customer count should be confirmed (or editable) at session start, since it affects kitchen prep quantities and can be referenced by floor staff when responding to assistance requests.

1. Home Page Features

The Home Page acts as the main entry point for the customer and provides access to menu browsing, ordering, language selection, staff assistance, and the current order.

Element	Function	Behavior
Table Number	Shows the current table	Example: Table 12
Order Type	Allows the guest to select the order type	Guest can switch between Dine-in and Takeaway.
Menu Pricing	Displays prices based on the selected order type	Dine-in: Menu price includes the applicable 10% consumption tax.   Takeaway: Menu price includes the applicable 8% consumption tax.   When the guest switches the order type, menu prices are updated accordingly.
Language Switcher	Changes interface language	Japanese ↔- English
Staff Call Icon	Allows the guest to request assistance	Opens the Staff Assistance modalmodal.

Business Logic

• Instant recognition for both domestic customer and foreign tourists.
• Helps customers differentiate fast appetizers from slow main courses.
• Legally mandated in Japan under the Total Price Display Requirement.
• Opens the deep Food Detail Overview Modal for allergy review, flavor choices, and kitchen notes.
• For simple items without required options (such as draft beer), it adds the item to the order in 1 tap for rapid ordering.

2. Call Staff Function

Guests can request assistance without needing to physically call or wave to restaurant staff.

The Call Staff function should be available from:

• Header
• More page& Stuff Page

Gap: Consider adding estimated wait time for staff arrival.

3. Language Selection

The system supports:

• Japanese
• English

Changing the language should immediately update:

• Food names
• Food descriptions
• Categories
• Allergen information
• Customization options
• Buttons and system labels
• Messages and notifications

Business Rule

• Changing language must not clear the cart, reset the current order, or refresh the entire session.

Gap

Missing Chinese ( Simplified) and Korean for tourist-heavy areas (Tokyo, Kyoto, Osaka).

4.1.1 Search Functionality

Search by dish name, ingredient, taste/flavor, category in Home Page.

Gap:

• No dietary filter (vegetarian, vegan, halal, gluten-free).
• No allergen-free search (e.g., "show egg-free dishes").

Recommendation:

• Add dietary filter badges

5.1.2 Food Card

Each menu item should provide enough information for the guest to make a quick ordering decision without opening the detail page.

5.1.2.1 Card Information

6.

1.2.2 Food Card Interaction Rules

There are two different interaction paths.

7.

1.2.3 Food Detail Overview

When the guest taps a food card, a bottom-sheet Food Detail Modal opens.

• Food Image
• Dish Name
• Description
• Price
• Weight / Portion
• Ingredients
• Nutrition
• Allergen Information
• Customization
• Special Request
• Quantity
• Add to Cart

7.11.2.4 FoodMenu SpecificationsAllergens & Dietary Tags

The informationGuest shouldPortal be presented clearly without makingdisplays the modalallergen difficultinformation and dietary tags configured for each menu item in CMS. Only active configurations are displayed to scan.guests.

Allergen Information

The Guest Portal displays the allergen status associated with a menu item.

The following mandatory allergens are supported:

1. Wheat
2. Egg
3. Milk
4. Shrimp
5. Crab
6. Buckwheat
7. Peanut
8. Walnut

Example:

Peanut — Shared Equipment
This menu item does not contain peanuts, but it may have been prepared using equipment that also processes peanuts.

Dietary Tags

The Guest Portal displays dietary tags associated with the menu item.

7.2 Allergen Information

Allergen information should be clearly visible within the food detail screen.

S.No	Allergen
1.	Egg
2.	Milk
3.	Wheat
4.	Buckwheat
5.	Peanut
6.	Shrimp
7.	Crab
8.	Walnut

Restaurant meals and over-the-counter prepared foods do not — there is no legal obligation to provide allergy information at all. That said, allergen disclosure in restaurants is officially encouraged as a voluntary practice.

" Many major chains publish allergen information voluntarily, despite having no legal duty to do so. McDonald's Japan offers an official menu-by-menu allergen search, and notes that items subject to cross-contact — shared frying oil, production lines, or in-store preparation — appear even in results filtered for "not used." The Skylark group (Gusto and other brands) runs a search site by brand covering the nine mandatory allergens plus 19 recommended items, with explicit warnings about shared cooking utensils, tableware, frying oil, and drink-bar nozzles. Mos Burger publishes its allergen data as PDF charts and notes that contamination at factories or in store kitchens remains possible (all per each company's official site as of August 14, 2026). " 

https://japansoso.com/en/article/japan-restaurant-allergy-guide-2026

 

Portion Specs, Nutrition & Options (Add-Ons)

 

 

8.3 Customization

Customization should clearly distinguish between Required and Optional choices.

8.3.1 Single Select

Use radio buttons when only one option can be selected.

• Only one option can be selected.

8.3.2 Multi Select

Use checkboxes for independent add-ons.

• Multiple options can be selected.

9. Kitchen Special Request

A free-text field allows guests to provide additional instructions. The request should be sent to the kitchen together with the corresponding item.

10. Add to Cart

The Add to Cart button should always display the current calculated amount.

10.1 On successful addition

1. Item is added to cart.
2. Cart count updates.
3. Cart total updates.
4. Confirmation toast appears.

11. Payment Integration

11.1 Japan Market Trend:

• QR code payment integration (PayPay, Rakuten Pay, d Payment) is standard in mobile ordering systems.
• AirREGI Order integrates with AirPAY for cashless payment at table.
• Post-pandemic expectation: Guests expect to pay via smartphone without staff interaction.

11.2 Recommendation:

• Add QR code payment option (PayPay, LINE Pay, credit card).
• Consider split billing for group dining (common in Japan).

11.3 Dine-In vs Takeaway Tax Treatment 

Different tax rules for dine-in (standard consumption tax 10%) vs takeaway (reduced 8%).

11.4 Schedule Specific Time (Per-Item Availability)

As soon as possible (ASAP) vs Schedule Specific Time is not offered on every menu item. It is only enabled for specific items configured by Restaurant Management.

10. Order Batch Logic

Each submitted order receives its own:

• Order ID
• Timestamp
• Status
• Item list
• Subtotal

12. Theme Preference (Light/Dark

• Most systems use fixed light theme or auto-switch based on time.
• Izakaya-specific systems sometimes offer dark mode but not user-selectable.

Ensure dark theme meets Web Content Accessibility Guidelines (WCAG) for accessibility.

13. Kitchen Integration 

Orders sent to kitchen with special requests, takeaway packing instructions.

13.1 Gap: 

• Routing rules: Different items route to different kitchen stations (grill, fry, cold).
  
• No item routing rules (which kitchen station prepares each item).

https://www.chowbus.com/blog/kitchen-display-system-for-restaurant-operations

14. Order Cancellation Policy

Customers cannot cancel a submitted order directly through the app at any time. Self-service cancellation is only available while the order is within its active cancellation window before the countdown/preparation timer (time screen) on the order finishes.

Stage	Cancellation Method	Behaviour
Time Screen still running (Before Kitchen start prep)	Self-service cancel	Customer can cancel the order directly from the Order Receipts
Time screen finished (prep window elapsed / kitchen has started)	Request-based cancellation only	Customer can no longer cancel directly, must submit a cancellation request via the Call Staff / Table Assistance

Request-based flow once the time screen has finished:

• Customer opens Call Staff / Request Table Assistance.
• Customer selects a reason indicating they want to cancel an order.
• Request is sent to Floor Staff.
• Floor Staff reviews the request with the kitchen and manually approves, partially approves, or declines the cancellation (e.g., if the dish is already prepared).

Frontend Module Structure

src/
├── components/
│   ├── FoodCard/
│   ├── FoodDetailModal/
│   ├── Cart/
│   ├── OrderTracking/
│   ├── StaffCallModal/
│   └── CategoryNav/
├── hooks/
│   ├── useCart.ts
│   ├── useSession.ts
│   ├── useLanguage.ts
│   └── useOrderHistory.ts
├── stores/
│   ├── cartStore.ts (Zustand)
│   ├── sessionStore.ts
│   └── themeStore.ts
├── services/
│   ├── api.ts (REST/GraphQL client)
│   ├── websocket.ts (real-time order status)
│   └── offlineQueue.ts (retry logic)
├── utils/
│   ├── allergenUtils.ts
│   ├── taxCalculator.ts
│   └── sessionManager.ts
└── types/
    ├── menu.ts
    ├── order.ts
    └── session.ts