import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import AppLayout from '@/layouts/app-layout'; import { PageProps } from '@/types/global'; import { Head, Link, usePage } from '@inertiajs/react'; import { ArrowLeft, ChevronRight, Edit, Trash } from 'lucide-react'; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from '@/components/ui/alert-dialog'; import { router } from '@inertiajs/react'; declare const route: (...args: any[]) => string; interface Permission { id: number; name: string; slug: string; group_name: string; } interface Role { id: number; uid: string; name: string; slug: string; status: string; permissions: Permission[]; created_at: string; updated_at: string; } export default function View() { // @ts-ignore const { role } = usePage().props as { role: Role }; const handleDelete = () => { router.delete(route('admin.roles.destroy', role.uid)); }; // Group permissions by group_name const groupedPermissions = role.permissions.reduce( (acc, perm) => { if (!acc[perm.group_name]) { acc[perm.group_name] = []; } acc[perm.group_name].push(perm); return acc; }, {} as Record ); const statusColorMap: Record = { active: 'bg-green-100 text-green-800', inactive: 'bg-gray-100 text-gray-800', deleted: 'bg-red-100 text-red-800', }; return ( <>
{/* Header */}

{role.name}

@{role.slug}

Delete Role Are you sure you want to delete this role? This action cannot be undone. Cancel Delete
{/* Role Details */}
Status {role.status} Permissions

{role.permissions.length}

Total permissions assigned
{/* Permissions by Group */} Permissions Permissions grouped by category {Object.entries(groupedPermissions).map(([groupName, permissions]) => (

{groupName}

{permissions.map((perm) => (

{perm.name}

{perm.slug}

))}
))} {role.permissions.length === 0 && (

No permissions assigned to this role

)} {/* Timestamps */} Information

Created

{role.created_at}

Last Updated

{role.updated_at}
); } View.layout = (page: React.ReactNode) => ( {page} );