Matt 683a65c1fd
All checks were successful
Build and Push Docker Images / docker (push) Successful in 2m15s
Implement Modern Maritime admin panel design with Monaco background
🎨 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

33 lines
1.0 KiB
TypeScript

'use client';
import { motion } from 'framer-motion';
import { Package } from 'lucide-react';
export default function AdminOrders() {
return (
<div className="space-y-8">
{/* Header */}
<div>
<h1 className="text-3xl font-bold text-gray-900 mb-2">Orders</h1>
<p className="text-gray-600">View and manage all carbon offset orders</p>
</div>
{/* Placeholder */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="glass-card p-12 text-center"
>
<Package size={48} className="mx-auto mb-4 text-gray-400" />
<h2 className="text-xl font-bold text-gray-900 mb-2">Orders Management</h2>
<p className="text-gray-600 mb-4">
Orders table with filtering, search, and export will be implemented in Phase 4.
</p>
<div className="inline-block px-4 py-2 bg-blue-100 text-blue-700 rounded-lg text-sm">
Backend API integration coming in Phase 2
</div>
</motion.div>
</div>
);
}