import { adminToast } from '@admin/components/ui/admin-toast'; import { DataTable, type DataTableColumn } from '@admin/components/ui/data-table'; import { useContactMessagePermissions } from '@admin/hooks/use-contact-message-permissions'; import { dashboardPersistentLayout } from '@admin/layouts/dashboard-page-layout'; import { Head, Link } from '@inertiajs/react'; type ContactMessageRow = { id: number; name: string; email: string; phone: string | null; subject: string | null; message: string; is_read: boolean; created_at: string; }; type ContactMessagesIndexProps = { messages: ContactMessageRow[]; }; export default function ContactMessagesIndex({ messages }: ContactMessagesIndexProps) { const { canEdit } = useContactMessagePermissions(); const columns: DataTableColumn[] = [ { header: 'Name', key: 'name' }, { header: 'Email', key: 'email', truncate: true }, { header: 'Phone', key: 'phone' }, { header: 'Subject', key: 'subject', truncate: true, render: (row) => row.subject || 'Website contact', }, { header: 'Message', key: 'message', truncate: true, className: 'max-w-[26rem]' }, { header: 'Status', key: 'is_read', render: (row) => (row.is_read ? 'Read' : 'Unread') }, { header: 'Date', key: 'created_at' }, ]; const handleOpen = async (row: ContactMessageRow) => { if (row.is_read) { return; } try { await fetch(route('admin.contact-messages.read', { contactMessage: row.id }), { method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement | null)?.content ?? '', }, }); window.location.reload(); } catch { adminToast.error('Could not mark message as read'); } }; return ( <>

Use the edit icon to mark a message as read. Visit full thread handling when email replies are enabled.

{canEdit && (
Mark all as read
)}
); } Object.assign(ContactMessagesIndex, { layout: dashboardPersistentLayout('Contact Messages', 'Review and manage website contact submissions'), });