import { useTranslation } from '@/hooks/use-translation'; import { Head, useForm } from '@inertiajs/react'; import AppLayout from '@/layouts/app-layout'; import AsyncMemberSelect from '@/components/async-member-select'; import { Car, Clock, MapPin, Users } from 'lucide-react'; interface RideRequest { id: number; service_at: string; pickup_location: string; passenger_count: number; notes: string | null; requester_name: string; is_mine: boolean; is_claimed_by_me: boolean; driver_name: string | null; contact: { email: string; phone: string | null } | null; } export default function RidesPage({ rideRequests, isAdmin = false }: { rideRequests: RideRequest[]; isAdmin?: boolean }) { const { t } = useTranslation(); const { data, setData, post, processing, errors, reset } = useForm({ member_id: null as number | null, service_at: '', pickup_location: '', passenger_count: 1, notes: '', }); const submit = (event: React.FormEvent) => { event.preventDefault(); post('/member/rides', { onSuccess: () => reset() }); }; const formatServiceTime = (serviceAt: string) => new Date(serviceAt).toLocaleString('en-US', { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit', }); return (

{t('Ride Sharing')}

{t('Request transportation to a service or volunteer to drive a fellow member.')}

Need a ride?

{isAdmin && ( Member

setData('member_id', id)} placeholder={t('Search for a member to create this request for...')} />

{errors.member_id &&

{errors.member_id}

} )} Service date and time setData('service_at', event.target.value)} className="mt-1 w-full rounded-md border bg-transparent p-2" required /> {errors.service_at &&

{errors.service_at}

} Pickup area or address setData('pickup_location', event.target.value)} className="mt-1 w-full rounded-md border bg-transparent p-2" maxLength={255} required /> {errors.pickup_location &&

{errors.pickup_location}

} Passengers setData('passenger_count', Number(event.target.value))} className="mt-1 w-full rounded-md border bg-transparent p-2" required /> Notes (optional) setData('notes', event.target.value)} className="mt-1 w-full rounded-md border bg-transparent p-2" maxLength={1000} />

{isAdmin ? 'All Members\u2019 Upcoming Requests' : 'Upcoming Requests'}

{rideRequests.length === 0 ?

{t('There are no upcoming ride requests.')}

: (

{rideRequests.map((rideRequest) => (

Ride needed by {rideRequest.requester_name}

{formatServiceTime(rideRequest.service_at)} {rideRequest.pickup_location} {rideRequest.passenger_count} passenger{rideRequest.passenger_count === 1 ? '' : 's'}

{rideRequest.notes &&

{rideRequest.notes}

} {rideRequest.driver_name &&

Driver: {rideRequest.driver_name}

} {rideRequest.contact &&

Contact {rideRequest.contact.email}{rideRequest.contact.phone ? ` | ${rideRequest.contact.phone}` : ''}

}

{!rideRequest.is_mine && !rideRequest.driver_name && } {rideRequest.is_mine && {t('Your request')}} {rideRequest.is_claimed_by_me && {t('You are driving')}}

))}

)}

); }