# Dashboard Recipe

Use for authenticated product dashboards, admin tools, operations consoles, analytics, and data-heavy workflows.

## Structure

```html
<hf-app-shell background="subtle">
  <hf-app-sidebar
    logo="HUMAIN"
    nav-items='[{"id":"overview","label":"Overview"},{"id":"revenue","label":"Revenue"}]'
    active-nav-item-id="overview"
  ></hf-app-sidebar>

  <hf-app-shell-card>
    <hf-page-header
      title="Product overview"
      supporting-text="All metrics - last 30 days"
    ></hf-page-header>

    <section class="metric-grid" aria-label="Key metrics">
      <hf-metric-card title="ARR" value="$4.28M" change="18.4"></hf-metric-card>
      <hf-metric-card title="MRR" value="$356K" change="11.2"></hf-metric-card>
      <hf-metric-card title="MAU" value="12.4K" change="8.7"></hf-metric-card>
    </section>

    <hf-bar-chart
      aria-label="Monthly revenue"
      data="[]"
      series="[]"
    ></hf-bar-chart>
  </hf-app-shell-card>
</hf-app-shell>
```

## Rules

- Use `hf-app-shell` and `hf-app-sidebar` when navigation is present.
- Use `hf-app-shell-card` for dashboard panels.
- Use `hf-page-header` for page or panel titles.
- Use `hf-metric-card` for KPIs instead of raw cards.
- Use HUMAIN chart custom elements instead of inline SVG chart scaffolds.
- Use `body-padding="none"` for edge-to-edge tables or charts; omit `body-padding` for standard padded panels.
- The first viewport must contain populated panels, not a mostly blank shell.