# Token Spend Ledger block

> AI Token Spend Ledger Data Grid with Budget Status and CSV Export

Full-page grid auditing token usage and cost by model provider and prompt, with filtering, sorting, CSV export, a row-detail sheet, and budget-alert toggles. ReUI DataGrid, Filters, Frame, Badge; shadcn Button, Switch, Sheet. AI ops cost tracking.

- Type: Pro block
- Category: [AI Ops](https://web.dev.reui.io/blocks/solutions/ai-ops.md)
- Page: https://web.dev.reui.io/blocks/solutions/ai-ops/solution-ai-ops-8
- MCP: `get_block("solution-ai-ops-8")`
- Built with: Badge, Button, Data Grid, Dropdown Menu, Field, Filters, Frame, Input, Item, Scroll Area, Select, Separator, Sheet, Skeleton, Switch, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Token cost rows with an add entry sheet, a row detail sheet, column visibility and 3 follow up panels of switches and buttons

## Agent notes

- Sample ledger rows live in `ROWS` and are exported as `TOKEN_LEDGER_ENTRIES`, so replace them with your usage records
- `handleExportLedger` writes no CSV file, and `handleCreateEntry` only prepends the new row to local state
- The `Switch` toggles in `followUpSections` use `defaultChecked` and keep no state, and its Open, Review and Send buttons only toast

## When not to use

- Your own columns and rows that only need sorting and paging: use [Data Grid](https://web.dev.reui.io/components/data-grid.md) (`get_component("data-grid")`)
- Payment transactions with a multi-field filter bar and skeleton loading: use [Billing Transactions](https://web.dev.reui.io/blocks/data-grid/filtering/data-grid-filtering-1.md) (`get_block("data-grid-filtering-1")`)

## Third-party libraries

- 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-ai-ops-8
```

## About AI Ops blocks

### When to use

- Model operations dashboards that track provider health, token volume and spend against a budget cap
- Provider connection and routing pages that set priority order, fallback providers and risk tier controls
- Prompt, feature flag and token usage registries, a prompt editor and a safety policy wizard

### When not to use

- Autonomous agent runs, tool permissions and human approval of agent actions: use the [Agents blocks](https://web.dev.reui.io/blocks/solutions/agents.md)
- A bare table for your own columns and rows, with no provider or token sample records: use [Data Grid](https://web.dev.reui.io/components/data-grid.md) (`get_component("data-grid")`)
- A KPI tile and trend chart overview for a fulfillment, staffing, revenue or payouts team: use the [Dashboard blocks](https://web.dev.reui.io/blocks/application/dashboard.md)

### Agent notes

- Each page.tsx wraps the block in a `min-h-svh` container; remove it when the block sits inside your app shell
- No block calls an API: changes stay in local `useState` or uncontrolled inputs, so wire each save, switch, export and row action to your backend

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.