ver productos y detalles

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

@@ -9,9 +9,9 @@ export const columns: ColumnDef<InventoryTable>[] = [
     accessorKey: 'urlImg',
     header: 'img',
     cell: ({ row }) => {
-      const status = row.getValue("urlImg") as string | undefined;
+      const url = row.getValue("urlImg") as string | undefined;
         return (
-          <img src={`http://localhost:3000/${status}`} alt="Image" width={64} height={64} className="rounded"/> 
+          <img src={`http://localhost:3000/${url}`} alt="" width={64} height={64} className="rounded"/> 
         )
     },
   },

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

@@ -1,67 +1,54 @@
-// Este componente maneja la lista de encuestas en el panel de administración
-// Funcionalidades:
-// - Muestra todas las encuestas en una tabla
-// - Permite editar encuestas existentes
-// - Permite eliminar encuestas con confirmación
-// - Muestra el estado (publicada/borrador), fechas y conteo de respuestas
-
-
 'use client';
 
-import { Button } from '@repo/shadcn/button';
 import {
   Card,
   CardContent,
-  CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
 } from '@repo/shadcn/card';
 import { useRouter } from 'next/navigation';
-// import { useSurveysForUserQuery } from '@/feactures/surveys/hooks/use-query-surveys';
 import { useAllProductQuery } from '@/feactures/inventory/hooks/use-query-products';
 import { allProducts } from '../../schemas/inventory';
-import { Badge } from '@repo/shadcn/badge';
-import { BadgeCheck } from 'lucide-react';
-
-export function SurveyList() {
+import { ImageIcon } from 'lucide-react';
 
+export function ProductList() {
   const router = useRouter();
-  const {data: produts} = useAllProductQuery()
+  const { data: produts } = useAllProductQuery();
 
-  const handleRespond = (surveyId: number) => {
-    router.push(`/dashboard/productos/${surveyId}`);
+  const handle = (id: number) => {
+    router.push(`/dashboard/productos/${id}`);
   };
 
-  // console.log(produts?.data)
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+    <div className="w-full grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
       {produts?.meta.totalPages === 0 ? (
-        <div className="col-span-full text-center py-10">
-          <p className="text-muted-foreground">No hay productos disponibles en este momento.</p>
-        </div>
+        <section className="col-span-full text-center py-10">
+          <p className="text-muted-foreground">
+            No hay productos disponibles en este momento.
+          </p>
+        </section>
       ) : (
         produts?.data.map((data: allProducts) => (
-          
-          <Card key={data.id} className="flex flex-col">
+          <Card
+            key={data.id}
+            className="cursor-pointer flex flex-col"
+            onClick={() => handle(Number(data.id))}
+          >
             <CardHeader>
-              <CardTitle>{data.title}</CardTitle>
-              <CardDescription>{data.description}</CardDescription>
+              <CardTitle className="text-base font-bold truncate">
+                {data.title.charAt(0).toUpperCase() + data.title.slice(1)}
+              </CardTitle>
             </CardHeader>
-            <CardContent className="flex-grow">
-              <div className="space-y-2 text-sm">
-                <div className="flex justify-between">
-                  <img src="/data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+ip1sAAAAASUVORK5CYII" alt="" />
-                </div>
-              </div>
+            <CardContent className="p-0 flex-grow">
+              <img
+                className="object-cover w-full h-full aspect-square"
+                src={`http://localhost:3000/${data.urlImg}`}
+                alt=""
+              />
             </CardContent>
-            <CardFooter className="flex justify-center">
-                <Button 
-                  className="w-full" 
-                  onClick={() => handleRespond(Number(data.id))}
-                >
-                  Ver
-                </Button>
+            <CardFooter className="flex justify-between items-center p-4">
+              <p className="font-semibold text-lg">$ {data.price}</p>
             </CardFooter>
           </Card>
         ))