108:"ExplicitChatIdProvider" 109:I[903690,["$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$82","$83","$84","$85","$86","$7e","$87","$7f","$88","$89","$80","$8a","$8b"],"$108"] 10a:I[838238,["$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$82","$83","$84","$85","$86","$7e","$87","$7f","$88","$89","$80","$8a","$8b"],"SWRDataProvider"] 10c:[] 10d:[] 10e:[] 10f:[["xEmRw46yc6X","$D2025-05-12T11:46:39.384Z"]] 110:[] 111:[] 112:[] 113:[] 114:[] 115:[] 116:T44f,// lib/auth-context.tsx "use client" import { createContext, useContext, useState, useEffect } from "react" interface User { id: string name: string email: string role: 'individual' | 'carrier' | 'company' avatar?: string } interface AuthContextType { user: User | null login: (email: string, password: string) => Promise<{success: boolean, message?: string}> logout: () => void signup: (userData: SignupData) => Promise<{success: boolean, message?: string}> isLoading: boolean } const AuthContext = createContext(undefined) export function AuthProvider({ children }: { children: React.ReactNode }) { const [user, setUser] = useState(null) const [isLoading, setIsLoading] = useState(true) // Implementation details... return ( {children} ) } export const useAuth = () => { const context = useContext(AuthContext) if (!context) throw new Error('useAuth must be used within AuthProvider') return context }117:Tb6b,// app/login/page.tsx "use client" import { useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { useAuth } from "@/lib/auth-context" export default function LoginPage() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [role, setRole] = useState("individual") const [isLoading, setIsLoading] = useState(false) const { login } = useAuth() const router = useRouter() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) const result = await login(email, password) if (result.success) { router.push("/dashboard") } setIsLoading(false) } return (

) }118:T89e,// app/signup/page.tsx "use client" import { useState } from "react" import { useRouter } from "next/navigation" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { useAuth } from "@/lib/auth-context" export default function SignupPage() { const [formData, setFormData] = useState({ name: "", email: "", password: "", confirmPassword: "", role: "individual" }) const [errors, setErrors] = useState({}) const [isLoading, setIsLoading] = useState(false) const { signup } = useAuth() const router = useRouter() const validateForm = () => { const newErrors = {} if (!formData.name) newErrors.name = "Name is required" if (!formData.email) newErrors.email = "Email is required" if (formData.password.length < 6) newErrors.password = "Password must be at least 6 characters" if (formData.password !== formData.confirmPassword) { newErrors.confirmPassword = "Passwords do not match" } setErrors(newErrors) return Object.keys(newErrors).length === 0 } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!validateForm()) return setIsLoading(true) const result = await signup(formData) if (result.success) { router.push("/dashboard") } setIsLoading(false) } return (

Create Account

) }119:Tb21,// components/main-navbar.tsx "use client" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Truck, Menu, X } from 'lucide-react' import { motion } from "framer-motion" export default function MainNavbar() { const [isOpen, setIsOpen] = useState(false) return (

{/* Logo */}

MarocTransit {/* Desktop Navigation */}

Features How It Works Pricing Contact

{/* Auth Buttons */}

{/* Mobile Menu Button */}

{/* Mobile Menu */} {isOpen && (

{/* Mobile navigation items */}

)}

) }11a:T1813,// components/hero-section.tsx "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Search, ArrowRight, Truck, Package, MapPin } from 'lucide-react' import { motion } from "framer-motion" export default function HeroSection() { const [searchData, setSearchData] = useState({ from: "", to: "", cargoType: "" }) return (

{/* Background Elements */}

{/* Left Content */}

AI-Powered {" "}Logistics
for Morocco

Connect shippers and carriers with intelligent matching, real-time tracking, and optimized routes across Morocco and beyond.

{/* Search Form */}

setSearchData({...searchData, from: e.target.value})} className="pl-10 bg-white/20 border-white/30 text-white placeholder:text-gray-300" />

setSearchData({...searchData, to: e.target.value})} className="pl-10 bg-white/20 border-white/30 text-white placeholder:text-gray-300" />

{/* CTA Buttons */}

{/* Right Content - 3D Visualization */}

{/* Animated Truck */}

{/* Route Lines */}

) }11b:Tcb9,// components/features-section.tsx "use client" import { motion } from "framer-motion" import { Brain, Truck, MapPin, BarChart, Shield, Clock } from 'lucide-react' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" const features = [ { icon: Brain, title: "AI-Powered Matching", description: "Intelligent algorithms match shippers with the best carriers based on route, capacity, and performance.", color: "text-purple-500" }, { icon: MapPin, title: "Real-Time Tracking", description: "Track your shipments in real-time with GPS precision and automated status updates.", color: "text-blue-500" }, { icon: Truck, title: "Fleet Management", description: "Comprehensive fleet management tools with maintenance scheduling and performance analytics.", color: "text-green-500" }, { icon: BarChart, title: "Advanced Analytics", description: "Detailed insights into your logistics operations with predictive analytics and reporting.", color: "text-orange-500" }, { icon: Shield, title: "Secure Platform", description: "Enterprise-grade security with encrypted communications and secure payment processing.", color: "text-red-500" }, { icon: Clock, title: "24/7 Support", description: "Round-the-clock customer support with AI-powered assistance and human backup.", color: "text-cyan-500" } ] export default function FeaturesSection() { return (

Powerful Features for Modern Logistics

Everything you need to streamline your logistics operations and grow your business

{features.map((feature, index) => (

{feature.title} {feature.description} ))}

) }11c:T441,// app/dashboard/layout.tsx "use client" import { useAuth } from "@/lib/auth-context" import { useRouter } from "next/navigation" import { useEffect } from "react" import DashboardSidebar from "@/components/dashboard-sidebar" import DashboardHeader from "@/components/dashboard-header" export default function DashboardLayout({ children, }: { children: React.ReactNode }) { const { user, isLoading } = useAuth() const router = useRouter() useEffect(() => { if (!isLoading && !user) { router.push("/login") } }, [user, isLoading, router]) if (isLoading) { return (

) } if (!user) { return null } return (

{children}

) }11d:Tc1b,// components/dashboard-sidebar.tsx "use client" import Link from "next/link" import { usePathname } from "next/navigation" import { Button } from "@/components/ui/button" import { LayoutDashboard, Package, Truck, MapPin, Brain, Users, FileText, Settings, MessageSquare, BarChart } from 'lucide-react' import { useAuth } from "@/lib/auth-context" export default function DashboardSidebar() { const pathname = usePathname() const { user } = useAuth() const sidebarItems = [ { href: "/dashboard", label: "Dashboard", icon: LayoutDashboard, roles: ["individual", "carrier", "company"] }, { href: "/dashboard/shipments", label: "Shipments", icon: Package, roles: ["individual", "company"] }, { href: "/dashboard/nearby", label: "Nearby Loads", icon: MapPin, roles: ["carrier"] }, { href: "/dashboard/fleet", label: "Fleet", icon: Truck, roles: ["company"] }, { href: "/dashboard/ai-tools", label: "AI Tools", icon: Brain, roles: ["individual", "carrier", "company"] }, { href: "/dashboard/team", label: "Team", icon: Users, roles: ["company"] }, { href: "/dashboard/documents", label: "Documents", icon: FileText, roles: ["individual", "carrier", "company"] }, { href: "/dashboard/messages", label: "Messages", icon: MessageSquare, roles: ["individual", "carrier", "company"] }, { href: "/dashboard/analytics", label: "Analytics", icon: BarChart, roles: ["individual", "carrier", "company"] }, { href: "/dashboard/settings", label: "Settings", icon: Settings, roles: ["individual", "carrier", "company"] } ] const filteredItems = sidebarItems.filter(item => item.roles.includes(user?.role || "individual") ) return (

MarocTransit

) }11e:Tcd2,// components/dashboard-header.tsx "use client" import { Bell, Search, User } from 'lucide-react' import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { useAuth } from "@/lib/auth-context" export default function DashboardHeader() { const { user, logout } = useAuth() return (

{/* Search */}

{/* Right side */}

{/* Notifications */} {/* User Menu */}

{user?.name}

{user?.email}

Profile Settings Log out

) }11f:T3e18,// app/dashboard/page.tsx "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { Package, Truck, Clock, TrendingUp, ArrowUpRight, ArrowDownRight, Plus, Brain, MapPin, User, Building2 } from 'lucide-react' import { useAuth } from "@/lib/auth-context" import ShipmentMap from "@/components/shipment-map" import PerformanceChart from "@/components/performance-chart" import RecentActivityFeed from "@/components/recent-activity-feed" export default function DashboardPage() { const { user } = useAuth() const [userType, setUserType] = useState<"individual" | "carrier" | "company">("individual") useEffect(() => { if (user?.role) { setUserType(user.role as "individual" | "carrier" | "company") } }, [user]) return (

{/* Header */}

AI-Powered Logistics Dashboard

Welcome back, {user?.name || "User"}! Here's an overview of your logistics operations.

{userType === "individual" && (

Individual Shipper

)} {userType === "carrier" && (

Carrier

)} {userType === "company" && (

Fleet Manager

)}

{/* Role-specific content */} {userType === "individual" ? ( ) : userType === "carrier" ? ( ) : ( )}

) } // Individual Shipper Dashboard function IndividualDashboard() { return ( <> {/* AI Carrier Matching Card */} AI-Powered Carrier Matching Find the perfect carriers for your shipments with our intelligent matching algorithm

AI Matching Results

We found 5 carriers matching your requirements:

{[ { name: "TransitExpress", rating: 4.9, price: "$1,250", eta: "2d 4h", match: 98 }, { name: "FastTruck Inc.", rating: 4.7, price: "$1,180", eta: "2d 8h", match: 95 }, { name: "SpeedLogistics", rating: 4.8, price: "$1,320", eta: "1d 22h", match: 92 }, ].map((carrier, index) => (

{carrier.name}

★ {carrier.rating}

ETA: {carrier.eta} • {carrier.price}

{carrier.match}% Match

))}

{/* 3D Truck Model or Map Component */}

3D Truck Visualization

{/* Quick Stats */}

Active Shipments

+2.5% from last month

On-Time Delivery

94.2%

-1.1% from last month

Freight Costs

$12,450

-3.2% under budget

AI Matches

+10.1% match accuracy

{/* Active Shipments and Map */}

Active Shipments Your current shipments in transit

{/* Shipment list items */} {[ { id: "SHP-3948", status: "in_transit", destination: "Atlanta, GA", progress: 65, eta: "2h 45m", carrier: "TransitExpress", aiOptimized: true, }, { id: "SHP-3921", status: "in_transit", destination: "Miami, FL", progress: 42, eta: "5h 20m", carrier: "FastTruck Inc.", aiOptimized: false, }, ].map((shipment) => (

{shipment.id} In Transit {shipment.aiOptimized && ( AI Optimized )}

Destination: {shipment.destination} {shipment.carrier}

ETA: {shipment.eta}

))}

AI-Powered Shipment Tracking Real-time location of your active shipments with predictive ETA

{/* Recent Activity and Performance */}

Recent Activity Latest updates from your shipments Performance Analytics AI-powered trends in your shipping volume and costs

) } // Carrier Dashboard (similar structure with carrier-specific content) function CarrierDashboard() { return ( <> {/* AI Shipment Finding Card */} AI-Powered Shipment Finder Find the best shipments near your location with our intelligent matching algorithm {/* Carrier-specific content */} {/* Add carrier-specific stats and components */} ) } // Company Dashboard (similar structure with fleet management focus) function CompanyDashboard() { return ( <> {/* Fleet management specific content */} ) }120:T20c2,// components/shipment-table.tsx "use client" import { useState } from "react" import { CheckCircle2, Clock, Truck, AlertTriangle, MoreHorizontal, Eye, FileEdit, Trash2, Brain } from 'lucide-react' import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" type ShipmentStatus = "delivered" | "in_transit" | "pending" | "delayed" interface Shipment { id: string trackingNumber: string origin: string destination: string customer: string status: ShipmentStatus departureDate: string arrivalDate: string priority: "high" | "medium" | "low" aiOptimized: boolean aiSavings?: number } interface ShipmentTableProps { onSelectOrder: (id: string) => void selectedOrder: string | null } const mockShipments: Shipment[] = [ { id: "order_vloJEBq", trackingNumber: "SHP-2023-1234", origin: "Casablanca, Morocco", destination: "Rabat, Morocco", customer: "Acme Corp", status: "in_transit", departureDate: "2025-03-20", arrivalDate: "2025-03-23", priority: "high", aiOptimized: true, aiSavings: 350, }, // Add more mock data... ] export default function ShipmentTable({ onSelectOrder, selectedOrder }: ShipmentTableProps) { const getStatusIcon = (status: ShipmentStatus) => { switch (status) { case "delivered": return case "in_transit": return case "pending": return case "delayed": return } } const getStatusBadge = (status: ShipmentStatus) => { switch (status) { case "delivered": return ( Delivered ) case "in_transit": return ( In Transit ) case "pending": return ( Pending ) case "delayed": return ( Delayed ) } } return (

Tracking # Route Customer Status Departure Arrival Priority AI Optimization Actions {mockShipments.map((shipment) => ( onSelectOrder(shipment.id)} > {shipment.trackingNumber}

From: {shipment.origin} To: {shipment.destination}

{shipment.customer}

{getStatusIcon(shipment.status)} {getStatusBadge(shipment.status)}

{shipment.departureDate} {shipment.arrivalDate} {shipment.priority.charAt(0).toUpperCase() + shipment.priority.slice(1)} {shipment.aiOptimized ? (

Optimized

AI optimized route saving ${shipment.aiSavings}

) : ( Standard )} e.stopPropagation()}> Actions onSelectOrder(shipment.id)} > View details Edit shipment Cancel shipment ))}

) }121:T1ae4,// components/shipment-map.tsx "use client" import { useEffect, useRef, useState } from "react" import { motion } from "framer-motion" import { Truck, MapPin, Search, Plus, Minus, Layers, X } from 'lucide-react' import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" interface ShipmentMapProps { markers?: { id: string position: { lat: number; lng: number } title: string isSelected?: boolean isCurrent?: boolean }[] onMarkerClick?: (id: string) => void isFleetView?: boolean className?: string } export function ShipmentMap({ markers, onMarkerClick, isFleetView = false, className = "" }: ShipmentMapProps) { const mapRef = useRef(null) const [isLoaded, setIsLoaded] = useState(false) const [searchQuery, setSearchQuery] = useState("") const [selectedOrder, setSelectedOrder] = useState("order_vloJEBq") useEffect(() => { // Simulate map loading const timer = setTimeout(() => { setIsLoaded(true) }, 1000) return () => clearTimeout(timer) }, []) return (

{!isLoaded ? (

Loading map...

) : ( <> {/* Map background */}

{/* Simulated map background */}

{/* Map controls */}

setSearchQuery(e.target.value)} className="h-9 w-full pl-10 pr-4 rounded-md bg-gray-900/90 border border-gray-700 text-gray-300 placeholder:text-gray-500 focus:border-blue-500 focus:outline-none" />

{/* Order marker */}

{/* Moving truck */}

{/* Zone overlays */}

{/* Order popup */} {selectedOrder && (

Dispatched

{selectedOrder}

May 5, 2024 13:30

Casablanca Distribution Center

Rabat Logistics Hub

)} )}

) } export default ShipmentMap122:T12aa,// app/dashboard/shipments/page.tsx "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Plus, Search, Filter } from 'lucide-react' import ShipmentTable from "@/components/shipment-table" import ShipmentMap from "@/components/shipment-map" import OrderDetails from "@/components/order-details" export default function ShipmentsPage() { const [selectedOrder, setSelectedOrder] = useState(null) const [searchQuery, setSearchQuery] = useState("") const [statusFilter, setStatusFilter] = useState("all") return (

{/* Header */}

Shipments

Manage and track all your shipments

{/* Filters */}

setSearchQuery(e.target.value)} className="pl-10 bg-gray-800 border-gray-700 text-white" />

{/* Main Content */}

{/* Shipments Table */}

Active Shipments Track and manage your current shipments

{/* Order Details Sidebar */}

{selectedOrder ? ( ) : (

Select a shipment to view details

Click on any shipment in the table

)} {/* Map */} Live Tracking Real-time shipment locations

) }123:T26ee,// components/route-optimizer.tsx "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Checkbox } from "@/components/ui/checkbox" import { Label } from "@/components/ui/label" import { Loader2, MapPin, Clock, Fuel, DollarSign } from 'lucide-react' import { Badge } from "@/components/ui/badge" interface RouteOptimizerProps { shipmentId: string truckId?: string driverId?: string onRouteCreated?: (routeId: string) => void } export function RouteOptimizer({ shipmentId, truckId, driverId, onRouteCreated }: RouteOptimizerProps) { const [isOptimizing, setIsOptimizing] = useState(false) const [optimizedRoute, setOptimizedRoute] = useState(null) const [isCreatingRoute, setIsCreatingRoute] = useState(false) const [factors, setFactors] = useState({ prioritizeTime: true, prioritizeFuel: false, avoidTolls: false, considerTraffic: true, considerWeather: true, }) const handleFactorChange = (factor: string, checked: boolean) => { setFactors((prev) => ({ ...prev, [factor]: checked, })) } const handleOptimize = async () => { setIsOptimizing(true) // Simulate AI optimization setTimeout(() => { setOptimizedRoute({ totalDistance: "245 miles", estimatedTime: "4h 32m", fuelConsumption: "18.5 gallons", estimatedCost: "$127.50", recommendations: "Route optimized for time efficiency. Avoid Highway 101 due to construction delays.", orderedLocationsWithDetails: [ { name: "Origin Warehouse", city: "Casablanca", state: "Morocco" }, { name: "Distribution Center", city: "Rabat", state: "Morocco" }, { name: "Final Destination", city: "Tangier", state: "Morocco" }, ], savings: { time: "45 minutes", fuel: "2.3 gallons", cost: "$23.50" } }) setIsOptimizing(false) }, 3000) } const handleCreateRoute = async () => { if (!optimizedRoute || !truckId || !driverId) return setIsCreatingRoute(true) // Simulate route creation setTimeout(() => { if (onRouteCreated) { onRouteCreated("route_123") } setIsCreatingRoute(false) }, 1500) } return ( AI Route Optimizer Use AI to find the optimal route for this shipment

handleFactorChange("prioritizeTime", checked as boolean)} /> Prioritize Time

handleFactorChange("prioritizeFuel", checked as boolean)} /> Prioritize Fuel Efficiency

handleFactorChange("avoidTolls", checked as boolean)} /> Avoid Toll Roads

handleFactorChange("considerTraffic", checked as boolean)} /> Consider Traffic

handleFactorChange("considerWeather", checked as boolean)} /> Consider Weather

{optimizedRoute && (

Optimized Route Analysis Results

Total Distance

{optimizedRoute.totalDistance}

Estimated Time

{optimizedRoute.estimatedTime}

Fuel Consumption

{optimizedRoute.fuelConsumption}

Estimated Cost

{optimizedRoute.estimatedCost}

AI Recommendations

{optimizedRoute.recommendations}

Optimized Route Order

{location.name} ({location.city}, {location.state})

Time Saved

{optimizedRoute.savings.time}

Fuel Saved

{optimizedRoute.savings.fuel}

Cost Saved

{optimizedRoute.savings.cost}

)}

{optimizedRoute && ( )} ) }124:T23a2,// app/dashboard/ai-tools/page.tsx "use client" import Link from "next/link" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Brain, Route, Truck, Wrench, FileText, MessageSquare, ArrowRight, Zap, TrendingUp, Shield } from 'lucide-react' const aiTools = [ { id: "route-optimizer", title: "Route Optimizer", description: "AI-powered route optimization for maximum efficiency and cost savings", icon: Route, href: "/dashboard/ai-tools/route-optimizer", color: "text-blue-500", bgColor: "bg-blue-900/20", borderColor: "border-blue-800/30", features: ["Real-time traffic analysis", "Weather considerations", "Fuel optimization"], savings: "Up to 25% cost reduction" }, { id: "load-matcher", title: "Load Matcher", description: "Intelligent matching of shipments with optimal trucks and drivers", icon: Truck, href: "/dashboard/ai-tools/load-matcher", color: "text-green-500", bgColor: "bg-green-900/20", borderColor: "border-green-800/30", features: ["Capacity optimization", "Driver preferences", "Location proximity"], savings: "98% match accuracy" }, { id: "maintenance-predictor", title: "Maintenance Predictor", description: "Predict vehicle maintenance needs before issues occur", icon: Wrench, href: "/dashboard/ai-tools/maintenance", color: "text-orange-500", bgColor: "bg-orange-900/20", borderColor: "border-orange-800/30", features: ["Predictive analytics", "Cost estimation", "Schedule optimization"], savings: "30% maintenance cost reduction" }, { id: "document-processor", title: "Document Processor", description: "Extract and process logistics documents with AI", icon: FileText, href: "/dashboard/documents/ai-process", color: "text-purple-500", bgColor: "bg-purple-900/20", borderColor: "border-purple-800/30", features: ["OCR technology", "Data extraction", "Validation checks"], savings: "90% faster processing" }, { id: "chat-support", title: "AI Chat Support", description: "24/7 intelligent assistance for logistics operations", icon: MessageSquare, href: "/dashboard/messages", color: "text-cyan-500", bgColor: "bg-cyan-900/20", borderColor: "border-cyan-800/30", features: ["Natural language", "Context awareness", "Multi-language"], savings: "24/7 availability" }, { id: "demand-forecasting", title: "Demand Forecasting", description: "Predict shipping demand and optimize capacity planning", icon: TrendingUp, href: "/dashboard/analytics", color: "text-pink-500", bgColor: "bg-pink-900/20", borderColor: "border-pink-800/30", features: ["Historical analysis", "Seasonal patterns", "Market trends"], savings: "15% capacity optimization" } ] export default function AIToolsPage() { return (

{/* Header */}

AI-Powered Tools

Leverage artificial intelligence to optimize your logistics operations

6 AI Tools Available

{/* AI Benefits Overview */} AI-Powered Logistics Intelligence Our AI tools have helped logistics companies achieve significant improvements in efficiency and cost savings

25%

Cost Reduction

98%

Match Accuracy

30%

Time Savings

24/7

AI Support

{/* AI Tools Grid */}

{aiTools.map((tool) => (

{tool.title} {tool.description}

Key Features:

{feature}

{tool.savings}

))}

{/* Getting Started */} Getting Started with AI Tools New to AI-powered logistics? Here's how to get the most out of our tools

Start with Route Optimizer

Begin by optimizing your most frequent routes to see immediate savings

Use Load Matcher

Let AI find the perfect truck and driver combinations for your shipments

Monitor & Optimize

Use analytics to track improvements and continuously optimize operations

) }125:Ta29,// lib/translation-context.tsx "use client" import { createContext, useContext, useState, useEffect } from "react" type Language = 'en' | 'fr' | 'ar' interface TranslationContextType { language: Language setLanguage: (lang: Language) => void t: (key: string) => string dir: 'ltr' | 'rtl' } const translations = { en: { "app.name": "MarocTransit", "nav.dashboard": "Dashboard", "nav.shipments": "Shipments", "nav.fleet": "Fleet", "nav.carriers": "Carriers", "nav.locations": "Locations", "nav.ai_tools": "AI Tools", "nav.team": "Team", "nav.documents": "Documents", "nav.messages": "Messages", "nav.analytics": "Analytics", "nav.settings": "Settings", // Add more translations... }, fr: { "app.name": "MarocTransit", "nav.dashboard": "Tableau de bord", "nav.shipments": "Expéditions", "nav.fleet": "Flotte", "nav.carriers": "Transporteurs", "nav.locations": "Emplacements", "nav.ai_tools": "Outils IA", "nav.team": "Équipe", "nav.documents": "Documents", "nav.messages": "Messages", "nav.analytics": "Analyses", "nav.settings": "Paramètres", // Add more translations... }, ar: { "app.name": "مروك ترانزيت", "nav.dashboard": "لوحة التحكم", "nav.shipments": "الشحنات", "nav.fleet": "الأسطول", "nav.carriers": "الناقلون", "nav.locations": "المواقع", "nav.ai_tools": "أدوات الذكاء الاصطناعي", "nav.team": "الفريق", "nav.documents": "المستندات", "nav.messages": "الرسائل", "nav.analytics": "التحليلات", "nav.settings": "الإعدادات", // Add more translations... } } const TranslationContext = createContext(undefined) export function TranslationProvider({ children }: { children: React.ReactNode }) { const [language, setLanguage] = useState('en') const t = (key: string): string => { return translations[language][key] || key } const dir = language === 'ar' ? 'rtl' : 'ltr' useEffect(() => { document.documentElement.dir = dir document.documentElement.lang = language }, [language, dir]) return ( {children} ) } export const useTranslation = () => { const context = useContext(TranslationContext) if (!context) { throw new Error('useTranslation must be used within TranslationProvider') } return context }126:T3957,-- db-schema.sql -- Users table (main user management) CREATE TABLE users ( id SERIAL PRIMARY KEY, name VARCHAR(255) NOT NULL, email VARCHAR(255) UNIQUE NOT NULL, password_hash VARCHAR(255) NOT NULL, role VARCHAR(50) NOT NULL DEFAULT 'individual' CHECK (role IN ('individual', 'carrier', 'company', 'admin')), phone VARCHAR(20), avatar_url TEXT, company_name VARCHAR(255), company_size VARCHAR(50), verification_status VARCHAR(50) DEFAULT 'pending' CHECK (verification_status IN ('pending', 'verified', 'rejected')), is_active BOOLEAN DEFAULT true, last_login TIMESTAMP, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- User profiles for additional information CREATE TABLE user_profiles ( id SERIAL PRIMARY KEY, user_id INTEGER REFERENCES users(id) ON DELETE CASCADE, address TEXT, city VARCHAR(100), state VARCHAR(100), country VARCHAR(100) DEFAULT 'Morocco', postal_code VARCHAR(20), tax_id VARCHAR(50), business_license VARCHAR(100), insurance_info JSONB, preferences JSONB DEFAULT '{}', created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Locations table CREATE TABLE locations ( id SERIAL PRIMARY KEY, name VARCHAR(255) NOT NULL, address TEXT NOT NULL, city VARCHAR(100) NOT NULL, state VARCHAR(100), country VARCHAR(100) NOT NULL DEFAULT 'Morocco', postal_code VARCHAR(20), latitude DECIMAL(10, 8), longitude DECIMAL(11, 8), location_type VARCHAR(50) DEFAULT 'warehouse' CHECK (location_type IN ('warehouse', 'distribution_center', 'port', 'airport', 'customer_location', 'pickup_point')), contact_info JSONB, operating_hours JSONB, facilities JSONB DEFAULT '[]', is_active BOOLEAN DEFAULT true, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Trucks table CREATE TABLE trucks ( id SERIAL PRIMARY KEY, owner_id INTEGER REFERENCES users(id) ON DELETE CASCADE, license_plate VARCHAR(20) UNIQUE NOT NULL, model VARCHAR(100) NOT NULL, year INTEGER, capacity DECIMAL(10, 2) NOT NULL, -- in kg volume_capacity DECIMAL(10, 2), -- in cubic meters fuel_type VARCHAR(50) DEFAULT 'diesel' CHECK (fuel_type IN ('diesel', 'gasoline', 'electric', 'hybrid')), fuel_efficiency DECIMAL(5, 2), -- km per liter status VARCHAR(50) DEFAULT 'available' CHECK (status IN ('available', 'assigned', 'in_transit', 'maintenance', 'out_of_service')), current_location_id INTEGER REFERENCES locations(id), last_maintenance_date DATE, next_maintenance_date DATE, maintenance_interval_km INTEGER DEFAULT 10000, current_mileage INTEGER DEFAULT 0, insurance_expiry DATE, registration_expiry DATE, specifications JSONB DEFAULT '{}', documents JSONB DEFAULT '[]', is_active BOOLEAN DEFAULT true, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Drivers table CREATE TABLE drivers ( id SERIAL PRIMARY KEY, user_id INTEGER REFERENCES users(id) ON DELETE CASCADE, license_number VARCHAR(50) UNIQUE NOT NULL, license_type VARCHAR(50) NOT NULL, license_expiry_date DATE NOT NULL, phone_number VARCHAR(20) NOT NULL, emergency_contact JSONB, status VARCHAR(50) DEFAULT 'available' CHECK (status IN ('available', 'assigned', 'on_route', 'off_duty', 'suspended')), rating DECIMAL(3, 2) DEFAULT 0.00, total_trips INTEGER DEFAULT 0, total_distance INTEGER DEFAULT 0, experience_years INTEGER, specializations JSONB DEFAULT '[]', certifications JSONB DEFAULT '[]', current_location_id INTEGER REFERENCES locations(id), preferred_routes JSONB DEFAULT '[]', availability_schedule JSONB DEFAULT '{}', is_active BOOLEAN DEFAULT true, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Shipments table CREATE TABLE shipments ( id SERIAL PRIMARY KEY, tracking_number VARCHAR(50) UNIQUE NOT NULL, customer_id INTEGER REFERENCES users(id) ON DELETE CASCADE, origin_id INTEGER REFERENCES locations(id) NOT NULL, destination_id INTEGER REFERENCES locations(id) NOT NULL, status VARCHAR(50) DEFAULT 'pending' CHECK (status IN ('pending', 'confirmed', 'picked_up', 'in_transit', 'out_for_delivery', 'delivered', 'cancelled', 'delayed')), priority VARCHAR(20) DEFAULT 'medium' CHECK (priority IN ('low', 'medium', 'high', 'urgent')), cargo_type VARCHAR(100), cargo_description TEXT, weight DECIMAL(10, 2), -- in kg volume DECIMAL(10, 2), -- in cubic meters value DECIMAL(12, 2), -- cargo value for insurance special_instructions TEXT, pickup_instructions TEXT, delivery_instructions TEXT, scheduled_pickup TIMESTAMP, scheduled_delivery TIMESTAMP, actual_pickup TIMESTAMP, actual_delivery TIMESTAMP, estimated_cost DECIMAL(10, 2), final_cost DECIMAL(10, 2), payment_status VARCHAR(50) DEFAULT 'pending' CHECK (payment_status IN ('pending', 'paid', 'partial', 'refunded')), insurance_required BOOLEAN DEFAULT false, requires_signature BOOLEAN DEFAULT false, fragile BOOLEAN DEFAULT false, hazardous BOOLEAN DEFAULT false, temperature_controlled BOOLEAN DEFAULT false, temperature_range JSONB, documents JSONB DEFAULT '[]', photos JSONB DEFAULT '[]', ai_optimized BOOLEAN DEFAULT false, ai_savings DECIMAL(10, 2) DEFAULT 0, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Routes table CREATE TABLE routes ( id SERIAL PRIMARY KEY, shipment_id INTEGER REFERENCES shipments(id) ON DELETE CASCADE, truck_id INTEGER REFERENCES trucks(id), driver_id INTEGER REFERENCES drivers(id), route_name VARCHAR(255), status VARCHAR(50) DEFAULT 'planned' CHECK (status IN ('planned', 'in_progress', 'completed', 'cancelled')), start_time TIMESTAMP, end_time TIMESTAMP, estimated_duration INTEGER, -- in minutes actual_duration INTEGER, -- in minutes distance DECIMAL(10, 2), -- in km estimated_cost DECIMAL(10, 2), actual_cost DECIMAL(10, 2), fuel_consumption DECIMAL(8, 2), -- in liters toll_costs DECIMAL(8, 2), route_optimization_data JSONB, traffic_conditions JSONB, weather_conditions JSONB, ai_optimized BOOLEAN DEFAULT false, optimization_savings DECIMAL(10, 2) DEFAULT 0, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Route waypoints for detailed route tracking CREATE TABLE route_waypoints ( id SERIAL PRIMARY KEY, route_id INTEGER REFERENCES routes(id) ON DELETE CASCADE, location_id INTEGER REFERENCES locations(id), sequence_number INTEGER NOT NULL, waypoint_type VARCHAR(50) DEFAULT 'stop' CHECK (waypoint_type IN ('origin', 'waypoint', 'destination', 'fuel_stop', 'rest_stop')), estimated_arrival TIMESTAMP, actual_arrival TIMESTAMP, estimated_departure TIMESTAMP, actual_departure TIMESTAMP, notes TEXT, completed BOOLEAN DEFAULT false, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Real-time tracking data CREATE TABLE tracking_updates ( id SERIAL PRIMARY KEY, shipment_id INTEGER REFERENCES shipments(id) ON DELETE CASCADE, route_id INTEGER REFERENCES routes(id), latitude DECIMAL(10, 8), longitude DECIMAL(11, 8), speed DECIMAL(5, 2), -- km/h heading DECIMAL(5, 2), -- degrees altitude DECIMAL(8, 2), -- meters accuracy DECIMAL(5, 2), -- meters battery_level INTEGER, -- percentage signal_strength INTEGER, -- percentage status_message TEXT, event_type VARCHAR(50) DEFAULT 'location_update' CHECK (event_type IN ('location_update', 'pickup', 'delivery', 'delay', 'incident', 'fuel_stop', 'rest_break')), metadata JSONB DEFAULT '{}', recorded_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Maintenance records CREATE TABLE maintenance_records ( id SERIAL PRIMARY KEY, truck_id INTEGER REFERENCES trucks(id) ON DELETE CASCADE, maintenance_type VARCHAR(100) NOT NULL, description TEXT, scheduled_date DATE, completed_date DATE, cost DECIMAL(10, 2), mileage_at_service INTEGER, service_provider VARCHAR(255), parts_replaced JSONB DEFAULT '[]', next_service_due INTEGER, -- mileage status VARCHAR(50) DEFAULT 'scheduled' CHECK (status IN ('scheduled', 'in_progress', 'completed', 'cancelled')), priority VARCHAR(20) DEFAULT 'medium' CHECK (priority IN ('low', 'medium', 'high', 'critical')), ai_predicted BOOLEAN DEFAULT false, prediction_accuracy DECIMAL(5, 2), created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- AI optimization logs CREATE TABLE ai_optimization_logs ( id SERIAL PRIMARY KEY, optimization_type VARCHAR(50) NOT NULL CHECK (optimization_type IN ('route', 'load_matching', 'maintenance_prediction', 'demand_forecasting')), entity_type VARCHAR(50) NOT NULL CHECK (entity_type IN ('shipment', 'route', 'truck', 'driver')), entity_id INTEGER NOT NULL, input_data JSONB NOT NULL, output_data JSONB NOT NULL, confidence_score DECIMAL(5, 2), processing_time INTEGER, -- milliseconds cost_savings DECIMAL(10, 2), time_savings INTEGER, -- minutes fuel_savings DECIMAL(8, 2), -- liters success BOOLEAN DEFAULT true, error_message TEXT, ai_model_version VARCHAR(50), created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Documents table for file management CREATE TABLE documents ( id SERIAL PRIMARY KEY, user_id INTEGER REFERENCES users(id) ON DELETE CASCADE, shipment_id INTEGER REFERENCES shipments(id) ON DELETE SET NULL, truck_id INTEGER REFERENCES trucks(id) ON DELETE SET NULL, driver_id INTEGER REFERENCES drivers(id) ON DELETE SET NULL, document_type VARCHAR(100) NOT NULL, title VARCHAR(255) NOT NULL, description TEXT, file_name VARCHAR(255) NOT NULL, file_size INTEGER, file_type VARCHAR(100), file_url TEXT NOT NULL, storage_path TEXT, is_public BOOLEAN DEFAULT false, expiry_date DATE, ai_processed BOOLEAN DEFAULT false, ai_extracted_data JSONB, tags JSONB DEFAULT '[]', version INTEGER DEFAULT 1, parent_document_id INTEGER REFERENCES documents(id), created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Messages and notifications CREATE TABLE messages ( id SERIAL PRIMARY KEY, sender_id INTEGER REFERENCES users(id) ON DELETE CASCADE, recipient_id INTEGER REFERENCES users(id) ON DELETE CASCADE, shipment_id INTEGER REFERENCES shipments(id) ON DELETE SET NULL, message_type VARCHAR(50) DEFAULT 'direct' CHECK (message_type IN ('direct', 'system', 'notification', 'ai_assistant')), subject VARCHAR(255), content TEXT NOT NULL, attachments JSONB DEFAULT '[]', is_read BOOLEAN DEFAULT false, is_urgent BOOLEAN DEFAULT false, read_at TIMESTAMP, reply_to INTEGER REFERENCES messages(id), created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- System notifications CREATE TABLE notifications ( id SERIAL PRIMARY KEY, user_id INTEGER REFERENCES users(id) ON DELETE CASCADE, notification_type VARCHAR(100) NOT NULL, title VARCHAR(255) NOT NULL, message TEXT NOT NULL, data JSONB DEFAULT '{}', is_read BOOLEAN DEFAULT false, is_urgent BOOLEAN DEFAULT false, action_url TEXT, expires_at TIMESTAMP, read_at TIMESTAMP, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Analytics and reporting CREATE TABLE analytics_events ( id SERIAL PRIMARY KEY, user_id INTEGER REFERENCES users(id) ON DELETE SET NULL, event_type VARCHAR(100) NOT NULL, event_name VARCHAR(255) NOT NULL, properties JSONB DEFAULT '{}', session_id VARCHAR(255), ip_address INET, user_agent TEXT, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Pricing and billing CREATE TABLE pricing_rules ( id SERIAL PRIMARY KEY, rule_name VARCHAR(255) NOT NULL, rule_type VARCHAR(50) NOT NULL CHECK (rule_type IN ('distance', 'weight', 'volume', 'time', 'fuel', 'special')), base_rate DECIMAL(10, 4) NOT NULL, unit VARCHAR(50) NOT NULL, min_charge DECIMAL(10, 2), max_charge DECIMAL(10, 2), conditions JSONB DEFAULT '{}', is_active BOOLEAN DEFAULT true, effective_from DATE NOT NULL, effective_to DATE, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Invoices and payments CREATE TABLE invoices ( id SERIAL PRIMARY KEY, invoice_number VARCHAR(50) UNIQUE NOT NULL, customer_id INTEGER REFERENCES users(id) ON DELETE CASCADE, shipment_id INTEGER REFERENCES shipments(id) ON DELETE SET NULL, amount DECIMAL(12, 2) NOT NULL, tax_amount DECIMAL(12, 2) DEFAULT 0, total_amount DECIMAL(12, 2) NOT NULL, currency VARCHAR(3) DEFAULT 'MAD', status VARCHAR(50) DEFAULT 'pending' CHECK (status IN ('pending', 'sent', 'paid', 'overdue', 'cancelled')), due_date DATE NOT NULL, paid_date DATE, payment_method VARCHAR(50), payment_reference VARCHAR(255), line_items JSONB NOT NULL, notes TEXT, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Create indexes for better performance CREATE INDEX idx_users_email ON users(email); CREATE INDEX idx_users_role ON users(role); CREATE INDEX idx_shipments_tracking_number ON shipments(tracking_number); CREATE INDEX idx_shipments_customer_id ON shipments(customer_id); CREATE INDEX idx_shipments_status ON shipments(status); CREATE INDEX idx_routes_shipment_id ON routes(shipment_id); CREATE INDEX idx_routes_truck_id ON routes(truck_id); CREATE INDEX idx_routes_driver_id ON routes(driver_id); CREATE INDEX idx_tracking_updates_shipment_id ON tracking_updates(shipment_id); CREATE INDEX idx_tracking_updates_recorded_at ON tracking_updates(recorded_at); CREATE INDEX idx_trucks_owner_id ON trucks(owner_id); CREATE INDEX idx_trucks_status ON trucks(status); CREATE INDEX idx_drivers_user_id ON drivers(user_id); CREATE INDEX idx_drivers_status ON drivers(status); CREATE INDEX idx_locations_city ON locations(city); CREATE INDEX idx_locations_country ON locations(country); CREATE INDEX idx_documents_user_id ON documents(user_id); CREATE INDEX idx_messages_recipient_id ON messages(recipient_id); CREATE INDEX idx_notifications_user_id ON notifications(user_id);127:T51f,// lib/db.ts import { neon } from "@neondatabase/serverless" // Create a SQL query executor using the Neon serverless driver const sql = neon(process.env.DATABASE_URL!) export async function executeQuery(query: string, params: any[] = []) { try { const result = await sql(query, params) return result } catch (error) { console.error("Database query error:", error) throw error } } // Helper function for transactions export async function executeTransaction(queries: { query: string; params: any[] }[]) { try { // Note: Neon doesn't support explicit transactions in serverless mode // We'll execute queries sequentially and handle rollback manually if needed const results = [] for (const { query, params } of queries) { const result = await sql(query, params) results.push(result) } return results } catch (error) { console.error("Transaction error:", error) throw error } } // Database health check export async function checkDatabaseConnection() { try { await sql`SELECT 1` return { status: 'connected', timestamp: new Date().toISOString() } } catch (error) { console.error("Database connection error:", error) return { status: 'error', error: error.message, timestamp: new Date().toISOString() } } }128:T647,// lib/supabase-server.ts import { createClient } from "@supabase/supabase-js" // Create a single supabase client for server-side operations const supabaseUrl = process.env.SUPABASE_URL! const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY! export const supabaseServer = createClient(supabaseUrl, supabaseServiceKey, { auth: { autoRefreshToken: false, persistSession: false } }) // File upload helper export async function uploadFile( bucket: string, path: string, file: File | Buffer, options?: { contentType?: string metadata?: Record } ) { try { const { data, error } = await supabaseServer.storage .from(bucket) .upload(path, file, { contentType: options?.contentType, metadata: options?.metadata, upsert: true }) if (error) throw error // Get public URL const { data: urlData } = supabaseServer.storage .from(bucket) .getPublicUrl(path) return { success: true, data: { ...data, publicUrl: urlData.publicUrl } } } catch (error) { console.error("File upload error:", error) return { success: false, error: error.message } } } // File deletion helper export async function deleteFile(bucket: string, path: string) { try { const { error } = await supabaseServer.storage .from(bucket) .remove([path]) if (error) throw error return { success: true } } catch (error) { console.error("File deletion error:", error) return { success: false, error: error.message } } }129:T14df,// lib/auth.ts import bcrypt from "bcryptjs" import jwt from "jsonwebtoken" import { executeQuery } from "./db" export interface User { id: number name: string email: string role: 'individual' | 'carrier' | 'company' | 'admin' phone?: string avatar_url?: string company_name?: string verification_status: 'pending' | 'verified' | 'rejected' is_active: boolean } export interface AuthResult { success: boolean user?: User token?: string error?: string } // Hash password export async function hashPassword(password: string): Promise { const salt = await bcrypt.genSalt(12) return bcrypt.hash(password, salt) } // Verify password export async function verifyPassword(password: string, hash: string): Promise { return bcrypt.compare(password, hash) } // Generate JWT token export function generateToken(user: User): string { return jwt.sign( { id: user.id, email: user.email, role: user.role }, process.env.JWT_SECRET!, { expiresIn: '7d' } ) } // Verify JWT token export function verifyToken(token: string): any { try { return jwt.verify(token, process.env.JWT_SECRET!) } catch (error) { return null } } // Get user by email export async function getUserByEmail(email: string): Promise { try { const users = await executeQuery( "SELECT id, name, email, role, phone, avatar_url, company_name, verification_status, is_active FROM users WHERE email = $1 AND is_active = true", [email] ) return users.length > 0 ? users[0] : null } catch (error) { console.error("Error getting user by email:", error) return null } } // Get user by ID export async function getUserById(id: number): Promise { try { const users = await executeQuery( "SELECT id, name, email, role, phone, avatar_url, company_name, verification_status, is_active FROM users WHERE id = $1 AND is_active = true", [id] ) return users.length > 0 ? users[0] : null } catch (error) { console.error("Error getting user by ID:", error) return null } } // Create new user export async function createUser(userData: { name: string email: string password: string role?: string phone?: string company_name?: string }): Promise { try { // Check if user already exists const existingUser = await getUserByEmail(userData.email) if (existingUser) { return { success: false, error: "User with this email already exists" } } // Hash password const passwordHash = await hashPassword(userData.password) // Create user const result = await executeQuery( `INSERT INTO users (name, email, password_hash, role, phone, company_name) VALUES ($1, $2, $3, $4, $5, $6) RETURNING id, name, email, role, phone, avatar_url, company_name, verification_status, is_active`, [ userData.name, userData.email, passwordHash, userData.role || 'individual', userData.phone, userData.company_name ] ) const user = result[0] const token = generateToken(user) return { success: true, user, token } } catch (error) { console.error("Error creating user:", error) return { success: false, error: "Failed to create user" } } } // Authenticate user export async function authenticateUser(email: string, password: string): Promise { try { // Get user with password hash const users = await executeQuery( "SELECT id, name, email, password_hash, role, phone, avatar_url, company_name, verification_status, is_active FROM users WHERE email = $1 AND is_active = true", [email] ) if (users.length === 0) { return { success: false, error: "Invalid credentials" } } const user = users[0] // Verify password const isValidPassword = await verifyPassword(password, user.password_hash) if (!isValidPassword) { return { success: false, error: "Invalid credentials" } } // Update last login await executeQuery( "UPDATE users SET last_login = CURRENT_TIMESTAMP WHERE id = $1", [user.id] ) // Remove password hash from user object const { password_hash, ...userWithoutPassword } = user const token = generateToken(userWithoutPassword) return { success: true, user: userWithoutPassword, token } } catch (error) { console.error("Error authenticating user:", error) return { success: false, error: "Authentication failed" } } } // Middleware to verify authentication export async function verifyAuth(request: Request): Promise<{ user: User | null; error?: string }> { try { const authHeader = request.headers.get('authorization') if (!authHeader || !authHeader.startsWith('Bearer ')) { return { user: null, error: "No valid authorization header" } } const token = authHeader.substring(7) const decoded = verifyToken(token) if (!decoded) { return { user: null, error: "Invalid token" } } const user = await getUserById(decoded.id) if (!user) { return { user: null, error: "User not found" } } return { user } } catch (error) { console.error("Auth verification error:", error) return { user: null, error: "Authentication failed" } } }12a:T5ee,// app/api/auth/login/route.ts import { NextRequest, NextResponse } from "next/server" import { authenticateUser } from "@/lib/auth" import { z } from "zod" const loginSchema = z.object({ email: z.string().email("Invalid email format"), password: z.string().min(6, "Password must be at least 6 characters") }) export async function POST(request: NextRequest) { try { const body = await request.json() // Validate input const validation = loginSchema.safeParse(body) if (!validation.success) { return NextResponse.json( { error: "Invalid input", details: validation.error.errors }, { status: 400 } ) } const { email, password } = validation.data // Authenticate user const result = await authenticateUser(email, password) if (!result.success) { return NextResponse.json( { error: result.error }, { status: 401 } ) } // Set HTTP-only cookie for additional security const response = NextResponse.json({ success: true, user: result.user, token: result.token }) response.cookies.set({ name: "auth-token", value: result.token!, httpOnly: true, secure: process.env.NODE_ENV === "production", sameSite: "strict", maxAge: 60 * 60 * 24 * 7 // 7 days }) return response } catch (error) { console.error("Login error:", error) return NextResponse.json( { error: "Internal server error" }, { status: 500 } ) } }12b:T690,// app/api/auth/signup/route.ts import { NextRequest, NextResponse } from "next/server" import { createUser } from "@/lib/auth" import { z } from "zod" const signupSchema = z.object({ name: z.string().min(2, "Name must be at least 2 characters"), email: z.string().email("Invalid email format"), password: z.string().min(6, "Password must be at least 6 characters"), role: z.enum(['individual', 'carrier', 'company']).optional(), phone: z.string().optional(), company_name: z.string().optional() }) export async function POST(request: NextRequest) { try { const body = await request.json() // Validate input const validation = signupSchema.safeParse(body) if (!validation.success) { return NextResponse.json( { error: "Invalid input", details: validation.error.errors }, { status: 400 } ) } const userData = validation.data // Create user const result = await createUser(userData) if (!result.success) { return NextResponse.json( { error: result.error }, { status: 400 } ) } // Set HTTP-only cookie const response = NextResponse.json({ success: true, user: result.user, token: result.token }, { status: 201 }) response.cookies.set({ name: "auth-token", value: result.token!, httpOnly: true, secure: process.env.NODE_ENV === "production", sameSite: "strict", maxAge: 60 * 60 * 24 * 7 // 7 days }) return response } catch (error) { console.error("Signup error:", error) return NextResponse.json( { error: "Internal server error" }, { status: 500 } ) } }12c:T2345,// app/api/shipments/route.ts import { NextRequest, NextResponse } from "next/server" import { executeQuery } from "@/lib/db" import { verifyAuth } from "@/lib/auth" import { z } from "zod" const createShipmentSchema = z.object({ origin_id: z.number().int().positive(), destination_id: z.number().int().positive(), cargo_type: z.string().optional(), cargo_description: z.string().optional(), weight: z.number().positive().optional(), volume: z.number().positive().optional(), value: z.number().positive().optional(), priority: z.enum(['low', 'medium', 'high', 'urgent']).default('medium'), scheduled_pickup: z.string().datetime().optional(), scheduled_delivery: z.string().datetime().optional(), special_instructions: z.string().optional(), pickup_instructions: z.string().optional(), delivery_instructions: z.string().optional(), insurance_required: z.boolean().default(false), requires_signature: z.boolean().default(false), fragile: z.boolean().default(false), hazardous: z.boolean().default(false), temperature_controlled: z.boolean().default(false), temperature_range: z.object({ min: z.number(), max: z.number() }).optional() }) // Get all shipments export async function GET(request: NextRequest) { try { const { user, error } = await verifyAuth(request) if (!user) { return NextResponse.json({ error: error || "Unauthorized" }, { status: 401 }) } const { searchParams } = new URL(request.url) const status = searchParams.get("status") const priority = searchParams.get("priority") const page = parseInt(searchParams.get("page") || "1") const limit = parseInt(searchParams.get("limit") || "20") const offset = (page - 1) * limit let query = ` SELECT s.*, o.name as origin_name, o.address as origin_address, o.city as origin_city, o.country as origin_country, d.name as destination_name, d.address as destination_address, d.city as destination_city, d.country as destination_country, u.name as customer_name, u.email as customer_email, COUNT(*) OVER() as total_count FROM shipments s JOIN locations o ON s.origin_id = o.id JOIN locations d ON s.destination_id = d.id JOIN users u ON s.customer_id = u.id ` const params: any[] = [] const conditions: string[] = [] // Role-based filtering if (user.role === 'individual' || user.role === 'company') { conditions.push("s.customer_id = $" + (params.length + 1)) params.push(user.id) } if (status) { conditions.push("s.status = $" + (params.length + 1)) params.push(status) } if (priority) { conditions.push("s.priority = $" + (params.length + 1)) params.push(priority) } if (conditions.length > 0) { query += " WHERE " + conditions.join(" AND ") } query += ` ORDER BY s.created_at DESC LIMIT $${params.length + 1} OFFSET $${params.length + 2}` params.push(limit, offset) const shipments = await executeQuery(query, params) const totalCount = shipments.length > 0 ? shipments[0].total_count : 0 const totalPages = Math.ceil(totalCount / limit) return NextResponse.json({ shipments: shipments.map(({ total_count, ...shipment }) => shipment), pagination: { page, limit, totalCount, totalPages, hasNext: page < totalPages, hasPrev: page > 1 } }) } catch (error) { console.error("Error fetching shipments:", error) return NextResponse.json({ error: "Failed to fetch shipments" }, { status: 500 }) } } // Create a new shipment export async function POST(request: NextRequest) { try { const { user, error } = await verifyAuth(request) if (!user) { return NextResponse.json({ error: error || "Unauthorized" }, { status: 401 }) } const body = await request.json() // Validate input const validation = createShipmentSchema.safeParse(body) if (!validation.success) { return NextResponse.json( { error: "Invalid input", details: validation.error.errors }, { status: 400 } ) } const shipmentData = validation.data // Verify locations exist const [origin, destination] = await Promise.all([ executeQuery("SELECT id FROM locations WHERE id = $1", [shipmentData.origin_id]), executeQuery("SELECT id FROM locations WHERE id = $1", [shipmentData.destination_id]) ]) if (origin.length === 0) { return NextResponse.json({ error: "Origin location not found" }, { status: 404 }) } if (destination.length === 0) { return NextResponse.json({ error: "Destination location not found" }, { status: 404 }) } // Generate tracking number const trackingNumber = `SHP-${Date.now()}-${Math.floor(Math.random() * 1000).toString().padStart(3, '0')}` // Calculate estimated cost (basic calculation) const estimatedCost = await calculateShippingCost(shipmentData) // Create shipment const result = await executeQuery( `INSERT INTO shipments (tracking_number, customer_id, origin_id, destination_id, cargo_type, cargo_description, weight, volume, value, priority, scheduled_pickup, scheduled_delivery, special_instructions, pickup_instructions, delivery_instructions, insurance_required, requires_signature, fragile, hazardous, temperature_controlled, temperature_range, estimated_cost) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $16, $17, $18, $19, $20, $21, $22) RETURNING *`, [ trackingNumber, user.id, shipmentData.origin_id, shipmentData.destination_id, shipmentData.cargo_type, shipmentData.cargo_description, shipmentData.weight, shipmentData.volume, shipmentData.value, shipmentData.priority, shipmentData.scheduled_pickup, shipmentData.scheduled_delivery, shipmentData.special_instructions, shipmentData.pickup_instructions, shipmentData.delivery_instructions, shipmentData.insurance_required, shipmentData.requires_signature, shipmentData.fragile, shipmentData.hazardous, shipmentData.temperature_controlled, JSON.stringify(shipmentData.temperature_range), estimatedCost ] ) // Get complete shipment data with location details const completeShipment = await executeQuery( `SELECT s.*, o.name as origin_name, o.address as origin_address, o.city as origin_city, d.name as destination_name, d.address as destination_address, d.city as destination_city FROM shipments s JOIN locations o ON s.origin_id = o.id JOIN locations d ON s.destination_id = d.id WHERE s.id = $1`, [result[0].id] ) return NextResponse.json(completeShipment[0], { status: 201 }) } catch (error) { console.error("Error creating shipment:", error) return NextResponse.json({ error: "Failed to create shipment" }, { status: 500 }) } } // Helper function to calculate shipping cost async function calculateShippingCost(shipmentData: any): Promise { try { // Get active pricing rules const pricingRules = await executeQuery( `SELECT * FROM pricing_rules WHERE is_active = true AND effective_from <= CURRENT_DATE AND (effective_to IS NULL OR effective_to >= CURRENT_DATE) ORDER BY rule_type` ) let totalCost = 0 const baseRate = 50 // Base shipping rate // Distance-based calculation (simplified) if (shipmentData.weight) { const weightRule = pricingRules.find(rule => rule.rule_type === 'weight') if (weightRule) { totalCost += shipmentData.weight * weightRule.base_rate } else { totalCost += shipmentData.weight * 2 // Default rate per kg } } // Volume-based calculation if (shipmentData.volume) { const volumeRule = pricingRules.find(rule => rule.rule_type === 'volume') if (volumeRule) { totalCost += shipmentData.volume * volumeRule.base_rate } else { totalCost += shipmentData.volume * 10 // Default rate per cubic meter } } // Priority surcharge const priorityMultipliers = { low: 0.9, medium: 1.0, high: 1.3, urgent: 1.8 } totalCost *= priorityMultipliers[shipmentData.priority] || 1.0 // Special handling fees if (shipmentData.fragile) totalCost += 25 if (shipmentData.hazardous) totalCost += 100 if (shipmentData.temperature_controlled) totalCost += 75 if (shipmentData.insurance_required && shipmentData.value) { totalCost += shipmentData.value * 0.01 // 1% of value } return Math.max(totalCost, baseRate) // Ensure minimum cost } catch (error) { console.error("Error calculating shipping cost:", error) return 100 // Default fallback cost } }12d:T1fad,// app/api/shipments/[id]/route.ts import { NextRequest, NextResponse } from "next/server" import { executeQuery } from "@/lib/db" import { verifyAuth } from "@/lib/auth" import { z } from "zod" const updateShipmentSchema = z.object({ status: z.enum(['pending', 'confirmed', 'picked_up', 'in_transit', 'out_for_delivery', 'delivered', 'cancelled', 'delayed']).optional(), priority: z.enum(['low', 'medium', 'high', 'urgent']).optional(), weight: z.number().positive().optional(), volume: z.number().positive().optional(), value: z.number().positive().optional(), scheduled_pickup: z.string().datetime().optional(), scheduled_delivery: z.string().datetime().optional(), actual_pickup: z.string().datetime().optional(), actual_delivery: z.string().datetime().optional(), special_instructions: z.string().optional(), pickup_instructions: z.string().optional(), delivery_instructions: z.string().optional() }) // Get a specific shipment export async function GET(request: NextRequest, { params }: { params: { id: string } }) { try { const { user, error } = await verifyAuth(request) if (!user) { return NextResponse.json({ error: error || "Unauthorized" }, { status: 401 }) } const id = params.id let query = ` SELECT s.*, o.name as origin_name, o.address as origin_address, o.city as origin_city, o.state as origin_state, o.country as origin_country, o.latitude as origin_lat, o.longitude as origin_lng, d.name as destination_name, d.address as destination_address, d.city as destination_city, d.state as destination_state, d.country as destination_country, d.latitude as dest_lat, d.longitude as dest_lng, u.name as customer_name, u.email as customer_email, u.phone as customer_phone FROM shipments s JOIN locations o ON s.origin_id = o.id JOIN locations d ON s.destination_id = d.id JOIN users u ON s.customer_id = u.id WHERE s.id = $1 ` const params_array = [id] // Role-based access control if (user.role === 'individual' || user.role === 'company') { query += " AND s.customer_id = $2" params_array.push(user.id) } const shipments = await executeQuery(query, params_array) if (shipments.length === 0) { return NextResponse.json({ error: "Shipment not found" }, { status: 404 }) } const shipment = shipments[0] // Get associated route if exists const routes = await executeQuery( `SELECT r.*, t.license_plate, t.model as truck_model, t.capacity as truck_capacity, d.id as driver_id, du.name as driver_name, d.phone_number as driver_phone, d.rating as driver_rating FROM routes r LEFT JOIN trucks t ON r.truck_id = t.id LEFT JOIN drivers d ON r.driver_id = d.id LEFT JOIN users du ON d.user_id = du.id WHERE r.shipment_id = $1 ORDER BY r.created_at DESC LIMIT 1`, [id] ) // Get tracking updates const trackingUpdates = await executeQuery( `SELECT * FROM tracking_updates WHERE shipment_id = $1 ORDER BY recorded_at DESC LIMIT 10`, [id] ) // Get documents const documents = await executeQuery( `SELECT id, document_type, title, file_name, file_url, created_at FROM documents WHERE shipment_id = $1 ORDER BY created_at DESC`, [id] ) const shipmentData = { ...shipment, route: routes.length > 0 ? routes[0] : null, tracking_updates: trackingUpdates, documents: documents } return NextResponse.json(shipmentData) } catch (error) { console.error("Error fetching shipment:", error) return NextResponse.json({ error: "Failed to fetch shipment" }, { status: 500 }) } } // Update a shipment export async function PUT(request: NextRequest, { params }: { params: { id: string } }) { try { const { user, error } = await verifyAuth(request) if (!user) { return NextResponse.json({ error: error || "Unauthorized" }, { status: 401 }) } const id = params.id const body = await request.json() // Validate input const validation = updateShipmentSchema.safeParse(body) if (!validation.success) { return NextResponse.json( { error: "Invalid input", details: validation.error.errors }, { status: 400 } ) } const updateData = validation.data // Check if shipment exists and user has permission let checkQuery = "SELECT * FROM shipments WHERE id = $1" const checkParams = [id] if (user.role === 'individual' || user.role === 'company') { checkQuery += " AND customer_id = $2" checkParams.push(user.id) } const existingShipment = await executeQuery(checkQuery, checkParams) if (existingShipment.length === 0) { return NextResponse.json({ error: "Shipment not found" }, { status: 404 }) } // Build update query dynamically const updateFields = [] const updateParams = [] let paramIndex = 1 Object.entries(updateData).forEach(([key, value]) => { if (value !== undefined) { updateFields.push(`${key} = $${paramIndex}`) updateParams.push(value) paramIndex++ } }) if (updateFields.length === 0) { return NextResponse.json({ error: "No fields to update" }, { status: 400 }) } updateFields.push(`updated_at = CURRENT_TIMESTAMP`) updateParams.push(id) const updateQuery = ` UPDATE shipments SET ${updateFields.join(', ')} WHERE id = $${paramIndex} RETURNING * ` const result = await executeQuery(updateQuery, updateParams) // Log status change if applicable if (updateData.status) { await executeQuery( `INSERT INTO tracking_updates (shipment_id, event_type, status_message, recorded_at) VALUES ($1, $2, $3, CURRENT_TIMESTAMP)`, [id, 'status_change', `Status updated to ${updateData.status}`] ) } return NextResponse.json(result[0]) } catch (error) { console.error("Error updating shipment:", error) return NextResponse.json({ error: "Failed to update shipment" }, { status: 500 }) } } // Delete a shipment export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) { try { const { user, error } = await verifyAuth(request) if (!user) { return NextResponse.json({ error: error || "Unauthorized" }, { status: 401 }) } const id = params.id // Check if shipment exists and user has permission let checkQuery = "SELECT * FROM shipments WHERE id = $1" const checkParams = [id] if (user.role === 'individual' || user.role === 'company') { checkQuery += " AND customer_id = $2" checkParams.push(user.id) } const existingShipment = await executeQuery(checkQuery, checkParams) if (existingShipment.length === 0) { return NextResponse.json({ error: "Shipment not found" }, { status: 404 }) } const shipment = existingShipment[0] // Check if shipment can be deleted (not in transit) if (['picked_up', 'in_transit', 'out_for_delivery'].includes(shipment.status)) { return NextResponse.json( { error: "Cannot delete shipment that is currently in transit" }, { status: 400 } ) } // Delete associated records first await executeQuery("DELETE FROM tracking_updates WHERE shipment_id = $1", [id]) await executeQuery("DELETE FROM route_waypoints WHERE route_id IN (SELECT id FROM routes WHERE shipment_id = $1)", [id]) await executeQuery("DELETE FROM routes WHERE shipment_id = $1", [id]) await executeQuery("UPDATE documents SET shipment_id = NULL WHERE shipment_id = $1", [id]) // Delete shipment await executeQuery("DELETE FROM shipments WHERE id = $1", [id]) return NextResponse.json({ success: true }) } catch (error) { console.error("Error deleting shipment:", error) return NextResponse.json({ error: "Failed to delete shipment" }, { status: 500 }) } }12e:T196b,// app/api/shipments/[id]/tracking/route.ts import { NextRequest, NextResponse } from "next/server" import { executeQuery } from "@/lib/db" import { verifyAuth } from "@/lib/auth" import { z } from "zod" const trackingUpdateSchema = z.object({ latitude: z.number().min(-90).max(90), longitude: z.number().min(-180).max(180), speed: z.number().min(0).optional(), heading: z.number().min(0).max(360).optional(), altitude: z.number().optional(), accuracy: z.number().min(0).optional(), battery_level: z.number().min(0).max(100).optional(), signal_strength: z.number().min(0).max(100).optional(), status_message: z.string().optional(), event_type: z.enum(['location_update', 'pickup', 'delivery', 'delay', 'incident', 'fuel_stop', 'rest_break']).default('location_update'), metadata: z.record(z.any()).optional() }) // Get tracking updates for a shipment export async function GET(request: NextRequest, { params }: { params: { id: string } }) { try { const { user, error } = await verifyAuth(request) if (!user) { return NextResponse.json({ error: error || "Unauthorized" }, { status: 401 }) } const shipmentId = params.id const { searchParams } = new URL(request.url) const limit = parseInt(searchParams.get("limit") || "50") const since = searchParams.get("since") // ISO timestamp // Verify user has access to this shipment let accessQuery = "SELECT id FROM shipments WHERE id = $1" const accessParams = [shipmentId] if (user.role === 'individual' || user.role === 'company') { accessQuery += " AND customer_id = $2" accessParams.push(user.id) } const shipmentAccess = await executeQuery(accessQuery, accessParams) if (shipmentAccess.length === 0) { return NextResponse.json({ error: "Shipment not found" }, { status: 404 }) } // Build tracking query let trackingQuery = ` SELECT * FROM tracking_updates WHERE shipment_id = $1 ` const trackingParams = [shipmentId] if (since) { trackingQuery += " AND recorded_at > $2" trackingParams.push(since) } trackingQuery += " ORDER BY recorded_at DESC LIMIT $" + (trackingParams.length + 1) trackingParams.push(limit) const trackingUpdates = await executeQuery(trackingQuery, trackingParams) // Get current route information const routeInfo = await executeQuery( `SELECT r.*, t.license_plate, t.model as truck_model, d.id as driver_id, u.name as driver_name, d.phone_number as driver_phone FROM routes r LEFT JOIN trucks t ON r.truck_id = t.id LEFT JOIN drivers d ON r.driver_id = d.id LEFT JOIN users u ON d.user_id = u.id WHERE r.shipment_id = $1 AND r.status IN ('planned', 'in_progress') ORDER BY r.created_at DESC LIMIT 1`, [shipmentId] ) return NextResponse.json({ tracking_updates: trackingUpdates, route_info: routeInfo.length > 0 ? routeInfo[0] : null, last_update: trackingUpdates.length > 0 ? trackingUpdates[0].recorded_at : null }) } catch (error) { console.error("Error fetching tracking updates:", error) return NextResponse.json({ error: "Failed to fetch tracking updates" }, { status: 500 }) } } // Add a new tracking update export async function POST(request: NextRequest, { params }: { params: { id: string } }) { try { const { user, error } = await verifyAuth(request) if (!user) { return NextResponse.json({ error: error || "Unauthorized" }, { status: 401 }) } const shipmentId = params.id const body = await request.json() // Validate input const validation = trackingUpdateSchema.safeParse(body) if (!validation.success) { return NextResponse.json( { error: "Invalid input", details: validation.error.errors }, { status: 400 } ) } const trackingData = validation.data // Verify shipment exists and user has permission (drivers and carriers can update) const shipmentQuery = user.role === 'carrier' ? `SELECT s.id FROM shipments s JOIN routes r ON s.id = r.shipment_id JOIN drivers d ON r.driver_id = d.id WHERE s.id = $1 AND d.user_id = $2` : `SELECT id FROM shipments WHERE id = $1 AND customer_id = $2` const shipmentCheck = await executeQuery(shipmentQuery, [shipmentId, user.id]) if (shipmentCheck.length === 0) { return NextResponse.json({ error: "Shipment not found or access denied" }, { status: 404 }) } // Get current route const currentRoute = await executeQuery( "SELECT id FROM routes WHERE shipment_id = $1 AND status IN ('planned', 'in_progress') ORDER BY created_at DESC LIMIT 1", [shipmentId] ) // Insert tracking update const result = await executeQuery( `INSERT INTO tracking_updates (shipment_id, route_id, latitude, longitude, speed, heading, altitude, accuracy, battery_level, signal_strength, status_message, event_type, metadata, recorded_at) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, CURRENT_TIMESTAMP) RETURNING *`, [ shipmentId, currentRoute.length > 0 ? currentRoute[0].id : null, trackingData.latitude, trackingData.longitude, trackingData.speed, trackingData.heading, trackingData.altitude, trackingData.accuracy, trackingData.battery_level, trackingData.signal_strength, trackingData.status_message, trackingData.event_type, JSON.stringify(trackingData.metadata || {}) ] ) // Update shipment status based on event type if (trackingData.event_type === 'pickup') { await executeQuery( "UPDATE shipments SET status = 'picked_up', actual_pickup = CURRENT_TIMESTAMP WHERE id = $1", [shipmentId] ) } else if (trackingData.event_type === 'delivery') { await executeQuery( "UPDATE shipments SET status = 'delivered', actual_delivery = CURRENT_TIMESTAMP WHERE id = $1", [shipmentId] ) } // Broadcast real-time update (simplified - in production, use WebSockets or Server-Sent Events) // await broadcastTrackingUpdate(shipmentId, result[0]) return NextResponse.json(result[0], { status: 201 }) } catch (error) { console.error("Error adding tracking update:", error) return NextResponse.json({ error: "Failed to add tracking update" }, { status: 500 }) } }12f:T2974,// lib/ai/route-optimizer.ts import { executeQuery } from "@/lib/db" type RoutePoint = { id: number name: string address: string city: string state: string latitude: number longitude: number } type OptimizationFactors = { prioritizeTime?: boolean prioritizeFuel?: boolean avoidTolls?: boolean considerTraffic?: boolean considerWeather?: boolean } type OptimizationResult = { orderedLocations: number[] orderedLocationsWithDetails: RoutePoint[] totalDistance: string estimatedTime: string fuelConsumption: string estimatedCost: string recommendations: string savings: { time: string fuel: string cost: string } confidence_score: number } export async function optimizeRoute( originId: number, destinationId: number, waypoints: number[] = [], factors: OptimizationFactors = {}, truckSpecs?: { fuel_efficiency: number capacity: number fuel_type: string } ): Promise { try { // Get origin, destination and waypoint locations const locationIds = [originId, destinationId, ...waypoints] const locationsQuery = ` SELECT id, name, address, city, state, latitude, longitude FROM locations WHERE id = ANY($1) ` const locations = await executeQuery(locationsQuery, [locationIds]) if (!locations || locations.length < 2) { throw new Error("Origin and destination locations are required") } // Find origin and destination const origin = locations.find((loc: any) => loc.id === originId) const destination = locations.find((loc: any) => loc.id === destinationId) if (!origin || !destination) { throw new Error("Origin or destination not found") } // Get waypoint locations const waypointLocations = locations.filter((loc: any) => loc.id !== originId && loc.id !== destinationId ) // Get historical traffic data for this route const historicalData = await getHistoricalRouteData(originId, destinationId) // Get current weather conditions const weatherData = await getCurrentWeatherConditions([origin, destination, ...waypointLocations]) // Call Groq API to optimize the route const optimizedRoute = await callGroqForRouteOptimization( origin, destination, waypointLocations, factors, truckSpecs, historicalData, weatherData ) // Log the optimization for analytics await executeQuery( `INSERT INTO ai_optimization_logs (optimization_type, entity_type, entity_id, input_data, output_data, confidence_score, cost_savings, time_savings, fuel_savings, ai_model_version) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10)`, [ 'route', 'shipment', 0, // Will be updated when associated with actual shipment JSON.stringify({ origin, destination, waypoints: waypointLocations, factors }), JSON.stringify(optimizedRoute), optimizedRoute.confidence_score || 85, parseFloat(optimizedRoute.savings.cost.replace('$', '')) || 0, parseInt(optimizedRoute.savings.time.split(' ')[0]) || 0, parseFloat(optimizedRoute.savings.fuel.split(' ')[0]) || 0, 'groq-llama3-70b-v1' ] ) return optimizedRoute } catch (error) { console.error("Error optimizing route:", error) throw error } } async function callGroqForRouteOptimization( origin: RoutePoint, destination: RoutePoint, waypoints: RoutePoint[], factors: OptimizationFactors, truckSpecs?: any, historicalData?: any, weatherData?: any ): Promise { // Calculate base distance using Haversine formula const calculateDistance = (lat1: number, lon1: number, lat2: number, lon2: number): number => { const R = 6371 // Earth's radius in km const dLat = (lat2 - lat1) * Math.PI / 180 const dLon = (lon2 - lon1) * Math.PI / 180 const a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dLon/2) * Math.sin(dLon/2) const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)) return R * c } const baseDistance = calculateDistance( origin.latitude, origin.longitude, destination.latitude, destination.longitude ) // Prepare the prompt for Groq const waypointsText = waypoints.length > 0 ? `The route must include these waypoints (in the optimal order): ${waypoints.map((wp) => `${wp.name} (${wp.city}, ${wp.state})`).join(", ")}.` : "No additional waypoints required." const factorsText = Object.entries(factors) .filter(([_, value]) => value === true) .map(([key]) => { switch (key) { case "prioritizeTime": return "Prioritize the fastest route" case "prioritizeFuel": return "Prioritize fuel efficiency" case "avoidTolls": return "Avoid toll roads" case "considerTraffic": return "Consider current traffic conditions" case "considerWeather": return "Consider weather conditions" default: return "" } }) .filter((text) => text) .join(". ") const truckInfo = truckSpecs ? `Truck specifications: ${truckSpecs.fuel_efficiency} km/L efficiency, ${truckSpecs.capacity}kg capacity, ${truckSpecs.fuel_type} fuel.` : "Standard truck specifications assumed." const historicalInfo = historicalData?.averageTime ? `Historical data shows this route typically takes ${historicalData.averageTime} minutes.` : "" const weatherInfo = weatherData?.conditions ? `Current weather conditions: ${weatherData.conditions}.` : "" const prompt = ` I need to optimize a logistics route from ${origin.name} (${origin.city}, ${origin.state}) to ${destination.name} (${destination.city}, ${destination.state}). ${waypointsText} ${factorsText ? `Optimization factors: ${factorsText}.` : ""} ${truckInfo} ${historicalInfo} ${weatherInfo} Base distance: ${baseDistance.toFixed(2)} km Please provide: 1. The optimal order of locations to visit (array of location IDs) 2. Estimated total distance in km 3. Estimated travel time in hours and minutes 4. Estimated fuel consumption in liters 5. Estimated total cost in USD 6. Specific route recommendations and reasoning 7. Estimated savings compared to a basic route (time, fuel, cost) 8. Confidence score (0-100) for this optimization Format the response as a JSON object with these exact fields: orderedLocations, totalDistance, estimatedTime, fuelConsumption, estimatedCost, recommendations, savings (with time, fuel, cost subfields), and confidence_score. ` try { const response = await fetch("https://api.groq.com/openai/v1/chat/completions", { method: "POST", headers: { Authorization: `Bearer ${process.env.GROQ_API_KEY}`, "Content-Type": "application/json", }, body: JSON.stringify({ model: "llama3-70b-8192", messages: [ { role: "system", content: "You are a logistics route optimization expert with deep knowledge of Moroccan geography, traffic patterns, and transportation efficiency. Always respond with valid JSON that matches the requested format exactly.", }, { role: "user", content: prompt, }, ], temperature: 0.2, response_format: { type: "json_object" }, }), }) if (!response.ok) { throw new Error(`Groq API error: ${response.status}`) } const data = await response.json() const result = JSON.parse(data.choices[0].message.content) // Add location details to the ordered locations const orderedLocationsWithDetails = result.orderedLocations.map((id: number) => { const location = [origin, destination, ...waypoints].find((loc) => loc.id === id) return location || null }).filter(Boolean) return { ...result, orderedLocationsWithDetails, } } catch (error) { console.error("Error calling Groq API:", error) // Fallback optimization using simple algorithms return generateFallbackOptimization(origin, destination, waypoints, baseDistance) } } async function getHistoricalRouteData(originId: number, destinationId: number) { try { const historicalRoutes = await executeQuery( `SELECT AVG(actual_duration) as average_time, AVG(distance) as average_distance, AVG(fuel_consumption) as average_fuel FROM routes r JOIN shipments s ON r.shipment_id = s.id WHERE s.origin_id = $1 AND s.destination_id = $2 AND r.status = 'completed' AND r.created_at > CURRENT_DATE - INTERVAL '90 days'`, [originId, destinationId] ) return historicalRoutes.length > 0 ? historicalRoutes[0] : null } catch (error) { console.error("Error fetching historical route data:", error) return null } } async function getCurrentWeatherConditions(locations: RoutePoint[]) { try { // In a real implementation, you would call a weather API // For now, return mock data return { conditions: "Clear skies, good visibility", temperature: 22, wind_speed: 10, precipitation: 0 } } catch (error) { console.error("Error fetching weather data:", error) return null } } function generateFallbackOptimization( origin: RoutePoint, destination: RoutePoint, waypoints: RoutePoint[], baseDistance: number ): OptimizationResult { // Simple fallback optimization const orderedLocations = [origin.id, ...waypoints.map(w => w.id), destination.id] const totalDistance = Math.round(baseDistance * 1.1) // Add 10% for waypoints const estimatedTime = Math.round(totalDistance / 60) // Assume 60 km/h average const fuelConsumption = Math.round(totalDistance / 12) // Assume 12 km/L efficiency const estimatedCost = Math.round(totalDistance * 0.8 + fuelConsumption * 1.2) // Distance + fuel costs return { orderedLocations, orderedLocationsWithDetails: [origin, ...waypoints, destination], totalDistance: `${totalDistance} km`, estimatedTime: `${Math.floor(estimatedTime / 60)}h ${estimatedTime % 60}m`, fuelConsumption: `${fuelConsumption} liters`, estimatedCost: `$${estimatedCost}`, recommendations: "Basic route optimization applied. Consider using AI optimization for better results.", savings: { time: "15 minutes", fuel: "2 liters", cost: "$8" }, confidence_score: 65 } }130:T34da,// lib/ai/load-matcher.ts import { executeQuery } from "@/lib/db" type MatchingFactors = { prioritizeProximity?: boolean prioritizeAvailability?: boolean prioritizeExperience?: boolean prioritizeRating?: boolean prioritizeFuelEfficiency?: boolean prioritizeCost?: boolean } type MatchResult = { truckId: number driverId: number score: number explanation: string truck: any driver: any estimatedCost: number estimatedTime: string distance: number } export async function findOptimalMatches( shipmentId: number, factors: MatchingFactors = {}, maxResults: number = 5 ): Promise { try { // Get shipment details const shipmentQuery = ` SELECT s.*, o.latitude as origin_lat, o.longitude as origin_lng, o.name as origin_name, d.latitude as dest_lat, d.longitude as dest_lng, d.name as dest_name FROM shipments s JOIN locations o ON s.origin_id = o.id JOIN locations d ON s.destination_id = d.id WHERE s.id = $1 ` const shipments = await executeQuery(shipmentQuery, [shipmentId]) if (!shipments || shipments.length === 0) { throw new Error("Shipment not found") } const shipment = shipments[0] // Get available trucks with their current locations const trucksQuery = ` SELECT t.*, COALESCE(cl.latitude, ol.latitude) as current_lat, COALESCE(cl.longitude, ol.longitude) as current_lng, COALESCE(cl.name, ol.name) as current_location_name, u.name as owner_name, u.phone as owner_phone FROM trucks t JOIN users u ON t.owner_id = u.id LEFT JOIN locations cl ON t.current_location_id = cl.id LEFT JOIN locations ol ON u.id = ol.id WHERE t.status = 'available' AND t.is_active = true AND t.capacity >= $1 AND (t.volume_capacity IS NULL OR t.volume_capacity >= $2) ` const trucks = await executeQuery(trucksQuery, [ shipment.weight || 0, shipment.volume || 0 ]) // Get available drivers with their current locations and ratings const driversQuery = ` SELECT d.*, u.name, u.phone, COALESCE(cl.latitude, ol.latitude) as current_lat, COALESCE(cl.longitude, ol.longitude) as current_lng, COALESCE(cl.name, ol.name) as current_location_name, COALESCE(d.rating, 0) as rating, d.total_trips, d.experience_years FROM drivers d JOIN users u ON d.user_id = u.id LEFT JOIN locations cl ON d.current_location_id = cl.id LEFT JOIN locations ol ON u.id = ol.id WHERE d.status = 'available' AND d.is_active = true AND d.license_expiry_date > CURRENT_DATE ` const drivers = await executeQuery(driversQuery, []) // Get historical performance data const performanceData = await getPerformanceData(trucks.map(t => t.id), drivers.map(d => d.id)) // Call Groq API to find optimal matches const matches = await callGroqForLoadMatching(shipment, trucks, drivers, factors, performanceData) // Calculate additional metrics for each match const enhancedMatches = await Promise.all( matches.map(async (match: any) => { const truck = trucks.find(t => t.id === match.truckId) const driver = drivers.find(d => d.id === match.driverId) if (!truck || !driver) return null // Calculate distance from current location to pickup const distance = calculateDistance( driver.current_lat || truck.current_lat, driver.current_lng || truck.current_lng, shipment.origin_lat, shipment.origin_lng ) // Estimate cost based on distance, truck specs, and market rates const estimatedCost = await calculateMatchCost(shipment, truck, driver, distance) // Estimate time to pickup const estimatedTime = Math.round(distance / 60) // Assume 60 km/h average speed return { ...match, truck, driver, distance: Math.round(distance), estimatedCost, estimatedTime: `${Math.floor(estimatedTime / 60)}h ${estimatedTime % 60}m` } }) ) // Filter out null results and sort by score const validMatches = enhancedMatches .filter(match => match !== null) .sort((a, b) => b.score - a.score) .slice(0, maxResults) // Log the matching operation await executeQuery( `INSERT INTO ai_optimization_logs (optimization_type, entity_type, entity_id, input_data, output_data, confidence_score) VALUES ($1, $2, $3, $4, $5, $6)`, [ 'load_matching', 'shipment', shipmentId, JSON.stringify({ shipment, factors, availableTrucks: trucks.length, availableDrivers: drivers.length }), JSON.stringify(validMatches), validMatches.length > 0 ? validMatches[0].score : 0 ] ) return validMatches } catch (error) { console.error("Error finding optimal matches:", error) throw error } } async function callGroqForLoadMatching( shipment: any, trucks: any[], drivers: any[], factors: MatchingFactors, performanceData: any ): Promise { // Prepare the prompt for Groq const factorsText = Object.entries(factors) .filter(([_, value]) => value === true) .map(([key]) => { switch (key) { case "prioritizeProximity": return "Prioritize trucks and drivers that are closest to the shipment origin" case "prioritizeAvailability": return "Prioritize trucks and drivers with the longest availability window" case "prioritizeExperience": return "Prioritize drivers with more experience and higher trip counts" case "prioritizeRating": return "Prioritize drivers with higher customer ratings" case "prioritizeFuelEfficiency": return "Prioritize trucks with better fuel efficiency" case "prioritizeCost": return "Prioritize the most cost-effective combinations" default: return "" } }) .filter((text) => text) .join(". ") const prompt = ` I need to match a shipment with the optimal truck and driver combination. Shipment details: - ID: ${shipment.id} - Weight: ${shipment.weight || 'Not specified'} kg - Volume: ${shipment.volume || 'Not specified'} cubic meters - Priority: ${shipment.priority} - Cargo type: ${shipment.cargo_type || 'General'} - Origin: ${shipment.origin_name} (${shipment.origin_lat}, ${shipment.origin_lng}) - Destination: ${shipment.dest_name} (${shipment.dest_lat}, ${shipment.dest_lng}) - Special requirements: ${[ shipment.fragile && 'Fragile', shipment.hazardous && 'Hazardous', shipment.temperature_controlled && 'Temperature controlled' ].filter(Boolean).join(', ') || 'None'} Available trucks (${trucks.length}): ${trucks.slice(0, 10).map((truck, i) => ` Truck ${i + 1}: - ID: ${truck.id} - Model: ${truck.model} (${truck.year || 'Unknown year'}) - Capacity: ${truck.capacity} kg, Volume: ${truck.volume_capacity || 'N/A'} m³ - Fuel efficiency: ${truck.fuel_efficiency || 'Unknown'} km/L - Current location: ${truck.current_location_name || 'Unknown'} (${truck.current_lat || 'N/A'}, ${truck.current_lng || 'N/A'}) - Owner: ${truck.owner_name} `).join('')} Available drivers (${drivers.length}): ${drivers.slice(0, 10).map((driver, i) => ` Driver ${i + 1}: - ID: ${driver.id} - Name: ${driver.name} - Rating: ${driver.rating || 0}/5 (${driver.total_trips || 0} trips) - Experience: ${driver.experience_years || 'Unknown'} years - Current location: ${driver.current_location_name || 'Unknown'} (${driver.current_lat || 'N/A'}, ${driver.current_lng || 'N/A'}) - Phone: ${driver.phone} `).join('')} ${factorsText ? `Matching priorities: ${factorsText}.` : ''} Please provide the top 5 truck-driver combinations ranked by suitability. Consider: 1. Truck capacity vs shipment requirements 2. Distance from current location to pickup point 3. Driver experience and ratings 4. Fuel efficiency and cost effectiveness 5. Any special requirements (fragile, hazardous, etc.) Format the response as a JSON object with a "matches" array. Each match should have: - truckId: number - driverId: number - score: number (0-100) - explanation: string (brief reason for this match) ` try { const response = await fetch("https://api.groq.com/openai/v1/chat/completions", { method: "POST", headers: { Authorization: `Bearer ${process.env.GROQ_API_KEY}`, "Content-Type": "application/json", }, body: JSON.stringify({ model: "llama3-70b-8192", messages: [ { role: "system", content: "You are a logistics expert specializing in matching shipments with optimal trucks and drivers. Consider all factors including distance, capacity, experience, ratings, and cost efficiency. Always respond with valid JSON.", }, { role: "user", content: prompt, }, ], temperature: 0.3, response_format: { type: "json_object" }, }), }) if (!response.ok) { throw new Error(`Groq API error: ${response.status}`) } const data = await response.json() const result = JSON.parse(data.choices[0].message.content) return result.matches || [] } catch (error) { console.error("Error calling Groq API for load matching:", error) // Fallback to simple matching algorithm return generateFallbackMatches(shipment, trucks, drivers) } } function calculateDistance(lat1: number, lon1: number, lat2: number, lon2: number): number { const R = 6371 // Earth's radius in km const dLat = (lat2 - lat1) * Math.PI / 180 const dLon = (lon2 - lon1) * Math.PI / 180 const a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dLon/2) * Math.sin(dLon/2) const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)) return R * c } async function calculateMatchCost(shipment: any, truck: any, driver: any, distance: number): Promise { try { // Get current pricing rules const pricingRules = await executeQuery( `SELECT * FROM pricing_rules WHERE is_active = true AND effective_from <= CURRENT_DATE AND (effective_to IS NULL OR effective_to >= CURRENT_DATE)` ) let baseCost = 100 // Base cost // Distance cost baseCost += distance * 1.5 // $1.5 per km to pickup // Shipment distance cost (simplified) const shipmentDistance = calculateDistance( shipment.origin_lat, shipment.origin_lng, shipment.dest_lat, shipment.dest_lng ) baseCost += shipmentDistance * 2.0 // $2 per km for delivery // Weight and volume costs if (shipment.weight) baseCost += shipment.weight * 0.5 if (shipment.volume) baseCost += shipment.volume * 10 // Truck efficiency factor if (truck.fuel_efficiency) { const fuelCost = (distance + shipmentDistance) / truck.fuel_efficiency * 1.2 // $1.2 per liter baseCost += fuelCost } // Driver experience premium if (driver.rating > 4.5) baseCost *= 1.1 if (driver.experience_years > 10) baseCost *= 1.05 // Special handling fees if (shipment.fragile) baseCost += 50 if (shipment.hazardous) baseCost += 150 if (shipment.temperature_controlled) baseCost += 100 return Math.round(baseCost) } catch (error) { console.error("Error calculating match cost:", error) return 200 // Default fallback cost } } async function getPerformanceData(truckIds: number[], driverIds: number[]) { try { const performanceQuery = ` SELECT r.truck_id, r.driver_id, AVG(CASE WHEN r.actual_duration <= r.estimated_duration THEN 1 ELSE 0 END) as on_time_rate, AVG(r.fuel_consumption / r.distance) as avg_fuel_efficiency, COUNT(*) as total_routes FROM routes r WHERE r.status = 'completed' AND r.truck_id = ANY($1) AND r.driver_id = ANY($2) AND r.created_at > CURRENT_DATE - INTERVAL '6 months' GROUP BY r.truck_id, r.driver_id ` return await executeQuery(performanceQuery, [truckIds, driverIds]) } catch (error) { console.error("Error fetching performance data:", error) return [] } } function generateFallbackMatches(shipment: any, trucks: any[], drivers: any[]): any[] { // Simple fallback matching based on capacity and proximity const matches = [] for (let i = 0; i < Math.min(5, trucks.length, drivers.length); i++) { const truck = trucks[i] const driver = drivers[i] let score = 70 // Base score // Capacity match if (truck.capacity >= (shipment.weight || 0)) score += 10 if (truck.volume_capacity >= (shipment.volume || 0)) score += 10 // Driver rating if (driver.rating > 4.0) score += 5 if (driver.experience_years > 5) score += 5 matches.push({ truckId: truck.id, driverId: driver.id, score, explanation: `Fallback match based on capacity and availability` }) } return matches.sort((a, b) => b.score - a.score) }131:T6ce,// app/api/ai/load-matching/route.ts import { NextRequest, NextResponse } from "next/server" import { findOptimalMatches } from "@/lib/ai/load-matcher" import { verifyAuth } from "@/lib/auth" import { z } from "zod" const loadMatchingSchema = z.object({ shipment_id: z.number().int().positive(), factors: z.object({ prioritizeProximity: z.boolean().optional(), prioritizeAvailability: z.boolean().optional(), prioritizeExperience: z.boolean().optional(), prioritizeRating: z.boolean().optional(), prioritizeFuelEfficiency: z.boolean().optional(), prioritizeCost: z.boolean().optional() }).optional(), max_results: z.number().int().min(1).max(20).optional() }) export async function POST(request: NextRequest) { try { const { user, error } = await verifyAuth(request) if (!user) { return NextResponse.json({ error: error || "Unauthorized" }, { status: 401 }) } const body = await request.json() // Validate input const validation = loadMatchingSchema.safeParse(body) if (!validation.success) { return NextResponse.json( { error: "Invalid input", details: validation.error.errors }, { status: 400 } ) } const { shipment_id, factors = {}, max_results = 5 } = validation.data // Find optimal matches const matches = await findOptimalMatches(shipment_id, factors, max_results) return NextResponse.json({ success: true, shipment_id, matches, total_matches: matches.length, factors_applied: factors }) } catch (error) { console.error("Error in load matching:", error) return NextResponse.json( { error: "Failed to find optimal matches" }, { status: 500 } ) } }132:T7e0,// app/api/ai/route-optimization/route.ts import { NextRequest, NextResponse } from "next/server" import { optimizeRoute } from "@/lib/ai/route-optimizer" import { verifyAuth } from "@/lib/auth" import { z } from "zod" const routeOptimizationSchema = z.object({ origin_id: z.number().int().positive(), destination_id: z.number().int().positive(), waypoints: z.array(z.number().int().positive()).optional(), factors: z.object({ prioritizeTime: z.boolean().optional(), prioritizeFuel: z.boolean().optional(), avoidTolls: z.boolean().optional(), considerTraffic: z.boolean().optional(), considerWeather: z.boolean().optional() }).optional(), truck_specs: z.object({ fuel_efficiency: z.number().positive(), capacity: z.number().positive(), fuel_type: z.string() }).optional() }) export async function POST(request: NextRequest) { try { const { user, error } = await verifyAuth(request) if (!user) { return NextResponse.json({ error: error || "Unauthorized" }, { status: 401 }) } const body = await request.json() // Validate input const validation = routeOptimizationSchema.safeParse(body) if (!validation.success) { return NextResponse.json( { error: "Invalid input", details: validation.error.errors }, { status: 400 } ) } const { origin_id, destination_id, waypoints = [], factors = {}, truck_specs } = validation.data // Optimize route const optimizedRoute = await optimizeRoute( origin_id, destination_id, waypoints, factors, truck_specs ) return NextResponse.json({ success: true, optimization: optimizedRoute, factors_applied: factors, processing_time: Date.now() // In a real implementation, track actual processing time }) } catch (error) { console.error("Error in route optimization:", error) return NextResponse.json( { error: "Failed to optimize route" }, { status: 500 } ) } }133:T17b1,// app/api/trucks/route.ts import { NextRequest, NextResponse } from "next/server" import { executeQuery } from "@/lib/db" import { verifyAuth } from "@/lib/auth" import { z } from "zod" const createTruckSchema = z.object({ license_plate: z.string().min(3).max(20), model: z.string().min(2).max(100), year: z.number().int().min(1990).max(new Date().getFullYear() + 1).optional(), capacity: z.number().positive(), volume_capacity: z.number().positive().optional(), fuel_type: z.enum(['diesel', 'gasoline', 'electric', 'hybrid']).default('diesel'), fuel_efficiency: z.number().positive().optional(), current_location_id: z.number().int().positive().optional(), specifications: z.record(z.any()).optional(), insurance_expiry: z.string().date().optional(), registration_expiry: z.string().date().optional() }) // Get all trucks export async function GET(request: NextRequest) { try { const { user, error } = await verifyAuth(request) if (!user) { return NextResponse.json({ error: error || "Unauthorized" }, { status: 401 }) } const { searchParams } = new URL(request.url) const status = searchParams.get("status") const page = parseInt(searchParams.get("page") || "1") const limit = parseInt(searchParams.get("limit") || "20") const offset = (page - 1) * limit let query = ` SELECT t.*, l.name as current_location_name, l.city as current_location_city, u.name as owner_name, u.email as owner_email, COUNT(*) OVER() as total_count FROM trucks t JOIN users u ON t.owner_id = u.id LEFT JOIN locations l ON t.current_location_id = l.id ` const params: any[] = [] const conditions: string[] = ["t.is_active = true"] // Role-based filtering if (user.role === 'company') { conditions.push("t.owner_id = $" + (params.length + 1)) params.push(user.id) } else if (user.role === 'individual') { // Individual users can only see their own trucks if they have any conditions.push("t.owner_id = $" + (params.length + 1)) params.push(user.id) } // Carriers and admins can see all trucks if (status) { conditions.push("t.status = $" + (params.length + 1)) params.push(status) } if (conditions.length > 0) { query += " WHERE " + conditions.join(" AND ") } query += ` ORDER BY t.created_at DESC LIMIT $${params.length + 1} OFFSET $${params.length + 2}` params.push(limit, offset) const trucks = await executeQuery(query, params) const totalCount = trucks.length > 0 ? trucks[0].total_count : 0 const totalPages = Math.ceil(totalCount / limit) return NextResponse.json({ trucks: trucks.map(({ total_count, ...truck }) => truck), pagination: { page, limit, totalCount, totalPages, hasNext: page < totalPages, hasPrev: page > 1 } }) } catch (error) { console.error("Error fetching trucks:", error) return NextResponse.json({ error: "Failed to fetch trucks" }, { status: 500 }) } } // Create a new truck export async function POST(request: NextRequest) { try { const { user, error } = await verifyAuth(request) if (!user) { return NextResponse.json({ error: error || "Unauthorized" }, { status: 401 }) } // Only company users and admins can create trucks if (!['company', 'admin'].includes(user.role)) { return NextResponse.json({ error: "Insufficient permissions" }, { status: 403 }) } const body = await request.json() // Validate input const validation = createTruckSchema.safeParse(body) if (!validation.success) { return NextResponse.json( { error: "Invalid input", details: validation.error.errors }, { status: 400 } ) } const truckData = validation.data // Check if truck with license plate already exists const existingTruck = await executeQuery( "SELECT id FROM trucks WHERE license_plate = $1 AND is_active = true", [truckData.license_plate] ) if (existingTruck.length > 0) { return NextResponse.json( { error: "Truck with this license plate already exists" }, { status: 409 } ) } // Verify location exists if provided if (truckData.current_location_id) { const location = await executeQuery( "SELECT id FROM locations WHERE id = $1", [truckData.current_location_id] ) if (location.length === 0) { return NextResponse.json({ error: "Location not found" }, { status: 404 }) } } // Create truck const result = await executeQuery( `INSERT INTO trucks (owner_id, license_plate, model, year, capacity, volume_capacity, fuel_type, fuel_efficiency, current_location_id, specifications, insurance_expiry, registration_expiry) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12) RETURNING *`, [ user.id, truckData.license_plate, truckData.model, truckData.year, truckData.capacity, truckData.volume_capacity, truckData.fuel_type, truckData.fuel_efficiency, truckData.current_location_id, JSON.stringify(truckData.specifications || {}), truckData.insurance_expiry, truckData.registration_expiry ] ) // Get complete truck data with location details const completeTruck = await executeQuery( `SELECT t.*, l.name as current_location_name, l.city as current_location_city, u.name as owner_name, u.email as owner_email FROM trucks t JOIN users u ON t.owner_id = u.id LEFT JOIN locations l ON t.current_location_id = l.id WHERE t.id = $1`, [result[0].id] ) return NextResponse.json(completeTruck[0], { status: 201 }) } catch (error) { console.error("Error creating truck:", error) return NextResponse.json({ error: "Failed to create truck" }, { status: 500 }) } }134:T1d4d,// app/api/drivers/route.ts import { NextRequest, NextResponse } from "next/server" import { executeQuery } from "@/lib/db" import { verifyAuth } from "@/lib/auth" import { z } from "zod" const createDriverSchema = z.object({ user_id: z.number().int().positive(), license_number: z.string().min(5).max(50), license_type: z.string().min(1).max(50), license_expiry_date: z.string().date(), phone_number: z.string().min(10).max(20), emergency_contact: z.object({ name: z.string(), phone: z.string(), relationship: z.string() }).optional(), experience_years: z.number().int().min(0).max(50).optional(), specializations: z.array(z.string()).optional(), certifications: z.array(z.string()).optional(), current_location_id: z.number().int().positive().optional() }) // Get all drivers export async function GET(request: NextRequest) { try { const { user, error } = await verifyAuth(request) if (!user) { return NextResponse.json({ error: error || "Unauthorized" }, { status: 401 }) } const { searchParams } = new URL(request.url) const status = searchParams.get("status") const available_only = searchParams.get("available_only") === "true" const page = parseInt(searchParams.get("page") || "1") const limit = parseInt(searchParams.get("limit") || "20") const offset = (page - 1) * limit let query = ` SELECT d.*, u.name, u.email, u.avatar_url, l.name as current_location_name, l.city as current_location_city, COUNT(*) OVER() as total_count FROM drivers d JOIN users u ON d.user_id = u.id LEFT JOIN locations l ON d.current_location_id = l.id ` const params: any[] = [] const conditions: string[] = ["d.is_active = true"] if (status) { conditions.push("d.status = $" + (params.length + 1)) params.push(status) } if (available_only) { conditions.push("d.status = 'available'") conditions.push("d.license_expiry_date > CURRENT_DATE") } // Role-based filtering if (user.role === 'company') { // Company users can see drivers they manage or have worked with conditions.push(`( d.user_id IN ( SELECT DISTINCT r.driver_id FROM routes r JOIN shipments s ON r.shipment_id = s.id WHERE s.customer_id = $${params.length + 1} ) OR d.user_id = $${params.length + 1} )`) params.push(user.id) } else if (user.role === 'individual') { // Individual users can see drivers from their shipments conditions.push(`d.user_id IN ( SELECT DISTINCT r.driver_id FROM routes r JOIN shipments s ON r.shipment_id = s.id WHERE s.customer_id = $${params.length + 1} )`) params.push(user.id) } if (conditions.length > 0) { query += " WHERE " + conditions.join(" AND ") } query += ` ORDER BY d.rating DESC, d.created_at DESC LIMIT $${params.length + 1} OFFSET $${params.length + 2}` params.push(limit, offset) const drivers = await executeQuery(query, params) const totalCount = drivers.length > 0 ? drivers[0].total_count : 0 const totalPages = Math.ceil(totalCount / limit) return NextResponse.json({ drivers: drivers.map(({ total_count, ...driver }) => driver), pagination: { page, limit, totalCount, totalPages, hasNext: page < totalPages, hasPrev: page > 1 } }) } catch (error) { console.error("Error fetching drivers:", error) return NextResponse.json({ error: "Failed to fetch drivers" }, { status: 500 }) } } // Create a new driver export async function POST(request: NextRequest) { try { const { user, error } = await verifyAuth(request) if (!user) { return NextResponse.json({ error: error || "Unauthorized" }, { status: 401 }) } // Only admins and the user themselves can create driver profiles const body = await request.json() // Validate input const validation = createDriverSchema.safeParse(body) if (!validation.success) { return NextResponse.json( { error: "Invalid input", details: validation.error.errors }, { status: 400 } ) } const driverData = validation.data // Check permissions if (user.role !== 'admin' && user.id !== driverData.user_id) { return NextResponse.json({ error: "Insufficient permissions" }, { status: 403 }) } // Check if user exists and doesn't already have a driver profile const existingUser = await executeQuery( "SELECT id, role FROM users WHERE id = $1", [driverData.user_id] ) if (existingUser.length === 0) { return NextResponse.json({ error: "User not found" }, { status: 404 }) } const existingDriver = await executeQuery( "SELECT id FROM drivers WHERE user_id = $1", [driverData.user_id] ) if (existingDriver.length > 0) { return NextResponse.json( { error: "Driver profile already exists for this user" }, { status: 409 } ) } // Check if license number is unique const existingLicense = await executeQuery( "SELECT id FROM drivers WHERE license_number = $1", [driverData.license_number] ) if (existingLicense.length > 0) { return NextResponse.json( { error: "Driver with this license number already exists" }, { status: 409 } ) } // Verify location exists if provided if (driverData.current_location_id) { const location = await executeQuery( "SELECT id FROM locations WHERE id = $1", [driverData.current_location_id] ) if (location.length === 0) { return NextResponse.json({ error: "Location not found" }, { status: 404 }) } } // Create driver profile const result = await executeQuery( `INSERT INTO drivers (user_id, license_number, license_type, license_expiry_date, phone_number, emergency_contact, experience_years, specializations, certifications, current_location_id) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10) RETURNING *`, [ driverData.user_id, driverData.license_number, driverData.license_type, driverData.license_expiry_date, driverData.phone_number, JSON.stringify(driverData.emergency_contact || {}), driverData.experience_years, JSON.stringify(driverData.specializations || []), JSON.stringify(driverData.certifications || []), driverData.current_location_id ] ) // Update user role to carrier if not already set if (existingUser[0].role === 'individual') { await executeQuery( "UPDATE users SET role = 'carrier' WHERE id = $1", [driverData.user_id] ) } // Get complete driver data with user details const completeDriver = await executeQuery( `SELECT d.*, u.name, u.email, u.avatar_url, l.name as current_location_name, l.city as current_location_city FROM drivers d JOIN users u ON d.user_id = u.id LEFT JOIN locations l ON d.current_location_id = l.id WHERE d.id = $1`, [result[0].id] ) return NextResponse.json(completeDriver[0], { status: 201 }) } catch (error) { console.error("Error creating driver:", error) return NextResponse.json({ error: "Failed to create driver" }, { status: 500 }) } }135:T1507,// app/api/documents/upload/route.ts import { NextRequest, NextResponse } from "next/server" import { verifyAuth } from "@/lib/auth" import { uploadFile, supabaseServer } from "@/lib/supabase-server" import { executeQuery } from "@/lib/db" import { z } from "zod" const MAX_FILE_SIZE = 10 * 1024 * 1024 // 10MB const ALLOWED_FILE_TYPES = [ 'application/pdf', 'image/jpeg', 'image/png', 'image/webp', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ] export async function POST(request: NextRequest) { try { const { user, error } = await verifyAuth(request) if (!user) { return NextResponse.json({ error: error || "Unauthorized" }, { status: 401 }) } const formData = await request.formData() const file = formData.get('file') as File const document_type = formData.get('document_type') as string const title = formData.get('title') as string const description = formData.get('description') as string const shipment_id = formData.get('shipment_id') as string const truck_id = formData.get('truck_id') as string const driver_id = formData.get('driver_id') as string const is_public = formData.get('is_public') === 'true' const tags = formData.get('tags') ? JSON.parse(formData.get('tags') as string) : [] // Validate file if (!file) { return NextResponse.json({ error: "No file provided" }, { status: 400 }) } if (file.size > MAX_FILE_SIZE) { return NextResponse.json({ error: "File size exceeds 10MB limit" }, { status: 400 }) } if (!ALLOWED_FILE_TYPES.includes(file.type)) { return NextResponse.json({ error: "File type not allowed" }, { status: 400 }) } // Validate required fields if (!document_type || !title) { return NextResponse.json({ error: "Document type and title are required" }, { status: 400 }) } // Generate unique file path const timestamp = Date.now() const randomString = Math.random().toString(36).substring(2, 15) const fileExtension = file.name.split('.').pop() const fileName = `${timestamp}-${randomString}.${fileExtension}` const filePath = `documents/${user.id}/${fileName}` // Upload file to Supabase Storage const uploadResult = await uploadFile('documents', filePath, file, { contentType: file.type, metadata: { uploadedBy: user.id.toString(), originalName: file.name, documentType: document_type } }) if (!uploadResult.success) { return NextResponse.json({ error: "Failed to upload file" }, { status: 500 }) } // Save document metadata to database const result = await executeQuery( `INSERT INTO documents (user_id, shipment_id, truck_id, driver_id, document_type, title, description, file_name, file_size, file_type, file_url, storage_path, is_public, tags) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14) RETURNING *`, [ user.id, shipment_id ? parseInt(shipment_id) : null, truck_id ? parseInt(truck_id) : null, driver_id ? parseInt(driver_id) : null, document_type, title, description, file.name, file.size, file.type, uploadResult.data.publicUrl, filePath, is_public, JSON.stringify(tags) ] ) // Process document with AI if it's a PDF or image if (['application/pdf', 'image/jpeg', 'image/png'].includes(file.type)) { // Queue for AI processing (in a real implementation, use a job queue) processDocumentWithAI(result[0].id, uploadResult.data.publicUrl, file.type) .catch(error => console.error("AI processing error:", error)) } return NextResponse.json(result[0], { status: 201 }) } catch (error) { console.error("Error uploading document:", error) return NextResponse.json({ error: "Failed to upload document" }, { status: 500 }) } } // AI Document Processing (simplified) async function processDocumentWithAI(documentId: number, fileUrl: string, fileType: string) { try { // In a real implementation, you would: // 1. Use OCR to extract text from images/PDFs // 2. Use AI to analyze and categorize the content // 3. Extract structured data (dates, amounts, addresses, etc.) // For now, we'll simulate AI processing await new Promise(resolve => setTimeout(resolve, 2000)) // Simulate processing time const mockExtractedData = { text_content: "Sample extracted text content", entities: { dates: ["2024-03-15"], amounts: ["$1,250.00"], addresses: ["123 Main St, Casablanca, Morocco"], phone_numbers: ["+212-123-456-789"] }, document_classification: "invoice", confidence_score: 0.92 } // Update document with AI-extracted data await executeQuery( `UPDATE documents SET ai_processed = true, ai_extracted_data = $1, updated_at = CURRENT_TIMESTAMP WHERE id = $2`, [JSON.stringify(mockExtractedData), documentId] ) console.log(`Document ${documentId} processed with AI`) } catch (error) { console.error(`Error processing document ${documentId} with AI:`, error) } }136:Tc45,// app/api/documents/route.ts import { NextRequest, NextResponse } from "next/server" import { executeQuery } from "@/lib/db" import { verifyAuth } from "@/lib/auth" // Get all documents export async function GET(request: NextRequest) { try { const { user, error } = await verifyAuth(request) if (!user) { return NextResponse.json({ error: error || "Unauthorized" }, { status: 401 }) } const { searchParams } = new URL(request.url) const document_type = searchParams.get("document_type") const shipment_id = searchParams.get("shipment_id") const truck_id = searchParams.get("truck_id") const driver_id = searchParams.get("driver_id") const search = searchParams.get("search") const page = parseInt(searchParams.get("page") || "1") const limit = parseInt(searchParams.get("limit") || "20") const offset = (page - 1) * limit let query = ` SELECT d.*, u.name as uploaded_by_name, s.tracking_number as shipment_tracking, t.license_plate as truck_license, dr.license_number as driver_license, COUNT(*) OVER() as total_count FROM documents d JOIN users u ON d.user_id = u.id LEFT JOIN shipments s ON d.shipment_id = s.id LEFT JOIN trucks t ON d.truck_id = t.id LEFT JOIN drivers dr ON d.driver_id = dr.id ` const params: any[] = [] const conditions: string[] = [] // Role-based access control if (user.role !== 'admin') { conditions.push(`(d.user_id = $${params.length + 1} OR d.is_public = true)`) params.push(user.id) } if (document_type) { conditions.push(`d.document_type = $${params.length + 1}`) params.push(document_type) } if (shipment_id) { conditions.push(`d.shipment_id = $${params.length + 1}`) params.push(parseInt(shipment_id)) } if (truck_id) { conditions.push(`d.truck_id = $${params.length + 1}`) params.push(parseInt(truck_id)) } if (driver_id) { conditions.push(`d.driver_id = $${params.length + 1}`) params.push(parseInt(driver_id)) } if (search) { conditions.push(`(d.title ILIKE $${params.length + 1} OR d.description ILIKE $${params.length + 1})`) params.push(`%${search}%`) } if (conditions.length > 0) { query += " WHERE " + conditions.join(" AND ") } query += ` ORDER BY d.created_at DESC LIMIT $${params.length + 1} OFFSET $${params.length + 2}` params.push(limit, offset) const documents = await executeQuery(query, params) const totalCount = documents.length > 0 ? documents[0].total_count : 0 const totalPages = Math.ceil(totalCount / limit) return NextResponse.json({ documents: documents.map(({ total_count, ...doc }) => doc), pagination: { page, limit, totalCount, totalPages, hasNext: page < totalPages, hasPrev: page > 1 } }) } catch (error) { console.error("Error fetching documents:", error) return NextResponse.json({ error: "Failed to fetch documents" }, { status: 500 }) } }137:T975,// lib/websocket-server.ts import { Server } from 'socket.io' import { verifyToken } from './auth' let io: Server | null = null export function initializeWebSocket(server: any) { io = new Server(server, { cors: { origin: process.env.FRONTEND_URL || "http://localhost:3000", methods: ["GET", "POST"] } }) io.use(async (socket, next) => { try { const token = socket.handshake.auth.token const decoded = verifyToken(token) if (!decoded) { return next(new Error('Authentication error')) } socket.userId = decoded.id socket.userRole = decoded.role next() } catch (error) { next(new Error('Authentication error')) } }) io.on('connection', (socket) => { console.log(`User ${socket.userId} connected`) // Join user-specific room socket.join(`user:${socket.userId}`) // Join role-specific rooms socket.join(`role:${socket.userRole}`) // Handle shipment tracking subscription socket.on('subscribe:shipment', (shipmentId) => { socket.join(`shipment:${shipmentId}`) }) // Handle route tracking subscription socket.on('subscribe:route', (routeId) => { socket.join(`route:${routeId}`) }) // Handle fleet tracking subscription (for company users) socket.on('subscribe:fleet', () => { if (socket.userRole === 'company') { socket.join(`fleet:${socket.userId}`) } }) socket.on('disconnect', () => { console.log(`User ${socket.userId} disconnected`) }) }) return io } export function getWebSocketServer() { return io } // Broadcast tracking update export function broadcastTrackingUpdate(shipmentId: number, update: any) { if (io) { io.to(`shipment:${shipmentId}`).emit('tracking:update', { shipmentId, update, timestamp: new Date().toISOString() }) } } // Broadcast shipment status change export function broadcastShipmentStatusChange(shipmentId: number, status: string, customerId: number) { if (io) { io.to(`user:${customerId}`).emit('shipment:status_change', { shipmentId, status, timestamp: new Date().toISOString() }) } } // Broadcast new shipment to carriers export function broadcastNewShipment(shipment: any) { if (io) { io.to('role:carrier').emit('shipment:new', { shipment, timestamp: new Date().toISOString() }) } }138:Tb55,// app/api/events/tracking/[shipmentId]/route.ts import { NextRequest, NextResponse } from "next/server" import { verifyAuth } from "@/lib/auth" import { executeQuery } from "@/lib/db" export async function GET(request: NextRequest, { params }: { params: { shipmentId: string } }) { try { const { user, error } = await verifyAuth(request) if (!user) { return new NextResponse("Unauthorized", { status: 401 }) } const shipmentId = params.shipmentId // Verify user has access to this shipment let accessQuery = "SELECT id FROM shipments WHERE id = $1" const accessParams = [shipmentId] if (user.role === 'individual' || user.role === 'company') { accessQuery += " AND customer_id = $2" accessParams.push(user.id) } const shipmentAccess = await executeQuery(accessQuery, accessParams) if (shipmentAccess.length === 0) { return new NextResponse("Shipment not found", { status: 404 }) } // Set up Server-Sent Events const stream = new ReadableStream({ start(controller) { // Send initial connection message controller.enqueue(`data: ${JSON.stringify({ type: 'connected', shipmentId, timestamp: new Date().toISOString() })}\n\n`) // Set up interval to send updates const interval = setInterval(async () => { try { // Get latest tracking update const latestUpdate = await executeQuery( `SELECT * FROM tracking_updates WHERE shipment_id = $1 ORDER BY recorded_at DESC LIMIT 1`, [shipmentId] ) if (latestUpdate.length > 0) { controller.enqueue(`data: ${JSON.stringify({ type: 'tracking_update', data: latestUpdate[0], timestamp: new Date().toISOString() })}\n\n`) } // Send heartbeat controller.enqueue(`data: ${JSON.stringify({ type: 'heartbeat', timestamp: new Date().toISOString() })}\n\n`) } catch (error) { console.error("Error sending SSE update:", error) } }, 10000) // Send updates every 10 seconds // Clean up on close request.signal.addEventListener('abort', () => { clearInterval(interval) controller.close() }) } }) return new NextResponse(stream, { headers: { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive', 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Headers': 'Cache-Control' } }) } catch (error) { console.error("Error setting up SSE:", error) return new NextResponse("Internal Server Error", { status: 500 }) } }139:T597,// app/api/analytics/dashboard/route.ts import# MarocTransit Backend Development Guide - Complete Step-by-Step Implementation ## Project Overview MarocTransit backend is a comprehensive logistics platform API built with Next.js 14 App Router, featuring AI-powered tools, real-time tracking, and multi-database architecture. This guide provides step-by-step instructions for implementing all backend features. ## Technology Stack - **Framework**: Next.js 14 with App Router - **Database**: Neon PostgreSQL (primary) + Supabase (auth & storage) - **AI**: Groq API for intelligent matching and optimization - **Authentication**: Custom JWT + Supabase Auth - **File Storage**: Supabase Storage - **Real-time**: Server-Sent Events + WebSockets - **Validation**: Zod schemas - **ORM**: Raw SQL with Neon serverless driver ## Step 1: Project Setup and Database Configuration ### 1.1 Environment Variables Setup ```bash # .env.local # Neon Database DATABASE_URL="postgresql://username:password@host/database" NEON_DATABASE_URL="postgresql://username:password@host/database" # Supabase SUPABASE_URL="https://your-project.supabase.co" SUPABASE_ANON_KEY="your-anon-key" SUPABASE_SERVICE_ROLE_KEY="your-service-role-key" # Groq AI GROQ_API_KEY="your-groq-api-key" # JWT JWT_SECRET="your-jwt-secret" NEXTAUTH_SECRET="your-nextauth-secret" # External APIs GOOGLE_MAPS_API_KEY="your-google-maps-key" WEATHER_API_KEY="your-weather-api-key"13a:T3957,-- db-schema.sql -- Users table (main user management) CREATE TABLE users ( id SERIAL PRIMARY KEY, name VARCHAR(255) NOT NULL, email VARCHAR(255) UNIQUE NOT NULL, password_hash VARCHAR(255) NOT NULL, role VARCHAR(50) NOT NULL DEFAULT 'individual' CHECK (role IN ('individual', 'carrier', 'company', 'admin')), phone VARCHAR(20), avatar_url TEXT, company_name VARCHAR(255), company_size VARCHAR(50), verification_status VARCHAR(50) DEFAULT 'pending' CHECK (verification_status IN ('pending', 'verified', 'rejected')), is_active BOOLEAN DEFAULT true, last_login TIMESTAMP, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- User profiles for additional information CREATE TABLE user_profiles ( id SERIAL PRIMARY KEY, user_id INTEGER REFERENCES users(id) ON DELETE CASCADE, address TEXT, city VARCHAR(100), state VARCHAR(100), country VARCHAR(100) DEFAULT 'Morocco', postal_code VARCHAR(20), tax_id VARCHAR(50), business_license VARCHAR(100), insurance_info JSONB, preferences JSONB DEFAULT '{}', created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Locations table CREATE TABLE locations ( id SERIAL PRIMARY KEY, name VARCHAR(255) NOT NULL, address TEXT NOT NULL, city VARCHAR(100) NOT NULL, state VARCHAR(100), country VARCHAR(100) NOT NULL DEFAULT 'Morocco', postal_code VARCHAR(20), latitude DECIMAL(10, 8), longitude DECIMAL(11, 8), location_type VARCHAR(50) DEFAULT 'warehouse' CHECK (location_type IN ('warehouse', 'distribution_center', 'port', 'airport', 'customer_location', 'pickup_point')), contact_info JSONB, operating_hours JSONB, facilities JSONB DEFAULT '[]', is_active BOOLEAN DEFAULT true, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Trucks table CREATE TABLE trucks ( id SERIAL PRIMARY KEY, owner_id INTEGER REFERENCES users(id) ON DELETE CASCADE, license_plate VARCHAR(20) UNIQUE NOT NULL, model VARCHAR(100) NOT NULL, year INTEGER, capacity DECIMAL(10, 2) NOT NULL, -- in kg volume_capacity DECIMAL(10, 2), -- in cubic meters fuel_type VARCHAR(50) DEFAULT 'diesel' CHECK (fuel_type IN ('diesel', 'gasoline', 'electric', 'hybrid')), fuel_efficiency DECIMAL(5, 2), -- km per liter status VARCHAR(50) DEFAULT 'available' CHECK (status IN ('available', 'assigned', 'in_transit', 'maintenance', 'out_of_service')), current_location_id INTEGER REFERENCES locations(id), last_maintenance_date DATE, next_maintenance_date DATE, maintenance_interval_km INTEGER DEFAULT 10000, current_mileage INTEGER DEFAULT 0, insurance_expiry DATE, registration_expiry DATE, specifications JSONB DEFAULT '{}', documents JSONB DEFAULT '[]', is_active BOOLEAN DEFAULT true, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Drivers table CREATE TABLE drivers ( id SERIAL PRIMARY KEY, user_id INTEGER REFERENCES users(id) ON DELETE CASCADE, license_number VARCHAR(50) UNIQUE NOT NULL, license_type VARCHAR(50) NOT NULL, license_expiry_date DATE NOT NULL, phone_number VARCHAR(20) NOT NULL, emergency_contact JSONB, status VARCHAR(50) DEFAULT 'available' CHECK (status IN ('available', 'assigned', 'on_route', 'off_duty', 'suspended')), rating DECIMAL(3, 2) DEFAULT 0.00, total_trips INTEGER DEFAULT 0, total_distance INTEGER DEFAULT 0, experience_years INTEGER, specializations JSONB DEFAULT '[]', certifications JSONB DEFAULT '[]', current_location_id INTEGER REFERENCES locations(id), preferred_routes JSONB DEFAULT '[]', availability_schedule JSONB DEFAULT '{}', is_active BOOLEAN DEFAULT true, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Shipments table CREATE TABLE shipments ( id SERIAL PRIMARY KEY, tracking_number VARCHAR(50) UNIQUE NOT NULL, customer_id INTEGER REFERENCES users(id) ON DELETE CASCADE, origin_id INTEGER REFERENCES locations(id) NOT NULL, destination_id INTEGER REFERENCES locations(id) NOT NULL, status VARCHAR(50) DEFAULT 'pending' CHECK (status IN ('pending', 'confirmed', 'picked_up', 'in_transit', 'out_for_delivery', 'delivered', 'cancelled', 'delayed')), priority VARCHAR(20) DEFAULT 'medium' CHECK (priority IN ('low', 'medium', 'high', 'urgent')), cargo_type VARCHAR(100), cargo_description TEXT, weight DECIMAL(10, 2), -- in kg volume DECIMAL(10, 2), -- in cubic meters value DECIMAL(12, 2), -- cargo value for insurance special_instructions TEXT, pickup_instructions TEXT, delivery_instructions TEXT, scheduled_pickup TIMESTAMP, scheduled_delivery TIMESTAMP, actual_pickup TIMESTAMP, actual_delivery TIMESTAMP, estimated_cost DECIMAL(10, 2), final_cost DECIMAL(10, 2), payment_status VARCHAR(50) DEFAULT 'pending' CHECK (payment_status IN ('pending', 'paid', 'partial', 'refunded')), insurance_required BOOLEAN DEFAULT false, requires_signature BOOLEAN DEFAULT false, fragile BOOLEAN DEFAULT false, hazardous BOOLEAN DEFAULT false, temperature_controlled BOOLEAN DEFAULT false, temperature_range JSONB, documents JSONB DEFAULT '[]', photos JSONB DEFAULT '[]', ai_optimized BOOLEAN DEFAULT false, ai_savings DECIMAL(10, 2) DEFAULT 0, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Routes table CREATE TABLE routes ( id SERIAL PRIMARY KEY, shipment_id INTEGER REFERENCES shipments(id) ON DELETE CASCADE, truck_id INTEGER REFERENCES trucks(id), driver_id INTEGER REFERENCES drivers(id), route_name VARCHAR(255), status VARCHAR(50) DEFAULT 'planned' CHECK (status IN ('planned', 'in_progress', 'completed', 'cancelled')), start_time TIMESTAMP, end_time TIMESTAMP, estimated_duration INTEGER, -- in minutes actual_duration INTEGER, -- in minutes distance DECIMAL(10, 2), -- in km estimated_cost DECIMAL(10, 2), actual_cost DECIMAL(10, 2), fuel_consumption DECIMAL(8, 2), -- in liters toll_costs DECIMAL(8, 2), route_optimization_data JSONB, traffic_conditions JSONB, weather_conditions JSONB, ai_optimized BOOLEAN DEFAULT false, optimization_savings DECIMAL(10, 2) DEFAULT 0, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Route waypoints for detailed route tracking CREATE TABLE route_waypoints ( id SERIAL PRIMARY KEY, route_id INTEGER REFERENCES routes(id) ON DELETE CASCADE, location_id INTEGER REFERENCES locations(id), sequence_number INTEGER NOT NULL, waypoint_type VARCHAR(50) DEFAULT 'stop' CHECK (waypoint_type IN ('origin', 'waypoint', 'destination', 'fuel_stop', 'rest_stop')), estimated_arrival TIMESTAMP, actual_arrival TIMESTAMP, estimated_departure TIMESTAMP, actual_departure TIMESTAMP, notes TEXT, completed BOOLEAN DEFAULT false, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Real-time tracking data CREATE TABLE tracking_updates ( id SERIAL PRIMARY KEY, shipment_id INTEGER REFERENCES shipments(id) ON DELETE CASCADE, route_id INTEGER REFERENCES routes(id), latitude DECIMAL(10, 8), longitude DECIMAL(11, 8), speed DECIMAL(5, 2), -- km/h heading DECIMAL(5, 2), -- degrees altitude DECIMAL(8, 2), -- meters accuracy DECIMAL(5, 2), -- meters battery_level INTEGER, -- percentage signal_strength INTEGER, -- percentage status_message TEXT, event_type VARCHAR(50) DEFAULT 'location_update' CHECK (event_type IN ('location_update', 'pickup', 'delivery', 'delay', 'incident', 'fuel_stop', 'rest_break')), metadata JSONB DEFAULT '{}', recorded_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Maintenance records CREATE TABLE maintenance_records ( id SERIAL PRIMARY KEY, truck_id INTEGER REFERENCES trucks(id) ON DELETE CASCADE, maintenance_type VARCHAR(100) NOT NULL, description TEXT, scheduled_date DATE, completed_date DATE, cost DECIMAL(10, 2), mileage_at_service INTEGER, service_provider VARCHAR(255), parts_replaced JSONB DEFAULT '[]', next_service_due INTEGER, -- mileage status VARCHAR(50) DEFAULT 'scheduled' CHECK (status IN ('scheduled', 'in_progress', 'completed', 'cancelled')), priority VARCHAR(20) DEFAULT 'medium' CHECK (priority IN ('low', 'medium', 'high', 'critical')), ai_predicted BOOLEAN DEFAULT false, prediction_accuracy DECIMAL(5, 2), created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- AI optimization logs CREATE TABLE ai_optimization_logs ( id SERIAL PRIMARY KEY, optimization_type VARCHAR(50) NOT NULL CHECK (optimization_type IN ('route', 'load_matching', 'maintenance_prediction', 'demand_forecasting')), entity_type VARCHAR(50) NOT NULL CHECK (entity_type IN ('shipment', 'route', 'truck', 'driver')), entity_id INTEGER NOT NULL, input_data JSONB NOT NULL, output_data JSONB NOT NULL, confidence_score DECIMAL(5, 2), processing_time INTEGER, -- milliseconds cost_savings DECIMAL(10, 2), time_savings INTEGER, -- minutes fuel_savings DECIMAL(8, 2), -- liters success BOOLEAN DEFAULT true, error_message TEXT, ai_model_version VARCHAR(50), created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Documents table for file management CREATE TABLE documents ( id SERIAL PRIMARY KEY, user_id INTEGER REFERENCES users(id) ON DELETE CASCADE, shipment_id INTEGER REFERENCES shipments(id) ON DELETE SET NULL, truck_id INTEGER REFERENCES trucks(id) ON DELETE SET NULL, driver_id INTEGER REFERENCES drivers(id) ON DELETE SET NULL, document_type VARCHAR(100) NOT NULL, title VARCHAR(255) NOT NULL, description TEXT, file_name VARCHAR(255) NOT NULL, file_size INTEGER, file_type VARCHAR(100), file_url TEXT NOT NULL, storage_path TEXT, is_public BOOLEAN DEFAULT false, expiry_date DATE, ai_processed BOOLEAN DEFAULT false, ai_extracted_data JSONB, tags JSONB DEFAULT '[]', version INTEGER DEFAULT 1, parent_document_id INTEGER REFERENCES documents(id), created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Messages and notifications CREATE TABLE messages ( id SERIAL PRIMARY KEY, sender_id INTEGER REFERENCES users(id) ON DELETE CASCADE, recipient_id INTEGER REFERENCES users(id) ON DELETE CASCADE, shipment_id INTEGER REFERENCES shipments(id) ON DELETE SET NULL, message_type VARCHAR(50) DEFAULT 'direct' CHECK (message_type IN ('direct', 'system', 'notification', 'ai_assistant')), subject VARCHAR(255), content TEXT NOT NULL, attachments JSONB DEFAULT '[]', is_read BOOLEAN DEFAULT false, is_urgent BOOLEAN DEFAULT false, read_at TIMESTAMP, reply_to INTEGER REFERENCES messages(id), created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- System notifications CREATE TABLE notifications ( id SERIAL PRIMARY KEY, user_id INTEGER REFERENCES users(id) ON DELETE CASCADE, notification_type VARCHAR(100) NOT NULL, title VARCHAR(255) NOT NULL, message TEXT NOT NULL, data JSONB DEFAULT '{}', is_read BOOLEAN DEFAULT false, is_urgent BOOLEAN DEFAULT false, action_url TEXT, expires_at TIMESTAMP, read_at TIMESTAMP, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Analytics and reporting CREATE TABLE analytics_events ( id SERIAL PRIMARY KEY, user_id INTEGER REFERENCES users(id) ON DELETE SET NULL, event_type VARCHAR(100) NOT NULL, event_name VARCHAR(255) NOT NULL, properties JSONB DEFAULT '{}', session_id VARCHAR(255), ip_address INET, user_agent TEXT, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Pricing and billing CREATE TABLE pricing_rules ( id SERIAL PRIMARY KEY, rule_name VARCHAR(255) NOT NULL, rule_type VARCHAR(50) NOT NULL CHECK (rule_type IN ('distance', 'weight', 'volume', 'time', 'fuel', 'special')), base_rate DECIMAL(10, 4) NOT NULL, unit VARCHAR(50) NOT NULL, min_charge DECIMAL(10, 2), max_charge DECIMAL(10, 2), conditions JSONB DEFAULT '{}', is_active BOOLEAN DEFAULT true, effective_from DATE NOT NULL, effective_to DATE, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Invoices and payments CREATE TABLE invoices ( id SERIAL PRIMARY KEY, invoice_number VARCHAR(50) UNIQUE NOT NULL, customer_id INTEGER REFERENCES users(id) ON DELETE CASCADE, shipment_id INTEGER REFERENCES shipments(id) ON DELETE SET NULL, amount DECIMAL(12, 2) NOT NULL, tax_amount DECIMAL(12, 2) DEFAULT 0, total_amount DECIMAL(12, 2) NOT NULL, currency VARCHAR(3) DEFAULT 'MAD', status VARCHAR(50) DEFAULT 'pending' CHECK (status IN ('pending', 'sent', 'paid', 'overdue', 'cancelled')), due_date DATE NOT NULL, paid_date DATE, payment_method VARCHAR(50), payment_reference VARCHAR(255), line_items JSONB NOT NULL, notes TEXT, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Create indexes for better performance CREATE INDEX idx_users_email ON users(email); CREATE INDEX idx_users_role ON users(role); CREATE INDEX idx_shipments_tracking_number ON shipments(tracking_number); CREATE INDEX idx_shipments_customer_id ON shipments(customer_id); CREATE INDEX idx_shipments_status ON shipments(status); CREATE INDEX idx_routes_shipment_id ON routes(shipment_id); CREATE INDEX idx_routes_truck_id ON routes(truck_id); CREATE INDEX idx_routes_driver_id ON routes(driver_id); CREATE INDEX idx_tracking_updates_shipment_id ON tracking_updates(shipment_id); CREATE INDEX idx_tracking_updates_recorded_at ON tracking_updates(recorded_at); CREATE INDEX idx_trucks_owner_id ON trucks(owner_id); CREATE INDEX idx_trucks_status ON trucks(status); CREATE INDEX idx_drivers_user_id ON drivers(user_id); CREATE INDEX idx_drivers_status ON drivers(status); CREATE INDEX idx_locations_city ON locations(city); CREATE INDEX idx_locations_country ON locations(country); CREATE INDEX idx_documents_user_id ON documents(user_id); CREATE INDEX idx_messages_recipient_id ON messages(recipient_id); CREATE INDEX idx_notifications_user_id ON notifications(user_id);13b:T51f,// lib/db.ts import { neon } from "@neondatabase/serverless" // Create a SQL query executor using the Neon serverless driver const sql = neon(process.env.DATABASE_URL!) export async function executeQuery(query: string, params: any[] = []) { try { const result = await sql(query, params) return result } catch (error) { console.error("Database query error:", error) throw error } } // Helper function for transactions export async function executeTransaction(queries: { query: string; params: any[] }[]) { try { // Note: Neon doesn't support explicit transactions in serverless mode // We'll execute queries sequentially and handle rollback manually if needed const results = [] for (const { query, params } of queries) { const result = await sql(query, params) results.push(result) } return results } catch (error) { console.error("Transaction error:", error) throw error } } // Database health check export async function checkDatabaseConnection() { try { await sql`SELECT 1` return { status: 'connected', timestamp: new Date().toISOString() } } catch (error) { console.error("Database connection error:", error) return { status: 'error', error: error.message, timestamp: new Date().toISOString() } } }13c:T647,// lib/supabase-server.ts import { createClient } from "@supabase/supabase-js" // Create a single supabase client for server-side operations const supabaseUrl = process.env.SUPABASE_URL! const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY! export const supabaseServer = createClient(supabaseUrl, supabaseServiceKey, { auth: { autoRefreshToken: false, persistSession: false } }) // File upload helper export async function uploadFile( bucket: string, path: string, file: File | Buffer, options?: { contentType?: string metadata?: Record } ) { try { const { data, error } = await supabaseServer.storage .from(bucket) .upload(path, file, { contentType: options?.contentType, metadata: options?.metadata, upsert: true }) if (error) throw error // Get public URL const { data: urlData } = supabaseServer.storage .from(bucket) .getPublicUrl(path) return { success: true, data: { ...data, publicUrl: urlData.publicUrl } } } catch (error) { console.error("File upload error:", error) return { success: false, error: error.message } } } // File deletion helper export async function deleteFile(bucket: string, path: string) { try { const { error } = await supabaseServer.storage .from(bucket) .remove([path]) if (error) throw error return { success: true } } catch (error) { console.error("File deletion error:", error) return { success: false, error: error.message } } }13d:T14df,// lib/auth.ts import bcrypt from "bcryptjs" import jwt from "jsonwebtoken" import { executeQuery } from "./db" export interface User { id: number name: string email: string role: 'individual' | 'carrier' | 'company' | 'admin' phone?: string avatar_url?: string company_name?: string verification_status: 'pending' | 'verified' | 'rejected' is_active: boolean } export interface AuthResult { success: boolean user?: User token?: string error?: string } // Hash password export async function hashPassword(password: string): Promise { const salt = await bcrypt.genSalt(12) return bcrypt.hash(password, salt) } // Verify password export async function verifyPassword(password: string, hash: string): Promise { return bcrypt.compare(password, hash) } // Generate JWT token export function generateToken(user: User): string { return jwt.sign( { id: user.id, email: user.email, role: user.role }, process.env.JWT_SECRET!, { expiresIn: '7d' } ) } // Verify JWT token export function verifyToken(token: string): any { try { return jwt.verify(token, process.env.JWT_SECRET!) } catch (error) { return null } } // Get user by email export async function getUserByEmail(email: string): Promise { try { const users = await executeQuery( "SELECT id, name, email, role, phone, avatar_url, company_name, verification_status, is_active FROM users WHERE email = $1 AND is_active = true", [email] ) return users.length > 0 ? users[0] : null } catch (error) { console.error("Error getting user by email:", error) return null } } // Get user by ID export async function getUserById(id: number): Promise { try { const users = await executeQuery( "SELECT id, name, email, role, phone, avatar_url, company_name, verification_status, is_active FROM users WHERE id = $1 AND is_active = true", [id] ) return users.length > 0 ? users[0] : null } catch (error) { console.error("Error getting user by ID:", error) return null } } // Create new user export async function createUser(userData: { name: string email: string password: string role?: string phone?: string company_name?: string }): Promise { try { // Check if user already exists const existingUser = await getUserByEmail(userData.email) if (existingUser) { return { success: false, error: "User with this email already exists" } } // Hash password const passwordHash = await hashPassword(userData.password) // Create user const result = await executeQuery( `INSERT INTO users (name, email, password_hash, role, phone, company_name) VALUES ($1, $2, $3, $4, $5, $6) RETURNING id, name, email, role, phone, avatar_url, company_name, verification_status, is_active`, [ userData.name, userData.email, passwordHash, userData.role || 'individual', userData.phone, userData.company_name ] ) const user = result[0] const token = generateToken(user) return { success: true, user, token } } catch (error) { console.error("Error creating user:", error) return { success: false, error: "Failed to create user" } } } // Authenticate user export async function authenticateUser(email: string, password: string): Promise { try { // Get user with password hash const users = await executeQuery( "SELECT id, name, email, password_hash, role, phone, avatar_url, company_name, verification_status, is_active FROM users WHERE email = $1 AND is_active = true", [email] ) if (users.length === 0) { return { success: false, error: "Invalid credentials" } } const user = users[0] // Verify password const isValidPassword = await verifyPassword(password, user.password_hash) if (!isValidPassword) { return { success: false, error: "Invalid credentials" } } // Update last login await executeQuery( "UPDATE users SET last_login = CURRENT_TIMESTAMP WHERE id = $1", [user.id] ) // Remove password hash from user object const { password_hash, ...userWithoutPassword } = user const token = generateToken(userWithoutPassword) return { success: true, user: userWithoutPassword, token } } catch (error) { console.error("Error authenticating user:", error) return { success: false, error: "Authentication failed" } } } // Middleware to verify authentication export async function verifyAuth(request: Request): Promise<{ user: User | null; error?: string }> { try { const authHeader = request.headers.get('authorization') if (!authHeader || !authHeader.startsWith('Bearer ')) { return { user: null, error: "No valid authorization header" } } const token = authHeader.substring(7) const decoded = verifyToken(token) if (!decoded) { return { user: null, error: "Invalid token" } } const user = await getUserById(decoded.id) if (!user) { return { user: null, error: "User not found" } } return { user } } catch (error) { console.error("Auth verification error:", error) return { user: null, error: "Authentication failed" } } }13e:T5ee,// app/api/auth/login/route.ts import { NextRequest, NextResponse } from "next/server" import { authenticateUser } from "@/lib/auth" import { z } from "zod" const loginSchema = z.object({ email: z.string().email("Invalid email format"), password: z.string().min(6, "Password must be at least 6 characters") }) export async function POST(request: NextRequest) { try { const body = await request.json() // Validate input const validation = loginSchema.safeParse(body) if (!validation.success) { return NextResponse.json( { error: "Invalid input", details: validation.error.errors }, { status: 400 } ) } const { email, password } = validation.data // Authenticate user const result = await authenticateUser(email, password) if (!result.success) { return NextResponse.json( { error: result.error }, { status: 401 } ) } // Set HTTP-only cookie for additional security const response = NextResponse.json({ success: true, user: result.user, token: result.token }) response.cookies.set({ name: "auth-token", value: result.token!, httpOnly: true, secure: process.env.NODE_ENV === "production", sameSite: "strict", maxAge: 60 * 60 * 24 * 7 // 7 days }) return response } catch (error) { console.error("Login error:", error) return NextResponse.json( { error: "Internal server error" }, { status: 500 } ) } }13f:T690,// app/api/auth/signup/route.ts import { NextRequest, NextResponse } from "next/server" import { createUser } from "@/lib/auth" import { z } from "zod" const signupSchema = z.object({ name: z.string().min(2, "Name must be at least 2 characters"), email: z.string().email("Invalid email format"), password: z.string().min(6, "Password must be at least 6 characters"), role: z.enum(['individual', 'carrier', 'company']).optional(), phone: z.string().optional(), company_name: z.string().optional() }) export async function POST(request: NextRequest) { try { const body = await request.json() // Validate input const validation = signupSchema.safeParse(body) if (!validation.success) { return NextResponse.json( { error: "Invalid input", details: validation.error.errors }, { status: 400 } ) } const userData = validation.data // Create user const result = await createUser(userData) if (!result.success) { return NextResponse.json( { error: result.error }, { status: 400 } ) } // Set HTTP-only cookie const response = NextResponse.json({ success: true, user: result.user, token: result.token }, { status: 201 }) response.cookies.set({ name: "auth-token", value: result.token!, httpOnly: true, secure: process.env.NODE_ENV === "production", sameSite: "strict", maxAge: 60 * 60 * 24 * 7 // 7 days }) return response } catch (error) { console.error("Signup error:", error) return NextResponse.json( { error: "Internal server error" }, { status: 500 } ) } }140:T2345,// app/api/shipments/route.ts import { NextRequest, NextResponse } from "next/server" import { executeQuery } from "@/lib/db" import { verifyAuth } from "@/lib/auth" import { z } from "zod" const createShipmentSchema = z.object({ origin_id: z.number().int().positive(), destination_id: z.number().int().positive(), cargo_type: z.string().optional(), cargo_description: z.string().optional(), weight: z.number().positive().optional(), volume: z.number().positive().optional(), value: z.number().positive().optional(), priority: z.enum(['low', 'medium', 'high', 'urgent']).default('medium'), scheduled_pickup: z.string().datetime().optional(), scheduled_delivery: z.string().datetime().optional(), special_instructions: z.string().optional(), pickup_instructions: z.string().optional(), delivery_instructions: z.string().optional(), insurance_required: z.boolean().default(false), requires_signature: z.boolean().default(false), fragile: z.boolean().default(false), hazardous: z.boolean().default(false), temperature_controlled: z.boolean().default(false), temperature_range: z.object({ min: z.number(), max: z.number() }).optional() }) // Get all shipments export async function GET(request: NextRequest) { try { const { user, error } = await verifyAuth(request) if (!user) { return NextResponse.json({ error: error || "Unauthorized" }, { status: 401 }) } const { searchParams } = new URL(request.url) const status = searchParams.get("status") const priority = searchParams.get("priority") const page = parseInt(searchParams.get("page") || "1") const limit = parseInt(searchParams.get("limit") || "20") const offset = (page - 1) * limit let query = ` SELECT s.*, o.name as origin_name, o.address as origin_address, o.city as origin_city, o.country as origin_country, d.name as destination_name, d.address as destination_address, d.city as destination_city, d.country as destination_country, u.name as customer_name, u.email as customer_email, COUNT(*) OVER() as total_count FROM shipments s JOIN locations o ON s.origin_id = o.id JOIN locations d ON s.destination_id = d.id JOIN users u ON s.customer_id = u.id ` const params: any[] = [] const conditions: string[] = [] // Role-based filtering if (user.role === 'individual' || user.role === 'company') { conditions.push("s.customer_id = $" + (params.length + 1)) params.push(user.id) } if (status) { conditions.push("s.status = $" + (params.length + 1)) params.push(status) } if (priority) { conditions.push("s.priority = $" + (params.length + 1)) params.push(priority) } if (conditions.length > 0) { query += " WHERE " + conditions.join(" AND ") } query += ` ORDER BY s.created_at DESC LIMIT $${params.length + 1} OFFSET $${params.length + 2}` params.push(limit, offset) const shipments = await executeQuery(query, params) const totalCount = shipments.length > 0 ? shipments[0].total_count : 0 const totalPages = Math.ceil(totalCount / limit) return NextResponse.json({ shipments: shipments.map(({ total_count, ...shipment }) => shipment), pagination: { page, limit, totalCount, totalPages, hasNext: page < totalPages, hasPrev: page > 1 } }) } catch (error) { console.error("Error fetching shipments:", error) return NextResponse.json({ error: "Failed to fetch shipments" }, { status: 500 }) } } // Create a new shipment export async function POST(request: NextRequest) { try { const { user, error } = await verifyAuth(request) if (!user) { return NextResponse.json({ error: error || "Unauthorized" }, { status: 401 }) } const body = await request.json() // Validate input const validation = createShipmentSchema.safeParse(body) if (!validation.success) { return NextResponse.json( { error: "Invalid input", details: validation.error.errors }, { status: 400 } ) } const shipmentData = validation.data // Verify locations exist const [origin, destination] = await Promise.all([ executeQuery("SELECT id FROM locations WHERE id = $1", [shipmentData.origin_id]), executeQuery("SELECT id FROM locations WHERE id = $1", [shipmentData.destination_id]) ]) if (origin.length === 0) { return NextResponse.json({ error: "Origin location not found" }, { status: 404 }) } if (destination.length === 0) { return NextResponse.json({ error: "Destination location not found" }, { status: 404 }) } // Generate tracking number const trackingNumber = `SHP-${Date.now()}-${Math.floor(Math.random() * 1000).toString().padStart(3, '0')}` // Calculate estimated cost (basic calculation) const estimatedCost = await calculateShippingCost(shipmentData) // Create shipment const result = await executeQuery( `INSERT INTO shipments (tracking_number, customer_id, origin_id, destination_id, cargo_type, cargo_description, weight, volume, value, priority, scheduled_pickup, scheduled_delivery, special_instructions, pickup_instructions, delivery_instructions, insurance_required, requires_signature, fragile, hazardous, temperature_controlled, temperature_range, estimated_cost) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $16, $17, $18, $19, $20, $21, $22) RETURNING *`, [ trackingNumber, user.id, shipmentData.origin_id, shipmentData.destination_id, shipmentData.cargo_type, shipmentData.cargo_description, shipmentData.weight, shipmentData.volume, shipmentData.value, shipmentData.priority, shipmentData.scheduled_pickup, shipmentData.scheduled_delivery, shipmentData.special_instructions, shipmentData.pickup_instructions, shipmentData.delivery_instructions, shipmentData.insurance_required, shipmentData.requires_signature, shipmentData.fragile, shipmentData.hazardous, shipmentData.temperature_controlled, JSON.stringify(shipmentData.temperature_range), estimatedCost ] ) // Get complete shipment data with location details const completeShipment = await executeQuery( `SELECT s.*, o.name as origin_name, o.address as origin_address, o.city as origin_city, d.name as destination_name, d.address as destination_address, d.city as destination_city FROM shipments s JOIN locations o ON s.origin_id = o.id JOIN locations d ON s.destination_id = d.id WHERE s.id = $1`, [result[0].id] ) return NextResponse.json(completeShipment[0], { status: 201 }) } catch (error) { console.error("Error creating shipment:", error) return NextResponse.json({ error: "Failed to create shipment" }, { status: 500 }) } } // Helper function to calculate shipping cost async function calculateShippingCost(shipmentData: any): Promise { try { // Get active pricing rules const pricingRules = await executeQuery( `SELECT * FROM pricing_rules WHERE is_active = true AND effective_from <= CURRENT_DATE AND (effective_to IS NULL OR effective_to >= CURRENT_DATE) ORDER BY rule_type` ) let totalCost = 0 const baseRate = 50 // Base shipping rate // Distance-based calculation (simplified) if (shipmentData.weight) { const weightRule = pricingRules.find(rule => rule.rule_type === 'weight') if (weightRule) { totalCost += shipmentData.weight * weightRule.base_rate } else { totalCost += shipmentData.weight * 2 // Default rate per kg } } // Volume-based calculation if (shipmentData.volume) { const volumeRule = pricingRules.find(rule => rule.rule_type === 'volume') if (volumeRule) { totalCost += shipmentData.volume * volumeRule.base_rate } else { totalCost += shipmentData.volume * 10 // Default rate per cubic meter } } // Priority surcharge const priorityMultipliers = { low: 0.9, medium: 1.0, high: 1.3, urgent: 1.8 } totalCost *= priorityMultipliers[shipmentData.priority] || 1.0 // Special handling fees if (shipmentData.fragile) totalCost += 25 if (shipmentData.hazardous) totalCost += 100 if (shipmentData.temperature_controlled) totalCost += 75 if (shipmentData.insurance_required && shipmentData.value) { totalCost += shipmentData.value * 0.01 // 1% of value } return Math.max(totalCost, baseRate) // Ensure minimum cost } catch (error) { console.error("Error calculating shipping cost:", error) return 100 // Default fallback cost } }141:T1fad,// app/api/shipments/[id]/route.ts import { NextRequest, NextResponse } from "next/server" import { executeQuery } from "@/lib/db" import { verifyAuth } from "@/lib/auth" import { z } from "zod" const updateShipmentSchema = z.object({ status: z.enum(['pending', 'confirmed', 'picked_up', 'in_transit', 'out_for_delivery', 'delivered', 'cancelled', 'delayed']).optional(), priority: z.enum(['low', 'medium', 'high', 'urgent']).optional(), weight: z.number().positive().optional(), volume: z.number().positive().optional(), value: z.number().positive().optional(), scheduled_pickup: z.string().datetime().optional(), scheduled_delivery: z.string().datetime().optional(), actual_pickup: z.string().datetime().optional(), actual_delivery: z.string().datetime().optional(), special_instructions: z.string().optional(), pickup_instructions: z.string().optional(), delivery_instructions: z.string().optional() }) // Get a specific shipment export async function GET(request: NextRequest, { params }: { params: { id: string } }) { try { const { user, error } = await verifyAuth(request) if (!user) { return NextResponse.json({ error: error || "Unauthorized" }, { status: 401 }) } const id = params.id let query = ` SELECT s.*, o.name as origin_name, o.address as origin_address, o.city as origin_city, o.state as origin_state, o.country as origin_country, o.latitude as origin_lat, o.longitude as origin_lng, d.name as destination_name, d.address as destination_address, d.city as destination_city, d.state as destination_state, d.country as destination_country, d.latitude as dest_lat, d.longitude as dest_lng, u.name as customer_name, u.email as customer_email, u.phone as customer_phone FROM shipments s JOIN locations o ON s.origin_id = o.id JOIN locations d ON s.destination_id = d.id JOIN users u ON s.customer_id = u.id WHERE s.id = $1 ` const params_array = [id] // Role-based access control if (user.role === 'individual' || user.role === 'company') { query += " AND s.customer_id = $2" params_array.push(user.id) } const shipments = await executeQuery(query, params_array) if (shipments.length === 0) { return NextResponse.json({ error: "Shipment not found" }, { status: 404 }) } const shipment = shipments[0] // Get associated route if exists const routes = await executeQuery( `SELECT r.*, t.license_plate, t.model as truck_model, t.capacity as truck_capacity, d.id as driver_id, du.name as driver_name, d.phone_number as driver_phone, d.rating as driver_rating FROM routes r LEFT JOIN trucks t ON r.truck_id = t.id LEFT JOIN drivers d ON r.driver_id = d.id LEFT JOIN users du ON d.user_id = du.id WHERE r.shipment_id = $1 ORDER BY r.created_at DESC LIMIT 1`, [id] ) // Get tracking updates const trackingUpdates = await executeQuery( `SELECT * FROM tracking_updates WHERE shipment_id = $1 ORDER BY recorded_at DESC LIMIT 10`, [id] ) // Get documents const documents = await executeQuery( `SELECT id, document_type, title, file_name, file_url, created_at FROM documents WHERE shipment_id = $1 ORDER BY created_at DESC`, [id] ) const shipmentData = { ...shipment, route: routes.length > 0 ? routes[0] : null, tracking_updates: trackingUpdates, documents: documents } return NextResponse.json(shipmentData) } catch (error) { console.error("Error fetching shipment:", error) return NextResponse.json({ error: "Failed to fetch shipment" }, { status: 500 }) } } // Update a shipment export async function PUT(request: NextRequest, { params }: { params: { id: string } }) { try { const { user, error } = await verifyAuth(request) if (!user) { return NextResponse.json({ error: error || "Unauthorized" }, { status: 401 }) } const id = params.id const body = await request.json() // Validate input const validation = updateShipmentSchema.safeParse(body) if (!validation.success) { return NextResponse.json( { error: "Invalid input", details: validation.error.errors }, { status: 400 } ) } const updateData = validation.data // Check if shipment exists and user has permission let checkQuery = "SELECT * FROM shipments WHERE id = $1" const checkParams = [id] if (user.role === 'individual' || user.role === 'company') { checkQuery += " AND customer_id = $2" checkParams.push(user.id) } const existingShipment = await executeQuery(checkQuery, checkParams) if (existingShipment.length === 0) { return NextResponse.json({ error: "Shipment not found" }, { status: 404 }) } // Build update query dynamically const updateFields = [] const updateParams = [] let paramIndex = 1 Object.entries(updateData).forEach(([key, value]) => { if (value !== undefined) { updateFields.push(`${key} = $${paramIndex}`) updateParams.push(value) paramIndex++ } }) if (updateFields.length === 0) { return NextResponse.json({ error: "No fields to update" }, { status: 400 }) } updateFields.push(`updated_at = CURRENT_TIMESTAMP`) updateParams.push(id) const updateQuery = ` UPDATE shipments SET ${updateFields.join(', ')} WHERE id = $${paramIndex} RETURNING * ` const result = await executeQuery(updateQuery, updateParams) // Log status change if applicable if (updateData.status) { await executeQuery( `INSERT INTO tracking_updates (shipment_id, event_type, status_message, recorded_at) VALUES ($1, $2, $3, CURRENT_TIMESTAMP)`, [id, 'status_change', `Status updated to ${updateData.status}`] ) } return NextResponse.json(result[0]) } catch (error) { console.error("Error updating shipment:", error) return NextResponse.json({ error: "Failed to update shipment" }, { status: 500 }) } } // Delete a shipment export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) { try { const { user, error } = await verifyAuth(request) if (!user) { return NextResponse.json({ error: error || "Unauthorized" }, { status: 401 }) } const id = params.id // Check if shipment exists and user has permission let checkQuery = "SELECT * FROM shipments WHERE id = $1" const checkParams = [id] if (user.role === 'individual' || user.role === 'company') { checkQuery += " AND customer_id = $2" checkParams.push(user.id) } const existingShipment = await executeQuery(checkQuery, checkParams) if (existingShipment.length === 0) { return NextResponse.json({ error: "Shipment not found" }, { status: 404 }) } const shipment = existingShipment[0] // Check if shipment can be deleted (not in transit) if (['picked_up', 'in_transit', 'out_for_delivery'].includes(shipment.status)) { return NextResponse.json( { error: "Cannot delete shipment that is currently in transit" }, { status: 400 } ) } // Delete associated records first await executeQuery("DELETE FROM tracking_updates WHERE shipment_id = $1", [id]) await executeQuery("DELETE FROM route_waypoints WHERE route_id IN (SELECT id FROM routes WHERE shipment_id = $1)", [id]) await executeQuery("DELETE FROM routes WHERE shipment_id = $1", [id]) await executeQuery("UPDATE documents SET shipment_id = NULL WHERE shipment_id = $1", [id]) // Delete shipment await executeQuery("DELETE FROM shipments WHERE id = $1", [id]) return NextResponse.json({ success: true }) } catch (error) { console.error("Error deleting shipment:", error) return NextResponse.json({ error: "Failed to delete shipment" }, { status: 500 }) } }142:T196b,// app/api/shipments/[id]/tracking/route.ts import { NextRequest, NextResponse } from "next/server" import { executeQuery } from "@/lib/db" import { verifyAuth } from "@/lib/auth" import { z } from "zod" const trackingUpdateSchema = z.object({ latitude: z.number().min(-90).max(90), longitude: z.number().min(-180).max(180), speed: z.number().min(0).optional(), heading: z.number().min(0).max(360).optional(), altitude: z.number().optional(), accuracy: z.number().min(0).optional(), battery_level: z.number().min(0).max(100).optional(), signal_strength: z.number().min(0).max(100).optional(), status_message: z.string().optional(), event_type: z.enum(['location_update', 'pickup', 'delivery', 'delay', 'incident', 'fuel_stop', 'rest_break']).default('location_update'), metadata: z.record(z.any()).optional() }) // Get tracking updates for a shipment export async function GET(request: NextRequest, { params }: { params: { id: string } }) { try { const { user, error } = await verifyAuth(request) if (!user) { return NextResponse.json({ error: error || "Unauthorized" }, { status: 401 }) } const shipmentId = params.id const { searchParams } = new URL(request.url) const limit = parseInt(searchParams.get("limit") || "50") const since = searchParams.get("since") // ISO timestamp // Verify user has access to this shipment let accessQuery = "SELECT id FROM shipments WHERE id = $1" const accessParams = [shipmentId] if (user.role === 'individual' || user.role === 'company') { accessQuery += " AND customer_id = $2" accessParams.push(user.id) } const shipmentAccess = await executeQuery(accessQuery, accessParams) if (shipmentAccess.length === 0) { return NextResponse.json({ error: "Shipment not found" }, { status: 404 }) } // Build tracking query let trackingQuery = ` SELECT * FROM tracking_updates WHERE shipment_id = $1 ` const trackingParams = [shipmentId] if (since) { trackingQuery += " AND recorded_at > $2" trackingParams.push(since) } trackingQuery += " ORDER BY recorded_at DESC LIMIT $" + (trackingParams.length + 1) trackingParams.push(limit) const trackingUpdates = await executeQuery(trackingQuery, trackingParams) // Get current route information const routeInfo = await executeQuery( `SELECT r.*, t.license_plate, t.model as truck_model, d.id as driver_id, u.name as driver_name, d.phone_number as driver_phone FROM routes r LEFT JOIN trucks t ON r.truck_id = t.id LEFT JOIN drivers d ON r.driver_id = d.id LEFT JOIN users u ON d.user_id = u.id WHERE r.shipment_id = $1 AND r.status IN ('planned', 'in_progress') ORDER BY r.created_at DESC LIMIT 1`, [shipmentId] ) return NextResponse.json({ tracking_updates: trackingUpdates, route_info: routeInfo.length > 0 ? routeInfo[0] : null, last_update: trackingUpdates.length > 0 ? trackingUpdates[0].recorded_at : null }) } catch (error) { console.error("Error fetching tracking updates:", error) return NextResponse.json({ error: "Failed to fetch tracking updates" }, { status: 500 }) } } // Add a new tracking update export async function POST(request: NextRequest, { params }: { params: { id: string } }) { try { const { user, error } = await verifyAuth(request) if (!user) { return NextResponse.json({ error: error || "Unauthorized" }, { status: 401 }) } const shipmentId = params.id const body = await request.json() // Validate input const validation = trackingUpdateSchema.safeParse(body) if (!validation.success) { return NextResponse.json( { error: "Invalid input", details: validation.error.errors }, { status: 400 } ) } const trackingData = validation.data // Verify shipment exists and user has permission (drivers and carriers can update) const shipmentQuery = user.role === 'carrier' ? `SELECT s.id FROM shipments s JOIN routes r ON s.id = r.shipment_id JOIN drivers d ON r.driver_id = d.id WHERE s.id = $1 AND d.user_id = $2` : `SELECT id FROM shipments WHERE id = $1 AND customer_id = $2` const shipmentCheck = await executeQuery(shipmentQuery, [shipmentId, user.id]) if (shipmentCheck.length === 0) { return NextResponse.json({ error: "Shipment not found or access denied" }, { status: 404 }) } // Get current route const currentRoute = await executeQuery( "SELECT id FROM routes WHERE shipment_id = $1 AND status IN ('planned', 'in_progress') ORDER BY created_at DESC LIMIT 1", [shipmentId] ) // Insert tracking update const result = await executeQuery( `INSERT INTO tracking_updates (shipment_id, route_id, latitude, longitude, speed, heading, altitude, accuracy, battery_level, signal_strength, status_message, event_type, metadata, recorded_at) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, CURRENT_TIMESTAMP) RETURNING *`, [ shipmentId, currentRoute.length > 0 ? currentRoute[0].id : null, trackingData.latitude, trackingData.longitude, trackingData.speed, trackingData.heading, trackingData.altitude, trackingData.accuracy, trackingData.battery_level, trackingData.signal_strength, trackingData.status_message, trackingData.event_type, JSON.stringify(trackingData.metadata || {}) ] ) // Update shipment status based on event type if (trackingData.event_type === 'pickup') { await executeQuery( "UPDATE shipments SET status = 'picked_up', actual_pickup = CURRENT_TIMESTAMP WHERE id = $1", [shipmentId] ) } else if (trackingData.event_type === 'delivery') { await executeQuery( "UPDATE shipments SET status = 'delivered', actual_delivery = CURRENT_TIMESTAMP WHERE id = $1", [shipmentId] ) } // Broadcast real-time update (simplified - in production, use WebSockets or Server-Sent Events) // await broadcastTrackingUpdate(shipmentId, result[0]) return NextResponse.json(result[0], { status: 201 }) } catch (error) { console.error("Error adding tracking update:", error) return NextResponse.json({ error: "Failed to add tracking update" }, { status: 500 }) } }143:T2974,// lib/ai/route-optimizer.ts import { executeQuery } from "@/lib/db" type RoutePoint = { id: number name: string address: string city: string state: string latitude: number longitude: number } type OptimizationFactors = { prioritizeTime?: boolean prioritizeFuel?: boolean avoidTolls?: boolean considerTraffic?: boolean considerWeather?: boolean } type OptimizationResult = { orderedLocations: number[] orderedLocationsWithDetails: RoutePoint[] totalDistance: string estimatedTime: string fuelConsumption: string estimatedCost: string recommendations: string savings: { time: string fuel: string cost: string } confidence_score: number } export async function optimizeRoute( originId: number, destinationId: number, waypoints: number[] = [], factors: OptimizationFactors = {}, truckSpecs?: { fuel_efficiency: number capacity: number fuel_type: string } ): Promise { try { // Get origin, destination and waypoint locations const locationIds = [originId, destinationId, ...waypoints] const locationsQuery = ` SELECT id, name, address, city, state, latitude, longitude FROM locations WHERE id = ANY($1) ` const locations = await executeQuery(locationsQuery, [locationIds]) if (!locations || locations.length < 2) { throw new Error("Origin and destination locations are required") } // Find origin and destination const origin = locations.find((loc: any) => loc.id === originId) const destination = locations.find((loc: any) => loc.id === destinationId) if (!origin || !destination) { throw new Error("Origin or destination not found") } // Get waypoint locations const waypointLocations = locations.filter((loc: any) => loc.id !== originId && loc.id !== destinationId ) // Get historical traffic data for this route const historicalData = await getHistoricalRouteData(originId, destinationId) // Get current weather conditions const weatherData = await getCurrentWeatherConditions([origin, destination, ...waypointLocations]) // Call Groq API to optimize the route const optimizedRoute = await callGroqForRouteOptimization( origin, destination, waypointLocations, factors, truckSpecs, historicalData, weatherData ) // Log the optimization for analytics await executeQuery( `INSERT INTO ai_optimization_logs (optimization_type, entity_type, entity_id, input_data, output_data, confidence_score, cost_savings, time_savings, fuel_savings, ai_model_version) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10)`, [ 'route', 'shipment', 0, // Will be updated when associated with actual shipment JSON.stringify({ origin, destination, waypoints: waypointLocations, factors }), JSON.stringify(optimizedRoute), optimizedRoute.confidence_score || 85, parseFloat(optimizedRoute.savings.cost.replace('$', '')) || 0, parseInt(optimizedRoute.savings.time.split(' ')[0]) || 0, parseFloat(optimizedRoute.savings.fuel.split(' ')[0]) || 0, 'groq-llama3-70b-v1' ] ) return optimizedRoute } catch (error) { console.error("Error optimizing route:", error) throw error } } async function callGroqForRouteOptimization( origin: RoutePoint, destination: RoutePoint, waypoints: RoutePoint[], factors: OptimizationFactors, truckSpecs?: any, historicalData?: any, weatherData?: any ): Promise { // Calculate base distance using Haversine formula const calculateDistance = (lat1: number, lon1: number, lat2: number, lon2: number): number => { const R = 6371 // Earth's radius in km const dLat = (lat2 - lat1) * Math.PI / 180 const dLon = (lon2 - lon1) * Math.PI / 180 const a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dLon/2) * Math.sin(dLon/2) const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)) return R * c } const baseDistance = calculateDistance( origin.latitude, origin.longitude, destination.latitude, destination.longitude ) // Prepare the prompt for Groq const waypointsText = waypoints.length > 0 ? `The route must include these waypoints (in the optimal order): ${waypoints.map((wp) => `${wp.name} (${wp.city}, ${wp.state})`).join(", ")}.` : "No additional waypoints required." const factorsText = Object.entries(factors) .filter(([_, value]) => value === true) .map(([key]) => { switch (key) { case "prioritizeTime": return "Prioritize the fastest route" case "prioritizeFuel": return "Prioritize fuel efficiency" case "avoidTolls": return "Avoid toll roads" case "considerTraffic": return "Consider current traffic conditions" case "considerWeather": return "Consider weather conditions" default: return "" } }) .filter((text) => text) .join(". ") const truckInfo = truckSpecs ? `Truck specifications: ${truckSpecs.fuel_efficiency} km/L efficiency, ${truckSpecs.capacity}kg capacity, ${truckSpecs.fuel_type} fuel.` : "Standard truck specifications assumed." const historicalInfo = historicalData?.averageTime ? `Historical data shows this route typically takes ${historicalData.averageTime} minutes.` : "" const weatherInfo = weatherData?.conditions ? `Current weather conditions: ${weatherData.conditions}.` : "" const prompt = ` I need to optimize a logistics route from ${origin.name} (${origin.city}, ${origin.state}) to ${destination.name} (${destination.city}, ${destination.state}). ${waypointsText} ${factorsText ? `Optimization factors: ${factorsText}.` : ""} ${truckInfo} ${historicalInfo} ${weatherInfo} Base distance: ${baseDistance.toFixed(2)} km Please provide: 1. The optimal order of locations to visit (array of location IDs) 2. Estimated total distance in km 3. Estimated travel time in hours and minutes 4. Estimated fuel consumption in liters 5. Estimated total cost in USD 6. Specific route recommendations and reasoning 7. Estimated savings compared to a basic route (time, fuel, cost) 8. Confidence score (0-100) for this optimization Format the response as a JSON object with these exact fields: orderedLocations, totalDistance, estimatedTime, fuelConsumption, estimatedCost, recommendations, savings (with time, fuel, cost subfields), and confidence_score. ` try { const response = await fetch("https://api.groq.com/openai/v1/chat/completions", { method: "POST", headers: { Authorization: `Bearer ${process.env.GROQ_API_KEY}`, "Content-Type": "application/json", }, body: JSON.stringify({ model: "llama3-70b-8192", messages: [ { role: "system", content: "You are a logistics route optimization expert with deep knowledge of Moroccan geography, traffic patterns, and transportation efficiency. Always respond with valid JSON that matches the requested format exactly.", }, { role: "user", content: prompt, }, ], temperature: 0.2, response_format: { type: "json_object" }, }), }) if (!response.ok) { throw new Error(`Groq API error: ${response.status}`) } const data = await response.json() const result = JSON.parse(data.choices[0].message.content) // Add location details to the ordered locations const orderedLocationsWithDetails = result.orderedLocations.map((id: number) => { const location = [origin, destination, ...waypoints].find((loc) => loc.id === id) return location || null }).filter(Boolean) return { ...result, orderedLocationsWithDetails, } } catch (error) { console.error("Error calling Groq API:", error) // Fallback optimization using simple algorithms return generateFallbackOptimization(origin, destination, waypoints, baseDistance) } } async function getHistoricalRouteData(originId: number, destinationId: number) { try { const historicalRoutes = await executeQuery( `SELECT AVG(actual_duration) as average_time, AVG(distance) as average_distance, AVG(fuel_consumption) as average_fuel FROM routes r JOIN shipments s ON r.shipment_id = s.id WHERE s.origin_id = $1 AND s.destination_id = $2 AND r.status = 'completed' AND r.created_at > CURRENT_DATE - INTERVAL '90 days'`, [originId, destinationId] ) return historicalRoutes.length > 0 ? historicalRoutes[0] : null } catch (error) { console.error("Error fetching historical route data:", error) return null } } async function getCurrentWeatherConditions(locations: RoutePoint[]) { try { // In a real implementation, you would call a weather API // For now, return mock data return { conditions: "Clear skies, good visibility", temperature: 22, wind_speed: 10, precipitation: 0 } } catch (error) { console.error("Error fetching weather data:", error) return null } } function generateFallbackOptimization( origin: RoutePoint, destination: RoutePoint, waypoints: RoutePoint[], baseDistance: number ): OptimizationResult { // Simple fallback optimization const orderedLocations = [origin.id, ...waypoints.map(w => w.id), destination.id] const totalDistance = Math.round(baseDistance * 1.1) // Add 10% for waypoints const estimatedTime = Math.round(totalDistance / 60) // Assume 60 km/h average const fuelConsumption = Math.round(totalDistance / 12) // Assume 12 km/L efficiency const estimatedCost = Math.round(totalDistance * 0.8 + fuelConsumption * 1.2) // Distance + fuel costs return { orderedLocations, orderedLocationsWithDetails: [origin, ...waypoints, destination], totalDistance: `${totalDistance} km`, estimatedTime: `${Math.floor(estimatedTime / 60)}h ${estimatedTime % 60}m`, fuelConsumption: `${fuelConsumption} liters`, estimatedCost: `$${estimatedCost}`, recommendations: "Basic route optimization applied. Consider using AI optimization for better results.", savings: { time: "15 minutes", fuel: "2 liters", cost: "$8" }, confidence_score: 65 } }144:T34da,// lib/ai/load-matcher.ts import { executeQuery } from "@/lib/db" type MatchingFactors = { prioritizeProximity?: boolean prioritizeAvailability?: boolean prioritizeExperience?: boolean prioritizeRating?: boolean prioritizeFuelEfficiency?: boolean prioritizeCost?: boolean } type MatchResult = { truckId: number driverId: number score: number explanation: string truck: any driver: any estimatedCost: number estimatedTime: string distance: number } export async function findOptimalMatches( shipmentId: number, factors: MatchingFactors = {}, maxResults: number = 5 ): Promise { try { // Get shipment details const shipmentQuery = ` SELECT s.*, o.latitude as origin_lat, o.longitude as origin_lng, o.name as origin_name, d.latitude as dest_lat, d.longitude as dest_lng, d.name as dest_name FROM shipments s JOIN locations o ON s.origin_id = o.id JOIN locations d ON s.destination_id = d.id WHERE s.id = $1 ` const shipments = await executeQuery(shipmentQuery, [shipmentId]) if (!shipments || shipments.length === 0) { throw new Error("Shipment not found") } const shipment = shipments[0] // Get available trucks with their current locations const trucksQuery = ` SELECT t.*, COALESCE(cl.latitude, ol.latitude) as current_lat, COALESCE(cl.longitude, ol.longitude) as current_lng, COALESCE(cl.name, ol.name) as current_location_name, u.name as owner_name, u.phone as owner_phone FROM trucks t JOIN users u ON t.owner_id = u.id LEFT JOIN locations cl ON t.current_location_id = cl.id LEFT JOIN locations ol ON u.id = ol.id WHERE t.status = 'available' AND t.is_active = true AND t.capacity >= $1 AND (t.volume_capacity IS NULL OR t.volume_capacity >= $2) ` const trucks = await executeQuery(trucksQuery, [ shipment.weight || 0, shipment.volume || 0 ]) // Get available drivers with their current locations and ratings const driversQuery = ` SELECT d.*, u.name, u.phone, COALESCE(cl.latitude, ol.latitude) as current_lat, COALESCE(cl.longitude, ol.longitude) as current_lng, COALESCE(cl.name, ol.name) as current_location_name, COALESCE(d.rating, 0) as rating, d.total_trips, d.experience_years FROM drivers d JOIN users u ON d.user_id = u.id LEFT JOIN locations cl ON d.current_location_id = cl.id LEFT JOIN locations ol ON u.id = ol.id WHERE d.status = 'available' AND d.is_active = true AND d.license_expiry_date > CURRENT_DATE ` const drivers = await executeQuery(driversQuery, []) // Get historical performance data const performanceData = await getPerformanceData(trucks.map(t => t.id), drivers.map(d => d.id)) // Call Groq API to find optimal matches const matches = await callGroqForLoadMatching(shipment, trucks, drivers, factors, performanceData) // Calculate additional metrics for each match const enhancedMatches = await Promise.all( matches.map(async (match: any) => { const truck = trucks.find(t => t.id === match.truckId) const driver = drivers.find(d => d.id === match.driverId) if (!truck || !driver) return null // Calculate distance from current location to pickup const distance = calculateDistance( driver.current_lat || truck.current_lat, driver.current_lng || truck.current_lng, shipment.origin_lat, shipment.origin_lng ) // Estimate cost based on distance, truck specs, and market rates const estimatedCost = await calculateMatchCost(shipment, truck, driver, distance) // Estimate time to pickup const estimatedTime = Math.round(distance / 60) // Assume 60 km/h average speed return { ...match, truck, driver, distance: Math.round(distance), estimatedCost, estimatedTime: `${Math.floor(estimatedTime / 60)}h ${estimatedTime % 60}m` } }) ) // Filter out null results and sort by score const validMatches = enhancedMatches .filter(match => match !== null) .sort((a, b) => b.score - a.score) .slice(0, maxResults) // Log the matching operation await executeQuery( `INSERT INTO ai_optimization_logs (optimization_type, entity_type, entity_id, input_data, output_data, confidence_score) VALUES ($1, $2, $3, $4, $5, $6)`, [ 'load_matching', 'shipment', shipmentId, JSON.stringify({ shipment, factors, availableTrucks: trucks.length, availableDrivers: drivers.length }), JSON.stringify(validMatches), validMatches.length > 0 ? validMatches[0].score : 0 ] ) return validMatches } catch (error) { console.error("Error finding optimal matches:", error) throw error } } async function callGroqForLoadMatching( shipment: any, trucks: any[], drivers: any[], factors: MatchingFactors, performanceData: any ): Promise { // Prepare the prompt for Groq const factorsText = Object.entries(factors) .filter(([_, value]) => value === true) .map(([key]) => { switch (key) { case "prioritizeProximity": return "Prioritize trucks and drivers that are closest to the shipment origin" case "prioritizeAvailability": return "Prioritize trucks and drivers with the longest availability window" case "prioritizeExperience": return "Prioritize drivers with more experience and higher trip counts" case "prioritizeRating": return "Prioritize drivers with higher customer ratings" case "prioritizeFuelEfficiency": return "Prioritize trucks with better fuel efficiency" case "prioritizeCost": return "Prioritize the most cost-effective combinations" default: return "" } }) .filter((text) => text) .join(". ") const prompt = ` I need to match a shipment with the optimal truck and driver combination. Shipment details: - ID: ${shipment.id} - Weight: ${shipment.weight || 'Not specified'} kg - Volume: ${shipment.volume || 'Not specified'} cubic meters - Priority: ${shipment.priority} - Cargo type: ${shipment.cargo_type || 'General'} - Origin: ${shipment.origin_name} (${shipment.origin_lat}, ${shipment.origin_lng}) - Destination: ${shipment.dest_name} (${shipment.dest_lat}, ${shipment.dest_lng}) - Special requirements: ${[ shipment.fragile && 'Fragile', shipment.hazardous && 'Hazardous', shipment.temperature_controlled && 'Temperature controlled' ].filter(Boolean).join(', ') || 'None'} Available trucks (${trucks.length}): ${trucks.slice(0, 10).map((truck, i) => ` Truck ${i + 1}: - ID: ${truck.id} - Model: ${truck.model} (${truck.year || 'Unknown year'}) - Capacity: ${truck.capacity} kg, Volume: ${truck.volume_capacity || 'N/A'} m³ - Fuel efficiency: ${truck.fuel_efficiency || 'Unknown'} km/L - Current location: ${truck.current_location_name || 'Unknown'} (${truck.current_lat || 'N/A'}, ${truck.current_lng || 'N/A'}) - Owner: ${truck.owner_name} `).join('')} Available drivers (${drivers.length}): ${drivers.slice(0, 10).map((driver, i) => ` Driver ${i + 1}: - ID: ${driver.id} - Name: ${driver.name} - Rating: ${driver.rating || 0}/5 (${driver.total_trips || 0} trips) - Experience: ${driver.experience_years || 'Unknown'} years - Current location: ${driver.current_location_name || 'Unknown'} (${driver.current_lat || 'N/A'}, ${driver.current_lng || 'N/A'}) - Phone: ${driver.phone} `).join('')} ${factorsText ? `Matching priorities: ${factorsText}.` : ''} Please provide the top 5 truck-driver combinations ranked by suitability. Consider: 1. Truck capacity vs shipment requirements 2. Distance from current location to pickup point 3. Driver experience and ratings 4. Fuel efficiency and cost effectiveness 5. Any special requirements (fragile, hazardous, etc.) Format the response as a JSON object with a "matches" array. Each match should have: - truckId: number - driverId: number - score: number (0-100) - explanation: string (brief reason for this match) ` try { const response = await fetch("https://api.groq.com/openai/v1/chat/completions", { method: "POST", headers: { Authorization: `Bearer ${process.env.GROQ_API_KEY}`, "Content-Type": "application/json", }, body: JSON.stringify({ model: "llama3-70b-8192", messages: [ { role: "system", content: "You are a logistics expert specializing in matching shipments with optimal trucks and drivers. Consider all factors including distance, capacity, experience, ratings, and cost efficiency. Always respond with valid JSON.", }, { role: "user", content: prompt, }, ], temperature: 0.3, response_format: { type: "json_object" }, }), }) if (!response.ok) { throw new Error(`Groq API error: ${response.status}`) } const data = await response.json() const result = JSON.parse(data.choices[0].message.content) return result.matches || [] } catch (error) { console.error("Error calling Groq API for load matching:", error) // Fallback to simple matching algorithm return generateFallbackMatches(shipment, trucks, drivers) } } function calculateDistance(lat1: number, lon1: number, lat2: number, lon2: number): number { const R = 6371 // Earth's radius in km const dLat = (lat2 - lat1) * Math.PI / 180 const dLon = (lon2 - lon1) * Math.PI / 180 const a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dLon/2) * Math.sin(dLon/2) const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)) return R * c } async function calculateMatchCost(shipment: any, truck: any, driver: any, distance: number): Promise { try { // Get current pricing rules const pricingRules = await executeQuery( `SELECT * FROM pricing_rules WHERE is_active = true AND effective_from <= CURRENT_DATE AND (effective_to IS NULL OR effective_to >= CURRENT_DATE)` ) let baseCost = 100 // Base cost // Distance cost baseCost += distance * 1.5 // $1.5 per km to pickup // Shipment distance cost (simplified) const shipmentDistance = calculateDistance( shipment.origin_lat, shipment.origin_lng, shipment.dest_lat, shipment.dest_lng ) baseCost += shipmentDistance * 2.0 // $2 per km for delivery // Weight and volume costs if (shipment.weight) baseCost += shipment.weight * 0.5 if (shipment.volume) baseCost += shipment.volume * 10 // Truck efficiency factor if (truck.fuel_efficiency) { const fuelCost = (distance + shipmentDistance) / truck.fuel_efficiency * 1.2 // $1.2 per liter baseCost += fuelCost } // Driver experience premium if (driver.rating > 4.5) baseCost *= 1.1 if (driver.experience_years > 10) baseCost *= 1.05 // Special handling fees if (shipment.fragile) baseCost += 50 if (shipment.hazardous) baseCost += 150 if (shipment.temperature_controlled) baseCost += 100 return Math.round(baseCost) } catch (error) { console.error("Error calculating match cost:", error) return 200 // Default fallback cost } } async function getPerformanceData(truckIds: number[], driverIds: number[]) { try { const performanceQuery = ` SELECT r.truck_id, r.driver_id, AVG(CASE WHEN r.actual_duration <= r.estimated_duration THEN 1 ELSE 0 END) as on_time_rate, AVG(r.fuel_consumption / r.distance) as avg_fuel_efficiency, COUNT(*) as total_routes FROM routes r WHERE r.status = 'completed' AND r.truck_id = ANY($1) AND r.driver_id = ANY($2) AND r.created_at > CURRENT_DATE - INTERVAL '6 months' GROUP BY r.truck_id, r.driver_id ` return await executeQuery(performanceQuery, [truckIds, driverIds]) } catch (error) { console.error("Error fetching performance data:", error) return [] } } function generateFallbackMatches(shipment: any, trucks: any[], drivers: any[]): any[] { // Simple fallback matching based on capacity and proximity const matches = [] for (let i = 0; i < Math.min(5, trucks.length, drivers.length); i++) { const truck = trucks[i] const driver = drivers[i] let score = 70 // Base score // Capacity match if (truck.capacity >= (shipment.weight || 0)) score += 10 if (truck.volume_capacity >= (shipment.volume || 0)) score += 10 // Driver rating if (driver.rating > 4.0) score += 5 if (driver.experience_years > 5) score += 5 matches.push({ truckId: truck.id, driverId: driver.id, score, explanation: `Fallback match based on capacity and availability` }) } return matches.sort((a, b) => b.score - a.score) }145:T6ce,// app/api/ai/load-matching/route.ts import { NextRequest, NextResponse } from "next/server" import { findOptimalMatches } from "@/lib/ai/load-matcher" import { verifyAuth } from "@/lib/auth" import { z } from "zod" const loadMatchingSchema = z.object({ shipment_id: z.number().int().positive(), factors: z.object({ prioritizeProximity: z.boolean().optional(), prioritizeAvailability: z.boolean().optional(), prioritizeExperience: z.boolean().optional(), prioritizeRating: z.boolean().optional(), prioritizeFuelEfficiency: z.boolean().optional(), prioritizeCost: z.boolean().optional() }).optional(), max_results: z.number().int().min(1).max(20).optional() }) export async function POST(request: NextRequest) { try { const { user, error } = await verifyAuth(request) if (!user) { return NextResponse.json({ error: error || "Unauthorized" }, { status: 401 }) } const body = await request.json() // Validate input const validation = loadMatchingSchema.safeParse(body) if (!validation.success) { return NextResponse.json( { error: "Invalid input", details: validation.error.errors }, { status: 400 } ) } const { shipment_id, factors = {}, max_results = 5 } = validation.data // Find optimal matches const matches = await findOptimalMatches(shipment_id, factors, max_results) return NextResponse.json({ success: true, shipment_id, matches, total_matches: matches.length, factors_applied: factors }) } catch (error) { console.error("Error in load matching:", error) return NextResponse.json( { error: "Failed to find optimal matches" }, { status: 500 } ) } }146:T7e0,// app/api/ai/route-optimization/route.ts import { NextRequest, NextResponse } from "next/server" import { optimizeRoute } from "@/lib/ai/route-optimizer" import { verifyAuth } from "@/lib/auth" import { z } from "zod" const routeOptimizationSchema = z.object({ origin_id: z.number().int().positive(), destination_id: z.number().int().positive(), waypoints: z.array(z.number().int().positive()).optional(), factors: z.object({ prioritizeTime: z.boolean().optional(), prioritizeFuel: z.boolean().optional(), avoidTolls: z.boolean().optional(), considerTraffic: z.boolean().optional(), considerWeather: z.boolean().optional() }).optional(), truck_specs: z.object({ fuel_efficiency: z.number().positive(), capacity: z.number().positive(), fuel_type: z.string() }).optional() }) export async function POST(request: NextRequest) { try { const { user, error } = await verifyAuth(request) if (!user) { return NextResponse.json({ error: error || "Unauthorized" }, { status: 401 }) } const body = await request.json() // Validate input const validation = routeOptimizationSchema.safeParse(body) if (!validation.success) { return NextResponse.json( { error: "Invalid input", details: validation.error.errors }, { status: 400 } ) } const { origin_id, destination_id, waypoints = [], factors = {}, truck_specs } = validation.data // Optimize route const optimizedRoute = await optimizeRoute( origin_id, destination_id, waypoints, factors, truck_specs ) return NextResponse.json({ success: true, optimization: optimizedRoute, factors_applied: factors, processing_time: Date.now() // In a real implementation, track actual processing time }) } catch (error) { console.error("Error in route optimization:", error) return NextResponse.json( { error: "Failed to optimize route" }, { status: 500 } ) } }147:T17b1,// app/api/trucks/route.ts import { NextRequest, NextResponse } from "next/server" import { executeQuery } from "@/lib/db" import { verifyAuth } from "@/lib/auth" import { z } from "zod" const createTruckSchema = z.object({ license_plate: z.string().min(3).max(20), model: z.string().min(2).max(100), year: z.number().int().min(1990).max(new Date().getFullYear() + 1).optional(), capacity: z.number().positive(), volume_capacity: z.number().positive().optional(), fuel_type: z.enum(['diesel', 'gasoline', 'electric', 'hybrid']).default('diesel'), fuel_efficiency: z.number().positive().optional(), current_location_id: z.number().int().positive().optional(), specifications: z.record(z.any()).optional(), insurance_expiry: z.string().date().optional(), registration_expiry: z.string().date().optional() }) // Get all trucks export async function GET(request: NextRequest) { try { const { user, error } = await verifyAuth(request) if (!user) { return NextResponse.json({ error: error || "Unauthorized" }, { status: 401 }) } const { searchParams } = new URL(request.url) const status = searchParams.get("status") const page = parseInt(searchParams.get("page") || "1") const limit = parseInt(searchParams.get("limit") || "20") const offset = (page - 1) * limit let query = ` SELECT t.*, l.name as current_location_name, l.city as current_location_city, u.name as owner_name, u.email as owner_email, COUNT(*) OVER() as total_count FROM trucks t JOIN users u ON t.owner_id = u.id LEFT JOIN locations l ON t.current_location_id = l.id ` const params: any[] = [] const conditions: string[] = ["t.is_active = true"] // Role-based filtering if (user.role === 'company') { conditions.push("t.owner_id = $" + (params.length + 1)) params.push(user.id) } else if (user.role === 'individual') { // Individual users can only see their own trucks if they have any conditions.push("t.owner_id = $" + (params.length + 1)) params.push(user.id) } // Carriers and admins can see all trucks if (status) { conditions.push("t.status = $" + (params.length + 1)) params.push(status) } if (conditions.length > 0) { query += " WHERE " + conditions.join(" AND ") } query += ` ORDER BY t.created_at DESC LIMIT $${params.length + 1} OFFSET $${params.length + 2}` params.push(limit, offset) const trucks = await executeQuery(query, params) const totalCount = trucks.length > 0 ? trucks[0].total_count : 0 const totalPages = Math.ceil(totalCount / limit) return NextResponse.json({ trucks: trucks.map(({ total_count, ...truck }) => truck), pagination: { page, limit, totalCount, totalPages, hasNext: page < totalPages, hasPrev: page > 1 } }) } catch (error) { console.error("Error fetching trucks:", error) return NextResponse.json({ error: "Failed to fetch trucks" }, { status: 500 }) } } // Create a new truck export async function POST(request: NextRequest) { try { const { user, error } = await verifyAuth(request) if (!user) { return NextResponse.json({ error: error || "Unauthorized" }, { status: 401 }) } // Only company users and admins can create trucks if (!['company', 'admin'].includes(user.role)) { return NextResponse.json({ error: "Insufficient permissions" }, { status: 403 }) } const body = await request.json() // Validate input const validation = createTruckSchema.safeParse(body) if (!validation.success) { return NextResponse.json( { error: "Invalid input", details: validation.error.errors }, { status: 400 } ) } const truckData = validation.data // Check if truck with license plate already exists const existingTruck = await executeQuery( "SELECT id FROM trucks WHERE license_plate = $1 AND is_active = true", [truckData.license_plate] ) if (existingTruck.length > 0) { return NextResponse.json( { error: "Truck with this license plate already exists" }, { status: 409 } ) } // Verify location exists if provided if (truckData.current_location_id) { const location = await executeQuery( "SELECT id FROM locations WHERE id = $1", [truckData.current_location_id] ) if (location.length === 0) { return NextResponse.json({ error: "Location not found" }, { status: 404 }) } } // Create truck const result = await executeQuery( `INSERT INTO trucks (owner_id, license_plate, model, year, capacity, volume_capacity, fuel_type, fuel_efficiency, current_location_id, specifications, insurance_expiry, registration_expiry) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12) RETURNING *`, [ user.id, truckData.license_plate, truckData.model, truckData.year, truckData.capacity, truckData.volume_capacity, truckData.fuel_type, truckData.fuel_efficiency, truckData.current_location_id, JSON.stringify(truckData.specifications || {}), truckData.insurance_expiry, truckData.registration_expiry ] ) // Get complete truck data with location details const completeTruck = await executeQuery( `SELECT t.*, l.name as current_location_name, l.city as current_location_city, u.name as owner_name, u.email as owner_email FROM trucks t JOIN users u ON t.owner_id = u.id LEFT JOIN locations l ON t.current_location_id = l.id WHERE t.id = $1`, [result[0].id] ) return NextResponse.json(completeTruck[0], { status: 201 }) } catch (error) { console.error("Error creating truck:", error) return NextResponse.json({ error: "Failed to create truck" }, { status: 500 }) } }148:T1d4d,// app/api/drivers/route.ts import { NextRequest, NextResponse } from "next/server" import { executeQuery } from "@/lib/db" import { verifyAuth } from "@/lib/auth" import { z } from "zod" const createDriverSchema = z.object({ user_id: z.number().int().positive(), license_number: z.string().min(5).max(50), license_type: z.string().min(1).max(50), license_expiry_date: z.string().date(), phone_number: z.string().min(10).max(20), emergency_contact: z.object({ name: z.string(), phone: z.string(), relationship: z.string() }).optional(), experience_years: z.number().int().min(0).max(50).optional(), specializations: z.array(z.string()).optional(), certifications: z.array(z.string()).optional(), current_location_id: z.number().int().positive().optional() }) // Get all drivers export async function GET(request: NextRequest) { try { const { user, error } = await verifyAuth(request) if (!user) { return NextResponse.json({ error: error || "Unauthorized" }, { status: 401 }) } const { searchParams } = new URL(request.url) const status = searchParams.get("status") const available_only = searchParams.get("available_only") === "true" const page = parseInt(searchParams.get("page") || "1") const limit = parseInt(searchParams.get("limit") || "20") const offset = (page - 1) * limit let query = ` SELECT d.*, u.name, u.email, u.avatar_url, l.name as current_location_name, l.city as current_location_city, COUNT(*) OVER() as total_count FROM drivers d JOIN users u ON d.user_id = u.id LEFT JOIN locations l ON d.current_location_id = l.id ` const params: any[] = [] const conditions: string[] = ["d.is_active = true"] if (status) { conditions.push("d.status = $" + (params.length + 1)) params.push(status) } if (available_only) { conditions.push("d.status = 'available'") conditions.push("d.license_expiry_date > CURRENT_DATE") } // Role-based filtering if (user.role === 'company') { // Company users can see drivers they manage or have worked with conditions.push(`( d.user_id IN ( SELECT DISTINCT r.driver_id FROM routes r JOIN shipments s ON r.shipment_id = s.id WHERE s.customer_id = $${params.length + 1} ) OR d.user_id = $${params.length + 1} )`) params.push(user.id) } else if (user.role === 'individual') { // Individual users can see drivers from their shipments conditions.push(`d.user_id IN ( SELECT DISTINCT r.driver_id FROM routes r JOIN shipments s ON r.shipment_id = s.id WHERE s.customer_id = $${params.length + 1} )`) params.push(user.id) } if (conditions.length > 0) { query += " WHERE " + conditions.join(" AND ") } query += ` ORDER BY d.rating DESC, d.created_at DESC LIMIT $${params.length + 1} OFFSET $${params.length + 2}` params.push(limit, offset) const drivers = await executeQuery(query, params) const totalCount = drivers.length > 0 ? drivers[0].total_count : 0 const totalPages = Math.ceil(totalCount / limit) return NextResponse.json({ drivers: drivers.map(({ total_count, ...driver }) => driver), pagination: { page, limit, totalCount, totalPages, hasNext: page < totalPages, hasPrev: page > 1 } }) } catch (error) { console.error("Error fetching drivers:", error) return NextResponse.json({ error: "Failed to fetch drivers" }, { status: 500 }) } } // Create a new driver export async function POST(request: NextRequest) { try { const { user, error } = await verifyAuth(request) if (!user) { return NextResponse.json({ error: error || "Unauthorized" }, { status: 401 }) } // Only admins and the user themselves can create driver profiles const body = await request.json() // Validate input const validation = createDriverSchema.safeParse(body) if (!validation.success) { return NextResponse.json( { error: "Invalid input", details: validation.error.errors }, { status: 400 } ) } const driverData = validation.data // Check permissions if (user.role !== 'admin' && user.id !== driverData.user_id) { return NextResponse.json({ error: "Insufficient permissions" }, { status: 403 }) } // Check if user exists and doesn't already have a driver profile const existingUser = await executeQuery( "SELECT id, role FROM users WHERE id = $1", [driverData.user_id] ) if (existingUser.length === 0) { return NextResponse.json({ error: "User not found" }, { status: 404 }) } const existingDriver = await executeQuery( "SELECT id FROM drivers WHERE user_id = $1", [driverData.user_id] ) if (existingDriver.length > 0) { return NextResponse.json( { error: "Driver profile already exists for this user" }, { status: 409 } ) } // Check if license number is unique const existingLicense = await executeQuery( "SELECT id FROM drivers WHERE license_number = $1", [driverData.license_number] ) if (existingLicense.length > 0) { return NextResponse.json( { error: "Driver with this license number already exists" }, { status: 409 } ) } // Verify location exists if provided if (driverData.current_location_id) { const location = await executeQuery( "SELECT id FROM locations WHERE id = $1", [driverData.current_location_id] ) if (location.length === 0) { return NextResponse.json({ error: "Location not found" }, { status: 404 }) } } // Create driver profile const result = await executeQuery( `INSERT INTO drivers (user_id, license_number, license_type, license_expiry_date, phone_number, emergency_contact, experience_years, specializations, certifications, current_location_id) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10) RETURNING *`, [ driverData.user_id, driverData.license_number, driverData.license_type, driverData.license_expiry_date, driverData.phone_number, JSON.stringify(driverData.emergency_contact || {}), driverData.experience_years, JSON.stringify(driverData.specializations || []), JSON.stringify(driverData.certifications || []), driverData.current_location_id ] ) // Update user role to carrier if not already set if (existingUser[0].role === 'individual') { await executeQuery( "UPDATE users SET role = 'carrier' WHERE id = $1", [driverData.user_id] ) } // Get complete driver data with user details const completeDriver = await executeQuery( `SELECT d.*, u.name, u.email, u.avatar_url, l.name as current_location_name, l.city as current_location_city FROM drivers d JOIN users u ON d.user_id = u.id LEFT JOIN locations l ON d.current_location_id = l.id WHERE d.id = $1`, [result[0].id] ) return NextResponse.json(completeDriver[0], { status: 201 }) } catch (error) { console.error("Error creating driver:", error) return NextResponse.json({ error: "Failed to create driver" }, { status: 500 }) } }149:T1507,// app/api/documents/upload/route.ts import { NextRequest, NextResponse } from "next/server" import { verifyAuth } from "@/lib/auth" import { uploadFile, supabaseServer } from "@/lib/supabase-server" import { executeQuery } from "@/lib/db" import { z } from "zod" const MAX_FILE_SIZE = 10 * 1024 * 1024 // 10MB const ALLOWED_FILE_TYPES = [ 'application/pdf', 'image/jpeg', 'image/png', 'image/webp', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ] export async function POST(request: NextRequest) { try { const { user, error } = await verifyAuth(request) if (!user) { return NextResponse.json({ error: error || "Unauthorized" }, { status: 401 }) } const formData = await request.formData() const file = formData.get('file') as File const document_type = formData.get('document_type') as string const title = formData.get('title') as string const description = formData.get('description') as string const shipment_id = formData.get('shipment_id') as string const truck_id = formData.get('truck_id') as string const driver_id = formData.get('driver_id') as string const is_public = formData.get('is_public') === 'true' const tags = formData.get('tags') ? JSON.parse(formData.get('tags') as string) : [] // Validate file if (!file) { return NextResponse.json({ error: "No file provided" }, { status: 400 }) } if (file.size > MAX_FILE_SIZE) { return NextResponse.json({ error: "File size exceeds 10MB limit" }, { status: 400 }) } if (!ALLOWED_FILE_TYPES.includes(file.type)) { return NextResponse.json({ error: "File type not allowed" }, { status: 400 }) } // Validate required fields if (!document_type || !title) { return NextResponse.json({ error: "Document type and title are required" }, { status: 400 }) } // Generate unique file path const timestamp = Date.now() const randomString = Math.random().toString(36).substring(2, 15) const fileExtension = file.name.split('.').pop() const fileName = `${timestamp}-${randomString}.${fileExtension}` const filePath = `documents/${user.id}/${fileName}` // Upload file to Supabase Storage const uploadResult = await uploadFile('documents', filePath, file, { contentType: file.type, metadata: { uploadedBy: user.id.toString(), originalName: file.name, documentType: document_type } }) if (!uploadResult.success) { return NextResponse.json({ error: "Failed to upload file" }, { status: 500 }) } // Save document metadata to database const result = await executeQuery( `INSERT INTO documents (user_id, shipment_id, truck_id, driver_id, document_type, title, description, file_name, file_size, file_type, file_url, storage_path, is_public, tags) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14) RETURNING *`, [ user.id, shipment_id ? parseInt(shipment_id) : null, truck_id ? parseInt(truck_id) : null, driver_id ? parseInt(driver_id) : null, document_type, title, description, file.name, file.size, file.type, uploadResult.data.publicUrl, filePath, is_public, JSON.stringify(tags) ] ) // Process document with AI if it's a PDF or image if (['application/pdf', 'image/jpeg', 'image/png'].includes(file.type)) { // Queue for AI processing (in a real implementation, use a job queue) processDocumentWithAI(result[0].id, uploadResult.data.publicUrl, file.type) .catch(error => console.error("AI processing error:", error)) } return NextResponse.json(result[0], { status: 201 }) } catch (error) { console.error("Error uploading document:", error) return NextResponse.json({ error: "Failed to upload document" }, { status: 500 }) } } // AI Document Processing (simplified) async function processDocumentWithAI(documentId: number, fileUrl: string, fileType: string) { try { // In a real implementation, you would: // 1. Use OCR to extract text from images/PDFs // 2. Use AI to analyze and categorize the content // 3. Extract structured data (dates, amounts, addresses, etc.) // For now, we'll simulate AI processing await new Promise(resolve => setTimeout(resolve, 2000)) // Simulate processing time const mockExtractedData = { text_content: "Sample extracted text content", entities: { dates: ["2024-03-15"], amounts: ["$1,250.00"], addresses: ["123 Main St, Casablanca, Morocco"], phone_numbers: ["+212-123-456-789"] }, document_classification: "invoice", confidence_score: 0.92 } // Update document with AI-extracted data await executeQuery( `UPDATE documents SET ai_processed = true, ai_extracted_data = $1, updated_at = CURRENT_TIMESTAMP WHERE id = $2`, [JSON.stringify(mockExtractedData), documentId] ) console.log(`Document ${documentId} processed with AI`) } catch (error) { console.error(`Error processing document ${documentId} with AI:`, error) } }14a:Tc45,// app/api/documents/route.ts import { NextRequest, NextResponse } from "next/server" import { executeQuery } from "@/lib/db" import { verifyAuth } from "@/lib/auth" // Get all documents export async function GET(request: NextRequest) { try { const { user, error } = await verifyAuth(request) if (!user) { return NextResponse.json({ error: error || "Unauthorized" }, { status: 401 }) } const { searchParams } = new URL(request.url) const document_type = searchParams.get("document_type") const shipment_id = searchParams.get("shipment_id") const truck_id = searchParams.get("truck_id") const driver_id = searchParams.get("driver_id") const search = searchParams.get("search") const page = parseInt(searchParams.get("page") || "1") const limit = parseInt(searchParams.get("limit") || "20") const offset = (page - 1) * limit let query = ` SELECT d.*, u.name as uploaded_by_name, s.tracking_number as shipment_tracking, t.license_plate as truck_license, dr.license_number as driver_license, COUNT(*) OVER() as total_count FROM documents d JOIN users u ON d.user_id = u.id LEFT JOIN shipments s ON d.shipment_id = s.id LEFT JOIN trucks t ON d.truck_id = t.id LEFT JOIN drivers dr ON d.driver_id = dr.id ` const params: any[] = [] const conditions: string[] = [] // Role-based access control if (user.role !== 'admin') { conditions.push(`(d.user_id = $${params.length + 1} OR d.is_public = true)`) params.push(user.id) } if (document_type) { conditions.push(`d.document_type = $${params.length + 1}`) params.push(document_type) } if (shipment_id) { conditions.push(`d.shipment_id = $${params.length + 1}`) params.push(parseInt(shipment_id)) } if (truck_id) { conditions.push(`d.truck_id = $${params.length + 1}`) params.push(parseInt(truck_id)) } if (driver_id) { conditions.push(`d.driver_id = $${params.length + 1}`) params.push(parseInt(driver_id)) } if (search) { conditions.push(`(d.title ILIKE $${params.length + 1} OR d.description ILIKE $${params.length + 1})`) params.push(`%${search}%`) } if (conditions.length > 0) { query += " WHERE " + conditions.join(" AND ") } query += ` ORDER BY d.created_at DESC LIMIT $${params.length + 1} OFFSET $${params.length + 2}` params.push(limit, offset) const documents = await executeQuery(query, params) const totalCount = documents.length > 0 ? documents[0].total_count : 0 const totalPages = Math.ceil(totalCount / limit) return NextResponse.json({ documents: documents.map(({ total_count, ...doc }) => doc), pagination: { page, limit, totalCount, totalPages, hasNext: page < totalPages, hasPrev: page > 1 } }) } catch (error) { console.error("Error fetching documents:", error) return NextResponse.json({ error: "Failed to fetch documents" }, { status: 500 }) } }14b:T975,// lib/websocket-server.ts import { Server } from 'socket.io' import { verifyToken } from './auth' let io: Server | null = null export function initializeWebSocket(server: any) { io = new Server(server, { cors: { origin: process.env.FRONTEND_URL || "http://localhost:3000", methods: ["GET", "POST"] } }) io.use(async (socket, next) => { try { const token = socket.handshake.auth.token const decoded = verifyToken(token) if (!decoded) { return next(new Error('Authentication error')) } socket.userId = decoded.id socket.userRole = decoded.role next() } catch (error) { next(new Error('Authentication error')) } }) io.on('connection', (socket) => { console.log(`User ${socket.userId} connected`) // Join user-specific room socket.join(`user:${socket.userId}`) // Join role-specific rooms socket.join(`role:${socket.userRole}`) // Handle shipment tracking subscription socket.on('subscribe:shipment', (shipmentId) => { socket.join(`shipment:${shipmentId}`) }) // Handle route tracking subscription socket.on('subscribe:route', (routeId) => { socket.join(`route:${routeId}`) }) // Handle fleet tracking subscription (for company users) socket.on('subscribe:fleet', () => { if (socket.userRole === 'company') { socket.join(`fleet:${socket.userId}`) } }) socket.on('disconnect', () => { console.log(`User ${socket.userId} disconnected`) }) }) return io } export function getWebSocketServer() { return io } // Broadcast tracking update export function broadcastTrackingUpdate(shipmentId: number, update: any) { if (io) { io.to(`shipment:${shipmentId}`).emit('tracking:update', { shipmentId, update, timestamp: new Date().toISOString() }) } } // Broadcast shipment status change export function broadcastShipmentStatusChange(shipmentId: number, status: string, customerId: number) { if (io) { io.to(`user:${customerId}`).emit('shipment:status_change', { shipmentId, status, timestamp: new Date().toISOString() }) } } // Broadcast new shipment to carriers export function broadcastNewShipment(shipment: any) { if (io) { io.to('role:carrier').emit('shipment:new', { shipment, timestamp: new Date().toISOString() }) } }14c:Tb55,// app/api/events/tracking/[shipmentId]/route.ts import { NextRequest, NextResponse } from "next/server" import { verifyAuth } from "@/lib/auth" import { executeQuery } from "@/lib/db" export async function GET(request: NextRequest, { params }: { params: { shipmentId: string } }) { try { const { user, error } = await verifyAuth(request) if (!user) { return new NextResponse("Unauthorized", { status: 401 }) } const shipmentId = params.shipmentId // Verify user has access to this shipment let accessQuery = "SELECT id FROM shipments WHERE id = $1" const accessParams = [shipmentId] if (user.role === 'individual' || user.role === 'company') { accessQuery += " AND customer_id = $2" accessParams.push(user.id) } const shipmentAccess = await executeQuery(accessQuery, accessParams) if (shipmentAccess.length === 0) { return new NextResponse("Shipment not found", { status: 404 }) } // Set up Server-Sent Events const stream = new ReadableStream({ start(controller) { // Send initial connection message controller.enqueue(`data: ${JSON.stringify({ type: 'connected', shipmentId, timestamp: new Date().toISOString() })}\n\n`) // Set up interval to send updates const interval = setInterval(async () => { try { // Get latest tracking update const latestUpdate = await executeQuery( `SELECT * FROM tracking_updates WHERE shipment_id = $1 ORDER BY recorded_at DESC LIMIT 1`, [shipmentId] ) if (latestUpdate.length > 0) { controller.enqueue(`data: ${JSON.stringify({ type: 'tracking_update', data: latestUpdate[0], timestamp: new Date().toISOString() })}\n\n`) } // Send heartbeat controller.enqueue(`data: ${JSON.stringify({ type: 'heartbeat', timestamp: new Date().toISOString() })}\n\n`) } catch (error) { console.error("Error sending SSE update:", error) } }, 10000) // Send updates every 10 seconds // Clean up on close request.signal.addEventListener('abort', () => { clearInterval(interval) controller.close() }) } }) return new NextResponse(stream, { headers: { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive', 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Headers': 'Cache-Control' } }) } catch (error) { console.error("Error setting up SSE:", error) return new NextResponse("Internal Server Error", { status: 500 }) } }14d:T149a,// app/api/analytics/dashboard/route.ts import { NextRequest, NextResponse } from "next/server" import { executeQuery } from "@/lib/db" import { verifyAuth } from "@/lib/auth" export async function GET(request: NextRequest) { try { const { user, error } = await verifyAuth(request) if (!user) { return NextResponse.json({ error: error || "Unauthorized" }, { status: 401 }) } const { searchParams } = new URL(request.url) const period = searchParams.get("period") || "month" // day, week, month, year const startDate = searchParams.get("start_date") const endDate = searchParams.get("end_date") // Determine date range based on period let dateFilter = "" if (startDate && endDate) { dateFilter = `AND created_at BETWEEN '${startDate}' AND '${endDate}'` } else { switch (period) { case "day": dateFilter = "AND created_at >= CURRENT_DATE" break case "week": dateFilter = "AND created_at >= CURRENT_DATE - INTERVAL '7 days'" break case "month": dateFilter = "AND created_at >= CURRENT_DATE - INTERVAL '30 days'" break case "year": dateFilter = "AND created_at >= CURRENT_DATE - INTERVAL '365 days'" break default: dateFilter = "AND created_at >= CURRENT_DATE - INTERVAL '30 days'" } } // Role-based filtering let userFilter = "" if (user.role === 'individual' || user.role === 'company') { userFilter = `AND customer_id = ${user.id}` } // Get shipment statistics const shipmentStats = await executeQuery(` SELECT COUNT(*) as total_shipments, SUM(CASE WHEN status = 'delivered' THEN 1 ELSE 0 END) as delivered_shipments, SUM(CASE WHEN status = 'in_transit' THEN 1 ELSE 0 END) as active_shipments, SUM(CASE WHEN status = 'delayed' THEN 1 ELSE 0 END) as delayed_shipments, SUM(CASE WHEN status = 'cancelled' THEN 1 ELSE 0 END) as cancelled_shipments, SUM(CASE WHEN actual_delivery IS NOT NULL AND actual_delivery <= scheduled_delivery THEN 1 ELSE 0 END) as on_time_deliveries, SUM(CASE WHEN actual_delivery IS NOT NULL THEN 1 ELSE 0 END) as total_completed_deliveries, ROUND(AVG(estimated_cost), 2) as average_shipment_cost, ROUND(SUM(estimated_cost), 2) as total_shipment_cost FROM shipments WHERE 1=1 ${dateFilter} ${userFilter} `) // Get AI optimization statistics const aiStats = await executeQuery(` SELECT COUNT(*) as total_optimizations, SUM(CASE WHEN optimization_type = 'route' THEN 1 ELSE 0 END) as route_optimizations, SUM(CASE WHEN optimization_type = 'load_matching' THEN 1 ELSE 0 END) as load_matching_optimizations, SUM(CASE WHEN optimization_type = 'maintenance_prediction' THEN 1 ELSE 0 END) as maintenance_predictions, ROUND(AVG(confidence_score), 2) as average_confidence_score, ROUND(SUM(cost_savings), 2) as total_cost_savings, ROUND(SUM(time_savings), 2) as total_time_savings_minutes, ROUND(SUM(fuel_savings), 2) as total_fuel_savings_liters FROM ai_optimization_logs WHERE 1=1 ${dateFilter} `) // Get shipment volume over time const volumeOverTime = await executeQuery(` SELECT DATE_TRUNC('day', created_at) as date, COUNT(*) as shipment_count FROM shipments WHERE 1=1 ${dateFilter} ${userFilter} GROUP BY DATE_TRUNC('day', created_at) ORDER BY date `) // Get performance metrics const performanceMetrics = await executeQuery(` SELECT ROUND( SUM(CASE WHEN actual_delivery IS NOT NULL AND actual_delivery <= scheduled_delivery THEN 1 ELSE 0 END)::numeric / NULLIF(SUM(CASE WHEN actual_delivery IS NOT NULL THEN 1 ELSE 0 END), 0) * 100, 2 ) as on_time_delivery_rate, ROUND( AVG( EXTRACT(EPOCH FROM (actual_delivery - scheduled_delivery)) / 3600 )::numeric, 2 ) as average_delay_hours, ROUND( AVG( EXTRACT(EPOCH FROM (actual_delivery - actual_pickup)) / 3600 )::numeric, 2 ) as average_transit_time_hours FROM shipments WHERE actual_delivery IS NOT NULL ${dateFilter} ${userFilter} `) // Get top routes const topRoutes = await executeQuery(` SELECT o.city as origin_city, d.city as destination_city, COUNT(*) as shipment_count, ROUND(AVG(s.estimated_cost), 2) as average_cost FROM shipments s JOIN locations o ON s.origin_id = o.id JOIN locations d ON s.destination_id = d.id WHERE 1=1 ${dateFilter} ${userFilter} GROUP BY o.city, d.city ORDER BY shipment_count DESC LIMIT 5 `) return NextResponse.json({ shipment_stats: shipmentStats[0], ai_stats: aiStats[0], volume_over_time: volumeOverTime, performance_metrics: performanceMetrics[0], top_routes: topRoutes }) } catch (error) { console.error("Error fetching analytics data:", error) return NextResponse.json({ error: "Failed to fetch analytics data" }, { status: 500 }) } }14e:T32e6,// app/api/reports/generate/route.ts import { NextRequest, NextResponse } from "next/server" import { executeQuery } from "@/lib/db" import { verifyAuth } from "@/lib/auth" import { z } from "zod" const reportSchema = z.object({ report_type: z.enum(['shipment_performance', 'driver_performance', 'fleet_utilization', 'cost_analysis', 'route_efficiency']), start_date: z.string().datetime(), end_date: z.string().datetime(), filters: z.record(z.any()).optional(), grouping: z.enum(['day', 'week', 'month']).optional(), format: z.enum(['json', 'csv']).default('json') }) export async function POST(request: NextRequest) { try { const { user, error } = await verifyAuth(request) if (!user) { return NextResponse.json({ error: error || "Unauthorized" }, { status: 401 }) } const body = await request.json() // Validate input const validation = reportSchema.safeParse(body) if (!validation.success) { return NextResponse.json( { error: "Invalid input", details: validation.error.errors }, { status: 400 } ) } const { report_type, start_date, end_date, filters = {}, grouping = 'day', format } = validation.data // Role-based access control if (user.role === 'individual' && !['shipment_performance'].includes(report_type)) { return NextResponse.json({ error: "Insufficient permissions for this report type" }, { status: 403 }) } // Generate report based on type let reportData switch (report_type) { case 'shipment_performance': reportData = await generateShipmentPerformanceReport(user, start_date, end_date, filters, grouping) break case 'driver_performance': reportData = await generateDriverPerformanceReport(user, start_date, end_date, filters) break case 'fleet_utilization': reportData = await generateFleetUtilizationReport(user, start_date, end_date, filters, grouping) break case 'cost_analysis': reportData = await generateCostAnalysisReport(user, start_date, end_date, filters, grouping) break case 'route_efficiency': reportData = await generateRouteEfficiencyReport(user, start_date, end_date, filters) break default: return NextResponse.json({ error: "Invalid report type" }, { status: 400 }) } // Format response based on requested format if (format === 'csv') { // Convert to CSV (simplified implementation) const csv = convertToCSV(reportData) return new NextResponse(csv, { headers: { 'Content-Type': 'text/csv', 'Content-Disposition': `attachment; filename="${report_type}_${new Date().toISOString().split('T')[0]}.csv"` } }) } return NextResponse.json({ report_type, generated_at: new Date().toISOString(), period: { start_date, end_date }, data: reportData }) } catch (error) { console.error("Error generating report:", error) return NextResponse.json({ error: "Failed to generate report" }, { status: 500 }) } } // Helper function to convert data to CSV function convertToCSV(data: any[]): string { if (!data || data.length === 0) return '' const headers = Object.keys(data[0]) const headerRow = headers.join(',') const rows = data.map(row => { return headers.map(header => { const value = row[header] // Handle values that need to be quoted (contain commas, quotes, or newlines) if (typeof value === 'string' && (value.includes(',') || value.includes('"') || value.includes('\n'))) { return `"${value.replace(/"/g, '""')}"` } return value }).join(',') }) return [headerRow, ...rows].join('\n') } // Report generation functions async function generateShipmentPerformanceReport(user: any, startDate: string, endDate: string, filters: any, grouping: string) { // Role-based filtering let userFilter = "" if (user.role === 'individual' || user.role === 'company') { userFilter = `AND s.customer_id = ${user.id}` } // Apply additional filters let additionalFilters = "" if (filters.status) { additionalFilters += ` AND s.status = '${filters.status}'` } if (filters.priority) { additionalFilters += ` AND s.priority = '${filters.priority}'` } // Determine grouping format let dateFormat switch (grouping) { case 'day': dateFormat = 'YYYY-MM-DD' break case 'week': dateFormat = 'YYYY-"W"IW' break case 'month': dateFormat = 'YYYY-MM' break default: dateFormat = 'YYYY-MM-DD' } // Generate report const query = ` SELECT TO_CHAR(DATE_TRUNC('${grouping}', s.created_at), '${dateFormat}') as period, COUNT(*) as total_shipments, SUM(CASE WHEN s.status = 'delivered' THEN 1 ELSE 0 END) as delivered_shipments, SUM(CASE WHEN s.status = 'cancelled' THEN 1 ELSE 0 END) as cancelled_shipments, SUM(CASE WHEN s.actual_delivery IS NOT NULL AND s.actual_delivery <= s.scheduled_delivery THEN 1 ELSE 0 END) as on_time_deliveries, ROUND(AVG(CASE WHEN s.actual_delivery IS NOT NULL THEN EXTRACT(EPOCH FROM (s.actual_delivery - s.actual_pickup))/3600 ELSE NULL END), 2) as avg_transit_time_hours, ROUND(AVG(s.estimated_cost), 2) as avg_estimated_cost, ROUND(AVG(s.final_cost), 2) as avg_final_cost FROM shipments s WHERE s.created_at BETWEEN '${startDate}' AND '${endDate}' ${userFilter} ${additionalFilters} GROUP BY DATE_TRUNC('${grouping}', s.created_at) ORDER BY DATE_TRUNC('${grouping}', s.created_at) ` return await executeQuery(query) } async function generateDriverPerformanceReport(user: any, startDate: string, endDate: string, filters: any) { // Role-based filtering let userFilter = "" if (user.role === 'company') { userFilter = `AND r.shipment_id IN (SELECT id FROM shipments WHERE customer_id = ${user.id})` } // Apply additional filters let additionalFilters = "" if (filters.driver_id) { additionalFilters += ` AND d.id = ${filters.driver_id}` } // Generate report const query = ` SELECT d.id as driver_id, u.name as driver_name, COUNT(DISTINCT r.id) as total_routes, COUNT(DISTINCT r.shipment_id) as total_shipments, ROUND(AVG(d.rating), 2) as average_rating, SUM(r.distance) as total_distance_km, ROUND(AVG(CASE WHEN r.actual_duration IS NOT NULL AND r.estimated_duration IS NOT NULL THEN r.actual_duration::float / NULLIF(r.estimated_duration, 0) ELSE NULL END), 2) as time_efficiency_ratio, ROUND(AVG(CASE WHEN r.actual_cost IS NOT NULL AND r.estimated_cost IS NOT NULL THEN r.actual_cost::float / NULLIF(r.estimated_cost, 0) ELSE NULL END), 2) as cost_efficiency_ratio, SUM(CASE WHEN s.actual_delivery IS NOT NULL AND s.actual_delivery <= s.scheduled_delivery THEN 1 ELSE 0 END) as on_time_deliveries, COUNT(CASE WHEN s.actual_delivery IS NOT NULL THEN 1 ELSE NULL END) as completed_deliveries FROM drivers d JOIN users u ON d.user_id = u.id JOIN routes r ON d.id = r.driver_id JOIN shipments s ON r.shipment_id = s.id WHERE r.created_at BETWEEN '${startDate}' AND '${endDate}' ${userFilter} ${additionalFilters} GROUP BY d.id, u.name ORDER BY total_routes DESC ` return await executeQuery(query) } async function generateFleetUtilizationReport(user: any, startDate: string, endDate: string, filters: any, grouping: string) { // Role-based filtering let userFilter = "" if (user.role === 'company') { userFilter = `AND t.owner_id = ${user.id}` } // Apply additional filters let additionalFilters = "" if (filters.truck_id) { additionalFilters += ` AND t.id = ${filters.truck_id}` } // Determine grouping format let dateFormat switch (grouping) { case 'day': dateFormat = 'YYYY-MM-DD' break case 'week': dateFormat = 'YYYY-"W"IW' break case 'month': dateFormat = 'YYYY-MM' break default: dateFormat = 'YYYY-MM-DD' } // Generate report const query = ` WITH truck_days AS ( SELECT t.id as truck_id, t.license_plate, t.model, t.capacity, DATE_TRUNC('${grouping}', d::date) as period_start, COUNT(DISTINCT r.id) as route_count, SUM(CASE WHEN r.id IS NOT NULL THEN 1 ELSE 0 END) as active_days, COUNT(DISTINCT d::date) as total_days FROM trucks t CROSS JOIN generate_series('${startDate}'::date, '${endDate}'::date, '1 day'::interval) d LEFT JOIN routes r ON t.id = r.truck_id AND d::date BETWEEN DATE(r.start_time) AND DATE(r.end_time) WHERE t.created_at <= d::date ${userFilter} ${additionalFilters} GROUP BY t.id, t.license_plate, t.model, t.capacity, DATE_TRUNC('${grouping}', d::date) ) SELECT TO_CHAR(period_start, '${dateFormat}') as period, COUNT(DISTINCT truck_id) as total_trucks, SUM(route_count) as total_routes, SUM(active_days) as total_active_days, SUM(total_days) as total_possible_days, ROUND(SUM(active_days)::float / NULLIF(SUM(total_days), 0) * 100, 2) as utilization_rate FROM truck_days GROUP BY period_start ORDER BY period_start ` return await executeQuery(query) } async function generateCostAnalysisReport(user: any, startDate: string, endDate: string, filters: any, grouping: string) { // Role-based filtering let userFilter = "" if (user.role === 'individual' || user.role === 'company') { userFilter = `AND s.customer_id = ${user.id}` } // Apply additional filters let additionalFilters = "" if (filters.status) { additionalFilters += ` AND s.status = '${filters.status}'` } // Determine grouping format let dateFormat switch (grouping) { case 'day': dateFormat = 'YYYY-MM-DD' break case 'week': dateFormat = 'YYYY-"W"IW' break case 'month': dateFormat = 'YYYY-MM' break default: dateFormat = 'YYYY-MM-DD' } // Generate report const query = ` SELECT TO_CHAR(DATE_TRUNC('${grouping}', s.created_at), '${dateFormat}') as period, COUNT(*) as shipment_count, ROUND(SUM(s.estimated_cost), 2) as total_estimated_cost, ROUND(SUM(s.final_cost), 2) as total_final_cost, ROUND(AVG(s.estimated_cost), 2) as avg_estimated_cost, ROUND(AVG(s.final_cost), 2) as avg_final_cost, ROUND(SUM(CASE WHEN s.final_cost IS NOT NULL THEN s.final_cost - s.estimated_cost ELSE 0 END), 2) as total_cost_variance, ROUND(AVG(CASE WHEN s.final_cost IS NOT NULL THEN (s.final_cost - s.estimated_cost) / NULLIF(s.estimated_cost, 0) * 100 ELSE NULL END), 2) as avg_cost_variance_percent, ROUND(SUM(CASE WHEN s.ai_optimized THEN s.ai_savings ELSE 0 END), 2) as total_ai_savings FROM shipments s WHERE s.created_at BETWEEN '${startDate}' AND '${endDate}' ${userFilter} ${additionalFilters} GROUP BY DATE_TRUNC('${grouping}', s.created_at) ORDER BY DATE_TRUNC('${grouping}', s.created_at) ` return await executeQuery(query) } async function generateRouteEfficiencyReport(user: any, startDate: string, endDate: string, filters: any) { // Role-based filtering let userFilter = "" if (user.role === 'company') { userFilter = `AND s.customer_id = ${user.id}` } // Apply additional filters let additionalFilters = "" if (filters.origin_city) { additionalFilters += ` AND o.city = '${filters.origin_city}'` } if (filters.destination_city) { additionalFilters += ` AND d.city = '${filters.destination_city}'` } // Generate report const query = ` SELECT o.city as origin_city, d.city as destination_city, COUNT(*) as route_count, ROUND(AVG(r.distance), 2) as avg_distance_km, ROUND(AVG(CASE WHEN r.actual_duration IS NOT NULL THEN EXTRACT(EPOCH FROM r.actual_duration)/3600 ELSE NULL END), 2) as avg_duration_hours, ROUND(AVG(r.fuel_consumption), 2) as avg_fuel_consumption_liters, ROUND(AVG(CASE WHEN r.distance > 0 THEN r.fuel_consumption / r.distance ELSE NULL END), 4) as avg_fuel_efficiency_l_per_km, ROUND(AVG(r.actual_cost), 2) as avg_cost, ROUND(AVG(CASE WHEN r.ai_optimized THEN r.optimization_savings ELSE 0 END), 2) as avg_ai_savings, COUNT(CASE WHEN r.ai_optimized THEN 1 ELSE NULL END) as ai_optimized_routes, ROUND(COUNT(CASE WHEN r.ai_optimized THEN 1 ELSE NULL END)::float / COUNT(*) * 100, 2) as ai_optimization_rate FROM routes r JOIN shipments s ON r.shipment_id = s.id JOIN locations o ON s.origin_id = o.id JOIN locations d ON s.destination_id = d.id WHERE r.created_at BETWEEN '${startDate}' AND '${endDate}' ${userFilter} ${additionalFilters} GROUP BY o.city, d.city ORDER BY route_count DESC ` return await executeQuery(query) }14f:T7f5,// middleware.ts import { NextResponse } from 'next/server' import type { NextRequest } from 'next/server' import { verifyToken } from './lib/auth' // Define which paths require authentication const authPaths = [ '/api/shipments', '/api/trucks', '/api/drivers', '/api/routes', '/api/locations', '/api/documents', '/api/analytics', '/api/reports', '/api/ai', '/api/events', '/api/auth/me', ] // Define paths that are public const publicPaths = [ '/api/auth/login', '/api/auth/signup', '/api/health', ] export async function middleware(request: NextRequest) { const { pathname } = request.nextUrl // Skip middleware for public paths if (publicPaths.some(path => pathname.startsWith(path))) { return NextResponse.next() } // Check if path requires authentication if (authPaths.some(path => pathname.startsWith(path))) { // Get token from Authorization header const authHeader = request.headers.get('authorization') if (!authHeader || !authHeader.startsWith('Bearer ')) { return new NextResponse( JSON.stringify({ error: 'Authentication required' }), { status: 401, headers: { 'Content-Type': 'application/json' } } ) } const token = authHeader.substring(7) const decoded = verifyToken(token) if (!decoded) { return new NextResponse( JSON.stringify({ error: 'Invalid or expired token' }), { status: 401, headers: { 'Content-Type': 'application/json' } } ) } // Add user info to request headers for downstream use const requestHeaders = new Headers(request.headers) requestHeaders.set('x-user-id', decoded.id) requestHeaders.set('x-user-role', decoded.role) // Continue with modified headers return NextResponse.next({ request: { headers: requestHeaders, }, }) } // For all other paths, continue normally return NextResponse.next() } // Configure middleware to run only for API routes export const config = { matcher: '/api/:path*', }150:T688,// app/api/health/route.ts import { NextRequest, NextResponse } from "next/server" import { checkDatabaseConnection } from "@/lib/db" import { supabaseServer } from "@/lib/supabase-server" export async function GET(request: NextRequest) { try { // Check database connection const dbStatus = await checkDatabaseConnection() // Check Supabase connection let supabaseStatus = { status: 'error', error: 'Connection failed' } try { const { data, error } = await supabaseServer.from('_health').select('*').limit(1) supabaseStatus = error ? { status: 'error', error: error.message } : { status: 'connected', timestamp: new Date().toISOString() } } catch (error) { supabaseStatus = { status: 'error', error: error.message } } // Check environment variables const envStatus = { database_url: !!process.env.DATABASE_URL, supabase_url: !!process.env.SUPABASE_URL, supabase_anon_key: !!process.env.SUPABASE_ANON_KEY, jwt_secret: !!process.env.JWT_SECRET, groq_api_key: !!process.env.GROQ_API_KEY } return NextResponse.json({ status: 'ok', timestamp: new Date().toISOString(), version: process.env.APP_VERSION || '1.0.0', environment: process.env.NODE_ENV, services: { database: dbStatus, supabase: supabaseStatus, environment_variables: envStatus } }) } catch (error) { console.error("Health check error:", error) return NextResponse.json( { status: 'error', timestamp: new Date().toISOString(), error: error.message }, { status: 500 } ) } }151:Tbd265,[V0_FILE]typescriptreact:file="components/features-section-demo-2.tsx" isMerged="true" import type React from "react" import { cn } from "@/lib/utils" import { IconAdjustmentsBolt, IconCloud, IconCurrencyDollar, IconEaseInOut, IconHeart, IconHelp, IconRouteAltLeft, IconTerminal2, } from "@tabler/icons-react" export default function FeaturesSectionDemo() { const features = [ { title: "Built for developers", description: "Built for engineers, developers, dreamers, thinkers and doers.", icon: , }, { title: "Ease of use", description: "It's as easy as using an Apple, and as expensive as buying one.", icon: , }, { title: "Pricing like no other", description: "Our prices are best in the market. No cap, no lock, no credit card required.", icon: , }, { title: "100% Uptime guarantee", description: "We just cannot be taken down by anyone.", icon: , }, { title: "Multi-tenant Architecture", description: "You can simply share passwords instead of buying new seats", icon: , }, { title: "24/7 Customer Support", description: "We are available a 100% of the time. Atleast our AI Agents are.", icon: , }, { title: "Money back guarantee", description: "If you donot like EveryAI, we will convince you to like us.", icon: , }, { title: "And everything else", description: "I just ran out of copy ideas. Accept my sincere apologies", icon: , }, ] return (

{features.map((feature, index) => ( ))}

) } const Feature = ({ title, description, icon, index, }: { title: string description: string icon: React.ReactNode index: number }) => { return (

{index < 4 && (

)} {index >= 4 && (

)}

{icon}

{title}

{description}

) } [V0_FILE]typescriptreact:file="truck-logistics-dashboard.tsx" isMerged="true" "use client" import { useState } from "react" import { Truck, MapPin, BarChart3, Settings, Users, AlertTriangle, Package, PenToolIcon as Tool, DollarSign, Route, } from "lucide-react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Button } from "@/components/ui/button" import { Progress } from "@/components/ui/progress" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" export default function TruckLogisticsDashboard() { const [activeTab, setActiveTab] = useState("overview") return (

TruckLogix

Truck Logistics Dashboard

Overview Fleet Routes Deliveries Maintenance Costs Drivers Settings

Active Trucks

18/24

6 trucks in maintenance

Deliveries Today

28 completed, 14 in progress

Fuel Efficiency

7.2 mpg

+0.3 from last month

Maintenance Alerts

2 critical, 1 routine

Active Routes Current truck locations and routes

Interactive map would display here

Upcoming Deliveries Next 5 scheduled deliveries

{[ { id: "DEL-4392", location: "Chicago Distribution Center", time: "10:30 AM", status: "In Transit", }, { id: "DEL-4393", location: "Milwaukee Warehouse", time: "11:45 AM", status: "Scheduled" }, { id: "DEL-4394", location: "Detroit Retail Store", time: "1:15 PM", status: "Scheduled" }, { id: "DEL-4395", location: "Indianapolis Factory", time: "2:30 PM", status: "Scheduled" }, { id: "DEL-4396", location: "Columbus Depot", time: "4:00 PM", status: "Scheduled" }, ].map((delivery) => (

{delivery.id}

{delivery.location}

{delivery.status}

{delivery.time}

))}

Maintenance Schedule Upcoming maintenance tasks

{[ { truck: "TRK-1042", task: "Oil Change", date: "Mar 25", priority: "Routine" }, { truck: "TRK-1036", task: "Brake Inspection", date: "Mar 26", priority: "Critical" }, { truck: "TRK-1039", task: "Tire Rotation", date: "Mar 27", priority: "Routine" }, ].map((task, i) => (

{task.truck}

{task.task}

{task.priority}

{task.date}

))}

Fuel Consumption Last 7 days

{[ { day: "Monday", gallons: 420, percent: 70 }, { day: "Tuesday", gallons: 380, percent: 63 }, { day: "Wednesday", gallons: 450, percent: 75 }, { day: "Thursday", gallons: 520, percent: 87 }, { day: "Friday", gallons: 480, percent: 80 }, { day: "Saturday", gallons: 350, percent: 58 }, { day: "Sunday", gallons: 280, percent: 47 }, ].map((day) => (

{day.day}

{day.gallons} gal

))}

Driver Performance Top 5 drivers by efficiency

{[ { name: "John Smith", id: "DRV-104", efficiency: 92, deliveries: 18 }, { name: "Maria Garcia", id: "DRV-087", efficiency: 89, deliveries: 16 }, { name: "David Chen", id: "DRV-112", efficiency: 87, deliveries: 15 }, { name: "Sarah Johnson", id: "DRV-098", efficiency: 85, deliveries: 17 }, { name: "Robert Kim", id: "DRV-076", efficiency: 83, deliveries: 14 }, ].map((driver) => (

{driver.name .split(" ") .map((n) => n[0]) .join("")}

{driver.name}

{driver.id}

{driver.efficiency}%

{driver.deliveries} deliveries

))}

Fleet Management Manage your truck fleet, view status and details

Fleet management content would go here, including:

Truck inventory and status
Vehicle specifications
Maintenance history
Assignment status
Fuel efficiency tracking

Route Optimization Plan and optimize delivery routes

Route optimization tools would go here, including:

Interactive route planning
Traffic-aware routing
Multi-stop optimization
Fuel efficiency calculations
ETA predictions

Delivery Management Track and manage all deliveries

Delivery management tools would go here, including:

Delivery scheduling
Real-time tracking
Proof of delivery
Customer notifications
Delivery history

Maintenance Tracking Schedule and track vehicle maintenance

Maintenance tracking tools would go here, including:

Preventive maintenance scheduling
Service history
Parts inventory
Maintenance alerts
Cost tracking

Cost Analysis Track and analyze operational costs

Cost analysis tools would go here, including:

Fuel cost tracking
Maintenance expenses
Driver wages
Cost per mile calculations
Budget planning

Driver Management Manage driver information and performance

Driver management tools would go here, including:

Driver profiles
License and certification tracking
Hours of service compliance
Performance metrics
Training records

System Settings Configure system preferences

Settings options would go here, including:

User management
Notification preferences
Integration settings
Data import/export
System configuration

) } [V0_FILE]typescriptreact:file="components/hero-animation.tsx" isMerged="true" "use client" import { useRef } from "react" import { motion } from "framer-motion" import { Truck, Package, BarChart3, MapPin } from "lucide-react" export default function HeroAnimation() { const containerRef = useRef(null) return (

{/* Map background */}

{/* Animated routes */} {/* Animated elements */} {/* Moving truck animation */}

{/* Pulse effects at key locations */} {[ { top: "20%", left: "15%", delay: 0, color: "bg-indigo-500" }, { top: "70%", left: "25%", delay: 2, color: "bg-cyan-500" }, { top: "30%", left: "60%", delay: 4, color: "bg-purple-500" }, { top: "60%", left: "75%", delay: 6, color: "bg-blue-500" }, { top: "40%", left: "85%", delay: 8, color: "bg-indigo-500" }, ].map((pos, index) => ( ))}

) } [V0_FILE]typescriptreact:file="app/dashboard/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/route-map.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" import { motion } from "framer-motion" import { Truck, Search, Plus, Minus, MapPin, Layers, X } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" export default function RouteMap() { const mapRef = useRef(null) const [isLoaded, setIsLoaded] = useState(false) const [searchQuery, setSearchQuery] = useState("") useEffect(() => { // Simulate map loading const timer = setTimeout(() => { setIsLoaded(true) }, 1000) return () => clearTimeout(timer) }, []) return (

{!isLoaded ? (

Loading map...

) : ( <> {/* Map background */}

{/* Map controls */}

setSearchQuery(e.target.value)} className="h-9 w-full pl-10 pr-4 rounded-md bg-[#1e293b] border border-[#2d3748] text-gray-300 placeholder:text-gray-500 focus:border-blue-500 focus:outline-none" />

{/* Order marker */}

{/* Moving truck */}

{/* Zone overlays */}

{/* Order popup */}

Dispatched

order_vloJEBq

May 5, 2024 13:30

397 YISHUN AVENUE 6 #11-1124, SINGAPORE

THE MANDARIN SHOPPING ARCADE #02-08 SINGAPORE

)}

) } [V0_FILE]plaintext:file="public/images/dashboard.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-03-24%20at%2000.18.40.png-vw6A0mn5KYUWunVJbh3b9buzqBKKWs.jpeg" isMerged="true" [V0_FILE]typescriptreact:file="components/feature-card.tsx" isMerged="true" import type { ReactNode } from "react" import { Card, CardContent } from "@/components/ui/card" interface FeatureCardProps { icon: ReactNode title: string description: string } export default function FeatureCard({ icon, title, description }: FeatureCardProps) { return (

{icon}

{title}

{description}

) } [V0_FILE]typescriptreact:file="components/process-step.tsx" isMerged="true" interface ProcessStepProps { number: string title: string description: string color: string } export default function ProcessStep({ number, title, description, color }: ProcessStepProps) { return (

{number}

{title}

{description}

) } [V0_FILE]typescriptreact:file="components/testimonial-card.tsx" isMerged="true" import Image from "next/image" import { Card, CardContent } from "@/components/ui/card" interface TestimonialCardProps { quote: string author: string company: string image: string } export default function TestimonialCard({ quote, author, company, image }: TestimonialCardProps) { return (

{quote}

{author}

{company}

) } [V0_FILE]typescriptreact:file="components/stat-card.tsx" isMerged="true" import { Card, CardContent } from "@/components/ui/card" interface StatCardProps { value: string label: string } export default function StatCard({ value, label }: StatCardProps) { return (

{value}

{label}

) } [V0_FILE]typescriptreact:file="components/feature-showcase.tsx" isMerged="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import { Truck, BarChart3, MapPin, Clock, Shield, Users, Smartphone, Zap } from "lucide-react" const features = [ { icon: , title: "Fleet Management", description: "Manage your entire fleet from a single dashboard. Track vehicles, monitor maintenance, and optimize utilization.", color: "bg-indigo-600", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-03-24%20at%2000.18.44-7fzgjPC6CLxJ0vfouKtRzxIXO8a8gn.png", }, { icon: , title: "Real-time Tracking", description: "Know where your vehicles are at all times with GPS tracking. Get accurate ETAs and route information.", color: "bg-cyan-600", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-03-24%20at%2000.16.38.png-hGKnflEtBbguYNcCPGGmMoFGctzRMZ.jpeg", }, { icon: , title: "Advanced Analytics", description: "Gain insights into your operations with comprehensive analytics. Identify trends and optimize for efficiency.", color: "bg-purple-600", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-03-24%20at%2000.16.45-5NBsG7lQb9ItGlWQ7rOFZVvqwuQu9Z.png", }, { icon: , title: "Route Optimization", description: "Save time and fuel with AI-powered route optimization. Reduce costs and improve delivery times.", color: "bg-blue-600", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-03-24%20at%2000.18.30.png-2JeHRbyATd1LUaFTaHVi22Fcz6xW7M.jpeg", }, { icon: , title: "Safety & Compliance", description: "Ensure driver safety and regulatory compliance. Monitor driving behavior and maintain electronic logs.", color: "bg-emerald-600", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-03-24%20at%2000.18.24.png-55qB8eDsMQBi5ThXbwdjONnAScSpxh.jpeg", }, { icon: , title: "Mobile Access", description: "Access your dashboard on the go with our mobile app. Stay connected with your fleet from anywhere.", color: "bg-amber-600", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-03-24%20at%2000.18.13.png-BHbcNprML76TSRp6gfTBWem9orE79I.jpeg", }, { icon: , title: "Driver Management", description: "Manage driver profiles, assignments, and performance. Streamline communication and improve efficiency.", color: "bg-rose-600", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-03-24%20at%2000.18.13.png-eykSwa7FH5jSG6zh4uwtUef5Ybt43k.jpeg", }, { icon: , title: "Workflow Automation", description: "Automate routine tasks and processes. Reduce manual work and focus on growing your business.", color: "bg-fuchsia-600", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-03-24%20at%2000.16.50-prBQiXih3O9p2wgm5VzPvHKYP8DF1A.png", }, ] export default function FeatureShowcase() { const [activeFeature, setActiveFeature] = useState(0) return (

{features.slice(0, 4).map((feature, index) => ( setActiveFeature(index)} whileHover={{ x: 5 }} initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3, delay: index * 0.1 }} >

{feature.icon}

{feature.title}

{feature.description}

))}

{features[activeFeature].icon}

{features[activeFeature].title}

{features[activeFeature].description}

{features.slice(4, 8).map((feature, index) => ( setActiveFeature(index + 4)} whileHover={{ x: 5 }} initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3, delay: (index + 4) * 0.1 }} >

{feature.icon}

{feature.title}

{feature.description}

))}

) } [V0_FILE]typescriptreact:file="components/roadmap-section.tsx" isMerged="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import { CheckCircle, Clock, ArrowRight } from "lucide-react" const roadmapItems = [ { quarter: "Q2 2025", title: "Enhanced Mobile Experience", description: "Completely redesigned mobile app with offline capabilities and improved driver interface.", status: "completed", features: [ "Offline mode for drivers in remote areas", "Voice-guided navigation integration", "Digital proof of delivery with signature capture", "Real-time chat between dispatchers and drivers", ], }, { quarter: "Q3 2025", title: "Advanced Analytics & Reporting", description: "Powerful business intelligence tools to gain deeper insights into your logistics operations.", status: "in-progress", features: [ "Customizable dashboard with drag-and-drop widgets", "Advanced filtering and data visualization", "Scheduled reports with automated delivery", "Performance benchmarking against industry standards", ], }, { quarter: "Q4 2025", title: "AI-Powered Route Optimization", description: "Machine learning algorithms that continuously improve routing based on historical data.", status: "planned", features: [ "Dynamic rerouting based on real-time traffic conditions", "Weather-aware routing to avoid hazardous conditions", "Predictive ETAs with machine learning", "Multi-vehicle optimization for complex delivery scenarios", ], }, { quarter: "Q1 2026", title: "Sustainability Features", description: "Tools to help reduce your carbon footprint and optimize for eco-friendly operations.", status: "planned", features: [ "Carbon footprint tracking and reporting", "Electric vehicle fleet management", "Eco-driving score for drivers", "Sustainable route planning to minimize emissions", ], }, { quarter: "Q2 2026", title: "Integration Marketplace", description: "Expand platform capabilities with third-party integrations and custom extensions.", status: "planned", features: [ "Open API for custom integrations", "Pre-built connectors for popular business systems", "Developer portal with documentation and SDKs", "Partner marketplace for specialized solutions", ], }, ] export default function RoadmapSection() { const [activeItem, setActiveItem] = useState(0) return (

{roadmapItems.map((item, index) => ( setActiveItem(index)} whileHover={{ x: 5 }} initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3, delay: index * 0.1 }} >

{item.quarter} {item.status === "completed" ? ( <> Completed ) : item.status === "in-progress" ? ( <> In Progress ) : ( <> Planned )}

{item.title}

{item.description}

))}

{roadmapItems[activeItem].quarter}

{roadmapItems[activeItem].title}

{roadmapItems[activeItem].status === "completed" ? ( <> Completed ) : roadmapItems[activeItem].status === "in-progress" ? ( <> In Progress ) : ( <> Planned )}

{roadmapItems[activeItem].description}

Key Features:

{roadmapItems[activeItem].features.map((feature, index) => (

{feature}

))}

Development Timeline:

Planning Development Testing Release

) } [V0_FILE]typescriptreact:file="components/testimonial-carousel.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import { ChevronLeft, ChevronRight, Star } from "lucide-react" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" const testimonials = [ { quote: "FleetSync has transformed our logistics operations. We've cut delivery times by 30% and reduced costs significantly. The real-time tracking and analytics have been game-changers for our business.", author: "Sarah Johnson", title: "Operations Director", company: "Global Logistics Inc.", image: "/placeholder.svg?height=64&width=64", rating: 5, }, { quote: "The route optimization feature alone has saved us thousands in fuel costs each month. The AI-powered routing suggestions are incredibly accurate and have helped us improve our delivery efficiency by over 40%.", author: "Michael Chen", title: "Fleet Manager", company: "Express Delivery Co.", image: "/placeholder.svg?height=64&width=64", rating: 5, }, { quote: "As a small business owner, I was hesitant about investing in fleet management software, but FleetSync has paid for itself many times over. The interface is intuitive, and the customer support team is always responsive.", author: "David Rodriguez", title: "Owner", company: "Rodriguez Shipping", image: "/placeholder.svg?height=64&width=64", rating: 4, }, { quote: "We've tried several logistics platforms, but none compare to FleetSync. The comprehensive analytics and reporting features give us insights we never had before, helping us make data-driven decisions.", author: "Emily Watkins", title: "Logistics Coordinator", company: "Transcontinental Freight", image: "/placeholder.svg?height=64&width=64", rating: 5, }, ] export default function TestimonialCarousel() { const [current, setCurrent] = useState(0) const [direction, setDirection] = useState(0) const next = () => { setDirection(1) setCurrent((current + 1) % testimonials.length) } const prev = () => { setDirection(-1) setCurrent((current - 1 + testimonials.length) % testimonials.length) } useEffect(() => { const interval = setInterval(() => { next() }, 8000) return () => clearInterval(interval) }, [current]) const variants = { enter: (direction) => ({ x: direction > 0 ? 200 : -200, opacity: 0, }), center: { x: 0, opacity: 1, }, exit: (direction) => ({ x: direction < 0 ? 200 : -200, opacity: 0, }), } return (

{testimonials.map((_, index) => (

{[...Array(testimonials[current].rating)].map((_, i) => ( ))} {[...Array(5 - testimonials[current].rating)].map((_, i) => ( ))}

"{testimonials[current].quote}"

{testimonials[current].author .split(" ") .map((n) => n[0]) .join("")}

{testimonials[current].author}

{testimonials[current].title}, {testimonials[current].company}

) } [V0_FILE]plaintext:file="public/images/tracking.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-03-24%20at%2000.16.38.png-hGKnflEtBbguYNcCPGGmMoFGctzRMZ.jpeg" isMerged="true" [V0_FILE]plaintext:file="public/images/analytics.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-03-24%20at%2000.18.30.png-2JeHRbyATd1LUaFTaHVi22Fcz6xW7M.jpeg" isMerged="true" [V0_FILE]plaintext:file="public/images/fleet-management.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-03-24%20at%2000.18.44-7fzgjPC6CLxJ0vfouKtRzxIXO8a8gn.png" isMerged="true" [V0_FILE]plaintext:file="public/images/workflow.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-03-24%20at%2000.16.50-prBQiXih3O9p2wgm5VzPvHKYP8DF1A.png" isMerged="true" [V0_FILE]typescriptreact:file="components/order-details.tsx" isMerged="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import { Edit, X } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { Separator } from "@/components/ui/separator" import ActivityTimeline from "./activity-timeline" interface OrderDetailsProps { orderId: string onClose: () => void } export default function OrderDetails({ orderId, onClose }: OrderDetailsProps) { const [activeTab, setActiveTab] = useState<"activity" | "details" | "rate">("activity") return (

{/* Header */}

Dispatched

{orderId}

May 5, 2024 13:30

{/* Tabs */}

{/* Tab content */}

{activeTab === "activity" && (

)} {activeTab === "details" && (

Dispatched

Customer

John Doe

+6596379222

Facilitator

No Facilitator

Driver Assigned

No Driver

Internal ID

FLB-29394

Tracking Number

FLE3308311534SG

Type

Transport

Date Scheduled

Date Dispatched

May 5, 2024 13:30

Date Started

Proof of Delivery

Photo

)} {activeTab === "rate" && (

BREAKDOWN

SGD

Base Fee

S$18.00

Service Fee

S$10.00

Total

S$28.00

)}

) } [V0_FILE]typescriptreact:file="components/activity-timeline.tsx" isMerged="true" "use client" import { motion } from "framer-motion" export default function ActivityTimeline() { const activities = [ { type: "Order Created", description: "New order created", date: "May 5, 2024", time: "1:30 PM", isActive: true, }, { type: "Order Dispatched", description: "Order has been dispatched", date: "May 5, 2024", time: "1:30 PM", isActive: true, }, ] return (

{activities.map((activity, index) => (

{index < activities.length - 1 && (

)}

{activity.type}

{activity.description}

{activity.date} • {activity.time}

))}

) } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return

} export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="app/signup/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { useRouter } from "next/navigation" import { motion } from "framer-motion" import { Truck, Eye, EyeOff, UserPlus, ChevronLeft } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { useAuth } from "@/lib/auth-context" export default function SignupPage() { const router = useRouter() const { login } = useAuth() const [isLoading, setIsLoading] = useState(false) const [showPassword, setShowPassword] = useState(false) const [formData, setFormData] = useState({ name: "", email: "", password: "", confirmPassword: "", }) const [errors, setErrors] = useState({ name: "", email: "", password: "", confirmPassword: "", }) const validateForm = () => { let valid = true const newErrors = { name: "", email: "", password: "", confirmPassword: "" } if (!formData.name) { newErrors.name = "Name is required" valid = false } if (!formData.email) { newErrors.email = "Email is required" valid = false } else if (!/\S+@\S+\.\S+/.test(formData.email)) { newErrors.email = "Email is invalid" valid = false } if (!formData.password) { newErrors.password = "Password is required" valid = false } else if (formData.password.length < 6) { newErrors.password = "Password must be at least 6 characters" valid = false } if (!formData.confirmPassword) { newErrors.confirmPassword = "Please confirm your password" valid = false } else if (formData.password !== formData.confirmPassword) { newErrors.confirmPassword = "Passwords do not match" valid = false } setErrors(newErrors) return valid } const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) // Clear error when user types if (errors[name as keyof typeof errors]) { setErrors((prev) => ({ ...prev, [name]: "" })) } } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!validateForm()) return setIsLoading(true) try { // Simulate API call with a timeout await new Promise((resolve) => setTimeout(resolve, 1500)) // Demo signup (in a real app, this would be a server API call) login({ name: formData.name, email: formData.email }) router.push("/dashboard") } catch (error) { console.error("Signup error:", error) setErrors({ ...errors, email: "Registration failed. Please try again.", }) } finally { setIsLoading(false) } } return (

{/* Background elements */}

{/* Header */}

FleetSync

{/* Main content */}

Create an Account Enter your information to create an account

Full Name {errors.name &&

{errors.name}

}

Email {errors.email &&

{errors.email}

}

Password

{errors.password &&

{errors.password}

}

Confirm Password

{errors.confirmPassword &&

{errors.confirmPassword}

}

I agree to the{" "} Terms of Service {" "} and{" "} Privacy Policy

Or continue with

Already have an account?{" "} Sign in

) } [V0_FILE]typescriptreact:file="app/forgot-password/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { motion } from "framer-motion" import { Truck, ChevronLeft, Mail } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" export default function ForgotPasswordPage() { const [isLoading, setIsLoading] = useState(false) const [email, setEmail] = useState("") const [error, setError] = useState("") const [isSubmitted, setIsSubmitted] = useState(false) const validateForm = () => { if (!email) { setError("Email is required") return false } else if (!/\S+@\S+\.\S+/.test(email)) { setError("Email is invalid") return false } return true } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!validateForm()) return setIsLoading(true) try { // Simulate API call with a timeout await new Promise((resolve) => setTimeout(resolve, 1500)) // Show success message setIsSubmitted(true) } catch (error) { console.error("Password reset error:", error) setError("Failed to send reset link. Please try again.") } finally { setIsLoading(false) } } return (

{/* Background elements */}

{/* Header */}

FleetSync

{/* Main content */}

Reset Password Enter your email to receive a password reset link {!isSubmitted ? (

Email { setEmail(e.target.value) if (error) setError("") }} className={`bg-[#111827] border-[#2d3748] text-white placeholder:text-gray-500 h-10 ${ error ? "border-red-500 focus-visible:ring-red-500" : "focus-visible:ring-blue-500" }`} disabled={isLoading} /> {error &&

{error}

}

) : (

Reset link sent!

We've sent a password reset link to {email}. Please check your inbox and follow the instructions to reset your password.

)}

Remember your password?{" "} Back to login

) } [V0_FILE]typescriptreact:file="components/logout-button.tsx" isMerged="true" "use client" import { LogOut } from "lucide-react" import { Button } from "@/components/ui/button" import { useAuth } from "@/lib/auth-context" interface LogoutButtonProps { variant?: "default" | "outline" | "ghost" size?: "default" | "sm" | "lg" | "icon" } export default function LogoutButton({ variant = "ghost", size = "default" }: LogoutButtonProps) { const { logout } = useAuth() return ( ) } [V0_FILE]typescriptreact:file="components/auth-redirect.tsx" isMerged="true" "use client" import { useEffect } from "react" import { useRouter } from "next/navigation" import { useAuth } from "@/lib/auth-context" interface AuthRedirectProps { redirectTo: string requireAuth?: boolean } export default function AuthRedirect({ redirectTo, requireAuth = true }: AuthRedirectProps) { const { isAuthenticated } = useAuth() const router = useRouter() useEffect(() => { // If authentication is required but user is not authenticated, redirect if (requireAuth && !isAuthenticated) { router.push(redirectTo) } // If user is authenticated but shouldn't be on this page, redirect if (!requireAuth && isAuthenticated) { router.push(redirectTo) } }, [isAuthenticated, redirectTo, requireAuth, router]) return null } [V0_FILE]typescriptreact:file="app/api/trucks/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { executeQuery } from "@/lib/db" // Get all trucks export async function GET(request: NextRequest) { try { const searchParams = request.nextUrl.searchParams const status = searchParams.get("status") let query = "SELECT * FROM trucks" const params: any[] = [] if (status) { query += " WHERE status = $1" params.push(status) } query += " ORDER BY created_at DESC" const trucks = await executeQuery(query, params) return NextResponse.json(trucks) } catch (error) { console.error("Error fetching trucks:", error) return NextResponse.json({ error: "Failed to fetch trucks" }, { status: 500 }) } } // Create a new truck export async function POST(request: NextRequest) { try { const { license_plate, model, capacity, status, fuel_efficiency } = await request.json() // Validate input if (!license_plate || !model || !capacity) { return NextResponse.json({ error: "License plate, model, and capacity are required" }, { status: 400 }) } // Check if truck with license plate already exists const existingTruck = await executeQuery("SELECT * FROM trucks WHERE license_plate = $1", [license_plate]) if (existingTruck.length > 0) { return NextResponse.json({ error: "Truck with this license plate already exists" }, { status: 409 }) } // Create truck const result = await executeQuery( `INSERT INTO trucks (license_plate, model, capacity, status, fuel_efficiency) VALUES ($1, $2, $3, $4, $5) RETURNING *`, [license_plate, model, capacity, status || "available", fuel_efficiency], ) return NextResponse.json(result[0], { status: 201 }) } catch (error) { console.error("Error creating truck:", error) return NextResponse.json({ error: "Failed to create truck" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/trucks/[id]/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { executeQuery } from "@/lib/db" // Get a specific truck export async function GET(request: NextRequest, { params }: { params: { id: string } }) { try { const id = params.id const trucks = await executeQuery("SELECT * FROM trucks WHERE id = $1", [id]) if (trucks.length === 0) { return NextResponse.json({ error: "Truck not found" }, { status: 404 }) } return NextResponse.json(trucks[0]) } catch (error) { console.error("Error fetching truck:", error) return NextResponse.json({ error: "Failed to fetch truck" }, { status: 500 }) } } // Update a truck export async function PUT(request: NextRequest, { params }: { params: { id: string } }) { try { const id = params.id const { license_plate, model, capacity, status, fuel_efficiency, last_maintenance_date, next_maintenance_date } = await request.json() // Check if truck exists const existingTruck = await executeQuery("SELECT * FROM trucks WHERE id = $1", [id]) if (existingTruck.length === 0) { return NextResponse.json({ error: "Truck not found" }, { status: 404 }) } // Update truck const result = await executeQuery( `UPDATE trucks SET license_plate = $1, model = $2, capacity = $3, status = $4, fuel_efficiency = $5, last_maintenance_date = $6, next_maintenance_date = $7, updated_at = CURRENT_TIMESTAMP WHERE id = $8 RETURNING *`, [license_plate, model, capacity, status, fuel_efficiency, last_maintenance_date, next_maintenance_date, id], ) return NextResponse.json(result[0]) } catch (error) { console.error("Error updating truck:", error) return NextResponse.json({ error: "Failed to update truck" }, { status: 500 }) } } // Delete a truck export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) { try { const id = params.id // Check if truck exists const existingTruck = await executeQuery("SELECT * FROM trucks WHERE id = $1", [id]) if (existingTruck.length === 0) { return NextResponse.json({ error: "Truck not found" }, { status: 404 }) } // Check if truck is being used in any active routes const activeRoutes = await executeQuery( `SELECT * FROM routes WHERE truck_id = $1 AND status NOT IN ('completed', 'cancelled')`, [id], ) if (activeRoutes.length > 0) { return NextResponse.json({ error: "Cannot delete truck that is assigned to active routes" }, { status: 400 }) } // Delete truck await executeQuery("DELETE FROM trucks WHERE id = $1", [id]) return NextResponse.json({ success: true }) } catch (error) { console.error("Error deleting truck:", error) return NextResponse.json({ error: "Failed to delete truck" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/drivers/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { executeQuery } from "@/lib/db" // Get all drivers export async function GET(request: NextRequest) { try { const searchParams = request.nextUrl.searchParams const status = searchParams.get("status") let query = ` SELECT d.*, u.name, u.email FROM drivers d JOIN users u ON d.user_id = u.id ` const params: any[] = [] if (status) { query += " WHERE d.status = $1" params.push(status) } query += " ORDER BY d.created_at DESC" const drivers = await executeQuery(query, params) return NextResponse.json(drivers) } catch (error) { console.error("Error fetching drivers:", error) return NextResponse.json({ error: "Failed to fetch drivers" }, { status: 500 }) } } // Create a new driver export async function POST(request: NextRequest) { try { const { user_id, license_number, license_expiry_date, phone_number, status } = await request.json() // Validate input if (!user_id || !license_number || !license_expiry_date || !phone_number) { return NextResponse.json( { error: "User ID, license number, expiry date, and phone number are required" }, { status: 400 }, ) } // Check if user exists const existingUser = await executeQuery("SELECT * FROM users WHERE id = $1", [user_id]) if (existingUser.length === 0) { return NextResponse.json({ error: "User not found" }, { status: 404 }) } // Check if driver with license number already exists const existingDriver = await executeQuery("SELECT * FROM drivers WHERE license_number = $1", [license_number]) if (existingDriver.length > 0) { return NextResponse.json({ error: "Driver with this license number already exists" }, { status: 409 }) } // Create driver const result = await executeQuery( `INSERT INTO drivers (user_id, license_number, license_expiry_date, phone_number, status) VALUES ($1, $2, $3, $4, $5) RETURNING *`, [user_id, license_number, license_expiry_date, phone_number, status || "available"], ) // Get user details const user = await executeQuery("SELECT name, email FROM users WHERE id = $1", [user_id]) const driverWithUser = { ...result[0], name: user[0].name, email: user[0].email, } return NextResponse.json(driverWithUser, { status: 201 }) } catch (error) { console.error("Error creating driver:", error) return NextResponse.json({ error: "Failed to create driver" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/drivers/[id]/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { executeQuery } from "@/lib/db" // Get a specific driver export async function GET(request: NextRequest, { params }: { params: { id: string } }) { try { const id = params.id const drivers = await executeQuery( `SELECT d.*, u.name, u.email FROM drivers d JOIN users u ON d.user_id = u.id WHERE d.id = $1`, [id], ) if (drivers.length === 0) { return NextResponse.json({ error: "Driver not found" }, { status: 404 }) } return NextResponse.json(drivers[0]) } catch (error) { console.error("Error fetching driver:", error) return NextResponse.json({ error: "Failed to fetch driver" }, { status: 500 }) } } // Update a driver export async function PUT(request: NextRequest, { params }: { params: { id: string } }) { try { const id = params.id const { license_number, license_expiry_date, phone_number, status, rating } = await request.json() // Check if driver exists const existingDriver = await executeQuery("SELECT * FROM drivers WHERE id = $1", [id]) if (existingDriver.length === 0) { return NextResponse.json({ error: "Driver not found" }, { status: 404 }) } // Update driver const result = await executeQuery( `UPDATE drivers SET license_number = $1, license_expiry_date = $2, phone_number = $3, status = $4, rating = $5, updated_at = CURRENT_TIMESTAMP WHERE id = $6 RETURNING *`, [license_number, license_expiry_date, phone_number, status, rating, id], ) // Get user details const user = await executeQuery("SELECT name, email FROM users WHERE id = $1", [result[0].user_id]) const driverWithUser = { ...result[0], name: user[0].name, email: user[0].email, } return NextResponse.json(driverWithUser) } catch (error) { console.error("Error updating driver:", error) return NextResponse.json({ error: "Failed to update driver" }, { status: 500 }) } } // Delete a driver export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) { try { const id = params.id // Check if driver exists const existingDriver = await executeQuery("SELECT * FROM drivers WHERE id = $1", [id]) if (existingDriver.length === 0) { return NextResponse.json({ error: "Driver not found" }, { status: 404 }) } // Check if driver is assigned to any active routes const activeRoutes = await executeQuery( `SELECT * FROM routes WHERE driver_id = $1 AND status NOT IN ('completed', 'cancelled')`, [id], ) if (activeRoutes.length > 0) { return NextResponse.json({ error: "Cannot delete driver that is assigned to active routes" }, { status: 400 }) } // Delete driver await executeQuery("DELETE FROM drivers WHERE id = $1", [id]) return NextResponse.json({ success: true }) } catch (error) { console.error("Error deleting driver:", error) return NextResponse.json({ error: "Failed to delete driver" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/shipments/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { executeQuery } from "@/lib/db" // Get all shipments export async function GET(request: NextRequest) { try { const searchParams = request.nextUrl.searchParams const status = searchParams.get("status") const customerId = searchParams.get("customer_id") let query = ` SELECT s.*, o.name as origin_name, o.address as origin_address, o.city as origin_city, d.name as destination_name, d.address as destination_address, d.city as destination_city, u.name as customer_name, u.email as customer_email FROM shipments s JOIN locations o ON s.origin_id = o.id JOIN locations d ON s.destination_id = d.id JOIN users u ON s.customer_id = u.id ` const params: any[] = [] const conditions: string[] = [] if (status) { conditions.push("s.status = $" + (params.length + 1)) params.push(status) } if (customerId) { conditions.push("s.customer_id = $" + (params.length + 1)) params.push(customerId) } if (conditions.length > 0) { query += " WHERE " + conditions.join(" AND ") } query += " ORDER BY s.created_at DESC" const shipments = await executeQuery(query, params) return NextResponse.json(shipments) } catch (error) { console.error("Error fetching shipments:", error) return NextResponse.json({ error: "Failed to fetch shipments" }, { status: 500 }) } } // Create a new shipment export async function POST(request: NextRequest) { try { const { customer_id, origin_id, destination_id, status, priority, weight, volume, scheduled_pickup, scheduled_delivery, } = await request.json() // Validate input if (!customer_id || !origin_id || !destination_id) { return NextResponse.json({ error: "Customer ID, origin ID, and destination ID are required" }, { status: 400 }) } // Generate tracking number const trackingNumber = "SHP-" + Date.now() + "-" + Math.floor(Math.random() * 1000) // Create shipment const result = await executeQuery( `INSERT INTO shipments (tracking_number, customer_id, origin_id, destination_id, status, priority, weight, volume, scheduled_pickup, scheduled_delivery) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10) RETURNING *`, [ trackingNumber, customer_id, origin_id, destination_id, status || "pending", priority || "medium", weight, volume, scheduled_pickup, scheduled_delivery, ], ) // Get related data const shipment = result[0] const [origin] = await executeQuery("SELECT * FROM locations WHERE id = $1", [origin_id]) const [destination] = await executeQuery("SELECT * FROM locations WHERE id = $1", [destination_id]) const [customer] = await executeQuery("SELECT name, email FROM users WHERE id = $1", [customer_id]) const shipmentWithDetails = { ...shipment, origin_name: origin.name, origin_address: origin.address, origin_city: origin.city, destination_name: destination.name, destination_address: destination.address, destination_city: destination.city, customer_name: customer.name, customer_email: customer.email, } return NextResponse.json(shipmentWithDetails, { status: 201 }) } catch (error) { console.error("Error creating shipment:", error) return NextResponse.json({ error: "Failed to create shipment" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/shipments/[id]/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { executeQuery } from "@/lib/db" // Get a specific shipment export async function GET(request: NextRequest, { params }: { params: { id: string } }) { try { const id = params.id const shipments = await executeQuery( `SELECT s.*, o.name as origin_name, o.address as origin_address, o.city as origin_city, d.name as destination_name, d.address as destination_address, d.city as destination_city, u.name as customer_name, u.email as customer_email FROM shipments s JOIN locations o ON s.origin_id = o.id JOIN locations d ON s.destination_id = d.id JOIN users u ON s.customer_id = u.id WHERE s.id = $1`, [id], ) if (shipments.length === 0) { return NextResponse.json({ error: "Shipment not found" }, { status: 404 }) } // Get associated route if exists const routes = await executeQuery( `SELECT r.*, t.license_plate, t.model as truck_model, d.id as driver_id, u.name as driver_name FROM routes r LEFT JOIN trucks t ON r.truck_id = t.id LEFT JOIN drivers d ON r.driver_id = d.id LEFT JOIN users u ON d.user_id = u.id WHERE r.shipment_id = $1 ORDER BY r.created_at DESC LIMIT 1`, [id], ) const shipmentData = { ...shipments[0], route: routes.length > 0 ? routes[0] : null, } return NextResponse.json(shipmentData) } catch (error) { console.error("Error fetching shipment:", error) return NextResponse.json({ error: "Failed to fetch shipment" }, { status: 500 }) } } // Update a shipment export async function PUT(request: NextRequest, { params }: { params: { id: string } }) { try { const id = params.id const { status, priority, weight, volume, scheduled_pickup, scheduled_delivery, actual_pickup, actual_delivery } = await request.json() // Check if shipment exists const existingShipment = await executeQuery("SELECT * FROM shipments WHERE id = $1", [id]) if (existingShipment.length === 0) { return NextResponse.json({ error: "Shipment not found" }, { status: 404 }) } // Update shipment const result = await executeQuery( `UPDATE shipments SET status = $1, priority = $2, weight = $3, volume = $4, scheduled_pickup = $5, scheduled_delivery = $6, actual_pickup = $7, actual_delivery = $8, updated_at = CURRENT_TIMESTAMP WHERE id = $9 RETURNING *`, [status, priority, weight, volume, scheduled_pickup, scheduled_delivery, actual_pickup, actual_delivery, id], ) // Get related data const shipment = result[0] const [origin] = await executeQuery("SELECT * FROM locations WHERE id = $1", [shipment.origin_id]) const [destination] = await executeQuery("SELECT * FROM locations WHERE id = $1", [shipment.destination_id]) const [customer] = await executeQuery("SELECT name, email FROM users WHERE id = $1", [shipment.customer_id]) const shipmentWithDetails = { ...shipment, origin_name: origin.name, origin_address: origin.address, origin_city: origin.city, destination_name: destination.name, destination_address: destination.address, destination_city: destination.city, customer_name: customer.name, customer_email: customer.email, } return NextResponse.json(shipmentWithDetails) } catch (error) { console.error("Error updating shipment:", error) return NextResponse.json({ error: "Failed to update shipment" }, { status: 500 }) } } // Delete a shipment export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) { try { const id = params.id // Check if shipment exists const existingShipment = await executeQuery("SELECT * FROM shipments WHERE id = $1", [id]) if (existingShipment.length === 0) { return NextResponse.json({ error: "Shipment not found" }, { status: 404 }) } // Check if shipment has active routes const activeRoutes = await executeQuery( `SELECT * FROM routes WHERE shipment_id = $1 AND status NOT IN ('completed', 'cancelled')`, [id], ) if (activeRoutes.length > 0) { return NextResponse.json({ error: "Cannot delete shipment with active routes" }, { status: 400 }) } // Delete associated routes await executeQuery("DELETE FROM routes WHERE shipment_id = $1", [id]) // Delete shipment await executeQuery("DELETE FROM shipments WHERE id = $1", [id]) return NextResponse.json({ success: true }) } catch (error) { console.error("Error deleting shipment:", error) return NextResponse.json({ error: "Failed to delete shipment" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/routes/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { executeQuery } from "@/lib/db" // Get all routes export async function GET(request: NextRequest) { try { const searchParams = request.nextUrl.searchParams const status = searchParams.get("status") const truckId = searchParams.get("truck_id") const driverId = searchParams.get("driver_id") let query = ` SELECT r.*, s.tracking_number, s.status as shipment_status, t.license_plate, t.model as truck_model, d.id as driver_id, u.name as driver_name FROM routes r JOIN shipments s ON r.shipment_id = s.id LEFT JOIN trucks t ON r.truck_id = t.id LEFT JOIN drivers d ON r.driver_id = d.id LEFT JOIN users u ON d.user_id = u.id ` const params: any[] = [] const conditions: string[] = [] if (status) { conditions.push("r.status = $" + (params.length + 1)) params.push(status) } if (truckId) { conditions.push("r.truck_id = $" + (params.length + 1)) params.push(truckId) } if (driverId) { conditions.push("r.driver_id = $" + (params.length + 1)) params.push(driverId) } if (conditions.length > 0) { query += " WHERE " + conditions.join(" AND ") } query += " ORDER BY r.created_at DESC" const routes = await executeQuery(query, params) return NextResponse.json(routes) } catch (error) { console.error("Error fetching routes:", error) return NextResponse.json({ error: "Failed to fetch routes" }, { status: 500 }) } } // Create a new route export async function POST(request: NextRequest) { try { const { shipment_id, truck_id, driver_id, start_time, end_time, distance, status } = await request.json() // Validate input if (!shipment_id) { return NextResponse.json({ error: "Shipment ID is required" }, { status: 400 }) } // Check if shipment exists const shipments = await executeQuery("SELECT * FROM shipments WHERE id = $1", [shipment_id]) if (shipments.length === 0) { return NextResponse.json({ error: "Shipment not found" }, { status: 404 }) } // Check if truck exists and is available if (truck_id) { const trucks = await executeQuery("SELECT * FROM trucks WHERE id = $1", [truck_id]) if (trucks.length === 0) { return NextResponse.json({ error: "Truck not found" }, { status: 404 }) } if (trucks[0].status !== "available") { return NextResponse.json({ error: "Truck is not available" }, { status: 400 }) } } // Check if driver exists and is available if (driver_id) { const drivers = await executeQuery("SELECT * FROM drivers WHERE id = $1", [driver_id]) if (drivers.length === 0) { return NextResponse.json({ error: "Driver not found" }, { status: 404 }) } if (drivers[0].status !== "available") { return NextResponse.json({ error: "Driver is not available" }, { status: 400 }) } } // Create route const result = await executeQuery( `INSERT INTO routes (shipment_id, truck_id, driver_id, start_time, end_time, distance, status) VALUES ($1, $2, $3, $4, $5, $6, $7) RETURNING *`, [shipment_id, truck_id, driver_id, start_time, end_time, distance, status || "planned"], ) // Update truck status if assigned if (truck_id) { await executeQuery("UPDATE trucks SET status = $1 WHERE id = $2", ["assigned", truck_id]) } // Update driver status if assigned if (driver_id) { await executeQuery("UPDATE drivers SET status = $1 WHERE id = $2", ["assigned", driver_id]) } // Get related data const route = result[0] const [shipment] = await executeQuery("SELECT tracking_number, status FROM shipments WHERE id = $1", [shipment_id]) let truckData = null if (truck_id) { const [truck] = await executeQuery("SELECT license_plate, model FROM trucks WHERE id = $1", [truck_id]) truckData = truck } let driverData = null if (driver_id) { const [driver] = await executeQuery( "SELECT d.id, u.name FROM drivers d JOIN users u ON d.user_id = u.id WHERE d.id = $1", [driver_id], ) driverData = driver } const routeWithDetails = { ...route, tracking_number: shipment.tracking_number, shipment_status: shipment.status, license_plate: truckData?.license_plate, truck_model: truckData?.model, driver_id: driverData?.id, driver_name: driverData?.name, } return NextResponse.json(routeWithDetails, { status: 201 }) } catch (error) { console.error("Error creating route:", error) return NextResponse.json({ error: "Failed to create route" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/routes/[id]/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { executeQuery } from "@/lib/db" // Get a specific route export async function GET(request: NextRequest, { params }: { params: { id: string } }) { try { const id = params.id const routes = await executeQuery( `SELECT r.*, s.tracking_number, s.status as shipment_status, t.license_plate, t.model as truck_model, d.id as driver_id, u.name as driver_name FROM routes r JOIN shipments s ON r.shipment_id = s.id LEFT JOIN trucks t ON r.truck_id = t.id LEFT JOIN drivers d ON r.driver_id = d.id LEFT JOIN users u ON d.user_id = u.id WHERE r.id = $1`, [id], ) if (routes.length === 0) { return NextResponse.json({ error: "Route not found" }, { status: 404 }) } // Get waypoints const waypoints = await executeQuery( `SELECT rw.*, l.name, l.address, l.city, l.latitude, l.longitude FROM route_waypoints rw JOIN locations l ON rw.location_id = l.id WHERE rw.route_id = $1 ORDER BY rw.sequence_number`, [id], ) const routeData = { ...routes[0], waypoints, } return NextResponse.json(routeData) } catch (error) { console.error("Error fetching route:", error) return NextResponse.json({ error: "Failed to fetch route" }, { status: 500 }) } } // Update a route export async function PUT(request: NextRequest, { params }: { params: { id: string } }) { try { const id = params.id const { truck_id, driver_id, start_time, end_time, distance, status, fuel_consumption } = await request.json() // Check if route exists const existingRoutes = await executeQuery("SELECT * FROM routes WHERE id = $1", [id]) if (existingRoutes.length === 0) { return NextResponse.json({ error: "Route not found" }, { status: 404 }) } const existingRoute = existingRoutes[0] // Check if truck exists and is available (if changing truck) if (truck_id && truck_id !== existingRoute.truck_id) { const trucks = await executeQuery("SELECT * FROM trucks WHERE id = $1", [truck_id]) if (trucks.length === 0) { return NextResponse.json({ error: "Truck not found" }, { status: 404 }) } if (trucks[0].status !== "available" && trucks[0].status !== "assigned") { return NextResponse.json({ error: "Truck is not available" }, { status: 400 }) } } // Check if driver exists and is available (if changing driver) if (driver_id && driver_id !== existingRoute.driver_id) { const drivers = await executeQuery("SELECT * FROM drivers WHERE id = $1", [driver_id]) if (drivers.length === 0) { return NextResponse.json({ error: "Driver not found" }, { status: 404 }) } if (drivers[0].status !== "available" && drivers[0].status !== "assigned") { return NextResponse.json({ error: "Driver is not available" }, { status: 400 }) } } // Update route const result = await executeQuery( `UPDATE routes SET truck_id = $1, driver_id = $2, start_time = $3, end_time = $4, distance = $5, status = $6, fuel_consumption = $7, updated_at = CURRENT_TIMESTAMP WHERE id = $8 RETURNING *`, [truck_id, driver_id, start_time, end_time, distance, status, fuel_consumption, id], ) // Handle truck reassignment if (truck_id !== existingRoute.truck_id) { // Free up old truck if there was one if (existingRoute.truck_id) { await executeQuery("UPDATE trucks SET status = $1 WHERE id = $2", ["available", existingRoute.truck_id]) } // Assign new truck if there is one if (truck_id) { await executeQuery("UPDATE trucks SET status = $1 WHERE id = $2", ["assigned", truck_id]) } } // Handle driver reassignment if (driver_id !== existingRoute.driver_id) { // Free up old driver if there was one if (existingRoute.driver_id) { await executeQuery("UPDATE drivers SET status = $1 WHERE id = $2", ["available", existingRoute.driver_id]) } // Assign new driver if there is one if (driver_id) { await executeQuery("UPDATE drivers SET status = $1 WHERE id = $2", ["assigned", driver_id]) } } // If route is completed, update truck and driver status if (status === "completed" && existingRoute.status !== "completed") { if (result[0].truck_id) { await executeQuery("UPDATE trucks SET status = $1 WHERE id = $2", ["available", result[0].truck_id]) } if (result[0].driver_id) { await executeQuery("UPDATE drivers SET status = $1 WHERE id = $2", ["available", result[0].driver_id]) } } // Get related data const route = result[0] const [shipment] = await executeQuery("SELECT tracking_number, status FROM shipments WHERE id = $1", [ route.shipment_id, ]) let truckData = null if (route.truck_id) { const [truck] = await executeQuery("SELECT license_plate, model FROM trucks WHERE id = $1", [route.truck_id]) truckData = truck } let driverData = null if (route.driver_id) { const [driver] = await executeQuery( "SELECT d.id, u.name FROM drivers d JOIN users u ON d.user_id = u.id WHERE d.id = $1", [route.driver_id], ) driverData = driver } const routeWithDetails = { ...route, tracking_number: shipment.tracking_number, shipment_status: shipment.status, license_plate: truckData?.license_plate, truck_model: truckData?.model, driver_id: driverData?.id, driver_name: driverData?.name, } return NextResponse.json(routeWithDetails) } catch (error) { console.error("Error updating route:", error) return NextResponse.json({ error: "Failed to update route" }, { status: 500 }) } } // Delete a route export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) { try { const id = params.id // Check if route exists const existingRoutes = await executeQuery("SELECT * FROM routes WHERE id = $1", [id]) if (existingRoutes.length === 0) { return NextResponse.json({ error: "Route not found" }, { status: 404 }) } const existingRoute = existingRoutes[0] // Delete waypoints first await executeQuery("DELETE FROM route_waypoints WHERE route_id = $1", [id]) // Delete route await executeQuery("DELETE FROM routes WHERE id = $1", [id]) // Free up truck if assigned if (existingRoute.truck_id) { await executeQuery("UPDATE trucks SET status = $1 WHERE id = $2", ["available", existingRoute.truck_id]) } // Free up driver if assigned if (existingRoute.driver_id) { await executeQuery("UPDATE drivers SET status = $1 WHERE id = $2", ["available", existingRoute.driver_id]) } return NextResponse.json({ success: true }) } catch (error) { console.error("Error deleting route:", error) return NextResponse.json({ error: "Failed to delete route" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/locations/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { executeQuery } from "@/lib/db" // Get all locations export async function GET(request: NextRequest) { try { const searchParams = request.nextUrl.searchParams const city = searchParams.get("city") const query = searchParams.get("query") let sqlQuery = "SELECT * FROM locations" const params: any[] = [] const conditions: string[] = [] if (city) { conditions.push("city = $" + (params.length + 1)) params.push(city) } if (query) { conditions.push("(name ILIKE $" + (params.length + 1) + " OR address ILIKE $" + (params.length + 1) + ")") params.push(`%${query}%`) } if (conditions.length > 0) { sqlQuery += " WHERE " + conditions.join(" AND ") } sqlQuery += " ORDER BY name" const locations = await executeQuery(sqlQuery, params) return NextResponse.json(locations) } catch (error) { console.error("Error fetching locations:", error) return NextResponse.json({ error: "Failed to fetch locations" }, { status: 500 }) } } // Create a new location export async function POST(request: NextRequest) { try { const { name, address, city, state, country, postal_code, latitude, longitude } = await request.json() // Validate input if (!name || !address || !city || !country) { return NextResponse.json({ error: "Name, address, city, and country are required" }, { status: 400 }) } // Create location const result = await executeQuery( `INSERT INTO locations (name, address, city, state, country, postal_code, latitude, longitude) VALUES ($1, $2, $3, $4, $5, $6, $7, $8) RETURNING *`, [name, address, city, state, country, postal_code, latitude, longitude], ) return NextResponse.json(result[0], { status: 201 }) } catch (error) { console.error("Error creating location:", error) return NextResponse.json({ error: "Failed to create location" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/locations/[id]/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { executeQuery } from "@/lib/db" // Get a specific location export async function GET(request: NextRequest, { params }: { params: { id: string } }) { try { const id = params.id const locations = await executeQuery("SELECT * FROM locations WHERE id = $1", [id]) if (locations.length === 0) { return NextResponse.json({ error: "Location not found" }, { status: 404 }) } return NextResponse.json(locations[0]) } catch (error) { console.error("Error fetching location:", error) return NextResponse.json({ error: "Failed to fetch location" }, { status: 500 }) } } // Update a location export async function PUT(request: NextRequest, { params }: { params: { id: string } }) { try { const id = params.id const { name, address, city, state, country, postal_code, latitude, longitude } = await request.json() // Check if location exists const existingLocation = await executeQuery("SELECT * FROM locations WHERE id = $1", [id]) if (existingLocation.length === 0) { return NextResponse.json({ error: "Location not found" }, { status: 404 }) } // Update location const result = await executeQuery( `UPDATE locations SET name = $1, address = $2, city = $3, state = $4, country = $5, postal_code = $6, latitude = $7, longitude = $8, updated_at = CURRENT_TIMESTAMP WHERE id = $9 RETURNING *`, [name, address, city, state, country, postal_code, latitude, longitude, id], ) return NextResponse.json(result[0]) } catch (error) { console.error("Error updating location:", error) return NextResponse.json({ error: "Failed to update location" }, { status: 500 }) } } // Delete a location export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) { try { const id = params.id // Check if location exists const existingLocation = await executeQuery("SELECT * FROM locations WHERE id = $1", [id]) if (existingLocation.length === 0) { return NextResponse.json({ error: "Location not found" }, { status: 404 }) } // Check if location is being used in shipments const shipments = await executeQuery("SELECT * FROM shipments WHERE origin_id = $1 OR destination_id = $1", [id]) if (shipments.length > 0) { return NextResponse.json({ error: "Cannot delete location that is used in shipments" }, { status: 400 }) } // Check if location is being used in route waypoints const waypoints = await executeQuery("SELECT * FROM route_waypoints WHERE location_id = $1", [id]) if (waypoints.length > 0) { return NextResponse.json({ error: "Cannot delete location that is used in route waypoints" }, { status: 400 }) } // Delete location await executeQuery("DELETE FROM locations WHERE id = $1", [id]) return NextResponse.json({ success: true }) } catch (error) { console.error("Error deleting location:", error) return NextResponse.json({ error: "Failed to delete location" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/actions/trucks.ts" isMerged="true" "use server" import { executeQuery } from "@/lib/db" export async function getTrucks(status?: string) { try { let query = "SELECT * FROM trucks" const params: any[] = [] if (status) { query += " WHERE status = $1" params.push(status) } query += " ORDER BY created_at DESC" const trucks = await executeQuery(query, params) return { success: true, trucks } } catch (error) { console.error("Error fetching trucks:", error) return { success: false, error: "Failed to fetch trucks" } } } export async function getTruckById(id: string) { try { const trucks = await executeQuery("SELECT * FROM trucks WHERE id = $1", [id]) if (trucks.length === 0) { return { success: false, error: "Truck not found" } } return { success: true, truck: trucks[0] } } catch (error) { console.error("Error fetching truck:", error) return { success: false, error: "Failed to fetch truck" } } } export async function createTruck(data: { license_plate: string model: string capacity: number status?: string fuel_efficiency?: number }) { try { const { license_plate, model, capacity, status, fuel_efficiency } = data // Check if truck with license plate already exists const existingTruck = await executeQuery("SELECT * FROM trucks WHERE license_plate = $1", [license_plate]) if (existingTruck.length > 0) { return { success: false, error: "Truck with this license plate already exists" } } // Create truck const result = await executeQuery( `INSERT INTO trucks (license_plate, model, capacity, status, fuel_efficiency) VALUES ($1, $2, $3, $4, $5) RETURNING *`, [license_plate, model, capacity, status || "available", fuel_efficiency], ) return { success: true, truck: result[0] } } catch (error) { console.error("Error creating truck:", error) return { success: false, error: "Failed to create truck" } } } export async function updateTruck( id: string, data: { license_plate: string model: string capacity: number status?: string fuel_efficiency?: number last_maintenance_date?: string next_maintenance_date?: string }, ) { try { const { license_plate, model, capacity, status, fuel_efficiency, last_maintenance_date, next_maintenance_date } = data // Check if truck exists const existingTruck = await executeQuery("SELECT * FROM trucks WHERE id = $1", [id]) if (existingTruck.length === 0) { return { success: false, error: "Truck not found" } } // Update truck const result = await executeQuery( `UPDATE trucks SET license_plate = $1, model = $2, capacity = $3, status = $4, fuel_efficiency = $5, last_maintenance_date = $6, next_maintenance_date = $7, updated_at = CURRENT_TIMESTAMP WHERE id = $8 RETURNING *`, [license_plate, model, capacity, status, fuel_efficiency, last_maintenance_date, next_maintenance_date, id], ) return { success: true, truck: result[0] } } catch (error) { console.error("Error updating truck:", error) return { success: false, error: "Failed to update truck" } } } export async function deleteTruck(id: string) { try { // Check if truck exists const existingTruck = await executeQuery("SELECT * FROM trucks WHERE id = $1", [id]) if (existingTruck.length === 0) { return { success: false, error: "Truck not found" } } // Check if truck is being used in any active routes const activeRoutes = await executeQuery( `SELECT * FROM routes WHERE truck_id = $1 AND status NOT IN ('completed', 'cancelled')`, [id], ) if (activeRoutes.length > 0) { return { success: false, error: "Cannot delete truck that is assigned to active routes" } } // Delete truck await executeQuery("DELETE FROM trucks WHERE id = $1", [id]) return { success: true } } catch (error) { console.error("Error deleting truck:", error) return { success: false, error: "Failed to delete truck" } } } [V0_FILE]plaintext:file=".env.local.example" isMerged="true" # Database DATABASE_URL=postgres://username:password@hostname:port/database # Authentication JWT_SECRET=your-secret-key-here # API Configuration NEXT_PUBLIC_API_URL=http://localhost:3000/api [V0_FILE]typescriptreact:file="app/dashboard/shipments/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/dashboard/carriers/page.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { Truck, Filter, MoreHorizontal, Search, Download, Plus, Check, Star, MapPin } from "lucide-react" import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Progress } from "@/components/ui/progress" export default function CarriersPage() { const [filter, setFilter] = useState("all") const [searchQuery, setSearchQuery] = useState("") const carriers = [ { id: "CAR-1001", name: "FastTruck Logistics", location: "Chicago, IL", fleet_size: 28, active_shipments: 12, rating: 4.8, status: "active", }, { id: "CAR-1002", name: "Horizon Transport", location: "Atlanta, GA", fleet_size: 42, active_shipments: 18, rating: 4.5, status: "active", }, { id: "CAR-1003", name: "Eagle Shipping", location: "Dallas, TX", fleet_size: 15, active_shipments: 7, rating: 4.7, status: "active", }, { id: "CAR-1004", name: "Metro Freight", location: "New York, NY", fleet_size: 32, active_shipments: 0, rating: 4.2, status: "inactive", }, { id: "CAR-1005", name: "West Coast Carriers", location: "Los Angeles, CA", fleet_size: 24, active_shipments: 9, rating: 4.6, status: "active", }, ] const filteredCarriers = carriers.filter((carrier) => { if (filter !== "all" && carrier.status !== filter) return false if (searchQuery) { const query = searchQuery.toLowerCase() return ( carrier.id.toLowerCase().includes(query) || carrier.name.toLowerCase().includes(query) || carrier.location.toLowerCase().includes(query) ) } return true }) return (

Carriers

Manage and track all your carriers

Carrier List Manage all carriers

setSearchQuery(e.target.value)} />

Filter by Status setFilter("all")}> All setFilter("active")}> Active setFilter("inactive")}> Inactive

Carrier Location Fleet Size Active Shipments Rating Status Actions {filteredCarriers.map((carrier) => (

{carrier.name .split(" ") .map((n) => n[0]) .join("")}

{carrier.name}

{carrier.id}

{carrier.location}

{carrier.fleet_size} trucks {carrier.active_shipments > 0 ? (

{carrier.active_shipments}

) : ( None )}

{carrier.rating}

{carrier.status.charAt(0).toUpperCase() + carrier.status.slice(1)} View profile View shipments Contact carrier Deactivate ))}

Top Rated Carriers Highest rated carriers by performance

{carriers .sort((a, b) => b.rating - a.rating) .slice(0, 3) .map((carrier, i) => (

{i + 1}.

{carrier.name .split(" ") .map((n) => n[0]) .join("")}

{carrier.name}

{Array(5) .fill(0) .map((_, i) => ( ))} {carrier.rating}

{carrier.fleet_size} trucks

))}

Carrier Performance Average performance metrics

On-time Delivery 94.3%

Driver Safety Score 87.6%

Customer Satisfaction 92.8%

Cost Efficiency 89.4%

Quick Actions Common carrier management tasks View Carrier Management Guide

) } [V0_FILE]typescriptreact:file="app/dashboard/carriers/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/dashboard/fleet/page.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { Truck, Filter, MoreHorizontal, Search, Download, Plus, Check, Wrench, AlertTriangle, Power, PiggyBank, MapPin, ArrowUpDown, } from "lucide-react" import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import ShipmentMap from "@/components/shipment-map" export default function FleetPage() { const [filter, setFilter] = useState("all") const [searchQuery, setSearchQuery] = useState("") const trucks = [ { id: "TRK-1001", model: "Freightliner Cascadia", license_plate: "IL-4872XY", status: "available", location: "Chicago, IL", fuel: 78, maintenance_due: false, last_maintenance: "2024-02-15", mileage: 45892, driver: "Michael Chen", }, { id: "TRK-1002", model: "Peterbilt 579", license_plate: "TX-8291AZ", status: "in_transit", location: "Dallas, TX", fuel: 52, maintenance_due: false, last_maintenance: "2024-01-28", mileage: 78123, driver: "Sarah Johnson", }, { id: "TRK-1003", model: "Kenworth T680", license_plate: "NY-6134BT", status: "maintenance", location: "New York, NY", fuel: 32, maintenance_due: true, last_maintenance: "2023-11-15", mileage: 112456, driver: null, }, { id: "TRK-1004", model: "Volvo VNL 860", license_plate: "CA-3721CV", status: "in_transit", location: "Los Angeles, CA", fuel: 45, maintenance_due: true, last_maintenance: "2023-12-08", mileage: 95234, driver: "David Wilson", }, { id: "TRK-1005", model: "Mack Anthem", license_plate: "GA-9047DX", status: "available", location: "Atlanta, GA", fuel: 83, maintenance_due: false, last_maintenance: "2024-02-28", mileage: 38456, driver: null, }, ] const filteredTrucks = trucks.filter((truck) => { if (filter !== "all" && truck.status !== filter) return false if (searchQuery) { const query = searchQuery.toLowerCase() return ( truck.id.toLowerCase().includes(query) || truck.model.toLowerCase().includes(query) || truck.license_plate.toLowerCase().includes(query) || (truck.driver && truck.driver.toLowerCase().includes(query)) ) } return true }) const getStatusBadge = (status: string) => { switch (status) { case "available": return ( Available ) case "in_transit": return ( In Transit ) case "maintenance": return ( Maintenance ) default: return {status} } } return (

Fleet Management

Manage and monitor your truck fleet

Total Fleet

Available: 18

In Transit: 17

In Maintenance: 7

Maintenance Due

2 overdue

Avg. Fuel Level

64%

~315 miles range

Monthly Costs

$24,892

$592 per truck on average

Truck Fleet Manage all trucks

setSearchQuery(e.target.value)} />

Filter by Status setFilter("all")}> All setFilter("available")}> Available setFilter("in_transit")}> In Transit setFilter("maintenance")}> Maintenance

ID Model License Plate Status Location Fuel Level Actions {filteredTrucks.map((truck) => ( {truck.id} {truck.model} {truck.license_plate}

{getStatusBadge(truck.status)} {truck.maintenance_due && ( Maintenance Due )}

{truck.location}

{truck.fuel}%

View details Assign driver Schedule maintenance Mark as out of service ))}

Fleet Location Real-time location of your fleet

Maintenance Schedule Upcoming maintenance tasks

{[ { truck: "TRK-1003", task: "Oil Change & Inspection", date: "Mar 25", priority: "High", status: "overdue", }, { truck: "TRK-1004", task: "Brake Service", date: "Mar 28", priority: "Critical", status: "scheduled" }, { truck: "TRK-1008", task: "Tire Rotation", date: "Apr 2", priority: "Normal", status: "scheduled" }, { truck: "TRK-1012", task: "Engine Diagnostics", date: "Apr 5", priority: "High", status: "scheduled" }, ].map((task, i) => (

{task.truck}

{task.task}

{task.priority}

{task.status === "overdue" ? "Overdue: " : ""} {task.date}

))}

Fleet Performance Key performance metrics

Utilization Rate 82.5%

Fuel Efficiency 7.2 mpg

Maintenance Compliance 91.4%

On-Time Rate 94.8%

Breakdown by Status

Available

42.9%

In Transit

40.5%

Maintenance

16.6%

) } [V0_FILE]typescriptreact:file="app/dashboard/fleet/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="lib/auth.ts" isMerged="true" import { cookies } from "next/headers" import type { NextRequest } from "next/server" export interface AuthUser { id: string email: string role: string } export function getAuthUser(request?: NextRequest): AuthUser | null { try { // Get user from cookies const userCookie = request ? request.cookies.get("user")?.value : cookies().get("user")?.value if (!userCookie) { return null } const userData = JSON.parse(userCookie) return { id: userData.id || "", email: userData.email || "", role: userData.role || "user", } } catch (error) { console.error("Auth error:", error) return null } } export function isAuthenticated(request?: NextRequest): boolean { return getAuthUser(request) !== null } export function hasRole(role: string | string[], request?: NextRequest): boolean { const user = getAuthUser(request) if (!user) { return false } if (Array.isArray(role)) { return role.includes(user.role) } return user.role === role } [V0_FILE]typescriptreact:file="app/api/auth/login/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { executeQuery } from "@/lib/db" import bcrypt from "bcryptjs" export async function POST(request: NextRequest) { try { const { email, password } = await request.json() // Validate input if (!email || !password) { return NextResponse.json({ error: "Email and password are required" }, { status: 400 }) } // Find user const users = await executeQuery("SELECT * FROM users WHERE email = $1", [email]) if (users.length === 0) { return NextResponse.json({ error: "Invalid credentials" }, { status: 401 }) } const user = users[0] // Verify password const isMatch = await bcrypt.compare(password, user.password_hash) if (!isMatch) { return NextResponse.json({ error: "Invalid credentials" }, { status: 401 }) } // Create user object for cookie const userData = { id: user.id, name: user.name, email: user.email, role: user.role, } // Set cookie with user data const response = NextResponse.json(userData) response.cookies.set({ name: "user", value: JSON.stringify(userData), httpOnly: false, // Allow JavaScript access path: "/", maxAge: 60 * 60 * 24, // 1 day sameSite: "strict", secure: process.env.NODE_ENV === "production", }) return response } catch (error) { console.error("Login error:", error) return NextResponse.json({ error: "Failed to authenticate" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/auth/signup/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { executeQuery } from "@/lib/db" import bcrypt from "bcryptjs" export async function POST(request: NextRequest) { try { const { name, email, password } = await request.json() // Validate input if (!name || !email || !password) { return NextResponse.json({ error: "Name, email and password are required" }, { status: 400 }) } // Check if user already exists const existingUser = await executeQuery("SELECT * FROM users WHERE email = $1", [email]) if (existingUser.length > 0) { return NextResponse.json({ error: "User with this email already exists" }, { status: 409 }) } // Hash password const salt = await bcrypt.genSalt(10) const hashedPassword = await bcrypt.hash(password, salt) // Create user const result = await executeQuery( "INSERT INTO users (name, email, password_hash, role) VALUES ($1, $2, $3, $4) RETURNING id, name, email, role", [name, email, hashedPassword, "user"], ) const newUser = result[0] // Create user object for cookie const userData = { id: newUser.id, name: newUser.name, email: newUser.email, role: newUser.role, } // Set cookie with user data const response = NextResponse.json(userData, { status: 201 }) response.cookies.set({ name: "user", value: JSON.stringify(userData), httpOnly: false, // Allow JavaScript access path: "/", maxAge: 60 * 60 * 24, // 1 day sameSite: "strict", secure: process.env.NODE_ENV === "production", }) return response } catch (error) { console.error("Signup error:", error) return NextResponse.json({ error: "Failed to create user" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/actions/auth.ts" isMerged="true" "use server" import { cookies } from "next/headers" import { executeQuery } from "@/lib/db" import bcrypt from "bcryptjs" export async function login(email: string, password: string) { try { // Find user const users = await executeQuery("SELECT * FROM users WHERE email = $1", [email]) if (users.length === 0) { return { success: false, error: "Invalid credentials" } } const user = users[0] // Verify password const isMatch = await bcrypt.compare(password, user.password_hash) if (!isMatch) { return { success: false, error: "Invalid credentials" } } // Create user object for cookie const userData = { id: user.id, name: user.name, email: user.email, role: user.role, } // Set cookie with user data cookies().set({ name: "user", value: JSON.stringify(userData), httpOnly: false, // Allow JavaScript access path: "/", maxAge: 60 * 60 * 24, // 1 day sameSite: "strict", secure: process.env.NODE_ENV === "production", }) return { success: true, user: userData, } } catch (error) { console.error("Login error:", error) return { success: false, error: "Failed to authenticate" } } } export async function signup(name: string, email: string, password: string) { try { // Check if user already exists const existingUser = await executeQuery("SELECT * FROM users WHERE email = $1", [email]) if (existingUser.length > 0) { return { success: false, error: "User with this email already exists" } } // Hash password const salt = await bcrypt.genSalt(10) const hashedPassword = await bcrypt.hash(password, salt) // Create user const result = await executeQuery( "INSERT INTO users (name, email, password_hash, role) VALUES ($1, $2, $3, $4) RETURNING id, name, email, role", [name, email, hashedPassword, "user"], ) const newUser = result[0] // Create user object for cookie const userData = { id: newUser.id, name: newUser.name, email: newUser.email, role: newUser.role, } // Set cookie with user data cookies().set({ name: "user", value: JSON.stringify(userData), httpOnly: false, // Allow JavaScript access path: "/", maxAge: 60 * 60 * 24, // 1 day sameSite: "strict", secure: process.env.NODE_ENV === "production", }) return { success: true, user: userData, } } catch (error) { console.error("Signup error:", error) return { success: false, error: "Failed to create user" } } } export async function logout() { cookies().delete("user") return { success: true } } export async function getCurrentUser() { try { const userCookie = cookies().get("user")?.value if (!userCookie) { return { success: false, error: "Not authenticated" } } const userData = JSON.parse(userCookie) const users = await executeQuery("SELECT id, name, email, role FROM users WHERE id = $1", [userData.id]) if (users.length === 0) { return { success: false, error: "User not found" } } return { success: true, user: users[0], } } catch (error) { console.error("Get current user error:", error) return { success: false, error: "Failed to get current user" } } } [V0_FILE]typescriptreact:file="middleware.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" export async function middleware(request: NextRequest) { // Get path from the URL const { pathname } = request.nextUrl // Skip middleware for the root path and dashboard for testing if (pathname === "/" || pathname.startsWith("/dashboard")) { return NextResponse.next() } // For API routes, we'll use a simplified approach if (pathname.startsWith("/api") && !pathname.startsWith("/api/auth")) { // Check for a simple auth header instead of JWT const authHeader = request.headers.get("authorization") if (!authHeader) { return NextResponse.json({ error: "Authentication required" }, { status: 401 }) } } return NextResponse.next() } export const config = { matcher: ["/((?!_next/static|_next/image|favicon.ico).*)"], } [V0_FILE]typescriptreact:file="components/recent-activity-feed.tsx" isMerged="true" "use client" import { useState } from "react" import { Package, Clock, AlertTriangle, CheckCircle, User, Settings, FileText } from "lucide-react" import { cn } from "@/lib/utils" // Sample activity data const activities = [ { id: 1, type: "shipment_created", shipmentId: "SHP-3948", user: "John Doe", timestamp: "2 hours ago", details: "Created a new shipment from Casablanca to Marrakech", }, { id: 2, type: "shipment_status", shipmentId: "SHP-3921", user: "System", timestamp: "3 hours ago", details: "Shipment status changed to In Transit", }, { id: 3, type: "driver_assigned", shipmentId: "SHP-3921", user: "Sarah Johnson", timestamp: "3 hours ago", details: "Driver Michael Chen assigned to shipment", }, { id: 4, type: "shipment_delayed", shipmentId: "SHP-3921", user: "System", timestamp: "4 hours ago", details: "Shipment delayed due to traffic conditions", }, { id: 5, type: "document_uploaded", shipmentId: "SHP-3899", user: "Emily Rodriguez", timestamp: "5 hours ago", details: "Uploaded proof of delivery document", }, { id: 6, type: "maintenance_scheduled", truckId: "TRK-1003", user: "David Wilson", timestamp: "6 hours ago", details: "Scheduled maintenance for truck TRK-1003", }, { id: 7, type: "shipment_delivered", shipmentId: "SHP-3876", user: "System", timestamp: "8 hours ago", details: "Shipment successfully delivered to destination", }, { id: 8, type: "settings_updated", user: "Admin", timestamp: "1 day ago", details: "Updated system notification settings", }, ] export default function RecentActivityFeed() { const [filter, setFilter] = useState("all") const filteredActivities = activities.filter((activity) => { if (filter === "all") return true return activity.type.includes(filter) }) const getActivityIcon = (type: string) => { switch (true) { case type.includes("shipment_created"): return case type.includes("shipment_status"): return case type.includes("driver_assigned"): return case type.includes("shipment_delayed"): return case type.includes("document_uploaded"): return case type.includes("maintenance"): return case type.includes("shipment_delivered"): return case type.includes("settings"): return default: return } } return (

{["all", "shipment", "driver", "maintenance", "document"].map((filterType) => ( ))}

{filteredActivities.map((activity) => (

{getActivityIcon(activity.type)}

{activity.details}

{activity.user} • {activity.timestamp} {activity.shipmentId && ( <> • {activity.shipmentId} )} {activity.truckId && ( <> • {activity.truckId} )}

))}

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "maroc-transit", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@neondatabase/serverless": "^0.6.0", "@radix-ui/react-avatar": "^1.0.4", "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-progress": "^1.0.3", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-tabs": "^1.0.4", "@radix-ui/react-tooltip": "^1.0.7", "bcryptjs": "^2.4.3", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", "drizzle-orm": "^0.28.6", "framer-motion": "^10.16.4", "lucide-react": "^0.294.0", "next": "14.0.4", "react": "^18", "react-dom": "^18", "tailwind-merge": "^2.1.0", "tailwindcss-animate": "^1.0.7" }, "devDependencies": { "@types/bcryptjs": "^2.4.6", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.0.1", "eslint": "^8", "eslint-config-next": "14.0.4", "postcss": "^8", "tailwindcss": "^3.3.0", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/main-footer.tsx" isMerged="true" import Link from "next/link" import { Truck, Facebook, Twitter, Linkedin, Instagram, ArrowRight } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" export default function MainFooter() { const year = new Date().getFullYear() const footerLinks = [ { title: "Platform", links: [ { label: "Features", href: "/features" }, { label: "Pricing", href: "/pricing" }, { label: "Enterprise", href: "/enterprise" }, { label: "Integrations", href: "/integrations" }, ], }, { title: "Resources", links: [ { label: "Blog", href: "/blog" }, { label: "Case Studies", href: "/case-studies" }, { label: "Help Center", href: "/help" }, { label: "API Documentation", href: "/api-docs" }, ], }, { title: "Company", links: [ { label: "About Us", href: "/about" }, { label: "Careers", href: "/careers" }, { label: "Press", href: "/press" }, { label: "Contact", href: "/contact" }, ], }, { title: "Legal", links: [ { label: "Terms of Service", href: "/terms" }, { label: "Privacy Policy", href: "/privacy" }, { label: "Data Processing", href: "/data-processing" }, { label: "Cookies", href: "/cookies" }, ], }, ] return ( ) } [V0_FILE]typescriptreact:file="components/logistics-showcase.tsx" isMerged="true" "use client" import Image from "next/image" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" export default function LogisticsShowcase() { return (

We are #1 Logistics WORLDWIDE

Welcome to #1 Logistics Worldwide, your trusted partner in delivering excellence in global logistics solutions. With an unwavering commitment to reliability, efficiency, and customer satisfaction, we have earned our position as a leading logistics provider on a global scale.

Our extensive network spans across continents, allowing us to offer seamless transportation and supply chain solutions tailored to meet the unique needs of businesses of all sizes.

) } [V0_FILE]typescriptreact:file="components/stats-section.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Truck, Users, Globe, Package } from "lucide-react" export default function StatsSection() { const stats = [ { icon: , value: "30k+", label: "Vehicles in our fleet", }, { icon: , value: "1M+", label: "Packages delivered", }, { icon: , value: "500k+", label: "Satisfied customers", }, { icon: , value: "150+", label: "Countries served", }, ] return (

{stats.map((stat, index) => (

{stat.icon}

{stat.value}

{stat.label}

))}

) } [V0_FILE]typescriptreact:file="components/contact-section.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Send } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" export default function ContactSection() { return (

Connect With Our Team

Let's discuss how we can optimize your logistics

Full Name

Email Address

Phone Number

Company Name

Your Message

</div>

<Button className="w-full bg-orange-500 hover:bg-orange-600 text-white">
                    <Send className="h-4 w-4 mr-2" />
                    Send Message
                  </Button>
                </form>
              </CardContent>
            </Card>
          </motion.div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true"
import Link from "next/link"
import { Truck, Facebook, Twitter, Linkedin, Instagram, ArrowRight, Mail, Phone, MapPin } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

export default function Footer() {
  const year = new Date().getFullYear()

const footerLinks = [
    {
      title: "Services",
      links: [
        { label: "Global Shipping", href: "/services/global-shipping" },
        { label: "Freight Forwarding", href: "/services/freight-forwarding" },
        { label: "Warehousing", href: "/services/warehousing" },
        { label: "Supply Chain", href: "/services/supply-chain" },
      ],
    },
    {
      title: "Company",
      links: [
        { label: "About Us", href: "/about" },
        { label: "Careers", href: "/careers" },
        { label: "News", href: "/news" },
        { label: "Contact", href: "/contact" },
      ],
    },
    {
      title: "Resources",
      links: [
        { label: "Blog", href: "/blog" },
        { label: "FAQ", href: "/faq" },
        { label: "Support", href: "/support" },
        { label: "Partners", href: "/partners" },
      ],
    },
  ]

return (
    <footer className="bg-black text-white border-t border-gray-800" aria-labelledby="footer-heading">
      <h2 id="footer-heading" className="sr-only">
        Footer
      </h2>

<div className="container mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16">
        <div className="xl:grid xl:grid-cols-3 xl:gap-8">
          <div className="space-y-8 xl:col-span-1">
            <Link href="/" className="flex items-center gap-2">
              <div className="relative w-10 h-10 bg-orange-500 rounded-lg flex items-center justify-center">
                <Truck className="h-6 w-6 text-white" />
              </div>
              <span className="font-bold text-xl">MarocTransit</span>
            </Link>

<p className="text-gray-400 text-base max-w-md">
              Morocco's leading logistics platform providing efficient and reliable shipping solutions for businesses
              and individuals.
            </p>

<div className="space-y-3">
              <div className="flex items-start">
                <MapPin className="h-5 w-5 text-orange-500 mr-3 mt-0.5" />
                <span className="text-gray-300">123 Logistics Avenue, Casablanca, Morocco</span>
              </div>
              <div className="flex items-center">
                <Phone className="h-5 w-5 text-orange-500 mr-3" />
                <span className="text-gray-300">+212 5XX-XXXX</span>
              </div>
              <div className="flex items-center">
                <Mail className="h-5 w-5 text-orange-500 mr-3" />
                <span className="text-gray-300">info@maroctransit.com</span>
              </div>
            </div>

<div className="flex space-x-6">
              <Link href="#" className="text-gray-400 hover:text-orange-500">
                <span className="sr-only">Facebook</span>
                <Facebook className="h-6 w-6" />
              </Link>
              <Link href="#" className="text-gray-400 hover:text-orange-500">
                <span className="sr-only">Twitter</span>
                <Twitter className="h-6 w-6" />
              </Link>
              <Link href="#" className="text-gray-400 hover:text-orange-500">
                <span className="sr-only">LinkedIn</span>
                <Linkedin className="h-6 w-6" />
              </Link>
              <Link href="#" className="text-gray-400 hover:text-orange-500">
                <span className="sr-only">Instagram</span>
                <Instagram className="h-6 w-6" />
              </Link>
            </div>
          </div>

<div className="mt-12 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
            <div className="md:grid md:grid-cols-2 md:gap-8">
              {footerLinks.slice(0, 2).map((group) => (
                <div key={group.title}>
                  <h3 className="text-sm font-semibold text-white tracking-wider uppercase mb-4">{group.title}</h3>
                  <ul className="space-y-4">
                    {group.links.map((link) => (
                      <li key={link.label}>
                        <Link href={link.href} className="text-base text-gray-400 hover:text-orange-500">
                          {link.label}
                        </Link>
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
            <div>
              <h3 className="text-sm font-semibold text-white tracking-wider uppercase mb-4">{footerLinks[2].title}</h3>
              <ul className="space-y-4">
                {footerLinks[2].links.map((link) => (
                  <li key={link.label}>
                    <Link href={link.href} className="text-base text-gray-400 hover:text-orange-500">
                      {link.label}
                    </Link>
                  </li>
                ))}
              </ul>

<h3 className="text-sm font-semibold text-white tracking-wider uppercase mt-8 mb-4">
                Subscribe to our newsletter
              </h3>
              <div className="flex gap-2">
                <Input
                  type="email"
                  placeholder="Email address"
                  className="bg-gray-800 border-gray-700 text-white placeholder:text-gray-500 focus-visible:ring-orange-500"
                />
                <Button className="bg-orange-500 hover:bg-orange-600">
                  <ArrowRight className="h-4 w-4" />
                </Button>
              </div>
            </div>
          </div>
        </div>

<div className="mt-8 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
          <p className="text-base text-gray-400">© {year} MarocTransit. All rights reserved.</p>
          <div className="mt-4 md:mt-0 flex items-center">
            <div className="flex space-x-4 text-gray-400 text-sm">
              <Link href="/terms" className="hover:text-orange-500">
                Terms
              </Link>
              <Link href="/privacy" className="hover:text-orange-500">
                Privacy
              </Link>
              <Link href="/cookies" className="hover:text-orange-500">
                Cookies
              </Link>
            </div>
          </div>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true"
import * as React from "react"

import { cn } from "@/lib/utils"

export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
  return (
    <textarea
      className={cn(
        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      ref={ref}
      {...props}
    />
  )
})
Textarea.displayName = "Textarea"

export { Textarea }
[V0_FILE]typescriptreact:file="components/shipment-table.tsx" isMerged="true"
"use client"

import { CheckCircle2, Clock, Truck, AlertTriangle, MoreHorizontal, Eye, FileEdit, Trash2, Brain } from "lucide-react"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

type ShipmentStatus = "delivered" | "in_transit" | "pending" | "delayed"

interface Shipment {
  id: string
  trackingNumber: string
  origin: string
  destination: string
  customer: string
  status: ShipmentStatus
  departureDate: string
  arrivalDate: string
  priority: "high" | "medium" | "low"
  aiOptimized: boolean
  aiSavings?: number
}

interface ShipmentTableProps {
  onSelectOrder: (id: string) => void
  selectedOrder: string | null
}

const shipments: Shipment[] = [
  {
    id: "order_vloJEBq",
    trackingNumber: "SHP-2023-1234",
    origin: "Chicago, IL",
    destination: "New York, NY",
    customer: "Acme Corp",
    status: "in_transit",
    departureDate: "2025-03-20",
    arrivalDate: "2025-03-23",
    priority: "high",
    aiOptimized: true,
    aiSavings: 350,
  },
  {
    id: "order_a7bCdE",
    trackingNumber: "SHP-2023-1235",
    origin: "Los Angeles, CA",
    destination: "Seattle, WA",
    customer: "TechGiant Inc",
    status: "delivered",
    departureDate: "2025-03-18",
    arrivalDate: "2025-03-21",
    priority: "medium",
    aiOptimized: true,
    aiSavings: 420,
  },
  {
    id: "order_f8gHiJ",
    trackingNumber: "SHP-2023-1236",
    origin: "Miami, FL",
    destination: "Atlanta, GA",
    customer: "Southern Distributors",
    status: "delayed",
    departureDate: "2025-03-19",
    arrivalDate: "2025-03-22",
    priority: "high",
    aiOptimized: false,
  },
  {
    id: "order_k9lMnO",
    trackingNumber: "SHP-2023-1237",
    origin: "Dallas, TX",
    destination: "Phoenix, AZ",
    customer: "Desert Supplies Co",
    status: "pending",
    departureDate: "2025-03-22",
    arrivalDate: "2025-03-25",
    priority: "low",
    aiOptimized: true,
    aiSavings: 280,
  },
  {
    id: "order_p0qRsT",
    trackingNumber: "SHP-2023-1238",
    origin: "Boston, MA",
    destination: "Washington, DC",
    customer: "East Coast Traders",
    status: "in_transit",
    departureDate: "2025-03-21",
    arrivalDate: "2025-03-23",
    priority: "medium",
    aiOptimized: true,
    aiSavings: 175,
  },
]

const getStatusIcon = (status: ShipmentStatus) => {
  switch (status) {
    case "delivered":
      return <CheckCircle2 className="h-4 w-4 text-green-500" />
    case "in_transit":
      return <Truck className="h-4 w-4 text-blue-500" />
    case "pending":
      return <Clock className="h-4 w-4 text-amber-500" />
    case "delayed":
      return <AlertTriangle className="h-4 w-4 text-red-500" />
  }
}

const getStatusBadge = (status: ShipmentStatus) => {
  switch (status) {
    case "delivered":
      return (
        <Badge variant="outline" className="bg-green-950/30 text-green-500 border-green-800/30">
          Delivered
        </Badge>
      )
    case "in_transit":
      return (
        <Badge variant="outline" className="bg-blue-950/30 text-blue-500 border-blue-800/30">
          In Transit
        </Badge>
      )
    case "pending":
      return (
        <Badge variant="outline" className="bg-amber-950/30 text-amber-500 border-amber-800/30">
          Pending
        </Badge>
      )
    case "delayed":
      return (
        <Badge variant="outline" className="bg-red-950/30 text-red-500 border-red-800/30">
          Delayed
        </Badge>
      )
  }
}

const getPriorityBadge = (priority: "high" | "medium" | "low") => {
  switch (priority) {
    case "high":
      return (
        <Badge variant="outline" className="bg-red-950/30 text-red-500 border-red-800/30">
          High
        </Badge>
      )
    case "medium":
      return (
        <Badge variant="outline" className="bg-amber-950/30 text-amber-500 border-amber-800/30">
          Medium
        </Badge>
      )
    case "low":
      return (
        <Badge variant="outline" className="bg-green-950/30 text-green-500 border-green-800/30">
          Low
        </Badge>
      )
  }
}

export default function ShipmentTable({ onSelectOrder, selectedOrder }: ShipmentTableProps) {
  return (
    <div className="rounded-md border border-[#2d3748]">
      <Table>
        <TableHeader className="bg-[#111827]">
          <TableRow className="border-[#2d3748] hover:bg-transparent">
            <TableHead className="text-gray-400">Tracking #</TableHead>
            <TableHead className="text-gray-400">Route</TableHead>
            <TableHead className="text-gray-400">Customer</TableHead>
            <TableHead className="text-gray-400">Status</TableHead>
            <TableHead className="text-gray-400">Departure</TableHead>
            <TableHead className="text-gray-400">Arrival</TableHead>
            <TableHead className="text-gray-400">Priority</TableHead>
            <TableHead className="text-gray-400">AI Optimization</TableHead>
            <TableHead className="text-right text-gray-400">Actions</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {shipments.map((shipment) => (
            <TableRow
              key={shipment.id}
              className={`border-[#2d3748] hover:bg-[#1a202c] cursor-pointer ${
                selectedOrder === shipment.id ? "bg-[#1a202c]" : ""
              }`}
              onClick={() => onSelectOrder(shipment.id)}
            >
              <TableCell className="font-medium text-white">{shipment.trackingNumber}</TableCell>
              <TableCell>
                <div className="flex flex-col">
                  <span className="text-xs text-gray-400">From: {shipment.origin}</span>
                  <span className="text-xs text-gray-400">To: {shipment.destination}</span>
                </div>
              </TableCell>
              <TableCell className="text-gray-300">{shipment.customer}</TableCell>
              <TableCell>
                <div className="flex items-center gap-2">
                  {getStatusIcon(shipment.status)}
                  {getStatusBadge(shipment.status)}
                </div>
              </TableCell>
              <TableCell className="text-gray-300">{shipment.departureDate}</TableCell>
              <TableCell className="text-gray-300">{shipment.arrivalDate}</TableCell>
              <TableCell>{getPriorityBadge(shipment.priority)}</TableCell>
              <TableCell>
                {shipment.aiOptimized ? (
                  <TooltipProvider>
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <div className="flex items-center">
                          <Badge variant="outline" className="bg-purple-950/30 text-purple-400 border-purple-800/30">
                            <Brain className="h-3 w-3 mr-1" />
                            Optimized
                          </Badge>
                        </div>
                      </TooltipTrigger>
                      <TooltipContent>
                        <p>AI optimized route saving ${shipment.aiSavings}</p>
                      </TooltipContent>
                    </Tooltip>
                  </TooltipProvider>
                ) : (
                  <Badge variant="outline" className="bg-gray-950/30 text-gray-400 border-gray-800/30">
                    Standard
                  </Badge>
                )}
              </TableCell>
              <TableCell className="text-right">
                <DropdownMenu>
                  <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
                    <Button variant="ghost" size="icon" className="text-gray-400 hover:text-white">
                      <MoreHorizontal className="h-4 w-4" />
                      <span className="sr-only">Open menu</span>
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end" className="bg-[#1e293b] border-[#2d3748] text-gray-300">
                    <DropdownMenuLabel>Actions</DropdownMenuLabel>
                    <DropdownMenuSeparator className="bg-[#2d3748]" />
                    <DropdownMenuItem
                      className="hover:bg-[#2d3748] hover:text-white cursor-pointer"
                      onClick={() => onSelectOrder(shipment.id)}
                    >
                      <Eye className="mr-2 h-4 w-4" />
                      View details
                    </DropdownMenuItem>
                    <DropdownMenuItem className="hover:bg-[#2d3748] hover:text-white cursor-pointer">
                      <FileEdit className="mr-2 h-4 w-4" />
                      Edit shipment
                    </DropdownMenuItem>
                    <DropdownMenuItem className="text-red-500 hover:bg-[#2d3748] hover:text-red-400 cursor-pointer">
                      <Trash2 className="mr-2 h-4 w-4" />
                      Cancel shipment
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/value-proposition.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { Brain, Route, Shield, LineChart, BatteryCharging, Truck } from "lucide-react"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"

export default function ValueProposition() {
  const benefits = [
    {
      icon: <Brain className="h-12 w-12 text-blue-600" />,
      title: "AI-Powered Freight Matching",
      description:
        "Our sophisticated algorithm connects you with the perfect carriers based on location, vehicle type, and delivery requirements. Reduce waiting time and find the ideal match instantly.",
      learnMore:
        "The matching algorithm considers over 20 factors including historical performance, route optimization, and real-time availability to ensure the most compatible carrier for your needs.",
    },
    {
      icon: <Route className="h-12 w-12 text-blue-600" />,
      title: "Predictive Route Optimization",
      description:
        "Our AI analyzes traffic patterns, weather conditions, and historical data to create optimal routes that reduce fuel consumption and delivery times by up to 30%.",
      learnMore:
        "The proprietary route optimization system processes over 100 million data points daily to generate routes that avoid traffic congestion, construction zones, and areas with poor road conditions, saving both time and fuel.",
    },
    {
      icon: <LineChart className="h-12 w-12 text-blue-600" />,
      title: "Predictive Maintenance",
      description:
        "Our AI predicts when your vehicles need maintenance before breakdowns occur, reducing downtime and extending fleet lifespan by detecting issues early.",
      learnMore:
        "The predictive maintenance system analyzes engine data, driving patterns, and maintenance history to identify potential issues up to three weeks before traditional methods, reducing unplanned downtime by 78%.",
    },
    {
      icon: <BatteryCharging className="h-12 w-12 text-blue-600" />,
      title: "Fuel Efficiency Optimization",
      description:
        "AI-driven insights help reduce fuel costs by 24% through optimized routes, driving behavior analysis, and vehicle performance monitoring.",
      learnMore:
        "The fuel efficiency module combines real-time vehicle data with driver behavior metrics to provide customized strategies for reducing fuel consumption, with most clients seeing ROI within the first three months.",
    },
    {
      icon: <Truck className="h-12 w-12 text-blue-600" />,
      title: "Fleet Utilization Analytics",
      description:
        "Maximize your fleet's productivity with AI analytics that identify underutilized vehicles and optimize assignment to increase capacity utilization by 35%.",
      learnMore:
        "The fleet analytics platform aggregates operational data to identify usage patterns, allowing fleet managers to make data-driven decisions about vehicle distribution, acquisition, and retirement.",
    },
    {
      icon: <Shield className="h-12 w-12 text-blue-600" />,
      title: "Secure Data Management",
      description:
        "Our platform ensures all your fleet and shipment data is protected with bank-grade encryption and comprehensive access controls.",
      learnMore:
        "All data is encrypted both in transit and at rest using AES-256 encryption, with role-based access controls and multi-factor authentication to ensure only authorized personnel can access sensitive information.",
    },
  ]

const container = {
    hidden: { opacity: 0 },
    show: {
      opacity: 1,
      transition: {
        staggerChildren: 0.2,
      },
    },
  }

const item = {
    hidden: { opacity: 0, y: 20 },
    show: { opacity: 1, y: 0, transition: { duration: 0.5 } },
  }

return (
    <section className="py-16 sm:py-24 bg-white" id="benefits">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center max-w-3xl mx-auto mb-16">
          <h2 className="text-3xl sm:text-4xl font-bold text-gray-900">Why Choose MarocTransit AI?</h2>
          <p className="mt-4 text-xl text-gray-500">
            Our AI-powered platform offers innovative solutions to transform your logistics operations
          </p>
        </div>

<motion.div
          className="grid gap-8 md:grid-cols-2 lg:grid-cols-3"
          variants={container}
          initial="hidden"
          whileInView="show"
          viewport={{ once: true, margin: "-100px" }}
        >
          {benefits.map((benefit, index) => (
            <motion.div key={index} variants={item}>
              <BenefitCard {...benefit} />
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  )
}

function BenefitCard({ icon, title, description, learnMore }) {
  return (
    <Card className="h-full flex flex-col transition-all duration-300 hover:shadow-lg border border-gray-200">
      <CardHeader className="pb-2">
        <div className="p-3 w-16 h-16 rounded-lg bg-blue-50 flex items-center justify-center mb-4">{icon}</div>
        <CardTitle className="text-xl font-bold">{title}</CardTitle>
      </CardHeader>
      <CardContent className="flex-grow">
        <p className="text-gray-600">{description}</p>
      </CardContent>
      <CardFooter className="pt-0">
        <details className="w-full">
          <summary className="text-blue-600 cursor-pointer font-medium hover:text-blue-800 flex items-center text-sm">
            Learn more
          </summary>
          <p className="mt-2 text-sm text-gray-500">{learnMore}</p>
        </details>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/performance-chart.tsx" isMerged="true"
"use client"

import { useEffect, useRef, useState } from "react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Brain, Fuel, Activity } from "lucide-react"

interface PerformanceChartProps {
  isFleetView?: boolean
}

export default function PerformanceChart({ isFleetView = false }: PerformanceChartProps) {
  const [activeTab, setActiveTab] = useState("deliveries")
  const canvasRef = useRef<HTMLCanvasElement>(null)

useEffect(() => {
    if (!canvasRef.current) return

const ctx = canvasRef.current.getContext("2d")
    if (!ctx) return

// Clear canvas
    ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height)

// Set dimensions
    const width = canvasRef.current.width
    const height = canvasRef.current.height
    const padding = 40
    const chartWidth = width - padding * 2
    const chartHeight = height - padding * 2

// Draw axes
    ctx.beginPath()
    ctx.strokeStyle = "#2d3748"
    ctx.lineWidth = 1
    ctx.moveTo(padding, padding)
    ctx.lineTo(padding, height - padding)
    ctx.lineTo(width - padding, height - padding)
    ctx.stroke()

// Generate data based on active tab
    let data: number[] = []
    let aiData: number[] = []

if (activeTab === "deliveries") {
      data = isFleetView
        ? [124, 135, 128, 142, 148, 137, 152, 158, 162, 175, 169, 184, 198, 192]
        : [65, 72, 68, 75, 82, 78, 85, 88, 92, 95, 89, 94, 98, 92]
      aiData = isFleetView
        ? [128, 142, 136, 150, 157, 147, 163, 170, 174, 190, 185, 200, 215, 210]
        : [70, 79, 75, 82, 89, 85, 93, 97, 100, 103, 97, 103, 108, 104]
    } else if (activeTab === "costs") {
      data = isFleetView
        ? [14.8, 14.7, 14.9, 14.6, 14.5, 14.3, 14.4, 14.2, 14.3, 14.1, 14.2, 14.0, 14.1, 14.2]
        : [4.8, 4.7, 4.9, 4.6, 4.5, 4.3, 4.4, 4.2, 4.3, 4.1, 4.2, 4.0, 4.1, 4.2]
      aiData = isFleetView
        ? [13.5, 13.4, 13.6, 13.2, 13.0, 12.8, 12.9, 12.7, 12.8, 12.6, 12.7, 12.5, 12.6, 12.7]
        : [4.2, 4.1, 4.3, 4.0, 3.9, 3.7, 3.8, 3.6, 3.7, 3.5, 3.6, 3.4, 3.5, 3.6]
    } else if (activeTab === "efficiency") {
      data = isFleetView
        ? [82, 84, 81, 85, 88, 90, 92, 89, 93, 96, 94, 97, 89, 91]
        : [72, 74, 71, 75, 78, 80, 82, 85, 83, 86, 88, 87, 89, 91]
      aiData = isFleetView
        ? [90, 92, 89, 94, 96, 97, 99, 97, 100, 102, 100, 103, 97, 99]
        : [82, 84, 81, 85, 88, 90, 92, 95, 93, 96, 98, 97, 99, 100]
    }

// Calculate scales
    const maxValue = Math.max(...[...data, ...aiData]) * 1.1
    const minValue = activeTab === "costs" ? Math.min(...[...data, ...aiData]) * 0.9 : 0
    const valueRange = maxValue - minValue

// Draw grid lines and labels
    ctx.textAlign = "right"
    ctx.textBaseline = "middle"
    ctx.font = "10px sans-serif"
    ctx.fillStyle = "#64748b"

const gridLines = 5
    for (let i = 0; i <= gridLines; i++) {
      const y = padding + (chartHeight - i * (chartHeight / gridLines))
      const value = minValue + i * (valueRange / gridLines)

// Grid line
      ctx.beginPath()
      ctx.strokeStyle = "#1e293b"
      ctx.lineWidth = 0.5
      ctx.moveTo(padding, y)
      ctx.lineTo(width - padding, y)
      ctx.stroke()

// Label
      ctx.fillText(activeTab === "costs" ? `$${value.toFixed(1)}` : Math.round(value).toString(), padding - 5, y)
    }

// X-axis labels (days)
    ctx.textAlign = "center"
    ctx.textBaseline = "top"
    const days = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14"]
    const barWidth = chartWidth / days.length

days.forEach((day, i) => {
      const x = padding + i * barWidth + barWidth / 2
      ctx.fillText(day, x, height - padding + 5)
    })

// Draw data
    if (activeTab === "deliveries" || activeTab === "efficiency") {
      // Standard data line
      ctx.beginPath()
      ctx.strokeStyle = "#2563eb" // Blue
      ctx.lineWidth = 2
      ctx.lineJoin = "round"

data.forEach((value, i) => {
        const x = padding + i * barWidth + barWidth / 2
        const y = height - padding - ((value - minValue) / valueRange) * chartHeight

if (i === 0) {
          ctx.moveTo(x, y)
        } else {
          ctx.lineTo(x, y)
        }
      })

ctx.stroke()

// Add standard data points
      data.forEach((value, i) => {
        const x = padding + i * barWidth + barWidth / 2
        const y = height - padding - ((value - minValue) / valueRange) * chartHeight

ctx.beginPath()
        ctx.fillStyle = "#1e293b"
        ctx.strokeStyle = "#2563eb" // Blue
        ctx.lineWidth = 2
        ctx.arc(x, y, 4, 0, Math.PI * 2)
        ctx.fill()
        ctx.stroke()
      })

// Add gradient area under the standard line
      const gradient = ctx.createLinearGradient(0, padding, 0, height - padding)
      gradient.addColorStop(0, "rgba(37, 99, 235, 0.2)")
      gradient.addColorStop(1, "rgba(37, 99, 235, 0)")

ctx.beginPath()
      ctx.fillStyle = gradient

data.forEach((value, i) => {
        const x = padding + i * barWidth + barWidth / 2
        const y = height - padding - ((value - minValue) / valueRange) * chartHeight

if (i === 0) {
          ctx.moveTo(x, y)
        } else {
          ctx.lineTo(x, y)
        }
      })

ctx.lineTo(padding + chartWidth, height - padding)
      ctx.lineTo(padding, height - padding)
      ctx.closePath()
      ctx.fill()

// AI-optimized data line
      ctx.beginPath()
      ctx.strokeStyle = "#8b5cf6" // Purple for AI
      ctx.lineWidth = 2
      ctx.lineJoin = "round"
      ctx.setLineDash([5, 3]) // Dashed line for AI prediction

aiData.forEach((value, i) => {
        const x = padding + i * barWidth + barWidth / 2
        const y = height - padding - ((value - minValue) / valueRange) * chartHeight

if (i === 0) {
          ctx.moveTo(x, y)
        } else {
          ctx.lineTo(x, y)
        }
      })

ctx.stroke()
      ctx.setLineDash([]) // Reset to solid line

// Add AI data points
      aiData.forEach((value, i) => {
        const x = padding + i * barWidth + barWidth / 2
        const y = height - padding - ((value - minValue) / valueRange) * chartHeight

ctx.beginPath()
        ctx.fillStyle = "#1e293b"
        ctx.strokeStyle = "#8b5cf6" // Purple
        ctx.lineWidth = 2
        ctx.arc(x, y, 4, 0, Math.PI * 2)
        ctx.fill()
        ctx.stroke()
      })

// Add label for AI line
      ctx.fillStyle = "#8b5cf6"
      ctx.textAlign = "right"
      ctx.font = "bold 10px sans-serif"
      ctx.fillText("AI Optimized", width - padding, padding + 15)

// Add label for standard line
      ctx.fillStyle = "#2563eb"
      ctx.fillText("Standard", width - padding, padding + 30)
    } else if (activeTab === "costs") {
      // Bar chart for costs - Standard
      data.forEach((value, i) => {
        const x = padding + i * barWidth + barWidth * 0.1
        const barW = barWidth * 0.35
        const y = height - padding - ((value - minValue) / valueRange) * chartHeight

// Draw standard bar
        ctx.beginPath()
        ctx.fillStyle = "#2563eb" // Blue
        ctx.fillRect(x, y, barW, height - padding - y)
      })

// Bar chart for costs - AI Optimized
      aiData.forEach((value, i) => {
        const x = padding + i * barWidth + barWidth * 0.5
        const barW = barWidth * 0.35
        const y = height - padding - ((value - minValue) / valueRange) * chartHeight

// Draw AI bar
        ctx.beginPath()
        ctx.fillStyle = "#8b5cf6" // Purple
        ctx.fillRect(x, y, barW, height - padding - y)
      })

// Add legend
      ctx.fillStyle = "#8b5cf6" // Purple
      ctx.textAlign = "right"
      ctx.font = "bold 10px sans-serif"
      ctx.fillText("AI Optimized", width - padding, padding + 15)

ctx.fillStyle = "#2563eb" // Blue
      ctx.fillText("Standard", width - padding, padding + 30)
    }
  }, [activeTab, isFleetView])

return (
    <div className="space-y-4">
      <Tabs value={activeTab} onValueChange={setActiveTab}>
        <TabsList className="grid grid-cols-3">
          <TabsTrigger value="deliveries" className="flex items-center">
            <Activity className="h-4 w-4 mr-2" />
            {isFleetView ? "Total Deliveries" : "Deliveries"}
          </TabsTrigger>
          <TabsTrigger value="costs" className="flex items-center">
            <Fuel className="h-4 w-4 mr-2" />
            {isFleetView ? "Operating Costs" : "Costs"}
          </TabsTrigger>
          <TabsTrigger value="efficiency" className="flex items-center">
            <Brain className="h-4 w-4 mr-2" />
            {isFleetView ? "AI Optimization" : "Efficiency"}
          </TabsTrigger>
        </TabsList>
        <TabsContent value="deliveries" className="space-y-4">
          <div className="flex items-center text-sm text-slate-500 dark:text-slate-400">
            <Brain className="h-4 w-4 mr-2 text-purple-500" />
            {isFleetView
              ? "AI-optimized delivery routes increased delivery rate by 8.5% across all carriers"
              : "AI-optimized delivery performance increased on-time deliveries by 9.2%"}
          </div>
        </TabsContent>
        <TabsContent value="costs" className="space-y-4">
          <div className="flex items-center text-sm text-slate-500 dark:text-slate-400">
            <Brain className="h-4 w-4 mr-2 text-purple-500" />
            {isFleetView
              ? "AI route optimization reduced operating costs by $1.50 per mile (11%)"
              : "AI route optimization reduced cost per mile by 13.5% over standard routes"}
          </div>
        </TabsContent>
        <TabsContent value="efficiency" className="space-y-4">
          <div className="flex items-center text-sm text-slate-500 dark:text-slate-400">
            <Brain className="h-4 w-4 mr-2 text-purple-500" />
            {isFleetView
              ? "AI boosted fleet utilization by 9.8% through predictive maintenance and route optimization"
              : "AI improved efficiency by 13.2% through optimized scheduling and resource allocation"}
          </div>
        </TabsContent>
      </Tabs>

<div className="h-[240px] w-full">
        <canvas ref={canvasRef} width={500} height={240} className="w-full h-full" />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ai-matching-showcase.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Brain, Truck, MapPin, CheckCircle, Clock } from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import TruckModel from "@/components/truck-model"

export default function AIMatchingShowcase() {
  const [step, setStep] = useState(1)
  const [isAnimating, setIsAnimating] = useState(false)

useEffect(() => {
    const timer = setTimeout(() => {
      if (step < 4) {
        setIsAnimating(true)
        setTimeout(() => {
          setStep((prev) => prev + 1)
          setIsAnimating(false)
        }, 1500)
      }
    }, 3000)

return () => clearTimeout(timer)
  }, [step])

return (
    <section className="py-16 sm:py-24 bg-gray-950 relative overflow-hidden">
      {/* Background elements */}
      <div className="absolute inset-0 bg-[url('/images/grid-pattern.svg')] opacity-5" />
      <div className="absolute -top-40 -left-40 h-[500px] w-[500px] rounded-full bg-blue-500/10 blur-3xl" />
      <div className="absolute -bottom-40 -right-40 h-[500px] w-[500px] rounded-full bg-purple-500/10 blur-3xl" />

<div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div className="text-center max-w-3xl mx-auto mb-16">
          <Badge className="mb-4 bg-purple-900/50 text-purple-400 border-purple-800/50 px-3 py-1">
            <Brain className="h-4 w-4 mr-2" />
            AI-Powered Technology
          </Badge>
          <h2 className="text-3xl sm:text-4xl font-bold text-white">Intelligent Carrier Matching</h2>
          <p className="mt-4 text-xl text-gray-400">
            Our sophisticated algorithm connects shippers with the perfect carriers based on multiple factors
          </p>
        </div>

<div className="grid gap-8 lg:grid-cols-2 items-center">
          <div className="order-2 lg:order-1">
            <div className="space-y-6">
              <Card
                className={`bg-gray-900/70 backdrop-blur-sm border-gray-800 transition-all duration-300 ${step === 1 ? "ring-2 ring-blue-500" : ""}`}
              >
                <CardHeader className="flex flex-row items-center gap-4 pb-2">
                  <div className="h-10 w-10 rounded-full bg-blue-900/50 flex items-center justify-center">
                    <MapPin className="h-5 w-5 text-blue-400" />
                  </div>
                  <div>
                    <CardTitle className="text-white">Step 1: Shipment Details</CardTitle>
                  </div>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-400 mb-3">
                    Enter your shipment details including origin, destination, cargo type, and delivery timeline.
                  </p>
                  <div className="grid grid-cols-2 gap-2 text-sm">
                    <div className="flex items-center text-gray-300">
                      <CheckCircle className="h-4 w-4 text-blue-500 mr-2" />
                      <span>Location data</span>
                    </div>
                    <div className="flex items-center text-gray-300">
                      <CheckCircle className="h-4 w-4 text-blue-500 mr-2" />
                      <span>Cargo specifications</span>
                    </div>
                    <div className="flex items-center text-gray-300">
                      <CheckCircle className="h-4 w-4 text-blue-500 mr-2" />
                      <span>Timeline requirements</span>
                    </div>
                    <div className="flex items-center text-gray-300">
                      <CheckCircle className="h-4 w-4 text-blue-500 mr-2" />
                      <span>Special handling needs</span>
                    </div>
                  </div>
                </CardContent>
              </Card>

<Card
                className={`bg-gray-900/70 backdrop-blur-sm border-gray-800 transition-all duration-300 ${step === 2 ? "ring-2 ring-purple-500" : ""}`}
              >
                <CardHeader className="flex flex-row items-center gap-4 pb-2">
                  <div className="h-10 w-10 rounded-full bg-purple-900/50 flex items-center justify-center">
                    <Brain className="h-5 w-5 text-purple-400" />
                  </div>
                  <div>
                    <CardTitle className="text-white">Step 2: AI Analysis</CardTitle>
                  </div>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-400 mb-3">
                    Our AI algorithm processes your requirements and analyzes our carrier network to find optimal
                    matches.
                  </p>
                  <div className="grid grid-cols-2 gap-2 text-sm">
                    <div className="flex items-center text-gray-300">
                      <CheckCircle className="h-4 w-4 text-purple-500 mr-2" />
                      <span>Carrier proximity</span>
                    </div>
                    <div className="flex items-center text-gray-300">
                      <CheckCircle className="h-4 w-4 text-purple-500 mr-2" />
                      <span>Vehicle compatibility</span>
                    </div>
                    <div className="flex items-center text-gray-300">
                      <CheckCircle className="h-4 w-4 text-purple-500 mr-2" />
                      <span>Performance history</span>
                    </div>
                    <div className="flex items-center text-gray-300">
                      <CheckCircle className="h-4 w-4 text-purple-500 mr-2" />
                      <span>Price optimization</span>
                    </div>
                  </div>
                </CardContent>
              </Card>

<Card
                className={`bg-gray-900/70 backdrop-blur-sm border-gray-800 transition-all duration-300 ${step === 3 ? "ring-2 ring-green-500" : ""}`}
              >
                <CardHeader className="flex flex-row items-center gap-4 pb-2">
                  <div className="h-10 w-10 rounded-full bg-green-900/50 flex items-center justify-center">
                    <Truck className="h-5 w-5 text-green-400" />
                  </div>
                  <div>
                    <CardTitle className="text-white">Step 3: Carrier Matching</CardTitle>
                  </div>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-400 mb-3">
                    Review AI-suggested carriers ranked by compatibility score, with transparent pricing and ETA.
                  </p>
                  <div className="space-y-2">
                    {[
                      { name: "TransitExpress", rating: 4.9, match: 98 },
                      { name: "FastTruck Inc.", rating: 4.7, match: 95 },
                      { name: "SpeedLogistics", rating: 4.8, match: 92 },
                    ].map((carrier, index) => (
                      <div
                        key={index}
                        className="flex justify-between items-center p-2 bg-gray-800/50 rounded border border-gray-700"
                      >
                        <div className="flex items-center">
                          <Truck className="h-4 w-4 text-green-500 mr-2" />
                          <span className="text-white text-sm">{carrier.name}</span>
                        </div>
                        <Badge className="bg-purple-600 text-white">{carrier.match}% Match</Badge>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>

<Card
                className={`bg-gray-900/70 backdrop-blur-sm border-gray-800 transition-all duration-300 ${step === 4 ? "ring-2 ring-amber-500" : ""}`}
              >
                <CardHeader className="flex flex-row items-center gap-4 pb-2">
                  <div className="h-10 w-10 rounded-full bg-amber-900/50 flex items-center justify-center">
                    <Clock className="h-5 w-5 text-amber-400" />
                  </div>
                  <div>
                    <CardTitle className="text-white">Step 4: Booking & Tracking</CardTitle>
                  </div>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-400 mb-3">
                    Book your preferred carrier and track your shipment in real-time from pickup to delivery.
                  </p>
                  <div className="grid grid-cols-2 gap-2 text-sm">
                    <div className="flex items-center text-gray-300">
                      <CheckCircle className="h-4 w-4 text-amber-500 mr-2" />
                      <span>Instant booking</span>
                    </div>
                    <div className="flex items-center text-gray-300">
                      <CheckCircle className="h-4 w-4 text-amber-500 mr-2" />
                      <span>Real-time tracking</span>
                    </div>
                    <div className="flex items-center text-gray-300">
                      <CheckCircle className="h-4 w-4 text-amber-500 mr-2" />
                      <span>Secure payment</span>
                    </div>
                    <div className="flex items-center text-gray-300">
                      <CheckCircle className="h-4 w-4 text-amber-500 mr-2" />
                      <span>Digital documentation</span>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>

<div className="mt-16 text-center">
          <Button size="lg" className="bg-blue-600 hover:bg-blue-700 text-white">
            Try AI Matching Now
          </Button>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/messages/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/dashboard/locations/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { MapPin, Plus, Edit, Trash2, Check, X, Clock, Package, Truck } from "lucide-react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { useAuth } from "@/lib/auth-context"
import { useRouter } from "next/navigation"

interface Location {
  id: string
  name: string
  address: string
  city: string
  country: string
  type: "pickup" | "delivery" | "both"
  isActive: boolean
  createdAt: Date
  lastUsed?: Date
}

export default function LocationsPage() {
  const { user } = useAuth()
  const router = useRouter()
  const [locations, setLocations] = useState<Location[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [isAddingLocation, setIsAddingLocation] = useState(false)
  const [editingLocationId, setEditingLocationId] = useState<string | null>(null)
  const [filter, setFilter] = useState<"all" | "pickup" | "delivery">("all")
  const [newLocation, setNewLocation] = useState<Partial<Location>>({
    name: "",
    address: "",
    city: "",
    country: "Morocco",
    type: "both",
  })

// Redirect if not a shipper
  useEffect(() => {
    if (user && user.role === "carrier") {
      router.push("/dashboard")
    }
  }, [user, router])

// Load mock data
  useEffect(() => {
    // Simulate API call
    setTimeout(() => {
      const mockLocations: Location[] = [
        {
          id: "loc1",
          name: "Main Warehouse",
          address: "123 Industrial Zone",
          city: "Casablanca",
          country: "Morocco",
          type: "both",
          isActive: true,
          createdAt: new Date(Date.now() - 1000 * 60 * 60 * 24 * 30), // 30 days ago
          lastUsed: new Date(Date.now() - 1000 * 60 * 60 * 24), // 1 day ago
        },
        {
          id: "loc2",
          name: "Downtown Office",
          address: "45 Hassan II Avenue",
          city: "Rabat",
          country: "Morocco",
          type: "pickup",
          isActive: true,
          createdAt: new Date(Date.now() - 1000 * 60 * 60 * 24 * 60), // 60 days ago
          lastUsed: new Date(Date.now() - 1000 * 60 * 60 * 24 * 5), // 5 days ago
        },
        {
          id: "loc3",
          name: "Distribution Center",
          address: "78 Port Area",
          city: "Tangier",
          country: "Morocco",
          type: "delivery",
          isActive: true,
          createdAt: new Date(Date.now() - 1000 * 60 * 60 * 24 * 15), // 15 days ago
          lastUsed: new Date(Date.now() - 1000 * 60 * 60 * 24 * 3), // 3 days ago
        },
        {
          id: "loc4",
          name: "Old Storage Facility",
          address: "12 Industrial Park",
          city: "Marrakech",
          country: "Morocco",
          type: "both",
          isActive: false,
          createdAt: new Date(Date.now() - 1000 * 60 * 60 * 24 * 120), // 120 days ago
        },
      ]

setLocations(mockLocations)
      setIsLoading(false)
    }, 1500)
  }, [])

const handleAddLocation = () => {
    if (!newLocation.name || !newLocation.address || !newLocation.city) {
      return
    }

const location: Location = {
      id: `loc${Date.now()}`,
      name: newLocation.name,
      address: newLocation.address,
      city: newLocation.city,
      country: newLocation.country || "Morocco",
      type: newLocation.type as "pickup" | "delivery" | "both",
      isActive: true,
      createdAt: new Date(),
    }

setLocations([location, ...locations])
    setNewLocation({
      name: "",
      address: "",
      city: "",
      country: "Morocco",
      type: "both",
    })
    setIsAddingLocation(false)
  }

const handleUpdateLocation = (id: string) => {
    if (!newLocation.name || !newLocation.address || !newLocation.city) {
      return
    }

setLocations(
      locations.map((loc) =>
        loc.id === id
          ? {
              ...loc,
              name: newLocation.name,
              address: newLocation.address,
              city: newLocation.city,
              country: newLocation.country || loc.country,
              type: newLocation.type as "pickup" | "delivery" | "both",
            }
          : loc,
      ),
    )
    setNewLocation({
      name: "",
      address: "",
      city: "",
      country: "Morocco",
      type: "both",
    })
    setEditingLocationId(null)
  }

const handleEditLocation = (location: Location) => {
    setNewLocation({
      name: location.name,
      address: location.address,
      city: location.city,
      country: location.country,
      type: location.type,
    })
    setEditingLocationId(location.id)
  }

const handleDeleteLocation = (id: string) => {
    setLocations(locations.filter((loc) => loc.id !== id))
  }

const handleToggleLocationStatus = (id: string) => {
    setLocations(
      locations.map((loc) =>
        loc.id === id
          ? {
              ...loc,
              isActive: !loc.isActive,
            }
          : loc,
      ),
    )
  }

const filteredLocations = locations.filter((loc) => {
    if (filter === "all") return true
    if (filter === "pickup") return loc.type === "pickup" || loc.type === "both"
    if (filter === "delivery") return loc.type === "delivery" || loc.type === "both"
    return true
  })

if (isLoading) {
    return (
      <div className="p-6 flex items-center justify-center h-[calc(100vh-4rem)]">
        <div className="flex flex-col items-center">
          <div className="h-12 w-12 animate-spin rounded-full border-4 border-blue-600 border-t-transparent"></div>
          <p className="mt-4 text-white">Loading locations...</p>
        </div>
      </div>
    )
  }

return (
    <div className="p-6 space-y-6">
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight text-white">My Locations</h1>
          <p className="text-slate-400">Manage your pickup and delivery locations</p>
        </div>
        <Button className="bg-blue-600 hover:bg-blue-700" onClick={() => setIsAddingLocation(true)}>
          <Plus className="h-4 w-4 mr-2" />
          Add Location
        </Button>
      </div>

<div className="flex flex-col md:flex-row gap-4">
        <div className="md:w-2/3">
          <Card className="bg-gray-900 border-gray-800">
            <CardHeader className="pb-2">
              <div className="flex items-center justify-between">
                <CardTitle className="text-white">Saved Locations</CardTitle>
                <Tabs defaultValue="all" onValueChange={(v) => setFilter(v as any)}>
                  <TabsList className="grid w-[300px] grid-cols-3 bg-gray-800">
                    <TabsTrigger value="all" className="data-[state=active]:bg-blue-600 data-[state=active]:text-white">
                      All
                    </TabsTrigger>
                    <TabsTrigger
                      value="pickup"
                      className="data-[state=active]:bg-blue-600 data-[state=active]:text-white"
                    >
                      Pickup
                    </TabsTrigger>
                    <TabsTrigger
                      value="delivery"
                      className="data-[state=active]:bg-blue-600 data-[state=active]:text-white"
                    >
                      Delivery
                    </TabsTrigger>
                  </TabsList>
                </Tabs>
              </div>
              <CardDescription className="text-gray-400">
                Your saved locations for shipment pickup and delivery
              </CardDescription>
            </CardHeader>
            <CardContent>
              {filteredLocations.length === 0 ? (
                <div className="text-center py-8">
                  <MapPin className="h-12 w-12 mx-auto text-gray-700 mb-4" />
                  <h3 className="text-lg font-medium text-gray-400 mb-2">No locations found</h3>
                  <p className="text-gray-500 mb-4">Add your first location to get started</p>
                  <Button className="bg-blue-600 hover:bg-blue-700" onClick={() => setIsAddingLocation(true)}>
                    <Plus className="h-4 w-4 mr-2" />
                    Add Location
                  </Button>
                </div>
              ) : (
                <div className="space-y-4">
                  {filteredLocations.map((location) => (
                    <Card key={location.id} className="bg-gray-800 border-gray-700">
                      <CardContent className="p-4">
                        {editingLocationId === location.id ? (
                          <div className="space-y-4">
                            <div className="grid grid-cols-2 gap-4">
                              <div className="space-y-2">
                                <label className="text-sm font-medium text-gray-300">Location Name</label>
                                <Input
                                  value={newLocation.name}
                                  onChange={(e) => setNewLocation({ ...newLocation, name: e.target.value })}
                                  className="bg-gray-700 border-gray-600 text-white"
                                />
                              </div>
                              <div className="space-y-2">
                                <label className="text-sm font-medium text-gray-300">Location Type</label>
                                <select
                                  value={newLocation.type}
                                  onChange={(e) =>
                                    setNewLocation({
                                      ...newLocation,
                                      type: e.target.value as "pickup" | "delivery" | "both",
                                    })
                                  }
                                  className="w-full h-10 rounded-md border border-gray-600 bg-gray-700 text-white px-3"
                                >
                                  <option value="pickup">Pickup Only</option>
                                  <option value="delivery">Delivery Only</option>
                                  <option value="both">Both Pickup & Delivery</option>
                                </select>
                              </div>
                            </div>
                            <div className="space-y-2">
                              <label className="text-sm font-medium text-gray-300">Address</label>
                              <Input
                                value={newLocation.address}
                                onChange={(e) => setNewLocation({ ...newLocation, address: e.target.value })}
                                className="bg-gray-700 border-gray-600 text-white"
                              />
                            </div>
                            <div className="grid grid-cols-2 gap-4">
                              <div className="space-y-2">
                                <label className="text-sm font-medium text-gray-300">City</label>
                                <Input
                                  value={newLocation.city}
                                  onChange={(e) => setNewLocation({ ...newLocation, city: e.target.value })}
                                  className="bg-gray-700 border-gray-600 text-white"
                                />
                              </div>
                              <div className="space-y-2">
                                <label className="text-sm font-medium text-gray-300">Country</label>
                                <Input
                                  value={newLocation.country}
                                  onChange={(e) => setNewLocation({ ...newLocation, country: e.target.value })}
                                  className="bg-gray-700 border-gray-600 text-white"
                                />
                              </div>
                            </div>
                            <div className="flex justify-end gap-2">
                              <Button
                                variant="outline"
                                className="border-gray-600 text-gray-300 hover:bg-gray-700"
                                onClick={() => {
                                  setEditingLocationId(null)
                                  setNewLocation({
                                    name: "",
                                    address: "",
                                    city: "",
                                    country: "Morocco",
                                    type: "both",
                                  })
                                }}
                              >
                                <X className="h-4 w-4 mr-2" />
                                Cancel
                              </Button>
                              <Button
                                className="bg-blue-600 hover:bg-blue-700"
                                onClick={() => handleUpdateLocation(location.id)}
                              >
                                <Check className="h-4 w-4 mr-2" />
                                Save Changes
                              </Button>
                            </div>
                          </div>
                        ) : (
                          <div>
                            <div className="flex justify-between items-start">
                              <div>
                                <h3 className="text-lg font-medium text-white flex items-center">
                                  {location.name}
                                  {!location.isActive && (
                                    <Badge variant="outline" className="ml-2 text-gray-400 border-gray-600">
                                      Inactive
                                    </Badge>
                                  )}
                                </h3>
                                <p className="text-gray-400 mt-1">
                                  {location.address}, {location.city}, {location.country}
                                </p>
                              </div>
                              <div>
                                <Badge
                                  className={
                                    location.type === "pickup"
                                      ? "bg-green-600"
                                      : location.type === "delivery"
                                        ? "bg-blue-600"
                                        : "bg-purple-600"
                                  }
                                >
                                  {location.type === "pickup"
                                    ? "Pickup Only"
                                    : location.type === "delivery"
                                      ? "Delivery Only"
                                      : "Pickup & Delivery"}
                                </Badge>
                              </div>
                            </div>
                            <div className="flex items-center text-xs text-gray-500 mt-2">
                              <Clock className="h-3 w-3 mr-1" />
                              Added {location.createdAt.toLocaleDateString()}
                              {location.lastUsed && (
                                <span className="ml-3">Last used {location.lastUsed.toLocaleDateString()}</span>
                              )}
                            </div>
                            <div className="flex justify-end gap-2 mt-4">
                              <Button
                                variant="outline"
                                size="sm"
                                className="border-gray-700 text-gray-300 hover:bg-gray-700"
                                onClick={() => handleToggleLocationStatus(location.id)}
                              >
                                {location.isActive ? "Deactivate" : "Activate"}
                              </Button>
                              <Button
                                variant="outline"
                                size="sm"
                                className="border-gray-700 text-gray-300 hover:bg-gray-700"
                                onClick={() => handleEditLocation(location)}
                              >
                                <Edit className="h-4 w-4 mr-1" />
                                Edit
                              </Button>
                              <Button
                                variant="outline"
                                size="sm"
                                className="border-gray-700 text-red-400 hover:bg-gray-700 hover:text-red-300"
                                onClick={() => handleDeleteLocation(location.id)}
                              >
                                <Trash2 className="h-4 w-4 mr-1" />
                                Delete
                              </Button>
                            </div>
                          </div>
                        )}
                      </CardContent>
                    </Card>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        </div>

<div className="md:w-1/3">
          {isAddingLocation ? (
            <Card className="bg-gray-900 border-gray-800">
              <CardHeader>
                <CardTitle className="text-white">Add New Location</CardTitle>
                <CardDescription className="text-gray-400">
                  Enter the details of your new pickup or delivery location
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <label className="text-sm font-medium text-gray-300">Location Name</label>
                  <Input
                    placeholder="e.g. Main Warehouse"
                    value={newLocation.name}
                    onChange={(e) => setNewLocation({ ...newLocation, name: e.target.value })}
                    className="bg-gray-800 border-gray-700 text-white placeholder:text-gray-500"
                  />
                </div>
                <div className="space-y-2">
                  <label className="text-sm font-medium text-gray-300">Location Type</label>
                  <select
                    value={newLocation.type}
                    onChange={(e) =>
                      setNewLocation({ ...newLocation, type: e.target.value as "pickup" | "delivery" | "both" })
                    }
                    className="w-full h-10 rounded-md border border-gray-700 bg-gray-800 text-white px-3"
                  >
                    <option value="pickup">Pickup Only</option>
                    <option value="delivery">Delivery Only</option>
                    <option value="both">Both Pickup & Delivery</option>
                  </select>
                </div>
                <div className="space-y-2">
                  <label className="text-sm font-medium text-gray-300">Address</label>
                  <Input
                    placeholder="Street address"
                    value={newLocation.address}
                    onChange={(e) => setNewLocation({ ...newLocation, address: e.target.value })}
                    className="bg-gray-800 border-gray-700 text-white placeholder:text-gray-500"
                  />
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-gray-300">City</label>
                    <Input
                      placeholder="City"
                      value={newLocation.city}
                      onChange={(e) => setNewLocation({ ...newLocation, city: e.target.value })}
                      className="bg-gray-800 border-gray-700 text-white placeholder:text-gray-500"
                    />
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-gray-300">Country</label>
                    <Input
                      placeholder="Country"
                      value={newLocation.country}
                      onChange={(e) => setNewLocation({ ...newLocation, country: e.target.value })}
                      className="bg-gray-800 border-gray-700 text-white placeholder:text-gray-500"
                    />
                  </div>
                </div>
              </CardContent>
              <CardFooter className="flex justify-between">
                <Button
                  variant="outline"
                  className="border-gray-700 text-gray-300 hover:bg-gray-800"
                  onClick={() => {
                    setIsAddingLocation(false)
                    setNewLocation({
                      name: "",
                      address: "",
                      city: "",
                      country: "Morocco",
                      type: "both",
                    })
                  }}
                >
                  Cancel
                </Button>
                <Button className="bg-blue-600 hover:bg-blue-700" onClick={handleAddLocation}>
                  Add Location
                </Button>
              </CardFooter>
            </Card>
          ) : (
            <Card className="bg-gray-900 border-gray-800">
              <CardHeader>
                <CardTitle className="text-white">Location Statistics</CardTitle>
                <CardDescription className="text-gray-400">Overview of your location usage</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <div className="bg-gray-800 p-4 rounded-lg border border-gray-700">
                    <div className="flex items-center justify-between mb-2">
                      <h3 className="text-sm font-medium text-white">Total Locations</h3>
                      <MapPin className="h-4 w-4 text-blue-500" />
                    </div>
                    <p className="text-2xl font-bold text-white">{locations.length}</p>
                    <p className="text-xs text-gray-400 mt-1">
                      {locations.filter((l) => l.isActive).length} active, {locations.filter((l) => !l.isActive).length}{" "}
                      inactive
                    </p>
                  </div>
                  <div className="bg-gray-800 p-4 rounded-lg border border-gray-700">
                    <div className="flex items-center justify-between mb-2">
                      <h3 className="text-sm font-medium text-white">Location Types</h3>
                      <Package className="h-4 w-4 text-green-500" />
                    </div>
                    <p className="text-2xl font-bold text-white">{locations.filter((l) => l.type === "both").length}</p>
                    <p className="text-xs text-gray-400 mt-1">
                      {locations.filter((l) => l.type === "pickup" || l.type === "both").length} pickup,{" "}
                      {locations.filter((l) => l.type === "delivery" || l.type === "both").length} delivery
                    </p>
                  </div>
                </div>

<div className="bg-gray-800 p-4 rounded-lg border border-gray-700">
                  <div className="flex items-center justify-between mb-2">
                    <h3 className="text-sm font-medium text-white">Recent Activity</h3>
                    <Clock className="h-4 w-4 text-amber-500" />
                  </div>
                  <div className="space-y-3">
                    <div className="flex items-center justify-between text-sm">
                      <span className="text-gray-400">Last location added:</span>
                      <span className="text-white">
                        {locations.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())[0]?.name || "N/A"}
                      </span>
                    </div>
                    <div className="flex items-center justify-between text-sm">
                      <span className="text-gray-400">Last location used:</span>
                      <span className="text-white">
                        {locations
                          .filter((l) => l.lastUsed)
                          .sort((a, b) => (b.lastUsed?.getTime() || 0) - (a.lastUsed?.getTime() || 0))[0]?.name ||
                          "N/A"}
                      </span>
                    </div>
                  </div>
                </div>

<div className="bg-gray-800 p-4 rounded-lg border border-gray-700">
                  <div className="flex items-center justify-between mb-2">
                    <h3 className="text-sm font-medium text-white">Cities Coverage</h3>
                    <Truck className="h-4 w-4 text-purple-500" />
                  </div>
                  <div className="space-y-2">
                    {Array.from(new Set(locations.map((l) => l.city))).map((city) => (
                      <div key={city} className="flex items-center justify-between text-sm">
                        <span className="text-gray-400">{city}:</span>
                        <span className="text-white">{locations.filter((l) => l.city === city).length} locations</span>
                      </div>
                    ))}
                  </div>
                </div>
              </CardContent>
              <CardFooter>
                <Button className="w-full bg-blue-600 hover:bg-blue-700" onClick={() => setIsAddingLocation(true)}>
                  <Plus className="h-4 w-4 mr-2" />
                  Add New Location
                </Button>
              </CardFooter>
            </Card>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/nearby/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { useAuth } from "@/lib/auth-context"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { MapPin, Package, Clock } from "lucide-react"
import { ShipmentMap } from "@/components/shipment-map"

// Mock data for nearby shippers/carriers
const MOCK_NEARBY = [
  {
    id: "1",
    name: "John Doe",
    type: "individual",
    location: {
      lat: 40.7128,
      lng: -74.006,
      address: "New York, NY",
    },
    distance: "2.3 miles",
    shipmentType: "Furniture",
    weight: "250 lbs",
    dimensions: "4x3x2 ft",
    deadline: "2 days",
    price: "$350",
  },
  {
    id: "2",
    name: "ABC Logistics",
    type: "company",
    location: {
      lat: 40.7328,
      lng: -74.026,
      address: "Jersey City, NJ",
    },
    distance: "5.1 miles",
    shipmentType: "Electronics",
    weight: "120 lbs",
    dimensions: "2x2x2 ft",
    deadline: "1 day",
    price: "$280",
  },
  {
    id: "3",
    name: "Sarah Smith",
    type: "individual",
    location: {
      lat: 40.6928,
      lng: -73.986,
      address: "Brooklyn, NY",
    },
    distance: "6.7 miles",
    shipmentType: "Household Goods",
    weight: "350 lbs",
    dimensions: "5x4x3 ft",
    deadline: "3 days",
    price: "$420",
  },
]

export default function NearbyPage() {
  const { user } = useAuth()
  const [nearby, setNearby] = useState(MOCK_NEARBY)
  const [selectedItem, setSelectedItem] = useState<string | null>(null)
  const [requestSent, setRequestSent] = useState<Record<string, boolean>>({})

if (!user) {
    return null
  }

const isCarrier = user.userType === "carrier"
  const title = isCarrier ? "Nearby Shipments" : "Nearby Carriers"

const handleSendRequest = (id: string) => {
    setRequestSent((prev) => ({ ...prev, [id]: true }))
    // In a real app, this would send a request to the API
  }

const mapMarkers = nearby.map((item) => ({
    id: item.id,
    position: { lat: item.location.lat, lng: item.location.lng },
    title: item.name,
    isSelected: selectedItem === item.id,
  }))

if (user.location) {
    mapMarkers.push({
      id: "current",
      position: { lat: user.location.lat, lng: user.location.lng },
      title: "Your Location",
      isSelected: false,
      isCurrent: true,
    })
  }

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
        <p className="text-muted-foreground">
          {isCarrier
            ? "Find shipments near your location that need transportation."
            : "Find carriers near your location that can transport your goods."}
        </p>
      </div>

<div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
        <div className="lg:col-span-2">
          <Card className="h-[500px]">
            <CardHeader className="p-4">
              <CardTitle>Location Map</CardTitle>
              <CardDescription>
                {isCarrier ? "Shipments near your current location" : "Carriers near your current location"}
              </CardDescription>
            </CardHeader>
            <CardContent className="p-0">
              <ShipmentMap
                markers={mapMarkers}
                onMarkerClick={(id) => setSelectedItem(id)}
                className="h-[420px] w-full rounded-b-lg"
              />
            </CardContent>
          </Card>
        </div>

<div className="space-y-6">
          {nearby.map((item) => (
            <Card
              key={item.id}
              className={`transition-all ${selectedItem === item.id ? "ring-2 ring-primary" : ""}`}
              onClick={() => setSelectedItem(item.id)}
            >
              <CardHeader className="pb-2">
                <div className="flex justify-between items-start">
                  <CardTitle className="text-lg">{item.name}</CardTitle>
                  <Badge variant="outline">{item.distance}</Badge>
                </div>
                <CardDescription className="flex items-center">
                  <MapPin className="h-3 w-3 mr-1" />
                  {item.location.address}
                </CardDescription>
              </CardHeader>
              <CardContent className="pb-2">
                <div className="grid grid-cols-2 gap-2 text-sm">
                  <div className="flex items-center">
                    <Package className="h-4 w-4 mr-2 text-muted-foreground" />
                    {item.shipmentType}
                  </div>
                  <div>Weight: {item.weight}</div>
                  <div>Size: {item.dimensions}</div>
                  <div className="flex items-center">
                    <Clock className="h-4 w-4 mr-2 text-muted-foreground" />
                    {item.deadline}
                  </div>
                </div>
                <div className="mt-2 font-medium text-right">{item.price}</div>
              </CardContent>
              <CardFooter>
                <Button className="w-full" onClick={() => handleSendRequest(item.id)} disabled={requestSent[item.id]}>
                  {requestSent[item.id] ? "Request Sent" : isCarrier ? "Request to Transport" : "Request Carrier"}
                </Button>
              </CardFooter>
            </Card>
          ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/user-type-selector.tsx" isMerged="true"
"use client"

import { Truck, User, Building2 } from "lucide-react"
import { useTranslation } from "@/lib/translation-context"

export type UserType = "carrier" | "individual" | "company"

interface UserTypeSelectorProps {
  onSelect: (type: UserType) => void
  selectedType: UserType | null
}

export function UserTypeSelector({ onSelect, selectedType }: UserTypeSelectorProps) {
  const { t } = useTranslation()

return (
    <div className="w-full">
      <div className="mb-4">
        <h2 className="text-xl font-bold text-white">{t("login.selectAccountType")}</h2>
        <p className="text-sm text-gray-400">{t("login.chooseAccountType")}</p>
      </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div
          onClick={() => onSelect("carrier")}
          className={`flex flex-col items-center rounded-lg border-2 p-5 cursor-pointer transition-all duration-200 ${
            selectedType === "carrier"
              ? "border-blue-500 bg-blue-900/20"
              : "border-gray-700 bg-gray-900/50 hover:border-gray-600 hover:bg-gray-800/50"
          }`}
        >
          <div className="bg-blue-900/30 p-3 rounded-full mb-3">
            <Truck className="h-8 w-8 text-blue-400" />
          </div>
          <h3 className="text-lg font-medium text-white mb-2">{t("login.carrier")}</h3>
          <p className="text-sm text-gray-400 text-center">{t("login.carrierDesc")}</p>
        </div>

<div
          onClick={() => onSelect("individual")}
          className={`flex flex-col items-center rounded-lg border-2 p-5 cursor-pointer transition-all duration-200 ${
            selectedType === "individual"
              ? "border-blue-500 bg-blue-900/20"
              : "border-gray-700 bg-gray-900/50 hover:border-gray-600 hover:bg-gray-800/50"
          }`}
        >
          <div className="bg-blue-900/30 p-3 rounded-full mb-3">
            <User className="h-8 w-8 text-blue-400" />
          </div>
          <h3 className="text-lg font-medium text-white mb-2">{t("login.individual")}</h3>
          <p className="text-sm text-gray-400 text-center">{t("login.individualDesc")}</p>
        </div>

<div
          onClick={() => onSelect("company")}
          className={`flex flex-col items-center rounded-lg border-2 p-5 cursor-pointer transition-all duration-200 ${
            selectedType === "company"
              ? "border-blue-500 bg-blue-900/20"
              : "border-gray-700 bg-gray-900/50 hover:border-gray-600 hover:bg-gray-800/50"
          }`}
        >
          <div className="bg-blue-900/30 p-3 rounded-full mb-3">
            <Building2 className="h-8 w-8 text-blue-400" />
          </div>
          <h3 className="text-lg font-medium text-white mb-2">{t("login.company")}</h3>
          <p className="text-sm text-gray-400 text-center">{t("login.companyDesc")}</p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="tailwind.config.ts" isQuickEdit="true" isMerged="true"
import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        orange: {
          50: "#fff7ed",
          100: "#ffedd5",
          200: "#fed7aa",
          300: "#fdba74",
          400: "#fb923c",
          500: "#f97316",
          600: "#ea580c",
          700: "#c2410c",
          800: "#9a3412",
          900: "#7c2d12",
          950: "#431407",
        },
        blue: {
          50: "#eff6ff",
          100: "#dbeafe",
          200: "#bfdbfe",
          300: "#93c5fd",
          400: "#60a5fa",
          500: "#3b82f6",
          600: "#2563eb",
          700: "#1d4ed8",
          800: "#1e40af",
          900: "#1e3a8a",
          950: "#172554",
        },
        gray: {
          50: "#f9fafb",
          100: "#f3f4f6",
          200: "#e5e7eb",
          300: "#d1d5db",
          400: "#9ca3af",
          500: "#6b7280",
          600: "#4b5563",
          700: "#374151",
          800: "#1f2937",
          900: "#111827",
          950: "#0f172a",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate"), require("tailwindcss-rtl")],
} satisfies Config

export default config
[V0_FILE]css:file="app/globals.css" isFixed="true" isQuickEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 222 47% 11%;
    --foreground: 210 40% 98%;

--card: 222 47% 11%;
    --card-foreground: 210 40% 98%;

--popover: 222 47% 11%;
    --popover-foreground: 210 40% 98%;

--primary: 221 83% 53%;
    --primary-foreground: 210 40% 98%;

--secondary: 217 33% 17%;
    --secondary-foreground: 210 40% 98%;

--muted: 217 33% 17%;
    --muted-foreground: 215 20% 65%;

--accent: 221 83% 53%;
    --accent-foreground: 210 40% 98%;

--destructive: 0 84% 60%;
    --destructive-foreground: 210 40% 98%;

--border: 217 33% 17%;
    --input: 217 33% 17%;
    --ring: 221 83% 53%;

--radius: 0.5rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Custom Animations */
@keyframes dash {
  to {
    stroke-dashoffset: 1000;
  }
}

.animate-dash {
  animation: dash 20s linear infinite;
}

/* For aspect ratio support */
.aspect-w-16 {
  position: relative;
  padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
  --tw-aspect-w: 16;
}

.aspect-h-9 {
  --tw-aspect-h: 9;
}

.aspect-w-16 > * {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

@layer utilities {
  [dir="rtl"] .rtl\:space-x-reverse > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 1;
  }

[dir="rtl"] .rtl\:rotate-180 {
    --tw-rotate: 180deg;
    transform: var(--tw-transform);
  }

[dir="rtl"] .rtl\:mr-auto {
    margin-right: auto;
  }

[dir="rtl"] .rtl\:ml-auto {
    margin-left: auto;
  }
}
[V0_FILE]typescriptreact:file="components/shipment-map.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useRef, useState } from "react"
import { motion } from "framer-motion"
import { Truck, MapPin, Search, Plus, Minus, Layers, X } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"

interface ShipmentMapProps {
  markers?: {
    id: string
    position: { lat: number; lng: number }
    title: string
    isSelected?: boolean
    isCurrent?: boolean
  }[]
  onMarkerClick?: (id: string) => void
  isFleetView?: boolean
  className?: string
}

export function ShipmentMap({ markers, onMarkerClick, isFleetView = false, className = "" }: ShipmentMapProps) {
  const mapRef = useRef<HTMLDivElement>(null)
  const [isLoaded, setIsLoaded] = useState(false)
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedOrder, setSelectedOrder] = useState<string | null>("order_vloJEBq")

useEffect(() => {
    // Simulate map loading
    const timer = setTimeout(() => {
      setIsLoaded(true)
    }, 1000)

return () => clearTimeout(timer)
  }, [])

return (
    <div ref={mapRef} className={`w-full h-full bg-[#1a202c] relative overflow-hidden ${className}`}>
      {!isLoaded ? (
        <div className="absolute inset-0 flex items-center justify-center">
          <div className="flex flex-col items-center">
            <div className="h-8 w-8 animate-spin rounded-full border-4 border-blue-600 border-t-transparent"></div>
            <p className="mt-2 text-sm text-gray-400">Loading map...</p>
          </div>
        </div>
      ) : (
        <>
          {/* Map background */}
          <div className="absolute inset-0">
            <img
              src="/placeholder.svg?height=600&width=800"
              alt="Map background"
              className="w-full h-full object-cover"
            />
          </div>

{/* Map controls */}
          <div className="absolute top-4 left-4 right-4 flex items-center space-x-2">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
              <input
                type="text"
                placeholder="Search locations..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="h-9 w-full pl-10 pr-4 rounded-md bg-[#1e293b] border border-[#2d3748] text-gray-300 placeholder:text-gray-500 focus:border-blue-500 focus:outline-none"
              />
            </div>
            <Button
              variant="outline"
              size="icon"
              className="h-9 w-9 border-[#2d3748] bg-[#1e293b] text-gray-300 hover:bg-[#2d3748] hover:text-white"
            >
              <Layers className="h-4 w-4" />
            </Button>
          </div>

{/* Order marker */}
          <div className="absolute left-1/2 bottom-1/3 transform -translate-x-1/2">
            <div className="relative">
              <div className="absolute -top-1 -right-1 w-5 h-5 rounded-full bg-blue-600 flex items-center justify-center text-white text-xs font-bold">
                1
              </div>
              <div className="bg-blue-600 text-white p-1 rounded-full">
                <MapPin className="h-6 w-6" />
              </div>
            </div>
          </div>

{/* Moving truck */}
          <motion.div
            className="absolute"
            initial={{ x: 100, y: 300 }}
            animate={{ x: 500, y: 400 }}
            transition={{
              duration: 20,
              repeat: Number.POSITIVE_INFINITY,
              repeatType: "reverse",
            }}
          >
            <div className="bg-blue-600 text-white p-1 rounded-full">
              <Truck className="h-5 w-5" />
            </div>
          </motion.div>

{/* Zone overlays */}
          <div className="absolute inset-0">
            <svg width="100%" height="100%" viewBox="0 0 800 600" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M200,150 C300,100 400,200 500,150 C600,100 700,200 600,300 C500,400 400,350 300,400 C200,450 100,400 200,150Z"
                fill="rgba(59, 130, 246, 0.1)"
                stroke="#3b82f6"
                strokeWidth="2"
                strokeDasharray="5,5"
              />
            </svg>
          </div>

{/* Order popup */}
          {selectedOrder && (
            <div className="absolute top-1/4 left-1/4 bg-[#1e293b] border border-[#2d3748] rounded-md shadow-lg p-3 max-w-[250px]">
              <div className="flex items-center justify-between mb-2">
                <div className="flex items-center">
                  <Badge className="bg-blue-600 text-white text-xs">Dispatched</Badge>
                </div>
                <Button
                  variant="ghost"
                  size="icon"
                  className="h-6 w-6 text-gray-400 hover:text-white"
                  onClick={() => setSelectedOrder(null)}
                >
                  <X className="h-4 w-4" />
                </Button>
              </div>
              <div className="text-sm text-white font-medium mb-1">{selectedOrder}</div>
              <div className="text-xs text-gray-400 mb-2">May 5, 2024 13:30</div>
              <div className="flex items-center text-xs text-gray-300 mb-1">
                <MapPin className="h-3 w-3 mr-1 text-green-500" />
                <span>Chicago Distribution Center</span>
              </div>
              <div className="flex items-center text-xs text-gray-300">
                <MapPin className="h-3 w-3 mr-1 text-red-500" />
                <span>Atlanta Logistics Hub</span>
              </div>
            </div>
          )}
        </>
      )}
    </div>
  )
}

export default ShipmentMap
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
"use client"

import MainNavbar from "@/components/main-navbar"
import HeroSection from "@/components/hero-section"
import FeaturesSection from "@/components/features-section"
import HowItWorksSection from "@/components/how-it-works-section"
import TestimonialsSection from "@/components/testimonials-section"
import ValueProposition from "@/components/value-proposition"
import MobileAppPromotion from "@/components/mobile-app-promotion"
import TruckModel from "@/components/truck-model"
import FinalCTA from "@/components/final-cta"
import MainFooter from "@/components/main-footer"
import { useTranslation } from "@/lib/translation-context"

export default function HomePage() {
  const { t } = useTranslation()

return (
    <div className="flex flex-col min-h-screen">
      <MainNavbar />
      <main className="flex-1">
        <HeroSection />

{/* 3D Truck Model Showcase */}
        <section className="py-16 bg-gradient-to-b from-[#0f172a] to-[#1e293b]">
          <div className="container mx-auto px-4">
            <div className="text-center max-w-3xl mx-auto mb-12">
              <h2 className="text-3xl sm:text-4xl font-bold text-white">AI-Powered Fleet Management</h2>
              <p className="mt-4 text-xl text-gray-400">Experience our cutting-edge 3D visualization technology</p>
            </div>
            <div className="h-[500px] w-full rounded-xl overflow-hidden shadow-2xl border border-gray-800">
              <TruckModel mode="showcase" />
            </div>
          </div>
        </section>

<FeaturesSection />
        <ValueProposition />
        <HowItWorksSection />
        <TestimonialsSection />
        <MobileAppPromotion />
        <FinalCTA />
      </main>
      <MainFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/truck-model.tsx" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import { Canvas, useFrame, useThree } from "@react-three/fiber"
import { OrbitControls, Environment, PerspectiveCamera, Text, Float } from "@react-three/drei"
import { Suspense } from "react"
import { motion } from "framer-motion"
import { Truck } from "lucide-react"

// Enhanced truck model with more details
function TruckModel3D({ position = [0, 0, 0], rotation = [0, 0, 0], color = "#4f46e5" }) {
  const truckRef = useRef()
  const { viewport } = useThree()

useFrame((state) => {
    if (truckRef.current) {
      // Gentle floating animation
      truckRef.current.position.y = position[1] + Math.sin(state.clock.getElapsedTime() * 0.5) * 0.05
      // Slow rotation
      truckRef.current.rotation.y = rotation[1] + state.clock.getElapsedTime() * 0.2
    }
  })

return (
    <Float speed={1.5} rotationIntensity={0.2} floatIntensity={0.5}>
      <group ref={truckRef} position={position} rotation={rotation} scale={1.5}>
        {/* Truck Cab */}
        <mesh position={[1.5, 0.75, 0]} castShadow>
          <boxGeometry args={[1.2, 1, 2]} />
          <meshStandardMaterial color={color} metalness={0.6} roughness={0.2} />
        </mesh>

{/* Truck Body */}
        <mesh position={[-0.5, 0, 0]} castShadow>
          <boxGeometry args={[4, 1.5, 2]} />
          <meshStandardMaterial color={color} metalness={0.4} roughness={0.3} />
        </mesh>

{/* Windshield */}
        <mesh position={[1.5, 1, 0]} rotation={[0, 0, Math.PI * 0.1]}>
          <planeGeometry args={[0.8, 0.5]} />
          <meshStandardMaterial color="#111827" metalness={0.9} roughness={0.1} />
        </mesh>

{/* Wheels */}
        <Wheel position={[-1.5, -0.75, 1]} />
        <Wheel position={[-1.5, -0.75, -1]} />
        <Wheel position={[1.5, -0.75, 1]} />
        <Wheel position={[1.5, -0.75, -1]} />
        <Wheel position={[0, -0.75, 1]} />
        <Wheel position={[0, -0.75, -1]} />

{/* Headlights */}
        <mesh position={[2.1, 0.75, 0.6]}>
          <cylinderGeometry args={[0.15, 0.15, 0.1, 16]} />
          <meshStandardMaterial color="#FFCC33" emissive="#FFCC33" emissiveIntensity={1} />
        </mesh>
        <mesh position={[2.1, 0.75, -0.6]}>
          <cylinderGeometry args={[0.15, 0.15, 0.1, 16]} />
          <meshStandardMaterial color="#FFCC33" emissive="#FFCC33" emissiveIntensity={1} />
        </mesh>

{/* AI Indicator */}
        <mesh position={[-2, 1, 0]}>
          <sphereGeometry args={[0.2, 16, 16]} />
          <meshStandardMaterial color="#8b5cf6" emissive="#8b5cf6" emissiveIntensity={0.8} />
        </mesh>

{/* Roof lights */}
        <mesh position={[1.5, 1.5, 0]}>
          <boxGeometry args={[0.6, 0.1, 1.2]} />
          <meshStandardMaterial color="#1f2937" />
        </mesh>

{/* Emergency lights */}
        <EmergencyLight position={[1.5, 1.55, 0.4]} color="#ff0000" />
        <EmergencyLight position={[1.5, 1.55, -0.4]} color="#0000ff" />

{/* Logo on the side */}
        <mesh position={[-0.5, 0.8, 1.01]} rotation={[0, 0, 0]}>
          <planeGeometry args={[1.5, 0.5]} />
          <meshStandardMaterial color="#ffffff" />
        </mesh>
      </group>
    </Float>
  )
}

function EmergencyLight({ position, color }) {
  const lightRef = useRef()

useFrame(({ clock }) => {
    if (lightRef.current) {
      // Blinking effect
      const intensity = Math.sin(clock.getElapsedTime() * 5) > 0 ? 1 : 0.2
      lightRef.current.material.emissiveIntensity = intensity
    }
  })

return (
    <mesh ref={lightRef} position={position}>
      <cylinderGeometry args={[0.1, 0.1, 0.05, 16]} />
      <meshStandardMaterial color={color} emissive={color} emissiveIntensity={1} />
    </mesh>
  )
}

function Wheel({ position }) {
  const wheelRef = useRef()

useFrame(({ clock }) => {
    if (wheelRef.current) {
      // Rotate the wheels
      wheelRef.current.rotation.x = clock.getElapsedTime() * 2
    }
  })

return (
    <mesh ref={wheelRef} position={position} rotation={[Math.PI / 2, 0, 0]}>
      <cylinderGeometry args={[0.4, 0.4, 0.2, 32]} />
      <meshStandardMaterial color="#1f2937" metalness={0.8} roughness={0.2} />
    </mesh>
  )
}

function MovingTruck({ startPosition, endPosition, speed = 0.5, color = "#4f46e5" }) {
  const truckRef = useRef()
  const [progress, setProgress] = useState(0)

useFrame((state) => {
    if (truckRef.current) {
      // Calculate new progress
      const newProgress = (progress + speed * 0.005) % 1
      setProgress(newProgress)

// Interpolate position
      const x = startPosition[0] + (endPosition[0] - startPosition[0]) * newProgress
      const z = startPosition[2] + (endPosition[2] - startPosition[2]) * newProgress

truckRef.current.position.x = x
      truckRef.current.position.z = z

// Calculate rotation to face direction of travel
      const angle = Math.atan2(endPosition[0] - startPosition[0], endPosition[2] - startPosition[2])
      truckRef.current.rotation.y = angle
    }
  })

return (
    <group ref={truckRef} position={startPosition} scale={0.8}>
      {/* Truck Cab */}
      <mesh position={[0, 0.75, 0]} castShadow>
        <boxGeometry args={[0.8, 0.8, 1.2]} />
        <meshStandardMaterial color={color} metalness={0.6} roughness={0.2} />
      </mesh>

{/* Truck Body */}
      <mesh position={[0, 0.3, -1]} castShadow>
        <boxGeometry args={[0.8, 1.2, 2]} />
        <meshStandardMaterial color={color} metalness={0.4} roughness={0.3} />
      </mesh>

{/* Wheels */}
      <mesh position={[0.4, 0, 0.4]} rotation={[Math.PI / 2, 0, 0]}>
        <cylinderGeometry args={[0.2, 0.2, 0.1, 16]} />
        <meshStandardMaterial color="#1f2937" />
      </mesh>
      <mesh position={[-0.4, 0, 0.4]} rotation={[Math.PI / 2, 0, 0]}>
        <cylinderGeometry args={[0.2, 0.2, 0.1, 16]} />
        <meshStandardMaterial color="#1f2937" />
      </mesh>
      <mesh position={[0.4, 0, -1.5]} rotation={[Math.PI / 2, 0, 0]}>
        <cylinderGeometry args={[0.2, 0.2, 0.1, 16]} />
        <meshStandardMaterial color="#1f2937" />
      </mesh>
      <mesh position={[-0.4, 0, -1.5]} rotation={[Math.PI / 2, 0, 0]}>
        <cylinderGeometry args={[0.2, 0.2, 0.1, 16]} />
        <meshStandardMaterial color="#1f2937" />
      </mesh>

{/* Headlights */}
      <mesh position={[0, 0.75, 0.6]}>
        <cylinderGeometry args={[0.1, 0.1, 0.05, 16]} />
        <meshStandardMaterial color="#FFCC33" emissive="#FFCC33" emissiveIntensity={0.8} />
      </mesh>
    </group>
  )
}

function AIMatchingVisualization() {
  const [matchingComplete, setMatchingComplete] = useState(false)

useEffect(() => {
    const timer = setTimeout(() => {
      setMatchingComplete(true)
    }, 3000)

return () => clearTimeout(timer)
  }, [])

return (
    <group>
      {/* Origin point */}
      <mesh position={[-3, 0, -3]}>
        <cylinderGeometry args={[0.3, 0.3, 0.1, 16]} />
        <meshStandardMaterial color="#3b82f6" />
      </mesh>
      <Text position={[-3, 0.5, -3]} fontSize={0.3} color="#ffffff">
        Origin
      </Text>

{/* Destination point */}
      <mesh position={[3, 0, 3]}>
        <cylinderGeometry args={[0.3, 0.3, 0.1, 16]} />
        <meshStandardMaterial color="#10b981" />
      </mesh>
      <Text position={[3, 0.5, 3]} fontSize={0.3} color="#ffffff">
        Destination
      </Text>

{/* AI Matching visualization */}
      {!matchingComplete ? (
        <>
          <mesh position={[0, 1, 0]}>
            <sphereGeometry args={[0.5, 16, 16]} />
            <meshStandardMaterial color="#8b5cf6" emissive="#8b5cf6" emissiveIntensity={0.8} />
          </mesh>
          <Text position={[0, 2, 0]} fontSize={0.4} color="#8b5cf6">
            AI Matching...
          </Text>

{/* Scanning lines */}
          {[-2, -1, 0, 1, 2].map((x, i) => (
            <mesh key={i} position={[x, 0.05, 0]} rotation={[Math.PI / 2, 0, 0]}>
              <planeGeometry args={[0.05, 6]} />
              <meshStandardMaterial color="#8b5cf6" transparent opacity={0.5} />
            </mesh>
          ))}
          {[-2, -1, 0, 1, 2].map((z, i) => (
            <mesh key={i} position={[0, 0.05, z]} rotation={[Math.PI / 2, 0, Math.PI / 2]}>
              <planeGeometry args={[0.05, 6]} />
              <meshStandardMaterial color="#8b5cf6" transparent opacity={0.5} />
            </mesh>
          ))}
        </>
      ) : (
        <>
          {/* Show matched trucks */}
          <MovingTruck startPosition={[-3, 0, -3]} endPosition={[3, 0, 3]} speed={0.3} color="#3b82f6" />
          <MovingTruck startPosition={[-4, 0, -2]} endPosition={[4, 0, 2]} speed={0.4} color="#8b5cf6" />
          <MovingTruck startPosition={[-2, 0, -4]} endPosition={[2, 0, 4]} speed={0.5} color="#10b981" />

<Text position={[0, 2, 0]} fontSize={0.4} color="#8b5cf6">
            Carriers Matched!
          </Text>
        </>
      )}
    </group>
  )
}

export default function TruckModel({ mode = "showcase" }) {
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    // Simulate loading time
    const timer = setTimeout(() => {
      setIsLoading(false)
    }, 1000)

return () => clearTimeout(timer)
  }, [])

return (
    <div className="w-full h-full relative">
      {isLoading ? (
        <div className="absolute inset-0 flex flex-col items-center justify-center">
          <Truck className="h-12 w-12 text-blue-500 animate-pulse mb-4" />
          <p className="text-slate-400">Loading 3D visualization...</p>
        </div>
      ) : (
        <Canvas shadows>
          <PerspectiveCamera makeDefault position={[0, 5, 10]} fov={40} />
          <ambientLight intensity={0.5} />
          <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} intensity={1} castShadow />
          <Suspense fallback={null}>
            {mode === "showcase" && <TruckModel3D position={[0, 0, 0]} rotation={[0, 0, 0]} />}
            {mode === "matching" && <AIMatchingVisualization />}
            <Environment preset="city" />
          </Suspense>
          <OrbitControls enableZoom={false} enablePan={false} />

{/* Grid floor */}
          <gridHelper args={[20, 20, "#4f46e5", "#1f2937"]} position={[0, -0.5, 0]} />
        </Canvas>
      )}

{/* Overlay information */}
      <div className="absolute bottom-4 left-4 right-4 bg-slate-900/80 backdrop-blur-sm p-4 rounded-lg border border-slate-700">
        <h3 className="text-white font-medium mb-1">
          {mode === "showcase" ? "AI-Powered Fleet Management" : "Real-time Carrier Matching"}
        </h3>
        <p className="text-slate-300 text-sm">
          {mode === "showcase"
            ? "Monitor your entire fleet with 3D visualization and AI-powered optimization"
            : "Our AI algorithm matches the perfect carriers for your shipment in real-time"}
        </p>
      </div>

{/* Interactive hotspots */}
      {!isLoading && mode === "showcase" && (
        <>
          <motion.div
            className="absolute top-1/4 right-1/4 w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center cursor-pointer"
            initial={{ scale: 1 }}
            animate={{ scale: [1, 1.2, 1] }}
            transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY }}
          >
            <span className="text-white text-xs font-bold">1</span>
            <div className="absolute -right-40 top-0 bg-slate-900 p-3 rounded-lg border border-slate-700 w-36 hidden group-hover:block">
              <p className="text-white text-xs">GPS Tracking System</p>
            </div>
          </motion.div>

<motion.div
            className="absolute top-1/2 left-1/4 w-6 h-6 rounded-full bg-purple-500 flex items-center justify-center cursor-pointer"
            initial={{ scale: 1 }}
            animate={{ scale: [1, 1.2, 1] }}
            transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY, delay: 0.5 }}
          >
            <span className="text-white text-xs font-bold">2</span>
            <div className="absolute -left-40 top-0 bg-slate-900 p-3 rounded-lg border border-slate-700 w-36 hidden group-hover:block">
              <p className="text-white text-xs">AI Optimization</p>
            </div>
          </motion.div>
        </>
      )}
    </div>
  )
}
[V0_FILE]plaintext:file="public/images/create-shipment.png" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true"
[V0_FILE]plaintext:file="public/images/carrier-matching.png" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true"
[V0_FILE]plaintext:file="public/images/shipment-tracking.png" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true"
[V0_FILE]plaintext:file="public/images/payment-confirmation.png" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true"
[V0_FILE]plaintext:file="public/images/register-vehicles.png" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true"
[V0_FILE]plaintext:file="public/images/browse-loads.png" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true"
[V0_FILE]plaintext:file="public/images/navigation.png" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true"
[V0_FILE]plaintext:file="public/images/secure-payment.png" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/how-it-works-section.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Image from "next/image"
import { motion } from "framer-motion"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { CheckCircle } from "lucide-react"

export default function HowItWorksSection() {
  const [activeTab, setActiveTab] = useState("shippers")

const shipperSteps = [
    {
      number: "1",
      title: "Create Your Shipment Request",
      description:
        "Enter origin, destination, cargo details, and special requirements through our intuitive interface. Set your timeframe and budget preferences.",
      image: "/images/create-shipment.png",
    },
    {
      number: "2",
      title: "Get Matched with Verified Carriers",
      description:
        "Our AI algorithm instantly finds and suggests the best carriers based on your requirements, proximity, and performance history.",
      image: "/images/carrier-matching.png",
    },
    {
      number: "3",
      title: "Track Your Shipment in Real-Time",
      description:
        "Monitor your cargo's journey from pickup to delivery with GPS precision. Receive automated updates at every milestone.",
      image: "/images/shipment-tracking.png",
    },
    {
      number: "4",
      title: "Confirm Delivery and Release Payment",
      description:
        "Verify successful delivery through our app and release payment from escrow to the carrier with one click.",
      image: "/images/payment-confirmation.png",
    },
  ]

const carrierSteps = [
    {
      number: "1",
      title: "Register Your Vehicles and Drivers",
      description:
        "Create detailed profiles of your fleet including vehicle types, capacities, and service areas. Upload all necessary documentation for verification.",
      image: "/images/register-vehicles.png",
    },
    {
      number: "2",
      title: "Browse and Accept Available Loads",
      description:
        "Receive notifications for matching shipments in your area or browse the load board to find ideal cargo that maximizes your revenue.",
      image: "/images/browse-loads.png",
    },
    {
      number: "3",
      title: "Navigate and Update Status",
      description:
        "Use our in-app navigation optimized for commercial vehicles. Update shipment status with a single tap at each milestone.",
      image: "/images/navigation.png",
    },
    {
      number: "4",
      title: "Receive Secure Payment",
      description:
        "Upon delivery confirmation, payment is automatically released from escrow to your account – no more 60-day waiting periods.",
      image: "/images/secure-payment.png",
    },
  ]

return (
    <section className="py-16 sm:py-24 bg-gray-50" id="how-it-works">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center max-w-3xl mx-auto mb-16">
          <h2 className="text-3xl sm:text-4xl font-bold text-gray-900">How MarocTransit Works</h2>
          <p className="mt-4 text-xl text-gray-500">A simple process designed for efficiency and transparency</p>
        </div>

<Tabs
          defaultValue="shippers"
          value={activeTab}
          onValueChange={setActiveTab}
          className="w-full max-w-4xl mx-auto"
        >
          <div className="flex justify-center mb-12">
            <TabsList className="grid w-full max-w-md grid-cols-2">
              <TabsTrigger value="shippers" className="text-base py-3">
                For Shippers
              </TabsTrigger>
              <TabsTrigger value="carriers" className="text-base py-3">
                For Carriers
              </TabsTrigger>
            </TabsList>
          </div>

<TabsContent value="carriers">
            <ProcessSteps steps={carrierSteps} />
          </TabsContent>
        </Tabs>
      </div>
    </section>
  )
}

function ProcessSteps({ steps }) {
  return (
    <div className="space-y-12 md:space-y-16">
      {steps.map((step, index) => (
        <motion.div
          key={index}
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-100px" }}
          transition={{ duration: 0.5, delay: index * 0.1 }}
          className={`flex flex-col ${index % 2 === 0 ? "md:flex-row" : "md:flex-row-reverse"} gap-8 items-center`}
        >
          <div className="w-full md:w-1/2">
            <div className="rounded-lg overflow-hidden shadow-lg border border-gray-200 bg-white">
              <Image
                src={step.image || "/placeholder.svg?height=300&width=500"}
                alt={step.title}
                width={500}
                height={300}
                className="w-full h-auto"
              />
            </div>
          </div>

<div className="w-full md:w-1/2">
            <div className="flex items-start gap-4">
              <div className="flex-shrink-0 w-12 h-12 rounded-full bg-blue-600 text-white flex items-center justify-center text-xl font-bold">
                {step.number}
              </div>
              <div>
                <h3 className="text-xl md:text-2xl font-bold text-gray-900 mb-4">{step.title}</h3>
                <p className="text-gray-600">{step.description}</p>
                <div className="mt-4 flex items-center text-blue-600">
                  <CheckCircle className="h-5 w-5 mr-2" />
                  <span className="font-medium">{index === steps.length - 1 ? "Complete" : "Next Step"}</span>
                </div>
              </div>
            </div>
          </div>
        </motion.div>
      ))}
    </div>
  )
}
[V0_FILE]plaintext:file="public/images/testimonial-1.png" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true"
[V0_FILE]plaintext:file="public/images/testimonial-2.png" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true"
[V0_FILE]plaintext:file="public/images/testimonial-3.png" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true"
[V0_FILE]plaintext:file="public/images/testimonial-4.png" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/testimonials-section.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { ChevronLeft, ChevronRight, Star } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

export default function TestimonialsSection() {
  const [current, setCurrent] = useState(0)
  const [direction, setDirection] = useState(0)

const testimonials = [
    {
      quote:
        "MarocTransit has transformed our logistics operations. We've cut delivery times by 30% and reduced costs significantly. The real-time tracking and analytics have been game-changers for our business.",
      author: "Sarah Johnson",
      title: "Operations Director",
      company: "Global Logistics Inc.",
      image: "/images/testimonial-1.png",
      rating: 5,
    },
    {
      quote:
        "The route optimization feature alone has saved us thousands in fuel costs each month. The AI-powered routing suggestions are incredibly accurate and have helped us improve our delivery efficiency by over 40%.",
      author: "Michael Chen",
      title: "Fleet Manager",
      company: "Express Delivery Co.",
      image: "/images/testimonial-2.png",
      rating: 5,
    },
    {
      quote:
        "As a small business owner, I was hesitant about investing in fleet management software, but MarocTransit has paid for itself many times over. The interface is intuitive, and the customer support team is always responsive.",
      author: "David Rodriguez",
      title: "Owner",
      company: "Rodriguez Shipping",
      image: "/images/testimonial-3.png",
      rating: 4,
    },
    {
      quote:
        "We've tried several logistics platforms, but none compare to MarocTransit. The comprehensive analytics and reporting features give us insights we never had before, helping us make data-driven decisions.",
      author: "Emily Watkins",
      title: "Logistics Coordinator",
      company: "Transcontinental Freight",
      image: "/images/testimonial-4.png",
      rating: 5,
    },
  ]

const next = () => {
    setDirection(1)
    setCurrent((current + 1) % testimonials.length)
  }

const prev = () => {
    setDirection(-1)
    setCurrent((current - 1 + testimonials.length) % testimonials.length)
  }

const variants = {
    enter: (direction) => ({
      x: direction > 0 ? 200 : -200,
      opacity: 0,
    }),
    center: {
      x: 0,
      opacity: 1,
    },
    exit: (direction) => ({
      x: direction < 0 ? 200 : -200,
      opacity: 0,
    }),
  }

return (
    <section className="py-16 sm:py-24 bg-gray-50" id="testimonials">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center max-w-3xl mx-auto mb-16">
          <h2 className="text-3xl sm:text-4xl font-bold text-gray-900">What Our Users Say</h2>
          <p className="mt-4 text-xl text-gray-500">Join thousands of satisfied shippers and carriers</p>
        </div>

<div className="hidden md:flex space-x-1">
                  {testimonials.map((_, index) => (
                    <button
                      key={index}
                      onClick={() => {
                        setDirection(index > current ? 1 : -1)
                        setCurrent(index)
                      }}
                      className={`w-3 h-3 rounded-full ${index === current ? "bg-blue-600" : "bg-gray-300"}`}
                      aria-label={`Go to testimonial ${index + 1}`}
                    />
                  ))}
                </div>

<div className="relative h-[320px] md:h-[240px] overflow-hidden">
                <AnimatePresence custom={direction} initial={false}>
                  <motion.div
                    key={current}
                    custom={direction}
                    variants={variants}
                    initial="enter"
                    animate="center"
                    exit="exit"
                    transition={{ duration: 0.5, ease: "easeInOut" }}
                    className="absolute inset-0"
                  >
                    <div className="h-full flex flex-col justify-between">
                      <div>
                        <div className="flex mb-4">
                          {[...Array(5)].map((_, i) => (
                            <Star
                              key={i}
                              className={`h-5 w-5 ${
                                i < testimonials[current].rating ? "text-yellow-400 fill-yellow-400" : "text-gray-300"
                              }`}
                            />
                          ))}
                        </div>

<blockquote className="text-xl text-gray-800 italic mb-8">
                          "{testimonials[current].quote}"
                        </blockquote>
                      </div>

<div className="flex items-center">
                        <Avatar className="h-12 w-12 mr-4 border-2 border-blue-100">
                          <AvatarImage src={testimonials[current].image} alt={testimonials[current].author} />
                          <AvatarFallback className="bg-blue-600 text-white">
                            {testimonials[current].author
                              .split(" ")
                              .map((n) => n[0])
                              .join("")}
                          </AvatarFallback>
                        </Avatar>
                        <div>
                          <div className="font-bold text-gray-900">{testimonials[current].author}</div>
                          <div className="text-sm text-gray-500">
                            {testimonials[current].title}, {testimonials[current].company}
                          </div>
                        </div>
                      </div>
                    </div>
                  </motion.div>
                </AnimatePresence>
              </div>
            </div>
          </div>

<div className="hidden md:block absolute -bottom-6 -left-6 w-32 h-32 bg-blue-100 rounded-full opacity-50" />
          <div className="hidden md:block absolute -top-6 -right-6 w-32 h-32 bg-green-100 rounded-full opacity-50" />
        </div>
      </div>
    </section>
  )
}
[V0_FILE]plaintext:file="public/images/mobile-app.png" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true"
[V0_FILE]plaintext:file="public/images/qr-code.png" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/mobile-app-promotion.tsx" isMerged="true"
"use client"

import Image from "next/image"
import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Apple, Play, Smartphone, Bell, MapPin, Clock } from "lucide-react"

export default function MobileAppPromotion() {
  const features = [
    {
      icon: <Smartphone className="h-5 w-5 text-blue-600" />,
      text: "Manage shipments on the go from anywhere",
    },
    {
      icon: <Bell className="h-5 w-5 text-blue-600" />,
      text: "Real-time notifications for status updates",
    },
    {
      icon: <MapPin className="h-5 w-5 text-blue-600" />,
      text: "Track shipments with live GPS updates",
    },
    {
      icon: <Clock className="h-5 w-5 text-blue-600" />,
      text: "Quick access to all delivery information",
    },
  ]

return (
    <section className="py-16 sm:py-24 bg-white overflow-hidden" id="mobile-app">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <div className="lg:grid lg:grid-cols-2 lg:gap-12 items-center">
          <motion.div
            initial={{ opacity: 0, x: -50 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true, margin: "-100px" }}
            transition={{ duration: 0.5 }}
            className="lg:max-w-md"
          >
            <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-6">Take MarocTransit With You Everywhere</h2>
            <p className="text-xl text-gray-500 mb-8">
              Manage your shipments on the go with our powerful mobile apps. Available for iOS and Android devices.
            </p>

<div className="space-y-4 mb-8">
              {features.map((feature, index) => (
                <div key={index} className="flex items-start">
                  <div className="flex-shrink-0 p-1 rounded-full bg-blue-50">{feature.icon}</div>
                  <p className="ml-4 text-gray-600">{feature.text}</p>
                </div>
              ))}
            </div>

<div className="flex flex-col sm:flex-row gap-4">
              <Button className="flex items-center justify-center gap-2 bg-gray-900 hover:bg-black">
                <Apple className="h-5 w-5" />
                <div className="flex flex-col items-start text-left">
                  <span className="text-xs">Download on the</span>
                  <span className="text-sm font-semibold">App Store</span>
                </div>
              </Button>

<Button className="flex items-center justify-center gap-2 bg-gray-900 hover:bg-black">
                <Play className="h-5 w-5" />
                <div className="flex flex-col items-start text-left">
                  <span className="text-xs">GET IT ON</span>
                  <span className="text-sm font-semibold">Google Play</span>
                </div>
              </Button>
            </div>

<div className="mt-6 flex items-center gap-4">
              <Image
                src="/images/qr-code.png"
                alt="QR Code"
                width={96}
                height={96}
                className="rounded-lg border border-gray-200"
              />
              <div className="text-sm text-gray-600">
                <p className="font-medium">Scan to download</p>
                <p>Point your camera at the QR code to download our mobile app</p>
              </div>
            </div>
          </motion.div>

<motion.div
            initial={{ opacity: 0, x: 50 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true, margin: "-100px" }}
            transition={{ duration: 0.5, delay: 0.2 }}
            className="mt-12 lg:mt-0 relative"
          >
            <div className="relative mx-auto max-w-[320px]">
              <div className="absolute inset-0 -z-10">
                <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[500px] w-[500px] rounded-full bg-gradient-to-r from-blue-100 to-green-100 opacity-50 blur-xl"></div>
              </div>

<div className="absolute top-0 -right-4 rotate-6 z-0">
                  <Image
                    src="/images/mobile-app.png"
                    alt="MarocTransit Mobile App"
                    width={300}
                    height={600}
                    className="opacity-75 rounded-3xl shadow-xl"
                  />
                </div>
              </div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]xml:file="public/images/grid-pattern.svg" isMerged="true"
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
      <path d="M 20 0 L 0 0 0 20" fill="none" stroke="currentColor" stroke-width="0.5" />
    </pattern>
  </defs>
  <rect width="100" height="100" fill="url(#grid)" />
</svg>
[V0_FILE]typescriptreact:file="app/dashboard/messages/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect, useRef } from "react"
import { useAuth } from "@/lib/auth-context"

// Mock conversation data
const MOCK_CONVERSATIONS = [
  {
    id: "1",
    with: {
      id: "user1",
      name: "John Doe",
      avatar: null,
    },
    lastMessage: {
      text: "I can deliver your package tomorrow morning.",
      timestamp: new Date(Date.now() - 1000 * 60 * 30).toISOString(),
      isRead: true,
    },
    unread: 0,
  },
  {
    id: "2",
    with: {
      id: "user2",
      name: "ABC Logistics",
      avatar: null,
    },
    lastMessage: {
      text: "What time will you be available for pickup?",
      timestamp: new Date(Date.now() - 1000 * 60 * 60 * 2).toISOString(),
      isRead: false,
    },
    unread: 2,
  },
  {
    id: "3",
    with: {
      id: "user3",
      name: "Sarah Smith",
      avatar: null,
    },
    lastMessage: {
      text: "The package has been delivered successfully.",
      timestamp: new Date(Date.now() - 1000 * 60 * 60 * 24).toISOString(),
      isRead: true,
    },
    unread: 0,
  },
]

// Mock messages for a conversation
const MOCK_MESSAGES = [
  {
    id: "m1",
    senderId: "user1",
    text: "Hello, I saw your shipment request.",
    timestamp: new Date(Date.now() - 1000 * 60 * 60).toISOString(),
  },
  {
    id: "m2",
    senderId: "currentUser",
    text: "Hi there! Yes, I need to ship some furniture.",
    timestamp: new Date(Date.now() - 1000 * 60 * 55).toISOString(),
  },
  {
    id: "m3",
    senderId: "user1",
    text: "I can help with that. What's the pickup location?",
    timestamp: new Date(Date.now() - 1000 * 60 * 50).toISOString(),
  },
  {
    id: "m4",
    senderId: "currentUser",
    text: "It's at 123 Main St, New York.",
    timestamp: new Date(Date.now() - 1000 * 60 * 45).toISOString(),
  },
  {
    id: "m5",
    senderId: "user1",
    text: "Great, I can be there tomorrow at 10 AM. Does that work for you?",
    timestamp: new Date(Date.now() - 1000 * 60 * 40).toISOString(),
  },
  {
    id: "m6",
    senderId: "currentUser",
    text: "That works perfectly. How much will it cost?",
    timestamp: new Date(Date.now() - 1000 * 60 * 35).toISOString(),
  },
  {
    id: "m7",
    senderId: "user1",
    text: "Based on the size and distance, it will be $350.",
    timestamp: new Date(Date.now() - 1000 * 60 * 30).toISOString(),
  },
]

function formatTime(timestamp: string) {
  const date = new Date(timestamp)
  return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
}

function formatDate(timestamp: string) {
  const date = new Date(timestamp)
  const today = new Date()
  const yesterday = new Date(today)
  yesterday.setDate(yesterday.getDate() - 1)

if (date.toDateString() === today.toDateString()) {
    return "Today"
  } else if (date.toDateString() === yesterday.toDateString()) {
    return "Yesterday"
  } else {
    return date.toLocaleDateString()
  }
}

export default function MessagesPage() {
  const { user } = useAuth()
  const [conversations, setConversations] = useState(MOCK_CONVERSATIONS)
  const [activeConversation, setActiveConversation] = useState<string | null>(null)
  const [messages, setMessages] = useState(MOCK_MESSAGES)
  const [newMessage, setNewMessage] = useState("")
  const messagesEndRef = useRef<HTMLDivElement>(null)

useEffect(() => {
    if (messagesEndRef.current) {
      messagesEndRef.current.scrollIntoView({ behavior: "smooth" })
    }
  }, [messages])

if (!user) {
    return null
  }

const handleSendMessage = (e: React.FormEvent) => {
    e.preventDefault()
    if (!newMessage.trim()) return

const newMsg = {
      id: `m${messages.length + 1}`,
      senderId: "currentUser",
      text: newMessage,
      timestamp: new Date().toISOString(),
    }

setMessages([...messages, newMsg])
    setNewMessage("")
  }

const activeConvo = conversations.find((c) => c.id === activeConversation)

return (
    <div className="flex h-[calc(100vh-4rem)] bg-gray-900">
      {/* Conversations sidebar */}
      <div className="w-80 border-r border-gray-800 flex flex-col">
        <div className="p-4 border-b border-gray-800">
          <h2 className="text-xl font-bold text-white">Messages</h2>
        </div>
        <div className="flex-1 overflow-auto">
          {conversations.map((conversation) => (
            <div
              key={conversation.id}
              className={`p-4 border-b border-gray-800 cursor-pointer hover:bg-gray-800 ${
                activeConversation === conversation.id ? "bg-gray-800" : ""
              }`}
              onClick={() => setActiveConversation(conversation.id)}
            >
              <div className="flex justify-between items-start">
                <div className="flex items-center">
                  <div className="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center text-white">
                    {conversation.with.name.charAt(0)}
                  </div>
                  <div className="ml-3">
                    <p className="font-medium text-white">{conversation.with.name}</p>
                    <p className="text-sm text-gray-400 truncate w-36">{conversation.lastMessage.text}</p>
                  </div>
                </div>
                <div className="flex flex-col items-end">
                  <span className="text-xs text-gray-500">{formatTime(conversation.lastMessage.timestamp)}</span>
                  {conversation.unread > 0 && (
                    <span className="mt-1 bg-blue-600 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
                      {conversation.unread}
                    </span>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

{/* Chat area */}
      {activeConversation ? (
        <div className="flex-1 flex flex-col">
          <div className="p-4 border-b border-gray-800 flex items-center">
            <div className="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center text-white">
              {activeConvo?.with.name.charAt(0)}
            </div>
            <h3 className="ml-3 font-medium text-white">{activeConvo?.with.name}</h3>
          </div>
          <div className="flex-1 overflow-auto p-4 space-y-4">
            {messages.map((message) => {
              const isCurrentUser = message.senderId === "currentUser"
              return (
                <div key={message.id} className={`flex ${isCurrentUser ? "justify-end" : "justify-start"}`}>
                  <div
                    className={`max-w-[70%] rounded-lg p-3 ${
                      isCurrentUser ? "bg-blue-600 text-white" : "bg-gray-800 text-gray-200"
                    }`}
                  >
                    <p>{message.text}</p>
                    <p className="text-xs mt-1 opacity-70">{formatTime(message.timestamp)}</p>
                  </div>
                </div>
              )
            })}
            <div ref={messagesEndRef} />
          </div>
          <form onSubmit={handleSendMessage} className="p-4 border-t border-gray-800 flex">
            <input
              type="text"
              value={newMessage}
              onChange={(e) => setNewMessage(e.target.value)}
              placeholder="Type a message..."
              className="flex-1 bg-gray-800 border border-gray-700 rounded-l-md px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
            <button type="submit" className="bg-blue-600 hover:bg-blue-700 text-white px-4 rounded-r-md">
              Send
            </button>
          </form>
        </div>
      ) : (
        <div className="flex-1 flex items-center justify-center">
          <div className="text-center">
            <p className="text-gray-400">Select a conversation to start messaging</p>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/analytics/page.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useAuth } from "@/lib/auth-context"
import {
  BarChart,
  Bar,
  LineChart,
  Line,
  AreaChart,
  Area,
  XAxis,
  YAxis,
  CartesianGrid,
  Legend,
  ResponsiveContainer,
} from "recharts"
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
import { ArrowDown, ArrowUp, TrendingUp, DollarSign, Clock, Truck, Package, Users } from "lucide-react"

// Sample data for charts
const deliveryData = [
  { month: "Jan", onTime: 85, delayed: 15 },
  { month: "Feb", onTime: 88, delayed: 12 },
  { month: "Mar", onTime: 90, delayed: 10 },
  { month: "Apr", onTime: 92, delayed: 8 },
  { month: "May", onTime: 89, delayed: 11 },
  { month: "Jun", onTime: 94, delayed: 6 },
]

const costData = [
  { month: "Jan", actual: 12500, projected: 13000 },
  { month: "Feb", actual: 11800, projected: 12500 },
  { month: "Mar", actual: 13200, projected: 12800 },
  { month: "Apr", actual: 12900, projected: 13100 },
  { month: "May", actual: 14100, projected: 13500 },
  { month: "Jun", actual: 13500, projected: 14000 },
]

const volumeData = [
  { month: "Jan", shipments: 120 },
  { month: "Feb", shipments: 132 },
  { month: "Mar", shipments: 145 },
  { month: "Apr", shipments: 155 },
  { month: "May", shipments: 165 },
  { month: "Jun", shipments: 180 },
]

const carrierPerformanceData = [
  { name: "Express Logistics", rating: 4.8, onTime: 96, cost: 92 },
  { name: "FastTrack Shipping", rating: 4.6, onTime: 94, cost: 88 },
  { name: "Metro Carriers", rating: 4.3, onTime: 91, cost: 95 },
  { name: "City Haulers", rating: 4.7, onTime: 95, cost: 85 },
  { name: "Regional Transport", rating: 4.5, onTime: 93, cost: 90 },
]

const fleetUtilizationData = [
  { month: "Jan", utilization: 72 },
  { month: "Feb", utilization: 75 },
  { month: "Mar", utilization: 80 },
  { month: "Apr", utilization: 82 },
  { month: "May", utilization: 85 },
  { month: "Jun", utilization: 88 },
]

export default function AnalyticsPage() {
  const { user } = useAuth()
  const [timeRange, setTimeRange] = useState("6m")

// Determine which analytics to show based on user type
  const renderUserSpecificAnalytics = () => {
    if (user?.userType === "individual") {
      return (
        <>
          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Total Shipments</CardTitle>
                <Package className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">142</div>
                <p className="text-xs text-muted-foreground">
                  <span className="text-green-500 flex items-center">
                    <ArrowUp className="mr-1 h-4 w-4" />
                    12.5%
                  </span>{" "}
                  from last month
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">On-Time Delivery</CardTitle>
                <Clock className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">94.2%</div>
                <p className="text-xs text-muted-foreground">
                  <span className="text-green-500 flex items-center">
                    <ArrowUp className="mr-1 h-4 w-4" />
                    2.1%
                  </span>{" "}
                  from last month
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Average Cost</CardTitle>
                <DollarSign className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">$125.50</div>
                <p className="text-xs text-muted-foreground">
                  <span className="text-red-500 flex items-center">
                    <ArrowDown className="mr-1 h-4 w-4" />
                    3.2%
                  </span>{" "}
                  from last month
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">AI Matches</CardTitle>
                <TrendingUp className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">85.7%</div>
                <p className="text-xs text-muted-foreground">
                  <span className="text-green-500 flex items-center">
                    <ArrowUp className="mr-1 h-4 w-4" />
                    5.4%
                  </span>{" "}
                  from last month
                </p>
              </CardContent>
            </Card>
          </div>

<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
            <Card className="col-span-4">
              <CardHeader>
                <CardTitle>Delivery Performance</CardTitle>
              </CardHeader>
              <CardContent className="pl-2">
                <ChartContainer
                  config={{
                    onTime: {
                      label: "On Time",
                      color: "hsl(var(--chart-1))",
                    },
                    delayed: {
                      label: "Delayed",
                      color: "hsl(var(--chart-2))",
                    },
                  }}
                  className="h-[300px]"
                >
                  <ResponsiveContainer width="100%" height="100%">
                    <BarChart data={deliveryData}>
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="month" />
                      <YAxis />
                      <ChartTooltip content={<ChartTooltipContent />} />
                      <Legend />
                      <Bar dataKey="onTime" fill="var(--color-onTime)" stackId="a" />
                      <Bar dataKey="delayed" fill="var(--color-delayed)" stackId="a" />
                    </BarChart>
                  </ResponsiveContainer>
                </ChartContainer>
              </CardContent>
            </Card>
            <Card className="col-span-3">
              <CardHeader>
                <CardTitle>Shipping Costs</CardTitle>
              </CardHeader>
              <CardContent className="pl-2">
                <ChartContainer
                  config={{
                    actual: {
                      label: "Actual",
                      color: "hsl(var(--chart-1))",
                    },
                    projected: {
                      label: "Projected",
                      color: "hsl(var(--chart-2))",
                    },
                  }}
                  className="h-[300px]"
                >
                  <ResponsiveContainer width="100%" height="100%">
                    <LineChart data={costData}>
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="month" />
                      <YAxis />
                      <ChartTooltip content={<ChartTooltipContent />} />
                      <Legend />
                      <Line type="monotone" dataKey="actual" stroke="var(--color-actual)" />
                      <Line type="monotone" dataKey="projected" stroke="var(--color-projected)" strokeDasharray="5 5" />
                    </LineChart>
                  </ResponsiveContainer>
                </ChartContainer>
              </CardContent>
            </Card>
          </div>

<Card>
            <CardHeader>
              <CardTitle>Top Carriers by Performance</CardTitle>
              <CardDescription>Your most reliable shipping partners</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-8">
                {carrierPerformanceData.map((carrier) => (
                  <div className="flex items-center" key={carrier.name}>
                    <div className="w-9 h-9 rounded-full bg-primary/10 flex items-center justify-center mr-4">
                      <Truck className="h-5 w-5 text-primary" />
                    </div>
                    <div className="flex-1 space-y-1">
                      <p className="text-sm font-medium leading-none">{carrier.name}</p>
                      <div className="flex items-center text-sm text-muted-foreground">
                        <span className="mr-2">Rating: {carrier.rating}</span>
                        <span className="mr-2">•</span>
                        <span className="mr-2">On-time: {carrier.onTime}%</span>
                        <span className="mr-2">•</span>
                        <span>Cost efficiency: {carrier.cost}%</span>
                      </div>
                    </div>
                    <div className="font-medium">{90 + Math.floor(carrier.rating * 2)}% match</div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </>
      )
    } else if (user?.userType === "carrier") {
      return (
        <>
          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Deliveries Completed</CardTitle>
                <Package className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">187</div>
                <p className="text-xs text-muted-foreground">
                  <span className="text-green-500 flex items-center">
                    <ArrowUp className="mr-1 h-4 w-4" />
                    15.3%
                  </span>{" "}
                  from last month
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">On-Time Rate</CardTitle>
                <Clock className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">96.8%</div>
                <p className="text-xs text-muted-foreground">
                  <span className="text-green-500 flex items-center">
                    <ArrowUp className="mr-1 h-4 w-4" />
                    1.2%
                  </span>{" "}
                  from last month
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Total Earnings</CardTitle>
                <DollarSign className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">$24,350</div>
                <p className="text-xs text-muted-foreground">
                  <span className="text-green-500 flex items-center">
                    <ArrowUp className="mr-1 h-4 w-4" />
                    18.2%
                  </span>{" "}
                  from last month
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">AI Match Rate</CardTitle>
                <TrendingUp className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">78.3%</div>
                <p className="text-xs text-muted-foreground">
                  <span className="text-green-500 flex items-center">
                    <ArrowUp className="mr-1 h-4 w-4" />
                    4.7%
                  </span>{" "}
                  from last month
                </p>
              </CardContent>
            </Card>
          </div>

<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
            <Card className="col-span-4">
              <CardHeader>
                <CardTitle>Delivery Volume</CardTitle>
              </CardHeader>
              <CardContent className="pl-2">
                <ChartContainer
                  config={{
                    shipments: {
                      label: "Shipments",
                      color: "hsl(var(--chart-1))",
                    },
                  }}
                  className="h-[300px]"
                >
                  <ResponsiveContainer width="100%" height="100%">
                    <AreaChart data={volumeData}>
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="month" />
                      <YAxis />
                      <ChartTooltip content={<ChartTooltipContent />} />
                      <Area
                        type="monotone"
                        dataKey="shipments"
                        stroke="var(--color-shipments)"
                        fill="var(--color-shipments)"
                        fillOpacity={0.2}
                      />
                    </AreaChart>
                  </ResponsiveContainer>
                </ChartContainer>
              </CardContent>
            </Card>
            <Card className="col-span-3">
              <CardHeader>
                <CardTitle>Earnings Trend</CardTitle>
              </CardHeader>
              <CardContent className="pl-2">
                <ChartContainer
                  config={{
                    actual: {
                      label: "Actual",
                      color: "hsl(var(--chart-1))",
                    },
                    projected: {
                      label: "Projected",
                      color: "hsl(var(--chart-2))",
                    },
                  }}
                  className="h-[300px]"
                >
                  <ResponsiveContainer width="100%" height="100%">
                    <LineChart data={costData}>
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="month" />
                      <YAxis />
                      <ChartTooltip content={<ChartTooltipContent />} />
                      <Legend />
                      <Line type="monotone" dataKey="actual" stroke="var(--color-actual)" />
                      <Line type="monotone" dataKey="projected" stroke="var(--color-projected)" strokeDasharray="5 5" />
                    </LineChart>
                  </ResponsiveContainer>
                </ChartContainer>
              </CardContent>
            </Card>
          </div>

<Card>
            <CardHeader>
              <CardTitle>Top Shippers by Volume</CardTitle>
              <CardDescription>Your most frequent customers</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-8">
                {[
                  { name: "Tech Solutions Inc.", volume: 42, revenue: 5250, rating: 4.9 },
                  { name: "Global Imports", volume: 38, revenue: 4780, rating: 4.7 },
                  { name: "City Distributors", volume: 35, revenue: 4320, rating: 4.8 },
                  { name: "Metro Retail", volume: 31, revenue: 3950, rating: 4.6 },
                  { name: "Coastal Exports", volume: 28, revenue: 3640, rating: 4.5 },
                ].map((shipper) => (
                  <div className="flex items-center" key={shipper.name}>
                    <div className="w-9 h-9 rounded-full bg-primary/10 flex items-center justify-center mr-4">
                      <Package className="h-5 w-5 text-primary" />
                    </div>
                    <div className="flex-1 space-y-1">
                      <p className="text-sm font-medium leading-none">{shipper.name}</p>
                      <div className="flex items-center text-sm text-muted-foreground">
                        <span className="mr-2">Volume: {shipper.volume} shipments</span>
                        <span className="mr-2">•</span>
                        <span className="mr-2">Revenue: ${shipper.revenue}</span>
                        <span className="mr-2">•</span>
                        <span>Rating: {shipper.rating}</span>
                      </div>
                    </div>
                    <div className="font-medium">${Math.floor(shipper.revenue / shipper.volume)} avg</div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </>
      )
    } else if (user?.userType === "company") {
      return (
        <>
          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Fleet Size</CardTitle>
                <Truck className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">48</div>
                <p className="text-xs text-muted-foreground">
                  <span className="text-green-500 flex items-center">
                    <ArrowUp className="mr-1 h-4 w-4" />4 vehicles
                  </span>{" "}
                  from last quarter
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Active Drivers</CardTitle>
                <Users className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">42</div>
                <p className="text-xs text-muted-foreground">
                  <span className="text-green-500 flex items-center">
                    <ArrowUp className="mr-1 h-4 w-4" />6 drivers
                  </span>{" "}
                  from last quarter
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Fleet Utilization</CardTitle>
                <TrendingUp className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">88.2%</div>
                <p className="text-xs text-muted-foreground">
                  <span className="text-green-500 flex items-center">
                    <ArrowUp className="mr-1 h-4 w-4" />
                    3.5%
                  </span>{" "}
                  from last month
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Operating Costs</CardTitle>
                <DollarSign className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">$156,420</div>
                <p className="text-xs text-muted-foreground">
                  <span className="text-red-500 flex items-center">
                    <ArrowUp className="mr-1 h-4 w-4" />
                    5.2%
                  </span>{" "}
                  from last month
                </p>
              </CardContent>
            </Card>
          </div>

<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
            <Card className="col-span-4">
              <CardHeader>
                <CardTitle>Fleet Utilization</CardTitle>
              </CardHeader>
              <CardContent className="pl-2">
                <ChartContainer
                  config={{
                    utilization: {
                      label: "Utilization %",
                      color: "hsl(var(--chart-1))",
                    },
                  }}
                  className="h-[300px]"
                >
                  <ResponsiveContainer width="100%" height="100%">
                    <LineChart data={fleetUtilizationData}>
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="month" />
                      <YAxis />
                      <ChartTooltip content={<ChartTooltipContent />} />
                      <Line type="monotone" dataKey="utilization" stroke="var(--color-utilization)" />
                    </LineChart>
                  </ResponsiveContainer>
                </ChartContainer>
              </CardContent>
            </Card>
            <Card className="col-span-3">
              <CardHeader>
                <CardTitle>Delivery Performance</CardTitle>
              </CardHeader>
              <CardContent className="pl-2">
                <ChartContainer
                  config={{
                    onTime: {
                      label: "On Time",
                      color: "hsl(var(--chart-1))",
                    },
                    delayed: {
                      label: "Delayed",
                      color: "hsl(var(--chart-2))",
                    },
                  }}
                  className="h-[300px]"
                >
                  <ResponsiveContainer width="100%" height="100%">
                    <BarChart data={deliveryData}>
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="month" />
                      <YAxis />
                      <ChartTooltip content={<ChartTooltipContent />} />
                      <Legend />
                      <Bar dataKey="onTime" fill="var(--color-onTime)" stackId="a" />
                      <Bar dataKey="delayed" fill="var(--color-delayed)" stackId="a" />
                    </BarChart>
                  </ResponsiveContainer>
                </ChartContainer>
              </CardContent>
            </Card>
          </div>

<div className="grid gap-4 md:grid-cols-2">
            <Card>
              <CardHeader>
                <CardTitle>Vehicle Maintenance Status</CardTitle>
                <CardDescription>Upcoming and overdue maintenance</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {[
                    {
                      id: "TRK-1042",
                      type: "Box Truck",
                      status: "Overdue",
                      service: "Oil Change",
                      dueDate: "3 days ago",
                    },
                    {
                      id: "VAN-2389",
                      type: "Cargo Van",
                      status: "Upcoming",
                      service: "Tire Rotation",
                      dueDate: "Tomorrow",
                    },
                    {
                      id: "TRK-5621",
                      type: "Semi Truck",
                      status: "Upcoming",
                      service: "Full Inspection",
                      dueDate: "3 days",
                    },
                    {
                      id: "VAN-1278",
                      type: "Cargo Van",
                      status: "Overdue",
                      service: "Brake Service",
                      dueDate: "1 day ago",
                    },
                    {
                      id: "TRK-3490",
                      type: "Box Truck",
                      status: "Upcoming",
                      service: "Transmission Check",
                      dueDate: "5 days",
                    },
                  ].map((vehicle) => (
                    <div className="flex items-center justify-between" key={vehicle.id}>
                      <div className="space-y-1">
                        <p className="text-sm font-medium leading-none">
                          {vehicle.id} - {vehicle.type}
                        </p>
                        <p className="text-sm text-muted-foreground">{vehicle.service}</p>
                      </div>
                      <div
                        className={`px-2 py-1 rounded text-xs font-medium ${
                          vehicle.status === "Overdue" ? "bg-red-100 text-red-800" : "bg-amber-100 text-amber-800"
                        }`}
                      >
                        {vehicle.status}: {vehicle.dueDate}
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle>Driver Performance</CardTitle>
                <CardDescription>Top performing drivers this month</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {[
                    { name: "Michael Chen", deliveries: 42, onTime: 98, fuelEfficiency: 95 },
                    { name: "Sarah Johnson", deliveries: 38, onTime: 97, fuelEfficiency: 92 },
                    { name: "David Rodriguez", deliveries: 36, onTime: 96, fuelEfficiency: 94 },
                    { name: "Lisa Williams", deliveries: 35, onTime: 95, fuelEfficiency: 91 },
                    { name: "Robert Kim", deliveries: 33, onTime: 94, fuelEfficiency: 93 },
                  ].map((driver, index) => (
                    <div className="flex items-center" key={driver.name}>
                      <div className="w-9 h-9 rounded-full bg-primary/10 flex items-center justify-center mr-4">
                        <span className="font-medium text-primary">{index + 1}</span>
                      </div>
                      <div className="flex-1 space-y-1">
                        <p className="text-sm font-medium leading-none">{driver.name}</p>
                        <div className="flex items-center text-sm text-muted-foreground">
                          <span className="mr-2">Deliveries: {driver.deliveries}</span>
                          <span className="mr-2">•</span>
                          <span className="mr-2">On-time: {driver.onTime}%</span>
                          <span className="mr-2">•</span>
                          <span>Fuel efficiency: {driver.fuelEfficiency}%</span>
                        </div>
                      </div>
                      <div className="font-medium">{90 + index}%</div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>
        </>
      )
    } else {
      return (
        <div className="flex items-center justify-center h-[60vh]">
          <div className="text-center">
            <h2 className="text-2xl font-bold mb-2">Analytics Dashboard</h2>
            <p className="text-muted-foreground">Please select a user type to view analytics</p>
          </div>
        </div>
      )
    }
  }

return (
    <div className="space-y-6">
      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
          <h2 className="text-3xl font-bold tracking-tight">Analytics Dashboard</h2>
          <p className="text-muted-foreground">View performance metrics and insights for your logistics operations</p>
        </div>
        <div className="flex items-center gap-2">
          <Select value={timeRange} onValueChange={setTimeRange}>
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Select time range" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="7d">Last 7 days</SelectItem>
              <SelectItem value="30d">Last 30 days</SelectItem>
              <SelectItem value="3m">Last 3 months</SelectItem>
              <SelectItem value="6m">Last 6 months</SelectItem>
              <SelectItem value="1y">Last year</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>

<Tabs defaultValue="overview" className="space-y-4">
        <TabsList>
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="performance">Performance</TabsTrigger>
          <TabsTrigger value="costs">Costs</TabsTrigger>
          <TabsTrigger value="ai-insights">AI Insights</TabsTrigger>
        </TabsList>
        <TabsContent value="overview" className="space-y-4">
          {renderUserSpecificAnalytics()}
        </TabsContent>
        <TabsContent value="performance" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Performance Metrics</CardTitle>
              <CardDescription>Detailed performance analysis for your operations</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="h-[400px]">
                <ChartContainer
                  config={{
                    onTime: {
                      label: "On Time Delivery",
                      color: "hsl(var(--chart-1))",
                    },
                    utilization: {
                      label: "Resource Utilization",
                      color: "hsl(var(--chart-2))",
                    },
                    efficiency: {
                      label: "Operational Efficiency",
                      color: "hsl(var(--chart-3))",
                    },
                  }}
                  className="h-full"
                >
                  <ResponsiveContainer width="100%" height="100%">
                    <LineChart
                      data={[
                        { month: "Jan", onTime: 85, utilization: 72, efficiency: 78 },
                        { month: "Feb", onTime: 88, utilization: 75, efficiency: 80 },
                        { month: "Mar", onTime: 90, utilization: 80, efficiency: 83 },
                        { month: "Apr", onTime: 92, utilization: 82, efficiency: 85 },
                        { month: "May", onTime: 89, utilization: 85, efficiency: 82 },
                        { month: "Jun", onTime: 94, utilization: 88, efficiency: 87 },
                      ]}
                    >
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="month" />
                      <YAxis />
                      <ChartTooltip content={<ChartTooltipContent />} />
                      <Legend />
                      <Line type="monotone" dataKey="onTime" stroke="var(--color-onTime)" />
                      <Line type="monotone" dataKey="utilization" stroke="var(--color-utilization)" />
                      <Line type="monotone" dataKey="efficiency" stroke="var(--color-efficiency)" />
                    </LineChart>
                  </ResponsiveContainer>
                </ChartContainer>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
        <TabsContent value="costs" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Cost Analysis</CardTitle>
              <CardDescription>Breakdown of operational costs</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="h-[400px]">
                <ChartContainer
                  config={{
                    fuel: {
                      label: "Fuel",
                      color: "hsl(var(--chart-1))",
                    },
                    maintenance: {
                      label: "Maintenance",
                      color: "hsl(var(--chart-2))",
                    },
                    labor: {
                      label: "Labor",
                      color: "hsl(var(--chart-3))",
                    },
                    other: {
                      label: "Other",
                      color: "hsl(var(--chart-4))",
                    },
                  }}
                  className="h-full"
                >
                  <ResponsiveContainer width="100%" height="100%">
                    <BarChart
                      data={[
                        { month: "Jan", fuel: 4500, maintenance: 2800, labor: 8200, other: 1500 },
                        { month: "Feb", fuel: 4200, maintenance: 3100, labor: 8000, other: 1600 },
                        { month: "Mar", fuel: 4800, maintenance: 2500, labor: 8300, other: 1400 },
                        { month: "Apr", fuel: 5100, maintenance: 2700, labor: 8500, other: 1700 },
                        { month: "May", fuel: 5400, maintenance: 3200, labor: 8700, other: 1800 },
                        { month: "Jun", fuel: 5200, maintenance: 2900, labor: 8600, other: 1600 },
                      ]}
                    >
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="month" />
                      <YAxis />
                      <ChartTooltip content={<ChartTooltipContent />} />
                      <Legend />
                      <Bar dataKey="fuel" fill="var(--color-fuel)" />
                      <Bar dataKey="maintenance" fill="var(--color-maintenance)" />
                      <Bar dataKey="labor" fill="var(--color-labor)" />
                      <Bar dataKey="other" fill="var(--color-other)" />
                    </BarChart>
                  </ResponsiveContainer>
                </ChartContainer>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
        <TabsContent value="ai-insights" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>AI-Powered Insights</CardTitle>
              <CardDescription>Intelligent recommendations for your logistics operations</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
                <div className="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg border border-blue-100 dark:border-blue-800/30">
                  <div className="flex items-center mb-2">
                    <TrendingUp className="h-5 w-5 text-blue-600 dark:text-blue-400 mr-2" />
                    <h3 className="text-lg font-medium text-blue-800 dark:text-blue-300">Route Optimization</h3>
                  </div>
                  <p className="text-blue-700 dark:text-blue-200 mb-3">
                    AI analysis suggests optimizing routes for vehicles #TRK-1042 and #TRK-3490 could reduce fuel
                    consumption by approximately 12% and delivery times by 8%.
                  </p>
                  <div className="flex justify-end">
                    <Button
                      variant="outline"
                      className="text-blue-600 border-blue-200 hover:bg-blue-50 dark:text-blue-300 dark:border-blue-800 dark:hover:bg-blue-900/30"
                    >
                      View Details
                    </Button>
                  </div>
                </div>

<div className="bg-amber-50 dark:bg-amber-900/20 p-4 rounded-lg border border-amber-100 dark:border-amber-800/30">
                  <div className="flex items-center mb-2">
                    <Truck className="h-5 w-5 text-amber-600 dark:text-amber-400 mr-2" />
                    <h3 className="text-lg font-medium text-amber-800 dark:text-amber-300">Maintenance Prediction</h3>
                  </div>
                  <p className="text-amber-700 dark:text-amber-200 mb-3">
                    Predictive maintenance models indicate vehicles #VAN-2389 and #TRK-5621 may require transmission
                    service within the next 2 weeks, scheduling now could prevent costly breakdowns.
                  </p>
                  <div className="flex justify-end">
                    <Button
                      variant="outline"
                      className="text-amber-600 border-amber-200 hover:bg-amber-50 dark:text-amber-300 dark:border-amber-800 dark:hover:bg-amber-900/30"
                    >
                      Schedule Service
                    </Button>
                  </div>
                </div>

<div className="bg-green-50 dark:bg-green-900/20 p-4 rounded-lg border border-green-100 dark:border-green-800/30">
                  <div className="flex items-center mb-2">
                    <Users className="h-5 w-5 text-green-600 dark:text-green-400 mr-2" />
                    <h3 className="text-lg font-medium text-green-800 dark:text-green-300">Resource Allocation</h3>
                  </div>
                  <p className="text-green-700 dark:text-green-200 mb-3">
                    Based on historical data and current trends, reallocating 3 vehicles from the western region to the
                    northern region could increase overall fleet utilization by 7.5%.
                  </p>
                  <div className="flex justify-end">
                    <Button
                      variant="outline"
                      className="text-green-600 border-green-200 hover:bg-green-50 dark:text-green-300 dark:border-green-800 dark:hover:bg-green-900/30"
                    >
                      View Analysis
                    </Button>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/analytics/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"

export default function AnalyticsLoading() {
  return (
    <div className="space-y-6">
      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
          <Skeleton className="h-8 w-[250px] mb-2" />
          <Skeleton className="h-4 w-[350px]" />
        </div>
        <Skeleton className="h-10 w-[180px]" />
      </div>

<div className="space-y-2">
        <Skeleton className="h-10 w-[300px]" />
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          {Array(4)
            .fill(null)
            .map((_, i) => (
              <div key={i} className="p-6 rounded-lg border bg-card text-card-foreground shadow-sm">
                <div className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <Skeleton className="h-5 w-[100px]" />
                  <Skeleton className="h-4 w-4 rounded-full" />
                </div>
                <Skeleton className="h-7 w-[80px] mt-2" />
                <Skeleton className="h-4 w-[120px] mt-2" />
              </div>
            ))}
        </div>
      </div>

<div className="p-6 rounded-lg border bg-card text-card-foreground shadow-sm">
        <Skeleton className="h-6 w-[200px] mb-2" />
        <Skeleton className="h-4 w-[300px] mb-6" />
        <div className="space-y-6">
          {Array(5)
            .fill(null)
            .map((_, i) => (
              <div key={i} className="flex items-center">
                <Skeleton className="h-10 w-10 rounded-full mr-4" />
                <div className="space-y-2 flex-1">
                  <Skeleton className="h-4 w-[150px]" />
                  <Skeleton className="h-3 w-[250px]" />
                </div>
                <Skeleton className="h-4 w-[60px]" />
              </div>
            ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/settings/page.tsx" isMerged="true"
"use client"

import { Badge } from "@/components/ui/badge"

import type React from "react"

import { useState } from "react"
import { useAuth } from "@/lib/auth-context"
import { useTranslation } from "@/lib/translation-context"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { AlertCircle, Check, Globe, Lock, MapPin, Shield, User, Wrench } from "lucide-react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

export default function SettingsPage() {
  const { user, updateUserLocation } = useAuth()
  const { t } = useTranslation()

const [activeTab, setActiveTab] = useState("profile")
  const [formState, setFormState] = useState({
    name: user?.name || "",
    email: user?.email || "",
    company: user?.company || "",
    phone: "",
    address: user?.location?.address || "",
    language: "en",
    timeZone: "UTC",
    dateFormat: "MM/DD/YYYY",
    timeFormat: "12h",
    darkMode: true,
    emailNotifications: true,
    pushNotifications: true,
    smsNotifications: false,
    currentPassword: "",
    newPassword: "",
    confirmPassword: "",
  })

const [saveStatus, setSaveStatus] = useState<"idle" | "saving" | "success" | "error">("idle")

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormState((prev) => ({ ...prev, [name]: value }))
  }

const handleSwitchChange = (name: string, checked: boolean) => {
    setFormState((prev) => ({ ...prev, [name]: checked }))
  }

const handleSelectChange = (name: string, value: string) => {
    setFormState((prev) => ({ ...prev, [name]: value }))
  }

const handleSaveProfile = async () => {
    setSaveStatus("saving")

try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 1000))

// Update user location if address was changed
      if (formState.address !== user?.location?.address) {
        updateUserLocation({
          lat: user?.location?.lat || 0,
          lng: user?.location?.lng || 0,
          address: formState.address,
        })
      }

setSaveStatus("success")
      setTimeout(() => setSaveStatus("idle"), 3000)
    } catch (error) {
      setSaveStatus("error")
      setTimeout(() => setSaveStatus("idle"), 3000)
    }
  }

const handleSavePassword = async () => {
    setSaveStatus("saving")

try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 1000))

setSaveStatus("success")
      setTimeout(() => setSaveStatus("idle"), 3000)
      setFormState((prev) => ({
        ...prev,
        currentPassword: "",
        newPassword: "",
        confirmPassword: "",
      }))
    } catch (error) {
      setSaveStatus("error")
      setTimeout(() => setSaveStatus("idle"), 3000)
    }
  }

return (
    <div className="container mx-auto py-6 max-w-5xl">
      <div className="flex flex-col space-y-6">
        <div>
          <h1 className="text-2xl font-bold tracking-tight text-white">{t("settings.title")}</h1>
          <p className="text-slate-400">{t("settings.subtitle")}</p>
        </div>

<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
          <TabsList className="grid grid-cols-4 sm:w-[600px]">
            <TabsTrigger value="profile" className="flex items-center gap-2" data-active={activeTab === "profile"}>
              <User className="h-4 w-4" />
              <span className="hidden sm:inline">{t("settings.tabs.profile")}</span>
            </TabsTrigger>
            <TabsTrigger
              value="preferences"
              className="flex items-center gap-2"
              data-active={activeTab === "preferences"}
            >
              <Wrench className="h-4 w-4" />
              <span className="hidden sm:inline">{t("settings.tabs.preferences")}</span>
            </TabsTrigger>
            <TabsTrigger
              value="notifications"
              className="flex items-center gap-2"
              data-active={activeTab === "notifications"}
            >
              <AlertCircle className="h-4 w-4" />
              <span className="hidden sm:inline">{t("settings.tabs.notifications")}</span>
            </TabsTrigger>
            <TabsTrigger value="security" className="flex items-center gap-2" data-active={activeTab === "security"}>
              <Shield className="h-4 w-4" />
              <span className="hidden sm:inline">{t("settings.tabs.security")}</span>
            </TabsTrigger>
          </TabsList>

{/* Profile Settings */}
          <TabsContent value="profile" className="space-y-6">
            <Card className="bg-gray-900 border-gray-800">
              <CardHeader>
                <CardTitle className="text-white">{t("settings.profile.title")}</CardTitle>
                <CardDescription className="text-gray-400">{t("settings.profile.description")}</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="flex flex-col md:flex-row gap-6">
                  <div className="flex flex-col items-center space-y-3">
                    <Avatar className="h-24 w-24">
                      <AvatarImage src="/placeholder.svg?height=96&width=96" alt={user?.name} />
                      <AvatarFallback className="text-2xl">{user?.name?.charAt(0).toUpperCase() || "U"}</AvatarFallback>
                    </Avatar>
                    <Button
                      variant="outline"
                      size="sm"
                      className="text-gray-400 border-gray-700 hover:text-white hover:bg-gray-800"
                    >
                      {t("settings.profile.changePhoto")}
                    </Button>
                  </div>
                  <div className="flex-1 space-y-4">
                    <div className="grid gap-4 md:grid-cols-2">
                      <div className="space-y-2">
                        <Label htmlFor="name" className="text-gray-300">
                          {t("settings.profile.name")}
                        </Label>
                        <Input
                          id="name"
                          name="name"
                          value={formState.name}
                          onChange={handleInputChange}
                          className="bg-gray-800 border-gray-700 text-white"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="email" className="text-gray-300">
                          {t("settings.profile.email")}
                        </Label>
                        <Input
                          id="email"
                          name="email"
                          type="email"
                          value={formState.email}
                          onChange={handleInputChange}
                          className="bg-gray-800 border-gray-700 text-white"
                        />
                      </div>
                    </div>
                    <div className="grid gap-4 md:grid-cols-2">
                      <div className="space-y-2">
                        <Label htmlFor="company" className="text-gray-300">
                          {t("settings.profile.company")}
                        </Label>
                        <Input
                          id="company"
                          name="company"
                          value={formState.company}
                          onChange={handleInputChange}
                          className="bg-gray-800 border-gray-700 text-white"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="phone" className="text-gray-300">
                          {t("settings.profile.phone")}
                        </Label>
                        <Input
                          id="phone"
                          name="phone"
                          type="tel"
                          value={formState.phone}
                          onChange={handleInputChange}
                          className="bg-gray-800 border-gray-700 text-white"
                        />
                      </div>
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="address" className="text-gray-300">
                        <div className="flex items-center">
                          <MapPin className="h-4 w-4 mr-1" />
                          {t("settings.profile.address")}
                        </div>
                      </Label>
                      <Textarea
                        id="address"
                        name="address"
                        value={formState.address}
                        onChange={handleInputChange}
                        className="bg-gray-800 border-gray-700 text-white min-h-[80px]"
                      />
                    </div>
                  </div>
                </div>
              </CardContent>
              <CardFooter className="flex justify-between border-t border-gray-800 pt-5">
                <div className="flex items-center">
                  {saveStatus === "success" && (
                    <span className="text-green-500 flex items-center">
                      <Check className="mr-1 h-4 w-4" /> {t("settings.saved")}
                    </span>
                  )}
                  {saveStatus === "error" && (
                    <span className="text-red-500 flex items-center">
                      <AlertCircle className="mr-1 h-4 w-4" /> {t("settings.error")}
                    </span>
                  )}
                </div>
                <Button
                  onClick={handleSaveProfile}
                  disabled={saveStatus === "saving"}
                  className="bg-blue-600 hover:bg-blue-700 text-white"
                >
                  {saveStatus === "saving" ? t("settings.saving") : t("settings.saveChanges")}
                </Button>
              </CardFooter>
            </Card>
          </TabsContent>

{/* Preferences Settings */}
          <TabsContent value="preferences" className="space-y-6">
            <Card className="bg-gray-900 border-gray-800">
              <CardHeader>
                <CardTitle className="text-white">{t("settings.preferences.title")}</CardTitle>
                <CardDescription className="text-gray-400">{t("settings.preferences.description")}</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="language" className="text-gray-300">
                      <div className="flex items-center">
                        <Globe className="h-4 w-4 mr-1" />
                        {t("settings.preferences.language")}
                      </div>
                    </Label>
                    <Select value={formState.language} onValueChange={(value) => handleSelectChange("language", value)}>
                      <SelectTrigger id="language" className="bg-gray-800 border-gray-700 text-white">
                        <SelectValue placeholder={t("settings.preferences.selectLanguage")} />
                      </SelectTrigger>
                      <SelectContent className="bg-gray-800 border-gray-700 text-white">
                        <SelectItem value="en">English</SelectItem>
                        <SelectItem value="fr">Français</SelectItem>
                        <SelectItem value="es">Español</SelectItem>
                        <SelectItem value="ar">العربية</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="timeZone" className="text-gray-300">
                      {t("settings.preferences.timeZone")}
                    </Label>
                    <Select value={formState.timeZone} onValueChange={(value) => handleSelectChange("timeZone", value)}>
                      <SelectTrigger id="timeZone" className="bg-gray-800 border-gray-700 text-white">
                        <SelectValue placeholder={t("settings.preferences.selectTimeZone")} />
                      </SelectTrigger>
                      <SelectContent className="bg-gray-800 border-gray-700 text-white">
                        <SelectItem value="UTC">UTC</SelectItem>
                        <SelectItem value="EST">Eastern Time (EST/EDT)</SelectItem>
                        <SelectItem value="CST">Central Time (CST/CDT)</SelectItem>
                        <SelectItem value="MST">Mountain Time (MST/MDT)</SelectItem>
                        <SelectItem value="PST">Pacific Time (PST/PDT)</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div className="grid gap-4 md:grid-cols-2">
                    <div className="space-y-2">
                      <Label htmlFor="dateFormat" className="text-gray-300">
                        {t("settings.preferences.dateFormat")}
                      </Label>
                      <Select
                        value={formState.dateFormat}
                        onValueChange={(value) => handleSelectChange("dateFormat", value)}
                      >
                        <SelectTrigger id="dateFormat" className="bg-gray-800 border-gray-700 text-white">
                          <SelectValue placeholder={t("settings.preferences.selectDateFormat")} />
                        </SelectTrigger>
                        <SelectContent className="bg-gray-800 border-gray-700 text-white">
                          <SelectItem value="MM/DD/YYYY">MM/DD/YYYY</SelectItem>
                          <SelectItem value="DD/MM/YYYY">DD/MM/YYYY</SelectItem>
                          <SelectItem value="YYYY-MM-DD">YYYY-MM-DD</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

<div className="space-y-2">
                      <Label htmlFor="timeFormat" className="text-gray-300">
                        {t("settings.preferences.timeFormat")}
                      </Label>
                      <Select
                        value={formState.timeFormat}
                        onValueChange={(value) => handleSelectChange("timeFormat", value)}
                      >
                        <SelectTrigger id="timeFormat" className="bg-gray-800 border-gray-700 text-white">
                          <SelectValue placeholder={t("settings.preferences.selectTimeFormat")} />
                        </SelectTrigger>
                        <SelectContent className="bg-gray-800 border-gray-700 text-white">
                          <SelectItem value="12h">12-hour (AM/PM)</SelectItem>
                          <SelectItem value="24h">24-hour</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>

<div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label htmlFor="darkMode" className="text-gray-300">
                        {t("settings.preferences.darkMode")}
                      </Label>
                      <p className="text-xs text-gray-500">{t("settings.preferences.darkModeDescription")}</p>
                    </div>
                    <Switch
                      id="darkMode"
                      checked={formState.darkMode}
                      onCheckedChange={(checked) => handleSwitchChange("darkMode", checked)}
                    />
                  </div>
                </div>
              </CardContent>
              <CardFooter className="flex justify-between border-t border-gray-800 pt-5">
                <div className="flex items-center">
                  {saveStatus === "success" && (
                    <span className="text-green-500 flex items-center">
                      <Check className="mr-1 h-4 w-4" /> {t("settings.saved")}
                    </span>
                  )}
                  {saveStatus === "error" && (
                    <span className="text-red-500 flex items-center">
                      <AlertCircle className="mr-1 h-4 w-4" /> {t("settings.error")}
                    </span>
                  )}
                </div>
                <Button
                  onClick={handleSaveProfile}
                  disabled={saveStatus === "saving"}
                  className="bg-blue-600 hover:bg-blue-700 text-white"
                >
                  {saveStatus === "saving" ? t("settings.saving") : t("settings.saveChanges")}
                </Button>
              </CardFooter>
            </Card>
          </TabsContent>

{/* Notifications Settings */}
          <TabsContent value="notifications" className="space-y-6">
            <Card className="bg-gray-900 border-gray-800">
              <CardHeader>
                <CardTitle className="text-white">{t("settings.notifications.title")}</CardTitle>
                <CardDescription className="text-gray-400">{t("settings.notifications.description")}</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label htmlFor="emailNotifications" className="text-gray-300">
                        {t("settings.notifications.email")}
                      </Label>
                      <p className="text-xs text-gray-500">{t("settings.notifications.emailDescription")}</p>
                    </div>
                    <Switch
                      id="emailNotifications"
                      checked={formState.emailNotifications}
                      onCheckedChange={(checked) => handleSwitchChange("emailNotifications", checked)}
                    />
                  </div>

<div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label htmlFor="pushNotifications" className="text-gray-300">
                        {t("settings.notifications.push")}
                      </Label>
                      <p className="text-xs text-gray-500">{t("settings.notifications.pushDescription")}</p>
                    </div>
                    <Switch
                      id="pushNotifications"
                      checked={formState.pushNotifications}
                      onCheckedChange={(checked) => handleSwitchChange("pushNotifications", checked)}
                    />
                  </div>

<div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label htmlFor="smsNotifications" className="text-gray-300">
                        {t("settings.notifications.sms")}
                      </Label>
                      <p className="text-xs text-gray-500">{t("settings.notifications.smsDescription")}</p>
                    </div>
                    <Switch
                      id="smsNotifications"
                      checked={formState.smsNotifications}
                      onCheckedChange={(checked) => handleSwitchChange("smsNotifications", checked)}
                    />
                  </div>
                </div>
              </CardContent>
              <CardFooter className="flex justify-between border-t border-gray-800 pt-5">
                <div className="flex items-center">
                  {saveStatus === "success" && (
                    <span className="text-green-500 flex items-center">
                      <Check className="mr-1 h-4 w-4" /> {t("settings.saved")}
                    </span>
                  )}
                  {saveStatus === "error" && (
                    <span className="text-red-500 flex items-center">
                      <AlertCircle className="mr-1 h-4 w-4" /> {t("settings.error")}
                    </span>
                  )}
                </div>
                <Button
                  onClick={handleSaveProfile}
                  disabled={saveStatus === "saving"}
                  className="bg-blue-600 hover:bg-blue-700 text-white"
                >
                  {saveStatus === "saving" ? t("settings.saving") : t("settings.saveChanges")}
                </Button>
              </CardFooter>
            </Card>
          </TabsContent>

{/* Security Settings */}
          <TabsContent value="security" className="space-y-6">
            <Card className="bg-gray-900 border-gray-800">
              <CardHeader>
                <CardTitle className="text-white">{t("settings.security.title")}</CardTitle>
                <CardDescription className="text-gray-400">{t("settings.security.description")}</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="currentPassword" className="text-gray-300">
                      <div className="flex items-center">
                        <Lock className="h-4 w-4 mr-1" />
                        {t("settings.security.currentPassword")}
                      </div>
                    </Label>
                    <Input
                      id="currentPassword"
                      name="currentPassword"
                      type="password"
                      value={formState.currentPassword}
                      onChange={handleInputChange}
                      className="bg-gray-800 border-gray-700 text-white"
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="newPassword" className="text-gray-300">
                      {t("settings.security.newPassword")}
                    </Label>
                    <Input
                      id="newPassword"
                      name="newPassword"
                      type="password"
                      value={formState.newPassword}
                      onChange={handleInputChange}
                      className="bg-gray-800 border-gray-700 text-white"
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="confirmPassword" className="text-gray-300">
                      {t("settings.security.confirmPassword")}
                    </Label>
                    <Input
                      id="confirmPassword"
                      name="confirmPassword"
                      type="password"
                      value={formState.confirmPassword}
                      onChange={handleInputChange}
                      className="bg-gray-800 border-gray-700 text-white"
                    />
                  </div>
                </div>

<Alert variant="default" className="bg-gray-800 border-amber-800 text-amber-400">
                  <AlertCircle className="h-4 w-4" />
                  <AlertTitle>{t("settings.security.passwordRequirements")}</AlertTitle>
                  <AlertDescription className="text-gray-400">
                    <ul className="list-disc pl-5 text-sm mt-2 space-y-1">
                      <li>{t("settings.security.minChars")}</li>
                      <li>{t("settings.security.upperCase")}</li>
                      <li>{t("settings.security.lowerCase")}</li>
                      <li>{t("settings.security.number")}</li>
                      <li>{t("settings.security.specialChar")}</li>
                    </ul>
                  </AlertDescription>
                </Alert>
              </CardContent>
              <CardFooter className="flex justify-between border-t border-gray-800 pt-5">
                <div className="flex items-center">
                  {saveStatus === "success" && (
                    <span className="text-green-500 flex items-center">
                      <Check className="mr-1 h-4 w-4" /> {t("settings.saved")}
                    </span>
                  )}
                  {saveStatus === "error" && (
                    <span className="text-red-500 flex items-center">
                      <AlertCircle className="mr-1 h-4 w-4" /> {t("settings.error")}
                    </span>
                  )}
                </div>
                <Button
                  onClick={handleSavePassword}
                  disabled={
                    saveStatus === "saving" ||
                    !formState.currentPassword ||
                    !formState.newPassword ||
                    formState.newPassword !== formState.confirmPassword
                  }
                  className="bg-blue-600 hover:bg-blue-700 text-white"
                >
                  {saveStatus === "saving" ? t("settings.saving") : t("settings.updatePassword")}
                </Button>
              </CardFooter>
            </Card>

<Card className="bg-gray-900 border-gray-800">
              <CardHeader>
                <CardTitle className="text-white">{t("settings.security.sessions")}</CardTitle>
                <CardDescription className="text-gray-400">
                  {t("settings.security.sessionsDescription")}
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {[
                    { device: "Chrome on Windows", lastActive: "Currently active", location: "Rabat, Morocco" },
                    { device: "Safari on iPhone", lastActive: "2 hours ago", location: "Casablanca, Morocco" },
                    { device: "Firefox on Mac", lastActive: "Yesterday", location: "Marrakech, Morocco" },
                  ].map((session, index) => (
                    <div
                      key={index}
                      className="flex justify-between items-center border-b border-gray-800 pb-3 last:border-b-0 last:pb-0"
                    >
                      <div>
                        <p className="font-medium text-white">{session.device}</p>
                        <div className="flex flex-col sm:flex-row sm:items-center text-xs text-gray-400 gap-0 sm:gap-2">
                          <span>{session.lastActive}</span>
                          <span className="hidden sm:inline">•</span>
                          <span>{session.location}</span>
                        </div>
                      </div>
                      {index === 0 ? (
                        <Badge variant="outline" className="bg-green-900/30 text-green-400 border-green-800/30">
                          Current
                        </Badge>
                      ) : (
                        <Button
                          variant="outline"
                          size="sm"
                          className="text-red-400 border-gray-700 hover:bg-red-900/20 hover:text-red-300"
                        >
                          Log out
                        </Button>
                      )}
                    </div>
                  ))}
                </div>
              </CardContent>
              <CardFooter className="border-t border-gray-800 pt-5">
                <Button
                  variant="outline"
                  className="text-red-400 border-gray-700 hover:bg-red-900/20 hover:text-red-300"
                >
                  {t("settings.security.logoutAllDevices")}
                </Button>
              </CardFooter>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/settings/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"
import { Card, CardContent, CardHeader } from "@/components/ui/card"

export default function SettingsLoading() {
  return (
    <div className="container mx-auto py-6 max-w-5xl">
      <div className="flex flex-col space-y-6">
        <div>
          <Skeleton className="h-8 w-48 bg-gray-800" />
          <Skeleton className="h-4 w-96 mt-2 bg-gray-800" />
        </div>

<Card className="bg-gray-900 border-gray-800">
            <CardHeader>
              <Skeleton className="h-6 w-48 mb-2 bg-gray-800" />
              <Skeleton className="h-4 w-96 bg-gray-800" />
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="flex flex-col md:flex-row gap-6">
                <Skeleton className="h-24 w-24 rounded-full bg-gray-800" />
                <div className="flex-1 space-y-4">
                  <div className="grid gap-4 md:grid-cols-2">
                    <div className="space-y-2">
                      <Skeleton className="h-4 w-24 bg-gray-800" />
                      <Skeleton className="h-10 w-full bg-gray-800" />
                    </div>
                    <div className="space-y-2">
                      <Skeleton className="h-4 w-24 bg-gray-800" />
                      <Skeleton className="h-10 w-full bg-gray-800" />
                    </div>
                  </div>
                  <div className="grid gap-4 md:grid-cols-2">
                    <div className="space-y-2">
                      <Skeleton className="h-4 w-24 bg-gray-800" />
                      <Skeleton className="h-10 w-full bg-gray-800" />
                    </div>
                    <div className="space-y-2">
                      <Skeleton className="h-4 w-24 bg-gray-800" />
                      <Skeleton className="h-10 w-full bg-gray-800" />
                    </div>
                  </div>
                  <div className="space-y-2">
                    <Skeleton className="h-4 w-24 bg-gray-800" />
                    <Skeleton className="h-20 w-full bg-gray-800" />
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard-header.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { Bell, Search, Menu, X, ChevronDown, Settings, LogOut, UserIcon, Moon, Sun, MessageSquare } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Badge } from "@/components/ui/badge"
import { useAuth } from "@/lib/auth-context"
import { LanguageSwitcher } from "@/components/language-switcher"
import { useTranslation } from "@/lib/translation-context"

export default function DashboardHeader() {
  const { user, logout } = useAuth()
  const { t } = useTranslation()
  const pathname = usePathname()
  const [isScrolled, setIsScrolled] = useState(false)
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
  const [isDarkMode, setIsDarkMode] = useState(true)

// Handle scroll effect for header
  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 10)
    }

window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

// Get page title based on current path
  const getPageTitle = () => {
    const path = pathname?.split("/").pop() || "dashboard"

const titles: Record<string, string> = {
      dashboard: "Dashboard",
      shipments: "Shipments",
      carriers: "Carriers",
      fleet: "Fleet Management",
      analytics: "Analytics",
      messages: "Messages",
      settings: "Settings",
      nearby: "Nearby Shipments",
      locations: "Locations",
    }

return titles[path] || "Dashboard"
  }

return (
    <header
      className={`sticky top-0 z-40 w-full transition-all duration-200 ${
        isScrolled ? "bg-gray-900/95 backdrop-blur-sm shadow-md" : "bg-transparent"
      }`}
    >
      <div className="container mx-auto px-4">
        <div className="flex h-16 items-center justify-between">
          {/* Mobile menu button */}
          <button
            className="lg:hidden p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-800"
            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
          >
            {isMobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
          </button>

{/* Page title and breadcrumb */}
          <div className="flex items-center">
            <h1 className="text-xl font-semibold text-white hidden sm:block">{getPageTitle()}</h1>

{/* Breadcrumb on larger screens */}
            <div className="hidden md:flex items-center ml-4 text-sm text-gray-400">
              <Link href="/dashboard" className="hover:text-white transition-colors">
                Dashboard
              </Link>
              {pathname && pathname !== "/dashboard" && (
                <>
                  <span className="mx-2">/</span>
                  <span className="text-white">{getPageTitle()}</span>
                </>
              )}
            </div>
          </div>

{/* Search and actions */}
          <div className="flex items-center gap-3">
            {/* Search */}
            <div className="relative hidden md:block">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-500" />
              <Input
                placeholder="Search..."
                className="w-[200px] lg:w-[300px] pl-10 bg-gray-800 border-gray-700 text-white placeholder:text-gray-500 focus-visible:ring-blue-500"
              />
            </div>

{/* Theme toggle */}
            <Button
              variant="ghost"
              size="icon"
              className="text-gray-400 hover:text-white"
              onClick={() => setIsDarkMode(!isDarkMode)}
            >
              {isDarkMode ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
            </Button>

{/* Notifications */}
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="icon" className="relative text-gray-400 hover:text-white">
                  <Bell className="h-5 w-5" />
                  <span className="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] font-medium text-white">
                    3
                  </span>
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-[300px] bg-gray-900 border-gray-800">
                <DropdownMenuLabel className="text-white">Notifications</DropdownMenuLabel>
                <DropdownMenuSeparator className="bg-gray-800" />
                {[
                  { title: "New shipment request", time: "5 minutes ago", type: "shipment" },
                  { title: "Delivery delayed", time: "1 hour ago", type: "alert" },
                  { title: "Payment received", time: "3 hours ago", type: "payment" },
                ].map((notification, i) => (
                  <DropdownMenuItem key={i} className="py-2 cursor-pointer hover:bg-gray-800">
                    <div className="flex items-start gap-2">
                      <div
                        className={`p-1.5 rounded-full mt-0.5 ${
                          notification.type === "shipment"
                            ? "bg-blue-900/50 text-blue-400"
                            : notification.type === "alert"
                              ? "bg-amber-900/50 text-amber-400"
                              : "bg-green-900/50 text-green-400"
                        }`}
                      >
                        {notification.type === "shipment" ? (
                          <MessageSquare className="h-3.5 w-3.5" />
                        ) : notification.type === "alert" ? (
                          <Bell className="h-3.5 w-3.5" />
                        ) : (
                          <Badge className="h-3.5 w-3.5" />
                        )}
                      </div>
                      <div>
                        <p className="text-sm font-medium text-white">{notification.title}</p>
                        <p className="text-xs text-gray-400">{notification.time}</p>
                      </div>
                    </div>
                  </DropdownMenuItem>
                ))}
                <DropdownMenuSeparator className="bg-gray-800" />
                <div className="p-2 text-center">
                  <Button variant="ghost" size="sm" className="text-blue-400 hover:text-blue-300 w-full">
                    View all notifications
                  </Button>
                </div>
              </DropdownMenuContent>
            </DropdownMenu>

{/* Messages */}
            <Button variant="ghost" size="icon" className="relative text-gray-400 hover:text-white" asChild>
              <Link href="/dashboard/messages">
                <MessageSquare className="h-5 w-5" />
                <span className="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-blue-500 text-[10px] font-medium text-white">
                  2
                </span>
              </Link>
            </Button>

{/* Language switcher */}
            <LanguageSwitcher variant="minimal" className="hidden md:flex" />

{/* User menu */}
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="sm" className="relative h-8 flex items-center gap-2 text-white">
                  <Avatar className="h-8 w-8">
                    <AvatarImage src="/placeholder.svg?height=32&width=32" alt={user?.name} />
                    <AvatarFallback className="bg-blue-600">
                      {user?.name?.charAt(0).toUpperCase() || "U"}
                    </AvatarFallback>
                  </Avatar>
                  <span className="hidden md:inline-flex text-sm font-medium">{user?.name || "User"}</span>
                  <ChevronDown className="h-4 w-4 text-gray-400" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-56 bg-gray-900 border-gray-800">
                <DropdownMenuLabel className="text-white">My Account</DropdownMenuLabel>
                <DropdownMenuSeparator className="bg-gray-800" />
                <DropdownMenuItem className="hover:bg-gray-800 cursor-pointer" asChild>
                  <Link href="/dashboard/profile" className="flex items-center">
                    <UserIcon className="mr-2 h-4 w-4" />
                    <span>Profile</span>
                  </Link>
                </DropdownMenuItem>
                <DropdownMenuItem className="hover:bg-gray-800 cursor-pointer" asChild>
                  <Link href="/dashboard/settings" className="flex items-center">
                    <Settings className="mr-2 h-4 w-4" />
                    <span>Settings</span>
                  </Link>
                </DropdownMenuItem>
                <DropdownMenuSeparator className="bg-gray-800" />
                <DropdownMenuItem
                  className="text-red-400 hover:bg-gray-800 hover:text-red-300 cursor-pointer"
                  onClick={logout}
                >
                  <LogOut className="mr-2 h-4 w-4" />
                  <span>Log out</span>
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </div>
      </div>

{/* Mobile menu */}
      {isMobileMenuOpen && (
        <div className="lg:hidden bg-gray-900 border-t border-gray-800">
          <div className="container mx-auto px-4 py-3">
            <div className="relative mb-3">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-500" />
              <Input
                placeholder="Search..."
                className="w-full pl-10 bg-gray-800 border-gray-700 text-white placeholder:text-gray-500 focus-visible:ring-blue-500"
              />
            </div>
            <nav className="space-y-1">
              {[
                { name: "Dashboard", href: "/dashboard" },
                { name: "Shipments", href: "/dashboard/shipments" },
                { name: "Carriers", href: "/dashboard/carriers" },
                { name: "Fleet", href: "/dashboard/fleet" },
                { name: "Analytics", href: "/dashboard/analytics" },
                { name: "Messages", href: "/dashboard/messages" },
                { name: "Settings", href: "/dashboard/settings" },
              ].map((item) => (
                <Link
                  key={item.name}
                  href={item.href}
                  className={`flex items-center px-3 py-2 text-sm font-medium rounded-md ${
                    pathname === item.href
                      ? "bg-gray-800 text-white"
                      : "text-gray-300 hover:bg-gray-800 hover:text-white"
                  }`}
                >
                  {item.name}
                </Link>
              ))}
            </nav>
          </div>
        </div>
      )}
    </header>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard-card.tsx" isMerged="true"
"use client"

import type React from "react"

import { cn } from "@/lib/utils"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ArrowUpRight } from "lucide-react"

interface DashboardCardProps {
  title: string
  description?: string
  icon?: React.ReactNode
  className?: string
  headerClassName?: string
  contentClassName?: string
  footerClassName?: string
  footerContent?: React.ReactNode
  actionLabel?: string
  actionHref?: string
  onActionClick?: () => void
  children: React.ReactNode
}

export function DashboardCard({
  title,
  description,
  icon,
  className,
  headerClassName,
  contentClassName,
  footerClassName,
  footerContent,
  actionLabel,
  actionHref,
  onActionClick,
  children,
}: DashboardCardProps) {
  return (
    <Card className={cn("bg-gray-900 border-gray-800 overflow-hidden", className)}>
      <CardHeader className={cn("flex flex-row items-center justify-between pb-2", headerClassName)}>
        <div className="space-y-1">
          <CardTitle className="text-white flex items-center">
            {icon && <span className="mr-2">{icon}</span>}
            {title}
          </CardTitle>
          {description && <CardDescription className="text-gray-400">{description}</CardDescription>}
        </div>
        {actionLabel && (
          <Button
            size="sm"
            variant="ghost"
            className="text-blue-400 hover:text-blue-300 hover:bg-blue-900/20"
            onClick={onActionClick}
            asChild={!!actionHref}
          >
            {actionHref ? (
              <a href={actionHref}>
                {actionLabel}
                <ArrowUpRight className="ml-1 h-4 w-4" />
              </a>
            ) : (
              <>
                {actionLabel}
                <ArrowUpRight className="ml-1 h-4 w-4" />
              </>
            )}
          </Button>
        )}
      </CardHeader>
      <CardContent className={cn("", contentClassName)}>{children}</CardContent>
      {(footerContent || footerClassName) && (
        <CardFooter className={cn("border-t border-gray-800 pt-4", footerClassName)}>{footerContent}</CardFooter>
      )}
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/data-table.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import {
  type ColumnDef,
  flexRender,
  getCoreRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  type SortingState,
  useReactTable,
  type ColumnFiltersState,
  getFilteredRowModel,
} from "@tanstack/react-table"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { ChevronLeft, ChevronRight, Search, SlidersHorizontal } from "lucide-react"

interface DataTableProps<TData, TValue> {
  columns: ColumnDef<TData, TValue>[]
  data: TData[]
  searchColumn?: string
  filterableColumns?: {
    id: string
    title: string
    options: { label: string; value: string }[]
  }[]
}

export function DataTable<TData, TValue>({
  columns,
  data,
  searchColumn,
  filterableColumns,
}: DataTableProps<TData, TValue>) {
  const [sorting, setSorting] = useState<SortingState>([])
  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
  const [showFilters, setShowFilters] = useState(false)

const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    onSortingChange: setSorting,
    getSortedRowModel: getSortedRowModel(),
    onColumnFiltersChange: setColumnFilters,
    getFilteredRowModel: getFilteredRowModel(),
    state: {
      sorting,
      columnFilters,
    },
  })

return (
    <div className="space-y-4">
      <div className="flex flex-col sm:flex-row gap-3 justify-between">
        {searchColumn && (
          <div className="relative max-w-sm">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-500" />
            <Input
              placeholder="Search..."
              value={(table.getColumn(searchColumn)?.getFilterValue() as string) ?? ""}
              onChange={(event) => table.getColumn(searchColumn)?.setFilterValue(event.target.value)}
              className="pl-10 bg-gray-800 border-gray-700 text-white placeholder:text-gray-500"
            />
          </div>
        )}

{filterableColumns && (
          <div className="flex items-center gap-2">
            <Button
              variant="outline"
              size="sm"
              onClick={() => setShowFilters(!showFilters)}
              className="border-gray-700 text-gray-300 hover:text-white hover:bg-gray-800"
            >
              <SlidersHorizontal className="mr-2 h-4 w-4" />
              Filters
            </Button>

{showFilters && (
              <div className="flex flex-wrap gap-2">
                {filterableColumns.map((column) => (
                  <Select
                    key={column.id}
                    value={(table.getColumn(column.id)?.getFilterValue() as string) ?? ""}
                    onValueChange={(value) => table.getColumn(column.id)?.setFilterValue(value)}
                  >
                    <SelectTrigger className="h-8 w-[150px] bg-gray-800 border-gray-700 text-white">
                      <SelectValue placeholder={column.title} />
                    </SelectTrigger>
                    <SelectContent className="bg-gray-800 border-gray-700 text-white">
                      <SelectItem value="all">All {column.title}</SelectItem>
                      {column.options.map((option) => (
                        <SelectItem key={option.value} value={option.value}>
                          {option.label}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                ))}
              </div>
            )}
          </div>
        )}
      </div>

<div className="rounded-md border border-gray-800">
        <Table>
          <TableHeader className="bg-gray-900">
            {table.getHeaderGroups().map((headerGroup) => (
              <TableRow key={headerGroup.id} className="border-gray-800 hover:bg-transparent">
                {headerGroup.headers.map((header) => {
                  return (
                    <TableHead key={header.id} className="text-gray-400">
                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
                    </TableHead>
                  )
                })}
              </TableRow>
            ))}
          </TableHeader>
          <TableBody>
            {table.getRowModel().rows?.length ? (
              table.getRowModel().rows.map((row) => (
                <TableRow key={row.id} className="border-gray-800 hover:bg-gray-800/50">
                  {row.getVisibleCells().map((cell) => (
                    <TableCell key={cell.id} className="text-gray-300">
                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
                    </TableCell>
                  ))}
                </TableRow>
              ))
            ) : (
              <TableRow>
                <TableCell colSpan={columns.length} className="h-24 text-center text-gray-500">
                  No results found.
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>

<div className="flex items-center justify-between">
        <div className="text-sm text-gray-500">
          Showing {table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1} to{" "}
          {Math.min(
            (table.getState().pagination.pageIndex + 1) * table.getState().pagination.pageSize,
            table.getFilteredRowModel().rows.length,
          )}{" "}
          of {table.getFilteredRowModel().rows.length} results
        </div>
        <div className="flex items-center space-x-2">
          <Button
            variant="outline"
            size="sm"
            onClick={() => table.previousPage()}
            disabled={!table.getCanPreviousPage()}
            className="border-gray-700 text-gray-300 hover:text-white hover:bg-gray-800"
          >
            <ChevronLeft className="h-4 w-4" />
          </Button>
          <Button
            variant="outline"
            size="sm"
            onClick={() => table.nextPage()}
            disabled={!table.getCanNextPage()}
            className="border-gray-700 text-gray-300 hover:text-white hover:bg-gray-800"
          >
            <ChevronRight className="h-4 w-4" />
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/shipments/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import {
  CheckCircle2,
  Truck,
  Clock,
  AlertTriangle,
  Eye,
  FileEdit,
  Trash2,
  Brain,
  Plus,
  Download,
  Filter,
  ArrowUpDown,
} from "lucide-react"
import { DataTable } from "@/components/data-table"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { useTranslation } from "@/lib/translation-context"

type ShipmentStatus = "delivered" | "in_transit" | "pending" | "delayed"

export default function ShipmentsPage() {
  const { t } = useTranslation()
  const [selectedOrder, setSelectedOrder] = useState<string | null>(null)

const shipments: Shipment[] = [
    {
      id: "order_vloJEBq",
      trackingNumber: "SHP-2023-1234",
      origin: "Chicago, IL",
      destination: "New York, NY",
      customer: "Acme Corp",
      status: "in_transit",
      departureDate: "2025-03-20",
      arrivalDate: "2025-03-23",
      priority: "high",
      aiOptimized: true,
      aiSavings: 350,
    },
    {
      id: "order_a7bCdE",
      trackingNumber: "SHP-2023-1235",
      origin: "Los Angeles, CA",
      destination: "Seattle, WA",
      customer: "TechGiant Inc",
      status: "delivered",
      departureDate: "2025-03-18",
      arrivalDate: "2025-03-21",
      priority: "medium",
      aiOptimized: true,
      aiSavings: 420,
    },
    {
      id: "order_f8gHiJ",
      trackingNumber: "SHP-2023-1236",
      origin: "Miami, FL",
      destination: "Atlanta, GA",
      customer: "Southern Distributors",
      status: "delayed",
      departureDate: "2025-03-19",
      arrivalDate: "2025-03-22",
      priority: "high",
      aiOptimized: false,
    },
    {
      id: "order_k9lMnO",
      trackingNumber: "SHP-2023-1237",
      origin: "Dallas, TX",
      destination: "Phoenix, AZ",
      customer: "Desert Supplies Co",
      status: "pending",
      departureDate: "2025-03-22",
      arrivalDate: "2025-03-25",
      priority: "low",
      aiOptimized: true,
      aiSavings: 280,
    },
    {
      id: "order_p0qRsT",
      trackingNumber: "SHP-2023-1238",
      origin: "Boston, MA",
      destination: "Washington, DC",
      customer: "East Coast Traders",
      status: "in_transit",
      departureDate: "2025-03-21",
      arrivalDate: "2025-03-23",
      priority: "medium",
      aiOptimized: true,
      aiSavings: 175,
    },
  ]

const getStatusIcon = (status: ShipmentStatus) => {
    switch (status) {
      case "delivered":
        return <CheckCircle2 className="h-4 w-4 text-green-500" />
      case "in_transit":
        return <Truck className="h-4 w-4 text-blue-500" />
      case "pending":
        return <Clock className="h-4 w-4 text-amber-500" />
      case "delayed":
        return <AlertTriangle className="h-4 w-4 text-red-500" />
    }
  }

const getStatusBadge = (status: ShipmentStatus) => {
    switch (status) {
      case "delivered":
        return (
          <Badge variant="outline" className="bg-green-950/30 text-green-500 border-green-800/30">
            Delivered
          </Badge>
        )
      case "in_transit":
        return (
          <Badge variant="outline" className="bg-blue-950/30 text-blue-500 border-blue-800/30">
            In Transit
          </Badge>
        )
      case "pending":
        return (
          <Badge variant="outline" className="bg-amber-950/30 text-amber-500 border-amber-800/30">
            Pending
          </Badge>
        )
      case "delayed":
        return (
          <Badge variant="outline" className="bg-red-950/30 text-red-500 border-red-800/30">
            Delayed
          </Badge>
        )
    }
  }

const getPriorityBadge = (priority: "high" | "medium" | "low") => {
    switch (priority) {
      case "high":
        return (
          <Badge variant="outline" className="bg-red-950/30 text-red-500 border-red-800/30">
            High
          </Badge>
        )
      case "medium":
        return (
          <Badge variant="outline" className="bg-amber-950/30 text-amber-500 border-amber-800/30">
            Medium
          </Badge>
        )
      case "low":
        return (
          <Badge variant="outline" className="bg-green-950/30 text-green-500 border-green-800/30">
            Low
          </Badge>
        )
    }
  }

const columns = [
    {
      accessorKey: "trackingNumber",
      header: ({ column }) => (
        <div className="flex items-center">
          Tracking #
          <Button
            variant="ghost"
            size="sm"
            className="-ml-3 h-8 data-[state=open]:bg-transparent"
            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
          >
            <ArrowUpDown className="h-4 w-4" />
          </Button>
        </div>
      ),
      cell: ({ row }) => <div className="font-medium text-white">{row.getValue("trackingNumber")}</div>,
    },
    {
      accessorKey: "route",
      header: "Route",
      cell: ({ row }) => {
        const shipment = row.original as Shipment
        return (
          <div className="flex flex-col">
            <span className="text-xs text-gray-400">From: {shipment.origin}</span>
            <span className="text-xs text-gray-400">To: {shipment.destination}</span>
          </div>
        )
      },
    },
    {
      accessorKey: "customer",
      header: ({ column }) => (
        <div className="flex items-center">
          Customer
          <Button
            variant="ghost"
            size="sm"
            className="-ml-3 h-8 data-[state=open]:bg-transparent"
            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
          >
            <ArrowUpDown className="h-4 w-4" />
          </Button>
        </div>
      ),
      cell: ({ row }) => <div>{row.getValue("customer")}</div>,
    },
    {
      accessorKey: "status",
      header: ({ column }) => (
        <div className="flex items-center">
          Status
          <Button
            variant="ghost"
            size="sm"
            className="-ml-3 h-8 data-[state=open]:bg-transparent"
            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
          >
            <ArrowUpDown className="h-4 w-4" />
          </Button>
        </div>
      ),
      cell: ({ row }) => {
        const status = row.getValue("status") as ShipmentStatus
        return (
          <div className="flex items-center gap-2">
            {getStatusIcon(status)}
            {getStatusBadge(status)}
          </div>
        )
      },
      filterFn: (row, id, value) => {
        return value.includes(row.getValue(id))
      },
    },
    {
      accessorKey: "departureDate",
      header: ({ column }) => (
        <div className="flex items-center">
          Departure
          <Button
            variant="ghost"
            size="sm"
            className="-ml-3 h-8 data-[state=open]:bg-transparent"
            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
          >
            <ArrowUpDown className="h-4 w-4" />
          </Button>
        </div>
      ),
      cell: ({ row }) => <div>{row.getValue("departureDate")}</div>,
    },
    {
      accessorKey: "arrivalDate",
      header: ({ column }) => (
        <div className="flex items-center">
          Arrival
          <Button
            variant="ghost"
            size="sm"
            className="-ml-3 h-8 data-[state=open]:bg-transparent"
            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
          >
            <ArrowUpDown className="h-4 w-4" />
          </Button>
        </div>
      ),
      cell: ({ row }) => <div>{row.getValue("arrivalDate")}</div>,
    },
    {
      accessorKey: "priority",
      header: "Priority",
      cell: ({ row }) => {
        const priority = row.getValue("priority") as "high" | "medium" | "low"
        return getPriorityBadge(priority)
      },
      filterFn: (row, id, value) => {
        return value.includes(row.getValue(id))
      },
    },
    {
      accessorKey: "aiOptimized",
      header: "AI Optimization",
      cell: ({ row }) => {
        const shipment = row.original as Shipment
        return shipment.aiOptimized ? (
          <TooltipProvider>
            <Tooltip>
              <TooltipTrigger asChild>
                <div className="flex items-center">
                  <Badge variant="outline" className="bg-purple-950/30 text-purple-400 border-purple-800/30">
                    <Brain className="h-3 w-3 mr-1" />
                    Optimized
                  </Badge>
                </div>
              </TooltipTrigger>
              <TooltipContent>
                <p>AI optimized route saving ${shipment.aiSavings}</p>
              </TooltipContent>
            </Tooltip>
          </TooltipProvider>
        ) : (
          <Badge variant="outline" className="bg-gray-950/30 text-gray-400 border-gray-800/30">
            Standard
          </Badge>
        )
      },
      filterFn: (row, id, value) => {
        return value.includes(row.getValue(id) ? "optimized" : "standard")
      },
    },
    {
      id: "actions",
      cell: ({ row }) => {
        const shipment = row.original as Shipment
        return (
          <div className="text-right">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="icon" className="h-8 w-8 text-gray-400 hover:text-white">
                  <span className="sr-only">Open menu</span>
                  <Filter className="h-4 w-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="bg-gray-900 border-gray-800 text-gray-300">
                <DropdownMenuLabel>Actions</DropdownMenuLabel>
                <DropdownMenuSeparator className="bg-gray-800" />
                <DropdownMenuItem
                  className="hover:bg-gray-800 hover:text-white cursor-pointer"
                  onClick={() => setSelectedOrder(shipment.id)}
                >
                  <Eye className="mr-2 h-4 w-4" />
                  View details
                </DropdownMenuItem>
                <DropdownMenuItem className="hover:bg-gray-800 hover:text-white cursor-pointer">
                  <FileEdit className="mr-2 h-4 w-4" />
                  Edit shipment
                </DropdownMenuItem>
                <DropdownMenuItem className="text-red-500 hover:bg-gray-800 hover:text-red-400 cursor-pointer">
                  <Trash2 className="mr-2 h-4 w-4" />
                  Cancel shipment
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        )
      },
    },
  ]

const filterableColumns = [
    {
      id: "status",
      title: "Status",
      options: [
        { label: "Delivered", value: "delivered" },
        { label: "In Transit", value: "in_transit" },
        { label: "Pending", value: "pending" },
        { label: "Delayed", value: "delayed" },
      ],
    },
    {
      id: "priority",
      title: "Priority",
      options: [
        { label: "High", value: "high" },
        { label: "Medium", value: "medium" },
        { label: "Low", value: "low" },
      ],
    },
    {
      id: "aiOptimized",
      title: "AI Status",
      options: [
        { label: "AI Optimized", value: "optimized" },
        { label: "Standard", value: "standard" },
      ],
    },
  ]

return (
    <div className="container mx-auto py-6">
      <div className="flex flex-col gap-6">
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
          <div>
            <h1 className="text-2xl font-bold tracking-tight text-white">Shipments</h1>
            <p className="text-slate-400">Manage and track all your shipments in one place</p>
          </div>
          <div className="flex flex-wrap gap-3">
            <Button variant="outline" className="border-gray-700 text-gray-300 hover:text-white hover:bg-gray-800">
              <Download className="mr-2 h-4 w-4" />
              Export
            </Button>
            <Button className="bg-blue-600 hover:bg-blue-700">
              <Plus className="mr-2 h-4 w-4" />
              New Shipment
            </Button>
          </div>
        </div>

<DataTable
          columns={columns}
          data={shipments}
          searchColumn="trackingNumber"
          filterableColumns={filterableColumns}
        />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/ai/route-optimizer.ts" isMerged="true"
import { executeQuery } from "@/lib/db"

type RoutePoint = {
  id: number
  name: string
  address: string
  city: string
  state: string
  latitude: number
  longitude: number
}

type OptimizationFactors = {
  prioritizeTime?: boolean
  prioritizeFuel?: boolean
  avoidTolls?: boolean
  considerTraffic?: boolean
  considerWeather?: boolean
}

export async function optimizeRoute(
  originId: number,
  destinationId: number,
  waypoints: number[] = [],
  factors: OptimizationFactors = {},
) {
  try {
    // Get origin, destination and waypoint locations
    const locationIds = [originId, destinationId, ...waypoints]
    const locationsQuery = `
      SELECT id, name, address, city, state, latitude, longitude
      FROM locations
      WHERE id = ANY($1)
    `

const locations = await executeQuery(locationsQuery, [locationIds])

if (!locations || locations.length < 2) {
      throw new Error("Origin and destination locations are required")
    }

// Find origin and destination
    const origin = locations.find((loc: any) => loc.id === originId)
    const destination = locations.find((loc: any) => loc.id === destinationId)

if (!origin || !destination) {
      throw new Error("Origin or destination not found")
    }

// Get waypoint locations
    const waypointLocations = locations.filter((loc: any) => loc.id !== originId && loc.id !== destinationId)

// Call Groq API to optimize the route
    const optimizedRoute = await callGroqForRouteOptimization(origin, destination, waypointLocations, factors)

return optimizedRoute
  } catch (error) {
    console.error("Error optimizing route:", error)
    throw error
  }
}

async function callGroqForRouteOptimization(
  origin: RoutePoint,
  destination: RoutePoint,
  waypoints: RoutePoint[],
  factors: OptimizationFactors,
) {
  // Prepare the prompt for Groq
  const waypointsText =
    waypoints.length > 0
      ? `The route must include these waypoints (in the optimal order): ${waypoints.map((wp) => `${wp.name} (${wp.city}, ${wp.state})`).join(", ")}.`
      : "No additional waypoints required."

const factorsText = Object.entries(factors)
    .filter(([_, value]) => value === true)
    .map(([key]) => {
      switch (key) {
        case "prioritizeTime":
          return "Prioritize the fastest route"
        case "prioritizeFuel":
          return "Prioritize fuel efficiency"
        case "avoidTolls":
          return "Avoid toll roads"
        case "considerTraffic":
          return "Consider current traffic conditions"
        case "considerWeather":
          return "Consider weather conditions"
        default:
          return ""
      }
    })
    .filter((text) => text)
    .join(". ")

const prompt = `
    I need to optimize a logistics route from ${origin.name} (${origin.city}, ${origin.state}) to ${destination.name} (${destination.city}, ${destination.state}).
    ${waypointsText}
    ${factorsText ? `Optimization factors: ${factorsText}.` : ""}
    
    Please provide:
    1. The optimal order of locations to visit
    2. Estimated total distance in miles
    3. Estimated travel time
    4. Estimated fuel consumption
    5. Any specific route recommendations
    
    Format the response as a JSON object with these fields: orderedLocations (array of location IDs in optimal order), totalDistance, estimatedTime, fuelConsumption, and recommendations.
  `

try {
    const response = await fetch("https://api.groq.com/openai/v1/chat/completions", {
      method: "POST",
      headers: {
        Authorization: `Bearer ${process.env.GROQ_API_KEY}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        model: "llama3-70b-8192",
        messages: [
          {
            role: "system",
            content:
              "You are a logistics route optimization expert. Provide optimal routes based on the given parameters. Always respond with valid JSON.",
          },
          {
            role: "user",
            content: prompt,
          },
        ],
        temperature: 0.2,
        response_format: { type: "json_object" },
      }),
    })

if (!response.ok) {
      throw new Error(`Groq API error: ${response.status}`)
    }

const data = await response.json()
    const result = JSON.parse(data.choices[0].message.content)

// Add location details to the ordered locations
    const orderedLocationsWithDetails = result.orderedLocations.map((id: number) => {
      const location = [origin, destination, ...waypoints].find((loc) => loc.id === id)
      return {
        id,
        ...location,
      }
    })

return {
      ...result,
      orderedLocationsWithDetails,
    }
  } catch (error) {
    console.error("Error calling Groq API:", error)
    throw new Error("Failed to optimize route using AI")
  }
}
[V0_FILE]typescriptreact:file="app/actions/route-optimization.ts" isMerged="true"
"use server"

import { optimizeRoute } from "@/lib/ai/route-optimizer"
import { executeQuery } from "@/lib/db"

export async function getOptimizedRoute(
  shipmentId: string,
  optimizationFactors: {
    prioritizeTime?: boolean
    prioritizeFuel?: boolean
    avoidTolls?: boolean
    considerTraffic?: boolean
    considerWeather?: boolean
  } = {},
) {
  try {
    // Get shipment details
    const shipmentQuery = `
      SELECT s.*, o.id as origin_id, d.id as destination_id
      FROM shipments s
      JOIN locations o ON s.origin_id = o.id
      JOIN locations d ON s.destination_id = d.id
      WHERE s.id = $1
    `

const shipments = await executeQuery(shipmentQuery, [shipmentId])

if (!shipments || shipments.length === 0) {
      return { success: false, error: "Shipment not found" }
    }

const shipment = shipments[0]

// Get any existing waypoints for this shipment
    const waypointsQuery = `
      SELECT location_id
      FROM route_waypoints
      WHERE route_id IN (SELECT id FROM routes WHERE shipment_id = $1)
      ORDER BY sequence_number
    `

const waypoints = await executeQuery(waypointsQuery, [shipmentId])
    const waypointIds = waypoints.map((wp: any) => wp.location_id)

// Call the route optimizer
    const optimizedRoute = await optimizeRoute(
      shipment.origin_id,
      shipment.destination_id,
      waypointIds,
      optimizationFactors,
    )

return { success: true, route: optimizedRoute }
  } catch (error) {
    console.error("Error getting optimized route:", error)
    return { success: false, error: "Failed to optimize route" }
  }
}

export async function createRouteFromOptimization(
  shipmentId: string,
  truckId: string,
  driverId: string,
  optimizedRoute: any,
) {
  try {
    // Create a new route
    const routeQuery = `
      INSERT INTO routes 
      (shipment_id, truck_id, driver_id, distance, status, fuel_consumption)
      VALUES ($1, $2, $3, $4, $5, $6)
      RETURNING *
    `

const routeResult = await executeQuery(routeQuery, [
      shipmentId,
      truckId,
      driverId,
      optimizedRoute.totalDistance,
      "planned",
      optimizedRoute.fuelConsumption,
    ])

if (!routeResult || routeResult.length === 0) {
      return { success: false, error: "Failed to create route" }
    }

const route = routeResult[0]

// Create waypoints for the route
    const orderedLocations = optimizedRoute.orderedLocations

for (let i = 0; i < orderedLocations.length; i++) {
      const locationId = orderedLocations[i]

await executeQuery(
        `INSERT INTO route_waypoints 
         (route_id, location_id, sequence_number, status)
         VALUES ($1, $2, $3, $4)`,
        [route.id, locationId, i, i === 0 ? "pending" : "planned"],
      )
    }

// Update shipment status
    await executeQuery(`UPDATE shipments SET status = $1 WHERE id = $2`, ["scheduled", shipmentId])

return { success: true, route }
  } catch (error) {
    console.error("Error creating route from optimization:", error)
    return { success: false, error: "Failed to create route" }
  }
}
[V0_FILE]typescriptreact:file="components/route-optimizer.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
import { getOptimizedRoute, createRouteFromOptimization } from "@/app/actions/route-optimization"
import { Loader2 } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

interface RouteOptimizerProps {
  shipmentId: string
  truckId?: string
  driverId?: string
  onRouteCreated?: (routeId: string) => void
}

export function RouteOptimizer({ shipmentId, truckId, driverId, onRouteCreated }: RouteOptimizerProps) {
  const [isOptimizing, setIsOptimizing] = useState(false)
  const [optimizedRoute, setOptimizedRoute] = useState<any>(null)
  const [isCreatingRoute, setIsCreatingRoute] = useState(false)
  const [factors, setFactors] = useState({
    prioritizeTime: true,
    prioritizeFuel: false,
    avoidTolls: false,
    considerTraffic: true,
    considerWeather: true,
  })
  const { toast } = useToast()

const handleFactorChange = (factor: string, checked: boolean) => {
    setFactors((prev) => ({
      ...prev,
      [factor]: checked,
    }))
  }

const handleOptimize = async () => {
    setIsOptimizing(true)
    try {
      const result = await getOptimizedRoute(shipmentId, factors)
      if (result.success) {
        setOptimizedRoute(result.route)
        toast({
          title: "Route optimized",
          description: "AI has successfully optimized the route",
          variant: "default",
        })
      } else {
        toast({
          title: "Optimization failed",
          description: result.error,
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Error optimizing route:", error)
      toast({
        title: "Optimization failed",
        description: "An unexpected error occurred",
        variant: "destructive",
      })
    } finally {
      setIsOptimizing(false)
    }
  }

const handleCreateRoute = async () => {
    if (!optimizedRoute) return

if (!truckId || !driverId) {
      toast({
        title: "Missing information",
        description: "Truck and driver must be assigned before creating a route",
        variant: "destructive",
      })
      return
    }

setIsCreatingRoute(true)
    try {
      const result = await createRouteFromOptimization(shipmentId, truckId, driverId, optimizedRoute)

if (result.success) {
        toast({
          title: "Route created",
          description: "The optimized route has been created successfully",
          variant: "default",
        })

if (onRouteCreated) {
          onRouteCreated(result.route.id)
        }
      } else {
        toast({
          title: "Route creation failed",
          description: result.error,
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Error creating route:", error)
      toast({
        title: "Route creation failed",
        description: "An unexpected error occurred",
        variant: "destructive",
      })
    } finally {
      setIsCreatingRoute(false)
    }
  }

return (
    <Card className="w-full">
      <CardHeader>
        <CardTitle>AI Route Optimizer</CardTitle>
        <CardDescription>Use AI to find the optimal route for this shipment</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="flex items-center space-x-2">
              <Checkbox
                id="prioritizeTime"
                checked={factors.prioritizeTime}
                onCheckedChange={(checked) => handleFactorChange("prioritizeTime", checked as boolean)}
              />
              <Label htmlFor="prioritizeTime">Prioritize Time</Label>
            </div>
            <div className="flex items-center space-x-2">
              <Checkbox
                id="prioritizeFuel"
                checked={factors.prioritizeFuel}
                onCheckedChange={(checked) => handleFactorChange("prioritizeFuel", checked as boolean)}
              />
              <Label htmlFor="prioritizeFuel">Prioritize Fuel Efficiency</Label>
            </div>
            <div className="flex items-center space-x-2">
              <Checkbox
                id="avoidTolls"
                checked={factors.avoidTolls}
                onCheckedChange={(checked) => handleFactorChange("avoidTolls", checked as boolean)}
              />
              <Label htmlFor="avoidTolls">Avoid Toll Roads</Label>
            </div>
            <div className="flex items-center space-x-2">
              <Checkbox
                id="considerTraffic"
                checked={factors.considerTraffic}
                onCheckedChange={(checked) => handleFactorChange("considerTraffic", checked as boolean)}
              />
              <Label htmlFor="considerTraffic">Consider Traffic</Label>
            </div>
            <div className="flex items-center space-x-2">
              <Checkbox
                id="considerWeather"
                checked={factors.considerWeather}
                onCheckedChange={(checked) => handleFactorChange("considerWeather", checked as boolean)}
              />
              <Label htmlFor="considerWeather">Consider Weather</Label>
            </div>
          </div>

{optimizedRoute && (
            <div className="mt-6 space-y-4">
              <div className="p-4 bg-muted rounded-lg">
                <h3 className="font-medium mb-2">Optimization Results</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <p className="text-sm text-muted-foreground">Total Distance</p>
                    <p className="font-medium">{optimizedRoute.totalDistance} miles</p>
                  </div>
                  <div>
                    <p className="text-sm text-muted-foreground">Estimated Time</p>
                    <p className="font-medium">{optimizedRoute.estimatedTime}</p>
                  </div>
                  <div>
                    <p className="text-sm text-muted-foreground">Fuel Consumption</p>
                    <p className="font-medium">{optimizedRoute.fuelConsumption} gallons</p>
                  </div>
                </div>

<div className="mt-4">
                  <p className="text-sm text-muted-foreground">Recommendations</p>
                  <p className="text-sm">{optimizedRoute.recommendations}</p>
                </div>

<div className="mt-4">
                  <p className="text-sm text-muted-foreground">Route Order</p>
                  <ol className="list-decimal list-inside mt-1">
                    {optimizedRoute.orderedLocationsWithDetails.map((location: any, index: number) => (
                      <li key={index} className="text-sm">
                        {location.name} ({location.city}, {location.state})
                      </li>
                    ))}
                  </ol>
                </div>
              </div>
            </div>
          )}
        </div>
      </CardContent>
      <CardFooter className="flex justify-between">
        <Button variant="outline" onClick={handleOptimize} disabled={isOptimizing}>
          {isOptimizing ? (
            <>
              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              Optimizing...
            </>
          ) : (
            <>Optimize Route</>
          )}
        </Button>

{optimizedRoute && (
          <Button onClick={handleCreateRoute} disabled={isCreatingRoute || !truckId || !driverId}>
            {isCreatingRoute ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Creating...
              </>
            ) : (
              <>Create Route</>
            )}
          </Button>
        )}
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="lib/ai/load-matcher.ts" isMerged="true"
import { executeQuery } from "@/lib/db"

type MatchingFactors = {
  prioritizeProximity?: boolean
  prioritizeAvailability?: boolean
  prioritizeExperience?: boolean
  prioritizeRating?: boolean
  prioritizeFuelEfficiency?: boolean
}

export async function findOptimalMatches(shipmentId: number, factors: MatchingFactors = {}) {
  try {
    // Get shipment details
    const shipmentQuery = `
      SELECT s.*, 
             o.latitude as origin_lat, o.longitude as origin_lng,
             d.latitude as dest_lat, d.longitude as dest_lng
      FROM shipments s
      JOIN locations o ON s.origin_id = o.id
      JOIN locations d ON s.destination_id = d.id
      WHERE s.id = $1
    `

const shipments = await executeQuery(shipmentQuery, [shipmentId])

if (!shipments || shipments.length === 0) {
      throw new Error("Shipment not found")
    }

const shipment = shipments[0]

// Get available trucks
    const trucksQuery = `
      SELECT t.*, 
             l.latitude, l.longitude
      FROM trucks t
      LEFT JOIN routes r ON t.id = r.truck_id AND r.status IN ('planned', 'in_progress')
      LEFT JOIN shipments s ON r.shipment_id = s.id
      LEFT JOIN locations l ON s.destination_id = l.id
      WHERE t.status = 'available'
      OR (r.status = 'completed' AND t.id NOT IN (
        SELECT truck_id FROM routes WHERE status IN ('planned', 'in_progress')
      ))
    `

const trucks = await executeQuery(trucksQuery, [])

// Get available drivers
    const driversQuery = `
      SELECT d.*, u.name, 
             l.latitude, l.longitude
      FROM drivers d
      JOIN users u ON d.user_id = u.id
      LEFT JOIN routes r ON d.id = r.driver_id AND r.status IN ('planned', 'in_progress')
      LEFT JOIN shipments s ON r.shipment_id = s.id
      LEFT JOIN locations l ON s.destination_id = l.id
      WHERE d.status = 'available'
      OR (r.status = 'completed' AND d.id NOT IN (
        SELECT driver_id FROM routes WHERE status IN ('planned', 'in_progress')
      ))
    `

const drivers = await executeQuery(driversQuery, [])

// Call Groq API to find optimal matches
    const matches = await callGroqForLoadMatching(shipment, trucks, drivers, factors)

return matches
  } catch (error) {
    console.error("Error finding optimal matches:", error)
    throw error
  }
}

async function callGroqForLoadMatching(shipment: any, trucks: any[], drivers: any[], factors: MatchingFactors) {
  // Prepare the prompt for Groq
  const factorsText = Object.entries(factors)
    .filter(([_, value]) => value === true)
    .map(([key]) => {
      switch (key) {
        case "prioritizeProximity":
          return "Prioritize trucks and drivers that are closest to the shipment origin"
        case "prioritizeAvailability":
          return "Prioritize trucks and drivers with the longest availability window"
        case "prioritizeExperience":
          return "Prioritize drivers with more experience"
        case "prioritizeRating":
          return "Prioritize drivers with higher ratings"
        case "prioritizeFuelEfficiency":
          return "Prioritize trucks with better fuel efficiency"
        default:
          return ""
      }
    })
    .filter((text) => text)
    .join(". ")

const prompt = `
    I need to match a shipment with the optimal truck and driver.
    
    Shipment details:
    - ID: ${shipment.id}
    - Weight: ${shipment.weight} kg
    - Volume: ${shipment.volume} cubic meters
    - Priority: ${shipment.priority}
    - Origin coordinates: ${shipment.origin_lat}, ${shipment.origin_lng}
    - Destination coordinates: ${shipment.dest_lat}, ${shipment.dest_lng}
    
    Available trucks (${trucks.length}):
    ${trucks
      .map(
        (truck, i) => `
    Truck ${i + 1}:
    - ID: ${truck.id}
    - Model: ${truck.model}
    - Capacity: ${truck.capacity} kg
    - Fuel efficiency: ${truck.fuel_efficiency} mpg
    - Current coordinates: ${truck.latitude || "Unknown"}, ${truck.longitude || "Unknown"}
    `,
      )
      .join("")}
    
    Available drivers (${drivers.length}):
    ${drivers
      .map(
        (driver, i) => `
    Driver ${i + 1}:
    - ID: ${driver.id}
    - Name: ${driver.name}
    - Rating: ${driver.rating || "Unknown"}/5
    - Current coordinates: ${driver.latitude || "Unknown"}, ${driver.longitude || "Unknown"}
    `,
      )
      .join("")}
    
    ${factorsText ? `Matching factors: ${factorsText}.` : ""}
    
    Please provide:
    1. The top 3 truck-driver combinations ranked by suitability
    2. A brief explanation for each recommendation
    
    Format the response as a JSON array with these fields for each match: truckId, driverId, score (0-100), and explanation.
  `

try {
    const response = await fetch("https://api.groq.com/openai/v1/chat/completions", {
      method: "POST",
      headers: {
        Authorization: `Bearer ${process.env.GROQ_API_KEY}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        model: "llama3-70b-8192",
        messages: [
          {
            role: "system",
            content:
              "You are a logistics expert specializing in matching shipments with optimal trucks and drivers. Always respond with valid JSON.",
          },
          {
            role: "user",
            content: prompt,
          },
        ],
        temperature: 0.2,
        response_format: { type: "json_object" },
      }),
    })

if (!response.ok) {
      throw new Error(`Groq API error: ${response.status}`)
    }

const data = await response.json()
    const result = JSON.parse(data.choices[0].message.content)

// Add truck and driver details to the matches
    const matchesWithDetails = result.matches.map((match: any) => {
      const truck = trucks.find((t) => t.id === match.truckId)
      const driver = drivers.find((d) => d.id === match.driverId)

return {
        ...match,
        truck: truck || null,
        driver: driver || null,
      }
    })

return matchesWithDetails
  } catch (error) {
    console.error("Error calling Groq API for load matching:", error)
    throw new Error("Failed to find optimal matches using AI")
  }
}
[V0_FILE]typescriptreact:file="app/actions/load-matching.ts" isMerged="true"
"use server"

import { findOptimalMatches } from "@/lib/ai/load-matcher"
import { executeQuery } from "@/lib/db"

export async function getOptimalMatches(
  shipmentId: string,
  matchingFactors: {
    prioritizeProximity?: boolean
    prioritizeAvailability?: boolean
    prioritizeExperience?: boolean
    prioritizeRating?: boolean
    prioritizeFuelEfficiency?: boolean
  } = {},
) {
  try {
    const matches = await findOptimalMatches(Number.parseInt(shipmentId), matchingFactors)

return { success: true, matches }
  } catch (error) {
    console.error("Error getting optimal matches:", error)
    return { success: false, error: "Failed to find optimal matches" }
  }
}

export async function assignTruckAndDriver(shipmentId: string, truckId: string, driverId: string) {
  try {
    // Check if shipment exists
    const shipmentQuery = `SELECT * FROM shipments WHERE id = $1`
    const shipments = await executeQuery(shipmentQuery, [shipmentId])

if (!shipments || shipments.length === 0) {
      return { success: false, error: "Shipment not found" }
    }

// Check if truck is available
    const truckQuery = `SELECT * FROM trucks WHERE id = $1`
    const trucks = await executeQuery(truckQuery, [truckId])

if (!trucks || trucks.length === 0) {
      return { success: false, error: "Truck not found" }
    }

if (trucks[0].status !== "available") {
      return { success: false, error: "Truck is not available" }
    }

// Check if driver is available
    const driverQuery = `SELECT * FROM drivers WHERE id = $1`
    const drivers = await executeQuery(driverQuery, [driverId])

if (!drivers || drivers.length === 0) {
      return { success: false, error: "Driver not found" }
    }

if (drivers[0].status !== "available") {
      return { success: false, error: "Driver is not available" }
    }

// Update truck status
    await executeQuery(`UPDATE trucks SET status = $1 WHERE id = $2`, ["assigned", truckId])

// Update driver status
    await executeQuery(`UPDATE drivers SET status = $1 WHERE id = $2`, ["assigned", driverId])

// Update shipment status
    await executeQuery(`UPDATE shipments SET status = $1 WHERE id = $2`, ["assigned", shipmentId])

return {
      success: true,
      message: "Truck and driver assigned successfully",
      truckId,
      driverId,
    }
  } catch (error) {
    console.error("Error assigning truck and driver:", error)
    return { success: false, error: "Failed to assign truck and driver" }
  }
}
[V0_FILE]typescriptreact:file="components/load-matcher.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
import { getOptimalMatches, assignTruckAndDriver } from "@/app/actions/load-matching"
import { Loader2, Truck, User } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { Badge } from "@/components/ui/badge"

interface LoadMatcherProps {
  shipmentId: string
  onAssigned?: (truckId: string, driverId: string) => void
}

export function LoadMatcher({ shipmentId, onAssigned }: LoadMatcherProps) {
  const [isMatching, setIsMatching] = useState(false)
  const [matches, setMatches] = useState<any[]>([])
  const [isAssigning, setIsAssigning] = useState(false)
  const [selectedMatch, setSelectedMatch] = useState<number | null>(null)
  const [factors, setFactors] = useState({
    prioritizeProximity: true,
    prioritizeAvailability: true,
    prioritizeExperience: false,
    prioritizeRating: true,
    prioritizeFuelEfficiency: true,
  })
  const { toast } = useToast()

const handleFactorChange = (factor: string, checked: boolean) => {
    setFactors((prev) => ({
      ...prev,
      [factor]: checked,
    }))
  }

const handleFindMatches = async () => {
    setIsMatching(true)
    try {
      const result = await getOptimalMatches(shipmentId, factors)
      if (result.success) {
        setMatches(result.matches)
        toast({
          title: "Matches found",
          description: `Found ${result.matches.length} optimal matches for this shipment`,
          variant: "default",
        })
      } else {
        toast({
          title: "Matching failed",
          description: result.error,
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Error finding matches:", error)
      toast({
        title: "Matching failed",
        description: "An unexpected error occurred",
        variant: "destructive",
      })
    } finally {
      setIsMatching(false)
    }
  }

const handleAssign = async () => {
    if (selectedMatch === null) return

const match = matches[selectedMatch]
    setIsAssigning(true)

try {
      const result = await assignTruckAndDriver(shipmentId, match.truck.id, match.driver.id)

if (result.success) {
        toast({
          title: "Assignment successful",
          description: "Truck and driver have been assigned to this shipment",
          variant: "default",
        })

if (onAssigned) {
          onAssigned(match.truck.id, match.driver.id)
        }
      } else {
        toast({
          title: "Assignment failed",
          description: result.error,
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Error assigning truck and driver:", error)
      toast({
        title: "Assignment failed",
        description: "An unexpected error occurred",
        variant: "destructive",
      })
    } finally {
      setIsAssigning(false)
    }
  }

return (
    <Card className="w-full">
      <CardHeader>
        <CardTitle>AI Load Matcher</CardTitle>
        <CardDescription>Use AI to find the optimal truck and driver for this shipment</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="flex items-center space-x-2">
              <Checkbox
                id="prioritizeProximity"
                checked={factors.prioritizeProximity}
                onCheckedChange={(checked) => handleFactorChange("prioritizeProximity", checked as boolean)}
              />
              <Label htmlFor="prioritizeProximity">Prioritize Proximity</Label>
            </div>
            <div className="flex items-center space-x-2">
              <Checkbox
                id="prioritizeAvailability"
                checked={factors.prioritizeAvailability}
                onCheckedChange={(checked) => handleFactorChange("prioritizeAvailability", checked as boolean)}
              />
              <Label htmlFor="prioritizeAvailability">Prioritize Availability</Label>
            </div>
            <div className="flex items-center space-x-2">
              <Checkbox
                id="prioritizeExperience"
                checked={factors.prioritizeExperience}
                onCheckedChange={(checked) => handleFactorChange("prioritizeExperience", checked as boolean)}
              />
              <Label htmlFor="prioritizeExperience">Prioritize Experience</Label>
            </div>
            <div className="flex items-center space-x-2">
              <Checkbox
                id="prioritizeRating"
                checked={factors.prioritizeRating}
                onCheckedChange={(checked) => handleFactorChange("prioritizeRating", checked as boolean)}
              />
              <Label htmlFor="prioritizeRating">Prioritize Driver Rating</Label>
            </div>
            <div className="flex items-center space-x-2">
              <Checkbox
                id="prioritizeFuelEfficiency"
                checked={factors.prioritizeFuelEfficiency}
                onCheckedChange={(checked) => handleFactorChange("prioritizeFuelEfficiency", checked as boolean)}
              />
              <Label htmlFor="prioritizeFuelEfficiency">Prioritize Fuel Efficiency</Label>
            </div>
          </div>

{matches.length > 0 && (
            <div className="mt-6 space-y-4">
              <h3 className="font-medium">Recommended Matches</h3>
              <div className="space-y-4">
                {matches.map((match, index) => (
                  <div
                    key={index}
                    className={`p-4 border rounded-lg cursor-pointer transition-colors ${
                      selectedMatch === index ? "border-primary bg-primary/5" : "border-border"
                    }`}
                    onClick={() => setSelectedMatch(index)}
                  >
                    <div className="flex justify-between items-start mb-2">
                      <div className="flex items-center">
                        <Badge className="mr-2">Match Score: {match.score}%</Badge>
                      </div>
                    </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3">
                      <div className="flex items-center">
                        <Truck className="h-5 w-5 mr-2 text-muted-foreground" />
                        <div>
                          <p className="font-medium">{match.truck.model}</p>
                          <p className="text-sm text-muted-foreground">
                            {match.truck.license_plate} • {match.truck.capacity}kg capacity
                          </p>
                        </div>
                      </div>

<div className="flex items-center">
                        <User className="h-5 w-5 mr-2 text-muted-foreground" />
                        <div>
                          <p className="font-medium">{match.driver.name}</p>
                          <p className="text-sm text-muted-foreground">Rating: {match.driver.rating || "N/A"}/5</p>
                        </div>
                      </div>
                    </div>

<p className="text-sm">{match.explanation}</p>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      </CardContent>
      <CardFooter className="flex justify-between">
        <Button variant="outline" onClick={handleFindMatches} disabled={isMatching}>
          {isMatching ? (
            <>
              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              Finding matches...
            </>
          ) : (
            <>Find Optimal Matches</>
          )}
        </Button>

{matches.length > 0 && selectedMatch !== null && (
          <Button onClick={handleAssign} disabled={isAssigning}>
            {isAssigning ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Assigning...
              </>
            ) : (
              <>Assign Selected Match</>
            )}
          </Button>
        )}
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="lib/ai/maintenance-predictor.ts" isMerged="true"
import { executeQuery } from "@/lib/db"

export async function predictMaintenanceNeeds(truckId: number) {
  try {
    // Get truck details
    const truckQuery = `
      SELECT * FROM trucks WHERE id = $1
    `

const trucks = await executeQuery(truckQuery, [truckId])

if (!trucks || trucks.length === 0) {
      throw new Error("Truck not found")
    }

const truck = trucks[0]

// Get route history for this truck
    const routesQuery = `
      SELECT r.*, s.weight
      FROM routes r
      JOIN shipments s ON r.shipment_id = s.id
      WHERE r.truck_id = $1
      ORDER BY r.created_at DESC
      LIMIT 20
    `

const routes = await executeQuery(routesQuery, [truckId])

// Call Groq API to predict maintenance needs
    const prediction = await callGroqForMaintenancePrediction(truck, routes)

return prediction
  } catch (error) {
    console.error("Error predicting maintenance needs:", error)
    throw error
  }
}

async function callGroqForMaintenancePrediction(truck: any, routes: any[]) {
  // Calculate total distance and load
  const totalDistance = routes.reduce((sum, route) => sum + (route.distance || 0), 0)
  const totalLoad = routes.reduce((sum, route) => sum + (route.weight || 0), 0)
  const averageLoad = routes.length > 0 ? totalLoad / routes.length : 0

// Calculate days since last maintenance
  const lastMaintenance = truck.last_maintenance_date ? new Date(truck.last_maintenance_date) : null

const daysSinceLastMaintenance = lastMaintenance
    ? Math.floor((Date.now() - lastMaintenance.getTime()) / (1000 * 60 * 60 * 24))
    : null

const prompt = `
    I need to predict maintenance needs for a truck based on its usage patterns.
    
    Truck details:
    - Model: ${truck.model}
    - License Plate: ${truck.license_plate}
    - Last maintenance date: ${lastMaintenance ? lastMaintenance.toISOString().split("T")[0] : "Unknown"}
    - Days since last maintenance: ${daysSinceLastMaintenance || "Unknown"}
    
    Usage statistics:
    - Total distance in recent routes: ${totalDistance} miles
    - Average load weight: ${averageLoad.toFixed(2)} kg
    - Number of recent routes: ${routes.length}
    
    Please provide:
    1. A maintenance risk score (0-100)
    2. Predicted maintenance needs in the next 30 days
    3. Recommended maintenance schedule
    4. Critical components that need attention
    5. Estimated maintenance costs
    
    Format the response as a JSON object with these fields: riskScore, maintenanceNeeds (array), recommendedSchedule, criticalComponents (array), and estimatedCosts.
  `

try {
    const response = await fetch("https://api.groq.com/openai/v1/chat/completions", {
      method: "POST",
      headers: {
        Authorization: `Bearer ${process.env.GROQ_API_KEY}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        model: "llama3-70b-8192",
        messages: [
          {
            role: "system",
            content:
              "You are a truck maintenance expert with deep knowledge of predictive maintenance. Always respond with valid JSON.",
          },
          {
            role: "user",
            content: prompt,
          },
        ],
        temperature: 0.2,
        response_format: { type: "json_object" },
      }),
    })

if (!response.ok) {
      throw new Error(`Groq API error: ${response.status}`)
    }

const data = await response.json()
    const result = JSON.parse(data.choices[0].message.content)

// Add truck details to the prediction
    return {
      ...result,
      truckId: truck.id,
      truckModel: truck.model,
      licensePlate: truck.license_plate,
      lastMaintenanceDate: truck.last_maintenance_date,
    }
  } catch (error) {
    console.error("Error calling Groq API for maintenance prediction:", error)
    throw new Error("Failed to predict maintenance needs using AI")
  }
}
[V0_FILE]typescriptreact:file="app/actions/maintenance-prediction.ts" isMerged="true"
"use server"

import { predictMaintenanceNeeds } from "@/lib/ai/maintenance-predictor"
import { executeQuery } from "@/lib/db"

export async function getPredictedMaintenance(truckId: string) {
  try {
    const prediction = await predictMaintenanceNeeds(Number.parseInt(truckId))
    return { success: true, prediction }
  } catch (error) {
    console.error("Error predicting maintenance:", error)
    return { success: false, error: "Failed to predict maintenance needs" }
  }
}

export async function scheduleMaintenance(truckId: string, maintenanceDate: string, maintenanceItems: string[]) {
  try {
    // Update truck's next maintenance date
    await executeQuery(
      `UPDATE trucks 
       SET next_maintenance_date = $1, 
           status = CASE WHEN $1::timestamp <= CURRENT_TIMESTAMP + INTERVAL '3 days' THEN 'maintenance' ELSE status END
       WHERE id = $2`,
      [maintenanceDate, truckId],
    )

// In a real application, you would also create maintenance records
    // in a separate maintenance_schedules table

return {
      success: true,
      message: "Maintenance scheduled successfully",
      scheduledDate: maintenanceDate,
      items: maintenanceItems,
    }
  } catch (error) {
    console.error("Error scheduling maintenance:", error)
    return { success: false, error: "Failed to schedule maintenance" }
  }
}
[V0_FILE]typescriptreact:file="components/maintenance-predictor.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { getPredictedMaintenance, scheduleMaintenance } from "@/app/actions/maintenance-prediction"
import { Loader2, AlertTriangle, Calendar, CheckCircle2 } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

interface MaintenancePredictorProps {
  truckId: string
  truckModel?: string
  licensePlate?: string
}

export function MaintenancePredictor({ truckId, truckModel, licensePlate }: MaintenancePredictorProps) {
  const [isPredicting, setIsPredicting] = useState(false)
  const [prediction, setPrediction] = useState<any>(null)
  const [isScheduling, setIsScheduling] = useState(false)
  const [maintenanceDate, setMaintenanceDate] = useState("")
  const { toast } = useToast()

const handlePredict = async () => {
    setIsPredicting(true)
    try {
      const result = await getPredictedMaintenance(truckId)
      if (result.success) {
        setPrediction(result.prediction)

// Set default maintenance date to 7 days from now
        const date = new Date()
        date.setDate(date.getDate() + 7)
        setMaintenanceDate(date.toISOString().split("T")[0])

toast({
          title: "Prediction complete",
          description: "AI has analyzed the truck's maintenance needs",
          variant: "default",
        })
      } else {
        toast({
          title: "Prediction failed",
          description: result.error,
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Error predicting maintenance:", error)
      toast({
        title: "Prediction failed",
        description: "An unexpected error occurred",
        variant: "destructive",
      })
    } finally {
      setIsPredicting(false)
    }
  }

const handleScheduleMaintenance = async () => {
    if (!prediction || !maintenanceDate) return

setIsScheduling(true)
    try {
      const result = await scheduleMaintenance(truckId, maintenanceDate, prediction.maintenanceNeeds)

if (result.success) {
        toast({
          title: "Maintenance scheduled",
          description: `Maintenance scheduled for ${new Date(maintenanceDate).toLocaleDateString()}`,
          variant: "default",
        })
      } else {
        toast({
          title: "Scheduling failed",
          description: result.error,
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Error scheduling maintenance:", error)
      toast({
        title: "Scheduling failed",
        description: "An unexpected error occurred",
        variant: "destructive",
      })
    } finally {
      setIsScheduling(false)
    }
  }

const getRiskColor = (score: number) => {
    if (score < 30) return "bg-green-500"
    if (score < 70) return "bg-yellow-500"
    return "bg-red-500"
  }

return (
    <Card className="w-full">
      <CardHeader>
        <CardTitle>AI Maintenance Predictor</CardTitle>
        <CardDescription>
          Predict maintenance needs for {truckModel || "this truck"} {licensePlate ? `(${licensePlate})` : ""}
        </CardDescription>
      </CardHeader>
      <CardContent>
        {prediction ? (
          <div className="space-y-6">
            <div className="space-y-2">
              <div className="flex justify-between items-center">
                <h3 className="font-medium">Maintenance Risk Score</h3>
                <Badge
                  variant={
                    prediction.riskScore < 30 ? "outline" : prediction.riskScore < 70 ? "secondary" : "destructive"
                  }
                >
                  {prediction.riskScore < 30 ? "Low Risk" : prediction.riskScore < 70 ? "Medium Risk" : "High Risk"}
                </Badge>
              </div>
              <Progress
                value={prediction.riskScore}
                className="h-2"
                indicatorClassName={getRiskColor(prediction.riskScore)}
              />
              <p className="text-sm text-muted-foreground">Risk Score: {prediction.riskScore}/100</p>
            </div>

<div>
              <h3 className="font-medium mb-2">Predicted Maintenance Needs</h3>
              <ul className="space-y-1">
                {prediction.maintenanceNeeds.map((need: string, index: number) => (
                  <li key={index} className="flex items-start">
                    <AlertTriangle className="h-4 w-4 mr-2 mt-0.5 text-yellow-500" />
                    <span className="text-sm">{need}</span>
                  </li>
                ))}
              </ul>
            </div>

<div>
              <h3 className="font-medium mb-2">Critical Components</h3>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                {prediction.criticalComponents.map((component: string, index: number) => (
                  <Badge key={index} variant="outline" className="justify-start">
                    {component}
                  </Badge>
                ))}
              </div>
            </div>

<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div>
                <h3 className="font-medium mb-2">Recommended Schedule</h3>
                <p className="text-sm">{prediction.recommendedSchedule}</p>
              </div>
              <div>
                <h3 className="font-medium mb-2">Estimated Costs</h3>
                <p className="text-sm">{prediction.estimatedCosts}</p>
              </div>
            </div>

<Dialog>
              <DialogTrigger asChild>
                <Button className="w-full">
                  <Calendar className="mr-2 h-4 w-4" />
                  Schedule Maintenance
                </Button>
              </DialogTrigger>
              <DialogContent>
                <DialogHeader>
                  <DialogTitle>Schedule Maintenance</DialogTitle>
                  <DialogDescription>Select a date for the maintenance appointment.</DialogDescription>
                </DialogHeader>

<div className="space-y-4 py-4">
                  <div className="space-y-2">
                    <Label htmlFor="maintenance-date">Maintenance Date</Label>
                    <Input
                      id="maintenance-date"
                      type="date"
                      value={maintenanceDate}
                      onChange={(e) => setMaintenanceDate(e.target.value)}
                    />
                  </div>

<div className="space-y-2">
                    <Label>Maintenance Items</Label>
                    <ul className="space-y-1 text-sm">
                      {prediction.maintenanceNeeds.map((need: string, index: number) => (
                        <li key={index} className="flex items-start">
                          <CheckCircle2 className="h-4 w-4 mr-2 mt-0.5 text-green-500" />
                          <span>{need}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>

<DialogFooter>
                  <Button onClick={handleScheduleMaintenance} disabled={isScheduling || !maintenanceDate}>
                    {isScheduling ? (
                      <>
                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                        Scheduling...
                      </>
                    ) : (
                      <>Confirm Schedule</>
                    )}
                  </Button>
                </DialogFooter>
              </DialogContent>
            </Dialog>
          </div>
        ) : (
          <div className="flex flex-col items-center justify-center py-8">
            <p className="text-center text-muted-foreground mb-4">
              Click the button below to analyze this truck's usage patterns and predict maintenance needs.
            </p>
            <Button onClick={handlePredict} disabled={isPredicting}>
              {isPredicting ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Analyzing...
                </>
              ) : (
                <>Predict Maintenance Needs</>
              )}
            </Button>
          </div>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="lib/supabase-server.ts" isMerged="true"
import { createClient } from "@supabase/supabase-js"

// Create a single supabase client for server-side operations
const supabaseUrl = process.env.SUPABASE_URL!
const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY!

export const supabaseServer = createClient(supabaseUrl, supabaseServiceKey)
[V0_FILE]typescriptreact:file="lib/ai/chat-service.ts" isMerged="true"
import { supabaseServer } from "@/lib/supabase-server"

export async function generateChatResponse(userId: string, conversationId: string, message: string, context: any = {}) {
  try {
    // Get conversation history
    const { data: messages, error } = await supabaseServer
      .from("chat_messages")
      .select("*")
      .eq("conversation_id", conversationId)
      .order("created_at", { ascending: true })

if (error) {
      throw new Error(`Error fetching conversation history: ${error.message}`)
    }

// Format conversation history for the AI
    const conversationHistory = messages.map((msg) => ({
      role: msg.sender_type === "user" ? "user" : "assistant",
      content: msg.content,
    }))

// Add user's new message to history
    conversationHistory.push({
      role: "user",
      content: message,
    })

// Prepare context information
    let contextPrompt = ""
    if (context.shipmentId) {
      contextPrompt += `This conversation is about shipment ID: ${context.shipmentId}. `
    }
    if (context.truckId) {
      contextPrompt += `This conversation involves truck ID: ${context.truckId}. `
    }
    if (context.driverId) {
      contextPrompt += `This conversation involves driver ID: ${context.driverId}. `
    }

// Call Groq API for chat response
    const response = await fetch("https://api.groq.com/openai/v1/chat/completions", {
      method: "POST",
      headers: {
        Authorization: `Bearer ${process.env.GROQ_API_KEY}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        model: "llama3-70b-8192",
        messages: [
          {
            role: "system",
            content: `You are a helpful logistics assistant for a trucking company. 
            You help users with shipment tracking, route information, and general logistics questions.
            Be concise, helpful, and professional. ${contextPrompt}`,
          },
          ...conversationHistory,
        ],
        temperature: 0.7,
      }),
    })

if (!response.ok) {
      throw new Error(`Groq API error: ${response.status}`)
    }

const data = await response.json()
    const aiResponse = data.choices[0].message.content

// Save the AI response to the conversation
    const { error: insertError } = await supabaseServer.from("chat_messages").insert({
      conversation_id: conversationId,
      sender_id: "ai-assistant",
      sender_type: "assistant",
      content: aiResponse,
    })

if (insertError) {
      console.error("Error saving AI response:", insertError)
    }

return aiResponse
  } catch (error) {
    console.error("Error generating chat response:", error)
    throw error
  }
}
[V0_FILE]typescriptreact:file="app/actions/chat.ts" isMerged="true"
"use server"

import { generateChatResponse } from "@/lib/ai/chat-service"
import { supabaseServer } from "@/lib/supabase-server"

export async function createConversation(userId: string, title: string, contextData: any = {}) {
  try {
    // Create conversation in Supabase
    const { data, error } = await supabaseServer
      .from("conversations")
      .insert({
        user_id: userId,
        title: title,
        context: contextData,
      })
      .select()
      .single()

if (error) {
      throw new Error(`Error creating conversation: ${error.message}`)
    }

return { success: true, conversation: data }
  } catch (error) {
    console.error("Error creating conversation:", error)
    return { success: false, error: "Failed to create conversation" }
  }
}

export async function sendMessage(userId: string, conversationId: string, message: string, contextData: any = {}) {
  try {
    // Save user message to Supabase
    const { error } = await supabaseServer.from("chat_messages").insert({
      conversation_id: conversationId,
      sender_id: userId,
      sender_type: "user",
      content: message,
    })

if (error) {
      throw new Error(`Error saving message: ${error.message}`)
    }

// Generate AI response
    const aiResponse = await generateChatResponse(userId, conversationId, message, contextData)

return { success: true, response: aiResponse }
  } catch (error) {
    console.error("Error sending message:", error)
    return { success: false, error: "Failed to send message" }
  }
}

export async function getConversations(userId: string) {
  try {
    const { data, error } = await supabaseServer
      .from("conversations")
      .select("*")
      .eq("user_id", userId)
      .order("created_at", { ascending: false })

if (error) {
      throw new Error(`Error fetching conversations: ${error.message}`)
    }

return { success: true, conversations: data }
  } catch (error) {
    console.error("Error fetching conversations:", error)
    return { success: false, error: "Failed to fetch conversations" }
  }
}

export async function getConversationMessages(conversationId: string) {
  try {
    const { data, error } = await supabaseServer
      .from("chat_messages")
      .select("*")
      .eq("conversation_id", conversationId)
      .order("created_at", { ascending: true })

if (error) {
      throw new Error(`Error fetching messages: ${error.message}`)
    }

return { success: true, messages: data }
  } catch (error) {
    console.error("Error fetching messages:", error)
    return { success: false, error: "Failed to fetch messages" }
  }
}
[V0_FILE]typescriptreact:file="components/ai-chat-support.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect, useRef } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Loader2, Send, MessageSquare, User, Bot } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { createConversation, sendMessage, getConversationMessages } from "@/app/actions/chat"
import { supabase } from "@/lib/supabase-client"

interface AIChatSupportProps {
  userId: string
  contextData?: {
    shipmentId?: string
    truckId?: string
    driverId?: string
    [key: string]: any
  }
}

export function AIChatSupport({ userId, contextData = {} }: AIChatSupportProps) {
  const [isLoading, setIsLoading] = useState(false)
  const [message, setMessage] = useState("")
  const [conversationId, setConversationId] = useState<string | null>(null)
  const [messages, setMessages] = useState<any[]>([])
  const messagesEndRef = useRef<HTMLDivElement>(null)
  const { toast } = useToast()

useEffect(() => {
    // Create a new conversation if none exists
    const initConversation = async () => {
      if (!conversationId) {
        const title = contextData.shipmentId ? `Shipment ${contextData.shipmentId} Support` : "New Support Conversation"

const result = await createConversation(userId, title, contextData)
        if (result.success) {
          setConversationId(result.conversation.id)
        } else {
          toast({
            title: "Error",
            description: "Failed to start conversation",
            variant: "destructive",
          })
        }
      }
    }

initConversation()
  }, [userId, contextData, conversationId, toast])

useEffect(() => {
    // Load existing messages if conversation exists
    const loadMessages = async () => {
      if (conversationId) {
        const result = await getConversationMessages(conversationId)
        if (result.success) {
          setMessages(result.messages)
        }
      }
    }

loadMessages()
  }, [conversationId])

useEffect(() => {
    // Set up real-time subscription for new messages
    if (conversationId) {
      const subscription = supabase
        .channel(`conversation-${conversationId}`)
        .on(
          "postgres_changes",
          {
            event: "INSERT",
            schema: "public",
            table: "chat_messages",
            filter: `conversation_id=eq.${conversationId}`,
          },
          (payload) => {
            setMessages((prev) => [...prev, payload.new])
          },
        )
        .subscribe()

return () => {
        supabase.removeChannel(subscription)
      }
    }
  }, [conversationId])

useEffect(() => {
    // Scroll to bottom when messages change
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }, [messages])

const handleSendMessage = async (e: React.FormEvent) => {
    e.preventDefault()

if (!message.trim() || !conversationId) return

setIsLoading(true)
    try {
      await sendMessage(userId, conversationId, message, contextData)
      setMessage("")
    } catch (error) {
      console.error("Error sending message:", error)
      toast({
        title: "Error",
        description: "Failed to send message",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

return (
    <Card className="w-full h-[500px] flex flex-col">
      <CardHeader>
        <CardTitle className="flex items-center">
          <MessageSquare className="h-5 w-5 mr-2" />
          AI Support Chat
        </CardTitle>
      </CardHeader>
      <CardContent className="flex-1 overflow-y-auto p-4">
        <div className="space-y-4">
          {messages.length === 0 ? (
            <div className="flex flex-col items-center justify-center h-64 text-center">
              <MessageSquare className="h-12 w-12 text-muted-foreground mb-4" />
              <p className="text-muted-foreground">No messages yet. Start the conversation by sending a message.</p>
            </div>
          ) : (
            messages.map((msg) => (
              <div key={msg.id} className={`flex ${msg.sender_type === "user" ? "justify-end" : "justify-start"}`}>
                <div
                  className={`max-w-[80%] rounded-lg p-3 ${
                    msg.sender_type === "user" ? "bg-primary text-primary-foreground" : "bg-muted"
                  }`}
                >
                  <div className="flex items-center mb-1">
                    {msg.sender_type === "user" ? <User className="h-4 w-4 mr-1" /> : <Bot className="h-4 w-4 mr-1" />}
                    <span className="text-xs font-medium">{msg.sender_type === "user" ? "You" : "AI Assistant"}</span>
                  </div>
                  <p className="text-sm whitespace-pre-wrap">{msg.content}</p>
                </div>
              </div>
            ))
          )}
          <div ref={messagesEndRef} />
        </div>
      </CardContent>
      <CardFooter>
        <form onSubmit={handleSendMessage} className="w-full flex space-x-2">
          <Input
            placeholder="Type your message..."
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            disabled={isLoading || !conversationId}
            className="flex-1"
          />
          <Button type="submit" disabled={isLoading || !message.trim() || !conversationId}>
            {isLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
          </Button>
        </form>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="lib/ai/document-processor.ts" isMerged="true"
export async function extractDocumentInfo(documentUrl: string, documentType: string) {
  try {
    // Fetch the document content
    const response = await fetch(documentUrl)

if (!response.ok) {
      throw new Error(`Failed to fetch document: ${response.status}`)
    }

// Get document as text or base64 depending on type
    let documentContent
    if (documentType === "text" || documentType === "csv") {
      documentContent = await response.text()
    } else {
      const buffer = await response.arrayBuffer()
      documentContent = Buffer.from(buffer).toString("base64")
    }

// Call Groq API to extract information
    const extractedInfo = await callGroqForDocumentExtraction(documentContent, documentType)

return extractedInfo
  } catch (error) {
    console.error("Error extracting document info:", error)
    throw error
  }
}

async function callGroqForDocumentExtraction(documentContent: string, documentType: string) {
  // Prepare the prompt based on document type
  let prompt = ""

switch (documentType) {
    case "bill_of_lading":
      prompt = `
        This is a Bill of Lading document. Extract the following information:
        - Shipper name and address
        - Consignee name and address
        - Carrier name
        - Shipment date
        - Description of goods
        - Weight and quantity
        - Special instructions
        
        Document content:
        ${documentContent.substring(0, 8000)} // Limit content length
        
        Format the response as a JSON object with these fields.
      `
      break

case "invoice":
      prompt = `
        This is an Invoice document. Extract the following information:
        - Invoice number
        - Invoice date
        - Due date
        - Vendor/supplier information
        - Customer information
        - Line items (description, quantity, unit price, total)
        - Subtotal, tax, and total amount
        - Payment terms
        
        Document content:
        ${documentContent.substring(0, 8000)}
        
        Format the response as a JSON object with these fields.
      `
      break

case "delivery_receipt":
      prompt = `
        This is a Delivery Receipt document. Extract the following information:
        - Delivery receipt number
        - Delivery date and time
        - Shipper information
        - Receiver information
        - Items delivered (description and quantity)
        - Signatures and names
        - Any notes or exceptions
        
        Document content:
        ${documentContent.substring(0, 8000)}
        
        Format the response as a JSON object with these fields.
      `
      break

default:
      prompt = `
        Extract all relevant logistics information from this document, including:
        - Dates
        - Names and addresses
        - Product information
        - Quantities and weights
        - Reference numbers
        - Any other important logistics data
        
        Document content:
        ${documentContent.substring(0, 8000)}
        
        Format the response as a JSON object with appropriate fields.
      `
  }

try {
    const response = await fetch("https://api.groq.com/openai/v1/chat/completions", {
      method: "POST",
      headers: {
        Authorization: `Bearer ${process.env.GROQ_API_KEY}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        model: "llama3-70b-8192",
        messages: [
          {
            role: "system",
            content:
              "You are a document processing expert specializing in logistics documents. Extract structured information from documents and return it as valid JSON.",
          },
          {
            role: "user",
            content: prompt,
          },
        ],
        temperature: 0.2,
        response_format: { type: "json_object" },
      }),
    })

if (!response.ok) {
      throw new Error(`Groq API error: ${response.status}`)
    }

const data = await response.json()
    const result = JSON.parse(data.choices[0].message.content)

return {
      ...result,
      documentType,
    }
  } catch (error) {
    console.error("Error calling Groq API for document extraction:", error)
    throw new Error("Failed to extract information from document using AI")
  }
}
[V0_FILE]typescriptreact:file="app/actions/document-processing.ts" isMerged="true"
"use server"

import { extractDocumentInfo } from "@/lib/ai/document-processor"
import { executeQuery } from "@/lib/db"
import { supabaseServer } from "@/lib/supabase-server"

export async function processDocument(documentUrl: string, documentType: string, userId: string) {
  try {
    // Extract information from the document
    const extractedInfo = await extractDocumentInfo(documentUrl, documentType)

// Save the processed document to the database
    const { data, error } = await supabaseServer
      .from("processed_documents")
      .insert({
        user_id: userId,
        document_url: documentUrl,
        document_type: documentType,
        extracted_data: extractedInfo,
      })
      .select()
      .single()

if (error) {
      throw new Error(`Error saving processed document: ${error.message}`)
    }

return {
      success: true,
      documentId: data.id,
      extractedInfo,
    }
  } catch (error) {
    console.error("Error processing document:", error)
    return { success: false, error: "Failed to process document" }
  }
}

export async function createShipmentFromDocument(documentId: string, extractedInfo: any) {
  try {
    // This is a simplified implementation
    // In a real application, you would map the extracted fields to your database schema

// First, find or create the customer
    let customerId
    if (extractedInfo.shipper) {
      const customers = await executeQuery(`SELECT id FROM users WHERE name ILIKE $1 OR email ILIKE $1 LIMIT 1`, [
        `%${extractedInfo.shipper.name || ""}%`,
      ])

if (customers && customers.length > 0) {
        customerId = customers[0].id
      } else {
        // Create a new customer (simplified)
        const newCustomer = await executeQuery(
          `INSERT INTO users (name, email, password, role) 
           VALUES ($1, $2, $3, $4) RETURNING id`,
          [
            extractedInfo.shipper.name || "New Customer",
            extractedInfo.shipper.email || `customer-${Date.now()}@example.com`,
            "$2a$10$GQT/hZy1UnhkBMn.g5o9CONpWz4.YZ5i2TT.0FgtE/.1wWoJwJ5y6", // Dummy password
            "customer",
          ],
        )

customerId = newCustomer[0].id
      }
    } else {
      throw new Error("Shipper information not found in document")
    }

// Find or create origin location
    let originId
    if (extractedInfo.shipper && extractedInfo.shipper.address) {
      const locations = await executeQuery(`SELECT id FROM locations WHERE address ILIKE $1 LIMIT 1`, [
        `%${extractedInfo.shipper.address}%`,
      ])

if (locations && locations.length > 0) {
        originId = locations[0].id
      } else {
        // Create a new location (simplified)
        const newLocation = await executeQuery(
          `INSERT INTO locations (name, address, city, country) 
           VALUES ($1, $2, $3, $4) RETURNING id`,
          [
            extractedInfo.shipper.name || "Origin",
            extractedInfo.shipper.address || "Unknown",
            extractedInfo.shipper.city || "Unknown",
            extractedInfo.shipper.country || "Unknown",
          ],
        )

originId = newLocation[0].id
      }
    } else {
      throw new Error("Origin information not found in document")
    }

// Find or create destination location
    let destinationId
    if (extractedInfo.consignee && extractedInfo.consignee.address) {
      const locations = await executeQuery(`SELECT id FROM locations WHERE address ILIKE $1 LIMIT 1`, [
        `%${extractedInfo.consignee.address}%`,
      ])

if (locations && locations.length > 0) {
        destinationId = locations[0].id
      } else {
        // Create a new location (simplified)
        const newLocation = await executeQuery(
          `INSERT INTO locations (name, address, city, country) 
           VALUES ($1, $2, $3, $4) RETURNING id`,
          [
            extractedInfo.consignee.name || "Destination",
            extractedInfo.consignee.address || "Unknown",
            extractedInfo.consignee.city || "Unknown",
            extractedInfo.consignee.country || "Unknown",
          ],
        )

destinationId = newLocation[0].id
      }
    } else {
      throw new Error("Destination information not found in document")
    }

// Create the shipment
    const trackingNumber = "SHP-" + Date.now() + "-" + Math.floor(Math.random() * 1000)

const shipment = await executeQuery(
      `INSERT INTO shipments 
       (tracking_number, customer_id, origin_id, destination_id, status, 
        weight, volume, scheduled_pickup, scheduled_delivery) 
       VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9) 
       RETURNING *`,
      [
        trackingNumber,
        customerId,
        originId,
        destinationId,
        "pending",
        extractedInfo.weight || 0,
        extractedInfo.volume || 0,
        extractedInfo.shipmentDate ? new Date(extractedInfo.shipmentDate) : null,
        null, // scheduled_delivery
      ],
    )

// Update the processed document with the shipment ID
    await supabaseServer.from("processed_documents").update({ shipment_id: shipment[0].id }).eq("id", documentId)

return {
      success: true,
      shipment: shipment[0],
    }
  } catch (error) {
    console.error("Error creating shipment from document:", error)
    return { success: false, error: "Failed to create shipment from document" }
  }
}
[V0_FILE]typescriptreact:file="components/document-processor.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { processDocument, createShipmentFromDocument } from "@/app/actions/document-processing"
import { Loader2, FileText, CheckCircle2 } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { supabase } from "@/lib/supabase-client"

interface DocumentProcessorProps {
  userId: string
  onShipmentCreated?: (shipmentId: string) => void
}

export function DocumentProcessor({ userId, onShipmentCreated }: DocumentProcessorProps) {
  const [isUploading, setIsUploading] = useState(false)
  const [isProcessing, setIsProcessing] = useState(false)
  const [isCreatingShipment, setIsCreatingShipment] = useState(false)
  const [documentUrl, setDocumentUrl] = useState("")
  const [documentType, setDocumentType] = useState("bill_of_lading")
  const [extractedInfo, setExtractedInfo] = useState<any>(null)
  const [documentId, setDocumentId] = useState<string | null>(null)
  const { toast } = useToast()

const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) return

setIsUploading(true)
    try {
      // Upload file to Supabase Storage
      const fileExt = file.name.split(".").pop()
      const fileName = `${Math.random().toString(36).substring(2, 15)}.${fileExt}`
      const filePath = `documents/${userId}/${fileName}`

const { data, error } = await supabase.storage.from("logistics-documents").upload(filePath, file)

if (error) {
        throw error
      }

// Get public URL
      const { data: urlData } = supabase.storage.from("logistics-documents").getPublicUrl(filePath)

setDocumentUrl(urlData.publicUrl)
      toast({
        title: "Upload successful",
        description: "Document has been uploaded successfully",
        variant: "default",
      })
    } catch (error) {
      console.error("Error uploading file:", error)
      toast({
        title: "Upload failed",
        description: "Failed to upload document",
        variant: "destructive",
      })
    } finally {
      setIsUploading(false)
    }
  }

const handleProcessDocument = async () => {
    if (!documentUrl || !documentType) return

setIsProcessing(true)
    try {
      const result = await processDocument(documentUrl, documentType, userId)

if (result.success) {
        setExtractedInfo(result.extractedInfo)
        setDocumentId(result.documentId)
        toast({
          title: "Processing complete",
          description: "Document has been processed successfully",
          variant: "default",
        })
      } else {
        toast({
          title: "Processing failed",
          description: result.error,
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Error processing document:", error)
      toast({
        title: "Processing failed",
        description: "An unexpected error occurred",
        variant: "destructive",
      })
    } finally {
      setIsProcessing(false)
    }
  }

const handleCreateShipment = async () => {
    if (!documentId || !extractedInfo) return

setIsCreatingShipment(true)
    try {
      const result = await createShipmentFromDocument(documentId, extractedInfo)

if (result.success) {
        toast({
          title: "Shipment created",
          description: "Shipment has been created successfully",
          variant: "default",
        })

if (onShipmentCreated) {
          onShipmentCreated(result.shipment.id)
        }
      } else {
        toast({
          title: "Shipment creation failed",
          description: result.error,
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Error creating shipment:", error)
      toast({
        title: "Shipment creation failed",
        description: "An unexpected error occurred",
        variant: "destructive",
      })
    } finally {
      setIsCreatingShipment(false)
    }
  }

return (
    <Card className="w-full">
      <CardHeader>
        <CardTitle>AI Document Processor</CardTitle>
        <CardDescription>Upload and process logistics documents to extract information</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="document-type">Document Type</Label>
            <Select value={documentType} onValueChange={setDocumentType}>
              <SelectTrigger>
                <SelectValue placeholder="Select document type" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="bill_of_lading">Bill of Lading</SelectItem>
                <SelectItem value="invoice">Invoice</SelectItem>
                <SelectItem value="delivery_receipt">Delivery Receipt</SelectItem>
                <SelectItem value="customs_declaration">Customs Declaration</SelectItem>
                <SelectItem value="other">Other</SelectItem>
              </SelectContent>
            </Select>
          </div>

<div className="space-y-2">
            <Label htmlFor="document-upload">Upload Document</Label>
            <div className="flex items-center gap-2">
              <Input
                id="document-upload"
                type="file"
                accept=".pdf,.doc,.docx,.txt,.csv"
                onChange={handleFileUpload}
                disabled={isUploading}
                className="flex-1"
              />
              {isUploading && <Loader2 className="h-4 w-4 animate-spin" />}
            </div>
            {documentUrl && (
              <p className="text-xs text-muted-foreground flex items-center">
                <CheckCircle2 className="h-3 w-3 mr-1 text-green-500" />
                Document uploaded successfully
              </p>
            )}
          </div>

{documentUrl && (
            <Button onClick={handleProcessDocument} disabled={isProcessing || !documentUrl} className="w-full">
              {isProcessing ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Processing...
                </>
              ) : (
                <>
                  <FileText className="mr-2 h-4 w-4" />
                  Process Document
                </>
              )}
            </Button>
          )}

{extractedInfo && (
            <div className="mt-6 space-y-4">
              <h3 className="font-medium">Extracted Information</h3>
              <div className="p-4 bg-muted rounded-lg">
                <pre className="text-xs overflow-auto whitespace-pre-wrap">
                  {JSON.stringify(extractedInfo, null, 2)}
                </pre>
              </div>

<Button onClick={handleCreateShipment} disabled={isCreatingShipment} className="w-full">
                {isCreatingShipment ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    Creating Shipment...
                  </>
                ) : (
                  <>Create Shipment from Document</>
                )}
              </Button>
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]sql:file="supabase-setup.sql" type="code" isMerged="true"
-- Create conversations table
CREATE TABLE IF NOT EXISTS conversations (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  user_id VARCHAR(255) NOT NULL,
  title VARCHAR(255) NOT NULL,
  context JSONB,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

-- Create chat_messages table
CREATE TABLE IF NOT EXISTS chat_messages (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  conversation_id UUID NOT NULL REFERENCES conversations(id) ON DELETE CASCADE,
  sender_id VARCHAR(255) NOT NULL,
  sender_type VARCHAR(50) NOT NULL,
  content TEXT NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

-- Create processed_documents table
CREATE TABLE IF NOT EXISTS processed_documents (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  user_id VARCHAR(255) NOT NULL,
  document_url TEXT NOT NULL,
  document_type VARCHAR(100) NOT NULL,
  extracted_data JSONB NOT NULL,
  shipment_id INTEGER,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

-- Create storage bucket for documents
INSERT INTO storage.buckets (id, name, public) 
VALUES ('logistics-documents', 'logistics-documents', true);

-- Set up storage policies
CREATE POLICY "Allow public read access" 
ON storage.objects FOR SELECT 
USING (bucket_id = 'logistics-documents');

CREATE POLICY "Allow authenticated users to upload documents" 
ON storage.objects FOR INSERT 
TO authenticated 
USING (bucket_id = 'logistics-documents');

-- Enable realtime for chat messages
ALTER TABLE chat_messages REPLICA IDENTITY FULL;
ALTER PUBLICATION supabase_realtime ADD TABLE chat_messages;
[V0_FILE]typescriptreact:file="lib/supabase-client.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { createClient } from "@supabase/supabase-js"

// Create a single supabase client for interacting with your database
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!

export const supabase = createClient(supabaseUrl, supabaseAnonKey)
[V0_FILE]typescriptreact:file="lib/db.ts" isEdit="true" isMerged="true"
import { neon } from "@neondatabase/serverless"

// Create a SQL query executor using the Neon serverless driver
const sql = neon(process.env.DATABASE_URL!)

export async function executeQuery(query: string, params: any[] = []) {
  try {
    const result = await sql(query, params)
    return result
  } catch (error) {
    console.error("Database query error:", error)
    throw error
  }
}
[V0_FILE]typescriptreact:file="app/dashboard/ai-tools/layout.tsx" isMerged="true"
import type { ReactNode } from "react"
import DashboardSidebar from "@/components/dashboard-sidebar"
import type { Metadata } from "next"

export const metadata: Metadata = {
  title: "AI Tools - MarocTransit",
  description: "AI-powered tools for logistics optimization",
}

export default function AIToolsLayout({ children }: { children: ReactNode }) {
  return (
    <div className="flex min-h-screen bg-gray-100 dark:bg-gray-900">
      <DashboardSidebar />
      <div className="flex-1 ml-[70px] lg:ml-[240px]">{children}</div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/actions/shipments.ts" isEdit="true" isMerged="true"
"use server"

import { executeQuery } from "@/lib/db"

export async function getShipments() {
  try {
    const query = `
      SELECT s.*, 
             o.name as origin_name, 
             d.name as destination_name,
             c.name as customer_name
      FROM shipments s
      JOIN locations o ON s.origin_id = o.id
      JOIN locations d ON s.destination_id = d.id
      JOIN users c ON s.customer_id = c.id
      ORDER BY s.created_at DESC
    `

const shipments = await executeQuery(query)

return { success: true, shipments }
  } catch (error) {
    console.error("Error fetching shipments:", error)
    return { success: false, error: "Failed to fetch shipments" }
  }
}

export async function getShipmentById(id: string) {
  try {
    const query = `
      SELECT s.*, 
             o.name as origin_name, o.address as origin_address, o.city as origin_city, o.state as origin_state, o.country as origin_country,
             d.name as destination_name, d.address as destination_address, d.city as destination_city, d.state as destination_state, d.country as destination_country,
             c.name as customer_name, c.email as customer_email
      FROM shipments s
      JOIN locations o ON s.origin_id = o.id
      JOIN locations d ON s.destination_id = d.id
      JOIN users c ON s.customer_id = c.id
      WHERE s.id = $1
    `

const shipments = await executeQuery(query, [id])

if (!shipments || shipments.length === 0) {
      return { success: false, error: "Shipment not found" }
    }

return { success: true, shipment: shipments[0] }
  } catch (error) {
    console.error("Error fetching shipment:", error)
    return { success: false, error: "Failed to fetch shipment" }
  }
}

export async function createShipment(data: {
  customer_id: string
  origin_id: string
  destination_id: string
  weight: number
  volume: number
  priority: string
  scheduled_pickup: string
  scheduled_delivery: string
}) {
  try {
    const trackingNumber = "SHP-" + Date.now() + "-" + Math.floor(Math.random() * 1000)

const query = `
      INSERT INTO shipments 
      (tracking_number, customer_id, origin_id, destination_id, status, priority, weight, volume, scheduled_pickup, scheduled_delivery)
      VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10)
      RETURNING *
    `

const result = await executeQuery(query, [
      trackingNumber,
      data.customer_id,
      data.origin_id,
      data.destination_id,
      "pending",
      data.priority,
      data.weight,
      data.volume,
      data.scheduled_pickup,
      data.scheduled_delivery,
    ])

return { success: true, shipment: result[0] }
  } catch (error) {
    console.error("Error creating shipment:", error)
    return { success: false, error: "Failed to create shipment" }
  }
}

export async function updateShipmentStatus(id: string, status: string) {
  try {
    const query = `
      UPDATE shipments
      SET status = $1, updated_at = CURRENT_TIMESTAMP
      WHERE id = $2
      RETURNING *
    `

const result = await executeQuery(query, [status, id])

if (!result || result.length === 0) {
      return { success: false, error: "Shipment not found" }
    }

return { success: true, shipment: result[0] }
  } catch (error) {
    console.error("Error updating shipment status:", error)
    return { success: false, error: "Failed to update shipment status" }
  }
}
[V0_FILE]typescriptreact:file="app/dashboard/team/layout.tsx" isMerged="true"
import type { ReactNode } from "react"
import DashboardSidebar from "@/components/dashboard-sidebar"
import type { Metadata } from "next"

export const metadata: Metadata = {
  title: "Team Management - MarocTransit",
  description: "Manage your logistics team members and roles",
}

export default function TeamLayout({ children }: { children: ReactNode }) {
  return (
    <div className="flex min-h-screen bg-gray-100 dark:bg-gray-900">
      <DashboardSidebar />
      <div className="flex-1 ml-[70px] lg:ml-[240px]">{children}</div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/team/[id]/page.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { getTeamMemberById } from "@/app/actions/team"
import { notFound } from "next/navigation"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import {
  Mail,
  Phone,
  MapPin,
  Calendar,
  Star,
  Truck,
  Package,
  Clock,
  Shield,
  Edit,
  UserX,
  ArrowLeft,
} from "lucide-react"
import Link from "next/link"
import TeamMemberPerformance from "@/components/team/team-member-performance"
import TeamMemberActivity from "@/components/team/team-member-activity"

export default async function TeamMemberPage({ params }: { params: { id: string } }) {
  const { id } = params
  const result = await getTeamMemberById(id)

if (!result.success) {
    notFound()
  }

const member = result.member

return (
    <div className="container mx-auto py-6 space-y-8">
      <div className="flex items-center mb-6">
        <Link href="/dashboard/team">
          <Button variant="ghost" size="sm">
            <ArrowLeft className="h-4 w-4 mr-2" />
            Back to Team
          </Button>
        </Link>
      </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Card className="md:col-span-1">
          <CardHeader className="text-center">
            <Avatar className="h-24 w-24 mx-auto">
              <AvatarImage src={member.avatar_url || ""} alt={member.name} />
              <AvatarFallback>{member.name.substring(0, 2).toUpperCase()}</AvatarFallback>
            </Avatar>
            <CardTitle className="mt-4">{member.name}</CardTitle>
            <div className="flex justify-center">
              <Badge variant={member.role === "admin" ? "default" : "secondary"}>{member.role}</Badge>
              {member.status === "active" ? (
                <Badge variant="outline" className="ml-2 bg-green-50 text-green-700 border-green-200">
                  Active
                </Badge>
              ) : (
                <Badge variant="outline" className="ml-2 bg-yellow-50 text-yellow-700 border-yellow-200">
                  Inactive
                </Badge>
              )}
            </div>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="flex items-center">
                <Mail className="h-4 w-4 mr-3 text-muted-foreground" />
                <span>{member.email}</span>
              </div>
              {member.phone && (
                <div className="flex items-center">
                  <Phone className="h-4 w-4 mr-3 text-muted-foreground" />
                  <span>{member.phone}</span>
                </div>
              )}
              {member.location && (
                <div className="flex items-center">
                  <MapPin className="h-4 w-4 mr-3 text-muted-foreground" />
                  <span>{member.location}</span>
                </div>
              )}
              <div className="flex items-center">
                <Calendar className="h-4 w-4 mr-3 text-muted-foreground" />
                <span>Joined {new Date(member.created_at).toLocaleDateString()}</span>
              </div>
              {member.role === "driver" && member.rating && (
                <div className="flex items-center">
                  <Star className="h-4 w-4 mr-3 text-yellow-500" />
                  <span>
                    {member.rating} / 5 ({member.rating_count} ratings)
                  </span>
                </div>
              )}
            </div>

<div className="flex space-x-2 mt-6">
              <Button className="flex-1">
                <Edit className="h-4 w-4 mr-2" />
                Edit
              </Button>
              <Button variant="destructive" className="flex-1">
                <UserX className="h-4 w-4 mr-2" />
                Deactivate
              </Button>
            </div>
          </CardContent>
        </Card>

<div className="md:col-span-2 space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Performance Metrics</CardTitle>
              <CardDescription>Key performance indicators for this team member</CardDescription>
            </CardHeader>
            <CardContent>
              <TeamMemberPerformance memberId={id} />
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Recent Activity</CardTitle>
              <CardDescription>Latest actions and events</CardDescription>
            </CardHeader>
            <CardContent>
              <TeamMemberActivity memberId={id} />
            </CardContent>
          </Card>

{member.role === "driver" && (
            <Card>
              <CardHeader>
                <CardTitle>Driver Statistics</CardTitle>
                <CardDescription>Performance and delivery metrics</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                  <div className="bg-muted p-4 rounded-lg text-center">
                    <Truck className="h-5 w-5 mx-auto mb-2 text-blue-500" />
                    <p className="text-sm text-muted-foreground">Total Deliveries</p>
                    <p className="text-2xl font-bold">{member.stats?.total_deliveries || 0}</p>
                  </div>
                  <div className="bg-muted p-4 rounded-lg text-center">
                    <Package className="h-5 w-5 mx-auto mb-2 text-green-500" />
                    <p className="text-sm text-muted-foreground">On-Time Rate</p>
                    <p className="text-2xl font-bold">{member.stats?.on_time_rate || "0%"}</p>
                  </div>
                  <div className="bg-muted p-4 rounded-lg text-center">
                    <Clock className="h-5 w-5 mx-auto mb-2 text-yellow-500" />
                    <p className="text-sm text-muted-foreground">Avg. Delivery Time</p>
                    <p className="text-2xl font-bold">{member.stats?.avg_delivery_time || "0h"}</p>
                  </div>
                  <div className="bg-muted p-4 rounded-lg text-center">
                    <Shield className="h-5 w-5 mx-auto mb-2 text-red-500" />
                    <p className="text-sm text-muted-foreground">Safety Score</p>
                    <p className="text-2xl font-bold">{member.stats?.safety_score || "0"}</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/documents/layout.tsx" isMerged="true"
import type { ReactNode } from "react"
import DashboardSidebar from "@/components/dashboard-sidebar"
import type { Metadata } from "next"

export const metadata: Metadata = {
  title: "Documents - MarocTransit",
  description: "Manage your logistics documents and files",
}

export default function DocumentsLayout({ children }: { children: ReactNode }) {
  return (
    <div className="flex min-h-screen bg-gray-100 dark:bg-gray-900">
      <DashboardSidebar />
      <div className="flex-1 ml-[70px] lg:ml-[240px]">{children}</div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/documents/page.tsx" isMerged="true"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { getDocuments } from "@/app/actions/documents"
import { FileText, Filter, Grid, List } from "lucide-react"
import Link from "next/link"
import DocumentList from "@/components/documents/document-list"
import DocumentGrid from "@/components/documents/document-grid"
import DocumentStats from "@/components/documents/document-stats"
import DocumentUploadButton from "@/components/documents/document-upload-button"

export default async function DocumentsPage() {
  const documentsResult = await getDocuments()
  const documents = documentsResult.success ? documentsResult.documents : []

return (
    <div className="container mx-auto py-6 space-y-8">
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-3xl font-bold mb-2">Documents</h1>
          <p className="text-muted-foreground">Manage your logistics documents and files</p>
        </div>
        <div className="flex space-x-2">
          <DocumentUploadButton />
          <Link href="/dashboard/documents/ai-process">
            <Button>
              <FileText className="h-4 w-4 mr-2" />
              AI Process
            </Button>
          </Link>
        </div>
      </div>

<Tabs defaultValue="all">
        <div className="flex justify-between items-center mb-4">
          <TabsList>
            <TabsTrigger value="all">All Documents</TabsTrigger>
            <TabsTrigger value="bills">Bills of Lading</TabsTrigger>
            <TabsTrigger value="invoices">Invoices</TabsTrigger>
            <TabsTrigger value="customs">Customs</TabsTrigger>
            <TabsTrigger value="receipts">Receipts</TabsTrigger>
          </TabsList>

<div className="flex items-center space-x-2">
            <Button variant="outline" size="sm">
              <Filter className="h-4 w-4 mr-2" />
              Filter
            </Button>
            <Tabs defaultValue="grid" className="w-auto">
              <TabsList>
                <TabsTrigger value="grid" className="px-2">
                  <Grid className="h-4 w-4" />
                </TabsTrigger>
                <TabsTrigger value="list" className="px-2">
                  <List className="h-4 w-4" />
                </TabsTrigger>
              </TabsList>
              <TabsContent value="grid">
                <DocumentGrid documents={documents} />
              </TabsContent>
              <TabsContent value="list">
                <DocumentList documents={documents} />
              </TabsContent>
            </Tabs>
          </div>
        </div>

<TabsContent value="bills">
          <DocumentGrid documents={documents.filter((doc) => doc.type === "bill_of_lading")} />
        </TabsContent>

<TabsContent value="invoices">
          <DocumentGrid documents={documents.filter((doc) => doc.type === "invoice")} />
        </TabsContent>

<TabsContent value="customs">
          <DocumentGrid documents={documents.filter((doc) => doc.type === "customs")} />
        </TabsContent>

<TabsContent value="receipts">
          <DocumentGrid documents={documents.filter((doc) => doc.type === "receipt")} />
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/documents/[id]/page.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { getDocumentById } from "@/app/actions/documents"
import { notFound } from "next/navigation"
import { Badge } from "@/components/ui/badge"
import { FileText, Download, Share2, Trash2, Tag, ArrowLeft, Printer, Eye, Package } from "lucide-react"
import Link from "next/link"
import DocumentViewer from "@/components/documents/document-viewer"
import DocumentMetadata from "@/components/documents/document-metadata"
import DocumentRelatedShipments from "@/components/documents/document-related-shipments"
import DocumentVersionHistory from "@/components/documents/document-version-history"

export default async function DocumentPage({ params }: { params: { id: string } }) {
  const { id } = params
  const result = await getDocumentById(id)

if (!result.success) {
    notFound()
  }

const document = result.document

return (
    <div className="container mx-auto py-6 space-y-8">
      <div className="flex items-center mb-6">
        <Link href="/dashboard/documents">
          <Button variant="ghost" size="sm">
            <ArrowLeft className="h-4 w-4 mr-2" />
            Back to Documents
          </Button>
        </Link>
      </div>

<div className="flex justify-between items-start">
        <div>
          <h1 className="text-3xl font-bold mb-2">{document.name}</h1>
          <div className="flex items-center space-x-2">
            <Badge variant="outline">{document.type.replace("_", " ")}</Badge>
            <span className="text-sm text-muted-foreground">
              Uploaded on {new Date(document.created_at).toLocaleDateString()}
            </span>
          </div>
        </div>
        <div className="flex space-x-2">
          <Button variant="outline" size="sm">
            <Eye className="h-4 w-4 mr-2" />
            Preview
          </Button>
          <Button variant="outline" size="sm">
            <Download className="h-4 w-4 mr-2" />
            Download
          </Button>
          <Button variant="outline" size="sm">
            <Share2 className="h-4 w-4 mr-2" />
            Share
          </Button>
          <Button variant="outline" size="sm">
            <Printer className="h-4 w-4 mr-2" />
            Print
          </Button>
          <Button variant="destructive" size="sm">
            <Trash2 className="h-4 w-4 mr-2" />
            Delete
          </Button>
        </div>
      </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="md:col-span-2 space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Document Preview</CardTitle>
            </CardHeader>
            <CardContent>
              <DocumentViewer document={document} />
            </CardContent>
          </Card>

{document.extracted_data && (
            <Card>
              <CardHeader>
                <CardTitle>Extracted Information</CardTitle>
                <CardDescription>Data extracted using AI</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="bg-muted p-4 rounded-lg">
                  <pre className="text-xs overflow-auto whitespace-pre-wrap">
                    {JSON.stringify(document.extracted_data, null, 2)}
                  </pre>
                </div>
              </CardContent>
            </Card>
          )}

<Card>
            <CardHeader>
              <CardTitle>Related Shipments</CardTitle>
              <CardDescription>Shipments associated with this document</CardDescription>
            </CardHeader>
            <CardContent>
              <DocumentRelatedShipments documentId={id} />
            </CardContent>
          </Card>
        </div>

<div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Document Information</CardTitle>
            </CardHeader>
            <CardContent>
              <DocumentMetadata document={document} />
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Version History</CardTitle>
            </CardHeader>
            <CardContent>
              <DocumentVersionHistory documentId={id} />
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Actions</CardTitle>
            </CardHeader>
            <CardContent className="space-y-2">
              <Button className="w-full justify-start">
                <Package className="h-4 w-4 mr-2" />
                Create Shipment from Document
              </Button>
              <Button className="w-full justify-start" variant="outline">
                <FileText className="h-4 w-4 mr-2" />
                Process with AI
              </Button>
              <Button className="w-full justify-start" variant="outline">
                <Tag className="h-4 w-4 mr-2" />
                Add Tags
              </Button>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/documents/ai-process/page.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ArrowLeft } from "lucide-react"
import Link from "next/link"
import { DocumentProcessor } from "@/components/document-processor"

export default function AIProcessDocumentPage() {
  // In a real application, you would get the user ID from the session
  const userId = "1" // Admin user ID from our seed data

<div>
        <h1 className="text-3xl font-bold mb-2">AI Document Processing</h1>
        <p className="text-muted-foreground">Upload and process logistics documents using AI to extract information</p>
      </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="md:col-span-2">
          <Card>
            <CardHeader>
              <CardTitle>Process Document</CardTitle>
              <CardDescription>Upload a document to extract information using AI</CardDescription>
            </CardHeader>
            <CardContent>
              <DocumentProcessor userId={userId} />
            </CardContent>
          </Card>
        </div>

<div>
          <Card>
            <CardHeader>
              <CardTitle>Supported Document Types</CardTitle>
            </CardHeader>
            <CardContent>
              <ul className="space-y-2">
                <li className="flex items-center">
                  <div className="w-2 h-2 rounded-full bg-blue-500 mr-2"></div>
                  <span>Bills of Lading</span>
                </li>
                <li className="flex items-center">
                  <div className="w-2 h-2 rounded-full bg-green-500 mr-2"></div>
                  <span>Commercial Invoices</span>
                </li>
                <li className="flex items-center">
                  <div className="w-2 h-2 rounded-full bg-yellow-500 mr-2"></div>
                  <span>Customs Declarations</span>
                </li>
                <li className="flex items-center">
                  <div className="w-2 h-2 rounded-full bg-purple-500 mr-2"></div>
                  <span>Delivery Receipts</span>
                </li>
                <li className="flex items-center">
                  <div className="w-2 h-2 rounded-full bg-red-500 mr-2"></div>
                  <span>Packing Lists</span>
                </li>
                <li className="flex items-center">
                  <div className="w-2 h-2 rounded-full bg-orange-500 mr-2"></div>
                  <span>Certificates of Origin</span>
                </li>
              </ul>
            </CardContent>
          </Card>

<Card className="mt-6">
            <CardHeader>
              <CardTitle>Processing Features</CardTitle>
            </CardHeader>
            <CardContent>
              <ul className="space-y-2">
                <li className="flex items-center">
                  <div className="w-2 h-2 rounded-full bg-blue-500 mr-2"></div>
                  <span>Text extraction and recognition</span>
                </li>
                <li className="flex items-center">
                  <div className="w-2 h-2 rounded-full bg-green-500 mr-2"></div>
                  <span>Structured data extraction</span>
                </li>
                <li className="flex items-center">
                  <div className="w-2 h-2 rounded-full bg-yellow-500 mr-2"></div>
                  <span>Automatic shipment creation</span>
                </li>
                <li className="flex items-center">
                  <div className="w-2 h-2 rounded-full bg-purple-500 mr-2"></div>
                  <span>Multi-language support</span>
                </li>
                <li className="flex items-center">
                  <div className="w-2 h-2 rounded-full bg-red-500 mr-2"></div>
                  <span>Document validation</span>
                </li>
              </ul>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/documents/document-stats.tsx" isMerged="true"
import { Card, CardContent } from "@/components/ui/card"
import { FileText, FileCheck, Clock, FileWarning } from "lucide-react"

interface Document {
  id: string
  name: string
  type: string
  status: string
  created_at: string
  [key: string]: any
}

interface DocumentStatsProps {
  documents: Document[]
}

export default function DocumentStats({ documents }: DocumentStatsProps) {
  const totalDocuments = documents.length
  const processedDocuments = documents.filter((doc) => doc.status === "processed").length
  const pendingDocuments = documents.filter((doc) => doc.status === "pending").length
  const errorDocuments = documents.filter((doc) => doc.status === "error").length

const billsOfLading = documents.filter((doc) => doc.type === "bill_of_lading").length
  const invoices = documents.filter((doc) => doc.type === "invoice").length
  const customs = documents.filter((doc) => doc.type === "customs").length
  const receipts = documents.filter((doc) => doc.type === "receipt").length

return (
    <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
      <Card>
        <CardContent className="pt-6">
          <div className="flex items-center">
            <div className="p-2 rounded-full bg-blue-100 dark:bg-blue-900">
              <FileText className="h-6 w-6 text-blue-600 dark:text-blue-300" />
            </div>
            <div className="ml-4">
              <p className="text-sm font-medium text-muted-foreground">Total Documents</p>
              <p className="text-2xl font-bold">{totalDocuments}</p>
            </div>
          </div>
        </CardContent>
      </Card>

<Card>
        <CardContent className="pt-6">
          <div className="flex items-center">
            <div className="p-2 rounded-full bg-green-100 dark:bg-green-900">
              <FileCheck className="h-6 w-6 text-green-600 dark:text-green-300" />
            </div>
            <div className="ml-4">
              <p className="text-sm font-medium text-muted-foreground">Processed</p>
              <p className="text-2xl font-bold">{processedDocuments}</p>
            </div>
          </div>
        </CardContent>
      </Card>

<Card>
        <CardContent className="pt-6">
          <div className="flex items-center">
            <div className="p-2 rounded-full bg-yellow-100 dark:bg-yellow-900">
              <Clock className="h-6 w-6 text-yellow-600 dark:text-yellow-300" />
            </div>
            <div className="ml-4">
              <p className="text-sm font-medium text-muted-foreground">Pending</p>
              <p className="text-2xl font-bold">{pendingDocuments}</p>
            </div>
          </div>
        </CardContent>
      </Card>

<Card>
        <CardContent className="pt-6">
          <div className="flex items-center">
            <div className="p-2 rounded-full bg-red-100 dark:bg-red-900">
              <FileWarning className="h-6 w-6 text-red-600 dark:text-red-300" />
            </div>
            <div className="ml-4">
              <p className="text-sm font-medium text-muted-foreground">Errors</p>
              <p className="text-2xl font-bold">{errorDocuments}</p>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/documents/document-grid.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { MoreHorizontal, Search, FileText, FileCheck, Clock, FileWarning, Download, Eye } from "lucide-react"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import Link from "next/link"

interface Document {
  id: string
  name: string
  type: string
  status: string
  created_at: string
  [key: string]: any
}

interface DocumentGridProps {
  documents: Document[]
}

export default function DocumentGrid({ documents }: DocumentGridProps) {
  const [searchQuery, setSearchQuery] = useState("")

const filteredDocuments = documents.filter(
    (doc) =>
      doc.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      doc.type.toLowerCase().includes(searchQuery.toLowerCase()),
  )

const getDocumentIcon = (type: string, status: string) => {
    if (status === "processed") return <FileCheck className="h-12 w-12 text-green-500" />
    if (status === "pending") return <Clock className="h-12 w-12 text-yellow-500" />
    if (status === "error") return <FileWarning className="h-12 w-12 text-red-500" />
    return <FileText className="h-12 w-12 text-blue-500" />
  }

const getDocumentTypeLabel = (type: string) => {
    switch (type) {
      case "bill_of_lading":
        return "Bill of Lading"
      case "invoice":
        return "Invoice"
      case "customs":
        return "Customs Declaration"
      case "receipt":
        return "Delivery Receipt"
      default:
        return type.replace("_", " ")
    }
  }

return (
    <div className="space-y-4">
      <div className="flex items-center">
        <div className="relative flex-1">
          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
          <Input
            type="search"
            placeholder="Search documents..."
            className="pl-8"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
        </div>
      </div>

{filteredDocuments.length === 0 ? (
        <div className="text-center py-10">
          <p className="text-muted-foreground">No documents found</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
          {filteredDocuments.map((doc) => (
            <Card key={doc.id} className="overflow-hidden">
              <CardContent className="p-0">
                <div className="p-4">
                  <div className="flex justify-between">
                    <div className="flex items-center space-x-2">
                      <Badge variant="outline">{getDocumentTypeLabel(doc.type)}</Badge>
                      {doc.status === "processed" && (
                        <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
                          Processed
                        </Badge>
                      )}
                      {doc.status === "pending" && (
                        <Badge variant="outline" className="bg-yellow-50 text-yellow-700 border-yellow-200">
                          Pending
                        </Badge>
                      )}
                      {doc.status === "error" && (
                        <Badge variant="outline" className="bg-red-50 text-red-700 border-red-200">
                          Error
                        </Badge>
                      )}
                    </div>
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon">
                          <MoreHorizontal className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuLabel>Actions</DropdownMenuLabel>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem>
                          <Eye className="h-4 w-4 mr-2" />
                          View
                        </DropdownMenuItem>
                        <DropdownMenuItem>
                          <Download className="h-4 w-4 mr-2" />
                          Download
                        </DropdownMenuItem>
                        <DropdownMenuItem>
                          <FileText className="h-4 w-4 mr-2" />
                          Process with AI
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </div>

<div className="flex justify-center my-4">{getDocumentIcon(doc.type, doc.status)}</div>

<div className="mt-3">
                    <Link href={`/dashboard/documents/${doc.id}`} className="hover:underline">
                      <h3 className="font-medium">{doc.name}</h3>
                    </Link>
                    <p className="text-sm text-muted-foreground">
                      Uploaded on {new Date(doc.created_at).toLocaleDateString()}
                    </p>
                  </div>

<div className="mt-3 flex space-x-2">
                    <Button variant="outline" size="sm" className="w-full">
                      <Eye className="h-4 w-4 mr-2" />
                      View
                    </Button>
                    <Button variant="outline" size="sm" className="w-full">
                      <Download className="h-4 w-4 mr-2" />
                      Download
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/documents/document-list.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { MoreHorizontal, Search, FileText, Download, Eye } from "lucide-react"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import Link from "next/link"

interface Document {
  id: string
  name: string
  type: string
  status: string
  created_at: string
  [key: string]: any
}

interface DocumentListProps {
  documents: Document[]
}

export default function DocumentList({ documents }: DocumentListProps) {
  const [searchQuery, setSearchQuery] = useState("")

const filteredDocuments = documents.filter(
    (doc) =>
      doc.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      doc.type.toLowerCase().includes(searchQuery.toLowerCase()),
  )

const getStatusBadge = (status: string) => {
    switch (status) {
      case "processed":
        return (
          <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
            Processed
          </Badge>
        )
      case "pending":
        return (
          <Badge variant="outline" className="bg-yellow-50 text-yellow-700 border-yellow-200">
            Pending
          </Badge>
        )
      case "error":
        return (
          <Badge variant="outline" className="bg-red-50 text-red-700 border-red-200">
            Error
          </Badge>
        )
      default:
        return <Badge variant="outline">{status}</Badge>
    }
  }

{filteredDocuments.length === 0 ? (
        <div className="text-center py-10">
          <p className="text-muted-foreground">No documents found</p>
        </div>
      ) : (
        <div className="border rounded-md">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Name</TableHead>
                <TableHead>Type</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Date</TableHead>
                <TableHead>Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredDocuments.map((doc) => (
                <TableRow key={doc.id}>
                  <TableCell>
                    <Link href={`/dashboard/documents/${doc.id}`} className="hover:underline">
                      {doc.name}
                    </Link>
                  </TableCell>
                  <TableCell>{getDocumentTypeLabel(doc.type)}</TableCell>
                  <TableCell>{getStatusBadge(doc.status)}</TableCell>
                  <TableCell>{new Date(doc.created_at).toLocaleDateString()}</TableCell>
                  <TableCell>
                    <div className="flex space-x-2">
                      <Button variant="ghost" size="icon">
                        <Eye className="h-4 w-4" />
                      </Button>
                      <Button variant="ghost" size="icon">
                        <Download className="h-4 w-4" />
                      </Button>
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <Button variant="ghost" size="icon">
                            <MoreHorizontal className="h-4 w-4" />
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                          <DropdownMenuLabel>Actions</DropdownMenuLabel>
                          <DropdownMenuSeparator />
                          <DropdownMenuItem>
                            <FileText className="h-4 w-4 mr-2" />
                            Process with AI
                          </DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/documents/document-upload-button.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { uploadDocument } from "@/app/actions/documents"
import { useToast } from "@/hooks/use-toast"
import { Loader2, Upload } from "lucide-react"
import { useRouter } from "next/navigation"

export default function DocumentUploadButton() {
  const [isOpen, setIsOpen] = useState(false)
  const [isUploading, setIsUploading] = useState(false)
  const [file, setFile] = useState<File | null>(null)
  const [documentType, setDocumentType] = useState("")
  const [documentName, setDocumentName] = useState("")
  const { toast } = useToast()
  const router = useRouter()

const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const selectedFile = e.target.files?.[0]
    if (selectedFile) {
      setFile(selectedFile)
      if (!documentName) {
        setDocumentName(selectedFile.name)
      }
    }
  }

const handleUpload = async () => {
    if (!file || !documentType) {
      toast({
        title: "Missing information",
        description: "Please select a file and document type",
        variant: "destructive",
      })
      return
    }

setIsUploading(true)
    try {
      const formData = new FormData()
      formData.append("file", file)
      formData.append("type", documentType)
      formData.append("name", documentName || file.name)

const result = await uploadDocument(formData)

if (result.success) {
        toast({
          title: "Upload successful",
          description: "Document has been uploaded successfully",
        })
        setIsOpen(false)
        router.refresh()
      } else {
        toast({
          title: "Upload failed",
          description: result.error || "Failed to upload document",
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Error uploading document:", error)
      toast({
        title: "Upload failed",
        description: "An unexpected error occurred",
        variant: "destructive",
      })
    } finally {
      setIsUploading(false)
    }
  }

return (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogTrigger asChild>
        <Button>
          <Upload className="h-4 w-4 mr-2" />
          Upload
        </Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Upload Document</DialogTitle>
          <DialogDescription>Upload a new document to the system</DialogDescription>
        </DialogHeader>

<div className="space-y-2">
            <Label htmlFor="document-name">Document Name</Label>
            <Input
              id="document-name"
              value={documentName}
              onChange={(e) => setDocumentName(e.target.value)}
              placeholder="Enter document name"
            />
          </div>

<div className="space-y-2">
            <Label htmlFor="document-type">Document Type</Label>
            <Select onValueChange={setDocumentType}>
              <SelectTrigger id="document-type">
                <SelectValue placeholder="Select document type" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="bill_of_lading">Bill of Lading</SelectItem>
                <SelectItem value="invoice">Invoice</SelectItem>
                <SelectItem value="customs">Customs Declaration</SelectItem>
                <SelectItem value="receipt">Delivery Receipt</SelectItem>
                <SelectItem value="packing_list">Packing List</SelectItem>
                <SelectItem value="certificate_of_origin">Certificate of Origin</SelectItem>
                <SelectItem value="other">Other</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>

<DialogFooter>
          <Button variant="outline" onClick={() => setIsOpen(false)}>
            Cancel
          </Button>
          <Button onClick={handleUpload} disabled={isUploading}>
            {isUploading ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Uploading...
              </>
            ) : (
              "Upload"
            )}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/documents/document-viewer.tsx" isFixed="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { ChevronLeft, ChevronRight, ZoomIn, ZoomOut, RotateCw, FileText } from "lucide-react"

interface Document {
  id: string
  name: string
  type: string
  status: string
  url: string
  [key: string]: any
}

interface DocumentViewerProps {
  document: Document
}

export default function DocumentViewer({ document }: DocumentViewerProps) {
  const [currentPage, setCurrentPage] = useState(1)
  const [zoom, setZoom] = useState(1)
  const [rotation, setRotation] = useState(0)

const totalPages = 1 // In a real app, you would get this from the document

const handlePrevPage = () => {
    if (currentPage > 1) {
      setCurrentPage(currentPage - 1)
    }
  }

const handleNextPage = () => {
    if (currentPage < totalPages) {
      setCurrentPage(currentPage + 1)
    }
  }

const handleZoomIn = () => {
    setZoom(Math.min(zoom + 0.1, 2))
  }

const handleZoomOut = () => {
    setZoom(Math.max(zoom - 0.1, 0.5))
  }

const handleRotate = () => {
    setRotation((rotation + 90) % 360)
  }

return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <div className="flex space-x-2">
          <Button variant="outline" size="sm" onClick={handleZoomOut}>
            <ZoomOut className="h-4 w-4" />
          </Button>
          <Button variant="outline" size="sm" onClick={handleZoomIn}>
            <ZoomIn className="h-4 w-4" />
          </Button>
          <Button variant="outline" size="sm" onClick={handleRotate}>
            <RotateCw className="h-4 w-4" />
          </Button>
        </div>
        <div className="flex items-center space-x-2">
          <Button variant="outline" size="sm" onClick={handlePrevPage} disabled={currentPage === 1}>
            <ChevronLeft className="h-4 w-4" />
          </Button>
          <span className="text-sm">
            Page {currentPage} of {totalPages}
          </span>
          <Button variant="outline" size="sm" onClick={handleNextPage} disabled={currentPage === totalPages}>
            <ChevronRight className="h-4 w-4" />
          </Button>
        </div>
      </div>

<div className="flex justify-center bg-muted rounded-lg p-4 min-h-[500px]">
        <div
          style={{
            transform: `scale(${zoom}) rotate(${rotation}deg)`,
            transformOrigin: "center",
            transition: "transform 0.2s ease",
          }}
        >
          {document.url ? (
            document.type.includes("pdf") ? (
              <iframe src={document.url} className="w-full h-[500px]" />
            ) : (
              <img
                src={document.url || "/placeholder.svg"}
                alt={document.name}
                className="max-h-[500px] object-contain"
              />
            )
          ) : (
            <div className="flex items-center justify-center h-[500px] w-[400px]">
              <FileText className="h-16 w-16 text-muted-foreground" />
              <p className="text-muted-foreground">Preview not available</p>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/documents/document-metadata.tsx" isMerged="true"
import { Calendar, User, FileText, Tag, Clock } from "lucide-react"

interface Document {
  id: string
  name: string
  type: string
  status: string
  created_at: string
  [key: string]: any
}

interface DocumentMetadataProps {
  document: Document
}

export default function DocumentMetadata({ document }: DocumentMetadataProps) {
  const getDocumentTypeLabel = (type: string) => {
    switch (type) {
      case "bill_of_lading":
        return "Bill of Lading"
      case "invoice":
        return "Invoice"
      case "customs":
        return "Customs Declaration"
      case "receipt":
        return "Delivery Receipt"
      default:
        return type.replace("_", " ")
    }
  }

return (
    <div className="space-y-4">
      <div className="flex items-center">
        <FileText className="h-4 w-4 mr-3 text-muted-foreground" />
        <div>
          <p className="text-sm text-muted-foreground">Document Type</p>
          <p>{getDocumentTypeLabel(document.type)}</p>
        </div>
      </div>

<div className="flex items-center">
        <Calendar className="h-4 w-4 mr-3 text-muted-foreground" />
        <div>
          <p className="text-sm text-muted-foreground">Upload Date</p>
          <p>{new Date(document.created_at).toLocaleDateString()}</p>
        </div>
      </div>

<div className="flex items-center">
        <User className="h-4 w-4 mr-3 text-muted-foreground" />
        <div>
          <p className="text-sm text-muted-foreground">Uploaded By</p>
          <p>{document.uploaded_by || "Admin User"}</p>
        </div>
      </div>

<div className="flex items-center">
        <Clock className="h-4 w-4 mr-3 text-muted-foreground" />
        <div>
          <p className="text-sm text-muted-foreground">Processing Status</p>
          <p className="capitalize">{document.status}</p>
        </div>
      </div>

{document.tags && document.tags.length > 0 && (
        <div className="flex items-center">
          <Tag className="h-4 w-4 mr-3 text-muted-foreground" />
          <div>
            <p className="text-sm text-muted-foreground">Tags</p>
            <div className="flex flex-wrap gap-1 mt-1">
              {document.tags.map((tag: string, index: number) => (
                <span key={index} className="px-2 py-1 bg-muted text-xs rounded-full">
                  {tag}
                </span>
              ))}
            </div>
          </div>
        </div>
      )}

{document.file_size && (
        <div className="flex items-center">
          <FileText className="h-4 w-4 mr-3 text-muted-foreground" />
          <div>
            <p className="text-sm text-muted-foreground">File Size</p>
            <p>{document.file_size}</p>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/documents/document-related-shipments.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { getRelatedShipments } from "@/app/actions/documents"
import { Loader2, Package, MapPin, ArrowRight, Calendar, Clock } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import Link from "next/link"

interface DocumentRelatedShipmentsProps {
  documentId: string
}

export default function DocumentRelatedShipments({ documentId }: DocumentRelatedShipmentsProps) {
  const [shipments, setShipments] = useState<any[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const fetchShipments = async () => {
      setLoading(true)
      try {
        const result = await getRelatedShipments(documentId)
        if (result.success) {
          setShipments(result.shipments)
        }
      } catch (error) {
        console.error("Error fetching related shipments:", error)
      } finally {
        setLoading(false)
      }
    }

fetchShipments()
  }, [documentId])

if (loading) {
    return (
      <div className="flex justify-center items-center py-8">
        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
      </div>
    )
  }

if (!shipments || shipments.length === 0) {
    return (
      <div className="text-center py-6">
        <p className="text-muted-foreground">No related shipments found</p>
        <Button variant="outline" className="mt-4">
          <Package className="h-4 w-4 mr-2" />
          Create Shipment from Document
        </Button>
      </div>
    )
  }

return (
    <div className="space-y-4">
      {shipments.map((shipment) => (
        <div key={shipment.id} className="border rounded-lg p-4">
          <div className="flex justify-between items-start">
            <div>
              <Link href={`/dashboard/shipments/${shipment.id}`} className="hover:underline">
                <h3 className="font-medium">Shipment #{shipment.tracking_number}</h3>
              </Link>
              <div className="flex items-center text-sm text-muted-foreground mt-1">
                <MapPin className="h-4 w-4 mr-1" />
                <span>{shipment.origin_name}</span>
                <ArrowRight className="h-4 w-4 mx-2" />
                <span>{shipment.destination_name}</span>
              </div>
            </div>
            <Badge
              variant="outline"
              className={
                shipment.status === "delivered"
                  ? "bg-green-50 text-green-700 border-green-200"
                  : shipment.status === "in_transit"
                    ? "bg-blue-50 text-blue-700 border-blue-200"
                    : "bg-yellow-50 text-yellow-700 border-yellow-200"
              }
            >
              {shipment.status.replace("_", " ")}
            </Badge>
          </div>

<div className="grid grid-cols-2 gap-4 mt-4">
            <div className="flex items-center">
              <Calendar className="h-4 w-4 mr-2 text-muted-foreground" />
              <div>
                <p className="text-xs text-muted-foreground">Scheduled Pickup</p>
                <p className="text-sm">
                  {shipment.scheduled_pickup
                    ? new Date(shipment.scheduled_pickup).toLocaleDateString()
                    : "Not scheduled"}
                </p>
              </div>
            </div>
            <div className="flex items-center">
              <Calendar className="h-4 w-4 mr-2 text-muted-foreground" />
              <div>
                <p className="text-xs text-muted-foreground">Scheduled Delivery</p>
                <p className="text-sm">
                  {shipment.scheduled_delivery
                    ? new Date(shipment.scheduled_delivery).toLocaleDateString()
                    : "Not scheduled"}
                </p>
              </div>
            </div>
          </div>

<div className="flex justify-end mt-4">
            <Button variant="outline" size="sm">
              <Clock className="h-4 w-4 mr-2" />
              Track Shipment
            </Button>
          </div>
        </div>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/documents/document-version-history.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { getDocumentVersionHistory } from "@/app/actions/documents"
import { Loader2, History, User, Calendar, ArrowDownToLine } from "lucide-react"
import { Button } from "@/components/ui/button"

interface DocumentVersionHistoryProps {
  documentId: string
}

export default function DocumentVersionHistory({ documentId }: DocumentVersionHistoryProps) {
  const [versions, setVersions] = useState<any[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const fetchVersions = async () => {
      setLoading(true)
      try {
        const result = await getDocumentVersionHistory(documentId)
        if (result.success) {
          setVersions(result.versions)
        }
      } catch (error) {
        console.error("Error fetching version history:", error)
      } finally {
        setLoading(false)
      }
    }

fetchVersions()
  }, [documentId])

if (loading) {
    return (
      <div className="flex justify-center items-center py-8">
        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
      </div>
    )
  }

if (!versions || versions.length === 0) {
    return (
      <div className="text-center py-6 text-muted-foreground">
        <p>No version history available</p>
      </div>
    )
  }

return (
    <div className="space-y-4">
      {versions.map((version) => (
        <div key={version.id} className="flex items-start space-x-4">
          <div className="bg-muted p-2 rounded-full">
            <History className="h-4 w-4" />
          </div>
          <div className="flex-1">
            <div className="flex justify-between items-start">
              <div>
                <p className="text-sm font-medium">Version {version.version_number}</p>
                <div className="flex items-center text-xs text-muted-foreground mt-1">
                  <User className="h-3 w-3 mr-1" />
                  <span>{version.created_by}</span>
                  <Calendar className="h-3 w-3 ml-2 mr-1" />
                  <span>{new Date(version.created_at).toLocaleString()}</span>
                </div>
              </div>
              <Button variant="ghost" size="sm">
                <ArrowDownToLine className="h-4 w-4 mr-1" />
                Download
              </Button>
            </div>
            {version.changes && <p className="text-sm mt-1">{version.changes}</p>}
          </div>
        </div>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/actions/documents.ts" isMerged="true"
"use server"

export async function getDocuments() {
  try {
    // For demo purposes, return mock document data
    const documents = [
      {
        id: "1",
        name: "Bill of Lading - Shipment #SHP-1234567890",
        type: "bill_of_lading",
        status: "processed",
        created_at: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(),
        uploaded_by: "Admin User",
        file_size: "1.2 MB",
        tags: ["important", "verified"],
      },
      {
        id: "2",
        name: "Commercial Invoice - Order #INV-5678",
        type: "invoice",
        status: "processed",
        created_at: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(),
        uploaded_by: "Admin User",
        file_size: "2.5 MB",
        tags: ["invoice", "paid"],
      },
      {
        id: "3",
        name: "Customs Declaration - Import #CD-9012",
        type: "customs",
        status: "pending",
        created_at: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
        uploaded_by: "Admin User",
        file_size: "1.8 MB",
        tags: ["customs", "pending"],
      },
      {
        id: "4",
        name: "Delivery Receipt - Shipment #SHP-0987654321",
        type: "receipt",
        status: "processed",
        created_at: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(),
        uploaded_by: "John Driver",
        file_size: "0.8 MB",
        tags: ["receipt", "delivered"],
      },
      {
        id: "5",
        name: "Packing List - Order #PL-3456",
        type: "packing_list",
        status: "error",
        created_at: new Date(Date.now() - 12 * 60 * 60 * 1000).toISOString(),
        uploaded_by: "Admin User",
        file_size: "1.1 MB",
        tags: ["error", "review"],
      },
    ]

return { success: true, documents }
  } catch (error) {
    console.error("Error fetching documents:", error)
    return { success: false, error: "Failed to fetch documents" }
  }
}

export async function getDocumentById(id: string) {
  try {
    // For demo purposes, return mock document data
    const documents = await getDocuments()
    const document = documents.success ? documents.documents.find((doc) => doc.id === id) : null

if (!document) {
      return { success: false, error: "Document not found" }
    }

// Add additional fields for the document detail view
    const documentWithDetails = {
      ...document,
      url: null, // In a real app, this would be the document URL
      extracted_data:
        document.status === "processed"
          ? {
              shipper: {
                name: "ABC Shipping Co.",
                address: "123 Shipping Lane, New York, NY 10001",
                contact: "John Smith",
                email: "john@abcshipping.com",
                phone: "+1 (555) 123-4567",
              },
              consignee: {
                name: "XYZ Receiving Inc.",
                address: "456 Receiving Blvd, Los Angeles, CA 90001",
                contact: "Jane Doe",
                email: "jane@xyzreceiving.com",
                phone: "+1 (555) 987-6543",
              },
              shipment: {
                id: "SHP-1234567890",
                date: "2023-10-15",
                items: [
                  {
                    description: "Electronics",
                    quantity: 10,
                    weight: "150 kg",
                    value: "$5,000",
                  },
                  {
                    description: "Furniture",
                    quantity: 5,
                    weight: "300 kg",
                    value: "$3,500",
                  },
                ],
                total_weight: "450 kg",
                total_value: "$8,500",
              },
            }
          : null,
    }

return { success: true, document: documentWithDetails }
  } catch (error) {
    console.error("Error fetching document:", error)
    return { success: false, error: "Failed to fetch document" }
  }
}

export async function getRelatedShipments(documentId: string) {
  try {
    // For demo purposes, return mock shipment data
    const shipments = [
      {
        id: "1",
        tracking_number: "SHP-1234567890",
        status: "in_transit",
        origin_name: "New York Warehouse",
        destination_name: "Los Angeles Distribution Center",
        scheduled_pickup: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
        scheduled_delivery: new Date(Date.now() + 3 * 24 * 60 * 60 * 1000).toISOString(),
      },
    ]

return { success: true, shipments }
  } catch (error) {
    console.error("Error fetching related shipments:", error)
    return { success: false, error: "Failed to fetch related shipments" }
  }
}

export async function getDocumentVersionHistory(documentId: string) {
  try {
    // For demo purposes, return mock version history
    const versions = [
      {
        id: "1",
        version_number: "1.0",
        created_by: "Admin User",
        created_at: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(),
        changes: "Initial upload",
      },
      {
        id: "2",
        version_number: "1.1",
        created_by: "Admin User",
        created_at: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(),
        changes: "Updated shipping details",
      },
      {
        id: "3",
        version_number: "1.2",
        created_by: "System",
        created_at: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
        changes: "Processed by AI",
      },
    ]

return { success: true, versions }
  } catch (error) {
    console.error("Error fetching version history:", error)
    return { success: false, error: "Failed to fetch version history" }
  }
}

export async function uploadDocument(formData: FormData) {
  try {
    // In a real application, you would:
    // 1. Upload the file to Supabase Storage
    // 2. Create a record in your documents table
    // 3. Process the document with AI if needed

// For demo purposes, we'll just return success
    return {
      success: true,
      message: "Document uploaded successfully",
      documentId: "new-doc-" + Date.now(),
    }
  } catch (error) {
    console.error("Error uploading document:", error)
    return { success: false, error: "Failed to upload document" }
  }
}

export async function processDocumentWithAI(documentId: string) {
  try {
    // In a real application, you would:
    // 1. Get the document from your database
    // 2. Process it with AI using the document-processor.ts
    // 3. Update the document record with the extracted data

// For demo purposes, we'll just return success
    return {
      success: true,
      message: "Document processed successfully",
      extractedData: {
        // Mock extracted data
        shipper: {
          name: "ABC Shipping Co.",
          address: "123 Shipping Lane, New York, NY 10001",
        },
        consignee: {
          name: "XYZ Receiving Inc.",
          address: "456 Receiving Blvd, Los Angeles, CA 90001",
        },
        shipment: {
          id: "SHP-1234567890",
          date: "2023-10-15",
        },
      },
    }
  } catch (error) {
    console.error("Error processing document:", error)
    return { success: false, error: "Failed to process document" }
  }
}

export async function createShipmentFromDocument(documentId: string) {
  try {
    // In a real application, you would:
    // 1. Get the document and its extracted data
    // 2. Create a shipment record using the extracted data
    // 3. Link the document to the shipment

// For demo purposes, we'll just return success
    return {
      success: true,
      message: "Shipment created successfully",
      shipmentId: "new-shipment-" + Date.now(),
    }
  } catch (error) {
    console.error("Error creating shipment:", error)
    return { success: false, error: "Failed to create shipment" }
  }
}
[V0_FILE]typescriptreact:file="components/main-navbar.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Menu, X, User, Settings, LogOut, Globe } from "lucide-react"
import { useAuth } from "@/lib/auth-context"
import { useTranslation } from "@/lib/translation-context"

export default function MainNavbar() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const pathname = usePathname()
  const { user, logout } = useAuth()
  const { language, setLanguage, t } = useTranslation()

// Only show on landing page and auth pages
  if (pathname?.startsWith("/dashboard")) {
    return null
  }

return (
    <header className="fixed top-0 left-0 right-0 z-50 bg-gray-900 border-b border-gray-800">
      <div className="container mx-auto px-4">
        <div className="flex h-16 items-center justify-between">
          <div className="flex items-center">
            <Link href="/" className="flex items-center">
              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-600">
                <span className="text-white font-bold text-lg">M</span>
              </div>
              <span className="ml-2 font-bold text-white text-xl">{t("app.name")}</span>
            </Link>
            <nav className="hidden md:ml-10 md:flex md:space-x-8">
              <Link href="/features" className="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">
                Features
              </Link>
              <Link href="/pricing" className="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">
                Pricing
              </Link>
              <Link href="/about" className="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">
                About
              </Link>
              <Link href="/contact" className="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">
                Contact
              </Link>
            </nav>
          </div>

<div className="flex items-center space-x-4">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="icon" className="text-gray-300 hover:text-white">
                  <Globe className="h-5 w-5" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuLabel>Language</DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuItem onClick={() => setLanguage("en")}>
                  <span className={language === "en" ? "font-bold" : ""}>English</span>
                </DropdownMenuItem>
                <DropdownMenuItem onClick={() => setLanguage("fr")}>
                  <span className={language === "fr" ? "font-bold" : ""}>Français</span>
                </DropdownMenuItem>
                <DropdownMenuItem onClick={() => setLanguage("ar")}>
                  <span className={language === "ar" ? "font-bold" : ""}>العربية</span>
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>

{user ? (
              <div className="hidden md:flex items-center">
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="ghost" className="text-gray-300 hover:text-white">
                      <User className="h-5 w-5 mr-2" />
                      {user.name}
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end">
                    <DropdownMenuLabel>My Account</DropdownMenuLabel>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem>
                      <Link href="/dashboard" className="flex w-full">
                        Dashboard
                      </Link>
                    </DropdownMenuItem>
                    <DropdownMenuItem>
                      <Link href="/profile" className="flex w-full">
                        Profile
                      </Link>
                    </DropdownMenuItem>
                    <DropdownMenuItem>
                      <Link href="/settings" className="flex w-full">
                        <Settings className="h-4 w-4 mr-2" />
                        Settings
                      </Link>
                    </DropdownMenuItem>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem onClick={logout}>
                      <LogOut className="h-4 w-4 mr-2" />
                      Logout
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </div>
            ) : (
              <div className="hidden md:flex items-center space-x-2">
                <Link href="/login">
                  <Button variant="ghost" className="text-gray-300 hover:text-white">
                    Log in
                  </Button>
                </Link>
                <Link href="/signup">
                  <Button className="bg-blue-600 hover:bg-blue-700">Sign up</Button>
                </Link>
              </div>
            )}

<div className="md:hidden">
              <Button
                variant="ghost"
                size="icon"
                onClick={() => setIsMenuOpen(!isMenuOpen)}
                className="text-gray-300 hover:text-white"
              >
                {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
              </Button>
            </div>
          </div>
        </div>
      </div>

{/* Mobile menu */}
      {isMenuOpen && (
        <div className="md:hidden bg-gray-900 border-b border-gray-800">
          <div className="container mx-auto px-4 py-4 space-y-2">
            <Link
              href="/features"
              className="block text-gray-300 hover:text-white px-3 py-2 text-base font-medium"
              onClick={() => setIsMenuOpen(false)}
            >
              Features
            </Link>
            <Link
              href="/pricing"
              className="block text-gray-300 hover:text-white px-3 py-2 text-base font-medium"
              onClick={() => setIsMenuOpen(false)}
            >
              Pricing
            </Link>
            <Link
              href="/about"
              className="block text-gray-300 hover:text-white px-3 py-2 text-base font-medium"
              onClick={() => setIsMenuOpen(false)}
            >
              About
            </Link>
            <Link
              href="/contact"
              className="block text-gray-300 hover:text-white px-3 py-2 text-base font-medium"
              onClick={() => setIsMenuOpen(false)}
            >
              Contact
            </Link>

<div className="border-t border-gray-800 pt-4 mt-4">
              {user ? (
                <div className="space-y-2">
                  <Link
                    href="/dashboard"
                    className="block text-gray-300 hover:text-white px-3 py-2 text-base font-medium"
                    onClick={() => setIsMenuOpen(false)}
                  >
                    Dashboard
                  </Link>
                  <Link
                    href="/profile"
                    className="block text-gray-300 hover:text-white px-3 py-2 text-base font-medium"
                    onClick={() => setIsMenuOpen(false)}
                  >
                    Profile
                  </Link>
                  <Link
                    href="/settings"
                    className="block text-gray-300 hover:text-white px-3 py-2 text-base font-medium"
                    onClick={() => setIsMenuOpen(false)}
                  >
                    Settings
                  </Link>
                  <Button
                    variant="ghost"
                    className="w-full justify-start text-gray-300 hover:text-white px-3 py-2 text-base font-medium"
                    onClick={() => {
                      logout()
                      setIsMenuOpen(false)
                    }}
                  >
                    <LogOut className="h-5 w-5 mr-2" />
                    Logout
                  </Button>
                </div>
              ) : (
                <div className="space-y-2">
                  <Link
                    href="/login"
                    className="block text-gray-300 hover:text-white px-3 py-2 text-base font-medium"
                    onClick={() => setIsMenuOpen(false)}
                  >
                    Log in
                  </Link>
                  <Link href="/signup" onClick={() => setIsMenuOpen(false)}>
                    <Button className="w-full bg-blue-600 hover:bg-blue-700">Sign up</Button>
                  </Link>
                </div>
              )}
            </div>
          </div>
        </div>
      )}
    </header>
  )
}
[V0_FILE]typescriptreact:file="app/api-docs/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
import type { Metadata } from "next"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"

export const metadata: Metadata = {
  title: "API Documentation - MarocTransit",
  description: "API documentation for MarocTransit logistics platform",
}

export default function ApiDocsPage() {
  return (
    <div className="container mx-auto py-20 space-y-8">
      <div>
        <h1 className="text-4xl font-bold mb-2">API Documentation</h1>
        <p className="text-xl text-muted-foreground">
          Integrate with MarocTransit's logistics platform using our RESTful API
        </p>
      </div>

<Tabs defaultValue="overview">
        <TabsList className="mb-8">
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="authentication">Authentication</TabsTrigger>
          <TabsTrigger value="shipments">Shipments</TabsTrigger>
          <TabsTrigger value="tracking">Tracking</TabsTrigger>
          <TabsTrigger value="documents">Documents</TabsTrigger>
          <TabsTrigger value="ai">AI Services</TabsTrigger>
        </TabsList>

<TabsContent value="overview">
          <Card>
            <CardHeader>
              <CardTitle>API Overview</CardTitle>
              <CardDescription>
                MarocTransit provides a RESTful API that allows you to integrate our logistics services into your
                applications.
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <h3 className="text-lg font-medium mb-2">Base URL</h3>
                <code className="bg-muted p-2 rounded-md block">https://api.maroctranzit.com/v1</code>
              </div>

<div>
                <h3 className="text-lg font-medium mb-2">Response Format</h3>
                <p>All API responses are returned in JSON format with the following structure:</p>
                <pre className="bg-muted p-4 rounded-md overflow-auto mt-2">
                  {`{
  "success": true,
  "data": { ... },
  "meta": { ... }
}`}
                </pre>
              </div>

<div>
                <h3 className="text-lg font-medium mb-2">Error Handling</h3>
                <p>When an error occurs, the API will return a JSON response with the following structure:</p>
                <pre className="bg-muted p-4 rounded-md overflow-auto mt-2">
                  {`{
  "success": false,
  "error": {
    "code": "error_code",
    "message": "Error message",
    "details": { ... }
  }
}`}
                </pre>
              </div>

<div>
                <h3 className="text-lg font-medium mb-2">Rate Limiting</h3>
                <p>
                  The API is rate limited to 100 requests per minute per API key. If you exceed this limit, you will
                  receive a 429 Too Many Requests response.
                </p>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="authentication">
          <Card>
            <CardHeader>
              <CardTitle>Authentication</CardTitle>
              <CardDescription>
                MarocTransit API uses API keys for authentication. You can generate an API key in your dashboard.
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <h3 className="text-lg font-medium mb-2">API Keys</h3>
                <p>
                  To authenticate with the API, include your API key in the Authorization header of your requests:
                </p>
                <pre className="bg-muted p-4 rounded-md overflow-auto mt-2">
                  {`Authorization: Bearer YOUR_API_KEY`}
                </pre>
              </div>

<div>
                <h3 className="text-lg font-medium mb-2">Example Request</h3>
                <pre className="bg-muted p-4 rounded-md overflow-auto mt-2">
                  {`curl -X GET \\
  https://api.maroctranzit.com/v1/shipments \\
  -H "Authorization: Bearer YOUR_API_KEY"`}
                </pre>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="shipments">
          <Card>
            <CardHeader>
              <CardTitle>Shipments API</CardTitle>
              <CardDescription>
                Create, retrieve, update, and delete shipments in the MarocTransit platform.
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div>
                <div className="flex items-center space-x-2 mb-4">
                  <Badge className="bg-green-600">GET</Badge>
                  <code>/shipments</code>
                </div>
                <p className="mb-2">List all shipments</p>
                <h4 className="text-sm font-medium mb-1">Query Parameters</h4>
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Parameter</TableHead>
                      <TableHead>Type</TableHead>
                      <TableHead>Description</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    <TableRow>
                      <TableCell>page</TableCell>
                      <TableCell>integer</TableCell>
                      <TableCell>Page number (default: 1)</TableCell>
                    </TableRow>
                    <TableRow>
                      <TableCell>limit</TableCell>
                      <TableCell>integer</TableCell>
                      <TableCell>Number of results per page (default: 20, max: 100)</TableCell>
                    </TableRow>
                    <TableRow>
                      <TableCell>status</TableCell>
                      <TableCell>string</TableCell>
                      <TableCell>Filter by status (pending, in_transit, delivered, etc.)</TableCell>
                    </TableRow>
                  </TableBody>
                </Table>
              </div>

<div>
                <div className="flex items-center space-x-2 mb-4">
                  <Badge className="bg-green-600">GET</Badge>
                  <code>/shipments/{"{id}"}</code>
                </div>
                <p className="mb-2">Get a specific shipment by ID</p>
                <h4 className="text-sm font-medium mb-1">Path Parameters</h4>
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Parameter</TableHead>
                      <TableHead>Type</TableHead>
                      <TableHead>Description</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    <TableRow>
                      <TableCell>id</TableCell>
                      <TableCell>string</TableCell>
                      <TableCell>Shipment ID</TableCell>
                    </TableRow>
                  </TableBody>
                </Table>
              </div>

<div>
                <div className="flex items-center space-x-2 mb-4">
                  <Badge className="bg-blue-600">POST</Badge>
                  <code>/shipments</code>
                </div>
                <p className="mb-2">Create a new shipment</p>
                <h4 className="text-sm font-medium mb-1">Request Body</h4>
                <pre className="bg-muted p-4 rounded-md overflow-auto mt-2">
                  {`{
  "customer_id": "string",
  "origin_id": "string",
  "destination_id": "string",
  "weight": "number",
  "volume": "number",
  "priority": "string",
  "scheduled_pickup": "string (ISO date)",
  "scheduled_delivery": "string (ISO date)"
}`}
                </pre>
              </div>

<div>
                <div className="flex items-center space-x-2 mb-4">
                  <Badge className="bg-yellow-600">PUT</Badge>
                  <code>/shipments/{"{id}"}</code>
                </div>
                <p className="mb-2">Update a shipment</p>
                <h4 className="text-sm font-medium mb-1">Path Parameters</h4>
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Parameter</TableHead>
                      <TableHead>Type</TableHead>
                      <TableHead>Description</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    <TableRow>
                      <TableCell>id</TableCell>
                      <TableCell>string</TableCell>
                      <TableCell>Shipment ID</TableCell>
                    </TableRow>
                  </TableBody>
                </Table>
                <h4 className="text-sm font-medium mb-1 mt-4">Request Body</h4>
                <pre className="bg-muted p-4 rounded-md overflow-auto mt-2">
                  {`{
  "status": "string",
  "priority": "string",
  "scheduled_pickup": "string (ISO date)",
  "scheduled_delivery": "string (ISO date)"
}`}
                </pre>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="tracking">
          <Card>
            <CardHeader>
              <!--

Let's create the API routes for the Team section:
-->

\
[V0_FILE]sql:file="db-schema.sql" type="code" isMerged="true"
-- Team tables
CREATE TABLE IF NOT EXISTS team_members (
  id SERIAL PRIMARY KEY,
  user_id VARCHAR(255) NOT NULL,
  name VARCHAR(255) NOT NULL,
  email VARCHAR(255) NOT NULL UNIQUE,
  role VARCHAR(100) NOT NULL,
  department VARCHAR(100),
  avatar_url TEXT,
  phone VARCHAR(50),
  status VARCHAR(50) DEFAULT 'active',
  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE IF NOT EXISTS team_invitations (
  id SERIAL PRIMARY KEY,
  email VARCHAR(255) NOT NULL,
  role VARCHAR(100) NOT NULL,
  department VARCHAR(100),
  invited_by VARCHAR(255) NOT NULL,
  token VARCHAR(255) NOT NULL UNIQUE,
  status VARCHAR(50) DEFAULT 'pending',
  expires_at TIMESTAMP WITH TIME ZONE NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE IF NOT EXISTS team_performance (
  id SERIAL PRIMARY KEY,
  team_member_id INTEGER NOT NULL REFERENCES team_members(id) ON DELETE CASCADE,
  metric_name VARCHAR(100) NOT NULL,
  metric_value FLOAT NOT NULL,
  period_start DATE NOT NULL,
  period_end DATE NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE IF NOT EXISTS team_activity (
  id SERIAL PRIMARY KEY,
  team_member_id INTEGER NOT NULL REFERENCES team_members(id) ON DELETE CASCADE,
  activity_type VARCHAR(100) NOT NULL,
  description TEXT NOT NULL,
  related_entity_type VARCHAR(100),
  related_entity_id INTEGER,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

-- Document tables
CREATE TABLE IF NOT EXISTS documents (
  id SERIAL PRIMARY KEY,
  user_id VARCHAR(255) NOT NULL,
  title VARCHAR(255) NOT NULL,
  description TEXT,
  file_url TEXT NOT NULL,
  file_type VARCHAR(50) NOT NULL,
  file_size INTEGER NOT NULL,
  tags JSONB,
  metadata JSONB,
  status VARCHAR(50) DEFAULT 'active',
  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE IF NOT EXISTS document_versions (
  id SERIAL PRIMARY KEY,
  document_id INTEGER NOT NULL REFERENCES documents(id) ON DELETE CASCADE,
  version_number INTEGER NOT NULL,
  file_url TEXT NOT NULL,
  file_size INTEGER NOT NULL,
  changes_description TEXT,
  created_by VARCHAR(255) NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE IF NOT EXISTS document_shipment_relations (
  id SERIAL PRIMARY KEY,
  document_id INTEGER NOT NULL REFERENCES documents(id) ON DELETE CASCADE,
  shipment_id INTEGER NOT NULL,
  relation_type VARCHAR(100) NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

-- Create storage bucket for team avatars
INSERT INTO storage.buckets (id, name, public) 
VALUES ('team-avatars', 'team-avatars', true)
ON CONFLICT (id) DO NOTHING;

-- Set up storage policies for team avatars
CREATE POLICY "Allow public read access for team avatars" 
ON storage.objects FOR SELECT 
USING (bucket_id = 'team-avatars')
ON CONFLICT DO NOTHING;

CREATE POLICY "Allow authenticated users to upload team avatars" 
ON storage.objects FOR INSERT 
TO authenticated 
USING (bucket_id = 'team-avatars')
ON CONFLICT DO NOTHING;

-- Create storage bucket for documents
INSERT INTO storage.buckets (id, name, public) 
VALUES ('logistics-documents', 'logistics-documents', true)
ON CONFLICT (id) DO NOTHING;

-- Set up storage policies for documents
CREATE POLICY "Allow public read access for documents" 
ON storage.objects FOR SELECT 
USING (bucket_id = 'logistics-documents')
ON CONFLICT DO NOTHING;

CREATE POLICY "Allow authenticated users to upload documents" 
ON storage.objects FOR INSERT 
TO authenticated 
USING (bucket_id = 'logistics-documents')
ON CONFLICT DO NOTHING;
[V0_FILE]sql:file="seed-data.sql" type="code" isMerged="true"
-- Seed team members
INSERT INTO team_members (user_id, name, email, role, department, avatar_url, phone, status)
VALUES
  ('user1', 'John Doe', 'john.doe@example.com', 'Manager', 'Operations', 'https://randomuser.me/api/portraits/men/1.jpg', '+1234567890', 'active'),
  ('user2', 'Jane Smith', 'jane.smith@example.com', 'Dispatcher', 'Operations', 'https://randomuser.me/api/portraits/women/1.jpg', '+1234567891', 'active'),
  ('user3', 'Michael Johnson', 'michael.johnson@example.com', 'Driver', 'Fleet', 'https://randomuser.me/api/portraits/men/2.jpg', '+1234567892', 'active'),
  ('user4', 'Emily Davis', 'emily.davis@example.com', 'Accountant', 'Finance', 'https://randomuser.me/api/portraits/women/2.jpg', '+1234567893', 'active'),
  ('user5', 'Robert Wilson', 'robert.wilson@example.com', 'Logistics Specialist', 'Operations', 'https://randomuser.me/api/portraits/men/3.jpg', '+1234567894', 'active')
ON CONFLICT (email) DO NOTHING;

-- Seed team performance
INSERT INTO team_performance (team_member_id, metric_name, metric_value, period_start, period_end)
VALUES
  (1, 'shipments_processed', 120, '2023-01-01', '2023-01-31'),
  (1, 'customer_satisfaction', 4.8, '2023-01-01', '2023-01-31'),
  (2, 'shipments_processed', 95, '2023-01-01', '2023-01-31'),
  (2, 'customer_satisfaction', 4.6, '2023-01-01', '2023-01-31'),
  (3, 'deliveries_completed', 45, '2023-01-01', '2023-01-31'),
  (3, 'on_time_percentage', 92.5, '2023-01-01', '2023-01-31'),
  (4, 'invoices_processed', 78, '2023-01-01', '2023-01-31'),
  (4, 'payment_accuracy', 99.2, '2023-01-01', '2023-01-31'),
  (5, 'routes_optimized', 65, '2023-01-01', '2023-01-31'),
  (5, 'fuel_savings_percentage', 12.3, '2023-01-01', '2023-01-31')
ON CONFLICT DO NOTHING;

-- Seed team activity
INSERT INTO team_activity (team_member_id, activity_type, description, related_entity_type, related_entity_id)
VALUES
  (1, 'shipment_created', 'Created new shipment #12345', 'shipment', 12345),
  (2, 'route_assigned', 'Assigned route #789 to driver Michael Johnson', 'route', 789),
  (3, 'delivery_completed', 'Completed delivery for shipment #12345', 'shipment', 12345),
  (4, 'invoice_generated', 'Generated invoice #INV-001 for shipment #12345', 'invoice', 1),
  (5, 'route_optimized', 'Optimized route #789 saving 45 miles', 'route', 789)
ON CONFLICT DO NOTHING;

-- Seed documents
INSERT INTO documents (user_id, title, description, file_url, file_type, file_size, tags, metadata, status)
VALUES
  ('user1', 'Bill of Lading - Shipment #12345', 'Bill of lading for shipment from Los Angeles to New York', 'https://example.com/documents/bol-12345.pdf', 'pdf', 256000, '["bill_of_lading", "shipment_12345"]', '{"shipment_id": 12345, "origin": "Los Angeles", "destination": "New York"}', 'active'),
  ('user1', 'Invoice #INV-001', 'Invoice for shipment #12345', 'https://example.com/documents/inv-001.pdf', 'pdf', 128000, '["invoice", "shipment_12345"]', '{"shipment_id": 12345, "amount": 1250.00, "currency": "USD"}', 'active'),
  ('user2', 'Proof of Delivery - Shipment #12345', 'Signed proof of delivery for shipment #12345', 'https://example.com/documents/pod-12345.pdf', 'pdf', 512000, '["pod", "shipment_12345"]', '{"shipment_id": 12345, "delivered_at": "2023-01-15T14:30:00Z", "recipient": "John Smith"}', 'active'),
  ('user3', 'Driver Log - Jan 2023', 'Driver log for Michael Johnson for January 2023', 'https://example.com/documents/driver-log-jan2023.xlsx', 'xlsx', 1024000, '["driver_log", "january_2023"]', '{"driver_id": 3, "month": "January", "year": 2023}', 'active'),
  ('user4', 'Financial Report - Q1 2023', 'Quarterly financial report for Q1 2023', 'https://example.com/documents/financial-q1-2023.pdf', 'pdf', 2048000, '["financial", "report", "q1_2023"]', '{"period": "Q1", "year": 2023, "total_revenue": 1250000.00}', 'active')
ON CONFLICT DO NOTHING;

-- Seed document versions
INSERT INTO document_versions (document_id, version_number, file_url, file_size, changes_description, created_by)
VALUES
  (1, 1, 'https://example.com/documents/bol-12345-v1.pdf', 256000, 'Initial version', 'user1'),
  (2, 1, 'https://example.com/documents/inv-001-v1.pdf', 128000, 'Initial version', 'user1'),
  (3, 1, 'https://example.com/documents/pod-12345-v1.pdf', 512000, 'Initial version', 'user2'),
  (4, 1, 'https://example.com/documents/driver-log-jan2023-v1.xlsx', 1024000, 'Initial version', 'user3'),
  (5, 1, 'https://example.com/documents/financial-q1-2023-v1.pdf', 2048000, 'Initial version', 'user4')
ON CONFLICT DO NOTHING;

-- Seed document shipment relations
INSERT INTO document_shipment_relations (document_id, shipment_id, relation_type)
VALUES
  (1, 12345, 'bill_of_lading'),
  (2, 12345, 'invoice'),
  (3, 12345, 'proof_of_delivery')
ON CONFLICT DO NOTHING;
[V0_FILE]typescriptreact:file="app/dashboard/ai-tools/page.tsx" isEdit="true" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Brain, Truck, Package } from "lucide-react"
import Link from "next/link"
import { Button } from "@/components/ui/button"

export default function AIToolsPage() {
  return (
    <div className="container mx-auto py-6 space-y-8">
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-3xl font-bold mb-2">AI-Powered Logistics Tools</h1>
          <p className="text-muted-foreground">
            Leverage artificial intelligence to optimize your logistics operations
          </p>
        </div>
        <Card className="w-auto p-4 bg-blue-600 text-white">
          <div className="flex items-center space-x-4">
            <Brain className="h-8 w-8" />
            <div>
              <h3 className="font-bold">AI Credits</h3>
              <p className="text-sm">750 credits remaining</p>
            </div>
          </div>
        </Card>
      </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Card className="bg-gradient-to-br from-blue-500 to-blue-700 text-white">
          <CardHeader>
            <CardTitle className="flex items-center">
              <Brain className="h-5 w-5 mr-2" />
              AI Insights
            </CardTitle>
            <CardDescription className="text-blue-100">AI-generated insights from your logistics data</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="flex justify-between items-center">
                <span>Route Efficiency</span>
                <span className="font-bold">+24%</span>
              </div>
              <div className="flex justify-between items-center">
                <span>Fuel Savings</span>
                <span className="font-bold">$3,450</span>
              </div>
              <div className="flex justify-between items-center">
                <span>Delivery Time</span>
                <span className="font-bold">-18%</span>
              </div>
              <div className="flex justify-between items-center">
                <span>Maintenance Costs</span>
                <span className="font-bold">-12%</span>
              </div>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle className="flex items-center">
              <Truck className="h-5 w-5 mr-2" />
              Fleet Status
            </CardTitle>
            <CardDescription>AI-monitored fleet health and status</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="flex justify-between items-center">
                <span>Available Trucks</span>
                <span className="font-bold text-green-500">12</span>
              </div>
              <div className="flex justify-between items-center">
                <span>In Transit</span>
                <span className="font-bold text-blue-500">8</span>
              </div>
              <div className="flex justify-between items-center">
                <span>Maintenance Required</span>
                <span className="font-bold text-yellow-500">3</span>
              </div>
              <div className="flex justify-between items-center">
                <span>Out of Service</span>
                <span className="font-bold text-red-500">1</span>
              </div>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle className="flex items-center">
              <Package className="h-5 w-5 mr-2" />
              Shipment Analytics
            </CardTitle>
            <CardDescription>AI-powered shipment performance metrics</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="flex justify-between items-center">
                <span>On-Time Delivery</span>
                <span className="font-bold text-green-500">94%</span>
              </div>
              <div className="flex justify-between items-center">
                <span>Average Transit Time</span>
                <span className="font-bold">2.3 days</span>
              </div>
              <div className="flex justify-between items-center">
                <span>Pending Shipments</span>
                <span className="font-bold text-yellow-500">15</span>
              </div>
              <div className="flex justify-between items-center">
                <span>Completed This Month</span>
                <span className="font-bold text-blue-500">87</span>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
        <Link href="/dashboard/ai-tools/route-optimizer">
          <Card className="h-full hover:shadow-md transition-shadow cursor-pointer">
            <CardHeader>
              <CardTitle>Route Optimizer</CardTitle>
              <CardDescription>Optimize delivery routes using AI</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-muted-foreground">
                Save time and fuel by optimizing your delivery routes based on multiple factors including distance,
                time, traffic, and weather conditions.
              </p>
              <div className="mt-4 flex justify-end">
                <Button variant="outline" size="sm">
                  Open Tool
                </Button>
              </div>
            </CardContent>
          </Card>
        </Link>

<Link href="/dashboard/ai-tools/load-matcher">
          <Card className="h-full hover:shadow-md transition-shadow cursor-pointer">
            <CardHeader>
              <CardTitle>Load Matcher</CardTitle>
              <CardDescription>Match loads to optimal carriers</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-muted-foreground">
                Find the optimal truck and driver for each shipment based on proximity, availability, experience, and
                other factors.
              </p>
              <div className="mt-4 flex justify-end">
                <Button variant="outline" size="sm">
                  Open Tool
                </Button>
              </div>
            </CardContent>
          </Card>
        </Link>

<Link href="/dashboard/ai-tools/maintenance">
          <Card className="h-full hover:shadow-md transition-shadow cursor-pointer">
            <CardHeader>
              <CardTitle>Predictive Maintenance</CardTitle>
              <CardDescription>Predict maintenance needs for your fleet</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-muted-foreground">
                Predict maintenance needs for your fleet based on usage patterns, preventing breakdowns and optimizing
                vehicle lifespan.
              </p>
              <div className="mt-4 flex justify-end">
                <Button variant="outline" size="sm">
                  Open Tool
                </Button>
              </div>
            </CardContent>
          </Card>
        </Link>

<Link href="/dashboard/ai-tools/chat-support">
          <Card className="h-full hover:shadow-md transition-shadow cursor-pointer">
            <CardHeader>
              <CardTitle>AI Chat Support</CardTitle>
              <CardDescription>Get instant assistance with logistics questions</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-muted-foreground">
                Get instant assistance with shipment tracking, route information, and general logistics questions from
                our AI assistant.
              </p>
              <div className="mt-4 flex justify-end">
                <Button variant="outline" size="sm">
                  Open Tool
                </Button>
              </div>
            </CardContent>
          </Card>
        </Link>

<Link href="/dashboard/ai-tools/document-processor">
          <Card className="h-full hover:shadow-md transition-shadow cursor-pointer">
            <CardHeader>
              <CardTitle>Document Processor</CardTitle>
              <CardDescription>Extract information from logistics documents</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-muted-foreground">
                Extract information from logistics documents like bills of lading, invoices, and delivery receipts using
                AI.
              </p>
              <div className="mt-4 flex justify-end">
                <Button variant="outline" size="sm">
                  Open Tool
                </Button>
              </div>
            </CardContent>
          </Card>
        </Link>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/ai-tools/route-optimizer/page.tsx" isEdit="true" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { MapPin, ArrowRight, Clock, Fuel, TrendingUp } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Label } from "@/components/ui/label"

export default function RouteOptimizerPage() {
  // Mock shipment data
  const shipments = [
    {
      id: "1",
      tracking_number: "SHP-1234567890",
      status: "pending",
      origin_name: "New York Warehouse",
      destination_name: "Boston Distribution Center",
    },
    {
      id: "2",
      tracking_number: "SHP-0987654321",
      status: "pending",
      origin_name: "Chicago Depot",
      destination_name: "Detroit Logistics Hub",
    },
    {
      id: "3",
      tracking_number: "SHP-5678901234",
      status: "in_transit",
      origin_name: "Los Angeles Port",
      destination_name: "Phoenix Distribution Center",
    },
  ]

return (
    <div className="container mx-auto py-6 space-y-8">
      <div>
        <h1 className="text-3xl font-bold mb-2">AI Route Optimizer</h1>
        <p className="text-muted-foreground">
          Optimize your delivery routes using AI to save time, fuel, and reduce costs
        </p>
      </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-lg flex items-center">
              <Clock className="h-5 w-5 mr-2 text-blue-500" />
              Time Savings
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-3xl font-bold">18%</p>
            <p className="text-sm text-muted-foreground">Average reduction in delivery time</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-lg flex items-center">
              <Fuel className="h-5 w-5 mr-2 text-green-500" />
              Fuel Efficiency
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-3xl font-bold">24%</p>
            <p className="text-sm text-muted-foreground">Average fuel savings per route</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-lg flex items-center">
              <TrendingUp className="h-5 w-5 mr-2 text-purple-500" />
              Delivery Capacity
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-3xl font-bold">+35%</p>
            <p className="text-sm text-muted-foreground">Increase in delivery capacity</p>
          </CardContent>
        </Card>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Optimize Route</CardTitle>
          <CardDescription>Select a shipment to optimize its route</CardDescription>
        </CardHeader>
        <CardContent>
          <Tabs defaultValue="pending">
            <TabsList className="mb-4">
              <TabsTrigger value="pending">Pending Shipments</TabsTrigger>
              <TabsTrigger value="all">All Shipments</TabsTrigger>
            </TabsList>

<TabsContent value="pending">
              <div className="space-y-4">
                {shipments
                  .filter((shipment) => shipment.status === "pending")
                  .map((shipment) => (
                    <Card key={shipment.id} className="overflow-hidden">
                      <div className="p-4">
                        <div className="flex justify-between items-start">
                          <div>
                            <h3 className="font-medium">Shipment #{shipment.tracking_number}</h3>
                            <div className="flex items-center text-sm text-muted-foreground mt-1">
                              <MapPin className="h-4 w-4 mr-1" />
                              <span>Origin: {shipment.origin_name}</span>
                              <ArrowRight className="h-4 w-4 mx-2" />
                              <span>Destination: {shipment.destination_name}</span>
                            </div>
                          </div>
                        </div>

<div className="mt-4 space-y-4">
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div className="space-y-2">
                              <Label htmlFor={`priority-${shipment.id}`}>Optimization Priority</Label>
                              <Select defaultValue="balanced">
                                <SelectTrigger id={`priority-${shipment.id}`}>
                                  <SelectValue placeholder="Select priority" />
                                </SelectTrigger>
                                <SelectContent>
                                  <SelectItem value="time">Time (Fastest Route)</SelectItem>
                                  <SelectItem value="fuel">Fuel Efficiency</SelectItem>
                                  <SelectItem value="balanced">Balanced</SelectItem>
                                </SelectContent>
                              </Select>
                            </div>

<div className="space-y-2">
                              <Label htmlFor={`factors-${shipment.id}`}>Consider Factors</Label>
                              <Select defaultValue="all">
                                <SelectTrigger id={`factors-${shipment.id}`}>
                                  <SelectValue placeholder="Select factors" />
                                </SelectTrigger>
                                <SelectContent>
                                  <SelectItem value="all">All Factors</SelectItem>
                                  <SelectItem value="traffic">Traffic Only</SelectItem>
                                  <SelectItem value="weather">Weather Only</SelectItem>
                                  <SelectItem value="distance">Distance Only</SelectItem>
                                </SelectContent>
                              </Select>
                            </div>
                          </div>

<Button className="w-full">Optimize Route</Button>

<div className="bg-muted p-4 rounded-md">
                            <p className="text-sm text-center text-muted-foreground">
                              Route optimization results will appear here
                            </p>
                          </div>
                        </div>
                      </div>
                    </Card>
                  ))}

{shipments.filter((shipment) => shipment.status === "pending").length === 0 && (
                  <div className="text-center py-8 text-muted-foreground">
                    <p>No pending shipments found</p>
                  </div>
                )}
              </div>
            </TabsContent>

<TabsContent value="all">
              <div className="space-y-4">
                {shipments.map((shipment) => (
                  <Card key={shipment.id} className="overflow-hidden">
                    <div className="p-4">
                      <div className="flex justify-between items-start">
                        <div>
                          <h3 className="font-medium">Shipment #{shipment.tracking_number}</h3>
                          <div className="flex items-center text-sm text-muted-foreground mt-1">
                            <MapPin className="h-4 w-4 mr-1" />
                            <span>Origin: {shipment.origin_name}</span>
                            <ArrowRight className="h-4 w-4 mx-2" />
                            <span>Destination: {shipment.destination_name}</span>
                          </div>
                        </div>
                        <div className="text-sm">
                          <span
                            className={`px-2 py-1 rounded-full text-xs ${
                              shipment.status === "pending"
                                ? "bg-yellow-100 text-yellow-800"
                                : shipment.status === "in_transit"
                                  ? "bg-blue-100 text-blue-800"
                                  : shipment.status === "delivered"
                                    ? "bg-green-100 text-green-800"
                                    : "bg-gray-100 text-gray-800"
                            }`}
                          >
                            {shipment.status.replace("_", " ")}
                          </span>
                        </div>
                      </div>

<div className="mt-4 space-y-4">
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                          <div className="space-y-2">
                            <Label htmlFor={`priority-${shipment.id}`}>Optimization Priority</Label>
                            <Select defaultValue="balanced">
                              <SelectTrigger id={`priority-${shipment.id}`}>
                                <SelectValue placeholder="Select priority" />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="time">Time (Fastest Route)</SelectItem>
                                <SelectItem value="fuel">Fuel Efficiency</SelectItem>
                                <SelectItem value="balanced">Balanced</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>

<div className="space-y-2">
                            <Label htmlFor={`factors-${shipment.id}`}>Consider Factors</Label>
                            <Select defaultValue="all">
                              <SelectTrigger id={`factors-${shipment.id}`}>
                                <SelectValue placeholder="Select factors" />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="all">All Factors</SelectItem>
                                <SelectItem value="traffic">Traffic Only</SelectItem>
                                <SelectItem value="weather">Weather Only</SelectItem>
                                <SelectItem value="distance">Distance Only</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>
                        </div>

<Button className="w-full" disabled={shipment.status !== "pending"}>
                          {shipment.status === "pending" ? "Optimize Route" : "Cannot Optimize (In Progress)"}
                        </Button>

<div className="bg-muted p-4 rounded-md">
                          <p className="text-sm text-center text-muted-foreground">
                            Route optimization results will appear here
                          </p>
                        </div>
                      </div>
                    </div>
                  </Card>
                ))}

{shipments.length === 0 && (
                  <div className="text-center py-8 text-muted-foreground">
                    <p>No shipments found</p>
                  </div>
                )}
              </div>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/ai-tools/load-matcher/page.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Label } from "@/components/ui/label"
import { Package, MapPin, ArrowRight, Truck, User } from "lucide-react"

export default function LoadMatcherPage() {
  // Mock shipment data
  const shipments = [
    {
      id: "1",
      tracking_number: "SHP-1234567890",
      status: "pending",
      origin_name: "New York Warehouse",
      destination_name: "Boston Distribution Center",
      weight: "2,500 kg",
      volume: "12 m³",
    },
    {
      id: "2",
      tracking_number: "SHP-0987654321",
      status: "pending",
      origin_name: "Chicago Depot",
      destination_name: "Detroit Logistics Hub",
      weight: "3,200 kg",
      volume: "15 m³",
    },
    {
      id: "3",
      tracking_number: "SHP-5678901234",
      status: "pending",
      origin_name: "Los Angeles Port",
      destination_name: "Phoenix Distribution Center",
      weight: "4,800 kg",
      volume: "22 m³",
    },
  ]

return (
    <div className="container mx-auto py-6 space-y-8">
      <div>
        <h1 className="text-3xl font-bold mb-2">AI Load Matcher</h1>
        <p className="text-muted-foreground">Match shipments to the optimal carriers, trucks, and drivers using AI</p>
      </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-lg flex items-center">
              <Package className="h-5 w-5 mr-2 text-blue-500" />
              Pending Loads
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-3xl font-bold">{shipments.length}</p>
            <p className="text-sm text-muted-foreground">Shipments awaiting carrier assignment</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-lg flex items-center">
              <Truck className="h-5 w-5 mr-2 text-green-500" />
              Available Trucks
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-3xl font-bold">12</p>
            <p className="text-sm text-muted-foreground">Trucks ready for assignment</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-lg flex items-center">
              <User className="h-5 w-5 mr-2 text-purple-500" />
              Available Drivers
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-3xl font-bold">8</p>
            <p className="text-sm text-muted-foreground">Drivers ready for assignment</p>
          </CardContent>
        </Card>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Match Loads to Carriers</CardTitle>
          <CardDescription>Select a shipment to find the optimal carrier</CardDescription>
        </CardHeader>
        <CardContent>
          <Tabs defaultValue="individual">
            <TabsList className="mb-4">
              <TabsTrigger value="individual">Individual Matching</TabsTrigger>
              <TabsTrigger value="batch">Batch Matching</TabsTrigger>
            </TabsList>

<TabsContent value="individual">
              <div className="space-y-4">
                {shipments.map((shipment) => (
                  <Card key={shipment.id} className="overflow-hidden">
                    <div className="p-4">
                      <div className="flex justify-between items-start">
                        <div>
                          <h3 className="font-medium">Shipment #{shipment.tracking_number}</h3>
                          <div className="flex items-center text-sm text-muted-foreground mt-1">
                            <MapPin className="h-4 w-4 mr-1" />
                            <span>Origin: {shipment.origin_name}</span>
                            <ArrowRight className="h-4 w-4 mx-2" />
                            <span>Destination: {shipment.destination_name}</span>
                          </div>
                        </div>
                      </div>

<div className="mt-2 flex flex-wrap gap-2">
                        <div className="text-xs bg-blue-50 text-blue-700 px-2 py-1 rounded-full">
                          Weight: {shipment.weight}
                        </div>
                        <div className="text-xs bg-purple-50 text-purple-700 px-2 py-1 rounded-full">
                          Volume: {shipment.volume}
                        </div>
                      </div>

<div className="mt-4 space-y-4">
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                          <div className="space-y-2">
                            <Label htmlFor={`priority-${shipment.id}`}>Matching Priority</Label>
                            <Select defaultValue="balanced">
                              <SelectTrigger id={`priority-${shipment.id}`}>
                                <SelectValue placeholder="Select priority" />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="proximity">Proximity</SelectItem>
                                <SelectItem value="experience">Driver Experience</SelectItem>
                                <SelectItem value="cost">Cost Efficiency</SelectItem>
                                <SelectItem value="balanced">Balanced</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>

<div className="space-y-2">
                            <Label htmlFor={`carrier-type-${shipment.id}`}>Carrier Type</Label>
                            <Select defaultValue="all">
                              <SelectTrigger id={`carrier-type-${shipment.id}`}>
                                <SelectValue placeholder="Select carrier type" />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="all">All Carriers</SelectItem>
                                <SelectItem value="company">Company Fleet</SelectItem>
                                <SelectItem value="partner">Partner Carriers</SelectItem>
                                <SelectItem value="independent">Independent Operators</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>
                        </div>

<Button className="w-full">Find Optimal Matches</Button>

<div className="bg-muted p-4 rounded-md">
                          <p className="text-sm text-center text-muted-foreground">
                            Carrier matching results will appear here
                          </p>
                        </div>
                      </div>
                    </div>
                  </Card>
                ))}
              </div>
            </TabsContent>

<TabsContent value="batch">
              <Card>
                <CardContent className="pt-6">
                  <div className="space-y-4">
                    <div className="space-y-2">
                      <Label htmlFor="batch-priority">Matching Priority</Label>
                      <Select defaultValue="balanced">
                        <SelectTrigger id="batch-priority">
                          <SelectValue placeholder="Select priority" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="proximity">Proximity</SelectItem>
                          <SelectItem value="experience">Driver Experience</SelectItem>
                          <SelectItem value="cost">Cost Efficiency</SelectItem>
                          <SelectItem value="balanced">Balanced</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

<div className="space-y-2">
                      <Label htmlFor="batch-carrier-type">Carrier Type</Label>
                      <Select defaultValue="all">
                        <SelectTrigger id="batch-carrier-type">
                          <SelectValue placeholder="Select carrier type" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="all">All Carriers</SelectItem>
                          <SelectItem value="company">Company Fleet</SelectItem>
                          <SelectItem value="partner">Partner Carriers</SelectItem>
                          <SelectItem value="independent">Independent Operators</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

<div className="pt-2">
                      <Button className="w-full">Match All Pending Shipments</Button>
                    </div>

<div className="bg-muted p-4 rounded-md">
                      <p className="text-sm text-center text-muted-foreground">
                        Batch matching results will appear here
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/ai-tools/maintenance/page.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Label } from "@/components/ui/label"
import { Truck, AlertTriangle, CheckCircle, Clock, Calendar } from "lucide-react"

export default function MaintenancePredictionPage() {
  // Mock truck data
  const trucks = [
    {
      id: "1",
      name: "Volvo FH16",
      license_plate: "ABC-1234",
      status: "active",
      last_maintenance: "2023-10-15",
      mileage: "45,678 km",
    },
    {
      id: "2",
      name: "Mercedes-Benz Actros",
      license_plate: "XYZ-5678",
      status: "active",
      last_maintenance: "2023-11-02",
      mileage: "32,456 km",
    },
    {
      id: "3",
      name: "Scania R450",
      license_plate: "DEF-9012",
      status: "maintenance",
      last_maintenance: "2023-09-20",
      mileage: "78,912 km",
    },
  ]

return (
    <div className="container mx-auto py-6 space-y-8">
      <div>
        <h1 className="text-3xl font-bold mb-2">AI Predictive Maintenance</h1>
        <p className="text-muted-foreground">
          Predict maintenance needs for your fleet to prevent breakdowns and optimize vehicle lifespan
        </p>
      </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-lg flex items-center">
              <AlertTriangle className="h-5 w-5 mr-2 text-yellow-500" />
              Maintenance Due
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-3xl font-bold">3</p>
            <p className="text-sm text-muted-foreground">Vehicles requiring maintenance soon</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-lg flex items-center">
              <CheckCircle className="h-5 w-5 mr-2 text-green-500" />
              Fleet Health
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-3xl font-bold">87%</p>
            <p className="text-sm text-muted-foreground">Overall fleet health score</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-lg flex items-center">
              <Clock className="h-5 w-5 mr-2 text-blue-500" />
              Downtime Saved
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-3xl font-bold">42 hrs</p>
            <p className="text-sm text-muted-foreground">Downtime prevented this month</p>
          </CardContent>
        </Card>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Predict Maintenance Needs</CardTitle>
          <CardDescription>Select a vehicle to predict its maintenance needs</CardDescription>
        </CardHeader>
        <CardContent>
          <Tabs defaultValue="active">
            <TabsList className="mb-4">
              <TabsTrigger value="active">Active Vehicles</TabsTrigger>
              <TabsTrigger value="all">All Vehicles</TabsTrigger>
            </TabsList>

<TabsContent value="active">
              <div className="space-y-4">
                {trucks
                  .filter((truck) => truck.status === "active")
                  .map((truck) => (
                    <Card key={truck.id} className="overflow-hidden">
                      <div className="p-4">
                        <div className="flex justify-between items-start">
                          <div>
                            <h3 className="font-medium">{truck.name}</h3>
                            <div className="flex items-center text-sm text-muted-foreground mt-1">
                              <Truck className="h-4 w-4 mr-1" />
                              <span>License Plate: {truck.license_plate}</span>
                            </div>
                          </div>
                        </div>

<div className="mt-2 flex flex-wrap gap-2">
                          <div className="text-xs bg-blue-50 text-blue-700 px-2 py-1 rounded-full">
                            Mileage: {truck.mileage}
                          </div>
                          <div className="text-xs bg-purple-50 text-purple-700 px-2 py-1 rounded-full flex items-center">
                            <Calendar className="h-3 w-3 mr-1" />
                            Last Maintenance: {truck.last_maintenance}
                          </div>
                        </div>

<div className="mt-4 space-y-4">
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div className="space-y-2">
                              <Label htmlFor={`prediction-type-${truck.id}`}>Prediction Type</Label>
                              <Select defaultValue="comprehensive">
                                <SelectTrigger id={`prediction-type-${truck.id}`}>
                                  <SelectValue placeholder="Select prediction type" />
                                </SelectTrigger>
                                <SelectContent>
                                  <SelectItem value="comprehensive">Comprehensive</SelectItem>
                                  <SelectItem value="engine">Engine Only</SelectItem>
                                  <SelectItem value="transmission">Transmission Only</SelectItem>
                                  <SelectItem value="brakes">Brakes Only</SelectItem>
                                </SelectContent>
                              </Select>
                            </div>

<div className="space-y-2">
                              <Label htmlFor={`timeframe-${truck.id}`}>Prediction Timeframe</Label>
                              <Select defaultValue="3months">
                                <SelectTrigger id={`timeframe-${truck.id}`}>
                                  <SelectValue placeholder="Select timeframe" />
                                </SelectTrigger>
                                <SelectContent>
                                  <SelectItem value="1month">1 Month</SelectItem>
                                  <SelectItem value="3months">3 Months</SelectItem>
                                  <SelectItem value="6months">6 Months</SelectItem>
                                  <SelectItem value="12months">12 Months</SelectItem>
                                </SelectContent>
                              </Select>
                            </div>
                          </div>

<Button className="w-full">Predict Maintenance Needs</Button>

<TabsContent value="all">
              <div className="space-y-4">
                {trucks.map((truck) => (
                  <Card key={truck.id} className="overflow-hidden">
                    <div className="p-4">
                      <div className="flex justify-between items-start">
                        <div>
                          <h3 className="font-medium">{truck.name}</h3>
                          <div className="flex items-center text-sm text-muted-foreground mt-1">
                            <Truck className="h-4 w-4 mr-1" />
                            <span>License Plate: {truck.license_plate}</span>
                          </div>
                        </div>
                        <div className="text-sm">
                          <span
                            className={`px-2 py-1 rounded-full text-xs ${
                              truck.status === "active"
                                ? "bg-green-100 text-green-800"
                                : truck.status === "maintenance"
                                  ? "bg-yellow-100 text-yellow-800"
                                  : "bg-gray-100 text-gray-800"
                            }`}
                          >
                            {truck.status.charAt(0).toUpperCase() + truck.status.slice(1)}
                          </span>
                        </div>
                      </div>

<div className="mt-2 flex flex-wrap gap-2">
                        <div className="text-xs bg-blue-50 text-blue-700 px-2 py-1 rounded-full">
                          Mileage: {truck.mileage}
                        </div>
                        <div className="text-xs bg-purple-50 text-purple-700 px-2 py-1 rounded-full flex items-center">
                          <Calendar className="h-3 w-3 mr-1" />
                          Last Maintenance: {truck.last_maintenance}
                        </div>
                      </div>

<div className="mt-4 space-y-4">
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                          <div className="space-y-2">
                            <Label htmlFor={`prediction-type-${truck.id}`}>Prediction Type</Label>
                            <Select defaultValue="comprehensive">
                              <SelectTrigger id={`prediction-type-${truck.id}`}>
                                <SelectValue placeholder="Select prediction type" />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="comprehensive">Comprehensive</SelectItem>
                                <SelectItem value="engine">Engine Only</SelectItem>
                                <SelectItem value="transmission">Transmission Only</SelectItem>
                                <SelectItem value="brakes">Brakes Only</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>

<div className="space-y-2">
                            <Label htmlFor={`timeframe-${truck.id}`}>Prediction Timeframe</Label>
                            <Select defaultValue="3months">
                              <SelectTrigger id={`timeframe-${truck.id}`}>
                                <SelectValue placeholder="Select timeframe" />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="1month">1 Month</SelectItem>
                                <SelectItem value="3months">3 Months</SelectItem>
                                <SelectItem value="6months">6 Months</SelectItem>
                                <SelectItem value="12months">12 Months</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>
                        </div>

<Button className="w-full" disabled={truck.status === "maintenance"}>
                          {truck.status === "maintenance"
                            ? "Vehicle Currently in Maintenance"
                            : "Predict Maintenance Needs"}
                        </Button>

<div className="bg-muted p-4 rounded-md">
                          <p className="text-sm text-center text-muted-foreground">
                            Maintenance prediction results will appear here
                          </p>
                        </div>
                      </div>
                    </div>
                  </Card>
                ))}
              </div>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/team/page.tsx" isEdit="true"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { getTeamMembers } from "@/app/actions/team"
import { UserPlus, Filter } from "lucide-react"
import Link from "next/link"
import TeamMemberList from "@/components/team/team-member-list"
import TeamStats from "@/components/team/team-stats"

export default async function TeamPage() {
  const teamResult = await getTeamMembers()
  const teamMembers = teamResult.success ? teamResult.members : []

return (
    <div className="container mx-auto py-6 space-y-8">
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-3xl font-bold mb-2 text-white">Team Management</h1>
          <p className="text-muted-foreground">Manage your logistics team members and their roles</p>
        </div>
        <Link href="/dashboard/team/invite">
          <Button>
            <UserPlus className="h-4 w-4 mr-2" />
            Invite Team Member
          </Button>
        </Link>
      </div>

<Tabs defaultValue="all-members">
        <div className="flex justify-between items-center mb-4">
          <TabsList>
            <TabsTrigger value="all-members">All Members</TabsTrigger>
            <TabsTrigger value="admins">Admins</TabsTrigger>
            <TabsTrigger value="drivers">Drivers</TabsTrigger>
            <TabsTrigger value="dispatchers">Dispatchers</TabsTrigger>
            <TabsTrigger value="customers">Customers</TabsTrigger>
          </TabsList>

<Button variant="outline" size="sm">
            <Filter className="h-4 w-4 mr-2" />
            Filter
          </Button>
        </div>

<TabsContent value="admins">
          <TeamMemberList teamMembers={teamMembers.filter((member) => member.role === "admin")} />
        </TabsContent>

<TabsContent value="drivers">
          <TeamMemberList teamMembers={teamMembers.filter((member) => member.role === "driver")} />
        </TabsContent>

<TabsContent value="dispatchers">
          <TeamMemberList teamMembers={teamMembers.filter((member) => member.role === "dispatcher")} />
        </TabsContent>

<TabsContent value="customers">
          <TeamMemberList teamMembers={teamMembers.filter((member) => member.role === "customer")} />
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/team/team-member-list.tsx" isEdit="true"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Mail, MoreHorizontal, Phone, UserX, Edit, Star } from "lucide-react"
import Link from "next/link"

interface TeamMember {
  id: string
  name: string
  email: string
  role: string
  status: string
  created_at: string
  rating?: number
  avatar_url?: string
}

interface TeamMemberListProps {
  teamMembers: TeamMember[]
}

export default function TeamMemberList({ teamMembers }: TeamMemberListProps) {
  if (!teamMembers || teamMembers.length === 0) {
    return (
      <Card>
        <CardContent className="flex flex-col items-center justify-center py-10">
          <p className="text-muted-foreground mb-4">No team members found</p>
          <Link href="/dashboard/team/invite">
            <Button>Invite Team Member</Button>
          </Link>
        </CardContent>
      </Card>
    )
  }

return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
      {teamMembers.map((member) => (
        <Card key={member.id} className="bg-gray-900 border-gray-800">
          <CardHeader className="pb-2">
            <div className="flex justify-between items-start">
              <div className="flex items-center">
                <Avatar className="h-10 w-10 mr-3">
                  <AvatarImage src={member.avatar_url || ""} alt={member.name} />
                  <AvatarFallback className="bg-blue-600 text-white">
                    {member.name.substring(0, 2).toUpperCase()}
                  </AvatarFallback>
                </Avatar>
                <div>
                  <Link href={`/dashboard/team/${member.id}`}>
                    <CardTitle className="text-white hover:text-blue-400 transition-colors">{member.name}</CardTitle>
                  </Link>
                  <CardDescription>{member.role}</CardDescription>
                </div>
              </div>
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" size="icon" className="text-gray-400 hover:text-white">
                    <MoreHorizontal className="h-4 w-4" />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end" className="bg-gray-900 border-gray-800 text-gray-300">
                  <DropdownMenuLabel>Actions</DropdownMenuLabel>
                  <DropdownMenuSeparator className="bg-gray-800" />
                  <DropdownMenuItem className="hover:bg-gray-800 hover:text-white cursor-pointer">
                    <Link href={`/dashboard/team/${member.id}`} className="flex w-full">
                      View Profile
                    </Link>
                  </DropdownMenuItem>
                  <DropdownMenuItem className="hover:bg-gray-800 hover:text-white cursor-pointer">
                    <Edit className="h-4 w-4 mr-2" />
                    Edit
                  </DropdownMenuItem>
                  <DropdownMenuSeparator className="bg-gray-800" />
                  <DropdownMenuItem className="text-red-500 hover:bg-gray-800 hover:text-red-400 cursor-pointer">
                    <UserX className="h-4 w-4 mr-2" />
                    Deactivate
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
          </CardHeader>
          <CardContent className="pb-2">
            <div className="space-y-2 text-sm">
              <div className="flex items-center text-gray-400">
                <Mail className="h-4 w-4 mr-2" />
                <span>{member.email}</span>
              </div>
              {member.phone && (
                <div className="flex items-center text-gray-400">
                  <Phone className="h-4 w-4 mr-2" />
                  <span>{member.phone}</span>
                </div>
              )}
              {member.role === "driver" && member.rating && (
                <div className="flex items-center text-yellow-500">
                  <Star className="h-4 w-4 mr-2" />
                  <span>{member.rating}/5</span>
                </div>
              )}
            </div>
          </CardContent>
          <CardFooter className="pt-2">
            <div className="flex justify-between items-center w-full">
              <Badge
                variant={member.status === "active" ? "default" : "outline"}
                className={
                  member.status === "active" ? "bg-green-600 text-white" : "bg-gray-800 text-gray-400 border-gray-700"
                }
              >
                {member.status}
              </Badge>
              <span className="text-xs text-gray-500">Joined {new Date(member.created_at).toLocaleDateString()}</span>
            </div>
          </CardFooter>
        </Card>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/team/team-stats.tsx" isEdit="true"
import { Card, CardContent } from "@/components/ui/card"
import { Users, Truck, UserCheck, UserX } from "lucide-react"

interface TeamMember {
  id: string
  name: string
  email: string
  role: string
  status: string
}

interface TeamStatsProps {
  teamMembers: TeamMember[]
}

export default function TeamStats({ teamMembers }: TeamStatsProps) {
  // Calculate stats
  const totalMembers = teamMembers.length
  const activeMembers = teamMembers.filter((member) => member.status === "active").length
  const inactiveMembers = totalMembers - activeMembers

const roleStats = {
    admin: teamMembers.filter((member) => member.role === "admin").length,
    driver: teamMembers.filter((member) => member.role === "driver").length,
    dispatcher: teamMembers.filter((member) => member.role === "dispatcher").length,
    customer: teamMembers.filter((member) => member.role === "customer").length,
  }

return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
      <Card className="bg-gray-900 border-gray-800">
        <CardContent className="pt-6">
          <div className="flex items-center">
            <div className="p-2 bg-blue-900/30 text-blue-400 rounded mr-4">
              <Users className="h-6 w-6" />
            </div>
            <div>
              <p className="text-sm text-gray-400">Total Members</p>
              <h3 className="text-2xl font-bold text-white">{totalMembers}</h3>
            </div>
          </div>
        </CardContent>
      </Card>

<Card className="bg-gray-900 border-gray-800">
        <CardContent className="pt-6">
          <div className="flex items-center">
            <div className="p-2 bg-green-900/30 text-green-400 rounded mr-4">
              <UserCheck className="h-6 w-6" />
            </div>
            <div>
              <p className="text-sm text-gray-400">Active Members</p>
              <h3 className="text-2xl font-bold text-white">{activeMembers}</h3>
            </div>
          </div>
        </CardContent>
      </Card>

<Card className="bg-gray-900 border-gray-800">
        <CardContent className="pt-6">
          <div className="flex items-center">
            <div className="p-2 bg-amber-900/30 text-amber-400 rounded mr-4">
              <UserX className="h-6 w-6" />
            </div>
            <div>
              <p className="text-sm text-gray-400">Inactive Members</p>
              <h3 className="text-2xl font-bold text-white">{inactiveMembers}</h3>
            </div>
          </div>
        </CardContent>
      </Card>

<Card className="bg-gray-900 border-gray-800">
        <CardContent className="pt-6">
          <div className="flex items-center">
            <div className="p-2 bg-purple-900/30 text-purple-400 rounded mr-4">
              <Truck className="h-6 w-6" />
            </div>
            <div>
              <p className="text-sm text-gray-400">Drivers</p>
              <h3 className="text-2xl font-bold text-white">{roleStats.driver}</h3>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/team/team-member-performance.tsx" isEdit="true"
"use client"

import { useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ArrowUpRight, ArrowDownRight, CheckCircle, Clock, Zap } from "lucide-react"

interface TeamMemberPerformanceProps {
  memberId: string
}

export default function TeamMemberPerformance({ memberId }: TeamMemberPerformanceProps) {
  const [timeframe, setTimeframe] = useState("weekly")

// Mock performance data - in a real app, this would come from an API
  const performanceData = {
    weekly: {
      tasks_completed: 12,
      tasks_trend: 8,
      on_time_rate: 95,
      on_time_trend: 3,
      efficiency_score: 8.7,
      efficiency_trend: 5,
    },
    monthly: {
      tasks_completed: 48,
      tasks_trend: 12,
      on_time_rate: 92,
      on_time_trend: -2,
      efficiency_score: 8.4,
      efficiency_trend: 2,
    },
    quarterly: {
      tasks_completed: 156,
      tasks_trend: 15,
      on_time_rate: 89,
      on_time_trend: 4,
      efficiency_score: 8.2,
      efficiency_trend: 7,
    },
  }

const currentData = performanceData[timeframe as keyof typeof performanceData]

return (
    <div>
      <Tabs defaultValue="weekly" onValueChange={setTimeframe}>
        <TabsList className="mb-4">
          <TabsTrigger value="weekly">Weekly</TabsTrigger>
          <TabsTrigger value="monthly">Monthly</TabsTrigger>
          <TabsTrigger value="quarterly">Quarterly</TabsTrigger>
        </TabsList>

<TabsContent value="quarterly" className="mt-0">
          <PerformanceMetrics data={performanceData.quarterly} />
        </TabsContent>
      </Tabs>
    </div>
  )
}

function PerformanceMetrics({ data }: { data: any }) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
      <Card className="bg-gray-800 border-gray-700">
        <CardContent className="pt-6">
          <div className="flex items-center">
            <div className="p-2 bg-blue-900/30 text-blue-400 rounded mr-4">
              <CheckCircle className="h-5 w-5" />
            </div>
            <div>
              <p className="text-sm text-gray-400">Tasks Completed</p>
              <h3 className="text-2xl font-bold text-white">{data.tasks_completed}</h3>
              <div className="flex items-center text-xs mt-1">
                <span className={`flex items-center ${data.tasks_trend > 0 ? "text-green-400" : "text-red-400"}`}>
                  {data.tasks_trend > 0 ? (
                    <ArrowUpRight className="h-3 w-3 mr-1" />
                  ) : (
                    <ArrowDownRight className="h-3 w-3 mr-1" />
                  )}
                  {Math.abs(data.tasks_trend)}%
                </span>
                <span className="text-gray-500 ml-1">vs previous</span>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

<Card className="bg-gray-800 border-gray-700">
        <CardContent className="pt-6">
          <div className="flex items-center">
            <div className="p-2 bg-green-900/30 text-green-400 rounded mr-4">
              <Clock className="h-5 w-5" />
            </div>
            <div>
              <p className="text-sm text-gray-400">On-Time Rate</p>
              <h3 className="text-2xl font-bold text-white">{data.on_time_rate}%</h3>
              <div className="flex items-center text-xs mt-1">
                <span className={`flex items-center ${data.on_time_trend > 0 ? "text-green-400" : "text-red-400"}`}>
                  {data.on_time_trend > 0 ? (
                    <ArrowUpRight className="h-3 w-3 mr-1" />
                  ) : (
                    <ArrowDownRight className="h-3 w-3 mr-1" />
                  )}
                  {Math.abs(data.on_time_trend)}%
                </span>
                <span className="text-gray-500 ml-1">vs previous</span>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

<Card className="bg-gray-800 border-gray-700">
        <CardContent className="pt-6">
          <div className="flex items-center">
            <div className="p-2 bg-purple-900/30 text-purple-400 rounded mr-4">
              <Zap className="h-5 w-5" />
            </div>
            <div>
              <p className="text-sm text-gray-400">Efficiency Score</p>
              <h3 className="text-2xl font-bold text-white">{data.efficiency_score}</h3>
              <div className="flex items-center text-xs mt-1">
                <span className={`flex items-center ${data.efficiency_trend > 0 ? "text-green-400" : "text-red-400"}`}>
                  {data.efficiency_trend > 0 ? (
                    <ArrowUpRight className="h-3 w-3 mr-1" />
                  ) : (
                    <ArrowDownRight className="h-3 w-3 mr-1" />
                  )}
                  {Math.abs(data.efficiency_trend)}%
                </span>
                <span className="text-gray-500 ml-1">vs previous</span>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/team/team-member-activity.tsx" isEdit="true"
import { Badge } from "@/components/ui/badge"
import { Package, Route, FileText, MessageSquare, Calendar } from "lucide-react"

interface TeamMemberActivityProps {
  memberId: string
}

export default function TeamMemberActivity({ memberId }: TeamMemberActivityProps) {
  // Mock activity data - in a real app, this would come from an API
  const activities = [
    {
      id: 1,
      activity_type: "shipment",
      description: "Delivered shipment #SHP-1234567890 to Customer Facility in Houston",
      created_at: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(),
    },
    {
      id: 2,
      activity_type: "route",
      description: "Started route from New York to Chicago",
      created_at: new Date(Date.now() - 8 * 60 * 60 * 1000).toISOString(),
    },
    {
      id: 3,
      activity_type: "document",
      description: "Uploaded delivery receipt for shipment #SHP-0987654321",
      created_at: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(),
    },
    {
      id: 4,
      activity_type: "message",
      description: "Sent message to dispatch about delay due to traffic",
      created_at: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
    },
    {
      id: 5,
      activity_type: "schedule",
      description: "Accepted assignment for delivery to Los Angeles",
      created_at: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(),
    },
  ]

function getActivityIcon(type: string) {
    switch (type) {
      case "shipment":
        return <Package className="h-4 w-4" />
      case "route":
        return <Route className="h-4 w-4" />
      case "document":
        return <FileText className="h-4 w-4" />
      case "message":
        return <MessageSquare className="h-4 w-4" />
      case "schedule":
        return <Calendar className="h-4 w-4" />
      default:
        return <Package className="h-4 w-4" />
    }
  }

function getActivityColor(type: string) {
    switch (type) {
      case "shipment":
        return "bg-blue-900/30 text-blue-400"
      case "route":
        return "bg-green-900/30 text-green-400"
      case "document":
        return "bg-amber-900/30 text-amber-400"
      case "message":
        return "bg-purple-900/30 text-purple-400"
      case "schedule":
        return "bg-red-900/30 text-red-400"
      default:
        return "bg-gray-900/30 text-gray-400"
    }
  }

function formatTimeAgo(dateString: string) {
    const date = new Date(dateString)
    const now = new Date()
    const diffMs = now.getTime() - date.getTime()
    const diffSec = Math.round(diffMs / 1000)
    const diffMin = Math.round(diffSec / 60)
    const diffHour = Math.round(diffMin / 60)
    const diffDay = Math.round(diffHour / 24)

if (diffSec < 60) {
      return `${diffSec} seconds ago`
    } else if (diffMin < 60) {
      return `${diffMin} minutes ago`
    } else if (diffHour < 24) {
      return `${diffHour} hours ago`
    } else {
      return `${diffDay} days ago`
    }
  }

return (
    <div className="space-y-4">
      {activities.map((activity) => (
        <div key={activity.id} className="flex items-start">
          <div className={`p-2 rounded mr-3 ${getActivityColor(activity.activity_type)}`}>
            {getActivityIcon(activity.activity_type)}
          </div>
          <div className="flex-1">
            <div className="flex justify-between items-start">
              <p className="text-sm text-white">{activity.description}</p>
              <Badge variant="outline" className="ml-2 bg-gray-800 text-gray-400 border-gray-700 text-xs">
                {formatTimeAgo(activity.created_at)}
              </Badge>
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/actions/team.ts" isEdit="true"
"use server"

export async function getTeamMembers() {
  try {
    // For demo purposes, return mock data
    const members = [
      {
        id: "1",
        name: "John Doe",
        email: "john.doe@example.com",
        role: "admin",
        status: "active",
        created_at: "2023-01-15T00:00:00Z",
        avatar_url: null,
      },
      {
        id: "2",
        name: "Jane Smith",
        email: "jane.smith@example.com",
        role: "driver",
        status: "active",
        created_at: "2023-02-20T00:00:00Z",
        avatar_url: null,
        rating: 4.8,
      },
      {
        id: "3",
        name: "Michael Johnson",
        email: "michael.johnson@example.com",
        role: "dispatcher",
        status: "active",
        created_at: "2023-03-10T00:00:00Z",
        avatar_url: null,
      },
      {
        id: "4",
        name: "Sarah Williams",
        email: "sarah.williams@example.com",
        role: "customer",
        status: "inactive",
        created_at: "2023-04-05T00:00:00Z",
        avatar_url: null,
      },
      {
        id: "5",
        name: "David Brown",
        email: "david.brown@example.com",
        role: "driver",
        status: "active",
        created_at: "2023-05-12T00:00:00Z",
        avatar_url: null,
        rating: 4.5,
      },
    ]

return { success: true, members }
  } catch (error) {
    console.error("Error fetching team members:", error)
    return { success: false, error: "Failed to fetch team members" }
  }
}

export async function getTeamMemberById(id: string) {
  try {
    // For demo purposes, return mock data
    const members = [
      {
        id: "1",
        name: "John Doe",
        email: "john.doe@example.com",
        role: "admin",
        status: "active",
        created_at: "2023-01-15T00:00:00Z",
        avatar_url: null,
        location: "New York, USA",
        phone: "+1 (555) 123-4567",
      },
      {
        id: "2",
        name: "Jane Smith",
        email: "jane.smith@example.com",
        role: "driver",
        status: "active",
        created_at: "2023-02-20T00:00:00Z",
        avatar_url: null,
        location: "Los Angeles, USA",
        phone: "+1 (555) 987-6543",
        rating: 4.8,
        rating_count: 42,
        stats: {
          total_deliveries: 87,
          on_time_rate: "94%",
          avg_delivery_time: "2.3h",
          safety_score: "9.1",
        },
      },
    ]

const member = members.find((m) => m.id === id)

if (!member) {
      return { success: false, error: "Team member not found" }
    }

return { success: true, member }
  } catch (error) {
    console.error("Error fetching team member:", error)
    return { success: false, error: "Failed to fetch team member" }
  }
}

export async function inviteTeamMember(data: {
  name: string
  email: string
  role: string
  message?: string
}) {
  try {
    // For demo purposes, we'll just return success
    return {
      success: true,
      message: `Invitation sent to ${data.email}`,
    }
  } catch (error) {
    console.error("Error inviting team member:", error)
    return { success: false, error: "Failed to invite team member" }
  }
}
[V0_FILE]typescriptreact:file="lib/auth-context.tsx" isEdit="true"
"use client"

import { createContext, useContext, useState, useEffect, type ReactNode } from "react"

interface User {
  id: string
  name: string
  email: string
  role: string
}

interface AuthContextType {
  user: User | null
  login: (email: string, password: string) => Promise<{ success: boolean; message?: string }>
  logout: () => void
  isLoading: boolean
}

const AuthContext = createContext<AuthContextType | undefined>(undefined)

export function AuthProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<User | null>(null)
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    // Check if user is logged in
    const storedUser = localStorage.getItem("user")
    if (storedUser) {
      try {
        setUser(JSON.parse(storedUser))
      } catch (error) {
        console.error("Error parsing user data:", error)
      }
    }
    setIsLoading(false)
  }, [])

const login = async (email: string, password: string) => {
    try {
      // For demo purposes, we'll simulate a successful login
      // In a real app, this would make an API call to authenticate

// Determine user role based on email for demo purposes
      let role = "individual"
      if (email.includes("carrier")) {
        role = "carrier"
      } else if (email.includes("company")) {
        role = "company"
      }

const mockUser = {
        id: "user-123",
        name: email.split("@")[0].replace(".", " "),
        email,
        role,
      }

// Store user in localStorage
      localStorage.setItem("user", JSON.stringify(mockUser))
      setUser(mockUser)

return { success: true }
    } catch (error) {
      console.error("Login error:", error)
      return { success: false, message: "Invalid credentials" }
    }
  }

const logout = () => {
    localStorage.removeItem("user")
    setUser(null)
  }

return <AuthContext.Provider value={{ user, login, logout, isLoading }}>{children}</AuthContext.Provider>
}

export function useAuth() {
  const context = useContext(AuthContext)
  if (context === undefined) {
    throw new Error("useAuth must be used within an AuthProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="lib/translation-context.tsx" isEdit="true"
"use client"

import { createContext, useContext, useState, useEffect, type ReactNode } from "react"

type Language = "en" | "fr" | "ar" | "es"

type TranslationContextType = {
  language: Language
  setLanguage: (language: Language) => void
  t: (key: string) => string
  dir: "ltr" | "rtl"
}

const TranslationContext = createContext<TranslationContextType | undefined>(undefined)

// Comprehensive translations for all supported languages
const translations: Record<Language, Record<string, string>> = {
  en: {
    "app.name": "MarocTransit",
    "app.description": "Smart Logistics Solutions",
    "nav.dashboard": "Dashboard",
    "nav.shipments": "Shipments",
    "nav.carriers": "Carriers",
    "nav.fleet": "Fleet",
    "nav.locations": "Locations",
    "nav.analytics": "Analytics",
    "nav.messages": "Messages",
    "nav.team": "Team",
    "nav.documents": "Documents",
    "nav.ai_tools": "AI Tools",
    "nav.settings": "Settings",
    "hero.title": "Connect Shippers with Carriers Instantly",
    "hero.subtitle":
      "Our AI-powered platform matches shippers with the perfect carriers based on location, vehicle type, and delivery requirements.",
    "hero.shipper": "I'm a Shipper",
    "hero.carrier": "I'm a Carrier",
    "stats.cost": "Cost Reduction",
    "stats.fuel": "Fuel Savings",
    "stats.efficiency": "Increased Efficiency",
    "features.title": "AI-Powered Logistics Solutions",
    "features.subtitle": "Transform your fleet management with advanced technology",
    "features.matching": "AI-Powered Matching",
    "features.route": "Route Optimization",
    "features.monitoring": "Real-time Monitoring",
    "features.analytics": "Predictive Analytics",
    "features.maintenance": "Predictive Maintenance",
    "features.fuel": "Fuel Optimization",
    "cta.title": "Ready to Transform Your Logistics Operations?",
    "cta.subtitle": "Join the digital revolution in Moroccan logistics today",
    "cta.shipper": "Sign Up as Shipper",
    "cta.carrier": "Sign Up as Carrier",
    "team.title": "Team Management",
    "team.subtitle": "Manage your logistics team members and their roles",
    "team.invite": "Invite Team Member",
    "team.all": "All Members",
    "team.admins": "Admins",
    "team.drivers": "Drivers",
    "team.dispatchers": "Dispatchers",
    "team.customers": "Customers",
    "team.filter": "Filter",
    "team.total": "Total Members",
    "team.active": "Active Members",
    "team.inactive": "Inactive Members",
    "team.performance": "Performance Metrics",
    "team.activity": "Recent Activity",
    "team.stats": "Driver Statistics",
    "team.edit": "Edit",
    "team.deactivate": "Deactivate",
    "team.view": "View Profile",
  },
  fr: {
    "app.name": "MarocTransit",
    "app.description": "Solutions Logistiques Intelligentes",
    "nav.dashboard": "Tableau de Bord",
    "nav.shipments": "Expéditions",
    "nav.carriers": "Transporteurs",
    "nav.fleet": "Flotte",
    "nav.locations": "Emplacements",
    "nav.analytics": "Analytique",
    "nav.messages": "Messages",
    "nav.team": "Équipe",
    "nav.documents": "Documents",
    "nav.ai_tools": "Outils IA",
    "nav.settings": "Paramètres",
    "hero.title": "Connectez les Expéditeurs aux Transporteurs Instantanément",
    "hero.subtitle":
      "Notre plateforme alimentée par l'IA met en relation les expéditeurs avec les transporteurs parfaits en fonction de l'emplacement, du type de véhicule et des exigences de livraison.",
    "hero.shipper": "Je suis Expéditeur",
    "hero.carrier": "Je suis Transporteur",
    "stats.cost": "Réduction des Coûts",
    "stats.fuel": "Économies de Carburant",
    "stats.efficiency": "Efficacité Accrue",
    "features.title": "Solutions Logistiques Alimentées par l'IA",
    "features.subtitle": "Transformez la gestion de votre flotte avec une technologie avancée",
    "features.matching": "Mise en Relation par IA",
    "features.route": "Optimisation des Itinéraires",
    "features.monitoring": "Surveillance en Temps Réel",
    "features.analytics": "Analytique Prédictive",
    "features.maintenance": "Maintenance Prédictive",
    "features.fuel": "Optimisation du Carburant",
    "cta.title": "Prêt à Transformer vos Opérations Logistiques?",
    "cta.subtitle": "Rejoignez la révolution numérique de la logistique marocaine aujourd'hui",
    "cta.shipper": "S'inscrire comme Expéditeur",
    "cta.carrier": "S'inscrire comme Transporteur",
    "team.title": "Gestion d'Équipe",
    "team.subtitle": "Gérez les membres de votre équipe logistique et leurs rôles",
    "team.invite": "Inviter un Membre",
    "team.all": "Tous les Membres",
    "team.admins": "Administrateurs",
    "team.drivers": "Chauffeurs",
    "team.dispatchers": "Répartiteurs",
    "team.customers": "Clients",
    "team.filter": "Filtrer",
    "team.total": "Membres Totaux",
    "team.active": "Membres Actifs",
    "team.inactive": "Membres Inactifs",
    "team.performance": "Métriques de Performance",
    "team.activity": "Activité Récente",
    "team.stats": "Statistiques du Chauffeur",
    "team.edit": "Modifier",
    "team.deactivate": "Désactiver",
    "team.view": "Voir le Profil",
  },
  ar: {
    "app.name": "ماروك ترانزيت",
    "app.description": "حلول لوجستية ذكية",
    "nav.dashboard": "لوحة القيادة",
    "nav.shipments": "الشحنات",
    "nav.carriers": "الناقلون",
    "nav.fleet": "الأسطول",
    "nav.locations": "المواقع",
    "nav.analytics": "التحليلات",
    "nav.messages": "الرسائل",
    "nav.team": "الفريق",
    "nav.documents": "المستندات",
    "nav.ai_tools": "أدوات الذكاء الاصطناعي",
    "nav.settings": "الإعدادات",
    "hero.title": "ربط الشاحنين بالناقلين فوراً",
    "hero.subtitle":
      "تقوم منصتنا المدعومة بالذكاء الاصطناعي بمطابقة الشاحنين مع الناقلين المثاليين بناءً على الموقع ونوع المركبة ومتطلبات التسليم.",
    "hero.shipper": "أنا شاحن",
    "hero.carrier": "أنا ناقل",
    "stats.cost": "تخفيض التكلفة",
    "stats.fuel": "توفير الوقود",
    "stats.efficiency": "زيادة الكفاءة",
    "features.title": "حلول لوجستية مدعومة بالذكاء الاصطناعي",
    "features.subtitle": "قم بتحويل إدارة أسطولك بتكنولوجيا متقدمة",
    "features.matching": "مطابقة بالذكاء الاصطناعي",
    "features.route": "تحسين المسار",
    "features.monitoring": "مراقبة في الوقت الحقيقي",
    "features.analytics": "تحليلات تنبؤية",
    "features.maintenance": "صيانة تنبؤية",
    "features.fuel": "تحسين استهلاك الوقود",
    "cta.title": "هل أنت مستعد لتحويل عملياتك اللوجستية؟",
    "cta.subtitle": "انضم إلى الثورة الرقمية في الخدمات اللوجستية المغربية اليوم",
    "cta.shipper": "التسجيل كشاحن",
    "cta.carrier": "التسجيل كناقل",
    "team.title": "إدارة الفريق",
    "team.subtitle": "إدارة أعضاء فريق الخدمات اللوجستية وأدوارهم",
    "team.invite": "دعوة عضو للفريق",
    "team.all": "جميع الأعضاء",
    "team.admins": "المسؤولون",
    "team.drivers": "السائقون",
    "team.dispatchers": "المرسلون",
    "team.customers": "العملاء",
    "team.filter": "تصفية",
    "team.total": "إجمالي الأعضاء",
    "team.active": "الأعضاء النشطون",
    "team.inactive": "الأعضاء غير النشطين",
    "team.performance": "مقاييس الأداء",
    "team.activity": "النشاط الأخير",
    "team.stats": "إحصائيات السائق",
    "team.edit": "تعديل",
    "team.deactivate": "تعطيل",
    "team.view": "عرض الملف الشخصي",
  },
  es: {
    "app.name": "MarocTransit",
    "app.description": "Soluciones Logísticas Inteligentes",
    "nav.dashboard": "Panel de Control",
    "nav.shipments": "Envíos",
    "nav.carriers": "Transportistas",
    "nav.fleet": "Flota",
    "nav.locations": "Ubicaciones",
    "nav.analytics": "Analítica",
    "nav.messages": "Mensajes",
    "nav.team": "Equipo",
    "nav.documents": "Documentos",
    "nav.ai_tools": "Herramientas IA",
    "nav.settings": "Configuración",
    "hero.title": "Conecta Remitentes con Transportistas al Instante",
    "hero.subtitle":
      "Nuestra plataforma impulsada por IA conecta a los remitentes con los transportistas perfectos según la ubicación, el tipo de vehículo y los requisitos de entrega.",
    "hero.shipper": "Soy Remitente",
    "hero.carrier": "Soy Transportista",
    "stats.cost": "Reducción de Costos",
    "stats.fuel": "Ahorro de Combustible",
    "stats.efficiency": "Aumento de Eficiencia",
    "features.title": "Soluciones Logísticas Impulsadas por IA",
    "features.subtitle": "Transforma la gestión de tu flota con tecnología avanzada",
    "features.matching": "Emparejamiento con IA",
    "features.route": "Optimización de Rutas",
    "features.monitoring": "Monitoreo en Tiempo Real",
    "features.analytics": "Analítica Predictiva",
    "features.maintenance": "Mantenimiento Predictivo",
    "features.fuel": "Optimización de Combustible",
    "cta.title": "¿Listo para Transformar tus Operaciones Logísticas?",
    "cta.subtitle": "Únete a la revolución digital en la logística marroquí hoy",
    "cta.shipper": "Registrarse como Remitente",
    "cta.carrier": "Registrarse como Transportista",
    "team.title": "Gestión de Equipo",
    "team.subtitle": "Gestiona los miembros de tu equipo logístico y sus roles",
    "team.invite": "Invitar Miembro",
    "team.all": "Todos los Miembros",
    "team.admins": "Administradores",
    "team.drivers": "Conductores",
    "team.dispatchers": "Despachadores",
    "team.customers": "Clientes",
    "team.filter": "Filtrar",
    "team.total": "Total de Miembros",
    "team.active": "Miembros Activos",
    "team.inactive": "Miembros Inactivos",
    "team.performance": "Métricas de Rendimiento",
    "team.activity": "Actividad Reciente",
    "team.stats": "Estadísticas del Conductor",
    "team.edit": "Editar",
    "team.deactivate": "Desactivar",
    "team.view": "Ver Perfil",
  },
}

export function TranslationProvider({ children }: { children: ReactNode }) {
  const [language, setLanguage] = useState<Language>("en")
  const [dir, setDir] = useState<"ltr" | "rtl">("ltr")

useEffect(() => {
    // Check if user has a preferred language stored
    const storedLang = localStorage.getItem("preferredLanguage") as Language
    if (storedLang && Object.keys(translations).includes(storedLang)) {
      setLanguage(storedLang)
    }
  }, [])

useEffect(() => {
    // Set direction based on language
    setDir(language === "ar" ? "rtl" : "ltr")

// Update HTML lang and dir attributes
    document.documentElement.lang = language
    document.documentElement.dir = language === "ar" ? "rtl" : "ltr"

// Store user preference
    localStorage.setItem("preferredLanguage", language)
  }, [language])

const t = (key: string): string => {
    return translations[language][key] || key
  }

return <TranslationContext.Provider value={{ language, setLanguage, t, dir }}>{children}</TranslationContext.Provider>
}

export function useTranslation() {
  const context = useContext(TranslationContext)
  if (context === undefined) {
    throw new Error("useTranslation must be used within a TranslationProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="components/hero-section.tsx" isEdit="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Truck, MapPin, CheckCircle, Brain, Clock, ArrowRight } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useTranslation } from "@/lib/translation-context"

export default function HeroSection() {
  const { t, dir } = useTranslation()
  const [originCity, setOriginCity] = useState("")
  const [destinationCity, setDestinationCity] = useState("")
  const [truckType, setTruckType] = useState("")
  const [searchStep, setSearchStep] = useState(1)

const handleSearch = () => {
    if (searchStep === 1 && originCity && destinationCity) {
      setSearchStep(2)
    } else if (searchStep === 2 && truckType) {
      // In a real app, this would navigate to search results
      setSearchStep(3)
    }
  }

return (
    <div className="relative overflow-hidden pt-12 pb-16 sm:pb-24 bg-[#0f172a]">
      {/* Background grid pattern */}
      <div className="absolute inset-0 bg-[url('/images/grid-pattern.svg')] opacity-5" />

{/* Gradients */}
      <div className="absolute inset-x-0 top-0 h-96 bg-gradient-to-b from-blue-600/20 via-blue-600/5 to-transparent" />
      <div className="absolute -top-40 -right-40 h-[500px] w-[500px] rounded-full bg-blue-500/10 blur-3xl" />
      <div className="absolute -bottom-40 -left-40 h-[500px] w-[500px] rounded-full bg-purple-500/10 blur-3xl" />

<div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div className="lg:grid lg:grid-cols-12 lg:gap-8 items-center">
          <div className="lg:col-span-6 xl:col-span-5">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5 }}
              className="text-center lg:text-left"
            >
              <div className="inline-flex items-center px-3 py-1 rounded-full bg-blue-900/50 text-blue-400 text-sm font-medium mb-6">
                <Brain className="h-4 w-4 mr-2 text-blue-400" />
                <span>AI-Powered Logistics Platform</span>
              </div>

<h1 className="text-4xl font-extrabold tracking-tight text-white sm:text-5xl md:text-6xl lg:text-5xl xl:text-6xl">
                <span className="block xl:inline">{t("hero.title")}</span>
              </h1>

<p className="mt-3 max-w-md mx-auto lg:mx-0 text-lg text-gray-400 sm:text-xl md:mt-5">
                {t("hero.subtitle")}
              </p>

<div className="mt-10 flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
                <Button size="lg" className="bg-blue-600 hover:bg-blue-700 text-white">
                  {t("hero.shipper")}
                </Button>
                <Button size="lg" variant="outline" className="text-white border-blue-600 hover:bg-blue-700/20">
                  {t("hero.carrier")}
                </Button>
              </div>

{/* Key benefits */}
              <div className="mt-12 grid grid-cols-1 gap-4 sm:grid-cols-3">
                <div className="flex flex-col items-center lg:items-start">
                  <div className="text-blue-500 text-2xl font-bold">30%</div>
                  <div className="text-gray-400 text-sm">{t("stats.cost")}</div>
                </div>
                <div className="flex flex-col items-center lg:items-start">
                  <div className="text-blue-500 text-2xl font-bold">24%</div>
                  <div className="text-gray-400 text-sm">{t("stats.fuel")}</div>
                </div>
                <div className="flex flex-col items-center lg:items-start">
                  <div className="text-blue-500 text-2xl font-bold">45%</div>
                  <div className="text-gray-400 text-sm">{t("stats.efficiency")}</div>
                </div>
              </div>

{/* Trust indicators */}
              <div className="mt-8 flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
                <div className="flex items-center text-gray-400">
                  <CheckCircle className="h-5 w-5 text-blue-500 mr-2" />
                  <span>{t("features.maintenance")}</span>
                </div>
                <div className="flex items-center text-gray-400">
                  <CheckCircle className="h-5 w-5 text-blue-500 mr-2" />
                  <span>{t("features.route")}</span>
                </div>
                <div className="flex items-center text-gray-400">
                  <CheckCircle className="h-5 w-5 text-blue-500 mr-2" />
                  <span>{t("features.monitoring")}</span>
                </div>
              </div>
            </motion.div>
          </div>

<div className="mt-12 lg:mt-0 lg:col-span-6 xl:col-span-7">
            <motion.div
              initial={{ opacity: 0, scale: 0.95 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.5, delay: 0.2 }}
              className="relative"
            >
              <Card className="bg-gray-900/70 backdrop-blur-sm border-gray-800" id="get-quote">
                <CardHeader>
                  <CardTitle className="text-2xl font-bold text-white flex items-center">
                    <Brain className="h-6 w-6 text-blue-500 mr-2" />
                    {t("features.matching")}
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  {searchStep === 1 && (
                    <div className="space-y-4">
                      <div className="space-y-2">
                        <label className="text-sm font-medium text-gray-300">Origin</label>
                        <div className="relative">
                          <MapPin className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-500" />
                          <Input
                            placeholder="Enter pickup city or location"
                            className="pl-10 bg-gray-800 border-gray-700 text-white placeholder:text-gray-500 focus-visible:ring-blue-500"
                            value={originCity}
                            onChange={(e) => setOriginCity(e.target.value)}
                          />
                        </div>
                      </div>

<div className="space-y-2">
                        <label className="text-sm font-medium text-gray-300">Destination</label>
                        <div className="relative">
                          <MapPin className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-500" />
                          <Input
                            placeholder="Enter delivery city or location"
                            className="pl-10 bg-gray-800 border-gray-700 text-white placeholder:text-gray-500 focus-visible:ring-blue-500"
                            value={destinationCity}
                            onChange={(e) => setDestinationCity(e.target.value)}
                          />
                        </div>
                      </div>

<Button
                        className="w-full bg-blue-600 hover:bg-blue-700 text-white"
                        onClick={handleSearch}
                        disabled={!originCity || !destinationCity}
                      >
                        Find Carriers
                      </Button>
                    </div>
                  )}

{searchStep === 2 && (
                    <div className="space-y-4">
                      <div className="flex items-center justify-between text-sm text-gray-400 mb-2">
                        <div className="flex items-center">
                          <Badge className="bg-blue-600 text-white mr-2">1</Badge>
                          <span>
                            Route: {originCity} to {destinationCity}
                          </span>
                        </div>
                        <Button
                          variant="ghost"
                          size="sm"
                          className="text-gray-400 hover:text-white"
                          onClick={() => setSearchStep(1)}
                        >
                          Edit
                        </Button>
                      </div>

<div className="space-y-2">
                        <label className="text-sm font-medium text-gray-300">Truck Type</label>
                        <Select value={truckType} onValueChange={setTruckType}>
                          <SelectTrigger className="bg-gray-800 border-gray-700 text-white focus:ring-blue-500">
                            <SelectValue placeholder="Select truck type" />
                          </SelectTrigger>
                          <SelectContent className="bg-gray-800 border-gray-700 text-white">
                            <SelectItem value="flatbed">Flatbed Truck</SelectItem>
                            <SelectItem value="refrigerated">Refrigerated Truck</SelectItem>
                            <SelectItem value="box">Box Truck</SelectItem>
                            <SelectItem value="tanker">Tanker Truck</SelectItem>
                            <SelectItem value="container">Container Truck</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>

<div className="space-y-2">
                        <label className="text-sm font-medium text-gray-300">Cargo Weight (tons)</label>
                        <Input
                          type="number"
                          placeholder="Enter cargo weight"
                          className="bg-gray-800 border-gray-700 text-white placeholder:text-gray-500 focus-visible:ring-blue-500"
                        />
                      </div>

<Button
                        className="w-full bg-blue-600 hover:bg-blue-700 text-white"
                        onClick={handleSearch}
                        disabled={!truckType}
                      >
                        Match with Carriers
                      </Button>
                    </div>
                  )}

{searchStep === 3 && (
                    <div className="space-y-4">
                      <div className="bg-blue-900/30 p-4 rounded-lg border border-blue-800">
                        <div className="flex items-center mb-3">
                          <Brain className="h-5 w-5 text-blue-400 mr-2" />
                          <h3 className="text-lg font-medium text-white">AI Matching Results</h3>
                        </div>
                        <p className="text-sm text-gray-300 mb-3">We found 5 carriers matching your requirements:</p>

<div className="space-y-3">
                          {[
                            { name: "TransitExpress", rating: 4.9, price: "$1,250", eta: "2d 4h", match: 98 },
                            { name: "FastTruck Inc.", rating: 4.7, price: "$1,180", eta: "2d 8h", match: 95 },
                            { name: "SpeedLogistics", rating: 4.8, price: "$1,320", eta: "1d 22h", match: 92 },
                          ].map((carrier, index) => (
                            <div
                              key={index}
                              className="bg-gray-800/70 p-3 rounded-md border border-gray-700 flex justify-between items-center"
                            >
                              <div>
                                <div className="flex items-center">
                                  <Truck className="h-4 w-4 text-blue-500 mr-2" />
                                  <span className="font-medium text-white">{carrier.name}</span>
                                  <div className="ml-2 flex items-center text-yellow-500 text-xs">
                                    <span>★</span>
                                    <span>{carrier.rating}</span>
                                  </div>
                                </div>
                                <div className="text-xs text-gray-400 mt-1 flex items-center">
                                  <Clock className="h-3 w-3 mr-1" />
                                  <span>ETA: {carrier.eta}</span>
                                  <span className="mx-2">•</span>
                                  <span>{carrier.price}</span>
                                </div>
                              </div>
                              <div className="flex items-center">
                                <Badge className="bg-purple-600 text-white mr-2">{carrier.match}% Match</Badge>
                                <Button
                                  size="sm"
                                  variant="outline"
                                  className="text-white border-blue-700 hover:bg-blue-900/50"
                                >
                                  Select
                                </Button>
                              </div>
                            </div>
                          ))}
                        </div>

<div className="mt-4 text-center">
                          <Button variant="link" className="text-blue-400 hover:text-blue-300">
                            View all matches <ArrowRight className="h-4 w-4 ml-1" />
                          </Button>
                        </div>
                      </div>

<Button
                        className="w-full bg-blue-600 hover:bg-blue-700 text-white"
                        onClick={() => setSearchStep(1)}
                      >
                        New Search
                      </Button>
                    </div>
                  )}

{searchStep !== 3 && (
                    <div className="mt-4">
                      <div className="relative p-4 bg-gray-800/70 rounded-lg border border-gray-700">
                        <div className="flex items-center mb-2">
                          <Badge className="bg-purple-600 text-white mr-2">AI</Badge>
                          <h3 className="text-sm font-medium text-white">How our matching works</h3>
                        </div>
                        <p className="text-xs text-gray-400 mb-3">
                          Our AI algorithm analyzes multiple factors to find your perfect carrier match:
                        </p>
                        <div className="grid grid-cols-2 gap-2 text-xs">
                          <div className="flex items-start">
                            <CheckCircle className="h-3 w-3 text-green-500 mr-1 mt-0.5" />
                            <span className="text-gray-300">Location proximity</span>
                          </div>
                          <div className="flex items-start">
                            <CheckCircle className="h-3 w-3 text-green-500 mr-1 mt-0.5" />
                            <span className="text-gray-300">Vehicle compatibility</span>
                          </div>
                          <div className="flex items-start">
                            <CheckCircle className="h-3 w-3 text-green-500 mr-1 mt-0.5" />
                            <span className="text-gray-300">Performance history</span>
                          </div>
                          <div className="flex items-start">
                            <CheckCircle className="h-3 w-3 text-green-500 mr-1 mt-0.5" />
                            <span className="text-gray-300">Price optimization</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  )}
                </CardContent>
              </Card>
            </motion.div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/final-cta.tsx" isEdit="true"
"use client"

import Link from "next/link"
import { motion } from "framer-motion"
import { Truck, Users, ArrowRight } from "lucide-react"
import { Button } from "@/components/ui/button"
import { useTranslation } from "@/lib/translation-context"

export default function FinalCTA() {
  const { t } = useTranslation()

return (
    <section className="py-16 sm:py-24 relative overflow-hidden">
      <div className="absolute inset-0 bg-gradient-to-r from-blue-600 to-blue-800" />
      <div className="absolute inset-0 bg-[url('/images/grid-pattern.svg')] opacity-10" />
      <div className="absolute top-0 right-0 w-[600px] h-[600px] bg-blue-500/30 rounded-full filter blur-3xl" />
      <div className="absolute bottom-0 left-0 w-[400px] h-[400px] bg-blue-500/30 rounded-full filter blur-3xl" />

<div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div className="max-w-4xl mx-auto text-center">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5 }}
          >
            <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-6">{t("cta.title")}</h2>
            <p className="text-xl text-blue-100 mb-12">{t("cta.subtitle")}</p>

<div className="flex flex-col sm:flex-row justify-center gap-4">
              <Button size="lg" className="bg-white text-blue-700 hover:bg-blue-50" asChild>
                <Link href="/signup?type=shipper">
                  <Truck className="mr-2 h-5 w-5" />
                  {t("cta.shipper")}
                </Link>
              </Button>

<Button size="lg" variant="outline" className="border-white text-white hover:bg-blue-700/20" asChild>
                <Link href="/signup?type=carrier">
                  <Users className="mr-2 h-5 w-5" />
                  {t("cta.carrier")}
                </Link>
              </Button>
            </div>

<div className="mt-8">
              <Link href="/enterprise" className="inline-flex items-center text-white hover:text-blue-100">
                Learn more about our enterprise solutions
                <ArrowRight className="ml-2 h-4 w-4" />
              </Link>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/features-section.tsx" isEdit="true"
"use client"

import { motion } from "framer-motion"
import { Brain, Route, Activity, Zap, Clock, LineChart } from "lucide-react"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import { useTranslation } from "@/lib/translation-context"

export default function FeaturesSection() {
  const { t } = useTranslation()

const features = [
    {
      icon: <Brain className="h-8 w-8 text-blue-500" />,
      title: t("features.matching"),
      description:
        "Our advanced algorithm connects shippers with the perfect carriers based on location, vehicle type, and delivery requirements.",
    },
    {
      icon: <Route className="h-8 w-8 text-blue-500" />,
      title: t("features.route"),
      description:
        "AI-optimized routes reduce fuel consumption and delivery times by analyzing traffic, weather, and historical data.",
    },
    {
      icon: <Activity className="h-8 w-8 text-blue-500" />,
      title: t("features.monitoring"),
      description:
        "Track your fleet in real-time with our advanced GPS tracking system. Monitor vehicle performance, driver behavior, and delivery status.",
    },
    {
      icon: <LineChart className="h-8 w-8 text-blue-500" />,
      title: t("features.analytics"),
      description:
        "Make data-driven decisions with our predictive maintenance alerts, demand forecasting, and performance trends analysis.",
    },
    {
      icon: <Clock className="h-8 w-8 text-blue-500" />,
      title: t("features.maintenance"),
      description:
        "AI predicts when your vehicles need maintenance before breakdowns occur, reducing downtime and extending fleet lifespan.",
    },
    {
      icon: <Zap className="h-8 w-8 text-blue-500" />,
      title: t("features.fuel"),
      description:
        "Reduce fuel costs by up to 30% with our AI-powered solutions that optimize routes, monitor driving behavior, and track fuel consumption.",
    },
  ]

const container = {
    hidden: { opacity: 0 },
    show: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1,
      },
    },
  }

const item = {
    hidden: { opacity: 0, y: 20 },
    show: { opacity: 1, y: 0, transition: { duration: 0.5 } },
  }

return (
    <section className="py-16 sm:py-24 bg-[#0f172a]" id="services">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center max-w-3xl mx-auto mb-16">
          <h2 className="text-3xl sm:text-4xl font-bold text-white">{t("features.title")}</h2>
          <p className="mt-4 text-xl text-gray-400">{t("features.subtitle")}</p>
        </div>

<motion.div
          className="grid gap-8 md:grid-cols-2 lg:grid-cols-3"
          variants={container}
          initial="hidden"
          whileInView="show"
          viewport={{ once: true, margin: "-100px" }}
        >
          {features.map((feature, index) => (
            <motion.div
              key={index}
              variants={item}
              className="bg-[#1e293b] rounded-lg p-6 border border-gray-800 transition-all duration-300 hover:border-blue-500"
            >
              <div className="mb-4">{feature.icon}</div>
              <h3 className="text-xl font-bold text-white mb-2">{feature.title}</h3>
              <p className="text-gray-400">{feature.description}</p>
              <Link
                href="#"
                className="inline-flex items-center mt-4 text-blue-500 hover:text-blue-400 text-sm font-medium"
              >
                Learn more
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  className="h-4 w-4 ml-1"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                </svg>
              </Link>
            </motion.div>
          ))}
        </motion.div>

<div className="text-center mt-12">
          <Button size="lg" className="bg-blue-600 hover:bg-blue-700 text-white">
            Explore All AI Solutions
          </Button>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import {
  Truck,
  Package,
  Clock,
  Plus,
  AlertTriangle,
  ArrowUpRight,
  ArrowDownRight,
  MoreHorizontal,
  TrendingUp,
  Brain,
  Fuel,
  MapPin,
  User,
  Building2,
} from "lucide-react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { ShipmentMap } from "@/components/shipment-map"
import PerformanceChart from "@/components/performance-chart"
import RecentActivityFeed from "@/components/recent-activity-feed"
import TruckModel from "@/components/truck-model"
import { useAuth } from "@/lib/auth-context"
import { useTranslation } from "@/lib/translation-context"
import { LanguageSwitcher } from "@/components/language-switcher"

export default function DashboardPage() {
  const { user } = useAuth()
  const { t, dir } = useTranslation()
  const [searchQuery, setSearchQuery] = useState("")
  const [originCity, setOriginCity] = useState("")
  const [destinationCity, setDestinationCity] = useState("")
  const [searchStep, setSearchStep] = useState(1)
  const [userType, setUserType] = useState<"individual" | "carrier" | "company">("individual")

useEffect(() => {
    // Set user type based on auth context
    if (user?.role) {
      setUserType(user.role as "individual" | "carrier" | "company")
    }
  }, [user])

const handleSearch = () => {
    if (searchStep === 1 && originCity && destinationCity) {
      setSearchStep(2)
    } else if (searchStep === 2) {
      // In a real app, this would navigate to search results
      setSearchStep(3)
    }
  }

return (
    <div className="p-6 space-y-6" dir={dir}>
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight text-white">AI-Powered Logistics Dashboard</h1>
          <p className="text-slate-400">
            Welcome back, {user?.name || "User"}! Here's an overview of your logistics operations.
          </p>
        </div>
        <div className="flex items-center gap-2">
          {userType === "individual" && (
            <div className="flex items-center text-blue-400">
              <User className="h-4 w-4 mr-1" />
              <span className="text-sm">Individual Shipper</span>
            </div>
          )}
          {userType === "carrier" && (
            <div className="flex items-center text-green-400">
              <Truck className="h-4 w-4 mr-1" />
              <span className="text-sm">Carrier</span>
            </div>
          )}
          {userType === "company" && (
            <div className="flex items-center text-purple-400">
              <Building2 className="h-4 w-4 mr-1" />
              <span className="text-sm">Fleet Manager</span>
            </div>
          )}
          <LanguageSwitcher variant="minimal" className="ml-2" />
        </div>
      </div>

{/* Dashboard type-specific content */}
      {userType === "individual" ? (
        <IndividualDashboard />
      ) : userType === "carrier" ? (
        <CarrierDashboard />
      ) : (
        <CompanyDashboard />
      )}
    </div>
  )
}

function IndividualDashboard() {
  const { t } = useTranslation()
  return (
    <>
      {/* AI Carrier Matching Card - Only show for shippers */}
      <Card className="bg-gray-900 border-gray-800">
        <CardHeader className="pb-2">
          <CardTitle className="text-white flex items-center">
            <Brain className="h-5 w-5 text-purple-500 mr-2" />
            AI-Powered Carrier Matching
          </CardTitle>
          <CardDescription className="text-gray-400">
            Find the perfect carriers for your shipments with our intelligent matching algorithm
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid md:grid-cols-2 gap-6">
            <div className="space-y-4">
              <div className="bg-blue-900/30 p-4 rounded-lg border border-blue-800">
                <div className="flex items-center mb-3">
                  <Brain className="h-5 w-5 text-blue-400 mr-2" />
                  <h3 className="text-lg font-medium text-white">AI Matching Results</h3>
                </div>
                <p className="text-sm text-gray-300 mb-3">We found 5 carriers matching your requirements:</p>

<div className="space-y-3">
                  {[
                    { name: "TransitExpress", rating: 4.9, price: "$1,250", eta: "2d 4h", match: 98 },
                    { name: "FastTruck Inc.", rating: 4.7, price: "$1,180", eta: "2d 8h", match: 95 },
                    { name: "SpeedLogistics", rating: 4.8, price: "$1,320", eta: "1d 22h", match: 92 },
                  ].map((carrier, index) => (
                    <div
                      key={index}
                      className="bg-gray-800/70 p-3 rounded-md border border-gray-700 flex justify-between items-center"
                    >
                      <div>
                        <div className="flex items-center">
                          <Truck className="h-4 w-4 text-blue-500 mr-2" />
                          <span className="font-medium text-white">{carrier.name}</span>
                          <div className="ml-2 flex items-center text-yellow-500 text-xs">
                            <span>★</span>
                            <span>{carrier.rating}</span>
                          </div>
                        </div>
                        <div className="text-xs text-gray-400 mt-1 flex items-center">
                          <Clock className="h-3 w-3 mr-1" />
                          <span>ETA: {carrier.eta}</span>
                          <span className="mx-2">•</span>
                          <span>{carrier.price}</span>
                        </div>
                      </div>
                      <div className="flex items-center">
                        <Badge className="bg-purple-600 text-white mr-2">{carrier.match}% Match</Badge>
                        <Button size="sm" variant="outline" className="text-white border-blue-700 hover:bg-blue-900/50">
                          Select
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>

<div className="mt-4 text-center">
                  <Button variant="link" className="text-blue-400 hover:text-blue-300">
                    View all matches <ArrowUpRight className="h-4 w-4 ml-1" />
                  </Button>
                </div>
              </div>

<Button className="w-full bg-blue-600 hover:bg-blue-700 text-white">New Search</Button>
            </div>

{/* Quick stats */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <Card className="bg-gray-900 border-gray-800">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium text-gray-300">Active Shipments</CardTitle>
            <Package className="h-4 w-4 text-blue-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-white">37</div>
            <div className="flex items-center pt-1">
              <span className="text-xs text-green-500 dark:text-green-400 inline-flex items-center">
                <ArrowUpRight className="h-3 w-3 mr-1" />
                +2.5%
              </span>
              <span className="text-xs text-gray-500 ml-1">from last month</span>
            </div>
          </CardContent>
        </Card>
        <Card className="bg-gray-900 border-gray-800">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium text-gray-300">On-Time Delivery</CardTitle>
            <Clock className="h-4 w-4 text-emerald-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-white">94.2%</div>
            <div className="flex items-center pt-1">
              <span className="text-xs text-red-500 inline-flex items-center">
                <ArrowDownRight className="h-3 w-3 mr-1" />
                -1.1%
              </span>
              <span className="text-xs text-gray-500 ml-1">from last month</span>
            </div>
          </CardContent>
        </Card>
        <Card className="bg-gray-900 border-gray-800">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium text-gray-300">Freight Costs</CardTitle>
            <TrendingUp className="h-4 w-4 text-orange-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-white">$12,450</div>
            <div className="flex items-center pt-1">
              <span className="text-xs text-green-500 inline-flex items-center">
                <ArrowDownRight className="h-3 w-3 mr-1" />
                -3.2%
              </span>
              <span className="text-xs text-gray-500 ml-1">under budget</span>
            </div>
          </CardContent>
        </Card>
        <Card className="bg-gray-900 border-gray-800">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium text-gray-300">AI Matches</CardTitle>
            <Brain className="h-4 w-4 text-purple-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-white">28</div>
            <div className="flex items-center pt-1">
              <span className="text-xs text-green-500 inline-flex items-center">
                <ArrowUpRight className="h-3 w-3 mr-1" />
                +10.1%
              </span>
              <span className="text-xs text-gray-500 ml-1">match accuracy</span>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Active shipments and map */}
      <div className="grid gap-4 md:grid-cols-7">
        <Card className="md:col-span-3 bg-gray-900 border-gray-800">
          <CardHeader className="flex flex-row items-center justify-between">
            <div>
              <CardTitle className="text-white">Active Shipments</CardTitle>
              <CardDescription className="text-gray-400">Your current shipments in transit</CardDescription>
            </div>
            <Button size="sm" className="bg-blue-600 hover:bg-blue-700 text-white">
              <Plus className="h-4 w-4 mr-1" />
              New Shipment
            </Button>
          </CardHeader>
          <CardContent className="p-0">
            <div className="space-y-0 divide-y divide-gray-800">
              {[
                {
                  id: "SHP-3948",
                  status: "in_transit",
                  destination: "Atlanta, GA",
                  progress: 65,
                  eta: "2h 45m",
                  alert: false,
                  carrier: "TransitExpress",
                  aiOptimized: true,
                },
                {
                  id: "SHP-3921",
                  status: "in_transit",
                  destination: "Miami, FL",
                  progress: 42,
                  eta: "5h 20m",
                  alert: true,
                  carrier: "FastTruck Inc.",
                  aiOptimized: false,
                },
                {
                  id: "SHP-3899",
                  status: "pending",
                  destination: "Dallas, TX",
                  progress: 0,
                  eta: "Pending",
                  alert: false,
                  carrier: "Assigned by AI",
                  aiOptimized: true,
                },
                {
                  id: "SHP-3876",
                  status: "in_transit",
                  destination: "Chicago, IL",
                  progress: 89,
                  eta: "30m",
                  alert: false,
                  carrier: "SpeedLogistics",
                  aiOptimized: true,
                },
              ].map((shipment) => (
                <div key={shipment.id} className="flex items-center p-4 relative">
                  {shipment.alert && <div className="absolute left-0 top-0 bottom-0 w-1 bg-amber-500" />}
                  <div className="min-w-0 flex-1">
                    <div className="flex items-center justify-between mb-1">
                      <div className="flex items-center">
                        <Link
                          href={`/dashboard/shipments/${shipment.id}`}
                          className="text-sm font-medium text-white hover:underline"
                        >
                          {shipment.id}
                        </Link>
                        <Badge
                          variant={shipment.status === "in_transit" ? "default" : "outline"}
                          className="ml-2 text-xs bg-blue-600 text-white"
                        >
                          {shipment.status === "in_transit" ? "In Transit" : "Pending"}
                        </Badge>
                        {shipment.alert && (
                          <Badge
                            variant="outline"
                            className="ml-2 bg-amber-900/30 text-amber-500 border-amber-800/30 text-xs"
                          >
                            <AlertTriangle className="h-3 w-3 mr-1" />
                            Delayed
                          </Badge>
                        )}
                        {shipment.aiOptimized && (
                          <Badge
                            variant="outline"
                            className="ml-2 bg-purple-900/30 text-purple-400 border-purple-800/30 text-xs"
                          >
                            <Brain className="h-3 w-3 mr-1" />
                            AI Optimized
                          </Badge>
                        )}
                      </div>
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <Button variant="ghost" size="icon" className="h-8 w-8 text-gray-400 hover:text-white">
                            <MoreHorizontal className="h-4 w-4" />
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end" className="bg-gray-900 border-gray-800 text-gray-300">
                          <DropdownMenuItem className="hover:bg-gray-800 hover:text-white cursor-pointer">
                            View details
                          </DropdownMenuItem>
                          <DropdownMenuItem className="hover:bg-gray-800 hover:text-white cursor-pointer">
                            Contact carrier
                          </DropdownMenuItem>
                          <DropdownMenuSeparator className="bg-gray-800" />
                          <DropdownMenuItem className="text-red-500 hover:bg-gray-800 hover:text-red-400 cursor-pointer">
                            Cancel shipment
                          </DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>
                    </div>
                    <div className="text-sm text-gray-400 mb-1">
                      <div className="flex justify-between">
                        <span>Destination: {shipment.destination}</span>
                        <span className="text-blue-400">{shipment.carrier}</span>
                      </div>
                    </div>
                    <div className="flex items-center gap-4">
                      <Progress value={shipment.progress} className="h-2 flex-1 bg-gray-800" />
                      <span className="text-xs whitespace-nowrap text-gray-300">ETA: {shipment.eta}</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
          <CardFooter className="border-t border-gray-800">
            <Button variant="ghost" size="sm" className="ml-auto text-gray-400 hover:text-white" asChild>
              <Link href="/dashboard/shipments">
                View all shipments
                <ArrowUpRight className="h-4 w-4 ml-1" />
              </Link>
            </Button>
          </CardFooter>
        </Card>
        <Card className="md:col-span-4 bg-gray-900 border-gray-800">
          <CardHeader>
            <CardTitle className="text-white">AI-Powered Shipment Tracking</CardTitle>
            <CardDescription className="text-gray-400">
              Real-time location of your active shipments with predictive ETA
            </CardDescription>
          </CardHeader>
          <CardContent className="p-0 h-[400px]">
            <ShipmentMap />
          </CardContent>
        </Card>
      </div>

{/* Recent activity and performance */}
      <div className="grid gap-4 md:grid-cols-2">
        <Card className="bg-gray-900 border-gray-800">
          <CardHeader>
            <CardTitle className="text-white">Recent Activity</CardTitle>
            <CardDescription className="text-gray-400">Latest updates from your shipments</CardDescription>
          </CardHeader>
          <CardContent className="h-[340px] overflow-auto">
            <RecentActivityFeed />
          </CardContent>
        </Card>
        <Card className="bg-gray-900 border-gray-800">
          <CardHeader>
            <CardTitle className="text-white">Performance Analytics</CardTitle>
            <CardDescription className="text-gray-400">
              AI-powered trends in your shipping volume and costs
            </CardDescription>
          </CardHeader>
          <CardContent className="h-[340px]">
            <PerformanceChart />
          </CardContent>
        </Card>
      </div>
    </>
  )
}

function CarrierDashboard() {
  const { t } = useTranslation()
  return (
    <>
      {/* AI Shipment Finding Card - Only show for carriers */}
      <Card className="bg-gray-900 border-gray-800">
        <CardHeader className="pb-2">
          <CardTitle className="text-white flex items-center">
            <Brain className="h-5 w-5 text-purple-500 mr-2" />
            AI-Powered Shipment Finder
          </CardTitle>
          <CardDescription className="text-gray-400">
            Find the best shipments near your location with our intelligent matching algorithm
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid md:grid-cols-2 gap-6">
            <div className="space-y-4">
              <div className="bg-blue-900/30 p-4 rounded-lg border border-blue-800">
                <div className="flex items-center mb-3">
                  <MapPin className="h-5 w-5 text-blue-400 mr-2" />
                  <h3 className="text-lg font-medium text-white">Nearby Shipments</h3>
                </div>
                <p className="text-sm text-gray-300 mb-3">We found 4 shipments near your current location:</p>

<div className="space-y-3">
                  {[
                    {
                      id: "SHP-3948",
                      from: "Casablanca",
                      to: "Rabat",
                      type: "Electronics",
                      weight: "120kg",
                      price: "1,200 MAD",
                      match: 98,
                    },
                    {
                      id: "SHP-3921",
                      from: "Casablanca",
                      to: "Marrakech",
                      type: "Textiles",
                      weight: "350kg",
                      price: "2,500 MAD",
                      match: 95,
                    },
                    {
                      id: "SHP-3899",
                      from: "Casablanca",
                      to: "Tangier",
                      type: "Furniture",
                      weight: "500kg",
                      price: "3,800 MAD",
                      match: 92,
                    },
                  ].map((shipment, index) => (
                    <div
                      key={index}
                      className="bg-gray-800/70 p-3 rounded-md border border-gray-700 flex justify-between items-center"
                    >
                      <div>
                        <div className="flex items-center">
                          <Package className="h-4 w-4 text-blue-500 mr-2" />
                          <span className="font-medium text-white">{shipment.id}</span>
                        </div>
                        <div className="text-xs text-gray-400 mt-1">
                          <div className="flex items-center">
                            <MapPin className="h-3 w-3 mr-1" />
                            <span>
                              {shipment.from} to {shipment.to}
                            </span>
                          </div>
                          <div className="flex items-center mt-0.5">
                            <Package className="h-3 w-3 mr-1" />
                            <span>
                              {shipment.type} ({shipment.weight})
                            </span>
                          </div>
                        </div>
                      </div>
                      <div className="flex flex-col items-end">
                        <Badge className="bg-purple-600 text-white mb-1">{shipment.match}% Match</Badge>
                        <span className="text-white font-medium">{shipment.price}</span>
                        <Button size="sm" className="mt-1 bg-blue-600 hover:bg-blue-700">
                          Bid Now
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>

<div className="mt-4 text-center">
                  <Button variant="link" className="text-blue-400 hover:text-blue-300" asChild>
                    <Link href="/dashboard/nearby">
                      View all nearby shipments <ArrowUpRight className="h-4 w-4 ml-1" />
                    </Link>
                  </Button>
                </div>
              </div>

<Button className="w-full bg-blue-600 hover:bg-blue-700 text-white" asChild>
                <Link href="/dashboard/nearby">Find More Shipments</Link>
              </Button>
            </div>

{/* Quick stats */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <Card className="bg-gray-900 border-gray-800">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium text-gray-300">Active Deliveries</CardTitle>
            <Truck className="h-4 w-4 text-blue-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-white">12</div>
            <div className="flex items-center pt-1">
              <span className="text-xs text-green-500 dark:text-green-400 inline-flex items-center">
                <ArrowUpRight className="h-3 w-3 mr-1" />
                +3
              </span>
              <span className="text-xs text-gray-500 ml-1">from last week</span>
            </div>
          </CardContent>
        </Card>
        <Card className="bg-gray-900 border-gray-800">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium text-gray-300">Available Loads</CardTitle>
            <Package className="h-4 w-4 text-emerald-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-white">28</div>
            <div className="flex items-center pt-1">
              <span className="text-xs text-green-500 inline-flex items-center">
                <ArrowUpRight className="h-3 w-3 mr-1" />
                +5
              </span>
              <span className="text-xs text-gray-500 ml-1">new today</span>
            </div>
          </CardContent>
        </Card>
        <Card className="bg-gray-900 border-gray-800">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium text-gray-300">Monthly Earnings</CardTitle>
            <TrendingUp className="h-4 w-4 text-orange-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-white">$8,750</div>
            <div className="flex items-center pt-1">
              <span className="text-xs text-green-500 inline-flex items-center">
                <ArrowUpRight className="h-3 w-3 mr-1" />
                +12.3%
              </span>
              <span className="text-xs text-gray-500 ml-1">from last month</span>
            </div>
          </CardContent>
        </Card>
        <Card className="bg-gray-900 border-gray-800">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium text-gray-300">Nearby Shippers</CardTitle>
            <MapPin className="h-4 w-4 text-purple-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-white">8</div>
            <div className="flex items-center pt-1">
              <span className="text-xs text-blue-500 inline-flex items-center">
                <MapPin className="h-3 w-3 mr-1" />
                Within 10km
              </span>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Rest of carrier dashboard */}
    </>
  )
}

function CompanyDashboard() {
  const { t } = useTranslation()
  return (
    <>
      {/* Quick stats */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <Card className="bg-gray-900 border-gray-800">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium text-gray-300">Fleet Status</CardTitle>
            <Truck className="h-4 w-4 text-blue-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-white">42</div>
            <div className="flex flex-col">
              <div className="text-xs text-gray-400 flex items-center gap-1 mt-1">
                <span className="w-3 h-3 rounded-full bg-green-500"></span>
                <span>Active: 32</span>
              </div>
              <div className="text-xs text-gray-400 flex items-center gap-1">
                <span className="w-3 h-3 rounded-full bg-amber-500"></span>
                <span>In Maintenance: 7</span>
              </div>
              <div className="text-xs text-gray-400 flex items-center gap-1">
                <span className="w-3 h-3 rounded-full bg-red-500"></span>
                <span>Inactive: 3</span>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card className="bg-gray-900 border-gray-800">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium text-gray-300">Active Shipments</CardTitle>
            <Package className="h-4 w-4 text-emerald-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-white">127</div>
            <div className="flex items-center pt-1">
              <span className="text-xs text-green-500 inline-flex items-center">
                <ArrowUpRight className="h-3 w-3 mr-1" />
                +12.5%
              </span>
              <span className="text-xs text-gray-500 ml-1">from last month</span>
            </div>
          </CardContent>
        </Card>
        <Card className="bg-gray-900 border-gray-800">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium text-gray-300">Fuel Efficiency</CardTitle>
            <Fuel className="h-4 w-4 text-orange-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-white">7.2 mpg</div>
            <div className="flex items-center pt-1">
              <span className="text-xs text-green-500 inline-flex items-center">
                <ArrowUpRight className="h-3 w-3 mr-1" />
                +0.3
              </span>
              <span className="text-xs text-gray-500 ml-1">from last quarter</span>
            </div>
          </CardContent>
        </Card>
        <Card className="bg-gray-900 border-gray-800">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium text-gray-300">AI Efficiency Gain</CardTitle>
            <Brain className="h-4 w-4 text-purple-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-white">23.7%</div>
            <div className="flex items-center pt-1">
              <span className="text-xs text-green-500 inline-flex items-center">
                <ArrowUpRight className="h-3 w-3 mr-1" />
                +1.8%
              </span>
              <span className="text-xs text-gray-500 ml-1">from last month</span>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Rest of company dashboard */}
    </>
  )
}
[V0_FILE]typescriptreact:file="components/language-switcher.tsx" isEdit="true"
"use client"
import { Check, ChevronDown, Globe } from "lucide-react"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import { useTranslation } from "@/lib/translation-context"

export type Language = {
  code: string
  name: string
  flag?: string
}

interface LanguageSwitcherProps {
  className?: string
  variant?: "default" | "outline" | "minimal"
}

const languages: Language[] = [
  { code: "en", name: "English", flag: "🇺🇸" },
  { code: "fr", name: "Français", flag: "🇫🇷" },
  { code: "ar", name: "العربية", flag: "🇲🇦" },
  { code: "es", name: "Español", flag: "🇪🇸" },
]

export function LanguageSwitcher({ className, variant = "default" }: LanguageSwitcherProps) {
  const { language, setLanguage } = useTranslation()

const handleLanguageChange = (langCode: string) => {
    setLanguage(langCode as "en" | "fr" | "ar" | "es")
  }

if (variant === "minimal") {
    return (
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="ghost" size="icon" className={cn("px-2 w-9", className)}>
            <span className="sr-only">Switch language</span>
            <span className="text-sm font-medium">{language.toUpperCase()}</span>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="w-[160px]">
          {languages.map((lang) => (
            <DropdownMenuItem
              key={lang.code}
              onClick={() => handleLanguageChange(lang.code)}
              className="cursor-pointer"
            >
              <span className="mr-2">{lang.flag}</span>
              <span>{lang.name}</span>
              {language === lang.code && <Check className="ml-auto h-4 w-4" />}
            </DropdownMenuItem>
          ))}
        </DropdownMenuContent>
      </DropdownMenu>
    )
  }

return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          variant={variant === "outline" ? "outline" : "ghost"}
          size="sm"
          className={cn("flex items-center gap-1 px-2", className)}
        >
          <Globe className="h-4 w-4" />
          <span className="hidden sm:inline-block">{languages.find((l) => l.code === language)?.name}</span>
          <span className="inline-block sm:hidden">{language.toUpperCase()}</span>
          <ChevronDown className="h-3 w-3 opacity-50" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-[160px]">
        {languages.map((lang) => (
          <DropdownMenuItem key={lang.code} onClick={() => handleLanguageChange(lang.code)} className="cursor-pointer">
            <span className="mr-2">{lang.flag}</span>
            <span>{lang.name}</span>
            {language === lang.code && <Check className="ml-auto h-4 w-4" />}
          </DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard-sidebar.tsx" isEdit="true"
"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { Button } from "@/components/ui/button"
import {
  LayoutDashboard,
  Package,
  Truck,
  Home,
  MapPin,
  Zap,
  Users,
  FileText,
  Settings,
  MessageSquare,
  BarChart,
} from "lucide-react"
import { useTranslation } from "@/lib/translation-context"

export default function DashboardSidebar() {
  const pathname = usePathname()
  const { t, dir } = useTranslation()

const sidebarItems = [
    {
      href: "/dashboard",
      label: t("nav.dashboard"),
      icon: <LayoutDashboard className="mr-2 h-4 w-4" />,
    },
    {
      href: "/dashboard/shipments",
      label: t("nav.shipments"),
      icon: <Package className="mr-2 h-4 w-4" />,
    },
    {
      href: "/dashboard/fleet",
      label: t("nav.fleet"),
      icon: <Truck className="mr-2 h-4 w-4" />,
    },
    {
      href: "/dashboard/carriers",
      label: t("nav.carriers"),
      icon: <Home className="mr-2 h-4 w-4" />,
    },
    {
      href: "/dashboard/locations",
      label: t("nav.locations"),
      icon: <MapPin className="mr-2 h-4 w-4" />,
    },
    {
      href: "/dashboard/ai-tools",
      label: t("nav.ai_tools"),
      icon: <Zap className="mr-2 h-4 w-4" />,
    },
    {
      href: "/dashboard/team",
      label: t("nav.team"),
      icon: <Users className="mr-2 h-4 w-4" />,
    },
    {
      href: "/dashboard/documents",
      label: t("nav.documents"),
      icon: <FileText className="mr-2 h-4 w-4" />,
    },
    {
      href: "/dashboard/messages",
      label: t("nav.messages"),
      icon: <MessageSquare className="mr-2 h-4 w-4" />,
    },
    {
      href: "/dashboard/analytics",
      label: t("nav.analytics"),
      icon: <BarChart className="mr-2 h-4 w-4" />,
    },
    {
      href: "/dashboard/settings",
      label: t("nav.settings"),
      icon: <Settings className="mr-2 h-4 w-4" />,
    },
  ]

return (
    <div className="fixed left-0 top-0 z-50 flex h-full w-64 flex-col border-r bg-gray-950" dir={dir}>
      <div className="flex-1 overflow-y-auto py-4">
        <div className="px-3 py-2">
          <Link href="/" className="flex items-center mb-6">
            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-600">
              <span className="text-white font-bold text-lg">M</span>
            </div>
            <span className="ml-2 font-bold text-white text-xl">{t("app.name")}</span>
          </Link>
        </div>
        <nav className="flex flex-col space-y-1 px-3">
          {sidebarItems.map((item) => (
            <Button
              key={item.href}
              asChild
              variant={pathname === item.href ? "secondary" : "ghost"}
              className="w-full justify-start"
            >
              <Link href={item.href}>
                {item.icon}
                {item.label}
              </Link>
            </Button>
          ))}
        </nav>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import { AuthProvider } from "@/lib/auth-context"
import { TranslationProvider } from "@/lib/translation-context"
import MainNavbar from "@/components/main-navbar"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "MarocTransit - Smart Logistics Solutions",
  description: "AI-powered logistics platform connecting shippers with carriers in Morocco",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <TranslationProvider>
          <AuthProvider>
            <MainNavbar />
            <main className="min-h-screen bg-gray-950 text-white">{children}</main>
          </AuthProvider>
        </TranslationProvider>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/login/page.tsx" isEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useAuth } from "@/lib/auth-context"
import { useTranslation } from "@/lib/translation-context"

export default function LoginPage() {
  const router = useRouter()
  const { login } = useAuth()
  const { t } = useTranslation()
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [role, setRole] = useState("individual")
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState("")

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)
    setError("")

try {
      // Modify email based on selected role for demo purposes
      const roleEmail = role === "individual" ? email : role === "carrier" ? `carrier.${email}` : `company.${email}`

const result = await login(roleEmail, password)

if (result.success) {
        router.push("/dashboard")
      } else {
        setError(result.message || "Login failed")
      }
    } catch (err) {
      setError("An unexpected error occurred")
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="flex min-h-screen items-center justify-center px-4 py-12">
      <Card className="w-full max-w-md bg-gray-900 border-gray-800">
        <CardHeader>
          <CardTitle className="text-2xl text-white">Login to MarocTransit</CardTitle>
          <CardDescription>Enter your credentials to access your account</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="role">Account Type</Label>
              <Select value={role} onValueChange={setRole}>
                <SelectTrigger className="bg-gray-800 border-gray-700 text-white">
                  <SelectValue placeholder="Select account type" />
                </SelectTrigger>
                <SelectContent className="bg-gray-800 border-gray-700 text-white">
                  <SelectItem value="individual">Individual Shipper</SelectItem>
                  <SelectItem value="carrier">Carrier</SelectItem>
                  <SelectItem value="company">Fleet Manager</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                type="email"
                placeholder="your.email@example.com"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
                className="bg-gray-800 border-gray-700 text-white"
              />
            </div>

<div className="space-y-2">
              <div className="flex items-center justify-between">
                <Label htmlFor="password">Password</Label>
                <Link href="/forgot-password" className="text-sm text-blue-500 hover:text-blue-400">
                  Forgot password?
                </Link>
              </div>
              <Input
                id="password"
                type="password"
                placeholder="••••••••"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                required
                className="bg-gray-800 border-gray-700 text-white"
              />
            </div>

{error && <p className="text-red-500 text-sm">{error}</p>}

<Button type="submit" className="w-full bg-blue-600 hover:bg-blue-700" disabled={isLoading}>
              {isLoading ? "Logging in..." : "Login"}
            </Button>
          </form>
        </CardContent>
        <CardFooter className="flex flex-col space-y-4">
          <div className="text-center text-sm text-gray-400">
            For demo purposes, any email/password combination will work. The role selection will determine your
            dashboard view.
          </div>
          <div className="text-center text-sm">
            Don't have an account?{" "}
            <Link href="/signup" className="text-blue-500 hover:text-blue-400">
              Sign up
            </Link>
          </div>
        </CardFooter>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/layout.tsx" isEdit="true"
"use client"

import type React from "react"

import { useEffect } from "react"
import { useRouter, usePathname } from "next/navigation"
import DashboardSidebar from "@/components/dashboard-sidebar"
import { useAuth } from "@/lib/auth-context"
import { useTranslation } from "@/lib/translation-context"

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const { user, isLoading } = useAuth()
  const router = useRouter()
  const pathname = usePathname()
  const { dir } = useTranslation()

useEffect(() => {
    // Redirect to login if not authenticated
    if (!isLoading && !user && pathname !== "/login") {
      router.push("/login")
    }
  }, [user, isLoading, router, pathname])

// Show loading state while checking authentication
  if (isLoading) {
    return (
      <div className="flex h-screen w-full items-center justify-center bg-gray-950">
        <div className="h-8 w-8 animate-spin rounded-full border-4 border-blue-600 border-t-transparent"></div>
      </div>
    )
  }

// If not authenticated and not on login page, don't render anything
  if (!user && pathname !== "/login") {
    return null
  }

return (
    <div className="flex h-screen bg-gray-950" dir={dir}>
      <DashboardSidebar />
      <div className="flex-1 overflow-auto pl-64">{children}</div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/not-found.tsx"
import Link from "next/link"
import { Button } from "@/components/ui/button"

export default function NotFound() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center text-center px-4">
      <h1 className="text-6xl font-bold text-white mb-4">404</h1>
      <h2 className="text-2xl font-semibold text-white mb-6">Page Not Found</h2>
      <p className="text-gray-400 max-w-md mb-8">The page you are looking for doesn't exist or has been moved.</p>
      <div className="flex flex-col sm:flex-row gap-4">
        <Button asChild className="bg-blue-600 hover:bg-blue-700">
          <Link href="/">Go Home</Link>
        </Button>
        <Button asChild variant="outline" className="border-gray-700 text-white hover:bg-gray-800">
          <Link href="/dashboard">Dashboard</Link>
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/error.tsx"
"use client"

import { useEffect } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    // Log the error to an error reporting service
    console.error(error)
  }, [error])

return (
    <div className="flex min-h-screen flex-col items-center justify-center text-center px-4">
      <h1 className="text-6xl font-bold text-white mb-4">Error</h1>
      <h2 className="text-2xl font-semibold text-white mb-6">Something went wrong</h2>
      <p className="text-gray-400 max-w-md mb-8">
        We apologize for the inconvenience. Please try again or contact support if the problem persists.
      </p>
      <div className="flex flex-col sm:flex-row gap-4">
        <Button onClick={reset} className="bg-blue-600 hover:bg-blue-700">
          Try Again
        </Button>
        <Button asChild variant="outline" className="border-gray-700 text-white hover:bg-gray-800">
          <Link href="/">Go Home</Link>
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/team/team-invite-form.tsx" isEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { inviteTeamMember } from "@/app/actions/team"
import { useTranslation } from "@/lib/translation-context"

export default function TeamInviteForm() {
  const router = useRouter()
  const { t } = useTranslation()
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    role: "driver",
    message: "",
  })
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [error, setError] = useState("")
  const [success, setSuccess] = useState("")

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handleRoleChange = (value: string) => {
    setFormData((prev) => ({ ...prev, role: value }))
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)
    setError("")
    setSuccess("")

try {
      const result = await inviteTeamMember(formData)

if (result.success) {
        setSuccess(result.message || "Invitation sent successfully!")
        // Reset form
        setFormData({
          name: "",
          email: "",
          role: "driver",
          message: "",
        })

// Redirect after a short delay
        setTimeout(() => {
          router.push("/dashboard/team")
        }, 2000)
      } else {
        setError(result.error || "Failed to send invitation")
      }
    } catch (err) {
      setError("An unexpected error occurred")
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <Card className="bg-gray-900 border-gray-800">
      <CardHeader>
        <CardTitle className="text-white">{t("team.invite")}</CardTitle>
        <CardDescription>Send an invitation to join your logistics team</CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="name">Full Name</Label>
            <Input
              id="name"
              name="name"
              value={formData.name}
              onChange={handleChange}
              placeholder="John Doe"
              required
              className="bg-gray-800 border-gray-700 text-white"
            />
          </div>

<div className="space-y-2">
            <Label htmlFor="email">Email Address</Label>
            <Input
              id="email"
              name="email"
              type="email"
              value={formData.email}
              onChange={handleChange}
              placeholder="john.doe@example.com"
              required
              className="bg-gray-800 border-gray-700 text-white"
            />
          </div>

<div className="space-y-2">
            <Label htmlFor="role">Role</Label>
            <Select value={formData.role} onValueChange={handleRoleChange}>
              <SelectTrigger className="bg-gray-800 border-gray-700 text-white">
                <SelectValue placeholder="Select a role" />
              </SelectTrigger>
              <SelectContent className="bg-gray-800 border-gray-700 text-white">
                <SelectItem value="admin">Admin</SelectItem>
                <SelectItem value="driver">Driver</SelectItem>
                <SelectItem value="dispatcher">Dispatcher</SelectItem>
                <SelectItem value="customer">Customer</SelectItem>
              </SelectContent>
            </Select>
          </div>

<div className="space-y-2">
            <Label htmlFor="message">Personal Message (Optional)</Label>
            <Textarea
              id="message"
              name="message"
              value={formData.message}
              onChange={handleChange}
              placeholder="I'd like to invite you to join our logistics team..."
              className="bg-gray-800 border-gray-700 text-white min-h-[100px]"
            />
          </div>

{error && <p className="text-red-500 text-sm">{error}</p>}
          {success && <p className="text-green-500 text-sm">{success}</p>}

<Button type="submit" className="w-full bg-blue-600 hover:bg-blue-700" disabled={isSubmitting}>
            {isSubmitting ? "Sending Invitation..." : "Send Invitation"}
          </Button>
        </form>
      </CardContent>
      <CardFooter className="border-t border-gray-800 flex justify-between">
        <Button
          variant="ghost"
          className="text-gray-400 hover:text-white"
          onClick={() => router.push("/dashboard/team")}
        >
          Cancel
        </Button>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/team/invite/page.tsx" isEdit="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { ArrowLeft } from "lucide-react"
import TeamInviteForm from "@/components/team/team-invite-form"

export default function TeamInvitePage() {
  return (
    <div className="container mx-auto py-6 space-y-8">
      <div className="flex items-center mb-6">
        <Link href="/dashboard/team">
          <Button variant="ghost" size="sm">
            <ArrowLeft className="h-4 w-4 mr-2" />
            Back to Team
          </Button>
        </Link>
      </div>

<div className="max-w-2xl mx-auto">
        <TeamInviteForm />
      </div>
    </div>
  )
}f4:["$","$Lf7",null,{"params":{"chatId":"Qli0ZGzWaPg"},"promises":{"attributes":"$@101","externalMeta":"$@102","latest":"$@103","messagesRange":"$@104","messages":"$@105","template":"$@106","gitStatus":"$@107"},"children":["$","$L109",null,{"chatId":"Qli0ZGzWaPg","children":["$","$L10a",null,{"seedOnlyKeys":["@\"chat:state\",\"Qli0ZGzWaPg\","],"data":{"block:output:initial":{"id":"xEmRw46yc6X","result":"$@10b"},"@\"block:mappings\",\"Qli0ZGzWaPg\",":{"sqlBlockExecutionStates":"$Q10c","blocksForkedFrom":"$Q10d","blocksTemplateIds":"$Q10e","blocksCreatedAt":"$Q10f","blocksShared":"$Q110","blocksDeployed":"$Q111","blocksSubdomains":"$Q112","brandedBlocks":"$Q113","unlistedBlocks":"$Q114","blockOutputs":"$Q115"},"@\"chat:state\",\"Qli0ZGzWaPg\",":{"messages":[{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"gOLcI8SuS8zRLYMZATMGQX0zaxYDmsn9","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-05-12T11:46:39.523Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"xEmRw46yc6X","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"4rgpcXBtJXTNDWlT6q3aH9BiiBdaaEBz","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"gOLcI8SuS8zRLYMZATMGQX0zaxYDmsn9","type":"message","createdAt":"$D2025-05-12T11:46:40.523Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"lJsrwcG9Y25GiBavcKbkXl98XWQWH2xn","parentId":"4rgpcXBtJXTNDWlT6q3aH9BiiBdaaEBz","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-05-12T11:47:49.293Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[],"isContentLoading":true,"role":"assistant","id":"Ywv9svhJnJIKbvZD76xX08yxvwncOcGM","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"lJsrwcG9Y25GiBavcKbkXl98XWQWH2xn","type":"message","createdAt":"$D2025-05-12T11:47:49.294Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"6M7gom22SoYtdz9U8DQDN3wDUibv9qlN","parentId":"Ywv9svhJnJIKbvZD76xX08yxvwncOcGM","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-05-12T11:57:09.634Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[],"isContentLoading":true,"role":"assistant","id":"Msl8xtg5KRYELPwnME62UN3KFfcErNk3","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"6M7gom22SoYtdz9U8DQDN3wDUibv9qlN","type":"message","createdAt":"$D2025-05-12T11:57:09.635Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"Tu6g15ScrGMcgNRzjzMpgex6H5gdFbUh","parentId":"Msl8xtg5KRYELPwnME62UN3KFfcErNk3","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-02T09:03:23.376Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[],"isContentLoading":true,"role":"assistant","id":"DlV4Vx3JMU2BBqQC7hPYxKax2qS2qaUm","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"Tu6g15ScrGMcgNRzjzMpgex6H5gdFbUh","type":"message","createdAt":"$D2025-06-02T09:03:23.377Z"},{"content":{"type":"parts","parts":[{"type":"mdx","content":"can you write a full frontend prompt that explain all the featuers , explain what should be done step by step"}],"version":1},"role":"user","id":"zizjIVbO0Zs7Djo8GzKEbW1jxyorz5v9","attachments":[],"parentId":"DlV4Vx3JMU2BBqQC7hPYxKax2qS2qaUm","type":"message","authorId":"K5i2PL0Ra6Ij6s0ybBb8w0Sn","createdAt":"$D2025-06-02T09:04:58.097Z"},{"content":{"type":"message-binary-format","value":[[0,[["h1",{},["text",{},"MarocTransit Frontend Development Guide - Complete Step-by-Step Implementation"]],["h2",{},["text",{},"Project Overview"]],["p",{},["text",{},"MarocTransit is a comprehensive logistics platform frontend built with Next.js 14, featuring role-based dashboards, AI-powered tools, and real-time tracking capabilities. This guide provides step-by-step instructions for implementing all frontend features."]],["h2",{},["text",{},"Technology Stack"]],["ul",{"start":1},["li",{"index":1},["strong",{},["text",{},"Framework"]],["text",{},": Next.js 14 with App Router"]],["li",{"index":2},["strong",{},["text",{},"Styling"]],["text",{},": Tailwind CSS + shadcn/ui components"]],["li",{"index":3},["strong",{},["text",{},"State Management"]],["text",{},": React Context API + hooks"]],["li",{"index":4},["strong",{},["text",{},"Maps"]],["text",{},": Interactive mapping for route visualization"]],["li",{"index":5},["strong",{},["text",{},"Charts"]],["text",{},": Recharts for analytics"]],["li",{"index":6},["strong",{},["text",{},"Animation"]],["text",{},": Framer Motion"]],["li",{"index":7},["strong",{},["text",{},"Icons"]],["text",{},": Lucide React"]],["li",{"index":8},["strong",{},["text",{},"Forms"]],["text",{},": React Hook Form + Zod validation"]]],["h2",{},["text",{},"Step 1: Project Setup and Configuration"]],["h3",{},["text",{},"1.1 Initialize Project Structure"]],["Codeblock",{"lang":"shellscript","meta":{},"closed":true},"# Create Next.js project\nnpx create-next-app@latest maroc-transit --typescript --tailwind --eslint --app\n\n# Install required dependencies\nnpm install @radix-ui/react-* framer-motion lucide-react recharts\nnpm install react-hook-form @hookform/resolvers zod\nnpm install @supabase/supabase-js"],["h3",{},["text",{},"1.2 Configure Tailwind CSS"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"// tailwind.config.ts\nexport default {\n  darkMode: [\"class\"],\n  content: [\n    './pages/**/*.{ts,tsx}',\n    './components/**/*.{ts,tsx}',\n    './app/**/*.{ts,tsx}',\n    './src/**/*.{ts,tsx}',\n  ],\n  theme: {\n    extend: {\n      colors: {\n        border: \"hsl(var(--border))\",\n        background: \"hsl(var(--background))\",\n        // Add custom color scheme for logistics theme\n        logistics: {\n          primary: \"#1e40af\", // Blue\n          secondary: \"#059669\", // Green\n          accent: \"#7c3aed\", // Purple\n          warning: \"#f59e0b\", // Amber\n          danger: \"#dc2626\", // Red\n        }\n      },\n      animation: {\n        \"truck-move\": \"truck-move 20s linear infinite\",\n        \"fade-in\": \"fade-in 0.5s ease-in-out\",\n      }\n    },\n  },\n  plugins: [require(\"tailwindcss-animate\")],\n}"],["h3",{},["text",{},"1.3 Setup Global Styles"]],["Codeblock",{"lang":"css","meta":{},"closed":true},"/* app/globals.css */\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 222.2 84% 4.9%;\n    --foreground: 210 40% 98%;\n    /* Define logistics-specific CSS variables */\n  }\n  \n  body {\n    background-color: hsl(var(--background));\n    color: hsl(var(--foreground));\n  }\n}\n\n@layer components {\n  .logistics-gradient {\n    @apply bg-gradient-to-br from-blue-900 via-slate-900 to-purple-900;\n  }\n  \n  .truck-animation {\n    animation: truck-move 20s linear infinite;\n  }\n}"],["h2",{},["text",{},"Step 2: Authentication System Implementation"]],["h3",{},["text",{},"2.1 Create Authentication Context"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$116"],["h3",{},["text",{},"2.2 Build Login Page"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$117"],["h3",{},["text",{},"2.3 Build Signup Page"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$118"],["h2",{},["text",{},"Step 3: Landing Page Implementation"]],["h3",{},["text",{},"3.1 Create Main Navigation"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$119"],["h3",{},["text",{},"3.2 Build Hero Section"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$11a"],["h3",{},["text",{},"3.3 Create Features Section"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$11b"],["h2",{},["text",{},"Step 4: Dashboard Implementation"]],["h3",{},["text",{},"4.1 Create Dashboard Layout"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$11c"],["h3",{},["text",{},"4.2 Build Dashboard Sidebar"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$11d"],["h3",{},["text",{},"4.3 Create Dashboard Header"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$11e"],["h3",{},["text",{},"4.4 Build Main Dashboard Page"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$11f"],["h2",{},["text",{},"Step 5: Shipment Management Implementation"]],["h3",{},["text",{},"5.1 Create Shipment Table Component"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$120"],["h3",{},["text",{},"5.2 Create Shipment Map Component"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$121"],["h3",{},["text",{},"5.3 Create Shipments Page"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$122"],["h2",{},["text",{},"Step 6: AI Tools Implementation"]],["h3",{},["text",{},"6.1 Create Route Optimizer Component"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$123"],["h3",{},["text",{},"6.2 Create AI Tools Hub Page"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$124"],["h2",{},["text",{},"Step 7: Final Implementation Steps"]],["h3",{},["text",{},"7.1 Create Translation Context"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$125"],["h3",{},["text",{},"7.2 Create Root Layout"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"// app/layout.tsx\nimport type { Metadata } from \"next\"\nimport { Inter } from 'next/font/google'\nimport \"./globals.css\"\nimport { AuthProvider } from \"@/lib/auth-context\"\nimport { TranslationProvider } from \"@/lib/translation-context\"\nimport { Toaster } from \"@/components/ui/toaster\"\n\nconst inter = Inter({ subsets: [\"latin\"] })\n\nexport const metadata: Metadata = {\n  title: \"MarocTransit - AI-Powered Logistics Platform\",\n  description: \"Connect shippers and carriers with intelligent matching, real-time tracking, and optimized routes across Morocco and beyond.\",\n}\n\nexport default function RootLayout({\n  children,\n}: {\n  children: React.ReactNode\n}) {\n  return (\n    <html lang=\"en\" suppressHydrationWarning>\n      <body className={inter.className}>\n        <TranslationProvider>\n          <AuthProvider>\n            {children}\n            <Toaster />\n          </AuthProvider>\n        </TranslationProvider>\n      </body>\n    </html>\n  )\n}"],["h2",{},["text",{},"Summary"]],["p",{},["text",{},"This comprehensive frontend implementation guide covers:"]],["ol",{"start":1},["li",{"index":1},["strong",{},["text",{},"Project Setup"]],["text",{}," - Next.js 14 with TypeScript, Tailwind CSS, and shadcn/ui"]],["li",{"index":2},["strong",{},["text",{},"Authentication System"]],["text",{}," - Complete login/signup flow with role-based access"]],["li",{"index":3},["strong",{},["text",{},"Landing Page"]],["text",{}," - Hero section, features, testimonials, and CTAs"]],["li",{"index":4},["strong",{},["text",{},"Dashboard System"]],["text",{}," - Role-specific dashboards for individuals, carriers, and companies"]],["li",{"index":5},["strong",{},["text",{},"Shipment Management"]],["text",{}," - Table views, maps, tracking, and details"]],["li",{"index":6},["strong",{},["text",{},"AI Tools"]],["text",{}," - Route optimization, load matching, maintenance prediction"]],["li",{"index":7},["strong",{},["text",{},"Internationalization"]],["text",{}," - Multi-language support with RTL for Arabic"]],["li",{"index":8},["strong",{},["text",{},"State Management"]],["text",{}," - Context API for auth and translations"]]],["p",{},["text",{},"Each component is fully responsive, accessible, and follows modern React patterns. The implementation provides a solid foundation for a production-ready logistics platform with AI capabilities."]]]],[1,{}]]},"context":[],"isContentLoading":false,"role":"assistant","id":"jA2cDiaj4MGEsnS8O2SGdxiShOGmO9Ov","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"zizjIVbO0Zs7Djo8GzKEbW1jxyorz5v9","type":"message","creditCost":0.363228,"workMetrics":{"diffMap":{}},"createdAt":"$D2025-06-02T09:04:58.098Z","updatedAt":"$D2025-06-02T09:10:26.379Z"},{"content":{"type":"parts","parts":[{"type":"mdx","content":"can you do the same thing now for backend"}],"version":1},"role":"user","id":"HgnSMBMYx1ecDYrPTk6RxsWN6Qtr03fW","attachments":[],"parentId":"jA2cDiaj4MGEsnS8O2SGdxiShOGmO9Ov","type":"message","authorId":"K5i2PL0Ra6Ij6s0ybBb8w0Sn","createdAt":"$D2025-06-02T10:46:27.492Z"},{"content":{"type":"message-binary-format","value":[[0,[["h1",{},["text",{},"MarocTransit Backend Development Guide - Complete Step-by-Step Implementation"]],["h2",{},["text",{},"Project Overview"]],["p",{},["text",{},"MarocTransit backend is a comprehensive logistics platform API built with Next.js 14 App Router, featuring AI-powered tools, real-time tracking, and multi-database architecture. This guide provides step-by-step instructions for implementing all backend features."]],["h2",{},["text",{},"Technology Stack"]],["ul",{"start":1},["li",{"index":1},["strong",{},["text",{},"Framework"]],["text",{},": Next.js 14 with App Router"]],["li",{"index":2},["strong",{},["text",{},"Database"]],["text",{},": Neon PostgreSQL (primary) + Supabase (auth & storage)"]],["li",{"index":3},["strong",{},["text",{},"AI"]],["text",{},": Groq API for intelligent matching and optimization"]],["li",{"index":4},["strong",{},["text",{},"Authentication"]],["text",{},": Custom JWT + Supabase Auth"]],["li",{"index":5},["strong",{},["text",{},"File Storage"]],["text",{},": Supabase Storage"]],["li",{"index":6},["strong",{},["text",{},"Real-time"]],["text",{},": Server-Sent Events + WebSockets"]],["li",{"index":7},["strong",{},["text",{},"Validation"]],["text",{},": Zod schemas"]],["li",{"index":8},["strong",{},["text",{},"ORM"]],["text",{},": Raw SQL with Neon serverless driver"]]],["h2",{},["text",{},"Step 1: Project Setup and Database Configuration"]],["h3",{},["text",{},"1.1 Environment Variables Setup"]],["Codeblock",{"lang":"shellscript","meta":{},"closed":true},"# .env.local\n# Neon Database\nDATABASE_URL=\"postgresql://username:password@host/database\"\nNEON_DATABASE_URL=\"postgresql://username:password@host/database\"\n\n# Supabase\nSUPABASE_URL=\"https://your-project.supabase.co\"\nSUPABASE_ANON_KEY=\"your-anon-key\"\nSUPABASE_SERVICE_ROLE_KEY=\"your-service-role-key\"\n\n# Groq AI\nGROQ_API_KEY=\"your-groq-api-key\"\n\n# JWT\nJWT_SECRET=\"your-jwt-secret\"\nNEXTAUTH_SECRET=\"your-nextauth-secret\"\n\n# External APIs\nGOOGLE_MAPS_API_KEY=\"your-google-maps-key\"\nWEATHER_API_KEY=\"your-weather-api-key\""],["h3",{},["text",{},"1.2 Database Schema Setup"]],["Codeblock",{"lang":"sql","meta":{},"closed":true},"$126"],["h3",{},["text",{},"1.3 Database Connection Setup"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$127"],["h3",{},["text",{},"1.4 Supabase Configuration"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$128"],["h2",{},["text",{},"Step 2: Authentication System Implementation"]],["h3",{},["text",{},"2.1 Authentication Utilities"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$129"],["h3",{},["text",{},"2.2 Authentication API Routes"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$12a"],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$12b"],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"// app/api/auth/logout/route.ts\nimport { NextRequest, NextResponse } from \"next/server\"\n\nexport async function POST(request: NextRequest) {\n  try {\n    const response = NextResponse.json({ success: true })\n    \n    // Clear the auth cookie\n    response.cookies.set({\n      name: \"auth-token\",\n      value: \"\",\n      httpOnly: true,\n      secure: process.env.NODE_ENV === \"production\",\n      sameSite: \"strict\",\n      maxAge: 0\n    })\n\n    return response\n  } catch (error) {\n    console.error(\"Logout error:\", error)\n    return NextResponse.json(\n      { error: \"Internal server error\" },\n      { status: 500 }\n    )\n  }\n}"],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"// app/api/auth/me/route.ts\nimport { NextRequest, NextResponse } from \"next/server\"\nimport { verifyAuth } from \"@/lib/auth\"\n\nexport async function GET(request: NextRequest) {\n  try {\n    const { user, error } = await verifyAuth(request)\n\n    if (!user) {\n      return NextResponse.json(\n        { error: error || \"Unauthorized\" },\n        { status: 401 }\n      )\n    }\n\n    return NextResponse.json({ user })\n  } catch (error) {\n    console.error(\"Get user error:\", error)\n    return NextResponse.json(\n      { error: \"Internal server error\" },\n      { status: 500 }\n    )\n  }\n}"],["h2",{},["text",{},"Step 3: Core API Endpoints Implementation"]],["h3",{},["text",{},"3.1 Shipments API"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$12c"],["h3",{},["text",{},"3.2 Shipment Details API"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$12d"],["h3",{},["text",{},"3.3 Tracking API"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$12e"],["h2",{},["text",{},"Step 4: AI-Powered Features Implementation"]],["h3",{},["text",{},"4.1 Route Optimization Service"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$12f"],["h3",{},["text",{},"4.2 Load Matching Service"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$130"],["h3",{},["text",{},"4.3 Load Matching API"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$131"],["h3",{},["text",{},"4.4 Route Optimization API"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$132"],["h2",{},["text",{},"Step 5: Fleet Management APIs"]],["h3",{},["text",{},"5.1 Trucks API"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$133"],["h3",{},["text",{},"5.2 Drivers API"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$134"],["h2",{},["text",{},"Step 6: Document Management System"]],["h3",{},["text",{},"6.1 Document Upload API"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$135"],["h3",{},["text",{},"6.2 Documents API"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$136"],["h2",{},["text",{},"Step 7: Real-time Features and WebSocket Implementation"]],["h3",{},["text",{},"7.1 Real-time Tracking Updates"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$137"],["h3",{},["text",{},"7.2 Server-Sent Events for Real-time Updates"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$138"],["h2",{},["text",{},"Step 8: Analytics and Reporting APIs"]],["h3",{},["text",{},"8.1 Analytics Data API"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$139"],["h3",{},["text",{},"1.2 Database Schema Setup"]],["Codeblock",{"lang":"sql","meta":{},"closed":true},"$13a"],["h3",{},["text",{},"1.3 Database Connection Setup"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$13b"],["h3",{},["text",{},"1.4 Supabase Configuration"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$13c"],["h2",{},["text",{},"Step 2: Authentication System Implementation"]],["h3",{},["text",{},"2.1 Authentication Utilities"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$13d"],["h3",{},["text",{},"2.2 Authentication API Routes"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$13e"],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$13f"],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"// app/api/auth/logout/route.ts\nimport { NextRequest, NextResponse } from \"next/server\"\n\nexport async function POST(request: NextRequest) {\n  try {\n    const response = NextResponse.json({ success: true })\n    \n    // Clear the auth cookie\n    response.cookies.set({\n      name: \"auth-token\",\n      value: \"\",\n      httpOnly: true,\n      secure: process.env.NODE_ENV === \"production\",\n      sameSite: \"strict\",\n      maxAge: 0\n    })\n\n    return response\n  } catch (error) {\n    console.error(\"Logout error:\", error)\n    return NextResponse.json(\n      { error: \"Internal server error\" },\n      { status: 500 }\n    )\n  }\n}"],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"// app/api/auth/me/route.ts\nimport { NextRequest, NextResponse } from \"next/server\"\nimport { verifyAuth } from \"@/lib/auth\"\n\nexport async function GET(request: NextRequest) {\n  try {\n    const { user, error } = await verifyAuth(request)\n\n    if (!user) {\n      return NextResponse.json(\n        { error: error || \"Unauthorized\" },\n        { status: 401 }\n      )\n    }\n\n    return NextResponse.json({ user })\n  } catch (error) {\n    console.error(\"Get user error:\", error)\n    return NextResponse.json(\n      { error: \"Internal server error\" },\n      { status: 500 }\n    )\n  }\n}"],["h2",{},["text",{},"Step 3: Core API Endpoints Implementation"]],["h3",{},["text",{},"3.1 Shipments API"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$140"],["h3",{},["text",{},"3.2 Shipment Details API"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$141"],["h3",{},["text",{},"3.3 Tracking API"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$142"],["h2",{},["text",{},"Step 4: AI-Powered Features Implementation"]],["h3",{},["text",{},"4.1 Route Optimization Service"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$143"],["h3",{},["text",{},"4.2 Load Matching Service"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$144"],["h3",{},["text",{},"4.3 Load Matching API"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$145"],["h3",{},["text",{},"4.4 Route Optimization API"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$146"],["h2",{},["text",{},"Step 5: Fleet Management APIs"]],["h3",{},["text",{},"5.1 Trucks API"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$147"],["h3",{},["text",{},"5.2 Drivers API"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$148"],["h2",{},["text",{},"Step 6: Document Management System"]],["h3",{},["text",{},"6.1 Document Upload API"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$149"],["h3",{},["text",{},"6.2 Documents API"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$14a"],["h2",{},["text",{},"Step 7: Real-time Features and WebSocket Implementation"]],["h3",{},["text",{},"7.1 Real-time Tracking Updates"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$14b"],["h3",{},["text",{},"7.2 Server-Sent Events for Real-time Updates"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$14c"],["h2",{},["text",{},"Step 8: Analytics and Reporting APIs"]],["h3",{},["text",{},"8.1 Analytics Data API"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$14d"],["h3",{},["text",{},"8.2 Custom Reports API"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$14e"],["h2",{},["text",{},"Step 9: Middleware and Security Implementation"]],["h3",{},["text",{},"9.1 Authentication Middleware"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$14f"],["h3",{},["text",{},"9.2 Health Check API"]],["Codeblock",{"lang":"typescript","meta":{},"closed":true},"$150"],["h2",{},["text",{},"Step 10: Deployment and Configuration"]],["h3",{},["text",{},"10.1 Environment Variables Setup"]],["Codeblock",{"lang":"shellscript","meta":{},"closed":true},"# .env.local\n# Database\nDATABASE_URL=\"postgresql://username:password@host/database\"\nNEON_DATABASE_URL=\"postgresql://username:password@host/database\"\n\n# Supabase\nSUPABASE_URL=\"https://your-project.supabase.co\"\nSUPABASE_ANON_KEY=\"your-anon-key\"\nSUPABASE_SERVICE_ROLE_KEY=\"your-service-role-key\"\n\n# Authentication\nJWT_SECRET=\"your-jwt-secret\"\nNEXTAUTH_SECRET=\"your-nextauth-secret\"\n\n# AI\nGROQ_API_KEY=\"your-groq-api-key\"\n\n# External APIs\nGOOGLE_MAPS_API_KEY=\"your-google-maps-key\"\nWEATHER_API_KEY=\"your-weather-api-key\"\n\n# Application\nAPP_VERSION=\"1.0.0\"\nFRONTEND_URL=\"http://localhost:3000\""],["h3",{},["text",{},"10.2 Next.js Configuration"]],["Codeblock",{"lang":"javascript","meta":{},"closed":true},"// next.config.mjs\n/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  reactStrictMode: true,\n  swcMinify: true,\n  images: {\n    domains: ['your-supabase-project.supabase.co'],\n  },\n  experimental: {\n    serverActions: true,\n  },\n  async headers() {\n    return [\n      {\n        // Apply these headers to all routes\n        source: '/(.*)',\n        headers: [\n          {\n            key: 'X-Content-Type-Options',\n            value: 'nosniff',\n          },\n          {\n            key: 'X-Frame-Options',\n            value: 'DENY',\n          },\n          {\n            key: 'X-XSS-Protection',\n            value: '1; mode=block',\n          },\n          {\n            key: 'Referrer-Policy',\n            value: 'strict-origin-when-cross-origin',\n          },\n        ],\n      },\n    ]\n  },\n}\n\nexport default nextConfig"],["h2",{},["text",{},"Conclusion"]],["p",{},["text",{},"This comprehensive backend implementation for MarocTransit provides a solid foundation for a modern logistics platform. The architecture leverages Next.js 14 App Router with server components and API routes, combined with Neon PostgreSQL for the primary database and Supabase for authentication and storage. The AI-powered features using Groq API enable intelligent route optimization, load matching, and predictive maintenance."]],["p",{},["text",{},"The implementation includes:"]],["ul",{"start":1},["li",{"index":1},["text",{},"Complete database schema with optimized indexes"]],["li",{"index":2},["text",{},"Authentication system with JWT tokens"]],["li",{"index":3},["text",{},"Core API endpoints for shipments, trucks, drivers, and routes"]],["li",{"index":4},["text",{},"Real-time tracking with WebSockets and Server-Sent Events"]],["li",{"index":5},["text",{},"Document management with AI processing"]],["li",{"index":6},["text",{},"Analytics and reporting APIs"]],["li",{"index":7},["text",{},"Middleware for security and authentication"]]],["p",{},["text",{},"This backend is designed to be scalable, maintainable, and secure, providing all the necessary functionality for the MarocTransit logistics platform."]],["Actions",{},["Action",{"name":"Set up database schema","description":"Create the database tables and relationships using the provided SQL schema"}],["Action",{"name":"Configure authentication","description":"Set up JWT authentication and user management"}],["Action",{"name":"Implement AI features","description":"Integrate Groq API for route optimization and load matching"}],["Action",{"name":"Set up real-time tracking","description":"Implement WebSockets and SSE for real-time updates"}],["Action",{"name":"Create analytics dashboard","description":"Build a dashboard using the analytics API endpoints"}]]]],[1,{}]]},"context":[],"isContentLoading":false,"role":"assistant","id":"4LshxNgJcTVGqwkoNcEeuBLgmfowtuGp","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"HgnSMBMYx1ecDYrPTk6RxsWN6Qtr03fW","type":"message","creditCost":0.1426995,"workMetrics":{"diffMap":{}},"createdAt":"$D2025-06-02T10:53:39.983Z","updatedAt":"$D2025-06-02T10:56:34.551Z"},{"content":{"type":"parts","parts":[{"type":"mdx","content":"can you write me a prompt that explain all the users and the dashboards for each , and the ai and platform over ,"}],"version":1},"role":"user","id":"mOpk1W0SAQFFZvkrTQMUVHAZIqgWoDhe","attachments":[],"parentId":"4LshxNgJcTVGqwkoNcEeuBLgmfowtuGp","type":"message","authorId":"K5i2PL0Ra6Ij6s0ybBb8w0Sn","createdAt":"$D2025-06-02T16:14:11.066Z"},{"content":{"type":"message-binary-format","value":[[0,[["h1",{},["text",{},"MarocTransit Platform - Complete User Guide & AI-Powered Features Overview"]],["h2",{},["text",{},"Platform Overview"]],["p",{},["text",{},"MarocTransit is a comprehensive AI-powered logistics platform designed specifically for the Moroccan market, connecting shippers, carriers, and fleet managers in a unified ecosystem. The platform leverages advanced artificial intelligence to optimize routes, match loads with optimal carriers, predict maintenance needs, and provide real-time insights for better decision-making."]],["h2",{},["text",{},"User Types & Role-Based Access"]],["h3",{},["text",{},"1. Individual Shippers"]],["p",{},["strong",{},["text",{},"Who they are:"]],["text",{}," Small businesses, e-commerce sellers, individuals who need to ship goods occasionally or regularly."]],["p",{},["strong",{},["text",{},"Dashboard Features:"]]],["ul",{"start":1},["li",{"index":1},["p",{},["strong",{},["text",{},"AI-Powered Carrier Matching Dashboard"]]],["ul",{"start":1},["li",{"index":1},["text",{},"Intelligent carrier recommendations based on shipment requirements"]],["li",{"index":2},["text",{},"Real-time pricing from multiple carriers"]],["li",{"index":3},["text",{},"Carrier ratings and performance history"]],["li",{"index":4},["text",{},"Instant booking with AI-optimized matches"]],["li",{"index":5},["text",{},"Cost comparison and savings calculator"]]]],["li",{"index":2},["p",{},["strong",{},["text",{},"Shipment Management Center"]]],["ul",{"start":1},["li",{"index":1},["text",{},"Create new shipments with smart form auto-completion"]],["li",{"index":2},["text",{},"Track active shipments with real-time GPS updates"]],["li",{"index":3},["text",{},"Shipment history and analytics"]],["li",{"index":4},["text",{},"Digital document management (invoices, receipts, customs forms)"]],["li",{"index":5},["text",{},"Delivery confirmation and proof of delivery"]]]],["li",{"index":3},["p",{},["strong",{},["text",{},"Cost Analytics Dashboard"]]],["ul",{"start":1},["li",{"index":1},["text",{},"Shipping cost trends and patterns"]],["li",{"index":2},["text",{},"Budget tracking and forecasting"]],["li",{"index":3},["text",{},"AI-generated cost optimization recommendations"]],["li",{"index":4},["text",{},"Savings achieved through platform usage"]],["li",{"index":5},["text",{},"Monthly/quarterly spending reports"]]]]],["p",{},["strong",{},["text",{},"Key AI Features for Individual Shippers:"]]],["ul",{"start":1},["li",{"index":1},["strong",{},["text",{},"Smart Carrier Matching:"]],["text",{}," AI analyzes shipment details, urgency, budget, and carrier performance to recommend the best options"]],["li",{"index":2},["strong",{},["text",{},"Price Prediction:"]],["text",{}," Machine learning models predict shipping costs based on historical data and market conditions"]],["li",{"index":3},["strong",{},["text",{},"Route Optimization:"]],["text",{}," AI suggests optimal pickup and delivery times to reduce costs"]],["li",{"index":4},["strong",{},["text",{},"Fraud Detection:"]],["text",{}," AI monitors for suspicious activities and protects against fraudulent carriers"]]],["h3",{},["text",{},"2. Carriers (Truck Drivers/Small Fleet Owners)"]],["p",{},["strong",{},["text",{},"Who they are:"]],["text",{}," Independent truck drivers, small trucking companies with 1-10 vehicles."]],["p",{},["strong",{},["text",{},"Dashboard Features:"]]],["ul",{"start":1},["li",{"index":1},["p",{},["strong",{},["text",{},"AI Load Finder Dashboard"]]],["ul",{"start":1},["li",{"index":1},["text",{},"Personalized load recommendations based on location, truck specs, and preferences"]],["li",{"index":2},["text",{},"Real-time available loads map with proximity indicators"]],["li",{"index":3},["text",{},"Load matching score with explanation of why each load is recommended"]],["li",{"index":4},["text",{},"Bidding system with AI-suggested competitive pricing"]],["li",{"index":5},["text",{},"Route planning with multiple pickup/delivery optimization"]]]],["li",{"index":2},["p",{},["strong",{},["text",{},"Driver Performance Center"]]],["ul",{"start":1},["li",{"index":1},["text",{},"Performance metrics and ratings from shippers"]],["li",{"index":2},["text",{},"Earnings tracking and payment history"]],["li",{"index":3},["text",{},"Fuel efficiency monitoring and tips"]],["li",{"index":4},["text",{},"Safety score and incident tracking"]],["li",{"index":5},["text",{},"Professional development recommendations"]]]],["li",{"index":3},["p",{},["strong",{},["text",{},"Fleet Management (for small fleets)"]]],["ul",{"start":1},["li",{"index":1},["text",{},"Vehicle status and location tracking"]],["li",{"index":2},["text",{},"Maintenance scheduling and reminders"]],["li",{"index":3},["text",{},"Driver assignment and scheduling"]],["li",{"index":4},["text",{},"Fuel consumption analytics"]],["li",{"index":5},["text",{},"Insurance and document management"]]]]],["p",{},["strong",{},["text",{},"Key AI Features for Carriers:"]]],["ul",{"start":1},["li",{"index":1},["strong",{},["text",{},"Intelligent Load Matching:"]],["text",{}," AI considers driver location, truck capacity, preferred routes, and historical performance to suggest optimal loads"]],["li",{"index":2},["strong",{},["text",{},"Dynamic Pricing:"]],["text",{}," AI recommends competitive bid prices based on market conditions, distance, and demand"]],["li",{"index":3},["strong",{},["text",{},"Route Optimization:"]],["text",{}," Advanced algorithms plan multi-stop routes to maximize earnings and minimize fuel consumption"]],["li",{"index":4},["strong",{},["text",{},"Predictive Maintenance:"]],["text",{}," AI analyzes vehicle data to predict maintenance needs and prevent breakdowns"]],["li",{"index":5},["strong",{},["text",{},"Demand Forecasting:"]],["text",{}," Machine learning predicts high-demand routes and times for better planning"]]],["h3",{},["text",{},"3. Company Fleet Managers"]],["p",{},["strong",{},["text",{},"Who they are:"]],["text",{}," Large logistics companies, manufacturing companies with their own fleets, 3PL providers."]],["p",{},["strong",{},["text",{},"Dashboard Features:"]]],["ul",{"start":1},["li",{"index":1},["p",{},["strong",{},["text",{},"Fleet Command Center"]]],["ul",{"start":1},["li",{"index":1},["text",{},"Real-time fleet overview with vehicle locations and status"]],["li",{"index":2},["text",{},"Driver management and assignment optimization"]],["li",{"index":3},["text",{},"Route planning and dispatch management"]],["li",{"index":4},["text",{},"Performance monitoring across all vehicles and drivers"]],["li",{"index":5},["text",{},"Emergency response and incident management"]]]],["li",{"index":2},["p",{},["strong",{},["text",{},"AI Operations Dashboard"]]],["ul",{"start":1},["li",{"index":1},["text",{},"Automated load assignment with AI optimization"]],["li",{"index":2},["text",{},"Predictive analytics for demand forecasting"]],["li",{"index":3},["text",{},"Resource allocation optimization"]],["li",{"index":4},["text",{},"Performance benchmarking against industry standards"]],["li",{"index":5},["text",{},"Cost center analysis and profitability tracking"]]]],["li",{"index":3},["p",{},["strong",{},["text",{},"Advanced Analytics Suite"]]],["ul",{"start":1},["li",{"index":1},["text",{},"Fleet utilization and efficiency metrics"]],["li",{"index":2},["text",{},"Driver performance analytics and coaching insights"]],["li",{"index":3},["text",{},"Fuel consumption optimization recommendations"]],["li",{"index":4},["text",{},"Maintenance cost analysis and scheduling"]],["li",{"index":5},["text",{},"Customer satisfaction tracking and improvement suggestions"]]]],["li",{"index":4},["p",{},["strong",{},["text",{},"Strategic Planning Center"]]],["ul",{"start":1},["li",{"index":1},["text",{},"Capacity planning and expansion recommendations"]],["li",{"index":2},["text",{},"Market analysis and opportunity identification"]],["li",{"index":3},["text",{},"Competitive intelligence and benchmarking"]],["li",{"index":4},["text",{},"ROI analysis for new routes and services"]],["li",{"index":5},["text",{},"Sustainability and carbon footprint tracking"]]]]],["p",{},["strong",{},["text",{},"Key AI Features for Fleet Managers:"]]],["ul",{"start":1},["li",{"index":1},["strong",{},["text",{},"Fleet Optimization:"]],["text",{}," AI continuously optimizes vehicle assignments, routes, and schedules to maximize efficiency"]],["li",{"index":2},["strong",{},["text",{},"Predictive Analytics:"]],["text",{}," Machine learning models forecast demand, identify trends, and predict operational challenges"]],["li",{"index":3},["strong",{},["text",{},"Automated Dispatch:"]],["text",{}," AI automatically assigns loads to the most suitable drivers based on multiple factors"]],["li",{"index":4},["strong",{},["text",{},"Performance Optimization:"]],["text",{}," AI identifies underperforming assets and provides actionable recommendations"]],["li",{"index":5},["strong",{},["text",{},"Cost Optimization:"]],["text",{}," Advanced algorithms identify cost-saving opportunities across all operations"]]],["h3",{},["text",{},"4. System Administrators"]],["p",{},["strong",{},["text",{},"Who they are:"]],["text",{}," MarocTransit platform administrators, technical support staff."]],["p",{},["strong",{},["text",{},"Dashboard Features:"]]],["ul",{"start":1},["li",{"index":1},["p",{},["strong",{},["text",{},"Platform Health Monitor"]]],["ul",{"start":1},["li",{"index":1},["text",{},"System performance metrics and alerts"]],["li",{"index":2},["text",{},"User activity and engagement analytics"]],["li",{"index":3},["text",{},"API usage and performance monitoring"]],["li",{"index":4},["text",{},"Database health and optimization recommendations"]],["li",{"index":5},["text",{},"Security monitoring and threat detection"]]]],["li",{"index":2},["p",{},["strong",{},["text",{},"User Management Center"]]],["ul",{"start":1},["li",{"index":1},["text",{},"User verification and onboarding management"]],["li",{"index":2},["text",{},"Role and permission management"]],["li",{"index":3},["text",{},"Support ticket management and resolution"]],["li",{"index":4},["text",{},"User feedback and satisfaction tracking"]],["li",{"index":5},["text",{},"Account suspension and fraud investigation tools"]]]],["li",{"index":3},["p",{},["strong",{},["text",{},"AI Model Management"]]],["ul",{"start":1},["li",{"index":1},["text",{},"AI model performance monitoring"]],["li",{"index":2},["text",{},"Training data quality assessment"]],["li",{"index":3},["text",{},"Model accuracy and improvement tracking"]],["li",{"index":4},["text",{},"A/B testing for new AI features"]],["li",{"index":5},["text",{},"Algorithm bias detection and correction"]]]]],["h2",{},["text",{},"AI-Powered Features Across the Platform"]],["h3",{},["text",{},"1. Intelligent Route Optimization"]],["p",{},["strong",{},["text",{},"Technology:"]],["text",{}," Advanced machine learning algorithms combined with real-time data processing\n"],["strong",{},["text",{},"Features:"]]],["ul",{"start":1},["li",{"index":1},["strong",{},["text",{},"Multi-factor Optimization:"]],["text",{}," Considers distance, traffic patterns, weather conditions, fuel costs, toll roads, and driver preferences"]],["li",{"index":2},["strong",{},["text",{},"Dynamic Re-routing:"]],["text",{}," Real-time adjustments based on traffic incidents, weather changes, or delivery updates"]],["li",{"index":3},["strong",{},["text",{},"Historical Learning:"]],["text",{}," AI learns from past routes to improve future recommendations"]],["li",{"index":4},["strong",{},["text",{},"Carbon Footprint Optimization:"]],["text",{}," Suggests eco-friendly routes to reduce environmental impact"]],["li",{"index":5},["strong",{},["text",{},"Time Window Optimization:"]],["text",{}," Balances delivery time requirements with cost efficiency"]]],["h3",{},["text",{},"2. Smart Load Matching"]],["p",{},["strong",{},["text",{},"Technology:"]],["text",{}," Deep learning neural networks with natural language processing\n"],["strong",{},["text",{},"Features:"]]],["ul",{"start":1},["li",{"index":1},["strong",{},["text",{},"Intelligent Pairing:"]],["text",{}," Matches shipments with carriers based on 50+ factors including location, capacity, experience, ratings, and preferences"]],["li",{"index":2},["strong",{},["text",{},"Compatibility Scoring:"]],["text",{}," Provides detailed explanations for why specific matches are recommended"]],["li",{"index":3},["strong",{},["text",{},"Predictive Matching:"]],["text",{}," Anticipates future load availability and pre-matches carriers"]],["li",{"index":4},["strong",{},["text",{},"Seasonal Optimization:"]],["text",{}," Adjusts matching algorithms based on seasonal demand patterns"]],["li",{"index":5},["strong",{},["text",{},"Risk Assessment:"]],["text",{}," Evaluates and minimizes risks in carrier-shipment pairings"]]],["h3",{},["text",{},"3. Predictive Maintenance"]],["p",{},["strong",{},["text",{},"Technology:"]],["text",{}," IoT sensors combined with machine learning predictive models\n"],["strong",{},["text",{},"Features:"]]],["ul",{"start":1},["li",{"index":1},["strong",{},["text",{},"Failure Prediction:"]],["text",{}," Predicts vehicle component failures before they occur"]],["li",{"index":2},["strong",{},["text",{},"Maintenance Scheduling:"]],["text",{}," Optimizes maintenance schedules to minimize downtime"]],["li",{"index":3},["strong",{},["text",{},"Cost Optimization:"]],["text",{}," Balances maintenance costs with operational efficiency"]],["li",{"index":4},["strong",{},["text",{},"Performance Monitoring:"]],["text",{}," Tracks vehicle performance metrics in real-time"]],["li",{"index":5},["strong",{},["text",{},"Warranty Management:"]],["text",{}," Tracks warranty status and optimizes claim processes"]]],["h3",{},["text",{},"4. Dynamic Pricing Intelligence"]],["p",{},["strong",{},["text",{},"Technology:"]],["text",{}," Real-time market analysis with machine learning price optimization\n"],["strong",{},["text",{},"Features:"]]],["ul",{"start":1},["li",{"index":1},["strong",{},["text",{},"Market-Based Pricing:"]],["text",{}," Adjusts prices based on supply and demand dynamics"]],["li",{"index":2},["strong",{},["text",{},"Competitive Analysis:"]],["text",{}," Monitors competitor pricing and suggests competitive rates"]],["li",{"index":3},["strong",{},["text",{},"Seasonal Adjustments:"]],["text",{}," Accounts for seasonal variations in pricing"]],["li",{"index":4},["strong",{},["text",{},"Customer Segmentation:"]],["text",{}," Provides personalized pricing based on customer history and loyalty"]],["li",{"index":5},["strong",{},["text",{},"Profit Optimization:"]],["text",{}," Balances competitive pricing with profitability"]]],["h3",{},["text",{},"5. Demand Forecasting"]],["p",{},["strong",{},["text",{},"Technology:"]],["text",{}," Time series analysis with external data integration\n"],["strong",{},["text",{},"Features:"]]],["ul",{"start":1},["li",{"index":1},["strong",{},["text",{},"Seasonal Predictions:"]],["text",{}," Forecasts demand based on historical patterns and seasonal trends"]],["li",{"index":2},["strong",{},["text",{},"Event-Based Forecasting:"]],["text",{}," Predicts demand spikes around holidays, events, and economic changes"]],["li",{"index":3},["strong",{},["text",{},"Regional Analysis:"]],["text",{}," Provides location-specific demand forecasts"]],["li",{"index":4},["strong",{},["text",{},"Capacity Planning:"]],["text",{}," Helps fleet managers plan capacity based on predicted demand"]],["li",{"index":5},["strong",{},["text",{},"Market Opportunity Identification:"]],["text",{}," Identifies underserved routes and markets"]]],["h3",{},["text",{},"6. AI-Powered Customer Support"]],["p",{},["strong",{},["text",{},"Technology:"]],["text",{}," Natural language processing with automated response generation\n"],["strong",{},["text",{},"Features:"]]],["ul",{"start":1},["li",{"index":1},["strong",{},["text",{},"Intelligent Chatbot:"]],["text",{}," Provides instant answers to common questions"]],["li",{"index":2},["strong",{},["text",{},"Sentiment Analysis:"]],["text",{}," Monitors customer satisfaction and identifies issues early"]],["li",{"index":3},["strong",{},["text",{},"Automated Ticket Routing:"]],["text",{}," Routes support tickets to the most appropriate team members"]],["li",{"index":4},["strong",{},["text",{},"Predictive Support:"]],["text",{}," Identifies potential issues before customers report them"]],["li",{"index":5},["strong",{},["text",{},"Multilingual Support:"]],["text",{}," Supports Arabic, French, and English with real-time translation"]]],["h3",{},["text",{},"7. Document Intelligence"]],["p",{},["strong",{},["text",{},"Technology:"]],["text",{}," Optical character recognition (OCR) with AI document processing\n"],["strong",{},["text",{},"Features:"]]],["ul",{"start":1},["li",{"index":1},["strong",{},["text",{},"Automated Data Extraction:"]],["text",{}," Extracts key information from shipping documents, invoices, and customs forms"]],["li",{"index":2},["strong",{},["text",{},"Document Classification:"]],["text",{}," Automatically categorizes and organizes documents"]],["li",{"index":3},["strong",{},["text",{},"Compliance Checking:"]],["text",{}," Verifies documents meet regulatory requirements"]],["li",{"index":4},["strong",{},["text",{},"Digital Workflow:"]],["text",{}," Streamlines document approval and processing workflows"]],["li",{"index":5},["strong",{},["text",{},"Audit Trail:"]],["text",{}," Maintains complete digital records for compliance and auditing"]]],["h3",{},["text",{},"8. Real-Time Analytics & Insights"]],["p",{},["strong",{},["text",{},"Technology:"]],["text",{}," Stream processing with machine learning analytics\n"],["strong",{},["text",{},"Features:"]]],["ul",{"start":1},["li",{"index":1},["strong",{},["text",{},"Performance Dashboards:"]],["text",{}," Real-time visualization of key performance indicators"]],["li",{"index":2},["strong",{},["text",{},"Anomaly Detection:"]],["text",{}," Identifies unusual patterns that may indicate problems or opportunities"]],["li",{"index":3},["strong",{},["text",{},"Predictive Insights:"]],["text",{}," Provides forward-looking analytics and recommendations"]],["li",{"index":4},["strong",{},["text",{},"Benchmarking:"]],["text",{}," Compares performance against industry standards and best practices"]],["li",{"index":5},["strong",{},["text",{},"Custom Reporting:"]],["text",{}," Generates tailored reports based on specific business needs"]]],["h2",{},["text",{},"Platform Integration & Ecosystem"]],["h3",{},["text",{},"Third-Party Integrations"]],["ul",{"start":1},["li",{"index":1},["strong",{},["text",{},"ERP Systems:"]],["text",{}," Seamless integration with popular ERP platforms"]],["li",{"index":2},["strong",{},["text",{},"Accounting Software:"]],["text",{}," Direct integration with accounting and invoicing systems"]],["li",{"index":3},["strong",{},["text",{},"GPS Tracking:"]],["text",{}," Integration with various GPS and telematics providers"]],["li",{"index":4},["strong",{},["text",{},"Payment Gateways:"]],["text",{}," Support for multiple payment methods and currencies"]],["li",{"index":5},["strong",{},["text",{},"Government Systems:"]],["text",{}," Integration with customs and regulatory systems"]]],["h3",{},["text",{},"Mobile Applications"]],["ul",{"start":1},["li",{"index":1},["strong",{},["text",{},"Driver Mobile App:"]],["text",{}," GPS tracking, load management, communication tools"]],["li",{"index":2},["strong",{},["text",{},"Shipper Mobile App:"]],["text",{}," Shipment creation, tracking, and management on-the-go"]],["li",{"index":3},["strong",{},["text",{},"Manager Mobile App:"]],["text",{}," Fleet monitoring and management from anywhere"]]],["h3",{},["text",{},"API Ecosystem"]],["ul",{"start":1},["li",{"index":1},["strong",{},["text",{},"RESTful APIs:"]],["text",{}," Comprehensive API access for custom integrations"]],["li",{"index":2},["strong",{},["text",{},"Webhooks:"]],["text",{}," Real-time notifications for important events"]],["li",{"index":3},["strong",{},["text",{},"SDK Support:"]],["text",{}," Software development kits for popular programming languages"]],["li",{"index":4},["strong",{},["text",{},"Developer Portal:"]],["text",{}," Documentation, testing tools, and support for developers"]]],["h2",{},["text",{},"Security & Compliance"]],["h3",{},["text",{},"Data Security"]],["ul",{"start":1},["li",{"index":1},["strong",{},["text",{},"End-to-End Encryption:"]],["text",{}," All data encrypted in transit and at rest"]],["li",{"index":2},["strong",{},["text",{},"Multi-Factor Authentication:"]],["text",{}," Enhanced security for all user accounts"]],["li",{"index":3},["strong",{},["text",{},"Role-Based Access Control:"]],["text",{}," Granular permissions based on user roles"]],["li",{"index":4},["strong",{},["text",{},"Regular Security Audits:"]],["text",{}," Continuous monitoring and vulnerability assessments"]]],["h3",{},["text",{},"Regulatory Compliance"]],["ul",{"start":1},["li",{"index":1},["strong",{},["text",{},"GDPR Compliance:"]],["text",{}," Full compliance with European data protection regulations"]],["li",{"index":2},["strong",{},["text",{},"Local Regulations:"]],["text",{}," Adherence to Moroccan transportation and data laws"]],["li",{"index":3},["strong",{},["text",{},"Industry Standards:"]],["text",{}," Compliance with international logistics and transportation standards"]],["li",{"index":4},["strong",{},["text",{},"Audit Trails:"]],["text",{}," Complete logging for regulatory reporting and compliance"]]],["h2",{},["text",{},"Getting Started Guide"]],["h3",{},["text",{},"For Individual Shippers:"]],["ol",{"start":1},["li",{"index":1},["strong",{},["text",{},"Sign Up:"]],["text",{}," Create account with business verification"]],["li",{"index":2},["strong",{},["text",{},"Profile Setup:"]],["text",{}," Complete shipping preferences and requirements"]],["li",{"index":3},["strong",{},["text",{},"First Shipment:"]],["text",{}," Use AI-powered carrier matching for your first shipment"]],["li",{"index":4},["strong",{},["text",{},"Track & Monitor:"]],["text",{}," Follow your shipment with real-time updates"]],["li",{"index":5},["strong",{},["text",{},"Optimize:"]],["text",{}," Review AI recommendations for cost savings"]]],["h3",{},["text",{},"For Carriers:"]],["ol",{"start":1},["li",{"index":1},["strong",{},["text",{},"Registration:"]],["text",{}," Complete driver and vehicle verification process"]],["li",{"index":2},["strong",{},["text",{},"Vehicle Setup:"]],["text",{}," Add truck specifications and capabilities"]],["li",{"index":3},["strong",{},["text",{},"Profile Optimization:"]],["text",{}," Complete profile for better load matching"]],["li",{"index":4},["strong",{},["text",{},"Find Loads:"]],["text",{}," Use AI load finder to discover opportunities"]],["li",{"index":5},["strong",{},["text",{},"Build Reputation:"]],["text",{}," Complete shipments to build ratings and reviews"]]],["h3",{},["text",{},"For Fleet Managers:"]],["ol",{"start":1},["li",{"index":1},["strong",{},["text",{},"Company Onboarding:"]],["text",{}," Complete business verification and setup"]],["li",{"index":2},["strong",{},["text",{},"Fleet Integration:"]],["text",{}," Add vehicles and drivers to the platform"]],["li",{"index":3},["strong",{},["text",{},"System Integration:"]],["text",{}," Connect existing systems via APIs"]],["li",{"index":4},["strong",{},["text",{},"Team Training:"]],["text",{}," Train staff on platform features and AI tools"]],["li",{"index":5},["strong",{},["text",{},"Optimization:"]],["text",{}," Implement AI recommendations for improved efficiency"]]],["p",{},["text",{},"This comprehensive platform transforms traditional logistics operations through intelligent automation, providing each user type with tailored tools and insights to optimize their specific needs while contributing to a more efficient and sustainable transportation ecosystem in Morocco and beyond."]]]],[1,{}]]},"context":[],"isContentLoading":false,"role":"assistant","id":"49T27cbLpc8guZl4MnCi9cmg2LpVfPjm","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"mOpk1W0SAQFFZvkrTQMUVHAZIqgWoDhe","type":"message","creditCost":0.176481,"workMetrics":{"diffMap":{}},"createdAt":"$D2025-06-02T16:14:11.067Z","updatedAt":"$D2025-06-02T16:15:11.488Z"}],"lastSyncedAt":1789584534839,"undo":null,"activeForkKey":["gOLcI8SuS8zRLYMZATMGQX0zaxYDmsn9","4rgpcXBtJXTNDWlT6q3aH9BiiBdaaEBz","lJsrwcG9Y25GiBavcKbkXl98XWQWH2xn","Ywv9svhJnJIKbvZD76xX08yxvwncOcGM","6M7gom22SoYtdz9U8DQDN3wDUibv9qlN","Msl8xtg5KRYELPwnME62UN3KFfcErNk3","Tu6g15ScrGMcgNRzjzMpgex6H5gdFbUh","DlV4Vx3JMU2BBqQC7hPYxKax2qS2qaUm","zizjIVbO0Zs7Djo8GzKEbW1jxyorz5v9","jA2cDiaj4MGEsnS8O2SGdxiShOGmO9Ov","HgnSMBMYx1ecDYrPTk6RxsWN6Qtr03fW","4LshxNgJcTVGqwkoNcEeuBLgmfowtuGp","mOpk1W0SAQFFZvkrTQMUVHAZIqgWoDhe","49T27cbLpc8guZl4MnCi9cmg2LpVfPjm"],"lifecycle":{"phase":"idle","persistence":"persisted"},"isAuthor":false,"isRestoring":false,"hashMessageId":null},"@\"active-block\",\"Qli0ZGzWaPg\",":{"id":"xEmRw46yc6X","meta":{"id":"Open in v0","type":"code-project","project":"Open in v0"},"initial":true,"type":"code-project","messageId":"4rgpcXBtJXTNDWlT6q3aH9BiiBdaaEBz","language":"typescriptreact","source":"$151","closed":true,"hasSourceBeenEdited":false,"forkedFromBlockId":"b_CVvq9h9KoF6","isLoading":false,"needsBlockSource":false},"@\"chat:meta\",\"Qli0ZGzWaPg\",":{"title":"Fork of Open in v0","authorId":"K5i2PL0Ra6Ij6s0ybBb8w0Sn","ownerId":"team_P61qo34l2iSfiKttAZmUeYs8","storageEntityType":null,"storageEntityId":null,"vercelProjectId":"prj_vMyaaHTxdyL48HvIeWGwbya92Z8a","canWriteToChat":false},"@\"chat:vm-mode\",\"Qli0ZGzWaPg\",":false,"@\"chat:vercel-project\",\"Qli0ZGzWaPg\",":"$@152","@\"team:sensitive-environment-variable-policy\",\"Qli0ZGzWaPg\",":"$@153","@\"block-view\",\"Qli0ZGzWaPg\",":true,"integrations:figma":"$@154"},"children":["$L155","$L156","$L157","$L158","$L159"]}]}]}]
</article></body></html>

AI-Powered {" "}Logistics for Morocco

Powerful Features for Modern Logistics

AI-Powered Logistics Dashboard

AI Matching Results

Shipments

Optimized Route Analysis Results

AI-Powered Tools

Start with Route Optimizer

Use Load Matcher

Monitor & Optimize

Truck Logistics Dashboard

{title}

{title}

{author}

{feature.title}

{features[activeFeature].title}

{feature.title}

{item.title}

{roadmapItems[activeItem].title}

Key Features:

Development Timeline:

{orderId}

Customer

Facilitator

Driver Assigned

Internal ID

Tracking Number

Type

Date Scheduled

Date Dispatched

Date Started

Proof of Delivery

BREAKDOWN

SGD

{activity.type}

Carriers

Fleet Management

Breakdown by Status

We are #1 Logistics WORLDWIDE

AI-Powered {" "}Logistics
for Morocco