# Purchase order desk A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Inventory](https://beamline.io/components/apps/inventory) app. Live demo: https://beamline.io/components/purchase-order-desk Purchase orders for stock from draft to closed. The list of orders with status (ready for review on warning, approved, ordered and partly received on info, received on success) and total, filtered by status, beside the chosen order with its progress through draft, review, approved, ordered, received and closed. A draft takes a vendor, ship to (a folder), bill to, expected date and lines of existing items only (up to 100), each with how many, the unit price (last paid offered; unknown said and needed before review) and total. Review is approved or sent back by someone who can approve; anyone else sees it waiting. An approved order is marked ordered; its prices read as figures and stay editable (Edit prices) until it closes, each save a new revision. Receiving (Update stock or Record the receipt only, one switch with what it does) updates stock into a folder per line (an item new to that folder is added there, said) or records the receipt only; how many came of what remains, zero allowed; a receipt keeps one key until answered, so a retry after no answer can't count it twice. Each line shows how much is in as one-hue progress. Closing is from a menu, confirmed, final, and keeps what never came. Accounting: an expense account (only expense ones), the vendor there, bill number and date; not sent, synced at which revision, behind after an edit (sending again updates the same bill), refused with the reason, or no tool connected. ## Use it for - Ordering stock from suppliers with review and approval, receiving deliveries into folders, and sending orders to accounting. - Partial deliveries where what never came must stay on record after closing. ## Not for - Receiving a salon's deliveries line by line without approval or accounting ([purchase-orders](https://beamline.io/components/purchase-orders)). - Asking for something to be bought before an order exists ([purchase-request](https://beamline.io/components/purchase-request)). ## Anatomy - header: the tool's mark, Purchase orders, New order - list: Status filter; each order's number, status, vendor and total - order: number, vendor, total, status, More (Close the order); progress; vendor, ship to, bill to, expected; lines on hairlines with how many and price as figures that edit in place, total and how much is in; Add an item - receiving: Update stock · Receipt only (a switch); each open line's how many came and where; Receive - accounting: state, expense account, vendor there, bill number, bill date, Send ## States - draft with a missing price or vendor, ready for review, waiting for an approver, approved, ordered, partly received, received, closed with what never came - receiving: updated, receipt only, new to a folder, no answer then retried - accounting: not connected, not sent, synced, behind after an edit, refused - no orders - phone: one column - right to left: mirrored - reduced motion: through the tokens ## Keyboard - Tab through the list, the order's fields and lines, the receiving lines, and the accounting fields; More opens with Enter ## Motion Nothing runs at rest. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `orders` | `PurchaseOrder[]` | — | | | `defaultOrders` | `PurchaseOrder[]` | — | | | `onOrdersChange` | `((orders: PurchaseOrder[]) => void)` | — | | | `vendors` (required) | `{ id: string; name: string; }[]` | — | | | `folders` (required) | `{ id: string; path: string; }[]` | — | | | `items` (required) | `PoItem[]` | — | | | `accounting` (required) | `AccountingLink \| null` | — | The connected accounting tool; null when none is connected. | | `onAction` (required) | `(action: PoAction) => Promise` | — | | | `canApprove` | `boolean` | — | Who is using it can approve orders. | | `currency` | `string` | — | | | `defaultOrder` | `string \| null` | — | | | `defaultReceiving` | `boolean` | — | Open the chosen order's receiving at first. | | `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` | — | Receives the documented native target or imperative handle; omitted by default. | ## Built from - [Alert](https://beamline.io/components/alert.md) - [Avatar](https://beamline.io/components/avatar.md) - [Bottom sheet](https://beamline.io/components/bottom-sheet.md) - [Button](https://beamline.io/components/button.md) - [Calendar](https://beamline.io/components/calendar.md) - [Combobox](https://beamline.io/components/combobox.md) - [Date picker](https://beamline.io/components/date-picker.md) - [Dropdown menu](https://beamline.io/components/dropdown-menu.md) - [Inline edit](https://beamline.io/components/inline-edit.md) - [Input](https://beamline.io/components/input.md) - [Label](https://beamline.io/components/label.md) - [Number field](https://beamline.io/components/number-field.md) - [Segmented control](https://beamline.io/components/segmented-control.md) - [Select](https://beamline.io/components/select.md) - [Spinner](https://beamline.io/components/spinner.md) - [Stepper](https://beamline.io/components/stepper.md) - [Text morph](https://beamline.io/components/text-morph.md) - [Tooltip](https://beamline.io/components/tooltip.md) ## Dependencies `lucide-react` ## Import ```tsx import { PurchaseOrderDesk, TONE } from "@beamline/purchase-order-desk"; ``` ## Get it Purchase order desk is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect) ## More in Inventory - [Stock count](https://beamline.io/components/stock-count): A shelf counted. Count: the products on it with counted units, not counted (an empty field that changes nothing) kept apart from a counted zero, expected… - [Inventory counts](https://beamline.io/components/inventory-counts): Recurring stock counts from plan to shelf: a phone-first count of one occurrence where an untouched part reads not counted and a zero reads counted, none… - [Goods receiving](https://beamline.io/components/goods-receiving): Goods received against purchase orders and invoices. Cards grouped by purchase order or invoice, each line once whichever way (a line keeps both sources… - [Restock desk](https://beamline.io/components/restock-desk): Restocking from suppliers' own shops. Items low on stock (below the minimum on danger, at it on warning, unknown said) beside the chosen item with how… - [Stock alerts](https://beamline.io/components/stock-alerts): Alerts on stock counts and expiry dates. Counts of alerts gone off (danger) and close (warning) in the header. A table: item and type, the rule in words… - [Inventory finder](https://beamline.io/components/inventory-finder): Find stock and act on what's found. A rail of filters: name or SKU; folders with or without their subfolders (folders the person can't see said as not… - [Item setup](https://beamline.io/components/item-setup): Setting items up for scanning and records. Barcodes: scanned codes waiting to be linked, each with its symbology, when and who; Look it up brings a… - [Bulk item edit](https://beamline.io/components/bulk-item-edit): Many items corrected at once. Pick a folder, with its subfolders or not (fixed once anything is edited), up to a limit said. The items in a grid: name… - [Kit builder](https://beamline.io/components/kit-builder): A kit (bundle) made of standalone products, and how many its parts' stock can make. Sell as a kit; the parts in one kit with units per kit, removable… - [Serial allocation](https://beamline.io/components/serial-allocation): A receipt line's serial numbers. Serials generated from a first serial and how many (its digits counted up, padding kept; a first serial without digits… - [Stock moves](https://beamline.io/components/stock-moves): Where stock went, and moving it. The ledger lists movements newest first: moves on info, stock added on success, stock taken out on warning; each with… - [Scan station](https://beamline.io/components/scan-station): A warehouse scanner, phone-first. Home: one scan field that also takes typing (and says so when the scanner isn't connected), each code named as what it… - [Pack station](https://beamline.io/components/pack-station): A packing bench. Scanner, scale and printer each said, on the warning tone when away. Find the shipment by scanning or typing its number (none found… - [Shipment split](https://beamline.io/components/shipment-split): 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… - [Route plan](https://beamline.io/components/route-plan): A day's delivery routes in the service's zone. The day at a glance: routes, routes without a driver (warning), stops running late (danger), stops done… - [Job materials](https://beamline.io/components/job-materials): Materials sent out to jobs and pick lists. Jobs: the list (draft, active on info, completed on success) beside the chosen job with its site, dates (the… - [Service tasks](https://beamline.io/components/service-tasks): A fleet shop's maintenance setup. Tasks: active and archived, searchable, main tasks and their subtasks told apart in words, archiving refused while… - [Owner records](https://beamline.io/components/owner-records): Who a customer is and what they own, at the front desk. New customer: name, phone and email checked as typed against existing customers; each likely… - [Sample storage](https://beamline.io/components/sample-storage): Where physical items are kept (rooms, freezers, shelves, racks, boxes) and acting on several at once. The storage tree is browsed apart from moving: Move… - [Sample ledger](https://beamline.io/components/sample-ledger): Materials used in a record and the containers they came from, plus pooling. Subtracting a used amount writes a stock movement with its unit and the… Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).