import AppLayout from '@/layouts/app-layout'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { router, Head, useForm } from '@inertiajs/react'; import { ArrowLeft } from 'lucide-react'; import PermissionPicker from '@/components/permission-picker'; import type { Permission } from '@/types'; interface Props { permissions: Permission[]; } export default function CreateAgent({ permissions }: Props) { const { data, setData, post, processing, errors } = useForm({ name: '', email: '', password: '', password_confirmation: '', permissions: [] as number[], }); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); post('/agents'); }; return (
{/* Header */}

Create Agent

Add a new agent with custom permissions

{/* Form */}
{/* Basic Information */} Agent Information Enter the basic details for the new agent
setData('name', e.target.value)} placeholder="Enter full name" className={errors.name ? 'border-destructive' : ''} /> {errors.name && (

{errors.name}

)}
setData('email', e.target.value)} placeholder="agent@example.com" className={errors.email ? 'border-destructive' : ''} /> {errors.email && (

{errors.email}

)}
setData('password', e.target.value)} placeholder="••••••••" className={errors.password ? 'border-destructive' : ''} /> {errors.password && (

{errors.password}

)}
setData('password_confirmation', e.target.value)} placeholder="••••••••" className={errors.password_confirmation ? 'border-destructive' : ''} /> {errors.password_confirmation && (

{errors.password_confirmation}

)}
{/* Permissions */} Agent Permissions Select which permissions this agent will have. Base agent permissions are included by default. setData('permissions', permissionIds)} disabled={processing} /> {errors.permissions && (

{errors.permissions}

)} {/* Form Actions */}
); }