feat: print action when click on print button

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 { useResourceExportPdf } 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,10 @@ function ManualJournalActionsBar({
   // Manual journals context.
   const { journalsViews, fields } = useManualJournalsContext();
 
+  // Exports the given resource into pdf.
+  const { mutateAsync: exportPdf, isLoading: isExportPdfLoading } =
+    useResourceExportPdf();
+
   // Manual journals refresh action.
   const { refresh } = useRefreshJournals();
 
@@ -91,6 +96,11 @@ function ManualJournalActionsBar({
     openDialog(DialogsName.Export, { resource: 'manual_journal' });
   };
 
+  // Handle the pdf print button click.
+  const handlePdfPrintBtnSubmit = () => {
+    exportPdf({ resource: 'ManualJournal' });
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -134,10 +144,13 @@ function ManualJournalActionsBar({
           />
         </If>
 
+        <NavbarDivider />
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon="print-16" iconSize={16} />}
           text={<T id={'print'} />}
+          onClick={handlePdfPrintBtnSubmit}
+          disabled={isExportPdfLoading}
         />
         <Button
           className={Classes.MINIMAL}

packages/webapp/src/containers/Accounts/AccountsActionsBar.tsx

@@ -26,8 +26,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 { useResourceExportPdf } from '@/hooks/query/FinancialReports/use-export-pdf';
 
 import withAccounts from './withAccounts';
 import withAccountsTableActions from './withAccountsTableActions';
@@ -37,7 +39,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 +58,18 @@ function AccountsActionsBar({
   // #withAccountsTableActions
   setAccountsTableState,
 
-  // #ownProps
-  onFilterChanged,
-
   // #withSettings
   accountsTableSize,
 
   // #withSettingsActions
   addSetting,
 }) {
-  const { resourceViews, fields } = useAccountsChartContext();
-
   const history = useHistory();
 
-  const onClickNewAccount = () => {
+  const { resourceViews, fields } = useAccountsChartContext();
-    openDialog(DialogsName.AccountForm, {});
+
-  };
+  const { mutateAsync: exportPdf, isLoading: isExportPdfLoading } =
+    useResourceExportPdf();
 
   // Accounts refresh action.
   const { refresh } = useRefreshAccounts();
@@ -81,35 +78,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 +113,14 @@ function AccountsActionsBar({
   const handleExportBtnClick = () => {
     openDialog(DialogsName.Export, { resource: 'account' });
   };
+  // Handle the print button click.
+  const handlePrintBtnClick = () => {
+    exportPdf({ resource: 'Account' });
+  };
+  // Handle click new account.
+  const onClickNewAccount = () => {
+    openDialog(DialogsName.AccountForm, {});
+  };
 
   return (
     <DashboardActionsBar>
@@ -185,6 +184,8 @@ function AccountsActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon="print-16" iconSize={16} />}
           text={<T id={'print'} />}
+          disabled={isExportPdfLoading}
+          onClick={handlePrintBtnClick}
         />
         <Button
           className={Classes.MINIMAL}

packages/webapp/src/containers/Customers/CustomersLanding/CustomersActionsBar.tsx

@@ -25,6 +25,7 @@ import {
 
 import { useCustomersListContext } from './CustomersListProvider';
 import { useRefreshCustomers } from '@/hooks/query/customers';
+import { useResourceExportPdf } from '@/hooks/query/FinancialReports/use-export-pdf';
 
 import withCustomers from './withCustomers';
 import withCustomersActions from './withCustomersActions';
@@ -70,6 +71,10 @@ function CustomerActionsBar({
   // Customers refresh action.
   const { refresh } = useRefreshCustomers();
 
+  // Exports the given resource into pdf.
+  const { mutateAsync: exportPdf, isLoading: isExportPdfLoading } =
+    useResourceExportPdf();
+
   const onClickNewCustomer = () => {
     history.push('/customers/new');
   };
@@ -109,6 +114,10 @@ function CustomerActionsBar({
   const handleExportBtnClick = () => {
     openDialog(DialogsName.Export, { resource: 'customer' });
   };
+  // Handle the print button click.
+  const handlePrintBtnClick = () => {
+    exportPdf({ resource: 'Customer' });
+  };
 
   return (
     <DashboardActionsBar>
@@ -154,6 +163,14 @@ function CustomerActionsBar({
             onClick={handleBulkDelete}
           />
         </If>
+        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="print-16" iconSize={16} />}
+          text={<T id={'print'} />}
+          disabled={isExportPdfLoading}
+          onClick={handlePrintBtnClick}
+        />
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon="file-import-16" iconSize={16} />}

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 { useResourceExportPdf } 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,10 @@ function ExpensesActionsBar({
   // Expenses list context.
   const { expensesViews, fields } = useExpensesListContext();
 
+  // Exports the given resource into pdf.
+  const { mutateAsync: exportPdf, isLoading: isExportPdfLoading } =
+    useResourceExportPdf();
+
   // Expenses refresh action.
   const { refresh } = useRefreshExpenses();
 
@@ -92,6 +98,10 @@ function ExpensesActionsBar({
   const handleExportBtnClick = () => {
     openDialog(DialogsName.Export, { resource: 'expense' });
   };
+  // Handles the print button click.
+  const handlePrintBtnClick = () => {
+    exportPdf({ resource: 'Expense' });
+  };
 
   return (
     <DashboardActionsBar>
@@ -135,11 +145,13 @@ function ExpensesActionsBar({
             onClick={handleBulkDelete}
           />
         </If>
-
+        <NavbarDivider />
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon="print-16" iconSize={16} />}
           text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
+          disabled={isExportPdfLoading}
         />
         <Button
           className={Classes.MINIMAL}

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 { useResourceExportPdf } from '@/hooks/query/FinancialReports/use-export-pdf';
 
 import withItems from './withItems';
 import withItemsActions from './withItemsActions';
@@ -60,11 +61,15 @@ function ItemsActionsBar({
   addSetting,
 
   // #withDialogActions
-  openDialog
+  openDialog,
 }) {
   // Items list context.
   const { itemsViews, fields } = useItemsListContext();
 
+  //
+  const { mutateAsync: exportPdf, isLoading: isExportPdfLoading } =
+    useResourceExportPdf();
+
   // Items refresh action.
   const { refresh } = useRefreshItems();
 
@@ -107,7 +112,12 @@ function ItemsActionsBar({
   // Handle the export button click.
   const handleExportBtnClick = () => {
     openDialog(DialogsName.Export, { resource: 'item' });
-  }
+  };
+
+  // Handle the print button click.
+  const handlePrintBtnClick = () => {
+    exportPdf({ resource: 'Item' });
+  };
 
   return (
     <DashboardActionsBar>
@@ -153,7 +163,13 @@ function ItemsActionsBar({
             onClick={handleBulkDelete}
           />
         </If>
-
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'print-16'} iconSize={'16'} />}
+          text={<T id={'print'} />}
+          disabled={isExportPdfLoading}
+          onClick={handlePrintBtnClick}
+        />
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon="file-import-16" iconSize={16} />}
@@ -204,5 +220,5 @@ export default compose(
   })),
   withItemsActions,
   withAlertActions,
-  withDialogActions
+  withDialogActions,
 )(ItemsActionsBar);

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 { useResourceExportPdf } 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,14 @@ function BillActionsBar({
   // Bills list context.
   const { billsViews, fields } = useBillsListContext();
 
+  // Exports the given resource into pdf.
+  const { mutateAsync: exportPdf, isLoading: isExportPdfLoading } =
+    useResourceExportPdf();
+
   // Handle click a new bill.
   const handleClickNewBill = () => {
     history.push('/bills/new');
   };
-
   // Handle tab change.
   const handleTabChange = (view) => {
     setBillsTableState({
@@ -77,21 +82,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 = () => {
+    exportPdf({ resource: 'Bill' });
+  };
 
   return (
     <DashboardActionsBar>
@@ -133,13 +139,15 @@ 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'} />}
+          disabled={isExportPdfLoading}
+          onClick={handlePrintBtnClick}
         />
         <Button
           className={Classes.MINIMAL}
@@ -153,7 +161,6 @@ function BillActionsBar({
           text={<T id={'export'} />}
           onClick={handleExportBtnClick}
         />
-
         <NavbarDivider />
         <DashboardRowsHeightButton
           initialValue={billsTableSize}

packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteActionsBar.tsx

@@ -21,6 +21,7 @@ import {
 } from '@/components';
 
 import { useVendorsCreditNoteListContext } from './VendorsCreditNoteListProvider';
+import { useResourceExportPdf } from '@/hooks/query/FinancialReports/use-export-pdf';
 import { VendorCreditAction, AbilitySubject } from '@/constants/abilityOption';
 
 import withVendorsCreditNotesActions from './withVendorsCreditNotesActions';
@@ -60,35 +61,38 @@ function VendorsCreditNoteActionsBar({
   const { VendorCreditsViews, fields, refresh } =
     useVendorsCreditNoteListContext();
 
+  // Exports the given resource into pdf.
+  const { mutateAsync: exportPdf, isLoading: isExportPdfLoading } =
+    useResourceExportPdf();
+
   // 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 = () => {
+    exportPdf({ resource: 'VendorCredit' });
+  };
 
   return (
     <DashboardActionsBar>
@@ -127,6 +131,8 @@ function VendorsCreditNoteActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon={'print-16'} iconSize={'16'} />}
           text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
+          disabled={isExportPdfLoading}
         />
         <Button
           className={Classes.MINIMAL}

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 { useResourceExportPdf } 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,10 @@ function PaymentMadeActionsBar({
 }) {
   const history = useHistory();
 
+  // Exports the given resource into pdf.
+  const { mutateAsync: exportPdf, isLoading: isExportPdfLoading } =
+    useResourceExportPdf();
+
   // Payment receives list context.
   const { paymentMadesViews, fields } = usePaymentMadesListContext();
 
@@ -67,31 +71,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 = () => {
+    exportPdf({ resource: 'PaymentMade' });
+  };
 
   return (
     <DashboardActionsBar>
@@ -138,6 +141,8 @@ function PaymentMadeActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon={'print-16'} iconSize={'16'} />}
           text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
+          disabled={isExportPdfLoading}
         />
         <Button
           className={Classes.MINIMAL}

packages/webapp/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesActionsBar.tsx

@@ -20,6 +20,8 @@ import {
 } from '@/components';
 
 import { useCreditNoteListContext } from './CreditNotesListProvider';
+import { useResourceExportPdf } 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,10 @@ function CreditNotesActionsBar({
   // credit note list context.
   const { CreditNotesView, fields, refresh } = useCreditNoteListContext();
 
+  // Exports the given resource into pdf.
+  const { mutateAsync: exportPdf, isLoading: isExportPdfLoading } =
+    useResourceExportPdf();
+
   // Handle view tab change.
   const handleTabChange = (view) => {
     setCreditNotesTableState({ viewSlug: view ? view.slug : null });
@@ -68,21 +74,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 = () => {
+    exportPdf({ resource: 'CreditNote' });
+  };
 
   return (
     <DashboardActionsBar>
@@ -121,6 +128,7 @@ function CreditNotesActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon={'print-16'} iconSize={'16'} />}
           text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
         />
         <Button
           className={Classes.MINIMAL}
@@ -133,6 +141,7 @@ function CreditNotesActionsBar({
           icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
           text={<T id={'export'} />}
           onClick={handleExportBtnClick}
+          disabled={isExportPdfLoading}
         />
         <NavbarDivider />
         <DashboardRowsHeightButton

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 { useResourceExportPdf } 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,10 @@ function EstimateActionsBar({
   // Estimates list context.
   const { estimatesViews, fields } = useEstimatesListContext();
 
+  // Exports the given resource into pdf.
+  const { mutateAsync: exportPdf, isLoading: isExportPdfLoading } =
+    useResourceExportPdf();
+
   // Handle click a new sale estimate.
   const onClickNewEstimate = () => {
     history.push('/estimates/new');
@@ -71,17 +77,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 +93,10 @@ function EstimateActionsBar({
   const handleExportBtnClick = () => {
     openDialog(DialogsName.Export, { resource: 'sale_estimate' });
   };
+  // Handles the print button click.
+  const handlePrintBtnClick = () => {
+    exportPdf({ resource: 'SaleEstimate' });
+  };
 
   return (
     <DashboardActionsBar>
@@ -138,8 +145,9 @@ function EstimateActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon={'print-16'} iconSize={'16'} />}
           text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
+          disabled={isExportPdfLoading}
         />
-
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon={'file-import-16'} />}
@@ -180,5 +188,5 @@ export default compose(
   withSettings(({ estimatesSettings }) => ({
     estimatesTableSize: estimatesSettings?.tableSize,
   })),
-  withDialogActions
+  withDialogActions,
 )(EstimateActionsBar);

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 { useResourceExportPdf } from '@/hooks/query/FinancialReports/use-export-pdf';
 
 import withInvoices from './withInvoices';
 import withInvoiceActions from './withInvoiceActions';
@@ -49,13 +50,17 @@ function InvoiceActionsBar({
   addSetting,
 
   // #withDialogsActions
-  openDialog
+  openDialog,
 }) {
   const history = useHistory();
 
   // Sale invoices list context.
   const { invoicesViews, invoicesFields } = useInvoicesListContext();
 
+  // Exports the given resource into pdf.
+  const { mutateAsync: exportPdf, isLoading: isExportPdfLoading } =
+    useResourceExportPdf();
+
   // Handle new invoice button click.
   const handleClickNewInvoice = () => {
     history.push('/invoices/new');
@@ -88,6 +93,10 @@ function InvoiceActionsBar({
   const handleExportBtnClick = () => {
     openDialog(DialogsName.Export, { resource: 'sale_invoice' });
   };
+  // Handles the print button click.
+  const handlePrintBtnClick = () => {
+    exportPdf({ resource: 'SaleInvoice' });
+  };
 
   return (
     <DashboardActionsBar>
@@ -134,6 +143,8 @@ function InvoiceActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon={'print-16'} iconSize={'16'} />}
           text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
+          disabled={isExportPdfLoading}
         />
         <Button
           className={Classes.MINIMAL}

packages/webapp/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveActionsBar.tsx

@@ -35,6 +35,7 @@ import { usePaymentReceivesListContext } from './PaymentReceiptsListProvider';
 import { useRefreshPaymentReceive } from '@/hooks/query/paymentReceives';
 import { compose } from '@/utils';
 import { DialogsName } from '@/constants/dialogs';
+import { useResourceExportPdf } from '@/hooks/query/FinancialReports/use-export-pdf';
 
 /**
  * Payment receives actions bar.
@@ -61,6 +62,10 @@ function PaymentReceiveActionsBar({
   // Payment receives list context.
   const { paymentReceivesViews, fields } = usePaymentReceivesListContext();
 
+  // Exports the given resource into pdf.
+  const { mutateAsync: exportPdf, isLoading: isExportPdfLoading } =
+    useResourceExportPdf();
+
   // Handle new payment button click.
   const handleClickNewPaymentReceive = () => {
     history.push('/payment-receives/new');
@@ -91,6 +96,10 @@ function PaymentReceiveActionsBar({
   const handleExportBtnClick = () => {
     openDialog(DialogsName.Export, { resource: 'payment_receive' });
   };
+  // Handles the print button click.
+  const handlePrintBtnClick = () => {
+    exportPdf({ resource: 'PaymentReceive' });
+  };
 
   return (
     <DashboardActionsBar>
@@ -137,6 +146,8 @@ function PaymentReceiveActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon={'print-16'} iconSize={'16'} />}
           text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
+          disabled={isExportPdfLoading}
         />
         <Button
           className={Classes.MINIMAL}

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 { useResourceExportPdf } 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();
 
+  const { mutateAsync: exportPdf, isLoading: isExportPdfLoading } =
+    useResourceExportPdf();
+
   // 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 = () => {
+    exportPdf({ resource: 'SaleReceipt' });
+  };
 
   return (
     <DashboardActionsBar>
@@ -143,8 +151,9 @@ function ReceiptActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon={'print-16'} iconSize={'16'} />}
           text={<T id={'print'} />}
+          onClick={handlePrintButtonClick}
+          disabled={isExportPdfLoading}
         />
-
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon={'file-import-16'} />}

packages/webapp/src/containers/Vendors/VendorsLanding/VendorActionsBar.tsx

@@ -35,6 +35,7 @@ import withDialogActions from '@/containers/Dialog/withDialogActions';
 
 import { compose } from '@/utils';
 import { DialogsName } from '@/constants/dialogs';
+import { useResourceExportPdf } from '@/hooks/query/FinancialReports/use-export-pdf';
 
 /**
  * Vendors actions bar.
@@ -61,11 +62,14 @@ function VendorActionsBar({
   // Vendors list context.
   const { vendorsViews, fields } = useVendorsListContext();
 
+  // Exports the given resource into pdf.
+  const { mutateAsync: exportPdf, isLoading: isExportPdfLoading } =
+    useResourceExportPdf();
+
   // 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 = () => {
+    exportPdf({ resource: 'Vendor' });
+  };
 
   return (
     <DashboardActionsBar>
@@ -140,6 +143,14 @@ function VendorActionsBar({
             intent={Intent.DANGER}
           />
         </If>
+        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="print-16" iconSize={16} />}
+          text={<T id={'print'} />}
+          disabled={isExportPdfLoading}
+          onClick={handlePrintBtnClick}
+        />
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon="file-import-16" iconSize={16} />}

packages/webapp/src/hooks/query/FinancialReports/use-export-pdf.ts

@@ -0,0 +1,36 @@
+// @ts-nocheck
+import { downloadFile } from '@/hooks/useDownloadFile';
+import useApiRequest from '@/hooks/useRequest';
+import { AxiosError } from 'axios';
+import { useMutation } from 'react-query';
+
+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 = () => {
+  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,
+        },
+      })
+      .then((res) => {
+        downloadFile(res.data, `${data.resource}.pdf`);
+        return res;
+      });
+  });
+};

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 {
 
           &,