Catalog page

Filter chips above, search-right, view toggle. Click any card to open the product detail drawer. The shell below is wide — on phone it scrolls horizontally inside the frame so the rest of the page stays readable.

Variants & views

The catalog supports three views: grid (shown above, default for retail), table (dense, for back-office editing), and kanban (by category lifecycle stage — drafted, active, deprecated). Each view shares the same filter bar.

When to use

For browsing or scanning the catalog, grid view is best — the visual recognition helps clerks at the POS. For bulk editing prices or attributes, switch to table view and use multi-select. For weighing-scale items (gold scrap, copper, lead), prefer per-unit pricing.

Composition

Mobile behaviour

The 4-up product grid collapses to 3, then 2 columns. The desktop ERP shell above keeps its proportions but scrolls horizontally inside its frame — the page itself never widens past 390 px. Filter chips wrap to a second row, and toolbar actions fall onto a new line rather than overflowing.