feat: style read-only drawers.

fix: empty state in resources tables.

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

@@ -19,10 +19,12 @@ import { transformTableStateToQuery, compose } from 'utils';
 function ManualJournalsTable({
   // #withManualJournals
   journalsTableState,
+  journalsTableStateChanged,
 }) {
   return (
     <ManualJournalsListProvider
       query={transformTableStateToQuery(journalsTableState)}
+      tableStateChanged={journalsTableStateChanged}
     >
       <ManualJournalsActionsBar />
 
@@ -40,7 +42,8 @@ function ManualJournalsTable({
 }
 
 export default compose(
-  withManualJournals(({ manualJournalsTableState }) => ({
+  withManualJournals(({ manualJournalsTableState, manualJournalTableStateChanged }) => ({
     journalsTableState: manualJournalsTableState,
+    journalsTableStateChanged: manualJournalTableStateChanged,
   })),
 )(ManualJournalsTable);

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

@@ -1,11 +1,13 @@
 import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
+
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import { useResourceViews, useResourceMeta, useJournals } from 'hooks/query';
-import { isTableEmptyStatus, getFieldsFromResourceMeta } from 'utils';
+import { getFieldsFromResourceMeta } from 'utils';
 
 const ManualJournalsContext = createContext();
 
-function ManualJournalsListProvider({ query, ...props }) {
+function ManualJournalsListProvider({ query, tableStateChanged, ...props }) {
   // Fetches accounts resource views and fields.
   const { data: journalsViews, isLoading: isViewsLoading } =
     useResourceViews('manual_journals');
@@ -26,11 +28,7 @@ function ManualJournalsListProvider({ query, ...props }) {
 
   // Detarmines the datatable empty status.
   const isEmptyStatus =
-    isTableEmptyStatus({
-      data: manualJournals,
-      pagination,
-      filterMeta,
-    }) && !isManualJournalsFetching;
+    isEmpty(manualJournals) && !tableStateChanged && !isManualJournalsLoading;
 
   // Global state.
   const state = {

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

@@ -24,7 +24,7 @@ export const useManualJournalsColumns = () => {
       {
         id: 'amount',
         Header: intl.get('amount'),
-        accessor: AmountAccessor,
+        accessor: 'formatted_amount',
         className: 'amount',
         width: 115,
       },

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

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

client/src/containers/Accounting/ManualJournalUniversalSearch.js

@@ -9,12 +9,14 @@ function JournalUniversalSearchSelectComponent({
   // #ownProps
   resourceType,
   resourceId,
+  onAction,
 
   // #withDrawerActions
   openDrawer,
 }) {
   if (resourceType === RESOURCES_TYPES.MANUAL_JOURNAL) {
     openDrawer('journal-drawer', { manualJournalId: resourceId });
+    onAction && onAction();
   }
   return null;
 }
@@ -27,6 +29,7 @@ export const JournalUniversalSearchSelectAction = withDrawerActions(
  * Mappes the manual journal item to search item.
  */
 const manualJournalsToSearch = (manualJournal) => ({
+  id: manualJournal.id,
   text: manualJournal.journal_number,
   subText: manualJournal.formatted_date,
   label: manualJournal.formatted_amount,

client/src/containers/Accounts/AccountUniversalSearch.js

@@ -6,12 +6,14 @@ function AccountUniversalSearchItemSelectComponent({
   // #ownProps
   resourceType,
   resourceId,
+  onAction,
 
   // #withDrawerActions
   openDrawer,
 }) {
   if (resourceType === RESOURCES_TYPES.ACCOUNT) {
     openDrawer('account-drawer', { accountId: resourceId });
+    onAction && onAction();
   }
   return null;
 }
@@ -26,6 +28,7 @@ export const AccountUniversalSearchItemSelect = withDrawerActions(
  * @returns 
  */
 const accountToSearch = (account) => ({
+  id: account.id,
   text: `${account.name} - ${account.code}`,
   label: account.formatted_amount,
   reference: account,

client/src/containers/Accounts/AccountsChart.js

@@ -22,6 +22,7 @@ import withAccountsTableActions from './withAccountsTableActions';
 function AccountsChart({
   // #withAccounts
   accountsTableState,
+  accountsTableStateChanged,
 
   // #withAccountsActions
   setAccountsTableState,
@@ -41,6 +42,7 @@ function AccountsChart({
   return (
     <AccountsChartProvider
       query={transformAccountsStateToQuery(accountsTableState)}
+      tableStateChanged={accountsTableStateChanged}
     >
       <AccountsActionsBar />
 
@@ -58,6 +60,9 @@ function AccountsChart({
 }
 
 export default compose(
-  withAccounts(({ accountsTableState }) => ({ accountsTableState })),
+  withAccounts(({ accountsTableState, accountsTableStateChanged }) => ({
+    accountsTableState,
+    accountsTableStateChanged,
+  })),
   withAccountsTableActions,
 )(AccountsChart);

client/src/containers/Accounts/AccountsChartProvider.js

@@ -8,7 +8,7 @@ const AccountsChartContext = createContext();
 /**
  * Accounts chart data provider.
  */
-function AccountsChartProvider({ query, ...props }) {
+function AccountsChartProvider({ query, tableStateChanged,...props }) {
   // Fetch accounts resource views and fields.
   const { data: resourceViews, isLoading: isViewsLoading } =
     useResourceViews('accounts');

client/src/containers/Accounts/withAccounts.js

@@ -1,15 +1,17 @@
 import { connect } from 'react-redux';
 import {
   getAccountsTableStateFactory,
+  accountsTableStateChangedFactory,
 } from 'store/accounts/accounts.selectors';
 
 export default (mapState) => {
   const getAccountsTableState = getAccountsTableStateFactory();
+  const accountsTableStateChanged = accountsTableStateChangedFactory();
 
   const mapStateToProps = (state, props) => {
     const mapped = {
       accountsTableState: getAccountsTableState(state, props),
-      accountsSelectedRows: null,
+      accountsTableStateChanged: accountsTableStateChanged(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

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

@@ -21,9 +21,10 @@ import { compose } from 'utils';
 function CustomersList({
   // #withCustomers
   customersTableState,
+  customersTableStateChanged,
 
   // #withCustomersActions
-  setCustomersTableState
+  setCustomersTableState,
 }) {
   // Resets the accounts table state once the page unmount.
   useEffect(
@@ -38,7 +39,10 @@ function CustomersList({
   );
 
   return (
-    <CustomersListProvider tableState={customersTableState}>
+    <CustomersListProvider
+      tableState={customersTableState}
+      tableStateChanged={customersTableStateChanged}
+    >
       <CustomersActionsBar />
 
       <DashboardPageContent>
@@ -54,6 +58,9 @@ function CustomersList({
 }
 
 export default compose(
-  withCustomers(({ customersTableState }) => ({ customersTableState })),
-  withCustomersActions
+  withCustomers(({ customersTableState, customersTableStateChanged }) => ({
+    customersTableState,
+    customersTableStateChanged,
+  })),
+  withCustomersActions,
 )(CustomersList);

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

@@ -1,13 +1,14 @@
 import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
 
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import { useResourceMeta, useResourceViews, useCustomers } from 'hooks/query';
-import { isTableEmptyStatus, getFieldsFromResourceMeta } from 'utils';
+import { getFieldsFromResourceMeta } from 'utils';
 import { transformCustomersStateToQuery } from './utils';
 
 const CustomersListContext = createContext();
 
-function CustomersListProvider({ tableState, ...props }) {
+function CustomersListProvider({ tableState, tableStateChanged, ...props }) {
   // Transformes the table state to fetch query.
   const tableQuery = transformCustomersStateToQuery(tableState);
 
@@ -31,13 +32,7 @@ function CustomersListProvider({ tableState, ...props }) {
 
   // Detarmines the datatable empty status.
   const isEmptyStatus =
-    isTableEmptyStatus({
-      data: customers,
-      pagination,
-      filterMeta,
-    }) &&
-    !isCustomersFetching &&
-    !tableState.inactiveMode;
+    isEmpty(customers) && !isCustomersLoading && !tableStateChanged;
 
   const state = {
     customersViews,

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

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

client/src/containers/Drawers/AccountDrawer/AccountDrawerActionBar.js

@@ -1,6 +1,12 @@
 import React from 'react';
 import Icon from 'components/Icon';
-import { Button, Classes, NavbarGroup, Intent } from '@blueprintjs/core';
+import {
+  Button,
+  Classes,
+  NavbarGroup,
+  Intent,
+  NavbarDivider,
+} from '@blueprintjs/core';
 import { FormattedMessage as T } from 'components';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
@@ -11,6 +17,7 @@ import withDrawerActions from 'containers/Drawer/withDrawerActions';
 import { safeCallback } from 'utils';
 
 import { compose } from 'utils';
+import { useAccountDrawerContext } from './AccountDrawerProvider';
 
 /**
  * Account drawer action bar.
@@ -24,10 +31,10 @@ function AccountDrawerActionBar({
 
   // #withDrawerActions
   closeDrawer,
-  
-  // #ownProps
-  account,
 }) {
+  // Account drawer context.
+  const { account } = useAccountDrawerContext();
+
   // Handle new child button click.
   const onNewChildAccount = () => {
     openDialog('account-form', {
@@ -44,10 +51,8 @@ function AccountDrawerActionBar({
 
   // Handle delete action account.
   const onDeleteAccount = () => {
-    if (account) {
-      openAlert('account-delete', { accountId: account.id });
-      closeDrawer('account-drawer');
-    }
+    openAlert('account-delete', { accountId: account.id });
+    closeDrawer('account-drawer');
   };
 
   return (
@@ -65,9 +70,10 @@ function AccountDrawerActionBar({
           text={<T id={'new_child_account'} />}
           onClick={safeCallback(onNewChildAccount)}
         />
+        <NavbarDivider />
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon="trash-18" iconSize={18} />}
+          icon={<Icon icon={'trash-16'} iconSize={16} />}
           text={<T id={'delete'} />}
           intent={Intent.DANGER}
           onClick={safeCallback(onDeleteAccount)}

client/src/containers/Drawers/AccountDrawer/AccountDrawerDetails.js

@@ -1,20 +1,21 @@
 import React from 'react';
 
+import { Card } from 'components';
+
 import AccountDrawerActionBar from './AccountDrawerActionBar';
 import AccountDrawerHeader from './AccountDrawerHeader';
 import AccountDrawerTable from './AccountDrawerTable';
-import { useAccountDrawerContext } from './AccountDrawerProvider';
 
 /**
  * Account view details.
  */
 export default function AccountDrawerDetails() {
-  const { account, accounts } = useAccountDrawerContext();
-
   return (
-    <div className={'account-drawer'}>
-      <AccountDrawerActionBar account={account} />
-      <AccountDrawerHeader account={account} />
+  <div className={'account-drawer'}>
+      <AccountDrawerActionBar />
+      <Card className={'card-header'}>
+        <AccountDrawerHeader />
+      </Card>
       <AccountDrawerTable />
     </div>
   );

client/src/containers/Drawers/AccountDrawer/AccountDrawerHeader.js

@@ -1,68 +1,56 @@
 import React from 'react';
+import { defaultTo } from 'lodash';
+
 import { FormattedMessage as T } from 'components';
-import { Icon, Money } from 'components';
+import { Icon, Money, DetailsMenu, DetailItem } from 'components';
+import { useAccountDrawerContext } from './AccountDrawerProvider';
 
 /**
  *  Account drawer header.
  */
-export default function AccountDrawerHeader({
-  account: {
-    account_normal,
-    account_type_label,
-    code,
-    amount,
-    currency_code,
-    description,
-  },
-}) {
+export default function AccountDrawerHeader() {
+  const { account } = useAccountDrawerContext();
+
   return (
-    <div className={'account-drawer__content'}>
-      <div>
-        <span>
-          <T id={'closing_balance'} />
-        </span>
-        <p className={'balance'}>
-          {<Money amount={amount} currency={currency_code} />}
-        </p>
-      </div>
-      <div class={'account-type'}>
-        <span>
-          <T id={'account_type'} />
-        </span>
-        <p>{account_type_label}</p>
-      </div>
-      <div class={'account-normal'}>
-        <span>
-          <T id={'account_normal'} />
-        </span>
-        <p>
-          {' '}
-          {account_normal}{' '}
+    <div className={'account-drawer__content-header'}>
+      <DetailsMenu>
+        <DetailItem
+          name={'closing-balance'}
+          label={<T id={'closing_balance'} />}
+        >
+          <h3 class={'big-number'}>
+            <Money amount={account.amount} currency={account.currency_code} />
+          </h3>
+        </DetailItem>
+
+        <DetailItem name={'account-type'} label={<T id={'account_type'} />}>
+          {account.account_type_label}
+        </DetailItem>
+
+        <DetailItem name={'account-normal'} label={<T id={'account_normal'} />}>
+          {account.account_normal}
           <Icon
             iconSize={14}
-            icon={`arrow-${account_normal === 'credit' ? 'down' : 'up'}`}
+            icon={`arrow-${
+              account.account_normal === 'credit' ? 'down' : 'up'
+            }`}
           />
-        </p>
-      </div>
-      <div>
-        <span>
-          <T id={'code'} />
-        </span>
-        <p>{code}</p>
-      </div>
-      <div>
-        <span>
-          <T id={'currency'} />
-        </span>
-        <p>{currency_code}</p>
-      </div>
+        </DetailItem>
 
-      <p className={'account-drawer__content--desc'}>
-        <b>
-          <T id={'description'} />
-        </b>
-        : {description ? description : '--'}
-      </p>
+        <DetailItem name={'code'} label={<T id={'code'} />}>
+          {account.code}
+        </DetailItem>
+
+        <DetailItem name={'currency'} label={<T id={'currency'} />}>
+          {account.currency_code}
+        </DetailItem>
+      </DetailsMenu>
+
+      <DetailsMenu direction={'horizantal'}>
+        <DetailItem name={'description'} label={<T id={'description'} />}>
+          {defaultTo(account.description, '--')}
+        </DetailItem>
+      </DetailsMenu>    
     </div>
   );
 }

client/src/containers/Drawers/AccountDrawer/AccountDrawerProvider.js

@@ -14,12 +14,12 @@ function AccountDrawerProvider({ accountId, name, ...props }) {
   });
 
   // Load the specific account transactions.
-  const {
-    data: accounts,
-    isLoading: isAccountsLoading,
-  } = useAccountTransactions(accountId, {
-    enabled: !!accountId,
-  });
+  const { data: accounts, isLoading: isAccountsLoading } =
+    useAccountTransactions(accountId, {
+      enabled: !!accountId,
+    });
+
+  // Drawer title.
   const drawerTitle = `${account.name} ${account.code}`;
 
   // provider.

client/src/containers/Drawers/AccountDrawer/AccountDrawerTable.js

@@ -1,61 +1,29 @@
 import React from 'react';
-import moment from 'moment';
 import { Link } from 'react-router-dom';
+import intl from 'react-intl-universal';
+
 import { useAccountDrawerContext } from './AccountDrawerProvider';
 
-import intl from 'react-intl-universal';
-import { DataTable, Money } from 'components';
-import { isBlank, compose } from 'utils';
+import { DataTable, If } from 'components';
+
+import { compose } from 'utils';
+import { useAccountReadEntriesColumns } from './utils';
+
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
+
 /**
  * account drawer table.
  */
 function AccountDrawerTable({ closeDrawer }) {
   const {
-    account: { currency_code },
+    account,
     accounts,
     drawerName,
   } = useAccountDrawerContext();
 
-  const columns = React.useMemo(
-    () => [
-      {
-        Header: intl.get('transaction_date'),
-        accessor: ({ date }) => moment(date).format('YYYY MMM DD'),
-        width: 110,
-      },
-      {
-        Header: intl.get('transaction_type'),
-        accessor: 'reference_type_formatted',
-        width: 100,
-      },
-      {
-        Header: intl.get('credit'),
-        accessor: ({ credit }) =>
-          !isBlank(credit) && credit !== 0 ? (
-            <Money amount={credit} currency={currency_code} />
-          ) : null,
-        width: 80,
-      },
-      {
-        Header: intl.get('debit'),
-        accessor: ({ debit }) =>
-          !isBlank(debit) && debit !== 0 ? (
-            <Money amount={debit} currency={currency_code} />
-          ) : null,
-        width: 80,
-      },
-      {
-        Header: intl.get('running_balance'),
-        accessor: ({ running_balance }) => (
-          <Money amount={running_balance} currency={currency_code} />
-        ),
-        width: 110,
-      },
-    ],
-    [],
-  );
+  // Account read-only entries table columns.
+  const columns = useAccountReadEntriesColumns();
 
   // Handle view more link click.
   const handleLinkClick = () => {
@@ -64,16 +32,18 @@ function AccountDrawerTable({ closeDrawer }) {
 
   return (
     <div className={'account-drawer__table'}>
-      <DataTable columns={columns} data={accounts} />
+      <DataTable columns={columns} data={accounts} payload={{ account }}/>
 
-      <div class="account-drawer__table-footer">
-        <Link
-          to={`/financial-reports/general-ledger`}
-          onClick={handleLinkClick}
-        >
-          ←{intl.get('view_more_transactions')}
-        </Link>
-      </div>
+      <If condition={accounts.length > 0}>
+        <div class="account-drawer__table-footer">
+          <Link
+            to={`/financial-reports/general-ledger`}
+            onClick={handleLinkClick}
+          >
+            ←{intl.get('view_more_transactions')}
+          </Link>
+        </div>
+      </If>
     </div>
   );
 }

client/src/containers/Drawers/AccountDrawer/index.js

@@ -15,9 +15,16 @@ function AccountDrawer({
   isOpen,
   payload: { accountId },
 }) {
-
   return (
-    <Drawer isOpen={isOpen} name={name} size={'900px'}>
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      style={{
+        minWidth: '700px',
+        maxWidth: '900px',
+      }}
+      size={'65%'}
+    >
       <DrawerSuspense>
         <AccountDrawerContent name={name} accountId={accountId} />
       </DrawerSuspense>

client/src/containers/Drawers/AccountDrawer/utils.js

@@ -0,0 +1,62 @@
+import intl from 'react-intl-universal';
+import React from 'react';
+import moment from 'moment';
+
+import { Money } from 'components';
+import { isBlank } from 'utils';
+
+/**
+ * Debit/credit table cell.
+ */
+function DebitCreditTableCell({ value, payload: { account } }) {
+  return !isBlank(value) && value !== 0 ? (
+    <Money amount={value} currency={account.currency_code} />
+  ) : null;
+}
+
+/**
+ * Running balance table cell.
+ */
+function RunningBalanceTableCell({ value, payload: { account } }) {
+  return (
+    <Money amount={value} currency={account.currency_code} />
+  );
+}
+
+/**
+ * Retrieve entries columns of read-only account view.
+ */
+export const useAccountReadEntriesColumns = () =>
+  React.useMemo(
+    () => [
+      {
+        Header: intl.get('transaction_date'),
+        accessor: ({ date }) => moment(date).format('YYYY MMM DD'),
+        width: 110,
+      },
+      {
+        Header: intl.get('transaction_type'),
+        accessor: 'reference_type_formatted',
+        width: 100,
+      },
+      {
+        Header: intl.get('credit'),
+        accessor: 'credit',
+        Cell: DebitCreditTableCell,
+        width: 80,
+      },
+      {
+        Header: intl.get('debit'),
+        accessor: 'debit',
+        Cell: DebitCreditTableCell,
+        width: 80,
+      },
+      {
+        Header: intl.get('running_balance'),
+        Cell: RunningBalanceTableCell,
+        accessor: 'running_balance',
+        width: 110,
+      },
+    ],
+    [],
+  );

client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerActionBar.js

@@ -1,23 +1,26 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 import Icon from 'components/Icon';
-import { Button, Classes, NavbarGroup, Intent } from '@blueprintjs/core';
+import {
+  Button,
+  Classes,
+  NavbarGroup,
+  Intent,
+  NavbarDivider,
+} from '@blueprintjs/core';
 import { FormattedMessage as T } from 'components';
-import { safeCallback } from 'utils';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 import { compose } from 'utils';
+import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
 
 /**
  * Expense drawer action bar.
  */
 function ExpenseDrawerActionBar({
-  // #ownProps
-  expense,
-
   // #withAlertsDialog
   openAlert,
 
@@ -25,21 +28,18 @@ function ExpenseDrawerActionBar({
   closeDrawer,
 }) {
   const history = useHistory();
+  const { expense } = useExpenseDrawerContext();
 
   // Handle the expense edit action.
-  const onEditExpense = () => {
-    if (expense) {
-      history.push(`/expenses/${expense.id}/edit`);
-      closeDrawer('expense-drawer');
-    }
+  const handleEditExpense = () => {
+    history.push(`/expenses/${expense.id}/edit`);
+    closeDrawer('expense-drawer');
   };
 
   // Handle the expense delete action.
-  const onDeleteExpense = () => {
-    if (expense) {
-      openAlert('expense-delete', { expenseId: expense.id });
-      closeDrawer('expense-drawer');
-    }
+  const handleDeleteExpense = () => {
+    openAlert('expense-delete', { expenseId: expense.id });
+    closeDrawer('expense-drawer');
   };
 
   return (
@@ -49,15 +49,15 @@ function ExpenseDrawerActionBar({
           className={Classes.MINIMAL}
           icon={<Icon icon="pen-18" />}
           text={<T id={'edit_expense'} />}
-          onClick={safeCallback(onEditExpense)}
+          onClick={handleEditExpense}
         />
-
+        <NavbarDivider />
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon style={{ color: 'red' }} icon="trash-18" iconSize={18} />}
+          icon={<Icon icon="trash-16" iconSize={16} />}
           text={<T id={'delete'} />}
-          // intent={Intent.DANGER}
-          onClick={safeCallback(onDeleteExpense)}
+          intent={Intent.DANGER}
+          onClick={handleDeleteExpense}
         />
       </NavbarGroup>
     </DashboardActionsBar>

client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerContent.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import 'style/components/Drawers/ViewDetails.scss';
+import 'style/components/Drawers/ExpenseDrawer.scss';
 
 import { ExpenseDrawerProvider } from './ExpenseDrawerProvider';
 import ExpenseDrawerDetails from './ExpenseDrawerDetails';

client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerDetails.js

@@ -1,22 +1,26 @@
 import React from 'react';
+
+import { Card } from 'components';
+
 import ExpenseDrawerActionBar from './ExpenseDrawerActionBar';
 import ExpenseDrawerHeader from './ExpenseDrawerHeader';
 import ExpenseDrawerTable from './ExpenseDrawerTable';
 import ExpenseDrawerFooter from './ExpenseDrawerFooter';
-import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
 
 /**
  * Expense view details.
  */
 export default function ExpenseDrawerDetails() {
-  const { expense } = useExpenseDrawerContext();
   return (
     <div className={'expense-drawer'}>
-      <ExpenseDrawerActionBar expense={expense} />
+      <ExpenseDrawerActionBar />
+
       <div className="expense-drawer__content">
-        <ExpenseDrawerHeader expense={expense} />
-        <ExpenseDrawerTable expense={expense} />
-        <ExpenseDrawerFooter expense={expense} />
+        <Card>
+          <ExpenseDrawerHeader />
+          <ExpenseDrawerTable />
+          <ExpenseDrawerFooter />
+        </Card>
       </div>
     </div>
   );

client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.js

@@ -1,20 +1,19 @@
 import React from 'react';
-import { If, Money } from 'components';
-import { FormattedMessage as T } from 'components';
+import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
+
+export default function ExpenseDrawerFooter() {
+  const { expense: { total_amount } } = useExpenseDrawerContext();
 
-export default function ExpenseDrawerFooter({
-  expense: { total_amount, currency_code },
-}) {
   return (
-    <div className="expense-drawer__content--footer">
-      <div className="wrapper">
-        <div>
-          <span><T id={'sub_total'}/></span>
-          <p>{<Money amount={total_amount} currency={currency_code} />}</p>
+    <div className="expense-drawer__content-footer">
+      <div class="total-lines">
+        <div class="total-lines__line total-lines__line--subtotal">
+          <div class="title">Subtotal</div>
+          <div class="amount">{total_amount}</div>
         </div>
-        <div>
-          <span><T id={'total'}/></span>
-          <p>{<Money amount={total_amount} currency={currency_code} />}</p>
+        <div class="total-lines__line total-lines__line--total">
+          <div class="title">TOTAL</div>
+          <div class="amount">{total_amount}</div>
         </div>
       </div>
     </div>

client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.js

@@ -1,68 +1,58 @@
 import React from 'react';
 import moment from 'moment';
-import { If, Money } from 'components';
+import { defaultTo } from 'lodash';
+
+import { DetailItem, DetailsMenu, Money } from 'components';
 import { FormattedMessage as T } from 'components';
+import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
 
 /**
  * Expense drawer content.
  */
-export default function ExpenseDrawerHeader({
-  expense: {
-    total_amount,
-    payment_account: { name },
-    payment_date,
-    currency_code,
-    reference_no,
-    description,
-    published_at,
-  },
-}) {
+export default function ExpenseDrawerHeader() {
+  const {
+    expense: {
+      total_amount,
+      payment_date,
+      currency_code,
+      reference_no,
+      description,
+      published_at,
+    },
+  } = useExpenseDrawerContext();
+
   return (
-    <div className={'expense-drawer__content--header'}>
-      <div className={'info'}>
-        <span>
-          <T id={'full_amount'} />
-        </span>
-        <p className="balance">
-          {<Money amount={total_amount} currency={currency_code} />}
-        </p>
-      </div>
-      <div className={'info'}>
-        <span>
-          <T id={'date'} />
-        </span>
-        <p>{moment(payment_date).format('YYYY MMM DD')}</p>
-      </div>
-      <div className={'info'}>
-        <span>
-          <T id={'payment_account_'} />
-        </span>
-        <p>{name}</p>
-      </div>
-      <div className={'info'}>
-        <span>
-          <T id={'currency'} />
-        </span>
-        <p>{currency_code}</p>
-      </div>
-      <div className={'info'}>
-        <span>
-          <T id={'reference_no'} />
-        </span>
-        <p>{reference_no}</p>
-      </div>
-      <div className={'info'}>
-        <span>
-          <T id={'published_at'} />
-        </span>
-        <p>{moment(published_at).format('YYYY MMM DD')}</p>
-      </div>
-      <div className={'info'}>
-        <span>
-          <T id={'description'} />
-        </span>
-        <p>{description}</p>
-      </div>
+    <div className={'expense-drawer__content-header'}>
+      <DetailsMenu>
+        <DetailItem name={'amount'} label={<T id={'full_amount'} />}>
+          <h3 class="big-number">
+            <Money amount={total_amount} currency={currency_code} />
+          </h3>
+        </DetailItem>
+
+        <DetailItem name={'date'} label={<T id={'date'} />}>
+          {moment(payment_date).format('YYYY MMM DD')}
+        </DetailItem>
+
+        <DetailItem name={'currency'} label={<T id={'currency'} />}>
+          {currency_code}
+        </DetailItem>
+
+        <DetailItem name={'reference'} label={<T id={'reference_no'} />}>
+          {defaultTo(reference_no, '-')}
+        </DetailItem>
+
+        <DetailItem label={<T id={'published_at'} />}>
+          {moment(published_at).format('YYYY MMM DD')}
+        </DetailItem>
+      </DetailsMenu>
+
+      <DetailsMenu direction={'horizantal'}>
+        <DetailItem label={<T id={'description'} />}>
+          {defaultTo(description, '—')}
+        </DetailItem>
+        <DetailItem label={<T id={'created_at'} />}>2021 Aug 24</DetailItem>
+      </DetailsMenu>
     </div>
   );
 }

client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerProvider.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useExpense } from 'hooks/query';
-import { DrawerHeaderContent, DashboardInsider } from 'components';
+import { DashboardInsider } from 'components';
 
 const ExpenseDrawerDrawerContext = React.createContext();
 
@@ -8,16 +8,22 @@ const ExpenseDrawerDrawerContext = React.createContext();
  * Expense drawer provider.
  */
 function ExpenseDrawerProvider({ expenseId, ...props }) {
-  
   // Fetch the expense details.
-  const { data: expense, isLoading: isExpenseLoading } = useExpense(expenseId, {
+  const {
+    data: expense,
+    isLoading: isExpenseLoading,
+    isFetching: isExpenseFetching,
+  } = useExpense(expenseId, {
     enabled: !!expenseId,
   });
 
-  // provider.
+  // Provider.
   const provider = {
     expenseId,
     expense,
+
+    isExpenseFetching,
+    isExpenseLoading,
   };
   return (
     <DashboardInsider loading={isExpenseLoading}>

client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerTable.js

@@ -1,40 +1,18 @@
 import React from 'react';
-
-import intl from 'react-intl-universal';
-import { DataTable, Money } from 'components';
+import { DataTable } from 'components';
+import { useExpenseReadEntriesColumns } from './utils';
+import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
 
 /**
  * Expense details table.
  */
-export default function ExpenseDrawerTable({
-  expense: { currency_code, categories },
-}) {
-  const columns = React.useMemo(
-    () => [
-      {
-        Header: intl.get('expense_account'),
-        accessor: 'expense_account.name',
-        width: 110,
-      },
-      {
-        Header: intl.get('amount'),
-        accessor: ({ amount }) => (
-          <Money amount={amount} currency={currency_code} />
-        ),
-        width: 100,
-      },
-      {
-        Header: intl.get('description'),
-        accessor: 'description',
-        width: 110,
-      },
-    ],
-    [],
-  );
+export default function ExpenseDrawerTable() {
+  const columns = useExpenseReadEntriesColumns();
+  const { expense } = useExpenseDrawerContext();
 
   return (
     <div className="expense-drawer__content--table">
-      <DataTable columns={columns} data={categories} />
+      <DataTable columns={columns} data={expense.categories} />
     </div>
   );
 }

client/src/containers/Drawers/ExpenseDrawer/index.js

@@ -15,10 +15,19 @@ function ExpenseDrawer({
 
   //#withDrawer
   isOpen,
-  payload: { expenseId, title },
+  payload: { expenseId },
 }) {
   return (
-    <Drawer isOpen={isOpen} name={name} title={intl.get('expense')}>
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      title={intl.get('expense')}
+      size={'65%'}
+      style={{
+        minWidth: '700px',
+        maxWidth: '900px',
+      }}
+    >
       <DrawerSuspense>
         <ExpenseDrawerContent expenseId={expenseId} />
       </DrawerSuspense>

client/src/containers/Drawers/ExpenseDrawer/utils.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+export const useExpenseReadEntriesColumns = () =>
+  React.useMemo(
+    () => [
+      {
+        Header: intl.get('expense_account'),
+        accessor: 'expense_account.name',
+        width: 110,
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('description'),
+        accessor: 'description',
+        width: 110,
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('amount'),
+        accessor: 'amount',
+        width: 100,
+        disableSortBy: true,
+      },
+    ],
+    [],
+  );

client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerActionBar.js

@@ -1,23 +1,26 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 import Icon from 'components/Icon';
-import { Button, Classes, NavbarGroup, Intent } from '@blueprintjs/core';
+import {
+  Button,
+  Classes,
+  NavbarGroup,
+  Intent,
+  NavbarDivider,
+} from '@blueprintjs/core';
 import { FormattedMessage as T } from 'components';
-import { safeCallback } from 'utils';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 import { compose } from 'utils';
+import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
 
 /**
  * Manual journal action bar.
  */
 function ManualJournalDrawerActionBar({
-  // #ownProps
-  manualJournal,
-
   // #withAlertsDialog
   openAlert,
 
@@ -25,21 +28,17 @@ function ManualJournalDrawerActionBar({
   closeDrawer,
 }) {
   const history = useHistory();
+  const { manualJournalId } = useManualJournalDrawerContext();
 
   // Handle edit manual journal action.
-  const onEditManualJournal = () => {
-    if (manualJournal) {
-      history.push(`/manual-journals/${manualJournal.id}/edit`);
-      closeDrawer('journal-drawer');
-    }
+  const handleEditManualJournal = () => {
+    history.push(`/manual-journals/${manualJournalId}/edit`);
+    closeDrawer('journal-drawer');
   };
 
   // Handle manual journal delete action.
-  const onDeleteManualJournal = () => {
-    if (manualJournal) {
-      openAlert('journal-delete', { manualJournalId: manualJournal.id });
-      closeDrawer('journal-drawer');
-    }
+  const handleDeleteManualJournal = () => {
+    openAlert('journal-delete', { manualJournalId });
   };
 
   return (
@@ -49,14 +48,15 @@ function ManualJournalDrawerActionBar({
           className={Classes.MINIMAL}
           icon={<Icon icon="pen-18" />}
           text={<T id={'edit_journal'} />}
-          onClick={safeCallback(onEditManualJournal)}
+          onClick={handleEditManualJournal}
         />
-
+        <NavbarDivider />
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon style={{ color: 'red' }} icon="trash-18" iconSize={18} />}
+          icon={<Icon icon="trash-16" iconSize={16} />}
           text={<T id={'delete'} />}
-          onClick={safeCallback(onDeleteManualJournal)}
+          intent={Intent.DANGER}
+          onClick={handleDeleteManualJournal}
         />
       </NavbarGroup>
     </DashboardActionsBar>

client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerDetails.js

@@ -1,4 +1,7 @@
 import React from 'react';
+
+import { Card } from 'components';
+
 import ManualJournalDrawerActionBar from './ManualJournalDrawerActionBar';
 import ManualJournalDrawerHeader from './ManualJournalDrawerHeader';
 import ManualJournalDrawerTable from './ManualJournalDrawerTable';
@@ -15,10 +18,13 @@ export default function ManualJournalDrawerDetails() {
   return (
     <div className={'journal-drawer'}>
       <ManualJournalDrawerActionBar manualJournal={manualJournal} />
+
       <div className="journal-drawer__content">
-        <ManualJournalDrawerHeader manualJournal={manualJournal} />
-        <ManualJournalDrawerTable manualJournal={manualJournal} />
-        <ManualJournalDrawerFooter manualJournal={manualJournal} />
+        <Card>
+          <ManualJournalDrawerHeader />
+          <ManualJournalDrawerTable />
+          <ManualJournalDrawerFooter />
+        </Card>
       </div>
     </div>
   );

client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerFooter.js

@@ -1,25 +1,27 @@
 import React from 'react';
-import { FormattedMessage as T } from 'components';
+import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
+
+export default function ManualJournalDrawerFooter({}) {
+  const {
+    manualJournal: { amount },
+  } = useManualJournalDrawerContext();
 
-export default function ManualJournalDrawerFooter({
-  manualJournal: { amount_formatted },
-}) {
   return (
-    <div className="journal-drawer__content--footer">
-      <div className="wrapper">
-        <div>
-          <span>
-            <T id={'sub_total'} />
-          </span>
-          <p>{amount_formatted}</p>
+    <div className="journal-drawer__content-footer">
+      <div class="total-lines">
+        <div class="total-lines__line total-lines__line--subtotal">
+          <div class="title">Subtotal</div>
+          <div class="debit">{amount}</div>
+          <div class="credit">{amount} </div>
         </div>
-        <div>
-          <span>
-            <T id={'total'} />
-          </span>
-          <p>{amount_formatted}</p>
+        <div class="total-lines__line total-lines__line--total">
+          <div class="title">TOTAL</div>
+          <div class="debit">{amount}</div>
+          <div class="credit">{amount}</div>
         </div>
       </div>
     </div>
   );
 }
+
+

client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerHeader.js

@@ -1,47 +1,49 @@
 import React from 'react';
-import { FormattedMessage as T } from 'components';
+import { defaultTo } from 'lodash';
+import { DetailsMenu, DetailItem, FormattedMessage as T } from 'components';
+import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
 
 /**
- *  Manual journal details header.
+ * Manual journal details header.
  */
-export default function ManualJournalDrawerHeader({
-  manualJournal: {
-    amount_formatted,
-    journal_type,
-    journal_number,
-    reference,
-    currency_code,
-  },
-}) {
+export default function ManualJournalDrawerHeader() {
+  const {
+    manualJournal: {
+      formatted_amount,
+      journal_type,
+      journal_number,
+      reference,
+      currency_code,
+      description,
+    },
+  } = useManualJournalDrawerContext();
+
   return (
-    <div className={'journal-drawer__content--header'}>
-      <div>
-        <T id={'total'} />
-        <p className="balance">{amount_formatted}</p>
-      </div>
-      <div>
-        <span>
-          <T id={'journal_type'} />
-        </span>
-        <p>{journal_type}</p>
-      </div>
-      <div>
-        <span>
-          <T id={'journal_no'} />
-        </span>
-        <p>{journal_number}</p>
-      </div>
-      <div>
-        <span>
-          <T id={'reference_no'} />
-        </span>
-        <p>{reference}</p>
-      </div>
-      <div>
-        <span>
-          <T id={'currency'} />
-        </span>
-        <p>{currency_code}</p>
+    <div className={'journal-drawer__content-header'}>
+      <DetailsMenu>
+        <DetailItem name={'total'} label={<T id={'total'} />}>
+          <h3 class="amount">{formatted_amount}</h3>
+        </DetailItem>
+
+        <DetailItem name={'journal-type'} label={<T id={'journal_type'} />}>
+          {journal_type}
+        </DetailItem>
+
+        <DetailItem name={'journal-number'} label={<T id={'journal_no'} />}>
+          {journal_number}
+        </DetailItem>
+
+        <DetailItem name={'reference-no'} label={<T id={'reference_no'} />}>
+          {defaultTo(reference, '-')}
+        </DetailItem>
+
+        <DetailItem name={'currency'} label={<T id={'currency'} />}>
+          {currency_code}
+        </DetailItem>
+      </DetailsMenu>
+
+      <div class="journal-drawer__content-description">
+        <b class="title">Description</b>: {defaultTo(description, '—')}
       </div>
     </div>
   );

client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerProvider.js

@@ -9,17 +9,22 @@ const ManualJournalDrawerContext = React.createContext();
  * Manual journal drawer provider.
  */
 function ManualJournalDrawerProvider({ manualJournalId, ...props }) {
-  // fetch the specific manual journal details.
-  const { data: manualJournal, isLoading: isJournalLoading } = useJournal(
-    manualJournalId,
-    {
-      enabled: !!manualJournalId,
-    },
-  );
-  // provider.
+  // Fetch the specific manual journal details.
+  const {
+    data: manualJournal,
+    isLoading: isJournalLoading,
+    isFetching: isJournalFetching,
+  } = useJournal(manualJournalId, {
+    enabled: !!manualJournalId,
+  });
+
+  // Provider.
   const provider = {
     manualJournalId,
     manualJournal,
+
+    isJournalFetching,
+    isJournalLoading,
   };
 
   return (

client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerTable.js

@@ -1,73 +1,20 @@
 import React from 'react';
-import { Classes, Tooltip, Position } from '@blueprintjs/core';
 
-import intl from 'react-intl-universal';
-import { DataTable, Money, If, Icon } from 'components';
-import { isBlank } from 'utils';
-
-/**
- * Note column accessor.
- */
-export function NoteAccessor(row) {
-  return (
-    <If condition={row.note}>
-      <Tooltip
-        className={Classes.TOOLTIP_INDICATOR}
-        content={row.note}
-        position={Position.LEFT_TOP}
-        hoverOpenDelay={50}
-      >
-        <Icon icon={'file-alt'} iconSize={16} />
-      </Tooltip>
-    </If>
-  );
-}
+import { DataTable, If } from 'components';
+import { useManualJournalEntriesColumns } from './utils';
+import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
 
 /**
  * Manual journal drawer table.
  */
-export default function ManualJournalDrawerTable({
-  manualJournal: { entries, description, currency_code },
-}) {
-  const columns = React.useMemo(
-    () => [
-      {
-        Header: intl.get('account_name'),
-        accessor: 'account.name',
-        width: 130,
-      },
-      {
-        Header: intl.get('contact'),
-        accessor: 'contact.display_name',
-        width: 130,
-      },
-      {
-        Header: intl.get('credit'),
-        accessor: ({ credit }) =>
-          !isBlank(credit) && credit !== 0 ? (
-            <Money amount={credit} currency={currency_code} />
-          ) : null,
-        width: 80,
-      },
-      {
-        Header: intl.get('debit'),
-        accessor: ({ debit }) =>
-          !isBlank(debit) && debit !== 0 ? (
-            <Money amount={debit} currency={currency_code} />
-          ) : null,
-        width: 80,
-      },
-      {
-        Header: intl.get('note'),
-        accessor: NoteAccessor,
-        width: 80,
-      },
-    ],
-    [],
-  );
+export default function ManualJournalDrawerTable() {
+  const columns = useManualJournalEntriesColumns();
+  const {
+    manualJournal: { entries, description },
+  } = useManualJournalDrawerContext();
 
   return (
-    <div className="journal-drawer__content--table">
+    <div className="journal-drawer__content-table">
       <DataTable columns={columns} data={entries} />
 
       <If condition={description}>

client/src/containers/Drawers/ManualJournalDrawer/index.js

@@ -19,7 +19,15 @@ function ManualJournalDrawer({
   payload: { manualJournalId },
 }) {
   return (
-    <Drawer isOpen={isOpen} name={name} size={'900px'}>
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      size={'65%'}
+      style={{
+        minWidth: '700px',
+        maxWidth: '900px',
+      }}
+    >
       <DrawerSuspense>
         <ManualJournalDrawerContent manualJournalId={manualJournalId} />
       </DrawerSuspense>

client/src/containers/Drawers/ManualJournalDrawer/utils.js

@@ -0,0 +1,65 @@
+import intl from 'react-intl-universal';
+import React from 'react';
+import { Classes, Tooltip, Position } from '@blueprintjs/core';
+
+import { If, Icon } from 'components';
+
+/**
+ * Note column accessor.
+ */
+export function NoteAccessor(row) {
+  return (
+    <If condition={row.note}>
+      <Tooltip
+        className={Classes.TOOLTIP_INDICATOR}
+        content={row.note}
+        position={Position.LEFT_TOP}
+        hoverOpenDelay={50}
+      >
+        <Icon icon={'file-alt'} iconSize={16} />
+      </Tooltip>
+    </If>
+  );
+}
+
+/**
+ * Retrieve read-only manual journal entries columns.
+ */
+export const useManualJournalEntriesColumns = () =>
+  React.useMemo(
+    () => [
+      {
+        Header: intl.get('account_name'),
+        accessor: 'account.name',
+        width: 130,
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('contact'),
+        accessor: 'contact.display_name',
+        width: 130,
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('note'),
+        accessor: NoteAccessor,
+        width: 80,
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('credit'),
+        accessor: 'credit',
+        width: 100,
+        disableResizable: true,
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('debit'),
+        accessor: 'debit',
+        width: 100,
+        disableResizable: true,
+        disableSortBy: true,
+      },
+    ],
+    [],
+  );

client/src/containers/Expenses/ExpensesLanding/ExpensesList.js

@@ -21,6 +21,7 @@ import { ExpensesListProvider } from './ExpensesListProvider';
 function ExpensesList({
   // #withExpenses
   expensesTableState,
+  expensesTableStateChanged,
 
   // #withExpensesActions
   setExpensesTableState,
@@ -40,6 +41,7 @@ function ExpensesList({
   return (
     <ExpensesListProvider
       query={transformTableStateToQuery(expensesTableState)}
+      tableStateChanged={expensesTableStateChanged}
     >
       <ExpenseActionsBar />
 
@@ -57,6 +59,9 @@ function ExpensesList({
 }
 
 export default compose(
-  withExpenses(({ expensesTableState }) => ({ expensesTableState })),
+  withExpenses(({ expensesTableState, expensesTableStateChanged }) => ({
+    expensesTableState,
+    expensesTableStateChanged,
+  })),
   withExpensesActions,
 )(ExpensesList);

client/src/containers/Expenses/ExpensesLanding/ExpensesListProvider.js

@@ -1,14 +1,16 @@
 import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
+
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import { useExpenses, useResourceMeta, useResourceViews } from 'hooks/query';
-import { isTableEmptyStatus, getFieldsFromResourceMeta } from 'utils';
+import { getFieldsFromResourceMeta } from 'utils';
 
 const ExpensesListContext = createContext();
 
 /**
  * Accounts chart data provider.
  */
-function ExpensesListProvider({ query, ...props }) {
+function ExpensesListProvider({ query, tableStateChanged, ...props }) {
   // Fetch accounts resource views and fields.
   const { data: expensesViews, isLoading: isViewsLoading } =
     useResourceViews('expenses');
@@ -29,11 +31,7 @@ function ExpensesListProvider({ query, ...props }) {
 
   // Detarmines the datatable empty status.
   const isEmptyStatus =
-    isTableEmptyStatus({
-      data: expenses,
-      pagination,
-      filterMeta,
-    }) && !isExpensesFetching;
+    isEmpty(expenses) && !isExpensesLoading && !tableStateChanged;
 
   // Provider payload.
   const provider = {

client/src/containers/Expenses/ExpensesLanding/withExpenses.js

@@ -1,12 +1,17 @@
 import { connect } from 'react-redux';
-import { getExpensesTableStateFactory } from 'store/expenses/expenses.selectors';
+import {
+  expensesTableStateChangedFactory,
+  getExpensesTableStateFactory,
+} from 'store/expenses/expenses.selectors';
 
 export default (mapState) => {
   const getExpensesTableState = getExpensesTableStateFactory();
+  const expensesTableStateChanged = expensesTableStateChangedFactory();
 
   const mapStateToProps = (state, props) => {
     const mapped = {
       expensesTableState: getExpensesTableState(state, props),
+      expensesTableStateChanged: expensesTableStateChanged(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

client/src/containers/Expenses/ExpensesLanding/withExpensesActions.js

@@ -1,8 +1,12 @@
 import { connect } from 'react-redux';
-import { setExpensesTableState } from 'store/expenses/expenses.actions';
+import {
+  setExpensesTableState,
+  resetExpensesTableState,
+} from 'store/expenses/expenses.actions';
 
 const mapDispatchToProps = (dispatch) => ({
   setExpensesTableState: (state) => dispatch(setExpensesTableState(state)),
+  resetExpensesTableState: (state) => dispatch(resetExpensesTableState(state)),
 });
 
 export default connect(null, mapDispatchToProps);

client/src/containers/Items/ItemsList.js

@@ -11,7 +11,9 @@ import ItemsViewsTabs from './ItemsViewsTabs';
 import ItemsDataTable from './ItemsDataTable';
 
 import { ItemsListProvider } from './ItemsListProvider';
+
 import withItems from './withItems';
+import withItemsActions from './withItemsActions';
 
 /**
  * Items list.
@@ -19,9 +21,24 @@ import withItems from './withItems';
 function ItemsList({
   // #withItems
   itemsTableState,
+  itemsTableStateChanged,
+
+  // #withItemsActions
+  resetItemsTableState,
 }) {
+  // Resets items table query state once the page unmount.
+  React.useEffect(
+    () => () => {
+      resetItemsTableState();
+    },
+    [resetItemsTableState],
+  );
+
   return (
-    <ItemsListProvider tableState={itemsTableState}>
+    <ItemsListProvider
+      tableState={itemsTableState}
+      tableStateChanged={itemsTableStateChanged}
+    >
       <ItemsActionsBar />
 
       <DashboardPageContent>
@@ -38,5 +55,9 @@ function ItemsList({
 }
 
 export default compose(
-  withItems(({ itemsTableState }) => ({ itemsTableState })),
+  withItemsActions,
+  withItems(({ itemsTableState, itemsTableStateChanged }) => ({
+    itemsTableState,
+    itemsTableStateChanged,
+  })),
 )(ItemsList);

client/src/containers/Items/ItemsListProvider.js

@@ -1,5 +1,5 @@
 import React, { createContext } from 'react';
-
+import { isEmpty } from 'lodash';
 import {
   getFieldsFromResourceMeta,
   transformTableQueryToParams,
@@ -15,7 +15,7 @@ const ItemsContext = createContext();
 /**
  * Items list provider.
  */
-function ItemsListProvider({ tableState, ...props }) {
+function ItemsListProvider({ tableState, tableStateChanged, ...props }) {
   const tableQuery = transformItemsTableState(tableState);
 
   // Fetch accounts resource views and fields.
@@ -43,13 +43,7 @@ function ItemsListProvider({ tableState, ...props }) {
 
   // Detarmines the datatable empty status.
   const isEmptyStatus =
-    isTableEmptyStatus({
-      data: items,
-      pagination,
-      filterMeta,
-    }) &&
-    !isItemsFetching &&
-    !tableState.inactiveMode;
+    !tableStateChanged && !isItemsLoading && isEmpty(items);
 
   const state = {
     itemsViews,
@@ -68,7 +62,10 @@ function ItemsListProvider({ tableState, ...props }) {
   };
 
   return (
-    <DashboardInsider loading={isItemsLoading || isResourceLoading} name={'items-list'}>
+    <DashboardInsider
+      loading={isItemsLoading || isResourceLoading}
+      name={'items-list'}
+    >
       <ItemsContext.Provider value={state} {...props} />
     </DashboardInsider>
   );

client/src/containers/Items/ItemsViewsTabs.js

@@ -22,7 +22,7 @@ function ItemsViewsTabs({
   const { itemsViews } = useItemsListContext();
 
   // Mapped items views.
-  const tabs = transfromViewsToTabs(itemsViews)
+  const tabs = transfromViewsToTabs(itemsViews);
 
   // Handles the active tab change.
   const handleTabChange = (viewSlug) => {
@@ -46,7 +46,7 @@ function ItemsViewsTabs({
 export default compose(
   withRouter,
   withItems(({ itemsTableState }) => ({
-    itemsCurrentView: itemsTableState?.viewSlug
+    itemsCurrentView: itemsTableState?.viewSlug,
   })),
   withItemsActions,
 )(ItemsViewsTabs);

client/src/containers/Items/withItems.js

@@ -1,15 +1,18 @@
 import {connect} from 'react-redux';
 import {
   getItemsTableStateFactory,
+  isItemsTableStateChangedFactory,
 } from 'store/items/items.selectors';
 
 export default (mapState) => {
   const getItemsTableState = getItemsTableStateFactory();
+  const isItemsTableStateChanged = isItemsTableStateChangedFactory();
 
   const mapStateToProps = (state, props) => {
     const mapped = {
       itemsSelectedRows: state.items.selectedRows,
       itemsTableState: getItemsTableState(state, props),
+      itemsTableStateChanged: isItemsTableStateChanged(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

client/src/containers/Items/withItemsActions.js

@@ -1,8 +1,12 @@
 import { connect } from 'react-redux';
-import { setItemsTableState }from 'store/items/items.actions';
+import {
+  setItemsTableState,
+  resetItemsTableState,
+} from 'store/items/items.actions';
 
 export const mapDispatchToProps = (dispatch) => ({
   setItemsTableState: (queries) => dispatch(setItemsTableState(queries)),
+  resetItemsTableState: () => dispatch(resetItemsTableState()),
 });
 
 export default connect(null, mapDispatchToProps);

client/src/containers/Purchases/Bills/BillsLanding/BillsList.js

@@ -21,9 +21,10 @@ import { transformTableStateToQuery, compose } from 'utils';
 function BillsList({
   // #withBills
   billsTableState,
+  billsTableStateChanged,
 
   // #withBillsActions
-  setBillsTableState
+  setBillsTableState,
 }) {
   // Resets the accounts table state once the page unmount.
   useEffect(
@@ -38,7 +39,10 @@ function BillsList({
   );
 
   return (
-    <BillsListProvider query={transformTableStateToQuery(billsTableState)}>
+    <BillsListProvider
+      query={transformTableStateToQuery(billsTableState)}
+      tableStateChanged={billsTableStateChanged}
+    >
       <BillsActionsBar />
 
       <DashboardPageContent>
@@ -55,6 +59,9 @@ function BillsList({
 }
 
 export default compose(
-  withBills(({ billsTableState }) => ({ billsTableState })),
-  withBillsActions
+  withBills(({ billsTableState, billsTableStateChanged }) => ({
+    billsTableState,
+    billsTableStateChanged,
+  })),
+  withBillsActions,
 )(BillsList);

client/src/containers/Purchases/Bills/BillsLanding/BillsListProvider.js

@@ -1,14 +1,17 @@
 import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
+
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import { useResourceViews, useResourceMeta, useBills } from 'hooks/query';
-import { getFieldsFromResourceMeta, isTableEmptyStatus } from 'utils';
+
+import { getFieldsFromResourceMeta } from 'utils';
 
 const BillsListContext = createContext();
 
 /**
  * Accounts chart data provider.
  */
-function BillsListProvider({ query, ...props }) {
+function BillsListProvider({ query, tableStateChanged, ...props }) {
   // Fetch accounts resource views and fields.
   const { data: billsViews, isLoading: isViewsLoading } =
     useResourceViews('bills');
@@ -29,11 +32,7 @@ function BillsListProvider({ query, ...props }) {
 
   // Detarmines the datatable empty status.
   const isEmptyStatus =
-    isTableEmptyStatus({
-      data: bills,
-      pagination,
-      filterMeta,
-    }) && !isBillsFetching;
+    isEmpty(bills) && !isBillsLoading && !tableStateChanged;
 
   // Provider payload.
   const provider = {

client/src/containers/Purchases/Bills/BillsLanding/withBills.js

@@ -1,12 +1,17 @@
 import { connect } from 'react-redux';
-import { getBillsTableStateFactory } from 'store/Bills/bills.selectors';
+import {
+  getBillsTableStateFactory,
+  billsTableStateChangedFactory,
+} from 'store/Bills/bills.selectors';
 
 export default (mapState) => {
   const getBillsTableState = getBillsTableStateFactory();
+  const billsTableStateChanged = billsTableStateChangedFactory();
 
   const mapStateToProps = (state, props) => {
     const mapped = {
       billsTableState: getBillsTableState(state, props),
+      billsTableStateChanged: billsTableStateChanged(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

client/src/containers/Purchases/Bills/BillsLanding/withBillsActions.js

@@ -1,8 +1,12 @@
 import { connect } from 'react-redux';
-import { setBillsTableState } from 'store/Bills/bills.actions';
+import {
+  setBillsTableState,
+  resetBillsTableState,
+} from 'store/Bills/bills.actions';
 
 const mapDispatchToProps = (dispatch) => ({
   setBillsTableState: (queries) => dispatch(setBillsTableState(queries)),
+  resetBillsTableState: () => dispatch(resetBillsTableState()),
 });
 
 export default connect(null, mapDispatchToProps);

client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js

@@ -43,17 +43,17 @@ function PaymentMadeActionsBar({
   // Payment receives list context.
   const { paymentMadesViews, fields } = usePaymentMadesListContext();
 
+  // Payment receive refresh action.
+  const { refresh } = useRefreshPaymentMades();
+
   // Handle new payment made button click.
   const handleClickNewPaymentMade = () => {
     history.push('/payment-mades/new');
   };
 
-  // Payment receive refresh action.
-  const { refresh } = useRefreshPaymentMades();
-
   // Handle tab changing.
-  const handleTabChange = (customView) => {
-    setPaymentMadesTableState({ customViewId: customView.id || null });
+  const handleTabChange = (viewSlug) => {
+    setPaymentMadesTableState({ viewSlug });
   };
 
   // Handle click a refresh payment receives.

client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeList.js

@@ -20,25 +20,23 @@ import { compose, transformTableStateToQuery } from 'utils';
 function PaymentMadeList({
   // #withPaymentMades
   paymentMadesTableState,
+  paymentsTableStateChanged,
 
   // #withPaymentMadeActions
-  setPaymentMadesTableState
+  resetPaymentMadesTableState,
 }) {
   // Resets the invoices table state once the page unmount.
   React.useEffect(
     () => () => {
-      setPaymentMadesTableState({
-        filterRoles: [],
-        viewSlug: '',
-        pageIndex: 0,
-      });
+      resetPaymentMadesTableState();
     },
-    [setPaymentMadesTableState],
+    [resetPaymentMadesTableState],
   );
 
   return (
     <PaymentMadesListProvider
       query={transformTableStateToQuery(paymentMadesTableState)}
+      tableStateChanged={paymentsTableStateChanged}
     >
       <PaymentMadeActionsBar />
 
@@ -56,8 +54,9 @@ function PaymentMadeList({
 }
 
 export default compose(
-  withPaymentMades(({ paymentMadesTableState }) => ({
+  withPaymentMades(({ paymentMadesTableState, paymentsTableStateChanged }) => ({
     paymentMadesTableState,
+    paymentsTableStateChanged,
   })),
-  withPaymentMadeActions
+  withPaymentMadeActions,
 )(PaymentMadeList);

client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeViewTabs.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { useHistory } from 'react-router';
 import { FormattedMessage as T } from 'components';
 import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
-import { pick } from 'lodash';
 
 import { DashboardViewsTabs } from 'components';
 
@@ -10,6 +9,8 @@ import { usePaymentMadesListContext } from './PaymentMadesListProvider';
 import withPaymentMadeActions from './withPaymentMadeActions';
 
 import { compose } from 'utils';
+import { transformPaymentViewsToTabs } from './utils';
+
 import withPaymentMade from './withPaymentMade';
 
 /**
@@ -28,15 +29,14 @@ function PaymentMadeViewTabs({
   const { paymentMadesViews } = usePaymentMadesListContext();
 
   // Handle the active tab changning.
-  const handleTabsChange = (customView) => {
-    setPaymentMadesTableState({
-      customViewId: customView.id || null,
-    });
+  const handleTabsChange = (viewSlug) => {
+    setPaymentMadesTableState({ viewSlug });
   };
-
-  const tabs = paymentMadesViews.map((view) => ({
-    ...pick(view, ['name', 'id']),
-  }));
+  // Transformes payment views to tabs.
+  const tabs = React.useMemo(
+    () => transformPaymentViewsToTabs(paymentMadesViews),
+    [paymentMadesViews],
+  );
 
   const handleClickNewView = () => {
     history.push('/custom_views/payment-mades/new');
@@ -59,5 +59,5 @@ function PaymentMadeViewTabs({
 
 export default compose(
   withPaymentMadeActions,
-  withPaymentMade(({ paymentMadesTableState }) => ({ paymentMadesTableState }))
+  withPaymentMade(({ paymentMadesTableState }) => ({ paymentMadesTableState })),
 )(PaymentMadeViewTabs);

client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesListProvider.js

@@ -1,23 +1,23 @@
 import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
+
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import {
   useResourceViews,
   usePaymentMades,
-  useResourceMeta
+  useResourceMeta,
 } from 'hooks/query';
-import { isTableEmptyStatus, getFieldsFromResourceMeta } from 'utils';
+import { getFieldsFromResourceMeta } from 'utils';
 
 const PaymentMadesListContext = createContext();
 
 /**
  * Accounts chart data provider.
  */
-function PaymentMadesListProvider({ query, ...props }) {
+function PaymentMadesListProvider({ query, tableStateChanged, ...props }) {
   // Fetch accounts resource views and fields.
-  const {
-    data: paymentMadesViews,
-    isLoading: isViewsLoading,
-  } = useResourceViews('bill_payments');
+  const { data: paymentMadesViews, isLoading: isViewsLoading } =
+    useResourceViews('bill_payments');
 
   // Fetch the accounts resource fields.
   const {
@@ -35,11 +35,7 @@ function PaymentMadesListProvider({ query, ...props }) {
 
   // Detarmines the datatable empty status.
   const isEmptyStatus =
-    isTableEmptyStatus({
-      data: paymentMades,
-      pagination,
-      filterMeta,
-    }) && !isPaymentsLoading;
+    isEmpty(paymentMades) && !isPaymentsLoading && !tableStateChanged;
 
   // Provider payload.
   const provider = {
@@ -56,7 +52,7 @@ function PaymentMadesListProvider({ query, ...props }) {
     isPaymentsLoading,
     isPaymentsFetching,
     isViewsLoading,
-    isEmptyStatus
+    isEmptyStatus,
   };
 
   return (

client/src/containers/Purchases/PaymentMades/PaymentsLanding/utils.js

@@ -0,0 +1,7 @@
+import { pick } from 'lodash';
+
+export const transformPaymentViewsToTabs = (paymentMadeViews) => {
+    return paymentMadeViews.map((view) => ({
+      ...pick(view, ['name', 'id']),
+    }));
+  };

client/src/containers/Purchases/PaymentMades/PaymentsLanding/withPaymentMade.js

@@ -1,14 +1,17 @@
 import { connect } from 'react-redux';
 import {
-  getPaymentMadesTableStateFactory
+  getPaymentMadesTableStateFactory,
+  paymentsTableStateChangedFactory,
 } from 'store/PaymentMades/paymentMades.selector';
 
 export default (mapState) => {
   const getPaymentMadesTableState = getPaymentMadesTableStateFactory();
+  const paymentsTableStateChanged = paymentsTableStateChangedFactory();
 
   const mapStateToProps = (state, props) => {
     const mapped = {
       paymentMadesTableState: getPaymentMadesTableState(state, props),
+      paymentsTableStateChanged: paymentsTableStateChanged(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

client/src/containers/Purchases/PaymentMades/PaymentsLanding/withPaymentMadeActions.js

@@ -1,8 +1,13 @@
 import { connect } from 'react-redux';
-import { setPaymentMadesTableState } from 'store/PaymentMades/paymentMades.actions';
+import {
+  setPaymentMadesTableState,
+  resetPaymentMadesTableState,
+} from 'store/PaymentMades/paymentMades.actions';
 
 const mapDispatchToProps = (dispatch) => ({
   setPaymentMadesTableState: (state) =>
     dispatch(setPaymentMadesTableState(state)),
+
+  resetPaymentMadesTableState: () => dispatch(resetPaymentMadesTableState()),
 });
 export default connect(null, mapDispatchToProps);

client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js

@@ -46,7 +46,6 @@ function EstimateActionsBar({
   const onClickNewEstimate = () => {
     history.push('/estimates/new');
   };
-
   // Estimates refresh action.
   const { refresh } = useRefreshEstimates();
 

client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesList.js

@@ -20,25 +20,23 @@ import { compose, transformTableStateToQuery } from 'utils';
 function EstimatesList({
   // #withEstimate
   estimatesTableState,
+  estimatesTableStateChanged,
 
   // #withEstimatesActions
-  setEstimatesTableState
+  resetEstimatesTableState,
 }) {
   // Resets the estimates table state once the page unmount.
   React.useEffect(
     () => () => {
-      setEstimatesTableState({
-        filterRoles: [],
-        viewSlug: '',
-        pageIndex: 0,
-      });
+      resetEstimatesTableState();
     },
-    [setEstimatesTableState],
+    [resetEstimatesTableState],
   );
 
   return (
     <EstimatesListProvider
       query={transformTableStateToQuery(estimatesTableState)}
+      tableStateChanged={estimatesTableStateChanged}
     >
       <EstimatesActionsBar />
 
@@ -56,6 +54,9 @@ function EstimatesList({
 }
 
 export default compose(
-  withEstimates(({ estimatesTableState }) => ({ estimatesTableState })),
-  withEstimatesActions
+  withEstimates(({ estimatesTableState, estimatesTableStateChanged }) => ({
+    estimatesTableState,
+    estimatesTableStateChanged,
+  })),
+  withEstimatesActions,
 )(EstimatesList);

client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesListProvider.js

@@ -1,16 +1,18 @@
 import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
 
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 
 import { useResourceViews, useResourceMeta, useEstimates } from 'hooks/query';
-import { isTableEmptyStatus, getFieldsFromResourceMeta } from 'utils';
+import { getFieldsFromResourceMeta } from 'utils';
 
+// Estimates list context.
 const EstimatesListContext = createContext();
 
 /**
  * Sale estimates data provider.
  */
-function EstimatesListProvider({ query, ...props }) {
+function EstimatesListProvider({ query, tableStateChanged, ...props }) {
   // Fetches estimates resource views and fields.
   const { data: estimatesViews, isLoading: isViewsLoading } =
     useResourceViews('sale_estimates');
@@ -31,11 +33,7 @@ function EstimatesListProvider({ query, ...props }) {
 
   // Detarmines the datatable empty status.
   const isEmptyStatus =
-    isTableEmptyStatus({
-      data: estimates,
-      pagination,
-      filterMeta,
-    }) && !isEstimatesFetching;
+    !isEstimatesLoading && !tableStateChanged && isEmpty(estimates);
 
   // Provider payload.
   const provider = {

client/src/containers/Sales/Estimates/EstimatesLanding/withEstimates.js

@@ -1,14 +1,17 @@
 import { connect } from 'react-redux';
 import {
   getEstimatesTableStateFactory,
+  isEstimatesTableStateChangedFactory,
 } from 'store/Estimate/estimates.selectors';
 
 export default (mapState) => {
   const getEstimatesTableState = getEstimatesTableStateFactory();
+  const isEstimatesTableStateChanged = isEstimatesTableStateChangedFactory();
 
   const mapStateToProps = (state, props) => {
     const mapped = {
       estimatesTableState: getEstimatesTableState(state, props),
+      estimatesTableStateChanged: isEstimatesTableStateChanged(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

client/src/containers/Sales/Estimates/EstimatesLanding/withEstimatesActions.js

@@ -1,10 +1,12 @@
 import { connect } from 'react-redux';
 import {
   setEstimatesTableState,
+  resetEstimatesTableState,
 } from 'store/Estimate/estimates.actions';
 
 const mapDispatchToProps = (dispatch) => ({
   setEstimatesTableState: (state) => dispatch(setEstimatesTableState(state)),
+  resetEstimatesTableState: () => dispatch(resetEstimatesTableState()),
 });
 
 export default connect(null, mapDispatchToProps);

client/src/containers/Sales/Invoices/InvoicesLanding/InvoiceViewTabs.js

@@ -29,9 +29,7 @@ function InvoiceViewTabs({
 
   // Handle tab change.
   const handleTabsChange = (viewSlug) => {
-    setInvoicesTableState({
-      viewSlug: viewSlug || null,
-    });
+    setInvoicesTableState({ viewSlug });
   };
   // Handle click a new view tab.
   const handleClickNewView = () => {

client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesList.js

@@ -22,25 +22,23 @@ import { transformTableStateToQuery, compose } from 'utils';
 function InvoicesList({
   // #withInvoice
   invoicesTableState,
+  invoicesTableStateChanged,
 
   // #withInvoicesActions
-  setInvoicesTableState
+  resetInvoicesTableState,
 }) {
   // Resets the invoices table state once the page unmount.
   React.useEffect(
     () => () => {
-      setInvoicesTableState({
-        filterRoles: [],
-        viewSlug: '',
-        pageIndex: 0,
-      });
+      resetInvoicesTableState();
     },
-    [setInvoicesTableState],
+    [resetInvoicesTableState],
   );
 
   return (
     <InvoicesListProvider
       query={transformTableStateToQuery(invoicesTableState)}
+      tableStateChanged={invoicesTableStateChanged}
     >
       <InvoicesActionsBar />
 
@@ -58,7 +56,10 @@ function InvoicesList({
 }
 
 export default compose(
-  withInvoices(({ invoicesTableState }) => ({ invoicesTableState })),
+  withInvoices(({ invoicesTableState, invoicesTableStateChanged }) => ({
+    invoicesTableState,
+    invoicesTableStateChanged,
+  })),
   withInvoiceActions,
   withAlertsActions,
 )(InvoicesList);

client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesListProvider.js

@@ -1,14 +1,16 @@
 import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
+
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import { useResourceViews, useResourceMeta, useInvoices } from 'hooks/query';
-import { isTableEmptyStatus, getFieldsFromResourceMeta } from 'utils';
+import { getFieldsFromResourceMeta } from 'utils';
 
 const InvoicesListContext = createContext();
 
 /**
  * Accounts chart data provider.
  */
-function InvoicesListProvider({ query, ...props }) {
+function InvoicesListProvider({ query, tableStateChanged, ...props }) {
   // Fetch accounts resource views and fields.
   const { data: invoicesViews, isLoading: isViewsLoading } =
     useResourceViews('sale_invoices');
@@ -29,11 +31,7 @@ function InvoicesListProvider({ query, ...props }) {
 
   // Detarmines the datatable empty status.
   const isEmptyStatus =
-    isTableEmptyStatus({
-      data: invoices,
-      pagination,
-      filterMeta,
-    }) && !isInvoicesLoading;
+    isEmpty(invoices) && !tableStateChanged && !isInvoicesLoading;
 
   // Provider payload.
   const provider = {

client/src/containers/Sales/Invoices/InvoicesLanding/withInvoiceActions.js

@@ -1,10 +1,12 @@
 import { connect } from 'react-redux';
 import {
-  setInvoicesTableState
+  setInvoicesTableState,
+  resetInvoicesTableState
 } from 'store/Invoice/invoices.actions';
 
 const mapDipatchToProps = (dispatch) => ({
   setInvoicesTableState: (queries) => dispatch(setInvoicesTableState(queries)),
+  resetInvoicesTableState: () => dispatch(resetInvoicesTableState()),
 });
 
 export default connect(null, mapDipatchToProps);

client/src/containers/Sales/Invoices/InvoicesLanding/withInvoices.js

@@ -1,14 +1,17 @@
 import { connect } from 'react-redux';
 import {
   getInvoicesTableStateFactory,
+  isInvoicesTableStateChangedFactory,
 } from 'store/Invoice/invoices.selector';
 
 export default (mapState) => {
   const getInvoicesTableState = getInvoicesTableStateFactory();
+  const isInvoicesTableStateChanged = isInvoicesTableStateChangedFactory();
 
   const mapStateToProps = (state, props) => {
     const mapped = {
       invoicesTableState: getInvoicesTableState(state, props),
+      invoicesTableStateChanged: isInvoicesTableStateChanged(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesList.js

@@ -20,25 +20,23 @@ import { compose, transformTableStateToQuery } from 'utils';
 function PaymentReceiveList({
   // #withPaymentReceives
   paymentReceivesTableState,
+  paymentsTableStateChanged,
 
   // #withPaymentReceivesActions
-  setPaymentReceivesTableState
+  resetPaymentReceivesTableState,
 }) {
   // Resets the payment receives table state once the page unmount.
   React.useEffect(
     () => () => {
-      setPaymentReceivesTableState({
-        filterRoles: [],
-        viewSlug: '',
-        pageIndex: 0,
-      });
+      resetPaymentReceivesTableState();
     },
-    [setPaymentReceivesTableState],
+    [resetPaymentReceivesTableState],
   );
 
   return (
     <PaymentReceivesListProvider
       query={transformTableStateToQuery(paymentReceivesTableState)}
+      tableStateChanged={paymentsTableStateChanged}
     >
       <PaymentReceiveActionsBar />
 
@@ -56,8 +54,11 @@ function PaymentReceiveList({
 }
 
 export default compose(
-  withPaymentReceives(({ paymentReceivesTableState }) => ({
-    paymentReceivesTableState,
-  })),
+  withPaymentReceives(
+    ({ paymentReceivesTableState, paymentsTableStateChanged }) => ({
+      paymentReceivesTableState,
+      paymentsTableStateChanged,
+    }),
+  ),
   withPaymentReceivesActions,
 )(PaymentReceiveList);

client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesListProvider.js

@@ -1,4 +1,6 @@
 import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
+
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import {
   useResourceViews,
@@ -12,7 +14,7 @@ const PaymentReceivesListContext = createContext();
 /**
  * Payment receives data provider.
  */
-function PaymentReceivesListProvider({ query, ...props }) {
+function PaymentReceivesListProvider({ query, tableStateChanged, ...props }) {
   // Fetch accounts resource views and fields.
   const {
     data: paymentReceivesViews,
@@ -33,6 +35,10 @@ function PaymentReceivesListProvider({ query, ...props }) {
     isFetching: isPaymentReceivesFetching,
   } = usePaymentReceives(query, { keepPreviousData: true });
 
+  // Detarmines the datatable empty status.
+  const isEmptyStatus =
+    !isPaymentReceivesLoading && !tableStateChanged && isEmpty(paymentReceives);
+
   // Provider payload.
   const provider = {
     paymentReceives,
@@ -42,6 +48,7 @@ function PaymentReceivesListProvider({ query, ...props }) {
 
     fields: getFieldsFromResourceMeta(resourceMeta.fields),
 
+    isEmptyStatus,
     isViewsLoading,
     isResourceFetching,
     isResourceLoading,

client/src/containers/Sales/PaymentReceives/PaymentsLanding/withPaymentReceives.js

@@ -1,14 +1,17 @@
 import { connect } from 'react-redux';
 import {
-  getPaymentReceiveTableStateFactory
+  getPaymentReceiveTableStateFactory,
+  paymentsTableStateChangedFactory
 } from 'store/PaymentReceives/paymentReceives.selector';
 
 export default (mapState) => {
   const getPaymentReceiveTableState = getPaymentReceiveTableStateFactory();
+  const paymentsTableStateChanged = paymentsTableStateChangedFactory();
 
   const mapStateToProps = (state, props) => {
     const mapped = {
       paymentReceivesTableState: getPaymentReceiveTableState(state, props),
+      paymentsTableStateChanged: paymentsTableStateChanged(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

client/src/containers/Sales/PaymentReceives/PaymentsLanding/withPaymentReceivesActions.js

@@ -1,9 +1,15 @@
 import { connect } from 'react-redux';
-import { setPaymentReceivesTableState } from 'store/PaymentReceives/paymentReceives.actions';
+import {
+  setPaymentReceivesTableState,
+  resetPaymentReceivesTableState,
+} from 'store/PaymentReceives/paymentReceives.actions';
 
 const mapDispatchToProps = (dispatch) => ({
   setPaymentReceivesTableState: (state) =>
     dispatch(setPaymentReceivesTableState(state)),
+
+  resetPaymentReceivesTableState: () =>
+    dispatch(resetPaymentReceivesTableState()),
 });
 
 export default connect(null, mapDispatchToProps);

client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsList.js

@@ -20,24 +20,24 @@ import { transformTableStateToQuery, compose } from 'utils';
 function ReceiptsList({
   // #withReceipts
   receiptTableState,
+  receiptsTableStateChanged,
 
   // #withReceiptsActions
-  setReceiptsTableState,
+  resetReceiptsTableState,
 }) {
   // Resets the receipts table state once the page unmount.
   React.useEffect(
     () => () => {
-      setReceiptsTableState({
-        filterRoles: [],
-        viewSlug: '',
-        pageIndex: 0,
-      });
+      resetReceiptsTableState();
     },
-    [setReceiptsTableState],
+    [resetReceiptsTableState],
   );
 
   return (
-    <ReceiptsListProvider query={transformTableStateToQuery(receiptTableState)}>
+    <ReceiptsListProvider
+      query={transformTableStateToQuery(receiptTableState)}
+      tableStateChanged={receiptsTableStateChanged}
+    >
       <DashboardPageContent>
         <ReceiptActionsBar />
 
@@ -56,8 +56,9 @@ function ReceiptsList({
 }
 
 export default compose(
-  withReceipts(({ receiptTableState }) => ({
+  withReceipts(({ receiptTableState, receiptsTableStateChanged }) => ({
     receiptTableState,
+    receiptsTableStateChanged,
   })),
   withReceiptsActions,
 )(ReceiptsList);

client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsListProvider.js

@@ -1,13 +1,15 @@
 import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
+
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 
 import { useResourceMeta, useResourceViews, useReceipts } from 'hooks/query';
-import { isTableEmptyStatus, getFieldsFromResourceMeta } from 'utils';
+import { getFieldsFromResourceMeta } from 'utils';
 
 const ReceiptsListContext = createContext();
 
 // Receipts list provider.
-function ReceiptsListProvider({ query, ...props }) {
+function ReceiptsListProvider({ query, tableStateChanged, ...props }) {
   // Fetch receipts resource views and fields.
   const { data: receiptsViews, isLoading: isViewsLoading } =
     useResourceViews('sale_receipt');
@@ -27,11 +29,7 @@ function ReceiptsListProvider({ query, ...props }) {
 
   // Detarmines the datatable empty status.
   const isEmptyStatus =
-    isTableEmptyStatus({
-      data: receipts,
-      pagination,
-      filterMeta,
-    }) && !isReceiptsLoading;
+    isEmpty(receipts) && !tableStateChanged && !isReceiptsLoading;
 
   const provider = {
     receipts,

client/src/containers/Sales/Receipts/ReceiptsLanding/withReceipts.js

@@ -1,14 +1,17 @@
   import { connect } from 'react-redux';
 import {
   getReceiptsTableStateFactory,
+  receiptsTableStateChangedFactory,
 } from 'store/receipts/receipts.selector';
 
 export default (mapState) => {
   const getReceiptsTableState = getReceiptsTableStateFactory();
+  const receiptsTableStateChanged = receiptsTableStateChangedFactory();
 
   const mapStateToProps = (state, props) => {
     const mapped = {
       receiptTableState: getReceiptsTableState(state, props),
+      receiptsTableStateChanged: receiptsTableStateChanged(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

client/src/containers/Sales/Receipts/ReceiptsLanding/withReceiptsActions.js

@@ -1,8 +1,12 @@
 import { connect } from 'react-redux';
-import { setReceiptsTableState } from 'store/receipts/receipts.actions';
+import {
+  setReceiptsTableState,
+  resetReceiptsTableState,
+} from 'store/receipts/receipts.actions';
 
 const mapDispatchToProps = (dispatch) => ({
   setReceiptsTableState: (queries) => dispatch(setReceiptsTableState(queries)),
+  resetReceiptsTableState: () => dispatch(resetReceiptsTableState()),
 });
 
 export default connect(null, mapDispatchToProps);

client/src/containers/UniversalSearch/DashboardUniversalSearch.js

@@ -66,19 +66,14 @@ function DashboardUniversalSearch({
     setSearchKeyword(query);
   };
   // Handle search type change.
-  const handleSearchTypeChange = (searchType) => {
+  const handleSearchTypeChange = (type) => {
     remove();
-    setSearchType(searchType.key);
-
-    if (searchKeyword && searchType) {
-      refetch();
-    }
+    setSearchType(type.key);
   };
   // Handle overlay of universal search close.
   const handleClose = () => {
     closeGlobalSearch();
   };
-
   // Handle universal search item select.
   const handleItemSelect = (item) => {
     setSelectedItemUniversalSearch(searchType, item.id);
@@ -92,10 +87,10 @@ function DashboardUniversalSearch({
   );
 
   React.useEffect(() => {
-    if (searchKeyword) {
+    if (searchKeyword && searchType) {
       debounceFetch.current();
     }
-  }, [searchKeyword]);
+  }, [searchKeyword, searchType]);
 
   // Handles the overlay once be closed.
   const handleOverlayClosed = () => {

client/src/containers/UniversalSearch/DashboardUniversalSearchItemActions.js

@@ -4,6 +4,7 @@ import * as R from 'ramda';
 import withUniversalSearch from './withUniversalSearch';
 
 import { getUniversalSearchItemsActions } from './utils';
+import withUniversalSearchActions from './withUniversalSearchActions';
 
 /**
  * Universal search selected item action based on each resource type.
@@ -11,13 +12,22 @@ import { getUniversalSearchItemsActions } from './utils';
 function DashboardUniversalSearchItemActions({
   searchSelectedResourceType,
   searchSelectedResourceId,
+
+  // #with
+  resetSelectedItemUniversalSearch,
 }) {
   const components = getUniversalSearchItemsActions();
 
+  // Handle action execuation.
+  const handleActionExec = React.useCallback(() => {
+    resetSelectedItemUniversalSearch();
+  }, [resetSelectedItemUniversalSearch]);
+
   return components.map((COMPONENT) => (
     <COMPONENT
       resourceId={searchSelectedResourceId}
       resourceType={searchSelectedResourceType}
+      onAction={handleActionExec}
     />
   ));
 }
@@ -29,4 +39,5 @@ export default R.compose(
       searchSelectedResourceId,
     }),
   ),
+  withUniversalSearchActions,
 )(DashboardUniversalSearchItemActions);

client/src/containers/Vendors/VendorsLanding/VendorActionsBar.js

@@ -53,8 +53,8 @@ function VendorActionsBar({
   const { refresh } = useRefreshVendors();
 
   // Handle the active tab change.
-  const handleTabChange = (customView) => {
-    setVendorsTableState({ customViewId: customView.id || null });
+  const handleTabChange = (viewSlug) => {
+    setVendorsTableState({ viewSlug });
   };
 
   // Handle inactive switch changing.

client/src/containers/Vendors/VendorsLanding/VendorViewsTabs.js

@@ -22,12 +22,12 @@ function VendorViewsTabs({
 }) {
   const { vendorsViews } = useVendorsListContext();
 
+  // Transformes the resource views to tabs.
   const tabs = transfromViewsToTabs(vendorsViews);
 
+  // Handle dashboard tabs change.
   const handleTabsChange = (viewSlug) => {
-    setVendorsTableState({
-      viewSlug: viewSlug || null,
-    });
+    setVendorsTableState({ viewSlug });
   };
 
   return (

client/src/containers/Vendors/VendorsLanding/VendorsList.js

@@ -21,9 +21,10 @@ import { compose } from 'utils';
 function VendorsList({
   // #withVendors
   vendorsTableState,
+  vendorsTableStateChanged,
 
   // #withVendorsActions
-  setVendorsTableState
+  setVendorsTableState,
 }) {
   // Resets the vendors table state once the page unmount.
   useEffect(
@@ -36,9 +37,12 @@ function VendorsList({
     },
     [setVendorsTableState],
   );
-  
+
   return (
-    <VendorsListProvider tableState={vendorsTableState}>
+    <VendorsListProvider
+      tableState={vendorsTableState}
+      tableStateChanged={vendorsTableStateChanged}
+    >
       <VendorActionsBar />
 
       <DashboardPageContent>
@@ -55,6 +59,9 @@ function VendorsList({
 }
 
 export default compose(
-  withVendors(({ vendorsTableState }) => ({ vendorsTableState })),
-  withVendorsActions
+  withVendors(({ vendorsTableState, vendorsTableStateChanged }) => ({
+    vendorsTableState,
+    vendorsTableStateChanged,
+  })),
+  withVendorsActions,
 )(VendorsList);

client/src/containers/Vendors/VendorsLanding/VendorsListProvider.js

@@ -1,4 +1,5 @@
 import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
 
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import { useResourceMeta, useResourceViews, useVendors } from 'hooks/query';
@@ -7,7 +8,7 @@ import { transformVendorsStateToQuery } from './utils';
 
 const VendorsListContext = createContext();
 
-function VendorsListProvider({ tableState, ...props }) {
+function VendorsListProvider({ tableState, tableStateChanged, ...props }) {
   // Transformes the vendors table state to fetch query.
   const tableQuery = transformVendorsStateToQuery(tableState);
 
@@ -31,13 +32,7 @@ function VendorsListProvider({ tableState, ...props }) {
 
   // Detarmines the datatable empty status.
   const isEmptyStatus =
-    isTableEmptyStatus({
-      data: vendors,
-      pagination,
-      filterMeta,
-    }) &&
-    !isVendorsLoading &&
-    !tableState.inactiveMode;
+    isEmpty(vendors) && !isVendorsLoading && !tableStateChanged;
 
   const provider = {
     vendors,

client/src/containers/Vendors/VendorsLanding/withVendors.js

@@ -1,14 +1,17 @@
 import { connect } from 'react-redux';
 import {
   getVendorsTableStateFactory,
+  vendorsTableStateChangedFactory,
 } from 'store/vendors/vendors.selectors';
 
 export default (mapState) => {
   const getVendorsTableState = getVendorsTableStateFactory();
+  const vendorsTableStateChanged = vendorsTableStateChangedFactory();
 
   const mapStateToProps = (state, props) => {
     const mapped = {
       vendorsTableState: getVendorsTableState(state, props),
+      vendorsTableStateChanged: vendorsTableStateChanged(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };