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 } from '@admin/components/ui/field-styles'; import { dashboardPersistentLayout } from '@admin/layouts/dashboard-page-layout'; import EditServiceFaq from '@admin/pages/service-faqs/edit-service-faq'; import { cn } from '@admin/lib/utils'; import { Head } from '@inertiajs/react'; import { useState } from 'react'; type FaqRow = { id: number; question: string; sort_order: number; is_expanded: boolean; status: boolean; created_at: string; }; type ServiceFaqsIndexProps = { faqs: FaqRow[]; }; function ServiceFaqsIndex({ faqs }: ServiceFaqsIndexProps) { const { canEdit, canDelete } = useCrudPermissions('service-faq'); const [isEditModalOpen, setIsEditModalOpen] = useState(false); const [initialData, setInitialData] = useState(null); const [deleteModal, setDeleteModal] = useState<{ show: boolean; faq: FaqRow | null }>({ show: false, faq: null, }); const columns: DataTableColumn[] = [ { header: 'Order', key: 'sort_order', className: 'w-20' }, { header: 'Question', key: 'question', truncate: true }, { header: 'Expanded', key: 'is_expanded', render: (row) => (row.is_expanded ? 'Yes' : 'No'), }, { header: 'Status', key: 'status' }, ]; const handleEdit = async (row: FaqRow) => { try { const response = await fetch(`/admin/edit_service_faq/${row.id}`); if (!response.ok) { throw new Error('Failed to fetch FAQ'); } const faqData = (await response.json()) as FaqRow; setInitialData(faqData); setIsEditModalOpen(true); } catch { adminToast.error('Could not load FAQ details'); } }; return ( <>

FAQs appear in the accordion on the public services page, ordered by display order.

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

setDeleteModal({ show: false, faq: null })} itemName={deleteModal.faq?.question ?? 'this FAQ'} itemType="FAQ" deleteEndpoint={`/admin/api/delete_service_faq/${deleteModal.faq?.id ?? ''}`} loadingMessage="Deleting FAQ..." /> setIsEditModalOpen(false)} initialData={initialData} /> ); } export default Object.assign(ServiceFaqsIndex, { layout: dashboardPersistentLayout('Service FAQs', 'Manage services page accordion questions'), });