From e0c565388ae61b21fca643944370dd17a2de9e82 Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Sat, 1 Jan 2022 18:06:46 +0200
Subject: [PATCH] fix: `BIG-196` Bill landed cost transactions formatted
 allocate type.

---
 .../BillDrawer/LocatedLandedCostTable.js      |  5 +++--
 .../Drawers/BillDrawer/components.js          | 19 +++++++++++--------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/containers/Drawers/BillDrawer/LocatedLandedCostTable.js b/src/containers/Drawers/BillDrawer/LocatedLandedCostTable.js
index 300928a4d..4d667ec19 100644
--- a/src/containers/Drawers/BillDrawer/LocatedLandedCostTable.js
+++ b/src/containers/Drawers/BillDrawer/LocatedLandedCostTable.js
@@ -27,11 +27,12 @@ function LocatedLandedCostTable({
   // #withDrawerActions
   openDrawer,
 }) {
+  // Located landed cost table columns.
   const columns = useLocatedLandedCostColumns();
+
+  // Bill drawer context.
   const { transactions, billId } = useBillDrawerContext();
 
-
-
   // Handle the transaction delete action.
   const handleDeleteTransaction = ({ id }) => {
     openAlert('bill-located-cost-delete', { BillId: id });
diff --git a/src/containers/Drawers/BillDrawer/components.js b/src/containers/Drawers/BillDrawer/components.js
index daf163214..ec60f31ba 100644
--- a/src/containers/Drawers/BillDrawer/components.js
+++ b/src/containers/Drawers/BillDrawer/components.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
+import clsx from 'classnames';
 import { Intent, MenuItem, Menu } from '@blueprintjs/core';
 import { safeCallback } from 'utils';
-import { Can, Icon } from 'components';
-import { BillAction, AbilitySubject } from '../../../common/abilityOption';
+import { CLASSES } from 'common/classes';
+import {  Icon } from 'components';
 
 /**
  * Actions menu.
@@ -63,26 +64,28 @@ export function useLocatedLandedCostColumns() {
         Header: intl.get('name'),
         accessor: NameAccessor,
         width: 150,
-        className: 'name',
+        textOverview: true,
       },
       {
         Header: intl.get('amount'),
         accessor: 'formatted_amount',
         width: 100,
-        className: 'amount',
+        align: 'right',
+        textOverview: true,
+        className: clsx(CLASSES.FONT_BOLD),
       },
       {
         id: 'from_transaction',
         Header: intl.get('From transaction'),
         Cell: FromTransactionCell,
         width: 100,
-        className: 'from-transaction',
+        textOverview: true,
       },
       {
         Header: intl.get('allocation_method'),
-        accessor: 'allocation_method',
+        accessor: 'allocation_method_formatted',
         width: 100,
-        className: 'allocation-method',
+        textOverview: true,
       },
     ],
     [],
@@ -93,7 +96,7 @@ const LabelName = styled.div``;
 
 const LabelDescription = styled.div`
   font-size: 12px;
-  margin-top: 6px;
+  margin-top: 2px;
   display: block;
   opacity: 0.75;
 `;