diff --git a/packages/server/src/services/FinancialStatements/AgingSummary/AgingSummaryTable.ts b/packages/server/src/services/FinancialStatements/AgingSummary/AgingSummaryTable.ts index a318cdfc4..49a3f140b 100644 --- a/packages/server/src/services/FinancialStatements/AgingSummary/AgingSummaryTable.ts +++ b/packages/server/src/services/FinancialStatements/AgingSummary/AgingSummaryTable.ts @@ -12,8 +12,13 @@ import { import { tableRowMapper } from '@/utils'; import AgingReport from './AgingReport'; import { AgingSummaryRowType } from './_constants'; +import { FinancialTable } from '../FinancialTable'; +import { FinancialSheetStructure } from '../FinancialSheetStructure'; -export default abstract class AgingSummaryTable extends AgingReport { +export default abstract class AgingSummaryTable extends R.compose( + FinancialSheetStructure, + FinancialTable +)(AgingReport) { protected readonly report: IAgingSummaryData; protected readonly query: IAgingSummaryQuery; protected readonly agingPeriods: IAgingPeriod[]; @@ -193,11 +198,11 @@ export default abstract class AgingSummaryTable extends AgingReport { * @returns {ITableColumn} */ public tableColumns = (): ITableColumn[] => { - return [ + return R.compose(this.tableColumnsCellIndexing)([ this.contactNameTableColumn(), { label: 'Current', key: 'current' }, ...this.agingTableColumns(), { label: 'Total', key: 'total' }, - ]; + ]); }; } diff --git a/packages/server/src/services/FinancialStatements/FinancialTable.ts b/packages/server/src/services/FinancialStatements/FinancialTable.ts index 20ae528a2..0a7eafd01 100644 --- a/packages/server/src/services/FinancialStatements/FinancialTable.ts +++ b/packages/server/src/services/FinancialStatements/FinancialTable.ts @@ -12,7 +12,7 @@ export const FinancialTable = (Base) => * @param {ITableColumn[]} columns * @returns {ITableColumn[]} */ - protected tableColumnsCellIndexing = ( + public tableColumnsCellIndexing = ( columns: ITableColumn[] ): ITableColumn[] => { const cellIndex = increment(-1); diff --git a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryBody.tsx b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryBody.tsx index c49642106..366404561 100644 --- a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryBody.tsx +++ b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryBody.tsx @@ -18,11 +18,11 @@ function APAgingSummaryBodyJSX({ // #withCurrentOrganization organizationName, }) { - const { isLoading } = useAPAgingSummaryContext(); + const { isAPAgingLoading } = useAPAgingSummaryContext(); return ( - {isLoading ? ( + {isAPAgingLoading ? ( ) : ( diff --git a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.tsx b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.tsx index a54f25a09..96924e97b 100644 --- a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.tsx +++ b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.tsx @@ -20,7 +20,7 @@ export default function APAgingSummaryTable({ }) { // AP aging summary report content. const { - APAgingSummary: { tableRows }, + APAgingSummary: { table }, isAPAgingLoading, } = useAPAgingSummaryContext(); @@ -36,7 +36,7 @@ export default function APAgingSummaryTable({ > { const { - APAgingSummary: { tableRows, columns }, + APAgingSummary: { table }, } = useAPAgingSummaryContext(); - const agingColumns = React.useMemo(() => { - return columns.map( - (agingColumn) => - `${agingColumn.before_days} - ${ - agingColumn.to_days || intl.get('and_over') - }`, - ); - }, [columns]); - - return useMemo( - () => [ - { - Header: , - accessor: 'name', - className: 'vendor_name', - width: 240, - sticky: 'left', - 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: , - accessor: 'total', - width: getColumnWidth(tableRows, 'total', { minWidth: 120 }), - }, - ], - [tableRows, agingColumns], - ); + return agingSummaryDynamicColumns(table.columns, table.rows); }; +/** + * Retrieve AP aging summary columns. + */ +// export const useAPAgingSummaryColumns = () => { +// const { +// APAgingSummary: { tableRows, columns }, +// } = useAPAgingSummaryContext(); + +// const agingColumns = React.useMemo(() => { +// return columns.map( +// (agingColumn) => +// `${agingColumn.before_days} - ${ +// agingColumn.to_days || intl.get('and_over') +// }`, +// ); +// }, [columns]); + +// return useMemo( +// () => [ +// { +// Header: , +// accessor: 'name', +// className: 'vendor_name', +// width: 240, +// sticky: 'left', +// 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: , +// accessor: 'total', +// width: getColumnWidth(tableRows, 'total', { minWidth: 120 }), +// }, +// ], +// [tableRows, agingColumns], +// ); +// }; + /** * A/P aging summary sheet loading bar. */ diff --git a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.tsx b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.tsx index 11f1dfa19..d2cdf5baa 100644 --- a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.tsx +++ b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.tsx @@ -19,7 +19,10 @@ export default function ReceivableAgingSummaryTable({ organizationName, }) { // AR aging summary report context. - const { ARAgingSummary, isARAgingLoading } = useARAgingSummaryContext(); + const { + ARAgingSummary: { table }, + isARAgingLoading, + } = useARAgingSummaryContext(); // AR aging summary columns. const columns = useARAgingSummaryColumns(); @@ -33,7 +36,7 @@ export default function ReceivableAgingSummaryTable({ > { const { - ARAgingSummary: { tableRows, columns }, + ARAgingSummary: { table }, } = useARAgingSummaryContext(); - const agingColumns = React.useMemo(() => { - return columns.map( - (agingColumn) => - `${agingColumn.before_days} - ${ - agingColumn.to_days || intl.get('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, - }), - align: Align.Right - }, - ...agingColumns.map((agingColumn, index) => ({ - Header: agingColumn, - accessor: `aging-${index}`, - width: getColumnWidth(tableRows, `aging-${index}`, { - minWidth: 120, - }), - align: Align.Right - })), - { - Header: , - id: 'total', - accessor: 'total', - className: 'total', - width: getColumnWidth(tableRows, 'total', { - minWidth: 120, - }), - align: Align.Right - }, - ], - [tableRows, agingColumns], - ); + return agingSummaryDynamicColumns(table.columns, table.rows); }; /** diff --git a/packages/webapp/src/containers/FinancialStatements/AgingSummary/dynamicColumns.ts b/packages/webapp/src/containers/FinancialStatements/AgingSummary/dynamicColumns.ts new file mode 100644 index 000000000..971bdadb7 --- /dev/null +++ b/packages/webapp/src/containers/FinancialStatements/AgingSummary/dynamicColumns.ts @@ -0,0 +1,74 @@ +// @ts-nocheck +import React, { useMemo } from 'react'; +import * as R from 'ramda'; +import { getColumnWidth } from '@/utils'; +import { Align } from '@/constants'; + +const getTableCellValueAccessor = (index) => `cells[${index}].value`; + +const contactNameAccessor = R.curry((data, column) => ({ + key: column.key, + Header: column.label, + accessor: getTableCellValueAccessor(column.cell_index), + sticky: 'left', + width: 240, + textOverview: true, +})); + +const currentAccessor = R.curry((data, column) => { + const accessor = getTableCellValueAccessor(column.cell_index); + + return { + key: column.key, + Header: column.label, + accessor, + className: column.id, + width: getColumnWidth(data, accessor, { minWidth: 120 }), + align: Align.Right, + }; +}); + +const totalAccessor = R.curry((data, column) => { + const accessor = getTableCellValueAccessor(column.cell_index); + + return { + Header: column.label, + id: column.key, + accessor: getTableCellValueAccessor(column.cell_index), + className: column.key, + width: getColumnWidth(data, accessor, { minWidth: 120 }), + align: Align.Right, + }; +}); + +const agingPeriodAccessor = R.curry((data, column) => { + const accessor = getTableCellValueAccessor(column.cell_index); + + return { + Header: column.label, + id: `${column.key}-${column.cell_index}`, + accessor, + className: column.key, + width: getColumnWidth(data, accessor, { minWidth: 120 }), + align: Align.Right, + }; +}); + +const dynamicColumnMapper = R.curry((data, column) => { + const totalAccessorColumn = totalAccessor(data); + const currentAccessorColumn = currentAccessor(data); + const customerNameAccessorColumn = contactNameAccessor(data); + const agingPeriodAccessorColumn = agingPeriodAccessor(data); + + return R.compose( + R.when(R.pathEq(['key'], 'total'), totalAccessorColumn), + R.when(R.pathEq(['key'], 'current'), currentAccessorColumn), + R.when(R.pathEq(['key'], 'customer_name'), customerNameAccessorColumn), + R.when(R.pathEq(['key'], 'vendor_name'), customerNameAccessorColumn), + R.when(R.pathEq(['key'], 'aging_period'), agingPeriodAccessorColumn), + )(column); +}); + +export const agingSummaryDynamicColumns = (columns, data) => { + return R.map(dynamicColumnMapper(data), columns); +}; diff --git a/packages/webapp/src/hooks/query/financialReports.tsx b/packages/webapp/src/hooks/query/financialReports.tsx index 6a9f385a9..6941fb1d2 100644 --- a/packages/webapp/src/hooks/query/financialReports.tsx +++ b/packages/webapp/src/hooks/query/financialReports.tsx @@ -138,26 +138,12 @@ export function useARAgingSummaryReport(query, props) { method: 'get', url: '/financial_statements/receivable_aging_summary', params: query, + headers: { + Accept: 'application/json+table', + }, }, { - 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, - }), - }), - defaultData: { - data: { - customers: [], - total: {}, - }, - columns: [], - tableRows: [], - }, + select: (res) => res.data, ...props, }, ); @@ -173,26 +159,12 @@ export function useAPAgingSummaryReport(query, props) { method: 'get', url: '/financial_statements/payable_aging_summary', params: query, + headers: { + Accept: 'application/json+table', + }, }, { - select: (res) => ({ - columns: res.data.columns, - data: res.data.data, - query: res.data.query, - tableRows: APAgingSummaryTableRowsMapper({ - vendors: res.data.data.vendors, - total: res.data.data.total, - columns: res.data.columns, - }), - }), - defaultData: { - data: { - vendors: [], - total: {}, - }, - columns: [], - tableRows: [], - }, + select: (res) => res.data, ...props, }, );