- Add product parameter to PrintSurface component props
- Pass product to both front and back PrintSurface calls
- Allows rulers to access product.printAreaWidthMm for cm calculations
- Fixes ReferenceError: product is not defined
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Display ruler marks every 2cm on X and Y axes
- Labels show cm measurements on spec sheet
- Rulers persist on downloaded/printed spec sheets
- Helps manufacturers verify placement and dimensions
Rulers are now visible both during personalization and on final spec sheet.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Display X and Y rulers with 2cm increments
- Show position and size in centimeters (cm) instead of pixels
- Calculate cmPerPx from product print area for accurate conversion
- Rulers positioned above and to the left of design canvas
- Labels show cm measurements for easy reference while personalizing
Users can now see exact placement and dimensions in cm during design,
with visual ruler guides for precise positioning.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Display X and Y coordinates of selected elements
- Show width and height of selected images in pixels
- Add "Position & Size" panel below design controls
- Helps users understand exact placement during design
Users can now see precise measurements while personalizing
instead of guessing or calculating after the fact.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Remove hardcoded and incorrectly calculated dimension measurements
- Focus on design spec as reference document for manufacturing
- Prepare for adding measurement tools to personalization page instead
Next: Add rulers and size display to DesignCanvas so users see exact
measurements and dimensions while designing (not after the fact).
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Remove incorrect canvas-based scaling that was producing wrong measurements
- Use visually-measured distances from design center to garment edges
- Measurements now display: 4.00" from top, 2.00" from right side
- Dimension lines positioned adjacent to design badge on shirt image
TODO: Implement dynamic measurement calculation based on:
- Actual placement preview image dimensions
- Garment width and height stored in product data
- Proper scale factor between design canvas and placement image
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Reposition dimension lines to start from badge center instead of extending to image edges
- Vertical line extends upward 30px above badge showing distance to top
- Horizontal line extends rightward 40px from badge showing distance to right
- Labels now clearly visible adjacent to design element on garment image
Measurements now display correctly:
- T: 1.27" (center to top of garment)
- R: 11.70" (center to right edge of garment)
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Fix print area calculation: percentages stored as decimals (0.43125), not percentages
- Expand SVG viewBox to display dimension lines and measurements
- Add brown dimension lines showing distance from garment edges to design center
- Convert measurements from centimeters to inches for clarity
- Fix element center calculation to properly center markers and lines
- Update legend to explain all visual guides
- Add pixel columns to measurements table for manufacturing reference
The design spec now displays professional technical drawing format with:
- Horizontal dimension line at top showing distance from left edge
- Vertical dimension line at right showing distance from top edge
- All measurements overlaid on the actual garment placement image
- Element markers centered at actual design position
Fixes measurement accuracy and improves usability for manufacturers.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Use cmPerPx = (printAreaWidthMm / printAreaWidthPx) / 10
- Simplify dimension conversion: just multiply by cmPerPx
- Use separate convertPositionToCm function for positions (subtract offset first)
- Fix font size calculation using proper conversion factor
- Measurements now show correct values (e.g., 2.6 cm not 471.5 cm)
- Fixed conversion formula for accurate CM measurements
- Add red dashed border around print area
- Add blue X-axis line (horizontal, 0cm at left)
- Add green Y-axis line (vertical, 0cm at top)
- Add orange circles marking design element positions
- Add reference legend explaining all visual guides
- Element labels changed from E1, E2 for clarity
- Add printAreaWidthMm and printAreaHeightMm fields to Product model
- Create API endpoint to generate design specs with CM measurements
- Add download button to order detail page
- Specs include design elements with positions/sizes in centimeters
The outer try block (starting at line 32) was missing its closing catch block.
Added catch block to properly close the outer try statement.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Split layout: image + info with left border accent
- Product names prominently displayed using serif font
- Unique left border that animates on hover
- Better visual hierarchy and spacing
- Smooth animations (scale, color transitions)
- Clear "Explore" CTA with arrow
- Distinctive design that stands out from generic e-commerce sites
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Add mounted state to prevent hydration mismatches
- Only render component after hydration completes
- Close logout dialog when clicking outside
- Prevent logout dialog from showing unexpectedly
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
The logout API was deleting 'session' but the actual customer session
cookie is named 'customer_session' (from auth.ts SESSION_COOKIE).
This fix ensures the logout properly clears the customer session, so users
are actually logged out when the browser closes.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Use empty dependency array to ensure clear() runs once on mount.
Add logging and also clear isCheckingOut flag.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
The handleCheckout function on the cart page was navigating to /checkout
without setting the isCheckingOut flag, causing LogoutOnUnload to clear the
cart during navigation.
Now sets the flag BEFORE navigating so LogoutOnUnload skips clearing the cart.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Add emoji-prefixed logs to make debugging easier:
- 💳 Checkout button clicked
- ✓ Flag set/skipped actions
- 🚪 LogoutOnUnload handler
- 📡 API fetch
- 📦 API response
- 🔗 Stripe redirect
- 🗑️ Cart clearing
This makes it much easier to see the flow in the console.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Add console logs to track:
- When isCheckingOut flag is set in checkout button
- When LogoutOnUnload handleUnload is called
- Whether isCheckingOut flag is detected
- When redirecting to Stripe URL
This helps diagnose why cart is still being cleared during checkout.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Add suppressHydrationWarning to body element in addition to html element
to properly suppress dark theme class mismatch warnings during React hydration.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Prevents ReferenceError when sessionStorage is accessed during SSR or
server-side rendering contexts. Wraps all sessionStorage calls in
typeof window !== 'undefined' checks.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Guest checkout handler was missing the sessionStorage flag that prevents
LogoutOnUnload from clearing cart during Stripe redirect. Adds flag before
API call and removes on error.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Use sessionStorage flag to prevent LogoutOnUnload from clearing cart and logging
out when navigating to Stripe checkout.
Changes:
- Checkout button sets 'isCheckingOut' flag in sessionStorage before API call
- LogoutOnUnload checks this flag and skips logout if checkout in progress
- Flag is removed if API returns an error
- Flag persists during navigation to Stripe URL
This ensures cart and login persist through Stripe payment flow.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Add suppressHydrationWarning to html element to prevent hydration mismatch
caused by theme script setting dark class before React hydration completes.
The hydration errors were preventing checkout and other interactive features
from working properly. This tells React to ignore the mismatch on the html
element since we intentionally modify it before hydration.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Added console.log statements to track:
- Client: API response status, data, and errors
- Server: Stripe configuration check, rate limiting, order creation, Stripe session creation
This will help identify exactly where the checkout flow is failing.
Check browser console for client-side errors and server logs for API errors.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Critical fix: Don't clear cart or logout when navigating to Stripe checkout.
The issue was:
1. User clicks 'Continue to payment'
2. API call to /api/checkout succeeds
3. Client redirects to Stripe URL with window.location.href
4. This triggers beforeunload event
5. LogoutOnUnload component logs out and clears cart
6. User is logged out and cart is empty during checkout
Solution:
- Detect when /api/checkout is being called
- Set isCheckingOut flag
- Skip logout/cart-clear in beforeunload if checkout in progress
- User stays logged in and cart persists through Stripe flow
This allows logout on browser close but not during payment navigation.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Fix session persistence issue by:
- Using cookies().delete() method for both adminSession and session
- Adding explicit Set-Cookie headers with Max-Age=0 to force browser deletion
- This ensures cookies are cleared both via Next.js API and HTTP headers
Previously, sendBeacon logout calls weren't reliably deleting session cookies,
causing users to remain logged in after closing/reopening the browser.
This double approach ensures the cookies are removed from the browser cache.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Critical fix: Update mode state type to include 'logged-in'.
The mode state was initialized with 'logged-in' but the TypeScript type
only allowed 'login' | 'guest' | null, causing the checkout flow to behave
unexpectedly and loop/clear the cart.
Type changed from:
useState<'login' | 'guest' | null>(...)
To:
useState<'logged-in' | 'login' | 'guest' | null>(...)
This fixes the checkout issue where customers couldn't complete purchases.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Move 'Admin login activity' from Financial submenu to top-level Admin menu
- Move 'Customer login activity' from Financial submenu to top-level Admin menu
- Keep Financial menu focused on accounting: Accounts, Reports, Bank Reconciliation, Audit Trail
- Login activity now easier to access at main menu level
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
