feat: integrate balance sheet and P&L sheet with new API.

src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js

@@ -5,23 +5,21 @@ import { BalanceSheetAlerts, BalanceSheetLoadingBar } from './components';
 import { FinancialStatement } from 'components';
 
 import BalanceSheetHeader from './BalanceSheetHeader';
-import BalanceSheetTable from './BalanceSheetTable';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import BalanceSheetActionsBar from './BalanceSheetActionsBar';
 import { BalanceSheetProvider } from './BalanceSheetProvider';
+import { BalanceSheetBody } from './BalanceSheetBody';
+import { FinancialReportBody } from '../FinancialReportPage';
 
 import withBalanceSheetActions from './withBalanceSheetActions';
-import withCurrentOrganization from '../../../containers/Organization/withCurrentOrganization';
 
 import { compose } from 'utils';
 
 /**
  * Balance sheet.
+ * @returns {React.JSX}
  */
 function BalanceSheet({
-  // #withCurrentOrganization
-  organizationName,
-
   // #withBalanceSheetActions
   toggleBalanceSheetFilterDrawer,
 }) {
@@ -42,7 +40,6 @@ function BalanceSheet({
     };
     setFilter({ ..._filter });
   };
-
   // Handle number format submit.
   const handleNumberFormatSubmit = (values) => {
     setFilter({
@@ -50,7 +47,6 @@ function BalanceSheet({
       numberFormat: values,
     });
   };
-
   // Hides the balance sheet filter drawer once the page unmount.
   useEffect(
     () => () => {
@@ -66,6 +62,7 @@ function BalanceSheet({
         onNumberFormatSubmit={handleNumberFormatSubmit}
       />
       <BalanceSheetLoadingBar />
+      {/* <BalanceSheetAlerts /> */}
 
       <DashboardPageContent>
         <FinancialStatement>
@@ -73,20 +70,13 @@ function BalanceSheet({
             pageFilter={filter}
             onSubmitFilter={handleFilterSubmit}
           />
-          <div class="financial-statement__body">
+          <FinancialReportBody>
-            <BalanceSheetTable companyName={organizationName} />
+            <BalanceSheetBody />
-          </div>
+          </FinancialReportBody>
         </FinancialStatement>
       </DashboardPageContent>
-
-      {/* <BalanceSheetAlerts /> */}
     </BalanceSheetProvider>
   );
 }
 
-export default compose(
+export default compose(withBalanceSheetActions)(BalanceSheet);
-  withCurrentOrganization(({ organization }) => ({
-    organizationName: organization.name,
-  })),
-  withBalanceSheetActions,
-)(BalanceSheet);

src/containers/FinancialStatements/BalanceSheet/BalanceSheetBody.js

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import BalanceSheetTable from './BalanceSheetTable';
+import withCurrentOrganization from '../../../containers/Organization/withCurrentOrganization';
+import { useBalanceSheetContext } from './BalanceSheetProvider';
+
+import { compose } from 'utils';
+
+/**
+ * Balance sheet body JSX.
+ * @returns {React.JSX}
+ */
+function BalanceSheetBodyJSX({
+  // #withCurrentOrganization
+  organizationName,
+}) {
+  const { isLoading } = useBalanceSheetContext();
+
+  return isLoading ? (
+    'loading'
+  ) : (
+    <BalanceSheetTable companyName={organizationName} />
+  );
+}
+
+export const BalanceSheetBody = compose(
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
+  })),
+)(BalanceSheetBodyJSX);

src/containers/FinancialStatements/BalanceSheet/BalanceSheetProvider.js

@@ -10,7 +10,6 @@ function BalanceSheetProvider({ filter, ...props }) {
   const query = React.useMemo(() => transformFilterFormToQuery(filter), [
     filter,
   ]);
-
   // Fetches the balance sheet report.
   const {
     data: balanceSheet,

src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js

@@ -36,14 +36,13 @@ export default function BalanceSheetTable({
       name="balance-sheet"
       companyName={companyName}
       sheetType={intl.get('balance_sheet')}
-      // fromDate={query.from_date}
+      fromDate={query.from_date}
-      // toDate={query.to_date}
+      toDate={query.to_date}
-      // basis={query.basis}
+      basis={query.basis}
-      // loading={isLoading}
     >
       <BalanceSheetDataTable
         columns={tableColumns}
-        data={table?.rows || []}
+        data={table.rows}
         rowClassNames={tableRowTypesToClassnames}
         noInitialFetch={true}
         expandable={true}

src/containers/FinancialStatements/BalanceSheet/components.js

@@ -1,9 +1,12 @@
 import React from 'react';
 import { Button } from '@blueprintjs/core';
-import { Icon, If } from 'components';
+
+import { FormattedMessage as T, Icon, If } from 'components';
+
 import { useBalanceSheetContext } from './BalanceSheetProvider';
-import { FormattedMessage as T } from 'components';
 import FinancialLoadingBar from '../FinancialLoadingBar';
+import { FinancialComputeAlert } from '../FinancialReportPage';
+
 import { dynamicColumns } from './utils';
 
 /**
@@ -22,14 +25,14 @@ export function BalanceSheetAlerts() {
 
   return (
     <If condition={balanceSheet.meta.is_cost_compute_running}>
-      <div class="alert-compute-running">
+      <FinancialComputeAlert>
         <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>
-      </div>
+      </FinancialComputeAlert>
     </If>
   );
 }
@@ -57,7 +60,7 @@ export const useBalanceSheetColumns = () => {
   } = useBalanceSheetContext();
 
   return React.useMemo(
-    () => dynamicColumns(table?.columns || [], table?.rows || []),
+    () => dynamicColumns(table.columns, table.rows),
     [table],
   );
 };

src/containers/FinancialStatements/FinancialReportPage.js

@@ -1,18 +1,60 @@
 import React from 'react';
 import classNames from 'classnames';
 import { DashboardInsider } from 'components';
+import styled from 'styled-components';
 import { CLASSES } from 'common/classes';
 
-import 'style/pages/FinancialStatements/FinancialReportPage.scss';
-
 /**
  * Financial report page.
  */
 export default function FinancialReportPage(props) {
   return (
-    <DashboardInsider
+    <FinancialReportPageRoot
       {...props}
       className={classNames(CLASSES.FINANCIAL_REPORT_INSIDER, props.className)}
     />
   );
 }
+
+export const FinancialComputeAlert = styled.div`
+  position: relative;
+  padding: 8px 20px;
+  border-radius: 2px;
+  background-color: #fdecda;
+  color: #342515;
+  font-size: 13px;
+
+  button {
+    font-size: 12px;
+    min-height: 16px;
+    padding: 0 4px;
+
+    &,
+    &:hover {
+      color: #824400;
+      text-decoration: underline;
+    }
+  }
+  svg {
+    margin-right: 6px;
+    position: relative;
+    top: -2px;
+    fill: #975f19;
+  }
+`;
+
+export const FinancialProgressbar = styled.div`
+  .progress-materializecss {
+    top: -2px;
+  }
+`;
+
+export const FinancialReportPageRoot = styled(DashboardInsider)``;
+
+export const FinancialReportBody = styled.div`
+  padding-left: 15px;
+  padding-right: 15px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;

src/containers/FinancialStatements/ProfitLossSheet/ProfitLossBody.js

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import ProfitLossSheetTable from './ProfitLossSheetTable';
+import { FinancialReportBody } from '../FinancialReportPage';
+
+import withCurrentOrganization from '../../Organization/withCurrentOrganization';
+import { useProfitLossSheetContext } from './ProfitLossProvider';
+
+import { compose } from 'utils';
+
+/**
+ * @returns {React.JSX}
+ */
+function ProfitLossBodyJSX({
+  // #withPreferences
+  organizationName,
+}) {
+  const { isLoading } = useProfitLossSheetContext();
+
+  return (
+    <FinancialReportBody>
+      {isLoading ? (
+        'loading'
+      ) : (
+        <ProfitLossSheetTable companyName={organizationName} />
+      )}
+    </FinancialReportBody>
+  );
+}
+
+export const ProfitLossBody = compose(
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
+  })),
+)(ProfitLossBodyJSX);

src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js

@@ -3,25 +3,21 @@ import moment from 'moment';
 import { compose } from 'utils';
 
 import ProfitLossSheetHeader from './ProfitLossSheetHeader';
-import ProfitLossSheetTable from './ProfitLossSheetTable';
 import ProfitLossActionsBar from './ProfitLossActionsBar';
 
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withProfitLossActions from './withProfitLossActions';
-import withCurrentOrganization from '../../Organization/withCurrentOrganization';
 
 import { ProfitLossSheetProvider } from './ProfitLossProvider';
 import { ProfitLossSheetLoadingBar, ProfitLossSheetAlerts } from './components';
+import { ProfitLossBody } from './ProfitLossBody';
 
 /**
  * Profit/Loss financial statement sheet.
  */
 function ProfitLossSheet({
-  // #withPreferences
-  organizationName,
-
   // #withProfitLossActions
   toggleProfitLossFilterDrawer: toggleDisplayFilterDrawer,
 }) {
@@ -32,7 +28,6 @@ function ProfitLossSheet({
     displayColumnsType: 'total',
     filterByOption: 'with-transactions',
   });
-
   // Handle submit filter.
   const handleSubmitFilter = (filter) => {
     const _filter = {
@@ -42,7 +37,6 @@ function ProfitLossSheet({
     };
     setFilter(_filter);
   };
-
   // Handle number format submit.
   const handleNumberFormatSubmit = (numberFormat) => {
     setFilter({
@@ -64,19 +58,15 @@ function ProfitLossSheet({
         numberFormat={filter.numberFormat}
         onNumberFormatSubmit={handleNumberFormatSubmit}
       />
-      {/* <ProfitLossSheetLoadingBar /> */}
+      <ProfitLossSheetLoadingBar />
       {/* <ProfitLossSheetAlerts /> */}
 
       <DashboardPageContent>
-        <div class="financial-statement">
         <ProfitLossSheetHeader
           pageFilter={filter}
           onSubmitFilter={handleSubmitFilter}
         />
-          <div class="financial-statement__body">
+        <ProfitLossBody />
-            <ProfitLossSheetTable companyName={organizationName} />
-          </div>
-        </div>
       </DashboardPageContent>
     </ProfitLossSheetProvider>
   );
@@ -85,7 +75,4 @@ function ProfitLossSheet({
 export default compose(
   withDashboardActions,
   withProfitLossActions,
-  withCurrentOrganization(({ organization }) => ({
-    organizationName: organization.name,
-  })),
 )(ProfitLossSheet);

src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import moment from 'moment';
 import { Formik, Form } from 'formik';
 import { FormattedMessage as T } from 'components';

src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js

@@ -17,7 +17,7 @@ export default function ProfitLossSheetTable({
 }) {
   // Profit/Loss sheet context.
   const {
-    profitLossSheet: { table },
+    profitLossSheet: { table, query },
     isLoading,
   } = useProfitLossSheetContext();
 
@@ -34,11 +34,11 @@ export default function ProfitLossSheetTable({
     <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}
     >
       <ProfitLossDataTable
         columns={tableColumns}

src/containers/FinancialStatements/reducers.js

@@ -1,32 +1,9 @@
-import React from 'react';
+containers/FinancialStatements/reducersimport React from 'react';
 import { chain } from 'lodash';
 import moment from 'moment';
 import { FormattedMessage as T } from 'components';
 import intl from 'react-intl-universal';
 
-export const balanceSheetRowsReducer = (accounts) => {
-  return accounts.map((account) => {
-    return {
-      ...account,
-      children: balanceSheetRowsReducer([
-        ...(account.children ? account.children : []),
-        ...(account.total && account.children && account.children.length > 0
-          ? [
-              {
-                name: intl.get('total_name', { name: account.name }),
-                row_types: ['total-row', account.section_type],
-                total: { ...account.total },
-                ...(account.total_periods && {
-                  total_periods: account.total_periods,
-                }),
-              },
-            ]
-          : []),
-      ]),
-    };
-  });
-};
-
 export const trialBalanceSheetReducer = (sheet) => {
   const results = [];
 
@@ -44,124 +21,6 @@ export const trialBalanceSheetReducer = (sheet) => {
   return results;
 };
 
-export const profitLossSheetReducer = (profitLoss) => {
-  const results = [];
-
-  if (profitLoss.income) {
-    results.push({
-      name: <T id={'income'} />,
-      total: profitLoss.income.total,
-      children: [
-        ...profitLoss.income.accounts,
-        {
-          name: <T id={'total_income'} />,
-          total: profitLoss.income.total,
-          total_periods: profitLoss.income.total_periods,
-          rowTypes: ['income_total', 'section_total', 'total'],
-        },
-      ],
-      total_periods: profitLoss.income.total_periods,
-    });
-  }
-  if (profitLoss.cost_of_sales) {
-    results.push({
-      name: <T id={'cost_of_sales'} />,
-      total: profitLoss.cost_of_sales.total,
-      children: [
-        ...profitLoss.cost_of_sales.accounts,
-        {
-          name: <T id={'total_cost_of_sales'} />,
-          total: profitLoss.cost_of_sales.total,
-          total_periods: profitLoss.cost_of_sales.total_periods,
-          rowTypes: ['cogs_total', 'section_total', 'total'],
-        },
-      ],
-      total_periods: profitLoss.cost_of_sales.total_periods,
-    });
-  }
-  if (profitLoss.gross_profit) {
-    results.push({
-      name: <T id={'gross_profit'} />,
-      total: profitLoss.gross_profit.total,
-      total_periods: profitLoss.gross_profit.total_periods,
-      rowTypes: ['gross_total', 'section_total', 'total'],
-    });
-  }
-  if (profitLoss.expenses) {
-    results.push({
-      name: <T id={'expenses'} />,
-      total: profitLoss.expenses.total,
-      children: [
-        ...profitLoss.expenses.accounts,
-        {
-          name: <T id={'total_expenses'} />,
-          total: profitLoss.expenses.total,
-          total_periods: profitLoss.expenses.total_periods,
-          rowTypes: ['expenses_total', 'section_total', 'total'],
-        },
-      ],
-      total_periods: profitLoss.expenses.total_periods,
-    });
-  }
-  if (profitLoss.operating_profit) {
-    results.push({
-      name: <T id={'net_operating_income'} />,
-      total: profitLoss.operating_profit.total,
-      total_periods: profitLoss.income.total_periods,
-      rowTypes: ['net_operating_total', 'section_total', 'total'],
-    });
-  }
-  if (profitLoss.other_income) {
-    results.push({
-      
-      name:<T id={'other_income'}/>,
-      total: profitLoss.other_income.total,
-      total_periods: profitLoss.other_income.total_periods,
-      children: [
-        ...profitLoss.other_income.accounts,
-        {
-          name: <T id={'total_other_income'} />,
-          total: profitLoss.other_income.total,
-          total_periods: profitLoss.other_income.total_periods,
-          rowTypes: ['expenses_total', 'section_total', 'total'],
-        },
-      ],
-    });
-  }
-  if (profitLoss.other_expenses) {
-    results.push({
-      name: <T id={'other_expenses'} />,
-      total: profitLoss.other_expenses.total,
-      total_periods: profitLoss.other_expenses.total_periods,
-      children: [
-        ...profitLoss.other_expenses.accounts,
-        {
-          name: <T id={'total_other_expenses'} />,
-          total: profitLoss.other_expenses.total,
-          total_periods: profitLoss.other_expenses.total_periods,
-          rowTypes: ['expenses_total', 'section_total', 'total'],
-        },
-      ],
-    });
-  }
-  if (profitLoss.net_other_income) {
-    results.push({
-      name: <T id={'net_other_income'} />,
-      total: profitLoss.net_other_income.total,
-      total_periods: profitLoss.net_other_income.total_periods,
-      rowTypes: ['net_other_income', 'section_total', 'total'],
-    });
-  }
-  if (profitLoss.net_income) {
-    results.push({
-      name: <T id={'net_income'} />,
-      total: profitLoss.net_income.total,
-      total_periods: profitLoss.net_income.total_periods,
-      rowTypes: ['net_income_total', 'section_total', 'total'],
-    });
-  }
-  return results;
-};
 
 export const journalTableRowsReducer = (journal) => {
   const TYPES = {

src/hooks/query/financialReports.js

@@ -1,8 +1,6 @@
 import { useRequestQuery } from '../useQueryRequest';
 import {
   trialBalanceSheetReducer,
-  balanceSheetRowsReducer,
-  profitLossSheetReducer,
   generalLedgerTableRowsReducer,
   journalTableRowsReducer,
   ARAgingSummaryTableRowsMapper,
@@ -28,27 +26,9 @@ export function useBalanceSheet(query, props) {
       },
     },
     {
-      select: (res) => ({
+      select: (res) => res.data,
-        table: res.data.table
-      }),
-      defaultData: {
-        table: {},
-      },
       ...props,
     },
-    // {
-    //   select: (res) => ({
-    //     tableRows: balanceSheetRowsReducer(res.data.data),
-    //     ...res.data,
-    //   }),
-    //   defaultData: {
-    //     data: [],
-    //     columns: [],
-    //     query: {},
-    //     tableRows: [],
-    //   },
-    //   ...props,
-    // },
   );
 }
 
@@ -62,7 +42,6 @@ export function useTrialBalanceSheet(query, props) {
       method: 'get',
       url: '/financial_statements/trial_balance_sheet',
       params: query,
-      
     },
     {
       select: (res) => ({
@@ -94,12 +73,7 @@ export function useProfitLossSheet(query, props) {
       },
     },
     {
-      select: (res) => ({
+      select: (res) => res.data,
-        table: res.data.table
-      }),
-      defaultData: {
-        table: {},
-      },
       ...props,
     },
   );

src/style/pages/FinancialStatements/FinancialReportPage.scss

@@ -4,35 +4,8 @@
 .dashboard__insider--financial-report{
 
   .alert-compute-running{
-    position: relative;
-    padding: 8px 20px;
-    border-radius: 2px;
-    background-color: #fdecda;
-    color: #342515;
-    font-size: 13px;
     
-    button{
-      font-size: 12px;
-      min-height: 16px;
-      padding: 0 4px;
-
-      &,
-      &:hover{
-        color: #824400;
-        text-decoration: underline;
-      }
-    }
-    svg{
-      margin-right: 6px;
-      position: relative;
-      top: -2px;
-      fill: #975f19;
-    }
   }
 
-  .financial-progressbar{
+  
-    .progress-materializecss{
-      top: -2px;
-    }
-  }
 }