refactor(CashflowSheet): refactor the body sheet.

src/containers/FinancialStatements/CashFlowStatement/CashFlowStatement.js

@@ -6,10 +6,9 @@ import { FinancialStatement } from 'components';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 
 import CashFlowStatementHeader from './CashFlowStatementHeader';
-import CashFlowStatementTable from './CashFlowStatementTable';
 import CashFlowStatementActionsBar from './CashFlowStatementActionsBar';
+import { CashFlowStatementBody } from './CashFlowStatementBody';
 
-import withCurrentOrganization from '../../Organization/withCurrentOrganization';
 import withCashFlowStatementActions from './withCashFlowStatementActions';
 import { CashFlowStatementProvider } from './CashFlowStatementProvider';
 import {
@@ -23,8 +22,6 @@ import { compose } from 'utils';
  * Cash flow statement.
  */
 function CashFlowStatement({
-  // #withPreferences
-  organizationName,
   //#withCashStatementActions
   toggleCashFlowStatementFilterDrawer,
 }) {
@@ -77,18 +74,11 @@ function CashFlowStatement({
             pageFilter={filter}
             onSubmitFilter={handleFilterSubmit}
           />
-          <div class="financial-statement__body">
-            <CashFlowStatementTable companyName={organizationName} />
-          </div>
+          <CashFlowStatementBody />
         </FinancialStatement>
       </DashboardPageContent>
     </CashFlowStatementProvider>
   );
 }
 
-export default compose(
-  withCurrentOrganization(({ organization }) => ({
-    organizationName: organization.name,
-  })),
-  withCashFlowStatementActions,
-)(CashFlowStatement);
+export default compose(withCashFlowStatementActions)(CashFlowStatement);

src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementBody.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import * as R from 'ramda';
+
+import CashFlowStatementTable from './CashFlowStatementTable';
+import { FinancialReportBody } from '../FinancialReportPage';
+import { FinancialSheetSkeleton } from 'components/FinancialSheet';
+
+import { useCashFlowStatementContext } from './CashFlowStatementProvider';
+import withCurrentOrganization from '../../Organization/withCurrentOrganization';
+
+/**
+ * Cashflow stement body.
+ * @returns {React.JSX}
+ */
+function CashFlowStatementBodyJSX({
+  // #withPreferences
+  organizationName,
+}) {
+  const { isCashFlowLoading } = useCashFlowStatementContext();
+
+  return (
+    <FinancialReportBody>
+      {isCashFlowLoading ? (
+        <FinancialSheetSkeleton />
+      ) : (
+        <CashFlowStatementTable companyName={organizationName} />
+      )}
+    </FinancialReportBody>
+  );
+}
+
+export const CashFlowStatementBody = R.compose(
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
+  })),
+)(CashFlowStatementBodyJSX);

src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementTable.js

@@ -1,12 +1,14 @@
 import React, { useMemo } from 'react';
 import intl from 'react-intl-universal';
+import styled from 'styled-components';
 
 import { DataTable, FinancialSheet } from 'components';
 
 import { useCashFlowStatementColumns } from './components';
 import { useCashFlowStatementContext } from './CashFlowStatementProvider';
 
