From 27fed5f18a46391a1e7801e14799320ded37b43a Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Sat, 17 Feb 2024 00:15:20 +0200
Subject: [PATCH] feat(webapp): wip printing financial reports

---
 .../APAgingSummary/APAgingSummaryProvider.tsx | 10 ++---
 .../APAgingSummary/components.tsx             | 11 ++----
 .../APAgingSummaryPdfDialogContent.tsx        |  5 ++-
 .../ARAgingSummary/ARAgingSummary.tsx         |  4 +-
 .../ARAgingSummary/ARAgingSummaryProvider.tsx | 10 ++---
 .../ARAgingSummary/components.tsx             |  6 +--
 .../ARAgingSummaryPdfDialog.tsx               |  2 +-
 .../ARAgingSummaryPdfDialogContent.tsx        |  5 ++-
 .../BalanceSheet/BalanceSheetActionsBar.tsx   |  2 -
 .../BalanceSheet/BalanceSheetProvider.tsx     | 11 ++----
 .../BalanceSheet/components.tsx               |  7 ++--
 .../BalanceSheetPdfDialogContent.tsx          |  5 ++-
 .../CashFlowStatementProvider.tsx             | 12 +++---
 .../CashflowSheetPdfDialogContent.tsx         |  5 ++-
 .../CashFlowStatement/components.tsx          | 38 ++++++++++---------
 ...CustomerBalanceSummaryPdfDialogContent.tsx |  7 +++-
 .../CustomersBalanceSummaryProvider.tsx       |  4 +-
 .../CustomersTransactionsProvider.tsx         |  9 ++---
 .../CustomerTransactionsPdfDialogContent.tsx  |  7 +++-
 .../GeneralLedger/GeneralLedgerProvider.tsx   |  7 ++--
 .../GeneralLedger/components.tsx              | 37 +++++++++---------
 .../GeneralLedgerPdfDialogContent.tsx         |  7 +++-
 .../InventoryItemDetailsProvider.tsx          |  2 +-
 .../InventoryItemDetailsPdfDialogContent.tsx  |  7 +++-
 .../InventoryValuationProvider.tsx            |  7 ++--
 ...nventoryValuationSheetPdfDialogContent.tsx |  7 +++-
 .../Journal/JournalProvider.tsx               |  7 ++--
 .../JournalPdfDialogContent.tsx               |  5 ++-
 .../ProfitLossSheet/ProfitLossProvider.tsx    | 17 +++------
 .../ProfitLossSheetPdfDialogContent.tsx       |  5 ++-
 .../ProfitLossSheet/components.tsx            |  8 ++--
 .../PurchasesByItemsProvider.tsx              | 15 +++-----
 .../PurchasesByItems/components.tsx           | 12 ++----
 .../PurchasesByItemsPdfDialogContent.tsx      |  5 ++-
 .../SalesByItems/SalesByItemProvider.tsx      | 15 +++-----
 .../SalesByItems/components.tsx               | 18 +++------
 .../SalesByItemsPdfDialogContent.tsx          |  5 ++-
 .../SalesTaxLiabilityPdfDialogContent.tsx     |  7 +++-
 .../SalesTaxLiabilitySummaryActionsBar.tsx    |  1 -
 .../TrialBalanceProvider.tsx                  | 14 +++----
 .../TrialBalanceSheetPdfDialogContent.tsx     |  5 ++-
 .../VendorsBalanceSummaryProvider.tsx         | 13 +++----
 .../VendorBalancePdfDialogContent.tsx         |  5 ++-
 .../VendorsTransactions.tsx                   |  4 +-
 .../VendorsTransactionsProvider.tsx           |  7 ++--
 .../FinancialReports/use-AP-aging-summary.ts  |  9 +++--
 .../FinancialReports/use-AR-aging-summary.ts  |  7 +++-
 .../FinancialReports/use-balance-sheet.ts     |  7 +++-
 .../FinancialReports/use-cashflow-sheet.ts    |  9 +++--
 .../use-customer-balance-summary.ts           |  9 +++--
 .../use-customer-transactions.ts              | 10 ++++-
 .../FinancialReports/use-general-ledger.ts    |  7 +++-
 .../use-inventory-item-details.ts             |  7 +++-
 .../use-inventory-valuation.ts                | 17 +++++----
 .../FinancialReports/use-journal-sheet.ts     |  5 ++-
 .../FinancialReports/use-profit-loss-sheet.ts |  9 +++--
 .../use-purchases-by-items.ts                 | 10 +++--
 .../FinancialReports/use-sales-by-items.ts    |  7 +++-
 .../use-sales-tax-liabilities-summary.ts      |  9 +++--
 .../use-trial-balance-sheet.ts                |  7 +++-
 .../use-vendor-balance-summary.ts             |  7 +++-
 .../use-vendor-transactions.ts                |  9 +++--
 62 files changed, 303 insertions(+), 244 deletions(-)

diff --git a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryProvider.tsx b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryProvider.tsx
index 28611a13d..844a2b904 100644
--- a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryProvider.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryProvider.tsx
@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useMemo, createContext, useContext } from 'react';
+import { useMemo, createContext, useContext } from 'react';
 
 import FinancialReportPage from '../FinancialReportPage';
 import { useAPAgingSummaryReport } from '@/hooks/query';
