From 09ad725a6779efd9b87528c251a9c8fcdb16a984 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Sun, 11 Feb 2024 16:12:41 +0200
Subject: [PATCH] feat(webapp): wip print preview financial reports

---
 .../src/components/FormattedMessage/index.tsx |  9 +++-
 packages/webapp/src/constants/dialogs.ts      |  5 +++
 .../BalanceSheet/BalanceSheet.tsx             |  3 ++
 .../BalanceSheet/BalanceSheetActionsBar.tsx   | 11 +++++
 .../BalanceSheet/BalanceSheetDialogs.tsx      | 10 +++++
 .../BalanceSheetPdfDialog.tsx                 | 39 ++++++++++++++++
 .../BalanceSheetPdfDialogContent.tsx          | 42 ++++++++++++++++++
 .../dialogs/BalanceSheetPdfDialog/index.ts    |  1 +
 .../CashFlowStatement/CashFlowStatement.tsx   |  3 ++
 .../CashFlowStatementActionsBar.tsx           | 12 +++++
 .../CashflowSheetDialogs.tsx                  | 12 +++++
 .../CashflowSheetPdfDialog.tsx                | 44 +++++++++++++++++++
 .../CashflowSheetPdfDialogContent.tsx         | 42 ++++++++++++++++++
 .../CashflowSheetPdfDialog/index.ts           |  1 +
 .../ProfitLossSheet/ProfitLossActionsBar.tsx  | 11 +++++
 .../ProfitLossSheet/ProfitLossSheet.tsx       |  3 ++
 .../ProfitLossSheetDialogs.tsx                | 10 +++++
 .../ProfitLossSheetPdfDialog.tsx              | 44 +++++++++++++++++++
 .../ProfitLossSheetPdfDialogContent.tsx       | 42 ++++++++++++++++++
 .../ProfitLossSheetPdfDialog/index.ts         |  1 +
 .../TrialBalanceActionsBar.tsx                | 12 +++++
 .../TrialBalanceSheet/TrialBalanceSheet.tsx   |  3 ++
 .../TrialBalanceSheetDialogs.tsx              | 12 +++++
 .../TrialBalanceSheetPdfDialog.tsx            | 44 +++++++++++++++++++
 .../TrialBalanceSheetPdfDialogContent.tsx     | 42 ++++++++++++++++++
 .../TrialBalanceSheetPdfDialog/index.ts       |  1 +
 .../src/hooks/query/financialReports.tsx      | 30 +++++++++++++
 27 files changed, 487 insertions(+), 2 deletions(-)
 create mode 100644 packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetDialogs.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/BalanceSheet/dialogs/BalanceSheetPdfDialog/BalanceSheetPdfDialog.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/BalanceSheet/dialogs/BalanceSheetPdfDialog/BalanceSheetPdfDialogContent.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/BalanceSheet/dialogs/BalanceSheetPdfDialog/index.ts
 create mode 100644 packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashflowSheetDialogs.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashflowSheetPdfDialog/CashflowSheetPdfDialog.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashflowSheetPdfDialog/CashflowSheetPdfDialogContent.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashflowSheetPdfDialog/index.ts
 create mode 100644 packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetDialogs.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetPdfDialog/ProfitLossSheetPdfDialog.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetPdfDialog/ProfitLossSheetPdfDialogContent.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetPdfDialog/index.ts
 create mode 100644 packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetDialogs.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/dialogs/TrialBalanceSheetPdfDialog/TrialBalanceSheetPdfDialog.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/dialogs/TrialBalanceSheetPdfDialog/TrialBalanceSheetPdfDialogContent.tsx
 create mode 100644 packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/dialogs/TrialBalanceSheetPdfDialog/index.ts

diff --git a/packages/webapp/src/components/FormattedMessage/index.tsx b/packages/webapp/src/components/FormattedMessage/index.tsx
index b23418325..6dd6ff98b 100644
--- a/packages/webapp/src/components/FormattedMessage/index.tsx
+++ b/packages/webapp/src/components/FormattedMessage/index.tsx
@@ -1,8 +1,13 @@
 // @ts-nocheck
 import intl from 'react-intl-universal';
 
