import { Head, Link, usePage } from '@inertiajs/react'; import { useState } from 'react'; import { ArrowRight, CalendarClock, CarFront, CheckCircle2, Clock3, History, Navigation, MapPin, Settings, UserRound, } from 'lucide-react'; import SiteFooter from '@/components/home/site-footer'; import SiteHeader from '@/components/home/site-header'; import OnboardingProgress from '@/components/onboarding/onboarding-progress'; import { useInitials } from '@/hooks/use-initials'; import { home } from '@/routes'; import { confirmation, schedule, vehicles } from '@/routes/booking'; import { profile } from '@/routes/onboarding'; import { index as bookingsIndex } from '@/routes/bookings'; import { edit as editAppearance } from '@/routes/appearance'; import { edit as editSettings } from '@/routes/profile'; import { edit as editSecurity } from '@/routes/security'; import type { BookingSummary } from '@/types/booking'; import type { ProfileProgress } from '@/types/profile'; type Props = { progress: ProfileProgress; preferences: { vehicle: string; luggage: string; amenities: string[]; }; trips: BookingSummary[]; activeTrip: BookingSummary | null; pendingTrip: { pickup: string; destination: string | null; pickup_at: string | null; step: 'schedule' | 'vehicles'; } | null; }; const cardClass = 'min-w-0 overflow-hidden rounded-2xl bg-white p-6 shadow-[0_8px_30px_-16px_rgba(11,31,51,0.18)] dark:bg-ocean dark:shadow-none'; export default function CustomerDashboard({ progress, preferences, trips, activeTrip, pendingTrip, }: Props) { const { auth } = usePage().props; const getInitials = useInitials(); const firstName = auth.user.name.split(' ')[0]; const [tripView, setTripView] = useState<'all' | 'upcoming' | 'past'>('all'); const now = new Date(); const upcomingTrips = trips.filter( (trip) => trip.status === 'confirmed' && new Date(trip.pickup_at_iso) >= now, ); const pastTrips = trips.filter( (trip) => trip.status === 'completed' || trip.status === 'cancelled' || (trip.status === 'confirmed' && new Date(trip.pickup_at_iso) < now), ); const visibleTrips = tripView === 'upcoming' ? upcomingTrips : tripView === 'past' ? pastTrips : trips; return ( <>
{auth.user.avatar ? ( {auth.user.name} ) : ( getInitials(auth.user.name) )}

Welcome back

Hi, {firstName}

My bookings Book a ride
{activeTrip && (

Journey in progress

{activeTrip.pickup} → {activeTrip.destination ?? 'Your destination'}

{activeTrip.vehicle} · {activeTrip.reference} · {activeTrip.pickup_at_label}

Track active journey
Trip status is based on the scheduled pickup. Live vehicle location will appear here when chauffeur tracking is connected.
)} {pendingTrip && (

Finish your booking

{pendingTrip.pickup} {pendingTrip.destination && ` → ${pendingTrip.destination}`} {pendingTrip.pickup_at && ` · ${pendingTrip.pickup_at}`}

Continue
)}

Your profile

{progress.current ? 'Complete profile' : 'Edit profile'}

Chauffeur preferences

Change
Vehicle tier
{preferences.vehicle}
Luggage
{preferences.luggage}
Amenities
{preferences.amenities.length > 0 ? preferences.amenities.join(', ') : 'None selected'}

My trips

{trips.length} {trips.length === 1 ? 'trip' : 'trips'}
View all bookings
{[ { id: 'all' as const, label: 'All trips', count: trips.length, icon: CalendarClock }, { id: 'upcoming' as const, label: 'Upcoming', count: upcomingTrips.length, icon: Clock3 }, { id: 'past' as const, label: 'Completed / past', count: pastTrips.length, icon: History }, ].map((tab) => ( ))}
{visibleTrips.length > 0 ? (
    {visibleTrips.map((trip) => { const isUpcoming = trip.status === 'confirmed' && new Date(trip.pickup_at_iso) >= now; const isCompleted = trip.status === 'completed'; const isPastScheduled = trip.status === 'confirmed' && !isUpcoming; return (
  • {trip.pickup_at_label} {isUpcoming ? : isCompleted ? : } {isUpcoming ? 'Upcoming' : isCompleted ? 'Completed' : isPastScheduled ? 'Past trip' : trip.status_label}

    {trip.pickup}{trip.destination && ` → ${trip.destination}`}

    {trip.vehicle} · {trip.passengers} passengers {trip.reference} · {trip.fare}
    • ); })}
) : (

{tripView === 'upcoming' ? 'No upcoming trips' : tripView === 'past' ? 'No completed trips yet' : 'No trips yet'}

Your bookings and trip history will appear here.

Plan a trip
)}

Account

Name, email & photo Password & two-factor Light / dark mode
); }