From d229378957d4f35851c289dc33e5cbf5ae91710b Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Mon, 12 Feb 2024 19:07:57 +0200
Subject: [PATCH] feat(webapp): wip printing financial reports

---
 packages/webapp/src/constants/dialogs.ts      | 14 ++++++-
 .../APAgingSummary/APAgingSummary.tsx         |  6 +++
 .../APAgingSummaryActionsBar.tsx              | 12 ++++++
 .../APAgingSummary/APAgingSummaryDialogs.tsx  | 12 ++++++
 .../APAgingSummaryPdfDialog.tsx               | 39 +++++++++++++++++
 .../APAgingSummaryPdfDialogContent.tsx        | 42 +++++++++++++++++++
 .../dialogs/APAgingSummaryPdfDialog/index.ts  |  1 +
 .../ARAgingSummary/ARAgingSummary.tsx         | 23 ++++++----
 .../ARAgingSummaryActionsBar.tsx              | 12 ++++++
 .../ARAgingSummaryPdfDialog.tsx               | 39 +++++++++++++++++
 .../ARAgingSummaryPdfDialogContent.tsx        | 42 +++++++++++++++++++
 .../dialogs/ARAgingSummaryPdfDialog/index.ts  |  1 +
 .../BalanceSheet/BalanceSheetActionsBar.tsx   |  1 +
 .../CashflowSheetPdfDialog.tsx                |  7 +---
 .../CustomerBalanceSummaryPdfDialog.tsx       | 41 ++++++++++++++++++
 ...CustomerBalanceSummaryPdfDialogContent.tsx | 42 +++++++++++++++++++
 .../CustomerBalancePdfDialog/index.ts         |  1 +
 .../CustomersBalanceSummary.tsx               |  6 +++
 .../CustomersBalanceSummaryActionsBar.tsx     | 12 ++++++
 .../CustomersTransactions.tsx                 |  3 ++
 .../CustomersTransactionsActionsBar.tsx       | 12 ++++++
 .../CustomersTransactionsDialogs.tsx          | 12 ++++++
 .../CustomerTransactionsPdfDialog.tsx         | 41 ++++++++++++++++++
 .../CustomerTransactionsPdfDialogContent.tsx  | 42 +++++++++++++++++++
 .../CustomerTransactionsPdfDialog/index.ts    |  1 +
 .../GeneralLedger/GeneralLedger.tsx           |  6 +++
 .../GeneralLedger/GeneralLedgerActionsBar.tsx | 12 ++++++
 .../GeneralLedgerPdfDialog.tsx                | 41 ++++++++++++++++++
 .../GeneralLedgerPdfDialogContent.tsx         | 42 +++++++++++++++++++
 .../dialogs/GeneralLedgerPdfDialog/index.ts   |  1 +
 .../InventoryItemDetails.tsx                  |  3 ++
 .../InventoryItemDetailsActionsBar.tsx        | 12 +++++-
 .../InventoryItemDetailsDialogs.tsx           | 12 ++++++
 .../InventoryItemDetailsPdfDialog.tsx         | 39 +++++++++++++++++
 .../InventoryItemDetailsPdfDialogContent.tsx  | 42 +++++++++++++++++++
 .../InventoryItemDetailsPdfDialog/index.ts    |  1 +
 .../InventoryValuation/InventoryValuation.tsx |  5 ++-
 .../InventoryValuationActionsBar.tsx          | 18 ++++++--
 .../InventoryValuationDialogs.tsx             | 12 ++++++
 .../InventoryValuationSheetPdfDialog.tsx      | 39 +++++++++++++++++
 ...nventoryValuationSheetPdfDialogContent.tsx | 42 +++++++++++++++++++
 .../InventoryValuationPdfDialog/index.ts      |  1 +
 .../FinancialStatements/Journal/Journal.tsx   |  5 ++-
 .../Journal/JournalActionsBar.tsx             | 12 ++++++
 .../Journal/JournalDialogs.tsx                | 10 +++++
 .../JournalPdfDialog/JournalPdfDialog.tsx     | 39 +++++++++++++++++
 .../JournalPdfDialogContent.tsx               | 42 +++++++++++++++++++
 .../Journal/dialogs/JournalPdfDialog/index.ts |  1 +
 .../ProfitLossSheetDialogs.tsx                |  8 ++--
 .../ProfitLossSheetPdfDialogContent.tsx       |  2 +-
 .../PurchasesByItems/PurchasesByItems.tsx     |  3 ++
 .../PurchasesByItemsActionsBar.tsx            | 12 ++++++
 .../PurchasesByItemsDialogs.tsx               | 12 ++++++
 .../PurchasesByItemsPdfDialog.tsx             | 39 +++++++++++++++++
 .../PurchasesByItemsPdfDialogContent.tsx      | 42 +++++++++++++++++++
 .../dialogs/PurchasesByItemsDialog/index.ts   |  1 +
 .../SalesByItems/SalesByItems.tsx             |  3 ++
 .../SalesByItems/SalesByItemsActionsBar.tsx   | 12 ++++++
 .../SalesByItems/SalesByitemsDialogs.tsx      | 10 +++++
 .../SalesByItemsPdfDialog.tsx                 | 39 +++++++++++++++++
 .../SalesByItemsPdfDialogContent.tsx          | 42 +++++++++++++++++++
 .../dialogs/SalesByItemsPdfDialog/index.ts    |  1 +
 .../SalesTaxLiabilityPdfDialog.tsx            | 41 ++++++++++++++++++
 .../SalesTaxLiabilityPdfDialogContent.tsx     | 42 +++++++++++++++++++
 .../SalesTaxLiabilityPdfDialog/index.ts       |  1 +
 .../SalesTaxLiabilitySummary.tsx              |  6 +++
 .../SalesTaxLiabilitySummaryActionsBar.tsx    | 12 ++++++
 .../TrialBalanceSheetPdfDialogContent.tsx     |  2 +-
 .../VendorBalanceDialogs.tsx                  | 10 +++++
 .../VendorsBalanceSummary.tsx                 |  5 ++-
 .../VendorsBalanceSummaryActionsBar.tsx       | 12 ++++++
 .../VendorBalancePdfDialog.tsx                | 39 +++++++++++++++++
 .../VendorBalancePdfDialogContent.tsx         | 42 +++++++++++++++++++
 .../dialogs/VendorBalancePdfDialog/index.ts   |  1 +
 .../VendorTransactionsDialogs.tsx             | 12 ++++++
 .../VendorsTransactions.tsx                   |  3 ++
 .../VendorsTransactionsActionsBar.tsx         | 12 ++++++
 .../VendorTransactionsPdfDialog.tsx           | 39 +++++++++++++++++
 .../VendorTransactionsPdfDialogContent.tsx    | 42 +++++++++++++++++++
 .../VendorTransactionsPdfDialog/index.ts      |  1 +
 80 files changed, 1424 insertions(+), 25 deletions(-)
 create mode 100644 packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryDialogs.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/APAgingSummary/dialogs/APAgingSummaryPdfDialog/APAgingSummaryPdfDialog.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/APAgingSummary/dialogs/APAgingSummaryPdfDialog/APAgingSummaryPdfDialogContent.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/APAgingSummary/dialogs/APAgingSummaryPdfDialog/index.ts
 create mode 100644 packages/webapp/src/containers/FinancialStatements/ARAgingSummary/dialogs/ARAgingSummaryPdfDialog/ARAgingSummaryPdfDialog.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/ARAgingSummary/dialogs/ARAgingSummaryPdfDialog/ARAgingSummaryPdfDialogContent.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/ARAgingSummary/dialogs/ARAgingSummaryPdfDialog/index.ts
 create mode 100644 packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomerBalancePdfDialog/CustomerBalanceSummaryPdfDialog.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomerBalancePdfDialog/CustomerBalanceSummaryPdfDialogContent.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomerBalancePdfDialog/index.ts
 create mode 100644 packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsDialogs.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/CustomersTransactions/dialogs/CustomerTransactionsPdfDialog/CustomerTransactionsPdfDialog.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/CustomersTransactions/dialogs/CustomerTransactionsPdfDialog/CustomerTransactionsPdfDialogContent.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/CustomersTransactions/dialogs/CustomerTransactionsPdfDialog/index.ts
 create mode 100644 packages/webapp/src/containers/FinancialStatements/GeneralLedger/dialogs/GeneralLedgerPdfDialog/GeneralLedgerPdfDialog.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/GeneralLedger/dialogs/GeneralLedgerPdfDialog/GeneralLedgerPdfDialogContent.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/GeneralLedger/dialogs/GeneralLedgerPdfDialog/index.ts
 create mode 100644 packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsDialogs.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/dialogs/InventoryItemDetailsPdfDialog/InventoryItemDetailsPdfDialog.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/dialogs/InventoryItemDetailsPdfDialog/InventoryItemDetailsPdfDialogContent.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/dialogs/InventoryItemDetailsPdfDialog/index.ts
 create mode 100644 packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationDialogs.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/InventoryValuation/dialogs/InventoryValuationPdfDialog/InventoryValuationSheetPdfDialog.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/InventoryValuation/dialogs/InventoryValuationPdfDialog/InventoryValuationSheetPdfDialogContent.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/InventoryValuation/dialogs/InventoryValuationPdfDialog/index.ts
 create mode 100644 packages/webapp/src/containers/FinancialStatements/Journal/JournalDialogs.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/Journal/dialogs/JournalPdfDialog/JournalPdfDialog.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/Journal/dialogs/JournalPdfDialog/JournalPdfDialogContent.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/Journal/dialogs/JournalPdfDialog/index.ts
 create mode 100644 packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsDialogs.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/PurchasesByItems/dialogs/PurchasesByItemsDialog/PurchasesByItemsPdfDialog.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/PurchasesByItems/dialogs/PurchasesByItemsDialog/PurchasesByItemsPdfDialogContent.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/PurchasesByItems/dialogs/PurchasesByItemsDialog/index.ts
 create mode 100644 packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByitemsDialogs.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/SalesByItems/dialogs/SalesByItemsPdfDialog/SalesByItemsPdfDialog.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/SalesByItems/dialogs/SalesByItemsPdfDialog/SalesByItemsPdfDialogContent.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/SalesByItems/dialogs/SalesByItemsPdfDialog/index.ts
 create mode 100644 packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilityPdfDialog/SalesTaxLiabilityPdfDialog.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilityPdfDialog/SalesTaxLiabilityPdfDialogContent.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilityPdfDialog/index.ts
 create mode 100644 packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorBalanceDialogs.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/dialogs/VendorBalancePdfDialog/VendorBalancePdfDialog.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/dialogs/VendorBalancePdfDialog/VendorBalancePdfDialogContent.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/dialogs/VendorBalancePdfDialog/index.ts
 create mode 100644 packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorTransactionsDialogs.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/VendorsTransactions/dialogs/VendorTransactionsPdfDialog/VendorTransactionsPdfDialog.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/VendorsTransactions/dialogs/VendorTransactionsPdfDialog/VendorTransactionsPdfDialogContent.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/VendorsTransactions/dialogs/VendorTransactionsPdfDialog/index.ts

diff --git a/packages/webapp/src/constants/dialogs.ts b/packages/webapp/src/constants/dialogs.ts
index 74ec090cf..ba06da095 100644
--- a/packages/webapp/src/constants/dialogs.ts
+++ b/packages/webapp/src/constants/dialogs.ts
@@ -57,5 +57,17 @@ export enum DialogsName {
   TrialBalanceSheetPdfPreview = 'TrialBalanceSheetPdfPreview',
   CashflowSheetPdfPreview = 'CashflowSheetPdfPreview',
   ProfitLossSheetPdfPreview = 'ProfitLossSheetPdfPreview',
-
+  InventoryValuationPdfPreview = 'InventoryValuationPdfPreview',
+  APAgingSummaryPdfPreview = 'APAgingSummaryPdfPreview',
+  ARAgingSummaryPdfPreview = 'ARAgingSummaryPdfPreview',
+  JournalPdfPreview = 'JournalPdfPreview',
+  SalesByItemsPdfPreview = 'SalesByItemsPdfPreview',
+  PurchasesByItemsPdfPreview = 'PurchasesByItemsPdfPreview',
+  VendorBalancePdfPreview = 'VendorBalancePdfPreview',
+  InventoryItemDetailsPdfPreview = 'InventoryItemDetailsPdfPreview',
+  CustomerBalanceSummaryPdfPreview = 'CustomerBalanceSummaryPdfPreview',
+  CustomerTransactionsPdfPreview = 'CustomerTransactionsPdfPreview',
+  VendorTransactionsPdfPreview = 'VendorTransactionsPdfPreview',
+  GeneralLedgerPdfPreview = 'GeneralLedgerPdfPreview',
+  SalesTaxLiabilitySummaryPdfPreview = 'SalesTaxLiabilitySummaryPdfPreview'
 }
