import AdminLayout from '@/Layouts/AdminLayout'; import { ImageUploader } from '@/components/ImageUploader'; import { Checkbox } from '@/components/ui/checkbox'; import { Input } from '@/components/ui/input'; import { PhoneInput } from '@/components/ui/phone-input'; import { SearchableSelect } from '@/components/ui/searchable-select'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import { api } from '@/lib/api'; import { cn } from '@/lib/utils'; import { Head, router, useForm } from '@inertiajs/react'; import { ArrowLeft, User } from 'lucide-react'; // ── Types ───────────────────────────────────────────────────────────────────── interface AdminUserDetail { id: string; name: string; email: string; phone: string | null; status: 'active' | 'inactive' | 'suspended'; job_title: string | null; department: string | null; timezone: string; force_password_reset: boolean; avatar_url: string | null; role: string | null; } interface RoleOption { id: number; name: string; } interface TimezoneGroup { group: string; options: { value: string; label: string }[]; } interface Props { user?: AdminUserDetail; roles: RoleOption[]; timezones: TimezoneGroup[]; } // ── Status options ──────────────────────────────────────────────────────────── const STATUS_OPTIONS = [ { value: 'active', label: 'Active' }, { value: 'inactive', label: 'Inactive' }, { value: 'suspended', label: 'Suspended' }, ] as const; // ── FormField wrapper ───────────────────────────────────────────────────────── function FormField({ label, required, error, span, children, }: { label: string; required?: boolean; error?: string; span?: string; children: React.ReactNode; }) { return (
{children} {error &&

{error}

}
); } // ── Page ────────────────────────────────────────────────────────────────────── export default function UsersForm({ user, roles, timezones }: Props) { const isEdit = !!user; const form = useForm({ name: user?.name ?? '', email: user?.email ?? '', phone: user?.phone ?? '', password: '', job_title: user?.job_title ?? '', department: user?.department ?? '', timezone: user?.timezone ?? 'UTC', role: user?.role ?? roles[0]?.name ?? '', status: (user?.status ?? 'active') as string, force_password_reset: user?.force_password_reset ?? true, }); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); const options = { preserveScroll: true }; if (isEdit) { form.put(`/admin/users/${user!.id}`, options); } else { form.post('/admin/users', options); } }; const title = isEdit ? `Edit: ${user!.name}` : 'New Admin'; return (
{/* ── Page title row ──────────────────────────────────────── */}

{isEdit ? 'Edit Admin' : 'New Admin'}

{/* ── Avatar (edit only) ──────────────────────────────── */} {isEdit && (
Avatar { const fd = new FormData(); fd.append('avatar', file); return api.upload<{ avatar_url: string }>( `/admin/users/${user!.id}/avatar`, fd, ); }} onRemove={() => api.delete( `/admin/users/${user!.id}/avatar`, ) } />
)} {/* ── Identity ──────────────────────────────────────────── */}
Identity
form.setData('name', e.target.value) } placeholder="Jane Doe" autoComplete="off" className={cn( form.errors.name && 'border-destructive', )} /> form.setData('email', e.target.value) } placeholder="jane@example.com" autoComplete="off" className={cn( form.errors.email && 'border-destructive', )} /> form.setData('phone', v)} error={!!form.errors.phone} /> form.setData('password', e.target.value) } placeholder={ isEdit ? 'Leave blank to keep current' : 'Min. 8 characters' } autoComplete="new-password" className={cn( form.errors.password && 'border-destructive', )} />
{/* ── Organisation ──────────────────────────────────────── */}
Organisation
form.setData( 'job_title', e.target.value, ) } placeholder="e.g. Customer Success Manager" className={cn( form.errors.job_title && 'border-destructive', )} /> form.setData( 'department', e.target.value, ) } placeholder="e.g. Operations" className={cn( form.errors.department && 'border-destructive', )} /> form.setData('timezone', v) } groups={timezones} placeholder="Select timezone…" searchPlaceholder="Search timezones…" error={!!form.errors.timezone} />
{/* ── Access ────────────────────────────────────────────── */}
Access
{/* ── Actions ───────────────────────────────────────────── */}
); }