feat: balance sheet comparison

src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js

@@ -80,7 +80,7 @@ function BalanceSheet({
         </FinancialStatement>
       </DashboardPageContent>
 
-      <BalanceSheetAlerts />
+      {/* <BalanceSheetAlerts /> */}
     </BalanceSheetProvider>
   );
 }

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({
       >
         <Form>
           <Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
-            <Tab
+            {/* <Tab
               id="general"
               title={<T id={'general'} />}
               panel={<BalanceSheetHeaderGeneralPanal />}
+            /> */}
+            <Tab
+              id="comparison"
+              title={<T id={'balance_sheet.comparisons'} />}
+              panel={<BalanceSheetHeaderComparisonPanal />}
             />
           </Tabs>
 

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 (
+    <div>
+      {/*------------ Percentage -----------*/}
+      <Row>
+        <Col xs={3}>
+          <FastField name={'percentage_of_column'} type={'checkbox'}>
+            {({ field }) => (
+              <FormGroup labelInfo={<FieldHint />}>
+                <Checkbox
+                  inline={true}
+                  small={true}
+                  label={<T id={'balance_sheet.percentage_of_column'} />}
+                  {...field}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+        <Col xs={3}>
+          <FastField name={'percentage_of_row'} type={'checkbox'}>
+            {({ field }) => (
+              <FormGroup labelInfo={<FieldHint />}>
+                <Checkbox
+                  inline={true}
+                  small={true}
+                  label={<T id={'balance_sheet.percentage_of_row'} />}
+                  {...field}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+      {/*------------ Previous Year -----------*/}
+      <Row>
+        <Col xs={3}>
+          <FastField name={'previous_year'} type={'checkbox'}>
+            {({ field }) => (
+              <FormGroup labelInfo={<FieldHint />}>
+                <Checkbox
+                  inline={true}
+                  small={true}
+                  label={<T id={'balance_sheet.previous_year'} />}
+                  {...field}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+        <Col xs={3}>
+          <FastField name={'previous_year_amount_change'} type={'checkbox'}>
+            {({ field }) => (
+              <FormGroup labelInfo={<FieldHint />}>
+                <Checkbox
+                  inline={true}
+                  small={true}
+                  label={<T id={'balance_sheet.total_change'} />}
+                  {...field}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+        <Col xs={3}>
+          <FastField name={'previous_year_percentage_change'} type={'checkbox'}>
+            {({ field }) => (
+              <FormGroup labelInfo={<FieldHint />}>
+                <Checkbox
+                  inline={true}
+                  small={true}
+                  label={<T id={'balance_sheet.change'} />}
+                  {...field}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+      {/*------------ Previous Period -----------*/}
+      <Row>
+        <Col xs={3}>
+          <FastField name={'previous_period'} type={'checkbox'}>
+            {({ field }) => (
+              <FormGroup labelInfo={<FieldHint />}>
+                <Checkbox
+                  inline={true}
+                  small={true}
+                  label={<T id={'balance_sheet.previous_period'} />}
+                  {...field}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+        <Col xs={3}>
+          <FastField name={'previous_period_amount_change'} type={'checkbox'}>
+            {({ field }) => (
+              <FormGroup labelInfo={<FieldHint />}>
+                <Checkbox
+                  inline={true}
+                  small={true}
+                  label={<T id={'balance_sheet.total_change'} />}
+                  {...field}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+        <Col xs={3}>
+          <FastField
+            name={'previous_period_percentage_change'}
+            type={'checkbox'}
+          >
+            {({ field }) => (
+              <FormGroup labelInfo={<FieldHint />}>
+                <Checkbox
+                  inline={true}
+                  small={true}
+                  label={<T id={'balance_sheet.change'} />}
+                  {...field}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+    </div>
+  );
+}

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 (
     <FinancialSheet
       name="balance-sheet"
       companyName={companyName}
       sheetType={intl.get('balance_sheet')}
-      fromDate={query.from_date}
-      toDate={query.to_date}
-      basis={query.basis}
-      loading={isLoading}
+      // fromDate={query.from_date}
+      // toDate={query.to_date}
+      // basis={query.basis}
+      // loading={isLoading}
     >
       <DataTable
         className="bigcapital-datatable--financial-report"
         columns={tableColumns}
-        data={tableRows}
-        rowClassNames={rowClassNames}
+        data={[]}
+        // rowClassNames={rowClassNames}
         noInitialFetch={true}
         expandable={true}
-        expanded={expandedRows}
+        // expanded={expandedRows}
         expandToggleColumn={1}
         expandColumnSpace={0.8}
-        // sticky={true}
       />
     </FinancialSheet>
   );

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() {
     </If>
   );
 }
+
+/**
+ * Retrieve balance sheet columns.
+ */
+export const useBalanceSheetColumns = () => {
+  const {
+    balanceSheet: { columns, tableRows },
+  } = useBalanceSheetContext();
+
+  return React.useMemo(
+    () => dynamicColumns(columns, tableRows),
+    [columns, tableRows],
+  );
+};

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

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

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)"
 }