QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-19 06:10:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Calculate the total pending when matching.

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2024-06-29 14:35:24 +02:00
parent b01528c06b
commit 5d5d4a1972
3 changed files with 38 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingTransaction.tsx
View File

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

9
packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingTransactionBoot.tsx
View File

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

21
packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/utils.ts
View File

@@ -1,4 +1,6 @@
import { useFormikContext } from 'formik';
import { MatchingTransactionFormValues } from './types'; import { MatchingTransactionFormValues } from './types';
import { useMatchingTransactionBoot } from './MatchingTransactionBoot';
export const transformToReq = (values: MatchingTransactionFormValues) => { export const transformToReq = (values: MatchingTransactionFormValues) => {
const matchedTransactions = Object.entries(values.matched) const matchedTransactions = Object.entries(values.matched)
@@ -11,3 +13,22 @@ export const transformToReq = (values: MatchingTransactionFormValues) => {
return { matchedTransactions }; 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;
};