Order Details

Order details sheet: a right-anchored fulfillment review surface that reuses the solution-inventory-7 sheet shell. Header carries an Order Details title row, the order id + Shipped badge, a Created / Customer meta line, and a vertically-centered Delete / Order Tracking / View Shipping Label action cluster. The scrollable two-column body pairs an Order Data Frame (Items, Total Price, Shipping Priority, Delivery Method), a Products Frame with Item-based rows (image + name + SKU/color, inline weight input on the right), and a title-less Shipping Frame combining a vertical route Timeline, a UPS Global carrier chip, a Separator, and a four-step Picking / Packed / Shipping / Delivered status stepper. The right rail is a Summary Frame with shipping-to address, price details (Subtotal / Shipping / Tax / Total), and a separated total row. All frames use `dense spacing="sm"` for an operator-density default. The footer mirrors the header action cluster with a Read Shipping Terms & Conditions link on the left.

@reui

Paid block

@reui sells this block. Visit the registry directly to buy and install it.

View registry

RegistryView registry

Docs

Purpose

A fulfillment review surface the operator opens from any order list (e.g. an order DataGrid row) to verify items, weight, shipping route, status, and totals before printing the shipping label. The sheet shares the solution-inventory-7 inset-anchored shell so it slots in next to solution-inventory-7 / solution-inventory-8 / solution-inventory-9 as a consistent right-anchored operator sheet family.

Best Fit

detail review triggered from an orders/fulfillment DataGrid row
pre-ship verification screen that combines order metadata, item weights, route, and totals in one surface
ops handoff sheet where the same Delete / Order Tracking / View Shipping Label cluster lives in both header and footer

Main Pieces

Sheet shell (adapted from solutions/inventory/solution-inventory-7): right-anchored Sheet with inset rounded corners, no built-in close button, custom SheetHeader carrying the title row + order id + meta line + action cluster, ScrollArea body, custom SheetFooter with terms link + action cluster. The header sub-row uses lg:items-center so the action cluster vertically centers with the title+meta block.
Order Data (ReUI Frame dense spacing="sm"): 4-up grid of Items, Total Price, Shipping Priority, Delivery Method.
Products (ReUI Frame dense spacing="sm"): shadcn Item rows (<Item> + <ItemMedia variant="image"> + <ItemContent> + <ItemTitle> + <ItemDescription>) for each product. The image is a 40px (size-10) bordered tile, and the right slot carries a Label + InputGroup weight input suffixed with kg. Pattern matches solutions/inventory/solution-inventory-10 exactly.
Shipping (ReUI Frame dense spacing="sm", title-less): single FramePanel containing a vertical Timeline route with two address stops, a UpsLogo carrier chip on the right, a Separator, and a four-step horizontal Stepper (Picking / Packed / Shipping / Delivered).
Summary (ReUI Frame dense spacing="sm"): destination header + address, a separator, a Price Details block (Subtotal / Shipping / Tax / Total), and a final separated total row.

Reused Blocks

solutions/inventory/solution-inventory-7 - sheet anatomy: trigger button, custom-width SheetContent, sticky header/footer, two-column body, mobile-stacked / lg+ side-by-side split with independent ScrollAreas
solutions/inventory/solution-inventory-10 - product Item row pattern (Item + ItemMedia/ItemContent/ItemTitle/ItemDescription with px-0 py-0 Item, size-10 bordered ItemMedia image, right-slot weight InputGroup), bg-primary Timeline indicator/separator colors, and combined route + stepper inside a single FramePanel separated by Separator
solutions/inventory/solution-inventory-9 - Stepper / StepIcon indicator pattern (emerald dot for done, ringed check for active, hollow circle for pending) and original CarrierChip pattern (adapted for UPS Global)

Layout Grid

Sheet width: w-[min(64rem,calc(100vw-2rem))] - never exceeds 1024px, never less than viewport - 2rem padding
Inner body: stacked ScrollArea on mobile; lg+ splits into a flex-1 left column and a w-[320px] right rail with a vertical Separator
Order Data: grid-cols-2 sm:grid-cols-4 so KPIs reflow on narrower body widths
Product rows: shadcn Item with items-center gap-3 px-0 py-0 so image, content, and weight input read as one compact row

LLM Guidance

Keep the three-piece left column (OrderDataSection / ProductsSection / ShippingSection) and the single right-column SummarySection. To add another KPI to Order Data, extend the stats array - the grid will reflow. To add another product line, append to ORDER.items (rendered via ProductItemRow). The HeaderActions cluster is intentionally rendered twice (header + footer) - edit the single component to keep both in sync. The sheet defaults to open: true so the preview reads at full state; in production wire open/onOpenChange to the parent grid's row trigger. The UpsLogo SVG is inline; replace it with a different carrier mark by swapping the SVG and the name passed to CarrierChip.