feat: WIP advanced filter.

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

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

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} />

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

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

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} />

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} />

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

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

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} />

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

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

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