feat: get bank account meta summary

packages/server/src/api/controllers/Banking/BankAccountsController.ts

@@ -0,0 +1,49 @@
+import { Inject, Service } from 'typedi';
+import { NextFunction, Request, Response, Router } from 'express';
+import BaseController from '@/api/controllers/BaseController';
+import { CashflowApplication } from '@/services/Cashflow/CashflowApplication';
+import { GetBankAccountSummary } from '@/services/Banking/BankAccounts/GetBankAccountSummary';
+
+@Service()
+export class BankAccountsController extends BaseController {
+  @Inject()
+  private getBankAccountSummaryService: GetBankAccountSummary;
+
+  /**
+   * Router constructor.
+   */
+  router() {
+    const router = Router();
+
+    router.get('/:bankAccountId/meta', this.getBankAccountSummary.bind(this));
+
+    return router;
+  }
+
+  /**
+   * Retrieves the bank account meta summary.
+   * @param {Request} req
+   * @param {Response} res
+   * @param {NextFunction} next
+   * @returns {Promise<Response|null>}
+   */
+  async getBankAccountSummary(
+    req: Request<{ bankAccountId: number }>,
+    res: Response,
+    next: NextFunction
+  ) {
+    const { bankAccountId } = req.params;
+    const { tenantId } = req;
+
+    try {
+      const data =
+        await this.getBankAccountSummaryService.getBankAccountSummary(
+          tenantId,
+          bankAccountId
+        );
+      return res.status(200).send({ data });
+    } catch (error) {
+      next(error);
+    }
+  }
+}

packages/server/src/api/controllers/Banking/BankingController.ts

@@ -5,6 +5,7 @@ import { PlaidBankingController } from './PlaidBankingController';
 import { BankingRulesController } from './BankingRulesController';
 import { BankTransactionsMatchingController } from './BankTransactionsMatchingController';
 import { RecognizedTransactionsController } from './RecognizedTransactionsController';
+import { BankAccountsController } from './BankAccountsController';
 
 @Service()
 export class BankingController extends BaseController {
@@ -24,7 +25,10 @@ export class BankingController extends BaseController {
       '/recognized',
       Container.get(RecognizedTransactionsController).router()
     );
-
+    router.use(
+      '/bank_accounts',
+      Container.get(BankAccountsController).router()
+    );
     return router;
   }
 }

packages/server/src/services/Banking/BankAccounts/GetBankAccountSummary.ts

@@ -0,0 +1,53 @@
+import HasTenancyService from '@/services/Tenancy/TenancyService';
+import { Server } from 'socket.io';
+import { Inject, Service } from 'typedi';
+
+@Service()
+export class GetBankAccountSummary {
+  @Inject()
+  private tenancy: HasTenancyService;
+
+  /**
+   * Retrieves the bank account meta summary
+   * @param {number} tenantId
+   * @param {number} bankAccountId
+   * @returns
+   */
+  public async getBankAccountSummary(tenantId: number, bankAccountId: number) {
+    const {
+      Account,
+      UncategorizedCashflowTransaction,
+      RecognizedBankTransaction,
+    } = this.tenancy.models(tenantId);
+
+    const bankAccount = await Account.query()
+      .findById(bankAccountId)
+      .throwIfNotFound();
+
+    const uncategorizedTranasctionsCount =
+      await UncategorizedCashflowTransaction.query()
+        .where('accountId', bankAccountId)
+        .count('id as total')
+        .first();
+
+    const recognizedTransactionsCount = await RecognizedBankTransaction.query()
+      .whereExists(
+        UncategorizedCashflowTransaction.query().where(
+          'accountId',
+          bankAccountId
+        )
+      )
+      .count('id as total')
+      .first();
+
+    const totalUncategorizedTransactions =
+      uncategorizedTranasctionsCount?.total;
+    const totalRecognizedTransactions = recognizedTransactionsCount?.total;
+
+    return {
+      name: bankAccount.name,
+      totalUncategorizedTransactions,
+      totalRecognizedTransactions,
+    };
+  }
+}

packages/server/src/services/Cashflow/GetUncategorizedTransactions.ts

@@ -32,11 +32,16 @@ export class GetUncategorizedTransactions {
     };
     const { results, pagination } =
       await UncategorizedCashflowTransaction.query()
