112:"ExplicitChatIdProvider" 113:I[903690,["$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$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","$8c","$8d","$7c","$85","$7f","$7e","$8e","$80","$8f","$90","$91","$7d","$92","$87","$8a","$84","$83","$88","$89","$93","$94","$86","$95","$82"],"$112"] 114:I[838238,["$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$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","$8c","$8d","$7c","$85","$7f","$7e","$8e","$80","$8f","$90","$91","$7d","$92","$87","$8a","$84","$83","$88","$89","$93","$94","$86","$95","$82"],"SWRDataProvider"] 117:[] 118:[["b_WNcjvO3M9Uz",null],["b_e15zKzRPpJr",null],["b_WnURlpaO23c",null]] 119:[["b_WNcjvO3M9Uz",{"templateVersionId":null,"templateCanonId":null}],["b_e15zKzRPpJr",{"templateVersionId":null,"templateCanonId":null}],["b_WnURlpaO23c",{"templateVersionId":null,"templateCanonId":null}]] 11a:[["b_2irwGhPtjF2","$D2025-07-20T15:07:23.086Z"],["b_5Qrc0DXWLHe","$D2025-07-21T06:11:05.884Z"],["b_GUBzKPgUOnV","$D2025-07-21T06:33:00.993Z"],["b_1qHEMvP603H","$D2025-07-21T07:40:24.039Z"],["b_XK5Pe8Rbe00","$D2025-07-21T08:58:12.766Z"],["b_RcyYYFLzlzG","$D2025-07-21T09:07:08.397Z"],["b_xLvlYRBuZHf","$D2025-07-21T11:18:50.690Z"],["b_c2DJf7qA3b2","$D2025-07-21T12:14:13.084Z"],["b_jtes7gJovCm","$D2025-07-21T14:19:20.016Z"],["b_LZVOfV8vDmy","$D2025-07-21T16:05:34.801Z"],["b_WGAuJrTm7gq","$D2025-07-21T19:27:08.873Z"],["b_WNcjvO3M9Uz","$D2025-07-23T18:44:57.314Z"],["b_e15zKzRPpJr","$D2025-07-24T07:23:45.953Z"],["b_WnURlpaO23c","$D2025-07-24T07:33:40.204Z"]] 11b:[["b_WNcjvO3M9Uz",false],["b_e15zKzRPpJr",false],["b_WnURlpaO23c",false]] 11c:[["b_WNcjvO3M9Uz","$undefined"],["b_e15zKzRPpJr","$undefined"],["b_WnURlpaO23c",{"git":{"ref":"main","sha":"61d2d3c1058a27a96daf9b36ab3a11e0375ff603","type":"github","repoId":0,"repoName":"v0-1-1lLXUvCs91XIrUTYsdW2zbgu-pXN3k0qKDi9","ownerName":"v0-git-s3-storage","commitMessage":"Initial commit from v0"}}]] 11d:[["b_WNcjvO3M9Uz",null],["b_e15zKzRPpJr",null],["b_WnURlpaO23c",null]] 11e:[["b_WNcjvO3M9Uz",true],["b_e15zKzRPpJr",true],["b_WnURlpaO23c",true]] 11f:[["b_WNcjvO3M9Uz",true],["b_e15zKzRPpJr",true],["b_WnURlpaO23c",true]] 120:[] 121:T1b8e,this is my schems:create table public.pickup_locations ( id uuid not null default gen_random_uuid (), name text not null, address text not null, latitude numeric(10, 8) null, longitude numeric(11, 8) null, is_active boolean null default true, created_at timestamp with time zone null default now(), constraint pickup_locations_pkey primary key (id)) TABLESPACE pg_default;create table public.bookings ( id uuid not null default gen_random_uuid (), user_id uuid null, trip_id uuid null, party_size integer not null, total_amount numeric(10, 2) not null, status public.booking_status null default 'pending'::booking_status, special_requests text null, qr_code text null, payment_intent_id text null, booked_at timestamp with time zone null default now(), confirmed_at timestamp with time zone null, cancelled_at timestamp with time zone null, created_at timestamp with time zone null default now(), updated_at timestamp with time zone null default now(), constraint bookings_pkey primary key (id), constraint bookings_trip_id_fkey foreign KEY (trip_id) references trips (id) on delete CASCADE, constraint bookings_user_id_fkey foreign KEY (user_id) references users (id) on delete CASCADE, constraint bookings_party_size_check check ( ( (party_size > 0) and (party_size <= 15) ) )) TABLESPACE pg_default;create index IF not exists idx_bookings_user_id on public.bookings using btree (user_id) TABLESPACE pg_default;create index IF not exists idx_bookings_trip_id on public.bookings using btree (trip_id) TABLESPACE pg_default;create index IF not exists idx_bookings_status on public.bookings using btree (status) TABLESPACE pg_default;create trigger generate_qr_code_trigger BEFORE INSERT on bookings for EACH rowexecute FUNCTION generate_booking_qr_code ();create trigger update_bookings_updated_at BEFOREupdate on bookings for EACH rowexecute FUNCTION update_updated_at_column ();create trigger update_trip_capacity_triggerafter INSERTor DELETEorupdate on bookings for EACH rowexecute FUNCTION update_trip_capacity ();create table public.food_categories ( id uuid not null default gen_random_uuid (), name text not null, description text null, image_url text null, sort_order integer null default 0, is_active boolean null default true, created_at timestamp with time zone null default now(), constraint food_categories_pkey primary key (id)) TABLESPACE pg_default;create table public.menu_items ( id uuid not null default gen_random_uuid (), category_id uuid null, name text not null, description text null, price numeric(10, 2) not null, image_url text null, ingredients text[] null, allergens text[] null, is_vegetarian boolean null default false, is_vegan boolean null default false, is_available boolean null default true, preparation_time integer null default 15, sort_order integer null default 0, created_at timestamp with time zone null default now(), updated_at timestamp with time zone null default now(), constraint menu_items_pkey primary key (id), constraint menu_items_category_id_fkey foreign KEY (category_id) references food_categories (id) on delete CASCADE) TABLESPACE pg_default;create index IF not exists idx_menu_items_category_id on public.menu_items using btree (category_id) TABLESPACE pg_default;create trigger update_menu_items_updated_at BEFOREupdate on menu_items for EACH rowexecute FUNCTION update_updated_at_column ();create table public.notifications ( id uuid not null default gen_random_uuid (), user_id uuid null, title text not null, message text not null, type text null default 'info'::text, is_read boolean null default false, data jsonb null, created_at timestamp with time zone null default now(), constraint notifications_pkey primary key (id), constraint notifications_user_id_fkey foreign KEY (user_id) references users (id) on delete CASCADE) TABLESPACE pg_default;create index IF not exists idx_notifications_user_id on public.notifications using btree (user_id) TABLESPACE pg_default;create table public.routes ( id uuid not null default gen_random_uuid (), name text not null, description text null, pickup_location_id uuid null, dropoff_location_id uuid null, duration_minutes integer not null, price_per_person numeric(10, 2) not null, max_capacity integer null default 15, is_active boolean null default true, created_at timestamp with time zone null default now(), constraint routes_pkey primary key (id), constraint routes_dropoff_location_id_fkey foreign KEY (dropoff_location_id) references pickup_locations (id), constraint routes_pickup_location_id_fkey foreign KEY (pickup_location_id) references pickup_locations (id)) TABLESPACE pg_default;create table public.trips ( id uuid not null default gen_random_uuid (), route_id uuid null, driver_id uuid null, scheduled_date date not null, scheduled_time time without time zone not null, status public.trip_status null default 'scheduled'::trip_status, current_capacity integer null default 0, max_capacity integer null default 15, notes text null, created_at timestamp with time zone null default now(), updated_at timestamp with time zone null default now(), constraint trips_pkey primary key (id), constraint trips_driver_id_fkey foreign KEY (driver_id) references users (id), constraint trips_route_id_fkey foreign KEY (route_id) references routes (id) on delete CASCADE) TABLESPACE pg_default;create index IF not exists idx_trips_driver_id on public.trips using btree (driver_id) TABLESPACE pg_default;create index IF not exists idx_trips_scheduled_date on public.trips using btree (scheduled_date) TABLESPACE pg_default;create trigger update_trips_updated_at BEFOREupdate on trips for EACH rowexecute FUNCTION update_updated_at_column ();create table public.users ( id uuid not null default gen_random_uuid (), clerk_id text not null, username text null, email text not null, first_name text null, last_name text null, phone text null, role public.user_role null default 'customer'::user_role, avatar_url text null, is_active boolean null default true, created_at timestamp with time zone null default now(), updated_at timestamp with time zone null default now(), constraint users_pkey primary key (id), constraint users_clerk_id_key unique (clerk_id), constraint users_email_key unique (email), constraint users_username_key unique (username)) TABLESPACE pg_default;create index IF not exists idx_users_clerk_id on public.users using btree (clerk_id) TABLESPACE pg_default;create index IF not exists idx_users_role on public.users using btree (role) TABLESPACE pg_default;create trigger update_users_updated_at BEFOREupdate on users for EACH rowexecute FUNCTION update_updated_at_column ();also the payments and table menu availability lack RLS, then lastly give me data i can seed for all the tables. Also i wanted to check if a trip has reached maximum amount of passengers sort that for me, i dont know what this was for table menu availability. Lastly i hope my menu table would be suitable for a tabledot menu type122:Tbdc45,[V0_FILE]typescriptreact:file="app/auth/login/page.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" 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 { Truck, Eye, EyeOff } from "lucide-react" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" export default function LoginPage() { const [showPassword, setShowPassword] = useState(false) const [userType, setUserType] = useState("customer") return (

RideDine

Welcome Back Sign in to your account to continue

Email or Phone

Password

Forgot your password?

{"Don't have an account? "} Sign up

) } [V0_FILE]typescriptreact:file="app/auth/signup/page.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" 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 { Truck, Eye, EyeOff } from "lucide-react" import { Checkbox } from "@/components/ui/checkbox" export default function SignUpPage() { const [showPassword, setShowPassword] = useState(false) const [showConfirmPassword, setShowConfirmPassword] = useState(false) return (

RideDine

Create Account Join RideDine for the ultimate food truck experience

First Name

Last Name

Phone Number

Password

Confirm Password

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

Already have an account?{" "} Sign in

) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Truck, MapPin, Clock, Calendar, QrCode, Bell, User, History, CreditCard } from "lucide-react" export default function CustomerDashboard() { const [activeBookings] = useState([ { id: "RD001", date: "2024-01-15", time: "12:30 PM", pickup: "City Center", dropoff: "Business District", status: "confirmed", qrCode: "QR123456", foodItems: ["Gourmet Burger", "Truffle Fries"], }, ]) return (

{/* Header */}

RideDine

Welcome back, John!

Ready for your next culinary journey?

{/* Quick Actions */}

{/* Active Bookings */}

Active Bookings

{activeBookings.length > 0 ? (

{activeBookings.map((booking) => (

Booking #{booking.id} {booking.status.toUpperCase()}

{booking.date} at {booking.time}

Pickup: {booking.pickup}

Drop-off: {booking.dropoff}

Food: {booking.foodItems.join(", ")}

Show this QR code to the driver

Code: {booking.qrCode}

))}

) : (

No Active Bookings

Book your first ride to get started!

)}

{/* Recent Activity */}

Recent Activity

Booking confirmed

Your ride for Jan 15 has been confirmed

2 hours ago

Payment processed

Payment of KSH 1,500 processed successfully

3 hours ago

Account created

Welcome to RideDine!

1 day ago

) } [V0_FILE]typescriptreact:file="app/book/page.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Calendar } from "@/components/ui/calendar" import { Separator } from "@/components/ui/separator" import { Checkbox } from "@/components/ui/checkbox" import { ArrowLeft, MapPin, Clock, Users, AlertTriangle } from "lucide-react" export default function BookRidePage() { const [selectedDate, setSelectedDate] = useState() const [selectedPickup, setSelectedPickup] = useState("") const [selectedDropoff, setSelectedDropoff] = useState("") const [selectedTime, setSelectedTime] = useState("") const [selectedFoodItems, setSelectedFoodItems] = useState([]) const pickupPoints = ["City Center", "University Campus", "Shopping Mall", "Business District", "Residential Area A"] const timeSlots = [ { time: "08:00 AM", available: 12 }, { time: "12:30 PM", available: 8 }, { time: "06:00 PM", available: 15 }, { time: "08:30 PM", available: 5 }, ] const menuItems = [ { id: "burger", name: "Gourmet Burger", price: 800, description: "Beef patty with premium toppings" }, { id: "fries", name: "Truffle Fries", price: 400, description: "Hand-cut fries with truffle oil" }, { id: "wrap", name: "Chicken Wrap", price: 600, description: "Grilled chicken with fresh vegetables" }, { id: "salad", name: "Caesar Salad", price: 500, description: "Fresh romaine with parmesan" }, { id: "drink", name: "Fresh Juice", price: 200, description: "Seasonal fruit juice" }, { id: "dessert", name: "Chocolate Cake", price: 350, description: "Rich chocolate layer cake" }, ] const toggleFoodItem = (itemId: string) => { setSelectedFoodItems((prev) => (prev.includes(itemId) ? prev.filter((id) => id !== itemId) : [...prev, itemId])) } const calculateTotal = () => { const ridePrice = 1000 // Base ride price const foodTotal = selectedFoodItems.reduce((total, itemId) => { const item = menuItems.find((item) => item.id === itemId) return total + (item?.price || 0) }, 0) return ridePrice + foodTotal } return (

{/* Header */}

Book Your Ride

{/* Booking Form */}

{/* Step 1: Route Selection */} 1. Select Your Route Choose your pickup and drop-off points

Pickup Point

Drop-off Point

{/* Step 2: Date & Time Selection */} 2. Select Date & Time Booking available up to 7 days in advance

date < new Date() || date > new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)} className="rounded-md border" />

Available Time Slots

{timeSlots.map((slot) => (

setSelectedTime(slot.time)} >

{slot.time}

{slot.available}/15 available

))}

{/* Step 3: Food Selection */} 3. Pre-order Your Food Select items to enjoy during your ride

{menuItems.map((item) => (

toggleFoodItem(item.id)} >

toggleFoodItem(item.id)} />

{item.name}

{item.description}

KSH {item.price}

))}

{/* Booking Summary */}

Booking Summary {selectedPickup && selectedDropoff && (

From: {selectedPickup}

To: {selectedDropoff}

)} {selectedDate && selectedTime && (

When: {selectedDate.toDateString()} at {selectedTime}

)}

Ride KSH 1,000

{selectedFoodItems.length > 0 && ( <>

Food Items:

{selectedFoodItems.map((itemId) => { const item = menuItems.find((item) => item.id === itemId) return item ? (

{item.name} KSH {item.price}

) : null })} )}

Total KSH {calculateTotal()}

{/* No Refund Policy */}

No Refund Policy

All bookings are final. No cancellations or refunds are allowed once booking is confirmed.

) } [V0_FILE]typescriptreact:file="app/admin/page.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 { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from "recharts" import { Truck, Users, MapPin, Calendar, DollarSign, Plus, Edit, Trash2 } from "lucide-react" export default function AdminDashboard() { const [stats] = useState({ totalRevenue: 125000, totalBookings: 342, activeDrivers: 8, totalStops: 12, }) const revenueData = [ { month: "Jan", revenue: 15000 }, { month: "Feb", revenue: 18000 }, { month: "Mar", revenue: 22000 }, { month: "Apr", revenue: 19000 }, { month: "May", revenue: 25000 }, { month: "Jun", revenue: 26000 }, ] const occupancyData = [ { name: "Full (15/15)", value: 45, color: "#27AE60" }, { name: "High (10-14)", value: 30, color: "#2980B9" }, { name: "Medium (5-9)", value: 20, color: "#F39C12" }, { name: "Low (1-4)", value: 5, color: "#E74C3C" }, ] const [stops] = useState([ { id: 1, name: "City Center", address: "Main Street, Downtown", status: "active" }, { id: 2, name: "University Campus", address: "University Ave", status: "active" }, { id: 3, name: "Shopping Mall", address: "Mall Road", status: "active" }, { id: 4, name: "Business District", address: "Corporate Plaza", status: "maintenance" }, ]) const [menuItems] = useState([ { id: 1, name: "Gourmet Burger", price: 800, category: "Main", status: "available" }, { id: 2, name: "Truffle Fries", price: 400, category: "Sides", status: "available" }, { id: 3, name: "Chicken Wrap", price: 600, category: "Main", status: "available" }, { id: 4, name: "Caesar Salad", price: 500, category: "Salads", status: "out-of-stock" }, ]) const [recentBookings] = useState([ { id: "RD001", customer: "John Doe", route: "City Center → Business District", date: "2024-01-15", amount: 1500, status: "confirmed", }, { id: "RD002", customer: "Jane Smith", route: "University → Mall", date: "2024-01-15", amount: 1200, status: "completed", }, { id: "RD003", customer: "Mike Johnson", route: "Mall → Residential", date: "2024-01-14", amount: 1800, status: "confirmed", }, ]) return (

{/* Header */}

Admin Dashboard

RideDine Management Portal

{/* Stats Overview */}

Total Revenue

KSH {stats.totalRevenue.toLocaleString()}

Total Bookings

{stats.totalBookings}

Active Drivers

{stats.activeDrivers}

Total Stops

{stats.totalStops}

{/* Analytics Charts */}

Revenue Trend Monthly revenue over the last 6 months [`KSH ${value.toLocaleString()}`, "Revenue"]} /> Ride Occupancy Distribution of ride occupancy rates `${name}: ${value}%`} > {occupancyData.map((entry, index) => ( ))}

{/* Management Tabs */} Bookings Stops Menu Users Recent Bookings Latest customer reservations Booking ID Customer Route Date Amount Status {recentBookings.map((booking) => ( {booking.id} {booking.customer} {booking.route} {booking.date} KSH {booking.amount} {booking.status.toUpperCase()} ))}

Pickup Stops Manage fixed pickup and drop-off points

Name Address Status Actions {stops.map((stop) => ( {stop.name} {stop.address} {stop.status.toUpperCase()}

))}

Menu Management Add, edit, and manage food items

Name Category Price Status Actions {menuItems.map((item) => ( {item.name} {item.category} KSH {item.price} {item.status.replace("-", " ").toUpperCase()}

))}

User Management Manage customers and drivers

User Management

View and manage all registered users

) } [V0_FILE]sql:file="scripts/database-setup.sql" isMerged="true" -- Create database tables for RideDine app -- Users table CREATE TABLE users ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), email VARCHAR(255) UNIQUE NOT NULL, phone VARCHAR(20) UNIQUE NOT NULL, first_name VARCHAR(100) NOT NULL, last_name VARCHAR(100) NOT NULL, password_hash VARCHAR(255) NOT NULL, role VARCHAR(20) NOT NULL DEFAULT 'customer', -- customer, driver, admin created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Stops table CREATE TABLE stops ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), name VARCHAR(100) NOT NULL, address TEXT NOT NULL, latitude DECIMAL(10, 8), longitude DECIMAL(11, 8), status VARCHAR(20) DEFAULT 'active', -- active, maintenance, inactive created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Routes table CREATE TABLE routes ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), name VARCHAR(100) NOT NULL, pickup_stop_id UUID REFERENCES stops(id), dropoff_stop_id UUID REFERENCES stops(id), duration_minutes INTEGER NOT NULL, base_price DECIMAL(10, 2) NOT NULL, status VARCHAR(20) DEFAULT 'active', created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Menu items table CREATE TABLE menu_items ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), name VARCHAR(100) NOT NULL, description TEXT, price DECIMAL(10, 2) NOT NULL, category VARCHAR(50) NOT NULL, status VARCHAR(20) DEFAULT 'available', -- available, out-of-stock, discontinued created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Schedules table CREATE TABLE schedules ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), route_id UUID REFERENCES routes(id), driver_id UUID REFERENCES users(id), departure_time TIME NOT NULL, days_of_week INTEGER[] NOT NULL, -- Array of day numbers (0=Sunday, 1=Monday, etc.) max_passengers INTEGER DEFAULT 15, status VARCHAR(20) DEFAULT 'active', created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Bookings table CREATE TABLE bookings ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), booking_number VARCHAR(20) UNIQUE NOT NULL, customer_id UUID REFERENCES users(id), schedule_id UUID REFERENCES schedules(id), booking_date DATE NOT NULL, pickup_stop_id UUID REFERENCES stops(id), dropoff_stop_id UUID REFERENCES stops(id), total_amount DECIMAL(10, 2) NOT NULL, payment_status VARCHAR(20) DEFAULT 'pending', -- pending, paid, failed, refunded booking_status VARCHAR(20) DEFAULT 'confirmed', -- confirmed, completed, cancelled qr_code VARCHAR(50) UNIQUE NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Booking food items table (many-to-many relationship) CREATE TABLE booking_food_items ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), booking_id UUID REFERENCES bookings(id), menu_item_id UUID REFERENCES menu_items(id), quantity INTEGER DEFAULT 1, unit_price DECIMAL(10, 2) NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Payments table CREATE TABLE payments ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), booking_id UUID REFERENCES bookings(id), amount DECIMAL(10, 2) NOT NULL, payment_method VARCHAR(20) NOT NULL, -- mpesa, card, cash payment_reference VARCHAR(100), status VARCHAR(20) DEFAULT 'pending', -- pending, completed, failed processed_at TIMESTAMP, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Notifications table CREATE TABLE notifications ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), user_id UUID REFERENCES users(id), title VARCHAR(200) NOT NULL, message TEXT NOT NULL, type VARCHAR(20) NOT NULL, -- booking_confirmation, eta_update, delay_alert, announcement read_at TIMESTAMP, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Create indexes for better performance CREATE INDEX idx_users_email ON users(email); CREATE INDEX idx_users_phone ON users(phone); CREATE INDEX idx_users_role ON users(role); CREATE INDEX idx_bookings_customer_id ON bookings(customer_id); CREATE INDEX idx_bookings_schedule_id ON bookings(schedule_id); CREATE INDEX idx_bookings_date ON bookings(booking_date); CREATE INDEX idx_bookings_status ON bookings(booking_status); CREATE INDEX idx_notifications_user_id ON notifications(user_id); CREATE INDEX idx_notifications_read ON notifications(read_at); [V0_FILE]sql:file="scripts/seed-data.sql" isMerged="true" -- Seed data for RideDine app -- Insert sample stops INSERT INTO stops (name, address, latitude, longitude, status) VALUES ('City Center', 'Main Street, Downtown Nairobi', -1.2864, 36.8172, 'active'), ('University Campus', 'University Way, Nairobi', -1.2966, 36.8083, 'active'), ('Shopping Mall', 'Westlands Mall, Westlands', -1.2630, 36.8063, 'active'), ('Business District', 'Upper Hill, Nairobi', -1.2921, 36.8219, 'active'), ('Residential Area A', 'Karen, Nairobi', -1.3197, 36.7073, 'active'); -- Insert sample menu items INSERT INTO menu_items (name, description, price, category, status) VALUES ('Gourmet Burger', 'Premium beef patty with artisan toppings', 800.00, 'Main Course', 'available'), ('Truffle Fries', 'Hand-cut fries with truffle oil and parmesan', 400.00, 'Sides', 'available'), ('Chicken Wrap', 'Grilled chicken with fresh vegetables in tortilla', 600.00, 'Main Course', 'available'), ('Caesar Salad', 'Fresh romaine lettuce with caesar dressing', 500.00, 'Salads', 'available'), ('Fresh Juice', 'Seasonal fruit juice blend', 200.00, 'Beverages', 'available'), ('Chocolate Cake', 'Rich chocolate layer cake with ganache', 350.00, 'Desserts', 'available'), ('Fish Tacos', 'Grilled fish with mango salsa', 700.00, 'Main Course', 'available'), ('Sweet Potato Fries', 'Crispy sweet potato fries with aioli', 450.00, 'Sides', 'available'); -- Insert sample users INSERT INTO users (email, phone, first_name, last_name, password_hash, role) VALUES ('admin@ridedine.com', '+254700000001', 'Admin', 'User', '$2b$10$example_hash_1', 'admin'), ('driver1@ridedine.com', '+254700000002', 'James', 'Mwangi', '$2b$10$example_hash_2', 'driver'), ('driver2@ridedine.com', '+254700000003', 'Mary', 'Wanjiku', '$2b$10$example_hash_3', 'driver'), ('john.doe@email.com', '+254700000004', 'John', 'Doe', '$2b$10$example_hash_4', 'customer'), ('jane.smith@email.com', '+254700000005', 'Jane', 'Smith', '$2b$10$example_hash_5', 'customer'); -- Insert sample routes INSERT INTO routes (name, pickup_stop_id, dropoff_stop_id, duration_minutes, base_price) SELECT 'City Center to Business District', (SELECT id FROM stops WHERE name = 'City Center'), (SELECT id FROM stops WHERE name = 'Business District'), 30, 1000.00; INSERT INTO routes (name, pickup_stop_id, dropoff_stop_id, duration_minutes, base_price) SELECT 'University to Shopping Mall', (SELECT id FROM stops WHERE name = 'University Campus'), (SELECT id FROM stops WHERE name = 'Shopping Mall'), 25, 800.00; -- Insert sample schedules INSERT INTO schedules (route_id, driver_id, departure_time, days_of_week, max_passengers) SELECT r.id, u.id, '08:00:00', ARRAY[1,2,3,4,5], -- Monday to Friday 15 FROM routes r, users u WHERE r.name = 'City Center to Business District' AND u.email = 'driver1@ridedine.com'; INSERT INTO schedules (route_id, driver_id, departure_time, days_of_week, max_passengers) SELECT r.id, u.id, '12:30:00', ARRAY[1,2,3,4,5], -- Monday to Friday 15 FROM routes r, users u WHERE r.name = 'City Center to Business District' AND u.email = 'driver1@ridedine.com'; INSERT INTO schedules (route_id, driver_id, departure_time, days_of_week, max_passengers) SELECT r.id, u.id, '18:00:00', ARRAY[1,2,3,4,5,6], -- Monday to Saturday 15 FROM routes r, users u WHERE r.name = 'University to Shopping Mall' AND u.email = 'driver2@ridedine.com'; [V0_FILE]typescriptreact:file="app/payment/page.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" 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 { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Separator } from "@/components/ui/separator" import { ArrowLeft, CreditCard, Smartphone, Shield, AlertTriangle } from "lucide-react" export default function PaymentPage() { const [paymentMethod, setPaymentMethod] = useState("mpesa") const [isProcessing, setIsProcessing] = useState(false) const bookingDetails = { bookingId: "RD001", route: "City Center → Business District", date: "January 15, 2024", time: "12:30 PM", ridePrice: 1000, foodItems: [ { name: "Gourmet Burger", price: 800 }, { name: "Truffle Fries", price: 400 }, ], total: 2200, } const handlePayment = async () => { setIsProcessing(true) // Simulate payment processing setTimeout(() => { setIsProcessing(false) // Redirect to success page window.location.href = "/booking-success" }, 3000) } return (

{/* Header */}

Complete Payment

{/* Payment Form */}

{/* Payment Method Selection */} Payment Method Choose your preferred payment option

M-PESA

Pay with your mobile money

Credit/Debit Card

Visa, Mastercard accepted

{/* Payment Details */} Payment Details {paymentMethod === "mpesa" ? (

M-PESA Phone Number

M-PESA Payment Instructions

You will receive an STK push notification
Enter your M-PESA PIN to complete payment
You'll receive a confirmation SMS

) : (

Card Number

Expiry Date

CVV

Cardholder Name

)} {/* Security Notice */}

Secure Payment

Your payment information is encrypted and secure. We never store your card details.

{/* Order Summary */}

Order Summary

Booking Details

Route: {bookingDetails.route}

Date: {bookingDetails.date}

Time: {bookingDetails.time}

Booking ID: {bookingDetails.bookingId}

Ride KSH {bookingDetails.ridePrice}

{bookingDetails.foodItems.map((item, index) => (

{item.name} KSH {item.price}

))}

Total KSH {bookingDetails.total}

{/* No Refund Policy */}

No Refund Policy

All payments are final. No cancellations or refunds allowed.

) } [V0_FILE]typescriptreact:file="app/booking-success/page.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { CheckCircle, QrCode, MapPin, Clock, Download, Share } from "lucide-react" export default function BookingSuccessPage() { const bookingDetails = { bookingId: "RD001", qrCode: "QR123456789", route: "City Center → Business District", date: "January 15, 2024", time: "12:30 PM", pickup: "City Center - Main Street", dropoff: "Business District - Corporate Plaza", foodItems: ["Gourmet Burger", "Truffle Fries"], total: 2200, } return (

{/* Success Header */}

Booking Confirmed!

Your ride has been successfully booked and payment processed.

{/* Booking Details */}

Booking #{bookingDetails.bookingId} {bookingDetails.date} at {bookingDetails.time}

CONFIRMED

{/* Route Information */}

Pickup Point

{bookingDetails.pickup}

Drop-off Point

{bookingDetails.dropoff}

Food Items

{bookingDetails.foodItems.join(", ")}

{/* QR Code */}

Your Boarding Pass

Show this QR code to the driver

{bookingDetails.qrCode}

{/* Action Buttons */}

{/* Important Information */} Important Information

Arrival Time: Please arrive at the pickup point 10 minutes before departure time.

QR Code: Keep your QR code ready for scanning by the driver.

Food Service: Your pre-ordered food will be served during the ride.

No Refunds: All bookings are final with no cancellation or refund policy.

{/* Navigation Buttons */}

) } [V0_FILE]typescriptreact:file="lib/supabase.ts" isMerged="true" import { createClient } from "@supabase/supabase-js" const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL! const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY! // Create a Supabase client with service role key for server-side operations export const supabase = createClient(supabaseUrl, supabaseServiceKey, { auth: { autoRefreshToken: false, persistSession: false, }, }) // Database types based on your schema export interface User { id: string clerk_id: string username?: string email: string first_name?: string last_name?: string phone?: string role: "customer" | "driver" | "admin" avatar_url?: string is_active: boolean created_at: string updated_at: string } export interface PickupLocation { id: string name: string address: string latitude?: number longitude?: number is_active: boolean created_at: string } export interface Route { id: string name: string description?: string pickup_location_id: string dropoff_location_id: string duration_minutes: number price_per_person: number max_capacity: number is_active: boolean created_at: string } export interface FoodCategory { id: string name: string description?: string image_url?: string sort_order: number is_active: boolean created_at: string } export interface MenuItem { id: string category_id: string name: string description?: string price: number image_url?: string ingredients?: string[] allergens?: string[] is_vegetarian: boolean is_vegan: boolean is_available: boolean preparation_time: number sort_order: number created_at: string updated_at: string } export interface Trip { id: string route_id: string driver_id: string scheduled_date: string scheduled_time: string status: "scheduled" | "in_progress" | "completed" | "cancelled" current_capacity: number max_capacity: number notes?: string created_at: string updated_at: string } export interface Booking { id: string user_id: string trip_id: string party_size: number total_amount: number status: "pending" | "confirmed" | "cancelled" | "completed" special_requests?: string qr_code?: string payment_intent_id?: string booked_at: string confirmed_at?: string cancelled_at?: string created_at: string updated_at: string } export interface BookingMenuItem { id: string booking_id: string menu_item_id: string quantity: number unit_price: number special_instructions?: string created_at: string } export interface Notification { id: string user_id: string title: string message: string type: string is_read: boolean data?: any created_at: string } [V0_FILE]typescriptreact:file="app/api/users/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { supabase } from "@/lib/supabase" // GET /api/users - List all users export async function GET(request: NextRequest) { try { const { searchParams } = new URL(request.url) const role = searchParams.get("role") const page = Number.parseInt(searchParams.get("page") || "1") const limit = Number.parseInt(searchParams.get("limit") || "10") const offset = (page - 1) * limit let query = supabase .from("users") .select("*") .range(offset, offset + limit - 1) .order("created_at", { ascending: false }) if (role) { query = query.eq("role", role) } const { data, error, count } = await query if (error) { return NextResponse.json({ error: error.message }, { status: 400 }) } return NextResponse.json({ data, pagination: { page, limit, total: count || 0, totalPages: Math.ceil((count || 0) / limit), }, }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // POST /api/users - Create new user export async function POST(request: NextRequest) { try { const body = await request.json() const { data, error } = await supabase.from("users").insert([body]).select().single() if (error) { return NextResponse.json({ error: error.message }, { status: 400 }) } return NextResponse.json({ data }, { status: 201 }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/users/[id]/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { supabase } from "@/lib/supabase" // GET /api/users/[id] - Get user by ID export async function GET(request: NextRequest, { params }: { params: { id: string } }) { try { const { data, error } = await supabase.from("users").select("*").eq("id", params.id).single() if (error) { return NextResponse.json({ error: error.message }, { status: 404 }) } return NextResponse.json({ data }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // PUT /api/users/[id] - Update user export async function PUT(request: NextRequest, { params }: { params: { id: string } }) { try { const body = await request.json() const { data, error } = await supabase.from("users").update(body).eq("id", params.id).select().single() if (error) { return NextResponse.json({ error: error.message }, { status: 400 }) } return NextResponse.json({ data }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // DELETE /api/users/[id] - Delete user export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) { try { const { error } = await supabase.from("users").delete().eq("id", params.id) if (error) { return NextResponse.json({ error: error.message }, { status: 400 }) } return NextResponse.json({ message: "User deleted successfully" }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/pickup-locations/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { supabase } from "@/lib/supabase" // GET /api/pickup-locations - List all pickup locations export async function GET(request: NextRequest) { try { const { searchParams } = new URL(request.url) const isActive = searchParams.get("is_active") let query = supabase.from("pickup_locations").select("*").order("name", { ascending: true }) if (isActive !== null) { query = query.eq("is_active", isActive === "true") } const { data, error } = await query if (error) { return NextResponse.json({ error: error.message }, { status: 400 }) } return NextResponse.json({ data }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // POST /api/pickup-locations - Create new pickup location export async function POST(request: NextRequest) { try { const body = await request.json() // Validate required fields if (!body.name || !body.address) { return NextResponse.json({ error: "Name and address are required" }, { status: 400 }) } const { data, error } = await supabase.from("pickup_locations").insert([body]).select().single() if (error) { return NextResponse.json({ error: error.message }, { status: 400 }) } return NextResponse.json({ data }, { status: 201 }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/pickup-locations/[id]/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { supabase } from "@/lib/supabase" // GET /api/pickup-locations/[id] - Get pickup location by ID export async function GET(request: NextRequest, { params }: { params: { id: string } }) { try { const { data, error } = await supabase.from("pickup_locations").select("*").eq("id", params.id).single() if (error) { return NextResponse.json({ error: error.message }, { status: 404 }) } return NextResponse.json({ data }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // PUT /api/pickup-locations/[id] - Update pickup location export async function PUT(request: NextRequest, { params }: { params: { id: string } }) { try { const body = await request.json() const { data, error } = await supabase.from("pickup_locations").update(body).eq("id", params.id).select().single() if (error) { return NextResponse.json({ error: error.message }, { status: 400 }) } return NextResponse.json({ data }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // DELETE /api/pickup-locations/[id] - Delete pickup location export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) { try { const { error } = await supabase.from("pickup_locations").delete().eq("id", params.id) if (error) { return NextResponse.json({ error: error.message }, { status: 400 }) } return NextResponse.json({ message: "Pickup location deleted successfully" }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/routes/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { supabase } from "@/lib/supabase" // GET /api/routes - List all routes export async function GET(request: NextRequest) { try { const { searchParams } = new URL(request.url) const isActive = searchParams.get("is_active") let query = supabase .from("routes") .select(` *, pickup_location:pickup_locations!pickup_location_id(*), dropoff_location:pickup_locations!dropoff_location_id(*) `) .order("name", { ascending: true }) if (isActive !== null) { query = query.eq("is_active", isActive === "true") } const { data, error } = await query if (error) { return NextResponse.json({ error: error.message }, { status: 400 }) } return NextResponse.json({ data }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // POST /api/routes - Create new route export async function POST(request: NextRequest) { try { const body = await request.json() // Validate required fields if ( !body.name || !body.pickup_location_id || !body.dropoff_location_id || !body.duration_minutes || !body.price_per_person ) { return NextResponse.json( { error: "Name, pickup location, dropoff location, duration, and price are required", }, { status: 400 }, ) } const { data, error } = await supabase .from("routes") .insert([body]) .select(` *, pickup_location:pickup_locations!pickup_location_id(*), dropoff_location:pickup_locations!dropoff_location_id(*) `) .single() if (error) { return NextResponse.json({ error: error.message }, { status: 400 }) } return NextResponse.json({ data }, { status: 201 }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/routes/[id]/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { supabase } from "@/lib/supabase" // GET /api/routes/[id] - Get route by ID export async function GET(request: NextRequest, { params }: { params: { id: string } }) { try { const { data, error } = await supabase .from("routes") .select(` *, pickup_location:pickup_locations!pickup_location_id(*), dropoff_location:pickup_locations!dropoff_location_id(*) `) .eq("id", params.id) .single() if (error) { return NextResponse.json({ error: error.message }, { status: 404 }) } return NextResponse.json({ data }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // PUT /api/routes/[id] - Update route export async function PUT(request: NextRequest, { params }: { params: { id: string } }) { try { const body = await request.json() const { data, error } = await supabase .from("routes") .update(body) .eq("id", params.id) .select(` *, pickup_location:pickup_locations!pickup_location_id(*), dropoff_location:pickup_locations!dropoff_location_id(*) `) .single() if (error) { return NextResponse.json({ error: error.message }, { status: 400 }) } return NextResponse.json({ data }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // DELETE /api/routes/[id] - Delete route export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) { try { const { error } = await supabase.from("routes").delete().eq("id", params.id) if (error) { return NextResponse.json({ error: error.message }, { status: 400 }) } return NextResponse.json({ message: "Route deleted successfully" }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/food-categories/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { supabase } from "@/lib/supabase" // GET /api/food-categories - List all food categories export async function GET(request: NextRequest) { try { const { searchParams } = new URL(request.url) const isActive = searchParams.get("is_active") let query = supabase.from("food_categories").select("*").order("sort_order", { ascending: true }) if (isActive !== null) { query = query.eq("is_active", isActive === "true") } const { data, error } = await query if (error) { return NextResponse.json({ error: error.message }, { status: 400 }) } return NextResponse.json({ data }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // POST /api/food-categories - Create new food category export async function POST(request: NextRequest) { try { const body = await request.json() // Validate required fields if (!body.name) { return NextResponse.json({ error: "Name is required" }, { status: 400 }) } const { data, error } = await supabase.from("food_categories").insert([body]).select().single() if (error) { return NextResponse.json({ error: error.message }, { status: 400 }) } return NextResponse.json({ data }, { status: 201 }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/food-categories/[id]/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { supabase } from "@/lib/supabase" // GET /api/food-categories/[id] - Get food category by ID export async function GET(request: NextRequest, { params }: { params: { id: string } }) { try { const { data, error } = await supabase.from("food_categories").select("*").eq("id", params.id).single() if (error) { return NextResponse.json({ error: error.message }, { status: 404 }) } return NextResponse.json({ data }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // PUT /api/food-categories/[id] - Update food category export async function PUT(request: NextRequest, { params }: { params: { id: string } }) { try { const body = await request.json() const { data, error } = await supabase.from("food_categories").update(body).eq("id", params.id).select().single() if (error) { return NextResponse.json({ error: error.message }, { status: 400 }) } return NextResponse.json({ data }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // DELETE /api/food-categories/[id] - Delete food category export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) { try { const { error } = await supabase.from("food_categories").delete().eq("id", params.id) if (error) { return NextResponse.json({ error: error.message }, { status: 400 }) } return NextResponse.json({ message: "Food category deleted successfully" }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/menu-items/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { supabase } from "@/lib/supabase" // GET /api/menu-items - List all menu items export async function GET(request: NextRequest) { try { const { searchParams } = new URL(request.url) const categoryId = searchParams.get("category_id") const isAvailable = searchParams.get("is_available") const isVegetarian = searchParams.get("is_vegetarian") const isVegan = searchParams.get("is_vegan") let query = supabase .from("menu_items") .select(` *, category:food_categories(*) `) .order("sort_order", { ascending: true }) if (categoryId) { query = query.eq("category_id", categoryId) } if (isAvailable !== null) { query = query.eq("is_available", isAvailable === "true") } if (isVegetarian !== null) { query = query.eq("is_vegetarian", isVegetarian === "true") } if (isVegan !== null) { query = query.eq("is_vegan", isVegan === "true") } const { data, error } = await query if (error) { return NextResponse.json({ error: error.message }, { status: 400 }) } return NextResponse.json({ data }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // POST /api/menu-items - Create new menu item export async function POST(request: NextRequest) { try { const body = await request.json() // Validate required fields if (!body.name || !body.price || !body.category_id) { return NextResponse.json( { error: "Name, price, and category are required", }, { status: 400 }, ) } const { data, error } = await supabase .from("menu_items") .insert([body]) .select(` *, category:food_categories(*) `) .single() if (error) { return NextResponse.json({ error: error.message }, { status: 400 }) } return NextResponse.json({ data }, { status: 201 }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/menu-items/[id]/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { supabase } from "@/lib/supabase" // GET /api/menu-items/[id] - Get menu item by ID export async function GET(request: NextRequest, { params }: { params: { id: string } }) { try { const { data, error } = await supabase .from("menu_items") .select(` *, category:food_categories(*) `) .eq("id", params.id) .single() if (error) { return NextResponse.json({ error: error.message }, { status: 404 }) } return NextResponse.json({ data }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // PUT /api/menu-items/[id] - Update menu item export async function PUT(request: NextRequest, { params }: { params: { id: string } }) { try { const body = await request.json() const { data, error } = await supabase .from("menu_items") .update(body) .eq("id", params.id) .select(` *, category:food_categories(*) `) .single() if (error) { return NextResponse.json({ error: error.message }, { status: 400 }) } return NextResponse.json({ data }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // DELETE /api/menu-items/[id] - Delete menu item export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) { try { const { error } = await supabase.from("menu_items").delete().eq("id", params.id) if (error) { return NextResponse.json({ error: error.message }, { status: 400 }) } return NextResponse.json({ message: "Menu item deleted successfully" }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/trips/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { supabase } from "@/lib/supabase" // GET /api/trips - List all trips export async function GET(request: NextRequest) { try { const { searchParams } = new URL(request.url) const driverId = searchParams.get("driver_id") const status = searchParams.get("status") const date = searchParams.get("date") const page = Number.parseInt(searchParams.get("page") || "1") const limit = Number.parseInt(searchParams.get("limit") || "10") const offset = (page - 1) * limit let query = supabase .from("trips") .select(` *, route:routes(*, pickup_location:pickup_locations!pickup_location_id(*), dropoff_location:pickup_locations!dropoff_location_id(*) ), driver:users!driver_id(*), bookings(*) `) .range(offset, offset + limit - 1) .order("scheduled_date", { ascending: true }) .order("scheduled_time", { ascending: true }) if (driverId) { query = query.eq("driver_id", driverId) } if (status) { query = query.eq("status", status) } if (date) { query = query.eq("scheduled_date", date) } const { data, error, count } = await query if (error) { return NextResponse.json({ error: error.message }, { status: 400 }) } return NextResponse.json({ data, pagination: { page, limit, total: count || 0, totalPages: Math.ceil((count || 0) / limit), }, }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // POST /api/trips - Create new trip export async function POST(request: NextRequest) { try { const body = await request.json() // Validate required fields if (!body.route_id || !body.driver_id || !body.scheduled_date || !body.scheduled_time) { return NextResponse.json( { error: "Route, driver, date, and time are required", }, { status: 400 }, ) } const { data, error } = await supabase .from("trips") .insert([body]) .select(` *, route:routes(*, pickup_location:pickup_locations!pickup_location_id(*), dropoff_location:pickup_locations!dropoff_location_id(*) ), driver:users!driver_id(*) `) .single() if (error) { return NextResponse.json({ error: error.message }, { status: 400 }) } return NextResponse.json({ data }, { status: 201 }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/trips/[id]/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { supabase } from "@/lib/supabase" // GET /api/trips/[id] - Get trip by ID export async function GET(request: NextRequest, { params }: { params: { id: string } }) { try { const { data, error } = await supabase .from("trips") .select(` *, route:routes(*, pickup_location:pickup_locations!pickup_location_id(*), dropoff_location:pickup_locations!dropoff_location_id(*) ), driver:users!driver_id(*), bookings(*, user:users(*), booking_menu_items(*, menu_item:menu_items(*) ) ) `) .eq("id", params.id) .single() if (error) { return NextResponse.json({ error: error.message }, { status: 404 }) } return NextResponse.json({ data }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // PUT /api/trips/[id] - Update trip export async function PUT(request: NextRequest, { params }: { params: { id: string } }) { try { const body = await request.json() const { data, error } = await supabase .from("trips") .update(body) .eq("id", params.id) .select(` *, route:routes(*, pickup_location:pickup_locations!pickup_location_id(*), dropoff_location:pickup_locations!dropoff_location_id(*) ), driver:users!driver_id(*) `) .single() if (error) { return NextResponse.json({ error: error.message }, { status: 400 }) } return NextResponse.json({ data }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // DELETE /api/trips/[id] - Delete trip export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) { try { const { error } = await supabase.from("trips").delete().eq("id", params.id) if (error) { return NextResponse.json({ error: error.message }, { status: 400 }) } return NextResponse.json({ message: "Trip deleted successfully" }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/bookings/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { supabase } from "@/lib/supabase" // GET /api/bookings - List all bookings export async function GET(request: NextRequest) { try { const { searchParams } = new URL(request.url) const userId = searchParams.get("user_id") const tripId = searchParams.get("trip_id") const status = searchParams.get("status") const page = Number.parseInt(searchParams.get("page") || "1") const limit = Number.parseInt(searchParams.get("limit") || "10") const offset = (page - 1) * limit let query = supabase .from("bookings") .select(` *, user:users(*), trip:trips(*, route:routes(*, pickup_location:pickup_locations!pickup_location_id(*), dropoff_location:pickup_locations!dropoff_location_id(*) ), driver:users!driver_id(*) ), booking_menu_items(*, menu_item:menu_items(*) ) `) .range(offset, offset + limit - 1) .order("created_at", { ascending: false }) if (userId) { query = query.eq("user_id", userId) } if (tripId) { query = query.eq("trip_id", tripId) } if (status) { query = query.eq("status", status) } const { data, error, count } = await query if (error) { return NextResponse.json({ error: error.message }, { status: 400 }) } return NextResponse.json({ data, pagination: { page, limit, total: count || 0, totalPages: Math.ceil((count || 0) / limit), }, }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // POST /api/bookings - Create new booking export async function POST(request: NextRequest) { try { const body = await request.json() const { menu_items, ...bookingData } = body // Validate required fields if (!bookingData.user_id || !bookingData.trip_id || !bookingData.party_size || !bookingData.total_amount) { return NextResponse.json( { error: "User, trip, party size, and total amount are required", }, { status: 400 }, ) } // Validate party size if (bookingData.party_size < 1 || bookingData.party_size > 15) { return NextResponse.json( { error: "Party size must be between 1 and 15", }, { status: 400 }, ) } // Start a transaction const { data: booking, error: bookingError } = await supabase .from("bookings") .insert([bookingData]) .select() .single() if (bookingError) { return NextResponse.json({ error: bookingError.message }, { status: 400 }) } // Add menu items if provided if (menu_items && menu_items.length > 0) { const menuItemsData = menu_items.map((item: any) => ({ ...item, booking_id: booking.id, })) const { error: menuItemsError } = await supabase.from("booking_menu_items").insert(menuItemsData) if (menuItemsError) { // Rollback booking if menu items fail await supabase.from("bookings").delete().eq("id", booking.id) return NextResponse.json({ error: menuItemsError.message }, { status: 400 }) } } // Update trip capacity const { error: capacityError } = await supabase.rpc("increment_trip_capacity", { trip_id: bookingData.trip_id, increment: bookingData.party_size, }) if (capacityError) { console.error("Failed to update trip capacity:", capacityError) } // Fetch the complete booking data const { data: completeBooking, error: fetchError } = await supabase .from("bookings") .select(` *, user:users(*), trip:trips(*, route:routes(*, pickup_location:pickup_locations!pickup_location_id(*), dropoff_location:pickup_locations!dropoff_location_id(*) ) ), booking_menu_items(*, menu_item:menu_items(*) ) `) .eq("id", booking.id) .single() if (fetchError) { return NextResponse.json({ error: fetchError.message }, { status: 400 }) } return NextResponse.json({ data: completeBooking }, { status: 201 }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/bookings/[id]/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { supabase } from "@/lib/supabase" // GET /api/bookings/[id] - Get booking by ID export async function GET(request: NextRequest, { params }: { params: { id: string } }) { try { const { data, error } = await supabase .from("bookings") .select(` *, user:users(*), trip:trips(*, route:routes(*, pickup_location:pickup_locations!pickup_location_id(*), dropoff_location:pickup_locations!dropoff_location_id(*) ), driver:users!driver_id(*) ), booking_menu_items(*, menu_item:menu_items(*) ) `) .eq("id", params.id) .single() if (error) { return NextResponse.json({ error: error.message }, { status: 404 }) } return NextResponse.json({ data }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // PUT /api/bookings/[id] - Update booking export async function PUT(request: NextRequest, { params }: { params: { id: string } }) { try { const body = await request.json() const { data, error } = await supabase .from("bookings") .update(body) .eq("id", params.id) .select(` *, user:users(*), trip:trips(*, route:routes(*, pickup_location:pickup_locations!pickup_location_id(*), dropoff_location:pickup_locations!dropoff_location_id(*) ) ), booking_menu_items(*, menu_item:menu_items(*) ) `) .single() if (error) { return NextResponse.json({ error: error.message }, { status: 400 }) } return NextResponse.json({ data }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // DELETE /api/bookings/[id] - Cancel booking export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) { try { // Get booking details first const { data: booking, error: fetchError } = await supabase .from("bookings") .select("trip_id, party_size") .eq("id", params.id) .single() if (fetchError) { return NextResponse.json({ error: fetchError.message }, { status: 404 }) } // Update booking status to cancelled instead of deleting const { error: updateError } = await supabase .from("bookings") .update({ status: "cancelled", cancelled_at: new Date().toISOString(), }) .eq("id", params.id) if (updateError) { return NextResponse.json({ error: updateError.message }, { status: 400 }) } // Update trip capacity const { error: capacityError } = await supabase.rpc("increment_trip_capacity", { trip_id: booking.trip_id, increment: -booking.party_size, }) if (capacityError) { console.error("Failed to update trip capacity:", capacityError) } return NextResponse.json({ message: "Booking cancelled successfully" }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/notifications/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { supabase } from "@/lib/supabase" // GET /api/notifications - List notifications for a user export async function GET(request: NextRequest) { try { const { searchParams } = new URL(request.url) const userId = searchParams.get("user_id") const isRead = searchParams.get("is_read") const type = searchParams.get("type") const page = Number.parseInt(searchParams.get("page") || "1") const limit = Number.parseInt(searchParams.get("limit") || "20") const offset = (page - 1) * limit if (!userId) { return NextResponse.json({ error: "User ID is required" }, { status: 400 }) } let query = supabase .from("notifications") .select("*") .eq("user_id", userId) .range(offset, offset + limit - 1) .order("created_at", { ascending: false }) if (isRead !== null) { query = query.eq("is_read", isRead === "true") } if (type) { query = query.eq("type", type) } const { data, error, count } = await query if (error) { return NextResponse.json({ error: error.message }, { status: 400 }) } return NextResponse.json({ data, pagination: { page, limit, total: count || 0, totalPages: Math.ceil((count || 0) / limit), }, }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // POST /api/notifications - Create new notification export async function POST(request: NextRequest) { try { const body = await request.json() // Validate required fields if (!body.user_id || !body.title || !body.message) { return NextResponse.json( { error: "User ID, title, and message are required", }, { status: 400 }, ) } const { data, error } = await supabase.from("notifications").insert([body]).select().single() if (error) { return NextResponse.json({ error: error.message }, { status: 400 }) } return NextResponse.json({ data }, { status: 201 }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/notifications/[id]/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { supabase } from "@/lib/supabase" // GET /api/notifications/[id] - Get notification by ID export async function GET(request: NextRequest, { params }: { params: { id: string } }) { try { const { data, error } = await supabase.from("notifications").select("*").eq("id", params.id).single() if (error) { return NextResponse.json({ error: error.message }, { status: 404 }) } return NextResponse.json({ data }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // PUT /api/notifications/[id] - Update notification (mark as read) export async function PUT(request: NextRequest, { params }: { params: { id: string } }) { try { const body = await request.json() const { data, error } = await supabase.from("notifications").update(body).eq("id", params.id).select().single() if (error) { return NextResponse.json({ error: error.message }, { status: 400 }) } return NextResponse.json({ data }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // DELETE /api/notifications/[id] - Delete notification export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) { try { const { error } = await supabase.from("notifications").delete().eq("id", params.id) if (error) { return NextResponse.json({ error: error.message }, { status: 400 }) } return NextResponse.json({ message: "Notification deleted successfully" }) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]sql:file="scripts/database-functions.sql" isMerged="true" -- Database functions to support the API operations -- Function to update the updated_at column CREATE OR REPLACE FUNCTION update_updated_at_column() RETURNS TRIGGER AS $$ BEGIN NEW.updated_at = CURRENT_TIMESTAMP; RETURN NEW; END; $$ language 'plpgsql'; -- Function to generate QR code for bookings CREATE OR REPLACE FUNCTION generate_booking_qr_code() RETURNS TRIGGER AS $$ BEGIN -- Generate a unique QR code using booking ID and timestamp NEW.qr_code = 'QR' || UPPER(SUBSTRING(NEW.id::text FROM 1 FOR 8)) || TO_CHAR(NOW(), 'YYYYMMDDHH24MISS'); RETURN NEW; END; $$ language 'plpgsql'; -- Function to increment/decrement trip capacity CREATE OR REPLACE FUNCTION increment_trip_capacity(trip_id UUID, increment INTEGER) RETURNS VOID AS $$ BEGIN UPDATE trips SET current_capacity = GREATEST(0, current_capacity + increment) WHERE id = trip_id; END; $$ language 'plpgsql'; -- Create enum types if they don't exist DO $$ BEGIN CREATE TYPE booking_status AS ENUM ('pending', 'confirmed', 'cancelled', 'completed'); EXCEPTION WHEN duplicate_object THEN null; END $$; DO $$ BEGIN CREATE TYPE trip_status AS ENUM ('scheduled', 'in_progress', 'completed', 'cancelled'); EXCEPTION WHEN duplicate_object THEN null; END $$; DO $$ BEGIN CREATE TYPE user_role AS ENUM ('customer', 'driver', 'admin'); EXCEPTION WHEN duplicate_object THEN null; END $$; [V0_FILE]json:file="package.json" isMerged="true" { "name": "ridedine-api", "version": "1.0.0", "description": "RideDine Food Truck API", "main": "server.js", "type": "module", "scripts": { "start": "node server.js", "dev": "nodemon server.js", "test": "jest" }, "dependencies": { "express": "^4.18.2", "@supabase/supabase-js": "^2.39.0", "cors": "^2.8.5", "helmet": "^7.1.0", "express-rate-limit": "^7.1.5", "express-validator": "^7.0.1", "dotenv": "^16.3.1", "compression": "^1.7.4", "morgan": "^1.10.0" }, "devDependencies": { "nodemon": "^3.0.2", "jest": "^29.7.0", "supertest": "^6.3.3" } } [V0_FILE]javascript:file="config/database.js" isMerged="true" import { createClient } from "@supabase/supabase-js" import dotenv from "dotenv" dotenv.config() const supabaseUrl = process.env.SUPABASE_URL const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY if (!supabaseUrl || !supabaseServiceKey) { throw new Error("Missing Supabase environment variables") } // Create a Supabase client with service role key for server-side operations export const supabase = createClient(supabaseUrl, supabaseServiceKey, { auth: { autoRefreshToken: false, persistSession: false, }, }) // Database helper functions export const handleDatabaseError = (error) => { console.error("Database error:", error) if (error.code === "PGRST116") { return { status: 404, message: "Resource not found" } } if (error.code === "23505") { return { status: 409, message: "Resource already exists" } } if (error.code === "23503") { return { status: 400, message: "Invalid reference to related resource" } } return { status: 500, message: error.message || "Database operation failed" } } export const buildPaginationQuery = (query, page = 1, limit = 10) => { const offset = (page - 1) * limit return query.range(offset, offset + limit - 1) } [V0_FILE]javascript:file="middleware/errorHandler.js" isMerged="true" export const errorHandler = (err, req, res, next) => { console.error("Error:", err) // Default error const error = { status: err.status || 500, message: err.message || "Internal Server Error", } // Validation errors if (err.name === "ValidationError") { error.status = 400 error.message = Object.values(err.errors) .map((val) => val.message) .join(", ") } // Duplicate key error if (err.code === 11000) { error.status = 400 error.message = "Duplicate field value entered" } res.status(error.status).json({ success: false, error: error.message, ...(process.env.NODE_ENV === "development" && { stack: err.stack }), }) } [V0_FILE]javascript:file="middleware/notFound.js" isMerged="true" export const notFound = (req, res, next) => { const error = new Error(`Not Found - ${req.originalUrl}`) error.status = 404 next(error) } [V0_FILE]javascript:file="middleware/validation.js" isMerged="true" import { body, param, query, validationResult } from "express-validator" export const handleValidationErrors = (req, res, next) => { const errors = validationResult(req) if (!errors.isEmpty()) { return res.status(400).json({ success: false, error: "Validation failed", details: errors.array(), }) } next() } // User validation rules export const validateUser = [ body("clerk_id").notEmpty().withMessage("Clerk ID is required"), body("email").isEmail().withMessage("Valid email is required"), body("role").optional().isIn(["customer", "driver", "admin"]).withMessage("Invalid role"), handleValidationErrors, ] export const validateUserUpdate = [ body("email").optional().isEmail().withMessage("Valid email is required"), body("role").optional().isIn(["customer", "driver", "admin"]).withMessage("Invalid role"), handleValidationErrors, ] // Pickup location validation rules export const validatePickupLocation = [ body("name").notEmpty().withMessage("Name is required"), body("address").notEmpty().withMessage("Address is required"), body("latitude").optional().isFloat({ min: -90, max: 90 }).withMessage("Invalid latitude"), body("longitude").optional().isFloat({ min: -180, max: 180 }).withMessage("Invalid longitude"), handleValidationErrors, ] // Route validation rules export const validateRoute = [ body("name").notEmpty().withMessage("Name is required"), body("pickup_location_id").isUUID().withMessage("Valid pickup location ID is required"), body("dropoff_location_id").isUUID().withMessage("Valid dropoff location ID is required"), body("duration_minutes").isInt({ min: 1 }).withMessage("Duration must be a positive integer"), body("price_per_person").isFloat({ min: 0 }).withMessage("Price must be a positive number"), body("max_capacity").optional().isInt({ min: 1, max: 15 }).withMessage("Max capacity must be between 1 and 15"), handleValidationErrors, ] // Food category validation rules export const validateFoodCategory = [ body("name").notEmpty().withMessage("Name is required"), body("sort_order").optional().isInt({ min: 0 }).withMessage("Sort order must be a non-negative integer"), handleValidationErrors, ] // Menu item validation rules export const validateMenuItem = [ body("name").notEmpty().withMessage("Name is required"), body("category_id").isUUID().withMessage("Valid category ID is required"), body("price").isFloat({ min: 0 }).withMessage("Price must be a positive number"), body("preparation_time").optional().isInt({ min: 1 }).withMessage("Preparation time must be a positive integer"), body("ingredients").optional().isArray().withMessage("Ingredients must be an array"), body("allergens").optional().isArray().withMessage("Allergens must be an array"), handleValidationErrors, ] // Trip validation rules export const validateTrip = [ body("route_id").isUUID().withMessage("Valid route ID is required"), body("driver_id").isUUID().withMessage("Valid driver ID is required"), body("scheduled_date").isISO8601().withMessage("Valid date is required"), body("scheduled_time") .matches(/^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/) .withMessage("Valid time format (HH:MM) is required"), body("max_capacity").optional().isInt({ min: 1, max: 15 }).withMessage("Max capacity must be between 1 and 15"), handleValidationErrors, ] // Booking validation rules export const validateBooking = [ body("user_id").isUUID().withMessage("Valid user ID is required"), body("trip_id").isUUID().withMessage("Valid trip ID is required"), body("party_size").isInt({ min: 1, max: 15 }).withMessage("Party size must be between 1 and 15"), body("total_amount").isFloat({ min: 0 }).withMessage("Total amount must be a positive number"), body("menu_items").optional().isArray().withMessage("Menu items must be an array"), body("menu_items.*.menu_item_id").optional().isUUID().withMessage("Valid menu item ID is required"), body("menu_items.*.quantity").optional().isInt({ min: 1 }).withMessage("Quantity must be a positive integer"), body("menu_items.*.unit_price").optional().isFloat({ min: 0 }).withMessage("Unit price must be a positive number"), handleValidationErrors, ] // Notification validation rules export const validateNotification = [ body("user_id").isUUID().withMessage("Valid user ID is required"), body("title").notEmpty().withMessage("Title is required"), body("message").notEmpty().withMessage("Message is required"), body("type").optional().isIn(["info", "warning", "error", "success"]).withMessage("Invalid notification type"), handleValidationErrors, ] // Common parameter validations export const validateUUID = [param("id").isUUID().withMessage("Valid UUID is required"), handleValidationErrors] export const validatePagination = [ query("page").optional().isInt({ min: 1 }).withMessage("Page must be a positive integer"), query("limit").optional().isInt({ min: 1, max: 100 }).withMessage("Limit must be between 1 and 100"), handleValidationErrors, ] [V0_FILE]javascript:file="routes/users.js" isMerged="true" import express from "express" import { supabase, handleDatabaseError, buildPaginationQuery } from "../config/database.js" import { validateUser, validateUserUpdate, validateUUID, validatePagination } from "../middleware/validation.js" const router = express.Router() // GET /api/users - List all users router.get("/", validatePagination, async (req, res, next) => { try { const { role, page = 1, limit = 10 } = req.query const pageNum = Number.parseInt(page) const limitNum = Number.parseInt(limit) let query = supabase.from("users").select("*", { count: "exact" }).order("created_at", { ascending: false }) if (role) { query = query.eq("role", role) } query = buildPaginationQuery(query, pageNum, limitNum) const { data, error, count } = await query if (error) { const dbError = handleDatabaseError(error) return res.status(dbError.status).json({ success: false, error: dbError.message, }) } res.status(200).json({ success: true, data, pagination: { page: pageNum, limit: limitNum, total: count || 0, totalPages: Math.ceil((count || 0) / limitNum), }, }) } catch (error) { next(error) } }) // GET /api/users/:id - Get user by ID router.get("/:id", validateUUID, async (req, res, next) => { try { const { data, error } = await supabase.from("users").select("*").eq("id", req.params.id).single() if (error) { const dbError = handleDatabaseError(error) return res.status(dbError.status).json({ success: false, error: dbError.message, }) } res.status(200).json({ success: true, data, }) } catch (error) { next(error) } }) // POST /api/users - Create new user router.post("/", validateUser, async (req, res, next) => { try { const { data, error } = await supabase.from("users").insert([req.body]).select().single() if (error) { const dbError = handleDatabaseError(error) return res.status(dbError.status).json({ success: false, error: dbError.message, }) } res.status(201).json({ success: true, data, }) } catch (error) { next(error) } }) // PUT /api/users/:id - Update user router.put("/:id", validateUUID, validateUserUpdate, async (req, res, next) => { try { const { data, error } = await supabase.from("users").update(req.body).eq("id", req.params.id).select().single() if (error) { const dbError = handleDatabaseError(error) return res.status(dbError.status).json({ success: false, error: dbError.message, }) } res.status(200).json({ success: true, data, }) } catch (error) { next(error) } }) // DELETE /api/users/:id - Delete user router.delete("/:id", validateUUID, async (req, res, next) => { try { const { error } = await supabase.from("users").delete().eq("id", req.params.id) if (error) { const dbError = handleDatabaseError(error) return res.status(dbError.status).json({ success: false, error: dbError.message, }) } res.status(200).json({ success: true, message: "User deleted successfully", }) } catch (error) { next(error) } }) export default router [V0_FILE]javascript:file="routes/pickupLocations.js" isMerged="true" import express from "express" import { supabase, handleDatabaseError } from "../config/database.js" import { validatePickupLocation, validateUUID } from "../middleware/validation.js" const router = express.Router() // GET /api/pickup-locations - List all pickup locations router.get("/", async (req, res, next) => { try { const { is_active } = req.query let query = supabase.from("pickup_locations").select("*").order("name", { ascending: true }) if (is_active !== undefined) { query = query.eq("is_active", is_active === "true") } const { data, error } = await query if (error) { const dbError = handleDatabaseError(error) return res.status(dbError.status).json({ success: false, error: dbError.message, }) } res.status(200).json({ success: true, data, }) } catch (error) { next(error) } }) // GET /api/pickup-locations/:id - Get pickup location by ID router.get("/:id", validateUUID, async (req, res, next) => { try { const { data, error } = await supabase.from("pickup_locations").select("*").eq("id", req.params.id).single() if (error) { const dbError = handleDatabaseError(error) return res.status(dbError.status).json({ success: false, error: dbError.message, }) } res.status(200).json({ success: true, data, }) } catch (error) { next(error) } }) // POST /api/pickup-locations - Create new pickup location router.post("/", validatePickupLocation, async (req, res, next) => { try { const { data, error } = await supabase.from("pickup_locations").insert([req.body]).select().single() if (error) { const dbError = handleDatabaseError(error) return res.status(dbError.status).json({ success: false, error: dbError.message, }) } res.status(201).json({ success: true, data, }) } catch (error) { next(error) } }) // PUT /api/pickup-locations/:id - Update pickup location router.put("/:id", validateUUID, validatePickupLocation, async (req, res, next) => { try { const { data, error } = await supabase .from("pickup_locations") .update(req.body) .eq("id", req.params.id) .select() .single() if (error) { const dbError = handleDatabaseError(error) return res.status(dbError.status).json({ success: false, error: dbError.message, }) } res.status(200).json({ success: true, data, }) } catch (error) { next(error) } }) // DELETE /api/pickup-locations/:id - Delete pickup location router.delete("/:id", validateUUID, async (req, res, next) => { try { const { error } = await supabase.from("pickup_locations").delete().eq("id", req.params.id) if (error) { const dbError = handleDatabaseError(error) return res.status(dbError.status).json({ success: false, error: dbError.message, }) } res.status(200).json({ success: true, message: "Pickup location deleted successfully", }) } catch (error) { next(error) } }) export default router [V0_FILE]javascript:file="routes/routes.js" isMerged="true" import express from "express" import { supabase, handleDatabaseError } from "../config/database.js" import { validateRoute, validateUUID } from "../middleware/validation.js" const router = express.Router() // GET /api/routes - List all routes router.get("/", async (req, res, next) => { try { const { is_active } = req.query let query = supabase .from("routes") .select(` *, pickup_location:pickup_locations!pickup_location_id(*), dropoff_location:pickup_locations!dropoff_location_id(*) `) .order("name", { ascending: true }) if (is_active !== undefined) { query = query.eq("is_active", is_active === "true") } const { data, error } = await query if (error) { const dbError = handleDatabaseError(error) return res.status(dbError.status).json({ success: false, error: dbError.message, }) } res.status(200).json({ success: true, data, }) } catch (error) { next(error) } }) // GET /api/routes/:id - Get route by ID router.get("/:id", validateUUID, async (req, res, next) => { try { const { data, error } = await supabase .from("routes") .select(` *, pickup_location:pickup_locations!pickup_location_id(*), dropoff_location:pickup_locations!dropoff_location_id(*) `) .eq("id", req.params.id) .single() if (error) { const dbError = handleDatabaseError(error) return res.status(dbError.status).json({ success: false, error: dbError.message, }) } res.status(200).json({ success: true, data, }) } catch (error) { next(error) } }) // POST /api/routes - Create new route router.post("/", validateRoute, async (req, res, next) => { try { const { data, error } = await supabase .from("routes") .insert([req.body]) .select(` *, pickup_location:pickup_locations!pickup_location_id(*), dropoff_location:pickup_locations!dropoff_location_id(*) `) .single() if (error) { const dbError = handleDatabaseError(error) return res.status(dbError.status).json({ success: false, error: dbError.message, }) } res.status(201).json({ success: true, data, }) } catch (error) { next(error) } }) // PUT /api/routes/:id - Update route router.put("/:id", validateUUID, validateRoute, async (req, res, next) => { try { const { data, error } = await supabase .from("routes") .update(req.body) .eq("id", req.params.id) .select(` *, pickup_location:pickup_locations!pickup_location_id(*), dropoff_location:pickup_locations!dropoff_location_id(*) `) .single() if (error) { const dbError = handleDatabaseError(error) return res.status(dbError.status).json({ success: false, error: dbError.message, }) } res.status(200).json({ success: true, data, }) } catch (error) { next(error) } }) // DELETE /api/routes/:id - Delete route router.delete("/:id", validateUUID, async (req, res, next) => { try { const { error } = await supabase.from("routes").delete().eq("id", req.params.id) if (error) { const dbError = handleDatabaseError(error) return res.status(dbError.status).json({ success: false, error: dbError.message, }) } res.status(200).json({ success: true, message: "Route deleted successfully", }) } catch (error) { next(error) } }) export default router [V0_FILE]javascript:file="routes/foodCategories.js" isMerged="true" import express from "express" import { supabase, handleDatabaseError } from "../config/database.js" import { validateFoodCategory, validateUUID } from "../middleware/validation.js" const router = express.Router() // GET /api/food-categories - List all food categories router.get("/", async (req, res, next) => { try { const { is_active } = req.query let query = supabase.from("food_categories").select("*").order("sort_order", { ascending: true }) if (is_active !== undefined) { query = query.eq("is_active", is_active === "true") } const { data, error } = await query if (error) { const dbError = handleDatabaseError(error) return res.status(dbError.status).json({ success: false, error: dbError.message, }) } res.status(200).json({ success: true, data, }) } catch (error) { next(error) } }) // GET /api/food-categories/:id - Get food category by ID router.get("/:id", validateUUID, async (req, res, next) => { try { const { data, error } = await supabase.from("food_categories").select("*").eq("id", req.params.id).single() if (error) { const dbError = handleDatabaseError(error) return res.status(dbError.status).json({ success: false, error: dbError.message, }) } res.status(200).json({ success: true, data, }) } catch (error) { next(error) } }) // POST /api/food-categories - Create new food category router.post("/", validateFoodCategory, async (req, res, next) => { try { const { data, error } = await supabase.from("food_categories").insert([req.body]).select().single() if (error) { const dbError = handleDatabaseError(error) return res.status(dbError.status).json({ success: false, error: dbError.message, }) } res.status(201).json({ success: true, data, }) } catch (error) { next(error) } }) // PUT /api/food-categories/:id - Update food category router.put("/:id", validateUUID, validateFoodCategory, async (req, res, next) => { try { const { data, error } = await supabase .from("food_categories") .update(req.body) .eq("id", req.params.id) .select() .single() if (error) { const dbError = handleDatabaseError(error) return res.status(dbError.status).json({ success: false, error: dbError.message, }) } res.status(200).json({ success: true, data, }) } catch (error) { next(error) } }) // DELETE /api/food-categories/:id - Delete food category router.delete("/:id", validateUUID, async (req, res, next) => { try { const { error } = await supabase.from("food_categories").delete().eq("id", req.params.id) if (error) { const dbError = handleDatabaseError(error) return res.status(dbError.status).json({ success: false, error: dbError.message, }) } res.status(200).json({ success: true, message: "Food category deleted successfully", }) } catch (error) { next(error) } }) export default router [V0_FILE]javascript:file="routes/bookings.js" isMerged="true" import express from "express" import { supabase, handleDatabaseError, buildPaginationQuery } from "../config/database.js" import { validateBooking, validateUUID, validatePagination } from "../middleware/validation.js" const router = express.Router() // GET /api/bookings - List all bookings router.get("/", validatePagination, async (req, res, next) => { try { const { user_id, trip_id, status, page = 1, limit = 10 } = req.query const pageNum = Number.parseInt(page) const limitNum = Number.parseInt(limit) let query = supabase .from("bookings") .select( ` *, user:users(*), trip:trips(*, route:routes(*, pickup_location:pickup_locations!pickup_location_id(*), dropoff_location:pickup_locations!dropoff_location_id(*) ), driver:users!driver_id(*) ), booking_menu_items(*, menu_item:menu_items(*) ) `, { count: "exact" }, ) .order("created_at", { ascending: false }) if (user_id) { query = query.eq("user_id", user_id) } if (trip_id) { query = query.eq("trip_id", trip_id) } if (status) { query = query.eq("status", status) } query = buildPaginationQuery(query, pageNum, limitNum) const { data, error, count } = await query if (error) { const dbError = handleDatabaseError(error) return res.status(dbError.status).json({ success: false, error: dbError.message, }) } res.status(200).json({ success: true, data, pagination: { page: pageNum, limit: limitNum, total: count || 0, totalPages: Math.ceil((count || 0) / limitNum), }, }) } catch (error) { next(error) } }) // GET /api/bookings/:id - Get booking by ID router.get("/:id", validateUUID, async (req, res, next) => { try { const { data, error } = await supabase .from("bookings") .select(` *, user:users(*), trip:trips(*, route:routes(*, pickup_location:pickup_locations!pickup_location_id(*), dropoff_location:pickup_locations!dropoff_location_id(*) ), driver:users!driver_id(*) ), booking_menu_items(*, menu_item:menu_items(*) ) `) .eq("id", req.params.id) .single() if (error) { const dbError = handleDatabaseError(error) return res.status(dbError.status).json({ success: false, error: dbError.message, }) } res.status(200).json({ success: true, data, }) } catch (error) { next(error) } }) // POST /api/bookings - Create new booking router.post("/", validateBooking, async (req, res, next) => { try { const { menu_items, ...bookingData } = req.body // Check trip capacity const { data: trip, error: tripError } = await supabase .from("trips") .select("current_capacity, max_capacity") .eq("id", bookingData.trip_id) .single() if (tripError) { const dbError = handleDatabaseError(tripError) return res.status(dbError.status).json({ success: false, error: dbError.message, }) } if (trip.current_capacity + bookingData.party_size > trip.max_capacity) { return res.status(400).json({ success: false, error: "Trip capacity exceeded", }) } // Create booking const { data: booking, error: bookingError } = await supabase .from("bookings") .insert([bookingData]) .select() .single() if (bookingError) { const dbError = handleDatabaseError(bookingError) return res.status(dbError.status).json({ success: false, error: dbError.message, }) } // Add menu items if provided if (menu_items && menu_items.length > 0) { const menuItemsData = menu_items.map((item) => ({ ...item, booking_id: booking.id, })) const { error: menuItemsError } = await supabase.from("booking_menu_items").insert(menuItemsData) if (menuItemsError) { // Rollback booking if menu items fail await supabase.from("bookings").delete().eq("id", booking.id) const dbError = handleDatabaseError(menuItemsError) return res.status(dbError.status).json({ success: false, error: dbError.message, }) } } // Update trip capacity const { error: capacityError } = await supabase .from("trips") .update({ current_capacity: trip.current_capacity + bookingData.party_size, }) .eq("id", bookingData.trip_id) if (capacityError) { console.error("Failed to update trip capacity:", capacityError) } // Fetch complete booking data const { data: completeBooking, error: fetchError } = await supabase .from("bookings") .select(` *, user:users(*), trip:trips(*, route:routes(*, pickup_location:pickup_locations!pickup_location_id(*), dropoff_location:pickup_locations!dropoff_location_id(*) ) ), booking_menu_items(*, menu_item:menu_items(*) ) `) .eq("id", booking.id) .single() if (fetchError) { const dbError = handleDatabaseError(fetchError) return res.status(dbError.status).json({ success: false, error: dbError.message, }) } res.status(201).json({ success: true, data: completeBooking, }) } catch (error) { next(error) } }) // PUT /api/bookings/:id - Update booking router.put("/:id", validateUUID, async (req, res, next) => { try { const { data, error } = await supabase .from("bookings") .update(req.body) .eq("id", req.params.id) .select(` *, user:users(*), trip:trips(*, route:routes(*, pickup_location:pickup_locations!pickup_location_id(*), dropoff_location:pickup_locations!dropoff_location_id(*) ) ), booking_menu_items(*, menu_item:menu_items(*) ) `) .single() if (error) { const dbError = handleDatabaseError(error) return res.status(dbError.status).json({ success: false, error: dbError.message, }) } res.status(200).json({ success: true, data, }) } catch (error) { next(error) } }) // DELETE /api/bookings/:id - Cancel booking router.delete("/:id", validateUUID, async (req, res, next) => { try { // Get booking details first const { data: booking, error: fetchError } = await supabase .from("bookings") .select("trip_id, party_size") .eq("id", req.params.id) .single() if (fetchError) { const dbError = handleDatabaseError(fetchError) return res.status(dbError.status).json({ success: false, error: dbError.message, }) } // Update booking status to cancelled const { error: updateError } = await supabase .from("bookings") .update({ status: "cancelled", cancelled_at: new Date().toISOString(), }) .eq("id", req.params.id) if (updateError) { const dbError = handleDatabaseError(updateError) return res.status(dbError.status).json({ success: false, error: dbError.message, }) } // Update trip capacity const { data: trip, error: tripError } = await supabase .from("trips") .select("current_capacity") .eq("id", booking.trip_id) .single() if (!tripError && trip) { await supabase .from("trips") .update({ current_capacity: Math.max(0, trip.current_capacity - booking.party_size), }) .eq("id", booking.trip_id) } res.status(200).json({ success: true, message: "Booking cancelled successfully", }) } catch (error) { next(error) } }) export default router [V0_FILE]javascript:file="routes/notifications.js" isMerged="true" import express from "express" import { supabase, handleDatabaseError, buildPaginationQuery } from "../config/database.js" import { validateNotification, validateUUID, validatePagination } from "../middleware/validation.js" const router = express.Router() // GET /api/notifications - List notifications for a user router.get("/", validatePagination, async (req, res, next) => { try { const { user_id, is_read, type, page = 1, limit = 20 } = req.query if (!user_id) { return res.status(400).json({ success: false, error: "User ID is required", }) } const pageNum = Number.parseInt(page) const limitNum = Number.parseInt(limit) let query = supabase .from("notifications") .select("*", { count: "exact" }) .eq("user_id", user_id) .order("created_at", { ascending: false }) if (is_read !== undefined) { query = query.eq("is_read", is_read === "true") } if (type) { query = query.eq("type", type) } query = buildPaginationQuery(query, pageNum, limitNum) const { data, error, count } = await query if (error) { const dbError = handleDatabaseError(error) return res.status(dbError.status).json({ success: false, error: dbError.message, }) } res.status(200).json({ success: true, data, pagination: { page: pageNum, limit: limitNum, total: count || 0, totalPages: Math.ceil((count || 0) / limitNum), }, }) } catch (error) { next(error) } }) // GET /api/notifications/:id - Get notification by ID router.get("/:id", validateUUID, async (req, res, next) => { try { const { data, error } = await supabase.from("notifications").select("*").eq("id", req.params.id).single() if (error) { const dbError = handleDatabaseError(error) return res.status(dbError.status).json({ success: false, error: dbError.message, }) } res.status(200).json({ success: true, data, }) } catch (error) { next(error) } }) // POST /api/notifications - Create new notification router.post("/", validateNotification, async (req, res, next) => { try { const { data, error } = await supabase.from("notifications").insert([req.body]).select().single() if (error) { const dbError = handleDatabaseError(error) return res.status(dbError.status).json({ success: false, error: dbError.message, }) } res.status(201).json({ success: true, data, }) } catch (error) { next(error) } }) // PUT /api/notifications/:id - Update notification (mark as read) router.put("/:id", validateUUID, async (req, res, next) => { try { const { data, error } = await supabase .from("notifications") .update(req.body) .eq("id", req.params.id) .select() .single() if (error) { const dbError = handleDatabaseError(error) return res.status(dbError.status).json({ success: false, error: dbError.message, }) } res.status(200).json({ success: true, data, }) } catch (error) { next(error) } }) // PUT /api/notifications/mark-all-read - Mark all notifications as read for a user router.put("/mark-all-read", async (req, res, next) => { try { const { user_id } = req.body if (!user_id) { return res.status(400).json({ success: false, error: "User ID is required", }) } const { data, error } = await supabase .from("notifications") .update({ is_read: true }) .eq("user_id", user_id) .eq("is_read", false) if (error) { const dbError = handleDatabaseError(error) return res.status(dbError.status).json({ success: false, error: dbError.message, }) } res.status(200).json({ success: true, message: "All notifications marked as read", }) } catch (error) { next(error) } }) // DELETE /api/notifications/:id - Delete notification router.delete("/:id", validateUUID, async (req, res, next) => { try { const { error } = await supabase.from("notifications").delete().eq("id", req.params.id) if (error) { const dbError = handleDatabaseError(error) return res.status(dbError.status).json({ success: false, error: dbError.message, }) } res.status(200).json({ success: true, message: "Notification deleted successfully", }) } catch (error) { next(error) } }) export default router [V0_FILE]plaintext:file=".env.example" isMerged="true" # Server Configuration PORT=3000 NODE_ENV=development # Supabase Configuration SUPABASE_URL=your_supabase_url_here SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key_here # Optional: JWT Secret for authentication JWT_SECRET=your_jwt_secret_here # Optional: Database URL (if using direct PostgreSQL connection) DATABASE_URL=your_database_url_here [V0_FILE]javascript:file="scripts/test-api.js" isMerged="true" // Simple API testing script import fetch from "node-fetch" const BASE_URL = "http://localhost:3000/api" async function testAPI() { console.log("🧪 Testing RideDine API...\n") // Test health endpoint try { const response = await fetch("http://localhost:3000/health") const data = await response.json() console.log("✅ Health check:", data.status) } catch (error) { console.log("❌ Health check failed:", error.message) } // Test users endpoint try { const response = await fetch(`${BASE_URL}/users?page=1&limit=5`) const data = await response.json() console.log("✅ Users endpoint:", data.success ? "Working" : "Failed") console.log(" Total users:", data.pagination?.total || 0) } catch (error) { console.log("❌ Users endpoint failed:", error.message) } // Test pickup locations endpoint try { const response = await fetch(`${BASE_URL}/pickup-locations`) const data = await response.json() console.log("✅ Pickup locations endpoint:", data.success ? "Working" : "Failed") console.log(" Total locations:", data.data?.length || 0) } catch (error) { console.log("❌ Pickup locations endpoint failed:", error.message) } // Test menu items endpoint try { const response = await fetch(`${BASE_URL}/menu-items?is_available=true`) const data = await response.json() console.log("✅ Menu items endpoint:", data.success ? "Working" : "Failed") console.log(" Available items:", data.data?.length || 0) } catch (error) { console.log("❌ Menu items endpoint failed:", error.message) } console.log("\n🎉 API testing completed!") } // Run the test testAPI() [V0_FILE]typescriptreact:file="app/admin/users/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Plus, Search, Edit, Trash2, Filter } from "lucide-react" import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog" interface User { id: string clerk_id: string username?: string email: string first_name?: string last_name?: string phone?: string role: "customer" | "driver" | "admin" avatar_url?: string is_active: boolean created_at: string updated_at: string } export default function UsersPage() { const [users, setUsers] = useState([]) const [loading, setLoading] = useState(true) const [searchTerm, setSearchTerm] = useState("") const [roleFilter, setRoleFilter] = useState("all") const [currentPage, setCurrentPage] = useState(1) const [totalPages, setTotalPages] = useState(1) // Mock data - replace with actual API calls useEffect(() => { const mockUsers: User[] = [ { id: "1", clerk_id: "clerk_1", username: "johndoe", email: "john@example.com", first_name: "John", last_name: "Doe", phone: "+254700000001", role: "customer", is_active: true, created_at: "2024-01-15T10:00:00Z", updated_at: "2024-01-15T10:00:00Z", }, { id: "2", clerk_id: "clerk_2", username: "janesmith", email: "jane@example.com", first_name: "Jane", last_name: "Smith", phone: "+254700000002", role: "driver", is_active: true, created_at: "2024-01-14T09:00:00Z", updated_at: "2024-01-14T09:00:00Z", }, { id: "3", clerk_id: "clerk_3", username: "admin", email: "admin@ridedine.com", first_name: "Admin", last_name: "User", phone: "+254700000003", role: "admin", is_active: true, created_at: "2024-01-10T08:00:00Z", updated_at: "2024-01-10T08:00:00Z", }, ] setTimeout(() => { setUsers(mockUsers) setLoading(false) setTotalPages(1) }, 1000) }, [currentPage, roleFilter, searchTerm]) const handleDeleteUser = async (userId: string) => { // Mock delete - replace with actual API call setUsers(users.filter((user) => user.id !== userId)) } const filteredUsers = users.filter((user) => { const matchesSearch = user.email.toLowerCase().includes(searchTerm.toLowerCase()) || user.first_name?.toLowerCase().includes(searchTerm.toLowerCase()) || user.last_name?.toLowerCase().includes(searchTerm.toLowerCase()) || user.username?.toLowerCase().includes(searchTerm.toLowerCase()) const matchesRole = roleFilter === "all" || user.role === roleFilter return matchesSearch && matchesRole }) const getRoleBadgeColor = (role: string) => { switch (role) { case "admin": return "bg-red-500 text-white" case "driver": return "bg-[#2980B9] text-white" case "customer": return "bg-[#27AE60] text-white" default: return "bg-gray-500 text-white" } } if (loading) { return (

) } return (

{/* Header */}

Users

Manage customers, drivers, and administrators

{/* Filters */}

setSearchTerm(e.target.value)} className="pl-10" />

{/* Users Table */} All Users ({filteredUsers.length}) A list of all registered users in the system Name Email Phone Role Status Created Actions {filteredUsers.map((user) => (

{user.first_name} {user.last_name}

{user.username &&

@{user.username}

}

{user.email} {user.phone || "N/A"} {user.role.charAt(0).toUpperCase() + user.role.slice(1)} {user.is_active ? "Active" : "Inactive"} {new Date(user.created_at).toLocaleDateString()}

Delete User Are you sure you want to delete {user.first_name} {user.last_name}? This action cannot be undone. Cancel handleDeleteUser(user.id)} className="bg-red-600 hover:bg-red-700" > Delete

))}

{filteredUsers.length === 0 && (

No users found matching your criteria.

)}

) } [V0_FILE]typescriptreact:file="app/admin/users/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/admin/pickup-locations/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Plus, Search, Edit, Trash2, MapPin } from "lucide-react" import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog" interface PickupLocation { id: string name: string address: string latitude?: number longitude?: number is_active: boolean created_at: string } export default function PickupLocationsPage() { const [locations, setLocations] = useState([]) const [loading, setLoading] = useState(true) const [searchTerm, setSearchTerm] = useState("") // Mock data - replace with actual API calls useEffect(() => { const mockLocations: PickupLocation[] = [ { id: "1", name: "City Center", address: "Main Street, Downtown Nairobi", latitude: -1.2864, longitude: 36.8172, is_active: true, created_at: "2024-01-15T10:00:00Z", }, { id: "2", name: "University Campus", address: "University Way, Nairobi", latitude: -1.2966, longitude: 36.8083, is_active: true, created_at: "2024-01-14T09:00:00Z", }, { id: "3", name: "Shopping Mall", address: "Westlands Mall, Westlands", latitude: -1.263, longitude: 36.8063, is_active: false, created_at: "2024-01-13T08:00:00Z", }, ] setTimeout(() => { setLocations(mockLocations) setLoading(false) }, 1000) }, []) const handleDeleteLocation = async (locationId: string) => { // Mock delete - replace with actual API call setLocations(locations.filter((location) => location.id !== locationId)) } const filteredLocations = locations.filter( (location) => location.name.toLowerCase().includes(searchTerm.toLowerCase()) || location.address.toLowerCase().includes(searchTerm.toLowerCase()), ) if (loading) { return (

) } return (

{/* Header */}

Pickup Locations

Manage pickup and drop-off points

{/* Search */}

setSearchTerm(e.target.value)} className="pl-10" />

{/* Locations Table */} All Locations ({filteredLocations.length}) Manage pickup and drop-off locations Name Address Coordinates Status Created Actions {filteredLocations.map((location) => (

{location.name}

{location.address} {location.latitude && location.longitude ? ( {location.latitude.toFixed(4)}, {location.longitude.toFixed(4)} ) : ( Not set )} {location.is_active ? "Active" : "Inactive"} {new Date(location.created_at).toLocaleDateString()}

Delete Location Are you sure you want to delete "{location.name}"? This action cannot be undone and may affect existing routes. Cancel handleDeleteLocation(location.id)} className="bg-red-600 hover:bg-red-700" > Delete

))}

{filteredLocations.length === 0 && (

No locations found matching your criteria.

)}

) } [V0_FILE]typescriptreact:file="app/admin/pickup-locations/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/admin/pickup-locations/create/page.tsx" isMerged="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 { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Switch } from "@/components/ui/switch" import { ArrowLeft, Save, MapPin } from "lucide-react" import { useToast } from "@/hooks/use-toast" export default function CreatePickupLocationPage() { const router = useRouter() const { toast } = useToast() const [loading, setLoading] = useState(false) const [formData, setFormData] = useState({ name: "", address: "", latitude: "", longitude: "", is_active: true, }) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setLoading(true) try { // Mock API call - replace with actual implementation await new Promise((resolve) => setTimeout(resolve, 1000)) toast({ title: "Success", description: "Pickup location created successfully", }) router.push("/admin/pickup-locations") } catch (error) { toast({ title: "Error", description: "Failed to create pickup location", variant: "destructive", }) } finally { setLoading(false) } } const handleInputChange = (field: string, value: string | boolean) => { setFormData((prev) => ({ ...prev, [field]: value })) } return (

{/* Header */}

Create Pickup Location

Add a new pickup or drop-off location

{/* Form */} Location Information Enter the details for the new pickup location

Location Name * handleInputChange("name", e.target.value)} placeholder="e.g., City Center, University Campus" required />

Address *

handleInputChange("address", e.target.value)}
                placeholder="Full address of the location"
                required
                rows={3}
              />
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="latitude">Latitude</Label>
                <Input
                  id="latitude"
                  type="number"
                  step="any"
                  value={formData.latitude}
                  onChange={(e) => handleInputChange("latitude", e.target.value)}
                  placeholder="-1.2864"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="longitude">Longitude</Label>
                <Input
                  id="longitude"
                  type="number"
                  step="any"
                  value={formData.longitude}
                  onChange={(e) => handleInputChange("longitude", e.target.value)}
                  placeholder="36.8172"
                />
              </div>
            </div>

<div className="flex items-center space-x-2">
              <Switch
                id="is_active"
                checked={formData.is_active}
                onCheckedChange={(checked) => handleInputChange("is_active", checked)}
              />
              <Label htmlFor="is_active">Active Location</Label>
            </div>

<div className="flex gap-4 pt-4">
              <Button type="submit" disabled={loading} className="bg-[#27AE60] hover:bg-[#229954]">
                <Save className="h-4 w-4 mr-2" />
                {loading ? "Creating..." : "Create Location"}
              </Button>
              <Button type="button" variant="outline" asChild>
                <Link href="/admin/pickup-locations">Cancel</Link>
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/menu-items/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Plus, Search, Edit, Trash2, Filter, ChefHat } from "lucide-react"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"

interface MenuItem {
  id: string
  category_id: string
  name: string
  description?: string
  price: number
  image_url?: string
  ingredients?: string[]
  allergens?: string[]
  is_vegetarian: boolean
  is_vegan: boolean
  is_available: boolean
  preparation_time: number
  sort_order: number
  category: {
    id: string
    name: string
  }
  created_at: string
  updated_at: string
}

export default function MenuItemsPage() {
  const [menuItems, setMenuItems] = useState<MenuItem[]>([])
  const [loading, setLoading] = useState(true)
  const [searchTerm, setSearchTerm] = useState("")
  const [categoryFilter, setCategoryFilter] = useState<string>("all")
  const [availabilityFilter, setAvailabilityFilter] = useState<string>("all")

// Mock data - replace with actual API calls
  useEffect(() => {
    const mockMenuItems: MenuItem[] = [
      {
        id: "1",
        category_id: "cat1",
        name: "Gourmet Burger",
        description: "Premium beef patty with artisan toppings",
        price: 800,
        ingredients: ["Beef", "Lettuce", "Tomato", "Cheese", "Bun"],
        allergens: ["Gluten", "Dairy"],
        is_vegetarian: false,
        is_vegan: false,
        is_available: true,
        preparation_time: 15,
        sort_order: 1,
        category: { id: "cat1", name: "Main Course" },
        created_at: "2024-01-15T10:00:00Z",
        updated_at: "2024-01-15T10:00:00Z",
      },
      {
        id: "2",
        category_id: "cat2",
        name: "Truffle Fries",
        description: "Hand-cut fries with truffle oil and parmesan",
        price: 400,
        ingredients: ["Potatoes", "Truffle Oil", "Parmesan", "Salt"],
        allergens: ["Dairy"],
        is_vegetarian: true,
        is_vegan: false,
        is_available: true,
        preparation_time: 10,
        sort_order: 1,
        category: { id: "cat2", name: "Sides" },
        created_at: "2024-01-14T09:00:00Z",
        updated_at: "2024-01-14T09:00:00Z",
      },
      {
        id: "3",
        category_id: "cat3",
        name: "Vegan Salad Bowl",
        description: "Fresh mixed greens with quinoa and tahini dressing",
        price: 600,
        ingredients: ["Mixed Greens", "Quinoa", "Chickpeas", "Tahini"],
        allergens: ["Sesame"],
        is_vegetarian: true,
        is_vegan: true,
        is_available: false,
        preparation_time: 8,
        sort_order: 1,
        category: { id: "cat3", name: "Salads" },
        created_at: "2024-01-13T08:00:00Z",
        updated_at: "2024-01-13T08:00:00Z",
      },
    ]

setTimeout(() => {
      setMenuItems(mockMenuItems)
      setLoading(false)
    }, 1000)
  }, [])

const handleDeleteMenuItem = async (itemId: string) => {
    // Mock delete - replace with actual API call
    setMenuItems(menuItems.filter((item) => item.id !== itemId))
  }

const filteredMenuItems = menuItems.filter((item) => {
    const matchesSearch =
      item.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      item.description?.toLowerCase().includes(searchTerm.toLowerCase())

const matchesCategory = categoryFilter === "all" || item.category_id === categoryFilter
    const matchesAvailability =
      availabilityFilter === "all" ||
      (availabilityFilter === "available" && item.is_available) ||
      (availabilityFilter === "unavailable" && !item.is_available)

return matchesSearch && matchesCategory && matchesAvailability
  })

if (loading) {
    return (
      <div className="space-y-6">
        <div className="h-8 bg-gray-200 rounded animate-pulse"></div>
        <div className="h-64 bg-gray-200 rounded animate-pulse"></div>
      </div>
    )
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-[#2C3E50]">Menu Items</h1>
          <p className="text-[#7F8C8D]">Manage food items and their details</p>
        </div>
        <Button asChild className="bg-[#27AE60] hover:bg-[#229954]">
          <Link href="/admin/menu-items/create">
            <Plus className="h-4 w-4 mr-2" />
            Add Menu Item
          </Link>
        </Button>
      </div>

{/* Filters */}
      <Card>
        <CardContent className="pt-6">
          <div className="flex flex-col sm:flex-row gap-4">
            <div className="flex-1">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                <Input
                  placeholder="Search menu items..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10"
                />
              </div>
            </div>
            <div className="flex gap-2">
              <Select value={categoryFilter} onValueChange={setCategoryFilter}>
                <SelectTrigger className="w-40">
                  <Filter className="h-4 w-4 mr-2" />
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Categories</SelectItem>
                  <SelectItem value="cat1">Main Course</SelectItem>
                  <SelectItem value="cat2">Sides</SelectItem>
                  <SelectItem value="cat3">Salads</SelectItem>
                </SelectContent>
              </Select>
              <Select value={availabilityFilter} onValueChange={setAvailabilityFilter}>
                <SelectTrigger className="w-40">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Items</SelectItem>
                  <SelectItem value="available">Available</SelectItem>
                  <SelectItem value="unavailable">Unavailable</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Menu Items Table */}
      <Card>
        <CardHeader>
          <CardTitle>All Menu Items ({filteredMenuItems.length})</CardTitle>
          <CardDescription>Manage your food menu items</CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Item</TableHead>
                <TableHead>Category</TableHead>
                <TableHead>Price</TableHead>
                <TableHead>Dietary</TableHead>
                <TableHead>Prep Time</TableHead>
                <TableHead>Status</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredMenuItems.map((item) => (
                <TableRow key={item.id}>
                  <TableCell>
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 bg-[#F7F9F9] rounded-lg flex items-center justify-center">
                        <ChefHat className="h-5 w-5 text-[#27AE60]" />
                      </div>
                      <div>
                        <div className="font-medium text-[#2C3E50]">{item.name}</div>
                        <div className="text-sm text-[#7F8C8D] line-clamp-1">{item.description}</div>
                      </div>
                    </div>
                  </TableCell>
                  <TableCell>
                    <Badge variant="outline">{item.category.name}</Badge>
                  </TableCell>
                  <TableCell>
                    <span className="font-medium">KSH {item.price}</span>
                  </TableCell>
                  <TableCell>
                    <div className="flex gap-1">
                      {item.is_vegetarian && (
                        <Badge variant="secondary" className="text-xs bg-green-100 text-green-800">
                          Veg
                        </Badge>
                      )}
                      {item.is_vegan && (
                        <Badge variant="secondary" className="text-xs bg-green-100 text-green-800">
                          Vegan
                        </Badge>
                      )}
                    </div>
                  </TableCell>
                  <TableCell>
                    <span className="text-sm text-[#7F8C8D]">{item.preparation_time} min</span>
                  </TableCell>
                  <TableCell>
                    <Badge variant={item.is_available ? "default" : "secondary"}>
                      {item.is_available ? "Available" : "Unavailable"}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-right">
                    <div className="flex justify-end gap-2">
                      <Button variant="outline" size="sm" asChild>
                        <Link href={`/admin/menu-items/${item.id}/edit`}>
                          <Edit className="h-4 w-4" />
                        </Link>
                      </Button>
                      <AlertDialog>
                        <AlertDialogTrigger asChild>
                          <Button variant="outline" size="sm" className="text-red-600 hover:bg-red-50 bg-transparent">
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </AlertDialogTrigger>
                        <AlertDialogContent>
                          <AlertDialogHeader>
                            <AlertDialogTitle>Delete Menu Item</AlertDialogTitle>
                            <AlertDialogDescription>
                              Are you sure you want to delete "{item.name}"? This action cannot be undone.
                            </AlertDialogDescription>
                          </AlertDialogHeader>
                          <AlertDialogFooter>
                            <AlertDialogCancel>Cancel</AlertDialogCancel>
                            <AlertDialogAction
                              onClick={() => handleDeleteMenuItem(item.id)}
                              className="bg-red-600 hover:bg-red-700"
                            >
                              Delete
                            </AlertDialogAction>
                          </AlertDialogFooter>
                        </AlertDialogContent>
                      </AlertDialog>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>

{filteredMenuItems.length === 0 && (
            <div className="text-center py-8">
              <p className="text-[#7F8C8D]">No menu items found matching your criteria.</p>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/menu-items/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/bookings/page.tsx" isMerged="true"
"use client"

interface Booking {
  id: string
  user: {
    id: string
    first_name: string
    last_name: string
    email: string
  }
  trip: {
    id: string
    scheduled_date: string
    scheduled_time: string
    route: {
      name: string
      pickup_location: { name: string }
      dropoff_location: { name: string }
    }
  }
  party_size: number
  total_amount: number
  status: "pending" | "confirmed" | "cancelled" | "completed"
  qr_code: string
  booked_at: string
  booking_menu_items: Array<{
    menu_item: { name: string }
    quantity: number
  }>
}

export default function BookingsPage() {
  const [bookings, setBookings] = useState<Booking[]>([])
  const [loading, setLoading] = useState(true)
  const [searchTerm, setSearchTerm] = useState("")
  const [statusFilter, setStatusFilter] = useState<string>("all")
  const [currentPage, setCurrentPage] = useState(1)

// Mock data - replace with actual API calls
  useEffect(() => {
    const mockBookings: Booking[] = [
      {
        id: "1",
        user: {
          id: "user1",
          first_name: "John",
          last_name: "Doe",
          email: "john@example.com",
        },
        trip: {
          id: "trip1",
          scheduled_date: "2024-01-20",
          scheduled_time: "12:30",
          route: {
            name: "City Center → Business District",
            pickup_location: { name: "City Center" },
            dropoff_location: { name: "Business District" },
          },
        },
        party_size: 2,
        total_amount: 2200,
        status: "confirmed",
        qr_code: "QR123456",
        booked_at: "2024-01-15T10:00:00Z",
        booking_menu_items: [
          { menu_item: { name: "Gourmet Burger" }, quantity: 2 },
          { menu_item: { name: "Truffle Fries" }, quantity: 1 },
        ],
      },
      {
        id: "2",
        user: {
          id: "user2",
          first_name: "Jane",
          last_name: "Smith",
          email: "jane@example.com",
        },
        trip: {
          id: "trip2",
          scheduled_date: "2024-01-21",
          scheduled_time: "18:00",
          route: {
            name: "University → Shopping Mall",
            pickup_location: { name: "University Campus" },
            dropoff_location: { name: "Shopping Mall" },
          },
        },
        party_size: 1,
        total_amount: 1400,
        status: "pending",
        qr_code: "QR789012",
        booked_at: "2024-01-16T14:30:00Z",
        booking_menu_items: [{ menu_item: { name: "Vegan Salad Bowl" }, quantity: 1 }],
      },
    ]

setTimeout(() => {
      setBookings(mockBookings)
      setLoading(false)
    }, 1000)
  }, [currentPage, statusFilter, searchTerm])

const filteredBookings = bookings.filter((booking) => {
    const matchesSearch =
      booking.user.first_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      booking.user.last_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      booking.user.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
      booking.qr_code.toLowerCase().includes(searchTerm.toLowerCase())

const matchesStatus = statusFilter === "all" || booking.status === statusFilter

return matchesSearch && matchesStatus
  })

const getStatusBadgeColor = (status: string) => {
    switch (status) {
      case "confirmed":
        return "bg-[#27AE60] text-white"
      case "pending":
        return "bg-yellow-500 text-white"
      case "completed":
        return "bg-[#2980B9] text-white"
      case "cancelled":
        return "bg-red-500 text-white"
      default:
        return "bg-gray-500 text-white"
    }
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-[#2C3E50]">Bookings</h1>
          <p className="text-[#7F8C8D]">Manage customer reservations and trips</p>
        </div>
      </div>

{/* Filters */}
      <Card>
        <CardContent className="pt-6">
          <div className="flex flex-col sm:flex-row gap-4">
            <div className="flex-1">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                <Input
                  placeholder="Search bookings..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10"
                />
              </div>
            </div>
            <div className="flex gap-2">
              <Select value={statusFilter} onValueChange={setStatusFilter}>
                <SelectTrigger className="w-40">
                  <Filter className="h-4 w-4 mr-2" />
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Status</SelectItem>
                  <SelectItem value="pending">Pending</SelectItem>
                  <SelectItem value="confirmed">Confirmed</SelectItem>
                  <SelectItem value="completed">Completed</SelectItem>
                  <SelectItem value="cancelled">Cancelled</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Bookings Table */}
      <Card>
        <CardHeader>
          <CardTitle>All Bookings ({filteredBookings.length})</CardTitle>
          <CardDescription>Customer reservations and trip details</CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Customer</TableHead>
                <TableHead>Trip Details</TableHead>
                <TableHead>Party Size</TableHead>
                <TableHead>Amount</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Booked</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredBookings.map((booking) => (
                <TableRow key={booking.id}>
                  <TableCell>
                    <div>
                      <div className="font-medium text-[#2C3E50]">
                        {booking.user.first_name} {booking.user.last_name}
                      </div>
                      <div className="text-sm text-[#7F8C8D]">{booking.user.email}</div>
                      <div className="text-xs text-[#7F8C8D] mt-1">QR: {booking.qr_code}</div>
                    </div>
                  </TableCell>
                  <TableCell>
                    <div className="space-y-1">
                      <div className="flex items-center gap-1 text-sm">
                        <Calendar className="h-3 w-3 text-[#7F8C8D]" />
                        <span>
                          {booking.trip.scheduled_date} at {booking.trip.scheduled_time}
                        </span>
                      </div>
                      <div className="flex items-center gap-1 text-sm text-[#7F8C8D]">
                        <MapPin className="h-3 w-3" />
                        <span>
                          {booking.trip.route.pickup_location.name} → {booking.trip.route.dropoff_location.name}
                        </span>
                      </div>
                      {booking.booking_menu_items.length > 0 && (
                        <div className="text-xs text-[#7F8C8D]">
                          Food:{" "}
                          {booking.booking_menu_items
                            .map((item) => `${item.menu_item.name} (${item.quantity})`)
                            .join(", ")}
                        </div>
                      )}
                    </div>
                  </TableCell>
                  <TableCell>
                    <div className="flex items-center gap-1">
                      <Users className="h-4 w-4 text-[#7F8C8D]" />
                      <span>{booking.party_size}</span>
                    </div>
                  </TableCell>
                  <TableCell>
                    <span className="font-medium">KSH {booking.total_amount.toLocaleString()}</span>
                  </TableCell>
                  <TableCell>
                    <Badge className={getStatusBadgeColor(booking.status)}>
                      {booking.status.charAt(0).toUpperCase() + booking.status.slice(1)}
                    </Badge>
                  </TableCell>
                  <TableCell>{new Date(booking.booked_at).toLocaleDateString()}</TableCell>
                  <TableCell className="text-right">
                    <Button variant="outline" size="sm" asChild>
                      <Link href={`/admin/bookings/${booking.id}`}>
                        <Eye className="h-4 w-4" />
                      </Link>
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>

{filteredBookings.length === 0 && (
            <div className="text-center py-8">
              <p className="text-[#7F8C8D]">No bookings found matching your criteria.</p>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/bookings/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/trips/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Plus, Search, Edit, Trash2, Filter, Calendar, MapPin, Users } from "lucide-react"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"

interface Trip {
  id: string
  route: {
    id: string
    name: string
    pickup_location: { name: string }
    dropoff_location: { name: string }
  }
  driver: {
    id: string
    first_name: string
    last_name: string
  }
  scheduled_date: string
  scheduled_time: string
  status: "scheduled" | "in_progress" | "completed" | "cancelled"
  current_capacity: number
  max_capacity: number
  created_at: string
}

export default function TripsPage() {
  const [trips, setTrips] = useState<Trip[]>([])
  const [loading, setLoading] = useState(true)
  const [searchTerm, setSearchTerm] = useState("")
  const [statusFilter, setStatusFilter] = useState<string>("all")
  const [dateFilter, setDateFilter] = useState<string>("")

// Mock data - replace with actual API calls
  useEffect(() => {
    const mockTrips: Trip[] = [
      {
        id: "1",
        route: {
          id: "route1",
          name: "City Center → Business District",
          pickup_location: { name: "City Center" },
          dropoff_location: { name: "Business District" },
        },
        driver: {
          id: "driver1",
          first_name: "James",
          last_name: "Mwangi",
        },
        scheduled_date: "2024-01-20",
        scheduled_time: "12:30",
        status: "scheduled",
        current_capacity: 8,
        max_capacity: 15,
        created_at: "2024-01-15T10:00:00Z",
      },
      {
        id: "2",
        route: {
          id: "route2",
          name: "University → Shopping Mall",
          pickup_location: { name: "University Campus" },
          dropoff_location: { name: "Shopping Mall" },
        },
        driver: {
          id: "driver2",
          first_name: "Mary",
          last_name: "Wanjiku",
        },
        scheduled_date: "2024-01-21",
        scheduled_time: "18:00",
        status: "in_progress",
        current_capacity: 12,
        max_capacity: 15,
        created_at: "2024-01-16T09:00:00Z",
      },
    ]

setTimeout(() => {
      setTrips(mockTrips)
      setLoading(false)
    }, 1000)
  }, [])

const handleDeleteTrip = async (tripId: string) => {
    // Mock delete - replace with actual API call
    setTrips(trips.filter((trip) => trip.id !== tripId))
  }

const filteredTrips = trips.filter((trip) => {
    const matchesSearch =
      trip.route.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      trip.driver.first_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      trip.driver.last_name.toLowerCase().includes(searchTerm.toLowerCase())

const matchesStatus = statusFilter === "all" || trip.status === statusFilter
    const matchesDate = !dateFilter || trip.scheduled_date === dateFilter

return matchesSearch && matchesStatus && matchesDate
  })

const getStatusBadgeColor = (status: string) => {
    switch (status) {
      case "scheduled":
        return "bg-blue-500 text-white"
      case "in_progress":
        return "bg-[#27AE60] text-white"
      case "completed":
        return "bg-[#2980B9] text-white"
      case "cancelled":
        return "bg-red-500 text-white"
      default:
        return "bg-gray-500 text-white"
    }
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-[#2C3E50]">Trips</h1>
          <p className="text-[#7F8C8D]">Manage scheduled food truck trips</p>
        </div>
        <Button asChild className="bg-[#27AE60] hover:bg-[#229954]">
          <Link href="/admin/trips/create">
            <Plus className="h-4 w-4 mr-2" />
            Schedule Trip
          </Link>
        </Button>
      </div>

{/* Filters */}
      <Card>
        <CardContent className="pt-6">
          <div className="flex flex-col sm:flex-row gap-4">
            <div className="flex-1">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                <Input
                  placeholder="Search trips..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10"
                />
              </div>
            </div>
            <div className="flex gap-2">
              <Select value={statusFilter} onValueChange={setStatusFilter}>
                <SelectTrigger className="w-40">
                  <Filter className="h-4 w-4 mr-2" />
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Status</SelectItem>
                  <SelectItem value="scheduled">Scheduled</SelectItem>
                  <SelectItem value="in_progress">In Progress</SelectItem>
                  <SelectItem value="completed">Completed</SelectItem>
                  <SelectItem value="cancelled">Cancelled</SelectItem>
                </SelectContent>
              </Select>
              <Input type="date" value={dateFilter} onChange={(e) => setDateFilter(e.target.value)} className="w-40" />
            </div>
          </div>
        </CardContent>
      </Card>

{/* Trips Table */}
      <Card>
        <CardHeader>
          <CardTitle>All Trips ({filteredTrips.length})</CardTitle>
          <CardDescription>Scheduled food truck trips and their details</CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Route</TableHead>
                <TableHead>Driver</TableHead>
                <TableHead>Schedule</TableHead>
                <TableHead>Capacity</TableHead>
                <TableHead>Status</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredTrips.map((trip) => (
                <TableRow key={trip.id}>
                  <TableCell>
                    <div className="space-y-1">
                      <div className="font-medium text-[#2C3E50]">{trip.route.name}</div>
                      <div className="flex items-center gap-1 text-sm text-[#7F8C8D]">
                        <MapPin className="h-3 w-3" />
                        <span>
                          {trip.route.pickup_location.name} → {trip.route.dropoff_location.name}
                        </span>
                      </div>
                    </div>
                  </TableCell>
                  <TableCell>
                    <div className="font-medium text-[#2C3E50]">
                      {trip.driver.first_name} {trip.driver.last_name}
                    </div>
                  </TableCell>
                  <TableCell>
                    <div className="space-y-1">
                      <div className="flex items-center gap-1 text-sm">
                        <Calendar className="h-3 w-3 text-[#7F8C8D]" />
                        <span>{trip.scheduled_date}</span>
                      </div>
                      <div className="text-sm text-[#7F8C8D]">{trip.scheduled_time}</div>
                    </div>
                  </TableCell>
                  <TableCell>
                    <div className="flex items-center gap-1">
                      <Users className="h-4 w-4 text-[#7F8C8D]" />
                      <span className="font-medium">
                        {trip.current_capacity}/{trip.max_capacity}
                      </span>
                    </div>
                    <div className="w-full bg-gray-200 rounded-full h-2 mt-1">
                      <div
                        className="bg-[#27AE60] h-2 rounded-full"
                        style={{ width: `${(trip.current_capacity / trip.max_capacity) * 100}%` }}
                      ></div>
                    </div>
                  </TableCell>
                  <TableCell>
                    <Badge className={getStatusBadgeColor(trip.status)}>
                      {trip.status.replace("_", " ").charAt(0).toUpperCase() + trip.status.replace("_", " ").slice(1)}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-right">
                    <div className="flex justify-end gap-2">
                      <Button variant="outline" size="sm" asChild>
                        <Link href={`/admin/trips/${trip.id}/edit`}>
                          <Edit className="h-4 w-4" />
                        </Link>
                      </Button>
                      <AlertDialog>
                        <AlertDialogTrigger asChild>
                          <Button variant="outline" size="sm" className="text-red-600 hover:bg-red-50 bg-transparent">
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </AlertDialogTrigger>
                        <AlertDialogContent>
                          <AlertDialogHeader>
                            <AlertDialogTitle>Delete Trip</AlertDialogTitle>
                            <AlertDialogDescription>
                              Are you sure you want to delete this trip? This action cannot be undone and will affect
                              existing bookings.
                            </AlertDialogDescription>
                          </AlertDialogHeader>
                          <AlertDialogFooter>
                            <AlertDialogCancel>Cancel</AlertDialogCancel>
                            <AlertDialogAction
                              onClick={() => handleDeleteTrip(trip.id)}
                              className="bg-red-600 hover:bg-red-700"
                            >
                              Delete
                            </AlertDialogAction>
                          </AlertDialogFooter>
                        </AlertDialogContent>
                      </AlertDialog>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>

{filteredTrips.length === 0 && (
            <div className="text-center py-8">
              <p className="text-[#7F8C8D]">No trips found matching your criteria.</p>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/trips/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="lib/api.ts" isMerged="true"
// API utility functions for admin dashboard

const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000/api"

class ApiError extends Error {
  constructor(
    public status: number,
    message: string,
  ) {
    super(message)
    this.name = "ApiError"
  }
}

async function apiRequest<T>(endpoint: string, options: RequestInit = {}): Promise<T> {
  const url = `${API_BASE_URL}${endpoint}`

const config: RequestInit = {
    headers: {
      "Content-Type": "application/json",
      ...options.headers,
    },
    ...options,
  }

try {
    const response = await fetch(url, config)

if (!response.ok) {
      const errorData = await response.json().catch(() => ({}))
      throw new ApiError(response.status, errorData.error || `HTTP ${response.status}: ${response.statusText}`)
    }

return await response.json()
  } catch (error) {
    if (error instanceof ApiError) {
      throw error
    }
    throw new ApiError(500, "Network error occurred")
  }
}

// User API functions
export const userApi = {
  getAll: (params?: { page?: number; limit?: number; role?: string }) =>
    apiRequest(`/users?${new URLSearchParams(params as any).toString()}`),

getById: (id: string) => apiRequest(`/users/${id}`),

create: (data: any) =>
    apiRequest(`/users`, {
      method: "POST",
      body: JSON.stringify(data),
    }),

update: (id: string, data: any) =>
    apiRequest(`/users/${id}`, {
      method: "PUT",
      body: JSON.stringify(data),
    }),

delete: (id: string) =>
    apiRequest(`/users/${id}`, {
      method: "DELETE",
    }),
}

// Pickup Locations API functions
export const pickupLocationApi = {
  getAll: (params?: { is_active?: boolean }) =>
    apiRequest(`/pickup-locations?${new URLSearchParams(params as any).toString()}`),

getById: (id: string) => apiRequest(`/pickup-locations/${id}`),

create: (data: any) =>
    apiRequest(`/pickup-locations`, {
      method: "POST",
      body: JSON.stringify(data),
    }),

update: (id: string, data: any) =>
    apiRequest(`/pickup-locations/${id}`, {
      method: "PUT",
      body: JSON.stringify(data),
    }),

delete: (id: string) =>
    apiRequest(`/pickup-locations/${id}`, {
      method: "DELETE",
    }),
}

// Routes API functions
export const routeApi = {
  getAll: (params?: { is_active?: boolean }) => apiRequest(`/routes?${new URLSearchParams(params as any).toString()}`),

getById: (id: string) => apiRequest(`/routes/${id}`),

create: (data: any) =>
    apiRequest(`/routes`, {
      method: "POST",
      body: JSON.stringify(data),
    }),

update: (id: string, data: any) =>
    apiRequest(`/routes/${id}`, {
      method: "PUT",
      body: JSON.stringify(data),
    }),

delete: (id: string) =>
    apiRequest(`/routes/${id}`, {
      method: "DELETE",
    }),
}

// Food Categories API functions
export const foodCategoryApi = {
  getAll: (params?: { is_active?: boolean }) =>
    apiRequest(`/food-categories?${new URLSearchParams(params as any).toString()}`),

getById: (id: string) => apiRequest(`/food-categories/${id}`),

create: (data: any) =>
    apiRequest(`/food-categories`, {
      method: "POST",
      body: JSON.stringify(data),
    }),

update: (id: string, data: any) =>
    apiRequest(`/food-categories/${id}`, {
      method: "PUT",
      body: JSON.stringify(data),
    }),

delete: (id: string) =>
    apiRequest(`/food-categories/${id}`, {
      method: "DELETE",
    }),
}

// Menu Items API functions
export const menuItemApi = {
  getAll: (params?: {
    category_id?: string
    is_available?: boolean
    is_vegetarian?: boolean
    is_vegan?: boolean
    page?: number
    limit?: number
  }) => apiRequest(`/menu-items?${new URLSearchParams(params as any).toString()}`),

getById: (id: string) => apiRequest(`/menu-items/${id}`),

create: (data: any) =>
    apiRequest(`/menu-items`, {
      method: "POST",
      body: JSON.stringify(data),
    }),

update: (id: string, data: any) =>
    apiRequest(`/menu-items/${id}`, {
      method: "PUT",
      body: JSON.stringify(data),
    }),

delete: (id: string) =>
    apiRequest(`/menu-items/${id}`, {
      method: "DELETE",
    }),
}

// Trips API functions
export const tripApi = {
  getAll: (params?: {
    driver_id?: string
    status?: string
    scheduled_date?: string
    page?: number
    limit?: number
  }) => apiRequest(`/trips?${new URLSearchParams(params as any).toString()}`),

getById: (id: string) => apiRequest(`/trips/${id}`),

create: (data: any) =>
    apiRequest(`/trips`, {
      method: "POST",
      body: JSON.stringify(data),
    }),

update: (id: string, data: any) =>
    apiRequest(`/trips/${id}`, {
      method: "PUT",
      body: JSON.stringify(data),
    }),

delete: (id: string) =>
    apiRequest(`/trips/${id}`, {
      method: "DELETE",
    }),
}

// Bookings API functions
export const bookingApi = {
  getAll: (params?: {
    user_id?: string
    trip_id?: string
    status?: string
    page?: number
    limit?: number
  }) => apiRequest(`/bookings?${new URLSearchParams(params as any).toString()}`),

getById: (id: string) => apiRequest(`/bookings/${id}`),

create: (data: any) =>
    apiRequest(`/bookings`, {
      method: "POST",
      body: JSON.stringify(data),
    }),

update: (id: string, data: any) =>
    apiRequest(`/bookings/${id}`, {
      method: "PUT",
      body: JSON.stringify(data),
    }),

cancel: (id: string) =>
    apiRequest(`/bookings/${id}`, {
      method: "DELETE",
    }),
}

// Notifications API functions
export const notificationApi = {
  getAll: (params: {
    user_id: string
    is_read?: boolean
    type?: string
    page?: number
    limit?: number
  }) => apiRequest(`/notifications?${new URLSearchParams(params as any).toString()}`),

getById: (id: string) => apiRequest(`/notifications/${id}`),

create: (data: any) =>
    apiRequest(`/notifications`, {
      method: "POST",
      body: JSON.stringify(data),
    }),

markAsRead: (id: string) =>
    apiRequest(`/notifications/${id}`, {
      method: "PUT",
      body: JSON.stringify({ is_read: true }),
    }),

markAllAsRead: (userId: string) =>
    apiRequest(`/notifications/mark-all-read`, {
      method: "PUT",
      body: JSON.stringify({ user_id: userId }),
    }),

delete: (id: string) =>
    apiRequest(`/notifications/${id}`, {
      method: "DELETE",
    }),
}

export { ApiError }
[V0_FILE]typescriptreact:file="app/admin/users/create/page.tsx" isEdit="true" isMerged="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 { 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 { Switch } from "@/components/ui/switch"
import { ArrowLeft, Save } from "lucide-react"
import { toast } from "sonner"

export default function CreateUserPage() {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [formData, setFormData] = useState({
    clerk_id: "",
    username: "",
    email: "",
    first_name: "",
    last_name: "",
    phone: "",
    role: "customer" as "customer" | "driver" | "admin",
    is_active: true,
  })

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

try {
      // Mock API call - replace with actual implementation
      await new Promise((resolve) => setTimeout(resolve, 1000))

toast.success("User created successfully")

router.push("/admin/users")
    } catch (error) {
      toast.error("Failed to create user")
    } finally {
      setLoading(false)
    }
  }

const handleInputChange = (field: string, value: string | boolean) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <Button variant="ghost" size="icon" asChild>
          <Link href="/admin/users">
            <ArrowLeft className="h-4 w-4" />
          </Link>
        </Button>
        <div>
          <h1 className="text-3xl font-bold text-[#2C3E50]">Create User</h1>
          <p className="text-[#7F8C8D]">Add a new user to the system</p>
        </div>
      </div>

{/* Form */}
      <Card className="max-w-2xl">
        <CardHeader>
          <CardTitle>User Information</CardTitle>
          <CardDescription>Enter the details for the new user</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="first_name">First Name *</Label>
                <Input
                  id="first_name"
                  value={formData.first_name}
                  onChange={(e) => handleInputChange("first_name", e.target.value)}
                  required
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="last_name">Last Name *</Label>
                <Input
                  id="last_name"
                  value={formData.last_name}
                  onChange={(e) => handleInputChange("last_name", e.target.value)}
                  required
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="username">Username</Label>
              <Input
                id="username"
                value={formData.username}
                onChange={(e) => handleInputChange("username", e.target.value)}
                placeholder="Optional username"
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="email">Email *</Label>
              <Input
                id="email"
                type="email"
                value={formData.email}
                onChange={(e) => handleInputChange("email", e.target.value)}
                required
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="phone">Phone Number</Label>
              <Input
                id="phone"
                type="tel"
                value={formData.phone}
                onChange={(e) => handleInputChange("phone", e.target.value)}
                placeholder="+254 700 000 000"
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="clerk_id">Clerk ID *</Label>
              <Input
                id="clerk_id"
                value={formData.clerk_id}
                onChange={(e) => handleInputChange("clerk_id", e.target.value)}
                placeholder="Clerk authentication ID"
                required
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="role">Role *</Label>
              <Select value={formData.role} onValueChange={(value) => handleInputChange("role", value)}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="customer">Customer</SelectItem>
                  <SelectItem value="driver">Driver</SelectItem>
                  <SelectItem value="admin">Admin</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="flex gap-4 pt-4">
              <Button type="submit" disabled={loading} className="bg-[#27AE60] hover:bg-[#229954]">
                <Save className="h-4 w-4 mr-2" />
                {loading ? "Creating..." : "Create User"}
              </Button>
              <Button type="button" variant="outline" asChild>
                <Link href="/admin/users">Cancel</Link>
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/users/[id]/edit/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
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 { Switch } from "@/components/ui/switch"
import { ArrowLeft, Save } from "lucide-react"
import { toast } from "sonner"

interface User {
  id: string
  clerk_id: string
  username?: string
  email: string
  first_name?: string
  last_name?: string
  phone?: string
  role: "customer" | "driver" | "admin"
  is_active: boolean
}

export default function EditUserPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [initialLoading, setInitialLoading] = useState(true)
  const [formData, setFormData] = useState<User>({
    id: "",
    clerk_id: "",
    username: "",
    email: "",
    first_name: "",
    last_name: "",
    phone: "",
    role: "customer",
    is_active: true,
  })

useEffect(() => {
    // Mock API call to fetch user data - replace with actual implementation
    const fetchUser = async () => {
      try {
        await new Promise((resolve) => setTimeout(resolve, 1000))

// Mock user data
        const mockUser: User = {
          id: params.id,
          clerk_id: "clerk_123",
          username: "johndoe",
          email: "john@example.com",
          first_name: "John",
          last_name: "Doe",
          phone: "+254700000001",
          role: "customer",
          is_active: true,
        }

setFormData(mockUser)
      } catch (error) {
        toast.error("Failed to load user data")
      } finally {
        setInitialLoading(false)
      }
    }

fetchUser()
  }, [params.id])

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

try {
      // Mock API call - replace with actual implementation
      await new Promise((resolve) => setTimeout(resolve, 1000))

toast.success("User updated successfully")

router.push("/admin/users")
    } catch (error) {
      toast.error("Failed to update user")
    } finally {
      setLoading(false)
    }
  }

const handleInputChange = (field: string, value: string | boolean) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

if (initialLoading) {
    return (
      <div className="space-y-6">
        <div className="h-8 bg-gray-200 rounded animate-pulse"></div>
        <div className="h-96 bg-gray-200 rounded animate-pulse"></div>
      </div>
    )
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <Button variant="ghost" size="icon" asChild>
          <Link href="/admin/users">
            <ArrowLeft className="h-4 w-4" />
          </Link>
        </Button>
        <div>
          <h1 className="text-3xl font-bold text-[#2C3E50]">Edit User</h1>
          <p className="text-[#7F8C8D]">Update user information</p>
        </div>
      </div>

{/* Form */}
      <Card className="max-w-2xl">
        <CardHeader>
          <CardTitle>User Information</CardTitle>
          <CardDescription>Update the user details below</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="first_name">First Name *</Label>
                <Input
                  id="first_name"
                  value={formData.first_name}
                  onChange={(e) => handleInputChange("first_name", e.target.value)}
                  required
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="last_name">Last Name *</Label>
                <Input
                  id="last_name"
                  value={formData.last_name}
                  onChange={(e) => handleInputChange("last_name", e.target.value)}
                  required
                />
              </div>
            </div>

<div className="flex gap-4 pt-4">
              <Button type="submit" disabled={loading} className="bg-[#27AE60] hover:bg-[#229954]">
                <Save className="h-4 w-4 mr-2" />
                {loading ? "Updating..." : "Update User"}
              </Button>
              <Button type="button" variant="outline" asChild>
                <Link href="/admin/users">Cancel</Link>
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/routes/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Plus, Search, Edit, Trash2, RouteIcon } from "lucide-react"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { toast } from "sonner"

interface Route {
  id: string
  name: string
  pickup_location: {
    id: string
    name: string
  }
  dropoff_location: {
    id: string
    name: string
  }
  duration_minutes: number
  price_per_person: number
  max_capacity: number
  is_active: boolean
  created_at: string
}

export default function RoutesPage() {
  const [routes, setRoutes] = useState<Route[]>([])
  const [loading, setLoading] = useState(true)
  const [searchTerm, setSearchTerm] = useState("")

// Mock data - replace with actual API calls
  useEffect(() => {
    const mockRoutes: Route[] = [
      {
        id: "1",
        name: "City Center to Business District",
        pickup_location: {
          id: "loc1",
          name: "City Center",
        },
        dropoff_location: {
          id: "loc2",
          name: "Business District",
        },
        duration_minutes: 30,
        price_per_person: 1000,
        max_capacity: 15,
        is_active: true,
        created_at: "2024-01-15T10:00:00Z",
      },
      {
        id: "2",
        name: "University to Shopping Mall",
        pickup_location: {
          id: "loc3",
          name: "University Campus",
        },
        dropoff_location: {
          id: "loc4",
          name: "Shopping Mall",
        },
        duration_minutes: 25,
        price_per_person: 800,
        max_capacity: 15,
        is_active: true,
        created_at: "2024-01-14T09:00:00Z",
      },
      {
        id: "3",
        name: "Shopping Mall to Residential Area",
        pickup_location: {
          id: "loc4",
          name: "Shopping Mall",
        },
        dropoff_location: {
          id: "loc5",
          name: "Residential Area A",
        },
        duration_minutes: 35,
        price_per_person: 1200,
        max_capacity: 15,
        is_active: false,
        created_at: "2024-01-13T08:00:00Z",
      },
    ]

setTimeout(() => {
      setRoutes(mockRoutes)
      setLoading(false)
    }, 1000)
  }, [])

const handleDeleteRoute = async (routeId: string) => {
    try {
      // Mock delete - replace with actual API call
      await new Promise((resolve) => setTimeout(resolve, 1000))
      setRoutes(routes.filter((route) => route.id !== routeId))
      toast.success("Route deleted successfully")
    } catch (error) {
      toast.error("Failed to delete route")
    }
  }

const filteredRoutes = routes.filter(
    (route) =>
      route.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      route.pickup_location.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      route.dropoff_location.name.toLowerCase().includes(searchTerm.toLowerCase()),
  )

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-[#2C3E50]">Routes</h1>
          <p className="text-[#7F8C8D]">Manage pickup and drop-off routes</p>
        </div>
        <Button asChild className="bg-[#27AE60] hover:bg-[#229954]">
          <Link href="/admin/routes/create">
            <Plus className="h-4 w-4 mr-2" />
            Add Route
          </Link>
        </Button>
      </div>

{/* Search */}
      <Card>
        <CardContent className="pt-6">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
            <Input
              placeholder="Search routes..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-10"
            />
          </div>
        </CardContent>
      </Card>

{/* Routes Table */}
      <Card>
        <CardHeader>
          <CardTitle>All Routes ({filteredRoutes.length})</CardTitle>
          <CardDescription>Manage pickup and drop-off routes</CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Route Name</TableHead>
                <TableHead>Pickup</TableHead>
                <TableHead>Drop-off</TableHead>
                <TableHead>Duration</TableHead>
                <TableHead>Price</TableHead>
                <TableHead>Status</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredRoutes.map((route) => (
                <TableRow key={route.id}>
                  <TableCell>
                    <div className="flex items-center gap-2">
                      <RouteIcon className="h-4 w-4 text-[#27AE60]" />
                      <span className="font-medium text-[#2C3E50]">{route.name}</span>
                    </div>
                  </TableCell>
                  <TableCell>{route.pickup_location.name}</TableCell>
                  <TableCell>{route.dropoff_location.name}</TableCell>
                  <TableCell>{route.duration_minutes} min</TableCell>
                  <TableCell>
                    <span className="font-medium">KSH {route.price_per_person}</span>
                  </TableCell>
                  <TableCell>
                    <Badge variant={route.is_active ? "default" : "secondary"}>
                      {route.is_active ? "Active" : "Inactive"}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-right">
                    <div className="flex justify-end gap-2">
                      <Button variant="outline" size="sm" asChild>
                        <Link href={`/admin/routes/${route.id}/edit`}>
                          <Edit className="h-4 w-4" />
                        </Link>
                      </Button>
                      <AlertDialog>
                        <AlertDialogTrigger asChild>
                          <Button variant="outline" size="sm" className="text-red-600 hover:bg-red-50 bg-transparent">
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </AlertDialogTrigger>
                        <AlertDialogContent>
                          <AlertDialogHeader>
                            <AlertDialogTitle>Delete Route</AlertDialogTitle>
                            <AlertDialogDescription>
                              Are you sure you want to delete "{route.name}"? This action cannot be undone and may
                              affect existing trips and bookings.
                            </AlertDialogDescription>
                          </AlertDialogHeader>
                          <AlertDialogFooter>
                            <AlertDialogCancel>Cancel</AlertDialogCancel>
                            <AlertDialogAction
                              onClick={() => handleDeleteRoute(route.id)}
                              className="bg-red-600 hover:bg-red-700"
                            >
                              Delete
                            </AlertDialogAction>
                          </AlertDialogFooter>
                        </AlertDialogContent>
                      </AlertDialog>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>

{filteredRoutes.length === 0 && (
            <div className="text-center py-8">
              <p className="text-[#7F8C8D]">No routes found matching your criteria.</p>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/routes/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/routes/create/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
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 { Switch } from "@/components/ui/switch"
import { ArrowLeft, Save, RouteIcon } from "lucide-react"
import { toast } from "sonner"

interface PickupLocation {
  id: string
  name: string
}

export default function CreateRoutePage() {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [locations, setLocations] = useState<PickupLocation[]>([])
  const [formData, setFormData] = useState({
    name: "",
    pickup_location_id: "",
    dropoff_location_id: "",
    duration_minutes: 30,
    price_per_person: 1000,
    max_capacity: 15,
    is_active: true,
  })

// Mock fetch locations - replace with actual API call
  useEffect(() => {
    const mockLocations: PickupLocation[] = [
      { id: "loc1", name: "City Center" },
      { id: "loc2", name: "Business District" },
      { id: "loc3", name: "University Campus" },
      { id: "loc4", name: "Shopping Mall" },
      { id: "loc5", name: "Residential Area A" },
    ]

setLocations(mockLocations)
  }, [])

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

try {
      // Validate that pickup and dropoff are different
      if (formData.pickup_location_id === formData.dropoff_location_id) {
        toast.error("Pickup and drop-off locations cannot be the same")
        setLoading(false)
        return
      }

// Mock API call - replace with actual implementation
      await new Promise((resolve) => setTimeout(resolve, 1000))

toast.success("Route created successfully")

router.push("/admin/routes")
    } catch (error) {
      toast.error("Failed to create route")
    } finally {
      setLoading(false)
    }
  }

const handleInputChange = (field: string, value: string | number | boolean) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <Button variant="ghost" size="icon" asChild>
          <Link href="/admin/routes">
            <ArrowLeft className="h-4 w-4" />
          </Link>
        </Button>
        <div>
          <h1 className="text-3xl font-bold text-[#2C3E50]">Create Route</h1>
          <p className="text-[#7F8C8D]">Add a new pickup and drop-off route</p>
        </div>
      </div>

{/* Form */}
      <Card className="max-w-2xl">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <RouteIcon className="h-5 w-5 text-[#27AE60]" />
            Route Information
          </CardTitle>
          <CardDescription>Enter the details for the new route</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-6">
            <div className="space-y-2">
              <Label htmlFor="name">Route Name *</Label>
              <Input
                id="name"
                value={formData.name}
                onChange={(e) => handleInputChange("name", e.target.value)}
                placeholder="e.g., City Center to Business District"
                required
              />
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="pickup_location_id">Pickup Location *</Label>
                <Select
                  value={formData.pickup_location_id}
                  onValueChange={(value) => handleInputChange("pickup_location_id", value)}
                  required
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Select pickup location" />
                  </SelectTrigger>
                  <SelectContent>
                    {locations.map((location) => (
                      <SelectItem key={location.id} value={location.id}>
                        {location.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label htmlFor="dropoff_location_id">Drop-off Location *</Label>
                <Select
                  value={formData.dropoff_location_id}
                  onValueChange={(value) => handleInputChange("dropoff_location_id", value)}
                  required
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Select drop-off location" />
                  </SelectTrigger>
                  <SelectContent>
                    {locations.map((location) => (
                      <SelectItem key={location.id} value={location.id}>
                        {location.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div className="space-y-2">
                <Label htmlFor="duration_minutes">Duration (minutes) *</Label>
                <Input
                  id="duration_minutes"
                  type="number"
                  min="1"
                  value={formData.duration_minutes}
                  onChange={(e) => handleInputChange("duration_minutes", Number.parseInt(e.target.value))}
                  required
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="price_per_person">Price (KSH) *</Label>
                <Input
                  id="price_per_person"
                  type="number"
                  min="0"
                  step="50"
                  value={formData.price_per_person}
                  onChange={(e) => handleInputChange("price_per_person", Number.parseInt(e.target.value))}
                  required
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="max_capacity">Max Capacity *</Label>
                <Input
                  id="max_capacity"
                  type="number"
                  min="1"
                  max="15"
                  value={formData.max_capacity}
                  onChange={(e) => handleInputChange("max_capacity", Number.parseInt(e.target.value))}
                  required
                />
              </div>
            </div>

<div className="flex gap-4 pt-4">
              <Button type="submit" disabled={loading} className="bg-[#27AE60] hover:bg-[#229954]">
                <Save className="h-4 w-4 mr-2" />
                {loading ? "Creating..." : "Create Route"}
              </Button>
              <Button type="button" variant="outline" asChild>
                <Link href="/admin/routes">Cancel</Link>
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/routes/[id]/edit/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
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 { Switch } from "@/components/ui/switch"
import { ArrowLeft, Save, RouteIcon } from "lucide-react"
import { toast } from "sonner"

interface PickupLocation {
  id: string
  name: string
}

interface Route {
  id: string
  name: string
  pickup_location_id: string
  dropoff_location_id: string
  duration_minutes: number
  price_per_person: number
  max_capacity: number
  is_active: boolean
}

export default function EditRoutePage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [initialLoading, setInitialLoading] = useState(true)
  const [locations, setLocations] = useState<PickupLocation[]>([])
  const [formData, setFormData] = useState<Route>({
    id: "",
    name: "",
    pickup_location_id: "",
    dropoff_location_id: "",
    duration_minutes: 30,
    price_per_person: 1000,
    max_capacity: 15,
    is_active: true,
  })

setLocations(mockLocations)
  }, [])

useEffect(() => {
    // Mock API call to fetch route data - replace with actual implementation
    const fetchRoute = async () => {
      try {
        await new Promise((resolve) => setTimeout(resolve, 1000))

// Mock route data
        const mockRoute: Route = {
          id: params.id,
          name: "City Center to Business District",
          pickup_location_id: "loc1",
          dropoff_location_id: "loc2",
          duration_minutes: 30,
          price_per_person: 1000,
          max_capacity: 15,
          is_active: true,
        }

setFormData(mockRoute)
      } catch (error) {
        toast.error("Failed to load route data")
      } finally {
        setInitialLoading(false)
      }
    }

fetchRoute()
  }, [params.id])

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

// Mock API call - replace with actual implementation
      await new Promise((resolve) => setTimeout(resolve, 1000))

toast.success("Route updated successfully")

router.push("/admin/routes")
    } catch (error) {
      toast.error("Failed to update route")
    } finally {
      setLoading(false)
    }
  }

const handleInputChange = (field: string, value: string | number | boolean) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

if (initialLoading) {
    return (
      <div className="space-y-6">
        <div className="h-8 bg-gray-200 rounded animate-pulse"></div>
        <div className="h-64 bg-gray-200 rounded animate-pulse"></div>
      </div>
    )
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <Button variant="ghost" size="icon" asChild>
          <Link href="/admin/routes">
            <ArrowLeft className="h-4 w-4" />
          </Link>
        </Button>
        <div>
          <h1 className="text-3xl font-bold text-[#2C3E50]">Edit Route</h1>
          <p className="text-[#7F8C8D]">Update route information</p>
        </div>
      </div>

{/* Form */}
      <Card className="max-w-2xl">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <RouteIcon className="h-5 w-5 text-[#27AE60]" />
            Route Information
          </CardTitle>
          <CardDescription>Update the details for this route</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-6">
            <div className="space-y-2">
              <Label htmlFor="name">Route Name *</Label>
              <Input
                id="name"
                value={formData.name}
                onChange={(e) => handleInputChange("name", e.target.value)}
                placeholder="e.g., City Center to Business District"
                required
              />
            </div>

<div className="flex gap-4 pt-4">
              <Button type="submit" disabled={loading} className="bg-[#27AE60] hover:bg-[#229954]">
                <Save className="h-4 w-4 mr-2" />
                {loading ? "Updating..." : "Update Route"}
              </Button>
              <Button type="button" variant="outline" asChild>
                <Link href="/admin/routes">Cancel</Link>
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/food-categories/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Plus, Search, Edit, Trash2, ChefHat, ArrowUpDown } from "lucide-react"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { toast } from "sonner"

interface FoodCategory {
  id: string
  name: string
  description?: string
  image_url?: string
  sort_order: number
  is_active: boolean
  created_at: string
}

export default function FoodCategoriesPage() {
  const [categories, setCategories] = useState<FoodCategory[]>([])
  const [loading, setLoading] = useState(true)
  const [searchTerm, setSearchTerm] = useState("")

// Mock data - replace with actual API calls
  useEffect(() => {
    const mockCategories: FoodCategory[] = [
      {
        id: "1",
        name: "Main Course",
        description: "Primary dishes for a complete meal",
        sort_order: 1,
        is_active: true,
        created_at: "2024-01-15T10:00:00Z",
      },
      {
        id: "2",
        name: "Sides",
        description: "Complementary dishes to accompany main courses",
        sort_order: 2,
        is_active: true,
        created_at: "2024-01-14T09:00:00Z",
      },
      {
        id: "3",
        name: "Salads",
        description: "Fresh and healthy options",
        sort_order: 3,
        is_active: true,
        created_at: "2024-01-13T08:00:00Z",
      },
      {
        id: "4",
        name: "Desserts",
        description: "Sweet treats to finish your meal",
        sort_order: 4,
        is_active: false,
        created_at: "2024-01-12T07:00:00Z",
      },
    ]

setTimeout(() => {
      setCategories(mockCategories)
      setLoading(false)
    }, 1000)
  }, [])

const handleDeleteCategory = async (categoryId: string) => {
    try {
      // Mock delete - replace with actual API call
      await new Promise((resolve) => setTimeout(resolve, 1000))
      setCategories(categories.filter((category) => category.id !== categoryId))
      toast.success("Category deleted successfully")
    } catch (error) {
      toast.error("Failed to delete category")
    }
  }

const filteredCategories = categories.filter((category) =>
    category.name.toLowerCase().includes(searchTerm.toLowerCase()),
  )

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-[#2C3E50]">Food Categories</h1>
          <p className="text-[#7F8C8D]">Manage menu categories</p>
        </div>
        <Button asChild className="bg-[#27AE60] hover:bg-[#229954]">
          <Link href="/admin/food-categories/create">
            <Plus className="h-4 w-4 mr-2" />
            Add Category
          </Link>
        </Button>
      </div>

{/* Search */}
      <Card>
        <CardContent className="pt-6">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
            <Input
              placeholder="Search categories..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-10"
            />
          </div>
        </CardContent>
      </Card>

{/* Categories Table */}
      <Card>
        <CardHeader>
          <CardTitle>All Categories ({filteredCategories.length})</CardTitle>
          <CardDescription>Manage food menu categories</CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Category Name</TableHead>
                <TableHead>Description</TableHead>
                <TableHead>
                  <div className="flex items-center">
                    Sort Order
                    <ArrowUpDown className="ml-2 h-4 w-4" />
                  </div>
                </TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Created</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredCategories.map((category) => (
                <TableRow key={category.id}>
                  <TableCell>
                    <div className="flex items-center gap-2">
                      <ChefHat className="h-4 w-4 text-[#27AE60]" />
                      <span className="font-medium text-[#2C3E50]">{category.name}</span>
                    </div>
                  </TableCell>
                  <TableCell>{category.description || "No description"}</TableCell>
                  <TableCell>{category.sort_order}</TableCell>
                  <TableCell>
                    <Badge variant={category.is_active ? "default" : "secondary"}>
                      {category.is_active ? "Active" : "Inactive"}
                    </Badge>
                  </TableCell>
                  <TableCell>{new Date(category.created_at).toLocaleDateString()}</TableCell>
                  <TableCell className="text-right">
                    <div className="flex justify-end gap-2">
                      <Button variant="outline" size="sm" asChild>
                        <Link href={`/admin/food-categories/${category.id}/edit`}>
                          <Edit className="h-4 w-4" />
                        </Link>
                      </Button>
                      <AlertDialog>
                        <AlertDialogTrigger asChild>
                          <Button variant="outline" size="sm" className="text-red-600 hover:bg-red-50 bg-transparent">
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </AlertDialogTrigger>
                        <AlertDialogContent>
                          <AlertDialogHeader>
                            <AlertDialogTitle>Delete Category</AlertDialogTitle>
                            <AlertDialogDescription>
                              Are you sure you want to delete "{category.name}"? This action cannot be undone and will
                              affect all menu items in this category.
                            </AlertDialogDescription>
                          </AlertDialogHeader>
                          <AlertDialogFooter>
                            <AlertDialogCancel>Cancel</AlertDialogCancel>
                            <AlertDialogAction
                              onClick={() => handleDeleteCategory(category.id)}
                              className="bg-red-600 hover:bg-red-700"
                            >
                              Delete
                            </AlertDialogAction>
                          </AlertDialogFooter>
                        </AlertDialogContent>
                      </AlertDialog>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>

{filteredCategories.length === 0 && (
            <div className="text-center py-8">
              <p className="text-[#7F8C8D]">No categories found matching your criteria.</p>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/food-categories/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/food-categories/create/page.tsx" isMerged="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 { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Switch } from "@/components/ui/switch"
import { ArrowLeft, Save, ChefHat } from "lucide-react"
import { toast } from "sonner"

export default function CreateFoodCategoryPage() {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [formData, setFormData] = useState({
    name: "",
    description: "",
    image_url: "",
    sort_order: 0,
    is_active: true,
  })

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

try {
      // Mock API call - replace with actual implementation
      await new Promise((resolve) => setTimeout(resolve, 1000))

toast.success("Food category created successfully")

router.push("/admin/food-categories")
    } catch (error) {
      toast.error("Failed to create food category")
    } finally {
      setLoading(false)
    }
  }

const handleInputChange = (field: string, value: string | number | boolean) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <Button variant="ghost" size="icon" asChild>
          <Link href="/admin/food-categories">
            <ArrowLeft className="h-4 w-4" />
          </Link>
        </Button>
        <div>
          <h1 className="text-3xl font-bold text-[#2C3E50]">Create Food Category</h1>
          <p className="text-[#7F8C8D]">Add a new food menu category</p>
        </div>
      </div>

{/* Form */}
      <Card className="max-w-2xl">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <ChefHat className="h-5 w-5 text-[#27AE60]" />
            Category Information
          </CardTitle>
          <CardDescription>Enter the details for the new food category</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-6">
            <div className="space-y-2">
              <Label htmlFor="name">Category Name *</Label>
              <Input
                id="name"
                value={formData.name}
                onChange={(e) => handleInputChange("name", e.target.value)}
                placeholder="e.g., Main Course, Desserts, Beverages"
                required
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="description">Description</Label>
              <Textarea
                id="description"
                value={formData.description}
                onChange={(e) => handleInputChange("description", e.target.value)}
                placeholder="Brief description of this category"
                rows={3}
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="image_url">Image URL</Label>
              <Input
                id="image_url"
                value={formData.image_url}
                onChange={(e) => handleInputChange("image_url", e.target.value)}
                placeholder="https://example.com/image.jpg"
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="sort_order">Sort Order</Label>
              <Input
                id="sort_order"
                type="number"
                min="0"
                value={formData.sort_order}
                onChange={(e) => handleInputChange("sort_order", Number.parseInt(e.target.value))}
                placeholder="Display order (lower numbers appear first)"
              />
              <p className="text-sm text-[#7F8C8D]">Lower numbers will appear first in the menu</p>
            </div>

<div className="flex gap-4 pt-4">
              <Button type="submit" disabled={loading} className="bg-[#27AE60] hover:bg-[#229954]">
                <Save className="h-4 w-4 mr-2" />
                {loading ? "Creating..." : "Create Category"}
              </Button>
              <Button type="button" variant="outline" asChild>
                <Link href="/admin/food-categories">Cancel</Link>
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/food-categories/[id]/edit/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
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 { Textarea } from "@/components/ui/textarea"
import { Switch } from "@/components/ui/switch"
import { ArrowLeft, Save, ChefHat } from "lucide-react"
import { toast } from "sonner"

interface FoodCategory {
  id: string
  name: string
  description?: string
  image_url?: string
  sort_order: number
  is_active: boolean
}

export default function EditFoodCategoryPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [initialLoading, setInitialLoading] = useState(true)
  const [formData, setFormData] = useState<FoodCategory>({
    id: "",
    name: "",
    description: "",
    image_url: "",
    sort_order: 0,
    is_active: true,
  })

useEffect(() => {
    // Mock API call to fetch category data - replace with actual implementation
    const fetchCategory = async () => {
      try {
        await new Promise((resolve) => setTimeout(resolve, 1000))

// Mock category data
        const mockCategory: FoodCategory = {
          id: params.id,
          name: "Main Course",
          description: "Primary dishes for a complete meal",
          image_url: "",
          sort_order: 1,
          is_active: true,
        }

setFormData(mockCategory)
      } catch (error) {
        toast.error("Failed to load category data")
      } finally {
        setInitialLoading(false)
      }
    }

fetchCategory()
  }, [params.id])

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

try {
      // Mock API call - replace with actual implementation
      await new Promise((resolve) => setTimeout(resolve, 1000))

toast.success("Food category updated successfully")

router.push("/admin/food-categories")
    } catch (error) {
      toast.error("Failed to update food category")
    } finally {
      setLoading(false)
    }
  }

const handleInputChange = (field: string, value: string | number | boolean) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <Button variant="ghost" size="icon" asChild>
          <Link href="/admin/food-categories">
            <ArrowLeft className="h-4 w-4" />
          </Link>
        </Button>
        <div>
          <h1 className="text-3xl font-bold text-[#2C3E50]">Edit Food Category</h1>
          <p className="text-[#7F8C8D]">Update food category information</p>
        </div>
      </div>

{/* Form */}
      <Card className="max-w-2xl">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <ChefHat className="h-5 w-5 text-[#27AE60]" />
            Category Information
          </CardTitle>
          <CardDescription>Update the details for this food category</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-6">
            <div className="space-y-2">
              <Label htmlFor="name">Category Name *</Label>
              <Input
                id="name"
                value={formData.name}
                onChange={(e) => handleInputChange("name", e.target.value)}
                placeholder="e.g., Main Course, Desserts, Beverages"
                required
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="description">Description</Label>
              <Textarea
                id="description"
                value={formData.description || ""}
                onChange={(e) => handleInputChange("description", e.target.value)}
                placeholder="Brief description of this category"
                rows={3}
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="image_url">Image URL</Label>
              <Input
                id="image_url"
                value={formData.image_url || ""}
                onChange={(e) => handleInputChange("image_url", e.target.value)}
                placeholder="https://example.com/image.jpg"
              />
            </div>

<div className="flex gap-4 pt-4">
              <Button type="submit" disabled={loading} className="bg-[#27AE60] hover:bg-[#229954]">
                <Save className="h-4 w-4 mr-2" />
                {loading ? "Updating..." : "Update Category"}
              </Button>
              <Button type="button" variant="outline" asChild>
                <Link href="/admin/food-categories">Cancel</Link>
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/menu-items/[id]/edit/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
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 { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { ArrowLeft, Save, ChefHat } from "lucide-react"
import { toast } from "sonner"

interface FoodCategory {
  id: string
  name: string
}

export default function EditMenuItemPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [initialLoading, setInitialLoading] = useState(true)
  const [categories, setCategories] = useState<FoodCategory[]>([])
  const [formData, setFormData] = useState<MenuItem>({
    id: "",
    category_id: "",
    name: "",
    description: "",
    price: 0,
    image_url: "",
    ingredients: [],
    allergens: [],
    is_vegetarian: false,
    is_vegan: false,
    is_available: true,
    preparation_time: 0,
    sort_order: 0,
  })

// Mock fetch categories - replace with actual API call
  useEffect(() => {
    const mockCategories: FoodCategory[] = [
      { id: "cat1", name: "Main Course" },
      { id: "cat2", name: "Sides" },
      { id: "cat3", name: "Salads" },
      { id: "cat4", name: "Desserts" },
    ]

setCategories(mockCategories)
  }, [])

useEffect(() => {
    // Mock API call to fetch menu item data - replace with actual implementation
    const fetchMenuItem = async () => {
      try {
        await new Promise((resolve) => setTimeout(resolve, 1000))

// Mock menu item data
        const mockMenuItem: MenuItem = {
          id: params.id,
          category_id: "cat1",
          name: "Gourmet Burger",
          description: "Premium beef patty with artisan toppings",
          price: 800,
          image_url: "",
          ingredients: ["Beef", "Lettuce", "Tomato", "Cheese", "Bun"],
          allergens: ["Gluten", "Dairy"],
          is_vegetarian: false,
          is_vegan: false,
          is_available: true,
          preparation_time: 15,
          sort_order: 1,
        }

setFormData(mockMenuItem)
      } catch (error) {
        toast.error("Failed to load menu item data")
      } finally {
        setInitialLoading(false)
      }
    }

fetchMenuItem()
  }, [params.id])

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

try {
      // Mock API call - replace with actual implementation
      await new Promise((resolve) => setTimeout(resolve, 1000))

toast.success("Menu item updated successfully")

router.push("/admin/menu-items")
    } catch (error) {
      toast.error("Failed to update menu item")
    } finally {
      setLoading(false)
    }
  }

const handleInputChange = (field: string, value: string | number | boolean | string[]) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <Button variant="ghost" size="icon" asChild>
          <Link href="/admin/menu-items">
            <ArrowLeft className="h-4 w-4" />
          </Link>
        </Button>
        <div>
          <h1 className="text-3xl font-bold text-[#2C3E50]">Edit Menu Item</h1>
          <p className="text-[#7F8C8D]">Update menu item information</p>
        </div>
      </div>

{/* Form */}
      <Card className="max-w-2xl">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <ChefHat className="h-5 w-5 text-[#27AE60]" />
            Menu Item Information
          </CardTitle>
          <CardDescription>Update the details for this menu item</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-6">
            <div className="space-y-2">
              <Label htmlFor="name">Item Name *</Label>
              <Input
                id="name"
                value={formData.name}
                onChange={(e) => handleInputChange("name", e.target.value)}
                placeholder="e.g., Gourmet Burger, Caesar Salad"
                required
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="category_id">Category *</Label>
              <Select
                value={formData.category_id}
                onValueChange={(value) => handleInputChange("category_id", value)}
                required
              >
                <SelectTrigger>
                  <SelectValue placeholder="Select category" />
                </SelectTrigger>
                <SelectContent>
                  {categories.map((category) => (
                    <SelectItem key={category.id} value={category.id}>
                      {category.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label htmlFor="description">Description</Label>
              <Textarea
                id="description"
                value={formData.description || ""}
                onChange={(e) => handleInputChange("description", e.target.value)}
                placeholder="Brief description of this menu item"
                rows={3}
              />
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="price">Price (KSH) *</Label>
                <Input
                  id="price"
                  type="number"
                  min="0"
                  step="50"
                  value={formData.price}
                  onChange={(e) => handleInputChange("price", Number.parseInt(e.target.value))}
                  required
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="preparation_time">Preparation Time (minutes)</Label>
                <Input
                  id="preparation_time"
                  type="number"
                  min="0"
                  value={formData.preparation_time}
                  onChange={(e) => handleInputChange("preparation_time", Number.parseInt(e.target.value))}
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="ingredients">Ingredients</Label>
              <Input
                id="ingredients"
                value={formData.ingredients?.join(", ") || ""}
                onChange={(e) => handleInputChange("ingredients", e.target.value.split(", ").filter(Boolean))}
                placeholder="Comma-separated list of ingredients"
              />
              <p className="text-sm text-[#7F8C8D]">Enter ingredients separated by commas</p>
            </div>

<div className="space-y-2">
              <Label htmlFor="allergens">Allergens</Label>
              <Input
                id="allergens"
                value={formData.allergens?.join(", ") || ""}
                onChange={(e) => handleInputChange("allergens", e.target.value.split(", ").filter(Boolean))}
                placeholder="Comma-separated list of allergens"
              />
              <p className="text-sm text-[#7F8C8D]">Enter allergens separated by commas</p>
            </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div className="flex items-center space-x-2">
                <Switch
                  id="is_vegetarian"
                  checked={formData.is_vegetarian}
                  onCheckedChange={(checked) => handleInputChange("is_vegetarian", checked)}
                />
                <Label htmlFor="is_vegetarian">Vegetarian</Label>
              </div>
              <div className="flex items-center space-x-2">
                <Switch
                  id="is_vegan"
                  checked={formData.is_vegan}
                  onCheckedChange={(checked) => handleInputChange("is_vegan", checked)}
                />
                <Label htmlFor="is_vegan">Vegan</Label>
              </div>
              <div className="flex items-center space-x-2">
                <Switch
                  id="is_available"
                  checked={formData.is_available}
                  onCheckedChange={(checked) => handleInputChange("is_available", checked)}
                />
                <Label htmlFor="is_available">Available</Label>
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="sort_order">Sort Order</Label>
              <Input
                id="sort_order"
                type="number"
                min="0"
                value={formData.sort_order}
                onChange={(e) => handleInputChange("sort_order", Number.parseInt(e.target.value))}
                placeholder="Display order within category"
              />
            </div>

<div className="flex gap-4 pt-4">
              <Button type="submit" disabled={loading} className="bg-[#27AE60] hover:bg-[#229954]">
                <Save className="h-4 w-4 mr-2" />
                {loading ? "Updating..." : "Update Menu Item"}
              </Button>
              <Button type="button" variant="outline" asChild>
                <Link href="/admin/menu-items">Cancel</Link>
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/menu-items/create/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
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 { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { ArrowLeft, Save, ChefHat } from "lucide-react"
import { toast } from "sonner"

interface FoodCategory {
  id: string
  name: string
}

export default function CreateMenuItemPage() {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [categories, setCategories] = useState<FoodCategory[]>([])
  const [formData, setFormData] = useState({
    category_id: "",
    name: "",
    description: "",
    price: 0,
    image_url: "",
    ingredients: [] as string[],
    allergens: [] as string[],
    is_vegetarian: false,
    is_vegan: false,
    is_available: true,
    preparation_time: 0,
    sort_order: 0,
  })

setCategories(mockCategories)
  }, [])

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

try {
      // Mock API call - replace with actual implementation
      await new Promise((resolve) => setTimeout(resolve, 1000))

toast.success("Menu item created successfully")

router.push("/admin/menu-items")
    } catch (error) {
      toast.error("Failed to create menu item")
    } finally {
      setLoading(false)
    }
  }

const handleInputChange = (field: string, value: string | number | boolean | string[]) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <Button variant="ghost" size="icon" asChild>
          <Link href="/admin/menu-items">
            <ArrowLeft className="h-4 w-4" />
          </Link>
        </Button>
        <div>
          <h1 className="text-3xl font-bold text-[#2C3E50]">Create Menu Item</h1>
          <p className="text-[#7F8C8D]">Add a new menu item</p>
        </div>
      </div>

{/* Form */}
      <Card className="max-w-2xl">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <ChefHat className="h-5 w-5 text-[#27AE60]" />
            Menu Item Information
          </CardTitle>
          <CardDescription>Enter the details for the new menu item</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-6">
            <div className="space-y-2">
              <Label htmlFor="name">Item Name *</Label>
              <Input
                id="name"
                value={formData.name}
                onChange={(e) => handleInputChange("name", e.target.value)}
                placeholder="e.g., Gourmet Burger, Caesar Salad"
                required
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="description">Description</Label>
              <Textarea
                id="description"
                value={formData.description}
                onChange={(e) => handleInputChange("description", e.target.value)}
                placeholder="Brief description of this menu item"
                rows={3}
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="ingredients">Ingredients</Label>
              <Input
                id="ingredients"
                value={formData.ingredients.join(", ")}
                onChange={(e) => handleInputChange("ingredients", e.target.value.split(", ").filter(Boolean))}
                placeholder="Comma-separated list of ingredients"
              />
              <p className="text-sm text-[#7F8C8D]">Enter ingredients separated by commas</p>
            </div>

<div className="space-y-2">
              <Label htmlFor="allergens">Allergens</Label>
              <Input
                id="allergens"
                value={formData.allergens.join(", ")}
                onChange={(e) => handleInputChange("allergens", e.target.value.split(", ").filter(Boolean))}
                placeholder="Comma-separated list of allergens"
              />
              <p className="text-sm text-[#7F8C8D]">Enter allergens separated by commas</p>
            </div>

<div className="space-y-2">
              <Label htmlFor="sort_order">Sort Order</Label>
              <Input
                id="sort_order"
                type="number"
                min="0"
                value={formData.sort_order}
                onChange={(e) => handleInputChange("sort_order", Number.parseInt(e.target.value))}
                placeholder="Display order within category"
              />
            </div>

<div className="flex gap-4 pt-4">
              <Button type="submit" disabled={loading} className="bg-[#27AE60] hover:bg-[#229954]">
                <Save className="h-4 w-4 mr-2" />
                {loading ? "Creating..." : "Create Menu Item"}
              </Button>
              <Button type="button" variant="outline" asChild>
                <Link href="/admin/menu-items">Cancel</Link>
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/trips/[id]/edit/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
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 { ArrowLeft, Save, Calendar } from "lucide-react"
import { toast } from "sonner"

interface Route {
  id: string
  name: string
}

interface Driver {
  id: string
  first_name: string
  last_name: string
}

interface Trip {
  id: string
  route_id: string
  driver_id: string
  scheduled_date: string
  scheduled_time: string
  status: "scheduled" | "in_progress" | "completed" | "cancelled"
  current_capacity: number
  max_capacity: number
  notes?: string
}

export default function EditTripPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [initialLoading, setInitialLoading] = useState(true)
  const [routes, setRoutes] = useState<Route[]>([])
  const [drivers, setDrivers] = useState<Driver[]>([])
  const [formData, setFormData] = useState<Trip>({
    id: "",
    route_id: "",
    driver_id: "",
    scheduled_date: "",
    scheduled_time: "",
    status: "scheduled",
    current_capacity: 0,
    max_capacity: 15,
    notes: "",
  })

// Mock fetch routes and drivers - replace with actual API calls
  useEffect(() => {
    const mockRoutes: Route[] = [
      { id: "route1", name: "City Center → Business District" },
      { id: "route2", name: "University → Shopping Mall" },
      { id: "route3", name: "Shopping Mall → Residential Area" },
    ]

const mockDrivers: Driver[] = [
      { id: "driver1", first_name: "James", last_name: "Mwangi" },
      { id: "driver2", first_name: "Mary", last_name: "Wanjiku" },
    ]

setRoutes(mockRoutes)
    setDrivers(mockDrivers)
  }, [])

useEffect(() => {
    // Mock API call to fetch trip data - replace with actual implementation
    const fetchTrip = async () => {
      try {
        await new Promise((resolve) => setTimeout(resolve, 1000))

// Mock trip data
        const mockTrip: Trip = {
          id: params.id,
          route_id: "route1",
          driver_id: "driver1",
          scheduled_date: "2024-01-20",
          scheduled_time: "12:30",
          status: "scheduled",
          current_capacity: 8,
          max_capacity: 15,
          notes: "Regular weekday trip",
        }

setFormData(mockTrip)
      } catch (error) {
        toast.error("Failed to load trip data")
      } finally {
        setInitialLoading(false)
      }
    }

fetchTrip()
  }, [params.id])

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

try {
      // Mock API call - replace with actual implementation
      await new Promise((resolve) => setTimeout(resolve, 1000))

toast.success("Trip updated successfully")

router.push("/admin/trips")
    } catch (error) {
      toast.error("Failed to update trip")
    } finally {
      setLoading(false)
    }
  }

const handleInputChange = (field: string, value: string | number) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <Button variant="ghost" size="icon" asChild>
          <Link href="/admin/trips">
            <ArrowLeft className="h-4 w-4" />
          </Link>
        </Button>
        <div>
          <h1 className="text-3xl font-bold text-[#2C3E50]">Edit Trip</h1>
          <p className="text-[#7F8C8D]">Update trip information</p>
        </div>
      </div>

{/* Form */}
      <Card className="max-w-2xl">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Calendar className="h-5 w-5 text-[#27AE60]" />
            Trip Information
          </CardTitle>
          <CardDescription>Update the details for this trip</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-6">
            <div className="space-y-2">
              <Label htmlFor="route_id">Route *</Label>
              <Select
                value={formData.route_id}
                onValueChange={(value) => handleInputChange("route_id", value)}
                required
              >
                <SelectTrigger>
                  <SelectValue placeholder="Select route" />
                </SelectTrigger>
                <SelectContent>
                  {routes.map((route) => (
                    <SelectItem key={route.id} value={route.id}>
                      {route.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label htmlFor="driver_id">Driver *</Label>
              <Select
                value={formData.driver_id}
                onValueChange={(value) => handleInputChange("driver_id", value)}
                required
              >
                <SelectTrigger>
                  <SelectValue placeholder="Select driver" />
                </SelectTrigger>
                <SelectContent>
                  {drivers.map((driver) => (
                    <SelectItem key={driver.id} value={driver.id}>
                      {driver.first_name} {driver.last_name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="scheduled_date">Date *</Label>
                <Input
                  id="scheduled_date"
                  type="date"
                  value={formData.scheduled_date}
                  onChange={(e) => handleInputChange("scheduled_date", e.target.value)}
                  required
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="scheduled_time">Time *</Label>
                <Input
                  id="scheduled_time"
                  type="time"
                  value={formData.scheduled_time}
                  onChange={(e) => handleInputChange("scheduled_time", e.target.value)}
                  required
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="status">Status *</Label>
              <Select value={formData.status} onValueChange={(value) => handleInputChange("status", value)} required>
                <SelectTrigger>
                  <SelectValue placeholder="Select status" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="scheduled">Scheduled</SelectItem>
                  <SelectItem value="in_progress">In Progress</SelectItem>
                  <SelectItem value="completed">Completed</SelectItem>
                  <SelectItem value="cancelled">Cancelled</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="current_capacity">Current Capacity</Label>
                <Input
                  id="current_capacity"
                  type="number"
                  min="0"
                  max={formData.max_capacity}
                  value={formData.current_capacity}
                  onChange={(e) => handleInputChange("current_capacity", Number.parseInt(e.target.value))}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="max_capacity">Max Capacity *</Label>
                <Input
                  id="max_capacity"
                  type="number"
                  min="1"
                  max="15"
                  value={formData.max_capacity}
                  onChange={(e) => handleInputChange("max_capacity", Number.parseInt(e.target.value))}
                  required
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="notes">Notes</Label>
              <Input
                id="notes"
                value={formData.notes || ""}
                onChange={(e) => handleInputChange("notes", e.target.value)}
                placeholder="Additional information about this trip"
              />
            </div>

<div className="flex gap-4 pt-4">
              <Button type="submit" disabled={loading} className="bg-[#27AE60] hover:bg-[#229954]">
                <Save className="h-4 w-4 mr-2" />
                {loading ? "Updating..." : "Update Trip"}
              </Button>
              <Button type="button" variant="outline" asChild>
                <Link href="/admin/trips">Cancel</Link>
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/trips/create/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
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 { ArrowLeft, Save, Calendar } from "lucide-react"
import { toast } from "sonner"

interface Route {
  id: string
  name: string
}

interface Driver {
  id: string
  first_name: string
  last_name: string
}

export default function CreateTripPage() {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [routes, setRoutes] = useState<Route[]>([])
  const [drivers, setDrivers] = useState<Driver[]>([])
  const [formData, setFormData] = useState({
    route_id: "",
    driver_id: "",
    scheduled_date: "",
    scheduled_time: "",
    status: "scheduled",
    max_capacity: 15,
    notes: "",
  })

const mockDrivers: Driver[] = [
      { id: "driver1", first_name: "James", last_name: "Mwangi" },
      { id: "driver2", first_name: "Mary", last_name: "Wanjiku" },
    ]

setRoutes(mockRoutes)
    setDrivers(mockDrivers)
  }, [])

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

try {
      // Mock API call - replace with actual implementation
      await new Promise((resolve) => setTimeout(resolve, 1000))

toast.success("Trip created successfully")

router.push("/admin/trips")
    } catch (error) {
      toast.error("Failed to create trip")
    } finally {
      setLoading(false)
    }
  }

const handleInputChange = (field: string, value: string | number) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <Button variant="ghost" size="icon" asChild>
          <Link href="/admin/trips">
            <ArrowLeft className="h-4 w-4" />
          </Link>
        </Button>
        <div>
          <h1 className="text-3xl font-bold text-[#2C3E50]">Schedule Trip</h1>
          <p className="text-[#7F8C8D]">Create a new trip</p>
        </div>
      </div>

{/* Form */}
      <Card className="max-w-2xl">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Calendar className="h-5 w-5 text-[#27AE60]" />
            Trip Information
          </CardTitle>
          <CardDescription>Enter the details for the new trip</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-6">
            <div className="space-y-2">
              <Label htmlFor="route_id">Route *</Label>
              <Select
                value={formData.route_id}
                onValueChange={(value) => handleInputChange("route_id", value)}
                required
              >
                <SelectTrigger>
                  <SelectValue placeholder="Select route" />
                </SelectTrigger>
                <SelectContent>
                  {routes.map((route) => (
                    <SelectItem key={route.id} value={route.id}>
                      {route.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label htmlFor="max_capacity">Max Capacity *</Label>
              <Input
                id="max_capacity"
                type="number"
                min="1"
                max="15"
                value={formData.max_capacity}
                onChange={(e) => handleInputChange("max_capacity", Number.parseInt(e.target.value))}
                required
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="notes">Notes</Label>
              <Input
                id="notes"
                value={formData.notes}
                onChange={(e) => handleInputChange("notes", e.target.value)}
                placeholder="Additional information about this trip"
              />
            </div>

<div className="flex gap-4 pt-4">
              <Button type="submit" disabled={loading} className="bg-[#27AE60] hover:bg-[#229954]">
                <Save className="h-4 w-4 mr-2" />
                {loading ? "Creating..." : "Schedule Trip"}
              </Button>
              <Button type="button" variant="outline" asChild>
                <Link href="/admin/trips">Cancel</Link>
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/notifications/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Plus, Search, Edit, Trash2, Bell, Filter, CheckCircle } from "lucide-react"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { toast } from "sonner"

interface Notification {
  id: string
  user_id: string
  title: string
  message: string
  type: string
  is_read: boolean
  user: {
    first_name: string
    last_name: string
    email: string
  }
  created_at: string
}

export default function NotificationsPage() {
  const [notifications, setNotifications] = useState<Notification[]>([])
  const [loading, setLoading] = useState(true)
  const [searchTerm, setSearchTerm] = useState("")
  const [typeFilter, setTypeFilter] = useState<string>("all")
  const [readFilter, setReadFilter] = useState<string>("all")

// Mock data - replace with actual API calls
  useEffect(() => {
    const mockNotifications: Notification[] = [
      {
        id: "1",
        user_id: "user1",
        title: "Booking Confirmation",
        message: "Your booking #RD001 has been confirmed",
        type: "booking_confirmation",
        is_read: true,
        user: {
          first_name: "John",
          last_name: "Doe",
          email: "john@example.com",
        },
        created_at: "2024-01-15T10:00:00Z",
      },
      {
        id: "2",
        user_id: "user2",
        title: "Trip Update",
        message: "Your trip scheduled for today will be delayed by 10 minutes",
        type: "delay_alert",
        is_read: false,
        user: {
          first_name: "Jane",
          last_name: "Smith",
          email: "jane@example.com",
        },
        created_at: "2024-01-16T09:00:00Z",
      },
      {
        id: "3",
        user_id: "user3",
        title: "New Promotion",
        message: "Enjoy 20% off on your next booking with code RIDE20",
        type: "announcement",
        is_read: false,
        user: {
          first_name: "Mike",
          last_name: "Johnson",
          email: "mike@example.com",
        },
        created_at: "2024-01-17T08:00:00Z",
      },
    ]

setTimeout(() => {
      setNotifications(mockNotifications)
      setLoading(false)
    }, 1000)
  }, [])

const handleDeleteNotification = async (notificationId: string) => {
    try {
      // Mock delete - replace with actual API call
      await new Promise((resolve) => setTimeout(resolve, 1000))
      setNotifications(notifications.filter((notification) => notification.id !== notificationId))
      toast.success("Notification deleted successfully")
    } catch (error) {
      toast.error("Failed to delete notification")
    }
  }

const handleMarkAsRead = async (notificationId: string) => {
    try {
      // Mock update - replace with actual API call
      await new Promise((resolve) => setTimeout(resolve, 500))
      setNotifications(
        notifications.map((notification) =>
          notification.id === notificationId ? { ...notification, is_read: true } : notification,
        ),
      )
      toast.success("Notification marked as read")
    } catch (error) {
      toast.error("Failed to update notification")
    }
  }

const filteredNotifications = notifications.filter((notification) => {
    const matchesSearch =
      notification.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      notification.message.toLowerCase().includes(searchTerm.toLowerCase()) ||
      notification.user.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
      `${notification.user.first_name} ${notification.user.last_name}`.toLowerCase().includes(searchTerm.toLowerCase())

const matchesType = typeFilter === "all" || notification.type === typeFilter
    const matchesRead =
      readFilter === "all" ||
      (readFilter === "read" && notification.is_read) ||
      (readFilter === "unread" && !notification.is_read)

return matchesSearch && matchesType && matchesRead
  })

const getTypeBadgeColor = (type: string) => {
    switch (type) {
      case "booking_confirmation":
        return "bg-[#27AE60] text-white"
      case "delay_alert":
        return "bg-yellow-500 text-white"
      case "announcement":
        return "bg-[#2980B9] text-white"
      default:
        return "bg-gray-500 text-white"
    }
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-[#2C3E50]">Notifications</h1>
          <p className="text-[#7F8C8D]">Manage system notifications</p>
        </div>
        <Button asChild className="bg-[#27AE60] hover:bg-[#229954]">
          <Link href="/admin/notifications/create">
            <Plus className="h-4 w-4 mr-2" />
            Send Notification
          </Link>
        </Button>
      </div>

{/* Filters */}
      <Card>
        <CardContent className="pt-6">
          <div className="flex flex-col sm:flex-row gap-4">
            <div className="flex-1">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                <Input
                  placeholder="Search notifications..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10"
                />
              </div>
            </div>
            <div className="flex gap-2">
              <Select value={typeFilter} onValueChange={setTypeFilter}>
                <SelectTrigger className="w-40">
                  <Filter className="h-4 w-4 mr-2" />
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Types</SelectItem>
                  <SelectItem value="booking_confirmation">Booking</SelectItem>
                  <SelectItem value="delay_alert">Delay Alert</SelectItem>
                  <SelectItem value="announcement">Announcement</SelectItem>
                </SelectContent>
              </Select>
              <Select value={readFilter} onValueChange={setReadFilter}>
                <SelectTrigger className="w-40">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Status</SelectItem>
                  <SelectItem value="read">Read</SelectItem>
                  <SelectItem value="unread">Unread</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Notifications Table */}
      <Card>
        <CardHeader>
          <CardTitle>All Notifications ({filteredNotifications.length})</CardTitle>
          <CardDescription>System notifications sent to users</CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Title</TableHead>
                <TableHead>Recipient</TableHead>
                <TableHead>Type</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Sent</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredNotifications.map((notification) => (
                <TableRow key={notification.id}>
                  <TableCell>
                    <div className="space-y-1">
                      <div className="flex items-center gap-2">
                        <Bell className="h-4 w-4 text-[#27AE60]" />
                        <span className="font-medium text-[#2C3E50]">{notification.title}</span>
                      </div>
                      <div className="text-sm text-[#7F8C8D] line-clamp-2">{notification.message}</div>
                    </div>
                  </TableCell>
                  <TableCell>
                    <div className="font-medium text-[#2C3E50]">
                      {notification.user.first_name} {notification.user.last_name}
                    </div>
                    <div className="text-sm text-[#7F8C8D]">{notification.user.email}</div>
                  </TableCell>
                  <TableCell>
                    <Badge className={getTypeBadgeColor(notification.type)}>
                      {notification.type.replace("_", " ").charAt(0).toUpperCase() +
                        notification.type.replace("_", " ").slice(1)}
                    </Badge>
                  </TableCell>
                  <TableCell>
                    <Badge variant={notification.is_read ? "outline" : "default"}>
                      {notification.is_read ? "Read" : "Unread"}
                    </Badge>
                  </TableCell>
                  <TableCell>{new Date(notification.created_at).toLocaleDateString()}</TableCell>
                  <TableCell className="text-right">
                    <div className="flex justify-end gap-2">
                      {!notification.is_read && (
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => handleMarkAsRead(notification.id)}
                          className="text-[#27AE60] hover:bg-green-50 bg-transparent"
                        >
                          <CheckCircle className="h-4 w-4" />
                        </Button>
                      )}
                      <Button variant="outline" size="sm" asChild>
                        <Link href={`/admin/notifications/${notification.id}/edit`}>
                          <Edit className="h-4 w-4" />
                        </Link>
                      </Button>
                      <AlertDialog>
                        <AlertDialogTrigger asChild>
                          <Button variant="outline" size="sm" className="text-red-600 hover:bg-red-50 bg-transparent">
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </AlertDialogTrigger>
                        <AlertDialogContent>
                          <AlertDialogHeader>
                            <AlertDialogTitle>Delete Notification</AlertDialogTitle>
                            <AlertDialogDescription>
                              Are you sure you want to delete this notification? This action cannot be undone.
                            </AlertDialogDescription>
                          </AlertDialogHeader>
                          <AlertDialogFooter>
                            <AlertDialogCancel>Cancel</AlertDialogCancel>
                            <AlertDialogAction
                              onClick={() => handleDeleteNotification(notification.id)}
                              className="bg-red-600 hover:bg-red-700"
                            >
                              Delete
                            </AlertDialogAction>
                          </AlertDialogFooter>
                        </AlertDialogContent>
                      </AlertDialog>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>

{filteredNotifications.length === 0 && (
            <div className="text-center py-8">
              <p className="text-[#7F8C8D]">No notifications found matching your criteria.</p>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/notifications/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/notifications/create/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
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 { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { ArrowLeft, Save, Bell } from "lucide-react"
import { toast } from "sonner"

interface User {
  id: string
  first_name: string
  last_name: string
  email: string
}

export default function CreateNotificationPage() {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [users, setUsers] = useState<User[]>([])
  const [formData, setFormData] = useState({
    user_id: "",
    title: "",
    message: "",
    type: "announcement",
  })

// Mock fetch users - replace with actual API call
  useEffect(() => {
    const mockUsers: User[] = [
      { id: "user1", first_name: "John", last_name: "Doe", email: "john@example.com" },
      { id: "user2", first_name: "Jane", last_name: "Smith", email: "jane@example.com" },
      { id: "user3", first_name: "Mike", last_name: "Johnson", email: "mike@example.com" },
    ]

setUsers(mockUsers)
  }, [])

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

try {
      // Mock API call - replace with actual implementation
      await new Promise((resolve) => setTimeout(resolve, 1000))

toast.success("Notification sent successfully")

router.push("/admin/notifications")
    } catch (error) {
      toast.error("Failed to send notification")
    } finally {
      setLoading(false)
    }
  }

const handleInputChange = (field: string, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <Button variant="ghost" size="icon" asChild>
          <Link href="/admin/notifications">
            <ArrowLeft className="h-4 w-4" />
          </Link>
        </Button>
        <div>
          <h1 className="text-3xl font-bold text-[#2C3E50]">Send Notification</h1>
          <p className="text-[#7F8C8D]">Create and send a new notification</p>
        </div>
      </div>

{/* Form */}
      <Card className="max-w-2xl">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Bell className="h-5 w-5 text-[#27AE60]" />
            Notification Details
          </CardTitle>
          <CardDescription>Enter the details for the new notification</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-6">
            <div className="space-y-2">
              <Label htmlFor="user_id">Recipient *</Label>
              <Select value={formData.user_id} onValueChange={(value) => handleInputChange("user_id", value)} required>
                <SelectTrigger>
                  <SelectValue placeholder="Select recipient" />
                </SelectTrigger>
                <SelectContent>
                  {users.map((user) => (
                    <SelectItem key={user.id} value={user.id}>
                      {user.first_name} {user.last_name} ({user.email})
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label htmlFor="type">Notification Type *</Label>
              <Select value={formData.type} onValueChange={(value) => handleInputChange("type", value)} required>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="booking_confirmation">Booking Confirmation</SelectItem>
                  <SelectItem value="delay_alert">Delay Alert</SelectItem>
                  <SelectItem value="announcement">Announcement</SelectItem>
                  <SelectItem value="reminder">Reminder</SelectItem>
                  <SelectItem value="promotion">Promotion</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label htmlFor="title">Title *</Label>
              <Input
                id="title"
                value={formData.title}
                onChange={(e) => handleInputChange("title", e.target.value)}
                placeholder="Notification title"
                required
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="message">Message *</Label>
              <Textarea
                id="message"
                value={formData.message}
                onChange={(e) => handleInputChange("message", e.target.value)}
                placeholder="Notification message"
                rows={4}
                required
              />
            </div>

<div className="flex gap-4 pt-4">
              <Button type="submit" disabled={loading} className="bg-[#27AE60] hover:bg-[#229954]">
                <Save className="h-4 w-4 mr-2" />
                {loading ? "Sending..." : "Send Notification"}
              </Button>
              <Button type="button" variant="outline" asChild>
                <Link href="/admin/notifications">Cancel</Link>
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/notifications/[id]/edit/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
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 { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { ArrowLeft, Save, Bell } from "lucide-react"
import { toast } from "sonner"

interface User {
  id: string
  first_name: string
  last_name: string
  email: string
}

interface Notification {
  id: string
  user_id: string
  title: string
  message: string
  type: string
  is_read: boolean
}

export default function EditNotificationPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [initialLoading, setInitialLoading] = useState(true)
  const [users, setUsers] = useState<User[]>([])
  const [formData, setFormData] = useState<Notification>({
    id: "",
    user_id: "",
    title: "",
    message: "",
    type: "announcement",
    is_read: false,
  })

setUsers(mockUsers)
  }, [])

useEffect(() => {
    // Mock API call to fetch notification data - replace with actual implementation
    const fetchNotification = async () => {
      try {
        await new Promise((resolve) => setTimeout(resolve, 1000))

// Mock notification data
        const mockNotification: Notification = {
          id: params.id,
          user_id: "user1",
          title: "Booking Confirmation",
          message: "Your booking #RD001 has been confirmed",
          type: "booking_confirmation",
          is_read: true,
        }

setFormData(mockNotification)
      } catch (error) {
        toast.error("Failed to load notification data")
      } finally {
        setInitialLoading(false)
      }
    }

fetchNotification()
  }, [params.id])

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

try {
      // Mock API call - replace with actual implementation
      await new Promise((resolve) => setTimeout(resolve, 1000))

toast.success("Notification updated successfully")

router.push("/admin/notifications")
    } catch (error) {
      toast.error("Failed to update notification")
    } finally {
      setLoading(false)
    }
  }

const handleInputChange = (field: string, value: string | boolean) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <Button variant="ghost" size="icon" asChild>
          <Link href="/admin/notifications">
            <ArrowLeft className="h-4 w-4" />
          </Link>
        </Button>
        <div>
          <h1 className="text-3xl font-bold text-[#2C3E50]">Edit Notification</h1>
          <p className="text-[#7F8C8D]">Update notification information</p>
        </div>
      </div>

{/* Form */}
      <Card className="max-w-2xl">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Bell className="h-5 w-5 text-[#27AE60]" />
            Notification Details
          </CardTitle>
          <CardDescription>Update the details for this notification</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-6">
            <div className="space-y-2">
              <Label htmlFor="user_id">Recipient *</Label>
              <Select value={formData.user_id} onValueChange={(value) => handleInputChange("user_id", value)} required>
                <SelectTrigger>
                  <SelectValue placeholder="Select recipient" />
                </SelectTrigger>
                <SelectContent>
                  {users.map((user) => (
                    <SelectItem key={user.id} value={user.id}>
                      {user.first_name} {user.last_name} ({user.email})
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

<div className="flex items-center space-x-2">
              <Switch
                id="is_read"
                checked={formData.is_read}
                onCheckedChange={(checked) => handleInputChange("is_read", checked)}
              />
              <Label htmlFor="is_read">Mark as Read</Label>
            </div>

<div className="flex gap-4 pt-4">
              <Button type="submit" disabled={loading} className="bg-[#27AE60] hover:bg-[#229954]">
                <Save className="h-4 w-4 mr-2" />
                {loading ? "Updating..." : "Update Notification"}
              </Button>
              <Button type="button" variant="outline" asChild>
                <Link href="/admin/notifications">Cancel</Link>
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import type React from "react"
import { LayoutDashboard, Users, MapPin, Calendar, BookOpen, UtensilsCrossed } from "lucide-react"
import { RouteIcon, ChefHat, Bell } from "lucide-react"

const navItems = [
  {
    title: "Dashboard",
    href: "/admin",
    icon: LayoutDashboard,
  },
  {
    title: "Users",
    href: "/admin/users",
    icon: Users,
  },
  {
    title: "Pickup Locations",
    href: "/admin/pickup-locations",
    icon: MapPin,
  },
  {
    title: "Routes",
    href: "/admin/routes",
    icon: RouteIcon,
  },
  {
    title: "Food Categories",
    href: "/admin/food-categories",
    icon: ChefHat,
  },
  {
    title: "Menu Items",
    href: "/admin/menu-items",
    icon: UtensilsCrossed,
  },
  {
    title: "Trips",
    href: "/admin/trips",
    icon: Calendar,
  },
  {
    title: "Bookings",
    href: "/admin/bookings",
    icon: BookOpen,
  },
  {
    title: "Notifications",
    href: "/admin/notifications",
    icon: Bell,
  },
]

export default function AdminLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="flex h-screen bg-gray-50">
      <div className="w-64 flex-none bg-gray-100 py-4">
        <div className="px-6">
          <h1 className="text-2xl font-bold">Admin Panel</h1>
        </div>
        <nav className="mt-6">
          <ul>
            {navItems.map((item) => (
              <li key={item.href} className="px-6 py-2">
                <a href={item.href} className="flex items-center text-gray-700 hover:text-gray-900">
                  <item.icon className="mr-2 h-4 w-4" />
                  {item.title}
                </a>
              </li>
            ))}
          </ul>
        </nav>
      </div>
      <div className="flex-1 p-4">{children}</div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/driver/layout.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import { Truck, Menu, Home, Route, Users, MapPin, Settings, Bell, LogOut, Calendar, BarChart3 } from "lucide-react"

const navigation = [
  { name: "Dashboard", href: "/driver", icon: Home },
  { name: "My Trips", href: "/driver/trips", icon: Route },
  { name: "Passengers", href: "/driver/passengers", icon: Users },
  { name: "Routes", href: "/driver/routes", icon: MapPin },
  { name: "Schedule", href: "/driver/schedule", icon: Calendar },
  { name: "Performance", href: "/driver/performance", icon: BarChart3 },
  { name: "Notifications", href: "/driver/notifications", icon: Bell },
  { name: "Settings", href: "/driver/settings", icon: Settings },
]

export default function DriverLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const pathname = usePathname()
  const [isOnline, setIsOnline] = useState(true)

const NavItems = ({ mobile = false }: { mobile?: boolean }) => (
    <>
      {navigation.map((item) => {
        const isActive = pathname === item.href
        return (
          <Link
            key={item.name}
            href={item.href}
            className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
              isActive ? "bg-[#27AE60] text-white" : "text-[#7F8C8D] hover:text-[#2C3E50] hover:bg-gray-100"
            } ${mobile ? "w-full" : ""}`}
          >
            <item.icon className="h-4 w-4" />
            {item.name}
          </Link>
        )
      })}
    </>
  )

return (
    <div className="min-h-screen bg-[#F7F9F9]">
      {/* Desktop Sidebar */}
      <div className="hidden md:fixed md:inset-y-0 md:flex md:w-64 md:flex-col">
        <div className="flex flex-col flex-grow bg-white border-r border-gray-200 pt-5 pb-4 overflow-y-auto">
          <div className="flex items-center flex-shrink-0 px-4">
            <Truck className="h-8 w-8 text-[#27AE60]" />
            <span className="ml-2 text-xl font-bold text-[#2C3E50]">Driver Portal</span>
          </div>
          <div className="mt-8 flex-grow flex flex-col">
            <nav className="flex-1 px-2 space-y-1">
              <NavItems />
            </nav>
          </div>
          <div className="flex-shrink-0 flex border-t border-gray-200 p-4">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" className="w-full justify-start">
                  <Avatar className="h-8 w-8 mr-3">
                    <AvatarImage src="/placeholder.svg?height=32&width=32" />
                    <AvatarFallback>JD</AvatarFallback>
                  </Avatar>
                  <div className="flex-1 text-left">
                    <p className="text-sm font-medium text-[#2C3E50]">John Driver</p>
                    <p className="text-xs text-[#7F8C8D]">Driver #001</p>
                  </div>
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-56">
                <DropdownMenuLabel>My Account</DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuItem>
                  <Settings className="mr-2 h-4 w-4" />
                  Settings
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <LogOut className="mr-2 h-4 w-4" />
                  Sign out
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </div>
      </div>

{/* Mobile header */}
      <div className="md:hidden">
        <div className="bg-white border-b border-gray-200 px-4 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center">
              <Sheet>
                <SheetTrigger asChild>
                  <Button variant="ghost" size="icon">
                    <Menu className="h-6 w-6" />
                  </Button>
                </SheetTrigger>
                <SheetContent side="left" className="w-64">
                  <div className="flex items-center mb-8">
                    <Truck className="h-8 w-8 text-[#27AE60]" />
                    <span className="ml-2 text-xl font-bold text-[#2C3E50]">Driver Portal</span>
                  </div>
                  <nav className="space-y-1">
                    <NavItems mobile />
                  </nav>
                </SheetContent>
              </Sheet>
              <h1 className="ml-4 text-lg font-semibold text-[#2C3E50]">Driver Dashboard</h1>
            </div>
            <div className="flex items-center gap-2">
              <Badge
                className={isOnline ? "bg-[#27AE60] text-white" : "bg-red-500 text-white"}
                onClick={() => setIsOnline(!isOnline)}
              >
                {isOnline ? "Online" : "Offline"}
              </Badge>
              <Avatar className="h-8 w-8">
                <AvatarImage src="/placeholder.svg?height=32&width=32" />
                <AvatarFallback>JD</AvatarFallback>
              </Avatar>
            </div>
          </div>
        </div>
      </div>

{/* Main content */}
      <div className="md:pl-64">
        <div className="flex flex-col">
          {/* Status bar */}
          <div className="hidden md:block bg-white border-b border-gray-200 px-6 py-4">
            <div className="flex items-center justify-between">
              <h1 className="text-2xl font-bold text-[#2C3E50]">Driver Dashboard</h1>
              <div className="flex items-center gap-4">
                <Button
                  variant={isOnline ? "default" : "destructive"}
                  onClick={() => setIsOnline(!isOnline)}
                  className={isOnline ? "bg-[#27AE60] hover:bg-[#229954]" : ""}
                >
                  {isOnline ? "Online" : "Go Online"}
                </Button>
                <div className="flex items-center gap-2">
                  <Avatar className="h-8 w-8">
                    <AvatarImage src="/placeholder.svg?height=32&width=32" />
                    <AvatarFallback>JD</AvatarFallback>
                  </Avatar>
                  <div>
                    <p className="text-sm font-medium text-[#2C3E50]">John Driver</p>
                    <p className="text-xs text-[#7F8C8D]">Driver #001</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

{/* Page content */}
          <main className="flex-1 p-6">{children}</main>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/driver/page.tsx" isEdit="true" isMerged="true"
"use client"

export default function DriverDashboard() {
  const [currentTrip, setCurrentTrip] = useState({
    id: "TRIP001",
    route: "City Center → Business District",
    departureTime: "12:30 PM",
    estimatedArrival: "1:15 PM",
    status: "ready",
    progress: 0,
    passengers: [
      {
        id: "P001",
        name: "John Doe",
        pickup: "City Center",
        phone: "+1234567890",
        qrCode: "QR123456",
        foodItems: ["Gourmet Burger", "Truffle Fries"],
        status: "waiting",
      },
      {
        id: "P002",
        name: "Jane Smith",
        pickup: "City Center",
        phone: "+1234567891",
        qrCode: "QR789012",
        foodItems: ["Chicken Wrap"],
        status: "boarded",
      },
      {
        id: "P003",
        name: "Mike Johnson",
        pickup: "Shopping Mall",
        phone: "+1234567892",
        qrCode: "QR345678",
        foodItems: ["Caesar Salad", "Fresh Juice"],
        status: "waiting",
      },
    ],
  })

const [upcomingTrips] = useState([
    {
      id: "TRIP002",
      route: "University Campus → Residential Area A",
      departureTime: "06:00 PM",
      passengerCount: 8,
      estimatedDuration: "45 min",
    },
    {
      id: "TRIP003",
      route: "Business District → Shopping Mall",
      departureTime: "08:30 PM",
      passengerCount: 12,
      estimatedDuration: "30 min",
    },
  ])

const [tripStatus, setTripStatus] = useState("ready")
  const [dailyStats] = useState({
    tripsCompleted: 3,
    totalEarnings: 245.5,
    totalPassengers: 28,
    rating: 4.8,
    hoursWorked: 6.5,
  })

const handleStartTrip = () => {
    setTripStatus("departed")
    setCurrentTrip((prev) => ({ ...prev, progress: 25 }))
    toast.success("Trip started! Safe driving!")
  }

const handleArriveDestination = () => {
    setTripStatus("arrived")
    setCurrentTrip((prev) => ({ ...prev, progress: 100 }))
    toast.success("Trip completed successfully!")
  }

const handlePassengerAction = (passengerId: string, action: string) => {
    setCurrentTrip((prev) => ({
      ...prev,
      passengers: prev.passengers.map((p) =>
        p.id === passengerId ? { ...p, status: action === "board" ? "boarded" : "waiting" } : p,
      ),
    }))
    toast.success(`Passenger ${action === "board" ? "boarded" : "marked as waiting"}`)
  }

const getStatusColor = (status: string) => {
    switch (status) {
      case "ready":
        return "bg-blue-500"
      case "departed":
        return "bg-[#27AE60]"
      case "arrived":
        return "bg-gray-500"
      default:
        return "bg-gray-500"
    }
  }

const getPassengerStatusColor = (status: string) => {
    switch (status) {
      case "waiting":
        return "bg-yellow-500"
      case "boarded":
        return "bg-[#27AE60]"
      default:
        return "bg-gray-500"
    }
  }

return (
    <div className="space-y-6">
      {/* Stats Overview */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-[#7F8C8D]">Trips Today</p>
                <p className="text-2xl font-bold text-[#2C3E50]">{dailyStats.tripsCompleted}</p>
              </div>
              <Route className="h-8 w-8 text-[#27AE60]" />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-[#7F8C8D]">Earnings</p>
                <p className="text-2xl font-bold text-[#2C3E50]">${dailyStats.totalEarnings}</p>
              </div>
              <DollarSign className="h-8 w-8 text-[#27AE60]" />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-[#7F8C8D]">Passengers</p>
                <p className="text-2xl font-bold text-[#2C3E50]">{dailyStats.totalPassengers}</p>
              </div>
              <Users className="h-8 w-8 text-[#27AE60]" />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-[#7F8C8D]">Rating</p>
                <p className="text-2xl font-bold text-[#2C3E50]">{dailyStats.rating}</p>
              </div>
              <Star className="h-8 w-8 text-[#27AE60]" />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-[#7F8C8D]">Hours</p>
                <p className="text-2xl font-bold text-[#2C3E50]">{dailyStats.hoursWorked}h</p>
              </div>
              <Clock className="h-8 w-8 text-[#27AE60]" />
            </div>
          </CardContent>
        </Card>
      </div>

{/* Current Trip */}
      <Card className="border-l-4 border-l-[#27AE60]">
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle className="text-[#2C3E50]">{currentTrip.route}</CardTitle>
              <CardDescription className="text-[#7F8C8D]">
                Departure: {currentTrip.departureTime} • ETA: {currentTrip.estimatedArrival} •{" "}
                {currentTrip.passengers.length} passengers
              </CardDescription>
            </div>
            <Badge className={getStatusColor(tripStatus)}>{tripStatus.toUpperCase()}</Badge>
          </div>
          {tripStatus === "departed" && (
            <div className="mt-4">
              <div className="flex items-center justify-between text-sm text-[#7F8C8D] mb-2">
                <span>Trip Progress</span>
                <span>{currentTrip.progress}%</span>
              </div>
              <Progress value={currentTrip.progress} className="h-2" />
            </div>
          )}
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {/* Trip Controls */}
            <div className="flex flex-wrap gap-2">
              {tripStatus === "ready" && (
                <Button onClick={handleStartTrip} className="bg-[#27AE60] hover:bg-[#229954]">
                  <Navigation className="h-4 w-4 mr-2" />
                  Start Trip
                </Button>
              )}
              {tripStatus === "departed" && (
                <Button onClick={handleArriveDestination} className="bg-[#2980B9] hover:bg-[#2471A3]">
                  <CheckCircle className="h-4 w-4 mr-2" />
                  Mark as Arrived
                </Button>
              )}
              <Button variant="outline">
                <AlertCircle className="h-4 w-4 mr-2" />
                Send Delay Alert
              </Button>
              <Button variant="outline">
                <MapPin className="h-4 w-4 mr-2" />
                View Route
              </Button>
            </div>

{/* Passenger List */}
            <div>
              <h4 className="font-medium text-[#2C3E50] mb-3">
                Passengers ({currentTrip.passengers.filter((p) => p.status === "boarded").length}/
                {currentTrip.passengers.length})
              </h4>
              <div className="space-y-3">
                {currentTrip.passengers.map((passenger) => (
                  <div key={passenger.id} className="flex items-center justify-between p-3 bg-white rounded-lg border">
                    <div className="flex items-center gap-3">
                      <Avatar>
                        <AvatarFallback className="bg-[#27AE60] text-white">
                          {passenger.name
                            .split(" ")
                            .map((n) => n[0])
                            .join("")}
                        </AvatarFallback>
                      </Avatar>
                      <div>
                        <p className="font-medium text-[#2C3E50]">{passenger.name}</p>
                        <div className="flex items-center gap-1 text-sm text-[#7F8C8D]">
                          <MapPin className="h-3 w-3" />
                          {passenger.pickup}
                        </div>
                        <p className="text-xs text-[#7F8C8D]">Food: {passenger.foodItems.join(", ")}</p>
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      <Badge className={getPassengerStatusColor(passenger.status)}>{passenger.status}</Badge>
                      <Button size="sm" variant="outline">
                        <Phone className="h-4 w-4" />
                      </Button>
                      <Button size="sm" variant="outline">
                        <MessageSquare className="h-4 w-4" />
                      </Button>
                      <Dialog>
                        <DialogTrigger asChild>
                          <Button size="sm" variant="outline">
                            <QrCode className="h-4 w-4" />
                          </Button>
                        </DialogTrigger>
                        <DialogContent>
                          <DialogHeader>
                            <DialogTitle>Passenger QR Code</DialogTitle>
                            <DialogDescription>Scan this code to verify passenger boarding</DialogDescription>
                          </DialogHeader>
                          <div className="flex flex-col items-center py-6">
                            <QrCode className="h-32 w-32 text-[#2C3E50] mb-4" />
                            <p className="text-lg font-mono">{passenger.qrCode}</p>
                            <p className="text-sm text-[#7F8C8D] mt-2">{passenger.name}</p>
                            <div className="flex gap-2 mt-4">
                              <Button
                                onClick={() => handlePassengerAction(passenger.id, "board")}
                                className="bg-[#27AE60] hover:bg-[#229954]"
                              >
                                Mark as Boarded
                              </Button>
                              <Button variant="outline" onClick={() => handlePassengerAction(passenger.id, "waiting")}>
                                Mark as Waiting
                              </Button>
                            </div>
                          </div>
                        </DialogContent>
                      </Dialog>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Upcoming Trips */}
      <Card>
        <CardHeader>
          <CardTitle className="text-[#2C3E50]">Upcoming Trips</CardTitle>
          <CardDescription>Your scheduled trips for today</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {upcomingTrips.map((trip) => (
              <div key={trip.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                <div>
                  <h4 className="font-medium text-[#2C3E50]">{trip.route}</h4>
                  <div className="flex items-center gap-4 text-sm text-[#7F8C8D] mt-1">
                    <div className="flex items-center gap-1">
                      <Clock className="h-3 w-3" />
                      {trip.departureTime}
                    </div>
                    <div className="flex items-center gap-1">
                      <Users className="h-3 w-3" />
                      {trip.passengerCount} passengers
                    </div>
                    <div className="flex items-center gap-1">
                      <Navigation className="h-3 w-3" />
                      {trip.estimatedDuration}
                    </div>
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  <Badge variant="outline">Scheduled</Badge>
                  <Button size="sm" variant="outline">
                    View Details
                  </Button>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/driver/trips/page.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 { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import {
  Search,
  Filter,
  Eye,
  Trash2,
  Plus,
  Calendar,
  Clock,
  Users,
  MapPin,
  Navigation,
  CheckCircle,
  XCircle,
} from "lucide-react"
import { toast } from "sonner"

export default function DriverTrips() {
  const [trips, setTrips] = useState([
    {
      id: "TRIP001",
      route: "City Center → Business District",
      date: "2024-01-15",
      time: "12:30 PM",
      status: "in_progress",
      passengers: 8,
      maxCapacity: 15,
      earnings: 120.0,
      duration: "45 min",
    },
    {
      id: "TRIP002",
      route: "University Campus → Residential Area A",
      date: "2024-01-15",
      time: "06:00 PM",
      status: "scheduled",
      passengers: 12,
      maxCapacity: 15,
      earnings: 180.0,
      duration: "30 min",
    },
    {
      id: "TRIP003",
      route: "Business District → Shopping Mall",
      date: "2024-01-14",
      time: "08:30 PM",
      status: "completed",
      passengers: 15,
      maxCapacity: 15,
      earnings: 225.0,
      duration: "35 min",
    },
    {
      id: "TRIP004",
      route: "Shopping Mall → City Center",
      date: "2024-01-14",
      time: "02:15 PM",
      status: "cancelled",
      passengers: 0,
      maxCapacity: 15,
      earnings: 0,
      duration: "40 min",
    },
  ])

const [searchTerm, setSearchTerm] = useState("")
  const [statusFilter, setStatusFilter] = useState("all")
  const [dateFilter, setDateFilter] = useState("")
  const [selectedTrip, setSelectedTrip] = useState(null)
  const [isViewDialogOpen, setIsViewDialogOpen] = useState(false)

const filteredTrips = trips.filter((trip) => {
    const matchesSearch =
      trip.route.toLowerCase().includes(searchTerm.toLowerCase()) ||
      trip.id.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesStatus = statusFilter === "all" || trip.status === statusFilter
    const matchesDate = !dateFilter || trip.date === dateFilter

return matchesSearch && matchesStatus && matchesDate
  })

const getStatusColor = (status: string) => {
    switch (status) {
      case "scheduled":
        return "bg-blue-500"
      case "in_progress":
        return "bg-[#27AE60]"
      case "completed":
        return "bg-gray-500"
      case "cancelled":
        return "bg-red-500"
      default:
        return "bg-gray-500"
    }
  }

const getStatusIcon = (status: string) => {
    switch (status) {
      case "scheduled":
        return <Calendar className="h-4 w-4" />
      case "in_progress":
        return <Navigation className="h-4 w-4" />
      case "completed":
        return <CheckCircle className="h-4 w-4" />
      case "cancelled":
        return <XCircle className="h-4 w-4" />
      default:
        return <Clock className="h-4 w-4" />
    }
  }

const handleUpdateStatus = (tripId: string, newStatus: string) => {
    setTrips((prev) => prev.map((trip) => (trip.id === tripId ? { ...trip, status: newStatus } : trip)))
    toast.success(`Trip status updated to ${newStatus}`)
  }

const handleDeleteTrip = (tripId: string) => {
    setTrips((prev) => prev.filter((trip) => trip.id !== tripId))
    toast.success("Trip deleted successfully")
  }

const handleViewTrip = (trip: any) => {
    setSelectedTrip(trip)
    setIsViewDialogOpen(true)
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="text-2xl font-bold text-[#2C3E50]">My Trips</h1>
          <p className="text-[#7F8C8D]">Manage your scheduled and completed trips</p>
        </div>
        <Button className="bg-[#27AE60] hover:bg-[#229954]">
          <Plus className="h-4 w-4 mr-2" />
          Request New Trip
        </Button>
      </div>

{/* Filters */}
      <Card>
        <CardContent className="p-4">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div>
              <Label htmlFor="search">Search Trips</Label>
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-[#7F8C8D]" />
                <Input
                  id="search"
                  placeholder="Search by route or ID..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10"
                />
              </div>
            </div>
            <div>
              <Label htmlFor="status">Status</Label>
              <Select value={statusFilter} onValueChange={setStatusFilter}>
                <SelectTrigger>
                  <SelectValue placeholder="All statuses" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Statuses</SelectItem>
                  <SelectItem value="scheduled">Scheduled</SelectItem>
                  <SelectItem value="in_progress">In Progress</SelectItem>
                  <SelectItem value="completed">Completed</SelectItem>
                  <SelectItem value="cancelled">Cancelled</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label htmlFor="date">Date</Label>
              <Input id="date" type="date" value={dateFilter} onChange={(e) => setDateFilter(e.target.value)} />
            </div>
            <div className="flex items-end">
              <Button
                variant="outline"
                onClick={() => {
                  setSearchTerm("")
                  setStatusFilter("all")
                  setDateFilter("")
                }}
              >
                <Filter className="h-4 w-4 mr-2" />
                Clear Filters
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Trips Table */}
      <Card>
        <CardHeader>
          <CardTitle>Trips ({filteredTrips.length})</CardTitle>
          <CardDescription>Your trip history and upcoming schedules</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Trip ID</TableHead>
                  <TableHead>Route</TableHead>
                  <TableHead>Date & Time</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead>Passengers</TableHead>
                  <TableHead>Earnings</TableHead>
                  <TableHead>Duration</TableHead>
                  <TableHead>Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {filteredTrips.map((trip) => (
                  <TableRow key={trip.id}>
                    <TableCell className="font-medium">{trip.id}</TableCell>
                    <TableCell>
                      <div className="flex items-center gap-2">
                        <MapPin className="h-4 w-4 text-[#7F8C8D]" />
                        {trip.route}
                      </div>
                    </TableCell>
                    <TableCell>
                      <div>
                        <p className="font-medium">{trip.date}</p>
                        <p className="text-sm text-[#7F8C8D]">{trip.time}</p>
                      </div>
                    </TableCell>
                    <TableCell>
                      <Badge className={getStatusColor(trip.status)}>
                        {getStatusIcon(trip.status)}
                        <span className="ml-1">{trip.status.replace("_", " ")}</span>
                      </Badge>
                    </TableCell>
                    <TableCell>
                      <div className="flex items-center gap-1">
                        <Users className="h-4 w-4 text-[#7F8C8D]" />
                        {trip.passengers}/{trip.maxCapacity}
                      </div>
                    </TableCell>
                    <TableCell className="font-medium">${trip.earnings.toFixed(2)}</TableCell>
                    <TableCell>{trip.duration}</TableCell>
                    <TableCell>
                      <div className="flex items-center gap-2">
                        <Button size="sm" variant="outline" onClick={() => handleViewTrip(trip)}>
                          <Eye className="h-4 w-4" />
                        </Button>
                        {trip.status === "scheduled" && (
                          <Select onValueChange={(value) => handleUpdateStatus(trip.id, value)}>
                            <SelectTrigger className="w-32">
                              <SelectValue placeholder="Update" />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="in_progress">Start Trip</SelectItem>
                              <SelectItem value="cancelled">Cancel</SelectItem>
                            </SelectContent>
                          </Select>
                        )}
                        {trip.status === "in_progress" && (
                          <Button
                            size="sm"
                            onClick={() => handleUpdateStatus(trip.id, "completed")}
                            className="bg-[#27AE60] hover:bg-[#229954]"
                          >
                            Complete
                          </Button>
                        )}
                        {trip.status === "scheduled" && (
                          <AlertDialog>
                            <AlertDialogTrigger asChild>
                              <Button size="sm" variant="destructive">
                                <Trash2 className="h-4 w-4" />
                              </Button>
                            </AlertDialogTrigger>
                            <AlertDialogContent>
                              <AlertDialogHeader>
                                <AlertDialogTitle>Delete Trip</AlertDialogTitle>
                                <AlertDialogDescription>
                                  Are you sure you want to delete this trip? This action cannot be undone.
                                </AlertDialogDescription>
                              </AlertDialogHeader>
                              <AlertDialogFooter>
                                <AlertDialogCancel>Cancel</AlertDialogCancel>
                                <AlertDialogAction
                                  onClick={() => handleDeleteTrip(trip.id)}
                                  className="bg-red-500 hover:bg-red-600"
                                >
                                  Delete
                                </AlertDialogAction>
                              </AlertDialogFooter>
                            </AlertDialogContent>
                          </AlertDialog>
                        )}
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>

{/* View Trip Dialog */}
      <Dialog open={isViewDialogOpen} onOpenChange={setIsViewDialogOpen}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>Trip Details</DialogTitle>
            <DialogDescription>Complete information about this trip</DialogDescription>
          </DialogHeader>
          {selectedTrip && (
            <div className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label>Trip ID</Label>
                  <p className="font-medium">{selectedTrip.id}</p>
                </div>
                <div>
                  <Label>Status</Label>
                  <Badge className={getStatusColor(selectedTrip.status)}>{selectedTrip.status.replace("_", " ")}</Badge>
                </div>
                <div>
                  <Label>Route</Label>
                  <p className="font-medium">{selectedTrip.route}</p>
                </div>
                <div>
                  <Label>Date & Time</Label>
                  <p className="font-medium">
                    {selectedTrip.date} at {selectedTrip.time}
                  </p>
                </div>
                <div>
                  <Label>Passengers</Label>
                  <p className="font-medium">
                    {selectedTrip.passengers}/{selectedTrip.maxCapacity}
                  </p>
                </div>
                <div>
                  <Label>Earnings</Label>
                  <p className="font-medium">${selectedTrip.earnings.toFixed(2)}</p>
                </div>
                <div>
                  <Label>Duration</Label>
                  <p className="font-medium">{selectedTrip.duration}</p>
                </div>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/driver/trips/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/driver/passengers/page.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 { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Search, Phone, MessageSquare, QrCode, MapPin, Star, Eye, Filter } from "lucide-react"
import { toast } from "sonner"

export default function DriverPassengers() {
  const [passengers, setPassengers] = useState([
    {
      id: "P001",
      name: "John Doe",
      email: "john.doe@email.com",
      phone: "+1234567890",
      pickup: "City Center",
      destination: "Business District",
      tripId: "TRIP001",
      status: "boarded",
      qrCode: "QR123456",
      foodItems: ["Gourmet Burger", "Truffle Fries"],
      rating: 4.8,
      totalTrips: 15,
      joinDate: "2023-06-15",
    },
    {
      id: "P002",
      name: "Jane Smith",
      email: "jane.smith@email.com",
      phone: "+1234567891",
      pickup: "City Center",
      destination: "Business District",
      tripId: "TRIP001",
      status: "waiting",
      qrCode: "QR789012",
      foodItems: ["Chicken Wrap"],
      rating: 4.9,
      totalTrips: 23,
      joinDate: "2023-04-20",
    },
    {
      id: "P003",
      name: "Mike Johnson",
      email: "mike.johnson@email.com",
      phone: "+1234567892",
      pickup: "Shopping Mall",
      destination: "Business District",
      tripId: "TRIP001",
      status: "no_show",
      qrCode: "QR345678",
      foodItems: ["Caesar Salad", "Fresh Juice"],
      rating: 4.5,
      totalTrips: 8,
      joinDate: "2023-08-10",
    },
  ])

const [searchTerm, setSearchTerm] = useState("")
  const [statusFilter, setStatusFilter] = useState("all")
  const [selectedPassenger, setSelectedPassenger] = useState(null)
  const [isViewDialogOpen, setIsViewDialogOpen] = useState(false)

const filteredPassengers = passengers.filter((passenger) => {
    const matchesSearch =
      passenger.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      passenger.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
      passenger.phone.includes(searchTerm)
    const matchesStatus = statusFilter === "all" || passenger.status === statusFilter

return matchesSearch && matchesStatus
  })

const getStatusColor = (status: string) => {
    switch (status) {
      case "waiting":
        return "bg-yellow-500"
      case "boarded":
        return "bg-[#27AE60]"
      case "completed":
        return "bg-blue-500"
      case "no_show":
        return "bg-red-500"
      default:
        return "bg-gray-500"
    }
  }

const handleUpdateStatus = (passengerId: string, newStatus: string) => {
    setPassengers((prev) =>
      prev.map((passenger) => (passenger.id === passengerId ? { ...passenger, status: newStatus } : passenger)),
    )
    toast.success(`Passenger status updated to ${newStatus.replace("_", " ")}`)
  }

const handleViewPassenger = (passenger: any) => {
    setSelectedPassenger(passenger)
    setIsViewDialogOpen(true)
  }

const handleContactPassenger = (passenger: any, method: string) => {
    if (method === "phone") {
      window.open(`tel:${passenger.phone}`)
    } else if (method === "sms") {
      window.open(`sms:${passenger.phone}`)
    }
    toast.success(`Contacting ${passenger.name} via ${method}`)
  }

{/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-[#7F8C8D]">Total Passengers</p>
                <p className="text-2xl font-bold text-[#2C3E50]">{passengers.length}</p>
              </div>
              <div className="h-8 w-8 bg-[#27AE60] rounded-full flex items-center justify-center">
                <span className="text-white text-sm font-bold">{passengers.length}</span>
              </div>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-[#7F8C8D]">Boarded</p>
                <p className="text-2xl font-bold text-[#2C3E50]">
                  {passengers.filter((p) => p.status === "boarded").length}
                </p>
              </div>
              <div className="h-8 w-8 bg-[#27AE60] rounded-full flex items-center justify-center">
                <span className="text-white text-sm font-bold">
                  {passengers.filter((p) => p.status === "boarded").length}
                </span>
              </div>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-[#7F8C8D]">Waiting</p>
                <p className="text-2xl font-bold text-[#2C3E50]">
                  {passengers.filter((p) => p.status === "waiting").length}
                </p>
              </div>
              <div className="h-8 w-8 bg-yellow-500 rounded-full flex items-center justify-center">
                <span className="text-white text-sm font-bold">
                  {passengers.filter((p) => p.status === "waiting").length}
                </span>
              </div>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-[#7F8C8D]">No Show</p>
                <p className="text-2xl font-bold text-[#2C3E50]">
                  {passengers.filter((p) => p.status === "no_show").length}
                </p>
              </div>
              <div className="h-8 w-8 bg-red-500 rounded-full flex items-center justify-center">
                <span className="text-white text-sm font-bold">
                  {passengers.filter((p) => p.status === "no_show").length}
                </span>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Filters */}
      <Card>
        <CardContent className="p-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
              <Label htmlFor="search">Search Passengers</Label>
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-[#7F8C8D]" />
                <Input
                  id="search"
                  placeholder="Search by name, email, or phone..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10"
                />
              </div>
            </div>
            <div>
              <Label htmlFor="status">Status</Label>
              <Select value={statusFilter} onValueChange={setStatusFilter}>
                <SelectTrigger>
                  <SelectValue placeholder="All statuses" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Statuses</SelectItem>
                  <SelectItem value="waiting">Waiting</SelectItem>
                  <SelectItem value="boarded">Boarded</SelectItem>
                  <SelectItem value="completed">Completed</SelectItem>
                  <SelectItem value="no_show">No Show</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="flex items-end">
              <Button
                variant="outline"
                onClick={() => {
                  setSearchTerm("")
                  setStatusFilter("all")
                }}
              >
                <Filter className="h-4 w-4 mr-2" />
                Clear Filters
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Passengers Table */}
      <Card>
        <CardHeader>
          <CardTitle>Passengers ({filteredPassengers.length})</CardTitle>
          <CardDescription>Current trip passengers and their status</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Passenger</TableHead>
                  <TableHead>Contact</TableHead>
                  <TableHead>Pickup Location</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead>Food Order</TableHead>
                  <TableHead>Rating</TableHead>
                  <TableHead>Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {filteredPassengers.map((passenger) => (
                  <TableRow key={passenger.id}>
                    <TableCell>
                      <div className="flex items-center gap-3">
                        <Avatar>
                          <AvatarImage src={`/placeholder.svg?height=32&width=32`} />
                          <AvatarFallback className="bg-[#27AE60] text-white">
                            {passenger.name
                              .split(" ")
                              .map((n) => n[0])
                              .join("")}
                          </AvatarFallback>
                        </Avatar>
                        <div>
                          <p className="font-medium">{passenger.name}</p>
                          <p className="text-sm text-[#7F8C8D]">{passenger.email}</p>
                        </div>
                      </div>
                    </TableCell>
                    <TableCell>
                      <div className="flex items-center gap-2">
                        <Button size="sm" variant="outline" onClick={() => handleContactPassenger(passenger, "phone")}>
                          <Phone className="h-4 w-4" />
                        </Button>
                        <Button size="sm" variant="outline" onClick={() => handleContactPassenger(passenger, "sms")}>
                          <MessageSquare className="h-4 w-4" />
                        </Button>
                      </div>
                    </TableCell>
                    <TableCell>
                      <div className="flex items-center gap-1">
                        <MapPin className="h-4 w-4 text-[#7F8C8D]" />
                        {passenger.pickup}
                      </div>
                    </TableCell>
                    <TableCell>
                      <Badge className={getStatusColor(passenger.status)}>{passenger.status.replace("_", " ")}</Badge>
                    </TableCell>
                    <TableCell>
                      <div className="max-w-32">
                        <p className="text-sm truncate">{passenger.foodItems.join(", ")}</p>
                      </div>
                    </TableCell>
                    <TableCell>
                      <div className="flex items-center gap-1">
                        <Star className="h-4 w-4 text-yellow-500 fill-current" />
                        {passenger.rating}
                      </div>
                    </TableCell>
                    <TableCell>
                      <div className="flex items-center gap-2">
                        <Button size="sm" variant="outline" onClick={() => handleViewPassenger(passenger)}>
                          <Eye className="h-4 w-4" />
                        </Button>
                        <Dialog>
                          <DialogTrigger asChild>
                            <Button size="sm" variant="outline">
                              <QrCode className="h-4 w-4" />
                            </Button>
                          </DialogTrigger>
                          <DialogContent>
                            <DialogHeader>
                              <DialogTitle>Passenger QR Code</DialogTitle>
                              <DialogDescription>Scan to verify passenger boarding</DialogDescription>
                            </DialogHeader>
                            <div className="flex flex-col items-center py-6">
                              <QrCode className="h-32 w-32 text-[#2C3E50] mb-4" />
                              <p className="text-lg font-mono">{passenger.qrCode}</p>
                              <p className="text-sm text-[#7F8C8D] mt-2">{passenger.name}</p>
                              <div className="flex gap-2 mt-4">
                                <Button
                                  onClick={() => handleUpdateStatus(passenger.id, "boarded")}
                                  className="bg-[#27AE60] hover:bg-[#229954]"
                                >
                                  Mark as Boarded
                                </Button>
                                <Button variant="outline" onClick={() => handleUpdateStatus(passenger.id, "no_show")}>
                                  Mark as No Show
                                </Button>
                              </div>
                            </div>
                          </DialogContent>
                        </Dialog>
                        <Select onValueChange={(value) => handleUpdateStatus(passenger.id, value)}>
                          <SelectTrigger className="w-32">
                            <SelectValue placeholder="Update" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="waiting">Waiting</SelectItem>
                            <SelectItem value="boarded">Boarded</SelectItem>
                            <SelectItem value="completed">Completed</SelectItem>
                            <SelectItem value="no_show">No Show</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>

{/* View Passenger Dialog */}
      <Dialog open={isViewDialogOpen} onOpenChange={setIsViewDialogOpen}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>Passenger Details</DialogTitle>
            <DialogDescription>Complete information about this passenger</DialogDescription>
          </DialogHeader>
          {selectedPassenger && (
            <div className="space-y-4">
              <div className="flex items-center gap-4">
                <Avatar className="h-16 w-16">
                  <AvatarImage src={`/placeholder.svg?height=64&width=64`} />
                  <AvatarFallback className="bg-[#27AE60] text-white text-lg">
                    {selectedPassenger.name
                      .split(" ")
                      .map((n) => n[0])
                      .join("")}
                  </AvatarFallback>
                </Avatar>
                <div>
                  <h3 className="text-xl font-bold">{selectedPassenger.name}</h3>
                  <p className="text-[#7F8C8D]">{selectedPassenger.email}</p>
                  <div className="flex items-center gap-1 mt-1">
                    <Star className="h-4 w-4 text-yellow-500 fill-current" />
                    <span className="font-medium">{selectedPassenger.rating}</span>
                    <span className="text-[#7F8C8D]">({selectedPassenger.totalTrips} trips)</span>
                  </div>
                </div>
              </div>

<div className="grid grid-cols-2 gap-4">
                <div>
                  <Label>Phone</Label>
                  <p className="font-medium">{selectedPassenger.phone}</p>
                </div>
                <div>
                  <Label>Status</Label>
                  <Badge className={getStatusColor(selectedPassenger.status)}>
                    {selectedPassenger.status.replace("_", " ")}
                  </Badge>
                </div>
                <div>
                  <Label>Pickup Location</Label>
                  <p className="font-medium">{selectedPassenger.pickup}</p>
                </div>
                <div>
                  <Label>Destination</Label>
                  <p className="font-medium">{selectedPassenger.destination}</p>
                </div>
                <div>
                  <Label>Trip ID</Label>
                  <p className="font-medium">{selectedPassenger.tripId}</p>
                </div>
                <div>
                  <Label>QR Code</Label>
                  <p className="font-medium font-mono">{selectedPassenger.qrCode}</p>
                </div>
                <div className="col-span-2">
                  <Label>Food Order</Label>
                  <p className="font-medium">{selectedPassenger.foodItems.join(", ")}</p>
                </div>
                <div>
                  <Label>Member Since</Label>
                  <p className="font-medium">{selectedPassenger.joinDate}</p>
                </div>
                <div>
                  <Label>Total Trips</Label>
                  <p className="font-medium">{selectedPassenger.totalTrips}</p>
                </div>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/driver/passengers/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/driver/routes/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { MapPin, Clock, Users, DollarSign, Navigation, Search, Filter, Eye, Star } from "lucide-react"

export default function DriverRoutes() {
  const [routes, setRoutes] = useState([
    {
      id: "R001",
      name: "City Center Express",
      pickup: "City Center Station",
      dropoff: "Business District Hub",
      distance: "8.5 km",
      duration: "25-30 min",
      pricePerPerson: 15.0,
      maxCapacity: 15,
      difficulty: "easy",
      rating: 4.8,
      totalTrips: 156,
      description: "Popular route connecting downtown to business district with minimal traffic",
      landmarks: ["Central Park", "City Hall", "Financial Tower"],
      trafficPatterns: {
        morning: "Heavy",
        afternoon: "Moderate",
        evening: "Heavy",
        night: "Light",
      },
      estimatedEarnings: {
        perTrip: 225.0,
        perDay: 675.0,
      },
    },
    {
      id: "R002",
      name: "University Campus Loop",
      pickup: "University Main Gate",
      dropoff: "Student Housing Complex",
      distance: "12.3 km",
      duration: "35-40 min",
      pricePerPerson: 18.0,
      maxCapacity: 15,
      difficulty: "moderate",
      rating: 4.6,
      totalTrips: 89,
      description: "Scenic route through campus area with multiple student pickup points",
      landmarks: ["University Library", "Sports Complex", "Student Center"],
      trafficPatterns: {
        morning: "Moderate",
        afternoon: "Heavy",
        evening: "Moderate",
        night: "Light",
      },
      estimatedEarnings: {
        perTrip: 270.0,
        perDay: 540.0,
      },
    },
    {
      id: "R003",
      name: "Shopping District Tour",
      pickup: "Mall Entrance",
      dropoff: "Entertainment Complex",
      distance: "15.7 km",
      duration: "45-50 min",
      pricePerPerson: 22.0,
      maxCapacity: 15,
      difficulty: "hard",
      rating: 4.9,
      totalTrips: 234,
      description: "Premium route with shopping and entertainment stops, higher earnings",
      landmarks: ["Grand Mall", "Theater District", "Luxury Hotels"],
      trafficPatterns: {
        morning: "Light",
        afternoon: "Heavy",
        evening: "Very Heavy",
        night: "Moderate",
      },
      estimatedEarnings: {
        perTrip: 330.0,
        perDay: 990.0,
      },
    },
  ])

const [searchTerm, setSearchTerm] = useState("")
  const [difficultyFilter, setDifficultyFilter] = useState("all")
  const [selectedRoute, setSelectedRoute] = useState(null)
  const [isViewDialogOpen, setIsViewDialogOpen] = useState(false)

const filteredRoutes = routes.filter((route) => {
    const matchesSearch =
      route.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      route.pickup.toLowerCase().includes(searchTerm.toLowerCase()) ||
      route.dropoff.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesDifficulty = difficultyFilter === "all" || route.difficulty === difficultyFilter

return matchesSearch && matchesDifficulty
  })

const getDifficultyColor = (difficulty: string) => {
    switch (difficulty) {
      case "easy":
        return "bg-[#27AE60]"
      case "moderate":
        return "bg-yellow-500"
      case "hard":
        return "bg-red-500"
      default:
        return "bg-gray-500"
    }
  }

const getTrafficColor = (level: string) => {
    switch (level) {
      case "Light":
        return "text-[#27AE60]"
      case "Moderate":
        return "text-yellow-500"
      case "Heavy":
        return "text-orange-500"
      case "Very Heavy":
        return "text-red-500"
      default:
        return "text-gray-500"
    }
  }

const handleViewRoute = (route: any) => {
    setSelectedRoute(route)
    setIsViewDialogOpen(true)
  }

{/* Filters */}
      <Card>
        <CardContent className="p-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
              <Label htmlFor="search">Search Routes</Label>
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-[#7F8C8D]" />
                <Input
                  id="search"
                  placeholder="Search by name or location..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10"
                />
              </div>
            </div>
            <div>
              <Label htmlFor="difficulty">Difficulty</Label>
              <Select value={difficultyFilter} onValueChange={setDifficultyFilter}>
                <SelectTrigger>
                  <SelectValue placeholder="All difficulties" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Difficulties</SelectItem>
                  <SelectItem value="easy">Easy</SelectItem>
                  <SelectItem value="moderate">Moderate</SelectItem>
                  <SelectItem value="hard">Hard</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="flex items-end">
              <Button
                variant="outline"
                onClick={() => {
                  setSearchTerm("")
                  setDifficultyFilter("all")
                }}
              >
                <Filter className="h-4 w-4 mr-2" />
                Clear Filters
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Routes Grid */}
      <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
        {filteredRoutes.map((route) => (
          <Card key={route.id} className="hover:shadow-lg transition-shadow">
            <CardHeader>
              <div className="flex items-start justify-between">
                <div>
                  <CardTitle className="text-[#2C3E50]">{route.name}</CardTitle>
                  <CardDescription className="text-[#7F8C8D]">{route.description}</CardDescription>
                </div>
                <Badge className={getDifficultyColor(route.difficulty)}>{route.difficulty}</Badge>
              </div>
            </CardHeader>
            <CardContent className="space-y-4">
              {/* Route Info */}
              <div className="space-y-2">
                <div className="flex items-center gap-2 text-sm">
                  <MapPin className="h-4 w-4 text-[#27AE60]" />
                  <span className="font-medium">From:</span> {route.pickup}
                </div>
                <div className="flex items-center gap-2 text-sm">
                  <Navigation className="h-4 w-4 text-[#27AE60]" />
                  <span className="font-medium">To:</span> {route.dropoff}
                </div>
                <div className="flex items-center gap-2 text-sm">
                  <Clock className="h-4 w-4 text-[#7F8C8D]" />
                  <span>
                    {route.duration} • {route.distance}
                  </span>
                </div>
              </div>

{/* Stats */}
              <div className="grid grid-cols-2 gap-4">
                <div className="text-center p-2 bg-gray-50 rounded">
                  <div className="flex items-center justify-center gap-1">
                    <DollarSign className="h-4 w-4 text-[#27AE60]" />
                    <span className="font-bold text-[#2C3E50]">${route.pricePerPerson}</span>
                  </div>
                  <p className="text-xs text-[#7F8C8D]">per person</p>
                </div>
                <div className="text-center p-2 bg-gray-50 rounded">
                  <div className="flex items-center justify-center gap-1">
                    <Users className="h-4 w-4 text-[#27AE60]" />
                    <span className="font-bold text-[#2C3E50]">{route.maxCapacity}</span>
                  </div>
                  <p className="text-xs text-[#7F8C8D]">max capacity</p>
                </div>
              </div>

{/* Rating and Earnings */}
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-1">
                  <Star className="h-4 w-4 text-yellow-500 fill-current" />
                  <span className="font-medium">{route.rating}</span>
                  <span className="text-sm text-[#7F8C8D]">({route.totalTrips} trips)</span>
                </div>
                <div className="text-right">
                  <p className="font-bold text-[#27AE60]">${route.estimatedEarnings.perTrip}</p>
                  <p className="text-xs text-[#7F8C8D]">per trip</p>
                </div>
              </div>

{/* Actions */}
              <div className="flex gap-2">
                <Button variant="outline" className="flex-1 bg-transparent" onClick={() => handleViewRoute(route)}>
                  <Eye className="h-4 w-4 mr-2" />
                  View Details
                </Button>
                <Button className="flex-1 bg-[#27AE60] hover:bg-[#229954]">
                  <Navigation className="h-4 w-4 mr-2" />
                  Start Navigation
                </Button>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

{/* View Route Dialog */}
      <Dialog open={isViewDialogOpen} onOpenChange={setIsViewDialogOpen}>
        <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Route Details</DialogTitle>
            <DialogDescription>Complete information about this route</DialogDescription>
          </DialogHeader>
          {selectedRoute && (
            <div className="space-y-6">
              {/* Route Overview */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-4">
                  <div>
                    <h3 className="text-lg font-semibold text-[#2C3E50] mb-2">{selectedRoute.name}</h3>
                    <p className="text-[#7F8C8D]">{selectedRoute.description}</p>
                  </div>

<div className="space-y-2">
                    <div className="flex items-center gap-2">
                      <MapPin className="h-4 w-4 text-[#27AE60]" />
                      <span className="font-medium">Pickup:</span> {selectedRoute.pickup}
                    </div>
                    <div className="flex items-center gap-2">
                      <Navigation className="h-4 w-4 text-[#27AE60]" />
                      <span className="font-medium">Dropoff:</span> {selectedRoute.dropoff}
                    </div>
                    <div className="flex items-center gap-2">
                      <Clock className="h-4 w-4 text-[#7F8C8D]" />
                      <span className="font-medium">Duration:</span> {selectedRoute.duration}
                    </div>
                  </div>

<div className="flex items-center gap-4">
                    <Badge className={getDifficultyColor(selectedRoute.difficulty)}>
                      {selectedRoute.difficulty} difficulty
                    </Badge>
                    <div className="flex items-center gap-1">
                      <Star className="h-4 w-4 text-yellow-500 fill-current" />
                      <span className="font-medium">{selectedRoute.rating}</span>
                      <span className="text-[#7F8C8D]">({selectedRoute.totalTrips} trips)</span>
                    </div>
                  </div>
                </div>

<div className="space-y-4">
                  <div>
                    <h4 className="font-semibold text-[#2C3E50] mb-2">Earnings Potential</h4>
                    <div className="grid grid-cols-2 gap-4">
                      <div className="text-center p-3 bg-[#27AE60] bg-opacity-10 rounded">
                        <p className="text-2xl font-bold text-[#27AE60]">${selectedRoute.estimatedEarnings.perTrip}</p>
                        <p className="text-sm text-[#7F8C8D]">Per Trip</p>
                      </div>
                      <div className="text-center p-3 bg-[#27AE60] bg-opacity-10 rounded">
                        <p className="text-2xl font-bold text-[#27AE60]">${selectedRoute.estimatedEarnings.perDay}</p>
                        <p className="text-sm text-[#7F8C8D]">Per Day</p>
                      </div>
                    </div>
                  </div>

<div>
                    <h4 className="font-semibold text-[#2C3E50] mb-2">Route Stats</h4>
                    <div className="grid grid-cols-2 gap-4">
                      <div className="text-center p-3 bg-gray-50 rounded">
                        <p className="text-xl font-bold text-[#2C3E50]">${selectedRoute.pricePerPerson}</p>
                        <p className="text-sm text-[#7F8C8D]">Price per Person</p>
                      </div>
                      <div className="text-center p-3 bg-gray-50 rounded">
                        <p className="text-xl font-bold text-[#2C3E50]">{selectedRoute.maxCapacity}</p>
                        <p className="text-sm text-[#7F8C8D]">Max Capacity</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

{/* Traffic Patterns */}
              <div>
                <h4 className="font-semibold text-[#2C3E50] mb-3">Traffic Patterns</h4>
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                  {Object.entries(selectedRoute.trafficPatterns).map(([time, level]) => (
                    <div key={time} className="text-center p-3 bg-gray-50 rounded">
                      <p className="font-medium capitalize">{time}</p>
                      <p className={`font-bold ${getTrafficColor(level)}`}>{level}</p>
                    </div>
                  ))}
                </div>
              </div>

{/* Landmarks */}
              <div>
                <h4 className="font-semibold text-[#2C3E50] mb-3">Key Landmarks</h4>
                <div className="flex flex-wrap gap-2">
                  {selectedRoute.landmarks.map((landmark, index) => (
                    <Badge key={index} variant="outline" className="text-[#2C3E50]">
                      <MapPin className="h-3 w-3 mr-1" />
                      {landmark}
                    </Badge>
                  ))}
                </div>
              </div>

{/* Actions */}
              <div className="flex gap-4 pt-4 border-t">
                <Button className="flex-1 bg-[#27AE60] hover:bg-[#229954]">
                  <Navigation className="h-4 w-4 mr-2" />
                  Start Navigation
                </Button>
                <Button variant="outline" className="flex-1 bg-transparent">
                  <MapPin className="h-4 w-4 mr-2" />
                  View on Map
                </Button>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/driver/routes/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/driver/schedule/page.tsx" isMerged="true"
"use client"

export default function DriverSchedule() {
  const [selectedDate, setSelectedDate] = useState(new Date())
  const [viewMode, setViewMode] = useState("week") // week, month

const [schedule, setSchedule] = useState([
    {
      id: "S001",
      date: "2024-01-15",
      time: "08:00 AM",
      endTime: "09:00 AM",
      route: "City Center → Business District",
      status: "confirmed",
      passengers: 12,
      maxCapacity: 15,
      earnings: 180.0,
      type: "regular",
    },
    {
      id: "S002",
      date: "2024-01-15",
      time: "12:30 PM",
      endTime: "01:30 PM",
      route: "Business District → Shopping Mall",
      status: "confirmed",
      passengers: 8,
      maxCapacity: 15,
      earnings: 120.0,
      type: "regular",
    },
    {
      id: "S003",
      date: "2024-01-15",
      time: "06:00 PM",
      endTime: "07:00 PM",
      route: "University Campus → Residential Area",
      status: "pending",
      passengers: 15,
      maxCapacity: 15,
      earnings: 225.0,
      type: "premium",
    },
    {
      id: "S004",
      date: "2024-01-16",
      time: "09:00 AM",
      endTime: "10:00 AM",
      route: "City Center → Airport",
      status: "confirmed",
      passengers: 6,
      maxCapacity: 15,
      earnings: 150.0,
      type: "express",
    },
    {
      id: "S005",
      date: "2024-01-16",
      time: "02:00 PM",
      endTime: "03:00 PM",
      route: "Shopping Mall → City Center",
      status: "available",
      passengers: 0,
      maxCapacity: 15,
      earnings: 0,
      type: "regular",
    },
  ])

const getStatusColor = (status: string) => {
    switch (status) {
      case "confirmed":
        return "bg-[#27AE60]"
      case "pending":
        return "bg-yellow-500"
      case "available":
        return "bg-blue-500"
      case "cancelled":
        return "bg-red-500"
      default:
        return "bg-gray-500"
    }
  }

const getTypeColor = (type: string) => {
    switch (type) {
      case "premium":
        return "bg-purple-500"
      case "express":
        return "bg-orange-500"
      case "regular":
        return "bg-gray-500"
      default:
        return "bg-gray-500"
    }
  }

const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString("en-US", {
      weekday: "long",
      year: "numeric",
      month: "long",
      day: "numeric",
    })
  }

const getScheduleForDate = (date: Date) => {
    const dateString = date.toISOString().split("T")[0]
    return schedule.filter((item) => item.date === dateString)
  }

const handleStatusUpdate = (scheduleId: string, newStatus: string) => {
    setSchedule((prev) => prev.map((item) => (item.id === scheduleId ? { ...item, status: newStatus } : item)))
    toast.success(`Schedule updated to ${newStatus}`)
  }

const handleDeleteSchedule = (scheduleId: string) => {
    setSchedule((prev) => prev.filter((item) => item.id !== scheduleId))
    toast.success("Schedule item deleted")
  }

const todaySchedule = getScheduleForDate(new Date())
  const selectedDateSchedule = getScheduleForDate(selectedDate)

const weeklyStats = {
    totalTrips: schedule.filter((s) => s.status === "confirmed").length,
    totalEarnings: schedule.filter((s) => s.status === "confirmed").reduce((sum, s) => sum + s.earnings, 0),
    totalHours: schedule.filter((s) => s.status === "confirmed").length * 1, // Assuming 1 hour per trip
    availableSlots: schedule.filter((s) => s.status === "available").length,
  }

{/* Weekly Stats */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-[#7F8C8D]">This Week</p>
                <p className="text-2xl font-bold text-[#2C3E50]">{weeklyStats.totalTrips}</p>
              </div>
              <CheckCircle className="h-8 w-8 text-[#27AE60]" />
            </div>
            <p className="text-xs text-[#7F8C8D] mt-1">Confirmed Trips</p>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-[#7F8C8D]">Earnings</p>
                <p className="text-2xl font-bold text-[#2C3E50]">${weeklyStats.totalEarnings}</p>
              </div>
              <div className="h-8 w-8 bg-[#27AE60] rounded-full flex items-center justify-center">
                <span className="text-white text-sm">$</span>
              </div>
            </div>
            <p className="text-xs text-[#7F8C8D] mt-1">This Week</p>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-[#7F8C8D]">Hours</p>
                <p className="text-2xl font-bold text-[#2C3E50]">{weeklyStats.totalHours}h</p>
              </div>
              <Clock className="h-8 w-8 text-[#27AE60]" />
            </div>
            <p className="text-xs text-[#7F8C8D] mt-1">Scheduled</p>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-[#7F8C8D]">Available</p>
                <p className="text-2xl font-bold text-[#2C3E50]">{weeklyStats.availableSlots}</p>
              </div>
              <CalendarIcon className="h-8 w-8 text-blue-500" />
            </div>
            <p className="text-xs text-[#7F8C8D] mt-1">Open Slots</p>
          </CardContent>
        </Card>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Calendar */}
        <Card className="lg:col-span-1">
          <CardHeader>
            <CardTitle>Calendar</CardTitle>
            <CardDescription>Select a date to view schedule</CardDescription>
          </CardHeader>
          <CardContent>
            <Calendar mode="single" selected={selectedDate} onSelect={setSelectedDate} className="rounded-md border" />
          </CardContent>
        </Card>

{/* Schedule for Selected Date */}
        <Card className="lg:col-span-2">
          <CardHeader>
            <CardTitle>{selectedDate ? formatDate(selectedDate) : "Today's Schedule"}</CardTitle>
            <CardDescription>{selectedDateSchedule.length} scheduled items</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {selectedDateSchedule.length === 0 ? (
                <div className="text-center py-8">
                  <CalendarIcon className="h-12 w-12 text-[#7F8C8D] mx-auto mb-4" />
                  <p className="text-[#7F8C8D]">No schedule items for this date</p>
                  <Button className="mt-4 bg-[#27AE60] hover:bg-[#229954]">
                    <Plus className="h-4 w-4 mr-2" />
                    Add Availability
                  </Button>
                </div>
              ) : (
                selectedDateSchedule.map((item) => (
                  <div key={item.id} className="flex items-center justify-between p-4 border rounded-lg">
                    <div className="flex-1">
                      <div className="flex items-center gap-2 mb-2">
                        <Badge className={getStatusColor(item.status)}>{item.status}</Badge>
                        <Badge className={getTypeColor(item.type)} variant="outline">
                          {item.type}
                        </Badge>
                      </div>
                      <h4 className="font-medium text-[#2C3E50]">{item.route}</h4>
                      <div className="flex items-center gap-4 text-sm text-[#7F8C8D] mt-1">
                        <div className="flex items-center gap-1">
                          <Clock className="h-3 w-3" />
                          {item.time} - {item.endTime}
                        </div>
                        <div className="flex items-center gap-1">
                          <Users className="h-3 w-3" />
                          {item.passengers}/{item.maxCapacity}
                        </div>
                        <div className="flex items-center gap-1">
                          <span className="text-[#27AE60] font-medium">${item.earnings}</span>
                        </div>
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      {item.status === "pending" && (
                        <>
                          <Button
                            size="sm"
                            onClick={() => handleStatusUpdate(item.id, "confirmed")}
                            className="bg-[#27AE60] hover:bg-[#229954]"
                          >
                            <CheckCircle className="h-4 w-4" />
                          </Button>
                          <Button
                            size="sm"
                            variant="destructive"
                            onClick={() => handleStatusUpdate(item.id, "cancelled")}
                          >
                            <XCircle className="h-4 w-4" />
                          </Button>
                        </>
                      )}
                      {item.status === "available" && (
                        <Button size="sm" variant="outline" onClick={() => handleDeleteSchedule(item.id)}>
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      )}
                      <Button size="sm" variant="outline">
                        <Edit className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                ))
              )}
            </div>
          </CardContent>
        </Card>
      </div>

{/* Today's Quick View */}
      {todaySchedule.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle>Today's Schedule</CardTitle>
            <CardDescription>Quick overview of today's trips</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {todaySchedule.map((item) => (
                <div key={item.id} className="p-4 border rounded-lg">
                  <div className="flex items-center justify-between mb-2">
                    <Badge className={getStatusColor(item.status)}>{item.status}</Badge>
                    <span className="text-sm font-medium text-[#27AE60]">${item.earnings}</span>
                  </div>
                  <h4 className="font-medium text-[#2C3E50] mb-1">{item.route}</h4>
                  <div className="flex items-center gap-2 text-sm text-[#7F8C8D]">
                    <Clock className="h-3 w-3" />
                    {item.time}
                    <Users className="h-3 w-3 ml-2" />
                    {item.passengers}/{item.maxCapacity}
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/driver/performance/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Star, TrendingUp, TrendingDown, DollarSign, Clock, Route, Award, Target, BarChart3 } from "lucide-react"

export default function DriverPerformance() {
  const [timeRange, setTimeRange] = useState("week") // week, month, year

const [performanceData] = useState({
    overall: {
      rating: 4.8,
      totalTrips: 156,
      totalEarnings: 3420.5,
      totalHours: 234,
      completionRate: 96.2,
      onTimeRate: 94.5,
      customerSatisfaction: 4.7,
    },
    weekly: {
      trips: 12,
      earnings: 285.0,
      hours: 18,
      rating: 4.9,
      trend: "up",
    },
    monthly: {
      trips: 48,
      earnings: 1140.0,
      hours: 72,
      rating: 4.8,
      trend: "stable",
    },
    achievements: [
      {
        id: "A001",
        title: "5-Star Driver",
        description: "Maintained 4.8+ rating for 30 days",
        icon: "star",
        earned: true,
        date: "2024-01-10",
      },
      {
        id: "A002",
        title: "Perfect Week",
        description: "Completed all scheduled trips in a week",
        icon: "target",
        earned: true,
        date: "2024-01-08",
      },
      {
        id: "A003",
        title: "Customer Favorite",
        description: "Received 10+ positive reviews",
        icon: "award",
        earned: true,
        date: "2024-01-05",
      },
      {
        id: "A004",
        title: "Speed Demon",
        description: "Complete 100 trips",
        icon: "route",
        earned: false,
        progress: 78,
      },
    ],
    recentReviews: [
      {
        id: "R001",
        passenger: "John Doe",
        rating: 5,
        comment: "Excellent driver! Very professional and the food truck experience was amazing.",
        date: "2024-01-14",
        trip: "City Center → Business District",
      },
      {
        id: "R002",
        passenger: "Jane Smith",
        rating: 5,
        comment: "Great service, on time and friendly. Will definitely book again!",
        date: "2024-01-13",
        trip: "University → Residential Area",
      },
      {
        id: "R003",
        passenger: "Mike Johnson",
        rating: 4,
        comment: "Good experience overall. Driver was helpful and food was great.",
        date: "2024-01-12",
        trip: "Shopping Mall → City Center",
      },
    ],
    goals: [
      {
        id: "G001",
        title: "Weekly Earnings",
        target: 300,
        current: 285,
        unit: "$",
        progress: 95,
      },
      {
        id: "G002",
        title: "Customer Rating",
        target: 4.9,
        current: 4.8,
        unit: "★",
        progress: 98,
      },
      {
        id: "G003",
        title: "Trip Completion",
        target: 15,
        current: 12,
        unit: "trips",
        progress: 80,
      },
    ],
  })

const getTimeRangeData = () => {
    switch (timeRange) {
      case "week":
        return performanceData.weekly
      case "month":
        return performanceData.monthly
      default:
        return performanceData.weekly
    }
  }

const getTrendIcon = (trend: string) => {
    switch (trend) {
      case "up":
        return <TrendingUp className="h-4 w-4 text-[#27AE60]" />
      case "down":
        return <TrendingDown className="h-4 w-4 text-red-500" />
      default:
        return <BarChart3 className="h-4 w-4 text-[#7F8C8D]" />
    }
  }

const getAchievementIcon = (icon: string) => {
    switch (icon) {
      case "star":
        return <Star className="h-6 w-6 text-yellow-500" />
      case "target":
        return <Target className="h-6 w-6 text-[#27AE60]" />
      case "award":
        return <Award className="h-6 w-6 text-purple-500" />
      case "route":
        return <Route className="h-6 w-6 text-blue-500" />
      default:
        return <Award className="h-6 w-6 text-gray-500" />
    }
  }

const currentData = getTimeRangeData()

{/* Key Metrics */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-[#7F8C8D]">Trips Completed</p>
                <p className="text-2xl font-bold text-[#2C3E50]">{currentData.trips}</p>
              </div>
              <div className="flex items-center gap-1">
                {getTrendIcon(currentData.trend)}
                <Route className="h-8 w-8 text-[#27AE60]" />
              </div>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-[#7F8C8D]">Earnings</p>
                <p className="text-2xl font-bold text-[#2C3E50]">${currentData.earnings}</p>
              </div>
              <div className="flex items-center gap-1">
                {getTrendIcon(currentData.trend)}
                <DollarSign className="h-8 w-8 text-[#27AE60]" />
              </div>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-[#7F8C8D]">Hours Worked</p>
                <p className="text-2xl font-bold text-[#2C3E50]">{currentData.hours}h</p>
              </div>
              <div className="flex items-center gap-1">
                {getTrendIcon(currentData.trend)}
                <Clock className="h-8 w-8 text-[#27AE60]" />
              </div>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-[#7F8C8D]">Rating</p>
                <p className="text-2xl font-bold text-[#2C3E50]">{currentData.rating}</p>
              </div>
              <div className="flex items-center gap-1">
                {getTrendIcon(currentData.trend)}
                <Star className="h-8 w-8 text-yellow-500" />
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Performance Overview */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle>Overall Performance</CardTitle>
            <CardDescription>Your lifetime statistics</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="text-center p-3 bg-[#27AE60] bg-opacity-10 rounded">
                <p className="text-2xl font-bold text-[#27AE60]">{performanceData.overall.rating}</p>
                <p className="text-sm text-[#7F8C8D]">Overall Rating</p>
              </div>
              <div className="text-center p-3 bg-[#27AE60] bg-opacity-10 rounded">
                <p className="text-2xl font-bold text-[#27AE60]">{performanceData.overall.totalTrips}</p>
                <p className="text-sm text-[#7F8C8D]">Total Trips</p>
              </div>
            </div>

<div className="space-y-3">
              <div>
                <div className="flex justify-between text-sm mb-1">
                  <span>Completion Rate</span>
                  <span>{performanceData.overall.completionRate}%</span>
                </div>
                <Progress value={performanceData.overall.completionRate} className="h-2" />
              </div>

<div>
                <div className="flex justify-between text-sm mb-1">
                  <span>On-Time Rate</span>
                  <span>{performanceData.overall.onTimeRate}%</span>
                </div>
                <Progress value={performanceData.overall.onTimeRate} className="h-2" />
              </div>

<div>
                <div className="flex justify-between text-sm mb-1">
                  <span>Customer Satisfaction</span>
                  <span>{performanceData.overall.customerSatisfaction}/5.0</span>
                </div>
                <Progress value={(performanceData.overall.customerSatisfaction / 5) * 100} className="h-2" />
              </div>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Goals Progress</CardTitle>
            <CardDescription>Track your current goals</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            {performanceData.goals.map((goal) => (
              <div key={goal.id} className="space-y-2">
                <div className="flex justify-between items-center">
                  <span className="font-medium">{goal.title}</span>
                  <span className="text-sm text-[#7F8C8D]">
                    {goal.current}
                    {goal.unit} / {goal.target}
                    {goal.unit}
                  </span>
                </div>
                <Progress value={goal.progress} className="h-2" />
                <div className="text-xs text-[#7F8C8D]">{goal.progress}% complete</div>
              </div>
            ))}
          </CardContent>
        </Card>
      </div>

{/* Achievements */}
      <Card>
        <CardHeader>
          <CardTitle>Achievements</CardTitle>
          <CardDescription>Your earned badges and progress</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            {performanceData.achievements.map((achievement) => (
              <div
                key={achievement.id}
                className={`p-4 rounded-lg border-2 ${
                  achievement.earned ? "border-[#27AE60] bg-[#27AE60] bg-opacity-10" : "border-gray-200 bg-gray-50"
                }`}
              >
                <div className="flex items-center gap-3 mb-2">
                  {getAchievementIcon(achievement.icon)}
                  <div className="flex-1">
                    <h4 className="font-medium text-[#2C3E50]">{achievement.title}</h4>
                    {achievement.earned ? (
                      <Badge className="bg-[#27AE60] text-white mt-1">Earned</Badge>
                    ) : (
                      <Badge variant="outline" className="mt-1">
                        In Progress
                      </Badge>
                    )}
                  </div>
                </div>
                <p className="text-sm text-[#7F8C8D] mb-2">{achievement.description}</p>
                {achievement.earned ? (
                  <p className="text-xs text-[#27AE60] font-medium">Earned on {achievement.date}</p>
                ) : (
                  <div className="space-y-1">
                    <Progress value={achievement.progress} className="h-1" />
                    <p className="text-xs text-[#7F8C8D]">{achievement.progress}% complete</p>
                  </div>
                )}
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

{/* Recent Reviews */}
      <Card>
        <CardHeader>
          <CardTitle>Recent Reviews</CardTitle>
          <CardDescription>Latest passenger feedback</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Passenger</TableHead>
                  <TableHead>Rating</TableHead>
                  <TableHead>Trip</TableHead>
                  <TableHead>Comment</TableHead>
                  <TableHead>Date</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {performanceData.recentReviews.map((review) => (
                  <TableRow key={review.id}>
                    <TableCell className="font-medium">{review.passenger}</TableCell>
                    <TableCell>
                      <div className="flex items-center gap-1">
                        <Star className="h-4 w-4 text-yellow-500 fill-current" />
                        {review.rating}
                      </div>
                    </TableCell>
                    <TableCell>{review.trip}</TableCell>
                    <TableCell className="max-w-xs">
                      <p className="truncate">{review.comment}</p>
                    </TableCell>
                    <TableCell>{review.date}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/driver/notifications/page.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 { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import {
  Bell,
  Search,
  Filter,
  Trash2,
  CheckCircle,
  AlertCircle,
  Info,
  Calendar,
  Users,
  DollarSign,
  Route,
  Clock,
} from "lucide-react"
import { toast } from "sonner"

export default function DriverNotifications() {
  const [notifications, setNotifications] = useState([
    {
      id: "N001",
      title: "New Trip Assignment",
      message: "You have been assigned to Trip #TRIP004 scheduled for tomorrow at 9:00 AM",
      type: "trip",
      isRead: false,
      createdAt: "2024-01-15T10:30:00Z",
      data: {
        tripId: "TRIP004",
        route: "City Center → Airport",
        time: "09:00 AM",
      },
    },
    {
      id: "N002",
      title: "Payment Processed",
      message: "Your weekly earnings of $285.00 have been processed and will be deposited within 2 business days",
      type: "payment",
      isRead: false,
      createdAt: "2024-01-15T09:15:00Z",
      data: {
        amount: 285.0,
        period: "Week of Jan 8-14",
      },
    },
    {
      id: "N003",
      title: "Customer Review",
      message:
        "John Doe left you a 5-star review: 'Excellent driver! Very professional and the food truck experience was amazing.'",
      type: "review",
      isRead: true,
      createdAt: "2024-01-14T16:45:00Z",
      data: {
        rating: 5,
        customer: "John Doe",
        tripId: "TRIP001",
      },
    },
    {
      id: "N004",
      title: "Schedule Update",
      message: "Your schedule for tomorrow has been updated. Please check your calendar for changes.",
      type: "schedule",
      isRead: true,
      createdAt: "2024-01-14T14:20:00Z",
      data: {
        date: "2024-01-16",
        changes: 2,
      },
    },
    {
      id: "N005",
      title: "System Maintenance",
      message:
        "Scheduled system maintenance will occur tonight from 2:00 AM to 4:00 AM. The app may be temporarily unavailable.",
      type: "system",
      isRead: false,
      createdAt: "2024-01-14T12:00:00Z",
      data: {
        startTime: "2:00 AM",
        endTime: "4:00 AM",
        date: "2024-01-15",
      },
    },
    {
      id: "N006",
      title: "Achievement Unlocked",
      message:
        "Congratulations! You've earned the '5-Star Driver' achievement for maintaining a 4.8+ rating for 30 days.",
      type: "achievement",
      isRead: true,
      createdAt: "2024-01-10T11:30:00Z",
      data: {
        achievement: "5-Star Driver",
        rating: 4.8,
      },
    },
  ])

const [searchTerm, setSearchTerm] = useState("")
  const [typeFilter, setTypeFilter] = useState("all")
  const [statusFilter, setStatusFilter] = useState("all")

const filteredNotifications = notifications.filter((notification) => {
    const matchesSearch =
      notification.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      notification.message.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesType = typeFilter === "all" || notification.type === typeFilter
    const matchesStatus =
      statusFilter === "all" ||
      (statusFilter === "read" && notification.isRead) ||
      (statusFilter === "unread" && !notification.isRead)

return matchesSearch && matchesType && matchesStatus
  })

const unreadCount = notifications.filter((n) => !n.isRead).length

const getTypeIcon = (type: string) => {
    switch (type) {
      case "trip":
        return <Route className="h-5 w-5 text-[#27AE60]" />
      case "payment":
        return <DollarSign className="h-5 w-5 text-green-500" />
      case "review":
        return <Users className="h-5 w-5 text-blue-500" />
      case "schedule":
        return <Calendar className="h-5 w-5 text-purple-500" />
      case "system":
        return <AlertCircle className="h-5 w-5 text-orange-500" />
      case "achievement":
        return <CheckCircle className="h-5 w-5 text-yellow-500" />
      default:
        return <Info className="h-5 w-5 text-gray-500" />
    }
  }

const getTypeColor = (type: string) => {
    switch (type) {
      case "trip":
        return "bg-[#27AE60]"
      case "payment":
        return "bg-green-500"
      case "review":
        return "bg-blue-500"
      case "schedule":
        return "bg-purple-500"
      case "system":
        return "bg-orange-500"
      case "achievement":
        return "bg-yellow-500"
      default:
        return "bg-gray-500"
    }
  }

const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    const now = new Date()
    const diffInHours = Math.floor((now.getTime() - date.getTime()) / (1000 * 60 * 60))

if (diffInHours < 1) return "Just now"
    if (diffInHours < 24) return `${diffInHours}h ago`
    if (diffInHours < 48) return "Yesterday"
    return date.toLocaleDateString()
  }

const handleMarkAsRead = (notificationId: string) => {
    setNotifications((prev) =>
      prev.map((notification) =>
        notification.id === notificationId ? { ...notification, isRead: true } : notification,
      ),
    )
    toast.success("Notification marked as read")
  }

const handleMarkAllAsRead = () => {
    setNotifications((prev) => prev.map((notification) => ({ ...notification, isRead: true })))
    toast.success("All notifications marked as read")
  }

const handleDeleteNotification = (notificationId: string) => {
    setNotifications((prev) => prev.filter((notification) => notification.id !== notificationId))
    toast.success("Notification deleted")
  }

const handleDeleteAll = () => {
    setNotifications([])
    toast.success("All notifications deleted")
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="text-2xl font-bold text-[#2C3E50]">Notifications</h1>
          <p className="text-[#7F8C8D]">Stay updated with your trips, earnings, and important announcements</p>
        </div>
        <div className="flex gap-2">
          <Button variant="outline" onClick={handleMarkAllAsRead} disabled={unreadCount === 0}>
            <CheckCircle className="h-4 w-4 mr-2" />
            Mark All Read
          </Button>
          <AlertDialog>
            <AlertDialogTrigger asChild>
              <Button variant="destructive" disabled={notifications.length === 0}>
                <Trash2 className="h-4 w-4 mr-2" />
                Clear All
              </Button>
            </AlertDialogTrigger>
            <AlertDialogContent>
              <AlertDialogHeader>
                <AlertDialogTitle>Clear All Notifications</AlertDialogTitle>
                <AlertDialogDescription>
                  Are you sure you want to delete all notifications? This action cannot be undone.
                </AlertDialogDescription>
              </AlertDialogHeader>
              <AlertDialogFooter>
                <AlertDialogCancel>Cancel</AlertDialogCancel>
                <AlertDialogAction onClick={handleDeleteAll} className="bg-red-500 hover:bg-red-600">
                  Delete All
                </AlertDialogAction>
              </AlertDialogFooter>
            </AlertDialogContent>
          </AlertDialog>
        </div>
      </div>

{/* Stats */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-[#7F8C8D]">Total</p>
                <p className="text-2xl font-bold text-[#2C3E50]">{notifications.length}</p>
              </div>
              <Bell className="h-8 w-8 text-[#27AE60]" />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-[#7F8C8D]">Unread</p>
                <p className="text-2xl font-bold text-[#2C3E50]">{unreadCount}</p>
              </div>
              <div className="h-8 w-8 bg-red-500 rounded-full flex items-center justify-center">
                <span className="text-white text-sm font-bold">{unreadCount}</span>
              </div>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-[#7F8C8D]">Trip Updates</p>
                <p className="text-2xl font-bold text-[#2C3E50]">
                  {notifications.filter((n) => n.type === "trip").length}
                </p>
              </div>
              <Route className="h-8 w-8 text-[#27AE60]" />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-[#7F8C8D]">Reviews</p>
                <p className="text-2xl font-bold text-[#2C3E50]">
                  {notifications.filter((n) => n.type === "review").length}
                </p>
              </div>
              <Users className="h-8 w-8 text-blue-500" />
            </div>
          </CardContent>
        </Card>
      </div>

{/* Filters */}
      <Card>
        <CardContent className="p-4">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div>
              <Label htmlFor="search">Search Notifications</Label>
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-[#7F8C8D]" />
                <Input
                  id="search"
                  placeholder="Search notifications..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10"
                />
              </div>
            </div>
            <div>
              <Label htmlFor="type">Type</Label>
              <Select value={typeFilter} onValueChange={setTypeFilter}>
                <SelectTrigger>
                  <SelectValue placeholder="All types" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Types</SelectItem>
                  <SelectItem value="trip">Trip Updates</SelectItem>
                  <SelectItem value="payment">Payments</SelectItem>
                  <SelectItem value="review">Reviews</SelectItem>
                  <SelectItem value="schedule">Schedule</SelectItem>
                  <SelectItem value="system">System</SelectItem>
                  <SelectItem value="achievement">Achievements</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label htmlFor="status">Status</Label>
              <Select value={statusFilter} onValueChange={setStatusFilter}>
                <SelectTrigger>
                  <SelectValue placeholder="All statuses" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All</SelectItem>
                  <SelectItem value="unread">Unread</SelectItem>
                  <SelectItem value="read">Read</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="flex items-end">
              <Button
                variant="outline"
                onClick={() => {
                  setSearchTerm("")
                  setTypeFilter("all")
                  setStatusFilter("all")
                }}
              >
                <Filter className="h-4 w-4 mr-2" />
                Clear Filters
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Notifications List */}
      <Card>
        <CardHeader>
          <CardTitle>Notifications ({filteredNotifications.length})</CardTitle>
          <CardDescription>Your recent notifications and updates</CardDescription>
        </CardHeader>
        <CardContent>
          {filteredNotifications.length === 0 ? (
            <div className="text-center py-8">
              <Bell className="h-12 w-12 text-[#7F8C8D] mx-auto mb-4" />
              <p className="text-[#7F8C8D]">No notifications found</p>
            </div>
          ) : (
            <div className="space-y-4">
              {filteredNotifications.map((notification) => (
                <div
                  key={notification.id}
                  className={`p-4 border rounded-lg ${
                    !notification.isRead ? "bg-blue-50 border-blue-200" : "bg-white"
                  }`}
                >
                  <div className="flex items-start justify-between">
                    <div className="flex items-start gap-3 flex-1">
                      {getTypeIcon(notification.type)}
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-1">
                          <h4 className="font-medium text-[#2C3E50]">{notification.title}</h4>
                          <Badge className={getTypeColor(notification.type)}>{notification.type}</Badge>
                          {!notification.isRead && (
                            <Badge variant="destructive" className="text-xs">
                              New
                            </Badge>
                          )}
                        </div>
                        <p className="text-[#7F8C8D] text-sm mb-2">{notification.message}</p>
                        <div className="flex items-center gap-2 text-xs text-[#7F8C8D]">
                          <Clock className="h-3 w-3" />
                          {formatDate(notification.createdAt)}
                        </div>
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      {!notification.isRead && (
                        <Button size="sm" variant="outline" onClick={() => handleMarkAsRead(notification.id)}>
                          <CheckCircle className="h-4 w-4" />
                        </Button>
                      )}
                      <AlertDialog>
                        <AlertDialogTrigger asChild>
                          <Button size="sm" variant="destructive">
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </AlertDialogTrigger>
                        <AlertDialogContent>
                          <AlertDialogHeader>
                            <AlertDialogTitle>Delete Notification</AlertDialogTitle>
                            <AlertDialogDescription>
                              Are you sure you want to delete this notification? This action cannot be undone.
                            </AlertDialogDescription>
                          </AlertDialogHeader>
                          <AlertDialogFooter>
                            <AlertDialogCancel>Cancel</AlertDialogCancel>
                            <AlertDialogAction
                              onClick={() => handleDeleteNotification(notification.id)}
                              className="bg-red-500 hover:bg-red-600"
                            >
                              Delete
                            </AlertDialogAction>
                          </AlertDialogFooter>
                        </AlertDialogContent>
                      </AlertDialog>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/driver/notifications/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/customer/bookings/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { toast } from "sonner"
import {
  MapPin,
  Clock,
  Calendar,
  QrCode,
  Search,
  Filter,
  Eye,
  Trash2,
  Download,
  Star,
  Phone,
  Navigation,
  Plus,
} from "lucide-react"

interface Booking {
  id: string
  date: string
  time: string
  pickup: string
  dropoff: string
  status: "pending" | "confirmed" | "in_progress" | "completed" | "cancelled"
  qrCode: string
  foodItems: string[]
  driver?: string
  vehicle?: string
  totalAmount: number
  partySize: number
  specialRequests?: string
  rating?: number
  createdAt: string
}

export default function BookingsPage() {
  const [bookings, setBookings] = useState<Booking[]>([
    {
      id: "RD001",
      date: "2024-01-15",
      time: "12:30 PM",
      pickup: "City Center",
      dropoff: "Business District",
      status: "confirmed",
      qrCode: "QR123456",
      foodItems: ["Gourmet Burger", "Truffle Fries"],
      driver: "Michael Johnson",
      vehicle: "Toyota Hiace - KCA 123A",
      totalAmount: 2200,
      partySize: 2,
      specialRequests: "Extra napkins please",
      createdAt: "2024-01-10T10:30:00Z",
    },
    {
      id: "RD002",
      date: "2024-01-10",
      time: "06:00 PM",
      pickup: "University Campus",
      dropoff: "Shopping Mall",
      status: "completed",
      qrCode: "QR789012",
      foodItems: ["Chicken Wrap", "Fresh Juice"],
      driver: "Sarah Wilson",
      vehicle: "Nissan Matatu - KBZ 456B",
      totalAmount: 1800,
      partySize: 1,
      rating: 5,
      createdAt: "2024-01-05T14:20:00Z",
    },
    {
      id: "RD003",
      date: "2024-01-08",
      time: "08:00 AM",
      pickup: "Residential Area A",
      dropoff: "City Center",
      status: "cancelled",
      qrCode: "QR345678",
      foodItems: ["Caesar Salad"],
      totalAmount: 1500,
      partySize: 1,
      specialRequests: "Vegetarian meal only",
      createdAt: "2024-01-03T09:15:00Z",
    },
  ])

const [filteredBookings, setFilteredBookings] = useState<Booking[]>(bookings)
  const [searchTerm, setSearchTerm] = useState("")
  const [statusFilter, setStatusFilter] = useState("all")
  const [selectedBooking, setSelectedBooking] = useState<Booking | null>(null)
  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
  const [bookingToDelete, setBookingToDelete] = useState<string | null>(null)

useEffect(() => {
    let filtered = bookings

if (searchTerm) {
      filtered = filtered.filter(
        (booking) =>
          booking.id.toLowerCase().includes(searchTerm.toLowerCase()) ||
          booking.pickup.toLowerCase().includes(searchTerm.toLowerCase()) ||
          booking.dropoff.toLowerCase().includes(searchTerm.toLowerCase()) ||
          booking.driver?.toLowerCase().includes(searchTerm.toLowerCase()),
      )
    }

if (statusFilter !== "all") {
      filtered = filtered.filter((booking) => booking.status === statusFilter)
    }

setFilteredBookings(filtered)
  }, [bookings, searchTerm, statusFilter])

const getStatusColor = (status: string) => {
    switch (status) {
      case "pending":
        return "bg-yellow-100 text-yellow-800"
      case "confirmed":
        return "bg-green-100 text-green-800"
      case "in_progress":
        return "bg-blue-100 text-blue-800"
      case "completed":
        return "bg-gray-100 text-gray-800"
      case "cancelled":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const handleCancelBooking = (bookingId: string) => {
    setBookings((prev) =>
      prev.map((booking) => (booking.id === bookingId ? { ...booking, status: "cancelled" as const } : booking)),
    )
    toast.success("Booking cancelled successfully")
  }

const handleDeleteBooking = (bookingId: string) => {
    setBookings((prev) => prev.filter((booking) => booking.id !== bookingId))
    setShowDeleteDialog(false)
    setBookingToDelete(null)
    toast.success("Booking deleted successfully")
  }

const handleRateBooking = (bookingId: string, rating: number) => {
    setBookings((prev) => prev.map((booking) => (booking.id === bookingId ? { ...booking, rating } : booking)))
    toast.success("Rating submitted successfully")
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-[#2C3E50]">My Bookings</h1>
          <p className="text-[#7F8C8D] mt-2">Manage your ride bookings and history</p>
        </div>
        <Button asChild className="bg-[#27AE60] hover:bg-[#229954]">
          <Link href="/customer/book">
            <Plus className="h-4 w-4 mr-2" />
            New Booking
          </Link>
        </Button>
      </div>

{/* Filters */}
      <Card>
        <CardContent className="p-6">
          <div className="flex flex-col md:flex-row gap-4">
            <div className="flex-1">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[#7F8C8D] h-4 w-4" />
                <Input
                  placeholder="Search bookings..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10"
                />
              </div>
            </div>
            <Select value={statusFilter} onValueChange={setStatusFilter}>
              <SelectTrigger className="w-full md:w-48">
                <Filter className="h-4 w-4 mr-2" />
                <SelectValue placeholder="Filter by status" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Status</SelectItem>
                <SelectItem value="pending">Pending</SelectItem>
                <SelectItem value="confirmed">Confirmed</SelectItem>
                <SelectItem value="in_progress">In Progress</SelectItem>
                <SelectItem value="completed">Completed</SelectItem>
                <SelectItem value="cancelled">Cancelled</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

{/* Bookings List */}
      <div className="space-y-4">
        {filteredBookings.length > 0 ? (
          filteredBookings.map((booking) => (
            <Card key={booking.id} className="hover:shadow-md transition-shadow">
              <CardContent className="p-6">
                <div className="flex items-center justify-between mb-4">
                  <div>
                    <h3 className="font-semibold text-[#2C3E50]">Booking #{booking.id}</h3>
                    <p className="text-sm text-[#7F8C8D]">
                      {booking.date} at {booking.time} • {booking.partySize}{" "}
                      {booking.partySize === 1 ? "person" : "people"}
                    </p>
                  </div>
                  <Badge className={getStatusColor(booking.status)}>
                    {booking.status.replace("_", " ").toUpperCase()}
                  </Badge>
                </div>

<div className="grid md:grid-cols-2 gap-4 mb-4">
                  <div className="space-y-2">
                    <div className="flex items-center gap-2">
                      <MapPin className="h-4 w-4 text-[#27AE60]" />
                      <span className="text-sm">
                        <strong>From:</strong> {booking.pickup}
                      </span>
                    </div>
                    <div className="flex items-center gap-2">
                      <MapPin className="h-4 w-4 text-[#2980B9]" />
                      <span className="text-sm">
                        <strong>To:</strong> {booking.dropoff}
                      </span>
                    </div>
                    {booking.driver && (
                      <div className="flex items-center gap-2">
                        <Clock className="h-4 w-4 text-[#7F8C8D]" />
                        <span className="text-sm">
                          <strong>Driver:</strong> {booking.driver}
                        </span>
                      </div>
                    )}
                    <div className="flex items-center gap-2">
                      <Calendar className="h-4 w-4 text-[#7F8C8D]" />
                      <span className="text-sm">
                        <strong>Food:</strong> {booking.foodItems.join(", ")}
                      </span>
                    </div>
                  </div>

<div className="space-y-2">
                    <div className="text-sm">
                      <strong>Total Amount:</strong> KSH {booking.totalAmount.toLocaleString()}
                    </div>
                    {booking.specialRequests && (
                      <div className="text-sm">
                        <strong>Special Requests:</strong> {booking.specialRequests}
                      </div>
                    )}
                    {booking.status === "confirmed" && (
                      <div className="flex items-center gap-2 p-2 bg-green-50 rounded border">
                        <QrCode className="h-4 w-4 text-[#27AE60]" />
                        <span className="text-sm font-medium">QR: {booking.qrCode}</span>
                      </div>
                    )}
                    {booking.rating && (
                      <div className="flex items-center gap-1">
                        <strong className="text-sm">Rating:</strong>
                        {[...Array(5)].map((_, i) => (
                          <Star
                            key={i}
                            className={`h-4 w-4 ${
                              i < booking.rating! ? "text-yellow-400 fill-current" : "text-gray-300"
                            }`}
                          />
                        ))}
                      </div>
                    )}
                  </div>
                </div>

<div className="flex flex-wrap gap-2">
                  <Button
                    size="sm"
                    variant="outline"
                    onClick={() => setSelectedBooking(booking)}
                    className="bg-transparent"
                  >
                    <Eye className="h-4 w-4 mr-2" />
                    View Details
                  </Button>

{booking.status === "confirmed" && (
                    <>
                      <Button size="sm" className="bg-[#2980B9] hover:bg-[#2471A3]">
                        <Navigation className="h-4 w-4 mr-2" />
                        Track Live
                      </Button>
                      <Button size="sm" variant="outline" className="bg-transparent">
                        <Phone className="h-4 w-4 mr-2" />
                        Call Driver
                      </Button>
                    </>
                  )}

{booking.status === "completed" && !booking.rating && (
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() => handleRateBooking(booking.id, 5)}
                      className="bg-transparent text-yellow-600 border-yellow-600 hover:bg-yellow-50"
                    >
                      <Star className="h-4 w-4 mr-2" />
                      Rate Trip
                    </Button>
                  )}

<Button size="sm" variant="outline" className="bg-transparent">
                    <Download className="h-4 w-4 mr-2" />
                    Receipt
                  </Button>

{(booking.status === "pending" || booking.status === "confirmed") && (
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() => handleCancelBooking(booking.id)}
                      className="text-red-600 border-red-600 hover:bg-red-50 bg-transparent"
                    >
                      Cancel
                    </Button>
                  )}

<Button
                    size="sm"
                    variant="outline"
                    onClick={() => {
                      setBookingToDelete(booking.id)
                      setShowDeleteDialog(true)
                    }}
                    className="text-red-600 border-red-600 hover:bg-red-50 bg-transparent"
                  >
                    <Trash2 className="h-4 w-4 mr-2" />
                    Delete
                  </Button>
                </div>
              </CardContent>
            </Card>
          ))
        ) : (
          <Card>
            <CardContent className="text-center py-12">
              <Calendar className="h-16 w-16 text-[#7F8C8D] mx-auto mb-4" />
              <h3 className="text-lg font-semibold text-[#2C3E50] mb-2">No bookings found</h3>
              <p className="text-[#7F8C8D] mb-4">
                {searchTerm || statusFilter !== "all"
                  ? "Try adjusting your search or filter criteria"
                  : "You haven't made any bookings yet"}
              </p>
              <Button asChild className="bg-[#27AE60] hover:bg-[#229954]">
                <Link href="/customer/book">Book Your First Ride</Link>
              </Button>
            </CardContent>
          </Card>
        )}
      </div>

{/* Booking Details Dialog */}
      {selectedBooking && (
        <Dialog open={!!selectedBooking} onOpenChange={() => setSelectedBooking(null)}>
          <DialogContent className="max-w-2xl">
            <DialogHeader>
              <DialogTitle>Booking Details - #{selectedBooking.id}</DialogTitle>
              <DialogDescription>Complete information about your booking</DialogDescription>
            </DialogHeader>
            <div className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <h4 className="font-medium text-[#2C3E50] mb-2">Trip Information</h4>
                  <div className="space-y-2 text-sm">
                    <p>
                      <strong>Date:</strong> {selectedBooking.date}
                    </p>
                    <p>
                      <strong>Time:</strong> {selectedBooking.time}
                    </p>
                    <p>
                      <strong>From:</strong> {selectedBooking.pickup}
                    </p>
                    <p>
                      <strong>To:</strong> {selectedBooking.dropoff}
                    </p>
                    <p>
                      <strong>Party Size:</strong> {selectedBooking.partySize}
                    </p>
                    <p>
                      <strong>Status:</strong>
                      <Badge className={`ml-2 ${getStatusColor(selectedBooking.status)}`}>
                        {selectedBooking.status.replace("_", " ").toUpperCase()}
                      </Badge>
                    </p>
                  </div>
                </div>
                <div>
                  <h4 className="font-medium text-[#2C3E50] mb-2">Service Details</h4>
                  <div className="space-y-2 text-sm">
                    {selectedBooking.driver && (
                      <p>
                        <strong>Driver:</strong> {selectedBooking.driver}
                      </p>
                    )}
                    {selectedBooking.vehicle && (
                      <p>
                        <strong>Vehicle:</strong> {selectedBooking.vehicle}
                      </p>
                    )}
                    <p>
                      <strong>Food Items:</strong> {selectedBooking.foodItems.join(", ")}
                    </p>
                    <p>
                      <strong>Total Amount:</strong> KSH {selectedBooking.totalAmount.toLocaleString()}
                    </p>
                    {selectedBooking.qrCode && (
                      <p>
                        <strong>QR Code:</strong> {selectedBooking.qrCode}
                      </p>
                    )}
                  </div>
                </div>
              </div>
              {selectedBooking.specialRequests && (
                <div>
                  <h4 className="font-medium text-[#2C3E50] mb-2">Special Requests</h4>
                  <p className="text-sm bg-gray-50 p-3 rounded">{selectedBooking.specialRequests}</p>
                </div>
              )}
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setSelectedBooking(null)} className="bg-transparent">
                Close
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      )}

{/* Delete Confirmation Dialog */}
      <Dialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Delete Booking</DialogTitle>
            <DialogDescription>
              Are you sure you want to delete this booking? This action cannot be undone.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowDeleteDialog(false)} className="bg-transparent">
              Cancel
            </Button>
            <Button variant="destructive" onClick={() => bookingToDelete && handleDeleteBooking(bookingToDelete)}>
              Delete
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/customer/bookings/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/customer/profile/page.tsx" isMerged="true"
"use client"

import type React from "react"

interface UserProfile {
  id: string
  firstName: string
  lastName: string
  email: string
  phone: string
  dateOfBirth: string
  address: string
  city: string
  emergencyContact: string
  emergencyPhone: string
  profileImage: string
  memberSince: string
  totalRides: number
  averageRating: number
  loyaltyPoints: number
  preferredPayment: string
  dietaryRestrictions: string
  bio: string
}

export default function ProfilePage() {
  const [profile, setProfile] = useState<UserProfile>({
    id: "user_123",
    firstName: "John",
    lastName: "Doe",
    email: "john.doe@example.com",
    phone: "+254 700 123 456",
    dateOfBirth: "1990-05-15",
    address: "123 Main Street, Apartment 4B",
    city: "Nairobi",
    emergencyContact: "Jane Doe",
    emergencyPhone: "+254 700 654 321",
    profileImage: "",
    memberSince: "2023-01-15",
    totalRides: 24,
    averageRating: 4.8,
    loyaltyPoints: 1250,
    preferredPayment: "mpesa",
    dietaryRestrictions: "Vegetarian",
    bio: "Love exploring new places and trying different cuisines through RideDine!",
  })

const [isEditing, setIsEditing] = useState(false)
  const [editedProfile, setEditedProfile] = useState<UserProfile>(profile)

const handleSave = () => {
    setProfile(editedProfile)
    setIsEditing(false)
    toast.success("Profile updated successfully!")
  }

const handleCancel = () => {
    setEditedProfile(profile)
    setIsEditing(false)
  }

const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (file) {
      const reader = new FileReader()
      reader.onload = (e) => {
        const imageUrl = e.target?.result as string
        setEditedProfile({ ...editedProfile, profileImage: imageUrl })
      }
      reader.readAsDataURL(file)
    }
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-[#2C3E50]">My Profile</h1>
          <p className="text-[#7F8C8D] mt-2">Manage your personal information and preferences</p>
        </div>
        {!isEditing ? (
          <Button onClick={() => setIsEditing(true)} className="bg-[#27AE60] hover:bg-[#229954]">
            <Edit className="h-4 w-4 mr-2" />
            Edit Profile
          </Button>
        ) : (
          <div className="flex gap-2">
            <Button onClick={handleSave} className="bg-[#27AE60] hover:bg-[#229954]">
              <Save className="h-4 w-4 mr-2" />
              Save Changes
            </Button>
            <Button onClick={handleCancel} variant="outline" className="bg-transparent">
              <X className="h-4 w-4 mr-2" />
              Cancel
            </Button>
          </div>
        )}
      </div>

<div className="grid lg:grid-cols-3 gap-6">
        {/* Profile Summary */}
        <Card className="lg:col-span-1">
          <CardContent className="p-6">
            <div className="text-center">
              <div className="relative inline-block mb-4">
                <Avatar className="w-24 h-24">
                  <AvatarImage src={editedProfile.profileImage || "/placeholder.svg"} />
                  <AvatarFallback className="bg-[#27AE60] text-white text-2xl">
                    {editedProfile.firstName[0]}
                    {editedProfile.lastName[0]}
                  </AvatarFallback>
                </Avatar>
                {isEditing && (
                  <label className="absolute bottom-0 right-0 bg-[#27AE60] text-white p-2 rounded-full cursor-pointer hover:bg-[#229954]">
                    <Camera className="h-4 w-4" />
                    <input type="file" accept="image/*" onChange={handleImageUpload} className="hidden" />
                  </label>
                )}
              </div>
              <h2 className="text-xl font-bold text-[#2C3E50]">
                {profile.firstName} {profile.lastName}
              </h2>
              <p className="text-[#7F8C8D] mb-4">{profile.email}</p>

<div className="space-y-3">
                <div className="flex items-center justify-between">
                  <span className="text-sm text-[#7F8C8D]">Member Since</span>
                  <span className="text-sm font-medium text-[#2C3E50]">
                    {new Date(profile.memberSince).toLocaleDateString()}
                  </span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-[#7F8C8D]">Total Rides</span>
                  <Badge className="bg-[#27AE60] text-white">{profile.totalRides}</Badge>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-[#7F8C8D]">Average Rating</span>
                  <div className="flex items-center gap-1">
                    <Star className="h-4 w-4 text-yellow-400 fill-current" />
                    <span className="text-sm font-medium text-[#2C3E50]">{profile.averageRating}</span>
                  </div>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-[#7F8C8D]">Loyalty Points</span>
                  <Badge className="bg-[#2980B9] text-white">{profile.loyaltyPoints}</Badge>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Profile Details */}
        <div className="lg:col-span-2 space-y-6">
          {/* Personal Information */}
          <Card>
            <CardHeader>
              <CardTitle className="text-[#2C3E50]">Personal Information</CardTitle>
              <CardDescription>Your basic personal details</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="firstName">First Name</Label>
                  <Input
                    id="firstName"
                    value={editedProfile.firstName}
                    onChange={(e) => setEditedProfile({ ...editedProfile, firstName: e.target.value })}
                    disabled={!isEditing}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="lastName">Last Name</Label>
                  <Input
                    id="lastName"
                    value={editedProfile.lastName}
                    onChange={(e) => setEditedProfile({ ...editedProfile, lastName: e.target.value })}
                    disabled={!isEditing}
                  />
                </div>
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="email">Email Address</Label>
                  <Input
                    id="email"
                    type="email"
                    value={editedProfile.email}
                    onChange={(e) => setEditedProfile({ ...editedProfile, email: e.target.value })}
                    disabled={!isEditing}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="phone">Phone Number</Label>
                  <Input
                    id="phone"
                    value={editedProfile.phone}
                    onChange={(e) => setEditedProfile({ ...editedProfile, phone: e.target.value })}
                    disabled={!isEditing}
                  />
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="dateOfBirth">Date of Birth</Label>
                <Input
                  id="dateOfBirth"
                  type="date"
                  value={editedProfile.dateOfBirth}
                  onChange={(e) => setEditedProfile({ ...editedProfile, dateOfBirth: e.target.value })}
                  disabled={!isEditing}
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="bio">Bio</Label>
                <Textarea
                  id="bio"
                  value={editedProfile.bio}
                  onChange={(e) => setEditedProfile({ ...editedProfile, bio: e.target.value })}
                  disabled={!isEditing}
                  rows={3}
                />
              </div>
            </CardContent>
          </Card>

{/* Address Information */}
          <Card>
            <CardHeader>
              <CardTitle className="text-[#2C3E50]">Address Information</CardTitle>
              <CardDescription>Your location details</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="address">Street Address</Label>
                <Input
                  id="address"
                  value={editedProfile.address}
                  onChange={(e) => setEditedProfile({ ...editedProfile, address: e.target.value })}
                  disabled={!isEditing}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="city">City</Label>
                <Input
                  id="city"
                  value={editedProfile.city}
                  onChange={(e) => setEditedProfile({ ...editedProfile, city: e.target.value })}
                  disabled={!isEditing}
                />
              </div>
            </CardContent>
          </Card>

{/* Emergency Contact */}
          <Card>
            <CardHeader>
              <CardTitle className="text-[#2C3E50]">Emergency Contact</CardTitle>
              <CardDescription>Person to contact in case of emergency</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="emergencyContact">Contact Name</Label>
                  <Input
                    id="emergencyContact"
                    value={editedProfile.emergencyContact}
                    onChange={(e) => setEditedProfile({ ...editedProfile, emergencyContact: e.target.value })}
                    disabled={!isEditing}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="emergencyPhone">Contact Phone</Label>
                  <Input
                    id="emergencyPhone"
                    value={editedProfile.emergencyPhone}
                    onChange={(e) => setEditedProfile({ ...editedProfile, emergencyPhone: e.target.value })}
                    disabled={!isEditing}
                  />
                </div>
              </div>
            </CardContent>
          </Card>

{/* Preferences */}
          <Card>
            <CardHeader>
              <CardTitle className="text-[#2C3E50]">Preferences</CardTitle>
              <CardDescription>Your service preferences</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="preferredPayment">Preferred Payment Method</Label>
                <Select
                  value={editedProfile.preferredPayment}
                  onValueChange={(value) => setEditedProfile({ ...editedProfile, preferredPayment: value })}
                  disabled={!isEditing}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="mpesa">M-PESA</SelectItem>
                    <SelectItem value="card">Credit/Debit Card</SelectItem>
                    <SelectItem value="cash">Cash</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label htmlFor="dietaryRestrictions">Dietary Restrictions</Label>
                <Input
                  id="dietaryRestrictions"
                  value={editedProfile.dietaryRestrictions}
                  onChange={(e) => setEditedProfile({ ...editedProfile, dietaryRestrictions: e.target.value })}
                  disabled={!isEditing}
                  placeholder="e.g., Vegetarian, Vegan, Gluten-free"
                />
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/customer/payments/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Badge } from "@/components/ui/badge"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { toast } from "sonner"
import { CreditCard, Smartphone, Plus, Edit, Trash2, Star, Shield, Wallet } from "lucide-react"

interface PaymentMethod {
  id: string
  type: "card" | "mpesa" | "wallet"
  name: string
  details: string
  isDefault: boolean
  lastUsed: string
  expiryDate?: string
}

export default function PaymentMethodsPage() {
  const [paymentMethods, setPaymentMethods] = useState<PaymentMethod[]>([
    {
      id: "pm_1",
      type: "mpesa",
      name: "M-PESA",
      details: "+254 700 123 456",
      isDefault: true,
      lastUsed: "2024-01-10",
    },
    {
      id: "pm_2",
      type: "card",
      name: "Visa Card",
      details: "**** **** **** 1234",
      isDefault: false,
      lastUsed: "2024-01-05",
      expiryDate: "12/26",
    },
    {
      id: "pm_3",
      type: "wallet",
      name: "RideDine Wallet",
      details: "KSH 2,500 available",
      isDefault: false,
      lastUsed: "2024-01-08",
    },
  ])

const [showAddDialog, setShowAddDialog] = useState(false)
  const [showEditDialog, setShowEditDialog] = useState(false)
  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
  const [selectedMethod, setSelectedMethod] = useState<PaymentMethod | null>(null)
  const [newMethod, setNewMethod] = useState({
    type: "mpesa" as const,
    name: "",
    details: "",
    expiryDate: "",
  })

const getPaymentIcon = (type: string) => {
    switch (type) {
      case "mpesa":
        return <Smartphone className="h-6 w-6 text-[#27AE60]" />
      case "card":
        return <CreditCard className="h-6 w-6 text-[#2980B9]" />
      case "wallet":
        return <Wallet className="h-6 w-6 text-[#F39C12]" />
      default:
        return <CreditCard className="h-6 w-6 text-[#7F8C8D]" />
    }
  }

const handleAddPaymentMethod = () => {
    const id = `pm_${Date.now()}`
    const method: PaymentMethod = {
      id,
      type: newMethod.type,
      name: newMethod.name,
      details: newMethod.details,
      isDefault: paymentMethods.length === 0,
      lastUsed: new Date().toISOString().split("T")[0],
      expiryDate: newMethod.expiryDate || undefined,
    }

setPaymentMethods([...paymentMethods, method])
    setNewMethod({ type: "mpesa", name: "", details: "", expiryDate: "" })
    setShowAddDialog(false)
    toast.success("Payment method added successfully!")
  }

const handleEditPaymentMethod = () => {
    if (!selectedMethod) return

setPaymentMethods((prev) =>
      prev.map((method) =>
        method.id === selectedMethod.id
          ? { ...method, name: newMethod.name, details: newMethod.details, expiryDate: newMethod.expiryDate }
          : method,
      ),
    )
    setShowEditDialog(false)
    setSelectedMethod(null)
    toast.success("Payment method updated successfully!")
  }

const handleDeletePaymentMethod = () => {
    if (!selectedMethod) return

setPaymentMethods((prev) => prev.filter((method) => method.id !== selectedMethod.id))
    setShowDeleteDialog(false)
    setSelectedMethod(null)
    toast.success("Payment method deleted successfully!")
  }

const handleSetDefault = (methodId: string) => {
    setPaymentMethods((prev) =>
      prev.map((method) => ({
        ...method,
        isDefault: method.id === methodId,
      })),
    )
    toast.success("Default payment method updated!")
  }

const openEditDialog = (method: PaymentMethod) => {
    setSelectedMethod(method)
    setNewMethod({
      type: method.type,
      name: method.name,
      details: method.details,
      expiryDate: method.expiryDate || "",
    })
    setShowEditDialog(true)
  }

const openDeleteDialog = (method: PaymentMethod) => {
    setSelectedMethod(method)
    setShowDeleteDialog(true)
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-[#2C3E50]">Payment Methods</h1>
          <p className="text-[#7F8C8D] mt-2">Manage your payment options for bookings</p>
        </div>
        <Button onClick={() => setShowAddDialog(true)} className="bg-[#27AE60] hover:bg-[#229954]">
          <Plus className="h-4 w-4 mr-2" />
          Add Payment Method
        </Button>
      </div>

{/* Security Notice */}
      <Card className="border-blue-200 bg-blue-50">
        <CardContent className="p-4">
          <div className="flex items-start gap-3">
            <Shield className="h-5 w-5 text-[#2980B9] mt-0.5" />
            <div className="text-sm">
              <p className="font-medium text-blue-800 mb-1">Secure Payment Processing</p>
              <p className="text-blue-700">
                Your payment information is encrypted and secure. We never store sensitive card details on our servers.
              </p>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Payment Methods List */}
      <div className="grid gap-4">
        {paymentMethods.length > 0 ? (
          paymentMethods.map((method) => (
            <Card key={method.id} className="hover:shadow-md transition-shadow">
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-4">
                    {getPaymentIcon(method.type)}
                    <div>
                      <div className="flex items-center gap-2">
                        <h3 className="font-semibold text-[#2C3E50]">{method.name}</h3>
                        {method.isDefault && (
                          <Badge className="bg-[#27AE60] text-white">
                            <Star className="h-3 w-3 mr-1" />
                            Default
                          </Badge>
                        )}
                      </div>
                      <p className="text-[#7F8C8D] text-sm">{method.details}</p>
                      {method.expiryDate && <p className="text-[#7F8C8D] text-xs">Expires: {method.expiryDate}</p>}
                      <p className="text-[#7F8C8D] text-xs">
                        Last used: {new Date(method.lastUsed).toLocaleDateString()}
                      </p>
                    </div>
                  </div>

<div className="flex items-center gap-2">
                    {!method.isDefault && (
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => handleSetDefault(method.id)}
                        className="bg-transparent"
                      >
                        Set Default
                      </Button>
                    )}
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() => openEditDialog(method)}
                      className="bg-transparent"
                    >
                      <Edit className="h-4 w-4" />
                    </Button>
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() => openDeleteDialog(method)}
                      className="text-red-600 border-red-600 hover:bg-red-50 bg-transparent"
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))
        ) : (
          <Card>
            <CardContent className="text-center py-12">
              <CreditCard className="h-16 w-16 text-[#7F8C8D] mx-auto mb-4" />
              <h3 className="text-lg font-semibold text-[#2C3E50] mb-2">No Payment Methods</h3>
              <p className="text-[#7F8C8D] mb-4">Add a payment method to start booking rides</p>
              <Button onClick={() => setShowAddDialog(true)} className="bg-[#27AE60] hover:bg-[#229954]">
                Add Your First Payment Method
              </Button>
            </CardContent>
          </Card>
        )}
      </div>

{/* Add Payment Method Dialog */}
      <Dialog open={showAddDialog} onOpenChange={setShowAddDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Add Payment Method</DialogTitle>
            <DialogDescription>Add a new payment method to your account</DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="paymentType">Payment Type</Label>
              <Select
                value={newMethod.type}
                onValueChange={(value: "mpesa" | "card" | "wallet") => setNewMethod({ ...newMethod, type: value })}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="mpesa">M-PESA</SelectItem>
                  <SelectItem value="card">Credit/Debit Card</SelectItem>
                  <SelectItem value="wallet">Digital Wallet</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label htmlFor="paymentName">Name</Label>
              <Input
                id="paymentName"
                value={newMethod.name}
                onChange={(e) => setNewMethod({ ...newMethod, name: e.target.value })}
                placeholder={
                  newMethod.type === "mpesa" ? "M-PESA" : newMethod.type === "card" ? "My Visa Card" : "My Wallet"
                }
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="paymentDetails">Details</Label>
              <Input
                id="paymentDetails"
                value={newMethod.details}
                onChange={(e) => setNewMethod({ ...newMethod, details: e.target.value })}
                placeholder={
                  newMethod.type === "mpesa"
                    ? "+254 700 000 000"
                    : newMethod.type === "card"
                      ? "1234 5678 9012 3456"
                      : "wallet@example.com"
                }
              />
            </div>

{newMethod.type === "card" && (
              <div className="space-y-2">
                <Label htmlFor="expiryDate">Expiry Date</Label>
                <Input
                  id="expiryDate"
                  value={newMethod.expiryDate}
                  onChange={(e) => setNewMethod({ ...newMethod, expiryDate: e.target.value })}
                  placeholder="MM/YY"
                />
              </div>
            )}
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowAddDialog(false)} className="bg-transparent">
              Cancel
            </Button>
            <Button onClick={handleAddPaymentMethod} className="bg-[#27AE60] hover:bg-[#229954]">
              Add Payment Method
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Edit Payment Method Dialog */}
      <Dialog open={showEditDialog} onOpenChange={setShowEditDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Edit Payment Method</DialogTitle>
            <DialogDescription>Update your payment method details</DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="editPaymentName">Name</Label>
              <Input
                id="editPaymentName"
                value={newMethod.name}
                onChange={(e) => setNewMethod({ ...newMethod, name: e.target.value })}
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="editPaymentDetails">Details</Label>
              <Input
                id="editPaymentDetails"
                value={newMethod.details}
                onChange={(e) => setNewMethod({ ...newMethod, details: e.target.value })}
              />
            </div>

{newMethod.type === "card" && (
              <div className="space-y-2">
                <Label htmlFor="editExpiryDate">Expiry Date</Label>
                <Input
                  id="editExpiryDate"
                  value={newMethod.expiryDate}
                  onChange={(e) => setNewMethod({ ...newMethod, expiryDate: e.target.value })}
                  placeholder="MM/YY"
                />
              </div>
            )}
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowEditDialog(false)} className="bg-transparent">
              Cancel
            </Button>
            <Button onClick={handleEditPaymentMethod} className="bg-[#27AE60] hover:bg-[#229954]">
              Update Payment Method
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Delete Confirmation Dialog */}
      <Dialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Delete Payment Method</DialogTitle>
            <DialogDescription>
              Are you sure you want to delete this payment method? This action cannot be undone.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowDeleteDialog(false)} className="bg-transparent">
              Cancel
            </Button>
            <Button variant="destructive" onClick={handleDeletePaymentMethod}>
              Delete
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/customer/notifications/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { toast } from "sonner"
import {
  Bell,
  Search,
  Filter,
  Check,
  CheckCheck,
  Trash2,
  Calendar,
  CreditCard,
  Star,
  AlertTriangle,
  Info,
  Gift,
} from "lucide-react"

interface Notification {
  id: string
  title: string
  message: string
  type: "booking" | "payment" | "promotion" | "system" | "review" | "alert"
  isRead: boolean
  createdAt: string
  data?: any
}

export default function NotificationsPage() {
  const [notifications, setNotifications] = useState<Notification[]>([
    {
      id: "notif_1",
      title: "Booking Confirmed",
      message: "Your ride for Jan 15 at 12:30 PM has been confirmed. Driver: Michael Johnson",
      type: "booking",
      isRead: false,
      createdAt: "2024-01-10T10:30:00Z",
      data: { bookingId: "RD001" },
    },
    {
      id: "notif_2",
      title: "Payment Processed",
      message: "Payment of KSH 2,200 has been successfully processed for booking #RD001",
      type: "payment",
      isRead: false,
      createdAt: "2024-01-10T10:25:00Z",
      data: { amount: 2200, bookingId: "RD001" },
    },
    {
      id: "notif_3",
      title: "Special Offer!",
      message: "Get 20% off your next ride! Use code SAVE20. Valid until Jan 31st.",
      type: "promotion",
      isRead: false,
      createdAt: "2024-01-09T09:00:00Z",
      data: { promoCode: "SAVE20", discount: 20 },
    },
    {
      id: "notif_4",
      title: "Trip Completed",
      message: "Your trip to Business District has been completed. Please rate your experience.",
      type: "review",
      isRead: true,
      createdAt: "2024-01-08T18:45:00Z",
      data: { bookingId: "RD002" },
    },
    {
      id: "notif_5",
      title: "System Maintenance",
      message: "Scheduled maintenance on Jan 20th from 2:00 AM to 4:00 AM. Service may be temporarily unavailable.",
      type: "system",
      isRead: true,
      createdAt: "2024-01-07T12:00:00Z",
    },
    {
      id: "notif_6",
      title: "Loyalty Points Earned",
      message: "You've earned 50 loyalty points from your recent trip! Total points: 1,250",
      type: "promotion",
      isRead: true,
      createdAt: "2024-01-06T19:30:00Z",
      data: { pointsEarned: 50, totalPoints: 1250 },
    },
  ])

const [filteredNotifications, setFilteredNotifications] = useState<Notification[]>(notifications)
  const [searchTerm, setSearchTerm] = useState("")
  const [typeFilter, setTypeFilter] = useState("all")
  const [statusFilter, setStatusFilter] = useState("all")
  const [selectedNotification, setSelectedNotification] = useState<Notification | null>(null)

useEffect(() => {
    let filtered = notifications

if (searchTerm) {
      filtered = filtered.filter(
        (notification) =>
          notification.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
          notification.message.toLowerCase().includes(searchTerm.toLowerCase()),
      )
    }

if (typeFilter !== "all") {
      filtered = filtered.filter((notification) => notification.type === typeFilter)
    }

if (statusFilter !== "all") {
      filtered = filtered.filter((notification) =>
        statusFilter === "read" ? notification.isRead : !notification.isRead,
      )
    }

setFilteredNotifications(filtered)
  }, [notifications, searchTerm, typeFilter, statusFilter])

const getNotificationIcon = (type: string) => {
    switch (type) {
      case "booking":
        return <Calendar className="h-5 w-5 text-[#27AE60]" />
      case "payment":
        return <CreditCard className="h-5 w-5 text-[#2980B9]" />
      case "promotion":
        return <Gift className="h-5 w-5 text-[#F39C12]" />
      case "system":
        return <Info className="h-5 w-5 text-[#7F8C8D]" />
      case "review":
        return <Star className="h-5 w-5 text-[#F39C12]" />
      case "alert":
        return <AlertTriangle className="h-5 w-5 text-[#E74C3C]" />
      default:
        return <Bell className="h-5 w-5 text-[#7F8C8D]" />
    }
  }

const getTypeColor = (type: string) => {
    switch (type) {
      case "booking":
        return "bg-green-100 text-green-800"
      case "payment":
        return "bg-blue-100 text-blue-800"
      case "promotion":
        return "bg-orange-100 text-orange-800"
      case "system":
        return "bg-gray-100 text-gray-800"
      case "review":
        return "bg-yellow-100 text-yellow-800"
      case "alert":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const handleMarkAllAsRead = () => {
    setNotifications((prev) => prev.map((notification) => ({ ...notification, isRead: true })))
    toast.success("All notifications marked as read")
  }

const handleDeleteAllRead = () => {
    setNotifications((prev) => prev.filter((notification) => !notification.isRead))
    toast.success("All read notifications deleted")
  }

const unreadCount = notifications.filter((n) => !n.isRead).length

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-[#2C3E50]">Notifications</h1>
          <p className="text-[#7F8C8D] mt-2">
            Stay updated with your bookings and account activity
            {unreadCount > 0 && <Badge className="ml-2 bg-red-500 text-white">{unreadCount} unread</Badge>}
          </p>
        </div>
        <div className="flex gap-2">
          {unreadCount > 0 && (
            <Button onClick={handleMarkAllAsRead} variant="outline" className="bg-transparent">
              <CheckCheck className="h-4 w-4 mr-2" />
              Mark All Read
            </Button>
          )}
          <Button onClick={handleDeleteAllRead} variant="outline" className="bg-transparent">
            <Trash2 className="h-4 w-4 mr-2" />
            Clear Read
          </Button>
        </div>
      </div>

{/* Filters */}
      <Card>
        <CardContent className="p-6">
          <div className="flex flex-col md:flex-row gap-4">
            <div className="flex-1">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[#7F8C8D] h-4 w-4" />
                <Input
                  placeholder="Search notifications..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10"
                />
              </div>
            </div>
            <Select value={typeFilter} onValueChange={setTypeFilter}>
              <SelectTrigger className="w-full md:w-48">
                <Filter className="h-4 w-4 mr-2" />
                <SelectValue placeholder="Filter by type" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Types</SelectItem>
                <SelectItem value="booking">Bookings</SelectItem>
                <SelectItem value="payment">Payments</SelectItem>
                <SelectItem value="promotion">Promotions</SelectItem>
                <SelectItem value="review">Reviews</SelectItem>
                <SelectItem value="system">System</SelectItem>
                <SelectItem value="alert">Alerts</SelectItem>
              </SelectContent>
            </Select>
            <Select value={statusFilter} onValueChange={setStatusFilter}>
              <SelectTrigger className="w-full md:w-48">
                <SelectValue placeholder="Filter by status" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Status</SelectItem>
                <SelectItem value="unread">Unread</SelectItem>
                <SelectItem value="read">Read</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

{/* Notifications List */}
      <div className="space-y-3">
        {filteredNotifications.length > 0 ? (
          filteredNotifications.map((notification) => (
            <Card
              key={notification.id}
              className={`hover:shadow-md transition-shadow cursor-pointer ${
                !notification.isRead ? "border-l-4 border-l-[#27AE60] bg-green-50" : ""
              }`}
              onClick={() => setSelectedNotification(notification)}
            >
              <CardContent className="p-4">
                <div className="flex items-start gap-4">
                  <div className="flex-shrink-0 mt-1">{getNotificationIcon(notification.type)}</div>

<div className="flex-1 min-w-0">
                    <div className="flex items-start justify-between gap-2">
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-1">
                          <h3 className={`font-medium ${!notification.isRead ? "text-[#2C3E50]" : "text-[#7F8C8D]"}`}>
                            {notification.title}
                          </h3>
                          <Badge className={getTypeColor(notification.type)}>{notification.type}</Badge>
                          {!notification.isRead && <div className="w-2 h-2 bg-[#27AE60] rounded-full"></div>}
                        </div>
                        <p className={`text-sm ${!notification.isRead ? "text-[#2C3E50]" : "text-[#7F8C8D]"}`}>
                          {notification.message}
                        </p>
                        <p className="text-xs text-[#7F8C8D] mt-2">
                          {new Date(notification.createdAt).toLocaleString()}
                        </p>
                      </div>

<div className="flex items-center gap-2">
                        {!notification.isRead && (
                          <Button
                            size="sm"
                            variant="outline"
                            onClick={(e) => {
                              e.stopPropagation()
                              handleMarkAsRead(notification.id)
                            }}
                            className="bg-transparent"
                          >
                            <Check className="h-4 w-4" />
                          </Button>
                        )}
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={(e) => {
                            e.stopPropagation()
                            handleDeleteNotification(notification.id)
                          }}
                          className="text-red-600 border-red-600 hover:bg-red-50 bg-transparent"
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))
        ) : (
          <Card>
            <CardContent className="text-center py-12">
              <Bell className="h-16 w-16 text-[#7F8C8D] mx-auto mb-4" />
              <h3 className="text-lg font-semibold text-[#2C3E50] mb-2">No notifications found</h3>
              <p className="text-[#7F8C8D]">
                {searchTerm || typeFilter !== "all" || statusFilter !== "all"
                  ? "Try adjusting your search or filter criteria"
                  : "You're all caught up! New notifications will appear here"}
              </p>
            </CardContent>
          </Card>
        )}
      </div>

{/* Notification Details Dialog */}
      {selectedNotification && (
        <Dialog open={!!selectedNotification} onOpenChange={() => setSelectedNotification(null)}>
          <DialogContent>
            <DialogHeader>
              <div className="flex items-center gap-3">
                {getNotificationIcon(selectedNotification.type)}
                <div>
                  <DialogTitle>{selectedNotification.title}</DialogTitle>
                  <DialogDescription>{new Date(selectedNotification.createdAt).toLocaleString()}</DialogDescription>
                </div>
              </div>
            </DialogHeader>
            <div className="space-y-4">
              <div>
                <Badge className={getTypeColor(selectedNotification.type)}>{selectedNotification.type}</Badge>
              </div>
              <p className="text-[#2C3E50]">{selectedNotification.message}</p>
              {selectedNotification.data && (
                <div className="bg-gray-50 p-3 rounded-lg">
                  <h4 className="font-medium text-[#2C3E50] mb-2">Additional Details:</h4>
                  <pre className="text-sm text-[#7F8C8D]">{JSON.stringify(selectedNotification.data, null, 2)}</pre>
                </div>
              )}
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setSelectedNotification(null)} className="bg-transparent">
                Close
              </Button>
              {!selectedNotification.isRead && (
                <Button
                  onClick={() => {
                    handleMarkAsRead(selectedNotification.id)
                    setSelectedNotification(null)
                  }}
                  className="bg-[#27AE60] hover:bg-[#229954]"
                >
                  Mark as Read
                </Button>
              )}
            </DialogFooter>
          </DialogContent>
        </Dialog>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/customer/notifications/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/customer/settings/page.tsx" isMerged="true"
"use client"

interface Settings {
  notifications: {
    email: boolean
    sms: boolean
    push: boolean
    bookingUpdates: boolean
    promotions: boolean
    systemAlerts: boolean
  }
  privacy: {
    shareLocation: boolean
    shareRideHistory: boolean
    allowDataCollection: boolean
  }
  preferences: {
    language: string
    currency: string
    theme: string
    defaultPayment: string
  }
  security: {
    twoFactorAuth: boolean
    loginAlerts: boolean
  }
}

export default function SettingsPage() {
  const [settings, setSettings] = useState<Settings>({
    notifications: {
      email: true,
      sms: true,
      push: true,
      bookingUpdates: true,
      promotions: false,
      systemAlerts: true,
    },
    privacy: {
      shareLocation: true,
      shareRideHistory: false,
      allowDataCollection: true,
    },
    preferences: {
      language: "en",
      currency: "KES",
      theme: "light",
      defaultPayment: "mpesa",
    },
    security: {
      twoFactorAuth: false,
      loginAlerts: true,
    },
  })

const [showCurrentPassword, setShowCurrentPassword] = useState(false)
  const [showNewPassword, setShowNewPassword] = useState(false)
  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
  const [passwordData, setPasswordData] = useState({
    currentPassword: "",
    newPassword: "",
    confirmPassword: "",
  })

const handleSettingChange = (category: keyof Settings, key: string, value: any) => {
    setSettings((prev) => ({
      ...prev,
      [category]: {
        ...prev[category],
        [key]: value,
      },
    }))
  }

const handleSaveSettings = () => {
    // Here you would typically save to your backend
    toast.success("Settings saved successfully!")
  }

const handleChangePassword = () => {
    if (passwordData.newPassword !== passwordData.confirmPassword) {
      toast.error("New passwords don't match!")
      return
    }
    if (passwordData.newPassword.length < 8) {
      toast.error("Password must be at least 8 characters long!")
      return
    }
    // Here you would typically validate current password and update
    toast.success("Password changed successfully!")
    setPasswordData({ currentPassword: "", newPassword: "", confirmPassword: "" })
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-[#2C3E50]">Settings</h1>
          <p className="text-[#7F8C8D] mt-2">Manage your account preferences and security</p>
        </div>
        <Button onClick={handleSaveSettings} className="bg-[#27AE60] hover:bg-[#229954]">
          <Save className="h-4 w-4 mr-2" />
          Save Changes
        </Button>
      </div>

<div className="grid lg:grid-cols-2 gap-6">
        {/* Notifications */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-[#2C3E50]">
              <Bell className="h-5 w-5" />
              Notifications
            </CardTitle>
            <CardDescription>Choose how you want to be notified</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="email-notifications">Email Notifications</Label>
                  <p className="text-sm text-[#7F8C8D]">Receive notifications via email</p>
                </div>
                <Switch
                  id="email-notifications"
                  checked={settings.notifications.email}
                  onCheckedChange={(checked) => handleSettingChange("notifications", "email", checked)}
                />
              </div>

<div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="sms-notifications">SMS Notifications</Label>
                  <p className="text-sm text-[#7F8C8D]">Receive notifications via SMS</p>
                </div>
                <Switch
                  id="sms-notifications"
                  checked={settings.notifications.sms}
                  onCheckedChange={(checked) => handleSettingChange("notifications", "sms", checked)}
                />
              </div>

<div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="push-notifications">Push Notifications</Label>
                  <p className="text-sm text-[#7F8C8D]">Receive push notifications</p>
                </div>
                <Switch
                  id="push-notifications"
                  checked={settings.notifications.push}
                  onCheckedChange={(checked) => handleSettingChange("notifications", "push", checked)}
                />
              </div>

<div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="booking-updates">Booking Updates</Label>
                  <p className="text-sm text-[#7F8C8D]">Updates about your bookings</p>
                </div>
                <Switch
                  id="booking-updates"
                  checked={settings.notifications.bookingUpdates}
                  onCheckedChange={(checked) => handleSettingChange("notifications", "bookingUpdates", checked)}
                />
              </div>

<div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="promotions">Promotions & Offers</Label>
                  <p className="text-sm text-[#7F8C8D]">Special offers and promotions</p>
                </div>
                <Switch
                  id="promotions"
                  checked={settings.notifications.promotions}
                  onCheckedChange={(checked) => handleSettingChange("notifications", "promotions", checked)}
                />
              </div>

<div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="system-alerts">System Alerts</Label>
                  <p className="text-sm text-[#7F8C8D]">Important system notifications</p>
                </div>
                <Switch
                  id="system-alerts"
                  checked={settings.notifications.systemAlerts}
                  onCheckedChange={(checked) => handleSettingChange("notifications", "systemAlerts", checked)}
                />
              </div>
            </div>
          </CardContent>
        </Card>

{/* Privacy */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-[#2C3E50]">
              <Shield className="h-5 w-5" />
              Privacy
            </CardTitle>
            <CardDescription>Control your privacy settings</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center justify-between">
              <div>
                <Label htmlFor="share-location">Share Location</Label>
                <p className="text-sm text-[#7F8C8D]">Allow location sharing for better service</p>
              </div>
              <Switch
                id="share-location"
                checked={settings.privacy.shareLocation}
                onCheckedChange={(checked) => handleSettingChange("privacy", "shareLocation", checked)}
              />
            </div>

<div className="flex items-center justify-between">
              <div>
                <Label htmlFor="share-ride-history">Share Ride History</Label>
                <p className="text-sm text-[#7F8C8D]">Allow sharing ride history for recommendations</p>
              </div>
              <Switch
                id="share-ride-history"
                checked={settings.privacy.shareRideHistory}
                onCheckedChange={(checked) => handleSettingChange("privacy", "shareRideHistory", checked)}
              />
            </div>

<div className="flex items-center justify-between">
              <div>
                <Label htmlFor="data-collection">Data Collection</Label>
                <p className="text-sm text-[#7F8C8D]">Allow data collection for service improvement</p>
              </div>
              <Switch
                id="data-collection"
                checked={settings.privacy.allowDataCollection}
                onCheckedChange={(checked) => handleSettingChange("privacy", "allowDataCollection", checked)}
              />
            </div>
          </CardContent>
        </Card>

{/* Preferences */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-[#2C3E50]">
              <Globe className="h-5 w-5" />
              Preferences
            </CardTitle>
            <CardDescription>Customize your app experience</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="language">Language</Label>
              <Select
                value={settings.preferences.language}
                onValueChange={(value) => handleSettingChange("preferences", "language", value)}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="en">English</SelectItem>
                  <SelectItem value="sw">Swahili</SelectItem>
                  <SelectItem value="fr">French</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label htmlFor="currency">Currency</Label>
              <Select
                value={settings.preferences.currency}
                onValueChange={(value) => handleSettingChange("preferences", "currency", value)}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="KES">Kenyan Shilling (KES)</SelectItem>
                  <SelectItem value="USD">US Dollar (USD)</SelectItem>
                  <SelectItem value="EUR">Euro (EUR)</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label htmlFor="theme">Theme</Label>
              <Select
                value={settings.preferences.theme}
                onValueChange={(value) => handleSettingChange("preferences", "theme", value)}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="light">
                    <div className="flex items-center gap-2">
                      <Sun className="h-4 w-4" />
                      Light
                    </div>
                  </SelectItem>
                  <SelectItem value="dark">
                    <div className="flex items-center gap-2">
                      <Moon className="h-4 w-4" />
                      Dark
                    </div>
                  </SelectItem>
                  <SelectItem value="system">System</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label htmlFor="default-payment">Default Payment Method</Label>
              <Select
                value={settings.preferences.defaultPayment}
                onValueChange={(value) => handleSettingChange("preferences", "defaultPayment", value)}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="mpesa">M-PESA</SelectItem>
                  <SelectItem value="card">Credit/Debit Card</SelectItem>
                  <SelectItem value="wallet">Digital Wallet</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </CardContent>
        </Card>

{/* Security */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-[#2C3E50]">
              <Lock className="h-5 w-5" />
              Security
            </CardTitle>
            <CardDescription>Manage your account security</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center justify-between">
              <div>
                <Label htmlFor="two-factor">Two-Factor Authentication</Label>
                <p className="text-sm text-[#7F8C8D]">Add an extra layer of security</p>
              </div>
              <Switch
                id="two-factor"
                checked={settings.security.twoFactorAuth}
                onCheckedChange={(checked) => handleSettingChange("security", "twoFactorAuth", checked)}
              />
            </div>

<div className="flex items-center justify-between">
              <div>
                <Label htmlFor="login-alerts">Login Alerts</Label>
                <p className="text-sm text-[#7F8C8D]">Get notified of new logins</p>
              </div>
              <Switch
                id="login-alerts"
                checked={settings.security.loginAlerts}
                onCheckedChange={(checked) => handleSettingChange("security", "loginAlerts", checked)}
              />
            </div>

<div className="space-y-4">
              <h4 className="font-medium text-[#2C3E50]">Change Password</h4>

<div className="space-y-2">
                <Label htmlFor="current-password">Current Password</Label>
                <div className="relative">
                  <Input
                    id="current-password"
                    type={showCurrentPassword ? "text" : "password"}
                    value={passwordData.currentPassword}
                    onChange={(e) => setPasswordData({ ...passwordData, currentPassword: e.target.value })}
                  />
                  <Button
                    type="button"
                    variant="ghost"
                    size="sm"
                    className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                    onClick={() => setShowCurrentPassword(!showCurrentPassword)}
                  >
                    {showCurrentPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                  </Button>
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="new-password">New Password</Label>
                <div className="relative">
                  <Input
                    id="new-password"
                    type={showNewPassword ? "text" : "password"}
                    value={passwordData.newPassword}
                    onChange={(e) => setPasswordData({ ...passwordData, newPassword: e.target.value })}
                  />
                  <Button
                    type="button"
                    variant="ghost"
                    size="sm"
                    className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                    onClick={() => setShowNewPassword(!showNewPassword)}
                  >
                    {showNewPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                  </Button>
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="confirm-password">Confirm New Password</Label>
                <div className="relative">
                  <Input
                    id="confirm-password"
                    type={showConfirmPassword ? "text" : "password"}
                    value={passwordData.confirmPassword}
                    onChange={(e) => setPasswordData({ ...passwordData, confirmPassword: e.target.value })}
                  />
                  <Button
                    type="button"
                    variant="ghost"
                    size="sm"
                    className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}
                  >
                    {showConfirmPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                  </Button>
                </div>
              </div>

<Button
                onClick={handleChangePassword}
                disabled={!passwordData.currentPassword || !passwordData.newPassword || !passwordData.confirmPassword}
                className="bg-[#2980B9] hover:bg-[#2471A3]"
              >
                Change Password
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/customer/layout.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Home, Calendar, CreditCard, Bell, Settings, User, LogOut, Plus } from "lucide-react"

const navigation = [
  {
    title: "Overview",
    items: [
      { title: "Dashboard", url: "/customer", icon: Home },
      { title: "Book Ride", url: "/customer/book", icon: Plus },
    ],
  },
  {
    title: "My Account",
    items: [
      { title: "My Bookings", url: "/customer/bookings", icon: Calendar },
      { title: "Payment Methods", url: "/customer/payments", icon: CreditCard },
      { title: "Profile", url: "/customer/profile", icon: User },
    ],
  },
  {
    title: "Support",
    items: [
      { title: "Notifications", url: "/customer/notifications", icon: Bell },
      { title: "Settings", url: "/customer/settings", icon: Settings },
    ],
  },
]

export default function CustomerLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname()
  const [unreadNotifications] = useState(3)

return (
    <SidebarProvider>
      <div className="flex min-h-screen w-full">
        <Sidebar>
          <SidebarHeader>
            <div className="flex items-center gap-2 px-4 py-2">
              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-[#27AE60] text-white font-bold">
                RD
              </div>
              <div className="flex flex-col">
                <span className="text-sm font-semibold text-[#2C3E50]">RideDine</span>
                <span className="text-xs text-[#7F8C8D]">Customer Portal</span>
              </div>
            </div>
          </SidebarHeader>

<SidebarContent>
            {navigation.map((group) => (
              <SidebarGroup key={group.title}>
                <SidebarGroupLabel>{group.title}</SidebarGroupLabel>
                <SidebarGroupContent>
                  <SidebarMenu>
                    {group.items.map((item) => (
                      <SidebarMenuItem key={item.title}>
                        <SidebarMenuButton asChild isActive={pathname === item.url}>
                          <Link href={item.url}>
                            <item.icon className="h-4 w-4" />
                            <span>{item.title}</span>
                            {item.title === "Notifications" && unreadNotifications > 0 && (
                              <Badge className="ml-auto bg-red-500 text-white text-xs">{unreadNotifications}</Badge>
                            )}
                          </Link>
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                    ))}
                  </SidebarMenu>
                </SidebarGroupContent>
              </SidebarGroup>
            ))}
          </SidebarContent>

<SidebarFooter>
            <SidebarMenu>
              <SidebarMenuItem>
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <SidebarMenuButton>
                      <Avatar className="h-6 w-6">
                        <AvatarImage src="/placeholder.svg" />
                        <AvatarFallback className="bg-[#27AE60] text-white text-xs">JD</AvatarFallback>
                      </Avatar>
                      <div className="flex flex-col text-left">
                        <span className="text-sm font-medium">John Doe</span>
                        <span className="text-xs text-[#7F8C8D]">john@example.com</span>
                      </div>
                    </SidebarMenuButton>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent side="top" className="w-56">
                    <DropdownMenuLabel>My Account</DropdownMenuLabel>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem asChild>
                      <Link href="/customer/profile">
                        <User className="h-4 w-4 mr-2" />
                        Profile
                      </Link>
                    </DropdownMenuItem>
                    <DropdownMenuItem asChild>
                      <Link href="/customer/settings">
                        <Settings className="h-4 w-4 mr-2" />
                        Settings
                      </Link>
                    </DropdownMenuItem>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem>
                      <LogOut className="h-4 w-4 mr-2" />
                      Sign out
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarFooter>
        </Sidebar>

<SidebarInset>
          <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
            <SidebarTrigger className="-ml-1" />
          </header>
          <main className="flex-1 p-6">{children}</main>
        </SidebarInset>
      </div>
    </SidebarProvider>
  )
}
[V0_FILE]typescriptreact:file="app/customer/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  MapPin,
  Clock,
  Star,
  Plus,
  Calendar,
  CreditCard,
  Bell,
  QrCode,
  Navigation,
  Phone,
  Gift,
  TrendingUp,
} from "lucide-react"

export default function CustomerDashboard() {
  const [activeBooking] = useState({
    id: "RD001",
    status: "confirmed",
    pickup: "City Center",
    dropoff: "Business District",
    date: "Today",
    time: "12:30 PM",
    driver: "Michael Johnson",
    vehicle: "Toyota Hiace - KCA 123A",
    qrCode: "QR123456",
    estimatedArrival: "10 mins",
  })

const [stats] = useState({
    totalRides: 24,
    totalSpent: 48500,
    loyaltyPoints: 1250,
    averageRating: 4.8,
  })

const [recentActivity] = useState([
    {
      id: 1,
      type: "booking",
      title: "Trip Completed",
      description: "City Center → Business District",
      time: "2 hours ago",
      amount: 2200,
    },
    {
      id: 2,
      type: "payment",
      title: "Payment Processed",
      description: "M-PESA payment successful",
      time: "2 hours ago",
      amount: 2200,
    },
    {
      id: 3,
      type: "points",
      title: "Points Earned",
      description: "50 loyalty points added",
      time: "2 hours ago",
      points: 50,
    },
  ])

return (
    <div className="space-y-6">
      {/* Welcome Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-[#2C3E50]">Welcome back, John!</h1>
          <p className="text-[#7F8C8D] mt-2">Ready for your next food truck adventure?</p>
        </div>
        <Button asChild className="bg-[#27AE60] hover:bg-[#229954]">
          <Link href="/customer/book">
            <Plus className="h-4 w-4 mr-2" />
            Book New Ride
          </Link>
        </Button>
      </div>

{/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-[#7F8C8D]">Total Rides</p>
                <p className="text-2xl font-bold text-[#2C3E50]">{stats.totalRides}</p>
              </div>
              <Calendar className="h-8 w-8 text-[#27AE60]" />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-[#7F8C8D]">Total Spent</p>
                <p className="text-2xl font-bold text-[#2C3E50]">KSH {stats.totalSpent.toLocaleString()}</p>
              </div>
              <CreditCard className="h-8 w-8 text-[#2980B9]" />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-[#7F8C8D]">Loyalty Points</p>
                <p className="text-2xl font-bold text-[#2C3E50]">{stats.loyaltyPoints}</p>
              </div>
              <Gift className="h-8 w-8 text-[#F39C12]" />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-[#7F8C8D]">Average Rating</p>
                <div className="flex items-center gap-1">
                  <p className="text-2xl font-bold text-[#2C3E50]">{stats.averageRating}</p>
                  <Star className="h-5 w-5 text-yellow-400 fill-current" />
                </div>
              </div>
              <TrendingUp className="h-8 w-8 text-[#27AE60]" />
            </div>
          </CardContent>
        </Card>
      </div>

<div className="grid lg:grid-cols-3 gap-6">
        {/* Active Booking */}
        <div className="lg:col-span-2">
          {activeBooking ? (
            <Card className="border-[#27AE60] bg-green-50">
              <CardHeader>
                <div className="flex items-center justify-between">
                  <CardTitle className="text-[#2C3E50]">Active Booking</CardTitle>
                  <Badge className="bg-[#27AE60] text-white">CONFIRMED</Badge>
                </div>
                <CardDescription>Your ride is confirmed and ready</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid md:grid-cols-2 gap-4">
                  <div className="space-y-3">
                    <div className="flex items-center gap-2">
                      <MapPin className="h-4 w-4 text-[#27AE60]" />
                      <span className="text-sm">
                        <strong>From:</strong> {activeBooking.pickup}
                      </span>
                    </div>
                    <div className="flex items-center gap-2">
                      <MapPin className="h-4 w-4 text-[#2980B9]" />
                      <span className="text-sm">
                        <strong>To:</strong> {activeBooking.dropoff}
                      </span>
                    </div>
                    <div className="flex items-center gap-2">
                      <Clock className="h-4 w-4 text-[#7F8C8D]" />
                      <span className="text-sm">
                        <strong>Time:</strong> {activeBooking.date} at {activeBooking.time}
                      </span>
                    </div>
                    <div className="flex items-center gap-2">
                      <Avatar className="h-6 w-6">
                        <AvatarImage src="/placeholder.svg" />
                        <AvatarFallback className="bg-[#27AE60] text-white text-xs">MJ</AvatarFallback>
                      </Avatar>
                      <span className="text-sm">
                        <strong>Driver:</strong> {activeBooking.driver}
                      </span>
                    </div>
                  </div>

<div className="flex flex-col items-center justify-center p-4 bg-white rounded-lg border-2 border-dashed border-[#27AE60]">
                    <QrCode className="h-16 w-16 text-[#2C3E50] mb-2" />
                    <p className="text-sm font-medium text-[#2C3E50] mb-1">Boarding Pass</p>
                    <Badge variant="outline" className="font-mono text-xs">
                      {activeBooking.qrCode}
                    </Badge>
                  </div>
                </div>

<div className="flex flex-wrap gap-2">
                  <Button className="bg-[#2980B9] hover:bg-[#2471A3]">
                    <Navigation className="h-4 w-4 mr-2" />
                    Track Live
                  </Button>
                  <Button variant="outline" className="bg-transparent">
                    <Phone className="h-4 w-4 mr-2" />
                    Call Driver
                  </Button>
                  <Button variant="outline" asChild className="bg-transparent">
                    <Link href={`/customer/bookings/${activeBooking.id}`}>View Details</Link>
                  </Button>
                </div>
              </CardContent>
            </Card>
          ) : (
            <Card>
              <CardContent className="text-center py-12">
                <Calendar className="h-16 w-16 text-[#7F8C8D] mx-auto mb-4" />
                <h3 className="text-lg font-semibold text-[#2C3E50] mb-2">No Active Bookings</h3>
                <p className="text-[#7F8C8D] mb-4">Book your next ride to get started</p>
                <Button asChild className="bg-[#27AE60] hover:bg-[#229954]">
                  <Link href="/customer/book">Book a Ride</Link>
                </Button>
              </CardContent>
            </Card>
          )}
        </div>

{/* Recent Activity */}
        <Card>
          <CardHeader>
            <CardTitle className="text-[#2C3E50]">Recent Activity</CardTitle>
            <CardDescription>Your latest transactions and updates</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {recentActivity.map((activity) => (
                <div key={activity.id} className="flex items-start gap-3">
                  <div className="flex-shrink-0 mt-1">
                    {activity.type === "booking" && <Calendar className="h-4 w-4 text-[#27AE60]" />}
                    {activity.type === "payment" && <CreditCard className="h-4 w-4 text-[#2980B9]" />}
                    {activity.type === "points" && <Gift className="h-4 w-4 text-[#F39C12]" />}
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium text-[#2C3E50]">{activity.title}</p>
                    <p className="text-sm text-[#7F8C8D]">{activity.description}</p>
                    <div className="flex items-center justify-between mt-1">
                      <p className="text-xs text-[#7F8C8D]">{activity.time}</p>
                      {activity.amount && (
                        <p className="text-sm font-medium text-[#27AE60]">KSH {activity.amount.toLocaleString()}</p>
                      )}
                      {activity.points && <p className="text-sm font-medium text-[#F39C12]">+{activity.points} pts</p>}
                    </div>
                  </div>
                </div>
              ))}
            </div>
            <Button variant="outline" asChild className="w-full mt-4 bg-transparent">
              <Link href="/customer/bookings">View All Activity</Link>
            </Button>
          </CardContent>
        </Card>
      </div>

{/* Quick Actions */}
      <Card>
        <CardHeader>
          <CardTitle className="text-[#2C3E50]">Quick Actions</CardTitle>
          <CardDescription>Common tasks and shortcuts</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <Button asChild variant="outline" className="h-20 flex-col bg-transparent">
              <Link href="/customer/book">
                <Plus className="h-6 w-6 mb-2" />
                Book Ride
              </Link>
            </Button>
            <Button asChild variant="outline" className="h-20 flex-col bg-transparent">
              <Link href="/customer/bookings">
                <Calendar className="h-6 w-6 mb-2" />
                My Bookings
              </Link>
            </Button>
            <Button asChild variant="outline" className="h-20 flex-col bg-transparent">
              <Link href="/customer/payments">
                <CreditCard className="h-6 w-6 mb-2" />
                Payments
              </Link>
            </Button>
            <Button asChild variant="outline" className="h-20 flex-col bg-transparent">
              <Link href="/customer/notifications">
                <Bell className="h-6 w-6 mb-2" />
                Notifications
              </Link>
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/customer/bookings/create/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { ArrowLeft, Save, Calendar, MapPin, Clock, Users, DollarSign } from "lucide-react"
import { toast } from "sonner"

interface Trip {
  id: string
  route: {
    id: string
    name: string
    start_location: string
    end_location: string
    distance_km: number
    estimated_duration: number
    price_per_person: number
  }
  scheduled_date: string
  scheduled_time: string
  available_seats: number
  total_seats: number
  status: "scheduled" | "in_progress" | "completed" | "cancelled"
}

interface BookingFormData {
  trip_id: string
  number_of_passengers: number
  special_requests: string
}

export default function CreateBookingPage() {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [trips, setTrips] = useState<Trip[]>([])
  const [selectedTrip, setSelectedTrip] = useState<Trip | null>(null)
  const [formData, setFormData] = useState<BookingFormData>({
    trip_id: "",
    number_of_passengers: 1,
    special_requests: "",
  })

useEffect(() => {
    // Mock API call to fetch available trips
    const fetchTrips = async () => {
      try {
        await new Promise((resolve) => setTimeout(resolve, 1000))

const mockTrips: Trip[] = [
          {
            id: "trip1",
            route: {
              id: "route1",
              name: "City Center → Business District",
              start_location: "City Center Mall",
              end_location: "Business District Plaza",
              distance_km: 8.5,
              estimated_duration: 25,
              price_per_person: 150,
            },
            scheduled_date: "2024-01-20",
            scheduled_time: "12:30",
            available_seats: 8,
            total_seats: 15,
            status: "scheduled",
          },
          {
            id: "trip2",
            route: {
              id: "route2",
              name: "University → Shopping Mall",
              start_location: "University Main Gate",
              end_location: "Westgate Shopping Mall",
              distance_km: 12.3,
              estimated_duration: 35,
              price_per_person: 200,
            },
            scheduled_date: "2024-01-20",
            scheduled_time: "14:00",
            available_seats: 5,
            total_seats: 15,
            status: "scheduled",
          },
          {
            id: "trip3",
            route: {
              id: "route3",
              name: "Airport → City Center",
              start_location: "JKIA Terminal 1",
              end_location: "City Center Mall",
              distance_km: 18.7,
              estimated_duration: 45,
              price_per_person: 300,
            },
            scheduled_date: "2024-01-21",
            scheduled_time: "09:00",
            available_seats: 12,
            total_seats: 15,
            status: "scheduled",
          },
        ]

setTrips(mockTrips)
      } catch (error) {
        toast.error("Failed to load available trips")
      }
    }

fetchTrips()
  }, [])

const handleTripSelect = (tripId: string) => {
    const trip = trips.find((t) => t.id === tripId)
    setSelectedTrip(trip || null)
    setFormData((prev) => ({ ...prev, trip_id: tripId }))
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!selectedTrip) {
      toast.error("Please select a trip")
      return
    }

if (formData.number_of_passengers > selectedTrip.available_seats) {
      toast.error("Not enough available seats")
      return
    }

setLoading(true)

try {
      // Mock API call to create booking
      await new Promise((resolve) => setTimeout(resolve, 1500))

toast.success("Booking created successfully!")
      router.push("/customer/bookings")
    } catch (error) {
      toast.error("Failed to create booking")
    } finally {
      setLoading(false)
    }
  }

const handleInputChange = (field: string, value: string | number) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

const totalAmount = selectedTrip ? selectedTrip.route.price_per_person * formData.number_of_passengers : 0

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <Button variant="ghost" size="icon" asChild>
          <Link href="/customer/bookings">
            <ArrowLeft className="h-4 w-4" />
          </Link>
        </Button>
        <div>
          <h1 className="text-3xl font-bold text-[#2C3E50]">Create New Booking</h1>
          <p className="text-[#7F8C8D]">Book a trip for your journey</p>
        </div>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Available Trips */}
        <div className="space-y-4">
          <h2 className="text-xl font-semibold text-[#2C3E50]">Available Trips</h2>
          <div className="space-y-4 max-h-96 overflow-y-auto">
            {trips.map((trip) => (
              <Card
                key={trip.id}
                className={`cursor-pointer transition-all hover:shadow-md ${
                  selectedTrip?.id === trip.id ? "ring-2 ring-[#27AE60] bg-green-50" : ""
                }`}
                onClick={() => handleTripSelect(trip.id)}
              >
                <CardContent className="p-4">
                  <div className="space-y-3">
                    <div className="flex items-center justify-between">
                      <h3 className="font-semibold text-[#2C3E50]">{trip.route.name}</h3>
                      <Badge variant={trip.status === "scheduled" ? "default" : "secondary"}>{trip.status}</Badge>
                    </div>

<div className="grid grid-cols-2 gap-4 text-sm text-[#7F8C8D]">
                      <div className="flex items-center gap-2">
                        <MapPin className="h-4 w-4" />
                        <span>{trip.route.distance_km} km</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <Clock className="h-4 w-4" />
                        <span>{trip.route.estimated_duration} min</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <Calendar className="h-4 w-4" />
                        <span>{trip.scheduled_date}</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <Clock className="h-4 w-4" />
                        <span>{trip.scheduled_time}</span>
                      </div>
                    </div>

<div className="flex items-center justify-between">
                      <div className="flex items-center gap-2 text-sm">
                        <Users className="h-4 w-4 text-[#7F8C8D]" />
                        <span className="text-[#7F8C8D]">
                          {trip.available_seats}/{trip.total_seats} seats available
                        </span>
                      </div>
                      <div className="flex items-center gap-1 font-semibold text-[#27AE60]">
                        <DollarSign className="h-4 w-4" />
                        <span>KSH {trip.route.price_per_person}</span>
                      </div>
                    </div>

<div className="text-xs text-[#7F8C8D]">
                      <div>From: {trip.route.start_location}</div>
                      <div>To: {trip.route.end_location}</div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>

{/* Booking Form */}
        <div>
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Calendar className="h-5 w-5 text-[#27AE60]" />
                Booking Details
              </CardTitle>
              <CardDescription>{selectedTrip ? "Complete your booking" : "Select a trip to continue"}</CardDescription>
            </CardHeader>
            <CardContent>
              {selectedTrip ? (
                <form onSubmit={handleSubmit} className="space-y-6">
                  {/* Selected Trip Summary */}
                  <div className="p-4 bg-green-50 rounded-lg border border-green-200">
                    <h3 className="font-semibold text-[#2C3E50] mb-2">Selected Trip</h3>
                    <div className="text-sm space-y-1">
                      <div className="font-medium">{selectedTrip.route.name}</div>
                      <div className="text-[#7F8C8D]">
                        {selectedTrip.scheduled_date} at {selectedTrip.scheduled_time}
                      </div>
                      <div className="text-[#7F8C8D]">KSH {selectedTrip.route.price_per_person} per person</div>
                    </div>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="passengers">Number of Passengers *</Label>
                    <Select
                      value={formData.number_of_passengers.toString()}
                      onValueChange={(value) => handleInputChange("number_of_passengers", Number.parseInt(value))}
                      required
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        {Array.from({ length: Math.min(selectedTrip.available_seats, 10) }, (_, i) => i + 1).map(
                          (num) => (
                            <SelectItem key={num} value={num.toString()}>
                              {num} {num === 1 ? "passenger" : "passengers"}
                            </SelectItem>
                          ),
                        )}
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="special_requests">Special Requests (Optional)</Label>
                    <Textarea
                      id="special_requests"
                      value={formData.special_requests}
                      onChange={(e) => handleInputChange("special_requests", e.target.value)}
                      placeholder="Any special requests or requirements"
                      rows={3}
                    />
                  </div>

{/* Total Amount */}
                  <div className="p-4 bg-gray-50 rounded-lg">
                    <div className="flex justify-between items-center">
                      <span className="font-semibold">Total Amount:</span>
                      <span className="text-xl font-bold text-[#27AE60]">KSH {totalAmount}</span>
                    </div>
                    <div className="text-sm text-[#7F8C8D] mt-1">
                      {formData.number_of_passengers} × KSH {selectedTrip.route.price_per_person}
                    </div>
                  </div>

<Button type="submit" disabled={loading} className="w-full bg-[#27AE60] hover:bg-[#229954]">
                    <Save className="h-4 w-4 mr-2" />
                    {loading ? "Creating Booking..." : "Create Booking"}
                  </Button>
                </form>
              ) : (
                <div className="text-center py-8 text-[#7F8C8D]">
                  <Calendar className="h-12 w-12 mx-auto mb-4 opacity-50" />
                  <p>Select a trip from the list to start booking</p>
                </div>
              )}
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/customer/bookings/[id]/edit/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { ArrowLeft, Save, Calendar, AlertTriangle } from "lucide-react"
import { toast } from "sonner"

interface Trip {
  id: string
  route: {
    name: string
    start_location: string
    end_location: string
    price_per_person: number
  }
  scheduled_date: string
  scheduled_time: string
  available_seats: number
}

interface Booking {
  id: string
  trip: Trip
  number_of_passengers: number
  total_amount: number
  status: "pending" | "confirmed" | "cancelled" | "completed"
  special_requests: string
  payment_status: "pending" | "paid" | "refunded"
  created_at: string
}

interface PageProps {
  params: Promise<{ id: string }>
}

export default function EditBookingPage({ params }: PageProps) {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [initialLoading, setInitialLoading] = useState(true)
  const [bookingId, setBookingId] = useState<string>("")
  const [booking, setBooking] = useState<Booking | null>(null)
  const [formData, setFormData] = useState({
    number_of_passengers: 1,
    special_requests: "",
  })

useEffect(() => {
    const getParams = async () => {
      const resolvedParams = await params
      setBookingId(resolvedParams.id)
    }
    getParams()
  }, [params])

useEffect(() => {
    if (!bookingId) return

// Mock API call to fetch booking data
    const fetchBooking = async () => {
      try {
        await new Promise((resolve) => setTimeout(resolve, 1000))

const mockBooking: Booking = {
          id: bookingId,
          trip: {
            id: "trip1",
            route: {
              name: "City Center → Business District",
              start_location: "City Center Mall",
              end_location: "Business District Plaza",
              price_per_person: 150,
            },
            scheduled_date: "2024-01-20",
            scheduled_time: "12:30",
            available_seats: 8,
          },
          number_of_passengers: 2,
          total_amount: 300,
          status: "confirmed",
          special_requests: "Window seat preferred",
          payment_status: "paid",
          created_at: "2024-01-15T10:30:00Z",
        }

setBooking(mockBooking)
        setFormData({
          number_of_passengers: mockBooking.number_of_passengers,
          special_requests: mockBooking.special_requests,
        })
      } catch (error) {
        toast.error("Failed to load booking data")
      } finally {
        setInitialLoading(false)
      }
    }

fetchBooking()
  }, [bookingId])

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!booking) return

// Check if booking can be modified
    if (booking.status === "completed" || booking.status === "cancelled") {
      toast.error("Cannot modify completed or cancelled bookings")
      return
    }

// Check if trying to increase passengers beyond available seats
    if (formData.number_of_passengers > booking.number_of_passengers + booking.trip.available_seats) {
      toast.error("Not enough available seats")
      return
    }

setLoading(true)

try {
      // Mock API call to update booking
      await new Promise((resolve) => setTimeout(resolve, 1500))

toast.success("Booking updated successfully!")
      router.push("/customer/bookings")
    } catch (error) {
      toast.error("Failed to update booking")
    } finally {
      setLoading(false)
    }
  }

const handleInputChange = (field: string, value: string | number) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

const newTotalAmount = booking ? booking.trip.route.price_per_person * formData.number_of_passengers : 0
  const amountDifference = newTotalAmount - (booking?.total_amount || 0)

if (!booking) {
    return (
      <div className="text-center py-12">
        <p className="text-[#7F8C8D]">Booking not found</p>
        <Button asChild className="mt-4">
          <Link href="/customer/bookings">Back to Bookings</Link>
        </Button>
      </div>
    )
  }

const canModify = booking.status === "pending" || booking.status === "confirmed"

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <Button variant="ghost" size="icon" asChild>
          <Link href="/customer/bookings">
            <ArrowLeft className="h-4 w-4" />
          </Link>
        </Button>
        <div>
          <h1 className="text-3xl font-bold text-[#2C3E50]">Edit Booking</h1>
          <p className="text-[#7F8C8D]">Modify your booking details</p>
        </div>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Booking Information */}
        <div>
          <Card>
            <CardHeader>
              <CardTitle>Current Booking</CardTitle>
              <CardDescription>Your existing booking details</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between">
                <span className="text-sm font-medium">Booking ID:</span>
                <span className="text-sm font-mono">{booking.id}</span>
              </div>

<div className="space-y-2">
                <div className="flex items-center justify-between">
                  <span className="text-sm font-medium">Status:</span>
                  <Badge variant={booking.status === "confirmed" ? "default" : "secondary"}>{booking.status}</Badge>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm font-medium">Payment:</span>
                  <Badge variant={booking.payment_status === "paid" ? "default" : "secondary"}>
                    {booking.payment_status}
                  </Badge>
                </div>
              </div>

<div className="space-y-2">
                <h3 className="font-semibold text-[#2C3E50]">{booking.trip.route.name}</h3>
                <div className="text-sm text-[#7F8C8D] space-y-1">
                  <div>Date: {booking.trip.scheduled_date}</div>
                  <div>Time: {booking.trip.scheduled_time}</div>
                  <div>From: {booking.trip.route.start_location}</div>
                  <div>To: {booking.trip.route.end_location}</div>
                </div>
              </div>

<div className="pt-4 border-t">
                <div className="flex justify-between items-center">
                  <span className="font-semibold">Current Total:</span>
                  <span className="text-lg font-bold text-[#27AE60]">KSH {booking.total_amount}</span>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

{/* Edit Form */}
        <div>
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Calendar className="h-5 w-5 text-[#27AE60]" />
                Modify Booking
              </CardTitle>
              <CardDescription>
                {canModify ? "Update your booking details" : "This booking cannot be modified"}
              </CardDescription>
            </CardHeader>
            <CardContent>
              {!canModify ? (
                <div className="text-center py-8">
                  <AlertTriangle className="h-12 w-12 mx-auto mb-4 text-yellow-500" />
                  <p className="text-[#7F8C8D] mb-4">This booking cannot be modified because it is {booking.status}.</p>
                  <Button asChild variant="outline">
                    <Link href="/customer/bookings">Back to Bookings</Link>
                  </Button>
                </div>
              ) : (
                <form onSubmit={handleSubmit} className="space-y-6">
                  <div className="space-y-2">
                    <Label htmlFor="passengers">Number of Passengers *</Label>
                    <Select
                      value={formData.number_of_passengers.toString()}
                      onValueChange={(value) => handleInputChange("number_of_passengers", Number.parseInt(value))}
                      required
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        {Array.from(
                          { length: Math.min(booking.number_of_passengers + booking.trip.available_seats, 10) },
                          (_, i) => i + 1,
                        ).map((num) => (
                          <SelectItem key={num} value={num.toString()}>
                            {num} {num === 1 ? "passenger" : "passengers"}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <p className="text-xs text-[#7F8C8D]">Available seats: {booking.trip.available_seats} additional</p>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="special_requests">Special Requests</Label>
                    <Textarea
                      id="special_requests"
                      value={formData.special_requests}
                      onChange={(e) => handleInputChange("special_requests", e.target.value)}
                      placeholder="Any special requests or requirements"
                      rows={3}
                    />
                  </div>

{/* New Total */}
                  <div className="p-4 bg-gray-50 rounded-lg">
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="font-semibold">New Total:</span>
                        <span className="text-xl font-bold text-[#27AE60]">KSH {newTotalAmount}</span>
                      </div>
                      {amountDifference !== 0 && (
                        <div className="flex justify-between items-center text-sm">
                          <span className="text-[#7F8C8D]">Difference:</span>
                          <span className={amountDifference > 0 ? "text-red-600" : "text-green-600"}>
                            {amountDifference > 0 ? "+" : ""}KSH {amountDifference}
                          </span>
                        </div>
                      )}
                    </div>
                  </div>

{amountDifference > 0 && (
                    <div className="p-4 bg-yellow-50 rounded-lg border border-yellow-200">
                      <div className="flex items-start gap-3">
                        <AlertTriangle className="h-5 w-5 text-yellow-600 mt-0.5" />
                        <div className="text-sm">
                          <p className="font-medium text-yellow-800">Additional Payment Required</p>
                          <p className="text-yellow-700 mt-1">
                            You will need to pay an additional KSH {amountDifference} for the extra passengers.
                          </p>
                        </div>
                      </div>
                    </div>
                  )}

<div className="flex gap-4 pt-4">
                    <Button type="submit" disabled={loading} className="flex-1 bg-[#27AE60] hover:bg-[#229954]">
                      <Save className="h-4 w-4 mr-2" />
                      {loading ? "Updating..." : "Update Booking"}
                    </Button>
                    <Button type="button" variant="outline" asChild className="flex-1 bg-transparent">
                      <Link href="/customer/bookings">Cancel</Link>
                    </Button>
                  </div>
                </form>
              )}
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/customer/payments/create/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="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 { 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 { Checkbox } from "@/components/ui/checkbox"
import { ArrowLeft, Save, CreditCard, Smartphone, Building, Lock } from "lucide-react"
import { toast } from "sonner"

interface PaymentMethodData {
  type: "card" | "mpesa" | "bank"
  name: string
  is_default: boolean
  // Card fields
  card_number?: string
  card_holder_name?: string
  card_expiry?: string
  card_type?: string
  // M-Pesa fields
  mpesa_number?: string
  mpesa_name?: string
  // Bank fields
  bank_name?: string
  account_number?: string
  account_holder_name?: string
}

export default function CreatePaymentMethodPage() {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [formData, setFormData] = useState<PaymentMethodData>({
    type: "card",
    name: "",
    is_default: false,
  })

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

try {
      // Mock API call to create payment method
      await new Promise((resolve) => setTimeout(resolve, 1500))

toast.success("Payment method added successfully!")
      router.push("/customer/payments")
    } catch (error) {
      toast.error("Failed to add payment method")
    } finally {
      setLoading(false)
    }
  }

const handleInputChange = (field: string, value: string | boolean) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

const formatCardNumber = (value: string) => {
    // Remove all non-digits
    const digits = value.replace(/\D/g, "")
    // Add spaces every 4 digits
    return digits.replace(/(\d{4})(?=\d)/g, "$1 ")
  }

const formatExpiryDate = (value: string) => {
    // Remove all non-digits
    const digits = value.replace(/\D/g, "")
    // Add slash after 2 digits
    if (digits.length >= 2) {
      return digits.substring(0, 2) + "/" + digits.substring(2, 4)
    }
    return digits
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <Button variant="ghost" size="icon" asChild>
            <Link href="/customer/payments">
              <ArrowLeft className="h-5 w-5" />
            </Link>
          </Button>
          <div>
            <h1 className="text-3xl font-bold text-[#2C3E50]">Add Payment Method</h1>
            <p className="text-[#7F8C8D] mt-2">Add a new payment method to your account</p>
          </div>
        </div>
        <div className="flex gap-2">
          <Button type="submit" onClick={handleSubmit} disabled={loading} className="bg-[#27AE60] hover:bg-[#229954]">
            <Save className="h-4 w-4 mr-2" />
            {loading ? "Adding..." : "Add Payment Method"}
          </Button>
          <Button asChild variant="outline" className="bg-transparent">
            <Link href="/customer/payments">
              <Lock className="h-4 w-4 mr-2" />
              Cancel
            </Link>
          </Button>
        </div>
      </div>

{/* Form */}
      <Card className="max-w-2xl">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Lock className="h-5 w-5 text-[#27AE60]" />
            Payment Method Details
          </CardTitle>
          <CardDescription>Your payment information is encrypted and secure</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-6">
            {/* Payment Type Selection */}
            <div className="space-y-3">
              <Label>Payment Method Type</Label>
              <div className="grid grid-cols-3 gap-2">
                <Button
                  type="button"
                  variant={formData.type === "card" ? "default" : "outline"}
                  className="flex flex-col items-center gap-2 h-auto py-4"
                  onClick={() => handleInputChange("type", "card")}
                >
                  <CreditCard className="h-5 w-5" />
                  <span className="text-xs">Credit/Debit Card</span>
                </Button>
                <Button
                  type="button"
                  variant={formData.type === "mpesa" ? "default" : "outline"}
                  className="flex flex-col items-center gap-2 h-auto py-4"
                  onClick={() => handleInputChange("type", "mpesa")}
                >
                  <Smartphone className="h-5 w-5" />
                  <span className="text-xs">M-Pesa</span>
                </Button>
                <Button
                  type="button"
                  variant={formData.type === "bank" ? "default" : "outline"}
                  className="flex flex-col items-center gap-2 h-auto py-4"
                  onClick={() => handleInputChange("type", "bank")}
                >
                  <Building className="h-5 w-5" />
                  <span className="text-xs">Bank Account</span>
                </Button>
              </div>
            </div>

{/* Common Fields */}
            <div className="space-y-2">
              <Label htmlFor="name">Payment Method Name *</Label>
              <Input
                id="name"
                value={formData.name}
                onChange={(e) => handleInputChange("name", e.target.value)}
                placeholder="e.g., My Visa Card, Work M-Pesa, etc."
                required
              />
              <p className="text-xs text-[#7F8C8D]">Give this payment method a memorable name</p>
            </div>

{/* Card Fields */}
            {formData.type === "card" && (
              <div className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="card_holder_name">Cardholder Name *</Label>
                  <Input
                    id="card_holder_name"
                    value={formData.card_holder_name || ""}
                    onChange={(e) => handleInputChange("card_holder_name", e.target.value)}
                    placeholder="John Doe"
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="card_number">Card Number *</Label>
                  <Input
                    id="card_number"
                    value={formData.card_number || ""}
                    onChange={(e) => handleInputChange("card_number", formatCardNumber(e.target.value))}
                    placeholder="1234 5678 9012 3456"
                    maxLength={19}
                    required
                  />
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="card_expiry">Expiry Date *</Label>
                    <Input
                      id="card_expiry"
                      value={formData.card_expiry || ""}
                      onChange={(e) => handleInputChange("card_expiry", formatExpiryDate(e.target.value))}
                      placeholder="MM/YY"
                      maxLength={5}
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="card_type">Card Type *</Label>
                    <Select
                      value={formData.card_type || ""}
                      onValueChange={(value) => handleInputChange("card_type", value)}
                      required
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Select card type" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="visa">Visa</SelectItem>
                        <SelectItem value="mastercard">Mastercard</SelectItem>
                        <SelectItem value="amex">American Express</SelectItem>
                        <SelectItem value="discover">Discover</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>
              </div>
            )}

{/* M-Pesa Fields */}
            {formData.type === "mpesa" && (
              <div className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="mpesa_name">Account Holder Name *</Label>
                  <Input
                    id="mpesa_name"
                    value={formData.mpesa_name || ""}
                    onChange={(e) => handleInputChange("mpesa_name", e.target.value)}
                    placeholder="John Doe"
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="mpesa_number">M-Pesa Phone Number *</Label>
                  <Input
                    id="mpesa_number"
                    value={formData.mpesa_number || ""}
                    onChange={(e) => handleInputChange("mpesa_number", e.target.value)}
                    placeholder="254712345678"
                    required
                  />
                  <p className="text-xs text-[#7F8C8D]">Enter your M-Pesa registered phone number</p>
                </div>
                <div className="p-4 bg-green-50 rounded-lg border border-green-200">
                  <div className="flex items-start gap-3">
                    <Smartphone className="h-5 w-5 text-[#27AE60] mt-0.5" />
                    <div className="text-sm">
                      <p className="font-medium text-[#2C3E50]">M-Pesa Information</p>
                      <ul className="list-disc list-inside mt-2 space-y-1 text-[#7F8C8D]">
                        <li>Ensure your M-Pesa account is active</li>
                        <li>You will receive STK push notifications for payments</li>
                        <li>Keep your phone nearby during transactions</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            )}

{/* Bank Fields */}
            {formData.type === "bank" && (
              <div className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="account_holder_name">Account Holder Name *</Label>
                  <Input
                    id="account_holder_name"
                    value={formData.account_holder_name || ""}
                    onChange={(e) => handleInputChange("account_holder_name", e.target.value)}
                    placeholder="John Doe"
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="bank_name">Bank Name *</Label>
                  <Select
                    value={formData.bank_name || ""}
                    onValueChange={(value) => handleInputChange("bank_name", value)}
                    required
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Select your bank" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="kcb">KCB Bank</SelectItem>
                      <SelectItem value="equity">Equity Bank</SelectItem>
                      <SelectItem value="coop">Co-operative Bank</SelectItem>
                      <SelectItem value="absa">Absa Bank</SelectItem>
                      <SelectItem value="standard">Standard Chartered</SelectItem>
                      <SelectItem value="dtb">Diamond Trust Bank</SelectItem>
                      <SelectItem value="ncba">NCBA Bank</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="account_number">Account Number *</Label>
                  <Input
                    id="account_number"
                    value={formData.account_number || ""}
                    onChange={(e) => handleInputChange("account_number", e.target.value)}
                    placeholder="1234567890"
                    required
                  />
                </div>
              </div>
            )}

{/* Default Payment Method */}
            <div className="flex items-center space-x-2">
              <Checkbox
                id="is_default"
                checked={formData.is_default}
                onCheckedChange={(checked) => handleInputChange("is_default", checked as boolean)}
              />
              <Label
                htmlFor="is_default"
                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
              >
                Set as default payment method
              </Label>
            </div>

{/* Security Notice */}
            <div className="p-4 bg-blue-50 rounded-lg border border-blue-200">
              <div className="flex items-start gap-3">
                <Lock className="h-5 w-5 text-blue-600 mt-0.5" />
                <div className="text-sm">
                  <p className="font-medium text-blue-900">Security & Privacy</p>
                  <ul className="list-disc list-inside mt-2 space-y-1 text-blue-700">
                    <li>All payment information is encrypted using industry-standard security</li>
                    <li>We never store sensitive payment details like CVV or PIN</li>
                    <li>You can remove this payment method at any time</li>
                  </ul>
                </div>
              </div>
            </div>

<div className="flex gap-4 pt-4">
              <Button type="submit" disabled={loading} className="flex-1 bg-[#27AE60] hover:bg-[#229954]">
                <Save className="h-4 w-4 mr-2" />
                {loading ? "Adding..." : "Add Payment Method"}
              </Button>
              <Button type="button" variant="outline" asChild className="flex-1 bg-transparent">
                <Link href="/customer/payments">Cancel</Link>
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/driver/trips/create/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
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 { Textarea } from "@/components/ui/textarea"
import { ArrowLeft, Save, MapPin, Calendar, Clock } from "lucide-react"
import { toast } from "sonner"

interface Route {
  id: string
  name: string
  start_location: string
  end_location: string
  distance_km: number
  estimated_duration: number
  price_per_person: number
}

interface TripFormData {
  route_id: string
  scheduled_date: string
  scheduled_time: string
  total_seats: number
  notes: string
}

export default function CreateTripPage() {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [routes, setRoutes] = useState<Route[]>([])
  const [formData, setFormData] = useState<TripFormData>({
    route_id: "",
    scheduled_date: "",
    scheduled_time: "",
    total_seats: 15,
    notes: "",
  })

useEffect(() => {
    // Mock API call to fetch available routes
    const fetchRoutes = async () => {
      try {
        await new Promise((resolve) => setTimeout(resolve, 1000))

const mockRoutes: Route[] = [
          {
            id: "route1",
            name: "City Center → Business District",
            start_location: "City Center Mall",
            end_location: "Business District Plaza",
            distance_km: 8.5,
            estimated_duration: 25,
            price_per_person: 150,
          },
          {
            id: "route2",
            name: "University → Shopping Mall",
            start_location: "University Main Gate",
            end_location: "Westgate Shopping Mall",
            distance_km: 12.3,
            estimated_duration: 35,
            price_per_person: 200,
          },
          {
            id: "route3",
            name: "Airport → City Center",
            start_location: "JKIA Terminal 1",
            end_location: "City Center Mall",
            distance_km: 18.7,
            estimated_duration: 45,
            price_per_person: 300,
          },
          {
            id: "route4",
            name: "Residential Area → CBD",
            start_location: "Kilimani Estate",
            end_location: "Central Business District",
            distance_km: 6.2,
            estimated_duration: 20,
            price_per_person: 120,
          },
        ]

setRoutes(mockRoutes)
      } catch (error) {
        toast.error("Failed to load routes")
      }
    }

fetchRoutes()
  }, [])

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

// Validate date is not in the past
    const selectedDate = new Date(`${formData.scheduled_date}T${formData.scheduled_time}`)
    const now = new Date()

if (selectedDate <= now) {
      toast.error("Trip must be scheduled for a future date and time")
      return
    }

setLoading(true)

try {
      // Mock API call to create trip
      await new Promise((resolve) => setTimeout(resolve, 1500))

toast.success("Trip created successfully!")
      router.push("/driver/trips")
    } catch (error) {
      toast.error("Failed to create trip")
    } finally {
      setLoading(false)
    }
  }

const handleInputChange = (field: string, value: string | number) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

const selectedRoute = routes.find((route) => route.id === formData.route_id)

// Get today's date in YYYY-MM-DD format for min date
  const today = new Date().toISOString().split("T")[0]

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <Button variant="ghost" size="icon" asChild>
          <Link href="/driver/trips">
            <ArrowLeft className="h-4 w-4" />
          </Link>
        </Button>
        <div>
          <h1 className="text-3xl font-bold text-[#2C3E50]">Create New Trip</h1>
          <p className="text-[#7F8C8D]">Schedule a new trip for passengers</p>
        </div>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Trip Form */}
        <div>
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Calendar className="h-5 w-5 text-[#27AE60]" />
                Trip Details
              </CardTitle>
              <CardDescription>Fill in the details for your new trip</CardDescription>
            </CardHeader>
            <CardContent>
              <form onSubmit={handleSubmit} className="space-y-6">
                <div className="space-y-2">
                  <Label htmlFor="route_id">Route *</Label>
                  <Select
                    value={formData.route_id}
                    onValueChange={(value) => handleInputChange("route_id", value)}
                    required
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Select a route" />
                    </SelectTrigger>
                    <SelectContent>
                      {routes.map((route) => (
                        <SelectItem key={route.id} value={route.id}>
                          <div className="flex flex-col">
                            <span className="font-medium">{route.name}</span>
                            <span className="text-xs text-[#7F8C8D]">
                              {route.distance_km} km • {route.estimated_duration} min • KSH {route.price_per_person}
                            </span>
                          </div>
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="scheduled_date">Date *</Label>
                    <Input
                      id="scheduled_date"
                      type="date"
                      value={formData.scheduled_date}
                      onChange={(e) => handleInputChange("scheduled_date", e.target.value)}
                      min={today}
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="scheduled_time">Time *</Label>
                    <Input
                      id="scheduled_time"
                      type="time"
                      value={formData.scheduled_time}
                      onChange={(e) => handleInputChange("scheduled_time", e.target.value)}
                      required
                    />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="total_seats">Total Seats *</Label>
                  <Select
                    value={formData.total_seats.toString()}
                    onValueChange={(value) => handleInputChange("total_seats", Number.parseInt(value))}
                    required
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      {Array.from({ length: 20 }, (_, i) => i + 5).map((seats) => (
                        <SelectItem key={seats} value={seats.toString()}>
                          {seats} seats
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  <p className="text-xs text-[#7F8C8D]">Select the number of available passenger seats</p>
                </div>

<div className="space-y-2">
                  <Label htmlFor="notes">Trip Notes (Optional)</Label>
                  <Textarea
                    id="notes"
                    value={formData.notes}
                    onChange={(e) => handleInputChange("notes", e.target.value)}
                    placeholder="Any special notes or instructions for this trip"
                    rows={3}
                  />
                </div>

<div className="flex gap-4 pt-4">
                  <Button type="submit" disabled={loading} className="flex-1 bg-[#27AE60] hover:bg-[#229954]">
                    <Save className="h-4 w-4 mr-2" />
                    {loading ? "Creating..." : "Create Trip"}
                  </Button>
                  <Button type="button" variant="outline" asChild className="flex-1 bg-transparent">
                    <Link href="/driver/trips">Cancel</Link>
                  </Button>
                </div>
              </form>
            </CardContent>
          </Card>
        </div>

{/* Route Preview */}
        <div>
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <MapPin className="h-5 w-5 text-[#27AE60]" />
                Route Preview
              </CardTitle>
              <CardDescription>
                {selectedRoute ? "Selected route details" : "Select a route to see details"}
              </CardDescription>
            </CardHeader>
            <CardContent>
              {selectedRoute ? (
                <div className="space-y-4">
                  <div>
                    <h3 className="font-semibold text-[#2C3E50] mb-2">{selectedRoute.name}</h3>
                    <div className="space-y-2 text-sm">
                      <div className="flex items-center gap-2">
                        <MapPin className="h-4 w-4 text-[#7F8C8D]" />
                        <span className="text-[#7F8C8D]">From:</span>
                        <span>{selectedRoute.start_location}</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <MapPin className="h-4 w-4 text-[#7F8C8D]" />
                        <span className="text-[#7F8C8D]">To:</span>
                        <span>{selectedRoute.end_location}</span>
                      </div>
                    </div>
                  </div>

<div className="grid grid-cols-2 gap-4 text-sm">
                    <div className="p-3 bg-gray-50 rounded-lg">
                      <div className="flex items-center gap-2 mb-1">
                        <MapPin className="h-4 w-4 text-[#7F8C8D]" />
                        <span className="text-[#7F8C8D]">Distance</span>
                      </div>
                      <span className="font-semibold">{selectedRoute.distance_km} km</span>
                    </div>
                    <div className="p-3 bg-gray-50 rounded-lg">
                      <div className="flex items-center gap-2 mb-1">
                        <Clock className="h-4 w-4 text-[#7F8C8D]" />
                        <span className="text-[#7F8C8D]">Duration</span>
                      </div>
                      <span className="font-semibold">{selectedRoute.estimated_duration} min</span>
                    </div>
                  </div>

<div className="p-4 bg-green-50 rounded-lg border border-green-200">
                    <div className="flex items-center justify-between">
                      <span className="text-sm font-medium text-[#2C3E50]">Price per passenger:</span>
                      <span className="text-lg font-bold text-[#27AE60]">KSH {selectedRoute.price_per_person}</span>
                    </div>
                    {formData.total_seats > 0 && (
                      <div className="flex items-center justify-between mt-2 pt-2 border-t border-green-300">
                        <span className="text-sm text-[#7F8C8D]">
                          Potential revenue ({formData.total_seats} seats):
                        </span>
                        <span className="font-semibold text-[#27AE60]">
                          KSH {selectedRoute.price_per_person * formData.total_seats}
                        </span>
                      </div>
                    )}
                  </div>

{formData.scheduled_date && formData.scheduled_time && (
                    <div className="p-4 bg-blue-50 rounded-lg border border-blue-200">
                      <div className="flex items-center gap-2 mb-2">
                        <Calendar className="h-4 w-4 text-blue-600" />
                        <span className="font-medium text-blue-900">Trip Schedule</span>
                      </div>
                      <div className="text-sm text-blue-700">
                        <div>Date: {new Date(formData.scheduled_date).toLocaleDateString()}</div>
                        <div>Time: {formData.scheduled_time}</div>
                        <div>Available seats: {formData.total_seats}</div>
                      </div>
                    </div>
                  )}
                </div>
              ) : (
                <div className="text-center py-8 text-[#7F8C8D]">
                  <MapPin className="h-12 w-12 mx-auto mb-4 opacity-50" />
                  <p>Select a route to see the details</p>
                </div>
              )}
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/driver/settings/page.tsx" isEdit="true" isTerminated="true" isMerged="true"
"use client"

import type React from "react"

interface DriverProfile {
  first_name: string
  last_name: string
  email: string
  phone: string
  license_number: string
  license_expiry: string
  profile_image: string
  bio: string
}

interface VehicleInfo {
  make: string
  model: string
  year: string
  color: string
  license_plate: string
  capacity: number
  features: string[]
}

interface NotificationSettings {
  booking_notifications: boolean
  trip_reminders: boolean
  payment_notifications: boolean
  marketing_emails: boolean
  sms_notifications: boolean
}

interface WorkPreferences {
  preferred_start_time: string
  preferred_end_time: string
  max_trips_per_day: number
  preferred_routes: string[]
  break_duration: number
}

export default function DriverSettingsPage() {
  const [loading, setLoading] = useState(false)
  const [showPassword, setShowPassword] = useState(false)
  const [showNewPassword, setShowNewPassword] = useState(false)
  const [activeTab, setActiveTab] = useState("profile")

// Form states
  const [profile, setProfile] = useState<DriverProfile>({
    first_name: "John",
    last_name: "Doe",
    email: "john.doe@example.com",
    phone: "+254712345678",
    license_number: "DL123456789",
    license_expiry: "2025-12-31",
    profile_image: "/placeholder.svg?height=100&width=100",
    bio: "Experienced driver with 5+ years in passenger transport",
  })

const [vehicle, setVehicle] = useState<VehicleInfo>({
    make: "Toyota",
    model: "Hiace",
    year: "2020",
    color: "White",
    license_plate: "KCA 123A",
    capacity: 15,
    features: ["Air Conditioning", "WiFi", "USB Charging"],
  })

const [notifications, setNotifications] = useState<NotificationSettings>({
    booking_notifications: true,
    trip_reminders: true,
    payment_notifications: true,
    marketing_emails: false,
    sms_notifications: true,
  })

const [workPreferences, setWorkPreferences] = useState<WorkPreferences>({
    preferred_start_time: "06:00",
    preferred_end_time: "20:00",
    max_trips_per_day: 8,
    preferred_routes: ["City Center → Business District", "University → Shopping Mall"],
    break_duration: 30,
  })

const [passwords, setPasswords] = useState({
    current_password: "",
    new_password: "",
    confirm_password: "",
  })

const [newFeature, setNewFeature] = useState("")

const handleProfileUpdate = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

try {
      await new Promise((resolve) => setTimeout(resolve, 1000))
      toast.success("Profile updated successfully!")
    } catch (error) {
      toast.error("Failed to update profile")
    } finally {
      setLoading(false)
    }
  }

const handleVehicleUpdate = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

try {
      await new Promise((resolve) => setTimeout(resolve, 1000))
      toast.success("Vehicle information updated successfully!")
    } catch (error) {
      toast.error("Failed to update vehicle information")
    } finally {
      setLoading(false)
    }
  }

const handleNotificationUpdate = async () => {
    setLoading(true)

try {
      await new Promise((resolve) => setTimeout(resolve, 1000))
      toast.success("Notification preferences updated!")
    } catch (error) {
      toast.error("Failed to update notification preferences")
    } finally {
      setLoading(false)
    }
  }

const handleWorkPreferencesUpdate = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

try {
      await new Promise((resolve) => setTimeout(resolve, 1000))
      toast.success("Work preferences updated successfully!")
    } catch (error) {
      toast.error("Failed to update work preferences")
    } finally {
      setLoading(false)
    }
  }

const handlePasswordChange = async (e: React.FormEvent) => {
    e.preventDefault()
    
    if (passwords.new_password !== passwords.confirm_password) {
      toast.error("New passwords do not match")
      return
    }

if (passwords.new_password.length < 8) {
      toast.error("Password must be at least 8 characters long")
      return
    }

setLoading(true)

try {
      await new Promise((resolve) => setTimeout(resolve, 1000))
      toast.success("Password changed successfully!")
      setPasswords({ current_password: "", new_password: "", confirm_password: "" })
    } catch (error) {
      toast.error("Failed to change password")
    } finally {
      setLoading(false)
    }
  }

const addFeature = () => {
    if (newFeature.trim() && !vehicle.features.includes(newFeature.trim())) {
      setVehicle(prev => ({
        ...prev,
        features: [...prev.features, newFeature.trim()]
      }))
      setNewFeature("")
    }
  }

const removeFeature = (feature: string) => {
    setVehicle(prev => ({
      ...prev,
      features: prev.features.filter(f => f !== feature)
    }))
  }

const tabs = [
    { id: "profile", label: "Profile", icon: User },
    { id: "vehicle", label: "Vehicle", icon: Car },
    { id: "notifications", label: "Notifications", icon: Bell },
    { id: "work", label: "Work Preferences", icon: Clock },
    { id: "security", label: "Security", icon: Shield },
  ]

return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-3xl font-bold text-[#2C3E50]">Settings</h1>
        <p className="text-[#7F8C8D]">Manage your account and preferences</p>
      </div>

{/* Tabs */}
      <div className="flex space-x-1 bg-gray-100 p-1 rounded-lg">
        {tabs.map((tab) => (
          <Button
            key={tab.id}
            variant={activeTab === tab.id ? "default" : "ghost"}
            className={`flex-1 ${activeTab === tab.id ? "bg-white shadow-sm" : ""}`}
            onClick={() => setActiveTab(tab.id)}
          >
            <tab.icon className="h-4 w-4 mr-2" />
            {tab.label}
          </Button>
        ))}
      </div>

{/* Profile Tab */}
      {activeTab === "profile" && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <User className="h-5 w-5 text-[#27AE60]" />
              Profile Information
            </CardTitle>
            <CardDescription>Update your personal information and profile details</CardDescription>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleProfileUpdate} className="space-y-6">
              {/* Profile Image */}
              <div className="flex items-center gap-4">
                <Avatar className="h-20 w-20">
                  <AvatarImage src={profile.profile_image || "/placeholder.svg"} alt="Profile" />
                  <AvatarFallback>{profile.first_name[0]}{profile.last_name[0]}</AvatarFallback>
                </Avatar>
                <div>
                  <Button type="button" variant="outline" size="sm">
                    <Upload className="h-4 w-4 mr-2" />
                    Change Photo
                  </Button>
                  <p className="text-xs text-[#7F8C8D] mt-1">JPG, PNG or GIF. Max size 2MB.</p>
                </div>
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="first_name">First Name *</Label>
                  <Input
                    id="first_name"
                    value={profile.first_name}
                    onChange={(e) => setProfile(prev => ({ ...prev, first_name: e.target.value }))}
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="last_name">Last Name *</Label>
                  <Input
                    id="last_name"
                    value={profile.last_name}
                    onChange={(e) => setProfile(prev => ({ ...prev, last_name: e.target.value }))}
                    required
                  />
                </div>
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="email">Email Address *</Label>
                  <Input
                    id="email"
                    type="email"
                    value={profile.email}
                    onChange={(e) => setProfile(prev => ({ ...prev, email: e.target.value }))}
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="phone">Phone Number *</Label>
                  <Input
                    id="phone"
                    value={profile.phone}
                    onChange={(e) => setProfile(prev => ({ ...prev, phone: e.target.value }))}
                    required
                  />
                </div>
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="license_number">Driver's License Number *</Label>
                  <Input
                    id="license_number"
                    value={profile.license_number}
                    onChange={(e) => setProfile(prev => ({ ...prev, license_number: e.target.value }))}
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="license_expiry">License Expiry Date *</Label>
                  <Input
                    id="license_expiry"
                    type="date"
                    value={profile.license_expiry}
                    onChange={(e) => setProfile(prev => ({ ...prev, license_expiry: e.target.value }))}
                    required
                  />
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="bio">Bio</Label>
                <Textarea
                  id="bio"
                  value={profile.bio}
                  onChange={(e) => setProfile(prev => ({ ...prev, bio: e.target.value }))}
                  placeholder="Tell passengers about your experience and driving style"
                  rows={3}
                />
              </div>

<Button type="submit" disabled={loading} className="bg-[#27AE60] hover:bg-[#229954]">
                <Save className="h-4 w-4 mr-2" />
                {loading ? "Saving..." : "Save Profile"}
              </Button>
            </form>
          </CardContent>
        </Card>
      )}

{/* Vehicle Tab */}
      {activeTab === "vehicle" && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Car className="h-5 w-5 text-[#27AE60]" />
              Vehicle Information
            </CardTitle>
            <CardDescription>Update your vehicle details and features</CardDescription>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleVehicleUpdate} className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="make">Make *</Label>
                  <Input
                    id="make"
                    value={vehicle.make}
                    onChange={(e) => setVehicle(prev => ({ ...prev, make: e.target.value }))}
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="model">Model *</Label>
                  <Input
                    id="model"
                    value={vehicle.model}
                    onChange={(e) => setVehicle(prev => ({ ...prev, model: e.target.value }))}
                    required
                  />
                </div>
              </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="year">Year *</Label>
                  <Input
                    id="year"
                    value={vehicle.year}
                    onChange={(e) => setVehicle(prev => ({ ...prev, year: e.target.value }))}
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="color">Color *</Label>
                  <Input
                    id="color"
                    value={vehicle.color}
                    onChange={(e) => setVehicle(prev => ({ ...prev, color: e.target.value }))}
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="capacity">Passenger Capacity *</Label>
                  <Select
                    value={vehicle.capacity.toString()}
                    onValueChange={(value) => setVehicle(prev => ({ ...prev, capacity: Number.parseInt(value) }))}
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      {Array.from({ length: 20 }, (_, i) => i + 5).map((capacity) => (
                        <SelectItem key={capacity} value={capacity.toString()}>
                          {capacity} passengers
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="license_plate">License Plate *</Label>
                <Input
                  id="license_plate"
                  value={vehicle.license_plate}
                  onChange={(e) => setVehicle(prev => ({ ...prev, license_plate: e.target.value }))}
                  required
                />
              </div>

{/* Vehicle Features */}
              <div className="space-y-4">
                <Label>Vehicle Features</Label>
                <div className="flex flex-wrap gap-2">
                  {vehicle.features.map((feature) => (
                    <Badge key={feature} variant="secondary" className="flex items-center gap-1">
                      {feature}
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        className="h-4 w-4 p-0 hover:bg-red-100"
                        onClick={() => removeFeature(feature)}
                      >
                        <X className="h-3 w-3" />
                      </Button>
                    </Badge>
                  ))}
                </div>
                <div className="flex gap-2">
                  <Input
                    value={newFeature}
                    onChange={(e) => setNewFeature(e.target.value)}
                    placeholder="Add a feature (e.g., GPS, Music System)"
                    onKeyPress={(e) => e.key === 'Enter' && (e.preventDefault(), addFeature())}
                  />
                  <Button type="button" onClick={addFeature} variant="outline">
                    <Plus className="h-4 w-4" />
                  </Button>
                </div>
              </div>

<Button type="submit" disabled={loading} className="bg-[#27AE60] hover:bg-[#229954]">
                <Save className="h-4 w-4 mr-2" />
                {loading ? "Saving..." : "Save Vehicle Info"}
              </Button>
            </form>
          </CardContent>
        </Card>
      )}

{/* Notifications Tab */}
      {activeTab === "notifications" && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Bell className="h-5 w-5 text-[#27AE60]" />
              Notification Preferences
            </CardTitle>
            <CardDescription>Choose how you want to be notified</CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="booking_notifications">Booking Notifications</Label>
                  <p className="text-sm text-[#7F8C8D]">Get notified when passengers book your trips</p>
                </div>
                <Switch
                  id="booking_notifications"
                  checked={notifications.booking_notifications}
                  onCheckedChange={(checked) => 
                    setNotifications(prev => ({ ...prev, booking_notifications: checked }))
                  }
                />
              </div>

<div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="trip_reminders">Trip Reminders</Label>
                  <p className="text-sm\
[V0_FILE]typescriptreact:file="app/admin/pickup-locations/[id]/edit/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
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 { Textarea } from "@/components/ui/textarea"
import { Switch } from "@/components/ui/switch"
import { ArrowLeft, Save, MapPin } from "lucide-react"
import { toast } from "sonner"

interface PickupLocation {
  id: string
  name: string
  address: string
  latitude?: number
  longitude?: number
  is_active: boolean
}

export default function EditPickupLocationPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [initialLoading, setInitialLoading] = useState(true)
  const [formData, setFormData] = useState<PickupLocation>({
    id: "",
    name: "",
    address: "",
    latitude: undefined,
    longitude: undefined,
    is_active: true,
  })

useEffect(() => {
    // Mock API call to fetch location data - replace with actual implementation
    const fetchLocation = async () => {
      try {
        await new Promise((resolve) => setTimeout(resolve, 1000))

// Mock location data
        const mockLocation: PickupLocation = {
          id: params.id,
          name: "City Center",
          address: "Main Street, Downtown Nairobi",
          latitude: -1.2864,
          longitude: 36.8172,
          is_active: true,
        }

setFormData(mockLocation)
      } catch (error) {
        toast.error("Failed to load location data")
      } finally {
        setInitialLoading(false)
      }
    }

fetchLocation()
  }, [params.id])

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

try {
      // Mock API call - replace with actual implementation
      await new Promise((resolve) => setTimeout(resolve, 1000))

toast.success("Location updated successfully")

router.push("/admin/pickup-locations")
    } catch (error) {
      toast.error("Failed to update location")
    } finally {
      setLoading(false)
    }
  }

const handleInputChange = (field: string, value: string | number | boolean | undefined) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <Button variant="ghost" size="icon" asChild>
          <Link href="/admin/pickup-locations">
            <ArrowLeft className="h-4 w-4" />
          </Link>
        </Button>
        <div>
          <h1 className="text-3xl font-bold text-[#2C3E50]">Edit Pickup Location</h1>
          <p className="text-[#7F8C8D]">Update pickup or drop-off location details</p>
        </div>
      </div>

{/* Form */}
      <Card className="max-w-2xl">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <MapPin className="h-5 w-5 text-[#27AE60]" />
            Location Information
          </CardTitle>
          <CardDescription>Update the details for this pickup location</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-6">
            <div className="space-y-2">
              <Label htmlFor="name">Location Name *</Label>
              <Input
                id="name"
                value={formData.name}
                onChange={(e) => handleInputChange("name", e.target.value)}
                placeholder="e.g., City Center, University Campus"
                required
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="address">Address *</Label>
              <Textarea
                id="address"
                value={formData.address}
                onChange={(e) => handleInputChange("address", e.target.value)}
                placeholder="Full address of the location"
                required
                rows={3}
              />
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="latitude">Latitude</Label>
                <Input
                  id="latitude"
                  type="number"
                  step="any"
                  value={formData.latitude || ""}
                  onChange={(e) =>
                    handleInputChange("latitude", e.target.value ? Number.parseFloat(e.target.value) : undefined)
                  }
                  placeholder="-1.2864"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="longitude">Longitude</Label>
                <Input
                  id="longitude"
                  type="number"
                  step="any"
                  value={formData.longitude || ""}
                  onChange={(e) =>
                    handleInputChange("longitude", e.target.value ? Number.parseFloat(e.target.value) : undefined)
                  }
                  placeholder="36.8172"
                />
              </div>
            </div>

<div className="flex gap-4 pt-4">
              <Button type="submit" disabled={loading} className="bg-[#27AE60] hover:bg-[#229954]">
                <Save className="h-4 w-4 mr-2" />
                {loading ? "Updating..." : "Update Location"}
              </Button>
              <Button type="button" variant="outline" asChild>
                <Link href="/admin/pickup-locations">Cancel</Link>
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/bookings/[id]/edit/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
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 { Textarea } from "@/components/ui/textarea"
import { ArrowLeft, Save, Calendar } from "lucide-react"
import { toast } from "sonner"

interface Booking {
  id: string
  user_id: string
  trip_id: string
  pickup_location_id: string
  dropoff_location_id: string
  booking_status: string
  payment_status: string
  total_amount: number
  special_requests?: string
  created_at: string
}

interface Trip {
  id: string
  route_name: string
  departure_time: string
}

interface Location {
  id: string
  name: string
}

interface User {
  id: string
  full_name: string
  email: string
}

export default function EditBookingPage({ params }: { params: Promise<{ id: string }> }) {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [initialLoading, setInitialLoading] = useState(true)
  const [bookingId, setBookingId] = useState<string>("")
  const [formData, setFormData] = useState<Booking>({
    id: "",
    user_id: "",
    trip_id: "",
    pickup_location_id: "",
    dropoff_location_id: "",
    booking_status: "confirmed",
    payment_status: "pending",
    total_amount: 0,
    special_requests: "",
    created_at: "",
  })

const [trips, setTrips] = useState<Trip[]>([])
  const [locations, setLocations] = useState<Location[]>([])
  const [users, setUsers] = useState<User[]>([])

useEffect(() => {
    const resolveParams = async () => {
      const resolvedParams = await params
      setBookingId(resolvedParams.id)
    }
    resolveParams()
  }, [params])

useEffect(() => {
    if (!bookingId) return

const fetchData = async () => {
      try {
        await new Promise((resolve) => setTimeout(resolve, 1000))

// Mock data
        const mockBooking: Booking = {
          id: bookingId,
          user_id: "user1",
          trip_id: "trip1",
          pickup_location_id: "loc1",
          dropoff_location_id: "loc2",
          booking_status: "confirmed",
          payment_status: "completed",
          total_amount: 1500,
          special_requests: "Window seat preferred",
          created_at: "2024-01-15T10:00:00Z",
        }

const mockTrips: Trip[] = [
          { id: "trip1", route_name: "Nairobi - Mombasa", departure_time: "08:00" },
          { id: "trip2", route_name: "Nairobi - Kisumu", departure_time: "09:00" },
        ]

const mockLocations: Location[] = [
          { id: "loc1", name: "City Center" },
          { id: "loc2", name: "Airport" },
          { id: "loc3", name: "University" },
        ]

const mockUsers: User[] = [
          { id: "user1", full_name: "John Doe", email: "john@example.com" },
          { id: "user2", full_name: "Jane Smith", email: "jane@example.com" },
        ]

setFormData(mockBooking)
        setTrips(mockTrips)
        setLocations(mockLocations)
        setUsers(mockUsers)
      } catch (error) {
        toast.error("Failed to load booking data")
      } finally {
        setInitialLoading(false)
      }
    }

fetchData()
  }, [bookingId])

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

try {
      await new Promise((resolve) => setTimeout(resolve, 1000))
      toast.success("Booking updated successfully")
      router.push("/admin/bookings")
    } catch (error) {
      toast.error("Failed to update booking")
    } finally {
      setLoading(false)
    }
  }

const handleInputChange = (field: string, value: string | number) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

return (
    <div className="space-y-6">
      <div className="flex items-center gap-4">
        <Button variant="ghost" size="icon" asChild>
          <Link href="/admin/bookings">
            <ArrowLeft className="h-4 w-4" />
          </Link>
        </Button>
        <div>
          <h1 className="text-3xl font-bold text-[#2C3E50]">Edit Booking</h1>
          <p className="text-[#7F8C8D]">Update booking details and status</p>
        </div>
      </div>

<Card className="max-w-2xl">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Calendar className="h-5 w-5 text-[#27AE60]" />
            Booking Information
          </CardTitle>
          <CardDescription>Update the details for this booking</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-6">
            <div className="space-y-2">
              <Label htmlFor="user_id">Customer *</Label>
              <Select value={formData.user_id} onValueChange={(value) => handleInputChange("user_id", value)}>
                <SelectTrigger>
                  <SelectValue placeholder="Select customer" />
                </SelectTrigger>
                <SelectContent>
                  {users.map((user) => (
                    <SelectItem key={user.id} value={user.id}>
                      {user.full_name} ({user.email})
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label htmlFor="trip_id">Trip *</Label>
              <Select value={formData.trip_id} onValueChange={(value) => handleInputChange("trip_id", value)}>
                <SelectTrigger>
                  <SelectValue placeholder="Select trip" />
                </SelectTrigger>
                <SelectContent>
                  {trips.map((trip) => (
                    <SelectItem key={trip.id} value={trip.id}>
                      {trip.route_name} - {trip.departure_time}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
                <Label htmlFor="dropoff_location_id">Dropoff Location *</Label>
                <Select
                  value={formData.dropoff_location_id}
                  onValueChange={(value) => handleInputChange("dropoff_location_id", value)}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Select dropoff" />
                  </SelectTrigger>
                  <SelectContent>
                    {locations.map((location) => (
                      <SelectItem key={location.id} value={location.id}>
                        {location.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="booking_status">Booking Status *</Label>
                <Select
                  value={formData.booking_status}
                  onValueChange={(value) => handleInputChange("booking_status", value)}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="pending">Pending</SelectItem>
                    <SelectItem value="confirmed">Confirmed</SelectItem>
                    <SelectItem value="cancelled">Cancelled</SelectItem>
                    <SelectItem value="completed">Completed</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label htmlFor="payment_status">Payment Status *</Label>
                <Select
                  value={formData.payment_status}
                  onValueChange={(value) => handleInputChange("payment_status", value)}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="pending">Pending</SelectItem>
                    <SelectItem value="completed">Completed</SelectItem>
                    <SelectItem value="failed">Failed</SelectItem>
                    <SelectItem value="refunded">Refunded</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="total_amount">Total Amount (KES) *</Label>
              <Input
                id="total_amount"
                type="number"
                min="0"
                step="0.01"
                value={formData.total_amount}
                onChange={(e) => handleInputChange("total_amount", Number.parseFloat(e.target.value) || 0)}
                required
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="special_requests">Special Requests</Label>
              <Textarea
                id="special_requests"
                value={formData.special_requests || ""}
                onChange={(e) => handleInputChange("special_requests", e.target.value)}
                placeholder="Any special requests from the customer"
                rows={3}
              />
            </div>

<div className="flex gap-4 pt-4">
              <Button type="submit" disabled={loading} className="bg-[#27AE60] hover:bg-[#229954]">
                <Save className="h-4 w-4 mr-2" />
                {loading ? "Updating..." : "Update Booking"}
              </Button>
              <Button type="button" variant="outline" asChild>
                <Link href="/admin/bookings">Cancel</Link>
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/customer/book/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Clock, Users, DollarSign, Calendar } from "lucide-react"
import { toast } from "sonner"

interface Trip {
  id: string
  route_name: string
  departure_time: string
  arrival_time: string
  available_seats: number
  price_per_seat: number
  departure_date: string
}

interface Location {
  id: string
  name: string
  address: string
}

export default function BookTripPage() {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [trips, setTrips] = useState<Trip[]>([])
  const [locations, setLocations] = useState<Location[]>([])
  const [selectedTrip, setSelectedTrip] = useState<Trip | null>(null)
  const [formData, setFormData] = useState({
    pickup_location_id: "",
    dropoff_location_id: "",
    special_requests: "",
  })

useEffect(() => {
    const fetchData = async () => {
      try {
        // Mock data
        const mockTrips: Trip[] = [
          {
            id: "trip1",
            route_name: "Nairobi - Mombasa Express",
            departure_time: "08:00",
            arrival_time: "16:00",
            available_seats: 15,
            price_per_seat: 2500,
            departure_date: "2024-01-20",
          },
          {
            id: "trip2",
            route_name: "Nairobi - Kisumu Deluxe",
            departure_time: "09:00",
            arrival_time: "15:00",
            available_seats: 8,
            price_per_seat: 2000,
            departure_date: "2024-01-20",
          },
          {
            id: "trip3",
            route_name: "Nairobi - Nakuru Local",
            departure_time: "10:00",
            arrival_time: "12:30",
            available_seats: 20,
            price_per_seat: 800,
            departure_date: "2024-01-20",
          },
        ]

const mockLocations: Location[] = [
          { id: "loc1", name: "City Center", address: "CBD, Nairobi" },
          { id: "loc2", name: "Airport", address: "JKIA, Nairobi" },
          { id: "loc3", name: "University", address: "University of Nairobi" },
          { id: "loc4", name: "Westlands", address: "Westlands, Nairobi" },
        ]

setTrips(mockTrips)
        setLocations(mockLocations)
      } catch (error) {
        toast.error("Failed to load trip data")
      }
    }

fetchData()
  }, [])

const handleTripSelect = (trip: Trip) => {
    setSelectedTrip(trip)
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!selectedTrip) {
      toast.error("Please select a trip")
      return
    }

if (!formData.pickup_location_id || !formData.dropoff_location_id) {
      toast.error("Please select pickup and dropoff locations")
      return
    }

setLoading(true)

try {
      await new Promise((resolve) => setTimeout(resolve, 1000))

// Store booking data in sessionStorage for the payment page
      const bookingData = {
        trip: selectedTrip,
        pickup_location_id: formData.pickup_location_id,
        dropoff_location_id: formData.dropoff_location_id,
        special_requests: formData.special_requests,
        total_amount: selectedTrip.price_per_seat,
      }

sessionStorage.setItem("bookingData", JSON.stringify(bookingData))

toast.success("Trip selected! Proceeding to payment...")
      router.push("/customer/payment")
    } catch (error) {
      toast.error("Failed to process booking")
    } finally {
      setLoading(false)
    }
  }

const handleInputChange = (field: string, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold text-[#2C3E50]">Book a Trip</h1>
        <p className="text-[#7F8C8D]">Select your trip and provide booking details</p>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Available Trips */}
        <div className="space-y-4">
          <h2 className="text-xl font-semibold text-[#2C3E50]">Available Trips</h2>
          {trips.map((trip) => (
            <Card
              key={trip.id}
              className={`cursor-pointer transition-all ${
                selectedTrip?.id === trip.id ? "ring-2 ring-[#27AE60] bg-green-50" : "hover:shadow-md"
              }`}
              onClick={() => handleTripSelect(trip)}
            >
              <CardContent className="p-4">
                <div className="flex justify-between items-start mb-3">
                  <h3 className="font-semibold text-[#2C3E50]">{trip.route_name}</h3>
                  <Badge variant={trip.available_seats > 10 ? "default" : "destructive"}>
                    {trip.available_seats} seats left
                  </Badge>
                </div>

<div className="grid grid-cols-2 gap-4 text-sm text-[#7F8C8D]">
                  <div className="flex items-center gap-2">
                    <Calendar className="h-4 w-4" />
                    {trip.departure_date}
                  </div>
                  <div className="flex items-center gap-2">
                    <Clock className="h-4 w-4" />
                    {trip.departure_time} - {trip.arrival_time}
                  </div>
                  <div className="flex items-center gap-2">
                    <Users className="h-4 w-4" />
                    {trip.available_seats} available
                  </div>
                  <div className="flex items-center gap-2">
                    <DollarSign className="h-4 w-4" />
                    KES {trip.price_per_seat.toLocaleString()}
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

{/* Booking Form */}
        <Card>
          <CardHeader>
            <CardTitle>Booking Details</CardTitle>
            <CardDescription>
              {selectedTrip ? `Selected: ${selectedTrip.route_name}` : "Please select a trip first"}
            </CardDescription>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="pickup_location_id">Pickup Location *</Label>
                <Select
                  value={formData.pickup_location_id}
                  onValueChange={(value) => handleInputChange("pickup_location_id", value)}
                  disabled={!selectedTrip}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Select pickup location" />
                  </SelectTrigger>
                  <SelectContent>
                    {locations.map((location) => (
                      <SelectItem key={location.id} value={location.id}>
                        <div>
                          <div className="font-medium">{location.name}</div>
                          <div className="text-sm text-gray-500">{location.address}</div>
                        </div>
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label htmlFor="dropoff_location_id">Dropoff Location *</Label>
                <Select
                  value={formData.dropoff_location_id}
                  onValueChange={(value) => handleInputChange("dropoff_location_id", value)}
                  disabled={!selectedTrip}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Select dropoff location" />
                  </SelectTrigger>
                  <SelectContent>
                    {locations.map((location) => (
                      <SelectItem key={location.id} value={location.id}>
                        <div>
                          <div className="font-medium">{location.name}</div>
                          <div className="text-sm text-gray-500">{location.address}</div>
                        </div>
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label htmlFor="special_requests">Special Requests</Label>
                <Textarea
                  id="special_requests"
                  value={formData.special_requests}
                  onChange={(e) => handleInputChange("special_requests", e.target.value)}
                  placeholder="Any special requests (window seat, dietary requirements, etc.)"
                  rows={3}
                  disabled={!selectedTrip}
                />
              </div>

{selectedTrip && (
                <div className="bg-gray-50 p-4 rounded-lg">
                  <h4 className="font-semibold text-[#2C3E50] mb-2">Booking Summary</h4>
                  <div className="space-y-1 text-sm">
                    <div className="flex justify-between">
                      <span>Trip:</span>
                      <span>{selectedTrip.route_name}</span>
                    </div>
                    <div className="flex justify-between">
                      <span>Date & Time:</span>
                      <span>
                        {selectedTrip.departure_date} at {selectedTrip.departure_time}
                      </span>
                    </div>
                    <div className="flex justify-between font-semibold">
                      <span>Total Amount:</span>
                      <span>KES {selectedTrip.price_per_seat.toLocaleString()}</span>
                    </div>
                  </div>
                </div>
              )}

<Button
                type="submit"
                disabled={loading || !selectedTrip}
                className="w-full bg-[#27AE60] hover:bg-[#229954]"
              >
                {loading ? "Processing..." : "Proceed to Payment"}
              </Button>
            </form>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/customer/payment/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
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 { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { CreditCard, Smartphone, Building, ArrowLeft } from "lucide-react"
import { toast } from "sonner"
import Link from "next/link"

interface BookingData {
  trip: {
    id: string
    route_name: string
    departure_date: string
    departure_time: string
    price_per_seat: number
  }
  pickup_location_id: string
  dropoff_location_id: string
  special_requests: string
  total_amount: number
}

export default function PaymentPage() {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [bookingData, setBookingData] = useState<BookingData | null>(null)
  const [paymentMethod, setPaymentMethod] = useState("mpesa")
  const [formData, setFormData] = useState({
    phone_number: "",
    card_number: "",
    expiry_date: "",
    cvv: "",
    cardholder_name: "",
  })

useEffect(() => {
    const storedBookingData = sessionStorage.getItem("bookingData")
    if (storedBookingData) {
      setBookingData(JSON.parse(storedBookingData))
    } else {
      toast.error("No booking data found. Please start over.")
      router.push("/customer/book")
    }
  }, [router])

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!bookingData) return

setLoading(true)

try {
      // Simulate payment processing
      await new Promise((resolve) => setTimeout(resolve, 2000))

// Create booking
      const bookingPayload = {
        trip_id: bookingData.trip.id,
        pickup_location_id: bookingData.pickup_location_id,
        dropoff_location_id: bookingData.dropoff_location_id,
        special_requests: bookingData.special_requests,
        total_amount: bookingData.total_amount,
        payment_method: paymentMethod,
        payment_details:
          paymentMethod === "mpesa"
            ? { phone: formData.phone_number }
            : {
                card_number: formData.card_number.slice(-4),
                cardholder_name: formData.cardholder_name,
              },
      }

// Store booking confirmation data
      sessionStorage.setItem(
        "bookingConfirmation",
        JSON.stringify({
          ...bookingPayload,
          booking_id: "BK" + Date.now(),
          payment_status: "completed",
        }),
      )

// Clear booking data
      sessionStorage.removeItem("bookingData")

toast.success("Payment successful! Booking confirmed.")
      router.push("/customer/booking-success")
    } catch (error) {
      toast.error("Payment failed. Please try again.")
    } finally {
      setLoading(false)
    }
  }

const handleInputChange = (field: string, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

if (!bookingData) {
    return (
      <div className="flex items-center justify-center min-h-[400px]">
        <div className="text-center">
          <p className="text-gray-500 mb-4">Loading booking data...</p>
          <Button asChild>
            <Link href="/customer/book">Back to Booking</Link>
          </Button>
        </div>
      </div>
    )
  }

return (
    <div className="space-y-6">
      <div className="flex items-center gap-4">
        <Button variant="ghost" size="icon" asChild>
          <Link href="/customer/book">
            <ArrowLeft className="h-4 w-4" />
          </Link>
        </Button>
        <div>
          <h1 className="text-3xl font-bold text-[#2C3E50]">Payment</h1>
          <p className="text-[#7F8C8D]">Complete your booking payment</p>
        </div>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Booking Summary */}
        <Card>
          <CardHeader>
            <CardTitle>Booking Summary</CardTitle>
            <CardDescription>Review your trip details</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <div className="flex justify-between">
                <span className="text-gray-600">Trip:</span>
                <span className="font-medium">{bookingData.trip.route_name}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-gray-600">Date:</span>
                <span>{bookingData.trip.departure_date}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-gray-600">Departure:</span>
                <span>{bookingData.trip.departure_time}</span>
              </div>
              {bookingData.special_requests && (
                <div className="flex justify-between">
                  <span className="text-gray-600">Special Requests:</span>
                  <span className="text-right">{bookingData.special_requests}</span>
                </div>
              )}
            </div>

<div className="border-t pt-4">
              <div className="flex justify-between text-lg font-semibold">
                <span>Total Amount:</span>
                <span className="text-[#27AE60]">KES {bookingData.total_amount.toLocaleString()}</span>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Payment Form */}
        <Card>
          <CardHeader>
            <CardTitle>Payment Method</CardTitle>
            <CardDescription>Choose your preferred payment method</CardDescription>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSubmit} className="space-y-6">
              <RadioGroup value={paymentMethod} onValueChange={setPaymentMethod}>
                <div className="flex items-center space-x-2 p-3 border rounded-lg">
                  <RadioGroupItem value="mpesa" id="mpesa" />
                  <Label htmlFor="mpesa" className="flex items-center gap-2 cursor-pointer">
                    <Smartphone className="h-4 w-4 text-green-600" />
                    M-Pesa
                  </Label>
                </div>
                <div className="flex items-center space-x-2 p-3 border rounded-lg">
                  <RadioGroupItem value="card" id="card" />
                  <Label htmlFor="card" className="flex items-center gap-2 cursor-pointer">
                    <CreditCard className="h-4 w-4 text-blue-600" />
                    Credit/Debit Card
                  </Label>
                </div>
                <div className="flex items-center space-x-2 p-3 border rounded-lg">
                  <RadioGroupItem value="bank" id="bank" />
                  <Label htmlFor="bank" className="flex items-center gap-2 cursor-pointer">
                    <Building className="h-4 w-4 text-purple-600" />
                    Bank Transfer
                  </Label>
                </div>
              </RadioGroup>

{paymentMethod === "mpesa" && (
                <div className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="phone_number">M-Pesa Phone Number *</Label>
                    <Input
                      id="phone_number"
                      type="tel"
                      value={formData.phone_number}
                      onChange={(e) => handleInputChange("phone_number", e.target.value)}
                      placeholder="254712345678"
                      required
                    />
                    <p className="text-sm text-gray-500">You will receive an M-Pesa prompt on this number</p>
                  </div>
                </div>
              )}

{paymentMethod === "card" && (
                <div className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="cardholder_name">Cardholder Name *</Label>
                    <Input
                      id="cardholder_name"
                      value={formData.cardholder_name}
                      onChange={(e) => handleInputChange("cardholder_name", e.target.value)}
                      placeholder="John Doe"
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="card_number">Card Number *</Label>
                    <Input
                      id="card_number"
                      value={formData.card_number}
                      onChange={(e) => handleInputChange("card_number", e.target.value)}
                      placeholder="1234 5678 9012 3456"
                      required
                    />
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="expiry_date">Expiry Date *</Label>
                      <Input
                        id="expiry_date"
                        value={formData.expiry_date}
                        onChange={(e) => handleInputChange("expiry_date", e.target.value)}
                        placeholder="MM/YY"
                        required
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="cvv">CVV *</Label>
                      <Input
                        id="cvv"
                        value={formData.cvv}
                        onChange={(e) => handleInputChange("cvv", e.target.value)}
                        placeholder="123"
                        required
                      />
                    </div>
                  </div>
                </div>
              )}

{paymentMethod === "bank" && (
                <div className="bg-blue-50 p-4 rounded-lg">
                  <h4 className="font-semibold text-blue-900 mb-2">Bank Transfer Details</h4>
                  <div className="text-sm text-blue-800 space-y-1">
                    <p>
                      <strong>Bank:</strong> Kenya Commercial Bank
                    </p>
                    <p>
                      <strong>Account Name:</strong> Ride & Dine Services
                    </p>
                    <p>
                      <strong>Account Number:</strong> 1234567890
                    </p>
                    <p>
                      <strong>Reference:</strong> {bookingData.trip.id}
                    </p>
                  </div>
                  <p className="text-sm text-blue-700 mt-2">Please use the reference number when making the transfer</p>
                </div>
              )}

<Button type="submit" disabled={loading} className="w-full bg-[#27AE60] hover:bg-[#229954]">
                {loading ? "Processing Payment..." : `Pay KES ${bookingData.total_amount.toLocaleString()}`}
              </Button>
            </form>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/customer/booking-success/page.tsx" isEdit="true" isMerged="true"
"use client"

interface BookingConfirmation {
  booking_id: string
  trip_id: string
  pickup_location_id: string
  dropoff_location_id: string
  special_requests: string
  total_amount: number
  payment_method: string
  payment_status: string
  payment_details: any
}

export default function BookingSuccessPage() {
  const router = useRouter()
  const [bookingConfirmation, setBookingConfirmation] = useState<BookingConfirmation | null>(null)

useEffect(() => {
    const storedConfirmation = sessionStorage.getItem("bookingConfirmation")
    if (storedConfirmation) {
      setBookingConfirmation(JSON.parse(storedConfirmation))
    } else {
      router.push("/customer/book")
    }
  }, [router])

const handleDownloadTicket = () => {
    // Mock ticket download
    const ticketData = {
      booking_id: bookingConfirmation?.booking_id,
      amount: bookingConfirmation?.total_amount,
      date: new Date().toISOString(),
    }

const blob = new Blob([JSON.stringify(ticketData, null, 2)], { type: "application/json" })
    const url = URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `ticket-${bookingConfirmation?.booking_id}.json`
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    URL.revokeObjectURL(url)
  }

if (!bookingConfirmation) {
    return (
      <div className="flex items-center justify-center min-h-[400px]">
        <div className="text-center">
          <p className="text-gray-500 mb-4">Loading confirmation...</p>
        </div>
      </div>
    )
  }

return (
    <div className="max-w-2xl mx-auto space-y-6">
      {/* Success Header */}
      <div className="text-center space-y-4">
        <div className="flex justify-center">
          <CheckCircle className="h-16 w-16 text-green-500" />
        </div>
        <div>
          <h1 className="text-3xl font-bold text-[#2C3E50]">Booking Confirmed!</h1>
          <p className="text-[#7F8C8D]">Your trip has been successfully booked</p>
        </div>
      </div>

{/* Booking Details */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center justify-between">
            <span>Booking Details</span>
            <Badge variant="default" className="bg-green-500">
              {bookingConfirmation.payment_status}
            </Badge>
          </CardTitle>
          <CardDescription>Booking ID: {bookingConfirmation.booking_id}</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-3">
              <div className="flex items-center gap-2">
                <Calendar className="h-4 w-4 text-gray-500" />
                <div>
                  <p className="text-sm text-gray-500">Trip Date</p>
                  <p className="font-medium">January 20, 2024</p>
                </div>
              </div>

<div className="flex items-center gap-2">
                <Clock className="h-4 w-4 text-gray-500" />
                <div>
                  <p className="text-sm text-gray-500">Departure Time</p>
                  <p className="font-medium">08:00 AM</p>
                </div>
              </div>
            </div>

<div className="space-y-3">
              <div className="flex items-center gap-2">
                <MapPin className="h-4 w-4 text-gray-500" />
                <div>
                  <p className="text-sm text-gray-500">Route</p>
                  <p className="font-medium">Nairobi - Mombasa Express</p>
                </div>
              </div>

<div className="flex items-center gap-2">
                <CreditCard className="h-4 w-4 text-gray-500" />
                <div>
                  <p className="text-sm text-gray-500">Payment Method</p>
                  <p className="font-medium capitalize">{bookingConfirmation.payment_method}</p>
                </div>
              </div>
            </div>
          </div>

{bookingConfirmation.special_requests && (
            <div className="border-t pt-4">
              <p className="text-sm text-gray-500">Special Requests</p>
              <p className="font-medium">{bookingConfirmation.special_requests}</p>
            </div>
          )}

<div className="border-t pt-4">
            <div className="flex justify-between items-center">
              <span className="text-lg font-semibold">Total Paid</span>
              <span className="text-lg font-bold text-[#27AE60]">
                KES {bookingConfirmation.total_amount.toLocaleString()}
              </span>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Important Information */}
      <Card>
        <CardHeader>
          <CardTitle>Important Information</CardTitle>
        </CardHeader>
        <CardContent className="space-y-3">
          <div className="bg-blue-50 p-3 rounded-lg">
            <p className="text-sm text-blue-800">
              <strong>Arrival Time:</strong> Please arrive at your pickup location 15 minutes before departure time.
            </p>
          </div>
          <div className="bg-yellow-50 p-3 rounded-lg">
            <p className="text-sm text-yellow-800">
              <strong>Cancellation Policy:</strong> Free cancellation up to 2 hours before departure.
            </p>
          </div>
          <div className="bg-green-50 p-3 rounded-lg">
            <p className="text-sm text-green-800">
              <strong>Contact:</strong> For any changes or queries, call +254 700 123 456
            </p>
          </div>
        </CardContent>
      </Card>

{/* Actions */}
      <div className="flex flex-col sm:flex-row gap-4">
        <Button onClick={handleDownloadTicket} variant="outline" className="flex-1 bg-transparent">
          <Download className="h-4 w-4 mr-2" />
          Download Ticket
        </Button>
        <Button asChild className="flex-1 bg-[#27AE60] hover:bg-[#229954]">
          <Link href="/customer/bookings">View All Bookings</Link>
        </Button>
      </div>

<div className="text-center">
        <Button variant="ghost" asChild>
          <Link href="/customer">Back to Dashboard</Link>
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import {
  Truck,
  MapPin,
  ChefHat,
  Smartphone,
  Users,
  Clock,
  Star,
  Download,
  Play,
  Apple,
  CheckCircle,
  Menu,
  X,
  Quote,
  Shield,
  Zap,
  Heart,
} from "lucide-react"

export default function HomePage() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const [currentTestimonial, setCurrentTestimonial] = useState(0)

const testimonials = [
    {
      name: "Sarah Johnson",
      role: "Regular Commuter",
      content:
        "RideDine transformed my daily commute! Instead of boring bus rides, I get to enjoy amazing food while traveling to work. It's like having a mobile restaurant!",
      rating: 5,
      image: "/placeholder.svg?height=60&width=60",
    },
    {
      name: "Michael Chen",
      role: "Food Enthusiast",
      content:
        "The quality of food is incredible! Fresh ingredients, creative dishes, and the experience of dining while traveling is absolutely unique. Highly recommended!",
      rating: 5,
      image: "/placeholder.svg?height=60&width=60",
    },
    {
      name: "David Kimani",
      role: "RideDine Driver",
      content:
        "As a driver, I love the flexibility and the extra income. The platform is easy to use and the support team is always helpful. Great opportunity!",
      rating: 5,
      image: "/placeholder.svg?height=60&width=60",
    },
  ]

useEffect(() => {
    const interval = setInterval(() => {
      setCurrentTestimonial((prev) => (prev + 1) % testimonials.length)
    }, 5000)
    return () => clearInterval(interval)
  }, [])

return (
    <div className="min-h-screen bg-white">
      {/* Navigation */}
      <nav className="fixed top-0 w-full bg-white/95 backdrop-blur-sm border-b border-gray-200 z-50">
        <div className="container mx-auto px-4 py-4 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="relative">
              <Truck className="h-8 w-8 text-[#27AE60]" />
              <div className="absolute -top-1 -right-1 w-3 h-3 bg-[#2980B9] rounded-full animate-pulse"></div>
            </div>
            <span className="text-2xl font-bold text-[#2C3E50]">RideDine</span>
          </div>

{/* Desktop Menu */}
          <div className="hidden md:flex items-center gap-8">
            <a href="#how-it-works" className="text-[#2C3E50] hover:text-[#27AE60] transition-colors">
              How It Works
            </a>
            <a href="#features" className="text-[#2C3E50] hover:text-[#27AE60] transition-colors">
              Features
            </a>
            <a href="#testimonials" className="text-[#2C3E50] hover:text-[#27AE60] transition-colors">
              Reviews
            </a>
            <a href="#download" className="text-[#2C3E50] hover:text-[#27AE60] transition-colors">
              Download
            </a>
          </div>

<div className="hidden md:flex gap-2">
            <Button variant="outline" asChild>
              <Link href="/auth/login">Sign In</Link>
            </Button>
            <Button asChild className="bg-[#27AE60] hover:bg-[#229954]">
              <Link href="/auth/signup">Get Started</Link>
            </Button>
          </div>

{/* Mobile Menu Button */}
          <Button variant="ghost" size="icon" className="md:hidden" onClick={() => setIsMenuOpen(!isMenuOpen)}>
            {isMenuOpen ? <X /> : <Menu />}
          </Button>
        </div>

{/* Mobile Menu */}
        {isMenuOpen && (
          <div className="md:hidden bg-white border-t border-gray-200">
            <div className="container mx-auto px-4 py-4 space-y-4">
              <a href="#how-it-works" className="block text-[#2C3E50] hover:text-[#27AE60]">
                How It Works
              </a>
              <a href="#features" className="block text-[#2C3E50] hover:text-[#27AE60]">
                Features
              </a>
              <a href="#testimonials" className="block text-[#2C3E50] hover:text-[#27AE60]">
                Reviews
              </a>
              <a href="#download" className="block text-[#2C3E50] hover:text-[#27AE60]">
                Download
              </a>
              <div className="flex gap-2 pt-4">
                <Button variant="outline" size="sm" asChild>
                  <Link href="/auth/login">Sign In</Link>
                </Button>
                <Button size="sm" className="bg-[#27AE60] hover:bg-[#229954]" asChild>
                  <Link href="/auth/signup">Get Started</Link>
                </Button>
              </div>
            </div>
          </div>
        )}
      </nav>

{/* Hero Section */}
      <section className="pt-24 pb-20 px-4 bg-gradient-to-br from-[#F7F9F9] via-white to-[#E8F5E8]">
        <div className="container mx-auto">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div className="space-y-8">
              <div className="space-y-4">
                <Badge className="bg-[#27AE60]/10 text-[#27AE60] border-[#27AE60]/20">
                  🚀 Revolutionary Transport Experience
                </Badge>
                <h1 className="text-5xl lg:text-6xl font-bold text-[#2C3E50] leading-tight">
                  Ride, Dine &<span className="text-[#27AE60]"> Arrive</span> in Style
                </h1>
                <p className="text-xl text-[#7F8C8D] leading-relaxed">
                  Experience the world's first mobile dining transport service. Book your ride, enjoy gourmet cuisine
                  onboard, and arrive at your destination completely satisfied.
                </p>
              </div>

<div className="flex flex-col sm:flex-row gap-4">
                <Button size="lg" className="bg-[#27AE60] hover:bg-[#229954] text-lg px-8 py-4" asChild>
                  <Link href="#download">
                    <Download className="mr-2 h-5 w-5" />
                    Download App
                  </Link>
                </Button>
                <Button size="lg" variant="outline" className="text-lg px-8 py-4 bg-transparent" asChild>
                  <Link href="#how-it-works">
                    <Play className="mr-2 h-5 w-5" />
                    Watch Demo
                  </Link>
                </Button>
              </div>

<div className="flex items-center gap-8 pt-4">
                <div className="text-center">
                  <div className="text-2xl font-bold text-[#27AE60]">15</div>
                  <div className="text-sm text-[#7F8C8D]">Max Passengers</div>
                </div>
                <div className="text-center">
                  <div className="text-2xl font-bold text-[#2980B9]">4.9★</div>
                  <div className="text-sm text-[#7F8C8D]">User Rating</div>
                </div>
                <div className="text-center">
                  <div className="text-2xl font-bold text-[#27AE60]">24/7</div>
                  <div className="text-sm text-[#7F8C8D]">Support</div>
                </div>
              </div>
            </div>

{/* How It Works */}
      <section id="how-it-works" className="py-20 px-4">
        <div className="container mx-auto">
          <div className="text-center mb-16">
            <Badge className="bg-[#2980B9]/10 text-[#2980B9] border-[#2980B9]/20 mb-4">Simple Process</Badge>
            <h2 className="text-4xl font-bold text-[#2C3E50] mb-4">How RideDine Works</h2>
            <p className="text-xl text-[#7F8C8D] max-w-2xl mx-auto">
              Three simple steps to transform your commute into a culinary adventure
            </p>
          </div>

<div className="grid md:grid-cols-3 gap-8">
            <div className="text-center group">
              <div className="relative mb-6">
                <div className="w-20 h-20 bg-[#27AE60]/10 rounded-full flex items-center justify-center mx-auto group-hover:bg-[#27AE60]/20 transition-colors">
                  <Smartphone className="h-10 w-10 text-[#27AE60]" />
                </div>
                <div className="absolute -top-2 -right-2 w-8 h-8 bg-[#27AE60] text-white rounded-full flex items-center justify-center text-sm font-bold">
                  1
                </div>
              </div>
              <h3 className="text-xl font-bold text-[#2C3E50] mb-3">Book & Order</h3>
              <p className="text-[#7F8C8D] leading-relaxed">
                Choose your pickup location, destination, and pre-order from our curated menu of fresh, locally-sourced
                dishes through our mobile app.
              </p>
            </div>

<div className="text-center group">
              <div className="relative mb-6">
                <div className="w-20 h-20 bg-[#2980B9]/10 rounded-full flex items-center justify-center mx-auto group-hover:bg-[#2980B9]/20 transition-colors">
                  <ChefHat className="h-10 w-10 text-[#2980B9]" />
                </div>
                <div className="absolute -top-2 -right-2 w-8 h-8 bg-[#2980B9] text-white rounded-full flex items-center justify-center text-sm font-bold">
                  2
                </div>
              </div>
              <h3 className="text-xl font-bold text-[#2C3E50] mb-3">Dine Onboard</h3>
              <p className="text-[#7F8C8D] leading-relaxed">
                Board our comfortable food truck and enjoy your freshly prepared meal while traveling. Experience dining
                like never before!
              </p>
            </div>

<div className="text-center group">
              <div className="relative mb-6">
                <div className="w-20 h-20 bg-[#27AE60]/10 rounded-full flex items-center justify-center mx-auto group-hover:bg-[#27AE60]/20 transition-colors">
                  <MapPin className="h-10 w-10 text-[#27AE60]" />
                </div>
                <div className="absolute -top-2 -right-2 w-8 h-8 bg-[#27AE60] text-white rounded-full flex items-center justify-center text-sm font-bold">
                  3
                </div>
              </div>
              <h3 className="text-xl font-bold text-[#2C3E50] mb-3">Arrive Satisfied</h3>
              <p className="text-[#7F8C8D] leading-relaxed">
                Get dropped off at your destination having enjoyed a unique dining experience. No more boring commutes
                or rushed meals!
              </p>
            </div>
          </div>
        </div>
      </section>

{/* Features */}
      <section id="features" className="py-20 px-4 bg-[#F7F9F9]">
        <div className="container mx-auto">
          <div className="text-center mb-16">
            <Badge className="bg-[#27AE60]/10 text-[#27AE60] border-[#27AE60]/20 mb-4">Why Choose RideDine</Badge>
            <h2 className="text-4xl font-bold text-[#2C3E50] mb-4">Features That Make Us Special</h2>
            <p className="text-xl text-[#7F8C8D] max-w-2xl mx-auto">
              Discover what makes RideDine the future of urban transportation and dining
            </p>
          </div>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            <Card className="border-0 shadow-lg hover:shadow-xl transition-shadow">
              <CardHeader>
                <div className="w-12 h-12 bg-[#27AE60]/10 rounded-lg flex items-center justify-center mb-4">
                  <Shield className="h-6 w-6 text-[#27AE60]" />
                </div>
                <CardTitle className="text-[#2C3E50]">Safe & Secure</CardTitle>
              </CardHeader>
              <CardContent>
                <CardDescription className="text-[#7F8C8D]">
                  All our drivers are thoroughly vetted and vehicles are regularly inspected. Your safety is our top
                  priority.
                </CardDescription>
              </CardContent>
            </Card>

<Card className="border-0 shadow-lg hover:shadow-xl transition-shadow">
              <CardHeader>
                <div className="w-12 h-12 bg-[#2980B9]/10 rounded-lg flex items-center justify-center mb-4">
                  <ChefHat className="h-6 w-6 text-[#2980B9]" />
                </div>
                <CardTitle className="text-[#2C3E50]">Fresh Cuisine</CardTitle>
              </CardHeader>
              <CardContent>
                <CardDescription className="text-[#7F8C8D]">
                  Locally sourced ingredients prepared fresh daily by professional chefs. Taste the difference quality
                  makes.
                </CardDescription>
              </CardContent>
            </Card>

<Card className="border-0 shadow-lg hover:shadow-xl transition-shadow">
              <CardHeader>
                <div className="w-12 h-12 bg-[#27AE60]/10 rounded-lg flex items-center justify-center mb-4">
                  <Clock className="h-6 w-6 text-[#27AE60]" />
                </div>
                <CardTitle className="text-[#2C3E50]">Time Efficient</CardTitle>
              </CardHeader>
              <CardContent>
                <CardDescription className="text-[#7F8C8D]">
                  Save time by combining your commute with dining. No more separate trips for food or waiting in
                  restaurant queues.
                </CardDescription>
              </CardContent>
            </Card>

<Card className="border-0 shadow-lg hover:shadow-xl transition-shadow">
              <CardHeader>
                <div className="w-12 h-12 bg-[#2980B9]/10 rounded-lg flex items-center justify-center mb-4">
                  <Zap className="h-6 w-6 text-[#2980B9]" />
                </div>
                <CardTitle className="text-[#2C3E50]">Real-time Tracking</CardTitle>
              </CardHeader>
              <CardContent>
                <CardDescription className="text-[#7F8C8D]">
                  Track your ride in real-time, get accurate arrival estimates, and stay informed throughout your
                  journey.
                </CardDescription>
              </CardContent>
            </Card>

<Card className="border-0 shadow-lg hover:shadow-xl transition-shadow">
              <CardHeader>
                <div className="w-12 h-12 bg-[#27AE60]/10 rounded-lg flex items-center justify-center mb-4">
                  <Heart className="h-6 w-6 text-[#27AE60]" />
                </div>
                <CardTitle className="text-[#2C3E50]">Eco-Friendly</CardTitle>
              </CardHeader>
              <CardContent>
                <CardDescription className="text-[#7F8C8D]">
                  Reduce your carbon footprint by sharing rides and supporting sustainable local food practices.
                </CardDescription>
              </CardContent>
            </Card>

<Card className="border-0 shadow-lg hover:shadow-xl transition-shadow">
              <CardHeader>
                <div className="w-12 h-12 bg-[#2980B9]/10 rounded-lg flex items-center justify-center mb-4">
                  <Users className="h-6 w-6 text-[#2980B9]" />
                </div>
                <CardTitle className="text-[#2C3E50]">Community Driven</CardTitle>
              </CardHeader>
              <CardContent>
                <CardDescription className="text-[#7F8C8D]">
                  Connect with fellow passengers, support local businesses, and be part of a growing community of food
                  and travel enthusiasts.
                </CardDescription>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Testimonials */}
      <section id="testimonials" className="py-20 px-4">
        <div className="container mx-auto">
          <div className="text-center mb-16">
            <Badge className="bg-[#2980B9]/10 text-[#2980B9] border-[#2980B9]/20 mb-4">Customer Stories</Badge>
            <h2 className="text-4xl font-bold text-[#2C3E50] mb-4">What Our Users Say</h2>
            <p className="text-xl text-[#7F8C8D] max-w-2xl mx-auto">
              Real experiences from real people who've transformed their daily commute
            </p>
          </div>

<div className="text-center mb-8">
                  <p className="text-xl text-[#2C3E50] leading-relaxed mb-6">
                    "{testimonials[currentTestimonial].content}"
                  </p>

<div className="flex justify-center mb-4">
                    {[...Array(testimonials[currentTestimonial].rating)].map((_, i) => (
                      <Star key={i} className="h-5 w-5 text-yellow-400 fill-current" />
                    ))}
                  </div>

<div className="flex items-center justify-center gap-4">
                    <img
                      src={testimonials[currentTestimonial].image || "/placeholder.svg"}
                      alt={testimonials[currentTestimonial].name}
                      className="w-12 h-12 rounded-full"
                    />
                    <div>
                      <div className="font-semibold text-[#2C3E50]">{testimonials[currentTestimonial].name}</div>
                      <div className="text-sm text-[#7F8C8D]">{testimonials[currentTestimonial].role}</div>
                    </div>
                  </div>
                </div>

<div className="flex justify-center gap-2">
                  {testimonials.map((_, index) => (
                    <button
                      key={index}
                      className={`w-3 h-3 rounded-full transition-colors ${
                        index === currentTestimonial ? "bg-[#27AE60]" : "bg-gray-300"
                      }`}
                      onClick={() => setCurrentTestimonial(index)}
                    />
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Download Section */}
      <section id="download" className="py-20 px-4 bg-gradient-to-r from-[#27AE60] to-[#2980B9]">
        <div className="container mx-auto text-center">
          <div className="max-w-3xl mx-auto">
            <h2 className="text-4xl font-bold text-white mb-4">Ready to Transform Your Commute?</h2>
            <p className="text-xl text-white/90 mb-8">
              Download the RideDine app today and experience the future of transportation and dining
            </p>

<div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
              <Button size="lg" className="bg-white text-[#27AE60] hover:bg-gray-100 text-lg px-8 py-4">
                <Apple className="mr-2 h-6 w-6" />
                Download for iOS
              </Button>
              <Button size="lg" className="bg-white text-[#2980B9] hover:bg-gray-100 text-lg px-8 py-4">
                <Download className="mr-2 h-6 w-6" />
                Download for Android
              </Button>
            </div>

<div className="grid md:grid-cols-3 gap-8 text-white">
              <div className="flex items-center justify-center gap-3">
                <CheckCircle className="h-6 w-6" />
                <span>Free to Download</span>
              </div>
              <div className="flex items-center justify-center gap-3">
                <CheckCircle className="h-6 w-6" />
                <span>No Hidden Fees</span>
              </div>
              <div className="flex items-center justify-center gap-3">
                <CheckCircle className="h-6 w-6" />
                <span>24/7 Support</span>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Footer */}
      <footer className="py-16 px-4 bg-[#2C3E50]">
        <div className="container mx-auto">
          <div className="grid md:grid-cols-4 gap-8 mb-8">
            <div>
              <div className="flex items-center gap-2 mb-4">
                <Truck className="h-8 w-8 text-[#27AE60]" />
                <span className="text-2xl font-bold text-white">RideDine</span>
              </div>
              <p className="text-gray-400 mb-4">Revolutionizing urban transportation with mobile dining experiences.</p>
              <div className="flex gap-4">
                <div className="w-10 h-10 bg-[#27AE60]/20 rounded-full flex items-center justify-center">
                  <span className="text-[#27AE60]">f</span>
                </div>
                <div className="w-10 h-10 bg-[#2980B9]/20 rounded-full flex items-center justify-center">
                  <span className="text-[#2980B9]">t</span>
                </div>
                <div className="w-10 h-10 bg-[#27AE60]/20 rounded-full flex items-center justify-center">
                  <span className="text-[#27AE60]">in</span>
                </div>
              </div>
            </div>

<div>
              <h3 className="text-white font-semibold mb-4">For Customers</h3>
              <ul className="space-y-2 text-gray-400">
                <li>
                  <a href="#" className="hover:text-[#27AE60] transition-colors">
                    How to Book
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-[#27AE60] transition-colors">
                    Menu Options
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-[#27AE60] transition-colors">
                    Pricing
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-[#27AE60] transition-colors">
                    Safety Guidelines
                  </a>
                </li>
              </ul>
            </div>

<div>
              <h3 className="text-white font-semibold mb-4">For Drivers</h3>
              <ul className="space-y-2 text-gray-400">
                <li>
                  <a href="#" className="hover:text-[#27AE60] transition-colors">
                    Become a Driver
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-[#27AE60] transition-colors">
                    Requirements
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-[#27AE60] transition-colors">
                    Earnings
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-[#27AE60] transition-colors">
                    Support
                  </a>
                </li>
              </ul>
            </div>

<div>
              <h3 className="text-white font-semibold mb-4">Company</h3>
              <ul className="space-y-2 text-gray-400">
                <li>
                  <a href="#" className="hover:text-[#27AE60] transition-colors">
                    About Us
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-[#27AE60] transition-colors">
                    Careers
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-[#27AE60] transition-colors">
                    Press
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-[#27AE60] transition-colors">
                    Contact
                  </a>
                </li>
              </ul>
            </div>
          </div>

<div className="border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center">
            <p className="text-gray-400 mb-4 md:mb-0">© 2024 RideDine. All rights reserved.</p>
            <div className="flex gap-6 text-gray-400">
              <a href="#" className="hover:text-[#27AE60] transition-colors">
                Privacy Policy
              </a>
              <a href="#" className="hover:text-[#27AE60] transition-colors">
                Terms of Service
              </a>
              <a href="#" className="hover:text-[#27AE60] transition-colors">
                Cookie Policy
              </a>
            </div>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]sql:file="scripts/additional-tables.sql" isMerged="true"
-- Table for menu availability per table (for table dot menu)
CREATE TABLE IF NOT EXISTS table_menu_availability (
    id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
    table_number INTEGER NOT NULL,
    menu_item_id UUID NOT NULL REFERENCES menu_items(id) ON DELETE CASCADE,
    is_available BOOLEAN DEFAULT true,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    UNIQUE(table_number, menu_item_id)
);

-- Table for payments
CREATE TABLE IF NOT EXISTS payments (
    id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
    booking_id UUID NOT NULL REFERENCES bookings(id) ON DELETE CASCADE,
    payment_method VARCHAR(50) NOT NULL, -- 'mpesa', 'card', 'cash', 'bank_transfer'
    amount DECIMAL(10,2) NOT NULL,
    amount_paid DECIMAL(10,2),
    phone_number VARCHAR(20),
    reference_number VARCHAR(100),
    status VARCHAR(20) DEFAULT 'pending', -- 'pending', 'completed', 'failed', 'cancelled'
    
    -- M-Pesa specific fields
    mpesa_checkout_request_id VARCHAR(100),
    merchant_request_id VARCHAR(100),
    mpesa_receipt_number VARCHAR(100),
    mpesa_transaction_date VARCHAR(20),
    mpesa_result_code INTEGER,
    mpesa_result_desc TEXT,
    
    notes TEXT,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Add indexes for better performance
CREATE INDEX IF NOT EXISTS idx_table_menu_availability_table ON table_menu_availability(table_number);
CREATE INDEX IF NOT EXISTS idx_table_menu_availability_menu_item ON table_menu_availability(menu_item_id);
CREATE INDEX IF NOT EXISTS idx_payments_booking ON payments(booking_id);
CREATE INDEX IF NOT EXISTS idx_payments_status ON payments(status);
CREATE INDEX IF NOT EXISTS idx_payments_mpesa_checkout ON payments(mpesa_checkout_request_id);

-- Add triggers for updated_at
CREATE OR REPLACE FUNCTION update_updated_at_column()
RETURNS TRIGGER AS $$
BEGIN
    NEW.updated_at = NOW();
    RETURN NEW;
END;
$$ language 'plpgsql';

CREATE TRIGGER update_table_menu_availability_updated_at 
    BEFORE UPDATE ON table_menu_availability 
    FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();

CREATE TRIGGER update_payments_updated_at 
    BEFORE UPDATE ON payments 
    FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();

-- Function to check trip availability
CREATE OR REPLACE FUNCTION check_trip_availability(trip_uuid UUID, requested_party_size INTEGER)
RETURNS BOOLEAN AS $$
DECLARE
    trip_record RECORD;
    current_bookings INTEGER;
BEGIN
    -- Get trip details
    SELECT max_capacity, status INTO trip_record
    FROM trips 
    WHERE id = trip_uuid;
    
    IF NOT FOUND THEN
        RETURN FALSE;
    END IF;
    
    -- Check if trip is scheduled
    IF trip_record.status != 'scheduled' THEN
        RETURN FALSE;
    END IF;
    
    -- Calculate current bookings
    SELECT COALESCE(SUM(party_size), 0) INTO current_bookings
    FROM bookings 
    WHERE trip_id = trip_uuid 
    AND status IN ('confirmed', 'pending');
    
    -- Check if there's enough capacity
    RETURN (current_bookings + requested_party_size) <= trip_record.max_capacity;
END;
$$ LANGUAGE plpgsql;

-- Function to update trip capacity after booking
CREATE OR REPLACE FUNCTION update_trip_capacity()
RETURNS TRIGGER AS $$
BEGIN
    -- Update current_capacity in trips table
    UPDATE trips 
    SET current_capacity = (
        SELECT COALESCE(SUM(party_size), 0)
        FROM bookings 
        WHERE trip_id = NEW.trip_id 
        AND status IN ('confirmed', 'pending')
    )
    WHERE id = NEW.trip_id;
    
    RETURN NEW;
END;
$$ LANGUAGE plpgsql;

-- Trigger to automatically update trip capacity
CREATE TRIGGER update_trip_capacity_trigger
    AFTER INSERT OR UPDATE OR DELETE ON bookings
    FOR EACH ROW EXECUTE FUNCTION update_trip_capacity();
[V0_FILE]sql:file="scripts/database-setup-fixed.sql" isMerged="true"
-- Create database tables for RideDine app (Fixed version)

-- Users table
CREATE TABLE IF NOT EXISTS users (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    email VARCHAR(255) UNIQUE NOT NULL,
    phone VARCHAR(20) UNIQUE NOT NULL,
    first_name VARCHAR(100) NOT NULL,
    last_name VARCHAR(100) NOT NULL,
    password_hash VARCHAR(255) NOT NULL,
    role VARCHAR(20) NOT NULL DEFAULT 'customer', -- customer, driver, admin
    is_active BOOLEAN DEFAULT true,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Pickup locations table (corrected)
CREATE TABLE IF NOT EXISTS pickup_locations (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    name VARCHAR(100) NOT NULL,
    address TEXT NOT NULL,
    latitude DECIMAL(10, 8),
    longitude DECIMAL(11, 8),
    is_active BOOLEAN DEFAULT true,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Routes table (using pickup_locations)
CREATE TABLE IF NOT EXISTS routes (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    name VARCHAR(100) NOT NULL,
    description TEXT,
    pickup_location_id UUID REFERENCES pickup_locations(id),
    dropoff_location_id UUID REFERENCES pickup_locations(id),
    duration_minutes INTEGER NOT NULL,
    price_per_person DECIMAL(10, 2) NOT NULL,
    max_capacity INTEGER DEFAULT 15,
    is_active BOOLEAN DEFAULT true,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Food categories table
CREATE TABLE IF NOT EXISTS food_categories (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    name VARCHAR(100) NOT NULL,
    description TEXT,
    image_url VARCHAR(500),
    sort_order INTEGER DEFAULT 0,
    is_active BOOLEAN DEFAULT true,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Menu items table
CREATE TABLE IF NOT EXISTS menu_items (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    category_id UUID REFERENCES food_categories(id),
    name VARCHAR(100) NOT NULL,
    description TEXT,
    price DECIMAL(10, 2) NOT NULL,
    image_url VARCHAR(500),
    ingredients TEXT[],
    allergens TEXT[],
    is_vegetarian BOOLEAN DEFAULT false,
    is_vegan BOOLEAN DEFAULT false,
    is_available BOOLEAN DEFAULT true,
    preparation_time INTEGER DEFAULT 10, -- minutes
    sort_order INTEGER DEFAULT 0,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Trips table
CREATE TABLE IF NOT EXISTS trips (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    route_id UUID REFERENCES routes(id),
    driver_id UUID REFERENCES users(id),
    scheduled_date DATE NOT NULL,
    scheduled_time TIME NOT NULL,
    status VARCHAR(20) DEFAULT 'scheduled', -- scheduled, in_progress, completed, cancelled
    current_capacity INTEGER DEFAULT 0,
    max_capacity INTEGER DEFAULT 15,
    notes TEXT,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Bookings table
CREATE TABLE IF NOT EXISTS bookings (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id UUID REFERENCES users(id),
    trip_id UUID REFERENCES trips(id),
    party_size INTEGER NOT NULL DEFAULT 1,
    total_amount DECIMAL(10, 2) NOT NULL,
    status VARCHAR(20) DEFAULT 'pending', -- pending, confirmed, cancelled, completed
    special_requests TEXT,
    qr_code VARCHAR(100) UNIQUE,
    payment_intent_id VARCHAR(100),
    booked_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    confirmed_at TIMESTAMP WITH TIME ZONE,
    cancelled_at TIMESTAMP WITH TIME ZONE,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Booking menu items (many-to-many relationship)
CREATE TABLE IF NOT EXISTS booking_menu_items (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    booking_id UUID REFERENCES bookings(id) ON DELETE CASCADE,
    menu_item_id UUID REFERENCES menu_items(id),
    quantity INTEGER DEFAULT 1,
    unit_price DECIMAL(10, 2) NOT NULL,
    special_instructions TEXT,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Table menu availability (for table dot menu)
CREATE TABLE IF NOT EXISTS table_menu_availability (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    table_number INTEGER NOT NULL,
    menu_item_id UUID REFERENCES menu_items(id) ON DELETE CASCADE,
    is_available BOOLEAN DEFAULT true,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    UNIQUE(table_number, menu_item_id)
);

-- Payments table
CREATE TABLE IF NOT EXISTS payments (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    booking_id UUID REFERENCES bookings(id) ON DELETE CASCADE,
    payment_method VARCHAR(50) NOT NULL, -- 'mpesa', 'card', 'cash', 'bank_transfer'
    amount DECIMAL(10,2) NOT NULL,
    amount_paid DECIMAL(10,2),
    phone_number VARCHAR(20),
    reference_number VARCHAR(100),
    status VARCHAR(20) DEFAULT 'pending', -- 'pending', 'completed', 'failed', 'cancelled'
    
    -- M-Pesa specific fields
    mpesa_checkout_request_id VARCHAR(100),
    merchant_request_id VARCHAR(100),
    mpesa_receipt_number VARCHAR(100),
    mpesa_transaction_date VARCHAR(20),
    mpesa_result_code INTEGER,
    mpesa_result_desc TEXT,
    
    notes TEXT,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Notifications table
CREATE TABLE IF NOT EXISTS notifications (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id UUID REFERENCES users(id),
    title VARCHAR(200) NOT NULL,
    message TEXT NOT NULL,
    type VARCHAR(50) NOT NULL, -- booking_confirmation, payment_success, trip_update, etc.
    is_read BOOLEAN DEFAULT false,
    data JSONB,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create indexes for better performance
CREATE INDEX IF NOT EXISTS idx_users_email ON users(email);
CREATE INDEX IF NOT EXISTS idx_users_phone ON users(phone);
CREATE INDEX IF NOT EXISTS idx_users_role ON users(role);
CREATE INDEX IF NOT EXISTS idx_pickup_locations_active ON pickup_locations(is_active);
CREATE INDEX IF NOT EXISTS idx_routes_pickup_location ON routes(pickup_location_id);
CREATE INDEX IF NOT EXISTS idx_routes_dropoff_location ON routes(dropoff_location_id);
CREATE INDEX IF NOT EXISTS idx_menu_items_category ON menu_items(category_id);
CREATE INDEX IF NOT EXISTS idx_menu_items_available ON menu_items(is_available);
CREATE INDEX IF NOT EXISTS idx_trips_route ON trips(route_id);
CREATE INDEX IF NOT EXISTS idx_trips_driver ON trips(driver_id);
CREATE INDEX IF NOT EXISTS idx_trips_date ON trips(scheduled_date);
CREATE INDEX IF NOT EXISTS idx_trips_status ON trips(status);
CREATE INDEX IF NOT EXISTS idx_bookings_user ON bookings(user_id);
CREATE INDEX IF NOT EXISTS idx_bookings_trip ON bookings(trip_id);
CREATE INDEX IF NOT EXISTS idx_bookings_status ON bookings(status);
CREATE INDEX IF NOT EXISTS idx_table_menu_availability_table ON table_menu_availability(table_number);
CREATE INDEX IF NOT EXISTS idx_payments_booking ON payments(booking_id);
CREATE INDEX IF NOT EXISTS idx_payments_status ON payments(status);
CREATE INDEX IF NOT EXISTS idx_notifications_user ON notifications(user_id);
CREATE INDEX IF NOT EXISTS idx_notifications_read ON notifications(is_read);
[V0_FILE]sql:file="scripts/seed-data-fixed.sql" isMerged="true"
-- Seed data for RideDine app (Fixed version)

-- Insert pickup locations
INSERT INTO pickup_locations (name, address, latitude, longitude, is_active) VALUES
('City Center', 'Main Street, Downtown Nairobi', -1.2864, 36.8172, true),
('University Campus', 'University Way, Nairobi', -1.2966, 36.8083, true),
('Shopping Mall', 'Westlands Mall, Westlands', -1.263, 36.8063, true),
('Airport Terminal', 'Jomo Kenyatta International Airport', -1.3192, 36.9278, true),
('Business District', 'Upper Hill, Nairobi', -1.2921, 36.8219, true),
('Residential Area', 'Karen Shopping Center', -1.3197, 36.7081, true);

-- Insert food categories
INSERT INTO food_categories (name, description, sort_order, is_active) VALUES
('Appetizers', 'Start your journey with delicious appetizers', 1, true),
('Main Courses', 'Hearty meals for your travel', 2, true),
('Beverages', 'Refreshing drinks for the road', 3, true),
('Desserts', 'Sweet treats to end your meal', 4, true),
('Snacks', 'Light bites for quick hunger', 5, true),
('Healthy Options', 'Nutritious choices for health-conscious travelers', 6, true);

-- Insert sample users
INSERT INTO users (email, phone, first_name, last_name, password_hash, role, is_active) VALUES
('admin@ridedine.com', '+254700000001', 'Admin', 'User', '$2b$10$hash1', 'admin', true),
('driver1@ridedine.com', '+254700000002', 'John', 'Driver', '$2b$10$hash2', 'driver', true),
('driver2@ridedine.com', '+254700000003', 'Mary', 'Kamau', '$2b$10$hash3', 'driver', true),
('customer1@ridedine.com', '+254700000004', 'Alice', 'Johnson', '$2b$10$hash4', 'customer', true),
('customer2@ridedine.com', '+254700000005', 'Bob', 'Smith', '$2b$10$hash5', 'customer', true);

-- Insert routes (using pickup_locations)
INSERT INTO routes (name, description, pickup_location_id, dropoff_location_id, duration_minutes, price_per_person, max_capacity, is_active)
SELECT 
    'City to Airport Route',
    'Express route from city center to airport with dining service',
    p1.id,
    p2.id,
    45,
    1500.00,
    15,
    true
FROM pickup_locations p1, pickup_locations p2
WHERE p1.name = 'City Center' AND p2.name = 'Airport Terminal';

INSERT INTO routes (name, description, pickup_location_id, dropoff_location_id, duration_minutes, price_per_person, max_capacity, is_active)
SELECT 
    'University to Mall Route',
    'Student-friendly route with affordable meal options',
    p1.id,
    p2.id,
    30,
    800.00,
    20,
    true
FROM pickup_locations p1, pickup_locations p2
WHERE p1.name = 'University Campus' AND p2.name = 'Shopping Mall';

-- Insert menu items
INSERT INTO menu_items (category_id, name, description, price, is_vegetarian, is_vegan, is_available, preparation_time, sort_order)
SELECT 
    c.id,
    'Chicken Wings',
    'Crispy chicken wings with your choice of sauce',
    450.00,
    false,
    false,
    true,
    15,
    1
FROM food_categories c WHERE c.name = 'Appetizers';

INSERT INTO menu_items (category_id, name, description, price, is_vegetarian, is_vegan, is_available, preparation_time, sort_order)
SELECT 
    c.id,
    'Beef Burger',
    'Juicy beef patty with fresh vegetables and fries',
    850.00,
    false,
    false,
    true,
    20,
    1
FROM food_categories c WHERE c.name = 'Main Courses';

INSERT INTO menu_items (category_id, name, description, price, is_vegetarian, is_vegan, is_available, preparation_time, sort_order)
SELECT 
    c.id,
    'Veggie Wrap',
    'Fresh vegetables wrapped in a soft tortilla',
    650.00,
    true,
    true,
    true,
    10,
    2
FROM food_categories c WHERE c.name = 'Main Courses';

INSERT INTO menu_items (category_id, name, description, price, is_vegetarian, is_vegan, is_available, preparation_time, sort_order)
SELECT 
    c.id,
    'Fresh Orange Juice',
    'Freshly squeezed orange juice',
    200.00,
    true,
    true,
    true,
    5,
    1
FROM food_categories c WHERE c.name = 'Beverages';

INSERT INTO menu_items (category_id, name, description, price, is_vegetarian, is_vegan, is_available, preparation_time, sort_order)
SELECT 
    c.id,
    'Chocolate Cake',
    'Rich chocolate cake slice',
    350.00,
    true,
    false,
    true,
    5,
    1
FROM food_categories c WHERE c.name = 'Desserts';

-- Insert sample trips
INSERT INTO trips (route_id, driver_id, scheduled_date, scheduled_time, status, current_capacity, max_capacity)
SELECT 
    r.id,
    u.id,
    CURRENT_DATE + INTERVAL '1 day',
    '08:00:00',
    'scheduled',
    0,
    15
FROM routes r, users u 
WHERE r.name = 'City to Airport Route' AND u.role = 'driver' AND u.first_name = 'John'
LIMIT 1;

INSERT INTO trips (route_id, driver_id, scheduled_date, scheduled_time, status, current_capacity, max_capacity)
SELECT 
    r.id,
    u.id,
    CURRENT_DATE + INTERVAL '1 day',
    '14:00:00',
    'scheduled',
    0,
    20
FROM routes r, users u 
WHERE r.name = 'University to Mall Route' AND u.role = 'driver' AND u.first_name = 'Mary'
LIMIT 1;
[V0_FILE]sql:file="scripts/create-missing-tables.sql"
-- Create payments table with RLS
CREATE TABLE IF NOT EXISTS public.payments (
    id UUID NOT NULL DEFAULT gen_random_uuid(),
    booking_id UUID NULL,
    payment_method TEXT NOT NULL,
    amount NUMERIC(10,2) NOT NULL,
    amount_paid NUMERIC(10,2) NULL,
    phone_number TEXT NULL,
    reference_number TEXT NULL,
    status TEXT NULL DEFAULT 'pending',
    
    -- M-Pesa specific fields
    mpesa_checkout_request_id TEXT NULL,
    merchant_request_id TEXT NULL,
    mpesa_receipt_number TEXT NULL,
    mpesa_transaction_date TEXT NULL,
    mpesa_result_code INTEGER NULL,
    mpesa_result_desc TEXT NULL,
    
    notes TEXT NULL,
    created_at TIMESTAMP WITH TIME ZONE NULL DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE NULL DEFAULT NOW(),
    
    CONSTRAINT payments_pkey PRIMARY KEY (id),
    CONSTRAINT payments_booking_id_fkey FOREIGN KEY (booking_id) REFERENCES bookings(id) ON DELETE CASCADE
) TABLESPACE pg_default;

-- Create table_menu_availability table with RLS
CREATE TABLE IF NOT EXISTS public.table_menu_availability (
    id UUID NOT NULL DEFAULT gen_random_uuid(),
    table_number INTEGER NOT NULL,
    menu_item_id UUID NULL,
    is_available BOOLEAN NULL DEFAULT true,
    created_at TIMESTAMP WITH TIME ZONE NULL DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE NULL DEFAULT NOW(),
    
    CONSTRAINT table_menu_availability_pkey PRIMARY KEY (id),
    CONSTRAINT table_menu_availability_menu_item_id_fkey FOREIGN KEY (menu_item_id) REFERENCES menu_items(id) ON DELETE CASCADE,
    CONSTRAINT table_menu_availability_unique UNIQUE (table_number, menu_item_id)
) TABLESPACE pg_default;

-- Create booking_menu_items table for order tracking
CREATE TABLE IF NOT EXISTS public.booking_menu_items (
    id UUID NOT NULL DEFAULT gen_random_uuid(),
    booking_id UUID NULL,
    menu_item_id UUID NULL,
    quantity INTEGER NOT NULL DEFAULT 1,
    unit_price NUMERIC(10,2) NOT NULL,
    special_instructions TEXT NULL,
    table_number INTEGER NULL,
    created_at TIMESTAMP WITH TIME ZONE NULL DEFAULT NOW(),
    
    CONSTRAINT booking_menu_items_pkey PRIMARY KEY (id),
    CONSTRAINT booking_menu_items_booking_id_fkey FOREIGN KEY (booking_id) REFERENCES bookings(id) ON DELETE CASCADE,
    CONSTRAINT booking_menu_items_menu_item_id_fkey FOREIGN KEY (menu_item_id) REFERENCES menu_items(id) ON DELETE CASCADE
) TABLESPACE pg_default;

-- Create indexes
CREATE INDEX IF NOT EXISTS idx_payments_booking_id ON public.payments USING btree (booking_id) TABLESPACE pg_default;
CREATE INDEX IF NOT EXISTS idx_payments_status ON public.payments USING btree (status) TABLESPACE pg_default;
CREATE INDEX IF NOT EXISTS idx_table_menu_availability_table_number ON public.table_menu_availability USING btree (table_number) TABLESPACE pg_default;
CREATE INDEX IF NOT EXISTS idx_table_menu_availability_menu_item_id ON public.table_menu_availability USING btree (menu_item_id) TABLESPACE pg_default;
CREATE INDEX IF NOT EXISTS idx_booking_menu_items_booking_id ON public.booking_menu_items USING btree (booking_id) TABLESPACE pg_default;

-- Create triggers for updated_at
CREATE TRIGGER update_payments_updated_at 
    BEFORE UPDATE ON payments 
    FOR EACH ROW 
    EXECUTE FUNCTION update_updated_at_column();

CREATE TRIGGER update_table_menu_availability_updated_at 
    BEFORE UPDATE ON table_menu_availability 
    FOR EACH ROW 
    EXECUTE FUNCTION update_updated_at_column();

-- Enable RLS on payments table
ALTER TABLE public.payments ENABLE ROW LEVEL SECURITY;

-- RLS policies for payments
CREATE POLICY "Users can view their own payments" ON public.payments
    FOR SELECT USING (
        booking_id IN (
            SELECT id FROM bookings WHERE user_id = auth.uid()
        )
    );

CREATE POLICY "Admins can view all payments" ON public.payments
    FOR SELECT USING (
        EXISTS (
            SELECT 1 FROM users WHERE id = auth.uid() AND role = 'admin'
        )
    );

CREATE POLICY "System can insert payments" ON public.payments
    FOR INSERT WITH CHECK (true);

CREATE POLICY "System can update payments" ON public.payments
    FOR UPDATE USING (true);

-- Enable RLS on table_menu_availability table
ALTER TABLE public.table_menu_availability ENABLE ROW LEVEL SECURITY;

-- RLS policies for table_menu_availability
CREATE POLICY "Anyone can view table menu availability" ON public.table_menu_availability
    FOR SELECT USING (true);

CREATE POLICY "Admins can manage table menu availability" ON public.table_menu_availability
    FOR ALL USING (
        EXISTS (
            SELECT 1 FROM users WHERE id = auth.uid() AND role = 'admin'
        )
    );

-- Enable RLS on booking_menu_items table
ALTER TABLE public.booking_menu_items ENABLE ROW LEVEL SECURITY;

-- RLS policies for booking_menu_items
CREATE POLICY "Users can view their own booking menu items" ON public.booking_menu_items
    FOR SELECT USING (
        booking_id IN (
            SELECT id FROM bookings WHERE user_id = auth.uid()
        )
    );

CREATE POLICY "Users can insert their own booking menu items" ON public.booking_menu_items
    FOR INSERT WITH CHECK (
        booking_id IN (
            SELECT id FROM bookings WHERE user_id = auth.uid()
        )
    );

CREATE POLICY "Admins can view all booking menu items" ON public.booking_menu_items
    FOR SELECT USING (
        EXISTS (
            SELECT 1 FROM users WHERE id = auth.uid() AND role = 'admin'
        )
    );
[V0_FILE]sql:file="scripts/comprehensive-seed-data.sql"
-- Comprehensive seed data for RideDine app

-- Insert pickup locations
INSERT INTO pickup_locations (name, address, latitude, longitude, is_active) VALUES
('Nairobi CBD', 'Kenyatta Avenue, Nairobi Central Business District', -1.2864, 36.8172, true),
('University of Nairobi', 'University Way, Nairobi', -1.2966, 36.8083, true),
('Westlands Mall', 'Westlands Shopping Mall, Westlands', -1.263, 36.8063, true),
('JKIA Terminal', 'Jomo Kenyatta International Airport', -1.3192, 36.9278, true),
('Upper Hill', 'Upper Hill Business District', -1.2921, 36.8219, true),
('Karen Shopping Center', 'Karen Road, Karen', -1.3197, 36.7081, true),
('Eastleigh', 'First Avenue, Eastleigh', -1.2667, 36.8444, true),
('Kilimani', 'Argwings Kodhek Road, Kilimani', -1.2833, 36.7833, true),
('Kasarani', 'Thika Road, Kasarani', -1.2167, 36.9000, true),
('Embakasi', 'Mombasa Road, Embakasi', -1.3167, 36.8833, true);

-- Insert users (sample data)
INSERT INTO users (clerk_id, username, email, first_name, last_name, phone, role, is_active) VALUES
('clerk_admin_001', 'admin', 'admin@ridedine.co.ke', 'System', 'Administrator', '+254700000001', 'admin', true),
('clerk_driver_001', 'john_driver', 'john.kamau@ridedine.co.ke', 'John', 'Kamau', '+254700000002', 'driver', true),
('clerk_driver_002', 'mary_driver', 'mary.wanjiku@ridedine.co.ke', 'Mary', 'Wanjiku', '+254700000003', 'driver', true),
('clerk_driver_003', 'peter_driver', 'peter.mwangi@ridedine.co.ke', 'Peter', 'Mwangi', '+254700000004', 'driver', true),
('clerk_customer_001', 'alice_customer', 'alice.johnson@gmail.com', 'Alice', 'Johnson', '+254700000005', 'customer', true),
('clerk_customer_002', 'bob_customer', 'bob.smith@gmail.com', 'Bob', 'Smith', '+254700000006', 'customer', true),
('clerk_customer_003', 'grace_customer', 'grace.njeri@gmail.com', 'Grace', 'Njeri', '+254700000007', 'customer', true),
('clerk_customer_004', 'david_customer', 'david.kiprotich@gmail.com', 'David', 'Kiprotich', '+254700000008', 'customer', true),
('clerk_customer_005', 'sarah_customer', 'sarah.akinyi@gmail.com', 'Sarah', 'Akinyi', '+254700000009', 'customer', true);

-- Insert food categories
INSERT INTO food_categories (name, description, sort_order, is_active) VALUES
('Appetizers & Starters', 'Delicious appetizers to start your journey', 1, true),
('Main Courses', 'Hearty meals perfect for your travel experience', 2, true),
('Kenyan Specialties', 'Traditional Kenyan dishes with a modern twist', 3, true),
('International Cuisine', 'Global flavors from around the world', 4, true),
('Beverages', 'Refreshing drinks for your journey', 5, true),
('Desserts & Sweets', 'Sweet treats to end your meal perfectly', 6, true),
('Healthy Options', 'Nutritious choices for health-conscious travelers', 7, true),
('Snacks & Light Bites', 'Quick bites for light hunger', 8, true);

-- Insert menu items
INSERT INTO menu_items (category_id, name, description, price, ingredients, allergens, is_vegetarian, is_vegan, is_available, preparation_time, sort_order)
SELECT 
    c.id,
    'Samosas (3 pieces)',
    'Crispy pastry filled with spiced vegetables or meat',
    250.00,
    ARRAY['pastry', 'vegetables', 'spices', 'oil'],
    ARRAY['gluten', 'may contain nuts'],
    true,
    false,
    true,
    10,
    1
FROM food_categories c WHERE c.name = 'Appetizers & Starters';

INSERT INTO menu_items (category_id, name, description, price, ingredients, allergens, is_vegetarian, is_vegan, is_available, preparation_time, sort_order)
SELECT 
    c.id,
    'Chicken Wings (6 pieces)',
    'Crispy chicken wings with choice of sauce (BBQ, Peri-peri, or Honey Mustard)',
    450.00,
    ARRAY['chicken', 'flour', 'spices', 'sauce'],
    ARRAY['gluten'],
    false,
    false,
    true,
    15,
    2
FROM food_categories c WHERE c.name = 'Appetizers & Starters';

INSERT INTO menu_items (category_id, name, description, price, ingredients, allergens, is_vegetarian, is_vegan, is_available, preparation_time, sort_order)
SELECT 
    c.id,
    'Beef Burger Deluxe',
    'Juicy beef patty with cheese, lettuce, tomato, and fries',
    850.00,
    ARRAY['beef', 'bun', 'cheese', 'lettuce', 'tomato', 'potatoes'],
    ARRAY['gluten', 'dairy'],
    false,
    false,
    true,
    20,
    1
FROM food_categories c WHERE c.name = 'Main Courses';

INSERT INTO menu_items (category_id, name, description, price, ingredients, allergens, is_vegetarian, is_vegan, is_available, preparation_time, sort_order)
SELECT 
    c.id,
    'Grilled Chicken & Rice',
    'Tender grilled chicken breast with pilau rice and vegetables',
    750.00,
    ARRAY['chicken', 'rice', 'vegetables', 'spices'],
    NULL,
    false,
    false,
    true,
    25,
    2
FROM food_categories c WHERE c.name = 'Main Courses';

INSERT INTO menu_items (category_id, name, description, price, ingredients, allergens, is_vegetarian, is_vegan, is_available, preparation_time, sort_order)
SELECT 
    c.id,
    'Nyama Choma Platter',
    'Traditional grilled meat with ugali and sukuma wiki',
    950.00,
    ARRAY['beef', 'maize flour', 'kale', 'spices'],
    NULL,
    false,
    false,
    true,
    30,
    1
FROM food_categories c WHERE c.name = 'Kenyan Specialties';

INSERT INTO menu_items (category_id, name, description, price, ingredients, allergens, is_vegetarian, is_vegan, is_available, preparation_time, sort_order)
SELECT 
    c.id,
    'Githeri Special',
    'Traditional mix of maize and beans with vegetables',
    450.00,
    ARRAY['maize', 'beans', 'vegetables', 'spices'],
    NULL,
    true,
    true,
    true,
    20,
    2
FROM food_categories c WHERE c.name = 'Kenyan Specialties';

INSERT INTO menu_items (category_id, name, description, price, ingredients, allergens, is_vegetarian, is_vegan, is_available, preparation_time, sort_order)
SELECT 
    c.id,
    'Chicken Tikka Masala',
    'Creamy Indian-style chicken curry with basmati rice',
    800.00,
    ARRAY['chicken', 'cream', 'tomatoes', 'spices', 'rice'],
    ARRAY['dairy'],
    false,
    false,
    true,
    25,
    1
FROM food_categories c WHERE c.name = 'International Cuisine';

INSERT INTO menu_items (category_id, name, description, price, ingredients, allergens, is_vegetarian, is_vegan, is_available, preparation_time, sort_order)
SELECT 
    c.id,
    'Fresh Orange Juice',
    'Freshly squeezed orange juice',
    200.00,
    ARRAY['oranges'],
    NULL,
    true,
    true,
    true,
    5,
    1
FROM food_categories c WHERE c.name = 'Beverages';

INSERT INTO menu_items (category_id, name, description, price, ingredients, allergens, is_vegetarian, is_vegan, is_available, preparation_time, sort_order)
SELECT 
    c.id,
    'Kenyan Tea (Chai)',
    'Traditional Kenyan tea with milk and spices',
    150.00,
    ARRAY['tea leaves', 'milk', 'sugar', 'spices'],
    ARRAY['dairy'],
    true,
    false,
    true,
    8,
    2
FROM food_categories c WHERE c.name = 'Beverages';

INSERT INTO menu_items (category_id, name, description, price, ingredients, allergens, is_vegetarian, is_vegan, is_available, preparation_time, sort_order)
SELECT 
    c.id,
    'Chocolate Cake Slice',
    'Rich chocolate cake with chocolate ganache',
    350.00,
    ARRAY['flour', 'chocolate', 'eggs', 'butter', 'sugar'],
    ARRAY['gluten', 'dairy', 'eggs'],
    true,
    false,
    true,
    5,
    1
FROM food_categories c WHERE c.name = 'Desserts & Sweets';

INSERT INTO menu_items (category_id, name, description, price, ingredients, allergens, is_vegetarian, is_vegan, is_available, preparation_time, sort_order)
SELECT 
    c.id,
    'Quinoa Salad Bowl',
    'Nutritious quinoa with mixed vegetables and avocado',
    650.00,
    ARRAY['quinoa', 'vegetables', 'avocado', 'olive oil'],
    NULL,
    true,
    true,
    true,
    15,
    1
FROM food_categories c WHERE c.name = 'Healthy Options';

-- Insert routes
INSERT INTO routes (name, description, pickup_location_id, dropoff_location_id, duration_minutes, price_per_person, max_capacity, is_active)
SELECT 
    'CBD to Airport Express',
    'Fast route from city center to JKIA with premium dining service',
    p1.id,
    p2.id,
    45,
    1500.00,
    12,
    true
FROM pickup_locations p1, pickup_locations p2
WHERE p1.name = 'Nairobi CBD' AND p2.name = 'JKIA Terminal';

INSERT INTO routes (name, description, pickup_location_id, dropoff_location_id, duration_minutes, price_per_person, max_capacity, is_active)
SELECT 
    'University to Westlands',
    'Student-friendly route with affordable meal options',
    p1.id,
    p2.id,
    25,
    800.00,
    16,
    true
FROM pickup_locations p1, pickup_locations p2
WHERE p1.name = 'University of Nairobi' AND p2.name = 'Westlands Mall';

INSERT INTO routes (name, description, pickup_location_id, dropoff_location_id, duration_minutes, price_per_person, max_capacity, is_active)
SELECT 
    'Upper Hill Business Route',
    'Professional route connecting business districts',
    p1.id,
    p2.id,
    30,
    1200.00,
    14,
    true
FROM pickup_locations p1, pickup_locations p2
WHERE p1.name = 'Upper Hill' AND p2.name = 'Nairobi CBD';

INSERT INTO routes (name, description, pickup_location_id, dropoff_location_id, duration_minutes, price_per_person, max_capacity, is_active)
SELECT 
    'Karen to CBD Morning',
    'Suburban to city route with breakfast options',
    p1.id,
    p2.id,
    35,
    1000.00,
    15,
    true
FROM pickup_locations p1, pickup_locations p2
WHERE p1.name = 'Karen Shopping Center' AND p2.name = 'Nairobi CBD';

-- Insert trips for the next 7 days
INSERT INTO trips (route_id, driver_id, scheduled_date, scheduled_time, status, current_capacity, max_capacity, notes)
SELECT 
    r.id,
    u.id,
    CURRENT_DATE + INTERVAL '1 day',
    '07:30:00',
    'scheduled',
    0,
    r.max_capacity,
    'Morning express service'
FROM routes r, users u 
WHERE r.name = 'CBD to Airport Express' AND u.username = 'john_driver';

INSERT INTO trips (route_id, driver_id, scheduled_date, scheduled_time, status, current_capacity, max_capacity, notes)
SELECT 
    r.id,
    u.id,
    CURRENT_DATE + INTERVAL '1 day',
    '08:00:00',
    'scheduled',
    0,
    r.max_capacity,
    'Student special'
FROM routes r, users u 
WHERE r.name = 'University to Westlands' AND u.username = 'mary_driver';

INSERT INTO trips (route_id, driver_id, scheduled_date, scheduled_time, status, current_capacity, max_capacity, notes)
SELECT 
    r.id,
    u.id,
    CURRENT_DATE + INTERVAL '1 day',
    '17:30:00',
    'scheduled',
    0,
    r.max_capacity,
    'Evening business route'
FROM routes r, users u 
WHERE r.name = 'Upper Hill Business Route' AND u.username = 'peter_driver';

-- Add more trips for variety
INSERT INTO trips (route_id, driver_id, scheduled_date, scheduled_time, status, current_capacity, max_capacity, notes)
SELECT 
    r.id,
    u.id,
    CURRENT_DATE + INTERVAL '2 days',
    '07:00:00',
    'scheduled',
    0,
    r.max_capacity,
    'Early morning service'
FROM routes r, users u 
WHERE r.name = 'Karen to CBD Morning' AND u.username = 'john_driver';

-- Insert sample bookings
INSERT INTO bookings (user_id, trip_id, party_size, total_amount, status, special_requests)
SELECT 
    u.id,
    t.id,
    2,
    3000.00,
    'confirmed',
    'Window seats preferred'
FROM users u, trips t, routes r
WHERE u.username = 'alice_customer' 
AND t.route_id = r.id 
AND r.name = 'CBD to Airport Express'
AND t.scheduled_date = CURRENT_DATE + INTERVAL '1 day'
LIMIT 1;

INSERT INTO bookings (user_id, trip_id, party_size, total_amount, status, special_requests)
SELECT 
    u.id,
    t.id,
    1,
    800.00,
    'pending',
    'Vegetarian meals only'
FROM users u, trips t, routes r
WHERE u.username = 'bob_customer' 
AND t.route_id = r.id 
AND r.name = 'University to Westlands'
AND t.scheduled_date = CURRENT_DATE + INTERVAL '1 day'
LIMIT 1;

-- Insert table menu availability (Tables 1-8 for food truck)
-- Table 1 - Full menu available
INSERT INTO table_menu_availability (table_number, menu_item_id, is_available)
SELECT 1, id, true FROM menu_items WHERE is_available = true;

-- Table 2 - No desserts (dietary restrictions table)
INSERT INTO table_menu_availability (table_number, menu_item_id, is_available)
SELECT 
    2, 
    m.id, 
    CASE WHEN c.name = 'Desserts & Sweets' THEN false ELSE true END
FROM menu_items m
JOIN food_categories c ON m.category_id = c.id
WHERE m.is_available = true;

-- Table 3 - Vegetarian/Vegan only
INSERT INTO table_menu_availability (table_number, menu_item_id, is_available)
SELECT 3, id, is_vegetarian FROM menu_items WHERE is_available = true;

-- Table 4 - Quick service items only (prep time <= 15 minutes)
INSERT INTO table_menu_availability (table_number, menu_item_id, is_available)
SELECT 4, id, (preparation_time <= 15) FROM menu_items WHERE is_available = true;

-- Tables 5-8 get full menu
INSERT INTO table_menu_availability (table_number, menu_item_id, is_available)
SELECT table_num, id, true 
FROM menu_items, generate_series(5, 8) AS table_num 
WHERE is_available = true;

-- Insert sample booking menu items
INSERT INTO booking_menu_items (booking_id, menu_item_id, quantity, unit_price, table_number)
SELECT 
    b.id,
    m.id,
    1,
    m.price,
    1
FROM bookings b, menu_items m
WHERE b.status = 'confirmed'
AND m.name = 'Beef Burger Deluxe'
LIMIT 1;

INSERT INTO booking_menu_items (booking_id, menu_item_id, quantity, unit_price, table_number)
SELECT 
    b.id,
    m.id,
    2,
    m.price,
    1
FROM bookings b, menu_items m
WHERE b.status = 'confirmed'
AND m.name = 'Fresh Orange Juice'
LIMIT 1;

-- Insert sample payments
INSERT INTO payments (booking_id, payment_method, amount, amount_paid, status, reference_number)
SELECT 
    id,
    'mpesa',
    total_amount,
    total_amount,
    'completed',
    'MP' || LPAD(floor(random() * 1000000)::text, 6, '0')
FROM bookings 
WHERE status = 'confirmed'
LIMIT 1;

-- Insert notifications
INSERT INTO notifications (user_id, title, message, type, data)
SELECT 
    u.id,
    'Booking Confirmed',
    'Your RideDine booking has been confirmed! Get ready for a delicious journey.',
    'booking_confirmation',
    jsonb_build_object('booking_id', b.id, 'trip_date', t.scheduled_date)
FROM users u
JOIN bookings b ON u.id = b.user_id
JOIN trips t ON b.trip_id = t.id
WHERE b.status = 'confirmed'
LIMIT 1;

INSERT INTO notifications (user_id, title, message, type, data)
SELECT 
    u.id,
    'Payment Successful',
    'Your payment has been processed successfully. Thank you for choosing RideDine!',
    'payment_success',
    jsonb_build_object('amount', p.amount_paid, 'reference', p.reference_number)
FROM users u
JOIN bookings b ON u.id = b.user_id
JOIN payments p ON b.id = p.booking_id
WHERE p.status = 'completed'
LIMIT 1;
[V0_FILE]javascript:file="routes/menuItems.js" isEdit="true"
import express from "express"
import { supabase, handleDatabaseError, buildPaginationQuery } from "../config/database.js"
import { validateMenuItem, validateUUID, validatePagination } from "../middleware/validation.js"

const router = express.Router()

// GET /api/menu-items - List all menu items with filtering
router.get("/", validatePagination, async (req, res, next) => {
  try {
    const { category_id, is_available, is_vegetarian, is_vegan, search, page = 1, limit = 20 } = req.query

const pageNum = Number.parseInt(page)
    const limitNum = Number.parseInt(limit)

let query = supabase
      .from("menu_items")
      .select(
        `
        *,
        food_categories (
          id,
          name,
          description,
          sort_order
        )
      `,
        { count: "exact" },
      )
      .order("sort_order", { ascending: true })

// Apply filters
    if (category_id) {
      query = query.eq("category_id", category_id)
    }

if (is_available !== undefined) {
      query = query.eq("is_available", is_available === "true")
    }

if (is_vegetarian !== undefined) {
      query = query.eq("is_vegetarian", is_vegetarian === "true")
    }

if (is_vegan !== undefined) {
      query = query.eq("is_vegan", is_vegan === "true")
    }

if (search) {
      query = query.or(`name.ilike.%${search}%,description.ilike.%${search}%`)
    }

query = buildPaginationQuery(query, pageNum, limitNum)

const { data, error, count } = await query

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

// Group by category for better organization
    const groupedMenu = data.reduce((acc, item) => {
      const categoryName = item.food_categories?.name || "Uncategorized"
      if (!acc[categoryName]) {
        acc[categoryName] = {
          category: item.food_categories,
          items: [],
        }
      }
      acc[categoryName].items.push(item)
      return acc
    }, {})

res.status(200).json({
      success: true,
      data: {
        items: data,
        grouped: groupedMenu,
        total: count || 0,
      },
      pagination: {
        page: pageNum,
        limit: limitNum,
        total: count || 0,
        totalPages: Math.ceil((count || 0) / limitNum),
      },
    })
  } catch (error) {
    next(error)
  }
})

// GET /api/menu-items/table/:table_number - Get menu for specific table (Table Dot Menu)
router.get("/table/:table_number", async (req, res, next) => {
  try {
    const { table_number } = req.params
    const tableNum = Number.parseInt(table_number)

if (isNaN(tableNum) || tableNum < 1 || tableNum > 20) {
      return res.status(400).json({
        success: false,
        error: "Invalid table number. Must be between 1 and 20.",
      })
    }

// Get menu items with table-specific availability
    const { data: menuItems, error: menuError } = await supabase
      .from("menu_items")
      .select(`
        *,
        food_categories (
          id,
          name,
          description,
          sort_order
        ),
        table_menu_availability!left (
          is_available,
          table_number
        )
      `)
      .eq("is_available", true)
      .order("sort_order", { ascending: true })

if (menuError) {
      const dbError = handleDatabaseError(menuError)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

// Filter items available for this specific table
    const availableItems = menuItems.filter((item) => {
      const tableAvailability = item.table_menu_availability.find((ta) => ta.table_number === tableNum)

// If no specific table availability is set, item is available by default
      // If table availability is set, use that setting
      return !tableAvailability || tableAvailability.is_available
    })

// Group by category for table dot menu display
    const groupedMenu = availableItems.reduce((acc, item) => {
      const categoryName = item.food_categories?.name || "Uncategorized"
      if (!acc[categoryName]) {
        acc[categoryName] = {
          category: item.food_categories,
          items: [],
        }
      }

// Clean up the item (remove table_menu_availability from response)
      const cleanItem = { ...item }
      delete cleanItem.table_menu_availability
      acc[categoryName].items.push(cleanItem)
      return acc
    }, {})

// Sort categories by sort_order
    const sortedCategories = Object.keys(groupedMenu).sort((a, b) => {
      const categoryA = groupedMenu[a].category?.sort_order || 999
      const categoryB = groupedMenu[b].category?.sort_order || 999
      return categoryA - categoryB
    })

const sortedGroupedMenu = {}
    sortedCategories.forEach((categoryName) => {
      sortedGroupedMenu[categoryName] = groupedMenu[categoryName]
    })

res.status(200).json({
      success: true,
      data: {
        table_number: tableNum,
        items: availableItems.map((item) => {
          const cleanItem = { ...item }
          delete cleanItem.table_menu_availability
          return cleanItem
        }),
        grouped: sortedGroupedMenu,
        total: availableItems.length,
        categories: sortedCategories.length,
      },
      message: `Table ${tableNum} menu loaded successfully`,
    })
  } catch (error) {
    next(error)
  }
})

// POST /api/menu-items/table-availability - Set menu availability for specific table
router.post("/table-availability", async (req, res, next) => {
  try {
    const { table_number, menu_item_id, is_available } = req.body

if (!table_number || !menu_item_id || is_available === undefined) {
      return res.status(400).json({
        success: false,
        error: "table_number, menu_item_id, and is_available are required",
      })
    }

const tableNum = Number.parseInt(table_number)
    if (isNaN(tableNum) || tableNum < 1 || tableNum > 20) {
      return res.status(400).json({
        success: false,
        error: "Invalid table number. Must be between 1 and 20.",
      })
    }

// Verify menu item exists
    const { data: menuItem, error: menuError } = await supabase
      .from("menu_items")
      .select("id, name")
      .eq("id", menu_item_id)
      .single()

if (menuError || !menuItem) {
      return res.status(404).json({
        success: false,
        error: "Menu item not found",
      })
    }

// Upsert table menu availability
    const { data, error } = await supabase
      .from("table_menu_availability")
      .upsert(
        {
          table_number: tableNum,
          menu_item_id,
          is_available,
          updated_at: new Date().toISOString(),
        },
        {
          onConflict: "table_number,menu_item_id",
        },
      )
      .select()
      .single()

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(200).json({
      success: true,
      message: `Menu availability updated for table ${tableNum}`,
      data: {
        ...data,
        menu_item_name: menuItem.name,
      },
    })
  } catch (error) {
    next(error)
  }
})

// POST /api/menu-items/bulk-table-availability - Set availability for multiple items/tables
router.post("/bulk-table-availability", async (req, res, next) => {
  try {
    const { table_numbers, menu_item_ids, is_available } = req.body

if (!table_numbers || !menu_item_ids || is_available === undefined) {
      return res.status(400).json({
        success: false,
        error: "table_numbers, menu_item_ids, and is_available are required",
      })
    }

if (!Array.isArray(table_numbers) || !Array.isArray(menu_item_ids)) {
      return res.status(400).json({
        success: false,
        error: "table_numbers and menu_item_ids must be arrays",
      })
    }

// Create all combinations
    const availabilityData = []
    for (const table_number of table_numbers) {
      for (const menu_item_id of menu_item_ids) {
        availabilityData.push({
          table_number: Number.parseInt(table_number),
          menu_item_id,
          is_available,
          updated_at: new Date().toISOString(),
        })
      }
    }

const { data, error } = await supabase
      .from("table_menu_availability")
      .upsert(availabilityData, {
        onConflict: "table_number,menu_item_id",
      })
      .select()

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(200).json({
      success: true,
      message: `Bulk menu availability updated for ${table_numbers.length} tables and ${menu_item_ids.length} items`,
      data: {
        updated_count: data.length,
        tables: table_numbers,
        items: menu_item_ids.length,
      },
    })
  } catch (error) {
    next(error)
  }
})

// GET /api/menu-items/:id - Get single menu item
router.get("/:id", validateUUID, async (req, res, next) => {
  try {
    const { data, error } = await supabase
      .from("menu_items")
      .select(`
        *,
        food_categories (
          id,
          name,
          description
        )
      `)
      .eq("id", req.params.id)
      .single()

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(200).json({
      success: true,
      data,
    })
  } catch (error) {
    next(error)
  }
})

// POST /api/menu-items - Create new menu item
router.post("/", validateMenuItem, async (req, res, next) => {
  try {
    const { data, error } = await supabase
      .from("menu_items")
      .insert([req.body])
      .select(`
        *,
        food_categories (
          id,
          name,
          description
        )
      `)
      .single()

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(201).json({
      success: true,
      data,
      message: "Menu item created successfully",
    })
  } catch (error) {
    next(error)
  }
})

// PUT /api/menu-items/:id - Update menu item
router.put("/:id", validateUUID, validateMenuItem, async (req, res, next) => {
  try {
    const { data, error } = await supabase
      .from("menu_items")
      .update({
        ...req.body,
        updated_at: new Date().toISOString(),
      })
      .eq("id", req.params.id)
      .select(`
        *,
        food_categories (
          id,
          name,
          description
        )
      `)
      .single()

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(200).json({
      success: true,
      data,
      message: "Menu item updated successfully",
    })
  } catch (error) {
    next(error)
  }
})

// DELETE /api/menu-items/:id - Delete menu item
router.delete("/:id", validateUUID, async (req, res, next) => {
  try {
    // Check if item is used in any bookings
    const { data: bookingItems, error: bookingError } = await supabase
      .from("booking_menu_items")
      .select("id")
      .eq("menu_item_id", req.params.id)
      .limit(1)

if (bookingError) {
      const dbError = handleDatabaseError(bookingError)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

if (bookingItems && bookingItems.length > 0) {
      return res.status(400).json({
        success: false,
        error: "Cannot delete menu item that has been ordered. Consider marking it as unavailable instead.",
      })
    }

const { error } = await supabase.from("menu_items").delete().eq("id", req.params.id)

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(200).json({
      success: true,
      message: "Menu item deleted successfully",
    })
  } catch (error) {
    next(error)
  }
})

export default router
[V0_FILE]javascript:file="routes/trips.js" isFixed="true" isEdit="true" isQuickEdit="true"
import express from "express"
import { supabase, handleDatabaseError, buildPaginationQuery } from "../config/database.js"
import { validateTrip, validateUUID, validatePagination } from "../middleware/validation.js"

const router = express.Router()

// GET /api/trips - List all trips with availability status
router.get("/", validatePagination, async (req, res, next) => {
  try {
    const { driver_id, route_id, status, date_from, date_to, available_only, page = 1, limit = 10 } = req.query

const pageNum = Number.parseInt(page)
    const limitNum = Number.parseInt(limit)

let query = supabase
      .from("trips")
      .select(
        `
        *,
        routes (
          id,
          name,
          description,
          duration_minutes,
          price_per_person,
          pickup_locations!routes_pickup_location_id_fkey (
            id,
            name,
            address,
            latitude,
            longitude
          ),
          dropoff_locations:pickup_locations!routes_dropoff_location_id_fkey (
            id,
            name,
            address,
            latitude,
            longitude
          )
        ),
        drivers:users!trips_driver_id_fkey (
          id,
          first_name,
          last_name,
          phone,
          email
        ),
        bookings (
          id,
          party_size,
          status
        )
      `,
        { count: "exact" },
      )
      .order("scheduled_date", { ascending: true })
      .order("scheduled_time", { ascending: true })

// Apply filters
    if (driver_id) {
      query = query.eq("driver_id", driver_id)
    }

if (route_id) {
      query = query.eq("route_id", route_id)
    }

if (status) {
      query = query.eq("status", status)
    }

if (date_from) {
      query = query.gte("scheduled_date", date_from)
    }

if (date_to) {
      query = query.lte("scheduled_date", date_to)
    }

query = buildPaginationQuery(query, pageNum, limitNum)

const { data, error, count } = await query

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

// Calculate availability for each trip
    const tripsWithAvailability = data.map((trip) => {
      const confirmedBookings = trip.bookings.filter(
        (booking) => booking.status === "confirmed" || booking.status === "pending",
      )
      const totalBooked = confirmedBookings.reduce((sum, booking) => sum + booking.party_size, 0)
      const availableSpots = trip.max_capacity - totalBooked
      const isAvailable = availableSpots > 0 && trip.status === "scheduled"
      const isFull = availableSpots <= 0

return {
        ...trip,
        current_capacity: totalBooked,
        available_spots: availableSpots,
        is_available: isAvailable,
        is_full: isFull,
        booking_status: isFull ? "full" : isAvailable ? "available" : "unavailable",
        confirmed_bookings_count: confirmedBookings.length,
        total_passengers: totalBooked,
      }
    })

// Filter by availability if requested
    const filteredTrips =
      available_only === "true" ? tripsWithAvailability.filter((trip) => trip.is_available) : tripsWithAvailability

res.status(200).json({
      success: true,
      data: filteredTrips,
      pagination: {
        page: pageNum,
        limit: limitNum,
        total: available_only === "true" ? filteredTrips.length : count || 0,
        totalPages: Math.ceil((available_only === "true" ? filteredTrips.length : count || 0) / limitNum),
      },
    })
  } catch (error) {
    next(error)
  }
})

// GET /api/trips/available - Get only available trips
router.get("/available", async (req, res, next) => {
  try {
    const { route_id, date_from, date_to, party_size = 1 } = req.query
    const requestedPartySize = Number.parseInt(party_size)

let query = supabase
      .from("trips")
      .select(`
        *,
        routes (
          id,
          name,
          description,
          duration_minutes,
          price_per_person,
          pickup_locations!routes_pickup_location_id_fkey (
            id,
            name,
            address,
            latitude,
            longitude
          ),
          dropoff_locations:pickup_locations!routes_dropoff_location_id_fkey (
            id,
            name,
            address,
            latitude,
            longitude
          )
        ),
        drivers:users!trips_driver_id_fkey (
          id,
          first_name,
          last_name,
          phone
        ),
        bookings (
          id,
          party_size,
          status
        )
      `)
      .eq("status", "scheduled")
      .gte("scheduled_date", new Date().toISOString().split("T")[0])
      .order("scheduled_date", { ascending: true })
      .order("scheduled_time", { ascending: true })

// Apply filters
    if (route_id) {
      query = query.eq("route_id", route_id)
    }

if (date_from) {
      query = query.gte("scheduled_date", date_from)
    }

if (date_to) {
      query = query.lte("scheduled_date", date_to)
    }

const { data, error } = await query

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

// Filter trips that have enough capacity for the requested party size
    const availableTrips = data
      .filter((trip) => {
        const confirmedBookings = trip.bookings.filter(
          (booking) => booking.status === "confirmed" || booking.status === "pending",
        )
        const totalBooked = confirmedBookings.reduce((sum, booking) => sum + booking.party_size, 0)
        const availableSpots = trip.max_capacity - totalBooked

return availableSpots >= requestedPartySize
      })
      .map((trip) => {
        const confirmedBookings = trip.bookings.filter(
          (booking) => booking.status === "confirmed" || booking.status === "pending",
        )
        const totalBooked = confirmedBookings.reduce((sum, booking) => sum + booking.party_size, 0)
        const availableSpots = trip.max_capacity - totalBooked

return {
          ...trip,
          current_capacity: totalBooked,
          available_spots: availableSpots,
          is_available: true,
          is_full: false,
          booking_status: "available",
          can_accommodate_party: true,
          requested_party_size: requestedPartySize,
        }
      })

res.status(200).json({
      success: true,
      data: availableTrips,
      total: availableTrips.length,
      filters: {
        party_size: requestedPartySize,
        route_id,
        date_from,
        date_to,
      },
    })
  } catch (error) {
    next(error)
  }
})

// GET /api/trips/:id - Get trip by ID with full details
router.get("/:id", validateUUID, async (req, res, next) => {
  try {
    const { data, error } = await supabase
      .from("trips")
      .select(`
        *,
        routes (
          id,
          name,
          description,
          duration_minutes,
          price_per_person,
          pickup_locations!routes_pickup_location_id_fkey (
            id,
            name,
            address,
            latitude,
            longitude
          ),
          dropoff_locations:pickup_locations!routes_dropoff_location_id_fkey (
            id,
            name,
            address,
            latitude,
            longitude
          )
        ),
        drivers:users!trips_driver_id_fkey (
          id,
          first_name,
          last_name,
          phone,
          email
        ),
        bookings (
          id,
          party_size,
          status,
          special_requests,
          booked_at,
          users (
            id,
            first_name,
            last_name,
            phone
          ),
          booking_menu_items (
            id,
            quantity,
            unit_price,
            table_number,
            menu_items (
              id,
              name,
              description
            )
          )
        )
      `)
      .eq("id", req.params.id)
      .single()

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

// Calculate availability
    const confirmedBookings = data.bookings.filter(
      (booking) => booking.status === "confirmed" || booking.status === "pending",
    )
    const totalBooked = confirmedBookings.reduce((sum, booking) => sum + booking.party_size, 0)
    const availableSpots = data.max_capacity - totalBooked
    const isAvailable = availableSpots > 0 && data.status === "scheduled"
    const isFull = availableSpots <= 0

const tripWithAvailability = {
      ...data,
      current_capacity: totalBooked,
      available_spots: availableSpots,
      is_available: isAvailable,
      is_full: isFull,
      booking_status: isFull ? "full" : isAvailable ? "available" : "unavailable",
      confirmed_bookings: confirmedBookings,
      pending_bookings: data.bookings.filter((b) => b.status === "pending"),
      cancelled_bookings: data.bookings.filter((b) => b.status === "cancelled"),
      total_passengers: totalBooked,
    }

res.status(200).json({
      success: true,
      data: tripWithAvailability,
    })
  } catch (error) {
    next(error)
  }
})

// POST /api/trips/:id/check-capacity - Check if trip can accommodate party size
router.post("/:id/check-capacity", validateUUID, async (req, res, next) => {
  try {
    const { party_size = 1 } = req.body
    const requestedPartySize = Number.parseInt(party_size)

if (isNaN(requestedPartySize) || requestedPartySize < 1 || requestedPartySize > 15) {
      return res.status(400).json({
        success: false,
        error: "Invalid party size. Must be between 1 and 15.",
      })
    }

const { data: trip, error } = await supabase
      .from("trips")
      .select(`
        id,
        status,
        max_capacity,
        scheduled_date,
        scheduled_time,
        bookings (
          party_size,
          status
        )
      `)
      .eq("id", req.params.id)
      .single()

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

// Calculate current capacity
    const confirmedBookings = trip.bookings.filter(
      (booking) => booking.status === "confirmed" || booking.status === "pending",
    )
    const currentCapacity = confirmedBookings.reduce((sum, booking) => sum + booking.party_size, 0)
    const availableSpots = trip.max_capacity - currentCapacity
    const canAccommodate = availableSpots >= requestedPartySize
    const isAvailable = trip.status === "scheduled" && canAccommodate

// Check if trip is in the past
    const tripDateTime = new Date(`${trip.scheduled_date}T${trip.scheduled_time}`)
    const isPastTrip = tripDateTime < new Date()

res.status(200).json({
      success: true,
      data: {
        trip_id: trip.id,
        status: trip.status,
        current_capacity: currentCapacity,
        max_capacity: trip.max_capacity,
        available_spots: availableSpots,
        requested_party_size: requestedPartySize,
        can_accommodate: canAccommodate,
        is_available: isAvailable && !isPastTrip,
        is_past_trip: isPastTrip,
        booking_status: isPastTrip ? "past" : availableSpots <= 0 ? "full" : isAvailable ? "available" : "unavailable",
      },
    })
  } catch (error) {
    next(error)
  }
})

// POST /api/trips - Create new trip
router.post("/", validateTrip, async (req, res, next) => {
  try {
    const tripData = {
      ...req.body,
      current_capacity: 0, // Always start with 0 capacity
      status: req.body.status || "scheduled",
    }

const { data, error } = await supabase
      .from("trips")
      .insert([tripData])
      .select(`
        *,
        routes (
          id,
          name,
          description,
          pickup_locations!routes_pickup_location_id_fkey (name),
          dropoff_locations:pickup_locations!routes_dropoff_location_id_fkey (name)
        ),
        drivers:users!trips_driver_id_fkey (
          first_name,
          last_name
        )
      `)
      .single()

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(201).json({
      success: true,
      data: {
        ...data,
        current_capacity: 0,
        available_spots: data.max_capacity,
        is_available: true,
        is_full: false,
        booking_status: "available",
      },
      message: "Trip created successfully",
    })
  } catch (error) {
    next(error)
  }
})

// PUT /api/trips/:id - Update trip
router.put("/:id", validateUUID, async (req, res, next) => {
  try {
    const updates = { ...req.body }

// Don't allow direct updates to current_capacity (managed by triggers)
    delete updates.current_capacity

const { data, error } = await supabase
      .from("trips")
      .update({
        ...updates,
        updated_at: new Date().toISOString(),
      })
      .eq("id", req.params.id)
      .select(`
        *,
        routes (
          id,
          name,
          pickup_locations!routes_pickup_location_id_fkey (name),
          dropoff_locations:pickup_locations!routes_dropoff_location_id_fkey (name)
        ),
        drivers:users!trips_driver_id_fkey (
          first_name,
          last_name
        ),
        bookings (
          party_size,
          status
        )
      `)
      .single()

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(200).json({
      success: true,
      data: {
        ...data,
        current_capacity: totalBooked,
        available_spots: availableSpots,
        is_available: isAvailable,
        is_full: isFull,
        booking_status: isFull ? "full" : isAvailable ? "available" : "unavailable",
      },
      message: "Trip updated successfully",
    })
  } catch (error) {
    next(error)
  }
})

// DELETE /api/trips/:id - Delete trip (only if no confirmed bookings)
router.delete("/:id", validateUUID, async (req, res, next) => {
  try {
    // Check for any bookings (not just confirmed ones)
    const { data: bookings, error: bookingError } = await supabase
      .from("bookings")
      .select("id, status")
      .eq("trip_id", req.params.id)

if (bookingError) {
      const dbError = handleDatabaseError(bookingError)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

const confirmedBookings = bookings.filter((b) => b.status === "confirmed")
    const pendingBookings = bookings.filter((b) => b.status === "pending")

if (confirmedBookings.length > 0) {
      return res.status(400).json({
        success: false,
        error: "Cannot delete trip with confirmed bookings. Cancel bookings first.",
      })
    }

if (pendingBookings.length > 0) {
      return res.status(400).json({
        success: false,
        error: "Cannot delete trip with pending bookings. Cancel bookings first.",
      })
    }

const { error } = await supabase.from("trips").delete().eq("id", req.params.id)

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(200).json({
      success: true,
      message: "Trip deleted successfully",
    })
  } catch (error) {
    next(error)
  }
})

export default router
[V0_FILE]javascript:file="routes/payments.js" isFixed="true" isEdit="true" isQuickEdit="true"
import express from "express"
import axios from "axios"
import { supabase, handleDatabaseError } from "../config/database.js"
import { validateUUID } from "../middleware/validation.js"

const router = express.Router()

// M-Pesa configuration
const MPESA_CONFIG = {
  consumer_key: process.env.MPESA_CONSUMER_KEY,
  consumer_secret: process.env.MPESA_CONSUMER_SECRET,
  business_short_code: process.env.MPESA_BUSINESS_SHORT_CODE,
  passkey: process.env.MPESA_PASSKEY,
  callback_url: process.env.MPESA_CALLBACK_URL,
  sandbox_url:
    process.env.NODE_ENV === "production" ? "https://api.safaricom.co.ke" : "https://sandbox.safaricom.co.ke",
}

// Get M-Pesa access token
async function getMpesaAccessToken() {
  try {
    const auth = Buffer.from(`${MPESA_CONFIG.consumer_key}:${MPESA_CONFIG.consumer_secret}`).toString("base64")

const response = await axios.get(`${MPESA_CONFIG.sandbox_url}/oauth/v1/generate?grant_type=client_credentials`, {
      headers: {
        Authorization: `Basic ${auth}`,
      },
    })

return response.data.access_token
  } catch (error) {
    console.error("M-Pesa token error:", error.response?.data || error.message)
    throw new Error("Failed to get M-Pesa access token")
  }
}

// Generate M-Pesa password
function generateMpesaPassword() {
  const timestamp = new Date()
    .toISOString()
    .replace(/[^0-9]/g, "")
    .slice(0, -3)
  const password = Buffer.from(`${MPESA_CONFIG.business_short_code}${MPESA_CONFIG.passkey}${timestamp}`).toString(
    "base64",
  )

return { password, timestamp }
}

// POST /api/payments/mpesa/stk-push - Initiate M-Pesa STK Push
router.post("/mpesa/stk-push", async (req, res, next) => {
  try {
    const { phone_number, amount, booking_id, account_reference } = req.body

// Validate required fields
    if (!phone_number || !amount || !booking_id) {
      return res.status(400).json({
        success: false,
        error: "Phone number, amount, and booking ID are required",
      })
    }

// Verify booking exists and get details
    const { data: booking, error: bookingError } = await supabase
      .from("bookings")
      .select(`
        id,
        total_amount,
        status,
        users (
          first_name,
          last_name,
          phone
        ),
        trips (
          id,
          scheduled_date,
          routes (
            name
          )
        )
      `)
      .eq("id", booking_id)
      .single()

if (bookingError || !booking) {
      return res.status(404).json({
        success: false,
        error: "Booking not found",
      })
    }

if (booking.status === "confirmed") {
      return res.status(400).json({
        success: false,
        error: "Booking is already confirmed and paid",
      })
    }

if (booking.status === "cancelled") {
      return res.status(400).json({
        success: false,
        error: "Cannot pay for cancelled booking",
      })
    }

// Format phone number (ensure it starts with 254)
    let formattedPhone = phone_number.replace(/\D/g, "")
    if (formattedPhone.startsWith("0")) {
      formattedPhone = "254" + formattedPhone.slice(1)
    } else if (!formattedPhone.startsWith("254")) {
      formattedPhone = "254" + formattedPhone
    }

// Validate amount
    const paymentAmount = Number.parseFloat(amount)
    if (isNaN(paymentAmount) || paymentAmount <= 0) {
      return res.status(400).json({
        success: false,
        error: "Invalid payment amount",
      })
    }

// Get M-Pesa access token
    const accessToken = await getMpesaAccessToken()
    const { password, timestamp } = generateMpesaPassword()

// Prepare STK Push request
    const stkPushData = {
      BusinessShortCode: MPESA_CONFIG.business_short_code,
      Password: password,
      Timestamp: timestamp,
      TransactionType: "CustomerPayBillOnline",
      Amount: Math.round(paymentAmount),
      PartyA: formattedPhone,
      PartyB: MPESA_CONFIG.business_short_code,
      PhoneNumber: formattedPhone,
      CallBackURL: `${MPESA_CONFIG.callback_url}/api/payments/mpesa/callback`,
      AccountReference: account_reference || `RideDine-${booking_id.slice(0, 8)}`,
      TransactionDesc: `Payment for RideDine booking - ${booking.trips?.routes?.name || "Trip"}`,
    }

// Make STK Push request
    const response = await axios.post(`${MPESA_CONFIG.sandbox_url}/mpesa/stkpush/v1/processrequest`, stkPushData, {
      headers: {
        Authorization: `Bearer ${accessToken}`,
        "Content-Type": "application/json",
      },
    })

// Store payment request in database
    const { data: paymentRecord, error: dbError } = await supabase
      .from("payments")
      .insert([
        {
          booking_id,
          payment_method: "mpesa",
          amount: paymentAmount,
          phone_number: formattedPhone,
          mpesa_checkout_request_id: response.data.CheckoutRequestID,
          merchant_request_id: response.data.MerchantRequestID,
          reference_number: stkPushData.AccountReference,
          status: "pending",
          created_at: new Date().toISOString(),
        },
      ])
      .select()
      .single()

if (dbError) {
      console.error("Database error:", dbError)
      return res.status(500).json({
        success: false,
        error: "Failed to store payment record",
      })
    }

res.status(200).json({
      success: true,
      data: {
        payment_id: paymentRecord.id,
        checkout_request_id: response.data.CheckoutRequestID,
        merchant_request_id: response.data.MerchantRequestID,
        customer_message: response.data.CustomerMessage,
        response_code: response.data.ResponseCode,
      },
      message: "STK Push sent successfully. Please check your phone to complete payment.",
    })
  } catch (error) {
    console.error("M-Pesa STK Push error:", error.response?.data || error.message)
    res.status(500).json({
      success: false,
      error: error.response?.data?.errorMessage || "Failed to initiate M-Pesa payment",
      details: process.env.NODE_ENV === "development" ? error.message : undefined,
    })
  }
})

// POST /api/payments/mpesa/callback - M-Pesa callback handler
router.post("/mpesa/callback", async (req, res, next) => {
  try {
    console.log("M-Pesa Callback received:", JSON.stringify(req.body, null, 2))

const { Body } = req.body
    const { stkCallback } = Body

const checkoutRequestID = stkCallback.CheckoutRequestID
    const merchantRequestID = stkCallback.MerchantRequestID
    const resultCode = stkCallback.ResultCode
    const resultDesc = stkCallback.ResultDesc

// Find the payment record
    const { data: payment, error: paymentError } = await supabase
      .from("payments")
      .select("id, booking_id, amount")
      .eq("mpesa_checkout_request_id", checkoutRequestID)
      .single()

if (paymentError || !payment) {
      console.error("Payment not found for CheckoutRequestID:", checkoutRequestID)
      return res.status(200).json({
        ResultCode: 0,
        ResultDesc: "Payment record not found",
      })
    }

let updateData = {
      mpesa_result_code: resultCode,
      mpesa_result_desc: resultDesc,
      updated_at: new Date().toISOString(),
    }

if (resultCode === 0) {
      // Payment successful
      const callbackMetadata = stkCallback.CallbackMetadata?.Item || []
      const amountPaid = callbackMetadata.find((item) => item.Name === "Amount")?.Value
      const mpesaReceiptNumber = callbackMetadata.find((item) => item.Name === "MpesaReceiptNumber")?.Value
      const transactionDate = callbackMetadata.find((item) => item.Name === "TransactionDate")?.Value
      const phoneNumber = callbackMetadata.find((item) => item.Name === "PhoneNumber")?.Value

updateData = {
        ...updateData,
        status: "completed",
        amount_paid: amountPaid,
        mpesa_receipt_number: mpesaReceiptNumber,
        mpesa_transaction_date: transactionDate?.toString(),
        phone_number: phoneNumber?.toString(),
      }

// Update payment record
      await supabase.from("payments").update(updateData).eq("id", payment.id)

// Update booking status to confirmed
      await supabase
        .from("bookings")
        .update({
          status: "confirmed",
          confirmed_at: new Date().toISOString(),
        })
        .eq("id", payment.booking_id)

// Get booking details for notification
      const { data: booking } = await supabase
        .from("bookings")
        .select(`
          user_id,
          trips (
            scheduled_date,
            scheduled_time,
            routes (
              name,
              pickup_locations!routes_pickup_location_id_fkey (name),
              dropoff_locations:pickup_locations!routes_dropoff_location_id_fkey (name)
            )
          )
        `)
        .eq("id", payment.booking_id)
        .single()

// Create success notification
      if (booking) {
        await supabase.from("notifications").insert([
          {
            user_id: booking.user_id,
            title: "Payment Successful! 🎉",
            message: `Your payment of KES ${amountPaid} has been received. Your RideDine booking is now confirmed for ${booking.trips?.routes?.name || "your trip"}.`,
            type: "payment_success",
            data: {
              payment_id: payment.id,
              booking_id: payment.booking_id,
              amount: amountPaid,
              receipt_number: mpesaReceiptNumber,
              trip_date: booking.trips?.scheduled_date,
              route_name: booking.trips?.routes?.name,
            },
          },
        ])
      }

console.log(`✅ Payment successful for booking ${payment.booking_id} - Amount: KES ${amountPaid}`)
    } else {
      // Payment failed
      updateData.status = "failed"
      await supabase.from("payments").update(updateData).eq("id", payment.id)

// Get booking details for failure notification
      const { data: booking } = await supabase.from("bookings").select("user_id").eq("id", payment.booking_id).single()

// Create failure notification
      if (booking) {
        await supabase.from("notifications").insert([
          {
            user_id: booking.user_id,
            title: "Payment Failed ❌",
            message: `Your payment could not be processed: ${resultDesc}. Please try again or contact support.`,
            type: "payment_failed",
            data: {
              payment_id: payment.id,
              booking_id: payment.booking_id,
              error_code: resultCode,
              error_message: resultDesc,
            },
          },
        ])
      }

console.log(`❌ Payment failed for booking ${payment.booking_id}: ${resultDesc}`)
    }

res.status(200).json({
      ResultCode: 0,
      ResultDesc: "Callback processed successfully",
    })
  } catch (error) {
    console.error("M-Pesa callback error:", error)
    res.status(200).json({
      ResultCode: 1,
      ResultDesc: "Callback processing failed",
    })
  }
})

// GET /api/payments/status/:payment_id - Check payment status
router.get("/status/:payment_id", validateUUID, async (req, res, next) => {
  try {
    const { data, error } = await supabase
      .from("payments")
      .select(`
        *,
        bookings (
          id,
          status,
          total_amount,
          party_size,
          users (
            first_name,
            last_name,
            phone
          ),
          trips (
            scheduled_date,
            scheduled_time,
            routes (
              name,
              pickup_locations!routes_pickup_location_id_fkey (name),
              dropoff_locations:pickup_locations!routes_dropoff_location_id_fkey (name)
            )
          )
        )
      `)
      .eq("id", req.params.payment_id)
      .single()

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(200).json({
      success: true,
      data,
    })
  } catch (error) {
    next(error)
  }
})

// GET /api/payments/booking/:booking_id - Get payments for booking
router.get("/booking/:booking_id", validateUUID, async (req, res, next) => {
  try {
    const { data, error } = await supabase
      .from("payments")
      .select("*")
      .eq("booking_id", req.params.booking_id)
      .order("created_at", { ascending: false })

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

const totalPaid = data
      .filter((p) => p.status === "completed")
      .reduce((sum, p) => sum + Number.parseFloat(p.amount_paid || 0), 0)

res.status(200).json({
      success: true,
      data: {
        payments: data,
        total_paid: totalPaid,
        payment_count: data.length,
        completed_payments: data.filter((p) => p.status === "completed").length,
      },
    })
  } catch (error) {
    next(error)
  }
})

// POST /api/payments/manual - Record manual payment
router.post("/manual", async (req, res, next) => {
  try {
    const { booking_id, payment_method, amount, reference_number, notes } = req.body

if (!booking_id || !payment_method || !amount) {
      return res.status(400).json({
        success: false,
        error: "Booking ID, payment method, and amount are required",
      })
    }

// Verify booking exists
    const { data: booking, error: bookingError } = await supabase
      .from("bookings")
      .select("id, status, total_amount, user_id")
      .eq("id", booking_id)
      .single()

if (bookingError || !booking) {
      return res.status(404).json({
        success: false,
        error: "Booking not found",
      })
    }

const paymentAmount = Number.parseFloat(amount)
    if (isNaN(paymentAmount) || paymentAmount <= 0) {
      return res.status(400).json({
        success: false,
        error: "Invalid payment amount",
      })
    }

const { data, error } = await supabase
      .from("payments")
      .insert([
        {
          booking_id,
          payment_method,
          amount: paymentAmount,
          amount_paid: paymentAmount,
          reference_number,
          notes,
          status: "completed",
          created_at: new Date().toISOString(),
        },
      ])
      .select()
      .single()

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

// Update booking status to confirmed if payment covers the total amount
    if (paymentAmount >= booking.total_amount) {
      await supabase
        .from("bookings")
        .update({
          status: "confirmed",
          confirmed_at: new Date().toISOString(),
        })
        .eq("id", booking_id)

// Create confirmation notification
      await supabase.from("notifications").insert([
        {
          user_id: booking.user_id,
          title: "Manual Payment Confirmed ✅",
          message: `Your ${payment_method} payment of KES ${paymentAmount} has been confirmed. Your booking is now active.`,
          type: "payment_success",
          data: {
            payment_id: data.id,
            booking_id,
            amount: paymentAmount,
            payment_method,
            reference_number,
          },
        },
      ])
    }

res.status(201).json({
      success: true,
      data,
      message: "Manual payment recorded successfully",
    })
  } catch (error) {
    next(error)
  }
})

// GET /api/payments - Get all payments with filtering
router.get("/", async (req, res, next) => {
  try {
    const { booking_id, status, payment_method, date_from, date_to, page = 1, limit = 20 } = req.query

const pageNum = Number.parseInt(page)
    const limitNum = Number.parseInt(limit)
    const offset = (pageNum - 1) * limitNum

let query = supabase
      .from("payments")
      .select(
        `
        *,
        bookings (
          id,
          status,
          total_amount,
          party_size,
          users (
            first_name,
            last_name,
            phone
          ),
          trips (
            scheduled_date,
            routes (name)
          )
        )
      `,
        { count: "exact" },
      )
      .order("created_at", { ascending: false })
      .range(offset, offset + limitNum - 1)

// Apply filters
    if (booking_id) {
      query = query.eq("booking_id", booking_id)
    }

if (status) {
      query = query.eq("status", status)
    }

if (payment_method) {
      query = query.eq("payment_method", payment_method)
    }

if (date_from) {
      query = query.gte("created_at", date_from)
    }

if (date_to) {
      query = query.lte("created_at", date_to)
    }

const { data, error, count } = await query

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

// Calculate summary statistics
    const totalAmount = data.reduce((sum, payment) => {
      return sum + (payment.status === "completed" ? Number.parseFloat(payment.amount_paid || 0) : 0)
    }, 0)

const statusCounts = data.reduce((acc, payment) => {
      acc[payment.status] = (acc[payment.status] || 0) + 1
      return acc
    }, {})

res.status(200).json({
      success: true,
      data,
      pagination: {
        page: pageNum,
        limit: limitNum,
        total: count || 0,
        totalPages: Math.ceil((count || 0) / limitNum),
      },
      summary: {
        total_amount: totalAmount,
        status_counts: statusCounts,
        payment_methods: [...new Set(data.map((p) => p.payment_method))],
      },
    })
  } catch (error) {
    next(error)
  }
})

export default router
[V0_FILE]javascript:file="server.js" isEdit="true"
import express from "express"
import cors from "cors"
import helmet from "helmet"
import rateLimit from "express-rate-limit"
import { config } from "dotenv"

// Import routes
import usersRouter from "./routes/users.js"
import pickupLocationsRouter from "./routes/pickupLocations.js"
import routesRouter from "./routes/routes.js"
import foodCategoriesRouter from "./routes/foodCategories.js"
import menuItemsRouter from "./routes/menuItems.js"
import tripsRouter from "./routes/trips.js"
import bookingsRouter from "./routes/bookings.js"
import paymentsRouter from "./routes/payments.js"
import notificationsRouter from "./routes/notifications.js"

// Import middleware
import { errorHandler } from "./middleware/errorHandler.js"
import { notFound } from "./middleware/notFound.js"

// Load environment variables
config()

const app = express()
const PORT = process.env.PORT || 3001

// Security middleware
app.use(helmet())

// Rate limiting
const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 100, // limit each IP to 100 requests per windowMs
  message: {
    error: "Too many requests from this IP, please try again later.",
  },
})

// Apply rate limiting to all requests
app.use(limiter)

// CORS configuration
const corsOptions = {
  origin: process.env.ALLOWED_ORIGINS?.split(",") || ["http://localhost:3000"],
  credentials: true,
  optionsSuccessStatus: 200,
}

app.use(cors(corsOptions))

// Body parsing middleware
app.use(express.json({ limit: "10mb" }))
app.use(express.urlencoded({ extended: true, limit: "10mb" }))

// Health check endpoint
app.get("/health", (req, res) => {
  res.status(200).json({
    success: true,
    message: "RideDine API is running",
    timestamp: new Date().toISOString(),
    environment: process.env.NODE_ENV || "development",
  })
})

// API routes
app.use("/api/users", usersRouter)
app.use("/api/pickup-locations", pickupLocationsRouter)
app.use("/api/routes", routesRouter)
app.use("/api/food-categories", foodCategoriesRouter)
app.use("/api/menu-items", menuItemsRouter)
app.use("/api/trips", tripsRouter)
app.use("/api/bookings", bookingsRouter)
app.use("/api/payments", paymentsRouter)
app.use("/api/notifications", notificationsRouter)

// API documentation endpoint
app.get("/api", (req, res) => {
  res.status(200).json({
    success: true,
    message: "RideDine API v1.0",
    documentation: {
      users: "/api/users",
      pickup_locations: "/api/pickup-locations",
      routes: "/api/routes",
      food_categories: "/api/food-categories",
      menu_items: "/api/menu-items",
      trips: "/api/trips",
      bookings: "/api/bookings",
      payments: "/api/payments",
      notifications: "/api/notifications",
    },
    features: {
      table_dot_menu: "/api/menu-items/table/:table_number",
      trip_availability: "/api/trips/available",
      mpesa_payments: "/api/payments/mpesa/stk-push",
      capacity_check: "/api/trips/:id/check-capacity",
    },
  })
})

// 404 handler
app.use(notFound)

// Error handling middleware
app.use(errorHandler)

// Start server
app.listen(PORT, () => {
  console.log(`🚀 RideDine API server running on port ${PORT}`)
  console.log(`📱 Environment: ${process.env.NODE_ENV || "development"}`)
  console.log(`🌐 Health check: http://localhost:${PORT}/health`)
  console.log(`📚 API docs: http://localhost:${PORT}/api`)
})

export default app123:Tbdc45,[V0_FILE]typescriptreact:file="app/auth/login/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
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 { Truck, Eye, EyeOff } from "lucide-react"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

export default function LoginPage() {
  const [showPassword, setShowPassword] = useState(false)
  const [userType, setUserType] = useState("customer")

return (
    <div className="min-h-screen bg-[#F7F9F9] flex items-center justify-center p-4">
      <Card className="w-full max-w-md">
        <CardHeader className="text-center">
          <div className="flex items-center justify-center gap-2 mb-4">
            <Truck className="h-8 w-8 text-[#27AE60]" />
            <span className="text-2xl font-bold text-[#2C3E50]">RideDine</span>
          </div>
          <CardTitle className="text-2xl text-[#2C3E50]">Welcome Back</CardTitle>
          <CardDescription className="text-[#7F8C8D]">Sign in to your account to continue</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="userType">Login as</Label>
            <Select value={userType} onValueChange={setUserType}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="customer">Customer</SelectItem>
                <SelectItem value="driver">Driver</SelectItem>
                <SelectItem value="admin">Admin</SelectItem>
              </SelectContent>
            </Select>
          </div>

<div className="space-y-2">
            <Label htmlFor="email">Email or Phone</Label>
            <Input
              id="email"
              type="text"
              placeholder="Enter your email or phone number"
              className="border-gray-300 focus:border-[#27AE60]"
            />
          </div>

<div className="space-y-2">
            <Label htmlFor="password">Password</Label>
            <div className="relative">
              <Input
                id="password"
                type={showPassword ? "text" : "password"}
                placeholder="Enter your password"
                className="border-gray-300 focus:border-[#27AE60] pr-10"
              />
              <Button
                type="button"
                variant="ghost"
                size="sm"
                className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                onClick={() => setShowPassword(!showPassword)}
              >
                {showPassword ? (
                  <EyeOff className="h-4 w-4 text-gray-400" />
                ) : (
                  <Eye className="h-4 w-4 text-gray-400" />
                )}
              </Button>
            </div>
          </div>

<div className="text-center space-y-2">
            <Link href="/auth/forgot-password" className="text-sm text-[#2980B9] hover:underline">
              Forgot your password?
            </Link>
            <p className="text-sm text-[#7F8C8D]">
              {"Don't have an account? "}
              <Link href="/auth/signup" className="text-[#2980B9] hover:underline">
                Sign up
              </Link>
            </p>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/auth/signup/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
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 { Truck, Eye, EyeOff } from "lucide-react"
import { Checkbox } from "@/components/ui/checkbox"

export default function SignUpPage() {
  const [showPassword, setShowPassword] = useState(false)
  const [showConfirmPassword, setShowConfirmPassword] = useState(false)

return (
    <div className="min-h-screen bg-[#F7F9F9] flex items-center justify-center p-4">
      <Card className="w-full max-w-md">
        <CardHeader className="text-center">
          <div className="flex items-center justify-center gap-2 mb-4">
            <Truck className="h-8 w-8 text-[#27AE60]" />
            <span className="text-2xl font-bold text-[#2C3E50]">RideDine</span>
          </div>
          <CardTitle className="text-2xl text-[#2C3E50]">Create Account</CardTitle>
          <CardDescription className="text-[#7F8C8D]">
            Join RideDine for the ultimate food truck experience
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="firstName">First Name</Label>
              <Input id="firstName" placeholder="John" className="border-gray-300 focus:border-[#27AE60]" />
            </div>
            <div className="space-y-2">
              <Label htmlFor="lastName">Last Name</Label>
              <Input id="lastName" placeholder="Doe" className="border-gray-300 focus:border-[#27AE60]" />
            </div>
          </div>

<div className="space-y-2">
            <Label htmlFor="email">Email</Label>
            <Input
              id="email"
              type="email"
              placeholder="john@example.com"
              className="border-gray-300 focus:border-[#27AE60]"
            />
          </div>

<div className="space-y-2">
            <Label htmlFor="phone">Phone Number</Label>
            <Input
              id="phone"
              type="tel"
              placeholder="+254 700 000 000"
              className="border-gray-300 focus:border-[#27AE60]"
            />
          </div>

<div className="space-y-2">
            <Label htmlFor="password">Password</Label>
            <div className="relative">
              <Input
                id="password"
                type={showPassword ? "text" : "password"}
                placeholder="Create a strong password"
                className="border-gray-300 focus:border-[#27AE60] pr-10"
              />
              <Button
                type="button"
                variant="ghost"
                size="sm"
                className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                onClick={() => setShowPassword(!showPassword)}
              >
                {showPassword ? (
                  <EyeOff className="h-4 w-4 text-gray-400" />
                ) : (
                  <Eye className="h-4 w-4 text-gray-400" />
                )}
              </Button>
            </div>
          </div>

<div className="space-y-2">
            <Label htmlFor="confirmPassword">Confirm Password</Label>
            <div className="relative">
              <Input
                id="confirmPassword"
                type={showConfirmPassword ? "text" : "password"}
                placeholder="Confirm your password"
                className="border-gray-300 focus:border-[#27AE60] pr-10"
              />
              <Button
                type="button"
                variant="ghost"
                size="sm"
                className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                onClick={() => setShowConfirmPassword(!showConfirmPassword)}
              >
                {showConfirmPassword ? (
                  <EyeOff className="h-4 w-4 text-gray-400" />
                ) : (
                  <Eye className="h-4 w-4 text-gray-400" />
                )}
              </Button>
            </div>
          </div>

<div className="flex items-center space-x-2">
            <Checkbox id="terms" />
            <Label htmlFor="terms" className="text-sm text-[#7F8C8D]">
              I agree to the{" "}
              <Link href="/terms" className="text-[#2980B9] hover:underline">
                Terms of Service
              </Link>{" "}
              and{" "}
              <Link href="/privacy" className="text-[#2980B9] hover:underline">
                Privacy Policy
              </Link>
            </Label>
          </div>

<Button className="w-full bg-[#27AE60] hover:bg-[#229954]" asChild>
            <Link href="/dashboard">Create Account</Link>
          </Button>

<p className="text-center text-sm text-[#7F8C8D]">
            Already have an account?{" "}
            <Link href="/auth/login" className="text-[#2980B9] hover:underline">
              Sign in
            </Link>
          </p>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Truck, MapPin, Clock, Calendar, QrCode, Bell, User, History, CreditCard } from "lucide-react"

export default function CustomerDashboard() {
  const [activeBookings] = useState([
    {
      id: "RD001",
      date: "2024-01-15",
      time: "12:30 PM",
      pickup: "City Center",
      dropoff: "Business District",
      status: "confirmed",
      qrCode: "QR123456",
      foodItems: ["Gourmet Burger", "Truffle Fries"],
    },
  ])

return (
    <div className="min-h-screen bg-[#F7F9F9]">
      {/* Header */}
      <header className="bg-white border-b border-gray-200">
        <div className="container mx-auto px-4 py-4 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Truck className="h-8 w-8 text-[#27AE60]" />
            <span className="text-2xl font-bold text-[#2C3E50]">RideDine</span>
          </div>
          <div className="flex items-center gap-4">
            <Button variant="ghost" size="icon">
              <Bell className="h-5 w-5" />
            </Button>
            <Button variant="ghost" size="icon">
              <User className="h-5 w-5" />
            </Button>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-8">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-[#2C3E50] mb-2">Welcome back, John!</h1>
          <p className="text-[#7F8C8D]">Ready for your next culinary journey?</p>
        </div>

{/* Quick Actions */}
        <div className="grid md:grid-cols-3 gap-6 mb-8">
          <Button asChild className="h-20 bg-[#27AE60] hover:bg-[#229954]">
            <Link href="/book" className="flex flex-col items-center gap-2">
              <Calendar className="h-6 w-6" />
              <span>Book New Ride</span>
            </Link>
          </Button>

<Button
            asChild
            variant="outline"
            className="h-20 border-[#2980B9] text-[#2980B9] hover:bg-[#2980B9] hover:text-white bg-transparent"
          >
            <Link href="/history" className="flex flex-col items-center gap-2">
              <History className="h-6 w-6" />
              <span>Booking History</span>
            </Link>
          </Button>

<Button asChild variant="outline" className="h-20 bg-transparent">
            <Link href="/payment" className="flex flex-col items-center gap-2">
              <CreditCard className="h-6 w-6" />
              <span>Payment Methods</span>
            </Link>
          </Button>
        </div>

{/* Active Bookings */}
        <div className="mb-8">
          <h2 className="text-2xl font-bold text-[#2C3E50] mb-4">Active Bookings</h2>
          {activeBookings.length > 0 ? (
            <div className="space-y-4">
              {activeBookings.map((booking) => (
                <Card key={booking.id} className="border-l-4 border-l-[#27AE60]">
                  <CardHeader>
                    <div className="flex items-center justify-between">
                      <CardTitle className="text-[#2C3E50]">Booking #{booking.id}</CardTitle>
                      <Badge className="bg-[#27AE60] text-white">{booking.status.toUpperCase()}</Badge>
                    </div>
                    <CardDescription className="text-[#7F8C8D]">
                      {booking.date} at {booking.time}
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="grid md:grid-cols-2 gap-4">
                      <div className="space-y-3">
                        <div className="flex items-center gap-2">
                          <MapPin className="h-4 w-4 text-[#27AE60]" />
                          <span className="text-sm">
                            <strong>Pickup:</strong> {booking.pickup}
                          </span>
                        </div>
                        <div className="flex items-center gap-2">
                          <MapPin className="h-4 w-4 text-[#2980B9]" />
                          <span className="text-sm">
                            <strong>Drop-off:</strong> {booking.dropoff}
                          </span>
                        </div>
                        <div className="flex items-center gap-2">
                          <Clock className="h-4 w-4 text-[#7F8C8D]" />
                          <span className="text-sm">
                            <strong>Food:</strong> {booking.foodItems.join(", ")}
                          </span>
                        </div>
                      </div>
                      <div className="flex flex-col items-center justify-center p-4 bg-[#F7F9F9] rounded-lg">
                        <QrCode className="h-16 w-16 text-[#2C3E50] mb-2" />
                        <p className="text-sm text-[#7F8C8D] text-center">Show this QR code to the driver</p>
                        <p className="text-xs text-[#7F8C8D] mt-1">Code: {booking.qrCode}</p>
                      </div>
                    </div>
                    <div className="flex gap-2 mt-4">
                      <Button size="sm" variant="outline">
                        Track Ride
                      </Button>
                      <Button
                        size="sm"
                        variant="outline"
                        className="text-red-600 border-red-600 hover:bg-red-50 bg-transparent"
                      >
                        View Policy
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          ) : (
            <Card>
              <CardContent className="text-center py-12">
                <Truck className="h-16 w-16 text-[#7F8C8D] mx-auto mb-4" />
                <h3 className="text-lg font-semibold text-[#2C3E50] mb-2">No Active Bookings</h3>
                <p className="text-[#7F8C8D] mb-4">Book your first ride to get started!</p>
                <Button asChild className="bg-[#27AE60] hover:bg-[#229954]">
                  <Link href="/book">Book Now</Link>
                </Button>
              </CardContent>
            </Card>
          )}
        </div>

{/* Recent Activity */}
        <div>
          <h2 className="text-2xl font-bold text-[#2C3E50] mb-4">Recent Activity</h2>
          <Card>
            <CardContent className="py-6">
              <div className="space-y-4">
                <div className="flex items-center gap-3 pb-3 border-b border-gray-100">
                  <div className="w-2 h-2 bg-[#27AE60] rounded-full"></div>
                  <div className="flex-1">
                    <p className="text-sm font-medium text-[#2C3E50]">Booking confirmed</p>
                    <p className="text-xs text-[#7F8C8D]">Your ride for Jan 15 has been confirmed</p>
                  </div>
                  <span className="text-xs text-[#7F8C8D]">2 hours ago</span>
                </div>
                <div className="flex items-center gap-3 pb-3 border-b border-gray-100">
                  <div className="w-2 h-2 bg-[#2980B9] rounded-full"></div>
                  <div className="flex-1">
                    <p className="text-sm font-medium text-[#2C3E50]">Payment processed</p>
                    <p className="text-xs text-[#7F8C8D]">Payment of KSH 1,500 processed successfully</p>
                  </div>
                  <span className="text-xs text-[#7F8C8D]">3 hours ago</span>
                </div>
                <div className="flex items-center gap-3">
                  <div className="w-2 h-2 bg-[#7F8C8D] rounded-full"></div>
                  <div className="flex-1">
                    <p className="text-sm font-medium text-[#2C3E50]">Account created</p>
                    <p className="text-xs text-[#7F8C8D]">Welcome to RideDine!</p>
                  </div>
                  <span className="text-xs text-[#7F8C8D]">1 day ago</span>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/book/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Calendar } from "@/components/ui/calendar"
import { Separator } from "@/components/ui/separator"
import { Checkbox } from "@/components/ui/checkbox"
import { ArrowLeft, MapPin, Clock, Users, AlertTriangle } from "lucide-react"

export default function BookRidePage() {
  const [selectedDate, setSelectedDate] = useState<Date>()
  const [selectedPickup, setSelectedPickup] = useState("")
  const [selectedDropoff, setSelectedDropoff] = useState("")
  const [selectedTime, setSelectedTime] = useState("")
  const [selectedFoodItems, setSelectedFoodItems] = useState<string[]>([])

const pickupPoints = ["City Center", "University Campus", "Shopping Mall", "Business District", "Residential Area A"]

const timeSlots = [
    { time: "08:00 AM", available: 12 },
    { time: "12:30 PM", available: 8 },
    { time: "06:00 PM", available: 15 },
    { time: "08:30 PM", available: 5 },
  ]

const menuItems = [
    { id: "burger", name: "Gourmet Burger", price: 800, description: "Beef patty with premium toppings" },
    { id: "fries", name: "Truffle Fries", price: 400, description: "Hand-cut fries with truffle oil" },
    { id: "wrap", name: "Chicken Wrap", price: 600, description: "Grilled chicken with fresh vegetables" },
    { id: "salad", name: "Caesar Salad", price: 500, description: "Fresh romaine with parmesan" },
    { id: "drink", name: "Fresh Juice", price: 200, description: "Seasonal fruit juice" },
    { id: "dessert", name: "Chocolate Cake", price: 350, description: "Rich chocolate layer cake" },
  ]

const toggleFoodItem = (itemId: string) => {
    setSelectedFoodItems((prev) => (prev.includes(itemId) ? prev.filter((id) => id !== itemId) : [...prev, itemId]))
  }

const calculateTotal = () => {
    const ridePrice = 1000 // Base ride price
    const foodTotal = selectedFoodItems.reduce((total, itemId) => {
      const item = menuItems.find((item) => item.id === itemId)
      return total + (item?.price || 0)
    }, 0)
    return ridePrice + foodTotal
  }

return (
    <div className="min-h-screen bg-[#F7F9F9]">
      {/* Header */}
      <header className="bg-white border-b border-gray-200">
        <div className="container mx-auto px-4 py-4 flex items-center gap-4">
          <Button variant="ghost" size="icon" asChild>
            <Link href="/dashboard">
              <ArrowLeft className="h-5 w-5" />
            </Link>
          </Button>
          <h1 className="text-2xl font-bold text-[#2C3E50]">Book Your Ride</h1>
        </div>
      </header>

<div className="container mx-auto px-4 py-8">
        <div className="grid lg:grid-cols-3 gap-8">
          {/* Booking Form */}
          <div className="lg:col-span-2 space-y-6">
            {/* Step 1: Route Selection */}
            <Card>
              <CardHeader>
                <CardTitle className="text-[#2C3E50]">1. Select Your Route</CardTitle>
                <CardDescription className="text-[#7F8C8D]">Choose your pickup and drop-off points</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-[#2C3E50]">Pickup Point</label>
                    <Select value={selectedPickup} onValueChange={setSelectedPickup}>
                      <SelectTrigger>
                        <SelectValue placeholder="Select pickup point" />
                      </SelectTrigger>
                      <SelectContent>
                        {pickupPoints.map((point) => (
                          <SelectItem key={point} value={point}>
                            <div className="flex items-center gap-2">
                              <MapPin className="h-4 w-4 text-[#27AE60]" />
                              {point}
                            </div>
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <label className="text-sm font-medium text-[#2C3E50]">Drop-off Point</label>
                    <Select value={selectedDropoff} onValueChange={setSelectedDropoff}>
                      <SelectTrigger>
                        <SelectValue placeholder="Select drop-off point" />
                      </SelectTrigger>
                      <SelectContent>
                        {pickupPoints.map((point) => (
                          <SelectItem key={point} value={point}>
                            <div className="flex items-center gap-2">
                              <MapPin className="h-4 w-4 text-[#2980B9]" />
                              {point}
                            </div>
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Step 2: Date & Time Selection */}
            <Card>
              <CardHeader>
                <CardTitle className="text-[#2C3E50]">2. Select Date & Time</CardTitle>
                <CardDescription className="text-[#7F8C8D]">Booking available up to 7 days in advance</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="grid md:grid-cols-2 gap-6">
                  <div>
                    <Calendar
                      mode="single"
                      selected={selectedDate}
                      onSelect={setSelectedDate}
                      disabled={(date) => date < new Date() || date > new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)}
                      className="rounded-md border"
                    />
                  </div>

<div className="space-y-3">
                    <h4 className="font-medium text-[#2C3E50]">Available Time Slots</h4>
                    {timeSlots.map((slot) => (
                      <div
                        key={slot.time}
                        className={`p-3 border rounded-lg cursor-pointer transition-colors ${
                          selectedTime === slot.time
                            ? "border-[#27AE60] bg-green-50"
                            : "border-gray-200 hover:border-[#27AE60]"
                        }`}
                        onClick={() => setSelectedTime(slot.time)}
                      >
                        <div className="flex items-center justify-between">
                          <div className="flex items-center gap-2">
                            <Clock className="h-4 w-4 text-[#7F8C8D]" />
                            <span className="font-medium text-[#2C3E50]">{slot.time}</span>
                          </div>
                          <div className="flex items-center gap-2">
                            <Users className="h-4 w-4 text-[#7F8C8D]" />
                            <span className="text-sm text-[#7F8C8D]">{slot.available}/15 available</span>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Step 3: Food Selection */}
            <Card>
              <CardHeader>
                <CardTitle className="text-[#2C3E50]">3. Pre-order Your Food</CardTitle>
                <CardDescription className="text-[#7F8C8D]">Select items to enjoy during your ride</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="grid md:grid-cols-2 gap-4">
                  {menuItems.map((item) => (
                    <div
                      key={item.id}
                      className={`p-4 border rounded-lg cursor-pointer transition-colors ${
                        selectedFoodItems.includes(item.id)
                          ? "border-[#27AE60] bg-green-50"
                          : "border-gray-200 hover:border-[#27AE60]"
                      }`}
                      onClick={() => toggleFoodItem(item.id)}
                    >
                      <div className="flex items-start justify-between">
                        <div className="flex-1">
                          <div className="flex items-center gap-2 mb-1">
                            <Checkbox
                              checked={selectedFoodItems.includes(item.id)}
                              onChange={() => toggleFoodItem(item.id)}
                            />
                            <h4 className="font-medium text-[#2C3E50]">{item.name}</h4>
                          </div>
                          <p className="text-sm text-[#7F8C8D] mb-2">{item.description}</p>
                        </div>
                        <span className="font-bold text-[#27AE60]">KSH {item.price}</span>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>

{/* Booking Summary */}
          <div className="space-y-6">
            <Card className="sticky top-4">
              <CardHeader>
                <CardTitle className="text-[#2C3E50]">Booking Summary</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                {selectedPickup && selectedDropoff && (
                  <div className="space-y-2">
                    <div className="flex items-center gap-2 text-sm">
                      <MapPin className="h-4 w-4 text-[#27AE60]" />
                      <span className="text-[#7F8C8D]">From:</span>
                      <span className="font-medium text-[#2C3E50]">{selectedPickup}</span>
                    </div>
                    <div className="flex items-center gap-2 text-sm">
                      <MapPin className="h-4 w-4 text-[#2980B9]" />
                      <span className="text-[#7F8C8D]">To:</span>
                      <span className="font-medium text-[#2C3E50]">{selectedDropoff}</span>
                    </div>
                  </div>
                )}

{selectedDate && selectedTime && (
                  <div className="flex items-center gap-2 text-sm">
                    <Clock className="h-4 w-4 text-[#7F8C8D]" />
                    <span className="text-[#7F8C8D]">When:</span>
                    <span className="font-medium text-[#2C3E50]">
                      {selectedDate.toDateString()} at {selectedTime}
                    </span>
                  </div>
                )}

{selectedFoodItems.length > 0 && (
                    <>
                      <div className="text-sm font-medium text-[#2C3E50]">Food Items:</div>
                      {selectedFoodItems.map((itemId) => {
                        const item = menuItems.find((item) => item.id === itemId)
                        return item ? (
                          <div key={itemId} className="flex justify-between text-sm">
                            <span className="text-[#7F8C8D]">{item.name}</span>
                            <span className="text-[#2C3E50]">KSH {item.price}</span>
                          </div>
                        ) : null
                      })}
                    </>
                  )}
                </div>

<div className="flex justify-between font-bold">
                  <span className="text-[#2C3E50]">Total</span>
                  <span className="text-[#27AE60]">KSH {calculateTotal()}</span>
                </div>

{/* No Refund Policy */}
                <div className="bg-red-50 border border-red-200 rounded-lg p-3">
                  <div className="flex items-start gap-2">
                    <AlertTriangle className="h-4 w-4 text-red-600 mt-0.5" />
                    <div className="text-sm">
                      <p className="font-medium text-red-800 mb-1">No Refund Policy</p>
                      <p className="text-red-700">
                        All bookings are final. No cancellations or refunds are allowed once booking is confirmed.
                      </p>
                    </div>
                  </div>
                </div>

<Button
                  className="w-full bg-[#27AE60] hover:bg-[#229954]"
                  disabled={!selectedPickup || !selectedDropoff || !selectedDate || !selectedTime}
                  asChild
                >
                  <Link href="/payment">Proceed to Payment</Link>
                </Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/page.tsx" isMerged="true"
"use client"

export default function AdminDashboard() {
  const [stats] = useState({
    totalRevenue: 125000,
    totalBookings: 342,
    activeDrivers: 8,
    totalStops: 12,
  })

const revenueData = [
    { month: "Jan", revenue: 15000 },
    { month: "Feb", revenue: 18000 },
    { month: "Mar", revenue: 22000 },
    { month: "Apr", revenue: 19000 },
    { month: "May", revenue: 25000 },
    { month: "Jun", revenue: 26000 },
  ]

const occupancyData = [
    { name: "Full (15/15)", value: 45, color: "#27AE60" },
    { name: "High (10-14)", value: 30, color: "#2980B9" },
    { name: "Medium (5-9)", value: 20, color: "#F39C12" },
    { name: "Low (1-4)", value: 5, color: "#E74C3C" },
  ]

const [stops] = useState([
    { id: 1, name: "City Center", address: "Main Street, Downtown", status: "active" },
    { id: 2, name: "University Campus", address: "University Ave", status: "active" },
    { id: 3, name: "Shopping Mall", address: "Mall Road", status: "active" },
    { id: 4, name: "Business District", address: "Corporate Plaza", status: "maintenance" },
  ])

const [menuItems] = useState([
    { id: 1, name: "Gourmet Burger", price: 800, category: "Main", status: "available" },
    { id: 2, name: "Truffle Fries", price: 400, category: "Sides", status: "available" },
    { id: 3, name: "Chicken Wrap", price: 600, category: "Main", status: "available" },
    { id: 4, name: "Caesar Salad", price: 500, category: "Salads", status: "out-of-stock" },
  ])

const [recentBookings] = useState([
    {
      id: "RD001",
      customer: "John Doe",
      route: "City Center → Business District",
      date: "2024-01-15",
      amount: 1500,
      status: "confirmed",
    },
    {
      id: "RD002",
      customer: "Jane Smith",
      route: "University → Mall",
      date: "2024-01-15",
      amount: 1200,
      status: "completed",
    },
    {
      id: "RD003",
      customer: "Mike Johnson",
      route: "Mall → Residential",
      date: "2024-01-14",
      amount: 1800,
      status: "confirmed",
    },
  ])

return (
    <div className="min-h-screen bg-[#F7F9F9]">
      {/* Header */}
      <header className="bg-white border-b border-gray-200">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Truck className="h-8 w-8 text-[#27AE60]" />
              <div>
                <h1 className="text-2xl font-bold text-[#2C3E50]">Admin Dashboard</h1>
                <p className="text-sm text-[#7F8C8D]">RideDine Management Portal</p>
              </div>
            </div>
            <Button className="bg-[#27AE60] hover:bg-[#229954]">
              <Plus className="h-4 w-4 mr-2" />
              Send Announcement
            </Button>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-8">
        {/* Stats Overview */}
        <div className="grid md:grid-cols-4 gap-6 mb-8">
          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-[#7F8C8D]">Total Revenue</p>
                  <p className="text-2xl font-bold text-[#2C3E50]">KSH {stats.totalRevenue.toLocaleString()}</p>
                </div>
                <DollarSign className="h-8 w-8 text-[#27AE60]" />
              </div>
            </CardContent>
          </Card>

<Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-[#7F8C8D]">Total Bookings</p>
                  <p className="text-2xl font-bold text-[#2C3E50]">{stats.totalBookings}</p>
                </div>
                <Calendar className="h-8 w-8 text-[#2980B9]" />
              </div>
            </CardContent>
          </Card>

<Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-[#7F8C8D]">Active Drivers</p>
                  <p className="text-2xl font-bold text-[#2C3E50]">{stats.activeDrivers}</p>
                </div>
                <Users className="h-8 w-8 text-[#27AE60]" />
              </div>
            </CardContent>
          </Card>

<Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-[#7F8C8D]">Total Stops</p>
                  <p className="text-2xl font-bold text-[#2C3E50]">{stats.totalStops}</p>
                </div>
                <MapPin className="h-8 w-8 text-[#2980B9]" />
              </div>
            </CardContent>
          </Card>
        </div>

{/* Analytics Charts */}
        <div className="grid lg:grid-cols-2 gap-6 mb-8">
          <Card>
            <CardHeader>
              <CardTitle className="text-[#2C3E50]">Revenue Trend</CardTitle>
              <CardDescription className="text-[#7F8C8D]">Monthly revenue over the last 6 months</CardDescription>
            </CardHeader>
            <CardContent>
              <ResponsiveContainer width="100%" height={300}>
                <BarChart data={revenueData}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="month" />
                  <YAxis />
                  <Tooltip formatter={(value) => [`KSH ${value.toLocaleString()}`, "Revenue"]} />
                  <Bar dataKey="revenue" fill="#27AE60" />
                </BarChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle className="text-[#2C3E50]">Ride Occupancy</CardTitle>
              <CardDescription className="text-[#7F8C8D]">Distribution of ride occupancy rates</CardDescription>
            </CardHeader>
            <CardContent>
              <ResponsiveContainer width="100%" height={300}>
                <PieChart>
                  <Pie
                    data={occupancyData}
                    cx="50%"
                    cy="50%"
                    outerRadius={100}
                    dataKey="value"
                    label={({ name, value }) => `${name}: ${value}%`}
                  >
                    {occupancyData.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={entry.color} />
                    ))}
                  </Pie>
                  <Tooltip />
                </PieChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>
        </div>

{/* Management Tabs */}
        <Tabs defaultValue="bookings" className="space-y-6">
          <TabsList className="grid w-full grid-cols-4">
            <TabsTrigger value="bookings">Bookings</TabsTrigger>
            <TabsTrigger value="stops">Stops</TabsTrigger>
            <TabsTrigger value="menu">Menu</TabsTrigger>
            <TabsTrigger value="users">Users</TabsTrigger>
          </TabsList>

<TabsContent value="bookings">
            <Card>
              <CardHeader>
                <CardTitle className="text-[#2C3E50]">Recent Bookings</CardTitle>
                <CardDescription className="text-[#7F8C8D]">Latest customer reservations</CardDescription>
              </CardHeader>
              <CardContent>
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Booking ID</TableHead>
                      <TableHead>Customer</TableHead>
                      <TableHead>Route</TableHead>
                      <TableHead>Date</TableHead>
                      <TableHead>Amount</TableHead>
                      <TableHead>Status</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {recentBookings.map((booking) => (
                      <TableRow key={booking.id}>
                        <TableCell className="font-medium">{booking.id}</TableCell>
                        <TableCell>{booking.customer}</TableCell>
                        <TableCell>{booking.route}</TableCell>
                        <TableCell>{booking.date}</TableCell>
                        <TableCell>KSH {booking.amount}</TableCell>
                        <TableCell>
                          <Badge
                            className={
                              booking.status === "confirmed"
                                ? "bg-[#27AE60] text-white"
                                : booking.status === "completed"
                                  ? "bg-[#2980B9] text-white"
                                  : "bg-gray-500 text-white"
                            }
                          >
                            {booking.status.toUpperCase()}
                          </Badge>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="stops">
            <Card>
              <CardHeader>
                <div className="flex items-center justify-between">
                  <div>
                    <CardTitle className="text-[#2C3E50]">Pickup Stops</CardTitle>
                    <CardDescription className="text-[#7F8C8D]">
                      Manage fixed pickup and drop-off points
                    </CardDescription>
                  </div>
                  <Button className="bg-[#27AE60] hover:bg-[#229954]">
                    <Plus className="h-4 w-4 mr-2" />
                    Add Stop
                  </Button>
                </div>
              </CardHeader>
              <CardContent>
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Name</TableHead>
                      <TableHead>Address</TableHead>
                      <TableHead>Status</TableHead>
                      <TableHead>Actions</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {stops.map((stop) => (
                      <TableRow key={stop.id}>
                        <TableCell className="font-medium">{stop.name}</TableCell>
                        <TableCell>{stop.address}</TableCell>
                        <TableCell>
                          <Badge
                            className={
                              stop.status === "active" ? "bg-[#27AE60] text-white" : "bg-orange-500 text-white"
                            }
                          >
                            {stop.status.toUpperCase()}
                          </Badge>
                        </TableCell>
                        <TableCell>
                          <div className="flex gap-2">
                            <Button size="sm" variant="outline">
                              <Edit className="h-4 w-4" />
                            </Button>
                            <Button
                              size="sm"
                              variant="outline"
                              className="text-red-600 border-red-600 hover:bg-red-50 bg-transparent"
                            >
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="menu">
            <Card>
              <CardHeader>
                <div className="flex items-center justify-between">
                  <div>
                    <CardTitle className="text-[#2C3E50]">Menu Management</CardTitle>
                    <CardDescription className="text-[#7F8C8D]">Add, edit, and manage food items</CardDescription>
                  </div>
                  <Button className="bg-[#27AE60] hover:bg-[#229954]">
                    <Plus className="h-4 w-4 mr-2" />
                    Add Item
                  </Button>
                </div>
              </CardHeader>
              <CardContent>
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Name</TableHead>
                      <TableHead>Category</TableHead>
                      <TableHead>Price</TableHead>
                      <TableHead>Status</TableHead>
                      <TableHead>Actions</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {menuItems.map((item) => (
                      <TableRow key={item.id}>
                        <TableCell className="font-medium">{item.name}</TableCell>
                        <TableCell>{item.category}</TableCell>
                        <TableCell>KSH {item.price}</TableCell>
                        <TableCell>
                          <Badge
                            className={
                              item.status === "available" ? "bg-[#27AE60] text-white" : "bg-red-500 text-white"
                            }
                          >
                            {item.status.replace("-", " ").toUpperCase()}
                          </Badge>
                        </TableCell>
                        <TableCell>
                          <div className="flex gap-2">
                            <Button size="sm" variant="outline">
                              <Edit className="h-4 w-4" />
                            </Button>
                            <Button
                              size="sm"
                              variant="outline"
                              className="text-red-600 border-red-600 hover:bg-red-50 bg-transparent"
                            >
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="users">
            <Card>
              <CardHeader>
                <CardTitle className="text-[#2C3E50]">User Management</CardTitle>
                <CardDescription className="text-[#7F8C8D]">Manage customers and drivers</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="text-center py-12">
                  <Users className="h-16 w-16 text-[#7F8C8D] mx-auto mb-4" />
                  <h3 className="text-lg font-semibold text-[#2C3E50] mb-2">User Management</h3>
                  <p className="text-[#7F8C8D] mb-4">View and manage all registered users</p>
                  <Button className="bg-[#27AE60] hover:bg-[#229954]">View All Users</Button>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/database-setup.sql" isMerged="true"
-- Create database tables for RideDine app

-- Users table
CREATE TABLE users (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    email VARCHAR(255) UNIQUE NOT NULL,
    phone VARCHAR(20) UNIQUE NOT NULL,
    first_name VARCHAR(100) NOT NULL,
    last_name VARCHAR(100) NOT NULL,
    password_hash VARCHAR(255) NOT NULL,
    role VARCHAR(20) NOT NULL DEFAULT 'customer', -- customer, driver, admin
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Stops table
CREATE TABLE stops (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    name VARCHAR(100) NOT NULL,
    address TEXT NOT NULL,
    latitude DECIMAL(10, 8),
    longitude DECIMAL(11, 8),
    status VARCHAR(20) DEFAULT 'active', -- active, maintenance, inactive
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Routes table
CREATE TABLE routes (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    name VARCHAR(100) NOT NULL,
    pickup_stop_id UUID REFERENCES stops(id),
    dropoff_stop_id UUID REFERENCES stops(id),
    duration_minutes INTEGER NOT NULL,
    base_price DECIMAL(10, 2) NOT NULL,
    status VARCHAR(20) DEFAULT 'active',
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Menu items table
CREATE TABLE menu_items (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    name VARCHAR(100) NOT NULL,
    description TEXT,
    price DECIMAL(10, 2) NOT NULL,
    category VARCHAR(50) NOT NULL,
    status VARCHAR(20) DEFAULT 'available', -- available, out-of-stock, discontinued
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Schedules table
CREATE TABLE schedules (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    route_id UUID REFERENCES routes(id),
    driver_id UUID REFERENCES users(id),
    departure_time TIME NOT NULL,
    days_of_week INTEGER[] NOT NULL, -- Array of day numbers (0=Sunday, 1=Monday, etc.)
    max_passengers INTEGER DEFAULT 15,
    status VARCHAR(20) DEFAULT 'active',
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Bookings table
CREATE TABLE bookings (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    booking_number VARCHAR(20) UNIQUE NOT NULL,
    customer_id UUID REFERENCES users(id),
    schedule_id UUID REFERENCES schedules(id),
    booking_date DATE NOT NULL,
    pickup_stop_id UUID REFERENCES stops(id),
    dropoff_stop_id UUID REFERENCES stops(id),
    total_amount DECIMAL(10, 2) NOT NULL,
    payment_status VARCHAR(20) DEFAULT 'pending', -- pending, paid, failed, refunded
    booking_status VARCHAR(20) DEFAULT 'confirmed', -- confirmed, completed, cancelled
    qr_code VARCHAR(50) UNIQUE NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Booking food items table (many-to-many relationship)
CREATE TABLE booking_food_items (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    booking_id UUID REFERENCES bookings(id),
    menu_item_id UUID REFERENCES menu_items(id),
    quantity INTEGER DEFAULT 1,
    unit_price DECIMAL(10, 2) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Payments table
CREATE TABLE payments (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    booking_id UUID REFERENCES bookings(id),
    amount DECIMAL(10, 2) NOT NULL,
    payment_method VARCHAR(20) NOT NULL, -- mpesa, card, cash
    payment_reference VARCHAR(100),
    status VARCHAR(20) DEFAULT 'pending', -- pending, completed, failed
    processed_at TIMESTAMP,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Notifications table
CREATE TABLE notifications (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id UUID REFERENCES users(id),
    title VARCHAR(200) NOT NULL,
    message TEXT NOT NULL,
    type VARCHAR(20) NOT NULL, -- booking_confirmation, eta_update, delay_alert, announcement
    read_at TIMESTAMP,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Create indexes for better performance
CREATE INDEX idx_users_email ON users(email);
CREATE INDEX idx_users_phone ON users(phone);
CREATE INDEX idx_users_role ON users(role);
CREATE INDEX idx_bookings_customer_id ON bookings(customer_id);
CREATE INDEX idx_bookings_schedule_id ON bookings(schedule_id);
CREATE INDEX idx_bookings_date ON bookings(booking_date);
CREATE INDEX idx_bookings_status ON bookings(booking_status);
CREATE INDEX idx_notifications_user_id ON notifications(user_id);
CREATE INDEX idx_notifications_read ON notifications(read_at);
[V0_FILE]sql:file="scripts/seed-data.sql" isMerged="true"
-- Seed data for RideDine app

-- Insert sample stops
INSERT INTO stops (name, address, latitude, longitude, status) VALUES
('City Center', 'Main Street, Downtown Nairobi', -1.2864, 36.8172, 'active'),
('University Campus', 'University Way, Nairobi', -1.2966, 36.8083, 'active'),
('Shopping Mall', 'Westlands Mall, Westlands', -1.2630, 36.8063, 'active'),
('Business District', 'Upper Hill, Nairobi', -1.2921, 36.8219, 'active'),
('Residential Area A', 'Karen, Nairobi', -1.3197, 36.7073, 'active');

-- Insert sample menu items
INSERT INTO menu_items (name, description, price, category, status) VALUES
('Gourmet Burger', 'Premium beef patty with artisan toppings', 800.00, 'Main Course', 'available'),
('Truffle Fries', 'Hand-cut fries with truffle oil and parmesan', 400.00, 'Sides', 'available'),
('Chicken Wrap', 'Grilled chicken with fresh vegetables in tortilla', 600.00, 'Main Course', 'available'),
('Caesar Salad', 'Fresh romaine lettuce with caesar dressing', 500.00, 'Salads', 'available'),
('Fresh Juice', 'Seasonal fruit juice blend', 200.00, 'Beverages', 'available'),
('Chocolate Cake', 'Rich chocolate layer cake with ganache', 350.00, 'Desserts', 'available'),
('Fish Tacos', 'Grilled fish with mango salsa', 700.00, 'Main Course', 'available'),
('Sweet Potato Fries', 'Crispy sweet potato fries with aioli', 450.00, 'Sides', 'available');

-- Insert sample users
INSERT INTO users (email, phone, first_name, last_name, password_hash, role) VALUES
('admin@ridedine.com', '+254700000001', 'Admin', 'User', '$2b$10$example_hash_1', 'admin'),
('driver1@ridedine.com', '+254700000002', 'James', 'Mwangi', '$2b$10$example_hash_2', 'driver'),
('driver2@ridedine.com', '+254700000003', 'Mary', 'Wanjiku', '$2b$10$example_hash_3', 'driver'),
('john.doe@email.com', '+254700000004', 'John', 'Doe', '$2b$10$example_hash_4', 'customer'),
('jane.smith@email.com', '+254700000005', 'Jane', 'Smith', '$2b$10$example_hash_5', 'customer');

-- Insert sample routes
INSERT INTO routes (name, pickup_stop_id, dropoff_stop_id, duration_minutes, base_price) 
SELECT 
    'City Center to Business District',
    (SELECT id FROM stops WHERE name = 'City Center'),
    (SELECT id FROM stops WHERE name = 'Business District'),
    30,
    1000.00;

INSERT INTO routes (name, pickup_stop_id, dropoff_stop_id, duration_minutes, base_price) 
SELECT 
    'University to Shopping Mall',
    (SELECT id FROM stops WHERE name = 'University Campus'),
    (SELECT id FROM stops WHERE name = 'Shopping Mall'),
    25,
    800.00;

-- Insert sample schedules
INSERT INTO schedules (route_id, driver_id, departure_time, days_of_week, max_passengers)
SELECT 
    r.id,
    u.id,
    '08:00:00',
    ARRAY[1,2,3,4,5], -- Monday to Friday
    15
FROM routes r, users u 
WHERE r.name = 'City Center to Business District' 
AND u.email = 'driver1@ridedine.com';

INSERT INTO schedules (route_id, driver_id, departure_time, days_of_week, max_passengers)
SELECT 
    r.id,
    u.id,
    '12:30:00',
    ARRAY[1,2,3,4,5], -- Monday to Friday
    15
FROM routes r, users u 
WHERE r.name = 'City Center to Business District' 
AND u.email = 'driver1@ridedine.com';

INSERT INTO schedules (route_id, driver_id, departure_time, days_of_week, max_passengers)
SELECT 
    r.id,
    u.id,
    '18:00:00',
    ARRAY[1,2,3,4,5,6], -- Monday to Saturday
    15
FROM routes r, users u 
WHERE r.name = 'University to Shopping Mall' 
AND u.email = 'driver2@ridedine.com';
[V0_FILE]typescriptreact:file="app/payment/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
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 { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Separator } from "@/components/ui/separator"
import { ArrowLeft, CreditCard, Smartphone, Shield, AlertTriangle } from "lucide-react"

export default function PaymentPage() {
  const [paymentMethod, setPaymentMethod] = useState("mpesa")
  const [isProcessing, setIsProcessing] = useState(false)

const bookingDetails = {
    bookingId: "RD001",
    route: "City Center → Business District",
    date: "January 15, 2024",
    time: "12:30 PM",
    ridePrice: 1000,
    foodItems: [
      { name: "Gourmet Burger", price: 800 },
      { name: "Truffle Fries", price: 400 },
    ],
    total: 2200,
  }

const handlePayment = async () => {
    setIsProcessing(true)
    // Simulate payment processing
    setTimeout(() => {
      setIsProcessing(false)
      // Redirect to success page
      window.location.href = "/booking-success"
    }, 3000)
  }

return (
    <div className="min-h-screen bg-[#F7F9F9]">
      {/* Header */}
      <header className="bg-white border-b border-gray-200">
        <div className="container mx-auto px-4 py-4 flex items-center gap-4">
          <Button variant="ghost" size="icon" asChild>
            <Link href="/book">
              <ArrowLeft className="h-5 w-5" />
            </Link>
          </Button>
          <h1 className="text-2xl font-bold text-[#2C3E50]">Complete Payment</h1>
        </div>
      </header>

<div className="container mx-auto px-4 py-8">
        <div className="grid lg:grid-cols-3 gap-8">
          {/* Payment Form */}
          <div className="lg:col-span-2 space-y-6">
            {/* Payment Method Selection */}
            <Card>
              <CardHeader>
                <CardTitle className="text-[#2C3E50]">Payment Method</CardTitle>
                <CardDescription className="text-[#7F8C8D]">Choose your preferred payment option</CardDescription>
              </CardHeader>
              <CardContent>
                <RadioGroup value={paymentMethod} onValueChange={setPaymentMethod} className="space-y-4">
                  <div className="flex items-center space-x-3 p-4 border rounded-lg hover:bg-gray-50">
                    <RadioGroupItem value="mpesa" id="mpesa" />
                    <Label htmlFor="mpesa" className="flex items-center gap-3 cursor-pointer flex-1">
                      <Smartphone className="h-6 w-6 text-[#27AE60]" />
                      <div>
                        <div className="font-medium text-[#2C3E50]">M-PESA</div>
                        <div className="text-sm text-[#7F8C8D]">Pay with your mobile money</div>
                      </div>
                    </Label>
                  </div>

<div className="flex items-center space-x-3 p-4 border rounded-lg hover:bg-gray-50">
                    <RadioGroupItem value="card" id="card" />
                    <Label htmlFor="card" className="flex items-center gap-3 cursor-pointer flex-1">
                      <CreditCard className="h-6 w-6 text-[#2980B9]" />
                      <div>
                        <div className="font-medium text-[#2C3E50]">Credit/Debit Card</div>
                        <div className="text-sm text-[#7F8C8D]">Visa, Mastercard accepted</div>
                      </div>
                    </Label>
                  </div>
                </RadioGroup>
              </CardContent>
            </Card>

{/* Payment Details */}
            <Card>
              <CardHeader>
                <CardTitle className="text-[#2C3E50]">Payment Details</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                {paymentMethod === "mpesa" ? (
                  <div className="space-y-4">
                    <div className="space-y-2">
                      <Label htmlFor="phone">M-PESA Phone Number</Label>
                      <Input
                        id="phone"
                        type="tel"
                        placeholder="+254 700 000 000"
                        className="border-gray-300 focus:border-[#27AE60]"
                      />
                    </div>
                    <div className="bg-green-50 border border-green-200 rounded-lg p-4">
                      <div className="flex items-start gap-2">
                        <Smartphone className="h-5 w-5 text-[#27AE60] mt-0.5" />
                        <div className="text-sm">
                          <p className="font-medium text-green-800 mb-1">M-PESA Payment Instructions</p>
                          <ol className="text-green-700 space-y-1 list-decimal list-inside">
                            <li>You will receive an STK push notification</li>
                            <li>Enter your M-PESA PIN to complete payment</li>
                            <li>You'll receive a confirmation SMS</li>
                          </ol>
                        </div>
                      </div>
                    </div>
                  </div>
                ) : (
                  <div className="space-y-4">
                    <div className="space-y-2">
                      <Label htmlFor="cardNumber">Card Number</Label>
                      <Input
                        id="cardNumber"
                        placeholder="1234 5678 9012 3456"
                        className="border-gray-300 focus:border-[#2980B9]"
                      />
                    </div>
                    <div className="grid grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label htmlFor="expiry">Expiry Date</Label>
                        <Input id="expiry" placeholder="MM/YY" className="border-gray-300 focus:border-[#2980B9]" />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="cvv">CVV</Label>
                        <Input id="cvv" placeholder="123" className="border-gray-300 focus:border-[#2980B9]" />
                      </div>
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="cardName">Cardholder Name</Label>
                      <Input id="cardName" placeholder="John Doe" className="border-gray-300 focus:border-[#2980B9]" />
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>

{/* Security Notice */}
            <Card className="border-blue-200 bg-blue-50">
              <CardContent className="pt-6">
                <div className="flex items-start gap-3">
                  <Shield className="h-5 w-5 text-[#2980B9] mt-0.5" />
                  <div className="text-sm">
                    <p className="font-medium text-blue-800 mb-1">Secure Payment</p>
                    <p className="text-blue-700">
                      Your payment information is encrypted and secure. We never store your card details.
                    </p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

{/* Order Summary */}
          <div className="space-y-6">
            <Card className="sticky top-4">
              <CardHeader>
                <CardTitle className="text-[#2C3E50]">Order Summary</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <h4 className="font-medium text-[#2C3E50]">Booking Details</h4>
                  <div className="text-sm text-[#7F8C8D] space-y-1">
                    <p>
                      <strong>Route:</strong> {bookingDetails.route}
                    </p>
                    <p>
                      <strong>Date:</strong> {bookingDetails.date}
                    </p>
                    <p>
                      <strong>Time:</strong> {bookingDetails.time}
                    </p>
                    <p>
                      <strong>Booking ID:</strong> {bookingDetails.bookingId}
                    </p>
                  </div>
                </div>

<div className="space-y-2">
                  <div className="flex justify-between text-sm">
                    <span className="text-[#7F8C8D]">Ride</span>
                    <span className="text-[#2C3E50]">KSH {bookingDetails.ridePrice}</span>
                  </div>

{bookingDetails.foodItems.map((item, index) => (
                    <div key={index} className="flex justify-between text-sm">
                      <span className="text-[#7F8C8D]">{item.name}</span>
                      <span className="text-[#2C3E50]">KSH {item.price}</span>
                    </div>
                  ))}
                </div>

<div className="flex justify-between font-bold">
                  <span className="text-[#2C3E50]">Total</span>
                  <span className="text-[#27AE60]">KSH {bookingDetails.total}</span>
                </div>

{/* No Refund Policy */}
                <div className="bg-red-50 border border-red-200 rounded-lg p-3">
                  <div className="flex items-start gap-2">
                    <AlertTriangle className="h-4 w-4 text-red-600 mt-0.5" />
                    <div className="text-sm">
                      <p className="font-medium text-red-800 mb-1">No Refund Policy</p>
                      <p className="text-red-700">All payments are final. No cancellations or refunds allowed.</p>
                    </div>
                  </div>
                </div>

<Button
                  className="w-full bg-[#27AE60] hover:bg-[#229954]"
                  onClick={handlePayment}
                  disabled={isProcessing}
                >
                  {isProcessing ? "Processing..." : `Pay KSH ${bookingDetails.total}`}
                </Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/booking-success/page.tsx" isMerged="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { CheckCircle, QrCode, MapPin, Clock, Download, Share } from "lucide-react"

export default function BookingSuccessPage() {
  const bookingDetails = {
    bookingId: "RD001",
    qrCode: "QR123456789",
    route: "City Center → Business District",
    date: "January 15, 2024",
    time: "12:30 PM",
    pickup: "City Center - Main Street",
    dropoff: "Business District - Corporate Plaza",
    foodItems: ["Gourmet Burger", "Truffle Fries"],
    total: 2200,
  }

return (
    <div className="min-h-screen bg-[#F7F9F9] flex items-center justify-center p-4">
      <div className="w-full max-w-2xl space-y-6">
        {/* Success Header */}
        <Card className="text-center border-green-200 bg-green-50">
          <CardContent className="pt-8 pb-6">
            <CheckCircle className="h-16 w-16 text-[#27AE60] mx-auto mb-4" />
            <h1 className="text-3xl font-bold text-[#2C3E50] mb-2">Booking Confirmed!</h1>
            <p className="text-[#7F8C8D] text-lg">Your ride has been successfully booked and payment processed.</p>
          </CardContent>
        </Card>

{/* Booking Details */}
        <Card>
          <CardHeader>
            <div className="flex items-center justify-between">
              <div>
                <CardTitle className="text-[#2C3E50]">Booking #{bookingDetails.bookingId}</CardTitle>
                <CardDescription className="text-[#7F8C8D]">
                  {bookingDetails.date} at {bookingDetails.time}
                </CardDescription>
              </div>
              <Badge className="bg-[#27AE60] text-white">CONFIRMED</Badge>
            </div>
          </CardHeader>
          <CardContent className="space-y-6">
            {/* Route Information */}
            <div className="grid md:grid-cols-2 gap-4">
              <div className="space-y-3">
                <div className="flex items-center gap-2">
                  <MapPin className="h-4 w-4 text-[#27AE60]" />
                  <div>
                    <p className="text-sm font-medium text-[#2C3E50]">Pickup Point</p>
                    <p className="text-sm text-[#7F8C8D]">{bookingDetails.pickup}</p>
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  <MapPin className="h-4 w-4 text-[#2980B9]" />
                  <div>
                    <p className="text-sm font-medium text-[#2C3E50]">Drop-off Point</p>
                    <p className="text-sm text-[#7F8C8D]">{bookingDetails.dropoff}</p>
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  <Clock className="h-4 w-4 text-[#7F8C8D]" />
                  <div>
                    <p className="text-sm font-medium text-[#2C3E50]">Food Items</p>
                    <p className="text-sm text-[#7F8C8D]">{bookingDetails.foodItems.join(", ")}</p>
                  </div>
                </div>
              </div>

{/* QR Code */}
              <div className="flex flex-col items-center justify-center p-6 bg-[#F7F9F9] rounded-lg border-2 border-dashed border-[#27AE60]">
                <QrCode className="h-24 w-24 text-[#2C3E50] mb-3" />
                <p className="text-sm font-medium text-[#2C3E50] mb-1">Your Boarding Pass</p>
                <p className="text-xs text-[#7F8C8D] text-center mb-2">Show this QR code to the driver</p>
                <Badge variant="outline" className="font-mono text-xs">
                  {bookingDetails.qrCode}
                </Badge>
              </div>
            </div>

{/* Action Buttons */}
            <div className="flex flex-col sm:flex-row gap-3">
              <Button className="flex-1 bg-[#27AE60] hover:bg-[#229954]">
                <Download className="h-4 w-4 mr-2" />
                Download Ticket
              </Button>
              <Button variant="outline" className="flex-1 bg-transparent">
                <Share className="h-4 w-4 mr-2" />
                Share Details
              </Button>
            </div>
          </CardContent>
        </Card>

{/* Important Information */}
        <Card className="border-blue-200 bg-blue-50">
          <CardHeader>
            <CardTitle className="text-[#2C3E50] text-lg">Important Information</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3 text-sm">
            <div className="flex items-start gap-2">
              <div className="w-2 h-2 bg-[#2980B9] rounded-full mt-2"></div>
              <p className="text-[#2C3E50]">
                <strong>Arrival Time:</strong> Please arrive at the pickup point 10 minutes before departure time.
              </p>
            </div>
            <div className="flex items-start gap-2">
              <div className="w-2 h-2 bg-[#2980B9] rounded-full mt-2"></div>
              <p className="text-[#2C3E50]">
                <strong>QR Code:</strong> Keep your QR code ready for scanning by the driver.
              </p>
            </div>
            <div className="flex items-start gap-2">
              <div className="w-2 h-2 bg-[#2980B9] rounded-full mt-2"></div>
              <p className="text-[#2C3E50]">
                <strong>Food Service:</strong> Your pre-ordered food will be served during the ride.
              </p>
            </div>
            <div className="flex items-start gap-2">
              <div className="w-2 h-2 bg-red-500 rounded-full mt-2"></div>
              <p className="text-[#2C3E50]">
                <strong>No Refunds:</strong> All bookings are final with no cancellation or refund policy.
              </p>
            </div>
          </CardContent>
        </Card>

{/* Navigation Buttons */}
        <div className="flex flex-col sm:flex-row gap-3">
          <Button asChild variant="outline" className="flex-1 bg-transparent">
            <Link href="/dashboard">Back to Dashboard</Link>
          </Button>
          <Button asChild className="flex-1 bg-[#2980B9] hover:bg-[#2471A3]">
            <Link href="/book">Book Another Ride</Link>
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/supabase.ts" isMerged="true"
import { createClient } from "@supabase/supabase-js"

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY!

// Create a Supabase client with service role key for server-side operations
export const supabase = createClient(supabaseUrl, supabaseServiceKey, {
  auth: {
    autoRefreshToken: false,
    persistSession: false,
  },
})

// Database types based on your schema
export interface User {
  id: string
  clerk_id: string
  username?: string
  email: string
  first_name?: string
  last_name?: string
  phone?: string
  role: "customer" | "driver" | "admin"
  avatar_url?: string
  is_active: boolean
  created_at: string
  updated_at: string
}

export interface PickupLocation {
  id: string
  name: string
  address: string
  latitude?: number
  longitude?: number
  is_active: boolean
  created_at: string
}

export interface Route {
  id: string
  name: string
  description?: string
  pickup_location_id: string
  dropoff_location_id: string
  duration_minutes: number
  price_per_person: number
  max_capacity: number
  is_active: boolean
  created_at: string
}

export interface FoodCategory {
  id: string
  name: string
  description?: string
  image_url?: string
  sort_order: number
  is_active: boolean
  created_at: string
}

export interface MenuItem {
  id: string
  category_id: string
  name: string
  description?: string
  price: number
  image_url?: string
  ingredients?: string[]
  allergens?: string[]
  is_vegetarian: boolean
  is_vegan: boolean
  is_available: boolean
  preparation_time: number
  sort_order: number
  created_at: string
  updated_at: string
}

export interface Trip {
  id: string
  route_id: string
  driver_id: string
  scheduled_date: string
  scheduled_time: string
  status: "scheduled" | "in_progress" | "completed" | "cancelled"
  current_capacity: number
  max_capacity: number
  notes?: string
  created_at: string
  updated_at: string
}

export interface Booking {
  id: string
  user_id: string
  trip_id: string
  party_size: number
  total_amount: number
  status: "pending" | "confirmed" | "cancelled" | "completed"
  special_requests?: string
  qr_code?: string
  payment_intent_id?: string
  booked_at: string
  confirmed_at?: string
  cancelled_at?: string
  created_at: string
  updated_at: string
}

export interface BookingMenuItem {
  id: string
  booking_id: string
  menu_item_id: string
  quantity: number
  unit_price: number
  special_instructions?: string
  created_at: string
}

export interface Notification {
  id: string
  user_id: string
  title: string
  message: string
  type: string
  is_read: boolean
  data?: any
  created_at: string
}
[V0_FILE]typescriptreact:file="app/api/users/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { supabase } from "@/lib/supabase"

// GET /api/users - List all users
export async function GET(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url)
    const role = searchParams.get("role")
    const page = Number.parseInt(searchParams.get("page") || "1")
    const limit = Number.parseInt(searchParams.get("limit") || "10")
    const offset = (page - 1) * limit

let query = supabase
      .from("users")
      .select("*")
      .range(offset, offset + limit - 1)
      .order("created_at", { ascending: false })

if (role) {
      query = query.eq("role", role)
    }

const { data, error, count } = await query

if (error) {
      return NextResponse.json({ error: error.message }, { status: 400 })
    }

return NextResponse.json({
      data,
      pagination: {
        page,
        limit,
        total: count || 0,
        totalPages: Math.ceil((count || 0) / limit),
      },
    })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

// POST /api/users - Create new user
export async function POST(request: NextRequest) {
  try {
    const body = await request.json()

const { data, error } = await supabase.from("users").insert([body]).select().single()

if (error) {
      return NextResponse.json({ error: error.message }, { status: 400 })
    }

return NextResponse.json({ data }, { status: 201 })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/users/[id]/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { supabase } from "@/lib/supabase"

// GET /api/users/[id] - Get user by ID
export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const { data, error } = await supabase.from("users").select("*").eq("id", params.id).single()

if (error) {
      return NextResponse.json({ error: error.message }, { status: 404 })
    }

return NextResponse.json({ data })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

// PUT /api/users/[id] - Update user
export async function PUT(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const body = await request.json()

const { data, error } = await supabase.from("users").update(body).eq("id", params.id).select().single()

if (error) {
      return NextResponse.json({ error: error.message }, { status: 400 })
    }

return NextResponse.json({ data })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

// DELETE /api/users/[id] - Delete user
export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const { error } = await supabase.from("users").delete().eq("id", params.id)

if (error) {
      return NextResponse.json({ error: error.message }, { status: 400 })
    }

return NextResponse.json({ message: "User deleted successfully" })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/pickup-locations/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { supabase } from "@/lib/supabase"

// GET /api/pickup-locations - List all pickup locations
export async function GET(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url)
    const isActive = searchParams.get("is_active")

let query = supabase.from("pickup_locations").select("*").order("name", { ascending: true })

if (isActive !== null) {
      query = query.eq("is_active", isActive === "true")
    }

const { data, error } = await query

if (error) {
      return NextResponse.json({ error: error.message }, { status: 400 })
    }

return NextResponse.json({ data })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

// POST /api/pickup-locations - Create new pickup location
export async function POST(request: NextRequest) {
  try {
    const body = await request.json()

// Validate required fields
    if (!body.name || !body.address) {
      return NextResponse.json({ error: "Name and address are required" }, { status: 400 })
    }

const { data, error } = await supabase.from("pickup_locations").insert([body]).select().single()

if (error) {
      return NextResponse.json({ error: error.message }, { status: 400 })
    }

return NextResponse.json({ data }, { status: 201 })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/pickup-locations/[id]/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { supabase } from "@/lib/supabase"

// GET /api/pickup-locations/[id] - Get pickup location by ID
export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const { data, error } = await supabase.from("pickup_locations").select("*").eq("id", params.id).single()

if (error) {
      return NextResponse.json({ error: error.message }, { status: 404 })
    }

return NextResponse.json({ data })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

// PUT /api/pickup-locations/[id] - Update pickup location
export async function PUT(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const body = await request.json()

const { data, error } = await supabase.from("pickup_locations").update(body).eq("id", params.id).select().single()

if (error) {
      return NextResponse.json({ error: error.message }, { status: 400 })
    }

return NextResponse.json({ data })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

// DELETE /api/pickup-locations/[id] - Delete pickup location
export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const { error } = await supabase.from("pickup_locations").delete().eq("id", params.id)

if (error) {
      return NextResponse.json({ error: error.message }, { status: 400 })
    }

return NextResponse.json({ message: "Pickup location deleted successfully" })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/routes/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { supabase } from "@/lib/supabase"

// GET /api/routes - List all routes
export async function GET(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url)
    const isActive = searchParams.get("is_active")

let query = supabase
      .from("routes")
      .select(`
        *,
        pickup_location:pickup_locations!pickup_location_id(*),
        dropoff_location:pickup_locations!dropoff_location_id(*)
      `)
      .order("name", { ascending: true })

if (isActive !== null) {
      query = query.eq("is_active", isActive === "true")
    }

const { data, error } = await query

if (error) {
      return NextResponse.json({ error: error.message }, { status: 400 })
    }

return NextResponse.json({ data })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

// POST /api/routes - Create new route
export async function POST(request: NextRequest) {
  try {
    const body = await request.json()

// Validate required fields
    if (
      !body.name ||
      !body.pickup_location_id ||
      !body.dropoff_location_id ||
      !body.duration_minutes ||
      !body.price_per_person
    ) {
      return NextResponse.json(
        {
          error: "Name, pickup location, dropoff location, duration, and price are required",
        },
        { status: 400 },
      )
    }

const { data, error } = await supabase
      .from("routes")
      .insert([body])
      .select(`
        *,
        pickup_location:pickup_locations!pickup_location_id(*),
        dropoff_location:pickup_locations!dropoff_location_id(*)
      `)
      .single()

if (error) {
      return NextResponse.json({ error: error.message }, { status: 400 })
    }

return NextResponse.json({ data }, { status: 201 })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/routes/[id]/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { supabase } from "@/lib/supabase"

// GET /api/routes/[id] - Get route by ID
export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const { data, error } = await supabase
      .from("routes")
      .select(`
        *,
        pickup_location:pickup_locations!pickup_location_id(*),
        dropoff_location:pickup_locations!dropoff_location_id(*)
      `)
      .eq("id", params.id)
      .single()

if (error) {
      return NextResponse.json({ error: error.message }, { status: 404 })
    }

return NextResponse.json({ data })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

// PUT /api/routes/[id] - Update route
export async function PUT(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const body = await request.json()

const { data, error } = await supabase
      .from("routes")
      .update(body)
      .eq("id", params.id)
      .select(`
        *,
        pickup_location:pickup_locations!pickup_location_id(*),
        dropoff_location:pickup_locations!dropoff_location_id(*)
      `)
      .single()

if (error) {
      return NextResponse.json({ error: error.message }, { status: 400 })
    }

return NextResponse.json({ data })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

// DELETE /api/routes/[id] - Delete route
export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const { error } = await supabase.from("routes").delete().eq("id", params.id)

if (error) {
      return NextResponse.json({ error: error.message }, { status: 400 })
    }

return NextResponse.json({ message: "Route deleted successfully" })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/food-categories/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { supabase } from "@/lib/supabase"

// GET /api/food-categories - List all food categories
export async function GET(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url)
    const isActive = searchParams.get("is_active")

let query = supabase.from("food_categories").select("*").order("sort_order", { ascending: true })

if (isActive !== null) {
      query = query.eq("is_active", isActive === "true")
    }

const { data, error } = await query

if (error) {
      return NextResponse.json({ error: error.message }, { status: 400 })
    }

return NextResponse.json({ data })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

// POST /api/food-categories - Create new food category
export async function POST(request: NextRequest) {
  try {
    const body = await request.json()

// Validate required fields
    if (!body.name) {
      return NextResponse.json({ error: "Name is required" }, { status: 400 })
    }

const { data, error } = await supabase.from("food_categories").insert([body]).select().single()

if (error) {
      return NextResponse.json({ error: error.message }, { status: 400 })
    }

return NextResponse.json({ data }, { status: 201 })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/food-categories/[id]/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { supabase } from "@/lib/supabase"

// GET /api/food-categories/[id] - Get food category by ID
export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const { data, error } = await supabase.from("food_categories").select("*").eq("id", params.id).single()

if (error) {
      return NextResponse.json({ error: error.message }, { status: 404 })
    }

return NextResponse.json({ data })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

// PUT /api/food-categories/[id] - Update food category
export async function PUT(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const body = await request.json()

const { data, error } = await supabase.from("food_categories").update(body).eq("id", params.id).select().single()

if (error) {
      return NextResponse.json({ error: error.message }, { status: 400 })
    }

return NextResponse.json({ data })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

// DELETE /api/food-categories/[id] - Delete food category
export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const { error } = await supabase.from("food_categories").delete().eq("id", params.id)

if (error) {
      return NextResponse.json({ error: error.message }, { status: 400 })
    }

return NextResponse.json({ message: "Food category deleted successfully" })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/menu-items/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { supabase } from "@/lib/supabase"

// GET /api/menu-items - List all menu items
export async function GET(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url)
    const categoryId = searchParams.get("category_id")
    const isAvailable = searchParams.get("is_available")
    const isVegetarian = searchParams.get("is_vegetarian")
    const isVegan = searchParams.get("is_vegan")

let query = supabase
      .from("menu_items")
      .select(`
        *,
        category:food_categories(*)
      `)
      .order("sort_order", { ascending: true })

if (categoryId) {
      query = query.eq("category_id", categoryId)
    }
    if (isAvailable !== null) {
      query = query.eq("is_available", isAvailable === "true")
    }
    if (isVegetarian !== null) {
      query = query.eq("is_vegetarian", isVegetarian === "true")
    }
    if (isVegan !== null) {
      query = query.eq("is_vegan", isVegan === "true")
    }

const { data, error } = await query

if (error) {
      return NextResponse.json({ error: error.message }, { status: 400 })
    }

return NextResponse.json({ data })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

// POST /api/menu-items - Create new menu item
export async function POST(request: NextRequest) {
  try {
    const body = await request.json()

// Validate required fields
    if (!body.name || !body.price || !body.category_id) {
      return NextResponse.json(
        {
          error: "Name, price, and category are required",
        },
        { status: 400 },
      )
    }

const { data, error } = await supabase
      .from("menu_items")
      .insert([body])
      .select(`
        *,
        category:food_categories(*)
      `)
      .single()

if (error) {
      return NextResponse.json({ error: error.message }, { status: 400 })
    }

return NextResponse.json({ data }, { status: 201 })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/menu-items/[id]/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { supabase } from "@/lib/supabase"

// GET /api/menu-items/[id] - Get menu item by ID
export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const { data, error } = await supabase
      .from("menu_items")
      .select(`
        *,
        category:food_categories(*)
      `)
      .eq("id", params.id)
      .single()

if (error) {
      return NextResponse.json({ error: error.message }, { status: 404 })
    }

return NextResponse.json({ data })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

// PUT /api/menu-items/[id] - Update menu item
export async function PUT(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const body = await request.json()

const { data, error } = await supabase
      .from("menu_items")
      .update(body)
      .eq("id", params.id)
      .select(`
        *,
        category:food_categories(*)
      `)
      .single()

if (error) {
      return NextResponse.json({ error: error.message }, { status: 400 })
    }

return NextResponse.json({ data })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

// DELETE /api/menu-items/[id] - Delete menu item
export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const { error } = await supabase.from("menu_items").delete().eq("id", params.id)

if (error) {
      return NextResponse.json({ error: error.message }, { status: 400 })
    }

return NextResponse.json({ message: "Menu item deleted successfully" })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/trips/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { supabase } from "@/lib/supabase"

// GET /api/trips - List all trips
export async function GET(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url)
    const driverId = searchParams.get("driver_id")
    const status = searchParams.get("status")
    const date = searchParams.get("date")
    const page = Number.parseInt(searchParams.get("page") || "1")
    const limit = Number.parseInt(searchParams.get("limit") || "10")
    const offset = (page - 1) * limit

let query = supabase
      .from("trips")
      .select(`
        *,
        route:routes(*,
          pickup_location:pickup_locations!pickup_location_id(*),
          dropoff_location:pickup_locations!dropoff_location_id(*)
        ),
        driver:users!driver_id(*),
        bookings(*)
      `)
      .range(offset, offset + limit - 1)
      .order("scheduled_date", { ascending: true })
      .order("scheduled_time", { ascending: true })

if (driverId) {
      query = query.eq("driver_id", driverId)
    }
    if (status) {
      query = query.eq("status", status)
    }
    if (date) {
      query = query.eq("scheduled_date", date)
    }

const { data, error, count } = await query

if (error) {
      return NextResponse.json({ error: error.message }, { status: 400 })
    }

// POST /api/trips - Create new trip
export async function POST(request: NextRequest) {
  try {
    const body = await request.json()

// Validate required fields
    if (!body.route_id || !body.driver_id || !body.scheduled_date || !body.scheduled_time) {
      return NextResponse.json(
        {
          error: "Route, driver, date, and time are required",
        },
        { status: 400 },
      )
    }

const { data, error } = await supabase
      .from("trips")
      .insert([body])
      .select(`
        *,
        route:routes(*,
          pickup_location:pickup_locations!pickup_location_id(*),
          dropoff_location:pickup_locations!dropoff_location_id(*)
        ),
        driver:users!driver_id(*)
      `)
      .single()

if (error) {
      return NextResponse.json({ error: error.message }, { status: 400 })
    }

return NextResponse.json({ data }, { status: 201 })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/trips/[id]/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { supabase } from "@/lib/supabase"

// GET /api/trips/[id] - Get trip by ID
export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const { data, error } = await supabase
      .from("trips")
      .select(`
        *,
        route:routes(*,
          pickup_location:pickup_locations!pickup_location_id(*),
          dropoff_location:pickup_locations!dropoff_location_id(*)
        ),
        driver:users!driver_id(*),
        bookings(*,
          user:users(*),
          booking_menu_items(*,
            menu_item:menu_items(*)
          )
        )
      `)
      .eq("id", params.id)
      .single()

if (error) {
      return NextResponse.json({ error: error.message }, { status: 404 })
    }

return NextResponse.json({ data })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

// PUT /api/trips/[id] - Update trip
export async function PUT(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const body = await request.json()

const { data, error } = await supabase
      .from("trips")
      .update(body)
      .eq("id", params.id)
      .select(`
        *,
        route:routes(*,
          pickup_location:pickup_locations!pickup_location_id(*),
          dropoff_location:pickup_locations!dropoff_location_id(*)
        ),
        driver:users!driver_id(*)
      `)
      .single()

if (error) {
      return NextResponse.json({ error: error.message }, { status: 400 })
    }

return NextResponse.json({ data })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

// DELETE /api/trips/[id] - Delete trip
export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const { error } = await supabase.from("trips").delete().eq("id", params.id)

if (error) {
      return NextResponse.json({ error: error.message }, { status: 400 })
    }

return NextResponse.json({ message: "Trip deleted successfully" })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/bookings/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { supabase } from "@/lib/supabase"

// GET /api/bookings - List all bookings
export async function GET(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url)
    const userId = searchParams.get("user_id")
    const tripId = searchParams.get("trip_id")
    const status = searchParams.get("status")
    const page = Number.parseInt(searchParams.get("page") || "1")
    const limit = Number.parseInt(searchParams.get("limit") || "10")
    const offset = (page - 1) * limit

let query = supabase
      .from("bookings")
      .select(`
        *,
        user:users(*),
        trip:trips(*,
          route:routes(*,
            pickup_location:pickup_locations!pickup_location_id(*),
            dropoff_location:pickup_locations!dropoff_location_id(*)
          ),
          driver:users!driver_id(*)
        ),
        booking_menu_items(*,
          menu_item:menu_items(*)
        )
      `)
      .range(offset, offset + limit - 1)
      .order("created_at", { ascending: false })

if (userId) {
      query = query.eq("user_id", userId)
    }
    if (tripId) {
      query = query.eq("trip_id", tripId)
    }
    if (status) {
      query = query.eq("status", status)
    }

const { data, error, count } = await query

if (error) {
      return NextResponse.json({ error: error.message }, { status: 400 })
    }

// POST /api/bookings - Create new booking
export async function POST(request: NextRequest) {
  try {
    const body = await request.json()
    const { menu_items, ...bookingData } = body

// Validate required fields
    if (!bookingData.user_id || !bookingData.trip_id || !bookingData.party_size || !bookingData.total_amount) {
      return NextResponse.json(
        {
          error: "User, trip, party size, and total amount are required",
        },
        { status: 400 },
      )
    }

// Validate party size
    if (bookingData.party_size < 1 || bookingData.party_size > 15) {
      return NextResponse.json(
        {
          error: "Party size must be between 1 and 15",
        },
        { status: 400 },
      )
    }

// Start a transaction
    const { data: booking, error: bookingError } = await supabase
      .from("bookings")
      .insert([bookingData])
      .select()
      .single()

if (bookingError) {
      return NextResponse.json({ error: bookingError.message }, { status: 400 })
    }

// Add menu items if provided
    if (menu_items && menu_items.length > 0) {
      const menuItemsData = menu_items.map((item: any) => ({
        ...item,
        booking_id: booking.id,
      }))

const { error: menuItemsError } = await supabase.from("booking_menu_items").insert(menuItemsData)

if (menuItemsError) {
        // Rollback booking if menu items fail
        await supabase.from("bookings").delete().eq("id", booking.id)
        return NextResponse.json({ error: menuItemsError.message }, { status: 400 })
      }
    }

// Update trip capacity
    const { error: capacityError } = await supabase.rpc("increment_trip_capacity", {
      trip_id: bookingData.trip_id,
      increment: bookingData.party_size,
    })

if (capacityError) {
      console.error("Failed to update trip capacity:", capacityError)
    }

// Fetch the complete booking data
    const { data: completeBooking, error: fetchError } = await supabase
      .from("bookings")
      .select(`
        *,
        user:users(*),
        trip:trips(*,
          route:routes(*,
            pickup_location:pickup_locations!pickup_location_id(*),
            dropoff_location:pickup_locations!dropoff_location_id(*)
          )
        ),
        booking_menu_items(*,
          menu_item:menu_items(*)
        )
      `)
      .eq("id", booking.id)
      .single()

if (fetchError) {
      return NextResponse.json({ error: fetchError.message }, { status: 400 })
    }

return NextResponse.json({ data: completeBooking }, { status: 201 })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/bookings/[id]/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { supabase } from "@/lib/supabase"

// GET /api/bookings/[id] - Get booking by ID
export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const { data, error } = await supabase
      .from("bookings")
      .select(`
        *,
        user:users(*),
        trip:trips(*,
          route:routes(*,
            pickup_location:pickup_locations!pickup_location_id(*),
            dropoff_location:pickup_locations!dropoff_location_id(*)
          ),
          driver:users!driver_id(*)
        ),
        booking_menu_items(*,
          menu_item:menu_items(*)
        )
      `)
      .eq("id", params.id)
      .single()

if (error) {
      return NextResponse.json({ error: error.message }, { status: 404 })
    }

return NextResponse.json({ data })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

// PUT /api/bookings/[id] - Update booking
export async function PUT(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const body = await request.json()

const { data, error } = await supabase
      .from("bookings")
      .update(body)
      .eq("id", params.id)
      .select(`
        *,
        user:users(*),
        trip:trips(*,
          route:routes(*,
            pickup_location:pickup_locations!pickup_location_id(*),
            dropoff_location:pickup_locations!dropoff_location_id(*)
          )
        ),
        booking_menu_items(*,
          menu_item:menu_items(*)
        )
      `)
      .single()

if (error) {
      return NextResponse.json({ error: error.message }, { status: 400 })
    }

return NextResponse.json({ data })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

// DELETE /api/bookings/[id] - Cancel booking
export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    // Get booking details first
    const { data: booking, error: fetchError } = await supabase
      .from("bookings")
      .select("trip_id, party_size")
      .eq("id", params.id)
      .single()

if (fetchError) {
      return NextResponse.json({ error: fetchError.message }, { status: 404 })
    }

// Update booking status to cancelled instead of deleting
    const { error: updateError } = await supabase
      .from("bookings")
      .update({
        status: "cancelled",
        cancelled_at: new Date().toISOString(),
      })
      .eq("id", params.id)

if (updateError) {
      return NextResponse.json({ error: updateError.message }, { status: 400 })
    }

// Update trip capacity
    const { error: capacityError } = await supabase.rpc("increment_trip_capacity", {
      trip_id: booking.trip_id,
      increment: -booking.party_size,
    })

if (capacityError) {
      console.error("Failed to update trip capacity:", capacityError)
    }

return NextResponse.json({ message: "Booking cancelled successfully" })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/notifications/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { supabase } from "@/lib/supabase"

// GET /api/notifications - List notifications for a user
export async function GET(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url)
    const userId = searchParams.get("user_id")
    const isRead = searchParams.get("is_read")
    const type = searchParams.get("type")
    const page = Number.parseInt(searchParams.get("page") || "1")
    const limit = Number.parseInt(searchParams.get("limit") || "20")
    const offset = (page - 1) * limit

if (!userId) {
      return NextResponse.json({ error: "User ID is required" }, { status: 400 })
    }

let query = supabase
      .from("notifications")
      .select("*")
      .eq("user_id", userId)
      .range(offset, offset + limit - 1)
      .order("created_at", { ascending: false })

if (isRead !== null) {
      query = query.eq("is_read", isRead === "true")
    }
    if (type) {
      query = query.eq("type", type)
    }

const { data, error, count } = await query

if (error) {
      return NextResponse.json({ error: error.message }, { status: 400 })
    }

// POST /api/notifications - Create new notification
export async function POST(request: NextRequest) {
  try {
    const body = await request.json()

// Validate required fields
    if (!body.user_id || !body.title || !body.message) {
      return NextResponse.json(
        {
          error: "User ID, title, and message are required",
        },
        { status: 400 },
      )
    }

const { data, error } = await supabase.from("notifications").insert([body]).select().single()

if (error) {
      return NextResponse.json({ error: error.message }, { status: 400 })
    }

return NextResponse.json({ data }, { status: 201 })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/notifications/[id]/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { supabase } from "@/lib/supabase"

// GET /api/notifications/[id] - Get notification by ID
export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const { data, error } = await supabase.from("notifications").select("*").eq("id", params.id).single()

if (error) {
      return NextResponse.json({ error: error.message }, { status: 404 })
    }

return NextResponse.json({ data })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

// PUT /api/notifications/[id] - Update notification (mark as read)
export async function PUT(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const body = await request.json()

const { data, error } = await supabase.from("notifications").update(body).eq("id", params.id).select().single()

if (error) {
      return NextResponse.json({ error: error.message }, { status: 400 })
    }

return NextResponse.json({ data })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

// DELETE /api/notifications/[id] - Delete notification
export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const { error } = await supabase.from("notifications").delete().eq("id", params.id)

if (error) {
      return NextResponse.json({ error: error.message }, { status: 400 })
    }

return NextResponse.json({ message: "Notification deleted successfully" })
  } catch (error) {
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]sql:file="scripts/database-functions.sql" isMerged="true"
-- Database functions to support the API operations

-- Function to update the updated_at column
CREATE OR REPLACE FUNCTION update_updated_at_column()
RETURNS TRIGGER AS $$
BEGIN
    NEW.updated_at = CURRENT_TIMESTAMP;
    RETURN NEW;
END;
$$ language 'plpgsql';

-- Function to generate QR code for bookings
CREATE OR REPLACE FUNCTION generate_booking_qr_code()
RETURNS TRIGGER AS $$
BEGIN
    -- Generate a unique QR code using booking ID and timestamp
    NEW.qr_code = 'QR' || UPPER(SUBSTRING(NEW.id::text FROM 1 FOR 8)) || TO_CHAR(NOW(), 'YYYYMMDDHH24MISS');
    RETURN NEW;
END;
$$ language 'plpgsql';

-- Function to increment/decrement trip capacity
CREATE OR REPLACE FUNCTION increment_trip_capacity(trip_id UUID, increment INTEGER)
RETURNS VOID AS $$
BEGIN
    UPDATE trips 
    SET current_capacity = GREATEST(0, current_capacity + increment)
    WHERE id = trip_id;
END;
$$ language 'plpgsql';

-- Create enum types if they don't exist
DO $$ BEGIN
    CREATE TYPE booking_status AS ENUM ('pending', 'confirmed', 'cancelled', 'completed');
EXCEPTION
    WHEN duplicate_object THEN null;
END $$;

DO $$ BEGIN
    CREATE TYPE trip_status AS ENUM ('scheduled', 'in_progress', 'completed', 'cancelled');
EXCEPTION
    WHEN duplicate_object THEN null;
END $$;

DO $$ BEGIN
    CREATE TYPE user_role AS ENUM ('customer', 'driver', 'admin');
EXCEPTION
    WHEN duplicate_object THEN null;
END $$;
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "ridedine-api",
  "version": "1.0.0",
  "description": "RideDine Food Truck API",
  "main": "server.js",
  "type": "module",
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js",
    "test": "jest"
  },
  "dependencies": {
    "express": "^4.18.2",
    "@supabase/supabase-js": "^2.39.0",
    "cors": "^2.8.5",
    "helmet": "^7.1.0",
    "express-rate-limit": "^7.1.5",
    "express-validator": "^7.0.1",
    "dotenv": "^16.3.1",
    "compression": "^1.7.4",
    "morgan": "^1.10.0"
  },
  "devDependencies": {
    "nodemon": "^3.0.2",
    "jest": "^29.7.0",
    "supertest": "^6.3.3"
  }
}
[V0_FILE]javascript:file="config/database.js" isMerged="true"
import { createClient } from "@supabase/supabase-js"
import dotenv from "dotenv"

dotenv.config()

const supabaseUrl = process.env.SUPABASE_URL
const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY

if (!supabaseUrl || !supabaseServiceKey) {
  throw new Error("Missing Supabase environment variables")
}

// Database helper functions
export const handleDatabaseError = (error) => {
  console.error("Database error:", error)

if (error.code === "PGRST116") {
    return { status: 404, message: "Resource not found" }
  }

if (error.code === "23505") {
    return { status: 409, message: "Resource already exists" }
  }

if (error.code === "23503") {
    return { status: 400, message: "Invalid reference to related resource" }
  }

return { status: 500, message: error.message || "Database operation failed" }
}

export const buildPaginationQuery = (query, page = 1, limit = 10) => {
  const offset = (page - 1) * limit
  return query.range(offset, offset + limit - 1)
}
[V0_FILE]javascript:file="middleware/errorHandler.js" isMerged="true"
export const errorHandler = (err, req, res, next) => {
  console.error("Error:", err)

// Default error
  const error = {
    status: err.status || 500,
    message: err.message || "Internal Server Error",
  }

// Validation errors
  if (err.name === "ValidationError") {
    error.status = 400
    error.message = Object.values(err.errors)
      .map((val) => val.message)
      .join(", ")
  }

// Duplicate key error
  if (err.code === 11000) {
    error.status = 400
    error.message = "Duplicate field value entered"
  }

res.status(error.status).json({
    success: false,
    error: error.message,
    ...(process.env.NODE_ENV === "development" && { stack: err.stack }),
  })
}
[V0_FILE]javascript:file="middleware/notFound.js" isMerged="true"
export const notFound = (req, res, next) => {
  const error = new Error(`Not Found - ${req.originalUrl}`)
  error.status = 404
  next(error)
}
[V0_FILE]javascript:file="middleware/validation.js" isMerged="true"
import { body, param, query, validationResult } from "express-validator"

export const handleValidationErrors = (req, res, next) => {
  const errors = validationResult(req)
  if (!errors.isEmpty()) {
    return res.status(400).json({
      success: false,
      error: "Validation failed",
      details: errors.array(),
    })
  }
  next()
}

// User validation rules
export const validateUser = [
  body("clerk_id").notEmpty().withMessage("Clerk ID is required"),
  body("email").isEmail().withMessage("Valid email is required"),
  body("role").optional().isIn(["customer", "driver", "admin"]).withMessage("Invalid role"),
  handleValidationErrors,
]

export const validateUserUpdate = [
  body("email").optional().isEmail().withMessage("Valid email is required"),
  body("role").optional().isIn(["customer", "driver", "admin"]).withMessage("Invalid role"),
  handleValidationErrors,
]

// Pickup location validation rules
export const validatePickupLocation = [
  body("name").notEmpty().withMessage("Name is required"),
  body("address").notEmpty().withMessage("Address is required"),
  body("latitude").optional().isFloat({ min: -90, max: 90 }).withMessage("Invalid latitude"),
  body("longitude").optional().isFloat({ min: -180, max: 180 }).withMessage("Invalid longitude"),
  handleValidationErrors,
]

// Route validation rules
export const validateRoute = [
  body("name").notEmpty().withMessage("Name is required"),
  body("pickup_location_id").isUUID().withMessage("Valid pickup location ID is required"),
  body("dropoff_location_id").isUUID().withMessage("Valid dropoff location ID is required"),
  body("duration_minutes").isInt({ min: 1 }).withMessage("Duration must be a positive integer"),
  body("price_per_person").isFloat({ min: 0 }).withMessage("Price must be a positive number"),
  body("max_capacity").optional().isInt({ min: 1, max: 15 }).withMessage("Max capacity must be between 1 and 15"),
  handleValidationErrors,
]

// Food category validation rules
export const validateFoodCategory = [
  body("name").notEmpty().withMessage("Name is required"),
  body("sort_order").optional().isInt({ min: 0 }).withMessage("Sort order must be a non-negative integer"),
  handleValidationErrors,
]

// Menu item validation rules
export const validateMenuItem = [
  body("name").notEmpty().withMessage("Name is required"),
  body("category_id").isUUID().withMessage("Valid category ID is required"),
  body("price").isFloat({ min: 0 }).withMessage("Price must be a positive number"),
  body("preparation_time").optional().isInt({ min: 1 }).withMessage("Preparation time must be a positive integer"),
  body("ingredients").optional().isArray().withMessage("Ingredients must be an array"),
  body("allergens").optional().isArray().withMessage("Allergens must be an array"),
  handleValidationErrors,
]

// Trip validation rules
export const validateTrip = [
  body("route_id").isUUID().withMessage("Valid route ID is required"),
  body("driver_id").isUUID().withMessage("Valid driver ID is required"),
  body("scheduled_date").isISO8601().withMessage("Valid date is required"),
  body("scheduled_time")
    .matches(/^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/)
    .withMessage("Valid time format (HH:MM) is required"),
  body("max_capacity").optional().isInt({ min: 1, max: 15 }).withMessage("Max capacity must be between 1 and 15"),
  handleValidationErrors,
]

// Booking validation rules
export const validateBooking = [
  body("user_id").isUUID().withMessage("Valid user ID is required"),
  body("trip_id").isUUID().withMessage("Valid trip ID is required"),
  body("party_size").isInt({ min: 1, max: 15 }).withMessage("Party size must be between 1 and 15"),
  body("total_amount").isFloat({ min: 0 }).withMessage("Total amount must be a positive number"),
  body("menu_items").optional().isArray().withMessage("Menu items must be an array"),
  body("menu_items.*.menu_item_id").optional().isUUID().withMessage("Valid menu item ID is required"),
  body("menu_items.*.quantity").optional().isInt({ min: 1 }).withMessage("Quantity must be a positive integer"),
  body("menu_items.*.unit_price").optional().isFloat({ min: 0 }).withMessage("Unit price must be a positive number"),
  handleValidationErrors,
]

// Notification validation rules
export const validateNotification = [
  body("user_id").isUUID().withMessage("Valid user ID is required"),
  body("title").notEmpty().withMessage("Title is required"),
  body("message").notEmpty().withMessage("Message is required"),
  body("type").optional().isIn(["info", "warning", "error", "success"]).withMessage("Invalid notification type"),
  handleValidationErrors,
]

// Common parameter validations
export const validateUUID = [param("id").isUUID().withMessage("Valid UUID is required"), handleValidationErrors]

export const validatePagination = [
  query("page").optional().isInt({ min: 1 }).withMessage("Page must be a positive integer"),
  query("limit").optional().isInt({ min: 1, max: 100 }).withMessage("Limit must be between 1 and 100"),
  handleValidationErrors,
]
[V0_FILE]javascript:file="routes/users.js" isMerged="true"
import express from "express"
import { supabase, handleDatabaseError, buildPaginationQuery } from "../config/database.js"
import { validateUser, validateUserUpdate, validateUUID, validatePagination } from "../middleware/validation.js"

const router = express.Router()

// GET /api/users - List all users
router.get("/", validatePagination, async (req, res, next) => {
  try {
    const { role, page = 1, limit = 10 } = req.query
    const pageNum = Number.parseInt(page)
    const limitNum = Number.parseInt(limit)

let query = supabase.from("users").select("*", { count: "exact" }).order("created_at", { ascending: false })

if (role) {
      query = query.eq("role", role)
    }

query = buildPaginationQuery(query, pageNum, limitNum)

const { data, error, count } = await query

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(200).json({
      success: true,
      data,
      pagination: {
        page: pageNum,
        limit: limitNum,
        total: count || 0,
        totalPages: Math.ceil((count || 0) / limitNum),
      },
    })
  } catch (error) {
    next(error)
  }
})

// GET /api/users/:id - Get user by ID
router.get("/:id", validateUUID, async (req, res, next) => {
  try {
    const { data, error } = await supabase.from("users").select("*").eq("id", req.params.id).single()

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(200).json({
      success: true,
      data,
    })
  } catch (error) {
    next(error)
  }
})

// POST /api/users - Create new user
router.post("/", validateUser, async (req, res, next) => {
  try {
    const { data, error } = await supabase.from("users").insert([req.body]).select().single()

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(201).json({
      success: true,
      data,
    })
  } catch (error) {
    next(error)
  }
})

// PUT /api/users/:id - Update user
router.put("/:id", validateUUID, validateUserUpdate, async (req, res, next) => {
  try {
    const { data, error } = await supabase.from("users").update(req.body).eq("id", req.params.id).select().single()

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(200).json({
      success: true,
      data,
    })
  } catch (error) {
    next(error)
  }
})

// DELETE /api/users/:id - Delete user
router.delete("/:id", validateUUID, async (req, res, next) => {
  try {
    const { error } = await supabase.from("users").delete().eq("id", req.params.id)

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(200).json({
      success: true,
      message: "User deleted successfully",
    })
  } catch (error) {
    next(error)
  }
})

export default router
[V0_FILE]javascript:file="routes/pickupLocations.js" isMerged="true"
import express from "express"
import { supabase, handleDatabaseError } from "../config/database.js"
import { validatePickupLocation, validateUUID } from "../middleware/validation.js"

const router = express.Router()

// GET /api/pickup-locations - List all pickup locations
router.get("/", async (req, res, next) => {
  try {
    const { is_active } = req.query

let query = supabase.from("pickup_locations").select("*").order("name", { ascending: true })

if (is_active !== undefined) {
      query = query.eq("is_active", is_active === "true")
    }

const { data, error } = await query

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(200).json({
      success: true,
      data,
    })
  } catch (error) {
    next(error)
  }
})

// GET /api/pickup-locations/:id - Get pickup location by ID
router.get("/:id", validateUUID, async (req, res, next) => {
  try {
    const { data, error } = await supabase.from("pickup_locations").select("*").eq("id", req.params.id).single()

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(200).json({
      success: true,
      data,
    })
  } catch (error) {
    next(error)
  }
})

// POST /api/pickup-locations - Create new pickup location
router.post("/", validatePickupLocation, async (req, res, next) => {
  try {
    const { data, error } = await supabase.from("pickup_locations").insert([req.body]).select().single()

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(201).json({
      success: true,
      data,
    })
  } catch (error) {
    next(error)
  }
})

// PUT /api/pickup-locations/:id - Update pickup location
router.put("/:id", validateUUID, validatePickupLocation, async (req, res, next) => {
  try {
    const { data, error } = await supabase
      .from("pickup_locations")
      .update(req.body)
      .eq("id", req.params.id)
      .select()
      .single()

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(200).json({
      success: true,
      data,
    })
  } catch (error) {
    next(error)
  }
})

// DELETE /api/pickup-locations/:id - Delete pickup location
router.delete("/:id", validateUUID, async (req, res, next) => {
  try {
    const { error } = await supabase.from("pickup_locations").delete().eq("id", req.params.id)

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(200).json({
      success: true,
      message: "Pickup location deleted successfully",
    })
  } catch (error) {
    next(error)
  }
})

export default router
[V0_FILE]javascript:file="routes/routes.js" isMerged="true"
import express from "express"
import { supabase, handleDatabaseError } from "../config/database.js"
import { validateRoute, validateUUID } from "../middleware/validation.js"

const router = express.Router()

// GET /api/routes - List all routes
router.get("/", async (req, res, next) => {
  try {
    const { is_active } = req.query

if (is_active !== undefined) {
      query = query.eq("is_active", is_active === "true")
    }

const { data, error } = await query

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(200).json({
      success: true,
      data,
    })
  } catch (error) {
    next(error)
  }
})

// GET /api/routes/:id - Get route by ID
router.get("/:id", validateUUID, async (req, res, next) => {
  try {
    const { data, error } = await supabase
      .from("routes")
      .select(`
        *,
        pickup_location:pickup_locations!pickup_location_id(*),
        dropoff_location:pickup_locations!dropoff_location_id(*)
      `)
      .eq("id", req.params.id)
      .single()

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(200).json({
      success: true,
      data,
    })
  } catch (error) {
    next(error)
  }
})

// POST /api/routes - Create new route
router.post("/", validateRoute, async (req, res, next) => {
  try {
    const { data, error } = await supabase
      .from("routes")
      .insert([req.body])
      .select(`
        *,
        pickup_location:pickup_locations!pickup_location_id(*),
        dropoff_location:pickup_locations!dropoff_location_id(*)
      `)
      .single()

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(201).json({
      success: true,
      data,
    })
  } catch (error) {
    next(error)
  }
})

// PUT /api/routes/:id - Update route
router.put("/:id", validateUUID, validateRoute, async (req, res, next) => {
  try {
    const { data, error } = await supabase
      .from("routes")
      .update(req.body)
      .eq("id", req.params.id)
      .select(`
        *,
        pickup_location:pickup_locations!pickup_location_id(*),
        dropoff_location:pickup_locations!dropoff_location_id(*)
      `)
      .single()

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(200).json({
      success: true,
      data,
    })
  } catch (error) {
    next(error)
  }
})

// DELETE /api/routes/:id - Delete route
router.delete("/:id", validateUUID, async (req, res, next) => {
  try {
    const { error } = await supabase.from("routes").delete().eq("id", req.params.id)

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(200).json({
      success: true,
      message: "Route deleted successfully",
    })
  } catch (error) {
    next(error)
  }
})

export default router
[V0_FILE]javascript:file="routes/foodCategories.js" isMerged="true"
import express from "express"
import { supabase, handleDatabaseError } from "../config/database.js"
import { validateFoodCategory, validateUUID } from "../middleware/validation.js"

const router = express.Router()

// GET /api/food-categories - List all food categories
router.get("/", async (req, res, next) => {
  try {
    const { is_active } = req.query

let query = supabase.from("food_categories").select("*").order("sort_order", { ascending: true })

if (is_active !== undefined) {
      query = query.eq("is_active", is_active === "true")
    }

const { data, error } = await query

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(200).json({
      success: true,
      data,
    })
  } catch (error) {
    next(error)
  }
})

// GET /api/food-categories/:id - Get food category by ID
router.get("/:id", validateUUID, async (req, res, next) => {
  try {
    const { data, error } = await supabase.from("food_categories").select("*").eq("id", req.params.id).single()

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(200).json({
      success: true,
      data,
    })
  } catch (error) {
    next(error)
  }
})

// POST /api/food-categories - Create new food category
router.post("/", validateFoodCategory, async (req, res, next) => {
  try {
    const { data, error } = await supabase.from("food_categories").insert([req.body]).select().single()

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(201).json({
      success: true,
      data,
    })
  } catch (error) {
    next(error)
  }
})

// PUT /api/food-categories/:id - Update food category
router.put("/:id", validateUUID, validateFoodCategory, async (req, res, next) => {
  try {
    const { data, error } = await supabase
      .from("food_categories")
      .update(req.body)
      .eq("id", req.params.id)
      .select()
      .single()

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(200).json({
      success: true,
      data,
    })
  } catch (error) {
    next(error)
  }
})

// DELETE /api/food-categories/:id - Delete food category
router.delete("/:id", validateUUID, async (req, res, next) => {
  try {
    const { error } = await supabase.from("food_categories").delete().eq("id", req.params.id)

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(200).json({
      success: true,
      message: "Food category deleted successfully",
    })
  } catch (error) {
    next(error)
  }
})

export default router
[V0_FILE]javascript:file="routes/bookings.js" isMerged="true"
import express from "express"
import { supabase, handleDatabaseError, buildPaginationQuery } from "../config/database.js"
import { validateBooking, validateUUID, validatePagination } from "../middleware/validation.js"

const router = express.Router()

// GET /api/bookings - List all bookings
router.get("/", validatePagination, async (req, res, next) => {
  try {
    const { user_id, trip_id, status, page = 1, limit = 10 } = req.query

const pageNum = Number.parseInt(page)
    const limitNum = Number.parseInt(limit)

let query = supabase
      .from("bookings")
      .select(
        `
        *,
        user:users(*),
        trip:trips(*,
          route:routes(*,
            pickup_location:pickup_locations!pickup_location_id(*),
            dropoff_location:pickup_locations!dropoff_location_id(*)
          ),
          driver:users!driver_id(*)
        ),
        booking_menu_items(*,
          menu_item:menu_items(*)
        )
      `,
        { count: "exact" },
      )
      .order("created_at", { ascending: false })

if (user_id) {
      query = query.eq("user_id", user_id)
    }
    if (trip_id) {
      query = query.eq("trip_id", trip_id)
    }
    if (status) {
      query = query.eq("status", status)
    }

query = buildPaginationQuery(query, pageNum, limitNum)

const { data, error, count } = await query

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

// GET /api/bookings/:id - Get booking by ID
router.get("/:id", validateUUID, async (req, res, next) => {
  try {
    const { data, error } = await supabase
      .from("bookings")
      .select(`
        *,
        user:users(*),
        trip:trips(*,
          route:routes(*,
            pickup_location:pickup_locations!pickup_location_id(*),
            dropoff_location:pickup_locations!dropoff_location_id(*)
          ),
          driver:users!driver_id(*)
        ),
        booking_menu_items(*,
          menu_item:menu_items(*)
        )
      `)
      .eq("id", req.params.id)
      .single()

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(200).json({
      success: true,
      data,
    })
  } catch (error) {
    next(error)
  }
})

// POST /api/bookings - Create new booking
router.post("/", validateBooking, async (req, res, next) => {
  try {
    const { menu_items, ...bookingData } = req.body

// Check trip capacity
    const { data: trip, error: tripError } = await supabase
      .from("trips")
      .select("current_capacity, max_capacity")
      .eq("id", bookingData.trip_id)
      .single()

if (tripError) {
      const dbError = handleDatabaseError(tripError)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

if (trip.current_capacity + bookingData.party_size > trip.max_capacity) {
      return res.status(400).json({
        success: false,
        error: "Trip capacity exceeded",
      })
    }

// Create booking
    const { data: booking, error: bookingError } = await supabase
      .from("bookings")
      .insert([bookingData])
      .select()
      .single()

if (bookingError) {
      const dbError = handleDatabaseError(bookingError)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

// Add menu items if provided
    if (menu_items && menu_items.length > 0) {
      const menuItemsData = menu_items.map((item) => ({
        ...item,
        booking_id: booking.id,
      }))

const { error: menuItemsError } = await supabase.from("booking_menu_items").insert(menuItemsData)

if (menuItemsError) {
        // Rollback booking if menu items fail
        await supabase.from("bookings").delete().eq("id", booking.id)
        const dbError = handleDatabaseError(menuItemsError)
        return res.status(dbError.status).json({
          success: false,
          error: dbError.message,
        })
      }
    }

// Update trip capacity
    const { error: capacityError } = await supabase
      .from("trips")
      .update({
        current_capacity: trip.current_capacity + bookingData.party_size,
      })
      .eq("id", bookingData.trip_id)

if (capacityError) {
      console.error("Failed to update trip capacity:", capacityError)
    }

// Fetch complete booking data
    const { data: completeBooking, error: fetchError } = await supabase
      .from("bookings")
      .select(`
        *,
        user:users(*),
        trip:trips(*,
          route:routes(*,
            pickup_location:pickup_locations!pickup_location_id(*),
            dropoff_location:pickup_locations!dropoff_location_id(*)
          )
        ),
        booking_menu_items(*,
          menu_item:menu_items(*)
        )
      `)
      .eq("id", booking.id)
      .single()

if (fetchError) {
      const dbError = handleDatabaseError(fetchError)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(201).json({
      success: true,
      data: completeBooking,
    })
  } catch (error) {
    next(error)
  }
})

// PUT /api/bookings/:id - Update booking
router.put("/:id", validateUUID, async (req, res, next) => {
  try {
    const { data, error } = await supabase
      .from("bookings")
      .update(req.body)
      .eq("id", req.params.id)
      .select(`
        *,
        user:users(*),
        trip:trips(*,
          route:routes(*,
            pickup_location:pickup_locations!pickup_location_id(*),
            dropoff_location:pickup_locations!dropoff_location_id(*)
          )
        ),
        booking_menu_items(*,
          menu_item:menu_items(*)
        )
      `)
      .single()

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(200).json({
      success: true,
      data,
    })
  } catch (error) {
    next(error)
  }
})

// DELETE /api/bookings/:id - Cancel booking
router.delete("/:id", validateUUID, async (req, res, next) => {
  try {
    // Get booking details first
    const { data: booking, error: fetchError } = await supabase
      .from("bookings")
      .select("trip_id, party_size")
      .eq("id", req.params.id)
      .single()

if (fetchError) {
      const dbError = handleDatabaseError(fetchError)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

// Update booking status to cancelled
    const { error: updateError } = await supabase
      .from("bookings")
      .update({
        status: "cancelled",
        cancelled_at: new Date().toISOString(),
      })
      .eq("id", req.params.id)

if (updateError) {
      const dbError = handleDatabaseError(updateError)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

// Update trip capacity
    const { data: trip, error: tripError } = await supabase
      .from("trips")
      .select("current_capacity")
      .eq("id", booking.trip_id)
      .single()

if (!tripError && trip) {
      await supabase
        .from("trips")
        .update({
          current_capacity: Math.max(0, trip.current_capacity - booking.party_size),
        })
        .eq("id", booking.trip_id)
    }

res.status(200).json({
      success: true,
      message: "Booking cancelled successfully",
    })
  } catch (error) {
    next(error)
  }
})

export default router
[V0_FILE]javascript:file="routes/notifications.js" isMerged="true"
import express from "express"
import { supabase, handleDatabaseError, buildPaginationQuery } from "../config/database.js"
import { validateNotification, validateUUID, validatePagination } from "../middleware/validation.js"

const router = express.Router()

// GET /api/notifications - List notifications for a user
router.get("/", validatePagination, async (req, res, next) => {
  try {
    const { user_id, is_read, type, page = 1, limit = 20 } = req.query

if (!user_id) {
      return res.status(400).json({
        success: false,
        error: "User ID is required",
      })
    }

const pageNum = Number.parseInt(page)
    const limitNum = Number.parseInt(limit)

let query = supabase
      .from("notifications")
      .select("*", { count: "exact" })
      .eq("user_id", user_id)
      .order("created_at", { ascending: false })

if (is_read !== undefined) {
      query = query.eq("is_read", is_read === "true")
    }
    if (type) {
      query = query.eq("type", type)
    }

query = buildPaginationQuery(query, pageNum, limitNum)

const { data, error, count } = await query

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

// GET /api/notifications/:id - Get notification by ID
router.get("/:id", validateUUID, async (req, res, next) => {
  try {
    const { data, error } = await supabase.from("notifications").select("*").eq("id", req.params.id).single()

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(200).json({
      success: true,
      data,
    })
  } catch (error) {
    next(error)
  }
})

// POST /api/notifications - Create new notification
router.post("/", validateNotification, async (req, res, next) => {
  try {
    const { data, error } = await supabase.from("notifications").insert([req.body]).select().single()

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(201).json({
      success: true,
      data,
    })
  } catch (error) {
    next(error)
  }
})

// PUT /api/notifications/:id - Update notification (mark as read)
router.put("/:id", validateUUID, async (req, res, next) => {
  try {
    const { data, error } = await supabase
      .from("notifications")
      .update(req.body)
      .eq("id", req.params.id)
      .select()
      .single()

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(200).json({
      success: true,
      data,
    })
  } catch (error) {
    next(error)
  }
})

// PUT /api/notifications/mark-all-read - Mark all notifications as read for a user
router.put("/mark-all-read", async (req, res, next) => {
  try {
    const { user_id } = req.body

if (!user_id) {
      return res.status(400).json({
        success: false,
        error: "User ID is required",
      })
    }

const { data, error } = await supabase
      .from("notifications")
      .update({ is_read: true })
      .eq("user_id", user_id)
      .eq("is_read", false)

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(200).json({
      success: true,
      message: "All notifications marked as read",
    })
  } catch (error) {
    next(error)
  }
})

// DELETE /api/notifications/:id - Delete notification
router.delete("/:id", validateUUID, async (req, res, next) => {
  try {
    const { error } = await supabase.from("notifications").delete().eq("id", req.params.id)

if (error) {
      const dbError = handleDatabaseError(error)
      return res.status(dbError.status).json({
        success: false,
        error: dbError.message,
      })
    }

res.status(200).json({
      success: true,
      message: "Notification deleted successfully",
    })
  } catch (error) {
    next(error)
  }
})

export default router
[V0_FILE]plaintext:file=".env.example" isMerged="true"
# Server Configuration
PORT=3000
NODE_ENV=development

# Supabase Configuration
SUPABASE_URL=your_supabase_url_here
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key_here

# Optional: JWT Secret for authentication
JWT_SECRET=your_jwt_secret_here

# Optional: Database URL (if using direct PostgreSQL connection)
DATABASE_URL=your_database_url_here
[V0_FILE]javascript:file="scripts/test-api.js" isMerged="true"
// Simple API testing script
import fetch from "node-fetch"

const BASE_URL = "http://localhost:3000/api"

async function testAPI() {
  console.log("🧪 Testing RideDine API...\n")

// Test health endpoint
  try {
    const response = await fetch("http://localhost:3000/health")
    const data = await response.json()
    console.log("✅ Health check:", data.status)
  } catch (error) {
    console.log("❌ Health check failed:", error.message)
  }

// Test users endpoint
  try {
    const response = await fetch(`${BASE_URL}/users?page=1&limit=5`)
    const data = await response.json()
    console.log("✅ Users endpoint:", data.success ? "Working" : "Failed")
    console.log("   Total users:", data.pagination?.total || 0)
  } catch (error) {
    console.log("❌ Users endpoint failed:", error.message)
  }

// Test pickup locations endpoint
  try {
    const response = await fetch(`${BASE_URL}/pickup-locations`)
    const data = await response.json()
    console.log("✅ Pickup locations endpoint:", data.success ? "Working" : "Failed")
    console.log("   Total locations:", data.data?.length || 0)
  } catch (error) {
    console.log("❌ Pickup locations endpoint failed:", error.message)
  }

// Test menu items endpoint
  try {
    const response = await fetch(`${BASE_URL}/menu-items?is_available=true`)
    const data = await response.json()
    console.log("✅ Menu items endpoint:", data.success ? "Working" : "Failed")
    console.log("   Available items:", data.data?.length || 0)
  } catch (error) {
    console.log("❌ Menu items endpoint failed:", error.message)
  }

console.log("\n🎉 API testing completed!")
}

// Run the test
testAPI()
[V0_FILE]typescriptreact:file="app/admin/users/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Plus, Search, Edit, Trash2, Filter } from "lucide-react"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"

interface User {
  id: string
  clerk_id: string
  username?: string
  email: string
  first_name?: string
  last_name?: string
  phone?: string
  role: "customer" | "driver" | "admin"
  avatar_url?: string
  is_active: boolean
  created_at: string
  updated_at: string
}

export default function UsersPage() {
  const [users, setUsers] = useState<User[]>([])
  const [loading, setLoading] = useState(true)
  const [searchTerm, setSearchTerm] = useState("")
  const [roleFilter, setRoleFilter] = useState<string>("all")
  const [currentPage, setCurrentPage] = useState(1)
  const [totalPages, setTotalPages] = useState(1)

// Mock data - replace with actual API calls
  useEffect(() => {
    const mockUsers: User[] = [
      {
        id: "1",
        clerk_id: "clerk_1",
        username: "johndoe",
        email: "john@example.com",
        first_name: "John",
        last_name: "Doe",
        phone: "+254700000001",
        role: "customer",
        is_active: true,
        created_at: "2024-01-15T10:00:00Z",
        updated_at: "2024-01-15T10:00:00Z",
      },
      {
        id: "2",
        clerk_id: "clerk_2",
        username: "janesmith",
        email: "jane@example.com",
        first_name: "Jane",
        last_name: "Smith",
        phone: "+254700000002",
        role: "driver",
        is_active: true,
        created_at: "2024-01-14T09:00:00Z",
        updated_at: "2024-01-14T09:00:00Z",
      },
      {
        id: "3",
        clerk_id: "clerk_3",
        username: "admin",
        email: "admin@ridedine.com",
        first_name: "Admin",
        last_name: "User",
        phone: "+254700000003",
        role: "admin",
        is_active: true,
        created_at: "2024-01-10T08:00:00Z",
        updated_at: "2024-01-10T08:00:00Z",
      },
    ]

setTimeout(() => {
      setUsers(mockUsers)
      setLoading(false)
      setTotalPages(1)
    }, 1000)
  }, [currentPage, roleFilter, searchTerm])

const handleDeleteUser = async (userId: string) => {
    // Mock delete - replace with actual API call
    setUsers(users.filter((user) => user.id !== userId))
  }

const filteredUsers = users.filter((user) => {
    const matchesSearch =
      user.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
      user.first_name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
      user.last_name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
      user.username?.toLowerCase().includes(searchTerm.toLowerCase())

const matchesRole = roleFilter === "all" || user.role === roleFilter

return matchesSearch && matchesRole
  })

const getRoleBadgeColor = (role: string) => {
    switch (role) {
      case "admin":
        return "bg-red-500 text-white"
      case "driver":
        return "bg-[#2980B9] text-white"
      case "customer":
        return "bg-[#27AE60] text-white"
      default:
        return "bg-gray-500 text-white"
    }
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-[#2C3E50]">Users</h1>
          <p className="text-[#7F8C8D]">Manage customers, drivers, and administrators</p>
        </div>
        <Button asChild className="bg-[#27AE60] hover:bg-[#229954]">
          <Link href="/admin/users/create">
            <Plus className="h-4 w-4 mr-2" />
            Add User
          </Link>
        </Button>
      </div>

{/* Filters */}
      <Card>
        <CardContent className="pt-6">
          <div className="flex flex-col sm:flex-row gap-4">
            <div className="flex-1">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                <Input
                  placeholder="Search users..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10"
                />
              </div>
            </div>
            <div className="flex gap-2">
              <Select value={roleFilter} onValueChange={setRoleFilter}>
                <SelectTrigger className="w-40">
                  <Filter className="h-4 w-4 mr-2" />
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Roles</SelectItem>
                  <SelectItem value="customer">Customer</SelectItem>
                  <SelectItem value="driver">Driver</SelectItem>
                  <SelectItem value="admin">Admin</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Users Table */}
      <Card>
        <CardHeader>
          <CardTitle>All Users ({filteredUsers.length})</CardTitle>
          <CardDescription>A list of all registered users in the system</CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Name</TableHead>
                <TableHead>Email</TableHead>
                <TableHead>Phone</TableHead>
                <TableHead>Role</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Created</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredUsers.map((user) => (
                <TableRow key={user.id}>
                  <TableCell>
                    <div>
                      <div className="font-medium text-[#2C3E50]">
                        {user.first_name} {user.last_name}
                      </div>
                      {user.username && <div className="text-sm text-[#7F8C8D]">@{user.username}</div>}
                    </div>
                  </TableCell>
                  <TableCell>{user.email}</TableCell>
                  <TableCell>{user.phone || "N/A"}</TableCell>
                  <TableCell>
                    <Badge className={getRoleBadgeColor(user.role)}>
                      {user.role.charAt(0).toUpperCase() + user.role.slice(1)}
                    </Badge>
                  </TableCell>
                  <TableCell>
                    <Badge variant={user.is_active ? "default" : "secondary"}>
                      {user.is_active ? "Active" : "Inactive"}
                    </Badge>
                  </TableCell>
                  <TableCell>{new Date(user.created_at).toLocaleDateString()}</TableCell>
                  <TableCell className="text-right">
                    <div className="flex justify-end gap-2">
                      <Button variant="outline" size="sm" asChild>
                        <Link href={`/admin/users/${user.id}/edit`}>
                          <Edit className="h-4 w-4" />
                        </Link>
                      </Button>
                      <AlertDialog>
                        <AlertDialogTrigger asChild>
                          <Button variant="outline" size="sm" className="text-red-600 hover:bg-red-50 bg-transparent">
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </AlertDialogTrigger>
                        <AlertDialogContent>
                          <AlertDialogHeader>
                            <AlertDialogTitle>Delete User</AlertDialogTitle>
                            <AlertDialogDescription>
                              Are you sure you want to delete {user.first_name} {user.last_name}? This action cannot be
                              undone.
                            </AlertDialogDescription>
                          </AlertDialogHeader>
                          <AlertDialogFooter>
                            <AlertDialogCancel>Cancel</AlertDialogCancel>
                            <AlertDialogAction
                              onClick={() => handleDeleteUser(user.id)}
                              className="bg-red-600 hover:bg-red-700"
                            >
                              Delete
                            </AlertDialogAction>
                          </AlertDialogFooter>
                        </AlertDialogContent>
                      </AlertDialog>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>

{filteredUsers.length === 0 && (
            <div className="text-center py-8">
              <p className="text-[#7F8C8D]">No users found matching your criteria.</p>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/users/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/pickup-locations/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Plus, Search, Edit, Trash2, MapPin } from "lucide-react"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"

interface PickupLocation {
  id: string
  name: string
  address: string
  latitude?: number
  longitude?: number
  is_active: boolean
  created_at: string
}

export default function PickupLocationsPage() {
  const [locations, setLocations] = useState<PickupLocation[]>([])
  const [loading, setLoading] = useState(true)
  const [searchTerm, setSearchTerm] = useState("")

// Mock data - replace with actual API calls
  useEffect(() => {
    const mockLocations: PickupLocation[] = [
      {
        id: "1",
        name: "City Center",
        address: "Main Street, Downtown Nairobi",
        latitude: -1.2864,
        longitude: 36.8172,
        is_active: true,
        created_at: "2024-01-15T10:00:00Z",
      },
      {
        id: "2",
        name: "University Campus",
        address: "University Way, Nairobi",
        latitude: -1.2966,
        longitude: 36.8083,
        is_active: true,
        created_at: "2024-01-14T09:00:00Z",
      },
      {
        id: "3",
        name: "Shopping Mall",
        address: "Westlands Mall, Westlands",
        latitude: -1.263,
        longitude: 36.8063,
        is_active: false,
        created_at: "2024-01-13T08:00:00Z",
      },
    ]

setTimeout(() => {
      setLocations(mockLocations)
      setLoading(false)
    }, 1000)
  }, [])

const handleDeleteLocation = async (locationId: string) => {
    // Mock delete - replace with actual API call
    setLocations(locations.filter((location) => location.id !== locationId))
  }

const filteredLocations = locations.filter(
    (location) =>
      location.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      location.address.toLowerCase().includes(searchTerm.toLowerCase()),
  )

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-[#2C3E50]">Pickup Locations</h1>
          <p className="text-[#7F8C8D]">Manage pickup and drop-off points</p>
        </div>
        <Button asChild className="bg-[#27AE60] hover:bg-[#229954]">
          <Link href="/admin/pickup-locations/create">
            <Plus className="h-4 w-4 mr-2" />
            Add Location
          </Link>
        </Button>
      </div>

{/* Search */}
      <Card>
        <CardContent className="pt-6">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
            <Input
              placeholder="Search locations..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-10"
            />
          </div>
        </CardContent>
      </Card>

{/* Locations Table */}
      <Card>
        <CardHeader>
          <CardTitle>All Locations ({filteredLocations.length})</CardTitle>
          <CardDescription>Manage pickup and drop-off locations</CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Name</TableHead>
                <TableHead>Address</TableHead>
                <TableHead>Coordinates</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Created</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredLocations.map((location) => (
                <TableRow key={location.id}>
                  <TableCell>
                    <div className="flex items-center gap-2">
                      <MapPin className="h-4 w-4 text-[#27AE60]" />
                      <span className="font-medium text-[#2C3E50]">{location.name}</span>
                    </div>
                  </TableCell>
                  <TableCell>{location.address}</TableCell>
                  <TableCell>
                    {location.latitude && location.longitude ? (
                      <span className="text-sm text-[#7F8C8D]">
                        {location.latitude.toFixed(4)}, {location.longitude.toFixed(4)}
                      </span>
                    ) : (
                      <span className="text-sm text-[#7F8C8D]">Not set</span>
                    )}
                  </TableCell>
                  <TableCell>
                    <Badge variant={location.is_active ? "default" : "secondary"}>
                      {location.is_active ? "Active" : "Inactive"}
                    </Badge>
                  </TableCell>
                  <TableCell>{new Date(location.created_at).toLocaleDateString()}</TableCell>
                  <TableCell className="text-right">
                    <div className="flex justify-end gap-2">
                      <Button variant="outline" size="sm" asChild>
                        <Link href={`/admin/pickup-locations/${location.id}/edit`}>
                          <Edit className="h-4 w-4" />
                        </Link>
                      </Button>
                      <AlertDialog>
                        <AlertDialogTrigger asChild>
                          <Button variant="outline" size="sm" className="text-red-600 hover:bg-red-50 bg-transparent">
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </AlertDialogTrigger>
                        <AlertDialogContent>
                          <AlertDialogHeader>
                            <AlertDialogTitle>Delete Location</AlertDialogTitle>
                            <AlertDialogDescription>
                              Are you sure you want to delete "{location.name}"? This action cannot be undone and may
                              affect existing routes.
                            </AlertDialogDescription>
                          </AlertDialogHeader>
                          <AlertDialogFooter>
                            <AlertDialogCancel>Cancel</AlertDialogCancel>
                            <AlertDialogAction
                              onClick={() => handleDeleteLocation(location.id)}
                              className="bg-red-600 hover:bg-red-700"
                            >
                              Delete
                            </AlertDialogAction>
                          </AlertDialogFooter>
                        </AlertDialogContent>
                      </AlertDialog>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>

{filteredLocations.length === 0 && (
            <div className="text-center py-8">
              <p className="text-[#7F8C8D]">No locations found matching your criteria.</p>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/pickup-locations/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/pickup-locations/create/page.tsx" isMerged="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 { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Switch } from "@/components/ui/switch"
import { ArrowLeft, Save, MapPin } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

export default function CreatePickupLocationPage() {
  const router = useRouter()
  const { toast } = useToast()
  const [loading, setLoading] = useState(false)
  const [formData, setFormData] = useState({
    name: "",
    address: "",
    latitude: "",
    longitude: "",
    is_active: true,
  })

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

try {
      // Mock API call - replace with actual implementation
      await new Promise((resolve) => setTimeout(resolve, 1000))

toast({
        title: "Success",
        description: "Pickup location created successfully",
      })

router.push("/admin/pickup-locations")
    } catch (error) {
      toast({
        title: "Error",
        description: "Failed to create pickup location",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

const handleInputChange = (field: string, value: string | boolean) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <Button variant="ghost" size="icon" asChild>
          <Link href="/admin/pickup-locations">
            <ArrowLeft className="h-4 w-4" />
          </Link>
        </Button>
        <div>
          <h1 className="text-3xl font-bold text-[#2C3E50]">Create Pickup Location</h1>
          <p className="text-[#7F8C8D]">Add a new pickup or drop-off location</p>
        </div>
      </div>

{/* Form */}
      <Card className="max-w-2xl">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <MapPin className="h-5 w-5 text-[#27AE60]" />
            Location Information
          </CardTitle>
          <CardDescription>Enter the details for the new pickup location</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-6">
            <div className="space-y-2">
              <Label htmlFor="name">Location Name *</Label>
              <Input
                id="name"
                value={formData.name}
                onChange={(e) => handleInputChange("name", e.target.value)}
                placeholder="e.g., City Center, University Campus"
                required
              />
            </div>