.

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

@@ -0,0 +1,142 @@
+import { PDFViewer } from "@/components";
+import { cn } from "@/lib/utils";
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Skeleton,
+} from "@/ui";
+import { IListQuotes_Response_DTO } from "@shared/contexts";
+import { t } from "i18next";
+import { CopyIcon, MoreVerticalIcon, TruckIcon } from "lucide-react";
+import { useMemo } from "react";
+import { Trans } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { useQuotes } from "../hooks";
+
+export const QuotePDFPreview = ({
+  quote,
+  className,
+}: {
+  quote?: IListQuotes_Response_DTO;
+  className: string;
+}) => {
+  const navigate = useNavigate();
+  const { useReport } = useQuotes();
+
+  const {
+    cancelQuery,
+    data: reportData,
+    isLoading: reportIsLoading,
+    isPending: reportIsPending,
+    isFetching: reportIsFetching,
+  } = useReport(quote?.id);
+
+  const file = useMemo(() => (reportData ? { data: reportData } : undefined), [reportData]);
+
+  if (!quote) {
+    return (
+      <Card className={cn("overflow-hidden", className)}>
+        <CardContent className='px-4 py-6 text-center'>
+          <p className='mx-auto'>Select a quote</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (reportIsLoading || reportIsPending || reportIsFetching) {
+    return (
+      <Card className={cn("overflow-hidden", className)}>
+        <CardHeader className='flex flex-row items-start'>
+          <CardTitle className='flex items-center gap-2 text-lg group'>
+            <Skeleton className='w-[250px] h-8 bg-card' />
+          </CardTitle>
+          <CardDescription>
+            <Skeleton className='w-full h-8' />
+          </CardDescription>
+        </CardHeader>
+        <CardContent className='flex content-center px-4 py-6 text-center'>
+          <Skeleton className='object-contain w-full overflow-hidden bg-white border-2 border-dashed rounded-lg min-h-min' />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className={cn("overflow-hidden", className)}>
+      <CardHeader className='bg-muted/50'>
+        <CardTitle className='flex items-center gap-2 text-lg group'>
+          {t("quotes.list.quote")}
+          <Button
+            size='icon'
+            variant='outline'
+            className='w-6 h-6 transition-opacity opacity-0 group-hover:opacity-100'
+          >
+            <CopyIcon className='w-3 h-3' />
+            <span className='sr-only'>Copy Order ID</span>
+          </Button>
+
+          <div className='flex items-center gap-1 ml-auto'>
+            <Button size='sm' variant='outline' className='h-8 gap-1'>
+              <TruckIcon className='h-3.5 w-3.5' />
+              <span className='lg:sr-only xl:not-sr-only xl:whitespace-nowrap'>Track Order</span>
+            </Button>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button size='icon' variant='outline' className='w-8 h-8'>
+                  <MoreVerticalIcon className='h-3.5 w-3.5' />
+                  <span className='sr-only'>
+                    <Trans i18nKey={"common.more"} />
+                  </span>
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align='end'>
+                <DropdownMenuItem
+                  onClick={(e) => {
+                    e.preventDefault();
+                    navigate(`/quotes/edit/${quote.id}`, { relative: "path" });
+                  }}
+                >
+                  <Trans i18nKey={"common.edit"} />
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Trans i18nKey={"common.download"} />
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Trans i18nKey={"common.remove"} />
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </CardTitle>
+        <CardDescription className='grid grid-cols-1 gap-2 space-y-2'>
+          {quote?.reference}
+          {quote?.date.toString()}
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <PDFViewer
+          file={file}
+          className='object-contain my-6 overflow-hidden bg-white border-dashed rounded-none border-1'
+        />
+        <button
+          onClick={(e) => {
+            e.preventDefault();
+            cancelQuery();
+          }}
+        >
+          Cancel
+        </button>
+      </CardContent>
+    </Card>
+  );
+};

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

@@ -1,13 +1,7 @@
-import {
+import { DataTable, DataTableSkeleton, ErrorOverlay, SimpleEmptyState } from "@/components";
-  DataTable,
-  DataTableSkeleton,
-  ErrorOverlay,
-  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 { Badge, Button, Card, CardContent } from "@/ui";
 import { IListQuotes_Response_DTO, MoneyValue, UTCDateValue } from "@shared/contexts";
 import { ColumnDef, Row } from "@tanstack/react-table";
 import { t } from "i18next";
@@ -15,12 +9,13 @@ import { useMemo, useState } from "react";
 import { Trans } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { useQuotes } from "../hooks";
+import { QuotePDFPreview } from "./QuotePDFPreview";
 
 export const QuotesDataTable = ({ status = "all" }: { status?: string }) => {
   const navigate = useNavigate();
   const { pagination, globalFilter, isFiltered } = useDataTableContext();
-  const [focusedQuote, setFocusedQuote] = useState<string | undefined>(undefined);
+  const [focusedQuote, setFocusedQuote] = useState<IListQuotes_Response_DTO | undefined>(undefined);
-  const { useList, useReport } = useQuotes();
+  const { useList } = useQuotes();
 
   const { data, isPending, isError, error } = useList({
     pagination: {
@@ -31,14 +26,6 @@ export const QuotesDataTable = ({ status = "all" }: { status?: string }) => {
     quickSearchTerm: globalFilter,
   });
 
-  const {
-    data: reportData,
-    isLoading: reportIsLoading,
-    isPending: reportIsPending,
-    isError: reportIsError,
-    error: errorReport,
-  } = useReport(focusedQuote);
-
   const columns = useMemo<ColumnDef<IListQuotes_Response_DTO, any>[]>(
     () => [
       {
@@ -135,8 +122,7 @@ export const QuotesDataTable = ({ status = "all" }: { status?: string }) => {
   });
 
   const handleOnRowClick = (row: Row<IListQuotes_Response_DTO>) => {
-    console.log("setFocusedRow", row.id);
+    setFocusedQuote(row.original);
-    setFocusedQuote(row.original.id);
   };
 
   if (isError) {
@@ -172,10 +158,8 @@ export const QuotesDataTable = ({ status = "all" }: { status?: string }) => {
     );
   }
 
-  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'>
+    <div className='grid items-stretch flex-1 gap-4 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3'>
       <DataTable
         table={table}
         paginationOptions={{ visible: true }}
@@ -184,17 +168,8 @@ export const QuotesDataTable = ({ status = "all" }: { status?: string }) => {
       >
         <DataTableToolbar table={table} />
       </DataTable>
-      <div>
+
-        <Card className='overflow-hidden' x-chunk='dashboard-05-chunk-4'>
+      <QuotePDFPreview quote={focusedQuote} className='flex-1' />
-          <CardHeader className='flex flex-row items-start bg-muted/50'></CardHeader>
-          <CardContent>
-            <PDFViewer
-              file={{ data: reportData }}
-              className='aspect-[3/4] object-contain overflow-hidden border-2 border-dashed rounded-lg'
-            />
-          </CardContent>
-        </Card>
-      </div>
     </div>
   );
 };

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

@@ -17,7 +17,8 @@ import {
   IUpdateQuote_Response_DTO,
   UniqueID,
 } from "@shared/contexts";
-import { useCallback } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useCallback, useMemo } from "react";
 
 export type UseQuotesListParams = Omit<IGetListDataProviderParams, "filters" | "resource"> & {
   status?: string;
@@ -140,18 +141,30 @@ export const useQuotes = () => {
         ...params,
       }),
 
-    useReport: (id?: string, params?: UseQuotesReportParamsType) =>
+    useReport: (id?: string, params?: UseQuotesReportParamsType) => {
-      useCustom<ArrayBuffer, TDataSourceError, IReportQuote_Response_DTO>({
+      const queryClient = useQueryClient();
-        queryKey: keys().data().resource("quotes").action("report").id(id).params().get(),
+      const queryKey = useMemo(
-        queryFn: () =>
+        () => keys().data().resource("quotes").action("report").id(id).params().get(),
-          dataSource.custom({
+        [id]
-            url: `${dataSource.getApiUrl()}/quotes/${id}/report`,
+      );
-            method: "get",
+
-            responseType: "arraybuffer",
+      return {
-          }),
+        ...useCustom<ArrayBuffer, TDataSourceError, IReportQuote_Response_DTO>({
-        enabled: !!id,
+          queryKey,
-        select: useCallback((data: ArrayBuffer) => new Uint8Array(data), []),
+          queryFn: ({ signal }) =>
-        ...params,
+            dataSource.custom({
-      }),
+              url: `${dataSource.getApiUrl()}/quotes/${id}/report`,
+              method: "get",
+              responseType: "arraybuffer",
+              signal,
+            }),
+
+          enabled: !!id,
+          select: useCallback((data: ArrayBuffer) => new Uint8Array(data), []),
+          ...params,
+        }),
+        cancelQuery: () => queryClient.cancelQueries({ queryKey }),
+      };
+    },
   };
 };

client/src/components/PDFViewer/PDFViewer.tsx

@@ -2,7 +2,7 @@ import { Button } from "@/ui";
 import { useResizeObserver } from "@wojtekmaj/react-hooks";
 import type { PDFDocumentProxy } from "pdfjs-dist";
 import printJS from "print-js";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Document, Page, pdfjs } from "react-pdf";
 import "react-pdf/dist/esm/Page/AnnotationLayer.css";
 import "react-pdf/dist/esm/Page/TextLayer.css";
@@ -21,7 +21,9 @@ const maxWidth = 800;
 const resizeObserverOptions = {};
 
 export interface PDFViewerProps {
-  file?: Uint8Array;
+  file?: {
+    data: Uint8Array;
+  };
   className?: string;
 }
 
@@ -30,10 +32,11 @@ export const PDFViewer = ({ file, className }: PDFViewerProps): JSX.Element => {
 
   const [numPages, setNumPages] = useState(0);
   const [pageNumber, setPageNumber] = useState(1);
+  const [renderedPageNumber, setRenderedPageNumber] = useState(null);
 
   const [width, setWidth] = useState(undefined);
-  //const parentRef = useRef(null);
+  const parentRef = useRef(null);
-  //const canvasRef = useRef(null);
+  const canvasRef = useRef(null);
 
   const [containerRef, setContainerRef] = useState<HTMLElement | null>(null);
   const [containerWidth, setContainerWidth] = useState<number>();
@@ -48,7 +51,7 @@ export const PDFViewer = ({ file, className }: PDFViewerProps): JSX.Element => {
 
   useResizeObserver(containerRef, resizeObserverOptions, onResize);
 
-  /*const hidePageCanvas = useCallback(() => {
+  const hidePageCanvas = useCallback(() => {
     const canvas = containerRef?.current?.querySelector("canvas");
     if (canvas) canvas.style.visibility = "hidden";
   }, [containerRef]);
@@ -69,9 +72,9 @@ export const PDFViewer = ({ file, className }: PDFViewerProps): JSX.Element => {
   const onPageRenderError = useCallback(() => {
     showPageCanvas();
   }, [showPageCanvas]);
-  */
 
   function onDocumentLoadSuccess({ numPages: nextNumPages }: PDFDocumentProxy): void {
+    setPageNumber(1);
     setNumPages(nextNumPages);
   }
 
@@ -90,7 +93,7 @@ export const PDFViewer = ({ file, className }: PDFViewerProps): JSX.Element => {
   const goToFirstPage = () => setPageNumber(1);
   const goToLastPage = () => setPageNumber(numPages);
 
-  /*useEffect(() => {
+  useEffect(() => {
     if (numPages > 0 || eventResize) {
       const parentWidth = parentRef.current ? parentRef.current.offsetWidth : 0;
       const canvasWidth = canvasRef.current ? canvasRef.current.width : 0;
@@ -101,10 +104,12 @@ export const PDFViewer = ({ file, className }: PDFViewerProps): JSX.Element => {
       setWidth(parentWidth);
       setEventResize(false);
     }
-  }, [eventResize, numPages]);**/
+  }, [eventResize, numPages]);
 
   //file={`data:application/pdf;base64,$(pdfBase64String)`}
 
+  const isLoading = renderedPageNumber !== pageNumber;
+
   return (
     <div className='flex flex-col' ref={setContainerRef}>
       <Document
@@ -112,23 +117,31 @@ export const PDFViewer = ({ file, className }: PDFViewerProps): JSX.Element => {
         file={file}
         onLoadSuccess={onDocumentLoadSuccess}
         className={className}
+        renderMode='canvas'
       >
-        {Array.from(new Array(numPages), (_el, index) => (
+        {isLoading && renderedPageNumber ? (
           <Page
-            canvasBackground={"white"}
+            key={`page_${renderedPageNumber}`}
-            key={`page_${index + 1}`}
+            className='prevPage'
-            pageNumber={index + 1}
+            pageNumber={renderedPageNumber}
-            width={containerWidth ? Math.min(containerWidth, maxWidth) : maxWidth}
+            width={width}
-            //onLoadSuccess={onPageLoadSuccess}
-            //onRenderSuccess={onPageRenderSuccess}
-            //onRenderError={onPageRenderError}
           />
-        ))}
+        ) : null}
+        <Page
+          canvasBackground={"white"}
+          key={`page_${pageNumber}`}
+          pageNumber={pageNumber}
+          canvasRef={canvasRef}
+          width={width}
+          onLoadSuccess={onPageLoadSuccess}
+          onRenderSuccess={onPageRenderSuccess}
+          onRenderError={onPageRenderError}
+        />
       </Document>
-      <p className='text-center'>
+      <p className='text-sm font-medium text-center'>
         Página {pageNumber} de {numPages}
       </p>
-      <div>
+      <div className='flex justify-between'>
         <Button size={"icon"} variant='link' onClick={goToPrevPage}>
           Prev
         </Button>

client/src/lib/axios/createAxiosDataProvider.ts

@@ -117,7 +117,7 @@ export const createAxiosDataProvider = (
   },
 
   custom: async <R>(params: ICustomDataProviderParam): Promise<R> => {
-    const { url, method, responseType, headers, ...payload } = params;
+    const { url, method, responseType, headers, signal, ...payload } = params;
     const requestUrl = `${url}?`;
 
     /*if (sort) {
@@ -168,6 +168,7 @@ export const createAxiosDataProvider = (
       default:
         customResponse = await httpClient.get<R>(requestUrl, {
           responseType,
+          signal,
           headers,
         });
         break;

client/src/lib/hooks/useDataSource/DataSource.ts

@@ -55,6 +55,7 @@ export interface IRemoveOneDataProviderParams {
 export interface ICustomDataProviderParam {
   url: string;
   method: "get" | "delete" | "head" | "options" | "post" | "put" | "patch";
+  signal?: AbortSignal;
   responseType?: ResponseType;
   headers?: {
     [key: string]: AxiosHeaderValue;

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

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

client/src/locales/en.json

@@ -110,7 +110,8 @@
           "status": "Status",
           "customer_information": "Customer",
           "total_price": "Imp. total"
-        }
+        },
+        "quote": "Quote"
       },
       "create": {
         "title": "New quote",