From e1a2fa57dbdc5ce61f0ad8141d88c6166b13b534 Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Tue, 14 Sep 2021 15:28:02 +0200
Subject: [PATCH] fix: numeric values formating.

---
 client/src/common/classes.js                  |   1 +
 client/src/components/Datatable/TableCell.js  |   1 +
 .../src/components/Datatable/TableHeader.js   |   6 +-
 client/src/components/Utils/FormatNumber.js   |  10 +
 client/src/components/Utils/index.js          |   3 +
 client/src/components/index.js                |   2 +
 .../Accounting/JournalsLanding/utils.js       |   8 +-
 client/src/containers/Accounts/utils.js       |   6 +-
 .../Customers/CustomersLanding/components.js  |  14 +-
 .../AccountDrawer/AccountDrawerDetails.js     |   1 -
 .../containers/Drawers/AccountDrawer/utils.js |  12 +-
 .../Drawers/BillDrawer/BillDetailFooter.js    |  14 +-
 .../containers/Drawers/BillDrawer/utils.js    |  14 +-
 .../EstimateDetailFooter.js                   |  18 +-
 .../Drawers/EstimateDetailDrawer/utils.js     |  10 +-
 .../ExpenseDrawer/ExpenseDrawerFooter.js      |  21 +-
 .../containers/Drawers/ExpenseDrawer/utils.js |  10 +
 .../InventoryAdjustmentDetailDrawer/utils.js  |   6 +-
 .../InvoiceDetailFooter.js                    |  12 +-
 .../Drawers/InvoiceDetailDrawer/utils.js      |  13 +-
 .../ManualJournalDrawerContent.js             |   5 +-
 .../ManualJournalDrawerFooter.js              |  23 ++-
 .../Drawers/ManualJournalDrawer/utils.js      |  13 +-
 .../PaymentMadeDetailFooter.js                |   6 +-
 .../PaymentMadeDetailProvider.js              |   2 +-
 .../PaymentMadeDetailTable.js                 |   5 +
 .../Drawers/PaymentMadeDetailDrawer/utils.js  |  11 +-
 .../PaymentReceiveDetailFooter.js             |   6 +-
 .../PaymentReceiveDetailDrawer/utils.js       |  10 +-
 .../ReceiptDetailFooter.js                    |  11 +-
 .../Drawers/ReceiptDetailDrawer/utils.js      |  10 +-
 .../Expenses/ExpensesLanding/components.js    |   5 +-
 .../APAgingSummary/components.js              |  12 +-
 .../GeneralLedger/GeneralLedgerTable.js       |   2 -
 .../GeneralLedger/components.js               |  11 +-
 client/src/containers/Items/components.js     |   9 +-
 .../Bills/BillsLanding/components.js          |   7 +-
 .../PaymentsLanding/PaymentMadeList.js        |   2 +-
 .../PaymentsLanding/components.js             |   2 +
 .../Estimates/EstimatesLanding/components.js  |   8 +-
 .../Invoices/InvoicesLanding/components.js    |  19 +-
 .../PaymentsLanding/components.js             |   3 +-
 .../Receipts/ReceiptsLanding/components.js    |   5 +-
 .../Vendors/VendorsLanding/components.js      |   3 +-
 client/src/style/App.scss                     |   7 +-
 .../components/Drawers/ExpenseDrawer.scss     | 176 ++++++++---------
 .../Drawers/ManualJournalDrawer.scss          | 113 +++++++++++
 .../style/components/Drawers/ViewDetails.scss | 179 ------------------
 client/src/utils.js                           |  47 +++--
 .../services/Sales/SaleInvoiceTransformer.ts  |  18 +-
 50 files changed, 492 insertions(+), 420 deletions(-)
 create mode 100644 client/src/components/Utils/FormatNumber.js
 create mode 100644 client/src/components/Utils/index.js
 create mode 100644 client/src/style/components/Drawers/ManualJournalDrawer.scss
 delete mode 100644 client/src/style/components/Drawers/ViewDetails.scss

diff --git a/client/src/common/classes.js b/client/src/common/classes.js
index 5df7cb855..459138ca2 100644
--- a/client/src/common/classes.js
+++ b/client/src/common/classes.js
@@ -88,6 +88,7 @@ const CLASSES = {
 
   ...Classes,
   CARD: 'card',
+  ALIGN_RIGHT: 'align-right',
 };
 
 export {
diff --git a/client/src/components/Datatable/TableCell.js b/client/src/components/Datatable/TableCell.js
index ec5bfe965..b7ecdf955 100644
--- a/client/src/components/Datatable/TableCell.js
+++ b/client/src/components/Datatable/TableCell.js
@@ -59,6 +59,7 @@ export default function TableCell({ cell, row, index }) {
         className: classNames(cell.column.className, 'td', {
           'is-text-overview': cell.column.textOverview,
           'clickable': cell.column.clickable,
+          'align-right': cell.column.align === 'right',
         }),
         onClick: handleCellClick,
       })}
