feat: WIP advanced filter.

2026-02-17 21:30:31 +00:00 · 2021-08-10 19:38:36 +02:00
parent aefb89e1c0
commit 23e8e251a1
97 changed files with 2008 additions and 1937 deletions
--- a/client/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js
+++ b/client/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js
@@ -5,24 +5,26 @@ import {
  NavbarGroup,
  Classes,
  NavbarDivider,
-  Popover,
-  PopoverInteractionKind,
-  Position,
  Intent,
  Alignment,
 } from '@blueprintjs/core';
-import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
-import { FormattedMessage as T } from 'components';
+import {
+  AdvancedFilterPopover,
+  DashboardFilterButton,
+  FormattedMessage as T,
+} from 'components';

 import { useRefreshJournals } from 'hooks/query/manualJournals';
 import { useManualJournalsContext } from './ManualJournalsListProvider';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+
 import withDialogActions from 'containers/Dialog/withDialogActions';
+import withManualJournalsActions from './withManualJournalsActions';
+import withManualJournals from './withManualJournals';

 import { If, DashboardActionViewsList } from 'components';

-import withManualJournalsActions from './withManualJournalsActions';
 import { compose } from 'utils';

 /**
@@ -31,12 +33,15 @@ import { compose } from 'utils';
 function ManualJournalActionsBar({
  // #withManualJournalsActions
  setManualJournalsTableState,
+
+  // #withManualJournals
+  manualJournalsFilterConditions,
 }) {
  // History context.
  const history = useHistory();

  // Manual journals context.
-  const { journalsViews } = useManualJournalsContext();
+  const { journalsViews, fields } = useManualJournalsContext();

  // Manual journals refresh action.
  const { refresh } = useRefreshJournals();
@@ -45,7 +50,6 @@ function ManualJournalActionsBar({
  const onClickNewManualJournal = () => {
    history.push('/make-journal-entry');
  };
-
  // Handle delete button click.
  const handleBulkDelete = () => {};

@@ -53,11 +57,10 @@ function ManualJournalActionsBar({
  const handleTabChange = (customView) => {
    setManualJournalsTableState({ customViewId: customView.id || null });
  };
-
  // Handle click a refresh Journals
-  const handleRefreshBtnClick = () => {
-    refresh();
-  };
+  const handleRefreshBtnClick = () => { refresh(); };
+
+  console.log(manualJournalsFilterConditions, fields, 'XXX');

  return (
    <DashboardActionsBar>
@@ -75,20 +78,20 @@ function ManualJournalActionsBar({
          text={<T id={'journal_entry'} />}
          onClick={onClickNewManualJournal}
        />
-        <Popover
-          minimal={true}
-          // content={filterDropdown}
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: manualJournalsFilterConditions,
+            defaultFieldKey: 'journal_number',
+            fields,
+            onFilterChange: (filterConditions) => {
+              setManualJournalsTableState({ filterRoles: filterConditions });
+            },
+          }}
        >
-          <Button
-            className={classNames(Classes.MINIMAL, 'button--filter', {
-              'has-active-filters': false,
-            })}
-            text={<T id={'filter'} />}
-            icon={<Icon icon="filter-16" iconSize={16} />}
+          <DashboardFilterButton
+            conditionsCount={manualJournalsFilterConditions.length}
          />
-        </Popover>
+        </AdvancedFilterPopover>

        <If condition={false}>
          <Button
@@ -130,4 +133,7 @@ function ManualJournalActionsBar({
 export default compose(
  withDialogActions,
  withManualJournalsActions,
+  withManualJournals(({ manualJournalsTableState }) => ({
+    manualJournalsFilterConditions: manualJournalsTableState.filterRoles,
+  }))
 )(ManualJournalActionsBar);
--- a/client/src/containers/Accounting/JournalsLanding/ManualJournalsListProvider.js
+++ b/client/src/containers/Accounting/JournalsLanding/ManualJournalsListProvider.js
@@ -1,27 +1,36 @@
 import React, { createContext } from 'react';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
-import { useResourceViews, useJournals } from 'hooks/query';
-import { isTableEmptyStatus } from 'utils';
+import { useResourceViews, useResourceMeta, useJournals } from 'hooks/query';
+import { isTableEmptyStatus, getFieldsFromResourceMeta } from 'utils';

 const ManualJournalsContext = createContext();

 function ManualJournalsListProvider({ query, ...props }) {
  // Fetches accounts resource views and fields.
-  const { data: journalsViews, isLoading: isViewsLoading } = useResourceViews(
-    'manual_journals',
-  );
+  const { data: journalsViews, isLoading: isViewsLoading } =
+    useResourceViews('manual_journals');

  // Fetches the manual journals transactions with pagination meta.
  const {
    data: { manualJournals, pagination, filterMeta },
    isLoading: isManualJournalsLoading,
-    isFetching: isManualJournalsFetching
+    isFetching: isManualJournalsFetching,
  } = useJournals(query, { keepPreviousData: true });

+  // Fetch the accounts resource fields.
+  const {
+    data: resourceMeta,
+    isLoading: isResourceMetaLoading,
+    isFetching: isResourceMetaFetching,
+  } = useResourceMeta('manual_journals');
+
  // Detarmines the datatable empty status.
-  const isEmptyStatus = isTableEmptyStatus({
-    data: manualJournals, pagination, filterMeta,
-  }) && !isManualJournalsFetching;
+  const isEmptyStatus =
+    isTableEmptyStatus({
+      data: manualJournals,
+      pagination,
+      filterMeta,
+    }) && !isManualJournalsFetching;

  // Global state.
  const state = {
@@ -29,15 +38,21 @@ function ManualJournalsListProvider({ query, ...props }) {
    pagination,
    journalsViews,

+    resourceMeta,
+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
+
    isManualJournalsLoading,
    isManualJournalsFetching,
    isViewsLoading,

-    isEmptyStatus
+    isEmptyStatus,
  };

+  const isPageLoading =
+    isManualJournalsLoading || isViewsLoading || isResourceMetaLoading;
+
  return (
-    <DashboardInsider loading={isViewsLoading} name={'manual-journals'}>
+    <DashboardInsider loading={isPageLoading} name={'manual-journals'}>
      <ManualJournalsContext.Provider value={state} {...props} />
    </DashboardInsider>
  );
--- a/client/src/containers/Accounts/AccountsActionsBar.js
+++ b/client/src/containers/Accounts/AccountsActionsBar.js
@@ -6,20 +6,20 @@ import {
  NavbarGroup,
  Classes,
  NavbarDivider,
-  Popover,
-  PopoverInteractionKind,
-  Position,
  Intent,
  Switch,
  Alignment,
 } from '@blueprintjs/core';
-import classNames from 'classnames';
+
 import { FormattedMessage as T } from 'components';
-import intl from 'react-intl-universal';
-import { If, DashboardActionViewsList } from 'components';
+import {
+  AdvancedFilterPopover,
+  If,
+  DashboardActionViewsList,
+  DashboardFilterButton,
+} from 'components';

 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
-import AdvancedFilterDropdown from 'components/AdvancedFilter/AdvancedFilterDropdown.tsx';

 import { useRefreshAccounts } from 'hooks/query/accounts';
 import { useAccountsChartContext } from 'containers/Accounts/AccountsChartProvider';
@@ -30,46 +30,6 @@ import withAccountsTableActions from './withAccountsTableActions';

 import { compose } from 'utils';

-const FIELDS = [
-  {
-    name: 'Name',
-    key: 'name',
-    fieldType: 'text',
-  },
-  {
-    name: 'Account code',
-    key: 'code',
-    fieldType: 'text',
-  },
-  {
-    name: 'Balance',
-    key: 'balance',
-    fieldType: 'number'
-  },
-  {
-    name: 'Active',
-    key: 'active',
-    fieldType: 'boolean'
-  },
-  {
-    name: 'Created at',
-    key: 'created_at',
-    fieldType: 'date'
-  },
-  {
-    name: 'Root type',
-    key: 'root_type',
-    fieldType: 'enumeration',
-    options: [
-      { key: 'asset', label: 'Asset' },
-      { key: 'liability', label: 'Liability' },
-      { key: 'equity', label: 'Equity' },
-      { key: 'Income', label: 'Income' },
-      { key: 'expense', label: 'Expense' },
-    ],
-  }
-];
-
 /**
 * Accounts actions bar.
 */
