# Stock Health Grid

> Inventory overview block: total asset value KPI + segmented stock health bar (in stock / low / out of stock) above a filterable product DataGrid with search, date range, category and supplier filters, row selection, and pagination.

A paid shadcn/ui block sold by the [@reui](https://reui.io/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/reui/solution-inventory-6).

- Page, with a preview: https://shadcn.exchange/r/reui/solution-inventory-6
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/solution-inventory-6-light-87e80a59fcaa716a.png
- Listed: 2026-10-13

## Buy and install

@reui sells this block, and its code is not on shadcn.exchange. Buy it from the registry, which installs it for those who have: https://shadcn.exchange/out/reui/solution-inventory-6

## Dependencies

- npm packages: `@tanstack/react-table`, `cn`, `date-fns`, `react-day-picker`
- Registry items: `@reui/badge`, `@reui/data-grid`, `@reui/frame`, `button`, `calendar`, `card`, `@reui/data-grid-column-header`, `@reui/data-grid-pagination`, `@reui/data-grid-scroll-area`, `@reui/data-grid-table`, `dropdown-menu`, `input-group`, `popover`, `select`, `separator`, `tooltip`

## Notes from the registry

## Purpose
A buyer/operator's inventory dashboard in a single screen. Pairs a hero KPI strip (total asset value + product mix by stock health) with a filterable product DataGrid so the operator can read overall stock health and drill into individual SKUs without leaving the page.

## Best Fit
- shop admin inventory landing page with a single dense product table
- warehouse manager mid-screen view that surfaces stock health and per-SKU flow at once
- procurement workspace where Stock Planner is the next action after reviewing stock status

## Main Pieces
- **StatsHeader** (adapted from `application/stats/stats-3`): Frame + FramePanel split into two columns - Total Asset Value on the left, product count + segmented stock health bar + emerald/amber/destructive legend on the right.
- **InventoryDataGrid** (adapted from `application/data-grid/data-grid-10`): Frame + FramePanel containing a toolbar (search, date range button, category Select, supplier Select, Stock Planner CTA), the ReuiDataGrid (`DataGrid` + `DataGridScrollArea` + `DataGridTable`), and `DataGridPagination` inside a `FrameFooter`. Columns: row select, Product Info, Stock Flow (on-hand / inbound / outbound with icons), Delta badge, Price, Category, Supplier (initial chip + name), Updated, row actions menu.

## Reused Blocks
- `application/stats/stats-3` - segmented progress bar pattern for the stock health strip, adapted to inventory states (in stock / low / out of stock).
- `application/data-grid/data-grid-10` - toolbar + DataGrid + pagination chrome, adapted with inventory-specific columns and filters.

## Layout Grid
Single column at any breakpoint. Header card spans the full width above the table; both share the `max-w-7xl` container and 24px (`gap-6`) vertical rhythm.

## LLM Guidance
Keep the two-piece composition (`StatsHeader` + `InventoryDataGrid`). When extending, add new toolbar controls inside the toolbar `div`, and new columns in `productColumns` in `columns.tsx`. The stacked bar reads percentages from `inventorySummary` in `data.ts` - swap that single object when wiring real data. The supplier chip uses the `SUPPLIERS` lookup to map a name to an initial + tailwind background class; add new suppliers to that map rather than inlining classes in cells.