feat (*) : add referch button.

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>
   );
 }

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>
   );
 }

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,

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>
   );
 }

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>
   );
 }

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>
   );
 }

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>
   );
 }

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);

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>
   );
 }

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>
   );
 }

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>
   );
 }

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>
   );
 }