From 21eb88ef53a1c0b52cde47beb8b3ad8fa12cf05b Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Wed, 24 Jan 2024 00:26:56 +0200
Subject: [PATCH 01/39] chore: dump CHANGELOG.md file

---
 CHANGELOG.md | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ca8948cf1..4c2938ad4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,19 @@
 
 All notable changes to Bigcapital server-side will be in this file.
 
+## [0.13.3] - 22-01-2024
+
+* hotfix(server): Unhandled thrown errors of services by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/329
+
+## [0.13.2] - 21-01-2024
+
+* feat: show customer / vendor balance. by @asenawritescode in https://github.com/bigcapitalhq/bigcapital/pull/311
+* feat: inventory valuation csv and xlsx export by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/308
+* feat: sales by items export csv & xlsx by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/310
+* fix(server): the invoice and payment receipt printing by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/315
+* fix: get cashflow transaction broken cause transaction type by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/318
+* fix: `AccountActivateAlert` import by @xprnio in https://github.com/bigcapitalhq/bigcapital/pull/322
+
 ## [0.13.1] - 15-01-2024
 
 * feat(webapp): add approve/reject to action bar of estimate details dr… by @ANasouf in https://github.com/bigcapitalhq/bigcapital/pull/304

From 475c4e996717060717f49681b6179f0493e213c4 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Fri, 26 Jan 2024 00:05:24 +0200
Subject: [PATCH 02/39] fix(webapp): inconsistency in currency of universal
 search items

---
 .../src/containers/Sales/Invoices/InvoiceUniversalSearch.tsx  | 4 ++--
 .../src/containers/Sales/Receipts/ReceiptUniversalSearch.tsx  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceUniversalSearch.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceUniversalSearch.tsx
index 84a8858e4..1656b9bc7 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceUniversalSearch.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceUniversalSearch.tsx
@@ -83,13 +83,13 @@ export function InvoiceUniversalSearchItem(
           <span class="bp4-text-muted">
             {highlightText(item.reference.invoice_no, query)}{' '}
             <Icon icon={'caret-right-16'} iconSize={16} />
-            {item.reference.formatted_invoice_date}
+            {item.reference.invoice_date_formatted}
           </span>
         </div>
       }
       label={
         <>
-          <div class="amount">${item.reference.balance}</div>
+          <div class="amount">${item.reference.total_formatted}</div>
           <InvoiceStatus customer={item.reference} />
         </>
       }
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptUniversalSearch.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptUniversalSearch.tsx
index ec050da8f..2eb9405ac 100644
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptUniversalSearch.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptUniversalSearch.tsx
@@ -75,7 +75,7 @@ export function ReceiptUniversalSearchItem(
       }
       label={
         <>
-          <div class="amount">${item.reference.amount}</div>
+          <div class="amount">${item.reference.formatted_amount}</div>
           <ReceiptStatus receipt={item.reference} />
         </>
       }

From de5920f9109ef90c7cdf890712041b889d210cd2 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Fri, 26 Jan 2024 23:46:45 +0200
Subject: [PATCH 03/39] fix: Expense amounts should not be rounded

---
 packages/server/src/models/ExpenseCategory.ts |  2 ++
 .../CRUD/ExpenseCategoryTransformer.ts        | 25 +++++++++++++++++++
 .../Expenses/CRUD/ExpenseTransformer.ts       | 17 +++++++++++--
 .../ExpenseDrawer/ExpenseDrawerFooter.tsx     |  6 ++---
 .../Drawers/ExpenseDrawer/utils.tsx           |  3 +--
 5 files changed, 46 insertions(+), 7 deletions(-)
 create mode 100644 packages/server/src/services/Expenses/CRUD/ExpenseCategoryTransformer.ts

diff --git a/packages/server/src/models/ExpenseCategory.ts b/packages/server/src/models/ExpenseCategory.ts
index 50416805e..21d61f7e8 100644
--- a/packages/server/src/models/ExpenseCategory.ts
+++ b/packages/server/src/models/ExpenseCategory.ts
@@ -2,6 +2,8 @@ import { Model } from 'objection';
 import TenantModel from 'models/TenantModel';
 
 export default class ExpenseCategory extends TenantModel {
+  amount: number;
+  
   /**
    * Table name
    */
diff --git a/packages/server/src/services/Expenses/CRUD/ExpenseCategoryTransformer.ts b/packages/server/src/services/Expenses/CRUD/ExpenseCategoryTransformer.ts
new file mode 100644
index 000000000..3f8383c03
--- /dev/null
+++ b/packages/server/src/services/Expenses/CRUD/ExpenseCategoryTransformer.ts
@@ -0,0 +1,25 @@
+import { Transformer } from '@/lib/Transformer/Transformer';
+import { ExpenseCategory } from '@/models';
+import { formatNumber } from '@/utils';
+
+export class ExpenseCategoryTransformer extends Transformer {
+  /**
+   * Include these attributes to expense object.
+   * @returns {Array}
+   */
+  public includeAttributes = (): string[] => {
+    return ['amountFormatted'];
+  };
+
+  /**
+   * Retrieves the formatted amount.
+   * @param {ExpenseCategory} category
+   * @returns {string}
+   */
+  protected amountFormatted(category: ExpenseCategory) {
+    return formatNumber(category.amount, {
+      currencyCode: this.context.currencyCode,
+      money: false,
+    });
+  }
+}
diff --git a/packages/server/src/services/Expenses/CRUD/ExpenseTransformer.ts b/packages/server/src/services/Expenses/CRUD/ExpenseTransformer.ts
index 2812a9261..89f461934 100644
--- a/packages/server/src/services/Expenses/CRUD/ExpenseTransformer.ts
+++ b/packages/server/src/services/Expenses/CRUD/ExpenseTransformer.ts
@@ -1,6 +1,7 @@
 import { Transformer } from '@/lib/Transformer/Transformer';
 import { formatNumber } from 'utils';
 import { IExpense } from '@/interfaces';
+import { ExpenseCategoryTransformer } from './ExpenseCategoryTransformer';
 
 export class ExpenseTransfromer extends Transformer {
   /**
@@ -12,7 +13,8 @@ export class ExpenseTransfromer extends Transformer {
       'formattedAmount',
       'formattedLandedCostAmount',
       'formattedAllocatedCostAmount',
-      'formattedDate'
+      'formattedDate',
+      'categories',
     ];
   };
 
@@ -56,5 +58,16 @@ export class ExpenseTransfromer extends Transformer {
    */
   protected formattedDate = (expense: IExpense): string => {
     return this.formatDate(expense.paymentDate);
-  }
+  };
+
+  /**
+   * Retrieves the transformed expense categories.
+   * @param {IExpense} expense
+   * @returns {}
+   */
+  protected categories = (expense: IExpense) => {
+    return this.item(expense.categories, new ExpenseCategoryTransformer(), {
+      currencyCode: expense.currencyCode,
+    });
+  };
 }
diff --git a/packages/webapp/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.tsx b/packages/webapp/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.tsx
index c1acea3f2..48b3b2514 100644
--- a/packages/webapp/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.tsx
+++ b/packages/webapp/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.tsx
@@ -9,7 +9,7 @@ import {
   TotalLineTextStyle,
 } from '@/components';
 import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
-import { FormatNumber, TotalLine } from '@/components';
+import { TotalLine } from '@/components';
 
 /**
  * Footer details of expense readonly details.
@@ -22,12 +22,12 @@ export default function ExpenseDrawerFooter() {
       <ExpenseTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
         <TotalLine
           title={<T id={'expense.details.subtotal'} />}
-          value={<FormatNumber value={expense.total_amount} />}
+          value={expense.formatted_amount}
           borderStyle={TotalLineBorderStyle.SingleDark}
         />
         <TotalLine
           title={<T id={'expense.details.total'} />}
-          value={<FormatNumber value={expense.formatted_amount} />}
+          value={expense.formatted_amount}
           borderStyle={TotalLineBorderStyle.DoubleDark}
           textStyle={TotalLineTextStyle.Bold}
         />
diff --git a/packages/webapp/src/containers/Drawers/ExpenseDrawer/utils.tsx b/packages/webapp/src/containers/Drawers/ExpenseDrawer/utils.tsx
index 276923cce..377f6f9a4 100644
--- a/packages/webapp/src/containers/Drawers/ExpenseDrawer/utils.tsx
+++ b/packages/webapp/src/containers/Drawers/ExpenseDrawer/utils.tsx
@@ -36,8 +36,7 @@ export const useExpenseReadEntriesColumns = () => {
       },
       {
         Header: intl.get('amount'),
-        accessor: 'amount',
-        Cell: FormatNumberCell,
+        accessor: 'amount_formatted',
         width: getColumnWidth(categories, 'amount', {
           minWidth: 60,
           magicSpacing: 5,

From ac7175d83b7d0109c39d89826a4b7f5dff32262b Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Sun, 28 Jan 2024 15:52:54 +0200
Subject: [PATCH 04/39] feat: get latest exchange rate from third party
 services

---
 .env.example                                  |   8 +-
 .../src/api/controllers/ExchangeRates.ts      | 214 +++++-------------
 packages/server/src/config/index.ts           |  10 +
 .../src/lib/ExchangeRate/ExchangeRate.ts      |  45 ++++
 .../src/lib/ExchangeRate/OpenExchangeRate.ts  |  62 +++++
 packages/server/src/lib/ExchangeRate/types.ts |  17 ++
 .../ExchangeRates/ExchangeRatesService.ts     | 208 +++--------------
 7 files changed, 224 insertions(+), 340 deletions(-)
 create mode 100644 packages/server/src/lib/ExchangeRate/ExchangeRate.ts
 create mode 100644 packages/server/src/lib/ExchangeRate/OpenExchangeRate.ts
 create mode 100644 packages/server/src/lib/ExchangeRate/types.ts

diff --git a/.env.example b/.env.example
index 78945ab91..7af1c6061 100644
--- a/.env.example
+++ b/.env.example
@@ -57,4 +57,10 @@ GOTENBERG_DOCS_URL=http://server:3000/public/
 
 # Gotenberg API - (development)
 # GOTENBERG_URL=http://localhost:9000
-# GOTENBERG_DOCS_URL=http://host.docker.internal:3000/public/
\ No newline at end of file
+# GOTENBERG_DOCS_URL=http://host.docker.internal:3000/public/
+
+# Exchange Rate Service
+EXCHANGE_RATE_SERVICE=open-exchange-rate
+
+# Open Exchange Rate
+OPEN_EXCHANGE_RATE_APP_I=
\ No newline at end of file
diff --git a/packages/server/src/api/controllers/ExchangeRates.ts b/packages/server/src/api/controllers/ExchangeRates.ts
index 4b808e921..4ea59ad1b 100644
--- a/packages/server/src/api/controllers/ExchangeRates.ts
+++ b/packages/server/src/api/controllers/ExchangeRates.ts
@@ -4,16 +4,13 @@ import { check, param, query } from 'express-validator';
 import asyncMiddleware from '@/api/middleware/asyncMiddleware';
 import BaseController from './BaseController';
 import { ServiceError } from '@/exceptions';
-import ExchangeRatesService from '@/services/ExchangeRates/ExchangeRatesService';
-import DynamicListingService from '@/services/DynamicListing/DynamicListService';
+import { ExchangeRatesService } from '@/services/ExchangeRates/ExchangeRatesService';
+import { EchangeRateErrors } from '@/lib/ExchangeRate/types';
 
 @Service()
 export default class ExchangeRatesController extends BaseController {
   @Inject()
-  exchangeRatesService: ExchangeRatesService;
-
-  @Inject()
-  dynamicListService: DynamicListingService;
+  private exchangeRatesService: ExchangeRatesService;
 
   /**
    * Constructor method.
@@ -22,164 +19,35 @@ export default class ExchangeRatesController extends BaseController {
     const router = Router();
 
     router.get(
-      '/',
-      [...this.exchangeRatesListSchema],
+      '/latest',
+      [query('to_currency').exists().isString()],
       this.validationResult,
-      asyncMiddleware(this.exchangeRates.bind(this)),
-      this.dynamicListService.handlerErrorsToResponse,
-      this.handleServiceError,
-    );
-    router.post(
-      '/',
-      [...this.exchangeRateDTOSchema],
-      this.validationResult,
-      asyncMiddleware(this.addExchangeRate.bind(this)),
-      this.handleServiceError
-    );
-    router.post(
-      '/:id',
-      [...this.exchangeRateEditDTOSchema, ...this.exchangeRateIdSchema],
-      this.validationResult,
-      asyncMiddleware(this.editExchangeRate.bind(this)),
-      this.handleServiceError
-    );
-    router.delete(
-      '/:id',
-      [...this.exchangeRateIdSchema],
-      this.validationResult,
-      asyncMiddleware(this.deleteExchangeRate.bind(this)),
+      asyncMiddleware(this.latestExchangeRate.bind(this)),
       this.handleServiceError
     );
     return router;
   }
 
-  get exchangeRatesListSchema() {
-    return [
-      query('page').optional().isNumeric().toInt(),
-      query('page_size').optional().isNumeric().toInt(),
-
-      query('column_sort_by').optional(),
-      query('sort_order').optional().isIn(['desc', 'asc']),
-    ];
-  }
-
-  get exchangeRateDTOSchema() {
-    return [
-      check('exchange_rate').exists().isNumeric().toFloat(),
-      check('currency_code').exists().trim().escape(),
-      check('date').exists().isISO8601(),
-    ];
-  }
-
-  get exchangeRateEditDTOSchema() {
-    return [check('exchange_rate').exists().isNumeric().toFloat()];
-  }
-
-  get exchangeRateIdSchema() {
-    return [param('id').isNumeric().toInt()];
-  }
-
-  get exchangeRatesIdsSchema() {
-    return [
-      query('ids').isArray({ min: 2 }),
-      query('ids.*').isNumeric().toInt(),
-    ];
-  }
-
   /**
    * Retrieve exchange rates.
    * @param {Request} req
    * @param {Response} res
    * @param {NextFunction} next
    */
-  async exchangeRates(req: Request, res: Response, next: NextFunction) {
+  private async latestExchangeRate(
+    req: Request,
+    res: Response,
+    next: NextFunction
+  ) {
     const { tenantId } = req;
-    const filter = {
-      page: 1,
-      pageSize: 12,
-      filterRoles: [],
-      columnSortBy: 'created_at',
-      sortOrder: 'asc',
-      ...this.matchedQueryData(req),
-    };
-    if (filter.stringifiedFilterRoles) {
-      filter.filterRoles = JSON.parse(filter.stringifiedFilterRoles);
-    }
-    try {
-      const exchangeRates = await this.exchangeRatesService.listExchangeRates(
-        tenantId,
-        filter
-      );
-      return res.status(200).send({ exchange_rates: exchangeRates });
-    } catch (error) {
-      next(error);
-    }
-  }
-
-  /**
-   * Adds a new exchange rate on the given date.
-   * @param {Request} req
-   * @param {Response} res
-   * @param {NextFunction} next
-   */
-  async addExchangeRate(req: Request, res: Response, next: NextFunction) {
-    const { tenantId } = req;
-    const exchangeRateDTO = this.matchedBodyData(req);
+    const exchangeRateQuery = this.matchedQueryData(req);
 
     try {
-      const exchangeRate = await this.exchangeRatesService.newExchangeRate(
+      const exchangeRate = await this.exchangeRatesService.latest(
         tenantId,
-        exchangeRateDTO
+        exchangeRateQuery
       );
-      return res.status(200).send({ id: exchangeRate.id });
-    } catch (error) {
-      next(error);
-    }
-  }
-
-  /**
-   * Edit the given exchange rate.
-   * @param {Request} req
-   * @param {Response} res
-   * @param {NextFunction} next
-   */
-  async editExchangeRate(req: Request, res: Response, next: NextFunction) {
-    const { tenantId } = req;
-    const { id: exchangeRateId } = req.params;
-    const exchangeRateDTO = this.matchedBodyData(req);
-
-    try {
-      const exchangeRate = await this.exchangeRatesService.editExchangeRate(
-        tenantId,
-        exchangeRateId,
-        exchangeRateDTO
-      );
-
-      return res.status(200).send({
-        id: exchangeRateId,
-        message: 'The exchange rate has been edited successfully.',
-      });
-    } catch (error) {
-      next(error);
-    }
-  }
-
-  /**
-   * Delete the given exchange rate from the storage.
-   * @param {Request} req
-   * @param {Response} res
-   * @param {NextFunction} next
-   */
-  async deleteExchangeRate(req: Request, res: Response, next: NextFunction) {
-    const { tenantId } = req;
-    const { id: exchangeRateId } = req.params;
-
-    try {
-      await this.exchangeRatesService.deleteExchangeRate(
-        tenantId,
-        exchangeRateId
-      );
-      return res.status(200).send({ id: exchangeRateId });
+      return res.status(200).send(exchangeRate);
     } catch (error) {
       next(error);
     }
@@ -192,26 +60,56 @@ export default class ExchangeRatesController extends BaseController {
    * @param {Response} res
    * @param {NextFunction} next
    */
-  handleServiceError(
+  private handleServiceError(
     error: Error,
     req: Request,
     res: Response,
     next: NextFunction
   ) {
     if (error instanceof ServiceError) {
-      if (error.errorType === 'EXCHANGE_RATE_NOT_FOUND') {
-        return res.status(404).send({
-          errors: [{ type: 'EXCHANGE.RATE.NOT.FOUND', code: 200 }],
-        });
-      }
-      if (error.errorType === 'NOT_FOUND_EXCHANGE_RATES') {
+      if (EchangeRateErrors.EX_RATE_INVALID_BASE_CURRENCY === error.errorType) {
         return res.status(400).send({
-          errors: [{ type: 'EXCHANGE.RATES.IS.NOT.FOUND', code: 100 }],
+          errors: [
+            {
+              type: EchangeRateErrors.EX_RATE_INVALID_BASE_CURRENCY,
+              code: 100,
+              message: 'The given base currency is invalid.',
+            },
+          ],
         });
-      }
-      if (error.errorType === 'EXCHANGE_RATE_PERIOD_EXISTS') {
+      } else if (
+        EchangeRateErrors.EX_RATE_SERVICE_NOT_ALLOWED === error.errorType
+      ) {
         return res.status(400).send({
-          errors: [{ type: 'EXCHANGE.RATE.PERIOD.EXISTS', code: 300 }],
+          errors: [
+            {
+              type: EchangeRateErrors.EX_RATE_SERVICE_NOT_ALLOWED,
+              code: 200,
+              message: 'The service is not allowed',
+            },
+          ],
+        });
+      } else if (
+        EchangeRateErrors.EX_RATE_SERVICE_API_KEY_REQUIRED === error.errorType
+      ) {
+        return res.status(400).send({
+          errors: [
+            {
+              type: EchangeRateErrors.EX_RATE_SERVICE_API_KEY_REQUIRED,
+              code: 300,
+              message: 'The API key is required',
+            },
+          ],
+        });
+      } else if (EchangeRateErrors.EX_RATE_LIMIT_EXCEEDED === error.errorType) {
+        return res.status(400).send({
+          errors: [
+            {
+              type: EchangeRateErrors.EX_RATE_LIMIT_EXCEEDED,
+              code: 400,
+              message: 'The API rate limit has been exceeded',
+            },
+          ],
         });
       }
     }
diff --git a/packages/server/src/config/index.ts b/packages/server/src/config/index.ts
index 0dc9d9676..4d096875a 100644
--- a/packages/server/src/config/index.ts
+++ b/packages/server/src/config/index.ts
@@ -169,4 +169,14 @@ module.exports = {
    * to application detarmines to upgrade.
    */
   databaseBatch: 4,
+
+  /**
+   * Exchange rate.
+   */
+  exchangeRate: {
+    service: 'open-exchange-rate',
+    openExchangeRate: {
+      appId: process.env.OPEN_EXCHANGE_RATE_APP_ID,
+    }
+  }
 };
diff --git a/packages/server/src/lib/ExchangeRate/ExchangeRate.ts b/packages/server/src/lib/ExchangeRate/ExchangeRate.ts
new file mode 100644
index 000000000..5bb84cff3
--- /dev/null
+++ b/packages/server/src/lib/ExchangeRate/ExchangeRate.ts
@@ -0,0 +1,45 @@
+import { OpenExchangeRate } from './OpenExchangeRate';
+import { ExchangeRateServiceType, IExchangeRateService } from './types';
+
+export class ExchangeRate {
+  private exchangeRateService: IExchangeRateService;
+  private exchangeRateServiceType: ExchangeRateServiceType;
+
+  /**
+   * Constructor method.
+   * @param {ExchangeRateServiceType} service
+   */
+  constructor(service: ExchangeRateServiceType) {
+    this.exchangeRateServiceType = service;
+    this.initService();
+  }
+
+  /**
+   * Initialize the exchange rate service based on the service type.
+   */
+  private initService() {
+    if (
+      this.exchangeRateServiceType === ExchangeRateServiceType.OpenExchangeRate
+    ) {
+      this.setExchangeRateService(new OpenExchangeRate());
+    }
+  }
+
+  /**
+   * Sets the exchange rate service.
+   * @param {IExchangeRateService} service
+   */
+  private setExchangeRateService(service: IExchangeRateService) {
+    this.exchangeRateService = service;
+  }
+
+  /**
+   * Gets the latest exchange rate.
+   * @param {string} baseCurrency
+   * @param {string} toCurrency
+   * @returns {number}
+   */
+  public latest(baseCurrency: string, toCurrency: string): Promise<number> {
+    return this.exchangeRateService.latest(baseCurrency, toCurrency);
+  }
+}
diff --git a/packages/server/src/lib/ExchangeRate/OpenExchangeRate.ts b/packages/server/src/lib/ExchangeRate/OpenExchangeRate.ts
new file mode 100644
index 000000000..5f0a9b15b
--- /dev/null
+++ b/packages/server/src/lib/ExchangeRate/OpenExchangeRate.ts
@@ -0,0 +1,62 @@
+import Axios, { AxiosError } from 'axios';
+import {
+  EchangeRateErrors,
+  IExchangeRateService,
+  OPEN_EXCHANGE_RATE_LATEST_URL,
+} from './types';
+import config from '@/config';
+import { ServiceError } from '@/exceptions';
+
+export class OpenExchangeRate implements IExchangeRateService {
+  /**
+   * Gets the latest exchange rate.
+   * @param {string} baseCurrency
+   * @param {string} toCurrency
+   * @returns {Promise<number}
+   */
+  public async latest(
+    baseCurrency: string,
+    toCurrency: string
+  ): Promise<number> {
+    try {
+      const result = await Axios.get(OPEN_EXCHANGE_RATE_LATEST_URL, {
+        params: {
+          app_id: config.exchangeRate.openExchangeRate.appId,
+          base: baseCurrency,
+          symbols: toCurrency,
+        },
+      });
+      return result.data.rates[toCurrency] || (1 as number);
+    } catch (error) {
+      this.handleLatestErrors(error);
+    }
+  }
+
+  /**
+   * Handles the latest errors.
+   * @param {any} error
+   */
+  private handleLatestErrors(error: any) {
+    if (error.response.data?.message === 'missing_app_id') {
+      throw new ServiceError(
+        EchangeRateErrors.EX_RATE_SERVICE_API_KEY_REQUIRED,
+        'Invalid App ID provided. Please sign up at https://openexchangerates.org/signup, or contact support@openexchangerates.org.'
+      );
+    } else if (error.response.data?.message === 'invalid_app_id') {
+      throw new ServiceError(
+        EchangeRateErrors.EX_RATE_SERVICE_API_KEY_REQUIRED,
+        'Invalid App ID provided. Please sign up at https://openexchangerates.org/signup, or contact support@openexchangerates.org.'
+      );
+    } else if (error.response.data?.message === 'not_allowed') {
+      throw new ServiceError(
+        EchangeRateErrors.EX_RATE_SERVICE_NOT_ALLOWED,
+        'Getting the exchange rate from the given base currency to the given currency is not allowed.'
+      );
+    } else if (error.response.data?.message === 'invalid_base') {
+      throw new ServiceError(
+        EchangeRateErrors.EX_RATE_INVALID_BASE_CURRENCY,
+        'The given base currency is invalid.'
+      );
+    }
+  }
+}
diff --git a/packages/server/src/lib/ExchangeRate/types.ts b/packages/server/src/lib/ExchangeRate/types.ts
new file mode 100644
index 000000000..8b40125cd
--- /dev/null
+++ b/packages/server/src/lib/ExchangeRate/types.ts
@@ -0,0 +1,17 @@
+export interface IExchangeRateService {
+  latest(baseCurrency: string, toCurrency: string): Promise<number>;
+}
+
+export enum ExchangeRateServiceType {
+  OpenExchangeRate = 'OpenExchangeRate',
+}
+
+export enum EchangeRateErrors {
+  EX_RATE_SERVICE_NOT_ALLOWED = 'EX_RATE_SERVICE_NOT_ALLOWED',
+  EX_RATE_LIMIT_EXCEEDED = 'EX_RATE_LIMIT_EXCEEDED',
+  EX_RATE_SERVICE_API_KEY_REQUIRED = 'EX_RATE_SERVICE_API_KEY_REQUIRED',
+  EX_RATE_INVALID_BASE_CURRENCY = 'EX_RATE_INVALID_BASE_CURRENCY',
+}
+
+export const OPEN_EXCHANGE_RATE_LATEST_URL =
+  'https://openexchangerates.org/api/latest.json';
diff --git a/packages/server/src/services/ExchangeRates/ExchangeRatesService.ts b/packages/server/src/services/ExchangeRates/ExchangeRatesService.ts
index 9bc63fbfd..bb2437abc 100644
--- a/packages/server/src/services/ExchangeRates/ExchangeRatesService.ts
+++ b/packages/server/src/services/ExchangeRates/ExchangeRatesService.ts
@@ -1,193 +1,39 @@
-import moment from 'moment';
-import { difference } from 'lodash';
 import { Service, Inject } from 'typedi';
-import { ServiceError } from '@/exceptions';
-import DynamicListingService from '@/services/DynamicListing/DynamicListService';
-import {
-  EventDispatcher,
-  EventDispatcherInterface,
-} from 'decorators/eventDispatcher';
-import {
-  IExchangeRateDTO,
-  IExchangeRate,
-  IExchangeRatesService,
-  IExchangeRateEditDTO,
-  IExchangeRateFilter,
-} from '@/interfaces';
-import TenancyService from '@/services/Tenancy/TenancyService';
+import { IExchangeRatesService } from '@/interfaces';
+import { ExchangeRate } from '@/lib/ExchangeRate/ExchangeRate';
+import { ExchangeRateServiceType } from '@/lib/ExchangeRate/types';
+interface ExchangeRateLatestDTO {
+  toCurrency: string;
+}
 
-const ERRORS = {
-  NOT_FOUND_EXCHANGE_RATES: 'NOT_FOUND_EXCHANGE_RATES',
-  EXCHANGE_RATE_PERIOD_EXISTS: 'EXCHANGE_RATE_PERIOD_EXISTS',
-  EXCHANGE_RATE_NOT_FOUND: 'EXCHANGE_RATE_NOT_FOUND',
-};
+interface EchangeRateLatestPOJO {
+  baseCurrency: string;
+  toCurrency: string;
+  exchangeRate: number;
+}
 
 @Service()
-export default class ExchangeRatesService implements IExchangeRatesService {
-  @Inject('logger')
-  logger: any;
-
-  @EventDispatcher()
-  eventDispatcher: EventDispatcherInterface;
-
-  @Inject()
-  tenancy: TenancyService;
-
-  @Inject()
-  dynamicListService: DynamicListingService;
-
+export class ExchangeRatesService {
   /**
-   * Creates a new exchange rate.
+   * Gets the latest exchange rate.
    * @param {number} tenantId
-   * @param {IExchangeRateDTO} exchangeRateDTO
-   * @returns {Promise<IExchangeRate>}
+   * @param {number} exchangeRateLatestDTO
+   * @returns {EchangeRateLatestPOJO}
    */
-  public async newExchangeRate(
+  public async latest(
     tenantId: number,
-    exchangeRateDTO: IExchangeRateDTO
-  ): Promise<IExchangeRate> {
-    const { ExchangeRate } = this.tenancy.models(tenantId);
-
-    this.logger.info('[exchange_rates] trying to insert new exchange rate.', {
-      tenantId,
-      exchangeRateDTO,
-    });
-    await this.validateExchangeRatePeriodExistance(tenantId, exchangeRateDTO);
-
-    const exchangeRate = await ExchangeRate.query().insertAndFetch({
-      ...exchangeRateDTO,
-      date: moment(exchangeRateDTO.date).format('YYYY-MM-DD'),
-    });
-    this.logger.info('[exchange_rates] inserted successfully.', {
-      tenantId,
-      exchangeRateDTO,
-    });
-    return exchangeRate;
-  }
-
-  /**
-   * Edits the exchange rate details.
-   * @param {number} tenantId - Tenant id.
-   * @param {number} exchangeRateId - Exchange rate id.
-   * @param {IExchangeRateEditDTO} editExRateDTO - Edit exchange rate DTO.
-   */
-  public async editExchangeRate(
-    tenantId: number,
-    exchangeRateId: number,
-    editExRateDTO: IExchangeRateEditDTO
-  ): Promise<void> {
-    const { ExchangeRate } = this.tenancy.models(tenantId);
-
-    this.logger.info('[exchange_rates] trying to edit exchange rate.', {
-      tenantId,
-      exchangeRateId,
-      editExRateDTO,
-    });
-    await this.validateExchangeRateExistance(tenantId, exchangeRateId);
-
-    await ExchangeRate.query()
-      .where('id', exchangeRateId)
-      .update({ ...editExRateDTO });
-    this.logger.info('[exchange_rates] exchange rate edited successfully.', {
-      tenantId,
-      exchangeRateId,
-      editExRateDTO,
-    });
-  }
-
-  /**
-   * Deletes the given exchange rate.
-   * @param {number} tenantId - Tenant id.
-   * @param {number} exchangeRateId - Exchange rate id.
-   */
-  public async deleteExchangeRate(
-    tenantId: number,
-    exchangeRateId: number
-  ): Promise<void> {
-    const { ExchangeRate } = this.tenancy.models(tenantId);
-    await this.validateExchangeRateExistance(tenantId, exchangeRateId);
-
-    await ExchangeRate.query().findById(exchangeRateId).delete();
-  }
-
-  /**
-   * Listing exchange rates details.
-   * @param {number} tenantId - Tenant id.
-   * @param {IExchangeRateFilter} exchangeRateFilter - Exchange rates list filter.
-   */
-  public async listExchangeRates(
-    tenantId: number,
-    exchangeRateFilter: IExchangeRateFilter
-  ): Promise<void> {
-    const { ExchangeRate } = this.tenancy.models(tenantId);
-    const dynamicFilter = await this.dynamicListService.dynamicList(
-      tenantId,
-      ExchangeRate,
-      exchangeRateFilter
-    );
-    // Retrieve exchange rates by the given query.
-    const exchangeRates = await ExchangeRate.query()
-      .onBuild((query) => {
-        dynamicFilter.buildQuery()(query);
-      })
-      .pagination(exchangeRateFilter.page - 1, exchangeRateFilter.pageSize);
-
-    return exchangeRates;
-  }
-
-  /**
-   * Validates period of the exchange rate existance.
-   * @param {number} tenantId - Tenant id.
-   * @param {IExchangeRateDTO} exchangeRateDTO - Exchange rate DTO.
-   * @return {Promise<void>}
-   */
-  private async validateExchangeRatePeriodExistance(
-    tenantId: number,
-    exchangeRateDTO: IExchangeRateDTO
-  ): Promise<void> {
-    const { ExchangeRate } = this.tenancy.models(tenantId);
-
-    this.logger.info('[exchange_rates] trying to validate period existance.', {
-      tenantId,
-    });
-    const foundExchangeRate = await ExchangeRate.query()
-      .where('currency_code', exchangeRateDTO.currencyCode)
-      .where('date', exchangeRateDTO.date);
-
-    if (foundExchangeRate.length > 0) {
-      this.logger.info('[exchange_rates] given exchange rate period exists.', {
-        tenantId,
-      });
-      throw new ServiceError(ERRORS.EXCHANGE_RATE_PERIOD_EXISTS);
-    }
-  }
-
-  /**
-   * Validate the given echange rate id existance.
-   * @param {number} tenantId - Tenant id.
-   * @param {number} exchangeRateId - Exchange rate id.
-   * @returns {Promise<void>}
-   */
-  private async validateExchangeRateExistance(
-    tenantId: number,
-    exchangeRateId: number
-  ) {
-    const { ExchangeRate } = this.tenancy.models(tenantId);
-
-    this.logger.info(
-      '[exchange_rates] trying to validate exchange rate id existance.',
-      { tenantId, exchangeRateId }
-    );
-    const foundExchangeRate = await ExchangeRate.query().findById(
-      exchangeRateId
+    exchangeRateLatestDTO: ExchangeRateLatestDTO
+  ): Promise<EchangeRateLatestPOJO> {
+    const exchange = new ExchangeRate(ExchangeRateServiceType.OpenExchangeRate);
+    const exchangeRate = await exchange.latest(
+      'USD',
+      exchangeRateLatestDTO.toCurrency
     );
 
-    if (!foundExchangeRate) {
-      this.logger.info('[exchange_rates] exchange rate not found.', {
-        tenantId,
-        exchangeRateId,
-      });
-      throw new ServiceError(ERRORS.EXCHANGE_RATE_NOT_FOUND);
-    }
+    return {
+      baseCurrency: 'USD',
+      toCurrency: exchangeRateLatestDTO.toCurrency,
+      exchangeRate,
+    };
   }
 }

From 1b20d1b073319e2814c56a96a15e92786771aaaf Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Sun, 28 Jan 2024 18:47:49 +0200
Subject: [PATCH 05/39] feat(server): add application layer to exchange rate
 service

---
 .../src/api/controllers/ExchangeRates.ts      |  8 ++--
 .../server/src/interfaces/ExchangeRate.ts     | 43 ++++---------------
 .../src/lib/ExchangeRate/OpenExchangeRate.ts  | 19 ++++++++
 .../ExchangeRates/ExchangeRateApplication.ts  | 21 +++++++++
 .../ExchangeRates/ExchangeRatesService.ts     | 13 +-----
 5 files changed, 54 insertions(+), 50 deletions(-)
 create mode 100644 packages/server/src/services/ExchangeRates/ExchangeRateApplication.ts

diff --git a/packages/server/src/api/controllers/ExchangeRates.ts b/packages/server/src/api/controllers/ExchangeRates.ts
index 4ea59ad1b..5a935a173 100644
--- a/packages/server/src/api/controllers/ExchangeRates.ts
+++ b/packages/server/src/api/controllers/ExchangeRates.ts
@@ -1,16 +1,16 @@
 import { Service, Inject } from 'typedi';
 import { Router, Request, Response, NextFunction } from 'express';
-import { check, param, query } from 'express-validator';
+import { query } from 'express-validator';
 import asyncMiddleware from '@/api/middleware/asyncMiddleware';
 import BaseController from './BaseController';
 import { ServiceError } from '@/exceptions';
-import { ExchangeRatesService } from '@/services/ExchangeRates/ExchangeRatesService';
 import { EchangeRateErrors } from '@/lib/ExchangeRate/types';
+import { ExchangeRateApplication } from '@/services/ExchangeRates/ExchangeRateApplication';
 
 @Service()
 export default class ExchangeRatesController extends BaseController {
   @Inject()
-  private exchangeRatesService: ExchangeRatesService;
+  private exchangeRatesApp: ExchangeRateApplication;
 
   /**
    * Constructor method.
@@ -43,7 +43,7 @@ export default class ExchangeRatesController extends BaseController {
     const exchangeRateQuery = this.matchedQueryData(req);
 
     try {
-      const exchangeRate = await this.exchangeRatesService.latest(
+      const exchangeRate = await this.exchangeRatesApp.latest(
         tenantId,
         exchangeRateQuery
       );
diff --git a/packages/server/src/interfaces/ExchangeRate.ts b/packages/server/src/interfaces/ExchangeRate.ts
index fc3bd33e4..757ca5f3d 100644
--- a/packages/server/src/interfaces/ExchangeRate.ts
+++ b/packages/server/src/interfaces/ExchangeRate.ts
@@ -1,36 +1,9 @@
-import { IFilterRole } from './DynamicFilter';
+export interface ExchangeRateLatestDTO {
+  toCurrency: string;
+}
 
-export interface IExchangeRate {
-  id: number,
-  currencyCode: string,
-  exchangeRate: number,
-  date: Date,
-  createdAt: Date,
-  updatedAt: Date,
-};
-
-export interface IExchangeRateDTO {
-  currencyCode: string,
-  exchangeRate: number,
-  date: Date,
-};
-
-export interface IExchangeRateEditDTO {
-  exchangeRate: number,
-};
-
-export interface IExchangeRateFilter {
-  page: number,
-  pageSize: number,
-  filterRoles?: IFilterRole[];
-  columnSortBy: string;
-  sortOrder: string;
-};
-
-export interface IExchangeRatesService {
-  newExchangeRate(tenantId: number, exchangeRateDTO: IExchangeRateDTO): Promise<IExchangeRate>;
-  editExchangeRate(tenantId: number, exchangeRateId: number, editExRateDTO: IExchangeRateEditDTO): Promise<void>;
-
-  deleteExchangeRate(tenantId: number, exchangeRateId: number): Promise<void>;
-  listExchangeRates(tenantId: number, exchangeRateFilter: IExchangeRateFilter): Promise<void>;
-};
\ No newline at end of file
+export interface EchangeRateLatestPOJO {
+  baseCurrency: string;
+  toCurrency: string;
+  exchangeRate: number;
+}
diff --git a/packages/server/src/lib/ExchangeRate/OpenExchangeRate.ts b/packages/server/src/lib/ExchangeRate/OpenExchangeRate.ts
index 5f0a9b15b..221c5c5c5 100644
--- a/packages/server/src/lib/ExchangeRate/OpenExchangeRate.ts
+++ b/packages/server/src/lib/ExchangeRate/OpenExchangeRate.ts
@@ -18,6 +18,9 @@ export class OpenExchangeRate implements IExchangeRateService {
     baseCurrency: string,
     toCurrency: string
   ): Promise<number> {
+    // Vaclidates the Open Exchange Rate api id early.
+    this.validateApiIdExistance();
+
     try {
       const result = await Axios.get(OPEN_EXCHANGE_RATE_LATEST_URL, {
         params: {
@@ -32,9 +35,25 @@ export class OpenExchangeRate implements IExchangeRateService {
     }
   }
 
+  /**
+   * Validates the Open Exchange Rate api id.
+   * @throws {ServiceError}
+   */
+  private validateApiIdExistance() {
+    const apiId = config.exchangeRate.openExchangeRate.appId;
+
+    if (!apiId) {
+      throw new ServiceError(
+        EchangeRateErrors.EX_RATE_SERVICE_API_KEY_REQUIRED,
+        'Invalid App ID provided. Please sign up at https://openexchangerates.org/signup, or contact support@openexchangerates.org.'
+      );
+    }
+  }
+
   /**
    * Handles the latest errors.
    * @param {any} error
+   * @throws {ServiceError}
    */
   private handleLatestErrors(error: any) {
     if (error.response.data?.message === 'missing_app_id') {
diff --git a/packages/server/src/services/ExchangeRates/ExchangeRateApplication.ts b/packages/server/src/services/ExchangeRates/ExchangeRateApplication.ts
new file mode 100644
index 000000000..9e51c5d72
--- /dev/null
+++ b/packages/server/src/services/ExchangeRates/ExchangeRateApplication.ts
@@ -0,0 +1,21 @@
+import { Inject } from 'typedi';
+import { ExchangeRatesService } from './ExchangeRatesService';
+import { EchangeRateLatestPOJO, ExchangeRateLatestDTO } from '@/interfaces';
+
+export class ExchangeRateApplication {
+  @Inject()
+  private exchangeRateService: ExchangeRatesService;
+
+  /**
+   * Gets the latest exchange rate.
+   * @param {number} tenantId
+   * @param {ExchangeRateLatestDTO} exchangeRateLatestDTO
+   * @returns {Promise<EchangeRateLatestPOJO>}
+   */
+  public latest(
+    tenantId: number,
+    exchangeRateLatestDTO: ExchangeRateLatestDTO
+  ): Promise<EchangeRateLatestPOJO> {
+    return this.exchangeRateService.latest(tenantId, exchangeRateLatestDTO);
+  }
+}
diff --git a/packages/server/src/services/ExchangeRates/ExchangeRatesService.ts b/packages/server/src/services/ExchangeRates/ExchangeRatesService.ts
index bb2437abc..ae322cdff 100644
--- a/packages/server/src/services/ExchangeRates/ExchangeRatesService.ts
+++ b/packages/server/src/services/ExchangeRates/ExchangeRatesService.ts
@@ -1,16 +1,7 @@
-import { Service, Inject } from 'typedi';
-import { IExchangeRatesService } from '@/interfaces';
+import { Service } from 'typedi';
 import { ExchangeRate } from '@/lib/ExchangeRate/ExchangeRate';
 import { ExchangeRateServiceType } from '@/lib/ExchangeRate/types';
-interface ExchangeRateLatestDTO {
-  toCurrency: string;
-}
-
-interface EchangeRateLatestPOJO {
-  baseCurrency: string;
-  toCurrency: string;
-  exchangeRate: number;
-}
+import { EchangeRateLatestPOJO, ExchangeRateLatestDTO } from '@/interfaces';
 
 @Service()
 export class ExchangeRatesService {

From 1740226294f2289666565ecaf6796094bef7a3fc Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Sun, 28 Jan 2024 18:48:35 +0200
Subject: [PATCH 06/39] feat(webapp): hook up latest exchange rate api

---
 .../Entries/AutoExchangeProvider.tsx          |  9 ++---
 .../webapp/src/hooks/query/exchangeRates.tsx  | 39 ++++++++-----------
 2 files changed, 20 insertions(+), 28 deletions(-)

diff --git a/packages/webapp/src/containers/Entries/AutoExchangeProvider.tsx b/packages/webapp/src/containers/Entries/AutoExchangeProvider.tsx
index 6554b85a1..dcaf86283 100644
--- a/packages/webapp/src/containers/Entries/AutoExchangeProvider.tsx
+++ b/packages/webapp/src/containers/Entries/AutoExchangeProvider.tsx
@@ -1,6 +1,5 @@
-import { useExchangeRate } from '@/hooks/query';
-import { useCurrentOrganization } from '@/hooks/state';
 import React from 'react';
+import { useLatestExchangeRate } from '@/hooks/query';
 
 interface AutoExchangeRateProviderProps {
   children: React.ReactNode;
@@ -18,15 +17,15 @@ const AutoExchangeRateContext = React.createContext(
 function AutoExchangeRateProvider({ children }: AutoExchangeRateProviderProps) {
   const [autoExRateCurrency, setAutoExRateCurrency] =
     React.useState<string>('');
-  const currentOrganization = useCurrentOrganization();
 
   // Retrieves the exchange rate.
   const { data: autoExchangeRate, isLoading: isAutoExchangeRateLoading } =
-    useExchangeRate(autoExRateCurrency, currentOrganization.base_currency, {
-      enabled: Boolean(currentOrganization.base_currency && autoExRateCurrency),
+    useLatestExchangeRate(autoExRateCurrency, {
+      enabled: Boolean(autoExRateCurrency),
       refetchOnWindowFocus: false,
       staleTime: 0,
       cacheTime: 0,
+      retry: 0,
     });
 
   const value = {
diff --git a/packages/webapp/src/hooks/query/exchangeRates.tsx b/packages/webapp/src/hooks/query/exchangeRates.tsx
index f56958040..a0f58f7ac 100644
--- a/packages/webapp/src/hooks/query/exchangeRates.tsx
+++ b/packages/webapp/src/hooks/query/exchangeRates.tsx
@@ -1,34 +1,27 @@
 // @ts-nocheck
 import { useQuery } from 'react-query';
 import QUERY_TYPES from './types';
+import useApiRequest from '../useRequest';
 
-function getRandomItemFromArray(arr) {
-  const randomIndex = Math.floor(Math.random() * arr.length);
-  return arr[randomIndex];
-}
-function delay(t, val) {
-  return new Promise((resolve) => setTimeout(resolve, t, val));
-}
 /**
- * Retrieves tax rates.
+ * Retrieves latest exchange rate.
  * @param {number} customerId - Customer id.
  */
-export function useExchangeRate(
-  fromCurrency: string,
-  toCurrency: string,
-  props,
-) {
-  return useQuery(
-    [QUERY_TYPES.EXCHANGE_RATE, fromCurrency, toCurrency],
-    async () => {
-      await delay(100);
+export function useLatestExchangeRate(toCurrency: string, props) {
+  const apiRequest = useApiRequest();
 
-      return {
-        from_currency: fromCurrency,
-        to_currency: toCurrency,
-        exchange_rate: 1.00,
-      };
-    },
+  return useQuery(
+    [QUERY_TYPES.EXCHANGE_RATE, toCurrency],
+    () =>
+      apiRequest
+        .http({
+          url: `/api/exchange_rates/latest`,
+          method: 'get',
+          params: {
+            to_currency: toCurrency,
+          },
+        })
+        .then((res) => res.data),
     props,
   );
 }

From 74a07847a4ce8fb1983a18beaadb320918f77dff Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Sun, 28 Jan 2024 20:10:23 +0200
Subject: [PATCH 07/39] feat(server): ability to assign the base currency as
 api query when getting latest ex. rate

---
 .../server/src/api/controllers/ExchangeRates.ts |  9 +++++++--
 packages/server/src/interfaces/ExchangeRate.ts  |  1 +
 .../ExchangeRates/ExchangeRatesService.ts       | 17 ++++++++++++-----
 .../server/src/system/models/TenantMetadata.ts  |  2 ++
 .../containers/Entries/AutoExchangeProvider.tsx | 17 ++++++++++-------
 .../webapp/src/hooks/query/exchangeRates.tsx    | 13 +++++++++++--
 6 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/packages/server/src/api/controllers/ExchangeRates.ts b/packages/server/src/api/controllers/ExchangeRates.ts
index 5a935a173..63c476bf9 100644
--- a/packages/server/src/api/controllers/ExchangeRates.ts
+++ b/packages/server/src/api/controllers/ExchangeRates.ts
@@ -1,6 +1,6 @@
 import { Service, Inject } from 'typedi';
 import { Router, Request, Response, NextFunction } from 'express';
-import { query } from 'express-validator';
+import { query, oneOf } from 'express-validator';
 import asyncMiddleware from '@/api/middleware/asyncMiddleware';
 import BaseController from './BaseController';
 import { ServiceError } from '@/exceptions';
@@ -20,7 +20,12 @@ export default class ExchangeRatesController extends BaseController {
 
     router.get(
       '/latest',
-      [query('to_currency').exists().isString()],
+      [
+        oneOf([
+          query('to_currency').exists().isString().isISO4217(),
+          query('from_currency').exists().isString().isISO4217(),
+        ]),
+      ],
       this.validationResult,
       asyncMiddleware(this.latestExchangeRate.bind(this)),
       this.handleServiceError
diff --git a/packages/server/src/interfaces/ExchangeRate.ts b/packages/server/src/interfaces/ExchangeRate.ts
index 757ca5f3d..45080fc0f 100644
--- a/packages/server/src/interfaces/ExchangeRate.ts
+++ b/packages/server/src/interfaces/ExchangeRate.ts
@@ -1,5 +1,6 @@
 export interface ExchangeRateLatestDTO {
   toCurrency: string;
+  fromCurrency: string;
 }
 
 export interface EchangeRateLatestPOJO {
diff --git a/packages/server/src/services/ExchangeRates/ExchangeRatesService.ts b/packages/server/src/services/ExchangeRates/ExchangeRatesService.ts
index ae322cdff..4cde544ad 100644
--- a/packages/server/src/services/ExchangeRates/ExchangeRatesService.ts
+++ b/packages/server/src/services/ExchangeRates/ExchangeRatesService.ts
@@ -2,6 +2,7 @@ import { Service } from 'typedi';
 import { ExchangeRate } from '@/lib/ExchangeRate/ExchangeRate';
 import { ExchangeRateServiceType } from '@/lib/ExchangeRate/types';
 import { EchangeRateLatestPOJO, ExchangeRateLatestDTO } from '@/interfaces';
+import { TenantMetadata } from '@/system/models';
 
 @Service()
 export class ExchangeRatesService {
@@ -15,14 +16,20 @@ export class ExchangeRatesService {
     tenantId: number,
     exchangeRateLatestDTO: ExchangeRateLatestDTO
   ): Promise<EchangeRateLatestPOJO> {
+    const organization = await TenantMetadata.query().findOne({ tenantId });
+
+    // Assign the organization base currency as a default currency
+    // if no currency is provided
+    const fromCurrency =
+      exchangeRateLatestDTO.fromCurrency || organization.baseCurrency;
+    const toCurrency =
+      exchangeRateLatestDTO.toCurrency || organization.baseCurrency;
+
     const exchange = new ExchangeRate(ExchangeRateServiceType.OpenExchangeRate);
-    const exchangeRate = await exchange.latest(
-      'USD',
-      exchangeRateLatestDTO.toCurrency
-    );
+    const exchangeRate = await exchange.latest(fromCurrency, toCurrency);
 
     return {
-      baseCurrency: 'USD',
+      baseCurrency: fromCurrency,
       toCurrency: exchangeRateLatestDTO.toCurrency,
       exchangeRate,
     };
diff --git a/packages/server/src/system/models/TenantMetadata.ts b/packages/server/src/system/models/TenantMetadata.ts
index 4664cfd6d..7040a6a68 100644
--- a/packages/server/src/system/models/TenantMetadata.ts
+++ b/packages/server/src/system/models/TenantMetadata.ts
@@ -1,6 +1,8 @@
 import BaseModel from 'models/Model';
 
 export default class TenantMetadata extends BaseModel {
+  baseCurrency: string;
+
   /**
    * Table name.
    */
diff --git a/packages/webapp/src/containers/Entries/AutoExchangeProvider.tsx b/packages/webapp/src/containers/Entries/AutoExchangeProvider.tsx
index dcaf86283..c4b5ea1f9 100644
--- a/packages/webapp/src/containers/Entries/AutoExchangeProvider.tsx
+++ b/packages/webapp/src/containers/Entries/AutoExchangeProvider.tsx
@@ -20,13 +20,16 @@ function AutoExchangeRateProvider({ children }: AutoExchangeRateProviderProps) {
 
   // Retrieves the exchange rate.
   const { data: autoExchangeRate, isLoading: isAutoExchangeRateLoading } =
-    useLatestExchangeRate(autoExRateCurrency, {
-      enabled: Boolean(autoExRateCurrency),
-      refetchOnWindowFocus: false,
-      staleTime: 0,
-      cacheTime: 0,
-      retry: 0,
-    });
+    useLatestExchangeRate(
+      { fromCurrency: autoExRateCurrency },
+      {
+        enabled: Boolean(autoExRateCurrency),
+        refetchOnWindowFocus: false,
+        staleTime: 0,
+        cacheTime: 0,
+        retry: 0,
+      },
+    );
 
   const value = {
     autoExRateCurrency,
diff --git a/packages/webapp/src/hooks/query/exchangeRates.tsx b/packages/webapp/src/hooks/query/exchangeRates.tsx
index a0f58f7ac..36700276b 100644
--- a/packages/webapp/src/hooks/query/exchangeRates.tsx
+++ b/packages/webapp/src/hooks/query/exchangeRates.tsx
@@ -3,15 +3,23 @@ import { useQuery } from 'react-query';
 import QUERY_TYPES from './types';
 import useApiRequest from '../useRequest';
 
+interface LatestExchangeRateQuery {
+  fromCurrency?: string;
+  toCurrency?: string;
+}
+
 /**
  * Retrieves latest exchange rate.
  * @param {number} customerId - Customer id.
  */
-export function useLatestExchangeRate(toCurrency: string, props) {
+export function useLatestExchangeRate(
+  { toCurrency, fromCurrency }: LatestExchangeRateQuery,
+  props,
+) {
   const apiRequest = useApiRequest();
 
   return useQuery(
-    [QUERY_TYPES.EXCHANGE_RATE, toCurrency],
+    [QUERY_TYPES.EXCHANGE_RATE, toCurrency, fromCurrency],
     () =>
       apiRequest
         .http({
@@ -19,6 +27,7 @@ export function useLatestExchangeRate(toCurrency: string, props) {
           method: 'get',
           params: {
             to_currency: toCurrency,
+            from_currency: fromCurrency,
           },
         })
         .then((res) => res.data),

From 59c5c8979de223fe41526eee95d28a3ce3067c5a Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Mon, 29 Jan 2024 18:39:28 +0200
Subject: [PATCH 08/39] feat(webapp): add default exchange rate value to 1 in
 cause the ex. rate service returned error or failed.

---
 .../withExRateItemEntriesPriceRecalc.tsx      | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/webapp/src/containers/Entries/withExRateItemEntriesPriceRecalc.tsx b/packages/webapp/src/containers/Entries/withExRateItemEntriesPriceRecalc.tsx
index 490ef20b5..a1fd7af39 100644
--- a/packages/webapp/src/containers/Entries/withExRateItemEntriesPriceRecalc.tsx
+++ b/packages/webapp/src/containers/Entries/withExRateItemEntriesPriceRecalc.tsx
@@ -98,24 +98,30 @@ interface UseSyncExRateToFormProps {
  */
 export const useSyncExRateToForm = ({ onSynced }: UseSyncExRateToFormProps) => {
   const { setFieldValue, values } = useFormikContext();
-  const { autoExRateCurrency, autoExchangeRate } = useAutoExRateContext();
+  const { autoExRateCurrency, autoExchangeRate, isAutoExchangeRateLoading } =
+    useAutoExRateContext();
   const updateEntriesOnExChange = useUpdateEntriesOnExchangeRateChange();
 
   // Sync the fetched real-time exchanage rate to the form.
   useEffect(() => {
-    if (autoExchangeRate?.exchange_rate && autoExRateCurrency) {
-      setFieldValue('exchange_rate', autoExchangeRate?.exchange_rate + '');
+    if (!isAutoExchangeRateLoading && autoExRateCurrency) {
+      // Sets a default ex. rate to 1 in case the exchange rate service wasn't configured.
+      // or returned an error from the server-side.
+      const exchangeRate = autoExchangeRate?.exchange_rate || 1;
+
+      setFieldValue('exchange_rate', exchangeRate + '');
       setFieldValue(
         'entries',
-        updateEntriesOnExChange(
-          values.exchange_rate,
-          autoExchangeRate?.exchange_rate,
-        ),
+        updateEntriesOnExChange(values.exchange_rate, exchangeRate),
       );
       onSynced?.();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [autoExchangeRate?.exchange_rate, autoExRateCurrency]);
+  }, [
+    autoExchangeRate?.exchange_rate,
+    autoExRateCurrency,
+    isAutoExchangeRateLoading,
+  ]);
 
   return null;
 };

From f93c8b46dcf222268057424869160943bc8cfb1a Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Mon, 29 Jan 2024 18:42:54 +0200
Subject: [PATCH 09/39] chore: change env name in .env.example

---
 .env.example | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.env.example b/.env.example
index 7af1c6061..f32107eb4 100644
--- a/.env.example
+++ b/.env.example
@@ -63,4 +63,4 @@ GOTENBERG_DOCS_URL=http://server:3000/public/
 EXCHANGE_RATE_SERVICE=open-exchange-rate
 
 # Open Exchange Rate
-OPEN_EXCHANGE_RATE_APP_I=
\ No newline at end of file
+OPEN_EXCHANGE_RATE_APP_ID=
\ No newline at end of file

From d01eacf8d962f25899139bfd3b3ab0381f7e9841 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Mon, 29 Jan 2024 19:18:59 +0200
Subject: [PATCH 10/39] feat(server): add `formattedAmount` to purchase invoice
 to POJO

---
 .../src/services/Purchases/Bills/PurchaseInvoiceTransformer.ts   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/server/src/services/Purchases/Bills/PurchaseInvoiceTransformer.ts b/packages/server/src/services/Purchases/Bills/PurchaseInvoiceTransformer.ts
index 4ec163d8b..4cb92adf9 100644
--- a/packages/server/src/services/Purchases/Bills/PurchaseInvoiceTransformer.ts
+++ b/packages/server/src/services/Purchases/Bills/PurchaseInvoiceTransformer.ts
@@ -13,6 +13,7 @@ export class PurchaseInvoiceTransformer extends Transformer {
     return [
       'formattedBillDate',
       'formattedDueDate',
+      'formattedAmount',
       'formattedPaymentAmount',
       'formattedBalance',
       'formattedDueAmount',

From a52f3a933fe6073e5fee16d41971e03a0feeebf9 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Mon, 29 Jan 2024 19:19:46 +0200
Subject: [PATCH 11/39] fix(webapp): inconsistency in currency of universal
 search items

---
 .../CreditNotes/VendorCreditIUniversalSearchBind.tsx          | 4 ++--
 .../Purchases/PaymentMades/PaymentMadeUniversalSearch.tsx     | 1 +
 .../Sales/CreditNotes/CreditNoteUniversalSearch.tsx           | 2 +-
 .../src/containers/Sales/Invoices/InvoiceUniversalSearch.tsx  | 2 +-
 .../src/containers/Sales/Receipts/ReceiptUniversalSearch.tsx  | 2 +-
 .../webapp/src/containers/Vendors/VendorsUniversalSearch.tsx  | 2 +-
 6 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/webapp/src/containers/Purchases/CreditNotes/VendorCreditIUniversalSearchBind.tsx b/packages/webapp/src/containers/Purchases/CreditNotes/VendorCreditIUniversalSearchBind.tsx
index fa82987e3..a360ab617 100644
--- a/packages/webapp/src/containers/Purchases/CreditNotes/VendorCreditIUniversalSearchBind.tsx
+++ b/packages/webapp/src/containers/Purchases/CreditNotes/VendorCreditIUniversalSearchBind.tsx
@@ -22,7 +22,7 @@ function VendorCreditUniversalSearchSelectComponent({
   openDrawer,
 }) {
   if (resourceType === RESOURCES_TYPES.VENDOR_CREDIT) {
-    openDrawer(DRAWERS.VENDOR_CREDIT_DETAIL_DRAWER, {
+    openDrawer(DRAWERS.VENDOR_CREDIT_DETAILS, {
       vendorCreditId: resourceId,
     });
     onAction && onAction();
@@ -83,7 +83,7 @@ export function VendorCreditUniversalSearchItem(
       }
       label={
         <>
-          <div class="amount">${item.reference.amount}</div>
+          <div class="amount">{item.reference.formatted_amount}</div>
           <VendorCreditUniversalSearchStatus receipt={item.reference} />
         </>
       }
diff --git a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentMadeUniversalSearch.tsx b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentMadeUniversalSearch.tsx
index f1cdc60ce..890401038 100644
--- a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentMadeUniversalSearch.tsx
+++ b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentMadeUniversalSearch.tsx
@@ -7,6 +7,7 @@ import { Icon } from '@/components';
 import { RESOURCES_TYPES } from '@/constants/resourcesTypes';
 import { highlightText } from '@/utils';
 import { AbilitySubject, PaymentMadeAction } from '@/constants/abilityOption';
+import { DRAWERS } from '@/constants/drawers';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
 /**
diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteUniversalSearch.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteUniversalSearch.tsx
index 2c495f802..8407a4f39 100644
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteUniversalSearch.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteUniversalSearch.tsx
@@ -82,7 +82,7 @@ export function CreditNoteUniversalSearchItem(
       }
       label={
         <>
-          <div class="amount">${item.reference.amount}</div>
+          <div class="amount">{item.reference.formatted_amount}</div>
           <CreditNoteUniversalSearchStatus receipt={item.reference} />
         </>
       }
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceUniversalSearch.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceUniversalSearch.tsx
index 1656b9bc7..a86141612 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceUniversalSearch.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceUniversalSearch.tsx
@@ -89,7 +89,7 @@ export function InvoiceUniversalSearchItem(
       }
       label={
         <>
-          <div class="amount">${item.reference.total_formatted}</div>
+          <div class="amount">{item.reference.total_formatted}</div>
           <InvoiceStatus customer={item.reference} />
         </>
       }
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptUniversalSearch.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptUniversalSearch.tsx
index 2eb9405ac..abaea4004 100644
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptUniversalSearch.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptUniversalSearch.tsx
@@ -75,7 +75,7 @@ export function ReceiptUniversalSearchItem(
       }
       label={
         <>
-          <div class="amount">${item.reference.formatted_amount}</div>
+          <div class="amount">{item.reference.formatted_amount}</div>
           <ReceiptStatus receipt={item.reference} />
         </>
       }
diff --git a/packages/webapp/src/containers/Vendors/VendorsUniversalSearch.tsx b/packages/webapp/src/containers/Vendors/VendorsUniversalSearch.tsx
index 84ccdfcb7..8134cc25c 100644
--- a/packages/webapp/src/containers/Vendors/VendorsUniversalSearch.tsx
+++ b/packages/webapp/src/containers/Vendors/VendorsUniversalSearch.tsx
@@ -34,7 +34,7 @@ const VendorUniversalSearchSelectAction = withDrawerActions(
 const vendorToSearch = (contact) => ({
   id: contact.id,
   text: contact.display_name,
-  label: contact.balance > 0 ? contact.formatted_balance + '' : '',
+  label: contact.formatted_balance,
   reference: contact,
 });
 

From ba387e81f761f87b7e1e38ff572e4d78cf7dcea3 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Mon, 29 Jan 2024 23:25:37 +0200
Subject: [PATCH 12/39] hotfix: editing sales and expense transactions don't
 reflect GL entries

---
 .../server/src/api/controllers/Purchases/VendorCredit.ts | 9 ++++-----
 .../server/src/services/CreditNotes/EditCreditNote.ts    | 2 +-
 .../server/src/services/Expenses/CRUD/EditExpense.ts     | 2 +-
 .../src/services/Expenses/ExpenseGLEntriesStorage.ts     | 2 +-
 .../src/services/Expenses/ExpenseGLEntriesSubscriber.ts  | 6 +++---
 .../services/Purchases/VendorCredits/EditVendorCredit.ts | 6 +++++-
 .../src/services/Sales/Receipts/SaleReceiptGLEntries.ts  | 2 +-
 packages/webapp/src/hooks/query/bills.tsx                | 3 +++
 packages/webapp/src/hooks/query/creditNote.tsx           | 3 +++
 packages/webapp/src/hooks/query/invoices.tsx             | 3 +++
 packages/webapp/src/hooks/query/paymentReceives.tsx      | 3 +++
 packages/webapp/src/hooks/query/receipts.tsx             | 3 +++
 packages/webapp/src/hooks/query/vendorCredit.tsx         | 3 +++
 13 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/packages/server/src/api/controllers/Purchases/VendorCredit.ts b/packages/server/src/api/controllers/Purchases/VendorCredit.ts
index 3d2832308..79ae6741b 100644
--- a/packages/server/src/api/controllers/Purchases/VendorCredit.ts
+++ b/packages/server/src/api/controllers/Purchases/VendorCredit.ts
@@ -320,20 +320,19 @@ export default class VendorCreditController extends BaseController {
     res: Response,
     next: NextFunction
   ) => {
-    const { id: billId } = req.params;
+    const { id: vendorCreditId } = req.params;
     const { tenantId, user } = req;
     const vendorCreditEditDTO: IVendorCreditEditDTO = this.matchedBodyData(req);
 
     try {
       await this.editVendorCreditService.editVendorCredit(
         tenantId,
-        billId,
-        vendorCreditEditDTO,
-        user
+        vendorCreditId,
+        vendorCreditEditDTO
       );
 
       return res.status(200).send({
-        id: billId,
+        id: vendorCreditId,
         message: 'The vendor credit has been edited successfully.',
       });
     } catch (error) {
diff --git a/packages/server/src/services/CreditNotes/EditCreditNote.ts b/packages/server/src/services/CreditNotes/EditCreditNote.ts
index 074115c04..0e045227d 100644
--- a/packages/server/src/services/CreditNotes/EditCreditNote.ts
+++ b/packages/server/src/services/CreditNotes/EditCreditNote.ts
@@ -80,7 +80,7 @@ export default class EditCreditNote extends BaseCreditNotes {
       } as ICreditNoteEditingPayload);
 
       // Saves the credit note graph to the storage.
-      const creditNote = await CreditNote.query(trx).upsertGraph({
+      const creditNote = await CreditNote.query(trx).upsertGraphAndFetch({
         id: creditNoteId,
         ...creditNoteModel,
       });
diff --git a/packages/server/src/services/Expenses/CRUD/EditExpense.ts b/packages/server/src/services/Expenses/CRUD/EditExpense.ts
index 93b0acc62..e3aeb06ce 100644
--- a/packages/server/src/services/Expenses/CRUD/EditExpense.ts
+++ b/packages/server/src/services/Expenses/CRUD/EditExpense.ts
@@ -136,7 +136,7 @@ export class EditExpense {
       } as IExpenseEventEditingPayload);
 
       // Upsert the expense object with expense entries.
-      const expense: IExpense = await Expense.query(trx).upsertGraph({
+      const expense: IExpense = await Expense.query(trx).upsertGraphAndFetch({
         id: expenseId,
         ...expenseObj,
       });
diff --git a/packages/server/src/services/Expenses/ExpenseGLEntriesStorage.ts b/packages/server/src/services/Expenses/ExpenseGLEntriesStorage.ts
index 0821c3bd4..76b450c39 100644
--- a/packages/server/src/services/Expenses/ExpenseGLEntriesStorage.ts
+++ b/packages/server/src/services/Expenses/ExpenseGLEntriesStorage.ts
@@ -1,7 +1,7 @@
 import { Knex } from 'knex';
+import { Service, Inject } from 'typedi';
 import LedgerStorageService from '@/services/Accounting/LedgerStorageService';
 import HasTenancyService from '@/services/Tenancy/TenancyService';
-import { Service, Inject } from 'typedi';
 import { ExpenseGLEntries } from './ExpenseGLEntries';
 
 @Service()
diff --git a/packages/server/src/services/Expenses/ExpenseGLEntriesSubscriber.ts b/packages/server/src/services/Expenses/ExpenseGLEntriesSubscriber.ts
index 1a177876e..4c69b7f04 100644
--- a/packages/server/src/services/Expenses/ExpenseGLEntriesSubscriber.ts
+++ b/packages/server/src/services/Expenses/ExpenseGLEntriesSubscriber.ts
@@ -70,10 +70,10 @@ export class ExpensesWriteGLSubscriber {
     authorizedUser,
     trx,
   }: IExpenseEventEditPayload) => {
-    // In case expense published, write journal entries.
-    if (expense.publishedAt) return;
+    // Cannot continue if the expense is not published.
+    if (!expense.publishedAt) return;
 
-    await this.expenseGLEntries.writeExpenseGLEntries(
+    await this.expenseGLEntries.rewriteExpenseGLEntries(
       tenantId,
       expense.id,
       trx
diff --git a/packages/server/src/services/Purchases/VendorCredits/EditVendorCredit.ts b/packages/server/src/services/Purchases/VendorCredits/EditVendorCredit.ts
index d76dd3690..a0ff0f421 100644
--- a/packages/server/src/services/Purchases/VendorCredits/EditVendorCredit.ts
+++ b/packages/server/src/services/Purchases/VendorCredits/EditVendorCredit.ts
@@ -9,6 +9,7 @@ import UnitOfWork from '@/services/UnitOfWork';
 import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
 import ItemsEntriesService from '@/services/Items/ItemsEntriesService';
 import events from '@/subscribers/events';
+import HasTenancyService from '@/services/Tenancy/TenancyService';
 
 @Service()
 export default class EditVendorCredit extends BaseVendorCredit {
@@ -21,6 +22,9 @@ export default class EditVendorCredit extends BaseVendorCredit {
   @Inject()
   private itemsEntriesService: ItemsEntriesService;
 
+  @Inject()
+  private tenancy: HasTenancyService;
+
   /**
    * Deletes the given vendor credit.
    * @param {number} tenantId - Tenant id.
@@ -31,7 +35,7 @@ export default class EditVendorCredit extends BaseVendorCredit {
     vendorCreditId: number,
     vendorCreditDTO: IVendorCreditEditDTO
   ) => {
-    const { VendorCredit } = this.tenancy.models(tenantId);
+    const { VendorCredit, Contact } = this.tenancy.models(tenantId);
 
     // Retrieve the vendor credit or throw not found service error.
     const oldVendorCredit = await this.getVendorCreditOrThrowError(
diff --git a/packages/server/src/services/Sales/Receipts/SaleReceiptGLEntries.ts b/packages/server/src/services/Sales/Receipts/SaleReceiptGLEntries.ts
index df440958f..d354141e9 100644
--- a/packages/server/src/services/Sales/Receipts/SaleReceiptGLEntries.ts
+++ b/packages/server/src/services/Sales/Receipts/SaleReceiptGLEntries.ts
@@ -32,7 +32,7 @@ export class SaleReceiptGLEntries {
   ): Promise<void> => {
     const { SaleReceipt } = this.tenancy.models(tenantId);
 
-    const saleReceipt = await SaleReceipt.query()
+    const saleReceipt = await SaleReceipt.query(trx)
       .findById(saleReceiptId)
       .withGraphFetched('entries.item');
 
diff --git a/packages/webapp/src/hooks/query/bills.tsx b/packages/webapp/src/hooks/query/bills.tsx
index 828621d89..1ec3ef0e1 100644
--- a/packages/webapp/src/hooks/query/bills.tsx
+++ b/packages/webapp/src/hooks/query/bills.tsx
@@ -32,6 +32,9 @@ const commonInvalidateQueries = (queryClient) => {
   // Invalidate financial reports.
   queryClient.invalidateQueries(t.FINANCIAL_REPORT);
 
+  // Invalidate the transactions by reference.
+  queryClient.invalidateQueries(t.TRANSACTIONS_BY_REFERENCE);
+
   // Invalidate items associated bills transactions.
   queryClient.invalidateQueries(t.ITEMS_ASSOCIATED_WITH_BILLS);
 
diff --git a/packages/webapp/src/hooks/query/creditNote.tsx b/packages/webapp/src/hooks/query/creditNote.tsx
index 99cfd535d..0fb31f873 100644
--- a/packages/webapp/src/hooks/query/creditNote.tsx
+++ b/packages/webapp/src/hooks/query/creditNote.tsx
@@ -44,6 +44,9 @@ const commonInvalidateQueries = (queryClient) => {
   // Invalidate financial reports.
   queryClient.invalidateQueries(t.FINANCIAL_REPORT);
 
+  // Invalidate transactions by reference.
+  queryClient.invalidateQueries(t.TRANSACTIONS_BY_REFERENCE);
+
   // Invalidate mutate base currency abilities.
   queryClient.invalidateQueries(t.ORGANIZATION_MUTATE_BASE_CURRENCY_ABILITIES);
 };
diff --git a/packages/webapp/src/hooks/query/invoices.tsx b/packages/webapp/src/hooks/query/invoices.tsx
index 2adbf87e0..886b04e7d 100644
--- a/packages/webapp/src/hooks/query/invoices.tsx
+++ b/packages/webapp/src/hooks/query/invoices.tsx
@@ -24,6 +24,9 @@ const commonInvalidateQueries = (queryClient) => {
 
   // Invalidate financial reports.
   queryClient.invalidateQueries(t.FINANCIAL_REPORT);
+  
+  // Invalidate transactions by reference.
+  queryClient.invalidateQueries(t.TRANSACTIONS_BY_REFERENCE);
 
   // Invalidate accounts.
   queryClient.invalidateQueries(t.ACCOUNTS);
diff --git a/packages/webapp/src/hooks/query/paymentReceives.tsx b/packages/webapp/src/hooks/query/paymentReceives.tsx
index 376993e19..5ed0118ee 100644
--- a/packages/webapp/src/hooks/query/paymentReceives.tsx
+++ b/packages/webapp/src/hooks/query/paymentReceives.tsx
@@ -24,6 +24,9 @@ const commonInvalidateQueries = (client) => {
   // Invalidate financial reports.
   client.invalidateQueries(t.FINANCIAL_REPORT);
 
+  // Invalidate transactions by reference.
+  client.invalidateQueries(t.TRANSACTIONS_BY_REFERENCE);
+
   // Invalidate customers.
   client.invalidateQueries(t.CUSTOMERS);
   client.invalidateQueries(t.CUSTOMER);
diff --git a/packages/webapp/src/hooks/query/receipts.tsx b/packages/webapp/src/hooks/query/receipts.tsx
index 7a6ae2ce9..fed4ad5af 100644
--- a/packages/webapp/src/hooks/query/receipts.tsx
+++ b/packages/webapp/src/hooks/query/receipts.tsx
@@ -21,6 +21,9 @@ const commonInvalidateQueries = (queryClient) => {
   // Invalidate financial reports.
   queryClient.invalidateQueries(t.FINANCIAL_REPORT);
 
+  // Invalidate the transactions by reference.
+  queryClient.invalidateQueries(t.TRANSACTIONS_BY_REFERENCE);
+
   // Invalidate the cashflow transactions.
   queryClient.invalidateQueries(t.CASH_FLOW_TRANSACTIONS);
   queryClient.invalidateQueries(t.CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY);
diff --git a/packages/webapp/src/hooks/query/vendorCredit.tsx b/packages/webapp/src/hooks/query/vendorCredit.tsx
index 48e424099..0d2131543 100644
--- a/packages/webapp/src/hooks/query/vendorCredit.tsx
+++ b/packages/webapp/src/hooks/query/vendorCredit.tsx
@@ -43,6 +43,9 @@ const commonInvalidateQueries = (queryClient) => {
   // Invalidate financial reports.
   queryClient.invalidateQueries(t.FINANCIAL_REPORT);
 
+  // Invalidate the transactions by reference.
+  queryClient.invalidateQueries(t.TRANSACTIONS_BY_REFERENCE);
+
   // Invalidate mutate base currency abilities.
   queryClient.invalidateQueries(t.ORGANIZATION_MUTATE_BASE_CURRENCY_ABILITIES);
 };

From ba3ea93a2d13f2b977a5b3899fff74271f227a1b Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Tue, 30 Jan 2024 00:28:23 +0200
Subject: [PATCH 13/39] chore: dump CHANGELOG.md

---
 CHANGELOG.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4c2938ad4..ae75e5f45 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 All notable changes to Bigcapital server-side will be in this file.
 
+## [0.14.0] - 30-01-2024
+
+* feat: purchases by items exporting by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/327
+* fix: expense amounts should not be rounded by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/339
+* feat: get latest exchange rate from third party services by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/340
+* fix(webapp): inconsistency in currency of universal search items by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/335
+* hotfix: editing sales and expense transactions don't reflect GL entries by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/342
+
 ## [0.13.3] - 22-01-2024
 
 * hotfix(server): Unhandled thrown errors of services by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/329

From 7b5287ee8011e607fac5b9efcf153661a8ca6736 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Mon, 5 Feb 2024 18:50:34 +0200
Subject: [PATCH 14/39] fix(server): Revert the paid amount to bill transaction
 after editing bill payment amount

---
 .../BillPayments/BillPaymentValidators.ts          | 14 --------------
 .../Purchases/BillPayments/DeleteBillPayment.ts    | 10 ++--------
 .../Purchases/BillPayments/EditBillPayment.ts      | 12 ++++++------
 .../Purchases/BillPayments/GetBillPayment.ts       | 13 ++-----------
 .../Purchases/BillPayments/GetPaymentBills.ts      |  7 +++----
 .../Sales/PaymentReceives/EditPaymentReceive.ts    |  3 ++-
 6 files changed, 15 insertions(+), 44 deletions(-)

diff --git a/packages/server/src/services/Purchases/BillPayments/BillPaymentValidators.ts b/packages/server/src/services/Purchases/BillPayments/BillPaymentValidators.ts
index 3aa2902ca..8bbfadbff 100644
--- a/packages/server/src/services/Purchases/BillPayments/BillPaymentValidators.ts
+++ b/packages/server/src/services/Purchases/BillPayments/BillPaymentValidators.ts
@@ -10,7 +10,6 @@ import {
 import TenancyService from '@/services/Tenancy/TenancyService';
 import { ServiceError } from '@/exceptions';
 import { ACCOUNT_TYPE } from '@/data/AccountTypes';
-import { BillPayment } from '@/models';
 import { ERRORS } from './constants';
 
 @Service()
@@ -18,19 +17,6 @@ export class BillPaymentValidators {
   @Inject()
   private tenancy: TenancyService;
 
-  /**
-   * Validates the payment existance.
-   * @param {BillPayment | undefined | null} payment
-   * @throws {ServiceError(ERRORS.PAYMENT_MADE_NOT_FOUND)}
-   */
-  public async validateBillPaymentExistance(
-    payment: BillPayment | undefined | null
-  ) {
-    if (!payment) {
-      throw new ServiceError(ERRORS.PAYMENT_MADE_NOT_FOUND);
-    }
-  }
-
   /**
    * Validates the bill payment existance.
    * @param {Request} req
diff --git a/packages/server/src/services/Purchases/BillPayments/DeleteBillPayment.ts b/packages/server/src/services/Purchases/BillPayments/DeleteBillPayment.ts
index 4ab1c9a25..e4a1ab1fa 100644
--- a/packages/server/src/services/Purchases/BillPayments/DeleteBillPayment.ts
+++ b/packages/server/src/services/Purchases/BillPayments/DeleteBillPayment.ts
@@ -1,6 +1,5 @@
 import { Knex } from 'knex';
 import UnitOfWork from '@/services/UnitOfWork';
-import { BillPaymentValidators } from './BillPaymentValidators';
 import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
 import HasTenancyService from '@/services/Tenancy/TenancyService';
 import { Inject, Service } from 'typedi';
@@ -21,9 +20,6 @@ export class DeleteBillPayment {
   @Inject()
   private uow: UnitOfWork;
 
-  @Inject()
-  private validators: BillPaymentValidators;
-
   /**
    * Deletes the bill payment and associated transactions.
    * @param  {number} tenantId - Tenant id.
@@ -36,10 +32,8 @@ export class DeleteBillPayment {
     // Retrieve the bill payment or throw not found service error.
     const oldBillPayment = await BillPayment.query()
       .withGraphFetched('entries')
-      .findById(billPaymentId);
-
-    // Validates the bill payment existance.
-    this.validators.validateBillPaymentExistance(oldBillPayment);
+      .findById(billPaymentId)
+      .throwIfNotFound();
 
     // Deletes the bill transactions with associated transactions under
     // unit-of-work envirement.
diff --git a/packages/server/src/services/Purchases/BillPayments/EditBillPayment.ts b/packages/server/src/services/Purchases/BillPayments/EditBillPayment.ts
index 20c72d38b..de18853bb 100644
--- a/packages/server/src/services/Purchases/BillPayments/EditBillPayment.ts
+++ b/packages/server/src/services/Purchases/BillPayments/EditBillPayment.ts
@@ -57,12 +57,12 @@ export class EditBillPayment {
 
     const tenantMeta = await TenantMetadata.query().findOne({ tenantId });
 
-    const oldBillPayment = await BillPayment.query().findById(billPaymentId);
+    const oldBillPayment = await BillPayment.query()
+      .findById(billPaymentId)
+      .withGraphFetched('entries')
+      .throwIfNotFound();
 
-    // Validates the bill payment existance.
-    this.validators.validateBillPaymentExistance(oldBillPayment);
-
-    //
+    // Retrieves the bill payment vendor or throw not found error.
     const vendor = await Contact.query()
       .modify('vendor')
       .findById(billPaymentDTO.vendorId)
@@ -126,7 +126,7 @@ export class EditBillPayment {
         trx,
       } as IBillPaymentEditingPayload);
 
-      // Deletes the bill payment transaction graph from the storage.
+      // Edits the bill payment transaction graph on the storage.
       const billPayment = await BillPayment.query(trx).upsertGraphAndFetch({
         id: billPaymentId,
         ...billPaymentObj,
diff --git a/packages/server/src/services/Purchases/BillPayments/GetBillPayment.ts b/packages/server/src/services/Purchases/BillPayments/GetBillPayment.ts
index 5984e8932..ccb1cab77 100644
--- a/packages/server/src/services/Purchases/BillPayments/GetBillPayment.ts
+++ b/packages/server/src/services/Purchases/BillPayments/GetBillPayment.ts
@@ -1,12 +1,8 @@
 import { IBillPayment } from '@/interfaces';
 import HasTenancyService from '@/services/Tenancy/TenancyService';
 import { Inject, Service } from 'typedi';
-import { ERRORS } from './constants';
-import { ServiceError } from '@/exceptions';
 import { BillPaymentTransformer } from './BillPaymentTransformer';
 import { TransformerInjectable } from '@/lib/Transformer/TransformerInjectable';
-import { BillsValidators } from '../Bills/BillsValidators';
-import { BillPaymentValidators } from './BillPaymentValidators';
 
 @Service()
 export class GetBillPayment {
@@ -16,9 +12,6 @@ export class GetBillPayment {
   @Inject()
   private transformer: TransformerInjectable;
 
-  @Inject()
-  private validators: BillPaymentValidators;
-
   /**
    * Retrieve bill payment.
    * @param {number} tenantId
@@ -37,10 +30,8 @@ export class GetBillPayment {
       .withGraphFetched('paymentAccount')
       .withGraphFetched('transactions')
       .withGraphFetched('branch')
-      .findById(billPyamentId);
-
-    // Validates the bill payment existance.
-    this.validators.validateBillPaymentExistance(billPayment);
+      .findById(billPyamentId)
+      .throwIfNotFound();
 
     return this.transformer.transform(
       tenantId,
diff --git a/packages/server/src/services/Purchases/BillPayments/GetPaymentBills.ts b/packages/server/src/services/Purchases/BillPayments/GetPaymentBills.ts
index 7b86c8f04..ec839411b 100644
--- a/packages/server/src/services/Purchases/BillPayments/GetPaymentBills.ts
+++ b/packages/server/src/services/Purchases/BillPayments/GetPaymentBills.ts
@@ -18,10 +18,9 @@ export class GetPaymentBills {
   public async getPaymentBills(tenantId: number, billPaymentId: number) {
     const { Bill, BillPayment } = this.tenancy.models(tenantId);
 
-    const billPayment = await BillPayment.query().findById(billPaymentId);
-
-    // Validates the bill payment existance.
-    this.validators.validateBillPaymentExistance(billPayment);
+    const billPayment = await BillPayment.query()
+      .findById(billPaymentId)
+      .throwIfNotFound();
 
     const paymentBillsIds = billPayment.entries.map((entry) => entry.id);
 
diff --git a/packages/server/src/services/Sales/PaymentReceives/EditPaymentReceive.ts b/packages/server/src/services/Sales/PaymentReceives/EditPaymentReceive.ts
index b99413748..635f48946 100644
--- a/packages/server/src/services/Sales/PaymentReceives/EditPaymentReceive.ts
+++ b/packages/server/src/services/Sales/PaymentReceives/EditPaymentReceive.ts
@@ -61,7 +61,8 @@ export class EditPaymentReceive {
     // Validate the payment receive existance.
     const oldPaymentReceive = await PaymentReceive.query()
       .withGraphFetched('entries')
-      .findById(paymentReceiveId);
+      .findById(paymentReceiveId)
+      .throwIfNotFound();
 
     // Validates the payment existance.
     this.validators.validatePaymentExistance(oldPaymentReceive);

From b38020d3971f562ed1aafb3f93b2b1cc95bf5a8d Mon Sep 17 00:00:00 2001
From: "a.nasouf" <a.m.nasouf@gmail.com>
Date: Mon, 5 Feb 2024 18:58:02 +0200
Subject: [PATCH 15/39] fix: gmail email addresses dots gets removed

---
 .../src/api/controllers/Contacts/Contacts.ts  | 126 +++++++++---------
 .../webapp/src/components/Details/index.tsx   |   2 +-
 2 files changed, 64 insertions(+), 64 deletions(-)

diff --git a/packages/server/src/api/controllers/Contacts/Contacts.ts b/packages/server/src/api/controllers/Contacts/Contacts.ts
index a05ee93fd..2449e7d6f 100644
--- a/packages/server/src/api/controllers/Contacts/Contacts.ts
+++ b/packages/server/src/api/controllers/Contacts/Contacts.ts
@@ -1,11 +1,11 @@
-import { check, param, query, body, ValidationChain } from 'express-validator';
-import { Router, Request, Response, NextFunction } from 'express';
-import { Inject, Service } from 'typedi';
-import { ServiceError } from '@/exceptions';
-import BaseController from '@/api/controllers/BaseController';
-import ContactsService from '@/services/Contacts/ContactsService';
-import DynamicListingService from '@/services/DynamicListing/DynamicListService';
-import { DATATYPES_LENGTH } from '@/data/DataTypes';
+import { check, param, query, body, ValidationChain } from "express-validator";
+import { Router, Request, Response, NextFunction } from "express";
+import { Inject, Service } from "typedi";
+import { ServiceError } from "@/exceptions";
+import BaseController from "@/api/controllers/BaseController";
+import ContactsService from "@/services/Contacts/ContactsService";
+import DynamicListingService from "@/services/DynamicListing/DynamicListService";
+import { DATATYPES_LENGTH } from "@/data/DataTypes";
 
 @Service()
 export default class ContactsController extends BaseController {
@@ -22,28 +22,28 @@ export default class ContactsController extends BaseController {
     const router = Router();
 
     router.get(
-      '/auto-complete',
+      "/auto-complete",
       [...this.autocompleteQuerySchema],
       this.validationResult,
       this.asyncMiddleware(this.autocompleteContacts.bind(this)),
       this.dynamicListService.handlerErrorsToResponse
     );
     router.get(
-      '/:id',
-      [param('id').exists().isNumeric().toInt()],
+      "/:id",
+      [param("id").exists().isNumeric().toInt()],
       this.validationResult,
       this.asyncMiddleware(this.getContact.bind(this))
     );
     router.post(
-      '/:id/inactivate',
-      [param('id').exists().isNumeric().toInt()],
+      "/:id/inactivate",
+      [param("id").exists().isNumeric().toInt()],
       this.validationResult,
       this.asyncMiddleware(this.inactivateContact.bind(this)),
       this.handlerServiceErrors
     );
     router.post(
-      '/:id/activate',
-      [param('id').exists().isNumeric().toInt()],
+      "/:id/activate",
+      [param("id").exists().isNumeric().toInt()],
       this.validationResult,
       this.asyncMiddleware(this.activateContact.bind(this)),
       this.handlerServiceErrors
@@ -56,11 +56,11 @@ export default class ContactsController extends BaseController {
    */
   get autocompleteQuerySchema() {
     return [
-      query('column_sort_by').optional().trim().escape(),
-      query('sort_order').optional().isIn(['desc', 'asc']),
+      query("column_sort_by").optional().trim().escape(),
+      query("sort_order").optional().isIn(["desc", "asc"]),
 
-      query('stringified_filter_roles').optional().isJSON(),
-      query('limit').optional().isNumeric().toInt(),
+      query("stringified_filter_roles").optional().isJSON(),
+      query("limit").optional().isNumeric().toInt(),
     ];
   }
 
@@ -97,8 +97,8 @@ export default class ContactsController extends BaseController {
     const { tenantId } = req;
     const filter = {
       filterRoles: [],
-      sortOrder: 'asc',
-      columnSortBy: 'display_name',
+      sortOrder: "asc",
+      columnSortBy: "display_name",
       limit: 10,
       ...this.matchedQueryData(req),
     };
@@ -118,170 +118,170 @@ export default class ContactsController extends BaseController {
    */
   get contactDTOSchema(): ValidationChain[] {
     return [
-      check('salutation')
+      check("salutation")
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check('first_name')
+      check("first_name")
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check('last_name')
+      check("last_name")
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check('company_name')
+      check("company_name")
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
 
-      check('display_name')
+      check("display_name")
         .exists()
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
 
-      check('email')
+      check("email")
         .optional({ nullable: true })
         .isString()
-        .normalizeEmail()
+        .normalizeEmail({ gmail_remove_dots: false })
         .isEmail()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check('website')
+      check("website")
         .optional({ nullable: true })
         .isString()
         .trim()
         .isURL()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check('work_phone')
+      check("work_phone")
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check('personal_phone')
+      check("personal_phone")
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
 
-      check('billing_address_1')
+      check("billing_address_1")
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check('billing_address_2')
+      check("billing_address_2")
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check('billing_address_city')
+      check("billing_address_city")
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check('billing_address_country')
+      check("billing_address_country")
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check('billing_address_email')
+      check("billing_address_email")
         .optional({ nullable: true })
         .isString()
         .isEmail()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check('billing_address_postcode')
+      check("billing_address_postcode")
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check('billing_address_phone')
+      check("billing_address_phone")
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check('billing_address_state')
+      check("billing_address_state")
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
 
-      check('shipping_address_1')
+      check("shipping_address_1")
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check('shipping_address_2')
+      check("shipping_address_2")
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check('shipping_address_city')
+      check("shipping_address_city")
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check('shipping_address_country')
+      check("shipping_address_country")
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check('shipping_address_email')
+      check("shipping_address_email")
         .optional({ nullable: true })
         .isString()
         .isEmail()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check('shipping_address_postcode')
+      check("shipping_address_postcode")
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check('shipping_address_phone')
+      check("shipping_address_phone")
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check('shipping_address_state')
+      check("shipping_address_state")
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
 
-      check('note')
+      check("note")
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.TEXT }),
-      check('active').optional().isBoolean().toBoolean(),
+      check("active").optional().isBoolean().toBoolean(),
     ];
   }
 
@@ -291,19 +291,19 @@ export default class ContactsController extends BaseController {
    */
   get contactNewDTOSchema(): ValidationChain[] {
     return [
-      check('opening_balance')
+      check("opening_balance")
         .optional({ nullable: true })
         .isInt({ min: 0, max: DATATYPES_LENGTH.DECIMAL_13_3 })
         .toInt(),
-      check('opening_balance_exchange_rate')
+      check("opening_balance_exchange_rate")
         .default(1)
         .isFloat({ gt: 0 })
         .toFloat(),
-      body('opening_balance_at')
-        .if(body('opening_balance').exists())
+      body("opening_balance_at")
+        .if(body("opening_balance").exists())
         .exists()
         .isISO8601(),
-      check('opening_balance_branch_id')
+      check("opening_balance_branch_id")
         .optional({ nullable: true })
         .isNumeric()
         .toInt(),
@@ -322,7 +322,7 @@ export default class ContactsController extends BaseController {
    * @returns {ValidationChain[]}
    */
   get specificContactSchema(): ValidationChain[] {
-    return [param('id').exists().isNumeric().toInt()];
+    return [param("id").exists().isNumeric().toInt()];
   }
 
   /**
@@ -340,7 +340,7 @@ export default class ContactsController extends BaseController {
 
       return res.status(200).send({
         id: contactId,
-        message: 'The given contact activated successfully.',
+        message: "The given contact activated successfully.",
       });
     } catch (error) {
       next(error);
@@ -362,7 +362,7 @@ export default class ContactsController extends BaseController {
 
       return res.status(200).send({
         id: contactId,
-        message: 'The given contact inactivated successfully.',
+        message: "The given contact inactivated successfully.",
       });
     } catch (error) {
       next(error);
@@ -383,19 +383,19 @@ export default class ContactsController extends BaseController {
     next: NextFunction
   ) {
     if (error instanceof ServiceError) {
-      if (error.errorType === 'contact_not_found') {
+      if (error.errorType === "contact_not_found") {
         return res.boom.badRequest(null, {
-          errors: [{ type: 'CONTACT.NOT.FOUND', code: 100 }],
+          errors: [{ type: "CONTACT.NOT.FOUND", code: 100 }],
         });
       }
-      if (error.errorType === 'CONTACT_ALREADY_ACTIVE') {
+      if (error.errorType === "CONTACT_ALREADY_ACTIVE") {
         return res.boom.badRequest(null, {
-          errors: [{ type: 'CONTACT_ALREADY_ACTIVE', code: 700 }],
+          errors: [{ type: "CONTACT_ALREADY_ACTIVE", code: 700 }],
         });
       }
-      if (error.errorType === 'CONTACT_ALREADY_INACTIVE') {
+      if (error.errorType === "CONTACT_ALREADY_INACTIVE") {
         return res.boom.badRequest(null, {
-          errors: [{ type: 'CONTACT_ALREADY_INACTIVE', code: 800 }],
+          errors: [{ type: "CONTACT_ALREADY_INACTIVE", code: 800 }],
         });
       }
     }
diff --git a/packages/webapp/src/components/Details/index.tsx b/packages/webapp/src/components/Details/index.tsx
index e6803b069..9879fc7c0 100644
--- a/packages/webapp/src/components/Details/index.tsx
+++ b/packages/webapp/src/components/Details/index.tsx
@@ -66,7 +66,7 @@ export function DetailItem({ label, children, name, align, className }) {
       >
         {label}
       </div>
-      <div class="detail-item__content">{children}</div>
+      <div>{children}</div>
     </div>
   );
 }

From a6db4fb6dffad1c75edf053c7f7526049e555f50 Mon Sep 17 00:00:00 2001
From: "a.nasouf" <a.m.nasouf@gmail.com>
Date: Mon, 5 Feb 2024 19:52:48 +0200
Subject: [PATCH 16/39] fix: some keywords are not localized

---
 packages/webapp/src/containers/Authentication/Login.tsx     | 2 +-
 packages/webapp/src/containers/Authentication/Register.tsx  | 2 +-
 .../webapp/src/containers/Authentication/ResetPassword.tsx  | 6 +++---
 .../src/containers/Authentication/SendResetPassword.tsx     | 6 +++---
 .../src/containers/Authentication/SendResetPasswordForm.tsx | 5 ++---
 packages/webapp/src/lang/ar/index.json                      | 5 +++++
 packages/webapp/src/lang/en/index.json                      | 5 +++++
 7 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/packages/webapp/src/containers/Authentication/Login.tsx b/packages/webapp/src/containers/Authentication/Login.tsx
index 9efbac5e9..0ac30e1bc 100644
--- a/packages/webapp/src/containers/Authentication/Login.tsx
+++ b/packages/webapp/src/containers/Authentication/Login.tsx
@@ -70,7 +70,7 @@ function LoginFooterLinks() {
     <AuthFooterLinks>
       {!signupDisabled && (
         <AuthFooterLink>
-          Don't have an account? <Link to={'/auth/register'}>Sign up</Link>
+          <T id={'dont_have_an_account'} /> <Link to={'/auth/register'}><T id={'sign_up'} /></Link>
         </AuthFooterLink>
       )}
       <AuthFooterLink>
diff --git a/packages/webapp/src/containers/Authentication/Register.tsx b/packages/webapp/src/containers/Authentication/Register.tsx
index 5a42bbf67..32225c850 100644
--- a/packages/webapp/src/containers/Authentication/Register.tsx
+++ b/packages/webapp/src/containers/Authentication/Register.tsx
@@ -87,7 +87,7 @@ function RegisterFooterLinks() {
   return (
     <AuthFooterLinks>
       <AuthFooterLink>
-        Return to <Link to={'/auth/login'}>Sign In</Link>
+        <T id={'return_to'} /> <Link to={'/auth/login'}><T id={'sign_in'} /></Link>
       </AuthFooterLink>
 
       <AuthFooterLink>
diff --git a/packages/webapp/src/containers/Authentication/ResetPassword.tsx b/packages/webapp/src/containers/Authentication/ResetPassword.tsx
index 136d28174..afb43308b 100644
--- a/packages/webapp/src/containers/Authentication/ResetPassword.tsx
+++ b/packages/webapp/src/containers/Authentication/ResetPassword.tsx
@@ -5,7 +5,7 @@ import { Formik } from 'formik';
 import { Intent, Position } from '@blueprintjs/core';
 import { Link, useParams, useHistory } from 'react-router-dom';
 
-import { AppToaster } from '@/components';
+import { AppToaster, FormattedMessage as T } from '@/components';
 import { useAuthResetPassword } from '@/hooks/query';
 import AuthInsider from '@/containers/Authentication/AuthInsider';
 
@@ -86,11 +86,11 @@ function ResetPasswordFooterLinks() {
     <AuthFooterLinks>
       {!signupDisabled && (
         <AuthFooterLink>
-          Don't have an account? <Link to={'/auth/register'}>Sign up</Link>
+          <T id={'dont_have_an_account'} /> <Link to={'/auth/register'}><T id={'sign_up'} /></Link>
         </AuthFooterLink>
       )}
       <AuthFooterLink>
-        Return to <Link to={'/auth/login'}>Sign In</Link>
+        <T id={'return_to'} /> <Link to={'/auth/login'}><T id={'sign_in'} /></Link>
       </AuthFooterLink>
     </AuthFooterLinks>
   );
diff --git a/packages/webapp/src/containers/Authentication/SendResetPassword.tsx b/packages/webapp/src/containers/Authentication/SendResetPassword.tsx
index c90f872c1..b8f24831c 100644
--- a/packages/webapp/src/containers/Authentication/SendResetPassword.tsx
+++ b/packages/webapp/src/containers/Authentication/SendResetPassword.tsx
@@ -5,7 +5,7 @@ import { Formik } from 'formik';
 import { Link, useHistory } from 'react-router-dom';
 import { Intent } from '@blueprintjs/core';
 
-import { AppToaster } from '@/components';
+import { AppToaster, FormattedMessage as T } from '@/components';
 import { useAuthSendResetPassword } from '@/hooks/query';
 
 import SendResetPasswordForm from './SendResetPasswordForm';
@@ -82,11 +82,11 @@ function SendResetPasswordFooterLinks() {
     <AuthFooterLinks>
       {!signupDisabled && (
         <AuthFooterLink>
-          Don't have an account? <Link to={'/auth/register'}>Sign up</Link>
+          <T id={'dont_have_an_account'} /> <Link to={'/auth/register'}><T id={'sign_up'} /></Link>
         </AuthFooterLink>
       )}
       <AuthFooterLink>
-        Return to <Link to={'/auth/login'}>Sign In</Link>
+        <T id={'return_to'} /> <Link to={'/auth/login'}><T id={'sign_in'} /></Link>
       </AuthFooterLink>
     </AuthFooterLinks>
   );
diff --git a/packages/webapp/src/containers/Authentication/SendResetPasswordForm.tsx b/packages/webapp/src/containers/Authentication/SendResetPasswordForm.tsx
index 3f2718d59..a2f6e114b 100644
--- a/packages/webapp/src/containers/Authentication/SendResetPasswordForm.tsx
+++ b/packages/webapp/src/containers/Authentication/SendResetPasswordForm.tsx
@@ -14,8 +14,7 @@ export default function SendResetPasswordForm({ isSubmitting }) {
   return (
     <Form>
       <TopParagraph>
-        Enter the email address associated with your account and we'll send you
-        a link to reset your password.
+        <T id={'enter_the_email_address_associated_with_your_account'} />
       </TopParagraph>
 
       <FFormGroup name={'crediential'} label={<T id={'email_address'} />}>
@@ -29,7 +28,7 @@ export default function SendResetPasswordForm({ isSubmitting }) {
         large={true}
         loading={isSubmitting}
       >
-        Reset Password
+        <T id={'reset_password'} />
       </AuthSubmitButton>
     </Form>
   );
diff --git a/packages/webapp/src/lang/ar/index.json b/packages/webapp/src/lang/ar/index.json
index 976b049d6..6e3996d91 100644
--- a/packages/webapp/src/lang/ar/index.json
+++ b/packages/webapp/src/lang/ar/index.json
@@ -20,6 +20,11 @@
   "log_in": "تسجيل الدخول",
   "forget_my_password": "نسيت كلمة المرور الخاصة بي",
   "keep_me_logged_in": "تذكرني",
+  "dont_have_an_account": "ليس لديك حساب؟",
+  "sign_up": "تسجيل",
+  "return_to": "عودة إلى",
+  "sign_in": "صفحة الدخول",
+  "enter_the_email_address_associated_with_your_account": "قم بادخال بريدك الإلكتروني المرتبط بالحساب وسوف نرسل لك رابط لاعادة تعيين كلمة المرور.",
   "create_an_account": "إنشاء حساب",
   "need_bigcapital_account": "تحتاج إلى حساب Bigcapital؟",
   "show": "عرض",
diff --git a/packages/webapp/src/lang/en/index.json b/packages/webapp/src/lang/en/index.json
index 5522f57d6..12a36e5bd 100644
--- a/packages/webapp/src/lang/en/index.json
+++ b/packages/webapp/src/lang/en/index.json
@@ -19,6 +19,11 @@
   "log_in": "Log in",
   "forget_my_password": "Forget my password",
   "keep_me_logged_in": "Keep me logged in",
+  "dont_have_an_account": "Don't have an account?",
+  "sign_up": "Sign up",
+  "return_to": "Return to",
+  "sign_in": "Sign In",
+  "enter_the_email_address_associated_with_your_account": "Enter the email address associated with your account and we'll send you a link to reset your password.",
   "create_an_account": "Create an account",
   "need_bigcapital_account": "Need a Bigcapital account ?",
   "show": "Show",

From f7f77b12c9d70b9b89f56d18ec9a368b6f1b568d Mon Sep 17 00:00:00 2001
From: "a.nasouf" <a.m.nasouf@gmail.com>
Date: Mon, 5 Feb 2024 20:05:10 +0200
Subject: [PATCH 17/39] fix: file formatting

---
 .../src/api/controllers/Contacts/Contacts.ts  | 138 +++++++++---------
 1 file changed, 69 insertions(+), 69 deletions(-)

diff --git a/packages/server/src/api/controllers/Contacts/Contacts.ts b/packages/server/src/api/controllers/Contacts/Contacts.ts
index 2449e7d6f..751654a8e 100644
--- a/packages/server/src/api/controllers/Contacts/Contacts.ts
+++ b/packages/server/src/api/controllers/Contacts/Contacts.ts
@@ -1,11 +1,11 @@
-import { check, param, query, body, ValidationChain } from "express-validator";
-import { Router, Request, Response, NextFunction } from "express";
-import { Inject, Service } from "typedi";
-import { ServiceError } from "@/exceptions";
-import BaseController from "@/api/controllers/BaseController";
-import ContactsService from "@/services/Contacts/ContactsService";
-import DynamicListingService from "@/services/DynamicListing/DynamicListService";
-import { DATATYPES_LENGTH } from "@/data/DataTypes";
+import { check, param, query, body, ValidationChain } from 'express-validator';
+import { Router, Request, Response, NextFunction } from 'express';
+import { Inject, Service } from 'typedi';
+import { ServiceError } from '@/exceptions';
+import BaseController from '@/api/controllers/BaseController';
+import ContactsService from '@/services/Contacts/ContactsService';
+import DynamicListingService from '@/services/DynamicListing/DynamicListService';
+import { DATATYPES_LENGTH } from '@/data/DataTypes';
 
 @Service()
 export default class ContactsController extends BaseController {
@@ -22,31 +22,31 @@ export default class ContactsController extends BaseController {
     const router = Router();
 
     router.get(
-      "/auto-complete",
+      '/auto-complete',
       [...this.autocompleteQuerySchema],
       this.validationResult,
       this.asyncMiddleware(this.autocompleteContacts.bind(this)),
-      this.dynamicListService.handlerErrorsToResponse
+      this.dynamicListService.handlerErrorsToResponse,
     );
     router.get(
-      "/:id",
-      [param("id").exists().isNumeric().toInt()],
+      '/:id',
+      [param('id').exists().isNumeric().toInt()],
       this.validationResult,
-      this.asyncMiddleware(this.getContact.bind(this))
+      this.asyncMiddleware(this.getContact.bind(this)),
     );
     router.post(
-      "/:id/inactivate",
-      [param("id").exists().isNumeric().toInt()],
+      '/:id/inactivate',
+      [param('id').exists().isNumeric().toInt()],
       this.validationResult,
       this.asyncMiddleware(this.inactivateContact.bind(this)),
-      this.handlerServiceErrors
+      this.handlerServiceErrors,
     );
     router.post(
-      "/:id/activate",
-      [param("id").exists().isNumeric().toInt()],
+      '/:id/activate',
+      [param('id').exists().isNumeric().toInt()],
       this.validationResult,
       this.asyncMiddleware(this.activateContact.bind(this)),
-      this.handlerServiceErrors
+      this.handlerServiceErrors,
     );
     return router;
   }
@@ -56,11 +56,11 @@ export default class ContactsController extends BaseController {
    */
   get autocompleteQuerySchema() {
     return [
-      query("column_sort_by").optional().trim().escape(),
-      query("sort_order").optional().isIn(["desc", "asc"]),
+      query('column_sort_by').optional().trim().escape(),
+      query('sort_order').optional().isIn(['desc', 'asc']),
 
-      query("stringified_filter_roles").optional().isJSON(),
-      query("limit").optional().isNumeric().toInt(),
+      query('stringified_filter_roles').optional().isJSON(),
+      query('limit').optional().isNumeric().toInt(),
     ];
   }
 
@@ -77,7 +77,7 @@ export default class ContactsController extends BaseController {
     try {
       const contact = await this.contactsService.getContact(
         tenantId,
-        contactId
+        contactId,
       );
       return res.status(200).send({
         customer: this.transfromToResponse(contact),
@@ -97,15 +97,15 @@ export default class ContactsController extends BaseController {
     const { tenantId } = req;
     const filter = {
       filterRoles: [],
-      sortOrder: "asc",
-      columnSortBy: "display_name",
+      sortOrder: 'asc',
+      columnSortBy: 'display_name',
       limit: 10,
       ...this.matchedQueryData(req),
     };
     try {
       const contacts = await this.contactsService.autocompleteContacts(
         tenantId,
-        filter
+        filter,
       );
       return res.status(200).send({ contacts });
     } catch (error) {
@@ -118,170 +118,170 @@ export default class ContactsController extends BaseController {
    */
   get contactDTOSchema(): ValidationChain[] {
     return [
-      check("salutation")
+      check('salutation')
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check("first_name")
+      check('first_name')
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check("last_name")
+      check('last_name')
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check("company_name")
+      check('company_name')
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
 
-      check("display_name")
+      check('display_name')
         .exists()
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
 
-      check("email")
+      check('email')
         .optional({ nullable: true })
         .isString()
         .normalizeEmail({ gmail_remove_dots: false })
         .isEmail()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check("website")
+      check('website')
         .optional({ nullable: true })
         .isString()
         .trim()
         .isURL()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check("work_phone")
+      check('work_phone')
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check("personal_phone")
+      check('personal_phone')
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
 
-      check("billing_address_1")
+      check('billing_address_1')
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check("billing_address_2")
+      check('billing_address_2')
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check("billing_address_city")
+      check('billing_address_city')
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check("billing_address_country")
+      check('billing_address_country')
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check("billing_address_email")
+      check('billing_address_email')
         .optional({ nullable: true })
         .isString()
         .isEmail()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check("billing_address_postcode")
+      check('billing_address_postcode')
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check("billing_address_phone")
+      check('billing_address_phone')
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check("billing_address_state")
+      check('billing_address_state')
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
 
-      check("shipping_address_1")
+      check('shipping_address_1')
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check("shipping_address_2")
+      check('shipping_address_2')
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check("shipping_address_city")
+      check('shipping_address_city')
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check("shipping_address_country")
+      check('shipping_address_country')
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check("shipping_address_email")
+      check('shipping_address_email')
         .optional({ nullable: true })
         .isString()
         .isEmail()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check("shipping_address_postcode")
+      check('shipping_address_postcode')
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check("shipping_address_phone")
+      check('shipping_address_phone')
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check("shipping_address_state")
+      check('shipping_address_state')
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
 
-      check("note")
+      check('note')
         .optional({ nullable: true })
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.TEXT }),
-      check("active").optional().isBoolean().toBoolean(),
+      check('active').optional().isBoolean().toBoolean(),
     ];
   }
 
@@ -291,19 +291,19 @@ export default class ContactsController extends BaseController {
    */
   get contactNewDTOSchema(): ValidationChain[] {
     return [
-      check("opening_balance")
+      check('opening_balance')
         .optional({ nullable: true })
         .isInt({ min: 0, max: DATATYPES_LENGTH.DECIMAL_13_3 })
         .toInt(),
-      check("opening_balance_exchange_rate")
+      check('opening_balance_exchange_rate')
         .default(1)
         .isFloat({ gt: 0 })
         .toFloat(),
-      body("opening_balance_at")
-        .if(body("opening_balance").exists())
+      body('opening_balance_at')
+        .if(body('opening_balance').exists())
         .exists()
         .isISO8601(),
-      check("opening_balance_branch_id")
+      check('opening_balance_branch_id')
         .optional({ nullable: true })
         .isNumeric()
         .toInt(),
@@ -322,7 +322,7 @@ export default class ContactsController extends BaseController {
    * @returns {ValidationChain[]}
    */
   get specificContactSchema(): ValidationChain[] {
-    return [param("id").exists().isNumeric().toInt()];
+    return [param('id').exists().isNumeric().toInt()];
   }
 
   /**
@@ -340,7 +340,7 @@ export default class ContactsController extends BaseController {
 
       return res.status(200).send({
         id: contactId,
-        message: "The given contact activated successfully.",
+        message: 'The given contact activated successfully.',
       });
     } catch (error) {
       next(error);
@@ -362,7 +362,7 @@ export default class ContactsController extends BaseController {
 
       return res.status(200).send({
         id: contactId,
-        message: "The given contact inactivated successfully.",
+        message: 'The given contact inactivated successfully.',
       });
     } catch (error) {
       next(error);
@@ -380,22 +380,22 @@ export default class ContactsController extends BaseController {
     error: Error,
     req: Request,
     res: Response,
-    next: NextFunction
+    next: NextFunction,
   ) {
     if (error instanceof ServiceError) {
-      if (error.errorType === "contact_not_found") {
+      if (error.errorType === 'contact_not_found') {
         return res.boom.badRequest(null, {
-          errors: [{ type: "CONTACT.NOT.FOUND", code: 100 }],
+          errors: [{ type: 'CONTACT.NOT.FOUND', code: 100 }],
         });
       }
-      if (error.errorType === "CONTACT_ALREADY_ACTIVE") {
+      if (error.errorType === 'CONTACT_ALREADY_ACTIVE') {
         return res.boom.badRequest(null, {
-          errors: [{ type: "CONTACT_ALREADY_ACTIVE", code: 700 }],
+          errors: [{ type: 'CONTACT_ALREADY_ACTIVE', code: 700 }],
         });
       }
-      if (error.errorType === "CONTACT_ALREADY_INACTIVE") {
+      if (error.errorType === 'CONTACT_ALREADY_INACTIVE') {
         return res.boom.badRequest(null, {
-          errors: [{ type: "CONTACT_ALREADY_INACTIVE", code: 800 }],
+          errors: [{ type: 'CONTACT_ALREADY_INACTIVE', code: 800 }],
         });
       }
     }

From 12740223a8664cf8464628e62ab3863366988885 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Mon, 5 Feb 2024 22:38:56 +0200
Subject: [PATCH 18/39] fix: Invalid bill payment amount on editing bill
 payment

---
 .../server/src/api/controllers/Purchases/Bills.ts  | 10 ++++++++++
 .../services/Purchases/Bills/BillsValidators.ts    | 14 ++++++++++++++
 .../src/services/Purchases/Bills/EditBill.ts       |  6 ++++++
 .../src/services/Purchases/Bills/constants.ts      |  1 +
 packages/webapp/src/constants/errors.tsx           |  6 ++++--
 .../containers/Purchases/Bills/BillForm/utils.tsx  |  9 +++++++++
 .../PaymentForm/PaymentMadeEntriesTable.tsx        |  3 ++-
 .../Sales/Invoices/InvoiceForm/utils.tsx           | 10 ++++++++++
 .../PaymentReceiveItemsTable.tsx                   |  3 ++-
 packages/webapp/src/lang/en/index.json             |  2 ++
 10 files changed, 60 insertions(+), 4 deletions(-)

diff --git a/packages/server/src/api/controllers/Purchases/Bills.ts b/packages/server/src/api/controllers/Purchases/Bills.ts
index 9de79ecf7..4f65eab26 100644
--- a/packages/server/src/api/controllers/Purchases/Bills.ts
+++ b/packages/server/src/api/controllers/Purchases/Bills.ts
@@ -560,6 +560,16 @@ export default class BillsController extends BaseController {
           errors: [{ type: 'ITEM_ENTRY_TAX_RATE_ID_NOT_FOUND', code: 1900 }],
         });
       }
+      if (error.errorType === 'BILL_AMOUNT_SMALLER_THAN_PAID_AMOUNT') {
+        return res.boom.badRequest(null, {
+          errors: [
+            {
+              type: 'BILL_AMOUNT_SMALLER_THAN_PAID_AMOUNT',
+              code: 2000,
+            },
+          ],
+        });
+      }
     }
     next(error);
   }
diff --git a/packages/server/src/services/Purchases/Bills/BillsValidators.ts b/packages/server/src/services/Purchases/Bills/BillsValidators.ts
index cba38dfbb..9f209e40d 100644
--- a/packages/server/src/services/Purchases/Bills/BillsValidators.ts
+++ b/packages/server/src/services/Purchases/Bills/BillsValidators.ts
@@ -21,6 +21,20 @@ export class BillsValidators {
     }
   }
 
+  /**
+   * Validates the bill amount is bigger than paid amount.
+   * @param {number} billAmount 
+   * @param {number} paidAmount 
+   */
+  public validateBillAmountBiggerPaidAmount(
+    billAmount: number,
+    paidAmount: number,
+  ) {
+    if (billAmount < paidAmount) {
+      throw new ServiceError(ERRORS.BILL_AMOUNT_SMALLER_THAN_PAID_AMOUNT);
+    }
+  }
+
   /**
    * Validates the bill number existance.
    */
diff --git a/packages/server/src/services/Purchases/Bills/EditBill.ts b/packages/server/src/services/Purchases/Bills/EditBill.ts
index 26121c120..7b10bb7f1 100644
--- a/packages/server/src/services/Purchases/Bills/EditBill.ts
+++ b/packages/server/src/services/Purchases/Bills/EditBill.ts
@@ -103,6 +103,7 @@ export class EditBill {
       tenantId,
       billDTO.entries
     );
+    
     // Transforms the bill DTO to model object.
     const billObj = await this.transformerDTO.billDTOToModel(
       tenantId,
@@ -111,6 +112,11 @@ export class EditBill {
       authorizedUser,
       oldBill
     );
+    // Validate bill total amount should be bigger than paid amount.
+    this.validators.validateBillAmountBiggerPaidAmount(
+      billObj.amount,
+      oldBill.paymentAmount
+    );
     // Validate landed cost entries that have allocated cost could not be deleted.
     await this.entriesService.validateLandedCostEntriesNotDeleted(
       oldBill.entries,
diff --git a/packages/server/src/services/Purchases/Bills/constants.ts b/packages/server/src/services/Purchases/Bills/constants.ts
index 12afad4c7..9cc8566c8 100644
--- a/packages/server/src/services/Purchases/Bills/constants.ts
+++ b/packages/server/src/services/Purchases/Bills/constants.ts
@@ -18,6 +18,7 @@ export const ERRORS = {
   LANDED_COST_ENTRIES_SHOULD_BE_INVENTORY_ITEMS:
     'LANDED_COST_ENTRIES_SHOULD_BE_INVENTORY_ITEMS',
   BILL_HAS_APPLIED_TO_VENDOR_CREDIT: 'BILL_HAS_APPLIED_TO_VENDOR_CREDIT',
+  BILL_AMOUNT_SMALLER_THAN_PAID_AMOUNT: 'BILL_AMOUNT_SMALLER_THAN_PAID_AMOUNT',
 };
 
 export const DEFAULT_VIEW_COLUMNS = [];
diff --git a/packages/webapp/src/constants/errors.tsx b/packages/webapp/src/constants/errors.tsx
index 2411c4d74..22f6345cb 100644
--- a/packages/webapp/src/constants/errors.tsx
+++ b/packages/webapp/src/constants/errors.tsx
@@ -9,6 +9,8 @@ export const ERROR = {
   SALE_INVOICE_NO_NOT_UNIQUE: 'SALE_INVOICE_NO_NOT_UNIQUE',
   SALE_ESTIMATE_IS_ALREADY_CONVERTED_TO_INVOICE:
     'SALE_ESTIMATE_IS_ALREADY_CONVERTED_TO_INVOICE',
+  INVOICE_AMOUNT_SMALLER_THAN_PAYMENT_AMOUNT:
+    'INVOICE_AMOUNT_SMALLER_THAN_PAYMENT_AMOUNT',
 
   // Sales Receipts
   SALE_RECEIPT_NUMBER_NOT_UNIQUE: 'SALE_RECEIPT_NUMBER_NOT_UNIQUE',
@@ -17,6 +19,6 @@ export const ERROR = {
   // Bills
   BILL_NUMBER_EXISTS: 'BILL.NUMBER.EXISTS',
   SALE_INVOICE_NO_IS_REQUIRED: 'SALE_INVOICE_NO_IS_REQUIRED',
-  ENTRIES_ALLOCATED_COST_COULD_NOT_DELETED:"ENTRIES_ALLOCATED_COST_COULD_NOT_DELETED",
-
+  ENTRIES_ALLOCATED_COST_COULD_NOT_DELETED:
+    'ENTRIES_ALLOCATED_COST_COULD_NOT_DELETED',
 };
diff --git a/packages/webapp/src/containers/Purchases/Bills/BillForm/utils.tsx b/packages/webapp/src/containers/Purchases/Bills/BillForm/utils.tsx
index 763573b30..f98f02757 100644
--- a/packages/webapp/src/containers/Purchases/Bills/BillForm/utils.tsx
+++ b/packages/webapp/src/containers/Purchases/Bills/BillForm/utils.tsx
@@ -67,6 +67,7 @@ export const ERRORS = {
   BILL_NUMBER_EXISTS: 'BILL.NUMBER.EXISTS',
   ENTRIES_ALLOCATED_COST_COULD_NOT_DELETED:
     'ENTRIES_ALLOCATED_COST_COULD_NOT_DELETED',
+  BILL_AMOUNT_SMALLER_THAN_PAID_AMOUNT: 'BILL_AMOUNT_SMALLER_THAN_PAID_AMOUNT',
 };
 /**
  * Transformes the bill to initial values of edit form.
@@ -200,6 +201,14 @@ export const handleErrors = (errors, { setErrors }) => {
       }),
     );
   }
+  if (
+    errors.some((e) => e.type === ERRORS.BILL_AMOUNT_SMALLER_THAN_PAID_AMOUNT)
+  ) {
+    AppToaster.show({
+      intent: Intent.DANGER,
+      message: intl.get('bill.total_smaller_than_paid_amount'),
+    });
+  }
 };
 
 export const useSetPrimaryBranchToForm = () => {
diff --git a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeEntriesTable.tsx b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeEntriesTable.tsx
index cd0228799..841a3f359 100644
--- a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeEntriesTable.tsx
+++ b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeEntriesTable.tsx
@@ -30,6 +30,7 @@ export default function PaymentMadeEntriesTable({
   // Formik context.
   const {
     values: { vendor_id },
+    errors,
   } = useFormikContext();
 
   // Handle update data.
@@ -63,7 +64,7 @@ export default function PaymentMadeEntriesTable({
         data={entries}
         spinnerProps={false}
         payload={{
-          errors: [],
+          errors: errors?.entries || [],
           updateData: handleUpdateData,
           currencyCode,
         }}
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/utils.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/utils.tsx
index 8c32f017c..a2ff9988a 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/utils.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/utils.tsx
@@ -112,6 +112,16 @@ export const transformErrors = (errors, { setErrors }) => {
       intent: Intent.DANGER,
     });
   }
+  if (
+    errors.some(
+      ({ type }) => type === ERROR.INVOICE_AMOUNT_SMALLER_THAN_PAYMENT_AMOUNT,
+    )
+  ) {
+    AppToaster.show({
+      message: intl.get('sale_invoice.total_smaller_than_paid_amount'),
+      intent: Intent.DANGER,
+    });
+  }
   if (
     errors.some((error) => error.type === ERROR.SALE_INVOICE_NO_IS_REQUIRED)
   ) {
diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveItemsTable.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveItemsTable.tsx
index 5b8a1be34..910403c7e 100644
--- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveItemsTable.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveItemsTable.tsx
@@ -28,6 +28,7 @@ export default function PaymentReceiveItemsTable({
   // Formik context.
   const {
     values: { customer_id },
+    errors,
   } = useFormikContext();
 
   // No results message.
@@ -58,7 +59,7 @@ export default function PaymentReceiveItemsTable({
         data={entries}
         spinnerProps={false}
         payload={{
-          errors: [],
+          errors: errors?.entries || [],
           updateData: handleUpdateData,
           currencyCode,
         }}
diff --git a/packages/webapp/src/lang/en/index.json b/packages/webapp/src/lang/en/index.json
index 5522f57d6..bf780d4cf 100644
--- a/packages/webapp/src/lang/en/index.json
+++ b/packages/webapp/src/lang/en/index.json
@@ -653,7 +653,9 @@
   "invoice_number_is_not_unqiue": "Invoice number is not unqiue",
   "sale_receipt_number_not_unique": "Receipt number is not unique",
   "sale_invoice_number_is_exists": "Sale invoice number is exists",
+  "sale_invoice.total_smaller_than_paid_amount": "The invoice total is smaller than the invoice paid amount.",
   "bill_number_exists": "Bill number exists",
+  "bill.total_smaller_than_paid_amount": "The bill total is smaller than the bill paid amount.",
   "ok": "Ok!",
   "quantity_cannot_be_zero_or_empty": "Quantity cannot be zero or empty.",
   "customer_email": "Customer email",

From 528d447443a4b2ada6f1e365e0878ab6c43e30e5 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Mon, 5 Feb 2024 23:04:02 +0200
Subject: [PATCH 19/39] fix(server): Trial balance total row shouldn't show if
 accounts have no balances

---
 .../TrialBalanceSheet/TrialBalanceSheet.ts                    | 4 ----
 .../TrialBalanceSheet/TrialBalanceSheetTable.ts               | 4 ++--
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.ts b/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.ts
index 38ed3a944..8554268e3 100644
--- a/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.ts
+++ b/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.ts
@@ -252,10 +252,6 @@ export default class TrialBalanceSheet extends FinancialSheet {
    * @return {ITrialBalanceSheetData}
    */
   public reportData(): ITrialBalanceSheetData {
-    // Don't return noting if the journal has no transactions.
-    if (this.repository.totalAccountsLedger.isEmpty()) {
-      return null;
-    }
     // Retrieve accounts nodes.
     const accounts = this.accountsSection(this.repository.accounts);
 
diff --git a/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.ts b/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.ts
index 1cbb2e7e6..5de03eb71 100644
--- a/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.ts
+++ b/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.ts
@@ -46,7 +46,7 @@ export class TrialBalanceSheetTable extends R.compose(
     this.query = query;
     this.i18n = i18n;
   }
-  
+
   /**
    * Retrieve the common columns for all report nodes.
    * @param {ITableColumnAccessor[]}
@@ -123,7 +123,7 @@ export class TrialBalanceSheetTable extends R.compose(
    */
   public tableRows = (): ITableRow[] => {
     return R.compose(
-      R.append(this.totalTableRow()),
+      R.unless(R.isEmpty, R.append(this.totalTableRow())),
       R.concat(this.accountsTableRows())
     )([]);
   };

From 374f1acf8a48c6035d3777f63c1faffda15f5b41 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Tue, 6 Feb 2024 10:54:41 +0200
Subject: [PATCH 20/39] fix: payment receive subtotal shouldn't be rounded

---
 .../PaymentReceives/PaymentReceiveTransformer.ts    | 13 +++++++++++++
 .../PaymentReceiveDetailTableFooter.tsx             |  5 ++---
 .../Drawers/PaymentReceiveDetailDrawer/utils.tsx    | 12 +++++-------
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/packages/server/src/services/Sales/PaymentReceives/PaymentReceiveTransformer.ts b/packages/server/src/services/Sales/PaymentReceives/PaymentReceiveTransformer.ts
index 531023ce3..5ca84db07 100644
--- a/packages/server/src/services/Sales/PaymentReceives/PaymentReceiveTransformer.ts
+++ b/packages/server/src/services/Sales/PaymentReceives/PaymentReceiveTransformer.ts
@@ -10,6 +10,7 @@ export class PaymentReceiveTransfromer extends Transformer {
    */
   public includeAttributes = (): string[] => {
     return [
+      'subtotalFormatted',
       'formattedPaymentDate',
       'formattedAmount',
       'formattedExchangeRate',
@@ -26,6 +27,18 @@ export class PaymentReceiveTransfromer extends Transformer {
     return this.formatDate(payment.paymentDate);
   };
 
+  /**
+   * Retrieve the formatted payment subtotal.
+   * @param {IPaymentReceive} payment 
+   * @returns {string}
+   */
+  protected subtotalFormatted = (payment: IPaymentReceive): string => {
+    return formatNumber(payment.amount, {
+      currencyCode: payment.currencyCode,
+      money: false,
+    });
+  };
+
   /**
    * Retrieve formatted payment amount.
    * @param {ISaleInvoice} invoice
diff --git a/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTableFooter.tsx b/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTableFooter.tsx
index eeee13ffe..868aecc0d 100644
--- a/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTableFooter.tsx
+++ b/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTableFooter.tsx
@@ -3,10 +3,9 @@ import React from 'react';
 import styled from 'styled-components';
 
 import {
-  FormatNumber,
+  T,
   TotalLineTextStyle,
   TotalLineBorderStyle,
-  T,
   TotalLine,
   TotalLines,
 } from '@/components';
@@ -27,7 +26,7 @@ export default function PaymentReceiveDetailTableFooter() {
       >
         <TotalLine
           title={<T id={'payment_receive.details.subtotal'} />}
-          value={<FormatNumber value={paymentReceive.amount} />}
+          value={paymentReceive.subtotal_formatted}
         />
         <TotalLine
           title={<T id={'payment_receive.details.total'} />}
diff --git a/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/utils.tsx b/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/utils.tsx
index 8971f3ec6..984eb5658 100644
--- a/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/utils.tsx
+++ b/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/utils.tsx
@@ -10,7 +10,7 @@ import {
   MenuItem,
   Menu,
 } from '@blueprintjs/core';
-import { Icon, FormatNumberCell } from '@/components';
+import { Icon } from '@/components';
 import { getColumnWidth } from '@/utils';
 import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
 
@@ -40,9 +40,8 @@ export const usePaymentReceiveEntriesColumns = () => {
       },
       {
         Header: intl.get('invoice_amount'),
-        accessor: 'invoice.balance',
-        Cell: FormatNumberCell,
-        width: getColumnWidth(entries, 'invoice.balance', {
+        accessor: 'invoice.total_formatted',
+        width: getColumnWidth(entries, 'invoice.total_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),
@@ -51,10 +50,9 @@ export const usePaymentReceiveEntriesColumns = () => {
       },
       {
         Header: intl.get('amount_due'),
-        accessor: 'invoice.due_amount',
-        Cell: FormatNumberCell,
+        accessor: 'invoice.due_amount_formatted',
         align: 'right',
-        width: getColumnWidth(entries, 'invoice.due_amount', {
+        width: getColumnWidth(entries, 'invoice.due_amount_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),

From 0f678e61c5322ae5c299e3a18bb3bffbfd83862e Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Tue, 6 Feb 2024 20:31:48 +0200
Subject: [PATCH 21/39] fix: Decimal amounts are rounded when create a new
 transaction on some transactions types

---
 .../src/services/CreditNotes/CreditNoteTransformer.ts | 10 ++++++++++
 .../VendorCredits/VendorCreditTransformer.ts          | 10 ++++++++++
 .../Sales/Estimates/SaleEstimateTransformer.ts        | 10 ++++++++++
 .../services/Sales/Invoices/ItemEntryTransformer.ts   | 11 ++++++++++-
 .../services/Sales/Receipts/SaleReceiptTransformer.ts | 10 ++++++++++
 .../CreditNoteDetailTableFooter.tsx                   |  5 +----
 .../EstimateDetailTableFooter.tsx                     |  3 +--
 .../containers/Drawers/EstimateDetailDrawer/utils.tsx |  5 ++---
 .../ReceiptDetailDrawer/ReceiptDetailTableFooter.tsx  |  2 +-
 .../JournalEntriesTransactions/components.tsx         |  7 ++++---
 .../VendorCreditDetailDrawerFooter.tsx                |  3 +--
 .../Drawers/VendorCreditDetailDrawer/utils.tsx        |  5 ++---
 12 files changed, 62 insertions(+), 19 deletions(-)

diff --git a/packages/server/src/services/CreditNotes/CreditNoteTransformer.ts b/packages/server/src/services/CreditNotes/CreditNoteTransformer.ts
index f532c2eab..6ed80a6f0 100644
--- a/packages/server/src/services/CreditNotes/CreditNoteTransformer.ts
+++ b/packages/server/src/services/CreditNotes/CreditNoteTransformer.ts
@@ -14,6 +14,7 @@ export class CreditNoteTransformer extends Transformer {
       'formattedCreditNoteDate',
       'formattedAmount',
       'formattedCreditsUsed',
+      'formattedSubtotal',
       'entries',
     ];
   };
@@ -60,6 +61,15 @@ export class CreditNoteTransformer extends Transformer {
     });
   };
 
+  /**
+   * Retrieves the formatted subtotal.
+   * @param {ICreditNote} credit
+   * @returns {string}
+   */
+  protected formattedSubtotal = (credit): string => {
+    return formatNumber(credit.amount, { money: false });
+  };
+
   /**
    * Retrieves the entries of the credit note.
    * @param {ICreditNote} credit
diff --git a/packages/server/src/services/Purchases/VendorCredits/VendorCreditTransformer.ts b/packages/server/src/services/Purchases/VendorCredits/VendorCreditTransformer.ts
index 3d74ee770..be1431ac2 100644
--- a/packages/server/src/services/Purchases/VendorCredits/VendorCreditTransformer.ts
+++ b/packages/server/src/services/Purchases/VendorCredits/VendorCreditTransformer.ts
@@ -11,6 +11,7 @@ export class VendorCreditTransformer extends Transformer {
   public includeAttributes = (): string[] => {
     return [
       'formattedAmount',
+      'formattedSubtotal',
       'formattedVendorCreditDate',
       'formattedCreditsRemaining',
       'entries',
@@ -37,6 +38,15 @@ export class VendorCreditTransformer extends Transformer {
     });
   };
 
+  /**
+   * Retrieves the vendor credit formatted subtotal.
+   * @param {IVendorCredit} vendorCredit
+   * @returns {string}
+   */
+  protected formattedSubtotal = (vendorCredit): string => {
+    return formatNumber(vendorCredit.amount, { money: false });
+  };
+
   /**
    * Retrieve formatted credits remaining.
    * @param {IVendorCredit} credit
diff --git a/packages/server/src/services/Sales/Estimates/SaleEstimateTransformer.ts b/packages/server/src/services/Sales/Estimates/SaleEstimateTransformer.ts
index 1102f7bd0..8cd99a9db 100644
--- a/packages/server/src/services/Sales/Estimates/SaleEstimateTransformer.ts
+++ b/packages/server/src/services/Sales/Estimates/SaleEstimateTransformer.ts
@@ -10,6 +10,7 @@ export class SaleEstimateTransfromer extends Transformer {
    */
   public includeAttributes = (): string[] => {
     return [
+      'formattedSubtotal',
       'formattedAmount',
       'formattedEstimateDate',
       'formattedExpirationDate',
@@ -76,6 +77,15 @@ export class SaleEstimateTransfromer extends Transformer {
     });
   };
 
+  /**
+   * Retrieves the formatted invoice subtotal.
+   * @param {ISaleEstimate} estimate
+   * @returns {string}
+   */
+  protected formattedSubtotal = (estimate: ISaleEstimate): string => {
+    return formatNumber(estimate.amount, { money: false });
+  };
+
   /**
    * Retrieves the entries of the sale estimate.
    * @param {ISaleEstimate} estimate
diff --git a/packages/server/src/services/Sales/Invoices/ItemEntryTransformer.ts b/packages/server/src/services/Sales/Invoices/ItemEntryTransformer.ts
index ad0d88525..dbaea4862 100644
--- a/packages/server/src/services/Sales/Invoices/ItemEntryTransformer.ts
+++ b/packages/server/src/services/Sales/Invoices/ItemEntryTransformer.ts
@@ -8,7 +8,16 @@ export class ItemEntryTransformer extends Transformer {
    * @returns {Array}
    */
   public includeAttributes = (): string[] => {
-    return ['rateFormatted', 'totalFormatted'];
+    return ['quantityFormatted', 'rateFormatted', 'totalFormatted'];
+  };
+
+  /**
+   * Retrieves the formatted quantitty of item entry.
+   * @param {IItemEntry} entry
+   * @returns {string}
+   */
+  protected quantityFormatted = (entry: IItemEntry): string => {
+    return formatNumber(entry.quantity, { money: false });
   };
 
   /**
diff --git a/packages/server/src/services/Sales/Receipts/SaleReceiptTransformer.ts b/packages/server/src/services/Sales/Receipts/SaleReceiptTransformer.ts
index c8b950711..9e5d3a127 100644
--- a/packages/server/src/services/Sales/Receipts/SaleReceiptTransformer.ts
+++ b/packages/server/src/services/Sales/Receipts/SaleReceiptTransformer.ts
@@ -12,6 +12,7 @@ export class SaleReceiptTransformer extends Transformer {
    */
   public includeAttributes = (): string[] => {
     return [
+      'formattedSubtotal',
       'formattedAmount',
       'formattedReceiptDate',
       'formattedClosedAtDate',
@@ -37,6 +38,15 @@ export class SaleReceiptTransformer extends Transformer {
     return this.formatDate(receipt.closedAt);
   };
 
+  /**
+   * Retrieves the estimate formatted subtotal.
+   * @param {ISaleReceipt} receipt
+   * @returns {string}
+   */
+  protected formattedSubtotal = (receipt: ISaleReceipt): string => {
+    return formatNumber(receipt.amount, { money: false });
+  };
+
   /**
    * Retrieve formatted invoice amount.
    * @param {ISaleReceipt} estimate
diff --git a/packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailTableFooter.tsx b/packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailTableFooter.tsx
index 66ecf1b66..6171686cf 100644
--- a/packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailTableFooter.tsx
+++ b/packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailTableFooter.tsx
@@ -1,12 +1,9 @@
 // @ts-nocheck
-import React from 'react';
 import styled from 'styled-components';
-
 import {
   T,
   TotalLines,
   TotalLine,
-  FormatNumber,
   TotalLineBorderStyle,
   TotalLineTextStyle,
 } from '@/components';
@@ -23,7 +20,7 @@ export default function CreditNoteDetailTableFooter() {
       <CreditNoteTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
         <TotalLine
           title={<T id={'credit_note.drawer.label_subtotal'} />}
-          value={<FormatNumber value={creditNote.formatted_amount} />}
+          value={creditNote.formatted_subtotal}
         />
         <TotalLine
           title={<T id={'credit_note.drawer.label_total'} />}
diff --git a/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailTableFooter.tsx b/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailTableFooter.tsx
index c5a79c935..8bc3ee96a 100644
--- a/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailTableFooter.tsx
+++ b/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailTableFooter.tsx
@@ -8,7 +8,6 @@ import {
   TotalLine,
   TotalLineBorderStyle,
   TotalLineTextStyle,
-  FormatNumber,
 } from '@/components';
 import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
 
@@ -23,7 +22,7 @@ export default function EstimateDetailTableFooter() {
       <EstimateTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
         <TotalLine
           title={<T id={'estimate.details.subtotal'} />}
-          value={<FormatNumber value={estimate.amount} />}
+          value={estimate.formatted_subtotal}
           borderStyle={TotalLineBorderStyle.SingleDark}
         />
         <TotalLine
diff --git a/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/utils.tsx b/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/utils.tsx
index 71c869c7e..84acab544 100644
--- a/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/utils.tsx
+++ b/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/utils.tsx
@@ -35,9 +35,9 @@ export const useEstimateReadonlyEntriesColumns = () => {
       },
       {
         Header: intl.get('quantity'),
-        accessor: 'quantity',
+        accessor: 'quantity_formatted',
         Cell: FormatNumberCell,
-        width: getColumnWidth(entries, 'quantity', {
+        width: getColumnWidth(entries, 'quantity_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),
@@ -59,7 +59,6 @@ export const useEstimateReadonlyEntriesColumns = () => {
       {
         Header: intl.get('amount'),
         accessor: 'total_formatted',
-        Cell: FormatNumberCell,
         width: getColumnWidth(entries, 'total_formatted', {
           minWidth: 60,
           magicSpacing: 5,
diff --git a/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTableFooter.tsx b/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTableFooter.tsx
index 657606f17..b5687a091 100644
--- a/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTableFooter.tsx
+++ b/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTableFooter.tsx
@@ -23,7 +23,7 @@ export default function ReceiptDetailTableFooter() {
       <ReceiptTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
         <TotalLine
           title={<T id={'receipt.details.subtotal'} />}
-          value={receipt.formatted_amount}
+          value={receipt.formatted_subtotal}
         />
         <TotalLine
           title={<T id={'receipt.details.total'} />}
diff --git a/packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/JournalEntriesTransactions/components.tsx b/packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/JournalEntriesTransactions/components.tsx
index 247d21a46..99c8101de 100644
--- a/packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/JournalEntriesTransactions/components.tsx
+++ b/packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/JournalEntriesTransactions/components.tsx
@@ -13,7 +13,6 @@ export const useJournalEntriesTransactionsColumns = () => {
     () => [
       {
         Header: intl.get('date'),
-        accessor: 'date',
         accessor: 'formatted_date',
         Cell: FormatDateCell,
         width: 140,
@@ -34,15 +33,17 @@ export const useJournalEntriesTransactionsColumns = () => {
       },
       {
         Header: intl.get('credit'),
-        accessor: ({ credit }) => credit.formatted_amount,
+        accessor: 'credit.formatted_amount',
         width: 100,
         className: 'credit',
+        align: 'right',
       },
       {
         Header: intl.get('debit'),
-        accessor: ({ debit }) => debit.formatted_amount,
+        accessor: 'debit.formatted_amount',
         width: 100,
         className: 'debit',
+        align: 'right',
       },
     ],
     [],
diff --git a/packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerFooter.tsx b/packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerFooter.tsx
index e11cbce67..0bfd435e9 100644
--- a/packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerFooter.tsx
+++ b/packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerFooter.tsx
@@ -8,7 +8,6 @@ import {
   TotalLine,
   TotalLineBorderStyle,
   TotalLineTextStyle,
-  FormatNumber,
 } from '@/components';
 import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
 
@@ -23,7 +22,7 @@ export default function VendorCreditDetailDrawerFooter() {
       <VendorCreditTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
         <TotalLine
           title={<T id={'vendor_credit.drawer.label_subtotal'} />}
-          value={vendorCredit.formatted_amount}
+          value={vendorCredit.formatted_subtotal}
           borderStyle={TotalLineBorderStyle.SingleDark}
         />
         <TotalLine
diff --git a/packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/utils.tsx b/packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/utils.tsx
index 95d7bba67..63007d86a 100644
--- a/packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/utils.tsx
+++ b/packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/utils.tsx
@@ -49,9 +49,8 @@ export const useVendorCreditReadonlyEntriesTableColumns = () => {
       },
       {
         Header: intl.get('quantity'),
-        accessor: 'quantity',
-        Cell: FormatNumberCell,
-        width: getColumnWidth(entries, 'quantity', {
+        accessor: 'quantity_formatted',
+        width: getColumnWidth(entries, 'quantity_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),

From 0c61f85707c83c4ebd6e6cd4866bc147034685d6 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Tue, 6 Feb 2024 20:38:25 +0200
Subject: [PATCH 22/39] chore: remove format number from estimate quantity

---
 .../src/containers/Drawers/EstimateDetailDrawer/utils.tsx      | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/utils.tsx b/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/utils.tsx
index 84acab544..eb9def4e6 100644
--- a/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/utils.tsx
+++ b/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/utils.tsx
@@ -2,7 +2,7 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { getColumnWidth } from '@/utils';
-import { FormatNumberCell, TextOverviewTooltipCell } from '@/components';
+import { TextOverviewTooltipCell } from '@/components';
 import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
 
 /**
@@ -36,7 +36,6 @@ export const useEstimateReadonlyEntriesColumns = () => {
       {
         Header: intl.get('quantity'),
         accessor: 'quantity_formatted',
-        Cell: FormatNumberCell,
         width: getColumnWidth(entries, 'quantity_formatted', {
           minWidth: 60,
           magicSpacing: 5,

From 17dbe9713b97267a350a9cd52076ed5ba91af857 Mon Sep 17 00:00:00 2001
From: "a.nasouf" <a.m.nasouf@gmail.com>
Date: Sat, 10 Feb 2024 19:59:12 +0200
Subject: [PATCH 23/39] fix: remove normalizeEmail function

---
 packages/server/src/api/controllers/Contacts/Contacts.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/server/src/api/controllers/Contacts/Contacts.ts b/packages/server/src/api/controllers/Contacts/Contacts.ts
index 751654a8e..24b99e09f 100644
--- a/packages/server/src/api/controllers/Contacts/Contacts.ts
+++ b/packages/server/src/api/controllers/Contacts/Contacts.ts
@@ -153,7 +153,6 @@ export default class ContactsController extends BaseController {
       check('email')
         .optional({ nullable: true })
         .isString()
-        .normalizeEmail({ gmail_remove_dots: false })
         .isEmail()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
       check('website')

From 9395ef094a4edcb1b265208bbfbeb56e2ade7b30 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Sat, 10 Feb 2024 22:20:54 +0200
Subject: [PATCH 24/39] feat(server): wip printing financial reports

---
 .../scss/modules/financial-sheet.scss         | 41 ++++++++++++
 .../views/modules/financial-sheet.pug         | 21 +++++++
 .../FinancialStatements/APAgingSummary.ts     | 10 +++
 .../FinancialStatements/ARAgingSummary.ts     | 12 +++-
 .../FinancialStatements/BalanceSheet.ts       | 10 +++
 .../FinancialStatements/CashFlow/CashFlow.ts  | 10 +++
 .../FinancialStatements/JournalSheet.ts       |  9 +++
 .../FinancialStatements/ProfitLossSheet.ts    |  9 +++
 .../FinancialStatements/SalesByItems.ts       | 11 +++-
 .../FinancialStatements/TrialBalanceSheet.ts  | 13 +++-
 .../VendorBalanceSummary/index.ts             | 12 ++++
 .../AgingSummary/APAgingSummaryApplication.ts | 14 +++++
 .../APAgingSummaryPdfInjectable.ts            | 34 ++++++++++
 .../AgingSummary/ARAgingSummaryApplication.ts | 14 +++++
 .../ARAgingSummaryPdfInjectable.ts            | 34 ++++++++++
 .../BalanceSheet/BalanceSheetApplication.ts   | 10 +++
 .../BalanceSheetExportInjectable.ts           | 17 +++++
 .../BalanceSheet/BalanceSheetPdfInjectable.ts | 34 ++++++++++
 .../BalanceSheet/BalanceSheetTable.ts         |  4 +-
 .../CashFlow/CashflowSheetApplication.ts      | 17 +++++
 .../CashFlow/CashflowTablePdfInjectable.ts    | 33 ++++++++++
 .../CustomerBalanceSummaryApplication.ts      | 14 +++++
 .../CustomerBalanceSummaryPdf.ts              | 34 ++++++++++
 .../JournalSheet/JournalSheetApplication.ts   | 14 +++++
 .../JournalSheet/JournalSheetPdfInjectable.ts | 34 ++++++++++
 .../ProfitLossSheetApplication.ts             | 14 +++++
 .../ProfitLossSheetExportInjectable.ts        |  7 +++
 .../ProfitLossTablePdfInjectable.ts           | 34 ++++++++++
 .../SalesByItems/SalesByItemsApplication.ts   | 17 +++++
 .../SalesByItems/SalesByItemsPdfInjectable.ts | 34 ++++++++++
 .../FinancialStatements/TableSheetPdf.ts      | 62 +++++++++++++++++++
 .../TrialBalanceExportInjectable.ts           | 19 +++++-
 .../TrialBalanceSheetApplication.ts           | 10 +++
 .../TrialBalanceSheetPdfInjectsable.ts        | 34 ++++++++++
 .../VendorBalanceSummaryApplication.ts        | 14 +++++
 .../VendorBalanceSummaryPdf.ts                | 34 ++++++++++
 36 files changed, 738 insertions(+), 6 deletions(-)
 create mode 100644 packages/server/resources/scss/modules/financial-sheet.scss
 create mode 100644 packages/server/resources/views/modules/financial-sheet.pug
 create mode 100644 packages/server/src/services/FinancialStatements/AgingSummary/APAgingSummaryPdfInjectable.ts
 create mode 100644 packages/server/src/services/FinancialStatements/AgingSummary/ARAgingSummaryPdfInjectable.ts
 create mode 100644 packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetPdfInjectable.ts
 create mode 100644 packages/server/src/services/FinancialStatements/CashFlow/CashflowTablePdfInjectable.ts
 create mode 100644 packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryPdf.ts
 create mode 100644 packages/server/src/services/FinancialStatements/JournalSheet/JournalSheetPdfInjectable.ts
 create mode 100644 packages/server/src/services/FinancialStatements/ProfitLossSheet/ProfitLossTablePdfInjectable.ts
 create mode 100644 packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsPdfInjectable.ts
 create mode 100644 packages/server/src/services/FinancialStatements/TableSheetPdf.ts
 create mode 100644 packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetPdfInjectsable.ts
 create mode 100644 packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryPdf.ts

diff --git a/packages/server/resources/scss/modules/financial-sheet.scss b/packages/server/resources/scss/modules/financial-sheet.scss
new file mode 100644
index 000000000..5924dc2a3
--- /dev/null
+++ b/packages/server/resources/scss/modules/financial-sheet.scss
@@ -0,0 +1,41 @@
+
+.sheet{}
+.sheet__company-name{
+  margin: 0;
+  font-size: 1.6rem;
+}
+.sheet__sheet-type {
+  margin: 0
+}
+.sheet__sheet-date {
+  margin-top: 0.5rem;
+}
+
+.sheet__header {
+    text-align: center;
+  margin-bottom: 2rem;
+}
+
+.sheet__table {
+  border-top: 1px solid #000;
+  table-layout: fixed;
+    border-spacing: 0;
+    text-align: left;
+}
+
+.sheet__table thead th {
+    color: #000;
+    border-bottom: 1px solid #000000;
+    padding: 0.5rem;
+}
+
+.sheet__table tbody td {
+  border-bottom: 0;
+  padding-top: 0.32rem;
+  padding-bottom: 0.32rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  color: #252A31;
+  border-bottom: 1px solid rgb(37, 42, 49);
+  
+}
\ No newline at end of file
diff --git a/packages/server/resources/views/modules/financial-sheet.pug b/packages/server/resources/views/modules/financial-sheet.pug
new file mode 100644
index 000000000..019c74626
--- /dev/null
+++ b/packages/server/resources/views/modules/financial-sheet.pug
@@ -0,0 +1,21 @@
+block head
+  style 
+    //- include ../../css/modules/financial-sheet.css
+
+block content 
+  .sheet 
+    .sheet__header 
+      .sheet__company-name=organizationName
+      .sheet__sheet-type=sheetName
+      .sheet__sheet-date=sheetDate
+
+    table.sheet__table
+      thead
+        tr
+          each column in table.columns
+            th= column.label
+      tbody
+        each row in table.rows
+          tr
+            each cell in row.cells 
+              td= cell.value
\ No newline at end of file
diff --git a/packages/server/src/api/controllers/FinancialStatements/APAgingSummary.ts b/packages/server/src/api/controllers/FinancialStatements/APAgingSummary.ts
index 5d626896c..d87873a2b 100644
--- a/packages/server/src/api/controllers/FinancialStatements/APAgingSummary.ts
+++ b/packages/server/src/api/controllers/FinancialStatements/APAgingSummary.ts
@@ -71,6 +71,7 @@ export default class APAgingSummaryReportController extends BaseFinancialReportC
         ACCEPT_TYPE.APPLICATION_JSON_TABLE,
         ACCEPT_TYPE.APPLICATION_CSV,
         ACCEPT_TYPE.APPLICATION_XLSX,
+        ACCEPT_TYPE.APPLICATION_PDF
       ]);
       // Retrieves the json table format.
       if (ACCEPT_TYPE.APPLICATION_JSON_TABLE === acceptType) {
@@ -98,6 +99,15 @@ export default class APAgingSummaryReportController extends BaseFinancialReportC
           'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
         );
         return res.send(buffer);
+        // Retrieves the pdf format.
+      } else if (ACCEPT_TYPE.APPLICATION_PDF === acceptType) {
+        const pdfContent = await this.APAgingSummaryApp.pdf(tenantId, filter);
+
+        res.set({
+          'Content-Type': 'application/pdf',
+          'Content-Length': pdfContent.length,
+        });
+        return res.send(pdfContent);
         // Retrieves the json format.
       } else {
         const sheet = await this.APAgingSummaryApp.sheet(tenantId, filter);
diff --git a/packages/server/src/api/controllers/FinancialStatements/ARAgingSummary.ts b/packages/server/src/api/controllers/FinancialStatements/ARAgingSummary.ts
index 10e42e900..86b4b920a 100644
--- a/packages/server/src/api/controllers/FinancialStatements/ARAgingSummary.ts
+++ b/packages/server/src/api/controllers/FinancialStatements/ARAgingSummary.ts
@@ -11,7 +11,7 @@ import { ACCEPT_TYPE } from '@/interfaces/Http';
 @Service()
 export default class ARAgingSummaryReportController extends BaseFinancialReportController {
   @Inject()
-  ARAgingSummaryApp: ARAgingSummaryApplication;
+  private ARAgingSummaryApp: ARAgingSummaryApplication;
 
   /**
    * Router constructor.
@@ -69,6 +69,7 @@ export default class ARAgingSummaryReportController extends BaseFinancialReportC
         ACCEPT_TYPE.APPLICATION_JSON_TABLE,
         ACCEPT_TYPE.APPLICATION_CSV,
         ACCEPT_TYPE.APPLICATION_XLSX,
+        ACCEPT_TYPE.APPLICATION_PDF
       ]);
       // Retrieves the xlsx format.
       if (ACCEPT_TYPE.APPLICATION_XLSX === acceptType) {
@@ -96,6 +97,15 @@ export default class ARAgingSummaryReportController extends BaseFinancialReportC
         res.setHeader('Content-Type', 'text/csv');
 
         return res.send(buffer);
+        // Retrieves the pdf format.
+      } else if (ACCEPT_TYPE.APPLICATION_PDF === acceptType) {
+        const pdfContent = await this.ARAgingSummaryApp.pdf(tenantId, filter);
+
+        res.set({
+          'Content-Type': 'application/pdf',
+          'Content-Length': pdfContent.length,
+        });
+        return res.send(pdfContent);
         // Retrieves the json format.
       } else {
         const sheet = await this.ARAgingSummaryApp.sheet(tenantId, filter);
diff --git a/packages/server/src/api/controllers/FinancialStatements/BalanceSheet.ts b/packages/server/src/api/controllers/FinancialStatements/BalanceSheet.ts
index 0af53d723..fda717a38 100644
--- a/packages/server/src/api/controllers/FinancialStatements/BalanceSheet.ts
+++ b/packages/server/src/api/controllers/FinancialStatements/BalanceSheet.ts
@@ -101,6 +101,7 @@ export default class BalanceSheetStatementController extends BaseFinancialReport
         ACCEPT_TYPE.APPLICATION_JSON_TABLE,
         ACCEPT_TYPE.APPLICATION_XLSX,
         ACCEPT_TYPE.APPLICATION_CSV,
+        ACCEPT_TYPE.APPLICATION_PDF,
       ]);
       // Retrieves the json table format.
       if (ACCEPT_TYPE.APPLICATION_JSON_TABLE == acceptType) {
@@ -128,6 +129,15 @@ export default class BalanceSheetStatementController extends BaseFinancialReport
           'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
         );
         return res.send(buffer);
+        // Retrieves the pdf format.
+      } else if (ACCEPT_TYPE.APPLICATION_PDF === acceptType) {
+        const pdfContent = await this.balanceSheetApp.pdf(tenantId, filter);
+
+        res.set({
+          'Content-Type': 'application/pdf',
+          'Content-Length': pdfContent.length,
+        });
+        res.send(pdfContent);
       } else {
         const sheet = await this.balanceSheetApp.sheet(tenantId, filter);
 
diff --git a/packages/server/src/api/controllers/FinancialStatements/CashFlow/CashFlow.ts b/packages/server/src/api/controllers/FinancialStatements/CashFlow/CashFlow.ts
index bab04246d..bc24b5379 100644
--- a/packages/server/src/api/controllers/FinancialStatements/CashFlow/CashFlow.ts
+++ b/packages/server/src/api/controllers/FinancialStatements/CashFlow/CashFlow.ts
@@ -79,6 +79,7 @@ export default class CashFlowController extends BaseFinancialReportController {
         ACCEPT_TYPE.APPLICATION_JSON_TABLE,
         ACCEPT_TYPE.APPLICATION_CSV,
         ACCEPT_TYPE.APPLICATION_XLSX,
+        ACCEPT_TYPE.APPLICATION_PDF
       ]);
       // Retrieves the json table format.
       if (ACCEPT_TYPE.APPLICATION_JSON_TABLE === acceptType) {
@@ -106,6 +107,15 @@ export default class CashFlowController extends BaseFinancialReportController {
           'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
         );
         return res.send(buffer);
+        // Retrieves the pdf format.
+      } else if (ACCEPT_TYPE.APPLICATION_PDF === acceptType) {
+        const pdfContent = await this.cashflowSheetApp.pdf(tenantId, filter);
+
+        res.set({
+          'Content-Type': 'application/pdf',
+          'Content-Length': pdfContent.length,
+        });
+        return res.send(pdfContent);
         // Retrieves the json format.
       } else {
         const cashflow = await this.cashflowSheetApp.sheet(tenantId, filter);
diff --git a/packages/server/src/api/controllers/FinancialStatements/JournalSheet.ts b/packages/server/src/api/controllers/FinancialStatements/JournalSheet.ts
index 871bc9af8..0355766db 100644
--- a/packages/server/src/api/controllers/FinancialStatements/JournalSheet.ts
+++ b/packages/server/src/api/controllers/FinancialStatements/JournalSheet.ts
@@ -72,6 +72,7 @@ export default class JournalSheetController extends BaseFinancialReportControlle
       ACCEPT_TYPE.APPLICATION_JSON_TABLE,
       ACCEPT_TYPE.APPLICATION_XLSX,
       ACCEPT_TYPE.APPLICATION_CSV,
+      ACCEPT_TYPE.APPLICATION_PDF,
     ]);
 
     // Retrieves the json table format.
@@ -97,6 +98,14 @@ export default class JournalSheetController extends BaseFinancialReportControlle
       );
       return res.send(buffer);
       // Retrieves the json format.
+    } else if (ACCEPT_TYPE.APPLICATION_PDF === acceptType) {
+      const pdfContent = await this.journalSheetApp.pdf(tenantId, filter);
+
+      res.set({
+        'Content-Type': 'application/pdf',
+        'Content-Length': pdfContent.length,
+      });
+      res.send(pdfContent);
     } else {
       const sheet = await this.journalSheetApp.sheet(tenantId, filter);
 
diff --git a/packages/server/src/api/controllers/FinancialStatements/ProfitLossSheet.ts b/packages/server/src/api/controllers/FinancialStatements/ProfitLossSheet.ts
index 8c2404335..995df07b4 100644
--- a/packages/server/src/api/controllers/FinancialStatements/ProfitLossSheet.ts
+++ b/packages/server/src/api/controllers/FinancialStatements/ProfitLossSheet.ts
@@ -96,6 +96,7 @@ export default class ProfitLossSheetController extends BaseFinancialReportContro
       ACCEPT_TYPE.APPLICATION_JSON_TABLE,
       ACCEPT_TYPE.APPLICATION_CSV,
       ACCEPT_TYPE.APPLICATION_XLSX,
+      ACCEPT_TYPE.APPLICATION_PDF,
     ]);
     try {
       // Retrieves the csv format.
@@ -125,6 +126,14 @@ export default class ProfitLossSheetController extends BaseFinancialReportContro
         );
         return res.send(sheet);
         // Retrieves the json format.
+      } else if (acceptType === ACCEPT_TYPE.APPLICATION_PDF) {
+        const pdfContent = await this.profitLossSheetApp.pdf(tenantId, filter);
+
+        res.set({
+          'Content-Type': 'application/pdf',
+          'Content-Length': pdfContent.length,
+        });
+        return res.send(pdfContent);
       } else {
         const sheet = await this.profitLossSheetApp.sheet(tenantId, filter);
 
diff --git a/packages/server/src/api/controllers/FinancialStatements/SalesByItems.ts b/packages/server/src/api/controllers/FinancialStatements/SalesByItems.ts
index bac67231c..28ab611c0 100644
--- a/packages/server/src/api/controllers/FinancialStatements/SalesByItems.ts
+++ b/packages/server/src/api/controllers/FinancialStatements/SalesByItems.ts
@@ -11,7 +11,7 @@ import { SalesByItemsApplication } from '@/services/FinancialStatements/SalesByI
 @Service()
 export default class SalesByItemsReportController extends BaseFinancialReportController {
   @Inject()
-  salesByItemsApp: SalesByItemsApplication;
+  private salesByItemsApp: SalesByItemsApplication;
 
   /**
    * Router constructor.
@@ -71,6 +71,7 @@ export default class SalesByItemsReportController extends BaseFinancialReportCon
       ACCEPT_TYPE.APPLICATION_JSON_TABLE,
       ACCEPT_TYPE.APPLICATION_CSV,
       ACCEPT_TYPE.APPLICATION_XLSX,
+      ACCEPT_TYPE.APPLICATION_PDF,
     ]);
     // Retrieves the csv format.
     if (ACCEPT_TYPE.APPLICATION_CSV === acceptType) {
@@ -96,6 +97,14 @@ export default class SalesByItemsReportController extends BaseFinancialReportCon
       );
       return res.send(buffer);
       // Retrieves the json format.
+    } else if (ACCEPT_TYPE.APPLICATION_PDF === acceptType) {
+      const pdfContent = await this.salesByItemsApp.pdf(tenantId, filter);
+
+      res.set({
+        'Content-Type': 'application/pdf',
+        'Content-Length': pdfContent.length,
+      });
+      return res.send(pdfContent);
     } else {
       const sheet = await this.salesByItemsApp.sheet(tenantId, filter);
       return res.status(200).send(sheet);
diff --git a/packages/server/src/api/controllers/FinancialStatements/TrialBalanceSheet.ts b/packages/server/src/api/controllers/FinancialStatements/TrialBalanceSheet.ts
index ce23c1071..b92e355a2 100644
--- a/packages/server/src/api/controllers/FinancialStatements/TrialBalanceSheet.ts
+++ b/packages/server/src/api/controllers/FinancialStatements/TrialBalanceSheet.ts
@@ -3,7 +3,6 @@ import { Request, Response, Router, NextFunction } from 'express';
 import { query, ValidationChain } from 'express-validator';
 import { castArray } from 'lodash';
 import asyncMiddleware from '@/api/middleware/asyncMiddleware';
-import TrialBalanceSheetService from '@/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetInjectable';
 import BaseFinancialReportController from './BaseFinancialReportController';
 import { AbilitySubject, ReportsAction } from '@/interfaces';
 import CheckPolicies from '@/api/middleware/CheckPolicies';
@@ -81,6 +80,7 @@ export default class TrialBalanceSheetController extends BaseFinancialReportCont
         ACCEPT_TYPE.APPLICATION_JSON_TABLE,
         ACCEPT_TYPE.APPLICATION_CSV,
         ACCEPT_TYPE.APPLICATION_XLSX,
+        ACCEPT_TYPE.APPLICATION_PDF,
       ]);
       // Retrieves in json table format.
       if (acceptType === ACCEPT_TYPE.APPLICATION_JSON_TABLE) {
@@ -109,6 +109,17 @@ export default class TrialBalanceSheetController extends BaseFinancialReportCont
         res.setHeader('Content-Type', 'text/csv');
 
         return res.send(buffer);
+        // Retrieves in pdf format.
+      } else if (acceptType === ACCEPT_TYPE.APPLICATION_PDF) {
+        const pdfContent = await this.trialBalanceSheetApp.pdf(
+          tenantId,
+          filter
+        );
+        res.set({
+          'Content-Type': 'application/pdf',
+          'Content-Length': pdfContent.length,
+        });
+        res.send(pdfContent);
         // Retrieves in json format.
       } else {
         const { data, query, meta } = await this.trialBalanceSheetApp.sheet(
diff --git a/packages/server/src/api/controllers/FinancialStatements/VendorBalanceSummary/index.ts b/packages/server/src/api/controllers/FinancialStatements/VendorBalanceSummary/index.ts
index ade69cb62..f1e26a0ed 100644
--- a/packages/server/src/api/controllers/FinancialStatements/VendorBalanceSummary/index.ts
+++ b/packages/server/src/api/controllers/FinancialStatements/VendorBalanceSummary/index.ts
@@ -72,6 +72,7 @@ export default class VendorBalanceSummaryReportController extends BaseFinancialR
         ACCEPT_TYPE.APPLICATION_JSON_TABLE,
         ACCEPT_TYPE.APPLICATION_CSV,
         ACCEPT_TYPE.APPLICATION_XLSX,
+        ACCEPT_TYPE.APPLICATION_PDF,
       ]);
 
       // Retrieves the csv format.
@@ -100,6 +101,17 @@ export default class VendorBalanceSummaryReportController extends BaseFinancialR
           filter
         );
         return res.status(200).send(table);
+        // Retrieves the pdf format.
+      } else if (acceptType === ACCEPT_TYPE.APPLICATION_PDF) {
+        const pdfContent = await this.vendorBalanceSummaryApp.pdf(
+          tenantId,
+          filter
+        );
+        res.set({
+          'Content-Type': 'application/pdf',
+          'Content-Length': pdfContent.length,
+        });
+        return res.send(pdfContent);
         // Retrieves the json format.
       } else {
         const sheet = await this.vendorBalanceSummaryApp.sheet(
diff --git a/packages/server/src/services/FinancialStatements/AgingSummary/APAgingSummaryApplication.ts b/packages/server/src/services/FinancialStatements/AgingSummary/APAgingSummaryApplication.ts
index 73c08b2d8..52e6db251 100644
--- a/packages/server/src/services/FinancialStatements/AgingSummary/APAgingSummaryApplication.ts
+++ b/packages/server/src/services/FinancialStatements/AgingSummary/APAgingSummaryApplication.ts
@@ -3,6 +3,7 @@ import { APAgingSummaryExportInjectable } from './APAgingSummaryExportInjectable
 import { APAgingSummaryTableInjectable } from './APAgingSummaryTableInjectable';
 import { IAPAgingSummaryQuery } from '@/interfaces';
 import { APAgingSummaryService } from './APAgingSummaryService';
+import { APAgingSummaryPdfInjectable } from './APAgingSummaryPdfInjectable';
 
 @Service()
 export class APAgingSummaryApplication {
@@ -15,6 +16,9 @@ export class APAgingSummaryApplication {
   @Inject()
   private APAgingSummarySheet: APAgingSummaryService;
 
+  @Inject()
+  private APAgingSumaryPdf: APAgingSummaryPdfInjectable;
+
   /**
    * Retrieve the A/P aging summary in sheet format.
    * @param {number} tenantId
@@ -50,4 +54,14 @@ export class APAgingSummaryApplication {
   public xlsx(tenantId: number, query: IAPAgingSummaryQuery) {
     return this.APAgingSummaryExport.xlsx(tenantId, query);
   }
+
+  /**
+   * Retrieves the A/P aging summary in pdf format.
+   * @param {number} tenantId 
+   * @param {IAPAgingSummaryQuery} query 
+   * @returns {Promise<Buffer>}
+   */
+  public pdf(tenantId: number, query: IAPAgingSummaryQuery) {
+    return this.APAgingSumaryPdf.pdf(tenantId, query);
+  }
 }
diff --git a/packages/server/src/services/FinancialStatements/AgingSummary/APAgingSummaryPdfInjectable.ts b/packages/server/src/services/FinancialStatements/AgingSummary/APAgingSummaryPdfInjectable.ts
new file mode 100644
index 000000000..e1a74f80a
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/AgingSummary/APAgingSummaryPdfInjectable.ts
@@ -0,0 +1,34 @@
+import { Inject, Service } from 'typedi';
+import { IAPAgingSummaryQuery } from '@/interfaces';
+import { TableSheetPdf } from '../TableSheetPdf';
+import { APAgingSummaryTableInjectable } from './APAgingSummaryTableInjectable';
+
+@Service()
+export class APAgingSummaryPdfInjectable {
+  @Inject()
+  private APAgingSummaryTable: APAgingSummaryTableInjectable;
+
+  @Inject()
+  private tableSheetPdf: TableSheetPdf;
+
+  /**
+   * Converts the given A/P aging summary sheet table to pdf.
+   * @param {number} tenantId - Tenant ID.
+   * @param {IAPAgingSummaryQuery} query - Balance sheet query.
+   * @returns {Promise<Buffer>}
+   */
+  public async pdf(
+    tenantId: number,
+    query: IAPAgingSummaryQuery
+  ): Promise<Buffer> {
+    const table = await this.APAgingSummaryTable.table(tenantId, query);
+    const sheetName = 'AR Aging Summary';
+
+    return this.tableSheetPdf.convertToPdf(
+      tenantId,
+      table.table,
+      sheetName,
+      table.meta.baseCurrency
+    );
+  }
+}
diff --git a/packages/server/src/services/FinancialStatements/AgingSummary/ARAgingSummaryApplication.ts b/packages/server/src/services/FinancialStatements/AgingSummary/ARAgingSummaryApplication.ts
index d3282ca4b..f24932f13 100644
--- a/packages/server/src/services/FinancialStatements/AgingSummary/ARAgingSummaryApplication.ts
+++ b/packages/server/src/services/FinancialStatements/AgingSummary/ARAgingSummaryApplication.ts
@@ -3,6 +3,7 @@ import { IARAgingSummaryQuery } from '@/interfaces';
 import { ARAgingSummaryTableInjectable } from './ARAgingSummaryTableInjectable';
 import { ARAgingSummaryExportInjectable } from './ARAgingSummaryExportInjectable';
 import ARAgingSummaryService from './ARAgingSummaryService';
+import { ARAgingSummaryPdfInjectable } from './ARAgingSummaryPdfInjectable';
 
 @Service()
 export class ARAgingSummaryApplication {
@@ -15,6 +16,9 @@ export class ARAgingSummaryApplication {
   @Inject()
   private ARAgingSummarySheet: ARAgingSummaryService;
 
+  @Inject()
+  private ARAgingSummaryPdf: ARAgingSummaryPdfInjectable;
+
   /**
    * Retrieve the A/R aging summary sheet.
    * @param {number} tenantId
@@ -50,4 +54,14 @@ export class ARAgingSummaryApplication {
   public csv(tenantId: number, query: IARAgingSummaryQuery) {
     return this.ARAgingSummaryExport.csv(tenantId, query);
   }
+
+  /**
+   * Retrieves the A/R aging summary in pdf format.
+   * @param {number} tenantId
+   * @param {IARAgingSummaryQuery} query
+   * @returns {Promise<Buffer>}
+   */
+  public pdf(tenantId: number, query: IARAgingSummaryQuery) {
+    return this.ARAgingSummaryPdf.pdf(tenantId, query);
+  }
 }
diff --git a/packages/server/src/services/FinancialStatements/AgingSummary/ARAgingSummaryPdfInjectable.ts b/packages/server/src/services/FinancialStatements/AgingSummary/ARAgingSummaryPdfInjectable.ts
new file mode 100644
index 000000000..57ea3fef5
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/AgingSummary/ARAgingSummaryPdfInjectable.ts
@@ -0,0 +1,34 @@
+import { Inject, Service } from 'typedi';
+import { IARAgingSummaryQuery } from '@/interfaces';
+import { TableSheetPdf } from '../TableSheetPdf';
+import { ARAgingSummaryTableInjectable } from './ARAgingSummaryTableInjectable';
+
+@Service()
+export class ARAgingSummaryPdfInjectable {
+  @Inject()
+  private ARAgingSummaryTable: ARAgingSummaryTableInjectable;
+
+  @Inject()
+  private tableSheetPdf: TableSheetPdf;
+
+  /**
+   * Converts the given balance sheet table to pdf.
+   * @param {number} tenantId - Tenant ID.
+   * @param {IBalanceSheetQuery} query - Balance sheet query.
+   * @returns {Promise<Buffer>}
+   */
+  public async pdf(
+    tenantId: number,
+    query: IARAgingSummaryQuery
+  ): Promise<Buffer> {
+    const table = await this.ARAgingSummaryTable.table(tenantId, query);
+    const sheetName = 'AR Aging Summary';
+
+    return this.tableSheetPdf.convertToPdf(
+      tenantId,
+      table.table,
+      sheetName,
+      table.meta.baseCurrency
+    );
+  }
+}
diff --git a/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetApplication.ts b/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetApplication.ts
index 01ab77bfe..0c965a5f5 100644
--- a/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetApplication.ts
+++ b/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetApplication.ts
@@ -54,4 +54,14 @@ export class BalanceSheetApplication {
   public csv(tenantId: number, query: IBalanceSheetQuery): Promise<string> {
     return this.balanceSheetExport.csv(tenantId, query);
   }
+
+  /**
+   * Retrieves the balance sheet in pdf format.
+   * @param {number} tenantId
+   * @param {IBalanceSheetQuery} query
+   * @returns {Promise<Buffer>}
+   */
+  public pdf(tenantId: number, query: IBalanceSheetQuery) {
+    return this.balanceSheetExport.pdf(tenantId, query);
+  }
 }
diff --git a/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetExportInjectable.ts b/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetExportInjectable.ts
index 2c43d5f80..9198d8536 100644
--- a/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetExportInjectable.ts
+++ b/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetExportInjectable.ts
@@ -2,12 +2,16 @@ import { Inject, Service } from 'typedi';
 import { BalanceSheetTableInjectable } from './BalanceSheetTableInjectable';
 import { TableSheet } from '@/lib/Xlsx/TableSheet';
 import { IBalanceSheetQuery } from '@/interfaces';
+import { BalanceSheetPdfInjectable } from './BalanceSheetPdfInjectable';
 
 @Service()
 export class BalanceSheetExportInjectable {
   @Inject()
   private balanceSheetTable: BalanceSheetTableInjectable;
 
+  @Inject()
+  private balanceSheetPdf: BalanceSheetPdfInjectable;
+
   /**
    * Retrieves the trial balance sheet in XLSX format.
    * @param {number} tenantId
@@ -40,4 +44,17 @@ export class BalanceSheetExportInjectable {
 
     return tableCsv;
   }
+
+  /**
+   * Retrieves the balance sheet in pdf format.
+   * @param {number} tenantId
+   * @param {IBalanceSheetQuery} query
+   * @returns {Promise<Buffer>}
+   */
+  public async pdf(
+    tenantId: number,
+    query: IBalanceSheetQuery
+  ): Promise<Buffer> {
+    return this.balanceSheetPdf.pdf(tenantId, query);
+  }
 }
diff --git a/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetPdfInjectable.ts b/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetPdfInjectable.ts
new file mode 100644
index 000000000..44fd991b3
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetPdfInjectable.ts
@@ -0,0 +1,34 @@
+import { Inject, Service } from 'typedi';
+import { IBalanceSheetQuery } from '@/interfaces';
+import { BalanceSheetTableInjectable } from './BalanceSheetTableInjectable';
+import { TableSheetPdf } from '../TableSheetPdf';
+
+@Service()
+export class BalanceSheetPdfInjectable {
+  @Inject()
+  private balanceSheetTable: BalanceSheetTableInjectable;
+
+  @Inject()
+  private tableSheetPdf: TableSheetPdf;
+
+  /**
+   * Converts the given balance sheet table to pdf.
+   * @param {number} tenantId - Tenant ID.
+   * @param {IBalanceSheetQuery} query - Balance sheet query.
+   * @returns {Promise<Buffer>}
+   */
+  public async pdf(
+    tenantId: number,
+    query: IBalanceSheetQuery
+  ): Promise<Buffer> {
+    const table = await this.balanceSheetTable.table(tenantId, query);
+    const sheetName = 'Balance Sheet';
+
+    return this.tableSheetPdf.convertToPdf(
+      tenantId,
+      table.table,
+      sheetName,
+      table.meta.baseCurrency
+    );
+  }
+}
diff --git a/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetTable.ts b/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetTable.ts
index 349b1a8f4..088362766 100644
--- a/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetTable.ts
+++ b/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetTable.ts
@@ -43,13 +43,13 @@ export default class BalanceSheetTable extends R.compose(
   /**
    * @param {}
    */
-  reportData: IBalanceSheetStatementData;
+  private reportData: IBalanceSheetStatementData;
 
   /**
    * Balance sheet query.
    * @parma {}
    */
-  query: BalanceSheetQuery;
+  private query: BalanceSheetQuery;
 
   /**
    * Constructor method.
diff --git a/packages/server/src/services/FinancialStatements/CashFlow/CashflowSheetApplication.ts b/packages/server/src/services/FinancialStatements/CashFlow/CashflowSheetApplication.ts
index 0fd8b7357..72a587f52 100644
--- a/packages/server/src/services/FinancialStatements/CashFlow/CashflowSheetApplication.ts
+++ b/packages/server/src/services/FinancialStatements/CashFlow/CashflowSheetApplication.ts
@@ -3,6 +3,7 @@ import { CashflowExportInjectable } from './CashflowExportInjectable';
 import { ICashFlowStatementQuery } from '@/interfaces';
 import CashFlowStatementService from './CashFlowService';
 import { CashflowTableInjectable } from './CashflowTableInjectable';
+import { CashflowTablePdfInjectable } from './CashflowTablePdfInjectable';
 
 @Service()
 export class CashflowSheetApplication {
@@ -15,6 +16,9 @@ export class CashflowSheetApplication {
   @Inject()
   private cashflowTable: CashflowTableInjectable;
 
+  @Inject()
+  private cashflowPdf: CashflowTablePdfInjectable;
+
   /**
    * Retrieves the cashflow sheet
    * @param {number} tenantId
@@ -55,4 +59,17 @@ export class CashflowSheetApplication {
   ): Promise<string> {
     return this.cashflowExport.csv(tenantId, query);
   }
+
+  /**
+   * Retrieves the cashflow sheet in pdf format.
+   * @param {number} tenantId 
+   * @param {ICashFlowStatementQuery} query 
+   * @returns {Promise<Buffer>}
+   */
+  public async pdf(
+    tenantId: number,
+    query: ICashFlowStatementQuery
+  ): Promise<Buffer> {
+    return this.cashflowPdf.pdf(tenantId, query);
+  }
 }
diff --git a/packages/server/src/services/FinancialStatements/CashFlow/CashflowTablePdfInjectable.ts b/packages/server/src/services/FinancialStatements/CashFlow/CashflowTablePdfInjectable.ts
new file mode 100644
index 000000000..eaab60db4
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/CashFlow/CashflowTablePdfInjectable.ts
@@ -0,0 +1,33 @@
+import { Inject } from 'typedi';
+import { CashflowTableInjectable } from './CashflowTableInjectable';
+import { TableSheetPdf } from '../TableSheetPdf';
+import { ICashFlowStatementQuery } from '@/interfaces';
+
+export class CashflowTablePdfInjectable {
+  @Inject()
+  private cashflowTable: CashflowTableInjectable;
+
+  @Inject()
+  private tableSheetPdf: TableSheetPdf;
+
+  /**
+   * Converts the given cashflow sheet table to pdf.
+   * @param {number} tenantId - Tenant ID.
+   * @param {IBalanceSheetQuery} query - Balance sheet query.
+   * @returns {Promise<Buffer>}
+   */
+  public async pdf(
+    tenantId: number,
+    query: ICashFlowStatementQuery
+  ): Promise<Buffer> {
+    const table = await this.cashflowTable.table(tenantId, query);
+    const sheetName = 'Cashflow Sheet';
+
+    return this.tableSheetPdf.convertToPdf(
+      tenantId,
+      table.table,
+      sheetName,
+      table.meta.baseCurrency
+    );
+  }
+}
diff --git a/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryApplication.ts b/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryApplication.ts
index 964cd91a9..a1693e7d8 100644
--- a/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryApplication.ts
+++ b/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryApplication.ts
@@ -3,6 +3,7 @@ import { CustomerBalanceSummaryExportInjectable } from './CustomerBalanceSummary
 import { CustomerBalanceSummaryTableInjectable } from './CustomerBalanceSummaryTableInjectable';
 import { ICustomerBalanceSummaryQuery } from '@/interfaces';
 import { CustomerBalanceSummaryService } from './CustomerBalanceSummaryService';
+import { CustomerBalanceSummaryPdf } from './CustomerBalanceSummaryPdf';
 
 @Service()
 export class CustomerBalanceSummaryApplication {
@@ -15,6 +16,9 @@ export class CustomerBalanceSummaryApplication {
   @Inject()
   private customerBalanceSummarySheet: CustomerBalanceSummaryService;
 
+  @Inject()
+  private customerBalanceSummaryPdf: CustomerBalanceSummaryPdf;
+
   /**
    * Retrieves the customer balance sheet in json format.
    * @param {number} tenantId
@@ -57,4 +61,14 @@ export class CustomerBalanceSummaryApplication {
   public csv(tenantId: number, query: ICustomerBalanceSummaryQuery) {
     return this.customerBalanceSummaryExport.csv(tenantId, query);
   }
+
+  /**
+   * Retrieves the customer balance sheet in PDF format.
+   * @param {number} tenantId
+   * @param {ICustomerBalanceSummaryQuery} query
+   * @returns {Promise<Buffer>}
+   */
+  public pdf(tenantId: number, query: ICustomerBalanceSummaryQuery) {
+    return this.customerBalanceSummaryPdf.pdf(tenantId, query);
+  }
 }
diff --git a/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryPdf.ts b/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryPdf.ts
new file mode 100644
index 000000000..67e74349b
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryPdf.ts
@@ -0,0 +1,34 @@
+import { Inject, Service } from 'typedi';
+import { IAPAgingSummaryQuery, ICustomerBalanceSummaryQuery } from '@/interfaces';
+import { TableSheetPdf } from '../TableSheetPdf';
+import { CustomerBalanceSummaryTableInjectable } from './CustomerBalanceSummaryTableInjectable';
+
+@Service()
+export class CustomerBalanceSummaryPdf {
+  @Inject()
+  private customerBalanceSummaryTable: CustomerBalanceSummaryTableInjectable;
+
+  @Inject()
+  private tableSheetPdf: TableSheetPdf;
+
+  /**
+   * Converts the given A/P aging summary sheet table to pdf.
+   * @param {number} tenantId - Tenant ID.
+   * @param {IAPAgingSummaryQuery} query - Balance sheet query.
+   * @returns {Promise<Buffer>}
+   */
+  public async pdf(
+    tenantId: number,
+    query: ICustomerBalanceSummaryQuery
+  ): Promise<Buffer> {
+    const table = await this.customerBalanceSummaryTable.table(tenantId, query);
+    const sheetName = 'Customer Balance Summary';
+
+    return this.tableSheetPdf.convertToPdf(
+      tenantId,
+      table.table,
+      sheetName,
+      table.meta.baseCurrency
+    );
+  }
+}
diff --git a/packages/server/src/services/FinancialStatements/JournalSheet/JournalSheetApplication.ts b/packages/server/src/services/FinancialStatements/JournalSheet/JournalSheetApplication.ts
index 4c403ff58..8d3f5d614 100644
--- a/packages/server/src/services/FinancialStatements/JournalSheet/JournalSheetApplication.ts
+++ b/packages/server/src/services/FinancialStatements/JournalSheet/JournalSheetApplication.ts
@@ -3,6 +3,7 @@ import { JournalSheetService } from './JournalSheetService';
 import { JournalSheetTableInjectable } from './JournalSheetTableInjectable';
 import { IJournalReportQuery, IJournalTable } from '@/interfaces';
 import { JournalSheetExportInjectable } from './JournalSheetExport';
+import { JournalSheetPdfInjectable } from './JournalSheetPdfInjectable';
 
 export class JournalSheetApplication {
   @Inject()
@@ -14,6 +15,9 @@ export class JournalSheetApplication {
   @Inject()
   private journalExport: JournalSheetExportInjectable;
 
+  @Inject()
+  private journalPdf: JournalSheetPdfInjectable;
+
   /**
    * Retrieves the journal sheet.
    * @param {number} tenantId
@@ -56,4 +60,14 @@ export class JournalSheetApplication {
   public csv(tenantId: number, query: IJournalReportQuery) {
     return this.journalExport.csv(tenantId, query);
   }
+
+  /**
+   * Retrieves the journal sheet in pdf format. 
+   * @param {number} tenantId 
+   * @param {IJournalReportQuery} query 
+   * @returns {Promise<Buffer>}
+   */
+  public pdf(tenantId: number, query: IJournalReportQuery) {
+    return this.journalPdf.pdf(tenantId, query);
+  }
 }
diff --git a/packages/server/src/services/FinancialStatements/JournalSheet/JournalSheetPdfInjectable.ts b/packages/server/src/services/FinancialStatements/JournalSheet/JournalSheetPdfInjectable.ts
new file mode 100644
index 000000000..e3fcbfb26
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/JournalSheet/JournalSheetPdfInjectable.ts
@@ -0,0 +1,34 @@
+import { IJournalReportQuery } from '@/interfaces';
+import { TableSheetPdf } from '../TableSheetPdf';
+import { JournalSheetTableInjectable } from './JournalSheetTableInjectable';
+import { Inject, Service } from 'typedi';
+
+@Service()
+export class JournalSheetPdfInjectable {
+  @Inject()
+  private journalSheetTable: JournalSheetTableInjectable;
+
+  @Inject()
+  private tableSheetPdf: TableSheetPdf;
+
+  /**
+   * Converts the given journal sheet table to pdf.
+   * @param {number} tenantId - Tenant ID.
+   * @param {IBalanceSheetQuery} query - Balance sheet query.
+   * @returns {Promise<Buffer>}
+   */
+  public async pdf(
+    tenantId: number,
+    query: IJournalReportQuery
+  ): Promise<Buffer> {
+    const table = await this.journalSheetTable.table(tenantId, query);
+    const sheetName = 'Journal Sheet';
+
+    return this.tableSheetPdf.convertToPdf(
+      tenantId,
+      table.table,
+      sheetName,
+      table.meta.baseCurrency
+    );
+  }
+}
diff --git a/packages/server/src/services/FinancialStatements/ProfitLossSheet/ProfitLossSheetApplication.ts b/packages/server/src/services/FinancialStatements/ProfitLossSheet/ProfitLossSheetApplication.ts
index eee89e73a..6d15e2cc6 100644
--- a/packages/server/src/services/FinancialStatements/ProfitLossSheet/ProfitLossSheetApplication.ts
+++ b/packages/server/src/services/FinancialStatements/ProfitLossSheet/ProfitLossSheetApplication.ts
@@ -3,6 +3,7 @@ import { ProfitLossSheetExportInjectable } from './ProfitLossSheetExportInjectab
 import { ProfitLossSheetTableInjectable } from './ProfitLossSheetTableInjectable';
 import { IProfitLossSheetQuery, IProfitLossSheetTable } from '@/interfaces';
 import ProfitLossSheetService from './ProfitLossSheetService';
+import { ProfitLossTablePdfInjectable } from './ProfitLossTablePdfInjectable';
 
 @Service()
 export class ProfitLossSheetApplication {
@@ -15,6 +16,9 @@ export class ProfitLossSheetApplication {
   @Inject()
   private profitLossSheet: ProfitLossSheetService;
 
+  @Inject()
+  private profitLossPdf: ProfitLossTablePdfInjectable;
+
   /**
    * Retreives the profit/loss sheet.
    * @param {number} tenantId
@@ -57,4 +61,14 @@ export class ProfitLossSheetApplication {
   public xlsx(tenantId: number, query: IProfitLossSheetQuery): Promise<Buffer> {
     return this.profitLossExport.xlsx(tenantId, query);
   }
+
+  /**
+   * Retrieves the profit/loss sheet in pdf format.
+   * @param {number} tenantId
+   * @param {IProfitLossSheetQuery} query
+   * @returns {Promise<Buffer>}
+   */
+  public pdf(tenantId: number, query: IProfitLossSheetQuery): Promise<Buffer> {
+    return this.profitLossPdf.pdf(tenantId, query);
+  }
 }
diff --git a/packages/server/src/services/FinancialStatements/ProfitLossSheet/ProfitLossSheetExportInjectable.ts b/packages/server/src/services/FinancialStatements/ProfitLossSheet/ProfitLossSheetExportInjectable.ts
index ba2371797..4fa9762d3 100644
--- a/packages/server/src/services/FinancialStatements/ProfitLossSheet/ProfitLossSheetExportInjectable.ts
+++ b/packages/server/src/services/FinancialStatements/ProfitLossSheet/ProfitLossSheetExportInjectable.ts
@@ -40,4 +40,11 @@ export class ProfitLossSheetExportInjectable {
 
     return tableCsv;
   }
+
+  public async pdf(
+    tenantId: number,
+    query: IProfitLossSheetQuery
+  ): Promise<Buffer> {
+    const table = await this.profitLossSheetTable.table(tenantId, query);
+  }
 }
diff --git a/packages/server/src/services/FinancialStatements/ProfitLossSheet/ProfitLossTablePdfInjectable.ts b/packages/server/src/services/FinancialStatements/ProfitLossSheet/ProfitLossTablePdfInjectable.ts
new file mode 100644
index 000000000..24b720b1a
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/ProfitLossSheet/ProfitLossTablePdfInjectable.ts
@@ -0,0 +1,34 @@
+import { Inject, Service } from 'typedi';
+import { IProfitLossSheetQuery } from '@/interfaces';
+import { ProfitLossSheetTableInjectable } from './ProfitLossSheetTableInjectable';
+import { TableSheetPdf } from '../TableSheetPdf';
+
+@Service()
+export class ProfitLossTablePdfInjectable {
+  @Inject()
+  private profitLossTable: ProfitLossSheetTableInjectable;
+
+  @Inject()
+  private tableSheetPdf: TableSheetPdf;
+
+  /**
+   * Retrieves the profit/loss sheet in pdf format.
+   * @param {number} tenantId
+   * @param {number} query
+   * @returns {Promise<IBalanceSheetTable>}
+   */
+  public async pdf(
+    tenantId: number,
+    query: IProfitLossSheetQuery
+  ): Promise<Buffer> {
+    const table = await this.profitLossTable.table(tenantId, query);
+    const sheetName = 'Profit & Loss Sheet';
+
+    return this.tableSheetPdf.convertToPdf(
+      tenantId,
+      table.table,
+      sheetName,
+      table.meta.baseCurrency
+    );
+  }
+}
diff --git a/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsApplication.ts b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsApplication.ts
index b3b51869f..498e3eb66 100644
--- a/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsApplication.ts
+++ b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsApplication.ts
@@ -8,6 +8,7 @@ import {
 import { SalesByItemsReportService } from './SalesByItemsService';
 import { SalesByItemsTableInjectable } from './SalesByItemsTableInjectable';
 import { SalesByItemsExport } from './SalesByItemsExport';
+import { SalesByItemsPdfInjectable } from './SalesByItemsPdfInjectable';
 
 @Service()
 export class SalesByItemsApplication {
@@ -20,6 +21,9 @@ export class SalesByItemsApplication {
   @Inject()
   private salesByItemsExport: SalesByItemsExport;
 
+  @Inject()
+  private salesByItemsPdf: SalesByItemsPdfInjectable;
+
   /**
    * Retrieves the sales by items report in json format.
    * @param {number} tenantId
@@ -71,4 +75,17 @@ export class SalesByItemsApplication {
   ): Promise<Buffer> {
     return this.salesByItemsExport.xlsx(tenantId, filter);
   }
+
+  /**
+   * Retrieves the sales by items in pdf format.
+   * @param {number} tenantId
+   * @param {ISalesByItemsReportQuery} query
+   * @returns {Promise<Buffer>}
+   */
+  public pdf(
+    tenantId: number,
+    query: ISalesByItemsReportQuery
+  ): Promise<Buffer> {
+    return this.salesByItemsPdf.pdf(tenantId, query);
+  }
 }
diff --git a/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsPdfInjectable.ts b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsPdfInjectable.ts
new file mode 100644
index 000000000..6cf3d98ec
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsPdfInjectable.ts
@@ -0,0 +1,34 @@
+import { Inject, Service } from 'typedi';
+import { ISalesByItemsReportQuery } from '@/interfaces';
+import { SalesByItemsTableInjectable } from './SalesByItemsTableInjectable';
+import { TableSheetPdf } from '../TableSheetPdf';
+
+@Service()
+export class SalesByItemsPdfInjectable {
+  @Inject()
+  private salesByItemsTable: SalesByItemsTableInjectable;
+
+  @Inject()
+  private tableSheetPdf: TableSheetPdf;
+
+  /**
+   * Retrieves the sales by items sheet in pdf format.
+   * @param {number} tenantId
+   * @param {number} query
+   * @returns {Promise<IBalanceSheetTable>}
+   */
+  public async pdf(
+    tenantId: number,
+    query: ISalesByItemsReportQuery
+  ): Promise<Buffer> {
+    const table = await this.salesByItemsTable.table(tenantId, query);
+    const sheetName = 'Sales By Items';
+
+    return this.tableSheetPdf.convertToPdf(
+      tenantId,
+      table.table,
+      sheetName,
+      table.meta.baseCurrency
+    );
+  }
+}
diff --git a/packages/server/src/services/FinancialStatements/TableSheetPdf.ts b/packages/server/src/services/FinancialStatements/TableSheetPdf.ts
new file mode 100644
index 000000000..16fd0f6f9
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/TableSheetPdf.ts
@@ -0,0 +1,62 @@
+import { Inject, Service } from 'typedi';
+import * as R from 'ramda';
+import { ITableColumn, ITableData, ITableRow } from '@/interfaces';
+import { ChromiumlyTenancy } from '@/services/ChromiumlyTenancy/ChromiumlyTenancy';
+import { TemplateInjectable } from '@/services/TemplateInjectable/TemplateInjectable';
+import { FinancialTableStructure } from './FinancialTableStructure';
+
+@Service()
+export class TableSheetPdf {
+  @Inject()
+  private templateInjectable: TemplateInjectable;
+
+  @Inject()
+  private chromiumlyTenancy: ChromiumlyTenancy;
+
+  /**
+   * Converts the table to PDF.
+   * @param {number} tenantId -
+   * @param {IFinancialTable} table -
+   * @param {string} sheetName - Sheet name.
+   * @param {string} sheetDate - Sheet date.
+   */
+  public async convertToPdf(
+    tenantId: number,
+    table: ITableData,
+    sheetName: string,
+    sheetDate: string
+  ) {
+    const columns = this.tablePdfColumns(table.columns);
+    const rows = this.tablePdfRows(table.rows);
+    const htmlContent = await this.templateInjectable.render(
+      tenantId,
+      'modules/financial-sheet',
+      {
+        sheetName,
+        sheetDate,
+        table: { rows, columns },
+      }
+    );
+    return this.chromiumlyTenancy.convertHtmlContent(tenantId, htmlContent, {
+      margins: { top: 0, bottom: 0, left: 0, right: 0 },
+    });
+  }
+
+  /**
+   * Converts the table columns to pdf columns.
+   * @param {ITableColumn[]} columns
+   * @returns {ITableColumn[]}
+   */
+  private tablePdfColumns = (columns: ITableColumn[]): ITableColumn[] => {
+    return columns;
+  };
+
+  /**
+   * Converts the table rows to pdf rows.
+   * @param {ITableRow[]} rows -
+   * @returns {ITableRow[]}
+   */
+  private tablePdfRows = (rows: ITableRow[]): ITableRow[] => {
+    return R.compose(FinancialTableStructure.flatNestedTree)(rows);
+  };
+}
diff --git a/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceExportInjectable.ts b/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceExportInjectable.ts
index a515f1beb..62b847f7c 100644
--- a/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceExportInjectable.ts
+++ b/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceExportInjectable.ts
@@ -1,13 +1,17 @@
+import { Inject, Service } from 'typedi';
 import { TableSheet } from '@/lib/Xlsx/TableSheet';
 import { ITrialBalanceSheetQuery } from '@/interfaces';
-import { Inject, Service } from 'typedi';
 import { TrialBalanceSheetTableInjectable } from './TrialBalanceSheetTableInjectable';
+import { TrialBalanceSheetPdfInjectable } from './TrialBalanceSheetPdfInjectsable';
 
 @Service()
 export class TrialBalanceExportInjectable {
   @Inject()
   private trialBalanceSheetTable: TrialBalanceSheetTableInjectable;
 
+  @Inject()
+  private trialBalanceSheetPdf: TrialBalanceSheetPdfInjectable;
+
   /**
    * Retrieves the trial balance sheet in XLSX format.
    * @param {number} tenantId
@@ -40,4 +44,17 @@ export class TrialBalanceExportInjectable {
 
     return tableCsv;
   }
+
+  /**
+   * Retrieves the trial balance sheet in PDF format.
+   * @param {number} tenantId 
+   * @param {ITrialBalanceSheetQuery} query 
+   * @returns {Promise<Buffer>}
+   */
+  public async pdf(
+    tenantId: number,
+    query: ITrialBalanceSheetQuery
+  ): Promise<Buffer> {
+    return this.trialBalanceSheetPdf.pdf(tenantId, query);
+  }
 }
diff --git a/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetApplication.ts b/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetApplication.ts
index a771c8f15..20c485ecc 100644
--- a/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetApplication.ts
+++ b/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetApplication.ts
@@ -57,4 +57,14 @@ export class TrialBalanceSheetApplication {
   public async xlsx(tenantId: number, query: ITrialBalanceSheetQuery) {
     return this.exportable.xlsx(tenantId, query);
   }
+
+  /**
+   * Retrieve the trial balance sheet in pdf format.
+   * @param {number} tenantId
+   * @param {ITrialBalanceSheetQuery} query
+   * @returns {Promise<Buffer>}
+   */
+  public async pdf(tenantId: number, query: ITrialBalanceSheetQuery) {
+    return this.exportable.pdf(tenantId, query);
+  }
 }
diff --git a/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetPdfInjectsable.ts b/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetPdfInjectsable.ts
new file mode 100644
index 000000000..1907dd26d
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetPdfInjectsable.ts
@@ -0,0 +1,34 @@
+import { Inject, Service } from 'typedi';
+import { ITrialBalanceSheetQuery } from '@/interfaces';
+import { TableSheetPdf } from '../TableSheetPdf';
+import { TrialBalanceSheetTableInjectable } from './TrialBalanceSheetTableInjectable';
+
+@Service()
+export class TrialBalanceSheetPdfInjectable {
+  @Inject()
+  private trialBalanceSheetTable: TrialBalanceSheetTableInjectable;
+
+  @Inject()
+  private tableSheetPdf: TableSheetPdf;
+
+  /**
+   * Converts the given balance sheet table to pdf.
+   * @param {number} tenantId - Tenant ID.
+   * @param {IBalanceSheetQuery} query - Balance sheet query.
+   * @returns {Promise<Buffer>}
+   */
+  public async pdf(
+    tenantId: number,
+    query: ITrialBalanceSheetQuery
+  ): Promise<Buffer> {
+    const table = await this.trialBalanceSheetTable.table(tenantId, query);
+    const sheetName = 'Trial Balance Sheet';
+
+    return this.tableSheetPdf.convertToPdf(
+      tenantId,
+      table.table,
+      sheetName,
+      table.meta.baseCurrency
+    );
+  }
+}
diff --git a/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryApplication.ts b/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryApplication.ts
index 5fe4bc74d..c02eac224 100644
--- a/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryApplication.ts
+++ b/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryApplication.ts
@@ -3,6 +3,7 @@ import { IVendorBalanceSummaryQuery } from '@/interfaces';
 import { VendorBalanceSummaryTableInjectable } from './VendorBalanceSummaryTableInjectable';
 import { VendorBalanceSummaryExportInjectable } from './VendorBalanceSummaryExportInjectable';
 import { VendorBalanceSummaryService } from './VendorBalanceSummaryService';
+import { VendorBalanceSummaryPdf } from './VendorBalanceSummaryPdf';
 
 @Service()
 export class VendorBalanceSummaryApplication {
@@ -15,6 +16,9 @@ export class VendorBalanceSummaryApplication {
   @Inject()
   private vendorBalanceSummaryExport: VendorBalanceSummaryExportInjectable;
 
+  @Inject()
+  private vendorBalanceSummaryPdf: VendorBalanceSummaryPdf;
+
   /**
    * Retrieves the vendor balance summary sheet in sheet format.
    * @param {number} tenantId
@@ -59,4 +63,14 @@ export class VendorBalanceSummaryApplication {
   ): Promise<string> {
     return this.vendorBalanceSummaryExport.csv(tenantId, query);
   }
+
+  /**
+   * Retrieves the vendor balance summary sheet in pdf format.
+   * @param {number} tenantId
+   * @param {IVendorBalanceSummaryQuery} query
+   * @returns {Promise<Buffer>}
+   */
+  public pdf(tenantId: number, query: IVendorBalanceSummaryQuery) {
+    return this.vendorBalanceSummaryPdf.pdf(tenantId, query);
+  }
 }
diff --git a/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryPdf.ts b/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryPdf.ts
new file mode 100644
index 000000000..a404d673e
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryPdf.ts
@@ -0,0 +1,34 @@
+import { Inject, Service } from 'typedi';
+import { IVendorBalanceSummaryQuery } from '@/interfaces';
+import { TableSheetPdf } from '../TableSheetPdf';
+import { VendorBalanceSummaryTableInjectable } from './VendorBalanceSummaryTableInjectable';
+
+@Service()
+export class VendorBalanceSummaryPdf {
+  @Inject()
+  private vendorBalanceSummaryTable: VendorBalanceSummaryTableInjectable;
+
+  @Inject()
+  private tableSheetPdf: TableSheetPdf;
+
+  /**
+   * Retrieves the sales by items sheet in pdf format.
+   * @param {number} tenantId
+   * @param {number} query
+   * @returns {Promise<IBalanceSheetTable>}
+   */
+  public async pdf(
+    tenantId: number,
+    query: IVendorBalanceSummaryQuery
+  ): Promise<Buffer> {
+    const table = await this.vendorBalanceSummaryTable.table(tenantId, query);
+    const sheetName = 'Sales By Items';
+
+    return this.tableSheetPdf.convertToPdf(
+      tenantId,
+      table.table,
+      sheetName,
+      table.meta.baseCurrency
+    );
+  }
+}

From b11c531cf538201d3938a5d92f9ddc5ccdfac387 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Sun, 11 Feb 2024 01:14:31 +0200
Subject: [PATCH 25/39] feat(server): wip priting financial reports

---
 .../CustomerBalanceSummary/index.ts           | 14 ++++++++
 .../FinancialStatements/GeneralLedger.ts      | 12 +++++++
 .../InventoryDetails/index.ts                 | 10 ++++++
 .../InventoryValuationSheet.ts                | 10 ++++++
 .../FinancialStatements/JournalSheet.ts       |  2 +-
 .../FinancialStatements/PurchasesByItem.ts    | 11 +++++-
 .../SalesTaxLiabilitySummary/index.ts         | 11 ++++++
 .../TransactionsByCustomers/index.ts          |  1 +
 .../TransactionsByVendors/index.ts            | 12 +++++++
 .../GeneralLedger/GeneralLedgerApplication.ts | 17 +++++++++
 .../GeneralLedger/GeneralLedgerPdf.ts         | 34 ++++++++++++++++++
 .../InventoryDetailsApplication.ts            | 14 ++++++++
 .../InventoryDetailsTablePdf.ts               | 36 +++++++++++++++++++
 .../InventoryValuationSheetApplication.ts     | 17 +++++++++
 .../InventoryValuationSheetPdf.ts             | 35 ++++++++++++++++++
 .../PurchasesByItemsApplication.ts            | 17 +++++++++
 .../PurchasesByItems/PurchasesByItemsPdf.ts   | 34 ++++++++++++++++++
 .../SalesTaxLiabilitySummaryApplication.ts    | 17 +++++++++
 .../SalesTaxLiabiltiySummaryPdf.ts            | 35 ++++++++++++++++++
 .../TransactionsByCustomersApplication.ts     | 17 +++++++++
 .../TransactionsByCustomersPdf.ts             | 36 +++++++++++++++++++
 .../TransactionsByVendorApplication.ts        | 14 ++++++++
 .../TransactionsByVendorPdf.ts                | 34 ++++++++++++++++++
 23 files changed, 438 insertions(+), 2 deletions(-)
 create mode 100644 packages/server/src/services/FinancialStatements/GeneralLedger/GeneralLedgerPdf.ts
 create mode 100644 packages/server/src/services/FinancialStatements/InventoryDetails/InventoryDetailsTablePdf.ts
 create mode 100644 packages/server/src/services/FinancialStatements/InventoryValuationSheet/InventoryValuationSheetPdf.ts
 create mode 100644 packages/server/src/services/FinancialStatements/PurchasesByItems/PurchasesByItemsPdf.ts
 create mode 100644 packages/server/src/services/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabiltiySummaryPdf.ts
 create mode 100644 packages/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersPdf.ts
 create mode 100644 packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorPdf.ts

diff --git a/packages/server/src/api/controllers/FinancialStatements/CustomerBalanceSummary/index.ts b/packages/server/src/api/controllers/FinancialStatements/CustomerBalanceSummary/index.ts
index 6c10543f5..e69fcdc1c 100644
--- a/packages/server/src/api/controllers/FinancialStatements/CustomerBalanceSummary/index.ts
+++ b/packages/server/src/api/controllers/FinancialStatements/CustomerBalanceSummary/index.ts
@@ -75,6 +75,7 @@ export default class CustomerBalanceSummaryReportController extends BaseFinancia
         ACCEPT_TYPE.APPLICATION_JSON_TABLE,
         ACCEPT_TYPE.APPLICATION_CSV,
         ACCEPT_TYPE.APPLICATION_XLSX,
+        ACCEPT_TYPE.APPLICATION_PDF,
       ]);
 
       // Retrieves the xlsx format.
@@ -109,6 +110,19 @@ export default class CustomerBalanceSummaryReportController extends BaseFinancia
           filter
         );
         return res.status(200).send(table);
+        // Retrieves the pdf format.
+      } else if (ACCEPT_TYPE.APPLICATION_PDF === acceptType) {
+        const buffer = await this.customerBalanceSummaryApp.pdf(
+          tenantId,
+          filter
+        );
+
+        res.set({
+          'Content-Type': 'application/pdf',
+          'Content-Length': buffer.length,
+        });
+        return res.send(buffer);
+        // Retrieves the json format.
       } else {
         const sheet = await this.customerBalanceSummaryApp.sheet(
           tenantId,
diff --git a/packages/server/src/api/controllers/FinancialStatements/GeneralLedger.ts b/packages/server/src/api/controllers/FinancialStatements/GeneralLedger.ts
index c86da8eae..4c3aec4a9 100644
--- a/packages/server/src/api/controllers/FinancialStatements/GeneralLedger.ts
+++ b/packages/server/src/api/controllers/FinancialStatements/GeneralLedger.ts
@@ -71,6 +71,7 @@ export default class GeneralLedgerReportController extends BaseFinancialReportCo
       ACCEPT_TYPE.APPLICATION_JSON_TABLE,
       ACCEPT_TYPE.APPLICATION_XLSX,
       ACCEPT_TYPE.APPLICATION_CSV,
+      ACCEPT_TYPE.APPLICATION_PDF,
     ]);
     // Retrieves the table format.
     if (ACCEPT_TYPE.APPLICATION_JSON_TABLE === acceptType) {
@@ -95,6 +96,17 @@ export default class GeneralLedgerReportController extends BaseFinancialReportCo
         'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
       );
       return res.send(buffer);
+      // Retrieves the pdf format.
+    } else if (ACCEPT_TYPE.APPLICATION_PDF === acceptType) {
+      const pdfContent = await this.generalLedgerApplication.pdf(
+        tenantId,
+        filter
+      );
+      res.set({
+        'Content-Type': 'application/pdf',
+        'Content-Length': pdfContent.length,
+      });
+      return res.send(pdfContent);
       // Retrieves the json format.
     } else {
       const sheet = await this.generalLedgerApplication.sheet(tenantId, filter);
diff --git a/packages/server/src/api/controllers/FinancialStatements/InventoryDetails/index.ts b/packages/server/src/api/controllers/FinancialStatements/InventoryDetails/index.ts
index 07f91af4a..3288ee847 100644
--- a/packages/server/src/api/controllers/FinancialStatements/InventoryDetails/index.ts
+++ b/packages/server/src/api/controllers/FinancialStatements/InventoryDetails/index.ts
@@ -96,6 +96,7 @@ export default class InventoryDetailsController extends BaseController {
         ACCEPT_TYPE.APPLICATION_JSON_TABLE,
         ACCEPT_TYPE.APPLICATION_CSV,
         ACCEPT_TYPE.APPLICATION_XLSX,
+        ACCEPT_TYPE.APPLICATION_PDF,
       ]);
       // Retrieves the csv format.
       if (acceptType === ACCEPT_TYPE.APPLICATION_CSV) {
@@ -127,6 +128,15 @@ export default class InventoryDetailsController extends BaseController {
           filter
         );
         return res.status(200).send(table);
+        // Retrieves the pdf format.
+      } else if (acceptType === ACCEPT_TYPE.APPLICATION_PDF) {
+        const buffer = await this.inventoryItemDetailsApp.pdf(tenantId, filter);
+
+        res.set({
+          'Content-Type': 'application/pdf',
+          'Content-Length': buffer.length,
+        });
+        return res.send(buffer);
       } else {
         const sheet = await this.inventoryItemDetailsApp.sheet(
           tenantId,
diff --git a/packages/server/src/api/controllers/FinancialStatements/InventoryValuationSheet.ts b/packages/server/src/api/controllers/FinancialStatements/InventoryValuationSheet.ts
index 3a2d3c196..b31a911a2 100644
--- a/packages/server/src/api/controllers/FinancialStatements/InventoryValuationSheet.ts
+++ b/packages/server/src/api/controllers/FinancialStatements/InventoryValuationSheet.ts
@@ -79,6 +79,7 @@ export default class InventoryValuationReportController extends BaseFinancialRep
       ACCEPT_TYPE.APPLICATION_JSON_TABLE,
       ACCEPT_TYPE.APPLICATION_XLSX,
       ACCEPT_TYPE.APPLICATION_CSV,
+      ACCEPT_TYPE.APPLICATION_PDF,
     ]);
 
     // Retrieves the json table format.
@@ -104,6 +105,15 @@ export default class InventoryValuationReportController extends BaseFinancialRep
         'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
       );
       return res.send(buffer);
+      // Retrieves the pdf format.
+    } else if (ACCEPT_TYPE.APPLICATION_PDF === acceptType) {
+      const pdfContent = await this.inventoryValuationApp.pdf(tenantId, filter);
+
+      res.set({
+        'Content-Type': 'application/pdf',
+        'Content-Length': pdfContent.length,
+      });
+      return res.status(200).send(pdfContent);
       // Retrieves the json format.
     } else {
       const { data, query, meta } = await this.inventoryValuationApp.sheet(
diff --git a/packages/server/src/api/controllers/FinancialStatements/JournalSheet.ts b/packages/server/src/api/controllers/FinancialStatements/JournalSheet.ts
index 0355766db..561f69329 100644
--- a/packages/server/src/api/controllers/FinancialStatements/JournalSheet.ts
+++ b/packages/server/src/api/controllers/FinancialStatements/JournalSheet.ts
@@ -82,7 +82,7 @@ export default class JournalSheetController extends BaseFinancialReportControlle
       // Retrieves the csv format.
     } else if (ACCEPT_TYPE.APPLICATION_CSV === acceptType) {
       const buffer = await this.journalSheetApp.csv(tenantId, filter);
-
+  
       res.setHeader('Content-Disposition', 'attachment; filename=output.csv');
       res.setHeader('Content-Type', 'text/csv');
 
diff --git a/packages/server/src/api/controllers/FinancialStatements/PurchasesByItem.ts b/packages/server/src/api/controllers/FinancialStatements/PurchasesByItem.ts
index 2e72587c0..2c92bdc97 100644
--- a/packages/server/src/api/controllers/FinancialStatements/PurchasesByItem.ts
+++ b/packages/server/src/api/controllers/FinancialStatements/PurchasesByItem.ts
@@ -75,8 +75,8 @@ export default class PurchasesByItemReportController extends BaseFinancialReport
       ACCEPT_TYPE.APPLICATION_JSON_TABLE,
       ACCEPT_TYPE.APPLICATION_XLSX,
       ACCEPT_TYPE.APPLICATION_CSV,
+      ACCEPT_TYPE.APPLICATION_PDF,
     ]);
-
     // JSON table response format.
     if (ACCEPT_TYPE.APPLICATION_JSON_TABLE === acceptType) {
       const table = await this.purchasesByItemsApp.table(tenantId, filter);
@@ -100,6 +100,15 @@ export default class PurchasesByItemReportController extends BaseFinancialReport
         'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
       );
       return res.send(buffer);
+      // PDF response format.
+    } else if (ACCEPT_TYPE.APPLICATION_PDF === acceptType) {
+      const pdfContent = await this.purchasesByItemsApp.pdf(tenantId, filter);
+
+      res.set({
+        'Content-Type': 'application/pdf',
+        'Content-Length': pdfContent.length,
+      });
+      return res.send(pdfContent);
       // Json response format.
     } else {
       const sheet = await this.purchasesByItemsApp.sheet(tenantId, filter);
diff --git a/packages/server/src/api/controllers/FinancialStatements/SalesTaxLiabilitySummary/index.ts b/packages/server/src/api/controllers/FinancialStatements/SalesTaxLiabilitySummary/index.ts
index 933b5c9c4..42a96aab2 100644
--- a/packages/server/src/api/controllers/FinancialStatements/SalesTaxLiabilitySummary/index.ts
+++ b/packages/server/src/api/controllers/FinancialStatements/SalesTaxLiabilitySummary/index.ts
@@ -62,6 +62,7 @@ export default class SalesTaxLiabilitySummary extends BaseFinancialReportControl
         ACCEPT_TYPE.APPLICATION_JSON_TABLE,
         ACCEPT_TYPE.APPLICATION_CSV,
         ACCEPT_TYPE.APPLICATION_XLSX,
+        ACCEPT_TYPE.APPLICATION_PDF,
       ]);
 
       // Retrieves the json table format.
@@ -97,6 +98,16 @@ export default class SalesTaxLiabilitySummary extends BaseFinancialReportControl
 
         return res.send(buffer);
         // Retrieves the json format.
+      } else if (acceptType === ACCEPT_TYPE.APPLICATION_PDF) {
+        const pdfContent = await this.salesTaxLiabilitySummaryApp.pdf(
+          tenantId,
+          filter
+        );
+        res.set({
+          'Content-Type': 'application/pdf',
+          'Content-Length': pdfContent.length,
+        });
+        return res.status(200).send(pdfContent);
       } else {
         const sheet = await this.salesTaxLiabilitySummaryApp.sheet(
           tenantId,
diff --git a/packages/server/src/api/controllers/FinancialStatements/TransactionsByCustomers/index.ts b/packages/server/src/api/controllers/FinancialStatements/TransactionsByCustomers/index.ts
index 4bc3b1f44..42a619ec8 100644
--- a/packages/server/src/api/controllers/FinancialStatements/TransactionsByCustomers/index.ts
+++ b/packages/server/src/api/controllers/FinancialStatements/TransactionsByCustomers/index.ts
@@ -70,6 +70,7 @@ export default class TransactionsByCustomersReportController extends BaseFinanci
       ACCEPT_TYPE.APPLICATION_JSON_TABLE,
       ACCEPT_TYPE.APPLICATION_CSV,
       ACCEPT_TYPE.APPLICATION_XLSX,
+      ACCEPT_TYPE.APPLICATION_PDF,
     ]);
     try {
       // Retrieves the json table format.
diff --git a/packages/server/src/api/controllers/FinancialStatements/TransactionsByVendors/index.ts b/packages/server/src/api/controllers/FinancialStatements/TransactionsByVendors/index.ts
index a0c1bf037..c437892f4 100644
--- a/packages/server/src/api/controllers/FinancialStatements/TransactionsByVendors/index.ts
+++ b/packages/server/src/api/controllers/FinancialStatements/TransactionsByVendors/index.ts
@@ -71,6 +71,7 @@ export default class TransactionsByVendorsReportController extends BaseFinancial
         ACCEPT_TYPE.APPLICATION_JSON_TABLE,
         ACCEPT_TYPE.APPLICATION_CSV,
         ACCEPT_TYPE.APPLICATION_XLSX,
+        ACCEPT_TYPE.APPLICATION_PDF,
       ]);
 
       // Retrieves the xlsx format.
@@ -101,6 +102,17 @@ export default class TransactionsByVendorsReportController extends BaseFinancial
           filter
         );
         return res.status(200).send(table);
+        // Retrieves the pdf format.
+      } else if (ACCEPT_TYPE.APPLICATION_PDF === acceptType) {
+        const pdfContent = await this.transactionsByVendorsApp.pdf(
+          tenantId,
+          filter
+        );
+        res.set({
+          'Content-Type': 'application/pdf',
+          'Content-Length': pdfContent.length,
+        });
+        return res.send(pdfContent);
         // Retrieves the json format.
       } else {
         const sheet = await this.transactionsByVendorsApp.sheet(
diff --git a/packages/server/src/services/FinancialStatements/GeneralLedger/GeneralLedgerApplication.ts b/packages/server/src/services/FinancialStatements/GeneralLedger/GeneralLedgerApplication.ts
index 924b0da8c..6257e34d8 100644
--- a/packages/server/src/services/FinancialStatements/GeneralLedger/GeneralLedgerApplication.ts
+++ b/packages/server/src/services/FinancialStatements/GeneralLedger/GeneralLedgerApplication.ts
@@ -6,6 +6,7 @@ import {
 import { GeneralLedgerTableInjectable } from './GeneralLedgerTableInjectable';
 import { GeneralLedgerExportInjectable } from './GeneralLedgerExport';
 import { GeneralLedgerService } from './GeneralLedgerService';
+import { GeneralLedgerPdf } from './GeneralLedgerPdf';
 
 export class GeneralLedgerApplication {
   @Inject()
@@ -17,6 +18,9 @@ export class GeneralLedgerApplication {
   @Inject()
   private GLSheet: GeneralLedgerService;
 
+  @Inject()
+  private GLPdf: GeneralLedgerPdf;
+
   /**
    * Retrieves the G/L sheet in json format.
    * @param {number} tenantId
@@ -63,4 +67,17 @@ export class GeneralLedgerApplication {
   ): Promise<string> {
     return this.GLExport.csv(tenantId, query);
   }
+
+  /**
+   * Retrieves the G/L sheet in pdf format.
+   * @param {number} tenantId
+   * @param {IGeneralLedgerSheetQuery} query
+   * @returns {Promise<Buffer>}
+   */
+  public pdf(
+    tenantId: number,
+    query: IGeneralLedgerSheetQuery
+  ): Promise<Buffer> {
+    return this.GLPdf.pdf(tenantId, query);
+  }
 }
diff --git a/packages/server/src/services/FinancialStatements/GeneralLedger/GeneralLedgerPdf.ts b/packages/server/src/services/FinancialStatements/GeneralLedger/GeneralLedgerPdf.ts
new file mode 100644
index 000000000..d1d12ae43
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/GeneralLedger/GeneralLedgerPdf.ts
@@ -0,0 +1,34 @@
+import { Inject, Service } from "typedi";
+import { TableSheetPdf } from "../TableSheetPdf";
+import { GeneralLedgerTableInjectable } from "./GeneralLedgerTableInjectable";
+import { IGeneralLedgerSheetQuery } from "@/interfaces";
+
+@Service()
+export class GeneralLedgerPdf {
+  @Inject()
+  private generalLedgerTable: GeneralLedgerTableInjectable;
+
+  @Inject()
+  private tableSheetPdf: TableSheetPdf;
+
+  /**
+   * Converts the general ledger sheet table to pdf.
+   * @param {number} tenantId - Tenant ID.
+   * @param {IGeneralLedgerSheetQuery} query - 
+   * @returns {Promise<Buffer>}
+   */
+  public async pdf(
+    tenantId: number,
+    query: IGeneralLedgerSheetQuery
+  ): Promise<Buffer> {
+    const table = await this.generalLedgerTable.table(tenantId, query);
+    const sheetName = 'General Ledger';
+
+    return this.tableSheetPdf.convertToPdf(
+      tenantId,
+      table.table,
+      sheetName,
+      table.meta.baseCurrency
+    );
+  }
+}
\ No newline at end of file
diff --git a/packages/server/src/services/FinancialStatements/InventoryDetails/InventoryDetailsApplication.ts b/packages/server/src/services/FinancialStatements/InventoryDetails/InventoryDetailsApplication.ts
index a2639094e..50cbd2a2f 100644
--- a/packages/server/src/services/FinancialStatements/InventoryDetails/InventoryDetailsApplication.ts
+++ b/packages/server/src/services/FinancialStatements/InventoryDetails/InventoryDetailsApplication.ts
@@ -6,6 +6,7 @@ import { Inject, Service } from 'typedi';
 import { InventoryDetailsExportInjectable } from './InventoryDetailsExportInjectable';
 import { InventoryDetailsTableInjectable } from './InventoryDetailsTableInjectable';
 import { InventoryDetailsService } from './InventoryDetailsService';
+import { InventoryDetailsTablePdf } from './InventoryDetailsTablePdf';
 
 @Service()
 export class InventortyDetailsApplication {
@@ -18,6 +19,9 @@ export class InventortyDetailsApplication {
   @Inject()
   private inventoryDetails: InventoryDetailsService;
 
+  @Inject()
+  private inventoryDetailsPdf: InventoryDetailsTablePdf;
+
   /**
    * Retrieves the inventory details report in sheet format.
    * @param {number} tenantId
@@ -63,4 +67,14 @@ export class InventortyDetailsApplication {
   public csv(tenantId: number, query: IInventoryDetailsQuery): Promise<string> {
     return this.inventoryDetailsExport.csv(tenantId, query);
   }
+
+  /**
+   * Retrieves the inventory details report in PDF format.
+   * @param {number} tenantId
+   * @param {IInventoryDetailsQuery} query
+   * @returns {Promise<Buffer>}
+   */
+  public pdf(tenantId: number, query: IInventoryDetailsQuery) {
+    return this.inventoryDetailsPdf.pdf(tenantId, query);
+  }
 }
diff --git a/packages/server/src/services/FinancialStatements/InventoryDetails/InventoryDetailsTablePdf.ts b/packages/server/src/services/FinancialStatements/InventoryDetails/InventoryDetailsTablePdf.ts
new file mode 100644
index 000000000..1c2077fc6
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/InventoryDetails/InventoryDetailsTablePdf.ts
@@ -0,0 +1,36 @@
+import { Inject, Service } from "typedi";
+import { InventoryDetailsTableInjectable } from "./InventoryDetailsTableInjectable";
+import { TableSheetPdf } from "../TableSheetPdf";
+import { IInventoryDetailsQuery } from "@/interfaces";
+
+
+@Service()
+export class InventoryDetailsTablePdf {
+  @Inject()
+  private inventoryDetailsTable: InventoryDetailsTableInjectable;
+
+  @Inject()
+  private tableSheetPdf: TableSheetPdf;
+
+  /**
+   * Converts the given inventory details sheet table to pdf.
+   * @param {number} tenantId - Tenant ID.
+   * @param {IBalanceSheetQuery} query - Balance sheet query.
+   * @returns {Promise<Buffer>}
+   */
+  public async pdf(
+    tenantId: number,
+    query: IInventoryDetailsQuery
+  ): Promise<Buffer> {
+    const table = await this.inventoryDetailsTable.table(tenantId, query);
+    const sheetName = 'Inventory Items Details';
+
+    return this.tableSheetPdf.convertToPdf(
+      tenantId,
+      table.table,
+      sheetName,
+      table.meta.baseCurrency
+    );
+  }
+
+}
\ No newline at end of file
diff --git a/packages/server/src/services/FinancialStatements/InventoryValuationSheet/InventoryValuationSheetApplication.ts b/packages/server/src/services/FinancialStatements/InventoryValuationSheet/InventoryValuationSheetApplication.ts
index 43406b0d8..7c4a65967 100644
--- a/packages/server/src/services/FinancialStatements/InventoryValuationSheet/InventoryValuationSheetApplication.ts
+++ b/packages/server/src/services/FinancialStatements/InventoryValuationSheet/InventoryValuationSheetApplication.ts
@@ -7,6 +7,7 @@ import { Inject, Service } from 'typedi';
 import { InventoryValuationSheetService } from './InventoryValuationSheetService';
 import { InventoryValuationSheetTableInjectable } from './InventoryValuationSheetTableInjectable';
 import { InventoryValuationSheetExportable } from './InventoryValuationSheetExportable';
+import { InventoryValuationSheetPdf } from './InventoryValuationSheetPdf';
 
 @Service()
 export class InventoryValuationSheetApplication {
@@ -19,6 +20,9 @@ export class InventoryValuationSheetApplication {
   @Inject()
   private inventoryValuationExport: InventoryValuationSheetExportable;
 
+  @Inject()
+  private inventoryValuationPdf: InventoryValuationSheetPdf;
+
   /**
    * Retrieves the inventory valuation json format.
    * @param {number} tenantId
@@ -73,4 +77,17 @@ export class InventoryValuationSheetApplication {
   ): Promise<string> {
     return this.inventoryValuationExport.csv(tenantId, query);
   }
+
+  /**
+   * Retrieves the inventory valuation pdf format.
+   * @param {number} tenantId
+   * @param {IInventoryValuationReportQuery} query
+   * @returns {Promise<Buffer>}
+   */
+  public pdf(
+    tenantId: number,
+    query: IInventoryValuationReportQuery
+  ): Promise<Buffer> {
+    return this.inventoryValuationPdf.pdf(tenantId, query);
+  }
 }
diff --git a/packages/server/src/services/FinancialStatements/InventoryValuationSheet/InventoryValuationSheetPdf.ts b/packages/server/src/services/FinancialStatements/InventoryValuationSheet/InventoryValuationSheetPdf.ts
new file mode 100644
index 000000000..6148816d8
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/InventoryValuationSheet/InventoryValuationSheetPdf.ts
@@ -0,0 +1,35 @@
+import { Inject, Service } from "typedi";
+import { InventoryValuationSheetTableInjectable } from "./InventoryValuationSheetTableInjectable";
+import { TableSheetPdf } from "../TableSheetPdf";
+import { IInventoryValuationReportQuery } from "@/interfaces";
+
+
+@Service()
+export class InventoryValuationSheetPdf {
+  @Inject()
+  private inventoryValuationTable: InventoryValuationSheetTableInjectable;
+
+  @Inject()
+  private tableSheetPdf: TableSheetPdf;
+
+  /**
+   * Converts the given balance sheet table to pdf.
+   * @param {number} tenantId - Tenant ID.
+   * @param {IBalanceSheetQuery} query - Balance sheet query.
+   * @returns {Promise<Buffer>}
+   */
+  public async pdf(
+    tenantId: number,
+    query: IInventoryValuationReportQuery
+  ): Promise<Buffer> {
+    const table = await this.inventoryValuationTable.table(tenantId, query);
+    const sheetName = 'Inventory Valuation Sheet';
+
+    return this.tableSheetPdf.convertToPdf(
+      tenantId,
+      table.table,
+      sheetName,
+      table.meta.baseCurrency
+    );
+  } 
+}
\ No newline at end of file
diff --git a/packages/server/src/services/FinancialStatements/PurchasesByItems/PurchasesByItemsApplication.ts b/packages/server/src/services/FinancialStatements/PurchasesByItems/PurchasesByItemsApplication.ts
index c9a94bdbc..eeecaff38 100644
--- a/packages/server/src/services/FinancialStatements/PurchasesByItems/PurchasesByItemsApplication.ts
+++ b/packages/server/src/services/FinancialStatements/PurchasesByItems/PurchasesByItemsApplication.ts
@@ -7,6 +7,7 @@ import {
 } from '@/interfaces/PurchasesByItemsSheet';
 import { PurchasesByItemsTableInjectable } from './PurchasesByItemsTableInjectable';
 import { PurchasesByItemsService } from './PurchasesByItemsService';
+import { PurchasesByItemsPdf } from './PurchasesByItemsPdf';
 
 @Service()
 export class PurcahsesByItemsApplication {
@@ -19,6 +20,9 @@ export class PurcahsesByItemsApplication {
   @Inject()
   private purchasesByItemsExport: PurchasesByItemsExport;
 
+  @Inject()
+  private purchasesByItemsPdf: PurchasesByItemsPdf;
+
   /**
    * Retrieves the purchases by items in json format.
    * @param {number} tenantId
@@ -70,4 +74,17 @@ export class PurcahsesByItemsApplication {
   ): Promise<Buffer> {
     return this.purchasesByItemsExport.xlsx(tenantId, query);
   }
+
+  /**
+   * Retrieves the purchases by items in pdf format.
+   * @param {number} tenantId
+   * @param {IPurchasesByItemsReportQuery} filter
+   * @returns {Promise<Buffer>}
+   */
+  public pdf(
+    tenantId: number,
+    filter: IPurchasesByItemsReportQuery
+  ): Promise<Buffer> {
+    return this.purchasesByItemsPdf.pdf(tenantId, filter);
+  }
 }
diff --git a/packages/server/src/services/FinancialStatements/PurchasesByItems/PurchasesByItemsPdf.ts b/packages/server/src/services/FinancialStatements/PurchasesByItems/PurchasesByItemsPdf.ts
new file mode 100644
index 000000000..36645aeb3
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/PurchasesByItems/PurchasesByItemsPdf.ts
@@ -0,0 +1,34 @@
+import { Inject, Service } from 'typedi';
+import { TableSheetPdf } from '../TableSheetPdf';
+import { PurchasesByItemsTableInjectable } from './PurchasesByItemsTableInjectable';
+import { IPurchasesByItemsReportQuery } from '@/interfaces/PurchasesByItemsSheet';
+
+@Service()
+export class PurchasesByItemsPdf {
+  @Inject()
+  private purchasesByItemsTable: PurchasesByItemsTableInjectable;
+
+  @Inject()
+  private tableSheetPdf: TableSheetPdf;
+
+  /**
+   * Converts the given journal sheet table to pdf.
+   * @param {number} tenantId - Tenant ID.
+   * @param {IBalanceSheetQuery} query - Balance sheet query.
+   * @returns {Promise<Buffer>}
+   */
+  public async pdf(
+    tenantId: number,
+    query: IPurchasesByItemsReportQuery
+  ): Promise<Buffer> {
+    const table = await this.purchasesByItemsTable.table(tenantId, query);
+    const sheetName = 'Purchases By Items';
+
+    return this.tableSheetPdf.convertToPdf(
+      tenantId,
+      table.table,
+      sheetName,
+      table.meta.baseCurrency
+    );
+  }
+}
diff --git a/packages/server/src/services/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryApplication.ts b/packages/server/src/services/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryApplication.ts
index f0e5a5248..3b9f0d7b3 100644
--- a/packages/server/src/services/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryApplication.ts
+++ b/packages/server/src/services/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryApplication.ts
@@ -3,6 +3,7 @@ import { SalesTaxLiabilitySummaryQuery } from '@/interfaces/SalesTaxLiabilitySum
 import { SalesTaxLiabilitySummaryTableInjectable } from './SalesTaxLiabilitySummaryTableInjectable';
 import { SalesTaxLiabilitySummaryExportInjectable } from './SalesTaxLiabilitySummaryExportInjectable';
 import { SalesTaxLiabilitySummaryService } from './SalesTaxLiabilitySummaryService';
+import { SalesTaxLiabiltiySummaryPdf } from './SalesTaxLiabiltiySummaryPdf';
 
 @Service()
 export class SalesTaxLiabilitySummaryApplication {
@@ -15,6 +16,9 @@ export class SalesTaxLiabilitySummaryApplication {
   @Inject()
   private salesTaxLiabilityTable: SalesTaxLiabilitySummaryTableInjectable;
 
+  @Inject()
+  private salesTaxLiabiltiyPdf: SalesTaxLiabiltiySummaryPdf;
+
   /**
    * Retrieves the sales tax liability summary in json format.
    * @param {number} tenantId
@@ -60,4 +64,17 @@ export class SalesTaxLiabilitySummaryApplication {
   ): Promise<string> {
     return this.salesTaxLiabilityExport.csv(tenantId, query);
   }
+
+  /**
+   * Retrieves the sales tax liability summary in PDF format.
+   * @param {number} tenantId 
+   * @param {SalesTaxLiabilitySummaryQuery} query 
+   * @returns {Promise<Buffer>}
+   */
+  public pdf(
+    tenantId: number,
+    query: SalesTaxLiabilitySummaryQuery
+  ): Promise<Buffer> {
+    return this.salesTaxLiabiltiyPdf.pdf(tenantId, query):
+  }
 }
diff --git a/packages/server/src/services/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabiltiySummaryPdf.ts b/packages/server/src/services/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabiltiySummaryPdf.ts
new file mode 100644
index 000000000..1b9a509a0
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabiltiySummaryPdf.ts
@@ -0,0 +1,35 @@
+import { Inject, Service } from 'typedi';
+import { TableSheetPdf } from '../TableSheetPdf';
+import { SalesTaxLiabilitySummaryTableInjectable } from './SalesTaxLiabilitySummaryTableInjectable';
+import { ISalesByItemsReportQuery } from '@/interfaces';
+import { SalesTaxLiabilitySummaryQuery } from '@/interfaces/SalesTaxLiabilitySummary';
+
+@Service()
+export class SalesTaxLiabiltiySummaryPdf {
+  @Inject()
+  private salesTaxLiabiltiySummaryTable: SalesTaxLiabilitySummaryTableInjectable;
+
+  @Inject()
+  private tableSheetPdf: TableSheetPdf;
+
+  /**
+   * Converts the given sales tax liability summary table to pdf.
+   * @param {number} tenantId - Tenant ID.
+   * @param {ISalesByItemsReportQuery} query - Balance sheet query.
+   * @returns {Promise<Buffer>}
+   */
+  public async pdf(
+    tenantId: number,
+    query: SalesTaxLiabilitySummaryQuery
+  ): Promise<Buffer> {
+    const table = await this.salesTaxLiabiltiySummaryTable.table(tenantId, query);
+    const sheetName = 'Sales Tax Liability Summary';
+
+    return this.tableSheetPdf.convertToPdf(
+      tenantId,
+      table.table,
+      sheetName,
+      table.meta.baseCurrency
+    );
+  }
+}
diff --git a/packages/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersApplication.ts b/packages/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersApplication.ts
index b729c219a..c3e4feb7e 100644
--- a/packages/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersApplication.ts
+++ b/packages/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersApplication.ts
@@ -6,6 +6,7 @@ import {
 import { TransactionsByCustomersTableInjectable } from './TransactionsByCustomersTableInjectable';
 import { TransactionsByCustomersExportInjectable } from './TransactionsByCustomersExportInjectable';
 import { TransactionsByCustomersSheet } from './TransactionsByCustomersService';
+import { TransactionsByCustomersPdf } from './TransactionsByCustomersPdf';
 
 @Service()
 export class TransactionsByCustomerApplication {
@@ -18,6 +19,9 @@ export class TransactionsByCustomerApplication {
   @Inject()
   private transactionsByCustomersSheet: TransactionsByCustomersSheet;
 
+  @Inject()
+  private transactionsByCustomersPdf: TransactionsByCustomersPdf;
+
   /**
    * Retrieves the transactions by customers sheet in json format.
    * @param {number} tenantId
@@ -69,4 +73,17 @@ export class TransactionsByCustomerApplication {
   ): Promise<Buffer> {
     return this.transactionsByCustomersExport.xlsx(tenantId, query);
   }
+
+  /**
+   * Retrieves the transactions by vendors sheet in PDF format.
+   * @param {number} tenantId
+   * @param {ITransactionsByCustomersFilter} query
+   * @returns {Promise<Buffer>}
+   */
+  public pdf(
+    tenantId: number,
+    query: ITransactionsByCustomersFilter
+  ): Promise<Buffer> {
+    return this.transactionsByCustomersPdf.pdf(tenantId, query);
+  }
 }
diff --git a/packages/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersPdf.ts b/packages/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersPdf.ts
new file mode 100644
index 000000000..2926e63e6
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersPdf.ts
@@ -0,0 +1,36 @@
+import { ITransactionsByCustomersFilter } from '@/interfaces';
+import { Inject } from 'typedi';
+import { TableSheetPdf } from '../TableSheetPdf';
+import { TransactionsByCustomersTableInjectable } from './TransactionsByCustomersTableInjectable';
+
+export class TransactionsByCustomersPdf {
+  @Inject()
+  private transactionsByCustomersTable: TransactionsByCustomersTableInjectable;
+
+  @Inject()
+  private tableSheetPdf: TableSheetPdf;
+
+  /**
+   * Retrieves the transactions by customers in PDF format.
+   * @param {number} tenantId - Tenant ID.
+   * @param {IBalanceSheetQuery} query - Balance sheet query.
+   * @returns {Promise<Buffer>}
+   */
+  public async pdf(
+    tenantId: number,
+    query: ITransactionsByCustomersFilter
+  ): Promise<Buffer> {
+    const table = await this.transactionsByCustomersTable.table(
+      tenantId,
+      query
+    );
+    const sheetName = 'Transactions By Customers';
+
+    return this.tableSheetPdf.convertToPdf(
+      tenantId,
+      table.table,
+      sheetName,
+      table.meta.baseCurrency
+    );
+  }
+}
diff --git a/packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorApplication.ts b/packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorApplication.ts
index d8d424a30..744993bb0 100644
--- a/packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorApplication.ts
+++ b/packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorApplication.ts
@@ -7,6 +7,7 @@ import {
 import { TransactionsByVendorExportInjectable } from './TransactionsByVendorExportInjectable';
 import { TransactionsByVendorTableInjectable } from './TransactionsByVendorTableInjectable';
 import { TransactionsByVendorsInjectable } from './TransactionsByVendorInjectable';
+import { TransactionsByVendorsPdf } from './TransactionsByVendorPdf';
 
 @Service()
 export class TransactionsByVendorApplication {
@@ -19,6 +20,9 @@ export class TransactionsByVendorApplication {
   @Inject()
   private transactionsByVendorSheet: TransactionsByVendorsInjectable;
 
+  @Inject()
+  private transactionsByVendorPdf: TransactionsByVendorsPdf;
+
   /**
    * Retrieves the transactions by vendor in sheet format.
    * @param {number} tenantId
@@ -72,4 +76,14 @@ export class TransactionsByVendorApplication {
   ): Promise<Buffer> {
     return this.transactionsByVendorExport.xlsx(tenantId, query);
   }
+
+  /**
+   * Retrieves the transactions by vendor in PDF format.
+   * @param {number} tenantId
+   * @param {ITransactionsByVendorsFilter} query
+   * @returns {Promise<Buffer>}
+   */
+  public pdf(tenantId: number, query: ITransactionsByVendorsFilter) {
+    return this.transactionsByVendorPdf.pdf(tenantId, query);
+  }
 }
diff --git a/packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorPdf.ts b/packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorPdf.ts
new file mode 100644
index 000000000..6c8b7f68a
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorPdf.ts
@@ -0,0 +1,34 @@
+import { Inject, Service } from 'typedi';
+import { ITransactionsByVendorsFilter } from '@/interfaces';
+import { TableSheetPdf } from '../TableSheetPdf';
+import { TransactionsByVendorTableInjectable } from './TransactionsByVendorTableInjectable';
+
+@Service()
+export class TransactionsByVendorsPdf {
+  @Inject()
+  private transactionsByVendorTable: TransactionsByVendorTableInjectable;
+
+  @Inject()
+  private tableSheetPdf: TableSheetPdf;
+
+  /**
+   * Converts the given balance sheet table to pdf.
+   * @param {number} tenantId - Tenant ID.
+   * @param {IBalanceSheetQuery} query - Balance sheet query.
+   * @returns {Promise<Buffer>}
+   */
+  public async pdf(
+    tenantId: number,
+    query: ITransactionsByVendorsFilter
+  ): Promise<Buffer> {
+    const table = await this.transactionsByVendorTable.table(tenantId, query);
+    const sheetName = 'Transactions By Vendors';
+
+    return this.tableSheetPdf.convertToPdf(
+      tenantId,
+      table.table,
+      sheetName,
+      table.meta.baseCurrency
+    );
+  }
+}

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 26/39] 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.
  */

From eb4491f44a9a1f3026511cffeffb4f7886a3c708 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Mon, 12 Feb 2024 19:01:55 +0200
Subject: [PATCH 27/39] feat(webapp): refactor http api hooks to seperate files

---
 .../src/hooks/query/FinancialReports/index.ts |   18 +
 .../FinancialReports/use-AP-aging-summary.ts  |   61 +
 .../FinancialReports/use-AR-aging-summary.ts  |   60 +
 .../FinancialReports/use-balance-sheet.ts     |   61 +
 .../FinancialReports/use-cashflow-sheet.ts    |   80 ++
 .../use-customer-balance-summary.ts           |   68 ++
 .../use-customer-transactions.ts              |   69 ++
 .../FinancialReports/use-general-ledger.ts    |   60 +
 .../use-inventory-item-details.ts             |   72 ++
 .../use-inventory-valuation.ts                |   80 ++
 .../FinancialReports/use-journal-sheet.ts     |   61 +
 .../FinancialReports/use-profit-loss-sheet.ts |   61 +
 .../use-purchases-by-items.ts                 |   77 ++
 .../FinancialReports/use-sales-by-items.ts    |   75 ++
 .../use-sales-tax-liabilities-summary.ts      |   61 +
 .../use-transactions-by-reference.ts          |   23 +
 .../use-trial-balance-sheet.ts                |   61 +
 .../use-vendor-balance-summary.ts             |   68 ++
 .../use-vendor-transactions.ts                |   71 ++
 .../src/hooks/query/financialReports.tsx      | 1008 -----------------
 packages/webapp/src/hooks/query/index.tsx     |    2 +-
 21 files changed, 1188 insertions(+), 1009 deletions(-)
 create mode 100644 packages/webapp/src/hooks/query/FinancialReports/index.ts
 create mode 100644 packages/webapp/src/hooks/query/FinancialReports/use-AP-aging-summary.ts
 create mode 100644 packages/webapp/src/hooks/query/FinancialReports/use-AR-aging-summary.ts
 create mode 100644 packages/webapp/src/hooks/query/FinancialReports/use-balance-sheet.ts
 create mode 100644 packages/webapp/src/hooks/query/FinancialReports/use-cashflow-sheet.ts
 create mode 100644 packages/webapp/src/hooks/query/FinancialReports/use-customer-balance-summary.ts
 create mode 100644 packages/webapp/src/hooks/query/FinancialReports/use-customer-transactions.ts
 create mode 100644 packages/webapp/src/hooks/query/FinancialReports/use-general-ledger.ts
 create mode 100644 packages/webapp/src/hooks/query/FinancialReports/use-inventory-item-details.ts
 create mode 100644 packages/webapp/src/hooks/query/FinancialReports/use-inventory-valuation.ts
 create mode 100644 packages/webapp/src/hooks/query/FinancialReports/use-journal-sheet.ts
 create mode 100644 packages/webapp/src/hooks/query/FinancialReports/use-profit-loss-sheet.ts
 create mode 100644 packages/webapp/src/hooks/query/FinancialReports/use-purchases-by-items.ts
 create mode 100644 packages/webapp/src/hooks/query/FinancialReports/use-sales-by-items.ts
 create mode 100644 packages/webapp/src/hooks/query/FinancialReports/use-sales-tax-liabilities-summary.ts
 create mode 100644 packages/webapp/src/hooks/query/FinancialReports/use-transactions-by-reference.ts
 create mode 100644 packages/webapp/src/hooks/query/FinancialReports/use-trial-balance-sheet.ts
 create mode 100644 packages/webapp/src/hooks/query/FinancialReports/use-vendor-balance-summary.ts
 create mode 100644 packages/webapp/src/hooks/query/FinancialReports/use-vendor-transactions.ts
 delete mode 100644 packages/webapp/src/hooks/query/financialReports.tsx

diff --git a/packages/webapp/src/hooks/query/FinancialReports/index.ts b/packages/webapp/src/hooks/query/FinancialReports/index.ts
new file mode 100644
index 000000000..74097ca99
--- /dev/null
+++ b/packages/webapp/src/hooks/query/FinancialReports/index.ts
@@ -0,0 +1,18 @@
+export * from './use-balance-sheet';
+export * from './use-trial-balance-sheet';
+export * from './use-cashflow-sheet';
+export * from './use-profit-loss-sheet';
+export * from './use-general-ledger';
+export * from './use-journal-sheet';
+export * from './use-AP-aging-summary';
+export * from './use-AR-aging-summary';
+export * from './use-inventory-valuation';
+export * from './use-inventory-item-details';
+export * from './use-purchases-by-items';
+export * from './use-sales-by-items';
+export * from './use-customer-balance-summary';
+export * from './use-vendor-balance-summary';
+export * from './use-customer-transactions';
+export * from './use-vendor-transactions';
+export * from './use-sales-tax-liabilities-summary';
+export * from './use-transactions-by-reference';
\ No newline at end of file
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-AP-aging-summary.ts b/packages/webapp/src/hooks/query/FinancialReports/use-AP-aging-summary.ts
new file mode 100644
index 000000000..734b401ac
--- /dev/null
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-AP-aging-summary.ts
@@ -0,0 +1,61 @@
+// @ts-nocheck
+import { useRequestQuery } from '../../useQueryRequest';
+import { useDownloadFile } from '../../useDownloadFile';
+import { useRequestPdf } from '../../useRequestPdf';
+import t from '../types';
+
+/**
+ * Retrieve A/P aging summary report.
+ */
+export function useAPAgingSummaryReport(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.AP_AGING_SUMMARY, query],
+    {
+      method: 'get',
+      url: '/financial_statements/payable_aging_summary',
+      params: query,
+      headers: {
+        Accept: 'application/json+table',
+      },
+    },
+    {
+      select: (res) => res.data,
+      ...props,
+    },
+  );
+}
+
+export const useAPAgingSheetXlsxExport = (query, args) => {
+  return useDownloadFile({
+    url: '/financial_statements/payable_aging_summary',
+    config: {
+      headers: {
+        accept: 'application/xlsx',
+      },
+      params: query,
+    },
+    filename: 'payable_aging_summary.xlsx',
+    ...args,
+  });
+};
+
+export const useAPAgingSheetCsvExport = (query, args) => {
+  return useDownloadFile({
+    url: '/financial_statements/payable_aging_summary',
+    config: {
+      headers: {
+        accept: 'application/csv',
+      },
+      params: query,
+    },
+    filename: 'payable_aging_summary.csv',
+    ...args,
+  });
+};
+
+/**
+ * Retrieves the balance sheet pdf document data.
+ */
+export function useAPAgingSummaryPdf() {
+  return useRequestPdf(`financial_statements/payable_aging_summary`);
+}
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-AR-aging-summary.ts b/packages/webapp/src/hooks/query/FinancialReports/use-AR-aging-summary.ts
new file mode 100644
index 000000000..9059ca55b
--- /dev/null
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-AR-aging-summary.ts
@@ -0,0 +1,60 @@
+// @ts-nocheck
+import { useRequestQuery } from '../../useQueryRequest';
+import { useDownloadFile } from '../../useDownloadFile';
+import { useRequestPdf } from '../../useRequestPdf';
+import t from '../types';
+/**
+ * Retrieve A/R aging summary report.
+ */
+export function useARAgingSummaryReport(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.AR_AGING_SUMMARY, query],
+    {
+      method: 'get',
+      url: '/financial_statements/receivable_aging_summary',
+      params: query,
+      headers: {
+        Accept: 'application/json+table',
+      },
+    },
+    {
+      select: (res) => res.data,
+      ...props,
+    },
+  );
+}
+
+export const useARAgingSheetXlsxExport = (query, args) => {
+  return useDownloadFile({
+    url: '/financial_statements/receivable_aging_summary',
+    config: {
+      headers: {
+        accept: 'application/xlsx',
+      },
+      params: query,
+    },
+    filename: 'receivable_aging_summary.xlsx',
+    ...args,
+  });
+};
+
+export const useARAgingSheetCsvExport = (query, args) => {
+  return useDownloadFile({
+    url: '/financial_statements/receivable_aging_summary',
+    config: {
+      headers: {
+        accept: 'application/csv',
+      },
+      params: query,
+    },
+    filename: 'receivable_aging_summary.csv',
+    ...args,
+  });
+};
+
+/**
+ * Retrieves the A/R aging summary pdf document data.
+ */
+export function useARAgingSummaryPdf() {
+  return useRequestPdf(`financial_statements/receivable_aging_summary`);
+}
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-balance-sheet.ts b/packages/webapp/src/hooks/query/FinancialReports/use-balance-sheet.ts
new file mode 100644
index 000000000..99abf33ef
--- /dev/null
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-balance-sheet.ts
@@ -0,0 +1,61 @@
+// @ts-nocheck
+import { useRequestQuery } from '../../useQueryRequest';
+import { useDownloadFile } from '../../useDownloadFile';
+import { useRequestPdf } from '../../useRequestPdf';
+import t from '../types';
+
+/**
+ * Retrieve balance sheet.
+ */
+export function useBalanceSheet(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.BALANCE_SHEET, query],
+    {
+      method: 'get',
+      url: '/financial_statements/balance_sheet',
+      params: query,
+      headers: {
+        Accept: 'application/json+table',
+      },
+    },
+    {
+      select: (res) => res.data,
+      ...props,
+    },
+  );
+}
+
+export const useBalanceSheetXlsxExport = (query, args) => {
+  return useDownloadFile({
+    url: '/financial_statements/balance_sheet',
+    config: {
+      headers: {
+        accept: 'application/xlsx',
+      },
+      params: query,
+    },
+    filename: 'balance_sheet.xlsx',
+    ...args,
+  });
+};
+
+export const useBalanceSheetCsvExport = (query, args) => {
+  return useDownloadFile({
+    url: '/financial_statements/balance_sheet',
+    config: {
+      headers: {
+        accept: 'application/csv',
+      },
+      params: query,
+    },
+    filename: 'balance_sheet.csv',
+    ...args,
+  });
+};
+
+/**
+ * Retrieves the balance sheet pdf document data.
+ */
+export function useBalanceSheetPdf() {
+  return useRequestPdf(`financial_statements/balance_sheet`);
+}
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-cashflow-sheet.ts b/packages/webapp/src/hooks/query/FinancialReports/use-cashflow-sheet.ts
new file mode 100644
index 000000000..6abf1888d
--- /dev/null
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-cashflow-sheet.ts
@@ -0,0 +1,80 @@
+// @ts-nocheck
+import { useRequestQuery } from '../../useQueryRequest';
+import { useDownloadFile } from '../../useDownloadFile';
+import { useRequestPdf } from '../../useRequestPdf';
+import t from '../types';
+
+/**
+ * Retrieve cash flow statement report.
+ */
+export function useCashFlowStatementReport(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.CASH_FLOW_STATEMENT, query],
+    {
+      method: 'get',
+      url: '/financial_statements/cash-flow',
+      params: query,
+      headers: {
+        Accept: 'application/json+table',
+      },
+    },
+    {
+      select: (res) => ({
+        columns: res.data.table.columns,
+        query: res.data.query,
+        meta: res.data.meta,
+        tableRows: res.data.table.rows,
+      }),
+      defaultData: {
+        tableRows: [],
+        columns: [],
+        query: {},
+        meta: {},
+      },
+      ...props,
+    },
+  );
+}
+
+export const useCashFlowStatementXlsxExport = (query, args) => {
+  const url = '/financial_statements/cash-flow';
+  const config = {
+    headers: {
+      accept: 'application/xlsx',
+    },
+    params: query,
+  };
+  const filename = 'cashflow_statement.xlsx';
+
+  return useDownloadFile({
+    url,
+    config,
+    filename,
+    ...args,
+  });
+};
+
+export const useCashFlowStatementCsvExport = (query, args) => {
+  const url = '/financial_statements/cash-flow';
+  const config = {
+    headers: {
+      accept: 'application/csv',
+    },
+    params: query,
+  };
+  const filename = 'cashflow_statement.csv';
+
+  return useDownloadFile({
+    url,
+    config,
+    filename,
+    ...args,
+  });
+};
+
+/**
+ * Retrieves the cashflow sheet pdf document data.
+ */
+export function useCashflowSheetPdf() {
+  return useRequestPdf(`financial_statements/cash-flow`);
+}
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-customer-balance-summary.ts b/packages/webapp/src/hooks/query/FinancialReports/use-customer-balance-summary.ts
new file mode 100644
index 000000000..95cf5de04
--- /dev/null
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-customer-balance-summary.ts
@@ -0,0 +1,68 @@
+// @ts-nocheck
+import { useRequestQuery } from '../../useQueryRequest';
+import { useDownloadFile } from '../../useDownloadFile';
+import { useRequestPdf } from '../../useRequestPdf';
+import t from '../types';
+
+/**
+ * Retrieve customers balance summary report.
+ */
+export function useCustomerBalanceSummaryReport(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.CUSTOMERS_BALANCE_SUMMARY, query],
+    {
+      method: 'get',
+      url: '/financial_statements/customer-balance-summary',
+      params: query,
+      headers: {
+        Accept: 'application/json+table',
+      },
+    },
+    {
+      select: (res) => ({
+        query: res.data.query,
+        table: res.data.table,
+      }),
+      defaultData: {
+        table: {},
+        query: {},
+      },
+      ...props,
+    },
+  );
+}
+
+export const useCustomerBalanceSummaryXlsxExport = (query, args) => {
+  return useDownloadFile({
+    url: '/financial_statements/customer-balance-summary',
+    config: {
+      headers: {
+        accept: 'application/xlsx',
+      },
+      params: query,
+    },
+    filename: 'customer_balance_summary.xlsx',
+    ...args,
+  });
+};
+
+export const useCustomerBalanceSummaryCsvExport = (query, args) => {
+  return useDownloadFile({
+    url: '/financial_statements/customer-balance-summary',
+    config: {
+      headers: {
+        accept: 'application/csv',
+      },
+      params: query,
+    },
+    filename: 'customer_balance_summary.csv',
+    ...args,
+  });
+};
+
+/**
+ * Retrieves the balance sheet pdf document data.
+ */
+export function useCustomerBalanceSummaryPdf() {
+  return useRequestPdf(`financial_statements/customer-balance-summary`);
+}
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-customer-transactions.ts b/packages/webapp/src/hooks/query/FinancialReports/use-customer-transactions.ts
new file mode 100644
index 000000000..08acc7e0e
--- /dev/null
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-customer-transactions.ts
@@ -0,0 +1,69 @@
+// @ts-nocheck
+import { useRequestQuery } from '../../useQueryRequest';
+import { useDownloadFile } from '../../useDownloadFile';
+import { useRequestPdf } from '../../useRequestPdf';
+import t from '../types';
+
+/**
+ * Retrieve customers transactions report.
+ */
+export function useCustomersTransactionsReport(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.CUSTOMERS_TRANSACTIONS, query],
+    {
+      method: 'get',
+      url: '/financial_statements/transactions-by-customers',
+      params: query,
+      headers: {
+        Accept: 'application/json+table',
+      },
+    },
+    {
+      select: (res) => ({
+        data: res.data.table,
+        tableRows: res.data.table.rows,
+      }),
+      defaultData: {
+        tableRows: [],
+        data: [],
+      },
+      ...props,
+    },
+  );
+}
+
+export const useCustomersTransactionsXlsxExport = (query, args) => {
+  const url = '/financial_statements/transactions-by-customers';
+  const config = {
+    headers: {
+      accept: 'application/xlsx',
+    },
+    params: query,
+  };
+  const filename = 'customers_transactions.xlsx';
+
+  return useDownloadFile({
+    url,
+    config,
+    filename,
+    ...args,
+  });
+};
+
+export const useCustomersTransactionsCsvExport = (query, args) => {
+  return useDownloadFile({
+    url: '/financial_statements/transactions-by-customers',
+    config: {
+      headers: {
+        accept: 'application/csv',
+      },
+      params: query,
+    },
+    filename: 'customers_transactions.csv',
+    ...args,
+  });
+};
+
+export const useCustomersTransactionsPdfExport = () => {
+  return useRequestPdf('/financial_statements/transactions-by-customers');
+};
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-general-ledger.ts b/packages/webapp/src/hooks/query/FinancialReports/use-general-ledger.ts
new file mode 100644
index 000000000..bf684a365
--- /dev/null
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-general-ledger.ts
@@ -0,0 +1,60 @@
+// @ts-nocheck
+import { useRequestQuery } from '../../useQueryRequest';
+import { useDownloadFile } from '../../useDownloadFile';
+import { useRequestPdf } from '../../useRequestPdf';
+import t from '../types';
+
+/**
+ * Retrieve general ledger (GL) sheet.
+ */
+export function useGeneralLedgerSheet(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.GENERAL_LEDGER, query],
+    {
+      method: 'get',
+      url: '/financial_statements/general_ledger',
+      params: query,
+      headers: {
+        Accept: 'application/json+table',
+      },
+    },
+    {
+      select: (res) => res.data,
+      ...props,
+    },
+  );
+}
+export const useGeneralLedgerSheetXlsxExport = (query, args) => {
+  return useDownloadFile({
+    url: '/financial_statements/general_ledger',
+    config: {
+      headers: {
+        accept: 'application/xlsx',
+      },
+      params: query,
+    },
+    filename: 'general_ledger.xlsx',
+    ...args,
+  });
+};
+
+export const useGeneralLedgerSheetCsvExport = (query, args) => {
+  return useDownloadFile({
+    url: '/financial_statements/general_ledger',
+    config: {
+      headers: {
+        accept: 'application/csv',
+      },
+      params: query,
+    },
+    filename: 'general_ledger.csv',
+    ...args,
+  });
+};
+
+/**
+ * Retrieves the general ledger pdf document data.
+ */
+export function useGeneralLedgerPdf() {
+  return useRequestPdf(`financial_statements/general_ledger`);
+}
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-inventory-item-details.ts b/packages/webapp/src/hooks/query/FinancialReports/use-inventory-item-details.ts
new file mode 100644
index 000000000..c81e3a3d5
--- /dev/null
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-inventory-item-details.ts
@@ -0,0 +1,72 @@
+// @ts-nocheck
+import { useRequestQuery } from '../../useQueryRequest';
+import { useDownloadFile } from '../../useDownloadFile';
+import { useRequestPdf } from '../../useRequestPdf';
+import t from '../types';
+
+/**
+ * Retrieve inventory item detail report.
+ */
+export function useInventoryItemDetailsReport(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.INVENTORY_ITEM_DETAILS, query],
+    {
+      method: 'get',
+      url: '/financial_statements/inventory-item-details',
+      params: query,
+      headers: {
+        Accept: 'application/json+table',
+      },
+    },
+    {
+      select: (res) => ({
+        columns: res.data.table.columns,
+        query: res.data.query,
+        meta: res.data.meta,
+        tableRows: res.data.table.rows,
+      }),
+      defaultData: {
+        tableRows: [],
+        columns: [],
+        query: {},
+        meta: {},
+      },
+      ...props,
+    },
+  );
+}
+
+export const useInventoryItemDetailsXlsxExport = (query, args) => {
+  return useDownloadFile({
+    url: '/financial_statements/inventory-item-details',
+    config: {
+      headers: {
+        accept: 'application/xlsx',
+      },
+      params: query,
+    },
+    filename: 'inventory_item_details.xlsx',
+    ...args,
+  });
+};
+
+export const useInventoryItemDetailsCsvExport = (query, args) => {
+  return useDownloadFile({
+    url: '/financial_statements/inventory-item-details',
+    config: {
+      headers: {
+        accept: 'application/csv',
+      },
+      params: query,
+    },
+    filename: 'inventory_item_details.csv',
+    ...args,
+  });
+};
+
+/**
+ * Retrieves the balance sheet pdf document data.
+ */
+export function useInventoryItemDetailsPdf() {
+  return useRequestPdf(`financial_statements/inventory-item-details`);
+}
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-inventory-valuation.ts b/packages/webapp/src/hooks/query/FinancialReports/use-inventory-valuation.ts
new file mode 100644
index 000000000..da5f2bc36
--- /dev/null
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-inventory-valuation.ts
@@ -0,0 +1,80 @@
+// @ts-nocheck
+import { useRequestQuery } from '../../useQueryRequest';
+import { useDownloadFile } from '../../useDownloadFile';
+import { useRequestPdf } from '../../useRequestPdf';
+import t from '../types';
+
+/**
+ * Retrieve inventory valuation.
+ */
+export function useInventoryValuation(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.INVENTORY_VALUATION, query],
+    {
+      method: 'get',
+      url: '/financial_statements/inventory-valuation',
+      params: query,
+    },
+    {
+      select: (res) => res.data,
+
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve inventory valuation.
+ */
+export function useInventoryValuationTable(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.INVENTORY_VALUATION, query],
+    {
+      method: 'get',
+      url: '/financial_statements/inventory-valuation',
+      params: query,
+      headers: {
+        Accept: 'application/json+table',
+      },
+    },
+    {
+      select: (res) => res.data,
+      ...props,
+    },
+  );
+}
+
+export const useInventoryValuationXlsxExport = (query, args) => {
+  return useDownloadFile({
+    url: '/financial_statements/inventory-valuation',
+    config: {
+      headers: {
+        accept: 'application/xlsx',
+      },
+      params: query,
+    },
+    filename: 'inventory_valuation.xlsx',
+    ...args,
+  });
+};
+
+/**
+ * Retrieves the inventory valuation pdf document data.
+ */
+export function useInventoryValuationPdf() {
+  return useRequestPdf(`financial_statements/inventory-valuation`);
+}
+
+export const useInventoryValuationCsvExport = (query, args) => {
+  return useDownloadFile({
+    url: '/financial_statements/inventory-valuation',
+    config: {
+      headers: {
+        accept: 'application/csv',
+      },
+      params: query,
+    },
+    filename: 'inventory_valuation.csv',
+    ...args,
+  });
+};
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-journal-sheet.ts b/packages/webapp/src/hooks/query/FinancialReports/use-journal-sheet.ts
new file mode 100644
index 000000000..badb63fc5
--- /dev/null
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-journal-sheet.ts
@@ -0,0 +1,61 @@
+// @ts-nocheck
+import { useRequestQuery } from '../../useQueryRequest';
+import { useDownloadFile } from '../../useDownloadFile';
+import { useRequestPdf } from '../../useRequestPdf';
+import t from '../types';
+
+/**
+ * Retrieve journal sheet.
+ */
+export function useJournalSheet(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.JOURNAL, query],
+    {
+      method: 'get',
+      url: '/financial_statements/journal',
+      params: query,
+      headers: {
+        Accept: 'application/json+table',
+      },
+    },
+    {
+      select: (res) => res.data,
+      ...props,
+    },
+  );
+}
+
+export const useJournalSheetXlsxExport = (query, args) => {
+  return useDownloadFile({
+    url: '/financial_statements/journal',
+    config: {
+      headers: {
+        accept: 'application/xlsx',
+      },
+      params: query,
+    },
+    filename: 'journal.xlsx',
+    ...args,
+  });
+};
+
+export const useJournalSheetCsvExport = (query, args) => {
+  return useDownloadFile({
+    url: '/financial_statements/journal',
+    config: {
+      headers: {
+        accept: 'application/csv',
+      },
+      params: query,
+    },
+    filename: 'journal.csv',
+    ...args,
+  });
+};
+
+/**
+ * Retrieves the journal sheet pdf content.
+ */
+export const useJournalSheetPdf = (query = {}) => {
+  return useRequestPdf(`financial_statements/journal`);
+};
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-profit-loss-sheet.ts b/packages/webapp/src/hooks/query/FinancialReports/use-profit-loss-sheet.ts
new file mode 100644
index 000000000..8925aa4e2
--- /dev/null
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-profit-loss-sheet.ts
@@ -0,0 +1,61 @@
+// @ts-nocheck
+import { useRequestQuery } from '../../useQueryRequest';
+import { useDownloadFile } from '../../useDownloadFile';
+import { useRequestPdf } from '../../useRequestPdf';
+import t from '../types';
+
+/**
+ * Retrieve profit/loss (P&L) sheet.
+ */
+export function useProfitLossSheet(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.PROFIT_LOSS_SHEET, query],
+    {
+      method: 'get',
+      url: '/financial_statements/profit_loss_sheet',
+      params: query,
+      headers: {
+        Accept: 'application/json+table',
+      },
+    },
+    {
+      select: (res) => res.data,
+      ...props,
+    },
+  );
+}
+
+export const useProfitLossSheetXlsxExport = (query, args) => {
+  return useDownloadFile({
+    url: '/financial_statements/profit_loss_sheet',
+    config: {
+      headers: {
+        accept: 'application/xlsx',
+      },
+      params: query,
+    },
+    filename: 'profit_loss_sheet.xlsx',
+    ...args,
+  });
+};
+
+export const useProfitLossSheetCsvExport = (query, args) => {
+  return useDownloadFile({
+    url: '/financial_statements/profit_loss_sheet',
+    config: {
+      headers: {
+        accept: 'application/csv',
+      },
+      params: query,
+    },
+    filename: 'profit_loss_sheet.csv',
+    ...args,
+  });
+};
+
+/**
+ * Retrieves the cashflow sheet pdf document data.
+ */
+export function useProfitLossSheetPdf() {
+  return useRequestPdf(`financial_statements/profit_loss_sheet`);
+}
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-purchases-by-items.ts b/packages/webapp/src/hooks/query/FinancialReports/use-purchases-by-items.ts
new file mode 100644
index 000000000..8a77473b4
--- /dev/null
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-purchases-by-items.ts
@@ -0,0 +1,77 @@
+// @ts-nocheck
+import { useRequestQuery } from '../../useQueryRequest';
+import { useDownloadFile } from '../../useDownloadFile';
+import { useRequestPdf } from '../../useRequestPdf';
+import t from '../types';
+
+/**
+ * Retrieve purchases by items.
+ */
+export function usePurchasesByItems(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.PURCHASES_BY_ITEMS, query],
+    {
+      method: 'get',
+      url: '/financial_statements/purchases-by-items',
+      params: query,
+    },
+    {
+      select: (res) => res.data,
+      ...props,
+    },
+  );
+}
+
+export function usePurchasesByItemsTable(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.PURCHASES_BY_ITEMS, query],
+    {
+      method: 'get',
+      url: '/financial_statements/purchases-by-items',
+      params: query,
+      headers: {
+        accept: 'application/json+table',
+      },
+    },
+    {
+      select: (res) => res.data,
+      ...props,
+    },
+  );
+}
+
+export const usePurchasesByItemsCsvExport = (query, args) => {
+  return useDownloadFile({
+    url: '/financial_statements/purchases-by-items',
+    config: {
+      headers: {
+        accept: 'application/csv',
+      },
+      params: query,
+    },
+    filename: 'purchases_by_items.csv',
+    ...args,
+  });
+};
+
+export const usePurchasesByItemsXlsxExport = (query, args) => {
+  return useDownloadFile({
+    url: '/financial_statements/purchases-by-items',
+    config: {
+      headers: {
+        accept: 'application/xlsx',
+      },
+      params: query,
+    },
+    filename: 'purchases_by_items.xlsx',
+    ...args,
+  });
+};
+
+/**
+ *
+ * @returns
+ */
+export const usePurchasesByItemsPdfExport = () => {
+  return useRequestPdf('/financial_statements/purchases-by-items');
+};
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-sales-by-items.ts b/packages/webapp/src/hooks/query/FinancialReports/use-sales-by-items.ts
new file mode 100644
index 000000000..e9e559857
--- /dev/null
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-sales-by-items.ts
@@ -0,0 +1,75 @@
+// @ts-nocheck
+import { useRequestQuery } from '../../useQueryRequest';
+import { useDownloadFile } from '../../useDownloadFile';
+import { useRequestPdf } from '../../useRequestPdf';
+import t from '../types';
+
+/**
+ * Retrieve sales by items.
+ */
+export function useSalesByItems(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.SALES_BY_ITEMS, query],
+    {
+      method: 'get',
+      url: '/financial_statements/sales-by-items',
+      params: query,
+    },
+    {
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieves sales by items table format.
+ */
+export function useSalesByItemsTable(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.SALES_BY_ITEMS, query],
+    {
+      method: 'get',
+      url: '/financial_statements/sales-by-items',
+      params: query,
+      headers: {
+        Accept: 'application/json+table',
+      },
+    },
+    {
+      select: (res) => res.data,
+      ...props,
+    },
+  );
+}
+
+export const useSalesByItemsCsvExport = (query, args) => {
+  return useDownloadFile({
+    url: '/financial_statements/sales-by-items',
+    config: {
+      headers: {
+        accept: 'application/csv',
+      },
+      params: query,
+    },
+    filename: 'sales_by_items.csv',
+    ...args,
+  });
+};
+
+export const useSalesByItemsXlsxExport = (query, args) => {
+  return useDownloadFile({
+    url: '/financial_statements/sales-by-items',
+    config: {
+      headers: {
+        accept: 'application/xlsx',
+      },
+      params: query,
+    },
+    filename: 'sales_by_items.xlsx',
+    ...args,
+  });
+};
+
+export const useSalesByItemsPdfExport = () => {
+  return useRequestPdf('/financial_statements/sales-by-items');
+};
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-sales-tax-liabilities-summary.ts b/packages/webapp/src/hooks/query/FinancialReports/use-sales-tax-liabilities-summary.ts
new file mode 100644
index 000000000..abcca6f28
--- /dev/null
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-sales-tax-liabilities-summary.ts
@@ -0,0 +1,61 @@
+// @ts-nocheck
+import { useRequestQuery } from '../../useQueryRequest';
+import { useDownloadFile } from '../../useDownloadFile';
+import { useRequestPdf } from '../../useRequestPdf';
+import t from '../types';
+
+/**
+ * Retrieves the sales tax liability summary report.
+ */
+export function useSalesTaxLiabilitySummary(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.SALES_TAX_LIABILITY_SUMMARY, query],
+    {
+      method: 'get',
+      url: '/financial_statements/sales-tax-liability-summary',
+      params: query,
+      headers: {
+        Accept: 'application/json+table',
+      },
+    },
+    {
+      select: (res) => res.data,
+      ...props,
+    },
+  );
+}
+
+export const useSalesTaxLiabilitySummaryXlsxExport = (query, args) => {
+  return useDownloadFile({
+    url: '/financial_statements/sales-tax-liability-summary',
+    config: {
+      headers: {
+        accept: 'application/xlsx',
+      },
+      params: query,
+    },
+    filename: 'sales_tax_liability_summary.xlsx',
+    ...args,
+  });
+};
+
+export const useSalesTaxLiabilitySummaryCsvExport = (query, args) => {
+  return useDownloadFile({
+    url: '/financial_statements/sales-tax-liability-summary',
+    config: {
+      headers: {
+        accept: 'application/csv',
+      },
+      params: query,
+    },
+    filename: 'sales_tax_liability_summary.csv',
+    ...args,
+  });
+};
+
+/**
+ * Retrieves the balance sheet pdf document data.
+ */
+export function useSalesTaxLiabilitySummaryPdf() {
+  return useRequestPdf(`financial_statements/sales-tax-liability-summary`);
+}
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-transactions-by-reference.ts b/packages/webapp/src/hooks/query/FinancialReports/use-transactions-by-reference.ts
new file mode 100644
index 000000000..680e98a5a
--- /dev/null
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-transactions-by-reference.ts
@@ -0,0 +1,23 @@
+// @ts-nocheck
+import { useRequestQuery } from '../../useQueryRequest';
+import t from '../types';
+/**
+ * Retrieve transactions by reference report.
+ */
+export function useTransactionsByReference(query, props) {
+  return useRequestQuery(
+    [t.TRANSACTIONS_BY_REFERENCE, query],
+    {
+      method: 'get',
+      url: `/financial_statements/transactions-by-reference`,
+      params: query,
+    },
+    {
+      select: (res) => res.data,
+      defaultData: {
+        transactions: [],
+      },
+      ...props,
+    },
+  );
+}
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-trial-balance-sheet.ts b/packages/webapp/src/hooks/query/FinancialReports/use-trial-balance-sheet.ts
new file mode 100644
index 000000000..8aaac170c
--- /dev/null
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-trial-balance-sheet.ts
@@ -0,0 +1,61 @@
+// @ts-nocheck
+import { useRequestQuery } from '../../useQueryRequest';
+import { useDownloadFile } from '../../useDownloadFile';
+import { useRequestPdf } from '../../useRequestPdf';
+import t from '../types';
+
+/**
+ * Retrieve trial balance sheet.
+ */
+export function useTrialBalanceSheet(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.TRIAL_BALANCE_SHEET, query],
+    {
+      method: 'get',
+      url: '/financial_statements/trial_balance_sheet',
+      params: query,
+      headers: {
+        Accept: 'application/json+table',
+      },
+    },
+    {
+      select: (res) => res.data,
+      ...props,
+    },
+  );
+}
+
+export const useTrialBalanceSheetXlsxExport = (query, args) => {
+  return useDownloadFile({
+    url: '/financial_statements/trial_balance_sheet',
+    config: {
+      headers: {
+        accept: 'application/xlsx',
+      },
+      params: query,
+    },
+    filename: 'trial_balance_sheet.xlsx',
+    ...args,
+  });
+};
+
+export const useTrialBalanceSheetCsvExport = (query, args) => {
+  return useDownloadFile({
+    url: '/financial_statements/trial_balance_sheet',
+    config: {
+      headers: {
+        accept: 'application/csv',
+      },
+      params: query,
+    },
+    filename: 'trial_balance_sheet.csv',
+    ...args,
+  });
+};
+
+/**
+ * Retrieves the trial balance sheet pdf document data.
+ */
+export function useTrialBalanceSheetPdf() {
+  return useRequestPdf(`financial_statements/trial_balance_sheet`);
+}
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-vendor-balance-summary.ts b/packages/webapp/src/hooks/query/FinancialReports/use-vendor-balance-summary.ts
new file mode 100644
index 000000000..b9f84017a
--- /dev/null
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-vendor-balance-summary.ts
@@ -0,0 +1,68 @@
+// @ts-nocheck
+import { useRequestQuery } from '../../useQueryRequest';
+import { useDownloadFile } from '../../useDownloadFile';
+import { useRequestPdf } from '../../useRequestPdf';
+import t from '../types';
+
+/**
+ * Retrieve vendors balance summary report.
+ */
+export function useVendorsBalanceSummaryReport(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.VENDORS_BALANCE_SUMMARY, query],
+    {
+      method: 'get',
+      url: '/financial_statements/vendor-balance-summary',
+      params: query,
+      headers: {
+        Accept: 'application/json+table',
+      },
+    },
+
+    {
+      select: (res) => ({
+        query: res.data.query,
+        table: res.data.table,
+      }),
+      defaultData: {
+        table: {},
+        query: {},
+      },
+      ...props,
+    },
+  );
+}
+
+export const useVendorBalanceSummaryXlsxExport = (args) => {
+  const url = '/financial_statements/vendor-balance-summary';
+  const config = {
+    headers: {
+      accept: 'application/xlsx',
+    },
+  };
+  const filename = 'vendor_balance_summary.xlsx';
+
+  return useDownloadFile({
+    url,
+    config,
+    filename,
+    ...args,
+  });
+};
+
+export const useVendorBalanceSummaryCsvExport = (args) => {
+  return useDownloadFile({
+    url: '/financial_statements/vendor-balance-summary',
+    config: {
+      headers: {
+        accept: 'application/csv',
+      },
+    },
+    filename: 'vendor_balance_summary.csv',
+    ...args,
+  });
+};
+
+export const useVendorBalanceSummaryPdfExport = () => {
+  return useRequestPdf('/financial_statements/vendor-balance-summary');
+};
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-vendor-transactions.ts b/packages/webapp/src/hooks/query/FinancialReports/use-vendor-transactions.ts
new file mode 100644
index 000000000..c9da544a9
--- /dev/null
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-vendor-transactions.ts
@@ -0,0 +1,71 @@
+// @ts-nocheck
+import { useRequestQuery } from '../../useQueryRequest';
+import { useDownloadFile } from '../../useDownloadFile';
+import { useRequestPdf } from '../../useRequestPdf';
+import t from '../types';
+
+/**
+ * Retrieve vendors transactions report.
+ */
+export function useVendorsTransactionsReport(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.VENDORS_TRANSACTIONS, query],
+    {
+      method: 'get',
+      url: '/financial_statements/transactions-by-vendors',
+      params: query,
+      headers: {
+        Accept: 'application/json+table',
+      },
+    },
+    {
+      select: (res) => ({
+        data: res.data.table,
+        tableRows: res.data.table.rows,
+      }),
+      defaultData: {
+        tableRows: [],
+        data: [],
+      },
+      ...props,
+    },
+  );
+}
+
+export const useVendorsTransactionsXlsxExport = (query, args) => {
+  const url = '/financial_statements/transactions-by-vendors';
+  const config = {
+    headers: {
+      accept: 'application/xlsx',
+    },
+    params: query,
+  };
+  const filename = 'transactions_by_vendor.xlsx';
+
+  return useDownloadFile({
+    url,
+    config,
+    filename,
+    ...args,
+  });
+};
+
+export const useVendorsTransactionsCsvExport = (query, args) => {
+  return useDownloadFile({
+    url: '/financial_statements/transactions-by-vendors',
+    config: {
+      headers: {
+        accept: 'application/csv',
+      },
+      params: query,
+    },
+    filename: 'transactions_by_vendor.csv',
+    ...args,
+  });
+};
+/**
+ * Retrieves the balance sheet pdf document data.
+ */
+export function useTransactionsByVendorsPdf() {
+  return useRequestPdf(`financial_statements/transactions-by-vendors`);
+}
diff --git a/packages/webapp/src/hooks/query/financialReports.tsx b/packages/webapp/src/hooks/query/financialReports.tsx
deleted file mode 100644
index 6738cbc44..000000000
--- a/packages/webapp/src/hooks/query/financialReports.tsx
+++ /dev/null
@@ -1,1008 +0,0 @@
-// @ts-nocheck
-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.
- */
-export function useBalanceSheet(query, props) {
-  return useRequestQuery(
-    [t.FINANCIAL_REPORT, t.BALANCE_SHEET, query],
-    {
-      method: 'get',
-      url: '/financial_statements/balance_sheet',
-      params: query,
-      headers: {
-        Accept: 'application/json+table',
-      },
-    },
-    {
-      select: (res) => res.data,
-      ...props,
-    },
-  );
-}
-
-export const useBalanceSheetXlsxExport = (query, args) => {
-  return useDownloadFile({
-    url: '/financial_statements/balance_sheet',
-    config: {
-      headers: {
-        accept: 'application/xlsx',
-      },
-      params: query,
-    },
-    filename: 'balance_sheet.xlsx',
-    ...args,
-  });
-};
-
-export const useBalanceSheetCsvExport = (query, args) => {
-  return useDownloadFile({
-    url: '/financial_statements/balance_sheet',
-    config: {
-      headers: {
-        accept: 'application/csv',
-      },
-      params: query,
-    },
-    filename: 'balance_sheet.csv',
-    ...args,
-  });
-};
-
-/**
- * Retrieves the balance sheet pdf document data.
- */
-export function useBalanceSheetPdf() {
-  return useRequestPdf(`financial_statements/balance_sheet`);
-}
-
-/**
- * Retrieve trial balance sheet.
- */
-export function useTrialBalanceSheet(query, props) {
-  return useRequestQuery(
-    [t.FINANCIAL_REPORT, t.TRIAL_BALANCE_SHEET, query],
-    {
-      method: 'get',
-      url: '/financial_statements/trial_balance_sheet',
-      params: query,
-      headers: {
-        Accept: 'application/json+table',
-      },
-    },
-    {
-      select: (res) => res.data,
-      ...props,
-    },
-  );
-}
-
-export const useTrialBalanceSheetXlsxExport = (query, args) => {
-  return useDownloadFile({
-    url: '/financial_statements/trial_balance_sheet',
-    config: {
-      headers: {
-        accept: 'application/xlsx',
-      },
-      params: query,
-    },
-    filename: 'trial_balance_sheet.xlsx',
-    ...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',
-    config: {
-      headers: {
-        accept: 'application/csv',
-      },
-      params: query,
-    },
-    filename: 'trial_balance_sheet.csv',
-    ...args,
-  });
-};
-
-/**
- * Retrieve profit/loss (P&L) sheet.
- */
-export function useProfitLossSheet(query, props) {
-  return useRequestQuery(
-    [t.FINANCIAL_REPORT, t.PROFIT_LOSS_SHEET, query],
-    {
-      method: 'get',
-      url: '/financial_statements/profit_loss_sheet',
-      params: query,
-      headers: {
-        Accept: 'application/json+table',
-      },
-    },
-    {
-      select: (res) => res.data,
-      ...props,
-    },
-  );
-}
-
-export const useProfitLossSheetXlsxExport = (query, args) => {
-  return useDownloadFile({
-    url: '/financial_statements/profit_loss_sheet',
-    config: {
-      headers: {
-        accept: 'application/xlsx',
-      },
-      params: query,
-    },
-    filename: 'profit_loss_sheet.xlsx',
-    ...args,
-  });
-};
-
-export const useProfitLossSheetCsvExport = (query, args) => {
-  return useDownloadFile({
-    url: '/financial_statements/profit_loss_sheet',
-    config: {
-      headers: {
-        accept: 'application/csv',
-      },
-      params: query,
-    },
-    filename: 'profit_loss_sheet.csv',
-    ...args,
-  });
-};
-
-/**
- * Retrieves the cashflow sheet pdf document data.
- */
-export function useProfitLossSheetPdf() {
-  return useRequestPdf(`financial_statements/profit_loss_sheet`);
-}
-
-
-/**
- * Retrieve general ledger (GL) sheet.
- */
-export function useGeneralLedgerSheet(query, props) {
-  return useRequestQuery(
-    [t.FINANCIAL_REPORT, t.GENERAL_LEDGER, query],
-    {
-      method: 'get',
-      url: '/financial_statements/general_ledger',
-      params: query,
-      headers: {
-        Accept: 'application/json+table',
-      },
-    },
-    {
-      select: (res) => res.data,
-      ...props,
-    },
-  );
-}
-export const useGeneralLedgerSheetXlsxExport = (query, args) => {
-  return useDownloadFile({
-    url: '/financial_statements/general_ledger',
-    config: {
-      headers: {
-        accept: 'application/xlsx',
-      },
-      params: query,
-    },
-    filename: 'general_ledger.xlsx',
-    ...args,
-  });
-};
-
-export const useGeneralLedgerSheetCsvExport = (query, args) => {
-  return useDownloadFile({
-    url: '/financial_statements/general_ledger',
-    config: {
-      headers: {
-        accept: 'application/csv',
-      },
-      params: query,
-    },
-    filename: 'general_ledger.csv',
-    ...args,
-  });
-};
-
-/**
- * Retrieve journal sheet.
- */
-export function useJournalSheet(query, props) {
-  return useRequestQuery(
-    [t.FINANCIAL_REPORT, t.JOURNAL, query],
-    {
-      method: 'get',
-      url: '/financial_statements/journal',
-      params: query,
-      headers: {
-        Accept: 'application/json+table',
-      },
-    },
-    {
-      select: (res) => res.data,
-      ...props,
-    },
-  );
-}
-
-export const useJournalSheetXlsxExport = (query, args) => {
-  return useDownloadFile({
-    url: '/financial_statements/journal',
-    config: {
-      headers: {
-        accept: 'application/xlsx',
-      },
-      params: query,
-    },
-    filename: 'journal.xlsx',
-    ...args,
-  });
-};
-
-export const useJournalSheetCsvExport = (query, args) => {
-  return useDownloadFile({
-    url: '/financial_statements/journal',
-    config: {
-      headers: {
-        accept: 'application/csv',
-      },
-      params: query,
-    },
-    filename: 'journal.csv',
-    ...args,
-  });
-};
-
-/**
- * Retrieve A/R aging summary report.
- */
-export function useARAgingSummaryReport(query, props) {
-  return useRequestQuery(
-    [t.FINANCIAL_REPORT, t.AR_AGING_SUMMARY, query],
-    {
-      method: 'get',
-      url: '/financial_statements/receivable_aging_summary',
-      params: query,
-      headers: {
-        Accept: 'application/json+table',
-      },
-    },
-    {
-      select: (res) => res.data,
-      ...props,
-    },
-  );
-}
-
-export const useARAgingSheetXlsxExport = (query, args) => {
-  return useDownloadFile({
-    url: '/financial_statements/receivable_aging_summary',
-    config: {
-      headers: {
-        accept: 'application/xlsx',
-      },
-      params: query,
-    },
-    filename: 'receivable_aging_summary.xlsx',
-    ...args,
-  });
-};
-
-export const useARAgingSheetCsvExport = (query, args) => {
-  return useDownloadFile({
-    url: '/financial_statements/receivable_aging_summary',
-    config: {
-      headers: {
-        accept: 'application/csv',
-      },
-      params: query,
-    },
-    filename: 'receivable_aging_summary.csv',
-    ...args,
-  });
-};
-
-/**
- * Retrieve A/P aging summary report.
- */
-export function useAPAgingSummaryReport(query, props) {
-  return useRequestQuery(
-    [t.FINANCIAL_REPORT, t.AP_AGING_SUMMARY, query],
-    {
-      method: 'get',
-      url: '/financial_statements/payable_aging_summary',
-      params: query,
-      headers: {
-        Accept: 'application/json+table',
-      },
-    },
-    {
-      select: (res) => res.data,
-      ...props,
-    },
-  );
-}
-
-export const useAPAgingSheetXlsxExport = (query, args) => {
-  return useDownloadFile({
-    url: '/financial_statements/payable_aging_summary',
-    config: {
-      headers: {
-        accept: 'application/xlsx',
-      },
-      params: query,
-    },
-    filename: 'payable_aging_summary.xlsx',
-    ...args,
-  });
-};
-
-export const useAPAgingSheetCsvExport = (query, args) => {
-  return useDownloadFile({
-    url: '/financial_statements/payable_aging_summary',
-    config: {
-      headers: {
-        accept: 'application/csv',
-      },
-      params: query,
-    },
-    filename: 'payable_aging_summary.csv',
-    ...args,
-  });
-};
-
-/**
- * Retrieve inventory valuation.
- */
-export function useInventoryValuation(query, props) {
-  return useRequestQuery(
-    [t.FINANCIAL_REPORT, t.INVENTORY_VALUATION, query],
-    {
-      method: 'get',
-      url: '/financial_statements/inventory-valuation',
-      params: query,
-    },
-    {
-      select: (res) => res.data,
-
-      ...props,
-    },
-  );
-}
-
-/**
- * Retrieve inventory valuation.
- */
-export function useInventoryValuationTable(query, props) {
-  return useRequestQuery(
-    [t.FINANCIAL_REPORT, t.INVENTORY_VALUATION, query],
-    {
-      method: 'get',
-      url: '/financial_statements/inventory-valuation',
-      params: query,
-      headers: {
-        Accept: 'application/json+table',
-      },
-    },
-    {
-      select: (res) => res.data,
-      ...props,
-    },
-  );
-}
-
-export const useInventoryValuationXlsxExport = (query, args) => {
-  return useDownloadFile({
-    url: '/financial_statements/inventory-valuation',
-    config: {
-      headers: {
-        accept: 'application/xlsx',
-      },
-      params: query,
-    },
-    filename: 'inventory_valuation.xlsx',
-    ...args,
-  });
-};
-
-export const useInventoryValuationCsvExport = (query, args) => {
-  return useDownloadFile({
-    url: '/financial_statements/inventory-valuation',
-    config: {
-      headers: {
-        accept: 'application/csv',
-      },
-      params: query,
-    },
-    filename: 'inventory_valuation.csv',
-    ...args,
-  });
-};
-
-/**
- * Retrieve purchases by items.
- */
-export function usePurchasesByItems(query, props) {
-  return useRequestQuery(
-    [t.FINANCIAL_REPORT, t.PURCHASES_BY_ITEMS, query],
-    {
-      method: 'get',
-      url: '/financial_statements/purchases-by-items',
-      params: query,
-    },
-    {
-      select: (res) => res.data,
-      ...props,
-    },
-  );
-}
-
-export function usePurchasesByItemsTable(query, props) {
-  return useRequestQuery(
-    [t.FINANCIAL_REPORT, t.PURCHASES_BY_ITEMS, query],
-    {
-      method: 'get',
-      url: '/financial_statements/purchases-by-items',
-      params: query,
-      headers: {
-        accept: 'application/json+table',
-      },
-    },
-    {
-      select: (res) => res.data,
-      ...props,
-    },
-  );
-}
-
-export const usePurchasesByItemsCsvExport = (query, args) => {
-  return useDownloadFile({
-    url: '/financial_statements/purchases-by-items',
-    config: {
-      headers: {
-        accept: 'application/csv',
-      },
-      params: query,
-    },
-    filename: 'purchases_by_items.csv',
-    ...args,
-  });
-};
-
-export const usePurchasesByItemsXlsxExport = (query, args) => {
-  return useDownloadFile({
-    url: '/financial_statements/purchases-by-items',
-    config: {
-      headers: {
-        accept: 'application/xlsx',
-      },
-      params: query,
-    },
-    filename: 'purchases_by_items.xlsx',
-    ...args,
-  });
-};
-
-/**
- * Retrieve sales by items.
- */
-export function useSalesByItems(query, props) {
-  return useRequestQuery(
-    [t.FINANCIAL_REPORT, t.SALES_BY_ITEMS, query],
-    {
-      method: 'get',
-      url: '/financial_statements/sales-by-items',
-      params: query,
-    },
-    {
-      ...props,
-    },
-  );
-}
-
-/**
- * Retrieves sales by items table format.
- */
-export function useSalesByItemsTable(query, props) {
-  return useRequestQuery(
-    [t.FINANCIAL_REPORT, t.SALES_BY_ITEMS, query],
-    {
-      method: 'get',
-      url: '/financial_statements/sales-by-items',
-      params: query,
-      headers: {
-        Accept: 'application/json+table',
-      },
-    },
-    {
-      select: (res) => res.data,
-      ...props,
-    },
-  );
-}
-
-export const useSalesByItemsCsvExport = (query, args) => {
-  return useDownloadFile({
-    url: '/financial_statements/sales-by-items',
-    config: {
-      headers: {
-        accept: 'application/csv',
-      },
-      params: query,
-    },
-    filename: 'sales_by_items.csv',
-    ...args,
-  });
-};
-
-export const useSalesByItemsXlsxExport = (query, args) => {
-  return useDownloadFile({
-    url: '/financial_statements/sales-by-items',
-    config: {
-      headers: {
-        accept: 'application/xlsx',
-      },
-      params: query,
-    },
-    filename: 'sales_by_items.xlsx',
-    ...args,
-  });
-};
-
-/**
- * Retrieve customers balance summary report.
- */
-export function useCustomerBalanceSummaryReport(query, props) {
-  return useRequestQuery(
-    [t.FINANCIAL_REPORT, t.CUSTOMERS_BALANCE_SUMMARY, query],
-    {
-      method: 'get',
-      url: '/financial_statements/customer-balance-summary',
-      params: query,
-      headers: {
-        Accept: 'application/json+table',
-      },
-    },
-    {
-      select: (res) => ({
-        query: res.data.query,
-        table: res.data.table,
-      }),
-      defaultData: {
-        table: {},
-        query: {},
-      },
-      ...props,
-    },
-  );
-}
-
-export const useCustomerBalanceSummaryXlsxExport = (query, args) => {
-  return useDownloadFile({
-    url: '/financial_statements/customer-balance-summary',
-    config: {
-      headers: {
-        accept: 'application/xlsx',
-      },
-      params: query,
-    },
-    filename: 'customer_balance_summary.xlsx',
-    ...args,
-  });
-};
-
-export const useCustomerBalanceSummaryCsvExport = (query, args) => {
-  return useDownloadFile({
-    url: '/financial_statements/customer-balance-summary',
-    config: {
-      headers: {
-        accept: 'application/csv',
-      },
-      params: query,
-    },
-    filename: 'customer_balance_summary.csv',
-    ...args,
-  });
-};
-
-/**
- * Retrieve vendors balance summary report.
- */
-export function useVendorsBalanceSummaryReport(query, props) {
-  return useRequestQuery(
-    [t.FINANCIAL_REPORT, t.VENDORS_BALANCE_SUMMARY, query],
-    {
-      method: 'get',
-      url: '/financial_statements/vendor-balance-summary',
-      params: query,
-      headers: {
-        Accept: 'application/json+table',
-      },
-    },
-
-    {
-      select: (res) => ({
-        query: res.data.query,
-        table: res.data.table,
-      }),
-      defaultData: {
-        table: {},
-        query: {},
-      },
-      ...props,
-    },
-  );
-}
-
-export const useVendorBalanceSummaryXlsxExport = (args) => {
-  const url = '/financial_statements/vendor-balance-summary';
-  const config = {
-    headers: {
-      accept: 'application/xlsx',
-    },
-  };
-  const filename = 'vendor_balance_summary.xlsx';
-
-  return useDownloadFile({
-    url,
-    config,
-    filename,
-    ...args,
-  });
-};
-
-export const useVendorBalanceSummaryCsvExport = (args) => {
-  return useDownloadFile({
-    url: '/financial_statements/vendor-balance-summary',
-    config: {
-      headers: {
-        accept: 'application/csv',
-      },
-    },
-    filename: 'vendor_balance_summary.csv',
-    ...args,
-  });
-};
-
-/**
- * Retrieve customers transactions report.
- */
-export function useCustomersTransactionsReport(query, props) {
-  return useRequestQuery(
-    [t.FINANCIAL_REPORT, t.CUSTOMERS_TRANSACTIONS, query],
-    {
-      method: 'get',
-      url: '/financial_statements/transactions-by-customers',
-      params: query,
-      headers: {
-        Accept: 'application/json+table',
-      },
-    },
-    {
-      select: (res) => ({
-        data: res.data.table,
-        tableRows: res.data.table.rows,
-      }),
-      defaultData: {
-        tableRows: [],
-        data: [],
-      },
-      ...props,
-    },
-  );
-}
-
-export const useCustomersTransactionsXlsxExport = (query, args) => {
-  const url = '/financial_statements/transactions-by-customers';
-  const config = {
-    headers: {
-      accept: 'application/xlsx',
-    },
-    params: query,
-  };
-  const filename = 'customers_transactions.xlsx';
-
-  return useDownloadFile({
-    url,
-    config,
-    filename,
-    ...args,
-  });
-};
-
-export const useCustomersTransactionsCsvExport = (query, args) => {
-  return useDownloadFile({
-    url: '/financial_statements/transactions-by-customers',
-    config: {
-      headers: {
-        accept: 'application/csv',
-      },
-      params: query,
-    },
-    filename: 'customers_transactions.csv',
-    ...args,
-  });
-};
-
-/**
- * Retrieve vendors transactions report.
- */
-export function useVendorsTransactionsReport(query, props) {
-  return useRequestQuery(
-    [t.FINANCIAL_REPORT, t.VENDORS_TRANSACTIONS, query],
-    {
-      method: 'get',
-      url: '/financial_statements/transactions-by-vendors',
-      params: query,
-      headers: {
-        Accept: 'application/json+table',
-      },
-    },
-    {
-      select: (res) => ({
-        data: res.data.table,
-        tableRows: res.data.table.rows,
-      }),
-      defaultData: {
-        tableRows: [],
-        data: [],
-      },
-      ...props,
-    },
-  );
-}
-
-export const useVendorsTransactionsXlsxExport = (query, args) => {
-  const url = '/financial_statements/transactions-by-vendors';
-  const config = {
-    headers: {
-      accept: 'application/xlsx',
-    },
-    params: query,
-  };
-  const filename = 'transactions_by_vendor.xlsx';
-
-  return useDownloadFile({
-    url,
-    config,
-    filename,
-    ...args,
-  });
-};
-
-export const useVendorsTransactionsCsvExport = (query, args) => {
-  return useDownloadFile({
-    url: '/financial_statements/transactions-by-vendors',
-    config: {
-      headers: {
-        accept: 'application/csv',
-      },
-      params: query,
-    },
-    filename: 'transactions_by_vendor.csv',
-    ...args,
-  });
-};
-
-/**
- * Retrieve cash flow statement report.
- */
-export function useCashFlowStatementReport(query, props) {
-  return useRequestQuery(
-    [t.FINANCIAL_REPORT, t.CASH_FLOW_STATEMENT, query],
-    {
-      method: 'get',
-      url: '/financial_statements/cash-flow',
-      params: query,
-      headers: {
-        Accept: 'application/json+table',
-      },
-    },
-    {
-      select: (res) => ({
-        columns: res.data.table.columns,
-        query: res.data.query,
-        meta: res.data.meta,
-        tableRows: res.data.table.rows,
-      }),
-      defaultData: {
-        tableRows: [],
-        columns: [],
-        query: {},
-        meta: {},
-      },
-      ...props,
-    },
-  );
-}
-
-export const useCashFlowStatementXlsxExport = (query, args) => {
-  const url = '/financial_statements/cash-flow';
-  const config = {
-    headers: {
-      accept: 'application/xlsx',
-    },
-    params: query,
-  };
-  const filename = 'cashflow_statement.xlsx';
-
-  return useDownloadFile({
-    url,
-    config,
-    filename,
-    ...args,
-  });
-};
-
-export const useCashFlowStatementCsvExport = (query, args) => {
-  const url = '/financial_statements/cash-flow';
-  const config = {
-    headers: {
-      accept: 'application/csv',
-    },
-    params: query,
-  };
-  const filename = 'cashflow_statement.csv';
-
-  return useDownloadFile({
-    url,
-    config,
-    filename,
-    ...args,
-  });
-};
-
-/**
- * Retrieves the cashflow sheet pdf document data.
- */
-export function useCashflowSheetPdf() {
-  return useRequestPdf(`financial_statements/cash-flow`);
-}
-
-/**
- * Retrieve inventory item detail report.
- */
-export function useInventoryItemDetailsReport(query, props) {
-  return useRequestQuery(
-    [t.FINANCIAL_REPORT, t.INVENTORY_ITEM_DETAILS, query],
-    {
-      method: 'get',
-      url: '/financial_statements/inventory-item-details',
-      params: query,
-      headers: {
-        Accept: 'application/json+table',
-      },
-    },
-    {
-      select: (res) => ({
-        columns: res.data.table.columns,
-        query: res.data.query,
-        meta: res.data.meta,
-        tableRows: res.data.table.rows,
-      }),
-      defaultData: {
-        tableRows: [],
-        columns: [],
-        query: {},
-        meta: {},
-      },
-      ...props,
-    },
-  );
-}
-
-export const useInventoryItemDetailsXlsxExport = (query, args) => {
-  return useDownloadFile({
-    url: '/financial_statements/inventory-item-details',
-    config: {
-      headers: {
-        accept: 'application/xlsx',
-      },
-      params: query,
-    },
-    filename: 'inventory_item_details.xlsx',
-    ...args,
-  });
-};
-
-export const useInventoryItemDetailsCsvExport = (query, args) => {
-  return useDownloadFile({
-    url: '/financial_statements/inventory-item-details',
-    config: {
-      headers: {
-        accept: 'application/csv',
-      },
-      params: query,
-    },
-    filename: 'inventory_item_details.csv',
-    ...args,
-  });
-};
-
-/**
- * Retrieve transactions by reference report.
- */
-export function useTransactionsByReference(query, props) {
-  return useRequestQuery(
-    [t.TRANSACTIONS_BY_REFERENCE, query],
-    {
-      method: 'get',
-      url: `/financial_statements/transactions-by-reference`,
-      params: query,
-    },
-    {
-      select: (res) => res.data,
-      defaultData: {
-        transactions: [],
-      },
-      ...props,
-    },
-  );
-}
-
-/**
- * Retrieves the sales tax liability summary report.
- */
-export function useSalesTaxLiabilitySummary(query, props) {
-  return useRequestQuery(
-    [t.FINANCIAL_REPORT, t.SALES_TAX_LIABILITY_SUMMARY, query],
-    {
-      method: 'get',
-      url: '/financial_statements/sales-tax-liability-summary',
-      params: query,
-      headers: {
-        Accept: 'application/json+table',
-      },
-    },
-    {
-      select: (res) => res.data,
-      ...props,
-    },
-  );
-}
-
-export const useSalesTaxLiabilitySummaryXlsxExport = (query, args) => {
-  return useDownloadFile({
-    url: '/financial_statements/sales-tax-liability-summary',
-    config: {
-      headers: {
-        accept: 'application/xlsx',
-      },
-      params: query,
-    },
-    filename: 'sales_tax_liability_summary.xlsx',
-    ...args,
-  });
-};
-
-export const useSalesTaxLiabilitySummaryCsvExport = (query, args) => {
-  return useDownloadFile({
-    url: '/financial_statements/sales-tax-liability-summary',
-    config: {
-      headers: {
-        accept: 'application/csv',
-      },
-      params: query,
-    },
-    filename: 'sales_tax_liability_summary.csv',
-    ...args,
-  });
-};
diff --git a/packages/webapp/src/hooks/query/index.tsx b/packages/webapp/src/hooks/query/index.tsx
index 0a7f4feff..fd193b62f 100644
--- a/packages/webapp/src/hooks/query/index.tsx
+++ b/packages/webapp/src/hooks/query/index.tsx
@@ -6,7 +6,6 @@ export * from './items';
 export * from './itemsCategories';
 export * from './inventoryAdjustments';
 export * from './expenses';
-export * from './financialReports';
 export * from './customers';
 export * from './vendors';
 export * from './manualJournals';
@@ -37,3 +36,4 @@ export * from './transactionsLocking';
 export * from './warehouses';
 export * from './branches';
 export * from './warehousesTransfers';
+export * from './FinancialReports';

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

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

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

From d67189587e31f5126629b37f6ee44ef72494eb2c Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Tue, 13 Feb 2024 19:42:11 +0200
Subject: [PATCH 29/39] feat(server): financial reports meta

---
 .../TransactionsByCustomers/index.ts                   | 10 ++++++++++
 .../CustomerBalanceSummaryService.ts                   |  1 +
 .../CustomerBalanceSummaryTableInjectable.ts           |  3 ++-
 .../SalesByItems/SalesByItemsApplication.ts            |  1 -
 .../TransactionsByCustomersService.ts                  |  1 +
 .../TransactionsByCustomersTableInjectable.ts          |  1 +
 .../TransactionsByVendorInjectable.ts                  |  1 +
 .../TransactionsByVendorTableInjectable.ts             |  1 +
 .../VendorBalanceSummaryService.ts                     |  1 +
 .../VendorBalanceSummaryTableInjectable.ts             | 10 ++++++----
 10 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/packages/server/src/api/controllers/FinancialStatements/TransactionsByCustomers/index.ts b/packages/server/src/api/controllers/FinancialStatements/TransactionsByCustomers/index.ts
index 42a619ec8..c10eeea16 100644
--- a/packages/server/src/api/controllers/FinancialStatements/TransactionsByCustomers/index.ts
+++ b/packages/server/src/api/controllers/FinancialStatements/TransactionsByCustomers/index.ts
@@ -104,6 +104,16 @@ export default class TransactionsByCustomersReportController extends BaseFinanci
         );
         return res.send(buffer);
         // Retrieve the json format.
+      } else if (ACCEPT_TYPE.APPLICATION_PDF === acceptType) {
+        const pdfContent = await this.transactionsByCustomersApp.pdf(
+          tenantId,
+          filter
+        );
+        res.set({
+          'Content-Type': 'application/pdf',
+          'Content-Length': pdfContent.length,
+        });
+        return res.send(pdfContent);
       } else {
         const sheet = await this.transactionsByCustomersApp.sheet(
           tenantId,
diff --git a/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryService.ts b/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryService.ts
index 78afc3bb2..45345d931 100644
--- a/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryService.ts
+++ b/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryService.ts
@@ -100,6 +100,7 @@ export class CustomerBalanceSummaryService
     return {
       data: report.reportData(),
       query: filter,
+      meta: {}
     };
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryTableInjectable.ts b/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryTableInjectable.ts
index 56450d4ca..be42a7417 100644
--- a/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryTableInjectable.ts
+++ b/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryTableInjectable.ts
@@ -26,7 +26,7 @@ export class CustomerBalanceSummaryTableInjectable {
     filter: ICustomerBalanceSummaryQuery
   ): Promise<ICustomerBalanceSummaryTable> {
     const i18n = this.tenancy.i18n(tenantId);
-    const { data, query } =
+    const { data, query, meta } =
       await this.customerBalanceSummaryService.customerBalanceSummary(
         tenantId,
         filter
@@ -39,6 +39,7 @@ export class CustomerBalanceSummaryTableInjectable {
         rows: tableRows.tableRows(),
       },
       query,
+      meta,
     };
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsApplication.ts b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsApplication.ts
index 498e3eb66..2b0ffc959 100644
--- a/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsApplication.ts
+++ b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsApplication.ts
@@ -2,7 +2,6 @@ import { Inject, Service } from 'typedi';
 import {
   ISalesByItemsReportQuery,
   ISalesByItemsSheet,
-  ISalesByItemsSheetData,
   ISalesByItemsTable,
 } from '@/interfaces';
 import { SalesByItemsReportService } from './SalesByItemsService';
diff --git a/packages/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersService.ts b/packages/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersService.ts
index 3fbf8cf06..ed4483d61 100644
--- a/packages/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersService.ts
+++ b/packages/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersService.ts
@@ -163,6 +163,7 @@ export class TransactionsByCustomersSheet
     return {
       data: reportInstance.reportData(),
       query: filter,
+      meta: {},
     };
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersTableInjectable.ts b/packages/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersTableInjectable.ts
index fb1c61311..2f2aa0277 100644
--- a/packages/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersTableInjectable.ts
+++ b/packages/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersTableInjectable.ts
@@ -39,6 +39,7 @@ export class TransactionsByCustomersTableInjectable {
         columns: table.tableColumns(),
       },
       query: customersTransactions.query,
+      meta: customersTransactions.meta
     };
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorInjectable.ts b/packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorInjectable.ts
index a24041929..6738979a1 100644
--- a/packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorInjectable.ts
+++ b/packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorInjectable.ts
@@ -168,6 +168,7 @@ export class TransactionsByVendorsInjectable
     return {
       data: reportInstance.reportData(),
       query: filter,
+      meta: {},
     };
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorTableInjectable.ts b/packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorTableInjectable.ts
index 5b42b88e7..5c5243059 100644
--- a/packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorTableInjectable.ts
+++ b/packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorTableInjectable.ts
@@ -39,6 +39,7 @@ export class TransactionsByVendorTableInjectable {
         columns: table.tableColumns(),
       },
       query,
+      meta: sheet.meta,
     };
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryService.ts b/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryService.ts
index b1a361b87..dfc529ab3 100644
--- a/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryService.ts
+++ b/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryService.ts
@@ -101,6 +101,7 @@ export class VendorBalanceSummaryService
     return {
       data: reportInstance.reportData(),
       query: filter,
+      meta: {}
     };
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryTableInjectable.ts b/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryTableInjectable.ts
index aec97e6f1..19f0c889c 100644
--- a/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryTableInjectable.ts
+++ b/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryTableInjectable.ts
@@ -27,10 +27,11 @@ export class VendorBalanceSummaryTableInjectable {
   ): Promise<IVendorBalanceSummaryTable> {
     const i18n = this.tenancy.i18n(tenantId);
 
-    const { data } = await this.vendorBalanceSummarySheet.vendorBalanceSummary(
-      tenantId,
-      query
-    );
+    const { data, meta } =
+      await this.vendorBalanceSummarySheet.vendorBalanceSummary(
+        tenantId,
+        query
+      );
     const table = new VendorBalanceSummaryTable(data, query, i18n);
 
     return {
@@ -39,6 +40,7 @@ export class VendorBalanceSummaryTableInjectable {
         rows: table.tableRows(),
       },
       query,
+      meta,
     };
   }
 }

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

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

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

From 7690789031660df0bf340009f1053c005f922e3a Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Sat, 17 Feb 2024 00:21:48 +0200
Subject: [PATCH 31/39] feat(server): balance sheet meta

---
 .../views/modules/financial-sheet.pug         |  2 +-
 .../FinancialStatements/GeneralLedger.ts      |  6 +--
 .../server/src/interfaces/BalanceSheet.ts     |  7 +--
 .../src/interfaces/FinancialStatements.ts     | 10 ++++-
 .../BalanceSheet/BalanceSheetInjectable.ts    | 43 ++++---------------
 .../BalanceSheet/BalanceSheetMeta.ts          | 23 ++++++++++
 .../BalanceSheet/BalanceSheetPdfInjectable.ts |  3 +-
 .../FinancialStatements/FinancialSheetMeta.ts | 34 +++++++++++++++
 .../FinancialStatements/TableSheetPdf.ts      |  8 +++-
 .../src/system/models/TenantMetadata.ts       |  1 +
 10 files changed, 89 insertions(+), 48 deletions(-)
 create mode 100644 packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetMeta.ts
 create mode 100644 packages/server/src/services/FinancialStatements/FinancialSheetMeta.ts

diff --git a/packages/server/resources/views/modules/financial-sheet.pug b/packages/server/resources/views/modules/financial-sheet.pug
index 019c74626..7efb237ea 100644
--- a/packages/server/resources/views/modules/financial-sheet.pug
+++ b/packages/server/resources/views/modules/financial-sheet.pug
@@ -18,4 +18,4 @@ block content
         each row in table.rows
           tr
             each cell in row.cells 
-              td= cell.value
\ No newline at end of file
+              td!= cell.value
\ No newline at end of file
diff --git a/packages/server/src/api/controllers/FinancialStatements/GeneralLedger.ts b/packages/server/src/api/controllers/FinancialStatements/GeneralLedger.ts
index 4c3aec4a9..188178a01 100644
--- a/packages/server/src/api/controllers/FinancialStatements/GeneralLedger.ts
+++ b/packages/server/src/api/controllers/FinancialStatements/GeneralLedger.ts
@@ -16,7 +16,7 @@ export default class GeneralLedgerReportController extends BaseFinancialReportCo
   /**
    * Router constructor.
    */
-  router() {
+  public router() {
     const router = Router();
 
     router.get(
@@ -32,7 +32,7 @@ export default class GeneralLedgerReportController extends BaseFinancialReportCo
   /**
    * Validation schema.
    */
-  get validationSchema(): ValidationChain[] {
+  private get validationSchema(): ValidationChain[] {
     return [
       query('from_date').optional().isISO8601(),
       query('to_date').optional().isISO8601(),
@@ -61,7 +61,7 @@ export default class GeneralLedgerReportController extends BaseFinancialReportCo
    * @param {Request} req -
    * @param {Response} res -
    */
-  async generalLedger(req: Request, res: Response, next: NextFunction) {
+  private async generalLedger(req: Request, res: Response, next: NextFunction) {
     const { tenantId } = req;
     const filter = this.matchedQueryData(req);
     const accept = this.accepts(req);
diff --git a/packages/server/src/interfaces/BalanceSheet.ts b/packages/server/src/interfaces/BalanceSheet.ts
index a74e48ee8..45e514287 100644
--- a/packages/server/src/interfaces/BalanceSheet.ts
+++ b/packages/server/src/interfaces/BalanceSheet.ts
@@ -2,6 +2,7 @@ import {
   INumberFormatQuery,
   IFormatNumberSettings,
   IFinancialSheetBranchesQuery,
+  IFinancialSheetCommonMeta,
 } from './FinancialStatements';
 import { IFinancialTable } from './Table';
 
@@ -63,11 +64,7 @@ export interface IBalanceSheetQuery extends IFinancialSheetBranchesQuery {
 }
 
 // Balance sheet meta.
-export interface IBalanceSheetMeta {
-  isCostComputeRunning: boolean;
-  organizationName: string;
-  baseCurrency: string;
-}
+export interface IBalanceSheetMeta extends IFinancialSheetCommonMeta {}
 
 export interface IBalanceSheetFormatNumberSettings
   extends IFormatNumberSettings {
diff --git a/packages/server/src/interfaces/FinancialStatements.ts b/packages/server/src/interfaces/FinancialStatements.ts
index fb1d77452..9050ea6d4 100644
--- a/packages/server/src/interfaces/FinancialStatements.ts
+++ b/packages/server/src/interfaces/FinancialStatements.ts
@@ -42,4 +42,12 @@ export enum ReportsAction {
 
 export interface IFinancialSheetBranchesQuery {
   branchesIds?: number[];
-}
\ No newline at end of file
+}
+
+export interface IFinancialSheetCommonMeta {
+  organizationName: string;
+  baseCurrency: string;
+  dateFormat: string;
+  isCostComputeRunning: boolean;
+  sheetName: string;
+}
diff --git a/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetInjectable.ts b/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetInjectable.ts
index 02e136ca1..52edfe4ef 100644
--- a/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetInjectable.ts
+++ b/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetInjectable.ts
@@ -4,15 +4,12 @@ import {
   IBalanceSheetStatementService,
   IBalanceSheetQuery,
   IBalanceSheetStatement,
-  IBalanceSheetMeta,
 } from '@/interfaces';
 import TenancyService from '@/services/Tenancy/TenancyService';
-import Journal from '@/services/Accounting/JournalPoster';
 import BalanceSheetStatement from './BalanceSheet';
-import InventoryService from '@/services/Inventory/Inventory';
-import { parseBoolean } from 'utils';
 import { Tenant } from '@/system/models';
 import BalanceSheetRepository from './BalanceSheetRepository';
+import { BalanceSheetMetaInjectable } from './BalanceSheetMeta';
 
 @Service()
 export default class BalanceSheetStatementService
@@ -22,7 +19,7 @@ export default class BalanceSheetStatementService
   private tenancy: TenancyService;
 
   @Inject()
-  private inventoryService: InventoryService;
+  private balanceSheetMeta: BalanceSheetMetaInjectable;
 
   /**
    * Defaults balance sheet filter query.
@@ -62,33 +59,6 @@ export default class BalanceSheetStatementService
     };
   }
 
-  /**
-   * Retrieve the balance sheet meta.
-   * @param {number} tenantId -
-   * @returns {IBalanceSheetMeta}
-   */
-  private reportMetadata(tenantId: number): IBalanceSheetMeta {
-    const settings = this.tenancy.settings(tenantId);
-
-    const isCostComputeRunning =
-      this.inventoryService.isItemsCostComputeRunning(tenantId);
-
-    const organizationName = settings.get({
-      group: 'organization',
-      key: 'name',
-    });
-    const baseCurrency = settings.get({
-      group: 'organization',
-      key: 'base_currency',
-    });
-
-    return {
-      isCostComputeRunning: parseBoolean(isCostComputeRunning, false),
-      organizationName,
-      baseCurrency,
-    };
-  }
-
   /**
    * Retrieve balance sheet statement.
    * @param {number} tenantId
@@ -122,12 +92,15 @@ export default class BalanceSheetStatementService
       i18n
     );
     // Balance sheet data.
-    const balanceSheetData = balanceSheetInstanace.reportData();
+    const data = balanceSheetInstanace.reportData();
+
+    // Balance sheet meta.
+    const meta = await this.balanceSheetMeta.meta(tenantId);
 
     return {
-      data: balanceSheetData,
       query: filter,
-      meta: this.reportMetadata(tenantId),
+      data,
+      meta,
     };
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetMeta.ts b/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetMeta.ts
new file mode 100644
index 000000000..370a8b605
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetMeta.ts
@@ -0,0 +1,23 @@
+import { Inject, Service } from 'typedi';
+import { FinancialSheetMeta } from '../FinancialSheetMeta';
+import { IBalanceSheetMeta } from '@/interfaces';
+
+@Service()
+export class BalanceSheetMetaInjectable {
+  @Inject()
+  private financialSheetMeta: FinancialSheetMeta;
+
+  /**
+   * Retrieve the balance sheet meta.
+   * @param {number} tenantId -
+   * @returns {IBalanceSheetMeta}
+   */
+  public async meta(tenantId: number): Promise<IBalanceSheetMeta> {
+    const commonMeta = await this.financialSheetMeta.meta(tenantId);
+
+    return {
+      ...commonMeta,
+      sheetName: 'Balance Sheet',
+    };
+  }
+}
diff --git a/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetPdfInjectable.ts b/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetPdfInjectable.ts
index 44fd991b3..691aacad2 100644
--- a/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetPdfInjectable.ts
+++ b/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetPdfInjectable.ts
@@ -22,12 +22,11 @@ export class BalanceSheetPdfInjectable {
     query: IBalanceSheetQuery
   ): Promise<Buffer> {
     const table = await this.balanceSheetTable.table(tenantId, query);
-    const sheetName = 'Balance Sheet';
 
     return this.tableSheetPdf.convertToPdf(
       tenantId,
       table.table,
-      sheetName,
+      table.meta.sheetName,
       table.meta.baseCurrency
     );
   }
diff --git a/packages/server/src/services/FinancialStatements/FinancialSheetMeta.ts b/packages/server/src/services/FinancialStatements/FinancialSheetMeta.ts
new file mode 100644
index 000000000..130f3caaa
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/FinancialSheetMeta.ts
@@ -0,0 +1,34 @@
+import { TenantMetadata } from '@/system/models';
+import { Inject, Service } from 'typedi';
+import InventoryService from '../Inventory/Inventory';
+import { IFinancialSheetCommonMeta } from '@/interfaces';
+
+@Service()
+export class FinancialSheetMeta {
+  @Inject()
+  private inventoryService: InventoryService;
+
+  /**
+   * Retrieves the common meta data of the financial sheet.
+   * @param {number} tenantId
+   * @returns {Promise<IFinancialSheetCommonMeta>}
+   */
+  async meta(tenantId: number): Promise<IFinancialSheetCommonMeta> {
+    const tenantMetadata = await TenantMetadata.query().findOne({ tenantId });
+
+    const organizationName = tenantMetadata.name;
+    const baseCurrency = tenantMetadata.baseCurrency;
+    const dateFormat = tenantMetadata.dateFormat;
+
+    const isCostComputeRunning =
+      this.inventoryService.isItemsCostComputeRunning(tenantId);
+
+    return {
+      organizationName,
+      baseCurrency,
+      dateFormat,
+      isCostComputeRunning,
+      sheetName: '',
+    };
+  }
+}
diff --git a/packages/server/src/services/FinancialStatements/TableSheetPdf.ts b/packages/server/src/services/FinancialStatements/TableSheetPdf.ts
index 16fd0f6f9..edf216020 100644
--- a/packages/server/src/services/FinancialStatements/TableSheetPdf.ts
+++ b/packages/server/src/services/FinancialStatements/TableSheetPdf.ts
@@ -57,6 +57,12 @@ export class TableSheetPdf {
    * @returns {ITableRow[]}
    */
   private tablePdfRows = (rows: ITableRow[]): ITableRow[] => {
-    return R.compose(FinancialTableStructure.flatNestedTree)(rows);
+    const curriedFlatNestedTree = R.curry(
+      FinancialTableStructure.flatNestedTree
+    );
+    const flatNestedTree = curriedFlatNestedTree(R.__, {
+      nestedPrefix: '<span style="padding-left: 15px;"></span>',
+    });
+    return R.compose(flatNestedTree)(rows);
   };
 }
diff --git a/packages/server/src/system/models/TenantMetadata.ts b/packages/server/src/system/models/TenantMetadata.ts
index 7040a6a68..98953dd43 100644
--- a/packages/server/src/system/models/TenantMetadata.ts
+++ b/packages/server/src/system/models/TenantMetadata.ts
@@ -2,6 +2,7 @@ import BaseModel from 'models/Model';
 
 export default class TenantMetadata extends BaseModel {
   baseCurrency: string;
+  name: string;
 
   /**
    * Table name.

From d2e6cc0036cae1102fd9a96b41cd3a2d9b18b439 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Sat, 17 Feb 2024 13:17:18 +0200
Subject: [PATCH 32/39] feat(server): financial sheet meta

---
 .../server/src/interfaces/BalanceSheet.ts     |  6 ++-
 packages/server/src/interfaces/CashFlow.ts    | 17 ++++---
 .../server/src/interfaces/ProfitLossSheet.ts  |  9 ++--
 .../src/interfaces/TrialBalanceSheet.ts       | 13 +++--
 .../BalanceSheet/BalanceSheetInjectable.ts    |  3 +-
 .../BalanceSheet/BalanceSheetMeta.ts          | 14 +++++-
 .../BalanceSheet/BalanceSheetPdfInjectable.ts |  2 +-
 .../CashFlow/CashFlowService.ts               | 37 ++++----------
 .../CashFlow/CashflowSheetMeta.ts             | 33 +++++++++++++
 .../CashFlow/CashflowTablePdfInjectable.ts    |  2 +-
 .../ProfitLossSheet/ProfitLossSheetMeta.ts    | 35 ++++++++++++++
 .../ProfitLossSheet/ProfitLossSheetService.ts | 41 ++++------------
 .../ProfitLossTablePdfInjectable.ts           |  5 +-
 .../TrialBalanceSheetInjectable.ts            | 48 ++++---------------
 .../TrialBalanceSheetMeta.ts                  | 37 ++++++++++++++
 .../TrialBalanceSheetPdfInjectsable.ts        |  9 ++--
 16 files changed, 181 insertions(+), 130 deletions(-)
 create mode 100644 packages/server/src/services/FinancialStatements/CashFlow/CashflowSheetMeta.ts
 create mode 100644 packages/server/src/services/FinancialStatements/ProfitLossSheet/ProfitLossSheetMeta.ts
 create mode 100644 packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetMeta.ts

diff --git a/packages/server/src/interfaces/BalanceSheet.ts b/packages/server/src/interfaces/BalanceSheet.ts
index 45e514287..ddc36a53a 100644
--- a/packages/server/src/interfaces/BalanceSheet.ts
+++ b/packages/server/src/interfaces/BalanceSheet.ts
@@ -64,7 +64,11 @@ export interface IBalanceSheetQuery extends IFinancialSheetBranchesQuery {
 }
 
 // Balance sheet meta.
-export interface IBalanceSheetMeta extends IFinancialSheetCommonMeta {}
+export interface IBalanceSheetMeta extends IFinancialSheetCommonMeta {
+  formattedFromDate: string;
+  formattedToDate: string;
+  formattedDateRange: string;
+}
 
 export interface IBalanceSheetFormatNumberSettings
   extends IFormatNumberSettings {
diff --git a/packages/server/src/interfaces/CashFlow.ts b/packages/server/src/interfaces/CashFlow.ts
index 1a4a1a6a1..40cd50896 100644
--- a/packages/server/src/interfaces/CashFlow.ts
+++ b/packages/server/src/interfaces/CashFlow.ts
@@ -1,4 +1,7 @@
-import { INumberFormatQuery } from './FinancialStatements';
+import {
+  IFinancialSheetCommonMeta,
+  INumberFormatQuery,
+} from './FinancialStatements';
 import { IAccount } from './Account';
 import { ILedger } from './Ledger';
 import { IFinancialTable, ITableRow } from './Table';
@@ -79,8 +82,8 @@ export interface ICashFlowStatementAggregateSection
 
 export interface ICashFlowCashBeginningNode
   extends ICashFlowStatementCommonSection {
-    sectionType: ICashFlowStatementSectionType.CASH_AT_BEGINNING;
-  }
+  sectionType: ICashFlowStatementSectionType.CASH_AT_BEGINNING;
+}
 
 export type ICashFlowStatementSection =
   | ICashFlowStatementAccountSection
@@ -89,10 +92,10 @@ export type ICashFlowStatementSection =
   | ICashFlowStatementCommonSection;
 
 export interface ICashFlowStatementColumn {}
-export interface ICashFlowStatementMeta {
-  isCostComputeRunning: boolean;
-  organizationName: string;
-  baseCurrency: string;
+export interface ICashFlowStatementMeta extends IFinancialSheetCommonMeta {
+  formattedToDate: string;
+  formattedFromDate: string;
+  formattedDateRange: string;
 }
 
 export interface ICashFlowStatementDOO {
diff --git a/packages/server/src/interfaces/ProfitLossSheet.ts b/packages/server/src/interfaces/ProfitLossSheet.ts
index 944a0a950..64b787667 100644
--- a/packages/server/src/interfaces/ProfitLossSheet.ts
+++ b/packages/server/src/interfaces/ProfitLossSheet.ts
@@ -1,5 +1,6 @@
 import {
   IFinancialSheetBranchesQuery,
+  IFinancialSheetCommonMeta,
   INumberFormatQuery,
 } from './FinancialStatements';
 import { IFinancialTable } from './Table';
@@ -134,10 +135,10 @@ export type IProfitLossSheetNode =
   | IProfitLossSheetEquationNode
   | IProfitLossSheetAccountNode;
 
-export interface IProfitLossSheetMeta {
-  isCostComputeRunning: boolean;
-  organizationName: string;
-  baseCurrency: string;
+export interface IProfitLossSheetMeta extends IFinancialSheetCommonMeta{
+  formattedDateRange: string;
+  formattedFromDate: string;
+  formattedToDate: string;
 }
 
 // ------------------------------------------------
diff --git a/packages/server/src/interfaces/TrialBalanceSheet.ts b/packages/server/src/interfaces/TrialBalanceSheet.ts
index f423503ae..b6cd79736 100644
--- a/packages/server/src/interfaces/TrialBalanceSheet.ts
+++ b/packages/server/src/interfaces/TrialBalanceSheet.ts
@@ -1,4 +1,7 @@
-import { INumberFormatQuery } from './FinancialStatements';
+import {
+  IFinancialSheetCommonMeta,
+  INumberFormatQuery,
+} from './FinancialStatements';
 import { IFinancialTable } from './Table';
 
 export interface ITrialBalanceSheetQuery {
@@ -24,10 +27,10 @@ export interface ITrialBalanceTotal {
   formattedBalance: string;
 }
 
-export interface ITrialBalanceSheetMeta {
-  isCostComputeRunning: boolean;
-  organizationName: string;
-  baseCurrency: string;
+export interface ITrialBalanceSheetMeta extends IFinancialSheetCommonMeta {
+  formattedFromDate: string;
+  formattedToDate: string;
+  formattedDateRange: string;
 }
 
 export interface ITrialBalanceAccount extends ITrialBalanceTotal {
diff --git a/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetInjectable.ts b/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetInjectable.ts
index 52edfe4ef..5e171110b 100644
--- a/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetInjectable.ts
+++ b/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetInjectable.ts
@@ -82,6 +82,7 @@ export default class BalanceSheetStatementService
     const models = this.tenancy.models(tenantId);
     const balanceSheetRepo = new BalanceSheetRepository(models, filter);
 
+    // Loads all resources.
     await balanceSheetRepo.asyncInitialize();
 
     // Balance sheet report instance.
@@ -95,7 +96,7 @@ export default class BalanceSheetStatementService
     const data = balanceSheetInstanace.reportData();
 
     // Balance sheet meta.
-    const meta = await this.balanceSheetMeta.meta(tenantId);
+    const meta = await this.balanceSheetMeta.meta(tenantId, filter);
 
     return {
       query: filter,
diff --git a/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetMeta.ts b/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetMeta.ts
index 370a8b605..91ecb068c 100644
--- a/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetMeta.ts
+++ b/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetMeta.ts
@@ -1,6 +1,7 @@
 import { Inject, Service } from 'typedi';
 import { FinancialSheetMeta } from '../FinancialSheetMeta';
-import { IBalanceSheetMeta } from '@/interfaces';
+import { IBalanceSheetMeta, IBalanceSheetQuery } from '@/interfaces';
+import moment from 'moment';
 
 @Service()
 export class BalanceSheetMetaInjectable {
@@ -12,12 +13,21 @@ export class BalanceSheetMetaInjectable {
    * @param {number} tenantId -
    * @returns {IBalanceSheetMeta}
    */
-  public async meta(tenantId: number): Promise<IBalanceSheetMeta> {
+  public async meta(
+    tenantId: number,
+    query: IBalanceSheetQuery
+  ): Promise<IBalanceSheetMeta> {
     const commonMeta = await this.financialSheetMeta.meta(tenantId);
+    const formattedToDate = moment(query.toDate).format('YYYY/MM/DD');
+    const formattedFromDate = moment(query.fromDate).format('YYYY/MM/DD');
+    const formattedDateRange = `From ${formattedFromDate} | To ${formattedToDate}`;
 
     return {
       ...commonMeta,
       sheetName: 'Balance Sheet',
+      formattedFromDate,
+      formattedToDate,
+      formattedDateRange
     };
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetPdfInjectable.ts b/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetPdfInjectable.ts
index 691aacad2..2f776c224 100644
--- a/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetPdfInjectable.ts
+++ b/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetPdfInjectable.ts
@@ -27,7 +27,7 @@ export class BalanceSheetPdfInjectable {
       tenantId,
       table.table,
       table.meta.sheetName,
-      table.meta.baseCurrency
+      table.meta.formattedDateRange
     );
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/CashFlow/CashFlowService.ts b/packages/server/src/services/FinancialStatements/CashFlow/CashFlowService.ts
index 09fdf91ca..201a31be4 100644
--- a/packages/server/src/services/FinancialStatements/CashFlow/CashFlowService.ts
+++ b/packages/server/src/services/FinancialStatements/CashFlow/CashFlowService.ts
@@ -8,7 +8,7 @@ import {
   ICashFlowStatementQuery,
   ICashFlowStatementDOO,
   IAccountTransaction,
-  ICashFlowStatementMeta
+  ICashFlowStatementMeta,
 } from '@/interfaces';
 import CashFlowStatement from './CashFlow';
 import Ledger from '@/services/Accounting/Ledger';
@@ -16,6 +16,7 @@ import CashFlowRepository from './CashFlowRepository';
 import InventoryService from '@/services/Inventory/Inventory';
 import { parseBoolean } from 'utils';
 import { Tenant } from '@/system/models';
+import { CashflowSheetMeta } from './CashflowSheetMeta';
 
 @Service()
 export default class CashFlowStatementService
@@ -31,6 +32,9 @@ export default class CashFlowStatementService
   @Inject()
   inventoryService: InventoryService;
 
+  @Inject()
+  private cashflowSheetMeta: CashflowSheetMeta;
+
   /**
    * Defaults balance sheet filter query.
    * @return {IBalanceSheetQuery}
@@ -138,38 +142,13 @@ export default class CashFlowStatementService
       tenant.metadata.baseCurrency,
       i18n
     );
+    // Retrieve the cashflow sheet meta.
+    const meta = await this.cashflowSheetMeta.meta(tenantId, filter);
 
     return {
       data: cashFlowInstance.reportData(),
       query: filter,
-      meta: this.reportMetadata(tenantId),
+      meta,
     };
   }
-
-    /**
-   * Retrieve the balance sheet meta.
-   * @param {number} tenantId - 
-   * @returns {ICashFlowStatementMeta}
-   */
-     private reportMetadata(tenantId: number): ICashFlowStatementMeta {
-      const settings = this.tenancy.settings(tenantId);
-  
-      const isCostComputeRunning = this.inventoryService
-        .isItemsCostComputeRunning(tenantId);
-  
-      const organizationName = settings.get({
-        group: 'organization',
-        key: 'name',
-      });
-      const baseCurrency = settings.get({
-        group: 'organization',
-        key: 'base_currency',
-      });
-  
-      return {
-        isCostComputeRunning: parseBoolean(isCostComputeRunning, false),
-        organizationName,
-        baseCurrency
-      };
-    }
 }
diff --git a/packages/server/src/services/FinancialStatements/CashFlow/CashflowSheetMeta.ts b/packages/server/src/services/FinancialStatements/CashFlow/CashflowSheetMeta.ts
new file mode 100644
index 000000000..e1ed4a0d5
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/CashFlow/CashflowSheetMeta.ts
@@ -0,0 +1,33 @@
+import { Inject, Service } from 'typedi';
+import moment from 'moment';
+import { ICashFlowStatementMeta, ICashFlowStatementQuery } from '@/interfaces';
+import { FinancialSheetMeta } from '../FinancialSheetMeta';
+
+@Service()
+export class CashflowSheetMeta {
+  @Inject()
+  private financialSheetMeta: FinancialSheetMeta;
+
+  /**
+   * CAshflow sheet meta.
+   * @param {number} tenantId
+   * @param {ICashFlowStatementQuery} query
+   * @returns {Promise<ICashFlowStatementMeta>}
+   */
+  public async meta(
+    tenantId: number,
+    query: ICashFlowStatementQuery
+  ): Promise<ICashFlowStatementMeta> {
+    const meta = await this.financialSheetMeta.meta(tenantId);
+    const formattedToDate = moment(query.toDate).format('YYYY/MM/DD');
+    const formattedFromDate = moment(query.fromDate).format('YYYY/MM/DD');
+    const formattedDateRange = `From ${formattedFromDate} | To ${formattedToDate}`;
+
+    return {
+      ...meta,
+      formattedToDate,
+      formattedFromDate,
+      formattedDateRange,
+    };
+  }
+}
diff --git a/packages/server/src/services/FinancialStatements/CashFlow/CashflowTablePdfInjectable.ts b/packages/server/src/services/FinancialStatements/CashFlow/CashflowTablePdfInjectable.ts
index eaab60db4..8455028f9 100644
--- a/packages/server/src/services/FinancialStatements/CashFlow/CashflowTablePdfInjectable.ts
+++ b/packages/server/src/services/FinancialStatements/CashFlow/CashflowTablePdfInjectable.ts
@@ -27,7 +27,7 @@ export class CashflowTablePdfInjectable {
       tenantId,
       table.table,
       sheetName,
-      table.meta.baseCurrency
+      table.meta.formattedDateRange
     );
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/ProfitLossSheet/ProfitLossSheetMeta.ts b/packages/server/src/services/FinancialStatements/ProfitLossSheet/ProfitLossSheetMeta.ts
new file mode 100644
index 000000000..c278420f5
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/ProfitLossSheet/ProfitLossSheetMeta.ts
@@ -0,0 +1,35 @@
+import moment from 'moment';
+import { Inject, Service } from 'typedi';
+import { FinancialSheetMeta } from '../FinancialSheetMeta';
+import { ICashFlowStatementMeta, ICashFlowStatementQuery } from '@/interfaces';
+
+@Service()
+export class ProfitLossSheetMeta {
+  @Inject()
+  private financialSheetMeta: FinancialSheetMeta;
+
+  /**
+   * Retrieve the P/L sheet meta.
+   * @param {number} tenantId -
+   * @returns {IBalanceSheetMeta}
+   */
+  public async meta(
+    tenantId: number,
+    query: ICashFlowStatementQuery
+  ): Promise<ICashFlowStatementMeta> {
+    const commonMeta = await this.financialSheetMeta.meta(tenantId);
+    const formattedToDate = moment(query.toDate).format('YYYY/MM/DD');
+    const formattedFromDate = moment(query.fromDate).format('YYYY/MM/DD');
+    const formattedDateRange = `From ${formattedFromDate} | To ${formattedToDate}`;
+
+    const sheetName = 'Cashflow Statement';
+
+    return {
+      ...commonMeta,
+      sheetName,
+      formattedFromDate,
+      formattedToDate,
+      formattedDateRange,
+    };
+  }
+}
diff --git a/packages/server/src/services/FinancialStatements/ProfitLossSheet/ProfitLossSheetService.ts b/packages/server/src/services/FinancialStatements/ProfitLossSheet/ProfitLossSheetService.ts
index 20cf9a170..f3b24e7a6 100644
--- a/packages/server/src/services/FinancialStatements/ProfitLossSheet/ProfitLossSheetService.ts
+++ b/packages/server/src/services/FinancialStatements/ProfitLossSheet/ProfitLossSheetService.ts
@@ -6,11 +6,10 @@ import {
 } from '@/interfaces';
 import ProfitLossSheet from './ProfitLossSheet';
 import TenancyService from '@/services/Tenancy/TenancyService';
-import InventoryService from '@/services/Inventory/Inventory';
-import { parseBoolean } from 'utils';
 import { Tenant } from '@/system/models';
 import { mergeQueryWithDefaults } from './utils';
 import { ProfitLossSheetRepository } from './ProfitLossSheetRepository';
+import { ProfitLossSheetMeta } from './ProfitLossSheetMeta';
 
 // Profit/Loss sheet service.
 @Service()
@@ -19,7 +18,7 @@ export default class ProfitLossSheetService {
   private tenancy: TenancyService;
 
   @Inject()
-  private inventoryService: InventoryService;
+  private profitLossSheetMeta: ProfitLossSheetMeta;
 
   /**
    * Retrieve profit/loss sheet statement.
@@ -47,6 +46,7 @@ export default class ProfitLossSheetService {
 
     const profitLossRepo = new ProfitLossSheetRepository(models, filter);
 
+    // Loads the profit/loss sheet data.
     await profitLossRepo.asyncInitialize();
 
     // Profit/Loss report instance.
@@ -57,38 +57,15 @@ export default class ProfitLossSheetService {
       i18n
     );
     // Profit/loss report data and collumns.
-    const profitLossData = profitLossInstance.reportData();
+    const data = profitLossInstance.reportData();
+
+    // Retrieve the profit/loss sheet meta.
+    const meta = await this.profitLossSheetMeta.meta(tenantId, filter);
 
     return {
-      data: profitLossData,
       query: filter,
-      meta: this.reportMetadata(tenantId),
+      data,
+      meta,
     };
   };
-
-  /**
-   * Retrieve the trial balance sheet meta.
-   * @param {number} tenantId - Tenant id.
-   * @returns {ITrialBalanceSheetMeta}
-   */
-  private reportMetadata(tenantId: number): IProfitLossSheetMeta {
-    const settings = this.tenancy.settings(tenantId);
-
-    const isCostComputeRunning =
-      this.inventoryService.isItemsCostComputeRunning(tenantId);
-    const organizationName = settings.get({
-      group: 'organization',
-      key: 'name',
-    });
-    const baseCurrency = settings.get({
-      group: 'organization',
-      key: 'base_currency',
-    });
-
-    return {
-      isCostComputeRunning: parseBoolean(isCostComputeRunning, false),
-      organizationName,
-      baseCurrency,
-    };
-  }
 }
diff --git a/packages/server/src/services/FinancialStatements/ProfitLossSheet/ProfitLossTablePdfInjectable.ts b/packages/server/src/services/FinancialStatements/ProfitLossSheet/ProfitLossTablePdfInjectable.ts
index 24b720b1a..e6348fdf6 100644
--- a/packages/server/src/services/FinancialStatements/ProfitLossSheet/ProfitLossTablePdfInjectable.ts
+++ b/packages/server/src/services/FinancialStatements/ProfitLossSheet/ProfitLossTablePdfInjectable.ts
@@ -22,13 +22,12 @@ export class ProfitLossTablePdfInjectable {
     query: IProfitLossSheetQuery
   ): Promise<Buffer> {
     const table = await this.profitLossTable.table(tenantId, query);
-    const sheetName = 'Profit & Loss Sheet';
 
     return this.tableSheetPdf.convertToPdf(
       tenantId,
       table.table,
-      sheetName,
-      table.meta.baseCurrency
+      table.meta.sheetName,
+      table.meta.formattedDateRange
     );
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetInjectable.ts b/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetInjectable.ts
index bc880ec99..df498241b 100644
--- a/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetInjectable.ts
+++ b/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetInjectable.ts
@@ -1,28 +1,20 @@
 import { Service, Inject } from 'typedi';
 import moment from 'moment';
 import TenancyService from '@/services/Tenancy/TenancyService';
-import {
-  ITrialBalanceSheetMeta,
-  ITrialBalanceSheetQuery,
-  ITrialBalanceStatement,
-} from '@/interfaces';
+import { ITrialBalanceSheetQuery, ITrialBalanceStatement } from '@/interfaces';
 import TrialBalanceSheet from './TrialBalanceSheet';
 import FinancialSheet from '../FinancialSheet';
-import InventoryService from '@/services/Inventory/Inventory';
-import { parseBoolean } from 'utils';
 import { Tenant } from '@/system/models';
 import { TrialBalanceSheetRepository } from './TrialBalanceSheetRepository';
+import { TrialBalanceSheetMeta } from './TrialBalanceSheetMeta';
 
 @Service()
 export default class TrialBalanceSheetService extends FinancialSheet {
   @Inject()
-  tenancy: TenancyService;
+  private tenancy: TenancyService;
 
   @Inject()
-  inventoryService: InventoryService;
-
-  @Inject('logger')
-  logger: any;
+  private trialBalanceSheetMetaService: TrialBalanceSheetMeta;
 
   /**
    * Defaults trial balance sheet filter query.
@@ -47,32 +39,6 @@ export default class TrialBalanceSheetService extends FinancialSheet {
     };
   }
 
-  /**
-   * Retrieve the trial balance sheet meta.
-   * @param {number} tenantId - Tenant id.
-   * @returns {ITrialBalanceSheetMeta}
-   */
-  private reportMetadata(tenantId: number): ITrialBalanceSheetMeta {
-    const settings = this.tenancy.settings(tenantId);
-
-    const isCostComputeRunning =
-      this.inventoryService.isItemsCostComputeRunning(tenantId);
-    const organizationName = settings.get({
-      group: 'organization',
-      key: 'name',
-    });
-    const baseCurrency = settings.get({
-      group: 'organization',
-      key: 'base_currency',
-    });
-
-    return {
-      isCostComputeRunning: parseBoolean(isCostComputeRunning, false),
-      organizationName,
-      baseCurrency,
-    };
-  }
-
   /**
    * Retrieve trial balance sheet statement.
    * @param {number} tenantId
@@ -99,6 +65,7 @@ export default class TrialBalanceSheetService extends FinancialSheet {
       repos,
       filter
     );
+    // Loads the resources.
     await trialBalanceSheetRepos.asyncInitialize();
 
     // Trial balance report instance.
@@ -111,10 +78,13 @@ export default class TrialBalanceSheetService extends FinancialSheet {
     // Trial balance sheet data.
     const trialBalanceSheetData = trialBalanceInstance.reportData();
 
+    // Trial balance sheet meta.
+    const meta = await this.trialBalanceSheetMetaService.meta(tenantId, filter);
+
     return {
       data: trialBalanceSheetData,
       query: filter,
-      meta: this.reportMetadata(tenantId),
+      meta,
     };
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetMeta.ts b/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetMeta.ts
new file mode 100644
index 000000000..7561e2b66
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetMeta.ts
@@ -0,0 +1,37 @@
+import { Inject, Service } from 'typedi';
+import moment from 'moment';
+import { ITrialBalanceSheetMeta, ITrialBalanceSheetQuery } from '@/interfaces';
+import { FinancialSheetMeta } from '../FinancialSheetMeta';
+
+@Service()
+export class TrialBalanceSheetMeta {
+  @Inject()
+  private financialSheetMeta: FinancialSheetMeta;
+
+  /**
+   * Retrieves the trial balance sheet meta.
+   * @param {number} tenantId
+   * @param {ITrialBalanceSheetQuery} query
+   * @returns {Promise<ITrialBalanceSheetMeta>}
+   */
+  public async meta(
+    tenantId: number,
+    query: ITrialBalanceSheetQuery
+  ): Promise<ITrialBalanceSheetMeta> {
+    const commonMeta = await this.financialSheetMeta.meta(tenantId);
+
+    const formattedFromDate = moment(query.fromDate).format('YYYY/MM/DD');
+    const formattedToDate = moment(query.toDate).format('YYYY/MM/DD');
+    const formattedDateRange = `From ${formattedFromDate} to ${formattedToDate}`;
+
+    const sheetName = 'Trial Balance Sheet';
+
+    return {
+      ...commonMeta,
+      sheetName,
+      formattedFromDate,
+      formattedToDate,
+      formattedDateRange,
+    };
+  }
+}
diff --git a/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetPdfInjectsable.ts b/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetPdfInjectsable.ts
index 1907dd26d..89e1e73f3 100644
--- a/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetPdfInjectsable.ts
+++ b/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetPdfInjectsable.ts
@@ -12,9 +12,9 @@ export class TrialBalanceSheetPdfInjectable {
   private tableSheetPdf: TableSheetPdf;
 
   /**
-   * Converts the given balance sheet table to pdf.
+   * Converts the given trial balance sheet table to pdf.
    * @param {number} tenantId - Tenant ID.
-   * @param {IBalanceSheetQuery} query - Balance sheet query.
+   * @param {ITrialBalanceSheetQuery} query - Trial balance sheet query.
    * @returns {Promise<Buffer>}
    */
   public async pdf(
@@ -22,13 +22,12 @@ export class TrialBalanceSheetPdfInjectable {
     query: ITrialBalanceSheetQuery
   ): Promise<Buffer> {
     const table = await this.trialBalanceSheetTable.table(tenantId, query);
-    const sheetName = 'Trial Balance Sheet';
 
     return this.tableSheetPdf.convertToPdf(
       tenantId,
       table.table,
-      sheetName,
-      table.meta.baseCurrency
+      table.meta.sheetName,
+      table.meta.formattedDateRange
     );
   }
 }

From 06e78db49df386d0785a147b47f3809234d969ff Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Sat, 17 Feb 2024 23:36:29 +0200
Subject: [PATCH 33/39] feat(server): financial reports meta

---
 .../src/interfaces/APAgingSummaryReport.ts    |  18 ++-
 .../src/interfaces/ARAgingSummaryReport.ts    |   8 ++
 packages/server/src/interfaces/AgingReport.ts |  11 +-
 .../server/src/interfaces/BalanceSheet.ts     |   3 +-
 .../src/interfaces/CustomerBalanceSummary.ts  |   8 ++
 .../src/interfaces/FinancialStatements.ts     |   1 +
 .../src/interfaces/GeneralLedgerSheet.ts      | 124 +++++++++---------
 .../interfaces/IInventoryValuationSheet.ts    |  13 +-
 .../server/src/interfaces/InventoryDetails.ts |  13 +-
 .../server/src/interfaces/JournalReport.ts    |   9 +-
 .../src/interfaces/PurchasesByItemsSheet.ts   |  12 +-
 .../src/interfaces/SalesByItemsSheet.ts       |  14 +-
 .../interfaces/SalesTaxLiabilitySummary.ts    |   8 +-
 .../src/interfaces/TransactionsByCustomers.ts |   7 +
 .../src/interfaces/TransactionsByVendors.ts   |  11 +-
 .../src/interfaces/VendorBalanceSummary.ts    |  13 +-
 .../AgingSummary/APAgingSummaryMeta.ts        |  26 ++++
 .../APAgingSummaryPdfInjectable.ts            |   5 +-
 .../AgingSummary/APAgingSummaryService.ts     |  43 ++----
 .../AgingSummary/ARAgingSummaryMeta.ts        |  26 ++++
 .../ARAgingSummaryPdfInjectable.ts            |   5 +-
 .../AgingSummary/ARAgingSummaryService.ts     |  37 ++----
 .../ARAgingSummaryTableInjectable.ts          |   1 +
 .../AgingSummary/AgingSummaryMeta.ts          |  30 +++++
 .../BalanceSheet/BalanceSheetMeta.ts          |  10 +-
 .../BalanceSheet/BalanceSheetNetIncome.ts     |   1 +
 .../BalanceSheet/BalanceSheetTable.ts         |   4 +-
 .../CustomerBalanceSummaryApplication.ts      |   2 +-
 .../CustomerBalanceSummaryMeta.ts             |  35 +++++
 .../CustomerBalanceSummaryPdf.ts              |  10 +-
 .../CustomerBalanceSummaryService.ts          |  11 +-
 .../CustomerBalanceSummaryTableInjectable.ts  |   1 +
 .../GeneralLedger/GeneralLedgerMeta.ts        |  33 +++++
 .../GeneralLedger/GeneralLedgerPdf.ts         |  17 ++-
 .../GeneralLedger/GeneralLedgerService.ts     |  63 ++-------
 .../InventoryDetails/InventoryDetailsMeta.ts  |  33 +++++
 .../InventoryDetailsService.ts                |  41 +-----
 .../InventoryDetailsTablePdf.ts               |  17 +--
 .../InventoryValuationSheetMeta.ts            |  33 +++++
 .../InventoryValuationSheetPdf.ts             |   5 +-
 .../InventoryValuationSheetService.ts         |  36 ++---
 .../JournalSheet/JournalSheetMeta.ts          |  34 +++++
 .../JournalSheet/JournalSheetPdfInjectable.ts |   5 +-
 .../JournalSheet/JournalSheetService.ts       |  45 ++-----
 .../PurchasesByItems/PurchasesByItemsMeta.ts  |  36 +++++
 .../PurchasesByItems/PurchasesByItemsPdf.ts   |   5 +-
 .../PurchasesByItemsService.ts                |  35 ++---
 .../SalesByItems/SalesByItems.ts              |   1 +
 .../SalesByItems/SalesByItemsApplication.ts   |   1 +
 .../SalesByItems/SalesByItemsMeta.ts          |  33 +++++
 .../SalesByItems/SalesByItemsPdfInjectable.ts |   5 +-
 .../SalesByItems/SalesByItemsService.ts       |  43 ++----
 .../SalesTaxLiabilitySummaryApplication.ts    |   1 +
 .../SalesTaxLiabilitySummaryMeta.ts           |  32 +++++
 .../SalesTaxLiabilitySummaryService.ts        |  36 +----
 .../SalesTaxLiabiltiySummaryPdf.ts            |  11 +-
 .../FinancialStatements/TableSheetPdf.ts      |  24 ++--
 .../VendorBalanceSummaryApplication.ts        |   1 +
 .../VendorBalanceSummaryMeta.ts               |  32 +++++
 .../VendorBalanceSummaryPdf.ts                |   6 +-
 .../VendorBalanceSummaryService.ts            |  15 ++-
 .../VendorBalanceSummaryTableInjectable.ts    |   1 +
 62 files changed, 726 insertions(+), 474 deletions(-)
 create mode 100644 packages/server/src/services/FinancialStatements/AgingSummary/APAgingSummaryMeta.ts
 create mode 100644 packages/server/src/services/FinancialStatements/AgingSummary/ARAgingSummaryMeta.ts
 create mode 100644 packages/server/src/services/FinancialStatements/AgingSummary/AgingSummaryMeta.ts
 create mode 100644 packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryMeta.ts
 create mode 100644 packages/server/src/services/FinancialStatements/GeneralLedger/GeneralLedgerMeta.ts
 create mode 100644 packages/server/src/services/FinancialStatements/InventoryDetails/InventoryDetailsMeta.ts
 create mode 100644 packages/server/src/services/FinancialStatements/InventoryValuationSheet/InventoryValuationSheetMeta.ts
 create mode 100644 packages/server/src/services/FinancialStatements/JournalSheet/JournalSheetMeta.ts
 create mode 100644 packages/server/src/services/FinancialStatements/PurchasesByItems/PurchasesByItemsMeta.ts
 create mode 100644 packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsMeta.ts
 create mode 100644 packages/server/src/services/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryMeta.ts
 create mode 100644 packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryMeta.ts

diff --git a/packages/server/src/interfaces/APAgingSummaryReport.ts b/packages/server/src/interfaces/APAgingSummaryReport.ts
index 2d7a8a447..21ed036c7 100644
--- a/packages/server/src/interfaces/APAgingSummaryReport.ts
+++ b/packages/server/src/interfaces/APAgingSummaryReport.ts
@@ -5,6 +5,7 @@ import {
   IAgingSummaryContact,
   IAgingSummaryData,
 } from './AgingReport';
+import { IFinancialSheetCommonMeta } from './FinancialStatements';
 import { IFinancialTable } from './Table';
 
 export interface IAPAgingSummaryQuery extends IAgingSummaryQuery {
@@ -23,17 +24,22 @@ export interface IAPAgingSummaryData extends IAgingSummaryData {
 
 export type IAPAgingSummaryColumns = IAgingPeriod[];
 
-export interface IARAgingSummaryMeta {
-  baseCurrency: string;
-  organizationName: string;
+export interface IARAgingSummaryMeta extends IFinancialSheetCommonMeta {
+  formattedAsDate: string;
 }
 
-export interface IAPAgingSummaryMeta {
-  baseCurrency: string;
-  organizationName: string;
+export interface IAPAgingSummaryMeta extends IFinancialSheetCommonMeta {
+  formattedAsDate: string;
 }
 
 export interface IAPAgingSummaryTable extends IFinancialTable {
   query: IAPAgingSummaryQuery;
   meta: IAPAgingSummaryMeta;
 }
+
+export interface IAPAgingSummarySheet {
+  data: IAPAgingSummaryData;
+  meta: IAPAgingSummaryMeta;
+  query: IAPAgingSummaryQuery;
+  columns: any;
+}
diff --git a/packages/server/src/interfaces/ARAgingSummaryReport.ts b/packages/server/src/interfaces/ARAgingSummaryReport.ts
index d42fc8f7f..b20753927 100644
--- a/packages/server/src/interfaces/ARAgingSummaryReport.ts
+++ b/packages/server/src/interfaces/ARAgingSummaryReport.ts
@@ -32,3 +32,11 @@ export interface IARAgingSummaryTable extends IFinancialTable {
   meta: IARAgingSummaryMeta;
   query: IARAgingSummaryQuery;
 }
+
+export interface IARAgingSummarySheet {
+  data: IARAgingSummaryData;
+  meta: IARAgingSummaryMeta;
+  query: IARAgingSummaryQuery;
+  columns: IARAgingSummaryColumns;
+}
+
diff --git a/packages/server/src/interfaces/AgingReport.ts b/packages/server/src/interfaces/AgingReport.ts
index c68b6b389..dc2a0dd1b 100644
--- a/packages/server/src/interfaces/AgingReport.ts
+++ b/packages/server/src/interfaces/AgingReport.ts
@@ -1,5 +1,7 @@
-
-import { INumberFormatQuery } from './FinancialStatements';
+import {
+  IFinancialSheetCommonMeta,
+  INumberFormatQuery,
+} from './FinancialStatements';
 
 export interface IAgingPeriodTotal extends IAgingPeriod {
   total: IAgingAmount;
@@ -42,3 +44,8 @@ export interface IAgingSummaryTotal {
 export interface IAgingSummaryData {
   total: IAgingSummaryTotal;
 }
+
+export interface IAgingSummaryMeta extends IFinancialSheetCommonMeta {
+  formattedAsDate: string;
+  formattedDateRange: string;
+}
diff --git a/packages/server/src/interfaces/BalanceSheet.ts b/packages/server/src/interfaces/BalanceSheet.ts
index ddc36a53a..567cb8764 100644
--- a/packages/server/src/interfaces/BalanceSheet.ts
+++ b/packages/server/src/interfaces/BalanceSheet.ts
@@ -65,8 +65,7 @@ export interface IBalanceSheetQuery extends IFinancialSheetBranchesQuery {
 
 // Balance sheet meta.
 export interface IBalanceSheetMeta extends IFinancialSheetCommonMeta {
-  formattedFromDate: string;
-  formattedToDate: string;
+  formattedAsDate: string;
   formattedDateRange: string;
 }
 
diff --git a/packages/server/src/interfaces/CustomerBalanceSummary.ts b/packages/server/src/interfaces/CustomerBalanceSummary.ts
index cf5b5900d..c55452d98 100644
--- a/packages/server/src/interfaces/CustomerBalanceSummary.ts
+++ b/packages/server/src/interfaces/CustomerBalanceSummary.ts
@@ -4,6 +4,7 @@ import {
   IContactBalanceSummaryPercentage,
   IContactBalanceSummaryTotal,
 } from './ContactBalanceSummary';
+import { IFinancialSheetCommonMeta } from './FinancialStatements';
 import { IFinancialTable } from './Table';
 
 export interface ICustomerBalanceSummaryQuery
@@ -35,9 +36,15 @@ export interface ICustomerBalanceSummaryData {
   total: ICustomerBalanceSummaryTotal;
 }
 
+export interface ICustomerBalanceSummaryMeta extends IFinancialSheetCommonMeta {
+  formattedAsDate: string;
+  formattedDateRange: string;
+}
+
 export interface ICustomerBalanceSummaryStatement {
   data: ICustomerBalanceSummaryData;
   query: ICustomerBalanceSummaryQuery;
+  meta: ICustomerBalanceSummaryMeta;
 }
 
 export interface ICustomerBalanceSummaryService {
@@ -49,4 +56,5 @@ export interface ICustomerBalanceSummaryService {
 
 export interface ICustomerBalanceSummaryTable extends IFinancialTable {
   query: ICustomerBalanceSummaryQuery;
+  meta: ICustomerBalanceSummaryMeta;
 }
diff --git a/packages/server/src/interfaces/FinancialStatements.ts b/packages/server/src/interfaces/FinancialStatements.ts
index 9050ea6d4..abf2468c6 100644
--- a/packages/server/src/interfaces/FinancialStatements.ts
+++ b/packages/server/src/interfaces/FinancialStatements.ts
@@ -50,4 +50,5 @@ export interface IFinancialSheetCommonMeta {
   dateFormat: string;
   isCostComputeRunning: boolean;
   sheetName: string;
+  
 }
diff --git a/packages/server/src/interfaces/GeneralLedgerSheet.ts b/packages/server/src/interfaces/GeneralLedgerSheet.ts
index 6b863a192..6de1bda3b 100644
--- a/packages/server/src/interfaces/GeneralLedgerSheet.ts
+++ b/packages/server/src/interfaces/GeneralLedgerSheet.ts
@@ -1,92 +1,90 @@
-import { IFinancialTable } from "./Table";
-
+import { IFinancialSheetCommonMeta } from './FinancialStatements';
+import { IFinancialTable } from './Table';
 
 export interface IGeneralLedgerSheetQuery {
-  fromDate: Date | string,
-  toDate: Date | string,
-  basis: string,
+  fromDate: Date | string;
+  toDate: Date | string;
+  basis: string;
   numberFormat: {
-    noCents: boolean,
-    divideOn1000: boolean,
-  },
-  noneTransactions: boolean,
-  accountsIds: number[],
+    noCents: boolean;
+    divideOn1000: boolean;
+  };
+  noneTransactions: boolean;
+  accountsIds: number[];
   branchesIds?: number[];
-};
+}
 
 export interface IGeneralLedgerSheetAccountTransaction {
-  id: number,
+  id: number;
 
-  amount: number,
-  runningBalance: number,
-  credit: number,
-  debit: number,
+  amount: number;
+  runningBalance: number;
+  credit: number;
+  debit: number;
 
-  formattedAmount: string,
-  formattedCredit: string,
-  formattedDebit: string,
-  formattedRunningBalance: string,
+  formattedAmount: string;
+  formattedCredit: string;
+  formattedDebit: string;
+  formattedRunningBalance: string;
 
-  currencyCode: string,
-  note?: string,
+  currencyCode: string;
+  note?: string;
 
-  transactionType?: string,
-  transactionNumber: string,
+  transactionType?: string;
+  transactionNumber: string;
 
-  referenceId?: number,
-  referenceType?: string,
+  referenceId?: number;
+  referenceType?: string;
 
-  date: Date|string,
+  date: Date | string;
   dateFormatted: string;
-};
+}
 
 export interface IGeneralLedgerSheetAccountBalance {
-  date: Date|string,
-  amount: number,
-  formattedAmount: string,
-  currencyCode: string,
+  date: Date | string;
+  amount: number;
+  formattedAmount: string;
+  currencyCode: string;
 }
 
 export interface IGeneralLedgerSheetAccount {
-  id: number,
-  name: string,
-  code: string,
-  index: number,
-  parentAccountId: number,
-  transactions: IGeneralLedgerSheetAccountTransaction[],
-  openingBalance: IGeneralLedgerSheetAccountBalance,
-  closingBalance: IGeneralLedgerSheetAccountBalance,
+  id: number;
+  name: string;
+  code: string;
+  index: number;
+  parentAccountId: number;
+  transactions: IGeneralLedgerSheetAccountTransaction[];
+  openingBalance: IGeneralLedgerSheetAccountBalance;
+  closingBalance: IGeneralLedgerSheetAccountBalance;
 }
 
 export type IGeneralLedgerSheetData = IGeneralLedgerSheetAccount[];
 
 export interface IAccountTransaction {
-  id: number,
-  index: number,
-  draft: boolean,
-  note: string,
-  accountId: number,
-  transactionType: string,
-  referenceType: string,
-  referenceId: number,
-  contactId: number,
-  contactType: string,
-  credit: number,
-  debit: number,
-  date: string|Date,
-  createdAt: string|Date,
-  updatedAt: string|Date,
+  id: number;
+  index: number;
+  draft: boolean;
+  note: string;
+  accountId: number;
+  transactionType: string;
+  referenceType: string;
+  referenceId: number;
+  contactId: number;
+  contactType: string;
+  credit: number;
+  debit: number;
+  date: string | Date;
+  createdAt: string | Date;
+  updatedAt: string | Date;
 }
 
-export interface IGeneralLedgerMeta {
-  isCostComputeRunning: boolean,
-  organizationName: string,
-  baseCurrency: string,
-  fromDate: string;
-  toDate: string;
-};
+export interface IGeneralLedgerMeta extends IFinancialSheetCommonMeta {
+  formattedFromDate: string;
+  formattedToDate: string;
+  formattedDateRange: string;
+}
 
 export interface IGeneralLedgerTableData extends IFinancialTable {
   meta: IGeneralLedgerMeta;
   query: IGeneralLedgerSheetQuery;
-}
\ No newline at end of file
+}
diff --git a/packages/server/src/interfaces/IInventoryValuationSheet.ts b/packages/server/src/interfaces/IInventoryValuationSheet.ts
index ab006d7b3..a5bd5d051 100644
--- a/packages/server/src/interfaces/IInventoryValuationSheet.ts
+++ b/packages/server/src/interfaces/IInventoryValuationSheet.ts
@@ -1,4 +1,7 @@
-import { INumberFormatQuery } from './FinancialStatements';
+import {
+  IFinancialSheetCommonMeta,
+  INumberFormatQuery,
+} from './FinancialStatements';
 import { IFinancialTable } from './Table';
 
 export interface IInventoryValuationReportQuery {
@@ -13,10 +16,10 @@ export interface IInventoryValuationReportQuery {
   branchesIds?: number[];
 }
 
-export interface IInventoryValuationSheetMeta {
-  organizationName: string;
-  baseCurrency: string;
-  isCostComputeRunning: boolean;
+export interface IInventoryValuationSheetMeta
+  extends IFinancialSheetCommonMeta {
+  formattedAsDate: string;
+  formattedDateRange: string;
 }
 
 export interface IInventoryValuationItem {
diff --git a/packages/server/src/interfaces/InventoryDetails.ts b/packages/server/src/interfaces/InventoryDetails.ts
index 033ec269d..8da644540 100644
--- a/packages/server/src/interfaces/InventoryDetails.ts
+++ b/packages/server/src/interfaces/InventoryDetails.ts
@@ -1,4 +1,7 @@
-import { INumberFormatQuery } from './FinancialStatements';
+import {
+  IFinancialSheetCommonMeta,
+  INumberFormatQuery,
+} from './FinancialStatements';
 import { IFinancialTable } from './Table';
 
 export interface IInventoryDetailsQuery {
@@ -79,10 +82,10 @@ export type IInventoryDetailsNode =
   | IInventoryDetailsItemTransaction;
 export type IInventoryDetailsData = IInventoryDetailsItem[];
 
-export interface IInventoryItemDetailMeta {
-  isCostComputeRunning: boolean;
-  organizationName: string;
-  baseCurrency: string;
+export interface IInventoryItemDetailMeta extends IFinancialSheetCommonMeta {
+  formattedFromDate: string;
+  formattedToDay: string;
+  formattedDateRange: string;
 }
 
 export interface IInvetoryItemDetailDOO {
diff --git a/packages/server/src/interfaces/JournalReport.ts b/packages/server/src/interfaces/JournalReport.ts
index c003cccf0..319bf526c 100644
--- a/packages/server/src/interfaces/JournalReport.ts
+++ b/packages/server/src/interfaces/JournalReport.ts
@@ -1,3 +1,4 @@
+import { IFinancialSheetCommonMeta } from './FinancialStatements';
 import { IJournalEntry } from './Journal';
 import { IFinancialTable } from './Table';
 
@@ -32,10 +33,10 @@ export interface IJournalReport {
   entries: IJournalReportEntriesGroup[];
 }
 
-export interface IJournalSheetMeta {
-  isCostComputeRunning: boolean;
-  organizationName: string;
-  baseCurrency: string;
+export interface IJournalSheetMeta extends IFinancialSheetCommonMeta {
+  formattedDateRange: string;
+  formattedFromDate: string;
+  formattedToDate: string;
 }
 
 export interface IJournalTable extends IFinancialTable {
diff --git a/packages/server/src/interfaces/PurchasesByItemsSheet.ts b/packages/server/src/interfaces/PurchasesByItemsSheet.ts
index f08fb97af..fcd1ee8d9 100644
--- a/packages/server/src/interfaces/PurchasesByItemsSheet.ts
+++ b/packages/server/src/interfaces/PurchasesByItemsSheet.ts
@@ -1,4 +1,7 @@
-import { INumberFormatQuery } from './FinancialStatements';
+import {
+  IFinancialSheetCommonMeta,
+  INumberFormatQuery,
+} from './FinancialStatements';
 import { IFinancialTable } from './Table';
 
 export interface IPurchasesByItemsReportQuery {
@@ -10,9 +13,10 @@ export interface IPurchasesByItemsReportQuery {
   onlyActive: boolean;
 }
 
-export interface IPurchasesByItemsSheetMeta {
-  organizationName: string;
-  baseCurrency: string;
+export interface IPurchasesByItemsSheetMeta extends IFinancialSheetCommonMeta {
+  formattedFromDate: string;
+  formattedToDate: string;
+  formattedDateRange: string;
 }
 
 export interface IPurchasesByItemsItem {
diff --git a/packages/server/src/interfaces/SalesByItemsSheet.ts b/packages/server/src/interfaces/SalesByItemsSheet.ts
index 84f49960b..789ebae77 100644
--- a/packages/server/src/interfaces/SalesByItemsSheet.ts
+++ b/packages/server/src/interfaces/SalesByItemsSheet.ts
@@ -1,4 +1,7 @@
-import { INumberFormatQuery } from './FinancialStatements';
+import {
+  IFinancialSheetCommonMeta,
+  INumberFormatQuery,
+} from './FinancialStatements';
 import { IFinancialTable } from './Table';
 
 export interface ISalesByItemsReportQuery {
@@ -10,9 +13,10 @@ export interface ISalesByItemsReportQuery {
   onlyActive: boolean;
 }
 
-export interface ISalesByItemsSheetMeta {
-  organizationName: string;
-  baseCurrency: string;
+export interface ISalesByItemsSheetMeta extends IFinancialSheetCommonMeta {
+  formattedFromDate: string;
+  formattedToDate: string;
+  formattedDateRange: string;
 }
 
 export interface ISalesByItemsItem {
@@ -51,4 +55,4 @@ export interface ISalesByItemsSheet {
 export interface ISalesByItemsTable extends IFinancialTable {
   query: ISalesByItemsReportQuery;
   meta: ISalesByItemsSheetMeta;
-}
\ No newline at end of file
+}
diff --git a/packages/server/src/interfaces/SalesTaxLiabilitySummary.ts b/packages/server/src/interfaces/SalesTaxLiabilitySummary.ts
index 2fbc9f13d..b37d8a384 100644
--- a/packages/server/src/interfaces/SalesTaxLiabilitySummary.ts
+++ b/packages/server/src/interfaces/SalesTaxLiabilitySummary.ts
@@ -1,3 +1,4 @@
+import { IFinancialSheetCommonMeta } from "./FinancialStatements";
 import { IFinancialTable } from "./Table";
 
 export interface SalesTaxLiabilitySummaryQuery {
@@ -47,9 +48,10 @@ export type SalesTaxLiabilitySummarySalesById = Record<
   { taxRateId: number; credit: number; debit: number }
 >;
 
-export interface SalesTaxLiabilitySummaryMeta  {
-  organizationName: string;
-  baseCurrency: string;
+export interface SalesTaxLiabilitySummaryMeta extends IFinancialSheetCommonMeta  {
+  formattedFromDate: string;
+  formattedToDate: string;
+  formattedDateRange: string;
 }
 
 export interface ISalesTaxLiabilitySummaryTable extends IFinancialTable {
diff --git a/packages/server/src/interfaces/TransactionsByCustomers.ts b/packages/server/src/interfaces/TransactionsByCustomers.ts
index fcfb01ea6..7635745c6 100644
--- a/packages/server/src/interfaces/TransactionsByCustomers.ts
+++ b/packages/server/src/interfaces/TransactionsByCustomers.ts
@@ -1,3 +1,4 @@
+import { IFinancialSheetCommonMeta } from './FinancialStatements';
 import { IFinancialTable, ITableData } from './Table';
 import {
   ITransactionsByContactsAmount,
@@ -40,3 +41,9 @@ export interface ITransactionsByCustomersService {
     filter: ITransactionsByCustomersFilter
   ): Promise<ITransactionsByCustomersStatement>;
 }
+export interface ITransactionsByCustomersMeta
+  extends IFinancialSheetCommonMeta {
+  formattedFromDate: string;
+  formattedToDate: string;
+  formattedDateRange: string;
+}
diff --git a/packages/server/src/interfaces/TransactionsByVendors.ts b/packages/server/src/interfaces/TransactionsByVendors.ts
index ae129bc79..7a5b16013 100644
--- a/packages/server/src/interfaces/TransactionsByVendors.ts
+++ b/packages/server/src/interfaces/TransactionsByVendors.ts
@@ -1,3 +1,4 @@
+import { IFinancialSheetCommonMeta } from './FinancialStatements';
 import { IFinancialTable } from './Table';
 import {
   ITransactionsByContactsAmount,
@@ -27,6 +28,8 @@ export type ITransactionsByVendorsData = ITransactionsByVendorsVendor[];
 
 export interface ITransactionsByVendorsStatement {
   data: ITransactionsByVendorsData;
+  query: ITransactionsByVendorsFilter;
+  meta: ITransactionsByVendorMeta;
 }
 
 export interface ITransactionsByVendorsService {
@@ -38,4 +41,10 @@ export interface ITransactionsByVendorsService {
 
 export interface ITransactionsByVendorTable extends IFinancialTable {
   query: ITransactionsByVendorsFilter;
-}
\ No newline at end of file
+  meta: ITransactionsByVendorMeta;
+}
+export interface ITransactionsByVendorMeta extends IFinancialSheetCommonMeta {
+  formattedFromDate: string;
+  formattedToDate: string;
+  formattedDateRange: string;
+}
diff --git a/packages/server/src/interfaces/VendorBalanceSummary.ts b/packages/server/src/interfaces/VendorBalanceSummary.ts
index d214202df..5c603c51d 100644
--- a/packages/server/src/interfaces/VendorBalanceSummary.ts
+++ b/packages/server/src/interfaces/VendorBalanceSummary.ts
@@ -1,4 +1,7 @@
-import { INumberFormatQuery } from './FinancialStatements';
+import {
+  IFinancialSheetCommonMeta,
+  INumberFormatQuery,
+} from './FinancialStatements';
 import { IFinancialTable } from './Table';
 
 export interface IVendorBalanceSummaryQuery {
@@ -39,8 +42,9 @@ export interface IVendorBalanceSummaryData {
 
 export interface IVendorBalanceSummaryStatement {
   data: IVendorBalanceSummaryData;
-  columns: {};
   query: IVendorBalanceSummaryQuery;
+  meta: IVendorBalanceSummaryMeta;
+  
 }
 
 export interface IVendorBalanceSummaryService {
@@ -52,4 +56,9 @@ export interface IVendorBalanceSummaryService {
 
 export interface IVendorBalanceSummaryTable extends IFinancialTable {
   query: IVendorBalanceSummaryQuery;
+  meta: IVendorBalanceSummaryMeta;
+}
+
+export interface IVendorBalanceSummaryMeta extends IFinancialSheetCommonMeta {
+  formattedAsDate: string;
 }
diff --git a/packages/server/src/services/FinancialStatements/AgingSummary/APAgingSummaryMeta.ts b/packages/server/src/services/FinancialStatements/AgingSummary/APAgingSummaryMeta.ts
new file mode 100644
index 000000000..a32fe6457
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/AgingSummary/APAgingSummaryMeta.ts
@@ -0,0 +1,26 @@
+import { Inject, Service } from 'typedi';
+import { IAgingSummaryMeta, IAgingSummaryQuery } from '@/interfaces';
+import { AgingSummaryMeta } from './AgingSummaryMeta';
+
+@Service()
+export class APAgingSummaryMeta {
+  @Inject()
+  private agingSummaryMeta: AgingSummaryMeta;
+
+  /**
+   * Retrieve the aging summary meta.
+   * @param {number} tenantId -
+   * @returns {IBalanceSheetMeta}
+   */
+  public async meta(
+    tenantId: number,
+    query: IAgingSummaryQuery
+  ): Promise<IAgingSummaryMeta> {
+    const commonMeta = await this.agingSummaryMeta.meta(tenantId, query);
+
+    return {
+      ...commonMeta,
+      sheetName: 'A/P Aging Summary',
+    };
+  }
+}
diff --git a/packages/server/src/services/FinancialStatements/AgingSummary/APAgingSummaryPdfInjectable.ts b/packages/server/src/services/FinancialStatements/AgingSummary/APAgingSummaryPdfInjectable.ts
index e1a74f80a..073970b91 100644
--- a/packages/server/src/services/FinancialStatements/AgingSummary/APAgingSummaryPdfInjectable.ts
+++ b/packages/server/src/services/FinancialStatements/AgingSummary/APAgingSummaryPdfInjectable.ts
@@ -22,13 +22,12 @@ export class APAgingSummaryPdfInjectable {
     query: IAPAgingSummaryQuery
   ): Promise<Buffer> {
     const table = await this.APAgingSummaryTable.table(tenantId, query);
-    const sheetName = 'AR Aging Summary';
 
     return this.tableSheetPdf.convertToPdf(
       tenantId,
       table.table,
-      sheetName,
-      table.meta.baseCurrency
+      table.meta.sheetName,
+      table.meta.formattedAsDate
     );
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/AgingSummary/APAgingSummaryService.ts b/packages/server/src/services/FinancialStatements/AgingSummary/APAgingSummaryService.ts
index fa3e6a2b3..49ee46448 100644
--- a/packages/server/src/services/FinancialStatements/AgingSummary/APAgingSummaryService.ts
+++ b/packages/server/src/services/FinancialStatements/AgingSummary/APAgingSummaryService.ts
@@ -1,18 +1,19 @@
 import moment from 'moment';
 import { Inject, Service } from 'typedi';
 import { isEmpty } from 'lodash';
-import { IAPAgingSummaryQuery, IARAgingSummaryMeta } from '@/interfaces';
+import { IAPAgingSummaryQuery, IAPAgingSummarySheet } from '@/interfaces';
 import TenancyService from '@/services/Tenancy/TenancyService';
 import APAgingSummarySheet from './APAgingSummarySheet';
 import { Tenant } from '@/system/models';
+import { APAgingSummaryMeta } from './APAgingSummaryMeta';
 
 @Service()
 export class APAgingSummaryService {
   @Inject()
-  tenancy: TenancyService;
+  private tenancy: TenancyService;
 
-  @Inject('logger')
-  logger: any;
+  @Inject()
+  private APAgingSummaryMeta: APAgingSummaryMeta;
 
   /**
    * Default report query.
@@ -35,35 +36,16 @@ export class APAgingSummaryService {
     };
   }
 
-  /**
-   * Retrieve the balance sheet meta.
-   * @param {number} tenantId -
-   * @returns {IBalanceSheetMeta}
-   */
-  reportMetadata(tenantId: number): IARAgingSummaryMeta {
-    const settings = this.tenancy.settings(tenantId);
-
-    const organizationName = settings.get({
-      group: 'organization',
-      key: 'name',
-    });
-    const baseCurrency = settings.get({
-      group: 'organization',
-      key: 'base_currency',
-    });
-
-    return {
-      organizationName,
-      baseCurrency,
-    };
-  }
-
   /**
    * Retrieve A/P aging summary report.
    * @param {number} tenantId -
    * @param {IAPAgingSummaryQuery} query -
+   * @returns {Promise<IAPAgingSummarySheet>}
    */
-  async APAgingSummary(tenantId: number, query: IAPAgingSummaryQuery) {
+  public async APAgingSummary(
+    tenantId: number,
+    query: IAPAgingSummaryQuery
+  ): Promise<IAPAgingSummarySheet> {
     const { Bill } = this.tenancy.models(tenantId);
     const { vendorRepository } = this.tenancy.repositories(tenantId);
 
@@ -111,11 +93,14 @@ export class APAgingSummaryService {
     const data = APAgingSummaryReport.reportData();
     const columns = APAgingSummaryReport.reportColumns();
 
+    // Retrieve the aging summary report meta.
+    const meta = await this.APAgingSummaryMeta.meta(tenantId, filter);
+
     return {
       data,
       columns,
       query: filter,
-      meta: this.reportMetadata(tenantId),
+      meta,
     };
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/AgingSummary/ARAgingSummaryMeta.ts b/packages/server/src/services/FinancialStatements/AgingSummary/ARAgingSummaryMeta.ts
new file mode 100644
index 000000000..dce2cb9d0
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/AgingSummary/ARAgingSummaryMeta.ts
@@ -0,0 +1,26 @@
+import { Inject, Service } from 'typedi';
+import { IAgingSummaryMeta, IAgingSummaryQuery } from '@/interfaces';
+import { AgingSummaryMeta } from './AgingSummaryMeta';
+
+@Service()
+export class ARAgingSummaryMeta {
+  @Inject()
+  private agingSummaryMeta: AgingSummaryMeta;
+
+  /**
+   * Retrieve the aging summary meta.
+   * @param {number} tenantId -
+   * @returns {IBalanceSheetMeta}
+   */
+  public async meta(
+    tenantId: number,
+    query: IAgingSummaryQuery
+  ): Promise<IAgingSummaryMeta> {
+    const commonMeta = await this.agingSummaryMeta.meta(tenantId, query);
+
+    return {
+      ...commonMeta,
+      sheetName: 'A/R Aging Summary',
+    };
+  }
+}
diff --git a/packages/server/src/services/FinancialStatements/AgingSummary/ARAgingSummaryPdfInjectable.ts b/packages/server/src/services/FinancialStatements/AgingSummary/ARAgingSummaryPdfInjectable.ts
index 57ea3fef5..b0031ac37 100644
--- a/packages/server/src/services/FinancialStatements/AgingSummary/ARAgingSummaryPdfInjectable.ts
+++ b/packages/server/src/services/FinancialStatements/AgingSummary/ARAgingSummaryPdfInjectable.ts
@@ -22,13 +22,12 @@ export class ARAgingSummaryPdfInjectable {
     query: IARAgingSummaryQuery
   ): Promise<Buffer> {
     const table = await this.ARAgingSummaryTable.table(tenantId, query);
-    const sheetName = 'AR Aging Summary';
 
     return this.tableSheetPdf.convertToPdf(
       tenantId,
       table.table,
-      sheetName,
-      table.meta.baseCurrency
+      table.meta.sheetName,
+      table.meta.formattedDateRange
     );
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/AgingSummary/ARAgingSummaryService.ts b/packages/server/src/services/FinancialStatements/AgingSummary/ARAgingSummaryService.ts
index e13dfc276..d52709027 100644
--- a/packages/server/src/services/FinancialStatements/AgingSummary/ARAgingSummaryService.ts
+++ b/packages/server/src/services/FinancialStatements/AgingSummary/ARAgingSummaryService.ts
@@ -1,18 +1,19 @@
 import moment from 'moment';
 import { Inject, Service } from 'typedi';
 import { isEmpty } from 'lodash';
-import { IARAgingSummaryQuery, IARAgingSummaryMeta } from '@/interfaces';
+import { IARAgingSummaryQuery } from '@/interfaces';
 import TenancyService from '@/services/Tenancy/TenancyService';
 import ARAgingSummarySheet from './ARAgingSummarySheet';
 import { Tenant } from '@/system/models';
+import { ARAgingSummaryMeta } from './ARAgingSummaryMeta';
 
 @Service()
 export default class ARAgingSummaryService {
   @Inject()
-  tenancy: TenancyService;
+  private tenancy: TenancyService;
 
-  @Inject('logger')
-  logger: any;
+  @Inject()
+  private ARAgingSummaryMeta: ARAgingSummaryMeta;
 
   /**
    * Default report query.
@@ -35,29 +36,6 @@ export default class ARAgingSummaryService {
     };
   }
 
-  /**
-   * Retrieve the balance sheet meta.
-   * @param {number} tenantId -
-   * @returns {IBalanceSheetMeta}
-   */
-  reportMetadata(tenantId: number): IARAgingSummaryMeta {
-    const settings = this.tenancy.settings(tenantId);
-
-    const organizationName = settings.get({
-      group: 'organization',
-      key: 'name',
-    });
-    const baseCurrency = settings.get({
-      group: 'organization',
-      key: 'base_currency',
-    });
-
-    return {
-      organizationName,
-      baseCurrency,
-    };
-  }
-
   /**
    * Retrieve A/R aging summary report.
    * @param {number} tenantId - Tenant id.
@@ -110,11 +88,14 @@ export default class ARAgingSummaryService {
     const data = ARAgingSummaryReport.reportData();
     const columns = ARAgingSummaryReport.reportColumns();
 
+    // Retrieve the aging summary report meta.
+    const meta = await this.ARAgingSummaryMeta.meta(tenantId, filter);
+
     return {
       data,
       columns,
       query: filter,
-      meta: this.reportMetadata(tenantId),
+      meta,
     };
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/AgingSummary/ARAgingSummaryTableInjectable.ts b/packages/server/src/services/FinancialStatements/AgingSummary/ARAgingSummaryTableInjectable.ts
index 10ac9ee8c..6f702cfe4 100644
--- a/packages/server/src/services/FinancialStatements/AgingSummary/ARAgingSummaryTableInjectable.ts
+++ b/packages/server/src/services/FinancialStatements/AgingSummary/ARAgingSummaryTableInjectable.ts
@@ -19,6 +19,7 @@ export class ARAgingSummaryTableInjectable {
     query: IARAgingSummaryQuery
   ): Promise<IARAgingSummaryTable> {
     const report = await this.ARAgingSummarySheet.ARAgingSummary(
+      
       tenantId,
       query
     );
diff --git a/packages/server/src/services/FinancialStatements/AgingSummary/AgingSummaryMeta.ts b/packages/server/src/services/FinancialStatements/AgingSummary/AgingSummaryMeta.ts
new file mode 100644
index 000000000..5d3599997
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/AgingSummary/AgingSummaryMeta.ts
@@ -0,0 +1,30 @@
+import { Inject } from 'typedi';
+import { FinancialSheetMeta } from '../FinancialSheetMeta';
+import { IAgingSummaryMeta, IAgingSummaryQuery } from '@/interfaces';
+import moment from 'moment';
+
+export class AgingSummaryMeta {
+  @Inject()
+  private financialSheetMeta: FinancialSheetMeta;
+
+  /**
+   * Retrieve the aging summary meta.
+   * @param {number} tenantId -
+   * @returns {IBalanceSheetMeta}
+   */
+  public async meta(
+    tenantId: number,
+    query: IAgingSummaryQuery
+  ): Promise<IAgingSummaryMeta> {
+    const commonMeta = await this.financialSheetMeta.meta(tenantId);
+    const formattedAsDate = moment(query.asDate).format('YYYY/MM/DD');
+    const formattedDateRange = `As ${formattedAsDate}`;
+
+    return {
+      ...commonMeta,
+      sheetName: 'A/P Aging Summary',
+      formattedAsDate,
+      formattedDateRange,
+    };
+  }
+}
diff --git a/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetMeta.ts b/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetMeta.ts
index 91ecb068c..ac1b7a3bd 100644
--- a/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetMeta.ts
+++ b/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetMeta.ts
@@ -18,16 +18,14 @@ export class BalanceSheetMetaInjectable {
     query: IBalanceSheetQuery
   ): Promise<IBalanceSheetMeta> {
     const commonMeta = await this.financialSheetMeta.meta(tenantId);
-    const formattedToDate = moment(query.toDate).format('YYYY/MM/DD');
-    const formattedFromDate = moment(query.fromDate).format('YYYY/MM/DD');
-    const formattedDateRange = `From ${formattedFromDate} | To ${formattedToDate}`;
+    const formattedAsDate = moment(query.toDate).format('YYYY/MM/DD');
+    const formattedDateRange = `As ${formattedAsDate}`;
 
     return {
       ...commonMeta,
       sheetName: 'Balance Sheet',
-      formattedFromDate,
-      formattedToDate,
-      formattedDateRange
+      formattedAsDate,
+      formattedDateRange,
     };
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetNetIncome.ts b/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetNetIncome.ts
index a6695b370..a78624ae2 100644
--- a/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetNetIncome.ts
+++ b/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetNetIncome.ts
@@ -31,6 +31,7 @@ export const BalanceSheetNetIncome = (Base: any) =>
     /**
      * Retrieves the closing balance of income accounts.
      * @returns {number}
+     * 
      */
     private getIncomeTotal = () => {
       const closeingBalance = this.repository.incomeLedger.getClosingBalance();
diff --git a/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetTable.ts b/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetTable.ts
index 088362766..66ab87cd5 100644
--- a/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetTable.ts
+++ b/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetTable.ts
@@ -215,13 +215,13 @@ export default class BalanceSheetTable extends R.compose(
 
   /**
    * Retrieves the total children columns.
-   * @returns {ITableColumn[]}
+ * @returns {ITableColumn[]}
    */
   private totalColumnChildren = (): ITableColumn[] => {
     return R.compose(
       R.unless(
         R.isEmpty,
-        R.concat([{ key: 'total', Label: this.i18n.__('balance_sheet.total') }])
+        R.concat([{ key: 'total', label: this.i18n.__('balance_sheet.total') }])
       ),
       R.concat(this.percentageColumns()),
       R.concat(this.getPreviousYearColumns()),
diff --git a/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryApplication.ts b/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryApplication.ts
index a1693e7d8..78c532d08 100644
--- a/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryApplication.ts
+++ b/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryApplication.ts
@@ -15,7 +15,7 @@ export class CustomerBalanceSummaryApplication {
 
   @Inject()
   private customerBalanceSummarySheet: CustomerBalanceSummaryService;
-
+  
   @Inject()
   private customerBalanceSummaryPdf: CustomerBalanceSummaryPdf;
 
diff --git a/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryMeta.ts b/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryMeta.ts
new file mode 100644
index 000000000..7639e8c4f
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryMeta.ts
@@ -0,0 +1,35 @@
+import moment from 'moment';
+import { Inject, Service } from 'typedi';
+import {
+  ICustomerBalanceSummaryMeta,
+  ICustomerBalanceSummaryQuery,
+} from '@/interfaces';
+import { FinancialSheetMeta } from '../FinancialSheetMeta';
+
+@Service()
+export class CustomerBalanceSummaryMeta {
+  @Inject()
+  private financialSheetMeta: FinancialSheetMeta;
+
+  /**
+   * Retrieves the customer balance summary meta.
+   * @param {number} tenantId
+   * @param {ICustomerBalanceSummaryQuery} query
+   * @returns {Promise<ICustomerBalanceSummaryMeta>}
+   */
+  async meta(
+    tenantId: number,
+    query: ICustomerBalanceSummaryQuery
+  ): Promise<ICustomerBalanceSummaryMeta> {
+    const commonMeta = await this.financialSheetMeta.meta(tenantId);
+    const formattedAsDate = moment(query.asDate).format('YYYY/MM/DD');
+    const formattedDateRange = `As ${formattedAsDate}`;
+
+    return {
+      ...commonMeta,
+      sheetName: 'Customer Balance Summary',
+      formattedAsDate,
+      formattedDateRange,
+    };
+  }
+}
diff --git a/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryPdf.ts b/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryPdf.ts
index 67e74349b..b1bff25d8 100644
--- a/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryPdf.ts
+++ b/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryPdf.ts
@@ -1,5 +1,6 @@
 import { Inject, Service } from 'typedi';
-import { IAPAgingSummaryQuery, ICustomerBalanceSummaryQuery } from '@/interfaces';
+import { ICustomerBalanceSummaryQuery } from '@/interfaces';
+
 import { TableSheetPdf } from '../TableSheetPdf';
 import { CustomerBalanceSummaryTableInjectable } from './CustomerBalanceSummaryTableInjectable';
 
@@ -12,7 +13,7 @@ export class CustomerBalanceSummaryPdf {
   private tableSheetPdf: TableSheetPdf;
 
   /**
-   * Converts the given A/P aging summary sheet table to pdf.
+   * Converts the given customer balance summary sheet table to pdf.
    * @param {number} tenantId - Tenant ID.
    * @param {IAPAgingSummaryQuery} query - Balance sheet query.
    * @returns {Promise<Buffer>}
@@ -22,13 +23,12 @@ export class CustomerBalanceSummaryPdf {
     query: ICustomerBalanceSummaryQuery
   ): Promise<Buffer> {
     const table = await this.customerBalanceSummaryTable.table(tenantId, query);
-    const sheetName = 'Customer Balance Summary';
 
     return this.tableSheetPdf.convertToPdf(
       tenantId,
       table.table,
-      sheetName,
-      table.meta.baseCurrency
+      table.meta.sheetName,
+      table.meta.formattedDateRange
     );
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryService.ts b/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryService.ts
index 45345d931..38edc5174 100644
--- a/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryService.ts
+++ b/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryService.ts
@@ -1,4 +1,4 @@
-import { Inject } from 'typedi';
+import { Inject, Service } from 'typedi';
 import moment from 'moment';
 import * as R from 'ramda';
 import {
@@ -12,13 +12,18 @@ import { CustomerBalanceSummaryReport } from './CustomerBalanceSummary';
 import Ledger from '@/services/Accounting/Ledger';
 import CustomerBalanceSummaryRepository from './CustomerBalanceSummaryRepository';
 import { Tenant } from '@/system/models';
+import { CustomerBalanceSummaryMeta } from './CustomerBalanceSummaryMeta';
 
+@Service()
 export class CustomerBalanceSummaryService
   implements ICustomerBalanceSummaryService
 {
   @Inject()
   private reportRepository: CustomerBalanceSummaryRepository;
 
+  @Inject()
+  private customerBalanceSummaryMeta: CustomerBalanceSummaryMeta;
+
   /**
    * Defaults balance sheet filter query.
    * @return {ICustomerBalanceSummaryQuery}
@@ -96,11 +101,13 @@ export class CustomerBalanceSummaryService
       filter,
       tenant.metadata.baseCurrency
     );
+    // Retrieve the customer balance summary meta.
+    const meta = await this.customerBalanceSummaryMeta.meta(tenantId, filter);
 
     return {
       data: report.reportData(),
       query: filter,
-      meta: {}
+      meta,
     };
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryTableInjectable.ts b/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryTableInjectable.ts
index be42a7417..edf4e5ea1 100644
--- a/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryTableInjectable.ts
+++ b/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryTableInjectable.ts
@@ -25,6 +25,7 @@ export class CustomerBalanceSummaryTableInjectable {
     tenantId: number,
     filter: ICustomerBalanceSummaryQuery
   ): Promise<ICustomerBalanceSummaryTable> {
+    
     const i18n = this.tenancy.i18n(tenantId);
     const { data, query, meta } =
       await this.customerBalanceSummaryService.customerBalanceSummary(
diff --git a/packages/server/src/services/FinancialStatements/GeneralLedger/GeneralLedgerMeta.ts b/packages/server/src/services/FinancialStatements/GeneralLedger/GeneralLedgerMeta.ts
new file mode 100644
index 000000000..00f312654
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/GeneralLedger/GeneralLedgerMeta.ts
@@ -0,0 +1,33 @@
+import { IGeneralLedgerMeta, IGeneralLedgerSheetQuery } from '@/interfaces';
+import moment from 'moment';
+import { Inject, Service } from 'typedi';
+import { FinancialSheetMeta } from '../FinancialSheetMeta';
+
+@Service()
+export class GeneralLedgerMeta {
+  @Inject()
+  private financialSheetMeta: FinancialSheetMeta;
+
+  /**
+   * Retrieve the balance sheet meta.
+   * @param {number} tenantId -
+   * @returns {IBalanceSheetMeta}
+   */
+  public async meta(
+    tenantId: number,
+    query: IGeneralLedgerSheetQuery
+  ): Promise<IGeneralLedgerMeta> {
+    const commonMeta = await this.financialSheetMeta.meta(tenantId);
+    const formattedToDate = moment(query.toDate).format('YYYY/MM/DD');
+    const formattedFromDate = moment(query.fromDate).format('YYYY/MM/DD');
+    const formattedDateRange = `From ${formattedFromDate} | To ${formattedToDate}`;
+
+    return {
+      ...commonMeta,
+      sheetName: 'Balance Sheet',
+      formattedFromDate,
+      formattedToDate,
+      formattedDateRange,
+    };
+  }
+}
diff --git a/packages/server/src/services/FinancialStatements/GeneralLedger/GeneralLedgerPdf.ts b/packages/server/src/services/FinancialStatements/GeneralLedger/GeneralLedgerPdf.ts
index d1d12ae43..f03a26ce7 100644
--- a/packages/server/src/services/FinancialStatements/GeneralLedger/GeneralLedgerPdf.ts
+++ b/packages/server/src/services/FinancialStatements/GeneralLedger/GeneralLedgerPdf.ts
@@ -1,7 +1,7 @@
-import { Inject, Service } from "typedi";
-import { TableSheetPdf } from "../TableSheetPdf";
-import { GeneralLedgerTableInjectable } from "./GeneralLedgerTableInjectable";
-import { IGeneralLedgerSheetQuery } from "@/interfaces";
+import { Inject, Service } from 'typedi';
+import { TableSheetPdf } from '../TableSheetPdf';
+import { GeneralLedgerTableInjectable } from './GeneralLedgerTableInjectable';
+import { IGeneralLedgerSheetQuery } from '@/interfaces';
 
 @Service()
 export class GeneralLedgerPdf {
@@ -14,7 +14,7 @@ export class GeneralLedgerPdf {
   /**
    * Converts the general ledger sheet table to pdf.
    * @param {number} tenantId - Tenant ID.
-   * @param {IGeneralLedgerSheetQuery} query - 
+   * @param {IGeneralLedgerSheetQuery} query -
    * @returns {Promise<Buffer>}
    */
   public async pdf(
@@ -22,13 +22,12 @@ export class GeneralLedgerPdf {
     query: IGeneralLedgerSheetQuery
   ): Promise<Buffer> {
     const table = await this.generalLedgerTable.table(tenantId, query);
-    const sheetName = 'General Ledger';
 
     return this.tableSheetPdf.convertToPdf(
       tenantId,
       table.table,
-      sheetName,
-      table.meta.baseCurrency
+      table.meta.sheetName,
+      table.meta.formattedDateRange
     );
   }
-}
\ No newline at end of file
+}
diff --git a/packages/server/src/services/FinancialStatements/GeneralLedger/GeneralLedgerService.ts b/packages/server/src/services/FinancialStatements/GeneralLedger/GeneralLedgerService.ts
index 100239e39..53451d2d8 100644
--- a/packages/server/src/services/FinancialStatements/GeneralLedger/GeneralLedgerService.ts
+++ b/packages/server/src/services/FinancialStatements/GeneralLedger/GeneralLedgerService.ts
@@ -6,9 +6,9 @@ import { IGeneralLedgerSheetQuery, IGeneralLedgerMeta } from '@/interfaces';
 import TenancyService from '@/services/Tenancy/TenancyService';
 import Journal from '@/services/Accounting/JournalPoster';
 import GeneralLedgerSheet from '@/services/FinancialStatements/GeneralLedger/GeneralLedger';
-import InventoryService from '@/services/Inventory/Inventory';
-import { transformToMap, parseBoolean } from 'utils';
+import { transformToMap } from 'utils';
 import { Tenant } from '@/system/models';
+import { GeneralLedgerMeta } from './GeneralLedgerMeta';
 
 const ERRORS = {
   ACCOUNTS_NOT_FOUND: 'ACCOUNTS_NOT_FOUND',
@@ -17,13 +17,10 @@ const ERRORS = {
 @Service()
 export class GeneralLedgerService {
   @Inject()
-  tenancy: TenancyService;
+  private tenancy: TenancyService;
 
   @Inject()
-  inventoryService: InventoryService;
-
-  @Inject('logger')
-  logger: any;
+  private generalLedgerMeta: GeneralLedgerMeta;
 
   /**
    * Defaults general ledger report filter query.
@@ -59,40 +56,8 @@ export class GeneralLedgerService {
     }
   }
 
-  /**
-   * Retrieve the balance sheet meta.
-   * @param {number} tenantId - 
-   * @returns {IGeneralLedgerMeta}
-   */
-   reportMetadata(tenantId: number, filter): IGeneralLedgerMeta {
-    const settings = this.tenancy.settings(tenantId);
-
-    const isCostComputeRunning = this.inventoryService
-      .isItemsCostComputeRunning(tenantId);
-
-    const organizationName = settings.get({
-      group: 'organization',
-      key: 'name',
-    });
-    const baseCurrency = settings.get({
-      group: 'organization',
-      key: 'base_currency',
-    });
-    const fromDate = moment(filter.fromDate).format('YYYY MMM DD');
-    const toDate = moment(filter.toDate).format('YYYY MMM DD');
-
-    return {
-      isCostComputeRunning: parseBoolean(isCostComputeRunning, false),
-      organizationName,
-      baseCurrency,
-      fromDate,
-      toDate
-    };
-  }
-
   /**
    * Retrieve general ledger report statement.
-   * ----------
    * @param {number} tenantId
    * @param {IGeneralLedgerSheetQuery} query
    * @return {IGeneralLedgerStatement}
@@ -103,13 +68,10 @@ export class GeneralLedgerService {
   ): Promise<{
     data: any;
     query: IGeneralLedgerSheetQuery;
-    meta: IGeneralLedgerMeta
+    meta: IGeneralLedgerMeta;
   }> {
-    const {
-      accountRepository,
-      transactionsRepository,
-      contactRepository
-    } = this.tenancy.repositories(tenantId);
+    const { accountRepository, transactionsRepository, contactRepository } =
+      this.tenancy.repositories(tenantId);
 
     const i18n = this.tenancy.i18n(tenantId);
 
@@ -133,13 +95,13 @@ export class GeneralLedgerService {
     const transactions = await transactionsRepository.journal({
       fromDate: filter.fromDate,
       toDate: filter.toDate,
-      branchesIds: filter.branchesIds
+      branchesIds: filter.branchesIds,
     });
     // Retreive opening balance credit/debit sumation.
     const openingBalanceTrans = await transactionsRepository.journal({
       toDate: moment(filter.fromDate).subtract(1, 'day'),
       sumationCreditDebit: true,
-      branchesIds: filter.branchesIds
+      branchesIds: filter.branchesIds,
     });
     // Transform array transactions to journal collection.
     const transactionsJournal = Journal.fromTransactions(
@@ -147,7 +109,7 @@ export class GeneralLedgerService {
       tenantId,
       accountsGraph
     );
-    // Accounts opening transactions. 
+    // Accounts opening transactions.
     const openingTransJournal = Journal.fromTransactions(
       openingBalanceTrans,
       tenantId,
@@ -167,10 +129,13 @@ export class GeneralLedgerService {
     // Retrieve general ledger report data.
     const reportData = generalLedgerInstance.reportData();
 
+    // Retrieve general ledger report metadata.
+    const meta = await this.generalLedgerMeta.meta(tenantId, filter);
+
     return {
       data: reportData,
       query: filter,
-      meta: this.reportMetadata(tenantId, filter),
+      meta,
     };
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/InventoryDetails/InventoryDetailsMeta.ts b/packages/server/src/services/FinancialStatements/InventoryDetails/InventoryDetailsMeta.ts
new file mode 100644
index 000000000..6c3001373
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/InventoryDetails/InventoryDetailsMeta.ts
@@ -0,0 +1,33 @@
+import moment from 'moment';
+import { Inject, Service } from 'typedi';
+import { FinancialSheetMeta } from '../FinancialSheetMeta';
+import { IInventoryDetailsQuery, IInventoryItemDetailMeta } from '@/interfaces';
+
+@Service()
+export class InventoryDetailsMetaInjectable {
+  @Inject()
+  private financialSheetMeta: FinancialSheetMeta;
+
+  /**
+   * Retrieve the inventoy details meta.
+   * @param {number} tenantId -
+   * @returns {IBalanceSheetMeta}
+   */
+  public async meta(
+    tenantId: number,
+    query: IInventoryDetailsQuery
+  ): Promise<IInventoryItemDetailMeta> {
+    const commonMeta = await this.financialSheetMeta.meta(tenantId);
+    const formattedFromDate = moment(query.fromDate).format('YYYY/MM/DD');
+    const formattedToDay = moment(query.toDate).format('YYYY/MM/DD');
+    const formattedDateRange = `From ${formattedFromDate} | To ${formattedToDay}`;
+
+    return {
+      ...commonMeta,
+      sheetName: 'Inventory Details',
+      formattedFromDate,
+      formattedToDay,
+      formattedDateRange,
+    };
+  }
+}
diff --git a/packages/server/src/services/FinancialStatements/InventoryDetails/InventoryDetailsService.ts b/packages/server/src/services/FinancialStatements/InventoryDetails/InventoryDetailsService.ts
index d74137753..e9b6614d6 100644
--- a/packages/server/src/services/FinancialStatements/InventoryDetails/InventoryDetailsService.ts
+++ b/packages/server/src/services/FinancialStatements/InventoryDetails/InventoryDetailsService.ts
@@ -1,17 +1,12 @@
 import moment from 'moment';
 import { Service, Inject } from 'typedi';
-import {
-  IInventoryDetailsQuery,
-  IInvetoryItemDetailDOO,
-  IInventoryItemDetailMeta,
-} from '@/interfaces';
+import { IInventoryDetailsQuery, IInvetoryItemDetailDOO } from '@/interfaces';
 import TenancyService from '@/services/Tenancy/TenancyService';
 import { InventoryDetails } from './InventoryDetails';
 import FinancialSheet from '../FinancialSheet';
 import InventoryDetailsRepository from './InventoryDetailsRepository';
-import InventoryService from '@/services/Inventory/Inventory';
-import { parseBoolean } from 'utils';
 import { Tenant } from '@/system/models';
+import { InventoryDetailsMetaInjectable } from './InventoryDetailsMeta';
 
 @Service()
 export class InventoryDetailsService extends FinancialSheet {
@@ -22,7 +17,7 @@ export class InventoryDetailsService extends FinancialSheet {
   private reportRepo: InventoryDetailsRepository;
 
   @Inject()
-  private inventoryService: InventoryService;
+  private inventoryDetailsMeta: InventoryDetailsMetaInjectable;
 
   /**
    * Defaults balance sheet filter query.
@@ -46,33 +41,6 @@ export class InventoryDetailsService extends FinancialSheet {
     };
   }
 
-  /**
-   * Retrieve the balance sheet meta.
-   * @param {number} tenantId -
-   * @returns {IInventoryItemDetailMeta}
-   */
-  private reportMetadata(tenantId: number): IInventoryItemDetailMeta {
-    const settings = this.tenancy.settings(tenantId);
-
-    const isCostComputeRunning =
-      this.inventoryService.isItemsCostComputeRunning(tenantId);
-
-    const organizationName = settings.get({
-      group: 'organization',
-      key: 'name',
-    });
-    const baseCurrency = settings.get({
-      group: 'organization',
-      key: 'base_currency',
-    });
-
-    return {
-      isCostComputeRunning: parseBoolean(isCostComputeRunning, false),
-      organizationName,
-      baseCurrency,
-    };
-  }
-
   /**
    * Retrieve the inventory details report data.
    * @param {number} tenantId -
@@ -115,11 +83,12 @@ export class InventoryDetailsService extends FinancialSheet {
       tenant.metadata.baseCurrency,
       i18n
     );
+    const meta = await this.inventoryDetailsMeta.meta(tenantId, query);
 
     return {
       data: inventoryDetailsInstance.reportData(),
       query: filter,
-      meta: this.reportMetadata(tenantId),
+      meta,
     };
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/InventoryDetails/InventoryDetailsTablePdf.ts b/packages/server/src/services/FinancialStatements/InventoryDetails/InventoryDetailsTablePdf.ts
index 1c2077fc6..4128fb3b2 100644
--- a/packages/server/src/services/FinancialStatements/InventoryDetails/InventoryDetailsTablePdf.ts
+++ b/packages/server/src/services/FinancialStatements/InventoryDetails/InventoryDetailsTablePdf.ts
@@ -1,8 +1,7 @@
-import { Inject, Service } from "typedi";
-import { InventoryDetailsTableInjectable } from "./InventoryDetailsTableInjectable";
-import { TableSheetPdf } from "../TableSheetPdf";
-import { IInventoryDetailsQuery } from "@/interfaces";
-
+import { Inject, Service } from 'typedi';
+import { InventoryDetailsTableInjectable } from './InventoryDetailsTableInjectable';
+import { TableSheetPdf } from '../TableSheetPdf';
+import { IInventoryDetailsQuery } from '@/interfaces';
 
 @Service()
 export class InventoryDetailsTablePdf {
@@ -23,14 +22,12 @@ export class InventoryDetailsTablePdf {
     query: IInventoryDetailsQuery
   ): Promise<Buffer> {
     const table = await this.inventoryDetailsTable.table(tenantId, query);
-    const sheetName = 'Inventory Items Details';
 
     return this.tableSheetPdf.convertToPdf(
       tenantId,
       table.table,
-      sheetName,
-      table.meta.baseCurrency
+      table.meta.sheetName,
+      table.meta.formattedDateRange
     );
   }
-
-}
\ No newline at end of file
+}
diff --git a/packages/server/src/services/FinancialStatements/InventoryValuationSheet/InventoryValuationSheetMeta.ts b/packages/server/src/services/FinancialStatements/InventoryValuationSheet/InventoryValuationSheetMeta.ts
new file mode 100644
index 000000000..822253342
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/InventoryValuationSheet/InventoryValuationSheetMeta.ts
@@ -0,0 +1,33 @@
+
+
+import { Inject, Service } from 'typedi';
+import { FinancialSheetMeta } from '../FinancialSheetMeta';
+import { IBalanceSheetMeta, IBalanceSheetQuery, IInventoryValuationReportQuery } from '@/interfaces';
+import moment from 'moment';
+
+@Service()
+export class InventoryValuationMetaInjectable {
+  @Inject()
+  private financialSheetMeta: FinancialSheetMeta;
+
+  /**
+   * Retrieve the balance sheet meta.
+   * @param {number} tenantId -
+   * @returns {IBalanceSheetMeta}
+   */
+  public async meta(
+    tenantId: number,
+    query: IInventoryValuationReportQuery
+  ): Promise<IBalanceSheetMeta> {
+    const commonMeta = await this.financialSheetMeta.meta(tenantId);
+    const formattedAsDate = moment(query.asDate).format('YYYY/MM/DD');
+    const formattedDateRange = `As ${formattedAsDate}`;
+
+    return {
+      ...commonMeta,
+      sheetName: 'Inventory Valuation Sheet',
+      formattedAsDate,
+      formattedDateRange,
+    };
+  }
+}
diff --git a/packages/server/src/services/FinancialStatements/InventoryValuationSheet/InventoryValuationSheetPdf.ts b/packages/server/src/services/FinancialStatements/InventoryValuationSheet/InventoryValuationSheetPdf.ts
index 6148816d8..31af8c5f9 100644
--- a/packages/server/src/services/FinancialStatements/InventoryValuationSheet/InventoryValuationSheetPdf.ts
+++ b/packages/server/src/services/FinancialStatements/InventoryValuationSheet/InventoryValuationSheetPdf.ts
@@ -23,13 +23,12 @@ export class InventoryValuationSheetPdf {
     query: IInventoryValuationReportQuery
   ): Promise<Buffer> {
     const table = await this.inventoryValuationTable.table(tenantId, query);
-    const sheetName = 'Inventory Valuation Sheet';
 
     return this.tableSheetPdf.convertToPdf(
       tenantId,
       table.table,
-      sheetName,
-      table.meta.baseCurrency
+      table.meta.sheetName,
+      table.meta.formattedDateRange
     );
   } 
 }
\ No newline at end of file
diff --git a/packages/server/src/services/FinancialStatements/InventoryValuationSheet/InventoryValuationSheetService.ts b/packages/server/src/services/FinancialStatements/InventoryValuationSheet/InventoryValuationSheetService.ts
index 7351522e9..4da85b21d 100644
--- a/packages/server/src/services/FinancialStatements/InventoryValuationSheet/InventoryValuationSheetService.ts
+++ b/packages/server/src/services/FinancialStatements/InventoryValuationSheet/InventoryValuationSheetService.ts
@@ -10,6 +10,7 @@ import TenancyService from '@/services/Tenancy/TenancyService';
 import { InventoryValuationSheet } from './InventoryValuationSheet';
 import InventoryService from '@/services/Inventory/Inventory';
 import { Tenant } from '@/system/models';
+import { InventoryValuationMetaInjectable } from './InventoryValuationSheetMeta';
 
 @Service()
 export class InventoryValuationSheetService {
@@ -22,6 +23,9 @@ export class InventoryValuationSheetService {
   @Inject()
   inventoryService: InventoryService;
 
+  @Inject()
+  private inventoryValuationMeta: InventoryValuationMetaInjectable;
+
   /**
    * Defaults balance sheet filter query.
    * @return {IBalanceSheetQuery}
@@ -46,33 +50,6 @@ export class InventoryValuationSheetService {
     };
   }
 
-  /**
-   * Retrieve the balance sheet meta.
-   * @param {number} tenantId -
-   * @returns {IBalanceSheetMeta}
-   */
-  reportMetadata(tenantId: number): IInventoryValuationSheetMeta {
-    const settings = this.tenancy.settings(tenantId);
-
-    const isCostComputeRunning =
-      this.inventoryService.isItemsCostComputeRunning(tenantId);
-
-    const organizationName = settings.get({
-      group: 'organization',
-      key: 'name',
-    });
-    const baseCurrency = settings.get({
-      group: 'organization',
-      key: 'base_currency',
-    });
-
-    return {
-      organizationName,
-      baseCurrency,
-      isCostComputeRunning,
-    };
-  }
-
   /**
    * Inventory valuation sheet.
    * @param {number} tenantId - Tenant id.
@@ -136,10 +113,13 @@ export class InventoryValuationSheetService {
     // Retrieve the inventory valuation report data.
     const inventoryValuationData = inventoryValuationInstance.reportData();
 
+    // Retrieves the inventorty valuation meta.
+    const meta = await this.inventoryValuationMeta.meta(tenantId, filter);
+
     return {
       data: inventoryValuationData,
       query: filter,
-      meta: this.reportMetadata(tenantId),
+      meta,
     };
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/JournalSheet/JournalSheetMeta.ts b/packages/server/src/services/FinancialStatements/JournalSheet/JournalSheetMeta.ts
new file mode 100644
index 000000000..5980e1e70
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/JournalSheet/JournalSheetMeta.ts
@@ -0,0 +1,34 @@
+import { Service, Inject } from 'typedi';
+import { FinancialSheetMeta } from '../FinancialSheetMeta';
+import moment from 'moment';
+import { IJournalReportQuery, IJournalSheetMeta } from '@/interfaces';
+
+@Service()
+export class JournalSheetMeta {
+  @Inject()
+  private financialSheetMeta: FinancialSheetMeta;
+
+  /**
+   * Retrieves the journal sheet meta.
+   * @param {number} tenantId 
+   * @param {IJournalReportQuery} query 
+   * @returns {Promise<IJournalSheetMeta>}
+   */
+  public async meta(
+    tenantId: number,
+    query: IJournalReportQuery
+  ): Promise<IJournalSheetMeta> {
+    const common = await this.financialSheetMeta.meta(tenantId);
+    const formattedToDate = moment(query.toDate).format('YYYY/MM/DD');
+    const formattedFromDate = moment(query.fromDate).format('YYYY/MM/DD');
+    const formattedDateRange = `From ${formattedFromDate} | To ${formattedToDate}`;
+
+    return {
+      ...common,
+      formattedDateRange,
+      formattedFromDate,
+      formattedToDate,
+    };
+  }
+}
+
diff --git a/packages/server/src/services/FinancialStatements/JournalSheet/JournalSheetPdfInjectable.ts b/packages/server/src/services/FinancialStatements/JournalSheet/JournalSheetPdfInjectable.ts
index e3fcbfb26..d3cdd11df 100644
--- a/packages/server/src/services/FinancialStatements/JournalSheet/JournalSheetPdfInjectable.ts
+++ b/packages/server/src/services/FinancialStatements/JournalSheet/JournalSheetPdfInjectable.ts
@@ -22,13 +22,12 @@ export class JournalSheetPdfInjectable {
     query: IJournalReportQuery
   ): Promise<Buffer> {
     const table = await this.journalSheetTable.table(tenantId, query);
-    const sheetName = 'Journal Sheet';
 
     return this.tableSheetPdf.convertToPdf(
       tenantId,
       table.table,
-      sheetName,
-      table.meta.baseCurrency
+      table.meta.sheetName,
+      table.meta.formattedDateRange
     );
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/JournalSheet/JournalSheetService.ts b/packages/server/src/services/FinancialStatements/JournalSheet/JournalSheetService.ts
index 69a319ff3..90027c3a1 100644
--- a/packages/server/src/services/FinancialStatements/JournalSheet/JournalSheetService.ts
+++ b/packages/server/src/services/FinancialStatements/JournalSheet/JournalSheetService.ts
@@ -1,17 +1,12 @@
 import { Service, Inject } from 'typedi';
 import moment from 'moment';
-import {
-  IJournalReportQuery,
-  IJournalSheet,
-  IJournalSheetMeta,
-  IJournalTableData,
-} from '@/interfaces';
+import { IJournalReportQuery, IJournalSheet } from '@/interfaces';
 import JournalSheet from './JournalSheet';
 import TenancyService from '@/services/Tenancy/TenancyService';
 import Journal from '@/services/Accounting/JournalPoster';
-import InventoryService from '@/services/Inventory/Inventory';
 import { Tenant } from '@/system/models';
-import { parseBoolean, transformToMap } from 'utils';
+import { transformToMap } from 'utils';
+import { JournalSheetMeta } from './JournalSheetMeta';
 
 @Service()
 export class JournalSheetService {
@@ -19,7 +14,7 @@ export class JournalSheetService {
   private tenancy: TenancyService;
 
   @Inject()
-  private inventoryService: InventoryService;
+  private journalSheetMeta: JournalSheetMeta;
 
   /**
    * Default journal sheet filter queyr.
@@ -38,33 +33,6 @@ export class JournalSheetService {
     };
   }
 
-  /**
-   * Retrieve the balance sheet meta.
-   * @param {number} tenantId -
-   * @returns {IBalanceSheetMeta}
-   */
-  reportMetadata(tenantId: number): IJournalSheetMeta {
-    const settings = this.tenancy.settings(tenantId);
-
-    const isCostComputeRunning =
-      this.inventoryService.isItemsCostComputeRunning(tenantId);
-
-    const organizationName = settings.get({
-      group: 'organization',
-      key: 'name',
-    });
-    const baseCurrency = settings.get({
-      group: 'organization',
-      key: 'base_currency',
-    });
-
-    return {
-      isCostComputeRunning: parseBoolean(isCostComputeRunning, false),
-      organizationName,
-      baseCurrency,
-    };
-  }
-
   /**
    * Journal sheet.
    * @param {number} tenantId
@@ -130,10 +98,13 @@ export class JournalSheetService {
     // Retrieve journal report columns.
     const journalSheetData = journalSheetInstance.reportData();
 
+    // Retrieve the journal sheet meta.
+    const meta = await this.journalSheetMeta.meta(tenantId, filter);
+
     return {
       data: journalSheetData,
       query: filter,
-      meta: this.reportMetadata(tenantId),
+      meta,
     };
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/PurchasesByItems/PurchasesByItemsMeta.ts b/packages/server/src/services/FinancialStatements/PurchasesByItems/PurchasesByItemsMeta.ts
new file mode 100644
index 000000000..4bb22c583
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/PurchasesByItems/PurchasesByItemsMeta.ts
@@ -0,0 +1,36 @@
+import moment from 'moment';
+import { Inject, Service } from 'typedi';
+import { FinancialSheetMeta } from '../FinancialSheetMeta';
+import {
+  IPurchasesByItemsReportQuery,
+  IPurchasesByItemsSheetMeta,
+} from '@/interfaces/PurchasesByItemsSheet';
+
+@Service()
+export class PurchasesByItemsMeta {
+  @Inject()
+  private financialSheetMeta: FinancialSheetMeta;
+
+  /**
+   * Retrieve the purchases by items meta.
+   * @param {number} tenantId -
+   * @returns {IBalanceSheetMeta}
+   */
+  public async meta(
+    tenantId: number,
+    query: IPurchasesByItemsReportQuery
+  ): Promise<IPurchasesByItemsSheetMeta> {
+    const commonMeta = await this.financialSheetMeta.meta(tenantId);
+    const formattedToDate = moment(query.toDate).format('YYYY/MM/DD');
+    const formattedFromDate = moment(query.fromDate).format('YYYY/MM/DD');
+    const formattedDateRange = `From ${formattedFromDate} | To ${formattedToDate}`;
+
+    return {
+      ...commonMeta,
+      sheetName: 'Purchases By Items',
+      formattedFromDate,
+      formattedToDate,
+      formattedDateRange,
+    };
+  }
+}
diff --git a/packages/server/src/services/FinancialStatements/PurchasesByItems/PurchasesByItemsPdf.ts b/packages/server/src/services/FinancialStatements/PurchasesByItems/PurchasesByItemsPdf.ts
index 36645aeb3..aee73ed99 100644
--- a/packages/server/src/services/FinancialStatements/PurchasesByItems/PurchasesByItemsPdf.ts
+++ b/packages/server/src/services/FinancialStatements/PurchasesByItems/PurchasesByItemsPdf.ts
@@ -22,13 +22,12 @@ export class PurchasesByItemsPdf {
     query: IPurchasesByItemsReportQuery
   ): Promise<Buffer> {
     const table = await this.purchasesByItemsTable.table(tenantId, query);
-    const sheetName = 'Purchases By Items';
 
     return this.tableSheetPdf.convertToPdf(
       tenantId,
       table.table,
-      sheetName,
-      table.meta.baseCurrency
+      table.meta.sheetName,
+      table.meta.formattedDateRange
     );
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/PurchasesByItems/PurchasesByItemsService.ts b/packages/server/src/services/FinancialStatements/PurchasesByItems/PurchasesByItemsService.ts
index b9455be39..a2d6240cb 100644
--- a/packages/server/src/services/FinancialStatements/PurchasesByItems/PurchasesByItemsService.ts
+++ b/packages/server/src/services/FinancialStatements/PurchasesByItems/PurchasesByItemsService.ts
@@ -6,19 +6,22 @@ import { Tenant } from '@/system/models';
 import {
   IPurchasesByItemsReportQuery,
   IPurchasesByItemsSheet,
-  IPurchasesByItemsSheetMeta,
 } from '@/interfaces/PurchasesByItemsSheet';
+import { PurchasesByItemsMeta } from './PurchasesByItemsMeta';
 
 @Service()
 export class PurchasesByItemsService {
   @Inject()
   private tenancy: TenancyService;
 
+  @Inject()
+  private purchasesByItemsMeta: PurchasesByItemsMeta;
+
   /**
    * Defaults purchases by items filter query.
    * @return {IPurchasesByItemsReportQuery}
    */
-  get defaultQuery(): IPurchasesByItemsReportQuery {
+  private get defaultQuery(): IPurchasesByItemsReportQuery {
     return {
       fromDate: moment().startOf('month').format('YYYY-MM-DD'),
       toDate: moment().format('YYYY-MM-DD'),
@@ -35,29 +38,6 @@ export class PurchasesByItemsService {
     };
   }
 
-  /**
-   * Retrieve the balance sheet meta.
-   * @param {number} tenantId -
-   * @returns {IBalanceSheetMeta}
-   */
-  reportMetadata(tenantId: number): IPurchasesByItemsSheetMeta {
-    const settings = this.tenancy.settings(tenantId);
-
-    const organizationName = settings.get({
-      group: 'organization',
-      key: 'name',
-    });
-    const baseCurrency = settings.get({
-      group: 'organization',
-      key: 'base_currency',
-    });
-
-    return {
-      organizationName,
-      baseCurrency,
-    };
-  }
-
   /**
    * Retrieve balance sheet statement.
    * -------------
@@ -109,10 +89,13 @@ export class PurchasesByItemsService {
     );
     const purchasesByItemsData = purchasesByItemsInstance.reportData();
 
+    // Retrieve the purchases by items meta.
+    const meta = await this.purchasesByItemsMeta.meta(tenantId, query);
+
     return {
       data: purchasesByItemsData,
       query: filter,
-      meta: this.reportMetadata(tenantId),
+      meta,
     };
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItems.ts b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItems.ts
index 8c7e11256..9d96febd5 100644
--- a/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItems.ts
+++ b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItems.ts
@@ -1,4 +1,5 @@
 import { get, sumBy } from 'lodash';
+
 import * as R from 'ramda';
 import FinancialSheet from '../FinancialSheet';
 import { allPassedConditionsPass, transformToMap } from 'utils';
diff --git a/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsApplication.ts b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsApplication.ts
index 2b0ffc959..3ca915e39 100644
--- a/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsApplication.ts
+++ b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsApplication.ts
@@ -1,4 +1,5 @@
 import { Inject, Service } from 'typedi';
+
 import {
   ISalesByItemsReportQuery,
   ISalesByItemsSheet,
diff --git a/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsMeta.ts b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsMeta.ts
new file mode 100644
index 000000000..e1e1d28e8
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsMeta.ts
@@ -0,0 +1,33 @@
+import moment from 'moment';
+import { Inject, Service } from 'typedi';
+import { FinancialSheetMeta } from '../FinancialSheetMeta';
+import { ISalesByItemsReportQuery, ISalesByItemsSheetMeta } from '@/interfaces';
+
+@Service()
+export class SalesByItemsMeta {
+  @Inject()
+  private financialSheetMeta: FinancialSheetMeta;
+
+  /**
+   * Retrieve the sales by items meta.
+   * @param {number} tenantId -
+   * @returns {IBalanceSheetMeta}
+   */
+  public async meta(
+    tenantId: number,
+    query: ISalesByItemsReportQuery
+  ): Promise<ISalesByItemsSheetMeta> {
+    const commonMeta = await this.financialSheetMeta.meta(tenantId);
+    const formattedToDate = moment(query.toDate).format('YYYY/MM/DD');
+    const formattedFromDate = moment(query.fromDate).format('YYYY/MM/DD');
+    const formattedDateRange = `From ${formattedFromDate} | To ${formattedToDate}`;
+
+    return {
+      ...commonMeta,
+      sheetName: 'Purchases By Items',
+      formattedFromDate,
+      formattedToDate,
+      formattedDateRange,
+    };
+  }
+}
diff --git a/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsPdfInjectable.ts b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsPdfInjectable.ts
index 6cf3d98ec..68f46e952 100644
--- a/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsPdfInjectable.ts
+++ b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsPdfInjectable.ts
@@ -22,13 +22,12 @@ export class SalesByItemsPdfInjectable {
     query: ISalesByItemsReportQuery
   ): Promise<Buffer> {
     const table = await this.salesByItemsTable.table(tenantId, query);
-    const sheetName = 'Sales By Items';
 
     return this.tableSheetPdf.convertToPdf(
       tenantId,
       table.table,
-      sheetName,
-      table.meta.baseCurrency
+      table.meta.sheetName,
+      table.meta.formattedDateRange
     );
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsService.ts b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsService.ts
index bad73e34b..1dc9b4f05 100644
--- a/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsService.ts
+++ b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsService.ts
@@ -1,27 +1,24 @@
 import { Service, Inject } from 'typedi';
 import moment from 'moment';
-import {
-  ISalesByItemsReportQuery,
-  ISalesByItemsSheetMeta,
-  ISalesByItemsSheet,
-} from '@/interfaces';
+import { ISalesByItemsReportQuery, ISalesByItemsSheet } from '@/interfaces';
 import TenancyService from '@/services/Tenancy/TenancyService';
 import SalesByItems from './SalesByItems';
 import { Tenant } from '@/system/models';
+import { SalesByItemsMeta } from './SalesByItemsMeta';
 
 @Service()
 export class SalesByItemsReportService {
   @Inject()
-  tenancy: TenancyService;
+  private tenancy: TenancyService;
 
-  @Inject('logger')
-  logger: any;
+  @Inject()
+  private salesByItemsMeta: SalesByItemsMeta;
 
   /**
    * Defaults balance sheet filter query.
    * @return {IBalanceSheetQuery}
    */
-  get defaultQuery(): ISalesByItemsReportQuery {
+  private get defaultQuery(): ISalesByItemsReportQuery {
     return {
       fromDate: moment().startOf('month').format('YYYY-MM-DD'),
       toDate: moment().format('YYYY-MM-DD'),
@@ -38,29 +35,6 @@ export class SalesByItemsReportService {
     };
   }
 
-  /**
-   * Retrieve the balance sheet meta.
-   * @param {number} tenantId -
-   * @returns {IBalanceSheetMeta}
-   */
-  reportMetadata(tenantId: number): ISalesByItemsSheetMeta {
-    const settings = this.tenancy.settings(tenantId);
-
-    const organizationName = settings.get({
-      group: 'organization',
-      key: 'name',
-    });
-    const baseCurrency = settings.get({
-      group: 'organization',
-      key: 'base_currency',
-    });
-
-    return {
-      organizationName,
-      baseCurrency,
-    };
-  }
-
   /**
    * Retrieve balance sheet statement.
    * @param {number} tenantId
@@ -112,10 +86,13 @@ export class SalesByItemsReportService {
     );
     const salesByItemsData = sheet.reportData();
 
+    // Retrieve the sales by items meta.
+    const meta = await this.salesByItemsMeta.meta(tenantId, query);
+
     return {
       data: salesByItemsData,
       query: filter,
-      meta: this.reportMetadata(tenantId),
+      meta,
     };
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryApplication.ts b/packages/server/src/services/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryApplication.ts
index 3b9f0d7b3..d5e73d28c 100644
--- a/packages/server/src/services/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryApplication.ts
+++ b/packages/server/src/services/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryApplication.ts
@@ -44,6 +44,7 @@ export class SalesTaxLiabilitySummaryApplication {
    * @param {number} tenantId
    * @param {SalesTaxLiabilitySummaryQuery} query
    * @returns {Promise<Buffer>}
+   * 
    */
   public xlsx(
     tenantId: number,
diff --git a/packages/server/src/services/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryMeta.ts b/packages/server/src/services/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryMeta.ts
new file mode 100644
index 000000000..0d45366e3
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryMeta.ts
@@ -0,0 +1,32 @@
+import { Inject, Service } from 'typedi';
+import moment from 'moment';
+import { SalesTaxLiabilitySummaryQuery } from '@/interfaces/SalesTaxLiabilitySummary';
+import { FinancialSheetMeta } from '../FinancialSheetMeta';
+
+@Service()
+export class SalesTaxLiabilitySummaryMeta {
+  @Inject()
+  private financialSheetMeta: FinancialSheetMeta;
+
+  /**
+   * Retrieves the report meta.
+   * @param {number} tenantId
+   * @param {SalesTaxLiabilitySummaryQuery} filter
+   */
+  public async meta(tenantId: number, query: SalesTaxLiabilitySummaryQuery) {
+    const commonMeta = await this.financialSheetMeta.meta(tenantId);
+    const formattedToDate = moment(query.toDate).format('YYYY/MM/DD');
+    const formattedFromDate = moment(query.toDate).format('YYYY/MM/DD');
+    const formattedDateRange = `From ${formattedFromDate} | To ${formattedToDate}`;
+
+    const sheetName = 'Sales Tax Liability Summary';
+
+    return {
+      ...commonMeta,
+      sheetName,
+      formattedFromDate,
+      formattedToDate,
+      formattedDateRange,
+    };
+  }
+}
diff --git a/packages/server/src/services/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryService.ts b/packages/server/src/services/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryService.ts
index a1ec7a771..585e9e4d9 100644
--- a/packages/server/src/services/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryService.ts
+++ b/packages/server/src/services/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryService.ts
@@ -1,11 +1,8 @@
 import { Inject, Service } from 'typedi';
 import { SalesTaxLiabilitySummaryRepository } from './SalesTaxLiabilitySummaryRepository';
-import {
-  SalesTaxLiabilitySummaryMeta,
-  SalesTaxLiabilitySummaryQuery,
-} from '@/interfaces/SalesTaxLiabilitySummary';
+import { SalesTaxLiabilitySummaryQuery } from '@/interfaces/SalesTaxLiabilitySummary';
 import { SalesTaxLiabilitySummary } from './SalesTaxLiabilitySummary';
-import HasTenancyService from '@/services/Tenancy/TenancyService';
+import { SalesTaxLiabilitySummaryMeta } from './SalesTaxLiabilitySummaryMeta';
 
 @Service()
 export class SalesTaxLiabilitySummaryService {
@@ -13,7 +10,7 @@ export class SalesTaxLiabilitySummaryService {
   private repostiory: SalesTaxLiabilitySummaryRepository;
 
   @Inject()
-  private tenancy: HasTenancyService;
+  private salesTaxLiabilityMeta: SalesTaxLiabilitySummaryMeta;
 
   /**
    * Retrieve sales tax liability summary.
@@ -39,33 +36,12 @@ export class SalesTaxLiabilitySummaryService {
       payableByRateId,
       salesByRateId
     );
+    const meta = await this.salesTaxLiabilityMeta.meta(tenantId, query);
+
     return {
       data: taxLiabilitySummary.reportData(),
       query,
-      meta: this.reportMetadata(tenantId),
-    };
-  }
-
-  /**
-   * Retrieve the report meta.
-   * @param {number} tenantId -
-   * @returns {IBalanceSheetMeta}
-   */
-  private reportMetadata(tenantId: number): SalesTaxLiabilitySummaryMeta {
-    const settings = this.tenancy.settings(tenantId);
-
-    const organizationName = settings.get({
-      group: 'organization',
-      key: 'name',
-    });
-    const baseCurrency = settings.get({
-      group: 'organization',
-      key: 'base_currency',
-    });
-
-    return {
-      organizationName,
-      baseCurrency,
+      meta,
     };
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabiltiySummaryPdf.ts b/packages/server/src/services/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabiltiySummaryPdf.ts
index 1b9a509a0..742241842 100644
--- a/packages/server/src/services/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabiltiySummaryPdf.ts
+++ b/packages/server/src/services/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabiltiySummaryPdf.ts
@@ -22,14 +22,15 @@ export class SalesTaxLiabiltiySummaryPdf {
     tenantId: number,
     query: SalesTaxLiabilitySummaryQuery
   ): Promise<Buffer> {
-    const table = await this.salesTaxLiabiltiySummaryTable.table(tenantId, query);
-    const sheetName = 'Sales Tax Liability Summary';
-
+    const table = await this.salesTaxLiabiltiySummaryTable.table(
+      tenantId,
+      query
+    );
     return this.tableSheetPdf.convertToPdf(
       tenantId,
       table.table,
-      sheetName,
-      table.meta.baseCurrency
+      table.meta.sheetName,
+      table.meta.formattedDateRange
     );
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/TableSheetPdf.ts b/packages/server/src/services/FinancialStatements/TableSheetPdf.ts
index edf216020..c7cbda662 100644
--- a/packages/server/src/services/FinancialStatements/TableSheetPdf.ts
+++ b/packages/server/src/services/FinancialStatements/TableSheetPdf.ts
@@ -14,34 +14,34 @@ export class TableSheetPdf {
   private chromiumlyTenancy: ChromiumlyTenancy;
 
   /**
-   * Converts the table to PDF.
-   * @param {number} tenantId -
-   * @param {IFinancialTable} table -
-   * @param {string} sheetName - Sheet name.
-   * @param {string} sheetDate - Sheet date.
+   * Converts the table data into a PDF format.
+   * @param {number} tenantId - The unique identifier for the tenant.
+   * @param {ITableData} table - The table data to be converted.
+   * @param {string} sheetName - The name of the sheet.
+   * @param {string} sheetDate - The date of the sheet.
+   * @returns A promise that resolves with the PDF conversion result.
    */
   public async convertToPdf(
     tenantId: number,
     table: ITableData,
     sheetName: string,
     sheetDate: string
-  ) {
+  ): Promise<Buffer> {
+    // Prepare columns and rows for PDF conversion
     const columns = this.tablePdfColumns(table.columns);
     const rows = this.tablePdfRows(table.rows);
+
+    // Generate HTML content from the template
     const htmlContent = await this.templateInjectable.render(
       tenantId,
       'modules/financial-sheet',
-      {
-        sheetName,
-        sheetDate,
-        table: { rows, columns },
-      }
+      { sheetName, sheetDate, table: { rows, columns } }
     );
+    // Convert the HTML content to PDF
     return this.chromiumlyTenancy.convertHtmlContent(tenantId, htmlContent, {
       margins: { top: 0, bottom: 0, left: 0, right: 0 },
     });
   }
-
   /**
    * Converts the table columns to pdf columns.
    * @param {ITableColumn[]} columns
diff --git a/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryApplication.ts b/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryApplication.ts
index c02eac224..3ce6081f6 100644
--- a/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryApplication.ts
+++ b/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryApplication.ts
@@ -72,5 +72,6 @@ export class VendorBalanceSummaryApplication {
    */
   public pdf(tenantId: number, query: IVendorBalanceSummaryQuery) {
     return this.vendorBalanceSummaryPdf.pdf(tenantId, query);
+    
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryMeta.ts b/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryMeta.ts
new file mode 100644
index 000000000..80071f8ca
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryMeta.ts
@@ -0,0 +1,32 @@
+import moment from 'moment';
+import { Inject, Service } from 'typedi';
+import { FinancialSheetMeta } from '../FinancialSheetMeta';
+import {
+  IVendorBalanceSummaryMeta,
+  IVendorBalanceSummaryQuery,
+} from '@/interfaces';
+
+@Service()
+export class VendorBalanceSummaryMeta {
+  @Inject()
+  private financialSheetMeta: FinancialSheetMeta;
+
+  /**
+   * Retrieves the vendor balance summary meta.
+   * @param {number} tenantId -
+   * @returns {IBalanceSheetMeta}
+   */
+  public async meta(
+    tenantId: number,
+    query: IVendorBalanceSummaryQuery
+  ): Promise<IVendorBalanceSummaryMeta> {
+    const commonMeta = await this.financialSheetMeta.meta(tenantId);
+    const formattedAsDate = moment(query.asDate).format('YYYY/MM/DD');
+
+    return {
+      ...commonMeta,
+      sheetName: 'Vendor Balance Summary',
+      formattedAsDate,
+    };
+  }
+}
diff --git a/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryPdf.ts b/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryPdf.ts
index a404d673e..90e21fbda 100644
--- a/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryPdf.ts
+++ b/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryPdf.ts
@@ -22,13 +22,13 @@ export class VendorBalanceSummaryPdf {
     query: IVendorBalanceSummaryQuery
   ): Promise<Buffer> {
     const table = await this.vendorBalanceSummaryTable.table(tenantId, query);
-    const sheetName = 'Sales By Items';
+    
 
     return this.tableSheetPdf.convertToPdf(
       tenantId,
       table.table,
-      sheetName,
-      table.meta.baseCurrency
+      table.meta.sheetName,
+      table.meta.formattedAsDate
     );
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryService.ts b/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryService.ts
index dfc529ab3..c64496b7b 100644
--- a/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryService.ts
+++ b/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryService.ts
@@ -12,15 +12,21 @@ import { VendorBalanceSummaryReport } from './VendorBalanceSummary';
 import Ledger from '@/services/Accounting/Ledger';
 import VendorBalanceSummaryRepository from './VendorBalanceSummaryRepository';
 import { Tenant } from '@/system/models';
+import { JournalSheetMeta } from '../JournalSheet/JournalSheetMeta';
+
+import { VendorBalanceSummaryMeta } from './VendorBalanceSummaryMeta';
 
 export class VendorBalanceSummaryService
   implements IVendorBalanceSummaryService
 {
   @Inject()
-  tenancy: TenancyService;
+  private tenancy: TenancyService;
 
   @Inject()
-  reportRepo: VendorBalanceSummaryRepository;
+  private reportRepo: VendorBalanceSummaryRepository;
+
+  @Inject()
+  private vendorBalanceSummaryMeta: VendorBalanceSummaryMeta;
 
   /**
    * Defaults balance sheet filter query.
@@ -43,6 +49,7 @@ export class VendorBalanceSummaryService
   }
 
   /**
+   * 
    * Retrieve the vendors ledger entrjes.
    * @param {number} tenantId -
    * @param {Date|string} date -
@@ -97,11 +104,13 @@ export class VendorBalanceSummaryService
       filter,
       tenant.metadata.baseCurrency
     );
+    // Retrieve the vendor balance summary meta.
+    const meta = await this.vendorBalanceSummaryMeta.meta(tenantId, filter);
 
     return {
       data: reportInstance.reportData(),
       query: filter,
-      meta: {}
+      meta
     };
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryTableInjectable.ts b/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryTableInjectable.ts
index 19f0c889c..c055b1151 100644
--- a/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryTableInjectable.ts
+++ b/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryTableInjectable.ts
@@ -29,6 +29,7 @@ export class VendorBalanceSummaryTableInjectable {
 
     const { data, meta } =
       await this.vendorBalanceSummarySheet.vendorBalanceSummary(
+        
         tenantId,
         query
       );

From 465bb66d6b6264518955570a83b222c5058074ca Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Sat, 17 Feb 2024 23:58:26 +0200
Subject: [PATCH 34/39] feat: financial reports meta

---
 .../src/interfaces/TransactionsByCustomers.ts |  2 ++
 .../TransactionsByCustomersMeta.ts            | 36 +++++++++++++++++++
 .../TransactionsByCustomersPdf.ts             |  8 ++---
 .../TransactionsByCustomersService.ts         |  8 ++++-
 .../TransactionsByCustomersTable.ts           | 18 ++++++++--
 .../TransactionsByVendorApplication.ts        |  1 +
 .../TransactionsByVendorInjectable.ts         |  8 ++++-
 .../TransactionsByVendorMeta.ts               | 36 +++++++++++++++++++
 .../TransactionsByVendorPdf.ts                |  5 ++-
 .../TransactionsByVendorTable.ts              | 11 ++++--
 .../ARAgingSummaryActionsBar.tsx              |  2 +-
 .../FinancialReports/use-balance-sheet.ts     | 22 ++++++++++--
 12 files changed, 139 insertions(+), 18 deletions(-)
 create mode 100644 packages/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersMeta.ts
 create mode 100644 packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorMeta.ts

diff --git a/packages/server/src/interfaces/TransactionsByCustomers.ts b/packages/server/src/interfaces/TransactionsByCustomers.ts
index 7635745c6..e47098b36 100644
--- a/packages/server/src/interfaces/TransactionsByCustomers.ts
+++ b/packages/server/src/interfaces/TransactionsByCustomers.ts
@@ -29,10 +29,12 @@ export type ITransactionsByCustomersData = ITransactionsByCustomersCustomer[];
 export interface ITransactionsByCustomersStatement {
   data: ITransactionsByCustomersData;
   query: ITransactionsByCustomersFilter;
+  meta: ITransactionsByCustomersMeta;
 }
 
 export interface ITransactionsByCustomersTable extends IFinancialTable {
   query: ITransactionsByCustomersFilter;
+  meta: ITransactionsByCustomersMeta;
 }
 
 export interface ITransactionsByCustomersService {
diff --git a/packages/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersMeta.ts b/packages/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersMeta.ts
new file mode 100644
index 000000000..710bc0bc4
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersMeta.ts
@@ -0,0 +1,36 @@
+import moment from 'moment';
+import { Inject, Service } from 'typedi';
+import { FinancialSheetMeta } from '../FinancialSheetMeta';
+import {
+  ITransactionsByCustomersFilter,
+  ITransactionsByCustomersMeta,
+} from '@/interfaces';
+
+@Service()
+export class TransactionsByCustomersMeta {
+  @Inject()
+  private financialSheetMeta: FinancialSheetMeta;
+
+  /**
+   * Retrieves the transactions by customers meta.
+   * @param {number} tenantId -
+   * @returns {IBalanceSheetMeta}
+   */
+  public async meta(
+    tenantId: number,
+    query: ITransactionsByCustomersFilter
+  ): Promise<ITransactionsByCustomersMeta> {
+    const commonMeta = await this.financialSheetMeta.meta(tenantId);
+    const formattedToDate = moment(query.toDate).format('YYYY/MM/DD');
+    const formattedFromDate = moment(query.fromDate).format('YYYY/MM/DD');
+    const formattedDateRange = `From ${formattedFromDate} | To ${formattedToDate}`;
+
+    return {
+      ...commonMeta,
+      sheetName: 'Transactions By Customers',
+      formattedFromDate,
+      formattedToDate,
+      formattedDateRange,
+    };
+  }
+}
diff --git a/packages/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersPdf.ts b/packages/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersPdf.ts
index 2926e63e6..122cbbaf2 100644
--- a/packages/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersPdf.ts
+++ b/packages/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersPdf.ts
@@ -13,7 +13,7 @@ export class TransactionsByCustomersPdf {
   /**
    * Retrieves the transactions by customers in PDF format.
    * @param {number} tenantId - Tenant ID.
-   * @param {IBalanceSheetQuery} query - Balance sheet query.
+   * @param {ITransactionsByCustomersFilter} query - Balance sheet query.
    * @returns {Promise<Buffer>}
    */
   public async pdf(
@@ -24,13 +24,11 @@ export class TransactionsByCustomersPdf {
       tenantId,
       query
     );
-    const sheetName = 'Transactions By Customers';
-
     return this.tableSheetPdf.convertToPdf(
       tenantId,
       table.table,
-      sheetName,
-      table.meta.baseCurrency
+      table.meta.sheetName,
+      table.meta.formattedDateRange
     );
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersService.ts b/packages/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersService.ts
index ed4483d61..a97a13afe 100644
--- a/packages/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersService.ts
+++ b/packages/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersService.ts
@@ -12,6 +12,7 @@ import TransactionsByCustomers from './TransactionsByCustomers';
 import Ledger from '@/services/Accounting/Ledger';
 import TransactionsByCustomersRepository from './TransactionsByCustomersRepository';
 import { Tenant } from '@/system/models';
+import { TransactionsByCustomersMeta } from './TransactionsByCustomersMeta';
 
 export class TransactionsByCustomersSheet
   implements ITransactionsByCustomersService
@@ -22,6 +23,9 @@ export class TransactionsByCustomersSheet
   @Inject()
   private reportRepository: TransactionsByCustomersRepository;
 
+  @Inject()
+  private transactionsByCustomersMeta: TransactionsByCustomersMeta;
+
   /**
    * Defaults balance sheet filter query.
    * @return {ICustomerBalanceSummaryQuery}
@@ -160,10 +164,12 @@ export class TransactionsByCustomersSheet
       i18n
     );
 
+    const meta = await this.transactionsByCustomersMeta.meta(tenantId, filter);
+
     return {
       data: reportInstance.reportData(),
       query: filter,
-      meta: {},
+      meta,
     };
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersTable.ts b/packages/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersTable.ts
index 7016cf853..2f38b9cde 100644
--- a/packages/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersTable.ts
+++ b/packages/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersTable.ts
@@ -1,6 +1,10 @@
 import * as R from 'ramda';
 import { tableRowMapper } from 'utils';
-import { ITransactionsByCustomersCustomer, ITableRow, ITableColumn } from '@/interfaces';
+import {
+  ITransactionsByCustomersCustomer,
+  ITableRow,
+  ITableColumn,
+} from '@/interfaces';
 import TransactionsByContactsTableRows from '../TransactionsByContact/TransactionsByContactTableRows';
 
 enum ROW_TYPE {
@@ -78,6 +82,14 @@ export class TransactionsByCustomersTable extends TransactionsByContactsTableRow
    * @returns {ITableColumn[]}
    */
   public tableColumns = (): ITableColumn[] => {
-    return [];
-  }
+    return [
+      { key: 'customer_name', label: 'Customer name' },
+      { key: 'account_name', label: 'Account Name' },
+      { key: 'ref_type', label: 'Reference Type' },
+      { key: 'transaction_type', label: 'Transaction Type' },
+      { key: 'credit', label: 'Credit' },
+      { key: 'debit', label: 'Debit' },
+      { key: 'running_balance', label: 'Running Balance' },
+    ];
+  };
 }
diff --git a/packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorApplication.ts b/packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorApplication.ts
index 744993bb0..54a4c7ed4 100644
--- a/packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorApplication.ts
+++ b/packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorApplication.ts
@@ -69,6 +69,7 @@ export class TransactionsByVendorApplication {
    * Retrieves the transactions by vendor in XLSX format.
    * @param {number} tenantId
    * @param {ITransactionsByVendorsFilter} query
+   * @returns {Promise<Buffer>}
    */
   public xlsx(
     tenantId: number,
diff --git a/packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorInjectable.ts b/packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorInjectable.ts
index 6738979a1..69b424957 100644
--- a/packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorInjectable.ts
+++ b/packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorInjectable.ts
@@ -12,6 +12,7 @@ import TransactionsByVendor from './TransactionsByVendor';
 import Ledger from '@/services/Accounting/Ledger';
 import TransactionsByVendorRepository from './TransactionsByVendorRepository';
 import { Tenant } from '@/system/models';
+import { TransactionsByVendorMeta } from './TransactionsByVendorMeta';
 
 export class TransactionsByVendorsInjectable
   implements ITransactionsByVendorsService
@@ -22,6 +23,9 @@ export class TransactionsByVendorsInjectable
   @Inject()
   private reportRepository: TransactionsByVendorRepository;
 
+  @Inject()
+  private transactionsByVendorMeta: TransactionsByVendorMeta;
+
   /**
    * Defaults balance sheet filter query.
    * @return {IVendorBalanceSummaryQuery}
@@ -165,10 +169,12 @@ export class TransactionsByVendorsInjectable
       tenant.metadata.baseCurrency,
       i18n
     );
+    const meta = await this.transactionsByVendorMeta.meta(tenantId, filter);
+
     return {
       data: reportInstance.reportData(),
       query: filter,
-      meta: {},
+      meta,
     };
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorMeta.ts b/packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorMeta.ts
new file mode 100644
index 000000000..ea31ac034
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorMeta.ts
@@ -0,0 +1,36 @@
+import moment from 'moment';
+import { Inject, Service } from 'typedi';
+import { FinancialSheetMeta } from '../FinancialSheetMeta';
+import {
+  ITransactionsByVendorMeta,
+  ITransactionsByVendorsFilter,
+} from '@/interfaces';
+
+@Service()
+export class TransactionsByVendorMeta {
+  @Inject()
+  private financialSheetMeta: FinancialSheetMeta;
+
+  /**
+   * Retrieves the transactions by vendor meta.
+   * @param {number} tenantId -
+   * @returns {Promise<ITransactionsByVendorMeta>}
+   */
+  public async meta(
+    tenantId: number,
+    query: ITransactionsByVendorsFilter
+  ): Promise<ITransactionsByVendorMeta> {
+    const commonMeta = await this.financialSheetMeta.meta(tenantId);
+    const formattedToDate = moment(query.toDate).format('YYYY/MM/DD');
+    const formattedFromDate = moment(query.fromDate).format('YYYY/MM/DD');
+    const formattedDateRange = `From ${formattedFromDate} | To ${formattedToDate}`;
+
+    return {
+      ...commonMeta,
+      sheetName: 'Transactions By Vendor',
+      formattedFromDate,
+      formattedToDate,
+      formattedDateRange,
+    };
+  }
+}
diff --git a/packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorPdf.ts b/packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorPdf.ts
index 6c8b7f68a..54ab1be40 100644
--- a/packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorPdf.ts
+++ b/packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorPdf.ts
@@ -22,13 +22,12 @@ export class TransactionsByVendorsPdf {
     query: ITransactionsByVendorsFilter
   ): Promise<Buffer> {
     const table = await this.transactionsByVendorTable.table(tenantId, query);
-    const sheetName = 'Transactions By Vendors';
 
     return this.tableSheetPdf.convertToPdf(
       tenantId,
       table.table,
-      sheetName,
-      table.meta.baseCurrency
+      table.meta.sheetName,
+      table.meta.formattedDateRange
     );
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorTable.ts b/packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorTable.ts
index 14ad3c1b4..2f8bf2498 100644
--- a/packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorTable.ts
+++ b/packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorTable.ts
@@ -43,7 +43,6 @@ export class TransactionsByVendorsTable extends TransactionsByContactsTableRows
         accessor: 'closingBalance.formattedAmount',
       },
     ];
-
     return {
       ...tableRowMapper(vendor, columns, { rowTypes: [ROW_TYPE.VENDOR] }),
       children: R.pipe(
@@ -82,6 +81,14 @@ export class TransactionsByVendorsTable extends TransactionsByContactsTableRows
    * @returns {ITableColumn[]}
    */
   public tableColumns = (): ITableColumn[] => {
-    return [];
+    return [
+      { key: 'vendor_name', label: 'Vendor name' },
+      { key: 'account_name', label: 'Account Name' },
+      { key: 'ref_type', label: 'Reference Type' },
+      { key: 'transaction_type', label: 'Transaction Type' },
+      { key: 'credit', label: 'Credit' },
+      { key: 'debit', label: 'Debit' },
+      { key: 'running_balance', label: 'Running Balance' },
+    ];
   };
 }
diff --git a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.tsx
index 7932d15d8..e0a0ab51c 100644
--- a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.tsx
@@ -17,10 +17,10 @@ import NumberFormatDropdown from '@/components/NumberFormatDropdown';
 import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
 import withARAgingSummaryActions from './withARAgingSummaryActions';
 import withARAgingSummary from './withARAgingSummary';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
 
 import { compose, safeInvoke } from '@/utils';
 import { ARAgingSummaryExportMenu } from './components';
-import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { DialogsName } from '@/constants/dialogs';
 
 /**
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-balance-sheet.ts b/packages/webapp/src/hooks/query/FinancialReports/use-balance-sheet.ts
index 38fcc7764..2eb19959d 100644
--- a/packages/webapp/src/hooks/query/FinancialReports/use-balance-sheet.ts
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-balance-sheet.ts
@@ -1,11 +1,15 @@
 // @ts-nocheck
+
 import { useRequestQuery } from '../../useQueryRequest';
 import { useDownloadFile } from '../../useDownloadFile';
 import { useRequestPdf } from '../../useRequestPdf';
 import t from '../types';
 
 /**
- * Retrieve balance sheet.
+ * Fetches balance sheet data.
+ * @param {Object} query - The query parameters for the request.
+ * @param {Object} props - Additional options for the request.
+ * @returns {Object} The response object from the useRequestQuery hook.
  */
 export function useBalanceSheet(query, props) {
   return useRequestQuery(
@@ -25,6 +29,12 @@ export function useBalanceSheet(query, props) {
   );
 }
 
+/**
+ * Initiates a download of the balance sheet in XLSX format.
+ * @param {Object} query - The query parameters for the request.
+ * @param {Object} args - Additional configurations for the download.
+ * @returns {Function} A function to trigger the file download.
+ */
 export const useBalanceSheetXlsxExport = (query, args) => {
   return useDownloadFile({
     url: '/financial_statements/balance_sheet',
@@ -39,6 +49,12 @@ export const useBalanceSheetXlsxExport = (query, args) => {
   });
 };
 
+/**
+ * Initiates a download of the balance sheet in CSV format.
+ * @param {Object} query - The query parameters for the request.
+ * @param {Object} args - Additional configurations for the download.
+ * @returns {Function} A function to trigger the file download.
+ */
 export const useBalanceSheetCsvExport = (query, args) => {
   return useDownloadFile({
     url: '/financial_statements/balance_sheet',
@@ -54,7 +70,9 @@ export const useBalanceSheetCsvExport = (query, args) => {
 };
 
 /**
- * Retrieves the balance sheet pdf document data.
+ * Fetches balance sheet data in PDF format.
+ * @param {Object} [query={}] - The query parameters for the request.
+ * @returns {Object} The response object from the useRequestPdf hook.
  */
 export function useBalanceSheetPdf(query = {}) {
   return useRequestPdf({

From 3509026ad859babd89a27004044862b72df4628f Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Sun, 18 Feb 2024 17:32:17 +0200
Subject: [PATCH 35/39] feat: wip financial reports printing

---
 .../InventoryDetails/InventoryDetailsMeta.ts                 | 4 +++-
 .../FinancialStatements/SalesByItems/SalesByItemsMeta.ts     | 4 +++-
 .../SalesTaxLiabilitySummaryApplication.ts                   | 1 -
 .../SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryMeta.ts | 2 +-
 .../PurchasesByItemsPdfDialogContent.tsx                     | 4 ++--
 .../VendorsBalanceSummary/VendorsBalanceSummaryProvider.tsx  | 1 +
 .../VendorBalancePdfDialog/VendorBalancePdfDialog.tsx        | 2 +-
 packages/webapp/src/hooks/useRequestPdf.tsx                  | 5 +++--
 8 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/packages/server/src/services/FinancialStatements/InventoryDetails/InventoryDetailsMeta.ts b/packages/server/src/services/FinancialStatements/InventoryDetails/InventoryDetailsMeta.ts
index 6c3001373..578954833 100644
--- a/packages/server/src/services/FinancialStatements/InventoryDetails/InventoryDetailsMeta.ts
+++ b/packages/server/src/services/FinancialStatements/InventoryDetails/InventoryDetailsMeta.ts
@@ -22,9 +22,11 @@ export class InventoryDetailsMetaInjectable {
     const formattedToDay = moment(query.toDate).format('YYYY/MM/DD');
     const formattedDateRange = `From ${formattedFromDate} | To ${formattedToDay}`;
 
+    const sheetName = 'Inventory Item Details';
+
     return {
       ...commonMeta,
-      sheetName: 'Inventory Details',
+      sheetName,
       formattedFromDate,
       formattedToDay,
       formattedDateRange,
diff --git a/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsMeta.ts b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsMeta.ts
index e1e1d28e8..b47b45215 100644
--- a/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsMeta.ts
+++ b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsMeta.ts
@@ -22,9 +22,11 @@ export class SalesByItemsMeta {
     const formattedFromDate = moment(query.fromDate).format('YYYY/MM/DD');
     const formattedDateRange = `From ${formattedFromDate} | To ${formattedToDate}`;
 
+    const sheetName = 'Sales By Items';
+
     return {
       ...commonMeta,
-      sheetName: 'Purchases By Items',
+      sheetName,
       formattedFromDate,
       formattedToDate,
       formattedDateRange,
diff --git a/packages/server/src/services/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryApplication.ts b/packages/server/src/services/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryApplication.ts
index d5e73d28c..3b9f0d7b3 100644
--- a/packages/server/src/services/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryApplication.ts
+++ b/packages/server/src/services/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryApplication.ts
@@ -44,7 +44,6 @@ export class SalesTaxLiabilitySummaryApplication {
    * @param {number} tenantId
    * @param {SalesTaxLiabilitySummaryQuery} query
    * @returns {Promise<Buffer>}
-   * 
    */
   public xlsx(
     tenantId: number,
diff --git a/packages/server/src/services/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryMeta.ts b/packages/server/src/services/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryMeta.ts
index 0d45366e3..c18a8f55d 100644
--- a/packages/server/src/services/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryMeta.ts
+++ b/packages/server/src/services/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryMeta.ts
@@ -16,7 +16,7 @@ export class SalesTaxLiabilitySummaryMeta {
   public async meta(tenantId: number, query: SalesTaxLiabilitySummaryQuery) {
     const commonMeta = await this.financialSheetMeta.meta(tenantId);
     const formattedToDate = moment(query.toDate).format('YYYY/MM/DD');
-    const formattedFromDate = moment(query.toDate).format('YYYY/MM/DD');
+    const formattedFromDate = moment(query.fromDate).format('YYYY/MM/DD');
     const formattedDateRange = `From ${formattedFromDate} | To ${formattedToDate}`;
 
     const sheetName = 'Sales Tax Liability Summary';
diff --git a/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/dialogs/PurchasesByItemsDialog/PurchasesByItemsPdfDialogContent.tsx b/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/dialogs/PurchasesByItemsDialog/PurchasesByItemsPdfDialogContent.tsx
index 45333df60..ec5f24fa7 100644
--- a/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/dialogs/PurchasesByItemsDialog/PurchasesByItemsPdfDialogContent.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/dialogs/PurchasesByItemsDialog/PurchasesByItemsPdfDialogContent.tsx
@@ -6,10 +6,10 @@ import {
   FormattedMessage as T,
 } from '@/components';
 import { usePurchasesByItemsPdfExport } from '@/hooks/query';
-import { usePurchasesByItemsQuery } from '../../utils';
+import { usePurchaseByItemsContext } from '../../PurchasesByItemsProvider';
 
 export default function PurchasesByItemsPdfDialogContent() {
-  const { httpQuery } = usePurchasesByItemsQuery();
+  const { httpQuery } = usePurchaseByItemsContext();
   const { isLoading, pdfUrl } = usePurchasesByItemsPdfExport(httpQuery);
 
   return (
diff --git a/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryProvider.tsx b/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryProvider.tsx
index b0f5c8881..7cd33efd5 100644
--- a/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryProvider.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryProvider.tsx
@@ -40,4 +40,5 @@ function VendorsBalanceSummaryProvider({ filter, ...props }) {
 
 const useVendorsBalanceSummaryContext = () =>
   React.useContext(VendorsBalanceSummaryContext);
+
 export { VendorsBalanceSummaryProvider, useVendorsBalanceSummaryContext };
diff --git a/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/dialogs/VendorBalancePdfDialog/VendorBalancePdfDialog.tsx b/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/dialogs/VendorBalancePdfDialog/VendorBalancePdfDialog.tsx
index 71b013704..c9c2bd8da 100644
--- a/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/dialogs/VendorBalancePdfDialog/VendorBalancePdfDialog.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/dialogs/VendorBalancePdfDialog/VendorBalancePdfDialog.tsx
@@ -20,7 +20,7 @@ function VendorBalancePdfDialogRoot({ dialogName, payload, isOpen }) {
   return (
     <Dialog
       name={dialogName}
-      title={'Vendor Balance Print Preview'}
+      title={'Vendor Balance Summary Print Preview'}
       className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
       autoFocus={true}
       canEscapeKeyClose={true}
diff --git a/packages/webapp/src/hooks/useRequestPdf.tsx b/packages/webapp/src/hooks/useRequestPdf.tsx
index 22df2385e..c729ed185 100644
--- a/packages/webapp/src/hooks/useRequestPdf.tsx
+++ b/packages/webapp/src/hooks/useRequestPdf.tsx
@@ -2,7 +2,7 @@
 import React from 'react';
 import useApiRequest from './useRequest';
 
-export const useRequestPdf = (url) => {
+export const useRequestPdf = (httpProps) => {
   const apiRequest = useApiRequest();
   const [isLoading, setIsLoading] = React.useState(false);
   const [isLoaded, setIsLoaded] = React.useState(false);
@@ -12,9 +12,10 @@ export const useRequestPdf = (url) => {
   React.useEffect(() => {
     setIsLoading(true);
     apiRequest
-      .get(url, {
+      .http({
         headers: { accept: 'application/pdf' },
         responseType: 'blob',
+        ...httpProps,
       })
       .then((response) => {
         // Create a Blob from the PDF Stream.

From c06a8d9ca36e90b49f9720466ee0a418f1567d20 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Mon, 19 Feb 2024 21:41:15 +0200
Subject: [PATCH 36/39] feat(server): styling financial reports pdf

---
 .../scss/modules/financial-sheet.scss         | 44 +++++++++++++------
 .../views/modules/financial-sheet.pug         |  9 ++--
 packages/server/scripts/gulpConfig.js         | 12 +++--
 .../APAgingSummaryPdfInjectable.ts            |  4 +-
 .../ARAgingSummaryPdfInjectable.ts            |  4 +-
 .../AgingSummary/_constants.ts                |  8 ++++
 .../BalanceSheet/BalanceSheetPdfInjectable.ts |  4 +-
 .../BalanceSheet/constants.ts                 | 12 +++++
 .../CashFlow/CashflowTablePdfInjectable.ts    |  7 +--
 .../FinancialStatements/CashFlow/constants.ts | 20 +++++++--
 .../CustomerBalanceSummaryPdf.ts              |  4 +-
 .../CustomerBalanceSummary/constants.ts       |  6 +++
 .../GeneralLedger/GeneralLedgerPdf.ts         |  4 +-
 .../GeneralLedger/constants.ts                | 13 ++++++
 .../InventoryDetailsTablePdf.ts               |  4 +-
 .../InventoryDetails/constant.ts              |  7 +++
 .../InventoryValuationSheetPdf.ts             |  4 +-
 .../InventoryValuationSheet/_constants.ts     |  8 ++++
 .../JournalSheet/JournalSheetPdfInjectable.ts |  4 +-
 .../JournalSheet/constant.ts                  | 10 +++++
 .../ProfitLossTablePdfInjectable.ts           |  4 +-
 .../ProfitLossSheet/constants.ts              | 10 ++++-
 .../PurchasesByItems/PurchasesByItemsPdf.ts   |  4 +-
 .../PurchasesByItems/_types.ts                | 10 ++++-
 .../SalesByItems/SalesByItemsPdfInjectable.ts |  4 +-
 .../SalesByItems/constants.ts                 | 12 +++--
 .../TrialBalanceSheetPdfInjectsable.ts        |  4 +-
 .../TrialBalanceSheetTable.ts                 |  1 -
 .../TrialBalanceSheet/_constants.ts           | 11 ++++-
 .../VendorBalanceSummary.ts                   |  6 +--
 .../VendorBalanceSummaryApplication.ts        |  1 -
 .../VendorBalanceSummaryPdf.ts                |  5 ++-
 .../VendorBalanceSummary/constants.ts         |  6 +++
 33 files changed, 210 insertions(+), 56 deletions(-)
 create mode 100644 packages/server/src/services/FinancialStatements/CustomerBalanceSummary/constants.ts
 create mode 100644 packages/server/src/services/FinancialStatements/GeneralLedger/constants.ts
 create mode 100644 packages/server/src/services/FinancialStatements/InventoryDetails/constant.ts
 create mode 100644 packages/server/src/services/FinancialStatements/JournalSheet/constant.ts
 create mode 100644 packages/server/src/services/FinancialStatements/VendorBalanceSummary/constants.ts

diff --git a/packages/server/resources/scss/modules/financial-sheet.scss b/packages/server/resources/scss/modules/financial-sheet.scss
index 5924dc2a3..bceb51dc0 100644
--- a/packages/server/resources/scss/modules/financial-sheet.scss
+++ b/packages/server/resources/scss/modules/financial-sheet.scss
@@ -1,41 +1,57 @@
+@import "../base.scss";
 
-.sheet{}
+html,
+body {
+  font-size: 14px;
+}
+body{
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.28581;
+  text-transform: none;
+  color: #000;
+  font-family: Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, Icons16, sans-serif;
+}
+.sheet{
+  padding: 20px;
+}
 .sheet__company-name{
   margin: 0;
-  font-size: 1.6rem;
+  font-size: 1.4rem;
 }
 .sheet__sheet-type {
   margin: 0
 }
 .sheet__sheet-date {
-  margin-top: 0.5rem;
+  margin-top: 0.35rem;
 }
 
 .sheet__header {
-    text-align: center;
-  margin-bottom: 2rem;
+  text-align: center;
+  margin-bottom: 1rem;
 }
 
 .sheet__table {
   border-top: 1px solid #000;
   table-layout: fixed;
-    border-spacing: 0;
-    text-align: left;
+  border-spacing: 0;
+  text-align: left;
+  font-size: inherit;
+  width: 100%;
 }
 
 .sheet__table thead th {
-    color: #000;
-    border-bottom: 1px solid #000000;
-    padding: 0.5rem;
+  color: #000;
+  border-bottom: 1px solid #000000;
+  padding: 0.5rem;
 }
 
 .sheet__table tbody td {
   border-bottom: 0;
-  padding-top: 0.32rem;
-  padding-bottom: 0.32rem;
+  padding-top: 0.28rem;
+  padding-bottom: 0.28rem;
   padding-left: 0.5rem;
   padding-right: 0.5rem;
   color: #252A31;
-  border-bottom: 1px solid rgb(37, 42, 49);
-  
+  border-bottom: 1px solid transparent;
 }
\ No newline at end of file
diff --git a/packages/server/resources/views/modules/financial-sheet.pug b/packages/server/resources/views/modules/financial-sheet.pug
index 7efb237ea..53d0b0308 100644
--- a/packages/server/resources/views/modules/financial-sheet.pug
+++ b/packages/server/resources/views/modules/financial-sheet.pug
@@ -1,6 +1,9 @@
 block head
   style 
-    //- include ../../css/modules/financial-sheet.css
+    include ../../css/modules/financial-sheet.css
+
+style.
+  #{customCSS}
 
 block content 
   .sheet 
@@ -13,9 +16,9 @@ block content
       thead
         tr
           each column in table.columns
-            th= column.label
+            th(style=column.style)= column.label
       tbody
         each row in table.rows
-          tr
+          tr(class=row.classNames)
             each cell in row.cells 
               td!= cell.value
\ No newline at end of file
diff --git a/packages/server/scripts/gulpConfig.js b/packages/server/scripts/gulpConfig.js
index 51bbc3aff..1caa9af23 100644
--- a/packages/server/scripts/gulpConfig.js
+++ b/packages/server/scripts/gulpConfig.js
@@ -66,12 +66,10 @@ module.exports = {
         // sourcemaps: true, // Allow to enable/disable sourcemaps or pass object to configure it.
         // minify: true, // Allow to enable/disable minify the source.
       },
-    //   {
-    //     src: './assets/sass/editor-style.scss',
-    //     dest: './assets/css',
-    //     sourcemaps: true,
-    //     minify: true,
-    //   },
+      {
+        src: `${RESOURCES_PATH}/scss/modules/financial-sheet.scss`,
+        dest: `${RESOURCES_PATH}/css/modules`,
+      },
     ],
     // RTL builds.
     rtl: [
@@ -114,7 +112,7 @@ module.exports = {
     // SASS Configuration for all builds.
     sass: {
       errLogToConsole: true,
-    //   outputStyle: 'compact',
+      //   outputStyle: 'compact',
     },
 
     // CSS MQ Packer configuration for all builds and style tasks.
diff --git a/packages/server/src/services/FinancialStatements/AgingSummary/APAgingSummaryPdfInjectable.ts b/packages/server/src/services/FinancialStatements/AgingSummary/APAgingSummaryPdfInjectable.ts
index 073970b91..50ef588e8 100644
--- a/packages/server/src/services/FinancialStatements/AgingSummary/APAgingSummaryPdfInjectable.ts
+++ b/packages/server/src/services/FinancialStatements/AgingSummary/APAgingSummaryPdfInjectable.ts
@@ -2,6 +2,7 @@ import { Inject, Service } from 'typedi';
 import { IAPAgingSummaryQuery } from '@/interfaces';
 import { TableSheetPdf } from '../TableSheetPdf';
 import { APAgingSummaryTableInjectable } from './APAgingSummaryTableInjectable';
+import { HtmlTableCss } from './_constants';
 
 @Service()
 export class APAgingSummaryPdfInjectable {
@@ -27,7 +28,8 @@ export class APAgingSummaryPdfInjectable {
       tenantId,
       table.table,
       table.meta.sheetName,
-      table.meta.formattedAsDate
+      table.meta.formattedAsDate,
+      HtmlTableCss
     );
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/AgingSummary/ARAgingSummaryPdfInjectable.ts b/packages/server/src/services/FinancialStatements/AgingSummary/ARAgingSummaryPdfInjectable.ts
index b0031ac37..a3b75f6d3 100644
--- a/packages/server/src/services/FinancialStatements/AgingSummary/ARAgingSummaryPdfInjectable.ts
+++ b/packages/server/src/services/FinancialStatements/AgingSummary/ARAgingSummaryPdfInjectable.ts
@@ -2,6 +2,7 @@ import { Inject, Service } from 'typedi';
 import { IARAgingSummaryQuery } from '@/interfaces';
 import { TableSheetPdf } from '../TableSheetPdf';
 import { ARAgingSummaryTableInjectable } from './ARAgingSummaryTableInjectable';
+import { HtmlTableCss } from './_constants';
 
 @Service()
 export class ARAgingSummaryPdfInjectable {
@@ -27,7 +28,8 @@ export class ARAgingSummaryPdfInjectable {
       tenantId,
       table.table,
       table.meta.sheetName,
-      table.meta.formattedDateRange
+      table.meta.formattedDateRange,
+      HtmlTableCss
     );
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/AgingSummary/_constants.ts b/packages/server/src/services/FinancialStatements/AgingSummary/_constants.ts
index 961f0b7ed..4f68704cb 100644
--- a/packages/server/src/services/FinancialStatements/AgingSummary/_constants.ts
+++ b/packages/server/src/services/FinancialStatements/AgingSummary/_constants.ts
@@ -2,3 +2,11 @@ export enum AgingSummaryRowType {
   Contact = 'contact',
   Total = 'total',
 }
+
+export const HtmlTableCss = `
+table tr.row-type--total td{
+  font-weight: 500;
+  border-top: 1px solid #bbb;
+  border-bottom: 3px double #333;
+}
+`;
diff --git a/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetPdfInjectable.ts b/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetPdfInjectable.ts
index 2f776c224..4cbb43e8a 100644
--- a/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetPdfInjectable.ts
+++ b/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetPdfInjectable.ts
@@ -2,6 +2,7 @@ import { Inject, Service } from 'typedi';
 import { IBalanceSheetQuery } from '@/interfaces';
 import { BalanceSheetTableInjectable } from './BalanceSheetTableInjectable';
 import { TableSheetPdf } from '../TableSheetPdf';
+import { HtmlTableCustomCss } from './constants';
 
 @Service()
 export class BalanceSheetPdfInjectable {
@@ -27,7 +28,8 @@ export class BalanceSheetPdfInjectable {
       tenantId,
       table.table,
       table.meta.sheetName,
-      table.meta.formattedDateRange
+      table.meta.formattedDateRange,
+      HtmlTableCustomCss
     );
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/BalanceSheet/constants.ts b/packages/server/src/services/FinancialStatements/BalanceSheet/constants.ts
index 8862408a1..5d4cf08b1 100644
--- a/packages/server/src/services/FinancialStatements/BalanceSheet/constants.ts
+++ b/packages/server/src/services/FinancialStatements/BalanceSheet/constants.ts
@@ -12,3 +12,15 @@ export enum IROW_TYPE {
   NET_INCOME = 'NET_INCOME',
   TOTAL = 'TOTAL',
 }
+
+export const HtmlTableCustomCss = `
+table tr.row-type--total td {
+  font-weight: 600;
+  border-top: 1px solid #bbb;
+  color: #000;  
+}
+table tr.row-type--total.row-id--assets td,
+table tr.row-type--total.row-id--liability-equity td {
+  border-bottom: 3px double #000;
+}
+`;
diff --git a/packages/server/src/services/FinancialStatements/CashFlow/CashflowTablePdfInjectable.ts b/packages/server/src/services/FinancialStatements/CashFlow/CashflowTablePdfInjectable.ts
index 8455028f9..be7cb5382 100644
--- a/packages/server/src/services/FinancialStatements/CashFlow/CashflowTablePdfInjectable.ts
+++ b/packages/server/src/services/FinancialStatements/CashFlow/CashflowTablePdfInjectable.ts
@@ -2,6 +2,7 @@ import { Inject } from 'typedi';
 import { CashflowTableInjectable } from './CashflowTableInjectable';
 import { TableSheetPdf } from '../TableSheetPdf';
 import { ICashFlowStatementQuery } from '@/interfaces';
+import { HtmlTableCustomCss } from './constants';
 
 export class CashflowTablePdfInjectable {
   @Inject()
@@ -21,13 +22,13 @@ export class CashflowTablePdfInjectable {
     query: ICashFlowStatementQuery
   ): Promise<Buffer> {
     const table = await this.cashflowTable.table(tenantId, query);
-    const sheetName = 'Cashflow Sheet';
 
     return this.tableSheetPdf.convertToPdf(
       tenantId,
       table.table,
-      sheetName,
-      table.meta.formattedDateRange
+      table.meta.sheetName,
+      table.meta.formattedDateRange,
+      HtmlTableCustomCss
     );
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/CashFlow/constants.ts b/packages/server/src/services/FinancialStatements/CashFlow/constants.ts
index 58a92ec19..c8a9f348c 100644
--- a/packages/server/src/services/FinancialStatements/CashFlow/constants.ts
+++ b/packages/server/src/services/FinancialStatements/CashFlow/constants.ts
@@ -1,8 +1,22 @@
-
-
 export const DISPLAY_COLUMNS_BY = {
   DATE_PERIODS: 'date_periods',
   TOTAL: 'total',
 };
 
-export const MAP_CONFIG = { childrenPath: 'children', pathFormat: 'array' };
\ No newline at end of file
+export const MAP_CONFIG = { childrenPath: 'children', pathFormat: 'array' };
+export const HtmlTableCustomCss = `
+table tr.row-type--accounts td {
+  border-top: 1px solid #bbb;
+}
+table tr.row-id--cash-end-period {
+  border-bottom: 3px double #333;
+}
+table tr.row-type--total {
+  font-weight: 600;
+}
+table tr.row-type--total td { 
+  color: #000;
+}
+table tr.row-type--total:not(:first-child) td {
+  border-top: 1px solid #bbb;
+}`;
diff --git a/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryPdf.ts b/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryPdf.ts
index b1bff25d8..38d36fd48 100644
--- a/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryPdf.ts
+++ b/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryPdf.ts
@@ -3,6 +3,7 @@ import { ICustomerBalanceSummaryQuery } from '@/interfaces';
 
 import { TableSheetPdf } from '../TableSheetPdf';
 import { CustomerBalanceSummaryTableInjectable } from './CustomerBalanceSummaryTableInjectable';
+import { HtmlTableCustomCss } from './constants';
 
 @Service()
 export class CustomerBalanceSummaryPdf {
@@ -28,7 +29,8 @@ export class CustomerBalanceSummaryPdf {
       tenantId,
       table.table,
       table.meta.sheetName,
-      table.meta.formattedDateRange
+      table.meta.formattedDateRange,
+      HtmlTableCustomCss
     );
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/constants.ts b/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/constants.ts
new file mode 100644
index 000000000..50c3aac24
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/CustomerBalanceSummary/constants.ts
@@ -0,0 +1,6 @@
+export const HtmlTableCustomCss = `
+table tr.row-type--total td {
+  font-weight: 600;
+  border-top: 1px solid #bbb;
+  border-bottom: 3px double #333;
+}`;
diff --git a/packages/server/src/services/FinancialStatements/GeneralLedger/GeneralLedgerPdf.ts b/packages/server/src/services/FinancialStatements/GeneralLedger/GeneralLedgerPdf.ts
index f03a26ce7..efe082709 100644
--- a/packages/server/src/services/FinancialStatements/GeneralLedger/GeneralLedgerPdf.ts
+++ b/packages/server/src/services/FinancialStatements/GeneralLedger/GeneralLedgerPdf.ts
@@ -2,6 +2,7 @@ import { Inject, Service } from 'typedi';
 import { TableSheetPdf } from '../TableSheetPdf';
 import { GeneralLedgerTableInjectable } from './GeneralLedgerTableInjectable';
 import { IGeneralLedgerSheetQuery } from '@/interfaces';
+import { HtmlTableCustomCss } from './constants';
 
 @Service()
 export class GeneralLedgerPdf {
@@ -27,7 +28,8 @@ export class GeneralLedgerPdf {
       tenantId,
       table.table,
       table.meta.sheetName,
-      table.meta.formattedDateRange
+      table.meta.formattedDateRange,
+      HtmlTableCustomCss
     );
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/GeneralLedger/constants.ts b/packages/server/src/services/FinancialStatements/GeneralLedger/constants.ts
new file mode 100644
index 000000000..26b5ceb8c
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/GeneralLedger/constants.ts
@@ -0,0 +1,13 @@
+export const HtmlTableCustomCss = `
+table tr:last-child td {
+  border-bottom: 1px solid #ececec;
+}
+table tr.row-type--account td,
+table tr.row-type--opening-balance td,
+table tr.row-type--closing-balance td{
+  font-weight: 600;
+}
+table tr.row-type--closing-balance td {
+  border-bottom: 1px solid #ececec; 
+}
+`;
diff --git a/packages/server/src/services/FinancialStatements/InventoryDetails/InventoryDetailsTablePdf.ts b/packages/server/src/services/FinancialStatements/InventoryDetails/InventoryDetailsTablePdf.ts
index 4128fb3b2..b14b11c80 100644
--- a/packages/server/src/services/FinancialStatements/InventoryDetails/InventoryDetailsTablePdf.ts
+++ b/packages/server/src/services/FinancialStatements/InventoryDetails/InventoryDetailsTablePdf.ts
@@ -2,6 +2,7 @@ import { Inject, Service } from 'typedi';
 import { InventoryDetailsTableInjectable } from './InventoryDetailsTableInjectable';
 import { TableSheetPdf } from '../TableSheetPdf';
 import { IInventoryDetailsQuery } from '@/interfaces';
+import { HtmlTableCustomCss } from './constant';
 
 @Service()
 export class InventoryDetailsTablePdf {
@@ -27,7 +28,8 @@ export class InventoryDetailsTablePdf {
       tenantId,
       table.table,
       table.meta.sheetName,
-      table.meta.formattedDateRange
+      table.meta.formattedDateRange,
+      HtmlTableCustomCss
     );
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/InventoryDetails/constant.ts b/packages/server/src/services/FinancialStatements/InventoryDetails/constant.ts
new file mode 100644
index 000000000..eeb199236
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/InventoryDetails/constant.ts
@@ -0,0 +1,7 @@
+export const HtmlTableCustomCss = `
+table tr.row-type--item td, 
+table tr.row-type--opening-entry td,
+table tr.row-type--closing-entry td{
+  font-weight: 500;
+}
+`;
diff --git a/packages/server/src/services/FinancialStatements/InventoryValuationSheet/InventoryValuationSheetPdf.ts b/packages/server/src/services/FinancialStatements/InventoryValuationSheet/InventoryValuationSheetPdf.ts
index 31af8c5f9..449cec9cc 100644
--- a/packages/server/src/services/FinancialStatements/InventoryValuationSheet/InventoryValuationSheetPdf.ts
+++ b/packages/server/src/services/FinancialStatements/InventoryValuationSheet/InventoryValuationSheetPdf.ts
@@ -2,6 +2,7 @@ import { Inject, Service } from "typedi";
 import { InventoryValuationSheetTableInjectable } from "./InventoryValuationSheetTableInjectable";
 import { TableSheetPdf } from "../TableSheetPdf";
 import { IInventoryValuationReportQuery } from "@/interfaces";
+import { HtmlTableCustomCss } from "./_constants";
 
 
 @Service()
@@ -28,7 +29,8 @@ export class InventoryValuationSheetPdf {
       tenantId,
       table.table,
       table.meta.sheetName,
-      table.meta.formattedDateRange
+      table.meta.formattedDateRange,
+      HtmlTableCustomCss
     );
   } 
 }
\ No newline at end of file
diff --git a/packages/server/src/services/FinancialStatements/InventoryValuationSheet/_constants.ts b/packages/server/src/services/FinancialStatements/InventoryValuationSheet/_constants.ts
index a4154f92f..f41136b6f 100644
--- a/packages/server/src/services/FinancialStatements/InventoryValuationSheet/_constants.ts
+++ b/packages/server/src/services/FinancialStatements/InventoryValuationSheet/_constants.ts
@@ -2,3 +2,11 @@ export enum ROW_TYPE {
   ITEM = 'ITEM',
   TOTAL = 'TOTAL',
 }
+
+export const HtmlTableCustomCss = `
+table tr.row-type--total td {
+  border-top: 1px solid #bbb;
+  font-weight: 600;
+  border-bottom: 3px double #000;
+}
+`;
diff --git a/packages/server/src/services/FinancialStatements/JournalSheet/JournalSheetPdfInjectable.ts b/packages/server/src/services/FinancialStatements/JournalSheet/JournalSheetPdfInjectable.ts
index d3cdd11df..6606d6705 100644
--- a/packages/server/src/services/FinancialStatements/JournalSheet/JournalSheetPdfInjectable.ts
+++ b/packages/server/src/services/FinancialStatements/JournalSheet/JournalSheetPdfInjectable.ts
@@ -2,6 +2,7 @@ import { IJournalReportQuery } from '@/interfaces';
 import { TableSheetPdf } from '../TableSheetPdf';
 import { JournalSheetTableInjectable } from './JournalSheetTableInjectable';
 import { Inject, Service } from 'typedi';
+import { HtmlTableCustomCss } from './constant';
 
 @Service()
 export class JournalSheetPdfInjectable {
@@ -27,7 +28,8 @@ export class JournalSheetPdfInjectable {
       tenantId,
       table.table,
       table.meta.sheetName,
-      table.meta.formattedDateRange
+      table.meta.formattedDateRange,
+      HtmlTableCustomCss
     );
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/JournalSheet/constant.ts b/packages/server/src/services/FinancialStatements/JournalSheet/constant.ts
new file mode 100644
index 000000000..5f5f975ec
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/JournalSheet/constant.ts
@@ -0,0 +1,10 @@
+export const HtmlTableCustomCss = `
+table tr.row-type--total td{
+  font-weight: 600;
+}
+table tr td:not(:first-child) {
+  border-left: 1px solid #ececec;
+}
+table tr:last-child td {
+  border-bottom: 1px solid #ececec; 
+}`;
diff --git a/packages/server/src/services/FinancialStatements/ProfitLossSheet/ProfitLossTablePdfInjectable.ts b/packages/server/src/services/FinancialStatements/ProfitLossSheet/ProfitLossTablePdfInjectable.ts
index e6348fdf6..4b0ba23de 100644
--- a/packages/server/src/services/FinancialStatements/ProfitLossSheet/ProfitLossTablePdfInjectable.ts
+++ b/packages/server/src/services/FinancialStatements/ProfitLossSheet/ProfitLossTablePdfInjectable.ts
@@ -2,6 +2,7 @@ import { Inject, Service } from 'typedi';
 import { IProfitLossSheetQuery } from '@/interfaces';
 import { ProfitLossSheetTableInjectable } from './ProfitLossSheetTableInjectable';
 import { TableSheetPdf } from '../TableSheetPdf';
+import { HtmlTableCustomCss } from './constants';
 
 @Service()
 export class ProfitLossTablePdfInjectable {
@@ -27,7 +28,8 @@ export class ProfitLossTablePdfInjectable {
       tenantId,
       table.table,
       table.meta.sheetName,
-      table.meta.formattedDateRange
+      table.meta.formattedDateRange,
+      HtmlTableCustomCss
     );
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/ProfitLossSheet/constants.ts b/packages/server/src/services/FinancialStatements/ProfitLossSheet/constants.ts
index 56f4a14ba..0bb2a28de 100644
--- a/packages/server/src/services/FinancialStatements/ProfitLossSheet/constants.ts
+++ b/packages/server/src/services/FinancialStatements/ProfitLossSheet/constants.ts
@@ -18,4 +18,12 @@ export const TOTAL_NODE_TYPES = [
   ProfitLossNodeType.ACCOUNTS,
   ProfitLossNodeType.AGGREGATE,
   ProfitLossNodeType.EQUATION
-];
\ No newline at end of file
+];
+
+export const HtmlTableCustomCss =`
+table tr.row-type--total td {
+  font-weight: 600;
+  border-top: 1px solid #bbb;
+  color: #000;
+}
+`;
\ No newline at end of file
diff --git a/packages/server/src/services/FinancialStatements/PurchasesByItems/PurchasesByItemsPdf.ts b/packages/server/src/services/FinancialStatements/PurchasesByItems/PurchasesByItemsPdf.ts
index aee73ed99..67e3e7a24 100644
--- a/packages/server/src/services/FinancialStatements/PurchasesByItems/PurchasesByItemsPdf.ts
+++ b/packages/server/src/services/FinancialStatements/PurchasesByItems/PurchasesByItemsPdf.ts
@@ -2,6 +2,7 @@ import { Inject, Service } from 'typedi';
 import { TableSheetPdf } from '../TableSheetPdf';
 import { PurchasesByItemsTableInjectable } from './PurchasesByItemsTableInjectable';
 import { IPurchasesByItemsReportQuery } from '@/interfaces/PurchasesByItemsSheet';
+import { HtmlTableCustomCss } from './_types';
 
 @Service()
 export class PurchasesByItemsPdf {
@@ -27,7 +28,8 @@ export class PurchasesByItemsPdf {
       tenantId,
       table.table,
       table.meta.sheetName,
-      table.meta.formattedDateRange
+      table.meta.formattedDateRange,
+      HtmlTableCustomCss
     );
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/PurchasesByItems/_types.ts b/packages/server/src/services/FinancialStatements/PurchasesByItems/_types.ts
index d9fbb7dc0..625c6dff4 100644
--- a/packages/server/src/services/FinancialStatements/PurchasesByItems/_types.ts
+++ b/packages/server/src/services/FinancialStatements/PurchasesByItems/_types.ts
@@ -2,4 +2,12 @@
 export enum ROW_TYPE {
   TOTAL = 'TOTAL',
   ITEM = 'ITEM'
-}
\ No newline at end of file
+}
+
+export const HtmlTableCustomCss = `
+table tr.row-type--total td {
+  border-top: 1px solid #bbb;
+  border-bottom: 3px double #000;
+  font-weight: 600;
+}
+`;
\ No newline at end of file
diff --git a/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsPdfInjectable.ts b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsPdfInjectable.ts
index 68f46e952..874154086 100644
--- a/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsPdfInjectable.ts
+++ b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsPdfInjectable.ts
@@ -2,6 +2,7 @@ import { Inject, Service } from 'typedi';
 import { ISalesByItemsReportQuery } from '@/interfaces';
 import { SalesByItemsTableInjectable } from './SalesByItemsTableInjectable';
 import { TableSheetPdf } from '../TableSheetPdf';
+import { HtmlTableCustomCss } from './constants';
 
 @Service()
 export class SalesByItemsPdfInjectable {
@@ -27,7 +28,8 @@ export class SalesByItemsPdfInjectable {
       tenantId,
       table.table,
       table.meta.sheetName,
-      table.meta.formattedDateRange
+      table.meta.formattedDateRange,
+      HtmlTableCustomCss
     );
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/SalesByItems/constants.ts b/packages/server/src/services/FinancialStatements/SalesByItems/constants.ts
index 0eb1e2311..cb0b00bae 100644
--- a/packages/server/src/services/FinancialStatements/SalesByItems/constants.ts
+++ b/packages/server/src/services/FinancialStatements/SalesByItems/constants.ts
@@ -1,6 +1,12 @@
-
-
 export enum ROW_TYPE {
   ITEM = 'ITEM',
   TOTAL = 'TOTAL',
-}
\ No newline at end of file
+}
+
+export const HtmlTableCustomCss = `
+table tr.row-type--total td {
+  border-top: 1px solid #bbb;
+  border-bottom: 3px double #000;
+  font-weight: 600;
+}
+`;
diff --git a/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetPdfInjectsable.ts b/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetPdfInjectsable.ts
index 89e1e73f3..b7b53d437 100644
--- a/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetPdfInjectsable.ts
+++ b/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetPdfInjectsable.ts
@@ -2,6 +2,7 @@ import { Inject, Service } from 'typedi';
 import { ITrialBalanceSheetQuery } from '@/interfaces';
 import { TableSheetPdf } from '../TableSheetPdf';
 import { TrialBalanceSheetTableInjectable } from './TrialBalanceSheetTableInjectable';
+import { HtmlTableCustomCss } from './_constants';
 
 @Service()
 export class TrialBalanceSheetPdfInjectable {
@@ -27,7 +28,8 @@ export class TrialBalanceSheetPdfInjectable {
       tenantId,
       table.table,
       table.meta.sheetName,
-      table.meta.formattedDateRange
+      table.meta.formattedDateRange,
+      HtmlTableCustomCss
     );
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.ts b/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.ts
index 5de03eb71..1addd1996 100644
--- a/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.ts
+++ b/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.ts
@@ -2,7 +2,6 @@ import * as R from 'ramda';
 import FinancialSheet from '../FinancialSheet';
 import { FinancialTable } from '../FinancialTable';
 import {
-  IBalanceSheetStatementData,
   ITableColumn,
   ITableColumnAccessor,
   ITableRow,
diff --git a/packages/server/src/services/FinancialStatements/TrialBalanceSheet/_constants.ts b/packages/server/src/services/FinancialStatements/TrialBalanceSheet/_constants.ts
index 91e8c595f..9bc4dfdb0 100644
--- a/packages/server/src/services/FinancialStatements/TrialBalanceSheet/_constants.ts
+++ b/packages/server/src/services/FinancialStatements/TrialBalanceSheet/_constants.ts
@@ -1,5 +1,12 @@
-
 export enum IROW_TYPE {
   ACCOUNT = 'ACCOUNT',
   TOTAL = 'TOTAL',
-}
\ No newline at end of file
+}
+
+export const HtmlTableCustomCss = `
+table tr.row-type--total td{
+  border-top: 1px solid #bbb;
+  font-weight: 500;
+  border-bottom: 3px double #000;
+}
+`;
diff --git a/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummary.ts b/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummary.ts
index 2e5e09aa4..6d04461b6 100644
--- a/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummary.ts
+++ b/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummary.ts
@@ -41,7 +41,7 @@ export class VendorBalanceSummaryReport extends ContactBalanceSummaryReport {
 
   /**
    * Customer section mapper.
-   * @param   {IVendor} vendor
+   * @param {IVendor} vendor
    * @returns {IVendorBalanceSummaryVendor}
    */
   private vendorMapper = (vendor: IVendor): IVendorBalanceSummaryVendor => {
@@ -58,7 +58,7 @@ export class VendorBalanceSummaryReport extends ContactBalanceSummaryReport {
 
   /**
    * Mappes the vendor model object to vendor balance summary section.
-   * @param   {IVendor[]} vendors - Customers.
+   * @param {IVendor[]} vendors - Customers.
    * @returns {IVendorBalanceSummaryVendor[]}
    */
   private vendorsMapper = (
@@ -77,7 +77,7 @@ export class VendorBalanceSummaryReport extends ContactBalanceSummaryReport {
 
   /**
    * Retrieve the vendors sections of the report.
-   * @param   {IVendor} vendors
+   * @param {IVendor} vendors
    * @returns {IVendorBalanceSummaryVendor[]}
    */
   private getVendorsSection(vendors: IVendor[]): IVendorBalanceSummaryVendor[] {
diff --git a/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryApplication.ts b/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryApplication.ts
index 3ce6081f6..c02eac224 100644
--- a/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryApplication.ts
+++ b/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryApplication.ts
@@ -72,6 +72,5 @@ export class VendorBalanceSummaryApplication {
    */
   public pdf(tenantId: number, query: IVendorBalanceSummaryQuery) {
     return this.vendorBalanceSummaryPdf.pdf(tenantId, query);
-    
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryPdf.ts b/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryPdf.ts
index 90e21fbda..f13ffc98c 100644
--- a/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryPdf.ts
+++ b/packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryPdf.ts
@@ -2,6 +2,7 @@ import { Inject, Service } from 'typedi';
 import { IVendorBalanceSummaryQuery } from '@/interfaces';
 import { TableSheetPdf } from '../TableSheetPdf';
 import { VendorBalanceSummaryTableInjectable } from './VendorBalanceSummaryTableInjectable';
+import { HtmlTableCustomCss } from './constants';
 
 @Service()
 export class VendorBalanceSummaryPdf {
@@ -22,13 +23,13 @@ export class VendorBalanceSummaryPdf {
     query: IVendorBalanceSummaryQuery
   ): Promise<Buffer> {
     const table = await this.vendorBalanceSummaryTable.table(tenantId, query);
-    
 
     return this.tableSheetPdf.convertToPdf(
       tenantId,
       table.table,
       table.meta.sheetName,
-      table.meta.formattedAsDate
+      table.meta.formattedAsDate,
+      HtmlTableCustomCss
     );
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/VendorBalanceSummary/constants.ts b/packages/server/src/services/FinancialStatements/VendorBalanceSummary/constants.ts
new file mode 100644
index 000000000..50c3aac24
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/VendorBalanceSummary/constants.ts
@@ -0,0 +1,6 @@
+export const HtmlTableCustomCss = `
+table tr.row-type--total td {
+  font-weight: 600;
+  border-top: 1px solid #bbb;
+  border-bottom: 3px double #333;
+}`;

From f6f6bc31b6229af23dd4980ec7ed9afdc0e23985 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Tue, 20 Feb 2024 21:36:16 +0200
Subject: [PATCH 37/39] feat(server): styling financial reports

---
 .../views/modules/financial-sheet.pug         |  6 +--
 .../BalanceSheet/constants.ts                 | 38 ++++++++++++++++++
 .../CashFlow/CashFlowTable.ts                 |  2 +-
 .../CashFlow/CashflowSheetMeta.ts             |  3 ++
 .../FinancialStatements/CashFlow/constants.ts | 15 ++++++-
 .../JournalSheet/constant.ts                  |  9 ++++-
 .../ProfitLossSheet/constants.ts              | 40 +++++++++++++++++++
 .../PurchasesByItems/_types.ts                | 16 ++++++--
 .../SalesByItems/constants.ts                 | 11 +++++
 .../TrialBalanceSheetTable.ts                 |  5 ++-
 .../TrialBalanceSheet/_constants.ts           | 13 ++++++
 .../TrialBalanceSheet/dynamicColumns.ts       |  2 +-
 12 files changed, 147 insertions(+), 13 deletions(-)

diff --git a/packages/server/resources/views/modules/financial-sheet.pug b/packages/server/resources/views/modules/financial-sheet.pug
index 53d0b0308..f4c59ec3a 100644
--- a/packages/server/resources/views/modules/financial-sheet.pug
+++ b/packages/server/resources/views/modules/financial-sheet.pug
@@ -3,7 +3,7 @@ block head
     include ../../css/modules/financial-sheet.css
 
 style.
-  #{customCSS}
+  !{customCSS}
 
 block content 
   .sheet 
@@ -16,9 +16,9 @@ block content
       thead
         tr
           each column in table.columns
-            th(style=column.style)= column.label
+            th(style=column.style class='column--' + column.key)= column.label
       tbody
         each row in table.rows
           tr(class=row.classNames)
             each cell in row.cells 
-              td!= cell.value
\ No newline at end of file
+              td(class='cell--' + cell.key)!= cell.value
\ No newline at end of file
diff --git a/packages/server/src/services/FinancialStatements/BalanceSheet/constants.ts b/packages/server/src/services/FinancialStatements/BalanceSheet/constants.ts
index 5d4cf08b1..2081d2859 100644
--- a/packages/server/src/services/FinancialStatements/BalanceSheet/constants.ts
+++ b/packages/server/src/services/FinancialStatements/BalanceSheet/constants.ts
@@ -23,4 +23,42 @@ table tr.row-type--total.row-id--assets td,
 table tr.row-type--total.row-id--liability-equity td {
   border-bottom: 3px double #000;
 }
+table .column--name,
+table .cell--name {
+  width: 400px;
+}
+
+table .column--total {
+  width: 25%;
+}
+
+table td.cell--total,
+table td.cell--previous_year,
+table td.cell--previous_year_change,
+table td.cell--previous_year_percentage,
+
+table td.cell--previous_period,
+table td.cell--previous_period_change,
+table td.cell--previous_period_percentage,
+
+table td.cell--percentage_of_row,
+table td.cell--percentage_of_column,
+table td[class*="cell--date-range"] {
+  text-align: right;
+}
+
+table .column--total,
+table .column--previous_year,
+table .column--previous_year_change,
+table .column--previous_year_percentage,
+
+table .column--previous_period,
+table .column--previous_period_change,
+table .column--previous_period_percentage,
+
+table .column--percentage_of_row,
+table .column--percentage_of_column,
+table [class*="column--date-range"] {
+  text-align: right;
+}
 `;
diff --git a/packages/server/src/services/FinancialStatements/CashFlow/CashFlowTable.ts b/packages/server/src/services/FinancialStatements/CashFlow/CashFlowTable.ts
index b3470e1a4..7b49a685c 100644
--- a/packages/server/src/services/FinancialStatements/CashFlow/CashFlowTable.ts
+++ b/packages/server/src/services/FinancialStatements/CashFlow/CashFlowTable.ts
@@ -76,7 +76,7 @@ export default class CashFlowTable implements ICashFlowTable {
    */
   private commonColumns = () => {
     return R.compose(
-      R.concat([{ key: 'label', accessor: 'label' }]),
+      R.concat([{ key: 'name', accessor: 'label' }]),
       R.when(
         R.always(this.isDisplayColumnsBy(DISPLAY_COLUMNS_BY.DATE_PERIODS)),
         R.concat(this.datePeriodsColumnsAccessors())
diff --git a/packages/server/src/services/FinancialStatements/CashFlow/CashflowSheetMeta.ts b/packages/server/src/services/FinancialStatements/CashFlow/CashflowSheetMeta.ts
index e1ed4a0d5..3a1dd40dc 100644
--- a/packages/server/src/services/FinancialStatements/CashFlow/CashflowSheetMeta.ts
+++ b/packages/server/src/services/FinancialStatements/CashFlow/CashflowSheetMeta.ts
@@ -23,8 +23,11 @@ export class CashflowSheetMeta {
     const formattedFromDate = moment(query.fromDate).format('YYYY/MM/DD');
     const formattedDateRange = `From ${formattedFromDate} | To ${formattedToDate}`;
 
+    const sheetName = 'Statement of Cash Flow';
+
     return {
       ...meta,
+      sheetName,
       formattedToDate,
       formattedFromDate,
       formattedDateRange,
diff --git a/packages/server/src/services/FinancialStatements/CashFlow/constants.ts b/packages/server/src/services/FinancialStatements/CashFlow/constants.ts
index c8a9f348c..f3f1858fb 100644
--- a/packages/server/src/services/FinancialStatements/CashFlow/constants.ts
+++ b/packages/server/src/services/FinancialStatements/CashFlow/constants.ts
@@ -8,7 +8,7 @@ export const HtmlTableCustomCss = `
 table tr.row-type--accounts td {
   border-top: 1px solid #bbb;
 }
-table tr.row-id--cash-end-period {
+table tr.row-id--cash-end-period td {
   border-bottom: 3px double #333;
 }
 table tr.row-type--total {
@@ -19,4 +19,15 @@ table tr.row-type--total td {
 }
 table tr.row-type--total:not(:first-child) td {
   border-top: 1px solid #bbb;
-}`;
+}
+table .column--name,
+table .cell--name {
+  width: 400px;
+}
+table .column--total,
+table .cell--total,
+table [class*="column--date-range"],
+table [class*="cell--date-range"] {
+  text-align: right;
+}
+`;
diff --git a/packages/server/src/services/FinancialStatements/JournalSheet/constant.ts b/packages/server/src/services/FinancialStatements/JournalSheet/constant.ts
index 5f5f975ec..58f5237f6 100644
--- a/packages/server/src/services/FinancialStatements/JournalSheet/constant.ts
+++ b/packages/server/src/services/FinancialStatements/JournalSheet/constant.ts
@@ -7,4 +7,11 @@ table tr td:not(:first-child) {
 }
 table tr:last-child td {
   border-bottom: 1px solid #ececec; 
-}`;
+}
+table .cell--credit,
+table .cell--debit,
+table .column--credit,
+table .column--debit{
+  text-align: right;
+}
+`;
diff --git a/packages/server/src/services/FinancialStatements/ProfitLossSheet/constants.ts b/packages/server/src/services/FinancialStatements/ProfitLossSheet/constants.ts
index 0bb2a28de..1ca50c5ed 100644
--- a/packages/server/src/services/FinancialStatements/ProfitLossSheet/constants.ts
+++ b/packages/server/src/services/FinancialStatements/ProfitLossSheet/constants.ts
@@ -26,4 +26,44 @@ table tr.row-type--total td {
   border-top: 1px solid #bbb;
   color: #000;
 }
+table tr.row-id--net-income td{
+  border-bottom: 3px double #000;
+}
+table .column--name,
+table .cell--name {
+  width: 400px;
+}
+
+table .column--total {
+  width: 25%;
+}
+table td.cell--total,
+table td.cell--previous_year,
+table td.cell--previous_year_change,
+table td.cell--previous_year_percentage,
+
+table td.cell--previous_period,
+table td.cell--previous_period_change,
+table td.cell--previous_period_percentage,
+
+table td.cell--percentage_of_row,
+table td.cell--percentage_of_column,
+table td[class*="cell--date-range"] {
+  text-align: right;
+}
+
+table .column--total,
+table .column--previous_year,
+table .column--previous_year_change,
+table .column--previous_year_percentage,
+
+table .column--previous_period,
+table .column--previous_period_change,
+table .column--previous_period_percentage,
+
+table .column--percentage_of_row,
+table .column--percentage_of_column,
+table [class*="column--date-range"] {
+  text-align: right;
+}
 `;
\ No newline at end of file
diff --git a/packages/server/src/services/FinancialStatements/PurchasesByItems/_types.ts b/packages/server/src/services/FinancialStatements/PurchasesByItems/_types.ts
index 625c6dff4..bb4927958 100644
--- a/packages/server/src/services/FinancialStatements/PurchasesByItems/_types.ts
+++ b/packages/server/src/services/FinancialStatements/PurchasesByItems/_types.ts
@@ -1,7 +1,6 @@
-
 export enum ROW_TYPE {
   TOTAL = 'TOTAL',
-  ITEM = 'ITEM'
+  ITEM = 'ITEM',
 }
 
 export const HtmlTableCustomCss = `
@@ -10,4 +9,15 @@ table tr.row-type--total td {
   border-bottom: 3px double #000;
   font-weight: 600;
 }
-`;
\ No newline at end of file
+table .column--item_name{
+  width: 300px;
+}
+table .column--quantity_purchases,
+table .column--purchase_amount,
+table .column--average_cost,
+table .cell--quantity_purchases,
+table .cell--purchase_amount,
+table .cell--average_cost{
+  text-align: right;
+}
+`;
diff --git a/packages/server/src/services/FinancialStatements/SalesByItems/constants.ts b/packages/server/src/services/FinancialStatements/SalesByItems/constants.ts
index cb0b00bae..761e37ec5 100644
--- a/packages/server/src/services/FinancialStatements/SalesByItems/constants.ts
+++ b/packages/server/src/services/FinancialStatements/SalesByItems/constants.ts
@@ -9,4 +9,15 @@ table tr.row-type--total td {
   border-bottom: 3px double #000;
   font-weight: 600;
 }
+table .column--item_name{
+  width: 300px;
+}
+table .column--average_price,
+table .column--sold_quantity,
+table .column--sold_amount,
+table .cell--average_price,
+table .cell--sold_quantity,
+table .cell--sold_amount{
+  text-align: right;
+}
 `;
diff --git a/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.ts b/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.ts
index 1addd1996..0d4df537e 100644
--- a/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.ts
+++ b/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.ts
@@ -19,12 +19,13 @@ export class TrialBalanceSheetTable extends R.compose(
   FinancialSheetStructure
 )(FinancialSheet) {
   /**
+   * Trial balance sheet data.
    * @param {ITrialBalanceSheetData}
    */
   public data: ITrialBalanceSheetData;
 
   /**
-   * Balance sheet query.
+   * Trial balance sheet query.
    * @param {ITrialBalanceSheetQuery}
    */
   public query: ITrialBalanceSheetQuery;
@@ -135,7 +136,7 @@ export class TrialBalanceSheetTable extends R.compose(
     return R.compose(
       this.tableColumnsCellIndexing,
       R.concat([
-        { key: 'account_name', label: 'Account' },
+        { key: 'account', label: 'Account' },
         { key: 'debit', label: 'Debit' },
         { key: 'credit', label: 'Credit' },
         { key: 'total', label: 'Total' },
diff --git a/packages/server/src/services/FinancialStatements/TrialBalanceSheet/_constants.ts b/packages/server/src/services/FinancialStatements/TrialBalanceSheet/_constants.ts
index 9bc4dfdb0..80951d81e 100644
--- a/packages/server/src/services/FinancialStatements/TrialBalanceSheet/_constants.ts
+++ b/packages/server/src/services/FinancialStatements/TrialBalanceSheet/_constants.ts
@@ -9,4 +9,17 @@ table tr.row-type--total td{
   font-weight: 500;
   border-bottom: 3px double #000;
 }
+
+table .column--account {
+  width: 400px;
+}
+
+table .column--debit,
+table .column--credit,
+table .column--total,
+table .cell--debit,
+table .cell--credit,
+table .cell--total{
+  text-align: right;
+}
 `;
diff --git a/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/dynamicColumns.ts b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/dynamicColumns.ts
index c7f23f2aa..43ad0c0f8 100644
--- a/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/dynamicColumns.ts
+++ b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/dynamicColumns.ts
@@ -44,7 +44,7 @@ const dynamicColumnMapper = R.curry((data, column) => {
   const totalColumn = amountAccessor(data);
 
   return R.compose(
-    R.when(R.pathEq(['key'], 'account_name'), accountNameColumn),
+    R.when(R.pathEq(['key'], 'account'), accountNameColumn),
     R.when(R.pathEq(['key'], 'credit'), creditColumn),
     R.when(R.pathEq(['key'], 'debit'), debitColumn),
     R.when(R.pathEq(['key'], 'total'), totalColumn),

From d16ec7cda9726c729feebcca3b240054585cae96 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Wed, 21 Feb 2024 14:55:06 +0200
Subject: [PATCH 38/39] feat(server): table sheet pdf

---
 .../BalanceSheet/BalanceSheetMeta.ts          |  3 ++-
 .../FinancialStatements/TableSheetPdf.ts      | 16 +++++++++++---
 .../src/services/FinancialStatements/utils.ts | 21 +++++++++++++++++--
 3 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetMeta.ts b/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetMeta.ts
index ac1b7a3bd..c7a3e87c0 100644
--- a/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetMeta.ts
+++ b/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetMeta.ts
@@ -20,10 +20,11 @@ export class BalanceSheetMetaInjectable {
     const commonMeta = await this.financialSheetMeta.meta(tenantId);
     const formattedAsDate = moment(query.toDate).format('YYYY/MM/DD');
     const formattedDateRange = `As ${formattedAsDate}`;
+    const sheetName = 'Balance Sheet Statement';
 
     return {
       ...commonMeta,
-      sheetName: 'Balance Sheet',
+      sheetName,
       formattedAsDate,
       formattedDateRange,
     };
diff --git a/packages/server/src/services/FinancialStatements/TableSheetPdf.ts b/packages/server/src/services/FinancialStatements/TableSheetPdf.ts
index c7cbda662..44317978c 100644
--- a/packages/server/src/services/FinancialStatements/TableSheetPdf.ts
+++ b/packages/server/src/services/FinancialStatements/TableSheetPdf.ts
@@ -4,6 +4,7 @@ import { ITableColumn, ITableData, ITableRow } from '@/interfaces';
 import { ChromiumlyTenancy } from '@/services/ChromiumlyTenancy/ChromiumlyTenancy';
 import { TemplateInjectable } from '@/services/TemplateInjectable/TemplateInjectable';
 import { FinancialTableStructure } from './FinancialTableStructure';
+import { tableClassNames } from './utils';
 
 @Service()
 export class TableSheetPdf {
@@ -25,21 +26,30 @@ export class TableSheetPdf {
     tenantId: number,
     table: ITableData,
     sheetName: string,
-    sheetDate: string
+    sheetDate: string,
+    customCSS?: string
   ): Promise<Buffer> {
     // Prepare columns and rows for PDF conversion
     const columns = this.tablePdfColumns(table.columns);
     const rows = this.tablePdfRows(table.rows);
 
+    const landscape = columns.length > 4;
+
     // Generate HTML content from the template
     const htmlContent = await this.templateInjectable.render(
       tenantId,
       'modules/financial-sheet',
-      { sheetName, sheetDate, table: { rows, columns } }
+      {
+        table: { rows, columns },
+        sheetName,
+        sheetDate,
+        customCSS,
+      }
     );
     // Convert the HTML content to PDF
     return this.chromiumlyTenancy.convertHtmlContent(tenantId, htmlContent, {
       margins: { top: 0, bottom: 0, left: 0, right: 0 },
+      landscape,
     });
   }
   /**
@@ -63,6 +73,6 @@ export class TableSheetPdf {
     const flatNestedTree = curriedFlatNestedTree(R.__, {
       nestedPrefix: '<span style="padding-left: 15px;"></span>',
     });
-    return R.compose(flatNestedTree)(rows);
+    return R.compose(tableClassNames, flatNestedTree)(rows);
   };
 }
diff --git a/packages/server/src/services/FinancialStatements/utils.ts b/packages/server/src/services/FinancialStatements/utils.ts
index 1114131b9..5d304ca6f 100644
--- a/packages/server/src/services/FinancialStatements/utils.ts
+++ b/packages/server/src/services/FinancialStatements/utils.ts
@@ -1,4 +1,5 @@
-
+import { kebabCase } from 'lodash';
+import { ITableRow } from '@/interfaces';
 
 export const formatNumber = (balance, { noCents, divideOn1000 }): string => {
   let formattedBalance: number = parseFloat(balance);
@@ -10,4 +11,20 @@ export const formatNumber = (balance, { noCents, divideOn1000 }): string => {
     formattedBalance /= 1000;
   }
   return formattedBalance;
-};
\ No newline at end of file
+};
+
+export const tableClassNames = (rows: ITableRow[]) => {
+  return rows.map((row) => {
+    const classNames =
+      row?.rowTypes?.map((rowType) => `row-type--${kebabCase(rowType)}`) || [];
+
+    if (row.id) {
+      classNames.push(`row-id--${kebabCase(row.id)}`);
+    }
+
+    return {
+      ...row,
+      classNames,
+    };
+  });
+};

From 1752c32eecadb896f3f1fd6fb9da63a1017a6ffd Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Wed, 21 Feb 2024 17:17:34 +0200
Subject: [PATCH 39/39] feat: code review notes

---
 .../BalanceSheet/BalanceSheetNetIncome.ts                 | 1 -
 .../FinancialStatements/BalanceSheet/BalanceSheetTable.ts | 5 +++--
 .../FinancialStatements/FinancialSheetStructure.ts        | 8 ++++----
 .../ProfitLossSheet/ProfitLossSheetExportInjectable.ts    | 7 -------
 .../src/services/FinancialStatements/TableSheetPdf.ts     | 1 +
 .../BalanceSheet/BalanceSheetTable.tsx                    | 1 -
 .../hooks/query/FinancialReports/use-AP-aging-summary.ts  | 2 +-
 .../hooks/query/FinancialReports/use-AR-aging-summary.ts  | 2 +-
 .../src/hooks/query/FinancialReports/use-balance-sheet.ts | 2 +-
 .../hooks/query/FinancialReports/use-cashflow-sheet.ts    | 2 +-
 .../FinancialReports/use-customer-balance-summary.ts      | 2 +-
 .../query/FinancialReports/use-customer-transactions.ts   | 2 +-
 .../hooks/query/FinancialReports/use-general-ledger.ts    | 2 +-
 .../query/FinancialReports/use-inventory-item-details.ts  | 2 +-
 .../query/FinancialReports/use-inventory-valuation.ts     | 2 +-
 .../src/hooks/query/FinancialReports/use-journal-sheet.ts | 2 +-
 .../hooks/query/FinancialReports/use-profit-loss-sheet.ts | 2 +-
 .../query/FinancialReports/use-purchases-by-items.ts      | 2 +-
 .../hooks/query/FinancialReports/use-sales-by-items.ts    | 2 +-
 .../FinancialReports/use-sales-tax-liabilities-summary.ts | 2 +-
 .../query/FinancialReports/use-trial-balance-sheet.ts     | 2 +-
 .../query/FinancialReports/use-vendor-balance-summary.ts  | 2 +-
 .../query/FinancialReports/use-vendor-transactions.ts     | 2 +-
 packages/webapp/src/hooks/query/creditNote.tsx            | 4 +++-
 packages/webapp/src/hooks/query/estimates.tsx             | 4 +++-
 packages/webapp/src/hooks/query/invoices.tsx              | 7 ++++---
 packages/webapp/src/hooks/query/paymentReceives.tsx       | 3 ++-
 packages/webapp/src/hooks/query/receipts.tsx              | 7 +++++--
 packages/webapp/src/hooks/query/transactionsLocking.tsx   | 2 --
 packages/webapp/src/hooks/useRequestPdf.tsx               | 1 +
 30 files changed, 43 insertions(+), 42 deletions(-)

diff --git a/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetNetIncome.ts b/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetNetIncome.ts
index a78624ae2..a6695b370 100644
--- a/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetNetIncome.ts
+++ b/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetNetIncome.ts
@@ -31,7 +31,6 @@ export const BalanceSheetNetIncome = (Base: any) =>
     /**
      * Retrieves the closing balance of income accounts.
      * @returns {number}
-     * 
      */
     private getIncomeTotal = () => {
       const closeingBalance = this.repository.incomeLedger.getClosingBalance();
diff --git a/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetTable.ts b/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetTable.ts
index 66ab87cd5..8e6a1f92b 100644
--- a/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetTable.ts
+++ b/packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetTable.ts
@@ -41,13 +41,14 @@ export default class BalanceSheetTable extends R.compose(
   BalanceSheetBase
 )(FinancialSheet) {
   /**
-   * @param {}
+   * Balance sheet data.
+   * @param {IBalanceSheetStatementData}
    */
   private reportData: IBalanceSheetStatementData;
 
   /**
    * Balance sheet query.
-   * @parma {}
+   * @parma {BalanceSheetQuery}
    */
   private query: BalanceSheetQuery;
 
diff --git a/packages/server/src/services/FinancialStatements/FinancialSheetStructure.ts b/packages/server/src/services/FinancialStatements/FinancialSheetStructure.ts
index 722635d9a..5e2fbba55 100644
--- a/packages/server/src/services/FinancialStatements/FinancialSheetStructure.ts
+++ b/packages/server/src/services/FinancialStatements/FinancialSheetStructure.ts
@@ -61,14 +61,14 @@ export const FinancialSheetStructure = (Base: Class) =>
       });
     };
 
-    findNodeDeep = (nodes, callback) => {
+    public findNodeDeep = (nodes, callback) => {
       return findValueDeep(nodes, callback, {
         childrenPath: 'children',
         pathFormat: 'array',
       });
     };
 
-    mapAccNodesDeep = (nodes, callback) => {
+    public mapAccNodesDeep = (nodes, callback) => {
       return reduceDeep(
         nodes,
         (acc, value, key, parentValue, context) => {
@@ -97,11 +97,11 @@ export const FinancialSheetStructure = (Base: Class) =>
       });
     };
 
-    getTotalOfChildrenNodes = (node) => {
+    public getTotalOfChildrenNodes = (node) => {
       return this.getTotalOfNodes(node.children);
     };
 
-    getTotalOfNodes = (nodes) => {
+    public getTotalOfNodes = (nodes) => {
       return sumBy(nodes, 'total.amount');
     };
   };
diff --git a/packages/server/src/services/FinancialStatements/ProfitLossSheet/ProfitLossSheetExportInjectable.ts b/packages/server/src/services/FinancialStatements/ProfitLossSheet/ProfitLossSheetExportInjectable.ts
index 4fa9762d3..ba2371797 100644
--- a/packages/server/src/services/FinancialStatements/ProfitLossSheet/ProfitLossSheetExportInjectable.ts
+++ b/packages/server/src/services/FinancialStatements/ProfitLossSheet/ProfitLossSheetExportInjectable.ts
@@ -40,11 +40,4 @@ export class ProfitLossSheetExportInjectable {
 
     return tableCsv;
   }
-
-  public async pdf(
-    tenantId: number,
-    query: IProfitLossSheetQuery
-  ): Promise<Buffer> {
-    const table = await this.profitLossSheetTable.table(tenantId, query);
-  }
 }
diff --git a/packages/server/src/services/FinancialStatements/TableSheetPdf.ts b/packages/server/src/services/FinancialStatements/TableSheetPdf.ts
index 44317978c..280adf187 100644
--- a/packages/server/src/services/FinancialStatements/TableSheetPdf.ts
+++ b/packages/server/src/services/FinancialStatements/TableSheetPdf.ts
@@ -52,6 +52,7 @@ export class TableSheetPdf {
       landscape,
     });
   }
+
   /**
    * Converts the table columns to pdf columns.
    * @param {ITableColumn[]} columns
diff --git a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.tsx b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.tsx
index b4623e4b2..f10da57ba 100644
--- a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.tsx
@@ -9,7 +9,6 @@ import { useBalanceSheetContext } from './BalanceSheetProvider';
 import { useBalanceSheetColumns } from './components';
 import { defaultExpanderReducer, tableRowTypesToClassnames } from '@/utils';
 
-
 /**
  * Balance sheet table.
  */
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-AP-aging-summary.ts b/packages/webapp/src/hooks/query/FinancialReports/use-AP-aging-summary.ts
index 65e458cea..029f2733d 100644
--- a/packages/webapp/src/hooks/query/FinancialReports/use-AP-aging-summary.ts
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-AP-aging-summary.ts
@@ -58,7 +58,7 @@ export const useAPAgingSheetCsvExport = (query, args) => {
  */
 export function useAPAgingSummaryPdf(query = {}) {
   return useRequestPdf({
-    url: `/api/financial_statements/payable_aging_summary`,
+    url: `/financial_statements/payable_aging_summary`,
     params: query,
   });
 }
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-AR-aging-summary.ts b/packages/webapp/src/hooks/query/FinancialReports/use-AR-aging-summary.ts
index 61a519b34..b2f8b289b 100644
--- a/packages/webapp/src/hooks/query/FinancialReports/use-AR-aging-summary.ts
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-AR-aging-summary.ts
@@ -57,7 +57,7 @@ export const useARAgingSheetCsvExport = (query, args) => {
  */
 export function useARAgingSummaryPdf(query = {}) {
   return useRequestPdf({
-    url: `/api/financial_statements/receivable_aging_summary`,
+    url: `/financial_statements/receivable_aging_summary`,
     params: query,
   });
 }
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-balance-sheet.ts b/packages/webapp/src/hooks/query/FinancialReports/use-balance-sheet.ts
index 2eb19959d..ed60756e5 100644
--- a/packages/webapp/src/hooks/query/FinancialReports/use-balance-sheet.ts
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-balance-sheet.ts
@@ -76,7 +76,7 @@ export const useBalanceSheetCsvExport = (query, args) => {
  */
 export function useBalanceSheetPdf(query = {}) {
   return useRequestPdf({
-    url: `/api/financial_statements/balance_sheet`,
+    url: `/financial_statements/balance_sheet`,
     params: query,
   });
 }
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-cashflow-sheet.ts b/packages/webapp/src/hooks/query/FinancialReports/use-cashflow-sheet.ts
index cdd2a33d8..992431ac2 100644
--- a/packages/webapp/src/hooks/query/FinancialReports/use-cashflow-sheet.ts
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-cashflow-sheet.ts
@@ -77,7 +77,7 @@ export const useCashFlowStatementCsvExport = (query, args) => {
  */
 export function useCashflowSheetPdf(query = {}) {
   return useRequestPdf({
-    url: `/api/financial_statements/cash-flow`,
+    url: `/financial_statements/cash-flow`,
     params: query,
   });
 }
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-customer-balance-summary.ts b/packages/webapp/src/hooks/query/FinancialReports/use-customer-balance-summary.ts
index 0dbc034d1..4e692832e 100644
--- a/packages/webapp/src/hooks/query/FinancialReports/use-customer-balance-summary.ts
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-customer-balance-summary.ts
@@ -65,7 +65,7 @@ export const useCustomerBalanceSummaryCsvExport = (query, args) => {
  */
 export function useCustomerBalanceSummaryPdf(query = {}) {
   return useRequestPdf({
-    url: `/api/financial_statements/customer-balance-summary`,
+    url: `/financial_statements/customer-balance-summary`,
     params: query,
   });
 }
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-customer-transactions.ts b/packages/webapp/src/hooks/query/FinancialReports/use-customer-transactions.ts
index a108720c8..fd6925fff 100644
--- a/packages/webapp/src/hooks/query/FinancialReports/use-customer-transactions.ts
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-customer-transactions.ts
@@ -69,7 +69,7 @@ export const useCustomersTransactionsCsvExport = (query, args) => {
  */
 export const useCustomersTransactionsPdfExport = (query = {}) => {
   return useRequestPdf({
-    url: '/api/financial_statements/transactions-by-customers',
+    url: '/financial_statements/transactions-by-customers',
     params: query,
   });
 };
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-general-ledger.ts b/packages/webapp/src/hooks/query/FinancialReports/use-general-ledger.ts
index 9ecb86258..8f03928b8 100644
--- a/packages/webapp/src/hooks/query/FinancialReports/use-general-ledger.ts
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-general-ledger.ts
@@ -57,7 +57,7 @@ export const useGeneralLedgerSheetCsvExport = (query, args) => {
  */
 export function useGeneralLedgerPdf(query = {}) {
   return useRequestPdf({
-    url: `/api/financial_statements/general_ledger`,
+    url: `/financial_statements/general_ledger`,
     params: query
   });
 }
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-inventory-item-details.ts b/packages/webapp/src/hooks/query/FinancialReports/use-inventory-item-details.ts
index 4ee534717..38f0c92d0 100644
--- a/packages/webapp/src/hooks/query/FinancialReports/use-inventory-item-details.ts
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-inventory-item-details.ts
@@ -69,7 +69,7 @@ export const useInventoryItemDetailsCsvExport = (query, args) => {
  */
 export function useInventoryItemDetailsPdf(query = {}) {
   return useRequestPdf({
-    url: `/api/financial_statements/inventory-item-details`,
+    url: `/financial_statements/inventory-item-details`,
     params: query,
   });
 }
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-inventory-valuation.ts b/packages/webapp/src/hooks/query/FinancialReports/use-inventory-valuation.ts
index bed2dd68c..43c39885c 100644
--- a/packages/webapp/src/hooks/query/FinancialReports/use-inventory-valuation.ts
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-inventory-valuation.ts
@@ -77,7 +77,7 @@ export const useInventoryValuationCsvExport = (query, args) => {
  */
 export function useInventoryValuationPdf(query = {}) {
   return useRequestPdf({
-    url: `/api/financial_statements/inventory-valuation`,
+    url: `/financial_statements/inventory-valuation`,
     params: query,
   });
 }
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-journal-sheet.ts b/packages/webapp/src/hooks/query/FinancialReports/use-journal-sheet.ts
index f83531a75..90c6cb447 100644
--- a/packages/webapp/src/hooks/query/FinancialReports/use-journal-sheet.ts
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-journal-sheet.ts
@@ -58,7 +58,7 @@ export const useJournalSheetCsvExport = (query, args) => {
  */
 export const useJournalSheetPdf = (query = {}) => {
   return useRequestPdf({
-    url: `/api/financial_statements/journal`,
+    url: `/financial_statements/journal`,
     params: query,
   });
 };
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-profit-loss-sheet.ts b/packages/webapp/src/hooks/query/FinancialReports/use-profit-loss-sheet.ts
index cbc9d9cf3..b254e4ba2 100644
--- a/packages/webapp/src/hooks/query/FinancialReports/use-profit-loss-sheet.ts
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-profit-loss-sheet.ts
@@ -58,7 +58,7 @@ export const useProfitLossSheetCsvExport = (query, args) => {
  */
 export function useProfitLossSheetPdf(query = {}) {
   return useRequestPdf({
-    url: `/api/financial_statements/profit_loss_sheet`,
+    url: `/financial_statements/profit_loss_sheet`,
     params: query,
   });
 }
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-purchases-by-items.ts b/packages/webapp/src/hooks/query/FinancialReports/use-purchases-by-items.ts
index df391f5da..882aaf578 100644
--- a/packages/webapp/src/hooks/query/FinancialReports/use-purchases-by-items.ts
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-purchases-by-items.ts
@@ -73,7 +73,7 @@ export const usePurchasesByItemsXlsxExport = (query, args) => {
  */
 export const usePurchasesByItemsPdfExport = (query = {}) => {
   return useRequestPdf({
-    url: '/api/financial_statements/purchases-by-items',
+    url: '/financial_statements/purchases-by-items',
     params: query,
   });
 };
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-sales-by-items.ts b/packages/webapp/src/hooks/query/FinancialReports/use-sales-by-items.ts
index 1aae74058..c4feda108 100644
--- a/packages/webapp/src/hooks/query/FinancialReports/use-sales-by-items.ts
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-sales-by-items.ts
@@ -72,7 +72,7 @@ export const useSalesByItemsXlsxExport = (query, args) => {
 
 export const useSalesByItemsPdfExport = (query = {}) => {
   return useRequestPdf({
-    url: '/api/financial_statements/sales-by-items',
+    url: '/financial_statements/sales-by-items',
     params: query,
   });
 };
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-sales-tax-liabilities-summary.ts b/packages/webapp/src/hooks/query/FinancialReports/use-sales-tax-liabilities-summary.ts
index cf79f4f14..85cf0eda5 100644
--- a/packages/webapp/src/hooks/query/FinancialReports/use-sales-tax-liabilities-summary.ts
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-sales-tax-liabilities-summary.ts
@@ -58,7 +58,7 @@ export const useSalesTaxLiabilitySummaryCsvExport = (query, args) => {
  */
 export function useSalesTaxLiabilitySummaryPdf(query = {}) {
   return useRequestPdf({
-    url: `/api/financial_statements/sales-tax-liability-summary`,
+    url: `/financial_statements/sales-tax-liability-summary`,
     params: query,
   });
 }
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-trial-balance-sheet.ts b/packages/webapp/src/hooks/query/FinancialReports/use-trial-balance-sheet.ts
index 1fe324cd4..96afe488c 100644
--- a/packages/webapp/src/hooks/query/FinancialReports/use-trial-balance-sheet.ts
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-trial-balance-sheet.ts
@@ -58,7 +58,7 @@ export const useTrialBalanceSheetCsvExport = (query, args) => {
  */
 export function useTrialBalanceSheetPdf(query = {}) {
   return useRequestPdf({
-    url: `/api/financial_statements/trial_balance_sheet`,
+    url: `/financial_statements/trial_balance_sheet`,
     params: query,
   });
 }
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-vendor-balance-summary.ts b/packages/webapp/src/hooks/query/FinancialReports/use-vendor-balance-summary.ts
index 9986e0e28..840a5c08a 100644
--- a/packages/webapp/src/hooks/query/FinancialReports/use-vendor-balance-summary.ts
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-vendor-balance-summary.ts
@@ -65,7 +65,7 @@ export const useVendorBalanceSummaryCsvExport = (args) => {
 
 export const useVendorBalanceSummaryPdfExport = (query = {}) => {
   return useRequestPdf({
-    url: '/api/financial_statements/vendor-balance-summary',
+    url: 'financial_statements/vendor-balance-summary',
     params: query,
   });
 };
diff --git a/packages/webapp/src/hooks/query/FinancialReports/use-vendor-transactions.ts b/packages/webapp/src/hooks/query/FinancialReports/use-vendor-transactions.ts
index d52900f04..7c9dc5f45 100644
--- a/packages/webapp/src/hooks/query/FinancialReports/use-vendor-transactions.ts
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-vendor-transactions.ts
@@ -68,7 +68,7 @@ export const useVendorsTransactionsCsvExport = (query, args) => {
  */
 export function useTransactionsByVendorsPdf(query = {}) {
   return useRequestPdf({
-    url: `/api/financial_statements/transactions-by-vendors`,
+    url: `financial_statements/transactions-by-vendors`,
     params: query,
   });
 }
diff --git a/packages/webapp/src/hooks/query/creditNote.tsx b/packages/webapp/src/hooks/query/creditNote.tsx
index 0fb31f873..fce2f7302 100644
--- a/packages/webapp/src/hooks/query/creditNote.tsx
+++ b/packages/webapp/src/hooks/query/creditNote.tsx
@@ -354,5 +354,7 @@ export function useRefundCreditTransaction(id, props, requestProps) {
  * Retrieve the credit note pdf document data,
  */
 export function usePdfCreditNote(creditNoteId) {
-  return useRequestPdf(`sales/credit_notes/${creditNoteId}`);
+  return useRequestPdf({
+    url: `sales/credit_notes/${creditNoteId}`,
+  });
 }
diff --git a/packages/webapp/src/hooks/query/estimates.tsx b/packages/webapp/src/hooks/query/estimates.tsx
index 9ab867857..ed5f11ef4 100644
--- a/packages/webapp/src/hooks/query/estimates.tsx
+++ b/packages/webapp/src/hooks/query/estimates.tsx
@@ -181,7 +181,9 @@ export function useRejectEstimate(props) {
  */
 
 export function usePdfEstimate(estimateId) {
-  return useRequestPdf(`sales/estimates/${estimateId}`);
+  return useRequestPdf({
+    url: `sales/estimates/${estimateId}`,
+  });
 }
 
 export function useRefreshEstimates() {
diff --git a/packages/webapp/src/hooks/query/invoices.tsx b/packages/webapp/src/hooks/query/invoices.tsx
index 886b04e7d..72a8bc7b1 100644
--- a/packages/webapp/src/hooks/query/invoices.tsx
+++ b/packages/webapp/src/hooks/query/invoices.tsx
@@ -24,7 +24,7 @@ const commonInvalidateQueries = (queryClient) => {
 
   // Invalidate financial reports.
   queryClient.invalidateQueries(t.FINANCIAL_REPORT);
-  
+
   // Invalidate transactions by reference.
   queryClient.invalidateQueries(t.TRANSACTIONS_BY_REFERENCE);
 
@@ -188,7 +188,9 @@ export function useInvoice(invoiceId, props, requestProps) {
  * Retrieve the invoice pdf document data.
  */
 export function usePdfInvoice(invoiceId) {
-  return useRequestPdf(`sales/invoices/${invoiceId}`);
+  return useRequestPdf({
+    url: `sales/invoices/${invoiceId}`,
+  });
 }
 
 /**
@@ -339,4 +341,3 @@ export function useSaleInvoiceDefaultOptions(invoiceId, props) {
     },
   );
 }
-
diff --git a/packages/webapp/src/hooks/query/paymentReceives.tsx b/packages/webapp/src/hooks/query/paymentReceives.tsx
index 5ed0118ee..5fbd03a28 100644
--- a/packages/webapp/src/hooks/query/paymentReceives.tsx
+++ b/packages/webapp/src/hooks/query/paymentReceives.tsx
@@ -233,9 +233,10 @@ export function usePaymentReceiveSMSDetail(
 
 /**
  * Retrieve the payment receive pdf document data.
+ * @param {number} paymentReceiveId - Payment receive id.
  */
 export function usePdfPaymentReceive(paymentReceiveId) {
-  return useRequestPdf(`sales/payment_receives/${paymentReceiveId}`);
+  return useRequestPdf({ url: `sales/payment_receives/${paymentReceiveId}` });
 }
 
 export function useSendPaymentReceiveMail(props) {
diff --git a/packages/webapp/src/hooks/query/receipts.tsx b/packages/webapp/src/hooks/query/receipts.tsx
index fed4ad5af..2797008d3 100644
--- a/packages/webapp/src/hooks/query/receipts.tsx
+++ b/packages/webapp/src/hooks/query/receipts.tsx
@@ -162,9 +162,12 @@ export function useReceipt(id, props) {
 
 /**
  * Retrieve the receipt pdf document data.
+ * @param {number} receiptId -
  */
-export function usePdfReceipt(ReceiptId) {
-  return useRequestPdf(`sales/receipts/${ReceiptId}`);
+export function usePdfReceipt(receiptId: number) {
+  return useRequestPdf({
+    url: `sales/receipts/${receiptId}`,
+  });
 }
 
 export function useRefreshReceipts() {
diff --git a/packages/webapp/src/hooks/query/transactionsLocking.tsx b/packages/webapp/src/hooks/query/transactionsLocking.tsx
index 0be24a26a..e28555fcf 100644
--- a/packages/webapp/src/hooks/query/transactionsLocking.tsx
+++ b/packages/webapp/src/hooks/query/transactionsLocking.tsx
@@ -1,9 +1,7 @@
 // @ts-nocheck
 import { useQueryClient, useMutation } from 'react-query';
 import { useRequestQuery } from '../useQueryRequest';
-import { transformPagination } from '@/utils';
 import useApiRequest from '../useRequest';
-import { useRequestPdf } from '../utils';
 import t from './types';
 
 // Common invalidate queries.
diff --git a/packages/webapp/src/hooks/useRequestPdf.tsx b/packages/webapp/src/hooks/useRequestPdf.tsx
index c729ed185..55d797b2f 100644
--- a/packages/webapp/src/hooks/useRequestPdf.tsx
+++ b/packages/webapp/src/hooks/useRequestPdf.tsx
@@ -16,6 +16,7 @@ export const useRequestPdf = (httpProps) => {
         headers: { accept: 'application/pdf' },
         responseType: 'blob',
         ...httpProps,
+        url: `/api/${httpProps?.url}`,
       })
       .then((response) => {
         // Create a Blob from the PDF Stream.