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, Users, Globe } from 'lucide-react'; import { Badge } from "@/components/ui/badge"; import { BreadcrumbItem } from '@/types'; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: '/dashboard', }, { title: 'Calendars', href: '/admin/calendars', }, ]; interface Calendar { id: number; name: string; members_only: boolean; public: boolean; created_at: string; updated_at: string; } interface PaginationData { current_page: number; data: Calendar[]; 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 { calendars: PaginationData; filters: { search?: string; }; } export default function CalendarsIndex({ calendars, filters }: Props) { const { t } = useTranslation(); const [searchTerm, setSearchTerm] = useState(filters.search || ''); const handleSearch = (e: React.FormEvent) => { e.preventDefault(); router.get('/admin/calendars', { search: searchTerm }, { preserveState: true }); }; const clearSearch = () => { setSearchTerm(''); router.get('/admin/calendars', {}, { preserveState: true }); }; const handleDelete = (calendar: Calendar) => { if (confirm(`Are you sure you want to delete the calendar "${calendar.name}"? This will also delete all associated events.`)) { router.delete(`/admin/calendars/${calendar.id}`); } }; const formatDate = (dateString: string) => { return new Date(dateString).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }); }; return (
{/* Header */}

{t('Calendars')}

{t('Manage event calendars and their visibility settings')}

{/* Search */}
setSearchTerm(e.target.value)} className="flex-1" /> {filters.search && ( )}
{/* Calendar Table */}
{calendars.data.length > 0 ? ( calendars.data.map((calendar) => ( )) ) : ( )}
{t('Calendar Name')} {t('Visibility')} {t('Created')} {t('Actions')}
{calendar.name}
{calendar.public ? ( {t('Public')} ) : null} {calendar.members_only ? ( {t('Members Only')} ) : null} {(!calendar.public && !calendar.members_only) ? ( {t('Private')} ) : null}
{formatDate(calendar.created_at)}

{t('No calendars found')}

{filters.search ? 'No calendars match your search criteria.' : 'Get started by creating your first calendar.'}

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

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

)}
); }