From 3753c3e791f16d5e234d1d424c787ad791f484c1 Mon Sep 17 00:00:00 2001
From: elforjani3 <elforjani3@gmail.com>
Date: Wed, 20 May 2020 01:49:36 +0200
Subject: [PATCH] WIP  feature/Bulk

---
 .../containers/Accounts/AccountsActionsBar.js |  24 ++-
 .../src/containers/Accounts/AccountsChart.js  |  89 ++++++++++-
 .../Accounts/withAccountsActions.js           |   4 +
 .../containers/ExchangeRates/ExchangeRate.js  |  68 ++++++++-
 .../ExchangeRates/ExchangeRateActionsBar.js   |  26 ++--
 .../ExchangeRates/withExchangeRatesActions.js |   2 +
 .../containers/Items/ItemCategoriesList.js    | 142 ++++++++++++++----
 .../containers/Items/ItemCategoriesTable.js   |  14 +-
 .../Items/ItemsCategoryActionsBar.js          |  39 +++--
 .../Items/withItemCategoriesActions.js        |   3 +
 client/src/lang/en/index.js                   |  11 ++
 client/src/static/json/icons.js               |   5 +
 .../store/ExchangeRate/exchange.actions.js    |  16 ++
 .../store/ExchangeRate/exchange.reducer.js    |  14 ++
 .../src/store/ExchangeRate/exchange.type.js   |   3 +-
 client/src/store/accounts/accounts.actions.js |  33 ++++
 client/src/store/accounts/accounts.types.js   |   5 +-
 .../itemCategories/itemsCategory.actions.js   |  14 ++
 .../itemCategories/itemsCategory.reducer.js   |  11 ++
 .../itemCategories/itemsCategory.type.js      |   4 +-
 20 files changed, 454 insertions(+), 73 deletions(-)

