Error en el selector de artículos, La cantidad no cambiaba al paginar o poner y quitar filtros.

client/src/app/catalog/components/CatalogDataTableFilter.tsx

@@ -2,6 +2,7 @@ import { Table } from "@tanstack/react-table";
 
 import { ButtonGroup } from "@/components";
 import { DataTableFilterField, useDataTableContext } from "@/lib/hooks";
+import { cn } from "@/lib/utils";
 import { Badge, Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/ui";
 import { t } from "i18next";
 import { PlusIcon, SearchIcon, XIcon } from "lucide-react";
@@ -53,8 +54,13 @@ export function CatalogDataTableFilter<TData>({
   return (
     <TooltipProvider>
       <div className='w-full space-y-2' {...props}>
-        <div className='relative flex items-center flex-1 p-2 space-x-2 border rounded-md border-input'>
+        <div
-          <SearchIcon className='w-4 h-4 text-gray-500' />
+          className={cn(
+            "relative flex items-center flex-1 p-2 space-x-2 border rounded-md",
+            isFiltered ? "border-primary" : "border-input"
+          )}
+        >
+          <SearchIcon className={cn("w-4 h-4 text-gray-500")} />
           <div className='flex flex-wrap items-center flex-1 gap-2'>
             {globalFilter &&
               globalFilter.map((filterTerm) => (
@@ -95,9 +101,9 @@ export function CatalogDataTableFilter<TData>({
                   <Tooltip>
                     <TooltipTrigger asChild>
                       <Button
-                        variant='outline'
+                        variant='ghost'
                         onClick={() => resetGlobalFilter()}
-                        className='h-8 px-2 transition-all lg:px-3'
+                        className='h-8 px-2 transition-all lg:px-3 text-primary'
                       >
                         <XIcon className='w-4 h-4 mr-2' />
                         {t("common.filter.reset_filter")}

client/src/app/quotes/components/CatalogPickerDataTable.tsx

@@ -4,12 +4,12 @@ import { CatalogDataTableFilter } from "@/app/catalog/components/CatalogDataTabl
 import { useCatalogList } from "@/app/catalog/hooks";
 import { DataTable } from "@/components";
 import { useDataTable, useDataTableContext } from "@/lib/hooks";
-import { Button } from "@/ui";
+import { Button, Input } from "@/ui";
 import { IListArticles_Response_DTO, MoneyValue } from "@shared/contexts";
-import { ColumnDef, Row } from "@tanstack/react-table";
+import { createColumnHelper, Row } from "@tanstack/react-table";
 import { t } from "i18next";
 import { PackagePlusIcon } from "lucide-react";
-import { useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 export const CatalogPickerDataTable = ({
@@ -23,12 +23,19 @@ export const CatalogPickerDataTable = ({
   const [quantities, setQuantities] = useState<number[]>([]);
 
   const handleQuantity = (index: number, quantity: number) => {
+    console.log("handleQuantity", index, quantity);
     setQuantities((prev) => {
-      prev[index] = quantity;
+      const newQuantities = [...prev];
-      return prev;
+      newQuantities[index] = quantity;
+      return newQuantities;
     });
   };
 
+  const resetQuantities = () => {
+    console.log("reset");
+    setQuantities([]);
+  };
+
   const { data, isPending, isError, error } = useCatalogList({
     pagination: {
       pageIndex: pagination.pageIndex,
@@ -37,7 +44,79 @@ export const CatalogPickerDataTable = ({
     searchTerm: globalFilter,
   });
 
-  const columns = useMemo<ColumnDef<IListArticles_Response_DTO>[]>(() => {
+  useEffect(() => {
+    resetQuantities();
+  }, [pagination, globalFilter, isFiltered]);
+
+  console.log(quantities);
+
+  const columnHelper = createColumnHelper<IListArticles_Response_DTO>();
+
+  const columns = [
+    columnHelper.accessor("description", {
+      id: "description",
+      header: () => <>{t("catalog.list.columns.description")}</>,
+    }),
+    columnHelper.accessor("points", {
+      id: "points",
+      header: () => <div className='text-right'>{t("catalog.list.columns.points")}</div>,
+      cell: ({ renderValue }: { renderValue: () => any }) => (
+        <div className='text-right'>{renderValue()}</div>
+      ),
+    }),
+    columnHelper.accessor("retail_price", {
+      id: "retail_price",
+      header: () => <div className='text-right'>{t("catalog.list.columns.retail_price")}</div>,
+      cell: ({ row }: { row: Row<IListArticles_Response_DTO> }) => {
+        const price = MoneyValue.create(row.original.retail_price).object;
+        return <div className='text-right'>{price.toFormat()}</div>;
+      },
+    }),
+    columnHelper.display({
+      id: "quantity",
+      header: () => (
+        <div className='font-medium text-right text-foreground'>
+          {t("catalog.list.columns.quantity")}
+        </div>
+      ),
+      cell: ({ row: { index } }) => {
+        return (
+          <Input
+            type='number'
+            name='quantity'
+            defaultValue={1}
+            min={1}
+            className='w-24'
+            value={quantities[index]}
+            onChange={(event) => {
+              event.preventDefault();
+              handleQuantity(index, parseInt(event.target.value));
+            }}
+          />
+        );
+      },
+    }),
+    columnHelper.display({
+      id: "row-actions",
+      header: () => null,
+      cell: ({ row }: { row: Row<IListArticles_Response_DTO> }) => (
+        <Button
+          size='sm'
+          variant='outline'
+          className='h-8 gap-1'
+          onClick={(event) => {
+            event.preventDefault();
+            onSelect && onSelect(row.original, quantities[row.index]);
+          }}
+        >
+          <PackagePlusIcon className='h-3.5 w-3.5' />
+          <span className='sr-only xl:not-sr-only xl:whitespace-nowrap'>{t("common.add")}</span>
+        </Button>
+      ),
+    }),
+  ];
+
+  /*const columns2 = useMemo<ColumnDef<IListArticles_Response_DTO>[]>(() => {
     return [
       {
         id: "description" as const,
@@ -64,18 +143,23 @@ export const CatalogPickerDataTable = ({
       {
         id: "quantity" as const,
         accessorKey: "quantity",
-        header: () => <div className='text-right'>{t("catalog.list.columns.quantity")}</div>,
+        header: () => (
+          <div className='font-medium text-right text-foreground'>
+            {t("catalog.list.columns.quantity")}
+          </div>
+        ),
         cell: ({ row: { index } }) => {
           return (
-            <input
+            <Input
               type='number'
               name='quantity'
               defaultValue={1}
               min={1}
+              className='w-24 text-right'
               value={quantities[index]}
               onChange={(event) => {
                 event.preventDefault();
-                handleQuantity(index, +event.target.value);
+                handleQuantity(index, parseInt(event.target.value));
               }}
             />
           );
@@ -100,10 +184,10 @@ export const CatalogPickerDataTable = ({
         ),
       },
     ];
-  }, []);
+  }, []);*/
 
-  const { table } = useDataTable({
+  const { table } = useDataTable<IListArticles_Response_DTO, any>({
-    data: data?.items ?? [],
+    data: [...(data?.items || [])],
     columns: columns,
     pageCount: data?.total_pages ?? -1,
   });