fix: numeric values formating.

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