<Card title="Congestion">
<Stat label="Congestion" value="75%" change="↑2%" note="High" tone="warning"/>
<Progress value=75 max=100 label="Congestion" tone="warning"/>
</Card>

<Card title="Transit punctuality">
<Stat label="Transit punctuality" value="88%" change="↑1%" note="Good" tone="success"/>
<Progress value=88 max=100 label="On-time" tone="success"/>
</Card>

<Card title="Air quality by district">
<Chart type="bar" x="District" y="AQI" title="Air Quality by District">
| District | AQI |
|---|---|
| North | 45 |
| South | 55 |
| East | 60 |
| West | 40 |
</Chart>
</Card>

<Card title="Energy use (last 7 days)">
<Chart type="line" x="Day" y="kWh" title="Energy Use (Last 7 Days)">
| Day | kWh |
|---|---|
| Mon | 1200 |
| Tue | 1150 |
| Wed | 1300 |
| Thu | 1250 |
| Fri | 1350 |
| Sat | 1400 |
| Sun | 1300 |
</Chart>
</Card>

<Card title="Water use today">
<Stat label="Water use" value="2.5M gal" change="↔0%" note="On target" tone="success"/>
<Progress value=100 max=100 label="Usage" tone="success"/>
</Card>

<Card title="Open Incidents">
<Details title! open=true>
- 5th Ave & Main St – Severe
- River Rd & 3rd St – Moderate
- Hilltop Blvd – Minor
</Details>
</Card>

<Card title="Emergency vehicles">
<Stat label="Emergency vehicles" value="3" change="↔0" note="Deployed" tone="info"/>
<Badge tone="success">3 vehicles</Badge>
</Card>

<Card title="Parking availability">
<Stat label="Parking spots" value="120" change="↓5" note="Spots available" tone="warning"/>
<Progress value=60 max=100 label="Availability" tone="warning"/>
</Card>

<Card title="Public events">
<FollowUps>
- Parade
- Farmers market
- Concert
</FollowUps>
</Card>

<Card title="Citizen reports">
<Stat label="Citizen reports" value="7" change="↑3" note="New" tone="info"/>
<Callout tone="info" title="New report">A resident reported a pothole on Oak St.</Callout>
</Card>

<Card title="Service request backlog">
<Stat label="Service requests" value="42" change="↓2" note="Backlog" tone="warning"/>
<Progress value=42 max=100 label="Backlog" tone="warning"/>
</Card>

<Card title="Current weather">
<Stat label="Weather" value="72°F" change="--%" note="Sunny" tone="info"/>
<Badge tone="success">Sunny</Badge>
</Card>

<Card title="Focus district">
<Select label="Focus district" options="North | South | East | West" name="district" placeholder="Select district" required=true />
</Card>

<Card title="Dispatch crew">
<Button variant="primary" href="#" ask="Dispatch crew" size="medium" label="Dispatch crew"/>
</Card>

<Card title="Public alert">
<Form name="public-alert">
<Input label="Alert message" placeholder="Enter message" name="message" required=true />
<Button variant="primary" label="Send alert"/>
</Form>
</Card>

<Card title="Roadworks planned">
<Chart type="bar" x="Week" y="Project" title="Roadworks Planned">
| Week | Project |
|---|---|
| Week 1 | Bridge repair |
| Week 2 | Road resurfacing |
| Week 3 | Traffic signal upgrade |
| Week 4 | Parking lot expansion |
</Chart>
</Card>

<Card title="Infrastructure maintenance">
<Details title! open=true>
- Water main replacement (East District) – Due: Oct 10
- Sewer line upgrade (South District) – Due: Oct 15
- Streetlight replacement (North District) – Due: Oct 20
</Details>
</Card>