Skip to main content

​
Overview

The Kitchen Display System (KDS) is a digital order management interface designed for kitchen staff. It replaces traditional paper tickets with a real-time, drag-and-drop Kanban board that shows all active orders and their preparation status.

​
Accessing the KDS

Navigate to Kitchen from your dashboard.
Users need the orders:read and orders:update_item_status permissions. This includes: kitchen_staff, staff, branch_manager, and org_admin.

​
Interface Overview

The KDS displays orders in a 3-column Kanban board:

Pending

New orders waiting to be started. These just came in from POS or customer QR orders.

Preparing

Orders currently being cooked. Items are actively in progress.

Ready

Completed orders ready to be served or picked up.

​
Screen Layout

┌─────────────────────────────────────────────────┐
│  Cocina [KDS]              🔄   12 ordenes      │
├─────────────────────────────────────────────────┤
│  PENDING     │   PREPARING    │     READY       │
│              │                │                 │
│  [Order #1]  │   [Order #3]   │   [Order #5]    │
│  [Order #2]  │   [Order #4]   │   [Order #6]    │
│  [Order #7]  │                │                 │
└─────────────────────────────────────────────────┘
On mobile devices, the board switches to tabs - swipe between columns for a better experience.

​
Order Cards

Each order appears as a card showing: Header:
  • Order number (e.g., #1234)
  • Customer name
  • Time since order created (e.g., “5m ago”)
  • Order type badge (Dine In / Takeout)
  • Table number (if applicable)
Items List:
  • Quantity × Item name
  • Item-level status indicators
  • Special notes in italic
  • Modifier details (size, options, etc.)
Example Card: 
┌────────────────────────────┐
│ #1234  •  John  •  7m ago  │
│ [Dine In]  Table 5         │
├────────────────────────────┤
│ ✓ 2× Burger                │
│   + Medium, Cheese, Bacon  │
│                            │
│ ⏳ 1× Pasta Carbonara       │
│   "No garlic"              │
│                            │
│ ○ 2× Soft Drink            │
└────────────────────────────┘
Item Status Icons:
  • ○ Pending (not started)
  • ⏳ Preparing (in progress)
  • ✓ Ready (completed)

​
Kitchen Workflow

1

New Order Arrives

Order appears in Pending column with a flash animation and optional sound alert.Kitchen staff sees:
  • Order number
  • All items to prepare
  • Customer name
  • Special instructions
2

Start Preparation

Kitchen staff clicks on an item or drags the order card to Preparing column.This signals:
  • Order is acknowledged
  • Preparation has begun
  • Estimated completion time starts
3

Update Item Status

As individual items are completed, click the item to mark it ready.Item-level tracking:
  • Fast items (drinks) can be marked ready quickly
  • Slow items (steaks) remain in preparing
  • Waiters can serve ready items immediately
4

Complete Order

When all items are ready, drag the entire order to Ready column.This triggers:
  • Notification to waitstaff
  • Update on customer’s order tracking page (if QR order)
  • Order appears in “Ready for Pickup” list
5

Order Served

Waiter serves the food and marks order as completed (done outside KDS).Order disappears from KDS board.

​
Real-time Features

​
Automatic Updates

The KDS updates automatically when:
  • New order is placed (POS or QR)
  • Order status changes in another terminal
  • Items are marked ready by another kitchen staff member
  • Order is cancelled by front-of-house
Updates are pushed via WebSocket on the branch:{branchId}:kitchen channel. No page refresh required.

​
Visual Alerts

New Order Flash: When a new order arrives, the card flashes yellow for 2 seconds to grab attention. Age Indicators: Orders change color based on how long they’ve been pending:
  • 0-5 min: Normal (white/gray)
  • 5-10 min: Yellow border (attention needed)
  • 10+ min: Red border (urgent)
Orders older than 10 minutes in Pending should be addressed immediately to maintain service quality.

​
Item-Level Management

Kitchen staff can update individual item status:

​
Marking Items Ready

  1. Click on an item in the order card
  2. Item status changes: pending → preparing → ready
  3. Visual checkmark appears next to the item
  4. Waiter can be notified to serve partial orders

​
Use Cases

Appetizers First:
  • Mark appetizers ready while main course is still cooking
  • Waiter serves appetizers immediately
  • Kitchen continues with main course
Drinks Separate:
  • Mark drinks ready instantly
  • Bartender or waiter serves drinks
  • Food continues cooking
Complex Orders:
  • Large table with many items
  • Serve items as they’re ready
  • Improves customer experience

​
Order Filtering

The KDS can filter orders by status: Filter Options:
  • All active orders (default)
  • Pending only
  • Preparing only
  • Ready only
Use case: Focus on pending orders when kitchen is backed up.

​
Multi-Station Kitchens

For large kitchens with separate stations (grill, fryer, salad), run multiple KDS displays filtered by item category or station assignment.
Setup:
  1. Dedicate tablet/monitor per station
  2. Each displays KDS filtered to relevant items
  3. Grill station sees only grill items
  4. All stations sync in real-time

​
Status Transitions

Valid status transitions for orders: Note: Kitchen typically moves orders from Pending → Preparing → Ready. Confirmed happens automatically or via staff confirmation.

​
Mobile Support

​
Responsive Design

KDS is optimized for tablets and mobile: Desktop (3-column Kanban):
  • Best for kitchen monitors
  • Drag and drop between columns
  • See all orders at once
Tablet (3-column compressed):
  • Smaller cards, still visible
  • Touch-friendly buttons
  • Swipe to move orders
Mobile (Tab-based):
  • Tabs for Pending, Preparing, Ready
  • Swipe between tabs
  • One column at a time
  • Larger touch targets

​
Keyboard Shortcuts (Desktop)

  • R - Refresh orders manually
  • 1 - Focus Pending column
  • 2 - Focus Preparing column
  • 3 - Focus Ready column
  • Arrow Keys - Navigate between cards
  • Space - Mark selected item ready

​
Best Practices

Acknowledge Quickly

Move orders to Preparing within 1 minute to show customers their order is being made.

Item-Level Updates

Update individual item status to enable faster partial serving.

Clear Ready Orders

Move completed orders out of Ready column promptly to avoid clutter.

Check Age

Prioritize older orders first. Red borders indicate urgent attention needed.

​
Integration with Orders

KDS is synced with the main Orders page:
  • Changes in KDS reflect in Orders dashboard
  • Changes in Orders dashboard reflect in KDS
  • Both use WebSocket for real-time sync
  • Status updates trigger notifications

​
Troubleshooting

​
Orders Not Appearing

  1. Check branch filter - ensure correct branch is selected
  2. Verify order status - only pending/preparing/ready show on KDS
  3. Refresh browser if WebSocket disconnects

​
Slow Updates

  1. Check internet connection
  2. Reload page to reconnect WebSocket
  3. Verify backend WebSocket server is running

​
Duplicate Orders

Each order appears only once on KDS. If you see duplicates, it may be a browser cache issue - hard refresh (Ctrl+Shift+R).

Build docs developers (and LLMs) love

Get started for freeTalk to us