import { useTranslation } from '@/hooks/use-translation'; import { Head, Link } from '@inertiajs/react'; import AppLayout from '@/layouts/app-layout'; import { Calendar, MapPin, Users, Clock } from 'lucide-react'; import { useState } from 'react'; import EventRegistrationDialog from '@/components/event-registration-dialog'; interface Event { id: number; name: string; tagline: string | null; event_start: string; event_end: string | null; location: string | null; all_day: boolean; registration_starts?: string | null; registration_ends?: string | null; maxrsvp?: number | null; members_only?: boolean; allow_guests: boolean; max_guests: number | null; ticket_types: TicketType[]; has_paid_tickets: boolean; } interface TicketType { id: number; name: string; description: string | null; price: number; quantity_available: number | null; remaining_quantity: number | null;} interface RSVP { id: number; status: string; guests: number; notes: string | null; created_at: string; event: Event; } interface Props { upcomingRsvps: RSVP[]; pastRsvps: RSVP[]; availableEvents: Event[]; } export default function EventsPage({ upcomingRsvps, pastRsvps, availableEvents }: Props) { const { t } = useTranslation(); const [selectedEvent, setSelectedEvent] = useState(null); const [isDialogOpen, setIsDialogOpen] = useState(false); const handleRegisterClick = (event: Event) => { setSelectedEvent(event); setIsDialogOpen(true); }; const formatDateTime = (dateTime: string, allDay: boolean) => { const date = new Date(dateTime); if (allDay) { return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }); } return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit' }); }; const getStatusBadge = (status: string) => { const colors = { confirmed: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300', pending: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300', cancelled: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300', }; return colors[status as keyof typeof colors] || 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-300'; }; return (

{t('My Events')}

{t('View your RSVPs and upcoming events')}

{t('Back to Dashboard')}
{/* Upcoming RSVPs */}

{t('My Upcoming Events')}

{upcomingRsvps.length === 0 ? (

{t('You have no upcoming event RSVPs')}

) : (
{upcomingRsvps.map((rsvp) => (

{rsvp.event.name}

{rsvp.event.tagline && (

{rsvp.event.tagline}

)}
{formatDateTime(rsvp.event.event_start, rsvp.event.all_day)}
{rsvp.event.location && (
{rsvp.event.location}
)} {rsvp.guests > 0 && (
{rsvp.guests} guest{rsvp.guests !== 1 ? 's' : ''}
)}
{rsvp.notes && (

Note: {rsvp.notes}

)}
{rsvp.status.charAt(0).toUpperCase() + rsvp.status.slice(1)}
))}
)}
{/* Available Events to Register */}

{t('Available Events')}

{availableEvents.length === 0 ? (

{t('No events available for registration at this time')}

) : (
{availableEvents.map((event) => (

{event.name}

{event.tagline && (

{event.tagline}

)}
{formatDateTime(event.event_start, event.all_day)}
{event.location && (
{event.location}
)} {event.allow_guests && (
{t('Guests allowed')} {event.max_guests && ` (max ${event.max_guests})`}
)}
{event.registration_ends && (

Registration closes: {formatDateTime(event.registration_ends, false)}

)}
))}
)}
{/* Past RSVPs */} {pastRsvps.length > 0 && (

{t('Past Events')}

{pastRsvps.map((rsvp) => (

{rsvp.event.name}

{rsvp.event.tagline && (

{rsvp.event.tagline}

)}
{formatDateTime(rsvp.event.event_start, rsvp.event.all_day)}
{rsvp.event.location && (
{rsvp.event.location}
)} {rsvp.guests > 0 && (
{rsvp.guests} guest{rsvp.guests !== 1 ? 's' : ''}
)}
{rsvp.status.charAt(0).toUpperCase() + rsvp.status.slice(1)}
))}
)}
setIsDialogOpen(false)} /> ); }