# Pipeline Dashboard block

> Sales Pipeline CRM Dashboard with Metric Charts and Open-Deals Grid

Sales pipeline command center tracking pipeline value, forecast, and win rate via metric charts, plus a dense open-deals grid for search, sort, stage filters, and row actions. ReUI Badge, DataGrid; shadcn Card, Button, Avatar. CRM sales dashboard.

- Type: Pro block
- Category: [CRM](https://web.dev.reui.io/blocks/solutions/crm.md)
- Page: https://web.dev.reui.io/blocks/solutions/crm/solution-crm-1
- MCP: `get_block("solution-crm-1")`
- Built with: Avatar, Badge, Breadcrumb, Button, Card, Data Grid, Dropdown Menu, Input, Input Group, Item, Popover, Separator
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Open pipeline, weighted forecast and win rate sparklines over a deal grid with probability rings, a favorite star and a stage filter

## Agent notes

- `businessCards` hardcodes each KPI value and period, and the sparklines read `pipelineData`, `forecastData` and `winRateData`, not `DEAL_RECORDS`
- `handleDealAction` only toggles `favorite`; open, duplicate and archive show a toast, and `handleAddDeal` shows a toast instead of a dialog
- `DEAL_RECORDS` seeds the `deals` state, and search and the stage filter run in the `filteredDeals` memo over it, so server data needs both moved

## When not to use

- Deals shown as cards that move between stage columns, not as grid rows: use [Deal Board](https://web.dev.reui.io/blocks/solutions/crm/solution-crm-2.md) (`get_block("solution-crm-2")`)
- A deal table with pinned priority rows and faceted filters, and no KPI cards: use [Deal Pipeline](https://web.dev.reui.io/blocks/data-grid/base/data-grid-base-3.md) (`get_block("data-grid-base-3")`)

## Third-party libraries

- Recharts v3: [API reference](https://recharts.github.io/en-US/api/), [docs](https://recharts.github.io/en-US/guide/getting-started/)
- TanStack Table v9: [API reference](https://tanstack.com/table/v9/docs/framework/react/reference/index), [docs](https://tanstack.com/table/v9/docs/framework/react/quick-start)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

```bash
npx shadcn@latest add @reui/solution-crm-1
```

## About CRM blocks

### When to use

- A sales team's deal work: a pipeline board, a deal grid, a forecast call or the record of one deal
- The contact side of sales: a contacts directory, an activity log across accounts and a CSV import
- A sales overview of open pipeline, weighted forecast and win rate above the open deals

### When not to use

- Cards for tasks or tickets moved across columns, with no deal value or close date: use the [Kanban Board blocks](https://web.dev.reui.io/blocks/application/kanban-board.md)
- A records table with sorting, paging and row selection, outside a sales context: use the [Base blocks](https://web.dev.reui.io/blocks/data-grid/base.md)
- A side panel for one record that is not a deal, such as an order or a user: use the [Sheet blocks](https://web.dev.reui.io/blocks/application/sheet.md)

### Agent notes

- Each block sizes its page with `min-h-svh`, or `h-svh` on the Deal Desk, in page.tsx or its root component; size it from your app shell instead
- Every change lives in `useState` or a `useReducer` store and resets on reload; no block calls an API or writes to storage

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.