refactoring: expenses landing list.

refactoring: customers landing list.
refactoring: vendors landing list.
refactoring: manual journals landing list.

client/src/common/classes.js

@@ -33,7 +33,7 @@ const CLASSES = {
   PAGE_FORM_PAYMENT_MADE: 'page-form--payment-made',
   PAGE_FORM_PAYMENT_RECEIVE: 'page-form--payment-receive',
   PAGE_FORM_CUSTOMER: 'page-form--customer',
-  PAGE_FORM_VENDOR: 'page-form--customer',
+  PAGE_FORM_VENDOR: 'page-form--vendor',
   PAGE_FORM_ITEM: 'page-form--item',
   PAGE_FORM_MAKE_JOURNAL: 'page-form--make-journal-entries',
   PAGE_FORM_EXPENSE: 'page-form--expense',

client/src/components/DialogsContainer.js

@@ -19,7 +19,7 @@ import PaymentViaVoucherDialog from 'containers/Dialogs/PaymentViaVoucherDialog'
 export default function DialogsContainer() {
   return (
     <div>
-      <AccountFormDialog dialogName={'account-form'} />
+      {/* <AccountFormDialog dialogName={'account-form'} /> */}
       <JournalNumberDialog dialogName={'journal-number-form'} />
       <PaymentReceiveNumberDialog dialogName={'payment-receive-number-form'} />
       <EstimateNumberDialog dialogName={'estimate-number-form'} />

client/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js

@@ -13,18 +13,14 @@ import {
 import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
 import { FormattedMessage as T } from 'react-intl';
-import { connect } from 'react-redux';
 
-import { useManualJournalsContext } from 'containers/Accounting/ManualJournalsListProvider';
+import { useManualJournalsContext } from './ManualJournalsListProvider';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 
 import { If, DashboardActionViewsList } from 'components';
 
-import withResourceDetail from 'containers/Resources/withResourceDetails';
+import withManualJournalsActions from './withManualJournalsActions';
-import withManualJournals from 'containers/Accounting/withManualJournals';
-import withManualJournalsActions from 'containers/Accounting/withManualJournalsActions';
-
 import { compose } from 'utils';
 
 /**
@@ -32,9 +28,12 @@ import { compose } from 'utils';
  */
 function ManualJournalActionsBar({
   // #withManualJournalsActions
-  addManualJournalsTableQueries,
+  setManualJournalsTableState,
 }) {
+  // History context.
   const history = useHistory();
+
+  // Manual journals context.
   const { journalsViews } = useManualJournalsContext();
 
   // Handle click a new manual journal.
@@ -49,8 +48,8 @@ function ManualJournalActionsBar({
 
   // Handle tab change.
   const handleTabChange = (viewId) => {
-    addManualJournalsTableQueries({
+    setManualJournalsTableState({
-      custom_view_id: viewId.id || null,
+      customViewid: viewId.id || null,
     });
   };
 
@@ -115,20 +114,7 @@ function ManualJournalActionsBar({
   );
 }
 
-const mapStateToProps = (state, props) => ({
-  resourceName: 'manual_journals',
-});
-
-const withManualJournalsActionsBar = connect(mapStateToProps);
-
 export default compose(
-  withManualJournalsActionsBar,
   withDialogActions,
-  withResourceDetail(({ resourceFields }) => ({
-    resourceFields,
-  })),
-  withManualJournals(({ manualJournalsViews }) => ({
-    manualJournalsViews,
-  })),
   withManualJournalsActions,
 )(ManualJournalActionsBar);

client/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.js

@@ -0,0 +1,118 @@
+import React from 'react';
+import classNames from 'classnames';
+import { DataTable, Choose } from 'components';
+import { CLASSES } from 'common/classes';
+
+import ManualJournalsEmptyStatus from './ManualJournalsEmptyStatus';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+
+import withManualJournalsActions from './withManualJournalsActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+
+import { useManualJournalsContext } from './ManualJournalsListProvider';
+import { useManualJournalsColumns } from './utils';
+import { ActionsMenu } from './components';
+
+import { compose } from 'utils';
+
+/**
+ * Manual journals data-table.
+ */
+function ManualJournalsDataTable({
+  // #withManualJournalsActions
+  setManualJournalsTableState,
+
+  // #withAlertsActions
+  openAlert,
+
+  // #ownProps
+  onSelectedRowsChange,
+}) {
+  // Manual journals context.
+  const {
+    manualJournals,
+    pagination,
+    isManualJournalsLoading,
+    isManualJournalsFetching,
+    isEmptyStatus
+  } = useManualJournalsContext();
+
+  // Manual journals columns.
+  const columns = useManualJournalsColumns();
+
+  // Handles the journal publish action.
+  const handlePublishJournal = ({ id }) => {
+    openAlert('journal-publish', { manualJournalId: id })
+  };
+
+  // Handle the journal edit action.
+  const handleEditJournal = ({ id }) => {
+
+  };
+
+  // Handle the journal delete action.
+  const handleDeleteJournal = ({ id }) => {
+    openAlert('journal-delete', { manualJournalId: id });
+  };
+
+  // Handle fetch data once the page index, size or sort by of the table change.
+  const handleFetchData = React.useCallback(
+    ({ pageSize, pageIndex, sortBy }) => {
+      setManualJournalsTableState({
+        pageIndex,
+        pageSize,
+        sortBy,
+      });
+    },
+    [setManualJournalsTableState],
+  );
+
+  return (
+    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
+      <Choose>
+        <Choose.When condition={isEmptyStatus}>
+          <ManualJournalsEmptyStatus />
+        </Choose.When>
+
+        <Choose.Otherwise>
+          <DataTable
+            noInitialFetch={true}
+            columns={columns}
+            data={manualJournals}
+
+            manualSortBy={true}
+            selectionColumn={true}
+            expandable={true}
+            sticky={true}
+
+            loading={isManualJournalsLoading}
+            headerLoading={isManualJournalsLoading}
+            progressBarLoading={isManualJournalsFetching}
+
+            pagesCount={pagination.pagesCount}
+            pagination={true}
+
+            autoResetSortBy={false}
+            autoResetPage={false}
+          
+            TableLoadingRenderer={TableSkeletonRows}
+            TableHeaderSkeletonRenderer={TableSkeletonHeader}
+            ContextMenu={ActionsMenu}
+
+            onFetchData={handleFetchData}
+            payload={{
+              onDelete: handleDeleteJournal,
+              onPublish: handlePublishJournal
+            }}
+          />
+        </Choose.Otherwise>
+      </Choose>
+    </div>
+  );
+}
+
+export default compose(
+  withManualJournalsActions,
+  withAlertsActions
+)(ManualJournalsDataTable);

client/src/containers/Accounting/JournalsLanding/ManualJournalsList.js

@@ -0,0 +1,56 @@
+import React, { useEffect } from 'react';
+import { useIntl } from 'react-intl';
+
+import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+
+import { ManualJournalsListProvider } from './ManualJournalsListProvider';
+import ManualJournalsAlerts from './ManualJournalsAlerts';
+import ManualJournalsViewTabs from './ManualJournalsViewTabs';
+import ManualJournalsDataTable from './ManualJournalsDataTable';
+import ManualJournalsActionsBar from './ManualJournalActionsBar';
+
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withManualJournals from './withManualJournals';
+
+import { transformTableStateToQuery, compose } from 'utils';
+
+import 'style/pages/ManualJournal/List.scss';
+
+/**
+ * Manual journals table.
+ */
+function ManualJournalsTable({
+  // #withDashboardActions
+  changePageTitle,
+
+  // #withManualJournals
+  journalsTableState,
+}) {
+  const { formatMessage } = useIntl();
+
+  // Handle update the page title.
+  useEffect(() => {
+    changePageTitle(formatMessage({ id: 'manual_journals' }));
+  }, [changePageTitle, formatMessage]);
+
+  return (
+    <ManualJournalsListProvider
+      query={transformTableStateToQuery(journalsTableState)}
+    >
+      <ManualJournalsActionsBar />
+
+      <DashboardPageContent>
+        <ManualJournalsViewTabs />
+        <ManualJournalsDataTable />
+        <ManualJournalsAlerts />
+      </DashboardPageContent>
+    </ManualJournalsListProvider>
+  );
+}
+
+export default compose(
+  withDashboardActions,
+  withManualJournals(({ manualJournalsTableState }) => ({
+    journalsTableState: manualJournalsTableState,
+  })),
+)(ManualJournalsTable);

client/src/containers/Accounting/JournalsLanding/ManualJournalsListProvider.js

@@ -1,28 +1,39 @@
 import React, { createContext } from 'react';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import { useResourceViews, useJournals } from 'hooks/query';
+import { isTableEmptyStatus } from 'utils';
 
 const ManualJournalsContext = createContext();
 
 function ManualJournalsListProvider({ query, ...props }) {
   // Fetches accounts resource views and fields.
-  const { data: journalsViews, isFetching: isViewsLoading } = useResourceViews(
+  const { data: journalsViews, isLoading: isViewsLoading } = useResourceViews(
     'manual_journals',
   );
 
   // Fetches the manual journals transactions with pagination meta.
   const {
-    data: { manualJournals },
+    data: { manualJournals, pagination, filterMeta },
-    isFetching: isManualJournalsLoading,
+    isLoading: isManualJournalsLoading,
-  } = useJournals(query);
+    isFetching: isManualJournalsFetching
+  } = useJournals(query, { keepPreviousData: true });
+
+  // Detarmines the datatable empty status.
+  const isEmptyStatus = isTableEmptyStatus({
+    data: manualJournals, pagination, filterMeta,
+  }) && !isManualJournalsFetching;
 
   // Global state.
   const state = {
     manualJournals,
+    pagination,
     journalsViews,
 
     isManualJournalsLoading,
+    isManualJournalsFetching,
     isViewsLoading,
+
+    isEmptyStatus
   };
 
   return (

client/src/containers/Accounting/JournalsLanding/ManualJournalsViewTabs.js

@@ -8,17 +8,21 @@ import { DashboardViewsTabs } from 'components';
 import { useManualJournalsContext } from './ManualJournalsListProvider';
 import withManualJournalsActions from './withManualJournalsActions';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withManualJournals from './withManualJournals';
 
-import { compose, saveInvoke } from 'utils';
+import { compose } from 'utils';
 
 /**
  * Manual journal views tabs.
  */
 function ManualJournalsViewTabs({
   // #withManualJournalsActions
-  addManualJournalsTableQueries,
+  setManualJournalsTableState,
+
+  // #withManualJournals
+  journalsTableState
 }) {
-  const { custom_view_id: customViewId } = useParams();
+  // Manual journals context.
   const { journalsViews } = useManualJournalsContext();
 
   const tabs = journalsViews.map((view) => ({
@@ -27,9 +31,10 @@ function ManualJournalsViewTabs({
 
   const handleClickNewView = () => {};
 
+  // Handles the tab change.
   const handleTabChange = (viewId) => {
-    addManualJournalsTableQueries({
+    setManualJournalsTableState({
-      custom_view_id: viewId || null,
+      customViewId: viewId || null,
     });
   };
   
@@ -38,7 +43,7 @@ function ManualJournalsViewTabs({
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
           resourceName={'manual-journals'}
-          initialViewId={customViewId}
+          customViewId={journalsTableState.customViewId}
           tabs={tabs}
           onChange={handleTabChange}
           onNewViewTabClick={handleClickNewView}
@@ -51,4 +56,7 @@ function ManualJournalsViewTabs({
 export default compose(
   withManualJournalsActions,
   withDashboardActions,
+  withManualJournals(({ manualJournalsTableState }) => ({
+    journalsTableState: manualJournalsTableState,
+  })),
 )(ManualJournalsViewTabs);

client/src/containers/Accounting/JournalsLanding/components.js

@@ -6,16 +6,20 @@ import {
   Position,
   Tag,
   Button,
+  MenuItem,
+  Menu,
+  MenuDivider,
+  Popover,
 } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
 import moment from 'moment';
-import { Choose, Money, If, Icon, Hint } from 'components';
+import { Choose, Money, If, Icon } from 'components';
+import { safeCallback } from 'utils';
+import { formatMessage } from 'services/intl';
 
-import withAccountDetails from 'containers/Accounts/withAccountDetail';
+/**
-
+ * Amount accessor.
-import { compose } from 'utils';
+ */
-
-// Amount accessor.
 export const AmountAccessor = (r) => (
   <Tooltip
     content={<AmountPopoverContent journalEntries={r.entries} />}
@@ -26,15 +30,13 @@ export const AmountAccessor = (r) => (
   </Tooltip>
 );
 
-const AmountPopoverContentLineRender = ({
+/**
-  journalEntry,
+ * Amount popover content line.
-  accountId,
+ */
-
+export const AmountPopoverContentLine = ({ journalEntry }) => {
-  // #withAccountDetail
-  account,
-}) => {
   const isCredit = !!journalEntry.credit;
   const isDebit = !!journalEntry.debit;
+  const { account } = journalEntry;
 
   return (
     <Choose>
@@ -55,10 +57,9 @@ const AmountPopoverContentLineRender = ({
   );
 };
 
-const AmountPopoverContentLine = compose(withAccountDetails)(
+/**
-  AmountPopoverContentLineRender,
+ * Amount popover content.
-);
+ */
-
 export function AmountPopoverContent({ journalEntries }) {
   const journalLinesProps = journalEntries.map((journalEntry) => ({
     journalEntry,
@@ -78,7 +79,7 @@ export function AmountPopoverContent({ journalEntries }) {
 }
 
 /**
- * publish column accessor.
+ * Publish column accessor.
  */
 export const StatusAccessor = (row) => {
   return (
@@ -123,79 +124,52 @@ export function NoteAccessor(row) {
   );
 }
 
-// Contact header cell.
+/**
-export function ContactHeaderCell() {
+ * Table actions cell.
+ */
+export const ActionsCell = (props) => {
   return (
-    <>
+    <Popover
-      <T id={'contact'} />
+      content={<ActionsMenu {...props} />}
-      <Hint
+      position={Position.RIGHT_BOTTOM}
-        content={<T id={'contact_column_hint'} />}
+    >
-        position={Position.LEFT_BOTTOM}
+      <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
-      />
+    </Popover>
-    </>
   );
-}
+};
 
-// Actions cell renderer.
+/**
-export const ActionsCellRenderer = ({
+ * Actions menu of the table.
-  row: { index },
+ */
-  column: { id },
+export const ActionsMenu = ({
-  cell: { value: initialValue },
+  payload: { onPublish, onEdit, onDelete },
-  data,
+  row: { original },
-  payload,
 }) => {
-  if (data.length <= index + 1) {
-    return '';
-  }
-  const onClickRemoveRole = () => {
-    payload.removeRow(index);
-  };
   return (
-    <Tooltip content={<T id={'remove_the_line'} />} position={Position.LEFT}>
+    <Menu>
-      <Button
+      <MenuItem
-        icon={<Icon icon="times-circle" iconSize={14} />}
+        icon={<Icon icon="reader-18" />}
-        iconSize={14}
+        text={formatMessage({ id: 'view_details' })}
-        className="ml2"
-        minimal={true}
-        intent={Intent.DANGER}
-        onClick={onClickRemoveRole}
       />
-    </Tooltip>
+      <MenuDivider />
+      <If condition={!original.is_published}>
+        <MenuItem
+          icon={<Icon icon="arrow-to-top" />}
+          text={formatMessage({ id: 'publish_journal' })}
+          onClick={safeCallback(onPublish, original)}
+        />
+      </If>
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={formatMessage({ id: 'edit_journal' })}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <MenuItem
+        text={formatMessage({ id: 'delete_journal' })}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+      />
+    </Menu>
   );
 };
-
-// Total text cell renderer.
-export const TotalAccountCellRenderer = (chainedComponent) => (props) => {
-  if (props.data.length === props.row.index + 1) {
-    return <span>{'Total USD'}</span>;
-  }
-  return chainedComponent(props);
-};
-
-// Total credit/debit cell renderer.
-export const TotalCreditDebitCellRenderer = (chainedComponent, type) => (
-  props,
-) => {
-  if (props.data.length === props.row.index + 1) {
-    const total = props.data.reduce((total, entry) => {
-      const amount = parseInt(entry[type], 10);
-      const computed = amount ? total + amount : total;
-
-      return computed;
-    }, 0);
-
-    return (
-      <span>
-        <Money amount={total} currency={'USD'} />
-      </span>
-    );
-  }
-  return chainedComponent(props);
-};
-
-export const NoteCellRenderer = (chainedComponent) => (props) => {
-  if (props.data.length === props.row.index + 1) {
-    return '';
-  }
-  return chainedComponent(props);
-};

client/src/containers/Accounting/JournalsLanding/utils.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { formatMessage } from 'services/intl';
+import moment from 'moment';
+import {
+  NoteAccessor,
+  StatusAccessor,
+  DateAccessor,
+  AmountAccessor,
+  ActionsCell,
+} from './components';
+
+/**
+ * Retrieve the manual journals columns.
+ */
+export const useManualJournalsColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        id: 'date',
+        Header: formatMessage({ id: 'date' }),
+        accessor: DateAccessor,
+        width: 115,
+        className: 'date',
+      },
+      {
+        id: 'amount',
+        Header: formatMessage({ id: 'amount' }),
+        accessor: AmountAccessor,
+        className: 'amount',
+        width: 115,
+      },
+      {
+        id: 'journal_number',
+        Header: formatMessage({ id: 'journal_no' }),
+        accessor: (row) => `#${row.journal_number}`,
+        className: 'journal_number',
+        width: 100,
+      },
+      {
+        id: 'journal_type',
+        Header: formatMessage({ id: 'journal_type' }),
+        accessor: 'journal_type',
+        width: 110,
+        className: 'journal_type',
+      },
+      {
+        id: 'publish',
+        Header: formatMessage({ id: 'publish' }),
+        accessor: (row) => StatusAccessor(row),
+        width: 95,
+        className: 'publish',
+      },
+      {
+        id: 'note',
+        Header: formatMessage({ id: 'note' }),
+        accessor: NoteAccessor,
+        disableSorting: true,
+        width: 85,
+        className: 'note',
+      },
+      {
+        id: 'created_at',
+        Header: formatMessage({ id: 'created_at' }),
+        accessor: (r) => moment(r.created_at).format('YYYY MMM DD'),
+        width: 125,
+        className: 'created_at',
+      },
+      {
+        id: 'actions',
+        Header: '',
+        Cell: ActionsCell,
+        className: 'actions',
+        width: 50,
+        disableResizing: true,
+      },
+    ],
+    [],
+  );
+};

client/src/containers/Accounting/JournalsLanding/withManualJournals.js

@@ -0,0 +1,16 @@
+import { connect } from 'react-redux';
+import {
+  getManualJournalsTableStateFactory
+} from 'store/manualJournals/manualJournals.selectors';
+
+export default (mapState) => {
+  const getJournalsTableQuery = getManualJournalsTableStateFactory();
+
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      manualJournalsTableState: getJournalsTableQuery(state, props),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};

client/src/containers/Accounting/JournalsLanding/withManualJournalsActions.js

@@ -0,0 +1,11 @@
+import { connect } from 'react-redux';
+import {
+  setManualJournalsTableState,
+} from 'store/manualJournals/manualJournals.actions';
+
+const mapActionsToProps = (dispatch) => ({
+  setManualJournalsTableState: (queries) =>
+    dispatch(setManualJournalsTableState(queries)),
+});
+
+export default connect(null, mapActionsToProps);

client/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.js

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import {
   InputGroup,
   FormGroup,
@@ -26,6 +26,9 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 
 import { compose, inputIntent, handleDateChange } from 'utils';
 
+/**
+ * Make journal entries header.
+ */
 function MakeJournalEntriesHeader({
   // #ownProps
   onJournalNumberChanged,

client/src/containers/Accounting/MakeJournal/components.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import { Position } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'react-intl';
+import { Money, Hint } from 'components';
+
+/**
+ * Contact header cell.
+ */
+export function ContactHeaderCell() {
+  return (
+    <>
+      <T id={'contact'} />
+      <Hint
+        content={<T id={'contact_column_hint'} />}
+        position={Position.LEFT_BOTTOM}
+      />
+    </>
+  );
+}
+
+/** 
+ * Total text cell renderer.
+ */
+export const TotalAccountCellRenderer = (chainedComponent) => (props) => {
+  if (props.data.length === props.row.index + 1) {
+    return <span>{'Total USD'}</span>;
+  }
+  return chainedComponent(props);
+};
+
+/**
+ * Total credit/debit cell renderer.
+ */
+export const TotalCreditDebitCellRenderer = (chainedComponent, type) => (
+  props,
+) => {
+  if (props.data.length === props.row.index + 1) {
+    const total = props.data.reduce((total, entry) => {
+      const amount = parseInt(entry[type], 10);
+      const computed = amount ? total + amount : total;
+
+      return computed;
+    }, 0);
+
+    return (
+      <span>
+        <Money amount={total} currency={'USD'} />
+      </span>
+    );
+  }
+  return chainedComponent(props);
+};
+
+export const NoteCellRenderer = (chainedComponent) => (props) => {
+  if (props.data.length === props.row.index + 1) {
+    return '';
+  }
+  return chainedComponent(props);
+};
+
+
+/**
+ * Actions cell renderer.
+ */
+export const ActionsCellRenderer = ({
+    row: { index },
+    column: { id },
+    cell: { value: initialValue },
+    data,
+    payload,
+  }) => {
+    if (data.length <= index + 1) {
+      return '';
+    }
+    const onClickRemoveRole = () => {
+      payload.removeRow(index);
+    };
+    return (
+      <Tooltip content={<T id={'remove_the_line'} />} position={Position.LEFT}>
+        <Button
+          icon={<Icon icon="times-circle" iconSize={14} />}
+          iconSize={14}
+          className="ml2"
+          minimal={true}
+          intent={Intent.DANGER}
+          onClick={onClickRemoveRole}
+        />
+      </Tooltip>
+    );
+  };
+  

client/src/containers/Accounting/MakeJournal/utils.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import { Intent } from '@blueprintjs/core';
-import { get, sumBy, setWith, toSafeInteger } from 'lodash';
+import { sumBy, setWith, toSafeInteger, get } from 'lodash';
+
+import { transformUpdatedRows } from 'utils';
 import { AppToaster } from 'components';
 import { formatMessage } from 'services/intl';
-import { transformUpdatedRows } from 'utils';
 
 const ERROR = {
   JOURNAL_NUMBER_ALREADY_EXISTS: 'JOURNAL.NUMBER.ALREADY.EXISTS',
@@ -16,15 +17,17 @@ const ERROR = {
   ENTRIES_SHOULD_ASSIGN_WITH_CONTACT: 'ENTRIES_SHOULD_ASSIGN_WITH_CONTACT',
 };
 
-
+/**
+ * Entries adjustment.
+ */
 function adjustmentEntries(entries) {
-  const credit = sumBy(entries, e => toSafeInteger(e.credit));
+  const credit = sumBy(entries, (e) => toSafeInteger(e.credit));
-  const debit = sumBy(entries, e => toSafeInteger(e.debit));
+  const debit = sumBy(entries, (e) => toSafeInteger(e.debit));
 
   return {
     debit: Math.max(credit - debit, 0),
     credit: Math.max(debit - credit, 0),
-  }
+  };
 }
 
 export const updateDataReducer = (rows, rowIndex, columnId, value) => {

client/src/containers/Accounting/ManualJournalsDataTable.js

@@ -1,249 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-import {
-  Intent,
-  Button,
-  Popover,
-  Menu,
-  MenuItem,
-  MenuDivider,
-  Position,
-} from '@blueprintjs/core';
-import { useIntl } from 'react-intl';
-import moment from 'moment';
-import classNames from 'classnames';
-
-import {
-  DataTable,
-  If,
-  Choose,
-  Icon,
-} from 'components';
-import { CLASSES } from 'common/classes';
-import ManualJournalsEmptyStatus from './ManualJournalsEmptyStatus';
-import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
-import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
-import {
-  NoteAccessor,
-  StatusAccessor,
-  DateAccessor,
-  AmountAccessor
-} from './components';
-
-import withManualJournalsActions from 'containers/Accounting/withManualJournalsActions';
-
-import { compose, saveInvoke } from 'utils';
-import { useManualJournalsContext } from './ManualJournalsListProvider';
-
-
-/**
- * Manual journals data-table.
- */
-function ManualJournalsDataTable({
-  // #withManualJournalsActions
-  addManualJournalsTableQueries,
-
-  // #ownProps
-  onSelectedRowsChange,
-}) {
-  const { formatMessage } = useIntl();
-
-  const { manualJournals, isManualJournalsLoading } = useManualJournalsContext();
-
-  const handlePublishJournal = useCallback(
-    (journal) => () => {
-      
-    },
-    [],
-  );
-
-  const handleEditJournal = useCallback(
-    (journal) => () => {
-      
-    },
-    [],
-  );
-
-  const handleDeleteJournal = useCallback(
-    (journal) => () => {
-      
-    },
-    [],
-  );
-
-  const actionMenuList = useCallback(
-    (journal) => (
-      <Menu>
-        <MenuItem
-          icon={<Icon icon="reader-18" />}
-          text={formatMessage({ id: 'view_details' })}
-        />
-        <MenuDivider />
-        <If condition={!journal.is_published}>
-          <MenuItem
-            icon={<Icon icon="arrow-to-top" />}
-            text={formatMessage({ id: 'publish_journal' })}
-            onClick={handlePublishJournal(journal)}
-          />
-        </If>
-        <MenuItem
-          icon={<Icon icon="pen-18" />}
-          text={formatMessage({ id: 'edit_journal' })}
-          onClick={handleEditJournal(journal)}
-        />
-        <MenuItem
-          text={formatMessage({ id: 'delete_journal' })}
-          icon={<Icon icon="trash-16" iconSize={16} />}
-          intent={Intent.DANGER}
-          onClick={handleDeleteJournal(journal)}
-        />
-      </Menu>
-    ),
-    [
-      handleEditJournal,
-      handleDeleteJournal,
-      handlePublishJournal,
-      formatMessage,
-    ],
-  );
-
-  const onRowContextMenu = useCallback(
-    (cell) => actionMenuList(cell.row.original),
-    [actionMenuList],
-  );
-
-  const columns = useMemo(
-    () => [
-      {
-        id: 'date',
-        Header: formatMessage({ id: 'date' }),
-        accessor: DateAccessor,
-        width: 115,
-        className: 'date',
-      },
-      {
-        id: 'amount',
-        Header: formatMessage({ id: 'amount' }),
-        accessor: AmountAccessor,
-        className: 'amount',
-        width: 115,
-      },
-      {
-        id: 'journal_number',
-        Header: formatMessage({ id: 'journal_no' }),
-        accessor: (row) => `#${row.journal_number}`,
-        className: 'journal_number',
-        width: 100,
-      },
-      {
-        id: 'journal_type',
-        Header: formatMessage({ id: 'journal_type' }),
-        accessor: 'journal_type',
-        width: 110,
-        className: 'journal_type',
-      },
-      {
-        id: 'publish',
-        Header: formatMessage({ id: 'publish' }),
-        accessor: (row) => StatusAccessor(row),
-        width: 95,
-        className: 'publish',
-      },
-      {
-        id: 'note',
-        Header: formatMessage({ id: 'note' }),
-        accessor: NoteAccessor,
-        disableSorting: true,
-        width: 85,
-        className: 'note',
-      },
-      {
-        id: 'created_at',
-        Header: formatMessage({ id: 'created_at' }),
-        accessor: (r) => moment(r.created_at).format('YYYY MMM DD'),
-        width: 125,
-        className: 'created_at',
-      },
-      {
-        id: 'actions',
-        Header: '',
-        Cell: ({ cell }) => (
-          <Popover
-            content={actionMenuList(cell.row.original)}
-            position={Position.RIGHT_BOTTOM}
-          >
-            <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
-          </Popover>
-        ),
-        className: 'actions',
-        width: 50,
-        disableResizing: true,
-      },
-    ],
-    [actionMenuList, formatMessage],
-  );
-
-  const handleDataTableFetchData = useCallback(
-    ({ pageIndex, pageSize, sortBy }) => {
-      addManualJournalsTableQueries({
-        ...(sortBy.length > 0
-          ? {
-              column_sort_by: sortBy[0].id,
-              sort_order: sortBy[0].desc ? 'desc' : 'asc',
-            }
-          : {}),
-        page_size: pageSize,
-        page: pageIndex + 1,
-      });
-    },
-    [addManualJournalsTableQueries],
-  );
-
-  const handleSelectedRowsChange = useCallback(
-    (selectedRows) => {
-      saveInvoke(
-        onSelectedRowsChange,
-        selectedRows.map((s) => s.original),
-      );
-    },
-    [onSelectedRowsChange],
-  );
-
-  return (
-    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
-      <Choose>
-        <Choose.When condition={false}>
-          <ManualJournalsEmptyStatus />
-        </Choose.When>
-
-        <Choose.Otherwise>
-          <DataTable
-            noInitialFetch={true}
-            columns={columns}
-            data={manualJournals}
-            onFetchData={handleDataTableFetchData}
-            manualSortBy={true}
-            selectionColumn={true}
-            expandable={true}
-            sticky={true}
-            loading={isManualJournalsLoading}
-            onSelectedRowsChange={handleSelectedRowsChange}
-            rowContextMenu={onRowContextMenu}
-            // pagesCount={manualJournalsPagination.pagesCount}
-            pagination={true}
-            // initialPageSize={manualJournalsTableQuery.page_size}
-            // initialPageIndex={manualJournalsTableQuery.page - 1}
-            autoResetSortBy={false}
-            autoResetPage={false}
-
-            TableLoadingRenderer={TableSkeletonRows}
-            TableHeaderSkeletonRenderer={TableSkeletonHeader}
-          />
-        </Choose.Otherwise>
-      </Choose>
-    </div>
-  );
-}
-
-export default compose(
-  withManualJournalsActions,
-)(ManualJournalsDataTable);

client/src/containers/Accounting/ManualJournalsList.js

@@ -1,80 +0,0 @@
-import React, { useEffect, useCallback } from 'react';
-import { Route, Switch, useHistory } from 'react-router-dom';
-import {
-  FormattedMessage as T,
-  useIntl,
-} from 'react-intl';
-
-import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
-
-import { ManualJournalsListProvider } from './ManualJournalsListProvider';
-import ManualJournalsAlerts from './ManualJournalsAlerts';
-import ManualJournalsViewTabs from './ManualJournalsViewTabs';
-import ManualJournalsDataTable from './ManualJournalsDataTable';
-import ManualJournalsActionsBar from './ManualJournalActionsBar';
-
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import withManualJournals from 'containers/Accounting/withManualJournals';
-
-import { compose } from 'utils';
-
-import 'style/pages/ManualJournal/List.scss';
-
-
-/**
- * Manual journals table.
- */
-function ManualJournalsTable({
-  // #withDashboardActions
-  changePageTitle,
-
-  // #withManualJournals
-  manualJournalsTableQuery,
-}) {
-  const history = useHistory();
-  const { formatMessage } = useIntl();
-
-  // Handle update the page title.
-  useEffect(() => {
-    changePageTitle(formatMessage({ id: 'manual_journals' }));
-  }, [changePageTitle, formatMessage]);
-
-  const handleEditJournal = useCallback(
-    (journal) => {
-      history.push(`/manual-journals/${journal.id}/edit`);
-    },
-    [history],
-  );
-
-  // Handle filter change to re-fetch data-table.
-  const handleFilterChanged = useCallback(() => {}, []);
-
-  return (
-    <ManualJournalsListProvider query={manualJournalsTableQuery}>
-      <ManualJournalsActionsBar />
-
-      <DashboardPageContent>
-        <Switch>
-          <Route
-            exact={true}
-            path={[
-              '/manual-journals/:custom_view_id/custom_view',
-              '/manual-journals',
-            ]}
-          >
-            <ManualJournalsViewTabs />
-            <ManualJournalsDataTable />
-            <ManualJournalsAlerts />
-          </Route>
-        </Switch>
-      </DashboardPageContent>
-    </ManualJournalsListProvider>
-  );
-}
-
-export default compose(
-  withDashboardActions,
-  withManualJournals(({ manualJournalsTableQuery }) => ({
-    manualJournalsTableQuery,
-  })),
-)(ManualJournalsTable);

client/src/containers/Accounting/withJournalDetail.js

@@ -1,10 +0,0 @@
-import {connect} from 'react-redux';
-import {
-  getManualJournal,
-} from 'store/manualJournals/manualJournals.reducers';
-
-export const mapStateToProps = (state, props) => ({
-  manualJournal: getManualJournal(state, props.manualJournalId),
-});
-
-export default connect(mapStateToProps);

client/src/containers/Accounting/withJournalsActions.js

@@ -1,14 +0,0 @@
-import {connect} from 'react-redux';
-import {
-  makeJournalEntries,
-  fetchManualJournal,
-  editManualJournal,
-} from 'store/manualJournals/manualJournals.actions';
-
-export const mapDispatchToProps = (dispatch) => ({
-  requestMakeJournalEntries: (form) => dispatch(makeJournalEntries({ form })),
-  requestFetchManualJournal: (id) => dispatch(fetchManualJournal({ id })),
-  requestEditManualJournal: (id, form) => dispatch(editManualJournal({ id, form }))
-});
-
-export default connect(null, mapDispatchToProps);

client/src/containers/Accounting/withManualJournalDetail.js

@@ -1,11 +0,0 @@
-import { connect } from 'react-redux';
-import { getManualJournalByIdFactory } from 'store/manualJournals/manualJournals.selectors';
-
-export default () => {
-  const getManualJournalById = getManualJournalByIdFactory();
-
-  const mapStateToProps = (state, props) => ({
-    manualJournal: getManualJournalById(state, props),
-  });
-  return connect(mapStateToProps);
-};

client/src/containers/Accounting/withManualJournals.js

@@ -1,33 +0,0 @@
-import { connect } from 'react-redux';
-import { getResourceViews } from 'store/customViews/customViews.selectors';
-import {
-  getManualJournalsItems,
-  getManualJournalsPagination,
-  getManualJournalsTableQuery,
-  getManualJournalsCurrentViewIdFactory
-} from 'store/manualJournals/manualJournals.selectors';
-
-
-export default (mapState) => {
-  const getManualJournalsCurrentViewId = getManualJournalsCurrentViewIdFactory();
-  const mapStateToProps = (state, props) => {
-    const query = getManualJournalsTableQuery(state, props);
-
-    const mapped = {
-      manualJournalsCurrentPage: getManualJournalsItems(state, props, query),
-      manualJournalsTableQuery: query,
-      manualJournalsViews: getResourceViews(state, props, 'manual_journals'),
-      manualJournalsItems: state.manualJournals.items,
-
-      manualJournalsPagination: getManualJournalsPagination(state, props, query),
-      manualJournalsLoading: state.manualJournals.loading,
-
-      journalNumberChanged: state.manualJournals.journalNumberChanged,
-
-      manualJournalsCurrentViewId: getManualJournalsCurrentViewId(state, props),
-    };
-    return mapState ? mapState(mapped, state, props) : mapped;
-  };
-
-  return connect(mapStateToProps);
-};

client/src/containers/Accounting/withManualJournalsActions.js

@@ -1,33 +0,0 @@
-import { connect } from 'react-redux';
-import t from 'store/types';
-import {
-  deleteManualJournal,
-  fetchManualJournalsTable,
-  publishManualJournal,
-  deleteBulkManualJournals,
-  fetchManualJournal,
-} from 'store/manualJournals/manualJournals.actions';
-
-const mapActionsToProps = (dispatch) => ({
-  requestDeleteManualJournal: (id) => dispatch(deleteManualJournal({ id })),
-  requestFetchManualJournalsTable: (query = {}) => dispatch(fetchManualJournalsTable({ query })),
-  requestFetchManualJournal: (id) => dispatch(fetchManualJournal({ id })),
-  requestPublishManualJournal: (id) => dispatch(publishManualJournal({ id })),
-  requestDeleteBulkManualJournals: (ids) => dispatch(deleteBulkManualJournals({ ids })),
-  changeManualJournalCurrentView: (id) => dispatch({
-    type: t.MANUAL_JOURNALS_SET_CURRENT_VIEW,
-    payload: {
-      currentViewId: parseInt(id, 10),
-    }
-  }),
-  addManualJournalsTableQueries: (queries) => dispatch({
-    type: t.MANUAL_JOURNALS_TABLE_QUERIES_ADD,
-    payload: { queries },
-  }),
-  setJournalNumberChanged: (isChanged) => dispatch({
-    type: t.MANUAL_JOURNAL_NUMBER_CHANGED,
-    payload: { isChanged },
-  }),
-});
-
-export default connect(null, mapActionsToProps);

client/src/containers/Accounts/AccountActionsMenu.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import { Menu, MenuItem, MenuDivider, Intent } from '@blueprintjs/core';
-import { Icon, If } from 'components';
-import { useIntl } from 'react-intl';
-
-import withDialogs from 'containers/Dialog/withDialogActions';
-import withAlertsActions from 'containers/Alert/withAlertActions';
-
-import { compose } from 'utils';
-import { formatMessage } from 'services/intl';
-
-/**
- * Account actions menu list.
- */
-export default function AccountActionsMenuList({
-  account,
-
-  // #withAlert
-  openAlert,
-  openDialog,
-}) {
-  const { formatMessage } = useIntl();
-
-  
-  return (
-    
-  );
-}
-
-// export default compose(withDialogs, withAlertsActions)(AccountActionsMenuList);

client/src/containers/Accounts/AccountsActionsBar.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Icon from 'components/Icon';
+import { isEmpty } from 'lodash';
 import {
   Button,
   NavbarGroup,
@@ -21,6 +22,7 @@ import { useAccountsChartContext } from 'containers/Accounts/AccountsChartProvid
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAccounts from 'containers/Accounts/withAccounts';
 import withAlertActions from 'containers/Alert/withAlertActions';
+import withAccountsTableActions from './withAccountsTableActions';
 
 import { compose } from 'utils';
 
@@ -37,6 +39,9 @@ function AccountsActionsBar({
   // #withAlertActions
   openAlert,
 
+  // #withAccountsTableActions
+  setAccountsTableState,
+
   // #ownProps
   onFilterChanged,
 }) {
@@ -46,7 +51,7 @@ function AccountsActionsBar({
     openDialog('account-form', {});
   };
 
-  // handle bulk accounts delete.
+  // Handle bulk accounts delete.
   const handleBulkDelete = () => {
     openAlert('accounts-bulk-delete', { accountsIds: accountsSelectedRows });
   };
@@ -63,12 +68,18 @@ function AccountsActionsBar({
     });
   };
 
+  // Handle tab changing.
+  const handleTabChange = (viewId) => {
+    setAccountsTableState({ customViewId: viewId.id || null });
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
         <DashboardActionViewsList
           resourceName={'accounts'}
           views={resourceViews}
+          onChange={handleTabChange}
         />
         <NavbarDivider />
 
@@ -100,7 +111,7 @@ function AccountsActionsBar({
           />
         </Popover>
 
-        <If condition={accountsSelectedRows.length}>
+        <If condition={!isEmpty(accountsSelectedRows)}>
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon="play-16" iconSize={16} />}
@@ -144,8 +155,9 @@ function AccountsActionsBar({
 
 export default compose(
   withDialogActions,
+  withAlertActions,
   withAccounts(({ accountsSelectedRows }) => ({
     accountsSelectedRows,
   })),
-  withAlertActions,
+  withAccountsTableActions
 )(AccountsActionsBar);

client/src/containers/Accounts/AccountsAlerts.js

@@ -2,9 +2,9 @@ import React from 'react';
 import AccountDeleteAlert from 'containers/Alerts/AccountDeleteAlert';
 import AccountInactivateAlert from 'containers/Alerts/AccountInactivateAlert';
 import AccountActivateAlert from 'containers/Alerts/AccountActivateAlert';
-import AccountBulkDeleteAlert from 'containers/Alerts/AccountBulkDeleteAlert';
+// import AccountBulkDeleteAlert from 'containers/Alerts/AccountBulkDeleteAlert';
-import AccountBulkInactivateAlert from 'containers/Alerts/AccountBulkInactivateAlert';
+// import AccountBulkInactivateAlert from 'containers/Alerts/AccountBulkInactivateAlert';
-import AccountBulkActivateAlert from 'containers/Alerts/AccountBulkActivateAlert';
+// import AccountBulkActivateAlert from 'containers/Alerts/AccountBulkActivateAlert';
 
 /**
  * Accounts alert.
@@ -18,9 +18,9 @@ export default function AccountsAlerts({
       <AccountInactivateAlert name={'account-inactivate'} />
       <AccountActivateAlert name={'account-activate'} />
 
-      <AccountBulkDeleteAlert name={'accounts-bulk-delete'} />
+      {/* <AccountBulkDeleteAlert name={'accounts-bulk-delete'} />
       <AccountBulkInactivateAlert name={'accounts-bulk-inactivate'} />
-      <AccountBulkActivateAlert name={'accounts-bulk-activate'} />
+      <AccountBulkActivateAlert name={'accounts-bulk-activate'} /> */}
     </div>
   )
 }

client/src/containers/Accounts/AccountsChart.js

@@ -4,15 +4,17 @@ import { useIntl } from 'react-intl';
 import 'style/pages/Accounts/List.scss';
 
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
-import { AccountsChartProvider } from 'containers/Accounts/AccountsChartProvider';
+import { AccountsChartProvider } from './AccountsChartProvider';
-import AccountsViewPage from 'containers/Accounts/AccountsViewPage';
+
+import AccountsViewsTabs from 'containers/Accounts/AccountsViewsTabs';
 import AccountsActionsBar from 'containers/Accounts/AccountsActionsBar';
 import AccountsAlerts from './AccountsAlerts';
+import AccountsDataTable from './AccountsDataTable';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withAccounts from 'containers/Accounts/withAccounts';
 
-import { compose } from 'utils';
+import { transformTableStateToQuery, compose } from 'utils';
 
 /**
  * Accounts chart list.
@@ -22,7 +24,7 @@ function AccountsChart({
   changePageTitle,
 
   // #withAccounts
-  accountsTableQuery
+  accountsTableState,
 }) {
   const { formatMessage } = useIntl();
 
@@ -31,11 +33,14 @@ function AccountsChart({
   }, [changePageTitle, formatMessage]);
 
   return (
-    <AccountsChartProvider query={accountsTableQuery}>
+    <AccountsChartProvider
+      query={transformTableStateToQuery(accountsTableState)}
+    >
       <AccountsActionsBar />
 
       <DashboardPageContent>
-        <AccountsViewPage />
+        <AccountsViewsTabs />
+        <AccountsDataTable />
       </DashboardPageContent>
 
       <AccountsAlerts />
@@ -45,7 +50,5 @@ function AccountsChart({
 
 export default compose(
   withDashboardActions,
-  withAccounts(({ accountsTableQuery }) => ({
+  withAccounts(({ accountsTableState }) => ({ accountsTableState })),
-    accountsTableQuery,
-  })),
 )(AccountsChart);

client/src/containers/Accounts/AccountsChartProvider.js

@@ -9,18 +9,22 @@ const AccountsChartContext = createContext();
  */
 function AccountsChartProvider({ query, ...props }) {
   // Fetch accounts resource views and fields.
-  const { data: resourceViews, isFetching: isViewsLoading } = useResourceViews(
+  const { data: resourceViews, isLoading: isViewsLoading } = useResourceViews(
     'accounts',
   );
 
   // Fetch the accounts resource fields.
   const {
     data: resourceFields,
-    isFetching: isFieldsLoading,
+    isLoading: isFieldsLoading,
   } = useResourceFields('accounts');
 
   // Fetch accounts list according to the given custom view id.
-  const { data: accounts, isFetching: isAccountsLoading } = useAccounts(
+  const {
+    data: accounts,
+    isFetching: isAccountsFetching,
+    isLoading: isAccountsLoading
+  } = useAccounts(
     query,
     { keepPreviousData: true }
   );
@@ -32,6 +36,7 @@ function AccountsChartProvider({ query, ...props }) {
     resourceViews,
 
     isAccountsLoading,
+    isAccountsFetching,
     isFieldsLoading,
     isViewsLoading,
   };

client/src/containers/Accounts/AccountsDataTable.js

@@ -1,127 +1,75 @@
-import React, { useCallback, useMemo } from 'react';
+import React from 'react';
-import { Button, Popover, Position } from '@blueprintjs/core';
-import { useIntl } from 'react-intl';
 import classNames from 'classnames';
 
-import { Icon, DataTable } from 'components';
+import { TableFastCell, DataTable } from 'components';
-import { saveInvoke } from 'utils';
+import { compose } from 'utils';
 
 import { CLASSES } from 'common/classes';
 
-import { NormalCell, BalanceCell, AccountActionsMenu } from './components';
+import { useAccountsTableColumns, rowClassNames } from './utils';
-import { TableFastCell } from 'components';
+import { ActionsMenu } from './components';
 
 import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+import { useAccountsChartContext } from './AccountsChartProvider';
+
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDialogActions from 'containers/Dialog/withDialogActions';
 
 /**
  * Accounts data-table.
  */
-export default function AccountsDataTable({
+function AccountsDataTable({
-  // #ownProps
+  // #withAlertsDialog
-  accounts,
+  openAlert,
-  loading,
+
-  onFetchData,
+  // #withDial
-  onSelectedRowsChange,
+  openDialog,
-  // onDeleteAccount,
-  // onInactivateAccount,
-  // onActivateAccount,
-  // onEditAccount,
-  // onNewChildAccount,
 }) {
-  const { formatMessage } = useIntl();
+  const {
+    isAccountsLoading,
+    isAccountsFetching,
+    accounts,
+  } = useAccountsChartContext();
 
-  const ActionsCell = useMemo(
+  // Retrieve accounts table columns.
-    () => ({ row }) => (
+  const columns = useAccountsTableColumns();
-      <Popover
-        content={<AccountActionsMenu row={row} />}
-        position={Position.RIGHT_TOP}
-      >
-        <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
-      </Popover>
-    ),
-    [],
-  );
 
-  const RowContextMenu = useMemo(
+  // Handle delete action account.
-    () => ({ row }) => <AccountActionsMenu row={row} />,
+  const handleDeleteAccount = (account) => {
-    [],
+    openAlert('account-delete', { accountId: account.id });
-  );
+  };
 
-  const columns = useMemo(
+  // Handle activate action account.
-    () => [
+  const handleActivateAccount = (account) => {
-      {
+    openAlert('account-activate', { accountId: account.id });
-        id: 'name',
+  };
-        Header: formatMessage({ id: 'account_name' }),
-        accessor: 'name',
-        className: 'account_name',
-        width: 200,
-      },
-      {
-        id: 'code',
-        Header: formatMessage({ id: 'code' }),
-        accessor: 'code',
-        className: 'code',
-        width: 80,
-      },
-      {
-        id: 'type',
-        Header: formatMessage({ id: 'type' }),
-        accessor: 'account_type_label',
-        className: 'type',
-        width: 140,
-      },
-      {
-        id: 'normal',
-        Header: formatMessage({ id: 'normal' }),
-        Cell: NormalCell,
-        accessor: 'account_normal',
-        className: 'normal',
-        width: 80,
-      },
-      {
-        id: 'currency',
-        Header: formatMessage({ id: 'currency' }),
-        accessor: (row) => 'USD',
-        width: 75,
-      },
-      {
-        id: 'balance',
-        Header: formatMessage({ id: 'balance' }),
-        accessor: 'amount',
-        Cell: BalanceCell,
-        width: 150,
-      },
-      {
-        id: 'actions',
-        Header: '',
-        Cell: ActionsCell,
-        className: 'actions',
-        width: 50,
-        skeletonWidthMin: 100,
-      },
-    ],
-    [ActionsCell, formatMessage],
-  );
 
-  const handleDatatableFetchData = useCallback(
+  // Handle inactivate action account.
-    (...params) => {
+  const handleInactivateAccount = (account) => {
-      saveInvoke(onFetchData, params);
+    openAlert('account-inactivate', { accountId: account.id });
-    },
+  };
-    [onFetchData],
-  );
 
-  const handleSelectedRowsChange = useCallback(
+  // Handle select accounts datatable rows.
-    (selectedRows) => {
+  //   const handleSelectedRowsChange = (selectedRows) => {
-      saveInvoke(onSelectedRowsChange, selectedRows);
+  //     const selectedRowsIds = selectedRows.map((r) => r.id);
-    },
+  //     setSelectedRowsAccounts(selectedRowsIds);
-    [onSelectedRowsChange],
+  //   };
-  );
 
-  const rowClassNames = (row) => ({
+  // Handle edit account action.
-    inactive: !row.original.active,
+  const handleEditAccount = (account) => {
-  });
+    openDialog('account-form', { action: 'edit', id: account.id });
+  };
+
+  // Handle new child button click.
+  const handleNewChildAccount = (account) => {
+    openDialog('account-form', {
+      action: 'new_child',
+      parentAccountId: account.id,
+      accountType: account.account_type,
+    });
+  };
 
   return (
     <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
@@ -129,29 +77,44 @@ export default function AccountsDataTable({
         noInitialFetch={true}
         columns={columns}
         data={accounts}
-        onFetchData={handleDatatableFetchData}
         selectionColumn={true}
         expandable={true}
         sticky={true}
-        onSelectedRowsChange={handleSelectedRowsChange}
+
-        loading={loading}
+        loading={isAccountsLoading}
-        headerLoading={loading}
+        headerLoading={isAccountsLoading}
-        rowContextMenu={RowContextMenu}
+        progressBarLoading={isAccountsFetching}
+        
         rowClassNames={rowClassNames}
+
         autoResetExpanded={false}
         autoResetSortBy={false}
         autoResetSelectedRows={false}
+
         expandColumnSpace={1}
         expandToggleColumn={2}
         selectionColumnWidth={50}
+
         TableCellRenderer={TableFastCell}
         TableRowsRenderer={TableVirtualizedListRows}
         TableLoadingRenderer={TableSkeletonRows}
         TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
+
         // #TableVirtualizedListRows props.
         vListrowHeight={42}
         vListOverscanRowCount={10}
+
+        payload={{
+          onEdit: handleEditAccount,
+          onDelete: handleDeleteAccount,
+          onActivate: handleActivateAccount,
+          onInactivate: handleInactivateAccount,
+          newChild: handleNewChildAccount
+        }}
       />
     </div>
   );
 }
+
+export default compose(withAlertsActions, withDialogActions)(AccountsDataTable);

client/src/containers/Accounts/AccountsViewPage.js

@@ -1,90 +0,0 @@
-import React from 'react';
-import { Switch, Route } from 'react-router-dom';
-import AccountsViewsTabs from 'containers/Accounts/AccountsViewsTabs';
-import AccountsDataTable from 'containers/Accounts/AccountsDataTable';
-import { useAccountsChartContext } from 'containers/Accounts/AccountsChartProvider';
-
-import withAccountsTableActions from 'containers/Accounts/withAccountsTableActions';
-import withAlertsActions from 'containers/Alert/withAlertActions';
-import withDialogActions from 'containers/Dialog/withDialogActions';
-
-import { compose } from 'utils';
-
-/**
- * Accounts view page.
- */
-function AccountsViewPage({
-  // #withAlertActions
-  openAlert,
-
-  // #withDialog.
-  openDialog,
-
-  // #withAccountsTableActions
-  setSelectedRowsAccounts,
-}) {
-  const { isAccountsLoading, accounts } = useAccountsChartContext();
-
-  // Handle delete action account.
-  const handleDeleteAccount = (account) => {
-    // openAlert('account-delete', { accountId: account.id });
-  };
-
-  // Handle activate action account.
-  const handleActivateAccount = (account) => {
-    // openAlert('account-activate', { accountId: account.id });
-  };
-
-  // Handle inactivate action account.
-  const handleInactivateAccount = (account) => {
-    // openAlert('account-inactivate', { accountId: account.id });
-  };
-
-  // Handle select accounts datatable rows.
-  //   const handleSelectedRowsChange = (selectedRows) => {
-  //     const selectedRowsIds = selectedRows.map((r) => r.id);
-  //     setSelectedRowsAccounts(selectedRowsIds);
-  //   };
-
-  // Handle edit account action.
-  const handleEditAccount = (account) => {
-    // openDialog('account-form', { action: 'edit', id: account.id });
-  };
-
-  // Handle new child button click.
-  const handleNewChildAccount = (account) => {
-    // openDialog('account-form', {
-    //   action: 'new_child',
-    //   parentAccountId: account.id,
-    //   accountType: account.account_type,
-    // });
-  };
-
-  return (
-    <Switch>
-      <Route
-        exact={true}
-        path={['/accounts/:custom_view_id/custom_view', '/accounts']}
-      >
-        <AccountsViewsTabs />
-
-        <AccountsDataTable
-          loading={isAccountsLoading}
-          accounts={accounts}
-          // onDeleteAccount={handleDeleteAccount}
-          // onInactivateAccount={handleInactivateAccount}
-          // onActivateAccount={handleActivateAccount}
-          // onSelectedRowsChange={handleSelectedRowsChange}
-          // onEditAccount={handleEditAccount}
-          // onNewChildAccount={handleNewChildAccount}
-        />
-      </Route>
-    </Switch>
-  );
-}
-
-export default compose(
-  withAlertsActions,
-  withAccountsTableActions,
-  withDialogActions,
-)(AccountsViewPage);

client/src/containers/Accounts/AccountsViewsTabs.js

@@ -1,12 +1,12 @@
 import React, { useMemo, useCallback } from 'react';
 import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
-import { useParams  } from 'react-router-dom';
 import { pick } from 'lodash';
 
 import { DashboardViewsTabs } from 'components';
 import { useAccountsChartContext } from 'containers/Accounts/AccountsChartProvider';
 
-import withAccountsTableActions from 'containers/Accounts/withAccountsTableActions';
+import withAccountsTableActions from './withAccountsTableActions';
+import withAccounts from './withAccounts';
 
 import { compose } from 'utils';
 
@@ -15,18 +15,22 @@ import { compose } from 'utils';
  */
 function AccountsViewsTabs({
   // #withAccountsTableActions
-  addAccountsTableQuery,
+  setAccountsTableState,
-}) {
-  const { resourceViews } = useAccountsChartContext();
-  const { custom_view_id: customViewId = null } = useParams();
 
+  // #withAccounts
+  accountsCustomViewId
+}) {
+  // Accounts chart context.
+  const { resourceViews } = useAccountsChartContext();
+
+  // Handles the tab change.
   const handleTabChange = useCallback(
     (viewId) => {
-      addAccountsTableQuery({
+      setAccountsTableState({
-        custom_view_id: viewId || null,
+        customViewId: viewId || null,
       });
     },
-    [addAccountsTableQuery],
+    [setAccountsTableState],
   );
 
   const tabs = useMemo(
@@ -42,7 +46,7 @@ function AccountsViewsTabs({
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
           defaultTabText={'All Accounts'}
-          initialViewId={customViewId}
+          currentViewId={accountsCustomViewId}
           resourceName={'accounts'}
           onChange={handleTabChange}
           tabs={tabs}
@@ -54,4 +58,7 @@ function AccountsViewsTabs({
 
 export default compose(
   withAccountsTableActions,
+  withAccounts(({ accountsTableState }) => ({
+    accountsCustomViewId: accountsTableState.customViewId
+  }))
 )(AccountsViewsTabs);

client/src/containers/Accounts/components.js

@@ -6,65 +6,97 @@ import {
   MenuItem,
   Menu,
   MenuDivider,
-  Intent
+  Intent,
+  Popover,
+  Button,
 } from '@blueprintjs/core';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
-import classNames from 'classnames';
 import { Icon, Money, If } from 'components';
-import { saveInvoke } from 'utils';
 import { formatMessage } from 'services/intl';
+import { safeCallback } from 'utils';
 
-export function AccountActionsMenu({ row: { original } }) {
+/**
+ * Accounts table actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: {
+    onEdit,
+    onViewDetails,
+    onDelete,
+    onNewChild,
+    onActivate,
+    onInactivate,
+  },
+}) {
   return (
     <Menu>
       <MenuItem
         icon={<Icon icon="reader-18" />}
         text={formatMessage({ id: 'view_details' })}
+        onClick={safeCallback(onViewDetails, original)}
       />
       <MenuDivider />
       <MenuItem
         icon={<Icon icon="pen-18" />}
         text={formatMessage({ id: 'edit_account' })}
-        // onClick={handleEditAccount}
+        onClick={safeCallback(onEdit, original)}
       />
       <MenuItem
         icon={<Icon icon="plus" />}
         text={formatMessage({ id: 'new_child_account' })}
-        // onClick={handleNewChildAccount}
+        onClick={safeCallback(onNewChild, original)}
       />
       <MenuDivider />
       <If condition={original.active}>
         <MenuItem
           text={formatMessage({ id: 'inactivate_account' })}
           icon={<Icon icon="pause-16" iconSize={16} />}
-          // onClick={handleInactivateAccount}
+          onClick={safeCallback(onInactivate, original)}
         />
       </If>
       <If condition={!original.active}>
         <MenuItem
           text={formatMessage({ id: 'activate_account' })}
           icon={<Icon icon="play-16" iconSize={16} />}
-          // onClick={handleActivateAccount}
+          onClick={safeCallback(onActivate, original)}
         />
       </If>
       <MenuItem
         text={formatMessage({ id: 'delete_account' })}
         icon={<Icon icon="trash-16" iconSize={16} />}
         intent={Intent.DANGER}
-        // onClick={handleDeleteA ccount}
+        onClick={safeCallback(onDelete, original)}
       />
     </Menu>
   );
 }
 
+/**
+ * Actions cell.
+ */
+export const ActionsCell = (props) => {
+  return (
+    <Popover
+      position={Position.RIGHT_BOTTOM}
+      content={<ActionsMenu {...props} />}
+    >
+      <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
+    </Popover>
+  );
+};
 
+/**
+ * Normal cell.
+ */
 export function NormalCell({ cell: { value } }) {
   const { formatMessage } = useIntl();
   const arrowDirection = value === 'credit' ? 'down' : 'up';
 
-  // if (value !== 'credit' || value !== 'debit') {
+  // Can't continue if the value is not `credit` or `debit`.
-  //   return '';
+  if (['credit', 'debit'].indexOf(value) === -1) {
-  // }
+    return '';
+  }
   return (
     <Tooltip
       className={Classes.TOOLTIP_INDICATOR}
@@ -77,6 +109,9 @@ export function NormalCell({ cell: { value } }) {
   );
 }
 
+/**
+ * Balance cell.
+ */
 export function BalanceCell({ cell }) {
   const account = cell.row.original;
 
@@ -88,19 +123,3 @@ export function BalanceCell({ cell }) {
     <span class="placeholder">—</span>
   );
 }
-
-export function InactiveSemafro() {
-  return (
-    <Tooltip
-      content={<T id="inactive" />}
-      className={classNames(
-        Classes.TOOLTIP_INDICATOR,
-        'bp3-popover-wrapper--inactive-semafro',
-      )}
-      position={Position.TOP}
-      hoverOpenDelay={250}
-    >
-      <div className="inactive-semafro"></div>
-    </Tooltip>
-  );
-}

client/src/containers/Accounts/utils.js

@@ -2,7 +2,11 @@ import React from 'react';
 import { Intent } from '@blueprintjs/core';
 import { If, AppToaster } from 'components';
 import { formatMessage } from 'services/intl';
+import { NormalCell, BalanceCell, ActionsCell } from './components';
 
+/**
+ * Account name accessor.
+ */
 export const accountNameAccessor = (account) => {
   return (
     <span>
@@ -14,7 +18,9 @@ export const accountNameAccessor = (account) => {
   );
 };
 
-// Handle delete errors in bulk and singular.
+/**
+ * Handle delete errors in bulk and singular.
+ */
 export const handleDeleteErrors = (errors) => {
   if (errors.find((e) => e.type === 'ACCOUNT.PREDEFINED')) {
     AppToaster.show({
@@ -33,3 +39,68 @@ export const handleDeleteErrors = (errors) => {
     });
   }
 };
+
+/**
+ * Accounts table columns.
+ */
+export const useAccountsTableColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        id: 'name',
+        Header: formatMessage({ id: 'account_name' }),
+        accessor: 'name',
+        className: 'account_name',
+        width: 200,
+      },
+      {
+        id: 'code',
+        Header: formatMessage({ id: 'code' }),
+        accessor: 'code',
+        className: 'code',
+        width: 80,
+      },
+      {
+        id: 'type',
+        Header: formatMessage({ id: 'type' }),
+        accessor: 'account_type_label',
+        className: 'type',
+        width: 140,
+      },
+      {
+        id: 'normal',
+        Header: formatMessage({ id: 'normal' }),
+        Cell: NormalCell,
+        accessor: 'account_normal',
+        className: 'normal',
+        width: 80,
+      },
+      {
+        id: 'currency',
+        Header: formatMessage({ id: 'currency' }),
+        accessor: (row) => 'USD',
+        width: 75,
+      },
+      {
+        id: 'balance',
+        Header: formatMessage({ id: 'balance' }),
+        accessor: 'amount',
+        Cell: BalanceCell,
+        width: 150,
+      },
+      {
+        id: 'actions',
+        Header: '',
+        Cell: ActionsCell,
+        className: 'actions',
+        width: 50,
+        skeletonWidthMin: 100,
+      },
+    ],
+    [],
+  )
+}
+
+export const rowClassNames = (row) => ({
+  inactive: !row.original.active,
+});

client/src/containers/Accounts/withAccountDetail.js

@@ -1,8 +0,0 @@
-import { connect } from 'react-redux';
-import { getAccountById } from 'store/accounts/accounts.selectors';
-
-const mapStateToProps = (state, props) => ({
-  account: getAccountById(state, props),
-});
-
-export default connect(mapStateToProps);

client/src/containers/Accounts/withAccounts.js

@@ -1,24 +1,15 @@
 import { connect } from 'react-redux';
 import {
-  getAccountsItems,
+  getAccountsTableStateFactory,
-  getAccountsListFactory,
-  getAccountsTableQuery,
 } from 'store/accounts/accounts.selectors';
-import { getResourceViews } from 'store/customViews/customViews.selectors';
 
 export default (mapState) => {
-  const getAccountsList = getAccountsListFactory();
+  const getAccountsTableState = getAccountsTableStateFactory();
 
   const mapStateToProps = (state, props) => {
     const mapped = {
-      accountsViews: getResourceViews(state, props, 'accounts'),
+      accountsTableState: getAccountsTableState(state, props),
-      accountsTable: getAccountsItems(state, props),
+      accountsSelectedRows: null,
-      accountsList: getAccountsList(state, props),
-      accountsTypes: state.accounts.accountsTypes,
-      accountsTableQuery: state.accounts.tableQuery,
-      accountsLoading: state.accounts.loading,
-      accountErrors: state.accounts.errors,
-      accountsSelectedRows: state.accounts.selectedRows,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

client/src/containers/Accounts/withAccountsActions.js

@@ -1,30 +0,0 @@
-import { connect } from 'react-redux';
-import {
-  fetchAccountTypes,
-  fetchAccountsList,
-  deleteAccount,
-  inactiveAccount,
-  activateAccount,
-  submitAccount,
-  fetchAccount,
-  deleteBulkAccounts,
-  bulkActivateAccounts,
-  bulkInactiveAccounts,
-  editAccount,
-} from 'store/accounts/accounts.actions';
-
-const mapActionsToProps = (dispatch) => ({
-  requestFetchAccounts: (query) => dispatch(fetchAccountsList({ query })),
-  requestFetchAccountTypes: () => dispatch(fetchAccountTypes()),
-  requestSubmitAccount: ({ form }) => dispatch(submitAccount({ form })),
-  requestDeleteAccount: (id) => dispatch(deleteAccount({ id })),
-  requestInactiveAccount: (id) => dispatch(inactiveAccount({ id })),
-  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 })),
-  requestEditAccount: (id, form) => dispatch(editAccount(id, form)),
-});
-
-export default connect(null, mapActionsToProps);

client/src/containers/Accounts/withAccountsTableActions.js

@@ -1,32 +1,8 @@
 import { connect } from 'react-redux';
-import t from 'store/types';
+import { setAccountsTableState } from 'store/accounts/accounts.actions';
-import { fetchAccountsTable, setBulkAction } from 'store/accounts/accounts.actions';
 
 const mapActionsToProps = (dispatch) => ({
-  requestFetchAccountsTable: (query = {}) =>
+  setAccountsTableState: (queries) => dispatch(setAccountsTableState(queries)),
-    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,
-    }),
-  addAccountsTableQuery: (queries) =>
-    dispatch({
-      type: t.ACCOUNTS_TABLE_QUERIES_ADD,
-      payload: { queries },
-    }),
-  setSelectedRowsAccounts: (selectedRows) =>
-    dispatch({
-      type: t.ACCOUNTS_SELECTED_ROWS_SET,
-      payload: { selectedRows },
-    }),
-  setAccountsBulkAction: (actionName) => setBulkAction(actionName),
 });
 
 export default connect(null, mapActionsToProps);

client/src/containers/Alerts/AccountDeleteAlert.js

@@ -30,10 +30,7 @@ function AccountDeleteAlert({
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
-  const {
+  const { isLoading, mutateAsync: deleteAccount } = useDeleteAccount();
-    isLoading,
-    mutateAsync: deleteAccount,
-  } = useDeleteAccount();
 
   // handle cancel delete account alert.
   const handleCancelAccountDelete = () => {
@@ -41,17 +38,25 @@ function AccountDeleteAlert({
   };
   // Handle confirm account delete.
   const handleConfirmAccountDelete = () => {
-    deleteAccount(accountId).then(() => {
+    deleteAccount(accountId)
-      AppToaster.show({
+      .then(() => {
-        message: formatMessage({
+        AppToaster.show({
-          id: 'the_account_has_been_successfully_deleted',
+          message: formatMessage({
-        }),
+            id: 'the_account_has_been_successfully_deleted',
-        intent: Intent.SUCCESS,
+          }),
+          intent: Intent.SUCCESS,
+        });
+        closeAlert(name);
+      })
+      .catch((error) => {
+        const {
+          response: {
+            data: { errors },
+          },
+        } = error;
+        handleDeleteErrors(errors);
+        closeAlert(name);
       });
-      closeAlert(name);
-    }).catch(errors => {
-      handleDeleteErrors(errors);
-    });
   };
 
   return (

client/src/containers/Alerts/Customers/CustomerBulkDeleteAlert.js

@@ -6,7 +6,6 @@ import { transformErrors } from 'containers/Customers/utils';
 
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
-import withCustomersActions from 'containers/Customers/withCustomersActions';
 
 import { compose } from 'utils';
 
@@ -19,8 +18,6 @@ function CustomerBulkDeleteAlert({
   // #withAlertStoreConnect
   isOpen,
   payload: { customersIds },
-  // #withCustomersActions
-  requestDeleteBulkCustomers,
 
   // #withAlertActions
   closeAlert,
@@ -77,5 +74,4 @@ function CustomerBulkDeleteAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withCustomersActions,
 )(CustomerBulkDeleteAlert);

client/src/containers/Alerts/Customers/CustomerDeleteAlert.js

@@ -1,17 +1,15 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import {
   FormattedMessage as T,
   FormattedHTMLMessage,
   useIntl,
 } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
-import { queryCache } from 'react-query';
 import { AppToaster } from 'components';
 import { transformErrors } from 'containers/Customers/utils';
 
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
-import withCustomersActions from 'containers/Customers/withCustomersActions';
 
 import { useDeleteCustomer } from 'hooks/query';
 import { compose } from 'utils';
@@ -26,8 +24,6 @@ function CustomerDeleteAlert({
   // #withAlertStoreConnect
   isOpen,
   payload: { customerId },
-  // #withCustomersActions
-  requestDeleteCustomer,
 
   // #withAlertActions
   closeAlert,
@@ -53,9 +49,8 @@ function CustomerDeleteAlert({
           }),
           intent: Intent.SUCCESS,
         });
-        queryCache.invalidateQueries('customers-table');
       })
-      .catch((errors) => {
+      .catch(({ response: { data: { errors } } }) => {
         transformErrors(errors);
       })
       .finally(() => {
@@ -86,5 +81,4 @@ function CustomerDeleteAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withCustomersActions,
 )(CustomerDeleteAlert);

client/src/containers/Alerts/Expenses/ExpenseDeleteAlert.js

@@ -24,7 +24,6 @@ function ExpenseDeleteAlert({
   const {
     mutateAsync: deleteExpenseMutate,
     isLoading,
-    deleteExpense
   } = useDeleteExpense();
 
   // Handle cancel expense journal.

client/src/containers/Alerts/Expenses/ExpensePublishAlert.js

@@ -37,8 +37,11 @@ function ExpensePublishAlert({
           }),
           intent: Intent.SUCCESS,
         });
+        closeAlert(name)
       })
-      .catch((error) => {});
+      .catch((error) => {
+        closeAlert(name)
+      });
   };
 
   return (

client/src/containers/Alerts/ManualJournals/JournalDeleteAlert.js

@@ -24,7 +24,7 @@ function JournalDeleteAlert({
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
-  const { mutate: deleteJournalMutate } = useDeleteJournal();
+  const { mutateAsync: deleteJournalMutate, isLoading } = useDeleteJournal();
 
   // Handle cancel delete manual journal.
   const handleCancelAlert = () => {
@@ -33,16 +33,20 @@ function JournalDeleteAlert({
 
   // Handle confirm delete manual journal.
   const handleConfirmManualJournalDelete = () => {
-    deleteJournalMutate(manualJournalId).then(() => {
+    deleteJournalMutate(manualJournalId)
-      AppToaster.show({
+      .then(() => {
-        message: formatMessage(
+        AppToaster.show({
-          { id: 'the_journal_has_been_deleted_successfully' },
+          message: formatMessage(
-          { number: journalNumber },
+            { id: 'the_journal_has_been_deleted_successfully' },
-        ),
+            { number: journalNumber },
-        intent: Intent.SUCCESS,
+          ),
+          intent: Intent.SUCCESS,
+        });
+        closeAlert(name);
+      })
+      .catch(() => {
+        closeAlert(name);
       });
-      
-    });
   };
 
   return (
@@ -54,6 +58,7 @@ function JournalDeleteAlert({
       isOpen={isOpen}
       onCancel={handleCancelAlert}
       onConfirm={handleConfirmManualJournalDelete}
+      loading={isLoading}
     >
       <p>
         <T id={'once_delete_this_journal_you_will_able_to_restore_it'} />

client/src/containers/Alerts/ManualJournals/JournalPublishAlert.js

@@ -24,7 +24,7 @@ function JournalPublishAlert({
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
-  const { mutate: publishJournalMutate, isLoading } = usePublishJournal();
+  const { mutateAsync: publishJournalMutate, isLoading } = usePublishJournal();
 
   // Handle cancel manual journal alert.
   const handleCancel = () => {

client/src/containers/Alerts/Vendors/VendorDeleteAlert.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import {
   FormattedMessage as T,
   FormattedHTMLMessage,
@@ -7,12 +7,12 @@ import {
 import { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 import { transformErrors } from 'containers/Customers/utils';
+import { useDeleteVendor } from 'hooks/query';
 
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
+
 import { compose } from 'utils';
-import {
-  useDeleteVendor
-} from 'hooks/query';
 
 /**
  * Vendor delete alert.
@@ -78,5 +78,6 @@ function VendorDeleteAlert({
 }
 
 export default compose(
+  withAlertStoreConnect(),
   withAlertActions,
 )(VendorDeleteAlert);

client/src/containers/Customers/CustomerForm/CustomerFloatingActions.js

@@ -11,8 +11,10 @@ import {
 } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
 import classNames from 'classnames';
-import { CLASSES } from 'common/classes';
+import { useHistory } from 'react-router-dom';
 import { useFormikContext } from 'formik';
+
+import { CLASSES } from 'common/classes';
 import { Icon } from 'components';
 import { useCustomerFormContext } from './CustomerFormProvider';
 
@@ -20,6 +22,8 @@ import { useCustomerFormContext } from './CustomerFormProvider';
  * Customer floating actions bar.
  */
 export default function CustomerFloatingActions() {
+  const history = useHistory();
+
   // Customer form context.
   const { customerId, setSubmitPayload } = useCustomerFormContext();
 
@@ -33,7 +37,7 @@ export default function CustomerFloatingActions() {
 
   // Handle cancel button click.
   const handleCancelBtnClick = (event) => {
-    
+    history.goBack();
   };
 
   // handle clear button clicl.

client/src/containers/Customers/CustomerForm/CustomerForm.js

@@ -1,5 +1,4 @@
 import React, { useMemo, useEffect } from 'react';
-import * as Yup from 'yup';
 import { Formik, Form } from 'formik';
 import moment from 'moment';
 import { Intent } from '@blueprintjs/core';
@@ -12,7 +11,7 @@ import AppToaster from 'components/AppToaster';
 
 import CustomerFormPrimarySection from './CustomerFormPrimarySection';
 import CustomerFormAfterPrimarySection from './CustomerFormAfterPrimarySection';
-import CustomersTabs from 'containers/Customers/CustomersTabs';
+import CustomersTabs from './CustomersTabs';
 import CustomerFloatingActions from './CustomerFloatingActions';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
@@ -20,6 +19,7 @@ import withSettings from 'containers/Settings/withSettings';
 
 import { compose, transformToForm } from 'utils';
 import { useCustomerFormContext } from './CustomerFormProvider';
+import { CreateCustomerForm, EditCustomerForm } from './CustomerForm.schema';
 
 const defaultInitialValues = {
   customer_type: 'business',
@@ -79,49 +79,6 @@ function CustomerForm({
   const history = useHistory();
   const { formatMessage } = useIntl();
 
-  const validationSchema = Yup.object().shape({
-    customer_type: Yup.string()
-      .required()
-      .trim()
-      .label(formatMessage({ id: 'customer_type_' })),
-    salutation: Yup.string().trim(),
-    first_name: Yup.string().trim(),
-    last_name: Yup.string().trim(),
-    company_name: Yup.string().trim(),
-    display_name: Yup.string()
-      .trim()
-      .required()
-      .label(formatMessage({ id: 'display_name_' })),
-
-    email: Yup.string().email().nullable(),
-    work_phone: Yup.number(),
-    personal_phone: Yup.number(),
-    website: Yup.string().url().nullable(),
-
-    active: Yup.boolean(),
-    note: Yup.string().trim(),
-
-    billing_address_country: Yup.string().trim(),
-    billing_address_1: Yup.string().trim(),
-    billing_address_2: Yup.string().trim(),
-    billing_address_city: Yup.string().trim(),
-    billing_address_state: Yup.string().trim(),
-    billing_address_postcode: Yup.number().nullable(),
-    billing_address_phone: Yup.number(),
-
-    shipping_address_country: Yup.string().trim(),
-    shipping_address_1: Yup.string().trim(),
-    shipping_address_2: Yup.string().trim(),
-    shipping_address_city: Yup.string().trim(),
-    shipping_address_state: Yup.string().trim(),
-    shipping_address_postcode: Yup.number().nullable(),
-    shipping_address_phone: Yup.number(),
-
-    opening_balance: Yup.number().nullable(),
-    currency_code: Yup.string(),
-    opening_balance_at: Yup.date(),
-  });
-
   /**
    * Initial values in create and edit mode.
    */
@@ -180,7 +137,7 @@ function CustomerForm({
   return (
     <div className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_CUSTOMER)}>
       <Formik
-        validationSchema={validationSchema}
+        validationSchema={isNewMode ? CreateCustomerForm : EditCustomerForm}
         initialValues={initialValues}
         onSubmit={handleFormSubmit}
       >

client/src/containers/Customers/CustomerForm/CustomerForm.schema.js

@@ -0,0 +1,49 @@
+import * as Yup from 'yup';
+import { formatMessage } from 'services/intl';
+
+
+const Schema = Yup.object().shape({
+    customer_type: Yup.string()
+      .required()
+      .trim()
+      .label(formatMessage({ id: 'customer_type_' })),
+    salutation: Yup.string().trim(),
+    first_name: Yup.string().trim(),
+    last_name: Yup.string().trim(),
+    company_name: Yup.string().trim(),
+    display_name: Yup.string()
+      .trim()
+      .required()
+      .label(formatMessage({ id: 'display_name_' })),
+
+    email: Yup.string().email().nullable(),
+    work_phone: Yup.number(),
+    personal_phone: Yup.number(),
+    website: Yup.string().url().nullable(),
+
+    active: Yup.boolean(),
+    note: Yup.string().trim(),
+
+    billing_address_country: Yup.string().trim(),
+    billing_address_1: Yup.string().trim(),
+    billing_address_2: Yup.string().trim(),
+    billing_address_city: Yup.string().trim(),
+    billing_address_state: Yup.string().trim(),
+    billing_address_postcode: Yup.number().nullable(),
+    billing_address_phone: Yup.number(),
+
+    shipping_address_country: Yup.string().trim(),
+    shipping_address_1: Yup.string().trim(),
+    shipping_address_2: Yup.string().trim(),
+    shipping_address_city: Yup.string().trim(),
+    shipping_address_state: Yup.string().trim(),
+    shipping_address_postcode: Yup.number().nullable(),
+    shipping_address_phone: Yup.number(),
+
+    opening_balance: Yup.number().nullable(),
+    currency_code: Yup.string(),
+    opening_balance_at: Yup.date(),
+  });
+
+export const CreateCustomerForm = Schema;
+export const EditCustomerForm = Schema;

client/src/containers/Customers/CustomerForm/CustomerFormPage.js

@@ -5,14 +5,9 @@ import { DashboardCard } from 'components';
 import CustomerForm from './CustomerForm';
 import { CustomerFormProvider } from './CustomerFormProvider';
 
-import withCustomersActions from './withCustomersActions';
-import withCurrenciesActions from 'containers/Currencies/withCurrenciesActions';
-
-import { compose } from 'utils';
-
 import 'style/pages/Customers/PageForm.scss';
 
-function CustomerFormPage() {
+export default function CustomerFormPage() {
   const { id } = useParams();
 
   return (
@@ -23,8 +18,3 @@ function CustomerFormPage() {
     </CustomerFormProvider>
   );
 }
-
-export default compose(
-  withCustomersActions,
-  withCurrenciesActions,
-)(CustomerFormPage);

client/src/containers/Customers/CustomerForm/CustomerFormPrimarySection.js

@@ -9,7 +9,7 @@ import {
   SalutationList,
   DisplayNameList,
 } from 'components';
-import CustomerTypeRadioField from 'containers/Customers/CustomerTypeRadioField';
+import CustomerTypeRadioField from './CustomerTypeRadioField';
 import { CLASSES } from 'common/classes';
 import { inputIntent } from 'utils';
 import { useAutofocus } from 'hooks';

client/src/containers/Customers/CustomerForm/CustomersTabs.js

@@ -1,6 +1,7 @@
-import React, { useState, useCallback } from 'react';
+import React from 'react';
 import { Tabs, Tab } from '@blueprintjs/core';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
+
 import CustomerAddressTabs from './CustomerAddressTabs';
 import CustomerAttachmentTabs from './CustomerAttachmentTabs';
 import CustomerFinancialPanel from './CustomerFinancialPanel';

client/src/containers/Customers/CustomerTable.js

@@ -1,247 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-import {
-  Button,
-  Popover,
-  Menu,
-  MenuItem,
-  MenuDivider,
-  Position,
-  Intent,
-} from '@blueprintjs/core';
-import { useIntl } from 'react-intl';
-import classNames from 'classnames';
-
-import CustomersEmptyStatus from './CustomersEmptyStatus';
-import { DataTable, Icon, Money, Choose } from 'components';
-import { CLASSES } from 'common/classes';
-
-import withCustomers from './withCustomers';
-import withCustomersActions from './withCustomersActions';
-
-import { compose, firstLettersArgs, saveInvoke } from 'utils';
-
-const AvatarCell = (row) => {
-  return <span className="avatar">{firstLettersArgs(row.display_name)}</span>;
-};
-
-const PhoneNumberAccessor = (row) => (
-  <div>
-    <div className={'work_phone'}>{row.work_phone}</div>
-    <div className={'personal_phone'}>{row.personal_phone}</div>
-  </div>
-);
-
-const BalanceAccessor = (row) => {
-  return (<Money amount={row.closing_balance} currency={row.currency_code} />);
-};
-
-
-function CustomerTable({
-  //#withCustomers
-  customers,
-  customersLoading,
-  customerPagination,
-  customersTableQuery,
-  customersCurrentViewId,
-
-  // #withCustomersActions
-  addCustomersTableQueries,
-
-  //#OwnProps
-  loading,
-  onEditCustomer,
-  onDeleteCustomer,
-  onFetchData,
-  onSelectedRowsChange,
-}) {
-  const { formatMessage } = useIntl();
-
-  // Customers actions list.
-  const renderContextMenu = useMemo(
-    () => ({ customer, onEditCustomer, onDeleteCustomer }) => {
-      const handleEditCustomer = () => {
-        saveInvoke(onEditCustomer, customer);
-      };
-      const handleDeleteCustomer = () => {
-        saveInvoke(onDeleteCustomer, customer);
-      };
-      return (
-        <Menu>
-          <MenuItem
-            icon={<Icon icon="reader-18" />}
-            text={formatMessage({ id: 'view_details' })}
-          />
-          <MenuDivider />
-          <MenuItem
-            icon={<Icon icon="pen-18" />}
-            text={formatMessage({ id: 'edit_customer' })}
-            onClick={handleEditCustomer}
-          />
-          <MenuItem
-            icon={<Icon icon="trash-16" iconSize={16} />}
-            text={formatMessage({ id: 'delete_customer' })}
-            intent={Intent.DANGER}
-            onClick={handleDeleteCustomer}
-          />
-        </Menu>
-      );
-    },
-    [formatMessage],
-  );
-
-  // Renders actions table cell.
-  const renderActionsCell = useMemo(
-    () => ({ cell }) => (
-      <Popover
-        content={renderContextMenu({
-          customer: cell.row.original,
-          onEditCustomer,
-          onDeleteCustomer,
-        })}
-        position={Position.RIGHT_BOTTOM}
-      >
-        <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
-      </Popover>
-    ),
-    [onDeleteCustomer, onEditCustomer, renderContextMenu],
-  );
-
-  // Table columns.
-  const columns = useMemo(
-    () => [
-      {
-        id: 'avatar',
-        Header: '',
-        accessor: AvatarCell,
-        className: 'avatar',
-        width: 50,
-        disableResizing: true,
-        disableSortBy: true,
-      },
-      {
-        id: 'display_name',
-        Header: formatMessage({ id: 'display_name' }),
-        accessor: 'display_name',
-        className: 'display_name',
-        width: 150,
-      },
-      {
-        id: 'company_name',
-        Header: formatMessage({ id: 'company_name' }),
-        accessor: 'company_name',
-        className: 'company_name',
-        width: 150,
-      },
-      {
-        id: 'phone_number',
-        Header: formatMessage({ id: 'phone_number' }),
-        accessor: PhoneNumberAccessor,
-        className: 'phone_number',
-        width: 100,
-      },
-      {
-        id: 'receivable_balance',
-        Header: formatMessage({ id: 'receivable_balance' }),
-        accessor: BalanceAccessor,
-        className: 'receivable_balance',
-        width: 100,
-      },
-      {
-        id: 'actions',
-        Cell: renderActionsCell,
-        className: 'actions',
-        width: 70,
-        disableResizing: true,
-        disableSortBy: true,
-      },
-    ],
-    [formatMessage, renderActionsCell],
-  );
-
-  // Handle fetch data table.
-  const handleFetchData = useCallback(
-    ({ pageIndex, pageSize, sortBy }) => {
-      addCustomersTableQueries({
-        page: pageIndex + 1,
-        page_size: pageSize,
-        ...(sortBy.length > 0
-          ? {
-              column_sort_order: sortBy[0].id,
-              sort_order: sortBy[0].desc ? 'desc' : 'asc',
-            }
-          : {}),
-      });
-    },
-    [addCustomersTableQueries],
-  );
-
-  const handleSelectedRowsChange = useCallback(
-    (selectedRows) => {
-      onSelectedRowsChange &&
-        onSelectedRowsChange(selectedRows.map((s) => s.original));
-    },
-    [onSelectedRowsChange],
-  );
-
-  const rowContextMenu = (cell) =>
-    renderContextMenu({
-      customer: cell.row.original,
-      onEditCustomer,
-      onDeleteCustomer,
-    });
-
-  const showEmptyStatus = [
-    customersCurrentViewId === -1,
-    customers.length === 0,
-  ].every((condition) => condition === true);
-  return (
-    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
-      <Choose>
-        <Choose.When condition={showEmptyStatus}>
-          <CustomersEmptyStatus />
-        </Choose.When>
-
-        <Choose.Otherwise>
-          <DataTable
-            noInitialFetch={true}
-            columns={columns}
-            data={customers}
-            onFetchData={handleFetchData}
-            selectionColumn={true}
-            expandable={false}
-            sticky={true}
-            onSelectedRowsChange={handleSelectedRowsChange}
-            spinnerProps={{ size: 30 }}
-            rowContextMenu={rowContextMenu}
-            pagination={true}
-            manualSortBy={true}
-            pagesCount={customerPagination.pagesCount}
-            autoResetSortBy={false}
-            autoResetPage={false}
-            initialPageSize={customersTableQuery.page_size}
-            initialPageIndex={customersTableQuery.page - 1}
-          />
-        </Choose.Otherwise>
-      </Choose>
-    </div>
-  );
-};
-
-export default compose(
-  withCustomers(
-    ({
-      customers,
-      customersLoading,
-      customerPagination,
-      customersTableQuery,
-      customersCurrentViewId,
-    }) => ({
-      customers,
-      customersLoading,
-      customerPagination,
-      customersTableQuery,
-      customersCurrentViewId,
-    }),
-  ),
-  withCustomersActions,
-)(CustomerTable);

client/src/containers/Customers/CustomersAlerts.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import CustomerDeleteAlert from 'containers/Alerts/Customers/CustomerDeleteAlert';
-import CustomerBulkDeleteAlert from 'containers/Alerts/Customers/CustomerBulkDeleteAlert';
+// import CustomerBulkDeleteAlert from 'containers/Alerts/Customers/CustomerBulkDeleteAlert';
 
 /**
  * Customers alert.
@@ -9,7 +9,7 @@ export default function ItemsAlerts() {
   return (
     <div>
       <CustomerDeleteAlert name={'customer-delete'} />
-      <CustomerBulkDeleteAlert name={'customers-bulk-delete'} />
+      {/* <CustomerBulkDeleteAlert name={'customers-bulk-delete'} /> */}
     </div>
   );
 }

client/src/containers/Customers/CustomersLanding/CustomersActionsBar.js

@@ -18,8 +18,8 @@ import { If, Icon, DashboardActionViewsList } from 'components';
 
 import { useCustomersListContext } from './CustomersListProvider';
 
-import withCustomers from 'containers/Customers/withCustomers';
+import withCustomers from './withCustomers';
-import withCustomersActions from 'containers/Customers/withCustomersActions';
+import withCustomersActions from './withCustomersActions';
 import withAlertActions from 'containers/Alert/withAlertActions';
 
 import { compose } from 'utils';
@@ -29,21 +29,26 @@ import { compose } from 'utils';
  */
 function CustomerActionsBar({
   // #withCustomers
-  customersSelectedRows,
+  customersSelectedRows = [],
 
-  //#withCustomersActions
+  // #withCustomersActions
-  addCustomersTableQueries,
+  setCustomersTableState,
 
   // #withAlertActions
   openAlert,
 }) {
+  // History context.
   const history = useHistory();
+  
+  // React intl
   const { formatMessage } = useIntl();
+
+  // Customers list context.
   const { customersViews } = useCustomersListContext();
 
-  const onClickNewCustomer = useCallback(() => {
+  const onClickNewCustomer = () => {
     history.push('/customers/new');
-  }, [history]);
+  };
 
   // Handle Customers bulk delete button click.,
   const handleBulkDelete = () => {
@@ -51,8 +56,8 @@ function CustomerActionsBar({
   };
 
   const handleTabChange = (viewId) => {
-    addCustomersTableQueries({
+    setCustomersTableState({
-      custom_view_id: viewId.id || null,
+      customViewId: viewId.id || null,
     });
   };
 

client/src/containers/Customers/CustomersLanding/CustomersList.js

@@ -1,19 +1,20 @@
 import React, { useEffect } from 'react';
 import { useIntl } from 'react-intl';
 
+import 'style/pages/Customers/List.scss';
+
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 
-import CustomerActionsBar from 'containers/Customers/CustomerActionsBar';
+import CustomersActionsBar from './CustomersActionsBar';
+import CustomersViewsTabs from './CustomersViewsTabs';
+import CustomersTable from './CustomersTable';
 import CustomersAlerts from 'containers/Customers/CustomersAlerts';
-import CustomersViewPage from 'containers/Customers/CustomersViewPage';
 import { CustomersListProvider } from './CustomersListProvider';
 
-import withCustomers from 'containers/Customers/withCustomers';
+import withCustomers from './withCustomers';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 
-import { compose } from 'utils';
+import { transformTableStateToQuery, compose } from 'utils';
-
-import 'style/pages/Customers/List.scss';
 
 /**
  * Customers list.
@@ -23,21 +24,24 @@ function CustomersList({
   changePageTitle,
 
   // #withCustomers
-  customersTableQuery,
+  customersTableState,
 }) {
   const { formatMessage } = useIntl();
 
+  // Changes the dashboard page title once the page mount.
   useEffect(() => {
     changePageTitle(formatMessage({ id: 'customers_list' }));
   }, [changePageTitle, formatMessage]);
 
-
   return (
-    <CustomersListProvider query={customersTableQuery}>
+    <CustomersListProvider
-      <CustomerActionsBar />
+      query={transformTableStateToQuery(customersTableState)}
+    >
+      <CustomersActionsBar />
 
       <DashboardPageContent>
-        <CustomersViewPage />
+        <CustomersViewsTabs />
+        <CustomersTable />
       </DashboardPageContent>
       <CustomersAlerts />
     </CustomersListProvider>
@@ -46,5 +50,5 @@ function CustomersList({
 
 export default compose(
   withDashboardActions,
-  withCustomers(({ customersTableQuery }) => ({ customersTableQuery })),
+  withCustomers(({ customersTableState }) => ({ customersTableState })),
 )(CustomersList);

client/src/containers/Customers/CustomersLanding/CustomersListProvider.js

@@ -2,6 +2,7 @@ import React, { createContext } from 'react';
 
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import { useResourceViews, useCustomers } from 'hooks/query';
+import { isTableEmptyStatus } from 'utils';
 
 const CustomersListContext = createContext();
 
@@ -9,14 +10,20 @@ function CustomersListProvider({ query, ...props }) {
   // Fetch customers resource views and fields.
   const {
     data: customersViews,
-    isFetching: isCustomersViewsLoading,
+    isLoading: isCustomersViewsLoading,
   } = useResourceViews('customers');
 
   // Fetches customers data with pagination meta.
   const {
-    data: { customers, pagination },
+    data: { customers, pagination, filterMeta },
-    isFetching: isCustomersLoading,
+    isLoading: isCustomersLoading,
-  } = useCustomers(query);
+    isFetching: isCustomersFetching,
+  } = useCustomers(query, { keepPreviousData: true });
+
+  // Detarmines the datatable empty status.
+  const isEmptyStatus = isTableEmptyStatus({
+    data: customers, pagination, filterMeta,
+  }) && !isCustomersFetching;
 
   const state = {
     customersViews,
@@ -25,8 +32,9 @@ function CustomersListProvider({ query, ...props }) {
 
     isCustomersViewsLoading,
     isCustomersLoading,
+    isCustomersFetching,
 
-    isEmptyStatus: false,
+    isEmptyStatus,
   };
 
   return (

client/src/containers/Customers/CustomersLanding/CustomersTable.js

@@ -0,0 +1,118 @@
+import React from 'react';
+import classNames from 'classnames';
+import { useHistory } from 'react-router-dom';
+
+import CustomersEmptyStatus from './CustomersEmptyStatus';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+
+import { DataTable, Choose } from 'components';
+import { CLASSES } from 'common/classes';
+
+import withCustomersActions from './withCustomersActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import { useCustomersListContext } from './CustomersListProvider';
+import { ActionsMenu, useCustomersTableColumns } from './components';
+
+import { compose } from 'utils';
+
+/**
+ * Customers table.
+ */
+function CustomersTable({
+  // #withCustomersActions
+  setCustomersTableState, 
+
+  // #withAlerts
+  openAlert
+}) {
+  const history = useHistory();
+
+  // Customers table columns.
+  const columns = useCustomersTableColumns();
+
+  // Customers list context.
+  const {
+    isEmptyStatus,
+    customers,
+    pagination,
+    isCustomersLoading,
+    isCustomersFetching,
+  } = useCustomersListContext();
+
+  // Handle fetch data once the page index, size or sort by of the table change.
+  const handleFetchData = React.useCallback(
+    ({ pageSize, pageIndex, sortBy }) => {
+      setCustomersTableState({
+        pageIndex,
+        pageSize,
+        sortBy,
+      });
+    },
+    [setCustomersTableState],
+  );
+
+  // Handles the customer delete action.
+  const handleCustomerDelete = (customer) => {
+    openAlert('customer-delete', { customerId: customer.id })
+  };
+
+  // Handle the customer edit action.
+  const handleCustomerEdit = (customer) => {
+    history.push(`/customers/${customer.id}/edit`);
+  };
+ 
+  return (
+    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
+      <Choose>
+        <Choose.When condition={isEmptyStatus}>
+          <CustomersEmptyStatus />
+        </Choose.When>
+
+        <Choose.Otherwise>
+          <DataTable
+            noInitialFetch={true}
+            columns={columns}
+            data={customers}
+
+            loading={isCustomersLoading}
+            headerLoading={isCustomersLoading}
+            progressBarLoading={isCustomersFetching}
+
+            onFetchData={handleFetchData}
+            selectionColumn={true}
+            expandable={false}
+            sticky={true}
+
+            spinnerProps={{ size: 30 }}
+
+            pagination={true}
+            manualSortBy={true}
+            manualPagination={true}
+            pagesCount={pagination.pagesCount}
+
+            autoResetSortBy={false}
+            autoResetPage={false}
+
+            TableLoadingRenderer={TableSkeletonRows}
+            TableHeaderSkeletonRenderer={TableSkeletonHeader}
+
+            payload={{
+              onDelete: handleCustomerDelete,
+              onEdit: handleCustomerEdit,
+            }}
+            ContextMenu={ActionsMenu}
+          />
+        </Choose.Otherwise>
+      </Choose>
+    </div>
+  );
+};
+
+export default compose(
+  withAlertsActions,
+  withDialogActions,
+  withCustomersActions,
+)(CustomersTable);

client/src/containers/Customers/CustomersLanding/CustomersViewsTabs.js

@@ -1,38 +1,41 @@
 import React, { useMemo } from 'react';
 import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
-import { compose } from 'redux';
+import { pick } from 'lodash';
-import { useParams } from 'react-router-dom';
 
 import { DashboardViewsTabs } from 'components';
 
-import withCustomersActions from 'containers/Customers/withCustomersActions';
+import withCustomers from './withCustomers';
+import withCustomersActions from './withCustomersActions';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import { pick } from 'lodash';
+
 import { useCustomersListContext } from './CustomersListProvider';
+import { compose } from 'utils';
 
 /**
  * Customers views tabs.
  */
 function CustomersViewsTabs({
   // #withCustomersActions
-  addCustomersTableQueries,
+  setCustomersTableState,
+
+  // #withCustomers
+  customersTableState,
 }) {
-  const { custom_view_id: customViewId = null } = useParams();
+  // Customers list context.
   const { customersViews } = useCustomersListContext();
 
-  const tabs = useMemo(() =>
+  const tabs = useMemo(
-    customersViews.map(
+    () =>
-      (view) => ({
+      customersViews.map((view) => pick(view, ['name', 'id']), [
-        ...pick(view, ['name', 'id']),
+        customersViews,
-      }),
+      ]),
-      [customersViews],
+    [customersViews],
-    ),
-    [customersViews]
   );
 
+  // Handle tabs change.
   const handleTabsChange = (viewId) => {
-    addCustomersTableQueries({
+    setCustomersTableState({
-      custom_view_id: viewId || null,
+      customViewId: viewId || null,
     });
   };
 
@@ -40,7 +43,7 @@ function CustomersViewsTabs({
     <Navbar className="navbar--dashboard-views">
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
-          initialViewId={customViewId}
+          customViewId={customersTableState.customViewId}
           resourceName={'customers'}
           tabs={tabs}
           onChange={handleTabsChange}
@@ -53,4 +56,5 @@ function CustomersViewsTabs({
 export default compose(
   withDashboardActions,
   withCustomersActions,
+  withCustomers(({ customersTableState }) => ({ customersTableState })),
 )(CustomersViewsTabs);

client/src/containers/Customers/CustomersLanding/components.js

@@ -0,0 +1,143 @@
+import React, { useMemo } from 'react';
+import {
+  Button,
+  Popover,
+  Menu,
+  MenuItem,
+  MenuDivider,
+  Position,
+  Intent,
+} from '@blueprintjs/core';
+import { Icon, Money } from 'components';
+import { safeCallback } from 'utils';
+import { firstLettersArgs } from 'utils';
+import { useIntl } from 'react-intl';
+
+/**
+ * Actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: { onEdit, onDelete },
+}) {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="reader-18" />}
+        text={formatMessage({ id: 'view_details' })}
+      />
+      <MenuDivider />
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={formatMessage({ id: 'edit_customer' })}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <MenuItem
+        icon={<Icon icon="trash-16" iconSize={16} />}
+        text={formatMessage({ id: 'delete_customer' })}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * Actions cell.
+ */
+export function ActionsCell(props) {
+  return (
+    <Popover
+      content={<ActionsMenu {...props} />}
+      position={Position.RIGHT_BOTTOM}
+    >
+      <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
+    </Popover>
+  );
+}
+
+/**
+ * Avatar cell.
+ */
+export function AvatarCell(row) {
+  return <span className="avatar">{firstLettersArgs(row.display_name)}</span>;
+}
+
+/**
+ * Phone number accessor.
+ */
+export function PhoneNumberAccessor(row) {
+  return (
+    <div>
+      <div className={'work_phone'}>{row.work_phone}</div>
+      <div className={'personal_phone'}>{row.personal_phone}</div>
+    </div>
+  );
+}
+
+/**
+ * Balance accessor.
+ */
+export function BalanceAccessor(row) {
+  return <Money amount={row.closing_balance} currency={'USD'} />;
+}
+
+/**
+ * Retrieve customers table columns.
+ */
+export function useCustomersTableColumns() {
+  const { formatMessage } = useIntl();
+
+  return useMemo(
+    () => [
+      {
+        id: 'avatar',
+        Header: '',
+        accessor: AvatarCell,
+        className: 'avatar',
+        width: 50,
+        disableResizing: true,
+        disableSortBy: true,
+      },
+      {
+        id: 'display_name',
+        Header: formatMessage({ id: 'display_name' }),
+        accessor: 'display_name',
+        className: 'display_name',
+        width: 150,
+      },
+      {
+        id: 'company_name',
+        Header: formatMessage({ id: 'company_name' }),
+        accessor: 'company_name',
+        className: 'company_name',
+        width: 150,
+      },
+      {
+        id: 'phone_number',
+        Header: formatMessage({ id: 'phone_number' }),
+        accessor: PhoneNumberAccessor,
+        className: 'phone_number',
+        width: 100,
+      },
+      {
+        id: 'receivable_balance',
+        Header: formatMessage({ id: 'receivable_balance' }),
+        accessor: BalanceAccessor,
+        className: 'receivable_balance',
+        width: 100,
+      },
+      {
+        id: 'actions',
+        Cell: ActionsCell,
+        className: 'actions',
+        width: 70,
+        disableResizing: true,
+        disableSortBy: true,
+      },
+    ],
+    [formatMessage],
+  );
+}

client/src/containers/Customers/CustomersLanding/withCustomers.js

@@ -0,0 +1,14 @@
+import { connect } from 'react-redux';
+import { getCustomersTableStateFactory } from 'store/customers/customers.selectors';
+
+export default (mapState) => {
+  const getCustomersTableState = getCustomersTableStateFactory();
+
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      customersTableState: getCustomersTableState(state, props),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};

client/src/containers/Customers/CustomersLanding/withCustomersActions.js

@@ -0,0 +1,10 @@
+import { connect } from 'react-redux';
+import {
+  setCustomersTableState
+} from 'store/customers/customers.actions';
+
+export const mapDispatchToProps = (dispatch) => ({
+  setCustomersTableState: (state) => dispatch(setCustomersTableState(state)),
+});
+
+export default connect(null, mapDispatchToProps);

client/src/containers/Customers/CustomersViewPage.js

@@ -1,61 +0,0 @@
-import React, { useCallback } from 'react';
-import { Route, Switch, useHistory } from 'react-router-dom';
-
-import CustomersViewsTabs from 'containers/Customers/CustomersViewsTabs';
-import CustomersTable from 'containers/Customers/CustomerTable';
-
-import withCustomersActions from 'containers/Customers/withCustomersActions';
-import withAlertsActions from 'containers/Alert/withAlertActions';
-import { compose } from 'utils';
-
-function CustomersViewPage({
-  // #withAlertsActions.
-  openAlert,
-
-  // #withCustomersActions
-  setSelectedRowsCustomers,
-}) {
-  const history = useHistory();
-
-  // Handle click delete customer.
-  const handleDeleteCustomer = useCallback(
-    ({ id }) => {
-      openAlert('customer-delete', { customerId: id });
-    },
-    [openAlert],
-  );
-
-  // Handle select customer rows.
-  const handleSelectedRowsChange = (selectedRows) => {
-    const selectedRowsIds = selectedRows.map((r) => r.id);
-    setSelectedRowsCustomers(selectedRowsIds);
-  };
-
-  const handleEditCustomer = useCallback(
-    (customer) => {
-      history.push(`/customers/${customer.id}/edit`);
-    },
-    [history],
-  );
-
-  return (
-    <Switch>
-      <Route
-        exact={true}
-        path={['/customers/:custom_view_id/custom_view', '/customers']}
-      >
-        <CustomersViewsTabs />
-        <CustomersTable
-          // onDeleteCustomer={handleDeleteCustomer}
-          // onEditCustomer={handleEditCustomer}
-          // onSelectedRowsChange={handleSelectedRowsChange}
-        />
-      </Route>
-    </Switch>
-  );
-}
-
-export default compose(
-  withAlertsActions,
-  withCustomersActions,
-)(CustomersViewPage);

client/src/containers/Customers/withCustomers.js

@@ -1,32 +0,0 @@
-import { connect } from 'react-redux';
-import { getResourceViews } from 'store/customViews/customViews.selectors';
-import {
-  getCustomerCurrentPageFactory,
-  getCustomerPaginationMetaFactory,
-  getCustomerTableQueryFactory,
-  getCustomersCurrentViewIdFactory,
-} from 'store/customers/customers.selectors';
-
-export default (mapState) => {
-  const getCustomersList = getCustomerCurrentPageFactory();
-  const getCustomerPaginationMeta = getCustomerPaginationMetaFactory();
-  const getCustomersCurrentViewId = getCustomersCurrentViewIdFactory();
-  const getCustomerTableQuery = getCustomerTableQueryFactory();
-
-  const mapStateToProps = (state, props) => {
-    const query = getCustomerTableQuery(state, props);
-    const mapped = {
-      customers: getCustomersList(state, props, query),
-      customersViews: getResourceViews(state, props, 'customers'),
-      customersTableQuery: query,
-      customerPagination: getCustomerPaginationMeta(state, props, query),
-      customersLoading: state.customers.loading,
-      customersItems: state.customers.items,
-      customersCurrentViewId: getCustomersCurrentViewId(state, props),
-      customersSelectedRows: state.customers.selectedRows,
-    };
-    return mapState ? mapState(mapped, state, props) : mapped;
-  };
-
-  return connect(mapStateToProps);
-};

client/src/containers/Customers/withCustomersActions.js

@@ -1,37 +0,0 @@
-import { connect } from 'react-redux';
-import {
-  fetchCustomers,
-  fetchCustomer,
-  submitCustomer,
-  editCustomer,
-  deleteCustomer,
-  deleteBulkCustomers,
-} from 'store/customers/customers.actions';
-import t from 'store/types';
-
-export const mapDispatchToProps = (dispatch) => ({
-  requestFetchCustomers: (query) => dispatch(fetchCustomers({ query })),
-  requestDeleteCustomer: (id) => dispatch(deleteCustomer({ id })),
-  requestDeleteBulkCustomers: (ids) => dispatch(deleteBulkCustomers({ ids })),
-  requestSubmitCustomer: (form) => dispatch(submitCustomer({ form })),
-  requestEditCustomer: (id, form) => dispatch(editCustomer({ id, form })),
-  requestFetchCustomer: (id) => dispatch(fetchCustomer({ id })),
-  addCustomersTableQueries: (queries) =>
-    dispatch({
-      type: t.CUSTOMERS_TABLE_QUERIES_ADD,
-      payload: { queries },
-    }),
-  changeCustomerView: (id) => {
-    dispatch({
-      type: t.CUSTOMERS_SET_CURRENT_VIEW,
-      currentViewId: parseInt(id, 10),
-    });
-  },
-  setSelectedRowsCustomers: (selectedRows) =>
-    dispatch({
-      type: t.CUSTOMER_SELECTED_ROWS_SET,
-      payload: { selectedRows },
-    }),
-});
-
-export default connect(null, mapDispatchToProps);

client/src/containers/Dialogs/AccountFormDialog/AccountFormDialogContent.js

@@ -105,10 +105,12 @@ function AccountFormDialogContent({
       });
     };
     // Handle request error.
-    const handleError = (errors) => {
+    const handleError = (error) => {
-      // const errorsTransformed = transformApiErrors(errors);
+      const { response: { data: { errors } } } = error;
-      // setErrors({ ...errorsTransformed });
+
-      // setSubmitting(false);
+      const errorsTransformed = transformApiErrors(errors);
+      setErrors({ ...errorsTransformed });
+      setSubmitting(false);
     };
     if (accountId) {
       editAccountMutate(accountId, form)

client/src/containers/Dialogs/JournalNumberDialog/JournalNumberDialogContent.js

@@ -7,7 +7,7 @@ import ReferenceNumberForm from 'containers/JournalNumber/ReferenceNumberForm';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withSettingsActions from 'containers/Settings/withSettingsActions';
 import withSettings from 'containers/Settings/withSettings';
-import withManualJournalsActions from 'containers/Accounting/withManualJournalsActions';
+// import withManualJournalsActions from 'containers/Accounting/withManualJournalsActions';
 
 import { compose, optionsMapToArray } from 'utils';
 
@@ -28,8 +28,6 @@ function JournalNumberDialogContent({
   // #withDialogActions
   closeDialog,
 
-  // #withManualJournalsActions
-  setJournalNumberChanged,
 }) {  
   const fetchSettings = useQuery(
     ['settings'],
@@ -47,7 +45,7 @@ function JournalNumberDialogContent({
 
       setTimeout(() => {
         queryCache.invalidateQueries('settings');
-        setJournalNumberChanged(true);
+        // setJournalNumberChanged(true);
       }, 250);
     }).catch(() => {
       setSubmitting(false);
@@ -77,5 +75,5 @@ export default compose(
     nextNumber: manualJournalsSettings?.nextNumber,
     numberPrefix: manualJournalsSettings?.numberPrefix,
   })),
-  withManualJournalsActions,
+  // withManualJournalsActions,
 )(JournalNumberDialogContent);

client/src/containers/Expenses/ExpenseDataTable.js

@@ -1,285 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-import {
-  Intent,
-  Button,
-  Classes,
-  Popover,
-  Tooltip,
-  Menu,
-  MenuItem,
-  MenuDivider,
-  Position,
-  Tag,
-} from '@blueprintjs/core';
-
-import { FormattedMessage as T, useIntl } from 'react-intl';
-import moment from 'moment';
-import classNames from 'classnames';
-
-import Icon from 'components/Icon';
-import { compose, saveInvoke } from 'utils';
-
-import { useExpensesListContext } from './ExpensesListProvider';
-
-import { If, Money, Choose } from 'components';
-import { CLASSES } from 'common/classes';
-
-import DataTable from 'components/DataTable';
-import ExpensesEmptyStatus from './ExpensesEmptyStatus';
-
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import withExpensesActions from 'containers/Expenses/withExpensesActions';
-
-import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
-
-/**
- * Expenses datatable.
- */
-function ExpensesDataTable({
-
-  // #withExpensesActions
-  addExpensesTableQueries,
- 
-  // #ownProps
-  onEditExpense,
-  onDeleteExpense,
-  onPublishExpense,
-  onSelectedRowsChange,
-}) {
-  const { formatMessage } = useIntl();
-  const { expenses, isExpensesLoading } = useExpensesListContext();
-
-  // Handle fetch data of manual jouranls datatable.
-  const handleFetchData = useCallback(
-    ({ pageIndex, pageSize, sortBy }) => {
-      addExpensesTableQueries({
-        ...(sortBy.length > 0
-          ? {
-              column_sort_by: sortBy[0].id,
-              sort_order: sortBy[0].desc ? 'desc' : 'asc',
-            }
-          : {}),
-        page_size: pageSize,
-        page: pageIndex + 1,
-      });
-    },
-    [addExpensesTableQueries],
-  );
-
-  const handlePublishExpense = useCallback(
-    (expense) => () => {
-      saveInvoke(onPublishExpense, expense);
-    },
-    [onPublishExpense],
-  );
-
-  const handleEditExpense = useCallback(
-    (expense) => () => {
-      saveInvoke(onEditExpense, expense);
-    },
-    [onEditExpense],
-  );
-
-  const handleDeleteExpense = useCallback(
-    (expense) => () => {
-      saveInvoke(onDeleteExpense, expense);
-    },
-    [onDeleteExpense],
-  );
-
-  const actionMenuList = useCallback(
-    (expense) => (
-      <Menu>
-        <MenuItem
-          icon={<Icon icon="reader-18" />}
-          text={formatMessage({ id: 'view_details' })}
-        />
-        <MenuDivider />
-        <If condition={!expense.is_published}>
-          <MenuItem
-            icon={<Icon icon={'arrow-to-top'} size={16} />}
-            text={formatMessage({ id: 'publish_expense' })}
-            onClick={handlePublishExpense(expense)}
-          />
-        </If>
-
-        <MenuItem
-          icon={<Icon icon="pen-18" />}
-          text={formatMessage({ id: 'edit_expense' })}
-          onClick={handleEditExpense(expense)}
-        />
-        <MenuItem
-          icon={<Icon icon="trash-16" iconSize={16} />}
-          text={formatMessage({ id: 'delete_expense' })}
-          intent={Intent.DANGER}
-          onClick={handleDeleteExpense(expense)}
-        />
-      </Menu>
-    ),
-    [
-      handleEditExpense,
-      handleDeleteExpense,
-      handlePublishExpense,
-      formatMessage,
-    ],
-  );
-
-  const onRowContextMenu = useCallback(
-    (cell) => {
-      return actionMenuList(cell.row.original);
-    },
-    [actionMenuList],
-  );
-
-  const expenseAccountAccessor = (_expense) => {
-    if (_expense.categories.length === 1) {
-      return _expense.categories[0].expense_account.name;
-    } else if (_expense.categories.length > 1) {
-      const mutliCategories = _expense.categories.map((category) => (
-        <div>
-          - {category.expense_account.name} ${category.amount}
-        </div>
-      ));
-      return (
-        <Tooltip content={mutliCategories}>{'- Multi Categories -'}</Tooltip>
-      );
-    }
-  };
-
-  const columns = useMemo(
-    () => [
-      {
-        id: 'payment_date',
-        Header: formatMessage({ id: 'payment_date' }),
-        accessor: (r) => moment(r.payment_date).format('YYYY MMM DD'),
-        width: 140,
-        className: 'payment_date',
-      },
-      {
-        id: 'total_amount',
-        Header: formatMessage({ id: 'full_amount' }),
-        accessor: (r) => (
-          <Money amount={r.total_amount} currency={r.currency_code} />
-        ),
-        className: 'total_amount',
-        width: 150,
-      },
-      {
-        id: 'payment_account_id',
-        Header: formatMessage({ id: 'payment_account' }),
-        accessor: 'payment_account.name',
-        className: 'payment_account',
-        width: 150,
-      },
-      {
-        id: 'expense_account_id',
-        Header: formatMessage({ id: 'expense_account' }),
-        accessor: expenseAccountAccessor,
-        width: 160,
-        className: 'expense_account',
-      },
-      {
-        id: 'publish',
-        Header: formatMessage({ id: 'publish' }),
-        accessor: (r) => {
-          return r.is_published ? (
-            <Tag minimal={true}>
-              <T id={'published'} />
-            </Tag>
-          ) : (
-            <Tag minimal={true} intent={Intent.WARNING}>
-              <T id={'draft'} />
-            </Tag>
-          );
-        },
-        width: 100,
-        className: 'publish',
-      },
-      {
-        id: 'description',
-        Header: formatMessage({ id: 'description' }),
-        accessor: (row) => (
-          <If condition={row.description}>
-            <Tooltip
-              className={Classes.TOOLTIP_INDICATOR}
-              content={row.description}
-              position={Position.TOP}
-              hoverOpenDelay={250}
-            >
-              <Icon icon={'file-alt'} iconSize={16} />
-            </Tooltip>
-          </If>
-        ),
-        disableSorting: true,
-        width: 150,
-        className: 'description',
-      },
-      {
-        id: 'actions',
-        Header: '',
-        Cell: ({ cell }) => (
-          <Popover
-            content={actionMenuList(cell.row.original)}
-            position={Position.RIGHT_BOTTOM}
-          >
-            <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
-          </Popover>
-        ),
-        className: 'actions',
-        width: 50,
-        disableResizing: true,
-      },
-    ],
-    [actionMenuList, formatMessage],
-  );
-
-  const handleSelectedRowsChange = useCallback(
-    (selectedRows) => {
-      saveInvoke(
-        onSelectedRowsChange,
-        selectedRows.map((s) => s.original),
-      );
-    },
-    [onSelectedRowsChange],
-  );
-
-
-  return (
-    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
-      <Choose>
-        <Choose.When condition={false}>
-          <ExpensesEmptyStatus />
-        </Choose.When>
-
-        <Choose.Otherwise>
-          <DataTable
-            columns={columns}
-            data={expenses}
-            loading={isExpensesLoading}
-            manualSortBy={true}
-            selectionColumn={true}
-            noInitialFetch={true}
-            sticky={true}
-            onSelectedRowsChange={handleSelectedRowsChange}
-            onFetchData={handleFetchData}
-            rowContextMenu={onRowContextMenu}
-            TableLoadingRenderer={TableSkeletonRows}
-            pagination={true}
-            // pagesCount={expensesPagination.pagesCount}
-            autoResetSortBy={false}
-            autoResetPage={false}
-            // initialPageSize={expensesTableQuery.page_size}
-            // initialPageIndex={expensesTableQuery.page - 1}
-          />
-        </Choose.Otherwise>
-      </Choose>
-    </div>
-  );
-}
-
-export default compose(
-  withDialogActions,
-  withDashboardActions,
-  withExpensesActions,
-)(ExpensesDataTable);

client/src/containers/Expenses/ExpenseForm/ExpenseForm.js

@@ -20,7 +20,6 @@ import withMediaActions from 'containers/Media/withMediaActions';
 import withSettings from 'containers/Settings/withSettings';
 
 import AppToaster from 'components/AppToaster';
-import Dragzone from 'components/Dragzone';
 import {
   CreateExpenseFormSchema,
   EditExpenseFormSchema,
@@ -52,10 +51,6 @@ const defaultInitialValues = {
  * Expense form.
  */
 function ExpenseForm({
-  // #withMedia
-  requestSubmitMedia,
-  requestDeleteMedia,
-
   // #withDashboard
   changePageTitle,
 
@@ -210,7 +205,7 @@ function ExpenseForm({
   );
 }
 
-export default compose(
+  export default compose(
   withDashboardActions,
   withMediaActions,
   withSettings(({ organizationSettings, expenseSettings }) => ({

client/src/containers/Expenses/ExpenseForm/ExpenseFormEntries.js

@@ -16,76 +16,8 @@ import {
   InputGroupCell,
 } from 'components/DataTableCells';
 import { useExpenseFormContext } from './ExpenseFormPageProvider';
+import { useExpenseFormTableColumns } from './components';
 
-const ExpenseCategoryHeaderCell = () => {
-  return (
-    <>
-      <T id={'expense_category'} />
-      <Hint />
-    </>
-  );
-};
-
-// Actions cell renderer.
-const ActionsCellRenderer = ({
-  row: { index },
-  column: { id },
-  cell: { value: initialValue },
-  data,
-  payload,
-}) => {
-  if (data.length <= index + 1) {
-    return '';
-  }
-  const onClickRemoveRole = () => {
-    payload.removeRow(index);
-  };
-  return (
-    <Tooltip content={<T id={'remove_the_line'} />} position={Position.LEFT}>
-      <Button
-        icon={<Icon icon="times-circle" iconSize={14} />}
-        iconSize={14}
-        className="ml2"
-        minimal={true}
-        intent={Intent.DANGER}
-        onClick={onClickRemoveRole}
-      />
-    </Tooltip>
-  );
-};
-
-// Total text cell renderer.
-const TotalExpenseCellRenderer = (chainedComponent) => (props) => {
-  if (props.data.length <= props.row.index + 1) {
-    return (
-      <span>
-        <T id={'total_currency'} values={{ currency: 'USD' }} />
-      </span>
-    );
-  }
-  return chainedComponent(props);
-};
-
-const NoteCellRenderer = (chainedComponent) => (props) => {
-  if (props.data.length === props.row.index + 1) {
-    return '';
-  }
-  return chainedComponent(props);
-};
-
-const TotalAmountCellRenderer = (chainedComponent, type) => (props) => {
-  if (props.data.length === props.row.index + 1) {
-    const total = props.data.reduce((total, entry) => {
-      const amount = parseInt(entry[type], 10);
-      const computed = amount ? total + amount : total;
-
-      return computed;
-    }, 0);
-
-    return <span>{formattedAmount(total, 'USD')}</span>;
-  }
-  return chainedComponent(props);
-};
 
 export default function ExpenseTable({
   // #ownPorps
@@ -110,55 +42,7 @@ export default function ExpenseTable({
   const tableRows = useMemo(() => [...rows, { rowType: 'total' }], [rows]);
 
   // Memorized data table columns.
-  const columns = useMemo(
+  const columns = useExpenseFormTableColumns();
-    () => [
-      {
-        Header: '#',
-        accessor: 'index',
-        Cell: ({ row: { index } }) => <span>{index + 1}</span>,
-        className: 'index',
-        width: 40,
-        disableResizing: true,
-        disableSortBy: true,
-      },
-      {
-        Header: ExpenseCategoryHeaderCell,
-        id: 'expense_account_id',
-        accessor: 'expense_account_id',
-        Cell: TotalExpenseCellRenderer(AccountsListFieldCell),
-        className: 'expense_account_id',
-        disableSortBy: true,
-        width: 40,
-        filterAccountsByRootType: ['expense'],
-      },
-      {
-        Header: formatMessage({ id: 'amount_currency' }, { currency: 'USD' }),
-        accessor: 'amount',
-        Cell: TotalAmountCellRenderer(MoneyFieldCell, 'amount'),
-        disableSortBy: true,
-        width: 40,
-        className: 'amount',
-      },
-      {
-        Header: formatMessage({ id: 'description' }),
-        accessor: 'description',
-        Cell: NoteCellRenderer(InputGroupCell),
-        disableSortBy: true,
-        className: 'description',
-        width: 100,
-      },
-      {
-        Header: '',
-        accessor: 'action',
-        Cell: ActionsCellRenderer,
-        className: 'actions',
-        disableSortBy: true,
-        disableResizing: true,
-        width: 45,
-      },
-    ],
-    [formatMessage],
-  );
 
   // Handles update datatable data.
   const handleUpdateData = useCallback(

client/src/containers/Expenses/ExpenseForm/ExpenseFormPage.js

@@ -36,24 +36,9 @@ function ExpenseFormPage({
     };
   }, [resetSidebarPreviousExpand, setSidebarShrink, setDashboardBackLink]);
 
-  const handleFormSubmit = useCallback(
-    (payload) => {
-      payload.redirect && history.push('/expenses-list');
-    },
-    [history],
-  );
-
-  const handleCancel = useCallback(() => {
-    history.goBack();
-  }, [history]);
-
   return (
     <ExpenseFormPageProvider expenseId={id}>
-      <ExpenseForm
+      <ExpenseForm />
-        onFormSubmit={handleFormSubmit}
-        expenseId={id}
-        onCancelForm={handleCancel}
-      />
     </ExpenseFormPageProvider>
   );
 }

client/src/containers/Expenses/ExpenseForm/components.js

@@ -0,0 +1,132 @@
+
+
+
+const ExpenseCategoryHeaderCell = () => {
+  return (
+    <>
+      <T id={'expense_category'} />
+      <Hint />
+    </>
+  );
+};
+
+// Actions cell renderer.
+const ActionsCellRenderer = ({
+  row: { index },
+  column: { id },
+  cell: { value: initialValue },
+  data,
+  payload,
+}) => {
+  if (data.length <= index + 1) {
+    return '';
+  }
+  const onClickRemoveRole = () => {
+    payload.removeRow(index);
+  };
+  return (
+    <Tooltip content={<T id={'remove_the_line'} />} position={Position.LEFT}>
+      <Button
+        icon={<Icon icon="times-circle" iconSize={14} />}
+        iconSize={14}
+        className="ml2"
+        minimal={true}
+        intent={Intent.DANGER}
+        onClick={onClickRemoveRole}
+      />
+    </Tooltip>
+  );
+};
+
+// Total text cell renderer.
+const TotalExpenseCellRenderer = (chainedComponent) => (props) => {
+  if (props.data.length <= props.row.index + 1) {
+    return (
+      <span>
+        <T id={'total_currency'} values={{ currency: 'USD' }} />
+      </span>
+    );
+  }
+  return chainedComponent(props);
+};
+
+/**
+ * Note cell renderer.
+ */
+const NoteCellRenderer = (chainedComponent) => (props) => {
+  if (props.data.length === props.row.index + 1) {
+    return '';
+  }
+  return chainedComponent(props);
+};
+
+/**
+ * Total amount cell renderer.
+ */
+const TotalAmountCellRenderer = (chainedComponent, type) => (props) => {
+    if (props.data.length === props.row.index + 1) {
+      const total = props.data.reduce((total, entry) => {
+        const amount = parseInt(entry[type], 10);
+        const computed = amount ? total + amount : total;
+  
+        return computed;
+      }, 0);
+  
+      return <span>{formattedAmount(total, 'USD')}</span>;
+    }
+    return chainedComponent(props);
+  };
+  
+
+
+  export function useExpenseFormTableColumns() {
+    return React.useMemo(
+        () => [
+          {
+            Header: '#',
+            accessor: 'index',
+            Cell: ({ row: { index } }) => <span>{index + 1}</span>,
+            className: 'index',
+            width: 40,
+            disableResizing: true,
+            disableSortBy: true,
+          },
+          {
+            Header: ExpenseCategoryHeaderCell,
+            id: 'expense_account_id',
+            accessor: 'expense_account_id',
+            Cell: TotalExpenseCellRenderer(AccountsListFieldCell),
+            className: 'expense_account_id',
+            disableSortBy: true,
+            width: 40,
+            filterAccountsByRootType: ['expense'],
+          },
+          {
+            Header: formatMessage({ id: 'amount_currency' }, { currency: 'USD' }),
+            accessor: 'amount',
+            Cell: TotalAmountCellRenderer(MoneyFieldCell, 'amount'),
+            disableSortBy: true,
+            width: 40,
+            className: 'amount',
+          },
+          {
+            Header: formatMessage({ id: 'description' }),
+            accessor: 'description',
+            Cell: NoteCellRenderer(InputGroupCell),
+            disableSortBy: true,
+            className: 'description',
+            width: 100,
+          },
+          {
+            Header: '',
+            accessor: 'action',
+            Cell: ActionsCellRenderer,
+            className: 'actions',
+            disableSortBy: true,
+            disableResizing: true,
+            width: 45,
+          },
+        ],
+        [formatMessage],
+      )
+  }

client/src/containers/Expenses/ExpensesAlerts.js

@@ -1,17 +1,15 @@
 import React from 'react';
-import ExpenseDeleteAlert from 'alerts/expenses/ExpenseDeleteAlert';
+import ExpenseDeleteAlert from 'containers/Alerts/Expenses/ExpenseDeleteAlert';
-import ExpensePublishAlert from 'alerts/expenses/ExpensePublishAlert';
+import ExpensePublishAlert from 'containers/Alerts/Expenses/ExpensePublishAlert';
 
 /**
  * Accounts alert.
  */
-export default function ExpensesAlerts({
+export default function ExpensesAlerts({}) {
-
-}) {
   return (
     <div class="expenses-alerts">
       <ExpenseDeleteAlert name={'expense-delete'} />
       <ExpensePublishAlert name={'expense-publish'} />
     </div>
-  )
+  );
 }