Shipments 2 block design & features
Shipments2 is a two-column shipment detail built with Shadcn UI cards, badges, buttons, and a MapLibre map via mapcn. The left column holds a route overview card with carrier and service badges, an ETA, and a four-step Created through Delivered progress strip. Below that sits a meta strip for carrier, current hub, last scan, and ETA window, then a scrollable Activity timeline with location pins and timestamps. The right column is a route map with origin, current, and destination markers plus a popup on the active hub.
Muted map surface with a dashed foreground route line over a softer base path. Status badges use soft blue and amber fills for in transit and delay. Timeline dots step from filled to primary to muted. Cards stay flat with light borders and no heavy shadow. Desktop keeps the map full height beside the timeline. Mobile stacks map under the route card and shows the full timeline without a scroll shell.
The layout feels like a carrier tracking console more than a generic detail page. The split between operational copy and live geography is distinctive. This is an elaborate block. Complexity comes from mixed content: route steps, timeline copy, coordinates, and map styling. You need real hub names, scan times, and a believable route path for the map and timeline to line up.
On smaller screens the map moves into the left stack and the timeline expands fully. Action buttons for cancel and notify stay in the page header on every breakpoint.