import { adminToast } from '@admin/components/ui/admin-toast'; import { CrudCreateLink } from '@admin/components/ui/crud-create-link'; import { DataTable, type DataTableColumn } from '@admin/components/ui/data-table'; import { useCrudPermissions } from '@admin/hooks/use-crud-permissions'; import { DeleteConfirmationModal } from '@admin/components/ui/delete-confirmation-modal'; import { formHelpClassName, mediaPreviewClassName } from '@admin/components/ui/field-styles'; import { dashboardPersistentLayout } from '@admin/layouts/dashboard-page-layout'; import EditUpdate from '@admin/pages/updates/edit-update'; import { cn } from '@admin/lib/utils'; import { Head } from '@inertiajs/react'; import { useState } from 'react'; type UpdateRow = { id: number; title: string; slug: string; featured_image: string; tags: string; status: boolean; created_at: string; }; type UpdatesIndexProps = { updates: UpdateRow[]; }; function UpdatesIndex({ updates }: UpdatesIndexProps) { const { canEdit, canDelete } = useCrudPermissions('update'); const [isEditModalOpen, setIsEditModalOpen] = useState(false); const [initialData, setInitialData] = useState(null); const [deleteModal, setDeleteModal] = useState<{ show: boolean; update: UpdateRow | null }>({ show: false, update: null, }); const columns: DataTableColumn[] = [ { header: 'Title', key: 'title', truncate: true }, { header: 'Featured', key: 'featured_image', render: (row) => row.featured_image ? (

) : ( '—' ), }, { header: 'Tags', key: 'tags', truncate: true, render: (row) => row.tags || '—', }, { header: 'Status', key: 'status' }, ]; const handleEdit = async (row: UpdateRow) => { try { const response = await fetch(`/admin/edit_update/${row.id}`); if (!response.ok) { throw new Error('Failed to fetch update'); } const updateData = (await response.json()) as UpdateRow; setInitialData(updateData); setIsEditModalOpen(true); } catch { adminToast.error('Could not load update details'); } }; return ( <>

Slug is generated automatically from the title.

setDeleteModal({ show: true, update: row }) : undefined} showEdit={canEdit} showDelete={canDelete} noDataText="No updates found" />

setDeleteModal({ show: false, update: null })} itemName={deleteModal.update?.title ?? 'this update'} itemType="update" deleteEndpoint={`/admin/api/delete_update/${deleteModal.update?.id ?? ''}`} loadingMessage="Deleting update..." /> setIsEditModalOpen(false)} initialData={initialData} /> ); } export default Object.assign(UpdatesIndex, { layout: dashboardPersistentLayout('Updates', 'Manage news and blog updates'), });