import AdminLayout from '@/layouts/admin/layout'; import { Head, router } from '@inertiajs/react'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Button } from '@/components/ui/button'; import { Table, TableBody, TableHead, TableHeader, TableRow } from '@/components/ui/table'; import { CalendarDays, Plus } from 'lucide-react'; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from '@/components/ui/alert-dialog'; import { useState } from 'react'; import { EventPageProps, EventData } from './types'; import { useEventForm } from './hooks/useEventForm'; import { EventFormDialog } from './components/EventFormDialog'; import { EventTableRow } from './components/EventTableRow'; import { EventEmptyState } from './components/EventEmptyState'; import { EventPagination } from './components/EventPagination'; export default function AdminEventPage({ events, currentRegistrationCount: _currentRegistrationCount, masks }: EventPageProps) { const [showCreateDialog, setShowCreateDialog] = useState(false); const [showEditDialog, setShowEditDialog] = useState(false); const [showDeleteDialog, setShowDeleteDialog] = useState(false); const [selectedEvent, setSelectedEvent] = useState(null); const { form: createForm, resetForm: resetCreateForm } = useEventForm(); const { form: editForm, setEventData } = useEventForm(); const formatNumber = (num: number): string => { return new Intl.NumberFormat('id-ID').format(num); }; const handleCreate = (e: React.FormEvent) => { e.preventDefault(); createForm.post('/admin/event', { onSuccess: () => { setShowCreateDialog(false); resetCreateForm(); }, }); }; const handleEdit = (event: EventData) => { setSelectedEvent(event); setEventData(event); setShowEditDialog(true); }; const handleUpdate = (e: React.FormEvent) => { e.preventDefault(); if (!selectedEvent) return; editForm.put(`/admin/event/${selectedEvent.id}`, { onSuccess: () => { setShowEditDialog(false); setSelectedEvent(null); }, }); }; const handleDelete = (event: EventData) => { setSelectedEvent(event); setShowDeleteDialog(true); }; const confirmDelete = () => { if (!selectedEvent) return; router.delete(`/admin/event/${selectedEvent.id}`, { onSuccess: () => { setShowDeleteDialog(false); setSelectedEvent(null); }, }); }; const handleToggle = (event: EventData) => { router.post(`/admin/event/${event.id}/toggle`); }; const handlePageChange = (page: number) => { if (page < 1 || page > events.last_page) return; router.get('/admin/event', { page }, { preserveState: true }); }; return (

{/* Header */}

Event Management

Manage registration milestone events and rewards

{/* Events Table */} All Events Showing {events.from} - {events.to} of {events.total} events

Name Milestone Progress Reward Claims Status Actions {events.data.length > 0 ? ( events.data.map((event) => ( )) ) : ( )}

{/* Pagination */}

{/* Create Event Dialog */} {/* Edit Event Dialog */} {/* Delete Confirmation Dialog */} Delete Event Are you sure you want to delete "{selectedEvent?.name}"? This action cannot be undone. Cancel Delete ); }