E-commerce kit

Every component, in its real states. AI builds the shop window; this is the back office.

Orders

@onsystem-ecommerce/OrdersList

The screen the whole e-commerce audit points at. Filter to Cancelled and watch the caption change with the data: a real store admin stayed captioned 'All Orders' while showing only cancelled rows. Then search for something that isn't there. One activeFilters array drives the caption, the empty state and the result count together, so they cannot disagree.

Orders8 total
OrderCustomerPlacedItemsPaymentStatusTotal
ORD-7829Sarah Johnson · [email protected]27 Jul 20263Credit cardCompleted$245.00
ORD-7828Michael Chen · [email protected]27 Jul 20262PayPalProcessing$189.50
ORD-7827Emma Wilson · [email protected]26 Jul 20265Credit cardShipped$432.00
ORD-7826James Brown · [email protected]26 Jul 20261Debit cardCompleted$67.25
ORD-7825Lisa Anderson · [email protected]25 Jul 20264Credit cardPending$312.80
ORD-7824David Martinez · [email protected]25 Jul 20262PayPalShipped$156.00
1–6 of 8

Order detail

@onsystem-ecommerce/OrderDetail

Line items, a customer, and a total that is computed rather than stated. There is no subtotal prop: it is derived from the items, so the list and the total cannot drift apart.

ORD-7829

ShippedPlaced 27 Jul 2026
Items
ProductQtyUnitLine total
Ultraboost 22 — Black
AP-UB22-BLK-9
1$180.00$180.00
Stoneware Mug — Sage
HM-CER-MUG
2$24.00$48.00
Activity
Mon, Jul 27
Ryan changed status to Shipped27 Jul 18:20 UTC
System changed status to Processing27 Jul 14:06 UTC
Sarah Johnson Order placed27 Jul 14:05 UTC
Order total
Subtotal
$228.00
Shipping
$6.50
Tax
$18.20
Total$252.70
Charged to Visa •••• 4242
Customer
Sarah Johnson
[email protected]
14 Rua da Prata 1100-052 Lisboa Portugal

Products

@onsystem-ecommerce/ProductsList

Stock as a semantic status column. The band is derived per row through the same stockLevelFor() the badges and filters use, and the quantity and its reorder point stay visible as their own columns. A colour with no number behind it is the decorative badge the audit flagged.

Products7 total
SKUProductCategoryPriceOn handReorder atStock
AP-APP-G2AirPods Pro (2nd gen)Audio$249.00025Out of stock
LG-CH-LRGCanvas Holdall — LargeBags$119.00820Low stock
LG-CH-STDCanvas Holdall — StandardBags$89.506120In stock
SM-GW6-44Galaxy Watch 6 44mmWearables$299.002630Low stock
HM-CER-MUGStoneware Mug — SageHome$24.0034060In stock
AP-UB22-BLK-9Ultraboost 22 — BlackFootwear$180.0021440In stock
1–6 of 7

Product detail

@onsystem-ecommerce/ProductDetail

The variant grid, plus a headline stock figure summed from it rather than stored beside it. Two independently stored stock numbers is the reconciliation failure one level up.

Canvas Holdall

LG-CH · Bags
Overview
Waxed-canvas weekend bag with a leather base and brass hardware.
Price range$89.50 – $99.00
Variants8
Total stockIn stock131reorder at 88
Variants · Size × Colour
Size \ ColourNavySageBlack
S
$89.50In stock24 on hand · reorder at 10CH-S-NVY
$89.50Low stock6 on hand · reorder at 10CH-S-SGE
not sold
M
$89.50In stock41 on hand · reorder at 12CH-M-NVY
$89.50Backordered0 on hand · reorder at 12CH-M-SGE
$94.00In stock18 on hand · reorder at 12CH-M-BLK
L
$94.00Low stock9 on hand · reorder at 12CH-L-NVY
not sold
$94.00Out of stock0 on hand · reorder at 12CH-L-BLK
XLnot soldnot sold
$99.00In stock33 on hand · reorder at 8CH-XL-BLK

