import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { Head, Link, useForm } from '@inertiajs/react'; import { Users, ArrowLeft, Check, Lock, Mail, User } from 'lucide-react'; import { Button } from '@/Components/ui/button'; import { Input } from '@/Components/ui/input'; import { Label } from '@/Components/ui/label'; import { Checkbox } from '@/Components/ui/checkbox'; import { FormEvent } from 'react'; interface Props { roles: Record; // Name (ID) -> DisplayName map from pluck } export default function UserCreate({ roles }: Props) { const { data, setData, post, processing, errors } = useForm({ name: '', email: '', username: '', password: '', password_confirmation: '', roles: [] as string[], // Role names }); const handleSubmit = (e: FormEvent) => { e.preventDefault(); post(route('users.store')); }; const toggleRole = (roleName: string) => { if (data.roles.includes(roleName)) { setData('roles', data.roles.filter(r => r !== roleName)); } else { setData('roles', [...data.roles, roleName]); } }; return (
{/* Header Area */}

新增使用者

建立新帳號並設定初始密碼與角色

{/* Basic Info */}

基本資料

setData('username', e.target.value)} placeholder="請輸入登入帳號" /> {errors.username &&

{errors.username}

}
setData('name', e.target.value)} placeholder="例如：王小明" /> {errors.name &&

{errors.name}

}
setData('email', e.target.value)} placeholder="user@example.com (可省略)" /> {errors.email &&

{errors.email}

}
{/* Roles */}

角色分配

{Object.entries(roles).map(([roleName, displayName]) => (
toggleRole(roleName)} />

{roleName}

))}
{errors.roles &&

{errors.roles}

}
{/* Password */}

安全設定

setData('password', e.target.value)} /> {errors.password &&

{errors.password}

}
setData('password_confirmation', e.target.value)} />
); }