feat: integrate balance sheet and P&L sheet with new API.

src/containers/FinancialStatements/BalanceSheet/components.js

@@ -1,9 +1,12 @@
 import React from 'react';
 import { Button } from '@blueprintjs/core';
-import { Icon, If } from 'components';
+
+import { FormattedMessage as T, Icon, If } from 'components';
+
 import { useBalanceSheetContext } from './BalanceSheetProvider';
-import { FormattedMessage as T } from 'components';
 import FinancialLoadingBar from '../FinancialLoadingBar';
+import { FinancialComputeAlert } from '../FinancialReportPage';
+
 import { dynamicColumns } from './utils';
 
 /**
@@ -22,14 +25,14 @@ export function BalanceSheetAlerts() {
 
   return (
     <If condition={balanceSheet.meta.is_cost_compute_running}>
-      <div class="alert-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>
-      </div>
+      </FinancialComputeAlert>
     </If>
   );
 }
@@ -57,7 +60,7 @@ export const useBalanceSheetColumns = () => {
   } = useBalanceSheetContext();
 
   return React.useMemo(
-    () => dynamicColumns(table?.columns || [], table?.rows || []),
+    () => dynamicColumns(table.columns, table.rows),
     [table],
   );
 };