Merge pull request #339 from bigcapitalhq/big-122-bug-expense-details…

…-amount-should-not-be-rounded

fix: Expense amounts should not be rounded

packages/server/src/models/ExpenseCategory.ts

@@ -2,6 +2,8 @@ import { Model } from 'objection';
 import TenantModel from 'models/TenantModel';
 
 export default class ExpenseCategory extends TenantModel {
+  amount: number;
+
   /**
    * Table name
    */

packages/server/src/services/Expenses/CRUD/ExpenseCategoryTransformer.ts

@@ -0,0 +1,25 @@
+import { Transformer } from '@/lib/Transformer/Transformer';
+import { ExpenseCategory } from '@/models';
+import { formatNumber } from '@/utils';
+
+export class ExpenseCategoryTransformer extends Transformer {
+  /**
+   * Include these attributes to expense object.
+   * @returns {Array}
+   */
+  public includeAttributes = (): string[] => {
+    return ['amountFormatted'];
+  };
+
+  /**
+   * Retrieves the formatted amount.
+   * @param {ExpenseCategory} category
+   * @returns {string}
+   */
+  protected amountFormatted(category: ExpenseCategory) {
+    return formatNumber(category.amount, {
+      currencyCode: this.context.currencyCode,
+      money: false,
+    });
+  }
+}

packages/server/src/services/Expenses/CRUD/ExpenseTransformer.ts

@@ -1,6 +1,7 @@
 import { Transformer } from '@/lib/Transformer/Transformer';
 import { formatNumber } from 'utils';
 import { IExpense } from '@/interfaces';
+import { ExpenseCategoryTransformer } from './ExpenseCategoryTransformer';
 
 export class ExpenseTransfromer extends Transformer {
   /**
@@ -12,7 +13,8 @@ export class ExpenseTransfromer extends Transformer {
       'formattedAmount',
       'formattedLandedCostAmount',
       'formattedAllocatedCostAmount',
-      'formattedDate'
+      'formattedDate',
+      'categories',
     ];
   };
 
@@ -56,5 +58,16 @@ export class ExpenseTransfromer extends Transformer {
    */
   protected formattedDate = (expense: IExpense): string => {
     return this.formatDate(expense.paymentDate);
-  }
+  };
+
+  /**
+   * Retrieves the transformed expense categories.
+   * @param {IExpense} expense
+   * @returns {}
+   */
+  protected categories = (expense: IExpense) => {
+    return this.item(expense.categories, new ExpenseCategoryTransformer(), {
+      currencyCode: expense.currencyCode,
+    });
+  };
 }

packages/webapp/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.tsx

@@ -9,7 +9,7 @@ import {
   TotalLineTextStyle,
 } from '@/components';
 import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
-import { FormatNumber, TotalLine } from '@/components';
+import { TotalLine } from '@/components';
 
 /**
  * Footer details of expense readonly details.
@@ -22,12 +22,12 @@ export default function ExpenseDrawerFooter() {
       <ExpenseTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
         <TotalLine
           title={<T id={'expense.details.subtotal'} />}
-          value={<FormatNumber value={expense.total_amount} />}
+          value={expense.formatted_amount}
           borderStyle={TotalLineBorderStyle.SingleDark}
         />
         <TotalLine
           title={<T id={'expense.details.total'} />}
-          value={<FormatNumber value={expense.formatted_amount} />}
+          value={expense.formatted_amount}
           borderStyle={TotalLineBorderStyle.DoubleDark}
           textStyle={TotalLineTextStyle.Bold}
         />

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

@@ -36,8 +36,7 @@ export const useExpenseReadEntriesColumns = () => {
       },
       {
         Header: intl.get('amount'),
-        accessor: 'amount',
-        Cell: FormatNumberCell,
+        accessor: 'amount_formatted',
         width: getColumnWidth(categories, 'amount', {
           minWidth: 60,
           magicSpacing: 5,