fix: numeric values formating.

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',

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',
       },
     ],
     [],

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,
       },

client/src/containers/Drawers/AccountDrawer/AccountDrawerDetails.js

@@ -17,7 +17,6 @@ export default function AccountDrawerDetails() {
       <Card className={'card-header'}>
         <AccountDrawerHeader />
       </Card>
-
       <AccountDrawerTable />
     </div>
   );

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,
       },
     ],
     [],

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

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
     },
   ],

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}>

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,
     },
   ], []);

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>

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',
       },
     ],
     [],

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,
       },
     ],

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>

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,
       },
     ],

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';
 

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>
   );
 }
-
-

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',
       },
     ],
     [],

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>

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,
     });

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.

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',
     },
   ], []);

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>

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,
       },

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

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
     },
   ], []);

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,
       },

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],

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 },

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],

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,
       },

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,
       },
       {

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';

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,
       },
       {

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,
       },
       {

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,
       },

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,
       },

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,
       },

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,
       },