import { Head, Link } from '@inertiajs/react'; import { ArrowLeft, CarFront, CheckCircle2, Clock3, Copy, MessageCircle, Navigation, Phone, RefreshCw, ShieldCheck } from 'lucide-react'; import { useState } from 'react'; import SiteFooter from '@/components/home/site-footer'; import SiteHeader from '@/components/home/site-header'; import RouteMap, { type MapPoint } from '@/components/booking/route-map'; import type { BookingSummary } from '@/types/booking'; type Props = { booking: BookingSummary }; export default function Tracking({ booking }: Props) { const [copied, setCopied] = useState(false); const hasCoordinates = booking.pickup_lat !== null && booking.pickup_lng !== null; const points: MapPoint[] = [ ...(hasCoordinates ? [{ label: 'P', lat: booking.pickup_lat!, lng: booking.pickup_lng!, color: '#0b1f33' }] : []), ...(booking.destination_lat !== null && booking.destination_lng !== null ? [{ label: 'D', lat: booking.destination_lat, lng: booking.destination_lng, color: '#059669' }] : []), ]; const shareTrip = async () => { const url = window.location.href; if (navigator.share) { await navigator.share({ title: `ZozTrip ${booking.reference}`, url }); } else { await navigator.clipboard.writeText(url); setCopied(true); window.setTimeout(() => setCopied(false), 1800); } }; return ( <>

Go back

Route overview · On schedule

{booking.status === 'confirmed' ? 'Journey scheduled' : booking.status_label}

{booking.pickup_at_label}

Route preview is based on your confirmed pickup and destination.

{hasCoordinates ? :

Live map is waiting for route coordinates

This booking does not have verified map coordinates yet. Location sharing will appear here once the pickup and destination are confirmed.

}

{hasCoordinates ? 'Route coordinates verified' : 'Waiting for GPS signal'}

{hasCoordinates ? 'Pickup and destination mapped from your booking' : 'No fake vehicle position is shown'}

); } function TimelineItem({ color, title, time, last = false }: { color: 'green' | 'blue'; title: string; time: string; last?: boolean }) { return

{!last && }

{title}

{time}

; }