feat: Financial statements enhancement.

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js

@@ -20,12 +20,17 @@ function TrialBalanceActionsBar({
 
   // #withTrialBalanceActions
   toggleTrialBalanceFilter,
+  refreshTrialBalance,
 }) {
 
   const handleFilterToggleClick = () => {
     toggleTrialBalanceFilter();
   };
 
+  const handleRecalcReport = () => {
+    refreshTrialBalance(true);
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -36,6 +41,16 @@ function TrialBalanceActionsBar({
         />
         <NavbarDivider />
 
+        <Button
+          className={classNames(
+            Classes.MINIMAL,
+            'button--gray-highlight',
+          )}
+          text={'Re-calc Report'}
+          onClick={handleRecalcReport}
+          icon={<Icon icon="refresh-16" iconSize={16} />}
+        />
+
         <If condition={trialBalanceSheetFilter}>
           <Button
             className={Classes.MINIMAL}

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js

@@ -13,10 +13,8 @@ import { compose } from 'utils';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withTrialBalanceActions from './withTrialBalanceActions';
-import withTrialBalance from './withTrialBalance';
 import withSettings from 'containers/Settings/withSettings';
 
-
 function TrialBalanceSheet({
   // #withDashboardActions
   changePageTitle,
@@ -24,9 +22,6 @@ function TrialBalanceSheet({
   // #withTrialBalanceActions
   fetchTrialBalanceSheet,
 
-  // #withTrialBalance
-  trialBalanceSheetLoading,
-
   // #withPreferences
   organizationSettings,
 }) {
@@ -36,6 +31,7 @@ function TrialBalanceSheet({
     basis: 'accural',
     none_zero: false,
   });
+  const [refresh, setRefresh] = useState(true);
   const { formatMessage } = useIntl();
 
   const fetchHook = useQuery(
@@ -46,7 +42,7 @@ function TrialBalanceSheet({
 
   // handle fetch data of trial balance table.
   const handleFetchData = useCallback(() => {
-    fetchHook.refetch({ force: true });
+    setRefresh(true);
   }, []);
 
   // Change page title of the dashboard.
@@ -62,11 +58,18 @@ function TrialBalanceSheet({
         to_date: moment(filter.to_date).format('YYYY-MM-DD'),
       };
       setFilter(parsedFilter);
-      fetchHook.refetch({ force: true });
+      setRefresh(true);
     },
     [fetchHook],
   );
 
+  useEffect(() => {
+    if (refresh) {
+      fetchHook.refetch({ force: true });
+      setRefresh(false);
+    }
+  }, [refresh, fetchHook.refetch]);
+
   return (
     <DashboardInsider>
       <TrialBalanceActionsBar />
@@ -83,7 +86,6 @@ function TrialBalanceSheet({
               companyName={organizationSettings.name}
               trialBalanceQuery={filter}
               onFetchData={handleFetchData}
-              loading={trialBalanceSheetLoading}
             />
           </div>
         </div>
@@ -95,8 +97,5 @@ function TrialBalanceSheet({
 export default compose(
   withDashboardActions,
   withTrialBalanceActions,
-  withTrialBalance(({ trialBalanceSheetLoading }) => ({
-    trialBalanceSheetLoading,
-  })),
   withSettings,
 )(TrialBalanceSheet);

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useEffect } from 'react';
 import * as Yup from 'yup';
 import moment from 'moment';
 import { Row, Col } from 'react-grid-system';
@@ -9,6 +9,7 @@ import { Button } from "@blueprintjs/core";
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
 import withTrialBalance from './withTrialBalance';
+import withTrialBalanceActions from './withTrialBalanceActions';
 
 import { compose } from 'utils';
 
@@ -19,6 +20,10 @@ function TrialBalanceSheetHeader({
 
   // #withTrialBalance
   trialBalanceSheetFilter,
+  trialBalanceSheetRefresh,
+
+  // #withTrialBalanceActions
+  refreshTrialBalance,
 }) {
   const { formatMessage } = useIntl();
   const formik = useFormik({
@@ -38,29 +43,29 @@ function TrialBalanceSheetHeader({
     }
   });
 
-  const handleSubmitClick = useCallback(() => {
-    formik.submitForm();
-  }, [formik]);
+  useEffect(() => {
+    if (trialBalanceSheetRefresh) {
+      formik.submitForm();
+      refreshTrialBalance(false);
+    }
+  }, [formik, trialBalanceSheetRefresh]);
 
   return (
     <FinancialStatementHeader show={trialBalanceSheetFilter}>
-      <FinancialStatementDateRange formik={formik} />
-
       <Row>
-        <Col sm={3}>
-          <Button
-            type="submit"
-            onClick={handleSubmitClick}
-            disabled={formik.isSubmitting}
-            className={'button--submit-filter'}>
-            <T id={'run_report'} />
-          </Button>
-        </Col>
+        <FinancialStatementDateRange formik={formik} />
       </Row>
     </FinancialStatementHeader>
   );
 }
 
 export default compose(
-  withTrialBalance(({ trialBalanceSheetFilter }) => ({ trialBalanceSheetFilter })),
+  withTrialBalance(({
+    trialBalanceSheetFilter,
+    trialBalanceSheetRefresh,
+  }) => ({
+    trialBalanceSheetFilter,
+    trialBalanceSheetRefresh
+  })),
+  withTrialBalanceActions,
 )(TrialBalanceSheetHeader);

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js

@@ -14,13 +14,13 @@ import { compose } from 'utils';
 function TrialBalanceSheetTable({
   // #withTrialBalanceDetail
   trialBalanceAccounts,
+  trialBalanceSheetLoading,
 
   // #withTrialBalanceTable
   trialBalanceIndex,
   trialBalanceQuery,
 
   onFetchData,
-  loading,
   companyName,
 }) {
   const { formatMessage } = useIntl();
@@ -31,30 +31,41 @@ function TrialBalanceSheetTable({
         Header: formatMessage({ id: 'account_name' }),
         accessor: 'name',
         className: 'name',
+        minWidth: 150,
+        maxWidth: 150,
+        width: 150,
       },
       {
         Header: formatMessage({ id: 'code' }),
         accessor: 'code',
         className: 'code',
-        width: 120,
+        minWidth: 80,
+        maxWidth: 80,
+        width: 80,
       },
       {
         Header: formatMessage({ id: 'credit' }),
         accessor: (r) => <Money amount={r.credit} currency="USD" />,
         className: 'credit',
-        width: 120,
+        minWidth: 95,
+        maxWidth: 95,
+        width: 95,
       },
       {
         Header: formatMessage({ id: 'debit' }),
         accessor: (r) => <Money amount={r.debit} currency="USD" />,
         className: 'debit',
-        width: 120,
+        minWidth: 95,
+        maxWidth: 95,
+        width: 95,
       },
       {
         Header: formatMessage({ id: 'balance' }),
         accessor: (r) => <Money amount={r.balance} currency="USD" />,
         className: 'balance',
-        width: 120,
+        minWidth: 95,
+        maxWidth: 95,
+        width: 95,
       },
     ],
     [formatMessage],
@@ -71,7 +82,7 @@ function TrialBalanceSheetTable({
       fromDate={trialBalanceQuery.from_date}
       toDate={trialBalanceQuery.to_date}
       name="trial-balance"
-      loading={loading}
+      loading={trialBalanceSheetLoading}
     >
       <DataTable
         className="bigcapital-datatable--financial-report"
@@ -100,7 +111,11 @@ const withTrialBalanceTable = connect(mapStateToProps);
 
 export default compose(
   withTrialBalanceTable,
-  withTrialBalance(({ trialBalanceAccounts }) => ({
+  withTrialBalance(({
     trialBalanceAccounts,
+    trialBalanceSheetLoading,
+  }) => ({
+    trialBalanceAccounts,
+    trialBalanceSheetLoading
   })),
 )(TrialBalanceSheetTable);

client/src/containers/FinancialStatements/TrialBalanceSheet/withTrialBalance.js

@@ -19,6 +19,7 @@ export default (mapState) => {
       ),
       trialBalanceSheetLoading: state.financialStatements.trialBalance.loading,
       trialBalanceSheetFilter: state.financialStatements.trialBalance.filter,
+      trialBalanceSheetRefresh: state.financialStatements.trialBalance.refresh,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

client/src/containers/FinancialStatements/TrialBalanceSheet/withTrialBalanceActions.js

@@ -1,11 +1,13 @@
 import {connect} from 'react-redux';
 import {
-  fetchTrialBalanceSheet
+  fetchTrialBalanceSheet,
+  trialBalanceRefresh,
 } from 'store/financialStatement/financialStatements.actions';
 
 export const mapDispatchToProps = (dispatch) => ({
   fetchTrialBalanceSheet: (query = {}) => dispatch(fetchTrialBalanceSheet({ query })),
   toggleTrialBalanceFilter: () => dispatch({ type: 'TRIAL_BALANCE_FILTER_TOGGLE' }),
+  refreshTrialBalance: (refresh) => dispatch(trialBalanceRefresh(refresh)),
 });
 
 export default connect(null, mapDispatchToProps);