feat(FinancialReports): add alert cost compute transactions is running.

client/src/common/classes.js

@@ -66,6 +66,8 @@ const CLASSES = {
   PREFERENCES_PAGE_INSIDE_CONTENT_CURRENCIES: 'preferences-page__inside-content--currencies',
   PREFERENCES_PAGE_INSIDE_CONTENT_ACCOUNTANT: 'preferences-page__inside-content--accountant',
 
+  FINANCIAL_REPORT_INSIDER: 'dashboard__insider--financial-report',
+
   ...Classes,
   CARD: 'card',
 };

client/src/common/quickNewOptions.js

@@ -1,6 +1,6 @@
 export default [
   { path: 'invoices/new', name: 'Sale invoice' },
-  { path: 'bill//new', name: 'Purchase invoice' },
+  { path: 'bills//new', name: 'Purchase invoice' },
   { path: 'make-journal-entry', name: 'Manual journal' },
   { path: 'expenses/new', name: 'Expense'  },
   { path: 'customers/new', name: 'Customer' },

client/src/components/Dashboard/DashboardInsider.js

@@ -7,13 +7,14 @@ export default function DashboardInsider({
   children,
   name,
   mount = false,
+  className,
 }) {
   return (
     <div className={classnames({
       'dashboard__insider': true,
       'dashboard__insider--loading': loading,
       [`dashboard__insider--${name}`]: !!name,
-    })}>
+    }, className)}>
       <LoadingIndicator loading={loading} mount={mount}>
         { children }
       </LoadingIndicator>

client/src/config/sidebarMenu.js

@@ -162,11 +162,11 @@ export default [
         href: '/financial-reports/profit-loss-sheet',
       },
       {
-        text: <T id={'receivable_a_r'} />,
+        text: <T id={'AR_Aging_Summary'} />,
         href: '/financial-reports/receivable-aging-summary',
       },
       {
-        text: <T id={'payable_a_p'} />,
+        text: <T id={'AP_Aging_Summary'} />,
         href: '/financial-reports/payable-aging-summary',
       },
     ],

client/src/containers/FinancialStatements/APAgingSummary/APAgingSummary.js

@@ -1,7 +1,7 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import moment from 'moment';
 
-import 'style/pages/FinancialStatements/ARAgingSummary.scss';
+import 'style/pages/FinancialStatements/APAgingSummary.scss';
 
 import { FinancialStatement } from 'components';
 

client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js

@@ -7,7 +7,7 @@ import BalanceSheetHeader from './BalanceSheetHeader';
 import BalanceSheetTable from './BalanceSheetTable';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import BalanceSheetActionsBar from './BalanceSheetActionsBar';
-
+import { BalanceSheetAlerts } from './components';
 import { FinancialStatement } from 'components';
 
 import withBalanceSheetActions from './withBalanceSheetActions';
