feat(BalanceSheet|ProfitLoss): comparions feature.

src/components/Datatable/TableHeader.js

@@ -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,
         }),
       })}
     >

src/components/FinancialSheet.js

@@ -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({

src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js

@@ -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';

src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js

@@ -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 },
+    balanceSheet: { table, query },
-    isLoading,
   } = useBalanceSheetContext();
 
+  // Retrieve the database columns.
   const tableColumns = useBalanceSheetColumns();
 
-  // const tableColumns = useMemo(
+  // Retrieve default expanded rows of balance sheet.
-  //   () => [
+  const expandedRows = React.useMemo(
-  //     {
+    () => defaultExpanderReducer(table?.rows || [], 3),
-  //       Header: intl.get('account_name'),
+    [table],
-  //       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]);
 
   return (
     <FinancialSheet
@@ -79,17 +41,44 @@ export default function BalanceSheetTable({
       // basis={query.basis}
       // loading={isLoading}
     >
-      <DataTable
+      <BalanceSheetDataTable
-        className="bigcapital-datatable--financial-report"
         columns={tableColumns}
-        data={[]}
+        data={table?.rows || []}
-        // rowClassNames={rowClassNames}
+        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;
+      }
+    }
+  }
+`;

src/containers/FinancialStatements/BalanceSheet/components.js

@@ -18,15 +18,14 @@ export function BalanceSheetAlerts() {
     refetchBalanceSheet();
   };
   // Can't display any error if the report is loading.
-  if (isLoading) {
+  if (isLoading) return null;
-    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),
+    () => dynamicColumns(table?.columns || [], table?.rows || []),
-    [columns, tableRows],
+    [table],
   );
 };

src/containers/FinancialStatements/BalanceSheet/utils.js

@@ -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, accessor, { magicSpacing: 10, minWidth: 240 }),
-    width: getColumnWidth(data, `cells[${index}].value`, {
+  };
-      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) => ({
+const dateRangeMapper = R.curry((data, column) => {
-  id: column.key,
+  const isDateColumnHasColumns = isColumnHasColumns(column);
-  Header: column.label,
+
-  key: column.key,
+  const columnAccessor = {
-  accessor: `cells[${index}].value`,
+    Header: column.label,
-  width: getColumnWidth(data, `cells.${index}.value`, {
+    key: column.key,
-    magicSpacing: 10,
+    disableSortBy: true,
-    minWidth: 100,
+    textOverview: true,
-  }),
+    align: Align.Center,
-  className: `date-period ${column.key}`,
+  };
-  disableSortBy: true,
+  return R.compose(
-  textOverview: true,
+    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) => {
+const totalMapper = R.curry((data, column) => {
-  return {
+  const hasChildren = !isEmpty(column.children);
-    id: column.key,
+  const accessor = getTableCellValueAccessor(column.cell_index);
+
+  const columnAccessor = {
     key: column.key,
     Header: column.label,
-    accessor: `cells[${index}].value`,
+    accessor,
-    className: 'total',
     textOverview: true,
     Cell: CellTextSpan,
-    width: getColumnWidth(data, `cells[${index}].value`, {
+    width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 200 }),
-      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.map(dynamicColumnMapper(data), columns);
-    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/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js

@@ -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 />
+      {/* <ProfitLossSheetLoadingBar /> */}
-      <ProfitLossSheetAlerts />
+      {/* <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>

src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderComparisonPanel.js

@@ -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

src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js

@@ -1,109 +1,82 @@
-import React, { useMemo, useCallback } from 'react';
+import React from 'react';
-import { FormattedMessage as T } from 'components';
+import styled from 'styled-components';
-import intl from 'react-intl-universal';
 
+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 },
+    profitLossSheet: { table },
-    isLoading
+    isLoading,
   } = useProfitLossSheetContext();
 
-  const tableColumns = useMemo(
+  // Retrieves the profit/loss table columns.
-    () => [
+  const tableColumns = useProfitLossSheetColumns();
-      {
-        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,
-    ],
-  );
 
   // Retrieve default expanded rows of balance sheet.
-  const expandedRows = useMemo(
+  const expandedRows = React.useMemo(
-    () => defaultExpanderReducer(tableRows, 3),
+    () => defaultExpanderReducer(table?.rows || [], 3),
-    [tableRows],
+    [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}
+      // fromDate={query.from_date}
-      toDate={query.to_date}
+      // toDate={query.to_date}
       name="profit-loss-sheet"
       loading={isLoading}
-      basis={query.basis}
+      // basis={query.basis}
     >
-      <DataTable
+      <ProfitLossDataTable
-        className="bigcapital-datatable--financial-report"
         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;
+      }
+    }
+  }
+`;

src/containers/FinancialStatements/ProfitLossSheet/hooks.js

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

src/containers/FinancialStatements/ProfitLossSheet/utils.js

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

src/hooks/query/financialReports.js

@@ -29,16 +29,10 @@ export function useBalanceSheet(query, props) {
     },
     {
       select: (res) => ({
-        columns: res.data.table.columns,
+        table: res.data.table
-        tableRows: res.data.table.rows,
-        // query: res.data.query,
-        // meta: res.data.meta,
       }),
       defaultData: {
-        tableRows: [],
+        table: {},
-        columns: [],
-        // query: {},
-        // meta: {},
       },
       ...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),
+        table: res.data.table
-        ...res.data,
       }),
       defaultData: {
-        data: {},
+        table: {},
-        tableRows: [],
-        columns: [],
-        query: {},
       },
       ...props,
     },

src/style/App.scss

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

src/style/components/DataTable/DataTable.scss

@@ -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;
     }
 

src/style/pages/FinancialStatements/BalanceSheet.scss

@@ -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;
-            }
-          }
-        }
-      }
-    }
-  }
-}

src/style/pages/FinancialStatements/FinancialSheet.scss

@@ -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;
-        }
-      }
-    }  
-  }
-}

src/utils/index.js

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