<Card title="Admin Overview" subtitle="Select reporting period">
<Form name="period-select">
<Input label="Reporting period" type="date" name="period" placeholder="Select date" required=true />
<Button variant="secondary">Apply</Button>
</Form>
</Card>

<Card title="Monthly Recurring Revenue">
<Stat label="MRR" value="$12,500" change="+5%" note="MoM" tone="success" />
</Card>

<Card title="Annual Recurring Revenue">
<Stat label="ARR" value="$150,000" change="+8%" note="YoY" tone="success" />
</Card>

<Card title="Churn This Month">
<Stat label="Churn" value="2.5%" change="-0.3%" note="Rate" tone="warning" />
</Card>

<Card title="New Signups (90 days)">
<Stat label="New signups" value="342" change="+12%" note="Growth" tone="success" />
</Card>

<Card title="Plan Distribution">
<Chart type="pie" x="Plan" y="Customers" title="Plan Distribution">
| Plan | Customers |
|---|---|
| Free | 120 |
| Growth | 250 |
| Pro | 380 |
| Enterprise | 150 |
</Chart>
</Card>

<Card title="Top 10 Customers">
<Gallery>
![Customer 1](https://via.placeholder.com/150?text=Customer+1)
![Customer 2](https://via.placeholder.com/150?text=Customer+2)
![Customer 3](https://via.placeholder.com/150?text=Customer+3)
![Customer 4](https://via.placeholder.com/150?text=Customer+4)
![Customer 5](https://via.placeholder.com/150?text=Customer+5)
![Customer 6](https://via.placeholder.com/150?text=Customer+6)
![Customer 7](https://via.placeholder.com/150?text=Customer+7)
![Customer 8](https://via.placeholder.com/150?text=Customer+8)
![Customer 9](https://via.placeholder.com/150?text=Customer+9)
![Customer 10](https://via.placeholder.com/150?text=Customer+10)
</Gallery>
</Card>

<Card title="Accounts at Risk">
<Details title="At risk accounts" open=true>
<TextArea label="Risk details" placeholder="List customers with risk reasons" />
</Details>
</Card>

<Card title="Failed Payments">
<Steps>
<Step title="Payment #1" status=todo>Failed – <Button variant="danger" href="#">Retry</Button></Step>
<Step title="Payment #2" status=todo>Failed – <Button variant="danger" href="#">Retry</Button></Step>
<Step title="Payment #3" status=todo>Failed – <Button variant="danger" href="#">Retry</Button></Step>
<Step title="Payment #4" status=todo>Failed – <Button variant="danger" href="#">Retry</Button></Step>
<Step title="Payment #5" status=todo>Failed – <Button variant="danger" href="#">Retry</Button></Step>
</Steps>
</Card>

<Card title="Feature Adoption">
<Progress value=45 max=100 label="Feature A" tone=info />
<Progress value=30 max=100 label="Feature B" tone=info />
<Progress value=60 max=100 label="Feature C" tone=info />
</Card>

<Card title="Net Promoter Score">
