editar, modificar, ver y crear productos listo

apps/web/feactures/inventory/components/inventory/create-product-form.tsx

@@ -19,7 +19,7 @@ import {
 import { Input } from '@repo/shadcn/input';
 import { useForm } from 'react-hook-form';
 import { useCreateProduct } from "@/feactures/inventory/hooks/use-mutation";
-import { editInventory, EditInventory } from '@/feactures/inventory/schemas/inventory';
+import { createProduct, EditInventory } from '@/feactures/inventory/schemas/inventory';
 import { Textarea } from '@repo/shadcn/textarea';
 import { STATUS } from '@/constants/status'
 import { useState, useEffect } from 'react';
@@ -59,7 +59,7 @@ export function CreateForm({
   };
 
   const form = useForm<EditInventory>({
-    resolver: zodResolver(editInventory),
+    resolver: zodResolver(createProduct),
     defaultValues: defaultformValues,
     mode: 'onChange',
   });

apps/web/feactures/inventory/components/inventory/inventory-modal.tsx

@@ -8,14 +8,14 @@ import {
   DialogTitle,
 } from '@repo/shadcn/dialog';
 // import { AccountPlan } from '@/feactures/users/schemas/account-plan.schema';
-import { EditInventory, editInventory } from '../../schemas/inventory';
+import { EditInventory, InventoryTable } from '../../schemas/inventory';
 import { CreateForm } from './create-product-form';
 import { UpdateForm } from './update-product-form';
 
 interface ModalProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  defaultValues?: Partial<EditInventory>;
+  defaultValues?: Partial<InventoryTable>;
 }
 
 export function AccountPlanModal({

apps/web/feactures/inventory/components/inventory/product-tables/cell-action.tsx

@@ -9,9 +9,10 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@repo/shadcn/tooltip';
-import { Edit, Trash, User } from 'lucide-react';
+import { Edit, Trash, Eye } from 'lucide-react';
 import { InventoryTable } from '@/feactures/inventory/schemas/inventory';
-import { useDeleteUser } from '@/feactures/users/hooks/use-mutation-users';
+// import { useDeleteUser } from '@/feactures/users/hooks/use-mutation-users';
+import { useDeleteProduct } from "@/feactures/inventory/hooks/use-mutation";
 import { AccountPlanModal } from '../inventory-modal';
 
 interface CellActionProps {
@@ -22,7 +23,7 @@ export const CellAction: React.FC<CellActionProps> = ({ data }) => {
   const [loading, setLoading] = useState(false);
   const [open, setOpen] = useState(false);
   const [edit, setEdit] = useState(false);
-  const { mutate: deleteUser } = useDeleteUser();
+  const { mutate: deleteUser } = useDeleteProduct();
   const router = useRouter();
 
   const onConfirm = async () => {
@@ -51,6 +52,23 @@ export const CellAction: React.FC<CellActionProps> = ({ data }) => {
       <AccountPlanModal open={edit} onOpenChange={setEdit} defaultValues={data}/>
 
       <div className="flex gap-1">
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button 
+                variant="outline" 
+                size="icon"
+                onClick={() => router.push(`/dashboard/productos/${data.id}`)}
+              >
+                <Eye className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Ver</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+
         <TooltipProvider>
           <Tooltip>
             <TooltipTrigger asChild>
@@ -80,7 +98,7 @@ export const CellAction: React.FC<CellActionProps> = ({ data }) => {
               </Button>
             </TooltipTrigger>
             <TooltipContent>
-              <p>Deshabilitar</p>
+              <p>Eliminar</p>
             </TooltipContent>
           </Tooltip>
         </TooltipProvider>

apps/web/feactures/inventory/components/inventory/product-tables/columns.tsx

@@ -5,16 +5,12 @@ import { CellAction } from './cell-action';
 import { InventoryTable } from '../../../schemas/inventory';
 
 export const columns: ColumnDef<InventoryTable>[] = [
-  {
-    accessorKey: 'userId',
-    header: 'ID',
-  },
   {
     accessorKey: 'urlImg',
     header: 'img',
     cell: ({ row }) => {
         return (
-          <img src={`http://localhost:3000/uploads/inventory/${row.original.userId}/${row.original.id}/${row.original.urlImg}`} alt="" width={64} height={64} className="rounded"/> 
+          <img src={`/uploads/inventory/${row.original.userId}/${row.original.id}/${row.original.urlImg}`} alt="" width={64} height={64} className="rounded"/> 
         )
     },
   },

apps/web/feactures/inventory/components/inventory/update-product-form.tsx

@@ -19,7 +19,7 @@ import {
 import { Input } from '@repo/shadcn/input';
 import { useForm } from 'react-hook-form';
 import { useUpdateProduct } from "@/feactures/inventory/hooks/use-mutation";
-import { editInventory, EditInventory } from '@/feactures/inventory/schemas/inventory'; // Renombrado EditInventory para claridad
+import { updateInventory, EditInventory, InventoryTable } from '@/feactures/inventory/schemas/inventory'; // Renombrado EditInventory para claridad
 import { Textarea } from '@repo/shadcn/components/ui/textarea';
 import {STATUS} from '@/constants/status'
 import { useState, useEffect } from 'react';
@@ -43,7 +43,7 @@ import { z } from 'zod'; // Asegúrate de importar Zod
 interface UpdateFormProps {
   onSuccess?: () => void;
   onCancel?: () => void;
-  defaultValues?: Partial<EditInventory>;
+  defaultValues?: Partial<InventoryTable>;
 }
 
 export function UpdateForm({
@@ -78,7 +78,7 @@ export function UpdateForm({
   };
 
   const form = useForm<EditInventory>({ // Usamos el nuevo tipo aquí
-    resolver: zodResolver(editInventory), // Usamos el esquema extendido
+    resolver: zodResolver(updateInventory), // Usamos el esquema extendido
     defaultValues: defaultformValues,
     mode: 'onChange',
   });

apps/web/feactures/inventory/components/inventory/users-header.tsx

@@ -13,8 +13,8 @@ export function UsersHeader() {
     <>
       <div className="flex items-start justify-between">
         <Heading
-          title="Administración del inventario"
-          description="Gestione aquí los productos que usted registre en la plataforma"
+          title="Mi inventario"
+          description="Gestione aquí los productos que registre en la plataforma"
         />
         <Button onClick={() => setOpen(true)} size="sm">
           <Plus className="h-4 w-4" /><span className='hidden md:inline'>Agregar Producto</span>

apps/web/feactures/inventory/components/products/product-list.tsx

@@ -10,12 +10,12 @@ import {
 import { useRouter } from 'next/navigation';
 import { useAllProductQuery } from '@/feactures/inventory/hooks/use-query-products';
 import { allProducts } from '../../schemas/inventory';
-import { ImageIcon } from 'lucide-react';
+// import { ImageIcon } from 'lucide-react';
 
 export function ProductList() {
   const router = useRouter();
   const { data: produts } = useAllProductQuery();
-  console.log(produts);
+  // console.log(produts);
 
   const handle = (id: number) => {
     router.push(`/dashboard/productos/${id}`);
@@ -36,15 +36,15 @@ export function ProductList() {
             className="cursor-pointer flex flex-col"
             onClick={() => handle(Number(data.id))}
           >
-            <CardHeader>
-              <CardTitle className="text-base font-bold truncate">
+            {/* <CardHeader> */}
+              <CardTitle className="text-base font-bold truncate p-3 text-primary">
                 {data.title.charAt(0).toUpperCase() + data.title.slice(1)}
               </CardTitle>
-            </CardHeader>
+            {/* </CardHeader> */}
             <CardContent className="p-0 flex-grow">
               <img
                 className="object-cover w-full h-full aspect-square border"
-                src={`http://localhost:3000/uploads/inventory/${data.userId}/${data.id}/${data.urlImg}`}
+                src={`/uploads/inventory/${data.userId}/${data.id}/${data.urlImg}`}
                 alt=""
               />
             </CardContent>

apps/web/feactures/inventory/components/products/see-product.tsx

@@ -1,4 +1,6 @@
-import { allProducts,  } from "../../schemas/inventory";
+'use client';
+import { useState } from "react";
+import { allProducts  } from "../../schemas/inventory";
 import {
   Card,
   CardContent,
@@ -8,6 +10,9 @@ import {
 } from '@repo/shadcn/card';
 
 export function ProductList({product}: {product: allProducts}) {
+  const [selectedImg, setSelectedImg] = useState(`/uploads/inventory/${product.userId}/${product.id}/${product.urlImg}`) 
+  console.log(product);
+  
 return (
     // <PageContainer>
     <main className='px-4 lg:px-6 flex flex-col md:flex-row gap-3 lg:gap-4 md:relative'>
@@ -15,44 +20,60 @@ return (
 
         <img
           className="border-2 object-contain w-full f-full min-h-[400px] md:h-[70vh] aspect-square rounded-2xl"
-          src={`http://localhost:3000/uploads/inventory/${product.userId}/${product.id}/${product.urlImg}`}
+          src={selectedImg}
           alt=""
         />
 
-        <section className=''>
-          <img
-            className="border-2 object-cover w-[64px] h-[64px] md:w-[96px] md:h-[96px] aspect-square rounded-2xl"
-            src={`http://localhost:3000/uploads/inventory/${product.userId}/${product.id}/${product.urlImg}`}
+        <section className="relative flex flex-row flex-nowrap overflow-auto gap-1 md:gap-2 p-2">
+          {/* <span className="sticky left-0 flex items-center">
+            <span className="text-xl p-3 cursor-pointer bg-neutral-800/50 rounded-full text-white">
+              {"<"}
+            </span>
+          </span> */}
+          {product.gallery?.map((img, index) => (
+           <img
+            key={index}
+            className="cursor-pointer border-2 object-cover w-[64px] h-[64px] md:w-[96px] md:h-[96px] aspect-square rounded-2xl"
+            src={`/uploads/inventory/${product.userId}/${product.id}/${img}`}
             alt=""
-          />
+            onClick={() => setSelectedImg(`/uploads/inventory/${product.userId}/${product.id}/${img}`)}
+          /> 
+         ))}
+         {/* <div className="sticky right-0 flex items-center">
+            <span className="text-xl p-3 cursor-pointer bg-neutral-800/50 rounded-full text-white">
+              {">"}
+            </span>
+          </div> */}
         </section>
+        
+
       </div>
       <Card className="flex flex-col md:w-[400px] lg:w-[500px] min-h-[400px] md:h-[85vh] md:overflow-auto md:sticky top-0 right-0">
         <CardHeader className='py-2 px-2 md:px-4 lg:px-6'>
-          <CardTitle className="font-bold text-2xl">
+          <CardTitle className="font-bold text-2xl text-primary">
             {product.title.charAt(0).toUpperCase() + product.title.slice(1)}
           </CardTitle>
-          <p className='font-semibold'>$ {product.price} </p>
-          {product.status === 'AGOTADO' ? (
-            <p className="font-semibold text-lg text-red-900">AGOTADO</p>
-          ) : ('')}
+          <p className='font-semibold'>{product.price}$
+            {product.status === 'AGOTADO' ? (
+              <span className="font-semibold text-lg text-red-900"> AGOTADO</span>
+            ) : ('')}
+          </p>
         </CardHeader>
-        <CardContent className="py-0 px-2 md:px-4 lg:px-6 flex-col justify-between flex-grow md:overflow-auto">
-          <div>
-            <p className='font-semibold text-lg border-t border-b'> Descripción</p>
+        <CardContent className="py-0 px-2 h-full flex flex-col justify-around flex-grow md:px-4 md:overflow-auto lg:px-6">
+          <section>
+            <p className='font-semibold text-lg border-t border-b'>• Descripción</p>
             <p className='p-1'>{product.description}</p>
-            {/* <p className='p-1'>{lorem+lorem+lorem+lorem}</p> */}
-          </div>
+          </section>
 
-          <div className='mt-2'>
-            <p className='font-semibold text-lg border-t border-b'> Dirección</p>
+          <section>
+            <p className='font-semibold text-lg border-t border-b'>• Dirección</p>
             <p className='p-1'>{product.address}</p>
-          </div>
+          </section>
         </CardContent>
 
         <CardFooter className="px-2 md:px-4 lg:px-6">
           <div>
-            <p className='font-semibold text-lg border-t border-b mt-4'>Información del vendedor</p>
+            <p className='font-semibold text-lg border-t border-b mt-4'>• Información del vendedor</p>
             <p>{product.fullname}</p>
             <p>{product.phone}</p>
             <p>{product.email}</p>