From f9dd5d81580b5a501e8d4f2589618232aa910781 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Zielonka?= <michal.zielonka@softwareone.com>
Date: Fri, 30 Jan 2026 13:15:53 +0100
Subject: [PATCH] fix(Expenses): Fixed status for expenses limit

Closes MPT-17525
---
 .../SummaryCards/ExpensesBreakdownSummaryCards.tsx   |  7 ++-----
 .../src/components/PoolsOverview/Summary/Summary.tsx | 10 +++-------
 .../src/components/RegionExpenses/RegionExpenses.tsx |  8 +++-----
 ngui/ui/src/utils/layouts.ts                         | 12 ++++++++++++
 4 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/ngui/ui/src/components/ExpensesBreakdown/SummaryCards/ExpensesBreakdownSummaryCards.tsx b/ngui/ui/src/components/ExpensesBreakdown/SummaryCards/ExpensesBreakdownSummaryCards.tsx
index 2dc9cff09..8d42e2002 100644
--- a/ngui/ui/src/components/ExpensesBreakdown/SummaryCards/ExpensesBreakdownSummaryCards.tsx
+++ b/ngui/ui/src/components/ExpensesBreakdown/SummaryCards/ExpensesBreakdownSummaryCards.tsx
@@ -1,11 +1,8 @@
 import SummaryGrid from "components/SummaryGrid";
 import { SUMMARY_VALUE_COMPONENT_TYPES } from "utils/constants";
-import { getPoolColorStatus } from "utils/layouts";
-import { intPercentXofY } from "utils/math";
+import { getPoolColorStatusByLimit } from "utils/layouts";
 
 const ExpensesBreakdownSummaryCards = ({ total = 0, previousTotal = 0, isLoading = false, pdfIds = {} }) => {
-  const percent = intPercentXofY(total, previousTotal);
-
   const summaryData = [
     {
       key: "totalExpensesForSelectedPeriod",
@@ -13,7 +10,7 @@ const ExpensesBreakdownSummaryCards = ({ total = 0, previousTotal = 0, isLoading
       valueComponentProps: {
         value: total
       },
-      color: getPoolColorStatus(percent),
+      color: getPoolColorStatusByLimit(total, previousTotal),
       isLoading,
       captionMessageId: "totalExpensesForSelectedPeriod",
       pdfId: pdfIds.totalExpensesForSelectedPeriod
diff --git a/ngui/ui/src/components/PoolsOverview/Summary/Summary.tsx b/ngui/ui/src/components/PoolsOverview/Summary/Summary.tsx
index 08b557c83..20db83f8c 100644
--- a/ngui/ui/src/components/PoolsOverview/Summary/Summary.tsx
+++ b/ngui/ui/src/components/PoolsOverview/Summary/Summary.tsx
@@ -2,8 +2,7 @@ import SummaryGrid from "components/SummaryGrid";
 import { getPoolIdWithSubPools, getResourcesExpensesUrl } from "urls";
 import { RECOMMENDATIONS_FILTER, POOL_ID_FILTER, SUMMARY_CARD_TYPES, SUMMARY_VALUE_COMPONENT_TYPES } from "utils/constants";
 import { getCurrentMonthRange } from "utils/datetime";
-import { getPoolColorStatus } from "utils/layouts";
-import { intPercentXofY } from "utils/math";
+import { getPoolColorStatusByLimit } from "utils/layouts";
 
 type SummaryProps = {
   data: {
@@ -19,9 +18,6 @@ type SummaryProps = {
 
 const Summary = ({ data, isLoading = false }: SummaryProps) => {
   const { id, limit = 0, cost = 0, forecast = 0, saving = 0 } = data;
-
-  const costPercent = intPercentXofY(cost, limit);
-  const forecastPercent = intPercentXofY(forecast, limit);
   const { today, startOfMonth } = getCurrentMonthRange(true);
 
   const { exceededPools, exceededByValue } = [data, ...(data.children ?? [])].reduce(
@@ -73,7 +69,7 @@ const Summary = ({ data, isLoading = false }: SummaryProps) => {
       valueComponentProps: {
         value: cost
       },
-      color: getPoolColorStatus(costPercent),
+      color: getPoolColorStatusByLimit(cost, limit),
       captionMessageId: "expensesThisMonth",
       isLoading,
       dataTestIds: {
@@ -87,7 +83,7 @@ const Summary = ({ data, isLoading = false }: SummaryProps) => {
         value: forecast
       },
       captionMessageId: "forecastThisMonth",
-      color: getPoolColorStatus(forecastPercent),
+      color: getPoolColorStatusByLimit(forecast, limit),
       isLoading,
       dataTestIds: {
         cardTestId: "card_forecast"
diff --git a/ngui/ui/src/components/RegionExpenses/RegionExpenses.tsx b/ngui/ui/src/components/RegionExpenses/RegionExpenses.tsx
index c18019fd9..bb519179c 100644
--- a/ngui/ui/src/components/RegionExpenses/RegionExpenses.tsx
+++ b/ngui/ui/src/components/RegionExpenses/RegionExpenses.tsx
@@ -26,9 +26,9 @@ import {
   EMPTY_UUID,
   DATE_RANGE_TYPE
 } from "utils/constants";
-import { SPACING_2, getPoolColorStatus } from "utils/layouts";
+import { SPACING_2, getPoolColorStatusByLimit } from "utils/layouts";
 import { REGION_EXPENSES_HEIGHT } from "utils/maps";
-import { percentXofY, intPercentXofY } from "utils/math";
+import { percentXofY } from "utils/math";
 
 const getGoToExpensesLink = (name, startDate, endDate) =>
   getResourcesExpensesUrl({
@@ -95,8 +95,6 @@ const RegionExpenses = ({ expenses, isLoading = false }) => {
     return getFilteredMarkers(markers, total, getColor);
   }, [markers, theme.palette.chart, total]);
 
-  const percent = intPercentXofY(total, previousTotal);
-
   const summaryData = [
     {
       key: "totalExpensesForSelectedPeriod",
@@ -104,7 +102,7 @@ const RegionExpenses = ({ expenses, isLoading = false }) => {
       valueComponentProps: {
         value: total
       },
-      color: getPoolColorStatus(percent),
+      color: getPoolColorStatusByLimit(total, previousTotal),
       captionMessageId: "totalExpensesForSelectedPeriod",
       isLoading
     },
diff --git a/ngui/ui/src/utils/layouts.ts b/ngui/ui/src/utils/layouts.ts
index 1a82b8c0f..7ca3fd80c 100644
--- a/ngui/ui/src/utils/layouts.ts
+++ b/ngui/ui/src/utils/layouts.ts
@@ -78,6 +78,18 @@ export const getPoolColorStatus = (percent = 0) => {
   return SUCCESS;
 };
 
+export const getPoolColorStatusByLimit = (value: number, limit: number, threshold: number = 0.9) => {
+  const warningLimit = limit * threshold;
+  if (value > warningLimit && value <= limit) {
+    return WARNING;
+  }
+  if (value > limit) {
+    return ERROR;
+  }
+
+  return SUCCESS;
+};
+
 /**
  * Calculate border styles for n*2 cards/nodes layouts (home page, integrations)
  *