fix: style of vendor/customer balance summary.

src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.js

@@ -1,15 +1,17 @@
 import React from 'react';
 import intl from 'react-intl-universal';
+import styled from 'styled-components';
 
 import { DataTable, FinancialSheet } from 'components';
 
 import { useCustomersBalanceSummaryContext } from './CustomersBalanceSummaryProvider';
 import { useCustomersSummaryColumns } from './components';
 
+import { TableStyle } from 'common';
 import { tableRowTypesToClassnames } from 'utils';
 
 /**
- * customers balance summary table.
+ * Customers balance summary table.
  */
 export default function CustomersBalanceSummaryTable({
   // #ownProps
@@ -27,12 +29,36 @@ export default function CustomersBalanceSummaryTable({
       sheetType={intl.get('customers_balance_summary')}
       asDate={new Date()}
     >
-      <DataTable
+      <CustomerBalanceDataTable
         columns={columns}
         data={table.data}
         rowClassNames={tableRowTypesToClassnames}
         noInitialFetch={true}
+        styleName={TableStyle.Constrant}
       />
     </FinancialSheet>
   );
 }
+
+const CustomerBalanceDataTable = styled(DataTable)`
+  .table {
+    .tbody {
+      .tr:not(.no-results) {
+        .td {
+          border-bottom: 0;
+          padding-top: 0.4rem;
+          padding-bottom: 0.4rem;
+        }
+
+        &.row_type--TOTAL {
+          font-weight: 500;
+
+          .td {
+            border-top: 1px solid #bbb;
+            border-bottom: 3px double #333;
+          }
+        }
+      }
+    }
+  }
+`;

src/containers/FinancialStatements/CustomersBalanceSummary/components.js

@@ -6,6 +6,8 @@ import { If } from 'components';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 import { useCustomersBalanceSummaryContext } from './CustomersBalanceSummaryProvider';
 
+import { Align } from 'common';
+
 /**
  * Retrieve customers balance summary columns.
  */
@@ -37,6 +39,7 @@ const totalColumnAccessor = () => ({
   accessor: 'cells[1].value',
   className: 'total',
   width: 140,
+  align: Align.Right,
 });
 
 /**
@@ -47,6 +50,7 @@ const percentageColumnAccessor = () => ({
   accessor: 'cells[2].value',
   className: 'total',
   width: 140,
+  align: Align.Right,
 });
 
 const dynamicColumns = (columns) => {
@@ -54,7 +58,10 @@ const dynamicColumns = (columns) => {
     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),
+      R.when(
+        R.pathEq(['key'], 'percentage_of_column'),
+        percentageColumnAccessor,
+      ),
     ),
   )(columns);
 };

src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummary.js

@@ -13,6 +13,7 @@ import { VendorBalanceSummaryBody } from './VendorsBalanceSummaryBody';
 
 import withVendorsBalanceSummaryActions from './withVendorsBalanceSummaryActions';
 
+import { TableStyle } from 'common';
 import { getDefaultVendorsBalanceQuery } from './utils';
 import { compose } from 'utils';
 

src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.js

@@ -7,6 +7,7 @@ import { DataTable, FinancialSheet } from 'components';
 import { useVendorsBalanceColumns } from './components';
 import { useVendorsBalanceSummaryContext } from './VendorsBalanceSummaryProvider';
 
+import { TableStyle } from 'common';
 import { tableRowTypesToClassnames } from 'utils';
 
 /**
@@ -34,6 +35,7 @@ export default function VendorsBalanceSummaryTable({
         data={table.data}
         rowClassNames={tableRowTypesToClassnames}
         noInitialFetch={true}
+        styleName={TableStyle.Constrant}
       />
     </VendorBalanceFinancialSheet>
   );
@@ -51,7 +53,7 @@ const VendorBalanceDataTable = styled(DataTable)`
           padding-bottom: 0.4rem;
         }
 
-        &.row-type--TOTAL {
+        &.row_type--TOTAL {
           font-weight: 500;
 
           .td {

src/containers/FinancialStatements/VendorsBalanceSummary/components.js

@@ -6,6 +6,8 @@ import { If } from 'components';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 import { useVendorsBalanceSummaryContext } from './VendorsBalanceSummaryProvider';
 
+import { Align } from 'common';
+
 /**
  * Retrieve vendors balance summary columns.
  */
@@ -39,8 +41,8 @@ const percentageColumnAccessor = () => ({
   accessor: 'cells[2].value',
   className: 'total',
   width: 140,
-  align: 'right',
   textOverview: true,
+  align: Align.Right,
 });
 
 /**
@@ -51,8 +53,8 @@ const totalColumnAccessor = () => ({
   accessor: 'cells[1].value',
   className: 'total',
   width: 140,
-  align: 'right',
   textOverview: true,
+  align: Align.Right,
 });
 
 /**