QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-16 04:40:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: bugs in financial statements.

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2020-05-26 19:50:30 +02:00
parent 2321c3be99
commit 1e663b6e49
9 changed files with 393 additions and 459 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js
View File

@@ -16,8 +16,7 @@ import withSettings from 'containers/Settings/withSettings';
import withBalanceSheetActions from './withBalanceSheetActions';
import withBalanceSheetDetail from './withBalanceSheetDetail';
import {useIntl } from 'react-intl';
import { useIntl } from 'react-intl';
function BalanceSheet({
// #withDashboard
@@ -30,7 +29,7 @@ function BalanceSheet({
balanceSheetLoading,
// #withPreferences
organizationSettings
organizationSettings,
}) {
const { formatMessage } = useIntl();
const [filter, setFilter] = useState({
@@ -41,39 +40,35 @@ function BalanceSheet({
display_columns_by: '',
none_zero: false,
});
const [refetch, setRefetch] = useState(false);
const fetchHook = useQuery(['balance-sheet', filter],
const fetchHook = useQuery(
['balance-sheet', filter],
(key, query) => fetchBalanceSheet({ ...query }),
{ manual: true });
{ manual: true },
);
// Handle fetch the data of balance sheet.
const handleFetchData = useCallback(() => {
setRefetch(true);
fetchHook.refetch({ force: true });
}, []);
useEffect(() => {
changePageTitle(formatMessage({ id: 'balance_sheet' }));
}, [changePageTitle,formatMessage]);
}, [changePageTitle, formatMessage]);
// Handle re-fetch balance sheet after filter change.
const handleFilterSubmit = useCallback((filter) => {
const _filter = {
...filter,
from_date: moment(filter.from_date).format('YYYY-MM-DD'),
to_date: moment(filter.to_date).format('YYYY-MM-DD'),
};
setFilter({ ..._filter });
setRefetch(true);
}, [setFilter]);
// Refetch sheet effect.
useEffect(() => {
if (refetch) {
const handleFilterSubmit = useCallback(
(filter) => {
const _filter = {
...filter,
from_date: moment(filter.from_date).format('YYYY-MM-DD'),
to_date: moment(filter.to_date).format('YYYY-MM-DD'),
};
setFilter({ ..._filter });
fetchHook.refetch({ force: true });
setRefetch(false);
}
}, [refetch])
},
[setFilter],
);
return (
<DashboardInsider>
@@ -83,14 +78,16 @@ function BalanceSheet({
<div class="financial-statement">
<BalanceSheetHeader
pageFilter={filter}
onSubmitFilter={handleFilterSubmit} />
onSubmitFilter={handleFilterSubmit}
/>
<div class="financial-statement__body">
<BalanceSheetTable
companyName={organizationSettings.name}
loading={balanceSheetLoading}
balanceSheetQuery={filter}
onFetchData={handleFetchData} />
onFetchData={handleFetchData}
/>
</div>
</div>
</DashboardPageContent>
@@ -105,4 +102,4 @@ export default compose(
balanceSheetLoading,
})),
withSettings,
)(BalanceSheet);
)(BalanceSheet);

166
client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js
View File

@@ -1,4 +1,4 @@
import React, {useMemo, useCallback } from 'react';
import React, { useMemo, useCallback } from 'react';
import { connect } from 'react-redux';
import { useIntl } from 'react-intl';
@@ -8,13 +8,10 @@ import DataTable from 'components/DataTable';
import SettingsConnect from 'connectors/Settings.connect';
import withBalanceSheetDetail from './withBalanceSheetDetail';
import {
getFinancialSheetIndexByQuery,
} from 'store/financialStatement/financialStatements.selectors';
import { getFinancialSheetIndexByQuery } from 'store/financialStatement/financialStatements.selectors';
import { compose, defaultExpanderReducer } from 'utils';
function BalanceSheetTable({
// #withPreferences
organizationSettings,
@@ -28,113 +25,85 @@ function BalanceSheetTable({
onFetchData,
loading,
}) {
const {formatMessage} = useIntl();
const columns = useMemo(() => [
{
// Build our expander column
id: 'expander', // Make sure it has an ID
className: 'expander',
Header: ({
getToggleAllRowsExpandedProps,
isAllRowsExpanded
}) => (
<span {...getToggleAllRowsExpandedProps()} className="toggle">
{isAllRowsExpanded ?
(<span class="arrow-down" />) :
(<span class="arrow-right" />)
}
</span>
),
Cell: ({ row }) =>
// Use the row.canExpand and row.getToggleRowExpandedProps prop getter
// to build the toggle for expanding a row
row.canExpand ? (
<span
{...row.getToggleRowExpandedProps({
style: {
// We can even use the row.depth property
// and paddingLeft to indicate the depth
// of the row
paddingLeft: `${row.depth * 2}rem`,
},
className: 'toggle',
})}
>
{row.isExpanded ?
(<span class="arrow-down" />) :
(<span class="arrow-right" />)
}
</span>
) : null,
width: 20,
disableResizing: true,
},
{
Header: formatMessage({id:'account_name'}),
accessor: 'name',
className: "account_name",
},
{
Header: formatMessage({id:'code'}),
accessor: 'code',
className: "code",
},
...(balanceSheetQuery.display_columns_type === 'total') ? [
const { formatMessage } = useIntl();
const columns = useMemo(
() => [
{
Header: formatMessage({id:'total'}),
accessor: 'balance.formatted_amount',
Cell: ({ cell }) => {
const row = cell.row.original;
if (row.total) {
return (<Money amount={row.total.formatted_amount} currency={'USD'} />);
}
return '';
},
className: "credit",
}
] : [],
...(balanceSheetQuery.display_columns_type === 'date_periods') ?
(balanceSheetColumns.map((column, index) => ({
id: `date_period_${index}`,
Header: column,
accessor: (row) => {
if (row.total_periods && row.total_periods[index]) {
const amount = row.total_periods[index].formatted_amount;
return (<Money amount={amount} currency={'USD'} />);
}
return '';
},
width: 100,
})))
: [],
], [balanceSheetQuery, balanceSheetColumns,formatMessage]);
Header: formatMessage({ id: 'account_name' }),
accessor: 'name',
className: 'account_name',
},
{
Header: formatMessage({ id: 'code' }),
accessor: 'code',
className: 'code',
},
...(balanceSheetQuery.display_columns_type === 'total'
? [
{
Header: formatMessage({ id: 'total' }),
accessor: 'balance.formatted_amount',
Cell: ({ cell }) => {
const row = cell.row.original;
if (row.total) {
return (
<Money
amount={row.total.formatted_amount}
currency={'USD'}
/>
);
}
return '';
},
className: 'credit',
},
]
: []),
...(balanceSheetQuery.display_columns_type === 'date_periods'
? balanceSheetColumns.map((column, index) => ({
id: `date_period_${index}`,
Header: column,
accessor: (row) => {
if (row.total_periods && row.total_periods[index]) {
const amount = row.total_periods[index].formatted_amount;
return <Money amount={amount} currency={'USD'} />;
}
return '';
},
width: 100,
}))
: []),
],
[balanceSheetQuery, balanceSheetColumns, formatMessage],
);
const handleFetchData = useCallback(() => {
onFetchData && onFetchData();
}, [onFetchData]);
// Calculates the default expanded rows of balance sheet table.
const expandedRows = useMemo(() =>
defaultExpanderReducer(balanceSheetAccounts, 1),
[balanceSheetAccounts]);
const expandedRows = useMemo(
() => defaultExpanderReducer(balanceSheetAccounts, 1),
[balanceSheetAccounts],
);
return (
<FinancialSheet
companyName={organizationSettings.name}
sheetType={'Balance Sheet'}
sheetType={formatMessage({ id: 'balance_sheet' })}
fromDate={balanceSheetQuery.from_date}
toDate={balanceSheetQuery.to_date}
basis={balanceSheetQuery.basis}
loading={loading}>
loading={loading}
>
<DataTable
className="bigcapital-datatable--financial-report"
columns={columns}
data={balanceSheetAccounts}
onFetchData={handleFetchData}
expanded={expandedRows}
expandSubRows={true} />
expandSubRows={true}
/>
</FinancialSheet>
);
}
@@ -153,13 +122,12 @@ const withBalanceSheetTable = connect(mapStateToProps);
export default compose(
withBalanceSheetTable,
withBalanceSheetDetail(({
balanceSheetAccounts,
balanceSheetColumns,
balanceSheetQuery }) => ({
withBalanceSheetDetail(
({ balanceSheetAccounts, balanceSheetColumns, balanceSheetQuery }) => ({
balanceSheetAccounts,
balanceSheetColumns,
balanceSheetQuery,
})),
}),
),
SettingsConnect,
)(BalanceSheetTable);
)(BalanceSheetTable);

13
client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js
View File

@@ -38,7 +38,6 @@ function GeneralLedger({
basis: 'accural',
none_zero: true,
});
const [refetch, setRefetch] = useState(false);
// Change page title of the dashboard.
useEffect(() => {
@@ -52,17 +51,9 @@ function GeneralLedger({
(key, query) => fetchGeneralLedger(query),
{ manual: true });
// Refetch general ledger sheet effect.
useEffect(() => {
if (refetch) {
fetchSheet.refetch({ force: true });
setRefetch(false);
}
}, [fetchSheet, refetch]);
// Handle fetch data of trial balance table.
const handleFetchData = useCallback(() => {
setRefetch(true);
fetchSheet.refetch({ force: true });
}, []);
// Handle financial statement filter change.
@@ -73,7 +64,7 @@ function GeneralLedger({
to_date: moment(filter.to_date).format('YYYY-MM-DD'),
};
setFilter(parsedFilter);
setRefetch(true);
fetchSheet.refetch({ force: true });
}, [setFilter]);
const handleFilterChanged = () => { };

231
client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js
View File

@@ -1,22 +1,16 @@
import React, {useCallback, useMemo} from 'react';
import React, { useCallback, useMemo } from 'react';
import moment from 'moment';
import { connect } from 'react-redux';
import {
defaultExpanderReducer,
compose
} from 'utils';
import { defaultExpanderReducer, compose } from 'utils';
import { useIntl } from 'react-intl';
import FinancialSheet from 'components/FinancialSheet';
import DataTable from 'components/DataTable';
import Money from 'components/Money';
import {
getFinancialSheetIndexByQuery,
} from 'store/financialStatement/financialStatements.selectors';
import { getFinancialSheetIndexByQuery } from 'store/financialStatement/financialStatements.selectors';
import withGeneralLedger from './withGeneralLedger';
const ROW_TYPE = {
CLOSING_BALANCE: 'closing_balance',
OPENING_BALANCE: 'opening_balance',
@@ -32,121 +26,97 @@ function GeneralLedgerTable({
generalLedgerTableRows,
generalLedgerQuery,
}) {
const { formatMessage } = useIntl();
// Account name column accessor.
const accountNameAccessor = useCallback((row) => {
switch (row.rowType) {
case ROW_TYPE.OPENING_BALANCE:
return 'Opening Balance';
case ROW_TYPE.CLOSING_BALANCE:
return 'Closing Balance';
default:
return row.name;
}
}, [ROW_TYPE]);
const accountNameAccessor = useCallback(
(row) => {
switch (row.rowType) {
case ROW_TYPE.OPENING_BALANCE:
return 'Opening Balance';
case ROW_TYPE.CLOSING_BALANCE:
return 'Closing Balance';
default:
return row.name;
}
},
[ROW_TYPE],
);
// Date accessor.
const dateAccessor = useCallback((row) => {
const TYPES = [
ROW_TYPE.OPENING_BALANCE,
ROW_TYPE.CLOSING_BALANCE,
ROW_TYPE.TRANSACTION];
const dateAccessor = useCallback(
(row) => {
const TYPES = [
ROW_TYPE.OPENING_BALANCE,
ROW_TYPE.CLOSING_BALANCE,
ROW_TYPE.TRANSACTION,
];
return (TYPES.indexOf(row.rowType) !== -1)
? moment(row.date).format('DD-MM-YYYY') : '';
}, [moment, ROW_TYPE]);
return TYPES.indexOf(row.rowType) !== -1
? moment(row.date).format('DD-MM-YYYY')
: '';
},
[moment, ROW_TYPE],
);
// Amount cell
const amountCell = useCallback(({ cell }) => {
const transaction = cell.row.original
const transaction = cell.row.original;
if (transaction.rowType === ROW_TYPE.ACCOUNT) {
return (!cell.row.isExpanded) ?
(<Money amount={transaction.closing.amount} currency={"USD"} />) : '';
return !cell.row.isExpanded ? (
<Money amount={transaction.closing.amount} currency={'USD'} />
) : (
''
);
}
return (<Money amount={transaction.amount} currency={"USD"} />);
return <Money amount={transaction.amount} currency={'USD'} />;
}, []);
const referenceLink = useCallback((row) => {
return (<a href="">{row.referenceId}</a>);
return <a href="">{row.referenceId}</a>;
});
const { formatMessage } = useIntl();
const columns = useMemo(() => [
{
// Build our expander column
id: 'expander', // Make sure it has an ID
className: 'expander',
Header: ({
getToggleAllRowsExpandedProps,
isAllRowsExpanded
}) => (
<span {...getToggleAllRowsExpandedProps()} className="toggle">
{isAllRowsExpanded ?
(<span class="arrow-down" />) :
(<span class="arrow-right" />)
}
</span>
),
Cell: ({ row }) =>
// Use the row.canExpand and row.getToggleRowExpandedProps prop getter
// to build the toggle for expanding a row
row.canExpand ? (
<span
{...row.getToggleRowExpandedProps({
style: {
// We can even use the row.depth property
// and paddingLeft to indicate the depth
// of the row
paddingLeft: `${row.depth * 2}rem`,
},
className: 'toggle',
})}
>
{row.isExpanded ?
(<span class="arrow-down" />) :
(<span class="arrow-right" />)
}
</span>
) : null,
width: 20,
disableResizing: true,
},
{
Header: formatMessage({id:'account_name'}),
accessor: accountNameAccessor,
className: "name",
},
{
Header: formatMessage({id:'date'}),
accessor: dateAccessor,
className: "date",
},
{
Header: formatMessage({id:'transaction_type'}),
accessor: 'referenceType',
className: 'transaction_type',
},
{
Header: formatMessage({id:'trans_num'}),
accessor: referenceLink,
className: 'transaction_number'
},
{
Header: formatMessage({id:'description'}),
accessor: 'note',
className: 'description',
},
{
Header: formatMessage({id:'amount'}),
Cell: amountCell,
className: 'amount'
},
{
Header: formatMessage({id:'balance'}),
Cell: amountCell,
className: 'balance',
},
], []);
const columns = useMemo(
() => [
{
Header: formatMessage({ id: 'account_name' }),
accessor: accountNameAccessor,
className: 'name',
},
{
Header: formatMessage({ id: 'date' }),
accessor: dateAccessor,
className: 'date',
},
{
Header: formatMessage({ id: 'transaction_type' }),
accessor: 'referenceType',
className: 'transaction_type',
},
{
Header: formatMessage({ id: 'trans_num' }),
accessor: referenceLink,
className: 'transaction_number',
},
{
Header: formatMessage({ id: 'description' }),
accessor: 'note',
className: 'description',
},
{
Header: formatMessage({ id: 'amount' }),
Cell: amountCell,
className: 'amount',
},
{
Header: formatMessage({ id: 'balance' }),
Cell: amountCell,
className: 'balance',
},
],
[],
);
const handleFetchData = useCallback(() => {
onFetchData && onFetchData();
@@ -155,23 +125,25 @@ function GeneralLedgerTable({
// Default expanded rows of general ledger table.
const expandedRows = useMemo(
() => defaultExpanderReducer(generalLedgerTableRows, 1),
[generalLedgerTableRows]);
[generalLedgerTableRows],
);
const rowClassNames = (row) => ([
`row-type--${row.original.rowType}`,
]);
const rowClassNames = (row) => [`row-type--${row.original.rowType}`];
return (
<FinancialSheet
companyName={companyName}
sheetType={'General Ledger Sheet'}
sheetType={formatMessage({ id: 'general_ledger_sheet' })}
fromDate={generalLedgerQuery.from_date}
toDate={generalLedgerQuery.to_date}
name="general-ledger"
loading={generalLedgerSheetLoading}>
loading={generalLedgerSheetLoading}
>
<DataTable
className="bigcapital-datatable--financial-report"
noResults={formatMessage({
id: 'this_report_does_not_contain_any_data_between_date_period',
})}
columns={columns}
data={generalLedgerTableRows}
onFetchData={handleFetchData}
@@ -181,9 +153,10 @@ function GeneralLedgerTable({
fixedItemSize={37}
fixedSizeHeight={1000}
expandable={true}
expandToggleColumn={1} />
expandToggleColumn={1}
/>
</FinancialSheet>
);
);
}
const mapStateToProps = (state, props) => {
@@ -201,13 +174,15 @@ const withGeneralLedgerTable = connect(mapStateToProps);
export default compose(
withGeneralLedgerTable,
withGeneralLedger(({
generalLedgerTableRows,
generalLedgerSheetLoading,
generalLedgerQuery,
}) => ({
generalLedgerTableRows,
generalLedgerSheetLoading,
generalLedgerQuery
})),
withGeneralLedger(
({
generalLedgerTableRows,
generalLedgerSheetLoading,
generalLedgerQuery,
}) => ({
generalLedgerTableRows,
generalLedgerSheetLoading,
generalLedgerQuery,
}),
),
)(GeneralLedgerTable);

71
client/src/containers/FinancialStatements/Journal/Journal.js
View File

@@ -15,13 +15,12 @@ import SettingsConnect from 'connectors/Settings.connect';
import withDashboard from 'containers/Dashboard/withDashboard';
import withJournalActions from './withJournalActions';
function Journal({
// #withJournalActions
requestFetchJournalSheet,
// #withDashboard
changePageTitle,
changePageTitle,
// #withPreferences
organizationSettings,
@@ -29,76 +28,72 @@ function Journal({
const [filter, setFilter] = useState({
from_date: moment().startOf('year').format('YYYY-MM-DD'),
to_date: moment().endOf('year').format('YYYY-MM-DD'),
basis: 'accural'
basis: 'accural',
});
const { formatMessage } = useIntl();
const [refetch, setRefetch] = useState(false);
useEffect(() => {
changePageTitle(formatMessage({id:'journal_sheet'}));
}, [changePageTitle,formatMessage]);
changePageTitle(formatMessage({ id: 'journal_sheet' }));
}, [changePageTitle, formatMessage]);
const fetchHook = useQuery(['journal', filter],
const fetchHook = useQuery(
['journal', filter],
(key, query) => requestFetchJournalSheet(query),
{ manual: true });
{ manual: true },
);
// Handle financial statement filter change.
const handleFilterSubmit = useCallback((filter) => {
const _filter = {
...filter,
from_date: moment(filter.from_date).format('YYYY-MM-DD'),
to_date: moment(filter.to_date).format('YYYY-MM-DD'),
};
setFilter(_filter);
setRefetch(true);
}, [fetchHook]);
const handleFilterSubmit = useCallback(
(filter) => {
const _filter = {
...filter,
from_date: moment(filter.from_date).format('YYYY-MM-DD'),
to_date: moment(filter.to_date).format('YYYY-MM-DD'),
};
setFilter(_filter);
fetchHook.refetch({ force: true });
},
[fetchHook],
);
const handlePrintClick = useCallback(() => {
const handlePrintClick = useCallback(() => {}, []);
}, []);
const handleExportClick = useCallback(() => {
}, []);
const handleExportClick = useCallback(() => {}, []);
const handleFetchData = useCallback(({ sortBy, pageIndex, pageSize }) => {
setRefetch(true);
fetchHook.refetch({ force: true });
}, []);
useEffect(() => {
if (refetch) {
fetchHook.refetch({ force: true });
setRefetch(false);
}
}, [refetch, fetchHook])
return (
<DashboardInsider>
<JournalActionsBar
onSubmitFilter={handleFilterSubmit}
onPrintClick={handlePrintClick}
onExportClick={handleExportClick} />
onExportClick={handleExportClick}
/>
<DashboardPageContent>
<div class="financial-statement financial-statement--journal">
<JournalHeader
<JournalHeader
pageFilter={filter}
onSubmitFilter={handleFilterSubmit} />
onSubmitFilter={handleFilterSubmit}
/>
<div class="financial-statement__table">
<JournalTable
companyName={organizationSettings.name}
journalQuery={filter}
onFetchData={handleFetchData} />
onFetchData={handleFetchData}
/>
</div>
</div>
</DashboardPageContent>
</DashboardInsider>
)
);
}
export default compose(
withDashboard,
withJournalActions,
SettingsConnect,
)(Journal);
)(Journal);

160
client/src/containers/FinancialStatements/Journal/JournalTable.js
View File

@@ -1,20 +1,17 @@
import React, { useCallback, useMemo } from 'react';
import {connect} from 'react-redux';
import { connect } from 'react-redux';
import moment from 'moment';
import { useIntl } from 'react-intl';
import { useIntl } from 'react-intl';
import FinancialSheet from 'components/FinancialSheet';
import DataTable from 'components/DataTable';
import {compose, defaultExpanderReducer} from 'utils';
import { compose, defaultExpanderReducer } from 'utils';
import Money from 'components/Money';
import {
getFinancialSheetIndexByQuery,
} from 'store/financialStatement/financialStatements.selectors';
import { getFinancialSheetIndexByQuery } from 'store/financialStatement/financialStatements.selectors';
import withJournal from './withJournal';
function JournalSheetTable({
// #withJournal
journalSheetTableRows,
@@ -28,61 +25,80 @@ function JournalSheetTable({
const { formatMessage } = useIntl();
const rowTypeFilter = (rowType, value, types) => {
return (types.indexOf(rowType) === -1) ? '' : value;
return types.indexOf(rowType) === -1 ? '' : value;
};
const exceptRowTypes = (rowType, value, types) => {
return (types.indexOf(rowType) !== -1) ? '' : value;
return types.indexOf(rowType) !== -1 ? '' : value;
};
const columns = useMemo(() => [
{
Header: formatMessage({id:'date'}),
accessor: r => rowTypeFilter(r.rowType, moment(r.date).format('YYYY/MM/DD'), ['first_entry']),
className: 'date',
width: 85,
},
{
Header: formatMessage({id:'transaction_type'}),
accessor: r => rowTypeFilter(r.rowType, r.transaction_type, ['first_entry']),
className: "transaction_type",
width: 145,
},
{
Header: formatMessage({id:'num'}),
accessor: r => rowTypeFilter(r.rowType, r.reference_id, ['first_entry']),
className: 'reference_id',
width: 70,
},
{
Header: formatMessage({id:'description'}),
accessor: 'note',
},
{
Header: formatMessage({id:'acc_code'}),
accessor: 'account.code',
width: 120,
className: 'account_code',
},
{
Header: formatMessage({id:'account'}),
accessor: 'account.name',
},
{
Header: formatMessage({id:'credit'}),
accessor: r => exceptRowTypes(
r.rowType, (<Money amount={r.credit} currency={'USD'} />), ['space_entry']),
},
{
Header: formatMessage({id:'debit'}),
accessor: r => exceptRowTypes(
r.rowType, (<Money amount={r.debit} currency={'USD'} />), ['space_entry']),
},
], [formatMessage]);
const columns = useMemo(
() => [
{
Header: formatMessage({ id: 'date' }),
accessor: (r) =>
rowTypeFilter(r.rowType, moment(r.date).format('YYYY/MM/DD'), [
'first_entry',
]),
className: 'date',
width: 85,
},
{
Header: formatMessage({ id: 'transaction_type' }),
accessor: (r) =>
rowTypeFilter(r.rowType, r.transaction_type, ['first_entry']),
className: 'transaction_type',
width: 145,
},
{
Header: formatMessage({ id: 'num' }),
accessor: (r) =>
rowTypeFilter(r.rowType, r.reference_id, ['first_entry']),
className: 'reference_id',
width: 70,
},
{
Header: formatMessage({ id: 'description' }),
accessor: 'note',
},
{
Header: formatMessage({ id: 'acc_code' }),
accessor: 'account.code',
width: 120,
className: 'account_code',
},
{
Header: formatMessage({ id: 'account' }),
accessor: 'account.name',
},
{
Header: formatMessage({ id: 'credit' }),
accessor: (r) =>
exceptRowTypes(
r.rowType,
<Money amount={r.credit} currency={'USD'} />,
['space_entry'],
),
},
{
Header: formatMessage({ id: 'debit' }),
accessor: (r) =>
exceptRowTypes(
r.rowType,
<Money amount={r.debit} currency={'USD'} />,
['space_entry'],
),
},
],
[formatMessage],
);
const handleFetchData = useCallback((...args) => {
onFetchData && onFetchData(...args)
}, [onFetchData]);
const handleFetchData = useCallback(
(...args) => {
onFetchData && onFetchData(...args);
},
[onFetchData],
);
// Default expanded rows of general journal table.
const expandedRows = useMemo(() => defaultExpanderReducer([], 1), []);
@@ -90,41 +106,45 @@ function JournalSheetTable({
return (
<FinancialSheet
companyName={companyName}
sheetType={'Journal Sheet'}
sheetType={formatMessage({ id: 'journal_sheet' })}
fromDate={journalSheetQuery.from_date}
toDate={journalSheetQuery.to_date}
name="journal"
loading={journalSheetLoading}>
loading={journalSheetLoading}
>
<DataTable
className="bigcapital-datatable--financial-report"
columns={columns}
data={journalSheetTableRows}
onFetchData={handleFetchData}
noResults={"This report does not contain any data between date period."}
expanded={expandedRows} />
noResults={formatMessage({
id: 'this_report_does_not_contain_any_data_between_date_period',
})}
expanded={expandedRows}
/>
</FinancialSheet>
);
}
const mapStateToProps = (state, props) => {
const { journalQuery } = props;
return {
journalIndex: getFinancialSheetIndexByQuery(
state.financialStatements.journal.sheets,
journalQuery,
)
),
};
}
};
const withJournalTable = connect(mapStateToProps);
export default compose(
withJournalTable,
withJournal(({ journalSheetTableRows, journalSheetLoading, journalSheetQuery }) => ({
journalSheetTableRows,
journalSheetLoading,
journalSheetQuery,
})),
)(JournalSheetTable);
withJournal(
({ journalSheetTableRows, journalSheetLoading, journalSheetQuery }) => ({
journalSheetTableRows,
journalSheetLoading,
journalSheetQuery,
}),
),
)(JournalSheetTable);

14
client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js
View File

@@ -34,7 +34,6 @@ function ProfitLossSheet({
from_date: moment().startOf('year').format('YYYY-MM-DD'),
to_date: moment().endOf('year').format('YYYY-MM-DD'),
});
const [refetch, setRefetch] = useState(false);
// Change page title of the dashboard.
useEffect(() => {
@@ -54,20 +53,13 @@ function ProfitLossSheet({
to_date: moment(filter.to_date).format('YYYY-MM-DD'),
};
setFilter(_filter);
setRefetch(true);
fetchHook.refetch({ force: true });
}, []);
// Handle fetch data of profit/loss sheet table.
const handleFetchData = useCallback(() => {
setRefetch(true);
}, [fetchHook]);
useEffect(() => {
if (refetch) {
fetchHook.refetch({ force: true });
setRefetch(false);
}
}, [fetchHook, refetch]);
fetchHook.refetch({ force: true });
}, []);
return (
<DashboardInsider>

56
client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js
View File

@@ -3,7 +3,7 @@ import { useQuery } from 'react-query';
import moment from 'moment';
import { useIntl } from 'react-intl';
import TrialBalanceSheetHeader from "./TrialBalanceSheetHeader";
import TrialBalanceSheetHeader from './TrialBalanceSheetHeader';
import TrialBalanceSheetTable from './TrialBalanceSheetTable';
import TrialBalanceActionsBar from './TrialBalanceActionsBar';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
@@ -16,8 +16,6 @@ import withTrialBalanceActions from './withTrialBalanceActions';
import withTrialBalance from './withTrialBalance';
import withSettings from 'containers/Settings/withSettings';
function TrialBalanceSheet({
// #withDashboard
changePageTitle,
@@ -37,40 +35,36 @@ function TrialBalanceSheet({
basis: 'accural',
none_zero: false,
});
const [refetch, setRefetch] = useState(false);
const { formatMessage } = useIntl();
const fetchHook = useQuery(['trial-balance', filter],
const fetchHook = useQuery(
['trial-balance', filter],
(key, query) => fetchTrialBalanceSheet(query),
{ manual: true });
{ manual: true },
);
// handle fetch data of trial balance table.
const handleFetchData = useCallback(() => {
setRefetch(true);
}, [fetchHook]);
fetchHook.refetch({ force: true });
}, []);
// Change page title of the dashboard.
useEffect(() => {
changePageTitle(formatMessage({id:'trial_balance_sheet'}));
}, [changePageTitle,formatMessage]);
changePageTitle(formatMessage({ id: 'trial_balance_sheet' }));
}, [changePageTitle, formatMessage]);
const handleFilterSubmit = useCallback((filter) => {
const parsedFilter = {
...filter,
from_date: moment(filter.from_date).format('YYYY-MM-DD'),
to_date: moment(filter.to_date).format('YYYY-MM-DD'),
};
setFilter(parsedFilter);
setRefetch(true);
}, []);
// Refetch sheet effect.
useEffect(() => {
if (refetch) {
const handleFilterSubmit = useCallback(
(filter) => {
const parsedFilter = {
...filter,
from_date: moment(filter.from_date).format('YYYY-MM-DD'),
to_date: moment(filter.to_date).format('YYYY-MM-DD'),
};
setFilter(parsedFilter);
fetchHook.refetch({ force: true });
setRefetch(false);
}
}, [fetchHook]);
},
[fetchHook],
);
return (
<DashboardInsider>
@@ -80,19 +74,21 @@ function TrialBalanceSheet({
<div class="financial-statement">
<TrialBalanceSheetHeader
pageFilter={filter}
onSubmitFilter={handleFilterSubmit} />
onSubmitFilter={handleFilterSubmit}
/>
<div class="financial-statement__body">
<TrialBalanceSheetTable
companyName={organizationSettings.name}
trialBalanceQuery={filter}
onFetchData={handleFetchData}
loading={trialBalanceSheetLoading} />
loading={trialBalanceSheetLoading}
/>
</div>
</div>
</DashboardPageContent>
</DashboardInsider>
)
);
}
export default compose(
@@ -102,4 +98,4 @@ export default compose(
trialBalanceSheetLoading,
})),
withSettings,
)(TrialBalanceSheet);
)(TrialBalanceSheet);

88
client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js
View File

@@ -1,19 +1,16 @@
import React, {useCallback, useMemo} from 'react';
import React, { useCallback, useMemo } from 'react';
import { connect } from 'react-redux';
import { useIntl } from 'react-intl';
import FinancialSheet from 'components/FinancialSheet';
import DataTable from 'components/DataTable';
import Money from 'components/Money';
import {
getFinancialSheetIndexByQuery,
} from 'store/financialStatement/financialStatements.selectors';
import { getFinancialSheetIndexByQuery } from 'store/financialStatement/financialStatements.selectors';
import withTrialBalance from './withTrialBalance';
import { compose } from 'utils';
function TrialBalanceSheetTable({
// #withTrialBalanceDetail
trialBalanceAccounts,
@@ -26,40 +23,42 @@ function TrialBalanceSheetTable({
loading,
companyName,
}) {
const { formatMessage } = useIntl();
const {formatMessage} =useIntl();
const columns = useMemo(() => [
{
Header: formatMessage({ id:'account_name' }),
accessor: 'name',
className: "name",
},
{
Header: formatMessage({ id:'code' }),
accessor: 'code',
className: "code",
width: 120,
},
{
Header: formatMessage({ id:'credit' }),
accessor: r => (<Money amount={r.credit} currency="USD" />),
className: 'credit',
width: 120,
},
{
Header: formatMessage({ id:'debit' }),
accessor: r => (<Money amount={r.debit} currency="USD" />),
className: 'debit',
width: 120,
},
{
Header: formatMessage({ id:'balance' }),
accessor: r => (<Money amount={r.balance} currency="USD" />),
className: 'balance',
width: 120,
}
], [formatMessage]);
const columns = useMemo(
() => [
{
Header: formatMessage({ id: 'account_name' }),
accessor: 'name',
className: 'name',
},
{
Header: formatMessage({ id: 'code' }),
accessor: 'code',
className: 'code',
width: 120,
},
{
Header: formatMessage({ id: 'credit' }),
accessor: (r) => <Money amount={r.credit} currency="USD" />,
className: 'credit',
width: 120,
},
{
Header: formatMessage({ id: 'debit' }),
accessor: (r) => <Money amount={r.debit} currency="USD" />,
className: 'debit',
width: 120,
},
{
Header: formatMessage({ id: 'balance' }),
accessor: (r) => <Money amount={r.balance} currency="USD" />,
className: 'balance',
width: 120,
},
],
[formatMessage],
);
const handleFetchData = useCallback(() => {
onFetchData && onFetchData();
@@ -68,21 +67,22 @@ function TrialBalanceSheetTable({
return (
<FinancialSheet
companyName={companyName}
sheetType={'Trial Balance Sheet'}
sheetType={formatMessage({ id: 'trial_balance_sheet' })}
fromDate={trialBalanceQuery.from_date}
toDate={trialBalanceQuery.to_date}
name="trial-balance"
loading={loading}>
loading={loading}
>
<DataTable
className="bigcapital-datatable--financial-report"
columns={columns}
data={trialBalanceAccounts}
onFetchData={handleFetchData}
expandable={true}
expandToggleColumn={1} />
expandToggleColumn={1}
/>
</FinancialSheet>
);
);
}
const mapStateToProps = (state, props) => {
@@ -102,4 +102,4 @@ export default compose(
withTrialBalance(({ trialBalanceAccounts }) => ({
trialBalanceAccounts,
})),
)(TrialBalanceSheetTable);
)(TrialBalanceSheetTable);