feat: export dialog on resource table

packages/server/src/services/Accounts/AccountsExportable.ts

@@ -20,6 +20,8 @@ export class AccountsExportable extends Exportable {
       inactiveMode: false,
       ...query,
       structure: IAccountsStructureType.Flat,
+      pageSize: 12000,
+      page: 1,
     } as IAccountsFilter;
 
     return this.accountsApplication

packages/webapp/src/components/DialogsContainer.tsx

@@ -51,6 +51,7 @@ import EstimateMailDialog from '@/containers/Sales/Estimates/EstimateMailDialog/
 import ReceiptMailDialog from '@/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialog';
 import PaymentMailDialog from '@/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialog';
 import { ConnectBankDialog } from '@/containers/CashFlow/ConnectBankDialog';
+import { ExportDialog } from '@/containers/Dialogs/ExportDialog';
 
 /**
  * Dialogs container.
@@ -148,6 +149,8 @@ export default function DialogsContainer() {
       <ReceiptMailDialog dialogName={DialogsName.ReceiptMail} />
       <PaymentMailDialog dialogName={DialogsName.PaymentMail} />
       <ConnectBankDialog dialogName={DialogsName.ConnectBankCreditCard} />
+
+      <ExportDialog dialogName={DialogsName.Export} />
     </div>
   );
 }

packages/webapp/src/constants/dialogs.ts

@@ -73,5 +73,6 @@ export enum DialogsName {
   CustomerTransactionsPdfPreview = 'CustomerTransactionsPdfPreview',
   VendorTransactionsPdfPreview = 'VendorTransactionsPdfPreview',
   GeneralLedgerPdfPreview = 'GeneralLedgerPdfPreview',
-  SalesTaxLiabilitySummaryPdfPreview = 'SalesTaxLiabilitySummaryPdfPreview'
+  SalesTaxLiabilitySummaryPdfPreview = 'SalesTaxLiabilitySummaryPdfPreview',
+  Export = 'Export',
 }

packages/webapp/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.tsx

@@ -18,7 +18,7 @@ import {
   Can,
   If,
   DashboardActionViewsList,
-  DashboardActionsBar
+  DashboardActionsBar,
 } from '@/components';
 import { useRefreshJournals } from '@/hooks/query/manualJournals';
 import { useManualJournalsContext } from './ManualJournalsListProvider';
@@ -31,6 +31,7 @@ import withSettingsActions from '@/containers/Settings/withSettingsActions';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 
 import { compose } from '@/utils';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * Manual journal actions bar.
@@ -47,6 +48,9 @@ function ManualJournalActionsBar({
 
   // #withSettingsActions
   addSetting,
+
+  // #withDialogActions
+  openDialog
 }) {
   // History context.
   const history = useHistory();
@@ -75,13 +79,18 @@ function ManualJournalActionsBar({
   // Handle import button click.
   const handleImportBtnClick = () => {
     history.push('/manual-journals/import');
-  }
+  };
 
   // Handle table row size change.
   const handleTableRowSizeChange = (size) => {
     addSetting('manualJournals', 'tableSize', size);
   };
 
+  // Handle the export button click.
+  const handleExportBtnClick = () => {
+    openDialog(DialogsName.Export, { resource: 'manual_journal' });
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -140,6 +149,7 @@ function ManualJournalActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon="file-export-16" iconSize={16} />}
           text={<T id={'export'} />}
+          onClick={handleExportBtnClick}
         />
         <NavbarDivider />
         <DashboardRowsHeightButton

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

@@ -118,6 +118,10 @@ function AccountsActionsBar({
   const handleImportBtnClick = () => {
     history.push('/accounts/import');
   };
+  // Handle the export button click.
+  const handleExportBtnClick = () => {
+    openDialog(DialogsName.Export, { resource: 'account' });
+  }
 
   return (
     <DashboardActionsBar>
@@ -186,6 +190,7 @@ function AccountsActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon="file-export-16" iconSize={16} />}
           text={<T id={'export'} />}
+          onClick={handleExportBtnClick}
         />
         <Button
           className={Classes.MINIMAL}

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

@@ -31,9 +31,11 @@ import withCustomersActions from './withCustomersActions';
 import withAlertActions from '@/containers/Alert/withAlertActions';
 import withSettingsActions from '@/containers/Settings/withSettingsActions';
 import withSettings from '@/containers/Settings/withSettings';
-import { CustomerAction, AbilitySubject } from '@/constants/abilityOption';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
 
+import { CustomerAction, AbilitySubject } from '@/constants/abilityOption';
 import { compose } from '@/utils';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * Customers actions bar.
@@ -55,6 +57,9 @@ function CustomerActionsBar({
 
   // #withSettingsActions
   addSetting,
+
+  // #withDialogActions
+  openDialog,
 }) {
   // History context.
   const history = useHistory();
@@ -100,6 +105,11 @@ function CustomerActionsBar({
     history.push('/customers/import');
   };
 
+  // Handle the export button click.
+  const handleExportBtnClick = () => {
+    openDialog(DialogsName.Export, { resource: 'customer' });
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -154,6 +164,7 @@ function CustomerActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon="file-export-16" iconSize={16} />}
           text={<T id={'export'} />}
+          onClick={handleExportBtnClick}
         />
         <NavbarDivider />
         <DashboardRowsHeightButton
@@ -192,4 +203,5 @@ export default compose(
     customersTableSize: customersSettings?.tableSize,
   })),
   withAlertActions,
+  withDialogActions,
 )(CustomerActionsBar);

packages/webapp/src/containers/Dialogs/ExportDialog/ExportDialogContent.tsx

@@ -0,0 +1,17 @@
+// @ts-nocheck
+
+import { ExportDialogForm } from './ExportDialogForm';
+import { ExportFormInitialValues } from './type';
+
+interface ExportDialogContentProps {
+  initialValues?: ExportFormInitialValues;
+}
+
+/**
+ * Account dialog content.
+ */
+export default function ExportDialogContent({
+  initialValues,
+}: ExportDialogContentProps) {
+  return <ExportDialogForm initialValues={initialValues} />;
+}