@@ -80,6 +40,7 @@ function AccountsActionsBar({
  // #withAccounts
  accountsSelectedRows,
  accountsInactiveMode,
+  accountsFilterConditions,

  // #withAlertActions
  openAlert,
@@ -90,7 +51,7 @@ function AccountsActionsBar({
  // #ownProps
  onFilterChanged,
 }) {
-  const { resourceViews } = useAccountsChartContext();
+  const { resourceViews, fields } = useAccountsChartContext();

  const onClickNewAccount = () => {
    openDialog('account-form', {});
@@ -148,34 +109,22 @@ function AccountsActionsBar({
          text={<T id={'new_account'} />}
          onClick={onClickNewAccount}
        />
-        <Popover
-          minimal={true}
-          content={
-            <AdvancedFilterDropdown
-              defaultFieldKey={'name'}
-              fields={FIELDS}
-              onFilterChange={(filterConditions) => {
-                console.log(filterConditions, 'XXX');
-              }} />
-          }
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
-          canOutsideClickClose={true}
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: accountsFilterConditions,
+            defaultFieldKey: 'name',
+            fields: fields,
+            onFilterChange: (filterConditions) => {
+              setAccountsTableState({ filterRoles: filterConditions });
+            },
+          }}
        >
-          <Button
-            className={classNames(Classes.MINIMAL, 'button--filter', {
-              'has-active-filters': false,
-            })}
-            text={
-              true ? (
-                <T id={'filter'} />
-              ) : (
-                intl.get('count_filters_applied', { count: 0 })
-              )
-            }
-            icon={<Icon icon="filter-16" iconSize={16} />}
+          <DashboardFilterButton
+            conditionsCount={accountsFilterConditions.length}
          />
-        </Popover>
+        </AdvancedFilterPopover>
+
+        <NavbarDivider />

        <If condition={!isEmpty(accountsSelectedRows)}>
          <Button
@@ -237,6 +186,7 @@ export default compose(
  withAccounts(({ accountsSelectedRows, accountsTableState }) => ({
    accountsSelectedRows,
    accountsInactiveMode: accountsTableState.inactiveMode,
+    accountsFilterConditions: accountsTableState.filterRoles,
  })),
  withAccountsTableActions,
 )(AccountsActionsBar);
--- a/client/src/containers/Accounts/AccountsChart.js
+++ b/client/src/containers/Accounts/AccountsChart.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';

 import 'style/pages/Accounts/List.scss';
 import { DashboardPageContent, DashboardContentTable } from 'components';
@@ -14,6 +14,7 @@ import withAccounts from 'containers/Accounts/withAccounts';

 import { compose } from 'utils';
 import { transformAccountsStateToQuery } from './utils';
+import withAccountsTableActions from './withAccountsTableActions';

 /**
 * Accounts chart list.
@@ -21,7 +22,22 @@ import { transformAccountsStateToQuery } from './utils';
 function AccountsChart({
  // #withAccounts
  accountsTableState,
+
+  // #withAccountsActions
+  setAccountsTableState,
 }) {
+  // Resets the accounts table state once the page unmount.
+  useEffect(
+    () => () => {
+      setAccountsTableState({
+        filterRoles: [],
+        viewSlug: '',
+        pageIndex: 0,
+      });
+    },
+    [setAccountsTableState],
+  );
+
  return (
    <AccountsChartProvider
      query={transformAccountsStateToQuery(accountsTableState)}
@@ -43,4 +59,5 @@ function AccountsChart({

 export default compose(
  withAccounts(({ accountsTableState }) => ({ accountsTableState })),
+  withAccountsTableActions,
 )(AccountsChart);
--- a/client/src/containers/Accounts/AccountsChartProvider.js
+++ b/client/src/containers/Accounts/AccountsChartProvider.js
@@ -1,6 +1,7 @@
 import React, { createContext } from 'react';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
-import { useResourceViews, useResourceFields, useAccounts } from 'hooks/query';
+import { useResourceViews, useResourceMeta, useAccounts } from 'hooks/query';
+import { getFieldsFromResourceMeta } from 'utils';

 const AccountsChartContext = createContext();

@@ -9,41 +10,42 @@ const AccountsChartContext = createContext();
 */
 function AccountsChartProvider({ query, ...props }) {
  // Fetch accounts resource views and fields.
-  const { data: resourceViews, isLoading: isViewsLoading } = useResourceViews(
-    'accounts',
-  );
+  const { data: resourceViews, isLoading: isViewsLoading } =
+    useResourceViews('accounts');

  // Fetch the accounts resource fields.
  const {
-    data: resourceFields,
-    isLoading: isFieldsLoading,
-  } = useResourceFields('accounts');
+    data: resourceMeta,
+    isLoading: isResourceMetaLoading,
+    isFetching: isResourceMetaFetching,
+  } = useResourceMeta('accounts');

  // Fetch accounts list according to the given custom view id.
  const {
    data: accounts,
    isFetching: isAccountsFetching,
-    isLoading: isAccountsLoading
-  } = useAccounts(
-    query,
-    { keepPreviousData: true }
-  );
+    isLoading: isAccountsLoading,
+  } = useAccounts(query, { keepPreviousData: true });

  // Provider payload.
  const provider = {
    accounts,
-    resourceFields,
+
+    resourceMeta,
    resourceViews,

+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
+
    isAccountsLoading,
    isAccountsFetching,
-    isFieldsLoading,
+    isResourceMetaFetching,
+    isResourceMetaLoading,
    isViewsLoading,
  };

  return (
    <DashboardInsider
-      loading={isViewsLoading || isFieldsLoading}
+      loading={isViewsLoading || isResourceMetaLoading}
      name={'accounts-chart'}
    >
      <AccountsChartContext.Provider value={provider} {...props} />
--- a/client/src/containers/Customers/CustomersLanding/CustomersActionsBar.js
+++ b/client/src/containers/Customers/CustomersLanding/CustomersActionsBar.js
@@ -1,23 +1,24 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import {
  NavbarGroup,
  NavbarDivider,
  Button,
  Classes,
  Intent,
-  Popover,
-  Position,
-  PopoverInteractionKind,
  Switch,
  Alignment,
 } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'components';
-import intl from 'react-intl-universal';
-import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';

 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
-import { If, Icon, DashboardActionViewsList } from 'components';
+import {
+  If,
+  Icon,
+  DashboardActionViewsList,
+  AdvancedFilterPopover,
+  DashboardFilterButton,
+} from 'components';

 import { useCustomersListContext } from './CustomersListProvider';
 import { useRefreshCustomers } from 'hooks/query/customers';
@@ -34,6 +35,7 @@ import { compose } from 'utils';
 function CustomerActionsBar({
  // #withCustomers
  customersSelectedRows = [],
+  customersFilterConditions,

  // #withCustomersActions
  setCustomersTableState,
@@ -46,7 +48,7 @@ function CustomerActionsBar({
  const history = useHistory();

  // Customers list context.
-  const { customersViews } = useCustomersListContext();
+  const { customersViews, fields } = useCustomersListContext();

  // Customers refresh action.
  const { refresh } = useRefreshCustomers();
@@ -72,9 +74,7 @@ function CustomerActionsBar({
  };

  // Handle click a refresh customers
-  const handleRefreshBtnClick = () => {
-    refresh();
-  };
+  const handleRefreshBtnClick = () => { refresh(); };

  return (
    <DashboardActionsBar>
@@ -93,17 +93,21 @@ function CustomerActionsBar({
          onClick={onClickNewCustomer}
        />
        <NavbarDivider />
-        <Popover
-          // content={filterDropdown}
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
+
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: customersFilterConditions,
+            defaultFieldKey: 'display_name',
+            fields: fields,
+            onFilterChange: (filterConditions) => {
+              setCustomersTableState({ filterRoles: filterConditions });
+            },
+          }}
        >
-          <Button
-            className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={`${intl.get('filter')}`}
-            icon={<Icon icon="filter-16" iconSize={16} />}
+          <DashboardFilterButton
+            conditionsCount={customersFilterConditions.length}
          />
-        </Popover>
+        </AdvancedFilterPopover>

        <If condition={customersSelectedRows.length}>
          <Button
@@ -146,6 +150,7 @@ export default compose(
  withCustomers(({ customersSelectedRows, customersTableState }) => ({
    customersSelectedRows,
    accountsInactiveMode: customersTableState.inactiveMode,
+    customersFilterConditions: customersTableState.filterRoles,
  })),
  withAlertActions,
 )(CustomerActionsBar);
--- a/client/src/containers/Customers/CustomersLanding/CustomersList.js
+++ b/client/src/containers/Customers/CustomersLanding/CustomersList.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';

 import 'style/pages/Customers/List.scss';

@@ -11,6 +11,8 @@ import CustomersAlerts from 'containers/Customers/CustomersAlerts';
 import { CustomersListProvider } from './CustomersListProvider';

 import withCustomers from './withCustomers';
+import withCustomersActions from './withCustomersActions';
+
 import { compose } from 'utils';

 /**
@@ -19,7 +21,22 @@ import { compose } from 'utils';
 function CustomersList({
  // #withCustomers
  customersTableState,
+
+  // #withCustomersActions
+  setCustomersTableState
 }) {
+  // Resets the accounts table state once the page unmount.
+  useEffect(
+    () => () => {
+      setCustomersTableState({
+        filterRoles: [],
+        viewSlug: '',
+        pageIndex: 0,
+      });
+    },
+    [setCustomersTableState],
+  );
+
  return (
    <CustomersListProvider tableState={customersTableState}>
      <CustomersActionsBar />
@@ -38,4 +55,5 @@ function CustomersList({

 export default compose(
  withCustomers(({ customersTableState }) => ({ customersTableState })),
+  withCustomersActions
 )(CustomersList);
--- a/client/src/containers/Customers/CustomersLanding/CustomersListProvider.js
+++ b/client/src/containers/Customers/CustomersLanding/CustomersListProvider.js
@@ -1,8 +1,8 @@
 import React, { createContext } from 'react';

 import DashboardInsider from 'components/Dashboard/DashboardInsider';
-import { useResourceViews, useCustomers } from 'hooks/query';
-import { isTableEmptyStatus } from 'utils';
+import { useResourceMeta, useResourceViews, useCustomers } from 'hooks/query';
+import { isTableEmptyStatus, getFieldsFromResourceMeta } from 'utils';
 import { transformCustomersStateToQuery } from './utils';

 const CustomersListContext = createContext();
@@ -12,10 +12,15 @@ function CustomersListProvider({ tableState, ...props }) {
  const tableQuery = transformCustomersStateToQuery(tableState);

  // Fetch customers resource views and fields.
+  const { data: customersViews, isLoading: isViewsLoading } =
+    useResourceViews('customers');
+
+  // Fetch the customers resource fields.
  const {
-    data: customersViews,
-    isLoading: isCustomersViewsLoading,
-  } = useResourceViews('customers');
+    data: resourceMeta,
+    isLoading: isResourceMetaLoading,
+    isFetching: isResourceMetaFetching,
+  } = useResourceMeta('customers');

  // Fetches customers data with pagination meta.
  const {
@@ -25,16 +30,26 @@ function CustomersListProvider({ tableState, ...props }) {
  } = useCustomers(tableQuery, { keepPreviousData: true });

  // Detarmines the datatable empty status.
-  const isEmptyStatus = isTableEmptyStatus({
-    data: customers, pagination, filterMeta,
-  }) && !isCustomersFetching && !tableState.inactiveMode;
+  const isEmptyStatus =
+    isTableEmptyStatus({
+      data: customers,
+      pagination,
+      filterMeta,
+    }) &&
+    !isCustomersFetching &&
+    !tableState.inactiveMode;

  const state = {
    customersViews,
    customers,
    pagination,

-    isCustomersViewsLoading,
+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
+    resourceMeta,
+    isResourceMetaLoading,
+    isResourceMetaFetching,
+
+    isViewsLoading,
    isCustomersLoading,
    isCustomersFetching,

@@ -42,7 +57,10 @@ function CustomersListProvider({ tableState, ...props }) {
  };

  return (
-    <DashboardInsider loading={isCustomersViewsLoading} name={'customers-list'}>
+    <DashboardInsider
+      loading={isViewsLoading || isResourceMetaLoading || isCustomersLoading}
+      name={'customers-list'}
+    >
      <CustomersListContext.Provider value={state} {...props} />
    </DashboardInsider>
  );
--- a/client/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.js
+++ b/client/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.js
@@ -1,28 +1,31 @@
-import React, { useCallback, useState } from 'react';
+import React from 'react';
 import Icon from 'components/Icon';
 import {
  Button,
  NavbarGroup,
  Classes,
  NavbarDivider,
-  Popover,
-  PopoverInteractionKind,
-  Position,
  Intent,
  Alignment,
 } from '@blueprintjs/core';
-import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
 import { FormattedMessage as T } from 'components';

 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import withDialogActions from 'containers/Dialog/withDialogActions';

-import { If, DashboardActionViewsList } from 'components';
+import {
+  If,
+  DashboardActionViewsList,
+  DashboardFilterButton,
+  AdvancedFilterPopover,
+} from 'components';

 import { useRefreshExpenses } from 'hooks/query/expenses';
 import { useExpensesListContext } from './ExpensesListProvider';
+
 import withExpensesActions from './withExpensesActions';
+import withExpenses from './withExpenses';

 import { compose } from 'utils';

@@ -32,14 +35,15 @@ import { compose } from 'utils';
 function ExpensesActionsBar({
  //#withExpensesActions
  setExpensesTableState,
-}) {
-  const [filterCount, setFilterCount] = useState(0);

+  // #withExpenses
+  expensesFilterConditions
+}) {
  // History context.
  const history = useHistory();

  // Expenses list context.
-  const { expensesViews } = useExpensesListContext();
+  const { expensesViews, fields } = useExpensesListContext();

  // Expenses refresh action.
  const { refresh } = useRefreshExpenses();
@@ -79,20 +83,20 @@ function ExpensesActionsBar({
          text={<T id={'new_expense'} />}
          onClick={onClickNewExpense}
        />
-        <Popover
-          minimal={true}
-          content={''}
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: expensesFilterConditions,
+            defaultFieldKey: 'reference_no',
+            fields: fields,
+            onFilterChange: (filterConditions) => {
+              setExpensesTableState({ filterRoles: filterConditions });
+            },
+          }}
        >
-          <Button
-            className={classNames(Classes.MINIMAL, 'button--filter', {
-              'has-active-filters': filterCount > 0,
-            })}
-            text={<T id={'filter'} />}
-            icon={<Icon icon="filter-16" iconSize={16} />}
+          <DashboardFilterButton
+            conditionsCount={expensesFilterConditions.length}
          />
-        </Popover>
+        </AdvancedFilterPopover>

        <If condition={false}>
          <Button
@@ -134,4 +138,7 @@ function ExpensesActionsBar({
 export default compose(
  withDialogActions,
  withExpensesActions,
+  withExpenses(({ expensesTableState }) => ({
+    expensesFilterConditions: expensesTableState.filterRoles,
+  }))
 )(ExpensesActionsBar);
--- a/client/src/containers/Expenses/ExpensesLanding/ExpensesList.js
+++ b/client/src/containers/Expenses/ExpensesLanding/ExpensesList.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';

 import 'style/pages/Expense/List.scss';

@@ -10,6 +10,7 @@ import ExpenseDataTable from './ExpenseDataTable';
 import ExpensesAlerts from '../ExpensesAlerts';

 import withExpenses from './withExpenses';
+import withExpensesActions from './withExpensesActions';

 import { compose, transformTableStateToQuery } from 'utils';
 import { ExpensesListProvider } from './ExpensesListProvider';
@@ -20,7 +21,22 @@ import { ExpensesListProvider } from './ExpensesListProvider';
 function ExpensesList({
  // #withExpenses
  expensesTableState,
+
+  // #withExpensesActions
+  setExpensesTableState,
 }) {
+  // Resets the accounts table state once the page unmount.
+  useEffect(
+    () => () => {
+      setExpensesTableState({
+        filterRoles: [],
+        viewSlug: '',
+        pageIndex: 0,
+      });
+    },
+    [setExpensesTableState],
+  );
+
  return (
    <ExpensesListProvider
      query={transformTableStateToQuery(expensesTableState)}
@@ -42,4 +58,5 @@ function ExpensesList({

 export default compose(
  withExpenses(({ expensesTableState }) => ({ expensesTableState })),
+  withExpensesActions,
 )(ExpensesList);
--- a/client/src/containers/Expenses/ExpensesLanding/ExpensesListProvider.js
+++ b/client/src/containers/Expenses/ExpensesLanding/ExpensesListProvider.js
@@ -1,7 +1,7 @@
 import React, { createContext } from 'react';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
-import { useExpenses, useResourceViews } from 'hooks/query';
-import { isTableEmptyStatus } from 'utils';
+import { useExpenses, useResourceMeta, useResourceViews } from 'hooks/query';
+import { isTableEmptyStatus, getFieldsFromResourceMeta } from 'utils';

 const ExpensesListContext = createContext();

@@ -10,9 +10,8 @@ const ExpensesListContext = createContext();
 */
 function ExpensesListProvider({ query, ...props }) {
  // Fetch accounts resource views and fields.
-  const { data: expensesViews, isLoading: isViewsLoading } = useResourceViews(
-    'expenses',
-  );
+  const { data: expensesViews, isLoading: isViewsLoading } =
+    useResourceViews('expenses');

  // Fetches the expenses with pagination meta.
  const {
@@ -21,10 +20,20 @@ function ExpensesListProvider({ query, ...props }) {
    isFetching: isExpensesFetching,
  } = useExpenses(query, { keepPreviousData: true });

+  // Fetch the expenses resource fields.
+  const {
+    data: resourceMeta,
+    isLoading: isResourceMetaLoading,
+    isFetching: isResourceMetaFetching,
+  } = useResourceMeta('expenses');
+
  // Detarmines the datatable empty status.
-  const isEmptyStatus = isTableEmptyStatus({
-    data: expenses, pagination, filterMeta,
-  }) && !isExpensesFetching;
+  const isEmptyStatus =
+    isTableEmptyStatus({
+      data: expenses,
+      pagination,
+      filterMeta,
+    }) && !isExpensesFetching;

  // Provider payload.
  const provider = {
@@ -32,16 +41,21 @@ function ExpensesListProvider({ query, ...props }) {
    expenses,
    pagination,

+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
+    resourceMeta,
+    isResourceMetaLoading,
+    isResourceMetaFetching,
+
    isViewsLoading,
    isExpensesLoading,
    isExpensesFetching,

-    isEmptyStatus
+    isEmptyStatus,
  };

  return (
    <DashboardInsider
-      loading={isViewsLoading || isExpensesLoading}
+      loading={isViewsLoading || isExpensesLoading || isResourceMetaLoading}
      name={'expenses'}
    >
      <ExpensesListContext.Provider value={provider} {...props} />
@@ -49,7 +63,6 @@ function ExpensesListProvider({ query, ...props }) {
  );
 }

-const useExpensesListContext = () =>
-  React.useContext(ExpensesListContext);
+const useExpensesListContext = () => React.useContext(ExpensesListContext);

 export { ExpensesListProvider, useExpensesListContext };
--- a/client/src/containers/Expenses/ExpensesLanding/withExpenses.js
+++ b/client/src/containers/Expenses/ExpensesLanding/withExpenses.js
@@ -10,6 +10,5 @@ export default (mapState) => {
    };
    return mapState ? mapState(mapped, state, props) : mapped;
  };
-
  return connect(mapStateToProps);
 };
--- a/client/src/containers/Items/ItemsActionsBar.js
+++ b/client/src/containers/Items/ItemsActionsBar.js
@@ -1,24 +1,23 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
-import classNames from 'classnames';
 import {
-  Popover,
  NavbarGroup,
  NavbarDivider,
-  PopoverInteractionKind,
-  Position,
  Button,
  Classes,
  Intent,
  Switch,
  Alignment,
 } from '@blueprintjs/core';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import { FormattedMessage as T } from 'components';
-import intl from 'react-intl-universal';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import Icon from 'components/Icon';
-import { If, DashboardActionViewsList } from 'components';
+import {
+  If,
+  DashboardActionViewsList,
+  AdvancedFilterPopover,
+  DashboardFilterButton,
+} from 'components';

 import { useItemsListContext } from './ItemsListProvider';
 import { useRefreshItems } from 'hooks/query/items';
@@ -35,6 +34,7 @@ import { compose } from 'utils';
 function ItemsActionsBar({
  // #withItems
  itemsSelectedRows,
+  itemsFilterRoles,

  // #withItemActions
  setItemsTableState,
@@ -44,7 +44,7 @@ function ItemsActionsBar({
  openAlert,
 }) {
  // Items list context.
-  const { itemsViews } = useItemsListContext();
+  const { itemsViews, fields } = useItemsListContext();

  // Items refresh action.
  const { refresh } = useRefreshItems();
@@ -93,19 +93,21 @@ function ItemsActionsBar({
          text={<T id={'new_item'} />}
          onClick={onClickNewItem}
        />
-        <NavbarDivider />

-        <Popover
-          content={''}
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: itemsFilterRoles,
+            defaultFieldKey: 'name',
+            fields: fields,
+            onFilterChange: (filterConditions) => {
+              setItemsTableState({ filterRoles: filterConditions });
+            },
+          }}
        >
-          <Button
-            className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={`${intl.get('filter')}`}
-            icon={<Icon icon="filter-16" iconSize={16} />}
-          />
-        </Popover>
+          <DashboardFilterButton conditionsCount={itemsFilterRoles.length} />
+        </AdvancedFilterPopover>
+
+        <NavbarDivider />

        <If condition={itemsSelectedRows.length}>
          <Button
@@ -149,6 +151,7 @@ export default compose(
  withItems(({ itemsSelectedRows, itemsTableState }) => ({
    itemsSelectedRows,
    itemsInactiveMode: itemsTableState.inactiveMode,
+    itemsFilterRoles: itemsTableState.filterRoles,
  })),
  withItemsActions,
  withAlertActions,
--- a/client/src/containers/Items/ItemsListProvider.js
+++ b/client/src/containers/Items/ItemsListProvider.js
@@ -1,62 +1,74 @@
 import React, { createContext } from 'react';

-import { transformTableQueryToParams, isTableEmptyStatus } from 'utils';
+import {
+  getFieldsFromResourceMeta,
+  transformTableQueryToParams,
+  isTableEmptyStatus,
+} from 'utils';
 import { transformItemsTableState } from './utils';

 import DashboardInsider from 'components/Dashboard/DashboardInsider';
-import { useResourceViews, useResourceFields, useItems } from 'hooks/query';
+import { useResourceViews, useResourceMeta, useItems } from 'hooks/query';

 const ItemsContext = createContext();

 /**
 * Items list provider.
 */
-function ItemsListProvider({
-  tableState,
-  ...props
-}) {
+function ItemsListProvider({ tableState, ...props }) {
  const tableQuery = transformItemsTableState(tableState);

  // Fetch accounts resource views and fields.
-  const { data: itemsViews, isLoading: isViewsLoading } = useResourceViews(
-    'items',
-  );
+  const { data: itemsViews, isLoading: isViewsLoading } =
+    useResourceViews('items');

  // Fetch the accounts resource fields.
-  const { data: itemsFields, isLoading: isFieldsLoading } = useResourceFields(
-    'items',
-  );
+  const {
+    data: resourceMeta,
+    isLoading: isResourceLoading,
+    isFetching: isResourceFetching,
+  } = useResourceMeta('items');

  // Handle fetching the items table based on the given query.
  const {
    data: { items, pagination, filterMeta },
    isFetching: isItemsFetching,
    isLoading: isItemsLoading,
-  } = useItems({
-    ...transformTableQueryToParams(tableQuery)
-  }, { keepPreviousData: true });
+  } = useItems(
+    {
+      ...transformTableQueryToParams(tableQuery),
+    },
+    { keepPreviousData: true },
+  );

  // Detarmines the datatable empty status.
-  const isEmptyStatus = isTableEmptyStatus({
-    data: items, pagination, filterMeta,
-  }) && !isItemsFetching && !tableState.inactiveMode;
+  const isEmptyStatus =
+    isTableEmptyStatus({
+      data: items,
+      pagination,
+      filterMeta,
+    }) &&
+    !isItemsFetching &&
+    !tableState.inactiveMode;

  const state = {
    itemsViews,
-    itemsFields,
    items,
    pagination,
+
+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
+
    isViewsLoading,
    isItemsLoading,
    isItemsFetching: isItemsFetching,
+    isResourceLoading,
+    isResourceFetching,
+
    isEmptyStatus,
  };

  return (
-    <DashboardInsider
-      loading={isFieldsLoading}
-      name={'items-list'}
-    >
+    <DashboardInsider loading={isItemsLoading || isResourceLoading} name={'items-list'}>
      <ItemsContext.Provider value={state} {...props} />
    </DashboardInsider>
  );
--- a/client/src/containers/ItemsCategories/ItemCategoriesList.js
+++ b/client/src/containers/ItemsCategories/ItemCategoriesList.js
@@ -1,4 +1,6 @@
 import React from 'react';
+import * as R from 'ramda';
+
 import 'style/pages/ItemsCategories/List.scss';

 import { DashboardContentTable, DashboardPageContent } from 'components';
@@ -8,12 +10,17 @@ import ItemsCategoryActionsBar from './ItemsCategoryActionsBar';
 import { ItemsCategoriesProvider } from './ItemsCategoriesProvider';
 import ItemCategoriesTable from './ItemCategoriesTable';

+import withItemsCategories from './withItemCategories';
+
 /**
 * Item categories list.
 */
-export default function ItemCategoryList() {
+function ItemCategoryList({
+  // #withItemsCategories
+  itemsCategoriesTableState
+}) {
  return (
-    <ItemsCategoriesProvider>
+    <ItemsCategoriesProvider tableState={itemsCategoriesTableState}>
      <ItemsCategoryActionsBar />

      <DashboardPageContent>
@@ -25,3 +32,9 @@ export default function ItemCategoryList() {
    </ItemsCategoriesProvider>
  );
 }
+
+export default R.compose(
+  withItemsCategories(({ itemsCategoriesTableState }) => ({
+    itemsCategoriesTableState,
+  })),
+)(ItemCategoryList);
--- a/client/src/containers/ItemsCategories/ItemsCategoriesProvider.js
+++ b/client/src/containers/ItemsCategories/ItemsCategoriesProvider.js
@@ -1,31 +1,50 @@
 import React, { createContext } from 'react';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
-import { useItemsCategories } from 'hooks/query';
+import { useItemsCategories, useResourceMeta } from 'hooks/query';
+import { transformTableStateToQuery, getFieldsFromResourceMeta } from 'utils';

 const ItemsCategoriesContext = createContext();

 /**
 * Items categories provider.
 */
-function ItemsCategoriesProvider({ query, ...props }) {
+function ItemsCategoriesProvider({ tableState, ...props }) {
+  // Transformes the table state to query.
+  const query = transformTableStateToQuery(tableState);
+
+  // Items categories list.
  const {
    data: { itemsCategories, pagination },
    isFetching: isCategoriesFetching,
    isLoading: isCategoriesLoading,
-  } = useItemsCategories();
+  } = useItemsCategories(query, { keepPreviousData: true });
+
+  // Fetch the accounts resource fields.
+  const {
+    data: resourceMeta,
+    isLoading: isResourceLoading,
+    isFetching: isResourceFetching,
+  } = useResourceMeta('item_category');

  const state = {
    isCategoriesFetching,
    isCategoriesLoading,

+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
+    resourceMeta,
+    isResourceLoading,
+    isResourceFetching,
+
    itemsCategories,
    pagination,
-
    query,
  };

  return (
-    <DashboardInsider name={'items-categories-list'}>
+    <DashboardInsider
+      isLoading={isResourceLoading}
+      name={'items-categories-list'}
+    >
      <ItemsCategoriesContext.Provider value={state} {...props} />
    </DashboardInsider>
  );
@@ -34,7 +53,4 @@ function ItemsCategoriesProvider({ query, ...props }) {
 const useItemsCategoriesContext = () =>
  React.useContext(ItemsCategoriesContext);

-export {
-  ItemsCategoriesProvider,
-  useItemsCategoriesContext,
-};
+export { ItemsCategoriesProvider, useItemsCategoriesContext };
--- a/client/src/containers/ItemsCategories/ItemsCategoryActionsBar.js
+++ b/client/src/containers/ItemsCategories/ItemsCategoryActionsBar.js
@@ -5,21 +5,20 @@ import {
  Button,
  Classes,
  Intent,
-  Popover,
-  Position,
-  PopoverInteractionKind,
 } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'components';
-import classNames from 'classnames';
 import { If, Icon } from 'components';

 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import { AdvancedFilterPopover, DashboardFilterButton } from 'components';

 import withDialogActions from 'containers/Dialog/withDialogActions';
-// import withItemCategories from './withItemCategories';
+import withItemCategories from './withItemCategories';
+import withItemCategoriesActions from './withItemCategoriesActions';
 import withAlertActions from 'containers/Alert/withAlertActions';

 import { compose } from 'utils';
+import { useItemsCategoriesContext } from './ItemsCategoriesProvider';

 /**
 * Items categories actions bar.
@@ -27,6 +26,10 @@ import { compose } from 'utils';
 function ItemsCategoryActionsBar({
  // #withItemCategories
  itemCategoriesSelectedRows = [],
+  categoriesFilterConditions,
+
+  // 
+  setItemsCategoriesTableState,

  // #withDialog
  openDialog,
@@ -34,6 +37,8 @@ function ItemsCategoryActionsBar({
  // #withAlertActions
  openAlert,
 }) {
+  const { fields } = useItemsCategoriesContext();
+
  const onClickNewCategory = () => {
    openDialog('item-category-form', {});
  };
@@ -44,7 +49,9 @@ function ItemsCategoryActionsBar({
      itemCategoriesIds: itemCategoriesSelectedRows,
    });
  };
-  
+
+  console.log(fields, categoriesFilterConditions, 'XXXX');
+
  return (
    <DashboardActionsBar>
      <NavbarGroup>
@@ -56,25 +63,20 @@ function ItemsCategoryActionsBar({
        />
        <NavbarDivider />

-        <Popover
-          minimal={true}
-          // content={filterDropdown}
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
-          canOutsideClickClose={true}
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: categoriesFilterConditions,
+            defaultFieldKey: 'name',
+            fields: fields,
+            onFilterChange: (filterConditions) => {
+              setItemsCategoriesTableState({ filterRoles: filterConditions });
+            },
+          }}
        >
-          <Button
-            className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={
-              true ? (
-                <T id={'filter'} />
-              ) : (
-                `${0} filters applied`
-              )
-            }
-            icon={<Icon icon="filter-16" iconSize={16} />}
+          <DashboardFilterButton
+            conditionsCount={categoriesFilterConditions.length}
          />
-        </Popover>
+        </AdvancedFilterPopover>

        <If condition={itemCategoriesSelectedRows.length}>
          <Button
@@ -103,8 +105,12 @@ function ItemsCategoryActionsBar({

 export default compose(
  withDialogActions,
-  // withItemCategories(({ itemCategoriesSelectedRows }) => ({
-  //   itemCategoriesSelectedRows,
-  // })),
+  withItemCategories(
+    ({ itemCategoriesSelectedRows, itemsCategoriesTableState }) => ({
+      itemCategoriesSelectedRows,
+      categoriesFilterConditions: itemsCategoriesTableState.filterRoles,
+    }),
+  ),
  withAlertActions,
+  withItemCategoriesActions
 )(ItemsCategoryActionsBar);
--- a/client/src/containers/ItemsCategories/withItemCategories.js
+++ b/client/src/containers/ItemsCategories/withItemCategories.js
@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 import {
  getItemsCategoriesTableStateFactory,
-} from 'store/itemCategories/itemsCategories.selectors';
+} from 'store/itemCategories/ItemsCategories.selectors';

 export default (mapState) => {
  const getItemsCategoriesTableState = getItemsCategoriesTableStateFactory();
--- a/client/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.js
+++ b/client/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.js
@@ -3,24 +3,25 @@ import Icon from 'components/Icon';
 import {
  Button,
  Classes,
-  Popover,
  NavbarDivider,
  NavbarGroup,
-  PopoverInteractionKind,
-  Position,
  Intent,
  Alignment,
 } from '@blueprintjs/core';

-import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
 import { FormattedMessage as T } from 'components';
-import intl from 'react-intl-universal';

 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
-import { If, DashboardActionViewsList } from 'components';
+import {
+  If,
+  DashboardActionViewsList,
+  DashboardFilterButton,
+  AdvancedFilterPopover,
+} from 'components';

 import withBillsActions from './withBillsActions';
+import withBills from './withBills';
 import { useBillsListContext } from './BillsListProvider';
 import { useRefreshBills } from 'hooks/query/bills';
 import { compose } from 'utils';
@@ -31,6 +32,9 @@ import { compose } from 'utils';
 function BillActionsBar({
  // #withBillActions
  setBillsTableState,
+
+  // #withBills
+  billsConditionsRoles
 }) {
  const history = useHistory();

@@ -38,9 +42,7 @@ function BillActionsBar({
  const { refresh } = useRefreshBills();

  // Bills list context.
-  const { billsViews } = useBillsListContext();
-
-  const [filterCount] = useState(0);
+  const { billsViews, fields } = useBillsListContext();

  // Handle click a new bill.
  const handleClickNewBill = () => {
@@ -53,11 +55,8 @@ function BillActionsBar({
      customViewId: customView.id || null,
    });
  };
-
  // Handle click a refresh bills
-  const handleRefreshBtnClick = () => {
-    refresh();
-  };
+  const handleRefreshBtnClick = () => { refresh(); };

  return (
    <DashboardActionsBar>
@@ -74,24 +73,21 @@ function BillActionsBar({
          text={<T id={'new_bill'} />}
          onClick={handleClickNewBill}
        />
-        <Popover
-          minimal={true}
-          content={[]}
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: billsConditionsRoles,
+            defaultFieldKey: 'bill_number',
+            fields: fields,
+            onFilterChange: (filterConditions) => {
+              setBillsTableState({ filterRoles: filterConditions });
+            },
+          }}
        >
-          <Button
-            className={classNames(Classes.MINIMAL)}
-            text={
-              true ? (
-                <T id={'filter'} />
-              ) : (
-                `${filterCount} ${intl.get('filters_applied')}`
-              )
-            }
-            icon={<Icon icon={'filter-16'} iconSize={16} />}
+          <DashboardFilterButton
+            conditionsCount={billsConditionsRoles.length}
          />
-        </Popover>
+        </AdvancedFilterPopover>
+
        <If condition={false}>
          <Button
            className={Classes.MINIMAL}
@@ -128,4 +124,9 @@ function BillActionsBar({
  );
 }

-export default compose(withBillsActions)(BillActionsBar);
+export default compose(
+  withBillsActions,
+  withBills(({ billsTableState }) => ({
+    billsConditionsRoles: billsTableState.filterRoles
+  }))
+)(BillActionsBar);
--- a/client/src/containers/Purchases/Bills/BillsLanding/BillsList.js
+++ b/client/src/containers/Purchases/Bills/BillsLanding/BillsList.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { DashboardContentTable, DashboardPageContent } from 'components';

 import 'style/pages/Bills/List.scss';
@@ -11,6 +11,7 @@ import BillsViewsTabs from './BillsViewsTabs';
 import BillsTable from './BillsTable';

 import withBills from './withBills';
+import withBillsActions from './withBillsActions';

 import { transformTableStateToQuery, compose } from 'utils';

@@ -20,7 +21,22 @@ import { transformTableStateToQuery, compose } from 'utils';
 function BillsList({
  // #withBills
  billsTableState,
+
+  // #withBillsActions
+  setBillsTableState
 }) {
+  // Resets the accounts table state once the page unmount.
+  useEffect(
+    () => () => {
+      setBillsTableState({
+        filterRoles: [],
+        viewSlug: '',
+        pageIndex: 0,
+      });
+    },
+    [setBillsTableState],
+  );
+
  return (
    <BillsListProvider query={transformTableStateToQuery(billsTableState)}>
      <BillsActionsBar />
@@ -40,4 +56,5 @@ function BillsList({

 export default compose(
  withBills(({ billsTableState }) => ({ billsTableState })),
+  withBillsActions
 )(BillsList);
--- a/client/src/containers/Purchases/Bills/BillsLanding/BillsListProvider.js
+++ b/client/src/containers/Purchases/Bills/BillsLanding/BillsListProvider.js
@@ -1,7 +1,7 @@
 import React, { createContext } from 'react';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
-import { useResourceViews, useResourceFields, useBills } from 'hooks/query';
-import { isTableEmptyStatus }  from 'utils';
+import { useResourceViews, useResourceMeta, useBills } from 'hooks/query';
+import { getFieldsFromResourceMeta, isTableEmptyStatus } from 'utils';

 const BillsListContext = createContext();

@@ -10,15 +10,15 @@ const BillsListContext = createContext();
 */
 function BillsListProvider({ query, ...props }) {
  // Fetch accounts resource views and fields.
-  const { data: billsViews, isLoading: isViewsLoading } = useResourceViews(
-    'bills',
-  );
+  const { data: billsViews, isLoading: isViewsLoading } =
+    useResourceViews('bills');

  // Fetch the accounts resource fields.
  const {
-    data: billsFields,
-    isLoading: isFieldsLoading,
-  } = useResourceFields('bills');
+    data: resourceMeta,
+    isLoading: isResourceLoading,
+    isFetching: isResourceFetching,
+  } = useResourceMeta('bills');

  // Fetch accounts list according to the given custom view id.
  const {
@@ -28,27 +28,33 @@ function BillsListProvider({ query, ...props }) {
  } = useBills(query, { keepPreviousData: true });

  // Detarmines the datatable empty status.
-  const isEmptyStatus = isTableEmptyStatus({
-    data: bills, pagination, filterMeta,
-  }) && !isBillsFetching;
+  const isEmptyStatus =
+    isTableEmptyStatus({
+      data: bills,
+      pagination,
+      filterMeta,
+    }) && !isBillsFetching;

  // Provider payload.
  const provider = {
    bills,
    pagination,
-    billsFields,
    billsViews,

+    resourceMeta,
+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
+    isResourceLoading,
+    isResourceFetching,
+
    isBillsLoading,
    isBillsFetching,
-    isFieldsLoading,
    isViewsLoading,
-    isEmptyStatus
+    isEmptyStatus,
  };

  return (
    <DashboardInsider
-      loading={isViewsLoading || isFieldsLoading}
+      loading={isViewsLoading || isResourceLoading}
      name={'bills'}
    >
      <BillsListContext.Provider value={provider} {...props} />
--- a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js
@@ -3,26 +3,29 @@ import Icon from 'components/Icon';
 import {
  Button,
  Classes,
-  Popover,
  NavbarDivider,
  NavbarGroup,
-  PopoverInteractionKind,
-  Position,
  Intent,
  Alignment,
 } from '@blueprintjs/core';

-import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
 import { FormattedMessage as T } from 'components';
-import intl from 'react-intl-universal';

 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
-import { If, DashboardActionViewsList } from 'components';
+import {
+  If,
+  DashboardActionViewsList,
+  DashboardFilterButton,
+  AdvancedFilterPopover,
+} from 'components';

+import withPaymentMade from './withPaymentMade';
 import withPaymentMadeActions from './withPaymentMadeActions';
+
 import { usePaymentMadesListContext } from './PaymentMadesListProvider';
 import { useRefreshPaymentMades } from 'hooks/query/paymentMades';
+
 import { compose } from 'utils';

 /**
@@ -31,11 +34,14 @@ import { compose } from 'utils';
 function PaymentMadeActionsBar({
  // #withPaymentMadesActions
  setPaymentMadesTableState,
+
+  // #withPaymentMades
+  paymentMadesFilterConditions
 }) {
  const history = useHistory();

  // Payment receives list context.
-  const { paymentMadesViews } = usePaymentMadesListContext();
+  const { paymentMadesViews, fields } = usePaymentMadesListContext();

  // Handle new payment made button click.
  const handleClickNewPaymentMade = () => {
@@ -69,20 +75,21 @@ function PaymentMadeActionsBar({
          text={<T id={'new_payment_made'} />}
          onClick={handleClickNewPaymentMade}
        />
-        <Popover
-          minimal={true}
-          // content={filterDropdown}
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: paymentMadesFilterConditions,
+            defaultFieldKey: 'payment_number',
+            fields: fields,
+            onFilterChange: (filterConditions) => {
+              setPaymentMadesTableState({ filterRoles: filterConditions });
+            },
+          }}
        >
-          <Button
-            className={classNames(Classes.MINIMAL)}
-            text={
-              true ? <T id={'filter'} /> : `${0} ${intl.get('filters_applied')}`
-            }
-            icon={<Icon icon={'filter-16'} iconSize={16} />}
+          <DashboardFilterButton
+            conditionsCount={paymentMadesFilterConditions.length}
          />
-        </Popover>
+        </AdvancedFilterPopover>
+
        <If condition={false}>
          <Button
            className={Classes.MINIMAL}
@@ -119,4 +126,9 @@ function PaymentMadeActionsBar({
  );
 }

-export default compose(withPaymentMadeActions)(PaymentMadeActionsBar);
+export default compose(
+  withPaymentMadeActions,
+  withPaymentMade(({ paymentMadesTableState }) => ({
+    paymentMadesFilterConditions: paymentMadesTableState.filterRoles,
+  })),
+)(PaymentMadeActionsBar);
--- a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeList.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeList.js
@@ -10,6 +10,7 @@ import { PaymentMadesListProvider } from './PaymentMadesListProvider';
 import PaymentMadeViewTabs from './PaymentMadeViewTabs';

 import withPaymentMades from './withPaymentMade';
+import withPaymentMadeActions from './withPaymentMadeActions';

 import { compose, transformTableStateToQuery } from 'utils';

@@ -19,7 +20,22 @@ import { compose, transformTableStateToQuery } from 'utils';
 function PaymentMadeList({
  // #withPaymentMades
  paymentMadesTableState,
+
+  // #withPaymentMadeActions
+  setPaymentMadesTableState
 }) {
+  // Resets the invoices table state once the page unmount.
+  React.useEffect(
+    () => () => {
+      setPaymentMadesTableState({
+        filterRoles: [],
+        viewSlug: '',
+        pageIndex: 0,
+      });
+    },
+    [setPaymentMadesTableState],
+  );
+
  return (
    <PaymentMadesListProvider
      query={transformTableStateToQuery(paymentMadesTableState)}
@@ -43,4 +59,5 @@ export default compose(
  withPaymentMades(({ paymentMadesTableState }) => ({
    paymentMadesTableState,
  })),
+  withPaymentMadeActions
 )(PaymentMadeList);
--- a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesListProvider.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesListProvider.js
@@ -2,10 +2,10 @@ import React, { createContext } from 'react';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import {
  useResourceViews,
-  useResourceFields,
  usePaymentMades,
+  useResourceMeta
 } from 'hooks/query';
-import { isTableEmptyStatus } from 'utils';
+import { isTableEmptyStatus, getFieldsFromResourceMeta } from 'utils';

 const PaymentMadesListContext = createContext();

@@ -21,9 +21,10 @@ function PaymentMadesListProvider({ query, ...props }) {

  // Fetch the accounts resource fields.
  const {
-    data: paymentMadesFields,
-    isLoading: isFieldsLoading,
-  } = useResourceFields('bill_payments');
+    data: resourceMeta,
+    isLoading: isResourceMetaLoading,
+    isFetching: isResourceMetaFetching,
+  } = useResourceMeta('bill_payments');

  // Fetch accounts list according to the given custom view id.
  const {
@@ -45,19 +46,22 @@ function PaymentMadesListProvider({ query, ...props }) {
    paymentMades,
    pagination,
    filterMeta,
-    paymentMadesFields,
    paymentMadesViews,

+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
+    resourceMeta,
+    isResourceMetaLoading,
+    isResourceMetaFetching,
+
    isPaymentsLoading,
    isPaymentsFetching,
-    isFieldsLoading,
    isViewsLoading,
    isEmptyStatus
  };

  return (
    <DashboardInsider
-      loading={isViewsLoading || isFieldsLoading}
+      loading={isViewsLoading || isResourceMetaLoading}
      name={'payment-mades-list'}
    >
      <PaymentMadesListContext.Provider value={provider} {...props} />
--- a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMdesListProvider.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMdesListProvider.js
@@ -9,20 +9,20 @@ const PaymentMadesContext = createContext();
 */
 function PaymentMadesProvider({ query, ...props }) {
  // Fetch accounts resource views and fields.
-  const { data: paymentsViews, isFetching: isViewsLoading } = useResourceViews(
+  const { data: paymentsViews, isLoading: isViewsLoading } = useResourceViews(
    'bill_payments',
  );

  // Fetch the accounts resource fields.
  const {
    data: paymentsFields,
-    isFetching: isFieldsLoading,
+    isLoading: isFieldsLoading,
  } = useResourceFields('bill_payments');

  // Fetch accounts list according to the given custom view id.
  const {
    data: { paymentMades, pagination },
-    isFetching: isPaymentsLoading,
+    isLoading: isPaymentsLoading,
  } = usePaymentMades(query);

  // Provider payload.
@@ -39,7 +39,7 @@ function PaymentMadesProvider({ query, ...props }) {

  return (
    <DashboardInsider
-      loading={isViewsLoading || isFieldsLoading}
+      loading={isViewsLoading || isFieldsLoading || isPaymentsLoading}
      name={'payment_made'}
    >
      <PaymentMadesContext.Provider value={provider} {...props} />
--- a/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js
@@ -1,25 +1,27 @@
-import React, { useState } from 'react';
+import React from 'react';
 import Icon from 'components/Icon';
 import {
  Button,
  Classes,
-  Popover,
  NavbarDivider,
  NavbarGroup,
-  PopoverInteractionKind,
-  Position,
  Intent,
  Alignment,
 } from '@blueprintjs/core';
-import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
 import { FormattedMessage as T } from 'components';
-import intl from 'react-intl-universal';

-import { If, DashboardActionViewsList } from 'components';
+import {
+  AdvancedFilterPopover,
+  If,
+  DashboardActionViewsList,
+  DashboardFilterButton,
+} from 'components';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';

 import withEstimatesActions from './withEstimatesActions';
+import withEstimates from './withEstimates';
+
 import { useEstimatesListContext } from './EstimatesListProvider';
 import { useRefreshEstimates } from 'hooks/query/estimates';

@@ -31,13 +33,14 @@ import { compose } from 'utils';
 function EstimateActionsBar({
  // #withEstimateActions
  setEstimatesTableState,
+
+  // #withEstimates
+  estimatesFilterRoles
 }) {
  const history = useHistory();

-  const [filterCount, setFilterCount] = useState(0);
-
  // Estimates list context.
-  const { estimatesViews } = useEstimatesListContext();
+  const { estimatesViews, fields } = useEstimatesListContext();

  // Handle click a new sale estimate.
  const onClickNewEstimate = () => {
@@ -55,9 +58,7 @@ function EstimateActionsBar({
  };

  // Handle click a refresh sale estimates
-  const handleRefreshBtnClick = () => {
-    refresh();
-  };
+  const handleRefreshBtnClick = () => { refresh(); };

  return (
    <DashboardActionsBar>
@@ -74,23 +75,21 @@ function EstimateActionsBar({
          text={<T id={'new_estimate'} />}
          onClick={onClickNewEstimate}
        />
-        <Popover
-          minimal={true}
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: estimatesFilterRoles,
+            defaultFieldKey: 'estimate_number',
+            fields: fields,
+            onFilterChange: (filterConditions) => {
+              setEstimatesTableState({ filterRoles: filterConditions });
+            },
+          }}
        >
-          <Button
-            className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={
-              filterCount <= 0 ? (
-                <T id={'filter'} />
-              ) : (
-                `${filterCount} ${intl.get('filters_applied')}`
-              )
-            }
-            icon={<Icon icon={'filter-16'} iconSize={16} />}
+          <DashboardFilterButton
+            conditionsCount={estimatesFilterRoles.length}
          />
-        </Popover>
+        </AdvancedFilterPopover>
+
        <If condition={false}>
          <Button
            className={Classes.MINIMAL}
@@ -128,4 +127,9 @@ function EstimateActionsBar({
  );
 }

-export default compose(withEstimatesActions)(EstimateActionsBar);
+export default compose(
+  withEstimatesActions,
+  withEstimates(({ estimatesTableState }) => ({
+    estimatesFilterRoles: estimatesTableState.filterRoles,
+  })),
+)(EstimateActionsBar);
--- a/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesList.js
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesList.js
@@ -9,6 +9,7 @@ import EstimatesViewTabs from './EstimatesViewTabs';
 import EstimatesDataTable from './EstimatesDataTable';

 import withEstimates from './withEstimates';
+import withEstimatesActions from './withEstimatesActions';

 import { EstimatesListProvider } from './EstimatesListProvider';
 import { compose, transformTableStateToQuery } from 'utils';
@@ -19,7 +20,22 @@ import { compose, transformTableStateToQuery } from 'utils';
 function EstimatesList({
  // #withEstimate
  estimatesTableState,
+
+  // #withEstimatesActions
+  setEstimatesTableState
 }) {
+  // Resets the estimates table state once the page unmount.
+  React.useEffect(
+    () => () => {
+      setEstimatesTableState({
+        filterRoles: [],
+        viewSlug: '',
+        pageIndex: 0,
+      });
+    },
+    [setEstimatesTableState],
+  );
+
  return (
    <EstimatesListProvider
      query={transformTableStateToQuery(estimatesTableState)}
@@ -41,4 +57,5 @@ function EstimatesList({

 export default compose(
  withEstimates(({ estimatesTableState }) => ({ estimatesTableState })),
+  withEstimatesActions
 )(EstimatesList);
--- a/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesListProvider.js
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesListProvider.js
@@ -1,7 +1,9 @@
 import React, { createContext } from 'react';
+
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
-import { useResourceViews, useResourceFields, useEstimates } from 'hooks/query';
-import { isTableEmptyStatus } from 'utils';
+
+import { useResourceViews, useResourceMeta, useEstimates } from 'hooks/query';
+import { isTableEmptyStatus, getFieldsFromResourceMeta } from 'utils';

 const EstimatesListContext = createContext();

@@ -10,17 +12,17 @@ const EstimatesListContext = createContext();
 */
 function EstimatesListProvider({ query, ...props }) {
  // Fetches estimates resource views and fields.
-  const { data: estimatesViews, isLoading: isViewsLoading } = useResourceViews(
-    'sale_estimates',
-  );
+  const { data: estimatesViews, isLoading: isViewsLoading } =
+    useResourceViews('sale_estimates');

  // Fetches the estimates resource fields.
  const {
-    data: estimatesFields,
-    isLoading: isFieldsLoading,
-  } = useResourceFields('sale_estimates');
+    data: resourceMeta,
+    isLoading: isResourceLoading,
+    isFetching: isResourceFetching,
+  } = useResourceMeta('sale_estimates');

-  // Fetch estimates list according to the given custom view id.
+  // Fetches estimates list according to the given custom view id.
  const {
    data: { estimates, pagination, filterMeta },
    isLoading: isEstimatesLoading,
@@ -39,12 +41,15 @@ function EstimatesListProvider({ query, ...props }) {
  const provider = {
    estimates,
    pagination,
-    estimatesFields,
+
+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
    estimatesViews,

+    isResourceLoading,
+    isResourceFetching,
+
    isEstimatesLoading,
    isEstimatesFetching,
-    isFieldsLoading,
    isViewsLoading,

    isEmptyStatus,
@@ -52,7 +57,7 @@ function EstimatesListProvider({ query, ...props }) {

  return (
    <DashboardInsider
-      loading={isViewsLoading || isFieldsLoading}
+      loading={isViewsLoading || isResourceLoading}
      name={'sale_estimate'}
    >
      <EstimatesListContext.Provider value={provider} {...props} />
--- a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.js
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.js
@@ -1,21 +1,19 @@
-import React, { useState } from 'react';
+import React from 'react';
 import Icon from 'components/Icon';
 import {
  Button,
  Classes,
-  Popover,
  NavbarDivider,
  NavbarGroup,
-  PopoverInteractionKind,
-  Position,
  Intent,
  Alignment,
 } from '@blueprintjs/core';
-
-import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
-import { FormattedMessage as T } from 'components';
-import intl from 'react-intl-universal';
+import {
+  FormattedMessage as T,
+  AdvancedFilterPopover,
+  DashboardFilterButton,
+} from 'components';

 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';

@@ -23,7 +21,9 @@ import { If, DashboardActionViewsList } from 'components';

 import { useRefreshInvoices } from 'hooks/query/invoices';
 import { useInvoicesListContext } from './InvoicesListProvider';
+
 import withInvoiceActions from './withInvoiceActions';
+import withInvoices from './withInvoices';

 import { compose } from 'utils';

@@ -33,13 +33,14 @@ import { compose } from 'utils';
 function InvoiceActionsBar({
  // #withInvoiceActions
  setInvoicesTableState,
+
+  // #withInvoices
+  invoicesFilterRoles,
 }) {
  const history = useHistory();

-  const [filterCount, setFilterCount] = useState(0);
-
  // Sale invoices list context.
-  const { invoicesViews } = useInvoicesListContext();
+  const { invoicesViews, invoicesFields } = useInvoicesListContext();

  // Handle new invoice button click.
  const handleClickNewInvoice = () => {
@@ -74,31 +75,27 @@ function InvoiceActionsBar({
          text={<T id={'new_invoice'} />}
          onClick={handleClickNewInvoice}
        />
-        <Popover
-          minimal={true}
-          // content={filterDropdown}
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: invoicesFilterRoles,
+            defaultFieldKey: 'invoice_no',
+            fields: invoicesFields,
+            onFilterChange: (filterConditions) => {
+              setInvoicesTableState({ filterRoles: filterConditions });
+            },
+          }}
        >
-          <Button
-            className={classNames(Classes.MINIMAL)}
-            text={
-              filterCount <= 0 ? (
-                <T id={'filter'} />
-              ) : (
-                `${filterCount} ${intl.get('filters_applied')}`
-              )
-            }
-            icon={<Icon icon={'filter-16'} iconSize={16} />}
-          />
-        </Popover>
+          <DashboardFilterButton conditionsCount={invoicesFilterRoles.length} />
+        </AdvancedFilterPopover>
+
+        <NavbarDivider />
+
        <If condition={false}>
          <Button
            className={Classes.MINIMAL}
            icon={<Icon icon={'trash-16'} iconSize={16} />}
            text={<T id={'delete'} />}
            intent={Intent.DANGER}
-            // onClick={handleBulkDelete}
          />
        </If>
        <Button
@@ -128,4 +125,9 @@ function InvoiceActionsBar({
  );
 }

-export default compose(withInvoiceActions)(InvoiceActionsBar);
+export default compose(
+  withInvoiceActions,
+  withInvoices(({ invoicesTableState }) => ({
+    invoicesFilterRoles: invoicesTableState.filterRoles,
+  })),
+)(InvoiceActionsBar);
--- a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesList.js
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesList.js
@@ -11,6 +11,7 @@ import InvoicesDataTable from './InvoicesDataTable';
 import InvoicesAlerts from '../InvoicesAlerts';

 import withInvoices from './withInvoices';
+import withInvoiceActions from './withInvoiceActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';

 import { transformTableStateToQuery, compose } from 'utils';
@@ -21,7 +22,22 @@ import { transformTableStateToQuery, compose } from 'utils';
 function InvoicesList({
  // #withInvoice
  invoicesTableState,
+
+  // #withInvoicesActions
+  setInvoicesTableState
 }) {
+  // Resets the invoices table state once the page unmount.
+  React.useEffect(
+    () => () => {
+      setInvoicesTableState({
+        filterRoles: [],
+        viewSlug: '',
+        pageIndex: 0,
+      });
+    },
+    [setInvoicesTableState],
+  );
+
  return (
    <InvoicesListProvider
      query={transformTableStateToQuery(invoicesTableState)}
@@ -43,5 +59,6 @@ function InvoicesList({

 export default compose(
  withInvoices(({ invoicesTableState }) => ({ invoicesTableState })),
+  withInvoiceActions,
  withAlertsActions,
 )(InvoicesList);
--- a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesListProvider.js
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesListProvider.js
@@ -1,7 +1,7 @@
 import React, { createContext } from 'react';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
-import { useResourceViews, useResourceFields, useInvoices } from 'hooks/query';
-import { isTableEmptyStatus } from 'utils';
+import { useResourceViews, useResourceMeta, useInvoices } from 'hooks/query';
+import { isTableEmptyStatus, getFieldsFromResourceMeta } from 'utils';

 const InvoicesListContext = createContext();

@@ -10,15 +10,15 @@ const InvoicesListContext = createContext();
 */
 function InvoicesListProvider({ query, ...props }) {
  // Fetch accounts resource views and fields.
-  const { data: invoicesViews, isLoading: isViewsLoading } = useResourceViews(
-    'sale_invoices',
-  );
+  const { data: invoicesViews, isLoading: isViewsLoading } =
+    useResourceViews('sale_invoices');

  // Fetch the accounts resource fields.
  const {
-    data: invoicesFields,
-    isLoading: isFieldsLoading,
-  } = useResourceFields('sale_invoices');
+    data: resourceMeta,
+    isLoading: isResourceLoading,
+    isFetching: isResourceFetching,
+  } = useResourceMeta('sale_invoices');

  // Fetch accounts list according to the given custom view id.
  const {
@@ -39,20 +39,22 @@ function InvoicesListProvider({ query, ...props }) {
  const provider = {
    invoices,
    pagination,
-    invoicesFields,
+
+    invoicesFields: getFieldsFromResourceMeta(resourceMeta.fields),
    invoicesViews,

    isInvoicesLoading,
    isInvoicesFetching,
-    isFieldsLoading,
+    isResourceFetching,
+    isResourceLoading,
    isViewsLoading,

-    isEmptyStatus
+    isEmptyStatus,
  };

  return (
    <DashboardInsider
-      loading={isViewsLoading || isFieldsLoading}
+      loading={isViewsLoading || isResourceLoading}
      name={'sales-invoices-list'}
    >
      <InvoicesListContext.Provider value={provider} {...props} />
--- a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiptsListProvider.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiptsListProvider.js
@@ -2,10 +2,10 @@ import React, { createContext, useContext } from 'react';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import {
  useResourceViews,
-  useResourceFields,
+  useResourceMeta,
  usePaymentReceives,
 } from 'hooks/query';
-import { isTableEmptyStatus } from 'utils';
+import { isTableEmptyStatus, getFieldsFromResourceMeta } from 'utils';

 const PaymentReceivesListContext = createContext();

@@ -21,9 +21,10 @@ function PaymentReceivesListProvider({ query, ...props }) {

  // Fetch the payment receives resource fields.
  const {
-    data: paymentReceivesFields,
-    isFetching: isFieldsLoading,
-  } = useResourceFields('payment_receives');
+    data: resourceMeta,
+    isLoading: isResourceLoading,
+    isFetching: isResourceFetching,
+  } = useResourceMeta('payment_receives');

  // Fetch payment receives list according to the given custom view id.
  const {
@@ -44,19 +45,23 @@ function PaymentReceivesListProvider({ query, ...props }) {
  const state = {
    paymentReceives,
    pagination,
-    paymentReceivesFields,
+
+    resourceMeta,
+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
+
    paymentReceivesViews,

    isPaymentReceivesLoading,
    isPaymentReceivesFetching,
-    isFieldsLoading,
+    isResourceFetching,
+    isResourceLoading,
    isViewsLoading,
    isEmptyStatus,
  };

  return (
    <DashboardInsider
-      loading={isViewsLoading || isFieldsLoading}
+      loading={isViewsLoading || isResourceLoading}
      name={'payment-receives-list'}
    >
      <PaymentReceivesListContext.Provider value={state} {...props} />
--- a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveActionsBar.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveActionsBar.js
@@ -3,18 +3,18 @@ import Icon from 'components/Icon';
 import {
  Button,
  Classes,
-  Popover,
  NavbarDivider,
  NavbarGroup,
-  PopoverInteractionKind,
-  Position,
  Intent,
  Alignment,
 } from '@blueprintjs/core';

-import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
-import { FormattedMessage as T } from 'components';
+import {
+  DashboardFilterButton,
+  AdvancedFilterPopover,
+  FormattedMessage as T,
+} from 'components';

 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';

@@ -33,12 +33,15 @@ import { useRefreshPaymentReceive } from 'hooks/query/paymentReceives';
 function PaymentReceiveActionsBar({
  // #withPaymentReceivesActions
  setPaymentReceivesTableState,
+
+  // #withPaymentReceives
+  paymentFilterConditions
 }) {
  // History context.
  const history = useHistory();

  // Payment receives list context.
-  const { paymentReceivesViews } = usePaymentReceivesListContext();
+  const { paymentReceivesViews, fields } = usePaymentReceivesListContext();

  // Handle new payment button click.
  const handleClickNewPaymentReceive = () => {
@@ -58,6 +61,8 @@ function PaymentReceiveActionsBar({
    refresh();
  };

+  console.log(fields, 'fields');
+
  return (
    <DashboardActionsBar>
      <NavbarGroup>
@@ -73,18 +78,21 @@ function PaymentReceiveActionsBar({
          text={<T id={'new_payment_receive'} />}
          onClick={handleClickNewPaymentReceive}
        />
-        <Popover
-          minimal={true}
-          // content={filterDropdown}
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: paymentFilterConditions,
+            defaultFieldKey: 'payment_receive_no',
+            fields: fields,
+            onFilterChange: (filterConditions) => {
+              setPaymentReceivesTableState({ filterRoles: filterConditions });
+            },
+          }}
        >
-          <Button
-            className={classNames(Classes.MINIMAL)}
-            text={<T id={'filter'} />}
-            icon={<Icon icon={'filter-16'} iconSize={16} />}
+          <DashboardFilterButton
+            conditionsCount={paymentFilterConditions.length}
          />
-        </Popover>
+        </AdvancedFilterPopover>
+
        <If condition={false}>
          <Button
            className={Classes.MINIMAL}
@@ -125,5 +133,6 @@ export default compose(
  withPaymentReceivesActions,
  withPaymentReceives(({ paymentReceivesTableState }) => ({
    paymentReceivesTableState,
+    paymentFilterConditions: paymentReceivesTableState.filterRoles,
  })),
 )(PaymentReceiveActionsBar);
--- a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesList.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesList.js
@@ -10,6 +10,7 @@ import PaymentReceiveViewTabs from './PaymentReceiveViewTabs';
 import PaymentReceivesTable from './PaymentReceivesTable';

 import withPaymentReceives from './withPaymentReceives';
+import withPaymentReceivesActions from './withPaymentReceivesActions';

 import { compose, transformTableStateToQuery } from 'utils';

@@ -19,7 +20,22 @@ import { compose, transformTableStateToQuery } from 'utils';
 function PaymentReceiveList({
  // #withPaymentReceives
  paymentReceivesTableState,
+
+  // #withPaymentReceivesActions
+  setPaymentReceivesTableState
 }) {
+  // Resets the payment receives table state once the page unmount.
+  React.useEffect(
+    () => () => {
+      setPaymentReceivesTableState({
+        filterRoles: [],
+        viewSlug: '',
+        pageIndex: 0,
+      });
+    },
+    [setPaymentReceivesTableState],
+  );
+
  return (
    <PaymentReceivesListProvider
      query={transformTableStateToQuery(paymentReceivesTableState)}
@@ -43,4 +59,5 @@ export default compose(
  withPaymentReceives(({ paymentReceivesTableState }) => ({
    paymentReceivesTableState,
  })),
+  withPaymentReceivesActions,
 )(PaymentReceiveList);
--- a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesListProvider.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesListProvider.js
@@ -2,9 +2,10 @@ import React, { createContext } from 'react';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import {
  useResourceViews,
-  useResourceFields,
+  useResourceMeta,
  usePaymentReceives,
 } from 'hooks/query';
+import { getFieldsFromResourceMeta } from 'utils';

 const PaymentReceivesListContext = createContext();

@@ -20,9 +21,10 @@ function PaymentReceivesListProvider({ query, ...props }) {

  // Fetch the accounts resource fields.
  const {
-    data: paymentReceivesFields,
-    isFetching: isFieldsLoading,
-  } = useResourceFields('payment_receives');
+    data: resourceMeta,
+    isFetching: isResourceFetching,
+    isLoading: isResourceLoading,
+  } = useResourceMeta('payment_receives');

  // Fetch accounts list according to the given custom view id.
  const {
@@ -35,18 +37,21 @@ function PaymentReceivesListProvider({ query, ...props }) {
  const provider = {
    paymentReceives,
    paymentReceivesViews,
-    paymentReceivesFields,
    pagination,
+    resourceMeta,
+
+    fields: getFieldsFromResourceMeta(resourceMeta.fields),

    isViewsLoading,
-    isFieldsLoading,
+    isResourceFetching,
+    isResourceLoading,
    isPaymentReceivesLoading,
    isPaymentReceivesFetching
  };

  return (
    <DashboardInsider
-      loading={isViewsLoading || isFieldsLoading}
+      loading={isViewsLoading || isResourceLoading}
      name={'payment_receives'}
    >
      <PaymentReceivesListContext.Provider value={provider} {...props} />
--- a/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.js
+++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.js
@@ -3,24 +3,25 @@ import Icon from 'components/Icon';
 import {
  Button,
  Classes,
-  Popover,
  NavbarDivider,
  NavbarGroup,
-  PopoverInteractionKind,
-  Position,
  Intent,
  Alignment,
 } from '@blueprintjs/core';

-import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
-import { FormattedMessage as T } from 'components';
-import intl from 'react-intl-universal';
+import {
+  AdvancedFilterPopover,
+  DashboardFilterButton,
+  FormattedMessage as T,
+} from 'components';

 import { If, DashboardActionViewsList } from 'components';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';

 import withReceiptsActions from './withReceiptsActions';
+import withReceipts from './withReceipts';
+
 import { useReceiptsListContext } from './ReceiptsListProvider';
 import { useRefreshReceipts } from 'hooks/query/receipts';
 import { compose } from 'utils';
@@ -31,13 +32,14 @@ import { compose } from 'utils';
 function ReceiptActionsBar({
  // #withReceiptsActions
  setReceiptsTableState,
+
+  // #withReceipts
+  receiptsFilterConditions,
 }) {
  const history = useHistory();

-  const [filterCount, setFilterCount] = useState(0);
-
  // Sale receipts list context.
-  const { receiptsViews } = useReceiptsListContext();
+  const { receiptsViews, fields } = useReceiptsListContext();

  // Handle new receipt button click.
  const onClickNewReceipt = () => {
@@ -54,9 +56,9 @@ function ReceiptActionsBar({
  };

  // Handle click a refresh sale estimates
-  const handleRefreshBtnClick = () => {
-    refresh();
-  };
+  const handleRefreshBtnClick = () => { refresh(); };
+
+  console.log(receiptsFilterConditions, fields, 'XXX');

  return (
    <DashboardActionsBar>
@@ -74,24 +76,21 @@ function ReceiptActionsBar({
          text={<T id={'new_receipt'} />}
          onClick={onClickNewReceipt}
        />
-        <Popover
-          minimal={true}
-          // content={filterDropdown}
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: receiptsFilterConditions,
+            defaultFieldKey: 'reference_no',
+            fields: fields,
+            onFilterChange: (filterConditions) => {
+              setReceiptsTableState({ filterRoles: filterConditions });
+            },
+          }}
        >
-          <Button
-            className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={
-              filterCount <= 0 ? (
-                <T id={'filter'} />
-              ) : (
-                `${filterCount} ${intl.get('filters_applied')}`
-              )
-            }
-            icon={<Icon icon={'filter-16'} iconSize={16} />}
+          <DashboardFilterButton
+            conditionsCount={receiptsFilterConditions.length}
          />
-        </Popover>
+        </AdvancedFilterPopover>
+
        <If condition={false}>
          <Button
            className={Classes.MINIMAL}
@@ -128,4 +127,9 @@ function ReceiptActionsBar({
  );
 }

-export default compose(withReceiptsActions)(ReceiptActionsBar);
+export default compose(
+  withReceiptsActions,
+  withReceipts(({ receiptTableState }) => ({
+    receiptsFilterConditions: receiptTableState.filterRoles,
+  })),
+)(ReceiptActionsBar);
--- a/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsList.js
+++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsList.js
@@ -9,6 +9,7 @@ import ReceiptsAlerts from '../ReceiptsAlerts';
 import ReceiptsTable from './ReceiptsTable';

 import withReceipts from './withReceipts';
+import withReceiptsActions from './withReceiptsActions';

 import { ReceiptsListProvider } from './ReceiptsListProvider';
 import { transformTableStateToQuery, compose } from 'utils';
@@ -19,7 +20,22 @@ import { transformTableStateToQuery, compose } from 'utils';
 function ReceiptsList({
  // #withReceipts
  receiptTableState,
+
+  // #withReceiptsActions
+  setReceiptsTableState,
 }) {
+  // Resets the receipts table state once the page unmount.
+  React.useEffect(
+    () => () => {
+      setReceiptsTableState({
+        filterRoles: [],
+        viewSlug: '',
+        pageIndex: 0,
+      });
+    },
+    [setReceiptsTableState],
+  );
+
  return (
    <ReceiptsListProvider query={transformTableStateToQuery(receiptTableState)}>
      <DashboardPageContent>
@@ -43,4 +59,5 @@ export default compose(
  withReceipts(({ receiptTableState }) => ({
    receiptTableState,
  })),
+  withReceiptsActions,
 )(ReceiptsList);
--- a/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsListProvider.js
+++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsListProvider.js
@@ -1,29 +1,30 @@
 import React, { createContext } from 'react';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
-import { useResourceViews, useReceipts } from 'hooks/query';
-import { isTableEmptyStatus } from 'utils';
+
+import { useResourceMeta, useResourceViews, useReceipts } from 'hooks/query';
+import { isTableEmptyStatus, getFieldsFromResourceMeta } from 'utils';

 const ReceiptsListContext = createContext();

 // Receipts list provider.
 function ReceiptsListProvider({ query, ...props }) {
  // Fetch receipts resource views and fields.
-  const { data: receiptsViews, isLoading: isViewsLoading } = useResourceViews(
-    'sale_receipt',
-  );
+  const { data: receiptsViews, isLoading: isViewsLoading } =
+    useResourceViews('sale_receipt');

  // Fetches the sale receipts resource fields.
-  // const {
-  //   data: receiptsFields,
-  //   isFetching: isFieldsLoading,
-  // } = useResourceFields('sale_receipt');
+  const {
+    data: resourceMeta,
+    isFetching: isResourceFetching,
+    isLoading: isResourceLoading,
+  } = useResourceMeta('sale_receipt');

  const {
    data: { receipts, pagination, filterMeta },
    isLoading: isReceiptsLoading,
    isFetching: isReceiptsFetching,
  } = useReceipts(query, { keepPreviousData: true });
-  
+
  // Detarmines the datatable empty status.
  const isEmptyStatus =
    isTableEmptyStatus({
@@ -35,20 +36,22 @@ function ReceiptsListProvider({ query, ...props }) {
  const provider = {
    receipts,
    pagination,
-    // receiptsFields,
+
    receiptsViews,
    isViewsLoading,
-    // isFieldsLoading,
+
+    resourceMeta,
+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
+    isResourceFetching,
+    isResourceLoading,
+
    isReceiptsLoading,
    isReceiptsFetching,
-    isEmptyStatus
+    isEmptyStatus,
  };

  return (
-    <DashboardInsider
-      loading={isViewsLoading}
-      name={'sales_receipts'}
-    >
+    <DashboardInsider loading={isViewsLoading} name={'sales_receipts'}>
      <ReceiptsListContext.Provider value={provider} {...props} />
    </DashboardInsider>
  );
--- a/client/src/containers/Vendors/VendorsLanding/VendorActionsBar.js
+++ b/client/src/containers/Vendors/VendorsLanding/VendorActionsBar.js
@@ -5,19 +5,19 @@ import {
  Button,
  Classes,
  Intent,
-  Popover,
-  Position,
-  PopoverInteractionKind,
  Switch,
  Alignment,
 } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'components';
-import intl from 'react-intl-universal';
-import classNames from 'classnames';

 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import Icon from 'components/Icon';
-import { If, DashboardActionViewsList } from 'components';
+import {
+  If,
+  DashboardActionViewsList,
+  DashboardFilterButton,
+  AdvancedFilterPopover,
+} from 'components';

 import { useRefreshVendors } from 'hooks/query/vendors';
 import { useVendorsListContext } from './VendorsListProvider';
@@ -32,6 +32,9 @@ import { compose } from 'utils';
 * Vendors actions bar.
 */
 function VendorActionsBar({
+  // #withVendors
+  vendorsFilterConditions,
+
  // #withVendorActions
  setVendorsTableState,
  vendorsInactiveMode,
@@ -39,7 +42,7 @@ function VendorActionsBar({
  const history = useHistory();

  // Vendors list context.
-  const { vendorsViews } = useVendorsListContext();
+  const { vendorsViews, fields } = useVendorsListContext();

  // Handles new vendor button click.
  const onClickNewVendor = () => {
@@ -81,19 +84,21 @@ function VendorActionsBar({
          onClick={onClickNewVendor}
        />
        <NavbarDivider />
-        <Popover
-          // content={}
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: vendorsFilterConditions,
+            defaultFieldKey: 'display_name',
+            fields: fields,
+            onFilterChange: (filterConditions) => {
+              setVendorsTableState({ filterRoles: filterConditions });
+            },
+          }}
        >
-          <Button
-            className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={
-              true ? <T id={'filter'} /> : `${9} ${intl.get('filters_applied')}`
-            }
-            icon={<Icon icon="filter-16" iconSize={16} />}
+          <DashboardFilterButton
+            conditionsCount={vendorsFilterConditions.length}
          />
-        </Popover>
+        </AdvancedFilterPopover>
+
        <If condition={false}>
          <Button
            className={Classes.MINIMAL}
@@ -133,5 +138,6 @@ export default compose(
  withVendorsActions,
  withVendors(({ vendorsTableState }) => ({
    vendorsInactiveMode: vendorsTableState.inactiveMode,
+    vendorsFilterConditions: vendorsTableState.filterRoles,
  })),
 )(VendorActionsBar);
--- a/client/src/containers/Vendors/VendorsLanding/VendorsList.js
+++ b/client/src/containers/Vendors/VendorsLanding/VendorsList.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';

 import 'style/pages/Vendors/List.scss';

@@ -11,6 +11,7 @@ import VendorsAlerts from '../VendorsAlerts';
 import VendorsTable from './VendorsTable';

 import withVendors from './withVendors';
+import withVendorsActions from './withVendorsActions';

 import { compose } from 'utils';

@@ -20,7 +21,22 @@ import { compose } from 'utils';
 function VendorsList({
  // #withVendors
  vendorsTableState,
+
+  // #withVendorsActions
+  setVendorsTableState
 }) {
+  // Resets the vendors table state once the page unmount.
+  useEffect(
+    () => () => {
+      setVendorsTableState({
+        filterRoles: [],
+        viewSlug: '',
+        pageIndex: 0,
+      });
+    },
+    [setVendorsTableState],
+  );
+  
  return (
    <VendorsListProvider tableState={vendorsTableState}>
      <VendorActionsBar />
@@ -40,4 +56,5 @@ function VendorsList({

 export default compose(
  withVendors(({ vendorsTableState }) => ({ vendorsTableState })),
+  withVendorsActions
 )(VendorsList);
--- a/client/src/containers/Vendors/VendorsLanding/VendorsListProvider.js
+++ b/client/src/containers/Vendors/VendorsLanding/VendorsListProvider.js
@@ -1,8 +1,8 @@
 import React, { createContext } from 'react';

 import DashboardInsider from 'components/Dashboard/DashboardInsider';
-import { useResourceViews, useVendors } from 'hooks/query';
-import { isTableEmptyStatus } from 'utils';
+import { useResourceMeta, useResourceViews, useVendors } from 'hooks/query';
+import { isTableEmptyStatus, getFieldsFromResourceMeta } from 'utils';
 import { transformVendorsStateToQuery } from './utils';

 const VendorsListContext = createContext();
@@ -22,6 +22,13 @@ function VendorsListProvider({ tableState, ...props }) {
  const { data: vendorsViews, isLoading: isVendorsViewsLoading } =
    useResourceViews('vendors');

+  // Fetch the customers resource fields.
+  const {
+    data: resourceMeta,
+    isLoading: isResourceMetaLoading,
+    isFetching: isResourceMetaFetching,
+  } = useResourceMeta('customers');
+
  // Detarmines the datatable empty status.
  const isEmptyStatus =
    isTableEmptyStatus({
@@ -37,15 +44,23 @@ function VendorsListProvider({ tableState, ...props }) {
    pagination,
    vendorsViews,

-    isVendorsLoading,
-    isVendorsFetching,
+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
+    resourceMeta,
+    isResourceMetaLoading,
+    isResourceMetaFetching,
+
    isVendorsViewsLoading,

+    isVendorsLoading,
+    isVendorsFetching,
    isEmptyStatus,
  };

  return (
-    <DashboardInsider loading={isVendorsViewsLoading} name={'vendors-list'}>
+    <DashboardInsider
+      loading={isResourceMetaLoading || isVendorsLoading}
+      name={'vendors-list'}
+    >
      <VendorsListContext.Provider value={provider} {...props} />
    </DashboardInsider>
  );