import FlashMessages from '@/components/seating/flash-messages'; import { type SeatingChart } from '@/components/seating/types'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Textarea } from '@/components/ui/textarea'; import { useTranslation } from '@/hooks/use-translation'; import AppLayout from '@/layouts/app-layout'; import { type BreadcrumbItem } from '@/types'; import { Head, Link, router, useForm } from '@inertiajs/react'; import { Armchair, CalendarRange, LayoutGrid, Pencil, Plus, Trash2 } from 'lucide-react'; import { type FormEvent, useState } from 'react'; interface Props { charts: SeatingChart[]; } const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: '/dashboard' }, { title: 'High Holy Day Seating', href: '/admin/seating-seasons' }, { title: 'Seating Charts', href: '/admin/seating-charts' }, ]; export default function SeatingChartsIndex({ charts }: Readonly) { const { t } = useTranslation(); const [creating, setCreating] = useState(false); const { data, setData, post, processing, errors, reset, progress } = useForm<{ name: string; description: string; image: File | null }>({ name: '', description: '', image: null, }); const submit = (e: FormEvent) => { e.preventDefault(); post('/admin/seating-charts', { forceFormData: true, onSuccess: () => reset() }); }; const destroy = (chart: SeatingChart) => { if (confirm(t('Delete the seating chart ":name" and all of its seats?', { name: chart.name }))) { router.delete(`/admin/seating-charts/${chart.id}`); } }; return (

{t('Seating Charts')}

{t('Floor plans of your sanctuary with the seats placed on them. Charts are reused from year to year.')}

{charts.length === 0 ? (

{t('Upload a floor plan of your sanctuary to start placing seats.')}

) : (

{charts.map((chart) => ( {chart.image_url ? (

) : (

)} {chart.name} {chart.description && {chart.description}}

{t(':count seats', { count: chart.seats_count ?? 0 })} {t(':count seasons', { count: chart.seasons_count ?? 0 })}

))}

)}