QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-17 05:10:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: optimize the style of bank account transactions tables

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2024-09-04 13:59:13 +02:00
parent e3532098b2
commit c76ce09191
27 changed files with 120 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/webapp/src/components/Datatable/TableCell.tsx
View File

@@ -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>
);

4
packages/webapp/src/components/Money/MoneyDisplay.module.scss Normal file
View File

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

9
packages/webapp/src/components/Money/MoneyDisplay.tsx Normal file
View File

@@ -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>;
}

1
packages/webapp/src/containers/Accounting/JournalsLanding/utils.tsx
View File

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

2
packages/webapp/src/containers/Accounts/utils.tsx
View File

@@ -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',
},
],

46
packages/webapp/src/containers/CashFlow/AccountTransactions/ExcludedTransactions/ExcludedTransactionsTable.tsx
View File

@@ -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;
}
}
}
`;

2
packages/webapp/src/containers/CashFlow/AccountTransactions/ExcludedTransactions/_utils.tsx
View File

@@ -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
},
],
[],

51
packages/webapp/src/containers/CashFlow/AccountTransactions/PendingTransactions/PendingTransactionsTable.tsx
View File

@@ -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;
}
}
}
`;

2
packages/webapp/src/containers/CashFlow/AccountTransactions/PendingTransactions/_hooks.tsx
View File

@@ -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
},
],
[],

44
packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/RecognizedTransactionsTable.tsx
View File

@@ -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}>

13
packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/_utils.tsx
View File

@@ -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
},
],
[],

57
packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountTransactionsUncategorizedTable.tsx
View File

@@ -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;
}
}
}
`;

11
packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/hooks.tsx
View File

@@ -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',

5
packages/webapp/src/containers/CashFlow/AccountTransactions/components.tsx
View File

@@ -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,
},
],
[],

29
packages/webapp/src/containers/CashFlow/AccountTransactions/components/BankAccountDataTable.module.scss Normal file
View File

@@ -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;
}
}
}
}

19
packages/webapp/src/containers/CashFlow/AccountTransactions/components/BankAccountDataTable.tsx Normal file
View File

@@ -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)}
/>
);
}

1
packages/webapp/src/containers/Customers/CustomersLanding/components.tsx
View File

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

1
packages/webapp/src/containers/Expenses/ExpensesLanding/components.tsx
View File

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

1
packages/webapp/src/containers/FinancialStatements/GeneralLedger/dynamicColumns.ts
View File

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

1
packages/webapp/src/containers/FinancialStatements/Journal/dynamicColumns.ts
View File

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

1
packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/dynamicColumns.ts
View File

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

3
packages/webapp/src/containers/Items/components.tsx
View File

@@ -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,
},
],
[],

1
packages/webapp/src/containers/Purchases/Bills/BillsLanding/components.tsx
View File

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

1
packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/components.tsx
View File

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

1
packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/components.tsx
View File

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

1
packages/webapp/src/containers/Vendors/VendorsLanding/components.tsx
View File

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

3
packages/webapp/src/style/components/DataTable/DataTable.scss
View File

@@ -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;
}
}
}