import FrontendLayout from '@/layouts/frontend/layout'; import { type BreadcrumbItem, type SharedData } from '@/types'; import { Head, useForm } from '@inertiajs/react'; import { Button } from '@/components/ui/button'; import { CalendarDays, Gift } from 'lucide-react'; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '@/components/ui/dialog'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import { useState, useMemo } from 'react'; import { Label } from '@/components/ui/label'; import { ItemTooltip } from '@/components/game/item-tooltip'; import { toast } from 'sonner'; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: '/dashboard' }, { title: 'Event', href: '/dashboard/event' }, ]; interface EventData { id: number; name: string; milestone: number; min_level: number; item_id: number; item_name: string; item_count: number; is_eligible: boolean; is_claimed: boolean; claimed_at: string | null; claimed_character: string | null; progress: number; } interface Character { id: number; name: string; level: number; } interface EventPageProps extends SharedData { events: EventData[]; currentRegistrationCount: number; userCharacters: Character[]; } export default function EventPage({ events, currentRegistrationCount: _currentRegistrationCount, userCharacters, }: EventPageProps) { const [showClaimDialog, setShowClaimDialog] = useState(false); const [showClaimAllDialog, setShowClaimAllDialog] = useState(false); const [selectedEvent, setSelectedEvent] = useState(null); // Pagination State const [currentPage, setCurrentPage] = useState(0); const itemsPerPage = 6; const totalPages = Math.ceil(events.length / itemsPerPage); const visibleEvents = useMemo(() => { const start = currentPage * itemsPerPage; return events.slice(start, start + itemsPerPage); }, [events, currentPage]); const { data, setData, post, processing, reset } = useForm({ event_id: '', role_id: '', }); const handleOpenClaimDialog = (event: EventData) => { setSelectedEvent(event); setData('event_id', String(event.id)); setShowClaimDialog(true); }; const handleClaimSubmit = (e: React.FormEvent) => { e.preventDefault(); post('/dashboard/event/claim', { onSuccess: () => { setShowClaimDialog(false); reset(); setSelectedEvent(null); toast.success('Reward claimed successfully! Check your in-game mailbox.'); }, onError: (errors: Record) => { console.error('Claim errors:', errors); if (errors.error) { toast.error(errors.error); } else { toast.error('Failed to claim reward. Please try again.'); } }, }); }; const handleClaimAllSubmit = (e: React.FormEvent) => { e.preventDefault(); post('/dashboard/event/claim-all', { onSuccess: () => { setShowClaimAllDialog(false); reset(); toast.success('All rewards claimed successfully!'); }, onError: (errors: Record) => { console.error('Claim all errors:', errors); if (errors.error) { toast.error(errors.error); } else { toast.error('Failed to claim rewards. Please try again.'); } }, }); }; return (

{/* Header */}