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

WIP Financial statements.

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2020-04-05 14:27:06 +02:00
parent 4227f2f9a8
commit b09fc58042
33 changed files with 725 additions and 343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
client/src/components/DataTable.js
View File

@@ -1,4 +1,4 @@
import React, {useEffect} from 'react';
import React, {useEffect, useMemo, useCallback} from 'react';
import {
useTable,
useExpanded,
@@ -11,6 +11,7 @@ import {
} from 'react-table'
import {Checkbox} from '@blueprintjs/core';
import classnames from 'classnames';
import { FixedSizeList } from 'react-window'
import Icon from 'components/Icon';
const IndeterminateCheckbox = React.forwardRef(
@@ -34,8 +35,15 @@ export default function DataTable({
onSelectedRowsChange,
manualSortBy = 'false',
selectionColumn = false,
expandSubRows = true,
className,
noResults = 'This report does not contain any data.'
noResults = 'This report does not contain any data.',
expanded = {},
rowClassNames,
stickyHeader = true,
virtualizedRows = false,
fixedSizeHeight = 100,
fixedItemSize = 30,
}) {
const {
getTableProps,
@@ -43,6 +51,7 @@ export default function DataTable({
headerGroups,
prepareRow,
page,
rows,
canPreviousPage,
canNextPage,
pageOptions,
@@ -52,21 +61,23 @@ export default function DataTable({
previousPage,
setPageSize,
selectedFlatRows,
totalColumnsWidth,
// Get the state from the instance
state: { pageIndex, pageSize, sortBy, selectedRowIds },
} = useTable(
{
columns,
data,
initialState: { pageIndex: 0 }, // Pass our hoisted table state
data: data,
initialState: { pageIndex: 0, expanded }, // Pass our hoisted table state
manualPagination: true, // Tell the usePagination
// hook that we'll handle our own data fetching
// This means we'll also have to provide our own
// pageCount.
// pageCount: controlledPageCount,
getSubRows: row => row.children,
manualSortBy
manualSortBy,
expandSubRows,
},
useSortBy,
useExpanded,
@@ -102,14 +113,50 @@ export default function DataTable({
])
}
);
// When these table states change, fetch new data!
useEffect(() => {
onFetchData && onFetchData({ pageIndex, pageSize, sortBy })
}, [pageIndex, pageSize, sortBy]);
// Renders table row.
const RenderRow = useCallback(({ style = {}, row }) => {
prepareRow(row);
return (
<div {...row.getRowProps({ style })} className="tr">
{row.cells.map((cell) => {
return <div {...cell.getCellProps({
className: classnames(cell.column.className || '', 'td'),
})}>{ cell.render('Cell') }</div>
})}
</div>);
}, [prepareRow]);
// Renders virtualize circle table rows.
const RenderVirtualizedRows = useCallback(({ index, style }) => {
const row = rows[index];
return RenderRow({ row, style });
}, [RenderRow, rows]);
const RenderPage = useCallback(({ style, index } = {}) => {
return page.map((row, index) => RenderRow({ row }));
}, [RenderRow, page]);
const RenderTBody = useCallback(() => {
return (virtualizedRows) ? (
<FixedSizeList
height={fixedSizeHeight}
itemCount={rows.length}
itemSize={fixedItemSize}
>
{RenderVirtualizedRows}
</FixedSizeList>
) : RenderPage();
}, [fixedSizeHeight, rows, fixedItemSize, virtualizedRows,
RenderVirtualizedRows, RenderPage])
return (
<div className={classnames('bigcapital-datatable', className)}>
<div className={classnames('bigcapital-datatable', className, {'has-sticky-header': stickyHeader})}>
<div {...getTableProps()} className="table">
<div className="thead">
{headerGroups.map(headerGroup => (
@@ -144,19 +191,8 @@ export default function DataTable({
))}
</div>
<div {...getTableBodyProps()} className="tbody">
{page.map((row, i) => {
prepareRow(row);
return (
<div {...row.getRowProps()} className="tr">
{row.cells.map((cell) => {
return <div {...cell.getCellProps({
className: classnames(cell.column.className || '', 'td'),
})}>{ cell.render('Cell') }</div>
})}
</div>)
})}
{ RenderTBody() }
{ (page.length === 0) && (
<div className={'tr no-results'}>
<div class="td">{ noResults }</div>

7
client/src/components/FinancialSheet.js
View File

@@ -11,12 +11,13 @@ export default function FinancialSheet({
accountingBasis,
name,
loading,
className,
}) {
const formattedDate = moment(date).format('DD MMMM YYYY')
const nameModifer = name ? `financial-sheet--${name}` : '';
return (
<div className={classnames('financial-sheet', nameModifer)}>
<div className={classnames('financial-sheet', nameModifer, className)}>
<LoadingIndicator loading={loading}>
<h1 class="financial-sheet__title">{ companyTitle }</h1>
<h6 class="financial-sheet__sheet-type">{ sheetType }</h6>
@@ -29,6 +30,10 @@ export default function FinancialSheet({
<div class="financial-sheet__accounting-basis">
{ accountingBasis }
</div>
<div class="financial-sheet__basis">
Accounting Basis: Accural
</div>
</LoadingIndicator>
</div>
);

27
client/src/connectors/BalanceSheet.connect.js Normal file
View File

@@ -0,0 +1,27 @@
import {connect} from 'react-redux';
import {
fetchBalanceSheet,
} from 'store/financialStatement/financialStatements.actions';
import {
getFinancialSheetIndexByQuery,
getFinancialSheet,
getFinancialSheetAccounts,
getFinancialSheetColumns,
getFinancialSheetQuery,
} from 'store/financialStatement/financialStatements.selectors';
export const mapStateToProps = (state, props) => ({
getBalanceSheetIndex: (query) => getFinancialSheetIndexByQuery(state.financialStatements.balanceSheet.sheets, query),
getBalanceSheet: (index) => getFinancialSheet(state.financialStatements.balanceSheet.sheets, index),
getBalanceSheetAccounts: (index) => getFinancialSheetAccounts(state.financialStatements.balanceSheet.sheets, index),
getBalanceSheetColumns:(index) => getFinancialSheetColumns(state.financialStatements.balanceSheet.sheets, index),
getBalanceSheetQuery: (index) => getFinancialSheetQuery(state.financialStatements.balanceSheet.sheets, index),
balanceSheetLoading: state.financialStatements.balanceSheet.loading,
});
export const mapDispatchToProps = (dispatch) => ({
fetchBalanceSheet: (query = {}) => dispatch(fetchBalanceSheet({ query })),
});
export default connect(mapStateToProps, mapDispatchToProps);

27
client/src/connectors/BalanceSheetTable.connect.js Normal file
View File

@@ -0,0 +1,27 @@
import {connect} from 'react-redux';
import {
fetchBalanceSheet,
} from 'store/financialStatement/financialStatements.actions';
import {
getFinancialSheetIndexByQuery,
getFinancialSheet,
getFinancialSheetsAccounts,
getFinancialSheetsColumns,
} from 'store/financialStatement/financialStatements.selectors';
export const mapStateToProps = (state, props) => {
const sheetIndex = props.balanceSheetIndex;
return {
balanceSheetAccounts: props.getBalanceSheetAccounts(sheetIndex),
balanceSheetQuery: props.getBalanceSheetQuery(sheetIndex),
balanceSheetColumns: props.getBalanceSheetColumns(sheetIndex),
};
};
export const mapDispatchToProps = (dispatch) => ({
});
export default connect(mapStateToProps, mapDispatchToProps);

8
client/src/connectors/ProfitLossSheet.connect.js
View File

@@ -5,11 +5,19 @@ import {
import {
getFinancialSheetIndexByQuery,
getFinancialSheet,
getFinancialSheetColumns,
getFinancialSheetQuery,
getFinancialSheetTableRows,
} from 'store/financialStatement/financialStatements.selectors';
export const mapStateToProps = (state, props) => ({
getProfitLossSheetIndex: (query) => getFinancialSheetIndexByQuery(state.financialStatements.profitLoss.sheets, query),
getProfitLossSheet: (index) => getFinancialSheet(state.financialStatements.profitLoss.sheets, index),
getProfitLossColumns: (index) => getFinancialSheetColumns(state.financialStatements.profitLoss.sheets, index),
getProfitLossQuery: (index) => getFinancialSheetQuery(state.financialStatements.profitLoss.sheets, index),
getProfitLossTableRows: (index) => getFinancialSheetTableRows(state.financialStatements.profitLoss.sheets, index),
profitLossSheetLoading: state.financialStatements.profitLoss.loading,
});
export const mapDispatchToProps = (dispatch) => ({

17
client/src/connectors/ProfitLossTable.connect.js Normal file
View File

@@ -0,0 +1,17 @@
import {connect} from 'react-redux';
export const mapStateToProps = (state, props) => {
const sheetIndex = props.profitLossSheetIndex;
return {
profitLossTableRows: props.getProfitLossTableRows(sheetIndex),
profitLossColumns: props.getProfitLossColumns(sheetIndex),
profitLossQuery: props.getProfitLossQuery(sheetIndex),
};
};
export const mapDispatchToProps = (dispatch) => ({
});
export default connect(mapStateToProps, mapDispatchToProps);

9
client/src/connectors/TrialBalanceSheet.connect.js
View File

@@ -3,16 +3,15 @@ import {
fetchTrialBalanceSheet
} from 'store/financialStatement/financialStatements.actions';
import {
getTrialBalanceSheetIndex,
getTrialBalanceAccounts,
getTrialBalanceQuery,
getFinancialSheetIndexByQuery,
getFinancialSheetAccounts,
getFinancialSheetQuery,
} from 'store/financialStatement/financialStatements.selectors';
export const mapStateToProps = (state, props) => ({
getTrialBalanceSheetIndex: (query) => getFinancialSheetIndexByQuery(state.financialStatements.trialBalance.sheets, query),
getTrialBalanceAccounts: (sheetIndex) => getTrialBalanceAccounts(state.financialStatements.trialBalance.sheets, sheetIndex),
getTrialBalanceQuery: (sheetIndex) => getTrialBalanceQuery(state.financialStatements.trialBalance.sheets, sheetIndex),
getTrialBalanceAccounts: (sheetIndex) => getFinancialSheetAccounts(state.financialStatements.trialBalance.sheets, sheetIndex),
getTrialBalanceQuery: (sheetIndex) => getFinancialSheetQuery(state.financialStatements.trialBalance.sheets, sheetIndex),
trialBalanceSheetLoading: state.financialStatements.trialBalance.loading,
});

31
client/src/containers/Dashboard/FinancialStatements/BalanceSheet/BalanceSheet.js
View File

@@ -2,7 +2,7 @@ import React, {useEffect, useMemo, useCallback, useState} from 'react';
import DashboardConnect from 'connectors/Dashboard.connector';
import {compose} from 'utils';
import useAsync from 'hooks/async';
import FinancialStatementConnect from 'connectors/FinancialStatements.connector';
import BalanceSheetConnect from 'connectors/BalanceSheet.connect';
import {useIntl} from 'react-intl';
import BalanceSheetHeader from './BalanceSheetHeader';
import LoadingIndicator from 'components/LoadingIndicator';
@@ -15,10 +15,9 @@ import BalanceSheetActionsBar from './BalanceSheetActionsBar';
function BalanceSheet({
fetchBalanceSheet,
changePageTitle,
getBalanceSheetByQuery,
getBalanceSheetIndexByQuery,
getBalanceSheetByIndex,
balanceSheets
balanceSheetLoading,
getBalanceSheetIndex,
getBalanceSheet,
}) {
const intl = useIntl();
const [filter, setFilter] = useState({
@@ -45,13 +44,8 @@ function BalanceSheet({
// Retrieve balance sheet index by the given filter query.
const balanceSheetIndex = useMemo(() =>
getBalanceSheetIndexByQuery(filter),
[filter, getBalanceSheetIndexByQuery]);
// Retreive balance sheet by the given sheet index.
const balanceSheet = useMemo(() =>
getBalanceSheetByIndex(balanceSheetIndex),
[balanceSheetIndex, getBalanceSheetByIndex]);
getBalanceSheetIndex(filter),
[filter, getBalanceSheetIndex]);
// Handle re-fetch balance sheet after filter change.
const handleFilterSubmit = useCallback((filter) => {
@@ -75,13 +69,10 @@ function BalanceSheet({
onSubmitFilter={handleFilterSubmit} />
<div class="financial-statement__body">
<LoadingIndicator loading={fetchHook.pending}>
<BalanceSheetTable
balanceSheet={balanceSheet}
balanceSheetIndex={balanceSheetIndex}
onFetchData={handleFetchData}
asDate={new Date()} />
</LoadingIndicator>
<BalanceSheetTable
loading={balanceSheetLoading}
balanceSheetIndex={balanceSheetIndex}
onFetchData={handleFetchData} />
</div>
</div>
</DashboardPageContent>
@@ -91,5 +82,5 @@ function BalanceSheet({
export default compose(
DashboardConnect,
FinancialStatementConnect,
BalanceSheetConnect,
)(BalanceSheet);

7
client/src/containers/Dashboard/FinancialStatements/BalanceSheet/BalanceSheetHeader.js
View File

@@ -39,7 +39,7 @@ export default function BalanceSheetHeader({
actions.setSubmitting(false);
},
});
// Handle item select of `display columns by` field.
const onItemSelectDisplayColumns = useCallback((item) => {
formik.setFieldValue('display_columns_type', item.type);
@@ -73,7 +73,8 @@ export default function BalanceSheetHeader({
<Row>
<Col sm={3}>
<SelectDisplayColumnsBy onItemSelect={onItemSelectDisplayColumns} />
<SelectDisplayColumnsBy
onItemSelect={onItemSelectDisplayColumns} />
</Col>
<Col sm={3}>
@@ -102,7 +103,7 @@ export default function BalanceSheetHeader({
type="submit"
onClick={handleSubmitClick}
disabled={formik.isSubmitting}
className={'button--submit-filter'}>
className={'button--submit-filter mt2'}>
{ 'Calculate Report' }
</Button>
</Col>

105
client/src/containers/Dashboard/FinancialStatements/BalanceSheet/BalanceSheetTable.js
View File

@@ -1,37 +1,28 @@
import React, {useMemo, useState, useCallback, useEffect} from 'react';
import FinancialSheet from 'components/FinancialSheet';
import DataTable from 'components/DataTable';
import FinancialStatementConnect from 'connectors/FinancialStatements.connector';
import {compose} from 'utils';
import moment from 'moment';
import Money from 'components/Money';
import FinancialSheet from 'components/FinancialSheet';
import DataTable from 'components/DataTable';
import BalanceSheetConnect from 'connectors/BalanceSheet.connect';
import BalanceSheetTableConnect from 'connectors/BalanceSheetTable.connect';
import {
compose,
defaultExpanderReducer,
} from 'utils';
function BalanceSheetTable({
balanceSheet,
balanceSheetIndex,
getBalanceSheetColumns,
getBalanceSheetAssetsAccounts,
getBalanceSheetLiabilitiesAccounts,
getBalanceSheetQuery,
balanceSheetAccounts,
balanceSheetColumns,
balanceSheetQuery,
onFetchData,
asDate,
loading,
}) {
const balanceSheetColumns = useMemo(() =>
getBalanceSheetColumns(balanceSheetIndex),
[getBalanceSheetColumns, balanceSheetIndex]);
const balanceSheetQuery = useMemo(() =>
getBalanceSheetQuery(balanceSheetIndex),
[getBalanceSheetQuery, balanceSheetIndex])
const columns = useMemo(() => [
{
// Build our expander column
id: 'expander', // Make sure it has an ID
className: 'expander',
className: 'expander',
Header: ({
getToggleAllRowsExpandedProps,
isAllRowsExpanded
@@ -77,63 +68,65 @@ function BalanceSheetTable({
accessor: 'code',
className: "code",
},
...(balanceSheetQuery &&
balanceSheetQuery.display_columns_by === 'total') ? [
...(balanceSheetQuery.display_columns_type === 'total') ? [
{
Header: 'Total',
accessor: 'balance.formatted_amount',
Cell: ({ cell }) => {
const row = cell.row.original;
if (!row.balance) { return ''; }
return (<Money amount={row.balance.formatted_amount} currency={'USD'} />);
if (row.total) {
return (<Money amount={row.total.formatted_amount} currency={'USD'} />);
}
return '';
},
className: "credit",
}
] : (balanceSheetColumns.map((column, index) => ({
Header: column,
accessor: (row) => {
if (row.periods_balance && row.periods_balance[index]) {
return row.periods_balance[index].formatted_amount;
}
},
}))),
], [balanceSheetColumns, balanceSheetQuery]);
const [data, setData] = useState([]);
useEffect(() => {
if (!balanceSheet) { return; }
setData([
{
name: 'Assets',
children: getBalanceSheetAssetsAccounts(balanceSheetIndex),
},
{
name: 'Liabilies & Equity',
children: getBalanceSheetLiabilitiesAccounts(balanceSheetIndex),
}
])
}, []);
] : [],
...(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]);
const handleFetchData = useCallback(() => {
onFetchData && onFetchData();
}, [onFetchData]);
// Calculates the default expanded rows of balance sheet table.
const expandedRows = useMemo(() =>
defaultExpanderReducer(balanceSheetAccounts, 1),
[balanceSheetAccounts]);
return (
<FinancialSheet
companyTitle={'Facebook, Incopration'}
sheetType={'Balance Sheet'}
date={asDate}>
date={asDate}
loading={loading}>
<DataTable
className="bigcapital-datatable--financial-report"
columns={columns}
data={data}
onFetchData={handleFetchData} />
data={balanceSheetAccounts}
onFetchData={handleFetchData}
expandSubRows={true}
expanded={expandedRows} />
</FinancialSheet>
);
}
export default compose(
FinancialStatementConnect,
BalanceSheetConnect,
BalanceSheetTableConnect,
)(BalanceSheetTable);

2
client/src/containers/Dashboard/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js
View File

@@ -83,7 +83,7 @@ function GeneralLedgerHeader({
type="submit"
onClick={handleSubmitClick}
disabled={formik.isSubmitting}
className={'button--submit-filter'}>
className={'button--submit-filter mt2'}>
{ 'Calculate Report' }
</Button>
</Col>

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

@@ -3,6 +3,10 @@ import FinancialSheet from 'components/FinancialSheet';
import DataTable from 'components/DataTable';
import Money from 'components/Money';
import moment from 'moment';
import {
defaultExpanderReducer,
} from 'utils';
const ROW_TYPE = {
CLOSING_BALANCE: 'closing_balance',
@@ -135,6 +139,9 @@ export default function GeneralLedgerTable({
onFetchData && onFetchData();
}, [onFetchData]);
// Default expanded rows of general ledger table.
const expandedRows = useMemo(() => defaultExpanderReducer(data, 1), [data]);
return (
<FinancialSheet
companyTitle={'Facebook, Incopration'}
@@ -147,7 +154,11 @@ export default function GeneralLedgerTable({
className="bigcapital-datatable--financial-report"
columns={columns}
data={data}
onFetchData={handleFetchData} />
onFetchData={handleFetchData}
expanded={expandedRows}
virtualizedRows={true}
fixedItemSize={37}
fixedSizeHeight={1000} />
</FinancialSheet>
);
}

2
client/src/containers/Dashboard/FinancialStatements/Journal/JournalHeader.js
View File

@@ -47,7 +47,7 @@ export default function JournalHeader({
<Button
type="submit"
onClick={handleSubmitClick}
class={'button--submit-filter'}>
className={'button--submit-filter'}>
{ 'Run Report' }
</Button>
</Col>

8
client/src/containers/Dashboard/FinancialStatements/Journal/JournalTable.js
View File

@@ -1,7 +1,7 @@
import React, {useState, useEffect, useCallback, useMemo} from 'react';
import FinancialSheet from 'components/FinancialSheet';
import DataTable from 'components/DataTable';
import {compose} from 'utils';
import {compose, defaultExpanderReducer} from 'utils';
import moment from 'moment';
import JournalConnect from 'connectors/Journal.connect';
import {
@@ -71,6 +71,9 @@ function JournalSheetTable({
onFetchData && onFetchData(...args)
}, [onFetchData]);
// Default expanded rows of general journal table.
const expandedRows = useMemo(() => defaultExpanderReducer(data, 1), [data]);
return (
<FinancialSheet
companyTitle={'Facebook, Incopration'}
@@ -84,7 +87,8 @@ function JournalSheetTable({
columns={columns}
data={data}
onFetchData={handleFetchData}
noResults={"This report does not contain any data."} />
noResults={"This report does not contain any data."}
expanded={expandedRows} />
</FinancialSheet>
);
}

45
client/src/containers/Dashboard/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js
View File

@@ -14,11 +14,11 @@ import moment from 'moment';
function ProfitLossSheet({
changePageTitle,
fetchProfitLossSheet,
getProfitLossSheetIndex,
getProfitLossSheet,
profitLossSheetLoading,
}) {
const [filter, setFilter] = useState({
basis: 'cash',
from_date: moment().startOf('year').format('YYYY-MM-DD'),
to_date: moment().endOf('year').format('YYYY-MM-DD'),
});
@@ -26,7 +26,7 @@ function ProfitLossSheet({
// Change page title of the dashboard.
useEffect(() => {
changePageTitle('Profit/Loss Sheet');
}, []);
}, [changePageTitle]);
// Fetches profit/loss sheet.
const fetchHook = useAsync((query = filter) => {
@@ -35,14 +35,12 @@ function ProfitLossSheet({
]);
}, false);
// Retrieve profit/loss sheet index based on the given filter query.
const profitLossSheetIndex = useMemo(() =>
getProfitLossSheetIndex(filter),
[getProfitLossSheetIndex, filter])
const profitLossSheet = useMemo(() =>
getProfitLossSheet(profitLossSheetIndex),
[getProfitLossSheet, profitLossSheetIndex]);
[getProfitLossSheetIndex, filter]);
// Handle submit filter.
const handleSubmitFilter = useCallback((filter) => {
const _filter = {
...filter,
@@ -51,30 +49,29 @@ function ProfitLossSheet({
};
setFilter(_filter);
fetchHook.execute(_filter);
}, []);
}, [fetchHook]);
// Handle fetch data of profit/loss sheet table.
const handleFetchData = useCallback(() => {
fetchHook.execute();
}, [fetchHook]);
const handleFetchData = useCallback(() => { fetchHook.execute(); }, [fetchHook]);
return (
<DashboardInsider>
<ProfitLossActionsBar />
<DashboardPageContent>
<div class="financial-statement">
<ProfitLossSheetHeader
pageFilter={filter}
onSubmitFilter={handleSubmitFilter} />
<div class="financial-statement">
<ProfitLossSheetHeader
pageFilter={filter}
onSubmitFilter={handleSubmitFilter} />
<div class="financial-statement__body">
<LoadingIndicator loading={false}>
<div class="financial-statement__body">
<ProfitLossSheetTable
data={[]}
onFetchData={handleFetchData} />
</LoadingIndicator>
</div>
</div>
profitLossSheetIndex={profitLossSheetIndex}
onFetchData={handleFetchData}
loading={profitLossSheetLoading} />
</div>
</div>
</DashboardPageContent>
</DashboardInsider>
);
}

4
client/src/containers/Dashboard/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js
View File

@@ -39,7 +39,7 @@ export default function JournalHeader({
const handleItemSelectDisplayColumns = useCallback((item) => {
formik.setFieldValue('display_columns_type', item.type);
formik.setFieldValue('display_columns_by', item.by);
}, []);
}, [formik]);
const handleSubmitClick = useCallback(() => {
formik.submitForm();
@@ -68,7 +68,7 @@ export default function JournalHeader({
<Button
type="submit"
onClick={handleSubmitClick}
className={'button--submit-filter'}>
className={'button--submit-filter mt2'}>
{ 'Run Report' }
</Button>
</Col>

104
client/src/containers/Dashboard/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js
View File

@@ -2,14 +2,59 @@ import React, {useState, useMemo, useCallback} from 'react';
import FinancialSheet from 'components/FinancialSheet';
import DataTable from 'components/DataTable';
import Money from 'components/Money';
import ProfitLossSheetConnect from 'connectors/ProfitLossSheet.connect';
import ProfitLossSheetTableConnect from 'connectors/ProfitLossTable.connect';
import { compose, defaultExpanderReducer } from 'utils';
export default function ProfitLossSheetTable({
function ProfitLossSheetTable({
loading,
data,
onFetchData,
profitLossTableRows,
profitLossQuery,
profitLossColumns
}) {
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: 'Account Name',
accessor: 'name',
@@ -20,12 +65,52 @@ export default function ProfitLossSheetTable({
accessor: 'code',
className: "account_code",
},
])
...(profitLossQuery.display_columns_type === 'total') ? [
{
Header: 'Total',
Cell: ({ cell }) => {
const row = cell.row.original;
if (row.total) {
return (<Money amount={row.total.formatted_amount} currency={'USD'} />);
}
return '';
},
className: "total",
}
] : [],
...(profitLossQuery.display_columns_type === 'date_periods') ?
(profitLossColumns.map((column, index) => ({
id: `date_period_${index}`,
Header: column,
accessor: (row) => {
if (row.periods && row.periods[index]) {
const amount = row.periods[index].formatted_amount;
return (<Money amount={amount} currency={'USD'} />);
}
return '';
},
width: 100,
})))
: [],
], [profitLossQuery.display_columns_type, profitLossColumns]);
// Handle data table fetch data.
const handleFetchData = useCallback((...args) => {
onFetchData && onFetchData(...args);
}, [onFetchData]);
// Retrieve default expanded rows of balance sheet.
const expandedRows = useMemo(() =>
defaultExpanderReducer(profitLossTableRows, 1),
[profitLossTableRows]);
// Retrieve conditional datatable row classnames.
const rowClassNames = useCallback((row) => {
return {
[`row--${row.rowType}`]: row.rowType,
};
}, []);
return (
<FinancialSheet
companyTitle={'Facebook, Incopration'}
@@ -37,8 +122,15 @@ export default function ProfitLossSheetTable({
<DataTable
className="bigcapital-datatable--financial-report"
columns={columns}
data={data}
onFetchData={handleFetchData} />
data={profitLossTableRows}
onFetchData={handleFetchData}
expanded={expandedRows}
rowClassNames={rowClassNames} />
</FinancialSheet>
)
}
);
}
export default compose(
ProfitLossSheetConnect,
ProfitLossSheetTableConnect,
)(ProfitLossSheetTable);

1
client/src/containers/Dashboard/FinancialStatements/RadiosAccountingBasis.js
View File

@@ -19,6 +19,7 @@ export default function RadiosAccountingBasis(props) {
onChange={handleStringChange((value) => {
onChange && onChange(value);
})}
className={'radio-group---accounting-basis'}
{...rest}>
<Radio label="Cash" value="cash" />
<Radio label="Accural" value="accural" />

27
client/src/containers/Dashboard/FinancialStatements/SelectDisplayColumnsBy.js
View File

@@ -1,6 +1,6 @@
import React, {useMemo, useCallback} from 'react';
import React, { useMemo, useState, useCallback } from 'react';
import SelectList from 'components/SelectList';
import {
FormGroup,
@@ -8,21 +8,31 @@ import {
} from '@blueprintjs/core';
export default function SelectsListColumnsBy(props) {
const { formGroupProps, selectListProps } = props;
const { onItemSelect, formGroupProps, selectListProps } = props;
const [itemSelected, setItemSelected] = useState(null);
const displayColumnsByOptions = useMemo(() => [
{key: 'total', name: 'Total', type: 'total', by: '', },
{key: 'year', name: 'Year', type: 'date', by: 'year'},
{key: 'month', name: 'Month', type: 'date', by: 'month'},
{key: 'week', name: 'Week', type: 'date', by: 'month'},
{key: 'day', name: 'Day', type: 'date', by: 'day'},
{key: 'quarter', name: 'Quarter', type: 'date', by: 'quarter'},
{key: 'year', name: 'Date/Year', type: 'date_periods', by: 'year'},
{key: 'month', name: 'Date/Month', type: 'date_periods', by: 'month'},
{key: 'week', name: 'Date/Week', type: 'date_periods', by: 'month'},
{key: 'day', name: 'Date/Day', type: 'date_periods', by: 'day'},
{key: 'quarter', name: 'Date/Quarter', type: 'date_periods', by: 'quarter'},
]);
const itemRenderer = useCallback((item, { handleClick, modifiers, query }) => {
return (<MenuItem text={item.name} key={item.id} onClick={handleClick} />);
}, []);
const handleItemSelect = useCallback((item) => {
setItemSelected(item);
onItemSelect && onItemSelect(item);
}, [setItemSelected, onItemSelect]);
const buttonLabel = useMemo(() =>
itemSelected ? itemSelected.name : 'Select display columns by...',
[itemSelected]);
return (
<FormGroup
label={'Display report columns'}
@@ -36,7 +46,8 @@ export default function SelectsListColumnsBy(props) {
filterable={false}
itemRenderer={itemRenderer}
popoverProps={{ minimal: true }}
buttonLabel={'Select...'}
buttonLabel={buttonLabel}
onItemSelect={handleItemSelect}
{...selectListProps} />
</FormGroup>
);

3
client/src/containers/Dashboard/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js
View File

@@ -55,7 +55,8 @@ export default function TrialBalanceSheetHeader({
<Button
type="submit"
onClick={handleSubmitClick}
disabled={formik.isSubmitting}>
disabled={formik.isSubmitting}
className={'button--submit-filter'}>
{ 'Run Report' }
</Button>
</Col>

20
client/src/store/financialStatement/financialStatements.actions.js
View File

@@ -3,11 +3,19 @@ import t from 'store/types';
export const fetchGeneralLedger = ({ query }) => {
return (dispatch) => new Promise((resolve, reject) => {
dispatch({
type: t.GENERAL_LEDGER_SHEET_LOADING,
loading: true,
})
ApiService.get('/financial_statements/general_ledger', { params: query }).then((response) => {
dispatch({
type: t.GENERAL_LEDGER_STATEMENT_SET,
data: response.data,
});
dispatch({
type: t.GENERAL_LEDGER_SHEET_LOADING,
loading: false,
});
resolve(response);
}).catch((error) => { reject(error); });
});
@@ -15,12 +23,20 @@ export const fetchGeneralLedger = ({ query }) => {
export const fetchBalanceSheet = ({ query }) => {
return (dispatch) => new Promise((resolve, reject) => {
dispatch({
type: t.BALANCE_SHEET_LOADING,
loading: true,
});
ApiService.get('/financial_statements/balance_sheet', { params: query }).then((response) => {
dispatch({
type: t.BALANCE_SHEET_STATEMENT_SET,
data: response.data,
query: query,
});
dispatch({
type: t.BALANCE_SHEET_LOADING,
loading: false,
});
resolve(response);
}).catch((error) => { reject(error); });
});
@@ -50,9 +66,9 @@ export const fetchProfitLossSheet = ({ query }) => {
return (dispatch) => new Promise((resolve, reject) => {
dispatch({
type: t.PROFIT_LOSS_SHEET_LOADING,
loading: false,
loading: true,
});
ApiService.get('/financial_statements/profit_loss_sheet').then((response) => {
ApiService.get('/financial_statements/profit_loss_sheet', { params: query }).then((response) => {
dispatch({
type: t.PROFIT_LOSS_SHEET_SET,
profitLoss: response.data.profitLoss,

63
client/src/store/financialStatement/financialStatements.reducer.js
View File

@@ -1,14 +1,17 @@
import { createReducer } from '@reduxjs/toolkit';
import t from 'store/types';
import {
getBalanceSheetIndexByQuery,
// getBalanceSheetIndexByQuery,
getFinancialSheetIndexByQuery,
// getFinancialSheetIndexByQuery,
} from './financialStatements.selectors';
import {omit} from 'lodash';
const initialState = {
balanceSheets: [],
balanceSheet: {
sheets: [],
loading: false,
},
trialBalance: {
sheets: [],
loading: false,
@@ -72,22 +75,61 @@ const mapJournalTableRows = (journal) => {
}, []);
}
const mapProfitLossToTableRows = (profitLoss) => {
return [
{
name: 'Income',
total: profitLoss.income.total,
children: [
...profitLoss.income.accounts,
{
name: 'Total Income',
total: profitLoss.income.total,
rowType: 'income_total',
}
],
},
{
name: 'Expenses',
total: profitLoss.expenses.total,
children: [
...profitLoss.expenses.accounts,
{
name: 'Total Expenses',
total: profitLoss.expenses.total,
rowType: 'expense_total',
}
],
},
{
name: 'Net Income',
total: profitLoss.net_income.total,
rowType: 'net_income',
}
]
};
export default createReducer(initialState, {
[t.BALANCE_SHEET_STATEMENT_SET]: (state, action) => {
const index = getBalanceSheetIndexByQuery(state.balanceSheets, action.query);
const index = getFinancialSheetIndexByQuery(state.balanceSheet.sheets, action.query);
const balanceSheet = {
balances: action.data.balance_sheet,
accounts: action.data.accounts,
columns: Object.values(action.data.columns),
query: action.data.query,
};
if (index !== -1) {
state.balanceSheets[index] = balanceSheet;
state.balanceSheet.sheets[index] = balanceSheet;
} else {
state.balanceSheets.push(balanceSheet);
state.balanceSheet.sheets.push(balanceSheet);
}
},
[t.BALANCE_SHEET_LOADING]: (state, action) => {
state.balanceSheet.loading = !!action.loading;
},
[t.TRAIL_BALANCE_STATEMENT_SET]: (state, action) => {
const index = getFinancialSheetIndexByQuery(state.trialBalance.sheets, action.query);
const trailBalanceSheet = {
@@ -139,13 +181,18 @@ export default createReducer(initialState, {
}
},
[t.GENERAL_LEDGER_SHEET_LOADING]: (state, action) => {
state.generalLedger.loading = !!action.loading;
},
[t.PROFIT_LOSS_SHEET_SET]: (state, action) => {
const index = getFinancialSheetIndexByQuery(state.profitLoss.sheets, action.query);
const profitLossSheet = {
query: action.query,
profitLoss: action.profitLoss,
columns: action.columns,
tableRows: mapProfitLossToTableRows(action.profitLoss),
};
if (index !== -1) {
state.profitLoss.sheets[index] = profitLossSheet;

94
client/src/store/financialStatement/financialStatements.selectors.js
View File

@@ -38,97 +38,19 @@ export const getFinancialSheetColumns = (sheets, index) => {
* @param {array} sheets
* @param {number} index
*/
export const getFinancialSheetsQuery = (sheets, index) => {
export const getFinancialSheetQuery = (sheets, index) => {
const sheet = getFinancialSheet(sheets, index);
return (sheet && sheet.query) ? sheet.columns : {};
return (sheet && sheet.query) ? sheet.query : {};
};
// Balance Sheet.
export const getBalanceSheetByQuery = (balanceSheets, query) => {
return balanceSheets.find(balanceSheet => {
return getObjectDiff(query, balanceSheet.query).length === 0;
});
};
export const getBalanceSheetIndexByQuery = (balanceSheets, query) => {
return balanceSheets.findIndex((balanceSheet) => {
return getObjectDiff(query, balanceSheet.query).length === 0;
});
};
export const getBalanceSheetByIndex = (balanceSheets, sheetIndex) => {
return balanceSheets[sheetIndex];
};
export const getBalanceSheetQuery = (balanceSheets, sheetIndex) => {
if (typeof balanceSheets[sheetIndex] === 'object') {
return balanceSheets[sheetIndex].query || {};
}
return {};
};
export const getBalanceSheetAssetsAccounts = (balanceSheets, sheetIndex) => {
if (typeof balanceSheets[sheetIndex] === 'object') {
return balanceSheets[sheetIndex].balances.assets.accounts || [];
}
return [];
};
export const getBalanceSheetLiabilitiesAccounts = (balanceSheets, sheetIndex) => {
if (typeof balanceSheets[sheetIndex] === 'object') {
return balanceSheets[sheetIndex].balances.liabilities_equity.accounts || [];
}
return [];
};
export const getBalanceSheetColumns = (balanceSheets, sheetIndex) => {
if (typeof balanceSheets[sheetIndex] === 'object') {
return balanceSheets[sheetIndex].columns;
}
return [];
export const getFinancialSheetAccounts = (sheets, index) => {
const sheet = getFinancialSheet(sheets, index);
return (sheet && sheet.accounts) ? sheet.accounts : [];
};
// Trial Balance Sheet.
export const getTrialBalanceSheetIndex = (trialBalanceSheets, query) => {
return trialBalanceSheets.find((trialBalanceSheet) => {
return getObjectDiff(query, trialBalanceSheet.query).length === 0;
});
};
export const getTrialBalanceAccounts = (trialBalanceSheets, sheetIndex) => {
if (typeof trialBalanceSheets[sheetIndex] === 'object') {
return trialBalanceSheets[sheetIndex].accounts;
}
return [];
};
export const getTrialBalanceQuery = (trialBalanceSheets, sheetIndex) => {
if (typeof trialBalanceSheets[sheetIndex] === 'object') {
return trialBalanceSheets[sheetIndex].query;
}
return [];
};
// Profit/Loss Sheet selectors.
export const getProfitLossSheetIndex = (profitLossSheets, query) => {
return profitLossSheets.find((profitLossSheet) => {
return getObjectDiff(query, profitLossSheet.query).length === 0;
});
}
export const getProfitLossSheet = (profitLossSheets, index) => {
return (typeof profitLossSheets[index] !== 'undefined') ?
profitLossSheets[index] : null;
};
export const getProfitLossSheetColumns = (profitLossSheets, index) => {
const sheet = getProfitLossSheet(profitLossSheets, index);
return (sheet) ? sheet.columns : [];
};
export const getProfitLossSheetAccounts = (profitLossSheets, index) => {
const sheet = getProfitLossSheet(profitLossSheets, index);
return (sheet) ? sheet.accounts : [];
export const getFinancialSheetTableRows = (sheets, index) => {
const sheet = getFinancialSheet(sheets, index);
return (sheet && sheet.tableRows) ? sheet.tableRows : [];
};

5
client/src/store/financialStatement/financialStatements.types.js
View File

@@ -2,9 +2,14 @@
export default {
GENERAL_LEDGER_STATEMENT_SET: 'GENERAL_LEDGER_STATEMENT_SET',
GENERAL_LEDGER_SHEET_LOADING: 'GENERAL_LEDGER_SHEET_LOADING',
BALANCE_SHEET_STATEMENT_SET: 'BALANCE_SHEET_STATEMENT_SET',
BALANCE_SHEET_LOADING: 'BALANCE_SHEET_LOADING',
TRAIL_BALANCE_STATEMENT_SET: 'TRAIL_BALANCE_STATEMENT_SET',
TRIAL_BALANCE_SHEET_LOADING: 'TRIAL_BALANCE_SHEET_LOADING',
JOURNAL_SHEET_SET: 'JOURNAL_SHEET_SET',
JOURNAL_SHEET_LOADING: 'JOURNAL_SHEET_LOADING',

14
client/src/style/components/data-table.scss
View File

@@ -1,5 +1,5 @@
.bigcapital-datatable{
.bigcapital-datatable{
display: block;
overflow-x: auto;
overflow-y: hidden;
@@ -138,8 +138,7 @@
}
}
.no-results{
.no-results{
color: #666;
.td{
@@ -149,6 +148,15 @@
}
}
&.has-sticky-header{
.thead{
.tr .th{
position: sticky;
}
}
}
&--financial-report{
.thead{

6
client/src/style/objects/buttons.scss
View File

@@ -30,7 +30,7 @@
min-height: 32px;
background-color: #E6EFFB;
color: #555555;
box-shadow: 0 0 0;
box-shadow: 0 0 0 transparent;
.form-group--select-list &{
border-radius: 0;
@@ -38,7 +38,7 @@
&,
&:hover{
background: #fff;
box-shadow: 0 0 0;
box-shadow: 0 0 0 transparent;
border: 1px solid #ced4da;
}
}
@@ -53,7 +53,7 @@
&,
&:hover{
box-shadow: 0 0 0;
box-shadow: 0 0 0 transparent;
}
}
}

106
client/src/style/objects/form.scss
View File

@@ -94,4 +94,110 @@ label{
.#{$ns}-icon-caret-down{
color: #8D8D8D;
}
}
///@extend
.#{$ns}-control {
input:checked ~ .#{$ns}-control-indicator {
box-shadow: 0 0 0 transparent;
background-color: transparent;
background-image: none;
}
&:hover input:checked ~ .#{$ns}-control-indicator {
box-shadow: 0 0 0 transparent;
background-color: transparent;
}
input:not(:disabled):active:checked ~ .#{$ns}-control-indicator {
box-shadow: 0 0 0 transparent;
background: transparent;
}
input:disabled:checked ~ .#{$ns}-control-indicator {
box-shadow: none;
background: transparent;
}
&.#{$ns}-disabled {
cursor: not-allowed;
color: $pt-text-color-disabled;
}
&.#{$ns}-inline {
display: inline-block;
margin-right: $pt-grid-size * 2;
}
.#{$ns}-control-indicator {
box-shadow: 0 0 0 transparent;
background-clip: padding-box;
background-color: transparent;
background-image: none;
width: 18px;
height: 18px;
&::before {
width: 18px;
height: 18px;
}
}
&:hover .#{$ns}-control-indicator {
background-color: transparent;
}
input:not(:disabled):active ~ .#{$ns}-control-indicator {
box-shadow: 0 0 0 transparent;
background: transparent;
}
/*
Radio
Markup:
<label class="#{$ns}-control #{$ns}-radio {{.modifier}}">
<input type="radio" name="docs-radio-regular" {{:modifier}} />
<span class="#{$ns}-control-indicator"></span>
Radio
</label>
:checked - Selected
:disabled - Disabled. Also add <code>.#{$ns}-disabled</code> to <code>.#{$ns}-control</code> to change text color (not shown below).
.#{$ns}-align-right - Right-aligned indicator
.#{$ns}-large - Large
Styleguide radio
*/
&.#{$ns}-radio {
.#{$ns}-control-indicator{
border: 2px solid #cecece;
&::before{
height: 14px;
width: 14px;
}
}
input:checked ~ .#{$ns}-control-indicator{
border-color: #137cbd;
&::before {
background-image: radial-gradient(#137cbd 40%, transparent 40%);
}
}
input:checked:disabled ~ .#{$ns}-control-indicator::before {
opacity: 0.5;
}
input:focus ~ .#{$ns}-control-indicator {
-moz-outline-radius: $control-indicator-size;
}
}
}

76
client/src/style/pages/financial-statements.scss
View File

@@ -7,26 +7,46 @@
padding: 25px 26px 25px;
background: #FDFDFD;
.bp3-form-group .bp3-label{
font-weight: 500;
font-size: 13px;
color: #444;
.bp3-form-group,
.radio-group---accounting-basis{
.bp3-label{
font-weight: 500;
font-size: 13px;
color: #444;
}
}
.bp3-button.button--submit-filter{
min-height: 34px;
padding-left: 16px;
padding-right: 16px;
}
.radio-group---accounting-basis{
.bp3-label{
margin-bottom: 12px;
}
}
}
&__body{
padding-left: 20px;
padding-right: 20px;
display: flex;
justify-content: center;
align-items: center;
}
}
.financial-sheet{
border: 1px solid #E2E2E2;
min-width: 640px;
width: 0;
padding: 20px;
padding-top: 30px;
width: auto;
padding: 30px 20px;
max-width: 100%;
margin: 35px auto;
min-height: 400px;
display: flex;
flex-direction: column;
&__title{
margin: 0;
@@ -57,14 +77,24 @@
}
}
}
&__accounting-basis{
&__basis{
color: #888;
text-align: center;
margin-top: auto;
padding-top: 16px;
font-size: 12px;
}
.dashboard__loading-indicator{
margin-left: auto;
margin-right: auto;
}
&--expended{
width: auto;
}
&--trial-balance{
min-width: 720px;
}
&--general-ledger,
&--journal{
width: auto;
@@ -73,11 +103,8 @@
margin-top: 10px;
border-color: #EEEDED;
}
&--journal{
.financial-sheet__table{
.tbody{
.tr .td{
padding: 0.4rem;
@@ -96,4 +123,25 @@
}
}
}
&--profit-loss-sheet{
.financial-sheet__table{
.tbody{
.account_code.td{
color: #666;
}
.row--income_total,
.row--expense_total,
.row--net_income{
font-weight: 600;
.total.td{
border-bottom-color: #555;
}
}
}
}
}
}

22
client/src/utils.js
View File

@@ -111,4 +111,24 @@ export const parseDateRangeQuery = (keyword) => {
from_date: moment().startOf(query.range).toDate(),
to_date: moment().endOf(query.range).toDate(),
};
};
};
export const defaultExpanderReducer = (tableRows, level) => {
let currentLevel = 1;
const expended = [];
const walker = (rows, parentIndex = null) => {
return rows.forEach((row, index) => {
const _index = parentIndex ? `${parentIndex}.${index}` : `${index}`;
expended[_index] = true;
if (row.children && currentLevel < level) {
walker(row.children, _index);
}
currentLevel++;
}, {});
};
walker(tableRows);
return expended;
}