Orders admin

A React block (a whole screen) in Beamline's Blocks category.

A shop's order desk: today's orders and revenue, quick filters for what needs doing (to fulfil, unpaid, returns), a virtualised orders grid, and the chosen order beside it with its items, fulfilment steps, shipping and payment; fulfil with a carrier and tracking number, or refund chosen items, both optimistic.

Use it for

Running a shop's orders: see what needs fulfilling, ship orders with tracking, refund items, check a customer's order and payment.

Not for

Invoices you issue and chase (invoices).
A customer's whole relationship (contact-profile).

Anatomy

app shell (your navigation, shop mark)
figures: orders today, revenue today, to fulfil, return requests
quick filters with counts: To fulfil · Unpaid · Returns · All
orders grid: order, placed, customer, items, total, payment, fulfilment
order panel beside the grid (a divider to resize; a sheet in a narrower room): status, items with quantities and prices, fulfilment steps, ship to, payment, the primary action (Fulfil, or Refund once shipped)
fulfil dialog: carrier and tracking number; refund dialog: items and quantities, the amount, a reason

States

loading (figures and grid hold their shape)
failed to load (the error with Try again)
no orders (says what lands here)
a filter with none (the grid's empty label)
payment: paid · pending · refunded · partly refunded; fulfilment: unfulfilled · packed · shipped · delivered · returned — each a word and a tone
fulfilling or refunding, done, refused (the order goes back; the reason sits in the panel with Try again)
a refund larger than what was paid is refused before it is sent

Keyboard

grid: arrows between cells, Enter opens the order in the panel
the panel divider is a separator: arrows resize it
dialogs trap focus and return it to the action that opened them

Motion

The chosen order's panel content changes in place; fulfilment steps fill toward the new step; figures roll after fulfilling or refunding; dialogs open out of their button. Reduced motion: changes are immediate.

Props

Prop	Type	Default	Description
`orders / defaultOrders / onOrdersChange`	`Order[]`	—
`onFulfil`	`(id: string, shipment: { carrier: string; tracking: string }) => Promise<void> \| void`	—
`onRefund`	`(id: string, refund: { lines: { sku: string; quantity: number }[]; amount: number; reason: string }) => Promise<void> \| void`	—
`openOrder / defaultOpenOrder / onOpenOrderChange`	`string \| null`	—
`carriers`	`string[]`	—	Default UPS, FedEx, DHL, USPS.
`loading / error / onRetry`	`boolean / Error \| null / () => void`	—
`shop`	`string`	`"Northline Goods"`
`nav`	`AppShellNavGroup[]`	—
`className / style / ref`	`string / CSSProperties / Ref<HTMLDivElement>`	—

Built from

app-shell
metric-card
chip-group
data-grid
resizable-panels
stepper
badge
button
dialog
input
select
checkbox
number-field
alert
sheet
empty-state

Dependencies

@tanstack/react-virtual, lucide-react

Import

import { OrdersAdmin } from "@/blocks/orders-admin/orders-admin";

Get it

Orders admin is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent