From e398b8c239f22e3f163fffa7e16220696359b6d3 Mon Sep 17 00:00:00 2001
From: elforjani3 <elforjani3@gmail.com>
Date: Mon, 7 Dec 2020 22:37:15 +0200
Subject: [PATCH] fix: View.

---
 .../Dashboard/DashboardActionViewsList.js     | 14 ++--
 .../Accounting/ManualJournalActionsBar.js     | 46 ++++++------
 .../Accounting/ManualJournalsDataTable.js     | 15 ++--
 .../Accounting/ManualJournalsList.js          |  3 +-
 .../Accounting/ManualJournalsViewTabs.js      | 44 ++++--------
 .../containers/Accounts/AccountsViewsTabs.js  | 23 +++---
 .../src/containers/Accounts/withAccounts.js   | 15 ++--
 .../Accounts/withAccountsTableActions.js      | 43 ++++++-----
 .../containers/Expenses/ExpenseActionsBar.js  | 42 +++++------
 .../containers/Expenses/ExpenseViewTabs.js    | 45 ++++--------
 .../src/containers/Items/ItemsActionsBar.js   | 60 +++++-----------
 client/src/containers/Items/ItemsDataTable.js | 15 ++--
 client/src/containers/Items/ItemsList.js      | 51 ++++++-------
 client/src/containers/Items/ItemsViewsTabs.js | 72 +++++--------------
 .../src/store/accounts/accounts.selectors.js  | 25 +++++--
 client/src/store/accounts/accounts.types.js   |  6 +-
 client/src/store/expenses/expenses.actions.js | 14 ++--
 client/src/store/items/items.actions.js       | 16 ++---
 client/src/store/items/items.selectors.js     | 50 ++++++-------
 .../manualJournals/manualJournals.actions.js  | 16 +++--
 20 files changed, 273 insertions(+), 342 deletions(-)