packages/webapp/src/containers/Dialogs/ExportDialog/ExportDialogForm.schema.ts

@@ -0,0 +1,9 @@
+// @ts-nocheck
+import * as Yup from 'yup';
+
+const Schema = Yup.object().shape({
+  resource: Yup.string().required().label('Resource'),
+  format: Yup.string().required().label('Format'),
+});
+
+export const ExportDialogFormSchema = Schema;

packages/webapp/src/containers/Dialogs/ExportDialog/ExportDialogForm.tsx

@@ -0,0 +1,70 @@
+// @ts-nocheck
+import { Formik } from 'formik';
+
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { compose, transformToForm } from '@/utils';
+
+import { ExportDialogFormSchema } from './ExportDialogForm.schema';
+import { ExportDialogFormContent } from './ExportDialogFormContent';
+import { useResourceExport } from '@/hooks/query/FinancialReports/use-export';
+import { ExportFormInitialValues } from './type';
+
+// Default initial form values.
+const defaultInitialValues = {
+  resource: '',
+  format: 'csv',
+};
+
+interface ExportDialogFormProps {
+  initialValues?: ExportFormInitialValues;
+}
+
+/**
+ * Account form dialog content.
+ */
+function ExportDialogFormRoot({
+  // #ownProps
+  initialValues,
+
+  // #withDialogActions
+  closeDialog,
+}: ExportDialogFormProps) {
+  const { mutateAsync: mutateExport } = useResourceExport();
+
+  // Callbacks handles form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    setSubmitting(true);
+    const { resource, format } = values;
+
+    mutateExport({ resource, format })
+      .then(() => {
+        setSubmitting(false);
+      })
+      .catch(() => {
+        setSubmitting(false);
+      });
+  };
+
+  // Form initial values in create and edit mode.
+  const initialFormValues = {
+    ...defaultInitialValues,
+    /**
+     * We only care about the fields in the form. Previously unfilled optional
+     * values such as `notes` come back from the API as null, so remove those
+     * as well.
+     */
+    ...transformToForm(initialValues, defaultInitialValues),
+  };
+  return (
+    <Formik
+      validationSchema={ExportDialogFormSchema}
+      initialValues={initialFormValues}
+      onSubmit={handleFormSubmit}
+    >
+      <ExportDialogFormContent />
+    </Formik>
+  );
+}
+
+export const ExportDialogForm =
+  compose(withDialogActions)(ExportDialogFormRoot);

