From d2b75f6ed84214368d055bd9b279f384c0c946a4 Mon Sep 17 00:00:00 2001
From: elforjani3 <elforjani3@gmail.com>
Date: Tue, 3 Aug 2021 17:23:12 +0200
Subject: [PATCH] feat (*) : add referch button.

---
 .../ManualJournalActionsBar.js                | 17 +++++
 .../containers/Accounts/AccountsActionsBar.js | 17 +++++
 .../CustomersLanding/CustomersActionsBar.js   | 21 +++++-
 .../ExchangeRates/ExchangeRateActionsBar.js   | 38 +++++-----
 .../ExpensesLanding/ExpenseActionsBar.js      | 23 ++++--
 .../Bills/BillsLanding/BillsActionsBar.js     | 19 ++++-
 .../PaymentsLanding/PaymentMadeActionsBar.js  | 24 +++++--
 .../EstimatesLanding/EstimatesActionsBar.js   | 24 +++++--
 .../InvoicesLanding/InvoicesActionsBar.js     | 18 ++++-
 .../PaymentReceiveActionsBar.js               | 17 +++++
 .../ReceiptsLanding/ReceiptActionsBar.js      | 19 ++++-
 .../VendorsLanding/VendorActionsBar.js        | 32 ++++++---
 client/src/hooks/query/accounts.js            | 10 +++
 client/src/hooks/query/bills.js               | 14 +++-
 client/src/hooks/query/customers.js           | 53 +++++++-------
 client/src/hooks/query/estimates.js           | 70 +++++++++----------
 client/src/hooks/query/exchangeRates.js       | 10 +++
 client/src/hooks/query/expenses.js            | 10 +++
 client/src/hooks/query/invoices.js            | 10 +++
 client/src/hooks/query/manualJournals.js      | 63 +++++++++--------
 client/src/hooks/query/paymentMades.js        | 13 +++-
 client/src/hooks/query/paymentReceives.js     | 12 +++-
 client/src/hooks/query/receipts.js            | 12 +++-
 client/src/hooks/query/vendors.js             | 10 +++
 24 files changed, 408 insertions(+), 148 deletions(-)

