diff --git a/packages/webapp/src/components/Datatable/TableCell.tsx b/packages/webapp/src/components/Datatable/TableCell.tsx index 135083e7f..a1dc5c1d6 100644 --- a/packages/webapp/src/components/Datatable/TableCell.tsx +++ b/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 }) { - {cell.render('Cell')} + {cell.column?.money ? ( + {cell.render('Cell')} + ) : ( + <>{cell.render('Cell')} + )} ); diff --git a/packages/webapp/src/components/Money/MoneyDisplay.module.scss b/packages/webapp/src/components/Money/MoneyDisplay.module.scss new file mode 100644 index 000000000..a84032885 --- /dev/null +++ b/packages/webapp/src/components/Money/MoneyDisplay.module.scss @@ -0,0 +1,4 @@ + +.root { + font-variant-numeric: tabular-nums; +} \ No newline at end of file diff --git a/packages/webapp/src/components/Money/MoneyDisplay.tsx b/packages/webapp/src/components/Money/MoneyDisplay.tsx new file mode 100644 index 000000000..74518187a --- /dev/null +++ b/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 {children}; +} diff --git a/packages/webapp/src/containers/Accounting/JournalsLanding/utils.tsx b/packages/webapp/src/containers/Accounting/JournalsLanding/utils.tsx index ab8bfac21..add270fb4 100644 --- a/packages/webapp/src/containers/Accounting/JournalsLanding/utils.tsx +++ b/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), }, diff --git a/packages/webapp/src/containers/Accounts/utils.tsx b/packages/webapp/src/containers/Accounts/utils.tsx index 8b7f28e1e..bed1323d3 100644 --- a/packages/webapp/src/containers/Accounts/utils.tsx +++ b/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', }, ], diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/ExcludedTransactions/ExcludedTransactionsTable.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/ExcludedTransactions/ExcludedTransactionsTable.tsx index 34c037c14..a75376ea5 100644 --- a/packages/webapp/src/containers/CashFlow/AccountTransactions/ExcludedTransactions/ExcludedTransactionsTable.tsx +++ b/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 ( - ); } @@ -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; - } - } - } -`; diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/PendingTransactions/_hooks.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/PendingTransactions/_hooks.tsx index 4863273f1..3c8f868d4 100644 --- a/packages/webapp/src/containers/CashFlow/AccountTransactions/PendingTransactions/_hooks.tsx +++ b/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 }, ], [], diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/RecognizedTransactionsTable.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/RecognizedTransactionsTable.tsx index 979e65092..46fc69e8b 100644 --- a/packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/RecognizedTransactionsTable.tsx +++ b/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 ( - } - 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 ( diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/_utils.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/_utils.tsx index d734d1163..9ecfa405d 100644 --- a/packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/_utils.tsx +++ b/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 {transaction.description}; -}; - /** * 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 }, ], [], diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountTransactionsUncategorizedTable.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountTransactionsUncategorizedTable.tsx index 34d7be997..336c689d9 100644 --- a/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountTransactionsUncategorizedTable.tsx +++ b/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 ( - @@ -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; - } - } - } -`; diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/hooks.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/hooks.tsx index 5054878f2..8f9b3d059 100644 --- a/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/hooks.tsx +++ b/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', diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/components.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/components.tsx index e63775359..2fef2ed8c 100644 --- a/packages/webapp/src/containers/CashFlow/AccountTransactions/components.tsx +++ b/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, }, ], [], diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/components/BankAccountDataTable.module.scss b/packages/webapp/src/containers/CashFlow/AccountTransactions/components/BankAccountDataTable.module.scss new file mode 100644 index 000000000..c7a9e0aaf --- /dev/null +++ b/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; + } + } + } +} \ No newline at end of file diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/components/BankAccountDataTable.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/components/BankAccountDataTable.tsx new file mode 100644 index 000000000..139d1ada1 --- /dev/null +++ b/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 ( + + ); +} diff --git a/packages/webapp/src/containers/Customers/CustomersLanding/components.tsx b/packages/webapp/src/containers/Customers/CustomersLanding/components.tsx index 9ab8c82fa..1ebdd5e9f 100644 --- a/packages/webapp/src/containers/Customers/CustomersLanding/components.tsx +++ b/packages/webapp/src/containers/Customers/CustomersLanding/components.tsx @@ -170,6 +170,7 @@ export function useCustomersTableColumns() { align: 'right', width: 100, clickable: true, + money: true, }, ], [], diff --git a/packages/webapp/src/containers/Expenses/ExpensesLanding/components.tsx b/packages/webapp/src/containers/Expenses/ExpensesLanding/components.tsx index 8366dbdf8..d03bde7a7 100644 --- a/packages/webapp/src/containers/Expenses/ExpensesLanding/components.tsx +++ b/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), }, { diff --git a/packages/webapp/src/containers/FinancialStatements/GeneralLedger/dynamicColumns.ts b/packages/webapp/src/containers/FinancialStatements/GeneralLedger/dynamicColumns.ts index 503fe3fb6..85611b315 100644 --- a/packages/webapp/src/containers/FinancialStatements/GeneralLedger/dynamicColumns.ts +++ b/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, }; }); diff --git a/packages/webapp/src/containers/FinancialStatements/Journal/dynamicColumns.ts b/packages/webapp/src/containers/FinancialStatements/Journal/dynamicColumns.ts index a7acd7743..313cf747e 100644 --- a/packages/webapp/src/containers/FinancialStatements/Journal/dynamicColumns.ts +++ b/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, }; }); diff --git a/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/dynamicColumns.ts b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/dynamicColumns.ts index 43ad0c0f8..e8d8c9ed4 100644 --- a/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/dynamicColumns.ts +++ b/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, }; }); diff --git a/packages/webapp/src/containers/Items/components.tsx b/packages/webapp/src/containers/Items/components.tsx index cffcc75a3..23c3c72e0 100644 --- a/packages/webapp/src/containers/Items/components.tsx +++ b/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, }, ], [], diff --git a/packages/webapp/src/containers/Purchases/Bills/BillsLanding/components.tsx b/packages/webapp/src/containers/Purchases/Bills/BillsLanding/components.tsx index f23f2f085..413c45a3b 100644 --- a/packages/webapp/src/containers/Purchases/Bills/BillsLanding/components.tsx +++ b/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), }, { diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/components.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/components.tsx index 0c55e9bc7..0d593a42b 100644 --- a/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/components.tsx +++ b/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', diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/components.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/components.tsx index 4e8dcfd16..8fc32a662 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/components.tsx +++ b/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), }, { diff --git a/packages/webapp/src/containers/Vendors/VendorsLanding/components.tsx b/packages/webapp/src/containers/Vendors/VendorsLanding/components.tsx index 99aa089df..85a918235 100644 --- a/packages/webapp/src/containers/Vendors/VendorsLanding/components.tsx +++ b/packages/webapp/src/containers/Vendors/VendorsLanding/components.tsx @@ -192,6 +192,7 @@ export function useVendorsTableColumns() { align: 'right', width: 100, clickable: true, + money: true, }, ], [], diff --git a/packages/webapp/src/style/components/DataTable/DataTable.scss b/packages/webapp/src/style/components/DataTable/DataTable.scss index 96a07454f..a96d7a003 100644 --- a/packages/webapp/src/style/components/DataTable/DataTable.scss +++ b/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; } } } \ No newline at end of file