import { Head, Link, router } from '@inertiajs/react'; import { Plus, Trash2 } from 'lucide-react'; import { useState } from 'react'; import { ConfirmDialog } from '@/components/admin/confirm-dialog'; import { DataTable, type Column } from '@/components/admin/data-table'; import { Button } from '@/components/ui/button'; interface Country { id: number; name: string; iso_code: string | null; flag: string | null; institutions_count: number } interface Props { countries: { data: Country[]; meta: any; links: any[] }; filters: any } export default function CountriesIndex({ countries }: Props) { const [confirmDeleteId, setConfirmDeleteId] = useState(null); const columns: Column[] = [ { key: 'name', label: 'Country', sortable: true, render: (c) => (

{c.flag && {c.flag}}{c.name}

) }, { key: 'iso_code', label: 'ISO', className: 'hidden md:table-cell', render: (c) => {c.iso_code ?? '—'} }, { key: 'institutions_count', label: 'Institutions', render: (c) => {c.institutions_count} }, { key: 'actions', label: '', className: 'w-20 text-right', render: (c) => (

) }, ]; return ( <>

Countries

{countries.meta.total} countries

!open && setConfirmDeleteId(null)} title="Delete country?" description="This is permanent." confirmLabel="Delete" variant="danger" onConfirm={() => confirmDeleteId !== null && router.delete(`/admin/countries/${confirmDeleteId}`, { onSuccess: () => setConfirmDeleteId(null) })} /> ); }