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 EditTeamMember from '@admin/pages/team/members/edit-team-member'; import { cn } from '@admin/lib/utils'; import { Head } from '@inertiajs/react'; import { useState } from 'react'; type MemberRow = { id: number; name: string; photo: string; sort_order: number; position_name: string | null; status: boolean; created_at: string; }; type TeamMembersIndexProps = { members: MemberRow[]; }; function TeamMembersIndex({ members }: TeamMembersIndexProps) { const { canEdit, canDelete } = useCrudPermissions('team-member'); const [isEditModalOpen, setIsEditModalOpen] = useState(false); const [initialData, setInitialData] = useState<(MemberRow & { team_position_id?: number; positions?: [] }) | null>( null, ); const [deleteModal, setDeleteModal] = useState<{ show: boolean; member: MemberRow | null }>({ show: false, member: null, }); const columns: DataTableColumn[] = [ { header: 'Order', key: 'sort_order', className: 'w-20' }, { header: 'Name', key: 'name' }, { header: 'Position', key: 'position_name' }, { header: 'Photo', key: 'photo', render: (row) => row.photo ? (

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

Members are displayed on the public team page in ascending display order.

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

setDeleteModal({ show: false, member: null })} itemName={deleteModal.member?.name ?? 'this team member'} itemType="team member" deleteEndpoint={`/admin/api/delete_team_member/${deleteModal.member?.id ?? ''}`} loadingMessage="Deleting team member..." /> setIsEditModalOpen(false)} initialData={initialData} positions={[]} /> ); } export default Object.assign(TeamMembersIndex, { layout: dashboardPersistentLayout('Team members', 'Manage people shown on the team page'), });