# Stock Planner

> Stock planner sheet: a wide right-anchored sheet built on the sheet-6 shell. Header carries title, product name + Live badge, SKU/created/updated meta, and the Customer View / Remove / Edit Product action cluster. Scrollable two-column body pairs left-side Inventory KPIs, an Analytics card with two sparkline area charts, and a Variants table (size/color/price/availability/on-hand) with a right-side product gallery + thumbnails + spec list (category, fit, color swatches, sizes, star rating + reviews).

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

- Page, with a preview: https://shadcn.exchange/r/reui/solution-inventory-7
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/solution-inventory-7-light-33665189bb7dac6e.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-7

## Dependencies

- npm packages: `cn`, `recharts`
- Registry items: `@reui/badge`, `@reui/frame`, `@reui/rating`, `button`, `chart`, `scroll-area`, `separator`, `sheet`, `table`

## Notes from the registry

## Purpose
A detail surface the operator opens from any product list (e.g. the solutions/inventory/solution-inventory-6 grid) to review inventory health, sales velocity, and per-variant stock without leaving the parent screen. The sheet is wider than the standard sheet-6 (72rem) so the two-column dashboard layout fits comfortably without horizontal scroll.

## Best Fit
- side-drawer detail view triggered from a product DataGrid row
- buyer/operator review screen pairing stock KPIs with sales velocity and variant breakdown
- merch-ops handoff sheet where the same actions (Customer View / Remove / Edit Product) live in both header and footer

## Main Pieces
- **Sheet shell** (adapted from `application/sheet/sheet-6`): right-anchored `Sheet` with inset rounded corners, no built-in close button, `SheetHeader` carrying the title row + a secondary row with product name/badge/meta and the action cluster, `ScrollArea` body, `SheetFooter` mirroring the action cluster.
- **Inventory** (shadcn `Card`): grid of 5 inline KPIs - Status badge, In Stock count, Delta badge, Velocity, Updated By.
- **Analytics** (shadcn `Card`): two stat blocks - Sales price + Sales - each with a trend `Badge` and a recharts `AreaChart` sparkline (`h-[88px]`, no axes, monotone curve with vertical gradient fill).
- **Variants** (shadcn `Card` + `Table`): rows for each size/color combination with price, availability, on-hand, and per-row edit action. Header carries a `Manage Variants` link styled with the standard `ECOMMERCE_LINK_CLASS_NAME`.
- **Product gallery**: square hero image + 5-thumbnail strip (selected state via 2px ring) with selection state held in component state.
- **Spec list**: `<dl>` with Category, Fit, Colors (color swatches), Sizes (EU/US/UK), Rating (`Rating` primitive + reviews link).

## Reused Blocks
- `application/sheet/sheet-6` - sheet anatomy: trigger button, custom-width `SheetContent`, sticky `SheetHeader`/`SheetFooter`, `ScrollArea` body
- `ecommerce/category-card/category-card-1..6` - `ECOMMERCE_LINK_CLASS_NAME` convention for hover-underline links
- `chart/area-chart/chart-17` - `AreaChart` + gradient sparkline pattern (adapted with no tooltip + no axes for compact KPI display)

## Layout Grid
- Sheet width: `w-[min(72rem,calc(100vw-2rem))]` - never exceeds 1152px, never less than viewport - 2rem padding
- Inner body: `grid-cols-1 lg:grid-cols-12` with left section spanning `col-span-7` and the gallery/specs spanning `col-span-5`; stacks on smaller widths
- Inventory KPIs: `grid-cols-2 sm:grid-cols-3 lg:grid-cols-5` so KPIs reflow on narrower body widths

## LLM Guidance
Keep the three-piece left column (`InventorySection` / `AnalyticsSection` / `VariantsSection`) and two-piece right column (`ProductMedia` / `ProductSpecs`). To add another KPI to the Inventory card, extend the `stats` array - the grid will reflow automatically. To swap or add charts, edit the trend data arrays in `data.ts`; the `Sparkline` component takes any `[{ day, value }]` shape. The trend `Badge` reuses success-light / destructive-light tones - pass a `direction` prop or compute it from the value sign. The action cluster (`HeaderActions`) is intentionally rendered twice (header + footer) - keep both in sync by editing the single component. The sheet defaults to `open: true` so the preview reads at full state; in production wire `open`/`onOpenChange` to the parent grid's row trigger.