76 lines
2.6 KiB
TypeScript
76 lines
2.6 KiB
TypeScript
'use client';
|
|
import { useUserByProfile } from '@/feactures/users/hooks/use-query-users';
|
|
import { Button } from '@repo/shadcn/button';
|
|
import { Edit, Edit2 } from 'lucide-react';
|
|
import { useState } from 'react';
|
|
import { AccountPlanModal } from './modal-profile';
|
|
|
|
export function Profile() {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const { data } = useUserByProfile();
|
|
|
|
// console.log("🎯 data:", data);
|
|
|
|
return (
|
|
<div>
|
|
<Button onClick={() => setOpen(true)} size="sm">
|
|
<Edit2 className="mr-2 h-4 w-4" /> Editar Perfil
|
|
</Button>
|
|
|
|
<AccountPlanModal open={open} onOpenChange={setOpen} defaultValues={data?.data}/>
|
|
|
|
<h2 className='mt-3 mb-1'>Datos del usuario</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<section className='border bg-muted p-2 rounded-md'>
|
|
<p className='font-bold text-lg'>Usuario:</p>
|
|
<p>{data?.data.username || 'Sin Nombre de Usuario'}</p>
|
|
</section>
|
|
|
|
<section className='border bg-muted p-2 rounded-md'>
|
|
<p className='font-bold text-lg'>Rol:</p>
|
|
<p>{data?.data.role || 'Sin Rol'}</p>
|
|
</section>
|
|
</div>
|
|
|
|
<h2 className='mt-3 mb-1'>Información personal</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<section className='border bg-muted p-2 rounded-md'>
|
|
<p className='font-bold text-lg'>Nombre completo:</p>
|
|
<p>{data?.data.fullname || 'Sin nombre y apellido'}</p>
|
|
</section>
|
|
|
|
<section className='border bg-muted p-2 rounded-md'>
|
|
<p className='font-bold text-lg'>Correo:</p>
|
|
<p>{data?.data.email || 'Sin correo'}</p>
|
|
</section>
|
|
|
|
<section className='border bg-muted p-2 rounded-md'>
|
|
<p className='font-bold text-lg'>Teléfono:</p>
|
|
<p>{data?.data.phone || 'Sin teléfono'}</p>
|
|
</section>
|
|
</div>
|
|
|
|
<h2 className='mt-3 mb-1'>Información de ubicación</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<section className='border bg-muted p-2 rounded-md'>
|
|
<p className='font-bold text-lg'>Estado:</p>
|
|
<p>{data?.data.state || 'Sin Estado'}</p>
|
|
</section>
|
|
|
|
<section className='border bg-muted p-2 rounded-md'>
|
|
<p className='font-bold text-lg'>Municipio:</p>
|
|
<p>{data?.data.municipality || 'Sin Municipio'}</p>
|
|
</section>
|
|
|
|
<section className='border bg-muted p-2 rounded-md'>
|
|
<p className='font-bold text-lg'>Parroquia:</p>
|
|
<p>{data?.data.parish || 'Sin Parroquia'}</p>
|
|
</section>
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
}
|
|
|