diff --git a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummary.tsx b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummary.tsx
index 0e16bac3e..f3df7ef86 100644
--- a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummary.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummary.tsx
@@ -15,6 +15,8 @@ import { APAgingSummarySheetLoadingBar } from './components';
 import withAPAgingSummaryActions from './withAPAgingSummaryActions';
 
 import { compose } from '@/utils';
+import { APAgingSummaryPdfDialog } from './dialogs/APAgingSummaryPdfDialog';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * A/P aging summary report.
@@ -68,6 +70,10 @@ function APAgingSummary({
           <APAgingSummaryBody organizationName={organizationName} />
         </FinancialStatement>
       </DashboardPageContent>
+
+      <APAgingSummaryPdfDialog
+        dialogName={DialogsName.APAgingSummaryPdfPreview}
+      />
     </APAgingSummaryProvider>
   );
 }
diff --git a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryActionsBar.tsx
index f0473ab58..9035be7e6 100644
--- a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryActionsBar.tsx
@@ -21,6 +21,8 @@ import withAPAgingSummary from './withAPAgingSummary';
 import withAPAgingSummaryActions from './withAPAgingSummaryActions';
 
 import { saveInvoke, compose } from '@/utils';
+import { DialogsName } from '@/constants/dialogs';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
 
 /**
  * AP Aging summary sheet - Actions bar.
@@ -32,6 +34,9 @@ function APAgingSummaryActionsBar({
   // #withARAgingSummaryActions
   toggleAPAgingSummaryFilterDrawer: toggleFilterDrawerDisplay,
 
+  // #withDialogActions
+  openDialog,
+
   //#ownProps
   numberFormat,
   onNumberFormatSubmit,
@@ -52,6 +57,11 @@ function APAgingSummaryActionsBar({
     saveInvoke(onNumberFormatSubmit, numberFormat);
   };
 
+  // Handle the print button click.
+  const handlePrintBtnClick = () => {
+    openDialog(DialogsName.APAgingSummaryPdfPreview);
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -106,6 +116,7 @@ function APAgingSummaryActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon="print-16" iconSize={16} />}
           text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
         />
         <Popover
           content={<APAgingSummaryExportMenu />}
@@ -129,4 +140,5 @@ export default compose(
   withAPAgingSummary(({ APAgingSummaryFilterDrawer }) => ({
     isFilterDrawerOpen: APAgingSummaryFilterDrawer,
   })),
+  withDialogActions
 )(APAgingSummaryActionsBar);
diff --git a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryDialogs.tsx b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryDialogs.tsx
new file mode 100644
index 000000000..003c9d5f2
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryDialogs.tsx
@@ -0,0 +1,12 @@
+import { DialogsName } from '@/constants/dialogs';
+import { APAgingSummaryPdfDialog } from './dialogs/APAgingSummaryPdfDialog';
+
+export function APAgingSummaryDialogs() {
+  return (
+    <>
+      <APAgingSummaryPdfDialog
+        dialogName={DialogsName.APAgingSummaryPdfPreview}
+      />
+    </>
+  );
+}
diff --git a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/dialogs/APAgingSummaryPdfDialog/APAgingSummaryPdfDialog.tsx b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/dialogs/APAgingSummaryPdfDialog/APAgingSummaryPdfDialog.tsx
new file mode 100644
index 000000000..e497798b8
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/dialogs/APAgingSummaryPdfDialog/APAgingSummaryPdfDialog.tsx
@@ -0,0 +1,39 @@
+// @ts-nocheck
+import React, { lazy } from 'react';
+import classNames from 'classnames';
+
+import { Dialog, DialogSuspense } from '@/components';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import { CLASSES } from '@/constants/classes';
+import { compose } from '@/utils';
+
+// Lazy loading the content.
+const APAgingSummaryPdfDialogContent = lazy(
+  () => import('./APAgingSummaryPdfDialogContent'),
+);
+
+/**
+ * A/P aging summary pdf preview dialog.
+ * @returns {React.ReactNode}
+ */
+function APAgingSummaryPdfDialogRoot({ dialogName, payload, isOpen }) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={'A/P Aging Summary Print Preview'}
+      className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      style={{ width: '1000px' }}
+    >
+      <DialogSuspense>
+        <APAgingSummaryPdfDialogContent />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export const APAgingSummaryPdfDialog = compose(withDialogRedux())(
+  APAgingSummaryPdfDialogRoot,
+);
diff --git a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/dialogs/APAgingSummaryPdfDialog/APAgingSummaryPdfDialogContent.tsx b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/dialogs/APAgingSummaryPdfDialog/APAgingSummaryPdfDialogContent.tsx
new file mode 100644
index 000000000..eea72599d
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/dialogs/APAgingSummaryPdfDialog/APAgingSummaryPdfDialogContent.tsx
@@ -0,0 +1,42 @@
+import {
+  DialogContent,
+  PdfDocumentPreview,
+  FormattedMessage as T,
+} from '@/components';
+import { useAPAgingSummaryPdf } from '@/hooks/query';
+import { AnchorButton } from '@blueprintjs/core';
+
+export default function APAgingSummaryPdfDialogContent() {
+  const { isLoading, pdfUrl } = useAPAgingSummaryPdf();
+
+  return (
+    <DialogContent>
+      <div className="dialog__header-actions">
+        <AnchorButton
+          href={pdfUrl}
+          target={'__blank'}
+          minimal={true}
+          outlined={true}
+        >
+          <T id={'pdf_preview.preview.button'} />
+        </AnchorButton>
+
+        <AnchorButton
+          href={pdfUrl}
+          download={'AP_aging_summary.pdf'}
+          minimal={true}
+          outlined={true}
+        >
+          <T id={'pdf_preview.download.button'} />
+        </AnchorButton>
+      </div>
+
+      <PdfDocumentPreview
+        height={760}
+        width={1000}
+        isLoading={isLoading}
+        url={pdfUrl}
+      />
+    </DialogContent>
+  );
+}
diff --git a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/dialogs/APAgingSummaryPdfDialog/index.ts b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/dialogs/APAgingSummaryPdfDialog/index.ts
new file mode 100644
index 000000000..4d3fd7ed7
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/dialogs/APAgingSummaryPdfDialog/index.ts
@@ -0,0 +1 @@
+export * from './APAgingSummaryPdfDialog';
\ No newline at end of file
diff --git a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.tsx b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.tsx
index 2ff0550bb..336bfb4e0 100644
--- a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.tsx
@@ -14,6 +14,8 @@ import withARAgingSummaryActions from './withARAgingSummaryActions';
 
 import { useARAgingSummaryQuery } from './common';
 import { compose } from '@/utils';
