An independent concept project by 4sidedevelop. Screens and data are illustrative.
SaaS & Operations
StockPilot
Inventory and order management
An operations concept for a small retail business: stock by warehouse, reservations for incoming orders, a picking queue, and purchasing in one view.
- Category
- SaaS & Operations
- Proposed stack
- Next.js, TypeScript, PostgreSQL, Background jobs for channel sync, Barcode scanning (to be validated)
- Status
- Concept — not a client project
01
The challenge
A small retail company sells through its own online store and a marketplace. Stock levels live in a spreadsheet, orders arrive in two places, and nobody is sure what is available until someone checks the shelf.
The team needs to see stock across warehouses, keep order picking under control, and reorder from suppliers before a popular item runs out.
02
Who it’s for
Operations lead
Sees stock, the order queue, and what needs reordering in one place.
Warehouse staff
Works through the picking list, confirms what was packed, and marks shipments.
Purchasing
Creates purchase orders, tracks deliveries, and records what arrived.
03
The proposed solution
The concept separates stock on hand from stock that is available to sell. When an order arrives, its items are reserved immediately, so the same unit cannot be sold twice. Lines that cannot be reserved go straight to the purchasing list.
Catalog with variants
Products, variants, SKUs, and reorder points.
Stock by warehouse
On hand per location, reserved, and available.
Reservations
Items are held for an order as soon as it arrives.
Picking and shipping
A queue with clear statuses from new to shipped.
Purchasing and receiving
Draft purchase orders and a receiving checklist.
Alerts and log
Low-stock alerts and a record of every stock change.
04
Key workflows
1Order to shipment
- Step 1: An order arrives and its items are reserved.
- Step 2: The order appears in the picking queue with bin locations.
- Step 3: Staff confirm each line, pack the order, and mark it as shipped.
2Shortfall to purchase order
- Step 1: An order line cannot be reserved because stock is short.
- Step 2: The line is added to the purchasing list with the order as its source.
- Step 3: Purchasing groups lines by supplier into a draft purchase order.
3Receiving a delivery
- Step 1: Staff open the purchase order when the delivery arrives.
- Step 2: They count the received quantity per line and note any damage.
- Step 3: Accepted items become available and waiting orders can be reserved.
4Low-stock alert
- Step 1: Available stock drops to the reorder point.
- Step 2: An alert suggests a quantity based on the reorder settings.
- Step 3: One action adds it to the purchasing list.
05
Screens
Illustrative screens with sample data, designed for this concept.
06
Design decisions
On hand, reserved, available
Three numbers side by side instead of one stock figure. Available is what the store can sell; the other two explain why.
Status as a word and a colour
Order and stock statuses always carry a label, so they stay readable for colour-blind users and in print.
Filters that stay visible
Search, warehouse, category, and Low stock only sit above the table and show what is applied, so an empty result is never a mystery.
Every change leaves a line
Stock never changes silently. Each movement links to an order, a purchase order, or an adjustment with a reason.
07
What to validate
The concept is a starting point. These questions would be tested with users and resolved during implementation.
- Whether staff can update stock during picking, and whether barcode scanning is needed from the first release.
- Reorder points: set per product, or suggested from sales history.
- How partial shipments and backorders should look to the customer and to the team.
- Which sales channels need a stock sync, and how often.
- Who may adjust stock manually, and which reason codes are required.
Proposed stack: Next.js, TypeScript, PostgreSQL, Background jobs for channel sync, Barcode scanning (to be validated). The screens on this page were built with React and Tailwind CSS for this demonstration.
Have a similar project?
Tell us about the workflow you want to change. We reply with a clear next step, not a pitch deck.