diff --git a/client/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatement.js b/client/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatement.js
index dbf686836..514e4838d 100644
--- a/client/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatement.js
+++ b/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
diff --git a/client/src/containers/FinancialStatements/CashFlowStatement/components.js b/client/src/containers/FinancialStatements/CashFlowStatement/components.js
index 91c328871..5097af88f 100644
--- a/client/src/containers/FinancialStatements/CashFlowStatement/components.js
+++ b/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>
+  );
+}
diff --git a/client/src/containers/FinancialStatements/CashFlowStatement/utils.js b/client/src/containers/FinancialStatements/CashFlowStatement/utils.js
index 16c5a710a..3e259cba0 100644
--- a/client/src/containers/FinancialStatements/CashFlowStatement/utils.js
+++ b/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.
  */
diff --git a/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetails.js b/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetails.js
index 696d5b6cf..21d8159c5 100644
--- a/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetails.js
+++ b/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetails.js
@@ -12,7 +12,10 @@ import InventoryItemDetailsTable from './InventoryItemDetailsTable';
 import withInventoryItemDetailsActions from './withInventoryItemDetailsActions';
 import withSettings from 'containers/Settings/withSettings';
 import { InventoryItemDetailsProvider } from './InventoryItemDetailsProvider';
-import { InventoryItemDetailsLoadingBar } from './components';
+import {
+  InventoryItemDetailsLoadingBar,
+  InventoryItemDetailsAlerts,
+} from './components';
 
 import { compose } from 'utils';
 
@@ -26,7 +29,6 @@ function InventoryItemDetails({
   //#withInventoryItemDetailsActions
   toggleInventoryItemDetailsFilterDrawer: toggleFilterDrawer,
 }) {
- 
   const [filter, setFilter] = useState({
     fromDate: moment().startOf('year').format('YYYY-MM-DD'),
     toDate: moment().endOf('year').format('YYYY-MM-DD'),
@@ -58,6 +60,8 @@ function InventoryItemDetails({
         onNumberFormatSubmit={handleNumberFormatSubmit}
       />
       <InventoryItemDetailsLoadingBar />
+      <InventoryItemDetailsAlerts />
+      
       <DashboardPageContent>
         <FinancialStatement>
           <div className={'financial-statement--inventory-details'}>
diff --git a/client/src/containers/FinancialStatements/InventoryItemDetails/components.js b/client/src/containers/FinancialStatements/InventoryItemDetails/components.js
index 95c378daa..58e44e528 100644
--- a/client/src/containers/FinancialStatements/InventoryItemDetails/components.js
+++ b/client/src/containers/FinancialStatements/InventoryItemDetails/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 FinancialLoadingBar from '../FinancialLoadingBar';
@@ -10,14 +11,17 @@ import { useInventoryItemDetailsContext } from './InventoryItemDetailsProvider';
  */
 export const useInventoryItemDetailsColumns = () => {
   const {
-    inventoryItemDetails: { columns, data },
+    inventoryItemDetails: { columns, tableRows },
   } = useInventoryItemDetailsContext();
 
-  return React.useMemo(() => dynamicColumns(columns, data), [columns, data]);
+  return React.useMemo(
+    () => dynamicColumns(columns, tableRows),
+    [columns, tableRows],
+  );
 };
 
 /**
- * Cash inventory item details  loading bar.
+ * inventory item details  loading bar.
  */
 export function InventoryItemDetailsLoadingBar() {
   const { isInventoryItemDetailsLoading } = useInventoryItemDetailsContext();
@@ -27,3 +31,37 @@ export function InventoryItemDetailsLoadingBar() {
     </If>
   );
 }
+
+/**
+ * inventory item details alerts
+ */
+export function InventoryItemDetailsAlerts() {
+  const {
+    inventoryItemDetails,
+    isInventoryItemDetailsLoading,
+    inventoryItemDetailsRefetch,
+  } = useInventoryItemDetailsContext();
+
+  // Handle refetch the report sheet.
+  const handleRecalcReport = () => {
+    inventoryItemDetailsRefetch();
+  };
+
+  // Can't display any error if the report is loading
+  if (isInventoryItemDetailsLoading) {
+    return null;
+  }
+ 
+  return (
+    <If condition={inventoryItemDetails.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>
+  );
+}
diff --git a/client/src/containers/FinancialStatements/InventoryItemDetails/utils.js b/client/src/containers/FinancialStatements/InventoryItemDetails/utils.js
index b0798ece3..e65fbf0a0 100644
--- a/client/src/containers/FinancialStatements/InventoryItemDetails/utils.js
+++ b/client/src/containers/FinancialStatements/InventoryItemDetails/utils.js
@@ -27,6 +27,7 @@ const columnsMapper = (data, index, column) => ({
     magicSpacing: 10,
   }),
   disableSortBy: true,
+  // textOverview: true,
 });
 
 /**
diff --git a/client/src/hooks/query/financialReports.js b/client/src/hooks/query/financialReports.js
index 476a3f1af..1826269c2 100644
--- a/client/src/hooks/query/financialReports.js
+++ b/client/src/hooks/query/financialReports.js
@@ -420,13 +420,15 @@ export function useCashFlowStatementReport(query, props) {
     {
       select: (res) => ({
         columns: res.data.table.columns,
-        data: res.data.table.data,
+        query: res.data.query,
+        meta: res.data.meta,
         tableRows: res.data.table.data,
       }),
       defaultData: {
         tableRows: [],
-        data: [],
         columns: [],
+        query: {},
+        meta: {},
       },
       ...props,
     },
@@ -436,7 +438,7 @@ export function useCashFlowStatementReport(query, props) {
 /**
  * Retrieve inventory item detail report.
  */
- export function useInventoryItemDetailsReport(query, props) {
+export function useInventoryItemDetailsReport(query, props) {
   return useRequestQuery(
     [t.FINANCIAL_REPORT, t.INVENTORY_ITEM_DETAILS, query],
     {
@@ -450,15 +452,17 @@ export function useCashFlowStatementReport(query, props) {
     {
       select: (res) => ({
         columns: res.data.table.columns,
-        data: res.data.table.data,
+        query: res.data.query,
+        meta: res.data.meta,
         tableRows: res.data.table.data,
       }),
       defaultData: {
         tableRows: [],
-        data: [],
         columns: [],
+        query: {},
+        meta: {},
       },
       ...props,
     },
   );
-}
\ No newline at end of file
+}