90 lines
3.2 KiB
TypeScript
90 lines
3.2 KiB
TypeScript
'use client';
|
|
import { useUserByProfile } from '@/feactures/users/hooks/use-query-users';
|
|
import { Button } from '@repo/shadcn/button';
|
|
import { Edit2 } from 'lucide-react';
|
|
import { useState } from 'react';
|
|
import { AccountPlanModal } from './modal-profile';
|
|
|
|
const ROLE_TRANSLATIONS: Record<string, string> = {
|
|
superadmin: 'Superadmin',
|
|
admin: 'Administrador',
|
|
autoridad: 'Autoridad',
|
|
manager: 'Gerente',
|
|
user: 'Usuario',
|
|
producers: 'Productor',
|
|
organization: 'Organización',
|
|
coordinators: 'Coordinador',
|
|
};
|
|
|
|
export function Profile() {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const { data } = useUserByProfile();
|
|
|
|
const userRole = data?.data.role as string;
|
|
const translatedRole = ROLE_TRANSLATIONS[userRole] || userRole || 'Sin Rol';
|
|
|
|
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-neutral-200 dark:bg-neutral-800 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-neutral-200 dark:bg-neutral-800 p-2 rounded-md">
|
|
<p className="font-bold text-lg">Rol:</p>
|
|
<p>{translatedRole}</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-neutral-200 dark:bg-neutral-800 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-neutral-200 dark:bg-neutral-800 p-2 rounded-md">
|
|
<p className="font-bold text-lg">Correo:</p>
|
|
<p>{data?.data.email || 'Sin correo'}</p>
|
|
</section>
|
|
|
|
<section className="border bg-neutral-200 dark:bg-neutral-800 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-neutral-200 dark:bg-neutral-800 p-2 rounded-md">
|
|
<p className="font-bold text-lg">Estado:</p>
|
|
<p>{data?.data.state || 'Sin Estado'}</p>
|
|
</section>
|
|
|
|
<section className="border bg-neutral-200 dark:bg-neutral-800 p-2 rounded-md">
|
|
<p className="font-bold text-lg">Municipio:</p>
|
|
<p>{data?.data.municipality || 'Sin Municipio'}</p>
|
|
</section>
|
|
|
|
<section className="border bg-neutral-200 dark:bg-neutral-800 p-2 rounded-md">
|
|
<p className="font-bold text-lg">Parroquia:</p>
|
|
<p>{data?.data.parish || 'Sin Parroquia'}</p>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|