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 EditSlider from '@admin/pages/sliders/edit-slider'; import { cn } from '@admin/lib/utils'; import { Head } from '@inertiajs/react'; import { useState } from 'react'; type SliderRow = { id: number; title: string; description: string | null; link: string | null; image: string | null; video: string | null; status: boolean; sort_order: number; created_at: string; }; type SliderIndexProps = { sliders: SliderRow[]; }; function SlidersIndex({ sliders }: SliderIndexProps) { const { canEdit, canDelete } = useCrudPermissions('slider'); const [isEditModalOpen, setIsEditModalOpen] = useState(false); const [initialData, setInitialData] = useState(null); const [deleteModal, setDeleteModal] = useState<{ show: boolean; slider: SliderRow | null }>({ show: false, slider: null }); const columns: DataTableColumn[] = [ { header: 'Order', key: 'sort_order', className: 'w-20' }, { header: 'Title', key: 'title' }, { header: 'Link', key: 'link', truncate: true, render: (row) => row.link ?? '—', }, { header: 'Description', key: 'description', truncate: true, className: 'w-[28%] max-w-[14rem]', }, { header: 'Media', key: 'image', render: (row) => row.image ? (

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

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

setDeleteModal({ show: false, slider: null })} itemName={deleteModal.slider?.title ?? 'this slider'} itemType="slider" deleteEndpoint={`/admin/api/delete_slider/${deleteModal.slider?.id ?? ''}`} loadingMessage="Deleting slider..." /> setIsEditModalOpen(false)} initialData={initialData} /> ); } export default Object.assign(SlidersIndex, { layout: dashboardPersistentLayout('Sliders', 'Manage homepage hero sliders'), });