diff --git a/client/src/components/Datatable/TableHeader.js b/client/src/components/Datatable/TableHeader.js
index b15c04617..b1916bb49 100644
--- a/client/src/components/Datatable/TableHeader.js
+++ b/client/src/components/Datatable/TableHeader.js
@@ -14,7 +14,9 @@ function TableHeaderCell({ column, index }) {
   return (
     <div
       {...column.getHeaderProps({
-        className: classNames(column.className || '', 'th'),
+        className: classNames(column.className || '', 'th', {
+          'align-right': column.align === 'right',
+        }),
       })}
     >
       <If condition={expandable && index + 1 === expandToggleColumn}>
@@ -32,7 +34,7 @@ function TableHeaderCell({ column, index }) {
         {...column.getSortByToggleProps({
           className: classNames('cell-inner', {
             'text-overview': column.textOverview,
-          })
+          }),
         })}
       >
         {column.render('Header')}
diff --git a/client/src/components/Utils/FormatNumber.js b/client/src/components/Utils/FormatNumber.js
new file mode 100644
index 000000000..bb2c5a701
--- /dev/null
+++ b/client/src/components/Utils/FormatNumber.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import { formattedAmount } from 'utils';
+
+export function FormatNumber({ value, currency = '', noZero }) {
+  return formattedAmount(value, currency, { noZero });
+}
+
+export function FormatNumberCell({ value, column: { formatNumber } }) {
+  return <FormatNumber value={value} {...formatNumber} />;
+}
diff --git a/client/src/components/Utils/index.js b/client/src/components/Utils/index.js
new file mode 100644
index 000000000..f7ab63d01
--- /dev/null
+++ b/client/src/components/Utils/index.js
@@ -0,0 +1,3 @@
+
+
+export * from './FormatNumber';
\ No newline at end of file
diff --git a/client/src/components/index.js b/client/src/components/index.js
index a6dc635e3..7249bbacc 100644
--- a/client/src/components/index.js
+++ b/client/src/components/index.js
@@ -78,6 +78,8 @@ export * from './Dashboard';
 export * from './Drawer';
 export * from './Forms';
 export * from './MultiSelectTaggable'
+export * from './Utils/FormatNumber';
+
 const Hint = FieldHint;
 
 const T = FormattedMessage;
diff --git a/client/src/containers/Accounting/JournalsLanding/utils.js b/client/src/containers/Accounting/JournalsLanding/utils.js
index 18bca9dca..b616edf08 100644
--- a/client/src/containers/Accounting/JournalsLanding/utils.js
+++ b/client/src/containers/Accounting/JournalsLanding/utils.js
@@ -1,12 +1,7 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import moment from 'moment';
-import {
-  NoteAccessor,
-  StatusAccessor,
-  DateAccessor,
-  AmountAccessor,
-} from './components';
+import { NoteAccessor, StatusAccessor, DateAccessor } from './components';
 
 /**
  * Retrieve the manual journals columns.
@@ -29,6 +24,7 @@ export const useManualJournalsColumns = () => {
         className: 'amount',
         width: 115,
         clickable: true,
+        align: 'right',
       },
       {
         id: 'journal_number',
diff --git a/client/src/containers/Accounts/utils.js b/client/src/containers/Accounts/utils.js
index 76c3f1c90..0fa98ec84 100644
--- a/client/src/containers/Accounts/utils.js
+++ b/client/src/containers/Accounts/utils.js
@@ -1,7 +1,10 @@
 import React from 'react';
 import { Intent, Tag } from '@blueprintjs/core';
-import { If, AppToaster } from 'components';
 import intl from 'react-intl-universal';
+import clsx from 'classnames';
+
+import { CLASSES } from '../../common/classes';
+import { If, AppToaster } from 'components';
 import { NormalCell, BalanceCell } from './components';
 import { transformTableStateToQuery, isBlank } from 'utils';
 
@@ -99,6 +102,7 @@ export const useAccountsTableColumns = () => {
         Cell: BalanceCell,
         width: 150,
         clickable: true,
+        align: 'right',
       },
     ],
     [],
diff --git a/client/src/containers/Customers/CustomersLanding/components.js b/client/src/containers/Customers/CustomersLanding/components.js
index 3b45559c3..958563ae2 100644
--- a/client/src/containers/Customers/CustomersLanding/components.js
+++ b/client/src/containers/Customers/CustomersLanding/components.js
@@ -1,18 +1,18 @@
 import React, { useMemo } from 'react';
 import {
-  Button,
-  Popover,
   Menu,
   MenuItem,
   MenuDivider,
-  Position,
   Intent,
 } from '@blueprintjs/core';
-import { Icon, Money, If } from 'components';
-import { safeCallback } from 'utils';
-import { firstLettersArgs } from 'utils';
+import clsx from 'classnames';
 import intl from 'react-intl-universal';
 
+import { CLASSES } from '../../../common/classes';
+import { Icon, Money, If } from 'components';
+import {  } from 'utils';
+import { safeCallback, firstLettersArgs } from 'utils';
+
 /**
  * Actions menu.
  */
@@ -134,7 +134,7 @@ export function useCustomersTableColumns() {
         id: 'balance',
         Header: intl.get('receivable_balance'),
         accessor: BalanceAccessor,
-        className: 'receivable_balance',
+        align: 'right',
         width: 100,
         clickable: true,
       },
diff --git a/client/src/containers/Drawers/AccountDrawer/AccountDrawerDetails.js b/client/src/containers/Drawers/AccountDrawer/AccountDrawerDetails.js
index 2ee430cd1..868030920 100644
--- a/client/src/containers/Drawers/AccountDrawer/AccountDrawerDetails.js
+++ b/client/src/containers/Drawers/AccountDrawer/AccountDrawerDetails.js
@@ -17,7 +17,6 @@ export default function AccountDrawerDetails() {
       <Card className={'card-header'}>
         <AccountDrawerHeader />
       </Card>
-
       <AccountDrawerTable />
     </div>
   );
diff --git a/client/src/containers/Drawers/AccountDrawer/utils.js b/client/src/containers/Drawers/AccountDrawer/utils.js
index 8363914ad..bcaa3bb88 100644
--- a/client/src/containers/Drawers/AccountDrawer/utils.js
+++ b/client/src/containers/Drawers/AccountDrawer/utils.js
@@ -2,7 +2,6 @@ import intl from 'react-intl-universal';
 import React from 'react';
 import moment from 'moment';
 
-import { Money } from 'components';
 import { isBlank } from 'utils';
 
 /**
@@ -35,29 +34,40 @@ export const useAccountReadEntriesColumns = () =>
         Header: intl.get('transaction_date'),
         accessor: ({ date }) => moment(date).format('YYYY MMM DD'),
         width: 110,
+        textOverview: true,
       },
       {
         Header: intl.get('transaction_type'),
         accessor: 'reference_type_formatted',
         width: 100,
+        textOverview: true,
       },
       {
         Header: intl.get('credit'),
         accessor: 'credit',
         Cell: DebitCreditTableCell,
         width: 80,
+        className: 'credit',
+        align: 'right',
+        textOverview: true,
       },
       {
         Header: intl.get('debit'),
         accessor: 'debit',
         Cell: DebitCreditTableCell,
         width: 80,
+        className: 'debit',
+        align: 'right',
+        textOverview: true,
       },
       {
         Header: intl.get('running_balance'),
         Cell: RunningBalanceTableCell,
         accessor: 'running_balance',
         width: 110,
+        className: 'running_balance',
+        align: 'right',
+        textOverview: true,
       },
     ],
     [],
diff --git a/client/src/containers/Drawers/BillDrawer/BillDetailFooter.js b/client/src/containers/Drawers/BillDrawer/BillDetailFooter.js
index adcbff422..8bc47089f 100644
--- a/client/src/containers/Drawers/BillDrawer/BillDetailFooter.js
+++ b/client/src/containers/Drawers/BillDrawer/BillDetailFooter.js
@@ -1,10 +1,14 @@
 import React from 'react';
 import clsx from 'classnames';
 
-import { T, TotalLines, TotalLine } from 'components';
-import BillDrawerCls from 'style/components/Drawers/BillDrawer.module.scss';
+import { FormatNumber, T, TotalLines, TotalLine } from '../../../components';
 import { useBillDrawerContext } from './BillDrawerProvider';
 
+import BillDrawerCls from 'style/components/Drawers/BillDrawer.module.scss';
+
+/**
+ * Bill read-only details footer.
+ */
 export function BillDetailFooter() {
   const { bill } = useBillDrawerContext();
 
@@ -13,17 +17,17 @@ export function BillDetailFooter() {
       <TotalLines>
         <TotalLine
           title={<T id={'bill.details.subtotal'} />}
-          value={bill.amount}
+          value={<FormatNumber value={bill.amount} />}
           className={BillDrawerCls.total_line_subtotal}
         />
         <TotalLine
           title={<T id={'bill.details.total'} />}
-          value={bill.amount}
+          value={bill.formatted_amount}
           className={BillDrawerCls.total_line_total}
         />
         <TotalLine
           title={<T id={'bill.details.payment_amount'} />}
-          value={bill.payment_amount}
+          value={bill.formatted_payment_amount}
           className={BillDrawerCls.total_line_payment}
         />
         <TotalLine
diff --git a/client/src/containers/Drawers/BillDrawer/utils.js b/client/src/containers/Drawers/BillDrawer/utils.js
index f59dafd10..fea0879cd 100644
--- a/client/src/containers/Drawers/BillDrawer/utils.js
+++ b/client/src/containers/Drawers/BillDrawer/utils.js
@@ -1,6 +1,11 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 
+import { FormatNumberCell } from '../../../components';
+
+/**
+ * Retrieve bill readonly details entries table columns.
+ */
 export const useBillReadonlyEntriesTableColumns = () =>
 React.useMemo(
   () => [
@@ -20,22 +25,25 @@ React.useMemo(
     {
       Header: intl.get('quantity'),
       accessor: 'quantity',
+      Cell: FormatNumberCell,
       width: 100,
-      className: 'quantity',
+      align: 'right',
       disableSortBy: true
     },
     {
       Header: intl.get('rate'),
       accessor: 'rate',
+      Cell: FormatNumberCell,
       width: 100,
-      className: 'rate',
+      align: 'right',
       disableSortBy: true
     },
     {
       Header: intl.get('amount'),
       accessor: 'amount',
+      Cell: FormatNumberCell,
       width: 100,
-      className: 'amount',
+      align: 'right',
       disableSortBy: true
     },
   ],
diff --git a/client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailFooter.js b/client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailFooter.js
index 4c50ecb40..d473b4bef 100644
--- a/client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailFooter.js
+++ b/client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailFooter.js
@@ -2,6 +2,8 @@ import React from 'react';
 import clsx from 'classnames';
 
 import { T, TotalLines, TotalLine, If } from 'components';
+import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
+import { FormatNumber } from '../../../components';
 
 import EstimateDetailsCls from 'style/components/Drawers/EstimateDetails.module.scss';
 
@@ -9,29 +11,21 @@ import EstimateDetailsCls from 'style/components/Drawers/EstimateDetails.module.
  * Estimate details panel footer content.
  */
 export default function EstimateDetailFooter() {
+  const { estimate } = useEstimateDetailDrawerContext();
+
   return (
     <div className={clsx(EstimateDetailsCls.detail_panel_footer)}>
       <TotalLines className={clsx(EstimateDetailsCls.total_lines)}>
         <TotalLine
           title={<T id={'estimate.details.subtotal'} />}
-          value={'1000'}
+          value={<FormatNumber value={estimate.amount} />}
           className={EstimateDetailsCls.total_line_subtotal}
         />
         <TotalLine
           title={<T id={'estimate.details.total'} />}
-          value={'1000'}
+          value={estimate.formatted_amount}
           className={EstimateDetailsCls.total_line_total}
         />
-        <TotalLine
-          title={<T id={'estimate.details.payment_made'} />}
-          value={'1000'}
-          className={EstimateDetailsCls.total_line_payment}
-        />
-        <TotalLine
-          title={<T id={'estimate.details.due_amount'} />}
-          value={'1000'}
-          className={EstimateDetailsCls.total_line_dueAmount}
-        />
       </TotalLines>
 
       <If condition={false}>
diff --git a/client/src/containers/Drawers/EstimateDetailDrawer/utils.js b/client/src/containers/Drawers/EstimateDetailDrawer/utils.js
index 49722bc1e..830c256d6 100644
--- a/client/src/containers/Drawers/EstimateDetailDrawer/utils.js
+++ b/client/src/containers/Drawers/EstimateDetailDrawer/utils.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
+import { FormatNumberCell } from '../../../components';
 
 /**
  * Retrieve table columns of estimate readonly entries details.
@@ -22,22 +23,25 @@ export const useEstimateReadonlyEntriesColumns = () =>
     {
       Header: intl.get('quantity'),
       accessor: 'quantity',
+      Cell: FormatNumberCell,
       width: 100,
-      className: 'quantity',
+      align: 'right',
       disableSortBy: true,
     },
     {
       Header: intl.get('rate'),
       accessor: 'rate',
+      Cell: FormatNumberCell,
       width: 100,
-      className: 'rate',
+      align: 'right',
       disableSortBy: true,
     },
     {
       Header: intl.get('amount'),
       accessor: 'amount',
+      Cell: FormatNumberCell,
       width: 100,
-      className: 'amount',
+      align: 'right',
       disableSortBy: true,
     },
   ], []);
diff --git a/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.js b/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.js
index 3747386a3..e6f00b272 100644
--- a/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.js
+++ b/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.js
@@ -2,19 +2,30 @@ import React from 'react';
 import { T } from 'components';
 import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
 
+import { FormatNumber } from '../../../components';
+
+/**
+ * Footer details of expense readonly details.
+ */
 export default function ExpenseDrawerFooter() {
-  const { expense: { total_amount } } = useExpenseDrawerContext();
+  const { expense } = useExpenseDrawerContext();
 
   return (
     <div className="expense-drawer__content-footer">
       <div class="total-lines">
         <div class="total-lines__line total-lines__line--subtotal">
-          <div class="title"><T id={'expense.details.subtotal'} /></div>
-          <div class="amount">{total_amount}</div>
+          <div class="title">
+            <T id={'expense.details.subtotal'} />
+          </div>
+          <div class="amount">
+            {<FormatNumber value={expense.total_amount} />}
+          </div>
         </div>
         <div class="total-lines__line total-lines__line--total">
-          <div class="title"><T id={'expense.details.total'} /></div>
-          <div class="amount">{total_amount}</div>
+          <div class="title">
+            <T id={'expense.details.total'} />
+          </div>
+          <div class="amount">{expense.formatted_amount}</div>
         </div>
       </div>
     </div>
diff --git a/client/src/containers/Drawers/ExpenseDrawer/utils.js b/client/src/containers/Drawers/ExpenseDrawer/utils.js
index 74ed165f0..b1c96c295 100644
--- a/client/src/containers/Drawers/ExpenseDrawer/utils.js
+++ b/client/src/containers/Drawers/ExpenseDrawer/utils.js
@@ -1,6 +1,11 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 
+import { FormatNumberCell } from '../../../components';
+
+/**
+ * Retrieve expense readonly details entries table columns.
+ */
 export const useExpenseReadEntriesColumns = () =>
   React.useMemo(
     () => [
@@ -9,18 +14,23 @@ export const useExpenseReadEntriesColumns = () =>
         accessor: 'expense_account.name',
         width: 110,
         disableSortBy: true,
+        className: 'account',
       },
       {
         Header: intl.get('description'),
         accessor: 'description',
         width: 110,
         disableSortBy: true,
+        className: 'description',
       },
       {
         Header: intl.get('amount'),
         accessor: 'amount',
+        Cell: FormatNumberCell,
         width: 100,
         disableSortBy: true,
+        className: 'amount',
+        align: 'right',
       },
     ],
     [],
diff --git a/client/src/containers/Drawers/InventoryAdjustmentDetailDrawer/utils.js b/client/src/containers/Drawers/InventoryAdjustmentDetailDrawer/utils.js
index e279c5cf6..e30135d69 100644
--- a/client/src/containers/Drawers/InventoryAdjustmentDetailDrawer/utils.js
+++ b/client/src/containers/Drawers/InventoryAdjustmentDetailDrawer/utils.js
@@ -15,21 +15,21 @@ export const useInventoryAdjustmentEntriesColumns = () =>
         Header: intl.get('quantity'),
         accessor: 'quantity',
         width: 100,
-        className: 'quantity',
+        align: 'right',
         disableSortBy: true,
       },
       {
         Header: intl.get('cost'),
         accessor: 'cost',
         width: 100,
-        className: 'cost',
+        align: 'right',
         disableSortBy: true,
       },
       {
         Header: intl.get('value'),
         accessor: 'value',
         width: 100,
-        className: 'value',
+        align: 'right',
         disableSortBy: true,
       },
     ],
diff --git a/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.js b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.js
index e0855177c..b62823464 100644
--- a/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.js
+++ b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import clsx from 'classnames';
 
-import { T, TotalLines, TotalLine } from 'components';
+import { T, TotalLines, FormatNumber, TotalLine } from 'components';
 import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss';
 import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
 
 /**
- *
+ * Invoice details footer.
  */
 export function InvoiceDetailFooter() {
   const { invoice } = useInvoiceDetailDrawerContext();
@@ -16,22 +16,22 @@ export function InvoiceDetailFooter() {
       <TotalLines>
         <TotalLine
           title={<T id={'invoice.details.subtotal'} />}
-          value={invoice.balance}
+          value={<FormatNumber value={invoice.balance} />}
           className={InvoiceDrawerCls.total_line_subtotal}
         />
         <TotalLine
           title={<T id={'invoice.details.total'} />}
-          value={invoice.balance}
+          value={invoice.formatted_amount}
           className={InvoiceDrawerCls.total_line_total}
         />
         <TotalLine
           title={<T id={'invoice.details.payment_amount'} />}
-          value={invoice.payment_amount}
+          value={invoice.formatted_payment_amount}
           className={InvoiceDrawerCls.total_line_payment}
         />
         <TotalLine
           title={<T id={'invoice.details.due_amount'} />}
-          value={'1000'}
+          value={invoice.formatted_due_amount}
           className={InvoiceDrawerCls.total_line_dueAmount}
         />
       </TotalLines>
diff --git a/client/src/containers/Drawers/InvoiceDetailDrawer/utils.js b/client/src/containers/Drawers/InvoiceDetailDrawer/utils.js
index b594ca38e..f2d3ae58e 100644
--- a/client/src/containers/Drawers/InvoiceDetailDrawer/utils.js
+++ b/client/src/containers/Drawers/InvoiceDetailDrawer/utils.js
@@ -1,6 +1,10 @@
 import React from 'react';
 import intl from 'react-intl-universal';
+import { FormatNumberCell } from '../../../components';
 
+/**
+ * Retrieve invoice readonly details table columns.
+ */
 export const useInvoiceReadonlyEntriesColumns = () =>
   React.useMemo(
     () => [
@@ -20,22 +24,25 @@ export const useInvoiceReadonlyEntriesColumns = () =>
       {
         Header: intl.get('quantity'),
         accessor: 'quantity',
+        Cell: FormatNumberCell,
         width: 100,
-        className: 'quantity',
+        align: 'right',
         disableSortBy: true,
       },
       {
         Header: intl.get('rate'),
         accessor: 'rate',
+        Cell: FormatNumberCell,
         width: 100,
-        className: 'rate',
+        align: 'right',
         disableSortBy: true,
       },
       {
         Header: intl.get('amount'),
         accessor: 'amount',
+        Cell: FormatNumberCell,
         width: 100,
-        className: 'amount',
+        align: 'right',
         disableSortBy: true,
       },
     ],
diff --git a/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerContent.js b/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerContent.js
index 7558f9951..015ddb65d 100644
--- a/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerContent.js
+++ b/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerContent.js
@@ -1,9 +1,8 @@
 import React from 'react';
 
+import 'style/components/Drawers/ManualJournalDrawer.scss';
+
 import { DrawerBody } from 'components';
-
-import 'style/components/Drawers/ViewDetails.scss';
-
 import { ManualJournalDrawerProvider } from './ManualJournalDrawerProvider';
 import ManualJournalDrawerDetails from './ManualJournalDrawerDetails';
 
diff --git a/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerFooter.js b/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerFooter.js
index fc0d02efa..48d21cb91 100644
--- a/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerFooter.js
+++ b/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerFooter.js
@@ -1,9 +1,14 @@
 import React from 'react';
 import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
 
-export default function ManualJournalDrawerFooter({}) {
+import { FormatNumber } from '../../../components';
+
+/**
+ * Manual journal readonly details footer.
+ */
+export default function ManualJournalDrawerFooter() {
   const {
-    manualJournal: { amount },
+    manualJournal: { amount, formatted_amount },
   } = useManualJournalDrawerContext();
 
   return (
@@ -11,17 +16,19 @@ export default function ManualJournalDrawerFooter({}) {
       <div class="total-lines">
         <div class="total-lines__line total-lines__line--subtotal">
           <div class="title">Subtotal</div>
-          <div class="debit">{amount}</div>
-          <div class="credit">{amount} </div>
+          <div class="debit">
+            <FormatNumber value={amount} />
+          </div>
+          <div class="credit">
+            <FormatNumber value={amount} />
+          </div>
         </div>
         <div class="total-lines__line total-lines__line--total">
           <div class="title">TOTAL</div>
-          <div class="debit">{amount}</div>
-          <div class="credit">{amount}</div>
+          <div class="debit">{formatted_amount}</div>
+          <div class="credit">{formatted_amount}</div>
         </div>
       </div>
     </div>
   );
 }
-
-
diff --git a/client/src/containers/Drawers/ManualJournalDrawer/utils.js b/client/src/containers/Drawers/ManualJournalDrawer/utils.js
index c27ea0a28..1d2a1f5c1 100644
--- a/client/src/containers/Drawers/ManualJournalDrawer/utils.js
+++ b/client/src/containers/Drawers/ManualJournalDrawer/utils.js
@@ -2,7 +2,7 @@ import intl from 'react-intl-universal';
 import React from 'react';
 import { Classes, Tooltip, Position } from '@blueprintjs/core';
 
-import { If, Icon } from 'components';
+import { FormatNumberCell, If, Icon } from '../../../components';
 
 /**
  * Note column accessor.
@@ -33,32 +33,43 @@ export const useManualJournalEntriesColumns = () =>
         accessor: 'account.name',
         width: 130,
         disableSortBy: true,
+        className: 'account',
       },
       {
         Header: intl.get('contact'),
         accessor: 'contact.display_name',
         width: 130,
         disableSortBy: true,
+        className: 'contact',
       },
       {
         Header: intl.get('note'),
         accessor: NoteAccessor,
         width: 80,
         disableSortBy: true,
+        className: 'note',
       },
       {
         Header: intl.get('credit'),
         accessor: 'credit',
+        Cell: FormatNumberCell,
         width: 100,
         disableResizable: true,
         disableSortBy: true,
+        formatNumber: { noZero: true },
+        className: 'credit',
+        align: 'right',
       },
       {
         Header: intl.get('debit'),
         accessor: 'debit',
+        Cell: FormatNumberCell,
         width: 100,
         disableResizable: true,
         disableSortBy: true,
+        formatNumber: { noZero: true },
+        className: 'debit',
+        align: 'right',
       },
     ],
     [],
diff --git a/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailFooter.js b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailFooter.js
index 6786d4ad0..eedf8e9c4 100644
--- a/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailFooter.js
+++ b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailFooter.js
@@ -3,23 +3,25 @@ import clsx from 'classnames';
 
 import { T, TotalLines, TotalLine } from 'components';
 import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
+import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
 
 /**
  * Payment made - Details panel - Footer.
  */
 export default function PaymentMadeDetailFooter() {
+  const { paymentMade } = usePaymentMadeDetailContext();
 
   return (
     <div className={clsx(PaymentDrawerCls.detail_panel_footer)}>
       <TotalLines>
         <TotalLine
           title={<T id={'payment_made.details.subtotal'} />}
-          value={1000}
+          value={paymentMade.amount}
           className={clsx(PaymentDrawerCls.total_line_subtotal)}
         />
         <TotalLine
           title={<T id={'payment_made.details.total'} />}
-          value={1000}
+          value={paymentMade.formatted_amount}
           className={clsx(PaymentDrawerCls.total_line_total)}
         />
       </TotalLines>
diff --git a/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js
index bb22f3756..b51368ba5 100644
--- a/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js
+++ b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js
@@ -14,7 +14,7 @@ const PaymentMadeDetailContext = React.createContext();
  */
 function PaymentMadeDetailProvider({ paymentMadeId, ...props }) {
   // Handle fetch specific payment made details.
-  const { data: paymentMade, isFetching: isPaymentMadeLoading } =
+  const { data: paymentMade, isLoading: isPaymentMadeLoading } =
     usePaymentMade(paymentMadeId, {
       enabled: !!paymentMadeId,
     });
diff --git a/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTable.js b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTable.js
index 150e17925..004ff81c4 100644
--- a/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTable.js
+++ b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTable.js
@@ -8,7 +8,12 @@ import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
 
 import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
 
+/**
+ * Payment made read-only details table.
+ */
 export default function PaymentMadeDetailTable() {
+
+  // Retrieve payment made entries columns.
   const columns = usePaymentMadeEntriesColumns();
 
   // Payment made details context.
diff --git a/client/src/containers/Drawers/PaymentMadeDetailDrawer/utils.js b/client/src/containers/Drawers/PaymentMadeDetailDrawer/utils.js
index f5af95397..f0bdab8a2 100644
--- a/client/src/containers/Drawers/PaymentMadeDetailDrawer/utils.js
+++ b/client/src/containers/Drawers/PaymentMadeDetailDrawer/utils.js
@@ -2,6 +2,8 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import moment from 'moment';
 
+import { FormatNumberCell } from '../../../components';
+
 export const usePaymentMadeEntriesColumns = () =>
   React.useMemo(() => [
     {
@@ -21,20 +23,23 @@ export const usePaymentMadeEntriesColumns = () =>
     {
       Header: intl.get('bill_amount'),
       accessor: 'amount',
-      className: 'amount',
+      Cell: FormatNumberCell,
+      align: 'right',
     },
     {
       Header: intl.get('due_amount'),
       accessor: 'due_amount',
+      Cell: FormatNumberCell,
       width: 100,
       disableSortBy: true,
-      className: 'due_amount',
+      align: 'right',
     },
     {
       Header: intl.get('payment_amount'),
       accessor: 'payment_amount',
+      Cell: FormatNumberCell,
       width: 100,
       disableSortBy: true,
-      className: 'payment_amount',
+      align: 'right',
     },
   ], []);
diff --git a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailFooter.js b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailFooter.js
index fa5febb58..88bf62cad 100644
--- a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailFooter.js
+++ b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailFooter.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'classnames';
 
-import { T, TotalLine, TotalLines } from 'components';
+import { FormatNumber, T, TotalLine, TotalLines } from 'components';
 import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
 
 import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
@@ -17,12 +17,12 @@ export default function PaymentReceiveDetailFooter() {
       <TotalLines>
         <TotalLine
           title={<T id={'payment_receive.details.subtotal'} />}
-          value={paymentReceive.amount}
+          value={<FormatNumber value={paymentReceive.amount} />}
           className={PaymentDrawerCls.total_line_subtotal}
         />
         <TotalLine
           title={<T id={'payment_receive.details.total'} />}
-          value={paymentReceive.amount}
+          value={paymentReceive.formatted_amount}
           className={PaymentDrawerCls.total_line_total}
         />
       </TotalLines>
diff --git a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/utils.js b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/utils.js
index ecea1634a..91591aa14 100644
--- a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/utils.js
+++ b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/utils.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import moment from 'moment';
+import { FormatNumberCell } from '../../../components';
 
 /**
  * Retrieve payment entries table columns.
@@ -25,19 +26,22 @@ export const usePaymentReceiveEntriesColumns = () =>
       {
         Header: intl.get('invoice_amount'),
         accessor: 'invoice.balance',
-        className: 'invoice_amount',
+        Cell: FormatNumberCell,
+        align: 'right',
       },
       {
         Header: intl.get('amount_due'),
         accessor: 'invoice.amount_due',
-        className: 'amount_due',
+        Cell: FormatNumberCell,
+        align: 'right',
         width: 100,
         disableSortBy: true,
       },
       {
         Header: intl.get('payment_amount'),
         accessor: 'invoice.payment_amount',
-        className: 'payment_amount',
+        Cell: FormatNumberCell,
+        align: 'right',
         width: 100,
         disableSortBy: true,
       },
diff --git a/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailFooter.js b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailFooter.js
index 522b94000..0a1f95d79 100644
--- a/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailFooter.js
+++ b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailFooter.js
@@ -6,6 +6,11 @@ import { T, TotalLines, TotalLine } from 'components';
 import ReceiptDrawerCls from 'style/components/Drawers/ReceiptDrawer.module.scss';
 import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';
 
+import { FormatNumber } from '../../../components';
+
+/**
+ * Receipts read-only details footer.
+ */
 export function ReceiptDetailFooter() {
   const { receipt } = useReceiptDetailDrawerContext();
 
@@ -14,17 +19,17 @@ export function ReceiptDetailFooter() {
       <TotalLines>
         <TotalLine
           title={<T id={'receipt.details.subtotal'} />}
-          value={receipt.amount}
+          value={<FormatNumber value={receipt.amount} />}
           className={ReceiptDrawerCls.total_line_subtotal}
         />
         <TotalLine
           title={<T id={'receipt.details.total'} />}
-          value={receipt.amount}
+          value={receipt.formatted_amount}
           className={ReceiptDrawerCls.total_line_total}
         />
         <TotalLine
           title={<T id={'receipt.details.payment_amount'} />}
-          value={receipt.amount}
+          value={receipt.formatted_amount}
           className={ReceiptDrawerCls.total_line_payment}
         />
         <TotalLine
diff --git a/client/src/containers/Drawers/ReceiptDetailDrawer/utils.js b/client/src/containers/Drawers/ReceiptDetailDrawer/utils.js
index 5a37bc1bb..5cd48259c 100644
--- a/client/src/containers/Drawers/ReceiptDetailDrawer/utils.js
+++ b/client/src/containers/Drawers/ReceiptDetailDrawer/utils.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
+import { FormatNumberCell } from '../../../components';
 
 export const useReceiptReadonlyEntriesTableColumns = () => React.useMemo(() => [
     {
@@ -18,22 +19,25 @@ export const useReceiptReadonlyEntriesTableColumns = () => React.useMemo(() => [
     {
       Header: intl.get('quantity'),
       accessor: 'quantity',
+      Cell: FormatNumberCell,
       width: 100,
-      className: 'quantity',
+      align: 'right',
       disableSortBy: true
     },
     {
       Header: intl.get('rate'),
       accessor: 'rate',
+      Cell: FormatNumberCell,
       width: 100,
-      className: 'rate',
+      align: 'right',
       disableSortBy: true
     },
     {
       Header: intl.get('amount'),
       accessor: 'amount',
+      Cell: FormatNumberCell,
       width: 100,
-      className: 'amount',
+      align: 'right',
       disableSortBy: true
     },
   ], []);
diff --git a/client/src/containers/Expenses/ExpensesLanding/components.js b/client/src/containers/Expenses/ExpensesLanding/components.js
index b1dcb4215..90380f78e 100644
--- a/client/src/containers/Expenses/ExpensesLanding/components.js
+++ b/client/src/containers/Expenses/ExpensesLanding/components.js
@@ -12,9 +12,9 @@ import {
   MenuDivider,
 } from '@blueprintjs/core';
 import moment from 'moment';
-import { FormattedMessage as T } from 'components';
-import { Money, Icon, If } from 'components';
 import intl from 'react-intl-universal';
+
+import { FormattedMessage as T, Money, Icon, If } from 'components';
 import { safeCallback } from 'utils';
 
 /**
@@ -138,6 +138,7 @@ export function useExpensesTableColumns() {
         Header: intl.get('full_amount'),
         accessor: TotalAmountAccessor,
         className: 'amount',
+        align: 'right',
         width: 150,
         clickable: true,
       },
diff --git a/client/src/containers/FinancialStatements/APAgingSummary/components.js b/client/src/containers/FinancialStatements/APAgingSummary/components.js
index fca3ab6a6..8b2f6c299 100644
--- a/client/src/containers/FinancialStatements/APAgingSummary/components.js
+++ b/client/src/containers/FinancialStatements/APAgingSummary/components.js
@@ -37,23 +37,17 @@ export const useAPAgingSummaryColumns = () => {
         Header: <T id={'current'} />,
         accessor: 'current',
         className: 'current',
-        width: getColumnWidth(tableRows, `current`, {
-          minWidth: 120,
-        }),
+        width: getColumnWidth(tableRows, `current`, { minWidth: 120 }),
       },
       ...agingColumns.map((agingColumn, index) => ({
         Header: agingColumn,
         accessor: `aging-${index}`,
-        width: getColumnWidth(tableRows, `aging-${index}`, {
-          minWidth: 120,
-        }),
+        width: getColumnWidth(tableRows, `aging-${index}`, { minWidth: 120 }),
       })),
       {
         Header: <T id={'total'} />,
         accessor: 'total',
-        width: getColumnWidth(tableRows, 'total', {
-          minWidth: 120,
-        }),
+        width: getColumnWidth(tableRows, 'total', { minWidth: 120 }),
       },
     ],
     [tableRows, agingColumns],
diff --git a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js
index fd8ee3f5e..539b735c7 100644
--- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js
+++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js
@@ -15,8 +15,6 @@ import { useGeneralLedgerTableColumns } from './components';
  * General ledger table.
  */
 export default function GeneralLedgerTable({ companyName }) {
-  
-
   // General ledger context.
   const {
     generalLedger: { tableRows, query },
diff --git a/client/src/containers/FinancialStatements/GeneralLedger/components.js b/client/src/containers/FinancialStatements/GeneralLedger/components.js
index e8a307da9..9ccb69a7f 100644
--- a/client/src/containers/FinancialStatements/GeneralLedger/components.js
+++ b/client/src/containers/FinancialStatements/GeneralLedger/components.js
@@ -12,8 +12,6 @@ import FinancialLoadingBar from '../FinancialLoadingBar';
  * Retrieve the general ledger table columns.
  */
 export function useGeneralLedgerTableColumns() {
-  
-
   // General ledger context.
   const {
     generalLedger: { tableRows },
@@ -37,6 +35,7 @@ export function useGeneralLedgerTableColumns() {
           return row.date;
         },
         className: 'date',
+        textOverview: true,
         width: 120,
       },
       {
@@ -44,7 +43,6 @@ export function useGeneralLedgerTableColumns() {
         accessor: 'name',
         className: 'name',
         textOverview: true,
-        // width: 200,
       },
       {
         Header: intl.get('transaction_type'),
@@ -58,12 +56,13 @@ export function useGeneralLedgerTableColumns() {
         accessor: 'reference_id',
         className: 'transaction_number',
         width: 100,
+        textOverview: true,
       },
       {
         Header: intl.get('description'),
         accessor: 'note',
         className: 'description',
-        // width: 145,
+        textOverview: true,
       },
       {
         Header: intl.get('credit'),
@@ -73,6 +72,7 @@ export function useGeneralLedgerTableColumns() {
           minWidth: 100,
           magicSpacing: 10,
         }),
+        textOverview: true,
       },
       {
         Header: intl.get('debit'),
@@ -82,6 +82,7 @@ export function useGeneralLedgerTableColumns() {
           minWidth: 100,
           magicSpacing: 10,
         }),
+        textOverview: true,
       },
       {
         Header: intl.get('amount'),
@@ -91,6 +92,7 @@ export function useGeneralLedgerTableColumns() {
           minWidth: 100,
           magicSpacing: 10,
         }),
+        textOverview: true,
       },
       {
         Header: intl.get('running_balance'),
@@ -100,6 +102,7 @@ export function useGeneralLedgerTableColumns() {
           minWidth: 100,
           magicSpacing: 10,
         }),
+        textOverview: true,
       },
     ],
     [tableRows],
diff --git a/client/src/containers/Items/components.js b/client/src/containers/Items/components.js
index a228fb27d..d573f4aaf 100644
--- a/client/src/containers/Items/components.js
+++ b/client/src/containers/Items/components.js
@@ -10,9 +10,9 @@ import {
   Popover,
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import { FormattedMessage as T } from 'components';
 import { isNumber } from 'lodash';
-import { Icon, Money, If } from 'components';
+
+import { FormattedMessage as T, Icon, Money, If } from 'components';
 import { isBlank, safeCallback } from 'utils';
 
 /**
@@ -187,7 +187,7 @@ export const useItemsTableColumns = () => {
         id: 'sell_price',
         Header: intl.get('sell_price'),
         accessor: 'sell_price_formatted',
-        className: 'sell-price',
+        align: 'right',
         width: 150,
         clickable: true,
       },
@@ -195,7 +195,7 @@ export const useItemsTableColumns = () => {
         id: 'cost_price',
         Header: intl.get('cost_price'),
         accessor: 'cost_price_formatted',
-        className: 'cost-price',
+        align: 'right',
         width: 150,
         clickable: true,
       },
@@ -204,6 +204,7 @@ export const useItemsTableColumns = () => {
         Header: intl.get('quantity_on_hand'),
         accessor: 'quantity_on_hand',
         Cell: QuantityOnHandCell,
+        align: 'right',
         width: 140,
         clickable: true,
       },
diff --git a/client/src/containers/Purchases/Bills/BillsLanding/components.js b/client/src/containers/Purchases/Bills/BillsLanding/components.js
index 32a9972ec..327a1cc56 100644
--- a/client/src/containers/Purchases/Bills/BillsLanding/components.js
+++ b/client/src/containers/Purchases/Bills/BillsLanding/components.js
@@ -11,11 +11,11 @@ import {
   ProgressBar,
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import { FormattedMessage as T } from 'components';
-import { Icon, If, Choose, Money } from 'components';
-import { formattedAmount, safeCallback, isBlank, calculateStatus } from 'utils';
 import moment from 'moment';
 
+import { FormattedMessage as T, Icon, If, Choose, Money } from 'components';
+import { formattedAmount, safeCallback, isBlank, calculateStatus } from 'utils';
+
 /**
  * Actions menu.
  */
@@ -183,6 +183,7 @@ export function useBillsTableColumns() {
         accessor: AmountAccessor,
         width: 120,
         className: 'amount',
+        align: 'right',
         clickable: true,
       },
       {
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeList.js b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeList.js
index 48ac5e0fd..ab238045d 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeList.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeList.js
@@ -2,7 +2,7 @@ import React from 'react';
 
 import 'style/pages/PaymentMade/List.scss';
 
-import { DashboardContentTable, DashboardPageContent } from 'components';
+import { DashboardPageContent } from 'components';
 import PaymentMadeActionsBar from './PaymentMadeActionsBar';
 import PaymentMadesAlerts from '../PaymentMadesAlerts';
 import PaymentMadesTable from './PaymentMadesTable';
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js
index bef7be79e..29e521b80 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js
@@ -10,6 +10,7 @@ import {
   Position,
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
+
 import { Icon, Money } from 'components';
 import { safeCallback } from 'utils';
 
@@ -111,6 +112,7 @@ export function usePaymentMadesTableColumns() {
         accessor: AmountAccessor,
         width: 140,
         className: 'amount',
+        align: 'right',
         clickable: true,
       },
       {
diff --git a/client/src/containers/Sales/Estimates/EstimatesLanding/components.js b/client/src/containers/Sales/Estimates/EstimatesLanding/components.js
index 130dc1c64..1a63a86fa 100644
--- a/client/src/containers/Sales/Estimates/EstimatesLanding/components.js
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/components.js
@@ -9,12 +9,12 @@ import {
   MenuDivider,
   Position,
 } from '@blueprintjs/core';
-import { Money, Choose, Icon, If } from 'components';
-import { FormattedMessage as T } from 'components';
 import intl from 'react-intl-universal';
-import { safeCallback } from 'utils';
 import moment from 'moment';
 
+import { FormattedMessage as T, Money, Choose, Icon, If } from 'components';
+import { safeCallback } from 'utils';
+
 /**
  * Status accessor.
  */
@@ -196,7 +196,7 @@ export function useEstiamtesTableColumns() {
         Header: intl.get('amount'),
         accessor: AmountAccessor,
         width: 140,
-        className: 'amount',
+        align: 'right',
         clickable: true,
       },
       {
diff --git a/client/src/containers/Sales/Invoices/InvoicesLanding/components.js b/client/src/containers/Sales/Invoices/InvoicesLanding/components.js
index fff48382d..4ee13d098 100644
--- a/client/src/containers/Sales/Invoices/InvoicesLanding/components.js
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/components.js
@@ -11,11 +11,9 @@ import {
   Button,
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-
-import { FormattedMessage as T } from 'components';
 import moment from 'moment';
-import { Choose, If, Icon } from 'components';
-import { Money, AppToaster } from 'components';
+
+import { FormattedMessage as T, AppToaster, Choose, If, Icon } from 'components';
 import { formattedAmount, safeCallback, calculateStatus } from 'utils';
 
 export const statusAccessor = (row) => {
@@ -146,17 +144,6 @@ export function ActionsMenu({
   );
 }
 
-function ActionsCell(props) {
-  return (
-    <Popover
-      content={<ActionsMenu {...props} />}
-      position={Position.RIGHT_BOTTOM}
-    >
-      <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
-    </Popover>
-  );
-}
-
 /**
  * Retrieve invoices table columns.
  */
@@ -196,7 +183,7 @@ export function useInvoicesTableColumns() {
         Header: intl.get('balance'),
         accessor: 'formatted_amount',
         width: 120,
-        className: 'balance',
+        align: 'right',
         clickable: true,
         textOverview: true,
       },
diff --git a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js
index 24bac9ecd..4611db50d 100644
--- a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js
@@ -10,6 +10,7 @@ import {
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 import moment from 'moment';
+
 import { Money, Icon } from 'components';
 import { safeCallback } from 'utils';
 
@@ -105,7 +106,7 @@ export function usePaymentReceivesColumns() {
         Header: intl.get('amount'),
         accessor: AmountAccessor,
         width: 120,
-        className: 'amount',
+        align: 'right',
         clickable: true,
         textOverview: true,
       },
diff --git a/client/src/containers/Sales/Receipts/ReceiptsLanding/components.js b/client/src/containers/Sales/Receipts/ReceiptsLanding/components.js
index 14a1623ef..4eee826f4 100644
--- a/client/src/containers/Sales/Receipts/ReceiptsLanding/components.js
+++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/components.js
@@ -11,9 +11,10 @@ import {
   Tag,
   Button,
 } from '@blueprintjs/core';
+import moment from 'moment';
+
 import { safeCallback } from 'utils';
 import { Choose, Money, Icon, If } from 'components';
-import moment from 'moment';
 
 export function ActionsMenu({
   payload: { onEdit, onDelete, onClose, onDrawer, onViewDetails, onPrint },
@@ -136,7 +137,7 @@ export function useReceiptsTableColumns() {
         Header: intl.get('amount'),
         accessor: (r) => <Money amount={r.amount} currency={r.currency_code} />,
         width: 140,
-        className: 'amount',
+        align: 'right',
         clickable: true,
         textOverview: true,
       },
diff --git a/client/src/containers/Vendors/VendorsLanding/components.js b/client/src/containers/Vendors/VendorsLanding/components.js
index 355effbf3..35d653930 100644
--- a/client/src/containers/Vendors/VendorsLanding/components.js
+++ b/client/src/containers/Vendors/VendorsLanding/components.js
@@ -9,6 +9,7 @@ import {
   Intent,
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
+
 import { Icon, Money, If } from 'components';
 import { safeCallback, firstLettersArgs } from 'utils';
 
@@ -147,7 +148,7 @@ export function useVendorsTableColumns() {
         id: 'balance',
         Header: intl.get('receivable_balance'),
         accessor: BalanceAccessor,
-        className: 'receivable_balance',
+        align: 'right',
         width: 100,
         clickable: true,
       },
diff --git a/client/src/style/App.scss b/client/src/style/App.scss
index 0a9c5fb04..a5af32cce 100644
--- a/client/src/style/App.scss
+++ b/client/src/style/App.scss
@@ -256,14 +256,12 @@ html[lang^="ar"] {
       }
     }
   }
-
 }
 
 .bp3-drawer{
   border-left: 1px solid #00115e;
 }
 
-
 .drawer-portal{
 
   .bp3-overlay-backdrop{
@@ -279,3 +277,8 @@ html[lang^="ar"] {
   font-weight: 600;
   margin-bottom: 0;
 }
+
+
+.align-right{
+  text-align: right;
+}
\ No newline at end of file
diff --git a/client/src/style/components/Drawers/ExpenseDrawer.scss b/client/src/style/components/Drawers/ExpenseDrawer.scss
index 1a2de8a4b..3a00b10ad 100644
--- a/client/src/style/components/Drawers/ExpenseDrawer.scss
+++ b/client/src/style/components/Drawers/ExpenseDrawer.scss
@@ -1,103 +1,107 @@
 .expense-drawer {
-    .card {
-        margin: 15px;
-        padding: 25px 15px 35px;
+  .card {
+    margin: 15px;
+    padding: 25px 15px 35px;
 
-        .amount {
-            
-        }
+    .amount {}
+  }
+
+  &__content-header {
+    margin-bottom: 30px;
+
+    .detail-item {
+      flex-grow: 1;
+
+      &--amount {
+        width: 20%;
+      }
+
+      .big-number {
+        font-size: 28px;
+        color: #c06361;
+        margin: 6px 0;
+        font-weight: 600;
+      }
     }
 
-    &__content-header {
-        margin-bottom: 30px;
-
-        .detail-item {
-            flex-grow: 1;
-
-            &--amount {
-                width: 20%;
-            }
-            .big-number{
-                font-size: 28px;
-                color: #c06361;
-                margin: 6px 0;
-                font-weight: 600;
-            }
-        }
-
-        .details-menu + .details-menu{
-            margin-top: 14px;
-        }
-
-        .details-menu--horizantal{
-
-            .detail-item{
-
-                &__label{
-                    min-width: 120px;
-                }
-            }
-        }
+    .details-menu+.details-menu {
+      margin-top: 14px;
     }
 
-    &__content-footer{
-        display: flex;
+    .details-menu--horizantal {
 
-        .total-lines{
-            margin-left: auto;
-        }
-    }
-
-
-    .table {
-        .thead .th {
-            background: transparent;
-            color: #222222;
-            border-bottom: 1px solid #000000;
-            border-top: 1px solid #000000;
-            padding: 0.5rem;
-        }
-
-        .tbody .tr .td {
-            background: transparent;
-            padding: 0.5rem 0.5rem;
-            border-bottom: 0;
-        }
-
-        .tbody .tr:last-child .td {
-            border-bottom: 1px solid #d2dce2;
+      .detail-item {
+
+        &__label {
+          min-width: 120px;
         }
+      }
     }
+  }
 
+  &__content-footer {
+    display: flex;
 
     .total-lines {
+      margin-left: auto;
+    }
+  }
 
-        &__line {
-            display: flex;
-
-            >div {
-                padding: 7px 8px;
-            }
-
-            .title {
-                width: 220px;
-                font-weight: 600;
-            }
-
-            .amount {
-                font-weight: 600;
-                width: 260px;
-            }
-
-            &--subtotal {
-                border-bottom: 1px solid #000;
-            }
-
-            &--total {
-                border-bottom: 3px double #000;
-            }
-        }
 
+  .table {
+    .thead .th {
+      background: transparent;
+      color: #222222;
+      border-bottom: 1px solid #000000;
+      border-top: 1px solid #000000;
+      padding: 0.5rem;
     }
 
+    .tbody .tr .td {
+      background: transparent;
+      padding: 0.5rem 0.5rem;
+      border-bottom: 0;
+    }
+
+    .tbody .tr:last-child .td {
+      border-bottom: 1px solid #d2dce2;
+    }
+  }
+
+
+  .total-lines {
+
+    &__line {
+      display: flex;
+
+      >div {
+        padding: 7px 8px;
+      }
+
+      .title {
+        width: 220px;
+        font-weight: 600;
+      }
+
+      .amount {
+        font-weight: 600;
+        width: 260px;
+      }
+
+      &--subtotal,
+      &--total {
+        text-align: right;
+      }
+
+      &--subtotal {
+        border-bottom: 1px solid #000;
+      }
+
+      &--total {
+        border-bottom: 3px double #000;
+      }
+    }
+
+  }
+
 }
\ No newline at end of file
diff --git a/client/src/style/components/Drawers/ManualJournalDrawer.scss b/client/src/style/components/Drawers/ManualJournalDrawer.scss
new file mode 100644
index 000000000..9b65dca40
--- /dev/null
+++ b/client/src/style/components/Drawers/ManualJournalDrawer.scss
@@ -0,0 +1,113 @@
+.journal-drawer {
+
+  .card {
+    margin: 15px;
+    padding: 25px 15px 35px;
+  }
+
+  .card {
+
+    .amount {
+      font-size: 28px;
+      color: #c06361;
+      margin: 6px 0;
+      font-weight: 600;
+    }
+  }
+
+  .table {
+    .thead .th {
+      background: transparent;
+      color: #222222;
+      border-bottom: 1px solid #000000;
+      border-top: 1px solid #000000;
+      padding: 0.5rem;
+    }
+
+    .tbody .tr .td {
+      background: transparent;
+      padding: 0.5rem 0.5rem;
+      border-bottom: 0;
+    }
+
+    .tbody .tr:last-child .td {
+      border-bottom: 1px solid #d2dce2;
+    }
+
+    .thead,
+    .tbody{
+      .tr .td,
+      .tr .th{
+        &.credit,
+        &.debit{
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  &__content {
+
+    &-header {
+      margin-bottom: 35px;
+
+      .detail-item {
+        flex-grow: 1;
+
+        &--amount {
+          width: 20%;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+
+      .total-lines {
+        margin-left: auto;
+      }
+    }
+
+    &-description {
+      margin-top: 20px;
+
+      .title {
+        color: #727983;
+      }
+    }
+  }
+
+
+  .total-lines {
+
+    &__line {
+      display: flex;
+
+      >div {
+        padding: 7px 8px;
+      }
+
+      .title {
+        width: 220px;
+        font-weight: 600;
+      }
+
+      .credit,
+      .debit {
+        font-weight: 600;
+        width: 155px;
+      }
+
+      &--subtotal {
+        border-bottom: 1px solid #000;
+      }
+      &--total {
+        border-bottom: 3px double #000;
+      }
+      &--subtotal,
+      &--total{
+        text-align: right;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/client/src/style/components/Drawers/ViewDetails.scss b/client/src/style/components/Drawers/ViewDetails.scss
deleted file mode 100644
index d3ac4d6b0..000000000
--- a/client/src/style/components/Drawers/ViewDetails.scss
+++ /dev/null
@@ -1,179 +0,0 @@
-
-
-
-.journal-drawer{
-
-  .card{
-    margin: 15px;
-    padding: 25px 15px 35px;
-  }
-  .card{
-
-    .amount{
-      font-size: 28px;
-      color: #c06361;
-      margin: 6px 0;
-      font-weight: 600;
-    }
-  }
-
-  .table{
-    .thead .th {
-      background: transparent;
-      color: #222222;
-      border-bottom: 1px solid #000000;
-      border-top: 1px solid #000000;
-      padding: 0.5rem;
-    }
-    .tbody .tr .td {
-      background: transparent;
-      padding: 0.5rem 0.5rem;
-      border-bottom: 0;
-    }
-
-    .tbody .tr:last-child .td{
-      border-bottom: 1px solid #d2dce2;
-    }
-  }
-
-  &__content{
-
-    &-header{
-      margin-bottom: 35px;
-
-      .detail-item{
-        flex-grow: 1;
-
-        &--amount{
-          width: 20%;
-        }
-      }
-    }
-
-    &-footer{
-      display: flex;
-
-      .total-lines{
-        margin-left: auto;
-      }
-    }
-
-    &-description{
-      margin-top: 20px;
-      .title{
-        color: #727983;
-      }
-    }
-  }
-
-
-  .total-lines{
-    
-    &__line{
-      display: flex;
-      
-      > div{
-        padding: 7px 8px;
-      }
-
-      .title{
-        width: 220px;
-        font-weight: 600;
-      }
-
-      .credit,
-      .debit{
-        font-weight: 600;
-        width: 155px;
-      }
-
-      &--subtotal{
-        border-bottom: 1px solid #000;
-      }
-
-      &--total{
-        border-bottom: 3px double #000;
-      }
-    }
-    
-  }
-  
-}
-
-// .expense-drawer {
-
-//   &__content {
-//     display: flex;
-//     flex-direction: column;
-    
-//     border: 1px solid #d2dce2;
-//     box-shadow: 1px 1px #fbf8f8;
-//     background-color: #ffffff;
-//     min-height: 508px;
-
-//     &--header {
-//       display: flex;
-//       flex-wrap: wrap;
-//       justify-content: flex-start;
-//       margin: 15px 0 20px;
-//       font-size: 14px;
-//       color: #666666;
-
-//       > div {
-//         flex-grow: 1;
-//         span {
-//           display: block;
-//           color: #666666;
-//           font-weight: 500;
-//           margin: 10px 0;
-//         }
-//       }
-//       .info {
-//         flex: 0 1 25%;
-//         padding-left: 2%;
-//         margin: 10px 0;
-//       }
-//       .balance {
-//         font-size: 26px;
-//         font-weight: 500;
-//         color: #0f1118;
-//       }
-//     }
-
-//     &--table {
-//       flex-grow: 1;
-//       flex-shrink: 0;
-
- 
-//       .desc {
-//         margin: 20px 0 60px;
-
-//         > b {
-//           color: #2f2f2f;
-//         }
-//       }
-//     }
-
-//     &--footer {
-//       display: flex;
-//       flex-direction: column;
-//       align-items: flex-end;
-//       color: #666666;
-//       .wrapper > div {
-//         display: flex;
-//         border-top: 1px solid #000000;
-//         border-bottom: 1px solid #000000;
-//         padding: 0.2rem;
-//         span,
-//         p {
-//           margin: 10px 50px 5px 0px;
-//         }
-//         span {
-//           color: #333333;
-//           flex-grow: 1;
-//           font-weight: 500;
-//         }
-//       }
-//     }
-//   }
-// }
diff --git a/client/src/utils.js b/client/src/utils.js
index dd144d1a7..d4cc5b45a 100644
--- a/client/src/utils.js
+++ b/client/src/utils.js
@@ -13,16 +13,16 @@ import { isEqual } from 'lodash';
 
 import jsCookie from 'js-cookie';
 
-export const getCookie = (name, defaultValue) => _.defaultTo(jsCookie.get(name), defaultValue);
+export const getCookie = (name, defaultValue) =>
+  _.defaultTo(jsCookie.get(name), defaultValue);
 
 export const setCookie = (name, value, expiry = 365, secure = false) => {
   jsCookie.set(name, value, { expires: expiry, path: '/', secure });
 };
 
 export const removeCookie = (name) => {
-  return jsCookie.remove(name, {  path: '/' });
-}
-
+  return jsCookie.remove(name, { path: '/' });
+};
 
 export function removeEmptyFromObject(obj) {
   obj = Object.assign({}, obj);
@@ -137,7 +137,7 @@ export const parseDateRangeQuery = (keyword) => {
     },
     this_quarter: {
       range: 'quarter',
-    }
+    },
   };
 
   if (typeof queries[keyword] === 'undefined') {
@@ -168,16 +168,21 @@ export const defaultExpanderReducer = (tableRows, level) => {
   return expended;
 };
 
-export function formattedAmount(cents, currency, props) {
-  const { symbol, decimal_digits: precision } = Currency[currency];
+export function formattedAmount(cents, currencyCode = '', props) {
+  const currency = Currency[currencyCode];
 
+  const parsedCurrency = {
+    symbol: '',
+    decimal_digits: 0,
+    ...currency
+  };
   const parsedProps = {
     noZero: false,
     ...props,
   };
   const formatOptions = {
-    symbol,
-    precision: 0,
+    symbol: parsedCurrency.symbol,
+    precision: parsedCurrency.decimal_digits,
     format: {
       pos: '%s%v',
       neg: '%s-%v',
@@ -188,6 +193,24 @@ export function formattedAmount(cents, currency, props) {
   return accounting.formatMoney(cents, formatOptions);
 }
 
+export function formattedNumber(amount, props) {
+  const parsedProps = {
+    noZero: false,
+    ...props,
+  };
+  const formatOptions = {
+    symbol: '',
+    precision: 0,
+    format: {
+      pos: '%s%v',
+      neg: '%s-%v',
+      zero: parsedProps.noZero ? '' : '%s%v',
+    },
+    ...props,
+  };
+  return accounting.formatMoney(amount, formatOptions);
+}
+
 export function formattedExchangeRate(amount, currency) {
   const options = {
     style: 'currency',
@@ -243,7 +266,6 @@ export const firstLettersArgs = (...args) => {
   return letters.join('').toUpperCase();
 };
 
-
 export const uniqueMultiProps = (items, props) => {
   return _.uniqBy(items, (item) => {
     return JSON.stringify(_.pick(item, props));
@@ -780,8 +802,7 @@ export function getFilterableFieldsFromFields(fields) {
 export const RESORUCE_TYPE = {
   ACCOUNTS: 'account',
   ITEMS: 'items',
-
-}
+};
 
 function escapeRegExpChars(text) {
   return text.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, '\\$1');
@@ -816,4 +837,4 @@ export function highlightText(text, query) {
     tokens.push(rest);
   }
   return tokens;
-}
\ No newline at end of file
+}
diff --git a/server/src/services/Sales/SaleInvoiceTransformer.ts b/server/src/services/Sales/SaleInvoiceTransformer.ts
index 42d24384e..5d8e177ca 100644
--- a/server/src/services/Sales/SaleInvoiceTransformer.ts
+++ b/server/src/services/Sales/SaleInvoiceTransformer.ts
@@ -1,4 +1,4 @@
-import { Service } from 'typedi';;
+import { Service } from 'typedi';
 import { Transformer } from 'lib/Transformer/Transformer';
 import { formatNumber } from 'utils';
 
@@ -13,6 +13,7 @@ export default class SaleInvoiceTransformer extends Transformer {
       'formattedDueDate',
       'formattedAmount',
       'formattedDueAmount',
+      'formattedPaymentAmount',
     ];
   };
 
@@ -50,9 +51,20 @@ export default class SaleInvoiceTransformer extends Transformer {
    * @param {ISaleInvoice} invoice
    * @returns {string}
    */
-  protected formattedDueAmount(invoice) {
+  protected formattedDueAmount = (invoice): string => {
     return formatNumber(invoice.dueAmount, {
       currencyCode: invoice.currencyCode,
     });
-  }
+  };
+
+  /**
+   * Retrieve formatted payment amount.
+   * @param {ISaleInvoice} invoice
+   * @returns {string}
+   */
+  protected formattedPaymentAmount = (invoice): string => {
+    return formatNumber(invoice.paymentAmount, {
+      currencyCode: invoice.currencyCode,
+    });
+  };
 }