From 3a7f8a4512c06b01e284673a33f05b71e1b9f362 Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Sun, 25 Jul 2021 03:59:02 +0200
Subject: [PATCH] fix: Filter financial reports by items, customers or vendors.

---
 client/src/components/ContactsMultiSelect.js  |  60 ++---
 client/src/components/FinancialStatement.js   |  13 +-
 .../src/components/Items/ItemsMultiSelect.js  |  77 +++++++
 client/src/components/Items/index.js          |   1 +
 client/src/components/MultiSelect.js          | 214 +++++++++---------
 client/src/components/index.js                |   3 +
 .../APAgingSummary/APAgingSummary.js          |   3 +-
 .../APAgingSummary/APAgingSummaryHeader.js    |  36 +--
 .../APAgingSummaryHeaderGeneral.js            |  38 +++-
 .../ARAgingSummary/ARAgingSummary.js          |   5 +-
 .../ARAgingSummary/ARAgingSummaryHeader.js    |  17 +-
 .../ARAgingSummaryHeaderGeneral.js            |  26 ++-
 .../BalanceSheet/BalanceSheetHeader.js        |  33 +--
 .../CashFlowStatementHeader.js                |  18 +-
 .../CustomersBalanceSummaryGeneralPanel.js    |  44 +++-
 .../CustomersBalanceSummaryHeader.js          |  15 +-
 .../CustomersBalanceSummaryProvider.js        |  15 +-
 .../CustomersTransactionsHeader.js            |  21 +-
 ...CustomersTransactionsHeaderGeneralPanel.js |  32 +++
 .../CustomersTransactionsProvider.js          |  14 +-
 .../GeneralLedger/GeneralLedgerHeader.js      |  21 +-
 .../InventoryItemDetails.js                   |  10 +-
 .../InventoryItemDetailsHeader.js             |  23 +-
 .../InventoryItemDetailsHeaderGeneralPanel.js |  33 +++
 .../InventoryItemDetailsProvider.js           |  16 +-
 .../InventoryValuation/InventoryValuation.js  |   2 +-
 .../InventoryValuationHeader.js               |  20 +-
 .../InventoryValuationHeaderGeneralPanel.js   |  37 ++-
 .../InventoryValuationProvider.js             |  14 +-
 .../PurchasesByItems/PurchasesByItems.js      |   2 +-
 .../PurchasesByItemsGeneralPanel.js           |  34 +++
 .../PurchasesByItemsHeader.js                 |  26 ++-
 .../PurchasesByItemsProvider.js               |  17 +-
 .../SalesByItems/SalesByItemProvider.js       |  14 +-
 .../SalesByItems/SalesByItems.js              |   2 +-
 .../SalesByItemsHeaderGeneralPanel.js         |  32 +++
 .../TrialBalanceSheetHeader.js                |  35 ++-
 .../VendorsBalanceSummaryHeader.js            |  11 +-
 .../VendorsBalanceSummaryHeaderGeneral.js     |  34 ++-
 .../VendorsBalanceSummaryProvider.js          |  16 +-
 .../VendorsTransactionsHeader.js              |  19 +-
 .../VendorsTransactionsHeaderGeneralPanel.js  |  29 +++
 .../VendorsTransactionsProvider.js            |  15 +-
 .../containers/FinancialStatements/common.js  |   2 +-
 client/src/lang/en/index.json                 |   9 +-
 .../FinancialStatements/ARAgingSummary.scss   |   9 +
 .../SalesAndPurchasesSheet.scss               |  20 ++
 client/src/utils.js                           |  11 +-
 .../CustomerBalanceSummary/index.ts           |   7 +
 .../InventoryDetails/index.ts                 |   4 +
 .../InventoryValuationSheet.ts                |   4 +
 .../FinancialStatements/PurchasesByItem.ts    |   6 +
 .../FinancialStatements/SalesByItems.ts       |   4 +
 .../TransactionsByCustomers/index.ts          |  23 +-
 .../TransactionsByVendors/index.ts            |  16 +-
 .../VendorBalanceSummary/index.ts             |   4 +
 .../interfaces/IInventoryValuationSheet.ts    |   1 +
 server/src/interfaces/InventoryDetails.ts     |   1 +
 server/src/interfaces/SalesByItemsSheet.ts    |   1 +
 .../src/interfaces/TransactionsByCustomers.ts |   4 +-
 .../src/interfaces/TransactionsByVendors.ts   |   4 +-
 .../AgingSummary/ARAgingSummaryService.ts     |   2 +-
 .../InventoryDetailsRepository.ts             |  11 +-
 .../InventoryDetailsService.ts                |   7 +-
 .../InventoryValuationSheetService.ts         |  13 +-
 .../PurchasesByItemsService.ts                |   9 +-
 .../SalesByItems/SalesByItemsService.ts       |  10 +-
 .../TransactionsByCustomersRepository.ts      |  12 +-
 .../TransactionsByCustomersService.ts         |   4 +-
 .../TransactionsByVendorRepository.ts         |  17 +-
 .../TransactionsByVendorService.ts            |   9 +-
 71 files changed, 1021 insertions(+), 350 deletions(-)
 create mode 100644 client/src/components/Items/ItemsMultiSelect.js
 create mode 100644 client/src/components/Items/index.js