Inventory levels

@onsystem-ecommerce/InventoryLevels

Every tile states its period and its unit. The audited dashboard put '+3.1%', '+12', '+45' and '+2.8%' in one row with nothing saying which were percentages. Rows are ordered worst-first, because an inventory screen that buries the out-of-stock items is not doing the merchant any favours.

Units on hand
588
1,204units vs last week
This week
Low stock
2
2SKUs vs last week
This week
Out of stock
1
1SKUs vs last week
This week
Backordered
1
Zero on hand, restock inbound
Stock movementThis week
Demo data
Mount your chart here — the frame is 200px tall before this renders.
Needs attention first
AirPods Pro (2nd gen)AP-APP-G2 · Warehouse B
Out of stock0reorder at 25
WH-1000XM5 HeadphonesSN-WH1K-XM5 · Warehouse B
Backordered00 on hand, restock inbound
Galaxy Watch 6 44mmSM-GW6-44 · Warehouse A
Low stock26reorder at 30
Canvas Holdall — LargeLG-CH-LRG · Warehouse A
Low stock8reorder at 20
Ultraboost 22 — BlackAP-UB22-BLK-9 · Warehouse A
In stock214reorder at 40
Stoneware Mug — SageHM-CER-MUG · Warehouse C
In stock340reorder at 60

Refunds

@onsystem-ecommerce/RefundFlow

The most destructive thing a merchant admin does. The refundable ceiling is computed from the order's own charges, over-refunds are blocked inline before the dialog opens, and confirming requires typing the order id: the failure mode is refunding the right amount against the wrong order.

Charged on ORD-7829
Subtotal
$228.00
Shipping
$6.50
Tax
$18.20
Total$252.70
$252.70 refundable
Issue a refund

Stock status

@onsystem-ecommerce/StockStatus

No level prop. It takes the quantity and the reorder point and derives the band, so a badge cannot claim a state the numbers do not support, and the threshold is always on screen.

In stock214reorder at 40Low stock26reorder at 30Out of stock0reorder at 25Backordered00 on hand, restock inbound

Money total

@onsystem-ecommerce/MoneyTotal

Takes a breakdown with no total field and computes the total itself. There is no prop through which a caller can state a figure that disagrees with the lines above it.

Order total
Subtotal
$228.00
Discount
−$20.00
Shipping
$6.50
Tax
$18.20
Total$232.70
Charged to Visa •••• 4242
Fully refunded order
Subtotal
$228.00
Shipping
$6.50
Tax
$18.20
Refunded
−$252.70
Total$0.00

Chart frame

@onsystem-ecommerce/ChartFrame

Height is a required number, applied as an inline style so it is resolved on the very first paint. The audited dashboard emitted three 'width(-1) and height(-1)' warnings because responsive charts sat inside parents that had not been laid out yet.

Stock movementLast 30 days
Demo data
Your chart mounts here. The frame resolved 180px before this rendered.

Variant matrix

@onsystem-ecommerce/VariantMatrix

Every axis pairing renders. A combination with no SKU is an explicit 'not sold' cell, never a blank one, because a reader cannot tell a blank from a loading bug.

Size \ ColourNavySageBlack
S
$89.50In stock24 on hand · reorder at 10CH-S-NVY
$89.50Low stock6 on hand · reorder at 10CH-S-SGE
not sold
M
$89.50In stock41 on hand · reorder at 12CH-M-NVY
$89.50Backordered0 on hand · reorder at 12CH-M-SGE
$94.00In stock18 on hand · reorder at 12CH-M-BLK
L
$94.00Low stock9 on hand · reorder at 12CH-L-NVY
not sold
$94.00Out of stock0 on hand · reorder at 12CH-L-BLK
XLnot soldnot sold
$99.00In stock33 on hand · reorder at 8CH-XL-BLK