Shipment split

A React block (a whole screen) in Beamline's Inventory app.

An order's lines split across shipments. A table of lines with what was ordered and a column per shipment (new ones marked); a line already shipped can't be split, said. Split opens a row editor: the line's units per shipment, Add a shipment, the units left to place or too many on their tone, Apply only when they add up. Applying changes the draft (changed cells marked); Save commits the whole draft at once, Discard drops it, and the bar says an unsaved split is lost on leaving; a line that doesn't add up is said. What the sales channel does with a split order is said above. A refused save keeps the draft and says why. The saved shipments listed beside, the one picked showing its contents.

Use it for

Splitting an order's quantities across shipments, deliveries or parcels with a draft saved whole.
Where the total per line must always add up and some lines are already gone.

Not for

Dragging items into boxes by weight (the signature list's package allocation).
Splitting money (split-anything).

Anatomy

header: the tool's mark, Split order <id>, customer and channel
table: item and SKU, ordered, a column per shipment, doesn't add up, Split on attention or Shipped (on a phone each line stacks with its counts labelled); the row editor with a field per shipment, Add a shipment, units left, Cancel, Apply
draft bar: unsaved (what leaving does, a hint) or saved, what the channel does once split, Discard the draft, Save the split
shipments: the saved ones, the picked one's contents

States

not split, a row being edited (left, too many, all placed), draft applied, saving, saved, save refused, a shipped line
phone: the table scrolls sideways, the shipments below
right to left: mirrored
reduced motion: through the tokens

Keyboard

Tab through each line's Split, the editor's fields (arrows step units), Apply, the draft bar and the shipments

Motion

Nothing runs at rest.

Props

Prop	Type	Default	Description
`order` (required)	`{ id: string; customer: string; channel: string; }`	—
`lines` (required)	`SplitLine[]`	—
`shipments`	`SplitShipment[]`	—	The saved shipments (controlled).
`defaultShipments`	`SplitShipment[]`	—
`onShipmentsChange`	`((shipments: SplitShipment[]) => void)`	—
`onSave` (required)	`(draft: SplitShipment[]) => Promise<SplitShipment[]>`	—	Commits the whole draft; resolve with the shipments as saved (new ones get their ids), reject with why not.
`channelNote`	`string \| null`	—	What the channel does once an order is split ("Etsy stops sending order updates…").
`defaultDraft`	`SplitShipment[] \| null`	—	A draft at first (a split reopened mid-way).
`product`	`string`	—
`className`	`string`	—	Classes on the documented visual root; no override by default.
`style`	`CSSProperties`	—	Inline styles on the documented visual root; no overrides by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.

Built from

Dependencies

lucide-react

Import

import { ShipmentSplit } from "@beamline/shipment-split";

Get it

Shipment split is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent

Shipment splitComplete system · $49

An order's lines split across shipments.

Splitting an order, draft applied

Two of the six gas canisters are moved to a new shipment. The row is applied, but it's only a draft until Save commits the whole split. Discarding or leaving loses it. The map has already shipped, so it can't be split. The line above the table says what Etsy does once an order is split.

0 × 0full

States

An order not split yet, and a save the channel refuses once (nothing is saved and the draft is kept).