import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { Head, Link, useForm } from '@inertiajs/react'; import { Shield, ArrowLeft, Check } from 'lucide-react'; import { Button } from '@/Components/ui/button'; import { Input } from '@/Components/ui/input'; import { Label } from '@/Components/ui/label'; import { FormEvent } from 'react'; import PermissionSelector, { GroupedPermission } from './PermissionSelector'; interface Props { groupedPermissions: GroupedPermission[]; } export default function RoleCreate({ groupedPermissions }: Props) { const { data, setData, post, processing, errors } = useForm({ name: '', display_name: '', permissions: [] as string[], }); const handleSubmit = (e: FormEvent) => { e.preventDefault(); post(route('roles.store')); }; return (
{/* Header Area */}

建立新角色

設定角色名稱並分配對應的操作權限

{/* Role Name */}
setData('display_name', e.target.value)} /> {errors.display_name && (

{errors.display_name}

)}

這是在介面上看到的名稱。

setData('name', e.target.value)} className="font-mono" /> {errors.name && (

{errors.name}

)}

請使用英文字母與連字號，例如: warehouse-staff

{/* Permissions Matrix */}

權限設定

setData('permissions', permissions)} />
); }