import RoleForm from '@/components/all-forms/RoleForm'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import AppLayout from '@/layouts/app-layout'; import { Head, Link, usePage } from '@inertiajs/react'; import { ArrowLeft, KeyRound, Lock, Shield, Users } from 'lucide-react'; import type { ReactNode } from 'react'; declare const route: (...args: any[]) => string; export default function View() { const { roleModuleScopes, role, modulePermissions } = usePage().props; const initialData = { name: role?.name ?? '', slug: role?.slug ?? '', type: role?.type ?? 1, primary_access_level: role?.primary_access_level ?? 1, status: role?.status ?? 1, permissions: (role?.permissions ?? []).map((p: any) => (typeof p === 'string' ? p : p.slug)), moduleScopes: roleModuleScopes ?? {}, }; const permissionsCount: number = initialData.permissions.length; const isActive = role?.status === 1; const infoItems = [ { label: 'Role Type', value: role?.type_label ?? '—', icon: Shield, iconClass: 'text-blue-600', iconBg: 'border-blue-200', }, { label: 'Access Level', value: role?.access_level_label ?? '—', icon: Lock, iconClass: 'text-purple-600', iconBg: 'border-purple-200', }, { label: 'Permissions', value: String(permissionsCount), icon: KeyRound, iconClass: 'text-amber-600', iconBg: 'border-amber-200', }, { label: 'Users Assigned', value: String(role?.users_count ?? 0), icon: Users, iconClass: 'text-green-600', iconBg: 'border-green-200', }, ]; return ( <>
{/* Page header */}

{role?.name}

{role?.type_label && ( {role.type_label} )} {role?.status_label}
{role?.slug} {role?.uid && ( <> · {role.uid} )}
{role?.can_edit === 1 && ( )}
{/* Role information section */}

Role Information

Configuration and access settings

{infoItems.map((item) => (

{item.label}

{item.value}

))}
{/* Permissions & scope section */}

Permissions & Scope

{permissionsCount} permission{permissionsCount !== 1 ? 's' : ''} assigned

{}} submitButtonText="" isEdit={true} isView={true} />
); } View.layout = (page: ReactNode & { props: any }) => { const role = (page as any).props?.role; return ( {page} ); };