# Usage Event Ledger block

> Metered usage event ledger with tree meter scope selection

Audit metered events by meter and period with tree sidebar nav filtering, date picker, and export. ReUI DataGrid, Filters, Frame, Badge; shadcn Button, Calendar, Breadcrumb. Usage based billing, consumption tracking, subscription auditing.

- Type: Pro block
- Category: [Billing](https://web.dev.reui.io/blocks/solutions/billing.md)
- Page: https://web.dev.reui.io/blocks/solutions/billing/solution-billing-7
- MCP: `get_block("solution-billing-7")`
- Built with: Avatar, Badge, Breadcrumb, Button, Calendar, Data Grid, Dialog, Dropdown Menu, Empty, Field, Filters, Frame, Icon Stack, Item, Popover, Radio Group, Separator, Skeleton, Tooltip, Tree
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Events flagged within or over allowance, an empty state for meters with no events, an event inspector and CSV, Excel or PDF export

## Agent notes

- Replace `USAGE_METERS` and `USAGE_EVENTS` in data.tsx and the fixed `USAGE_PERIOD_LABEL` that the export dialog shows
- `MeterTreeNav` hardcodes its group nodes and ids such as `BANDWIDTH_ID` and `GPU_MINUTES_ID`, so another meter set needs the tree rebuilt
- `runFilter` fakes a 400 ms wait before `computeRows`, and the export dialog only toasts, so no CSV, Excel or PDF file is made

## When not to use

- A standalone outline of nested items with chevron toggles and no data grid beside it: use [Tree](https://web.dev.reui.io/components/tree.md) (`get_component("tree")`)
- A folder rail beside list and grid views of stored documents: use [Drive Explorer](https://web.dev.reui.io/blocks/solutions/files/solution-files-1.md) (`get_block("solution-files-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)
- Headless Tree v1: [API reference](https://headless-tree.lukasbach.com/api/core/), [docs](https://headless-tree.lukasbach.com/getstarted/)
- 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/solution-billing-7
```

## About Billing blocks

### When to use

- A back office for billing operators: the invoice ledger, subscriptions, a dunning queue and metered usage
- Plan and discount admin: editing the plan catalog and coupon rules, or moving a subscription to a new tier
- One customer's billing account seen by staff, or an invoice built line by line and then sent

### When not to use

- A public page where visitors compare plan tiers and pick one before signing up: use the [Pricing blocks](https://web.dev.reui.io/blocks/marketing/pricing.md)
- A signed in customer's own settings page showing their plan, usage and invoices: use the [Profile blocks](https://web.dev.reui.io/blocks/application/profile.md)
- A stepped intake flow with no money in it, such as vendor onboarding or team invites: use the [Wizard blocks](https://web.dev.reui.io/blocks/application/wizard.md)

### Agent notes

- Each block sets a `min-h-svh` wrapper with `bg-background`, padding and a max width in page.tsx or its root component; drop it inside an app shell
- No block calls an API: sends, retries, saves and exports update `useState` or fire a sonner `toast`; post to your billing backend from those handlers

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.