WIP Financial statements.

2026-02-17 21:30:31 +00:00 · 2020-04-05 14:27:06 +02:00
parent 4227f2f9a8
commit b09fc58042
33 changed files with 725 additions and 343 deletions
--- a/client/package.json
+++ b/client/package.json
@@ -71,6 +71,7 @@
    "react-sortablejs": "^2.0.11",
    "react-table": "^7.0.0",
    "react-use": "^13.26.1",
+    "react-window": "^1.8.5",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "resolve": "1.15.0",
--- a/client/src/components/DataTable.js
+++ b/client/src/components/DataTable.js
@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useMemo, useCallback} from 'react';
 import {
  useTable,
  useExpanded,
@@ -11,6 +11,7 @@ import {
 } from 'react-table'
 import {Checkbox} from '@blueprintjs/core';
 import classnames from 'classnames';
+import { FixedSizeList } from 'react-window'
 import Icon from 'components/Icon';

 const IndeterminateCheckbox = React.forwardRef(
@@ -34,8 +35,15 @@ export default function DataTable({
  onSelectedRowsChange,
  manualSortBy = 'false',
  selectionColumn = false,
+  expandSubRows = true,
  className,
-  noResults = 'This report does not contain any data.'
+  noResults = 'This report does not contain any data.',
+  expanded = {},
+  rowClassNames,
+  stickyHeader = true,
+  virtualizedRows = false,
+  fixedSizeHeight = 100,
+  fixedItemSize = 30,
 }) {
  const {
    getTableProps,
@@ -43,6 +51,7 @@ export default function DataTable({
    headerGroups,
    prepareRow,
    page,
+    rows,
    canPreviousPage,
    canNextPage,
    pageOptions,
@@ -52,21 +61,23 @@ export default function DataTable({
    previousPage,
    setPageSize,
    selectedFlatRows,
+    totalColumnsWidth,

    // Get the state from the instance
    state: { pageIndex, pageSize, sortBy, selectedRowIds },
  } = useTable(
    {
      columns,
-      data,
-      initialState: { pageIndex: 0 }, // Pass our hoisted table state
+      data: data,
+      initialState: { pageIndex: 0, expanded }, // Pass our hoisted table state
      manualPagination: true, // Tell the usePagination
      // hook that we'll handle our own data fetching
      // This means we'll also have to provide our own
      // pageCount.
      // pageCount: controlledPageCount,
      getSubRows: row => row.children,
-      manualSortBy
+      manualSortBy,
+      expandSubRows,
    },
    useSortBy,
    useExpanded,
@@ -102,14 +113,50 @@ export default function DataTable({
      ])
    }
  );
-
+ 
  // When these table states change, fetch new data!
  useEffect(() => {
    onFetchData && onFetchData({ pageIndex, pageSize, sortBy })
  }, [pageIndex, pageSize, sortBy]);

+  // Renders table row.
+  const RenderRow = useCallback(({ style = {}, row }) => {
+    prepareRow(row);
+    return (
+      <div {...row.getRowProps({ style })} className="tr">
+        {row.cells.map((cell) => {
+          return <div {...cell.getCellProps({
+            className: classnames(cell.column.className || '', 'td'),
+          })}>{ cell.render('Cell') }</div>
+        })}
+      </div>);
+  }, [prepareRow]);
+
+  // Renders virtualize circle table rows.
+  const RenderVirtualizedRows = useCallback(({ index, style }) => {
+    const row = rows[index];
+    return RenderRow({ row, style });
+  }, [RenderRow, rows]);
+
+  const RenderPage = useCallback(({ style, index } = {}) => {
+    return page.map((row, index) => RenderRow({ row }));
+  }, [RenderRow, page]);
+
+  const RenderTBody = useCallback(() => {
+    return (virtualizedRows) ? (
+      <FixedSizeList
+        height={fixedSizeHeight}
+        itemCount={rows.length}
+        itemSize={fixedItemSize}
+      >
+        {RenderVirtualizedRows}
+      </FixedSizeList>
+    ) : RenderPage();
+  }, [fixedSizeHeight, rows, fixedItemSize, virtualizedRows,
+    RenderVirtualizedRows, RenderPage])
+
  return (
-    <div className={classnames('bigcapital-datatable', className)}>
+    <div className={classnames('bigcapital-datatable', className, {'has-sticky-header': stickyHeader})}>
      <div {...getTableProps()} className="table"> 
        <div className="thead">
          {headerGroups.map(headerGroup => (
@@ -144,19 +191,8 @@ export default function DataTable({
          ))}
        </div>
        <div {...getTableBodyProps()} className="tbody">
-          {page.map((row, i) => {
-            prepareRow(row);
-
-            return (
-              <div {...row.getRowProps()} className="tr">
-                {row.cells.map((cell) => {
-                  return <div {...cell.getCellProps({
-                    className: classnames(cell.column.className || '', 'td'),
-                  })}>{ cell.render('Cell') }</div>
-                })}
-              </div>)
-          })}
-
+          { RenderTBody() }
+        
          { (page.length === 0) && (
            <div className={'tr no-results'}>
              <div class="td">{ noResults }</div>
--- a/client/src/components/FinancialSheet.js
+++ b/client/src/components/FinancialSheet.js
@@ -11,12 +11,13 @@ export default function FinancialSheet({
  accountingBasis,
  name,
  loading,
+  className,
 }) {
  const formattedDate = moment(date).format('DD MMMM YYYY')
  const nameModifer = name ? `financial-sheet--${name}` : '';

  return (
-    <div className={classnames('financial-sheet', nameModifer)}>
+    <div className={classnames('financial-sheet', nameModifer, className)}>
      <LoadingIndicator loading={loading}>
        <h1 class="financial-sheet__title">{ companyTitle }</h1>
        <h6 class="financial-sheet__sheet-type">{ sheetType }</h6>
@@ -29,6 +30,10 @@ export default function FinancialSheet({
        <div class="financial-sheet__accounting-basis">
          { accountingBasis }
        </div>
+
+        <div class="financial-sheet__basis">
+          Accounting Basis: Accural
+        </div>
      </LoadingIndicator>
    </div>
  );
--- a/client/src/connectors/BalanceSheet.connect.js
+++ b/client/src/connectors/BalanceSheet.connect.js
@@ -0,0 +1,27 @@
+import {connect} from 'react-redux';
+import {
+  fetchBalanceSheet,
+} from 'store/financialStatement/financialStatements.actions';
+import {
+  getFinancialSheetIndexByQuery,
+  getFinancialSheet,
+  getFinancialSheetAccounts,
+  getFinancialSheetColumns,
+  getFinancialSheetQuery,
+} from 'store/financialStatement/financialStatements.selectors';
+
+
+export const mapStateToProps = (state, props) => ({
+  getBalanceSheetIndex: (query) => getFinancialSheetIndexByQuery(state.financialStatements.balanceSheet.sheets, query),
+  getBalanceSheet: (index) => getFinancialSheet(state.financialStatements.balanceSheet.sheets, index),
+  getBalanceSheetAccounts: (index) => getFinancialSheetAccounts(state.financialStatements.balanceSheet.sheets, index),
+  getBalanceSheetColumns:(index) => getFinancialSheetColumns(state.financialStatements.balanceSheet.sheets, index),
+  getBalanceSheetQuery: (index) => getFinancialSheetQuery(state.financialStatements.balanceSheet.sheets, index),
+  balanceSheetLoading: state.financialStatements.balanceSheet.loading,
+});
+
+export const mapDispatchToProps = (dispatch) => ({
+  fetchBalanceSheet: (query = {}) => dispatch(fetchBalanceSheet({ query })),  
+});
+
+export default connect(mapStateToProps, mapDispatchToProps);
--- a/client/src/connectors/BalanceSheetTable.connect.js
+++ b/client/src/connectors/BalanceSheetTable.connect.js
@@ -0,0 +1,27 @@
+import {connect} from 'react-redux';
+import {
+  fetchBalanceSheet,
+} from 'store/financialStatement/financialStatements.actions';
+import {
+  getFinancialSheetIndexByQuery,
+  getFinancialSheet,
+  getFinancialSheetsAccounts,
+  getFinancialSheetsColumns,
+} from 'store/financialStatement/financialStatements.selectors';
+
+
+export const mapStateToProps = (state, props) => {
+  const sheetIndex = props.balanceSheetIndex;
+
+  return {
+    balanceSheetAccounts: props.getBalanceSheetAccounts(sheetIndex),
+    balanceSheetQuery: props.getBalanceSheetQuery(sheetIndex),
+    balanceSheetColumns: props.getBalanceSheetColumns(sheetIndex),
+  };
+};
+
+export const mapDispatchToProps = (dispatch) => ({
+  
+});
+
+export default connect(mapStateToProps, mapDispatchToProps);
--- a/client/src/connectors/ProfitLossSheet.connect.js
+++ b/client/src/connectors/ProfitLossSheet.connect.js
@@ -5,11 +5,19 @@ import {
 import {
  getFinancialSheetIndexByQuery,
  getFinancialSheet,
+  getFinancialSheetColumns,
+  getFinancialSheetQuery,
+  getFinancialSheetTableRows,
 } from 'store/financialStatement/financialStatements.selectors';

 export const mapStateToProps = (state, props) => ({
  getProfitLossSheetIndex: (query) => getFinancialSheetIndexByQuery(state.financialStatements.profitLoss.sheets, query),
  getProfitLossSheet: (index) => getFinancialSheet(state.financialStatements.profitLoss.sheets, index),
+  getProfitLossColumns: (index) => getFinancialSheetColumns(state.financialStatements.profitLoss.sheets, index),
+  getProfitLossQuery: (index) => getFinancialSheetQuery(state.financialStatements.profitLoss.sheets, index),
+  getProfitLossTableRows: (index) => getFinancialSheetTableRows(state.financialStatements.profitLoss.sheets, index),
+
+  profitLossSheetLoading: state.financialStatements.profitLoss.loading,
 });

 export const mapDispatchToProps = (dispatch) => ({
--- a/client/src/connectors/ProfitLossTable.connect.js
+++ b/client/src/connectors/ProfitLossTable.connect.js
@@ -0,0 +1,17 @@
+import {connect} from 'react-redux';
+
+export const mapStateToProps = (state, props) => {
+  const sheetIndex = props.profitLossSheetIndex;
+  
+  return {
+    profitLossTableRows: props.getProfitLossTableRows(sheetIndex),
+    profitLossColumns: props.getProfitLossColumns(sheetIndex),
+    profitLossQuery: props.getProfitLossQuery(sheetIndex),
+  };
+};
+
+export const mapDispatchToProps = (dispatch) => ({
+  
+});
+
+export default connect(mapStateToProps, mapDispatchToProps);
--- a/client/src/connectors/TrialBalanceSheet.connect.js
+++ b/client/src/connectors/TrialBalanceSheet.connect.js
@@ -3,16 +3,15 @@ import {
  fetchTrialBalanceSheet
 } from 'store/financialStatement/financialStatements.actions';
 import {
-  getTrialBalanceSheetIndex,
-  getTrialBalanceAccounts,
-  getTrialBalanceQuery,
  getFinancialSheetIndexByQuery,
+  getFinancialSheetAccounts,
+  getFinancialSheetQuery,
 } from 'store/financialStatement/financialStatements.selectors';

 export const mapStateToProps = (state, props) => ({
  getTrialBalanceSheetIndex: (query) => getFinancialSheetIndexByQuery(state.financialStatements.trialBalance.sheets, query),
-  getTrialBalanceAccounts: (sheetIndex) => getTrialBalanceAccounts(state.financialStatements.trialBalance.sheets, sheetIndex),
-  getTrialBalanceQuery: (sheetIndex) => getTrialBalanceQuery(state.financialStatements.trialBalance.sheets, sheetIndex),
+  getTrialBalanceAccounts: (sheetIndex) => getFinancialSheetAccounts(state.financialStatements.trialBalance.sheets, sheetIndex),
+  getTrialBalanceQuery: (sheetIndex) => getFinancialSheetQuery(state.financialStatements.trialBalance.sheets, sheetIndex),

  trialBalanceSheetLoading: state.financialStatements.trialBalance.loading,
 });
--- a/client/src/containers/Dashboard/FinancialStatements/BalanceSheet/BalanceSheet.js
+++ b/client/src/containers/Dashboard/FinancialStatements/BalanceSheet/BalanceSheet.js
@@ -2,7 +2,7 @@ import React, {useEffect, useMemo, useCallback, useState} from 'react';
 import DashboardConnect from 'connectors/Dashboard.connector';
 import {compose} from 'utils';
 import useAsync from 'hooks/async';
-import FinancialStatementConnect from 'connectors/FinancialStatements.connector';
+import BalanceSheetConnect from 'connectors/BalanceSheet.connect';
 import {useIntl} from 'react-intl';
 import BalanceSheetHeader from './BalanceSheetHeader';
 import LoadingIndicator from 'components/LoadingIndicator';
@@ -15,10 +15,9 @@ import BalanceSheetActionsBar from './BalanceSheetActionsBar';
 function BalanceSheet({
  fetchBalanceSheet,
  changePageTitle,
-  getBalanceSheetByQuery,
-  getBalanceSheetIndexByQuery,
-  getBalanceSheetByIndex,
-  balanceSheets
+  balanceSheetLoading, 
+  getBalanceSheetIndex,
+  getBalanceSheet,
 }) {
  const intl = useIntl();
  const [filter, setFilter] = useState({
@@ -45,13 +44,8 @@ function BalanceSheet({

  // Retrieve balance sheet index by the given filter query.
  const balanceSheetIndex = useMemo(() => 
-    getBalanceSheetIndexByQuery(filter),
-    [filter, getBalanceSheetIndexByQuery]);
-
-  // Retreive balance sheet by the given sheet index.
-  const balanceSheet = useMemo(() => 
-    getBalanceSheetByIndex(balanceSheetIndex),
-    [balanceSheetIndex, getBalanceSheetByIndex]);
+    getBalanceSheetIndex(filter),
+    [filter, getBalanceSheetIndex]);

  // Handle re-fetch balance sheet after filter change.
  const handleFilterSubmit = useCallback((filter) => {
@@ -75,13 +69,10 @@ function BalanceSheet({
            onSubmitFilter={handleFilterSubmit} />

          <div class="financial-statement__body">
-            <LoadingIndicator loading={fetchHook.pending}>
-              <BalanceSheetTable
-                balanceSheet={balanceSheet}
-                balanceSheetIndex={balanceSheetIndex}
-                onFetchData={handleFetchData}
-                asDate={new Date()} />
-            </LoadingIndicator>
+            <BalanceSheetTable
+              loading={balanceSheetLoading}
+              balanceSheetIndex={balanceSheetIndex}
+              onFetchData={handleFetchData} />
          </div>
        </div>
      </DashboardPageContent>
@@ -91,5 +82,5 @@ function BalanceSheet({

 export default compose(
  DashboardConnect,
-  FinancialStatementConnect,
+  BalanceSheetConnect,
 )(BalanceSheet);
--- a/client/src/containers/Dashboard/FinancialStatements/BalanceSheet/BalanceSheetHeader.js
+++ b/client/src/containers/Dashboard/FinancialStatements/BalanceSheet/BalanceSheetHeader.js
@@ -39,7 +39,7 @@ export default function BalanceSheetHeader({
      actions.setSubmitting(false);
    },
  });
-   
+
  // Handle item select of `display columns by` field.
  const onItemSelectDisplayColumns = useCallback((item) => {
    formik.setFieldValue('display_columns_type', item.type);
@@ -73,7 +73,8 @@ export default function BalanceSheetHeader({

      <Row>
        <Col sm={3}>
-          <SelectDisplayColumnsBy onItemSelect={onItemSelectDisplayColumns} />
+          <SelectDisplayColumnsBy
+            onItemSelect={onItemSelectDisplayColumns} />
        </Col>

        <Col sm={3}>
@@ -102,7 +103,7 @@ export default function BalanceSheetHeader({
            type="submit"
            onClick={handleSubmitClick}
            disabled={formik.isSubmitting}
-            className={'button--submit-filter'}>
+            className={'button--submit-filter mt2'}>
            { 'Calculate Report' }
          </Button>
        </Col>
--- a/client/src/containers/Dashboard/FinancialStatements/BalanceSheet/BalanceSheetTable.js
+++ b/client/src/containers/Dashboard/FinancialStatements/BalanceSheet/BalanceSheetTable.js
@@ -1,37 +1,28 @@
 import React, {useMemo, useState, useCallback, useEffect} from 'react';
-import FinancialSheet from 'components/FinancialSheet';
-import DataTable from 'components/DataTable';
-import FinancialStatementConnect from 'connectors/FinancialStatements.connector';
-import {compose} from 'utils';
 import moment from 'moment';
 import Money from 'components/Money';
+import FinancialSheet from 'components/FinancialSheet';
+import DataTable from 'components/DataTable';
+import BalanceSheetConnect from 'connectors/BalanceSheet.connect';
+import BalanceSheetTableConnect from 'connectors/BalanceSheetTable.connect';
+import {
+  compose,
+  defaultExpanderReducer,
+} from 'utils';

 function BalanceSheetTable({
-  balanceSheet,
-  balanceSheetIndex,
-  getBalanceSheetColumns,
-
-  getBalanceSheetAssetsAccounts,
-  getBalanceSheetLiabilitiesAccounts,
-
-  getBalanceSheetQuery,
-
+  balanceSheetAccounts,
+  balanceSheetColumns,
+  balanceSheetQuery,
  onFetchData,
  asDate,
+  loading,
 }) {
-  const balanceSheetColumns = useMemo(() => 
-    getBalanceSheetColumns(balanceSheetIndex),
-    [getBalanceSheetColumns, balanceSheetIndex]);
-
-  const balanceSheetQuery = useMemo(() => 
-    getBalanceSheetQuery(balanceSheetIndex),
-    [getBalanceSheetQuery, balanceSheetIndex])
-
  const columns = useMemo(() => [
    {
      // Build our expander column
      id: 'expander', // Make sure it has an ID
-      className: 'expander',      
+      className: 'expander',
      Header: ({
        getToggleAllRowsExpandedProps,
        isAllRowsExpanded
@@ -77,63 +68,65 @@ function BalanceSheetTable({
      accessor: 'code',
      className: "code",
    },
-    ...(balanceSheetQuery &&
-        balanceSheetQuery.display_columns_by === 'total') ? [
+    ...(balanceSheetQuery.display_columns_type === 'total') ? [
      {
        Header: 'Total',
        accessor: 'balance.formatted_amount',
        Cell: ({ cell }) => {
          const row = cell.row.original;
-          if (!row.balance) { return ''; }
-          return (<Money amount={row.balance.formatted_amount} currency={'USD'} />);
+          if (row.total) {
+            return (<Money amount={row.total.formatted_amount} currency={'USD'} />);
+          }
+          return '';          
        },
        className: "credit",
      }
-    ] : (balanceSheetColumns.map((column, index) => ({
-      Header: column,
-      accessor: (row) => {
-        if (row.periods_balance && row.periods_balance[index]) {
-          return row.periods_balance[index].formatted_amount;
-        }
-      },
-    }))),
-  ], [balanceSheetColumns, balanceSheetQuery]);
- 
-  const [data, setData] = useState([]);
-
-  useEffect(() => {
-    if (!balanceSheet) { return; }
-    setData([
-      {
-        name: 'Assets',
-        children: getBalanceSheetAssetsAccounts(balanceSheetIndex),
-      },
-      {
-        name: 'Liabilies & Equity',
-        children: getBalanceSheetLiabilitiesAccounts(balanceSheetIndex),
-      }
-    ])
-  }, []);
-
+    ] : [],
+    ...(balanceSheetQuery.display_columns_type === 'date_periods') ? 
+      (balanceSheetColumns.map((column, index) => ({
+        id: `date_period_${index}`,
+        Header: column,
+        accessor: (row) => {
+          if (row.total_periods && row.total_periods[index]) {
+            const amount = row.total_periods[index].formatted_amount;
+            return (<Money amount={amount} currency={'USD'} />);
+          }
+          return '';
+        },
+        width: 100,
+      })))
+    : [],
+  ], [balanceSheetQuery, balanceSheetColumns]);
+  
  const handleFetchData = useCallback(() => {
    onFetchData && onFetchData();
  }, [onFetchData]);

+
+  // Calculates the default expanded rows of balance sheet table.
+  const expandedRows = useMemo(() => 
+    defaultExpanderReducer(balanceSheetAccounts, 1),
+    [balanceSheetAccounts]);
+
  return (
    <FinancialSheet
      companyTitle={'Facebook, Incopration'}
      sheetType={'Balance Sheet'}
-      date={asDate}>
+      date={asDate}
+      loading={loading}>
      
      <DataTable
        className="bigcapital-datatable--financial-report"
        columns={columns}
-        data={data}
-        onFetchData={handleFetchData} />
+        data={balanceSheetAccounts}
+        onFetchData={handleFetchData}
+        expandSubRows={true}
+        expanded={expandedRows} />
    </FinancialSheet>
  );
 }

 export default compose(
-  FinancialStatementConnect,
+  BalanceSheetConnect,
+  BalanceSheetTableConnect,
 )(BalanceSheetTable);
--- a/client/src/containers/Dashboard/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js
+++ b/client/src/containers/Dashboard/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js
@@ -83,7 +83,7 @@ function GeneralLedgerHeader({
            type="submit"
            onClick={handleSubmitClick}
            disabled={formik.isSubmitting}
-            className={'button--submit-filter'}>
+            className={'button--submit-filter mt2'}>
            { 'Calculate Report' }
          </Button>
        </Col>
--- a/client/src/containers/Dashboard/FinancialStatements/GeneralLedger/GeneralLedgerTable.js
+++ b/client/src/containers/Dashboard/FinancialStatements/GeneralLedger/GeneralLedgerTable.js
@@ -3,6 +3,10 @@ import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
 import Money from 'components/Money';
 import moment from 'moment';
+import {
+  defaultExpanderReducer,
+} from 'utils';
+

 const ROW_TYPE = {
  CLOSING_BALANCE: 'closing_balance',
@@ -135,6 +139,9 @@ export default function GeneralLedgerTable({
    onFetchData && onFetchData();
  }, [onFetchData]);

+  // Default expanded rows of general ledger table.
+  const expandedRows = useMemo(() => defaultExpanderReducer(data, 1), [data]);
+
  return (
    <FinancialSheet
      companyTitle={'Facebook, Incopration'}
@@ -147,7 +154,11 @@ export default function GeneralLedgerTable({
        className="bigcapital-datatable--financial-report"
        columns={columns}
        data={data}
-        onFetchData={handleFetchData} />
+        onFetchData={handleFetchData}
+        expanded={expandedRows}
+        virtualizedRows={true}
+        fixedItemSize={37}
+        fixedSizeHeight={1000}  />
    </FinancialSheet>
  ); 
 }
--- a/client/src/containers/Dashboard/FinancialStatements/Journal/JournalHeader.js
+++ b/client/src/containers/Dashboard/FinancialStatements/Journal/JournalHeader.js
@@ -47,7 +47,7 @@ export default function JournalHeader({
          <Button
            type="submit"
            onClick={handleSubmitClick}
-            class={'button--submit-filter'}>
+            className={'button--submit-filter'}>
            { 'Run Report' }
          </Button>
        </Col>
--- a/client/src/containers/Dashboard/FinancialStatements/Journal/JournalTable.js
+++ b/client/src/containers/Dashboard/FinancialStatements/Journal/JournalTable.js
@@ -1,7 +1,7 @@
 import React, {useState, useEffect, useCallback, useMemo} from 'react';
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
-import {compose} from 'utils';
+import {compose, defaultExpanderReducer} from 'utils';
 import moment from 'moment';
 import JournalConnect from 'connectors/Journal.connect';
 import {
@@ -71,6 +71,9 @@ function JournalSheetTable({
    onFetchData && onFetchData(...args)
  }, [onFetchData]);

+  // Default expanded rows of general journal table.
+  const expandedRows = useMemo(() => defaultExpanderReducer(data, 1), [data]);
+
  return (
    <FinancialSheet
      companyTitle={'Facebook, Incopration'}
@@ -84,7 +87,8 @@ function JournalSheetTable({
        columns={columns}
        data={data}
        onFetchData={handleFetchData}
-        noResults={"This report does not contain any data."} />
+        noResults={"This report does not contain any data."}
+        expanded={expandedRows} />
    </FinancialSheet>
  );
 }
--- a/client/src/containers/Dashboard/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js
+++ b/client/src/containers/Dashboard/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js
@@ -14,11 +14,11 @@ import moment from 'moment';
 function ProfitLossSheet({
  changePageTitle,
  fetchProfitLossSheet,
-
  getProfitLossSheetIndex,
-  getProfitLossSheet,
+  profitLossSheetLoading,
 }) {
  const [filter, setFilter] = useState({
+    basis: 'cash',
    from_date: moment().startOf('year').format('YYYY-MM-DD'),
    to_date: moment().endOf('year').format('YYYY-MM-DD'),
  });
@@ -26,7 +26,7 @@ function ProfitLossSheet({
  // Change page title of the dashboard.
  useEffect(() => {
    changePageTitle('Profit/Loss Sheet');
-  }, []);
+  }, [changePageTitle]);

  // Fetches profit/loss sheet.
  const fetchHook = useAsync((query = filter) => {
@@ -35,14 +35,12 @@ function ProfitLossSheet({
    ]);
  }, false);

+  // Retrieve profit/loss sheet index based on the given filter query.
  const profitLossSheetIndex = useMemo(() =>
    getProfitLossSheetIndex(filter),
-    [getProfitLossSheetIndex, filter])
-
-  const profitLossSheet = useMemo(() => 
-    getProfitLossSheet(profitLossSheetIndex),
-    [getProfitLossSheet, profitLossSheetIndex]);
+    [getProfitLossSheetIndex, filter]);

+  // Handle submit filter.
  const handleSubmitFilter = useCallback((filter) => {
    const _filter = {
      ...filter,
@@ -51,30 +49,29 @@ function ProfitLossSheet({
    };
    setFilter(_filter);
    fetchHook.execute(_filter);
-  }, []);
+  }, [fetchHook]);

  // Handle fetch data of profit/loss sheet table.
-  const handleFetchData = useCallback(() => {
-    fetchHook.execute();
-  }, [fetchHook]);
+  const handleFetchData = useCallback(() => { fetchHook.execute(); }, [fetchHook]);

  return (
    <DashboardInsider>
      <ProfitLossActionsBar  />
+      
+      <DashboardPageContent>
+        <div class="financial-statement">
+          <ProfitLossSheetHeader
+            pageFilter={filter}
+            onSubmitFilter={handleSubmitFilter} />

-      <div class="financial-statement">
-        <ProfitLossSheetHeader
-          pageFilter={filter}
-          onSubmitFilter={handleSubmitFilter} />
-
-        <div class="financial-statement__body">
-          <LoadingIndicator loading={false}>
+          <div class="financial-statement__body">
            <ProfitLossSheetTable
-              data={[]}
-              onFetchData={handleFetchData} />
-          </LoadingIndicator>
-        </div> 
-      </div>
+              profitLossSheetIndex={profitLossSheetIndex}
+              onFetchData={handleFetchData}
+              loading={profitLossSheetLoading} />
+          </div> 
+        </div>
+      </DashboardPageContent>
    </DashboardInsider>
  );
 }
--- a/client/src/containers/Dashboard/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js
+++ b/client/src/containers/Dashboard/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js
@@ -39,7 +39,7 @@ export default function JournalHeader({
  const handleItemSelectDisplayColumns = useCallback((item) => {
    formik.setFieldValue('display_columns_type', item.type);
    formik.setFieldValue('display_columns_by', item.by);
-  }, []);
+  }, [formik]);

  const handleSubmitClick = useCallback(() => {
    formik.submitForm();
@@ -68,7 +68,7 @@ export default function JournalHeader({
          <Button
            type="submit"
            onClick={handleSubmitClick}
-            className={'button--submit-filter'}>
+            className={'button--submit-filter mt2'}>
            { 'Run Report' }
          </Button>
        </Col>
--- a/client/src/containers/Dashboard/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js
+++ b/client/src/containers/Dashboard/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js
@@ -2,14 +2,59 @@ import React, {useState, useMemo, useCallback} from 'react';
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
 import Money from 'components/Money';
+import ProfitLossSheetConnect from 'connectors/ProfitLossSheet.connect';
+import ProfitLossSheetTableConnect from 'connectors/ProfitLossTable.connect';
+import { compose, defaultExpanderReducer } from 'utils';


-export default function ProfitLossSheetTable({
+function ProfitLossSheetTable({
  loading,
  data,
  onFetchData,
+  profitLossTableRows,
+  profitLossQuery,
+  profitLossColumns
 }) {
  const columns = useMemo(() => [
+    {
+      // Build our expander column
+      id: 'expander', // Make sure it has an ID
+      className: 'expander',
+      Header: ({
+        getToggleAllRowsExpandedProps,
+        isAllRowsExpanded
+      }) => (
+        <span {...getToggleAllRowsExpandedProps()} className="toggle">
+          {isAllRowsExpanded ?
+            (<span class="arrow-down" />) :
+            (<span class="arrow-right" />)
+          }
+        </span>
+      ),
+      Cell: ({ row }) =>
+        // Use the row.canExpand and row.getToggleRowExpandedProps prop getter
+        // to build the toggle for expanding a row
+        row.canExpand ? (
+          <span
+            {...row.getToggleRowExpandedProps({
+              style: {
+                // We can even use the row.depth property
+                // and paddingLeft to indicate the depth
+                // of the row
+                paddingLeft: `${row.depth * 2}rem`,
+              },
+              className: 'toggle',
+            })}
+          >
+            {row.isExpanded ?
+              (<span class="arrow-down" />) :
+              (<span class="arrow-right" />)
+            }
+          </span>
+        ) : null,
+      width: 20,
+      disableResizing: true,
+    },  
    {
      Header: 'Account Name',
      accessor: 'name',
@@ -20,12 +65,52 @@ export default function ProfitLossSheetTable({
      accessor: 'code',
      className: "account_code",
    },
-  ])
+    ...(profitLossQuery.display_columns_type === 'total') ? [
+      {
+        Header: 'Total',
+        Cell: ({ cell }) => {
+          const row = cell.row.original;
+          if (row.total) {
+            return (<Money amount={row.total.formatted_amount} currency={'USD'} />);
+          }
+          return '';          
+        },
+        className: "total",
+      }
+    ] : [],
+    ...(profitLossQuery.display_columns_type === 'date_periods') ? 
+      (profitLossColumns.map((column, index) => ({
+        id: `date_period_${index}`,
+        Header: column,
+        accessor: (row) => {
+          if (row.periods && row.periods[index]) {
+            const amount = row.periods[index].formatted_amount;
+            return (<Money amount={amount} currency={'USD'} />);
+          }
+          return '';
+        },
+        width: 100,
+      })))
+    : [],
+  ], [profitLossQuery.display_columns_type, profitLossColumns]);

+  // Handle data table fetch data.
  const handleFetchData = useCallback((...args) => {
    onFetchData && onFetchData(...args);
  }, [onFetchData]);

+  // Retrieve default expanded rows of balance sheet.
+  const expandedRows = useMemo(() => 
+    defaultExpanderReducer(profitLossTableRows, 1),
+    [profitLossTableRows]);
+
+  // Retrieve conditional datatable row classnames.
+  const rowClassNames = useCallback((row) => {
+    return {
+      [`row--${row.rowType}`]: row.rowType,
+    };
+  }, []);
+
  return (
    <FinancialSheet
      companyTitle={'Facebook, Incopration'}
@@ -37,8 +122,15 @@ export default function ProfitLossSheetTable({
      <DataTable
        className="bigcapital-datatable--financial-report"
        columns={columns}
-        data={data}
-        onFetchData={handleFetchData} />
+        data={profitLossTableRows}
+        onFetchData={handleFetchData}
+        expanded={expandedRows}
+        rowClassNames={rowClassNames} />
    </FinancialSheet>
-  )
-}
+  );
+}
+
+export default compose(
+  ProfitLossSheetConnect,
+  ProfitLossSheetTableConnect,
+)(ProfitLossSheetTable);
--- a/client/src/containers/Dashboard/FinancialStatements/RadiosAccountingBasis.js
+++ b/client/src/containers/Dashboard/FinancialStatements/RadiosAccountingBasis.js
@@ -19,6 +19,7 @@ export default function RadiosAccountingBasis(props) {
      onChange={handleStringChange((value) => {
        onChange && onChange(value);
      })}
+      className={'radio-group---accounting-basis'}
      {...rest}>
      <Radio label="Cash" value="cash" />
      <Radio label="Accural" value="accural" />
--- a/client/src/containers/Dashboard/FinancialStatements/SelectDisplayColumnsBy.js
+++ b/client/src/containers/Dashboard/FinancialStatements/SelectDisplayColumnsBy.js
@@ -1,6 +1,6 @@


-import React, {useMemo, useCallback} from 'react';
+import React, { useMemo, useState, useCallback } from 'react';
 import SelectList from 'components/SelectList';
 import {
  FormGroup,
@@ -8,21 +8,31 @@ import {
 } from '@blueprintjs/core';

 export default function SelectsListColumnsBy(props) {
-  const { formGroupProps, selectListProps } = props;
+  const { onItemSelect, formGroupProps, selectListProps } = props;
+  const [itemSelected, setItemSelected] = useState(null);

  const displayColumnsByOptions = useMemo(() => [
    {key: 'total', name: 'Total', type: 'total', by: '', },
-    {key: 'year', name: 'Year', type: 'date', by: 'year'},
-    {key: 'month', name: 'Month', type: 'date', by: 'month'},
-    {key: 'week', name: 'Week', type: 'date', by: 'month'},
-    {key: 'day', name: 'Day', type: 'date', by: 'day'},
-    {key: 'quarter', name: 'Quarter', type: 'date', by: 'quarter'},
+    {key: 'year', name: 'Date/Year', type: 'date_periods', by: 'year'},
+    {key: 'month', name: 'Date/Month', type: 'date_periods', by: 'month'},
+    {key: 'week', name: 'Date/Week', type: 'date_periods', by: 'month'},
+    {key: 'day', name: 'Date/Day', type: 'date_periods', by: 'day'},
+    {key: 'quarter', name: 'Date/Quarter', type: 'date_periods', by: 'quarter'},
  ]);

  const itemRenderer = useCallback((item, { handleClick, modifiers, query }) => {
    return (<MenuItem text={item.name} key={item.id} onClick={handleClick} />);
  }, []);

+  const handleItemSelect = useCallback((item) => {
+    setItemSelected(item);
+    onItemSelect && onItemSelect(item);
+  }, [setItemSelected, onItemSelect]);
+
+  const buttonLabel = useMemo(() => 
+    itemSelected ? itemSelected.name : 'Select display columns by...',
+    [itemSelected]);
+
  return (
    <FormGroup
      label={'Display report columns'}
@@ -36,7 +46,8 @@ export default function SelectsListColumnsBy(props) {
        filterable={false}
        itemRenderer={itemRenderer}
        popoverProps={{ minimal: true }}
-        buttonLabel={'Select...'}
+        buttonLabel={buttonLabel}
+        onItemSelect={handleItemSelect}        
        {...selectListProps} />
    </FormGroup>
  );
--- a/client/src/containers/Dashboard/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js
+++ b/client/src/containers/Dashboard/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js
@@ -55,7 +55,8 @@ export default function TrialBalanceSheetHeader({
          <Button
            type="submit"
            onClick={handleSubmitClick}
-            disabled={formik.isSubmitting}>
+            disabled={formik.isSubmitting}
+            className={'button--submit-filter'}>
            { 'Run Report' }
          </Button>
        </Col>
--- a/client/src/store/financialStatement/financialStatements.actions.js
+++ b/client/src/store/financialStatement/financialStatements.actions.js
@@ -3,11 +3,19 @@ import t from 'store/types';

 export const fetchGeneralLedger = ({ query }) => {
  return (dispatch) => new Promise((resolve, reject) => {
+    dispatch({
+      type: t.GENERAL_LEDGER_SHEET_LOADING,
+      loading: true,
+    })
    ApiService.get('/financial_statements/general_ledger', { params: query }).then((response) => {
      dispatch({
        type: t.GENERAL_LEDGER_STATEMENT_SET,
        data: response.data,
      });
+      dispatch({
+        type: t.GENERAL_LEDGER_SHEET_LOADING,
+        loading: false,
+      });
      resolve(response);
    }).catch((error) => { reject(error); });
  });
@@ -15,12 +23,20 @@ export const fetchGeneralLedger = ({ query }) => {

 export const fetchBalanceSheet = ({ query }) => {
  return (dispatch) => new Promise((resolve, reject) => {
+    dispatch({
+      type: t.BALANCE_SHEET_LOADING,
+      loading: true,
+    });
    ApiService.get('/financial_statements/balance_sheet', { params: query }).then((response) => {
      dispatch({
        type: t.BALANCE_SHEET_STATEMENT_SET,
        data: response.data,
        query: query,
      });
+      dispatch({
+        type: t.BALANCE_SHEET_LOADING,
+        loading: false,
+      });
      resolve(response);
    }).catch((error) => { reject(error); });
  });
@@ -50,9 +66,9 @@ export const fetchProfitLossSheet = ({ query }) => {
  return (dispatch) => new Promise((resolve, reject) => {
    dispatch({
      type: t.PROFIT_LOSS_SHEET_LOADING,
-      loading: false,
+      loading: true,
    }); 
-    ApiService.get('/financial_statements/profit_loss_sheet').then((response) => {
+    ApiService.get('/financial_statements/profit_loss_sheet', { params: query }).then((response) => {
      dispatch({
        type: t.PROFIT_LOSS_SHEET_SET,
        profitLoss: response.data.profitLoss,
--- a/client/src/store/financialStatement/financialStatements.reducer.js
+++ b/client/src/store/financialStatement/financialStatements.reducer.js
@@ -1,14 +1,17 @@
 import { createReducer } from '@reduxjs/toolkit';
 import t from 'store/types';
 import {
-  getBalanceSheetIndexByQuery,
+  // getBalanceSheetIndexByQuery,
  getFinancialSheetIndexByQuery,
  // getFinancialSheetIndexByQuery,
 } from './financialStatements.selectors';
 import {omit} from 'lodash';

 const initialState = {
-  balanceSheets: [],
+  balanceSheet: {
+    sheets: [],
+    loading: false,
+  },
  trialBalance: {
    sheets: [],
    loading: false,
@@ -72,22 +75,61 @@ const mapJournalTableRows = (journal) => {
  }, []);
 }

+
+const mapProfitLossToTableRows = (profitLoss) => {
+  return [
+    {
+      name: 'Income',
+      total: profitLoss.income.total,
+      children: [
+        ...profitLoss.income.accounts,
+        {
+          name: 'Total Income',
+          total: profitLoss.income.total,
+          rowType: 'income_total',
+        }
+      ],
+    },
+    {
+      name: 'Expenses',
+      total: profitLoss.expenses.total,
+      children: [
+        ...profitLoss.expenses.accounts,
+        {
+          name: 'Total Expenses',
+          total: profitLoss.expenses.total,
+          rowType: 'expense_total',
+        }
+      ],
+    },
+    {
+      name: 'Net Income',
+      total: profitLoss.net_income.total, 
+      rowType: 'net_income',
+    }
+  ]
+};
+
 export default createReducer(initialState, {
  [t.BALANCE_SHEET_STATEMENT_SET]: (state, action) => {
-    const index  = getBalanceSheetIndexByQuery(state.balanceSheets, action.query);
-
+    const index  = getFinancialSheetIndexByQuery(state.balanceSheet.sheets, action.query);
+  
    const balanceSheet = {
-      balances: action.data.balance_sheet,
+      accounts: action.data.accounts,
      columns: Object.values(action.data.columns),
      query: action.data.query,
    };
    if (index !== -1) {
-      state.balanceSheets[index] = balanceSheet;
+      state.balanceSheet.sheets[index] = balanceSheet;
    } else {
-      state.balanceSheets.push(balanceSheet);
+      state.balanceSheet.sheets.push(balanceSheet);
    }
  },

+  [t.BALANCE_SHEET_LOADING]: (state, action) => {
+    state.balanceSheet.loading = !!action.loading;
+  },
+
  [t.TRAIL_BALANCE_STATEMENT_SET]: (state, action) => {
    const index = getFinancialSheetIndexByQuery(state.trialBalance.sheets, action.query);
    const trailBalanceSheet = {
@@ -139,13 +181,18 @@ export default createReducer(initialState, {
    }
  },

+  [t.GENERAL_LEDGER_SHEET_LOADING]: (state, action) => {
+    state.generalLedger.loading = !!action.loading;
+  },
+
  [t.PROFIT_LOSS_SHEET_SET]: (state, action) => {
    const index = getFinancialSheetIndexByQuery(state.profitLoss.sheets, action.query);
-    
+
    const profitLossSheet = {
      query: action.query,
      profitLoss: action.profitLoss,
      columns: action.columns,
+      tableRows: mapProfitLossToTableRows(action.profitLoss),
    };
    if (index !== -1) {
      state.profitLoss.sheets[index] = profitLossSheet;      
--- a/client/src/store/financialStatement/financialStatements.selectors.js
+++ b/client/src/store/financialStatement/financialStatements.selectors.js
@@ -38,97 +38,19 @@ export const getFinancialSheetColumns = (sheets, index) => {
 * @param {array} sheets 
 * @param {number} index 
 */
-export const getFinancialSheetsQuery = (sheets, index) => {
+export const getFinancialSheetQuery = (sheets, index) => {
  const sheet = getFinancialSheet(sheets, index);
-  return (sheet && sheet.query) ? sheet.columns : {};
+  return (sheet && sheet.query) ? sheet.query : {};
 };


-// Balance Sheet.
-export const getBalanceSheetByQuery = (balanceSheets, query) => {
-  return balanceSheets.find(balanceSheet => {
-    return getObjectDiff(query, balanceSheet.query).length === 0;
-  });
-};
-
-export const getBalanceSheetIndexByQuery = (balanceSheets, query) => {
-  return balanceSheets.findIndex((balanceSheet) => {
-    return getObjectDiff(query, balanceSheet.query).length === 0;
-  });
-};
-
-export const getBalanceSheetByIndex = (balanceSheets, sheetIndex) => {
-  return balanceSheets[sheetIndex];
-};
-
-export const getBalanceSheetQuery = (balanceSheets, sheetIndex) => {
-  if (typeof balanceSheets[sheetIndex] === 'object') {
-    return balanceSheets[sheetIndex].query || {};
-  }
-  return {};
-};
-
-export const getBalanceSheetAssetsAccounts = (balanceSheets, sheetIndex) => {
-  if (typeof balanceSheets[sheetIndex] === 'object') {
-    return balanceSheets[sheetIndex].balances.assets.accounts || [];
-  }
-  return [];
-};
-
-export const getBalanceSheetLiabilitiesAccounts = (balanceSheets, sheetIndex) => {
-  if (typeof balanceSheets[sheetIndex] === 'object') {
-    return balanceSheets[sheetIndex].balances.liabilities_equity.accounts || [];
-  }
-  return [];
-};
-
-export const getBalanceSheetColumns = (balanceSheets, sheetIndex) => {
-  if (typeof balanceSheets[sheetIndex] === 'object') {
-    return balanceSheets[sheetIndex].columns;
-  }
-  return [];
+export const getFinancialSheetAccounts = (sheets, index) => {
+  const sheet = getFinancialSheet(sheets, index);
+  return (sheet && sheet.accounts) ? sheet.accounts : []; 
 };


-// Trial Balance Sheet.
-export const getTrialBalanceSheetIndex = (trialBalanceSheets, query) => {
-  return trialBalanceSheets.find((trialBalanceSheet) => {
-    return getObjectDiff(query, trialBalanceSheet.query).length === 0;
-  });
-};
-
-export const getTrialBalanceAccounts = (trialBalanceSheets, sheetIndex) => {
-  if (typeof trialBalanceSheets[sheetIndex] === 'object') {
-    return trialBalanceSheets[sheetIndex].accounts;
-  }
-  return [];
-};
-
-export const getTrialBalanceQuery = (trialBalanceSheets, sheetIndex) => {
-  if (typeof trialBalanceSheets[sheetIndex] === 'object') {
-    return trialBalanceSheets[sheetIndex].query;
-  }
-  return [];
-};
-
-// Profit/Loss Sheet selectors.
-export const getProfitLossSheetIndex = (profitLossSheets, query) => {
-  return profitLossSheets.find((profitLossSheet) => {
-    return getObjectDiff(query, profitLossSheet.query).length === 0;
-  });
-}
-
-export const getProfitLossSheet = (profitLossSheets, index) => {
-  return (typeof profitLossSheets[index] !== 'undefined') ? 
-    profitLossSheets[index] : null;
-};
-
-export const getProfitLossSheetColumns = (profitLossSheets, index) => {
-  const sheet = getProfitLossSheet(profitLossSheets, index);
-  return (sheet) ? sheet.columns : [];
-};
-
-export const getProfitLossSheetAccounts = (profitLossSheets, index) => {
-  const sheet = getProfitLossSheet(profitLossSheets, index);
-  return (sheet) ? sheet.accounts : [];
+export const getFinancialSheetTableRows = (sheets, index) => {
+  const sheet = getFinancialSheet(sheets, index);
+  return (sheet && sheet.tableRows) ? sheet.tableRows : []; 
 };
--- a/client/src/store/financialStatement/financialStatements.types.js
+++ b/client/src/store/financialStatement/financialStatements.types.js
@@ -2,9 +2,14 @@

 export default {
  GENERAL_LEDGER_STATEMENT_SET: 'GENERAL_LEDGER_STATEMENT_SET',
+  GENERAL_LEDGER_SHEET_LOADING: 'GENERAL_LEDGER_SHEET_LOADING',
+
  BALANCE_SHEET_STATEMENT_SET: 'BALANCE_SHEET_STATEMENT_SET',
+  BALANCE_SHEET_LOADING: 'BALANCE_SHEET_LOADING',
+
  TRAIL_BALANCE_STATEMENT_SET: 'TRAIL_BALANCE_STATEMENT_SET',
  TRIAL_BALANCE_SHEET_LOADING: 'TRIAL_BALANCE_SHEET_LOADING',
+
  JOURNAL_SHEET_SET: 'JOURNAL_SHEET_SET',
  JOURNAL_SHEET_LOADING: 'JOURNAL_SHEET_LOADING',

--- a/client/src/style/components/data-table.scss
+++ b/client/src/style/components/data-table.scss
@@ -1,5 +1,5 @@

-.bigcapital-datatable{  
+.bigcapital-datatable{
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
@@ -138,8 +138,7 @@
    }
  }

-  .no-results{
-    
+  .no-results{    
    color: #666;

    .td{
@@ -149,6 +148,15 @@
    }
  }

+  &.has-sticky-header{
+
+    .thead{
+      .tr .th{
+        position: sticky;
+      }
+    }
+  }
+
  &--financial-report{
  
    .thead{
--- a/client/src/style/objects/buttons.scss
+++ b/client/src/style/objects/buttons.scss
@@ -30,7 +30,7 @@
  min-height: 32px;
  background-color: #E6EFFB;
  color: #555555;
-  box-shadow: 0 0 0;
+  box-shadow: 0 0 0 transparent;

  .form-group--select-list &{
    border-radius: 0;
@@ -38,7 +38,7 @@
    &,
    &:hover{
      background: #fff;
-      box-shadow: 0 0 0;  
+      box-shadow: 0 0 0 transparent;  
      border: 1px solid #ced4da;
    }
  }
@@ -53,7 +53,7 @@

    &,
    &:hover{
-      box-shadow: 0 0 0;
+      box-shadow: 0 0 0 transparent;
    }    
  }
 }
--- a/client/src/style/objects/form.scss
+++ b/client/src/style/objects/form.scss
@@ -94,4 +94,110 @@ label{
  .#{$ns}-icon-caret-down{
    color: #8D8D8D;
  }
+}
+
+
+
+
+///@extend
+
+
+
+.#{$ns}-control {
+
+  input:checked ~ .#{$ns}-control-indicator {
+    box-shadow: 0 0 0 transparent;
+    background-color: transparent;
+    background-image: none;
+  }
+  &:hover input:checked ~ .#{$ns}-control-indicator {
+    box-shadow: 0 0 0 transparent;
+    background-color: transparent;
+  }
+  input:not(:disabled):active:checked ~ .#{$ns}-control-indicator {
+    box-shadow: 0 0 0 transparent;
+    background: transparent;
+  }
+  input:disabled:checked ~ .#{$ns}-control-indicator {
+    box-shadow: none;
+    background: transparent;
+  }
+
+  &.#{$ns}-disabled {
+    cursor: not-allowed;
+    color: $pt-text-color-disabled;
+  }
+
+  &.#{$ns}-inline {
+    display: inline-block;
+    margin-right: $pt-grid-size * 2;
+  }
+ 
+  .#{$ns}-control-indicator {
+    box-shadow: 0 0 0 transparent;
+    background-clip: padding-box;
+    background-color: transparent;
+    background-image: none;
+    width: 18px;
+    height: 18px;
+    
+    &::before {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  &:hover .#{$ns}-control-indicator {
+    background-color: transparent;
+  }
+
+  input:not(:disabled):active ~ .#{$ns}-control-indicator {
+    box-shadow: 0 0 0 transparent;
+    background: transparent;
+  }
+ 
+  /*
+    Radio
+
+    Markup:
+    <label class="#{$ns}-control #{$ns}-radio {{.modifier}}">
+      <input type="radio" name="docs-radio-regular" {{:modifier}} />
+      <span class="#{$ns}-control-indicator"></span>
+      Radio
+    </label>
+
+    :checked  - Selected
+    :disabled - Disabled. Also add <code>.#{$ns}-disabled</code> to <code>.#{$ns}-control</code> to change text color (not shown below).
+    .#{$ns}-align-right - Right-aligned indicator
+    .#{$ns}-large - Large
+
+    Styleguide radio
+  */
+  &.#{$ns}-radio {
+
+    .#{$ns}-control-indicator{
+      border: 2px solid #cecece;
+
+      &::before{
+        height: 14px;
+        width: 14px;
+      }
+    }
+
+    input:checked ~ .#{$ns}-control-indicator{
+      border-color: #137cbd;
+
+      &::before {
+        background-image: radial-gradient(#137cbd 40%, transparent 40%);
+      }
+    }
+
+    input:checked:disabled ~ .#{$ns}-control-indicator::before {
+      opacity: 0.5;
+    }
+
+    input:focus ~ .#{$ns}-control-indicator {
+      -moz-outline-radius: $control-indicator-size;
+    }
+  }
 }
--- a/client/src/style/pages/financial-statements.scss
+++ b/client/src/style/pages/financial-statements.scss
@@ -7,26 +7,46 @@
    padding: 25px 26px 25px;
    background: #FDFDFD;

-    .bp3-form-group .bp3-label{
-      font-weight: 500;
-      font-size: 13px;
-      color: #444;
+    .bp3-form-group,
+    .radio-group---accounting-basis{
+      
+      .bp3-label{
+        font-weight: 500;
+        font-size: 13px;
+        color: #444;
+      }
+    }
+    .bp3-button.button--submit-filter{
+      min-height: 34px;
+      padding-left: 16px;
+      padding-right: 16px;
+    }
+    .radio-group---accounting-basis{
+      .bp3-label{
+        margin-bottom: 12px;
+      }
    }
  }

  &__body{
    padding-left: 20px;
    padding-right: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
  }
 }

 .financial-sheet{
  border: 1px solid #E2E2E2;
  min-width: 640px;
-  width: 0;
-  padding: 20px;
-  padding-top: 30px;
+  width: auto;
+  padding: 30px 20px;
+  max-width: 100%;
  margin: 35px auto;
+  min-height: 400px;
+  display: flex;
+  flex-direction: column;

  &__title{
    margin: 0;
@@ -57,14 +77,24 @@
      }
    }
  }
-  &__accounting-basis{
-
+  &__basis{
+    color: #888;
+    text-align: center;
+    margin-top: auto;
+    padding-top: 16px;
+    font-size: 12px;
+  }
+  .dashboard__loading-indicator{
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  &--expended{
+    width: auto;
  }
- 
  &--trial-balance{
    min-width: 720px;
  }
-
  &--general-ledger,
  &--journal{
    width: auto;
@@ -73,11 +103,8 @@
    margin-top: 10px;
    border-color: #EEEDED;
  }
-
  &--journal{
-
    .financial-sheet__table{
-
      .tbody{
        .tr .td{
          padding: 0.4rem;
@@ -96,4 +123,25 @@
      }
    }
  }
+
+  &--profit-loss-sheet{
+
+    .financial-sheet__table{
+      .tbody{
+        .account_code.td{
+          color: #666;
+        }
+        
+        .row--income_total,
+        .row--expense_total,
+        .row--net_income{
+          font-weight: 600;
+
+          .total.td{
+            border-bottom-color: #555;
+          }
+        }
+      }
+    }
+  }
 }
--- a/client/src/utils.js
+++ b/client/src/utils.js
@@ -111,4 +111,24 @@ export const parseDateRangeQuery = (keyword) => {
    from_date: moment().startOf(query.range).toDate(),
    to_date: moment().endOf(query.range).toDate(),
  };
-};
+};
+
+
+export const defaultExpanderReducer = (tableRows, level) => {
+  let currentLevel = 1;
+  const expended = [];
+
+  const walker = (rows, parentIndex = null) => {
+    return rows.forEach((row, index) => {
+      const _index = parentIndex ? `${parentIndex}.${index}` : `${index}`;
+      expended[_index] = true;
+  
+      if (row.children && currentLevel < level) {
+        walker(row.children, _index);
+      }
+      currentLevel++;
+    }, {});
+  };
+  walker(tableRows);
+  return expended;
+}
--- a/server/src/http/controllers/FinancialStatements.js
+++ b/server/src/http/controllers/FinancialStatements.js
@@ -274,7 +274,9 @@ export default {
      query('accounting_method').optional().isIn(['cash', 'accural']),
      query('from_date').optional(),
      query('to_date').optional(),
-      query('display_columns_by').optional().isIn(['total', 'year', 'month', 'week', 'day', 'quarter']),
+      query('display_columns_type').optional().isIn(['date_periods', 'total']),
+      query('display_columns_by').optional({ nullable: true, checkFalsy: true })
+        .isIn(['year', 'month', 'week', 'day', 'quarter']),
      query('number_format.no_cents').optional().isBoolean().toBoolean(),
      query('number_format.divide_1000').optional().isBoolean().toBoolean(),
      query('none_zero').optional().isBoolean().toBoolean(),
@@ -288,7 +290,8 @@ export default {
        });
      }
      const filter = {
-        display_columns_by: 'total',
+        display_columns_type: 'total',
+        display_columns_by: '',
        from_date: moment().startOf('year').format('YYYY-MM-DD'),
        to_date: moment().endOf('year').format('YYYY-MM-DD'),
        number_format: {
@@ -299,7 +302,6 @@ export default {
        basis: 'cash',
        ...req.query,
      };
-
      const balanceSheetTypes = await AccountType.query().where('balance_sheet', true);

      // Fetch all balance sheet accounts.
@@ -317,91 +319,76 @@ export default {

      // Account balance formmatter based on the given query.
      const balanceFormatter = formatNumberClosure(filter.number_format);
-      const filterDateType = filter.display_columns_by === 'total'
+      const comparatorDateType = filter.display_columns_type === 'total'
        ? 'day' : filter.display_columns_by;

-      // Gets the date range set from start to end date.
-      const dateRangeSet = dateRangeCollection(
-        filter.from_date,
-        filter.to_date,
-        filterDateType,
-      );
-      // Retrieve the asset balance sheet.
-      const assets = accounts
-        .filter((account) => (
-          account.type.normal === 'debit'
-            && (account.transactions.length > 0 || !filter.none_zero)
-        ))
-        .map((account) => {
+      const dateRangeSet = (filter.display_columns_type === 'date_periods')
+        ? dateRangeCollection(
+          filter.from_date, filter.to_date, comparatorDateType,
+        ) : [];
+
+      const totalPeriods = (account) => {
+        // Gets the date range set from start to end date.
+        return {
+          total_periods: dateRangeSet.map((date) => {
+            const balance = journalEntries.getClosingBalance(account.id, date, comparatorDateType);
+            return {
+              date,
+              formatted_amount: balanceFormatter(balance),
+              amount: balance,
+            };
+          }),
+        };
+      };
+
+      const accountsMapper = (balanceSheetAccounts) => {
+        return balanceSheetAccounts.map((account) => {
          // Calculates the closing balance to the given date.
          const closingBalance = journalEntries.getClosingBalance(account.id, filter.to_date);
-          const type = filter.display_columns_by;

          return {
            ...pick(account, ['id', 'index', 'name', 'code']),
-            ...(type !== 'total') ? {
-              periods_balance: dateRangeSet.map((date) => {
-                const balance = journalEntries.getClosingBalance(account.id, date, filterDateType);

-                return {
-                  date,
-                  formatted_amount: balanceFormatter(balance),
-                  amount: balance,
-                };
-              }),
-            } : {},
-            balance: {
+            // Date periods when display columns.
+            ...(filter.display_columns_type === 'date_periods') && totalPeriods(account),
+
+            total: {
              formatted_amount: balanceFormatter(closingBalance),
              amount: closingBalance,
              date: filter.to_date,
            },
          };
        });
+      };
+      // Retrieve all assets accounts.
+      const assetsAccounts = accounts.filter((account) => (
+        account.type.normal === 'debit'
+          && (account.transactions.length > 0 || !filter.none_zero)));
+
+      // Retrieve all liability accounts.
+      const liabilitiesAccounts = accounts.filter((account) => (
+        account.type.normal === 'credit'
+          && (account.transactions.length > 0 || !filter.none_zero)));
+
+      // Retrieve the asset balance sheet.
+      const assets = accountsMapper(assetsAccounts);

      // Retrieve liabilities and equity balance sheet.
-      const liabilitiesEquity = accounts
-        .filter((account) => (
-          account.type.normal === 'credit'
-            && (account.transactions.length > 0 || !filter.none_zero)
-        ))
-        .map((account) => {
-          // Calculates the closing balance to the given date.
-          const closingBalance = journalEntries.getClosingBalance(account.id, filter.to_date);
-          const type = filter.display_columns_by;
-
-          return {
-            ...pick(account, ['id', 'index', 'name', 'code']),
-            ...(type !== 'total') ? {
-              periods_balance: dateRangeSet.map((date) => {
-                const balance = journalEntries.getClosingBalance(account.id, date, filterDateType);
-                return {
-                  date,
-                  formatted_amount: balanceFormatter(balance),
-                  amount: balance,
-                };
-              }),
-            } : {},
-            balance: {
-              formatted_amount: balanceFormatter(closingBalance),
-              amount: closingBalance,
-              date: filter.to_date,
-            },
-          };
-        });
+      const liabilitiesEquity = accountsMapper(liabilitiesAccounts);

      return res.status(200).send({
        query: { ...filter },
        columns: { ...dateRangeSet },
-        balance_sheet: {
-          assets: {
-            title: 'Assets',
-            accounts: [...assets],
+        accounts: [
+          {
+            name: 'Assets',
+            children: [...assets],
          },
-          liabilities_equity: {
-            title: 'Liabilities & Equity',
-            accounts: [...liabilitiesEquity],
+          {
+            name: 'Liabilities & Equity',
+            children: [...liabilitiesEquity],
          },
-        },
+        ],
      });
    },
  },
@@ -492,9 +479,8 @@ export default {
      query('display_columns_type').optional().isIn([
        'total', 'date_periods',
      ]),
-      query('display_columns_by').optional().isIn([
-        'year', 'month', 'week', 'day', 'quarter',
-      ]),
+      query('display_columns_by').optional({ nullable: true, checkFalsy: true })
+        .isIn(['year', 'month', 'week', 'day', 'quarter']),
    ],
    async handler(req, res) {
      const validationErrors = validationResult(req);
--- a/server/tests/routes/financial_statements.test.js
+++ b/server/tests/routes/financial_statements.test.js
@@ -363,7 +363,7 @@ describe('routes: `/financial_statements`', () => {
    });
  });

-  describe('routes: `financial_statements/balance_sheet`', () => {
+  describe.only('routes: `financial_statements/balance_sheet`', () => {
    it('Should response unauthorzied in case the user was not authorized.', async () => {
      const res = await request()
        .get('/api/financial_statements/balance_sheet')
@@ -406,21 +406,23 @@ describe('routes: `/financial_statements`', () => {
      expect(res.body.balance_sheet.liabilities_equity.accounts).to.be.a('array');
    });

-    it('Should retrieve assets/liabilities total balance between the given date range.', async () => {
+    it.only('Should retrieve assets/liabilities total balance between the given date range.', async () => {
      const res = await request()
        .get('/api/financial_statements/balance_sheet')
        .set('x-access-token', loginRes.body.token)
        .query({
-          display_columns_by: 'total',
+          display_columns_type: 'total',
          from_date: '2012-01-01',
          to_date: '2032-02-02',
        })
        .send();

-      expect(res.body.balance_sheet.assets.accounts[0].balance).deep.equals({
+        console.log(res.body.balance_sheet.assets.accounts);
+
+      expect(res.body.balance_sheet.assets.accounts[0].total).deep.equals({
        amount: 4000, formatted_amount: 4000, date: '2032-02-02',
      });
-      expect(res.body.balance_sheet.liabilities_equity.accounts[0].balance).deep.equals({
+      expect(res.body.balance_sheet.liabilities_equity.accounts[0].total).deep.equals({
        amount: 2000, formatted_amount: 2000, date: '2032-02-02',
      });
    });
--- a/server/tests/routes/itemsCategories.test.js
+++ b/server/tests/routes/itemsCategories.test.js
@@ -8,7 +8,7 @@ import knex from '@/database/knex';

 let loginRes;

-describe.only('routes: /item_categories/', () => {
+describe('routes: /item_categories/', () => {
  beforeEach(async () => {
    loginRes = await login();
  });