feat: Datatable UI improvements

packages/webapp/src/components/Datatable/TableCell.tsx

@@ -1,13 +1,14 @@
 // @ts-nocheck
 import React, { useContext } from 'react';
 import classNames from 'classnames';
-import { camelCase} from 'lodash';
+import { camelCase } from 'lodash';
 
 import { If, Skeleton } from '@/components';
 import { useAppIntlContext } from '@/components/AppIntlProvider';
 import TableContext from './TableContext';
 import { saveInvoke, ignoreEventFromSelectors } from '@/utils';
 import { isCellLoading } from './utils';
+import { MoneyDisplay } from '../Money/MoneyDisplay';
 
 const ROW_CLICK_SELECTORS_INGORED = ['.expand-toggle', '.selection-checkbox'];
 
@@ -58,7 +59,7 @@ export default function TableCell({ cell, row, index }) {
       return;
     }
     saveInvoke(onCellClick, cell, event);
-  };  
+  };
   const cellType = camelCase(cell.column.Cell.cellType) || 'text';
 
   return (
@@ -109,7 +110,11 @@ export default function TableCell({ cell, row, index }) {
           </span>
         </If>
 
-        {cell.render('Cell')}
+        {cell.column?.money ? (
+          <MoneyDisplay>{cell.render('Cell')}</MoneyDisplay>
+        ) : (
+          <>{cell.render('Cell')}</>
+        )}
       </div>
     </div>
   );

packages/webapp/src/components/Money/MoneyDisplay.module.scss

@@ -0,0 +1,4 @@
+
+.root {
+  font-variant-numeric: tabular-nums;
+}

packages/webapp/src/components/Money/MoneyDisplay.tsx

@@ -0,0 +1,9 @@
+import styles from './MoneyDisplay.module.scss';
+
+interface MoneyDisplayProps {
+  children: React.ReactNode;
+}
+
+export function MoneyDisplay({ children }: MoneyDisplayProps) {
+  return <span className={styles.root}>{children}</span>;
+}

packages/webapp/src/containers/Accounting/JournalsLanding/utils.tsx

@@ -27,6 +27,7 @@ export const useManualJournalsColumns = () => {
         accessor: 'formatted_amount',
         width: 115,
         clickable: true,
+        money: true,
         align: 'right',
         className: clsx(CLASSES.FONT_BOLD),
       },

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

@@ -1,7 +1,8 @@
 // @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
-import { Intent, Tag } from '@blueprintjs/core';
+import { Intent, Tag, Classes } from '@blueprintjs/core';
+import clsx from 'classnames';
 
 import { If, AppToaster } from '@/components';
 import { NormalCell, BalanceCell, BankBalanceCell } from './components';
@@ -73,7 +74,7 @@ export const useAccountsTableColumns = () => {
         id: 'type',
         Header: intl.get('type'),
         accessor: 'account_type_label',
-        className: 'type',
+        className: clsx('type', Classes.TEXT_MUTED),
         width: 140,
         clickable: true,
         textOverview: true,
@@ -91,6 +92,7 @@ export const useAccountsTableColumns = () => {
         id: 'currency',
         Header: intl.get('currency'),
         accessor: 'currency_code',
+        className: clsx(Classes.TEXT_MUTED),
         width: 75,
         clickable: true,
       },
@@ -102,6 +104,7 @@ export const useAccountsTableColumns = () => {
         width: 150,
         clickable: true,
         align: 'right',
+        money: true,
       },
       {
         id: 'balance',
@@ -110,6 +113,7 @@ export const useAccountsTableColumns = () => {
         Cell: BalanceCell,
         width: 150,
         clickable: true,
+        money: true,
         align: 'right',
       },
     ],

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

@@ -1,10 +1,8 @@
 // @ts-nocheck
 import React from 'react';
-import styled from 'styled-components';
 import { Intent } from '@blueprintjs/core';
 import * as R from 'ramda';
 import {
-  DataTable,
   TableFastCell,
   TableSkeletonRows,
   TableSkeletonHeader,
@@ -17,9 +15,10 @@ import { useMemorizedColumnsWidths } from '@/hooks';
 import { useExcludedTransactionsColumns } from './_utils';
 import { useExcludedTransactionsBoot } from './ExcludedTransactionsTableBoot';
 import { useAccountTransactionsContext } from '../AccountTransactionsProvider';
+import { useUnexcludeUncategorizedTransaction } from '@/hooks/query/bank-rules';
 
 import { ActionsMenu } from './_components';
-import { useUnexcludeUncategorizedTransaction } from '@/hooks/query/bank-rules';
+import { BankAccountDataTable } from '../components/BankAccountDataTable';
 import {
   WithBankingActionsProps,
   withBankingActions,
@@ -78,7 +77,7 @@ function ExcludedTransactionsTableRoot({
   };
 
   return (
-    <CashflowTransactionsTable
+    <BankAccountDataTable
       noInitialFetch={true}
       columns={columns}
       data={excludedBankTransactions}
@@ -116,42 +115,3 @@ function ExcludedTransactionsTableRoot({
 export const ExcludedTransactionsTable = R.compose(withBankingActions)(
   ExcludedTransactionsTableRoot,
 );
-
-const DashboardConstrantTable = styled(DataTable)`
-  .table {
-    .thead {
-      .th {
-        background: #fff;
-        letter-spacing: 1px;
-        text-transform: uppercase;
-        font-size: 13px;
-      }
-    }
-
-    .tbody {
-      .tr:last-child .td {
-        border-bottom: 0;
-      }
-    }
-  }
-`;
-
-const CashflowTransactionsTable = styled(DashboardConstrantTable)`
-  .table .tbody {
-    .tbody-inner .tr.no-results {
-      .td {
-        padding: 2rem 0;
-        font-size: 14px;
-        color: #888;
-        font-weight: 400;
-        border-bottom: 0;
-      }
-    }
-
-    .tbody-inner {
-      .tr .td {
-        border-bottom: 1px solid #e6e6e6;
-      }
-    }
-  }
-`;

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

@@ -54,12 +54,14 @@ export function useExcludedTransactionsColumns() {
         accessor: 'formatted_deposit_amount',
         align: 'right',
         width: depositWidth,
+        money: true
       },
       {
         Header: 'Withdrawal',
         accessor: 'formatted_withdrawal_amount',
         align: 'right',
         width: withdrawalWidth,
+        money: true
       },
     ],
     [],

packages/webapp/src/containers/CashFlow/AccountTransactions/PendingTransactions/PendingTransactionsTable.tsx

@@ -1,9 +1,6 @@
 // @ts-nocheck
 import React from 'react';
-import clsx from 'classnames';
-import styled from 'styled-components';
 import {
-  DataTable,
   TableFastCell,
   TableSkeletonRows,
   TableSkeletonHeader,
@@ -16,6 +13,7 @@ import { useAccountTransactionsContext } from '../AccountTransactionsProvider';
 import { usePendingTransactionsContext } from './PendingTransactionsTableBoot';
 import { usePendingTransactionsTableColumns } from './_hooks';
 
+import { BankAccountDataTable } from '../components/BankAccountDataTable';
 import { compose } from '@/utils';
 
 /**
@@ -37,7 +35,7 @@ function PendingTransactionsDataTableRoot({
   } = usePendingTransactionsContext();
 
   return (
-    <CashflowTransactionsTable
+    <BankAccountDataTable
       noInitialFetch={true}
       columns={columns}
       data={pendingTransactions || []}
@@ -54,7 +52,6 @@ function PendingTransactionsDataTableRoot({
       vListOverscanRowCount={0}
       noResults={'There is no pending transactions in the current account.'}
       windowScrollerProps={{ scrollElement: scrollableRef }}
-      className={clsx('table-constrant')}
     />
   );
 }
@@ -65,47 +62,3 @@ export const PendingTransactionsDataTable = compose(
   })),
   withBankingActions,
 )(PendingTransactionsDataTableRoot);
-
-const DashboardConstrantTable = styled(DataTable)`
-  .table {
-    .thead {
-      .th {
-        background: #fff;
-        text-transform: uppercase;
-        letter-spacing: 1px;
-        font-size: 13px;i
-        font-weight: 500;
-      }
-    }
-
-    .tbody {
-      .tr:last-child .td {
-        border-bottom: 0;
-      }
-    }
-  }
-`;
-
-const CashflowTransactionsTable = styled(DashboardConstrantTable)`
-  .table .tbody {
-    .tbody-inner .tr.no-results {
-      .td {
-        padding: 2rem 0;
-        font-size: 14px;
-        color: #888;
-        font-weight: 400;
-        border-bottom: 0;
-      }
-    }
-
-    .tbody-inner {
-      .tr .td:not(:first-child) {
-        border-left: 1px solid #e6e6e6;
-      }
-
-      .td-description {
-        color: #5f6b7c;
-      }
-    }
-  }
-`;

packages/webapp/src/containers/CashFlow/AccountTransactions/PendingTransactions/_hooks.tsx

@@ -48,6 +48,7 @@ export function usePendingTransactionsTableColumns() {
         textOverview: true,
         align: 'right',
         clickable: true,
+        money: true
       },
       {
         id: 'withdrawal',
@@ -58,6 +59,7 @@ export function usePendingTransactionsTableColumns() {
         textOverview: true,
         align: 'right',
         clickable: true,
+        money: true
       },
     ],
     [],

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

@@ -27,6 +27,7 @@ import {
   withBankingActions,
 } from '../../withBankingActions';
 import styles from './RecognizedTransactionsTable.module.scss';
+import { BankAccountDataTable } from '../components/BankAccountDataTable';
 
 interface RecognizedTransactionsTableProps extends WithBankingActionsProps {}
 
@@ -83,7 +84,7 @@ function RecognizedTransactionsTableRoot({
   };
 
   return (
-    <CashflowTransactionsTable
+    <BankAccountDataTable
       noInitialFetch={true}
       columns={columns}
       data={recognizedTransactions}
@@ -100,14 +101,12 @@ function RecognizedTransactionsTableRoot({
       ContextMenu={ActionsMenu}
       onCellClick={handleCellClick}
       // #TableVirtualizedListRows props.
-      vListrowHeight={'small' == 'small' ? 32 : 40}
       vListrowHeight={40}
       vListOverscanRowCount={0}
       initialColumnsWidths={initialColumnsWidths}
       onColumnResizing={handleColumnResizing}
       windowScrollerProps={{ scrollElement: scrollableRef }}
       noResults={<RecognizedTransactionsTableNoResults />}
-      className="table-constrant"
       payload={{
         onExclude: handleExcludeClick,
         onCategorize: handleCategorizeClick,
@@ -120,45 +119,6 @@ export const RecognizedTransactionsTable = compose(withBankingActions)(
   RecognizedTransactionsTableRoot,
 );
 
-const DashboardConstrantTable = styled(DataTable)`
-  .table {
-    .thead {
-      .th {
-        background: #fff;
-        letter-spacing: 1px;
-        text-transform: uppercase;
-        font-size: 13px;
-      }
-    }
-
-    .tbody {
-      .tr:last-child .td {
-        border-bottom: 0;
-      }
-    }
-  }
-`;
-
-const CashflowTransactionsTable = styled(DashboardConstrantTable)`
-  .table .tbody {
-    .tbody-inner .tr.no-results {
-      .td {
-        padding: 2rem 0;
-        font-size: 14px;
-        color: #888;
-        font-weight: 400;
-        border-bottom: 0;
-      }
-    }
-
-    .tbody-inner {
-      .tr .td {
-        border-bottom: 1px solid #e6e6e6;
-      }
-    }
-  }
-`;
-
 function RecognizedTransactionsTableNoResults() {
   return (
     <Stack spacing={12} className={styles.emptyState}>