# Product quality bar — Item Smart parity (MANDATORY for planning prototypes)

When a product, designer, or manager user asks for a **planning tool**, **dashboard**, or **prototype that looks like Item Smart**, the output must meet this bar — not a bare DataTable on a page.

Reference: Item Planning (`/item-planning`) in Item Smart after filter selection.

---

## Phase 1 — Before filters (landing)

| Required | Impact Nova |
|----------|-------------|
| Breadcrumb only (`Home > Item Planning`) | `breadcrumb` / `BreadcrumbHeader` |
| Centered empty state with illustration | `empty-container` |
| Title: "Welcome to your planning workspace!" | `EmptyContainerTitle` |
| Subtitle: "Click Select Filters to load your items" | `EmptyContainerDescription` |
| Primary CTA: **Select filter** | `Button` in `EmptyContainerAction` |
| **No grid, no KPIs, no filter strip** until filters applied | Conditional render |

---

## Phase 2 — Filter selection (FilterPanel)

| Required | Impact Nova |
|----------|-------------|
| Side sheet titled **Item Filters** | `filter-panel` / `FilterPanel` |
| Left sidebar tabs with icons | `FilterPanelSidebar` |
| Tabs: **Product** *, **Channels** *, **Plan Period** *, **Saved Filters** | `FilterSidebarItem` with `isRequired`, `count` |
| Form fields per tab (Division, Channel, period) | `combobox`, `select`, `input` |
| Footer: **Cancel** · **Save filter** · **Apply filters** | `FilterPanelFooter` + `Button` |
| Apply disabled until required fields filled | Form validation |
| Saved Filters tab lists saved views | Mock list OK for prototypes |

**Never** use a native `<select>` or custom modal for filters when `FilterPanel` exists.

---

## Phase 3 — After filters applied (workspace)

| Required | Impact Nova |
|----------|-------------|
| `bg-brand-subtle` page background | Tailwind token |
| Filter strip with chips + **All Filters** | `filter-strip` / `FilterStrip` |
| **Hide filters** / **Hide KPIs** in breadcrumb bar | `Button variant="tertiary"` |
| Collapsible KPI summary section | `accordion` + summary cards |
| White rounded table card | `DataTable` with `bg-white rounded-md` |
| **DataTableToolbar** above grid | `data-table` / `DataTableToolbar` |
| Workflow tabs in toolbar (Sales / Inventory / Receipts) | `tabs` inside toolbar |
| **⋮ menu** → Table settings, Expand, Density | `DataTableViewMenu*` |
| Table settings sheet: **Columns** + **Format** tabs | `DataTableSheet` + `DataTableColumnList` + `DataTableFormatOptions` |
| Compact row density default | `useDataTable().setRowHeight("compact")` |
| Update / Cancel when grid edited | Toolbar buttons + toast |
| Toaster at app root | `toaster` |

---

## Anti-patterns (reject in validate_snippet)

| Bad | Why |
|-----|-----|
| Grid visible before filters | Breaks Item Smart UX |
| Filter strip with chips but no FilterPanel | Chips must open panel via All Filters |
| Tabs below filter strip, outside toolbar | Workflow tabs belong in `DataTableToolbar` |
| No table settings menu | Product users expect ⋮ → Columns/Format |
| `alert()` for save success | Use `toast()` |
| HTML table or raw ag-grid | Use `DataTable` |

---

## Agent checklist (before saying "done")

- [ ] Empty state when no filters
- [ ] FilterPanel with sidebar tabs + Apply/Cancel footer
- [ ] FilterStrip only after apply
- [ ] KPI section (collapsible) above grid
- [ ] DataTableToolbar + workflow tabs + ⋮ view menu
- [ ] Table settings sheet (Columns + Format)
- [ ] Compact density + viewport expand option
- [ ] Update/Cancel + toast on save/discard
- [ ] `validate_snippet` passes
- [ ] `npm run typecheck` passes

---

## MCP resources to read

1. `impact-nova://design-system-mandate`
2. `impact-nova://ia-design-language` — **Figma-trained** shell, typography, colors (IA DS + Item Smart + Baseprice)
3. `impact-nova://product-prompts`
4. `impact-nova://product-quality-bar` (this file)
5. `impact-nova://ag-grid-rules` (for column groups)

---

## Scaffold note

Greenfield planning prototypes: `scaffold_impact_nova_app` ships **Item Smart–parity chrome** out of the box:

- `PageShell` + `PageStickyHeader` (`bg-brand-subtle`, white filter strip)
- `EmptyStateView` + `SummaryMetricCard` shared primitives
- `filtered-workspace` recipe: 3-phase empty → FilterPanel → KPI rail + grid
- `data-catalog` / `dashboard` recipes: full-height table card + metric tiles

Extend module data — do not rebuild page shell or empty → workspace flow from scratch.

**Standards doc:** `create-impact-nova/docs/TEMPLATE_STANDARDS.md` — Item Smart parity (DataTable shell, density, filter guard, Zustand, column defs, premium page chrome).