fix(ContactBalanceSummary): BIG-288 percentage of column.

src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanelContent.js

@@ -52,7 +52,7 @@ export default function CustomersBalanceSummaryGeneralPanelContent() {
 
       <Row>
         <Col xs={5}>
-          <FastField name={'percentage'} type={'checkbox'}>
+          <FastField name={'percentage_column'} type={'checkbox'}>
             {({ field }) => (
               <FormGroup labelInfo={<FieldHint />}>
                 <Checkbox

src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.js

@@ -1,6 +1,5 @@
-import React, { useMemo, useCallback } from 'react';
+import React from 'react';
 import intl from 'react-intl-universal';
-import classNames from 'classnames';
 
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
@@ -15,11 +14,9 @@ export default function CustomersBalanceSummaryTable({
   // #ownProps
   companyName,
 }) {
-  
-
   const {
     isCustomersBalanceLoading,
-    CustomerBalanceSummary: { tableRows },
+    CustomerBalanceSummary: { table },
   } = useCustomersBalanceSummaryContext();
 
   const columns = useCustomersSummaryColumns();
@@ -39,7 +36,7 @@ export default function CustomersBalanceSummaryTable({
       <DataTable
         className="bigcapital-datatable--financial-report"
         columns={columns}
-        data={tableRows}
+        data={table.data}
         rowClassNames={rowClassNames}
         noInitialFetch={true}
       />

src/containers/FinancialStatements/CustomersBalanceSummary/components.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
+import * as R from 'ramda';
 
 import { If } from 'components';
 import FinancialLoadingBar from '../FinancialLoadingBar';
@@ -9,29 +10,53 @@ import { useCustomersBalanceSummaryContext } from './CustomersBalanceSummaryProv
  * Retrieve customers balance summary columns.
  */
 export const useCustomersSummaryColumns = () => {
-  return React.useMemo(
-    () => [
-      {
-        Header: intl.get('customer_name'),
-        accessor: 'cells[0].value',
-        className: 'customer_name',
-        width: 240,
-      },
-      {
-        Header: intl.get('total'),
-        accessor: 'cells[1].value',
-        className: 'total',
-        width: 140,
-      },
-      {
-        Header: intl.get('percentage_of_column'),
-        accessor: 'cells[2].value',
-        className: 'total',
-        width: 140,
-      },
-    ],
-    [],
-  );
+  const {
+    CustomerBalanceSummary: { table },
+  } = useCustomersBalanceSummaryContext();
+
+  return React.useMemo(() => {
+    return dynamicColumns(table.columns || []);
+  }, [table.columns]);
+};
+
+/**
+ * Account name column accessor.
+ */
+const accountNameColumnAccessor = () => ({
+  Header: intl.get('customer_name'),
+  accessor: 'cells[0].value',
+  className: 'customer_name',
+  width: 240,
+});
+
+/**
+ * Total column accessor.
+ */
+const totalColumnAccessor = () => ({
+  Header: intl.get('total'),
+  accessor: 'cells[1].value',
+  className: 'total',
+  width: 140,
+});
+
+/**
+ * Percentage column accessor.
+ */
+const percentageColumnAccessor = () => ({
+  Header: intl.get('percentage_of_column'),
+  accessor: 'cells[2].value',
+  className: 'total',
+  width: 140,
+});
+
+const dynamicColumns = (columns) => {
+  return R.map(
+    R.compose(
+      R.when(R.pathEq(['key'], 'name'), accountNameColumnAccessor),
+      R.when(R.pathEq(['key'], 'total'), totalColumnAccessor),
+      R.when(R.pathEq(['key'], 'percentage_of_column'), percentageColumnAccessor),
+    ),
+  )(columns);
 };
 
 /**

src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneralContent.js

@@ -58,14 +58,14 @@ export default function VendorsBalanceSummaryHeaderGeneralContent() {
 
       <Row>
         <Col xs={5}>
-          <FastField name={'percentage'} type={'checkbox'}>
+          <FastField name={'percentage_column'} type={'checkbox'}>
             {({ field }) => (
               <FormGroup labelInfo={<FieldHint />}>
                 <Checkbox
                   inline={true}
                   small={true}
                   label={<T id={'percentage_of_column'} />}
-                  name={'percentage'}
+                  name={'percentage_column'}
                   {...field}
                 />
               </FormGroup>

src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.js

@@ -14,10 +14,8 @@ export default function VendorsBalanceSummaryTable({
   //#ownProps
   organizationName,
 }) {
-  
-
   const {
-    VendorBalanceSummary,
+    VendorBalanceSummary: { table },
     isVendorsBalanceLoading,
   } = useVendorsBalanceSummaryContext();
 
@@ -39,7 +37,7 @@ export default function VendorsBalanceSummaryTable({
       <DataTable
         className={'bigcapital-datatable--financial-report'}
         columns={columns}
-        data={VendorBalanceSummary?.tableRows}
+        data={table?.data}
         rowClassNames={rowClassNames}
         noInitialFetch={true}
       />

src/containers/FinancialStatements/VendorsBalanceSummary/components.js

@@ -1,8 +1,8 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import intl from 'react-intl-universal';
+import * as R from 'ramda';
 
 import { If } from 'components';
-import { getColumnWidth } from 'utils';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 import { useVendorsBalanceSummaryContext } from './VendorsBalanceSummaryProvider';
 
@@ -10,28 +10,65 @@ import { useVendorsBalanceSummaryContext } from './VendorsBalanceSummaryProvider
  * Retrieve vendors balance summary columns.
  */
 export const useVendorsBalanceColumns = () => {
-  return useMemo(() => [
-    {
-      Header: intl.get('vendor_name'),
-      accessor: 'cells[0].value',
-      className: 'customer_name',
-      width: 240,
-      sticky: 'left',
-      textOverview: true,
-    },
-    {
-      Header: intl.get('total'),
-      accessor: 'cells[1].value',
-      className: 'total',
-      width: 140,
-    },
-    {
-      Header: intl.get('percentage_of_column'),
-      accessor: 'cells[2].value',
-      // className: 'total',
-      width: 140,
-    },
-  ]);
+  const {
+    VendorBalanceSummary: { table },
+  } = useVendorsBalanceSummaryContext();
+
+  return React.useMemo(() => {
+    return dynamicColumns(table.columns || []);
+  }, [table.columns]);
+};
+
+/**
+ * Vendor name accessor.
+ */
+const vendorColumnAccessor = () => ({
+  Header: intl.get('vendor_name'),
+  accessor: 'cells[0].value',
+  className: 'vendor_name',
+  width: 240,
+  align: 'left',
+  textOverview: true,
+});
+
+/**
+ * Percentage column accessor.
+ */
+const percentageColumnAccessor = () => ({
+  Header: intl.get('percentage_of_column'),
+  accessor: 'cells[2].value',
+  className: 'total',
+  width: 140,
+  align: 'right',
+  textOverview: true,
+});
+
+/**
+ * Total column accessor.
+ */
+const totalColumnAccessor = () => ({
+  Header: intl.get('total'),
+  accessor: 'cells[1].value',
+  className: 'total',
+  width: 140,
+  align: 'right',
+  textOverview: true,
+});
+
+/**
+ * Composes the response columns to table component columns.
+ */
+const dynamicColumns = (columns) => {
+  return R.map(
+    R.compose(
+      R.when(R.pathEq(['key'], 'name'), vendorColumnAccessor),
+      R.when(R.pathEq(['key'], 'total'), totalColumnAccessor),
+      R.when(
+        R.pathEq(['key'], 'percentage_of_column'),
+        percentageColumnAccessor,
+      ),
+    ),
+  )(columns);
 };
 
 /**

src/hooks/query/financialReports.js

@@ -304,12 +304,11 @@ export function useCustomerBalanceSummaryReport(query, props) {
     },
     {
       select: (res) => ({
-        columns: res.data.columns,
         query: res.data.query,
-        tableRows: res.data.table.rows,
+        table: res.data.table,
       }),
       defaultData: {
-        tableRows: [],
+        table: {},
         query: {},
       },
       ...props,
@@ -334,12 +333,11 @@ export function useVendorsBalanceSummaryReport(query, props) {
 
     {
       select: (res) => ({
-        columns: res.data.columns,
         query: res.data.query,
-        tableRows: res.data.table.data,
+        table: res.data.table,
       }),
       defaultData: {
-        tableRows: [],
+        table: {},
         query: {},
       },
       ...props,

src/lang/en/index.json

@@ -866,7 +866,7 @@
   "published_at": "Published at",
   "customers_balance_summary": "Customers Balance Summary",
   "vendors_balance_summary": "Vendors Balance Summary",
-  "percentage_of_column": "Percentage",
+  "percentage_of_column": "% of column",
   "customers_transactions": "Customers Transactions",
   "vendors_transactions": "Vendors Transactions",
   "reference_type": "Reference type",