Merge pull request #460 from bigcapitalhq/print-resources

feat: Export resource tables to pdf
2026-02-18 05:40:31 +00:00 · 2024-06-02 13:24:43 +02:00
parent 09a15966f0 1b237323f6
commit 85f26e1079
46 changed files with 733 additions and 134 deletions
--- a/packages/server/resources/scss/modules/export-resource-table.scss
+++ b/packages/server/resources/scss/modules/export-resource-table.scss
@@ -0,0 +1,38 @@
+@import "../base.scss";
+
+body {
+  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
+  font-size: 12px;
+  line-height: 1.4;
+  margin: 0;
+}
+.sheet__title{
+  margin-bottom: 18px;
+}
+.sheet__title h2{
+  line-height: 1;
+  margin-top: 0;
+  margin-bottom: 10px;
+  font-size: 16px;
+}
+.sheet__table {
+  font-size: inherit;
+  line-height: inherit;
+  width: 100%;
+}
+.sheet__table {
+  table-layout: auto;
+  border-collapse: collapse;  
+  width: 100%;
+}
+.sheet__table thead tr th {
+  border-top: 1px solid #000;
+  border-bottom: 1px solid #000;
+  background: #fff;
+  padding: 8px;
+  line-height: 1.2;
+}
+.sheet__table tbody tr td {
+  padding: 4px 8px;
+  border-bottom: 1px solid #CCC;    
+}
--- a/packages/server/resources/views/modules/export-resource-table.pug
+++ b/packages/server/resources/views/modules/export-resource-table.pug
@@ -0,0 +1,24 @@
+block head
+  style 
+    include ../../css/modules/export-resource-table.css
+
+style.
+  !{customCSS}
+
+block content 
+  .sheet
+    .sheet__title 
+      h2.sheetTitle= sheetTitle
+      p.sheetDesc= sheetDescription
+
+    table.sheet__table
+      thead
+        tr
+          each column in table.columns
+            th(style=column.style class='column--' + column.key)= column.name
+      tbody
+        each row in table.rows
+          tr(class=row.classNames)
+            each cell in row.cells 
+              td(class='cell--' + cell.key)
+                span!= cell.value
--- a/packages/server/scripts/gulpConfig.js
+++ b/packages/server/scripts/gulpConfig.js
@@ -70,6 +70,10 @@ module.exports = {
        src: `${RESOURCES_PATH}/scss/modules/financial-sheet.scss`,
        dest: `${RESOURCES_PATH}/css/modules`,
      },
+      {
+        src: `${RESOURCES_PATH}/scss/modules/export-resource-table.scss`,
+        dest: `${RESOURCES_PATH}/css/modules`,
+      },
    ],
    // RTL builds.
    rtl: [
--- a/packages/server/src/api/controllers/Export/ExportController.ts
+++ b/packages/server/src/api/controllers/Export/ExportController.ts
@@ -5,6 +5,7 @@ import BaseController from '@/api/controllers/BaseController';
 import { ServiceError } from '@/exceptions';
 import { ExportApplication } from '@/services/Export/ExportApplication';
 import { ACCEPT_TYPE } from '@/interfaces/Http';
+import { convertAcceptFormatToFormat } from './_utils';

@Service()
 export class ExportController extends BaseController {
@@ -25,7 +26,6 @@ export class ExportController extends BaseController {
      ],
      this.validationResult,
      this.export.bind(this),
-      this.catchServiceErrors
    );
    return router;
  }
@@ -48,10 +48,12 @@ export class ExportController extends BaseController {
        ACCEPT_TYPE.APPLICATION_CSV,
        ACCEPT_TYPE.APPLICATION_PDF,
      ]);
+      const applicationFormat = convertAcceptFormatToFormat(acceptType);
+
      const data = await this.exportResourceApp.export(
        tenantId,
        query.resource,
-        acceptType === ACCEPT_TYPE.APPLICATION_XLSX ? 'xlsx' : 'csv'
+        applicationFormat
      );
      // Retrieves the csv format.
      if (ACCEPT_TYPE.APPLICATION_CSV === acceptType) {
@@ -70,31 +72,16 @@ export class ExportController extends BaseController {
          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        );
        return res.send(data);
+        //
+      } else if (ACCEPT_TYPE.APPLICATION_PDF === acceptType) {
+        res.set({
+          'Content-Type': 'application/pdf',
+          'Content-Length': data.length,
+        });
+        res.send(data);
      }
    } catch (error) {
      next(error);
    }
  }
-
-  /**
-   * Transforms service errors to response.
-   * @param {Error}
-   * @param {Request} req
-   * @param {Response} res
-   * @param {ServiceError} error
-   */
-  private catchServiceErrors(
-    error,
-    req: Request,
-    res: Response,
-    next: NextFunction
-  ) {
-    if (error instanceof ServiceError) {
-      return res.status(400).send({
-        errors: [{ type: error.errorType }],
-      });
-    }
-
-    next(error);
-  }
 }
--- a/packages/server/src/api/controllers/Export/_utils.ts
+++ b/packages/server/src/api/controllers/Export/_utils.ts
@@ -0,0 +1,13 @@
+import { ACCEPT_TYPE } from '@/interfaces/Http';
+import { ExportFormat } from '@/services/Export/common';
+
+export const convertAcceptFormatToFormat = (accept: string): ExportFormat => {
+  switch (accept) {
+    case ACCEPT_TYPE.APPLICATION_CSV:
+      return ExportFormat.Csv;
+    case ACCEPT_TYPE.APPLICATION_PDF:
+      return ExportFormat.Pdf;
+    case ACCEPT_TYPE.APPLICATION_XLSX:
+      return ExportFormat.Xlsx;
+  }
+};
--- a/packages/server/src/database/migrations/20231108170207_create_documents_table.js
+++ b/packages/server/src/database/migrations/20231108170207_create_documents_table.js
@@ -3,7 +3,7 @@ exports.up = function (knex) {
    table.increments('id').primary();
    table.string('key').notNullable();
    table.string('mime_type').notNullable();
-    table.integer('size').unsigned().notNullable();
+    table.integer('size').unsigned();
    table.string('origin_name');
    table.timestamps();
  });
--- a/packages/server/src/interfaces/Model.ts
+++ b/packages/server/src/interfaces/Model.ts
@@ -122,6 +122,10 @@ export type IModelMetaCollectionField = IModelMetaCollectionFieldCommon &
 export type IModelMetaRelationField = IModelMetaRelationFieldCommon &
  IModelMetaRelationEnumerationField;

