feat: financial report numbers format dropdown.

client/package.json

@@ -30,6 +30,7 @@
     "case-sensitive-paths-webpack-plugin": "2.3.0",
     "cross-env": "^7.0.2",
     "css-loader": "3.4.2",
+    "deep-map-keys": "^2.0.1",
     "dotenv": "8.2.0",
     "dotenv-expand": "5.1.0",
     "eslint": "^6.6.0",

client/src/common/numberFormatsOptions.js

@@ -1,18 +1,19 @@
 export const moneyFormat = [
-  { id: 'total', text: 'Total rows' },
+  { key: 'total', text: 'Total rows' },
-  { id: 'always', text: 'Always' },
+  { key: 'always', text: 'Always' },
-  { id: 'none', text: 'None' },
+  { key: 'none', text: 'None' },
 ];
 
 export const negativeFormat = [
-  { id: 'parentheses', text: 'Parentheses ($1000)' },
+  { key: 'parentheses', text: '($1000)' },
-  { id: 'mines', text: 'Minus -$1000' },
+  { key: 'mines', text: '-$1000' },
 ];
 
 export const decimalPlaces = [
-  { text: '1 Decimals', label: '$0.1', id: 1 },
+  { text: '$1', key: 0 },
-  { text: '2 Decimals', label: '$0.01', id: 2 },
+  { text: '$0.1', key: 1 },
-  { text: '3 Decimals', label: '$0.001', id: 3 },
+  { text: '$0.01', key: 2 },
-  { text: '4 Decimals', label: '$0.0001', id: 4 },
+  { text: '$0.001', key: 3 },
-  { text: '5 Decimals', label: '$0.00001', id: 5 },
+  { text: '$0.0001', key: 4 },
+  { text: '$0.00001', key: 5 },
 ];

client/src/components/FinancialSheet.js

@@ -1,9 +1,11 @@
 import React, { useMemo, useCallback } from 'react';
 import moment from 'moment';
 import classnames from 'classnames';
-import { LoadingIndicator, MODIFIER } from 'components';
 import { FormattedMessage as T, useIntl } from 'react-intl';
-import { If } from 'components';
+
+import { If, LoadingIndicator, MODIFIER } from 'components';
+
+import 'style/pages/FinancialStatements/FinancialSheet.scss';
 
 export default function FinancialSheet({
   companyName,

client/src/components/NumberFormatDropdown/NumberFormatFields.js

@@ -0,0 +1,139 @@
+import React from 'react';
+import { FastField, ErrorMessage } from 'formik';
+import { FormGroup, Checkbox, Switch } from '@blueprintjs/core';
+import { CLASSES } from 'common/classes';
+import { ListSelect } from 'components';
+import { FormattedMessage as T } from 'react-intl';
+import { inputIntent } from 'utils';
+import {
+  moneyFormat,
+  negativeFormat,
+  decimalPlaces,
+} from 'common/numberFormatsOptions';
+import classNames from 'classnames';
+
+/**
+ *  Number Formats Fields.
+ */
+export default function NumberFormatFields({}) {
+  return (
+    <div className={'number-format-dropdown__content'}>
+      {/*------------ Negative formats -----------*/}
+      <FastField name={'negativeFormat'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'negative_format'} />}
+            helperText={<ErrorMessage name="negativeFormat" />}
+            intent={inputIntent({ error, touched })}
+            className={classNames(CLASSES.FILL)}
+          >
+            <ListSelect
+              items={negativeFormat}
+              onItemSelect={(format) => {
+                form.setFieldValue('negativeFormat', format.key);
+              }}
+              filterable={false}
+              selectedItem={value}
+              selectedItemProp={'key'}
+              textProp={'text'}
+              popoverProps={{ minimal: true, captureDismiss: true }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/*------------ Decimal places -----------*/}
+      <FastField name={'precision'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'decimal_places'} />}
+            helperText={<ErrorMessage name="format_money" />}
+            intent={inputIntent({ error, touched })}
+            className={classNames(CLASSES.FILL)}
+          >
+            <ListSelect
+              items={decimalPlaces}
+              onItemSelect={(format) => {
+                form.setFieldValue('precision', format.key);
+              }}
+              filterable={false}
+              selectedItem={value}
+              selectedItemProp={'key'}
+              textProp={'text'}
+              popoverProps={{ minimal: true, captureDismiss: true }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/*------------ Money formats -----------*/}
+      <FastField name={'formatMoney'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'money_format'} />}
+            helperText={<ErrorMessage name="formatMoney" />}
+            intent={inputIntent({ error, touched })}
+            className={classNames(CLASSES.FILL)}
+          >
+            <ListSelect
+              items={moneyFormat}
+              onItemSelect={(format) => {
+                form.setFieldValue('formatMoney', format.key);
+              }}
+              filterable={false}
+              selectedItem={value}
+              selectedItemProp={'key'}
+              textProp={'text'}
+              popoverProps={{ minimal: true, captureDismiss: true }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      <div className="toggles-fields">
+        {/*------------ show zero -----------*/}
+        <FastField name={'showZero'} type={'checkbox'}>
+          {({ field }) => (
+            <FormGroup inline={true}>
+              <Switch
+                inline={true}
+                small={true}
+                label={<T id={'show_zero'} />}
+                name={'showZero'}
+                {...field}
+              />
+            </FormGroup>
+          )}
+        </FastField>
+
+        {/*------------ show negative in red-----------*/}
+        <FastField name={'showInRed'} type={'checkbox'}>
+          {({ field }) => (
+            <FormGroup inline={true}>
+              <Switch
+                inline={true}
+                label={<T id={'show_negative_in_red'} />}
+                name={'showInRed'}
+                {...field}
+              />
+            </FormGroup>
+          )}
+        </FastField>
+
+        {/*------------ Divide on 1000 -----------*/}
+        <FastField name={'divideOn1000'} type={'checkbox'}>
+          {({ field }) => (
+            <FormGroup inline={true}>
+              <Switch
+                inline={true}
+                label={<T id={'divide_on_1000'} />}
+                name={'divideOn1000'}
+                {...field}
+              />
+            </FormGroup>
+          )}
+        </FastField>
+      </div>
+    </div>
+  );
+}

