import RoleController from "@/actions/App/Http/Controllers/RoleController"; import SelectPermissions from "@/components/selects/select-permission"; import AppLayout from "@/layouts/app-layout"; import { MetaTags } from "@/types"; import { UserRole } from "@/types/user"; import { Head, router, useForm } from "@inertiajs/react"; import { useEffect } from "react"; import { Button, Card, Container, Form } from "react-bootstrap"; import { PiSpeedometerDuotone } from "react-icons/pi"; import { toast } from "react-toastify"; interface Props { metaTags: MetaTags; mode: "create" | "edit"; role?: UserRole; } export default function FormBuilder({ metaTags, mode, role }: Props) { const { data, setData, errors, post, put, processing } = useForm<{ name: string, permissions: number[] }>({ name: '', permissions: [], }); useEffect(() => { if (!!role) { setData({ name: role?.name ?? '', permissions: role?.permissions?.map((permission) => permission.id), }); } }, [role]); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (mode === 'create') { post(RoleController.store.url(), { onError: (callback) => { toast.error(JSON.stringify(callback, null, 2)); }, }); } else { put(RoleController.update.url(role!.id), { onError: (callback) => { toast.error(JSON.stringify(callback, null, 2)); }, }); } } return (

Role Information

Role Name setData('name', e.target.value)} isInvalid={!!errors.name} placeholder="Enter role name (e.g., admin, client, auditor)" /> {errors.name}

Permissions

{ if (checked) { setData('permissions', [...data.permissions, permissionId]); } else { setData('permissions', data.permissions.filter(id => id !== permissionId)); } }} />

) }