OrdersList

Import

import { OrdersList } from '@tallyui/components';

Usage

<OrdersList
  orders={orders}
  onRetry={(orderIds) => outbox.requeue(orderIds)}
  stuck={outbox.state.stuck}
/>

Renders Recent orders and a Needs attention section when applicable, with expandable line and payment details, sync status, and warnings. Eligible rejected orders have a Retry action that calls onRetry.

Server order history

Pass the store's order history as history to show it in Recent with the till's own sales. Each row is platform-neutral, and the app maps its own store's orders into it:

import { OrdersList, type OrderHistoryRow } from '@tallyui/components';

const history: OrderHistoryRow[] = storeOrders.map((order) => ({
  id: order.id,
  clientOrderId: order.clientOrderId, // the till's PosOrder id, when the till placed it
  reference: order.code,
  placedAt: order.placedAt,
  totalMinor: order.totalMinor,
  currency: order.currency,
  itemCount: order.itemCount,
  stateLabel: order.stateLabel,
}));

<OrdersList orders={orders} history={history} onRetry={(orderIds) => outbox.requeue(orderIds)} />

• The outbox row wins. A history row whose clientOrderId is the id of an order in orders is hidden while that order is there.
• Newest first. Recent merges outbox orders (by createdAt) and history rows (by placedAt). At equal times the outbox order comes first. A time that does not parse goes last.
• Read-only. A history row shows Order <reference> · <n> items and <date> · <total> · <stateLabel>, with reference, itemCount and stateLabel as given. It has no detail, no Retry and no warnings, and never appears under Needs attention.

Without history, the list renders exactly as before, with orders in the given order.

Props