Overview
The Products page is the main product catalog with filtering, pagination, and sync status management. It shows all products synced from Shopify with their current stock status.
Product List Columns
| Column | Description |
|---|---|
| Product | Product name with variant count badge (e.g., "Aerodynamic Mesh Runner (3 variants)") |
| Primary Supplier | Primary supplier name with cost and lead time |
| Total Stock | Sum of quantity_available across all variants |
| Status | Worst status across all variants (Healthy / Low / Critical / Stockout) |
| Actions | Sync toggle, view product detail |
Filters
| Filter | Options | Description |
|---|---|---|
| Status | All / Healthy / Low / Critical / Stockout | Filter by worst variant status |
| Sync Status | All / Synced / Unsynced | Synced = has inventory snapshot; Unsynced = no snapshot or do_not_sync = 1 |
| Supplier | Dropdown of all suppliers | Checks all 3 supplier slots (primary, 2nd, 3rd) |
| Search | Text input | Search by product name or SKU (debounced 300ms) |
Pagination
Load More
Shows 20 products per page at the product-group level (not SKU level). Click "Load More" to load the next 20 products.
Sync Status Toggle
| Icon | State | Behavior |
|---|---|---|
| 🔗 | Synced | Product is included in sync and calculations |
| ⛓️💥 | Not Synced | Product is excluded from sync, calculations, and inventory push |
Click the toggle to switch between synced/unsynced. Unsynced products show "N/A" for inventory values.
Expandable Rows
SKU Details
Click the "+" icon to expand a product row and see all its variants:
- SKU code
- Primary supplier with cost per unit and lead time
- Quantity available (or "N/A" if not synced)
- Status badge
- Sync toggle per SKU
- View (eye icon) — navigates to Product Detail page
Navigation Behavior
| Action | Filter Behavior |
|---|---|
| Click top nav Products tab | Clears all filters |
| Click breadcrumb from Product Detail | Clears all filters |
| Dashboard pie chart click | Clears other filters, applies status only |
| Dashboard stat card click | Clears all filters |
| Browser back button | Preserves previous filter state |
| Page refresh | Restores from URL hash or localStorage |
API Endpoints
| Endpoint | Method | Description |
|---|---|---|
/api/products | GET | List products (paginated, filterable by status/supplier/sync/search) |
/api/products/{id} | GET | Single product with variants and suppliers |
/api/products/{id} | PUT | Update product (do_not_sync flag) |
/api/products/{id}/toggle-sync | POST | Toggle sync status |
/api/products/sync | POST | Trigger product sync from Shopify |
/api/products/{id}/sales-chart | GET | 14-day sales data for product |
/api/products/{id}/recent-orders | GET | Orders containing this product |
Not Synced Filter: Shows products that either have
do_not_sync = 1 or have no inventory snapshot (products without inventory tracking enabled in Shopify).