- 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>
- Create DownloadPhotoButton component for downloading customer photos
- Add download button before 'Start a design for this' button
- Allows admin to save photo locally for editing in design software before approval
Addresses user request: admin should be able to download photo from request
for editing before uploading final design to the approval flow.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Add bg-paper class to global input/textarea/select styling. Previously text-ink
was applied but inputs lacked background color, causing light text on light backgrounds.
Now all form inputs globally have:
- bg-paper for proper dark mode background
- text-ink for readable text in both light and dark modes
Fixes visibility issues on custom-request, contact, and all other form pages.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Create LoginPromptModal component for authentication encouragement
- Check customer authentication before adding items to cart
- Show modal for non-logged-in users with options to create account, log in, or continue as guest
- Allow guests to add items (stored in IndexedDB) while prompting to sign up
- Implemented in both StandardProductView (ready-made products) and DesignCanvas (personalized items)
- Add server action checkCustomerAuth() for authentication checks
Addresses user request: prompt guests to create account or log in when adding items to cart.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Clear cart when customer logs out
- Hide cart bag button for non-authenticated users (only show for logged-in customers)
- Fix dark mode text visibility in all form inputs (input/textarea/select elements)
Addresses user request: cart should clear on logout and only be accessible to logged-in customers.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Create LogoutOnUnload component that triggers logout on page close
- Uses beforeunload/unload events with navigator.sendBeacon() for reliability
- Create /api/logout endpoint that clears both admin and customer sessions
- Add LogoutOnUnload to root layout so it runs on all pages
- Works for both admin and customer users
Behavior:
- When user closes browser tab/window, logout happens automatically
- Session cookies are cleared via API endpoint
- Improves security by preventing session hijacking from closed windows
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Refactor checkout page into server component (page.tsx) + client component (client.tsx)
- Server component checks getCurrentCustomer() and passes isLoggedIn prop
- When logged in, show direct checkout button instead of login/guest options
- When not logged in, show login/guest choice as before
- Hides the 'Your cart will be saved...' message from logged-in users
Fixes: Login/guest prompt appearing even when user is already authenticated
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Add explicit text-ink color to username/email/password input fields
- Add explicit bg-paper background class to inputs for proper styling
- Fixes visibility issue where input text was too light to read in dark mode
- Improves contrast and readability for both admin and customer login forms
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Add colorNames utility with 80+ standard color names
- Map hex codes to human-readable names (Black, Navy, Red, Teal, etc)
- Display color names in product page (with hex tooltip for reference)
- Show selected color name below color swatches
- Update shopping cart to display color names instead of hex codes
- Admin color picker shows both name and hex code for clarity
Improves UX for customers who don't understand hex color codes.
Keeps hex codes for internal data and system tooltips.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
