QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-16 12:50:38 +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

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