<Card title="Quarter Selector">
<Select label="Quarter" options="Q1 | Q2 | Q3 | Q4" name="quarter" placeholder="Select quarter" hint="Choose quarter to view" required="true"/>
</Card>

<Card title="Active Projects">
<Text>
Project Alpha – Owner: Alice – Deadline: 2025-12-01 – <Badge tone="success">On Track</Badge><br/>
Project Beta – Owner: Bob – Deadline: 2025-11-15 – <Badge tone="warning">At Risk</Badge><br/>
Project Gamma – Owner: Carol – Deadline: 2025-10-20 – <Badge tone="danger">Delayed</Badge>
</Text>
</Card>

<Card title="Overdue Milestones">
<Steps>
<Step title="Milestone 1: Requirements Sign‑off" status="todo"/>
<Step title="Milestone 2: Design Review" status="todo"/>
<Step title="Milestone 3: Development Complete" status="todo"/>
</Steps>
</Card>

<Card title="Budget">
<Chart type="bar" x="Project" y="Budget">
| Project | Allocation | Spent |
|---|---|---|
| Alpha | $500k | $420k |
| Beta | $300k | $260k |
| Gamma | $200k | $150k |
</Chart>
</Card>

<Card title="Team Utilization">
<Stat label="Utilization" value="78%" change="2%" note="Team capacity used" tone="info"/>
<Progress value="78" max="100" label="Utilization" tone="info"/>
</Card>

<Card title="Risks">
<Text>
Risk: Resource bottleneck – <Badge tone="danger">High</Badge><br/>
Risk: Scope creep – <Badge tone="warning">Medium</Badge><br/>
Risk: Vendor delay – <Badge tone="info">Low</Badge>
</Text>
</Card>

<Card title="Upcoming Deadlines (Next 2 weeks)">
<Text>
- Project Beta – 2025-11-15 (In 5 days)<br/>
</Text>
</Card>

<Card title="Delivery Pace (Last 6 Sprints)">
<Chart type="line" x="Sprint" y="Velocity">
| Sprint | Velocity |
|---|---|
| S1 | 30 |
| S2 | 28 |
| S3 | 35 |
| S4 | 32 |
| S5 | 27 |
| S6 | 31 |
</Chart>
</Card>

<Card title="Blocked Work Items">
<Text>
- Task: Finalize UI mockups – Blocked by design review<br/>
- Task: Integrate API – Blocked by missing credentials
</Text>
</Card>

<Stat label="Portfolio Health" value="Green" change="0%" note="All projects on track" tone="success"/>

<Card title="Request More People">
<Form name="request-people">
<Input label="Project Name" placeholder="Enter project" name="project" required="true"/>
<Select label="Role to add" options="Developer | Tester | Designer | PM" name="role" placeholder="Select role" required="true"/>
<Button variant="primary" href="#" ask>Request More</Button>
<Button variant="tertiary" href="#" ask>Cancel</Button>
</Form>
</Card>

<Button variant="primary" href="#" ask>Export Review</Button>

<Button variant="danger" href="#" ask>Archive Project</Button>