8 Commits

Author SHA1 Message Date
Matt
7751976fc9 Fix all remaining TypeScript build errors
All checks were successful
Build and Push Docker Images / docker (push) Successful in 2m28s
- 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.
2025-11-03 12:02:05 +01:00
Matt
10b277b853 Fix Next.js 16 async params in dynamic route
Some checks failed
Build and Push Docker Images / docker (push) Failing after 2m11s
Next.js 16 breaking change: route params are now Promises
- Updated GET, PATCH, DELETE handlers to await params
- Changed signature from { params: { id: string } }
  to { params: Promise<{ id: string }> }
- Extract id with: const { id } = await params;
2025-11-03 11:07:44 +01:00
Matt
cfa7e88ed2 Remove all build-time variables and secure Wren API
Some checks failed
Build and Push Docker Images / docker (push) Failing after 2m20s
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.
2025-11-03 11:03:42 +01:00
Matt
a6484de35e Integrate NocoDB backend for admin portal with real data
Some checks failed
Build and Push Docker Images / docker (push) Failing after 1m57s
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>
2025-11-03 10:40:25 +01:00
Matt
1e4461cf43 Refine login page color scheme for elegant professional aesthetic
All checks were successful
Build and Push Docker Images / docker (push) Successful in 2m17s
🎨 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>
2025-11-03 09:41:02 +01:00
Matt
683a65c1fd Implement Modern Maritime admin panel design with Monaco background
All checks were successful
Build and Push Docker Images / docker (push) Successful in 2m15s
🎨 Complete UI redesign of admin panel with professional color scheme:

## New Modern Maritime Color Palette
- Deep Sea Blue (#1D2939) - Sidebar background
- Sail White (#F8F9FA) - Main background
- Maritime Teal (#008B8B) - Primary accent
- Sea Green (#1E8449) - Success/environmental theme
- Muted Gold (#D68910) - Revenue highlights
- Royal Purple (#884EA0) - Brand accent
- Off-White (#EAECEF) - Text on dark backgrounds

## Admin Panel Features
-  JWT-based authentication system
-  Protected routes with middleware
-  Elegant sidebar navigation with Puffin logo
-  Dashboard with stat cards (Orders, CO₂, Revenue, Fulfillment)
-  Monaco harbor image background on login page
-  Responsive glassmorphism design
-  WCAG AA contrast compliance

## New Files
- app/admin/ - Admin pages (login, dashboard, orders)
- app/api/admin/ - Auth API routes (login, logout, verify)
- components/admin/ - AdminSidebar component
- lib/auth.ts - JWT authentication utilities
- public/monaco_high_res.jpg - Luxury background image

## Updated
- tailwind.config.js - Custom maritime color palette
- package.json - Added jsonwebtoken dependency
- app/layout.tsx - RootLayoutClient integration

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-03 09:35:43 +01:00
Matt
6b12e2ae2a Fix header spacing and homepage centering issues
All checks were successful
Build and Push Docker Images / docker (push) Successful in 2m12s
- 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>
2025-11-02 19:13:15 +01:00
Matt
82f72941ca Migrate from Vite to Next.js 16 with Turbopack
Some checks failed
Build and Push Docker Images / docker (push) Failing after 1m58s
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>
2025-10-31 22:23:45 +01:00