BIG-3: add filtering non-zero items.

2026-02-17 05:10:31 +00:00 · 2021-09-24 19:41:23 +02:00
parent a3f1857e91
commit 4e99607b06
25 changed files with 273 additions and 73 deletions
--- a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderGeneralPanal.js
+++ b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderGeneralPanal.js
@@ -2,7 +2,7 @@ import React from 'react';
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
 import SelectDisplayColumnsBy from '../SelectDisplayColumnsBy';
 import RadiosAccountingBasis from '../RadiosAccountingBasis';
-import FinancialAccountsFilter from '../FinancialAccountsFilter';
+import FinancialStatementsFilter from '../FinancialStatementsFilter';

 /**
 * Balance sheet header - General panal.
@@ -12,7 +12,7 @@ export default function BalanceSheetHeaderGeneralTab({}) {
    <div>
      <FinancialStatementDateRange />
      <SelectDisplayColumnsBy />
-      <FinancialAccountsFilter
+      <FinancialStatementsFilter
        initialSelectedItem={'all-accounts'}
      />
      <RadiosAccountingBasis key={'basis'} />
--- a/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementGeneralPanel.js
+++ b/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementGeneralPanel.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
-import FinancialAccountsFilter from '../FinancialAccountsFilter';
+import FinancialStatementsFilter from '../FinancialStatementsFilter';
 import RadiosAccountingBasis from '../RadiosAccountingBasis';
 import SelectDisplayColumnsBy from '../SelectDisplayColumnsBy';

@@ -13,7 +13,7 @@ export default function CashFlowStatementHeaderGeneralPanel() {
    <div>
      <FinancialStatementDateRange />
      <SelectDisplayColumnsBy />
-      <FinancialAccountsFilter initialSelectedItem={'all-accounts'} />
+      <FinancialStatementsFilter initialSelectedItem={'all-accounts'} />
      <RadiosAccountingBasis key={'basis'} />
    </div>
  );
--- a/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanelContent.js
+++ b/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanelContent.js
@@ -5,6 +5,8 @@ import { Classes, FormGroup, Position, Checkbox } from '@blueprintjs/core';
 import { ContactsMultiSelect, FormattedMessage as T } from 'components';
 import classNames from 'classnames';
 import { Row, Col, FieldHint } from 'components';
+import { filterCustomersOptions } from '../common';
+
 import {
  momentFormatter,
  tansformDateValue,
@@ -12,6 +14,7 @@ import {
  handleDateChange,
 } from 'utils';
 import { useCustomersBalanceSummaryGeneralContext } from './CustomersBalanceSummaryGeneralProvider';
+import FinancialStatementsFilter from '../FinancialStatementsFilter';

 /**
 * Customers balance header - General panel - Content
@@ -65,6 +68,12 @@ export default function CustomersBalanceSummaryGeneralPanelContent() {
        </Col>
      </Row>

+      <FinancialStatementsFilter
+        items={filterCustomersOptions}
+        label={<T id={'customers.label_filter_customers'} />}
+        initialSelectedItem={'all-customers'}
+      />
+
      <Row>
        <Col xs={5}>
          <Field name={'customersIds'}>
@@ -80,7 +89,7 @@ export default function CustomersBalanceSummaryGeneralPanelContent() {
                <ContactsMultiSelect
                  items={customers}
                  onItemSelect={(contacts) => {
-                    const customersIds = contacts.map(contact => contact.id);
+                    const customersIds = contacts.map((contact) => contact.id);
                    setFieldValue('customersIds', customersIds);
                  }}
                />
--- a/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.js
+++ b/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.js
@@ -26,7 +26,6 @@ function CustomersBalanceSummaryHeader({
  // #withCustomersBalanceSummaryActions
  toggleCustomerBalanceFilterDrawer,
 }) {
-
  // validation schema.
  const validationSchema = Yup.object().shape({
    asDate: Yup.date().required().label('asDate'),
@@ -34,15 +33,20 @@ function CustomersBalanceSummaryHeader({

  // Default form values.
  const defaultValues = {
+    ...pageFilter,
    asDate: moment().toDate(),
    customersIds: [],
  };

  // Filter form initial values.
-  const initialValues = transformToForm({
-    ...pageFilter,
-    asDate: moment(pageFilter.asDate).toDate(),
-  }, defaultValues);
+  const initialValues = transformToForm(
+    {
+      ...defaultValues,
+      ...pageFilter,
+      asDate: moment(pageFilter.asDate).toDate(),
+    },
+    defaultValues,
+  );

  // handle form submit.
  const handleSubmit = (values, { setSubmitting }) => {
--- a/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.js
+++ b/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.js
@@ -30,22 +30,25 @@ function CustomersTransactionsHeader({
 }) {
  // Default form values.
  const defaultValues = {
+    ...pageFilter,
    fromDate: moment().toDate(),
    toDate: moment().toDate(),
    customersIds: [],
  };
  // Initial form values.
-  const initialValues = transformToForm({
-    ...pageFilter,
-    fromDate: moment(pageFilter.fromDate).toDate(),
-    toDate: moment(pageFilter.toDate).toDate(),
-  }, defaultValues);
+  const initialValues = transformToForm(
+    {
+      ...defaultValues,
+      ...pageFilter,
+      fromDate: moment(pageFilter.fromDate).toDate(),
+      toDate: moment(pageFilter.toDate).toDate(),
+    },
+    defaultValues,
+  );

  // Validation schema.
  const validationSchema = Yup.object().shape({
-    fromDate: Yup.date()
-      .required()
-      .label(intl.get('fromDate')),
+    fromDate: Yup.date().required().label(intl.get('fromDate')),
    toDate: Yup.date()
      .min(Yup.ref('fromDate'))
      .required()
@@ -59,7 +62,9 @@ function CustomersTransactionsHeader({
    setSubmitting(false);
  };
  // Handle drawer close action.
-  const handleDrawerClose = () => { toggleFilterDrawer(false); };
+  const handleDrawerClose = () => {
+    toggleFilterDrawer(false);
+  };

  return (
    <FinancialStatementHeader
--- a/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeaderGeneralPanel.js
+++ b/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeaderGeneralPanel.js
@@ -3,12 +3,15 @@ import classNames from 'classnames';
 import { Field } from 'formik';
 import { Classes, FormGroup } from '@blueprintjs/core';
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
+import FinancialStatementsFilter from '../FinancialStatementsFilter';
 import {
  Row,
  Col,
  ContactsMultiSelect,
  FormattedMessage as T,
 } from '../../../components';
+import { filterCustomersOptions } from '../common';
+
 import {
  CustomersTransactionsGeneralPanelProvider,
  useCustomersTransactionsGeneralPanelContext,
@@ -34,7 +37,11 @@ function CustomersTransactionsHeaderGeneralPanelContent() {
  return (
    <div>
      <FinancialStatementDateRange />
-
+      <FinancialStatementsFilter
+        items={filterCustomersOptions}
+        label={<T id={'customers.label_filter_customers'} />}
+        initialSelectedItem={'all-customers'}
+      />
      <Row>
        <Col xs={5}>
          <Field name={'customersIds'}>
--- a/src/containers/FinancialStatements/FinancialStatementsFilter.js
+++ b/src/containers/FinancialStatements/FinancialStatementsFilter.js
@@ -15,14 +15,18 @@ import { Col, Row, ListSelect, MODIFIER } from 'components';
 import { filterAccountsOptions } from './common';


-export default function FinancialAccountsFilter({ ...restProps }) {
+export default function FinancialStatementsFilter({
+  items = filterAccountsOptions,
+  label = <T id={'filter_accounts'} />,
+  ...restProps
+}) {
  const SUBMENU_POPOVER_MODIFIERS = {
    flip: { boundariesElement: 'viewport', padding: 20 },
    offset: { offset: '0, 10' },
    preventOverflow: { boundariesElement: 'viewport', padding: 40 },
  };

-  const filterAccountRenderer = (item, { handleClick, modifiers, query }) => {
+  const filterRenderer = (item, { handleClick, modifiers, query }) => {
    return (
      <Tooltip
        interactionKind={PopoverInteractionKind.HOVER}
@@ -44,13 +48,13 @@ export default function FinancialAccountsFilter({ ...restProps }) {
        <FastField name={'accountsFilter'}>
          {({ form: { setFieldValue }, field: { value } }) => (
            <FormGroup
-              label={<T id={'filter_accounts'} />}
+              label={label}
              className="form-group--select-list bp3-fill"
              inline={false}
            >
              <ListSelect
-                items={filterAccountsOptions}
-                itemRenderer={filterAccountRenderer}
+                items={items}
+                itemRenderer={filterRenderer}
                popoverProps={{ minimal: true }}
                filterable={false}
                selectedItem={value}
--- a/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderGeneralPane.js
+++ b/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderGeneralPane.js
@@ -7,7 +7,7 @@ import { AccountsMultiSelect, Row, Col } from 'components';

 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
 import RadiosAccountingBasis from '../RadiosAccountingBasis';
-import FinancialAccountsFilter from '../FinancialAccountsFilter';
+import FinancialStatementsFilter from '../FinancialStatementsFilter';
 import { GLHeaderGeneralPanelProvider } from './GLHeaderGeneralPaneProvider';

 import { filterAccountsOptions } from './common';
@@ -33,7 +33,7 @@ function GLHeaderGeneralPaneContent() {
  return (
    <React.Fragment>
      <FinancialStatementDateRange />
-      <FinancialAccountsFilter
+      <FinancialStatementsFilter
        items={filterAccountsOptions}
        initialSelectedItem={'all-accounts'}
      />
--- a/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.js
+++ b/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.js
@@ -33,12 +33,14 @@ function InventoryValuationHeader({

  // Default values.
  const defaultValues = {
+    ...pageFilter,
    asDate: moment().toDate(),
    itemsIds: [],
  };
  // Initial values.
  const initialValues = transformToForm({
    ...pageFilter,
+    ...defaultValues,
    asDate: moment(pageFilter.asDate).toDate(),
  }, defaultValues);

--- a/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderGeneralPanel.js
+++ b/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderGeneralPanel.js
@@ -11,6 +11,8 @@ import {
  Col,
  FieldHint,
 } from '../../../components';
+import { filterInventoryValuationOptions } from '../common';
+
 import {
  momentFormatter,
  tansformDateValue,
@@ -21,6 +23,7 @@ import {
  InventoryValuationGeneralPanelProvider,
  useInventoryValuationGeneralPanelContext,
 } from './InventoryValuationHeaderGeneralPanelProvider';
+import FinancialStatementsFilter from '../FinancialStatementsFilter';

 /**
 * Inventory valuation - Drawer Header - General panel.
@@ -66,6 +69,11 @@ function InventoryValuationHeaderGeneralPanelContent() {
          </FastField>
        </Col>
      </Row>
+      <FinancialStatementsFilter
+        items={filterInventoryValuationOptions}
+        label={<T id={'items.label_filter_items'} />}
+        initialSelectedItem={'all-items'}
+      />

      <Row>
        <Col xs={5}>
--- a/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderGeneralPane.js
+++ b/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderGeneralPane.js
@@ -3,7 +3,7 @@ import React from 'react';
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
 import SelectDisplayColumnsBy from '../SelectDisplayColumnsBy';
 import RadiosAccountingBasis from '../RadiosAccountingBasis';
-import FinancialAccountsFilter from '../FinancialAccountsFilter';
+import FinancialStatementsFilter from '../FinancialStatementsFilter';

 /**
 * Profit/Loss sheet - Drawer header - General panel.
@@ -13,7 +13,7 @@ export default function ProfitLossSheetHeaderGeneralPane({}) {
    <div>
      <FinancialStatementDateRange />
      <SelectDisplayColumnsBy />
-      <FinancialAccountsFilter initialSelectedItem={'all-accounts'} />
+      <FinancialStatementsFilter initialSelectedItem={'all-accounts'} />
      <RadiosAccountingBasis key={'basis'} />
    </div>
  );
--- a/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsGeneralPanel.js
+++ b/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsGeneralPanel.js
@@ -9,6 +9,8 @@ import {
 } from '../../../components';
 import classNames from 'classnames';
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
+import FinancialStatementsFilter from '../FinancialStatementsFilter';
+import { filterItemsOptions } from '../common';

 import {
  PurchasesByItemsGeneralPanelProvider,
@@ -35,6 +37,11 @@ function PurchasesByItemsGeneralPanelContent() {
  return (
    <div>
      <FinancialStatementDateRange />
+      <FinancialStatementsFilter
+        items={filterItemsOptions}
+        label={<T id={'items.label_filter_items'} />}
+        initialSelectedItem={'all-items'}
+      />

      <Row>
        <Col xs={4}>
--- a/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsHeader.js
+++ b/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsHeader.js
@@ -47,6 +47,7 @@ function PurchasesByItemsHeader({
  // Initial form values.
  const initialValues = transformToForm(
    {
+      ...defaultValues,
      ...pageFilter,
      fromDate: moment(pageFilter.fromDate).toDate(),
      toDate: moment(pageFilter.toDate).toDate(),
--- a/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeaderGeneralPanel.js
+++ b/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeaderGeneralPanel.js
@@ -2,10 +2,11 @@ import React from 'react';
 import { FormGroup, Classes } from '@blueprintjs/core';
 import { Field } from 'formik';
 import classNames from 'classnames';
-import { get } from 'lodash';
+import { filterItemsOptions } from '../common';

 import { Row, Col, ItemsMultiSelect, FormattedMessage as T } from 'components';
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
+import FinancialStatementsFilter from '../FinancialStatementsFilter';
 import {
  SalesByItemGeneralPanelProvider,
  useSalesByItemsGeneralPanelContext,
@@ -32,6 +33,12 @@ function SalesByItemsHeaderGeneralPanelContent() {
    <div>
      <FinancialStatementDateRange />

+      <FinancialStatementsFilter
+        items={filterItemsOptions}
+        label={<T id={'items.label_filter_items'} />}
+        initialSelectedItem={'all-items'}
+      />
+
      <Row>
        <Col xs={4}>
          <Field name={'itemsIds'}>
--- a/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeaderGeneralPanel.js
+++ b/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeaderGeneralPanel.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
 import RadiosAccountingBasis from '../RadiosAccountingBasis';
-import FinancialAccountsFilter from '../FinancialAccountsFilter';
+import FinancialStatementsFilter from '../FinancialStatementsFilter';

 /**
 * Trial balance sheet - Drawer header - General panel.
@@ -12,7 +12,7 @@ export default function TrialBalanceSheetHeaderGeneralPanel({
  return (
    <div>
      <FinancialStatementDateRange />
-      <FinancialAccountsFilter initialSelectedItem={'all-accounts'} />
+      <FinancialStatementsFilter initialSelectedItem={'all-accounts'} />
      <RadiosAccountingBasis />
    </div>
  );
--- a/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeader.js
+++ b/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeader.js
@@ -33,14 +33,20 @@ function VendorsBalanceSummaryHeader({

  // filter form initial values.
  const defaultValues = {
+    ...pageFilter,
    asDate: moment().toDate(),
    vendorsIds: [],
  };
  // Initial form values.
-  const initialValues = transformToForm({
-    ...pageFilter,
-    asDate: moment(pageFilter.asDate).toDate(),
-  }, defaultValues);
+  const initialValues = transformToForm(
+    {
+      ...defaultValues,
+
+      ...pageFilter,
+      asDate: moment(pageFilter.asDate).toDate(),
+    },
+    defaultValues,
+  );

  // handle form submit.
  const handleSubmit = (values, { setSubmitting }) => {
--- a/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneralContent.js
+++ b/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneralContent.js
@@ -11,6 +11,8 @@ import {
  FieldHint,
  FormattedMessage as T,
 } from '../../../components';
+import { filterVendorsOptions } from '../common';
+
 import {
  momentFormatter,
  tansformDateValue,
@@ -18,6 +20,7 @@ import {
  handleDateChange,
 } from 'utils';
 import { useVendorsBalanceSummaryGeneralPanelContext } from './VendorsBalanceSummaryHeaderGeneralProvider';
+import FinancialStatementsFilter from '../FinancialStatementsFilter';

 /**
 * Vendors balance header - General panel - Content.
@@ -71,6 +74,12 @@ export default function VendorsBalanceSummaryHeaderGeneralContent() {
        </Col>
      </Row>

+      <FinancialStatementsFilter
+        items={filterVendorsOptions}
+        label={<T id={'vendors.label_filter_vendors'} />}
+        initialSelectedItem={'all-vendors'}
+      />
+
      <Row>
        <Col xs={4}>
          <Field name={'vendorsIds'}>
--- a/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeader.js
+++ b/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeader.js
@@ -31,23 +31,26 @@ function VendorsTransactionsHeader({
 }) {
  // Default form values.
  const defaultValues = {
+    ...pageFilter,
    fromDate: moment().toDate(),
    toDate: moment().toDate(),
    vendorsIds: [],
  };

  // Initial form values.
-  const initialValues = transformToForm({
-    ...pageFilter,
-    fromDate: moment(pageFilter.fromDate).toDate(),
-    toDate: moment(pageFilter.toDate).toDate(),
-  }, defaultValues);
+  const initialValues = transformToForm(
+    {
+      ...defaultValues,
+      ...pageFilter,
+      fromDate: moment(pageFilter.fromDate).toDate(),
+      toDate: moment(pageFilter.toDate).toDate(),
+    },
+    defaultValues,
+  );

  // Validation schema.
  const validationSchema = Yup.object().shape({
-    fromDate: Yup.date()
-      .required()
-      .label(intl.get('fromDate')),
+    fromDate: Yup.date().required().label(intl.get('fromDate')),
    toDate: Yup.date()
      .min(Yup.ref('fromDate'))
      .required()
@@ -62,7 +65,9 @@ function VendorsTransactionsHeader({
  };

  // Handle drawer close action.
-  const handleDrawerClose = () => { toggleFilterDrawer(false); };
+  const handleDrawerClose = () => {
+    toggleFilterDrawer(false);
+  };

  return (
    <FinancialStatementHeader
--- a/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeaderGeneralPanel.js
+++ b/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeaderGeneralPanel.js
@@ -4,12 +4,16 @@ import classNames from 'classnames';
 import { Classes, FormGroup } from '@blueprintjs/core';

 import FinancialStatementDateRange from '../FinancialStatementDateRange';
+import FinancialStatementsFilter from '../FinancialStatementsFilter';
+
 import {
  Row,
  Col,
  ContactsMultiSelect,
  FormattedMessage as T,
 } from '../../../components';
+import { filterVendorsOptions } from '../common';
+
 import {
  VendorsTransactionsGeneralPanelProvider,
  useVendorsTransactionsGeneralPanelContext,
@@ -35,7 +39,11 @@ function VendorsTransactionsHeaderGeneralPanelContent() {
  return (
    <div>
      <FinancialStatementDateRange />
-
+      <FinancialStatementsFilter
+        items={filterVendorsOptions}
+        label={<T id={'vendors.label_filter_vendors'} />}
+        initialSelectedItem={'all-vendors'}
+      />
      <Row>
        <Col xs={5}>
          <Field name={'vendorsIds'}>
--- a/src/containers/FinancialStatements/common.js
+++ b/src/containers/FinancialStatements/common.js
@@ -65,8 +65,83 @@ export const filterAccountsOptions = [
  },
 ];

+export const filterItemsOptions = [
+  {
+    key: 'all-items',
+    name: intl.get('all_items'),
+    hint: intl.get('items.option_all_items.hint'),
+  },
+  {
+    key: 'with-transactions',
+    name: intl.get('items.option_with_transactions'),
+    hint: intl.get('items.option_with_transactions.hint'),
+  },
+  {
+    key: 'with-only-active',
+    name: intl.get('items.option.only_active'),
+  },
+];
+
+export const filterCustomersOptions = [
+  {
+    key: 'all-customers',
+    name: intl.get('all_customers'),
+    hint: intl.get('customers.option_all_customers.hint'),
+  },
+  {
+    key: 'without-zero-balance',
+    name: intl.get('customers.option_without_zero_balance'),
+    hint: intl.get('customers.option_without_zero_balance.hint'),
+  },
+  {
+    key: 'with-transactions',
+    name: intl.get('customers.option_with_transactions'),
+    hint: intl.get('customers.option_with_transactions.hint'),
+  },
+];
+
+export const filterVendorsOptions = [
+  {
+    key: 'all-vendors',
+    name: intl.get('all_vendors'),
+    hint: intl.get('vendors.option_all_vendors.hint'),
+  },
+  {
+    key: 'without-zero-balance',
+    name: intl.get('vendors.option_without_zero_balance'),
+    hint: intl.get('vendors.option_without_zero_balance.hint'),
+  },
+  {
+    key: 'with-transactions',
+    name: intl.get('vendors.option_with_transactions'),
+    hint: intl.get('vendors.option_with_transactions.hint'),
+  },
+];
+
+export const filterInventoryValuationOptions = [
+  {
+    key: 'all-items',
+    name: intl.get('all_items'),
+    hint: intl.get('items.option_all_items.hint'),
+  },
+  {
+    key: 'with-transactions',
+    name: intl.get('items.option_with_transactions'),
+    hint: intl.get('items.option_with_transactions.hint'),
+  },
+  {
+    key: 'without-zero-balance',
+    name: intl.get('items.option_without_zero_balance'),
+    hint: intl.get('items.option_without_zero_balance.hint'),
+  },
+  {
+    key: 'with-only-active',
+    name: intl.get('items.option.only_active'),
+  },
+]
+
 /**
- * Associate display columns by and type properties to query object. 
+ * Associate display columns by and type properties to query object.
 */
 export const transformDisplayColumnsType = (form) => {
  const columnType = displayColumnsByOptions.find(
@@ -87,15 +162,13 @@ const setNoneZeroTransactions = (form) => {
    ...form,
    noneZero: form.accountsFilter === 'without-zero-balance',
    noneTransactions: form.accountsFilter === 'with-transactions',
+    onlyActive: form.accountsFilter === 'with-only-active',
  };
-}
+};

 export const transformAccountsFilter = (form) => {
-  return R.compose(
-    R.omit(['accountsFilter']),
-    setNoneZeroTransactions,
-  )(form)
-}
+  return R.compose(R.omit(['accountsFilter']), setNoneZeroTransactions)(form);
+};

 /**
 * Transform filter form to http query.