import { Head, Link } from '@inertiajs/react'; import { useMemo, useState } from 'react'; import { ArrowLeft, ArrowRight, CalendarDays, CheckCircle2, Clock3, Download, History, Search, } from 'lucide-react'; import SiteFooter from '@/components/home/site-footer'; import SiteHeader from '@/components/home/site-header'; import { home } from '@/routes'; import { confirmation } from '@/routes/booking'; import type { BookingSummary } from '@/types/booking'; type Props = { trips: BookingSummary[] }; type Filter = 'upcoming' | 'active' | 'completed' | 'cancelled'; const cardClass = 'rounded-2xl border border-navy/10 bg-white shadow-[0_8px_30px_-18px_rgba(11,31,51,0.24)] dark:border-white/10 dark:bg-ocean'; export default function Bookings({ trips }: Props) { const [filter, setFilter] = useState('upcoming'); const [query, setQuery] = useState(''); const now = new Date(); const counts = useMemo(() => ({ upcoming: trips.filter((trip) => trip.status === 'confirmed' && new Date(trip.pickup_at_iso) >= now).length, active: trips.filter((trip) => trip.status === 'confirmed' && new Date(trip.pickup_at_iso) < now).length, completed: trips.filter((trip) => trip.status === 'completed').length, cancelled: trips.filter((trip) => trip.status === 'cancelled').length, }), [trips, now]); const visibleTrips = trips.filter((trip) => { const matchesFilter = filter === 'upcoming' ? trip.status === 'confirmed' && new Date(trip.pickup_at_iso) >= now : filter === 'active' ? trip.status === 'confirmed' && new Date(trip.pickup_at_iso) < now : trip.status === filter; const text = `${trip.reference} ${trip.pickup} ${trip.destination ?? ''} ${trip.vehicle}`.toLowerCase(); return matchesFilter && text.includes(query.toLowerCase()); }); const tabs: { id: Filter; label: string; count: number; icon: typeof Clock3 }[] = [ { id: 'upcoming', label: 'Upcoming', count: counts.upcoming, icon: Clock3 }, { id: 'active', label: 'Active', count: counts.active, icon: CalendarDays }, { id: 'completed', label: 'Completed', count: counts.completed, icon: CheckCircle2 }, { id: 'cancelled', label: 'Cancelled', count: counts.cancelled, icon: History }, ]; return ( <>
Go back

My Journeys & Bookings

Manage your upcoming rides, track active journeys, and review your complete booking history.

Book a New Ride
{tabs.map(({ id, label, count, icon: Icon }) => ( ))}
{visibleTrips.map((trip) => { const isUpcoming = trip.status === 'confirmed' && new Date(trip.pickup_at_iso) >= now; return (
#{trip.reference}· {trip.service}
{isUpcoming ? 'Upcoming' : trip.status_label}

{trip.pickup}

{trip.pickup_at_label}

{trip.destination &&

{trip.destination}

{trip.duration ?? 'Destination transfer'}

}

Vehicle

{trip.vehicle}

{trip.passengers} passengers · {trip.bags} bags

Total fare

{trip.fare}

View booking
); })} {visibleTrips.length === 0 &&

No bookings found

Try another tab or book your next ride.

}
); }