'use client'; import AdminLayout from '@admin/layouts/admin/admin-layout'; import HeaderWithBackIcon from '@admin/components/header-with-backicon'; import { Card, CardContent, CardHeader, CardTitle } from '@admin/components/ui/card'; import { Head, usePage } from '@inertiajs/react'; import { ChevronRight } from 'lucide-react'; import { Checkbox } from '@admin/components/ui/checkbox'; export default function ViewRole() { const { role } = usePage().props; // Group permissions by group_name const groupedPermissions = (role?.permissions || []).reduce( (acc: Record, permission: any) => { const group = permission.group_name || 'Other'; if (!acc[group]) acc[group] = []; acc[group].push(permission); return acc; }, {} ); return ( <>

{/* Header */}

Roles View

{/* Role details */}

Role Name

Role Slug

{/* Permissions groups */}

{Object.entries(groupedPermissions).map(([group, permissions]) => ( {group} {permissions.map((p: any) => (

{p.name}

))} ))}

); } ViewRole.layout = (page: React.ReactNode) => ( {page} );