-export function FormattedMessage({ id, values }) {
-  return intl.get(id, values);
+interface FormattedMessageProps {
+  id: string;
+  values?: Record<string, any>;
+}
+
+export function FormattedMessage({ id, values }: FormattedMessageProps) {
+  return <>{intl.get(id, values)}</>;
 }
 
 export function FormattedHTMLMessage({ ...args }) {
diff --git a/packages/webapp/src/constants/dialogs.ts b/packages/webapp/src/constants/dialogs.ts
index c9bb52a0e..74ec090cf 100644
--- a/packages/webapp/src/constants/dialogs.ts
+++ b/packages/webapp/src/constants/dialogs.ts
@@ -53,4 +53,9 @@ export enum DialogsName {
   EstimateMail = 'estimate-mail',
   ReceiptMail = 'receipt-mail',
   PaymentMail = 'payment-mail',
+  BalanceSheetPdfPreview = 'BalanceSheetPdfPreview',
+  TrialBalanceSheetPdfPreview = 'TrialBalanceSheetPdfPreview',
+  CashflowSheetPdfPreview = 'CashflowSheetPdfPreview',
+  ProfitLossSheetPdfPreview = 'ProfitLossSheetPdfPreview',
+
 }
diff --git a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.tsx b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.tsx
index 787c7f14e..11928622f 100644
--- a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.tsx
@@ -13,6 +13,7 @@ import { useBalanceSheetQuery } from './utils';
 import { compose } from '@/utils';
 
 import withBalanceSheetActions from './withBalanceSheetActions';
+import { BalanceSheetDialogs } from './BalanceSheetDialogs';
 
 /**
  * Balance sheet.
@@ -67,6 +68,8 @@ function BalanceSheet({
           <BalanceSheetBody />
         </FinancialStatement>
       </DashboardPageContent>
+
+      <BalanceSheetDialogs />
     </BalanceSheetProvider>
   );
 }
diff --git a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.tsx
index 0421ea2ae..af8de6c12 100644
--- a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.tsx
@@ -17,7 +17,9 @@ import { BalanceSheetExportMenu } from './components';
 import { useBalanceSheetContext } from './BalanceSheetProvider';
 import withBalanceSheet from './withBalanceSheet';
 import withBalanceSheetActions from './withBalanceSheetActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { compose, saveInvoke } from '@/utils';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * Balance sheet - actions bar.
@@ -29,6 +31,9 @@ function BalanceSheetActionsBar({
   // #withBalanceSheetActions
   toggleBalanceSheetFilterDrawer: toggleFilterDrawer,
 
+  // #withDialogsActions
+  openDialog,
+
   // #ownProps
   numberFormat,
   onNumberFormatSubmit,
@@ -50,6 +55,10 @@ function BalanceSheetActionsBar({
     saveInvoke(onNumberFormatSubmit, values);
   };
 
+  const handlePdfPrintBtnSubmit = () => {
+    openDialog(DialogsName.BalanceSheetPdfPreview)
+  }
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -111,6 +120,7 @@ function BalanceSheetActionsBar({
 
         <Button
           className={Classes.MINIMAL}
+          onClick={handlePdfPrintBtnSubmit}
           icon={<Icon icon="print-16" iconSize={16} />}
           text={<T id={'print'} />}
         />
@@ -136,4 +146,5 @@ export default compose(
     balanceSheetDrawerFilter,
   })),
   withBalanceSheetActions,
+  withDialogActions
 )(BalanceSheetActionsBar);
diff --git a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetDialogs.tsx b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetDialogs.tsx
new file mode 100644
index 000000000..764493416
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetDialogs.tsx
@@ -0,0 +1,10 @@
+import { DialogsName } from '@/constants/dialogs';
+import { BalanceSheetPdfDialog } from './dialogs/BalanceSheetPdfDialog';
+
+export const BalanceSheetDialogs = () => {
+  return (
+    <>
+      <BalanceSheetPdfDialog dialogName={DialogsName.BalanceSheetPdfPreview} />
+    </>
+  );
+};
diff --git a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/dialogs/BalanceSheetPdfDialog/BalanceSheetPdfDialog.tsx b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/dialogs/BalanceSheetPdfDialog/BalanceSheetPdfDialog.tsx
new file mode 100644
index 000000000..a89784151
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/dialogs/BalanceSheetPdfDialog/BalanceSheetPdfDialog.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 BalanceSheetPdfDialogContent = lazy(
+  () => import('./BalanceSheetPdfDialogContent'),
+);
+
+/**
+ * Balance sheet pdf preview dialog.
+ * @returns {React.ReactNode}
+ */
+function BalanceSheetPdfDialogRoot({ dialogName, payload, isOpen }) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={'Balance Sheet Print Preview'}
+      className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      style={{ width: '1000px' }}
+    >
+      <DialogSuspense>
+        <BalanceSheetPdfDialogContent dialogName={dialogName} />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export const BalanceSheetPdfDialog = compose(withDialogRedux())(
+  BalanceSheetPdfDialogRoot,
+);
diff --git a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/dialogs/BalanceSheetPdfDialog/BalanceSheetPdfDialogContent.tsx b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/dialogs/BalanceSheetPdfDialog/BalanceSheetPdfDialogContent.tsx
new file mode 100644
index 000000000..338b0489c
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/dialogs/BalanceSheetPdfDialog/BalanceSheetPdfDialogContent.tsx
@@ -0,0 +1,42 @@
+import {
+  DialogContent,
+  PdfDocumentPreview,
+  FormattedMessage as T,
+} from '@/components';
+import { useBalanceSheetPdf } from '@/hooks/query';
+import { AnchorButton } from '@blueprintjs/core';
+
+export default function BalanceSheetPdfDialogContent() {
+  const { isLoading, pdfUrl } = useBalanceSheetPdf();
+
+  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/BalanceSheet/dialogs/BalanceSheetPdfDialog/index.ts b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/dialogs/BalanceSheetPdfDialog/index.ts
new file mode 100644
index 000000000..3e0a4445b
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/dialogs/BalanceSheetPdfDialog/index.ts
@@ -0,0 +1 @@
+export * from './BalanceSheetPdfDialog';
\ No newline at end of file
diff --git a/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatement.tsx b/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatement.tsx
index fd0f853bf..df36fc12b 100644
--- a/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatement.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatement.tsx
@@ -17,6 +17,7 @@ import {
 
 import { useCashflowStatementQuery } from './utils';
 import { compose } from '@/utils';
+import { CashflowSheetDialogs } from './CashflowSheetDialogs';
 
 /**
  * Cash flow statement.
@@ -71,6 +72,8 @@ function CashFlowStatement({
           <CashFlowStatementBody />
         </FinancialStatement>
       </DashboardPageContent>
+
+      <CashflowSheetDialogs />
     </CashFlowStatementProvider>
   );
 }
diff --git a/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementActionsBar.tsx
index 957b7e733..0be63e16d 100644
--- a/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementActionsBar.tsx
@@ -20,6 +20,8 @@ import withCashFlowStatementActions from './withCashFlowStatementActions';
 
 import { compose, saveInvoke } from '@/utils';
 import { CashflowSheetExportMenu } from './components';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * Cash flow statement actions bar.
@@ -31,6 +33,9 @@ function CashFlowStatementActionsBar({
   //#withCashStatementActions
   toggleCashFlowStatementFilterDrawer,
 
+  // #withDialogActions
+  openDialog,
+
   //#ownProps
   numberFormat,
   onNumberFormatSubmit,
@@ -51,6 +56,11 @@ function CashFlowStatementActionsBar({
   const handleNumberFormatSubmit = (values) =>
     saveInvoke(onNumberFormatSubmit, values);
 
+  // Handle print button click.
+  const handlePrintBtnClick = () => {
+    openDialog(DialogsName.CashflowSheetPdfPreview);
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -115,6 +125,7 @@ function CashFlowStatementActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon="print-16" iconSize={16} />}
           text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
         />
         <Popover
           content={<CashflowSheetExportMenu />}
@@ -138,4 +149,5 @@ export default compose(
     isFilterDrawerOpen: cashFlowStatementDrawerFilter,
   })),
   withCashFlowStatementActions,
+  withDialogActions,
 )(CashFlowStatementActionsBar);
diff --git a/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashflowSheetDialogs.tsx b/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashflowSheetDialogs.tsx
new file mode 100644
index 000000000..7cd35abce
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashflowSheetDialogs.tsx
@@ -0,0 +1,12 @@
+import { DialogsName } from '@/constants/dialogs';
+import { CashflowSheetPdfDialog } from './CashflowSheetPdfDialog';
+
+export function CashflowSheetDialogs() {
+  return (
+    <>
+      <CashflowSheetPdfDialog
+        dialogName={DialogsName.CashflowSheetPdfPreview}
+      />
+    </>
+  );
+}
diff --git a/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashflowSheetPdfDialog/CashflowSheetPdfDialog.tsx b/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashflowSheetPdfDialog/CashflowSheetPdfDialog.tsx
new file mode 100644
index 000000000..f5efa17f6
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashflowSheetPdfDialog/CashflowSheetPdfDialog.tsx
@@ -0,0 +1,44 @@
+// @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 CashflowSheetPdfDialogContent = lazy(
+  () => import('./CashflowSheetPdfDialogContent'),
+);
+
+/**
+ * Cashflow sheet pdf preview dialog.
+ * @returns {React.ReactNode}
+ */
+function CashflowSheetPdfDialogRoot({ dialogName, payload, isOpen }) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={'Trial Balance Sheet Print Preview'}
+      className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      style={{ width: '1000px' }}
+    >
+      <DialogSuspense>
+        <CashflowSheetPdfDialogContent
+          dialogName={dialogName}
+          subscriptionForm={payload}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export const CashflowSheetPdfDialog = compose(withDialogRedux())(
+  CashflowSheetPdfDialogRoot,
+);
diff --git a/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashflowSheetPdfDialog/CashflowSheetPdfDialogContent.tsx b/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashflowSheetPdfDialog/CashflowSheetPdfDialogContent.tsx
new file mode 100644
index 000000000..3ef39e3ce
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashflowSheetPdfDialog/CashflowSheetPdfDialogContent.tsx
@@ -0,0 +1,42 @@
+import {
+  DialogContent,
+  PdfDocumentPreview,
+  FormattedMessage as T,
+} from '@/components';
+import { AnchorButton } from '@blueprintjs/core';
+import { useCashflowSheetPdf } from '@/hooks/query';
+
+export default function CashflowSheetPdfDialogContent() {
+  const { isLoading, pdfUrl } = useCashflowSheetPdf();
+
+  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/CashFlowStatement/CashflowSheetPdfDialog/index.ts b/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashflowSheetPdfDialog/index.ts
new file mode 100644
index 000000000..d052dd966
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashflowSheetPdfDialog/index.ts
@@ -0,0 +1 @@
+export * from './CashflowSheetPdfDialog';
\ No newline at end of file
diff --git a/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.tsx
index 3988ff7f2..dbffa90f2 100644
--- a/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.tsx
@@ -20,6 +20,8 @@ import withProfitLoss from './withProfitLoss';
 import { compose, saveInvoke } from '@/utils';
 import { useProfitLossSheetContext } from './ProfitLossProvider';
 import { ProfitLossSheetExportMenu } from './components';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * Profit/Loss sheet actions bar.
@@ -31,6 +33,9 @@ function ProfitLossActionsBar({
   // #withProfitLossActions
   toggleProfitLossFilterDrawer: toggleFilterDrawer,
 
+  // #withDialogActions
+  openDialog,
+
   // #ownProps
   numberFormat,
   onNumberFormatSubmit,
@@ -48,6 +53,10 @@ function ProfitLossActionsBar({
   const handleNumberFormatSubmit = (values) => {
     saveInvoke(onNumberFormatSubmit, values);
   };
+  // Handles the print button click.
+  const handlePrintBtnClick = () => {
+    openDialog(DialogsName.ProfitLossSheetPdfPreview);
+  };
 
   return (
     <DashboardActionsBar>
@@ -110,6 +119,7 @@ function ProfitLossActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon="print-16" iconSize={16} />}
           text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
         />
         <Popover
           content={<ProfitLossSheetExportMenu />}
@@ -131,4 +141,5 @@ function ProfitLossActionsBar({
 export default compose(
   withProfitLoss(({ profitLossDrawerFilter }) => ({ profitLossDrawerFilter })),
   withProfitLossActions,
+  withDialogActions,
 )(ProfitLossActionsBar);
diff --git a/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.tsx b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.tsx
index 151937c3a..d8dcb20a0 100644
--- a/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.tsx
@@ -15,6 +15,7 @@ import { useProfitLossSheetQuery } from './utils';
 import { ProfitLossSheetProvider } from './ProfitLossProvider';
 import { ProfitLossSheetAlerts, ProfitLossSheetLoadingBar } from './components';
 import { ProfitLossBody } from './ProfitLossBody';
+import { ProfitLossSheetDialogs } from './ProfitLossSheetDialogs';
 
 /**
  * Profit/Loss financial statement sheet.
@@ -67,6 +68,8 @@ function ProfitLossSheet({
         />
         <ProfitLossBody />
       </DashboardPageContent>
+
+      <ProfitLossSheetDialogs />
     </ProfitLossSheetProvider>
   );
 }
diff --git a/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetDialogs.tsx b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetDialogs.tsx
new file mode 100644
index 000000000..1f83b0daf
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetDialogs.tsx
@@ -0,0 +1,10 @@
+import { DialogsName } from '@/constants/dialogs';
+import { ProfitLossSheetPdfDialog } from './ProfitLossSheetPdfDialog';
+
+export function ProfitLossSheetDialogs() {
+  return (
+    <ProfitLossSheetPdfDialog
+      dialogName={DialogsName.ProfitLossSheetPdfPreview}
+    />
+  );
+}
diff --git a/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetPdfDialog/ProfitLossSheetPdfDialog.tsx b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetPdfDialog/ProfitLossSheetPdfDialog.tsx
new file mode 100644
index 000000000..d15055559
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetPdfDialog/ProfitLossSheetPdfDialog.tsx
@@ -0,0 +1,44 @@
+// @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 ProfitLossSheetPdfDialogContent = lazy(
+  () => import('./ProfitLossSheetPdfDialogContent'),
+);
+
+/**
+ * Cashflow sheet pdf preview dialog.
+ * @returns {React.ReactNode}
+ */
+function ProfitLossSheetPdfDialogRoot({ dialogName, payload, isOpen }) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={'Profit/LossSheet Print Preview'}
+      className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      style={{ width: '1000px' }}
+    >
+      <DialogSuspense>
+        <ProfitLossSheetPdfDialogContent
+          dialogName={dialogName}
+          subscriptionForm={payload}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export const ProfitLossSheetPdfDialog = compose(withDialogRedux())(
+  ProfitLossSheetPdfDialogRoot,
+);
diff --git a/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetPdfDialog/ProfitLossSheetPdfDialogContent.tsx b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetPdfDialog/ProfitLossSheetPdfDialogContent.tsx
new file mode 100644
index 000000000..60d3df64a
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetPdfDialog/ProfitLossSheetPdfDialogContent.tsx
@@ -0,0 +1,42 @@
+import {
+  DialogContent,
+  PdfDocumentPreview,
+  FormattedMessage as T,
+} from '@/components';
+import { AnchorButton } from '@blueprintjs/core';
+import { useProfitLossSheetPdf } from '@/hooks/query';
+
+export default function ProfitLossSheetPdfDialogContent() {
+  const { isLoading, pdfUrl } = useProfitLossSheetPdf();
+
+  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/ProfitLossSheet/ProfitLossSheetPdfDialog/index.ts b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetPdfDialog/index.ts
new file mode 100644
index 000000000..7327d5450
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetPdfDialog/index.ts
@@ -0,0 +1 @@
+export * from './ProfitLossSheetPdfDialog';
\ No newline at end of file
diff --git a/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.tsx
index 198a5761f..3ce0b6a14 100644
--- a/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.tsx
@@ -16,9 +16,11 @@ import NumberFormatDropdown from '@/components/NumberFormatDropdown';
 
 import withTrialBalance from './withTrialBalance';
 import withTrialBalanceActions from './withTrialBalanceActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { compose, saveInvoke } from '@/utils';
 import { useTrialBalanceSheetContext } from './TrialBalanceProvider';
 import { TrialBalanceSheetExportMenu } from './components';
+import { DialogsName } from '@/constants/dialogs';
 
 function TrialBalanceActionsBar({
   // #withTrialBalance
@@ -27,6 +29,9 @@ function TrialBalanceActionsBar({
   // #withTrialBalanceActions
   toggleTrialBalanceFilterDrawer: toggleFilterDrawer,
 
+  // #withDialogActions
+  openDialog,
+
   // #ownProps
   numberFormat,
   onNumberFormatSubmit,
@@ -48,6 +53,11 @@ function TrialBalanceActionsBar({
     saveInvoke(onNumberFormatSubmit, values);
   };
 
+  // Handle print button click.
+  const handlePrintBtnClick = () => {
+    openDialog(DialogsName.TrialBalanceSheetPdfPreview);
+  }
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -109,6 +119,7 @@ function TrialBalanceActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon="print-16" iconSize={16} />}
           text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
         />
         <Popover
           content={<TrialBalanceSheetExportMenu />}
@@ -132,4 +143,5 @@ export default compose(
     trialBalanceDrawerFilter,
   })),
   withTrialBalanceActions,
+  withDialogActions,
 )(TrialBalanceActionsBar);
diff --git a/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.tsx b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.tsx
index 5156f4358..ada9e5d73 100644
--- a/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.tsx
@@ -16,6 +16,7 @@ import {
 
 import withTrialBalanceActions from './withTrialBalanceActions';
 import { compose } from '@/utils';
+import { TrialBalanceSheetDialogs } from './TrialBalanceSheetDialogs';
 
 /**
  * Trial balance sheet.
@@ -71,6 +72,8 @@ function TrialBalanceSheet({
           <TrialBalanceSheetBody />
         </FinancialStatement>
       </DashboardPageContent>
+
+      <TrialBalanceSheetDialogs />
     </TrialBalanceSheetProvider>
   );
 }
diff --git a/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetDialogs.tsx b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetDialogs.tsx
new file mode 100644
index 000000000..e44b9c916
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetDialogs.tsx
@@ -0,0 +1,12 @@
+import { DialogsName } from '@/constants/dialogs';
+import { TrialBalanceSheetPdfDialog } from './dialogs/TrialBalanceSheetPdfDialog';
+
+export const TrialBalanceSheetDialogs = () => {
+  return (
+    <>
+      <TrialBalanceSheetPdfDialog
+        dialogName={DialogsName.TrialBalanceSheetPdfPreview}
+      />
+    </>
+  );
+};
diff --git a/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/dialogs/TrialBalanceSheetPdfDialog/TrialBalanceSheetPdfDialog.tsx b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/dialogs/TrialBalanceSheetPdfDialog/TrialBalanceSheetPdfDialog.tsx
new file mode 100644
index 000000000..db0eb9c1f
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/dialogs/TrialBalanceSheetPdfDialog/TrialBalanceSheetPdfDialog.tsx
@@ -0,0 +1,44 @@
+// @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 TrialBalanceSheetPdfDialogContent = lazy(
+  () => import('./TrialBalanceSheetPdfDialogContent'),
+);
+
+/**
+ * Trial balance sheet pdf preview dialog.
+ * @returns {React.ReactNode}
+ */
+function TrialBalanceSheetPdfDialogRoot({ dialogName, payload, isOpen }) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={'Trial Balance Sheet Print Preview'}
+      className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      style={{ width: '1000px' }}
+    >
+      <DialogSuspense>
+        <TrialBalanceSheetPdfDialogContent
+          dialogName={dialogName}
+          subscriptionForm={payload}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export const TrialBalanceSheetPdfDialog = compose(withDialogRedux())(
+  TrialBalanceSheetPdfDialogRoot,
+);
diff --git a/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/dialogs/TrialBalanceSheetPdfDialog/TrialBalanceSheetPdfDialogContent.tsx b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/dialogs/TrialBalanceSheetPdfDialog/TrialBalanceSheetPdfDialogContent.tsx
new file mode 100644
index 000000000..7a05ed7e6
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/dialogs/TrialBalanceSheetPdfDialog/TrialBalanceSheetPdfDialogContent.tsx
@@ -0,0 +1,42 @@
+import {
+  DialogContent,
+  PdfDocumentPreview,
+  FormattedMessage as T,
+} from '@/components';
+import { AnchorButton } from '@blueprintjs/core';
+import { useTrialBalanceSheetPdf } from '@/hooks/query';
+
+export default function TrialBalanceSheetPdfDialogContent() {
+  const { isLoading, pdfUrl } = useTrialBalanceSheetPdf();
+
+  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/TrialBalanceSheet/dialogs/TrialBalanceSheetPdfDialog/index.ts b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/dialogs/TrialBalanceSheetPdfDialog/index.ts
new file mode 100644
index 000000000..0fb971fbf
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/dialogs/TrialBalanceSheetPdfDialog/index.ts
@@ -0,0 +1 @@
+export * from './TrialBalanceSheetPdfDialog';
\ No newline at end of file
diff --git a/packages/webapp/src/hooks/query/financialReports.tsx b/packages/webapp/src/hooks/query/financialReports.tsx
index 8821982a1..6738cbc44 100644
--- a/packages/webapp/src/hooks/query/financialReports.tsx
+++ b/packages/webapp/src/hooks/query/financialReports.tsx
@@ -3,6 +3,7 @@ import { useRequestQuery } from '../useQueryRequest';
 import { purchasesByItemsReducer } from '@/containers/FinancialStatements/reducers';
 import { useDownloadFile } from '../useDownloadFile';
 import t from './types';
+import { useRequestPdf } from '../useRequestPdf';
 
 /**
  * Retrieve balance sheet.
@@ -53,6 +54,13 @@ export const useBalanceSheetCsvExport = (query, args) => {
   });
 };
 
+/**
+ * Retrieves the balance sheet pdf document data.
+ */
+export function useBalanceSheetPdf() {
+  return useRequestPdf(`financial_statements/balance_sheet`);
+}
+
 /**
  * Retrieve trial balance sheet.
  */
@@ -88,6 +96,13 @@ export const useTrialBalanceSheetXlsxExport = (query, args) => {
   });
 };
 
+/**
+ * Retrieves the trial balance sheet pdf document data.
+ */
+export function useTrialBalanceSheetPdf() {
+  return useRequestPdf(`financial_statements/trial_balance_sheet`);
+}
+
 export const useTrialBalanceSheetCsvExport = (query, args) => {
   return useDownloadFile({
     url: '/financial_statements/trial_balance_sheet',
@@ -151,6 +166,14 @@ export const useProfitLossSheetCsvExport = (query, args) => {
   });
 };
 
+/**
+ * Retrieves the cashflow sheet pdf document data.
+ */
+export function useProfitLossSheetPdf() {
+  return useRequestPdf(`financial_statements/profit_loss_sheet`);
+}
+
+
 /**
  * Retrieve general ledger (GL) sheet.
  */
@@ -847,6 +870,13 @@ export const useCashFlowStatementCsvExport = (query, args) => {
   });
 };
 
+/**
+ * Retrieves the cashflow sheet pdf document data.
+ */
+export function useCashflowSheetPdf() {
+  return useRequestPdf(`financial_statements/cash-flow`);
+}
+
 /**
  * Retrieve inventory item detail report.
  */