# Voice Agent Calls block

> Voice Agent Call Analytics Dashboard with Tabbed Metric Switcher and Composed Area Chart

Call analytics overview for voice AI ops: six-metric tab switcher (calls, duration, cost, LLM cost) over a recharts area-line chart, ranked agent bars, and integration status list. ReUI Frame, Badge with shadcn Button, Select, Chart, Item.

- Type: Pro block
- Category: [Dashboard](https://web.dev.reui.io/blocks/application/dashboard.md)
- Page: https://web.dev.reui.io/blocks/application/dashboard/dashboard-4
- MCP: `get_block("dashboard-4")`
- Built with: Alert Dialog, Badge, Button, Chart, Dropdown Menu, Frame, Icon Tile, Item, Select, Separator
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A chart first call overview with no table, where 6 metric buttons redraw one line rebucketed hourly, daily or weekly

## Agent notes

- Replace `callVolumeData` with hourly rows per agent and `callAgents` with your roster; tiles, chart and agent ranking follow, but Active Calls 294 is hardcoded
- `selectCallRecords` reads each row's `day` as an index into `callDays`, a fixed 28 day window ending `DEMO_END_DATE_UTC`; map real dates onto it
- `handleAddReport`, `handleViewMore` and Manage only fire a `toast`; the integration row buttons change local `statusById` and call no API

## When not to use

- A KPI tab switcher over one line as a single card in an existing page: use [Metric Switcher](https://web.dev.reui.io/blocks/chart/line-chart/chart-6.md) (`get_block("chart-6")`)
- One metric studied alone with its alert rule, cohort rows and a change log: use [Metric Deep Dive](https://web.dev.reui.io/blocks/solutions/analytics/solution-analytics-8.md) (`get_block("solution-analytics-8")`)

## Third-party libraries

- Recharts v3: [API reference](https://recharts.github.io/en-US/api/), [docs](https://recharts.github.io/en-US/guide/getting-started/)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

```bash
npx shadcn@latest add @reui/dashboard-4
```

## About Dashboard blocks

### When to use

- A full page overview: a header, a row of summary tiles, then a trend chart, a work list or both
- A team home for fulfillment, product modules, timesheets, staffing, calls, security, revenue or payouts

### When not to use

- One trend panel to drop into a page layout you already have: use the [Area Chart blocks](https://web.dev.reui.io/blocks/chart/area-chart.md)
- A strip of KPI tiles on its own, with nothing under it: use the [Stats blocks](https://web.dev.reui.io/blocks/application/stats.md)
- Product usage reporting on activation, cohorts, events or experiments: use the [Analytics blocks](https://web.dev.reui.io/blocks/solutions/analytics.md)

### Agent notes

- Each block sets its own `min-h-svh` wrapper, padding and max width in page.tsx, its root component or both; strip them inside an app shell

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.