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 { RadioGroup, RadioGroupItem } from '@/Components/ui/radio-group'; import { FormEvent } from 'react'; import { Switch } from '@/Components/ui/switch'; import { Can } from '@/Components/Permission/Can'; 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 is_active: true, }); const handleSubmit = (e: FormEvent) => { e.preventDefault(); post(route('users.store')); }; 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}

}
{/* Status */}
setData('is_active', checked)} /> {data.is_active ? '啟用' : '停用'}
{/* Roles */}

角色分配 (單選)

setData('roles', [value])} className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" > {Object.entries(roles).map(([roleName, displayName]) => ( ))} {errors.roles &&

{errors.roles}

}
{/* Password */}

安全設定

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

{errors.password}

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