feat: calculate total amount of form entries.

client/src/components/PageFormBigNumber.js

@@ -10,9 +10,8 @@ export default function PageFormBigNumber({ label, amount, currencyCode }) {
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_BIG_NUMBERS)}>
       <div class="big-amount">
         <span class="big-amount__label">{ label }</span>
-
         <h1 class="big-amount__number">
-          <Money amount={0} currency={'LYD'} />
+          <Money amount={amount} currency={currencyCode} />
         </h1>
       </div>
     </div>

client/src/containers/Entries/ItemsEntriesTable.js

@@ -1,5 +1,4 @@
 import React, { useState, useMemo, useEffect, useCallback } from 'react';
-import { omit } from 'lodash';
 import { Button, Intent, Position, Tooltip } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import classNames from 'classnames';

client/src/containers/Expenses/ExpenseFormHeader.js

@@ -1,5 +1,7 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
+import { sumBy } from 'lodash';
+import { useFormikContext } from 'formik';
 
 import { CLASSES } from 'common/classes';
 
@@ -8,15 +10,21 @@ import { PageFormBigNumber } from 'components';
 
 // Expense form header.
 export default function ExpenseFormHeader() {
+  const { values } = useFormikContext();
+
+  // Calculates the expense entries amount.
+  const totalExpenseAmount = useMemo(() => sumBy(values.categories, 'amount'), [
+    values.categories,
+  ]);
+
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
       <ExpenseFormHeaderFields />
-
       <PageFormBigNumber
         label={'Expense Amount'}
-        amount={0}
+        amount={totalExpenseAmount}
         currencyCode={'LYD'}
       />
     </div>
-  )
+  );
 }

client/src/containers/Purchases/Bill/BillFormHeader.js

@@ -1,5 +1,7 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
+import { sumBy } from 'lodash';
+import { useFormikContext } from 'formik';
 
 import { CLASSES } from 'common/classes';
 
@@ -10,11 +12,21 @@ import { PageFormBigNumber } from 'components';
  * Fill form header.
  */
 export default function BillFormHeader({ onBillNumberChanged }) {
+  const { values } = useFormikContext();
+
+  // Calculate the total due amount of bill entries.
+  const totalDueAmount = useMemo(() => sumBy(values.entries, 'total'), [
+    values.entries,
+  ]);
+
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
       <BillFormHeaderFields onBillNumberChanged={onBillNumberChanged} />
-
+      <PageFormBigNumber
-      <PageFormBigNumber label={'Due Amount'} amount={0} currencyCode={'LYD'} />
+        label={'Due Amount'}
+        amount={totalDueAmount}
+        currencyCode={'LYD'}
+      />
     </div>
   );
 }

client/src/containers/Sales/Estimate/EstimateFormHeader.js

@@ -1,6 +1,9 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { compose } from 'utils';
 import classNames from 'classnames';
+import { sumBy } from 'lodash';
+import { useFormikContext } from 'formik';
+
 import { CLASSES } from 'common/classes';
 
 import { PageFormBigNumber } from 'components';
@@ -10,17 +13,28 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 
 import EstimateFormHeaderFields from './EstimateFormHeaderFields';
 
+// Estimate form top header.
 function EstimateFormHeader({
   // #ownProps
   onEstimateNumberChanged,
 }) {
+  const { values } = useFormikContext();
+
+  // Calculate the total due amount of bill entries.
+  const totalDueAmount = useMemo(() => sumBy(values.entries, 'total'), [
+    values.entries,
+  ]);
+
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
       <EstimateFormHeaderFields
         onEstimateNumberChanged={onEstimateNumberChanged}
       />
-
+      <PageFormBigNumber
-      <PageFormBigNumber label={'Amount'} amount={0} currencyCode={'LYD'} />
+        label={'Amount'}
+        amount={totalDueAmount}
+        currencyCode={'LYD'}
+      />
     </div>
   );
 }

client/src/containers/Sales/Invoice/InvoiceFormHeader.js

@@ -1,5 +1,8 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
+import { sumBy } from 'lodash';
+import { useFormikContext } from 'formik';
+
 import { CLASSES } from 'common/classes';
 
 import InvoiceFormHeaderFields from './InvoiceFormHeaderFields';
@@ -12,15 +15,21 @@ export default function InvoiceFormHeader({
   // #ownProps
   onInvoiceNumberChanged,
 }) {
+  const { values } = useFormikContext();
+
+  // Calculate the total due amount of invoice entries.
+  const totalDueAmount = useMemo(() => sumBy(values.entries, 'total'), [
+    values.entries,
+  ]);
+
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
       <InvoiceFormHeaderFields
         onInvoiceNumberChanged={onInvoiceNumberChanged}
       />
-
       <PageFormBigNumber
         label={'Due Amount'}
-        amount={0}
+        amount={totalDueAmount}
         currencyCode={'LYD'}
       />
     </div>

client/src/containers/Sales/Receipt/ReceiptFormHeader.js

@@ -1,28 +1,34 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
+import { sumBy } from 'lodash';
+import { useFormikContext } from 'formik';
 
-import { Money } from 'components';
 import { CLASSES } from 'common/classes';
 import ReceiptFormHeaderFields from './ReceiptFormHeaderFields';
 
+import { PageFormBigNumber } from 'components';
+
 export default function ReceiptFormHeader({
   // #ownProps
   onReceiptNumberChanged,
 }) {
+  const { values } = useFormikContext();
+
+  // Calculate the total due amount of bill entries.
+  const totalDueAmount = useMemo(() => sumBy(values.entries, 'total'), [
+    values.entries,
+  ]);
+
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
       <ReceiptFormHeaderFields
         onReceiptNumberChanged={onReceiptNumberChanged}
       />
-
+      <PageFormBigNumber
-      <div className={classNames(CLASSES.PAGE_FORM_HEADER_BIG_NUMBERS)}>
+        label={'Due Amount'}
-        <div class="big-amount">
+        amount={totalDueAmount}
-          <span class="big-amount__label">Due Amount</span>
+        currencyCode={'LYD'}
-          <h1 class="big-amount__number">
+      />
-            <Money amount={0} currency={'LYD'} />
-          </h1>
-        </div>
-      </div>
     </div>
   );
 }