import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Textarea } from '@/components/ui/textarea'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Checkbox } from '@/components/ui/checkbox'; import { Label } from '@/components/ui/label'; import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'; import { Command, CommandEmpty, CommandGroup, CommandInput, CommandList, CommandItem } from '@/components/ui/command'; import AppLayout from '@/layouts/app-layout'; import { type BreadcrumbItem } from '@/types'; import { Head, Link, useForm } from '@inertiajs/react'; import { ArrowLeft, Save, Users, ChevronsUpDown } from 'lucide-react'; import { showLoading, updateToast } from '@/lib/toast'; import { cn } from '@/lib/utils'; import { useState, useEffect } from 'react'; interface Institution { id: number; name: string; } type Departamento = { id: number; name: string; code: string; }; type Municipio = { id: number; name: string; code: string; }; interface Props { institutions: Institution[]; } const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: '/dashboard' }, { title: 'Usuarios', href: '/users' }, { title: 'Nuevo Usuario', href: '/users/create' }, ]; export default function UsersCreate({ institutions }: Props) { const { data, setData, post, processing, errors } = useForm({ name: '', email: '', phone: '', password: '', password_confirmation: '', description: '', institution_id: '', departamento_id: '', municipio_id: '', profile_completed: false as boolean, is_researcher: false as boolean, }); const [departamentos, setDepartamentos] = useState([]); const [municipios, setMunicipios] = useState([]); const [institutionOpen, setInstitutionOpen] = useState(false); const [departamentoOpen, setDepartamentoOpen] = useState(false); const [municipioOpen, setMunicipioOpen] = useState(false); // Fetch departments on component mount useEffect(() => { fetch('/api/departamentos') .then(response => response.json()) .then(data => setDepartamentos(data)) .catch(error => console.error('Error fetching departments:', error)); }, []); // Fetch municipalities when department changes useEffect(() => { if (data.departamento_id) { fetch(`/api/municipios/${data.departamento_id}`) .then(response => response.json()) .then(data => setMunicipios(data)) .catch(error => console.error('Error fetching municipalities:', error)); // Reset municipio when departamento changes setData('municipio_id', ''); } else { setMunicipios([]); } }, [data.departamento_id, setData]); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); const toastId = showLoading('Creando usuario...'); post('/users', { onSuccess: () => { updateToast(toastId, 'success', 'Usuario creado exitosamente'); }, onError: () => { updateToast(toastId, 'error', 'Error al crear el usuario'); } }); }; return (
{/* Header */}

Nuevo Usuario

Crea un nuevo usuario en el sistema

{/* Form */}
Información del Usuario Completa los datos para crear el nuevo usuario
{/* Nombre */}
setData('name', e.target.value)} placeholder="Ingresa el nombre completo" className={errors.name ? 'border-red-500' : ''} /> {errors.name && (

{errors.name}

)}
{/* Email */}
setData('email', e.target.value)} placeholder="usuario@ejemplo.com" className={errors.email ? 'border-red-500' : ''} /> {errors.email && (

{errors.email}

)}
{/* Teléfono */}
setData('phone', e.target.value)} placeholder="(+57) 3xx xxx xxxx" className={errors.phone ? 'border-red-500' : ''} /> {errors.phone && (

{errors.phone}

)}
{/* Institución */}
No se encontró institución. { setData('institution_id', ''); setInstitutionOpen(false); }} > Sin institución {institutions.map((institution) => ( { setData('institution_id', institution.id.toString()); setInstitutionOpen(false); }} > {institution.name} ))} {errors.institution_id && (

{errors.institution_id}

)}
{/* Departamento */}
No se encontró departamento. {departamentos.map((departamento) => ( { setData('departamento_id', departamento.id.toString()); setDepartamentoOpen(false); }} > {departamento.name} ))} {errors.departamento_id && (

{errors.departamento_id}

)}
{/* Municipio */}
No se encontró municipio. {municipios.map((municipio) => ( { setData('municipio_id', municipio.id.toString()); setMunicipioOpen(false); }} > {municipio.name} ))} {errors.municipio_id && (

{errors.municipio_id}

)}
{/* Contraseña */}
setData('password', e.target.value)} placeholder="Ingresa una contraseña segura" className={errors.password ? 'border-red-500' : ''} /> {errors.password && (

{errors.password}

)}
{/* Confirmar contraseña */}
setData('password_confirmation', e.target.value)} placeholder="Confirma la contraseña" className={errors.password_confirmation ? 'border-red-500' : ''} /> {errors.password_confirmation && (

{errors.password_confirmation}

)}
{/* Descripción */}