client/src/components/NumberFormatDropdown/NumberFormatFooter.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { Button, Classes, Intent } from '@blueprintjs/core';
+import classNames from 'classnames';
+import { FormattedMessage as T } from 'react-intl';
+
+/**
+ * Number format footer.
+ */
+export default function NumberFormatFooter({
+  // #ownProps
+  onCancelClick,
+  submitDisabled
+}) {
+  return (
+    <div className={classNames('number-format-dropdown__footer')}>
+      <Button
+        className={classNames('mr1', Classes.POPOVER_DISMISS)}
+        onClick={onCancelClick}
+        small={true}
+      >
+        <T id={'cancel'} />
+      </Button>
+
+      <Button
+        intent={Intent.PRIMARY}
+        disabled={submitDisabled}
+        small={true}
+        type="submit"
+      >
+        <T id={'run'} />
+      </Button>
+    </div>
+  );
+}

client/src/components/NumberFormatDropdown/index.js

@@ -0,0 +1,45 @@
+import React, { useCallback } from 'react';
+import { Formik, Form } from 'formik';
+
+import 'style/pages/FinancialStatements/NumberFormatDropdown.scss';
+
+import NumberFormatFields from './NumberFormatFields';
+import NumberFormatFooter from './NumberFormatFooter';
+
+/**
+ * Number format form popover content.
+ */
+export default function NumberFormatDropdown({
+  numberFormat = {},
+  onSubmit,
+  submitDisabled = false,
+}) {
+  const initialValues = {
+    formatMoney: 'total',
+    showZero: false,
+    showInRed: false,
+    divideOn1000: false,
+    negativeFormat: 'mines',
+    precision: 2,
+    ...numberFormat
+  };
+  // Handle cancel button click.
+  const handleCancelClick = useCallback(() => {}, []);
+
+  // Handle form submit.
+  const handleFormSubmit = (values, { setSubmitting }) => {
+    setSubmitting(true);
+    onSubmit(values);
+  };
+
+  return (
+    <div className={'number-format-dropdown'}>
+      <Formik initialValues={initialValues} onSubmit={handleFormSubmit}>
+        <Form>
+          <NumberFormatFields onCancelClick={handleCancelClick} />
+          <NumberFormatFooter submitDisabled={submitDisabled} />
+        </Form>
+      </Formik>
+    </div>
+  );
+}

client/src/components/NumberFormats/NumberFormatFields.js

@@ -1,169 +0,0 @@
-import React from 'react';
-import { Form, FastField, ErrorMessage, useFormikContext } from 'formik';
-import {
-  Button,
-  Classes,
-  FormGroup,
-  InputGroup,
-  Intent,
-  Checkbox,
-} from '@blueprintjs/core';
-import { CLASSES } from 'common/classes';
-import { Row, Col, ListSelect } from 'components';
-import { FormattedMessage as T, useIntl } from 'react-intl';
-import { inputIntent } from 'utils';
-import {
-  moneyFormat,
-  negativeFormat,
-  decimalPlaces,
-} from 'common/numberFormatsOptions';
-import classNames from 'classnames';
-
-/**
- *  Number Formats Fields.
- */
-export default function NumberFormatFields({
-  // #ownProps
-  onCancelClick,
-}) {
-  const { isSubmitting } = useFormikContext();
-  return (
-    <Form>
-      <div className={'number-format__content'}>
-        {/*------------ Money formats -----------*/}
-        <FastField name={'format_money'}>
-          {({ form, field: { value }, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'money_format'} />}
-              helperText={<ErrorMessage name="format_money" />}
-              intent={inputIntent({ error, touched })}
-              className={classNames(CLASSES.FILL)}
-            >
-              <ListSelect
-                items={moneyFormat}
-                onItemSelect={(format) => {
-                  form.setFieldValue('format_money', format.name);
-                }}
-                filterable={false}
-                selectedItem={value}
-                selectedItemProp={'id'}
-                textProp={'text'}
-                popoverProps={{ minimal: true, captureDismiss: true }}
-              />
-            </FormGroup>
-          )}
-        </FastField>
-        {/*------------ Negative formats -----------*/}
-        <FastField name={'negative_format'}>
-          {({ form, field: { value }, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'negative_format'} />}
-              helperText={<ErrorMessage name="negative_format" />}
-              intent={inputIntent({ error, touched })}
-              className={classNames(CLASSES.FILL)}
-            >
-              <ListSelect
-                items={negativeFormat}
-                onItemSelect={(format) => {
-                  form.setFieldValue('negative_format', format.name);
-                }}
-                filterable={false}
-                selectedItem={value}
-                selectedItemProp={'id'}
-                textProp={'text'}
-                popoverProps={{ minimal: true, captureDismiss: true }}
-              />
-            </FormGroup>
-          )}
-        </FastField>
-
-        {/*------------ Decimal places -----------*/}
-        <FastField name={'precision'}>
-          {({ form, field: { value }, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'decimal_places'} />}
-              helperText={<ErrorMessage name="format_money" />}
-              intent={inputIntent({ error, touched })}
-              className={classNames(CLASSES.FILL)}
-            >
-              <ListSelect
-                items={decimalPlaces}
-                onItemSelect={(format) => {
-                  form.setFieldValue('precision', format.key);
-                }}
-                filterable={false}
-                selectedItem={value}
-                selectedItemProp={'id'}
-                labelProp={'label'}
-                textProp={'text'}
-                popoverProps={{ minimal: true, captureDismiss: true }}
-              />
-            </FormGroup>
-          )}
-        </FastField>
-
-        {/*------------ show zero -----------*/}
-        <FastField name={'show_zero'} type={'checkbox'}>
-          {({ field }) => (
-            <FormGroup inline={true}>
-              <Checkbox
-                inline={true}
-                label={<T id={'show_zero'} />}
-                name={'show_zero'}
-                {...field}
-              />
-            </FormGroup>
-          )}
-        </FastField>
-        {/*------------ show negative in red-----------*/}
-        <FastField name={'show_in_red'} type={'checkbox'}>
-          {({ field }) => (
-            <FormGroup inline={true}>
-              <Checkbox
-                inline={true}
-                label={<T id={'show_negative_in_red'} />}
-                name={'show_in_red'}
-                {...field}
-              />
-            </FormGroup>
-          )}
-        </FastField>
-        {/*------------ Divide on 1000 -----------*/}
-        <FastField name={'divide_on_1000'} type={'checkbox'}>
-          {({ field }) => (
-            <FormGroup inline={true}>
-              <Checkbox
-                inline={true}
-                label={<T id={'divide_on_1000'} />}
-                name={'divide_on_1000'}
-                {...field}
-              />
-            </FormGroup>
-          )}
-        </FastField>
-      </div>
-      <div
-        className={classNames('number-format__footer', Classes.POPOVER_DISMISS)}
-      >
-        <Button
-          className={'mr1'}
-          onClick={onCancelClick}
-          small={true}
-          style={{ minWidth: '75px' }}
-        >
-          <T id={'cancel'} />
-        </Button>
-
-        <Button
-          intent={Intent.PRIMARY}
-          disabled={isSubmitting}
-          small={true}
-          style={{ minWidth: '75px' }}
-          type="submit"
-        >
-          <T id={'run'} />
-        </Button>
-      </div>
-    </Form>
-  );
-}

