2D Cut-Pattern Size Viewing & Quotes Module V1.0

Overview

Two major feature areas in this release: the 2D uniform builder canvas now supports real cut-pattern SVG rendering per product size with an interactive size selector, and a brand-new Quotes module provides end-to-end quote management with listing, detail view, fulfillment tracking, and customer contact capture.

Features

2D Cut-Pattern with Size Viewing

SVG Cut-Pattern Rendering — The Fabric.js canvas loads actual garment cut-pattern SVG paths instead of flat rectangles, giving designers a true-to-life silhouette of each product size
Size Selector Toolbar — Dropdown in the canvas toolbar lets users switch between available product sizes (e.g. S, M, L, XL) and instantly re-renders the cut-pattern
Product Sizes Configuration — Centralised size config with SVG path data, dimensions, and scaling per size variant
SVG Path Utilities — Helper functions for parsing, transforming, and scaling SVG path data to fit the canvas viewport
Builder Integration — New useProductSizesForBuilder hook fetches sizes for the active product and feeds them into the canvas context

Product Sizes Database & Management

product_sizes Table — Stores size variants per product with name, code, sort order, SVG cut-pattern path, dimensions, and active flag
Schema & Validation — Zod schemas for product size creation and updates
Service Layer — ProductSizeService for querying sizes by product with pagination and filtering
Product Wizard Step — New sizes step in the product creation wizard for defining size variants with cut-pattern SVG paths
Migration — 20260209120000_product_sizes creates the table, indexes, and RLS policies

Quotes Module V1.0

Quote Listing Page — Paginated data table at /home/quotes with search, status filtering, and sortable columns
Quote Detail View — Full detail page at /home/quotes/[id] showing quote header, line items, pricing summary, status timeline, and action buttons
Fulfillment Tracking — Fulfillment status fields (pending, in-production, shipped, delivered) with timestamps and notes
Contact Information — Customer contact capture with name, email, phone, company, and shipping address
Status Workflow — Quote lifecycle states: draft → sent → accepted → rejected → expired, with server-side transition validation
i18n Support — Full quotes translation namespace covering all UI labels, statuses, and actions

Database Schema (Quotes)

quotes Table — Header record with quote number, customer reference, status, validity dates, totals, and notes
quote_line_items — Individual items with product reference, quantity, unit price, discount, and line total
quote_fulfillment — Fulfillment tracking with status, tracking number, carrier, and timestamps
quote_contacts — Customer contact details linked to quotes
RLS Policies — Row-level security ensuring users only access their own organisation's quotes
Indexes — Optimised queries on status, customer reference, quote number, and date ranges
Migration — 20260210130000_quotes and 20260211120000_quotes_fulfillment_and_contact

Builder Anonymous Read Access

Migration — 20260210120000_builder_anonymous_read_access grants read-only access to designs, colors, graphics, and product data for the public-facing builder embed

Technical Details

New Files

products/_lib/
├── schemas/product-size.schema.ts    # Zod schemas for product sizes
├── server/product-size.service.ts    # Database service for sizes
├── sizes.config.ts                   # Size configuration constants
└── svg-path-utils.ts                 # SVG path parsing & scaling

products/new/_components/
└── product-sizes-step.tsx            # Wizard step for size management

builder/_lib/hooks/
└── use-product-sizes-for-builder.ts  # Hook to fetch sizes in builder

quotes/
├── page.tsx                          # Quote listing page
├── [id]/page.tsx                     # Quote detail page
├── _components/                      # Quote UI components
│   └── quote-detail-view.tsx         # Detail view with tabs
└── _lib/
    ├── schemas/                      # Zod validation schemas
    └── server/                       # Service layer & server actions

supabase/
├── schemas/19-product-sizes.sql      # Product sizes schema
├── schemas/23-quotes.sql             # Quotes schema
└── migrations/
    ├── 20260209120000_product_sizes.sql
    ├── 20260210120000_builder_anonymous_read_access.sql
    ├── 20260210130000_quotes.sql
    └── 20260211120000_quotes_fulfillment_and_contact.sql

Data Flow

Admin defines product sizes with cut-pattern SVGs via the product wizard → stored in product_sizes table
Builder loads sizes via useProductSizesForBuilder → size selector populates toolbar dropdown
User selects a size → Fabric.js canvas re-renders the cut-pattern SVG path at the correct scale
Quote is created referencing products → line items, contact, and fulfillment records are linked
Quote status transitions are validated server-side and reflected in the detail view timeline