fix: financial report data tables.

src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.js

@@ -29,7 +29,6 @@ export default function APAgingSummaryTable({
   return (
     <FinancialSheet
       companyName={organizationName}
-      name={'payable-aging-summary'}
       sheetType={intl.get('payable_aging_summary')}
       asDate={new Date()}
       loading={isAPAgingLoading}

src/containers/FinancialStatements/CashFlowStatement/dynamicColumns.js

@@ -17,6 +17,7 @@ const accountNameMapper = (column) => ({
   textOverview: true,
   width: 400,
   disableSortBy: true,
+  sticky: Align.Left,
 });
 
 /**

src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.js

@@ -21,6 +21,7 @@ export default function CustomersBalanceSummaryTable({
     CustomerBalanceSummary: { table },
   } = useCustomersBalanceSummaryContext();
 
+  // Retrieves the customers summary columns.
   const columns = useCustomersSummaryColumns();
 
   return (

src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js

@@ -58,10 +58,10 @@ const CustomersTransactionsDataTable = styled(DataTable)`
   .table {
     .tbody {
       .tr .td {
-        padding-top: 0.2rem;
+        padding-top: 0.36rem;
-        padding-bottom: 0.2rem;
+        padding-bottom: 0.36rem;
       }
-      .tr:not(.no-results) .td {
+      .tr:not(.no-results) .td:not(:first-of-type) {
         border-left: 1px solid #ececec;
       }
       .tr:last-child .td {
@@ -73,6 +73,11 @@ const CustomersTransactionsDataTable = styled(DataTable)`
           .td {
             &.customer_name {
               font-weight: 500;
+
+              .cell-inner {
+                white-space: nowrap;
+                position: relative;
+              }
             }
           }
           &:not(:first-child).is-expanded .td {

src/containers/FinancialStatements/CustomersTransactions/components.js

@@ -3,14 +3,13 @@ import intl from 'react-intl-universal';
 import { If } from 'components';
 import { useCustomersTransactionsContext } from './CustomersTransactionsProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';
-import { getForceWidth, getColumnWidth } from 'utils';
+import { getColumnWidth } from 'utils';
 
 import { Align } from 'common';
 
 /**
  * Retrieve customers transactions columns.
  */
-
 export const useCustomersTransactionsColumns = () => {
   const {
     customersTransactions: { tableRows },
@@ -20,16 +19,7 @@ export const useCustomersTransactionsColumns = () => {
     () => [
       {
         Header: intl.get('customer_name'),
-        accessor: ({ cells }) => {
+        accessor: 'cells[0].value',
-          return (
-            <span
-              className={'force-width'}
-              style={{ minWidth: getForceWidth(cells[0].value) }}
-            >
-              {cells[0].value}
-            </span>
-          );
-        },
         className: 'customer_name',
       },
       {

src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js

@@ -78,7 +78,7 @@ const GeneralLedgerDataTable = styled(DataTable)`
       }
     }
 
-    .tr:not(.no-results) .td {
+    .tr:not(.no-results) .td:not(:first-of-type) {
       border-left: 1px solid #ececec;
     }
     .tr:last-child .td {
@@ -90,10 +90,11 @@ const GeneralLedgerDataTable = styled(DataTable)`
         .td {
           &.date {
             font-weight: 500;
-          }
 
-          &.name {
+            .cell-inner{
-            border-left-color: transparent;
+              white-space: nowrap;
+              position: relative;
+            }
           }
         }
 

src/containers/FinancialStatements/GeneralLedger/components.js

@@ -2,7 +2,7 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import { Button } from '@blueprintjs/core';
 import { Icon, If } from 'components';
-import { ForceWidth, FormattedMessage as T } from 'components';
+import { FormattedMessage as T } from 'components';
 
 import { getColumnWidth } from 'utils';
 import { useGeneralLedgerContext } from './GeneralLedgerProvider';
@@ -23,12 +23,7 @@ export function useGeneralLedgerTableColumns() {
     () => [
       {
         Header: intl.get('date'),
-        accessor: (row) => {
+        accessor: 'date',
-          if (row.rowType === 'ACCOUNT_ROW') {
-            return <ForceWidth children={row.date} />;
-          }
-          return row.date;
-        },
         className: 'date',
         width: 120,
       },

src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.js

@@ -37,6 +37,7 @@ export function InventoryItemDetailsTable({
       loading={isInventoryItemDetailsLoading}
       fromDate={query.from_date}
       toDate={query.to_date}
+      fullWidth={true}
     >
       <InventoryItemDetailsDataTable
         columns={columns}
@@ -57,23 +58,11 @@ const InventoryItemDetailsDataTable = styled(DataTable)`
   .table {
     .tbody {
       .tr .td {
-        padding-top: 0.2rem;
+        padding-top: 0.3rem;
-        padding-bottom: 0.2rem;
+        padding-bottom: 0.3rem;
-        border-top-color: transparent;
-        border-bottom-color: transparent;
-
-        &.date {
-          > div {
-            display: flex;
-          }
-
-          span.force-width {
-            position: relative;
-          }
-        }
       }
 
-      .tr:not(.no-results) .td {
+      .tr:not(.no-results) .td:not(:first-of-type) {
         border-left: 1px solid #ececec;
       }
 
@@ -87,8 +76,14 @@ const InventoryItemDetailsDataTable = styled(DataTable)`
             &.transaction_type {
               border-left-color: transparent;
             }
-          }
 
+            &.date {
+              .cell-inner {
+                white-space: nowrap;
+                position: relative;
+              }
+            }
+          }
           &:not(:first-child).is-expanded .td {
             border-top: 1px solid #ddd;
           }

src/containers/FinancialStatements/InventoryItemDetails/utils.js

@@ -1,17 +1,43 @@
 import * as R from 'ramda';
+
 import { getColumnWidth } from 'utils';
-import { CellForceWidth } from '../../../components';
+import { Align } from 'common';
+
+const itemNameOrDateColumn = R.curry((data, index, column) => ({
+  id: column.key,
+  key: column.key,
+  Header: column.label,
+  accessor: `cells[${index}].value`,
+  className: column.key,
+  width: getColumnWidth(data, `cells.${index}.key`, {
+    minWidth: 130,
+    magicSpacing: 10,
+  }),
+  disableSortBy: true,
+}));
+
+const numericColumn = R.curry((data, index, column) => ({
+  id: column.key,
+  key: column.key,
+  Header: column.label,
+  accessor: `cells[${index}].value`,
+  className: column.key,
+  width: getColumnWidth(data, `cells.${index}.key`, {
+    minWidth: 130,
+    magicSpacing: 10,
+  }),
+  disableSortBy: true,
+  align: Align.Right,
+}));
 
 /**
  *  columns mapper.
  */
-const columnsMapper = (data, index, column) => ({
+const columnsMapper = R.curry((data, index, column) => ({
   id: column.key,
   key: column.key,
   Header: column.label,
-  Cell: CellForceWidth,
   accessor: `cells[${index}].value`,
-  forceWidthAccess: `cells[0].value`,
   className: column.key,
   width: getColumnWidth(data, `cells.${index}.key`, {
     minWidth: 130,
@@ -19,7 +45,7 @@ const columnsMapper = (data, index, column) => ({
   }),
   disableSortBy: true,
   textOverview: true,
-});
+}));
 
 /**
  * Inventory item details columns.
@@ -27,7 +53,17 @@ const columnsMapper = (data, index, column) => ({
 export const dynamicColumns = (columns, data) => {
   const mapper = (column, index) => {
     return R.compose(
-      R.when(R.pathEq(['key']), R.curry(columnsMapper)(data, index)),
+      R.cond([
+        [R.pathEq(['key'], 'date'), itemNameOrDateColumn(data, index)],
+        [R.pathEq(['key'], 'running_quantity'), numericColumn(data, index)],
+        [R.pathEq(['key'], 'profit_margin'), numericColumn(data, index)],
+        [R.pathEq(['key'], 'running_value'), numericColumn(data, index)],
+        [R.pathEq(['key'], 'quantity'), numericColumn(data, index)],
+        [R.pathEq(['key'], 'rate'), numericColumn(data, index)],
+        [R.pathEq(['key'], 'total'), numericColumn(data, index)],
+        [R.pathEq(['key'], 'value'), numericColumn(data, index)],
+        [R.T, columnsMapper(data, index)],
+      ]),
     )(column);
   };
   return columns.map(mapper);

src/containers/FinancialStatements/VendorsTransactions/components.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import intl from 'react-intl-universal';
+
 import { If } from 'components';
 import { useVendorsTransactionsContext } from './VendorsTransactionsProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';
-import { getColumnWidth, getForceWidth } from 'utils';
+import { getColumnWidth } from 'utils';
 
 /**
  * Retrieve vendors transactions columns.
@@ -17,19 +18,8 @@ export const useVendorsTransactionsColumns = () => {
     () => [
       {
         Header: intl.get('vendor_name'),
-        accessor: ({ cells }) => {
+        accessor: 'cells[1].value',
-          return (
-            <span
-              className={'force-width'}
-              style={{ minWidth: getForceWidth(cells[0].value) }}
-            >
-              {cells[0].value}
-            </span>
-          );
-        },
         className: 'vendor_name',
-        // textOverview: true,
-        // width: 240,
       },
       {
         Header: intl.get('account_name'),