feat: optimize the style of bank account transactions tables

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

@@ -104,6 +104,7 @@ export const useAccountsTableColumns = () => {
         width: 150,
         clickable: true,
         align: 'right',
+        money: true,
       },
       {
         id: 'balance',
@@ -112,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}>

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

@@ -1,7 +1,9 @@
 // @ts-nocheck
+import React from 'react';
+import clsx from 'classnames';
+import { Classes } from '@blueprintjs/core';
 import { Group, Icon } from '@/components';
 import { getColumnWidth } from '@/utils';
-import React from 'react';
 import { useRecognizedTransactionsBoot } from './RecognizedTransactionsTableBoot';
 
 const getReportColWidth = (data, accessor, headerText) => {
@@ -28,10 +30,6 @@ const recognizeAccessor = (transaction) => {
   );
 };
 
-const descriptionAccessor = (transaction) => {
-  return <span style={{ color: '#5F6B7C' }}>{transaction.description}</span>;
-};
-
 /**
  * Retrieve uncategorized transactions columns table.
  */
@@ -59,7 +57,8 @@ export function useUncategorizedTransactionsColumns() {
       },
       {
         Header: 'Description',
-        accessor: descriptionAccessor,
+        accessor: 'description',
+        className: clsx(Classes.TEXT_MUTED),        
         textOverview: true,
       },
       {
@@ -82,12 +81,14 @@ export function useUncategorizedTransactionsColumns() {
         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/UncategorizedTransactions/AccountTransactionsUncategorizedTable.tsx

@@ -1,22 +1,21 @@
 // @ts-nocheck
 import React from 'react';
 import clsx from 'classnames';
-import styled from 'styled-components';
 import { Intent } from '@blueprintjs/core';
 import {
-  DataTable,
   TableFastCell,
   TableSkeletonRows,
   TableSkeletonHeader,
   TableVirtualizedListRows,
-  FormattedMessage as T,
   AppToaster,
 } from '@/components';
 import { TABLES } from '@/constants/tables';
 import { ActionsMenu } from './components';
+import { BankAccountDataTable } from '../components/BankAccountDataTable';
 
 import withSettings from '@/containers/Settings/withSettings';
 import { withBankingActions } from '../../withBankingActions';
+import { withBanking } from '../../withBanking';
 
 import { useMemorizedColumnsWidths } from '@/hooks';
 import { useAccountUncategorizedTransactionsContext } from '../AllTransactionsUncategorizedBoot';
@@ -25,7 +24,6 @@ import { useAccountUncategorizedTransactionsColumns } from './hooks';
 import { useAccountTransactionsContext } from '../AccountTransactionsProvider';
 
 import { compose } from '@/utils';
-import { withBanking } from '../../withBanking';
 import styles from './AccountTransactionsUncategorizedTable.module.scss';
 
 /**
@@ -48,7 +46,6 @@ function AccountTransactionsDataTable({
 }) {
   // Retrieve table columns.
   const columns = useAccountUncategorizedTransactionsColumns();
-
   const { scrollableRef } = useAccountTransactionsContext();
 
   // Retrieve list context.
@@ -100,7 +97,7 @@ function AccountTransactionsDataTable({
   };
 
   return (
-    <CashflowTransactionsTable
+    <BankAccountDataTable
       noInitialFetch={true}
       columns={columns}
       data={uncategorizedTransactions || []}
@@ -119,7 +116,7 @@ function AccountTransactionsDataTable({
       ContextMenu={ActionsMenu}
       onCellClick={handleCellClick}
       // #TableVirtualizedListRows props.
-      vListrowHeight={cashflowTansactionsTableSize === 'small' ? 32 : 40}
+      vListrowHeight={cashflowTansactionsTableSize === 'small' ? 34 : 40}
       vListOverscanRowCount={0}
       initialColumnsWidths={initialColumnsWidths}
       onColumnResizing={handleColumnResizing}
@@ -132,7 +129,7 @@ function AccountTransactionsDataTable({
       }}
       onSelectedRowsChange={handleSelectedRowsChange}
       windowScrollerProps={{ scrollElement: scrollableRef }}
-      className={clsx('table-constrant', styles.table, {
+      className={clsx(styles.table, {
         [styles.showCategorizeColumn]: enableMultipleCategorization,
       })}
     />
@@ -151,47 +148,3 @@ export default compose(
     }),
   ),
 )(AccountTransactionsDataTable);
-
-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/UncategorizedTransactions/hooks.tsx

@@ -1,8 +1,10 @@
 // @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
+import clsx from 'classnames';
 import {
   Checkbox,
+  Classes,
   Intent,
   PopoverInteractionKind,
   Position,
@@ -97,6 +99,7 @@ export function useAccountUncategorizedTransactionsColumns() {
         width: 160,
         textOverview: true,
         clickable: true,
+        className: clsx(Classes.TEXT_MUTED),
       },
       {
         id: 'payee',
@@ -123,21 +126,21 @@ export function useAccountUncategorizedTransactionsColumns() {
         id: 'deposit',
         Header: intl.get('banking.label.deposit'),
         accessor: 'formatted_deposit_amount',
-        width: 40,
-        className: 'deposit',
-        textOverview: true,
         align: 'right',
+        width: 40,
+        textOverview: true,
         clickable: true,
+        money: true
       },
       {
         id: 'withdrawal',
         Header: intl.get('banking.label.withdrawal'),
         accessor: 'formatted_withdrawal_amount',
-        className: 'withdrawal',
         width: 40,
         textOverview: true,
         align: 'right',
         clickable: true,
+        money: true
       },
       {
         id: 'categorize_include',

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

@@ -123,6 +123,7 @@ export function useAccountTransactionsColumns() {
         textOverview: true,
         align: 'right',
         clickable: true,
+        money: true,
       },
       {
         id: 'withdrawal',
@@ -133,16 +134,18 @@ export function useAccountTransactionsColumns() {
         textOverview: true,
         align: 'right',
         clickable: true,
+        money: true,
       },
       {
         id: 'running_balance',
         Header: intl.get('banking.label.running_balance'),
         accessor: 'formatted_running_balance',
         className: 'running_balance',
+        align: 'right',
         width: 150,
         textOverview: true,
-        align: 'right',
         clickable: true,
+        money: true,
       },
     ],
     [],

packages/webapp/src/containers/CashFlow/AccountTransactions/components/BankAccountDataTable.module.scss

@@ -0,0 +1,29 @@
+.root {
+  :global .table{    
+    .thead {
+      .th {
+        background: #fff;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        font-size: 13px;
+        font-weight: 500;
+      }
+    }
+
+    .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 #ececec;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,19 @@
+import clsx from 'classnames';
+import { DataTable } from '@/components';
+import styles from './BankAccountDataTable.module.scss';
+
+interface BankAccountDataTableProps {
+  className?: string;
+}
+
+export function BankAccountDataTable({
+  className,
+  ...props
+}: BankAccountDataTableProps) {
+  return (
+    <DataTable
+      {...props}
+      className={clsx('table-constrant', styles.root, className)}
+    />
+  );
+}

packages/webapp/src/containers/Customers/CustomersLanding/components.tsx

@@ -170,6 +170,7 @@ export function useCustomersTableColumns() {
         align: 'right',
         width: 100,
         clickable: true,
+        money: true,
       },
     ],
     [],

packages/webapp/src/containers/Expenses/ExpensesLanding/components.tsx

@@ -143,6 +143,7 @@ export function useExpensesTableColumns() {
         align: 'right',
         width: 150,
         clickable: true,
+        money: true,
         className: clsx(CLASSES.FONT_BOLD),
       },
       {

packages/webapp/src/containers/FinancialStatements/GeneralLedger/dynamicColumns.ts

@@ -41,6 +41,7 @@ const numericColumnAccessor = R.curry((data, column) => {
     ...column,
     align: Align.Right,
     width,
+    money: true,
   };
 });
 

packages/webapp/src/containers/FinancialStatements/Journal/dynamicColumns.ts

@@ -41,6 +41,7 @@ const numericColumnAccessor = R.curry((data, column) => {
   return {
     ...column,
     align: Align.Right,
+    money: true,
     width,
   };
 });

packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/dynamicColumns.ts

@@ -34,6 +34,7 @@ const amountAccessor = R.curry((data, column) => {
       minWidth: AMOUNT_COLUMNS_MIN_WIDTH,
     }),
     align: Align.Right,
+    money: true,
   };
 });
 

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

@@ -212,6 +212,7 @@ export const useItemsTableColumns = () => {
         align: 'right',
         width: 150,
         clickable: true,
+        money: true,
       },
       {
         id: 'cost_price',
@@ -220,6 +221,7 @@ export const useItemsTableColumns = () => {
         align: 'right',
         width: 150,
         clickable: true,
+        money: true,
       },
       {
         id: 'quantity_on_hand',
@@ -229,6 +231,7 @@ export const useItemsTableColumns = () => {
         align: 'right',
         width: 140,
         clickable: true,
+        money: true,
       },
     ],
     [],

packages/webapp/src/containers/Purchases/Bills/BillsLanding/components.tsx

@@ -189,6 +189,7 @@ export function useBillsTableColumns() {
         width: 120,
         align: 'right',
         clickable: true,
+        money: true,
         className: clsx(CLASSES.FONT_BOLD),
       },
       {

packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/components.tsx

@@ -207,6 +207,7 @@ export function useEstiamtesTableColumns() {
         align: 'right',
         clickable: true,
         className: clsx(CLASSES.FONT_BOLD),
+        money: true
       },
       {
         id: 'status',

packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/components.tsx

@@ -240,6 +240,7 @@ export function useInvoicesTableColumns() {
         align: 'right',
         clickable: true,
         textOverview: true,
+        money: true,
         className: clsx(CLASSES.FONT_BOLD),
       },
       {

packages/webapp/src/containers/Vendors/VendorsLanding/components.tsx

@@ -192,6 +192,7 @@ export function useVendorsTableColumns() {
         align: 'right',
         width: 100,
         clickable: true,
+        money: true,
       },
     ],
     [],

packages/webapp/src/style/components/DataTable/DataTable.scss

@@ -378,6 +378,8 @@
 .table-constrant,
 .table--constrant {
   .table {
+    color: #000;
+
     .thead {
       .tr:first-of-type .th {
         border-top: 1px solid #000000;
@@ -395,7 +397,6 @@
       background: #fff;
       padding: 0.5rem 0.5rem;
       border-bottom: 0;
-      color: #000;
     }
   }
 }