@@ -12,22 +12,22 @@ const APAgingSummaryContext = createContext();
  */
 function APAgingSummaryProvider({ filter, ...props }) {
   // Transformers the filter from to the Url query.
-  const query = useMemo(() => transformFilterFormToQuery(filter), [filter]);
+  const httpQuery = useMemo(() => transformFilterFormToQuery(filter), [filter]);
 
   const {
     data: APAgingSummary,
     isLoading: isAPAgingLoading,
     isFetching: isAPAgingFetching,
     refetch,
-  } = useAPAgingSummaryReport(query, { keepPreviousData: true });
+  } = useAPAgingSummaryReport(httpQuery, { keepPreviousData: true });
 
   const provider = {
     APAgingSummary,
-
     isAPAgingLoading,
     isAPAgingFetching,
     refetch,
-    query,
+    query: httpQuery,
+    httpQuery,
   };
 
   return (
diff --git a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/components.tsx b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/components.tsx
index b313bab50..408057c22 100644
--- a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/components.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/components.tsx
@@ -49,11 +49,8 @@ export function APAgingSummarySheetLoadingBar() {
  */
 export function APAgingSummaryExportMenu() {
   const toastKey = useRef(null);
-  const commonToastConfig = {
-    isCloseButtonShown: true,
-    timeout: 2000,
-  };
-  const { query } = useAPAgingSummaryContext();
+  const commonToastConfig = { isCloseButtonShown: true, timeout: 2000 };
+  const { httpQuery } = useAPAgingSummaryContext();
 
   const openProgressToast = (amount: number) => {
     return (
@@ -70,7 +67,7 @@ export function APAgingSummaryExportMenu() {
     );
   };
   // Export the report to xlsx.
-  const { mutateAsync: xlsxExport } = useAPAgingSheetXlsxExport(query, {
+  const { mutateAsync: xlsxExport } = useAPAgingSheetXlsxExport(httpQuery, {
     onDownloadProgress: (xlsxExportProgress: number) => {
       if (!toastKey.current) {
         toastKey.current = AppToaster.show({
@@ -89,7 +86,7 @@ export function APAgingSummaryExportMenu() {
     },
   });
   // Export the report to csv.
-  const { mutateAsync: csvExport } = useAPAgingSheetCsvExport(query, {
+  const { mutateAsync: csvExport } = useAPAgingSheetCsvExport(httpQuery, {
     onDownloadProgress: (xlsxExportProgress: number) => {
       if (!toastKey.current) {
         toastKey.current = AppToaster.show({
diff --git a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/dialogs/APAgingSummaryPdfDialog/APAgingSummaryPdfDialogContent.tsx b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/dialogs/APAgingSummaryPdfDialog/APAgingSummaryPdfDialogContent.tsx
index eea72599d..de94494bd 100644
--- a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/dialogs/APAgingSummaryPdfDialog/APAgingSummaryPdfDialogContent.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/dialogs/APAgingSummaryPdfDialog/APAgingSummaryPdfDialogContent.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   DialogContent,
   PdfDocumentPreview,
@@ -5,9 +6,11 @@ import {
 } from '@/components';
 import { useAPAgingSummaryPdf } from '@/hooks/query';
 import { AnchorButton } from '@blueprintjs/core';
+import { useAPAgingSummaryContext } from '../../APAgingSummaryProvider';
 
 export default function APAgingSummaryPdfDialogContent() {
-  const { isLoading, pdfUrl } = useAPAgingSummaryPdf();
+  const { httpQuery } = useAPAgingSummaryContext();
+  const { isLoading, pdfUrl } = useAPAgingSummaryPdf(httpQuery);
 
   return (
     <DialogContent>
diff --git a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.tsx b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.tsx
index 336bfb4e0..f56ba5a00 100644
--- a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.tsx
@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useState, useCallback, useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import moment from 'moment';
 
 import ARAgingSummaryHeader from './ARAgingSummaryHeader';
@@ -13,9 +13,9 @@ import { ARAgingSummaryBody } from './ARAgingSummaryBody';
 import withARAgingSummaryActions from './withARAgingSummaryActions';
 
 import { useARAgingSummaryQuery } from './common';
-import { compose } from '@/utils';
 import { ARAgingSummaryPdfDialog } from './dialogs/ARAgingSummaryPdfDialog';
 import { DialogsName } from '@/constants/dialogs';
+import { compose } from '@/utils';
 
 /**
  * A/R aging summary report.
diff --git a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryProvider.tsx b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryProvider.tsx
index 1b9577900..1698870a5 100644
--- a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryProvider.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryProvider.tsx
@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useMemo, createContext, useContext } from 'react';
+import { useMemo, createContext, useContext } from 'react';
 import FinancialReportPage from '../FinancialReportPage';
 import { useARAgingSummaryReport } from '@/hooks/query';
 import { transformFilterFormToQuery } from '../common';
@@ -11,10 +11,7 @@ const ARAgingSummaryContext = createContext();
  */
 function ARAgingSummaryProvider({ filter, ...props }) {
   // Transformes the filter from to the url query.
-  const requestQuery = useMemo(
-    () => transformFilterFormToQuery(filter),
-    [filter],
-  );
+  const httpQuery = useMemo(() => transformFilterFormToQuery(filter), [filter]);
 
   // A/R aging summary sheet context.
   const {
@@ -22,13 +19,14 @@ function ARAgingSummaryProvider({ filter, ...props }) {
     isLoading: isARAgingLoading,
     isFetching: isARAgingFetching,
     refetch,
-  } = useARAgingSummaryReport(requestQuery, { keepPreviousData: true });
+  } = useARAgingSummaryReport(httpQuery, { keepPreviousData: true });
 
   const provider = {
     ARAgingSummary,
     isARAgingLoading,
     isARAgingFetching,
     refetch,
+    httpQuery,
   };
 
   return (
diff --git a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/components.tsx b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/components.tsx
index 19166c101..6039fbfc5 100644
--- a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/components.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/components.tsx
@@ -53,7 +53,7 @@ export function ARAgingSummaryExportMenu() {
     isCloseButtonShown: true,
     timeout: 2000,
   };
-  const { query } = useARAgingSummaryContext();
+  const { httpQuery } = useARAgingSummaryContext();
 
   const openProgressToast = (amount: number) => {
     return (
@@ -71,7 +71,7 @@ export function ARAgingSummaryExportMenu() {
   };
 
   // Export the report to xlsx.
-  const { mutateAsync: xlsxExport } = useARAgingSheetXlsxExport(query, {
+  const { mutateAsync: xlsxExport } = useARAgingSheetXlsxExport(httpQuery, {
     onDownloadProgress: (xlsxExportProgress: number) => {
       if (!toastKey.current) {
         toastKey.current = AppToaster.show({
@@ -90,7 +90,7 @@ export function ARAgingSummaryExportMenu() {
     },
   });
   // Export the report to csv.
-  const { mutateAsync: csvExport } = useARAgingSheetCsvExport(query, {
+  const { mutateAsync: csvExport } = useARAgingSheetCsvExport(httpQuery, {
     onDownloadProgress: (xlsxExportProgress: number) => {
       if (!toastKey.current) {
         toastKey.current = AppToaster.show({
diff --git a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/dialogs/ARAgingSummaryPdfDialog/ARAgingSummaryPdfDialog.tsx b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/dialogs/ARAgingSummaryPdfDialog/ARAgingSummaryPdfDialog.tsx
index ed89fc30c..5ae8d9998 100644
--- a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/dialogs/ARAgingSummaryPdfDialog/ARAgingSummaryPdfDialog.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/dialogs/ARAgingSummaryPdfDialog/ARAgingSummaryPdfDialog.tsx
@@ -20,7 +20,7 @@ function ARAgingSummaryPdfDialogRoot({ dialogName, payload, isOpen }) {
   return (
     <Dialog
       name={dialogName}
-      title={'AR Aging Summary Print Preview'}
+      title={'A/R Aging Summary Print Preview'}
       className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
       autoFocus={true}
       canEscapeKeyClose={true}
diff --git a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/dialogs/ARAgingSummaryPdfDialog/ARAgingSummaryPdfDialogContent.tsx b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/dialogs/ARAgingSummaryPdfDialog/ARAgingSummaryPdfDialogContent.tsx
index fd5fef4d0..add15f432 100644
--- a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/dialogs/ARAgingSummaryPdfDialog/ARAgingSummaryPdfDialogContent.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/dialogs/ARAgingSummaryPdfDialog/ARAgingSummaryPdfDialogContent.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   DialogContent,
   PdfDocumentPreview,
@@ -5,9 +6,11 @@ import {
 } from '@/components';
 import { useARAgingSummaryPdf } from '@/hooks/query';
 import { AnchorButton } from '@blueprintjs/core';
+import { useARAgingSummaryContext } from '../../ARAgingSummaryProvider';
 
 export default function ARAgingSummaryPdfDialogContent() {
-  const { isLoading, pdfUrl } = useARAgingSummaryPdf();
+  const { httpQuery } = useARAgingSummaryContext();
+  const { isLoading, pdfUrl } = useARAgingSummaryPdf(httpQuery);
 
   return (
     <DialogContent>
diff --git a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.tsx
index d268b4127..75d1a3236 100644
--- a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.tsx
@@ -85,7 +85,6 @@ function BalanceSheetActionsBar({
           active={balanceSheetDrawerFilter}
         />
         <NavbarDivider />
-
         <Popover
           content={
             <NumberFormatDropdown
@@ -118,7 +117,6 @@ function BalanceSheetActionsBar({
         </Popover>
 
         <NavbarDivider />
-
         <Button
           className={Classes.MINIMAL}
           onClick={handlePdfPrintBtnSubmit}
diff --git a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetProvider.tsx b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetProvider.tsx
index 13c1b583e..aa890b1e5 100644
--- a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetProvider.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetProvider.tsx
@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { createContext, useContext } from 'react';
+import { createContext, useContext, useMemo } from 'react';
 
 import FinancialReportPage from '../FinancialReportPage';
 import { useBalanceSheet } from '@/hooks/query';
@@ -9,9 +9,7 @@ const BalanceSheetContext = createContext();
 
 function BalanceSheetProvider({ filter, ...props }) {
   // Transformes the given filter to query.
-  const query = React.useMemo(() => transformFilterFormToQuery(filter), [
-    filter,
-  ]);
+  const httpQuery = useMemo(() => transformFilterFormToQuery(filter), [filter]);
 
   // Fetches the balance sheet report.
   const {
@@ -19,15 +17,14 @@ function BalanceSheetProvider({ filter, ...props }) {
     isFetching,
     isLoading,
     refetch,
-  } = useBalanceSheet(query, { keepPreviousData: true });
+  } = useBalanceSheet(httpQuery, { keepPreviousData: true });
 
   const provider = {
     balanceSheet,
     isFetching,
     isLoading,
     refetchBalanceSheet: refetch,
-
-    query,
+    httpQuery,
     filter,
   };
   return (
diff --git a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/components.tsx b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/components.tsx
index 7a27c33c4..b7b123f2f 100644
--- a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/components.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/components.tsx
@@ -96,7 +96,7 @@ export const BalanceSheetExportMenu = () => {
     isCloseButtonShown: true,
     timeout: 2000,
   };
-  const { query } = useBalanceSheetContext();
+  const { httpQuery } = useBalanceSheetContext();
 
   const openProgressToast = (amount: number) => {
     return (
@@ -114,7 +114,7 @@ export const BalanceSheetExportMenu = () => {
   };
 
   // Export the report to xlsx.
-  const { mutateAsync: xlsxExport } = useBalanceSheetXlsxExport(query, {
+  const { mutateAsync: xlsxExport } = useBalanceSheetXlsxExport(httpQuery, {
     onDownloadProgress: (xlsxExportProgress: number) => {
       if (!toastKey.current) {
         toastKey.current = AppToaster.show({
@@ -132,8 +132,9 @@ export const BalanceSheetExportMenu = () => {
       }
     },
   });
+
   // Export the report to csv.
-  const { mutateAsync: csvExport } = useBalanceSheetCsvExport(query, {
+  const { mutateAsync: csvExport } = useBalanceSheetCsvExport(httpQuery, {
     onDownloadProgress: (xlsxExportProgress: number) => {
       if (!toastKey.current) {
         toastKey.current = AppToaster.show({
diff --git a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/dialogs/BalanceSheetPdfDialog/BalanceSheetPdfDialogContent.tsx b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/dialogs/BalanceSheetPdfDialog/BalanceSheetPdfDialogContent.tsx
index 338b0489c..74400ecf0 100644
--- a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/dialogs/BalanceSheetPdfDialog/BalanceSheetPdfDialogContent.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/dialogs/BalanceSheetPdfDialog/BalanceSheetPdfDialogContent.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   DialogContent,
   PdfDocumentPreview,
@@ -5,9 +6,11 @@ import {
 } from '@/components';
 import { useBalanceSheetPdf } from '@/hooks/query';
 import { AnchorButton } from '@blueprintjs/core';
+import { useBalanceSheetContext } from '../../BalanceSheetProvider';
 
 export default function BalanceSheetPdfDialogContent() {
-  const { isLoading, pdfUrl } = useBalanceSheetPdf();
+  const { httpQuery } = useBalanceSheetContext();
+  const { isLoading, pdfUrl } = useBalanceSheetPdf({ ...httpQuery });
 
   return (
     <DialogContent>
diff --git a/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementProvider.tsx b/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementProvider.tsx
index 9ce42d986..fab83a67e 100644
--- a/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementProvider.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementProvider.tsx
@@ -10,27 +10,27 @@ const CashFLowStatementContext = React.createContext();
  * Cash flow statement provider.
  */
 function CashFlowStatementProvider({ filter, ...props }) {
-  // transforms the given filter to query.
-  const query = React.useMemo(
+  // Transforms the given state query to http query.
+  const httpQuery = React.useMemo(
     () => transformFilterFormToQuery(filter),
     [filter],
   );
-
-  // fetch the cash flow statement report.
+  // Fetching the cash flow statement report.
   const {
     data: cashFlowStatement,
     isFetching: isCashFlowFetching,
     isLoading: isCashFlowLoading,
     refetch: refetchCashFlow,
-  } = useCashFlowStatementReport(query, { keepPreviousData: true });
+  } = useCashFlowStatementReport(httpQuery, { keepPreviousData: true });
 
   const provider = {
     cashFlowStatement,
     isCashFlowFetching,
     isCashFlowLoading,
     refetchCashFlow,
-    query,
+    query: httpQuery,
     filter,
+    httpQuery,
   };
 
   return (
diff --git a/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashflowSheetPdfDialog/CashflowSheetPdfDialogContent.tsx b/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashflowSheetPdfDialog/CashflowSheetPdfDialogContent.tsx
index 3ef39e3ce..ada8297af 100644
--- a/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashflowSheetPdfDialog/CashflowSheetPdfDialogContent.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashflowSheetPdfDialog/CashflowSheetPdfDialogContent.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   DialogContent,
   PdfDocumentPreview,
@@ -5,9 +6,11 @@ import {
 } from '@/components';
 import { AnchorButton } from '@blueprintjs/core';
 import { useCashflowSheetPdf } from '@/hooks/query';
+import { useCashFlowStatementContext } from '../CashFlowStatementProvider';
 
 export default function CashflowSheetPdfDialogContent() {
-  const { isLoading, pdfUrl } = useCashflowSheetPdf();
+  const { httpQuery } = useCashFlowStatementContext();
+  const { isLoading, pdfUrl } = useCashflowSheetPdf(httpQuery);
 
   return (
     <DialogContent>
diff --git a/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/components.tsx b/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/components.tsx
index ee86944f6..61ccf2224 100644
--- a/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/components.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/components.tsx
@@ -95,7 +95,7 @@ export function CashflowSheetExportMenu() {
     isCloseButtonShown: true,
     timeout: 2000,
   };
-  const { query } = useCashFlowStatementContext();
+  const { httpQuery } = useCashFlowStatementContext();
 
   const openProgressToast = (amount: number) => {
     return (
@@ -113,26 +113,30 @@ export function CashflowSheetExportMenu() {
   };
 
   // Export the report to xlsx.
-  const { mutateAsync: xlsxExport } = useCashFlowStatementXlsxExport(query, {
-    onDownloadProgress: (xlsxExportProgress: number) => {
-      if (!toastKey.current) {
-        toastKey.current = AppToaster.show({
-          message: openProgressToast(xlsxExportProgress),
-          ...commonToastConfig,
-        });
-      } else {
-        AppToaster.show(
-          {
+  const { mutateAsync: xlsxExport } = useCashFlowStatementXlsxExport(
+    httpQuery,
+    {
+      onDownloadProgress: (xlsxExportProgress: number) => {
+        if (!toastKey.current) {
+          toastKey.current = AppToaster.show({
             message: openProgressToast(xlsxExportProgress),
             ...commonToastConfig,
-          },
-          toastKey.current,
-        );
-      }
+          });
+        } else {
+          AppToaster.show(
+            {
+              message: openProgressToast(xlsxExportProgress),
+              ...commonToastConfig,
+            },
+            toastKey.current,
+          );
+        }
+      },
     },
-  });
+  );
+
   // Export the report to csv.
-  const { mutateAsync: csvExport } = useCashFlowStatementCsvExport(query, {
+  const { mutateAsync: csvExport } = useCashFlowStatementCsvExport(httpQuery, {
     onDownloadProgress: (xlsxExportProgress: number) => {
       if (!toastKey.current) {
         toastKey.current = AppToaster.show({
diff --git a/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomerBalancePdfDialog/CustomerBalanceSummaryPdfDialogContent.tsx b/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomerBalancePdfDialog/CustomerBalanceSummaryPdfDialogContent.tsx
index c970c1849..30e080fbe 100644
--- a/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomerBalancePdfDialog/CustomerBalanceSummaryPdfDialogContent.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomerBalancePdfDialog/CustomerBalanceSummaryPdfDialogContent.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   DialogContent,
   PdfDocumentPreview,
@@ -5,9 +6,11 @@ import {
 } from '@/components';
 import { AnchorButton } from '@blueprintjs/core';
 import { useCustomerBalanceSummaryPdf } from '@/hooks/query';
+import { useCustomersBalanceSummaryContext } from '../CustomersBalanceSummaryProvider';
 
 export default function CustomerBalanceSummaryPdfDialogContent() {
-  const { isLoading, pdfUrl } = useCustomerBalanceSummaryPdf();
+  const { httpQuery } = useCustomersBalanceSummaryContext();
+  const { isLoading, pdfUrl } = useCustomerBalanceSummaryPdf(httpQuery);
 
   return (
     <DialogContent>
@@ -23,7 +26,7 @@ export default function CustomerBalanceSummaryPdfDialogContent() {
 
         <AnchorButton
           href={pdfUrl}
-          download={'invoice.pdf'}
+          download={'customer-balance-summary.pdf'}
           minimal={true}
           outlined={true}
         >
diff --git a/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryProvider.tsx b/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryProvider.tsx
index c9d40b22b..f981a86c1 100644
--- a/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryProvider.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryProvider.tsx
@@ -29,9 +29,9 @@ function CustomersBalanceSummaryProvider({ filter, ...props }) {
     CustomerBalanceSummary,
     isCustomersBalanceFetching,
     isCustomersBalanceLoading,
-
     refetch,
-    query
+    query,
+    httpQuery: query
   };
   return (
     <FinancialReportPage name={'customers-balance-summary'}>
diff --git a/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsProvider.tsx b/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsProvider.tsx
index ef7d69954..2c3ce243d 100644
--- a/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsProvider.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsProvider.tsx
@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { createContext, useContext, useMemo } from 'react';
+import { createContext, useContext, useMemo } from 'react';
 import FinancialReportPage from '../FinancialReportPage';
 import { useCustomersTransactionsReport } from '@/hooks/query';
 import { transformFilterFormToQuery } from '../common';
@@ -10,9 +10,7 @@ const CustomersTransactionsContext = createContext();
  * Customers transactions provider.
  */
 function CustomersTransactionsProvider({ filter, ...props }) {
-  const query = useMemo(() => transformFilterFormToQuery(filter), [
-    filter,
-  ]);
+  const query = useMemo(() => transformFilterFormToQuery(filter), [filter]);
 
   // Fetches the customers transactions.
   const {
@@ -29,7 +27,8 @@ function CustomersTransactionsProvider({ filter, ...props }) {
     CustomersTransactionsRefetch,
 
     filter,
-    query
+    query,
+    httpQuery: query,
   };
 
   return (
diff --git a/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/dialogs/CustomerTransactionsPdfDialog/CustomerTransactionsPdfDialogContent.tsx b/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/dialogs/CustomerTransactionsPdfDialog/CustomerTransactionsPdfDialogContent.tsx
index 1efe79017..e70ee1319 100644
--- a/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/dialogs/CustomerTransactionsPdfDialog/CustomerTransactionsPdfDialogContent.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/dialogs/CustomerTransactionsPdfDialog/CustomerTransactionsPdfDialogContent.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   DialogContent,
   PdfDocumentPreview,
@@ -5,9 +6,11 @@ import {
 } from '@/components';
 import { AnchorButton } from '@blueprintjs/core';
 import { useCustomersTransactionsPdfExport } from '@/hooks/query';
+import { useCustomersTransactionsContext } from '../../CustomersTransactionsProvider';
 
 export default function CashflowSheetPdfDialogContent() {
-  const { isLoading, pdfUrl } = useCustomersTransactionsPdfExport();
+  const { httpQuery } = useCustomersTransactionsContext();
+  const { isLoading, pdfUrl } = useCustomersTransactionsPdfExport(httpQuery);
 
   return (
     <DialogContent>
@@ -23,7 +26,7 @@ export default function CashflowSheetPdfDialogContent() {
 
         <AnchorButton
           href={pdfUrl}
-          download={'invoice.pdf'}
+          download={'customer-transactions.pdf'}
           minimal={true}
           outlined={true}
         >
diff --git a/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerProvider.tsx b/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerProvider.tsx
index d38464d77..3b926c011 100644
--- a/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerProvider.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerProvider.tsx
@@ -12,24 +12,23 @@ const GeneralLedgerContext = createContext();
  */
 function GeneralLedgerProvider({ query, ...props }) {
   // Transformes the report query to request query.
-  const requestQuery = React.useMemo(
+  const httpQuery = React.useMemo(
     () => transformFilterFormToQuery(query),
     [query],
   );
-
   const {
     data: generalLedger,
     isFetching,
     isLoading,
     refetch,
-  } = useGeneralLedgerSheet(requestQuery, { keepPreviousData: true });
+  } = useGeneralLedgerSheet(httpQuery, { keepPreviousData: true });
 
   const provider = {
     generalLedger,
     sheetRefresh: refetch,
     isFetching,
     isLoading,
-    httpRequest: requestQuery
+    httpQuery,
   };
   return (
     <FinancialReportPage name={'general-ledger-sheet'}>
diff --git a/packages/webapp/src/containers/FinancialStatements/GeneralLedger/components.tsx b/packages/webapp/src/containers/FinancialStatements/GeneralLedger/components.tsx
index 25ff495da..0cc6bc84b 100644
--- a/packages/webapp/src/containers/FinancialStatements/GeneralLedger/components.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/GeneralLedger/components.tsx
@@ -79,7 +79,7 @@ export const GeneralLedgerSheetExportMenu = () => {
     isCloseButtonShown: true,
     timeout: 2000,
   };
-  const { httpRequest } = useGeneralLedgerContext();
+  const { httpQuery } = useGeneralLedgerContext();
 
   const openProgressToast = (amount: number) => {
     return (
@@ -97,7 +97,7 @@ export const GeneralLedgerSheetExportMenu = () => {
   };
   // Export the report to xlsx.
   const { mutateAsync: xlsxExport } = useGeneralLedgerSheetXlsxExport(
-    httpRequest,
+    httpQuery,
     {
       onDownloadProgress: (xlsxExportProgress: number) => {
         if (!toastKey.current) {
@@ -118,27 +118,24 @@ export const GeneralLedgerSheetExportMenu = () => {
     },
   );
   // Export the report to csv.
-  const { mutateAsync: csvExport } = useGeneralLedgerSheetCsvExport(
-    httpRequest,
-    {
-      onDownloadProgress: (xlsxExportProgress: number) => {
-        if (!toastKey.current) {
-          toastKey.current = AppToaster.show({
+  const { mutateAsync: csvExport } = useGeneralLedgerSheetCsvExport(httpQuery, {
+    onDownloadProgress: (xlsxExportProgress: number) => {
+      if (!toastKey.current) {
+        toastKey.current = AppToaster.show({
+          message: openProgressToast(xlsxExportProgress),
+          ...commonToastConfig,
+        });
+      } else {
+        AppToaster.show(
+          {
             message: openProgressToast(xlsxExportProgress),
             ...commonToastConfig,
-          });
-        } else {
-          AppToaster.show(
-            {
-              message: openProgressToast(xlsxExportProgress),
-              ...commonToastConfig,
-            },
-            toastKey.current,
-          );
-        }
-      },
+          },
+          toastKey.current,
+        );
+      }
     },
-  );
+  });
   // Handle csv export button click.
   const handleCsvExportBtnClick = () => {
     csvExport();
diff --git a/packages/webapp/src/containers/FinancialStatements/GeneralLedger/dialogs/GeneralLedgerPdfDialog/GeneralLedgerPdfDialogContent.tsx b/packages/webapp/src/containers/FinancialStatements/GeneralLedger/dialogs/GeneralLedgerPdfDialog/GeneralLedgerPdfDialogContent.tsx
index bf2a34e33..9a42d8b00 100644
--- a/packages/webapp/src/containers/FinancialStatements/GeneralLedger/dialogs/GeneralLedgerPdfDialog/GeneralLedgerPdfDialogContent.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/GeneralLedger/dialogs/GeneralLedgerPdfDialog/GeneralLedgerPdfDialogContent.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   DialogContent,
   PdfDocumentPreview,
@@ -5,9 +6,11 @@ import {
 } from '@/components';
 import { AnchorButton } from '@blueprintjs/core';
 import { useGeneralLedgerPdf } from '@/hooks/query';
+import { useGeneralLedgerContext } from '../../GeneralLedgerProvider';
 
 export default function GeneralLedgerPdfDialogContent() {
-  const { isLoading, pdfUrl } = useGeneralLedgerPdf();
+  const { httpQuery } = useGeneralLedgerContext();
+  const { isLoading, pdfUrl } = useGeneralLedgerPdf(httpQuery);
 
   return (
     <DialogContent>
@@ -23,7 +26,7 @@ export default function GeneralLedgerPdfDialogContent() {
 
         <AnchorButton
           href={pdfUrl}
-          download={'invoice.pdf'}
+          download={'general-ledger.pdf'}
           minimal={true}
           outlined={true}
         >
diff --git a/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsProvider.tsx b/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsProvider.tsx
index e26c00cfd..619fb5451 100644
--- a/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsProvider.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsProvider.tsx
@@ -28,8 +28,8 @@ function InventoryItemDetailsProvider({ query, ...props }) {
     isInventoryItemDetailsFetching,
     isInventoryItemDetailsLoading,
     inventoryItemDetailsRefetch,
-
     query,
+    httpQuery: requestQuery
   };
 
   return (
diff --git a/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/dialogs/InventoryItemDetailsPdfDialog/InventoryItemDetailsPdfDialogContent.tsx b/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/dialogs/InventoryItemDetailsPdfDialog/InventoryItemDetailsPdfDialogContent.tsx
index 1310d7914..acd266243 100644
--- a/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/dialogs/InventoryItemDetailsPdfDialog/InventoryItemDetailsPdfDialogContent.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/dialogs/InventoryItemDetailsPdfDialog/InventoryItemDetailsPdfDialogContent.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   DialogContent,
   PdfDocumentPreview,
@@ -5,9 +6,11 @@ import {
 } from '@/components';
 import { useInventoryItemDetailsPdf } from '@/hooks/query';
 import { AnchorButton } from '@blueprintjs/core';
+import { useInventoryItemDetailsContext } from '../../InventoryItemDetailsProvider';
 
 export default function InventoryItemDetailsPdfDialogContent() {
-  const { isLoading, pdfUrl } = useInventoryItemDetailsPdf();
+  const { httpQuery } = useInventoryItemDetailsContext();
+  const { isLoading, pdfUrl } = useInventoryItemDetailsPdf(httpQuery);
 
   return (
     <DialogContent>
@@ -23,7 +26,7 @@ export default function InventoryItemDetailsPdfDialogContent() {
 
         <AnchorButton
           href={pdfUrl}
-          download={'invoice.pdf'}
+          download={'inventory-item-details.pdf'}
           minimal={true}
           outlined={true}
         >
diff --git a/packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationProvider.tsx b/packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationProvider.tsx
index e674ce1bd..77c8ad45a 100644
--- a/packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationProvider.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationProvider.tsx
@@ -11,7 +11,7 @@ const InventoryValuationContext = React.createContext();
  */
 function InventoryValuationProvider({ query, ...props }) {
   // Transformes the filter form query to request query.
-  const requestQuery = React.useMemo(
+  const httpQuery = React.useMemo(
     () => transformFilterFormToQuery(query),
     [query],
   );
@@ -21,9 +21,7 @@ function InventoryValuationProvider({ query, ...props }) {
     isFetching,
     isLoading,
     refetch,
-  } = useInventoryValuationTable(requestQuery, {
-    keepPreviousData: true,
-  });
+  } = useInventoryValuationTable(httpQuery, { keepPreviousData: true });
 
   // Provider data.
   const provider = {
@@ -31,6 +29,7 @@ function InventoryValuationProvider({ query, ...props }) {
     isLoading,
     isFetching,
     refetchSheet: refetch,
+    httpQuery
   };
 
   return (
diff --git a/packages/webapp/src/containers/FinancialStatements/InventoryValuation/dialogs/InventoryValuationPdfDialog/InventoryValuationSheetPdfDialogContent.tsx b/packages/webapp/src/containers/FinancialStatements/InventoryValuation/dialogs/InventoryValuationPdfDialog/InventoryValuationSheetPdfDialogContent.tsx
index 1f3fa57fa..142e4ce61 100644
--- a/packages/webapp/src/containers/FinancialStatements/InventoryValuation/dialogs/InventoryValuationPdfDialog/InventoryValuationSheetPdfDialogContent.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/InventoryValuation/dialogs/InventoryValuationPdfDialog/InventoryValuationSheetPdfDialogContent.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   DialogContent,
   PdfDocumentPreview,
@@ -5,9 +6,11 @@ import {
 } from '@/components';
 import { useInventoryValuationPdf } from '@/hooks/query';
 import { AnchorButton } from '@blueprintjs/core';
+import { useInventoryValuationContext } from '../../InventoryValuationProvider';
 
 export default function InventoryValuationPdfDialogContent() {
-  const { isLoading, pdfUrl } = useInventoryValuationPdf();
+  const { httpQuery } = useInventoryValuationContext();
+  const { isLoading, pdfUrl } = useInventoryValuationPdf(httpQuery);
 
   return (
     <DialogContent>
@@ -23,7 +26,7 @@ export default function InventoryValuationPdfDialogContent() {
 
         <AnchorButton
           href={pdfUrl}
-          download={'invoice.pdf'}
+          download={'inventory-valuation-summary.pdf'}
           minimal={true}
           outlined={true}
         >
diff --git a/packages/webapp/src/containers/FinancialStatements/Journal/JournalProvider.tsx b/packages/webapp/src/containers/FinancialStatements/Journal/JournalProvider.tsx
index b13efe9a6..c469f7428 100644
--- a/packages/webapp/src/containers/FinancialStatements/Journal/JournalProvider.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/Journal/JournalProvider.tsx
@@ -11,24 +11,23 @@ const JournalSheetContext = createContext();
  */
 function JournalSheetProvider({ query, ...props }) {
   // Transforms the sheet query to request query.
-  const requestQuery = React.useMemo(
+  const httpQuery = React.useMemo(
     () => transformFilterFormToQuery(query),
     [query],
   );
-
   const {
     data: journalSheet,
     isFetching,
     isLoading,
     refetch,
-  } = useJournalSheet(requestQuery, { keepPreviousData: true });
+  } = useJournalSheet(httpQuery, { keepPreviousData: true });
 
   const provider = {
     journalSheet,
     isLoading,
     isFetching,
     refetchSheet: refetch,
-    httpQuery: requestQuery
+    httpQuery,
   };
 
   return (
diff --git a/packages/webapp/src/containers/FinancialStatements/Journal/dialogs/JournalPdfDialog/JournalPdfDialogContent.tsx b/packages/webapp/src/containers/FinancialStatements/Journal/dialogs/JournalPdfDialog/JournalPdfDialogContent.tsx
index 21d90aaa8..5308de1ce 100644
--- a/packages/webapp/src/containers/FinancialStatements/Journal/dialogs/JournalPdfDialog/JournalPdfDialogContent.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/Journal/dialogs/JournalPdfDialog/JournalPdfDialogContent.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   DialogContent,
   PdfDocumentPreview,
@@ -5,9 +6,11 @@ import {
 } from '@/components';
 import { useJournalSheetPdf } from '@/hooks/query';
 import { AnchorButton } from '@blueprintjs/core';
+import { useJournalSheetContext } from '../../JournalProvider';
 
 export default function JournalSheetPdfDialogContent() {
-  const { isLoading, pdfUrl } = useJournalSheetPdf();
+  const { httpQuery } = useJournalSheetContext();
+  const { isLoading, pdfUrl } = useJournalSheetPdf(httpQuery);
 
   return (
     <DialogContent>
diff --git a/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossProvider.tsx b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossProvider.tsx
index 0ea7bbe93..7b8a744c2 100644
--- a/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossProvider.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossProvider.tsx
@@ -1,7 +1,7 @@
 // @ts-nocheck
-import React, { createContext, useContext, useMemo } from 'react';
-import FinancialReportPage from '../FinancialReportPage';
+import { createContext, useContext, useMemo } from 'react';
 import { useProfitLossSheet } from '@/hooks/query';
+import FinancialReportPage from '../FinancialReportPage';
 import { transformFilterFormToQuery } from '../common';
 
 const ProfitLossSheetContext = createContext();
@@ -11,27 +11,22 @@ const ProfitLossSheetContext = createContext();
  * @returns {React.JSX}
  */
 function ProfitLossSheetProvider({ query, ...props }) {
-
-  const innerQuery = useMemo(() => {
-    return transformFilterFormToQuery(query);
-  }, [query]);
+  const httpQuery = useMemo(() => transformFilterFormToQuery(query), [query]);
 
   const {
     data: profitLossSheet,
     isFetching,
     isLoading,
     refetch,
-  } = useProfitLossSheet(
-    innerQuery,
-    { keepPreviousData: true },
-  );
+  } = useProfitLossSheet(httpQuery, { keepPreviousData: true });
 
   const provider = {
     profitLossSheet,
     isLoading,
     isFetching,
     sheetRefetch: refetch,
-    query: innerQuery
+    query: httpQuery,
+    httpQuery,
   };
 
   return (
diff --git a/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetPdfDialog/ProfitLossSheetPdfDialogContent.tsx b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetPdfDialog/ProfitLossSheetPdfDialogContent.tsx
index e461133d9..52145a53c 100644
--- a/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetPdfDialog/ProfitLossSheetPdfDialogContent.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetPdfDialog/ProfitLossSheetPdfDialogContent.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   DialogContent,
   PdfDocumentPreview,
@@ -5,9 +6,11 @@ import {
 } from '@/components';
 import { AnchorButton } from '@blueprintjs/core';
 import { useProfitLossSheetPdf } from '@/hooks/query';
+import { useProfitLossSheetContext } from '../ProfitLossProvider';
 
 export default function ProfitLossSheetPdfDialogContent() {
-  const { isLoading, pdfUrl } = useProfitLossSheetPdf();
+  const { httpQuery } = useProfitLossSheetContext();
+  const { isLoading, pdfUrl } = useProfitLossSheetPdf(httpQuery);
 
   return (
     <DialogContent>
diff --git a/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/components.tsx b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/components.tsx
index 97a4fa860..e439f54af 100644
--- a/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/components.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/components.tsx
@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import {
   Button,
   Classes,
@@ -78,7 +78,7 @@ export const ProfitLossSheetExportMenu = () => {
     isCloseButtonShown: true,
     timeout: 2000,
   };
-  const { query } = useProfitLossSheetContext();
+  const { httpQuery } = useProfitLossSheetContext();
 
   const openProgressToast = (amount: number) => {
     return (
@@ -96,7 +96,7 @@ export const ProfitLossSheetExportMenu = () => {
   };
 
   // Export the report to xlsx.
-  const { mutateAsync: xlsxExport } = useProfitLossSheetXlsxExport(query, {
+  const { mutateAsync: xlsxExport } = useProfitLossSheetXlsxExport(httpQuery, {
     onDownloadProgress: (xlsxExportProgress: number) => {
       if (!toastKey.current) {
         toastKey.current = AppToaster.show({
@@ -115,7 +115,7 @@ export const ProfitLossSheetExportMenu = () => {
     },
   });
   // Export the report to csv.
-  const { mutateAsync: csvExport } = useProfitLossSheetCsvExport(query, {
+  const { mutateAsync: csvExport } = useProfitLossSheetCsvExport(httpQuery, {
     onDownloadProgress: (xlsxExportProgress: number) => {
       if (!toastKey.current) {
         toastKey.current = AppToaster.show({
diff --git a/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsProvider.tsx b/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsProvider.tsx
index 82b21d86f..cb1f21f76 100644
--- a/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsProvider.tsx
+++ b/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'}>
diff --git a/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/components.tsx b/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/components.tsx
index 777ea9526..cef3641b0 100644
--- a/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/components.tsx
+++ b/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({
diff --git a/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/dialogs/PurchasesByItemsDialog/PurchasesByItemsPdfDialogContent.tsx b/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/dialogs/PurchasesByItemsDialog/PurchasesByItemsPdfDialogContent.tsx
index 016dbd927..45333df60 100644
--- a/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/dialogs/PurchasesByItemsDialog/PurchasesByItemsPdfDialogContent.tsx
+++ b/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>
diff --git a/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemProvider.tsx b/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemProvider.tsx
index 16c2ad44f..7f939d801 100644
--- a/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemProvider.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemProvider.tsx
@@ -1,5 +1,5 @@
 // @ts-nocheck
-import { createContext, useContext } from 'react';
+import { createContext, useContext, useMemo } from 'react';
 import FinancialReportPage from '../FinancialReportPage';
 import { useSalesByItemsTable } from '@/hooks/query';
 import { transformFilterFormToQuery } from '../common';
@@ -7,25 +7,22 @@ import { transformFilterFormToQuery } from '../common';
 const SalesByItemsContext = createContext();
 
 function SalesByItemProvider({ query, ...props }) {
+  // Transformes the sheet query to http query.
+  const httpQuery = useMemo(() => transformFilterFormToQuery(query), [query]);
+
   const {
     data: salesByItems,
     isFetching,
     isLoading,
     refetch,
-  } = useSalesByItemsTable(
-    {
-      ...transformFilterFormToQuery(query),
-    },
-    {
-      keepPreviousData: true,
-    },
-  );
+  } = useSalesByItemsTable({ ...httpQuery }, { keepPreviousData: true });
 
   const provider = {
     salesByItems,
     isFetching,
     isLoading,
     refetchSheet: refetch,
+    httpQuery,
   };
   return (
     <FinancialReportPage name={'sales-by-items'}>
diff --git a/packages/webapp/src/containers/FinancialStatements/SalesByItems/components.tsx b/packages/webapp/src/containers/FinancialStatements/SalesByItems/components.tsx
index 6f1ad9d51..bc3bdb66b 100644
--- a/packages/webapp/src/containers/FinancialStatements/SalesByItems/components.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/SalesByItems/components.tsx
@@ -1,13 +1,9 @@
 // @ts-nocheck
-import { useMemo, useRef } from 'react';
-import intl from 'react-intl-universal';
+import { useRef } from 'react';
 import classNames from 'classnames';
 import { Classes } from '@blueprintjs/core';
 
-import { getColumnWidth } from '@/utils';
 import { AppToaster, If, Stack } from '@/components';
-import { Align } from '@/constants';
-import { CellTextSpan } from '@/components/Datatable/Cells';
 import { useSalesByItemsContext } from './SalesByItemProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 import { Intent, Menu, MenuItem, ProgressBar, Text } from '@blueprintjs/core';
@@ -34,11 +30,8 @@ export function SalesByItemsLoadingBar() {
  */
 export const SalesByItemsSheetExportMenu = () => {
   const toastKey = useRef(null);
-  const commonToastConfig = {
-    isCloseButtonShown: true,
-    timeout: 2000,
-  };
-  const { query } = useSalesByItemsContext();
+  const commonToastConfig = { isCloseButtonShown: true, timeout: 2000, };
+  const { httpQuery } = useSalesByItemsContext();
 
   const openProgressToast = (amount: number) => {
     return (
@@ -54,9 +47,8 @@ export const SalesByItemsSheetExportMenu = () => {
       </Stack>
     );
   };
-
   // Export the report to xlsx.
-  const { mutateAsync: xlsxExport } = useSalesByItemsXlsxExport(query, {
+  const { mutateAsync: xlsxExport } = useSalesByItemsXlsxExport(httpQuery, {
     onDownloadProgress: (xlsxExportProgress: number) => {
       if (!toastKey.current) {
         toastKey.current = AppToaster.show({
@@ -75,7 +67,7 @@ export const SalesByItemsSheetExportMenu = () => {
     },
   });
   // Export the report to csv.
-  const { mutateAsync: csvExport } = useSalesByItemsCsvExport(query, {
+  const { mutateAsync: csvExport } = useSalesByItemsCsvExport(httpQuery, {
     onDownloadProgress: (xlsxExportProgress: number) => {
       if (!toastKey.current) {
         toastKey.current = AppToaster.show({
diff --git a/packages/webapp/src/containers/FinancialStatements/SalesByItems/dialogs/SalesByItemsPdfDialog/SalesByItemsPdfDialogContent.tsx b/packages/webapp/src/containers/FinancialStatements/SalesByItems/dialogs/SalesByItemsPdfDialog/SalesByItemsPdfDialogContent.tsx
index 72bcfac0b..0f087dd06 100644
--- a/packages/webapp/src/containers/FinancialStatements/SalesByItems/dialogs/SalesByItemsPdfDialog/SalesByItemsPdfDialogContent.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/SalesByItems/dialogs/SalesByItemsPdfDialog/SalesByItemsPdfDialogContent.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   DialogContent,
   PdfDocumentPreview,
@@ -5,9 +6,11 @@ import {
 } from '@/components';
 import { useSalesByItemsPdfExport } from '@/hooks/query';
 import { AnchorButton } from '@blueprintjs/core';
+import { useSalesByItemsContext } from '../../SalesByItemProvider';
 
 export default function SalesByItemsPdfDialogContent() {
-  const { isLoading, pdfUrl } = useSalesByItemsPdfExport();
+  const { httpQuery } = useSalesByItemsContext();
+  const { isLoading, pdfUrl } = useSalesByItemsPdfExport(httpQuery);
 
   return (
     <DialogContent>
diff --git a/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilityPdfDialog/SalesTaxLiabilityPdfDialogContent.tsx b/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilityPdfDialog/SalesTaxLiabilityPdfDialogContent.tsx
index 7df72ef2e..e16242fc3 100644
--- a/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilityPdfDialog/SalesTaxLiabilityPdfDialogContent.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilityPdfDialog/SalesTaxLiabilityPdfDialogContent.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   DialogContent,
   PdfDocumentPreview,
@@ -5,9 +6,11 @@ import {
 } from '@/components';
 import { AnchorButton } from '@blueprintjs/core';
 import { useSalesTaxLiabilitySummaryPdf } from '@/hooks/query';
+import { useSalesTaxLiabilitySummaryContext } from '../SalesTaxLiabilitySummaryBoot';
 
 export default function SalesTaxLiabilityPdfDialogContent() {
-  const { isLoading, pdfUrl } = useSalesTaxLiabilitySummaryPdf();
+  const { query } = useSalesTaxLiabilitySummaryContext();
+  const { isLoading, pdfUrl } = useSalesTaxLiabilitySummaryPdf(query);
 
   return (
     <DialogContent>
@@ -23,7 +26,7 @@ export default function SalesTaxLiabilityPdfDialogContent() {
 
         <AnchorButton
           href={pdfUrl}
-          download={'profit_loss_sheet.pdf'}
+          download={'sales-tax-liability-summary.pdf'}
           minimal={true}
           outlined={true}
         >
diff --git a/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryActionsBar.tsx
index a911d5693..1779ba329 100644
--- a/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryActionsBar.tsx
@@ -59,7 +59,6 @@ function SalesTaxLiabilitySummaryActionsBar({
     openDialog(DialogsName.SalesTaxLiabilitySummaryPdfPreview)    
   };
 
-
   return (
     <DashboardActionsBar>
       <NavbarGroup>
diff --git a/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceProvider.tsx b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceProvider.tsx
index ab962bca7..a2aed999a 100644
--- a/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceProvider.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceProvider.tsx
@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { createContext, useContext } from 'react';
+import { createContext, useContext, useMemo } from 'react';
 import FinancialReportPage from '../FinancialReportPage';
 import { useTrialBalanceSheet } from '@/hooks/query';
 import { transformFilterFormToQuery } from '../common';
@@ -7,25 +7,21 @@ import { transformFilterFormToQuery } from '../common';
 const TrialBalanceSheetContext = createContext();
 
 function TrialBalanceSheetProvider({ query, ...props }) {
+  const httpQuery = useMemo(() => transformFilterFormToQuery(query), [query]);
+
   const {
     data: trialBalanceSheet,
     isFetching,
     isLoading,
     refetch,
-  } = useTrialBalanceSheet(
-    {
-      ...transformFilterFormToQuery(query),
-    },
-    {
-      keepPreviousData: true,
-    },
-  );
+  } = useTrialBalanceSheet({ ...httpQuery }, { keepPreviousData: true });
 
   const provider = {
     trialBalanceSheet,
     isLoading,
     isFetching,
     refetchSheet: refetch,
+    httpQuery,
   };
 
   return (
diff --git a/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/dialogs/TrialBalanceSheetPdfDialog/TrialBalanceSheetPdfDialogContent.tsx b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/dialogs/TrialBalanceSheetPdfDialog/TrialBalanceSheetPdfDialogContent.tsx
index f3963bf5f..b8a493adc 100644
--- a/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/dialogs/TrialBalanceSheetPdfDialog/TrialBalanceSheetPdfDialogContent.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/dialogs/TrialBalanceSheetPdfDialog/TrialBalanceSheetPdfDialogContent.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   DialogContent,
   PdfDocumentPreview,
@@ -5,9 +6,11 @@ import {
 } from '@/components';
 import { AnchorButton } from '@blueprintjs/core';
 import { useTrialBalanceSheetPdf } from '@/hooks/query';
+import { useTrialBalanceSheetContext } from '../../TrialBalanceProvider';
 
 export default function TrialBalanceSheetPdfDialogContent() {
-  const { isLoading, pdfUrl } = useTrialBalanceSheetPdf();
+  const { httpQuery } = useTrialBalanceSheetContext();
+  const { isLoading, pdfUrl } = useTrialBalanceSheetPdf(httpQuery);
 
   return (
     <DialogContent>
diff --git a/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryProvider.tsx b/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryProvider.tsx
index ebf9d9fac..b0f5c8881 100644
--- a/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryProvider.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryProvider.tsx
@@ -10,26 +10,25 @@ const VendorsBalanceSummaryContext = React.createContext();
  * Vendors balance summary provider.
  */
 function VendorsBalanceSummaryProvider({ filter, ...props }) {
-  const query = React.useMemo(() => transformFilterFormToQuery(filter), [
-    filter,
-  ]);
+  const httpQuery = React.useMemo(
+    () => transformFilterFormToQuery(filter),
+    [filter],
+  );
   // Fetching vendors balance summary report based on the given query.
   const {
     data: VendorBalanceSummary,
     isLoading: isVendorsBalanceLoading,
     isFetching: isVendorsBalanceFetching,
     refetch,
-  } = useVendorsBalanceSummaryReport(query, {
-    keepPreviousData: true,
-  });
+  } = useVendorsBalanceSummaryReport(httpQuery, { keepPreviousData: true });
 
   // Provider.
   const provider = {
     VendorBalanceSummary,
     isVendorsBalanceLoading,
     isVendorsBalanceFetching,
-
     refetch,
+    httpQuery,
   };
 
   return (
diff --git a/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/dialogs/VendorBalancePdfDialog/VendorBalancePdfDialogContent.tsx b/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/dialogs/VendorBalancePdfDialog/VendorBalancePdfDialogContent.tsx
index 037ccb6e2..44e9b0a06 100644
--- a/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/dialogs/VendorBalancePdfDialog/VendorBalancePdfDialogContent.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/dialogs/VendorBalancePdfDialog/VendorBalancePdfDialogContent.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   DialogContent,
   PdfDocumentPreview,
@@ -5,9 +6,11 @@ import {
 } from '@/components';
 import { useVendorBalanceSummaryPdfExport } from '@/hooks/query';
 import { AnchorButton } from '@blueprintjs/core';
+import { useVendorsBalanceSummaryContext } from '../../VendorsBalanceSummaryProvider';
 
 export default function VendorTransactionsPdfDialogContent() {
-  const { isLoading, pdfUrl } = useVendorBalanceSummaryPdfExport();
+  const { httpQuery } = useVendorsBalanceSummaryContext();
+  const { isLoading, pdfUrl } = useVendorBalanceSummaryPdfExport(httpQuery);
 
   return (
     <DialogContent>
diff --git a/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactions.tsx b/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactions.tsx
index 6a80d31e0..0f3178d00 100644
--- a/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactions.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactions.tsx
@@ -14,7 +14,7 @@ import withVendorsTransactionsActions from './withVendorsTransactionsActions';
 
 import { compose } from '@/utils';
 import { useVendorsTransactionsQuery } from './_utils';
-import { VendorBalanceDialogs } from '../VendorsBalanceSummary/VendorBalanceDialogs';
+import { VendorTransactionsDialogs } from './VendorTransactionsDialogs';
 
 /**
  * Vendors transactions.
@@ -67,7 +67,7 @@ function VendorsTransactions({
         </FinancialStatement>
       </DashboardPageContent>
 
-      <VendorBalanceDialogs />
+      <VendorTransactionsDialogs />
     </VendorsTransactionsProvider>
   );
 }
diff --git a/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsProvider.tsx b/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsProvider.tsx
index b9c35760d..8c4517013 100644
--- a/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsProvider.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsProvider.tsx
@@ -10,7 +10,7 @@ const VendorsTransactionsContext = createContext();
  * Vendors transactions provider.
  */
 function VendorsTransactionsProvider({ filter, ...props }) {
-  const query = useMemo(() => transformFilterFormToQuery(filter), [filter]);
+  const httpQuery = useMemo(() => transformFilterFormToQuery(filter), [filter]);
 
   // Fetch vendors transactions based on the given query.
   const {
@@ -18,16 +18,15 @@ function VendorsTransactionsProvider({ filter, ...props }) {
     isFetching: isVendorsTransactionFetching,
     isLoading: isVendorsTransactionsLoading,
     refetch,
-  } = useVendorsTransactionsReport(query, { keepPreviousData: true });
+  } = useVendorsTransactionsReport(httpQuery, { keepPreviousData: true });
 
   const provider = {
     vendorsTransactions,
     isVendorsTransactionsLoading,
     isVendorsTransactionFetching,
-
     refetch,
     filter,
-    query,
+    httpQuery,
   };
 
   return (
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-AP-aging-summary.ts b/packages/webapp/src/hooks/query/FinancialReports/use-AP-aging-summary.ts
index 734b401ac..65e458cea 100644
--- a/packages/webapp/src/hooks/query/FinancialReports/use-AP-aging-summary.ts
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-AP-aging-summary.ts
@@ -54,8 +54,11 @@ export const useAPAgingSheetCsvExport = (query, args) => {
 };
 
 /**
- * Retrieves the balance sheet pdf document data.
+ * Retrieves the A/P aging summary pdf document.
  */
-export function useAPAgingSummaryPdf() {
-  return useRequestPdf(`financial_statements/payable_aging_summary`);
+export function useAPAgingSummaryPdf(query = {}) {
+  return useRequestPdf({
+    url: `/api/financial_statements/payable_aging_summary`,
+    params: query,
+  });
 }
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-AR-aging-summary.ts b/packages/webapp/src/hooks/query/FinancialReports/use-AR-aging-summary.ts
index 9059ca55b..61a519b34 100644
--- a/packages/webapp/src/hooks/query/FinancialReports/use-AR-aging-summary.ts
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-AR-aging-summary.ts
@@ -55,6 +55,9 @@ export const useARAgingSheetCsvExport = (query, args) => {
 /**
  * Retrieves the A/R aging summary pdf document data.
  */
-export function useARAgingSummaryPdf() {
-  return useRequestPdf(`financial_statements/receivable_aging_summary`);
+export function useARAgingSummaryPdf(query = {}) {
+  return useRequestPdf({
+    url: `/api/financial_statements/receivable_aging_summary`,
+    params: query,
+  });
 }
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-balance-sheet.ts b/packages/webapp/src/hooks/query/FinancialReports/use-balance-sheet.ts
index 99abf33ef..38fcc7764 100644
--- a/packages/webapp/src/hooks/query/FinancialReports/use-balance-sheet.ts
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-balance-sheet.ts
@@ -56,6 +56,9 @@ export const useBalanceSheetCsvExport = (query, args) => {
 /**
  * Retrieves the balance sheet pdf document data.
  */
-export function useBalanceSheetPdf() {
-  return useRequestPdf(`financial_statements/balance_sheet`);
+export function useBalanceSheetPdf(query = {}) {
+  return useRequestPdf({
+    url: `/api/financial_statements/balance_sheet`,
+    params: query,
+  });
 }
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-cashflow-sheet.ts b/packages/webapp/src/hooks/query/FinancialReports/use-cashflow-sheet.ts
index 6abf1888d..cdd2a33d8 100644
--- a/packages/webapp/src/hooks/query/FinancialReports/use-cashflow-sheet.ts
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-cashflow-sheet.ts
@@ -73,8 +73,11 @@ export const useCashFlowStatementCsvExport = (query, args) => {
 };
 
 /**
- * Retrieves the cashflow sheet pdf document data.
+ * Retrieves the cashflow sheet pdf document.
  */
-export function useCashflowSheetPdf() {
-  return useRequestPdf(`financial_statements/cash-flow`);
+export function useCashflowSheetPdf(query = {}) {
+  return useRequestPdf({
+    url: `/api/financial_statements/cash-flow`,
+    params: query,
+  });
 }
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-customer-balance-summary.ts b/packages/webapp/src/hooks/query/FinancialReports/use-customer-balance-summary.ts
index 95cf5de04..0dbc034d1 100644
--- a/packages/webapp/src/hooks/query/FinancialReports/use-customer-balance-summary.ts
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-customer-balance-summary.ts
@@ -61,8 +61,11 @@ export const useCustomerBalanceSummaryCsvExport = (query, args) => {
 };
 
 /**
- * Retrieves the balance sheet pdf document data.
+ * Retrieves the pdf content of customers balance summary.
  */
-export function useCustomerBalanceSummaryPdf() {
-  return useRequestPdf(`financial_statements/customer-balance-summary`);
+export function useCustomerBalanceSummaryPdf(query = {}) {
+  return useRequestPdf({
+    url: `/api/financial_statements/customer-balance-summary`,
+    params: query,
+  });
 }
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-customer-transactions.ts b/packages/webapp/src/hooks/query/FinancialReports/use-customer-transactions.ts
index 08acc7e0e..a108720c8 100644
--- a/packages/webapp/src/hooks/query/FinancialReports/use-customer-transactions.ts
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-customer-transactions.ts
@@ -64,6 +64,12 @@ export const useCustomersTransactionsCsvExport = (query, args) => {
   });
 };
 
-export const useCustomersTransactionsPdfExport = () => {
-  return useRequestPdf('/financial_statements/transactions-by-customers');
+/**
+ * Retrieves the pdf content of customers transactions.
+ */
+export const useCustomersTransactionsPdfExport = (query = {}) => {
+  return useRequestPdf({
+    url: '/api/financial_statements/transactions-by-customers',
+    params: query,
+  });
 };
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-general-ledger.ts b/packages/webapp/src/hooks/query/FinancialReports/use-general-ledger.ts
index bf684a365..9ecb86258 100644
--- a/packages/webapp/src/hooks/query/FinancialReports/use-general-ledger.ts
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-general-ledger.ts
@@ -55,6 +55,9 @@ export const useGeneralLedgerSheetCsvExport = (query, args) => {
 /**
  * Retrieves the general ledger pdf document data.
  */
-export function useGeneralLedgerPdf() {
-  return useRequestPdf(`financial_statements/general_ledger`);
+export function useGeneralLedgerPdf(query = {}) {
+  return useRequestPdf({
+    url: `/api/financial_statements/general_ledger`,
+    params: query
+  });
 }
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-inventory-item-details.ts b/packages/webapp/src/hooks/query/FinancialReports/use-inventory-item-details.ts
index c81e3a3d5..4ee534717 100644
--- a/packages/webapp/src/hooks/query/FinancialReports/use-inventory-item-details.ts
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-inventory-item-details.ts
@@ -67,6 +67,9 @@ export const useInventoryItemDetailsCsvExport = (query, args) => {
 /**
  * Retrieves the balance sheet pdf document data.
  */
-export function useInventoryItemDetailsPdf() {
-  return useRequestPdf(`financial_statements/inventory-item-details`);
+export function useInventoryItemDetailsPdf(query = {}) {
+  return useRequestPdf({
+    url: `/api/financial_statements/inventory-item-details`,
+    params: query,
+  });
 }
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-inventory-valuation.ts b/packages/webapp/src/hooks/query/FinancialReports/use-inventory-valuation.ts
index da5f2bc36..bed2dd68c 100644
--- a/packages/webapp/src/hooks/query/FinancialReports/use-inventory-valuation.ts
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-inventory-valuation.ts
@@ -58,13 +58,6 @@ export const useInventoryValuationXlsxExport = (query, args) => {
   });
 };
 
-/**
- * Retrieves the inventory valuation pdf document data.
- */
-export function useInventoryValuationPdf() {
-  return useRequestPdf(`financial_statements/inventory-valuation`);
-}
-
 export const useInventoryValuationCsvExport = (query, args) => {
   return useDownloadFile({
     url: '/financial_statements/inventory-valuation',
@@ -78,3 +71,13 @@ export const useInventoryValuationCsvExport = (query, args) => {
     ...args,
   });
 };
+
+/**
+ * Retrieves the inventory valuation pdf document data.
+ */
+export function useInventoryValuationPdf(query = {}) {
+  return useRequestPdf({
+    url: `/api/financial_statements/inventory-valuation`,
+    params: query,
+  });
+}
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-journal-sheet.ts b/packages/webapp/src/hooks/query/FinancialReports/use-journal-sheet.ts
index badb63fc5..f83531a75 100644
--- a/packages/webapp/src/hooks/query/FinancialReports/use-journal-sheet.ts
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-journal-sheet.ts
@@ -57,5 +57,8 @@ export const useJournalSheetCsvExport = (query, args) => {
  * Retrieves the journal sheet pdf content.
  */
 export const useJournalSheetPdf = (query = {}) => {
-  return useRequestPdf(`financial_statements/journal`);
+  return useRequestPdf({
+    url: `/api/financial_statements/journal`,
+    params: query,
+  });
 };
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-profit-loss-sheet.ts b/packages/webapp/src/hooks/query/FinancialReports/use-profit-loss-sheet.ts
index 8925aa4e2..cbc9d9cf3 100644
--- a/packages/webapp/src/hooks/query/FinancialReports/use-profit-loss-sheet.ts
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-profit-loss-sheet.ts
@@ -54,8 +54,11 @@ export const useProfitLossSheetCsvExport = (query, args) => {
 };
 
 /**
- * Retrieves the cashflow sheet pdf document data.
+ * Retrieves the profit/loss sheet pdf document data.
  */
-export function useProfitLossSheetPdf() {
-  return useRequestPdf(`financial_statements/profit_loss_sheet`);
+export function useProfitLossSheetPdf(query = {}) {
+  return useRequestPdf({
+    url: `/api/financial_statements/profit_loss_sheet`,
+    params: query,
+  });
 }
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-purchases-by-items.ts b/packages/webapp/src/hooks/query/FinancialReports/use-purchases-by-items.ts
index 8a77473b4..df391f5da 100644
--- a/packages/webapp/src/hooks/query/FinancialReports/use-purchases-by-items.ts
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-purchases-by-items.ts
@@ -69,9 +69,11 @@ export const usePurchasesByItemsXlsxExport = (query, args) => {
 };
 
 /**
- *
- * @returns
+ * Retrieves the pdf document of purchases by items.
  */
-export const usePurchasesByItemsPdfExport = () => {
-  return useRequestPdf('/financial_statements/purchases-by-items');
+export const usePurchasesByItemsPdfExport = (query = {}) => {
+  return useRequestPdf({
+    url: '/api/financial_statements/purchases-by-items',
+    params: query,
+  });
 };
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-sales-by-items.ts b/packages/webapp/src/hooks/query/FinancialReports/use-sales-by-items.ts
index e9e559857..1aae74058 100644
--- a/packages/webapp/src/hooks/query/FinancialReports/use-sales-by-items.ts
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-sales-by-items.ts
@@ -70,6 +70,9 @@ export const useSalesByItemsXlsxExport = (query, args) => {
   });
 };
 
-export const useSalesByItemsPdfExport = () => {
-  return useRequestPdf('/financial_statements/sales-by-items');
+export const useSalesByItemsPdfExport = (query = {}) => {
+  return useRequestPdf({
+    url: '/api/financial_statements/sales-by-items',
+    params: query,
+  });
 };
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-sales-tax-liabilities-summary.ts b/packages/webapp/src/hooks/query/FinancialReports/use-sales-tax-liabilities-summary.ts
index abcca6f28..cf79f4f14 100644
--- a/packages/webapp/src/hooks/query/FinancialReports/use-sales-tax-liabilities-summary.ts
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-sales-tax-liabilities-summary.ts
@@ -54,8 +54,11 @@ export const useSalesTaxLiabilitySummaryCsvExport = (query, args) => {
 };
 
 /**
- * Retrieves the balance sheet pdf document data.
+ * Retrieves pdf document data of sales tax liability summary.
  */
-export function useSalesTaxLiabilitySummaryPdf() {
-  return useRequestPdf(`financial_statements/sales-tax-liability-summary`);
+export function useSalesTaxLiabilitySummaryPdf(query = {}) {
+  return useRequestPdf({
+    url: `/api/financial_statements/sales-tax-liability-summary`,
+    params: query,
+  });
 }
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-trial-balance-sheet.ts b/packages/webapp/src/hooks/query/FinancialReports/use-trial-balance-sheet.ts
index 8aaac170c..1fe324cd4 100644
--- a/packages/webapp/src/hooks/query/FinancialReports/use-trial-balance-sheet.ts
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-trial-balance-sheet.ts
@@ -56,6 +56,9 @@ export const useTrialBalanceSheetCsvExport = (query, args) => {
 /**
  * Retrieves the trial balance sheet pdf document data.
  */
-export function useTrialBalanceSheetPdf() {
-  return useRequestPdf(`financial_statements/trial_balance_sheet`);
+export function useTrialBalanceSheetPdf(query = {}) {
+  return useRequestPdf({
+    url: `/api/financial_statements/trial_balance_sheet`,
+    params: query,
+  });
 }
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-vendor-balance-summary.ts b/packages/webapp/src/hooks/query/FinancialReports/use-vendor-balance-summary.ts
index b9f84017a..9986e0e28 100644
--- a/packages/webapp/src/hooks/query/FinancialReports/use-vendor-balance-summary.ts
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-vendor-balance-summary.ts
@@ -63,6 +63,9 @@ export const useVendorBalanceSummaryCsvExport = (args) => {
   });
 };
 
-export const useVendorBalanceSummaryPdfExport = () => {
-  return useRequestPdf('/financial_statements/vendor-balance-summary');
+export const useVendorBalanceSummaryPdfExport = (query = {}) => {
+  return useRequestPdf({
+    url: '/api/financial_statements/vendor-balance-summary',
+    params: query,
+  });
 };
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-vendor-transactions.ts b/packages/webapp/src/hooks/query/FinancialReports/use-vendor-transactions.ts
index c9da544a9..d52900f04 100644
--- a/packages/webapp/src/hooks/query/FinancialReports/use-vendor-transactions.ts
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-vendor-transactions.ts
@@ -64,8 +64,11 @@ export const useVendorsTransactionsCsvExport = (query, args) => {
   });
 };
 /**
- * Retrieves the balance sheet pdf document data.
+ * Retrieves pdf document data of the transactions by vendor sheet.
  */
-export function useTransactionsByVendorsPdf() {
-  return useRequestPdf(`financial_statements/transactions-by-vendors`);
+export function useTransactionsByVendorsPdf(query = {}) {
+  return useRequestPdf({
+    url: `/api/financial_statements/transactions-by-vendors`,
+    params: query,
+  });
 }