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 modal.

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.

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

The Call Staff function should be available from:

• Header
• More & Stuff Page

Gap: Consider adding estimated wait time for staff arrival.

Language Selection

The system supports:

• Japanese
• English

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

1.1 Search Functionality

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

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.

1.2.1 Card Information

1.2.2 Food Card Interaction Rules

There are two different interaction paths.

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

1.2.4 Menu Allergens & Dietary Tags

The Guest Portal displays the allergen information and dietary tags configured for each menu item in CMS. Only active configurations are displayed to 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.

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

1.3 Portion Specs, Nutrition & Options (Add-Ons)

Menu item information also incudes of specifications, ingredients, nutrition information, customization options, and available add-ons.

1.3.1 Portion Specs & Ingredients

The GP displays the portion size and ingredient information configured for the menu item.

1.3.2 Nutrition Information

The GP displays the configured nutritional information on the Food Detail Page when available.

If a nutrition value is not configured, that value should not be displayed on the GP.

Nutrition information older than 12 months should be flagged for review in the CMS. The GP should continue to display the configured value unless the item or nutrition information is made inactive or unavailable.

1.3.1 Customer Customization

The Food Detail Page displays the customization options configured for the menu item. Customization should clearly distinguish between Required and Optional choices. Customers can select only the options made available for the menu item.

1.3.1.1 Single Select

Use radio buttons when only one option can be selected.

• Only one option can be selected.

1.3.1.2 Multi Select

Use checkboxes for independent add-ons.

• Multiple options can be selected.

Selected add-ons are included in the order and reflected in the order total before checkout.

1.3.2 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.

1.3.3 Quantity & Add to Cart

Guests can adjust the quantity of the selected menu item using the − / quantity / + controls.

GP Food Detail Page — Overall Structure

Food Detail Page
│
├── A. Basic Menu Information
│   ├── Menu Image
│   ├── Menu Name
│   ├── Description
│   └── Price
│
├── B. Portion Specs & Ingredients
│   ├── Weight / Size
│   └── Ingredients
│
├── C. Nutrition Information
│   ├── Energy
│   ├── Protein
│   ├── Fat
│   └── Salt
│
├── D. Allergens & Dietary Tags
│   ├── Allergens
│   │   ├── Contains
│   │   ├── Free
│   │   └── Shared Equipment
│   └── Dietary Tags
│       ├── Vegetarian
│       ├── Vegan
│       ├── Gluten Free
│       └── Halal
│
├── E. Customization Options
│
├── F. Add-ons
│
├── G. Quantity
│
├── H. Special Instruction
│  
└── I. Quantity & Add to Cart

On successful addition

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

2. Add to Cart

The Order Cart is the review step after the menu detail page. It opens as a bottom sheet over the menu. The guest checks the items, chooses the service option and serving time, sees the price breakdown, and moves on to final confirmation. Nothing is submitted from this screen.

Layout (top to bottom)

2.1 Service Option

• Dine-in is selected by default when the guest arrives through a table QR code.
• Changing the option recalculates the breakdown immediately.

2.2 Serving / Pickup Time

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.

2.3 Order Item Row

2.4 Price Breakdown

Line	Formula
Subtotal	Sum of all line totals
Service Charge (10%)	Subtotal × 10%
Consumption Tax	(Subtotal + Service Charge) × tax rate (10% dine-in, 8% takeaway)
Total (Tax incl.)	Subtotal + Service Charge + Consumption Tax

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

The tax line shows the rate label ("10% Standard" or "8% Reduced"), which supports the dual-rate display requirement.

Business Rules

1. Tax rate is decided by the service option, never by the individual item.
2. Rounding: tax is rounded down to whole yen (confirm against the accounting/HMS setting).
3. Totals are always recalculated from the current cart and are never stored on the client.
4. The cart persists when the sheet is closed and while the table session is active.
5. Scheduled orders must respect opening hours and the minimum preparation time.

3. Orders Page

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