import { Form, Head, Link } from '@inertiajs/react'; import { Mail } from 'lucide-react'; import { useMemo, useState } from 'react'; import UserController from '@/actions/App/Http/Controllers/Admin/UserController'; import Heading from '@/components/heading'; import InputError from '@/components/input-error'; import { SearchableSelect } from '@/components/searchable-select'; import { Button } from '@/components/ui/button'; import { Checkbox } from '@/components/ui/checkbox'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { create, index } from '@/routes/admin/users'; import { dashboard } from '@/routes'; type RoleOption = { name: string; label: string; }; type DepartmentOption = { id: number; code: string; name: string; }; export default function UsersCreate({ roles, departments, }: { roles: RoleOption[]; departments: DepartmentOption[]; }) { const [selectedRoles, setSelectedRoles] = useState([]); const [departmentId, setDepartmentId] = useState('none'); const departmentOptions = useMemo( () => departments.map((department) => ({ value: String(department.id), label: `${department.code} — ${department.name}`, })), [departments], ); function toggleRole(role: string, checked: boolean) { setSelectedRoles((current) => checked ? [...current, role] : current.filter((value) => value !== role), ); } return ( <>

{({ processing, errors }) => ( <>

Nom

E-mail

Un e-mail d'invitation sera envoyé à cette adresse pour permettre à l'utilisateur de définir son mot de passe.

Département {departmentId !== 'none' && ( )}

Appliqué à la fiche collaborateur associée.

Rôles {roles.map((role) => ( toggleRole( role.name, checked === true, ) } /> {role.label} {selectedRoles.includes(role.name) && ( )} ))}

)}

); } UsersCreate.layout = { breadcrumbs: [ { title: 'Tableau de bord', href: dashboard() }, { title: 'Utilisateurs', href: index() }, { title: 'Créer', href: create() }, ], };