import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { Head, Link, useForm } from '@inertiajs/react'; import { Users, ArrowLeft, Check, Lock, Mail, User, AlertCircle } 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'; interface Role { id: number; name: string; display_name: string; } interface UserData { id: number; name: string; email: string; username: string | null; } interface Props { user: UserData; roles: Role[]; currentRoles: string[]; } export default function UserEdit({ user, roles, currentRoles }: Props) { const { data, setData, put, processing, errors } = useForm({ name: user.name, email: user.email || '', username: user.username || '', password: '', password_confirmation: '', roles: currentRoles, }); const handleSubmit = (e: FormEvent) => { e.preventDefault(); put(route('users.update', user.id)); }; 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 */}

角色分配 (單選)

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

{errors.roles}

}
{/* Password Reset */}

重設密碼

若不修改密碼，請留空以下欄位。
setData('password', e.target.value)} placeholder="••••••••" /> {errors.password &&

{errors.password}

}
setData('password_confirmation', e.target.value)} placeholder="••••••••" />
); }