POS-Style Inventory Operations UI

Context

The Inventory Operations form (OperationsForm.tsx) currently utilizes standard dropdowns to select materials for operations (dispatch, receive, return, adjust). With potentially hundreds of materials, this is inefficient.

We will refactor the UI into a modern, dual-pane "POS" layout:

Left Side: Operations Document Form (From, To, Personnel, Notes) + Active Cart.
Right Side: Visual catalog of materials, split by Allocated and Unallocated stock tabs, allowing users to click to add materials directly to their cart.

1. Breakdown

Phase 1: Controller Adjustments

Update MaterialController.php to ensure projectInventories returns the total allocated_qty and on_hand_qty properly to the frontend.
Adjust the data transfer object structure so the React frontend can quickly compute 'Available (Unallocated)' vs 'Allocated' stock counts without deep loops.

Phase 2: UI Layout Restructure (`OperationsForm.tsx`)

Rip out the center-aligned single column form layout.
Implement a grid-cols-1 lg:grid-cols-12 layout.
Left Column (col-span-5):
- Card containing Header Inputs (Warehouse, Project, Personnel, Notes).
- List of "Cart Line Items", showing selected materials with input fields for exact quantity.
- "Submit Transaction" button anchored to the bottom.
Right Column (col-span-7):
- Sticky side-pane featuring a Search Input for SKU/Material Name.
- Tabs component to toggle between "Unallocated Stock" and "Allocated Stock".
- A responsive grid of Clickable Material Cards showing Name, SKU, Unit, and Badges for respective stock numbers.

Phase 3: State Management

Create an addToCart(material_ulid) helper that pushes a new material into the Inertia form state.
Create an updateQty(material_ulid, qty) helper.
Ensure clicking a Material Card on the right checks if it already exists in the Cart; if so, focus the quantity input or increment it by 1.

Phase 4: Verification Checklist

Ensure that selecting an item from the catalog correctly populates the left-hand cart.
Confirm layout remains responsive on mobile (stacking columns instead of parallel panes).
Verify that Unallocated limits correctly govern "Dispatches" and "Returns", whereas Allocated limits govern "Consumptions".

2. Agent Assignments

@[frontend-specialist]: Will lead Phase 2 and Phase 3, crafting the React/Tailwind POS layout.
@[backend-specialist]: Will handle Phase 1 to verify precise Eloquent relation loading.

2.5 KiB Raw Blame History