import AuthenticatedLayout from "@/layouts/authenticated-layout"; import { Head, router,Link } from "@inertiajs/react"; import { useState, useEffect } from "react"; type Permission = { id: number; name: string; }; type Role = { id: number; name: string; permissions: Permission[]; }; interface Props { roles: Role[]; } export default function Index({ roles }: Props) { const [editableroles, setEditableroles] = useState([]); function handleDelete(id){ if(confirm("Are you sure you want to delete this user?")){ router.delete(route('roles.destroy', id)); } } return (

Create

roles

{roles.map(({id, name,permissions})=> )}

ID	Name	Permissions
{id}	{name}	{permissions.map((p: Permission) => p.name).join(', ')}	Show Edit

); }