import { Head, Link, router } from '@inertiajs/react'; import { Search } from 'lucide-react'; import type { FormEvent } from 'react'; import { useState } from 'react'; import Heading from '@/components/heading'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card, CardContent } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { dashboard } from '@/routes/admin'; import { index } from '@/routes/admin/bookings'; import type { BookingSummary } from '@/types/booking'; type Paginated = { data: T[]; current_page: number; last_page: number; total: number; prev_page_url: string | null; next_page_url: string | null; }; type Props = { bookings: Paginated; search: string; }; export default function Bookings({ bookings, search }: Props) { const [query, setQuery] = useState(search); const submit = (event: FormEvent) => { event.preventDefault(); router.get(index.url(), query ? { search: query } : {}, { preserveState: true, }); }; return ( <>
setQuery(event.target.value)} placeholder="Reference, name or email" className="pl-9" />
{bookings.data.map((booking) => ( ))} {bookings.data.length === 0 && ( )}
Booking Pickup Route Customer Vehicle Fare

{booking.reference}

{booking.status_label}

{booking.pickup_at_label}

{booking.timezone}

{booking.pickup}

{booking.destination ?? `${booking.hours} hours`}

{booking.contact_name}

{booking.contact_email} {booking.is_guest && ' · guest'}

{booking.vehicle}

{booking.passengers} pax ·{' '} {booking.bags} bags

{booking.fare}
No bookings found.
{bookings.last_page > 1 && (
Page {bookings.current_page} of {bookings.last_page}
{bookings.prev_page_url && ( )} {bookings.next_page_url && ( )}
)}
); } Bookings.layout = { breadcrumbs: [ { title: 'Admin', href: dashboard() }, { title: 'Bookings', href: index() }, ], };