packages/webapp/src/containers/Dialogs/ExportDialog/ExportDialogFormContent.tsx

@@ -0,0 +1,29 @@
+import { FFormGroup, FRadioGroup, FSelect } from '@/components';
+import { Button, Callout, Intent, Radio } from '@blueprintjs/core';
+import { Form } from 'formik';
+import { ExportResources } from './constants';
+
+export function ExportDialogFormContent() {
+  return (
+    <Form>
+      <Callout>
+        You can export data from Bigcapital in CSV or XLSX format
+      </Callout>
+
+      <FFormGroup name={'resource'} label={'Select Resource'}>
+        <FSelect name={'resource'} items={ExportResources} />
+      </FFormGroup>
+
+      <FRadioGroup label={'Export As'} name={'format'}>
+        <Radio value={'xlsx'}>XLSX (Microsoft Excel)</Radio>
+        <Radio value={'csv'}>CSV (Comma Seperated Value)</Radio>
+      </FRadioGroup>
+
+      <div>
+        <Button type={'submit'} intent={Intent.PRIMARY}>
+          Export
+        </Button>
+      </div>
+    </Form>
+  );
+}

packages/webapp/src/containers/Dialogs/ExportDialog/constants.ts

@@ -0,0 +1,17 @@
+export const ExportResources = [
+  { value: 'account', text: 'Accounts' },
+  { value: 'item', text: 'Items' },
+  { value: 'item_category', text: 'Item Categories' },
+  { value: 'customer', text: 'Customers' },
+  { value: 'vendor', text: 'Vendors' },
+  { value: 'manual_journal', text: 'Manual Journal' },
+  { value: 'expense', text: 'Expenses' },
+  { value: 'sale_invoice', text: 'Invoices' },
+  { value: 'sale_estimate', text: ' Estimates' },
+  { value: 'sale_receipt', text: 'Receipts' },
+  { value: 'payment_receive', text: 'Payments Received' },
+  { value: 'credit_note', text: 'Credit Notes' },
+  { value: 'bill', text: 'Bills' },
+  { value: 'bill_payment', text: 'Bill Payments' },
+  { value: 'vendor_credit', text: 'Vendor Credits' },
+];

packages/webapp/src/containers/Dialogs/ExportDialog/index.tsx

