# Delivery Tracking

<Card title="Package Status" subtitle="Your order is on its way">
<Badge tone="info">In Transit</Badge>

<Stat label="Current Location" value="Sorting Center, Zagreb" icon="map-pin" />
<Stat label="Estimated Delivery" value="March 22, 2025" icon="calendar" />
<Stat label="Days Left" value="2 days" icon="clock" />

<Progress value="3" max="5" label="Step 3 of 5" tone="info" />
</Card>

<Card title="Where is my package?">
<Steps>
<Step title="Order Placed" status="done" subtitle="March 17, 2025">Package received at warehouse</Step>
<Step title="In Transit" status="current" subtitle="March 19, 2025">At sorting center, Zagreb</Step>
<Step title="Out for Delivery" status="todo" subtitle="March 21, 2025">Driver assigned</Step>
<Step title="Delivered" status="todo" subtitle="March 22, 2025">Expected delivery date</Step>
</Steps>
</Card>

<Card title="Delivery Details">
| Detail | Value |
|---|---|
| Tracking Number | HR-1234-5678 |
| Carrier | Croatian Post |
| Service | Standard Delivery |
| Estimated Time | 10:00 - 14:00 |
| Delivery Address | Ilica 25, 10000 Zagreb |

<Button variant="secondary" ask="Show more tracking details">More tracking details</Button>
</Card>

<Card title="Report a Problem">
<Callout tone="warning" title="Having trouble?">
If your package is delayed, damaged, or hasn't arrived, let us know and we'll help resolve it.
</Callout>

<Form name="report-problem">
<Select label="Issue type" placeholder="Select an issue" options="Delayed delivery | Package damaged | Wrong item received | Package not delivered | Other" required />
<TextArea label="Describe the problem" placeholder="Tell us what happened..." rows="3" hint="Please include any relevant details" />
<Input label="Contact phone" type="tel" placeholder="+385 91 234 5678" hint="We'll call you if needed" />
<Button variant="primary" label="Submit report">Submit report</Button>
</Form>
</Card>

<FollowUps>
- Track another package
- Change delivery address
- Contact customer support
- View delivery history
</FollowUps>