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, 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, CheckIcon } from 'lucide-react'; import { showLoading, updateToast } from '@/lib/toast'; import { useState, useEffect } from 'react'; import { cn } from '@/lib/utils'; interface Institution { id: number; name: string; } type Departamento = { id: number; name: string; code: string; }; type Municipio = { id: number; name: string; code: string; }; interface User { id: number; name: string; email: string; phone?: string; description?: string; institution_id?: number; departamento_id?: number; municipio_id?: number; profile_completed: boolean; is_researcher: boolean; } interface Props { user: User; institutions: Institution[]; } export default function UsersEdit({ user, institutions }: Props) { const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: '/dashboard' }, { title: 'Usuarios', href: '/users' }, { title: user.name, href: `/users/${user.id}` }, { title: 'Editar', href: `/users/${user.id}/edit` }, ]; const { data, setData, put, processing, errors } = useForm({ name: user.name || '', email: user.email || '', phone: user.phone || '', password: '', password_confirmation: '', description: user.description || '', institution_id: user.institution_id?.toString() || '', departamento_id: user.departamento_id?.toString() || '', municipio_id: user.municipio_id?.toString() || '', profile_completed: user.profile_completed as boolean, is_researcher: user.is_researcher as boolean, }); const [departamentos, setDepartamentos] = useState([]); const [municipios, setMunicipios] = useState([]); 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)); } else { setMunicipios([]); } }, [data.departamento_id, setData]); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); const toastId = showLoading('Actualizando usuario...'); put(`/users/${user.id}`, { onSuccess: () => { updateToast(toastId, 'success', 'Usuario actualizado exitosamente'); }, onError: () => { updateToast(toastId, 'error', 'Error al actualizar el usuario'); } }); }; return (
{/* Header */}

Editar Usuario

Actualiza la información de {user.name}

{/* Form */}
Información del Usuario Actualiza los datos del 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}

)}
{/* Contraseña */}
setData('password', e.target.value)} placeholder="Deja en blanco para mantener la actual" className={errors.password ? 'border-red-500' : ''} /> {errors.password && (

{errors.password}

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

{errors.password_confirmation}

)}
{/* Institución */}
{errors.institution_id && (

{errors.institution_id}

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

{errors.departamento_id}

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

{errors.municipio_id}

)}
{/* Descripción */}