refactor(CustomerTransaction).

src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js

@@ -28,7 +28,7 @@ export default function BalanceSheetTable({
 
   // Retrieve default expanded rows of balance sheet.
   const expandedRows = React.useMemo(
-    () => defaultExpanderReducer(table?.rows || [], 3),
+    () => defaultExpanderReducer(table.rows, 3),
     [table],
   );
 

src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js

@@ -1,12 +1,14 @@
 import React, { useMemo } from 'react';
 import intl from 'react-intl-universal';
+import styled from 'styled-components';
 
 import { DataTable, FinancialSheet } from 'components';
 
 import { useCustomersTransactionsColumns } from './components';
 import { useCustomersTransactionsContext } from './CustomersTransactionsProvider';
 
-import { defaultExpanderReducer } from 'utils';
+import { defaultExpanderReducer, tableRowTypesToClassnames } from 'utils';
+import { TableStyle } from 'common';
 
 /**
  * Customers transactions table.
@@ -18,7 +20,6 @@ export default function CustomersTransactionsTable({
   // Customers transactions context.
   const {
     customersTransactions: { tableRows },
-    isCustomersTransactionsLoading,
     query,
   } = useCustomersTransactionsContext();
 
@@ -30,30 +31,74 @@ export default function CustomersTransactionsTable({
     [tableRows],
   );
 
-  const rowClassNames = (row) => {
-    return [`row-type--${row.original.row_types}`];
-  };
-
   return (
     <FinancialSheet
-      name="customer-transactions"
       companyName={companyName}
       sheetType={intl.get('customers_transactions')}
-      loading={isCustomersTransactionsLoading}
       fromDate={query.from_date}
       toDate={query.to_date}
+      fullWidth={true}
     >
-      <DataTable
+      <CustomersTransactionsDataTable
-        className="bigcapital-datatable--financial-report"
         columns={columns}
         data={tableRows}
-        rowClassNames={rowClassNames}
+        rowClassNames={tableRowTypesToClassnames}
         noInitialFetch={true}
         expandable={true}
         expanded={expandedRows}
         expandToggleColumn={1}
         expandColumnSpace={0.8}
+        styleName={TableStyle.Constrant}
       />
     </FinancialSheet>
   );
 }
+
+const CustomersTransactionsDataTable = styled(DataTable)`
+  .table {
+    .tbody {
+      .tr .td {
+        padding-top: 0.2rem;
+        padding-bottom: 0.2rem;
+      }
+      .tr:not(.no-results) .td {
+        border-left: 1px solid #ececec;
+      }
+      .tr:last-child .td {
+        border-bottom: 1px solid #e0e0e0;
+      }
+
+      .tr.row_type {
+        &--CUSTOMER {
+          .td {
+            &.customer_name {
+              font-weight: 500;
+            }
+          }
+          &:not(:first-child).is-expanded .td {
+            border-top: 1px solid #ddd;
+          }
+        }
+        &--OPENING_BALANCE,
+        &--CLOSING_BALANCE {
+          font-weight: 500;
+        }
+        &--CUSTOMER {
+          &.is-expanded {
+            .td.running_balance .cell-inner {
+              display: none;
+            }
+          }
+          &:not(:first-child).is-expanded .td {
+            border-top: 1px solid #ddd;
+          }
+        }
+        &--CUSTOMER:last-child {
+          .td {
+            border-bottom: 1px solid #ddd;
+          }
+        }
+      }
+    }
+  }
+`;

src/containers/FinancialStatements/CustomersTransactions/components.js

@@ -5,6 +5,8 @@ import { useCustomersTransactionsContext } from './CustomersTransactionsProvider
 import FinancialLoadingBar from '../FinancialLoadingBar';
 import { getForceWidth, getColumnWidth } from 'utils';
 
+import { Align } from 'common';
+
 /**
  * Retrieve customers transactions columns.
  */
@@ -29,7 +31,6 @@ export const useCustomersTransactionsColumns = () => {
           );
         },
         className: 'customer_name',
-        // textOverview: true,
       },
       {
         Header: intl.get('account_name'),
@@ -59,6 +60,7 @@ export const useCustomersTransactionsColumns = () => {
           minWidth: 100,
           magicSpacing: 10,
         }),
+        align: Align.Right,
       },
       {
         Header: intl.get('debit'),
@@ -69,6 +71,7 @@ export const useCustomersTransactionsColumns = () => {
           minWidth: 100,
           magicSpacing: 10,
         }),
+        align: Align.Right,
       },
       {
         Header: intl.get('running_balance'),
@@ -79,6 +82,7 @@ export const useCustomersTransactionsColumns = () => {
           minWidth: 120,
           magicSpacing: 10,
         }),
+        align: Align.Right,
       },
     ],
     [tableRows],

