Order Management 5 block design & features
OrderManagement5 is a two-column order detail built with shadcn/ui. The main column holds a fulfillment journey card, cancel and shipping-label actions, product rows with thumbnails, and a payment breakdown. The side column stacks a shipping address with an embedded map, customer avatar and contact chips, an order note, and an activity timeline.
Light cards with muted journey headers and thin separators between products. Payment and fulfillment badges reuse soft emerald and muted fills. The map pin sits on a primary marker above Chicago address copy. Activity dots mark complete, current, and upcoming events on a vertical rail.
This is a classic commerce detail page with a map-led shipping card as the distinctive side panel. Complexity is moderate to elaborate and mixed: journey progress is code-driven, while product photos, address coordinates, and activity copy need real order data.
Below the wide breakpoint the side column stacks under the main column. The journey card switches from a four-column progress grid to a compact mobile summary with a single progress bar.