Product Catalogue & Advanced Filtering

Overview

Major enhancement to the Uniform Builder with a complete product catalogue system featuring advanced filtering capabilities and an improved sidebar navigation experience.

Features

Product Catalogue

• Responsive product grid displaying all available uniform products
• Product cards showing:
  • Product image with hover zoom effect
  • Display name and SKU
  • Starting price or "Price on request"
  • Gender badge overlay
  • Category and product line badges
• Pagination controls for large catalogues
• Empty state messaging when no products match filters
• Loading states with skeleton placeholders

Sidebar Filtering System

• Persistent sidebar with search and filter controls
• URL-based filter state for shareable/bookmarkable filtered views
• Debounced search input for performance
• Clear all filters functionality with active filter count

Filter Options

Complete filtering by:

• Sports - With sport icons in dropdown (21 sports)
• Gender - Men/Boys, Women/Girls, Boys, Girls, Unisex
• Category - Goalie Jersey, Uniform Jersey, Shorts, Warmups, etc.
• Product Line - Flash, Premier, Premier Pro, Select
• Fabric - LTE Fit, Stretch Woven LT, Vapor Mesh, XD200
• Neckline - Crew Neck, V-Neck, Henley, Polo
• Sleeves Cut - Raglan, Set-In
• Sleeves Length - Short, Long, Sleeveless
• Decoration - Sublimation, Screen Print, Embroidery, Heat Transfer
• Factory - Dynamic based on available products
• Ship By Date - 1 week to 60 days options
• Price Range - Tiered pricing filters

Product Form Integration

• New filter attributes added to product creation wizard
• Collapsible "Product Attributes" section in forms
• Edit form updated with all new attribute fields
• Proper null handling for optional fields

Database Schema Updates

New columns added to products table:

• gender - Product gender targeting
• decoration - Decoration/printing method
• product_line - Product tier/line
• fabric - Fabric type
• neckline - Neckline style
• sleeves_cut - Sleeve cut style
• sleeves_length - Sleeve length
• factory - Manufacturing facility
• ship_by_days - Estimated shipping days
• price_min - Starting price for filtering

Technical Changes

• Added use-builder-filters hook for URL-based state management
• Created product-catalogue.loader.ts server action for filtered queries
• Configured Next.js image optimization for Supabase storage URLs
• Fixed sidebar component bug where open was undefined
• Added 16 sample products with images for testing

Bug Fixes

• Fixed ReferenceError: open is not defined in sidebar component
• Fixed upstream image resolved to private ip error for Supabase images