feat(webapp): wip printing financial reports

packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsProvider.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { createContext, useContext } from 'react';
+import React, { createContext, useContext, useMemo } from 'react';
 import FinancialReportPage from '../FinancialReportPage';
 import { usePurchasesByItemsTable } from '@/hooks/query';
 import { transformFilterFormToQuery } from '../common';
@@ -7,26 +7,23 @@ import { transformFilterFormToQuery } from '../common';
 const PurchasesByItemsContext = createContext();
 
 function PurchasesByItemsProvider({ query, ...props }) {
+  // Transformes the report query to http query.
+  const httpQuery = useMemo(() => transformFilterFormToQuery(query), [query]);
+
   // Handle fetching the purchases by items report based on the given query.
   const {
     data: purchaseByItems,
     isFetching,
     isLoading,
     refetch,
-  } = usePurchasesByItemsTable(
-    {
-      ...transformFilterFormToQuery(query),
-    },
-    {
-      keepPreviousData: true,
-    },
-  );
+  } = usePurchasesByItemsTable(httpQuery, { keepPreviousData: true });
 
   const provider = {
     purchaseByItems,
     isFetching,
     isLoading,
     refetchSheet: refetch,
+    httpQuery,
   };
   return (
     <FinancialReportPage name={'purchase-by-items'}>

packages/webapp/src/containers/FinancialStatements/PurchasesByItems/components.tsx

@@ -37,11 +37,8 @@ export function PurchasesByItemsLoadingBar() {
  */
 export const PurchasesByItemsExportMenu = () => {
   const toastKey = useRef(null);
-  const commonToastConfig = {
-    isCloseButtonShown: true,
-    timeout: 2000,
-  };
-  const { query } = usePurchaseByItemsContext();
+  const commonToastConfig = { isCloseButtonShown: true, timeout: 2000 };
+  const { httpQuery } = usePurchaseByItemsContext();
 
   const openProgressToast = (amount: number) => {
     return (
@@ -57,9 +54,8 @@ export const PurchasesByItemsExportMenu = () => {
       </Stack>
     );
   };
-
   // Export the report to xlsx.
-  const { mutateAsync: xlsxExport } = usePurchasesByItemsXlsxExport(query, {
+  const { mutateAsync: xlsxExport } = usePurchasesByItemsXlsxExport(httpQuery, {
     onDownloadProgress: (xlsxExportProgress: number) => {
       if (!toastKey.current) {
         toastKey.current = AppToaster.show({
@@ -78,7 +74,7 @@ export const PurchasesByItemsExportMenu = () => {
     },
   });
   // Export the report to csv.
-  const { mutateAsync: csvExport } = usePurchasesByItemsCsvExport(query, {
+  const { mutateAsync: csvExport } = usePurchasesByItemsCsvExport(httpQuery, {
     onDownloadProgress: (xlsxExportProgress: number) => {
       if (!toastKey.current) {
         toastKey.current = AppToaster.show({

packages/webapp/src/containers/FinancialStatements/PurchasesByItems/dialogs/PurchasesByItemsDialog/PurchasesByItemsPdfDialogContent.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { AnchorButton } from '@blueprintjs/core';
 import {
   DialogContent,
@@ -5,9 +6,11 @@ import {
   FormattedMessage as T,
 } from '@/components';
 import { usePurchasesByItemsPdfExport } from '@/hooks/query';
+import { usePurchasesByItemsQuery } from '../../utils';
 
 export default function PurchasesByItemsPdfDialogContent() {
-  const { isLoading, pdfUrl } = usePurchasesByItemsPdfExport();
+  const { httpQuery } = usePurchasesByItemsQuery();
+  const { isLoading, pdfUrl } = usePurchasesByItemsPdfExport(httpQuery);
 
   return (
     <DialogContent>