Backorder System - User Guide
Overview
Complete backorder system which allows to create invoices without stock in hand and fulfil them later when stock arrives.
1. Invoice Creation Form - Allow Backorder Toggle
Location
Billing → Transactions → Add Invoice → Payment Details Section
Feature
New "Allow Backorders" toggle switch with informative tooltip.
Visual Description
┌─────────────────────────────────────────────────────────┐
│ Payment Details │
├─────────────────────────────────────────────────────────┤
│ │
│ Settled [info icon] │
│ ┌──────────────────────────────────────────────┐ │
│ │ Invoice settled [ON] │ │
│ └──────────────────────────────────────────────┘ │
│ │
│ Allow Backorders [info icon] │
│ ┌──────────────────────────────────────────────┐ │
│ │ Backorders not allowed [OFF] │ ← NEW │
│ └──────────────────────────────────────────────┘ │
│ │
│ Tooltip: "When enabled, allows creating invoices │
│ even when items don't have sufficient stock. │
│ Backordered items can be fulfilled later when │
│ stock becomes available." │
└─────────────────────────────────────────────────────────┘Behavior
- OFF (Default): Traditional behavior - rejects items exceeding stock
- ON: Allows items exceeding stock - creates backorder
- Tooltip provides context for new users
2. Backorder Management Page
Location
Billing → Backorders Tab (New Tab)
Visual Layout
┌────────────────────────────────────────────────────────────────┐
│ Backorder Management [Location ▼] [Refresh] │
│ View and fulfill pending backorders │
├────────────────────────────────────────────────────────────────┤
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ 📦 Pending Backorders (3) │ │
│ │ Invoices with items awaiting stock fulfillment │ │
│ ├────────────────────────────────────────────────────────────┤ │
│ │ │ │
│ │ Invoice # │ Customer │ Location │ Status │ Created │ $ │ │
│ │ ──────────┼──────────┼──────────┼────────┼─────────┼───── │ │
│ │ 00234 │ John Doe │ Store A │ FULL │ Jan 15 │ 2.4K │ │
│ │ │ │ │ [🟧] │ │ │ │
│ │ [Fulfill] │ │
│ │ ──────────┼──────────┼──────────┼────────┼─────────┼───── │ │
│ │ 00456 │ Jane S. │ Store B │ PARTIAL│ Jan 20 │ 679 │ │
│ │ │ │ │ [🟨] │ │ │ │
│ │ [Fulfill] │ │
│ └────────────────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────────────┘Features
- Location Filter: Dropdown to filter by specific location or "All Locations"
- Refresh Button: Manual refresh of backorder data
- Status Badges:
- 🟧 Orange = Full Backorder (all items pending)
- 🟨 Yellow = Partial Backorder (some items pending)
- Fulfill Button: Opens fulfillment dialog
3. Backorder Fulfillment Dialog
Triggered By
Clicking "Fulfill" button on any backorder invoice
Visual Layout
┌──────────────────────────────────────────────────────────┐
│ Fulfill Backorder - Invoice #00234 [X] │
├──────────────────────────────────────────────────────────┤
│ Enter the quantities you want to fulfill for each │
│ backordered item │
│ │
│ ┌────────────────────────────────────────────────────┐ │
│ │ Customer: John Doe Location: Main Store │ │
│ └────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────┐ │
│ │ Item: iPhone 15 Pro Max 256GB [PENDING] │ │
│ │ │ │
│ │ Total Ordered: 2 | Fulfilled: 0 | Backordered: 2 │ │
│ │ Price: $1,199.00 │ │
│ │ │ │
│ │ Quantity to Fulfill (Max: 2) │ │
│ │ ┌────────┐ │ │
│ │ │ 2 │ │ │
│ │ └────────┘ │ │
│ └────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────┐ │
│ │ Item: AirPods Pro 2nd Gen [PARTIAL] │ │
│ │ │ │
│ │ Total Ordered: 10 | Fulfilled: 3 | Backordered: 7 │ │
│ │ Price: $249.00 │ │
│ │ │ │
│ │ Quantity to Fulfill (Max: 7) │ │
│ │ ┌────────┐ │ │
│ │ │ 5 │ │ │
│ │ └────────┘ │ │
│ └────────────────────────────────────────────────────┘ │
│ │
│ [Cancel] [Fulfill Backorder] │
└──────────────────────────────────────────────────────────┘Features
- Context Bar: Shows customer and location
- Per-Item Cards: Each backordered item in its own card
- Status Badge: Visual indicator (Pending/Partial/Fulfilled)
- Quantity Metrics: Clear display of ordered/fulfilled/backordered
- Input Validation:
- Min: 0
- Max: quantityBackordered
- Number input with controls
- Action Buttons:
- Cancel: Closes dialog without changes
- Fulfill Backorder: Processes fulfillment
4. Invoice Table - Status Indicators
Location
Billing → Invoices Tab → Invoice List
Before (Without Backorder)
┌──────────────────────────────────────────────────┐
│ 00234 [Cash] [Settled] │
└──────────────────────────────────────────────────┘After (With Backorder)
┌──────────────────────────────────────────────────┐
│ 00234 [Cash] [Settled] [Full Backorder] │
│ 🟧 │
└──────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────┐
│ 00456 [Card] [Pending] [Partial Backorder] │
│ 🟨 │
└──────────────────────────────────────────────────┘Badge Colors
- Payment Method: Gray/Default
- Settled Status:
- Green = Settled
- Red = Pending
- Backorder Status (NEW):
- Orange = Full Backorder
- Yellow = Partial Backorder
- Hidden when no backorder
5. Navigation - New Backorders Tab
Before
┌───────────────────────────────────────────┐
│ [Invoices] [Transactions] [Customers] │
└───────────────────────────────────────────┘After
┌─────────────────────────────────────────────────────┐
│ [Invoices] [Backorders] [Transactions] [Customers] │ ← NEW
└─────────────────────────────────────────────────────┘