-        .where('accountId', accountId)
+        .onBuild((q) => {
-        .where('categorized', false)
+          q.where('accountId', accountId);
-        .modify('notExcluded')
+          q.where('categorized', false);
-        .withGraphFetched('account')
+          q.modify('notExcluded');
-        .orderBy('date', 'DESC')
+
+          q.withGraphFetched('account');
+          q.withGraphFetched('recognizedTransaction.assignAccount');
+
+          q.orderBy('date', 'DESC');
+        })
         .pagination(_query.page - 1, _query.pageSize);
 
     const data = await this.transformer.transform(

packages/server/src/services/Cashflow/UncategorizedTransactionTransformer.ts

@@ -12,9 +12,25 @@ export class UncategorizedTransactionTransformer extends Transformer {
       'formattedDate',
       'formattedDepositAmount',
       'formattedWithdrawalAmount',
+
+      'assignedAccountId',
+      'assignedAccountName',
+      'assignedAccountCode',
+      'assignedPayee',
+      'assignedMemo',
+      'assignedCategory',
+      'assignedCategoryFormatted',
     ];
   };
 
+  /**
+   * Exclude all attributes.
+   * @returns {Array<string>}
+   */
+  public excludeAttributes = (): string[] => {
+    return ['recognizedTransaction'];
+  };
+
   /**
    * Formattes the transaction date.
    * @param transaction
@@ -62,4 +78,69 @@ export class UncategorizedTransactionTransformer extends Transformer {
     }
     return '';
   }
+
+  // --------------------------------------------------------
+  // # Recgonized transaction
+  // --------------------------------------------------------
+  /**
+   * Get the assigned account ID of the transaction.
+   * @param {object} transaction
+   * @returns {number}
+   */
+  public assignedAccountId(transaction: any): number {
+    return transaction.recognizedTransaction?.assignedAccountId;
+  }
+
+  /**
+   * Get the assigned account name of the transaction.
+   * @param {object} transaction
+   * @returns {string}
+   */
+  public assignedAccountName(transaction: any): string {
+    return transaction.recognizedTransaction?.assignAccount?.name;
+  }
+
+  /**
+   * Get the assigned account code of the transaction.
+   * @param {object} transaction
+   * @returns {string}
+   */
+  public assignedAccountCode(transaction: any): string {
+    return transaction.recognizedTransaction?.assignAccount?.code;
+  }
+
+  /**
+   * Get the assigned payee of the transaction.
+   * @param {object} transaction
+   * @returns {string}
+   */
+  public getAssignedPayee(transaction: any): string {
+    return transaction.recognizedTransaction?.assignedPayee;
+  }
+
+  /**
+   * Get the assigned memo of the transaction.
+   * @param {object} transaction
+   * @returns {string}
+   */
+  public assignedMemo(transaction: any): string {
+    return transaction.recognizedTransaction?.assignedMemo;
+  }
+
+  /**
+   * Get the assigned category of the transaction.
+   * @param {object} transaction
+   * @returns {string}
+   */
+  public assignedCategory(transaction: any): string {
+    return transaction.recognizedTransaction?.assignedCategory;
+  }
+
+  /**
+   * Get the assigned formatted category.
+   * @returns {string}
+   */
+  public assignedCategoryFormatted() {
+    return 'Other Income';
+  }
 }

packages/webapp/src/components/EmptyStatus/EmptyStatus.tsx

@@ -1,18 +1,28 @@
 // @ts-nocheck
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'classnames';
 
 import Style from '@/style/components/DataTable/DataTableEmptyStatus.module.scss';
 
 /**
  * Datatable empty status.
  */
