import AuthenticatedLayout from "@/layouts/authenticated-layout"; import { Head, Link, useForm } from "@inertiajs/react"; import { Card, CardHeader, CardTitle, CardDescription, CardContent, } from "@/components/ui/card"; import { Label } from "@/components/ui/label"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; type Role = { id: number; name: string; }; type User = { id: number; name: string; email: string; role: string; }; type Props = { user: User; userRoles: string[]; // assuming it's an array of role names roles: Role[]; }; export default function Edit({ user, userRoles, roles }: Props) { const { data, setData, errors, put, processing } = useForm({ name: user.name || "", email: user.email || "", password: "", roles: userRoles || [], }); function submit(e: React.FormEvent) { e.preventDefault(); put(route("users.update", user.id)); } return (

Edit User

Back to Users

Edit User Account Enter user information to update the account.

Full Name setData("name", e.target.value)} required autoFocus /> {errors.name && (

{errors.name}

)}

Email setData("email", e.target.value)} required /> {errors.email && (

{errors.email}

)}

Password (leave blank to keep current) setData("password", e.target.value)} /> {errors.password && (

{errors.password}

)}

Roles

{roles.map((role) => ( { if (e.target.checked) { setData("roles", [...data.roles, role.name]); } else { setData("roles", data.roles.filter((r) => r !== role.name)); } }} className="form-checkbox h-5 w-5 text-blue-600 rounded" /> {role.name} ))} {errors.roles && (

{errors.roles}

)}

); }