<Card title="In-transit shipments">
<Text>Shipment 101 – New York → Chicago – ETA: Oct 5 – Status: In transit</Text>
<Text>Shipment 102 – Los Angeles → Houston – ETA: Oct 7 – Status: In transit</Text>
<Text>Shipment 103 – Chicago → Miami – ETA: Oct 6 – Status: In transit</Text>
</Card>

<Card title="Delayed shipments">
<Callout tone="warning" title="Delayed shipments">Shipment 201 – Detroit → Seattle – ETA: Oct 10 – Status: Delayed</Callout>
<Callout tone="warning" title="Delayed shipments">Shipment 202 – Boston → Denver – ETA: Oct 12 – Status: Delayed</Callout>
</Card>

<Card title="Metrics">
<Stat label="On-time %" value="96%" change="+" tone="success"/>
<Stat label="Avg cost per shipment" value="$45" change="" tone="neutral"/>
<Stat label="Last refreshed" value="Oct 28, 2025 14:32" change="" tone="neutral"/>
</Card>

<Card title="Volume by carrier">
<Chart type="pie" title="Volume by carrier" x="Carrier" y="Volume">
| Carrier | Volume |
|---|---|
| Carrier A | 1,200 |
| Carrier B | 850 |
| Carrier C | 600 |
| Carrier D | 400 |
</Chart>
</Card>

<Card title="Search route">
<Form name="route-search">
<Input label="Search route" placeholder="Enter route" name="route" />
<Button variant="primary" href="#" ask>Search</Button>
</Form>
</Card>

<Card title="Weekly volume (last 2 months)">
<Chart type="column" title="Weekly volume" x="Week" y="Volume">
| Week | Volume |
|---|---|
| Week 1 | 1,200 |
| Week 2 | 1,350 |
| Week 3 | 1,100 |
| Week 4 | 1,400 |
| Week 5 | 1,250 |
| Week 6 | 1,300 |
</Chart>
</Card>

<Card title="Flag shipment">
<Button variant="danger" href="#" ask>Flag shipment</Button>
</Card>