-export function EmptyStatus({ title, description, action, children }) {
+export function EmptyStatus({
+  title,
+  description,
+  action,
+  children,
+  classNames,
+}) {
   return (
-    <div className={classNames(Style.root)}>
+    <div className={clsx(Style.root, classNames?.root)}>
-      <h1 className={classNames(Style.root_title)}>{title}</h1>
+      <h1 className={clsx(Style.root_title, classNames?.title)}>{title}</h1>
-      <div className={classNames(Style.root_desc)}>{description}</div>
+      <div className={clsx(Style.root_desc, classNames?.description)}>
-      <div className={classNames(Style.root_actions)}>{action}</div>
+        {description}
+      </div>
+      <div className={clsx(Style.root_actions, classNames?.actions)}>
+        {action}
+      </div>
       {children}
     </div>
   );

packages/webapp/src/containers/Banking/Rules/RulesList/BankRulesLandingEmptyState.module.scss

@@ -0,0 +1,3 @@
+.root{
+  max-width: 600px;
+}

packages/webapp/src/containers/Banking/Rules/RulesList/BankRulesLandingEmptyState.tsx

@@ -4,32 +4,44 @@ import { Button, Intent } from '@blueprintjs/core';
 import { EmptyStatus, Can, FormattedMessage as T } from '@/components';
 import { AbilitySubject, BankRuleAction } from '@/constants/abilityOption';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { DialogsName } from '@/constants/dialogs';
+import styles from './BankRulesLandingEmptyState.module.scss';
 
 function BankRulesLandingEmptyStateRoot({
   // #withDialogAction
   openDialog,
 }) {
+  const handleNewBtnClick = () => {
+    openDialog(DialogsName.BankRuleForm);
+  };
+
   return (
     <EmptyStatus
-      title={"The organization doesn't have taxes, yet!"}
+      title={'Create rules to categorize bank transactions automatically'}
       description={
         <p>
-          Setup the organization taxes to start tracking taxes on sales
+          Bank rules will run automatically to categorize the incoming bank
-          transactions.
+          transactions under the conditions you set up.
         </p>
       }
       action={
         <>
           <Can I={BankRuleAction.Create} a={AbilitySubject.BankRule}>
-            <Button intent={Intent.PRIMARY} large={true} onClick={() => {}}>
+            <Button
-              New tax rate
+              intent={Intent.PRIMARY}
+              large={true}
+              onClick={handleNewBtnClick}
+            >
+              New Bank Rule
             </Button>
+
             <Button intent={Intent.NONE} large={true}>
               <T id={'learn_more'} />
             </Button>
           </Can>
         </>
       }
+      classNames={{ root: styles.root }}
     />
   );
 }

packages/webapp/src/containers/Banking/Rules/RulesList/RulesListBoot.tsx

@@ -1,10 +1,12 @@
 import React, { createContext } from 'react';
 import { DialogContent } from '@/components';
 import { useBankRules } from '@/hooks/query/bank-rules';
+import { isEmpty } from 'lodash';
 
 interface RulesListBootValues {
   bankRules: any;
   isBankRulesLoading: boolean;
+  isEmptyState: boolean;
 }
 
 const RulesListBootContext = createContext<RulesListBootValues>(
@@ -18,9 +20,11 @@ interface RulesListBootProps {
 function RulesListBoot({ ...props }: RulesListBootProps) {
   const { data: bankRules, isLoading: isBankRulesLoading } = useBankRules();
 
-  const provider = { bankRules, isBankRulesLoading } as RulesListBootValues;
+  const isEmptyState = !isBankRulesLoading && isEmpty(bankRules);
   const isLoading = isBankRulesLoading;
 
+  const provider = { bankRules, isBankRulesLoading, isEmptyState } as RulesListBootValues;
+
   return (
     <DialogContent isLoading={isLoading}>
       <RulesListBootContext.Provider {...props} value={provider} />

packages/webapp/src/containers/Banking/Rules/RulesList/RulesTable.tsx

@@ -33,7 +33,7 @@ function RulesTable({
 }) {
   // Invoices table columns.
   const columns = useBankRulesTableColumns();
-  const { bankRules } = useRulesListBoot();
+  const { bankRules, isEmptyState } = useRulesListBoot();
 
   // Handle edit bank rule.
   const handleDeleteBankRule = ({ id }) => {
@@ -45,8 +45,6 @@ function RulesTable({
     openDialog(DialogsName.BankRuleForm, { bankRuleId: id });
   };
 
-  const isEmptyState = false;
-
   // Display invoice empty status instead of the table.
   if (isEmptyState) {
     return <BankRulesLandingEmptyState />;

packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsProvider.tsx

@@ -4,6 +4,7 @@ import { useParams } from 'react-router-dom';
 import { DashboardInsider } from '@/components';
 import { useCashflowAccounts, useAccount } from '@/hooks/query';
 import { useAppQueryString } from '@/hooks';
+import { useGetBankAccountSummaryMeta } from '@/hooks/query/bank-rules';
 
 const AccountTransactionsContext = React.createContext();
 
@@ -20,31 +21,38 @@ function AccountTransactionsProvider({ query, ...props }) {
   const setFilterTab = (value: string) => {
     setLocationQuery({ filter: value });
   };
-  // Fetch cashflow accounts.
+  // Retrieves cashflow accounts.
   const {
     data: cashflowAccounts,
     isFetching: isCashFlowAccountsFetching,
     isLoading: isCashFlowAccountsLoading,
   } = useCashflowAccounts(query, { keepPreviousData: true });
 
-  // Retrieve specific account details.
+  // Retrieves specific account details.
-  
   const {
     data: currentAccount,
     isFetching: isCurrentAccountFetching,
     isLoading: isCurrentAccountLoading,
   } = useAccount(accountId, { keepPreviousData: true });
 
+  // Retrieves the bank account meta summary.
+  const {
+    data: bankAccountMetaSummary,
+    isLoading: isBankAccountMetaSummaryLoading,
+  } = useGetBankAccountSummaryMeta(accountId);
+
   // Provider payload.
   const provider = {
     accountId,
     cashflowAccounts,
     currentAccount,
+    bankAccountMetaSummary,
 
     isCashFlowAccountsFetching,
     isCashFlowAccountsLoading,
     isCurrentAccountFetching,
     isCurrentAccountLoading,
+    isBankAccountMetaSummaryLoading,
 
     filterTab,
     setFilterTab,

packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsUncategorizeFilter.tsx

@@ -4,6 +4,7 @@ import { Tag } from '@blueprintjs/core';
 import { useAppQueryString } from '@/hooks';
 import { useUncontrolled } from '@/hooks/useUncontrolled';
 import { Group } from '@/components';
+import { useAccountTransactionsContext } from './AccountTransactionsProvider';
 
 const Root = styled.div`
   display: flex;
@@ -26,8 +27,13 @@ const FilterTag = styled(Tag)`
 `;
 
 export function AccountTransactionsUncategorizeFilter() {
+  const { bankAccountMetaSummary } = useAccountTransactionsContext();
   const [locationQuery, setLocationQuery] = useAppQueryString();
 
+  const totalUncategorized =
+    bankAccountMetaSummary?.totalUncategorizedTransactions;
+  const totalRecognized = bankAccountMetaSummary?.totalRecognizedTransactions;
+
   const handleTabsChange = (value) => {
     setLocationQuery({ uncategorizedFilter: value });
   };
@@ -36,8 +42,22 @@ export function AccountTransactionsUncategorizeFilter() {
     <Group position={'apart'}>
       <SegmentedTabs
         options={[
-          { value: 'all', label: 'All' },
+          {
-          { value: 'recognized', label: 'Recognized' },
+            value: 'all',
+            label: (
+              <>
+                All <strong>({totalUncategorized})</strong>
+              </>
+            ),
+          },
+          {
+            value: 'recognized',
+            label: (
+              <>
+                Recognized <strong>({totalRecognized})</strong>
+              </>
+            ),
+          },
         ]}
         value={locationQuery?.uncategorizedFilter || 'all'}
         onValueChange={handleTabsChange}
@@ -66,8 +86,9 @@ function SegmentedTabs({ options, initialValue, value, onValueChange }) {
   });
   return (
     <Root>
-      {options.map((option) => (
+      {options.map((option, index) => (
         <FilterTag
+          key={index}
           round
           interactive
           onClick={() => handleChange(option.value)}

packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsUncategorizedTable.tsx

@@ -102,7 +102,7 @@ function AccountTransactionsDataTable({
       vListOverscanRowCount={0}
       initialColumnsWidths={initialColumnsWidths}
       onColumnResizing={handleColumnResizing}
-      noResults={<T id={'cash_flow.account_transactions.no_results'} />}
+      noResults={'There is no uncategorized transactions in the current account.'}
       className="table-constrant"
       payload={{
         onExclude: handleExcludeTransaction,

packages/webapp/src/containers/CashFlow/AccountTransactions/ExcludedTransactions/ExcludedTransactionsTable.tsx

@@ -81,7 +81,7 @@ function ExcludedTransactionsTableRoot() {
       vListOverscanRowCount={0}
       initialColumnsWidths={initialColumnsWidths}
       onColumnResizing={handleColumnResizing}
-      // noResults={<T id={'cash_flow.account_transactions.no_results'} />}
+      noResults={'There is no excluded bank transactions.'}
       className="table-constrant"
       payload={{
         onRestore: handleRestoreClick,

packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/RecognizedTransactionsTable.module.scss

@@ -0,0 +1,20 @@
+
+
+.emptyState{
+  text-align: center;
+  font-size: 15px;
+  color: #738091;
+
+  :global ul{
+    list-style: inside;
+
+    li{
+      margin-bottom: 12px;
+  
+      &::marker{
+        color: #C5CBD3;
+        font-size: 12px;
+      }
+    }
+  }
+}

packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/RecognizedTransactionsTable.tsx

@@ -10,6 +10,7 @@ import {
   TableVirtualizedListRows,
   FormattedMessage as T,
   AppToaster,
+  Stack,
 } from '@/components';
 import { TABLES } from '@/constants/tables';
 
@@ -24,11 +25,12 @@ import { useRecognizedTransactionsBoot } from './RecognizedTransactionsTableBoot
 import { ActionsMenu } from './_components';
 import { compose } from '@/utils';
 import { useExcludeUncategorizedTransaction } from '@/hooks/query/bank-rules';
-import { Intent } from '@blueprintjs/core';
+import { Intent, Text } from '@blueprintjs/core';
 import {
   WithBankingActionsProps,
   withBankingActions,
 } from '../../withBankingActions';
+import styles from './RecognizedTransactionsTable.module.scss';
 
 interface RecognizedTransactionsTableProps extends WithBankingActionsProps {}
 
@@ -114,7 +116,7 @@ function RecognizedTransactionsTableRoot({
       vListOverscanRowCount={0}
       initialColumnsWidths={initialColumnsWidths}
       onColumnResizing={handleColumnResizing}
-      noResults={<T id={'cash_flow.account_transactions.no_results'} />}
+      noResults={<RecognizedTransactionsTableNoResults />}
       className="table-constrant"
       payload={{
         onExclude: handleExcludeClick,
@@ -168,3 +170,26 @@ const CashflowTransactionsTable = styled(DashboardConstrantTable)`
     }
   }
 `;
+
+function RecognizedTransactionsTableNoResults() {
+  return (
+    <Stack spacing={12} className={styles.emptyState}>
+      <Text>
+        There are no Recognized transactions due to one of the following
+        reasons:
+      </Text>
+
+      <ul>
+        <li>
+          Transaction Rules have not yet been created. Transactions are
+          recognized based on the rule criteria.
+        </li>
+
+        <li>
+          The transactions in your bank do not satisfy the criteria in any of
+          your transaction rule(s).
+        </li>
+      </ul>
+    </Stack>
+  );
+}

packages/webapp/src/containers/CashFlow/AccountTransactions/components.tsx

@@ -1,8 +1,24 @@
 // @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
-import { Intent, Menu, MenuItem, MenuDivider, Tag } from '@blueprintjs/core';
+import {
-import { Can, FormatDateCell, Icon, MaterialProgressBar } from '@/components';
+  Intent,
+  Menu,
+  MenuItem,
+  MenuDivider,
+  Tag,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  Tooltip,
+} from '@blueprintjs/core';
+import {
+  Box,
+  Can,
+  FormatDateCell,
+  Icon,
+  MaterialProgressBar,
+} from '@/components';
 import { useAccountTransactionsContext } from './AccountTransactionsProvider';
 import { safeCallback } from '@/utils';
 
@@ -128,6 +144,34 @@ export function AccountTransactionsProgressBar() {
   ) : null;
 }
 
+function statusAccessor(transaction) {
+  return transaction.is_recognized ? (
+    <Tooltip
+      compact
+      interactionKind={PopoverInteractionKind.HOVER}
+      position={Position.RIGHT}
+      content={
+        <Box>
+          <span>{transaction.assigned_category_formatted}</span>
+          <Icon
+            icon={'arrowRight'}
+            color={'#8F99A8'}
+            iconSize={12}
+            style={{ marginLeft: 8, marginRight: 8 }}
+          />
+          <span>{transaction.assigned_account_name}</span>
+        </Box>
+      }
+    >
+      <Box>
+        <Tag intent={Intent.SUCCESS} interactive>
+          Recognized
+        </Tag>
+      </Box>
+    </Tooltip>
+  ) : null;
+}
+
 /**
  * Retrieve account uncategorized transctions table columns.
  */
@@ -170,16 +214,7 @@ export function useAccountUncategorizedTransactionsColumns() {
       {
         id: 'status',
         Header: 'Status',
-        accessor: () =>
+        accessor: statusAccessor,
-          false ? (
-            <Tag intent={Intent.SUCCESS} interactive>
-              1 Matches
-            </Tag>
-          ) : (
-            <Tag intent={Intent.SUCCESS} interactive>
-              Recognized
-            </Tag>
-          ),
       },
       {
         id: 'deposit',

packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionAside.module.scss

@@ -2,6 +2,7 @@
 .root {
   flex: 1 1 auto;
   overflow: auto;
+  padding-bottom: 60px;
 }
 
 .transaction {
@@ -35,4 +36,5 @@
 .footerTotal {
   padding: 8px 16px;
   border-top: 1px solid #d8d9d9;
+  line-height: 24px;
 }

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

@@ -1,11 +1,23 @@
+// @ts-nocheck
 import { Tab, Tabs } from '@blueprintjs/core';
 import { MatchingBankTransaction } from './MatchingTransaction';
-import styles from './CategorizeTransactionTabs.module.scss';
 import { CategorizeTransactionContent } from '../CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionContent';
+import { useCategorizeTransactionTabsBoot } from './CategorizeTransactionTabsBoot';
+import styles from './CategorizeTransactionTabs.module.scss';
 
 export function CategorizeTransactionTabs() {
+  const { uncategorizedTransaction } = useCategorizeTransactionTabsBoot();
+  const defaultSelectedTabId = uncategorizedTransaction?.is_recognized
+    ? 'categorize'
+    : 'matching';
+
   return (
-    <Tabs large renderActiveTabPanelOnly className={styles.tabs}>
+    <Tabs
+      large
+      renderActiveTabPanelOnly
+      defaultSelectedTabId={defaultSelectedTabId}
+      className={styles.tabs}
+    >
       <Tab
         id="categorize"
         title="Categorize Transaction"

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

@@ -2,22 +2,26 @@
 import { isEmpty } from 'lodash';
 import * as R from 'ramda';
 import { AnchorButton, Button, Intent, Tag, Text } from '@blueprintjs/core';
+import { FastField, FastFieldProps, Formik } from 'formik';
 import { AppToaster, Box, FormatNumber, Group, Stack } from '@/components';
 import {
   MatchingTransactionBoot,
   useMatchingTransactionBoot,
 } from './MatchingTransactionBoot';
 import { MatchTransaction, MatchTransactionProps } from './MatchTransaction';
-import styles from './CategorizeTransactionAside.module.scss';
-import { FastField, FastFieldProps, Form, Formik } from 'formik';
 import { useMatchUncategorizedTransaction } from '@/hooks/query/bank-rules';
 import { MatchingTransactionFormValues } from './types';
-import { transformToReq, useGetPendingAmountMatched } from './utils';
+import {
+  transformToReq,
+  useGetPendingAmountMatched,
+  useIsShowReconcileTransactionLink,
+} from './utils';
 import { useCategorizeTransactionTabsBoot } from './CategorizeTransactionTabsBoot';
 import {
   WithBankingActionsProps,
   withBankingActions,
 } from '../withBankingActions';
+import styles from './CategorizeTransactionAside.module.scss';
 
 const initialValues = {
   matched: {},
@@ -189,20 +193,26 @@ interface MatchTransctionFooterProps extends WithBankingActionsProps {}
  */
 const MatchTransactionFooter = R.compose(withBankingActions)(
   ({ closeMatchingTransactionAside }: MatchTransctionFooterProps) => {
+    const totalPending = useGetPendingAmountMatched();
+    const showReconcileLink = useIsShowReconcileTransactionLink();
+
     const handleCancelBtnClick = () => {
       closeMatchingTransactionAside();
     };
-    const totalPending = useGetPendingAmountMatched();
 
     return (
       <Box className={styles.footer}>
         <Box className={styles.footerTotal}>
           <Group position={'apart'}>
+            {showReconcileLink && (
               <AnchorButton small minimal intent={Intent.PRIMARY}>
                 Add Reconcile Transaction +
               </AnchorButton>
-
+            )}
-            <Text style={{ fontSize: 13 }} tagName="span">
+            <Text
+              style={{ fontSize: 14, marginLeft: 'auto', color: '#5F6B7C' }}
+              tagName="span"
+            >
               Pending <FormatNumber value={totalPending} currency={'USD'} />
             </Text>
           </Group>

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

@@ -1,6 +1,8 @@
 import { useFormikContext } from 'formik';
 import { MatchingTransactionFormValues } from './types';
 import { useMatchingTransactionBoot } from './MatchingTransactionBoot';
+import { useCategorizeTransactionTabsBoot } from './CategorizeTransactionTabsBoot';
+import { useMemo } from 'react';
 
 export const transformToReq = (values: MatchingTransactionFormValues) => {
   const matchedTransactions = Object.entries(values.matched)
@@ -17,7 +19,9 @@ export const transformToReq = (values: MatchingTransactionFormValues) => {
 export const useGetPendingAmountMatched = () => {
   const { values } = useFormikContext<MatchingTransactionFormValues>();
   const { perfectMatches, possibleMatches } = useMatchingTransactionBoot();
+  const { uncategorizedTransaction } = useCategorizeTransactionTabsBoot();
 
+  return useMemo(() => {
     const matchedItems = [...perfectMatches, ...possibleMatches].filter(
       (match) => {
         const key = `${match.transactionType}-${match.transactionId}`;
@@ -28,7 +32,25 @@ export const useGetPendingAmountMatched = () => {
       (total, item) => total + parseFloat(item.amount),
       0,
     );
-  const pendingAmount = 0 - totalMatchedAmount;
+    const amount = uncategorizedTransaction.amount;
+    const pendingAmount = amount - totalMatchedAmount;
 
     return pendingAmount;
+  }, [uncategorizedTransaction, perfectMatches, possibleMatches, values]);
+};
+
+export const useAtleastOneMatchedSelected = () => {
+  const { values } = useFormikContext<MatchingTransactionFormValues>();
+
+  return useMemo(() => {
+    const matchedCount = Object.values(values.matched).filter(Boolean).length;
+    return matchedCount > 0;
+  }, [values]);
+};
+
+export const useIsShowReconcileTransactionLink = () => {
+  const pendingAmount = useGetPendingAmountMatched();
+  const atleastOneSelected = useAtleastOneMatchedSelected();
+
+  return atleastOneSelected && pendingAmount !== 0;
 };

packages/webapp/src/hooks/query/bank-rules.ts

@@ -21,6 +21,7 @@ const QUERY_KEY = {
   EXCLUDED_BANK_TRANSACTIONS_INFINITY: 'EXCLUDED_BANK_TRANSACTIONS_INFINITY',
   RECOGNIZED_BANK_TRANSACTIONS_INFINITY:
     'RECOGNIZED_BANK_TRANSACTIONS_INFINITY',
+  BANK_ACCOUNT_SUMMARY_META: 'BANK_ACCOUNT_SUMMARY_META',
 };
 
 const commonInvalidateQueries = (query: QueryClient) => {
@@ -111,6 +112,10 @@ export function useDeleteBankRule(
     {
       onSuccess: (res, id) => {
         commonInvalidateQueries(queryClient);
+
+        queryClient.invalidateQueries(
+          QUERY_KEY.RECOGNIZED_BANK_TRANSACTIONS_INFINITY,
+        );
       },
       ...options,
     },
@@ -343,6 +348,34 @@ export function useGetRecognizedBankTransaction(
   );
 }
 
+interface GetBankAccountSummaryMetaRes {
+  name: string;
+  totalUncategorizedTransactions: number;
+  totalRecognizedTransactions: number;
+}
+
+/**
+ * Get the given bank account meta summary.
+ * @param {number} bankAccountId
+ * @param {UseQueryOptions<GetBankAccountSummaryMetaRes, Error>} options
+ * @returns {UseQueryResult<GetBankAccountSummaryMetaRes, Error>}
+ */
+export function useGetBankAccountSummaryMeta(
+  bankAccountId: number,
+  options?: UseQueryOptions<GetBankAccountSummaryMetaRes, Error>,
+): UseQueryResult<GetBankAccountSummaryMetaRes, Error> {
+  const apiRequest = useApiRequest();
+
+  return useQuery<GetBankAccountSummaryMetaRes, Error>(
+    [QUERY_KEY.BANK_ACCOUNT_SUMMARY_META, bankAccountId],
+    () =>
+      apiRequest
+        .get(`/banking/bank_accounts/${bankAccountId}/meta`)
+        .then((res) => transformToCamelCase(res.data?.data)),
+    { ...options },
+  );
+}
+
 /**
  * @returns
  */