import { Head, router } from '@inertiajs/react'; import { CalendarDays, MapPin, RefreshCw, Sparkles, User, Wrench } from 'lucide-react'; import { useEffect } from 'react'; import { StatusBadge } from '@/components/status-badge'; import { VehicleSizeCategoryIcon } from '@/components/vehicle-size-category-icon'; import { useBookingDateTimeFormatters } from '@/hooks/use-booking-timezone'; type StatusLog = { status: string; note: string | null; created_at: string; }; type BookingTrack = { uuid: string; payment_status: string; service_status: string; scheduled_at: string; service_type: string; technician_name: string | null; package_name: string | null; customer_name: string | null; location_name: string | null; total: number | null; vehicle_size: string | null; vehicle_size_name: string | null; vehicle_size_image_url: string | null; status_logs: StatusLog[]; }; type Props = { booking: BookingTrack; }; function DetailCell({ label, children }: { label: string; children: React.ReactNode }) { return (
{label} {children}
); } const SERVICE_STATUS_ORDER = [ 'scheduled', 'confirmed', 'en_route', 'arrived', 'in_progress', 'completed', 'cancelled', ]; function serviceStatusStep(status: string): number { const idx = SERVICE_STATUS_ORDER.indexOf(status); return idx === -1 ? 0 : idx; } function ServiceProgressBar({ status }: { status: string }) { const step = serviceStatusStep(status); const isCancelled = status === 'cancelled'; const totalSteps = 5; // scheduled → completed (0–5) const pct = isCancelled ? 100 : Math.round((step / totalSteps) * 100); const labels = ['Scheduled', 'Confirmed', 'En Route', 'Arrived', 'In Progress', 'Done']; return (
{labels.map((label, i) => ( {label} ))}
); } export default function TrackShow({ booking }: Props) { const { formatDate, formatTime } = useBookingDateTimeFormatters(); useEffect(() => { const id = window.setInterval(() => { router.reload({ only: ['booking'] }); }, 15000); return () => window.clearInterval(id); }, []); const dateStr = formatDate(booking.scheduled_at); const timeStr = formatTime(booking.scheduled_at); return ( <>
{/* Header — mirrors complete.tsx style */}

Track Booking

Live updates every 15 seconds

#{booking.uuid.slice(0, 8)}

{/* Ticket */}
{/* TOP — package + progress */}
Car Wash

{booking.package_name ?? booking.service_type}

{booking.location_name && (
{booking.location_name}
)}
{booking.technician_name && (
Technician
{booking.technician_name}
)}
{/* Dashed divider */}
{/* BOTTOM — booking details grid */}
{dateStr} {timeStr} {booking.customer_name && ( {booking.customer_name} )} {booking.vehicle_size && ( {booking.vehicle_size_name ?? booking.vehicle_size} )} {booking.total !== null && ( ${((booking.total ?? 0) / 100).toFixed(2)} )} {booking.uuid.slice(0, 8)}
{/* Timeline */} {booking.status_logs.length > 0 ? (

Timeline

{/* Vertical connecting line */}
{booking.status_logs.map((log, index) => (
{new Date(log.created_at).toLocaleString('en-US', { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit', })}
{log.note && (

{log.note}

)}
))}
) : (

No status updates yet.

)}
); }