# Delivery tracking

<Card title="Where is your package?">
<Callout tone="info" title="In transit">Your package is currently at the **Copenhagen sorting facility** and moving through our network on schedule.</Callout>

<Chart type="line" x="Checkpoint" y="Progress">
| Checkpoint | Progress |
|---|---|
| Picked up | 20 |
| Left origin hub | 40 |
| Arrived at sorting facility | 60 |
| Out for delivery | 80 |
| Delivered | 100 |
</Chart>

<Columns>
<div>
<Badge tone="info">Current location</Badge>
<p><strong>Copenhagen Sorting Facility</strong><br>Terminal 2, Dock 7<br>Last scan: Today, 14:32</p>
</div>
<div>
<Badge tone="neutral">Last event</Badge>
<p><strong>Arrived at facility</strong><br>Package scanned and sorted<br>Next stop: your local depot</p>
</div>
</Columns>
</Card>

<Card title="Estimated delivery">
<Columns>
<div>
<Stat label="Estimated delivery date" value="Friday, 12 July" note="Between 08:00 and 12:00" icon="calendar" tone="success" />
</div>
<div>
<Stat label="Days remaining" value="1" note="On track — no delays" icon="clock" tone="info" />
</div>
</Columns>

<Progress value="60" max="100" label="Journey progress" tone="info" />

<Callout tone="neutral" title="Delivery preferences">You can redirect your package to a pickup point or a neighbour if you won't be home.</Callout>
</Card>

<Card title="Report a problem">
<Callout tone="warning" title="Having trouble with your delivery?">Tell us what's wrong and we'll look into it right away.</Callout>

<Form name="delivery-issue">
<Radio label="What's the issue?" options="Package is delayed | Package is damaged | Wrong item received | Delivery location incorrect | Other" required="true" />
<TextArea label="Describe the problem" placeholder="Give us as much detail as you can…" rows="4" hint="Optional — helps us resolve it faster" />
<Input label="Contact email" type="email" placeholder="you@example.com" hint="We'll send updates to this address" required="true" />
<Button>Submit report</Button>
</Form>
</Card>

<Details title="Track history" open="false">
<Steps>
<Step title="Delivered" status="todo">Friday, 12 July — expected</Step>
<Step title="Out for delivery" status="todo">Friday, 12 July — morning</Step>
<Step title="Arrived at sorting facility" status="done">Today, 14:32 — Copenhagen</Step>
<Step title="Left origin hub" status="done">Yesterday, 19:05 — Aarhus</Step>
<Step title="Picked up" status="done">Monday, 8 July — 09:12</Step>
</Steps>
</Details>

<FollowUps>
- Can I change the delivery date?
- Where can I pick up the package myself?
- What should I do if the package is damaged?
</FollowUps>