- 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/components/Dashboard/DashboardActionViewsList.js

@@ -0,0 +1,44 @@
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import {
+  Button,
+  Classes,
+  MenuItem,
+  Menu,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+} from '@blueprintjs/core';
+import { FormattedMessage as T } from 'react-intl';
+import { useHistory } from 'react-router-dom';
+import { Icon } from 'components';
+
+export default function DashboardActionViewsList({
+  resourceName,
+  views
+}) {
+  const history = useHistory();
+
+  const handleClickViewItem = (view) => {
+    history.push(view ? `/${resourceName}/${view.id}/custom_view` : '/accounts');
+  };
+  const viewsMenuItems = views.map((view) => {
+    return <MenuItem onClick={() => handleClickViewItem(view)} text={view.name} />;
+  });
+
+  return (
+    <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>
+  );
+}

client/src/components/Dashboard/DashboardViewsTabs.js

@@ -1,7 +1,9 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState, useRef, useMemo } from 'react';
 import { FormattedMessage as T } from 'react-intl';
 import PropTypes from 'prop-types';
 import { Button, Tabs, Tab, Tooltip, Position } from '@blueprintjs/core';
+import { debounce } from 'lodash';
+import { useHistory } from 'react-router';
 import { If, Icon } from 'components';
 
 export default function DashboardViewsTabs({
@@ -9,13 +11,16 @@ export default function DashboardViewsTabs({
   tabs,
   allTab = true,
   newViewTab = true,
+  resourceName,
   onNewViewTabClick,
   onChange,
   onTabClick,
 }) {
+  const history = useHistory();
   const [currentView, setCurrentView] = useState(initialViewId || 0);
 
   const handleClickNewView = () => {
+    history.push(`/custom_views/${resourceName}/new`);
     onNewViewTabClick && onNewViewTabClick();
   };
 
@@ -32,7 +37,16 @@ export default function DashboardViewsTabs({
     onNewViewTabClick && onNewViewTabClick();
   };
 
+  const debounceChangeHistory = useRef(
+    debounce((toUrl) => {
+      history.push(toUrl);
+    }, 250),
+  );
+
   const handleTabsChange = (viewId) => {
+    const toPath = viewId ? `${viewId}/custom_view` : '';
+    debounceChangeHistory.current(`/${resourceName}/${toPath}`);
+
     setCurrentView(viewId);
     onChange && onChange(viewId);
   };

client/src/components/index.js

@@ -21,7 +21,7 @@ import DataTable from './DataTable';
 import AccountsSelectList from './AccountsSelectList';
 import AccountsTypesSelect from './AccountsTypesSelect';
 import LoadingIndicator from './LoadingIndicator';
-
+import DashboardActionViewsList from './Dashboard/DashboardActionViewsList';
 const Hint = FieldHint;
 
 export {
@@ -49,4 +49,5 @@ export {
   AccountsSelectList,
   AccountsTypesSelect,
   LoadingIndicator,
+  DashboardActionViewsList,
 };

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

client/src/style/pages/dashboard.scss

@@ -240,6 +240,7 @@
       }
     }
   }
+  
 
   &__subtitle{
     
@@ -248,6 +249,20 @@
     margin-bottom: 40px;
   }
 
+  &__offline-badge{
+    display: flex;
+    align-items: center;
+    padding: 0px 6px;
+    height: 24px;
+    border-radius: 4px;
+    margin-right: 18px;
+    white-space: nowrap;
+    font-size: 14px;
+    color: rgba(22, 12, 12, 0.6);
+    border: 1px solid rgba(0, 0, 0, 0.16);
+    margin: auto;
+    margin-left: 12px;
+  }
   &-content{
     display: flex;
     flex-direction: column;