diff --git a/client/src/containers/Accounts/AccountsActionsBar.js b/client/src/containers/Accounts/AccountsActionsBar.js
index 681369a4f..4440c0564 100644
--- a/client/src/containers/Accounts/AccountsActionsBar.js
+++ b/client/src/containers/Accounts/AccountsActionsBar.js
@@ -44,6 +44,8 @@ function AccountsActionsBar({
   onFilterChanged,
   onBulkDelete,
   onBulkArchive,
+  onBulkActivate,
+  onBulkInactive
 }) {
   const history = useHistory();
   const [filterCount, setFilterCount] = useState(0);
@@ -78,6 +80,17 @@ function AccountsActionsBar({
     onBulkDelete && onBulkDelete(selectedRows.map(r => r.id));
   }, [onBulkDelete, selectedRows]);
 
+  const handelBulkActivate =useCallback(()=>{
+
+    onBulkActivate && onBulkActivate(selectedRows.map(r=>r.id))
+  },[onBulkActivate,selectedRows])
+
+const handelBulkInactive =useCallback(()=>{
+
+onBulkInactive && onBulkInactive(selectedRows.map(r=>r.id))
+
+},[onBulkInactive,selectedRows])
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -116,11 +129,18 @@ function AccountsActionsBar({
         </Popover>
 
         <If condition={hasSelectedRows}>
+       
           <Button
             className={Classes.MINIMAL}
+            icon={<Icon icon='multi-select' iconSize={15} />}
+            text={<T id={'activate'}/>}
+            onClick={handelBulkActivate}
+          />
+             <Button
+            className={Classes.MINIMAL}
             icon={<Icon icon='archive' iconSize={15} />}
-            text={<T id={'archive'}/>}
-            onClick={handleBulkArchive}
+            text={<T id={'inactivate'}/>}
+            onClick={handelBulkInactive}
           />
           <Button
             className={Classes.MINIMAL}
diff --git a/client/src/containers/Accounts/AccountsChart.js b/client/src/containers/Accounts/AccountsChart.js
index 537fa0d13..bf69d8cbb 100644
--- a/client/src/containers/Accounts/AccountsChart.js
+++ b/client/src/containers/Accounts/AccountsChart.js
@@ -44,6 +44,8 @@ function AccountsChart({
   requestFetchAccountsTable,
   requestDeleteBulkAccounts,
   addAccountsTableQueries,
+  requestBulkActivateAccounts,
+  requestBulkInactiveAccounts,
 
   // #withAccounts
   accountsTableQuery,
@@ -55,7 +57,8 @@ function AccountsChart({
   const [activateAccount, setActivateAccount] = useState(false);
   const [bulkDelete, setBulkDelete] = useState(false);
   const [selectedRows, setSelectedRows] = useState([]);
-
+  const [bulkActivate,setBulkActivate] =useState(false);
+  const [bulkInactiveAccounts,setBulkInactiveAccounts] =useState(false)
   const [tableLoading, setTableLoading] = useState(false);
 
   // Fetch accounts resource views and fields.
@@ -235,6 +238,65 @@ function AccountsChart({
   // Calculates the data table selected rows count.
   const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [selectedRows]);
 
+ 
+
+ // Handle bulk Activate accounts button click.,
+  const handleBulkActivate = useCallback((bulkActivateIds) => {
+    setBulkActivate(bulkActivateIds);
+}, [setBulkActivate]);
+
+
+ // Handle cancel Bulk Activate accounts bulk delete.
+  const handleCancelBulkActivate = useCallback(() => {
+  setBulkActivate(false);
+}, []);
+
+ // Handle Bulk activate account confirm.
+const handleConfirmBulkActivate = useCallback(() => {
+  requestBulkActivateAccounts(bulkActivate).then(() => {
+    setBulkActivate(false);
+    AppToaster.show({
+      message: formatMessage({ id: 'the_accounts_has_been_successfully_activated' }),
+      intent: Intent.SUCCESS,
+    });
+  }).catch((errors) => {
+    setBulkActivate(false);
+   
+  });
+}, [requestBulkActivateAccounts, bulkActivate]);
+
+
+
+ // Handle bulk Inactive accounts button click.,
+ const handleBulkInactive = useCallback((bulkInactiveIds) => {
+  setBulkInactiveAccounts(bulkInactiveIds);
+}, [setBulkInactiveAccounts]);
+
+
+  // Handle cancel Bulk Inactive accounts bulk delete.
+  const handleCancelBulkInactive = useCallback(() => {
+    setBulkInactiveAccounts(false);
+  }, []);
+
+ // Handle Bulk Inactive accounts confirm.
+ const handleConfirmBulkInactive = useCallback(() => {
+  requestBulkInactiveAccounts(bulkInactiveAccounts).then(() => {
+    setBulkInactiveAccounts(false);
+    AppToaster.show({
+      message: formatMessage({ id: 'the_accounts_has_been_successfully_inactivated' }),
+      intent: Intent.SUCCESS,
+    });
+  }).catch((errors) => {
+    setBulkInactiveAccounts(false);
+   
+  });
+}, [requestBulkInactiveAccounts, bulkInactiveAccounts]);
+
+
+
+
+
+
   return (
     <DashboardInsider loading={fetchHook.isFetching} name={'accounts-chart'}>
       <DashboardActionsBar
@@ -242,6 +304,8 @@ function AccountsChart({
         onFilterChanged={handleFilterChanged}
         onBulkDelete={handleBulkDelete}
         onBulkArchive={handleBulkArchive}
+        onBulkActivate={handleBulkActivate}
+        onBulkInactive={handleBulkInactive}
       />
 
       <DashboardPageContent>
@@ -321,6 +385,29 @@ function AccountsChart({
             <T id={'once_delete_these_accounts_you_will_not_able_restore_them'} />
           </p>
         </Alert>
+
+        <Alert
+          cancelButtonText={<T id={'cancel'} />}
+          confirmButtonText={`${formatMessage({id:'activate'})} (${selectedRowsCount})`}
+          intent={Intent.WARNING}
+          isOpen={bulkActivate}
+          onCancel={handleCancelBulkActivate}
+          onConfirm={handleConfirmBulkActivate}>
+          <p>
+            <T id={'are_sure_to_activate_this_accounts'} />
+          </p>
+        </Alert>
+        <Alert
+          cancelButtonText={<T id={'cancel'} />}
+          confirmButtonText={`${formatMessage({id:'inactivate'})} (${selectedRowsCount})`}
+          intent={Intent.WARNING}
+          isOpen={bulkInactiveAccounts}
+          onCancel={handleCancelBulkInactive}
+          onConfirm={handleConfirmBulkInactive}>
+          <p>
+            <T id={'are_sure_to_inactive_this_accounts'} />
+          </p>
+        </Alert>
       </DashboardPageContent>
     </DashboardInsider>
   );
diff --git a/client/src/containers/Accounts/withAccountsActions.js b/client/src/containers/Accounts/withAccountsActions.js
index fcc4f0541..baea3060e 100644
--- a/client/src/containers/Accounts/withAccountsActions.js
+++ b/client/src/containers/Accounts/withAccountsActions.js
@@ -8,6 +8,8 @@ import {
   submitAccount,
   fetchAccount,
   deleteBulkAccounts,
+  bulkActivateAccounts,
+  bulkInactiveAccounts
 } from 'store/accounts/accounts.actions';
 
 const mapActionsToProps = (dispatch) => ({
@@ -19,6 +21,8 @@ const mapActionsToProps = (dispatch) => ({
   requestActivateAccount: (id) => dispatch(activateAccount({ id })),
   requestFetchAccount: (id) => dispatch(fetchAccount({ id })),
   requestDeleteBulkAccounts: (ids) => dispatch(deleteBulkAccounts({ ids })),
+  requestBulkActivateAccounts:(ids)=>dispatch(bulkActivateAccounts({ids})),
+  requestBulkInactiveAccounts:(ids)=>dispatch(bulkInactiveAccounts({ids})),
 });
 
 export default connect(null, mapActionsToProps);
\ No newline at end of file
diff --git a/client/src/containers/ExchangeRates/ExchangeRate.js b/client/src/containers/ExchangeRates/ExchangeRate.js
index f2e0d5847..8782fbdff 100644
--- a/client/src/containers/ExchangeRates/ExchangeRate.js
+++ b/client/src/containers/ExchangeRates/ExchangeRate.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState, useCallback,useMemo } from 'react';
 import { useQuery } from 'react-query';
 import { useParams } from 'react-router-dom';
 import { Alert, Intent } from '@blueprintjs/core';
@@ -15,7 +15,7 @@ import withExchangeRatesActions from 'containers/ExchangeRates/withExchangeRates
 
 import { compose } from 'utils';
 
-import { FormattedMessage as T, useIntl } from 'react-intl';
+  import { FormattedMessage as T, useIntl, FormattedHTMLMessage } from 'react-intl';
 
 function ExchangeRate({
   // #withDashboard
@@ -28,19 +28,21 @@ function ExchangeRate({
   requestFetchExchangeRates,
   requestDeleteExchangeRate,
   addExchangeRatesTableQueries,
+  requestDeleteBulkExchangeRates,
+
 }) {
   const { id } = useParams();
   const [deleteExchangeRate, setDeleteExchangeRate] = useState(false);
   const [selectedRows, setSelectedRows] = useState([]);
   const { formatMessage } = useIntl();
- 
+  const [bulkDelete, setBulkDelete] = useState(false);
+
   // const fetchExchangeRates = useQuery('exchange-rates-table', () => {
   //   return Promise.all([requestFetchExchangeRates()]);
   // });
 
    const fetchExchangeRates = useQuery('exchange-rates-table',
-    () => requestFetchExchangeRates(),
-    { refetchInterval: 3000 });
+    () => requestFetchExchangeRates());
 
 
   useEffect(() => {
@@ -93,11 +95,48 @@ function ExchangeRate({
     [setSelectedRows]
   );
 
+ // Handle Exchange Rates bulk delete.
+ const handleBulkDelete = useCallback(
+  (exchangeRates) => {
+    setBulkDelete(exchangeRates);
+  },
+  [setBulkDelete]
+);
+
+ //Handel cancel itemCategories bulk delete.
+ const handleCancelBulkDelete =useCallback(()=>{
+  setBulkDelete(false)
+},[])
+
+// handle confirm Exchange Rates bulk delete.
+const handleConfirmBulkDelete = useCallback(() => {
+  requestDeleteBulkExchangeRates(bulkDelete)
+    .then(() => {
+      setBulkDelete(false);
+      AppToaster.show({
+        message: formatMessage({
+          id: 'the_exchange_rates_has_been_successfully_deleted',
+        }),
+        intent: Intent.SUCCESS,
+      });
+    })
+    .catch((errors) => {
+      setBulkDelete(false);
+    });
+}, [requestDeleteBulkExchangeRates, bulkDelete]);
+
+
+  // Calculates the data table selected rows count.
+  const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [selectedRows]);
+
+
   return (
     <DashboardInsider>
       <ExchangeRateActionsBar
         onDeleteExchangeRate={handelDeleteExchangeRate}
         selectedRows={selectedRows}
+        onBulkDelete={handleBulkDelete}
+
       />
       <DashboardPageContent>
         <ExchangeRateTable
@@ -116,10 +155,25 @@ function ExchangeRate({
           onConfirm={handelConfirmExchangeRateDelete}
         >
           <p>
-            Are you sure you want to move <b>filename</b> to Trash? You will be
-            able to restore it later, but it will become private to you.
+            <FormattedHTMLMessage id={'once_delete_this_exchange_rate_you_will_able_to_restore_it'}/>
           </p>
         </Alert>
+        <Alert
+        cancelButtonText={<T id={'cancel'} />}
+        confirmButtonText={`${formatMessage({id:'delete'})} (${selectedRowsCount})`}
+        icon='trash'
+        intent={Intent.DANGER}
+        isOpen={bulkDelete}
+        onCancel={handleCancelBulkDelete}
+        onConfirm={handleConfirmBulkDelete}
+      >
+        <p>
+          <FormattedHTMLMessage
+            id={'once_delete_these_exchange_rates_you_will_not_able_restore_them'}
+          />
+        </p>
+      </Alert>
+
       </DashboardPageContent>
     </DashboardInsider>
   );
diff --git a/client/src/containers/ExchangeRates/ExchangeRateActionsBar.js b/client/src/containers/ExchangeRates/ExchangeRateActionsBar.js
index af432a388..580a893a7 100644
--- a/client/src/containers/ExchangeRates/ExchangeRateActionsBar.js
+++ b/client/src/containers/ExchangeRates/ExchangeRateActionsBar.js
@@ -13,7 +13,7 @@ import Icon from 'components/Icon';
 import { connect } from 'react-redux';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
-import DialogConnect from 'connectors/Dialog.connector';
+import withDialog from 'connectors/Dialog.connector';
 
 import FilterDropdown from 'components/FilterDropdown';
 import withResourceDetail from 'containers/Resources/withResourceDetails';
@@ -28,10 +28,12 @@ function ExchangeRateActionsBar({
 
   // #withResourceDetail
   resourceFields,
-
+  
+  // #ownProps
   selectedRows = [],
   onDeleteExchangeRate,
   onFilterChanged,
+  onBulkDelete
 }) {
   const [filterCount, setFilterCount] = useState(0);
 
@@ -48,17 +50,21 @@ function ExchangeRateActionsBar({
     },
   });
 
-  const handelDeleteExchangeRate = useCallback(
-    (exchangeRate) => {
-      onDeleteExchangeRate(exchangeRate);
-    },
-    [selectedRows, onDeleteExchangeRate]
-  );
+  // const handelDeleteExchangeRate = useCallback(
+  //   (exchangeRate) => {
+  //     onDeleteExchangeRate(exchangeRate);
+  //   },
+  //   [selectedRows, onDeleteExchangeRate]
+  // );
 
   const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
     selectedRows,
   ]);
 
+  const handelBulkDelete =useCallback(()=>{
+    onBulkDelete && onBulkDelete(selectedRows.map(r=>r.id));
+  },[onBulkDelete,selectedRows])
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -92,7 +98,7 @@ function ExchangeRateActionsBar({
             icon={<Icon icon='trash' iconSize={15} />}
             text={<T id={'delete'} />}
             intent={Intent.DANGER}
-            onClick={handelDeleteExchangeRate}
+            onClick={handelBulkDelete}
           />
         )}
         <Button
@@ -118,7 +124,7 @@ const withExchangeRateActionBar = connect(mapStateToProps);
 
 export default compose(
   withExchangeRateActionBar,
-  DialogConnect,
+  withDialog,
   withResourceDetail(({ resourceFields }) => ({
     resourceFields,
   }))
diff --git a/client/src/containers/ExchangeRates/withExchangeRatesActions.js b/client/src/containers/ExchangeRates/withExchangeRatesActions.js
index 35adfab5f..c439a6344 100644
--- a/client/src/containers/ExchangeRates/withExchangeRatesActions.js
+++ b/client/src/containers/ExchangeRates/withExchangeRatesActions.js
@@ -4,6 +4,7 @@ import {
   fetchExchangeRates,
   deleteExchangeRate,
   editExchangeRate,
+  deleteBulkExchangeRates
 } from 'store/ExchangeRate/exchange.actions';
 
 const mapActionsToProps = (dispatch) => ({
@@ -11,6 +12,7 @@ const mapActionsToProps = (dispatch) => ({
   requestFetchExchangeRates: () => dispatch(fetchExchangeRates()),
   requestDeleteExchangeRate: (id) => dispatch(deleteExchangeRate(id)),
   requestEditExchangeRate: (id, form) => dispatch(editExchangeRate(id, form)),
+  requestDeleteBulkExchangeRates:(ids)=>dispatch(deleteBulkExchangeRates({ids})),
   addExchangeRatesTableQueries: (queries) =>
     dispatch({
       type: 'ExchangeRates_TABLE_QUERIES_ADD',
diff --git a/client/src/containers/Items/ItemCategoriesList.js b/client/src/containers/Items/ItemCategoriesList.js
index e6e19d4e5..9284882be 100644
--- a/client/src/containers/Items/ItemCategoriesList.js
+++ b/client/src/containers/Items/ItemCategoriesList.js
@@ -1,13 +1,18 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState, useCallback,useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 import { useQuery } from 'react-query';
 import { Alert, Intent } from '@blueprintjs/core';
-import { FormattedMessage as T, FormattedHTMLMessage, useIntl } from 'react-intl';
+import {
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+  useIntl,
+} from 'react-intl';
 
 import AppToaster from 'components/AppToaster';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import ItemCategoriesDataTable from 'containers/Items/ItemCategoriesTable';
 import ItemsCategoryActionsBar from 'containers/Items/ItemsCategoryActionsBar';
+import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 
 import withDialog from 'connectors/Dialog.connector';
 import withDashboardActions from 'containers/Dashboard/withDashboard';
@@ -15,7 +20,6 @@ import withItemCategoriesActions from 'containers/Items/withItemCategoriesAction
 
 import { compose } from 'utils';
 
-
 const ItemCategoryList = ({
   // #withDashboardActions
   changePageTitle,
@@ -23,6 +27,7 @@ const ItemCategoryList = ({
   // #withItemCategoriesActions
   requestFetchItemCategories,
   requestDeleteItemCategory,
+  requestDeleteBulkItemCategories,
 
   // #withDialog
   openDialog,
@@ -32,26 +37,31 @@ const ItemCategoryList = ({
   const [selectedRows, setSelectedRows] = useState([]);
   const [filter, setFilter] = useState({});
   const [deleteCategory, setDeleteCategory] = useState(false);
+  const [bulkDelete, setBulkDelete] = useState(false);
+  const [tableLoading, setTableLoading] = useState(false);
 
-  const {formatMessage} = useIntl();
+  const { formatMessage } = useIntl();
 
   useEffect(() => {
     id
-      ? changePageTitle(formatMessage({ id:'edit_category_details' }))
-      : changePageTitle(formatMessage({ id:'category_list' }));
+      ? changePageTitle(formatMessage({ id: 'edit_category_details' }))
+      : changePageTitle(formatMessage({ id: 'category_list' }));
   }, []);
 
-  const fetchCategories = useQuery(['items-categories-table', filter],
-    (key, query) => requestFetchItemCategories(query));
+  const fetchCategories = useQuery(
+    ['items-categories-table', filter],
+    (key, query) => requestFetchItemCategories(query)
+  );
 
-  const handleFilterChanged = useCallback(() => { 
-    
-  }, []);
+  const handleFilterChanged = useCallback(() => {}, []);
 
   // Handle selected rows change.
-  const handleSelectedRowsChange = useCallback((itemCategories) => {
-    setSelectedRows(itemCategories);
-  }, [setSelectedRows]);
+  const handleSelectedRowsChange = useCallback(
+    (itemCategories) => {
+      setSelectedRows(itemCategories);
+    },
+    [setSelectedRows]
+  );
 
   // Handle fetch data of accounts datatable.
   const handleFetchData = useCallback(({ pageIndex, pageSize, sortBy }) => {
@@ -65,44 +75,92 @@ const ItemCategoryList = ({
     });
   }, []);
 
-  const handleDeleteCategory = (itemCategory) => { setDeleteCategory(itemCategory); };
-  const handleCancelItemDelete = () => { setDeleteCategory(false) };
+  const handleDeleteCategory = (itemCategory) => {
+    setDeleteCategory(itemCategory);
+  };
+  const handleCancelItemDelete = () => {
+    setDeleteCategory(false);
+  };
 
   // Handle alert confirm delete item category.
   const handleConfirmItemDelete = () => {
-    requestDeleteItemCategory(deleteCategory.id).then(() => {
-      setDeleteCategory(false);
-      AppToaster.show({
-        message: formatMessage({
-          id: 'the_item_category_has_been_successfully_deleted'
-        }),
-        intent: Intent.SUCCESS,
+    requestDeleteItemCategory(deleteCategory.id)
+      .then(() => {
+        setDeleteCategory(false);
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_item_category_has_been_successfully_deleted',
+          }),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch(() => {
+        setDeleteCategory(false);
       });
-    }).catch(() => {
-      setDeleteCategory(false);
-    });
   };
 
   const handleEditCategory = (category) => {
     openDialog('item-category-form', { action: 'edit', id: category.id });
   };
 
+  // Handle itemCategories bulk delete.
+  const handleBulkDelete = useCallback(
+    (itemsCategoriesIds) => {
+      setBulkDelete(itemsCategoriesIds);
+    },
+    [setBulkDelete]
+  );
+
+  // handle confirm itemCategories bulk delete.
+  const handleConfirmBulkDelete = useCallback(() => {
+    requestDeleteBulkItemCategories(bulkDelete)
+      .then(() => {
+        setBulkDelete(false);
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_item_categories_has_been_successfully_deleted',
+          }),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((errors) => {
+        setBulkDelete(false);
+      });
+  }, [requestDeleteBulkItemCategories, bulkDelete]);
+
+
+  //Handel cancel itemCategories bulk delete.
+  const handleCancelBulkDelete =useCallback(()=>{
+    setBulkDelete(false)
+  },[])
+
+
+    // Calculates the data table selected rows count.
+    const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [selectedRows]);
+
+
   return (
     <DashboardInsider name={'item-category-list'}>
+      
       <ItemsCategoryActionsBar
+        selectedRows={selectedRows}
         onFilterChanged={handleFilterChanged}
-        selectedRows={selectedRows} />
+        onBulkDelete={handleBulkDelete}
+      />
 
       <ItemCategoriesDataTable
-        onSelectedRowsChange={handleSelectedRowsChange}
-        onFetchData={handleFetchData}
         onEditCategory={handleEditCategory}
-        onDeleteCategory={handleDeleteCategory} />
+        onFetchData={handleFetchData}
+        onSelectedRowsChange={handleSelectedRowsChange}
+        onDeleteCategory={handleDeleteCategory}
+        loading={tableLoading}
+        
+      />
 
       <Alert
         cancelButtonText={<T id={'cancel'} />}
         confirmButtonText={<T id={'delete'} />}
-        icon="trash"
+        icon='trash'
         intent={Intent.DANGER}
         isOpen={deleteCategory}
         onCancel={handleCancelItemDelete}
@@ -110,15 +168,33 @@ const ItemCategoryList = ({
       >
         <p>
           <FormattedHTMLMessage
-            id={'once_delete_this_item_category_you_will_able_to_restore_it'} />
+            id={'once_delete_this_item_category_you_will_able_to_restore_it'}
+          />
         </p>
       </Alert>
+
+      <Alert
+        cancelButtonText={<T id={'cancel'} />}
+        confirmButtonText={`${formatMessage({id:'delete'})} (${selectedRowsCount})`}
+        icon='trash'
+        intent={Intent.DANGER}
+        isOpen={bulkDelete}
+        onCancel={handleCancelBulkDelete}
+        onConfirm={handleConfirmBulkDelete}
+      >
+        <p>
+          <FormattedHTMLMessage
+            id={'once_delete_these_item_categories_you_will_not_able_restore_them'}
+          />
+        </p>
+      </Alert>
+
     </DashboardInsider>
   );
 };
 
 export default compose(
+  withItemCategoriesActions,
   withDashboardActions,
   withDialog,
-  withItemCategoriesActions,
 )(ItemCategoryList);
diff --git a/client/src/containers/Items/ItemCategoriesTable.js b/client/src/containers/Items/ItemCategoriesTable.js
index f73cef2d5..3e87c8a12 100644
--- a/client/src/containers/Items/ItemCategoriesTable.js
+++ b/client/src/containers/Items/ItemCategoriesTable.js
@@ -89,16 +89,26 @@ const ItemsCategoryList = ({
     onSelectedRowsChange && onSelectedRowsChange(selectedRows.map(s => s.original));
   }, [onSelectedRowsChange]);
 
+  const selectionColumn = useMemo(() => ({
+    minWidth: 42,
+    width: 42,
+    maxWidth: 42,
+  }), []);
+
+
   return (
-    <LoadingIndicator spinnerSize={30}>
+    <LoadingIndicator mount={false} >
       <DataTable
+        noInitialFetch={true}
         columns={columns}
         data={categoriesList}
         onFetchData={handelFetchData}
         manualSortBy={true}
-        selectionColumn={true}
+        selectionColumn={selectionColumn}
         expandable={true}
         onSelectedRowsChange={handleSelectedRowsChange}
+        treeGraph={true}
+        spinnerProps={{size:30}}
       />
     </LoadingIndicator>
   );
diff --git a/client/src/containers/Items/ItemsCategoryActionsBar.js b/client/src/containers/Items/ItemsCategoryActionsBar.js
index d69109409..40557d562 100644
--- a/client/src/containers/Items/ItemsCategoryActionsBar.js
+++ b/client/src/containers/Items/ItemsCategoryActionsBar.js
@@ -1,6 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
-import { compose } from 'utils';
+import React, { useCallback, useMemo,useState } from 'react';
 import {
   NavbarGroup,
   Button,
@@ -13,45 +11,56 @@ import {
 import classNames from 'classnames';
 import { connect } from 'react-redux';
 import { If } from 'components';
-
 import Icon from 'components/Icon';
-import DialogConnect from 'connectors/Dialog.connector';
+
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import FilterDropdown from 'components/FilterDropdown';
 
 import withResourceDetail from 'containers/Resources/withResourceDetails';
+import withDialog from 'connectors/Dialog.connector';
 import withDashboard from 'containers/Dashboard/withDashboard';
 
+import { compose } from 'utils';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 
 const ItemsCategoryActionsBar = ({
   // #withResourceDetail
-  resourceName = 'item_category',
   resourceFields,
   
   // #withDialog
   openDialog,
 
   // #ownProps
-  onDeleteCategory,
+  selectedRows=[],
   onFilterChanged,
-  selectedRows,
+  onBulkDelete
 }) => {
+
+  const [filterCount, setFilterCount] = useState(0);
+
   const onClickNewCategory = useCallback(() => {
     openDialog('item-category-form', {});
   }, [openDialog]);
 
-  const handleDeleteCategory = useCallback((category) => {
-    onDeleteCategory(selectedRows);
-  }, [selectedRows, onDeleteCategory]);
-
   const hasSelectedRows = useMemo(() => selectedRows.length > 0, [selectedRows]);
 
+  // const handleDeleteCategory = useCallback((category) => {
+  //   onDeleteCategory(selectedRows);
+  // }, [selectedRows, onDeleteCategory]);
+
+
   const filterDropdown = FilterDropdown({
     fields: resourceFields,
     onFilterChange: (filterConditions) => {
+      setFilterCount(filterConditions.length || 0);
       onFilterChanged && onFilterChanged(filterConditions);
     },
   });
+
+  const handelBulkDelete =useCallback(()=>{
+    onBulkDelete && onBulkDelete(selectedRows.map(r=>r.id));
+  },[onBulkDelete,selectedRows])
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -69,7 +78,7 @@ const ItemsCategoryActionsBar = ({
         >
           <Button
             className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={<T id={'filter'}/>}
+            text={ filterCount <= 0 ? <T id={'filter'}/> : `${filterCount} filters applied`}
             icon={<Icon icon='filter' />}
           />
         </Popover>
@@ -80,7 +89,7 @@ const ItemsCategoryActionsBar = ({
             icon={<Icon icon='trash' iconSize={15} />}
             text={<T id={'delete'}/>}
             intent={Intent.DANGER}
-            onClick={handleDeleteCategory}
+            onClick={handelBulkDelete}
           />
         </If>
 
@@ -107,7 +116,7 @@ const withItemsCategoriesActionsBar = connect(mapStateToProps);
 
 export default compose(
   withItemsCategoriesActionsBar,
-  DialogConnect,
+  withDialog,
   withDashboard,
   withResourceDetail(({ resourceFields }) => ({
     resourceFields,
diff --git a/client/src/containers/Items/withItemCategoriesActions.js b/client/src/containers/Items/withItemCategoriesActions.js
index 5f3808d00..901ba57c3 100644
--- a/client/src/containers/Items/withItemCategoriesActions.js
+++ b/client/src/containers/Items/withItemCategoriesActions.js
@@ -4,6 +4,8 @@ import {
   submitItemCategory,
   deleteItemCategory,
   editItemCategory,
+  deleteBulkItemCategories
+ 
 } from 'store/itemCategories/itemsCategory.actions';
 
 export const mapDispatchToProps = (dispatch) => ({
@@ -11,6 +13,7 @@ export const mapDispatchToProps = (dispatch) => ({
   requestFetchItemCategories: (query) => dispatch(fetchItemCategories({ query })),
   requestDeleteItemCategory: (id) => dispatch(deleteItemCategory(id)),
   requestEditItemCategory: (id, form) => dispatch(editItemCategory(id, form)),
+  requestDeleteBulkItemCategories:(ids)=>dispatch(deleteBulkItemCategories({ids}))
 });
 
 export default connect(null, mapDispatchToProps);
\ No newline at end of file
diff --git a/client/src/lang/en/index.js b/client/src/lang/en/index.js
index fcaaee646..d882c7fed 100644
--- a/client/src/lang/en/index.js
+++ b/client/src/lang/en/index.js
@@ -203,4 +203,15 @@ export default {
   'all': 'All',
   'once_delete_these_journalss_you_will_not_able_restore_them': 'Once you delete these journals, you won\'t be able to retrieve them later. Are you sure you want to delete them?',
   'journal_number_is_already_used': 'Journal number is already used.',
+  
+  the_item_categories_has_been_successfully_deleted:'The item categories has been successfully deleted',
+  once_delete_these_item_categories_you_will_not_able_restore_them:'Once you delete these item categories, you won\'t be able to retrieve them later. Are you sure you want to delete them?',
+  once_delete_this_exchange_rate_you_will_able_to_restore_it: `Once you delete this exchange rate, you won\'t be able to restore it later. Are you sure you want to delete?`,
+  once_delete_these_exchange_rates_you_will_not_able_restore_them:'Once you delete these item categories, you won\'t be able to retrieve them later. Are you sure you want to delete them?',
+  the_accounts_has_been_successfully_activated:'The Accounts has been Successfully activated',
+  are_sure_to_activate_this_accounts: 'Are you sure you want to activate this accounts? You will be able to inactivate it later',
+  are_sure_to_inactive_this_accounts: 'Are you sure you want to inactive this accounts? You will be able to activate it later',
+  the_accounts_has_been_successfully_inactivated: 'The accounts has been successfully inactivated.',
+
+
 };
diff --git a/client/src/static/json/icons.js b/client/src/static/json/icons.js
index 16c45eaba..acd60b1a1 100644
--- a/client/src/static/json/icons.js
+++ b/client/src/static/json/icons.js
@@ -132,5 +132,10 @@ export default {
   'eye-slash': {
     path: ['M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z'],
     viewBox: '0 0 640 512',
+  },
+  'multi-select':{
+   path:['M12,3.98H4c-0.55,0-1,0.45-1,1v1h8v5h1c0.55,0,1-0.45,1-1v-5C13,4.43,12.55,3.98,12,3.98z M15,0.98H7c-0.55,0-1,0.45-1,1v1h8v5h1c0.55,0,1-0.45,1-1v-5C16,1.43,15.55,0.98,15,0.98z M9,6.98H1c-0.55,0-1,0.45-1,1v5c0,0.55,0.45,1,1,1h8c0.55,0,1-0.45,1-1v-5C10,7.43,9.55,6.98,9,6.98z M8,11.98H2v-3h6V11.98z'],
+   viewBox: '0 0 16 16',
+
   }
 }
\ No newline at end of file
diff --git a/client/src/store/ExchangeRate/exchange.actions.js b/client/src/store/ExchangeRate/exchange.actions.js
index 8bf497b39..403a5bce8 100644
--- a/client/src/store/ExchangeRate/exchange.actions.js
+++ b/client/src/store/ExchangeRate/exchange.actions.js
@@ -63,3 +63,19 @@ export const editExchangeRate = (id, form) => {
         });
     });
 };
+
+
+
+export const deleteBulkExchangeRates = ({ ids }) => {
+  return dispatch => new Promise((resolve, reject) => {
+    ApiService.delete(`exchange_rates/bulk`, { params: { ids }}).then((response) => {
+      dispatch({
+        type: t.EXCHANGE_RATES_BULK_DELETE,
+        payload: { ids }
+      });
+      resolve(response);
+    }).catch((error) => {
+      reject(error);
+    });
+  });
+};
\ No newline at end of file
diff --git a/client/src/store/ExchangeRate/exchange.reducer.js b/client/src/store/ExchangeRate/exchange.reducer.js
index efcc2c4ae..a6e78a85f 100644
--- a/client/src/store/ExchangeRate/exchange.reducer.js
+++ b/client/src/store/ExchangeRate/exchange.reducer.js
@@ -20,4 +20,18 @@ export default createReducer(initialState, {
   [t.EXCHANGE_RATE_TABLE_LOADING]: (state, action) => {
     state.loading = action.loading;
   },
+
+  [t.EXCHANGE_RATES_BULK_DELETE]:(state,action)=>{
+
+    const {ids} =action.payload;
+    const {exchange_rate} = {...state.exchangeRates};
+    ids.forEach((id)=>{
+      if(typeof exchange_rate[id] !=='undefined'){
+        delete exchange_rate[id]
+      }
+    });
+    state.exchangeRates =exchange_rate
+  }
+
 });
+
diff --git a/client/src/store/ExchangeRate/exchange.type.js b/client/src/store/ExchangeRate/exchange.type.js
index 7e07ab04b..13b237388 100644
--- a/client/src/store/ExchangeRate/exchange.type.js
+++ b/client/src/store/ExchangeRate/exchange.type.js
@@ -4,5 +4,6 @@ export default {
   EXCHANGE_RATE_LIST_SET: 'EXCHANGE_RATE_LIST_SET',
   CLEAR_EXCHANGE_RATE_FORM_ERRORS: 'CLEAR_EXCHANGE_RATE_FORM_ERRORS',
   ExchangeRates_TABLE_QUERIES_ADD: 'ExchangeRates_TABLE_QUERIES_ADD',
-  EXCHANGE_RATE_TABLE_LOADING:'EXCHANGE_RATE_TABLE_LOADING'
+  EXCHANGE_RATE_TABLE_LOADING:'EXCHANGE_RATE_TABLE_LOADING',
+  EXCHANGE_RATES_BULK_DELETE: 'EXCHANGE_RATES_BULK_DELETE',
 };
diff --git a/client/src/store/accounts/accounts.actions.js b/client/src/store/accounts/accounts.actions.js
index 09ac0f07b..6847186d6 100644
--- a/client/src/store/accounts/accounts.actions.js
+++ b/client/src/store/accounts/accounts.actions.js
@@ -185,6 +185,39 @@ export const inactiveAccount = ({ id }) => {
   return dispatch => ApiService.post(`accounts/${id}/inactive`);
 };
 
+export const bulkActivateAccounts =({ids})=>{
+  
+  return dispatch => new Promise((resolve, reject) => {
+ 
+    ApiService.post(`accounts/bulk/activate`, null, { params: { ids }}).then((response) => {
+      dispatch({        
+        type: t.BULK_ACTIVATE_ACCOUNTS,
+        payload: { ids }
+      });
+      resolve(response);
+    }).catch((error) => {
+      reject(error);
+    });
+  });
+}
+
+export const bulkInactiveAccounts =({ids})=>{
+  
+  return dispatch => new Promise((resolve, reject) => {
+ 
+    ApiService.post(`accounts/bulk/inactivate`, null, { params: { ids }}).then((response) => {
+      dispatch({        
+        type: t.BULK_INACTIVATE_ACCOUNTS,
+        payload: { ids }
+      });
+      resolve(response);
+    }).catch((error) => {
+      reject(error);
+    });
+  });
+}
+
+
 export const deleteAccount = ({ id }) => {
   return dispatch => new Promise((resolve, reject) => {
     ApiService.delete(`accounts/${id}`).then((response) => {
diff --git a/client/src/store/accounts/accounts.types.js b/client/src/store/accounts/accounts.types.js
index bffc6fabb..72df55cba 100644
--- a/client/src/store/accounts/accounts.types.js
+++ b/client/src/store/accounts/accounts.types.js
@@ -20,5 +20,8 @@ export default {
 
   ACCOUNT_ERRORS_SET: 'ACCOUNT_ERRORS_SET',
   ACCOUNT_ERRORS_CLEAR: 'ACCOUNT_ERRORS_CLEAR',
-  ACCOUNTS_BULK_DELETE: 'ACCOUNTS_BULK_DELETE'
+  ACCOUNTS_BULK_DELETE: 'ACCOUNTS_BULK_DELETE',
+  BULK_ACTIVATE_ACCOUNTS:'BULK_ACTIVATE_ACCOUNTS',
+  BULK_INACTIVATE_ACCOUNTS:'BULK_INACTIVATE_ACCOUNTS'
+  
 };
\ No newline at end of file
diff --git a/client/src/store/itemCategories/itemsCategory.actions.js b/client/src/store/itemCategories/itemsCategory.actions.js
index b12d63f1c..9a296f8ef 100644
--- a/client/src/store/itemCategories/itemsCategory.actions.js
+++ b/client/src/store/itemCategories/itemsCategory.actions.js
@@ -79,3 +79,17 @@ export const deleteItemCategory = (id) => {
         });
     });
 };
+
+export const deleteBulkItemCategories = ({ ids }) => {
+  return dispatch => new Promise((resolve, reject) => {
+    ApiService.delete(`item_categories/bulk`, { params: { ids }}).then((response) => {
+      dispatch({
+        type: t.ITEM_CATEGORIES_BULK_DELETE,
+        payload: { ids }
+      });
+      resolve(response);
+    }).catch((error) => {
+      reject(error);
+    });
+  });
+};
\ No newline at end of file
diff --git a/client/src/store/itemCategories/itemsCategory.reducer.js b/client/src/store/itemCategories/itemsCategory.reducer.js
index 7d5f3f25c..306d181c2 100644
--- a/client/src/store/itemCategories/itemsCategory.reducer.js
+++ b/client/src/store/itemCategories/itemsCategory.reducer.js
@@ -35,6 +35,17 @@ export default createReducer(initialState, {
     const { loading } = action.payload;
     state.loading = !!loading;
   },
+  [t.ITEM_CATEGORIES_BULK_DELETE]:(state,action)=>{
+    const {ids} =action.payload;
+    const {categories} = {...state.categories};
+    ids.forEach((id)=>{
+
+      if(typeof categories[id] !=='undefined'){
+        delete categories[id]
+      }
+    });
+    state.categories =categories
+  }
 });
 
 export const getCategoryId = (state, id) => {
diff --git a/client/src/store/itemCategories/itemsCategory.type.js b/client/src/store/itemCategories/itemsCategory.type.js
index 45c2bd65a..900e1106b 100644
--- a/client/src/store/itemCategories/itemsCategory.type.js
+++ b/client/src/store/itemCategories/itemsCategory.type.js
@@ -2,5 +2,7 @@ export default {
   ITEMS_CATEGORY_LIST_SET: 'ITEMS_CATEGORY_LIST_SET',
   ITEMS_CATEGORY_DATA_TABLE: 'ITEMS_CATEGORY_DATA_TABLE',
   CATEGORY_DELETE: 'CATEGORY_DELETE',
-  ITEM_CATEGORIES_TABLE_LOADING: 'ITEM_CATEGORIES_TABLE_LOADING'
+  ITEM_CATEGORIES_TABLE_LOADING: 'ITEM_CATEGORIES_TABLE_LOADING',
+  ITEM_CATEGORIES_BULK_DELETE:'ITEM_CATEGORIES_BULK_DELETE'
+
 };