- feat: Sales estimates APIs.

- feat: Sales invoices APIs.
- feat: Sales receipts APIs.
- WIP: Sales payment receipts.
- WIP: Purchases bills.
- WIP: Purchases payments made.

client/src/containers/Accounts/AccountsActionsBar.js

@@ -5,18 +5,15 @@ import {
   NavbarGroup,
   Classes,
   NavbarDivider,
-  MenuItem,
-  Menu,
   Popover,
   PopoverInteractionKind,
   Position,
   Intent,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
-import { useHistory } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { FormattedMessage as T } from 'react-intl';
-import { If } from 'components';
+import { If, DashboardActionViewsList } from 'components';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import FilterDropdown from 'components/FilterDropdown';
@@ -45,22 +42,15 @@ function AccountsActionsBar({
   onBulkActivate,
   onBulkInactive,
 }) {
-  const history = useHistory();
   const [filterCount, setFilterCount] = useState(0);
 
   const onClickNewAccount = () => {
     openDialog('account-form', {});
   };
-  const onClickViewItem = (view) => {
-    history.push(view ? `/accounts/${view.id}/custom_view` : '/accounts');
-  };
 
-  const viewsMenuItems = accountsViews.map((view) => {
-    return <MenuItem onClick={() => onClickViewItem(view)} text={view.name} />;
-  });
-  const hasSelectedRows = useMemo(
-    () => selectedRows.length > 0,
-    [selectedRows]);
+  const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
+    selectedRows,
+  ]);
 
   const filterDropdown = FilterDropdown({
     fields: resourceFields,
@@ -93,20 +83,10 @@ function AccountsActionsBar({
   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={'accounts'}
+          views={accountsViews}
+        />
         <NavbarDivider />
 
         <Button
@@ -130,7 +110,10 @@ function AccountsActionsBar({
               filterCount <= 0 ? (
                 <T id={'filter'} />
               ) : (
-                <T id={'count_filters_applied'} values={{ count: filterCount }} />
+                <T
+                  id={'count_filters_applied'}
+                  values={{ count: filterCount }}
+                />
               )
             }
             icon={<Icon icon="filter-16" iconSize={16} />}

client/src/containers/Accounts/AccountsViewsTabs.js

@@ -67,28 +67,13 @@ function AccountsViewsTabs({
   const tabs = accountsViews.map((view) => ({
     ...pick(view, ['name', 'id']),
   }));
-
-  const debounceChangeHistory = useRef(
-    debounce((toUrl) => {
-      history.push(toUrl);
-    }, 250),
-  );
-
-  const handleTabsChange = (viewId) => {
-    const toPath = viewId ? `${viewId}/custom_view` : '';
-    debounceChangeHistory.current(`/accounts/${toPath}`);
-    setTopbarEditView(viewId);
-  };
-
   return (
     <Navbar className="navbar--dashboard-views">
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
           initialViewId={customViewId}
-          baseUrl={'/accounts'}
+          resourceName={'accounts'}
           tabs={tabs}
-          onNewViewTabClick={handleClickNewView}
-          onChange={handleTabsChange}
         />
       </NavbarGroup>
     </Navbar>

client/src/containers/Customers/CustomerActionsBar.js

@@ -17,7 +17,7 @@ import { useHistory } from 'react-router-dom';
 import Icon from 'components/Icon';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import FilterDropdown from 'components/FilterDropdown';
-import { If } from 'components';
+import { If, DashboardActionViewsList } from 'components';
 
 import withResourceDetail from 'containers/Resources/withResourceDetails';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
@@ -67,6 +67,12 @@ const CustomerActionsBar = ({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
+        <DashboardActionViewsList
+          resourceName={'customers'}
+          views={[]}
+        />
+        <NavbarDivider />
+
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon={'plus'} />}

client/src/containers/Customers/CustomersList.js

@@ -14,6 +14,7 @@ import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 
 import CustomersTable from 'containers/Customers/CustomerTable';
 import CustomerActionsBar from 'containers/Customers/CustomerActionsBar';
+import CustomersViewsTabs from 'containers/Customers/CustomersViewsTabs';
 
 import withCustomersActions from 'containers/Customers/withCustomersActions';
 import withResourceActions from 'containers/Resources/withResourcesActions';
@@ -178,6 +179,9 @@ function CustomersList({
         onFilterChanged={handleFilterChanged}
         onBulkDelete={handleBulkDelete}
       />
+
+      <CustomersViewsTabs />
+
       <DashboardPageContent>
         <CustomersTable
           loadong={tableLoading}

client/src/containers/Customers/CustomersViewsTabs.js

@@ -0,0 +1,78 @@
+import React, { useEffect, useMemo } from 'react';
+import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
+import { compose } from 'redux';
+import { useParams, withRouter, useHistory } from 'react-router-dom';
+import { connect } from 'react-redux';
+
+import { DashboardViewsTabs } from 'components';
+
+import withCustomers from 'containers/Customers/withCustomers';
+import withCustomersActions from 'containers/Customers/withCustomersActions';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import { pick } from 'lodash';
+
+/**
+ * Customers views tabs.
+ */
+function CustomersViewsTabs({
+  // #withViewDetail
+  viewId,
+  viewItem,
+
+  // #withCustomers
+  customersViews,
+
+  // #withCustomersActions
+  addCustomersTableQueries,
+
+  // #withDashboardActions
+  setTopbarEditView,
+  changePageSubtitle,
+}) {
+  const history = useHistory();
+  const { custom_view_id: customViewId = null } = useParams();
+
+  const tabs = useMemo(() => customersViews.map((view) => ({
+    ...pick(view, ['name', 'id']),
+  }), [customersViews]));
+
+  useEffect(() => {
+    setTopbarEditView(customViewId);
+    changePageSubtitle(customViewId && viewItem ? viewItem.name : '');
+    addCustomersTableQueries({
+      custom_view_id: customViewId,
+    });
+    return () => {
+      setTopbarEditView(null);
+      changePageSubtitle('');
+    };
+  }, [customViewId]);
+
+  return (
+    <Navbar className="navbar--dashboard-views">
+      <NavbarGroup align={Alignment.LEFT}>
+        <DashboardViewsTabs
+          initialViewId={customViewId}
+          resourceName={'customers'}
+          tabs={tabs}
+        />
+      </NavbarGroup>
+    </Navbar>
+  );
+}
+
+const mapStateToProps = (state, ownProps) => ({
+  viewId: ownProps.match.params.custom_view_id,
+});
+
+const withCustomersViewsTabs = connect(mapStateToProps);
+
+export default compose(
+  withRouter,
+  withDashboardActions,
+  withCustomersViewsTabs,
+  withCustomersActions,
+  withCustomers(({ customersViews }) => ({
+    customersViews,
+  })),
+)(CustomersViewsTabs);