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 { mediaPreviewClassName, statusBadgeActiveClassName, statusBadgeInactiveClassName } from '@admin/components/ui/field-styles'; import { dashboardPersistentLayout } from '@admin/layouts/dashboard-page-layout'; import EditService from '@admin/pages/services/edit-service'; import { cn } from '@admin/lib/utils'; import { Head } from '@inertiajs/react'; import { useState } from 'react'; type ServiceRow = { id: number; name: string; tag: string | null; icon: string | null; is_featured: boolean; featured_image: string; cover_image: string; summary: string; status: boolean; sort_order: number; created_at: string; }; type ServiceIndexProps = { services: ServiceRow[]; }; function ServicesIndex({ services }: ServiceIndexProps) { const { canEdit, canDelete } = useCrudPermissions('service'); const [isEditModalOpen, setIsEditModalOpen] = useState(false); const [initialData, setInitialData] = useState(null); const [deleteModal, setDeleteModal] = useState<{ show: boolean; service: ServiceRow | null }>({ show: false, service: null, }); const columns: DataTableColumn[] = [ { header: 'Order', key: 'sort_order', className: 'w-20' }, { header: 'Name', key: 'name', truncate: true }, { header: 'Tag', key: 'tag' }, { header: 'Icon', key: 'icon', render: (row) => row.icon ? (

) : ( '—' ), }, { header: 'Featured', key: 'is_featured', render: (row) => ( {row.is_featured ? 'Yes' : 'No'} ), }, { header: 'Image', key: 'featured_image', render: (row) => (

), }, { header: 'Status', key: 'status' }, ]; const handleEdit = async (row: ServiceRow) => { try { const response = await fetch(`/admin/edit_service/${row.id}`); if (!response.ok) { throw new Error('Failed to fetch service'); } const serviceData = (await response.json()) as ServiceRow; setInitialData(serviceData); setIsEditModalOpen(true); } catch { adminToast.error('Could not load service details'); } }; return ( <>

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

setDeleteModal({ show: false, service: null })} itemName={deleteModal.service?.name ?? 'this service'} itemType="service" deleteEndpoint={`/admin/api/delete_service/${deleteModal.service?.id ?? ''}`} loadingMessage="Deleting service..." /> setIsEditModalOpen(false)} initialData={initialData} /> ); } export default Object.assign(ServicesIndex, { layout: dashboardPersistentLayout('Services', 'Manage service offerings'), });