Products & Catalog

Last updated on 2026-04-05

The products module is the foundation of the inventory system. It provides a full product catalog with search and filtering, detailed product views with stock tracking, forms for creating and editing products, and a category management interface. All screens share the (dashboard) route group layout.

Product List

Route: /products

The primary product catalog view with a data table supporting search, filtering, and sorting.

Data table -- columns for product image thumbnail, name (linked to detail), SKU, category badge, unit price, total stock quantity, stock status indicator, and a row actions dropdown
Search -- text input filtering products by name or SKU
Filters -- dropdown filters for category and stock status (In Stock, Low Stock, Out of Stock), with a "Clear filters" button when active
Sorting -- column header click to sort by name, price, stock quantity, or SKU
Pagination -- page-based navigation with configurable page size (10, 25, 50)
Row actions -- dropdown menu with View, Edit, and Delete options; delete triggers an AlertDialog confirmation
Bulk actions -- checkbox selection with bulk delete and bulk category assignment

import { ProductsTable } from "@/components/inventory/products-table"
import { ProductFilters } from "@/components/inventory/product-filters"

Stock Status Indicators

Status	Color	Condition
In Stock	green	Quantity above reorder point
Low Stock	amber	Quantity at or below reorder point
Out of Stock	red	Quantity is zero

Data Sources

Data	Source	Location
Products	`products`	`data/seed.ts`
Categories	`categories`	`data/seed.ts`

Product Detail

Route: /products/[id]

A detailed view of an individual product with a hero section, tabbed content, and a stock summary sidebar.

Hero section -- product image, name, SKU badge, category tag, unit price, description, and quick action buttons (Edit, Reorder, Adjust Stock)
Tabbed content -- three tabs for different data views:
- Overview -- product specifications, dimensions, weight, barcode, supplier link, and key metrics (total stock, reserved, available)
- Stock by Warehouse -- table showing stock levels at each warehouse with quantity, reorder point, last restocked date, and a visual stock level bar
- Order History -- data table of purchase orders containing this product, showing PO number, supplier, quantity ordered, date, status badge, and unit cost
Right sidebar -- total stock across all warehouses, stock status badge, primary supplier link, reorder point, cost price, and margin percentage

import { ProductHero } from "@/components/inventory/product-hero"
import { ProductSidebar } from "@/components/inventory/product-sidebar"
import { ProductTabs } from "@/components/inventory/product-tabs"
import { StockByWarehouse } from "@/components/inventory/stock-by-warehouse"

Product Detail Layout

┌───────────────────────────────┬──────────────┐
│ Image  Name  SKU               │ Total Stock  │
│ Category  Price  Description   │ Status       │
├───────────────────────────────┤ Supplier     │
│ [Overview] [Stock] [Orders]   │ Reorder Pt   │
│                               │ Cost Price   │
│ Tab content area              │ Margin       │
│                               │              │
└───────────────────────────────┴──────────────┘

Edit Product

Route: /products/[id]/edit

A pre-populated form for editing an existing product. The form loads the current product data and validates changes on submission.

Product Info -- name, SKU (read-only after creation), description textarea, barcode
Pricing -- unit price (currency input), cost price, margin (auto-calculated)
Category -- category select dropdown with option to create new category inline
Inventory Settings -- reorder point (number input), minimum order quantity, lead time in days
Supplier -- primary supplier select (searchable), supplier SKU reference
Dimensions -- weight, length, width, height with unit selectors
Images -- image upload with drag-and-drop, reorder thumbnails, set primary image

import { ProductForm } from "@/components/inventory/product-form"

Add New Product

Route: /products/new

A blank form for creating a new product. Shares the same form component as the edit page but with empty initial values.

All fields from the edit form are available
SKU auto-generation -- optional auto-generated SKU based on category prefix and sequential number, with manual override
Initial stock -- optional field to set opening stock quantity and warehouse assignment
Validation ensures required fields (name, SKU, unit price, category) are completed before submission

Categories Management

Route: /products/categories

A dedicated screen for managing the product category taxonomy.

Category list -- data table showing category name, slug, product count, description, and row actions
Add category -- inline form at the top with name, slug (auto-generated from name), description, and optional parent category select for hierarchy
Edit category -- click a row to expand an inline editor with the same fields
Delete category -- confirmation dialog warning about products that will become uncategorized
Category tree -- visual tree view showing parent-child hierarchy for nested categories
Reorder -- drag-and-drop to change category display order

import { CategoryList } from "@/components/inventory/category-list"
import { CategoryForm } from "@/components/inventory/category-form"
import { CategoryTree } from "@/components/inventory/category-tree"

Data Sources

Data	Source	Location
Categories	`categories`	`data/seed.ts`
Products (for count)	`products`	`data/seed.ts`

Next Steps

Purchase Orders -- PO management, line items, and receiving workflow
Warehouses & Stock -- warehouse management and stock tracking
Suppliers & Reports -- supplier directory and analytics reports

Project Structure

Purchase Orders