diff --git a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.js b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.js index 7fae6f73b..c5831ff86 100644 --- a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.js +++ b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.js @@ -1,25 +1,19 @@ -import React, { useEffect, useState, useCallback } from 'react'; -import { useIntl } from 'react-intl'; -import { queryCache, useQuery } from 'react-query'; +import React, { useState, useCallback } from 'react'; import moment from 'moment'; +import 'style/pages/FinancialStatements/ARAgingSummary.scss'; + import { FinancialStatement } from 'components'; -import DashboardInsider from 'components/Dashboard/DashboardInsider'; -import ARAgingSummaryActionsBar from './ARAgingSummaryActionsBar'; -import DashboardPageContent from 'components/Dashboard/DashboardPageContent'; import ARAgingSummaryHeader from './ARAgingSummaryHeader'; -import ReceivableAgingSummaryTable from './ARAgingSummaryTable'; +import ARAgingSummaryActionsBar from './ARAgingSummaryActionsBar'; +import ARAgingSummaryTable from './ARAgingSummaryTable'; +import DashboardPageContent from 'components/Dashboard/DashboardPageContent'; +import { ARAgingSummaryProvider } from './ARAgingSummaryProvider'; import withSettings from 'containers/Settings/withSettings'; -import withDashboardActions from 'containers/Dashboard/withDashboardActions'; -import withARAgingSummaryActions from './withARAgingSummaryActions'; -import withARAgingSummary from './withARAgingSummary'; import { compose } from 'utils'; -import { transfromFilterFormToQuery } from './common'; - -import 'style/pages/FinancialStatements/ARAgingSummary.scss'; /** * AR aging summary report. @@ -27,115 +21,55 @@ import 'style/pages/FinancialStatements/ARAgingSummary.scss'; function ReceivableAgingSummarySheet({ // #withSettings organizationName, - - // #withDashboardActions - changePageTitle, - setDashboardBackLink, - setSidebarShrink, - - // #withARAgingSummaryActions - requestReceivableAgingSummary, - refreshARAgingSummary, - toggleFilterARAgingSummary, - - // #withARAgingSummary - ARAgingSummaryRefresh, }) { - const { formatMessage } = useIntl(); - const [query, setQuery] = useState({ + const [filter, setFilter] = useState({ asDate: moment().endOf('day').format('YYYY-MM-DD'), - agingBeforeDays: 30, + agingDaysBefore: 30, agingPeriods: 3, }); - useEffect(() => { - changePageTitle(formatMessage({ id: 'receivable_aging_summary' })); - }, [changePageTitle, formatMessage]); - - useEffect(() => { - if (ARAgingSummaryRefresh) { - queryCache.invalidateQueries('receivable-aging-summary'); - refreshARAgingSummary(false); - } - }, [ARAgingSummaryRefresh, refreshARAgingSummary]); - - useEffect(() => { - setSidebarShrink() - // Show the back link on dashboard topbar. - setDashboardBackLink(true); - - return () => { - // Hide the back link on dashboard topbar. - setDashboardBackLink(false); - }; - }, [setDashboardBackLink,setSidebarShrink]); - - // Handle fetching receivable aging summary report. - const fetchARAgingSummarySheet = useQuery( - ['receivable-aging-summary', query], - (key, q) => - requestReceivableAgingSummary({ - ...transfromFilterFormToQuery(q), - }), - { manual: true }, - ); - - // Handle fetch the data of receivable aging summary sheet. - const handleFetchData = useCallback((...args) => {}, []); - + // Handle filter submit. const handleFilterSubmit = useCallback( (filter) => { const _filter = { ...filter, asDate: moment(filter.asDate).format('YYYY-MM-DD'), }; - setQuery(_filter); - refreshARAgingSummary(true); - toggleFilterARAgingSummary(false); + setFilter(_filter); }, - [refreshARAgingSummary, toggleFilterARAgingSummary], + [], ); + // Handle number format submit. const handleNumberFormatSubmit = (numberFormat) => { - setQuery({ - ...query, - numberFormat - }); - refreshARAgingSummary(true); + setFilter({ ...filter, numberFormat }); }; return ( - +
-
- + ); } export default compose( - withDashboardActions, - withARAgingSummaryActions, withSettings(({ organizationSettings }) => ({ organizationName: organizationSettings.name, })), - withARAgingSummary(({ ARAgingSummaryRefresh }) => ({ - ARAgingSummaryRefresh: ARAgingSummaryRefresh, - })), )(ReceivableAgingSummarySheet); diff --git a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.js b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.js index 9059987cc..e5a363887 100644 --- a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.js +++ b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.js @@ -15,34 +15,34 @@ import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'; import Icon from 'components/Icon'; import NumberFormatDropdown from 'components/NumberFormatDropdown'; -import withARAgingSummary from './withARAgingSummary'; +import { useARAgingSummaryContext } from './ARAgingSummaryProvider'; import withARAgingSummaryActions from './withARAgingSummaryActions'; import { compose } from 'utils'; import { safeInvoke } from '@blueprintjs/core/lib/esm/common/utils'; /** - * AR Aging summary sheet - Actions bar. + * A/R Aging summary sheet - Actions bar. */ function ARAgingSummaryActionsBar({ // #withReceivableAging receivableAgingFilter, - ARAgingSummaryLoading, // #withReceivableAgingActions toggleFilterARAgingSummary, - refreshARAgingSummary, // #ownProps numberFormat, onNumberFormatSubmit, }) { + const { isARAgingFetching, refetch } = useARAgingSummaryContext(); + const handleFilterToggleClick = () => { toggleFilterARAgingSummary(); }; // Handles re-calculate report button. const handleRecalcReport = () => { - refreshARAgingSummary(true); + refetch(); }; // Handle number format submit. const handleNumberFormatSubmit = (numberFormat) => { @@ -80,7 +80,7 @@ function ARAgingSummaryActionsBar({ } minimal={true} @@ -118,7 +118,4 @@ function ARAgingSummaryActionsBar({ export default compose( withARAgingSummaryActions, - withARAgingSummary(({ receivableAgingSummaryLoading }) => ({ - ARAgingSummaryLoading: receivableAgingSummaryLoading, - })), )(ARAgingSummaryActionsBar); diff --git a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.js b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.js index ad7649bad..7eaa4bceb 100644 --- a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.js +++ b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.js @@ -17,24 +17,21 @@ import { compose } from 'utils'; * AR Aging Summary Report - Drawer Header. */ function ARAgingSummaryHeader({ + // #ownProps pageFilter, onSubmitFilter, receivableAgingFilter, - // #withReceivableAgingSummary - receivableAgingRefresh, - // #withReceivableAgingSummaryActions - refreshReceivableAgingSummary, toggleFilterARAgingSummary, }) { const validationSchema = Yup.object().shape({ asDate: Yup.date().required().label('asDate'), - agingBeforeDays: Yup.number() + agingDaysBefore: Yup.number() .required() .integer() .positive() - .label('agingBeforeDays'), + .label('agingDaysBefore'), agingPeriods: Yup.number() .required() .integer() @@ -44,12 +41,13 @@ function ARAgingSummaryHeader({ // Initial values. const initialValues = { asDate: moment(pageFilter.asDate).toDate(), - agingBeforeDays: 30, + agingDaysBefore: 30, agingPeriods: 3, }; // Handle form submit. const handleSubmit = (values, { setSubmitting }) => { onSubmitFilter(values); + toggleFilterARAgingSummary(); setSubmitting(false); }; // Handle cancel button click. @@ -89,10 +87,7 @@ function ARAgingSummaryHeader({ export default compose( withARAgingSummaryActions, - withARAgingSummary( - ({ receivableAgingSummaryFilter, receivableAgingSummaryRefresh }) => ({ - receivableAgingFilter: receivableAgingSummaryFilter, - receivableAgingRefresh: receivableAgingSummaryRefresh, - }), - ), + withARAgingSummary(({ receivableAgingSummaryFilter }) => ({ + receivableAgingFilter: receivableAgingSummaryFilter, + })), )(ARAgingSummaryHeader); diff --git a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneral.js b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneral.js index 3eb0ad97a..4636882bf 100644 --- a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneral.js +++ b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneral.js @@ -12,17 +12,16 @@ import { FormattedMessage as T } from 'react-intl'; import classNames from 'classnames'; import { CustomersMultiSelect, Row, Col, FieldHint } from 'components'; import { momentFormatter } from 'utils'; -// import withCustomers from 'containers/Customers/withCustomers'; -import { compose } from 'redux'; +import { useARAgingSummaryContext } from './ARAgingSummaryProvider'; /** * AR Aging Summary - Drawer Header - General Fields. */ -function ARAgingSummaryHeaderGeneral({ - // #withCustomers - customers, -}) { +export default function ARAgingSummaryHeaderGeneral() { + // AR Aging summary context. + const { customers } = useARAgingSummaryContext(); + return (
@@ -53,7 +52,7 @@ function ARAgingSummaryHeaderGeneral({ - + {({ field, meta: { error, touched } }) => ( } @@ -104,9 +103,4 @@ function ARAgingSummaryHeaderGeneral({
); -} -export default compose( - // withCustomers(({ customers }) => ({ - // customers, - // })), -)(ARAgingSummaryHeaderGeneral); +} \ No newline at end of file diff --git a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryProvider.js b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryProvider.js index e69de29bb..7e1f40781 100644 --- a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryProvider.js +++ b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryProvider.js @@ -0,0 +1,47 @@ +import React, { useMemo, createContext, useContext } from 'react'; +import DashboardInsider from 'components/Dashboard/DashboardInsider'; +import { useARAgingSummaryReport, useCustomers } from 'hooks/query'; +import { transformFilterFormToQuery } from '../common'; + +const ARAgingSummaryContext = createContext(); + +/** + * A/R aging summary provider. + */ +function ARAgingSummaryProvider({ filter, ...props }) { + // Transformes the filter from to the Url query. + const query = useMemo(() => transformFilterFormToQuery(filter), [filter]); + + const { + data: ARAgingSummary, + isLoading: isARAgingLoading, + isFetching: isARAgingFetching, + refetch, + } = useARAgingSummaryReport(query); + + // Retrieve the customers list. + const { + data: { customers }, + isFetching: isCustomersFetching, + } = useCustomers(); + + const provider = { + ARAgingSummary, + customers, + + isARAgingLoading, + isARAgingFetching, + isCustomersFetching, + refetch, + }; + + return ( + + + + ); +} + +const useARAgingSummaryContext = () => useContext(ARAgingSummaryContext); + +export { ARAgingSummaryProvider, useARAgingSummaryContext }; diff --git a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.js b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.js index 88dc2f23f..09300f2b1 100644 --- a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.js +++ b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.js @@ -1,72 +1,25 @@ -import React, { useMemo, useCallback } from 'react'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import React, { useCallback } from 'react'; +import { useIntl } from 'react-intl'; import DataTable from 'components/DataTable'; import FinancialSheet from 'components/FinancialSheet'; -import withARAgingSummary from './withARAgingSummary'; - -import { compose, getColumnWidth } from 'utils'; +import { useARAgingSummaryContext } from './ARAgingSummaryProvider'; +import { useARAgingSummaryColumns } from './components'; /** * AR aging summary table sheet. */ -function ReceivableAgingSummaryTable({ - // #withReceivableAgingSummary - receivableAgingRows, - receivableAgingLoading, - receivableAgingColumns, - +export default function ReceivableAgingSummaryTable({ // #ownProps - onFetchData, organizationName, }) { const { formatMessage } = useIntl(); - const agingColumns = useMemo(() => { - return receivableAgingColumns.map((agingColumn) => { - return `${agingColumn.before_days} - ${ - agingColumn.to_days || 'And Over' - }`; - }); - }, [receivableAgingColumns]); + // AR aging summary report context. + const { ARAgingSummary, isARAgingFetching } = useARAgingSummaryContext(); - const columns = useMemo( - () => [ - { - Header: , - accessor: 'name', - className: 'customer_name', - sticky: 'left', - width: 240, - textOverview: true, - }, - { - Header: , - accessor: 'current', - className: 'current', - width: getColumnWidth(receivableAgingRows, `current`, { - minWidth: 120, - }), - }, - ...agingColumns.map((agingColumn, index) => ({ - Header: agingColumn, - accessor: `aging-${index }`, - width: getColumnWidth(receivableAgingRows, `aging-${index }`, { - minWidth: 120, - }), - })), - { - Header: (), - id: 'total', - accessor: 'total', - className: 'total', - width: getColumnWidth(receivableAgingRows, 'total', { - minWidth: 120, - }), - }, - ], - [receivableAgingRows, agingColumns], - ); + // AR aging summary columns. + const columns = useARAgingSummaryColumns(); const rowClassNames = (row) => [`row-type--${row.original.rowType}`]; @@ -80,12 +33,12 @@ function ReceivableAgingSummaryTable({ name={'receivable-aging-summary'} sheetType={formatMessage({ id: 'receivable_aging_summary' })} asDate={new Date()} - loading={receivableAgingLoading} + loading={isARAgingFetching} > ); } - -export default compose( - withARAgingSummary( - ({ - receivableAgingSummaryLoading, - receivableAgingSummaryColumns, - receivableAgingSummaryRows, - }) => ({ - receivableAgingLoading: receivableAgingSummaryLoading, - receivableAgingColumns: receivableAgingSummaryColumns, - receivableAgingRows: receivableAgingSummaryRows, - }), - ), -)(ReceivableAgingSummaryTable); diff --git a/client/src/containers/FinancialStatements/ARAgingSummary/components.js b/client/src/containers/FinancialStatements/ARAgingSummary/components.js new file mode 100644 index 000000000..dc1e174e4 --- /dev/null +++ b/client/src/containers/FinancialStatements/ARAgingSummary/components.js @@ -0,0 +1,58 @@ +import React from 'react'; +import { useARAgingSummaryContext } from './ARAgingSummaryProvider'; +import { getColumnWidth } from 'utils'; +import { FormattedMessage as T } from 'react-intl'; + +/** + * Retrieve AR aging summary columns. + */ +export const useARAgingSummaryColumns = () => { + const { + ARAgingSummary: { tableRows, columns }, + } = useARAgingSummaryContext(); + + const agingColumns = React.useMemo(() => { + return columns.map( + (agingColumn) => + `${agingColumn.before_days} - ${agingColumn.to_days || 'And Over'}`, + ); + }, [columns]); + + return React.useMemo( + () => [ + { + Header: , + accessor: 'name', + className: 'customer_name', + sticky: 'left', + width: 240, + textOverview: true, + }, + { + Header: , + accessor: 'current', + className: 'current', + width: getColumnWidth(tableRows, `current`, { + minWidth: 120, + }), + }, + ...agingColumns.map((agingColumn, index) => ({ + Header: agingColumn, + accessor: `aging-${index}`, + width: getColumnWidth(tableRows, `aging-${index}`, { + minWidth: 120, + }), + })), + { + Header: , + id: 'total', + accessor: 'total', + className: 'total', + width: getColumnWidth(tableRows, 'total', { + minWidth: 120, + }), + }, + ], + [tableRows, agingColumns], + ); +}; diff --git a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js index ff9c1eaee..3f27d76b7 100644 --- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js +++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js @@ -40,6 +40,7 @@ function BalanceSheet({ setFilter({ ..._filter }); }; + // Hnadle number format submit. const handleNumberFormatSubmit = (values) => { setFilter({ ...filter, @@ -48,7 +49,7 @@ function BalanceSheet({ }; return ( - + transformFilterFormToQuery(filter), [filter]); + + // Fetches the balance sheet report. + const { data: balanceSheet, isFetching, refetch } = useBalanceSheet(query); const provider = { balanceSheet, isLoading: isFetching, - refetchBalanceSheet: refetch + refetchBalanceSheet: refetch, + + query, + filter, }; return ( diff --git a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js index bae07efb9..613099ce9 100644 --- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js +++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js @@ -1,6 +1,5 @@ -import React, { useEffect, useCallback, useState } from 'react'; +import React, { useCallback, useState } from 'react'; import moment from 'moment'; -import { useIntl } from 'react-intl'; import 'style/pages/FinancialStatements/GeneralLedger.scss'; @@ -12,28 +11,21 @@ import GeneralLedgerActionsBar from './GeneralLedgerActionsBar'; import { GeneralLedgerProvider } from './GeneralLedgerProvider'; import withGeneralLedgerActions from './withGeneralLedgerActions'; -import withDashboardActions from 'containers/Dashboard/withDashboardActions'; import withSettings from 'containers/Settings/withSettings'; -import { compose } from 'utils'; - import { transformFilterFormToQuery } from 'containers/FinancialStatements/common'; +import { compose } from 'utils'; /** * General Ledger (GL) sheet. */ function GeneralLedger({ - // #withDashboardActions - changePageTitle, - setDashboardBackLink, - // #withGeneralLedgerActions refreshGeneralLedgerSheet, // #withSettings organizationName, }) { - const { formatMessage } = useIntl(); const [filter, setFilter] = useState({ fromDate: moment().startOf('year').format('YYYY-MM-DD'), toDate: moment().endOf('year').format('YYYY-MM-DD'), @@ -41,21 +33,6 @@ function GeneralLedger({ accountsFilter: 'with-transactions', }); - // Change page title of the dashboard. - useEffect(() => { - changePageTitle(formatMessage({ id: 'general_ledger' })); - }, [changePageTitle, formatMessage]); - - useEffect(() => { - // Show the back link on dashboard topbar. - setDashboardBackLink(true); - - return () => { - // Hide the back link on dashboard topbar. - setDashboardBackLink(false); - }; - }); - // Handle financial statement filter change. const handleFilterSubmit = useCallback( (filter) => { @@ -71,7 +48,7 @@ function GeneralLedger({ ); return ( - + @@ -95,7 +72,6 @@ function GeneralLedger({ export default compose( withGeneralLedgerActions, - withDashboardActions, withSettings(({ organizationSettings }) => ({ organizationName: organizationSettings.name, })), diff --git a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderGeneralPane.js b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderGeneralPane.js index 7f7f455d1..694362c08 100644 --- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderGeneralPane.js +++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderGeneralPane.js @@ -5,7 +5,6 @@ import { } from '@blueprintjs/core'; import { FormattedMessage as T } from 'react-intl'; import classNames from 'classnames'; -import { compose } from 'redux'; import { AccountsMultiSelect, Row, Col } from 'components'; @@ -13,17 +12,15 @@ import FinancialStatementDateRange from 'containers/FinancialStatements/Financia import RadiosAccountingBasis from '../RadiosAccountingBasis'; import FinancialAccountsFilter from '../FinancialAccountsFilter'; -import withAccounts from 'containers/Accounts/withAccounts'; - import { filterAccountsOptions } from './common'; +import { useGeneralLedgerContext } from './GeneralLedgerProvider' /** * General ledger (GL) - Header - General panel. */ -function GeneralLedgerHeaderGeneralPane({ - // #withAccounts - accountsList, -}) { +export default function GeneralLedgerHeaderGeneralPane() { + const { accounts } = useGeneralLedgerContext(); + return (
@@ -37,7 +34,7 @@ function GeneralLedgerHeaderGeneralPane({ label={} className={classNames('form-group--select-list', Classes.FILL)} > - + @@ -45,8 +42,4 @@ function GeneralLedgerHeaderGeneralPane({
); -} - -export default compose(withAccounts(({ accountsList }) => ({ accountsList })))( - GeneralLedgerHeaderGeneralPane, -); +} \ No newline at end of file diff --git a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerProvider.js b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerProvider.js index 2f8a0d5ee..c10cd9c22 100644 --- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerProvider.js +++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerProvider.js @@ -1,14 +1,14 @@ import React, { createContext, useContext } from 'react'; import DashboardInsider from 'components/Dashboard/DashboardInsider'; import { useGeneralLedgerSheet, useAccounts } from 'hooks/query'; -import { transformFilterFormToQuery } from '../common'; const GeneralLedgerContext = createContext(); +/** + * General ledger provider. + */ function GeneralLedgerProvider({ query, ...props }) { - const { data: generalLedger, isFetching, refetch } = useGeneralLedgerSheet({ - ...transformFilterFormToQuery(query), - }); + const { data: generalLedger, isFetching, refetch } = useGeneralLedgerSheet(query); // Accounts list. const { data: accounts, isFetching: isAccountsLoading } = useAccounts(); diff --git a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js index ab41cdaed..cc8969c41 100644 --- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js +++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js @@ -1,6 +1,5 @@ -import React, { useEffect, useCallback, useState } from 'react'; +import React, { useCallback, useState } from 'react'; import moment from 'moment'; -import { useIntl } from 'react-intl'; import 'style/pages/FinancialStatements/TrialBalanceSheet.scss'; @@ -10,7 +9,6 @@ import TrialBalanceSheetHeader from './TrialBalanceSheetHeader'; import TrialBalanceSheetTable from './TrialBalanceSheetTable'; 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'; @@ -21,16 +19,9 @@ import { compose } from 'utils'; * Trial balance sheet. */ function TrialBalanceSheet({ - // #withDashboardActions - changePageTitle, - setDashboardBackLink, - setSidebarShrink, - // #withPreferences organizationName, }) { - const { formatMessage } = useIntl(); - const [filter, setFilter] = useState({ fromDate: moment().startOf('year').format('YYYY-MM-DD'), toDate: moment().endOf('year').format('YYYY-MM-DD'), @@ -38,22 +29,6 @@ function TrialBalanceSheet({ accountsFilter: 'all-accounts', }); - // Change page title of the dashboard. - useEffect(() => { - changePageTitle(formatMessage({ id: 'trial_balance_sheet' })); - }, [changePageTitle, formatMessage]); - - useEffect(() => { - setSidebarShrink(); - // Show the back link on dashboard topbar. - setDashboardBackLink(true); - - return () => { - // Hide the back link on dashboard topbar. - setDashboardBackLink(false); - }; - }, [setDashboardBackLink, setSidebarShrink]); - // Handle filter form submit. const handleFilterSubmit = useCallback( (filter) => { @@ -97,7 +72,6 @@ function TrialBalanceSheet({ } export default compose( - withDashboardActions, withTrialBalanceActions, withTrialBalance(({ trialBalanceQuery }) => ({ trialBalanceQuery, diff --git a/client/src/containers/FinancialStatements/common.js b/client/src/containers/FinancialStatements/common.js index 216e06ab4..73c7a3537 100644 --- a/client/src/containers/FinancialStatements/common.js +++ b/client/src/containers/FinancialStatements/common.js @@ -1,5 +1,5 @@ import { omit } from 'lodash'; -import { transformToCamelCase, flatObject } from 'utils'; +import { transfromToSnakeCase, flatObject } from 'utils'; import { formatMessage } from 'services/intl'; export const displayColumnsByOptions = [ @@ -53,7 +53,7 @@ export const transformDisplayColumnsType = (form) => { }; export const transformFilterFormToQuery = (form) => { - const transformed = transformToCamelCase({ + const transformed = transfromToSnakeCase({ ...omit(form, ['accountsFilter']), ...transformDisplayColumnsType(form), noneZero: form.accountsFilter === 'without-zero-balance', diff --git a/client/src/containers/FinancialStatements/reducers.js b/client/src/containers/FinancialStatements/reducers.js index d9ebf45a9..775a2c074 100644 --- a/client/src/containers/FinancialStatements/reducers.js +++ b/client/src/containers/FinancialStatements/reducers.js @@ -226,3 +226,38 @@ export const generalLedgerTableRowsReducer = (accounts) => { }) .value(); }; + +export const ARAgingSummaryTableRowsMapper = (sheet, total) => { + const rows = []; + + const mapAging = (agingPeriods) => { + return agingPeriods.reduce((acc, aging, index) => { + acc[`aging-${index}`] = aging.total.formatted_amount; + return acc; + }, {}); + }; + sheet.customers.forEach((customer) => { + const agingRow = mapAging(customer.aging); + + rows.push({ + rowType: 'customer', + name: customer.customer_name, + ...agingRow, + current: customer.current.formatted_amount, + total: customer.total.formatted_amount, + }); + }); + if (rows.length <= 0) { + return []; + } + return [ + ...rows, + { + name: '', + rowType: 'total', + current: sheet.total.current.formatted_amount, + ...mapAging(sheet.total.aging), + total: sheet.total.total.formatted_amount, + }, + ]; +}; diff --git a/client/src/hooks/query/financialReports.js b/client/src/hooks/query/financialReports.js index 54558157c..b7bdf7d51 100644 --- a/client/src/hooks/query/financialReports.js +++ b/client/src/hooks/query/financialReports.js @@ -6,6 +6,7 @@ import { profitLossSheetReducer, generalLedgerTableRowsReducer, journalTableRowsReducer, + ARAgingSummaryTableRowsMapper } from 'containers/FinancialStatements/reducers'; import useApiRequest from '../useRequest'; @@ -175,6 +176,29 @@ export function useARAgingSummaryReport(query, props) { apiRequest.get('/financial_statements/receivable_aging_summary', { params: query, }), - props, + { + select: (res) => ({ + columns: res.data.columns, + data: res.data.data, + query: res.data.query, + tableRows: ARAgingSummaryTableRowsMapper({ + customers: res.data.data.customers, + total: res.data.data.total, + columns: res.data.columns, + }), + }), + initialData: { + data: { + data: { + customers: [], + total: {}, + }, + columns: [], + tableRows: [] + } + }, + initialDataUpdatedAt: 0, + ...props + }, ); } diff --git a/client/src/routes/dashboard.js b/client/src/routes/dashboard.js index a814e2aec..12a5d5931 100644 --- a/client/src/routes/dashboard.js +++ b/client/src/routes/dashboard.js @@ -110,6 +110,9 @@ export default [ ), breadcrumb: 'General Ledger', hotkey: 'shift+4', + pageTitle: formatMessage({ id: 'general_ledger' }), + backLink: true, + sidebarShrink: true }, { path: `/financial-reports/balance-sheet`, @@ -131,6 +134,8 @@ export default [ ), breadcrumb: 'Trial Balance Sheet', hotkey: 'shift+5', + pageTitle: formatMessage({ id: 'trial_balance_sheet' }), + backLink: true, }, { path: `/financial-reports/profit-loss-sheet`, @@ -146,6 +151,9 @@ export default [ import('containers/FinancialStatements/ARAgingSummary/ARAgingSummary'), ), breadcrumb: 'Receivable Aging Summary', + pageTitle: formatMessage({ id: 'receivable_aging_summary' }), + backLink: true, + sidebarShrink: true, }, { path: `/financial-reports/journal-sheet`,