feat: add bank balance to accounts chart table

packages/webapp/src/containers/Accounts/components.tsx

@@ -116,3 +116,16 @@ export function BalanceCell({ cell }) {
     <span class="placeholder">—</span>
   );
 }
+
+/**
+ * Balance cell.
+ */
+export function BankBalanceCell({ cell }) {
+  const account = cell.row.original;
+
+  return account.amount !== null ? (
+    <span>{account.bank_balance_formatted}</span>
+  ) : (
+    <span class="placeholder">—</span>
+  );
+}

packages/webapp/src/containers/Accounts/utils.tsx

@@ -4,7 +4,7 @@ import intl from 'react-intl-universal';
 import { Intent, Tag } from '@blueprintjs/core';
 
 import { If, AppToaster } from '@/components';
-import { NormalCell, BalanceCell } from './components';
+import { NormalCell, BalanceCell, BankBalanceCell } from './components';
 import { transformTableStateToQuery, isBlank } from '@/utils';
 
 /**
@@ -94,6 +94,15 @@ export const useAccountsTableColumns = () => {
         width: 75,
         clickable: true,
       },
+      {
+        id: 'bank_balance',
+        Header: 'Bank Balance',
+        accessor: 'bank_balance_formatted',
+        Cell: BankBalanceCell,
+        width: 150,
+        clickable: true,
+        align: 'right',
+      },
       {
         id: 'balance',
         Header: intl.get('balance'),
@@ -119,5 +128,5 @@ export const transformAccountsStateToQuery = (tableState) => {
   return {
     ...transformTableStateToQuery(tableState),
     inactive_mode: tableState.inactiveMode,
-  }
-}
+  };
+};