feat: balance sheet report.

feat: trial balance sheet.
feat: general ledger report.
feat: journal report.
feat: profit/loss report.

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

@@ -4,6 +4,7 @@ import { compose } from 'utils';
 import { useQuery } from 'react-query';
 import moment from 'moment';
 import { useIntl } from 'react-intl';
+import { queryCache } from 'react-query';
 
 import BalanceSheetHeader from './BalanceSheetHeader';
 import BalanceSheetTable from './BalanceSheetTable';
@@ -18,66 +19,74 @@ import withSettings from 'containers/Settings/withSettings';
 import withBalanceSheetActions from './withBalanceSheetActions';
 import withBalanceSheetDetail from './withBalanceSheetDetail';
 
+import { transformFilterFormToQuery } from 'containers/FinancialStatements/common';
+
 function BalanceSheet({
   // #withDashboardActions
   changePageTitle,
+  setDashboardBackLink,
 
   // #withBalanceSheetActions
   fetchBalanceSheet,
+  refreshBalanceSheet,
 
   // #withBalanceSheetDetail
-  balanceSheetFilter,
+  balanceSheetRefresh,
 
   // #withPreferences
-  organizationSettings,
+  organizationName,
 }) {
   const { formatMessage } = useIntl();
+
   const [filter, setFilter] = useState({
-    from_date: moment().startOf('year').format('YYYY-MM-DD'),
-    to_date: moment().endOf('year').format('YYYY-MM-DD'),
+    fromDate: moment().startOf('year').format('YYYY-MM-DD'),
+    toDate: moment().endOf('year').format('YYYY-MM-DD'),
     basis: 'cash',
-    display_columns_type: 'total',
-    display_columns_by: '',
-    none_zero: false,
+    displayColumnsType: 'total',
+    accountsFilter: 'all-accounts',
   });
-  const [refresh, setRefresh] = useState(true);
 
-  const fetchHook = useQuery(
-    ['balance-sheet', filter],
-    (key, query) => fetchBalanceSheet({ ...query }),
-    { manual: true },
+  // Fetches the balance sheet.
+  const fetchHook = useQuery(['balance-sheet', filter], (key, query) =>
+    fetchBalanceSheet({ ...transformFilterFormToQuery(query) }),
   );
 
-  // Handle fetch the data of balance sheet.
-  const handleFetchData = useCallback(() => {
-    setRefresh(true);
-  }, []);
-
   useEffect(() => {
     changePageTitle(formatMessage({ id: 'balance_sheet' }));
   }, [changePageTitle, formatMessage]);
 
+  // Observes the balance sheet refresh to invalid the query to refresh it.
+  useEffect(() => {
+    if (balanceSheetRefresh) {
+      queryCache.invalidateQueries('balance-sheet');
+      refreshBalanceSheet(false);
+    }
+  }, [balanceSheetRefresh, refreshBalanceSheet]);
+
+  useEffect(() => {
+    // Show the back link on dashboard topbar.
+    setDashboardBackLink(true);
+
+    return () => {
+      // Hide the back link on dashboard topbar.
+      setDashboardBackLink(false);
+    };
+  });
+
   // Handle re-fetch balance sheet after filter change.
   const handleFilterSubmit = useCallback(
     (filter) => {
       const _filter = {
         ...filter,
-        from_date: moment(filter.from_date).format('YYYY-MM-DD'),
-        to_date: moment(filter.to_date).format('YYYY-MM-DD'),
+        fromDate: moment(filter.fromDate).format('YYYY-MM-DD'),
+        toDate: moment(filter.toDate).format('YYYY-MM-DD'),
       };
       setFilter({ ..._filter });
-      setRefresh(true);
+      refreshBalanceSheet(true);
     },
-    [setFilter],
+    [setFilter, refreshBalanceSheet],
   );
 
-  useEffect(() => {
-    if (refresh) {
-      fetchHook.refetch({ force: true });
-      setRefresh(false);
-    }
-  }, [refresh]);
-
   return (
     <DashboardInsider>
       <BalanceSheetActionsBar />
@@ -87,15 +96,9 @@ function BalanceSheet({
           <BalanceSheetHeader
             pageFilter={filter}
             onSubmitFilter={handleFilterSubmit}
-            show={balanceSheetFilter}
           />
-
           <div class="financial-statement__body">
-            <BalanceSheetTable
-              companyName={organizationSettings.name}
-              balanceSheetQuery={filter}
-              onFetchData={handleFetchData}
-            />
+            <BalanceSheetTable companyName={organizationName} />
           </div>
         </FinancialStatement>
       </DashboardPageContent>
@@ -106,8 +109,10 @@ function BalanceSheet({
 export default compose(
   withDashboardActions,
   withBalanceSheetActions,
-  withBalanceSheetDetail(({ balanceSheetFilter }) => ({
-    balanceSheetFilter,
+  withBalanceSheetDetail(({ balanceSheetRefresh }) => ({
+    balanceSheetRefresh,
+  })),
+  withSettings(({ organizationSettings }) => ({
+    organizationName: organizationSettings.name,
   })),
-  withSettings,
 )(BalanceSheet);

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import {
   NavbarGroup,
   Button,
@@ -13,26 +13,24 @@ import classNames from 'classnames';
 
 import Icon from 'components/Icon';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
-import FilterDropdown from 'components/FilterDropdown';
-import { If } from 'components';
 
 import { compose } from 'utils';
 import withBalanceSheetDetail from './withBalanceSheetDetail';
 import withBalanceSheetActions from './withBalanceSheetActions';
 
-
 function BalanceSheetActionsBar({
   // #withBalanceSheetDetail
   balanceSheetFilter,
 
   // #withBalanceSheetActions
   toggleBalanceSheetFilter,
-  refreshBalanceSheet
+  refreshBalanceSheet,
 }) {
   const handleFilterToggleClick = () => {
     toggleBalanceSheetFilter();
   };
 
+  // Handle recalculate the report button.
   const handleRecalcReport = () => {
     refreshBalanceSheet(true);
   };
@@ -41,39 +39,21 @@ function BalanceSheetActionsBar({
     <DashboardActionsBar>
       <NavbarGroup>
         <Button
-          className={classNames(Classes.MINIMAL, 'button--table-views')}
-          icon={<Icon icon="cog-16" iconSize={16} />}
-          text={<T id={'customize_report'} />}
-        />
-        <NavbarDivider />
-
-        <Button
-          className={classNames(
-            Classes.MINIMAL,
-            'button--gray-highlight',
-          )}
+          className={classNames(Classes.MINIMAL, 'button--gray-highlight')}
           text={<T id={'recalc_report'} />}
           onClick={handleRecalcReport}
           icon={<Icon icon="refresh-16" iconSize={16} />}
         />
+        <NavbarDivider />
 
-        <If condition={balanceSheetFilter}>
-          <Button
-            className={Classes.MINIMAL}
-            text={<T id={'hide_filter'} />}
-            onClick={handleFilterToggleClick}
-            icon={<Icon icon="arrow-to-top" />}
-          />
-        </If>
-
-        <If condition={!balanceSheetFilter}>
-          <Button
-            className={Classes.MINIMAL}
-            text={<T id={'show_filter'} />}
-            onClick={handleFilterToggleClick}
-            icon={<Icon icon="arrow-to-bottom" />}
-          />
-        </If>
+        <Button
+          className={classNames(Classes.MINIMAL, 'button--table-views')}
+          icon={<Icon icon="cog-16" iconSize={16} />}
+          text={!balanceSheetFilter ? <T id={'customize_report'} /> : <T id={'hide_customizer'} />}
+          onClick={handleFilterToggleClick}
+          active={balanceSheetFilter}
+        />
+        <NavbarDivider />
 
         <Popover
           // content={}
@@ -91,7 +71,7 @@ function BalanceSheetActionsBar({
 
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon='print-16' iconSize={16} />}
+          icon={<Icon icon="print-16" iconSize={16} />}
           text={<T id={'print'} />}
         />
         <Button
@@ -107,4 +87,4 @@ function BalanceSheetActionsBar({
 export default compose(
   withBalanceSheetDetail(({ balanceSheetFilter }) => ({ balanceSheetFilter })),
   withBalanceSheetActions,
-)(BalanceSheetActionsBar);
+)(BalanceSheetActionsBar);

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

@@ -1,126 +1,105 @@
-import React, { useCallback, useEffect } from 'react';
-import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
-import { Row, Col, Visible } from 'react-grid-system';
-import { FormGroup } from '@blueprintjs/core';
+import React, { useEffect } from 'react';
+import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 import moment from 'moment';
 import * as Yup from 'yup';
-import { useFormik } from 'formik';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { Formik, Form } from 'formik';
 
-import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
-import SelectDisplayColumnsBy from '../SelectDisplayColumnsBy';
-import RadiosAccountingBasis from '../RadiosAccountingBasis';
-import FinancialAccountsFilter from '../FinancialAccountsFilter';
+import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 
 import withBalanceSheet from './withBalanceSheetDetail';
 import withBalanceSheetActions from './withBalanceSheetActions';
 
 import { compose } from 'utils';
+import BalanceSheetHeaderGeneralPanal from './BalanceSheetHeaderGeneralPanal';
 
 function BalanceSheetHeader({
+  // #ownProps
   onSubmitFilter,
   pageFilter,
-  show,
-  refresh,
+
+  // #withBalanceSheet
+  balanceSheetFilter,
 
   // #withBalanceSheetActions
-  refreshBalanceSheet,
+  toggleBalanceSheetFilter,
 }) {
   const { formatMessage } = useIntl();
 
-  const formik = useFormik({
-    enableReinitialize: true,
-    initialValues: {
-      ...pageFilter,
-      basis: 'cash',
-      from_date: moment(pageFilter.from_date).toDate(),
-      to_date: moment(pageFilter.to_date).toDate(),
-      none_zero: false,
-    },
-    validationSchema: Yup.object().shape({
-      from_date: Yup.date()
-        .required()
-        .label(formatMessage({ id: 'from_data' })),
-      to_date: Yup.date()
-        .min(Yup.ref('from_date'))
-        .required()
-        .label(formatMessage({ id: 'to_date' })),
-      none_zero: Yup.boolean(),
-    }),
-    onSubmit: (values, actions) => {
-      onSubmitFilter(values);
-      actions.setSubmitting(false);
-    },
+  // Filter form initial values.
+  const initialValues = {
+    basis: 'cash',
+    ...pageFilter,
+    fromDate: moment(pageFilter.fromDate).toDate(),
+    toDate: moment(pageFilter.toDate).toDate(),
+  };
+
+  // Validation schema.
+  const validationSchema = Yup.object().shape({
+    dateRange: Yup.string().optional(),
+    fromDate: Yup.date()
+      .required()
+      .label(formatMessage({ id: 'fromDate' })),
+    toDate: Yup.date()
+      .min(Yup.ref('fromDate'))
+      .required()
+      .label(formatMessage({ id: 'toDate' })),
+    accountsFilter: Yup.string(),
+    displayColumnsType: Yup.string(),
   });
 
-  // Handle item select of `display columns by` field.
-  const onItemSelectDisplayColumns = useCallback(
-    (item) => {
-      formik.setFieldValue('display_columns_type', item.type);
-      formik.setFieldValue('display_columns_by', item.by);
-    },
-    [formik],
-  );
+  // Handle form submit.
+  const handleSubmit = (values, actions) => {
+    onSubmitFilter(values);
+    toggleBalanceSheetFilter();
+    actions.setSubmitting(false);
+  };
 
-  const handleAccountingBasisChange = useCallback(
-    (value) => {
-      formik.setFieldValue('basis', value);
-    },
-    [formik],
-  );
-
-  useEffect(() => {
-    if (refresh) {
-      formik.submitForm();
-      refreshBalanceSheet(false);
-    }
-  }, [refresh]);
-
-  const handleAccountsFilterSelect = (filterType) => {
-    const noneZero = filterType.key === 'without-zero-balance' ? true : false;
-    formik.setFieldValue('none_zero', noneZero);
+  // Handle cancel button click.
+  const handleCancelClick = () => {
+    toggleBalanceSheetFilter();
+  };
+  // Handle drawer close action.
+  const handleDrawerClose = () => {
+    toggleBalanceSheetFilter();
   };
 
   return (
-    <FinancialStatementHeader show={show}>
-      <Row>
-        <FinancialStatementDateRange formik={formik} />
-
-        <Visible xl>
-          <Col width={'100%'} />
-        </Visible>
-
-        <Col width={260} offset={10}>
-          <SelectDisplayColumnsBy onItemSelect={onItemSelectDisplayColumns} />
-        </Col>
-
-        <Col width={260}>
-          <FormGroup
-            label={<T id={'filter_accounts'} />}
-            className="form-group--select-list bp3-fill"
-            inline={false}
-          >
-            <FinancialAccountsFilter
-              initialSelectedItem={'all-accounts'}
-              onItemSelect={handleAccountsFilterSelect}
+    <FinancialStatementHeader
+      isOpen={balanceSheetFilter}
+      drawerProps={{ onClose: handleDrawerClose }}
+    >
+      <Formik
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        onSubmit={handleSubmit}
+      >
+        <Form>
+          <Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
+            <Tab
+              id="general"
+              title={<T id={'general'} />}
+              panel={<BalanceSheetHeaderGeneralPanal />}
             />
-          </FormGroup>
-        </Col>
+          </Tabs>
 
-        <Col width={260}>
-          <RadiosAccountingBasis
-            selectedValue={formik.values.basis}
-            onChange={handleAccountingBasisChange}
-          />
-        </Col>
-      </Row>
+          <div class="financial-header-drawer__footer">
+            <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
+              <T id={'calculate_report'} />
+            </Button>
+            <Button onClick={handleCancelClick} minimal={true}>
+              <T id={'cancel'} />
+            </Button>
+          </div>
+        </Form>
+      </Formik>
     </FinancialStatementHeader>
   );
 }
 
 export default compose(
-  withBalanceSheet(({ balanceSheetRefresh }) => ({
-    refresh: balanceSheetRefresh,
+  withBalanceSheet(({ balanceSheetFilter }) => ({
+    balanceSheetFilter,
   })),
   withBalanceSheetActions,
 )(BalanceSheetHeader);

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
+import SelectDisplayColumnsBy from '../SelectDisplayColumnsBy';
+import RadiosAccountingBasis from '../RadiosAccountingBasis';
+import FinancialAccountsFilter from '../FinancialAccountsFilter';
+
+/**
+ * Balance sheet header - General panal.
+ */
+export default function BalanceSheetHeaderGeneralTab({}) {
+  return (
+    <div>
+      <FinancialStatementDateRange />
+      <SelectDisplayColumnsBy />
+      <FinancialAccountsFilter
+        initialSelectedItem={'all-accounts'}
+      />
+      <RadiosAccountingBasis key={'basis'} />
+    </div>
+  );
+}

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

@@ -1,31 +1,56 @@
 import React, { useMemo, useCallback } from 'react';
-import { connect } from 'react-redux';
 import { useIntl } from 'react-intl';
 import classNames from 'classnames';
 
+
 import Money from 'components/Money';
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
 
-import withSettings from 'containers/Settings/withSettings';
 import withBalanceSheetDetail from './withBalanceSheetDetail';
-import { getFinancialSheetIndexByQuery } from 'store/financialStatement/financialStatements.selectors';
 
-import { compose, defaultExpanderReducer } from 'utils';
+import { compose, defaultExpanderReducer, getColumnWidth } from 'utils';
 
+// Total cell.
+function TotalCell({ cell }) {
+  const row = cell.row.original;
+
+  if (row.total) {
+    return (
+      <Money
+        amount={row.total.formatted_amount}
+        currency={row.total.currency_code}
+      />
+    );
+  }
+  return '';
+}
+
+// Total period cell.
+const TotalPeriodCell = (index) => ({ cell }) => {
+  const { original } = cell.row;
+
+  if (original.total_periods && original.total_periods[index]) {
+    const amount = original.total_periods[index].formatted_amount;
+    const currencyCode = original.total_periods[index].currency_code;
+
+    return <Money amount={amount} currency={currencyCode} />;
+  }
+  return '';
+};
+
+/**
+ * Balance sheet table.
+ */
 function BalanceSheetTable({
-  // #withPreferences
-  organizationSettings,
-
   // #withBalanceSheetDetail
-  balanceSheetAccounts,
   balanceSheetTableRows,
   balanceSheetColumns,
   balanceSheetQuery,
   balanceSheetLoading,
 
   // #ownProps
-  onFetchData,
+  companyName,
 }) {
   const { formatMessage } = useIntl();
 
@@ -33,35 +58,18 @@ function BalanceSheetTable({
     () => [
       {
         Header: formatMessage({ id: 'account_name' }),
-        accessor: 'name',
+        accessor: (row) => (row.code ? `${row.name} - ${row.code}` : row.name),
         className: 'account_name',
-        width: 120,
-      },
-      {
-        Header: formatMessage({ id: 'code' }),
-        accessor: 'code',
-        className: 'code',
-        width: 60,
+        width: 240,
       },
       ...(balanceSheetQuery.display_columns_type === 'total'
         ? [
             {
               Header: formatMessage({ id: 'total' }),
               accessor: 'balance.formatted_amount',
-              Cell: ({ cell }) => {
-                const row = cell.row.original;
-                if (row.total) {
-                  return (
-                    <Money
-                      amount={row.total.formatted_amount}
-                      currency={'USD'}
-                    />
-                  );
-                }
-                return '';
-              },
+              Cell: TotalCell,
               className: 'total',
-              width: 80,
+              width: 140,
             },
           ]
         : []),
@@ -70,44 +78,43 @@ function BalanceSheetTable({
             id: `date_period_${index}`,
             Header: column,
             accessor: `total_periods[${index}]`,
-            Cell: ({ cell }) => {
-              const { original } = cell.row;
-              if (original.total_periods && original.total_periods[index]) {
-                const amount = original.total_periods[index].formatted_amount;
-                return <Money amount={amount} currency={'USD'} />;
-              }
-              return '';
-            },
+            Cell: TotalPeriodCell(index),
             className: classNames('total-period', `total-periods-${index}`),
-            width: 80,
+            width: getColumnWidth(
+              balanceSheetTableRows,
+              `total_periods.${index}.formatted_amount`,
+              { minWidth: 100 },
+            ),
           }))
         : []),
     ],
-  [balanceSheetQuery, balanceSheetColumns, formatMessage],
+    [balanceSheetQuery, balanceSheetColumns, balanceSheetTableRows, formatMessage],
   );
 
-  const handleFetchData = useCallback(() => {
-    onFetchData && onFetchData();
-  }, [onFetchData]);
-
   // Calculates the default expanded rows of balance sheet table.
   const expandedRows = useMemo(
-    () => defaultExpanderReducer(balanceSheetTableRows, 3),
+    () => defaultExpanderReducer(balanceSheetTableRows, 4),
     [balanceSheetTableRows],
   );
 
-  const rowClassNames = (row) => {
+  const rowClassNames = useCallback((row) => {
     const { original } = row;
-    console.log(row);
+    const rowTypes = Array.isArray(original.row_types)
+      ? original.row_types
+      : [];
+
     return {
-      [`row_type--${original.row_type}`]: original.row_type,
+      ...rowTypes.reduce((acc, rowType) => {
+        acc[`row_type--${rowType}`] = rowType;
+        return acc;
+      }, {}),
     };
-  };
+  }, []);
 
   return (
     <FinancialSheet
       name="balance-sheet"
-      companyName={organizationSettings.name}
+      companyName={companyName}
       sheetType={formatMessage({ id: 'balance_sheet' })}
       fromDate={balanceSheetQuery.from_date}
       toDate={balanceSheetQuery.to_date}
@@ -119,46 +126,29 @@ function BalanceSheetTable({
         columns={columns}
         data={balanceSheetTableRows}
         rowClassNames={rowClassNames}
-        onFetchData={handleFetchData}
         noInitialFetch={true}
-        expanded={expandedRows}
         expandable={true}
+        expanded={expandedRows}
         expandToggleColumn={1}
-        sticky={true}
         expandColumnSpace={0.8}
+        sticky={true}
       />
     </FinancialSheet>
   );
 }
 
-const mapStateToProps = (state, props) => {
-  const { balanceSheetQuery } = props;
-  return {
-    balanceSheetIndex: getFinancialSheetIndexByQuery(
-      state.financialStatements.balanceSheet.sheets,
-      balanceSheetQuery,
-    ),
-  };
-};
-
-const withBalanceSheetTable = connect(mapStateToProps);
-
 export default compose(
-  withBalanceSheetTable,
   withBalanceSheetDetail(
     ({
-      balanceSheetAccounts,
       balanceSheetTableRows,
       balanceSheetColumns,
       balanceSheetQuery,
       balanceSheetLoading,
     }) => ({
-      balanceSheetAccounts,
       balanceSheetTableRows,
       balanceSheetColumns,
       balanceSheetQuery,
       balanceSheetLoading,
     }),
   ),
-  withSettings,
 )(BalanceSheetTable);

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

@@ -1,28 +1,36 @@
 import { connect } from 'react-redux';
 import {
-  getFinancialSheet,
-  getFinancialSheetAccounts,
-  getFinancialSheetColumns,
-  getFinancialSheetQuery,
-  getFinancialSheetTableRows,
+  getFinancialSheetFactory,
+  getFinancialSheetAccountsFactory,
+  getFinancialSheetColumnsFactory,
+  getFinancialSheetQueryFactory,
+  getFinancialSheetTableRowsFactory,
 } from 'store/financialStatement/financialStatements.selectors';
 
-
 export default (mapState) => {
   const mapStateToProps = (state, props) => {
-    const { balanceSheetIndex } = props;
+    const getBalanceSheet = getFinancialSheetFactory('balanceSheet');
+    const getBalanceSheetAccounts = getFinancialSheetAccountsFactory(
+      'balanceSheet',
+    );
+    const getBalanceSheetTableRows = getFinancialSheetTableRowsFactory(
+      'balanceSheet',
+    );
+    const getBalanceSheetColumns = getFinancialSheetColumnsFactory('balanceSheet');
+    const getBalanceSheetQuery = getFinancialSheetQueryFactory('balanceSheet');
+
     const mapped = {
-      balanceSheet: getFinancialSheet(state.financialStatements.balanceSheet.sheets, balanceSheetIndex),
-      balanceSheetAccounts: getFinancialSheetAccounts(state.financialStatements.balanceSheet.sheets, balanceSheetIndex),
-      balanceSheetTableRows: getFinancialSheetTableRows(state.financialStatements.balanceSheet.sheets, balanceSheetIndex),
-      balanceSheetColumns: getFinancialSheetColumns(state.financialStatements.balanceSheet.sheets, balanceSheetIndex),
-      balanceSheetQuery: getFinancialSheetQuery(state.financialStatements.balanceSheet.sheets, balanceSheetIndex),
+      balanceSheet: getBalanceSheet(state, props),
+      balanceSheetAccounts: getBalanceSheetAccounts(state, props),
+      balanceSheetTableRows: getBalanceSheetTableRows(state, props),
+      balanceSheetColumns: getBalanceSheetColumns(state, props),
+      balanceSheetQuery: getBalanceSheetQuery(state, props),
       balanceSheetLoading: state.financialStatements.balanceSheet.loading,
       balanceSheetFilter: state.financialStatements.balanceSheet.filter,
       balanceSheetRefresh: state.financialStatements.balanceSheet.refresh,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };
-  
+
   return connect(mapStateToProps);
-}
+};