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 EditPortfolio from '@admin/pages/portfolios/edit-portfolio'; import { cn } from '@admin/lib/utils'; import { Head } from '@inertiajs/react'; import { useState } from 'react'; type PortfolioRow = { id: number; title: string; slug: string; tag: string | null; featured_image: string; cover_image: string; project_link: string | null; sort_order: number; status: boolean; created_at: string; }; type PortfoliosIndexProps = { portfolios: PortfolioRow[]; }; function PortfoliosIndex({ portfolios }: PortfoliosIndexProps) { const { canEdit, canDelete } = useCrudPermissions('portfolio'); const [isEditModalOpen, setIsEditModalOpen] = useState(false); const [initialData, setInitialData] = useState(null); const [deleteModal, setDeleteModal] = useState<{ show: boolean; portfolio: PortfolioRow | null }>({ show: false, portfolio: null, }); const columns: DataTableColumn[] = [ { header: 'Order', key: 'sort_order', className: 'w-20' }, { header: 'Title', key: 'title', truncate: true }, { header: 'Tag', key: 'tag' }, { header: 'Featured', key: 'featured_image', render: (row) => row.featured_image ? (

) : ( '—' ), }, { header: 'Project link', key: 'project_link', truncate: true, render: (row) => row.project_link ?? '—', }, { header: 'Status', key: 'status' }, ]; const handleEdit = async (row: PortfolioRow) => { try { const response = await fetch(`/admin/edit_portfolio/${row.id}`); if (!response.ok) { throw new Error('Failed to fetch portfolio item'); } const portfolioData = (await response.json()) as PortfolioRow; setInitialData(portfolioData); setIsEditModalOpen(true); } catch { adminToast.error('Could not load portfolio details'); } }; return ( <>

Slug is generated automatically from the title. Portfolio items are shown on the public site in ascending display order.

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

setDeleteModal({ show: false, portfolio: null })} itemName={deleteModal.portfolio?.title ?? 'this portfolio item'} itemType="portfolio item" deleteEndpoint={`/admin/api/delete_portfolio/${deleteModal.portfolio?.id ?? ''}`} loadingMessage="Deleting portfolio item..." /> setIsEditModalOpen(false)} initialData={initialData} /> ); } export default Object.assign(PortfoliosIndex, { layout: dashboardPersistentLayout('Portfolio', 'Manage projects shown on the portfolio page'), });