feat: get bank account meta summary

2026-02-17 21:30:31 +00:00 · 2024-07-02 19:21:26 +02:00
parent 8a09de9771
commit 91730d204e
22 changed files with 476 additions and 69 deletions
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsProvider.tsx
+++ b/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,
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsUncategorizeFilter.tsx
+++ b/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)}
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsUncategorizedTable.tsx
+++ b/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,
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/ExcludedTransactions/ExcludedTransactionsTable.tsx
+++ b/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,
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/RecognizedTransactionsTable.module.scss
+++ b/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;
+      }
+    }
+  }
+}
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/RecognizedTransactionsTable.tsx
+++ b/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>
+  );
+}
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/components.tsx
+++ b/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 { Can, FormatDateCell, Icon, MaterialProgressBar } from '@/components';
+import {
+  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: () =>
-          false ? (
-            <Tag intent={Intent.SUCCESS} interactive>
-              1 Matches
-            </Tag>
-          ) : (
-            <Tag intent={Intent.SUCCESS} interactive>
-              Recognized
-            </Tag>
-          ),
+        accessor: statusAccessor,
      },
      {
        id: 'deposit',