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 { Checkbox } from '@/components/ui/checkbox'; import { Head, Link, useForm } from '@inertiajs/react'; import { ArrowLeft, Save } from 'lucide-react'; interface Permission { id: number; name: string; description: string; } interface Role { id: number; name: string; level: number; permissions: Permission[]; } interface Props { role: Role; availablePermissions: Permission[]; } export default function Permissions({ role, availablePermissions = [] }: Props) { const roleData = role || { id: 0, name: '', level: 0, permissions: [] }; const permissions = Array.isArray(availablePermissions) ? availablePermissions : []; const rolePermissions = Array.isArray(roleData.permissions) ? roleData.permissions : []; const { data, setData, put, processing } = useForm({ permissions: rolePermissions.map((p: Permission) => p.id), }); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); put(`/roles/${roleData.id}/permissions`); }; const handlePermissionToggle = (permissionId: number) => { const currentPermissions = Array.isArray(data.permissions) ? data.permissions : []; if (currentPermissions.includes(permissionId)) { setData('permissions', currentPermissions.filter((id: number) => id !== permissionId)); } else { setData('permissions', [...currentPermissions, permissionId]); } }; return (
Role Information Role: {roleData.name} (Level {roleData.level})
Available Permissions Select the permissions to grant to this role
{permissions.length === 0 ? (

No permissions available

) : ( permissions.map((permission) => (
handlePermissionToggle(permission.id)} />
{permission.description && (

{permission.description}

)}
)) )}
); }