diff --git a/client/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js b/client/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js
index a061c04ef..1491775e8 100644
--- a/client/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js
+++ b/client/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js
@@ -9,11 +9,13 @@ import {
   PopoverInteractionKind,
   Position,
   Intent,
+  Alignment,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
 import { FormattedMessage as T } from 'components';
 
+import { useRefreshJournals } from 'hooks/query/manualJournals';
 import { useManualJournalsContext } from './ManualJournalsListProvider';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -36,6 +38,9 @@ function ManualJournalActionsBar({
   // Manual journals context.
   const { journalsViews } = useManualJournalsContext();
 
+  // Manual journals refresh action.
+  const { refresh } = useRefreshJournals();
+
   // Handle click a new manual journal.
   const onClickNewManualJournal = () => {
     history.push('/make-journal-entry');
@@ -49,6 +54,11 @@ function ManualJournalActionsBar({
     setManualJournalsTableState({ customViewId: customView.id || null });
   };
 
+  // Handle click a refresh Journals
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -106,6 +116,13 @@ function ManualJournalActionsBar({
           text={<T id={'export'} />}
         />
       </NavbarGroup>
+      <NavbarGroup align={Alignment.RIGHT}>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="refresh-16" iconSize={14} />}
+          onClick={handleRefreshBtnClick}
+        />
+      </NavbarGroup>
     </DashboardActionsBar>
   );
 }
diff --git a/client/src/containers/Accounts/AccountsActionsBar.js b/client/src/containers/Accounts/AccountsActionsBar.js
index 57381b7fa..944f872f6 100644
--- a/client/src/containers/Accounts/AccountsActionsBar.js
+++ b/client/src/containers/Accounts/AccountsActionsBar.js
@@ -11,6 +11,7 @@ import {
   Position,
   Intent,
   Switch,
+  Alignment,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { FormattedMessage as T } from 'components';
@@ -20,6 +21,7 @@ import { If, DashboardActionViewsList } from 'components';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import FilterDropdown from 'components/FilterDropdown';
 
+import { useRefreshAccounts } from 'hooks/query/accounts';
 import { useAccountsChartContext } from 'containers/Accounts/AccountsChartProvider';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAccounts from 'containers/Accounts/withAccounts';
@@ -54,6 +56,9 @@ function AccountsActionsBar({
     openDialog('account-form', {});
   };
 
+  // Accounts refresh action.
+  const { refresh } = useRefreshAccounts();
+
   // Handle bulk accounts delete.
   const handleBulkDelete = () => {
     openAlert('accounts-bulk-delete', { accountsIds: accountsSelectedRows });
@@ -82,6 +87,11 @@ function AccountsActionsBar({
     setAccountsTableState({ inactiveMode: checked });
   };
 
+  // Handle click a refresh accounts
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -163,6 +173,13 @@ function AccountsActionsBar({
           onChange={handleInactiveSwitchChange}
         />
       </NavbarGroup>
+      <NavbarGroup align={Alignment.RIGHT}>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="refresh-16" iconSize={14} />}
+          onClick={handleRefreshBtnClick}
+        />
+      </NavbarGroup>
     </DashboardActionsBar>
   );
 }
diff --git a/client/src/containers/Customers/CustomersLanding/CustomersActionsBar.js b/client/src/containers/Customers/CustomersLanding/CustomersActionsBar.js
index 72c9b7bd2..cf5d3615d 100644
--- a/client/src/containers/Customers/CustomersLanding/CustomersActionsBar.js
+++ b/client/src/containers/Customers/CustomersLanding/CustomersActionsBar.js
@@ -8,7 +8,8 @@ import {
   Popover,
   Position,
   PopoverInteractionKind,
-  Switch
+  Switch,
+  Alignment,
 } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'components';
 import intl from 'react-intl-universal';
@@ -19,6 +20,7 @@ import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import { If, Icon, DashboardActionViewsList } from 'components';
 
 import { useCustomersListContext } from './CustomersListProvider';
+import { useRefreshCustomers } from 'hooks/query/customers';
 
 import withCustomers from './withCustomers';
 import withCustomersActions from './withCustomersActions';
@@ -46,6 +48,9 @@ function CustomerActionsBar({
   // Customers list context.
   const { customersViews } = useCustomersListContext();
 
+  // Customers refresh action.
+  const { refresh } = useRefreshCustomers();
+
   const onClickNewCustomer = () => {
     history.push('/customers/new');
   };
@@ -66,6 +71,11 @@ function CustomerActionsBar({
     setCustomersTableState({ inactiveMode: checked });
   };
 
+  // Handle click a refresh customers
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -120,9 +130,16 @@ function CustomerActionsBar({
           onChange={handleInactiveSwitchChange}
         />
       </NavbarGroup>
+      <NavbarGroup align={Alignment.RIGHT}>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="refresh-16" iconSize={14} />}
+          onClick={handleRefreshBtnClick}
+        />
+      </NavbarGroup>
     </DashboardActionsBar>
   );
-};
+}
 
 export default compose(
   withCustomersActions,
diff --git a/client/src/containers/ExchangeRates/ExchangeRateActionsBar.js b/client/src/containers/ExchangeRates/ExchangeRateActionsBar.js
index db6230450..c54d414be 100644
--- a/client/src/containers/ExchangeRates/ExchangeRateActionsBar.js
+++ b/client/src/containers/ExchangeRates/ExchangeRateActionsBar.js
@@ -8,6 +8,7 @@ import {
   Popover,
   Position,
   PopoverInteractionKind,
+  Alignment,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { FormattedMessage as T } from 'components';
@@ -19,6 +20,7 @@ import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import Icon from 'components/Icon';
 import FilterDropdown from 'components/FilterDropdown';
 
+import { useRefreshExchangeRate } from 'hooks/query/exchangeRates';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withResourceDetail from 'containers/Resources/withResourceDetails';
 import withExchangeRatesActions from './withExchangeRatesActions';
@@ -44,30 +46,23 @@ function ExchangeRateActionsBar({
   onBulkDelete,
 }) {
   const [filterCount, setFilterCount] = useState(0);
-  
 
   const onClickNewExchangeRate = () => {
     openDialog('exchangeRate-form', {});
   };
 
-  // const filterDropdown = FilterDropdown({
-  //   initialCondition: {
-  //   fieldKey: '',
-  //     compatator: 'contains',
-  //     value: '',
-  //   },
-  //   fields: resourceFields,
-  //   onFilterChange: (filterConditions) => {
-  //     addExchangeRatesTableQueries({
-  //       filter_roles: filterConditions || '',
-  //     });
-  //     onFilterChanged && onFilterChanged(filterConditions);
-  //   },
-  // });
+  // Exchange rates refresh action.
+  const { refresh } = useRefreshExchangeRate();
 
-  const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
-    selectedRows,
-  ]);
+  // Handle click a refresh sale estimates
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
+
+  const hasSelectedRows = useMemo(
+    () => selectedRows.length > 0,
+    [selectedRows],
+  );
 
   const handelBulkDelete = useCallback(() => {
     onBulkDelete && onBulkDelete(selectedRows.map((r) => r.id));
@@ -124,6 +119,13 @@ function ExchangeRateActionsBar({
           text={<T id={'export'} />}
         />
       </NavbarGroup>
+      <NavbarGroup align={Alignment.RIGHT}>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="refresh-16" iconSize={14} />}
+          onClick={handleRefreshBtnClick}
+        />
+      </NavbarGroup>
     </DashboardActionsBar>
   );
 }
diff --git a/client/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.js b/client/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.js
index c1dd37718..4e41b3275 100644
--- a/client/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.js
+++ b/client/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.js
@@ -9,6 +9,7 @@ import {
   PopoverInteractionKind,
   Position,
   Intent,
+  Alignment,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
@@ -19,6 +20,7 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 
 import { If, DashboardActionViewsList } from 'components';
 
+import { useRefreshExpenses } from 'hooks/query/expenses';
 import { useExpensesListContext } from './ExpensesListProvider';
 import withExpensesActions from './withExpensesActions';
 
@@ -39,15 +41,16 @@ function ExpensesActionsBar({
   // Expenses list context.
   const { expensesViews } = useExpensesListContext();
 
+  // Expenses refresh action.
+  const { refresh } = useRefreshExpenses();
+
   // Handles the new expense buttn click.
   const onClickNewExpense = () => {
     history.push('/expenses/new');
   };
 
   // Handle delete button click.
-  const handleBulkDelete = () => {
-    
-  };
+  const handleBulkDelete = () => {};
 
   // Handles the tab chaning.
   const handleTabChange = (viewId) => {
@@ -55,6 +58,11 @@ function ExpensesActionsBar({
       customViewId: viewId.id || null,
     });
   };
+
+  // Handle click a refresh
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -81,7 +89,7 @@ function ExpensesActionsBar({
             className={classNames(Classes.MINIMAL, 'button--filter', {
               'has-active-filters': filterCount > 0,
             })}
-            text={<T id={'filter'}/>}
+            text={<T id={'filter'} />}
             icon={<Icon icon="filter-16" iconSize={16} />}
           />
         </Popover>
@@ -112,6 +120,13 @@ function ExpensesActionsBar({
           text={<T id={'export'} />}
         />
       </NavbarGroup>
+      <NavbarGroup align={Alignment.RIGHT}>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="refresh-16" iconSize={14} />}
+          onClick={handleRefreshBtnClick}
+        />
+      </NavbarGroup>
     </DashboardActionsBar>
   );
 }
diff --git a/client/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.js b/client/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.js
index 0a1b6c3bf..96d13aab0 100644
--- a/client/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.js
+++ b/client/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.js
@@ -9,6 +9,7 @@ import {
   PopoverInteractionKind,
   Position,
   Intent,
+  Alignment,
 } from '@blueprintjs/core';
 
 import classNames from 'classnames';
@@ -21,7 +22,7 @@ import { If, DashboardActionViewsList } from 'components';
 
 import withBillsActions from './withBillsActions';
 import { useBillsListContext } from './BillsListProvider';
-
+import { useRefreshBills } from 'hooks/query/bills';
 import { compose } from 'utils';
 
 /**
@@ -33,8 +34,8 @@ function BillActionsBar({
 }) {
   const history = useHistory();
 
-  // React intl.
-  
+  // Bills refresh action.
+  const { refresh } = useRefreshBills();
 
   // Bills list context.
   const { billsViews } = useBillsListContext();
@@ -53,6 +54,11 @@ function BillActionsBar({
     });
   };
 
+  // Handle click a refresh bills
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -111,6 +117,13 @@ function BillActionsBar({
           text={<T id={'export'} />}
         />
       </NavbarGroup>
+      <NavbarGroup align={Alignment.RIGHT}>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="refresh-16" iconSize={14} />}
+          onClick={handleRefreshBtnClick}
+        />
+      </NavbarGroup>
     </DashboardActionsBar>
   );
 }
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js
index 1f4271733..efb2ba30d 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js
@@ -9,6 +9,7 @@ import {
   PopoverInteractionKind,
   Position,
   Intent,
+  Alignment,
 } from '@blueprintjs/core';
 
 import classNames from 'classnames';
@@ -21,7 +22,7 @@ import { If, DashboardActionViewsList } from 'components';
 
 import withPaymentMadeActions from './withPaymentMadeActions';
 import { usePaymentMadesListContext } from './PaymentMadesListProvider';
-
+import { useRefreshPaymentMades } from 'hooks/query/paymentMades';
 import { compose } from 'utils';
 
 /**
@@ -32,7 +33,6 @@ function PaymentMadeActionsBar({
   setPaymentMadesTableState,
 }) {
   const history = useHistory();
-  
 
   // Payment receives list context.
   const { paymentMadesViews } = usePaymentMadesListContext();
@@ -42,11 +42,18 @@ function PaymentMadeActionsBar({
     history.push('/payment-mades/new');
   };
 
+  // Payment receive refresh action.
+  const { refresh } = useRefreshPaymentMades();
+
   // Handle tab changing.
   const handleTabChange = (customView) => {
     setPaymentMadesTableState({ customViewId: customView.id || null });
   };
 
+  // Handle click a refresh payment receives.
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -71,11 +78,7 @@ function PaymentMadeActionsBar({
           <Button
             className={classNames(Classes.MINIMAL)}
             text={
-              true ? (
-                <T id={'filter'} />
-              ) : (
-                `${0} ${intl.get('filters_applied')}`
-              )
+              true ? <T id={'filter'} /> : `${0} ${intl.get('filters_applied')}`
             }
             icon={<Icon icon={'filter-16'} iconSize={16} />}
           />
@@ -105,6 +108,13 @@ function PaymentMadeActionsBar({
           text={<T id={'export'} />}
         />
       </NavbarGroup>
+      <NavbarGroup align={Alignment.RIGHT}>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="refresh-16" iconSize={14} />}
+          onClick={handleRefreshBtnClick}
+        />
+      </NavbarGroup>
     </DashboardActionsBar>
   );
 }
diff --git a/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js
index 19690e79e..b2358cf1e 100644
--- a/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js
@@ -9,6 +9,7 @@ import {
   PopoverInteractionKind,
   Position,
   Intent,
+  Alignment,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
@@ -20,6 +21,7 @@ import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
 import withEstimatesActions from './withEstimatesActions';
 import { useEstimatesListContext } from './EstimatesListProvider';
+import { useRefreshEstimates } from 'hooks/query/estimates';
 
 import { compose } from 'utils';
 
@@ -31,7 +33,6 @@ function EstimateActionsBar({
   setEstimatesTableState,
 }) {
   const history = useHistory();
-  
 
   const [filterCount, setFilterCount] = useState(0);
 
@@ -43,6 +44,9 @@ function EstimateActionsBar({
     history.push('/estimates/new');
   };
 
+  // Estimates refresh action.
+  const { refresh } = useRefreshEstimates();
+
   // Handle tab change.
   const handleTabChange = (customView) => {
     setEstimatesTableState({
@@ -50,8 +54,13 @@ function EstimateActionsBar({
     });
   };
 
+  // Handle click a refresh sale estimates
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
+
   return (
-    <DashboardActionsBar> 
+    <DashboardActionsBar>
       <NavbarGroup>
         <DashboardActionViewsList
           resourceName={'estimates'}
@@ -108,10 +117,15 @@ function EstimateActionsBar({
           text={<T id={'export'} />}
         />
       </NavbarGroup>
+      <NavbarGroup align={Alignment.RIGHT}>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="refresh-16" iconSize={14} />}
+          onClick={handleRefreshBtnClick}
+        />
+      </NavbarGroup>
     </DashboardActionsBar>
   );
 }
 
-export default compose(
-  withEstimatesActions,
-)(EstimateActionsBar);
+export default compose(withEstimatesActions)(EstimateActionsBar);
diff --git a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.js b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.js
index 6ab383a12..10953864b 100644
--- a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.js
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.js
@@ -9,6 +9,7 @@ import {
   PopoverInteractionKind,
   Position,
   Intent,
+  Alignment,
 } from '@blueprintjs/core';
 
 import classNames from 'classnames';
@@ -20,6 +21,7 @@ import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
 import { If, DashboardActionViewsList } from 'components';
 
+import { useRefreshInvoices } from 'hooks/query/invoices';
 import { useInvoicesListContext } from './InvoicesListProvider';
 import withInvoiceActions from './withInvoiceActions';
 
@@ -33,7 +35,6 @@ function InvoiceActionsBar({
   setInvoicesTableState,
 }) {
   const history = useHistory();
-  
 
   const [filterCount, setFilterCount] = useState(0);
 
@@ -45,11 +46,19 @@ function InvoiceActionsBar({
     history.push('/invoices/new');
   };
 
+  // Invoices refresh action.
+  const { refresh } = useRefreshInvoices();
+
   // Handle views tab change.
   const handleTabChange = (customView) => {
     setInvoicesTableState({ customViewId: customView.id || null });
   };
 
+  // Handle click a refresh sale invoices
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -108,6 +117,13 @@ function InvoiceActionsBar({
           text={<T id={'export'} />}
         />
       </NavbarGroup>
+      <NavbarGroup align={Alignment.RIGHT}>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="refresh-16" iconSize={14} />}
+          onClick={handleRefreshBtnClick}
+        />
+      </NavbarGroup>
     </DashboardActionsBar>
   );
 }
diff --git a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveActionsBar.js b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveActionsBar.js
index 09cae6f7f..c34a75052 100644
--- a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveActionsBar.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveActionsBar.js
@@ -9,6 +9,7 @@ import {
   PopoverInteractionKind,
   Position,
   Intent,
+  Alignment,
 } from '@blueprintjs/core';
 
 import classNames from 'classnames';
@@ -24,6 +25,7 @@ import withPaymentReceives from './withPaymentReceives';
 
 import { compose } from 'utils';
 import { usePaymentReceivesListContext } from './PaymentReceiptsListProvider';
+import { useRefreshPaymentReceive } from 'hooks/query/paymentReceives';
 
 /**
  * Payment receives actions bar.
@@ -43,11 +45,19 @@ function PaymentReceiveActionsBar({
     history.push('/payment-receives/new');
   };
 
+  // Payment receive refresh action.
+  const { refresh } = useRefreshPaymentReceive();
+
   // Handle tab changing.
   const handleTabChange = (viewId) => {
     setPaymentReceivesTableState({ customViewId: viewId.id || null });
   };
 
+  // Handle click a refresh payment receives
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -100,6 +110,13 @@ function PaymentReceiveActionsBar({
           text={<T id={'export'} />}
         />
       </NavbarGroup>
+      <NavbarGroup align={Alignment.RIGHT}>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="refresh-16" iconSize={14} />}
+          onClick={handleRefreshBtnClick}
+        />
+      </NavbarGroup>
     </DashboardActionsBar>
   );
 }
diff --git a/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.js b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.js
index 3ee7e06af..552720af1 100644
--- a/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.js
+++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.js
@@ -9,6 +9,7 @@ import {
   PopoverInteractionKind,
   Position,
   Intent,
+  Alignment,
 } from '@blueprintjs/core';
 
 import classNames from 'classnames';
@@ -21,7 +22,7 @@ import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
 import withReceiptsActions from './withReceiptsActions';
 import { useReceiptsListContext } from './ReceiptsListProvider';
-
+import { useRefreshReceipts } from 'hooks/query/receipts';
 import { compose } from 'utils';
 
 /**
@@ -32,7 +33,6 @@ function ReceiptActionsBar({
   setReceiptsTableState,
 }) {
   const history = useHistory();
-  
 
   const [filterCount, setFilterCount] = useState(0);
 
@@ -44,12 +44,20 @@ function ReceiptActionsBar({
     history.push('/receipts/new');
   };
 
+  // Sale receipt refresh action.
+  const { refresh } = useRefreshReceipts();
+
   const handleTabChange = (customView) => {
     setReceiptsTableState({
       customViewId: customView.id || null,
     });
   };
 
+  // Handle click a refresh sale estimates
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -109,6 +117,13 @@ function ReceiptActionsBar({
           text={<T id={'export'} />}
         />
       </NavbarGroup>
+      <NavbarGroup align={Alignment.RIGHT}>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="refresh-16" iconSize={14} />}
+          onClick={handleRefreshBtnClick}
+        />
+      </NavbarGroup>
     </DashboardActionsBar>
   );
 }
diff --git a/client/src/containers/Vendors/VendorsLanding/VendorActionsBar.js b/client/src/containers/Vendors/VendorsLanding/VendorActionsBar.js
index 0d1af876a..10d05c93d 100644
--- a/client/src/containers/Vendors/VendorsLanding/VendorActionsBar.js
+++ b/client/src/containers/Vendors/VendorsLanding/VendorActionsBar.js
@@ -8,7 +8,8 @@ import {
   Popover,
   Position,
   PopoverInteractionKind,
-  Switch
+  Switch,
+  Alignment,
 } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'components';
 import intl from 'react-intl-universal';
@@ -18,6 +19,7 @@ import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import Icon from 'components/Icon';
 import { If, DashboardActionViewsList } from 'components';
 
+import { useRefreshVendors } from 'hooks/query/vendors';
 import { useVendorsListContext } from './VendorsListProvider';
 import { useHistory } from 'react-router-dom';
 
@@ -32,19 +34,21 @@ import { compose } from 'utils';
 function VendorActionsBar({
   // #withVendorActions
   setVendorsTableState,
-  vendorsInactiveMode
+  vendorsInactiveMode,
 }) {
   const history = useHistory();
-  
 
   // Vendors list context.
   const { vendorsViews } = useVendorsListContext();
 
-  // Handles new vendor button click. 
+  // Handles new vendor button click.
   const onClickNewVendor = () => {
     history.push('/vendors/new');
   };
 
+  // Vendors refresh action.
+  const { refresh } = useRefreshVendors();
+
   // Handle the active tab change.
   const handleTabChange = (customView) => {
     setVendorsTableState({ customViewId: customView.id || null });
@@ -55,7 +59,12 @@ function VendorActionsBar({
     const checked = event.target.checked;
     setVendorsTableState({ inactiveMode: checked });
   };
-  
+
+  // Handle click a refresh sale estimates
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -80,11 +89,7 @@ function VendorActionsBar({
           <Button
             className={classNames(Classes.MINIMAL, 'button--filter')}
             text={
-              true ? (
-                <T id={'filter'} />
-              ) : (
-                `${9} ${intl.get('filters_applied')}`
-              )
+              true ? <T id={'filter'} /> : `${9} ${intl.get('filters_applied')}`
             }
             icon={<Icon icon="filter-16" iconSize={16} />}
           />
@@ -113,6 +118,13 @@ function VendorActionsBar({
           onChange={handleInactiveSwitchChange}
         />
       </NavbarGroup>
+      <NavbarGroup align={Alignment.RIGHT}>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="refresh-16" iconSize={14} />}
+          onClick={handleRefreshBtnClick}
+        />
+      </NavbarGroup>
     </DashboardActionsBar>
   );
 }
diff --git a/client/src/hooks/query/accounts.js b/client/src/hooks/query/accounts.js
index b03c6fca3..0bd40dfa8 100644
--- a/client/src/hooks/query/accounts.js
+++ b/client/src/hooks/query/accounts.js
@@ -160,3 +160,13 @@ export function useAccountTransactions(id, props) {
     },
   );
 }
+
+export function useRefreshAccounts() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries(t.ACCOUNTS);
+    },
+  };
+}
diff --git a/client/src/hooks/query/bills.js b/client/src/hooks/query/bills.js
index 9e2fdc54e..664065958 100644
--- a/client/src/hooks/query/bills.js
+++ b/client/src/hooks/query/bills.js
@@ -91,7 +91,7 @@ export function useDeleteBill(props) {
   });
 }
 
-const transformBillsResponse = (response) => ({  
+const transformBillsResponse = (response) => ({
   bills: response.data.bills,
   pagination: transformPagination(response.data.pagination),
   filterMeta: response.data.filter_meta,
@@ -131,7 +131,7 @@ export function useBills(query, props) {
 export function useBill(id, props) {
   return useRequestQuery(
     [t.BILL, id],
-    { method: 'get', url: `/purchases/bills/${id}`, },
+    { method: 'get', url: `/purchases/bills/${id}` },
     {
       select: (res) => res.data.bill,
       defaultData: {},
@@ -159,3 +159,13 @@ export function useDueBills(vendorId, props) {
     },
   );
 }
+
+export function useRefreshBills() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries(t.BILLS);
+    },
+  };
+}
diff --git a/client/src/hooks/query/customers.js b/client/src/hooks/query/customers.js
index 0126127b5..630892453 100644
--- a/client/src/hooks/query/customers.js
+++ b/client/src/hooks/query/customers.js
@@ -26,7 +26,7 @@ const commonInvalidateQueries = (queryClient) => {
 const customersSelector = (response) => ({
   customers: response.data.customers,
   pagination: transformPagination(response.data.pagination),
-  filterMeta: response.data.filter_meta,  
+  filterMeta: response.data.filter_meta,
 });
 
 /**
@@ -66,7 +66,7 @@ export function useEditCustomer(props) {
         // Common invalidate queries.
         commonInvalidateQueries(queryClient);
       },
-      ...props
+      ...props,
     },
   );
 }
@@ -78,19 +78,16 @@ export function useDeleteCustomer(props) {
   const queryClient = useQueryClient();
   const apiRequest = useApiRequest();
 
-  return useMutation(
-    (id) => apiRequest.delete(`customers/${id}`),
-    {
-      onSuccess: (res, id) => {
-        // Invalidate specific customer.
-        queryClient.invalidateQueries([t.CUSTOMER, id]);
+  return useMutation((id) => apiRequest.delete(`customers/${id}`), {
+    onSuccess: (res, id) => {
+      // Invalidate specific customer.
+      queryClient.invalidateQueries([t.CUSTOMER, id]);
 
-        // Common invalidate queries.
-        commonInvalidateQueries(queryClient);
-      },
-      ...props,
-    }
-  );
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
 }
 
 /**
@@ -100,15 +97,13 @@ export function useCreateCustomer(props) {
   const queryClient = useQueryClient();
   const apiRequest = useApiRequest();
 
-  return useMutation(
-    (values) => apiRequest.post('customers', values),
-    {
-      onSuccess: () => {
-        // Common invalidate queries.
-        commonInvalidateQueries(queryClient);
-      },
-      ...props
-    });
+  return useMutation((values) => apiRequest.post('customers', values), {
+    onSuccess: () => {
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
 }
 
 /**
@@ -121,7 +116,17 @@ export function useCustomer(id, props) {
     {
       select: (res) => res.data.customer,
       defaultData: {},
-      ...props
+      ...props,
     },
   );
 }
+
+export function useRefreshCustomers() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries(t.CUSTOMERS);
+    },
+  };
+}
diff --git a/client/src/hooks/query/estimates.js b/client/src/hooks/query/estimates.js
index dbeace29c..97015d06d 100644
--- a/client/src/hooks/query/estimates.js
+++ b/client/src/hooks/query/estimates.js
@@ -4,7 +4,6 @@ import useApiRequest from '../useRequest';
 import { transformPagination } from 'utils';
 import t from './types';
 
-
 const commonInvalidateQueries = (queryClient) => {
   // Invalidate estimates.
   queryClient.invalidateQueries(t.SALE_ESTIMATES);
@@ -69,7 +68,7 @@ export function useEstimate(id, props) {
 const transformEstimates = (res) => ({
   estimates: res.data.sales_estimates,
   pagination: transformPagination(res.data.pagination),
-  filterMeta: res.data.filter_meta,  
+  filterMeta: res.data.filter_meta,
 });
 
 /**
@@ -121,19 +120,16 @@ export function useDeliverEstimate(props) {
   const queryClient = useQueryClient();
   const apiRequest = useApiRequest();
 
-  return useMutation(
-    (id) => apiRequest.post(`sales/estimates/${id}/deliver`),
-    {
-      onSuccess: (res, id) => {
-        // Common invalidate queries.
-        commonInvalidateQueries(queryClient);
+  return useMutation((id) => apiRequest.post(`sales/estimates/${id}/deliver`), {
+    onSuccess: (res, id) => {
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
 
-        // Invalidate specific sale estimate.
-        queryClient.invalidateQueries([t.SALE_ESTIMATE, id]);
-      },
-      ...props,
+      // Invalidate specific sale estimate.
+      queryClient.invalidateQueries([t.SALE_ESTIMATE, id]);
     },
-  );
+    ...props,
+  });
 }
 
 /**
@@ -143,19 +139,16 @@ export function useApproveEstimate(props) {
   const queryClient = useQueryClient();
   const apiRequest = useApiRequest();
 
-  return useMutation(
-    (id) => apiRequest.post(`sales/estimates/${id}/approve`),
-    {
-      onSuccess: (res, id) => {
-        // Common invalidate queries.
-        commonInvalidateQueries(queryClient);
+  return useMutation((id) => apiRequest.post(`sales/estimates/${id}/approve`), {
+    onSuccess: (res, id) => {
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
 
-        // Invalidate specific sale estimate.
-        queryClient.invalidateQueries([t.SALE_ESTIMATE, id]);
-      },
-      ...props,
+      // Invalidate specific sale estimate.
+      queryClient.invalidateQueries([t.SALE_ESTIMATE, id]);
     },
-  );
+    ...props,
+  });
 }
 
 /**
@@ -165,17 +158,24 @@ export function useRejectEstimate(props) {
   const queryClient = useQueryClient();
   const apiRequest = useApiRequest();
 
-  return useMutation(
-    (id) => apiRequest.post(`sales/estimates/${id}/reject`),
-    {
-      onSuccess: (res, id) => {
-        // Common invalidate queries.
-        commonInvalidateQueries(queryClient);
+  return useMutation((id) => apiRequest.post(`sales/estimates/${id}/reject`), {
+    onSuccess: (res, id) => {
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
 
-        // Invalidate specific sale estimate.
-        queryClient.invalidateQueries([t.SALE_ESTIMATE, id]);
-      },
-      ...props,
+      // Invalidate specific sale estimate.
+      queryClient.invalidateQueries([t.SALE_ESTIMATE, id]);
     },
-  );
+    ...props,
+  });
+}
+
+export function useRefreshEstimates() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries(t.SALE_ESTIMATES);
+    },
+  };
 }
diff --git a/client/src/hooks/query/exchangeRates.js b/client/src/hooks/query/exchangeRates.js
index 0f7f61eb2..7f7435d37 100644
--- a/client/src/hooks/query/exchangeRates.js
+++ b/client/src/hooks/query/exchangeRates.js
@@ -89,3 +89,13 @@ export function useExchangeRates(query, props) {
     }),
   };
 }
+
+export function useRefreshExchangeRate() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries('EXCHANGES_RATES');
+    },
+  };
+}
diff --git a/client/src/hooks/query/expenses.js b/client/src/hooks/query/expenses.js
index ca0c3b545..ac5a3a24e 100644
--- a/client/src/hooks/query/expenses.js
+++ b/client/src/hooks/query/expenses.js
@@ -146,3 +146,13 @@ export function usePublishExpense(props) {
     ...props,
   });
 }
+
+export function useRefreshExpenses() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries(t.EXPENSES);
+    },
+  };
+}
diff --git a/client/src/hooks/query/invoices.js b/client/src/hooks/query/invoices.js
index c4503b210..93a89ed8e 100644
--- a/client/src/hooks/query/invoices.js
+++ b/client/src/hooks/query/invoices.js
@@ -176,3 +176,13 @@ export function useDueInvoices(customerId, props) {
     },
   );
 }
+
+export function useRefreshInvoices() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries(t.SALE_INVOICES);
+    },
+  };
+}
diff --git a/client/src/hooks/query/manualJournals.js b/client/src/hooks/query/manualJournals.js
index 34deb84db..cdd38c635 100644
--- a/client/src/hooks/query/manualJournals.js
+++ b/client/src/hooks/query/manualJournals.js
@@ -31,16 +31,13 @@ export function useCreateJournal(props) {
   const queryClient = useQueryClient();
   const apiRequest = useApiRequest();
 
-  return useMutation(
-    (values) => apiRequest.post('manual-journals', values),
-    {
-      onSuccess: () => {
-        // Common invalidate queries.
-        commonInvalidateQueries(queryClient);
-      },
-      ...props
+  return useMutation((values) => apiRequest.post('manual-journals', values), {
+    onSuccess: () => {
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
     },
-  );
+    ...props,
+  });
 }
 
 /**
@@ -60,7 +57,7 @@ export function useEditJournal(props) {
         // Common invalidate queries.
         commonInvalidateQueries(queryClient);
       },
-      ...props
+      ...props,
     },
   );
 }
@@ -72,18 +69,15 @@ export function useDeleteJournal(props) {
   const queryClient = useQueryClient();
   const apiRequest = useApiRequest();
 
-  return useMutation(
-    (id) => apiRequest.delete(`manual-journals/${id}`),
-    {
-      onSuccess: (res, id) => {
-        // Invalidate specific manual journal.
-        queryClient.invalidateQueries(t.MANUAL_JOURNAL, id);
+  return useMutation((id) => apiRequest.delete(`manual-journals/${id}`), {
+    onSuccess: (res, id) => {
+      // Invalidate specific manual journal.
+      queryClient.invalidateQueries(t.MANUAL_JOURNAL, id);
 
-        commonInvalidateQueries(queryClient);
-      },
-      ...props
+      commonInvalidateQueries(queryClient);
     },
-  );
+    ...props,
+  });
 }
 
 /**
@@ -93,24 +87,21 @@ export function usePublishJournal(props) {
   const queryClient = useQueryClient();
   const apiRequest = useApiRequest();
 
-  return useMutation(
-    (id) => apiRequest.post(`manual-journals/${id}/publish`),
-    {
-      onSuccess: (res, id) => {
-        // Invalidate specific manual journal.
-        queryClient.invalidateQueries(t.MANUAL_JOURNAL, id);
+  return useMutation((id) => apiRequest.post(`manual-journals/${id}/publish`), {
+    onSuccess: (res, id) => {
+      // Invalidate specific manual journal.
+      queryClient.invalidateQueries(t.MANUAL_JOURNAL, id);
 
-        commonInvalidateQueries(queryClient);
-      },
-      ...props
+      commonInvalidateQueries(queryClient);
     },
-  );
+    ...props,
+  });
 }
 
 const transformJournals = (response) => ({
   manualJournals: response.data.manual_journals,
   pagination: transformPagination(response.data.pagination),
-  filterMeta: response.data.filter_meta
+  filterMeta: response.data.filter_meta,
 });
 
 /**
@@ -146,3 +137,13 @@ export function useJournal(id, props) {
     },
   );
 }
+
+export function useRefreshJournals() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries(t.MANUAL_JOURNALS);
+    },
+  };
+}
diff --git a/client/src/hooks/query/paymentMades.js b/client/src/hooks/query/paymentMades.js
index a104b3f6b..88b46aed5 100644
--- a/client/src/hooks/query/paymentMades.js
+++ b/client/src/hooks/query/paymentMades.js
@@ -4,11 +4,10 @@ import { transformPagination } from 'utils';
 import useApiRequest from '../useRequest';
 import t from './types';
 
-
 const commonInvalidateQueries = (client) => {
   // Invalidate payment mades.
   client.invalidateQueries(t.PAYMENT_MADES);
-        
+
   // Invalidate payment made new entries.
   client.invalidateQueries(t.PAYMENT_MADE_NEW_ENTRIES);
   client.invalidateQueries(t.PAYMENT_MADE_EDIT_PAGE);
@@ -158,3 +157,13 @@ export function usePaymentMadeNewPageEntries(vendorId, props) {
     },
   );
 }
+
+export function useRefreshPaymentMades() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries(t.PAYMENT_MADES);
+    },
+  };
+}
\ No newline at end of file
diff --git a/client/src/hooks/query/paymentReceives.js b/client/src/hooks/query/paymentReceives.js
index d522b2b9a..b206e5a3d 100644
--- a/client/src/hooks/query/paymentReceives.js
+++ b/client/src/hooks/query/paymentReceives.js
@@ -30,7 +30,7 @@ const commonInvalidateQueries = (client) => {
 const transformPaymentReceives = (res) => ({
   paymentReceives: res.data.payment_receives,
   pagination: transformPagination(res.data.pagination),
-  filterMeta: res.data.filter_meta,  
+  filterMeta: res.data.filter_meta,
 });
 
 /**
@@ -160,3 +160,13 @@ export function usePaymentReceiveEditPage(id, props) {
     },
   );
 }
+
+export function useRefreshPaymentReceive() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries(t.PAYMENT_RECEIVES);
+    },
+  };
+}
diff --git a/client/src/hooks/query/receipts.js b/client/src/hooks/query/receipts.js
index 8befaf3ff..7cb2be123 100644
--- a/client/src/hooks/query/receipts.js
+++ b/client/src/hooks/query/receipts.js
@@ -90,7 +90,7 @@ export function useCloseReceipt(props) {
   return useMutation((id) => apiRequest.post(`sales/receipts/${id}/close`), {
     onSuccess: (res, id) => {
       queryClient.invalidateQueries([t.SALE_RECEIPT, id]);
-      
+
       // Invalidate queries.
       commonInvalidateQueries(queryClient);
     },
@@ -141,3 +141,13 @@ export function useReceipt(id, props) {
     },
   );
 }
+
+export function useRefreshReceipts() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries(t.SALE_RECEIPTS);
+    },
+  };
+}
diff --git a/client/src/hooks/query/vendors.js b/client/src/hooks/query/vendors.js
index f245afef4..c9bc4c783 100644
--- a/client/src/hooks/query/vendors.js
+++ b/client/src/hooks/query/vendors.js
@@ -114,3 +114,13 @@ export function useVendor(id, props) {
     },
   );
 }
+
+export function useRefreshVendors() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries(t.VENDORS);
+    },
+  };
+}