feat(GLTable): columns text overflow.

src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerHeader.js

@@ -7,7 +7,6 @@ import {
   FormattedMessage as T,
   Row,
   Col,
-  CommercialDocTopHeader,
   CommercialDocHeader,
 } from 'components';
 import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';
@@ -16,23 +15,14 @@ import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawer
  * Cashlflow transaction drawer detail Header.
  */
 export default function CashflowTransactionDrawerHeader() {
-  const {
+  const { cashflowTransaction } = useCashflowTransactionDrawerContext();
-    cashflowTransaction: {
-      formatted_amount,
-      transaction_type_formatted,
-      transaction_number,
-      reference_no,
-      date,
-      description,
-    },
-  } = useCashflowTransactionDrawerContext();
 
   return (
     <CommercialDocHeader>
       <CommercialDocHeader>
         <DetailsMenu>
           <DetailItem name={'total'} label={<T id={'total'} />}>
-            <h3 class="amount">{formatted_amount}</h3>
+            <h3 class="big-number">{cashflowTransaction.formatted_amount}</h3>
           </DetailItem>
         </DetailsMenu>
       </CommercialDocHeader>
@@ -44,33 +34,26 @@ export default function CashflowTransactionDrawerHeader() {
               name={'transaction_type'}
               label={<T id={'cash_flow_drawer.label_transaction_type'} />}
             >
-              {transaction_type_formatted}
+              {cashflowTransaction.transaction_type_formatted}
             </DetailItem>
 
             <DetailItem
               name={'transaction_number'}
               label={<T id={'cash_flow.drawer.label_transaction_no'} />}
             >
-              {transaction_number}
+              {cashflowTransaction.transaction_number}
             </DetailItem>
 
             <DetailItem label={<T id={'date'} />}>
-              <FormatDate value={date} />
+              <FormatDate value={cashflowTransaction.date} />
             </DetailItem>
 
             <DetailItem name={'reference-no'} label={<T id={'reference_no'} />}>
-              {defaultTo(reference_no, '-')}
+              {defaultTo(cashflowTransaction.reference_no, '-')}
             </DetailItem>
           </DetailsMenu>
         </Col>
       </Row>
-
-      {/* <div class="cashflow-drawer__content-description">
-        <b class="title">
-          <T id={'description'} />
-        </b>
-        : {defaultTo(description, '—')}
-      </div> */}
     </CommercialDocHeader>
   );
 }

src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/components.js

@@ -75,6 +75,7 @@ export const useInvoicePaymentTransactionsColumns = () => {
         accessor: 'payment_number',
         width: 100,
         className: 'payment_number',
+        textOverview: true,
       },
       {
         id: 'payment_reference_no',

src/containers/JournalEntriesTable/utils.js

@@ -8,22 +8,24 @@ export const useGLEntriesTableColumns = () => {
     () => [
       {
         Header: intl.get('date'),
-        accessor: 'date',
         accessor: ({ formatted_date }) =>
           moment(formatted_date).format('YYYY MMM DD'),
         width: 140,
         className: 'date',
+        textOverview: true,
       },
       {
         Header: intl.get('account_name'),
         accessor: 'account_name',
         width: 140,
         className: 'account_name',
+        textOverview: true,
       },
       {
         Header: intl.get('contact'),
         accessor: 'contactTypeFormatted',
         width: 140,
+        textOverview: true,
       },
       {
         Header: intl.get('credit'),
@@ -31,12 +33,14 @@ export const useGLEntriesTableColumns = () => {
         width: 100,
         className: 'credit',
         textAligment: 'right',
+        textOverview: true,
       },
       {
         Header: intl.get('debit'),
         accessor: ({ debit }) => debit.formatted_amount,
         width: 100,
         className: 'debit',
+        textOverview: true,
       },
     ],
     [],