src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js

@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import intl from 'react-intl-universal';
+import styled from 'styled-components';
 
 import { DataTable, FinancialSheet } from 'components';
 
@@ -40,8 +41,9 @@ export default function VendorsTransactionsTable({
       loading={isVendorsTransactionsLoading}
       fromDate={query.from_date}
       toDate={query.to_date}
+      fullWidth={true}
     >
-      <DataTable
+      <VendorsTransactionsDataTable
         columns={columns}
         data={tableRows}
         rowClassNames={tableRowTypesToClassnames}
@@ -55,3 +57,52 @@ export default function VendorsTransactionsTable({
     </FinancialSheet>
   );
 }
+
+const VendorsTransactionsDataTable = styled(DataTable)`
+  .table {
+    .tbody {
+      .tr .td {
+        padding-top: 0.2rem;
+        padding-bottom: 0.2rem;
+      }
+      .tr:not(.no-results) .td {
+        border-left: 1px solid #ececec;
+      }
+      .tr:last-child .td {
+        border-bottom: 1px solid #e0e0e0;
+      }
+
+      .tr.row_type {
+        &--VENDOR {
+          .td {
+            &.vendor_name {
+              font-weight: 500;
+            }
+          }
+          &:not(:first-child).is-expanded .td {
+            border-top: 1px solid #ddd;
+          }
+        }
+        &--OPENING_BALANCE,
+        &--CLOSING_BALANCE {
+          font-weight: 500;
+        }
+        &--VENDOR {
+          &.is-expanded {
+            .td.running_balance .cell-inner {
+              display: none;
+            }
+          }
+          &:not(:first-child).is-expanded .td {
+            border-top: 1px solid #ddd;
+          }
+        }
+        &--VENDOR:last-child {
+          .td {
+            border-bottom: 1px solid #ddd;
+          }
+        }
+      }
+    }
+  }
+`;

src/style/pages/FinancialStatements/ARAgingSummary.scss

@@ -1,30 +0,0 @@
-
-.financial-sheet{
-  &--receivable-aging-summary{
-
-    .financial-sheet__table{
-
-      .bigcapital-datatable{
-        .tbody,
-        .thead{
-          .tr .td.customer_name ~ .td,
-          .tr .th.customer_name ~ .th{
-            text-align: right;
-          }
-        }
-        .tbody{
-          
-        }
-      }
-    }    
-  }
-}
-
-.financial-statement--AR-aging-summary{
-
-  .financial-header-drawer{
-    .bp3-drawer{
-      max-height: 550px;
-    }
-  }
-}

src/style/pages/FinancialStatements/ContactsTransactions.scss

@@ -1,108 +0,0 @@
-.financial-sheet {
-
-  &--customer-transactions,
-  &--vendor-transactions {
-    width: 100%;
-
-    .financial-sheet__table {
-
-      .tbody,
-      .thead {
-
-        .tr .td,
-        .tr .th {
-
-          &.credit,
-          &.debit,
-          &.running_balance {
-            text-align: right;
-          }
-        }
-      }
-
-      .tbody {
-        .tr .td {
-          padding-top: 0.2rem;
-          padding-bottom: 0.2rem;
-          border-top-color: transparent;
-          border-bottom-color: transparent;
-
-          &.customer_name,
-          &.vendor_name {
-            >div {
-              display: flex;
-            }
-
-            span.force-width {
-              position: relative;
-            }
-          }
-        }
-
-        .tr:not(.no-results) .td {
-          border-left: 1px solid #ececec;
-        }
-
-        .tr:last-child .td {
-          border-bottom: 1px solid #e0e0e0;
-        }
-
-        .tr.row-type {
-
-          &--CUSTOMER,
-          &--VENDOR {
-            .td {
-
-              &.customer_name,
-              &.vendor_name {
-                font-weight: 500;
-              }
-
-              &.name {
-                // border-left-color: transparent;
-              }
-            }
-
-            &:not(:first-child).is-expanded .td {
-              border-top: 1px solid #ddd;
-            }
-          }
-
-          &--OPENING_BALANCE,
-          // &--TRANSACTION,
-          &--CLOSING_BALANCE {
-            font-weight: 500;
-          }
-
-          &--CUSTOMER,
-          &--VENDOR {
-            &.is-expanded {
-              .td.running_balance .cell-inner {
-                display: none;
-              }
-            }
-
-            &:not(:first-child).is-expanded .td {
-              border-top: 1px solid #ddd;
-            }
-          }
-
-          &--CUSTOMER:last-child,
-          &--VENDOR:last-child {
-            .td {
-              border-bottom: 1px solid #ddd;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.financial-statement--transactions {
-  .financial-header-drawer {
-    .bp3-drawer {
-      max-height: 450px;
-    }
-  }
-}