diff --git a/client/src/components/Dashboard/DashboardActionViewsList.js b/client/src/components/Dashboard/DashboardActionViewsList.js
index 120e78c87..17a3f0d98 100644
--- a/client/src/components/Dashboard/DashboardActionViewsList.js
+++ b/client/src/components/Dashboard/DashboardActionViewsList.js
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import classNames from 'classnames';
 import {
   Button,
@@ -15,15 +15,21 @@ import { Icon } from 'components';
 
 export default function DashboardActionViewsList({
   resourceName,
-  views
+  views,
+  onChange,
 }) {
   const history = useHistory();
 
   const handleClickViewItem = (view) => {
-    history.push(view ? `/${resourceName}/${view.id}/custom_view` : '/accounts');
+    history.push(
+      view ? `/${resourceName}/${view.id}/custom_view` : '/accounts',
+    );
+    onChange && onChange(view);
   };
   const viewsMenuItems = views.map((view) => {
-    return <MenuItem onClick={() => handleClickViewItem(view)} text={view.name} />;
+    return (
+      <MenuItem onClick={() => handleClickViewItem(view)} text={view.name} />
+    );
   });
 
   return (
diff --git a/client/src/containers/Accounting/ManualJournalActionsBar.js b/client/src/containers/Accounting/ManualJournalActionsBar.js
index bfd49572a..ca0070fa7 100644
--- a/client/src/containers/Accounting/ManualJournalActionsBar.js
+++ b/client/src/containers/Accounting/ManualJournalActionsBar.js
@@ -21,7 +21,7 @@ import FilterDropdown from 'components/FilterDropdown';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 
-import { If } from 'components';
+import { If, DashboardActionViewsList } from 'components';
 
 import withResourceDetail from 'containers/Resources/withResourceDetails';
 import withManualJournals from 'containers/Accounting/withManualJournals';
@@ -29,9 +29,11 @@ import withManualJournalsActions from 'containers/Accounting/withManualJournalsA
 
 import { compose } from 'utils';
 
+/**
+ * Manual journal actions bar.
+ */
 function ManualJournalActionsBar({
   // #withResourceDetail
-  resourceName = 'manual_journals',
   resourceFields,
 
   // #withManualJournals
@@ -39,21 +41,15 @@ function ManualJournalActionsBar({
 
   // #withManualJournalsActions
   addManualJournalsTableQueries,
+  changeManualJournalCurrentView,
 
   onFilterChanged,
   selectedRows = [],
   onBulkDelete,
 }) {
-  const { path } = useRouteMatch();
   const [filterCount, setFilterCount] = useState(0);
   const history = useHistory();
 
-  const viewsMenuItems = manualJournalsViews.map((view) => {
-    return (
-      <MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />
-    );
-  });
-
   const onClickNewManualJournal = useCallback(() => {
     history.push('/make-journal-entry');
   }, [history]);
@@ -73,32 +69,30 @@ function ManualJournalActionsBar({
       onFilterChanged && onFilterChanged(filterConditions);
     },
   });
-  const hasSelectedRows = useMemo(
-    () => selectedRows.length > 0, 
-    [selectedRows]);
+  const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
+    selectedRows,
+  ]);
 
   // Handle delete button click.
   const handleBulkDelete = useCallback(() => {
     onBulkDelete && onBulkDelete(selectedRows.map((r) => r.id));
   }, [onBulkDelete, selectedRows]);
 
+  const handleTabChange = (viewId) => {
+    changeManualJournalCurrentView(viewId.id || -1);
+    addManualJournalsTableQueries({
+      custom_view_id: viewId.id || null,
+    });
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Popover
-          content={<Menu>{viewsMenuItems}</Menu>}
-          minimal={true}
-          interactionKind={PopoverInteractionKind.HOVER}
-          position={Position.BOTTOM_LEFT}
-        >
-          <Button
-            className={classNames(Classes.MINIMAL, 'button--table-views')}
-            icon={<Icon icon="table-16" iconSize={16} />}
-            text={<T id={'table_views'} />}
-            rightIcon={'caret-down'}
-          />
-        </Popover>
-
+        <DashboardActionViewsList
+          resourceName={'manual-journals'}
+          views={manualJournalsViews}
+          onChange={handleTabChange}
+        />
         <NavbarDivider />
 
         <Button
diff --git a/client/src/containers/Accounting/ManualJournalsDataTable.js b/client/src/containers/Accounting/ManualJournalsDataTable.js
index c0e744e1e..5a85e56d0 100644
--- a/client/src/containers/Accounting/ManualJournalsDataTable.js
+++ b/client/src/containers/Accounting/ManualJournalsDataTable.js
@@ -26,7 +26,11 @@ import { CLASSES } from 'common/classes';
 import { useIsValuePassed } from 'hooks';
 
 import ManualJournalsEmptyStatus from './ManualJournalsEmptyStatus';
-import { AmountPopoverContent, NoteAccessor, StatusAccessor } from './components';
+import {
+  AmountPopoverContent,
+  NoteAccessor,
+  StatusAccessor,
+} from './components';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withManualJournals from 'containers/Accounting/withManualJournals';
@@ -34,8 +38,6 @@ import withManualJournalsActions from 'containers/Accounting/withManualJournalsA
 
 import { compose, saveInvoke } from 'utils';
 
-
-
 function ManualJournalsDataTable({
   // #withManualJournals
   manualJournalsCurrentPage,
@@ -52,6 +54,7 @@ function ManualJournalsDataTable({
   onDeleteJournal,
   onPublishJournal,
   onSelectedRowsChange,
+  manualJournalViewLoading,
 }) {
   const { custom_view_id: customViewId } = useParams();
   const { formatMessage } = useIntl();
@@ -230,7 +233,11 @@ function ManualJournalsDataTable({
 
   return (
     <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
-      <LoadingIndicator loading={manualJournalsLoading && !isLoadedBefore}>
+      <LoadingIndicator
+        loading={
+          (manualJournalsLoading && !isLoadedBefore) || manualJournalViewLoading
+        }
+      >
         <Choose>
           <Choose.When condition={showEmptyStatus}>
             <ManualJournalsEmptyStatus />
diff --git a/client/src/containers/Accounting/ManualJournalsList.js b/client/src/containers/Accounting/ManualJournalsList.js
index 9939d5626..5264ee1db 100644
--- a/client/src/containers/Accounting/ManualJournalsList.js
+++ b/client/src/containers/Accounting/ManualJournalsList.js
@@ -151,7 +151,7 @@ function ManualJournalsTable({
   );
 
   // Handle filter change to re-fetch data-table.
-  const handleFilterChanged = useCallback(() => {}, [fetchManualJournals]);
+  const handleFilterChanged = useCallback(() => {}, []);
 
   // Handle view change to re-fetch data table.
   // const handleViewChanged = useCallback(() => {
@@ -243,6 +243,7 @@ function ManualJournalsTable({
               onEditJournal={handleEditJournal}
               onPublishJournal={handlePublishMaunalJournal}
               onSelectedRowsChange={handleSelectedRowsChange}
+              manualJournalViewLoading={fetchManualJournals.isFetching}
             />
           </Route>
         </Switch>
diff --git a/client/src/containers/Accounting/ManualJournalsViewTabs.js b/client/src/containers/Accounting/ManualJournalsViewTabs.js
index 120e55205..0ad70a44b 100644
--- a/client/src/containers/Accounting/ManualJournalsViewTabs.js
+++ b/client/src/containers/Accounting/ManualJournalsViewTabs.js
@@ -1,15 +1,10 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect } from 'react';
 import { useHistory } from 'react-router';
-import {
-  Alignment,
-  Navbar,
-  NavbarGroup,
-} from '@blueprintjs/core';
+import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
 import { useParams, withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
-import { pick, debounce } from 'lodash';
+import { pick } from 'lodash';
 
-import { useUpdateEffect } from 'hooks';
 import { DashboardViewsTabs, Icon } from 'components';
 
 import withManualJournals from './withManualJournals';
@@ -19,6 +14,9 @@ import withViewDetail from 'containers/Views/withViewDetails';
 
 import { compose } from 'utils';
 
+/**
+ * Manual journal views tabs.
+ */
 function ManualJournalsViewTabs({
   // #withViewDetail
   viewId,
@@ -38,50 +36,32 @@ function ManualJournalsViewTabs({
   // #ownProps
   onViewChanged,
 }) {
-  const history = useHistory();
   const { custom_view_id: customViewId } = useParams();
 
   useEffect(() => {
-    changeManualJournalCurrentView(customViewId || -1);
     setTopbarEditView(customViewId);
     changePageSubtitle(customViewId && viewItem ? viewItem.name : '');
-
-    addManualJournalsTableQueries({
-      custom_view_id: customViewId,
-    });
-  }, [customViewId, addManualJournalsTableQueries]);
-
-  useUpdateEffect(() => {
-    onViewChanged && onViewChanged(customViewId);
   }, [customViewId]);
 
   const tabs = manualJournalsViews.map((view) => ({
     ...pick(view, ['name', 'id']),
   }));
 
-  const debounceChangeHistory = useRef(
-    debounce((toUrl) => {
-      history.push(toUrl);
-    }, 250),
-  );
-
-  const handleClickNewView = () => {
-    setTopbarEditView(null);
-    history.push('/custom_views/manual_journals/new');
-  };
+  const handleClickNewView = () => {};
 
   const handleTabChange = (viewId) => {
-    const toPath = viewId ? `${viewId}/custom_view` : '';
-    debounceChangeHistory.current(`/manual-journals/${toPath}`);
-    setTopbarEditView(viewId);
+    changeManualJournalCurrentView(viewId || -1);
+    addManualJournalsTableQueries({
+      custom_view_id: viewId || null,
+    });
   };
 
   return (
     <Navbar className="navbar--dashboard-views">
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
+          resourceName={'manual-journals'}
           initialViewId={customViewId}
-          baseUrl={'/manual-journals'}
           tabs={tabs}
           onChange={handleTabChange}
           onNewViewTabClick={handleClickNewView}
diff --git a/client/src/containers/Accounts/AccountsViewsTabs.js b/client/src/containers/Accounts/AccountsViewsTabs.js
index 048725e49..023f26079 100644
--- a/client/src/containers/Accounts/AccountsViewsTabs.js
+++ b/client/src/containers/Accounts/AccountsViewsTabs.js
@@ -38,23 +38,8 @@ function AccountsViewsTabs({
   const { custom_view_id: customViewId = null } = useParams();
 
   useEffect(() => {
-    changeAccountsCurrentView(customViewId || -1);
     setTopbarEditView(customViewId);
     changePageSubtitle(customViewId && viewItem ? viewItem.name : '');
-
-    addAccountsTableQueries({
-      custom_view_id: customViewId,
-    });
-
-    return () => {
-      setTopbarEditView(null);
-      changePageSubtitle('');
-      changeAccountsCurrentView(null);
-    };
-  }, [customViewId]);
-
-  useUpdateEffect(() => {
-    onViewChanged && onViewChanged(customViewId);
   }, [customViewId]);
 
   // Handle click a new view tab.
@@ -63,6 +48,13 @@ function AccountsViewsTabs({
     history.push('/custom_views/accounts/new');
   };
 
+  const handleTabChange = (viewId) => {
+    changeAccountsCurrentView(viewId || -1);
+    // addAccountsTableQueries({
+    //   custom_view_id: viewId || null,
+    // });
+  };
+
   const tabs = accountsViews.map((view) => ({
     ...pick(view, ['name', 'id']),
   }));
@@ -72,6 +64,7 @@ function AccountsViewsTabs({
         <DashboardViewsTabs
           initialViewId={customViewId}
           resourceName={'accounts'}
+          onChange={handleTabChange}
           tabs={tabs}
         />
       </NavbarGroup>
diff --git a/client/src/containers/Accounts/withAccounts.js b/client/src/containers/Accounts/withAccounts.js
index 711889b8a..467a9c62a 100644
--- a/client/src/containers/Accounts/withAccounts.js
+++ b/client/src/containers/Accounts/withAccounts.js
@@ -1,27 +1,30 @@
 import { connect } from 'react-redux';
 import {
-  getAccountsItems, getAccountsListFactory,
+  getAccountsItems,
+  getAccountsListFactory,
+  getAccountsTableQuery,
 } from 'store/accounts/accounts.selectors';
-import {
-  getResourceViews,
-} from 'store/customViews/customViews.selectors';
+import { getResourceViews } from 'store/customViews/customViews.selectors';
 
 export default (mapState) => {
   const getAccountsList = getAccountsListFactory();
 
   const mapStateToProps = (state, props) => {
+    const query = getAccountsTableQuery(state, props);
+
     const mapped = {
       accountsViews: getResourceViews(state, props, 'accounts'),
       accountsTable: getAccountsItems(state, props),
       accountsList: getAccountsList(state, props),
       accountsTypes: state.accounts.accountsTypes,
-    
+
+      // accountsTableQuery: query,
       accountsTableQuery: state.accounts.tableQuery,
       accountsLoading: state.accounts.loading,
       accountErrors: state.accounts.errors,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };
-  
+
   return connect(mapStateToProps);
 };
diff --git a/client/src/containers/Accounts/withAccountsTableActions.js b/client/src/containers/Accounts/withAccountsTableActions.js
index cab67619a..d82b020e4 100644
--- a/client/src/containers/Accounts/withAccountsTableActions.js
+++ b/client/src/containers/Accounts/withAccountsTableActions.js
@@ -1,24 +1,31 @@
 import { connect } from 'react-redux';
 import t from 'store/types';
-import {
-  fetchAccountsTable,
-} from 'store/accounts/accounts.actions';
+import { fetchAccountsTable } from 'store/accounts/accounts.actions';
 
 const mapActionsToProps = (dispatch) => ({
-  requestFetchAccountsTable: (query = {}) => dispatch(fetchAccountsTable({ query: { ...query } })),
-  changeAccountsCurrentView: (id) => dispatch({
-    type: t.ACCOUNTS_SET_CURRENT_VIEW,
-    currentViewId: parseInt(id, 10),
-  }),
-  setAccountsTableQuery: (key, value) => dispatch({
-    type: 'ACCOUNTS_TABLE_QUERY_SET', key, value,
-  }),
-  addAccountsTableQueries: (queries) => dispatch({
-    type: 'ACCOUNTS_TABLE_QUERIES_ADD', queries,
-  }),
-  setSelectedRowsAccounts: (ids) => dispatch({
-    type: t.ACCOUNTS_SELECTED_ROWS_SET, payload: { ids },
-  }),
+  requestFetchAccountsTable: (query = {}) =>
+    dispatch(fetchAccountsTable({ query: { ...query } })),
+  changeAccountsCurrentView: (id) =>
+    dispatch({
+      type: t.ACCOUNTS_SET_CURRENT_VIEW,
+      currentViewId: parseInt(id, 10),
+    }),
+  setAccountsTableQuery: (key, value) =>
+    dispatch({
+      type: t.ACCOUNTS_TABLE_QUERY_SET,
+      key,
+      value,
+    }),
+  addAccountsTableQueries: (queries) =>
+    dispatch({
+      type: t.ACCOUNTS_TABLE_QUERIES_ADD,
+      queries,
+    }),
+  setSelectedRowsAccounts: (ids) =>
+    dispatch({
+      type: t.ACCOUNTS_SELECTED_ROWS_SET,
+      payload: { ids },
+    }),
 });
 
-export default connect(null, mapActionsToProps);
\ No newline at end of file
+export default connect(null, mapActionsToProps);
diff --git a/client/src/containers/Expenses/ExpenseActionsBar.js b/client/src/containers/Expenses/ExpenseActionsBar.js
index ec33b794c..69a11a55a 100644
--- a/client/src/containers/Expenses/ExpenseActionsBar.js
+++ b/client/src/containers/Expenses/ExpenseActionsBar.js
@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo, useCallback, useState } from 'react';
 import Icon from 'components/Icon';
 import {
   Button,
@@ -21,7 +21,7 @@ import FilterDropdown from 'components/FilterDropdown';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 
-import { If } from 'components';
+import { If, DashboardActionViewsList } from 'components';
 
 import withResourceDetail from 'containers/Resources/withResourceDetails';
 import withExpenses from 'containers/Expenses/withExpenses';
@@ -29,6 +29,9 @@ import withExpensesActions from 'containers/Expenses/withExpensesActions';
 
 import { compose } from 'utils';
 
+/**
+ * Expenses actions bar.
+ */
 function ExpensesActionsBar({
   // #withResourceDetail
   resourceFields,
@@ -38,18 +41,15 @@ function ExpensesActionsBar({
 
   //#withExpensesActions
   addExpensesTableQueries,
+  changeExpensesView,
 
   onFilterChanged,
   selectedRows,
   onBulkDelete,
 }) {
-  const { path } = useRouteMatch();
+  const [filterCount, setFilterCount] = useState(0);
   const history = useHistory();
 
-  const viewsMenuItems = expensesViews.map((view) => (
-    <MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />
-  ));
-
   const onClickNewExpense = useCallback(() => {
     history.push('/expenses/new');
   }, [history]);
@@ -78,22 +78,20 @@ function ExpensesActionsBar({
     onBulkDelete && onBulkDelete(selectedRows.map((r) => r.id));
   }, [onBulkDelete, selectedRows]);
 
+  const handleTabChange = (viewId) => {
+    changeExpensesView(viewId.id || -1);
+    addExpensesTableQueries({
+      custom_view_id: viewId.id || null,
+    });
+  };
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Popover
-          content={<Menu>{viewsMenuItems}</Menu>}
-          minimal={true}
-          interactionKind={PopoverInteractionKind.HOVER}
-          position={Position.BOTTOM_LEFT}
-        >
-          <Button
-            className={classNames(Classes.MINIMAL, 'button--table-views')}
-            icon={<Icon icon="table-16" iconSize={16} />}
-            text={<T id={'table_views'} />}
-            rightIcon={'caret-down'}
-          />
-        </Popover>
+        <DashboardActionViewsList
+          resourceName={'expenses'}
+          views={expensesViews}
+          onChange={handleTabChange}
+        />
         <NavbarDivider />
         <Button
           className={Classes.MINIMAL}
@@ -108,7 +106,9 @@ function ExpensesActionsBar({
           position={Position.BOTTOM_LEFT}
         >
           <Button
-            className={classNames(Classes.MINIMAL, 'button--filter')}
+            className={classNames(Classes.MINIMAL, 'button--filter', {
+              'has-active-filters': filterCount > 0,
+            })}
             text="Filter"
             icon={<Icon icon="filter-16" iconSize={16} />}
           />
diff --git a/client/src/containers/Expenses/ExpenseViewTabs.js b/client/src/containers/Expenses/ExpenseViewTabs.js
index 9998d00a5..4de7eb2d9 100644
--- a/client/src/containers/Expenses/ExpenseViewTabs.js
+++ b/client/src/containers/Expenses/ExpenseViewTabs.js
@@ -3,10 +3,9 @@ import { useHistory } from 'react-router';
 import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
 import { useParams, withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
-import { pick, debounce } from 'lodash';
+import { pick } from 'lodash';
 
 import { DashboardViewsTabs } from 'components';
-import { useUpdateEffect } from 'hooks';
 
 import withExpenses from './withExpenses';
 import withExpensesActions from './withExpensesActions';
@@ -15,6 +14,9 @@ import withViewDetails from 'containers/Views/withViewDetails';
 
 import { compose } from 'utils';
 
+/**
+ * Expesne views tabs.
+ */
 function ExpenseViewTabs({
   // #withExpenses
   expensesViews,
@@ -38,55 +40,32 @@ function ExpenseViewTabs({
   const { custom_view_id: customViewId = null } = useParams();
 
   useEffect(() => {
-    changeExpensesView(customViewId || -1);
     setTopbarEditView(customViewId);
     changePageSubtitle(customViewId && viewItem ? viewItem.name : '');
-
-    addExpensesTableQueries({
-      custom_view_id: customViewId,
-    });
-    return () => {
-      setTopbarEditView(null);
-      changePageSubtitle('');
-      changeExpensesView(null);
-    };
-  }, [customViewId, addExpensesTableQueries, changeExpensesView]);
-
-  useUpdateEffect(() => {
-    onViewChanged && onViewChanged(customViewId);
   }, [customViewId]);
 
-  const debounceChangeHistory = useRef(
-    debounce((toUrl) => {
-      history.push(toUrl);
-    }, 250),
-  );
-
-  const handleTabsChange = (viewId) => {
-    const toPath = viewId ? `${viewId}/custom_view` : '';
-    debounceChangeHistory.current(`/expenses-list/${toPath}`);
-    setTopbarEditView(viewId);
+  const handleTabChange = (viewId) => {
+    changeExpensesView(viewId || -1);
+    addExpensesTableQueries({
+      custom_view_id: viewId || null,
+    });
   };
-
   const tabs = expensesViews.map((view) => ({
     ...pick(view, ['name', 'id']),
   }));
 
   // Handle click a new view tab.
-  const handleClickNewView = () => {
-    setTopbarEditView(null);
-    history.push('/custom_views/expenses/new');
-  };
+  const handleClickNewView = () => {};
 
   return (
     <Navbar className={'navbar--dashboard-views'}>
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
           initialViewId={customViewId}
-          baseUrl={'/expenses-list'}
+          resourceName={'expenses'}
           tabs={tabs}
           onNewViewTabClick={handleClickNewView}
-          onChange={handleTabsChange}
+          onChange={handleTabChange}
         />
       </NavbarGroup>
     </Navbar>
diff --git a/client/src/containers/Items/ItemsActionsBar.js b/client/src/containers/Items/ItemsActionsBar.js
index 387986025..2e4897c37 100644
--- a/client/src/containers/Items/ItemsActionsBar.js
+++ b/client/src/containers/Items/ItemsActionsBar.js
@@ -1,5 +1,5 @@
-import React, { useMemo, useCallback, useState } from 'react';
-import { useRouteMatch, useHistory } from 'react-router-dom';
+import React, { useMemo, useCallback, useState, useEffect } from 'react';
+import { useRouteMatch, useHistory, useParams } from 'react-router-dom';
 import classNames from 'classnames';
 import {
   MenuItem,
@@ -14,13 +14,11 @@ import {
   Intent,
 } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
-
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import Icon from 'components/Icon';
 import FilterDropdown from 'components/FilterDropdown';
-import { If } from 'components';
+import { If, DashboardActionViewsList } from 'components';
 
-import withDialogActions from 'containers/Dialog/withDialogActions';
 import withResourceDetail from 'containers/Resources/withResourceDetails';
 import withItems from 'containers/Items/withItems';
 import withItemsActions from './withItemsActions';
@@ -29,9 +27,7 @@ import { compose } from 'utils';
 import { connect } from 'react-redux';
 
 const ItemsActionsBar = ({
-  openDialog,
-
-  resourceName = 'items',
+  // #withResourceDetail
   resourceFields,
 
   // #withItems
@@ -39,18 +35,15 @@ const ItemsActionsBar = ({
 
   //#withItemActions
   addItemsTableQueries,
+  changeItemsCurrentView,
 
   onFilterChanged,
   selectedRows = [],
   onBulkDelete,
 }) => {
-  const { path } = useRouteMatch();
+  const { formatMessage } = useIntl();
   const history = useHistory();
   const [filterCount, setFilterCount] = useState(0);
-  const { formatMessage } = useIntl();
-  const viewsMenuItems = itemsViews.map((view) => (
-    <MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />
-  ));
 
   const onClickNewItem = useCallback(() => {
     history.push('/items/new');
@@ -60,22 +53,13 @@ const ItemsActionsBar = ({
     selectedRows,
   ]);
 
-  // name
-  // const filterDropdown = FilterDropdown({
-  //   fields: resourceFields,
-  //   onFilterChange: (filterConditions) => {
-  //     setFilterCount(filterConditions.length);
-  //     onFilterChanged && onFilterChanged(filterConditions);
-  //   },
-  // });
-
   const filterDropdown = FilterDropdown({
+    fields: resourceFields,
     initialCondition: {
       fieldKey: 'name',
       compatator: 'contains',
       value: '',
     },
-    fields: resourceFields,
     onFilterChange: (filterConditions) => {
       addItemsTableQueries({
         filter_roles: filterConditions || '',
@@ -84,30 +68,25 @@ const ItemsActionsBar = ({
     },
   });
 
-  // const onClickNewCategory = useCallback(() => {
-  //   openDialog('item-form', {});
-  // }, [openDialog]);
-
   const handleBulkDelete = useCallback(() => {
     onBulkDelete && onBulkDelete(selectedRows.map((r) => r.id));
   }, [onBulkDelete, selectedRows]);
 
+  const handleTabChange = (viewId) => {
+    changeItemsCurrentView(viewId.id || -1);
+    addItemsTableQueries({
+      custom_view_id: viewId.id || null,
+    });
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Popover
-          content={<Menu>{viewsMenuItems}</Menu>}
-          minimal={true}
-          interactionKind={PopoverInteractionKind.HOVER}
-          position={Position.BOTTOM_LEFT}
-        >
-          <Button
-            className={classNames(Classes.MINIMAL, 'button--table-views')}
-            icon={<Icon icon="table-16" iconSize={16} />}
-            text={<T id={'table_views'} />}
-            rightIcon={'caret-down'}
-          />
-        </Popover>
+        <DashboardActionViewsList
+          resourceName={'items'}
+          views={itemsViews}
+          onChange={handleTabChange}
+        />
 
         <NavbarDivider />
 
@@ -170,7 +149,6 @@ const withItemsActionsBar = connect(mapStateToProps);
 
 export default compose(
   withItemsActionsBar,
-  withDialogActions,
   withItems(({ itemsViews }) => ({
     itemsViews,
   })),
diff --git a/client/src/containers/Items/ItemsDataTable.js b/client/src/containers/Items/ItemsDataTable.js
index 948d99979..3594cb3d3 100644
--- a/client/src/containers/Items/ItemsDataTable.js
+++ b/client/src/containers/Items/ItemsDataTable.js
@@ -37,6 +37,7 @@ function ItemsDataTable({
   onEditItem,
   onDeleteItem,
   onSelectedRowsChange,
+  itemsViewLoading,
 }) {
   const { formatMessage } = useIntl();
   const isLoadedBefore = useIsValuePassed(itemsTableLoading, false);
@@ -148,11 +149,11 @@ function ItemsDataTable({
       {
         Header: formatMessage({ id: 'cost_price' }),
         accessor: (row) =>
-        !isBlank(row.sell_price) ? (
-          <Money amount={row.cost_price} currency={'USD'} />
-        ) : (
-          ''
-        ),
+          !isBlank(row.sell_price) ? (
+            <Money amount={row.cost_price} currency={'USD'} />
+          ) : (
+            ''
+          ),
         className: 'cost-price',
         width: 150,
       },
@@ -203,7 +204,9 @@ function ItemsDataTable({
 
   return (
     <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
-      <LoadingIndicator loading={itemsTableLoading && !isLoadedBefore}>
+      <LoadingIndicator
+        loading={(itemsTableLoading && !isLoadedBefore) || itemsViewLoading}
+      >
         <Choose>
           <Choose.When condition={showEmptyStatus}>
             <ItemsEmptyStatus />
diff --git a/client/src/containers/Items/ItemsList.js b/client/src/containers/Items/ItemsList.js
index 606501507..75de9a070 100644
--- a/client/src/containers/Items/ItemsList.js
+++ b/client/src/containers/Items/ItemsList.js
@@ -65,9 +65,8 @@ function ItemsList({
   );
 
   // Handle fetching the items table based on the given query.
-  const fetchItems = useQuery(
-    ['items-table', itemsTableQuery],
-    (key, _query) => requestFetchItems({ ..._query }),
+  const fetchItems = useQuery(['items-table', itemsTableQuery], (key, _query) =>
+    requestFetchItems({ ..._query }),
   );
 
   // Handle click delete item.
@@ -92,33 +91,36 @@ function ItemsList({
 
   // handle confirm delete item.
   const handleConfirmDeleteItem = useCallback(() => {
-    requestDeleteItem(deleteItem.id).then(() => {
-      AppToaster.show({
-        message: formatMessage({
-          id: 'the_item_has_been_successfully_deleted',
-        }),
-        intent: Intent.SUCCESS,
-      });
-      setDeleteItem(false);
-    }).catch(({ errors }) => {
-      if (errors.find(error => error.type === 'ITEM_HAS_ASSOCIATED_TRANSACTINS')) {
+    requestDeleteItem(deleteItem.id)
+      .then(() => {
         AppToaster.show({
           message: formatMessage({
-            id: 'the_item_has_associated_transactions',
+            id: 'the_item_has_been_successfully_deleted',
           }),
-          intent: Intent.DANGER,
+          intent: Intent.SUCCESS,
         });
-      }
-      setDeleteItem(false);
-    });
+        setDeleteItem(false);
+      })
+      .catch(({ errors }) => {
+        if (
+          errors.find(
+            (error) => error.type === 'ITEM_HAS_ASSOCIATED_TRANSACTINS',
+          )
+        ) {
+          AppToaster.show({
+            message: formatMessage({
+              id: 'the_item_has_associated_transactions',
+            }),
+            intent: Intent.DANGER,
+          });
+        }
+        setDeleteItem(false);
+      });
   }, [requestDeleteItem, deleteItem, formatMessage]);
 
-  const handleFetchData = useCallback(
-    ({ pageIndex, pageSize, sortBy }) => {
-     
-    },
-    [addItemsTableQueries],
-  );
+  const handleFetchData = useCallback(({ pageIndex, pageSize, sortBy }) => {}, [
+    addItemsTableQueries,
+  ]);
 
   // Handle filter change to re-fetch the items.
   const handleFilterChanged = useCallback(
@@ -197,6 +199,7 @@ function ItemsList({
               onDeleteItem={handleDeleteItem}
               onEditItem={handleEditItem}
               onSelectedRowsChange={handleSelectedRowsChange}
+              itemsViewLoading={fetchItems.isFetching}
             />
             <Alert
               cancelButtonText={<T id={'cancel'} />}
diff --git a/client/src/containers/Items/ItemsViewsTabs.js b/client/src/containers/Items/ItemsViewsTabs.js
index c23d2b3ec..ce3ece5cc 100644
--- a/client/src/containers/Items/ItemsViewsTabs.js
+++ b/client/src/containers/Items/ItemsViewsTabs.js
@@ -1,29 +1,21 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { useHistory } from 'react-router';
 import { connect } from 'react-redux';
-import {
-  Alignment,
-  Navbar,
-  NavbarGroup,
-  Tabs,
-  Tab,
-  Button,
-} from '@blueprintjs/core';
+import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
 import { useParams } from 'react-router-dom';
-import Icon from 'components/Icon';
-import { Link, withRouter } from 'react-router-dom';
+import { withRouter } from 'react-router-dom';
 import { compose } from 'utils';
-import { useUpdateEffect } from 'hooks';
 import { DashboardViewsTabs } from 'components';
-import { pick, debounce } from 'lodash';
+import { pick } from 'lodash';
 
 import withItemsActions from 'containers/Items/withItemsActions';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withViewDetail from 'containers/Views/withViewDetails';
 import withItems from 'containers/Items/withItems';
 
-import { FormattedMessage as T } from 'react-intl';
-
+/**
+ * Items views tabs.
+ */
 function ItemsViewsTabs({
   // #withViewDetail
   viewId,
@@ -43,62 +35,34 @@ function ItemsViewsTabs({
   // #props
   onViewChanged,
 }) {
-  const history = useHistory();
   const { custom_view_id: customViewId = null } = useParams();
 
-  const handleClickNewView = () => {
-    setTopbarEditView(null);
-    history.push('/custom_views/items/new');
-  };
-
-  const handleViewLinkClick = () => {
-    setTopbarEditView(customViewId);
-  };
-
   useEffect(() => {
-    changeItemsCurrentView(customViewId || -1);
     setTopbarEditView(customViewId);
     changePageSubtitle(customViewId && viewItem ? viewItem.name : '');
-
-    addItemsTableQueries({
-      custom_view_id: customViewId || null,
-    });
-
-    return () => {
-      setTopbarEditView(null);
-      changeItemsCurrentView(-1);
-      changePageSubtitle('');
-    };
-  }, [customViewId, addItemsTableQueries, changeItemsCurrentView]);
-
-  useUpdateEffect(() => {
-    onViewChanged && onViewChanged(customViewId);
   }, [customViewId]);
 
-  const debounceChangeHistory = useRef(
-    debounce((toUrl) => {
-      history.push(toUrl);
-    }, 250),
-  );
-
-  const handleTabsChange = (viewId) => {
-    const toPath = viewId ? `${viewId}/custom_view` : '';
-    debounceChangeHistory.current(`/items/${toPath}`);
-    setTopbarEditView(viewId);
-  };
+  const handleClickNewView = () => {};
 
   const tabs = itemsViews.map((view) => ({
     ...pick(view, ['name', 'id']),
   }));
+
+  const handleTabChange = (viewId) => {
+    changeItemsCurrentView(viewId || -1);
+    addItemsTableQueries({
+      custom_view_id: viewId || null,
+    });
+  };
+
   return (
     <Navbar className="navbar--dashboard-views">
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
           initialViewId={customViewId}
-          baseUrl={'/items'}
+          resourceName={'items'}
           tabs={tabs}
-          onNewViewTabClick={handleClickNewView}
-          onChange={handleTabsChange}
+          onChange={handleTabChange}
         />
       </NavbarGroup>
     </Navbar>
diff --git a/client/src/store/accounts/accounts.selectors.js b/client/src/store/accounts/accounts.selectors.js
index 0b5e61475..3b1a0af6a 100644
--- a/client/src/store/accounts/accounts.selectors.js
+++ b/client/src/store/accounts/accounts.selectors.js
@@ -1,6 +1,10 @@
 import { createSelector } from 'reselect';
 import { repeat } from 'lodash';
-import { pickItemsFromIds, getItemById } from 'store/selectors';
+import {
+  pickItemsFromIds,
+  getItemById,
+  paginationLocationQuery,
+} from 'store/selectors';
 import { flatToNestedArray, treeToList } from 'utils';
 
 const accountsViewsSelector = (state) => state.accounts.views;
@@ -8,6 +12,16 @@ const accountsDataSelector = (state) => state.accounts.items;
 const accountsCurrentViewSelector = (state) => state.accounts.currentViewId;
 const accountIdPropSelector = (state, props) => props.accountId;
 const accountsListSelector = (state) => state.accounts.listTree;
+const accountsTableQuery = (state, props) => state.accounts.tableQuery;
+
+export const getAccountsTableQuery = createSelector(
+  accountsTableQuery,
+  (tableQuery) => {
+    return {
+      ...tableQuery,
+    };
+  },
+);
 
 export const getAccountsItems = createSelector(
   accountsViewsSelector,
@@ -42,12 +56,13 @@ export const getAccountsListFactory = () =>
 
           return {
             ...account,
-            htmlName: (depth > 1)
-              ? (`${repeat(spaceChar, (depth - 1) * 2)}${account.name}`) :
-                account.name,
+            htmlName:
+              depth > 1
+                ? `${repeat(spaceChar, (depth - 1) * 2)}${account.name}`
+                : account.name,
             depth,
           };
-        }
+        },
       });
     },
   );
diff --git a/client/src/store/accounts/accounts.types.js b/client/src/store/accounts/accounts.types.js
index 5132e5317..bdaa96383 100644
--- a/client/src/store/accounts/accounts.types.js
+++ b/client/src/store/accounts/accounts.types.js
@@ -14,8 +14,10 @@ export default {
 
   ACCOUNTS_SET_CURRENT_VIEW: 'ACCOUNTS_SET_CURRENT_VIEW',
   
-  ACCOUNTS_TABLE_QUERY_SET: 'ACCOUNTS_TABLE_QUERY_SET',
-  ACCOUNTS_TABLE_QUERIES_SET: 'ACCOUNTS_TABLE_QUERIES_SET',
+  ACCOUNTS_TABLE_QUERY_SET: 'ACCOUNTS/TABLE_QUERY_SET',
+  ACCOUNTS_TABLE_QUERIES_SET: 'ACCOUNTS/TABLE_QUERIES_SET',
+  ACCOUNTS_TABLE_QUERIES_ADD:'ACCOUNTS/TABLE_QUERIES_ADD',
+
 
   ACCOUNTS_TABLE_LOADING: 'ACCOUNTS_TABLE_LOADING',
 
diff --git a/client/src/store/expenses/expenses.actions.js b/client/src/store/expenses/expenses.actions.js
index 03147e8a3..4b0ddbe6b 100644
--- a/client/src/store/expenses/expenses.actions.js
+++ b/client/src/store/expenses/expenses.actions.js
@@ -20,21 +20,23 @@ export const fetchExpensesTable = ({ query } = {}) => {
             payload: {
               expenses: response.data.expenses,
               pagination: response.data.pagination,
-              customViewId: response.data.customViewId || -1,
-            },            
+              customViewId:
+                response.data?.filter_meta?.view?.custom_view_id || -1,
+            },
           });
           dispatch({
             type: t.EXPENSES_ITEMS_SET,
             payload: {
               expenses: response.data.expenses,
-            }
+            },
           });
           dispatch({
             type: t.EXPENSES_PAGINATION_SET,
             payload: {
               pagination: response.data.pagination,
-              customViewId: response.data.customViewId || -1,
-            }
+              customViewId:
+                response.data?.filter_meta?.view?.custom_view_id || -1,
+            },
           });
           dispatch({
             type: t.EXPENSES_TABLE_LOADING,
@@ -54,7 +56,7 @@ export const fetchExpense = ({ id }) => {
   return (dispatch) =>
     new Promise((resolve, reject) => {
       ApiService.get(`expenses/${id}`)
-      .then((response) => {
+        .then((response) => {
           dispatch({
             type: t.EXPENSE_SET,
             payload: {
diff --git a/client/src/store/items/items.actions.js b/client/src/store/items/items.actions.js
index d836990aa..5c02b6db1 100644
--- a/client/src/store/items/items.actions.js
+++ b/client/src/store/items/items.actions.js
@@ -12,12 +12,13 @@ export const editItem = ({ id, form }) => {
 export const fetchItems = ({ query }) => {
   return (dispatch, getState) =>
     new Promise((resolve, reject) => {
-      const pageQuery = getState().items.tableQuery;
+      let pageQuery = getState().items.tableQuery;
 
       dispatch({
         type: t.ITEMS_TABLE_LOADING,
         payload: { loading: true },
       });
+      
       ApiService.get(`items`, { params: { ...pageQuery, ...query } })
         .then((response) => {
           dispatch({
@@ -27,16 +28,18 @@ export const fetchItems = ({ query }) => {
           dispatch({
             type: t.ITEMS_PAGE_SET,
             items: response.data.items,
-            customViewId: response.data?.filter_meta?.view?.custom_view_id,
+            customViewId:
+              response.data?.filter_meta?.view?.custom_view_id || -1,
             paginationMeta: response.data.pagination,
           });
           dispatch({
             type: t.ITEMS_PAGINATION_SET,
             payload: {
               pagination: response.data.pagination,
-              customViewId: response.data.customViewId || -1,
-            }
-          })
+              customViewId:
+                response.data?.filter_meta?.view?.custom_view_id || -1,
+            },
+          });
           dispatch({
             type: t.ITEMS_TABLE_LOADING,
             payload: { loading: false },
@@ -44,9 +47,6 @@ export const fetchItems = ({ query }) => {
           resolve(response);
         })
         .catch((error) => {
-          dispatch({
-            type: t.SET_DASHBOARD_REQUEST_COMPLETED,
-          });
           reject(error);
         });
     });
diff --git a/client/src/store/items/items.selectors.js b/client/src/store/items/items.selectors.js
index fbfde0364..a8466ff6d 100644
--- a/client/src/store/items/items.selectors.js
+++ b/client/src/store/items/items.selectors.js
@@ -1,9 +1,6 @@
-import { paginationLocationQuery } from "store/selectors";
+import { paginationLocationQuery } from 'store/selectors';
 import { createSelector } from 'reselect';
-import {
-  pickItemsFromIds,
-  defaultPaginationMeta,
-} from 'store/selectors';
+import { pickItemsFromIds, defaultPaginationMeta } from 'store/selectors';
 
 const itemsTableQuerySelector = (state) => state.items.tableQuery;
 
@@ -20,10 +17,11 @@ const itemsPaginationSelector = (state, props) => {
   const viewId = state.items.currentViewId;
   return state.items.views?.[viewId]?.paginationMeta;
 };
-const customersCurrentViewIdSelector = (state) => state.customers.currentViewId;
-
+const itemsCurrentViewIdSelector = (state) => {
+  return state.items.currentViewId;
+};
 // Get items table query marged with location query.
-export const getItemsTableQueryFactory = () => 
+export const getItemsTableQueryFactory = () =>
   createSelector(
     paginationLocationQuery,
     itemsTableQuerySelector,
@@ -31,39 +29,33 @@ export const getItemsTableQueryFactory = () =>
       return {
         ...locationQuery,
         ...tableQuery,
-      }
+      };
     },
   );
 
 // Retrieve items current page and view.
-export const getItemsCurrentPageFactory = () => 
+export const getItemsCurrentPageFactory = () =>
   createSelector(
     itemsDataSelector,
     itemsCurrentPageSelector,
     (items, itemsIdsCurrentPage) => {
       return typeof itemsIdsCurrentPage === 'object'
-      ? pickItemsFromIds(items, itemsIdsCurrentPage.ids) || []
-      : [];
+        ? pickItemsFromIds(items, itemsIdsCurrentPage.ids) || []
+        : [];
     },
   );
 
 // Retrieve items pagination meta.
-export const getItemsPaginationMetaFactory = () => 
-  createSelector(
-    itemsPaginationSelector,
-    (itemsPagination) => {
-      return {
-        ...defaultPaginationMeta(),
-        ...itemsPagination,
-      };
-    }
-  );
+export const getItemsPaginationMetaFactory = () =>
+  createSelector(itemsPaginationSelector, (itemsPagination) => {
+    return {
+      ...defaultPaginationMeta(),
+      ...itemsPagination,
+    };
+  });
 
 // Retrieve items current view id.
-export const getItemsCurrentViewIdFactory = () => 
-  createSelector(
-    customersCurrentViewIdSelector,
-    (currentViewId) => {
-      return currentViewId;
-    }
-  );
\ No newline at end of file
+export const getItemsCurrentViewIdFactory = () =>
+  createSelector(itemsCurrentViewIdSelector, (currentViewId) => {
+    return currentViewId;
+  });
diff --git a/client/src/store/manualJournals/manualJournals.actions.js b/client/src/store/manualJournals/manualJournals.actions.js
index bf1318f11..56f61dc05 100644
--- a/client/src/store/manualJournals/manualJournals.actions.js
+++ b/client/src/store/manualJournals/manualJournals.actions.js
@@ -129,7 +129,7 @@ export const fetchManualJournalsTable = ({ query } = {}) => {
             payload: {
               manualJournals: response.data.manual_journals,
               customViewId:
-                response.data.manual_journals?.viewMeta?.customViewId || -1,
+              response.data?.filter_meta?.view?.custom_view_id || -1,
               pagination: response.data.pagination,
             },
           });
@@ -140,23 +140,25 @@ export const fetchManualJournalsTable = ({ query } = {}) => {
                 ...manualJournal,
                 entries: manualJournal.entries.map((entry) => ({
                   ...omit(entry, ['account']),
-                }))
+                })),
               })),
-            ]
+            ],
           });
           dispatch({
             type: t.MANUAL_JOURNALS_PAGINATION_SET,
             payload: {
               pagination: response.data.pagination,
               customViewId:
-                response.data.manual_journals?.viewMeta?.customViewId || -1,
+                response.data?.filter_meta?.view?.custom_view_id || -1,
             },
           });
           dispatch({
             type: t.ACCOUNTS_ITEMS_SET,
-            accounts: flatten(response.data.manual_journals?.map(
-              journal => journal?.entries.map(entry => entry.account),
-            )),
+            accounts: flatten(
+              response.data.manual_journals?.map((journal) =>
+                journal?.entries.map((entry) => entry.account),
+              ),
+            ),
           });
           dispatch({
             type: t.MANUAL_JOURNALS_TABLE_LOADING,