From 7a0d5063950fafdd9a06c33bfda6ff3bb87f93f0 Mon Sep 17 00:00:00 2001 From: elforjani13 <39470382+elforjani13@users.noreply.github.com> Date: Thu, 13 Jan 2022 15:25:04 +0200 Subject: [PATCH] feat: balance sheet comparison --- .../BalanceSheet/BalanceSheet.js | 2 +- .../BalanceSheet/BalanceSheetHeader.js | 8 +- .../BalanceSheetHeaderComparisonPanal.js | 142 ++++++++++++++++++ .../BalanceSheet/BalanceSheetTable.js | 113 +++++++------- .../BalanceSheet/components.js | 15 ++ .../FinancialStatements/BalanceSheet/utils.js | 84 +++++++++++ src/hooks/query/financialReports.js | 28 +++- src/lang/en/index.json | 10 +- 8 files changed, 331 insertions(+), 71 deletions(-) create mode 100644 src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderComparisonPanal.js diff --git a/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js b/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js index 9d3b47c6f..861a10cb7 100644 --- a/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js +++ b/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js @@ -80,7 +80,7 @@ function BalanceSheet({ - + {/* */} ); } diff --git a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js index 6fefd517b..5c713bff0 100644 --- a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js +++ b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js @@ -8,6 +8,7 @@ import withBalanceSheet from './withBalanceSheet'; import withBalanceSheetActions from './withBalanceSheetActions'; import BalanceSheetHeaderGeneralPanal from './BalanceSheetHeaderGeneralPanal'; +import BalanceSheetHeaderComparisonPanal from './BalanceSheetHeaderComparisonPanal'; import FinancialStatementHeader from '../../FinancialStatements/FinancialStatementHeader'; import { compose, transformToForm } from 'utils'; @@ -75,10 +76,15 @@ function BalanceSheetHeader({ >
- } panel={} + /> */} + } + panel={} /> diff --git a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderComparisonPanal.js b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderComparisonPanal.js new file mode 100644 index 000000000..51e0f563f --- /dev/null +++ b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderComparisonPanal.js @@ -0,0 +1,142 @@ +import React from 'react'; +import { FastField, Field } from 'formik'; +import { FormGroup, Checkbox } from '@blueprintjs/core'; +import styled from 'styled-components'; + +import { FormattedMessage as T } from 'components'; + +import { Row, Col, FieldHint } from '../../../components'; + +/** + * Balance sheet header - Comparison panal. + */ +export default function BalanceSheetHeaderComparisonPanal() { + return ( +
+ {/*------------ Percentage -----------*/} + + + + {({ field }) => ( + }> + } + {...field} + /> + + )} + + + + + {({ field }) => ( + }> + } + {...field} + /> + + )} + + + + {/*------------ Previous Year -----------*/} + + + + {({ field }) => ( + }> + } + {...field} + /> + + )} + + + + + {({ field }) => ( + }> + } + {...field} + /> + + )} + + + + + {({ field }) => ( + }> + } + {...field} + /> + + )} + + + + {/*------------ Previous Period -----------*/} + + + + {({ field }) => ( + }> + } + {...field} + /> + + )} + + + + + {({ field }) => ( + }> + } + {...field} + /> + + )} + + + + + {({ field }) => ( + }> + } + {...field} + /> + + )} + + + +
+ ); +} diff --git a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js index 38aa54e26..69cc36e45 100644 --- a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js +++ b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js @@ -9,6 +9,8 @@ import { useBalanceSheetContext } from './BalanceSheetProvider'; import { defaultExpanderReducer, getColumnWidth } from 'utils'; +import { useBalanceSheetColumns } from './components'; + /** * Balance sheet table. */ @@ -16,90 +18,77 @@ export default function BalanceSheetTable({ // #ownProps companyName, }) { - - // Balance sheet context. const { balanceSheet: { tableRows, columns, query }, isLoading, } = useBalanceSheetContext(); - 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], - ); + 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(() => defaultExpanderReducer(tableRows, 4), [tableRows]); - - const rowClassNames = useCallback((row) => { - const { original } = row; - const rowTypes = Array.isArray(original.row_types) - ? original.row_types - : [original.row_types]; - - return { - ...rowTypes.reduce((acc, rowType) => { - acc[`row_type--${rowType}`] = rowType; - return acc; - }, {}), - }; - }, []); + // const expandedRows = useMemo(() => { + // return defaultExpanderReducer(tableRows, 4); + // }, [tableRows]); return ( ); diff --git a/src/containers/FinancialStatements/BalanceSheet/components.js b/src/containers/FinancialStatements/BalanceSheet/components.js index be3962ed9..fcd22362c 100644 --- a/src/containers/FinancialStatements/BalanceSheet/components.js +++ b/src/containers/FinancialStatements/BalanceSheet/components.js @@ -4,6 +4,7 @@ import { Icon, If } from 'components'; import { useBalanceSheetContext } from './BalanceSheetProvider'; import { FormattedMessage as T } from 'components'; import FinancialLoadingBar from '../FinancialLoadingBar'; +import { dynamicColumns } from './utils'; /** * Balance sheet alerts. @@ -46,3 +47,17 @@ export function BalanceSheetLoadingBar() { ); } + +/** + * Retrieve balance sheet columns. + */ +export const useBalanceSheetColumns = () => { + const { + balanceSheet: { columns, tableRows }, + } = useBalanceSheetContext(); + + return React.useMemo( + () => dynamicColumns(columns, tableRows), + [columns, tableRows], + ); +}; diff --git a/src/containers/FinancialStatements/BalanceSheet/utils.js b/src/containers/FinancialStatements/BalanceSheet/utils.js index 0a5301b23..1a4367589 100644 --- a/src/containers/FinancialStatements/BalanceSheet/utils.js +++ b/src/containers/FinancialStatements/BalanceSheet/utils.js @@ -1,6 +1,9 @@ import * as Yup from 'yup'; +import * as R from 'ramda'; import intl from 'react-intl-universal'; import moment from 'moment'; +import { CellTextSpan } from 'components/Datatable/Cells'; +import { getColumnWidth } from 'utils'; export const getBalanceSheetHeaderDefaultValues = () => { return { @@ -23,3 +26,84 @@ export const getBalanceSheetHeaderValidationSchema = () => filterByOption: Yup.string(), displayColumnsType: Yup.string(), }); + +/** + * Account name column mapper. + */ +const accountNameMapper = (data, index, column) => { + return { + id: column.key, + key: column.key, + Header: column.label, + accessor: `cells[${index}].value`, + className: column.key, + textOverview: true, + Cell: CellTextSpan, + width: getColumnWidth(data, `cells[${index}].value`, { + magicSpacing: 10, + minWidth: 240, + }), + }; +}; + +/** + * 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, +}); + +/** + * Total column mapper. + */ +const totalMapper = (data, index, column) => { + return { + id: column.key, + key: column.key, + Header: column.label, + accessor: `cells[${index}].value`, + className: 'total', + textOverview: true, + Cell: CellTextSpan, + width: getColumnWidth(data, `cells[${index}].value`, { + magicSpacing: 10, + minWidth: 200, + }), + disableSortBy: true, + }; +}; + +/** + * Detarmines the given string starts with `date-range` string. + */ +const isMatchesDateRange = (r) => R.match(/^date-range/g, r).length > 0; + +/** + * 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); +}; diff --git a/src/hooks/query/financialReports.js b/src/hooks/query/financialReports.js index 57023381a..12ac238bd 100644 --- a/src/hooks/query/financialReports.js +++ b/src/hooks/query/financialReports.js @@ -23,20 +23,38 @@ export function useBalanceSheet(query, props) { method: 'get', url: '/financial_statements/balance_sheet', params: query, + headers: { + Accept: 'application/json+table', + }, }, { select: (res) => ({ - tableRows: balanceSheetRowsReducer(res.data.data), - ...res.data, + columns: res.data.table.columns, + tableRows: res.data.table.rows, + // query: res.data.query, + // meta: res.data.meta, }), defaultData: { - data: [], - columns: [], - query: {}, tableRows: [], + columns: [], + // query: {}, + // meta: {}, }, ...props, }, + // { + // select: (res) => ({ + // tableRows: balanceSheetRowsReducer(res.data.data), + // ...res.data, + // }), + // defaultData: { + // data: [], + // columns: [], + // query: {}, + // tableRows: [], + // }, + // ...props, + // }, ); } diff --git a/src/lang/en/index.json b/src/lang/en/index.json index 51cc47d1d..71bc2f1f3 100644 --- a/src/lang/en/index.json +++ b/src/lang/en/index.json @@ -1734,8 +1734,14 @@ "payment_made.drawer.title": "Payment made details {number}", "manual_journal.drawer.title": "Manual journal details ({number})", "expense.drawer.title": "Expense details", - "global_error.you_dont_have_permissions": "You do not have permissions to access this page.", "global_error.transactions_locked": "Transactions before {lockedToDate} has been locked. Hence action cannot be performed.", - "global_error.authorized_user_inactive": "The authorized user is inactive." + "global_error.authorized_user_inactive": "The authorized user is inactive.", + "balance_sheet.comparisons": "Comparisons", + "balance_sheet.percentage_of_column": "% of Columns", + "balance_sheet.percentage_of_row": "% of Rows", + "balance_sheet.previous_year": "Previous Year (PY)", + "balance_sheet.total_change": "Total Change", + "balance_sheet.change": "% Change", + "balance_sheet.previous_period": "Previous Period (PP)" } \ No newline at end of file