import { useTranslation } from '@/hooks/use-translation'; import React, { useState } from 'react'; import { Head, Link, router } from '@inertiajs/react'; import AppLayout from '@/layouts/app-layout'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Trash2, Edit, Plus, Search, Eye, Calendar, Clock, MapPin, Users } from 'lucide-react'; import { Badge } from "@/components/ui/badge"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { BreadcrumbItem } from '@/types'; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: '/dashboard', }, { title: 'Events', href: '/admin/events', } ]; interface Calendar { id: number; name: string; members_only: boolean; public: boolean; } interface Event { id: number; title: string; description?: string; start_date: string; end_date?: string; all_day: boolean; location?: string; members_only: boolean; calendar: Calendar; created_at: string; updated_at: string; } interface PaginationData { current_page: number; data: Event[]; first_page_url: string; from: number; last_page: number; last_page_url: string; links: Array<{ url?: string; label: string; active: boolean; }>; next_page_url?: string; path: string; per_page: number; prev_page_url?: string; to: number; total: number; } interface Props { events: PaginationData; calendars: Calendar[]; filters: { search?: string; calendar?: string; }; } export default function EventsIndex({ events, calendars, filters }: Props) { const { t } = useTranslation(); const [searchTerm, setSearchTerm] = useState(filters.search || ''); const [selectedCalendar, setSelectedCalendar] = useState(filters.calendar || 'all'); const handleSearch = (e: React.FormEvent) => { e.preventDefault(); router.get('/admin/events', { search: searchTerm, calendar: selectedCalendar === 'all' ? '' : selectedCalendar }, { preserveState: true }); }; const handleCalendarFilter = (calendarId: string) => { setSelectedCalendar(calendarId); router.get('/admin/events', { search: searchTerm, calendar: calendarId === 'all' ? '' : calendarId }, { preserveState: true }); }; const clearFilters = () => { setSearchTerm(''); setSelectedCalendar('all'); router.get('/admin/events', {}, { preserveState: true }); }; const handleDelete = (event: Event) => { if (confirm(`Are you sure you want to delete the event "${event.title}"?`)) { router.delete(`/admin/events/${event.id}`); } }; const formatDateTime = (dateString: string, allDay: boolean) => { const date = new Date(dateString); if (allDay) { return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }); } else { return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }); } }; const formatDateRange = (event: Event) => { const start = formatDateTime(event.start_date, event.all_day); if (event.end_date) { const end = formatDateTime(event.end_date, event.all_day); return <>{start}
{end}; } return start; }; return (
{/* Header */}

{t('Events')}

{t('Manage calendar events and their details')}

{/* Filters */}
setSearchTerm(e.target.value)} className="flex-1" />
{(filters.search || (filters.calendar && filters.calendar !== '')) && ( )}
{/* Events Table */}
{events.data.length > 0 ? ( events.data.map((event) => ( )) ) : ( )}
{t('Event')} {t('Calendar')} {t('Date & Time')} {t('Visibility')} {t('Actions')}
{event.title}
{event.calendar.name}
{formatDateRange(event)}
{event.all_day ? (
{t('All day')}
) : null}
{event.members_only ? ( {t('Members Only')} ) : ( {t('Public')} )}

{t('No events found')}

{filters.search || (filters.calendar && filters.calendar !== '') ? 'No events match your search criteria.' : 'Get started by creating your first event.'}

{/* Pagination */} {events.last_page > 1 && (
{events.prev_page_url && ( )} {events.next_page_url && ( )}

Showing {events.from} to{' '} {events.to} of{' '} {events.total} results

)}
); }