Suspense boundary added complexity and extra queries, making pages slower.
Removed the LoadingSpinner component and Suspense wrapping.
Reverted to simpler, faster approach.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Create LoadingSpinner component with spinning circle
- Wrap products grid with Suspense boundary
- Shows spinner while products are loading
- Improves UX for slower connections
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Prevent click-outside event handler from interfering with link navigation
by adding stopPropagation to both section and flat link click handlers.
Fixes issue where clicking a dropdown link from a product page would not navigate.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Implemented hierarchical category selection in product creation and edit forms.
Now displays parent categories first, then shows child categories when a parent
is selected (e.g., Apparel > Adults, Kids, Babies).
Changes:
- Create CategoryPicker client component for cascading selection
- Update new product page to use CategoryPicker
- Update edit product page to use CategoryPicker
- Query categories with children relationship
User experience:
1. Select parent category (Apparel, Drinkware, Phone Cases, etc.)
2. Select specific type (Adults/Kids/Babies, Ceramic/Steel, etc.)
3. Form automatically validates that both selections are made
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
PhotoPrintAreaField now accepts and loads existing print area coordinates
when editing products. Previously, the component always initialized to
DEFAULT_BOX, causing the saved print area to be lost when editing.
Changes:
- Export Box type from PhotoPrintAreaField
- Add existingPrintArea prop to PhotoPrintAreaField
- Initialize box state with existing print area if provided
- Convert print area from database format (0-1 decimals) to component format (0-100 percentages)
- Update edit page to parse and pass existing print area values
Result: Print area masks now persist when editing products and adding them
to different catalogs (ready-made, plain, etc).
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Changed PhotoPrintAreaField to hide the file input with CSS (display: none)
instead of conditionally removing it from the DOM. This ensures the file
input element remains in the document, preserving the selected file data
when the form is submitted.
Previous issue: When the print area editor opened, React would remove the
file input element from the DOM, causing the file data to be lost before
form submission. This resulted in images not being saved (imageUrl: null).
Result: Images now save correctly to the database as base64 data URLs.
Print area masks are also preserved alongside the images.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Changed PhotoPrintAreaField to use CSS display:none instead of conditional rendering
to hide the file input when the print area editor is open. This prevents the file
input element from being removed from the DOM, which was causing the selected file
to be lost before form submission.
The issue occurred when:
1. User selected an image file
2. Preview loaded and print area editor opened (showPrintAreaEditor = true)
3. React conditionally removed the file input from the DOM
4. Form submission lost the file data because the input no longer existed
Now the file input stays in the DOM (just hidden), so the file data persists
through form submission.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Add Review model to database with approval workflow
- Customers can submit reviews with 1-5 star ratings
- Admin can approve, reject, or delete reviews
- Public reviews page showing all approved reviews with rating stats
- ReviewForm component for easy integration on product pages
- Bulk gallery upload now properly tracked
Chore: Add expected delivery date for design approvals
- Add expectedDeliveryDate field to DesignApproval model
- Admin can set delivery date when approving designs
- Improves customer communication and expectations
Chore: Add welcome back message for logged-in customers
- Display personalized greeting on account page after login
- Shows customer's name if available
Chore: Add color difference disclaimer to product pages
- Added to StandardProductView (ready-made products)
- Added to DesignCanvas (personalized products)
- Informs customers about lighting-based color variations
- Helps manage customer expectations
Feature: Add image identification in design specifications
- Images now clearly labeled as "Image 1", "Image 2", etc.
- Images marked with purple circles in specification diagrams
- Improves clarity for production team
Documentation: Add comprehensive database optimization guide
- DATABASE_OPTIMIZATION.md - Full optimization strategies
- DATABASE_OPTIMIZATION_QUICK_START.md - Implementation examples
- DATABASE_OPTIMIZATION_MIGRATION.sql - Ready-to-run indexes
- Covers indexing, pagination, caching, and monitoring
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Move current image display from parent edit page into PhotoPrintAreaField
- Allows component to control visibility based on client-side removal state
- Image now properly disappears when Remove button is clicked
- Both front and back photo sections now managed entirely by component
- Verified: Remove button works, image disappears immediately, persists to database
- Add support for removeImage/removeImageBack flags in updateProduct action
- When Remove button is clicked, client sets isRemoved=true to hide UI
- Server action checks removeImage/removeImageBack form fields and sets imageUrl/imageUrlBack to null
- Also reset printArea to default when image is removed
- Tested: Remove button now successfully clears images and persists changes to database
- Update PhotoPrintAreaField to accept existingImageUrl prop
- Display Remove and Modify print area buttons on edit page for existing images
- Users can now easily modify print area or remove existing images without
uploading a new file
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Add 'Modify print area →' button to navigate from file selection to print area editor
- Add 'Remove' button to clear selected file and start over
- Add '← Back to file' button in print area editor to return and change files
- Persist print area settings while toggling between views
Users can now more easily manage their image uploads and refine the print area
without losing their settings or being locked into a workflow.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Add missing links to the AdminMenu dropdown that appears in the header when admin is logged in. These links now appear right after Orders for easy access.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Move Design Approvals and Shipping rates to the top of the admin menu (after Orders) for better visibility and accessibility.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Add ShippingRate model to Prisma schema with service name, base price, per-kg surcharge, estimated delivery days, and international flag
- Create migration to add shipping_rates table
- Update seed.ts to populate initial Royal Mail rates (domestic and international)
- Refactor getRoyalMailShippingQuotes to fetch rates from database with fallback to defaults
- Add /admin/shipping-rates page for managing rates
- Add ShippingRatesForm component with inline editing and add/remove functionality
- Add server actions for saving and deleting rates
- Add "Shipping rates" link to admin navigation
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Admin users now see "Admin" dropdown in header when on main site
- Dashboard link added as first item in admin menu
- Quick access to admin panel from any page on main site
- Allows admins to navigate between site and admin panel easily
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Create CustomerSelector component for searching and selecting customers
- Search by name or email with real-time filtering
- Select individual customers or select all with one click
- Shows count of selected customers
- Shows subscribed customer count in search results
- Updated email form to use selected customers
- Falls back to all subscribed if no customers selected
- Displays preview of recipient count before sending
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Make login activity tables collapsible (show/hide on demand)
- Display only last 10 logins in collapsed tables
- Add "Most Active Customers" report on customer login activity page
- Shows top 10 most active customers with login counts
- Fix back links on both login activity pages (was /admin, now /admin/orders)
- Create CollapsibleLoginTable component for customer logins
- Create CollapsibleAdminLoginTable component for admin logins
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Add customer password change page at /account/change-password
- Add admin password change page at /admin/change-password
- Create AdminUser database table for storing admin credentials
- Admin login now checks database first, falls back to env vars
- Update admin auth to support bcrypt password hashing
- Add change password links to customer account and admin nav
- Fix customer login logs back link (was pointing to non-existent /admin)
- Add success/error message handling for password changes
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Implement WhatsApp Business API integration via Meta Cloud API
- Add phoneNumber field to Order model for storing customer phone numbers
- Update admin order detail page with phone number input for collection orders
- Send WhatsApp notification when admin marks order as ready for collection
- Add WhatsApp service module with phone number formatting and message sending
- Create database migrations for collection-related fields
- Add WhatsApp credentials to .env configuration
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Create cleanupOrders utility to delete pending orders older than 24 hours
- Update admin notifications to only count recent pending orders (< 24h old)
- Automatically call cleanup when customer initiates checkout
- Change status display from "PENDING" to "Waiting payment" for customer-facing views
- Update both customer account page and admin orders page with new status label
- Incomplete orders automatically purged, reducing admin clutter
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Create AdminNotifications server component to fetch notification counts
- Add AdminNotificationsBadge client component to display notifications
- Show badge with total count next to Admin menu in header
- Display breakdown tooltip: pending orders, design approvals, photo requests
- Graceful error handling with fallback to zero notifications
- Integrate into Header component for all pages
Also recreate missing AddressFormSection and OlderOrders components
from previous work that weren't being tracked.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Add quantity adjustment controls (+ and -) on checkout order summary
- Prevent quantity from going below 1 with disabled minus button at qty=1
- Fix shipping selector not updating by wrapping callback in useCallback
- Shipping option changes now properly update order total
- Totals recalculate reactively when adjusting quantities or shipping
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Added ShippingSelector component that:
- Displays country selection dropdown
- Fetches available Royal Mail shipping quotes based on cart weight
- Shows delivery estimates and international delivery warnings
- Lets customers select preferred shipping service
- Auto-selects cheapest option by default
Integrated into checkout:
- Shows shipping selector in both logged-in and guest flows
- Displays shipping cost breakdown in order summary
- Passes shipping country and service to checkout API
- Validates shipping selection before processing payment
When a custom photo is provided (from photo request), automatically add it
as an editable image element on the design canvas instead of replacing
the product background. This allows the admin to:
- Move and position the photo on the product
- Resize and rotate the photo
- Add text and other design elements on top
- Edit it just like any other design element
When admin clicks 'Start a design for this' on a photo request, now routes
to the design canvas at /made-to-order/{productSlug} with the custom photo
passed as a query parameter. The DesignCanvas component now accepts and
displays the custom photo as the background for designing.
Changes:
- Updated photo request link to go to design canvas page
- Added customPhoto query parameter to pass custom image URL
- Updated DesignCanvas to accept and use customPhoto prop
- Modified renderPhoto() to display custom photo when provided
- Updated getPhotoInfo() to use custom photo for compositing
Remove onSuccess callback from SyncRoyalMailButton since event handlers
cannot be passed to client components from server components. The button
already shows success/error messages, so the callback wasn't necessary.
Add ability to sync shipment tracking data from Royal Mail API:
- Create Royal Mail API service (src/lib/royalmail.ts) to fetch tracking status
- Add sync-tracking endpoint to pull latest status from Royal Mail
- Create SyncRoyalMailButton component for admin panel
- Add 'Sync from Royal Mail' button on order detail page
- Auto-update order status based on Royal Mail tracking status
Admin workflow:
1. Create shipping label in Royal Mail Click & Drop
2. Copy tracking number into tracking form
3. Click 'Sync from Royal Mail' to fetch and update status
4. System maps Royal Mail status to our order status (SHIPPED, DELIVERED, etc)
Uses Royal Mail's public tracking API - no special credentials required.
Supports manual label creation workflow (hybrid approach).
Use useCart.getState() to ensure we're clearing the current store state
and delete IndexedDB before clearing store. Add detailed logging to help
debug cart clearing issues. Ensures cart is completely emptied on checkout
success.
ClearCartOnMount now explicitly deletes the IndexedDB storage in addition
to clearing the in-memory state. This prevents the cart from being
restored from IndexedDB on subsequent page loads after payment completes.
Fixes issue where cart items remained in bag after successful checkout.
Also capture the design composited on the product photo, so customers
see both the design preview and how it looks on the actual product.
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>
Allow admins to delete individual design submissions to clean up test data.
Includes confirmation dialog and reloads page on successful deletion.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
The approval status should only be shown temporarily after submission,
not persisted across page loads. This allows users to start fresh
designs on the same product without seeing old approval messages.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Add console log to show the actual value of approvalStatus when the
pending approval message is displayed.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Log when addText is called and whether approvalStatus is being cleared
to help debug why the old approval message persists.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
When user adds text or image after a previous submission, clear the old
approval status and localStorage so they can design a fresh item on the
same product without seeing the old approval message.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Log whether designDraft is found when component mounts to help debug
why old designs persist after submission.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
The submissionMessage state was being set but never displayed in the UI.
Added message display to show feedback when user submits for approval.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Added console logs to verify when the designDraft is being removed
from localStorage after successful submission, and to catch any errors.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Clear not just elements but also color, size, dimensions, quantity,
and image dimensions so a fresh canvas is guaranteed after submission.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Also remove the designDraft from localStorage when submission succeeds,
so the cleared state doesn't get reloaded when the user creates another design.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
After a design is successfully submitted for approval, clear the
elementsFront and elementsBack state so users start with a blank
canvas when creating their next design.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
