fix(webapp): show loading message of cost computing job on financial reports

.env.example

@@ -47,6 +47,3 @@ AGENDASH_AUTH_PASSWORD=123123
 SIGNUP_DISABLED=false
 SIGNUP_ALLOWED_DOMAINS=
 SIGNUP_ALLOWED_EMAILS=
-
-# API rate limit (points,duration,block duration).
-API_RATE_LIMIT=120,60,600

packages/server/src/config/index.ts

@@ -1,12 +1,9 @@
 import dotenv from 'dotenv';
 import path from 'path';
-import { toInteger } from 'lodash';
 import { castCommaListEnvVarToArray, parseBoolean } from '@/utils';
 
 dotenv.config();
 
-const API_RATE_LIMIT = process.env.API_RATE_LIMIT?.split(',') || [];
-
 module.exports = {
   /**
    * Your favorite port
@@ -133,9 +130,9 @@ module.exports = {
       blockDuration: 60 * 15,
     },
     requests: {
-      points: API_RATE_LIMIT[0] ? toInteger(API_RATE_LIMIT[0]) : 120,
+      points: 60,
-      duration: API_RATE_LIMIT[1] ? toInteger(API_RATE_LIMIT[1]) : 60,
+      duration: 60,
-      blockDuration: API_RATE_LIMIT[2] ? toInteger(API_RATE_LIMIT[2]) : 60 * 10,
+      blockDuration: 60 * 10,
     },
   },
 

packages/webapp/src/containers/FinancialStatements/BalanceSheet/components.tsx

@@ -21,19 +21,21 @@ export function BalanceSheetAlerts() {
     refetchBalanceSheet();
   };
   // Can't display any error if the report is loading.
-  if (isLoading) return null;
+  if (isLoading) {
-
+    return null;
+  }
+  // Can't continue if the cost compute job is not running.
+  if (!balanceSheet.meta.is_cost_compute_running) {
+    return null;
+  }
   return (
-    <If condition={balanceSheet.meta.is_cost_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>
     </FinancialComputeAlert>
-    </If>
   );
 }
 

packages/webapp/src/containers/FinancialStatements/CashFlowStatement/components.tsx

@@ -7,6 +7,7 @@ import FinancialLoadingBar from '../FinancialLoadingBar';
 
 import { dynamicColumns } from './dynamicColumns';
 import { useCashFlowStatementContext } from './CashFlowStatementProvider';
+import { FinancialComputeAlert } from '../FinancialReportPage';
 
 /**
  * Retrieve cash flow statement columns.
@@ -27,6 +28,7 @@ export const useCashFlowStatementColumns = () => {
  */
 export function CashFlowStatementLoadingBar() {
   const { isCashFlowFetching } = useCashFlowStatementContext();
+
   return (
     <If condition={isCashFlowFetching}>
       <FinancialLoadingBar />
@@ -45,20 +47,21 @@ export function CashFlowStatementAlerts() {
   const handleRecalcReport = () => {
     refetchCashFlow();
   };
-
   // Can't display any error if the report is loading
   if (isCashFlowLoading) {
     return null;
   }
+  // Can't continue if the cost compute is not running.
+  if (!cashFlowStatement.meta.is_cost_compute_running) {
+    return null;
+  }
   return (
-    <If condition={cashFlowStatement.meta.is_cost_compute_running}>
+    <FinancialComputeAlert>
-      <div className="alert-compute-running">
       <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={'refresh'} />
       </Button>
-      </div>
+    </FinancialComputeAlert>
-    </If>
   );
 }

packages/webapp/src/containers/FinancialStatements/GeneralLedger/components.tsx

@@ -8,6 +8,7 @@ import { getColumnWidth } from '@/utils';
 import { useGeneralLedgerContext } from './GeneralLedgerProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 
+import { FinancialComputeAlert } from '../FinancialReportPage';
 import { Align } from '@/constants';
 
 /**
@@ -116,17 +117,18 @@ export function GeneralLedgerSheetAlerts() {
   if (isLoading) {
     return null;
   }
-
+  // Can't continue if the cost compute job is not running.
+  if (!generalLedger.meta.is_cost_compute_running) {
+    return null;
+  }
   return (
-    <If condition={generalLedger.meta.is_cost_compute_running}>
+    <FinancialComputeAlert>
-      <div class="alert-compute-running">
       <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={'refresh'} />
       </Button>
-      </div>
+    </FinancialComputeAlert>
-    </If>
   );
 }
 

packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/components.tsx

@@ -6,6 +6,7 @@ import { Icon, If, FormattedMessage as T } from '@/components';
 import { dynamicColumns } from './utils';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 import { useInventoryItemDetailsContext } from './InventoryItemDetailsProvider';
+import { FinancialComputeAlert } from '../FinancialReportPage';
 
 /**
  * Retrieve inventory item details columns.
@@ -53,17 +54,19 @@ export function InventoryItemDetailsAlerts() {
   if (isInventoryItemDetailsLoading) {
     return null;
   }
+  // Can't continue if the cost compute job is running.
+  if (!inventoryItemDetails.meta.is_cost_compute_running) {
+    return null;
+  }
 
   return (
-    <If condition={inventoryItemDetails.meta.is_cost_compute_running}>
+    <FinancialComputeAlert>
-      <div className="alert-compute-running">
       <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={'refresh'} />
       </Button>
-      </div>
+    </FinancialComputeAlert>
-    </If>
   );
 }

packages/webapp/src/containers/FinancialStatements/Journal/components.tsx

@@ -7,6 +7,7 @@ import { Button } from '@blueprintjs/core';
 import { Icon, If, FormattedMessage as T } from '@/components';
 import { useJournalSheetContext } from './JournalProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';
+import { FinancialComputeAlert } from '../FinancialReportPage';
 
 import { Align } from '@/constants';
 
@@ -99,17 +100,18 @@ export function JournalSheetAlerts() {
   if (isLoading) {
     return null;
   }
-
+  // Can't continue if the cost compute job is running.
+  if (!journalSheet.meta.is_cost_compute_running) {
+    return null;
+  }
   return (
-    <If condition={journalSheet.meta.is_cost_compute_running}>
+    <FinancialComputeAlert>
-      <div class="alert-compute-running">
       <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={'refresh'} />
       </Button>
-      </div>
+    </FinancialComputeAlert>
-    </If>
   );
 }

packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.tsx

@@ -13,7 +13,7 @@ import withProfitLossActions from './withProfitLossActions';
 
 import { useProfitLossSheetQuery } from './utils';
 import { ProfitLossSheetProvider } from './ProfitLossProvider';
-import { ProfitLossSheetLoadingBar } from './components';
+import { ProfitLossSheetAlerts, ProfitLossSheetLoadingBar } from './components';
 import { ProfitLossBody } from './ProfitLossBody';
 
 /**
@@ -58,7 +58,7 @@ function ProfitLossSheet({
         onNumberFormatSubmit={handleNumberFormatSubmit}
       />
       <ProfitLossSheetLoadingBar />
-      {/* <ProfitLossSheetAlerts /> */}
+      <ProfitLossSheetAlerts />
 
       <DashboardPageContent>
         <ProfitLossSheetHeader

packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/components.tsx

@@ -4,6 +4,7 @@ import { Button } from '@blueprintjs/core';
 import { Icon, If, FormattedMessage as T } from '@/components';
 
 import { useProfitLossSheetContext } from './ProfitLossProvider';
+import { FinancialComputeAlert } from '../FinancialReportPage';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 
 /**
@@ -34,17 +35,18 @@ export function ProfitLossSheetAlerts() {
   if (isLoading) {
     return null;
   }
-
+  // Can't continue if the cost compute job is not running.
+  if (!profitLossSheet.meta.is_cost_compute_running) {
+    return null;
+  }
   return (
-    <If condition={profitLossSheet.meta.is_cost_compute_running}>
+    <FinancialComputeAlert>
-      <div class="alert-compute-running">
       <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={'refresh'} />
       </Button>
-      </div>
+    </FinancialComputeAlert>
-    </If>
   );
 }

packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/components.tsx

@@ -8,9 +8,9 @@ import { getColumnWidth } from '@/utils';
 import { CellTextSpan } from '@/components/Datatable/Cells';
 import { If, Icon, FormattedMessage as T } from '@/components';
 import { useTrialBalanceSheetContext } from './TrialBalanceProvider';
+import { FinancialComputeAlert } from '../FinancialReportPage';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 
-
 /**
  * Retrieves the credit column.
  */
@@ -114,17 +114,19 @@ export function TrialBalanceSheetAlerts() {
   if (isLoading) {
     return null;
   }
+  // Can't continue if the cost compute job is not running.
+  if (!meta.is_cost_compute_running) {
+    return null;
+  }
 
   return (
-    <If condition={meta.is_cost_compute_running}>
+    <FinancialComputeAlert>
-      <div class="alert-compute-running">
       <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={'refresh'} />
       </Button>
-      </div>
+    </FinancialComputeAlert>
-    </If>
   );
 }

packages/webapp/src/containers/GlobalErrors/GlobalErrors.tsx

@@ -9,7 +9,6 @@ import { compose } from '@/utils';
 
 let toastKeySessionExpired;
 let toastKeySomethingWrong;
-let toastTooManyRequests;
 
 function GlobalErrors({
   // #withGlobalErrors
@@ -42,18 +41,6 @@ function GlobalErrors({
       toastKeySomethingWrong,
     );
   }
-  if (globalErrors.too_many_requests) {
-    toastTooManyRequests = AppToaster.show(
-      {
-        message: intl.get('global_error.too_many_requests'),
-        intent: Intent.DANGER,
-        onDismiss: () => {
-          globalErrorsSet({ too_many_requests: false });
-        },
-      },
-      toastTooManyRequests,
-    );
-  }
   if (globalErrors.access_denied) {
     toastKeySomethingWrong = AppToaster.show(
       {

packages/webapp/src/hooks/useRequest.tsx

@@ -60,9 +60,6 @@ export default function useApiRequest() {
         if (status === 403) {
           setGlobalErrors({ access_denied: true });
         }
-        if (status === 429) {
-          setGlobalErrors({ too_many_requests: true });
-        }
         if (status === 400) {
           const lockedError = data.errors.find(
             (error) => error.type === 'TRANSACTIONS_DATE_LOCKED',

packages/webapp/src/lang/en/index.json

@@ -2292,6 +2292,5 @@
   "sidebar.projects": "Projects",
   "sidebar.new_project": "New Project",
   "sidebar.new_time_entry": "New Time Entry",
-  "sidebar.project_profitability_summary": "Project Profitability Summary",
+  "sidebar.project_profitability_summary": "Project Profitability Summary"
-  "global_error.too_many_requests": "Too many requests"
 }

packages/webapp/src/style/components/BigcapitalLoading.scss

@@ -1,12 +1,10 @@
-@import '@/style/variables.scss';
-
 .bigcapital-loading {
   height: 100%;
   width: 100%;
   position: fixed;
   display: flex;
   background: #fff;
-  z-index: $zindex-dashboard-splash-screen;
+  z-index: 999999;
 
   .center {
     width: auto;

packages/webapp/src/style/variables.scss

@@ -45,7 +45,3 @@ $form-check-input-checked-color: #fff;
 $form-check-input-checked-bg-color: $blue1;
 $form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' xml:space='preserve'><g id='small_tick_1_'><g><path fill='#{$form-check-input-checked-color}' fill-rule='evenodd' clip-rule='evenodd' d='M12,5c-0.28,0-0.53,0.11-0.71,0.29L7,9.59L4.71,7.29C4.53,7.11,4.28,7,4,7C3.45,7,3,7.45,3,8c0,0.28,0.11,0.53,0.29,0.71l3,3C6.47,11.89,6.72,12,7,12s0.53-0.11,0.71-0.29l5-5C12.89,6.53,13,6.28,13,6C13,5.45,12.55,5,12,5z'/></g></g></svg>") !default;
 $form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' xml:space='preserve'><g id='small_tick_1_'><g><path fill='#{$form-check-input-checked-color}' fill-rule='evenodd' clip-rule='evenodd' d='M11,7H5C4.45,7,4,7.45,4,8c0,0.55,0.45,1,1,1h6c0.55,0,1-0.45,1-1C12,7.45,11.55,7,11,7z'/></g></g></svg>") !default;
-
-// z-indexs
-$zindex-dashboard-splash-screen: 39;
-$zindex-toast: 40;