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