client/src/components/NumberFormats/index.js

@@ -1,42 +0,0 @@
-import React, { useState, useCallback, useMemo } from 'react';
-import { Classes } from '@blueprintjs/core';
-import { Formik } from 'formik';
-import classNames from 'classnames';
-import NumberFormatFields from './NumberFormatFields';
-
-import { compose } from 'utils';
-
-/**
- * Number format form popover content.
- */
-function NumberFormats() {
-  const initialValues = useMemo(
-    () => ({
-      format_money: '',
-      show_zero: '',
-      show_in_red: '',
-      divide_on_1000: '',
-      negative_format: '',
-      precision: '',
-    }),
-    [],
-  );
-  // Handle cancel button click.
-  const handleCancelClick = useCallback(() => {}, []);
-
-  // Handle form submit.
-  const handleFormSubmit = (values, { setSubmitting }) => {
-    setSubmitting(true);
-    const form = { ...values };
-  };
-
-  return (
-    <div className={'number-format'}>
-      <Formik initialValues={initialValues} onSubmit={handleFormSubmit}>
-        <NumberFormatFields onCancelClick={handleCancelClick} />
-      </Formik>
-    </div>
-  );
-}
-
-export default NumberFormats;

client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.js

@@ -94,9 +94,19 @@ function ReceivableAgingSummarySheet({
     [refreshARAgingSummary, toggleFilterARAgingSummary],
   );
 
+  const handleNumberFormatSubmit = (numberFormat) => {
+    setQuery({
+      ...query,
+      numberFormat
+    });
+    refreshARAgingSummary(true);
+  };
+
   return (
     <DashboardInsider>
-      <ARAgingSummaryActionsBar />
+      <ARAgingSummaryActionsBar
+        numberFormat={query.numberFormat}
+        onNumberFormatSubmit={handleNumberFormatSubmit}/>
 
       <DashboardPageContent>
         <FinancialStatement>

client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.js

@@ -13,11 +13,13 @@ import classNames from 'classnames';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import Icon from 'components/Icon';
+import NumberFormatDropdown from 'components/NumberFormatDropdown';
 
 import withARAgingSummary from './withARAgingSummary';
 import withARAgingSummaryActions from './withARAgingSummaryActions';
 
 import { compose } from 'utils';
+import { safeInvoke } from '@blueprintjs/core/lib/esm/common/utils';
 
 /**
  * AR Aging summary sheet - Actions bar.
@@ -25,10 +27,15 @@ import { compose } from 'utils';
 function ARAgingSummaryActionsBar({
   // #withReceivableAging
   receivableAgingFilter,
+  ARAgingSummaryLoading,
 
   // #withReceivableAgingActions
   toggleFilterARAgingSummary,
   refreshARAgingSummary,
+
+  // #ownProps
+  numberFormat,
+  onNumberFormatSubmit,
 }) {
   const handleFilterToggleClick = () => {
     toggleFilterARAgingSummary();
@@ -37,6 +44,10 @@ function ARAgingSummaryActionsBar({
   const handleRecalcReport = () => {
     refreshARAgingSummary(true);
   };
+  // Handle number format submit.
+  const handleNumberFormatSubmit = (numberFormat) => {
+    safeInvoke(onNumberFormatSubmit, numberFormat);
+  };
 
   return (
     <DashboardActionsBar>
@@ -64,6 +75,25 @@ function ARAgingSummaryActionsBar({
         />
         <NavbarDivider />
 
+        <Popover
+          content={
+            <NumberFormatDropdown
+              numberFormat={numberFormat}
+              onSubmit={handleNumberFormatSubmit}
+              submitDisabled={ARAgingSummaryLoading}
+            />
+          }
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            className={classNames(Classes.MINIMAL, 'button--filter')}
+            text={<T id={'format'} />}
+            icon={<Icon icon="numbers" width={23} height={16} />}
+          />
+        </Popover>
+
         <Button
           className={Classes.MINIMAL}
           text={<T id={'filter'} />}
@@ -88,7 +118,7 @@ function ARAgingSummaryActionsBar({
 
 export default compose(
   withARAgingSummaryActions,
-  withARAgingSummary(({ receivableAgingSummaryFilter }) => ({
+  withARAgingSummary(({ receivableAgingSummaryLoading }) => ({
-    receivableAgingFilter: receivableAgingSummaryFilter,
+    ARAgingSummaryLoading: receivableAgingSummaryLoading,
   })),
 )(ARAgingSummaryActionsBar);

client/src/containers/FinancialStatements/ARAgingSummary/common.js

@@ -1,5 +1,5 @@
-import { mapKeys, snakeCase } from 'lodash';
+import { transformToCamelCase, flatObject } from 'utils';
 
 export const transfromFilterFormToQuery = (form) => {
-  return mapKeys(form, (v, k) => snakeCase(k));
+  return flatObject(transformToCamelCase(form));
 };

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

@@ -6,6 +6,8 @@ import moment from 'moment';
 import { useIntl } from 'react-intl';
 import { queryCache } from 'react-query';
 
+import 'style/pages/FinancialStatements/BalanceSheet.scss';
+
 import BalanceSheetHeader from './BalanceSheetHeader';
 import BalanceSheetTable from './BalanceSheetTable';
 
@@ -21,8 +23,9 @@ import withBalanceSheetDetail from './withBalanceSheetDetail';
 
 import { transformFilterFormToQuery } from 'containers/FinancialStatements/common';
 
-import 'style/pages/FinancialStatements/BalanceSheet.scss';
+/**
-
+ * Balance sheet.
+ */
 function BalanceSheet({
   // #withDashboardActions
   changePageTitle,
@@ -47,10 +50,11 @@ function BalanceSheet({
     displayColumnsType: 'total',
     accountsFilter: 'all-accounts',
   });
-
   // Fetches the balance sheet.
   const fetchHook = useQuery(['balance-sheet', filter], (key, query) =>
-    fetchBalanceSheet({ ...transformFilterFormToQuery(query) }),
+    fetchBalanceSheet({
+      ...transformFilterFormToQuery(query),
+    }),
   );
 
   useEffect(() => {
@@ -76,23 +80,30 @@ function BalanceSheet({
   }, [setDashboardBackLink]);
 
   // Handle re-fetch balance sheet after filter change.
-  const handleFilterSubmit = useCallback(
+  const handleFilterSubmit = (filter) => {
-    (filter) => {
+    const _filter = {
-      const _filter = {
+      ...filter,
-        ...filter,
+      fromDate: moment(filter.fromDate).format('YYYY-MM-DD'),
-        fromDate: moment(filter.fromDate).format('YYYY-MM-DD'),
+      toDate: moment(filter.toDate).format('YYYY-MM-DD'),
-        toDate: moment(filter.toDate).format('YYYY-MM-DD'),
+    };
-      };
+    setFilter({ ..._filter });
-      setFilter({ ..._filter });
+    refreshBalanceSheet(true);
-      refreshBalanceSheet(true);
+  };
-    },
+
-    [setFilter, refreshBalanceSheet],
+  const handleNumberFormatSubmit = (values) => {
-  );
+    setFilter({
+      ...filter,
+      numberFormat: values,
+    });
+    refreshBalanceSheet(true);
+  };
 
   return (
     <DashboardInsider>
-      <BalanceSheetActionsBar />
+      <BalanceSheetActionsBar
-
+        numberFormat={filter.numberFormat}
+        onNumberFormatSubmit={handleNumberFormatSubmit}
+      />
       <DashboardPageContent>
         <FinancialStatement>
           <BalanceSheetHeader

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

@@ -13,19 +13,25 @@ import classNames from 'classnames';
 
 import Icon from 'components/Icon';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
-import NumberFormats from 'components/NumberFormats';
+import NumberFormatDropdown from 'components/NumberFormatDropdown';
 
-import { compose } from 'utils';
+import { compose, saveInvoke } from 'utils';
 import withBalanceSheetDetail from './withBalanceSheetDetail';
 import withBalanceSheetActions from './withBalanceSheetActions';
+import { safeInvoke } from '@blueprintjs/core/lib/esm/common/utils';
 
 function BalanceSheetActionsBar({
   // #withBalanceSheetDetail
   balanceSheetFilter,
+  balanceSheetLoading,
 
   // #withBalanceSheetActions
   toggleBalanceSheetFilter,
   refreshBalanceSheet,
+
+  // #ownProps
+  numberFormat,
+  onNumberFormatSubmit,
 }) {
   const handleFilterToggleClick = () => {
     toggleBalanceSheetFilter();
@@ -36,6 +42,10 @@ function BalanceSheetActionsBar({
     refreshBalanceSheet(true);
   };
 
+  const handleNumberFormatSubmit = (values) => {
+    safeInvoke(onNumberFormatSubmit, values);
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -63,18 +73,13 @@ function BalanceSheetActionsBar({
         <NavbarDivider />
 
         <Popover
-          // content={}
+          content={
-          interactionKind={PopoverInteractionKind.CLICK}
+            <NumberFormatDropdown
-          position={Position.BOTTOM_LEFT}
+              numberFormat={numberFormat}
-        >
+              onSubmit={handleNumberFormatSubmit}
-          <Button
+              submitDisabled={balanceSheetLoading}
-            className={classNames(Classes.MINIMAL, 'button--filter')}
+            />
-            text={<T id={'filter'} />}
+          }
-            icon={<Icon icon="filter-16" iconSize={16} />}
-          />
-        </Popover>
-        <Popover
-          content={<NumberFormats />}
           minimal={true}
           interactionKind={PopoverInteractionKind.CLICK}
           position={Position.BOTTOM_LEFT}
@@ -82,6 +87,18 @@ function BalanceSheetActionsBar({
           <Button
             className={classNames(Classes.MINIMAL, 'button--filter')}
             text={<T id={'format'} />}
+            icon={<Icon icon="numbers" width={23} height={16} />}
+          />
+        </Popover>
+
+        <Popover
+          // content={}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            className={classNames(Classes.MINIMAL, 'button--filter')}
+            text={<T id={'filter'} />}
             icon={<Icon icon="filter-16" iconSize={16} />}
           />
         </Popover>
@@ -104,6 +121,9 @@ function BalanceSheetActionsBar({
 }
 
 export default compose(
-  withBalanceSheetDetail(({ balanceSheetFilter }) => ({ balanceSheetFilter })),
+  withBalanceSheetDetail(({ balanceSheetFilter, balanceSheetLoading }) => ({
+    balanceSheetFilter,
+    balanceSheetLoading,
+  })),
   withBalanceSheetActions,
 )(BalanceSheetActionsBar);

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

@@ -2,8 +2,6 @@ import React, { useMemo, useCallback } from 'react';
 import { useIntl } from 'react-intl';
 import classNames from 'classnames';
 
-
-import Money from 'components/Money';
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
 
@@ -16,12 +14,7 @@ function TotalCell({ cell }) {
   const row = cell.row.original;
 
   if (row.total) {
-    return (
+    return row.total.formatted_amount;
-      <Money
-        amount={row.total.formatted_amount}
-        currency={row.total.currency_code}
-      />
-    );
   }
   return '';
 }
@@ -32,9 +25,8 @@ const TotalPeriodCell = (index) => ({ cell }) => {
 
   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 amount;
   }
   return '';
 };

client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.js

@@ -13,19 +13,25 @@ import classNames from 'classnames';
 
 import Icon from 'components/Icon';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import NumberFormatDropdown from 'components/NumberFormatDropdown';
 
 import withProfitLossActions from './withProfitLossActions';
 import withProfitLoss from './withProfitLoss';
 
-import { compose } from 'utils';
+import { compose, saveInvoke } from 'utils';
 
 function ProfitLossActionsBar({
   // #withProfitLoss
   profitLossSheetFilter,
+  profitLossSheetLoading,
 
   // #withProfitLossActions
   toggleProfitLossSheetFilter,
   refreshProfitLossSheet,
+
+  // #ownProps
+  numberFormat,
+  onNumberFormatSubmit,
 }) {
   const handleFilterClick = () => {
     toggleProfitLossSheetFilter();
@@ -34,6 +40,10 @@ function ProfitLossActionsBar({
   const handleRecalcReport = () => {
     refreshProfitLossSheet(true);
   };
+  // Handle number format submit.
+  const handleNumberFormatSubmit = (values) => {
+    saveInvoke(onNumberFormatSubmit, values);
+  };
 
   return (
     <DashboardActionsBar>
@@ -61,6 +71,25 @@ function ProfitLossActionsBar({
         />
         <NavbarDivider />
 
+        <Popover
+          content={
+            <NumberFormatDropdown
+              numberFormat={numberFormat}
+              onSubmit={handleNumberFormatSubmit}
+              submitDisabled={profitLossSheetLoading}
+            />
+          }
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            className={classNames(Classes.MINIMAL, 'button--filter')}
+            text={<T id={'format'} />}
+            icon={<Icon icon="numbers" width={23} height={16} />}
+          />
+        </Popover>
+
         <Popover
           // content={}
           interactionKind={PopoverInteractionKind.CLICK}

client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js

@@ -77,18 +77,28 @@ function ProfitLossSheet({
     { manual: true });
 
   // Handle submit filter.
-  const handleSubmitFilter = useCallback((filter) => {
+  const handleSubmitFilter = (filter) => {
     const _filter = {
       ...filter,
       fromDate: moment(filter.fromDate).format('YYYY-MM-DD'),
       toDate: moment(filter.toDate).format('YYYY-MM-DD'),
     };
     setFilter(_filter);
-  }, [setFilter]);
+  };
+  // Handle number format submit.
+  const handleNumberFormatSubmit = (numberFormat) => {
+    setFilter({
+      ...filter,
+      numberFormat,
+    });
+  };
 
   return (
     <DashboardInsider>
-      <ProfitLossActionsBar />
+      <ProfitLossActionsBar
+        numberFormat={filter.numberFormat}
+        onNumberFormatSubmit={handleNumberFormatSubmit}
+      />
  
       <DashboardPageContent>
         <div class="financial-statement">

client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js

@@ -32,18 +32,7 @@ function ProfitLossSheetTable({
         ? [
             {
               Header: formatMessage({ id: 'total' }),
-              Cell: ({ cell }) => {
+              accessor: 'total.formatted_amount',
-                const row = cell.row.original;
-                if (row.total) {
-                  return (
-                    <Money
-                      amount={row.total.formatted_amount}
-                      currency={row.total.currency_code}
-                    />
-                  );
-                }
-                return '';
-              },
               className: 'total',
               width: 140,
             },
@@ -53,13 +42,7 @@ function ProfitLossSheetTable({
         ? profitLossColumns.map((column, index) => ({
             id: `date_period_${index}`,
             Header: column,
-            accessor: (row) => {
+            accessor: `total_periods[${index}].formatted_amount`,
-              if (row.total_periods && row.total_periods[index]) {
-                const amount = row.total_periods[index].formatted_amount;
-                return <Money amount={amount} currency={'USD'} />;
-              }
-              return '';
-            },
             width: getColumnWidth(
               profitLossTableRows,
               `total_periods.${index}.formatted_amount`,
@@ -69,7 +52,12 @@ function ProfitLossSheetTable({
           }))
         : []),
     ],
-    [profitLossQuery.display_columns_type, profitLossTableRows, profitLossColumns, formatMessage],
+    [
+      profitLossQuery.display_columns_type,
+      profitLossTableRows,
+      profitLossColumns,
+      formatMessage,
+    ],
   );
 
   // Retrieve default expanded rows of balance sheet.
@@ -81,9 +69,7 @@ function ProfitLossSheetTable({
   // Retrieve conditional datatable row classnames.
   const rowClassNames = useCallback((row) => {
     const { original } = row;
-    const rowTypes = Array.isArray(original.rowTypes)
+    const rowTypes = Array.isArray(original.rowTypes) ? original.rowTypes : [];
-      ? original.rowTypes
-      : [];
 
     return {
       ...rowTypes.reduce((acc, rowType) => {

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

@@ -13,18 +13,24 @@ import { FormattedMessage as T } from 'react-intl';
 
 import Icon from 'components/Icon';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import NumberFormatDropdown from 'components/NumberFormatDropdown';
 
 import withTrialBalance from './withTrialBalance';
 import withTrialBalanceActions from './withTrialBalanceActions';
-import { compose } from 'utils';
+import { compose, saveInvoke } from 'utils';
 
 function TrialBalanceActionsBar({
   // #withTrialBalance
   trialBalanceSheetFilter,
+  trialBalanceSheetLoading,
 
   // #withTrialBalanceActions
   toggleTrialBalanceFilter,
   refreshTrialBalance,
+
+  // #ownProps
+  numberFormat,
+  onNumberFormatSubmit
 }) {
   const handleFilterToggleClick = () => {
     toggleTrialBalanceFilter();
@@ -34,6 +40,10 @@ function TrialBalanceActionsBar({
     refreshTrialBalance(true);
   };
 
+  // Handle number format submit.
+  const handleNumberFormatSubmit = (values) => {
+    saveInvoke(onNumberFormatSubmit, values);
+  };
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -60,6 +70,25 @@ function TrialBalanceActionsBar({
         />
         <NavbarDivider />
 
+        <Popover
+          content={
+            <NumberFormatDropdown
+              numberFormat={numberFormat}
+              onSubmit={handleNumberFormatSubmit}
+              submitDisabled={trialBalanceSheetLoading}
+            />
+          }
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            className={classNames(Classes.MINIMAL, 'button--filter')}
+            text={<T id={'format'} />}
+            icon={<Icon icon="numbers" width={23} height={16} />}
+          />
+        </Popover>
+
         <Popover
           // content={}
           interactionKind={PopoverInteractionKind.CLICK}
@@ -88,8 +117,9 @@ function TrialBalanceActionsBar({
 }
 
 export default compose(
-  withTrialBalance(({ trialBalanceSheetFilter }) => ({
+  withTrialBalance(({ trialBalanceSheetFilter, trialBalanceSheetLoading }) => ({
     trialBalanceSheetFilter,
+    trialBalanceSheetLoading
   })),
   withTrialBalanceActions,
 )(TrialBalanceActionsBar);

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

@@ -92,9 +92,20 @@ function TrialBalanceSheet({
     }
   }, [trialBalanceSheetRefresh, refreshTrialBalance]);
 
+  const handleNumberFormatSubmit = (numberFormat) => {
+    setFilter({
+      ...filter,
+      numberFormat,
+    });
+    refreshTrialBalance(false);
+  };
+
   return (
     <DashboardInsider>
-      <TrialBalanceActionsBar />
+      <TrialBalanceActionsBar
+        numberFormat={filter.numberFormat}
+        onNumberFormatSubmit={handleNumberFormatSubmit}
+      />
 
       <DashboardPageContent>
         <div class="financial-statement">
@@ -102,7 +113,6 @@ function TrialBalanceSheet({
             pageFilter={filter}
             onSubmitFilter={handleFilterSubmit}
           />
-
           <div class="financial-statement__body">
             <TrialBalanceSheetTable companyName={organizationName} />
           </div>

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

@@ -31,11 +31,7 @@ function TrialBalanceSheetTable({
       },
       {
         Header: formatMessage({ id: 'credit' }),
-        accessor: 'credit',
+        accessor: 'formatted_credit',
-        Cell: ({ cell }) => {
-          const { currency_code, credit } = cell.row.original;
-          return <Money amount={credit} currency={currency_code} />;
-        },
         className: 'credit',
         width: getColumnWidth(trialBalanceTableRows, `credit`, {
           minWidth: 95,
@@ -43,20 +39,12 @@ function TrialBalanceSheetTable({
       },
       {
         Header: formatMessage({ id: 'debit' }),
-        accessor: 'debit',
+        accessor: 'formatted_debit',
-        Cell: ({ cell }) => {
-          const { currency_code, debit } = cell.row.original;
-          return <Money amount={debit} currency={currency_code} />;
-        },
         width: getColumnWidth(trialBalanceTableRows, `debit`, { minWidth: 95 }),
       },
       {
         Header: formatMessage({ id: 'balance' }),
-        accessor: 'balance',
+        accessor: 'formatted_balance',
-        Cell: ({ cell }) => {
-          const { currency_code, balance } = cell.row.original;
-          return <Money amount={balance} currency={currency_code} />;
-        },
         className: 'balance',
         width: getColumnWidth(trialBalanceTableRows, `balance`, {
           minWidth: 95,

client/src/containers/FinancialStatements/common.js

@@ -1,4 +1,5 @@
 import { mapKeys, omit, snakeCase } from 'lodash';
+import { transformToCamelCase, flatObject } from 'utils';
 import { formatMessage } from 'services/intl';
 
 export const displayColumnsByOptions = [
@@ -52,10 +53,11 @@ export const transformDisplayColumnsType = (form) => {
 };
 
 export const transformFilterFormToQuery = (form) => {
-  return mapKeys({
+  const transformed = transformToCamelCase({
     ...omit(form, ['accountsFilter']),
     ...transformDisplayColumnsType(form),
     noneZero: form.accountsFilter === 'without-zero-balance',
     noneTransactions: form.accountsFilter === 'with-transactions',
-  }, (v, k) => snakeCase(k));
+  });
+  return flatObject(transformed);
 };

client/src/lang/en/index.js

@@ -960,9 +960,9 @@ export default {
   select_adjustment_account: 'Select adjustment account',
   qty: 'Quantity on hand',
   money_format: 'Money format',
-  show_zero: 'Show zero',
+  show_zero: 'Show zero.',
-  show_negative_in_red: 'Show negative in red',
+  show_negative_in_red: 'Show negative in red.',
-  divide_on_1000: 'Divide on 1000',
+  divide_on_1000: 'Divide on 1000.',
   negative_format: 'Negative format',
   decimal_places: 'Decimal places',
   run: 'Run',

client/src/static/json/icons.js

@@ -354,4 +354,12 @@ export default {
     path: ['M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'],
     viewBox: '0 0 24 24',
   },
+  'numbers': {
+    path: [
+      'M2.9377,11V5.26q0-.3633.0069-.9238T2.98,3.3a3.6334,3.6334,0,0,1-.35.3785q-.1677.1538-.3642.3076L1.16,4.9105.0535,3.5246,3.19,1.0046H5.08V11Z',
+      'M7.8655,11V9.5158l2.5058-2.5332q.7559-.77,1.2178-1.295a4.512,4.512,0,0,0,.6719-.9521,2.0537,2.0537,0,0,0,.21-.917,1.0375,1.0375,0,0,0-.3711-.875,1.455,1.455,0,0,0-.917-.2871,2.2924,2.2924,0,0,0-1.0712.2661A6.6756,6.6756,0,0,0,9,3.6789L7.8376,2.2926A10.771,10.771,0,0,1,8.7615,1.6a4.4132,4.4132,0,0,1,1.1264-.5323A4.931,4.931,0,0,1,11.3791.8644a3.9291,3.9291,0,0,1,1.7012.3433,2.6249,2.6249,0,0,1,1.1123.9521,2.5386,2.5386,0,0,1,.3926,1.4068A3.5845,3.5845,0,0,1,14.27,5.0788a5.32,5.32,0,0,1-.9307,1.3579q-.6166.6715-1.4981,1.498L10.595,9.1378v.07h4.27V11Z',
+      'M18.91,11.14a7.8841,7.8841,0,0,1-1.582-.14,7.3067,7.3067,0,0,1-1.3155-.4062v-1.82a5.5853,5.5853,0,0,0,1.3438.498,5.9318,5.9318,0,0,0,1.3164.16,2.5022,2.5022,0,0,0,1.5742-.3779,1.2582,1.2582,0,0,0,.4556-1.0216,1.105,1.105,0,0,0-.5459-1.0078,3.7194,3.7194,0,0,0-1.8477-.336h-.7422V5.0368h.7558a3.0031,3.0031,0,0,0,1.708-.378,1.167,1.167,0,0,0,.5322-.9941.93.93,0,0,0-.3779-.8052,1.7126,1.7126,0,0,0-1.0225-.2729,3.1339,3.1339,0,0,0-1.28.2451,6.4963,6.4963,0,0,0-.917.4829l-.9248-1.4277a6.0463,6.0463,0,0,1,1.3867-.7212A5.67,5.67,0,0,1,19.4149.8644a3.838,3.838,0,0,1,2.3945.6514,2.08,2.08,0,0,1,.84,1.729,2.2193,2.2193,0,0,1-.6231,1.6518,3.2277,3.2277,0,0,1-1.5332.84v.042a3.1845,3.1845,0,0,1,1.8272.7422,2.1271,2.1271,0,0,1,.623,1.624,2.8,2.8,0,0,1-.4267,1.5185A2.9013,2.9013,0,0,1,21.2,10.7415,5.6336,5.6336,0,0,1,18.91,11.14Z'
+    ],
+    viewBox: '0 0 23 12',
+  }
 };

client/src/store/financialStatement/financialStatements.mappers.js

@@ -104,7 +104,7 @@ export const ARAgingSummaryTableRowsMapper = (sheet, total) => {
   return [
     ...rows,
     {
-      name: 'Total Aged Receivable',
+      name: '',
       rowType: 'total',
       current: sheet.total.current.formatted_amount,
       ...mapAging(sheet.total.aging),

client/src/style/App.scss

@@ -26,12 +26,9 @@
 @import 'components/Tooltip';
 
 // Pages
-@import 'pages/financial-statements';
 @import 'pages/view-form';
 @import 'pages/register-organizaton';
 
-@import 'pages/number-format.scss';
-
 // Views
 @import 'views/filter-dropdown';
 

client/src/style/pages/Dashboard/Dashboard.scss

@@ -136,7 +136,7 @@
       }
       .#{$ns}-button {
         color: #32304a;
-        padding: 8px 12px;
+        padding: 8px 10px;
 
         &:hover {
           background: rgba(167, 182, 194, 0.12);

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

@@ -15,9 +15,11 @@
         .tbody{
           .tr .td{
             border-bottom: 0;
+            padding-top: 0.4rem;
+            padding-bottom: 0.4rem;
           }
           .tr:not(:first-child) .td{
-            border-top: 1px solid #E8E8E8;
+            border-top: 1px solid transparent;
           }
           .tr.row-type--total{
             font-weight: 500;

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

@@ -14,6 +14,8 @@
       .tbody{
         .tr .td{
           border-bottom: 0;
+          padding-top: 0.4rem;
+          padding-bottom: 0.4rem;
         }
         .tr.row_type--total-row .td{
           border-top: 1px solid #BBB;

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

@@ -1,7 +1,3 @@
-// .form-group-display-columns-by{
-//   position: relative;
-// }
-
 
 .bigcapital-datatable{
  
@@ -20,15 +16,3 @@
     }  
   }
 }
-
-
-
-.financial-statement--journal{
-
-
-  .financial-header-drawer{
-    .bp3-drawer{
-      max-height: 350px;
-    }
-  }
-}

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

@@ -28,4 +28,4 @@
       max-height: 350px;
     }
   }
-}
+}

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

@@ -0,0 +1,43 @@
+
+
+.number-format-dropdown{
+  width: 300px;
+  padding: 15px;
+
+  .bp3-form-group{
+    margin-bottom: 6px;
+
+    label.bp3-label{
+      font-size: 13px;
+      margin-bottom: 4px;
+      font-weight: 500;
+    }
+    .bp3-button{
+      min-height: 28px;
+      min-width: 28px;
+    }
+  }
+  .bp3-control.bp3-inline{
+    margin-bottom: 0;
+    margin-top: 0;
+  }
+  .toggles-fields{
+    margin-top: 14px;
+  }
+  &__footer{
+    text-align: right;  
+    padding-top: 10px;
+
+    .bp3-button.bp3-small,
+    .bp3-button:not([class*="bp3-intent-"]):not(.bp3-minimal).bp3-small{
+      min-width: 65px;
+      height: 26px;
+      min-height: 26px;
+    }
+  }
+
+  .bp3-control .bp3-control-indicator{
+    height: 16px;
+    width: 16px;
+  }
+}

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

@@ -12,6 +12,8 @@
       .tbody{
         .tr .td{
           border-bottom: 0;
+          padding-top: 0.4rem;
+          padding-bottom: 0.4rem;
         }
         .tr.row_type--total{
           font-weight: 500;

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

@@ -5,10 +5,18 @@
     min-width: 720px;
 
     .financial-sheet__table{
-      
+      .thead,
+      .tbody{
+        .tr .td:not(:first-child),
+        .tr .th:not(:first-child) {
+          justify-content: flex-end;
+        }
+      }
       .tbody{
         .tr .td{
           border-bottom: 0;
+          padding-top: 0.4rem;
+          padding-bottom: 0.4rem;
         }
         .balance.td{
           border-top-color: #000;

client/src/style/pages/number-format.scss

@@ -1,24 +0,0 @@
-.number-format {
-  width: 400px;
-  padding: 12px;
-  //    width: 300px;
-  //    padding: 10px;
-  &__content {
-    .bp3-form-group {
-      margin-bottom: 5px;
-      // margin-bottom: 0px;
-      .bp3-form-content {
-        .bp3-label {
-          margin-bottom: 3px;
-        }
-        .bp3-control {
-          margin: 5px 0px 0px;
-        }
-      }
-    }
-  }
-  &__footer {
-    display: flex;
-    justify-content: flex-end;
-  }
-}

client/src/utils.js

@@ -4,6 +4,8 @@ import { Intent } from '@blueprintjs/core';
 import Currency from 'js-money/lib/currency';
 import PProgress from 'p-progress';
 import accounting from 'accounting';
+import deepMapKeys from 'deep-map-keys';
+ 
 
 export function removeEmptyFromObject(obj) {
   obj = Object.assign({}, obj);
@@ -371,8 +373,6 @@ export function isBlank(value) {
   return _.isEmpty(value) && !_.isNumber(value) || _.isNaN(value);
 }
 
-
-
 export const getColumnWidth = (
   rows,
   accessor,
@@ -389,7 +389,32 @@ export const getColumnWidth = (
   return result;
 };
 
-
 export const toSafeNumber = (number) => {
   return _.toNumber(_.defaultTo(number, 0));
+};
+
+export const transformToCamelCase = (object) => {
+  return deepMapKeys(object, (key) => _.snakeCase(key));
+};
+
+
+export function flatObject(obj) {
+  const flatObject = {};
+  const path = []; // current path
+
+  function dig(obj) {
+      if (obj !== Object(obj))
+          /*is primitive, end of path*/
+          return flatObject[path.join('.')] = obj; /*<- value*/ 
+  
+      //no? so this is an object with keys. go deeper on each key down
+      for (let key in obj) {
+          path.push(key);
+          dig(obj[key]);
+          path.pop();
+      }
+  }
+
+  dig(obj);
+  return flatObject;
 }