diff --git a/src/components/CustomSelectList.js b/src/components/CustomSelectList.js
new file mode 100644
index 000000000..2b0ad4bad
--- /dev/null
+++ b/src/components/CustomSelectList.js
@@ -0,0 +1,103 @@
+import React from 'react';
+import {
+ Button,
+ MenuItem,
+ PopoverInteractionKind,
+ Position,
+} from '@blueprintjs/core';
+import { defaultTo } from 'lodash';
+import { Select } from '@blueprintjs/select';
+import { FormattedMessage as T, Icon } from 'components';
+
+/**
+ * warehouse & branches select list.
+ * @returns
+ */
+export default function CustomSelectList({
+ // #ownProps
+ items,
+ initialItemId,
+ selectedItemId,
+ text,
+ onItemSelected,
+ buttonProps,
+}) {
+ const initialItem = React.useMemo(
+ () => items.find((a) => a.id === initialItemId),
+ [initialItemId, items],
+ );
+
+ const [selecetedItem, setSelectedItem] = React.useState(initialItem || null);
+
+ React.useEffect(() => {
+ if (typeof selectedItemId !== 'undefined') {
+ const item = selectedItemId
+ ? items.find((a) => a.id === selectedItemId)
+ : null;
+ setSelectedItem(item);
+ }
+ }, [selectedItemId, items, setSelectedItem]);
+
+ // Menu items renderer.
+ const itemRenderer = (item, { handleClick, modifiers, query }) => (
+
+ );
+
+ // Filters items items.
+ const filterItemsPredicater = (query, item, _index, exactMatch) => {
+ const normalizedTitle = item.name.toLowerCase();
+ const normalizedQuery = query.toLowerCase();
+
+ if (exactMatch) {
+ return normalizedTitle === normalizedQuery;
+ } else {
+ return `${item.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+ }
+ };
+
+ const handleItemMenuSelect = React.useCallback(
+ (item) => {
+ if (item.id) {
+ setSelectedItem({ ...item });
+ onItemSelected && onItemSelected(item);
+ }
+ },
+ [onItemSelected, setSelectedItem],
+ );
+
+ return (
+ } />}
+ itemRenderer={itemRenderer}
+ itemPredicate={filterItemsPredicater}
+ onItemSelect={handleItemMenuSelect}
+ popoverProps={{
+ minimal: true,
+ position: Position.BOTTOM_LEFT,
+ interactionKind: PopoverInteractionKind.CLICK,
+ modifiers: {
+ offset: { offset: '0, 4' },
+ },
+ }}
+ >
+
+
+ );
+}
diff --git a/src/components/index.js b/src/components/index.js
index 5e14f2288..a5cde02ec 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -58,6 +58,7 @@ import AvaterCell from './AvaterCell';
import { ItemsMultiSelect } from './Items';
import MoreMenuItems from './MoreMenutItems';
+import CustomSelectList from './CustomSelectList'
export * from './Dialog';
export * from './Menu';
@@ -163,4 +164,5 @@ export {
ItemsMultiSelect,
AvaterCell,
MoreMenuItems,
+ CustomSelectList
};
diff --git a/src/containers/Sales/Invoices/InvoiceForm/BaseCurrency.js b/src/containers/Sales/Invoices/InvoiceForm/BaseCurrency.js
new file mode 100644
index 000000000..c4f72e7cc
--- /dev/null
+++ b/src/containers/Sales/Invoices/InvoiceForm/BaseCurrency.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import * as R from 'ramda';
+import styled from 'styled-components';
+
+import { CurrencyTag } from 'components';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+
+/**
+ * base currency sign.
+ */
+function BaseCurrency({
+ // #withCurrentOrganization
+ organization: { base_currency = '' },
+}) {
+ // if (base_currency.length <= 0) {
+ // return null;
+ // }
+
+ return (
+
+