diff --git a/client/src/components/ContactsMultiSelect.js b/client/src/components/ContactsMultiSelect.js
index 5c8171294..75755ab9a 100644
--- a/client/src/components/ContactsMultiSelect.js
+++ b/client/src/components/ContactsMultiSelect.js
@@ -1,58 +1,57 @@
-import React, { useMemo, useCallback, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { MenuItem, Button } from '@blueprintjs/core';
-import { omit } from 'lodash';
+import intl from 'react-intl-universal';
 import MultiSelect from 'components/MultiSelect';
 import { FormattedMessage as T } from 'components';
-import intl from 'react-intl-universal';
+import { safeInvoke } from 'utils';
 
+/**
+ * Contacts multi-select component.
+ */
 export default function ContactsMultiSelect({
   contacts,
   defaultText = <T id={'all_customers'} />,
   buttonProps,
 
-  onCustomerSelected: onContactSelected,
-  ...selectProps
+  onContactSelect,
+  contactsSelected = [],
+  ...multiSelectProps
 }) {
-  const [selectedContacts, setSelectedContacts] = useState({});
+  const [localSelected, setLocalSelected] = useState([ ...contactsSelected]);
 
-  const isContactSelect = useCallback(
-    (id) => typeof selectedContacts[id] !== 'undefined',
-    [selectedContacts],
+  // Detarmines the given id is selected.
+  const isItemSelected = useCallback(
+    (id) => localSelected.some(s => s === id),
+    [localSelected],
   );
 
+  // Contact item renderer.
   const contactRenderer = useCallback(
     (contact, { handleClick }) => (
       <MenuItem
-        icon={isContactSelect(contact.id) ? 'tick' : 'blank'}
+        icon={isItemSelected(contact.id) ? 'tick' : 'blank'}
         text={contact.display_name}
         key={contact.id}
         onClick={handleClick}
       />
     ),
-    [isContactSelect],
+    [isItemSelected],
   );
 
-  const countSelected = useMemo(
-    () => Object.values(selectedContacts).length,
-    [selectedContacts],
-  );
+  // Count selected items.
+  const countSelected = localSelected.length;
 
-  const onContactSelect = useCallback(
+  // Handle item selected.
+  const handleItemSelect = useCallback(
     ({ id }) => {
-      const selected = {
-        ...(isContactSelect(id)
-          ? {
-              ...omit(selectedContacts, [id]),
-            }
-          : {
-              ...selectedContacts,
-              [id]: true,
-            }),
-      };
-      setSelectedContacts({ ...selected });
-      onContactSelected && onContactSelected(selected);
+      const selected = isItemSelected(id)
+        ? localSelected.filter(s => s !== id)
+        : [...localSelected, id];
+      
+      setLocalSelected([ ...selected ]);
+      safeInvoke(onContactSelect, selected);
     },
-    [setSelectedContacts, selectedContacts, isContactSelect, onContactSelected],
+    [setLocalSelected, localSelected, isItemSelected, onContactSelect],
   );
 
   return (
@@ -62,7 +61,8 @@ export default function ContactsMultiSelect({
       itemRenderer={contactRenderer}
       popoverProps={{ minimal: true }}
       filterable={true}
-      onItemSelect={onContactSelect}
+      onItemSelect={handleItemSelect}
+      {...multiSelectProps}
     >
       <Button
         text={
diff --git a/client/src/components/FinancialStatement.js b/client/src/components/FinancialStatement.js
index 057493dd3..1f98e34f5 100644
--- a/client/src/components/FinancialStatement.js
+++ b/client/src/components/FinancialStatement.js
@@ -1,6 +1,15 @@
 import React from 'react';
+import className from 'classnames';
 import 'style/containers/FinancialStatements/FinancialSheet.scss';
 
-export default function FinancialStatements({ children }) {
-  return <div class="financial-statement">{children}</div>;
+export default function FinancialStatements({ name, children }) {
+  return (
+    <div
+      className={className('financial-statement', {
+        [`financial-statement--${name}`]: name,
+      })}
+    >
+      {children}
+    </div>
+  );
 }
diff --git a/client/src/components/Items/ItemsMultiSelect.js b/client/src/components/Items/ItemsMultiSelect.js
new file mode 100644
index 000000000..ba7e868bb
--- /dev/null
+++ b/client/src/components/Items/ItemsMultiSelect.js
@@ -0,0 +1,77 @@
+import React, { useCallback, useState } from 'react';
+import { MenuItem, Button } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import MultiSelect from 'components/MultiSelect';
+import { FormattedMessage as T } from 'components';
+import { safeInvoke } from 'utils';
+
+/**
+ * Items multi-select.
+ */
+export function ItemsMultiSelect({
+  items,
+  defaultText = <T id={'All items'} />,
+  buttonProps,
+
+  selectedItems = [],
+  onItemSelect,
+  ...multiSelectProps
+}) {
+  const [localSelected, setLocalSelected] = useState([...selectedItems]);
+
+  // Detarmines the given id is selected.
+  const isItemSelected = useCallback(
+    (id) => localSelected.some((s) => s === id),
+    [localSelected],
+  );
+
+  // Contact item renderer.
+  const itemRenderer = useCallback(
+    (item, { handleClick }) => (
+      <MenuItem
+        icon={isItemSelected(item.id) ? 'tick' : 'blank'}
+        text={item.name}
+        key={item.id}
+        onClick={handleClick}
+      />
+    ),
+    [isItemSelected],
+  );
+
+  // Count selected items.
+  const countSelected = localSelected.length;
+
+  // Handle item selected.
+  const handleItemSelect = useCallback(
+    ({ id }) => {
+      const selected = isItemSelected(id)
+        ? localSelected.filter((s) => s !== id)
+        : [...localSelected, id];
+
+      setLocalSelected([...selected]);
+      safeInvoke(onItemSelect, selected);
+    },
+    [setLocalSelected, localSelected, isItemSelected, onItemSelect],
+  );
+
+  return (
+    <MultiSelect
+      items={items}
+      noResults={<MenuItem disabled={true} text={<T id={'No items'} />} />}
+      itemRenderer={itemRenderer}
+      popoverProps={{ minimal: true }}
+      filterable={true}
+      onItemSelect={handleItemSelect}
+      {...multiSelectProps}
+    >
+      <Button
+        text={
+          countSelected === 0
+            ? defaultText
+            : intl.get('Selected items ({count})', { count: countSelected })
+        }
+        {...buttonProps}
+      />
+    </MultiSelect>
+  );
+}
diff --git a/client/src/components/Items/index.js b/client/src/components/Items/index.js
new file mode 100644
index 000000000..de941fefa
--- /dev/null
+++ b/client/src/components/Items/index.js
@@ -0,0 +1 @@
+export * from './ItemsMultiSelect';
\ No newline at end of file
diff --git a/client/src/components/MultiSelect.js b/client/src/components/MultiSelect.js
index efa28e8a9..e4ac441dd 100644
--- a/client/src/components/MultiSelect.js
+++ b/client/src/components/MultiSelect.js
@@ -13,18 +13,16 @@
  * limitations under the License.
  */
 
-import classNames from "classnames";
-import * as React from "react";
+import classNames from 'classnames';
+import * as React from 'react';
 import {
   Classes,
   DISPLAYNAME_PREFIX,
   Popover,
   Position,
   Utils,
-} from "@blueprintjs/core";
-import {
-  QueryList,
-} from '@blueprintjs/select';
+} from '@blueprintjs/core';
+import { QueryList } from '@blueprintjs/select';
 
 // export interface IMultiSelectProps<T> extends IListItemsProps<T> {
 //     /**
@@ -63,114 +61,124 @@ import {
 // }
 
 export default class MultiSelect extends React.Component {
-    static get displayName() {
-      return `${DISPLAYNAME_PREFIX}.MultiSelect`;
-    }
+  static get displayName() {
+    return `${DISPLAYNAME_PREFIX}.MultiSelect`;
+  }
 
-    static get defaultProps()  {
-      return {
-        fill: false,
-        placeholder: "Search...",
-      };
+  static get defaultProps() {
+    return {
+      fill: false,
+      placeholder: 'Search...',
     };
+  }
 
-    constructor(props) {
-      super(props);
+  constructor(props) {
+    super(props);
 
-      this.state = { isOpen: (this.props.popoverProps && this.props.popoverProps.isOpen) || false };
-      this.input = null;
-      this.queryList = null;
-      this.listRef = React.createRef();
+    this.state = {
+      isOpen:
+        (this.props.popoverProps && this.props.popoverProps.isOpen) || false,
+    };
+    this.input = null;
+    this.queryList = null;
+    this.listRef = React.createRef();
 
-      this.refHandlers = {
-        queryList: (ref) => {
-          this.queryList = ref;
-        },
-      };
+    this.refHandlers = {
+      queryList: (ref) => {
+        this.queryList = ref;
+      },
+    };
+  }
+
+  render() {
+    // omit props specific to this component, spread the rest.
+    const { openOnKeyDown, popoverProps, tagInputProps, ...restProps } =
+      this.props;
+
+    return (
+      <QueryList
+        {...restProps}
+        onItemSelect={this.handleItemSelect.bind(this)}
+        onQueryChange={this.handleQueryChange.bind(this)}
+        ref={this.refHandlers.queryList}
+        renderer={this.renderQueryList.bind(this)}
+      />
+    );
+  }
+
+  renderQueryList(listProps) {
+    const { fill, tagInputProps = {}, popoverProps = {} } = this.props;
+    const { handleKeyDown, handleKeyUp } = listProps;
+
+    if (fill) {
+      popoverProps.fill = true;
+      tagInputProps.fill = true;
     }
 
-    render() {
-      // omit props specific to this component, spread the rest.
-      const { openOnKeyDown, popoverProps, tagInputProps, ...restProps } = this.props;
-      
-      return (
-        <QueryList
-          {...restProps}
-          onItemSelect={this.handleItemSelect.bind(this)}
-          onQueryChange={this.handleQueryChange.bind(this)}
-          ref={this.refHandlers.queryList}
-          renderer={this.renderQueryList.bind(this)}
-        />
-      );
-    }
+    // add our own inputProps.className so that we can reference it in event handlers
+    const { inputProps = {} } = tagInputProps;
+    inputProps.className = classNames(
+      inputProps.className,
+      Classes.MULTISELECT_TAG_INPUT_INPUT,
+    );
 
-    renderQueryList(listProps) {
-      const { fill, tagInputProps = {}, popoverProps = {} } = this.props;
-      const { handleKeyDown, handleKeyUp } = listProps;
-
-      if (fill) {
-        popoverProps.fill = true;
-        tagInputProps.fill = true;
-      }
-
-      // add our own inputProps.className so that we can reference it in event handlers
-      const { inputProps = {} } = tagInputProps;
-      inputProps.className = classNames(inputProps.className, Classes.MULTISELECT_TAG_INPUT_INPUT);
-
-      return (
-        <Popover
-          autoFocus={false}
-          canEscapeKeyClose={true}
-          enforceFocus={false}
-          isOpen={this.state.isOpen}
-          position={Position.BOTTOM_LEFT}
-          {...popoverProps}
-          className={classNames(listProps.className, popoverProps.className)}
-          onInteraction={this.handlePopoverInteraction.bind(this)}
-          popoverClassName={classNames(Classes.MULTISELECT_POPOVER, popoverProps.popoverClassName)}
-          onOpened={this.handlePopoverOpened.bind(this)}
+    return (
+      <Popover
+        autoFocus={false}
+        canEscapeKeyClose={true}
+        enforceFocus={false}
+        isOpen={this.state.isOpen}
+        position={Position.BOTTOM_LEFT}
+        {...popoverProps}
+        className={classNames(listProps.className, popoverProps.className)}
+        onInteraction={this.handlePopoverInteraction.bind(this)}
+        popoverClassName={classNames(
+          Classes.MULTISELECT_POPOVER,
+          popoverProps.popoverClassName,
+        )}
+        onOpened={this.handlePopoverOpened.bind(this)}
+      >
+        <div
+          onKeyDown={
+            this.state.isOpen ? handleKeyDown : this.handleTargetKeyDown
+          }
+          onKeyUp={this.state.isOpen ? handleKeyUp : undefined}
         >
-          <div
-            onKeyDown={this.state.isOpen ? handleKeyDown : this.handleTargetKeyDown}
-            onKeyUp={this.state.isOpen ? handleKeyUp : undefined}
-          >
-            {this.props.children}
-          </div>
-          <div onKeyDown={handleKeyDown} onKeyUp={handleKeyUp} ref={this.listRef}>
-            {listProps.itemList}
-          </div>
-        </Popover>
-      );
-    };
+          {this.props.children}
+        </div>
+        <div onKeyDown={handleKeyDown} onKeyUp={handleKeyUp} ref={this.listRef}>
+          {listProps.itemList}
+        </div>
+      </Popover>
+    );
+  }
 
-    handleItemSelect(item, evt) {
-      if (this.input != null) {
-        this.input.focus();
-      }
-      Utils.safeInvoke(this.props.onItemSelect, item, evt);
-    };
-
-    handleQueryChange(query, evt) {
-      this.setState({ isOpen: query.length > 0 || !this.props.openOnKeyDown });
-      Utils.safeInvoke(this.props.onQueryChange, query, evt);
-    };
-
-    handlePopoverInteraction = (isOpen, e) => {
-      if (e && this.listRef.current && this.listRef.current.contains(e.target)) {
-        this.setState({ isOpen: true })
-      } else {
-        this.setState({ isOpen });
-      }
-      Utils.safeInvokeMember(this.props.popoverProps, "onInteraction", isOpen);
+  handleItemSelect(item, evt) {
+    if (this.input != null) {
+      this.input.focus();
     }
-    
+    Utils.safeInvoke(this.props.onItemSelect, item, evt);
+  }
 
-    handlePopoverOpened(node) {
-      if (this.queryList != null) {
-        // scroll active item into view after popover transition completes and all dimensions are stable.
-        this.queryList.scrollActiveItemIntoView();
-      }
-      Utils.safeInvokeMember(this.props.popoverProps, "onOpened", node);
-    };
+  handleQueryChange(query, evt) {
+    this.setState({ isOpen: query.length > 0 || !this.props.openOnKeyDown });
+    Utils.safeInvoke(this.props.onQueryChange, query, evt);
+  }
 
+  handlePopoverInteraction = (isOpen, e) => {
+    if (e && this.listRef.current && this.listRef.current.contains(e.target)) {
+      this.setState({ isOpen: true });
+    } else {
+      this.setState({ isOpen });
+    }
+    Utils.safeInvokeMember(this.props.popoverProps, 'onInteraction', isOpen);
+  };
+
+  handlePopoverOpened(node) {
+    if (this.queryList != null) {
+      // scroll active item into view after popover transition completes and all dimensions are stable.
+      this.queryList.scrollActiveItemIntoView();
+    }
+    Utils.safeInvokeMember(this.props.popoverProps, 'onOpened', node);
+  }
 }
diff --git a/client/src/components/index.js b/client/src/components/index.js
index 8567a384b..fa0d566b7 100644
--- a/client/src/components/index.js
+++ b/client/src/components/index.js
@@ -58,6 +58,8 @@ import AccountsSuggestField from './AccountsSuggestField';
 import MaterialProgressBar from './MaterialProgressBar';
 import { MoneyFieldCell } from './DataTableCells';
 
+import { ItemsMultiSelect } from './Items';
+
 const Hint = FieldHint;
 
 const T = FormattedMessage;
@@ -125,4 +127,5 @@ export {
   AccountsSuggestField,
   MaterialProgressBar,
   MoneyFieldCell,
+  ItemsMultiSelect
 };
diff --git a/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummary.js b/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummary.js
index 20b2dba0c..0f281a38d 100644
--- a/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummary.js
+++ b/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummary.js
@@ -30,6 +30,7 @@ function APAgingSummary({
     asDate: moment().endOf('day').format('YYYY-MM-DD'),
     agingBeforeDays: 30,
     agingPeriods: 3,
+    vendorsIds: [],
   });
 
   // Handle filter submit.
@@ -63,7 +64,7 @@ function APAgingSummary({
       <APAgingSummarySheetLoadingBar />
 
       <DashboardPageContent>
-        <FinancialStatement>
+        <FinancialStatement name={'AP-aging-summary'}>
           <APAgingSummaryHeader
             pageFilter={filter}
             onSubmitFilter={handleFilterSubmit}
diff --git a/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.js b/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.js
index 363014256..db18b257a 100644
--- a/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.js
+++ b/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.js
@@ -12,6 +12,7 @@ import withAPAgingSummary from './withAPAgingSummary';
 import withAPAgingSummaryActions from './withAPAgingSummaryActions';
 
 import { compose } from 'utils';
+import { transformToForm } from '../../../utils';
 
 /**
  * AP Aging Summary Report - Drawer Header.
@@ -25,16 +26,17 @@ function APAgingSummaryHeader({
   toggleAPAgingSummaryFilterDrawer: toggleFilterDrawerDisplay,
 
   // #withAPAgingSummary
-  isFilterDrawerOpen
+  isFilterDrawerOpen,
 }) {
+  // Validation schema.
   const validationSchema = Yup.object({
-    as_date: Yup.date().required().label('asDate'),
-    aging_days_before: Yup.number()
+    asDate: Yup.date().required().label('asDate'),
+    agingDaysBefore: Yup.number()
       .required()
       .integer()
       .positive()
       .label('agingBeforeDays'),
-    aging_periods: Yup.number()
+    agingPeriods: Yup.number()
       .required()
       .integer()
       .positive()
@@ -42,11 +44,14 @@ function APAgingSummaryHeader({
   });
 
   // Initial values.
-  const initialValues = {
-    as_date: moment(pageFilter.asDate).toDate(),
-    aging_days_before: 30,
-    aging_periods: 3,
+  const defaultValues = {
+    asDate: moment(pageFilter.asDate).toDate(),
+    agingDaysBefore: 30,
+    agingPeriods: 3,
+    vendorsIds: [],
   };
+  // Formik initial values.
+  const initialValues = transformToForm(pageFilter, defaultValues);
 
   // Handle form submit.
   const handleSubmit = (values, { setSubmitting }) => {
@@ -55,18 +60,17 @@ function APAgingSummaryHeader({
     setSubmitting(false);
   };
 
-  // handle cancel button click.
-  const handleCancelClick = () => {
-    toggleFilterDrawerDisplay(false);
-  };
+  // Handle cancel button click.
+  const handleCancelClick = () => { toggleFilterDrawerDisplay(false); };
 
   // Handle the drawer closing.
-  const handleDrawerClose = () => {
-    toggleFilterDrawerDisplay(false);
-  };
+  const handleDrawerClose = () => { toggleFilterDrawerDisplay(false); };
 
   return (
-    <FinancialStatementHeader isOpen={isFilterDrawerOpen} drawerProps={{ onClose: handleDrawerClose }}>
+    <FinancialStatementHeader
+      isOpen={isFilterDrawerOpen}
+      drawerProps={{ onClose: handleDrawerClose }}
+    >
       <Formik
         initialValues={initialValues}
         validationSchema={validationSchema}
diff --git a/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderGeneral.js b/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderGeneral.js
index 9f065d3fc..4c6b0e501 100644
--- a/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderGeneral.js
+++ b/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderGeneral.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { FastField } from 'formik';
+import { FastField, Field } from 'formik';
 import { DateInput } from '@blueprintjs/datetime';
 import {
   Intent,
@@ -51,9 +51,10 @@ export default function APAgingSummaryHeaderGeneral() {
           </FastField>
         </Col>
       </Row>
+
       <Row>
         <Col xs={5}>
-          <FastField name={'aging_days_before'}>
+          <FastField name={'agingDaysBefore'}>
             {({ field, meta: { error } }) => (
               <FormGroup
                 label={<T id={'aging_before_days'} />}
@@ -66,9 +67,10 @@ export default function APAgingSummaryHeaderGeneral() {
           </FastField>
         </Col>
       </Row>
+
       <Row>
         <Col xs={5}>
-          <FastField name={'aging_periods'}>
+          <FastField name={'agingPeriods'}>
             {({ field, meta: { error } }) => (
               <FormGroup
                 label={<T id={'aging_periods'} />}
@@ -81,17 +83,29 @@ export default function APAgingSummaryHeaderGeneral() {
           </FastField>
         </Col>
       </Row>
+
       <Row>
         <Col xs={5}>
-          <FormGroup
-            label={<T id={'specific_vendors'} />}
-            className={classNames('form-group--select-list', Classes.FILL)}
-          >
-            <ContactsMultiSelect
-              defaultText={<T id={'all_vendors'} />}
-              contacts={vendors}
-            />
-          </FormGroup>
+          <Field name={'vendorsIds'}>
+            {({
+              form: { setFieldValue },
+              field: { value },
+            }) => (
+              <FormGroup
+                label={<T id={'specific_vendors'} />}
+                className={classNames('form-group--select-list', Classes.FILL)}
+              >
+                <ContactsMultiSelect
+                  defaultText={<T id={'all_vendors'} />}
+                  contacts={vendors}
+                  contactsSelected={value}
+                  onContactSelect={(contactsIds) => {
+                    setFieldValue('vendorsIds', contactsIds);
+                  }}
+                />
+              </FormGroup>
+            )}
+          </Field>
         </Col>
       </Row>
     </div>
diff --git a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.js b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.js
index 3f069c2e8..0a112eb49 100644
--- a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.js
+++ b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.js
@@ -18,7 +18,7 @@ import withSettings from 'containers/Settings/withSettings';
 import { compose } from 'utils';
 
 /**
- * AR aging summary report.
+ * A/R aging summary report.
  */
 function ReceivableAgingSummarySheet({
   // #withSettings
@@ -31,6 +31,7 @@ function ReceivableAgingSummarySheet({
     asDate: moment().endOf('day').format('YYYY-MM-DD'),
     agingDaysBefore: 30,
     agingPeriods: 3,
+    customersIds: [],
   });
 
   // Handle filter submit.
@@ -61,7 +62,7 @@ function ReceivableAgingSummarySheet({
       <ARAgingSummarySheetLoadingBar />
 
       <DashboardPageContent>
-        <FinancialStatement>
+        <FinancialStatement name={'AR-aging-summary'}>
           <ARAgingSummaryHeader
             pageFilter={filter}
             onSubmitFilter={handleFilterSubmit}
diff --git a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.js b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.js
index 03ab11063..e7850b86f 100644
--- a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.js
+++ b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.js
@@ -11,7 +11,7 @@ import ARAgingSummaryHeaderGeneral from './ARAgingSummaryHeaderGeneral';
 import withARAgingSummary from './withARAgingSummary';
 import withARAgingSummaryActions from './withARAgingSummaryActions';
 
-import { compose } from 'utils';
+import { compose, transformToForm } from 'utils';
 
 /**
  * AR Aging Summary Report - Drawer Header.
@@ -41,11 +41,20 @@ function ARAgingSummaryHeader({
       .label('agingPeriods'),
   });
   // Initial values.
-  const initialValues = {
-    asDate: moment(pageFilter.asDate).toDate(),
+  const defaultValues = {
+    asDate: moment().toDate(),
     agingDaysBefore: 30,
     agingPeriods: 3,
+    customersIds: [],
   };
+  // Initial values.
+  const initialValues = transformToForm(
+    {
+      ...pageFilter,
+      asDate: moment(pageFilter.asDate).toDate(),
+    },
+    defaultValues,
+  );
 
   // Handle form submit.
   const handleSubmit = (values, { setSubmitting }) => {
@@ -58,7 +67,7 @@ function ARAgingSummaryHeader({
   const handleCancelClick = () => {
     toggleFilterDrawerDisplay(false);
   };
- 
+
   // Handle the drawer close.
   const handleDrawerClose = () => {
     toggleFilterDrawerDisplay(false);
diff --git a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneral.js b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneral.js
index f604b6693..a77bbdb71 100644
--- a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneral.js
+++ b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneral.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { FastField } from 'formik';
+import { FastField, Field } from 'formik';
 import { DateInput } from '@blueprintjs/datetime';
 import {
   Intent,
@@ -93,14 +93,24 @@ export default function ARAgingSummaryHeaderGeneral() {
       </Row>
       <Row>
         <Col xs={5}>
-          <FormGroup
-            label={<T id={'specific_customers'} />}
-            className={classNames('form-group--select-list', Classes.FILL)}
-          >
-            <ContactsMultiSelect contacts={customers} />
-          </FormGroup>
+          <Field name="customersIds">
+            {({ form: { setFieldValue }, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'specific_customers'} />}
+                className={classNames('form-group--select-list', Classes.FILL)}
+              >
+                <ContactsMultiSelect
+                  contacts={customers}
+                  contactsSelected={value}
+                  onContactSelect={(contactsIds) => {
+                    setFieldValue('customersIds', contactsIds);
+                  }}
+                />
+              </FormGroup>
+            )}
+          </Field>
         </Col>
       </Row>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js
index 30474ddc4..066f5c66b 100644
--- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js
+++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js
@@ -11,7 +11,7 @@ import FinancialStatementHeader from 'containers/FinancialStatements/FinancialSt
 import withBalanceSheet from './withBalanceSheet';
 import withBalanceSheetActions from './withBalanceSheetActions';
 
-import { compose } from 'utils';
+import { compose, transformToForm } from 'utils';
 import BalanceSheetHeaderGeneralPanal from './BalanceSheetHeaderGeneralPanal';
 
 /**
@@ -28,20 +28,25 @@ function BalanceSheetHeader({
   // #withBalanceSheetActions
   toggleBalanceSheetFilterDrawer: toggleFilterDrawer,
 }) {
-  // Filter form initial values.
-  const initialValues = {
-    basis: 'cash',
-    ...pageFilter,
-    fromDate: moment(pageFilter.fromDate).toDate(),
-    toDate: moment(pageFilter.toDate).toDate(),
+  const defaultValues = {
+    basic: 'cash',
+    fromDate: moment().toDate(),
+    toDate: moment().toDate(),
   };
+  // Filter form initial values.
+  const initialValues = transformToForm(
+    {
+      ...pageFilter,
+      fromDate: moment(pageFilter.fromDate).toDate(),
+      toDate: moment(pageFilter.toDate).toDate(),
+    },
+    defaultValues,
+  );
 
   // Validation schema.
   const validationSchema = Yup.object().shape({
     dateRange: Yup.string().optional(),
-    fromDate: Yup.date()
-      .required()
-      .label(intl.get('fromDate')),
+    fromDate: Yup.date().required().label(intl.get('fromDate')),
     toDate: Yup.date()
       .min(Yup.ref('fromDate'))
       .required()
@@ -58,14 +63,10 @@ function BalanceSheetHeader({
   };
 
   // Handle cancel button click.
-  const handleCancelClick = () => {
-    toggleFilterDrawer(false);
-  };
+  const handleCancelClick = () => { toggleFilterDrawer(false); };
 
   // Handle drawer close action.
-  const handleDrawerClose = () => {
-    toggleFilterDrawer(false);
-  };
+  const handleDrawerClose = () => { toggleFilterDrawer(false); };
 
   return (
     <FinancialStatementHeader
diff --git a/client/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementHeader.js b/client/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementHeader.js
index cd2c51066..dc07213a0 100644
--- a/client/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementHeader.js
+++ b/client/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementHeader.js
@@ -12,7 +12,7 @@ import CashFlowStatementGeneralPanel from './CashFlowStatementGeneralPanel';
 import withCashFlowStatement from './withCashFlowStatement';
 import withCashFlowStatementActions from './withCashFlowStatementActions';
 
-import { compose } from 'utils';
+import { compose, transformToForm } from 'utils';
 
 /**
  * Cash flow statement header.
@@ -22,18 +22,24 @@ function CashFlowStatementHeader({
   onSubmitFilter,
   pageFilter,
 
-  //#withCashFlowStatement
+  // #withCashFlowStatement
   isFilterDrawerOpen,
 
-  //#withCashStatementActions
+  // #withCashStatementActions
   toggleCashFlowStatementFilterDrawer,
 }) {
-  // filter form initial values.
-  const initialValues = {
+  // Filter form default values.
+  const defaultValues = {
+    fromDate: moment().toDate(),
+    toDate: moment().toDate(),
+  };
+
+  // Initial form values.
+  const initialValues = transformToForm({
     ...pageFilter,
     fromDate: moment(pageFilter.fromDate).toDate(),
     toDate: moment(pageFilter.toDate).toDate(),
-  };
+  }, defaultValues);
 
   // Validation schema.
   const validationSchema = Yup.object().shape({
diff --git a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanel.js b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanel.js
index 8b0b5c221..50ad4c264 100644
--- a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanel.js
+++ b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanel.js
@@ -1,14 +1,9 @@
 import React from 'react';
-import { FastField } from 'formik';
+import { FastField, Field } from 'formik';
 import { DateInput } from '@blueprintjs/datetime';
-import {
-  FormGroup,
-  Position,
-  Classes,
-  Checkbox,
-} from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
-
+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 {
   momentFormatter,
@@ -16,11 +11,14 @@ import {
   inputIntent,
   handleDateChange,
 } from 'utils';
+import { useCustomersBalanceSummaryContext } from './CustomersBalanceSummaryProvider';
 
 /**
  * Customers balance header - general panel.
  */
 export default function CustomersBalanceSummaryGeneralPanel() {
+  const { customers } = useCustomersBalanceSummaryContext();
+
   return (
     <div>
       <Row>
@@ -48,6 +46,7 @@ export default function CustomersBalanceSummaryGeneralPanel() {
           </FastField>
         </Col>
       </Row>
+
       <Row>
         <Col xs={5}>
           <FastField name={'percentage'} type={'checkbox'}>
@@ -57,7 +56,7 @@ export default function CustomersBalanceSummaryGeneralPanel() {
                   inline={true}
                   name={'percentage'}
                   small={true}
-                  label={<T id={'percentage_of_column'}/>}
+                  label={<T id={'percentage_of_column'} />}
                   {...field}
                 />
               </FormGroup>
@@ -65,6 +64,31 @@ export default function CustomersBalanceSummaryGeneralPanel() {
           </FastField>
         </Col>
       </Row>
+
+      <Row>
+        <Col xs={5}>
+          <Field name={'customersIds'}>
+            {({
+              form: { setFieldValue },
+              field: { value },
+              meta: { error, touched },
+            }) => (
+              <FormGroup
+                label={<T id={'Specific customers'} />}
+                className={classNames('form-group--select-list', Classes.FILL)}
+              >
+                <ContactsMultiSelect
+                  onContactSelect={(contactsIds) => {
+                    setFieldValue('customersIds', contactsIds);
+                  }}
+                  contacts={customers}
+                  contactsSelected={value}
+                />
+              </FormGroup>
+            )}
+          </Field>
+        </Col>
+      </Row>
     </div>
   );
 }
diff --git a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.js b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.js
index 64506fa20..02ed51335 100644
--- a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.js
+++ b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.js
@@ -4,14 +4,13 @@ import { Formik, Form } from 'formik';
 import moment from 'moment';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'components';
-import intl from 'react-intl-universal';
 
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import withCustomersBalanceSummary from './withCustomersBalanceSummary';
 import withCustomersBalanceSummaryActions from './withCustomersBalanceSummaryActions';
 import CustomersBalanceSummaryGeneralPanel from './CustomersBalanceSummaryGeneralPanel';
 
-import { compose } from 'utils';
+import { compose, transformToForm } from 'utils';
 
 /**
  * Customers balance summary.
@@ -33,11 +32,17 @@ function CustomersBalanceSummaryHeader({
     asDate: Yup.date().required().label('asDate'),
   });
 
-  // filter form initial values.
-  const initialValues = {
+  // Default form values.
+  const defaultValues = {
+    asDate: moment().toDate(),
+    customersIds: [],
+  };
+
+  // Filter form initial values.
+  const initialValues = transformToForm({
     ...pageFilter,
     asDate: moment(pageFilter.asDate).toDate(),
-  };
+  }, defaultValues);
 
   // handle form submit.
   const handleSubmit = (values, { setSubmitting }) => {
diff --git a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryProvider.js b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryProvider.js
index af091546f..3db7ce570 100644
--- a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryProvider.js
+++ b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryProvider.js
@@ -1,6 +1,6 @@
 import React, { createContext, useContext } from 'react';
 import FinancialReportPage from '../FinancialReportPage';
-import { useCustomerBalanceSummaryReport } from 'hooks/query';
+import { useCustomerBalanceSummaryReport, useCustomers } from 'hooks/query';
 import { transformFilterFormToQuery } from '../common';
 
 const CustomersBalanceSummaryContext = createContext();
@@ -14,6 +14,7 @@ function CustomersBalanceSummaryProvider({ filter, ...props }) {
     filter,
   ]);
 
+  // Fetches customers balance summary report based on the given report.
   const {
     data: CustomerBalanceSummary,
     isLoading: isCustomersBalanceLoading,
@@ -23,10 +24,22 @@ function CustomersBalanceSummaryProvider({ filter, ...props }) {
     keepPreviousData: true,
   });
 
+  // Fetches the customers list.
+  const {
+    data: { customers },
+    isFetching: isCustomersFetching,
+    isLoading: isCustomersLoading,
+  } = useCustomers();
+
   const provider = {
     CustomerBalanceSummary,
     isCustomersBalanceFetching,
     isCustomersBalanceLoading,
+
+    isCustomersLoading,
+    isCustomersFetching,
+    customers,
+
     refetch,
   };
   return (
diff --git a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.js b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.js
index 4f3e8e77b..166de3ee1 100644
--- a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.js
+++ b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.js
@@ -12,7 +12,7 @@ import CustomersTransactionsHeaderGeneralPanel from './CustomersTransactionsHead
 import withCustomersTransactions from './withCustomersTransactions';
 import withCustomersTransactionsActions from './withCustomersTransactionsActions';
 
-import { compose } from 'utils';
+import { compose, transformToForm } from 'utils';
 
 /**
  * Customers transactions header.
@@ -28,14 +28,18 @@ function CustomersTransactionsHeader({
   //#withCustomersTransactionsActions
   toggleCustomersTransactionsFilterDrawer: toggleFilterDrawer,
 }) {
-  
-
-  // Filter form initial values.
-  const initialValues = {
+  // Default form values.
+  const defaultValues = {
+    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);
 
   // Validation schema.
   const validationSchema = Yup.object().shape({
@@ -54,11 +58,8 @@ function CustomersTransactionsHeader({
     toggleFilterDrawer(false);
     setSubmitting(false);
   };
-
   // Handle drawer close action.
-  const handleDrawerClose = () => {
-    toggleFilterDrawer(false);
-  };
+  const handleDrawerClose = () => { toggleFilterDrawer(false); };
 
   return (
     <FinancialStatementHeader
diff --git a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeaderGeneralPanel.js b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeaderGeneralPanel.js
index 903a8b449..caa66498e 100644
--- a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeaderGeneralPanel.js
+++ b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeaderGeneralPanel.js
@@ -1,13 +1,45 @@
 import React from 'react';
+import classNames from 'classnames';
+import { Field } from 'formik';
+import { Classes, FormGroup } from '@blueprintjs/core';
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
+import { Row, Col } from 'components';
+import { ContactsMultiSelect, FormattedMessage as T } from 'components';
+import { useCustomersTransactionsContext } from './CustomersTransactionsProvider';
 
 /**
  * Customers transactions header - General panel.
  */
 export default function CustomersTransactionsHeaderGeneralPanel() {
+  const { customers } = useCustomersTransactionsContext();
+
   return (
     <div>
       <FinancialStatementDateRange />
+
+      <Row>
+        <Col xs={5}>
+          <Field name={'customersIds'}>
+            {({
+              form: { setFieldValue },
+              field: { value },
+            }) => (
+              <FormGroup
+                label={<T id={'specific_customers'} />}
+                className={classNames('form-group--select-list', Classes.FILL)}
+              >
+                <ContactsMultiSelect
+                  onContactSelect={(contactsIds) => {
+                    setFieldValue('customersIds', contactsIds);
+                  }}
+                  contacts={customers}
+                  contactsSelected={value}
+                />
+              </FormGroup>
+            )}
+          </Field>
+        </Col>
+      </Row>
     </div>
   );
 }
diff --git a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsProvider.js b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsProvider.js
index 86c64787b..9e198e156 100644
--- a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsProvider.js
+++ b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsProvider.js
@@ -1,6 +1,6 @@
 import React, { createContext, useContext, useMemo } from 'react';
 import FinancialReportPage from '../FinancialReportPage';
-import { useCustomersTransactionsReport } from 'hooks/query';
+import { useCustomersTransactionsReport, useCustomers } from 'hooks/query';
 import { transformFilterFormToQuery } from '../common';
 
 const CustomersTransactionsContext = createContext();
@@ -21,11 +21,23 @@ function CustomersTransactionsProvider({ filter, ...props }) {
     refetch: CustomersTransactionsRefetch,
   } = useCustomersTransactionsReport(query, { keepPreviousData: true });
 
+  // Fetches the customers list.
+  const {
+    data: { customers },
+    isFetching: isCustomersFetching,
+    isLoading: isCustomersLoading,
+  } = useCustomers();
+
   const provider = {
     customersTransactions,
     isCustomersTransactionsFetching,
     isCustomersTransactionsLoading,
     CustomersTransactionsRefetch,
+
+    customers,
+    isCustomersLoading,
+    isCustomersFetching,
+
     filter,
     query
   };
diff --git a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js
index 54545999f..80b2de834 100644
--- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js
+++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js
@@ -11,7 +11,7 @@ import GeneralLedgerHeaderGeneralPane from './GeneralLedgerHeaderGeneralPane';
 import withGeneralLedger from './withGeneralLedger';
 import withGeneralLedgerActions from './withGeneralLedgerActions';
 
-import { compose, saveInvoke } from 'utils';
+import { compose, transformToForm, saveInvoke } from 'utils';
 
 /**
  * Geenral Ledger (GL) - Header.
@@ -27,13 +27,22 @@ function GeneralLedgerHeader({
   // #withGeneralLedger
   isFilterDrawerOpen,
 }) {
-  // Initial values.
-  const initialValues = {
-    ...pageFilter,
-    fromDate: moment(pageFilter.fromDate).toDate(),
-    toDate: moment(pageFilter.toDate).toDate(),
+  // Default values.
+  const defaultValues = {
+    fromDate: moment().toDate(),
+    toDate: moment().toDate(),
   };
 
+  // Initial values.
+  const initialValues = transformToForm(
+    {
+      ...pageFilter,
+      fromDate: moment(pageFilter.fromDate).toDate(),
+      toDate: moment(pageFilter.toDate).toDate(),
+    },
+    defaultValues,
+  );
+
   // Validation schema.
   const validationSchema = Yup.object().shape({
     dateRange: Yup.string().optional(),
diff --git a/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetails.js b/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetails.js
index 21d8159c5..802cc4188 100644
--- a/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetails.js
+++ b/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetails.js
@@ -33,7 +33,7 @@ function InventoryItemDetails({
     fromDate: moment().startOf('year').format('YYYY-MM-DD'),
     toDate: moment().endOf('year').format('YYYY-MM-DD'),
   });
-
+  // Handle filter submit.
   const handleFilterSubmit = (filter) => {
     const _filter = {
       ...filter,
@@ -61,10 +61,14 @@ function InventoryItemDetails({
       />
       <InventoryItemDetailsLoadingBar />
       <InventoryItemDetailsAlerts />
-      
+
       <DashboardPageContent>
         <FinancialStatement>
-          <div className={'financial-statement--inventory-details'}>
+          <div
+            className={
+              'financial-statement financial-statement--inventory-details'
+            }
+          >
             <InventoryItemDetailsHeader
               pageFilter={filter}
               onSubmitFilter={handleFilterSubmit}
diff --git a/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.js b/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.js
index daabd3e42..5f7a2d2a2 100644
--- a/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.js
+++ b/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.js
@@ -12,7 +12,7 @@ import InventoryItemDetailsHeaderGeneralPanel from './InventoryItemDetailsHeader
 import withInventoryItemDetails from './withInventoryItemDetails';
 import withInventoryItemDetailsActions from './withInventoryItemDetailsActions';
 
-import { compose } from 'utils';
+import { compose, transformToForm } from 'utils';
 
 /**
  * Inventory item details header.
@@ -21,20 +21,25 @@ function InventoryItemDetailsHeader({
   // #ownProps
   onSubmitFilter,
   pageFilter,
-  //#withInventoryItemDetails
+  // #withInventoryItemDetails
   isFilterDrawerOpen,
 
-  //#withInventoryItemDetailsActions
+  // #withInventoryItemDetailsActions
   toggleInventoryItemDetailsFilterDrawer: toggleFilterDrawer,
 }) {
-  
+  // Default form values.
+  const defaultValues = {
+    fromDate: moment().toDate(),
+    toDate: moment().toDate(),
+    itemsIds: [],
+  };
 
-  //Filter form initial values.
-  const initialValues = {
+  // Filter form initial values.
+  const initialValues = transformToForm({
     ...pageFilter,
     fromDate: moment(pageFilter.fromDate).toDate(),
     toDate: moment(pageFilter.toDate).toDate(),
-  };
+  }, defaultValues);
 
   // Validation schema.
   const validationSchema = Yup.object().shape({
@@ -56,9 +61,7 @@ function InventoryItemDetailsHeader({
   };
 
   // Handle drawer close action.
-  const handleDrawerClose = () => {
-    toggleFilterDrawer(false);
-  };
+  const handleDrawerClose = () => { toggleFilterDrawer(false); };
   
   return (
     <FinancialStatementHeader
diff --git a/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeaderGeneralPanel.js b/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeaderGeneralPanel.js
index b3aafc5fb..9fb47d84b 100644
--- a/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeaderGeneralPanel.js
+++ b/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeaderGeneralPanel.js
@@ -1,13 +1,46 @@
 import React from 'react';
+import classNames from 'classnames';
+import { FormGroup, Classes } from '@blueprintjs/core';
+import { Field } from 'formik';
+import { Row, Col, FormattedMessage as T } from 'components';
+import { ItemsMultiSelect } from 'components';
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
+import { useInventoryItemDetailsContext } from './InventoryItemDetailsProvider';
 
 /**
  * Inventory item details header - General panel.
  */
 export default function InventoryItemDetailsHeaderGeneralPanel() {
+  const { items } = useInventoryItemDetailsContext();
+
   return (
     <div>
       <FinancialStatementDateRange />
+
+      <Row>
+        <Col xs={4}>
+          <Field name={'itemsIds'}>
+            {({
+              form: { setFieldValue },
+              field: { value },
+              meta: { error, touched },
+            }) => (
+              <FormGroup
+                label={<T id={'Specific items'} />}
+                className={classNames('form-group--select-list', Classes.FILL)}
+              >
+                <ItemsMultiSelect
+                  items={items}
+                  selectedItems={value}
+                  onItemSelect={(itemsIds) => {
+                    setFieldValue('itemsIds', itemsIds);
+                  }}
+                />
+              </FormGroup>
+            )}
+          </Field>
+        </Col>
+      </Row>
     </div>
   );
 }
diff --git a/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsProvider.js b/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsProvider.js
index 746fce999..f46980dc1 100644
--- a/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsProvider.js
+++ b/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsProvider.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import FinancialReportPage from '../FinancialReportPage';
-import { useInventoryItemDetailsReport } from 'hooks/query';
+import { useItems, useInventoryItemDetailsReport } from 'hooks/query';
 import { transformFilterFormToQuery } from '../common';
 
 const InventoryItemDetailsContext = React.createContext();
@@ -14,7 +14,7 @@ function InventoryItemDetailsProvider({ filter, ...props }) {
     [filter],
   );
 
-  // fetch inventory item details.
+  // Fetching inventory item details report based on the givne query.
   const {
     data: inventoryItemDetails,
     isFetching: isInventoryItemDetailsFetching,
@@ -22,11 +22,23 @@ function InventoryItemDetailsProvider({ filter, ...props }) {
     refetch: inventoryItemDetailsRefetch,
   } = useInventoryItemDetailsReport(query, { keepPreviousData: true });
 
+  // Handle fetching the items based on the given query.
+  const {
+    data: { items },
+    isLoading: isItemsLoading,
+    isFetching: isItemsFetching,
+  } = useItems({ page_size: 10000 });
+
   const provider = {
     inventoryItemDetails,
     isInventoryItemDetailsFetching,
     isInventoryItemDetailsLoading,
     inventoryItemDetailsRefetch,
+
+    isItemsFetching,
+    isItemsLoading,
+    items,
+
     query,
     filter,
   };
diff --git a/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuation.js b/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuation.js
index 08352414c..cea4716b1 100644
--- a/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuation.js
+++ b/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuation.js
@@ -64,7 +64,7 @@ function InventoryValuation({
       <InventoryValuationLoadingBar />
 
       <DashboardPageContent>
-        <div class="financial-statement">
+        <div class="financial-statement financial-statement--inventory-valuation">
           <InventoryValuationHeader
             pageFilter={filter}
             onSubmitFilter={handleFilterSubmit}
diff --git a/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.js b/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.js
index 2cc4725e9..f7812ec62 100644
--- a/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.js
+++ b/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.js
@@ -2,7 +2,6 @@ import React from 'react';
 import * as Yup from 'yup';
 import moment from 'moment';
 import { FormattedMessage as T } from 'components';
-import intl from 'react-intl-universal';
 import { Formik, Form } from 'formik';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
 
@@ -11,7 +10,7 @@ import InventoryValuationHeaderGeneralPanel from './InventoryValuationHeaderGene
 import withInventoryValuation from './withInventoryValuation';
 import withInventoryValuationActions from './withInventoryValuationActions';
 
-import { compose } from 'utils';
+import { compose, transformToForm } from 'utils';
 
 /**
  * inventory valuation header.
@@ -27,18 +26,23 @@ function InventoryValuationHeader({
   // #withInventoryValuationActions
   toggleInventoryValuationFilterDrawer,
 }) {
-  
-
   // Form validation schema.
   const validationSchema = Yup.object().shape({
-    as_date: Yup.date().required().label('asDate'),
+    asDate: Yup.date().required().label('asDate'),
   });
 
-  // Initial values.
-  const initialValues = {
-    as_date: moment(pageFilter.asDate).toDate(),
+  // Default values.
+  const defaultValues = {
+    asDate: moment().toDate(),
+    itemsIds: [],
   };
+  // Initial values.
+  const initialValues = transformToForm({
+    ...pageFilter,
+    asDate: moment(pageFilter.asDate).toDate(),
+  }, defaultValues);
 
+  // Handle the form of header submit.
   const handleSubmit = (values, { setSubmitting }) => {
     onSubmitFilter(values);
     toggleInventoryValuationFilterDrawer(false);
diff --git a/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderGeneralPanel.js b/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderGeneralPanel.js
index e330c8c24..cf3f0f918 100644
--- a/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderGeneralPanel.js
+++ b/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderGeneralPanel.js
@@ -1,20 +1,24 @@
 import React from 'react';
-import { FastField } from 'formik';
+import { FastField, Field } from 'formik';
 import { DateInput } from '@blueprintjs/datetime';
-import { FormGroup, Position } from '@blueprintjs/core';
+import { FormGroup, Position, Classes } from '@blueprintjs/core';
+import classNames from 'classnames';
 import { FormattedMessage as T } from 'components';
-import { Row, Col, FieldHint } from 'components';
+import { ItemsMultiSelect, Row, Col, FieldHint } from 'components';
 import {
   momentFormatter,
   tansformDateValue,
   inputIntent,
   handleDateChange,
 } from 'utils';
+import { useInventoryValuationContext } from './InventoryValuationProvider';
 
 /**
- * inventory valuation - Drawer Header - General panel.
+ * Inventory valuation - Drawer Header - General panel.
  */
 export default function InventoryValuationHeaderGeneralPanel() {
+  const { items } = useInventoryValuationContext();
+
   return (
     <div>
       <Row>
@@ -42,6 +46,31 @@ export default function InventoryValuationHeaderGeneralPanel() {
           </FastField>
         </Col>
       </Row>
+
+      <Row>
+        <Col xs={5}>
+          <Field name={'itemsIds'}>
+            {({
+              form: { setFieldValue },
+              field: { value },
+              meta: { error, touched },
+            }) => (
+              <FormGroup
+                label={<T id={'Specific items'} />}
+                className={classNames('form-group--select-list', Classes.FILL)}
+              >
+                <ItemsMultiSelect
+                  items={items}
+                  selectedItems={value}
+                  onItemSelect={(itemsIds) => {
+                    setFieldValue('itemsIds', itemsIds);
+                  }}
+                />
+              </FormGroup>
+            )}
+          </Field>
+        </Col>
+      </Row>
     </div>
   );
 }
diff --git a/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationProvider.js b/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationProvider.js
index d765db9b6..60f8006bb 100644
--- a/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationProvider.js
+++ b/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationProvider.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import FinancialReportPage from '../FinancialReportPage';
-import { useInventoryValuation } from 'hooks/query';
+import { useInventoryValuation, useItems } from 'hooks/query';
 import { transformFilterFormToQuery } from '../common';
 
 const InventoryValuationContext = React.createContext();
@@ -20,11 +20,23 @@ function InventoryValuationProvider({ query, ...props }) {
     },
   );
 
+  // Handle fetching the items based on the given query.
+  const {
+    data: { items },
+    isLoading: isItemsLoading,
+    isFetching: isItemsFetching,
+  } = useItems({ page_size: 10000 });
+
+  // Provider data.
   const provider = {
     inventoryValuation,
     isLoading,
     isFetching,
     refetchSheet: refetch,
+
+    items,
+    isItemsFetching,
+    isItemsLoading
   };
 
   return (
diff --git a/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItems.js b/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItems.js
index b6d9546c4..f0afb8566 100644
--- a/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItems.js
+++ b/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItems.js
@@ -66,7 +66,7 @@ function PurchasesByItems({
       />
       <PurchasesByItemsLoadingBar />
       <DashboardPageContent>
-        <div className="financial-statement">
+        <div className="financial-statement financial-statement--purchases-by-items">
           <PurchasesByItemsHeader
             pageFilter={filter}
             onSubmitFilter={handleFilterSubmit}
diff --git a/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsGeneralPanel.js b/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsGeneralPanel.js
index 49d24ed87..f470427a4 100644
--- a/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsGeneralPanel.js
+++ b/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsGeneralPanel.js
@@ -1,13 +1,47 @@
 import React from 'react';
+import { FormGroup, Classes } from '@blueprintjs/core';
+import { Field } from 'formik';
+import { Row, Col, FormattedMessage as T } from 'components';
+import classNames from 'classnames';
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
 
+import { ItemsMultiSelect } from 'components';
+import { usePurchaseByItemsContext } from './PurchasesByItemsProvider';
+
 /**
  * Purchases by items - Drawer header - General panel.
  */
 export default function PurchasesByItemsGeneralPanel() {
+  const { items } = usePurchaseByItemsContext();
+
   return (
     <div>
       <FinancialStatementDateRange />
+
+      <Row>
+        <Col xs={4}>
+          <Field name={'itemsIds'}>
+            {({
+              form: { setFieldValue },
+              field: { value },
+              meta: { error, touched },
+            }) => (
+              <FormGroup
+                label={<T id={'Specific items'} />}
+                className={classNames('form-group--select-list', Classes.FILL)}
+              >
+                <ItemsMultiSelect
+                  items={items}
+                  selectedItems={value}
+                  onItemSelect={(itemsIds) => {
+                    setFieldValue('itemsIds', itemsIds);
+                  }}
+                />
+              </FormGroup>
+            )}
+          </Field>
+        </Col>
+      </Row>
     </div>
   );
 }
diff --git a/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsHeader.js b/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsHeader.js
index 9c8a28f93..6b15ac729 100644
--- a/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsHeader.js
+++ b/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsHeader.js
@@ -12,7 +12,7 @@ import PurchasesByItemsGeneralPanel from './PurchasesByItemsGeneralPanel';
 import withPurchasesByItems from './withPurchasesByItems';
 import withPurchasesByItemsActions from './withPurchasesByItemsActions';
 
-import { compose } from 'utils';
+import { compose, transformToForm } from 'utils';
 
 /**
  * Purchases by items header.
@@ -28,25 +28,31 @@ function PurchasesByItemsHeader({
   // #withPurchasesByItems
   togglePurchasesByItemsFilterDrawer,
 }) {
-  
-
   // Form validation schema.
   const validationSchema = Yup.object().shape({
-    fromDate: Yup.date()
-      .required()
-      .label(intl.get('from_date')),
+    fromDate: Yup.date().required().label(intl.get('from_date')),
     toDate: Yup.date()
       .min(Yup.ref('fromDate'))
       .required()
       .label(intl.get('to_date')),
   });
 
-  // Initial values.
-  const initialValues = {
+  // Default form values.
+  const defaultValues = {
     ...pageFilter,
-    fromDate: moment(pageFilter.fromDate).toDate(),
-    toDate: moment(pageFilter.toDate).toDate(),
+    fromDate: moment().toDate(),
+    toDate: moment().toDate(),
+    itemsIds: [],
   };
+  // Initial form values.
+  const initialValues = transformToForm(
+    {
+      ...pageFilter,
+      fromDate: moment(pageFilter.fromDate).toDate(),
+      toDate: moment(pageFilter.toDate).toDate(),
+    },
+    defaultValues,
+  );
 
   // Handle form submit.
   const handleSubmit = (values, { setSubmitting }) => {
diff --git a/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsProvider.js b/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsProvider.js
index 9de8c6c47..b49757a96 100644
--- a/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsProvider.js
+++ b/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsProvider.js
@@ -1,12 +1,13 @@
 import React, { createContext, useContext } from 'react';
 import FinancialReportPage from '../FinancialReportPage';
-import { usePurchasesByItems } from 'hooks/query';
+import { usePurchasesByItems, useItems } from 'hooks/query';
 import { transformFilterFormToQuery } from '../common';
 
 
 const PurchasesByItemsContext = createContext();
 
 function PurchasesByItemsProvider({ query, ...props }) {
+  // Handle fetching the purchases by items report based on the given query.
   const {
     data: purchaseByItems,
     isFetching,
@@ -21,11 +22,23 @@ function PurchasesByItemsProvider({ query, ...props }) {
     },
   );
 
+  // Handle fetching the items based on the given query.
+  const {
+    data: { items },
+    isLoading: isItemsLoading,
+    isFetching: isItemsFetching,
+  } = useItems({ page_size: 10000 });
+
   const provider = {
     purchaseByItems,
     isFetching,
     isLoading,
-     refetchSheet: refetch,
+
+    items,
+    isItemsLoading,
+    isItemsFetching,
+
+    refetchSheet: refetch,
   };
   return (
     <FinancialReportPage name={'purchase-by-items'}>
diff --git a/client/src/containers/FinancialStatements/SalesByItems/SalesByItemProvider.js b/client/src/containers/FinancialStatements/SalesByItems/SalesByItemProvider.js
index 86ce8b8a1..54bd0b174 100644
--- a/client/src/containers/FinancialStatements/SalesByItems/SalesByItemProvider.js
+++ b/client/src/containers/FinancialStatements/SalesByItems/SalesByItemProvider.js
@@ -1,6 +1,6 @@
 import React, { createContext, useContext } from 'react';
 import FinancialReportPage from '../FinancialReportPage';
-import { useSalesByItems } from 'hooks/query';
+import { useSalesByItems, useItems } from 'hooks/query';
 import { transformFilterFormToQuery } from '../common';
 
 const SalesByItemsContext = createContext();
@@ -20,10 +20,22 @@ function SalesByItemProvider({ query, ...props }) {
     },
   );
 
+  // Handle fetching the items based on the given query.
+  const {
+    data: { items },
+    isLoading: isItemsLoading,
+    isFetching: isItemsFetching,
+  } = useItems({ page_size: 10000 });
+
   const provider = {
     salesByItems,
     isFetching,
     isLoading,
+
+    items,
+    isItemsLoading,
+    isItemsFetching,
+    
     refetchSheet: refetch,
   };
   return (
diff --git a/client/src/containers/FinancialStatements/SalesByItems/SalesByItems.js b/client/src/containers/FinancialStatements/SalesByItems/SalesByItems.js
index 7fb334fc1..73c159396 100644
--- a/client/src/containers/FinancialStatements/SalesByItems/SalesByItems.js
+++ b/client/src/containers/FinancialStatements/SalesByItems/SalesByItems.js
@@ -68,7 +68,7 @@ function SalesByItems({
       />
       <SalesByItemsLoadingBar />
       <DashboardPageContent>
-        <div class="financial-statement">
+        <div class="financial-statement financial-statement--sales-by-items">
           <SalesByItemsHeader
             pageFilter={filter}
             onSubmitFilter={handleFilterSubmit}
diff --git a/client/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeaderGeneralPanel.js b/client/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeaderGeneralPanel.js
index a31f6cd7e..464621c57 100644
--- a/client/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeaderGeneralPanel.js
+++ b/client/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeaderGeneralPanel.js
@@ -1,13 +1,45 @@
 import React from 'react';
+import { FormGroup, Classes } from '@blueprintjs/core';
+import { Field } from 'formik';
+import classNames from 'classnames';
+import { Row, Col, ItemsMultiSelect, FormattedMessage as T } from 'components';
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
+import { useSalesByItemsContext } from './SalesByItemProvider';
 
 /**
  * sells by items - Drawer header - General panel.
  */
 export default function SalesByItemsHeaderGeneralPanel() {
+  const { items } = useSalesByItemsContext();
+
   return (
     <div>
       <FinancialStatementDateRange />
+
+      <Row>
+        <Col xs={4}>
+          <Field name={'itemsIds'}>
+            {({
+              form: { setFieldValue },
+              field: { value },
+              meta: { error, touched },
+            }) => (
+              <FormGroup
+                label={<T id={'Specific items'} />}
+                className={classNames('form-group--select-list', Classes.FILL)}
+              >
+                <ItemsMultiSelect
+                  items={items}
+                  selectedItems={value}
+                  onItemSelect={(itemsIds) => {
+                    setFieldValue('itemsIds', itemsIds);
+                  }}
+                />
+              </FormGroup>
+            )}
+          </Field>
+        </Col>
+      </Row>
     </div>
   );
 }
diff --git a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js
index de60c8718..77e993c85 100644
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js
+++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js
@@ -12,7 +12,7 @@ import TrialBalanceSheetHeaderGeneralPanel from './TrialBalanceSheetHeaderGenera
 import withTrialBalance from './withTrialBalance';
 import withTrialBalanceActions from './withTrialBalanceActions';
 
-import { compose } from 'utils';
+import { compose, transformToForm } from 'utils';
 
 /**
  * Trial balance sheet header.
@@ -28,42 +28,41 @@ function TrialBalanceSheetHeader({
   // #withTrialBalanceActions
   toggleTrialBalanceFilterDrawer: toggleFilterDrawer,
 }) {
-  
-
   // Form validation schema.
   const validationSchema = Yup.object().shape({
-    fromDate: Yup.date()
-      .required()
-      .label(intl.get('from_date')),
+    fromDate: Yup.date().required().label(intl.get('from_date')),
     toDate: Yup.date()
       .min(Yup.ref('fromDate'))
       .required()
       .label(intl.get('to_date')),
   });
 
-  // Initial values.
-  const initialValues = {
-    ...pageFilter,
-    fromDate: moment(pageFilter.fromDate).toDate(),
-    toDate: moment(pageFilter.toDate).toDate(),
+  // Default values.
+  const defaultValues = {
+    fromDate: moment().toDate(),
+    toDate: moment().toDate(),
   };
 
+  // Initial values.
+  const initialValues = transformToForm(
+    {
+      ...pageFilter,
+      fromDate: moment(pageFilter.fromDate).toDate(),
+      toDate: moment(pageFilter.toDate).toDate(),
+    },
+    defaultValues,
+  );
   // Handle form submit.
   const handleSubmit = (values, { setSubmitting }) => {
     onSubmitFilter(values);
     setSubmitting(false);
     toggleFilterDrawer(false);
   };
-
   // Handle drawer close action.
-  const handleDrawerClose = () => {
-    toggleFilterDrawer(false);
-  };
+  const handleDrawerClose = () => { toggleFilterDrawer(false); };
 
   // Handle cancel button click.
-  const handleCancelClick = () => {
-    toggleFilterDrawer(false);
-  };
+  const handleCancelClick = () => { toggleFilterDrawer(false); };
 
   return (
     <FinancialStatementHeader
diff --git a/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeader.js b/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeader.js
index 9e331973a..5474aa4f7 100644
--- a/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeader.js
+++ b/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeader.js
@@ -10,7 +10,7 @@ import withVendorsBalanceSummary from './withVendorsBalanceSummary';
 import withVendorsBalanceSummaryActions from './withVendorsBalanceSummaryActions';
 import VendorsBalanceSummaryHeaderGeneral from './VendorsBalanceSummaryHeaderGeneral';
 
-import { compose } from 'utils';
+import { compose, transformToForm } from 'utils';
 
 /**
  * Vendors balance summary drawer header.
@@ -32,10 +32,15 @@ function VendorsBalanceSummaryHeader({
   });
 
   // filter form initial values.
-  const initialValues = {
+  const defaultValues = {
+    asDate: moment().toDate(),
+    vendorsIds: [],
+  };
+  // Initial form values.
+  const initialValues = transformToForm({
     ...pageFilter,
     asDate: moment(pageFilter.asDate).toDate(),
-  };
+  }, defaultValues);
 
   // handle form submit.
   const handleSubmit = (values, { setSubmitting }) => {
diff --git a/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneral.js b/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneral.js
index 7ac062a36..e599fc02d 100644
--- a/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneral.js
+++ b/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneral.js
@@ -1,8 +1,9 @@
 import React from 'react';
-import { FastField } from 'formik';
+import { Field, FastField } from 'formik';
 import { DateInput } from '@blueprintjs/datetime';
+import classNames from 'classnames';
 import { FormGroup, Position, Classes, Checkbox } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
+import { ContactsMultiSelect, FormattedMessage as T } from 'components';
 import { Row, Col, FieldHint } from 'components';
 import {
   momentFormatter,
@@ -10,11 +11,14 @@ import {
   inputIntent,
   handleDateChange,
 } from 'utils';
+import { useVendorsBalanceSummaryContext } from './VendorsBalanceSummaryProvider';
 
 /**
  * Vendors balance header -general panel.
  */
 export default function VendorsBalanceSummaryHeaderGeneral() {
+  const { vendors } = useVendorsBalanceSummaryContext();
+
   return (
     <div>
       <Row>
@@ -42,6 +46,7 @@ export default function VendorsBalanceSummaryHeaderGeneral() {
           </FastField>
         </Col>
       </Row>
+
       <Row>
         <Col xs={5}>
           <FastField name={'percentage'} type={'checkbox'}>
@@ -59,6 +64,31 @@ export default function VendorsBalanceSummaryHeaderGeneral() {
           </FastField>
         </Col>
       </Row>
+
+      <Row>
+        <Col xs={4}>
+          <Field name={'vendorsIds'}>
+            {({
+              form: { setFieldValue },
+              field: { value },
+              meta: { error, touched },
+            }) => (
+              <FormGroup
+                label={<T id={'specific_vendors'} />}
+                className={classNames('form-group--select-list', Classes.FILL)}
+              >
+                <ContactsMultiSelect
+                  onContactSelect={(contactsIds) => {
+                    setFieldValue('vendorsIds', contactsIds);
+                  }}
+                  contacts={vendors}
+                  contactsSelected={value}
+                />
+              </FormGroup>
+            )}
+          </Field>
+        </Col>
+      </Row>
     </div>
   );
 }
diff --git a/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryProvider.js b/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryProvider.js
index 840b45268..db2847d64 100644
--- a/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryProvider.js
+++ b/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryProvider.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import FinancialReportPage from '../FinancialReportPage';
-import { useVendorsBalanceSummaryReport } from 'hooks/query';
+import { useVendorsBalanceSummaryReport, useVendors } from 'hooks/query';
 import { transformFilterFormToQuery } from '../common';
 
 const VendorsBalanceSummaryContext = React.createContext();
@@ -13,6 +13,7 @@ function VendorsBalanceSummaryProvider({ filter, ...props }) {
     filter,
   ]);
 
+  // Fetching vendors balance summary report based on the given query.
   const {
     data: VendorBalanceSummary,
     isLoading: isVendorsBalanceLoading,
@@ -22,10 +23,23 @@ function VendorsBalanceSummaryProvider({ filter, ...props }) {
     keepPreviousData: true,
   });
 
+  // Fetch vendors list with pagination meta.
+  const {
+    data: { vendors },
+    isLoading: isVendorsLoading,
+    isFetching: isVendorsFetching,
+  } = useVendors({ page_size: 1000000 });
+
+  // Provider.
   const provider = {
     VendorBalanceSummary,
     isVendorsBalanceLoading,
     isVendorsBalanceFetching,
+
+    vendors,
+    isVendorsFetching,
+    isVendorsLoading,
+
     refetch,
   };
 
diff --git a/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeader.js b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeader.js
index babf5f7c8..d3e29f513 100644
--- a/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeader.js
+++ b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeader.js
@@ -12,7 +12,7 @@ import VendorsTransactionsHeaderGeneralPanel from './VendorsTransactionsHeaderGe
 import withVendorsTransaction from './withVendorsTransaction';
 import withVendorsTransactionsActions from './withVendorsTransactionsActions';
 
-import { compose } from 'utils';
+import { compose, transformToForm } from 'utils';
 
 /**
  * Vendors transactions header.
@@ -29,14 +29,19 @@ function VendorsTransactionsHeader({
   //#withVendorsTransactionsActions
   toggleVendorsTransactionsFilterDrawer: toggleFilterDrawer,
 }) {
-  
+  // Default form values.
+  const defaultValues = {
+    fromDate: moment().toDate(),
+    toDate: moment().toDate(),
+    vendorsIds: [],
+  };
 
-  // Filter form initial values.
-  const initialValues = {
+  // Initial form values.
+  const initialValues = transformToForm({
     ...pageFilter,
     fromDate: moment(pageFilter.fromDate).toDate(),
     toDate: moment(pageFilter.toDate).toDate(),
-  };
+  }, defaultValues);
 
   // Validation schema.
   const validationSchema = Yup.object().shape({
@@ -57,9 +62,7 @@ function VendorsTransactionsHeader({
   };
 
   // Handle drawer close action.
-  const handleDrawerClose = () => {
-    toggleFilterDrawer(false);
-  };
+  const handleDrawerClose = () => { toggleFilterDrawer(false); };
 
   return (
     <FinancialStatementHeader
diff --git a/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeaderGeneralPanel.js b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeaderGeneralPanel.js
index 49c1beea2..ac7f354da 100644
--- a/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeaderGeneralPanel.js
+++ b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeaderGeneralPanel.js
@@ -1,13 +1,42 @@
 import React from 'react';
+import { Field } from 'formik';
+import classNames from 'classnames';
+import { Classes, FormGroup } from '@blueprintjs/core';
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
+import { Row, Col } from 'components';
+import { ContactsMultiSelect, FormattedMessage as T } from 'components';
+import { useVendorsTransactionsContext } from './VendorsTransactionsProvider';
 
 /**
  * Vendors transactions header - General panel.
  */
 export default function VendorsTransactionsHeaderGeneralPanel() {
+  const { vendors } = useVendorsTransactionsContext();
+
   return (
     <div>
       <FinancialStatementDateRange />
+
+      <Row>
+        <Col xs={5}>
+          <Field name={'vendorsIds'}>
+            {({ form: { setFieldValue }, field: { value } }) => (
+              <FormGroup
+                label={<T id={'specific_vendors'} />}
+                className={classNames('form-group--select-list', Classes.FILL)}
+              >
+                <ContactsMultiSelect
+                  onContactSelect={(contactsIds) => {
+                    setFieldValue('vendorsIds', contactsIds);
+                  }}
+                  contacts={vendors}
+                  contactsSelected={value}
+                />
+              </FormGroup>
+            )}
+          </Field>
+        </Col>
+      </Row>
     </div>
   );
 }
diff --git a/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsProvider.js b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsProvider.js
index afbf44242..a15a40f23 100644
--- a/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsProvider.js
+++ b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsProvider.js
@@ -1,6 +1,6 @@
 import React, { createContext, useContext, useMemo } from 'react';
 import FinancialReportPage from '../FinancialReportPage';
-import { useVendorsTransactionsReport } from 'hooks/query';
+import { useVendorsTransactionsReport, useVendors } from 'hooks/query';
 import { transformFilterFormToQuery } from '../common';
 
 const VendorsTransactionsContext = createContext();
@@ -11,6 +11,7 @@ const VendorsTransactionsContext = createContext();
 function VendorsTransactionsProvider({ filter, ...props }) {
   const query = useMemo(() => transformFilterFormToQuery(filter), [filter]);
 
+  // Fetch vendors transactions based on the given query.
   const {
     data: vendorsTransactions,
     isFetching: isVendorsTransactionFetching,
@@ -18,10 +19,22 @@ function VendorsTransactionsProvider({ filter, ...props }) {
     refetch,
   } = useVendorsTransactionsReport(query, { keepPreviousData: true });
 
+  // Fetch vendors list based on the given query.
+  const {
+    data: { vendors },
+    isLoading: isVendorsLoading,
+    isFetching: isVendorsFetching,
+  } = useVendors({ page_size: 100000 });
+
   const provider = {
     vendorsTransactions,
     isVendorsTransactionsLoading,
     isVendorsTransactionFetching,
+
+    vendors,
+    isVendorsLoading,
+    
+    isVendorsFetching,
     refetch,
     filter,
     query,
diff --git a/client/src/containers/FinancialStatements/common.js b/client/src/containers/FinancialStatements/common.js
index d9234a63d..fa5e760e9 100644
--- a/client/src/containers/FinancialStatements/common.js
+++ b/client/src/containers/FinancialStatements/common.js
@@ -82,5 +82,5 @@ export const transformFilterFormToQuery = (form) => {
     noneZero: form.accountsFilter === 'without-zero-balance',
     noneTransactions: form.accountsFilter === 'with-transactions',
   });
-  return flatObject(transformed);
+  return transformed;
 };
diff --git a/client/src/lang/en/index.json b/client/src/lang/en/index.json
index 1643a7891..a1e7da419 100644
--- a/client/src/lang/en/index.json
+++ b/client/src/lang/en/index.json
@@ -1136,5 +1136,12 @@
   "select_transaction":"Select transaction account",
   "details":"Details",
   "located_landed_cost":"Located Landed Cost",
-  "delete_transaction":"Delete transaction"
+  "delete_transaction":"Delete transaction",
+  "all_items": "All items",
+  "Specific items": "Specific items",
+  "Selected contacts": "Selected contacts",
+  "All contacts": "All contacts",
+  "Selected items ({count})": "Selected items ({count})",
+  "All items": "All items",
+  "No items": "No items"
 }
\ No newline at end of file
diff --git a/client/src/style/pages/FinancialStatements/ARAgingSummary.scss b/client/src/style/pages/FinancialStatements/ARAgingSummary.scss
index d663e5f8a..2bb2d6f5f 100644
--- a/client/src/style/pages/FinancialStatements/ARAgingSummary.scss
+++ b/client/src/style/pages/FinancialStatements/ARAgingSummary.scss
@@ -36,4 +36,13 @@
       }
     }    
   }
+}
+
+.financial-statement--AR-aging-summary{
+
+  .financial-header-drawer{
+    .bp3-drawer{
+      max-height: 450px;
+    }
+  }
 }
\ No newline at end of file
diff --git a/client/src/style/pages/FinancialStatements/SalesAndPurchasesSheet.scss b/client/src/style/pages/FinancialStatements/SalesAndPurchasesSheet.scss
index 48f9656b6..f3a0976a1 100644
--- a/client/src/style/pages/FinancialStatements/SalesAndPurchasesSheet.scss
+++ b/client/src/style/pages/FinancialStatements/SalesAndPurchasesSheet.scss
@@ -27,3 +27,23 @@
     }
   }
 }
+
+.financial-statement--sales-by-items,
+.financial-statement--purchases-by-items{
+
+  .financial-header-drawer{
+    .bp3-drawer{
+      max-height: 400px;
+    }
+  }
+}
+
+
+.financial-statement--inventory-valuation{
+
+  .financial-header-drawer{
+    .bp3-drawer{
+      max-height: 350px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/client/src/utils.js b/client/src/utils.js
index e08b226e9..a6e3d07e0 100644
--- a/client/src/utils.js
+++ b/client/src/utils.js
@@ -297,6 +297,10 @@ export const saveInvoke = (func, ...rest) => {
   return func && func(...rest);
 };
 
+export const safeInvoke = (func, ...rest) => {
+  return func && func(...rest);
+};
+
 export const transformToForm = (obj, emptyInitialValues) => {
   return _.pickBy(
     obj,
@@ -432,11 +436,10 @@ export function flatObject(obj) {
   const path = []; // current path
 
   function dig(obj) {
-    if (obj !== Object(obj))
-      /*is primitive, end of path*/
-      return (flatObject[path.join('.')] = obj); /*<- value*/
+    if (obj !== Object(obj)) {
+      return (flatObject[path.join('.')] = obj);
+    }
 
-    //no? so this is an object with keys. go deeper on each key down
     for (let key in obj) {
       path.push(key);
       dig(obj[key]);
diff --git a/server/src/api/controllers/FinancialStatements/CustomerBalanceSummary/index.ts b/server/src/api/controllers/FinancialStatements/CustomerBalanceSummary/index.ts
index a0e2e4c2c..99140c25a 100644
--- a/server/src/api/controllers/FinancialStatements/CustomerBalanceSummary/index.ts
+++ b/server/src/api/controllers/FinancialStatements/CustomerBalanceSummary/index.ts
@@ -23,6 +23,7 @@ export default class CustomerBalanceSummaryReportController extends BaseFinancia
     router.get(
       '/',
       this.validationSchema,
+      this.validationResult,
       asyncMiddleware(this.customerBalanceSummary.bind(this))
     );
     return router;
@@ -34,7 +35,13 @@ export default class CustomerBalanceSummaryReportController extends BaseFinancia
   get validationSchema() {
     return [
       ...this.sheetNumberFormatValidationSchema,
+
+      // As date.
       query('as_date').optional().isISO8601(),
+
+      // Customers ids.
+      query('customers_ids').optional().isArray({ min: 1 }),
+      query('customers_ids.*').exists().isInt().toInt(),
     ];
   }
 
diff --git a/server/src/api/controllers/FinancialStatements/InventoryDetails/index.ts b/server/src/api/controllers/FinancialStatements/InventoryDetails/index.ts
index d40d9e585..78138c317 100644
--- a/server/src/api/controllers/FinancialStatements/InventoryDetails/index.ts
+++ b/server/src/api/controllers/FinancialStatements/InventoryDetails/index.ts
@@ -53,8 +53,12 @@ export default class InventoryDetailsController extends BaseController {
         .escape(),
       query('from_date').optional(),
       query('to_date').optional(),
+
       query('none_zero').optional().isBoolean().toBoolean(),
       query('none_transactions').optional().isBoolean().toBoolean(),
+
+      query('items_ids').optional().isArray(),
+      query('items_ids.*').optional().isInt().toInt(),
     ];
   }
 
diff --git a/server/src/api/controllers/FinancialStatements/InventoryValuationSheet.ts b/server/src/api/controllers/FinancialStatements/InventoryValuationSheet.ts
index 0353870b3..266cc4e82 100644
--- a/server/src/api/controllers/FinancialStatements/InventoryValuationSheet.ts
+++ b/server/src/api/controllers/FinancialStatements/InventoryValuationSheet.ts
@@ -32,6 +32,10 @@ export default class InventoryValuationReportController extends BaseFinancialRep
     return [
       query('from_date').optional().isISO8601(),
       query('to_date').optional().isISO8601(),
+
+      query('items_ids').optional().isArray(),
+      query('items_ids.*').optional().isInt().toInt(),
+
       query('number_format.no_cents').optional().isBoolean().toBoolean(),
       query('number_format.divide_1000').optional().isBoolean().toBoolean(),
       query('none_transactions').default(true).isBoolean().toBoolean(),
diff --git a/server/src/api/controllers/FinancialStatements/PurchasesByItem.ts b/server/src/api/controllers/FinancialStatements/PurchasesByItem.ts
index 835e6412f..7a5063dcf 100644
--- a/server/src/api/controllers/FinancialStatements/PurchasesByItem.ts
+++ b/server/src/api/controllers/FinancialStatements/PurchasesByItem.ts
@@ -28,14 +28,20 @@ export default class PurchasesByItemReportController extends BaseFinancialReport
 
   /**
    * Validation schema.
+   * @return {ValidationChain[]}
    */
   get validationSchema(): ValidationChain[] {
     return [
       query('from_date').optional().isISO8601(),
       query('to_date').optional().isISO8601(),
+
       query('number_format.no_cents').optional().isBoolean().toBoolean(),
       query('number_format.divide_1000').optional().isBoolean().toBoolean(),
       query('none_transactions').default(true).isBoolean().toBoolean(),
+
+      query('items_ids').optional().isArray(),
+      query('items_ids.*').optional().isInt().toInt(),
+
       query('orderBy').optional().isIn(['created_at', 'name', 'code']),
       query('order').optional().isIn(['desc', 'asc']),
     ];
diff --git a/server/src/api/controllers/FinancialStatements/SalesByItems.ts b/server/src/api/controllers/FinancialStatements/SalesByItems.ts
index 7b9fb4602..5987d9418 100644
--- a/server/src/api/controllers/FinancialStatements/SalesByItems.ts
+++ b/server/src/api/controllers/FinancialStatements/SalesByItems.ts
@@ -33,6 +33,10 @@ export default class SalesByItemsReportController extends BaseFinancialReportCon
     return [
       query('from_date').optional().isISO8601(),
       query('to_date').optional().isISO8601(),
+
+      query('items_ids').optional().isArray(),
+      query('items_ids.*').optional().isInt().toInt(),
+
       query('number_format.no_cents').optional().isBoolean().toBoolean(),
       query('number_format.divide_1000').optional().isBoolean().toBoolean(),
       query('none_transactions').default(true).isBoolean().toBoolean(),
diff --git a/server/src/api/controllers/FinancialStatements/TransactionsByCustomers/index.ts b/server/src/api/controllers/FinancialStatements/TransactionsByCustomers/index.ts
index 30ed4d41e..a484963f3 100644
--- a/server/src/api/controllers/FinancialStatements/TransactionsByCustomers/index.ts
+++ b/server/src/api/controllers/FinancialStatements/TransactionsByCustomers/index.ts
@@ -23,6 +23,7 @@ export default class TransactionsByCustomersReportController extends BaseFinanci
     router.get(
       '/',
       this.validationSchema,
+      this.validationResult,
       asyncMiddleware(this.transactionsByCustomers.bind(this))
     );
     return router;
@@ -31,13 +32,18 @@ export default class TransactionsByCustomersReportController extends BaseFinanci
   /**
    * Validation schema.
    */
-  get validationSchema() {
+  private get validationSchema() {
     return [
       ...this.sheetNumberFormatValidationSchema,
       query('from_date').optional().isISO8601(),
       query('to_date').optional().isISO8601(),
+
       query('none_zero').optional().isBoolean().toBoolean(),
       query('none_transactions').optional().isBoolean().toBoolean(),
+
+      // Customers ids.
+      query('customers_ids').optional().isArray({ min: 1 }),
+      query('customers_ids.*').exists().isInt().toInt(),
     ];
   }
 
@@ -45,7 +51,9 @@ export default class TransactionsByCustomersReportController extends BaseFinanci
    * Transformes the statement to table rows response.
    * @param {ITransactionsByCustomersStatement} statement -
    */
-  transformToTableResponse({ data }: ITransactionsByCustomersStatement) {
+  private transformToTableResponse({
+    data,
+  }: ITransactionsByCustomersStatement) {
     return {
       table: {
         rows: this.transactionsByCustomersTableRows.tableRows(data),
@@ -57,7 +65,7 @@ export default class TransactionsByCustomersReportController extends BaseFinanci
    * Transformes the statement to json response.
    * @param {ITransactionsByCustomersStatement} statement -
    */
-  transfromToJsonResponse({
+  private transfromToJsonResponse({
     data,
     columns,
   }: ITransactionsByCustomersStatement) {
@@ -83,10 +91,11 @@ export default class TransactionsByCustomersReportController extends BaseFinanci
     const filter = this.matchedQueryData(req);
 
     try {
-      const transactionsByCustomers = await this.transactionsByCustomersService.transactionsByCustomers(
-        tenantId,
-        filter
-      );
+      const transactionsByCustomers =
+        await this.transactionsByCustomersService.transactionsByCustomers(
+          tenantId,
+          filter
+        );
       const accept = this.accepts(req);
       const acceptType = accept.types(['json', 'application/json+table']);
 
diff --git a/server/src/api/controllers/FinancialStatements/TransactionsByVendors/index.ts b/server/src/api/controllers/FinancialStatements/TransactionsByVendors/index.ts
index 2f24c2259..cf2240543 100644
--- a/server/src/api/controllers/FinancialStatements/TransactionsByVendors/index.ts
+++ b/server/src/api/controllers/FinancialStatements/TransactionsByVendors/index.ts
@@ -23,6 +23,7 @@ export default class TransactionsByVendorsReportController extends BaseFinancial
     router.get(
       '/',
       this.validationSchema,
+      this.validationResult,
       asyncMiddleware(this.transactionsByVendors.bind(this))
     );
     return router;
@@ -34,10 +35,16 @@ export default class TransactionsByVendorsReportController extends BaseFinancial
   get validationSchema(): ValidationChain[] {
     return [
       ...this.sheetNumberFormatValidationSchema,
+
       query('from_date').optional().isISO8601(),
       query('to_date').optional().isISO8601(),
+
       query('none_zero').optional().isBoolean().toBoolean(),
       query('none_transactions').optional().isBoolean().toBoolean(),
+
+      // Vendors ids.
+      query('vendors_ids').optional().isArray({ min: 1 }),
+      query('vendors_ids.*').exists().isInt().toInt(),
     ];
   }
 
@@ -80,10 +87,11 @@ export default class TransactionsByVendorsReportController extends BaseFinancial
     const filter = this.matchedQueryData(req);
 
     try {
-      const transactionsByVendors = await this.transactionsByVendorsService.transactionsByVendors(
-        tenantId,
-        filter
-      );
+      const transactionsByVendors =
+        await this.transactionsByVendorsService.transactionsByVendors(
+          tenantId,
+          filter
+        );
       const accept = this.accepts(req);
       const acceptType = accept.types(['json', 'application/json+table']);
 
diff --git a/server/src/api/controllers/FinancialStatements/VendorBalanceSummary/index.ts b/server/src/api/controllers/FinancialStatements/VendorBalanceSummary/index.ts
index c94f77319..849a64eca 100644
--- a/server/src/api/controllers/FinancialStatements/VendorBalanceSummary/index.ts
+++ b/server/src/api/controllers/FinancialStatements/VendorBalanceSummary/index.ts
@@ -34,6 +34,10 @@ export default class VendorBalanceSummaryReportController extends BaseFinancialR
     return [
       ...this.sheetNumberFormatValidationSchema,
       query('as_date').optional().isISO8601(),
+
+      // Vendors ids.
+      query('vendors_ids').optional().isArray({ min: 1 }),
+      query('vendors_ids.*').exists().isInt().toInt(),
     ];
   }
 
diff --git a/server/src/interfaces/IInventoryValuationSheet.ts b/server/src/interfaces/IInventoryValuationSheet.ts
index 8a6cf5f40..a295020ed 100644
--- a/server/src/interfaces/IInventoryValuationSheet.ts
+++ b/server/src/interfaces/IInventoryValuationSheet.ts
@@ -7,6 +7,7 @@ export interface IInventoryValuationReportQuery {
   asDate: Date | string;
   numberFormat: INumberFormatQuery;
   noneTransactions: boolean;  
+  itemsIds: number[],
 };
 
 export interface IInventoryValuationSheetMeta {
diff --git a/server/src/interfaces/InventoryDetails.ts b/server/src/interfaces/InventoryDetails.ts
index 69680f04f..270a4c254 100644
--- a/server/src/interfaces/InventoryDetails.ts
+++ b/server/src/interfaces/InventoryDetails.ts
@@ -7,6 +7,7 @@ export interface IInventoryDetailsQuery {
   toDate: Date | string;
   numberFormat: INumberFormatQuery;
   noneTransactions: boolean;
+  itemsIds: number[]
 }
 
 export interface IInventoryDetailsNumber {
diff --git a/server/src/interfaces/SalesByItemsSheet.ts b/server/src/interfaces/SalesByItemsSheet.ts
index d90fff55e..362f4ceea 100644
--- a/server/src/interfaces/SalesByItemsSheet.ts
+++ b/server/src/interfaces/SalesByItemsSheet.ts
@@ -5,6 +5,7 @@ import {
 export interface ISalesByItemsReportQuery {
   fromDate: Date | string;
   toDate: Date | string;
+  itemsIds: number[],
   numberFormat: INumberFormatQuery;
   noneTransactions: boolean;  
 };
diff --git a/server/src/interfaces/TransactionsByCustomers.ts b/server/src/interfaces/TransactionsByCustomers.ts
index 9ccd8de9c..fe2fbf5e2 100644
--- a/server/src/interfaces/TransactionsByCustomers.ts
+++ b/server/src/interfaces/TransactionsByCustomers.ts
@@ -18,7 +18,9 @@ export interface ITransactionsByCustomersCustomer {
 }
 
 export interface ITransactionsByCustomersFilter
-  extends ITransactionsByContactsFilter {}
+  extends ITransactionsByContactsFilter {
+  customersIds: number[];
+}
 
 export type ITransactionsByCustomersData = ITransactionsByCustomersCustomer[];
 
diff --git a/server/src/interfaces/TransactionsByVendors.ts b/server/src/interfaces/TransactionsByVendors.ts
index c2a4bc77a..107c7662e 100644
--- a/server/src/interfaces/TransactionsByVendors.ts
+++ b/server/src/interfaces/TransactionsByVendors.ts
@@ -18,7 +18,9 @@ export interface ITransactionsByVendorsVendor {
 }
 
 export interface ITransactionsByVendorsFilter
-  extends ITransactionsByContactsFilter {}
+  extends ITransactionsByContactsFilter {
+  vendorsIds: number[];
+}
 
 export type ITransactionsByVendorsData = ITransactionsByVendorsVendor[];
 
diff --git a/server/src/services/FinancialStatements/AgingSummary/ARAgingSummaryService.ts b/server/src/services/FinancialStatements/AgingSummary/ARAgingSummaryService.ts
index de623f854..21b60064b 100644
--- a/server/src/services/FinancialStatements/AgingSummary/ARAgingSummaryService.ts
+++ b/server/src/services/FinancialStatements/AgingSummary/ARAgingSummaryService.ts
@@ -83,7 +83,7 @@ export default class ARAgingSummaryService {
     });
     // Retrieve all customers from the storage.
     const customers =
-      filter.customersIds.length > 0
+      (filter.customersIds.length > 0)
         ? await customerRepository.findWhereIn('id', filter.customersIds)
         : await customerRepository.all();
 
diff --git a/server/src/services/FinancialStatements/InventoryDetails/InventoryDetailsRepository.ts b/server/src/services/FinancialStatements/InventoryDetails/InventoryDetailsRepository.ts
index 8cc98ca0a..538febe9b 100644
--- a/server/src/services/FinancialStatements/InventoryDetails/InventoryDetailsRepository.ts
+++ b/server/src/services/FinancialStatements/InventoryDetails/InventoryDetailsRepository.ts
@@ -1,5 +1,6 @@
 import { Inject } from 'typedi';
 import { raw } from 'objection';
+import { isEmpty } from 'lodash';
 import moment from 'moment';
 import {
   IItem,
@@ -17,10 +18,16 @@ export default class InventoryDetailsRepository {
    * @param {number} tenantId -
    * @returns {Promise<IItem>}
    */
-  public getInventoryItems(tenantId: number): Promise<IItem[]> {
+  public getInventoryItems(tenantId: number, itemsIds?: number[]): Promise<IItem[]> {
     const { Item } = this.tenancy.models(tenantId);
 
-    return Item.query().where('type', 'inventory');
+    return Item.query().onBuild((q) => {
+      q.where('type', 'inventory');
+
+      if (!isEmpty(itemsIds)) {
+        q.whereIn('id', itemsIds);
+      }
+    })
   }
 
   /**
diff --git a/server/src/services/FinancialStatements/InventoryDetails/InventoryDetailsService.ts b/server/src/services/FinancialStatements/InventoryDetails/InventoryDetailsService.ts
index c1628042e..93e8045a0 100644
--- a/server/src/services/FinancialStatements/InventoryDetails/InventoryDetailsService.ts
+++ b/server/src/services/FinancialStatements/InventoryDetails/InventoryDetailsService.ts
@@ -31,6 +31,7 @@ export default class InventoryDetailsService extends FinancialSheet {
     return {
       fromDate: moment().startOf('year').format('YYYY-MM-DD'),
       toDate: moment().endOf('year').format('YYYY-MM-DD'),
+      itemsIds: [],
       numberFormat: {
         precision: 2,
         divideOn1000: false,
@@ -91,8 +92,10 @@ export default class InventoryDetailsService extends FinancialSheet {
       ...query,
     };
     // Retrieves the items.
-    const items = await this.reportRepo.getInventoryItems(tenantId);
-
+    const items = await this.reportRepo.getInventoryItems(
+      tenantId,
+      filter.itemsIds
+    );
     // Opening balance transactions.
     const openingBalanceTransactions =
       await this.reportRepo.openingBalanceTransactions(tenantId, filter);
diff --git a/server/src/services/FinancialStatements/InventoryValuationSheet/InventoryValuationSheetService.ts b/server/src/services/FinancialStatements/InventoryValuationSheet/InventoryValuationSheetService.ts
index fe818b419..f34d12eb6 100644
--- a/server/src/services/FinancialStatements/InventoryValuationSheet/InventoryValuationSheetService.ts
+++ b/server/src/services/FinancialStatements/InventoryValuationSheet/InventoryValuationSheetService.ts
@@ -26,6 +26,7 @@ export default class InventoryValuationSheetService {
   get defaultQuery(): IInventoryValuationReportQuery {
     return {
       asDate: moment().endOf('year').format('YYYY-MM-DD'),
+      itemsIds: [],
       numberFormat: {
         precision: 2,
         divideOn1000: false,
@@ -75,9 +76,6 @@ export default class InventoryValuationSheetService {
   ) {
     const { Item, InventoryCostLotTracker } = this.tenancy.models(tenantId);
 
-    const inventoryItems = await Item.query().where('type', 'inventory');
-    const inventoryItemsIds = inventoryItems.map((item) => item.id);
-
     // Settings tenant service.
     const settings = this.tenancy.settings(tenantId);
     const baseCurrency = settings.get({
@@ -89,6 +87,15 @@ export default class InventoryValuationSheetService {
       ...this.defaultQuery,
       ...query,
     };
+    const inventoryItems = await Item.query().onBuild(q => {
+      q.where('type', 'inventory');
+
+      if (filter.itemsIds.length > 0) {
+        q.whereIn('id', filter.itemsIds);
+      }
+    });
+    const inventoryItemsIds = inventoryItems.map((item) => item.id);
+
     const commonQuery = (builder) => {
       builder.whereIn('item_id', inventoryItemsIds);
       builder.sum('rate as rate');
diff --git a/server/src/services/FinancialStatements/PurchasesByItems/PurchasesByItemsService.ts b/server/src/services/FinancialStatements/PurchasesByItems/PurchasesByItemsService.ts
index aa52120c1..80455f585 100644
--- a/server/src/services/FinancialStatements/PurchasesByItems/PurchasesByItemsService.ts
+++ b/server/src/services/FinancialStatements/PurchasesByItems/PurchasesByItemsService.ts
@@ -24,6 +24,7 @@ export default class InventoryValuationReportService {
     return {
       fromDate: moment().startOf('year').format('YYYY-MM-DD'),
       toDate: moment().endOf('year').format('YYYY-MM-DD'),
+      itemsIds: [],
       numberFormat: {
         precision: 2,
         divideOn1000: false,
@@ -91,7 +92,13 @@ export default class InventoryValuationReportService {
       filter,
       tenantId,
     });
-    const inventoryItems = await Item.query().where('type', 'inventory');
+    const inventoryItems = await Item.query().onBuild(q => {
+      q.where('type', 'inventory');
+
+      if (filter.itemsIds.length > 0) {
+        q.whereIn('id', filter.itemsIds);
+      }
+    });
     const inventoryItemsIds = inventoryItems.map((item) => item.id);
 
     // Calculates the total inventory total quantity and rate `IN` transactions.
diff --git a/server/src/services/FinancialStatements/SalesByItems/SalesByItemsService.ts b/server/src/services/FinancialStatements/SalesByItems/SalesByItemsService.ts
index bbcc05100..093027fa2 100644
--- a/server/src/services/FinancialStatements/SalesByItems/SalesByItemsService.ts
+++ b/server/src/services/FinancialStatements/SalesByItems/SalesByItemsService.ts
@@ -24,6 +24,7 @@ export default class SalesByItemsReportService {
     return {
       fromDate: moment().startOf('year').format('YYYY-MM-DD'),
       toDate: moment().endOf('year').format('YYYY-MM-DD'),
+      itemsIds: [],
       numberFormat: {
         precision: 2,
         divideOn1000: false,
@@ -91,7 +92,14 @@ export default class SalesByItemsReportService {
       filter,
       tenantId,
     });
-    const inventoryItems = await Item.query().where('type', 'inventory');
+    // Inventory items for sales report.
+    const inventoryItems = await Item.query().onBuild((q) => {
+      q.where('type', 'inventory');
+
+      if (filter.itemsIds.length > 0) {
+        q.whereIn('id', filter.itemsIds);
+      }
+    });
     const inventoryItemsIds = inventoryItems.map((item) => item.id);
 
     // Calculates the total inventory total quantity and rate `IN` transactions.
diff --git a/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersRepository.ts b/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersRepository.ts
index 603c339db..e3201660a 100644
--- a/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersRepository.ts
+++ b/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersRepository.ts
@@ -1,4 +1,4 @@
-import { map } from 'lodash';
+import { isEmpty, map } from 'lodash';
 import { IAccount, IAccountTransaction } from 'interfaces';
 import { ACCOUNT_TYPE } from 'data/AccountTypes';
 import HasTenancyService from 'services/Tenancy/TenancyService';
@@ -13,10 +13,16 @@ export default class TransactionsByCustomersRepository {
    * @param {number} tenantId 
    * @returns {Promise<ICustomer[]>}
    */
-  public async getCustomers(tenantId: number) {
+  public async getCustomers(tenantId: number, customersIds?: number[]) {
     const { Customer } = this.tenancy.models(tenantId);
 
-    return Customer.query().orderBy('displayName');
+    return Customer.query().onBuild((q) => {
+      q.orderBy('displayName');
+
+      if (!isEmpty(customersIds)) {
+        q.whereIn('id', customersIds);
+      }
+    });
   }
 
   /**
diff --git a/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersService.ts b/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersService.ts
index 0de5a070c..548ee7645 100644
--- a/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersService.ts
+++ b/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersService.ts
@@ -44,6 +44,8 @@ export default class TransactionsByCustomersService
       },
       noneZero: false,
       noneTransactions: false,
+
+      customersIds: [],
     };
   }
 
@@ -125,7 +127,7 @@ export default class TransactionsByCustomersService
     const accountsGraph = await accountRepository.getDependencyGraph();
 
     // Retrieve the report customers.
-    const customers = await this.reportRepository.getCustomers(tenantId);
+    const customers = await this.reportRepository.getCustomers(tenantId, filter.customersIds);
 
     const openingBalanceDate = moment(filter.fromDate)
       .subtract(1, 'days')
diff --git a/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorRepository.ts b/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorRepository.ts
index c67b09741..daa9f3424 100644
--- a/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorRepository.ts
+++ b/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorRepository.ts
@@ -1,5 +1,5 @@
 import { Inject, Service } from 'typedi';
-import { map } from 'lodash';
+import { isEmpty, map } from 'lodash';
 import { IVendor, IAccount, IAccountTransaction } from 'interfaces';
 import HasTenancyService from 'services/Tenancy/TenancyService';
 import { ACCOUNT_TYPE } from 'data/AccountTypes';
@@ -14,10 +14,19 @@ export default class TransactionsByVendorRepository {
    * @param {number} tenantId
    * @returns {Promise<IVendor[]>}
    */
-  public getVendors(tenantId: number): Promise<IVendor[]> {
+  public getVendors(
+    tenantId: number,
+    vendorsIds?: number[]
+  ): Promise<IVendor[]> {
     const { Vendor } = this.tenancy.models(tenantId);
 
-    return Vendor.query().orderBy('displayName');
+    return Vendor.query().onBuild((q) => {
+      q.orderBy('displayName');
+
+      if (!isEmpty(vendorsIds)) {
+        q.whereIn('id', vendorsIds);
+      }
+    });
   }
 
   /**
@@ -67,7 +76,7 @@ export default class TransactionsByVendorRepository {
    * @param {Date|string} openingDate
    * @param {number[]} customersIds
    */
-   public async getVendorsPeriodTransactions(
+  public async getVendorsPeriodTransactions(
     tenantId: number,
     fromDate: Date,
     toDate: Date
diff --git a/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorService.ts b/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorService.ts
index 354e5fa45..db934fbd3 100644
--- a/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorService.ts
+++ b/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorService.ts
@@ -45,6 +45,8 @@ export default class TransactionsByVendorsService
       },
       noneZero: false,
       noneTransactions: false,
+
+      vendorsIds: [],
     };
   }
 
@@ -139,12 +141,13 @@ export default class TransactionsByVendorsService
       group: 'organization',
       key: 'base_currency',
     });
-
     const filter = { ...this.defaultQuery, ...query };
 
     // Retrieve the report vendors.
-    const vendors = await this.reportRepository.getVendors(tenantId);
-
+    const vendors = await this.reportRepository.getVendors(
+      tenantId,
+      filter.vendorsIds
+    );
     // Retrieve the accounts graph.
     const accountsGraph = await accountRepository.getDependencyGraph();