Features:
- Created expandable StandardsLegend component explaining Wren's 4 layers of climate impact
- Added detailed descriptions for Certified Offsets, In-Progress Offsets, Additional Contributions, and Investments
- Updated CertificationStatus type to include 'standard 2025'
- Enhanced CertificationBadge with Standard 2025+ support
- Updated wrenClient to map API's 'standard 2023' to 'standard 2025'
- Integrated legend into checkout success page below portfolio chart
Content based on Wren's official 2025+ standard documentation explaining their hybrid approach to maximizing climate impact.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Navigating to /admin redirects to /admin/dashboard if authenticated
- AdminLayoutClient handles auth check and redirects to /admin/login if not authenticated
- Shows loading spinner during redirect
- Provides clean entry point to admin portal
- Fully implemented OrdersTable with sorting, pagination, and filtering
- Added OrderFilters component for search, status, and date range filtering
- Created OrderStatsCards for dashboard metrics display
- Built OrderDetailsModal for viewing complete order information
- Implemented ExportButton for CSV export functionality
- Updated dashboard and orders pages to use new components
- Enhanced OrderRecord type definitions in src/types.ts
- All components working with NocoDB API integration
- Add ADMIN_USERNAME, ADMIN_PASSWORD, and JWT_SECRET to .env.example
- Update copyright year from 2024 to 2025 in admin login page
- Update copyright year from 2024 to 2025 in footer component
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
The calculator page was failing during build because useSearchParams()
requires a request context and cannot be used during static site generation.
Added 'export const dynamic = force-dynamic' to force dynamic rendering,
which allows useSearchParams() to work correctly for QR code parameter detection.
This fixes the build error:
"Error occurred prerendering page "/calculator""
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
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
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>
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
- 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>
- 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.
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>
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>
