feat: Financial statements enhancement.

client/src/containers/Accounting/MakeJournalEntriesForm.js

@@ -97,6 +97,7 @@ function MakeJournalEntriesForm({
             is: (credit, debit) => credit || debit,
             then: Yup.number().required(),
           }),
+        contact_id: Yup.number().nullable(),
         note: Yup.string().nullable(),
       }),
     ),
@@ -114,6 +115,7 @@ function MakeJournalEntriesForm({
   const defaultEntry = useMemo(
     () => ({
       account_id: null,
+      contact_id: null,
       credit: 0,
       debit: 0,
       note: '',

client/src/containers/Accounting/MakeJournalEntriesHeader.js

@@ -30,7 +30,7 @@ export default function MakeJournalEntriesHeader({
   return (
     <div class="make-journal-entries__header">
       <Row>
-        <Col sm={3}>
+        <Col width={260}>
           <FormGroup
             label={<T id={'journal_number'}/>}
             labelInfo={infoIcon}
@@ -46,7 +46,7 @@ export default function MakeJournalEntriesHeader({
           </FormGroup>
         </Col>
 
-        <Col sm={2}>
+        <Col width={220}>
           <FormGroup
           label={<T id={'date'}/>}
             intent={(errors.date && touched.date) && Intent.DANGER}
@@ -61,7 +61,7 @@ export default function MakeJournalEntriesHeader({
           </FormGroup>
         </Col>
 
-        <Col sm={4}>
+        <Col width={400}>
           <FormGroup
             label={<T id={'description'}/>}
             className={'form-group--description'}
@@ -78,7 +78,7 @@ export default function MakeJournalEntriesHeader({
       </Row>
 
       <Row>
-        <Col sm={3}>
+        <Col width={260}>
           <FormGroup
             label={<T id={'reference'}/>}
             labelInfo={infoIcon}
@@ -94,7 +94,7 @@ export default function MakeJournalEntriesHeader({
           </FormGroup>
         </Col>
 
-        <Col sm={4}>
+        <Col width={220}>
           <CurrenciesSelectList />
         </Col>
       </Row>

client/src/containers/Accounting/MakeJournalEntriesPage.js

@@ -1,9 +1,11 @@
 import React, { useCallback } from 'react';
 import { useParams, useHistory } from 'react-router-dom';
 import { useQuery } from 'react-query';
+
 import MakeJournalEntriesForm from './MakeJournalEntriesForm';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 
+import withCustomersActions from 'containers/Customers/withCustomersActions';
 import withAccountsActions from 'containers/Accounts/withAccountsActions';
 import withManualJournalsActions from 'containers/Accounting/withManualJournalsActions';
 
@@ -11,8 +13,14 @@ import {compose} from 'utils';
 
 
 function MakeJournalEntriesPage({
-  requestFetchManualJournal,
+  // #withCustomersActions
+  requestFetchCustomers,
+
+  // #withAccountsActions
   requestFetchAccounts,
+
+  // #withManualJournalActions
+  requestFetchManualJournal,
 }) {
   const history = useHistory();
   const { id } = useParams();
@@ -20,6 +28,9 @@ function MakeJournalEntriesPage({
   const fetchAccounts = useQuery('accounts-list',
     (key) => requestFetchAccounts());
 
+  const fetchCustomers = useQuery('customers-list',
+    (key) => requestFetchCustomers());
+
   const fetchJournal = useQuery(
     id && ['manual-journal', id],
     (key, journalId) => requestFetchManualJournal(journalId));
@@ -35,7 +46,11 @@ function MakeJournalEntriesPage({
 
   return (
     <DashboardInsider
-      loading={fetchJournal.isFetching || fetchAccounts.isFetching}
+      loading={
+        fetchJournal.isFetching ||
+        fetchAccounts.isFetching ||
+        fetchCustomers.isFetching
+      }
       name={'make-journal-page'}>
       <MakeJournalEntriesForm
         onFormSubmit={handleFormSubmit}
@@ -47,5 +62,6 @@ function MakeJournalEntriesPage({
 
 export default compose(
   withAccountsActions,
+  withCustomersActions,
   withManualJournalsActions,
 )(MakeJournalEntriesPage);

client/src/containers/Accounting/MakeJournalEntriesTable.js

@@ -1,17 +1,20 @@
 import React, { useState, useMemo, useEffect, useCallback } from 'react';
 import { Button, Intent } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
+import { omit } from 'lodash';
 
 import DataTable from 'components/DataTable';
 import Icon from 'components/Icon';
+import { Hint } from 'components';
 import { compose, formattedAmount } from 'utils';
 import {
   AccountsListFieldCell,
   MoneyFieldCell,
   InputGroupCell,
+  ContactsListFieldCell,
 } from 'components/DataTableCells';
-import { omit } from 'lodash';
 import withAccounts from 'containers/Accounts/withAccounts';
+import withCustomers from 'containers/Customers/withCustomers';
 
 // Actions cell renderer.
 const ActionsCellRenderer = ({
@@ -73,6 +76,9 @@ const NoteCellRenderer = (chainedComponent) => (props) => {
  * Make journal entries table component.
  */
 function MakeJournalEntriesTable({
+  // #withCustomers
+  customers,
+
   // #withAccounts
   accounts,
 
@@ -142,6 +148,7 @@ function MakeJournalEntriesTable({
         width: 40,
         disableResizing: true,
         disableSortBy: true,
+        sticky: 'left',
       },
       {
         Header: formatMessage({ id: 'account' }),
@@ -171,6 +178,16 @@ function MakeJournalEntriesTable({
         disableResizing: true,
         width: 150,
       },
+      {
+        Header: (<><T id={'contact'} /><Hint /></>),
+        id: 'contact_id',
+        accessor: 'contact_id',
+        Cell: NoteCellRenderer(ContactsListFieldCell),
+        className: 'contact',
+        disableResizing: true,
+        disableSortBy: true,
+        width: 180,
+      },
       {
         Header: formatMessage({ id: 'note' }),
         accessor: 'note',
@@ -216,6 +233,11 @@ function MakeJournalEntriesTable({
           errors: errors.entries || [],
           updateData: handleUpdateData,
           removeRow: handleRemoveRow,
+          contacts: [
+            ...customers.map((customer) => ({
+              ...customer, contact_type: 'customer',
+            })),
+          ],
         }}
       />
 
@@ -244,4 +266,7 @@ export default compose(
   withAccounts(({ accounts }) => ({
     accounts,
   })),
+  withCustomers(({ customersItems }) => ({
+    customers: customersItems,
+  })),
 )(MakeJournalEntriesTable);