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'}>