Fix for issue #1253 (Budget can't be balanced when "Hide decimal places" in the setting is on) (#6274)

* Fix number formatting of intlFormatter with a wrapper to handle -0 edge case (#1253)

* Fix Normalize integer currency values in makeBalanceAmountStyle function based on formatting user prefs (#1253)

* [autofix.ci] apply automated fixes

* Add release notes for budget balancing issue when "Hide decimal places" is enabled

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Matiss Janis Aboltins <matiss@mja.lv>

packages/desktop-client/src/components/budget/util.ts

@@ -7,6 +7,7 @@ import { t } from 'i18next';
 
 import { send } from 'loot-core/platform/client/fetch';
 import * as monthUtils from 'loot-core/shared/months';
+import { currencyToAmount, integerToCurrency } from 'loot-core/shared/util';
 import { type Handlers } from 'loot-core/types/handlers';
 import {
   type CategoryEntity,
@@ -71,17 +72,29 @@ export function makeBalanceAmountStyle(
   goalValue?: number | null,
   budgetedValue?: number | null,
 ) {
-  if (value < 0) {
+  // Converts an integer currency value to a normalized decimal amount.
+  // First converts the integer to currency format, then to a decimal amount.
+  // Uses integerToCurrency to display the value correctly according to user prefs.
+
+  const normalizeIntegerValue = (val: number | null | undefined) =>
+    typeof val === 'number' ? currencyToAmount(integerToCurrency(val)) : 0;
+
+  const currencyValue = normalizeIntegerValue(value);
+
+  if (currencyValue < 0) {
     return { color: theme.errorText };
   }
 
   if (goalValue == null) {
-    const greyed = makeAmountGrey(value);
+    const greyed = makeAmountGrey(currencyValue);
     if (greyed) {
       return greyed;
     }
   } else {
-    if (budgetedValue < goalValue) {
+    const budgetedAmount = normalizeIntegerValue(budgetedValue);
+    const goalAmount = normalizeIntegerValue(goalValue);
+
+    if (budgetedAmount < goalAmount) {
       return { color: theme.warningText };
     }
     return { color: theme.noticeText };

packages/desktop-client/src/hooks/useFormat.ts

@@ -41,7 +41,7 @@ export type FormatResult = {
 function format(
   value: unknown,
   type: FormatType,
-  formatter: Intl.NumberFormat,
+  formatter: { format: (value: number) => string },
   decimalPlaces: number,
 ): FormatResult {
   switch (type) {