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

feat(BalanceSheet|ProfitLoss): comparions feature.

Browse Source
This commit is contained in:
a.bouhuolia
2022-01-29 20:46:41 +02:00
parent 735803f1a5
commit 77d826e6d4
17 changed files with 795 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Datatable/TableHeader.js
View File

@@ -15,7 +15,7 @@ function TableHeaderCell({ column, index }) {
<div
{...column.getHeaderProps({
className: classNames(column.className || '', 'th', {
'align-right': column.align === 'right',
[`align-${column.align}`]: column.align,
}),
})}
>

2
src/components/FinancialSheet.js
View File

@@ -4,8 +4,6 @@ import classnames from 'classnames';
import { FormattedMessage as T } from 'components';
import intl from 'react-intl-universal';
import 'style/pages/FinancialStatements/FinancialSheet.scss';
import { If, LoadingIndicator, MODIFIER } from 'components';
export default function FinancialSheet({

1
src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js
View File

@@ -1,6 +1,5 @@
import React, { useEffect, useState } from 'react';
import moment from 'moment';
import 'style/pages/FinancialStatements/BalanceSheet.scss';
import { BalanceSheetAlerts, BalanceSheetLoadingBar } from './components';
import { FinancialStatement } from 'components';

97
src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js
View File

@@ -1,14 +1,13 @@
import React, { useMemo, useCallback } from 'react';
import React from 'react';
import styled from 'styled-components';
import intl from 'react-intl-universal';
import classNames from 'classnames';
import FinancialSheet from 'components/FinancialSheet';
import DataTable from 'components/DataTable';
import { CellTextSpan } from 'components/Datatable/Cells';
import { useBalanceSheetContext } from './BalanceSheetProvider';
import { defaultExpanderReducer, getColumnWidth } from 'utils';
import { defaultExpanderReducer, tableRowTypesToClassnames } from 'utils';
import { TableStyle } from 'common';
import { useBalanceSheetColumns } from './components';
/**
@@ -20,54 +19,17 @@ export default function BalanceSheetTable({
}) {
// Balance sheet context.
const {
balanceSheet: { tableRows, columns, query },
isLoading,
balanceSheet: { table, query },
} = useBalanceSheetContext();
// Retrieve the database columns.
const tableColumns = useBalanceSheetColumns();
// const tableColumns = useMemo(
// () => [
// {
// Header: intl.get('account_name'),
// accessor: (row) => (row.code ? `${row.name} - ${row.code}` : row.name),
// className: 'account_name',
// textOverview: true,
// width: 240,
// },
// ...(query.display_columns_type === 'total'
// ? [
// {
// Header: intl.get('total'),
// accessor: 'total.formatted_amount',
// Cell: CellTextSpan,
// className: 'total',
// width: 140,
// },
// ]
// : []),
// ...(query.display_columns_type === 'date_periods'
// ? columns.map((column, index) => ({
// id: `date_period_${index}`,
// Header: column,
// Cell: CellTextSpan,
// accessor: `total_periods[${index}].formatted_amount`,
// className: classNames('total-period', `total-periods-${index}`),
// width: getColumnWidth(
// tableRows,
// `total_periods.${index}.formatted_amount`,
// { minWidth: 100 },
// ),
// }))
// : []),
// ],
// [query, columns, tableRows],
// );
// Calculates the default expanded rows of balance sheet table.
// const expandedRows = useMemo(() => {
// return defaultExpanderReducer(tableRows, 4);
// }, [tableRows]);
// Retrieve default expanded rows of balance sheet.
const expandedRows = React.useMemo(
() => defaultExpanderReducer(table?.rows || [], 3),
[table],
);
return (
<FinancialSheet
@@ -79,17 +41,44 @@ export default function BalanceSheetTable({
// basis={query.basis}
// loading={isLoading}
>
<DataTable
className="bigcapital-datatable--financial-report"
<BalanceSheetDataTable
columns={tableColumns}
data={[]}
// rowClassNames={rowClassNames}
data={table?.rows || []}
rowClassNames={tableRowTypesToClassnames}
noInitialFetch={true}
expandable={true}
// expanded={expandedRows}
expanded={expandedRows}
expandToggleColumn={1}
expandColumnSpace={0.8}
styleName={TableStyle.Constrant}
/>
</FinancialSheet>
);
}
const BalanceSheetDataTable = styled(DataTable)`
.table {
.tbody .tr {
.td {
border-bottom: 0;
padding-top: 0.36rem;
padding-bottom: 0.36rem;
}
&.is-expanded {
.td:not(.name) .cell-inner {
opacity: 0;
}
}
&.row_type--TOTAL {
.td {
font-weight: 500;
border-top: 1px solid #bbb;
}
}
&:last-of-type .td{
border-bottom: 1px solid #bbb;
}
}
}
`;

12
src/containers/FinancialStatements/BalanceSheet/components.js
View File

@@ -18,15 +18,14 @@ export function BalanceSheetAlerts() {
refetchBalanceSheet();
};
// Can't display any error if the report is loading.
if (isLoading) {
return null;
}
if (isLoading) return null;
return (
<If condition={balanceSheet.meta.is_cost_compute_running}>
<div class="alert-compute-running">
<Icon icon="info-block" iconSize={12} />{' '}
<T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
<Button onClick={handleRecalcReport} minimal={true} small={true}>
<T id={'report.compute_running.refresh'} />
</Button>
@@ -52,12 +51,13 @@ export function BalanceSheetLoadingBar() {
* Retrieve balance sheet columns.
*/
export const useBalanceSheetColumns = () => {
// Balance sheet context.
const {
balanceSheet: { columns, tableRows },
balanceSheet: { table },
} = useBalanceSheetContext();
return React.useMemo(
() => dynamicColumns(columns, tableRows),
[columns, tableRows],
() => dynamicColumns(table?.columns || [], table?.rows || []),
[table],
);
};

324
src/containers/FinancialStatements/BalanceSheet/utils.js
View File

@@ -1,10 +1,19 @@
import * as Yup from 'yup';
import * as R from 'ramda';
import { isEmpty } from 'lodash';
import intl from 'react-intl-universal';
import moment from 'moment';
import { CellTextSpan } from 'components/Datatable/Cells';
import { getColumnWidth } from 'utils';
const getTableCellValueAccessor = (index) => `cells[${index}].value`;
const Align = { Left: 'left', Right: 'right', Center: 'center' };
/**
*
* @returns
*/
export const getBalanceSheetHeaderDefaultValues = () => {
return {
basic: 'cash',
@@ -15,6 +24,10 @@ export const getBalanceSheetHeaderDefaultValues = () => {
};
};
/**
*
* @returns
*/
export const getBalanceSheetHeaderValidationSchema = () =>
Yup.object().shape({
dateRange: Yup.string().optional(),
@@ -30,80 +43,303 @@ export const getBalanceSheetHeaderValidationSchema = () =>
/**
* Account name column mapper.
*/
const accountNameMapper = (data, index, column) => {
const accountNameMapper = R.curry((data, column) => {
const accessor = getTableCellValueAccessor(column.cell_index);
return {
id: column.key,
key: column.key,
Header: column.label,
accessor: `cells[${index}].value`,
accessor,
className: column.key,
textOverview: true,
Cell: CellTextSpan,
width: getColumnWidth(data, `cells[${index}].value`, {
magicSpacing: 10,
minWidth: 240,
}),
width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 240 }),
};
});
/**
* Assoc columns to total column.
*/
const assocColumnsToTotalColumn = R.curry((data, column, columnAccessor) => {
const columns = totalColumnsComposer(data, column);
return R.assoc('columns', columns, columnAccessor);
});
/**
* Detarmines whether the given column has children columns.
* @returns {boolean}
*/
const isColumnHasColumns = (column) => !isEmpty(column.children);
/**
*
* @param {*} data
* @param {*} column
* @returns
*/
const dateRangeSoloColumnAttrs = (data, column) => {
const accessor = getTableCellValueAccessor(column.cell_index);
return {
accessor,
width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }),
};
};
/**
* Date range columns mapper.
*/
const dateRangeMapper = (data, index, column) => ({
id: column.key,
Header: column.label,
key: column.key,
accessor: `cells[${index}].value`,
width: getColumnWidth(data, `cells.${index}.value`, {
magicSpacing: 10,
minWidth: 100,
}),
className: `date-period ${column.key}`,
disableSortBy: true,
textOverview: true,
const dateRangeMapper = R.curry((data, column) => {
const isDateColumnHasColumns = isColumnHasColumns(column);
const columnAccessor = {
Header: column.label,
key: column.key,
disableSortBy: true,
textOverview: true,
align: Align.Center,
};
return R.compose(
R.when(
R.always(isDateColumnHasColumns),
assocColumnsToTotalColumn(data, column),
),
R.when(
R.always(!isDateColumnHasColumns),
R.mergeLeft(dateRangeSoloColumnAttrs(data, column)),
),
)(columnAccessor);
});
/**
* Total column mapper.
*/
const totalMapper = (data, index, column) => {
return {
id: column.key,
const totalMapper = R.curry((data, column) => {
const hasChildren = !isEmpty(column.children);
const accessor = getTableCellValueAccessor(column.cell_index);
const columnAccessor = {
key: column.key,
Header: column.label,
accessor: `cells[${index}].value`,
className: 'total',
accessor,
textOverview: true,
Cell: CellTextSpan,
width: getColumnWidth(data, `cells[${index}].value`, {
magicSpacing: 10,
minWidth: 200,
}),
width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 200 }),
disableSortBy: true,
align: hasChildren ? 'center' : 'right',
};
};
return R.compose(
R.when(R.always(hasChildren), assocColumnsToTotalColumn(data, column)),
)(columnAccessor);
});
/**
* `Percentage of column` column accessor.
*/
const percentageOfColumnAccessor = R.curry((data, column) => {
const accessor = getTableCellValueAccessor(column.cell_index);
return {
Header: column.label,
key: column.key,
accessor,
width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }),
align: Align.Right,
disableSortBy: true,
textOverview: true,
};
});
/**
* `Percentage of row` column accessor.
*/
const percentageOfRowAccessor = R.curry((data, column) => {
const accessor = getTableCellValueAccessor(column.cell_index);
return {
Header: column.label,
key: column.key,
accessor,
width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }),
align: Align.Right,
disableSortBy: true,
textOverview: true,
};
});
/**
* Previous year column accessor.
*/
const previousYearAccessor = R.curry((data, column) => {
const accessor = getTableCellValueAccessor(column.cell_index);
return {
Header: column.label,
key: column.key,
accessor,
width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }),
align: Align.Right,
disableSortBy: true,
textOverview: true,
};
});
/**
* Pervious year change column accessor.
*/
const previousYearChangeAccessor = R.curry((data, column) => {
const accessor = getTableCellValueAccessor(column.cell_index);
return {
Header: column.label,
key: column.key,
accessor,
width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }),
align: Align.Right,
disableSortBy: true,
textOverview: true,
};
});
/**
* Previous year percentage column accessor.
*/
const previousYearPercentageAccessor = R.curry((data, column) => {
const accessor = getTableCellValueAccessor(column.cell_index);
return {
Header: column.label,
key: column.key,
accessor,
width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }),
align: Align.Right,
disableSortBy: true,
textOverview: true,
};
});
/**
* Previous period column accessor.
*/
const previousPeriodAccessor = R.curry((data, column) => {
const accessor = getTableCellValueAccessor(column.cell_index);
return {
Header: column.label,
key: column.key,
accessor,
width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }),
align: Align.Right,
disableSortBy: true,
textOverview: true,
};
});
/**
* Previous period change column accessor.
*/
const previousPeriodChangeAccessor = R.curry((data, column) => {
const accessor = getTableCellValueAccessor(column.cell_index);
return {
Header: column.label,
key: column.key,
accessor,
width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }),
align: Align.Right,
disableSortBy: true,
textOverview: true,
};
});
/**
* Previous period percentage column accessor.
*/
const previousPeriodPercentageAccessor = R.curry((data, column) => {
const accessor = getTableCellValueAccessor(column.cell_index);
return {
Header: column.label,
key: column.key,
accessor,
width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }),
align: Align.Right,
disableSortBy: true,
textOverview: true,
};
});
/**
*
* @param {*} column
* @param {*} index
* @returns
*/
const totalColumnsMapper = R.curry((data, column) => {
return R.compose(
R.when(R.pathEq(['key'], 'total'), totalMapper(data)),
// Percetage of column/row.
R.when(
R.pathEq(['key'], 'percentage_of_column'),
percentageOfColumnAccessor(data),
),
R.when(
R.pathEq(['key'], 'percentage_of_row'),
percentageOfRowAccessor(data),
),
// Previous year.
R.when(R.pathEq(['key'], 'previous_year'), previousYearAccessor(data)),
R.when(
R.pathEq(['key'], 'previous_year_change'),
previousYearChangeAccessor(data),
),
R.when(
R.pathEq(['key'], 'previous_year_percentage'),
previousYearPercentageAccessor(data),
),
// Pervious period.
R.when(R.pathEq(['key'], 'previous_period'), previousPeriodAccessor(data)),
R.when(
R.pathEq(['key'], 'previous_period_change'),
previousPeriodChangeAccessor(data),
),
R.when(
R.pathEq(['key'], 'previous_period_percentage'),
previousPeriodPercentageAccessor(data),
),
)(column);
});
/**
* Total sub-columns composer.
*/
const totalColumnsComposer = R.curry((data, column) => {
return R.map(totalColumnsMapper(data), column.children);
});
/**
* Detarmines the given string starts with `date-range` string.
*/
const isMatchesDateRange = (r) => R.match(/^date-range/g, r).length > 0;
/**
* Dynamic column mapper.
*/
const dynamicColumnMapper = R.curry((data, column) => {
const indexTotalMapper = totalMapper(data);
const indexAccountNameMapper = accountNameMapper(data);
const indexDatePeriodMapper = dateRangeMapper(data);
return R.compose(
R.when(R.pathSatisfies(isMatchesDateRange, ['key']), indexDatePeriodMapper),
R.when(R.pathEq(['key'], 'name'), indexAccountNameMapper),
R.when(R.pathEq(['key'], 'total'), indexTotalMapper),
)(column);
});
/**
* Cash flow dynamic columns.
*/
export const dynamicColumns = (columns, data) => {
const mapper = (column, index) => {
return R.compose(
R.when(
R.pathSatisfies(isMatchesDateRange, ['key']),
R.curry(dateRangeMapper)(data, index),
),
R.when(
R.pathEq(['key'], 'name'),
R.curry(accountNameMapper)(data, index),
),
R.when(R.pathEq(['key'], 'total'), R.curry(totalMapper)(data, index)),
)(column);
};
return columns.map(mapper);
return R.map(dynamicColumnMapper(data), columns);
};

