Tabla de inventario agregada

apps/web/feactures/inventory/components/user-profile.tsx

@@ -0,0 +1,75 @@
+'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>
+  );
+}
+