From cbce9f6d5043a17f80dfd61c5084ccd966f6a41b Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Sun, 31 Oct 2021 12:35:50 +0200
Subject: [PATCH] fix: BIG-132 AR/AP aging summary report filter by none
 transactions/zero contacts.

---
 .../APAgingSummary/APAgingSummary.js          |  5 +-
 .../APAgingSummary/APAgingSummaryHeader.js    |  9 ++-
 .../APAgingSummaryHeaderGeneralContent.js     | 11 ++++
 .../APAgingSummary/APAgingSummaryProvider.js  |  3 +-
 .../APAgingSummary/constants.js               | 14 +++++
 .../ARAgingSummary/ARAgingSummary.js          |  1 +
 .../ARAgingSummary/ARAgingSummaryHeader.js    |  3 +-
 .../ARAgingSummaryHeaderGeneralContent.js     | 12 ++++
 .../ARAgingSummary/ARAgingSummaryProvider.js  |  2 +-
 .../ARAgingSummary/ARAgingSummaryTable.js     |  7 ---
 .../ARAgingSummary/constants.js               | 16 ++++++
 .../BalanceSheetHeaderGeneralPanal.js         | 12 +++-
 .../CashFlowStatementGeneralPanel.js          | 11 +++-
 ...tomersBalanceSummaryGeneralPanelContent.js | 14 +++--
 ...CustomersTransactionsHeaderGeneralPanel.js | 18 ++++--
 .../FinancialStatementsFilter.js              | 55 +++++++++----------
 .../GeneralLedgerHeaderGeneralPane.js         | 13 +++--
 .../GeneralLedger/components.js               |  1 -
 .../InventoryItemDetailsTable.js              |  4 +-
 .../InventoryItemDetails/utils.js             | 20 ++-----
 .../InventoryValuationHeaderGeneralPanel.js   | 15 +++--
 .../ProfitLossSheetHeaderGeneralPane.js       | 10 +++-
 .../PurchasesByItemsGeneralPanel.js           | 15 +++--
 .../SalesByItemsHeaderGeneralPanel.js         | 14 +++--
 .../TrialBalanceSheetHeaderGeneralPanel.js    | 15 +++--
 ...ndorsBalanceSummaryHeaderGeneralContent.js | 16 ++++--
 .../VendorsTransactionsHeaderGeneralPanel.js  | 18 ++++--
 src/containers/FinancialStatements/common.js  |  2 +-
 src/lang/en/index.json                        | 18 +++++-
 .../FinancialStatements/ARAgingSummary.scss   |  2 +-
 .../ContactsTransactions.scss                 |  3 +-
 .../SalesAndPurchasesSheet.scss               |  4 +-
 32 files changed, 241 insertions(+), 122 deletions(-)
 create mode 100644 src/containers/FinancialStatements/APAgingSummary/constants.js
 create mode 100644 src/containers/FinancialStatements/ARAgingSummary/constants.js

