fix(webapp): use the server formatted value

packages/webapp/src/containers/Drawers/BillDrawer/utils.tsx

@@ -63,8 +63,7 @@ export const useBillReadonlyEntriesTableColumns = () => {
       },
       {
         Header: intl.get('rate'),
-        accessor: 'rate',
-        Cell: FormatNumberCell,
+        accessor: 'rate_formatted',
         width: getColumnWidth(entries, 'rate', {
           minWidth: 60,
           magicSpacing: 5,
@@ -75,9 +74,8 @@ export const useBillReadonlyEntriesTableColumns = () => {
       },
       {
         Header: intl.get('amount'),
-        accessor: 'amount',
-        Cell: FormatNumberCell,
-        width: getColumnWidth(entries, 'amount', {
+        accessor: 'total_formatted',
+        width: getColumnWidth(entries, 'total_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),

packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/utils.tsx

@@ -60,9 +60,8 @@ export const useCreditNoteReadOnlyEntriesColumns = () => {
       },
       {
         Header: intl.get('rate'),
-        accessor: 'rate',
-        Cell: FormatNumberCell,
-        width: getColumnWidth(entries, 'rate', {
+        accessor: 'rate_formatted',
+        width: getColumnWidth(entries, 'rate_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),
@@ -72,9 +71,8 @@ export const useCreditNoteReadOnlyEntriesColumns = () => {
       },
       {
         Header: intl.get('amount'),
-        accessor: 'amount',
-        Cell: FormatNumberCell,
-        width: getColumnWidth(entries, 'amount', {
+        accessor: 'total_formatted',
+        width: getColumnWidth(entries, 'total_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),

packages/webapp/src/containers/Drawers/EstimateDetailDrawer/utils.tsx

@@ -47,9 +47,8 @@ export const useEstimateReadonlyEntriesColumns = () => {
       },
       {
         Header: intl.get('rate'),
-        accessor: 'rate',
-        Cell: FormatNumberCell,
-        width: getColumnWidth(entries, 'rate', {
+        accessor: 'rate_formatted',
+        width: getColumnWidth(entries, 'rate_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),
@@ -59,9 +58,9 @@ export const useEstimateReadonlyEntriesColumns = () => {
       },
       {
         Header: intl.get('amount'),
-        accessor: 'amount',
+        accessor: 'total_formatted',
         Cell: FormatNumberCell,
-        width: getColumnWidth(entries, 'amount', {
+        width: getColumnWidth(entries, 'total_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),

packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTableFooter.tsx

@@ -23,7 +23,7 @@ export function InvoiceDetailTableFooter() {
       <InvoiceTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
         <TotalLine
           title={<T id={'invoice.details.subtotal'} />}
-          value={<FormatNumber value={invoice.subtotal_formatted} />}
+          value={invoice.subtotal_formatted}
           borderStyle={TotalLineBorderStyle.SingleDark}
         />
         {invoice.taxes.map((taxRate) => (

packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/utils.tsx

@@ -64,24 +64,22 @@ export const useInvoiceReadonlyEntriesColumns = () => {
       },
       {
         Header: intl.get('rate'),
-        accessor: 'rate',
-        Cell: FormatNumberCell,
+        accessor: 'rate_formatted',
         align: 'right',
         disableSortBy: true,
         textOverview: true,
-        width: getColumnWidth(entries, 'rate', {
+        width: getColumnWidth(entries, 'rate_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),
       },
       {
         Header: intl.get('amount'),
-        accessor: 'amount',
-        Cell: FormatNumberCell,
+        accessor: 'total_formatted',
         align: 'right',
         disableSortBy: true,
         textOverview: true,
-        width: getColumnWidth(entries, 'amount', {
+        width: getColumnWidth(entries, 'total_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),

packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/utils.tsx

@@ -52,9 +52,8 @@ export const usePaymentMadeEntriesColumns = () => {
       },
       {
         Header: intl.get('payment_amount'),
-        accessor: 'payment_amount',
-        Cell: FormatNumberCell,
-        width: getColumnWidth(entries, 'payment_amount', {
+        accessor: 'payment_amount_formatted',
+        width: getColumnWidth(entries, 'payment_amount_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),

packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/utils.tsx

@@ -63,10 +63,9 @@ export const usePaymentReceiveEntriesColumns = () => {
       },
       {
         Header: intl.get('payment_amount'),
-        accessor: 'invoice.payment_amount',
-        Cell: FormatNumberCell,
+        accessor: 'payment_amount_formatted',
         align: 'right',
-        width: getColumnWidth(entries, 'invoice.payment_amount', {
+        width: getColumnWidth(entries, 'payment_amount_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),

packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.tsx

@@ -18,12 +18,9 @@ function ReceiptDetailDrawerProvider({ receiptId, ...props }) {
   const { featureCan } = useFeatureCan();
 
   // Fetch sale receipt details.
-  const { data: receipt, isFetching: isReceiptLoading } = useReceipt(
-    receiptId,
-    {
-      enabled: !!receiptId,
-    },
-  );
+  const { data: receipt, isLoading: isReceiptLoading } = useReceipt(receiptId, {
+    enabled: !!receiptId,
+  });
 
   // Provider.
   const provider = {

packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTableFooter.tsx

@@ -23,7 +23,7 @@ export default function ReceiptDetailTableFooter() {
       <ReceiptTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
         <TotalLine
           title={<T id={'receipt.details.subtotal'} />}
-          value={<FormatNumber value={receipt.amount} />}
+          value={receipt.formatted_amount}
         />
         <TotalLine
           title={<T id={'receipt.details.total'} />}

packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/utils.tsx

@@ -43,8 +43,7 @@ export const useReceiptReadonlyEntriesTableColumns = () => {
       {
         Header: intl.get('rate'),
         accessor: 'rate',
-        Cell: FormatNumberCell,
-        width: getColumnWidth(entries, 'rate', {
+        width: getColumnWidth(entries, 'rate_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),
@@ -55,8 +54,7 @@ export const useReceiptReadonlyEntriesTableColumns = () => {
       {
         Header: intl.get('amount'),
         accessor: 'amount',
-        Cell: FormatNumberCell,
-        width: getColumnWidth(entries, 'amount', {
+        width: getColumnWidth(entries, 'total_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),

packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerFooter.tsx

@@ -23,7 +23,7 @@ export default function VendorCreditDetailDrawerFooter() {
       <VendorCreditTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
         <TotalLine
           title={<T id={'vendor_credit.drawer.label_subtotal'} />}
-          value={<FormatNumber value={vendorCredit.formatted_amount} />}
+          value={vendorCredit.formatted_amount}
           borderStyle={TotalLineBorderStyle.SingleDark}
         />
         <TotalLine

packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/utils.tsx

@@ -61,9 +61,8 @@ export const useVendorCreditReadonlyEntriesTableColumns = () => {
       },
       {
         Header: intl.get('rate'),
-        accessor: 'rate',
-        Cell: FormatNumberCell,
-        width: getColumnWidth(entries, 'rate', {
+        accessor: 'rate_formatted',
+        width: getColumnWidth(entries, 'rate_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),
@@ -73,9 +72,8 @@ export const useVendorCreditReadonlyEntriesTableColumns = () => {
       },
       {
         Header: intl.get('amount'),
-        accessor: 'amount',
-        Cell: FormatNumberCell,
-        width: getColumnWidth(entries, 'amount', {
+        accessor: 'total_formatted',
+        width: getColumnWidth(entries, 'total_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),