Critical fix: The 'custom' calculation type should represent monetary amount
(USD) to spend on carbon offsets, not tons of CO₂. The calculator converts
money to CO₂, not the other way around.
Changes:
- Update test page label from "Custom Amount (tons CO₂)" to "Custom Amount (USD)"
- Add helper text explaining calculator converts money to CO₂
- Update description function to show "$100 USD" instead of "100 tons CO₂"
- Change default/preset values to realistic dollar amounts ($50 default, $100 preset)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Enhanced error handling to show HTTP status codes (e.g., "HTTP 404: Not Found")
- Moved vessel information to collapsible section at bottom
- Clear vessel default values (was pre-filled with test data)
- Added note explaining vessel info is metadata only, not used in calculations
- Made vessel fields visually de-emphasized with gray text and optional labels
Zod v3 uses 'issues' property instead of 'errors' for ZodError.
This fixes the production build failure.
🤖 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>
- Fix updateOrder() in nocodbClient.js to use NocoDB v2 API format
(PATCH to base endpoint with Id in body, not in URL path)
- Remove verbose portfolio details logging from wrenClient.js
(keep only summary: status, duration, portfolio count)
Resolves NocoDB fulfillment update error: Cannot PATCH .../records/3
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed TypeScript error where size prop was being passed to RechartsPortfolioPieChart
but the component only accepts projects and totalTons props. The component is
responsive by default and doesn't need a size parameter.
This resolves the Docker build error:
Property 'size' does not exist on type 'IntrinsicAttributes & RechartsPortfolioPieChartProps'
Verified with tsc --noEmit that no other TypeScript errors exist.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Changed all project IDs in mock data from numeric type (1, 2, 3, 4) to string type ('1', '2', '3', '4') to match the OffsetProject interface which expects string IDs.
This resolves the Docker build error:
Type 'number' is not assignable to type 'string' at line 312
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add emerald and cyan to Tailwind safelist pattern to fix gradient rendering
- Include app/ and components/ directories in Tailwind content paths
- Optimize print layout with compressed spacing, margins, and fonts
- Reduce page margins from 0.5in to 0.3in for better content fit
- All content now fits on single printed page without cutoff
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Create /checkout/success/demo route with mock data
- Hardcoded order details for visual testing
- Same styling as real success page
- Yellow banner indicates demo mode
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Replace all blue/cyan gradients with clean white/gray backgrounds
- Change all slate colors to gray (gray-50, gray-600, gray-700, gray-800)
- Change all buttons and accents to green-500/600
- Simplify header to white background with gray border
- Remove fancy gradients and shadows for clean, simple design
- Match exact color scheme from original Vite project
- Restored legacy Vite application folder from git history
- Needed for comparing old vs new Next.js implementation
- Contains original component implementations and utilities
- Log full Stripe webhook JSON payload for debugging
- Extract and log customer name, address, and metadata
- Makes it easy to see business names and custom fields in logs
- Helps identify available data for future enhancements
server/routes/webhooks.js:32-36, 101-109
- Changed header gradient from darker cyan-blue-indigo to brighter cyan-blue
- Matches original design with more vibrant teal/cyan colors
- Updated from-cyan-500 via-blue-500 to-indigo-600 → from-cyan-400 to-blue-400
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
The previous fix incorrectly copied .next/server which conflicts
with Next.js standalone mode. Standalone is self-contained and
already includes compiled API routes internally.
Root cause: Next.js output:'standalone' creates a self-contained
.next/standalone directory that already contains all compiled API
routes. Copying .next/server separately creates path conflicts that
break the server's route resolution.
Official Next.js standalone pattern only requires copying:
- .next/standalone (contains server.js and routes)
- .next/static (static assets)
- public (public files)
Fixes: API routes returning 404 in production
Next.js 16 with standalone output creates two separate directories:
- .next/standalone (server infrastructure)
- .next/server (compiled App Router routes)
Previous Dockerfile only copied standalone, causing all /api/*
routes to return 404 in production. This adds the missing copy
command to include compiled API route handlers.
Fixes: /api/wren/portfolios returning 404 after deployment
The config.ts file was still checking for NEXT_PUBLIC_WREN_API_TOKEN
which no longer exists after moving to server-side proxy routes.
Changes:
- Remove all client-side environment variable checks
- Set wrenApiKey to dummy value 'server-proxy'
- Add comments explaining API key is server-side only
- Remove error logging for missing client-side key
This fixes the console error: "Missing required environment variable: NEXT_PUBLIC_WREN_API_TOKEN"
- Import and use OffsetOrderSource type in wrenClient.ts
- Fix Recharts PieChart label rendering with proper props
- Remove unused POST body parameter in orders route
All TypeScript errors now resolved, build succeeds.
BREAKING CHANGE: All environment variables are now runtime-configurable
Changes:
- Removed ALL build-time NEXT_PUBLIC_* variables from Dockerfile and CI/CD
- Created server-side proxy routes for Wren API (/api/wren/*)
- Refactored wrenClient.ts to use proxy endpoints (reduced from 400+ to 200 lines)
- Updated checkoutClient.ts and emailClient.ts to remove NEXT_PUBLIC_ fallbacks
- Hardcoded metadataBase in layout.tsx (no longer depends on env var)
- Updated .env.local to use runtime-only variables (WREN_API_TOKEN, NocoDB config)
Security improvements:
- Wren API token never exposed to browser
- All secrets stay server-side
- No sensitive data baked into build
Configuration:
- Wren API: Set WREN_API_TOKEN in docker-compose or .env
- NocoDB: Set NOCODB_* variables in docker-compose or .env
- No Gitea secrets/variables needed for build (only registry credentials)
Docker build is now truly environment-agnostic - same image works in
any environment with different runtime configuration.
- Created api/ directory at project root
- Copied nocodbClient.ts from src/api/ to api/
- Resolves build error: Module not found @/api/nocodbClient
- Aligns with Next.js app router structure (@/ alias points to root)
Security & Cleanup Changes:
1. Removed NEXT_PUBLIC_WREN_API_TOKEN from frontend (security risk)
2. Removed Formspree references (no longer needed)
3. Wren API token now lives in backend only (runtime configurable)
4. Added NocoDB env vars to frontend for admin portal server-side API
Changes:
- Dockerfile: Removed Formspree and NEXT_PUBLIC_WREN_API_TOKEN build args
- CI/CD: Updated build-args to only include necessary variables
- Frontend should call backend /api/wren/* endpoints
- Backend handles Wren API with WREN_API_TOKEN (can change anytime!)
Benefits:
✅ API token no longer exposed in browser
✅ Can change Wren token without rebuilding images
✅ Cleaner build process
✅ Removed unused Formspree dependencies
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Problem:
- NEXT_PUBLIC_* variables must be baked into Next.js build at BUILD TIME
- Setting them in docker-compose is too late (bundle already built)
- This caused "NEXT_PUBLIC_WREN_API_TOKEN is undefined" errors in production
Solution:
1. Updated Dockerfile to accept ARG values for all NEXT_PUBLIC_* variables
2. Set ARGs as ENV variables before npm run build (lines 15-26)
3. Updated CI/CD workflow to pass build-args from Gitea secrets/vars
4. Variables are now baked into the image during build
Next Steps:
1. Add these secrets to Gitea repository settings:
- NEXT_PUBLIC_WREN_API_TOKEN
- NEXT_PUBLIC_FORMSPREE_CONTACT_ID
- NEXT_PUBLIC_FORMSPREE_OFFSET_ID
- NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
2. Add this variable to Gitea repository settings:
- NEXT_PUBLIC_API_BASE_URL
3. Next push will build image with variables baked in
4. Can simplify docker-compose (remove NEXT_PUBLIC_* from web service)
Files Changed:
- Dockerfile: Added ARG and ENV declarations before build step
- .gitea/workflows/build-deploy.yml: Added build-args to frontend image build
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Phase 2 Backend Integration Complete:
Backend Infrastructure:
- Created NocoDB client abstraction layer (src/api/nocodbClient.ts)
- Clean TypeScript API hiding NocoDB query syntax complexity
- Helper methods for orders, stats, search, timeline, and filtering
- Automatic date range handling and pagination support
API Routes:
- POST /api/admin/stats - Dashboard statistics with time range filtering
- GET /api/admin/orders - List orders with search, filter, sort, pagination
- GET /api/admin/orders/[id] - Single order details
- PATCH /api/admin/orders/[id] - Update order fields
- DELETE /api/admin/orders/[id] - Cancel order (soft delete)
- GET /api/admin/orders/export - CSV/Excel export with filters
Dashboard Updates:
- Real-time data fetching from NocoDB
- Time range selector (7d, 30d, 90d, all time)
- Recharts line chart for orders timeline
- Recharts pie chart for status distribution
- Loading states and error handling
- Dynamic stat cards with real numbers
Dependencies Added:
- papaparse - CSV export
- xlsx - Excel export with styling
- @types/papaparse - TypeScript support
Data Types:
- OrderRecord interface for NocoDB data structure
- DashboardStats, TimelineData, OrderFilters interfaces
- Full type safety across API and UI
Environment Configuration:
- NOCODB_BASE_URL, NOCODB_BASE_ID configured
- NOCODB_API_KEY, NOCODB_ORDERS_TABLE_ID configured
- All credentials stored securely in .env.local
Ready for testing with sample data in NocoDB!
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
🎨 Color harmony improvements for better visual balance:
## Changes Made
- **Icons**: User/Lock icons changed from bright maritime-teal to subdued deep-sea-blue/60
- **Input Focus**: Focus rings changed from bright teal to elegant deep-sea-blue/50
- **Sign In Button**: Simplified from teal-green gradient to solid deep-sea-blue
- **Error Messages**: More subdued red-900/30 background for better harmony
## Result
- More cohesive professional appearance
- Better contrast balance against Monaco harbor background
- Elegant, understated design that doesn't compete with background
- WCAG AA compliant contrast ratios maintained
🤖 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>
Removed unused imports and state variables that were causing TypeScript build errors:
- Removed YachtSearch import (not used)
- Removed calculateTripCarbon import (not used)
- Removed getVesselData import (only used in unused handleSearch)
- Removed CarbonCalculation type import (not used)
- Removed unused state variables: loading, error, vesselData
- Removed unused handleSearch function
This fixes the Docker build failure: 'YachtSearch' is declared but its value is never read.
Remove unused 'React' imports from App.tsx and all component files in project/src/components/. These imports are not needed with the modern JSX transform and were causing TypeScript build errors in strict mode.
Files updated:
- project/src/App.tsx
- project/src/components/About.tsx
- project/src/components/CarbonOffset.tsx
- project/src/components/Contact.tsx
- project/src/components/CurrencySelect.tsx
- project/src/components/ErrorBoundary.tsx
- project/src/components/Home.tsx
- project/src/components/HowItWorks.tsx
- project/src/components/OffsetOrder.tsx
- project/src/components/PuffinAdvantage.tsx
- project/src/components/TripCalculator.tsx
- project/src/components/YachtSearch.tsx
This fixes the Docker build failure caused by TypeScript strict mode detecting unused variables.
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>
Carbon Offset Distribution section:
- Remove "Carbon Offset" subheader from each project
- Remove colored dots next to project names
- Reduce padding from 30px to 20px
- Reduce title margin from 24px to 16px
- Reduce item padding from 14px to 10px
- Reduce spacing between items from 12px to 8px
Your Impact section:
- Reduce padding from 32px to 20px
- Reduce title font size from 26px to 22px
- Reduce subtitle margin from 28px to 16px
- Reduce card padding from 20px to 14px
- Reduce icon size from 36px to 30px
- Reduce value font size from 28px to 24px
- Reduce grid gap from 16px to 12px
- Reduce footer note margin from 20px to 12px
Overall more compact layout while maintaining readability.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Update default admin email from admin@ to matt@puffinoffset.com
- Add ADMIN_EMAIL environment variable to docker-compose.yml
- Add complete Email Configuration section to .env.example
- Admin email receives contact form submissions and order notifications
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Remove portfolio ID display from both:
- Email receipt template (receipt.hbs)
- Digital receipt page (CheckoutSuccess.tsx)
Portfolio information is internal and not needed in customer-facing receipts.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Remove escaped dollar signs in currency displays
- Fix percentage calculations (multiply decimal by 100)
- Force white text color on mobile for "Your Impact" header
- Add comma formatting to currency values (16343.46 → 16,343.46)
- Update portfolioColors.js to properly convert Wren API decimal percentages
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Replace Formspree integration with new backend email API
- Update Contact, OffsetOrder, and MobileOffsetOrder components
- Remove Formspree config from environment variables
- Add emailClient API for backend communication
- Centralize email sending through SMTP service
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add beautiful HTML email templates for receipts, admin notifications, and contact forms
- Implement SMTP email service with Nodemailer and Handlebars templating
- Add carbon equivalency calculations with EPA/DEFRA/IMO 2024 conversion factors
- Add portfolio color palette system for project visualization
- Integrate Wren API portfolio fetching in webhook handler
- Add light mode enforcement for email client compatibility
- Include Puffin logo from MinIO S3 in all templates
- Add test email endpoint for template validation
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Implement aggressive spacing compression (padding: 0.5rem, margins: 0.25rem)
- Reduce all font sizes by 10-25% for better vertical fit
- Compress line-height to 1.3 for tighter spacing
- Add print-color-adjust: exact to force gradients and colors to print
- Optimize logo, grid gaps, and section spacing
- Keep ALL gradient backgrounds and colorful styling
Result: Payment ID, Status, Email, Date now fit on page 1 with beautiful colors
Based on comprehensive Zen analysis of print layout optimization
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Replace pie chart with print-optimized table to eliminate label overlap
- Add extensive @media print CSS for high-contrast, professional output
- Convert all gradients to white backgrounds with black borders
- Optimize spacing and font sizes for print media
- Update CarbonImpactComparison with high-contrast print styling
- Ensure full page width utilization and proper page breaks
- Zero new dependencies (Pure CSS approach per consensus)
Resolves print quality issues: label collision, poor contrast, wasted whitespace
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Combine project name and percentage into single label line
- Format: "Project Name (25.0%)"
- Reduces vertical space and improves readability
- Cleaner, more compact label design
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Increase max width from max-w-3xl to max-w-4xl/5xl for better screen fit
- Add responsive breakpoints: full width on mobile, constrained on larger screens
- Add print-page-break class for automatic page breaks between sections
- Each major section now prints on separate page:
- Page 1: Order summary with payment details
- Page 2: Portfolio distribution chart
- Page 3: Carbon impact comparisons
- Improve print styling: remove shadows, borders, rounded corners
- Set print page size to standard letter format
- Reduce padding on mobile for better space utilization
Fixes receipt layout to be responsive on all screen sizes while
maintaining excellent print quality with proper page breaks.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Remove middle tonnage line from chart labels
- Keep only project name and percentage
- Tonnage still visible in legend below chart
- Reduces label clutter and improves readability
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
