.

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

@@ -1,5 +1,3 @@
-import { Badge, Button, Card, CardContent, CardHeader } from "@/ui";
-
 import {
   DataTable,
   DataTableSkeleton,
@@ -7,27 +5,21 @@ import {
   PDFViewer,
   SimpleEmptyState,
 } from "@/components";
-
 import { DataTableToolbar } from "@/components/DataTable/DataTableToolbar";
 import { useDataTable, useDataTableContext } from "@/lib/hooks";
+import { Badge, Button, Card, CardContent, CardHeader } from "@/ui";
 import { IListQuotes_Response_DTO, MoneyValue, UTCDateValue } from "@shared/contexts";
-import { ColumnDef, Row, Table } from "@tanstack/react-table";
+import { ColumnDef, Row } from "@tanstack/react-table";
 import { t } from "i18next";
 import { useMemo, useState } from "react";
 import { Trans } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { useQuotes } from "../hooks";
 
-export const QuotesDataTable = ({
+export const QuotesDataTable = ({ status = "all" }: { status?: string }) => {
-  status = "all",
-  className,
-}: {
-  status?: string;
-  className?: string;
-}) => {
   const navigate = useNavigate();
   const { pagination, globalFilter, isFiltered } = useDataTableContext();
-  const [focusedRow, setFocusedRow] = useState<Row<IListQuotes_Response_DTO>>();
+  const [focusedQuote, setFocusedQuote] = useState<string | undefined>(undefined);
   const { useList, useReport } = useQuotes();
 
   const { data, isPending, isError, error } = useList({
@@ -41,10 +33,11 @@ export const QuotesDataTable = ({
 
   const {
     data: reportData,
+    isLoading: reportIsLoading,
     isPending: reportIsPending,
     isError: reportIsError,
     error: errorReport,
-  } = useReport(focusedRow ? focusedRow.original.id : undefined);
+  } = useReport(focusedQuote);
 
   const columns = useMemo<ColumnDef<IListQuotes_Response_DTO, any>[]>(
     () => [
@@ -52,7 +45,7 @@ export const QuotesDataTable = ({
         id: "date" as const,
         accessor: "date",
         header: () => <>{t("quotes.list.columns.date")}</>,
-        cell: ({ table, row: { index, original }, column, getValue }) => {
+        cell: ({ row: { original } }) => {
           const quoteDate = UTCDateValue.create(original.date);
           return quoteDate.isSuccess ? quoteDate.object.toLocaleDateString("es-ES") : "-";
         },
@@ -94,6 +87,7 @@ export const QuotesDataTable = ({
         id: "status" as const,
         accessorKey: "status",
         header: () => <>{t("quotes.list.columns.status")}</>,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         cell: ({ renderValue }: { renderValue: () => any }) => <Badge>{renderValue()}</Badge>,
         enableResizing: false,
         size: 10,
@@ -114,7 +108,7 @@ export const QuotesDataTable = ({
       {
         id: "edit-acion",
         header: () => null,
-        cell: ({ row, table }: { row: Row<TData>; table: Table<TData> }) => (
+        cell: ({ row }: { row: Row<IListQuotes_Response_DTO> }) => (
           <Button
             variant='secondary'
             onClick={(e) => {
@@ -130,6 +124,7 @@ export const QuotesDataTable = ({
         size: 20,
       },
     ],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
 
@@ -141,7 +136,7 @@ export const QuotesDataTable = ({
 
   const handleOnRowClick = (row: Row<IListQuotes_Response_DTO>) => {
     console.log("setFocusedRow", row.id);
-    setFocusedRow(row);
+    setFocusedQuote(row.original.id);
   };
 
   if (isError) {
@@ -177,7 +172,7 @@ export const QuotesDataTable = ({
     );
   }
 
-  console.log(reportData);
+  console.log(reportData?.toString());
 
   return (
     <div className='grid items-start flex-1 gap-4 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3'>
@@ -194,7 +189,7 @@ export const QuotesDataTable = ({
           <CardHeader className='flex flex-row items-start bg-muted/50'></CardHeader>
           <CardContent>
             <PDFViewer
-              file={reportData}
+              file={{ data: reportData }}
               className='aspect-[3/4] object-contain overflow-hidden border-2 border-dashed rounded-lg'
             />
           </CardContent>

client/src/app/quotes/hooks/useQuotes.tsx

@@ -17,6 +17,7 @@ import {
   IUpdateQuote_Response_DTO,
   UniqueID,
 } from "@shared/contexts";
+import { useCallback } from "react";
 
 export type UseQuotesListParams = Omit<IGetListDataProviderParams, "filters" | "resource"> & {
   status?: string;
@@ -89,18 +90,6 @@ export const useQuotes = () => {
       });
     },
 
-    useOne: (id?: string, params?: UseQuotesGetParamsType) =>
-      useOne<IGetQuote_Response_DTO>({
-        queryKey: keys().data().resource("quotes").action("one").id(id).params().get(),
-        queryFn: () =>
-          dataSource.getOne({
-            resource: "quotes",
-            id: String(id),
-          }),
-        enabled: !!id,
-        ...params,
-      }),
-
     useCreate: () =>
       useSave<ICreateQuote_Response_DTO, TDataSourceError, ICreateQuote_Request_DTO>({
         //mutationKey: keys().data().resource("quotes").action("one").id("").params().get(),
@@ -139,19 +128,29 @@ export const useQuotes = () => {
         },
       }),
 
+    useOne: (id?: string, params?: UseQuotesGetParamsType) =>
+      useOne<IGetQuote_Response_DTO>({
+        queryKey: keys().data().resource("quotes").action("one").id(id).params().get(),
+        queryFn: () =>
+          dataSource.getOne({
+            resource: "quotes",
+            id: String(id),
+          }),
+        enabled: !!id,
+        ...params,
+      }),
+
     useReport: (id?: string, params?: UseQuotesReportParamsType) =>
-      useCustom<IReportQuote_Response_DTO>({
+      useCustom<ArrayBuffer, TDataSourceError, IReportQuote_Response_DTO>({
         queryKey: keys().data().resource("quotes").action("report").id(id).params().get(),
         queryFn: () =>
           dataSource.custom({
             url: `${dataSource.getApiUrl()}/quotes/${id}/report`,
             method: "get",
-            headers: {
+            responseType: "arraybuffer",
-              responseType: "arraybuffer",
-            },
           }),
         enabled: !!id,
-        select: (data) => new Uint8Array(data),
+        select: useCallback((data: ArrayBuffer) => new Uint8Array(data), []),
         ...params,
       }),
   };

client/src/lib/hooks/useDataSource/useCustom.tsx

@@ -1,14 +1,15 @@
 import { UseQueryOptions, UseQueryResult, keepPreviousData, useQuery } from "@tanstack/react-query";
-
 import { TDataSourceError, TDataSourceRecord } from "./types";
 
-export function useCustom<
+export const useCustom = <
   TQueryFnData extends TDataSourceRecord = TDataSourceRecord,
   TError = TDataSourceError,
   TData extends TDataSourceRecord = TQueryFnData
->(options: UseQueryOptions<TQueryFnData, TError, TData>): UseQueryResult<TData, TError> {
+>(
+  options: UseQueryOptions<TQueryFnData, TError, TData>
+): UseQueryResult<TData, TError> => {
   return useQuery<TQueryFnData, TError, TData>({
     placeholderData: keepPreviousData,
     ...options,
   });
-}
+};

client/src/lib/hooks/useDataSource/useOne.tsx

@@ -2,13 +2,15 @@ import { UseQueryOptions, UseQueryResult, keepPreviousData, useQuery } from "@ta
 
 import { TDataSourceError, TDataSourceRecord } from "./types";
 
-export function useOne<
+export const useOne = <
   TQueryFnData extends TDataSourceRecord = TDataSourceRecord,
   TError = TDataSourceError,
   TData extends TDataSourceRecord = TQueryFnData
->(options: UseQueryOptions<TQueryFnData, TError, TData>): UseQueryResult<TData, TError> {
+>(
+  options: UseQueryOptions<TQueryFnData, TError, TData>
+): UseQueryResult<TData, TError> => {
   return useQuery<TQueryFnData, TError, TData>({
     placeholderData: keepPreviousData,
     ...options,
   });
-}
+};