Purpose
Live-tracking detail surface opened from an orders or shipments table. Surfaces the shipment id + status, route, current step, summary data, and the chronological event log on a single column so the operator can quickly answer "where is this package?" without leaving the parent screen.
Best Fit
- shipment tracker drawer opened from a shipping/orders DataGrid row
- customer-success workspace where an operator needs to read the status + log without losing the parent screen
- fulfilment workflow where Cancel Order and Notify Customer are the two next actions
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 button, SheetHeader carrying the title row + shipment id + Shipped badge + placed-date / Order ID meta + Cancel Order (ghost) / Notify Customer (outline) action cluster, a single-column ScrollArea body, and a SheetFooter with a full-width Close outline button. - RouteAndStepper (ReUI
Frame + FramePanel, dense spacing="sm", shadow-none!): two-stop origin → destination list with vertical dot-and-line connector, plus a carrier chip on the right (small colored square holding the carrier initials next to the carrier name). Below the route, a 4-step horizontal Stepper - segmented progress bars on top, then a row of done (filled emerald check) / active (outline emerald check) / pending (gray outline) state icons + labels. - ShippingDataSection (Frame): 4-column stat strip - Total Time, Dep. Time, Exp. Arrival, and Tracking No. (mono).
- ShippingLogSection (Frame): vertical log timeline - each entry has a left-side dot connected by a thin vertical line, the event title + timestamp on the same line, a description below, and an optional location row with a small
MapPin icon.
Reused Blocks
application/sheet/sheet-6 - sheet anatomy: trigger + custom-width SheetContent + sticky header / scrollable body / sticky footersolutions/inventory/solution-inventory-7 - Frame dense spacing="sm" + FramePanel shadow-none! convention, header SKU/created/updated meta pattern (adapted for Placed / Order ID), the action-cluster pattern with a Button rendered as an anchor for the Cancel Order link
Layout Grid
- Sheet width:
w-[min(48rem,calc(100vw-2rem))] - never exceeds 768px (narrower than solution-inventory-7's 60rem because this is single-column content), never less than viewport - 2rem padding - Body: single
<ScrollArea> wrapping a vertical flex of three Frames + a route+stepper composite. Same shell works mobile and desktop - no two-panel split needed since the design is intrinsically one column. - Inner grids: Shipping Data uses
grid-cols-2 sm:grid-cols-4 so the 4 stats reflow to 2-up on narrow widths. The Stepper uses grid-cols-4 and the route stops always stack vertically (typical from → to pattern).
LLM Guidance
Keep the three-piece body composition (RouteAndStepper / ShippingDataSection / ShippingLogSection). The Stepper state taxonomy (done / active / pending) drives both the bar fill (emerald vs muted) and the icon (filled check / outline check / empty circle); keep the two in sync when extending states. The Shipping Log timeline uses a single <ul> with absolutely-positioned dots and connector lines drawn via before/sibling pseudo-elements - when adding entries, the last one drops the connector line via the isLast prop. The carrier chip is a generic colored-tile + initials + name pattern; swap the initial + tile bg when adapting to FedEx / USPS / DHL etc. Cancel Order is rendered as a Button rendered as an anchor with variant="ghost" so the action group reads as a row of buttons (no inline-link styling) - consistent with solution-inventory-7's HeaderActions. The bottom action is intentionally a single full-width Close - Notify Customer and Cancel Order live in the header per the design.
