feat: display expense formatted amount.

src/containers/Drawers/BillDrawer/BillDetailActionsBar.js

@@ -8,7 +8,6 @@ import {
   NavbarDivider,
   Intent,
 } from '@blueprintjs/core';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
 import { useBillDrawerContext } from './BillDrawerProvider';
 

src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.js

@@ -27,12 +27,7 @@ export default function ExpenseDrawerHeader() {
       <CommercialDocTopHeader>
         <DetailsMenu>
           <DetailItem name={'amount'} label={<T id={'full_amount'} />}>
-            <h3 class="big-number">
-              <Money
-                amount={expense.total_amount}
-                currency={expense.currency_code}
-              />
-            </h3>
+            <h3 class="big-number">{expense.formatted_amount}</h3>
           </DetailItem>
 
           <StatusDetailItem>
@@ -52,8 +47,8 @@ export default function ExpenseDrawerHeader() {
               {defaultTo(expense.reference_no, '-')}
             </DetailItem>
 
-            <DetailItem label={<T id={'published_at'} />}>
-              {moment(expense.published_at).format('YYYY MMM DD')}
+            <DetailItem label={<T id={'description'} />}>
+              {defaultTo(expense.description, '—')}
             </DetailItem>
           </DetailsMenu>
         </Col>
@@ -64,9 +59,10 @@ export default function ExpenseDrawerHeader() {
             direction={'horizantal'}
             minLabelSize={'180px'}
           >
-            <DetailItem label={<T id={'description'} />}>
-              {defaultTo(expense.description, '—')}
+            <DetailItem label={<T id={'published_at'} />}>
+              {moment(expense.published_at).format('YYYY MMM DD')}
             </DetailItem>
+
             <DetailItem label={<T id={'created_at'} />}>2021 Aug 24</DetailItem>
           </DetailsMenu>
         </Col>

src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailActionsBar.js

@@ -69,7 +69,7 @@ function VendorCreditDetailActionsBar({
         <If condition={!vendorCredit.is_closed && !vendorCredit.is_draft}>
           <Button
             className={Classes.MINIMAL}
-            icon={<Icon icon="quick-payment-16" iconSize={16} />}
+            icon={<Icon icon="arrow-downward" iconSize={18} />}
             text={<T id={'refund'} />}
             onClick={handleRefundVendorCredit}
           />

src/containers/Expenses/ExpensesLanding/components.js

@@ -12,11 +12,13 @@ import {
   MenuDivider,
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
+import clsx from 'classnames';
+
+import { CLASSES } from 'common/classes';
 import { ExpenseAction, AbilitySubject } from '../../../common/abilityOption';
 import {
   FormatDateCell,
   FormattedMessage as T,
-  Money,
   Icon,
   If,
   Can,
@@ -98,13 +100,6 @@ export function ActionsCell(props) {
   );
 }
 
-/**
- * Total amount accessor.
- */
-export function TotalAmountAccessor(row) {
-  return <Money amount={row.total_amount} currency={row.currency_code} />;
-}
-
 /**
  * Publish accessor.
  */
@@ -149,11 +144,12 @@ export function useExpensesTableColumns() {
       {
         id: 'amount',
         Header: intl.get('full_amount'),
-        accessor: TotalAmountAccessor,
+        accessor: 'formatted_amount',
         className: 'amount',
         align: 'right',
         width: 150,
         clickable: true,
+        className: clsx(CLASSES.FONT_BOLD),
       },
       {
         id: 'payment_account',