import { Form, Head, usePage } from '@inertiajs/react'; import { useState } from 'react'; import HeadingSmall from '@/components/heading-small'; import { SortableHeader, useSort } from '@/components/sortable-header'; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from '@/components/ui/dialog'; import AppLayout from '@/layouts/app-layout'; import { index, store, update, destroy, send } from '@/routes/admin/reports'; import { store as storeSubscriber, update as updateSubscriber, destroy as destroySubscriber, } from '@/routes/admin/reports/subscribers'; type Subscriber = { id: number; report_id: number; name: string; email: string; is_enabled: boolean; }; type Report = { id: number; name: string; slug: string; description: string | null; is_enabled: boolean; subscribers_count: number; active_subscribers_count: number; subscribers: Subscriber[]; }; type Props = { reports: Report[]; }; const breadcrumbs = [{ title: 'Reports', href: index.url() }]; export default function Reports({ reports }: Props) { const { props: { flash } } = usePage<{ flash: { success?: string } }>(); const [createOpen, setCreateOpen] = useState(false); const [editingId, setEditingId] = useState(null); const [subscribersReportId, setSubscribersReportId] = useState(null); const [editingSubscriberId, setEditingSubscriberId] = useState(null); const [addSubscriberOpen, setAddSubscriberOpen] = useState(false); const { sorted, sortColumn, sortDirection, toggleSort } = useSort(reports, 'name'); const subscribersReport = reports.find((r) => r.id === subscribersReportId) ?? null; return (

Reports

{flash?.success && (
{flash.success}
)}
Add report Create a new automated report configuration.
setCreateOpen(false)} > {({ processing, errors }) => (
{errors.name && (
{errors.name}
)}
{errors.slug && (
{errors.slug}
)}