-import { defaultExpanderReducer } from 'utils';
+import { TableStyle } from 'common';
+import { defaultExpanderReducer, tableRowTypesToClassnames } from 'utils';
 
 /**
  * Cash flow statement table.
@@ -27,14 +29,6 @@ export default function CashFlowStatementTable({
     () => defaultExpanderReducer(tableRows, 4),
     [tableRows],
   );
-
-  const rowClassNames = (row) => {
-    return [
-      `row-type--${row.original.row_types}`,
-      `row-type--${row.original.id}`,
-    ];
-  };
-
   return (
     <FinancialSheet
       name="cash-flow-statement"
@@ -45,17 +39,55 @@ export default function CashFlowStatementTable({
       toDate={query.to_date}
       basis={query.basis}
     >
-      <DataTable
-        className="bigcapital-datatable--financial-report"
+      <CashflowStatementDataTable
         columns={columns}
         data={tableRows}
-        rowClassNames={rowClassNames}
+        rowClassNames={tableRowTypesToClassnames}
         noInitialFetch={true}
         expandable={true}
         expanded={expandedRows}
         expandToggleColumn={1}
         expandColumnSpace={0.8}
+        styleName={TableStyle.Constrant}
       />
     </FinancialSheet>
   );
 }
+
+const CashflowStatementDataTable = styled(DataTable)`
+  .table {
+    .tbody {
+      .tr:not(.no-results) {
+        .td {
+          border-bottom: 0;
+          padding-top: 0.32rem;
+          padding-bottom: 0.32rem;
+        }
+
+        // &.row-type--AGGREGATE,
+        &.row_type--ACCOUNTS {
+          border-top: 1px solid #bbb;
+        }
+        &.row-id--CASH_END_PERIOD {
+          border-bottom: 3px double #333;
+        }
+        &.row_type--TOTAL {
+          font-weight: 500;
+
+          &:not(:first-child) .td {
+            border-top: 1px solid #bbb;
+          }
+        }
+      }
+
+      .tr.is-expanded {
+        .td.total,
+        .td.date-period {
+          .cell-inner {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+`;

src/containers/FinancialStatements/CashFlowStatement/components.js

@@ -1,12 +1,13 @@
 import React from 'react';
 import { Button } from '@blueprintjs/core';
+
 import { Icon, If } from 'components';
 import { FormattedMessage as T } from 'components';
-
-import { dynamicColumns } from './utils';
-import { useCashFlowStatementContext } from './CashFlowStatementProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 
+import { dynamicColumns } from './dynamicColumns';
+import { useCashFlowStatementContext } from './CashFlowStatementProvider';
+
 /**
  * Retrieve cash flow statement columns.
  */
@@ -49,7 +50,6 @@ export function CashFlowStatementAlerts() {
   if (isCashFlowLoading) {
     return null;
   }
-
   return (
     <If condition={cashFlowStatement.meta.is_cost_compute_running}>
       <div className="alert-compute-running">

src/containers/FinancialStatements/CashFlowStatement/dynamicColumns.js

@@ -0,0 +1,78 @@
+import * as R from 'ramda';
+import intl from 'react-intl-universal';
+
+import { Align } from 'common';
+import { CellTextSpan } from 'components/Datatable/Cells';
+import { getColumnWidth } from 'utils';
+
+/**
+ * Account name column mapper.
+ */
+const accountNameMapper = (column) => ({
+  id: column.key,
+  key: column.key,
+  Header: intl.get('account_name'),
+  accessor: 'cells[0].value',
+  className: 'account_name',
+  textOverview: true,
+  width: 400,
+  disableSortBy: true,
+});
+
+/**
+ * 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,
+  align: Align.Right,
+});
+
+/**
+ * Total column mapper.
+ */
+const totalMapper = (data, index, column) => ({
+  key: 'total',
+  Header: intl.get('total'),
+  accessor: `cells[${index}].value`,
+  className: 'total',
+  textOverview: true,
+  Cell: CellTextSpan,
+  width: getColumnWidth(data, `cells[${index}].value`, {
+    magicSpacing: 10,
+    minWidth: 100,
+  }),
+  disableSortBy: true,
+  align: Align.Right,
+});
+
+/**
+ * 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'), accountNameMapper),
+      R.when(R.pathEq(['key'], 'total'), R.curry(totalMapper)(data, index)),
+    )(column);
+  };
+  return columns.map(mapper);
+};

src/containers/FinancialStatements/CashFlowStatement/utils.js

@@ -1,74 +0,0 @@
-import * as R from 'ramda';
-import { CellTextSpan } from 'components/Datatable/Cells';
-import { getColumnWidth } from 'utils';
-import intl from 'react-intl-universal';
-
-/**
- * Account name column mapper.
- */
-const accountNameMapper = (column) => ({
-  id: column.key,
-  key: column.key,
-  Header: intl.get('account_name'),
-  accessor: 'cells[0].value',
-  className: 'account_name',
-  textOverview: true,
-  width: 400,
-  disableSortBy: true,
-});
-
-/**
- * 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) => ({
-  key: 'total',
-  Header: intl.get('total'),
-  accessor: `cells[${index}].value`,
-  className: 'total',
-  textOverview: true,
-  Cell: CellTextSpan,
-  width: getColumnWidth(data, `cells[${index}].value`, {
-    magicSpacing: 10,
-    minWidth: 100,
-  }),
-  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'), accountNameMapper),
-      R.when(R.pathEq(['key'], 'total'), R.curry(totalMapper)(data, index)),
-    )(column);
-  };
-  return columns.map(mapper);
-};