+import { ARAgingSummaryPdfDialog } from './dialogs/ARAgingSummaryPdfDialog';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * A/R aging summary report.
@@ -25,13 +27,16 @@ function ReceivableAgingSummarySheet({
   const { query, setLocationQuery } = useARAgingSummaryQuery();
 
   // Handle filter submit.
-  const handleFilterSubmit = useCallback((filter) => {
-    const _filter = {
-      ...filter,
-      asDate: moment(filter.asDate).format('YYYY-MM-DD'),
-    };
-    setLocationQuery(_filter);
-  }, [setLocationQuery]);
+  const handleFilterSubmit = useCallback(
+    (filter) => {
+      const _filter = {
+        ...filter,
+        asDate: moment(filter.asDate).format('YYYY-MM-DD'),
+      };
+      setLocationQuery(_filter);
+    },
+    [setLocationQuery],
+  );
 
   // Handle number format submit.
   const handleNumberFormatSubmit = (numberFormat) => {
@@ -60,6 +65,10 @@ function ReceivableAgingSummarySheet({
           <ARAgingSummaryBody />
         </FinancialStatement>
       </DashboardPageContent>
+
+      <ARAgingSummaryPdfDialog
+        dialogName={DialogsName.ARAgingSummaryPdfPreview}
+      />
     </ARAgingSummaryProvider>
   );
 }
diff --git a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.tsx
index 4b34f94aa..7932d15d8 100644
--- a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.tsx
@@ -20,6 +20,8 @@ import withARAgingSummary from './withARAgingSummary';
 
 import { compose, safeInvoke } from '@/utils';
 import { ARAgingSummaryExportMenu } from './components';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * A/R Aging summary sheet - Actions bar.
@@ -31,6 +33,9 @@ function ARAgingSummaryActionsBar({
   // #withReceivableAgingActions
   toggleARAgingSummaryFilterDrawer: toggleDisplayFilterDrawer,
 
+  // #withDialogActions
+  openDialog,
+
   // #ownProps
   numberFormat,
   onNumberFormatSubmit,
@@ -51,6 +56,11 @@ function ARAgingSummaryActionsBar({
     safeInvoke(onNumberFormatSubmit, numberFormat);
   };
 
+  // Handles the print button click.
+  const handlePrintBtnClick = () => {
+    openDialog(DialogsName.ARAgingSummaryPdfPreview)
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -107,6 +117,7 @@ function ARAgingSummaryActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon="print-16" iconSize={16} />}
           text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
         />
         <Popover
           content={<ARAgingSummaryExportMenu />}
@@ -130,4 +141,5 @@ export default compose(
   withARAgingSummary(({ ARAgingSummaryFilterDrawer }) => ({
     isFilterDrawerOpen: ARAgingSummaryFilterDrawer,
   })),
+  withDialogActions,
 )(ARAgingSummaryActionsBar);
diff --git a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/dialogs/ARAgingSummaryPdfDialog/ARAgingSummaryPdfDialog.tsx b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/dialogs/ARAgingSummaryPdfDialog/ARAgingSummaryPdfDialog.tsx
new file mode 100644
index 000000000..ed89fc30c
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/dialogs/ARAgingSummaryPdfDialog/ARAgingSummaryPdfDialog.tsx
@@ -0,0 +1,39 @@
+// @ts-nocheck
+import React, { lazy } from 'react';
+import classNames from 'classnames';
+
+import { Dialog, DialogSuspense } from '@/components';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import { CLASSES } from '@/constants/classes';
+import { compose } from '@/utils';
+
+// Lazy loading the content.
+const ARAgingSummaryPdfDialogContent = lazy(
+  () => import('./ARAgingSummaryPdfDialogContent'),
+);
+
+/**
+ * Balance sheet pdf preview dialog.
+ * @returns {React.ReactNode}
+ */
+function ARAgingSummaryPdfDialogRoot({ dialogName, payload, isOpen }) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={'AR Aging Summary Print Preview'}
+      className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      style={{ width: '1000px' }}
+    >
+      <DialogSuspense>
+        <ARAgingSummaryPdfDialogContent dialogName={dialogName} />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export const ARAgingSummaryPdfDialog = compose(withDialogRedux())(
+  ARAgingSummaryPdfDialogRoot,
+);
diff --git a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/dialogs/ARAgingSummaryPdfDialog/ARAgingSummaryPdfDialogContent.tsx b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/dialogs/ARAgingSummaryPdfDialog/ARAgingSummaryPdfDialogContent.tsx
new file mode 100644
index 000000000..fd5fef4d0
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/dialogs/ARAgingSummaryPdfDialog/ARAgingSummaryPdfDialogContent.tsx
@@ -0,0 +1,42 @@
+import {
+  DialogContent,
+  PdfDocumentPreview,
+  FormattedMessage as T,
+} from '@/components';
+import { useARAgingSummaryPdf } from '@/hooks/query';
+import { AnchorButton } from '@blueprintjs/core';
+
+export default function ARAgingSummaryPdfDialogContent() {
+  const { isLoading, pdfUrl } = useARAgingSummaryPdf();
+
+  return (
+    <DialogContent>
+      <div className="dialog__header-actions">
+        <AnchorButton
+          href={pdfUrl}
+          target={'__blank'}
+          minimal={true}
+          outlined={true}
+        >
+          <T id={'pdf_preview.preview.button'} />
+        </AnchorButton>
+
+        <AnchorButton
+          href={pdfUrl}
+          download={'AR_aging_summary.pdf'}
+          minimal={true}
+          outlined={true}
+        >
+          <T id={'pdf_preview.download.button'} />
+        </AnchorButton>
+      </div>
+
+      <PdfDocumentPreview
+        height={760}
+        width={1000}
+        isLoading={isLoading}
+        url={pdfUrl}
+      />
+    </DialogContent>
+  );
+}
diff --git a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/dialogs/ARAgingSummaryPdfDialog/index.ts b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/dialogs/ARAgingSummaryPdfDialog/index.ts
new file mode 100644
index 000000000..6a739c257
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/dialogs/ARAgingSummaryPdfDialog/index.ts
@@ -0,0 +1 @@
+export * from './ARAgingSummaryPdfDialog';
\ No newline at end of file
diff --git a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.tsx
index af8de6c12..d268b4127 100644
--- a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.tsx
@@ -55,6 +55,7 @@ function BalanceSheetActionsBar({
     saveInvoke(onNumberFormatSubmit, values);
   };
 
+  // Handles the pdf print button click.
   const handlePdfPrintBtnSubmit = () => {
     openDialog(DialogsName.BalanceSheetPdfPreview)
   }
diff --git a/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashflowSheetPdfDialog/CashflowSheetPdfDialog.tsx b/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashflowSheetPdfDialog/CashflowSheetPdfDialog.tsx
index f5efa17f6..fd773cfd7 100644
--- a/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashflowSheetPdfDialog/CashflowSheetPdfDialog.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashflowSheetPdfDialog/CashflowSheetPdfDialog.tsx
@@ -22,7 +22,7 @@ function CashflowSheetPdfDialogRoot({ dialogName, payload, isOpen }) {
   return (
     <Dialog
       name={dialogName}
-      title={'Trial Balance Sheet Print Preview'}
+      title={'Cashflow Sheet Print Preview'}
       className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
       autoFocus={true}
       canEscapeKeyClose={true}
@@ -30,10 +30,7 @@ function CashflowSheetPdfDialogRoot({ dialogName, payload, isOpen }) {
       style={{ width: '1000px' }}
     >
       <DialogSuspense>
-        <CashflowSheetPdfDialogContent
-          dialogName={dialogName}
-          subscriptionForm={payload}
-        />
+        <CashflowSheetPdfDialogContent />
       </DialogSuspense>
     </Dialog>
   );
diff --git a/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomerBalancePdfDialog/CustomerBalanceSummaryPdfDialog.tsx b/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomerBalancePdfDialog/CustomerBalanceSummaryPdfDialog.tsx
new file mode 100644
index 000000000..02cacd978
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomerBalancePdfDialog/CustomerBalanceSummaryPdfDialog.tsx
@@ -0,0 +1,41 @@
+// @ts-nocheck
+import React, { lazy } from 'react';
+import classNames from 'classnames';
+
+import { Dialog, DialogSuspense } from '@/components';
+
+import withDialogRedux from '@/components/DialogReduxConnect';
+
+import { CLASSES } from '@/constants/classes';
+import { compose } from '@/utils';
+
+// Lazy loading the content.
+const CustomerBalanceSummaryPdfDialogContent = lazy(
+  () => import('./CustomerBalanceSummaryPdfDialogContent'),
+);
+
+/**
+ * Cashflow sheet pdf preview dialog.
+ * @returns {React.ReactNode}
+ */
+function CashflowSheetPdfDialogRoot({ dialogName, payload, isOpen }) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={'Customer Balance Summary Print Preview'}
+      className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      style={{ width: '1000px' }}
+    >
+      <DialogSuspense>
+        <CustomerBalanceSummaryPdfDialogContent />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export const CustomerBalanceSummaryPdfDialog = compose(withDialogRedux())(
+  CashflowSheetPdfDialogRoot,
+);
diff --git a/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomerBalancePdfDialog/CustomerBalanceSummaryPdfDialogContent.tsx b/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomerBalancePdfDialog/CustomerBalanceSummaryPdfDialogContent.tsx
new file mode 100644
index 000000000..c970c1849
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomerBalancePdfDialog/CustomerBalanceSummaryPdfDialogContent.tsx
@@ -0,0 +1,42 @@
+import {
+  DialogContent,
+  PdfDocumentPreview,
+  FormattedMessage as T,
+} from '@/components';
+import { AnchorButton } from '@blueprintjs/core';
+import { useCustomerBalanceSummaryPdf } from '@/hooks/query';
+
+export default function CustomerBalanceSummaryPdfDialogContent() {
+  const { isLoading, pdfUrl } = useCustomerBalanceSummaryPdf();
+
+  return (
+    <DialogContent>
+      <div className="dialog__header-actions">
+        <AnchorButton
+          href={pdfUrl}
+          target={'__blank'}
+          minimal={true}
+          outlined={true}
+        >
+          <T id={'pdf_preview.preview.button'} />
+        </AnchorButton>
+
+        <AnchorButton
+          href={pdfUrl}
+          download={'invoice.pdf'}
+          minimal={true}
+          outlined={true}
+        >
+          <T id={'pdf_preview.download.button'} />
+        </AnchorButton>
+      </div>
+
+      <PdfDocumentPreview
+        height={760}
+        width={1000}
+        isLoading={isLoading}
+        url={pdfUrl}
+      />
+    </DialogContent>
+  );
+}
diff --git a/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomerBalancePdfDialog/index.ts b/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomerBalancePdfDialog/index.ts
new file mode 100644
index 000000000..f9fcb71ef
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomerBalancePdfDialog/index.ts
@@ -0,0 +1 @@
+export * from './CustomerBalanceSummaryPdfDialog';
\ No newline at end of file
diff --git a/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummary.tsx b/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummary.tsx
index 84d93e75d..d94c3d064 100644
--- a/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummary.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummary.tsx
@@ -13,6 +13,8 @@ import { CustomersBalanceSummaryProvider } from './CustomersBalanceSummaryProvid
 import { useCustomerBalanceSummaryQuery } from './utils';
 import { CustomersBalanceLoadingBar } from './components';
 import withCustomersBalanceSummaryActions from './withCustomersBalanceSummaryActions';
+import { CustomerBalanceSummaryPdfDialog } from './CustomerBalancePdfDialog';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * Customers Balance summary.
@@ -61,6 +63,10 @@ function CustomersBalanceSummary({
           <CustomerBalanceSummaryBody />
         </FinancialStatement>
       </DashboardPageContent>
+
+      <CustomerBalanceSummaryPdfDialog
+        dialogName={DialogsName.CustomerBalanceSummaryPdfPreview}
+      />
     </CustomersBalanceSummaryProvider>
   );
 }
diff --git a/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryActionsBar.tsx
index f22fea1e6..844745a10 100644
--- a/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryActionsBar.tsx
@@ -18,6 +18,8 @@ import withCustomersBalanceSummaryActions from './withCustomersBalanceSummaryAct
 import { useCustomersBalanceSummaryContext } from './CustomersBalanceSummaryProvider';
 import { compose, saveInvoke } from '@/utils';
 import { CustomerBalanceSummaryExportMenu } from './components';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * customer balance summary action bar.
@@ -32,6 +34,9 @@ function CustomersBalanceSummaryActionsBar({
 
   //#withCustomersBalanceSummaryActions
   toggleCustomerBalanceFilterDrawer,
+
+  // #withDialogActions
+  openDialog
 }) {
   const { refetch, isCustomersBalanceLoading } =
     useCustomersBalanceSummaryContext();
@@ -51,6 +56,11 @@ function CustomersBalanceSummaryActionsBar({
     saveInvoke(onNumberFormatSubmit, values);
   };
 
+  // Handle the print button click.
+  const handlePrintBtnClick = () => {
+    openDialog(DialogsName.CustomerBalanceSummaryPdfPreview);
+  }
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -112,6 +122,7 @@ function CustomersBalanceSummaryActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon="print-16" iconSize={16} />}
           text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
         />
         <Popover
           content={<CustomerBalanceSummaryExportMenu />}
@@ -134,4 +145,5 @@ export default compose(
     isFilterDrawerOpen: customersBalanceDrawerFilter,
   })),
   withCustomersBalanceSummaryActions,
+  withDialogActions
 )(CustomersBalanceSummaryActionsBar);
diff --git a/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactions.tsx b/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactions.tsx
index bd2d5bc52..454c2f2fe 100644
--- a/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactions.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactions.tsx
@@ -14,6 +14,7 @@ import { CustomersTransactionsProvider } from './CustomersTransactionsProvider';
 
 import { compose } from '@/utils';
 import { useCustomersTransactionsQuery } from './_utils';
+import { CustomersTransactionsDialogs } from './CustomersTransactionsDialogs';
 
 /**
  * Customers transactions.
@@ -65,6 +66,8 @@ function CustomersTransactions({
           <CustomersTransactionsBody />
         </FinancialStatement>
       </DashboardPageContent>
+
+      <CustomersTransactionsDialogs />
     </CustomersTransactionsProvider>
   );
 }
diff --git a/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsActionsBar.tsx
index 044bf9e9d..ff8a2b532 100644
--- a/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsActionsBar.tsx
@@ -20,6 +20,8 @@ import withCustomersTransactions from './withCustomersTransactions';
 import withCustomersTransactionsActions from './withCustomersTransactionsActions';
 
 import { compose, saveInvoke } from '@/utils';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * Customers transactions actions bar.
@@ -34,6 +36,9 @@ function CustomersTransactionsActionsBar({
 
   //#withCustomersTransactionsActions
   toggleCustomersTransactionsFilterDrawer,
+
+  // #withDialogActions
+  openDialog
 }) {
   const { isCustomersTransactionsLoading, CustomersTransactionsRefetch } =
     useCustomersTransactionsContext();
@@ -53,6 +58,11 @@ function CustomersTransactionsActionsBar({
     saveInvoke(onNumberFormatSubmit, values);
   };
 
+  // Handle print button click.
+  const handlePrintBtnClick = () => {
+    openDialog(DialogsName.CustomerTransactionsPdfPreview)
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -114,6 +124,7 @@ function CustomersTransactionsActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon="print-16" iconSize={16} />}
           text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
         />
         <Popover
           content={<CustomersTransactionsExportMenu />}
@@ -137,4 +148,5 @@ export default compose(
     isFilterDrawerOpen: customersTransactionsDrawerFilter,
   })),
   withCustomersTransactionsActions,
+  withDialogActions
 )(CustomersTransactionsActionsBar);
diff --git a/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsDialogs.tsx b/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsDialogs.tsx
new file mode 100644
index 000000000..665298ce3
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsDialogs.tsx
@@ -0,0 +1,12 @@
+import { DialogsName } from '@/constants/dialogs';
+import { CustomerTransactionsPdfDialog } from './dialogs/CustomerTransactionsPdfDialog';
+
+export function CustomersTransactionsDialogs() {
+  return (
+    <>
+      <CustomerTransactionsPdfDialog
+        dialogName={DialogsName.CustomerTransactionsPdfPreview}
+      />
+    </>
+  );
+}
diff --git a/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/dialogs/CustomerTransactionsPdfDialog/CustomerTransactionsPdfDialog.tsx b/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/dialogs/CustomerTransactionsPdfDialog/CustomerTransactionsPdfDialog.tsx
new file mode 100644
index 000000000..81508b05b
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/dialogs/CustomerTransactionsPdfDialog/CustomerTransactionsPdfDialog.tsx
@@ -0,0 +1,41 @@
+// @ts-nocheck
+import React, { lazy } from 'react';
+import classNames from 'classnames';
+
+import { Dialog, DialogSuspense } from '@/components';
+
+import withDialogRedux from '@/components/DialogReduxConnect';
+
+import { CLASSES } from '@/constants/classes';
+import { compose } from '@/utils';
+
+// Lazy loading the content.
+const CustomerTransactionsPdfDialogContent = lazy(
+  () => import('./CustomerTransactionsPdfDialogContent'),
+);
+
+/**
+ * Cashflow sheet pdf preview dialog.
+ * @returns {React.ReactNode}
+ */
+function CashflowSheetPdfDialogRoot({ dialogName, payload, isOpen }) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={'Customer Tranasctions PDF Preview'}
+      className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      style={{ width: '1000px' }}
+    >
+      <DialogSuspense>
+        <CustomerTransactionsPdfDialogContent />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export const CustomerTransactionsPdfDialog = compose(withDialogRedux())(
+  CashflowSheetPdfDialogRoot,
+);
diff --git a/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/dialogs/CustomerTransactionsPdfDialog/CustomerTransactionsPdfDialogContent.tsx b/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/dialogs/CustomerTransactionsPdfDialog/CustomerTransactionsPdfDialogContent.tsx
new file mode 100644
index 000000000..1efe79017
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/dialogs/CustomerTransactionsPdfDialog/CustomerTransactionsPdfDialogContent.tsx
@@ -0,0 +1,42 @@
+import {
+  DialogContent,
+  PdfDocumentPreview,
+  FormattedMessage as T,
+} from '@/components';
+import { AnchorButton } from '@blueprintjs/core';
+import { useCustomersTransactionsPdfExport } from '@/hooks/query';
+
+export default function CashflowSheetPdfDialogContent() {
+  const { isLoading, pdfUrl } = useCustomersTransactionsPdfExport();
+
+  return (
+    <DialogContent>
+      <div className="dialog__header-actions">
+        <AnchorButton
+          href={pdfUrl}
+          target={'__blank'}
+          minimal={true}
+          outlined={true}
+        >
+          <T id={'pdf_preview.preview.button'} />
+        </AnchorButton>
+
+        <AnchorButton
+          href={pdfUrl}
+          download={'invoice.pdf'}
+          minimal={true}
+          outlined={true}
+        >
+          <T id={'pdf_preview.download.button'} />
+        </AnchorButton>
+      </div>
+
+      <PdfDocumentPreview
+        height={760}
+        width={1000}
+        isLoading={isLoading}
+        url={pdfUrl}
+      />
+    </DialogContent>
+  );
+}
diff --git a/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/dialogs/CustomerTransactionsPdfDialog/index.ts b/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/dialogs/CustomerTransactionsPdfDialog/index.ts
new file mode 100644
index 000000000..d388e4e4f
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/dialogs/CustomerTransactionsPdfDialog/index.ts
@@ -0,0 +1 @@
+export * from './CustomerTransactionsPdfDialog';
\ No newline at end of file
diff --git a/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.tsx b/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.tsx
index 6f6047c9f..0da741bdb 100644
--- a/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.tsx
@@ -16,6 +16,8 @@ import {
 
 import withGeneralLedgerActions from './withGeneralLedgerActions';
 import { compose } from '@/utils';
+import { GeneralLedgerPdfDialog } from './dialogs/GeneralLedgerPdfDialog';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * General Ledger (GL) sheet.
@@ -61,6 +63,10 @@ function GeneralLedger({
           <GeneralLedgerBody />
         </FinancialStatement>
       </DashboardPageContent>
+
+      <GeneralLedgerPdfDialog
+        dialogName={DialogsName.GeneralLedgerPdfPreview}
+      />
     </GeneralLedgerProvider>
   );
 }
diff --git a/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.tsx
index e450c78bb..e7475e3d2 100644
--- a/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.tsx
@@ -18,6 +18,8 @@ import { compose } from '@/utils';
 
 import withGeneralLedger from './withGeneralLedger';
 import withGeneralLedgerActions from './withGeneralLedgerActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * General ledger - Actions bar.
@@ -28,6 +30,9 @@ function GeneralLedgerActionsBar({
 
   // #withGeneralLedgerActions
   toggleGeneralLedgerFilterDrawer: toggleDisplayFilterDrawer,
+
+  // #withDialogActions
+  openDialog,
 }) {
   const { sheetRefresh } = useGeneralLedgerContext();
 
@@ -41,6 +46,11 @@ function GeneralLedgerActionsBar({
     sheetRefresh();
   };
 
+  // Handle the print button click.
+  const handlePrintBtnClick = () => {
+    openDialog(DialogsName.GeneralLedgerPdfPreview);
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -84,6 +94,7 @@ function GeneralLedgerActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon="print-16" iconSize={16} />}
           text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
         />
         <Popover
           content={<GeneralLedgerSheetExportMenu />}
@@ -107,4 +118,5 @@ export default compose(
     isFilterDrawerOpen: generalLedgerFilterDrawer,
   })),
   withGeneralLedgerActions,
+  withDialogActions,
 )(GeneralLedgerActionsBar);
diff --git a/packages/webapp/src/containers/FinancialStatements/GeneralLedger/dialogs/GeneralLedgerPdfDialog/GeneralLedgerPdfDialog.tsx b/packages/webapp/src/containers/FinancialStatements/GeneralLedger/dialogs/GeneralLedgerPdfDialog/GeneralLedgerPdfDialog.tsx
new file mode 100644
index 000000000..021f715a0
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/GeneralLedger/dialogs/GeneralLedgerPdfDialog/GeneralLedgerPdfDialog.tsx
@@ -0,0 +1,41 @@
+// @ts-nocheck
+import React, { lazy } from 'react';
+import classNames from 'classnames';
+
+import { Dialog, DialogSuspense } from '@/components';
+
+import withDialogRedux from '@/components/DialogReduxConnect';
+
+import { CLASSES } from '@/constants/classes';
+import { compose } from '@/utils';
+
+// Lazy loading the content.
+const GeneralLedgerPdfDialogContent = lazy(
+  () => import('./GeneralLedgerPdfDialogContent'),
+);
+
+/**
+ * General ledger pdf preview dialog.
+ * @returns {React.ReactNode}
+ */
+function GeneralLedgerPdfDialogRoot({ dialogName, payload, isOpen }) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={'General Ledger PDF Preview'}
+      className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      style={{ width: '1000px' }}
+    >
+      <DialogSuspense>
+        <GeneralLedgerPdfDialogContent />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export const GeneralLedgerPdfDialog = compose(withDialogRedux())(
+  GeneralLedgerPdfDialogRoot,
+);
diff --git a/packages/webapp/src/containers/FinancialStatements/GeneralLedger/dialogs/GeneralLedgerPdfDialog/GeneralLedgerPdfDialogContent.tsx b/packages/webapp/src/containers/FinancialStatements/GeneralLedger/dialogs/GeneralLedgerPdfDialog/GeneralLedgerPdfDialogContent.tsx
new file mode 100644
index 000000000..bf2a34e33
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/GeneralLedger/dialogs/GeneralLedgerPdfDialog/GeneralLedgerPdfDialogContent.tsx
@@ -0,0 +1,42 @@
+import {
+  DialogContent,
+  PdfDocumentPreview,
+  FormattedMessage as T,
+} from '@/components';
+import { AnchorButton } from '@blueprintjs/core';
+import { useGeneralLedgerPdf } from '@/hooks/query';
+
+export default function GeneralLedgerPdfDialogContent() {
+  const { isLoading, pdfUrl } = useGeneralLedgerPdf();
+
+  return (
+    <DialogContent>
+      <div className="dialog__header-actions">
+        <AnchorButton
+          href={pdfUrl}
+          target={'__blank'}
+          minimal={true}
+          outlined={true}
+        >
+          <T id={'pdf_preview.preview.button'} />
+        </AnchorButton>
+
+        <AnchorButton
+          href={pdfUrl}
+          download={'invoice.pdf'}
+          minimal={true}
+          outlined={true}
+        >
+          <T id={'pdf_preview.download.button'} />
+        </AnchorButton>
+      </div>
+
+      <PdfDocumentPreview
+        height={760}
+        width={1000}
+        isLoading={isLoading}
+        url={pdfUrl}
+      />
+    </DialogContent>
+  );
+}
diff --git a/packages/webapp/src/containers/FinancialStatements/GeneralLedger/dialogs/GeneralLedgerPdfDialog/index.ts b/packages/webapp/src/containers/FinancialStatements/GeneralLedger/dialogs/GeneralLedgerPdfDialog/index.ts
new file mode 100644
index 000000000..af9d64518
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/GeneralLedger/dialogs/GeneralLedgerPdfDialog/index.ts
@@ -0,0 +1 @@
+export * from './GeneralLedgerPdfDialog';
\ No newline at end of file
diff --git a/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetails.tsx b/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetails.tsx
index c17db8f85..94ba337d3 100644
--- a/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetails.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetails.tsx
@@ -15,6 +15,7 @@ import {
 } from './components';
 
 import { InventoryItemDetailsBody } from './InventoryItemDetailsBody';
+import { InventoryItemDetailsDialogs } from './InventoryItemDetailsDialogs';
 import { useInventoryValuationQuery } from './utils2';
 import { compose } from '@/utils';
 
@@ -64,6 +65,8 @@ function InventoryItemDetails({
           <InventoryItemDetailsBody />
         </FinancialStatement>
       </DashboardPageContent>
+
+      <InventoryItemDetailsDialogs />
     </InventoryItemDetailsProvider>
   );
 }
diff --git a/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsActionsBar.tsx
index da4d6c4df..a272cbc24 100644
--- a/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsActionsBar.tsx
@@ -20,6 +20,8 @@ import withInventoryItemDetails from './withInventoryItemDetails';
 import withInventoryItemDetailsActions from './withInventoryItemDetailsActions';
 
 import { compose, saveInvoke } from '@/utils';
+import { DialogsName } from '@/constants/dialogs';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
 
 /**
  * Inventory item details actions bar.
@@ -32,6 +34,9 @@ function InventoryItemDetailsActionsBar({
   //#withInventoryItemDetails
   isFilterDrawerOpen,
 
+  // #withDialogActions
+  openDialog,
+
   //#withInventoryItemDetailsActions
   toggleInventoryItemDetailsFilterDrawer: toggleFilterDrawer,
 }) {
@@ -50,7 +55,10 @@ function InventoryItemDetailsActionsBar({
   const handleNumberFormatSubmit = (values) => {
     saveInvoke(onNumberFormatSubmit, values);
   };
-
+  // Handle print button click.
+  const handlePrintBtnClick = () => {
+    openDialog(DialogsName.InventoryItemDetailsPdfPreview);
+  };
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -112,6 +120,7 @@ function InventoryItemDetailsActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon="print-16" iconSize={16} />}
           text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
         />
         <Popover
           content={<InventoryItemDetailsExportMenu />}
@@ -135,4 +144,5 @@ export default compose(
     isFilterDrawerOpen: inventoryItemDetailDrawerFilter,
   })),
   withInventoryItemDetailsActions,
+  withDialogActions,
 )(InventoryItemDetailsActionsBar);
diff --git a/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsDialogs.tsx b/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsDialogs.tsx
new file mode 100644
index 000000000..b38622f22
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsDialogs.tsx
@@ -0,0 +1,12 @@
+import { DialogsName } from '@/constants/dialogs';
+import { InventoryItemDetailsPdfDialog } from './dialogs/InventoryItemDetailsPdfDialog';
+
+export function InventoryItemDetailsDialogs() {
+  return (
+    <>
+      <InventoryItemDetailsPdfDialog
+        dialogName={DialogsName.InventoryItemDetailsPdfPreview}
+      />
+    </>
+  );
+}
diff --git a/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/dialogs/InventoryItemDetailsPdfDialog/InventoryItemDetailsPdfDialog.tsx b/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/dialogs/InventoryItemDetailsPdfDialog/InventoryItemDetailsPdfDialog.tsx
new file mode 100644
index 000000000..ee8db1d8d
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/dialogs/InventoryItemDetailsPdfDialog/InventoryItemDetailsPdfDialog.tsx
@@ -0,0 +1,39 @@
+// @ts-nocheck
+import React, { lazy } from 'react';
+import classNames from 'classnames';
+
+import { Dialog, DialogSuspense } from '@/components';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import { CLASSES } from '@/constants/classes';
+import { compose } from '@/utils';
+
+// Lazy loading the content.
+const InventoryItemDetailsPdfDialogContent = lazy(
+  () => import('./InventoryItemDetailsPdfDialogContent'),
+);
+
+/**
+ * Inventory item details sheet pdf preview dialog.
+ * @returns {React.ReactNode}
+ */
+function InventoryItemDetailsPdfDialogRoot({ dialogName, payload, isOpen }) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={'Inventory Item Details Print Preview'}
+      className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      style={{ width: '1000px' }}
+    >
+      <DialogSuspense>
+        <InventoryItemDetailsPdfDialogContent dialogName={dialogName} />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export const InventoryItemDetailsPdfDialog = compose(withDialogRedux())(
+  InventoryItemDetailsPdfDialogRoot,
+);
diff --git a/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/dialogs/InventoryItemDetailsPdfDialog/InventoryItemDetailsPdfDialogContent.tsx b/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/dialogs/InventoryItemDetailsPdfDialog/InventoryItemDetailsPdfDialogContent.tsx
new file mode 100644
index 000000000..1310d7914
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/dialogs/InventoryItemDetailsPdfDialog/InventoryItemDetailsPdfDialogContent.tsx
@@ -0,0 +1,42 @@
+import {
+  DialogContent,
+  PdfDocumentPreview,
+  FormattedMessage as T,
+} from '@/components';
+import { useInventoryItemDetailsPdf } from '@/hooks/query';
+import { AnchorButton } from '@blueprintjs/core';
+
+export default function InventoryItemDetailsPdfDialogContent() {
+  const { isLoading, pdfUrl } = useInventoryItemDetailsPdf();
+
+  return (
+    <DialogContent>
+      <div className="dialog__header-actions">
+        <AnchorButton
+          href={pdfUrl}
+          target={'__blank'}
+          minimal={true}
+          outlined={true}
+        >
+          <T id={'pdf_preview.preview.button'} />
+        </AnchorButton>
+
+        <AnchorButton
+          href={pdfUrl}
+          download={'invoice.pdf'}
+          minimal={true}
+          outlined={true}
+        >
+          <T id={'pdf_preview.download.button'} />
+        </AnchorButton>
+      </div>
+
+      <PdfDocumentPreview
+        height={760}
+        width={1000}
+        isLoading={isLoading}
+        url={pdfUrl}
+      />
+    </DialogContent>
+  );
+}
diff --git a/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/dialogs/InventoryItemDetailsPdfDialog/index.ts b/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/dialogs/InventoryItemDetailsPdfDialog/index.ts
new file mode 100644
index 000000000..f62ea48cb
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/dialogs/InventoryItemDetailsPdfDialog/index.ts
@@ -0,0 +1 @@
+export * from './InventoryItemDetailsPdfDialog';
\ No newline at end of file
diff --git a/packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuation.tsx b/packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuation.tsx
index da4f8098a..acb402166 100644
--- a/packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuation.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuation.tsx
@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useEffect, useState, useCallback } from 'react';
+import { useEffect, useCallback } from 'react';
 import moment from 'moment';
 
 import { DashboardPageContent } from '@/components';
@@ -14,6 +14,7 @@ import { compose } from '@/utils';
 
 import withInventoryValuationActions from './withInventoryValuationActions';
 import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
+import { InventoryValuationDialogs } from './InventoryValuationDialogs';
 
 /**
  * Inventory valuation.
@@ -65,6 +66,8 @@ function InventoryValuation({
         />
         <InventoryValuationBody />
       </DashboardPageContent>
+
+      <InventoryValuationDialogs />
     </InventoryValuationProvider>
   );
 }
diff --git a/packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationActionsBar.tsx
index 9e1c20ab1..cfc20c75f 100644
--- a/packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationActionsBar.tsx
@@ -16,10 +16,12 @@ import NumberFormatDropdown from '@/components/NumberFormatDropdown';
 
 import withInventoryValuation from './withInventoryValuation';
 import withInventoryValuationActions from './withInventoryValuationActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { useInventoryValuationContext } from './InventoryValuationProvider';
 
 import { compose, saveInvoke } from '@/utils';
 import { InventoryValuationExportMenu } from './components';
+import { DialogsName } from '@/constants/dialogs';
 
 function InventoryValuationActionsBar({
   // #withInventoryValuation
@@ -28,27 +30,35 @@ function InventoryValuationActionsBar({
   // #withInventoryValuationActions
   toggleInventoryValuationFilterDrawer,
 
+  // #withDialogActions
+  openDialog,
+
   // #ownProps
   numberFormat,
   onNumberFormatSubmit,
 }) {
   const { refetchSheet, isLoading } = useInventoryValuationContext();
 
-  // Handle filter toggle click.
+  // Handles filter toggle click.
   const handleFilterToggleClick = () => {
     toggleInventoryValuationFilterDrawer();
   };
 
-  // Handle re-calc button click.
+  // Handles re-calc button click.
   const handleRecalculateReport = () => {
     refetchSheet();
   };
 
-  // Handle number format submit.
+  // Handles number format submit.
   const handleNumberFormatSubmit = (numberFormat) => {
     saveInvoke(onNumberFormatSubmit, numberFormat);
   };
 
+  // Handles the print button click.
+  const handlePrintBtnClick = () => {
+    openDialog(DialogsName.InventoryValuationPdfPreview);
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -109,6 +119,7 @@ function InventoryValuationActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon="print-16" iconSize={16} />}
           text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
         />
         <Popover
           content={<InventoryValuationExportMenu />}
@@ -132,4 +143,5 @@ export default compose(
     isFilterDrawerOpen: inventoryValuationDrawerFilter,
   })),
   withInventoryValuationActions,
+  withDialogActions,
 )(InventoryValuationActionsBar);
diff --git a/packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationDialogs.tsx b/packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationDialogs.tsx
new file mode 100644
index 000000000..cc86d7de2
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationDialogs.tsx
@@ -0,0 +1,12 @@
+import { DialogsName } from '@/constants/dialogs';
+import { InventoryValuationPdfDialog } from './dialogs/InventoryValuationPdfDialog';
+
+export function InventoryValuationDialogs() {
+  return (
+    <>
+      <InventoryValuationPdfDialog
+        dialogName={DialogsName.InventoryValuationPdfPreview}
+      />
+    </>
+  );
+}
diff --git a/packages/webapp/src/containers/FinancialStatements/InventoryValuation/dialogs/InventoryValuationPdfDialog/InventoryValuationSheetPdfDialog.tsx b/packages/webapp/src/containers/FinancialStatements/InventoryValuation/dialogs/InventoryValuationPdfDialog/InventoryValuationSheetPdfDialog.tsx
new file mode 100644
index 000000000..1dd304c3a
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/InventoryValuation/dialogs/InventoryValuationPdfDialog/InventoryValuationSheetPdfDialog.tsx
@@ -0,0 +1,39 @@
+// @ts-nocheck
+import React, { lazy } from 'react';
+import classNames from 'classnames';
+
+import { Dialog, DialogSuspense } from '@/components';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import { CLASSES } from '@/constants/classes';
+import { compose } from '@/utils';
+
+// Lazy loading the content.
+const InventoryValuationPdfDialogContent = lazy(
+  () => import('./InventoryValuationSheetPdfDialogContent'),
+);
+
+/**
+ * Inventory valuation sheet pdf preview dialog.
+ * @returns {React.ReactNode}
+ */
+function InventoryValuationSheetPdfDialogRoot({ dialogName, payload, isOpen }) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={'Inventory Valuation Sheet Print Preview'}
+      className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      style={{ width: '1000px' }}
+    >
+      <DialogSuspense>
+        <InventoryValuationPdfDialogContent dialogName={dialogName} />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export const InventoryValuationPdfDialog = compose(withDialogRedux())(
+  InventoryValuationSheetPdfDialogRoot,
+);
diff --git a/packages/webapp/src/containers/FinancialStatements/InventoryValuation/dialogs/InventoryValuationPdfDialog/InventoryValuationSheetPdfDialogContent.tsx b/packages/webapp/src/containers/FinancialStatements/InventoryValuation/dialogs/InventoryValuationPdfDialog/InventoryValuationSheetPdfDialogContent.tsx
new file mode 100644
index 000000000..1f3fa57fa
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/InventoryValuation/dialogs/InventoryValuationPdfDialog/InventoryValuationSheetPdfDialogContent.tsx
@@ -0,0 +1,42 @@
+import {
+  DialogContent,
+  PdfDocumentPreview,
+  FormattedMessage as T,
+} from '@/components';
+import { useInventoryValuationPdf } from '@/hooks/query';
+import { AnchorButton } from '@blueprintjs/core';
+
+export default function InventoryValuationPdfDialogContent() {
+  const { isLoading, pdfUrl } = useInventoryValuationPdf();
+
+  return (
+    <DialogContent>
+      <div className="dialog__header-actions">
+        <AnchorButton
+          href={pdfUrl}
+          target={'__blank'}
+          minimal={true}
+          outlined={true}
+        >
+          <T id={'pdf_preview.preview.button'} />
+        </AnchorButton>
+
+        <AnchorButton
+          href={pdfUrl}
+          download={'invoice.pdf'}
+          minimal={true}
+          outlined={true}
+        >
+          <T id={'pdf_preview.download.button'} />
+        </AnchorButton>
+      </div>
+
+      <PdfDocumentPreview
+        height={760}
+        width={1000}
+        isLoading={isLoading}
+        url={pdfUrl}
+      />
+    </DialogContent>
+  );
+}
diff --git a/packages/webapp/src/containers/FinancialStatements/InventoryValuation/dialogs/InventoryValuationPdfDialog/index.ts b/packages/webapp/src/containers/FinancialStatements/InventoryValuation/dialogs/InventoryValuationPdfDialog/index.ts
new file mode 100644
index 000000000..f0667b122
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/InventoryValuation/dialogs/InventoryValuationPdfDialog/index.ts
@@ -0,0 +1 @@
+export * from './InventoryValuationSheetPdfDialog';
\ No newline at end of file
diff --git a/packages/webapp/src/containers/FinancialStatements/Journal/Journal.tsx b/packages/webapp/src/containers/FinancialStatements/Journal/Journal.tsx
index 9992e474f..1a9ce6aef 100644
--- a/packages/webapp/src/containers/FinancialStatements/Journal/Journal.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/Journal/Journal.tsx
@@ -15,6 +15,7 @@ import withJournalActions from './withJournalActions';
 
 import { useJournalQuery } from './utils';
 import { compose } from '@/utils';
+import { JournalDialogs } from './JournalDialogs';
 
 /**
  * Journal sheet.
@@ -23,7 +24,7 @@ function Journal({
   // #withJournalActions
   toggleJournalSheetFilter,
 }) {
-  const {query, setLocationQuery} = useJournalQuery();
+  const { query, setLocationQuery } = useJournalQuery();
 
   // Handle financial statement filter change.
   const handleFilterSubmit = useCallback(
@@ -60,6 +61,8 @@ function Journal({
           <JournalBody />
         </FinancialStatement>
       </DashboardPageContent>
+
+      <JournalDialogs />
     </JournalSheetProvider>
   );
 }
diff --git a/packages/webapp/src/containers/FinancialStatements/Journal/JournalActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/Journal/JournalActionsBar.tsx
index 5e49ee11a..6a424b02a 100644
--- a/packages/webapp/src/containers/FinancialStatements/Journal/JournalActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/Journal/JournalActionsBar.tsx
@@ -19,6 +19,8 @@ import withJournal from './withJournal';
 import { compose } from '@/utils';
 import { useJournalSheetContext } from './JournalProvider';
 import { JournalSheetExportMenu } from './components';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * Journal sheeet - Actions bar.
@@ -29,6 +31,9 @@ function JournalActionsBar({
 
   // #withJournalActions
   toggleJournalSheetFilter,
+
+  // #withDialogActions
+  openDialog,
 }) {
   const { refetchSheet } = useJournalSheetContext();
 
@@ -42,6 +47,11 @@ function JournalActionsBar({
     refetchSheet();
   };
 
+  // Handle the print button click.
+  const handlePrintBtnClick = () => {
+    openDialog(DialogsName.JournalPdfPreview);
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -85,6 +95,7 @@ function JournalActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon="print-16" iconSize={16} />}
           text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
         />
         <Popover
           content={<JournalSheetExportMenu />}
@@ -108,4 +119,5 @@ export default compose(
     isFilterDrawerOpen: journalSheetDrawerFilter,
   })),
   withJournalActions,
+  withDialogActions,
 )(JournalActionsBar);
diff --git a/packages/webapp/src/containers/FinancialStatements/Journal/JournalDialogs.tsx b/packages/webapp/src/containers/FinancialStatements/Journal/JournalDialogs.tsx
new file mode 100644
index 000000000..ce060d7f2
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/Journal/JournalDialogs.tsx
@@ -0,0 +1,10 @@
+import { DialogsName } from '@/constants/dialogs';
+import { JournalPdfDialog } from './dialogs/JournalPdfDialog';
+
+export function JournalDialogs() {
+  return (
+    <>
+      <JournalPdfDialog dialogName={DialogsName.JournalPdfPreview} />
+    </>
+  );
+}
diff --git a/packages/webapp/src/containers/FinancialStatements/Journal/dialogs/JournalPdfDialog/JournalPdfDialog.tsx b/packages/webapp/src/containers/FinancialStatements/Journal/dialogs/JournalPdfDialog/JournalPdfDialog.tsx
new file mode 100644
index 000000000..568c519c3
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/Journal/dialogs/JournalPdfDialog/JournalPdfDialog.tsx
@@ -0,0 +1,39 @@
+// @ts-nocheck
+import React, { lazy } from 'react';
+import classNames from 'classnames';
+
+import { Dialog, DialogSuspense } from '@/components';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import { CLASSES } from '@/constants/classes';
+import { compose } from '@/utils';
+
+// Lazy loading the content.
+const JournalPdfDialogContent = lazy(
+  () => import('./JournalPdfDialogContent'),
+);
+
+/**
+ * Journal sheet pdf preview dialog.
+ * @returns {React.ReactNode}
+ */
+function JournalPdfDialogRoot({ dialogName, payload, isOpen }) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={'Journal Print Preview'}
+      className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      style={{ width: '1000px' }}
+    >
+      <DialogSuspense>
+        <JournalPdfDialogContent dialogName={dialogName} />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export const JournalPdfDialog = compose(withDialogRedux())(
+  JournalPdfDialogRoot,
+);
diff --git a/packages/webapp/src/containers/FinancialStatements/Journal/dialogs/JournalPdfDialog/JournalPdfDialogContent.tsx b/packages/webapp/src/containers/FinancialStatements/Journal/dialogs/JournalPdfDialog/JournalPdfDialogContent.tsx
new file mode 100644
index 000000000..21d90aaa8
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/Journal/dialogs/JournalPdfDialog/JournalPdfDialogContent.tsx
@@ -0,0 +1,42 @@
+import {
+  DialogContent,
+  PdfDocumentPreview,
+  FormattedMessage as T,
+} from '@/components';
+import { useJournalSheetPdf } from '@/hooks/query';
+import { AnchorButton } from '@blueprintjs/core';
+
+export default function JournalSheetPdfDialogContent() {
+  const { isLoading, pdfUrl } = useJournalSheetPdf();
+
+  return (
+    <DialogContent>
+      <div className="dialog__header-actions">
+        <AnchorButton
+          href={pdfUrl}
+          target={'__blank'}
+          minimal={true}
+          outlined={true}
+        >
+          <T id={'pdf_preview.preview.button'} />
+        </AnchorButton>
+
+        <AnchorButton
+          href={pdfUrl}
+          download={'journal.pdf'}
+          minimal={true}
+          outlined={true}
+        >
+          <T id={'pdf_preview.download.button'} />
+        </AnchorButton>
+      </div>
+
+      <PdfDocumentPreview
+        height={760}
+        width={1000}
+        isLoading={isLoading}
+        url={pdfUrl}
+      />
+    </DialogContent>
+  );
+}
diff --git a/packages/webapp/src/containers/FinancialStatements/Journal/dialogs/JournalPdfDialog/index.ts b/packages/webapp/src/containers/FinancialStatements/Journal/dialogs/JournalPdfDialog/index.ts
new file mode 100644
index 000000000..0060e958b
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/Journal/dialogs/JournalPdfDialog/index.ts
@@ -0,0 +1 @@
+export * from './JournalPdfDialog';
\ No newline at end of file
diff --git a/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetDialogs.tsx b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetDialogs.tsx
index 1f83b0daf..5455e7684 100644
--- a/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetDialogs.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetDialogs.tsx
@@ -3,8 +3,10 @@ import { ProfitLossSheetPdfDialog } from './ProfitLossSheetPdfDialog';
 
 export function ProfitLossSheetDialogs() {
   return (
-    <ProfitLossSheetPdfDialog
-      dialogName={DialogsName.ProfitLossSheetPdfPreview}
-    />
+    <>
+      <ProfitLossSheetPdfDialog
+        dialogName={DialogsName.ProfitLossSheetPdfPreview}
+      />
+    </>
   );
 }
diff --git a/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetPdfDialog/ProfitLossSheetPdfDialogContent.tsx b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetPdfDialog/ProfitLossSheetPdfDialogContent.tsx
index 60d3df64a..e461133d9 100644
--- a/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetPdfDialog/ProfitLossSheetPdfDialogContent.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetPdfDialog/ProfitLossSheetPdfDialogContent.tsx
@@ -23,7 +23,7 @@ export default function ProfitLossSheetPdfDialogContent() {
 
         <AnchorButton
           href={pdfUrl}
-          download={'invoice.pdf'}
+          download={'profit_loss_sheet.pdf'}
           minimal={true}
           outlined={true}
         >
diff --git a/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItems.tsx b/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItems.tsx
index 7fa14d85d..f26a6c7ae 100644
--- a/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItems.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItems.tsx
@@ -13,6 +13,7 @@ import { usePurchasesByItemsQuery } from './utils';
 import { compose } from '@/utils';
 
 import withPurchasesByItemsActions from './withPurchasesByItemsActions';
+import { PurchasesByItemsDialogs } from './PurchasesByItemsDialogs';
 
 /**
  * Purchases by items.
@@ -67,6 +68,8 @@ function PurchasesByItems({
           <PurchasesByItemsBody />
         </FinancialStatement>
       </DashboardPageContent>
+
+      <PurchasesByItemsDialogs />
     </PurchasesByItemsProvider>
   );
 }
diff --git a/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsActionsBar.tsx
index c3859939e..8e88a5155 100644
--- a/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsActionsBar.tsx
@@ -16,9 +16,11 @@ import NumberFormatDropdown from '@/components/NumberFormatDropdown';
 
 import withPurchasesByItems from './withPurchasesByItems';
 import withPurchasesByItemsActions from './withPurchasesByItemsActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { compose, saveInvoke } from '@/utils';
 import { usePurchaseByItemsContext } from './PurchasesByItemsProvider';
 import { PurchasesByItemsExportMenu } from './components';
+import { DialogsName } from '@/constants/dialogs';
 
 function PurchasesByItemsActionsBar({
   // #withPurchasesByItems
@@ -27,6 +29,9 @@ function PurchasesByItemsActionsBar({
   // #withPurchasesByItemsActions
   togglePurchasesByItemsFilterDrawer,
 
+  // #withDialogActions
+  openDialog,
+
   // #ownProps
   numberFormat,
   onNumberFormatSubmit,
@@ -48,6 +53,11 @@ function PurchasesByItemsActionsBar({
     saveInvoke(onNumberFormatSubmit, values);
   };
 
+  // Handle print button click.
+  const handlePrintBtnClick = () => {
+    openDialog(DialogsName.PurchasesByItemsPdfPreview);
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -106,6 +116,7 @@ function PurchasesByItemsActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon="print-16" iconSize={16} />}
           text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
         />
         <Popover
           content={<PurchasesByItemsExportMenu />}
@@ -129,4 +140,5 @@ export default compose(
     purchasesByItemsDrawerFilter,
   })),
   withPurchasesByItemsActions,
+  withDialogActions,
 )(PurchasesByItemsActionsBar);
diff --git a/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsDialogs.tsx b/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsDialogs.tsx
new file mode 100644
index 000000000..e1c5de809
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsDialogs.tsx
@@ -0,0 +1,12 @@
+import { DialogsName } from '@/constants/dialogs';
+import { PurchasesByItemsPdfDialog } from './dialogs/PurchasesByItemsDialog';
+
+export function PurchasesByItemsDialogs() {
+  return (
+    <>
+      <PurchasesByItemsPdfDialog
+        dialogName={DialogsName.PurchasesByItemsPdfPreview}
+      />
+    </>
+  );
+}
diff --git a/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/dialogs/PurchasesByItemsDialog/PurchasesByItemsPdfDialog.tsx b/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/dialogs/PurchasesByItemsDialog/PurchasesByItemsPdfDialog.tsx
new file mode 100644
index 000000000..a4e9e6fca
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/dialogs/PurchasesByItemsDialog/PurchasesByItemsPdfDialog.tsx
@@ -0,0 +1,39 @@
+// @ts-nocheck
+import React, { lazy } from 'react';
+import classNames from 'classnames';
+
+import { Dialog, DialogSuspense } from '@/components';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import { CLASSES } from '@/constants/classes';
+import { compose } from '@/utils';
+
+// Lazy loading the content.
+const PurchasesByItemsPdfDialogContent = lazy(
+  () => import('./PurchasesByItemsPdfDialogContent'),
+);
+
+/**
+ * Purchases by items sheet pdf preview dialog.
+ * @returns {React.ReactNode}
+ */
+function PurchasesByItemsPdfDialogRoot({ dialogName, payload, isOpen }) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={'Purchases By Items Print Preview'}
+      className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      style={{ width: '1000px' }}
+    >
+      <DialogSuspense>
+        <PurchasesByItemsPdfDialogContent />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export const PurchasesByItemsPdfDialog = compose(withDialogRedux())(
+  PurchasesByItemsPdfDialogRoot,
+);
diff --git a/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/dialogs/PurchasesByItemsDialog/PurchasesByItemsPdfDialogContent.tsx b/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/dialogs/PurchasesByItemsDialog/PurchasesByItemsPdfDialogContent.tsx
new file mode 100644
index 000000000..016dbd927
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/dialogs/PurchasesByItemsDialog/PurchasesByItemsPdfDialogContent.tsx
@@ -0,0 +1,42 @@
+import { AnchorButton } from '@blueprintjs/core';
+import {
+  DialogContent,
+  PdfDocumentPreview,
+  FormattedMessage as T,
+} from '@/components';
+import { usePurchasesByItemsPdfExport } from '@/hooks/query';
+
+export default function PurchasesByItemsPdfDialogContent() {
+  const { isLoading, pdfUrl } = usePurchasesByItemsPdfExport();
+
+  return (
+    <DialogContent>
+      <div className="dialog__header-actions">
+        <AnchorButton
+          href={pdfUrl}
+          target={'__blank'}
+          minimal={true}
+          outlined={true}
+        >
+          <T id={'pdf_preview.preview.button'} />
+        </AnchorButton>
+
+        <AnchorButton
+          href={pdfUrl}
+          download={'invoice.pdf'}
+          minimal={true}
+          outlined={true}
+        >
+          <T id={'pdf_preview.download.button'} />
+        </AnchorButton>
+      </div>
+
+      <PdfDocumentPreview
+        height={760}
+        width={1000}
+        isLoading={isLoading}
+        url={pdfUrl}
+      />
+    </DialogContent>
+  );
+}
diff --git a/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/dialogs/PurchasesByItemsDialog/index.ts b/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/dialogs/PurchasesByItemsDialog/index.ts
new file mode 100644
index 000000000..cdb558907
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/dialogs/PurchasesByItemsDialog/index.ts
@@ -0,0 +1 @@
+export * from './PurchasesByItemsPdfDialog';
\ No newline at end of file
diff --git a/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItems.tsx b/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItems.tsx
index 3382b3072..56fe27028 100644
--- a/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItems.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItems.tsx
@@ -13,6 +13,7 @@ import withSalesByItemsActions from './withSalesByItemsActions';
 
 import { useSalesByItemsQuery } from './utils';
 import { compose } from '@/utils';
+import { SalesByItemsDialogs } from './SalesByitemsDialogs';
 
 /**
  * Sales by items.
@@ -66,6 +67,8 @@ function SalesByItems({
           <SalesByItemsBody />
         </FinancialStatement>
       </DashboardPageContent>
+
+      <SalesByItemsDialogs />
     </SalesByItemProvider>
   );
 }
diff --git a/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsActionsBar.tsx
index 9ac5a46a0..649bda2e5 100644
--- a/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsActionsBar.tsx
@@ -20,6 +20,8 @@ import withSalesByItemsActions from './withSalesByItemsActions';
 import { compose, saveInvoke } from '@/utils';
 import { useSalesByItemsContext } from './SalesByItemProvider';
 import { SalesByItemsSheetExportMenu } from './components';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { DialogsName } from '@/constants/dialogs';
 
 function SalesByItemsActionsBar({
   // #withSalesByItems
@@ -28,6 +30,9 @@ function SalesByItemsActionsBar({
   // #withSalesByItemsActions
   toggleSalesByItemsFilterDrawer,
 
+  // #withDialogActions
+  openDialog,
+
   // #ownProps
   numberFormat,
   onNumberFormatSubmit,
@@ -48,6 +53,11 @@ function SalesByItemsActionsBar({
     saveInvoke(onNumberFormatSubmit, values);
   };
 
+  // Handle the print button click.
+  const handlePrintBtnClick = () => {
+    openDialog(DialogsName.SalesByItemsPdfPreview);
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -108,6 +118,7 @@ function SalesByItemsActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon="print-16" iconSize={16} />}
           text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
         />
         <Popover
           content={<SalesByItemsSheetExportMenu />}
@@ -131,4 +142,5 @@ export default compose(
     salesByItemsDrawerFilter,
   })),
   withSalesByItemsActions,
+  withDialogActions,
 )(SalesByItemsActionsBar);
diff --git a/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByitemsDialogs.tsx b/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByitemsDialogs.tsx
new file mode 100644
index 000000000..cb70adb03
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByitemsDialogs.tsx
@@ -0,0 +1,10 @@
+import { DialogsName } from '@/constants/dialogs';
+import { SalesByItemsPdfDialog } from './dialogs/SalesByItemsPdfDialog';
+
+export function SalesByItemsDialogs() {
+  return (
+    <>
+      <SalesByItemsPdfDialog dialogName={DialogsName.SalesByItemsPdfPreview} />
+    </>
+  );
+}
diff --git a/packages/webapp/src/containers/FinancialStatements/SalesByItems/dialogs/SalesByItemsPdfDialog/SalesByItemsPdfDialog.tsx b/packages/webapp/src/containers/FinancialStatements/SalesByItems/dialogs/SalesByItemsPdfDialog/SalesByItemsPdfDialog.tsx
new file mode 100644
index 000000000..04c04323e
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/SalesByItems/dialogs/SalesByItemsPdfDialog/SalesByItemsPdfDialog.tsx
@@ -0,0 +1,39 @@
+// @ts-nocheck
+import React, { lazy } from 'react';
+import classNames from 'classnames';
+
+import { Dialog, DialogSuspense } from '@/components';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import { CLASSES } from '@/constants/classes';
+import { compose } from '@/utils';
+
+// Lazy loading the content.
+const SalesByItemsPdfDialogContent = lazy(
+  () => import('./SalesByItemsPdfDialogContent'),
+);
+
+/**
+ * Sales by items sheet pdf preview dialog.
+ * @returns {React.ReactNode}
+ */
+function SalesByItemsPdfDialogRoot({ dialogName, payload, isOpen }) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={'Sales By Items Print Preview'}
+      className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      style={{ width: '1000px' }}
+    >
+      <DialogSuspense>
+        <SalesByItemsPdfDialogContent dialogName={dialogName} />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export const SalesByItemsPdfDialog = compose(withDialogRedux())(
+  SalesByItemsPdfDialogRoot,
+);
diff --git a/packages/webapp/src/containers/FinancialStatements/SalesByItems/dialogs/SalesByItemsPdfDialog/SalesByItemsPdfDialogContent.tsx b/packages/webapp/src/containers/FinancialStatements/SalesByItems/dialogs/SalesByItemsPdfDialog/SalesByItemsPdfDialogContent.tsx
new file mode 100644
index 000000000..72bcfac0b
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/SalesByItems/dialogs/SalesByItemsPdfDialog/SalesByItemsPdfDialogContent.tsx
@@ -0,0 +1,42 @@
+import {
+  DialogContent,
+  PdfDocumentPreview,
+  FormattedMessage as T,
+} from '@/components';
+import { useSalesByItemsPdfExport } from '@/hooks/query';
+import { AnchorButton } from '@blueprintjs/core';
+
+export default function SalesByItemsPdfDialogContent() {
+  const { isLoading, pdfUrl } = useSalesByItemsPdfExport();
+
+  return (
+    <DialogContent>
+      <div className="dialog__header-actions">
+        <AnchorButton
+          href={pdfUrl}
+          target={'__blank'}
+          minimal={true}
+          outlined={true}
+        >
+          <T id={'pdf_preview.preview.button'} />
+        </AnchorButton>
+
+        <AnchorButton
+          href={pdfUrl}
+          download={'sales_by_items.pdf'}
+          minimal={true}
+          outlined={true}
+        >
+          <T id={'pdf_preview.download.button'} />
+        </AnchorButton>
+      </div>
+
+      <PdfDocumentPreview
+        height={760}
+        width={1000}
+        isLoading={isLoading}
+        url={pdfUrl}
+      />
+    </DialogContent>
+  );
+}
diff --git a/packages/webapp/src/containers/FinancialStatements/SalesByItems/dialogs/SalesByItemsPdfDialog/index.ts b/packages/webapp/src/containers/FinancialStatements/SalesByItems/dialogs/SalesByItemsPdfDialog/index.ts
new file mode 100644
index 000000000..337c865c1
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/SalesByItems/dialogs/SalesByItemsPdfDialog/index.ts
@@ -0,0 +1 @@
+export * from './SalesByItemsPdfDialog';
\ No newline at end of file
diff --git a/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilityPdfDialog/SalesTaxLiabilityPdfDialog.tsx b/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilityPdfDialog/SalesTaxLiabilityPdfDialog.tsx
new file mode 100644
index 000000000..8079380d4
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilityPdfDialog/SalesTaxLiabilityPdfDialog.tsx
@@ -0,0 +1,41 @@
+// @ts-nocheck
+import React, { lazy } from 'react';
+import classNames from 'classnames';
+
+import { Dialog, DialogSuspense } from '@/components';
+
+import withDialogRedux from '@/components/DialogReduxConnect';
+
+import { CLASSES } from '@/constants/classes';
+import { compose } from '@/utils';
+
+// Lazy loading the content.
+const SalesTaxLiabilityPdfDialogContent = lazy(
+  () => import('./SalesTaxLiabilityPdfDialogContent'),
+);
+
+/**
+ * Cashflow sheet pdf preview dialog.
+ * @returns {React.ReactNode}
+ */
+function SalesTaxLiabilityPdfDialogRoot({ dialogName, payload, isOpen }) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={'Sales Tax Liability Print Preview'}
+      className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      style={{ width: '1000px' }}
+    >
+      <DialogSuspense>
+        <SalesTaxLiabilityPdfDialogContent />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export const SalesTaxLiabiltiyPdfDialog = compose(withDialogRedux())(
+  SalesTaxLiabilityPdfDialogRoot,
+);
diff --git a/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilityPdfDialog/SalesTaxLiabilityPdfDialogContent.tsx b/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilityPdfDialog/SalesTaxLiabilityPdfDialogContent.tsx
new file mode 100644
index 000000000..7df72ef2e
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilityPdfDialog/SalesTaxLiabilityPdfDialogContent.tsx
@@ -0,0 +1,42 @@
+import {
+  DialogContent,
+  PdfDocumentPreview,
+  FormattedMessage as T,
+} from '@/components';
+import { AnchorButton } from '@blueprintjs/core';
+import { useSalesTaxLiabilitySummaryPdf } from '@/hooks/query';
+
+export default function SalesTaxLiabilityPdfDialogContent() {
+  const { isLoading, pdfUrl } = useSalesTaxLiabilitySummaryPdf();
+
+  return (
+    <DialogContent>
+      <div className="dialog__header-actions">
+        <AnchorButton
+          href={pdfUrl}
+          target={'__blank'}
+          minimal={true}
+          outlined={true}
+        >
+          <T id={'pdf_preview.preview.button'} />
+        </AnchorButton>
+
+        <AnchorButton
+          href={pdfUrl}
+          download={'profit_loss_sheet.pdf'}
+          minimal={true}
+          outlined={true}
+        >
+          <T id={'pdf_preview.download.button'} />
+        </AnchorButton>
+      </div>
+
+      <PdfDocumentPreview
+        height={760}
+        width={1000}
+        isLoading={isLoading}
+        url={pdfUrl}
+      />
+    </DialogContent>
+  );
+}
diff --git a/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilityPdfDialog/index.ts b/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilityPdfDialog/index.ts
new file mode 100644
index 000000000..9b358acce
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilityPdfDialog/index.ts
@@ -0,0 +1 @@
+export * from './SalesTaxLiabilityPdfDialog';
\ No newline at end of file
diff --git a/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummary.tsx b/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummary.tsx
index 5a187c1da..ed4773cb4 100644
--- a/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummary.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummary.tsx
@@ -10,8 +10,10 @@ import SalesTaxLiabilitySummaryActionsBar from './SalesTaxLiabilitySummaryAction
 import { SalesTaxLiabilitySummaryBoot } from './SalesTaxLiabilitySummaryBoot';
 import { SalesTaxLiabilitySummaryBody } from './SalesTaxLiabilitySummaryBody';
 import { useSalesTaxLiabilitySummaryQuery } from './utils';
+import { SalesTaxLiabiltiyPdfDialog } from './SalesTaxLiabilityPdfDialog';
 import withSalesTaxLiabilitySummaryActions from './withSalesTaxLiabilitySummaryActions';
 import { compose } from '@/utils';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * Sales tax liability summary.
@@ -63,6 +65,10 @@ function SalesTaxLiabilitySummary({
           <SalesTaxLiabilitySummaryBody />
         </FinancialStatement>
       </DashboardPageContent>
+
+      <SalesTaxLiabiltiyPdfDialog
+        dialogName={DialogsName.SalesTaxLiabilitySummaryPdfPreview}
+      />
     </SalesTaxLiabilitySummaryBoot>
   );
 }
diff --git a/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryActionsBar.tsx
index d4d0de97e..a911d5693 100644
--- a/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryActionsBar.tsx
@@ -19,6 +19,8 @@ import { useSalesTaxLiabilitySummaryContext } from './SalesTaxLiabilitySummaryBo
 import withSalesTaxLiabilitySummary from './withSalesTaxLiabilitySummary';
 import withSalesTaxLiabilitySummaryActions from './withSalesTaxLiabilitySummaryActions';
 import { SalesTaxLiabilityExportMenu } from './components';
+import { DialogsName } from '@/constants/dialogs';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
 
 /**
  * Sales tax liability summary - actions bar.
@@ -30,6 +32,9 @@ function SalesTaxLiabilitySummaryActionsBar({
   // #withSalesTaxLiabilitySummaryActions
   toggleSalesTaxLiabilitySummaryFilterDrawer: toggleFilterDrawer,
 
+  // #withDialogActions
+  openDialog,
+
   // #ownProps
   numberFormat,
   onNumberFormatSubmit,
@@ -49,6 +54,11 @@ function SalesTaxLiabilitySummaryActionsBar({
   const handleNumberFormatSubmit = (values) => {
     saveInvoke(onNumberFormatSubmit, values);
   };
+  // Handle the print button click.
+  const handlePrintBtnClick = () => {
+    openDialog(DialogsName.SalesTaxLiabilitySummaryPdfPreview)    
+  };
+
 
   return (
     <DashboardActionsBar>
@@ -113,6 +123,7 @@ function SalesTaxLiabilitySummaryActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon="print-16" iconSize={16} />}
           text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
         />
         <Popover
           content={<SalesTaxLiabilityExportMenu />}
@@ -136,4 +147,5 @@ export default compose(
     salesTaxLiabilitySummaryFilter,
   })),
   withSalesTaxLiabilitySummaryActions,
+  withDialogActions
 )(SalesTaxLiabilitySummaryActionsBar);
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 7a05ed7e6..f3963bf5f 100644
--- a/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/dialogs/TrialBalanceSheetPdfDialog/TrialBalanceSheetPdfDialogContent.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/dialogs/TrialBalanceSheetPdfDialog/TrialBalanceSheetPdfDialogContent.tsx
@@ -23,7 +23,7 @@ export default function TrialBalanceSheetPdfDialogContent() {
 
         <AnchorButton
           href={pdfUrl}
-          download={'invoice.pdf'}
+          download={'trial_balance_sheet.pdf'}
           minimal={true}
           outlined={true}
         >
diff --git a/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorBalanceDialogs.tsx b/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorBalanceDialogs.tsx
new file mode 100644
index 000000000..ac11a3ba9
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorBalanceDialogs.tsx
@@ -0,0 +1,10 @@
+import { DialogsName } from '@/constants/dialogs';
+import { VendorBalancePdfDialog } from './dialogs/VendorBalancePdfDialog';
+
+export function VendorBalanceDialogs() {
+  return (
+    <>
+      <VendorBalancePdfDialog dialogName={DialogsName.VendorBalancePdfPreview} />
+    </>
+  );
+}
diff --git a/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummary.tsx b/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummary.tsx
index dcf4e2486..b23eb2503 100644
--- a/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummary.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummary.tsx
@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import moment from 'moment';
 
 import { FinancialStatement, DashboardPageContent } from '@/components';
@@ -14,6 +14,7 @@ import { VendorBalanceSummaryBody } from './VendorsBalanceSummaryBody';
 import withVendorsBalanceSummaryActions from './withVendorsBalanceSummaryActions';
 
 import { useVendorsBalanceSummaryQuery } from './utils';
+import { VendorBalanceDialogs } from './VendorBalanceDialogs';
 import { compose } from '@/utils';
 
 /**
@@ -64,6 +65,8 @@ function VendorsBalanceSummary({
           <VendorBalanceSummaryBody />
         </FinancialStatement>
       </DashboardPageContent>
+
+      <VendorBalanceDialogs />
     </VendorsBalanceSummaryProvider>
   );
 }
diff --git a/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryActionsBar.tsx
index 7e37ba792..09d8740f7 100644
--- a/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryActionsBar.tsx
@@ -20,6 +20,8 @@ import { useVendorsBalanceSummaryContext } from './VendorsBalanceSummaryProvider
 
 import { saveInvoke, compose } from '@/utils';
 import { VendorSummarySheetExportMenu } from './components';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * Vendors balance summary action bar.
@@ -34,6 +36,9 @@ function VendorsBalanceSummaryActionsBar({
 
   // #withVendorsBalanceSummaryActions
   toggleVendorSummaryFilterDrawer,
+
+  // #withDialogActions
+  openDialog,
 }) {
   const { isVendorsBalanceLoading, refetch } =
     useVendorsBalanceSummaryContext();
@@ -52,6 +57,11 @@ function VendorsBalanceSummaryActionsBar({
     saveInvoke(onNumberFormatSubmit, numberFormat);
   };
 
+  // Handle the print button click.
+  const handlePrintBtnClick = () => {
+    openDialog(DialogsName.VendorBalancePdfPreview);
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -106,6 +116,7 @@ function VendorsBalanceSummaryActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon="print-16" iconSize={16} />}
           text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
         />
         <Popover
           content={<VendorSummarySheetExportMenu />}
@@ -128,4 +139,5 @@ export default compose(
   withVendorsBalanceSummary(({ VendorsSummaryFilterDrawer }) => ({
     isFilterDrawerOpen: VendorsSummaryFilterDrawer,
   })),
+  withDialogActions,
 )(VendorsBalanceSummaryActionsBar);
diff --git a/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/dialogs/VendorBalancePdfDialog/VendorBalancePdfDialog.tsx b/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/dialogs/VendorBalancePdfDialog/VendorBalancePdfDialog.tsx
new file mode 100644
index 000000000..71b013704
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/dialogs/VendorBalancePdfDialog/VendorBalancePdfDialog.tsx
@@ -0,0 +1,39 @@
+// @ts-nocheck
+import React, { lazy } from 'react';
+import classNames from 'classnames';
+
+import { Dialog, DialogSuspense } from '@/components';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import { CLASSES } from '@/constants/classes';
+import { compose } from '@/utils';
+
+// Lazy loading the content.
+const VendorBalancePdfDialogContent = lazy(
+  () => import('./VendorBalancePdfDialogContent'),
+);
+
+/**
+ * Vendor balance sheet pdf preview dialog.
+ * @returns {React.ReactNode}
+ */
+function VendorBalancePdfDialogRoot({ dialogName, payload, isOpen }) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={'Vendor Balance Print Preview'}
+      className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      style={{ width: '1000px' }}
+    >
+      <DialogSuspense>
+        <VendorBalancePdfDialogContent />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export const VendorBalancePdfDialog = compose(withDialogRedux())(
+  VendorBalancePdfDialogRoot,
+);
diff --git a/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/dialogs/VendorBalancePdfDialog/VendorBalancePdfDialogContent.tsx b/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/dialogs/VendorBalancePdfDialog/VendorBalancePdfDialogContent.tsx
new file mode 100644
index 000000000..037ccb6e2
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/dialogs/VendorBalancePdfDialog/VendorBalancePdfDialogContent.tsx
@@ -0,0 +1,42 @@
+import {
+  DialogContent,
+  PdfDocumentPreview,
+  FormattedMessage as T,
+} from '@/components';
+import { useVendorBalanceSummaryPdfExport } from '@/hooks/query';
+import { AnchorButton } from '@blueprintjs/core';
+
+export default function VendorTransactionsPdfDialogContent() {
+  const { isLoading, pdfUrl } = useVendorBalanceSummaryPdfExport();
+
+  return (
+    <DialogContent>
+      <div className="dialog__header-actions">
+        <AnchorButton
+          href={pdfUrl}
+          target={'__blank'}
+          minimal={true}
+          outlined={true}
+        >
+          <T id={'pdf_preview.preview.button'} />
+        </AnchorButton>
+
+        <AnchorButton
+          href={pdfUrl}
+          download={'invoice.pdf'}
+          minimal={true}
+          outlined={true}
+        >
+          <T id={'pdf_preview.download.button'} />
+        </AnchorButton>
+      </div>
+
+      <PdfDocumentPreview
+        height={760}
+        width={1000}
+        isLoading={isLoading}
+        url={pdfUrl}
+      />
+    </DialogContent>
+  );
+}
diff --git a/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/dialogs/VendorBalancePdfDialog/index.ts b/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/dialogs/VendorBalancePdfDialog/index.ts
new file mode 100644
index 000000000..11e72915b
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/dialogs/VendorBalancePdfDialog/index.ts
@@ -0,0 +1 @@
+export * from './VendorBalancePdfDialog';
\ No newline at end of file
diff --git a/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorTransactionsDialogs.tsx b/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorTransactionsDialogs.tsx
new file mode 100644
index 000000000..5ab38fc19
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorTransactionsDialogs.tsx
@@ -0,0 +1,12 @@
+import { DialogsName } from '@/constants/dialogs';
+import { VendorTransactionsPdfDialog } from './dialogs/VendorTransactionsPdfDialog';
+
+export function VendorTransactionsDialogs() {
+  return (
+    <>
+      <VendorTransactionsPdfDialog
+        dialogName={DialogsName.VendorTransactionsPdfPreview}
+      />
+    </>
+  );
+}
diff --git a/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactions.tsx b/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactions.tsx
index 69cb6d506..6a80d31e0 100644
--- a/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactions.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactions.tsx
@@ -14,6 +14,7 @@ import withVendorsTransactionsActions from './withVendorsTransactionsActions';
 
 import { compose } from '@/utils';
 import { useVendorsTransactionsQuery } from './_utils';
+import { VendorBalanceDialogs } from '../VendorsBalanceSummary/VendorBalanceDialogs';
 
 /**
  * Vendors transactions.
@@ -65,6 +66,8 @@ function VendorsTransactions({
           <VendorsTransactionsBody />
         </FinancialStatement>
       </DashboardPageContent>
+
+      <VendorBalanceDialogs />
     </VendorsTransactionsProvider>
   );
 }
diff --git a/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsActionsBar.tsx
index 8b5fbc600..f426fbd53 100644
--- a/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsActionsBar.tsx
@@ -20,6 +20,8 @@ import withVendorsTransactionsActions from './withVendorsTransactionsActions';
 
 import { compose, saveInvoke } from '@/utils';
 import { VendorTransactionsExportMenu } from './components';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * vendors transactions actions bar.
@@ -34,6 +36,9 @@ function VendorsTransactionsActionsBar({
 
   //#withVendorsTransactionsActions
   toggleVendorsTransactionsFilterDrawer,
+
+  //#withDialogActions
+  openDialog
 }) {
   const { isVendorsTransactionsLoading, refetch } =
     useVendorsTransactionsContext();
@@ -53,6 +58,11 @@ function VendorsTransactionsActionsBar({
     saveInvoke(onNumberFormatSubmit, values);
   };
 
+  // Handle the print button click.
+  const handlePrintBtnClick = () => {
+    openDialog(DialogsName.VendorTransactionsPdfPreview)
+  }
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -114,6 +124,7 @@ function VendorsTransactionsActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon="print-16" iconSize={16} />}
           text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
         />
         <Popover
           content={<VendorTransactionsExportMenu />}
@@ -136,4 +147,5 @@ export default compose(
     isFilterDrawerOpen: vendorsTransactionsDrawerFilter,
   })),
   withVendorsTransactionsActions,
+  withDialogActions
 )(VendorsTransactionsActionsBar);
diff --git a/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/dialogs/VendorTransactionsPdfDialog/VendorTransactionsPdfDialog.tsx b/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/dialogs/VendorTransactionsPdfDialog/VendorTransactionsPdfDialog.tsx
new file mode 100644
index 000000000..e03e8d528
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/dialogs/VendorTransactionsPdfDialog/VendorTransactionsPdfDialog.tsx
@@ -0,0 +1,39 @@
+// @ts-nocheck
+import React, { lazy } from 'react';
+import classNames from 'classnames';
+
+import { Dialog, DialogSuspense } from '@/components';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import { CLASSES } from '@/constants/classes';
+import { compose } from '@/utils';
+
+// Lazy loading the content.
+const InventoryValuationPdfDialogContent = lazy(
+  () => import('./VendorTransactionsPdfDialogContent'),
+);
+
+/**
+ * Balance sheet pdf preview dialog.
+ * @returns {React.ReactNode}
+ */
+function VendorTransactionsPdfDialogRoot({ dialogName, payload, isOpen }) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={'Vendor Transactions Print Preview'}
+      className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      style={{ width: '1000px' }}
+    >
+      <DialogSuspense>
+        <InventoryValuationPdfDialogContent dialogName={dialogName} />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export const VendorTransactionsPdfDialog = compose(withDialogRedux())(
+  VendorTransactionsPdfDialogRoot,
+);
diff --git a/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/dialogs/VendorTransactionsPdfDialog/VendorTransactionsPdfDialogContent.tsx b/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/dialogs/VendorTransactionsPdfDialog/VendorTransactionsPdfDialogContent.tsx
new file mode 100644
index 000000000..a3e7f5191
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/dialogs/VendorTransactionsPdfDialog/VendorTransactionsPdfDialogContent.tsx
@@ -0,0 +1,42 @@
+import {
+  DialogContent,
+  PdfDocumentPreview,
+  FormattedMessage as T,
+} from '@/components';
+import { useTransactionsByVendorsPdf } from '@/hooks/query';
+import { AnchorButton } from '@blueprintjs/core';
+
+export default function VendorTransactionsPdfDialogContent() {
+  const { isLoading, pdfUrl } = useTransactionsByVendorsPdf();
+
+  return (
+    <DialogContent>
+      <div className="dialog__header-actions">
+        <AnchorButton
+          href={pdfUrl}
+          target={'__blank'}
+          minimal={true}
+          outlined={true}
+        >
+          <T id={'pdf_preview.preview.button'} />
+        </AnchorButton>
+
+        <AnchorButton
+          href={pdfUrl}
+          download={'invoice.pdf'}
+          minimal={true}
+          outlined={true}
+        >
+          <T id={'pdf_preview.download.button'} />
+        </AnchorButton>
+      </div>
+
+      <PdfDocumentPreview
+        height={760}
+        width={1000}
+        isLoading={isLoading}
+        url={pdfUrl}
+      />
+    </DialogContent>
+  );
+}
diff --git a/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/dialogs/VendorTransactionsPdfDialog/index.ts b/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/dialogs/VendorTransactionsPdfDialog/index.ts
new file mode 100644
index 000000000..36e45d5b7
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/dialogs/VendorTransactionsPdfDialog/index.ts
@@ -0,0 +1 @@
+export * from './VendorTransactionsPdfDialog';
\ No newline at end of file