![Ringle](assets/ringle-logo.png)

# Demo orders and products

## Purpose
Browse and manage the demo orders and the product catalog that your workspace's AI assistant works against. Check an order's status and delivery history. Add or edit the products the assistant can talk about.

## Prerequisites
- A demo workspace with the Ecommerce/Retail or Restaurant sector. Booking sectors (for example Auto Shop) have no order or product surface; see Notes.
- These two pages are not in the workspace sidebar. Open them by URL: append `/orders` or `/products` to your workspace address.
- Demo data seeds automatically. Everything here runs against a mock backend, so nothing you change affects real orders or customers.

## Steps

### Step 1

![demo-orders-and-products, step-01](screenshots/demo-orders-and-products/step-01.png)

**Action:** Open the Orders page by adding `/orders` to your workspace URL.

**What you should see:** The Orders page lists the seeded demo orders in a table with Order, Customer, Contact, Status, and Total columns. Each order number is dated (for example DEMO-20260703-29D082) and carries a colored status chip such as Processing, Pending, In Transit, or Delivered. Above the table are a "Search by name" box and a Status filter covering the full lifecycle (pending through delivered, ready for pickup, picked up, cancelled). There are also two header buttons: Create Test Order and Reset to Defaults.

### Step 2

![demo-orders-and-products, step-02](screenshots/demo-orders-and-products/step-02.png)

**Action:** Click any order row.

**What you should see:** A detail panel opens to the right of the table. It shows the order's status chip, its total, and a delivery timeline. The timeline has a timestamped entry for every stage the order has passed (pending, confirmed, processing, shipped, in transit, out for delivery, delivered). Orders with line items also list them with quantity and price. Below the timeline are the actions valid for that order: a "Move to" button for the next status, Cancel for orders still in pending, confirmed, or processing, and an assign-to-me button. A finished order like the Delivered one shown only offers assignment.

### Step 3

![demo-orders-and-products, step-03](screenshots/demo-orders-and-products/step-03.png)

**Action:** Open the Products page by replacing `/orders` with `/products` in the URL.

**What you should see:** The catalog renders as a grid of product cards. Each card has the product name, price, category chip, short description, an availability toggle, and pencil (edit) and trash (delete) icons. The header has Add Product, Seed, and Reset buttons. The list can be narrowed with the Search box or the Category filter. This is the same catalog the assistant quotes from in chat and voice conversations.

### Step 4

![demo-orders-and-products, step-04](screenshots/demo-orders-and-products/step-04.png)

**Action:** Click the pencil icon on any product card to open the editor. Look around. Then click Cancel to close it without saving.

**What you should see:** The Edit Product dialog shows the product's Name (required), Description, Price, Category, and Image URL fields plus an Available switch. Below a divider are two optional sections: Variants and Modifier Groups. Add Variant creates a row with name, price, and SKU. Add Group creates a named group of single- or multiple-choice modifiers with extra prices. Cancel discards everything. Update (or Create, for a new product) saves. Adding a product uses the same dialog via the Add Product button.

## Troubleshooting
- An order's action buttons are disabled and it shows an "In conversation" chip: the assistant is working on that order in a live conversation. Wait for the conversation to end and the buttons come back.
- Cancel is missing on an order: cancellation is only offered while an order is pending, confirmed, or processing. Later-stage orders can only move forward through the delivery flow.
- The list is cluttered after a lot of testing: Reset to Defaults on the Orders page (or Reset then Seed on the Products page) restores the seeded demo data. Order numbers are regenerated, so any number you quoted in an earlier chat will no longer match.
- The assistant cannot find a product you added: confirm its Available toggle is on and start a new conversation so the assistant picks up the current catalog.

## Notes
- Routes: `/demos/:demoWorkspaceId/orders` (an order can also be deep-linked as `/demos/:demoWorkspaceId/orders/:orderId`) and `/demos/:demoWorkspaceId/products`. Neither page appears in the workspace sidebar. They are reached by URL.
- Source components: `pages/demo-workspace/DemoWorkspaceOrders.jsx` (list plus the inline detail panel), `pages/demo-workspace/DemoWorkspaceProducts.jsx`, and the shared `pages/mock/ProductEditorDialog.jsx` in the portal app.
- Sector gating: order and product surfaces exist for the Ecommerce/Retail and Restaurant sectors only. Appointment and booking sectors have no order surface, matching the OMS panel behavior on the Chat page.
- The pages read and write the workspace's mock backend. Creating, cancelling, or resetting orders and editing products is always safe in a demo workspace.