import { Head, router } from '@inertiajs/react'; import { ExternalLink, Pencil, Trash2 } from 'lucide-react'; import { useState } from 'react'; import { toast } from 'sonner'; import DashboardLayout from '@/components/dashboard/DashboardLayout'; import { DashboardPageHeader } from '@/components/dashboard/DashboardPageHeader'; import ConfirmDialog from '@/components/dashboard/ConfirmDialog'; import DataTable, { Column, Paginator } from '@/components/dashboard/DataTable'; import FormDialog from '@/components/dashboard/FormDialog'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { TableActionMenu, TableActionMenuContent, TableActionMenuItem, TableActionMenuLabel, TableActionMenuSeparator, TableActionMenuTrigger, } from '@/components/ui/table-action-menu'; import { useTranslation } from '@/contexts/LanguageContext'; import { useAppDate } from '@/lib/date'; import { formatNumber } from '@/lib/format'; import Form from './Form'; interface PageRow { id: number; title: string; slug: string; content: string | null; is_published: boolean; updated_at: string; } interface Props { rows: Paginator; filters: { search: string }; } export default function PagesIndex({ rows, filters }: Props) { const { t } = useTranslation(); const { formatDateTime } = useAppDate(); const [createOpen, setCreateOpen] = useState(false); const [editTarget, setEditTarget] = useState(null); const [deleteTarget, setDeleteTarget] = useState(null); const columns: Column[] = [ { key: 'title', label: t('Title'), cell: (row) => {row.title}, }, { key: 'slug', label: t('Slug'), cell: (row) => ( {row.slug} ), }, { key: 'is_published', label: t('Status'), cell: (row) => ( {row.is_published ? t('Published') : t('Draft')} ), }, { key: 'updated_at', label: t('Updated'), cell: (row) => ( {formatDateTime(row.updated_at)} ), }, ]; function handleDelete() { if (!deleteTarget) return; const title = deleteTarget.title; router.delete(`/dashboard/pages/${deleteTarget.id}`, { preserveScroll: true, onSuccess: () => { toast.success(t(':title deleted', { title })); setDeleteTarget(null); }, onError: (errors) => { toast.error((Object.values(errors)[0] as string) || t('Delete failed')); setDeleteTarget(null); }, }); } return ( setCreateOpen(true)}>{t('New page')}} /> (

{t('Actions')} window.open(`/page/${row.slug}`, '_blank')} > {t('Open public page')} setEditTarget(row)}> {t('Edit')} setDeleteTarget(row)} > {t('Delete')}

)} />

{ setCreateOpen(false); toast.success(t('Page created')); }} /> !open && setEditTarget(null)} title={t('Edit page')} size="lg" > {editTarget && ( { setEditTarget(null); toast.success(t('Page updated')); }} /> )} !open && setDeleteTarget(null)} title={t('Delete ":title"?', { title: deleteTarget?.title ?? '' })} description={t('This cannot be undone.')} confirmLabel={t('Delete')} onConfirm={handleDelete} /> ); }