fix(FinancialReport): BIG-205 Financial reports missing border final border bottom.

src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js

@@ -1,13 +1,12 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo } from 'react';
 import intl from 'react-intl-universal';
-import classNames from 'classnames';
 
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
 import { useCustomersTransactionsColumns } from './components';
 import { useCustomersTransactionsContext } from './CustomersTransactionsProvider';
 
-import { defaultExpanderReducer, getColumnWidth } from 'utils';
+import { defaultExpanderReducer } from 'utils';
 
 /**
  * Customers transactions table.
@@ -16,19 +15,20 @@ export default function CustomersTransactionsTable({
   // #ownProps
   companyName,
 }) {
-  
+  // Customers transactions context.
-
   const {
     customersTransactions: { tableRows },
     isCustomersTransactionsLoading,
     query,
   } = useCustomersTransactionsContext();
 
+  // Customers transactions table columns.
   const columns = useCustomersTransactionsColumns();
 
-  const expandedRows = useMemo(() => defaultExpanderReducer(tableRows, 4), [
+  const expandedRows = useMemo(
-    tableRows,
+    () => defaultExpanderReducer(tableRows, 4),
-  ]);
+    [tableRows],
+  );
 
   const rowClassNames = (row) => {
     return [`row-type--${row.original.row_types}`];

src/containers/FinancialStatements/InventoryItemDetails/utils.js

@@ -18,6 +18,7 @@ const columnsMapper = (data, index, column) => ({
     magicSpacing: 10,
   }),
   disableSortBy: true,
+  textOverview: true,
 });
 
 /**

src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js

@@ -1,13 +1,12 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo } from 'react';
 import intl from 'react-intl-universal';
-import classNames from 'classnames';
 
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
 import { useVendorsTransactionsColumns } from './components';
 import { useVendorsTransactionsContext } from './VendorsTransactionsProvider';
 
-import { defaultExpanderReducer, getColumnWidth } from 'utils';
+import { defaultExpanderReducer } from 'utils';
 
 /**
  * Vendors transactions table.
@@ -17,19 +16,20 @@ export default function VendorsTransactionsTable({
   // #ownProps
   companyName,
 }) {
-  
+  // Vendor transactions context.
-
   const {
     vendorsTransactions: { tableRows },
     isVendorsTransactionsLoading,
     query,
   } = useVendorsTransactionsContext();
 
+  // Retireve vendor transactions table columns.
   const columns = useVendorsTransactionsColumns();
 
-  const expandedRows = useMemo(() => defaultExpanderReducer(tableRows, 5), [
+  const expandedRows = useMemo(
-    tableRows,
+    () => defaultExpanderReducer(tableRows, 5),
-  ]);
+    [tableRows],
+  );
 
   const rowClassNames = (row) => {
     return [`row-type--${row.original.row_types}`];

src/style/pages/FinancialStatements/ContactsBalanceSummary.scss

@@ -1,25 +1,26 @@
 .financial-sheet {
+
   &--customers-balance-summary,
   &--vendors-balance-summary {
     .financial-sheet__table {
+
       .thead,
       .tbody {
-        .tr .td.customer_name ~ .td,
+
-        .tr .th.customer_name ~ .th {
+        .tr .td.customer_name~.td,
+        .tr .th.customer_name~.th {
           text-align: right;
         }
       }
+
       .tbody {
         .tr:not(.no-results) {
-          &.row-type--CUSTOMER,
-          &.row-type--VENDOR {
-            border-top: 1px solid #BBB
-          }
           .td {
             border-bottom: 0;
             padding-top: 0.4rem;
             padding-bottom: 0.4rem;
           }
+
           &.row-type--TOTAL {
             font-weight: 500;
 
@@ -33,6 +34,7 @@
     }
   }
 }
+
 .financial-statement--balance-summary {
   .financial-header-drawer {
     .bp3-drawer {
@@ -40,4 +42,4 @@
       max-height: 415px;
     }
   }
-}
+}

src/style/pages/FinancialStatements/ContactsTransactions.scss

@@ -1,13 +1,17 @@
 .financial-sheet {
+
   &--customer-transactions,
   &--vendor-transactions {
     width: 100%;
 
     .financial-sheet__table {
+
       .tbody,
       .thead {
+
         .tr .td,
         .tr .th {
+
           &.credit,
           &.debit,
           &.running_balance {
@@ -15,6 +19,7 @@
           }
         }
       }
+
       .tbody {
         .tr .td {
           padding-top: 0.2rem;
@@ -24,39 +29,51 @@
 
           &.customer_name,
           &.vendor_name {
-            > div {
+            >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 {
@@ -64,10 +81,12 @@
                 display: none;
               }
             }
+
             &:not(:first-child).is-expanded .td {
               border-top: 1px solid #ddd;
             }
           }
+
           &--CUSTOMER:last-child,
           &--VENDOR:last-child {
             .td {
@@ -86,4 +105,4 @@
       max-height: 450px;
     }
   }
-}
+}

src/style/pages/FinancialStatements/GeneralLedger.scss

@@ -1,75 +1,88 @@
+.financial-sheet {
+  &--general-ledger {
+    .financial-sheet__table {
 
-.financial-sheet{
-  &--general-ledger{
-    .financial-sheet__table{
       .tbody,
-      .thead{
+      .thead {
+
         .tr .td,
-        .tr .th{
+        .tr .th {
+
           &.credit,
           &.debit,
           &.running_balance,
-          &.amount{
+          &.amount {
             text-align: right;
           }
         }
       }
-      .tbody{
+
-       
+      .tbody {
-        .tr .td{
+        .tr .td {
           padding-top: 0.2rem;
           padding-bottom: 0.2rem;
           border-top-color: transparent;
           border-bottom-color: transparent;
-  
+
-          &.date{
+          &.date {
-            > div{
+            >div {
               display: flex;
             }
-            span.force-width{
+
+            span.force-width {
               position: relative;
             }
           }
         }
-        .tr:not(.no-results) .td{
+
+        .tr:not(.no-results) .td {
           border-left: 1px solid #ececec;
         }
 
-        .tr{
+        .tr:last-child .td {
-          &.is-expanded{
+          border-bottom: 1px solid #ececec;
+        }
 
-            .td.amount{
+        .tr {
+          &.is-expanded {
 
-              .cell-inner{
+            .td.amount {
+
+              .cell-inner {
                 display: none
               }
             }
           }
         }
-        .tr.row-type{
+
+        .tr.row-type {
 
 
-          &--ACCOUNT_ROW{
+          &--ACCOUNT_ROW {
-            .td{
+            .td {
-              &.date{
+              &.date {
                 font-weight: 500;
               }
-              &.name{
+
+              &.name {
                 border-left-color: transparent;
               }
             }
-            &:not(:first-child).is-expanded .td{
+
+            &:not(:first-child).is-expanded .td {
               border-top: 1px solid #DDD;
             }
           }
+
           &--OPENING_BALANCE,
-          &--CLOSING_BALANCE{
+          &--CLOSING_BALANCE {
-            .amount{
+            .amount {
               font-weight: 500;
             }
           }
-          &--CLOSING_BALANCE{
+
-            .name{
+          &--CLOSING_BALANCE {
+            .name {
               font-weight: 500;
             }
           }

src/style/pages/FinancialStatements/InventoryItemDetails.scss

@@ -3,21 +3,25 @@
     width: 100%;
 
     .financial-sheet__table {
+
       .tbody,
       .thead {
-        .tr .td.transaction_id ~ .td,
+
-        .tr .th.transaction_id ~ .th {
+        .tr .td.transaction_id~.td,
+        .tr .th.transaction_id~.th {
           text-align: right;
         }
       }
+
       .tbody {
         .tr .td {
           padding-top: 0.2rem;
           padding-bottom: 0.2rem;
           border-top-color: transparent;
           border-bottom-color: transparent;
+
           &.date {
-            > div {
+            >div {
               display: flex;
             }
 
@@ -26,10 +30,15 @@
             }
           }
         }
+
         .tr:not(.no-results) .td {
           border-left: 1px solid #ececec;
         }
 
+        .tr:last-child .td {
+          border-bottom: 1px solid #ddd;
+        }
+
         .tr.row-type {
           &--ITEM {
             .td {
@@ -37,15 +46,18 @@
                 border-left-color: transparent;
               }
             }
+
             &:not(:first-child).is-expanded .td {
               border-top: 1px solid #ddd;
             }
           }
+
           &--ITEM,
           &--OPENING_ENTRY,
           &--CLOSING_ENTRY {
             font-weight: 500;
           }
+
           &--ITEM {
             &.is-expanded {
               .td.value .cell-inner {
@@ -58,20 +70,23 @@
     }
   }
 }
+
 .number-format-dropdown {
   .toggles-fields {
     .bp3-form-group:first-child {
       display: none;
     }
   }
+
   .form-group--money-format {
     display: none;
   }
 }
+
 .financial-statement--inventory-details {
   .financial-header-drawer {
     .bp3-drawer {
       max-height: 350px;
     }
   }
-}
+}