feat: calculate total amount of form entries.

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>
-  )
-}
+  );
+}