<Card title="Current Metrics">
<Stat label="Congestion" value="65%" change="↑ 2%" tone="warning" />
<Stat label="Transit punctuality" value="88%" change="↑ 1%" tone="success" />
<Stat label="Water usage" value="2.5Mgal" change="↔ 0%" tone="neutral" />
<Stat label="Weather" value="22°C, Partly cloudy" change="↔ 0%" tone="neutral" />
<Stat label="Downtown parking" value="75% available" change="↓ 5%" tone="warning" />
<Stat label="Citizen reports" value="12" change="↑ 3" tone="info" />
<Stat label="Service requests backlog" value="84" change="↓ 2" tone="warning" />
</Card>

<Card title="Air Quality & Energy">
<Chart type="bar" x="District" y="AQI" title="Air Quality">
| District | AQI |
|---|---|
| Downtown | 45 |
| Eastside | 52 |
| Westport | 38 |
| Northside | 60 |
| Southside | 55 |
</Chart>
<Chart type="line" x="Day" y="kWh" title="Energy Use">
| Day | kWh |
|---|---|
| Mon | 12000 |
| Tue | 11500 |
| Wed | 13000 |
| Thu | 12500 |
| Fri | 13500 |
| Sat | 14000 |
| Sun | 13000 |
</Chart>
</Card>

<Card title="Incidents & Vehicles">
<Chart type="table" x="Location" y="Severity" title="Open Incidents">
| Location | Severity |
|---|---|
| Downtown | High |
| Eastside | Medium |
| Westport | Low |
| Northside | High |
| Southside | Medium |
</Chart>
<Card title="Emergency Vehicles">
<Text>Downtown (1), Eastside (2), Westport (1), Northside (0), Southside (1)</Text>
</Card>
</Card>

<Card title="Parking & Events">
<Stat label="Downtown parking" value="75% available" change="↓ 5%" tone="warning" />
<Text>Weekend public events: Music Festival (Sat 2pm), Street Fair (Sun 10am), Art Walk (Sat 5pm)</Text>
</Card>

<Card title="Reports & Backlog">
<Stat label="Citizen reports" value="12" change="↑ 3" tone="info" />
<Stat label="Service requests backlog" value="84" change="↓ 2" tone="warning" />
</Card>

<Card title="Weather & Focus">
<Stat label="Weather" value="22°C, Partly cloudy" change="↔ 0%" tone="neutral" />
<Select label! options="Downtown | Eastside | Westport | Northside | Southside" placeholder="Select district" name! required="true" />
<Button variant="primary" href="#">Dispatch crew</Button>
<Form name="public-alert">
<TextArea label! name placeholder="Enter alert" rows="2" required="true" />
<Button variant="danger" href="#">Send alert</Button>
</Form>
</Card>

<Card title="Maintenance & Roadworks">
<Text>Roadworks planned this month: Main St repave (Oct 5-10), Bridge repair (Oct 12-20), Parking lot resurfacing (Oct 22-28)</Text>
<Text>Infrastructure jobs due for maintenance: Water main replacement (Oct 8), Electrical grid upgrade (Oct 15), Sewer line inspection (Oct 20)</Text>
</Card>