import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import AppLayout from '@/layouts/app-layout'; import { type BreadcrumbItem } from '@/types'; import { Head, Link, router } from '@inertiajs/react'; import { ArrowLeft, Edit, Trash2, Shield, Users, Key } from 'lucide-react'; import { showConfirmation, showSuccess, showError } from '@/lib/toast'; interface Permission { id: number; name: string; } interface User { id: number; name: string; email: string; } interface Role { id: number; name: string; guard_name: string; description?: string; permissions?: Permission[]; users?: User[]; users_count?: number; created_at: string; updated_at: string; } interface Props { role: Role; } export default function RolesShow({ role }: Props) { const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: '/dashboard' }, { title: 'Roles', href: '/roles' }, { title: role.name, href: `/roles/${role.id}` }, ]; const handleDelete = () => { showConfirmation( `¿Estás seguro de que quieres eliminar el rol "${role.name}"?`, () => { router.delete(`/roles/${role.id}`, { onSuccess: () => { showSuccess('Rol eliminado exitosamente'); }, onError: () => { showError('Error al eliminar el rol'); } }); } ); }; return (
{/* Header */}

{role.name}

Detalles del rol y sus permisos

{/* Role Details */}
{/* Basic Information */} Información del Rol Detalles básicos del rol

{role.name}

{role.guard_name}

{role.description && (

{role.description}

)}
{role.users_count || 0} usuarios
{role.permissions?.length || 0} permisos
{/* Permissions */} {role.permissions && role.permissions.length > 0 && ( Permisos Asignados Lista de permisos asociados a este rol
{role.permissions.map((permission) => ( {permission.name} ))}
)} {/* Users */} {role.users && role.users.length > 0 && ( Usuarios con este Rol Usuarios que tienen asignado este rol
{role.users.map((user) => (

{user.name}

{user.email}

))}
)} {/* Timestamps */} Información del Sistema

{new Date(role.created_at).toLocaleDateString('es-ES', { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' })}

{new Date(role.updated_at).toLocaleDateString('es-ES', { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' })}

); }