🚚 bakery

Delivery Orders

Delivery Orders is a shared, live order board for anything you deliver out of the bakery — orders placed via Swiggy, Zomato, phone, WhatsApp, your website or walk-in/direct — tracked through a clear pickup-to-delivery status pipeline with delivery agent and ETA fields.

📍 Menu path: Bakery → Delivery Orders

👤 Who uses it: All roles can view, create and update delivery orders; no plan-tier restriction

Overview

This is the same shared component used by other food-service variants (e.g. a restaurant app); the bakery app mounts it with an apiPrefix of /bakery, so every API call it makes is automatically routed to the bakery-specific delivery-orders endpoints without any code change to the component itself — the same shared page could be re-mounted elsewhere by only changing that one prop.

Every order shows a platform badge (Swiggy, Zomato, Phone, WhatsApp, Website or Direct), a live elapsed-time badge that turns amber then red the closer it gets to (and past) the order's own ETA, and a coloured left border matching its current status.

Orders progress through New → Accepted → Preparing → Ready → Out for Delivery → Delivered, or can be Cancelled at any point before Delivered.

The board auto-refreshes silently every 30 seconds so orders pushed in by an external delivery-platform integration appear without a manual reload.

Before You Start

None — no plan-tier gate.
Selecting an existing customer in the New Order form auto-fills their saved address and, if they have a previous delivery order on file, pre-fills the item list from that last order as a starting point.

Step-by-Step Guide

1 Create a new delivery order

Click New Order.
Choose the Platform: Swiggy, Zomato, Phone, WhatsApp, Website or Direct.
Search for the Customer by name or phone — picking one auto-fills their delivery address from their saved profile and, if they have ordered delivery before, pre-fills the Order Items from their most recent order.
Adjust or add Order Items (name, quantity, price) — the Total updates live.
Fill Delivery Address * (required) if not already auto-filled, plus optional Delivery Route and ETA (minutes).
Add any Notes / Special Instructions, e.g. "No onion".
Click Create Order.

2 Advance an order through its status

Click the coloured action button on any order card — its label always matches the next status (Accept, Start Preparing, Mark Ready, Out for Delivery, Mark Delivered) — to move it one step forward.
Click a card to open its Detail Drawer for more granular options, including jumping directly to any status out of order, or cancelling the order.

3 Assign a delivery agent and set the ETA

Open an order's Detail Drawer.
Type the delivery agent's name into Delivery Details, adjust the ETA (minutes) if needed, then click Save — this is what powers the on-card elapsed-time/late indicator for that order.

4 Monitor how late an order is running

Watch the elapsed-time badge on each active order card — green while comfortably within ETA, amber once past roughly 70% of the ETA, and red with a "LATE" label once the order has been active longer than its ETA.

5 Filter, search and refresh the board

Use the date picker to view a different day's orders — defaults to today.
Use the search box to find an order by order number, customer name or phone.
Use the status and platform dropdowns to narrow the board.
Click the refresh icon to force an immediate reload instead of waiting for the 30-second auto-refresh.

Every Field & Button, Explained

Field / Button	What it does
`New Order`	Opens the delivery order creation form.
`Active / Out for Delivery / Delivered Today / Delivered Revenue KPI tiles`	Summary counts and total revenue across the currently loaded date.
`Date picker`	Selects which day's orders to view; defaults to today.
`Search order, customer, phone…`	Filters the board by order number, customer name or phone.
`Status filter dropdown`	Narrows the board to one status.
`Platform filter dropdown`	Narrows the board to one channel (Swiggy, Zomato, Phone, WhatsApp, Website, Direct).
`Refresh icon`	Forces an immediate reload, independent of the automatic 30-second refresh.
`Order card`	Platform badge, order number, status badge, elapsed-time badge, customer, phone, agent, address, total, time, and next-status action button.
`Detail Drawer`	Customer/phone/address/notes, order items and total, Delivery Agent name field, ETA minutes field with Save, a full status-jump list, and Cancel Order.
`Platform picker (New Order)`	Swiggy, Zomato, Phone, WhatsApp, Website, Direct.
`Customer Name * (with live search/autofill)`	Searches existing customers and auto-fills address and last-order items on selection.
`Phone`	Customer contact number.
`Delivery Address *`	Required destination address.
`Order Items + Add Item`	Name, quantity and price rows making up the order.
`Delivery Route`	Optional free-text route label, e.g. "North Route".
`ETA (minutes)`	Estimated time to delivery; drives the elapsed-time badge.
`Notes / Special Instructions`	Free-text delivery instructions.

Tips & Best Practices

Fill in the delivery agent's name and a realistic ETA as soon as an order goes Out for Delivery — the elapsed-time badge is only useful for catching late deliveries if the ETA reflects reality.
Use the platform filter at peak hours to focus on just one channel, e.g. Swiggy, if a single delivery partner is causing a backlog.
Rely on the customer search auto-fill for repeat delivery customers — it saves re-typing both the address and the usual order items.
The board refreshes itself every 30 seconds — you rarely need the manual refresh icon except right after making a change you want to confirm instantly.

Troubleshooting & FAQ

An order from Swiggy or Zomato appeared without me creating it.

Orders can be created here directly, or injected by an external delivery-platform integration; the board polls every 30 seconds specifically to surface those without a manual reload.

The elapsed-time badge isn't showing on an order.

It only appears for orders in an active status — New, Accepted, Preparing, Ready, or Out for Delivery. Delivered and Cancelled orders do not need a live timer.

I can't seem to skip an order straight to Delivered.

Use the Detail Drawer's full status list rather than the card's single next-status button — the card only advances one step at a time, but the drawer lets you jump to any status directly.

New Order didn't pre-fill the customer's items.

Pre-fill only triggers if that phone number has at least one previous delivery order on file; brand-new delivery customers start with a single blank item row.

Delivered Revenue on the KPI row looks lower than expected.

It only sums orders with status Delivered for the currently selected date — orders still Out for Delivery, or delivered on a different date, are not included.

🧑‍💻 Developer Notes

Source component(s):

frontend-app/packages/pos-react-lib/src/pages/shared/FnbDeliveryOrdersPage.jsx

Backend endpoints used:

GET /bakery/delivery-orders
POST /bakery/delivery-orders
PUT /bakery/delivery-orders/:id

Related tables (db-core repositories):

DeliveryOrder

Redux slices:

None — local component state only; polls on a 30-second interval

Feature flag key: delivery_orders

This is the shared FnbDeliveryOrdersPage component, mounted in the bakery app as <FnbDeliveryOrdersPage apiPrefix="/bakery" /> — every GET/POST/PUT call inside the component prefixes its path with whatever apiPrefix is passed in, which is how the exact same component also serves a restaurant variant (mounted there with apiPrefix="/restaurant") without any bakery-specific code existing in the shared file itself. If the backend's INSERT ... RETURNING is unavailable on an older SQLite build, the component falls back to constructing a temporary local order object client-side so the new order still appears immediately.