feat(webapp): wip printing financial reports

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 (

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

@@ -49,11 +49,8 @@ export function APAgingSummarySheetLoadingBar() {
  */
 export function APAgingSummaryExportMenu() {
   const toastKey = useRef(null);
-  const commonToastConfig = {
+  const commonToastConfig = { isCloseButtonShown: true, timeout: 2000 };
-    isCloseButtonShown: true,
+  const { httpQuery } = useAPAgingSummaryContext();
-    timeout: 2000,
-  };
-  const { query } = 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({

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>

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.

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(
+  const httpQuery = useMemo(() => transformFilterFormToQuery(filter), [filter]);
-    () => 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 (

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({

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}

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>

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}

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), [
+  const httpQuery = useMemo(() => transformFilterFormToQuery(filter), [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,
-
+    httpQuery,
-    query,
     filter,
   };
   return (

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({

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>

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.
+  // Transforms the given state query to http query.
-  const query = React.useMemo(
+  const httpQuery = React.useMemo(
     () => transformFilterFormToQuery(filter),
     [filter],
   );
-
+  // Fetching the cash flow statement report.
-  // fetch 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 (

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>

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, {
+  const { mutateAsync: xlsxExport } = useCashFlowStatementXlsxExport(
-    onDownloadProgress: (xlsxExportProgress: number) => {
+    httpQuery,
-      if (!toastKey.current) {
+    {
-        toastKey.current = AppToaster.show({
+      onDownloadProgress: (xlsxExportProgress: number) => {
-          message: openProgressToast(xlsxExportProgress),
+        if (!toastKey.current) {
-          ...commonToastConfig,
+          toastKey.current = AppToaster.show({
-        });
-      } else {
-        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({

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

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

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), [
+  const query = useMemo(() => transformFilterFormToQuery(filter), [filter]);
-    filter,
-  ]);
 
   // Fetches the customers transactions.
   const {
@@ -29,7 +27,8 @@ function CustomersTransactionsProvider({ filter, ...props }) {
     CustomersTransactionsRefetch,
 
     filter,
-    query
+    query,
+    httpQuery: query,
   };
 
   return (

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

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

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(
+  const { mutateAsync: csvExport } = useGeneralLedgerSheetCsvExport(httpQuery, {
-    httpRequest,
+    onDownloadProgress: (xlsxExportProgress: number) => {
-    {
+      if (!toastKey.current) {
-      onDownloadProgress: (xlsxExportProgress: number) => {
+        toastKey.current = AppToaster.show({
-        if (!toastKey.current) {
+          message: openProgressToast(xlsxExportProgress),
-          toastKey.current = AppToaster.show({
+          ...commonToastConfig,
+        });
+      } else {
+        AppToaster.show(
+          {
             message: openProgressToast(xlsxExportProgress),
             ...commonToastConfig,
-          });
+          },
-        } else {
+          toastKey.current,
-          AppToaster.show(
+        );
-            {
+      }
-              message: openProgressToast(xlsxExportProgress),
-              ...commonToastConfig,
-            },
-            toastKey.current,
-          );
-        }
-      },
     },
-  );
+  });
   // Handle csv export button click.
   const handleCsvExportBtnClick = () => {
     csvExport();

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

packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsProvider.tsx

@@ -28,8 +28,8 @@ function InventoryItemDetailsProvider({ query, ...props }) {
     isInventoryItemDetailsFetching,
     isInventoryItemDetailsLoading,
     inventoryItemDetailsRefetch,
-
     query,
+    httpQuery: requestQuery
   };
 
   return (

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

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, {
+  } = useInventoryValuationTable(httpQuery, { keepPreviousData: true });
-    keepPreviousData: true,
-  });
 
   // Provider data.
   const provider = {
@@ -31,6 +29,7 @@ function InventoryValuationProvider({ query, ...props }) {
     isLoading,
     isFetching,
     refetchSheet: refetch,
+    httpQuery
   };
 
   return (

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

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 (

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>

packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossProvider.tsx

@@ -1,7 +1,7 @@
 // @ts-nocheck
-import React, { createContext, useContext, useMemo } from 'react';
+import { createContext, useContext, useMemo } from 'react';
-import FinancialReportPage from '../FinancialReportPage';
 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 httpQuery = useMemo(() => transformFilterFormToQuery(query), [query]);
-  const innerQuery = useMemo(() => {
-    return transformFilterFormToQuery(query);
-  }, [query]);
 
   const {
     data: profitLossSheet,
     isFetching,
     isLoading,
     refetch,
-  } = useProfitLossSheet(
+  } = useProfitLossSheet(httpQuery, { keepPreviousData: true });
-    innerQuery,
-    { keepPreviousData: true },
-  );
 
   const provider = {
     profitLossSheet,
     isLoading,
     isFetching,
     sheetRefetch: refetch,
-    query: innerQuery
+    query: httpQuery,
+    httpQuery,
   };
 
   return (

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>

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({

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(
+  } = usePurchasesByItemsTable(httpQuery, { keepPreviousData: true });
-    {
-      ...transformFilterFormToQuery(query),
-    },
-    {
-      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 = {
+  const commonToastConfig = { isCloseButtonShown: true, timeout: 2000 };
-    isCloseButtonShown: true,
+  const { httpQuery } = usePurchaseByItemsContext();
-    timeout: 2000,
-  };
-  const { query } = 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>

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(
+  } = useSalesByItemsTable({ ...httpQuery }, { keepPreviousData: true });
-    {
-      ...transformFilterFormToQuery(query),
-    },
-    {
-      keepPreviousData: true,
-    },
-  );
 
   const provider = {
     salesByItems,
     isFetching,
     isLoading,
     refetchSheet: refetch,
+    httpQuery,
   };
   return (
     <FinancialReportPage name={'sales-by-items'}>

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

@@ -1,13 +1,9 @@
 // @ts-nocheck
-import { useMemo, useRef } from 'react';
+import { useRef } from 'react';
-import intl from 'react-intl-universal';
 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 = {
+  const commonToastConfig = { isCloseButtonShown: true, timeout: 2000, };
-    isCloseButtonShown: true,
+  const { httpQuery } = useSalesByItemsContext();
-    timeout: 2000,
-  };
-  const { query } = 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({

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>

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

packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryActionsBar.tsx

@@ -59,7 +59,6 @@ function SalesTaxLiabilitySummaryActionsBar({
     openDialog(DialogsName.SalesTaxLiabilitySummaryPdfPreview)    
   };
 
-
   return (
     <DashboardActionsBar>
       <NavbarGroup>

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(
+  } = useTrialBalanceSheet({ ...httpQuery }, { keepPreviousData: true });
-    {
-      ...transformFilterFormToQuery(query),
-    },
-    {
-      keepPreviousData: true,
-    },
-  );
 
   const provider = {
     trialBalanceSheet,
     isLoading,
     isFetching,
     refetchSheet: refetch,
+    httpQuery,
   };
 
   return (

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>

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), [
+  const httpQuery = React.useMemo(
-    filter,
+    () => transformFilterFormToQuery(filter),
-  ]);
+    [filter],
+  );
   // Fetching vendors balance summary report based on the given query.
   const {
     data: VendorBalanceSummary,
     isLoading: isVendorsBalanceLoading,
     isFetching: isVendorsBalanceFetching,
     refetch,
-  } = useVendorsBalanceSummaryReport(query, {
+  } = useVendorsBalanceSummaryReport(httpQuery, { keepPreviousData: true });
-    keepPreviousData: true,
-  });
 
   // Provider.
   const provider = {
     VendorBalanceSummary,
     isVendorsBalanceLoading,
     isVendorsBalanceFetching,
-
     refetch,
+    httpQuery,
   };
 
   return (

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>

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>
   );
 }

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 (

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() {
+export function useAPAgingSummaryPdf(query = {}) {
-  return useRequestPdf(`financial_statements/payable_aging_summary`);
+  return useRequestPdf({
+    url: `/api/financial_statements/payable_aging_summary`,
+    params: query,
+  });
 }

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() {
+export function useARAgingSummaryPdf(query = {}) {
-  return useRequestPdf(`financial_statements/receivable_aging_summary`);
+  return useRequestPdf({
+    url: `/api/financial_statements/receivable_aging_summary`,
+    params: query,
+  });
 }

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() {
+export function useBalanceSheetPdf(query = {}) {
-  return useRequestPdf(`financial_statements/balance_sheet`);
+  return useRequestPdf({
+    url: `/api/financial_statements/balance_sheet`,
+    params: query,
+  });
 }

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() {
+export function useCashflowSheetPdf(query = {}) {
-  return useRequestPdf(`financial_statements/cash-flow`);
+  return useRequestPdf({
+    url: `/api/financial_statements/cash-flow`,
+    params: query,
+  });
 }

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() {
+export function useCustomerBalanceSummaryPdf(query = {}) {
-  return useRequestPdf(`financial_statements/customer-balance-summary`);
+  return useRequestPdf({
+    url: `/api/financial_statements/customer-balance-summary`,
+    params: query,
+  });
 }

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,
+  });
 };

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() {
+export function useGeneralLedgerPdf(query = {}) {
-  return useRequestPdf(`financial_statements/general_ledger`);
+  return useRequestPdf({
+    url: `/api/financial_statements/general_ledger`,
+    params: query
+  });
 }

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() {
+export function useInventoryItemDetailsPdf(query = {}) {
-  return useRequestPdf(`financial_statements/inventory-item-details`);
+  return useRequestPdf({
+    url: `/api/financial_statements/inventory-item-details`,
+    params: query,
+  });
 }

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,
+  });
+}

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,
+  });
 };

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() {
+export function useProfitLossSheetPdf(query = {}) {
-  return useRequestPdf(`financial_statements/profit_loss_sheet`);
+  return useRequestPdf({
+    url: `/api/financial_statements/profit_loss_sheet`,
+    params: query,
+  });
 }

packages/webapp/src/hooks/query/FinancialReports/use-purchases-by-items.ts

@@ -69,9 +69,11 @@ export const usePurchasesByItemsXlsxExport = (query, args) => {
 };
 
 /**
- *
+ * Retrieves the pdf document of purchases by items.
- * @returns
  */
-export const usePurchasesByItemsPdfExport = () => {
+export const usePurchasesByItemsPdfExport = (query = {}) => {
-  return useRequestPdf('/financial_statements/purchases-by-items');
+  return useRequestPdf({
+    url: '/api/financial_statements/purchases-by-items',
+    params: query,
+  });
 };

packages/webapp/src/hooks/query/FinancialReports/use-sales-by-items.ts

@@ -70,6 +70,9 @@ export const useSalesByItemsXlsxExport = (query, args) => {
   });
 };
 
-export const useSalesByItemsPdfExport = () => {
+export const useSalesByItemsPdfExport = (query = {}) => {
-  return useRequestPdf('/financial_statements/sales-by-items');
+  return useRequestPdf({
+    url: '/api/financial_statements/sales-by-items',
+    params: query,
+  });
 };

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() {
+export function useSalesTaxLiabilitySummaryPdf(query = {}) {
-  return useRequestPdf(`financial_statements/sales-tax-liability-summary`);
+  return useRequestPdf({
+    url: `/api/financial_statements/sales-tax-liability-summary`,
+    params: query,
+  });
 }

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() {
+export function useTrialBalanceSheetPdf(query = {}) {
-  return useRequestPdf(`financial_statements/trial_balance_sheet`);
+  return useRequestPdf({
+    url: `/api/financial_statements/trial_balance_sheet`,
+    params: query,
+  });
 }

packages/webapp/src/hooks/query/FinancialReports/use-vendor-balance-summary.ts

@@ -63,6 +63,9 @@ export const useVendorBalanceSummaryCsvExport = (args) => {
   });
 };
 
-export const useVendorBalanceSummaryPdfExport = () => {
+export const useVendorBalanceSummaryPdfExport = (query = {}) => {
-  return useRequestPdf('/financial_statements/vendor-balance-summary');
+  return useRequestPdf({
+    url: '/api/financial_statements/vendor-balance-summary',
+    params: query,
+  });
 };

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() {
+export function useTransactionsByVendorsPdf(query = {}) {
-  return useRequestPdf(`financial_statements/transactions-by-vendors`);
+  return useRequestPdf({
+    url: `/api/financial_statements/transactions-by-vendors`,
+    params: query,
+  });
 }