import { useTranslation } from '@/hooks/use-translation'; import React, { useMemo } from 'react'; import { Head, Link, router } from '@inertiajs/react'; import AppLayout from '@/layouts/app-layout'; import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; import { ArrowLeft, Plus, Edit, Trash2, DollarSign, Ticket } from 'lucide-react'; import { BreadcrumbItem, EventTicketType } from '@/types'; interface Event { id: number; name: string; event_start: string; event_end?: string; } interface Props { event: Event; ticketTypes: EventTicketType[]; } const categoryColors: Record = { early_bird: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400', adult: 'bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400', child: 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400', member: 'bg-purple-100 text-purple-800 dark:bg-purple-900/20 dark:text-purple-400', nonmember: 'bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400', general: 'bg-slate-100 text-slate-800 dark:bg-slate-900/20 dark:text-slate-400', vip: 'bg-rose-100 text-rose-800 dark:bg-rose-900/20 dark:text-rose-400', }; const categoryLabels: Record = { early_bird: 'Early Bird', adult: 'Adult', child: 'Child', member: 'Member', nonmember: 'Non-Member', general: 'General', vip: 'VIP', }; export default function TicketTypesIndex({ event, ticketTypes }: Readonly) { const { t } = useTranslation(); const breadcrumbs: BreadcrumbItem[] = useMemo(() => [ { title: 'Dashboard', href: '/dashboard' }, { title: 'Events', href: '/admin/events' }, { title: event.name, href: `/admin/events/${event.id}` }, { title: 'Ticket Types', href: `/admin/events/${event.id}/ticket-types` }, ], [event.id, event.name]); const handleDelete = (ticketType: EventTicketType) => { if (confirm(`Are you sure you want to delete "${ticketType.name}"?`)) { router.delete(`/admin/events/${event.id}/ticket-types/${ticketType.id}`); } }; const formatCurrency = (amount: string) => { return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', }).format(parseFloat(amount)); }; const getAvailability = (ticketType: EventTicketType) => { if (ticketType.quantity_available === null) { return 'Unlimited'; } const remaining = (ticketType.quantity_available ?? 0) - ticketType.quantity_sold; return `${remaining} / ${ticketType.quantity_available}`; }; return (

{/* Header */}

{t('Ticket Types')}

{event.name}

{/* Ticket Types Table */}

{ticketTypes.length > 0 ? ( ticketTypes.map((ticketType) => ( )) ) : ( )}

{t('Name')}	{t('Category')}	{t('Price')}	{t('Availability')}	{t('Sale Period')}	{t('Status')}	{t('Actions')}
{ticketType.name} {ticketType.description && ( {ticketType.description} )}	{categoryLabels[ticketType.category]}	{formatCurrency(ticketType.price)}	{getAvailability(ticketType)}	{ticketType.sale_starts && ticketType.sale_ends ? ( <> {new Date(ticketType.sale_starts).toLocaleDateString()} -{' '} {new Date(ticketType.sale_ends).toLocaleDateString()} ) : ticketType.sale_starts ? ( `From ${new Date(ticketType.sale_starts).toLocaleDateString()}` ) : ticketType.sale_ends ? ( `Until ${new Date(ticketType.sale_ends).toLocaleDateString()}` ) : ( 'Always available' )}	{ticketType.active ? 'Active' : 'Inactive'}
{t('No ticket types found')} {t('Get started by creating your first ticket type.')}

); }