feat: Financial statements enhancement.

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

@@ -26,7 +26,6 @@ function BalanceSheet({
   fetchBalanceSheet,
 
   // #withBalanceSheetDetail
-  balanceSheetLoading,
   balanceSheetFilter,
 
   // #withPreferences
@@ -41,6 +40,7 @@ function BalanceSheet({
     display_columns_by: '',
     none_zero: false,
   });
+  const [refresh, setRefresh] = useState(true);
 
   const fetchHook = useQuery(
     ['balance-sheet', filter],
@@ -50,7 +50,7 @@ function BalanceSheet({
 
   // Handle fetch the data of balance sheet.
   const handleFetchData = useCallback(() => {
-    fetchHook.refetch({ force: true });
+    setRefresh(true);
   }, []);
 
   useEffect(() => {
@@ -66,11 +66,18 @@ function BalanceSheet({
         to_date: moment(filter.to_date).format('YYYY-MM-DD'),
       };
       setFilter({ ..._filter });
-      fetchHook.refetch({ force: true });
+      setRefresh(true);
     },
     [setFilter],
   );
 
+  useEffect(() => {
+    if (refresh) {
+      fetchHook.refetch({ force: true });
+      setRefresh(false);
+    }
+  }, [refresh]);
+
   return (
     <DashboardInsider>
       <BalanceSheetActionsBar />
@@ -86,7 +93,6 @@ function BalanceSheet({
           <div class="financial-statement__body">
             <BalanceSheetTable
               companyName={organizationSettings.name}
-              loading={balanceSheetLoading}
               balanceSheetQuery={filter}
               onFetchData={handleFetchData}
             />
@@ -100,8 +106,7 @@ function BalanceSheet({
 export default compose(
   withDashboardActions,
   withBalanceSheetActions,
-  withBalanceSheetDetail(({ balanceSheetLoading, balanceSheetFilter }) => ({
-    balanceSheetLoading,
+  withBalanceSheetDetail(({ balanceSheetFilter }) => ({
     balanceSheetFilter,
   })),
   withSettings,

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

@@ -22,8 +22,12 @@ import withBalanceSheetActions from './withBalanceSheetActions';
 
 
 function BalanceSheetActionsBar({
+  // #withBalanceSheetDetail
   balanceSheetFilter,
+
+  // #withBalanceSheetActions
   toggleBalanceSheetFilter,
+  refreshBalanceSheet
 }) {
   const filterDropdown = FilterDropdown({
     fields: [],
@@ -34,6 +38,10 @@ function BalanceSheetActionsBar({
     toggleBalanceSheetFilter();
   };
 
+  const handleRecalcReport = () => {
+    refreshBalanceSheet(true);
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -44,6 +52,16 @@ function BalanceSheetActionsBar({
         />
         <NavbarDivider />
 
+        <Button
+          className={classNames(
+            Classes.MINIMAL,
+            'button--gray-highlight',
+          )}
+          text={<T id={'recalc_report'} />}
+          onClick={handleRecalcReport}
+          icon={<Icon icon="refresh-16" iconSize={16} />}
+        />
+
         <If condition={balanceSheetFilter}>
           <Button
             className={Classes.MINIMAL}
@@ -61,7 +79,6 @@ function BalanceSheetActionsBar({
             icon={<Icon icon="arrow-to-bottom" />}
           />
         </If>
-        <NavbarDivider />
 
         <Popover
           content={filterDropdown}
@@ -75,6 +92,8 @@ function BalanceSheetActionsBar({
           />
         </Popover>
 
+        <NavbarDivider />
+
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon='print-16' iconSize={16} />}

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

@@ -1,6 +1,6 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo, useCallback, useEffect } from 'react';
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
-import { Row, Col } from 'react-grid-system';
+import { Row, Col, Visible } from 'react-grid-system';
 import {
   Button,
   FormGroup,
@@ -17,11 +17,19 @@ import FinancialStatementDateRange from 'containers/FinancialStatements/Financia
 import SelectDisplayColumnsBy from '../SelectDisplayColumnsBy';
 import RadiosAccountingBasis from '../RadiosAccountingBasis';
 
+import withBalanceSheet from './withBalanceSheetDetail';
+import withBalanceSheetActions from './withBalanceSheetActions';
 
-export default function BalanceSheetHeader({
+import { compose } from 'utils';
+
+function BalanceSheetHeader({
   onSubmitFilter,
   pageFilter,
-  show
+  show,
+  refresh,
+
+  // #withBalanceSheetActions
+  refreshBalanceSheet
 }) {
   const { formatMessage } = useIntl();
 
@@ -49,11 +57,6 @@ export default function BalanceSheetHeader({
     formik.setFieldValue('display_columns_by', item.by);
   }, [formik]);
 
-  // Handle submit filter submit button.
-  const handleSubmitClick = useCallback(() => {
-    formik.submitForm();
-  }, [formik]);
-
   const filterAccountsOptions = useMemo(() => [
     { key: '', name: formatMessage({ id: 'accounts_with_zero_balance' }) },
     { key: 'all-trans', name: formatMessage({ id: 'all_transactions' }) },
@@ -63,24 +66,31 @@ export default function BalanceSheetHeader({
     return (<MenuItem text={item.name} key={item.id} onClick={handleClick} />);
   }, []);
 
-  const infoIcon = useMemo(() =>
-    (<Icon icon="info-circle" iconSize={12} />), []);
-
   const handleAccountingBasisChange = useCallback((value) => {
     formik.setFieldValue('basis', value);
   }, [formik]);
 
+  // Handle submit filter submit button.
+  useEffect(() => {
+    if (refresh) {
+      formik.submitForm();  
+      refreshBalanceSheet(false);
+    }
+  }, [refresh]);
+
   return (
     <FinancialStatementHeader show={show}>
-      <FinancialStatementDateRange formik={formik} />
-
       <Row>
-        <Col sm={3}>
+        <FinancialStatementDateRange formik={formik} />
+
+        <Visible xl><Col width={'100%'} /></Visible>
+
+        <Col width={260} offset={10}>
           <SelectDisplayColumnsBy
             onItemSelect={onItemSelectDisplayColumns} />
         </Col>
 
-        <Col sm={3}>
+        <Col width={260}>
           <FormGroup
             label={<T id={'filter_accounts'} />}
             className="form-group--select-list bp3-fill"
@@ -95,22 +105,19 @@ export default function BalanceSheetHeader({
           </FormGroup>
         </Col>
 
-        <Col sm={3}>
+        <Col width={260}>
           <RadiosAccountingBasis
             selectedValue={formik.values.basis}
             onChange={handleAccountingBasisChange} />
         </Col>
-
-        <Col sm={3}>
-          <Button
-            type="submit"
-            onClick={handleSubmitClick}
-            disabled={formik.isSubmitting}
-            className={'button--submit-filter mt2'}>
-            <T id={'calculate_report'} />
-          </Button>
-        </Col>
       </Row>
     </FinancialStatementHeader>
   )
-}
+}
+
+export default compose(
+  withBalanceSheet(({ balanceSheetRefresh }) => ({
+    refresh: balanceSheetRefresh,
+  })),
+  withBalanceSheetActions,
+)(BalanceSheetHeader);

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo, useEffect, useState, useCallback } from 'react';
 import { connect } from 'react-redux';
 import { useIntl } from 'react-intl';
 
@@ -20,23 +20,26 @@ function BalanceSheetTable({
   balanceSheetAccounts,
   balanceSheetColumns,
   balanceSheetQuery,
+  balanceSheetLoading,
 
   // #ownProps
   onFetchData,
-  loading,
 }) {
   const { formatMessage } = useIntl();
+
   const columns = useMemo(
     () => [
       {
         Header: formatMessage({ id: 'account_name' }),
         accessor: 'name',
         className: 'account_name',
+        width: 100,
       },
       {
-        Header: formatMessage({ id: 'code' }),
+        Header: formatMessage({ id: 'account_code' }),
         accessor: 'code',
         className: 'code',
+        width: 80,
       },
       ...(balanceSheetQuery.display_columns_type === 'total'
         ? [
@@ -55,7 +58,8 @@ function BalanceSheetTable({
                 }
                 return '';
               },
-              className: 'credit',
+              className: 'total',
+              width: 80,
             },
           ]
         : []),
@@ -70,7 +74,7 @@ function BalanceSheetTable({
               }
               return '';
             },
-            width: 100,
+            width: 80,
           }))
         : []),
     ],
@@ -89,18 +93,20 @@ function BalanceSheetTable({
 
   return (
     <FinancialSheet
+      name="balance-sheet"
       companyName={organizationSettings.name}
       sheetType={formatMessage({ id: 'balance_sheet' })}
       fromDate={balanceSheetQuery.from_date}
       toDate={balanceSheetQuery.to_date}
       basis={balanceSheetQuery.basis}
-      loading={loading}
+      loading={balanceSheetLoading}
     >
       <DataTable
         className="bigcapital-datatable--financial-report"
         columns={columns}
         data={balanceSheetAccounts}
         onFetchData={handleFetchData}
+        noInitialFetch={true}
         expanded={expandedRows}
         expandSubRows={true}
         sticky={true}
@@ -124,10 +130,16 @@ const withBalanceSheetTable = connect(mapStateToProps);
 export default compose(
   withBalanceSheetTable,
   withBalanceSheetDetail(
-    ({ balanceSheetAccounts, balanceSheetColumns, balanceSheetQuery }) => ({
+    ({
       balanceSheetAccounts,
       balanceSheetColumns,
       balanceSheetQuery,
+      balanceSheetLoading,
+    }) => ({
+      balanceSheetAccounts,
+      balanceSheetColumns,
+      balanceSheetQuery,
+      balanceSheetLoading,
     }),
   ),
   withSettings,

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

@@ -1,11 +1,14 @@
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import {
   fetchBalanceSheet,
+  balanceSheetRefresh,
 } from 'store/financialStatement/financialStatements.actions';
 
 const mapDispatchToProps = (dispatch) => ({
-  fetchBalanceSheet: (query = {}) => dispatch(fetchBalanceSheet({ query })),  
-  toggleBalanceSheetFilter: () => dispatch({ type: 'BALANCE_SHEET_FILTER_TOGGLE' }),
+  fetchBalanceSheet: (query = {}) => dispatch(fetchBalanceSheet({ query })),
+  toggleBalanceSheetFilter: () =>
+    dispatch({ type: 'BALANCE_SHEET_FILTER_TOGGLE' }),
+  refreshBalanceSheet: (refresh) => dispatch(balanceSheetRefresh(refresh)),
 });
 
-export default connect(null, mapDispatchToProps);
+export default connect(null, mapDispatchToProps);

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

@@ -17,6 +17,7 @@ export default (mapState) => {
       balanceSheetQuery: getFinancialSheetQuery(state.financialStatements.balanceSheet.sheets, balanceSheetIndex),
       balanceSheetLoading: state.financialStatements.balanceSheet.loading,
       balanceSheetFilter: state.financialStatements.balanceSheet.filter,
+      balanceSheetRefresh: state.financialStatements.balanceSheet.refresh,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };