fix: bank transactions report

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

@@ -1,6 +1,7 @@
 // @ts-nocheck
 import React from 'react';
 import styled from 'styled-components';
+import { Intent } from '@blueprintjs/core';
 
 import {
   DataTable,
@@ -9,6 +10,7 @@ import {
   TableSkeletonHeader,
   TableVirtualizedListRows,
   FormattedMessage as T,
+  AppToaster,
 } from '@/components';
 import { TABLES } from '@/constants/tables';
 
@@ -19,9 +21,11 @@ import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import { useMemorizedColumnsWidths } from '@/hooks';
 import { useAccountTransactionsColumns, ActionsMenu } from './components';
 import { useAccountTransactionsAllContext } from './AccountTransactionsAllBoot';
+import { useUnmatchMatchedUncategorizedTransaction } from '@/hooks/query/bank-rules';
 import { handleCashFlowTransactionType } from './utils';
 
 import { compose } from '@/utils';
+import { useUncategorizeTransaction } from '@/hooks/query';
 
 /**
  * Account transactions data table.
@@ -43,14 +47,14 @@ function AccountTransactionsDataTable({
   const { cashflowTransactions, isCashFlowTransactionsLoading } =
     useAccountTransactionsAllContext();
 
+  const { mutateAsync: uncategorizeTransaction } = useUncategorizeTransaction();
+  const { mutateAsync: unmatchTransaction } =
+    useUnmatchMatchedUncategorizedTransaction();
+
   // Local storage memorizing columns widths.
   const [initialColumnsWidths, , handleColumnResizing] =
     useMemorizedColumnsWidths(TABLES.CASHFLOW_Transactions);
 
-  // handle delete transaction
-  const handleDeleteTransaction = ({ reference_id }) => {
-    openAlert('account-transaction-delete', { referenceId: reference_id });
-  };
   // Handle view details action.
   const handleViewDetailCashflowTransaction = (referenceType) => {
     handleCashFlowTransactionType(referenceType, openDrawer);
@@ -60,6 +64,38 @@ function AccountTransactionsDataTable({
     const referenceType = cell.row.original;
     handleCashFlowTransactionType(referenceType, openDrawer);
   };
+  // Handles the unmatching the matched transaction.
+  const handleUnmatchTransaction = (transaction) => {
+    unmatchTransaction({ id: transaction.uncategorized_transaction_id })
+      .then(() => {
+        AppToaster.show({
+          message: 'The bank transaction has been unmatched.',
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch(() => {
+        AppToaster.show({
+          message: 'Something went wrong.',
+          intent: Intent.DANGER,
+        });
+      });
+  };
+  // Handle uncategorize transaction.
+  const handleUncategorizeTransaction = (transaction) => {
+    uncategorizeTransaction(transaction.uncategorized_transaction_id)
+      .then(() => {
+        AppToaster.show({
+          message: 'The bank transaction has been uncategorized.',
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch(() => {
+        AppToaster.show({
+          message: 'Something went wrong.',
+          intent: Intent.DANGER,
+        });
+      });
+  };
 
   return (
     <CashflowTransactionsTable
@@ -87,7 +123,8 @@ function AccountTransactionsDataTable({
       className="table-constrant"
       payload={{
         onViewDetails: handleViewDetailCashflowTransaction,
-        onDelete: handleDeleteTransaction,
+        onUncategorize: handleUncategorizeTransaction,
+        onUnmatch: handleUnmatchTransaction,
       }}
     />
   );

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

@@ -12,19 +12,17 @@ import {
   AppToaster,
 } from '@/components';
 import { TABLES } from '@/constants/tables';
+import { ActionsMenu } from './UncategorizedTransactions/components';
 
 import withSettings from '@/containers/Settings/withSettings';
 import { withBankingActions } from '../withBankingActions';
 
 import { useMemorizedColumnsWidths } from '@/hooks';
-import {
-  ActionsMenu,
-  useAccountUncategorizedTransactionsColumns,
-} from './components';
+import { useAccountUncategorizedTransactionsColumns } from './components';
 import { useAccountUncategorizedTransactionsContext } from './AllTransactionsUncategorizedBoot';
+import { useExcludeUncategorizedTransaction } from '@/hooks/query/bank-rules';
 
 import { compose } from '@/utils';
-import { useExcludeUncategorizedTransaction } from '@/hooks/query/bank-rules';
 
 /**
  * Account transactions data table.

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

@@ -0,0 +1,25 @@
+// @ts-nocheck
+import { Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
+import { Icon } from '@/components';
+import { safeCallback } from '@/utils';
+
+export function ActionsMenu({
+  payload: { onCategorize, onExclude },
+  row: { original },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="reader-18" />}
+        text={'Categorize'}
+        onClick={safeCallback(onCategorize, original)}
+      />
+      <MenuDivider />
+      <MenuItem
+        text={'Exclude'}
+        onClick={safeCallback(onExclude, original)}
+        icon={<Icon icon="disable" iconSize={16} />}
+      />
+    </Menu>
+  );
+}

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

@@ -5,44 +5,57 @@ import {
   Intent,
   Menu,
   MenuItem,
-  MenuDivider,
   Tag,
-  Popover,
   PopoverInteractionKind,
   Position,
   Tooltip,
+  MenuDivider,
 } from '@blueprintjs/core';
-import {
-  Box,
-  Can,
-  FormatDateCell,
-  Icon,
-  MaterialProgressBar,
-} from '@/components';
+import { Box, FormatDateCell, Icon, MaterialProgressBar } from '@/components';
 import { useAccountTransactionsContext } from './AccountTransactionsProvider';
 import { safeCallback } from '@/utils';
 
 export function ActionsMenu({
-  payload: { onCategorize, onExclude },
+  payload: { onUncategorize, onUnmatch },
   row: { original },
 }) {
   return (
     <Menu>
-      <MenuItem
-        icon={<Icon icon="reader-18" />}
-        text={'Categorize'}
-        onClick={safeCallback(onCategorize, original)}
-      />
-      <MenuDivider />
-      <MenuItem
-        text={'Exclude'}
-        onClick={safeCallback(onExclude, original)}
-        icon={<Icon icon="disable" iconSize={16} />}
-      />
+      {original.status === 'categorized' && (
+        <MenuItem
+          icon={<Icon icon="reader-18" />}
+          text={'Uncategorize'}
+          onClick={safeCallback(onUncategorize, original)}
+        />
+      )}
+      {original.status === 'matched' && (
+        <MenuItem
+          text={'Unmatch'}
+          icon={<Icon icon="unlink" iconSize={16} />}
+          onClick={safeCallback(onUnmatch, original)}
+        />
+      )}
     </Menu>
   );
 }
 
+const allTransactionsStatusAccessor = (transaction) => {
+  return (
+    <Tag
+      intent={
+        transaction.status === 'categorized'
+          ? Intent.SUCCESS
+          : transaction.status === 'matched'
+          ? Intent.SUCCESS
+          : Intent.NONE
+      }
+      minimal={transaction.status === 'manual'}
+    >
+      {transaction.formatted_status}
+    </Tag>
+  );
+};
+
 /**
  * Retrieve account transctions table columns.
  */
@@ -70,7 +83,7 @@ export function useAccountTransactionsColumns() {
       },
       {
         id: 'transaction_number',
-        Header: intl.get('transaction_number'),
+        Header: 'Transaction #',
         accessor: 'transaction_number',
         width: 160,
         className: 'transaction_number',
@@ -79,13 +92,18 @@ export function useAccountTransactionsColumns() {
       },
       {
         id: 'reference_number',
-        Header: intl.get('reference_no'),
+        Header: 'Ref.#',
         accessor: 'reference_number',
         width: 160,
         className: 'reference_number',
         clickable: true,
         textOverview: true,
       },
+      {
+        id: 'status',
+        Header: 'Status',
+        accessor: allTransactionsStatusAccessor,
+      },
       {
         id: 'deposit',
         Header: intl.get('cash_flow.label.deposit'),
@@ -116,16 +134,6 @@ export function useAccountTransactionsColumns() {
         align: 'right',
         clickable: true,
       },
-      {
-        id: 'balance',
-        Header: intl.get('balance'),
-        accessor: 'formatted_balance',
-        className: 'balance',
-        width: 150,
-        textOverview: true,
-        clickable: true,
-        align: 'right',
-      },
     ],
     [],
   );
@@ -204,7 +212,7 @@ export function useAccountUncategorizedTransactionsColumns() {
       },
       {
         id: 'reference_number',
-        Header: intl.get('reference_no'),
+        Header: 'Ref.#',
         accessor: 'reference_number',
         width: 50,
         className: 'reference_number',

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

@@ -212,8 +212,8 @@ function PerfectMatchingTransactions() {
             key={index}
             label={`${match.transsactionTypeFormatted} for ${match.amountFormatted}`}
             date={match.dateFormatted}
-            transactionId={match.transactionId}
-            transactionType={match.transactionType}
+            transactionId={match.referenceId}
+            transactionType={match.referenceType}
           />
         ))}
       </Stack>