Purpose
A focused per-SKU stock editor opened from any product list. Pairs the inventory reorder rules and shipping configuration on the left with a product summary on the right so the operator can review what they are editing without losing context.
Best Fit
- per-product stock & reorder-rules editor opened from an inventory DataGrid
- shipping configuration sheet for a fulfilment workflow where label print + save are the primary actions
- merch-ops drawer that combines inventory thresholds, shipping package config, and a product reference card on one surface
Main Pieces
- Sheet shell (adapted from
application/sheet/sheet-6 and solutions/inventory/solution-inventory-7): right-anchored Sheet with inset rounded corners, no built-in close, SheetHeader carrying the title row + product name + SKU/created/updated meta, ScrollArea body, and a SheetFooter with Print Label on the left and Cancel / Save on the right. - Current Stock (
Field + Input + Button): editable stock value with a Reorder Now outline button on the right. - InventoryRulesSection (ReUI
Frame + FrameHeader + FramePanel, dense spacing="sm", shadow-none!): header carries title + Auto Reorder Switch; panel contains a 2x2 grid of inputs (Threshold Qty, Safe Stock Qty, Reorder Qty, Lead Time with InputGroupAddon days suffix) followed by a 5-column stats strip (Status badge, Delta badge, Velocity, Next Reorder, Updated By). - ShippingSection (Frame + Tabs in the header):
Custom Package / Carrier Package line-style tabs; panel contains Package Name input, a 2-column row (Package Type Select + Total Weight InputGroupAddon kg), a 4-column dimension row (Length / Width / Height inputs + unit Select aligned to the input baseline via grid items-end), and a Save package for future orders Checkbox. - ProductPanel (right column): product image card, name + description, then a small
<dl> with SKU (mono), Category, Rating primitive, Price.
Reused Blocks
application/sheet/sheet-6 - sheet anatomy: trigger + custom-width SheetContent + sticky header / scrollable body / sticky footersolutions/inventory/solution-inventory-7 - responsive body pattern (single ScrollArea below lg, two side-by-side ScrollAreas above lg joined by a vertical Separator), Frame dense spacing="sm" + FrameHeader py-1.5! + FramePanel shadow-none! conventions, header SKU/created/updated meta with reui-dot separators, and the wide sheet width w-[min(60rem,calc(100vw-2rem))].
Layout Grid
- Sheet width:
w-[min(60rem,calc(100vw-2rem))] - never exceeds 960px, never narrower than viewport - 2rem padding - Body responsiveness:
- Below
lg: a single <ScrollArea> wraps left + right content stacked with a horizontal Separator between them so every input on the left stays reachable on mobile - At
lg+: a flex-row with the left panel taking flex-1 and the right panel at w-[320px], each with its own <ScrollArea> and a vertical Separator between - Inventory Rules form: 2-column grid for inputs, 5-column grid for the stats strip - both reflow to 2-up on narrow widths
- Shipping dimensions row:
grid-cols-[1fr_1fr_1fr_5rem] with items-end so the unit Select aligns to the bottom of the labeled inputs without inheriting a separate label slot
LLM Guidance
Keep the three-section left column (CurrentStockRow / InventoryRulesSection / ShippingSection) and the single right column (ProductPanel). The Frame primitives use the same dense spacing="sm" + py-1.5! + shadow-none! overrides as solution-inventory-7 - keep that triad together when adding new sections so density stays consistent across the sheet. When the form needs more fields, append them inside the existing FieldGroup blocks (gap-4) rather than introducing new wrappers. The Auto Reorder switch lives inside FrameHeader; if you need to add more header controls, keep them inside a horizontal Field so the label/control gap stays at 8px. The bottom action cluster is split intentionally - Print Label on the left signals the secondary side-effect action, while Cancel and Save cluster on the right per the sheet-6 pattern. The right-rail summary is read-only by design; if you need to edit fields from there, move them into the left panel rather than wiring inputs into the summary <dl>.
