fix : cash flow statment & inventoey item Details.

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>
+  );
+}