@@ -63,6 +63,8 @@ function BalanceSheet({
         numberFormat={filter.numberFormat}
         onNumberFormatSubmit={handleNumberFormatSubmit}
       />
+      <BalanceSheetAlerts />
+
       <DashboardPageContent>
         <FinancialStatement>
           <BalanceSheetHeader

client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js

@@ -13,6 +13,9 @@ import withBalanceSheetActions from './withBalanceSheetActions';
 import { compose } from 'utils';
 import BalanceSheetHeaderGeneralPanal from './BalanceSheetHeaderGeneralPanal';
 
+/**
+ * Balance sheet header.
+ */
 function BalanceSheetHeader({
   // #ownProps
   onSubmitFilter,

client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetProvider.js

@@ -1,5 +1,5 @@
 import React, { createContext, useContext } from 'react';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import FinancialReportPage from '../FinancialReportPage';
 import { useBalanceSheet } from 'hooks/query';
 import { transformFilterFormToQuery } from '../common';
 
@@ -7,7 +7,9 @@ const BalanceSheetContext = createContext();
 
 function BalanceSheetProvider({ filter, ...props }) {
   // Transformes the given filter to query.
-  const query = React.useMemo(() => transformFilterFormToQuery(filter), [filter]);
+  const query = React.useMemo(() => transformFilterFormToQuery(filter), [
+    filter,
+  ]);
 
   // Fetches the balance sheet report.
   const { data: balanceSheet, isFetching, refetch } = useBalanceSheet(query);
@@ -16,17 +18,19 @@ function BalanceSheetProvider({ filter, ...props }) {
     balanceSheet,
     isLoading: isFetching,
     refetchBalanceSheet: refetch,
-    
+
     query,
     filter,
   };
   return (
-    <DashboardInsider name={'balance-sheet'}>
+    <FinancialReportPage
+      name={'balance-sheet'}
+    >
       <BalanceSheetContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </FinancialReportPage>
   );
 }
 
 const useBalanceSheetContext = () => useContext(BalanceSheetContext);
 
-export { BalanceSheetProvider, useBalanceSheetContext };
+export { BalanceSheetProvider, useBalanceSheetContext };

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Button } from '@blueprintjs/core';
+import { Icon, If } from 'components';
+import { useBalanceSheetContext } from './BalanceSheetProvider';
+
+/**
+ * Balance sheet alerts.
+ */
+export function BalanceSheetAlerts() {
+  const {
+    isLoading,
+    refetchBalanceSheet,
+    balanceSheet,
+  } = useBalanceSheetContext();
+
+  // Handle recalculate the report button.
+  const handleRecalcReport = () => {
+    refetchBalanceSheet();
+  };
+  // Can't display any error if the report is loading.
+  if (isLoading) { return null; }
+
+  return (
+    <If condition={balanceSheet.meta.is_cost_compute_running}>
+      <div class="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/FinancialAccountsFilter.js

@@ -15,7 +15,6 @@ import { Col, Row, ListSelect, MODIFIER } from 'components';
 import { filterAccountsOptions } from './common';
 
 
-
 export default function FinancialAccountsFilter({ ...restProps }) {
   const SUBMENU_POPOVER_MODIFIERS = {
     flip: { boundariesElement: 'viewport', padding: 20 },

client/src/containers/FinancialStatements/FinancialReportPage.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import classNames from 'classnames';
+import { DashboardInsider } from 'components';
+import { CLASSES } from 'common/classes';
+
+import 'style/pages/FinancialStatements/FinancialReportPage.scss';
+
+/**
+ * Financial report page.
+ */
+export default function FinancialReportPage(props) {
+  return (
+    <DashboardInsider
+      {...props}
+      className={classNames(CLASSES.FINANCIAL_REPORT_INSIDER, props.className)}
+    />
+  );
+}

client/src/lang/en/index.js

@@ -466,7 +466,8 @@ export default {
   name_: 'name',
   as: 'As',
   receivable_aging_summary: 'Receivable Aging Summary',
-  receivable_a_r: 'Receivable A/R',
+  AR_Aging_Summary: 'A/R Aging Summary',
+  AP_Aging_Summary: 'A/P Aging Summary',
   customers: 'Customers',
   new_customers: 'New Customers',
   customer_type_: 'Customer type',

client/src/static/json/icons.js

@@ -337,6 +337,12 @@ export default {
     ],
     viewBox: '0 0 24 24',
   },
+  'info-block': {
+    path: [
+      'M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zM7 3h2v2H7V3zm3 10H6v-1h1V7H6V6h3v6h1v1z',
+    ],
+    viewBox: '0 0 16 16',
+  },
   currency: {
     path: [
       'M10.9571,13.44a6.9356,6.9356,0,0,0,0-9.2751,4.8008,4.8008,0,1,1,0,9.2751Zm-5.156.1632a4.8008,4.8008,0,1,1,4.8008-4.8008A4.8008,4.8008,0,0,1,5.8011,13.603Z',

client/src/style/containers/Dashboard/Sidebar.scss

@@ -60,7 +60,7 @@
         font-size: 15px;
 
         &:not([class*="bp3-intent-"]):not(.bp3-minimal) {
-          color: rgba(255, 255, 255, 0.85);
+          color: rgba(255, 255, 255, 0.9);
         }
         &:hover,
         &:focus,

client/src/style/pages/FinancialStatements/APAgingSummary.scss

@@ -0,0 +1,39 @@
+
+.financial-sheet{
+  &--payable-aging-summary{
+
+    .financial-sheet__table{
+
+      .bigcapital-datatable{
+        .tbody,
+        .thead{
+          .tr .td.customer_name ~ .td,
+          .tr .th.customer_name ~ .th{
+            text-align: right;
+          }
+        }
+        .tbody{
+          .tr:not(.no-results) {
+            .td{
+              border-bottom: 0;
+              padding-top: 0.4rem;
+              padding-bottom: 0.4rem;
+            }
+            &:not(:first-child) .td{
+              border-top: 1px solid transparent;
+            }
+            &.row-type--total{
+              font-weight: 500;
+              
+              .td{
+                border-top: 1px solid #333;
+                border-bottom: 3px double #333;
+              }
+            }
+            
+          }
+        }
+      }
+    }    
+  }
+}

client/src/style/pages/FinancialStatements/ARAgingSummary.scss

@@ -19,6 +19,9 @@
               padding-top: 0.4rem;
               padding-bottom: 0.4rem;
             }
+            &:not(:first-child) .td{
+              border-top: 1px solid transparent;
+            }
             &.row-type--total{
               font-weight: 500;
               
@@ -27,9 +30,7 @@
                 border-bottom: 3px double #333;
               }
             }
-            &:not(:first-child) .td{
+            
-              border-top: 1px solid transparent;
-            }
           }
         }
       }

client/src/style/pages/FinancialStatements/FinancialReportPage.scss

@@ -0,0 +1,32 @@
+
+
+
+.dashboard__insider--financial-report{
+
+  .alert-compute-running{
+    position: relative;
+    padding: 8px 20px;
+    border-radius: 2px;
+    background-color: #fdecda;
+    color: #342515;
+    font-size: 12px;
+
+    button{
+      font-size: 12px;
+      min-height: 16px;
+      padding: 0 4px;
+
+      &,
+      &:hover{
+        color: #824400;
+        text-decoration: underline;
+      }
+    }
+    svg{
+      margin-right: 6px;
+      position: relative;
+      top: -2px;
+      fill: #975f19;
+    }
+  }
+}