diff --git a/src/containers/FinancialStatements/APAgingSummary/APAgingSummary.js b/src/containers/FinancialStatements/APAgingSummary/APAgingSummary.js
index dda5b2cc0..1b338bec4 100644
--- a/src/containers/FinancialStatements/APAgingSummary/APAgingSummary.js
+++ b/src/containers/FinancialStatements/APAgingSummary/APAgingSummary.js
@@ -17,7 +17,7 @@ import withAPAgingSummaryActions from './withAPAgingSummaryActions';
 import { compose } from 'utils';
 
 /**
- * AP aging summary report.
+ * A/P aging summary report.
  */
 function APAgingSummary({
   // #withSettings
@@ -28,9 +28,10 @@ function APAgingSummary({
 }) {
   const [filter, setFilter] = useState({
     asDate: moment().endOf('day').format('YYYY-MM-DD'),
-    agingBeforeDays: 30,
+    agingDaysBefore: 30,
     agingPeriods: 3,
     vendorsIds: [],
+    filterByOption: 'without-zero-balance',
   });
 
   // Handle filter submit.
diff --git a/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.js b/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.js
index db18b257a..ae95f55ac 100644
--- a/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.js
+++ b/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.js
@@ -49,6 +49,7 @@ function APAgingSummaryHeader({
     agingDaysBefore: 30,
     agingPeriods: 3,
     vendorsIds: [],
+    filterByOption: 'without-zero-balance',
   };
   // Formik initial values.
   const initialValues = transformToForm(pageFilter, defaultValues);
@@ -61,10 +62,14 @@ function APAgingSummaryHeader({
   };
 
   // Handle cancel button click.
-  const handleCancelClick = () => { toggleFilterDrawerDisplay(false); };
+  const handleCancelClick = () => {
+    toggleFilterDrawerDisplay(false);
+  };
 
   // Handle the drawer closing.
-  const handleDrawerClose = () => { toggleFilterDrawerDisplay(false); };
+  const handleDrawerClose = () => {
+    toggleFilterDrawerDisplay(false);
+  };
 
   return (
     <FinancialStatementHeader
diff --git a/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderGeneralContent.js b/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderGeneralContent.js
index 96a9c3b8c..b72b07604 100644
--- a/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderGeneralContent.js
+++ b/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderGeneralContent.js
@@ -17,6 +17,8 @@ import {
   FieldHint,
 } from 'components';
 import { useAPAgingSummaryGeneralContext } from './APAgingSummaryGeneralProvider';
+import FinancialStatementsFilter from '../FinancialStatementsFilter';
+import { filterVendorsOptions } from './constants';
 import {
   momentFormatter,
   tansformDateValue,
@@ -90,6 +92,15 @@ export default function APAgingSummaryHeaderGeneralContent() {
         </Col>
       </Row>
 
+      <Row>
+        <Col xs={5}>
+          <FinancialStatementsFilter
+            items={filterVendorsOptions}
+            label={<T id={'AP_aging_summary.filter_options.label'} />}
+          />
+        </Col>
+      </Row>
+
       <Row>
         <Col xs={5}>
           <Field name={'vendorsIds'}>
diff --git a/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryProvider.js b/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryProvider.js
index 9366c2e48..d6c3436e2 100644
--- a/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryProvider.js
+++ b/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryProvider.js
@@ -1,6 +1,7 @@
 import React, { useMemo, createContext, useContext } from 'react';
+
 import FinancialReportPage from '../FinancialReportPage';
-import { useAPAgingSummaryReport, useVendors } from 'hooks/query';
+import { useAPAgingSummaryReport } from '../../../hooks/query';
 import { transformFilterFormToQuery } from '../common';
 
 const APAgingSummaryContext = createContext();
diff --git a/src/containers/FinancialStatements/APAgingSummary/constants.js b/src/containers/FinancialStatements/APAgingSummary/constants.js
new file mode 100644
index 000000000..c8d928f55
--- /dev/null
+++ b/src/containers/FinancialStatements/APAgingSummary/constants.js
@@ -0,0 +1,14 @@
+import intl from 'react-intl-universal';
+
+export const filterVendorsOptions = [
+  {
+    key: 'all-vendors',
+    name: intl.get('AP_aging_summary.filter_vendors.all_vendors'),
+    hint: intl.get('AP_aging_summary.filter_vendors.all_vendors.hint'),
+  },
+  {
+    key: 'without-zero-balance',
+    name: intl.get('AP_aging_summary.filter_vendors.without_zero_balance'),
+    hint: intl.get('AP_aging_summary.filter_vendors.without_zero_balance.hint'),
+  },
+];
diff --git a/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.js b/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.js
index fdb0def8f..b013ec07f 100644
--- a/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.js
+++ b/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.js
@@ -32,6 +32,7 @@ function ReceivableAgingSummarySheet({
     agingDaysBefore: 30,
     agingPeriods: 3,
     customersIds: [],
+    filterByOption: 'without-zero-balance',
   });
 
   // Handle filter submit.
diff --git a/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.js b/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.js
index e7850b86f..b8ea2fa97 100644
--- a/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.js
+++ b/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.js
@@ -27,6 +27,7 @@ function ARAgingSummaryHeader({
   // #withARAgingSummary
   isFilterDrawerOpen,
 }) {
+  // Validation schema.
   const validationSchema = Yup.object().shape({
     asDate: Yup.date().required().label('asDate'),
     agingDaysBefore: Yup.number()
@@ -46,6 +47,7 @@ function ARAgingSummaryHeader({
     agingDaysBefore: 30,
     agingPeriods: 3,
     customersIds: [],
+    filterByOption: 'without-zero-balance',
   };
   // Initial values.
   const initialValues = transformToForm(
@@ -67,7 +69,6 @@ function ARAgingSummaryHeader({
   const handleCancelClick = () => {
     toggleFilterDrawerDisplay(false);
   };
-
   // Handle the drawer close.
   const handleDrawerClose = () => {
     toggleFilterDrawerDisplay(false);
diff --git a/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneralContent.js b/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneralContent.js
index 0d902cbc5..38d90b752 100644
--- a/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneralContent.js
+++ b/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneralContent.js
@@ -10,6 +10,7 @@ import {
 } from '@blueprintjs/core';
 import classNames from 'classnames';
 
+import FinancialStatementsFilter from '../FinancialStatementsFilter';
 import {
   FormattedMessage as T,
   ContactsMultiSelect,
@@ -19,6 +20,7 @@ import {
 } from 'components';
 import { momentFormatter } from 'utils';
 import { useARAgingSummaryGeneralContext } from './ARAgingSummaryGeneralProvider';
+import { filterCustomersOptions } from './constants';
 
 /**
  * AR Aging Summary - Drawer Header - General Fields.
@@ -96,6 +98,16 @@ export default function ARAgingSummaryHeaderGeneralContent() {
           </FastField>
         </Col>
       </Row>
+
+      <Row>
+        <Col xs={5}>
+          <FinancialStatementsFilter
+            items={filterCustomersOptions}
+            label={<T id={'AR_aging_summary.filter_options.label'} />}
+          />
+        </Col>
+      </Row>
+
       <Row>
         <Col xs={5}>
           <Field name="customersIds">
diff --git a/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryProvider.js b/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryProvider.js
index 33ffde394..19c714b02 100644
--- a/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryProvider.js
+++ b/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryProvider.js
@@ -9,7 +9,7 @@ const ARAgingSummaryContext = createContext();
  * A/R aging summary provider.
  */
 function ARAgingSummaryProvider({ filter, ...props }) {
-  // Transformes the filter from to the Url query.
+  // Transformes the filter from to the url query.
   const query = useMemo(() => transformFilterFormToQuery(filter), [filter]);
 
   // A/R aging summary sheet context.
diff --git a/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.js b/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.js
index 595e74271..41b58a805 100644
--- a/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.js
+++ b/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.js
@@ -13,8 +13,6 @@ export default function ReceivableAgingSummaryTable({
   // #ownProps
   organizationName,
 }) {
-  
-
   // AR aging summary report context.
   const { ARAgingSummary, isARAgingLoading } = useARAgingSummaryContext();
 
@@ -23,10 +21,6 @@ export default function ReceivableAgingSummaryTable({
 
   const rowClassNames = (row) => [`row-type--${row.original.rowType}`];
 
-  const handleFetchData = useCallback((...args) => {
-    // onFetchData && onFetchData(...args);
-  }, []);
-
   return (
     <FinancialSheet
       companyName={organizationName}
@@ -40,7 +34,6 @@ export default function ReceivableAgingSummaryTable({
         columns={columns}
         data={ARAgingSummary.tableRows}
         rowClassNames={rowClassNames}
-        onFetchData={handleFetchData}
         noInitialFetch={true}
         sticky={true}
       />
diff --git a/src/containers/FinancialStatements/ARAgingSummary/constants.js b/src/containers/FinancialStatements/ARAgingSummary/constants.js
new file mode 100644
index 000000000..cb4c916d8
--- /dev/null
+++ b/src/containers/FinancialStatements/ARAgingSummary/constants.js
@@ -0,0 +1,16 @@
+import intl from 'react-intl-universal';
+
+export const filterCustomersOptions = [
+  {
+    key: 'all-customers',
+    name: intl.get('AR_aging_summary.filter_customers.all_customers'),
+    hint: intl.get('AR_aging_summary.filter_customers.all_customers.hint'),
+  },
+  {
+    key: 'without-zero-balance',
+    name: intl.get('AR_aging_summary.filter_customers.without_zero_balance'),
+    hint: intl.get(
+      'AR_aging_summary.filter_customers.without_zero_balance.hint',
+    ),
+  },
+];
diff --git a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderGeneralPanal.js b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderGeneralPanal.js
index 0d97dde46..1eb9eb9bd 100644
--- a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderGeneralPanal.js
+++ b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderGeneralPanal.js
@@ -1,4 +1,7 @@
 import React from 'react';
+
+import { Row, Col } from '../../../components';
+
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
 import SelectDisplayColumnsBy from '../SelectDisplayColumnsBy';
 import RadiosAccountingBasis from '../RadiosAccountingBasis';
@@ -12,9 +15,12 @@ export default function BalanceSheetHeaderGeneralTab({}) {
     <div>
       <FinancialStatementDateRange />
       <SelectDisplayColumnsBy />
-      <FinancialStatementsFilter
-        initialSelectedItem={'all-accounts'}
-      />
+
+      <Row>
+        <Col xs={4}>
+          <FinancialStatementsFilter initialSelectedItem={'all-accounts'} />
+        </Col>
+      </Row>
       <RadiosAccountingBasis key={'basis'} />
     </div>
   );
diff --git a/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementGeneralPanel.js b/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementGeneralPanel.js
index 742a6454a..a6b18a8d1 100644
--- a/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementGeneralPanel.js
+++ b/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementGeneralPanel.js
@@ -1,4 +1,6 @@
 import React from 'react';
+
+import { Row, Col } from '../../../components';
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
 import FinancialStatementsFilter from '../FinancialStatementsFilter';
 import RadiosAccountingBasis from '../RadiosAccountingBasis';
@@ -13,7 +15,14 @@ export default function CashFlowStatementHeaderGeneralPanel() {
     <div>
       <FinancialStatementDateRange />
       <SelectDisplayColumnsBy />
-      <FinancialStatementsFilter initialSelectedItem={'with-transactions'} />
+
+      <Row>
+        <Col xs={4}>
+          <FinancialStatementsFilter
+            initialSelectedItem={'with-transactions'}
+          />
+        </Col>
+      </Row>
       <RadiosAccountingBasis key={'basis'} />
     </div>
   );
diff --git a/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanelContent.js b/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanelContent.js
index 1e8c692a9..e5f770587 100644
--- a/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanelContent.js
+++ b/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanelContent.js
@@ -68,11 +68,15 @@ export default function CustomersBalanceSummaryGeneralPanelContent() {
         </Col>
       </Row>
 
-      <FinancialStatementsFilter
-        items={filterCustomersOptions}
-        label={<T id={'customers.label_filter_customers'} />}
-        initialSelectedItem={'with-transactions'}
-      />
+      <Row>
+        <Col xs={5}>
+          <FinancialStatementsFilter
+            items={filterCustomersOptions}
+            label={<T id={'customers.label_filter_customers'} />}
+            initialSelectedItem={'with-transactions'}
+          />
+        </Col>
+      </Row>
 
       <Row>
         <Col xs={5}>
diff --git a/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeaderGeneralPanel.js b/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeaderGeneralPanel.js
index d0b218fc4..9b9d7cea1 100644
--- a/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeaderGeneralPanel.js
+++ b/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeaderGeneralPanel.js
@@ -37,13 +37,19 @@ function CustomersTransactionsHeaderGeneralPanelContent() {
   return (
     <div>
       <FinancialStatementDateRange />
-      <FinancialStatementsFilter
-        items={filterCustomersOptions}
-        label={<T id={'customers.label_filter_customers'} />}
-        initialSelectedItem={'with-transactions'}
-      />
+
       <Row>
-        <Col xs={5}>
+        <Col xs={4}>
+          <FinancialStatementsFilter
+            items={filterCustomersOptions}
+            label={<T id={'customers.label_filter_customers'} />}
+            initialSelectedItem={'with-transactions'}
+          />
+        </Col>
+      </Row>
+
+      <Row>
+        <Col xs={4}>
           <Field name={'customersIds'}>
             {({ form: { setFieldValue }, field: { value } }) => (
               <FormGroup
diff --git a/src/containers/FinancialStatements/FinancialStatementsFilter.js b/src/containers/FinancialStatements/FinancialStatementsFilter.js
index d746e1161..24441866a 100644
--- a/src/containers/FinancialStatements/FinancialStatementsFilter.js
+++ b/src/containers/FinancialStatements/FinancialStatementsFilter.js
@@ -11,10 +11,9 @@ import classNames from 'classnames';
 import { FastField } from 'formik';
 
 import { CLASSES } from 'common/classes';
-import { Col, Row, ListSelect, MODIFIER } from 'components';
+import { ListSelect, MODIFIER } from 'components';
 import { filterAccountsOptions } from './constants';
 
-
 export default function FinancialStatementsFilter({
   items = filterAccountsOptions,
   label = <T id={'filter_accounts'} />,
@@ -43,33 +42,29 @@ export default function FinancialStatementsFilter({
   };
 
   return (
-    <Row>
-      <Col xs={4}>
-        <FastField name={'filterByOption'}>
-          {({ form: { setFieldValue }, field: { value } }) => (
-            <FormGroup
-              label={label}
-              className="form-group--select-list bp3-fill"
-              inline={false}
-            >
-              <ListSelect
-                items={items}
-                itemRenderer={filterRenderer}
-                popoverProps={{ minimal: true }}
-                filterable={false}
-                selectedItem={value}
-                selectedItemProp={'key'}
-                textProp={'name'}
-                onItemSelect={(item) => {
-                  setFieldValue('filterByOption', item.key);
-                }}
-                className={classNames(CLASSES.SELECT_LIST_FILL_POPOVER)}
-                {...restProps}
-              />
-            </FormGroup>
-          )}
-        </FastField>
-      </Col>
-    </Row>
+    <FastField name={'filterByOption'}>
+      {({ form: { setFieldValue }, field: { value } }) => (
+        <FormGroup
+          label={label}
+          className="form-group--select-list bp3-fill"
+          inline={false}
+        >
+          <ListSelect
+            items={items}
+            itemRenderer={filterRenderer}
+            popoverProps={{ minimal: true }}
+            filterable={false}
+            selectedItem={value}
+            selectedItemProp={'key'}
+            textProp={'name'}
+            onItemSelect={(item) => {
+              setFieldValue('filterByOption', item.key);
+            }}
+            className={classNames(CLASSES.SELECT_LIST_FILL_POPOVER)}
+            {...restProps}
+          />
+        </FormGroup>
+      )}
+    </FastField>
   );
 }
diff --git a/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderGeneralPane.js b/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderGeneralPane.js
index 356480e06..5aef980ec 100644
--- a/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderGeneralPane.js
+++ b/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderGeneralPane.js
@@ -33,10 +33,15 @@ function GLHeaderGeneralPaneContent() {
   return (
     <React.Fragment>
       <FinancialStatementDateRange />
-      <FinancialStatementsFilter
-        items={filterAccountsOptions}
-        initialSelectedItem={'with-transactions'}
-      />
+
+      <Row>
+        <Col xs={4}>
+          <FinancialStatementsFilter
+            items={filterAccountsOptions}
+            initialSelectedItem={'with-transactions'}
+          />
+        </Col>
+      </Row>
       <Row>
         <Col xs={4}>
           <FormGroup
diff --git a/src/containers/FinancialStatements/GeneralLedger/components.js b/src/containers/FinancialStatements/GeneralLedger/components.js
index 9ccb69a7f..895dcecc7 100644
--- a/src/containers/FinancialStatements/GeneralLedger/components.js
+++ b/src/containers/FinancialStatements/GeneralLedger/components.js
@@ -35,7 +35,6 @@ export function useGeneralLedgerTableColumns() {
           return row.date;
         },
         className: 'date',
-        textOverview: true,
         width: 120,
       },
       {
diff --git a/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.js b/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.js
index b9840dd06..5f730f76d 100644
--- a/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.js
+++ b/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.js
@@ -1,8 +1,6 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo } from 'react';
 import intl from 'react-intl-universal';
 
-import classNames from 'classnames';
-
 import FinancialSheet from 'components/FinancialSheet';
 import { DataTable } from 'components';
 import { useInventoryItemDetailsColumns } from './components';
diff --git a/src/containers/FinancialStatements/InventoryItemDetails/utils.js b/src/containers/FinancialStatements/InventoryItemDetails/utils.js
index e65fbf0a0..35d2e29f1 100644
--- a/src/containers/FinancialStatements/InventoryItemDetails/utils.js
+++ b/src/containers/FinancialStatements/InventoryItemDetails/utils.js
@@ -1,6 +1,6 @@
-import React from 'react';
 import * as R from 'ramda';
-import { getColumnWidth, getForceWidth } from 'utils';
+import { getColumnWidth } from 'utils';
+import { CellForceWidth } from '../../../components';
 
 /**
  *  columns mapper.
@@ -9,25 +9,15 @@ const columnsMapper = (data, index, column) => ({
   id: column.key,
   key: column.key,
   Header: column.label,
-  accessor: ({ cells }) => {
-    return (
-      <span
-        className={'force-width'}
-        style={{
-          minWidth: getForceWidth(cells[0].value),
-        }}
-      >
-        {cells[index]?.value}
-      </span>
-    );
-  },
+  Cell: CellForceWidth,
+  accessor: `cells[${index}].value`,
+  forceWidthAccess: `cells[0].value`,
   className: column.key,
   width: getColumnWidth(data, `cells.${index}.key`, {
     minWidth: 130,
     magicSpacing: 10,
   }),
   disableSortBy: true,
-  // textOverview: true,
 });
 
 /**
diff --git a/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderGeneralPanel.js b/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderGeneralPanel.js
index af3acfb4a..d42384683 100644
--- a/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderGeneralPanel.js
+++ b/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderGeneralPanel.js
@@ -69,11 +69,16 @@ function InventoryValuationHeaderGeneralPanelContent() {
           </FastField>
         </Col>
       </Row>
-      <FinancialStatementsFilter
-        items={filterInventoryValuationOptions}
-        label={<T id={'items.label_filter_items'} />}
-        initialSelectedItem={'all-items'}
-      />
+
+      <Row>
+        <Col xs={4}>
+          <FinancialStatementsFilter
+            items={filterInventoryValuationOptions}
+            label={<T id={'items.label_filter_items'} />}
+            initialSelectedItem={'all-items'}
+          />
+        </Col>
+      </Row>
 
       <Row>
         <Col xs={4}>
diff --git a/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderGeneralPane.js b/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderGeneralPane.js
index 02148d4f3..857cccf9f 100644
--- a/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderGeneralPane.js
+++ b/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderGeneralPane.js
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { Row, Col } from '../../../components';
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
 import SelectDisplayColumnsBy from '../SelectDisplayColumnsBy';
 import RadiosAccountingBasis from '../RadiosAccountingBasis';
@@ -13,7 +14,14 @@ export default function ProfitLossSheetHeaderGeneralPane({}) {
     <div>
       <FinancialStatementDateRange />
       <SelectDisplayColumnsBy />
-      <FinancialStatementsFilter initialSelectedItem={'with-transactions'} />
+
+      <Row>
+        <Col xs={4}>
+          <FinancialStatementsFilter
+            initialSelectedItem={'with-transactions'}
+          />
+        </Col>
+      </Row>
       <RadiosAccountingBasis key={'basis'} />
     </div>
   );
diff --git a/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsGeneralPanel.js b/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsGeneralPanel.js
index 0098541fb..194f29154 100644
--- a/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsGeneralPanel.js
+++ b/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsGeneralPanel.js
@@ -37,11 +37,16 @@ function PurchasesByItemsGeneralPanelContent() {
   return (
     <div>
       <FinancialStatementDateRange />
-      <FinancialStatementsFilter
-        items={filterItemsOptions}
-        label={<T id={'items.label_filter_items'} />}
-        initialSelectedItem={'with-transactions'}
-      />
+
+      <Row>
+        <Col xs={4}>
+          <FinancialStatementsFilter
+            items={filterItemsOptions}
+            label={<T id={'items.label_filter_items'} />}
+            initialSelectedItem={'with-transactions'}
+          />
+        </Col>
+      </Row>
 
       <Row>
         <Col xs={4}>
diff --git a/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeaderGeneralPanel.js b/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeaderGeneralPanel.js
index 717f70082..ece6b7a4e 100644
--- a/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeaderGeneralPanel.js
+++ b/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeaderGeneralPanel.js
@@ -33,11 +33,15 @@ function SalesByItemsHeaderGeneralPanelContent() {
     <div>
       <FinancialStatementDateRange />
 
-      <FinancialStatementsFilter
-        items={filterItemsOptions}
-        label={<T id={'items.label_filter_items'} />}
-        initialSelectedItem={'with-transactions'}
-      />
+      <Row>
+        <Col xs={4}>
+          <FinancialStatementsFilter
+            items={filterItemsOptions}
+            label={<T id={'items.label_filter_items'} />}
+            initialSelectedItem={'with-transactions'}
+          />
+        </Col>
+      </Row>
 
       <Row>
         <Col xs={4}>
diff --git a/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeaderGeneralPanel.js b/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeaderGeneralPanel.js
index 97b3b952d..353cc0ac2 100644
--- a/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeaderGeneralPanel.js
+++ b/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeaderGeneralPanel.js
@@ -1,4 +1,6 @@
 import React from 'react';
+
+import { Row, Col } from '../../../components';
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
 import RadiosAccountingBasis from '../RadiosAccountingBasis';
 import FinancialStatementsFilter from '../FinancialStatementsFilter';
@@ -6,13 +8,18 @@ import FinancialStatementsFilter from '../FinancialStatementsFilter';
 /**
  * Trial balance sheet - Drawer header - General panel.
  */
-export default function TrialBalanceSheetHeaderGeneralPanel({
-
-}) {
+export default function TrialBalanceSheetHeaderGeneralPanel({}) {
   return (
     <div>
       <FinancialStatementDateRange />
-      <FinancialStatementsFilter initialSelectedItem={'with-transactions'} />
+
+      <Row>
+        <Col xs={4}>
+          <FinancialStatementsFilter
+            initialSelectedItem={'with-transactions'}
+          />
+        </Col>
+      </Row>
       <RadiosAccountingBasis />
     </div>
   );
diff --git a/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneralContent.js b/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneralContent.js
index f1f824797..a8d033fd5 100644
--- a/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneralContent.js
+++ b/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneralContent.js
@@ -74,14 +74,18 @@ export default function VendorsBalanceSummaryHeaderGeneralContent() {
         </Col>
       </Row>
 
-      <FinancialStatementsFilter
-        items={filterVendorsOptions}
-        label={<T id={'vendors.label_filter_vendors'} />}
-        initialSelectedItem={'with-transactions'}
-      />
+      <Row>
+        <Col xs={5}>
+          <FinancialStatementsFilter
+            items={filterVendorsOptions}
+            label={<T id={'vendors.label_filter_vendors'} />}
+            initialSelectedItem={'with-transactions'}
+          />
+        </Col>
+      </Row>
 
       <Row>
-        <Col xs={4}>
+        <Col xs={5}>
           <Field name={'vendorsIds'}>
             {({ form: { setFieldValue } }) => (
               <FormGroup
diff --git a/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeaderGeneralPanel.js b/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeaderGeneralPanel.js
index 94c8b578d..e378a6ce7 100644
--- a/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeaderGeneralPanel.js
+++ b/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeaderGeneralPanel.js
@@ -39,13 +39,19 @@ function VendorsTransactionsHeaderGeneralPanelContent() {
   return (
     <div>
       <FinancialStatementDateRange />
-      <FinancialStatementsFilter
-        items={filterVendorsOptions}
-        label={<T id={'vendors.label_filter_vendors'} />}
-        initialSelectedItem={'all-vendors'}
-      />
+
       <Row>
-        <Col xs={5}>
+        <Col xs={4}>
+          <FinancialStatementsFilter
+            items={filterVendorsOptions}
+            label={<T id={'vendors.label_filter_vendors'} />}
+            initialSelectedItem={'all-vendors'}
+          />
+        </Col>
+      </Row>
+
+      <Row>
+        <Col xs={4}>
           <Field name={'vendorsIds'}>
             {({ form: { setFieldValue }, field: { value } }) => (
               <FormGroup
diff --git a/src/containers/FinancialStatements/common.js b/src/containers/FinancialStatements/common.js
index 54e7a4729..eb01d2db7 100644
--- a/src/containers/FinancialStatements/common.js
+++ b/src/containers/FinancialStatements/common.js
@@ -37,7 +37,7 @@ export const transformAccountsFilter = (form) => {
  */
 export const transformFilterFormToQuery = (form) => {
   return R.compose(
-    flatten,
+    R.curry(flatten)({ safe: true }),
     transfromToSnakeCase,
     transformAccountsFilter,
     transformDisplayColumnsType,
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index 2003d8ea8..ee1901346 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1345,7 +1345,7 @@
   "filter.value": "Value",
   "payment_made.empty_status.title": "The organization doesn't pay to vendors, yet!",
   "estimate.delete.error.estimate_converted_to_invoice": "Could not delete sale estimate that converted to invoice",
-  "items.option.only_active": "Only active",
+  "items.option.only_active": "Items only active",
   "items.option_all_items.hint": "All items, including that ones have zero-balance.",
   "items.option_with_transactions": "Items with transactions",
   "items.option_without_zero_balance": "Items without zero-balance",
@@ -1406,5 +1406,19 @@
   "cash_flow_money_in": "Money In",
   "cash_flow_money_out": "Money Out",
   "cash_flow_transaction.switch_item": "Transactions {value}",
-  "cash_flow_transaction.balance_in_bigcapital": "Balance in Bigcapital"
+  "cash_flow_transaction.balance_in_bigcapital": "Balance in Bigcapital",
+
+  "AR_aging_summary.filter_customers.all_customers": "All customers",
+  "AR_aging_summary.filter_customers.all_customers.hint": "All customers, include that ones have zero-balance.",
+  "AR_aging_summary.filter_customers.without_zero_balance": "Customers without zero balance",
+  "AR_aging_summary.filter_customers.without_zero_balance.hint": "Include customers that onces have transactions on the given date period only.",
+  "AR_aging_summary.filter_options.label": "Filter customers",
+  "AP_aging_summary.filter_vendors.all_vendors": "All vendors",
+  "AP_aging_summary.filter_vendors.all_vendors.hint": "All vendors, include that onces have zero-balance.",
+  "AP_aging_summary.filter_vendors.without_zero_balance": "Vendors without zero balance",
+  "AP_aging_summary.filter_vendors.without_zero_balance.hint": "Include vendors that onces have transactions on the given date period only.",
+  "AP_aging_summary.filter_options.label": "Filter vendors",
+  "item.error.type_cannot_change_with_item_has_transactions": "Cannot change item type to inventory with item has associated transactions.",
+  "item.error.cannot_change_inventory_account": "Cannot change item inventory account while the item has transactions.",
+  "customer.link.customer_details": "Customer details ({amount})"
 }
\ No newline at end of file
diff --git a/src/style/pages/FinancialStatements/ARAgingSummary.scss b/src/style/pages/FinancialStatements/ARAgingSummary.scss
index 2bb2d6f5f..584ebd775 100644
--- a/src/style/pages/FinancialStatements/ARAgingSummary.scss
+++ b/src/style/pages/FinancialStatements/ARAgingSummary.scss
@@ -42,7 +42,7 @@
 
   .financial-header-drawer{
     .bp3-drawer{
-      max-height: 450px;
+      max-height: 550px;
     }
   }
 }
\ No newline at end of file
diff --git a/src/style/pages/FinancialStatements/ContactsTransactions.scss b/src/style/pages/FinancialStatements/ContactsTransactions.scss
index 74774d49e..507a8d374 100644
--- a/src/style/pages/FinancialStatements/ContactsTransactions.scss
+++ b/src/style/pages/FinancialStatements/ContactsTransactions.scss
@@ -84,8 +84,7 @@
 .financial-statement--transactions {
   .financial-header-drawer {
     .bp3-drawer {
-      // max-height: 350px;
-      max-height: 415px;
+      max-height: 450px;
     }
   }
 }
diff --git a/src/style/pages/FinancialStatements/SalesAndPurchasesSheet.scss b/src/style/pages/FinancialStatements/SalesAndPurchasesSheet.scss
index 9e1c57d46..c968fd11d 100644
--- a/src/style/pages/FinancialStatements/SalesAndPurchasesSheet.scss
+++ b/src/style/pages/FinancialStatements/SalesAndPurchasesSheet.scss
@@ -33,7 +33,7 @@
   .financial-header-drawer {
     .bp3-drawer {
       // max-height: 400px;
-      max-height: 415px;
+      max-height: 450px;
     }
   }
 }
@@ -41,7 +41,7 @@
 .financial-statement--inventory-valuation {
   .financial-header-drawer {
     .bp3-drawer {
-      max-height: 350px;
+      max-height: 400px;
     }
   }
 }