# Fulfillment Exceptions block

> Operations dashboard with KPI stat cards, capacity charts, and a filterable exception data grid

Fulfillment control center: metric cards, shift performance, capacity allocation tabs, a donut flow chart, and a searchable paginated exception queue. Uses ReUI Frame, Badge, DataGrid plus Tabs, Select, Progress, breadcrumb, and a date-range picker.

- Type: Pro block
- Category: [Dashboard](https://web.dev.reui.io/blocks/application/dashboard.md)
- Page: https://web.dev.reui.io/blocks/application/dashboard/dashboard-1
- MCP: `get_block("dashboard-1")`
- Built with: Avatar, Badge, Breadcrumb, Button, Calendar, Chart, Checkbox, Data Grid, Dropdown Menu, Frame, Input Group, Item, Label, Popover, Progress, Select, Separator, Tabs, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A fulfillment exception queue with selectable rows and status counts, under a segmented capacity meter and decision donut

## Agent notes

- Replace `SHIFT_SNAPSHOTS`, `FULFILLMENT_ROWS`, `allocationPeriods`, `inflowPeriods` and `FULFILLMENT_DAYS`, which needs one row per day from `SERIES_START`
- `handleExport`, `handleSchedule`, `handleFullReport`, Add exception, the Actions menu and the View, Notify and Escalate row actions only fire a sonner `toast`
- `reportRange` drives only the KPI cards and Export toast; `REPORT_MAX_DATE`, `DEFAULT_REPORT_RANGE` and `REPORT_RANGE_PRESETS` assume today is Jun 10, 2026

## When not to use

- A module tracker with progress rings, favorites and a sort menu: use [Module Tracker](https://web.dev.reui.io/blocks/application/dashboard/dashboard-2.md) (`get_block("dashboard-2")`)
- A grid of KPI tiles alone, with no queue or panels under it: use [Deal Invoice Tiles](https://web.dev.reui.io/blocks/application/card/card-35.md) (`get_block("card-35")`)

## 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)
- date-fns v4: [docs](https://date-fns.org/v4.1.0/docs/Getting-Started)
- React DayPicker v9: [API reference](https://daypicker.dev/v9/api), [docs](https://daypicker.dev/v9/start)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

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

## 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.