feat: Calculate the total pending when matching.

packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingTransaction.tsx

@@ -2,7 +2,7 @@
 import { isEmpty } from 'lodash';
 import * as R from 'ramda';
 import { AnchorButton, Button, Intent, Tag, Text } from '@blueprintjs/core';
-import { AppToaster, Box, Group, Stack } from '@/components';
+import { AppToaster, Box, FormatNumber, Group, Stack } from '@/components';
 import {
   MatchingTransactionBoot,
   useMatchingTransactionBoot,
@@ -12,7 +12,7 @@ import styles from './CategorizeTransactionAside.module.scss';
 import { FastField, FastFieldProps, Form, Formik } from 'formik';
 import { useMatchTransaction } from '@/hooks/query/bank-rules';
 import { MatchingTransactionFormValues } from './types';
-import { transformToReq } from './utils';
+import { transformToReq, useGetPendingAmountMatched } from './utils';
 import {
   WithBankingActionsProps,
   withBankingActions,
@@ -136,10 +136,12 @@ function GoodMatchingTransactions() {
 
       <Stack spacing={9} style={{ padding: '12px 15px' }}>
         {possibleMatches.map((match, index) => (
-          <MatchTransaction
+          <MatchTransactionField
             key={index}
             label={`${match.transsactionTypeFormatted} for ${match.amountFormatted}`}
             date={match.dateFormatted}
+            transactionId={match.transactionId}
+            transactionType={match.transactionType}
           />
         ))}
       </Stack>
@@ -189,6 +191,9 @@ const MatchTransactionFooter = R.compose(withBankingActions)(
     const handleCancelBtnClick = () => {
       closeMatchingTransactionAside();
     };
+
+    const totalPending = useGetPendingAmountMatched();
+
     return (
       <Box className={styles.footer}>
         <Box className={styles.footerTotal}>
@@ -196,7 +201,10 @@ const MatchTransactionFooter = R.compose(withBankingActions)(
             <AnchorButton small minimal intent={Intent.PRIMARY}>
               Add Reconcile Transaction +
             </AnchorButton>
-            <Text style={{ fontSize: 13 }}>Pending $10,000</Text>
+
+            <Text style={{ fontSize: 13 }} tagName='span'>
+              Pending <FormatNumber value={totalPending} currency={'USD'} />
+            </Text>
           </Group>
         </Box>
 

packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingTransactionBoot.tsx

@@ -1,5 +1,6 @@
-import { useMatchingTransactions } from '@/hooks/query/bank-rules';
+import { defaultTo } from 'lodash';
 import React, { createContext } from 'react';
+import { useMatchingTransactions } from '@/hooks/query/bank-rules';
 
 interface MatchingTransactionBootValues {
   isMatchingTransactionsLoading: boolean;
@@ -29,9 +30,9 @@ function MatchingTransactionBoot({
 
   const provider = {
     isMatchingTransactionsLoading,
-    possibleMatches: matchingTransactions?.possibleMatches,
-    perfectMatchesCount: 2,
-    perfectMatches: matchingTransactions?.perfectMatches,
+    possibleMatches: defaultTo(matchingTransactions?.possibleMatches, []),
+    perfectMatchesCount: matchingTransactions?.perfectMatches?.length || 0,
+    perfectMatches: defaultTo(matchingTransactions?.perfectMatches, []),
   } as MatchingTransactionBootValues;
 
   return <RuleFormBootContext.Provider value={provider} {...props} />;

packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/utils.ts

@@ -1,4 +1,6 @@
+import { useFormikContext } from 'formik';
 import { MatchingTransactionFormValues } from './types';
+import { useMatchingTransactionBoot } from './MatchingTransactionBoot';
 
 export const transformToReq = (values: MatchingTransactionFormValues) => {
   const matchedTransactions = Object.entries(values.matched)
@@ -11,3 +13,22 @@ export const transformToReq = (values: MatchingTransactionFormValues) => {
 
   return { matchedTransactions };
 };
+
+export const useGetPendingAmountMatched = () => {
+  const { values } = useFormikContext<MatchingTransactionFormValues>();
+  const { perfectMatches, possibleMatches } = useMatchingTransactionBoot();
+
+  const matchedItems = [...perfectMatches, ...possibleMatches].filter(
+    (match) => {
+      const key = `${match.transactionType}-${match.transactionId}`;
+      return values.matched[key];
+    },
+  );
+  const totalMatchedAmount = matchedItems.reduce(
+    (total, item) => total + parseFloat(item.amount),
+    0,
+  );
+  const pendingAmount = 0 - totalMatchedAmount;
+
+  return pendingAmount;
+};