import AuthenticatedLayout from "@/layouts/authenticated-layout"; import { Head, Link, useForm } from "@inertiajs/react"; import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card"; import { Label } from "@/components/ui/label"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; export default function Create({permissions}) { const { data, setData, errors, post, processing } = useForm({ name: "", permissions: [] }); function submit(e: React.FormEvent) { e.preventDefault(); post(route('roles.store')); } function handleCheckboxChange(permissionName, checked){ if(checked){ setData("permissions",[...data.permissions, permissionName]) } else setData("permissions",[...data.permissions.filter(name=>name !== permissionName)]) } return (

Create New Role

Back to roles

Create Role Enter Role

Name setData('name', e.target.value)} required autoFocus />

Permissions {permissions.map((permission)=> handleCheckboxChange(permission.name,e.target.checked)} className="form-checkbox h-5 w-5 text-blue-600 rounded focus:ring-2" /> {permission.name} )}

); }