feat(FinancialReports): add alert cost compute transactions is running.

client/src/containers/FinancialStatements/APAgingSummary/APAgingSummary.js

@@ -1,7 +1,7 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import moment from 'moment';
 
-import 'style/pages/FinancialStatements/ARAgingSummary.scss';
+import 'style/pages/FinancialStatements/APAgingSummary.scss';
 
 import { FinancialStatement } from 'components';
 

client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js

@@ -7,7 +7,7 @@ import BalanceSheetHeader from './BalanceSheetHeader';
 import BalanceSheetTable from './BalanceSheetTable';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import BalanceSheetActionsBar from './BalanceSheetActionsBar';
-
+import { BalanceSheetAlerts } from './components';
 import { FinancialStatement } from 'components';
 
 import withBalanceSheetActions from './withBalanceSheetActions';
@@ -63,6 +63,8 @@ function BalanceSheet({
         numberFormat={filter.numberFormat}
         onNumberFormatSubmit={handleNumberFormatSubmit}
       />
+      <BalanceSheetAlerts />
+
       <DashboardPageContent>
         <FinancialStatement>
           <BalanceSheetHeader

client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js

@@ -13,6 +13,9 @@ import withBalanceSheetActions from './withBalanceSheetActions';
 import { compose } from 'utils';
 import BalanceSheetHeaderGeneralPanal from './BalanceSheetHeaderGeneralPanal';
 
+/**
+ * Balance sheet header.
+ */
 function BalanceSheetHeader({
   // #ownProps
   onSubmitFilter,

client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetProvider.js

@@ -1,5 +1,5 @@
 import React, { createContext, useContext } from 'react';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import FinancialReportPage from '../FinancialReportPage';
 import { useBalanceSheet } from 'hooks/query';
 import { transformFilterFormToQuery } from '../common';
 
@@ -7,7 +7,9 @@ const BalanceSheetContext = createContext();
 
 function BalanceSheetProvider({ filter, ...props }) {
   // Transformes the given filter to query.
-  const query = React.useMemo(() => transformFilterFormToQuery(filter), [filter]);
+  const query = React.useMemo(() => transformFilterFormToQuery(filter), [
+    filter,
+  ]);
 
   // Fetches the balance sheet report.
   const { data: balanceSheet, isFetching, refetch } = useBalanceSheet(query);
@@ -16,17 +18,19 @@ function BalanceSheetProvider({ filter, ...props }) {
     balanceSheet,
     isLoading: isFetching,
     refetchBalanceSheet: refetch,
-    
+
     query,
     filter,
   };
   return (
-    <DashboardInsider name={'balance-sheet'}>
+    <FinancialReportPage
+      name={'balance-sheet'}
+    >
       <BalanceSheetContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </FinancialReportPage>
   );
 }
 
 const useBalanceSheetContext = () => useContext(BalanceSheetContext);
 
-export { BalanceSheetProvider, useBalanceSheetContext };
+export { BalanceSheetProvider, useBalanceSheetContext };

client/src/containers/FinancialStatements/BalanceSheet/components.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Button } from '@blueprintjs/core';
+import { Icon, If } from 'components';
+import { useBalanceSheetContext } from './BalanceSheetProvider';
+
+/**
+ * Balance sheet alerts.
+ */
+export function BalanceSheetAlerts() {
+  const {
+    isLoading,
+    refetchBalanceSheet,
+    balanceSheet,
+  } = useBalanceSheetContext();
+
+  // Handle recalculate the report button.
+  const handleRecalcReport = () => {
+    refetchBalanceSheet();
+  };
+  // Can't display any error if the report is loading.
+  if (isLoading) { return null; }
+
+  return (
+    <If condition={balanceSheet.meta.is_cost_compute_running}>
+      <div class="alert-compute-running">
+        <Icon icon="info-block" iconSize={12} /> Just a moment! We're
+        calculating your cost transactions and this doesn't take much time.
+        Please check after sometime.{' '}
+
+        <Button onClick={handleRecalcReport} minimal={true} small={true}>
+          Refresh
+        </Button>
+      </div>
+    </If>
+  );
+}

client/src/containers/FinancialStatements/FinancialAccountsFilter.js

@@ -15,7 +15,6 @@ import { Col, Row, ListSelect, MODIFIER } from 'components';
 import { filterAccountsOptions } from './common';
 
 
-
 export default function FinancialAccountsFilter({ ...restProps }) {
   const SUBMENU_POPOVER_MODIFIERS = {
     flip: { boundariesElement: 'viewport', padding: 20 },

client/src/containers/FinancialStatements/FinancialReportPage.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import classNames from 'classnames';
+import { DashboardInsider } from 'components';
+import { CLASSES } from 'common/classes';
+
+import 'style/pages/FinancialStatements/FinancialReportPage.scss';
+
+/**
+ * Financial report page.
+ */
+export default function FinancialReportPage(props) {
+  return (
+    <DashboardInsider
+      {...props}
+      className={classNames(CLASSES.FINANCIAL_REPORT_INSIDER, props.className)}
+    />
+  );
+}