import AppLayout from '@/layouts/app-layout'; import Heading from '@/components/heading'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Head, Link } from '@inertiajs/react'; import { ArrowLeft, Shield, Users, Key } from 'lucide-react'; interface Permission { id: number; name: string; description: string; } interface Role { id: number; name: string; level: number; description: string; users_count: number; permissions: Permission[]; created_at: string; } interface Props { role: Role; } export default function Show({ role }: Props) { const roleData = role || { id: 0, name: '', level: 0, description: '', users_count: 0, permissions: [], created_at: '' }; const permissions = Array.isArray(roleData.permissions) ? roleData.permissions : []; return (
Role Level
{roleData.level}
 Total Users
{Number(roleData.users_count || 0)}
Permissions
{permissions.length}
Role Information {roleData.description || 'No description available'}

Created Date

{new Date(roleData.created_at).toLocaleDateString()}

Assigned Permissions {permissions.length === 0 ? (

No permissions assigned to this role

) : (
{permissions.map((permission) => (
{permission.name} {permission.description && (

{permission.description}

)}
))}
)}
); }