6
src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js
View File

@@ -51,7 +51,6 @@ function ProfitLossSheet({
numberFormat,
});
};
// Hide the filter drawer once the page unmount.
React.useEffect(
() => () => {
@@ -66,8 +65,8 @@ function ProfitLossSheet({
numberFormat={filter.numberFormat}
onNumberFormatSubmit={handleNumberFormatSubmit}
/>
<ProfitLossSheetLoadingBar />
<ProfitLossSheetAlerts />
{/* <ProfitLossSheetLoadingBar /> */}
{/* <ProfitLossSheetAlerts /> */}
<DashboardPageContent>
<div class="financial-statement">
@@ -75,7 +74,6 @@ function ProfitLossSheet({
pageFilter={filter}
onSubmitFilter={handleSubmitFilter}
/>
<div class="financial-statement__body">
<ProfitLossSheetTable companyName={organizationName} />
</div>

18
src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderComparisonPanel.js
View File

@@ -28,7 +28,7 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
</FastField>
<Row>
<Col xs={3}>
<FastField name={'previous_year'} type={'checkbox'}>
<FastField name={'previous_year_amount_change'} type={'checkbox'}>
{({ field }) => (
<FormGroup labelInfo={<FieldHint />}>
<Checkbox
@@ -42,7 +42,7 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
</FastField>
</Col>
<Col xs={3}>
<FastField name={'previous_year'} type={'checkbox'}>
<FastField name={'previous_year_percentage_change'} type={'checkbox'}>
{({ field }) => (
<FormGroup labelInfo={<FieldHint />}>
<Checkbox
@@ -57,7 +57,7 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
</Col>
</Row>
{/**----------- Previous Period (PP) -----------*/}
<FastField name={'previous_year'} type={'checkbox'}>
<FastField name={'previous_period'} type={'checkbox'}>
{({ field }) => (
<FormGroup labelInfo={<FieldHint />}>
<Checkbox
@@ -71,7 +71,7 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
</FastField>
<Row>
<Col xs={3}>
<FastField name={'previous_year'} type={'checkbox'}>
<FastField name={'previous_period_amount_change'} type={'checkbox'}>
{({ field }) => (
<FormGroup labelInfo={<FieldHint />}>
<Checkbox
@@ -85,7 +85,7 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
</FastField>
</Col>
<Col xs={3}>
<FastField name={'previous_year'} type={'checkbox'}>
<FastField name={'previous_period_percentage_change'} type={'checkbox'}>
{({ field }) => (
<FormGroup labelInfo={<FieldHint />}>
<Checkbox
@@ -100,7 +100,7 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
</Col>
</Row>
{/**----------- % of Column -----------*/}
<FastField name={'previous_period_percentage_change'} type={'checkbox'}>
<FastField name={'percentage_column'} type={'checkbox'}>
{({ field }) => (
<FormGroup labelInfo={<FieldHint />}>
<Checkbox
@@ -113,7 +113,7 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
)}
</FastField>
{/**----------- % of Row -----------*/}
<FastField name={'previous_period_percentage_change'} type={'checkbox'}>
<FastField name={'percentage_row'} type={'checkbox'}>
{({ field }) => (
<FormGroup labelInfo={<FieldHint />}>
<Checkbox
@@ -126,7 +126,7 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
)}
</FastField>
{/**----------- % of Expense -----------*/}
<FastField name={'previous_period_percentage_change'} type={'checkbox'}>
<FastField name={'percentage_expense'} type={'checkbox'}>
{({ field }) => (
<FormGroup labelInfo={<FieldHint />}>
<Checkbox
@@ -139,7 +139,7 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
)}
</FastField>
{/**----------- % of Income -----------*/}
<FastField name={'previous_period_percentage_change'} type={'checkbox'}>
<FastField name={'percentage_income'} type={'checkbox'}>
{({ field }) => (
<FormGroup labelInfo={<FieldHint />}>
<Checkbox

121
src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js
View File

@@ -1,109 +1,82 @@
import React, { useMemo, useCallback } from 'react';
import { FormattedMessage as T } from 'components';
import intl from 'react-intl-universal';
import React from 'react';
import styled from 'styled-components';
import { TableStyle } from 'common';
import { FormattedMessage as T } from 'components';
import { useProfitLossSheetColumns } from './hooks';
import FinancialSheet from 'components/FinancialSheet';
import DataTable from 'components/DataTable';
import { CellTextSpan } from 'components/Datatable/Cells';
import { defaultExpanderReducer, getColumnWidth } from 'utils';
import { tableRowTypesToClassnames, defaultExpanderReducer } from 'utils';
import { useProfitLossSheetContext } from './ProfitLossProvider';
export default function ProfitLossSheetTable({
// #ownProps
companyName,
}) {
// Profit/Loss sheet context.
const {
profitLossSheet: { tableRows, query, columns },
isLoading
profitLossSheet: { table },
isLoading,
} = useProfitLossSheetContext();
const tableColumns = useMemo(
() => [
{
Header: intl.get('account'),
accessor: (row) => (row.code ? `${row.name} - ${row.code}` : row.name),
className: 'name',
textOverview: true,
width: 240,
},
...(query.display_columns_type === 'total'
? [
{
Header: intl.get('total'),
Cell: CellTextSpan,
accessor: 'total.formatted_amount',
className: 'total',
width: 140,
},
]
: []),
...(query.display_columns_type === 'date_periods'
? columns.map((column, index) => ({
id: `date_period_${index}`,
Header: column,
Cell: CellTextSpan,
accessor: `total_periods[${index}].formatted_amount`,
width: getColumnWidth(
tableRows,
`total_periods.${index}.formatted_amount`,
{ minWidth: 100 },
),
className: 'total-period',
}))
: []),
],
[
query.display_columns_type,
tableRows,
columns,
],
);
// Retrieves the profit/loss table columns.
const tableColumns = useProfitLossSheetColumns();
// Retrieve default expanded rows of balance sheet.
const expandedRows = useMemo(
() => defaultExpanderReducer(tableRows, 3),
[tableRows],
const expandedRows = React.useMemo(
() => defaultExpanderReducer(table?.rows || [], 3),
[table],
);
// Retrieve conditional datatable row classnames.
const rowClassNames = useCallback((row) => {
const { original } = row;
const rowTypes = Array.isArray(original.rowTypes) ? original.rowTypes : [];
return {
...rowTypes.reduce((acc, rowType) => {
acc[`row_type--${rowType}`] = rowType;
return acc;
}, {}),
};
}, []);
return (
<FinancialSheet
companyName={companyName}
sheetType={<T id={'profit_loss_sheet'} />}
fromDate={query.from_date}
toDate={query.to_date}
// fromDate={query.from_date}
// toDate={query.to_date}
name="profit-loss-sheet"
loading={isLoading}
basis={query.basis}
// basis={query.basis}
>
<DataTable
className="bigcapital-datatable--financial-report"
<ProfitLossDataTable
columns={tableColumns}
data={tableRows}
data={table.rows}
noInitialFetch={true}
expanded={expandedRows}
rowClassNames={rowClassNames}
rowClassNames={tableRowTypesToClassnames}
expandable={true}
expandToggleColumn={1}
sticky={true}
styleName={TableStyle.Constrant}
/>
</FinancialSheet>
);
}
const ProfitLossDataTable = styled(DataTable)`
.table {
.tbody .tr {
.td {
border-bottom: 0;
padding-top: 0.36rem;
padding-bottom: 0.36rem;
}
&.is-expanded {
.td:not(.name) .cell-inner {
opacity: 0;
}
}
&.row_type--TOTAL {
.td {
font-weight: 500;
border-top: 1px solid #bbb;
}
}
&:last-of-type .td{
border-bottom: 1px solid #bbb;
}
}
}
`;

14
src/containers/FinancialStatements/ProfitLossSheet/hooks.js Normal file
View File

@@ -0,0 +1,14 @@
import React from 'react';
import { dynamicColumns } from './utils';
import { useProfitLossSheetContext } from './ProfitLossProvider';
export const useProfitLossSheetColumns = () => {
const {
profitLossSheet: { table },
} = useProfitLossSheetContext();
return React.useMemo(
() => dynamicColumns(table.columns || [], table.rows || []),
[table],
);
};

365
src/containers/FinancialStatements/ProfitLossSheet/utils.js Normal file
View File

@@ -0,0 +1,365 @@
import * as R from 'ramda';
import { isEmpty } from 'lodash';
import { CellTextSpan } from 'components/Datatable/Cells';
import { getColumnWidth } from 'utils';
const Align = { Left: 'left', Right: 'right', Center: 'center' };
const getTableCellValueAccessor = (index) => `cells[${index}].value`;
const getReportColWidth = (data, accessor) => {
return getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 });
};
const isNodeHasChildren = (node) => !isEmpty(node.children);
/**
* `Percentage of income` column accessor.
*/
const percentageOfIncomeAccessor = R.curry((data, column) => {
const accessor = getTableCellValueAccessor(column.cell_index);
return {
Header: column.label,
key: column.key,
accessor,
width: getReportColWidth(data, accessor),
align: Align.Right,
disableSortBy: true,
textOverview: true,
};
});
/**
* `Percentage of expense` column accessor.
*/
const percentageOfExpenseAccessor = R.curry((data, column) => {
const accessor = getTableCellValueAccessor(column.cell_index);
return {
Header: column.label,
key: column.key,
accessor,
width: getReportColWidth(data, accessor),
align: Align.Right,
disableSortBy: true,
textOverview: true,
};
});
/**
* `Percentage of column` column accessor.
*/
const percentageOfColumnAccessor = R.curry((data, column) => {
const accessor = getTableCellValueAccessor(column.cell_index);
return {
Header: column.label,
key: column.key,
accessor,
width: getReportColWidth(data, accessor),
align: Align.Right,
disableSortBy: true,
textOverview: true,
};
});
/**
* `Percentage of row` column accessor.
*/
const percentageOfRowAccessor = R.curry((data, column) => {
const accessor = getTableCellValueAccessor(column.cell_index);
return {
Header: column.label,
key: column.key,
accessor,
width: getReportColWidth(data, accessor),
align: Align.Right,
disableSortBy: true,
textOverview: true,
};
});
/**
* Previous year column accessor.
*/
const previousYearAccessor = R.curry((data, column) => {
const accessor = getTableCellValueAccessor(column.cell_index);
return {
Header: column.label,
key: column.key,
accessor,
width: getReportColWidth(data, accessor),
align: Align.Right,
disableSortBy: true,
textOverview: true,
};
});
/**
* Pervious year change column accessor.
*/
const previousYearChangeAccessor = R.curry((data, column) => {
const accessor = getTableCellValueAccessor(column.cell_index);
return {
Header: column.label,
key: column.key,
accessor,
width: getReportColWidth(data, accessor),
align: Align.Right,
disableSortBy: true,
textOverview: true,
};
});
/**
* Previous year percentage column accessor.
*/
const previousYearPercentageAccessor = R.curry((data, column) => {
const accessor = getTableCellValueAccessor(column.cell_index);
return {
Header: column.label,
key: column.key,
accessor,
width: getReportColWidth(data, accessor),
align: Align.Right,
disableSortBy: true,
textOverview: true,
};
});
/**
* Previous period column accessor.
*/
const previousPeriodAccessor = R.curry((data, column) => {
const accessor = getTableCellValueAccessor(column.cell_index);
return {
Header: column.label,
key: column.key,
accessor,
width: getReportColWidth(data, accessor),
align: Align.Right,
disableSortBy: true,
textOverview: true,
};
});
/**
* Previous period change column accessor.
*/
const previousPeriodChangeAccessor = R.curry((data, column) => {
const accessor = getTableCellValueAccessor(column.cell_index);
return {
Header: column.label,
key: column.key,
accessor,
width: getReportColWidth(data, accessor),
align: Align.Right,
disableSortBy: true,
textOverview: true,
};
});
/**
* Previous period percentage column accessor.
*/
const previousPeriodPercentageAccessor = R.curry((data, column) => {
const accessor = getTableCellValueAccessor(column.cell_index);
return {
Header: column.label,
key: column.key,
accessor,
width: getReportColWidth(data, accessor),
align: Align.Right,
disableSortBy: true,
textOverview: true,
};
});
/**
*
* @param {*} column
* @param {*} index
* @returns
*/
const totalColumnsMapper = R.curry((data, column) => {
return R.compose(
R.when(R.pathEq(['key'], 'total'), totalColumn(data)),
// Percetage of column/row.
R.when(
R.pathEq(['key'], 'percentage_column'),
percentageOfColumnAccessor(data),
),
R.when(
R.pathEq(['key'], 'percentage_row'),
percentageOfRowAccessor(data),
),
R.when(
R.pathEq(['key'], 'percentage_income'),
percentageOfIncomeAccessor(data),
),
R.when(
R.pathEq(['key'], 'percentage_expenses'),
percentageOfExpenseAccessor(data),
),
// Previous year.
R.when(R.pathEq(['key'], 'previous_year'), previousYearAccessor(data)),
R.when(
R.pathEq(['key'], 'previous_year_change'),
previousYearChangeAccessor(data),
),
R.when(
R.pathEq(['key'], 'previous_year_percentage'),
previousYearPercentageAccessor(data),
),
// Pervious period.
R.when(R.pathEq(['key'], 'previous_period'), previousPeriodAccessor(data)),
R.when(
R.pathEq(['key'], 'previous_period_change'),
previousPeriodChangeAccessor(data),
),
R.when(
R.pathEq(['key'], 'previous_period_percentage'),
previousPeriodPercentageAccessor(data),
),
)(column);
});
/**
* Total sub-columns composer.
*/
const totalColumnsComposer = R.curry((data, column) => {
return R.map(totalColumnsMapper(data), column.children);
});
/**
* Assoc columns to total column.
*/
const assocColumnsToTotalColumn = R.curry((data, column, columnAccessor) => {
const columns = totalColumnsComposer(data, column);
return R.assoc('columns', columns, columnAccessor);
});
/**
*
*/
const totalColumn = R.curry((data, column) => {
const hasChildren = isNodeHasChildren(column);
const accessor = getTableCellValueAccessor(column.cell_index);
return {
key: column.key,
Header: column.label,
accessor,
textOverview: true,
Cell: CellTextSpan,
width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 200 }),
disableSortBy: true,
align: hasChildren ? 'center' : 'right',
};
});
/**
*
*/
const totalColumnCompose = R.curry((data, column) => {
const hasChildren = isNodeHasChildren(column);
return R.compose(
R.when(R.always(hasChildren), assocColumnsToTotalColumn(data, column)),
totalColumn(data),
)(column);
});
/**
* Account name column mapper.
*/
const accountNameColumn = R.curry((data, column) => {
const accessor = getTableCellValueAccessor(column.cell_index);
return {
key: column.key,
Header: column.label,
accessor,
className: column.key,
textOverview: true,
width: getReportColWidth(data, accessor),
};
});
/**
*
* @param {*} data
* @param {*} column
* @returns
*/
const dateRangeSoloColumnAttrs = (data, column) => {
const accessor = getTableCellValueAccessor(column.cell_index);
return {
accessor,
width: getReportColWidth(data, accessor),
};
};
const dateRangeColumn = R.curry((data, column) => {
const isDateColumnHasColumns = isNodeHasChildren(column);
const columnAccessor = {
Header: column.label,
key: column.key,
disableSortBy: true,
textOverview: true,
align: Align.Center,
};
return R.compose(
R.when(
R.always(isDateColumnHasColumns),
assocColumnsToTotalColumn(data, column),
),
R.when(
R.always(!isDateColumnHasColumns),
R.mergeLeft(dateRangeSoloColumnAttrs(data, column)),
),
)(columnAccessor);
})
/**
* Detarmines the given string starts with `date-range` string.
*/
const isMatchesDateRange = (r) => R.match(/^date-range/g, r).length > 0;
/**
*
* @param {} data
* @param {} column
*/
const dynamicColumnMapper = R.curry((data, column) => {
const indexTotalColumn = totalColumnCompose(data);
const indexAccountNameColumn = accountNameColumn(data);
const indexDatePeriodMapper = dateRangeColumn(data);
return R.compose(
R.when(R.pathSatisfies(isMatchesDateRange, ['key']), indexDatePeriodMapper),
R.when(R.pathEq(['key'], 'name'), indexAccountNameColumn),
R.when(R.pathEq(['key'], 'total'), indexTotalColumn),
)(column);
});
/**
*
* @param {*} columns
* @param {*} data
* @returns
*/
export const dynamicColumns = (columns, data) => {
return R.map(dynamicColumnMapper(data), columns);
};

22
src/hooks/query/financialReports.js
View File

@@ -29,16 +29,10 @@ export function useBalanceSheet(query, props) {
},
{
select: (res) => ({
columns: res.data.table.columns,
tableRows: res.data.table.rows,
// query: res.data.query,
// meta: res.data.meta,
table: res.data.table
}),
defaultData: {
tableRows: [],
columns: [],
// query: {},
// meta: {},
table: {},
},
...props,
},
@@ -68,6 +62,7 @@ export function useTrialBalanceSheet(query, props) {
method: 'get',
url: '/financial_statements/trial_balance_sheet',
params: query,
},
{
select: (res) => ({
@@ -94,17 +89,16 @@ export function useProfitLossSheet(query, props) {
method: 'get',
url: '/financial_statements/profit_loss_sheet',
params: query,
headers: {
Accept: 'application/json+table',
},
},
{
select: (res) => ({
tableRows: profitLossSheetReducer(res.data.data),
...res.data,
table: res.data.table
}),
defaultData: {
data: {},
tableRows: [],
columns: [],
query: {},
table: {},
},
...props,
},

3
src/style/App.scss
View File

@@ -285,6 +285,9 @@ html[lang^="ar"] {
.align-right {
text-align: right;
}
.align-center{
text-align: center;
}
.font-bold {
font-weight: 600;

6
src/style/components/DataTable/DataTable.scss
View File

@@ -363,11 +363,15 @@
.table-constrant,
.table--constrant {
.table {
.thead{
.tr:first-of-type{
border-top: 1px solid #000000;
}
}
.thead .th {
background: transparent;
color: #222222;
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
padding: 0.5rem;
}

47
src/style/pages/FinancialStatements/BalanceSheet.scss
View File

@@ -1,47 +0,0 @@
.financial-sheet{
&--balance-sheet{
.financial-sheet__table{
.thead,
.tbody{
.tr .td.name ~ .td,
.tr .th.name ~ .th{
text-align: right;
}
}
.tbody{
.tr .td{
border-bottom: 0;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
.tr.row_type--total-row .td{
border-top: 1px solid #BBB;
}
.tr.row_type--total-row.row_type--assets .td,
.tr.row_type--total-row.row_type--liabilities_equity .td{
border-bottom: 3px double #333;
}
.tr.row_type--total-row{
.total.td,
.account_name.td,
.total-period.td{
font-weight: 600;
color: #333;
}
}
.tr.is-expanded{
.td.total,
.td.total-period{
.cell-text{
display: none;
}
}
}
}
}
}
}

26
src/style/pages/FinancialStatements/FinancialSheet.scss
View File

@@ -1,26 +0,0 @@
.bigcapital-datatable{
&--financial-report{
.table {
.tbody{
.tr.no-results {
.td{
border-bottom: 1px solid #DDD;
}
}
}
.thead{
.tr .th{
background-color: #fff;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
padding: 8px 0.4rem;
color: #222;
}
}
}
}
}

12
src/utils/index.js
View File

@@ -900,3 +900,15 @@ export function ignoreEventFromSelectors(event, selectors) {
.map((selector) => event.target.closest(selector))
.some((element) => !!element);
}
export const tableRowTypesToClassnames = ({ original }) => {
const rowTypes = _.castArray(original.row_types);
return rowTypes.reduce((acc, rowType) => {
acc[`row_type--${rowType}`] = rowType;
return acc;
}, {});
};