diff --git a/client/src/components/CustomersMultiSelect.js b/client/src/components/CustomersMultiSelect.js
new file mode 100644
index 000000000..1afa5a2f2
--- /dev/null
+++ b/client/src/components/CustomersMultiSelect.js
@@ -0,0 +1,82 @@
+import React, { useMemo, useCallback, useState } from 'react';
+import { MenuItem, Button } from '@blueprintjs/core';
+import { omit } from 'lodash';
+import MultiSelect from 'components/MultiSelect';
+import { FormattedMessage as T } from 'react-intl';
+
+export default function CustomersMultiSelect({
+ customers,
+ defaultText = ,
+ buttonProps,
+
+ onCustomerSelected,
+ ...selectProps
+}) {
+ const [selectedCustomers, setSelectedCustomers] = useState({});
+
+ const isCustomerSelect = useCallback(
+ (id) => typeof selectedCustomers[id] !== 'undefined',
+ [selectedCustomers],
+ );
+
+ const customerRenderer = useCallback(
+ (customer, { handleClick }) => (
+
+ ),
+ [isCustomerSelect],
+ );
+
+ const countSelected = useMemo(() => Object.values(selectedCustomers).length, [
+ selectedCustomers,
+ ]);
+
+ const onContactSelect = useCallback(
+ ({ id }) => {
+ const selected = {
+ ...(isCustomerSelect(id)
+ ? {
+ ...omit(selectedCustomers, [id]),
+ }
+ : {
+ ...selectedCustomers,
+ [id]: true,
+ }),
+ };
+ setSelectedCustomers({ ...selected });
+ onCustomerSelected && onCustomerSelected(selected);
+ },
+ [
+ setSelectedCustomers,
+ selectedCustomers,
+ isCustomerSelect,
+ onCustomerSelected,
+ ],
+ );
+
+ return (
+ }
+ itemRenderer={customerRenderer}
+ popoverProps={{ minimal: true }}
+ filterable={true}
+ onItemSelect={onContactSelect}
+ >
+
+ )
+ }
+ {...buttonProps}
+ />
+
+ );
+}
diff --git a/client/src/components/index.js b/client/src/components/index.js
index a11744c50..f238538d4 100644
--- a/client/src/components/index.js
+++ b/client/src/components/index.js
@@ -43,6 +43,7 @@ import DashboardCard from './Dashboard/DashboardCard';
import InputPrependText from './Forms/InputPrependText';
import PageFormBigNumber from './PageFormBigNumber';
import AccountsMultiSelect from './AccountsMultiSelect';
+import CustomersMultiSelect from './CustomersMultiSelect';
const Hint = FieldHint;
@@ -91,5 +92,6 @@ export {
InputPrependText,
PageFormBigNumber,
AccountsMultiSelect,
- DataTableEditable
+ DataTableEditable,
+ CustomersMultiSelect
};
diff --git a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneral.js b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneral.js
index c90dd9554..585b70d25 100644
--- a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneral.js
+++ b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneral.js
@@ -1,15 +1,28 @@
import React from 'react';
import { FastField } from 'formik';
import { DateInput } from '@blueprintjs/datetime';
-import { Intent, FormGroup, InputGroup, Position } from '@blueprintjs/core';
+import {
+ Intent,
+ FormGroup,
+ InputGroup,
+ Position,
+ Classes,
+} from '@blueprintjs/core';
import { FormattedMessage as T } from 'react-intl';
-import { Row, Col, FieldHint } from 'components';
+import classNames from 'classnames';
+import { CustomersMultiSelect, Row, Col, FieldHint } from 'components';
import { momentFormatter } from 'utils';
+import withCustomers from 'containers/Customers/withCustomers';
+
+import { compose } from 'redux';
/**
* AR Aging Summary - Drawer Header - General Fields.
*/
-export default function ARAgingSummaryHeaderGeneral({}) {
+function ARAgingSummaryHeaderGeneral({
+ // #withCustomers
+ customers,
+}) {
return (
@@ -48,7 +61,11 @@ export default function ARAgingSummaryHeaderGeneral({}) {
className={'form-group--aging-before-days'}
intent={error && Intent.DANGER}
>
-
+
)}
@@ -65,12 +82,31 @@ export default function ARAgingSummaryHeaderGeneral({}) {
className={'form-group--aging-periods'}
intent={error && Intent.DANGER}
>
-
+
)}
+
+
+ }
+ className={classNames('form-group--select-list', Classes.FILL)}
+ >
+
+
+
+
);
}
+export default compose(
+ withCustomers(({ customers }) => ({
+ customers,
+ })),
+)(ARAgingSummaryHeaderGeneral);
diff --git a/client/src/lang/en/index.js b/client/src/lang/en/index.js
index 02bb0bb5b..a04766a30 100644
--- a/client/src/lang/en/index.js
+++ b/client/src/lang/en/index.js
@@ -970,5 +970,8 @@ export default {
'You could not delete item that has associated inventory adjustments transactions',
format: 'Format',
current: 'Current',
- adjustment_reasons: 'Adjustment reasons'
+ adjustment_reasons: 'Adjustment reasons',
+ specific_customers: 'Specific Customers',
+ all_customers: 'All Customers',
+ selected_customers: '{count} Selected Customers',
};