feat: Financial statements enhancement.

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,
 }