Design Canvas (Primary)
- FabricDesignCanvasV2: Fabric.js-based product customization canvas
- Lazy-loads Fabric.js to minimize bundle impact
- Renders product mockup with print area guide (magenta dashed box)
- Supports front/back view switching with correct product images
- Color swatch selection for garment customization
- Text element creation with selection handles and transform controls
- Fixed React dependency array to prevent infinite renders
Support Components
- DesignCanvasWrapper: Client-side wrapper for SSR compatibility
- DesignCanvasErrorBoundary: Error boundary for canvas failures
- ThemeInitializer: Theme detection and application
Configuration
- Updated .claude/launch.json with dev server settings
- Updated .claude/settings.local.json with local preferences
- Updated next.config.mjs for production build optimization
- Dependency updates in package.json and package-lock.json
Known Issues & TODO
- Image element rendering disabled (Fabric.js compatibility investigation)
- Text editing UI controls needed (font, size, color pickers)
- Delete/undo functionality pending
- Print area alignment needs visual verification
- "Add to Cart" integration with design serialization pending
Testing Artifacts
- check_*.js: Product verification scripts for debugging
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Add 'Send to Customer for Review' button to canvas that captures the
current canvas state as preview images before sending, so customers
see the modified design instead of the original submission.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Pass designJson to DesignCanvas and parse it to restore the design
elements that were submitted for approval, so admins can see and edit
the actual design.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Added isAdminEditing prop to DesignCanvas. When true, the Submit for Approval
button is disabled (grayed out) since the admin should use the Send to Customer
for Review button instead. This is a safer approach than hiding the button.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
The setLoading(false) call was only in the catch block, so when the API
call succeeded, the page would stay in a "Loading..." state indefinitely.
Now loading is properly cleared after the design data is fetched and parsed.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Added isAdminEditing prop to DesignCanvas component. When true, hides the
"Submit for Approval" and "Add to bag" buttons since these are customer-facing
actions. The admin edit page now only shows the design canvas and the
"Send to Customer for Review" button.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
The DesignCanvas component expects product.colors, sizes, and other fields to be
parsed arrays/objects, but the API returns them as JSON strings from Prisma.
Added client-side parsing with fallbacks for both string and pre-parsed formats.
Also removed unused getCurrentAdmin import from the API route.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Add PATCH method to /api/designs/[id]/route.ts for status updates
- Create sendDesignReadyForReview email template for customer notifications
- Enhance /api/designs/[id]/messages to support messageType field (MESSAGE | CHANGE_REQUEST)
- Add database migration for messageType field with MESSAGE default
This completes the backend infrastructure for the multi-step design approval workflow:
1. Admin edits and sends design to customer for review
2. Customer approves design or requests changes
3. Admin receives notifications for change requests
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
