feat: balance sheet report.

feat: trial balance sheet. feat: general ledger report. feat: journal report. feat: profit/loss report.
2026-02-19 22:30:31 +00:00 · 2020-12-30 20:39:17 +02:00
parent de9f6d9521
commit 7ae73ed6cd
62 changed files with 2403 additions and 1850 deletions
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js
+++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js
@@ -1,20 +1,24 @@
 import React from 'react';
-import { NavbarGroup, Button, Classes, NavbarDivider } from '@blueprintjs/core';
-import Icon from 'components/Icon';
-import { FormattedMessage as T } from 'react-intl';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import {
+  NavbarGroup,
+  Button,
+  Classes,
+  NavbarDivider,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+} from '@blueprintjs/core';
 import classNames from 'classnames';
-// import FilterDropdown from 'components/FilterDropdown';
+import { FormattedMessage as T } from 'react-intl';

-import { If } from 'components';
+import Icon from 'components/Icon';
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';

 import withTrialBalance from './withTrialBalance';
 import withTrialBalanceActions from './withTrialBalanceActions';
 import { compose } from 'utils';

-
 function TrialBalanceActionsBar({
-
  // #withTrialBalance
  trialBalanceSheetFilter,

@@ -22,7 +26,6 @@ function TrialBalanceActionsBar({
  toggleTrialBalanceFilter,
  refreshTrialBalance,
 }) {
-
  const handleFilterToggleClick = () => {
    toggleTrialBalanceFilter();
  };
@@ -35,45 +38,43 @@ function TrialBalanceActionsBar({
    <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={'Re-calc Report'}
          onClick={handleRecalcReport}
          icon={<Icon icon="refresh-16" iconSize={16} />}
        />
-
-        <If condition={trialBalanceSheetFilter}>
-          <Button
-            className={Classes.MINIMAL}
-            text={<T id={'hide_filter'} />}
-            icon={<Icon icon="arrow-to-top" />}
-            onClick={handleFilterToggleClick}
-          />
-        </If>
-
-        <If condition={!trialBalanceSheetFilter}>
-          <Button
-            className={Classes.MINIMAL}
-            text={<T id={'show_filter'} />}
-            icon={<Icon icon="arrow-to-bottom" />}
-            onClick={handleFilterToggleClick}
-          />
-        </If>
-
        <NavbarDivider />

+        <Button
+          className={classNames(Classes.MINIMAL, 'button--table-views')}
+          icon={<Icon icon="cog-16" iconSize={16} />}
+          text={
+            trialBalanceSheetFilter ? (
+              <T id={'hide_customizer'} />
+            ) : (
+              <T id={'customize_report'} />
+            )
+          }
+          active={trialBalanceSheetFilter}
+          onClick={handleFilterToggleClick}
+        />
+        <NavbarDivider />
+
+        <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>
+
        <Button
          className={Classes.MINIMAL}
-          icon={<Icon icon='print-16' iconSize={16} />}
+          icon={<Icon icon="print-16" iconSize={16} />}
          text={<T id={'print'} />}
        />
        <Button
@@ -87,6 +88,8 @@ function TrialBalanceActionsBar({
 }

 export default compose(
-  withTrialBalance(({ trialBalanceSheetFilter }) => ({ trialBalanceSheetFilter })),
-  withTrialBalanceActions
-)(TrialBalanceActionsBar);
+  withTrialBalance(({ trialBalanceSheetFilter }) => ({
+    trialBalanceSheetFilter,
+  })),
+  withTrialBalanceActions,
+)(TrialBalanceActionsBar);
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js
+++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js
@@ -2,73 +2,93 @@ import React, { useEffect, useCallback, useState } from 'react';
 import { useQuery } from 'react-query';
 import moment from 'moment';
 import { useIntl } from 'react-intl';
+import { queryCache } from 'react-query';

+import TrialBalanceActionsBar from './TrialBalanceActionsBar';
 import TrialBalanceSheetHeader from './TrialBalanceSheetHeader';
 import TrialBalanceSheetTable from './TrialBalanceSheetTable';
-import TrialBalanceActionsBar from './TrialBalanceActionsBar';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';

 import { compose } from 'utils';
+import { transformFilterFormToQuery } from 'containers/FinancialStatements/common';

 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withTrialBalanceActions from './withTrialBalanceActions';
 import withSettings from 'containers/Settings/withSettings';
+import withTrialBalance from './withTrialBalance';

+/**
+ * Trial balance sheet.
+ */
 function TrialBalanceSheet({
  // #withDashboardActions
  changePageTitle,
+  setDashboardBackLink,
+
+  // #withTrialBalance
+  trialBalanceSheetRefresh,

  // #withTrialBalanceActions
  fetchTrialBalanceSheet,
+  refreshTrialBalance,

  // #withPreferences
-  organizationSettings,
+  organizationName,
 }) {
-  const [filter, setFilter] = useState({
-    from_date: moment().startOf('year').format('YYYY-MM-DD'),
-    to_date: moment().endOf('year').format('YYYY-MM-DD'),
-    basis: 'accural',
-    none_zero: false,
-  });
-  const [refresh, setRefresh] = useState(true);
  const { formatMessage } = useIntl();

-  const fetchHook = useQuery(
-    ['trial-balance', filter],
-    (key, query) => fetchTrialBalanceSheet(query),
+  const [filter, setFilter] = useState({
+    fromDate: moment().startOf('year').format('YYYY-MM-DD'),
+    toDate: moment().endOf('year').format('YYYY-MM-DD'),
+    basis: 'accural',
+    accountsFilter: 'all-accounts',
+  });
+
+  // Fetches trial balance sheet.
+  const fetchSheet = useQuery(
+    ['trial-balance-sheet', filter],
+    (key, query) =>
+      fetchTrialBalanceSheet({
+        ...transformFilterFormToQuery(query),
+      }),
    { manual: true },
  );
-
-  // handle fetch data of trial balance table.
-  const handleFetchData = useCallback(() => {
-    setRefresh(true);
-  }, []);
-
  // Change page title of the dashboard.
  useEffect(() => {
    changePageTitle(formatMessage({ id: 'trial_balance_sheet' }));
  }, [changePageTitle, formatMessage]);

+  useEffect(() => {
+    // Show the back link on dashboard topbar.
+    setDashboardBackLink(true);
+
+    return () => {
+      // Hide the back link on dashboard topbar.
+      setDashboardBackLink(false);
+    };
+  });
+
  const handleFilterSubmit = useCallback(
    (filter) => {
      const parsedFilter = {
        ...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(parsedFilter);
-      setRefresh(true);
+      refreshTrialBalance(true);
    },
-    [fetchHook],
+    [setFilter, refreshTrialBalance],
  );

+  // Observes the trial balance sheet refresh to invaoid the query.
  useEffect(() => {
-    if (refresh) {
-      fetchHook.refetch({ force: true });
-      setRefresh(false);
+    if (trialBalanceSheetRefresh) {
+      queryCache.invalidateQueries('trial-balance-sheet');
+      refreshTrialBalance(false);
    }
-  }, [refresh, fetchHook.refetch]);
+  }, [trialBalanceSheetRefresh, refreshTrialBalance]);

  return (
    <DashboardInsider>
@@ -82,11 +102,7 @@ function TrialBalanceSheet({
          />

          <div class="financial-statement__body">
-            <TrialBalanceSheetTable
-              companyName={organizationSettings.name}
-              trialBalanceQuery={filter}
-              onFetchData={handleFetchData}
-            />
+            <TrialBalanceSheetTable companyName={organizationName} />
          </div>
        </div>
      </DashboardPageContent>
@@ -97,5 +113,10 @@ function TrialBalanceSheet({
 export default compose(
  withDashboardActions,
  withTrialBalanceActions,
-  withSettings,
+  withTrialBalance(({ trialBalanceSheetRefresh }) => ({
+    trialBalanceSheetRefresh,
+  })),
+  withSettings(({ organizationSettings }) => ({
+    organizationName: organizationSettings.name,
+  })),
 )(TrialBalanceSheet);
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js
+++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js
@@ -1,15 +1,12 @@
-import React, { useEffect, useCallback } from 'react';
+import React from 'react';
 import * as Yup from 'yup';
 import moment from 'moment';
-import { Row, Col, Visible } from 'react-grid-system';
 import { FormattedMessage as T, useIntl } from 'react-intl';
-import { FormGroup } from '@blueprintjs/core';
-import { useFormik } from 'formik';
+import { Formik, Form } from 'formik';
+import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';

 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
-import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
-import RadiosAccountingBasis from '../RadiosAccountingBasis';
-import FinancialAccountsFilter from '../FinancialAccountsFilter';
+import TrialBalanceSheetHeaderGeneralPanel from './TrialBalanceSheetHeaderGeneralPanel';

 import withTrialBalance from './withTrialBalance';
 import withTrialBalanceActions from './withTrialBalanceActions';
@@ -17,6 +14,7 @@ import withTrialBalanceActions from './withTrialBalanceActions';
 import { compose } from 'utils';

 function TrialBalanceSheetHeader({
+  // #ownProps
  pageFilter,
  onSubmitFilter,

@@ -26,78 +24,78 @@ function TrialBalanceSheetHeader({

  // #withTrialBalanceActions
  refreshTrialBalance,
+  toggleTrialBalanceFilter
 }) {
  const { formatMessage } = useIntl();
-  const formik = useFormik({
-    enableReinitialize: true,
-    initialValues: {
-      ...pageFilter,
-      from_date: moment(pageFilter.from_date).toDate(),
-      to_date: moment(pageFilter.to_date).toDate(),
-    },
-    validationSchema: Yup.object().shape({
-      from_date: Yup.date()
-        .required()
-        .label(formatMessage({ id: 'from_date' })),
-      to_date: Yup.date()
-        .min(Yup.ref('from_date'))
-        .required()
-        .label(formatMessage({ id: 'to_date' })),
-    }),
-    onSubmit: (values, { setSubmitting }) => {
-      onSubmitFilter(values);
-      setSubmitting(false);
-    },
+
+  // Form validation schema.
+  const validationSchema = Yup.object().shape({
+    fromDate: Yup.date()
+      .required()
+      .label(formatMessage({ id: 'from_date' })),
+    toDate: Yup.date()
+      .min(Yup.ref('fromDate'))
+      .required()
+      .label(formatMessage({ id: 'to_date' })),
  });

-  useEffect(() => {
-    if (trialBalanceSheetRefresh) {
-      formik.submitForm();
-      refreshTrialBalance(false);
-    }
-  }, [formik, trialBalanceSheetRefresh]);
+  // Initial values.
+  const initialValues = {
+    ...pageFilter,
+    fromDate: moment(pageFilter.fromDate).toDate(),
+    toDate: moment(pageFilter.toDate).toDate(),
+  };

-  const handleAccountingBasisChange = useCallback(
-    (value) => {
-      formik.setFieldValue('basis', value);
-    },
-    [formik],
-  );
+  // Handle form submit.
+  const handleSubmit = (values, { setSubmitting }) => {
+    onSubmitFilter(values);
+    setSubmitting(false);
+    toggleTrialBalanceFilter(false);
+  };

-  const handleAccountsFilterSelect = (filterType) => {
-    const noneZero = filterType.key === 'without-zero-balance' ? true : false;
-    formik.setFieldValue('none_zero', noneZero);
+  // Handle drawer close action.
+  const handleDrawerClose = () => {
+    toggleTrialBalanceFilter(false);
+  };
+
+  // Handle cancel button click.
+  const handleCancelClick = () => {
+    toggleTrialBalanceFilter(false);
  };

  return (
-    <FinancialStatementHeader show={trialBalanceSheetFilter}>
-      <Row>
-        <FinancialStatementDateRange formik={formik} />
-
-        <Visible xl>
-          <Col width={'100%'} />
-        </Visible>
-
-        <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={trialBalanceSheetFilter}
+      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={<TrialBalanceSheetHeaderGeneralPanel />}
            />
-          </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>
  );
 }
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeaderGeneralPanel.js
+++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeaderGeneralPanel.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
+import RadiosAccountingBasis from '../RadiosAccountingBasis';
+import FinancialAccountsFilter from '../FinancialAccountsFilter';
+
+/**
+ * Trial balance sheet - Drawer header - General panel.
+ */
+export default function TrialBalanceSheetHeaderGeneralPanel({
+
+}) {
+  return (
+    <div>
+      <FinancialStatementDateRange />
+      <FinancialAccountsFilter initialSelectedItem={'all-accounts'} />
+      <RadiosAccountingBasis />
+    </div>
+  );
+}
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js
+++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js
@@ -1,11 +1,9 @@
-import React, { useCallback, useMemo } from 'react';
-import { connect } from 'react-redux';
+import React, { useMemo } from 'react';
 import { useIntl } from 'react-intl';

 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
 import Money from 'components/Money';
-import { getFinancialSheetIndexByQuery } from 'store/financialStatement/financialStatements.selectors';

 import withTrialBalance from './withTrialBalance';

@@ -13,14 +11,12 @@ import { compose } from 'utils';

 function TrialBalanceSheetTable({
  // #withTrialBalanceDetail
-  trialBalanceAccounts,
+  trialBalance,
  trialBalanceSheetLoading,

  // #withTrialBalanceTable
-  trialBalanceIndex,
  trialBalanceQuery,

-  onFetchData,
  companyName,
 }) {
  const { formatMessage } = useIntl();
@@ -29,55 +25,46 @@ function TrialBalanceSheetTable({
    () => [
      {
        Header: formatMessage({ id: 'account_name' }),
-        accessor: 'name',
+        accessor: (row) => (row.code ? `${row.name} - ${row.code}` : row.name),
        className: 'name',
        minWidth: 150,
        maxWidth: 150,
        width: 150,
      },
-      {
-        Header: formatMessage({ id: 'code' }),
-        accessor: 'code',
-        className: 'code',
-        minWidth: 80,
-        maxWidth: 80,
-        width: 80,
-      },
      {
        Header: formatMessage({ id: 'credit' }),
        accessor: 'credit',
-        Cell: ({ cell }) => <Money amount={cell.row.original.credit} currency="USD" />,
+        Cell: ({ cell }) => {
+          const { currency_code, credit } = cell.row.original;
+          return (<Money amount={credit} currency={currency_code} />);
+        },
        className: 'credit',
-        minWidth: 95,
-        maxWidth: 95,
        width: 95,
      },
      {
        Header: formatMessage({ id: 'debit' }),
        accessor: 'debit',
-        Cell: ({ cell }) => <Money amount={cell.row.original.debit} currency="USD" />,
+        Cell: ({ cell }) => {
+          const { currency_code, debit } = cell.row.original;
+          return (<Money amount={debit} currency={currency_code} />);
+        },
        className: 'debit',
-        minWidth: 95,
-        maxWidth: 95,
        width: 95,
      },
      {
        Header: formatMessage({ id: 'balance' }),
        accessor: 'balance',
-        Cell: ({ cell }) => <Money amount={cell.row.original.balance} currency="USD" />,
+        Cell: ({ cell }) => {
+          const { currency_code, balance } = cell.row.original;
+          return (<Money amount={balance} currency={currency_code} />);
+        },
        className: 'balance',
-        minWidth: 95,
-        maxWidth: 95,
        width: 95,
      },
    ],
    [formatMessage],
  );

-  const handleFetchData = useCallback(() => {
-    onFetchData && onFetchData();
-  }, [onFetchData]);
-
  return (
    <FinancialSheet
      companyName={companyName}
@@ -86,12 +73,12 @@ function TrialBalanceSheetTable({
      toDate={trialBalanceQuery.to_date}
      name="trial-balance"
      loading={trialBalanceSheetLoading}
+      basis={'cash'}
    >
      <DataTable
        className="bigcapital-datatable--financial-report"
        columns={columns}
-        data={trialBalanceAccounts}
-        onFetchData={handleFetchData}
+        data={trialBalance.data}
        expandable={true}
        expandToggleColumn={1}
        expandColumnSpace={1}
@@ -101,25 +88,14 @@ function TrialBalanceSheetTable({
  );
 }

-const mapStateToProps = (state, props) => {
-  const { trialBalanceQuery } = props;
-  return {
-    trialBalanceIndex: getFinancialSheetIndexByQuery(
-      state.financialStatements.trialBalance.sheets,
-      trialBalanceQuery,
-    ),
-  };
-};
-
-const withTrialBalanceTable = connect(mapStateToProps);
-
 export default compose(
-  withTrialBalanceTable,
  withTrialBalance(({
-    trialBalanceAccounts,
+    trialBalance,
    trialBalanceSheetLoading,
+    trialBalanceQuery
  }) => ({
-    trialBalanceAccounts,
-    trialBalanceSheetLoading
+    trialBalance,
+    trialBalanceSheetLoading,
+    trialBalanceQuery
  })),
 )(TrialBalanceSheetTable);
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/withTrialBalance.js
+++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/withTrialBalance.js
@@ -1,28 +1,22 @@
 import {connect} from 'react-redux';
 import {
-  getFinancialSheetAccounts,
-  getFinancialSheetQuery,
+  getFinancialSheetFactory,
+  getFinancialSheetQueryFactory,
 } from 'store/financialStatement/financialStatements.selectors';

-
 export default (mapState) => {
  const mapStateToProps = (state, props) => {
-    const { trialBalanceIndex } = props;
+    const getTrialBalance = getFinancialSheetFactory('trialBalance');
+    const getBalanceSheetQuery = getFinancialSheetQueryFactory('trialBalance');
+
    const mapped = {
-      trialBalanceAccounts: getFinancialSheetAccounts(
-        state.financialStatements.trialBalance.sheets,
-        trialBalanceIndex
-      ),
-      trialBalanceQuery: getFinancialSheetQuery(
-        state.financialStatements.trialBalance.sheets,
-        trialBalanceIndex
-      ),
+      trialBalance: getTrialBalance(state, props),
+      trialBalanceQuery: getBalanceSheetQuery(state, props),
      trialBalanceSheetLoading: state.financialStatements.trialBalance.loading,
      trialBalanceSheetFilter: state.financialStatements.trialBalance.filter,
      trialBalanceSheetRefresh: state.financialStatements.trialBalance.refresh,
    };
    return mapState ? mapState(mapped, state, props) : mapped;
  };
-
  return connect(mapStateToProps);
 };