import { useState } from 'react'; import { Head, Link, router } from '@inertiajs/react'; import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; import AppLayout from '@/layouts/app-layout'; import { type BreadcrumbItem } from '@/types'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from '@/components/ui/card'; import { Checkbox } from '@/components/ui/checkbox'; import { ArrowLeft, Save, Users } from 'lucide-react'; interface UsuarioRolesProps { entity: { id: number; name: string; email: string; roles: Array<{ id: number; name: string; }>; }; roles: Array<{ id: number; name: string; }>; } const breadcrumbs: BreadcrumbItem[] = [ { title: 'Usuarios', href: '/users', }, { title: 'Gestionar Roles', href: '#', }, ]; export default function UsuarioRoles({ entity, roles }: UsuarioRolesProps) { const [selectedRoles, setSelectedRoles] = useState( entity.roles.map(role => role.id) ); const [processing, setProcessing] = useState(false); const handleRoleToggle = (roleId: number) => { setSelectedRoles(prev => prev.includes(roleId) ? prev.filter(id => id !== roleId) : [...prev, roleId] ); }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); setProcessing(true); router.post(`/usuarios/${entity.id}/roles`, { roles: selectedRoles }, { onSuccess: () => { toast.success('Roles actualizados exitosamente'); setProcessing(false); }, onError: () => { toast.error('Error al actualizar los roles'); setProcessing(false); }, }); }; return (
Gestionar Roles Asignar roles al usuario: {entity.name}
{roles.map((role) => (
handleRoleToggle(role.id)} />
))}
); }