diff --git a/client/src/config/financialReportsMenu.js b/client/src/config/financialReportsMenu.js index 06e848be2..054a60deb 100644 --- a/client/src/config/financialReportsMenu.js +++ b/client/src/config/financialReportsMenu.js @@ -71,7 +71,7 @@ export const SalesAndPurchasesReportMenus = [ link: '/financial-reports/inventory-valuation', }, { - title: 'Customer Balance summary', + title: 'Customers Balance summary', desc: 'Summerize the total amount of each customer owes your business.', link: '/financial-reports/customers-balance-summary', }, diff --git a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactions.js b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactions.js index 17a72ae3b..c919da40f 100644 --- a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactions.js +++ b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactions.js @@ -7,12 +7,12 @@ import DashboardPageContent from 'components/Dashboard/DashboardPageContent'; import CustomersTransactionsHeader from './CustomersTransactionsHeader'; import CustomersTransactionsTable from './CustomersTransactionsTable'; -import CustomersTranscationsActionsBar from './CustomersTranscationsActionsBar'; +import CustomersTransactionsActionsBar from './CustomersTransactionsActionsBar'; import withCustomersTransactionsActions from './withCustomersTransactionsActions'; import withSettings from 'containers/Settings/withSettings'; -import { CustomersTranscationsLoadingBar } from './components'; -import { CustomersTranscationsProvider } from './CustomersTranscationsProvider'; +import { CustomersTransactionsLoadingBar } from './components'; +import { CustomersTransactionsProvider } from './CustomersTransactionsProvider'; import { compose } from 'utils'; @@ -57,12 +57,12 @@ function CustomersTransactions({ ); return ( - - + - +
@@ -77,7 +77,7 @@ function CustomersTransactions({
- + ); } export default compose( diff --git a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsProvider.js b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsProvider.js new file mode 100644 index 000000000..86c64787b --- /dev/null +++ b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsProvider.js @@ -0,0 +1,42 @@ +import React, { createContext, useContext, useMemo } from 'react'; +import FinancialReportPage from '../FinancialReportPage'; +import { useCustomersTransactionsReport } from 'hooks/query'; +import { transformFilterFormToQuery } from '../common'; + +const CustomersTransactionsContext = createContext(); + +/** + * Customers transactions provider. + */ +function CustomersTransactionsProvider({ filter, ...props }) { + const query = useMemo(() => transformFilterFormToQuery(filter), [ + filter, + ]); + + // fetches the customers transactions. + const { + data: customersTransactions, + isFetching: isCustomersTransactionsFetching, + isLoading: isCustomersTransactionsLoading, + refetch: CustomersTransactionsRefetch, + } = useCustomersTransactionsReport(query, { keepPreviousData: true }); + + const provider = { + customersTransactions, + isCustomersTransactionsFetching, + isCustomersTransactionsLoading, + CustomersTransactionsRefetch, + filter, + query + }; + + return ( + + + + ); +} +const useCustomersTransactionsContext = () => + useContext(CustomersTransactionsContext); + +export { CustomersTransactionsProvider, useCustomersTransactionsContext }; diff --git a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js index 972bde7d2..c7003cbfd 100644 --- a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js +++ b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js @@ -4,13 +4,13 @@ import classNames from 'classnames'; import FinancialSheet from 'components/FinancialSheet'; import DataTable from 'components/DataTable'; -import { useCustomersTranscationsColumns } from './components'; -import { useCustomersTranscationsContext } from './CustomersTranscationsProvider'; +import { useCustomersTransactionsColumns } from './components'; +import { useCustomersTransactionsContext } from './CustomersTransactionsProvider'; import { defaultExpanderReducer, getColumnWidth } from 'utils'; /** - * Customers transcations table. + * Customers transactions table. */ export default function CustomersTransactionsTable({ // #ownProps @@ -21,10 +21,10 @@ export default function CustomersTransactionsTable({ const { customersTransactions: { tableRows }, isCustomersTransactionsLoading, - filter, - } = useCustomersTranscationsContext(); + query, + } = useCustomersTransactionsContext(); - const columns = useCustomersTranscationsColumns(); + const columns = useCustomersTransactionsColumns(); const expandedRows = useMemo(() => defaultExpanderReducer(tableRows, 4), [ tableRows, @@ -40,8 +40,8 @@ export default function CustomersTransactionsTable({ companyName={companyName} sheetType={formatMessage({ id: 'customers_transactions' })} loading={isCustomersTransactionsLoading} - fromDate={filter.fromDate} - toDate={filter.toDate} + fromDate={query.fromDate} + toDate={query.toDate} > { +export const useCustomersTransactionsColumns = () => { const { customersTransactions: { tableRows }, - isCustomersTransactionsLoading, - } = useCustomersTranscationsContext(); + } = useCustomersTransactionsContext(); return React.useMemo( () => [ @@ -88,10 +87,10 @@ export const useCustomersTranscationsColumns = () => { }; /** - * customers transcations loading bar. + * customers transactions loading bar. */ -export function CustomersTranscationsLoadingBar() { - const { isCustomersTransactionsLoading } = useCustomersTranscationsContext(); +export function CustomersTransactionsLoadingBar() { + const { isCustomersTransactionsLoading } = useCustomersTransactionsContext(); return ( diff --git a/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsProvider.js b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsProvider.js index eed162f2c..afbf44242 100644 --- a/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsProvider.js +++ b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsProvider.js @@ -1,12 +1,12 @@ import React, { createContext, useContext, useMemo } from 'react'; import FinancialReportPage from '../FinancialReportPage'; -import { useVendorsTranscationsReport } from 'hooks/query'; +import { useVendorsTransactionsReport } from 'hooks/query'; import { transformFilterFormToQuery } from '../common'; const VendorsTransactionsContext = createContext(); /** - * Vendors transcations provider. + * Vendors transactions provider. */ function VendorsTransactionsProvider({ filter, ...props }) { const query = useMemo(() => transformFilterFormToQuery(filter), [filter]); @@ -16,7 +16,7 @@ function VendorsTransactionsProvider({ filter, ...props }) { isFetching: isVendorsTransactionFetching, isLoading: isVendorsTransactionsLoading, refetch, - } = useVendorsTranscationsReport(); + } = useVendorsTransactionsReport(query, { keepPreviousData: true }); const provider = { vendorsTransactions, @@ -34,7 +34,7 @@ function VendorsTransactionsProvider({ filter, ...props }) { ); } -const useVendorsTranscationsContext = () => +const useVendorsTransactionsContext = () => useContext(VendorsTransactionsContext); -export { VendorsTransactionsProvider, useVendorsTranscationsContext }; +export { VendorsTransactionsProvider, useVendorsTransactionsContext }; diff --git a/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js index b554f3aae..1d2832b44 100644 --- a/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js +++ b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js @@ -5,12 +5,12 @@ import classNames from 'classnames'; import FinancialSheet from 'components/FinancialSheet'; import DataTable from 'components/DataTable'; import { useVendorsTransactionsColumns } from './components'; -import { useVendorsTranscationsContext } from './VendorsTransactionsProvider'; +import { useVendorsTransactionsContext } from './VendorsTransactionsProvider'; import { defaultExpanderReducer, getColumnWidth } from 'utils'; /** - * Vendors transcations table. + * Vendors transactions table. */ export default function VendorsTransactionsTable({ @@ -22,8 +22,8 @@ export default function VendorsTransactionsTable({ const { vendorsTransactions: { tableRows }, isVendorsTransactionsLoading, - filter, - } = useVendorsTranscationsContext(); + query, + } = useVendorsTransactionsContext(); const columns = useVendorsTransactionsColumns(); @@ -41,8 +41,8 @@ export default function VendorsTransactionsTable({ companyName={companyName} sheetType={formatMessage({ id: 'vendors_transactions' })} loading={isVendorsTransactionsLoading} - fromDate={filter.fromDate} - toDate={filter.toDate} + fromDate={query.fromDate} + toDate={query.toDate} > { const { vendorsTransactions: { tableRows }, - } = useVendorsTranscationsContext(); + } = useVendorsTransactionsContext(); return React.useMemo( () => [ @@ -87,10 +87,10 @@ export const useVendorsTransactionsColumns = () => { }; /** - * vendors transcations loading bar. + * vendors transactions loading bar. */ export function VendorsTransactionsLoadingBar() { - const { isVendorsTransactionsLoading } = useVendorsTranscationsContext(); + const { isVendorsTransactionsLoading } = useVendorsTransactionsContext(); return ( diff --git a/client/src/hooks/query/financialReports.js b/client/src/hooks/query/financialReports.js index 44ce2b0d9..4989099ca 100644 --- a/client/src/hooks/query/financialReports.js +++ b/client/src/hooks/query/financialReports.js @@ -348,9 +348,9 @@ export function useVendorsBalanceSummaryReport(query, props) { } /** - * Retrieve customers transcations report. + * Retrieve customers transactions report. */ -export function useCustomersTranscationsReport(query, props) { +export function useCustomersTransactionsReport(query, props) { return useRequestQuery( [t.FINANCIAL_REPORT, t.CUSTOMERS_TRANSACTIONS, query], { @@ -376,9 +376,9 @@ export function useCustomersTranscationsReport(query, props) { } /** - * Retrieve vendors transcations report. + * Retrieve vendors transactions report. */ -export function useVendorsTranscationsReport(query, props) { +export function useVendorsTransactionsReport(query, props) { return useRequestQuery( [t.FINANCIAL_REPORT, t.VENDORS_TRANSACTIONS, query], { diff --git a/client/src/lang/en/index.js b/client/src/lang/en/index.js index e2cabd957..111799880 100644 --- a/client/src/lang/en/index.js +++ b/client/src/lang/en/index.js @@ -1060,7 +1060,7 @@ export default { customers_balance_summary: 'Customers Balance Summary', vendors_balance_summary: 'Vendors Balance Summary', percentage_of_column: 'Percentage', - customers_transactions: 'Customers Transcations', - vendors_transactions: 'Vendors Transcations', + customers_transactions: 'Customers Transactions', + vendors_transactions: 'Vendors Transactions', reference_type: 'Reference type', }; diff --git a/client/src/style/pages/FinancialStatements/ContactsBalanceSummary.scss b/client/src/style/pages/FinancialStatements/ContactsBalanceSummary.scss index 107c2b340..a9d63287b 100644 --- a/client/src/style/pages/FinancialStatements/ContactsBalanceSummary.scss +++ b/client/src/style/pages/FinancialStatements/ContactsBalanceSummary.scss @@ -29,3 +29,10 @@ } } } +.financial-statement--balance-summary { + .financial-header-drawer { + .bp3-drawer { + max-height: 350px; + } + } +}