# Inventory app UI for React

Stock you can count: receiving, counts, picking, packing and moves. 21 live React screens in [Beamline](https://beamline.io/), in working order, each in nine looks.

## Screens

1. [Stock count](https://beamline.io/components/stock-count.md): 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…
2. [Inventory counts](https://beamline.io/components/inventory-counts.md): 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…
3. [Goods receiving](https://beamline.io/components/goods-receiving.md): Goods received against purchase orders and invoices. Cards grouped by purchase order or invoice, each line once whichever way (a line keeps both sources…
4. [Purchase order desk](https://beamline.io/components/purchase-order-desk.md): 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…
5. [Restock desk](https://beamline.io/components/restock-desk.md): 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…
6. [Stock alerts](https://beamline.io/components/stock-alerts.md): 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…
7. [Inventory finder](https://beamline.io/components/inventory-finder.md): 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…
8. [Item setup](https://beamline.io/components/item-setup.md): 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…
9. [Bulk item edit](https://beamline.io/components/bulk-item-edit.md): 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…
10. [Kit builder](https://beamline.io/components/kit-builder.md): 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…
11. [Serial allocation](https://beamline.io/components/serial-allocation.md): 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…
12. [Stock moves](https://beamline.io/components/stock-moves.md): 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…
13. [Scan station](https://beamline.io/components/scan-station.md): 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…
14. [Pack station](https://beamline.io/components/pack-station.md): 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…
15. [Shipment split](https://beamline.io/components/shipment-split.md): 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…
16. [Route plan](https://beamline.io/components/route-plan.md): 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…
17. [Job materials](https://beamline.io/components/job-materials.md): 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…
18. [Service tasks](https://beamline.io/components/service-tasks.md): A fleet shop's maintenance setup. Tasks: active and archived, searchable, main tasks and their subtasks told apart in words, archiving refused while…
19. [Owner records](https://beamline.io/components/owner-records.md): 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…
20. [Sample storage](https://beamline.io/components/sample-storage.md): 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…
21. [Sample ledger](https://beamline.io/components/sample-ledger.md): 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…

## The parts they're built from

- [Button](https://beamline.io/components/button.md) (free): in 21 of these screens
- [Label](https://beamline.io/components/label.md) (free): in 21 of these screens
- [Spinner](https://beamline.io/components/spinner.md) (free): in 21 of these screens
- [Avatar](https://beamline.io/components/avatar.md) (free): in 20 of these screens
- [Select](https://beamline.io/components/select.md) (free): in 19 of these screens
- [Number field](https://beamline.io/components/number-field.md) (free): in 15 of these screens
- [Tooltip](https://beamline.io/components/tooltip.md) (free): in 15 of these screens
- [Alert](https://beamline.io/components/alert.md) (free): in 13 of these screens
- [Input](https://beamline.io/components/input.md) (free): in 13 of these screens
- [Segmented control](https://beamline.io/components/segmented-control.md) (free): in 13 of these screens
- [Text morph](https://beamline.io/components/text-morph.md) (free): in 13 of these screens
- [Bottom sheet](https://beamline.io/components/bottom-sheet.md) (free): in 9 of these screens
- [Dropdown menu](https://beamline.io/components/dropdown-menu.md) (free): in 8 of these screens
- [Checkbox](https://beamline.io/components/checkbox.md) (free): in 7 of these screens
- [Combobox](https://beamline.io/components/combobox.md) (free): in 7 of these screens
- [Switch](https://beamline.io/components/switch.md) (free): in 7 of these screens
- [Radio group](https://beamline.io/components/radio-group.md) (free): in 6 of these screens
- [Glow](https://beamline.io/components/glow.md) (free): in 5 of these screens
- [Kbd](https://beamline.io/components/kbd.md) (free): in 5 of these screens
- [Search field](https://beamline.io/components/search-field.md) (free): in 5 of these screens
- [Calendar](https://beamline.io/components/calendar.md) (free): in 4 of these screens
- [Date picker](https://beamline.io/components/date-picker.md) (free): in 4 of these screens
- [Empty state](https://beamline.io/components/empty-state.md) (free): in 4 of these screens
- [Inline edit](https://beamline.io/components/inline-edit.md) (free): in 4 of these screens
- [Skeleton](https://beamline.io/components/skeleton.md) (free): in 4 of these screens
- [Badge](https://beamline.io/components/badge.md) (free): in 3 of these screens
- [Textarea](https://beamline.io/components/textarea.md) (free): in 3 of these screens
- [Popover](https://beamline.io/components/popover.md) (free): in 2 of these screens
- [Sheet](https://beamline.io/components/sheet.md) (free): in 2 of these screens
- [Tabs](https://beamline.io/components/tabs.md) (free): in 2 of these screens

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)

Next: [CMS & media](https://beamline.io/components/apps/cms-media.md) · [All apps](https://beamline.io/components/apps.md)

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).
