- Update useQRDecoder hook to use Next.js useSearchParams() for SSR compatibility
- Add auto-navigation logic to TripCalculator that automatically calculates and navigates to offset page when QR data is present
- Add QR detection to CalculatorClient to conditionally render QRCalculatorLoader vs TripCalculator
- Support all three calculation types: fuel, distance, and custom amount
- Add 500ms delay before navigation to allow UI to render
This completes the QR code flow where scanning a QR code now automatically:
1. Pre-fills calculator form with data
2. Calculates carbon footprint
3. Navigates to offset purchase page
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implements complete QR code generation and decoding system for pre-filling calculator data:
- Add qrcode npm dependency (v1.5.4) and zod validation (v3.24.1)
- Create QR generation API endpoint at /api/qr-code/generate
- Implement Base64 URL-safe encoding/decoding utilities
- Add Zod validation schemas for all calculator types (fuel, distance, custom)
- Create QRCalculatorLoader wrapper component with loading/error states
- Add useQRDecoder custom hooks for automatic URL parameter processing
- Modify TripCalculator to accept initialData prop for pre-filling
- Integrate QRCalculatorLoader into main App routing
- Create test page at /qr-test for API testing and QR code visualization
- Support all three calculator types with proper validation
- Include vessel information (name, IMO) in QR data
- Add 30-day expiration for generated QR codes
- Provide PNG and SVG download options in test interface
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Changed layout padding from Tailwind pt-48 to inline style paddingTop: 110px for reliable CSS specificity
- Added negative margin to homepage hero section to maintain vertical centering
- Updated client components (About, Contact, HowItWorks) from py-12 to pb-12 for proper spacing
- All pages now have proper header clearance without content cutoff
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This is a major migration from Vite to Next.js 16.0.1 for improved
performance, better SEO, and modern React features.
## Next.js Migration Changes
- Upgraded to Next.js 16.0.1 with Turbopack (from Vite 6)
- Migrated from client-side routing to App Router architecture
- Created app/ directory with Next.js page structure
- Added server components and client components pattern
- Configured standalone Docker builds for production
## Bug Fixes - React Hooks
- Fixed infinite loop in Header.tsx scroll behavior (removed lastScrollY state dependency)
- Fixed infinite loop in useCalculatorState.ts (wrapped saveState/clearState in useCallback)
- Fixed infinite loop in OffsetOrder.tsx (removed savedState from useEffect dependencies)
- Removed unused React imports from all client components
## Environment Variable Migration
- Migrated all VITE_ variables to NEXT_PUBLIC_ prefix
- Updated src/utils/config.ts to use direct static references (required for Next.js)
- Updated src/api/checkoutClient.ts, emailClient.ts, aisClient.ts for Next.js env vars
- Updated src/vite-env.d.ts types for Next.js environment
- Maintained backward compatibility with Docker window.env
## Layout & UX Improvements
- Fixed footer to always stay at bottom of viewport using flexbox
- Updated app/layout.tsx with flex-1 main content area
- Preserved glass morphism effects and luxury styling
## TypeScript & Build
- Fixed TypeScript strict mode compilation errors
- Removed unused imports and variables
- Fixed Axios interceptor types in project/src/api/wrenClient.ts
- Production build verified and passing
## Testing & Verification
- Tested calculator end-to-end in Playwright
- Verified Wren API integration working (11 portfolios fetched)
- Confirmed calculation: 5000L → 13.47 tons CO₂ → $3,206 total
- All navigation routes working correctly
- Footer positioning verified across all pages
## Files Added
- app/ directory with Next.js routes
- components/ directory with client components
- next.config.mjs, next-env.d.ts
- ENV_MIGRATION.md, NEXTJS_MIGRATION_COMPLETE.md documentation
## Files Modified
- Docker configuration for Next.js standalone builds
- package.json dependencies (Next.js, React 19)
- ts config.json for Next.js
- All API clients for new env var pattern
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Extended CalculatorState interface to include offset order fields (showOffsetOrder, offsetTons, monetaryAmount, calculatorTypeUsed)
- App.tsx now saves offset state to localStorage when user proceeds to offset order
- App.tsx restores offset state from localStorage on mount
- App.tsx clears offset state when user navigates back from offset order
- Fixes issue where browser back button from Stripe returns to calculator input instead of offset order screen
Features:
- Add useCalculatorState hook with localStorage persistence and 1-hour expiry
- State persists through page reloads and Stripe checkout redirects
- Automatically clears state on successful payment (paid/fulfilled status)
Navigation fixes:
- Fix white page issues on checkout success/cancel pages
- Replace <a> links with button handlers for proper state-based routing
- Pass navigation handlers from App.tsx to checkout pages
State persistence integration:
- TripCalculator: Save/restore calculator inputs (fuel, distance, custom)
- MobileCalculator: Full state persistence for mobile app route
- OffsetOrder: Persist offset percentage and portfolio selection
- MobileOffsetOrder: Persist offset percentage for mobile flow
Carbon impact comparisons:
- Add varied carbon impact comparisons with random selection
- Display 3 comparisons in preview mode, 5 in success mode
- Categories: cars, flights, trees, streaming, homes
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
