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, Key, Shield, Users } from 'lucide-react'; import { showConfirmation, showSuccess, showError } from '@/lib/toast'; interface Role { id: number; name: string; } interface Permission { id: number; name: string; guard_name: string; description?: string; roles?: Role[]; roles_count?: number; created_at: string; updated_at: string; } interface Props { permissions: Permission; } export default function PermisosShow({ permissions }: Props) { // Handle case where permissions data is not loaded yet if (!permissions) { return (
Cargando...
 ); } const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: '/dashboard' }, { title: 'Permisos', href: '/permissions' }, { title: permissions.name, href: `/permissions/${permissions.id}` }, ]; const handleDelete = () => { showConfirmation( `¿Estás seguro de que quieres eliminar el permiso "${permissions.name}"?`, () => { router.delete(`/permissions/${permissions.id}`, { onSuccess: () => { showSuccess('Permiso eliminado exitosamente'); }, onError: () => { showError('Error al eliminar el permiso'); } }); } ); }; const getPermissionCategory = (name: string) => { if (!name || typeof name !== 'string') { return { category: 'General', color: 'bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-300' }; } if (name.includes('user')) return { category: 'Usuarios', color: 'bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-300' }; if (name.includes('role')) return { category: 'Roles', color: 'bg-purple-100 text-purple-800 dark:bg-purple-900/20 dark:text-purple-300' }; if (name.includes('permission')) return { category: 'Permisos', color: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/20 dark:text-emerald-300' }; if (name.includes('project')) return { category: 'Proyectos', color: 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-300' }; if (name.includes('category')) return { category: 'Categorías', color: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/20 dark:text-emerald-300' }; if (name.includes('institution')) return { category: 'Instituciones', color: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900/20 dark:text-indigo-300' }; return { category: 'General', color: 'bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-300' }; }; const { category, color } = getPermissionCategory(permissions.name); return (
{/* Header */}

{permissions.name}

Detalles del permiso

{/* Permission Details */}
{/* Basic Information */} Información del Permiso Detalles básicos del permiso

{permissions.name}

{permissions.guard_name}

{category}
{permissions.roles?.length || 0} roles
{permissions.description && (

{permissions.description}

)}
{/* Roles */} {permissions.roles && permissions.roles.length > 0 && ( Roles con este Permiso Lista de roles que tienen asignado este permiso
{permissions.roles.map((role) => ( {role.name} ))}
)} {/* Timestamps */} Información del Sistema

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

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

); }