# Module Tracker block

> Operations Dashboard with Sparkline Metric Cards and Searchable Module Data Grid

Operations console: sticky navbar with team presence and invite, three area-chart metric cards, and a paginated module DataGrid with progress rings, search, sort, and status filters. ReUI DataGrid, Badge; shadcn Card, Avatar, Popover, DropdownMenu.

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

## Best for

A module tracker with progress rings, a sort menu and a favorite star under 3 area sparkline cards

## Agent notes

- Replace `MODULE_RECORDS`, `revenueData`, `signupsData` and `licensesData`; each card's `aggregate` is `sum` for a flow metric or `latest` for a running total
- `handleAddModule` inserts a `createDraftModule` row instead of opening a form, and Duplicate and Archive with Undo change only local `modules` state
- The Open row action, `handleInvite`, `handleShare` and `handleExport` are `toast` stubs; no detail view opens and nothing is sent or exported

## When not to use

- An exception queue with row selection, pinnable columns and status counts: use [Fulfillment Exceptions](https://web.dev.reui.io/blocks/application/dashboard/dashboard-1.md) (`get_block("dashboard-1")`)
- The module list with progress rings alone, without metric cards or a navbar: use [Project Modules](https://web.dev.reui.io/blocks/data-grid/base/data-grid-base-7.md) (`get_block("data-grid-base-7")`)

## 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/dashboard-2
```

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