Pick & Pack

Overview

Pick & Pack is a high-density operational workstation that turns confirmed purchase orders into completed shipments. Orders move through four explicit fulfillment stages — To Pick → Picking → Packed → Done — with location-optimized pick routes, a packing verification console, and an atomic inventory commit on completion.

Quick Start

1. Switch to Warehouse mode using the mode switcher in the header.
2. Click Pick & Pack in the left sidebar.
3. All orders in Confirmed status appear in the leftmost To Pick column.
4. Drag a card to the next column, or use the inline quick-action button on the card.
5. Open a card in Picking stage, tick each line item as you collect it from its bin.
6. When all lines are picked, advance to Packed and verify each item at the packing station.
7. When all items are verified, click Ship & Commit. The order's SKUs are atomically deducted from their bin locations and the PO advances to Received.

Four-Stage State Machine

The Pick & Pack workflow is a strict linear state machine. Each stage has a defined meaning, a distinct visual accent color, and a specific set of actions available to the operator.

The Atomic Commit (Ship & Commit)

Moving a card to Done happens exclusively through the Ship & Commit button — dragging directly to the Done column is blocked. When Ship & Commit is triggered, the system runs a pre-flight check before writing any data:

1. Validates every line item has stock available in its resolved bin location.
2. Deducts the picked quantity from each InventoryProduct.quantity.
3. Appends an out movement log entry for each SKU with the bin coordinate and timestamp.
4. Advances PurchaseOrder.status from Confirmed to Received.

Data Sources

The workstation reads from and writes to three distinct service layers, each with its own JSON store. Changes in Pick & Pack propagate to Inventory in real time on a successful commit.

Only Confirmed and Received orders appear in the workstation. Drafts, RFQs, Sent, and Cancelled orders are filtered out automatically.

UI Walkthrough

Stat Tiles

Five summary tiles above the Kanban columns give an instant snapshot of fulfillment health across all active orders.

Order Cards

Each Kanban card shows the essential information an operator needs at a glance, without opening the detail drawer:

• PO Number — displayed in monospace font (e.g. PO-2026-0042)
• Vendor name — who the goods came from
• SKU pill — e.g. 3 SKU, indicating line item count
• Units row — total unit count across all line items
• Progress bar — appears in Picking and Packed stages; color matches the stage accent
• Quick-action button — stage-specific primary action (Start Picking, Move to Pack, etc.)

Moving Cards

Two methods are available for advancing a card to the next stage:

• Drag and drop — drag the card to the target column. The destination column highlights with a primary-tinted ring when the card hovers over it.
• Inline button — the quick-action button on the card face advances it one stage without opening the drawer. Useful when you want rapid progression without inspecting the detail.

Order Detail Drawer

Click any card to open the 360px detail drawer from the right edge. The drawer's content adapts to the current stage.

The Pick Route checklist sorts items by Building → Aisle → Shelf so the operator walks the most efficient path through the warehouse. Bins are displayed with a pin icon and the full coordinate (e.g. C-A2-S1).

Footer Actions

Guardrails

Five validation rules prevent operators from skipping stages or shipping orders with outstanding problems. Each violation surfaces as a [ERR] toast notification.

Worked Examples

Example 1 — Complete Pick-Pack-Ship Cycle

1. Open the screen — a new Confirmed PO appears in the To Pick column.
2. Click the card to open the detail drawer. Review the SKUs, quantities, and bin locations.
3. Click Start Picking. The card moves to Picking; the drawer switches to Pick Route mode.
4. Walk the warehouse floor in Building → Aisle → Shelf order, ticking ✓ for each collected item.
5. All lines ticked → click Move to Pack. The drawer switches to Packing Verification mode.
6. At the packing station, click the V button for each item as you verify and box it.
7. All items verified → click Ship & Commit. Toast: [OK] Inventory committed — 25 unit(s) deducted.
8. The card moves to Done with a sealed badge and an emerald lock icon.

Example 2 — Catching Insufficient Stock

A packer verifies all four SKUs and clicks Ship & Commit. The pre-validation phase finds that SKU-541 has only 3 units on-hand but the order requires 5. The entire transaction is aborted.

• No bins are modified.
• No movement log entries are written.
• The PO status remains Confirmed.
• Toast: [ERR] SKU SKU-541 short — need 5, on-hand 3.

The operator can then go to Inventory Management to investigate the discrepancy, create an adjustment, and retry the commit once stock is corrected.

Visual Conventions

Pick & Pack uses a consistent visual language throughout the workstation to help operators work at speed without reading every label.

• Monospace font — PO numbers, SKU codes, bin labels, progress counters, and toast messages all use monospace to distinguish operational data from prose.
• ASCII state markers in toasts: [ ] unstarted, [~] in progress, [+] packed, [x] done, [OK] success, [ERR] error.
• Per-stage accent colors: sky (To Pick), amber (Picking), violet (Packed), emerald (Done). These colors appear on column headers, progress bars, and quick-action buttons consistently.
• Thin 1px progress bars: color-coded by stage, show picked/total or verified/total fraction without taking up card real estate.

Frequently Asked Questions