refactor(webapp): AR/AP aging summary table columns

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' },
-    ];
+    ]);
   };
 }

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);

packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryBody.tsx

@@ -18,11 +18,11 @@ function APAgingSummaryBodyJSX({
   // #withCurrentOrganization
   organizationName,
 }) {
-  const { isLoading } = useAPAgingSummaryContext();
+  const { isAPAgingLoading } = useAPAgingSummaryContext();
 
   return (
     <FinancialReportBody>
-      {isLoading ? (
+      {isAPAgingLoading ? (
         <FinancialSheetSkeleton />
       ) : (
         <APAgingSummaryTable organizationName={organizationName} />

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({
     >
       <APAgingSummaryDataTable
         columns={columns}
-        data={tableRows}
+        data={table.rows}
         rowClassNames={tableRowTypesToClassnames}
         noInitialFetch={true}
         sticky={true}
@@ -54,6 +54,24 @@ const APAgingSummaryDataTable = styled(ReportDataTable)`
         padding-top: 0.32rem;
         padding-bottom: 0.32rem;
       }
+      &:not(.no-results) {
+        .td {
+          border-bottom: 0;
+          padding-top: 0.4rem;
+          padding-bottom: 0.4rem;
+        }
+        &:not(:first-child) .td {
+          border-top: 1px solid transparent;
+        }
+        &.row_type--total {
+          font-weight: 500;
+
+          .td {
+            border-top: 1px solid #bbb;
+            border-bottom: 3px double #333;
+          }
+        }
+      }
     }
   }
 `;

packages/webapp/src/containers/FinancialStatements/APAgingSummary/components.tsx

@@ -1,59 +1,72 @@
 // @ts-nocheck
 import React, { useMemo } from 'react';
 import intl from 'react-intl-universal';
+import * as R from 'ramda';
+
 import { If, FormattedMessage as T } from '@/components';
 import { useAPAgingSummaryContext } from './APAgingSummaryProvider';
-import { getColumnWidth } from '@/utils';
 import FinancialLoadingBar from '../FinancialLoadingBar';
+import { agingSummaryDynamicColumns } from '../AgingSummary/dynamicColumns';
 
 /**
  * Retrieve AP aging summary columns.
  */
 export const useAPAgingSummaryColumns = () => {
   const {
-    APAgingSummary: { tableRows, columns },
+    APAgingSummary: { table },
   } = useAPAgingSummaryContext();
 
-  const agingColumns = React.useMemo(() => {
+  return agingSummaryDynamicColumns(table.columns, table.rows);
-    return columns.map(
-      (agingColumn) =>
-        `${agingColumn.before_days} - ${
-          agingColumn.to_days || intl.get('and_over')
-        }`,
-    );
-  }, [columns]);
-
-  return useMemo(
-    () => [
-      {
-        Header: <T id={'vendor_name'} />,
-        accessor: 'name',
-        className: 'vendor_name',
-        width: 240,
-        sticky: 'left',
-        textOverview: true,
-      },
-      {
-        Header: <T id={'current'} />,
-        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: <T id={'total'} />,
-        accessor: 'total',
-        width: getColumnWidth(tableRows, 'total', { minWidth: 120 }),
-      },
-    ],
-    [tableRows, agingColumns],
-  );
 };
 
+/**
+ * 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: <T id={'vendor_name'} />,
+//         accessor: 'name',
+//         className: 'vendor_name',
+//         width: 240,
+//         sticky: 'left',
+//         textOverview: true,
+//       },
+//       {
+//         Header: <T id={'current'} />,
+//         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: <T id={'total'} />,
+//         accessor: 'total',
+//         width: getColumnWidth(tableRows, 'total', { minWidth: 120 }),
+//       },
+//     ],
+//     [tableRows, agingColumns],
+//   );
+// };
+
 /**
  * A/P aging summary sheet loading bar.
  */

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({
     >
       <ARAgingSummaryDataTable
         columns={columns}
-        data={ARAgingSummary.tableRows}
+        data={table.rows}
         rowClassNames={tableRowTypesToClassnames}
         noInitialFetch={true}
         sticky={true}

packages/webapp/src/containers/FinancialStatements/ARAgingSummary/components.tsx

@@ -1,71 +1,20 @@
 // @ts-nocheck
 import React from 'react';
-import intl from 'react-intl-universal';
 
 import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
 import { If, FormattedMessage as T } from '@/components';
-import { getColumnWidth } from '@/utils';
-import { Align } from '@/constants';
-
 import FinancialLoadingBar from '../FinancialLoadingBar';
+import { agingSummaryDynamicColumns } from '../AgingSummary/dynamicColumns';
 
 /**
  * Retrieve AR aging summary columns.
  */
 export const useARAgingSummaryColumns = () => {
   const {
-    ARAgingSummary: { tableRows, columns },
+    ARAgingSummary: { table },
   } = useARAgingSummaryContext();
 
-  const agingColumns = React.useMemo(() => {
+  return agingSummaryDynamicColumns(table.columns, table.rows);
-    return columns.map(
-      (agingColumn) =>
-        `${agingColumn.before_days} - ${
-          agingColumn.to_days || intl.get('and_over')
-        }`,
-    );
-  }, [columns]);
-
-  return React.useMemo(
-    () => [
-      {
-        Header: <T id={'customer_name'} />,
-        accessor: 'name',
-        className: 'customer_name',
-        sticky: 'left',
-        width: 240,
-        textOverview: true,
-      },
-      {
-        Header: <T id={'current'} />,
-        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: <T id={'total'} />,
-        id: 'total',
-        accessor: 'total',
-        className: 'total',
-        width: getColumnWidth(tableRows, 'total', {
-          minWidth: 120,
-        }),
-        align: Align.Right
-      },
-    ],
-    [tableRows, agingColumns],
-  );
 };
 
 /**

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);
+};

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) => ({
+      select: (res) => res.data,
-        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: [],
-      },
       ...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) => ({
+      select: (res) => res.data,
-        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: [],
-      },
       ...props,
     },
   );