import { Form, Head, Link } from '@inertiajs/react'; import { BriefcaseBusiness, KeyRound, ShieldCheck, UserCheck, UserRound, } from 'lucide-react'; import UserController from '@/actions/App/Http/Controllers/UserController'; import { FormField } from '@/components/crm/native-select'; import { PageHeader, SectionCard } from '@/components/crm/page-header'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { index as usersIndex } from '@/routes/users'; import type { RoleOption } from '@/types'; type Props = { roleOptions: RoleOption[]; }; export default function UsersCreate({ roleOptions }: Props) { return ( <> New account} title="Add staff" description="Create the account, then give it the role that matches the job the person does." />
{({ processing, errors }) => ( <>

A generated password is shown once after saving. Passwords are stored hashed and cannot be read back.

{/* The hidden field makes an unticked box submit "0" */}
The account is emailed its sign in details by the office.
)}
); } /** * Roles are chosen with checkboxes rather than a multi select, so each role's * description can be shown next to it. */ function RolePicker({ roleOptions, defaultSelected = [], error, }: { roleOptions: RoleOption[]; defaultSelected?: string[]; error?: string; }) { return (
{roleOptions.map((role) => ( ))}
{error ? (

{error}

) : null}
); } UsersCreate.layout = { breadcrumbs: [ { title: 'Staff', href: usersIndex(), }, { title: 'Add staff', href: '', }, ], };