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 bodyecommerce/category-card/category-card-1..6 - ECOMMERCE_LINK_CLASS_NAME convention for hover-underline linkschart/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.
