feat(webapp): wip printing financial reports

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

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

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

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

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

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

packages/webapp/src/containers/FinancialStatements/APAgingSummary/dialogs/APAgingSummaryPdfDialog/index.ts

@@ -0,0 +1 @@
+export * from './APAgingSummaryPdfDialog';

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 handleFilterSubmit = useCallback(
-    const _filter = {
+    (filter) => {
-      ...filter,
+      const _filter = {
-      asDate: moment(filter.asDate).format('YYYY-MM-DD'),
+        ...filter,
-    };
+        asDate: moment(filter.asDate).format('YYYY-MM-DD'),
-    setLocationQuery(_filter);
+      };
-  }, [setLocationQuery]);
+      setLocationQuery(_filter);
+    },
+    [setLocationQuery],
+  );
 
   // Handle number format submit.
   const handleNumberFormatSubmit = (numberFormat) => {
@@ -60,6 +65,10 @@ function ReceivableAgingSummarySheet({
           <ARAgingSummaryBody />
         </FinancialStatement>
       </DashboardPageContent>
+
+      <ARAgingSummaryPdfDialog
+        dialogName={DialogsName.ARAgingSummaryPdfPreview}
+      />
     </ARAgingSummaryProvider>
   );
 }

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

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

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

packages/webapp/src/containers/FinancialStatements/ARAgingSummary/dialogs/ARAgingSummaryPdfDialog/index.ts

@@ -0,0 +1 @@
+export * from './ARAgingSummaryPdfDialog';

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

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
+        <CashflowSheetPdfDialogContent />
-          dialogName={dialogName}
-          subscriptionForm={payload}
-        />
       </DialogSuspense>
     </Dialog>
   );

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

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

packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomerBalancePdfDialog/index.ts

@@ -0,0 +1 @@
+export * from './CustomerBalanceSummaryPdfDialog';

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

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

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

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

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

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

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

packages/webapp/src/containers/FinancialStatements/CustomersTransactions/dialogs/CustomerTransactionsPdfDialog/index.ts

@@ -0,0 +1 @@
+export * from './CustomerTransactionsPdfDialog';

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

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

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

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

packages/webapp/src/containers/FinancialStatements/GeneralLedger/dialogs/GeneralLedgerPdfDialog/index.ts

@@ -0,0 +1 @@
+export * from './GeneralLedgerPdfDialog';

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

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

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

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

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

packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/dialogs/InventoryItemDetailsPdfDialog/index.ts

@@ -0,0 +1 @@
+export * from './InventoryItemDetailsPdfDialog';

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

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

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

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

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

packages/webapp/src/containers/FinancialStatements/InventoryValuation/dialogs/InventoryValuationPdfDialog/index.ts

@@ -0,0 +1 @@
+export * from './InventoryValuationSheetPdfDialog';

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

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

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

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

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

packages/webapp/src/containers/FinancialStatements/Journal/dialogs/JournalPdfDialog/index.ts

@@ -0,0 +1 @@
+export * from './JournalPdfDialog';

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

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

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

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

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

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

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

packages/webapp/src/containers/FinancialStatements/PurchasesByItems/dialogs/PurchasesByItemsDialog/index.ts

@@ -0,0 +1 @@
+export * from './PurchasesByItemsPdfDialog';

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

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

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

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

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

packages/webapp/src/containers/FinancialStatements/SalesByItems/dialogs/SalesByItemsPdfDialog/index.ts

@@ -0,0 +1 @@
+export * from './SalesByItemsPdfDialog';

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

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

packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilityPdfDialog/index.ts

@@ -0,0 +1 @@
+export * from './SalesTaxLiabilityPdfDialog';

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

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

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

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

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

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

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

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

packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/dialogs/VendorBalancePdfDialog/index.ts

@@ -0,0 +1 @@
+export * from './VendorBalancePdfDialog';

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

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

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

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

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

packages/webapp/src/containers/FinancialStatements/VendorsTransactions/dialogs/VendorTransactionsPdfDialog/index.ts

@@ -0,0 +1 @@
+export * from './VendorTransactionsPdfDialog';