fix : cash flow statment & inventoey item Details.

client/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatement.js

@@ -12,7 +12,10 @@ import CashFlowStatementActionsBar from './CashFlowStatementActionsBar';
 import withSettings from 'containers/Settings/withSettings';
 import withCashFlowStatementActions from './withCashFlowStatementActions';
 import { CashFlowStatementProvider } from './CashFlowStatementProvider';
-import { CashFlowStatementLoadingBar } from './components';
+import {
+  CashFlowStatementLoadingBar,
+  CashFlowStatementAlerts,
+} from './components';
 
 import { compose } from 'utils';
 
@@ -65,6 +68,7 @@ function CashFlowStatement({
         onNumberFormatSubmit={handleNumberFormatSubmit}
       />
       <CashFlowStatementLoadingBar />
+      <CashFlowStatementAlerts />
       <DashboardPageContent>
         <FinancialStatement>
           <CashFlowStatementHeader

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { If } from 'components';
+import { Button } from '@blueprintjs/core';
+import { Icon, If } from 'components';
 
 import { dynamicColumns } from './utils';
 import { useCashFlowStatementContext } from './CashFlowStatementProvider';
@@ -10,10 +11,13 @@ import FinancialLoadingBar from '../FinancialLoadingBar';
  */
 export const useCashFlowStatementColumns = () => {
   const {
-    cashFlowStatement: { columns, data },
+    cashFlowStatement: { columns, tableRows },
   } = useCashFlowStatementContext();
 
-  return React.useMemo(() => dynamicColumns(columns, data), [columns, data]);
+  return React.useMemo(
+    () => dynamicColumns(columns, tableRows),
+    [columns, tableRows],
+  );
 };
 
 /**
@@ -27,3 +31,34 @@ export function CashFlowStatementLoadingBar() {
     </If>
   );
 }
+
+/**
+ * Cash flow statement alter
+ */
+export function CashFlowStatementAlerts() {
+  const { cashFlowStatement, isCashFlowLoading, refetchCashFlow } =
+    useCashFlowStatementContext();
+
+  // Handle refetch the report sheet.
+  const handleRecalcReport = () => {
+    refetchCashFlow();
+  };
+
+  // Can't display any error if the report is loading
+  if (isCashFlowLoading) {
+    return null;
+  }
+
+  return (
+    <If condition={cashFlowStatement.meta.is_cost_compute_running}>
+      <div className="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/CashFlowStatement/utils.js

@@ -28,6 +28,7 @@ const dateRangeMapper = (data, index, column) => ({
   width: getColumnWidth(data, `cells.${index}.value`, { minWidth: 100 }),
   className: `date-period ${column.key}`,
   disableSortBy: true,
+  textOverview: true,
 });
 
 /**
@@ -40,11 +41,10 @@ const totalMapper = (data, index, column) => ({
   className: 'total',
   textOverview: true,
   Cell: CellTextSpan,
-  width: getColumnWidth(data, `cells[${index}].value`, { minWidth: 100  }),
+  width: getColumnWidth(data, `cells[${index}].value`, { minWidth: 100 }),
   disableSortBy: true,
 });
 
-
 /**
  * Detarmines the given string starts with `date-range` string.
  */