import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { Head, Link, useForm, usePage } from '@inertiajs/react'; import { Button } from '@/Components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/Components/ui/card'; import { Checkbox } from '@/Components/ui/checkbox'; import { Input } from '@/Components/ui/input'; import { Label } from '@/Components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/Components/ui/select'; import { Separator } from '@/Components/ui/separator'; import { ArrowLeft, Building2, KeyRound, Mail, RefreshCw, Save, Send, UserPlus } from 'lucide-react'; import { FormEvent, useState } from 'react'; import { Contractor, PageProps } from '@/types'; interface AuthUser { contractor_id: number | null; user_type: string; } interface Props extends PageProps { contractors: Contractor[]; } export default function Create({ contractors }: Props) { const { auth } = usePage().props; const isPlatformAdmin = auth.user.contractor_id === null; const { data, setData, post, processing, errors } = useForm({ name: '', email: '', password: '', password_confirmation: '', user_type: 'employee', status: 'active', invite_method: 'direct' as 'direct' | 'email', auto_password: true, contractor_id: '' as string | number, department: '', position: '', employee_code: '', hire_date: '', phone: '', address: '', company_name: '', contact_person: '', tin_number: '', spatie_role: 'employee', }); const [generatedPassword, setGeneratedPassword] = useState(''); const generatePassword = () => { const chars = 'ABCDEFGHJKMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789!@#'; const pw = Array.from({ length: 10 }, () => chars[Math.floor(Math.random() * chars.length)]).join(''); setGeneratedPassword(pw); setData(d => ({ ...d, password: pw, password_confirmation: pw })); }; const handleSubmit = (e: FormEvent) => { e.preventDefault(); post(route('users.store')); }; const isEmployee = data.user_type === 'admin' || data.user_type === 'employee'; const isCustomer = data.user_type === 'customer'; return (

Add Team Member

} >
{Object.keys(errors).length > 0 && (

There were validation errors with your submission

    {Object.entries(errors).map(([field, message]) => (
  • {String(message)}
    • ))}
)} {/* ── Contractor Assignment (Platform Admin only) ── */} {isPlatformAdmin && contractors.length > 0 && ( Assign to Contractor

Leave blank to create a platform-level user (no contractor affiliation).

{errors.contractor_id &&

{errors.contractor_id}

} )} {/* ── Provisioning Mode ── */} Invitation Method

Choose how this team member receives their access credentials.
{(['direct', 'email'] as const).map((method) => ( ))}
{/* ── Account Info ── */} Account Information
setData('name', e.target.value)} className="mt-1" /> {errors.name &&

{errors.name}

}
setData('email', e.target.value)} className="mt-1" /> {errors.email &&

{errors.email}

}
{errors.user_type &&

{errors.user_type}

}
{data.user_type === 'contractor' && (
{/* @ts-ignore */} {errors.spatie_role &&

{errors.spatie_role}

}
)}
{/* Password Block */}
{data.auto_password ? (
) : (
setData('password', e.target.value)} /> {errors.password &&

{errors.password}

}
setData('password_confirmation', e.target.value)} />
)}

The user will be required to change this password on their first login.

{/* ── Employee Profile ── */} {isEmployee && ( Employee Profile
setData('department', e.target.value)} className="mt-1" />
setData('position', e.target.value)} className="mt-1" />
setData('employee_code', e.target.value)} placeholder="e.g., EMP-0002" className="mt-1" /> {errors.employee_code &&

{errors.employee_code}

}
setData('hire_date', e.target.value)} className="mt-1" />
setData('phone', e.target.value)} className="mt-1" />
setData('address', e.target.value)} className="mt-1" />
)} {/* ── Customer Profile ── */} {isCustomer && ( Customer Profile
setData('company_name', e.target.value)} className="mt-1" />
setData('contact_person', e.target.value)} className="mt-1" />
setData('tin_number', e.target.value)} className="mt-1" />
setData('phone', e.target.value)} className="mt-1" />
)}
); }