feat: Financial statements enhancement.

client/src/components/ContactsListField.js

@@ -0,0 +1,51 @@
+import React, { useCallback, useState } from 'react';
+import {
+  MenuItem,
+  Button,
+} from '@blueprintjs/core';
+import ListSelect from 'components/ListSelect';
+import { FormattedMessage as T } from 'react-intl';
+
+export default function ContactsListField({
+  contacts,
+  onContactSelected,
+  error,
+  initialContact,
+  defautlSelectText = (<T id={'select_contact'} />)
+}) {
+  const [selectedContact, setSelectedContact] = useState(
+    initialContact || null
+  );
+
+  const contactTypeLabel = (contactType) => {
+    switch(contactType) {
+      case 'customer':
+        return 'Customer';
+      case 'vendor':
+        return 'Vendor';
+    }
+  };
+  // Contact item of select accounts field.
+  const contactItem = useCallback((item, { handleClick, modifiers, query }) => (
+    <MenuItem text={item.display_name} label={contactTypeLabel(item.contact_type)} key={item.id} onClick={handleClick} />
+  ), []);
+
+  const onContactSelect = useCallback((contact) => {
+    setSelectedContact(contact.id);
+    onContactSelected && onContactSelected(contact.id);
+  }, [setSelectedContact, onContactSelected]);
+
+  return (
+    <ListSelect
+      items={contacts}
+      noResults={<MenuItem disabled={true} text='No results.' />}
+      itemRenderer={contactItem}
+      popoverProps={{ minimal: true }}
+      filterable={true}
+      onItemSelect={onContactSelect}
+      labelProp={'display_name'}
+      selectedItem={selectedContact}
+      selectedItemProp={'id'} 
+      defaultText={defautlSelectText} />
+  );
+}

client/src/components/Dashboard/DashboardTopbar.js

@@ -7,6 +7,8 @@ import {
   NavbarDivider,
   Button,
   Classes,
+  Tooltip,
+  Position,
 } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
 
@@ -56,25 +58,27 @@ function DashboardTopbar({
     <div class='dashboard__topbar'>
       <div class='dashboard__topbar-left'>
         <div class='dashboard__topbar-sidebar-toggle'>
-          <Button minimal={true} onClick={handleSidebarToggleBtn}>
-            <svg
-              xmlns='http://www.w3.org/2000/svg'
-              width='20'
-              height='20'
-              viewBox='0 0 20 20'
-              role='img'
-              focusable='false'
-            >
-              <title><T id={'menu'}/></title>
-              <path
-                stroke='currentColor'
-                stroke-linecap='round'
-                stroke-miterlimit='5'
-                stroke-width='2'
-                d='M4 7h15M4 12h15M4 17h15'
-              ></path>
-            </svg>
-          </Button>
+          <Tooltip content={<T id={'close_sidebar'} />} position={Position.RIGHT}>
+            <Button minimal={true} onClick={handleSidebarToggleBtn}>
+              <svg
+                xmlns='http://www.w3.org/2000/svg'
+                width='20'
+                height='20'
+                viewBox='0 0 20 20'
+                role='img'
+                focusable='false'
+              >
+                <title><T id={'menu'}/></title>
+                <path
+                  stroke='currentColor'
+                  stroke-linecap='round'
+                  stroke-miterlimit='5'
+                  stroke-width='2'
+                  d='M4 7h15M4 12h15M4 17h15'
+                ></path>
+              </svg>
+            </Button>
+          </Tooltip>
         </div>
 
         <div class='dashboard__title'>

client/src/components/DataTableCells/ContactsListFieldCell.js

@@ -0,0 +1,35 @@
+import React, { useCallback, useMemo } from 'react';
+import { FormGroup, Classes } from "@blueprintjs/core";
+import classNames from 'classnames';
+import ContactsListField from 'components/ContactsListField';
+
+export default function ContactsListCellRenderer({
+  column: { id, value },
+  row: { index, original },
+  cell: { value: initialValue },
+  payload: { contacts, updateData, errors }
+}) {
+  const handleContactSelected = useCallback((contactId) => {
+    updateData(index, id, contactId)
+  }, [updateData, index, id]);
+
+  const initialContact = useMemo(() => {
+    return contacts.find(c => c.id === initialValue);
+  }, [contacts, initialValue]);
+
+  return (
+    <FormGroup
+      className={classNames(
+        'form-group--select-list',
+        'form-group--contacts-list',
+        Classes.FILL,
+      )}
+    >
+      <ContactsListField
+        contacts={contacts}
+        onContactSelected={handleContactSelected}
+        initialContact={initialContact}
+      />
+    </FormGroup>
+  )
+}

client/src/components/DataTableCells/index.js

@@ -1,9 +1,11 @@
 import AccountsListFieldCell from './AccountsListFieldCell';
 import MoneyFieldCell from './MoneyFieldCell';
 import InputGroupCell from './InputGroupCell';
+import ContactsListFieldCell from './ContactsListFieldCell';
 
 export {
   AccountsListFieldCell,
   MoneyFieldCell,
   InputGroupCell,
+  ContactsListFieldCell,
 }

client/src/components/FieldHint.js

@@ -3,6 +3,8 @@ import Icon from './Icon';
 
 export default function FieldHint({ hint }) {
   return (
-    <Icon icon="info-circle" iconSize={12} />
+    <span class="hint">
+      <Icon icon="info-circle" iconSize={12} />
+    </span>
   );
 }

client/src/components/MenuItemLabel.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default function MenuItemLabel({
+  text
+}) {
+  return (<span class="bp3-menu-item-label">{ text }</span>);
+}

client/src/components/Sidebar/SidebarMenu.js

@@ -4,6 +4,7 @@ import { useHistory, useLocation } from 'react-router-dom';
 import sidebarMenuList from 'config/sidebarMenu';
 import Icon from 'components/Icon';
 import MenuItem from 'components/MenuItem';
+import { MenuItemLabel } from 'components';
 import classNames from 'classnames';
 
 export default function SidebarMenu() {
@@ -29,6 +30,8 @@ export default function SidebarMenu() {
         <div class="bp3-menu-spacer"></div>
       ) : item.divider ? (
         <MenuDivider key={index} title={item.title} />
+      ) : item.label ? (
+        <MenuItemLabel key={index} text={item.text} />
       ) : (
         <MenuItem
           key={index}

client/src/components/index.js

@@ -2,16 +2,20 @@ import If from './Utils/If';
 import Money from './Money';
 import Icon from './Icon';
 import Choose from './Utils/Choose';
-// import For from './Utils/For';
+import For from './Utils/For';
 import ListSelect from './ListSelect';
 import FinancialStatement from './FinancialStatement';
 import DynamicFilterValueField from './DynamicFilter/DynamicFilterValueField';
 import ErrorMessage from './ErrorMessage';
 import MODIFIER from './modifiers';
 import FieldHint from './FieldHint';
+import MenuItemLabel from './MenuItemLabel';
+
+const Hint = FieldHint;
 
 export {
   If,
+  For,
   Money,
   Icon,
   ListSelect,
@@ -21,5 +25,7 @@ export {
   MODIFIER,
   ErrorMessage,
   FieldHint,
+  Hint,
+  MenuItemLabel,
   // For,
 };