@@ -0,0 +1,31 @@
+// @ts-nocheck
+import React, { lazy } from 'react';
+import { Dialog, DialogSuspense, FormattedMessage as T } from '@/components';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import { compose } from '@/utils';
+
+const ExportDialogContent = lazy(() => import('./ExportDialogContent'));
+
+// User form dialog.
+function ExportDialogRoot({ dialogName, payload, isOpen }) {
+  const { resource = null, format = null } = payload;
+
+  return (
+    <Dialog
+      name={dialogName}
+      title={'Export Data'}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+    >
+      <DialogSuspense>
+        <ExportDialogContent
+          dialogName={dialogName}
+          initialValues={{ resource, format }}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export const ExportDialog = compose(withDialogRedux())(ExportDialogRoot);

packages/webapp/src/containers/Dialogs/ExportDialog/type.ts

@@ -0,0 +1,6 @@
+
+
+export interface ExportFormInitialValues {
+  resource?: string;
+  format?: string;
+}

packages/webapp/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.tsx

@@ -33,6 +33,7 @@ import withDialogActions from '@/containers/Dialog/withDialogActions';
 import withSettings from '@/containers/Settings/withSettings';
 
 import { compose } from '@/utils';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * Expenses actions bar.
@@ -49,6 +50,9 @@ function ExpensesActionsBar({
 
   // #withSettingsActions
   addSetting,
+
+  // #withDialogActions
+  openDialog,
 }) {
   // History context.
   const history = useHistory();
@@ -63,7 +67,6 @@ function ExpensesActionsBar({
   const onClickNewExpense = () => {
     history.push('/expenses/new');
   };
-
   // Handle delete button click.
   const handleBulkDelete = () => {};
 
@@ -73,21 +76,23 @@ function ExpensesActionsBar({
       viewSlug: view ? view.slug : null,
     });
   };
-
   // Handle click a refresh
   const handleRefreshBtnClick = () => {
     refresh();
   };
-
   // Handle the import button click.
   const handleImportBtnClick = () => {
     history.push('/expenses/import');
-  }
+  };
-
   // Handle table row size change.
   const handleTableRowSizeChange = (size) => {
     addSetting('expenses', 'tableSize', size);
   };
+  // Handle the export button click.
+  const handleExportBtnClick = () => {
+    openDialog(DialogsName.Export, { resource: 'expense' });
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -146,6 +151,7 @@ function ExpensesActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon="file-export-16" iconSize={16} />}
           text={<T id={'export'} />}
+          onClick={handleExportBtnClick}
         />
         <NavbarDivider />
         <DashboardRowsHeightButton

packages/webapp/src/containers/Items/ItemsActionsBar.tsx

@@ -33,7 +33,9 @@ import withItemsActions from './withItemsActions';
 import withAlertActions from '@/containers/Alert/withAlertActions';
 import withSettings from '@/containers/Settings/withSettings';
 import withSettingsActions from '@/containers/Settings/withSettingsActions';
+import withDialogActions from '../Dialog/withDialogActions';
 
+import { DialogsName } from '@/constants/dialogs';
 import { compose } from '@/utils';
 
 /**
@@ -56,6 +58,9 @@ function ItemsActionsBar({
 
   // #withSettingsActions
   addSetting,
+
+  // #withDialogActions
+  openDialog
 }) {
   // Items list context.
   const { itemsViews, fields } = useItemsListContext();
@@ -99,6 +104,11 @@ function ItemsActionsBar({
     history.push('/items/import');
   };
 
+  // Handle the export button click.
+  const handleExportBtnClick = () => {
+    openDialog(DialogsName.Export, { resource: 'item' });
+  }
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -154,6 +164,7 @@ function ItemsActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon="file-export-16" iconSize={16} />}
           text={<T id={'export'} />}
+          onClick={handleExportBtnClick}
         />
         <NavbarDivider />
         <DashboardRowsHeightButton
@@ -193,4 +204,5 @@ export default compose(
   })),
   withItemsActions,
   withAlertActions,
+  withDialogActions
 )(ItemsActionsBar);

packages/webapp/src/containers/ItemsCategories/ItemsCategoryActionsBar.tsx

@@ -23,6 +23,7 @@ import withAlertActions from '@/containers/Alert/withAlertActions';
 import { compose } from '@/utils';
 import { useItemsCategoriesContext } from './ItemsCategoriesProvider';
 import { useHistory } from 'react-router-dom';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * Items categories actions bar.
@@ -58,6 +59,10 @@ function ItemsCategoryActionsBar({
       itemCategoriesIds: itemCategoriesSelectedRows,
     });
   };
+  // Handle the export button click.
+  const handleExportBtnClick = () => {
+    openDialog(DialogsName.Export, { resource: 'item_category' });
+  };
 
   return (
     <DashboardActionsBar>
@@ -105,6 +110,7 @@ function ItemsCategoryActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon="file-export-16" iconSize={16} />}
           text={<T id={'export'} />}
+          onClick={handleExportBtnClick}
         />
       </NavbarGroup>
     </DashboardActionsBar>

packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.tsx

@@ -32,6 +32,8 @@ import withSettingsActions from '@/containers/Settings/withSettingsActions';
 import { useBillsListContext } from './BillsListProvider';
 import { useRefreshBills } from '@/hooks/query/bills';
 import { compose } from '@/utils';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * Bills actions bar.
@@ -48,6 +50,9 @@ function BillActionsBar({
 
   // #withSettingsActions
   addSetting,
+
+  // #withDialogActions
+  openDialog,
 }) {
   const history = useHistory();
 
@@ -81,7 +86,12 @@ function BillActionsBar({
   // Handle the import button click.
   const handleImportBtnClick = () => {
     history.push('/bills/import');
-  }
+  };
+
+  // Handle the export button click.
+  const handleExportBtnClick = () => {
+    openDialog(DialogsName.Export, { resource: 'bill' });
+  };
 
   return (
     <DashboardActionsBar>
@@ -141,6 +151,7 @@ function BillActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
           text={<T id={'export'} />}
+          onClick={handleExportBtnClick}
         />
 
         <NavbarDivider />
@@ -170,4 +181,5 @@ export default compose(
   withSettings(({ billsettings }) => ({
     billsTableSize: billsettings?.tableSize,
   })),
+  withDialogActions,
 )(BillActionsBar);

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

@@ -22,14 +22,16 @@ import {
 
 import { useVendorsCreditNoteListContext } from './VendorsCreditNoteListProvider';
 import { VendorCreditAction, AbilitySubject } from '@/constants/abilityOption';
+
+import withVendorsCreditNotesActions from './withVendorsCreditNotesActions';
 import withSettings from '@/containers/Settings/withSettings';
 import withSettingsActions from '@/containers/Settings/withSettingsActions';
 import withVendorsCreditNotes from './withVendorsCreditNotes';
-import withVendorsCreditNotesActions from './withVendorsCreditNotesActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
-
 import withVendorActions from './withVendorActions';
 
 import { compose } from '@/utils';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * Vendors Credit note  table actions bar.
@@ -48,6 +50,9 @@ function VendorsCreditNoteActionsBar({
 
   // #withSettingsActions
   addSetting,
+
+  // #withDialogActions
+  openDialog,
 }) {
   const history = useHistory();
 
@@ -77,8 +82,13 @@ function VendorsCreditNoteActionsBar({
 
   // Handle import button click.
   const handleImportBtnClick = () => {
-    history.push('/vendor-credits/import')
+    history.push('/vendor-credits/import');
-  }
+  };
+
+  // Handle the export button click.
+  const handleExportBtnClick = () => {
+    openDialog(DialogsName.Export, { resource: 'vendor_credit' });
+  };
 
   return (
     <DashboardActionsBar>
@@ -128,6 +138,7 @@ function VendorsCreditNoteActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
           text={<T id={'export'} />}
+          onClick={handleExportBtnClick}
         />
         <NavbarDivider />
         <DashboardRowsHeightButton
@@ -157,4 +168,5 @@ export default compose(
   withSettings(({ vendorsCreditNoteSetting }) => ({
     creditNoteTableSize: vendorsCreditNoteSetting?.tableSize,
   })),
+  withDialogActions,
 )(VendorsCreditNoteActionsBar);

packages/webapp/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.tsx

@@ -33,6 +33,8 @@ import { useRefreshPaymentMades } from '@/hooks/query/paymentMades';
 import { PaymentMadeAction, AbilitySubject } from '@/constants/abilityOption';
 
 import { compose } from '@/utils';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * Payment made actions bar.
@@ -47,6 +49,9 @@ function PaymentMadeActionsBar({
   // #withSettings
   paymentMadesTableSize,
 
+  // #withDialogActions
+  openDialog,
+
   // #withSettingsActions
   addSetting,
 }) {
@@ -81,7 +86,12 @@ function PaymentMadeActionsBar({
   // 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' });
+  };
 
   return (
     <DashboardActionsBar>
@@ -139,6 +149,7 @@ function PaymentMadeActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
           text={<T id={'export'} />}
+          onClick={handleExportBtnClick}
         />
 
         <NavbarDivider />
@@ -168,4 +179,5 @@ export default compose(
   withSettings(({ billPaymentSettings }) => ({
     paymentMadesTableSize: billPaymentSettings?.tableSize,
   })),
+  withDialogActions,
 )(PaymentMadeActionsBar);

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

@@ -25,8 +25,10 @@ import withCreditNotes from './withCreditNotes';
 import withCreditNotesActions from './withCreditNotesActions';
 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';
 
 /**
  * Credit note table actions bar.
@@ -43,6 +45,9 @@ function CreditNotesActionsBar({
 
   // #withSettingsActions
   addSetting,
+
+  // #withDialogActions
+  openDialog,
 }) {
   const history = useHistory();
 
@@ -74,6 +79,11 @@ function CreditNotesActionsBar({
     history.push('/credit-notes/import');
   };
 
+  // Handle the export button click.
+  const handleExportBtnClick = () => {
+    openDialog(DialogsName.Export, { resource: 'credit_note' });
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -122,6 +132,7 @@ function CreditNotesActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
           text={<T id={'export'} />}
+          onClick={handleExportBtnClick}
         />
         <NavbarDivider />
         <DashboardRowsHeightButton
@@ -150,4 +161,5 @@ export default compose(
   withSettings(({ creditNoteSettings }) => ({
     creditNoteTableSize: creditNoteSettings?.tableSize,
   })),
+  withDialogActions,
 )(CreditNotesActionsBar);

packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.tsx

@@ -31,6 +31,8 @@ import { useEstimatesListContext } from './EstimatesListProvider';
 import { useRefreshEstimates } from '@/hooks/query/estimates';
 import { SaleEstimateAction, AbilitySubject } from '@/constants/abilityOption';
 import { compose } from '@/utils';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * Estimates list actions bar.
@@ -45,6 +47,9 @@ function EstimateActionsBar({
   // #withSettings
   estimatesTableSize,
 
+  // #withDialogActions
+  openDialog,
+
   // #withSettingsActions
   addSetting,
 }) {
@@ -80,7 +85,11 @@ function EstimateActionsBar({
   // Handle the import button click.
   const handleImportBtnClick = () => {
     history.push('/estimates/import');
-  }
+  };
+  // Handle the export button click.
+  const handleExportBtnClick = () => {
+    openDialog(DialogsName.Export, { resource: 'sale_estimate' });
+  };
 
   return (
     <DashboardActionsBar>
@@ -141,6 +150,7 @@ function EstimateActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
           text={<T id={'export'} />}
+          onClick={handleExportBtnClick}
         />
         <NavbarDivider />
         <DashboardRowsHeightButton
@@ -170,4 +180,5 @@ export default compose(
   withSettings(({ estimatesSettings }) => ({
     estimatesTableSize: estimatesSettings?.tableSize,
   })),
+  withDialogActions
 )(EstimateActionsBar);

packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.tsx

@@ -29,6 +29,8 @@ import withInvoiceActions from './withInvoiceActions';
 import withSettings from '@/containers/Settings/withSettings';
 import withSettingsActions from '@/containers/Settings/withSettingsActions';
 import { compose } from '@/utils';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * Invoices table actions bar.
@@ -45,6 +47,9 @@ function InvoiceActionsBar({
 
   // #withSettingsActions
   addSetting,
+
+  // #withDialogsActions
+  openDialog
 }) {
   const history = useHistory();
 
@@ -79,6 +84,11 @@ function InvoiceActionsBar({
     history.push('/invoices/import');
   };
 
+  // Handle the export button click.
+  const handleExportBtnClick = () => {
+    openDialog(DialogsName.Export, { resource: 'sale_invoice' });
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -135,6 +145,7 @@ function InvoiceActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
           text={<T id={'export'} />}
+          onClick={handleExportBtnClick}
         />
         <NavbarDivider />
         <DashboardRowsHeightButton
@@ -163,4 +174,5 @@ export default compose(
   withSettings(({ invoiceSettings }) => ({
     invoicesTableSize: invoiceSettings?.tableSize,
   })),
+  withDialogActions,
 )(InvoiceActionsBar);

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

@@ -26,6 +26,7 @@ import withPaymentReceives from './withPaymentReceives';
 import withPaymentReceivesActions from './withPaymentReceivesActions';
 import withSettings from '@/containers/Settings/withSettings';
 import withSettingsActions from '@/containers/Settings/withSettingsActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
 import {
   PaymentReceiveAction,
   AbilitySubject,
@@ -33,6 +34,7 @@ import {
 import { usePaymentReceivesListContext } from './PaymentReceiptsListProvider';
 import { useRefreshPaymentReceive } from '@/hooks/query/paymentReceives';
 import { compose } from '@/utils';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * Payment receives actions bar.
@@ -49,6 +51,9 @@ function PaymentReceiveActionsBar({
 
   // #withSettingsActions
   addSetting,
+
+  // #withDialogActions
+  openDialog,
 }) {
   // History context.
   const history = useHistory();
@@ -82,6 +87,10 @@ function PaymentReceiveActionsBar({
   const handleImportBtnClick = () => {
     history.push('/payment-receives/import');
   };
+  // Handle the export button click.
+  const handleExportBtnClick = () => {
+    openDialog(DialogsName.Export, { resource: 'payment_receive' });
+  };
 
   return (
     <DashboardActionsBar>
@@ -139,6 +148,7 @@ function PaymentReceiveActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
           text={<T id={'export'} />}
+          onClick={handleExportBtnClick}
         />
 
         <NavbarDivider />
@@ -169,4 +179,5 @@ export default compose(
   withSettings(({ paymentReceiveSettings }) => ({
     paymentReceivesTableSize: paymentReceiveSettings?.tableSize,
   })),
+  withDialogActions,
 )(PaymentReceiveActionsBar);

packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.tsx

@@ -35,6 +35,8 @@ import { useRefreshReceipts } from '@/hooks/query/receipts';
 import { SaleReceiptAction, AbilitySubject } from '@/constants/abilityOption';
 
 import { compose } from '@/utils';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * Receipts actions bar.
@@ -49,6 +51,9 @@ function ReceiptActionsBar({
   // #withSettings
   receiptsTableSize,
 
+  // #withDialogActions
+  openDialog,
+
   // #withSettingsActions
   addSetting,
 }) {
@@ -86,6 +91,11 @@ function ReceiptActionsBar({
     history.push('/receipts/import');
   };
 
+  // Handle the export button click.
+  const handleExportBtnClick = () => {
+    openDialog(DialogsName.Export, { resource: 'sale_receipt' });
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -145,6 +155,7 @@ function ReceiptActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
           text={<T id={'export'} />}
+          onClick={handleExportBtnClick}
         />
         <NavbarDivider />
         <DashboardRowsHeightButton
@@ -173,4 +184,5 @@ export default compose(
   withSettings(({ receiptSettings }) => ({
     receiptsTableSize: receiptSettings?.tableSize,
   })),
+  withDialogActions,
 )(ReceiptActionsBar);

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

@@ -31,8 +31,10 @@ import withVendors from './withVendors';
 import withVendorsActions from './withVendorsActions';
 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';
 
 /**
  * Vendors actions bar.
@@ -50,6 +52,9 @@ function VendorActionsBar({
 
   // #withSettingsActions
   addSetting,
+
+  // #withDialogActions
+  openDialog,
 }) {
   const history = useHistory();
 
@@ -83,10 +88,17 @@ function VendorActionsBar({
   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' });
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -138,6 +150,7 @@ function VendorActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon="file-export-16" iconSize={16} />}
           text={<T id={'export'} />}
+          onClick={handleExportBtnClick}
         />
         <NavbarDivider />
         <DashboardRowsHeightButton
@@ -175,4 +188,5 @@ export default compose(
   withSettings(({ vendorsSettings }) => ({
     vendorsTableSize: vendorsSettings?.tableSize,
   })),
+  withDialogActions,
 )(VendorActionsBar);

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

@@ -0,0 +1,38 @@
+// @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;
+  format: 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 useResourceExport = () => {
+  const apiRequest = useApiRequest();
+
+  return useMutation<void, AxiosError, any>((data: ResourceExportValues) => {
+    return apiRequest
+      .get('/export', {
+        responseType: 'blob',
+        headers: {
+          accept:
+            data.format === 'xlsx' ? 'application/xlsx' : 'application/csv',
+        },
+        params: {
+          resource: data.resource,
+          format: data.format,
+        },
+      })
+      .then((res) => {
+        downloadFile(res.data, `${data.resource}.${data.format}`);
+        return res;
+      });
+  });
+};