From 1b51742c365cf86d27a0ee3dc138229f1660764c Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Tue, 3 Sep 2024 16:39:13 +0200 Subject: [PATCH 1/2] feat: Datatable UI improvements --- packages/webapp/src/containers/Accounts/utils.tsx | 6 ++++-- .../containers/Customers/CustomersLanding/components.tsx | 7 +++++-- .../src/containers/Expenses/ExpensesLanding/components.tsx | 4 +--- packages/webapp/src/containers/Items/components.tsx | 6 ++++-- .../Sales/Invoices/InvoicesLanding/components.tsx | 2 -- .../src/containers/Vendors/VendorsLanding/components.tsx | 6 ++++-- .../webapp/src/style/components/DataTable/DataTable.scss | 7 ++++--- 7 files changed, 22 insertions(+), 16 deletions(-) diff --git a/packages/webapp/src/containers/Accounts/utils.tsx b/packages/webapp/src/containers/Accounts/utils.tsx index a0b4aaaf7e..8b7f28e1e3 100644 --- a/packages/webapp/src/containers/Accounts/utils.tsx +++ b/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, }, diff --git a/packages/webapp/src/containers/Customers/CustomersLanding/components.tsx b/packages/webapp/src/containers/Customers/CustomersLanding/components.tsx index 0de0a69b5a..9ab8c82fae 100644 --- a/packages/webapp/src/containers/Customers/CustomersLanding/components.tsx +++ b/packages/webapp/src/containers/Customers/CustomersLanding/components.tsx @@ -1,6 +1,7 @@ // @ts-nocheck import React, { useMemo } from 'react'; import intl from 'react-intl-universal'; +import clsx from 'classnames'; import { Menu, MenuItem, @@ -14,6 +15,7 @@ import { import { Can, Icon, Money, If, AvatarCell } from '@/components'; import { CustomerAction, AbilitySubject } from '@/constants/abilityOption'; import { safeCallback } from '@/utils'; +import { CLASSES } from '@/constants'; /** * Actions menu. @@ -140,7 +142,7 @@ export function useCustomersTableColumns() { id: 'company_name', Header: intl.get('company_name'), accessor: 'company_name', - className: 'company_name', + className: clsx('company_name', CLASSES.TEXT_MUTED), width: 150, clickable: true, }, @@ -148,9 +150,9 @@ export function useCustomersTableColumns() { id: 'work_phone', Header: intl.get('phone_number'), accessor: PhoneNumberAccessor, - className: 'phone_number', width: 100, clickable: true, + className: clsx('phone_number', CLASSES.TEXT_MUTED) }, { id: 'note', @@ -159,6 +161,7 @@ export function useCustomersTableColumns() { disableSortBy: true, width: 85, clickable: true, + className: clsx(CLASSES.TEXT_MUTED) }, { id: 'balance', diff --git a/packages/webapp/src/containers/Expenses/ExpensesLanding/components.tsx b/packages/webapp/src/containers/Expenses/ExpensesLanding/components.tsx index cac65ea929..8366dbdf83 100644 --- a/packages/webapp/src/containers/Expenses/ExpensesLanding/components.tsx +++ b/packages/webapp/src/containers/Expenses/ExpensesLanding/components.tsx @@ -140,7 +140,6 @@ export function useExpensesTableColumns() { id: 'amount', Header: intl.get('full_amount'), accessor: 'formatted_amount', - className: 'amount', align: 'right', width: 150, clickable: true, @@ -150,16 +149,15 @@ export function useExpensesTableColumns() { id: 'payment_account', Header: intl.get('payment_account'), accessor: 'payment_account.name', - className: 'payment_account', width: 150, clickable: true, + className: clsx(CLASSES.TEXT_MUTED), }, { id: 'expense_account', Header: intl.get('expense_account'), accessor: ExpenseAccountAccessor, width: 160, - className: 'expense_account', disableSortBy: true, clickable: true, }, diff --git a/packages/webapp/src/containers/Items/components.tsx b/packages/webapp/src/containers/Items/components.tsx index 0a06e7408d..cffcc75a3f 100644 --- a/packages/webapp/src/containers/Items/components.tsx +++ b/packages/webapp/src/containers/Items/components.tsx @@ -1,6 +1,7 @@ // @ts-nocheck import React from 'react'; import intl from 'react-intl-universal'; +import clsx from 'classnames'; import { isNumber } from 'lodash'; import { Menu, @@ -11,6 +12,7 @@ import { Position, Button, Popover, + Classes, } from '@blueprintjs/core'; import { FormattedMessage as T, Icon, Money, If, Can } from '@/components'; import { isBlank, safeCallback } from '@/utils'; @@ -182,7 +184,7 @@ export const useItemsTableColumns = () => { id: 'code', Header: intl.get('item_code'), accessor: 'code', - className: 'code', + className: clsx(Classes.TEXT_MUTED), width: 120, clickable: true, }, @@ -198,7 +200,7 @@ export const useItemsTableColumns = () => { id: 'category', Header: intl.get('category'), accessor: 'category.name', - className: 'category', + className: clsx(Classes.TEXT_MUTED), width: 150, clickable: true, textOverview: true, diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/components.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/components.tsx index 5bdb11d269..4e8dcfd165 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/components.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/components.tsx @@ -229,7 +229,6 @@ export function useInvoicesTableColumns() { Header: intl.get('invoice_no__'), accessor: 'invoice_no', width: 100, - className: 'invoice_no', clickable: true, textOverview: true, }, @@ -266,7 +265,6 @@ export function useInvoicesTableColumns() { Header: intl.get('reference_no'), accessor: 'reference_no', width: 90, - className: 'reference_no', clickable: true, textOverview: true, }, diff --git a/packages/webapp/src/containers/Vendors/VendorsLanding/components.tsx b/packages/webapp/src/containers/Vendors/VendorsLanding/components.tsx index c6eb396e6b..99aa089dfb 100644 --- a/packages/webapp/src/containers/Vendors/VendorsLanding/components.tsx +++ b/packages/webapp/src/containers/Vendors/VendorsLanding/components.tsx @@ -12,6 +12,7 @@ import { Intent, Classes, } from '@blueprintjs/core'; +import clsx from 'classnames'; import { Can, Icon, Money, If, AvatarCell } from '@/components'; import { VendorAction, AbilitySubject } from '@/constants/abilityOption'; @@ -163,7 +164,7 @@ export function useVendorsTableColumns() { id: 'company_name', Header: intl.get('company_name'), accessor: 'company_name', - className: 'company_name', + className: clsx(Classes.TEXT_MUTED), width: 150, clickable: true, }, @@ -171,7 +172,7 @@ export function useVendorsTableColumns() { id: 'work_phone', Header: intl.get('phone_number'), accessor: PhoneNumberAccessor, - className: 'work_phone', + className: clsx(Classes.TEXT_MUTED), width: 100, clickable: true, }, @@ -180,6 +181,7 @@ export function useVendorsTableColumns() { Header: intl.get('note'), accessor: NoteAccessor, disableSortBy: true, + className: clsx(Classes.TEXT_MUTED), width: 85, clickable: true, }, diff --git a/packages/webapp/src/style/components/DataTable/DataTable.scss b/packages/webapp/src/style/components/DataTable/DataTable.scss index 54a5a2a12c..96a07454fc 100644 --- a/packages/webapp/src/style/components/DataTable/DataTable.scss +++ b/packages/webapp/src/style/components/DataTable/DataTable.scss @@ -8,6 +8,7 @@ border-spacing: 0; min-width: 100%; display: block; + color: #101219; .thead .thead-inner, .tbody .tbody-inner { @@ -21,7 +22,7 @@ padding: 0.68rem 0.5rem; background: #f5f5f5; font-size: 14px; - color: #4E5B6F; + color: #424853; font-weight: 400; border-bottom: 1px solid #d2dde2; @@ -180,9 +181,9 @@ } .tr .td { - border-bottom: 1px solid #e0e0e0; + border-bottom: 1px solid #ececec; align-items: center; - color: #101219; + .placeholder { color: #a0a0a0; From c76ce091914934ef94ce74271b3303ccb9efc162 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Wed, 4 Sep 2024 13:59:13 +0200 Subject: [PATCH 2/2] feat: optimize the style of bank account transactions tables --- .../src/components/Datatable/TableCell.tsx | 11 +++- .../components/Money/MoneyDisplay.module.scss | 4 ++ .../src/components/Money/MoneyDisplay.tsx | 9 +++ .../Accounting/JournalsLanding/utils.tsx | 1 + .../webapp/src/containers/Accounts/utils.tsx | 2 + .../ExcludedTransactionsTable.tsx | 46 +-------------- .../ExcludedTransactions/_utils.tsx | 2 + .../PendingTransactionsTable.tsx | 51 +---------------- .../PendingTransactions/_hooks.tsx | 2 + .../RecognizedTransactionsTable.tsx | 44 +------------- .../RecognizedTransactions/_utils.tsx | 13 +++-- .../AccountTransactionsUncategorizedTable.tsx | 57 ++----------------- .../UncategorizedTransactions/hooks.tsx | 9 ++- .../AccountTransactions/components.tsx | 5 +- .../BankAccountDataTable.module.scss | 29 ++++++++++ .../components/BankAccountDataTable.tsx | 19 +++++++ .../Customers/CustomersLanding/components.tsx | 1 + .../Expenses/ExpensesLanding/components.tsx | 1 + .../GeneralLedger/dynamicColumns.ts | 1 + .../Journal/dynamicColumns.ts | 1 + .../TrialBalanceSheet/dynamicColumns.ts | 1 + .../src/containers/Items/components.tsx | 3 + .../Bills/BillsLanding/components.tsx | 1 + .../Estimates/EstimatesLanding/components.tsx | 1 + .../Invoices/InvoicesLanding/components.tsx | 1 + .../Vendors/VendorsLanding/components.tsx | 1 + .../style/components/DataTable/DataTable.scss | 3 +- 27 files changed, 119 insertions(+), 200 deletions(-) create mode 100644 packages/webapp/src/components/Money/MoneyDisplay.module.scss create mode 100644 packages/webapp/src/components/Money/MoneyDisplay.tsx create mode 100644 packages/webapp/src/containers/CashFlow/AccountTransactions/components/BankAccountDataTable.module.scss create mode 100644 packages/webapp/src/containers/CashFlow/AccountTransactions/components/BankAccountDataTable.tsx diff --git a/packages/webapp/src/components/Datatable/TableCell.tsx b/packages/webapp/src/components/Datatable/TableCell.tsx index 135083e7f3..a1dc5c1d62 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 0000000000..a84032885f --- /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 0000000000..74518187ac --- /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 ab8bfac218..add270fb49 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 8b7f28e1e3..bed1323d30 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 34c037c143..a75376ea5d 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 4863273f1f..3c8f868d44 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 979e65092e..46fc69e8b1 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 d734d11633..9ecfa405da 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 34d7be9973..336c689d97 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 5054878f26..8f9b3d0598 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', + align: 'right', width: 40, - className: 'deposit', textOverview: true, - align: 'right', 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 e637753599..2fef2ed8c7 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 0000000000..c7a9e0aaf4 --- /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 0000000000..139d1ada1a --- /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 9ab8c82fae..1ebdd5e9f7 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 8366dbdf83..d03bde7a72 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 503fe3fb6d..85611b3156 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 a7acd77437..313cf747eb 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 43ad0c0f8b..e8d8c9ed4f 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 cffcc75a3f..23c3c72e05 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 f23f2f0858..413c45a3b9 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 0c55e9bc7d..0d593a42bc 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 4e8dcfd165..8fc32a6622 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 99aa089dfb..85a918235b 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 96a07454fc..a96d7a0035 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