+interface IModelPrintMeta{
+  pageTitle: string;
+}
+
 export interface IModelMeta {
  defaultFilterField: string;
  defaultSort: IModelMetaDefaultSort;
@@ -134,6 +138,8 @@ export interface IModelMeta {
  importAggregateOn?: string;
  importAggregateBy?: string;

+  print?: IModelPrintMeta;
+
  fields: { [key: string]: IModelMetaField };
  columns: { [key: string]: IModelMetaColumn };
 }
--- a/packages/server/src/models/Account.Settings.ts
+++ b/packages/server/src/models/Account.Settings.ts
@@ -8,6 +8,9 @@ export default {
  },
  importable: true,
  exportable: true,
+  print: {
+    pageTitle: 'Chart of Accounts',
+  },
  fields: {
    name: {
      name: 'account.field.name',
@@ -121,7 +124,7 @@ export default {
    },
    balance: {
      name: 'account.field.balance',
-      accessor: 'amount',
+      accessor: 'formattedAmount',
    },
    description: {
      name: 'account.field.description',
@@ -133,6 +136,7 @@ export default {
    },
    createdAt: {
      name: 'account.field.created_at',
+      printable: false,
    },
  },
  fields2: {
--- a/packages/server/src/models/Bill.Settings.ts
+++ b/packages/server/src/models/Bill.Settings.ts
@@ -10,6 +10,9 @@ export default {
  importAggregator: 'group',
  importAggregateOn: 'entries',
  importAggregateBy: 'billNumber',
+  print: {
+    pageTitle: 'Bills',
+  },
  fields: {
    vendor: {
      name: 'bill.field.vendor',
@@ -83,6 +86,10 @@ export default {
    },
  },
  columns: {
+    billDate: {
+      name: 'Date',
+      accessor: 'formattedBillDate',
+    },
    billNumber: {
      name: 'Bill No.',
      type: 'text',
@@ -91,13 +98,10 @@ export default {
      name: 'Reference No.',
      type: 'text',
    },
-    billDate: {
-      name: 'Date',
-      type: 'date',
-    },
    dueDate: {
      name: 'Due Date',
      type: 'date',
+      accessor: 'formattedDueDate',
    },
    vendorId: {
      name: 'Vendor',
@@ -111,10 +115,12 @@ export default {
    exchangeRate: {
      name: 'Exchange Rate',
      type: 'number',
+      printable: false,
    },
    currencyCode: {
      name: 'Currency Code',
      type: 'text',
+      printable: false,
    },
    dueAmount: {
      name: 'Due Amount',
@@ -127,10 +133,12 @@ export default {
    note: {
      name: 'Note',
      type: 'text',
+      printable: false,
    },
    open: {
      name: 'Open',
      type: 'boolean',
+      printable: false,
    },
    entries: {
      name: 'Entries',
--- a/packages/server/src/models/BillPayment.Settings.ts
+++ b/packages/server/src/models/BillPayment.Settings.ts
@@ -77,6 +77,7 @@ export default {
    paymentDate: {
      name: 'bill_payment.field.payment_date',
      type: 'date',
+      accessor: 'formattedPaymentDate'
    },
    paymentNumber: {
      name: 'bill_payment.field.payment_number',
@@ -94,14 +95,17 @@ export default {
    currencyCode: {
      name: 'Currency Code',
      type: 'text',
+      printable: false,
    },
    exchangeRate: {
      name: 'bill_payment.field.exchange_rate',
      type: 'number',
+      printable: false,
    },
    statement: {
      name: 'bill_payment.field.note',
      type: 'text',
+      printable: false,
    },
    reference: {
      name: 'bill_payment.field.reference',
--- a/packages/server/src/models/CreditNote.Meta.ts
+++ b/packages/server/src/models/CreditNote.Meta.ts
@@ -20,6 +20,10 @@ export default {
  importAggregateOn: 'entries',
  importAggregateBy: 'creditNoteNumber',

+  print: {
+    pageTitle: 'Credit Notes',
+  },
+
  fields: {
    customer: {
      name: 'credit_note.field.customer',
@@ -88,36 +92,34 @@ export default {
  columns: {
    customer: {
      name: 'Customer',
-      type: 'relation',
      accessor: 'customer.displayName',
    },
    exchangeRate: {
      name: 'Exchange Rate',
-      type: 'number',
+      printable: false,
    },
    creditNoteDate: {
      name: 'Credit Note Date',
-      type: 'date',
+      accessor: 'formattedCreditNoteDate'
    },
    referenceNo: {
      name: 'Reference No.',
-      type: 'text',
    },
    note: {
      name: 'Note',
-      type: 'text',
    },
    termsConditions: {
      name: 'Terms & Conditions',
-      type: 'text',
+      printable: false,
    },
    creditNoteNumber: {
      name: 'Credit Note Number',
-      type: 'text',
+      printable: false,
    },
    open: {
      name: 'Open',
      type: 'boolean',
+      printable: false,
    },
    entries: {
      name: 'Entries',
--- a/packages/server/src/models/Customer.Settings.ts
+++ b/packages/server/src/models/Customer.Settings.ts
@@ -6,6 +6,9 @@ export default {
    sortOrder: 'DESC',
    sortField: 'created_at',
  },
+  print: {
+    pageTitle: 'Customers',
+  },
  fields: {
    first_name: {
      name: 'vendor.field.first_name',
@@ -127,100 +130,121 @@ export default {
    balance: {
      name: 'vendor.field.balance',
      type: 'number',
+      accessor: 'formattedBalance',
    },
    openingBalance: {
      name: 'vendor.field.opening_balance',
      type: 'number',
+      printable: false
    },
    openingBalanceAt: {
      name: 'vendor.field.opening_balance_at',
      type: 'date',
+      printable: false
    },
    currencyCode: {
      name: 'vendor.field.currency',
      type: 'text',
+      printable: false
    },
    status: {
      name: 'vendor.field.status',
+      printable: false
    },
    note: {
      name: 'vendor.field.note',
+      printable: false
    },
    // Billing Address
    billingAddress1: {
      name: 'Billing Address 1',
      column: 'billing_address1',
      type: 'text',
+      printable: false
    },
    billingAddress2: {
      name: 'Billing Address 2',
      column: 'billing_address2',
      type: 'text',
+      printable: false
    },
    billingAddressCity: {
      name: 'Billing Address City',
      column: 'billing_address_city',
      type: 'text',
+      printable: false
    },
    billingAddressCountry: {
      name: 'Billing Address Country',
      column: 'billing_address_country',
      type: 'text',
+      printable: false
    },
    billingAddressPostcode: {
      name: 'Billing Address Postcode',
      column: 'billing_address_postcode',
      type: 'text',
+      printable: false
    },
    billingAddressState: {
      name: 'Billing Address State',
      column: 'billing_address_state',
      type: 'text',
+      printable: false
    },
    billingAddressPhone: {
      name: 'Billing Address Phone',
      column: 'billing_address_phone',
      type: 'text',
+      printable: false
    },
    // Shipping Address
    shippingAddress1: {
      name: 'Shipping Address 1',
      column: 'shipping_address1',
      type: 'text',
+      printable: false
    },
    shippingAddress2: {
      name: 'Shipping Address 2',
      column: 'shipping_address2',
      type: 'text',
+      printable: false
    },
    shippingAddressCity: {
      name: 'Shipping Address City',
      column: 'shipping_address_city',
      type: 'text',
+      printable: false
    },
    shippingAddressCountry: {
      name: 'Shipping Address Country',
      column: 'shipping_address_country',
      type: 'text',
+      printable: false
    },
    shippingAddressPostcode: {
      name: 'Shipping Address Postcode',
      column: 'shipping_address_postcode',
      type: 'text',
+      printable: false
    },
    shippingAddressPhone: {
      name: 'Shipping Address Phone',
      column: 'shipping_address_phone',
      type: 'text',
+      printable: false
    },
    shippingAddressState: {
      name: 'Shipping Address State',
      column: 'shipping_address_state',
      type: 'text',
+      printable: false
    },
    createdAt: {
      name: 'vendor.field.created_at',
      type: 'date',
+      printable: false
    },
  },
  fields2: {
--- a/packages/server/src/models/Expense.Settings.ts
+++ b/packages/server/src/models/Expense.Settings.ts
@@ -10,6 +10,9 @@ export default {
  importable: true,
  exportFlattenOn: 'categories',
  exportable: true,
+  print: {
+    pageTitle: 'Expenses',
+  },
  fields: {
    payment_date: {
      name: 'expense.field.payment_date',
@@ -67,7 +70,7 @@ export default {
    paymentReceive: {
      name: 'expense.field.payment_account',
      type: 'text',
-      accessor: 'paymentAccount.name'
+      accessor: 'paymentAccount.name',
    },
    referenceNo: {
      name: 'expense.field.reference_no',
@@ -75,15 +78,18 @@ export default {
    },
    paymentDate: {
      name: 'expense.field.payment_date',
+      accessor: 'formattedDate',
      type: 'date',
    },
    currencyCode: {
      name: 'expense.field.currency_code',
      type: 'text',
+      printable: false,
    },
    exchangeRate: {
      name: 'expense.field.exchange_rate',
      type: 'number',
+      printable: false,
    },
    description: {
      name: 'expense.field.description',
@@ -111,6 +117,7 @@ export default {
    publish: {
      name: 'expense.field.publish',
      type: 'boolean',
+      printable: false,
    },
  },
  fields2: {
--- a/packages/server/src/models/Item.Settings.ts
+++ b/packages/server/src/models/Item.Settings.ts
@@ -6,6 +6,9 @@ export default {
    sortField: 'name',
    sortOrder: 'DESC',
  },
+  print: {
+    pageTitle: 'Items',
+  },
  fields: {
    type: {
      name: 'item.field.type',
@@ -127,6 +130,7 @@ export default {
      name: 'item.field.type',
      type: 'text',
      exportable: true,
+      accessor: 'typeFormatted',
    },
    name: {
      name: 'item.field.name',
@@ -142,11 +146,13 @@ export default {
      name: 'item.field.sellable',
      type: 'boolean',
      exportable: true,
+      printable: false,
    },
    purchasable: {
      name: 'item.field.purchasable',
      type: 'boolean',
      exportable: true,
+      printable: false,
    },
    sellPrice: {
      name: 'item.field.cost_price',
@@ -163,12 +169,14 @@ export default {
      type: 'text',
      accessor: 'costAccount.name',
      exportable: true,
+      printable: false,
    },
    sellAccount: {
      name: 'item.field.sell_description',
      type: 'text',
      accessor: 'sellAccount.name',
      exportable: true,
+      printable: false,
    },
    inventoryAccount: {
      name: 'item.field.inventory_account',
@@ -180,11 +188,13 @@ export default {
      name: 'Sell description',
      type: 'text',
      exportable: true,
+      printable: false,
    },
    purchaseDescription: {
      name: 'Purchase description',
      type: 'text',
      exportable: true,
+      printable: false,
    },
    quantityOnHand: {
      name: 'item.field.quantity_on_hand',
@@ -206,11 +216,13 @@ export default {
      name: 'item.field.active',
      fieldType: 'boolean',
      exportable: true,
+      printable: false,
    },
    createdAt: {
      name: 'item.field.created_at',
      type: 'date',
      exportable: true,
+      printable: false,
    },
  },
  fields2: {
--- a/packages/server/src/models/ManualJournal.Settings.ts
+++ b/packages/server/src/models/ManualJournal.Settings.ts
@@ -11,6 +11,11 @@ export default {
  importAggregator: 'group',
  importAggregateOn: 'entries',
  importAggregateBy: 'journalNumber',
+
+  print: {
+    pageTitle: 'Manual Journals',
+  },
+
  fields: {
    date: {
      name: 'manual_journal.field.date',
@@ -63,6 +68,7 @@ export default {
    date: {
      name: 'manual_journal.field.date',
      type: 'date',
+      accessor: 'formattedDate',
    },
    journalNumber: {
      name: 'manual_journal.field.journal_number',
@@ -83,10 +89,12 @@ export default {
    currencyCode: {
      name: 'manual_journal.field.currency',
      type: 'text',
+      printable: false,
    },
    exchangeRate: {
      name: 'manual_journal.field.exchange_rate',
      type: 'number',
+      printable: false,
    },
    description: {
      name: 'manual_journal.field.description',
@@ -120,13 +128,17 @@ export default {
      publish: {
        name: 'Publish',
        type: 'boolean',
+        printable: false,
      },
      publishedAt: {
        name: 'Published At',
+        printable: false,
      },
    },
    createdAt: {
      name: 'Created At',
+      accessor: 'formattedCreatedAt',
+      printable: false,
    },
  },
  fields2: {
--- a/packages/server/src/models/PaymentReceive.Settings.ts
+++ b/packages/server/src/models/PaymentReceive.Settings.ts
@@ -67,10 +67,12 @@ export default {
    paymentDate: {
      name: 'payment_receive.field.payment_date',
      type: 'date',
+      accessor: 'formattedPaymentDate',
    },
    amount: {
      name: 'payment_receive.field.amount',
      type: 'number',
+      accessor: 'formattedAmount'
    },
    referenceNo: {
      name: 'payment_receive.field.reference_no',
@@ -88,10 +90,12 @@ export default {
    statement: {
      name: 'payment_receive.field.statement',
      type: 'text',
+      printable: false,
    },
    created_at: {
      name: 'payment_receive.field.created_at',
      type: 'date',
+      printable: false,
    },
  },
  fields2: {
--- a/packages/server/src/models/SaleEstimate.Settings.ts
+++ b/packages/server/src/models/SaleEstimate.Settings.ts
@@ -11,6 +11,11 @@ export default {
  importAggregator: 'group',
  importAggregateOn: 'entries',
  importAggregateBy: 'estimateNumber',
+
+  print: {
+    pageTitle: 'Sale Estimates'
+  },
+
  fields: {
    amount: {
      name: 'estimate.field.amount',
@@ -86,11 +91,13 @@ export default {
    estimateDate: {
      name: 'Estimate Date',
      type: 'date',
+      accessor: 'formattedEstimateDate',
      exportable: true,
    },
    expirationDate: {
      name: 'Expiration Date',
      type: 'date',
+      accessor: 'formattedExpirationDate',
      exportable: true,
    },
    estimateNumber: {
@@ -112,26 +119,31 @@ export default {
      name: 'Exchange Rate',
      type: 'number',
      exportable: true,
+      printable: false,
    },
    currencyCode: {
      name: 'Currency',
      type: 'text',
      exportable: true,
+      printable: false,
    },
    note: {
      name: 'Note',
      type: 'text',
      exportable: true,
+      printable: false,
    },
    termsConditions: {
      name: 'Terms & Conditions',
      type: 'text',
      exportable: true,
+      printable: false,
    },
    delivered: {
      name: 'Delivered',
      type: 'boolean',
      exportable: true,
+      printable: false,
    },
    entries: {
      name: 'Entries',
@@ -153,6 +165,7 @@ export default {
        },
        description: {
          name: 'Item Description',
+          printable: false,
        },
        amount: {
          name: 'Item Amount',
--- a/packages/server/src/models/SaleInvoice.Settings.ts
+++ b/packages/server/src/models/SaleInvoice.Settings.ts
@@ -11,6 +11,10 @@ export default {
  importAggregator: 'group',
  importAggregateOn: 'entries',
  importAggregateBy: 'invoiceNo',
+
+  print: {
+    pageTitle: 'Sale invoices',
+  },
  fields: {
    customer: {
      name: 'invoice.field.customer',
@@ -94,10 +98,12 @@ export default {
    invoiceDate: {
      name: 'invoice.field.invoice_date',
      type: 'date',
+      accessor: 'invoiceDateFormatted',
    },
    dueDate: {
      name: 'invoice.field.due_date',
      type: 'date',
+      accessor: 'dueDateFormatted',
    },
    referenceNo: {
      name: 'invoice.field.reference_no',
@@ -120,10 +126,12 @@ export default {
    exchangeRate: {
      name: 'invoice.field.exchange_rate',
      type: 'number',
+      printable: false,
    },
    currencyCode: {
      name: 'invoice.field.currency',
      type: 'text',
+      printable: false,
    },
    paidAmount: {
      name: 'Paid Amount',
@@ -136,14 +144,17 @@ export default {
    invoiceMessage: {
      name: 'invoice.field.invoice_message',
      type: 'text',
+      printable: false,
    },
    termsConditions: {
      name: 'invoice.field.terms_conditions',
      type: 'text',
+      printable: false,
    },
    delivered: {
      name: 'invoice.field.delivered',
      type: 'boolean',
+      printable: false,
    },
    entries: {
      name: 'Entries',
@@ -165,6 +176,7 @@ export default {
        },
        description: {
          name: 'Item Description',
+          printable: false,
        },
        amount: {
          name: 'Item Amount',
@@ -202,18 +214,22 @@ export default {
    exchangeRate: {
      name: 'invoice.field.exchange_rate',
      fieldType: 'number',
+      printable: false,
    },
    currencyCode: {
      name: 'invoice.field.currency',
      fieldType: 'text',
+      printable: false,
    },
    invoiceMessage: {
      name: 'invoice.field.invoice_message',
      fieldType: 'text',
+      printable: false,
    },
    termsConditions: {
      name: 'invoice.field.terms_conditions',
      fieldType: 'text',
+      printable: false,
    },
    entries: {
      name: 'invoice.field.entries',
@@ -249,6 +265,7 @@ export default {
    delivered: {
      name: 'invoice.field.delivered',
      fieldType: 'boolean',
+      printable: false,
    },
  },
 };
--- a/packages/server/src/models/SaleReceipt.Settings.ts
+++ b/packages/server/src/models/SaleReceipt.Settings.ts
@@ -11,6 +11,10 @@ export default {
  importAggregator: 'group',
  importAggregateOn: 'entries',
  importAggregateBy: 'receiptNumber',
+
+  print: {
+    pageTitle: 'Sale Receipts',
+  },
  fields: {
    amount: {
      name: 'receipt.field.amount',
@@ -81,11 +85,6 @@ export default {
    },
  },
  columns: {
-    amount: {
-      name: 'receipt.field.amount',
-      column: 'amount',
-      type: 'number',
-    },
    depositAccount: {
      name: 'receipt.field.deposit_account',
      type: 'text',
@@ -98,6 +97,7 @@ export default {
    },
    receiptDate: {
      name: 'receipt.field.receipt_date',
+      accessor: 'formattedReceiptDate',
      type: 'date',
    },
    receiptNumber: {
@@ -114,10 +114,17 @@ export default {
      name: 'receipt.field.receipt_message',
      column: 'receipt_message',
      type: 'text',
+      printable: false,
+    },
+    amount: {
+      name: 'receipt.field.amount',
+      accessor: 'formattedAmount',
+      type: 'number',
    },
    statement: {
      name: 'receipt.field.statement',
      type: 'text',
+      printable: false,
    },
    status: {
      name: 'receipt.field.status',
@@ -127,6 +134,7 @@ export default {
        { key: 'closed', label: 'receipt.field.status.closed' },
      ],
      exportable: true,
+      printable: false,
    },
    entries: {
      name: 'Entries',
@@ -148,6 +156,7 @@ export default {
        },
        description: {
          name: 'Item Description',
+          printable: false,
        },
        amount: {
          name: 'Item Amount',
@@ -158,6 +167,7 @@ export default {
    createdAt: {
      name: 'receipt.field.created_at',
      type: 'date',
+      printable: false,
    },
  },
  fields2: {
--- a/packages/server/src/models/Vendor.Settings.ts
+++ b/packages/server/src/models/Vendor.Settings.ts
@@ -131,21 +131,26 @@ export default {
    openingBalance: {
      name: 'vendor.field.opening_balance',
      type: 'number',
+      printable: false
    },
    openingBalanceAt: {
      name: 'vendor.field.opening_balance_at',
      type: 'date',
+      printable: false
    },
    currencyCode: {
      name: 'vendor.field.currency',
      type: 'text',
+      printable: false
    },
    status: {
      name: 'vendor.field.status',
+      printable: false
    },
    note: {
      name: 'vendor.field.note',
      type: 'text',
+      printable: false
    },
    // Billing Address
    billingAddress1: {
@@ -153,42 +158,49 @@ export default {
      column: 'billing_address1',
      type: 'text',
      exportable: true,
+      printable: false
    },
    billingAddress2: {
      name: 'Billing Address 2',
      column: 'billing_address2',
      type: 'text',
      exportable: true,
+      printable: false
    },
    billingAddressCity: {
      name: 'Billing Address City',
      column: 'billing_address_city',
      type: 'text',
      exportable: true,
+      printable: false
    },
    billingAddressCountry: {
      name: 'Billing Address Country',
      column: 'billing_address_country',
      type: 'text',
      exportable: true,
+      printable: false
    },
    billingAddressPostcode: {
      name: 'Billing Address Postcode',
      column: 'billing_address_postcode',
      type: 'text',
      exportable: true,
+      printable: false
    },
    billingAddressState: {
      name: 'Billing Address State',
      column: 'billing_address_state',
      type: 'text',
      exportable: true,
+      printable: false
    },
    billingAddressPhone: {
      name: 'Billing Address Phone',
      column: 'billing_address_phone',
      type: 'text',
      exportable: true,
+      printable: false
    },
    // Shipping Address
    shippingAddress1: {
@@ -196,47 +208,55 @@ export default {
      column: 'shipping_address1',
      type: 'text',
      exportable: true,
+      printable: false
    },
    shippingAddress2: {
      name: 'Shipping Address 2',
      column: 'shipping_address2',
      type: 'text',
      exportable: true,
+      printable: false
    },
    shippingAddressCity: {
      name: 'Shipping Address City',
      column: 'shipping_address_city',
      type: 'text',
      exportable: true,
+      printable: false
    },
    shippingAddressCountry: {
      name: 'Shipping Address Country',
      column: 'shipping_address_country',
      type: 'text',
      exportable: true,
+      printable: false
    },
    shippingAddressPostcode: {
      name: 'Shipping Address Postcode',
      column: 'shipping_address_postcode',
      type: 'text',
      exportable: true,
+      printable: false
    },
    shippingAddressState: {
      name: 'Shipping Address State',
      column: 'shipping_address_state',
      type: 'text',
      exportable: true,
+      printable: false
    },
    shippingAddressPhone: {
      name: 'Shipping Address Phone',
      column: 'shipping_address_phone',
      type: 'text',
      exportable: true,
+      printable: false
    },
    createdAt: {
      name: 'vendor.field.created_at',
      type: 'date',
      exportable: true,
+      printable: false
    },
  },
  fields2: {
--- a/packages/server/src/models/VendorCredit.Meta.ts
+++ b/packages/server/src/models/VendorCredit.Meta.ts
@@ -20,6 +20,9 @@ export default {
  importAggregateOn: 'entries',
  importAggregateBy: 'vendorCreditNumber',

+  print: {
+    pageTitle: 'Vendor Credits',
+  },
  fields: {
    vendor: {
      name: 'vendor_credit.field.vendor',
@@ -89,6 +92,7 @@ export default {
    exchangeRate: {
      name: 'Echange Rate',
      type: 'text',
+      printable: false,
    },
    vendorCreditNumber: {
      name: 'Vendor Credit No.',
@@ -100,7 +104,7 @@ export default {
    },
    vendorCreditDate: {
      name: 'Vendor Credit Date',
-      type: 'date',
+      accessor: 'formattedVendorCreditDate',
    },
    amount: {
      name: 'Amount',
@@ -109,10 +113,12 @@ export default {
    creditRemaining: {
      name: 'Credits Remaining',
      accessor: 'formattedCreditsRemaining',
+      printable: false,
    },
    refundedAmount: {
      name: 'Refunded Amount',
      accessor: 'refundedAmount',
+      printable: false,
    },
    invoicedAmount: {
      name: 'Invoiced Amount',
@@ -121,10 +127,12 @@ export default {
    note: {
      name: 'Note',
      type: 'text',
+      printable: false,
    },
    open: {
      name: 'Open',
      type: 'boolean',
+      printable: false,
    },
    entries: {
      name: 'Entries',
--- a/packages/server/src/services/ChromiumlyTenancy/ChromiumlyHtmlConvert.ts
+++ b/packages/server/src/services/ChromiumlyTenancy/ChromiumlyHtmlConvert.ts
@@ -5,7 +5,11 @@ import { PageProperties, PdfFormat } from '@/lib/Chromiumly/_types';
 import { UrlConverter } from '@/lib/Chromiumly/UrlConvert';
 import HasTenancyService from '../Tenancy/TenancyService';
 import { Chromiumly } from '@/lib/Chromiumly/Chromiumly';
-import { PDF_FILE_EXPIRE_IN, getPdfFilesStorageDir } from './utils';
+import {
+  PDF_FILE_EXPIRE_IN,
+  getPdfFilePath,
+  getPdfFilesStorageDir,
+} from './utils';

@Service()
 export class ChromiumlyHtmlConvert {
@@ -22,22 +26,16 @@ export class ChromiumlyHtmlConvert {
    tenantId: number,
    content: string
  ): Promise<[string, () => Promise<void>]> {
-    const { Attachment } = this.tenancy.models(tenantId);
+    const { Document } = this.tenancy.models(tenantId);

-    const filename = `document-${Date.now()}.html`;
-    const storageDir = getPdfFilesStorageDir(filename);
-    const filePath = path.join(global.__storage_dir, storageDir);
+    const filename = `document-print-${Date.now()}.html`;
+    const filePath = getPdfFilePath(filename);

    await fs.writeFile(filePath, content);
-    await Attachment.query().insert({
-      key: filename,
-      path: storageDir,
-      expire_in: PDF_FILE_EXPIRE_IN, // ms
-      extension: 'html',
-    });
+    await Document.query().insert({ key: filename, mimeType: 'text/html' });
    const cleanup = async () => {
      await fs.unlink(filePath);
-      await Attachment.query().where('key', filename).delete();
+      await Document.query().where('key', filename).delete();
    };
    return [filename, cleanup];
  }
@@ -60,6 +58,7 @@ export class ChromiumlyHtmlConvert {
      html
    );
    const fileDir = getPdfFilesStorageDir(filename);
+
    const url = path.join(Chromiumly.GOTENBERG_DOCS_ENDPOINT, fileDir);
    const urlConverter = new UrlConverter();

--- a/packages/server/src/services/ChromiumlyTenancy/utils.ts
+++ b/packages/server/src/services/ChromiumlyTenancy/utils.ts
@@ -5,4 +5,10 @@ export const PDF_FILE_EXPIRE_IN = 40; // ms

 export const getPdfFilesStorageDir = (filename: string) => {
  return path.join(PDF_FILE_SUB_DIR, filename);
-}
+};
+
+export const getPdfFilePath = (filename: string) => {
+  const storageDir = getPdfFilesStorageDir(filename);
+
+  return path.join(global.__storage_dir, storageDir);
+};
--- a/packages/server/src/services/Export/ExportApplication.ts
+++ b/packages/server/src/services/Export/ExportApplication.ts
@@ -1,5 +1,6 @@
 import { Inject, Service } from 'typedi';
 import { ExportResourceService } from './ExportService';
+import { ExportFormat } from './common';

@Service()
 export class ExportApplication {
@@ -9,9 +10,9 @@ export class ExportApplication {
  /**
   * Exports the given resource to csv, xlsx or pdf format.
   * @param {string} reosurce
-   * @param {string} format
+   * @param {ExportFormat} format
   */
-  public export(tenantId: number, resource: string, format: string) {
+  public export(tenantId: number, resource: string, format: ExportFormat) {
    return this.exportResource.export(tenantId, resource, format);
  }
 }
--- a/packages/server/src/services/Export/ExportPdf.ts
+++ b/packages/server/src/services/Export/ExportPdf.ts
@@ -0,0 +1,47 @@
+import { Inject, Service } from 'typedi';
+import { ChromiumlyTenancy } from '../ChromiumlyTenancy/ChromiumlyTenancy';
+import { TemplateInjectable } from '../TemplateInjectable/TemplateInjectable';
+import { mapPdfRows } from './utils';
+
+@Service()
+export class ExportPdf {
+  @Inject()
+  private templateInjectable: TemplateInjectable;
+
+  @Inject()
+  private chromiumlyTenancy: ChromiumlyTenancy;
+
+  /**
+   * Generates the pdf table sheet for the given data and columns.
+   * @param {number} tenantId
+   * @param {} columns
+   * @param {Record<string, string>} data
+   * @param {string} sheetTitle
+   * @param {string} sheetDescription
+   * @returns
+   */
+  public async pdf(
+    tenantId: number,
+    columns: { accessor: string },
+    data: Record<string, any>,
+    sheetTitle: string = '',
+    sheetDescription: string = ''
+  ) {
+    const rows = mapPdfRows(columns, data);
+
+    const htmlContent = await this.templateInjectable.render(
+      tenantId,
+      'modules/export-resource-table',
+      {
+        table: { rows, columns },
+        sheetTitle,
+        sheetDescription,
+      }
+    );
+    // Convert the HTML content to PDF
+    return this.chromiumlyTenancy.convertHtmlContent(tenantId, htmlContent, {
+      margins: { top: 0.2, bottom: 0.2, left: 0.2, right: 0.2 },
+      landscape: true,
+    });
+  }
+}
--- a/packages/server/src/services/Export/ExportService.ts
+++ b/packages/server/src/services/Export/ExportService.ts
@@ -6,9 +6,10 @@ import { sanitizeResourceName } from '../Import/_utils';
 import ResourceService from '../Resource/ResourceService';
 import { ExportableResources } from './ExportResources';
 import { ServiceError } from '@/exceptions';
-import { Errors } from './common';
+import { Errors, ExportFormat } from './common';
 import { IModelMeta, IModelMetaColumn } from '@/interfaces';
 import { flatDataCollections, getDataAccessor } from './utils';
+import { ExportPdf } from './ExportPdf';

@Service()
 export class ExportResourceService {
@@ -18,13 +19,20 @@ export class ExportResourceService {
  @Inject()
  private exportableResources: ExportableResources;

+  @Inject()
+  private exportPdf: ExportPdf;
+
  /**
   * Exports the given resource data through csv, xlsx or pdf.
   * @param {number} tenantId - Tenant id.
   * @param {string} resourceName - Resource name.
-   * @param {string} format - File format.
+   * @param {ExportFormat} format - File format.
   */
-  public async export(tenantId: number, resourceName: string, format: string = 'csv') {
+  public async export(
+    tenantId: number,
+    resourceName: string,
+    format: ExportFormat = ExportFormat.Csv
+  ) {
    const resource = sanitizeResourceName(resourceName);
    const resourceMeta = this.getResourceMeta(tenantId, resource);

@@ -32,10 +40,24 @@ export class ExportResourceService {

    const data = await this.getExportableData(tenantId, resource);
    const transformed = this.transformExportedData(tenantId, resource, data);
-    const exportableColumns = this.getExportableColumns(resourceMeta);
-    const workbook = this.createWorkbook(transformed, exportableColumns);

-    return this.exportWorkbook(workbook, format);
+    // Returns the csv, xlsx format.
+    if (format === ExportFormat.Csv || format === ExportFormat.Xlsx) {
+      const exportableColumns = this.getExportableColumns(resourceMeta);
+      const workbook = this.createWorkbook(transformed, exportableColumns);
+
+      return this.exportWorkbook(workbook, format);
+      // Returns the pdf format.
+    } else if (format === ExportFormat.Pdf) {
+      const printableColumns = this.getPrintableColumns(resourceMeta);
+
+      return this.exportPdf.pdf(
+        tenantId,
+        printableColumns,
+        transformed,
+        resourceMeta?.print?.pageTitle
+      );
+    }
  }

  /**
@@ -91,6 +113,7 @@ export class ExportResourceService {
  private async getExportableData(tenantId: number, resource: string) {
    const exportable =
      this.exportableResources.registry.getExportable(resource);
+
    return exportable.exportable(tenantId, {});
  }

@@ -125,6 +148,32 @@ export class ExportResourceService {
    return processColumns(resourceMeta.columns);
  }

+  private getPrintableColumns(resourceMeta: IModelMeta) {
+    const processColumns = (
+      columns: { [key: string]: IModelMetaColumn },
+      parent = ''
+    ) => {
+      return Object.entries(columns)
+        .filter(([_, value]) => value.printable !== false)
+        .flatMap(([key, value]) => {
+          if (value.type === 'collection' && value.collectionOf === 'object') {
+            return processColumns(value.columns, key);
+          } else {
+            const group = parent;
+            return [
+              {
+                name: value.name,
+                type: value.type || 'text',
+                accessor: value.accessor || key,
+                group,
+              },
+            ];
+          }
+        });
+    };
+    return processColumns(resourceMeta.columns);
+  }
+
  /**
   * Creates a workbook from the provided data and columns.
   * @param {any[]} data - The data to be included in the workbook.
@@ -136,7 +185,6 @@ export class ExportResourceService {
    const worksheetData = data.map((item) =>
      exportableColumns.map((col) => get(item, getDataAccessor(col)))
    );
-
    worksheetData.unshift(exportableColumns.map((col) => col.name));

    const worksheet = xlsx.utils.aoa_to_sheet(worksheetData);
--- a/packages/server/src/services/Export/common.ts
+++ b/packages/server/src/services/Export/common.ts
@@ -1,3 +1,9 @@
 export enum Errors {
  RESOURCE_NOT_EXPORTABLE = 'RESOURCE_NOT_EXPORTABLE',
 }
+
+export enum ExportFormat {
+  Csv = 'csv',
+  Pdf = 'pdf',
+  Xlsx = 'xlsx',
+}
--- a/packages/server/src/services/Export/utils.ts
+++ b/packages/server/src/services/Export/utils.ts
@@ -1,4 +1,4 @@
-import { flatMap } from 'lodash';
+import { flatMap, get } from 'lodash';
 /**
 * Flattens the data based on a specified attribute.
 * @param data - The data to be flattened.
@@ -25,3 +25,21 @@ export const flatDataCollections = (
 export const getDataAccessor = (col: any) => {
  return col.group ? `${col.group}.${col.accessor}` : col.accessor;
 };
+
+/**
+ * Maps the data retrieved from the service layer to the pdf document.
+ * @param {any} columns
+ * @param {Record<stringm any>} data
+ * @returns
+ */
+export const mapPdfRows = (columns: any, data: Record<string, any>) => {
+  return data.map((item) => {
+    const cells = columns.map((column) => {
+      return {
+        key: column.accessor,
+        value: get(item, getDataAccessor(column)),
+      };
+    });
+    return { cells, classNames: '' };
+  });
+};
--- a/packages/webapp/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.tsx
+++ b/packages/webapp/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.tsx
@@ -30,6 +30,7 @@ import withSettings from '@/containers/Settings/withSettings';
 import withSettingsActions from '@/containers/Settings/withSettingsActions';
 import withDialogActions from '@/containers/Dialog/withDialogActions';

+import { useDownloadExportPdf } from '@/hooks/query/FinancialReports/use-export-pdf';
 import { compose } from '@/utils';
 import { DialogsName } from '@/constants/dialogs';

@@ -50,7 +51,7 @@ function ManualJournalActionsBar({
  addSetting,

  // #withDialogActions
-  openDialog
+  openDialog,
 }) {
  // History context.
  const history = useHistory();
@@ -58,6 +59,9 @@ function ManualJournalActionsBar({
  // Manual journals context.
  const { journalsViews, fields } = useManualJournalsContext();

+  // Exports pdf document.
+  const { downloadAsync: downloadExportPdf } = useDownloadExportPdf();
+
  // Manual journals refresh action.
  const { refresh } = useRefreshJournals();

@@ -91,6 +95,11 @@ function ManualJournalActionsBar({
    openDialog(DialogsName.Export, { resource: 'manual_journal' });
  };

+  // Handle the pdf print button click.
+  const handlePdfPrintBtnSubmit = () => {
+    downloadExportPdf({ resource: 'ManualJournal' });
+  };
+
  return (
    <DashboardActionsBar>
      <NavbarGroup>
@@ -134,10 +143,12 @@ function ManualJournalActionsBar({
          />
        </If>

+        <NavbarDivider />
        <Button
          className={Classes.MINIMAL}
          icon={<Icon icon="print-16" iconSize={16} />}
          text={<T id={'print'} />}
+          onClick={handlePdfPrintBtnSubmit}
        />
        <Button
          className={Classes.MINIMAL}
--- a/packages/webapp/src/containers/Accounts/AccountsActionsBar.tsx
+++ b/packages/webapp/src/containers/Accounts/AccountsActionsBar.tsx
@@ -1,6 +1,6 @@
 // @ts-nocheck
 import React from 'react';
-import { isEmpty } from 'lodash';
+import { isEmpty, isUndefined } from 'lodash';
 import {
  Button,
  NavbarGroup,
@@ -9,7 +9,11 @@ import {
  Intent,
  Switch,
  Alignment,
+  ProgressBar,
+  ToastProps,
+  Text,
 } from '@blueprintjs/core';
+import clsx from 'classnames';

 import {
  AdvancedFilterPopover,
@@ -26,8 +30,10 @@ import {
 import { AccountAction, AbilitySubject } from '@/constants/abilityOption';
 import { DialogsName } from '@/constants/dialogs';

+import { useHistory } from 'react-router-dom';
 import { useRefreshAccounts } from '@/hooks/query/accounts';
 import { useAccountsChartContext } from './AccountsChartProvider';
+import { useDownloadExportPdf } from '@/hooks/query/FinancialReports/use-export-pdf';

 import withAccounts from './withAccounts';
 import withAccountsTableActions from './withAccountsTableActions';
@@ -37,7 +43,6 @@ import withSettings from '@/containers/Settings/withSettings';
 import withSettingsActions from '@/containers/Settings/withSettingsActions';

 import { compose } from '@/utils';
-import { useHistory } from 'react-router-dom';

 /**
 * Accounts actions bar.
@@ -57,22 +62,18 @@ function AccountsActionsBar({
  // #withAccountsTableActions
  setAccountsTableState,

-  // #ownProps
-  onFilterChanged,
-
  // #withSettings
  accountsTableSize,

  // #withSettingsActions
  addSetting,
 }) {
-  const { resourceViews, fields } = useAccountsChartContext();
-
  const history = useHistory();

-  const onClickNewAccount = () => {
-    openDialog(DialogsName.AccountForm, {});
-  };
+  const { resourceViews, fields } = useAccountsChartContext();
+
+  // Exports pdf document.
+  const { downloadAsync: downloadExportPdf } = useDownloadExportPdf();

  // Accounts refresh action.
  const { refresh } = useRefreshAccounts();
@@ -81,35 +82,29 @@ function AccountsActionsBar({
  const handleBulkDelete = () => {
    openAlert('accounts-bulk-delete', { accountsIds: accountsSelectedRows });
  };
-
  // Handle bulk accounts activate.
  const handelBulkActivate = () => {
    openAlert('accounts-bulk-activate', { accountsIds: accountsSelectedRows });
  };
-
  // Handle bulk accounts inactivate.
  const handelBulkInactive = () => {
    openAlert('accounts-bulk-inactivate', {
      accountsIds: accountsSelectedRows,
    });
  };
-
  // Handle tab changing.
  const handleTabChange = (view) => {
    setAccountsTableState({ viewSlug: view ? view.slug : null });
  };
-
  // Handle inactive switch changing.
  const handleInactiveSwitchChange = (event) => {
    const checked = event.target.checked;
    setAccountsTableState({ inactiveMode: checked });
  };
-
  // Handle click a refresh accounts
  const handleRefreshBtnClick = () => {
    refresh();
  };
-
  // Handle table row size change.
  const handleTableRowSizeChange = (size) => {
    addSetting('accounts', 'tableSize', size);
@@ -122,6 +117,14 @@ function AccountsActionsBar({
  const handleExportBtnClick = () => {
    openDialog(DialogsName.Export, { resource: 'account' });
  };
+  // Handle the print button click.
+  const handlePrintBtnClick = () => {
+    downloadExportPdf({ resource: 'Account' });
+  };
+  // Handle click new account.
+  const onClickNewAccount = () => {
+    openDialog(DialogsName.AccountForm, {});
+  };

  return (
    <DashboardActionsBar>
@@ -185,6 +188,7 @@ function AccountsActionsBar({
          className={Classes.MINIMAL}
          icon={<Icon icon="print-16" iconSize={16} />}
          text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
        />
        <Button
          className={Classes.MINIMAL}
--- a/packages/webapp/src/containers/Customers/CustomersLanding/CustomersActionsBar.tsx
+++ b/packages/webapp/src/containers/Customers/CustomersLanding/CustomersActionsBar.tsx
@@ -25,6 +25,7 @@ import {

 import { useCustomersListContext } from './CustomersListProvider';
 import { useRefreshCustomers } from '@/hooks/query/customers';
+import { useDownloadExportPdf } from '@/hooks/query/FinancialReports/use-export-pdf';

 import withCustomers from './withCustomers';
 import withCustomersActions from './withCustomersActions';
@@ -70,6 +71,9 @@ function CustomerActionsBar({
  // Customers refresh action.
  const { refresh } = useRefreshCustomers();

+  // Exports pdf document.
+  const { downloadAsync: downloadExportPdf } = useDownloadExportPdf();
+
  const onClickNewCustomer = () => {
    history.push('/customers/new');
  };
@@ -109,6 +113,10 @@ function CustomerActionsBar({
  const handleExportBtnClick = () => {
    openDialog(DialogsName.Export, { resource: 'customer' });
  };
+  // Handle the print button click.
+  const handlePrintBtnClick = () => {
+    downloadExportPdf({ resource: 'Customer' });
+  };

  return (
    <DashboardActionsBar>
@@ -154,6 +162,13 @@ function CustomerActionsBar({
            onClick={handleBulkDelete}
          />
        </If>
+        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="print-16" iconSize={16} />}
+          text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
+        />
        <Button
          className={Classes.MINIMAL}
          icon={<Icon icon="file-import-16" iconSize={16} />}
--- a/packages/webapp/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.tsx
+++ b/packages/webapp/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.tsx
@@ -23,8 +23,11 @@ import {
 } from '@/components';

 import { ExpenseAction, AbilitySubject } from '@/constants/abilityOption';
+import { DialogsName } from '@/constants/dialogs';
+
 import { useRefreshExpenses } from '@/hooks/query/expenses';
 import { useExpensesListContext } from './ExpensesListProvider';
+import { useDownloadExportPdf } from '@/hooks/query/FinancialReports/use-export-pdf';

 import withExpenses from './withExpenses';
 import withExpensesActions from './withExpensesActions';
@@ -33,7 +36,6 @@ import withDialogActions from '@/containers/Dialog/withDialogActions';
 import withSettings from '@/containers/Settings/withSettings';

 import { compose } from '@/utils';
-import { DialogsName } from '@/constants/dialogs';

 /**
 * Expenses actions bar.
@@ -60,6 +62,9 @@ function ExpensesActionsBar({
  // Expenses list context.
  const { expensesViews, fields } = useExpensesListContext();

+  // Exports pdf document.
+  const { downloadAsync: downloadExportPdf } = useDownloadExportPdf();
+
  // Expenses refresh action.
  const { refresh } = useRefreshExpenses();

@@ -92,6 +97,10 @@ function ExpensesActionsBar({
  const handleExportBtnClick = () => {
    openDialog(DialogsName.Export, { resource: 'expense' });
  };
+  // Handles the print button click.
+  const handlePrintBtnClick = () => {
+    downloadExportPdf({ resource: 'Expense' });
+  };

  return (
    <DashboardActionsBar>
@@ -135,11 +144,12 @@ function ExpensesActionsBar({
            onClick={handleBulkDelete}
          />
        </If>
-
+        <NavbarDivider />
        <Button
          className={Classes.MINIMAL}
          icon={<Icon icon="print-16" iconSize={16} />}
          text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
        />
        <Button
          className={Classes.MINIMAL}
--- a/packages/webapp/src/containers/Items/ItemsActionsBar.tsx
+++ b/packages/webapp/src/containers/Items/ItemsActionsBar.tsx
@@ -27,6 +27,7 @@ import {
 import { ItemAction, AbilitySubject } from '@/constants/abilityOption';
 import { useItemsListContext } from './ItemsListProvider';
 import { useRefreshItems } from '@/hooks/query/items';
+import { useDownloadExportPdf } from '@/hooks/query/FinancialReports/use-export-pdf';

 import withItems from './withItems';
 import withItemsActions from './withItemsActions';
@@ -60,11 +61,14 @@ function ItemsActionsBar({
  addSetting,

  // #withDialogActions
-  openDialog
+  openDialog,
 }) {
  // Items list context.
  const { itemsViews, fields } = useItemsListContext();

+  // Exports pdf document.
+  const { downloadAsync: downloadExportPdf } = useDownloadExportPdf();
+
  // Items refresh action.
  const { refresh } = useRefreshItems();

@@ -107,7 +111,12 @@ function ItemsActionsBar({
  // Handle the export button click.
  const handleExportBtnClick = () => {
    openDialog(DialogsName.Export, { resource: 'item' });
-  }
+  };
+
+  // Handle the print button click.
+  const handlePrintBtnClick = () => {
+    downloadExportPdf({ resource: 'Item' });
+  };

  return (
    <DashboardActionsBar>
@@ -153,7 +162,12 @@ function ItemsActionsBar({
            onClick={handleBulkDelete}
          />
        </If>
-
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'print-16'} iconSize={'16'} />}
+          text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
+        />
        <Button
          className={Classes.MINIMAL}
          icon={<Icon icon="file-import-16" iconSize={16} />}
@@ -204,5 +218,5 @@ export default compose(
  })),
  withItemsActions,
  withAlertActions,
-  withDialogActions
+  withDialogActions,
 )(ItemsActionsBar);
--- a/packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.tsx
+++ b/packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.tsx
@@ -28,11 +28,13 @@ import withBills from './withBills';
 import withBillsActions from './withBillsActions';
 import withSettings from '@/containers/Settings/withSettings';
 import withSettingsActions from '@/containers/Settings/withSettingsActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';

 import { useBillsListContext } from './BillsListProvider';
 import { useRefreshBills } from '@/hooks/query/bills';
+import { useDownloadExportPdf } from '@/hooks/query/FinancialReports/use-export-pdf';
+
 import { compose } from '@/utils';
-import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { DialogsName } from '@/constants/dialogs';

 /**
@@ -62,11 +64,13 @@ function BillActionsBar({
  // Bills list context.
  const { billsViews, fields } = useBillsListContext();

+  // Exports pdf document.
+  const { downloadAsync: downloadExportPdf } = useDownloadExportPdf();
+
  // Handle click a new bill.
  const handleClickNewBill = () => {
    history.push('/bills/new');
  };
-
  // Handle tab change.
  const handleTabChange = (view) => {
    setBillsTableState({
@@ -77,21 +81,22 @@ function BillActionsBar({
  const handleRefreshBtnClick = () => {
    refresh();
  };
-
  // Handle table row size change.
  const handleTableRowSizeChange = (size) => {
    addSetting('bills', 'tableSize', size);
  };
-
  // Handle the import button click.
  const handleImportBtnClick = () => {
    history.push('/bills/import');
  };
-
  // Handle the export button click.
  const handleExportBtnClick = () => {
    openDialog(DialogsName.Export, { resource: 'bill' });
  };
+  // Handle the print button click.
+  const handlePrintBtnClick = () => {
+    downloadExportPdf({ resource: 'Bill' });
+  };

  return (
    <DashboardActionsBar>
@@ -133,13 +138,14 @@ function BillActionsBar({
            icon={<Icon icon={'trash-16'} iconSize={16} />}
            text={<T id={'delete'} />}
            intent={Intent.DANGER}
-            // onClick={handleBulkDelete}
          />
        </If>
+        <NavbarDivider />
        <Button
          className={Classes.MINIMAL}
          icon={<Icon icon={'print-16'} iconSize={'16'} />}
          text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
        />
        <Button
          className={Classes.MINIMAL}
@@ -153,7 +159,6 @@ function BillActionsBar({
          text={<T id={'export'} />}
          onClick={handleExportBtnClick}
        />
-
        <NavbarDivider />
        <DashboardRowsHeightButton
          initialValue={billsTableSize}
--- a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteActionsBar.tsx
+++ b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteActionsBar.tsx
@@ -21,6 +21,7 @@ import {
 } from '@/components';

 import { useVendorsCreditNoteListContext } from './VendorsCreditNoteListProvider';
+import { useDownloadExportPdf } from '@/hooks/query/FinancialReports/use-export-pdf';
 import { VendorCreditAction, AbilitySubject } from '@/constants/abilityOption';

 import withVendorsCreditNotesActions from './withVendorsCreditNotesActions';
@@ -60,35 +61,37 @@ function VendorsCreditNoteActionsBar({
  const { VendorCreditsViews, fields, refresh } =
    useVendorsCreditNoteListContext();

+  // Exports pdf document.
+  const { downloadAsync: downloadExportPdf } = useDownloadExportPdf();
+
  // Handle click a new Vendor.
  const handleClickNewVendorCredit = () => {
    history.push('/vendor-credits/new');
  };
-
  // Handle view tab change.
  const handleTabChange = (view) => {
    setVendorCreditsTableState({ viewSlug: view ? view.slug : null });
  };
-
  // Handle click a refresh credit note.
  const handleRefreshBtnClick = () => {
    refresh();
  };
-
  // Handle table row size change.
  const handleTableRowSizeChange = (size) => {
    addSetting('vendorCredit', 'tableSize', size);
  };
-
  // Handle import button click.
  const handleImportBtnClick = () => {
    history.push('/vendor-credits/import');
  };
-
  // Handle the export button click.
  const handleExportBtnClick = () => {
    openDialog(DialogsName.Export, { resource: 'vendor_credit' });
  };
+  // Handle the print button click.
+  const handlePrintBtnClick = () => {
+    downloadExportPdf({ resource: 'VendorCredit' });
+  };

  return (
    <DashboardActionsBar>
@@ -127,6 +130,7 @@ function VendorsCreditNoteActionsBar({
          className={Classes.MINIMAL}
          icon={<Icon icon={'print-16'} iconSize={'16'} />}
          text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
        />
        <Button
          className={Classes.MINIMAL}
--- a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.tsx
+++ b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.tsx
@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import {
  Button,
  Classes,
@@ -22,19 +21,20 @@ import {
  DashboardRowsHeightButton,
  DashboardActionsBar,
 } from '@/components';
+import { PaymentMadeAction, AbilitySubject } from '@/constants/abilityOption';

 import withPaymentMade from './withPaymentMade';
 import withPaymentMadeActions from './withPaymentMadeActions';
 import withSettings from '@/containers/Settings/withSettings';
 import withSettingsActions from '@/containers/Settings/withSettingsActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';

 import { usePaymentMadesListContext } from './PaymentMadesListProvider';
 import { useRefreshPaymentMades } from '@/hooks/query/paymentMades';
-import { PaymentMadeAction, AbilitySubject } from '@/constants/abilityOption';
+import { useDownloadExportPdf } from '@/hooks/query/FinancialReports/use-export-pdf';

-import { compose } from '@/utils';
-import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { DialogsName } from '@/constants/dialogs';
+import { compose } from '@/utils';

 /**
 * Payment made actions bar.
@@ -57,6 +57,9 @@ function PaymentMadeActionsBar({
 }) {
  const history = useHistory();

+  // Exports pdf document.
+  const { downloadAsync: downloadExportPdf } = useDownloadExportPdf();
+
  // Payment receives list context.
  const { paymentMadesViews, fields } = usePaymentMadesListContext();

@@ -67,31 +70,30 @@ function PaymentMadeActionsBar({
  const handleClickNewPaymentMade = () => {
    history.push('/payment-mades/new');
  };
-
  // Handle tab changing.
  const handleTabChange = (viewSlug) => {
    setPaymentMadesTableState({ viewSlug });
  };
-
  // Handle click a refresh payment receives.
  const handleRefreshBtnClick = () => {
    refresh();
  };
-
  // Handle table row size change.
  const handleTableRowSizeChange = (size) => {
    addSetting('billPayments', 'tableSize', size);
  };
-
  // Handle the import button click.
  const handleImportBtnClick = () => {
    history.push('/payment-mades/import');
  };
-
  // Handle the export button click.
  const handleExportBtnClick = () => {
    openDialog(DialogsName.Export, { resource: 'bill_payment' });
  };
+  // Handle the print button click.
+  const handlePrintBtnClick = () => {
+    downloadExportPdf({ resource: 'BillPayment' });
+  };

  return (
    <DashboardActionsBar>
@@ -138,6 +140,7 @@ function PaymentMadeActionsBar({
          className={Classes.MINIMAL}
          icon={<Icon icon={'print-16'} iconSize={'16'} />}
          text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
        />
        <Button
          className={Classes.MINIMAL}
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesActionsBar.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesActionsBar.tsx
@@ -20,6 +20,8 @@ import {
 } from '@/components';

 import { useCreditNoteListContext } from './CreditNotesListProvider';
+import { useDownloadExportPdf } from '@/hooks/query/FinancialReports/use-export-pdf';
+
 import { CreditNoteAction, AbilitySubject } from '@/constants/abilityOption';
 import withCreditNotes from './withCreditNotes';
 import withCreditNotesActions from './withCreditNotesActions';
@@ -27,8 +29,8 @@ import withSettings from '@/containers/Settings/withSettings';
 import withSettingsActions from '@/containers/Settings/withSettingsActions';
 import withDialogActions from '@/containers/Dialog/withDialogActions';

-import { compose } from '@/utils';
 import { DialogsName } from '@/constants/dialogs';
+import { compose } from '@/utils';

 /**
 * Credit note table actions bar.
@@ -54,6 +56,9 @@ function CreditNotesActionsBar({
  // credit note list context.
  const { CreditNotesView, fields, refresh } = useCreditNoteListContext();

+  // Exports pdf document.
+  const { downloadAsync: downloadExportPdf } = useDownloadExportPdf();
+
  // Handle view tab change.
  const handleTabChange = (view) => {
    setCreditNotesTableState({ viewSlug: view ? view.slug : null });
@@ -68,21 +73,22 @@ function CreditNotesActionsBar({
  const handleRefreshBtnClick = () => {
    refresh();
  };
-
  // Handle table row size change.
  const handleTableRowSizeChange = (size) => {
    addSetting('creditNote', 'tableSize', size);
  };
-
  // Handle import button click.
  const handleImportBtnClick = () => {
    history.push('/credit-notes/import');
  };
-
  // Handle the export button click.
  const handleExportBtnClick = () => {
    openDialog(DialogsName.Export, { resource: 'credit_note' });
  };
+  // Handle print button click.
+  const handlePrintBtnClick = () => {
+    downloadExportPdf({ resource: 'CreditNote' });
+  };

  return (
    <DashboardActionsBar>
@@ -121,6 +127,7 @@ function CreditNotesActionsBar({
          className={Classes.MINIMAL}
          icon={<Icon icon={'print-16'} iconSize={'16'} />}
          text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
        />
        <Button
          className={Classes.MINIMAL}
--- a/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.tsx
@@ -26,12 +26,14 @@ import withEstimates from './withEstimates';
 import withEstimatesActions from './withEstimatesActions';
 import withSettings from '@/containers/Settings/withSettings';
 import withSettingsActions from '@/containers/Settings/withSettingsActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';

 import { useEstimatesListContext } from './EstimatesListProvider';
 import { useRefreshEstimates } from '@/hooks/query/estimates';
+import { useDownloadExportPdf } from '@/hooks/query/FinancialReports/use-export-pdf';
+
 import { SaleEstimateAction, AbilitySubject } from '@/constants/abilityOption';
 import { compose } from '@/utils';
-import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { DialogsName } from '@/constants/dialogs';

 /**
@@ -58,6 +60,9 @@ function EstimateActionsBar({
  // Estimates list context.
  const { estimatesViews, fields } = useEstimatesListContext();

+  // Exports pdf document.
+  const { downloadAsync: downloadExportPdf } = useDownloadExportPdf();
+
  // Handle click a new sale estimate.
  const onClickNewEstimate = () => {
    history.push('/estimates/new');
@@ -71,17 +76,14 @@ function EstimateActionsBar({
      viewSlug: view ? view.slug : null,
    });
  };
-
  // Handle click a refresh sale estimates
  const handleRefreshBtnClick = () => {
    refresh();
  };
-
  // Handle table row size change.
  const handleTableRowSizeChange = (size) => {
    addSetting('salesEstimates', 'tableSize', size);
  };
-
  // Handle the import button click.
  const handleImportBtnClick = () => {
    history.push('/estimates/import');
@@ -90,6 +92,10 @@ function EstimateActionsBar({
  const handleExportBtnClick = () => {
    openDialog(DialogsName.Export, { resource: 'sale_estimate' });
  };
+  // Handles the print button click.
+  const handlePrintBtnClick = () => {
+    downloadExportPdf({ resource: 'SaleEstimate' });
+  };

  return (
    <DashboardActionsBar>
@@ -138,8 +144,8 @@ function EstimateActionsBar({
          className={Classes.MINIMAL}
          icon={<Icon icon={'print-16'} iconSize={'16'} />}
          text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
        />
-
        <Button
          className={Classes.MINIMAL}
          icon={<Icon icon={'file-import-16'} />}
@@ -180,5 +186,5 @@ export default compose(
  withSettings(({ estimatesSettings }) => ({
    estimatesTableSize: estimatesSettings?.tableSize,
  })),
-  withDialogActions
+  withDialogActions,
 )(EstimateActionsBar);
--- a/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.tsx
@@ -23,6 +23,7 @@ import { SaleInvoiceAction, AbilitySubject } from '@/constants/abilityOption';

 import { useRefreshInvoices } from '@/hooks/query/invoices';
 import { useInvoicesListContext } from './InvoicesListProvider';
+import { useDownloadExportPdf } from '@/hooks/query/FinancialReports/use-export-pdf';

 import withInvoices from './withInvoices';
 import withInvoiceActions from './withInvoiceActions';
@@ -49,13 +50,16 @@ function InvoiceActionsBar({
  addSetting,

  // #withDialogsActions
-  openDialog
+  openDialog,
 }) {
  const history = useHistory();

  // Sale invoices list context.
  const { invoicesViews, invoicesFields } = useInvoicesListContext();

+  // Exports pdf document.
+  const { downloadAsync: downloadExportPdf } = useDownloadExportPdf();
+
  // Handle new invoice button click.
  const handleClickNewInvoice = () => {
    history.push('/invoices/new');
@@ -88,6 +92,10 @@ function InvoiceActionsBar({
  const handleExportBtnClick = () => {
    openDialog(DialogsName.Export, { resource: 'sale_invoice' });
  };
+  // Handles the print button click.
+  const handlePrintBtnClick = () => {
+    downloadExportPdf({ resource: 'SaleInvoice' });
+  };

  return (
    <DashboardActionsBar>
@@ -134,6 +142,7 @@ function InvoiceActionsBar({
          className={Classes.MINIMAL}
          icon={<Icon icon={'print-16'} iconSize={'16'} />}
          text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
        />
        <Button
          className={Classes.MINIMAL}
--- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveActionsBar.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveActionsBar.tsx
@@ -31,8 +31,11 @@ import {
  PaymentReceiveAction,
  AbilitySubject,
 } from '@/constants/abilityOption';
+
 import { usePaymentReceivesListContext } from './PaymentReceiptsListProvider';
 import { useRefreshPaymentReceive } from '@/hooks/query/paymentReceives';
+import { useDownloadExportPdf } from '@/hooks/query/FinancialReports/use-export-pdf';
+
 import { compose } from '@/utils';
 import { DialogsName } from '@/constants/dialogs';

@@ -61,6 +64,9 @@ function PaymentReceiveActionsBar({
  // Payment receives list context.
  const { paymentReceivesViews, fields } = usePaymentReceivesListContext();

+  // Exports pdf document.
+  const { downloadAsync: downloadExportPdf } = useDownloadExportPdf();
+
  // Handle new payment button click.
  const handleClickNewPaymentReceive = () => {
    history.push('/payment-receives/new');
@@ -91,6 +97,10 @@ function PaymentReceiveActionsBar({
  const handleExportBtnClick = () => {
    openDialog(DialogsName.Export, { resource: 'payment_receive' });
  };
+  // Handles the print button click.
+  const handlePrintBtnClick = () => {
+    downloadExportPdf({ resource: 'PaymentReceive' });
+  };

  return (
    <DashboardActionsBar>
@@ -137,6 +147,7 @@ function PaymentReceiveActionsBar({
          className={Classes.MINIMAL}
          icon={<Icon icon={'print-16'} iconSize={'16'} />}
          text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
        />
        <Button
          className={Classes.MINIMAL}
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.tsx
@@ -29,14 +29,15 @@ import withReceipts from './withReceipts';
 import withReceiptsActions from './withReceiptsActions';
 import withSettings from '@/containers/Settings/withSettings';
 import withSettingsActions from '@/containers/Settings/withSettingsActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';

 import { useReceiptsListContext } from './ReceiptsListProvider';
 import { useRefreshReceipts } from '@/hooks/query/receipts';
+import { useDownloadExportPdf } from '@/hooks/query/FinancialReports/use-export-pdf';
 import { SaleReceiptAction, AbilitySubject } from '@/constants/abilityOption';

-import { compose } from '@/utils';
-import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { DialogsName } from '@/constants/dialogs';
+import { compose } from '@/utils';

 /**
 * Receipts actions bar.
@@ -62,6 +63,9 @@ function ReceiptActionsBar({
  // Sale receipts list context.
  const { receiptsViews, fields } = useReceiptsListContext();

+  // Exports pdf document.
+  const { downloadAsync: downloadExportPdf } = useDownloadExportPdf();
+
  // Handle new receipt button click.
  const onClickNewReceipt = () => {
    history.push('/receipts/new');
@@ -95,6 +99,10 @@ function ReceiptActionsBar({
  const handleExportBtnClick = () => {
    openDialog(DialogsName.Export, { resource: 'sale_receipt' });
  };
+  // Handle print button click.
+  const handlePrintButtonClick = () => {
+    downloadExportPdf({ resource: 'SaleReceipt' });
+  };

  return (
    <DashboardActionsBar>
@@ -143,8 +151,8 @@ function ReceiptActionsBar({
          className={Classes.MINIMAL}
          icon={<Icon icon={'print-16'} iconSize={'16'} />}
          text={<T id={'print'} />}
+          onClick={handlePrintButtonClick}
        />
-
        <Button
          className={Classes.MINIMAL}
          icon={<Icon icon={'file-import-16'} />}
--- a/packages/webapp/src/containers/Vendors/VendorsLanding/VendorActionsBar.tsx
+++ b/packages/webapp/src/containers/Vendors/VendorsLanding/VendorActionsBar.tsx
@@ -22,10 +22,12 @@ import {
  AdvancedFilterPopover,
 } from '@/components';

-import { useRefreshVendors } from '@/hooks/query/vendors';
 import { VendorAction, AbilitySubject } from '@/constants/abilityOption';
+
+import { useRefreshVendors } from '@/hooks/query/vendors';
 import { useVendorsListContext } from './VendorsListProvider';
 import { useHistory } from 'react-router-dom';
+import { useDownloadExportPdf } from '@/hooks/query/FinancialReports/use-export-pdf';

 import withVendors from './withVendors';
 import withVendorsActions from './withVendorsActions';
@@ -61,11 +63,13 @@ function VendorActionsBar({
  // Vendors list context.
  const { vendorsViews, fields } = useVendorsListContext();

+  // Exports pdf document.
+  const { downloadAsync: downloadExportPdf } = useDownloadExportPdf();
+
  // Handles new vendor button click.
  const onClickNewVendor = () => {
    history.push('/vendors/new');
  };
-
  // Vendors refresh action.
  const { refresh } = useRefreshVendors();

@@ -73,31 +77,30 @@ function VendorActionsBar({
  const handleTabChange = (viewSlug) => {
    setVendorsTableState({ viewSlug });
  };
-
  // Handle inactive switch changing.
  const handleInactiveSwitchChange = (event) => {
    const checked = event.target.checked;
    setVendorsTableState({ inactiveMode: checked });
  };
-
  // Handle click a refresh sale estimates
  const handleRefreshBtnClick = () => {
    refresh();
  };
-
  const handleTableRowSizeChange = (size) => {
    addSetting('vendors', 'tableSize', size);
  };
-
  // Handle import button success.
  const handleImportBtnSuccess = () => {
    history.push('/vendors/import');
  };
-
  // Handle the export button click.
  const handleExportBtnClick = () => {
    openDialog(DialogsName.Export, { resource: 'vendor' });
  };
+  // Handle the print button click.
+  const handlePrintBtnClick = () => {
+    downloadExportPdf({ resource: 'Vendor' });
+  };

  return (
    <DashboardActionsBar>
@@ -140,6 +143,13 @@ function VendorActionsBar({
            intent={Intent.DANGER}
          />
        </If>
+        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="print-16" iconSize={16} />}
+          text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
+        />
        <Button
          className={Classes.MINIMAL}
          icon={<Icon icon="file-import-16" iconSize={16} />}
--- a/packages/webapp/src/hooks/query/FinancialReports/use-export-pdf.ts
+++ b/packages/webapp/src/hooks/query/FinancialReports/use-export-pdf.ts
@@ -0,0 +1,62 @@
+// @ts-nocheck
+import { downloadFile } from '@/hooks/useDownloadFile';
+import useApiRequest from '@/hooks/useRequest';
+import { AxiosError } from 'axios';
+import { useMutation } from 'react-query';
+import { asyncToastProgress } from '@/utils/async-toast-progress';
+
+interface ResourceExportValues {
+  resource: string;
+}
+/**
+ * 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 useResourceExportPdf = (props) => {
+  const apiRequest = useApiRequest();
+
+  return useMutation<void, AxiosError, any>((data: ResourceExportValues) => {
+    return apiRequest.get(
+      '/export',
+      {
+        responseType: 'blob',
+        headers: {
+          accept: 'application/pdf',
+        },
+        params: {
+          resource: data.resource,
+          format: data.format,
+        },
+      },
+      props,
+    );
+  });
+};
+
+export const useDownloadExportPdf = () => {
+  const { startProgress, stopProgress } = asyncToastProgress();
+
+  const resourceExportPdfMutation = useResourceExportPdf({
+    onMutate: () => {},
+  });
+  const { mutateAsync, isLoading: isExportPdfLoading } =
+    resourceExportPdfMutation;
+
+  const downloadAsync = (values) => {
+    if (!isExportPdfLoading) {
+      startProgress();
+      return mutateAsync(values).then((res) => {
+        downloadFile(res.data, `${values.resource}.pdf`);
+        stopProgress();
+
+        return res;
+      });
+    }
+  };
+  return {
+    ...resourceExportPdfMutation,
+    downloadAsync,
+  };
+};
--- a/packages/webapp/src/hooks/query/import.ts
+++ b/packages/webapp/src/hooks/query/import.ts
@@ -134,7 +134,6 @@ const invalidateResourcesOnImport = (
  queryClient: QueryClient,
  resource: string,
 ) => {
-  debugger;
  switch (resource) {
    case 'Item':
      queryClient.invalidateQueries(T.ITEMS);
--- a/packages/webapp/src/style/pages/Dashboard/Dashboard.scss
+++ b/packages/webapp/src/style/pages/Dashboard/Dashboard.scss
@@ -190,7 +190,10 @@ $dashboard-views-bar-height: 44px;
          background: #a7b6c21f;
          color: #32304a;
        }
-
+        &.bp4-disabled{
+          background: transparent;
+          color: rgba(50, 48, 74, 0.4);
+        }
        &.has-active-filters {

          &,
--- a/packages/webapp/src/utils/async-toast-progress.tsx
+++ b/packages/webapp/src/utils/async-toast-progress.tsx
@@ -0,0 +1,76 @@
+import { isUndefined } from 'lodash';
+import clsx from 'classnames';
+import {
+  Classes,
+  Intent,
+  ProgressBar,
+  Text,
+  ToastProps,
+} from '@blueprintjs/core';
+import { AppToaster } from '@/components';
+
+interface AsyncToastProgress {
+  renderProgressProps?: (amount: number) => ToastProps;
+}
+
+export function asyncToastProgress({
+  renderProgressProps,
+}: AsyncToastProgress = {}) {
+  let progressToastInterval: number;
+  let progress = 0;
+  let key: string = '';
+
+  const renderProgress = (amount: number): ToastProps => {
+    const customProgressProps = !isUndefined(renderProgressProps)
+      ? renderProgressProps(amount)
+      : {};
+
+    return {
+      icon: 'hand',
+      message: (
+        <>
+          <Text style={{ fontSize: 12, marginBottom: 6 }}>
+            Preparing the document.
+          </Text>
+          <ProgressBar
+            className={clsx({
+              [Classes.PROGRESS_NO_STRIPES]: amount >= 100,
+            })}
+            intent={amount < 100 ? Intent.PRIMARY : Intent.SUCCESS}
+            value={amount / 100}
+          />
+        </>
+      ),
+      onDismiss: (didTimeoutExpire: boolean) => {
+        if (!didTimeoutExpire) {
+          // user dismissed toast with click
+          window.clearInterval(progressToastInterval);
+        }
+      },
+      timeout: amount < 100 ? 0 : 2000,
+      ...customProgressProps,
+    };
+  };
+
+  const startProgress = () => {
+    key = AppToaster.show(renderProgress(0));
+
+    progressToastInterval = window.setInterval(() => {
+      if (progress > 100) {
+        window.clearInterval(progressToastInterval);
+      } else {
+        progress += 10 + Math.random() * 20;
+        progress = Math.min(progress, 95); // Ensure progress never reaches 100
+
+        AppToaster.show(renderProgress(progress), key);
+      }
+    }, 1000);
+  };
+
+  const stopProgress = () => {
+    progress = 100;
+    AppToaster.show(renderProgress(progress), key);
+    window.clearInterval(progressToastInterval);
+  };
+  return { startProgress, stopProgress };
+}