From 72e49f4958c8e963d5d7fd7798e0413f2e6a3ebb Mon Sep 17 00:00:00 2001
From: bluebird42 <2034043+bluebird42@users.noreply.github.com>
Date: Mon, 12 Oct 2026 22:14:07 +0200
Subject: [PATCH] Highlight the current usage when it exceeds the limit

The usage bar already drew usage above the limit as a red segment; the
current value now turns red as well. Add an over-limit storybook example.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../components/dashboard_components/states.ex          |  7 ++++++-
 storybook/dashboard/states/usage_bar.story.exs         | 10 ++++++++++
 .../components/dashboard_components/states_test.exs    |  2 ++
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/lib/mave_core_web/components/dashboard_components/states.ex b/lib/mave_core_web/components/dashboard_components/states.ex
index a0d5f8c..022fe96 100644
--- a/lib/mave_core_web/components/dashboard_components/states.ex
+++ b/lib/mave_core_web/components/dashboard_components/states.ex
@@ -296,7 +296,12 @@ defmodule MaveCoreWeb.DashboardComponents.States do
         </div>
       </div>
       <div class="flex text-stone-300 text-sm">
-        <div class="flex-grow">{@current}</div>
+        <div
+          data-usage-current
+          class={["flex-grow", @segments.overage > 0 && "text-red-500"]}
+        >
+          {@current}
+        </div>
         <div>{@max}</div>
       </div>
     </div>
diff --git a/storybook/dashboard/states/usage_bar.story.exs b/storybook/dashboard/states/usage_bar.story.exs
index 8bf512e..0343c90 100644
--- a/storybook/dashboard/states/usage_bar.story.exs
+++ b/storybook/dashboard/states/usage_bar.story.exs
@@ -56,6 +56,16 @@ defmodule Storybook.Dashboard.States.UsageBar do
           max: "10,000 calls",
           percent: 100.0
         }
+      },
+      %Variation{
+        id: :over_limit,
+        description: "Over limit (129%)",
+        attributes: %{
+          label: "Bandwidth",
+          current: "1.29 TB",
+          max: "1 TB",
+          percent: 129.0
+        }
       }
     ]
   end
diff --git a/test/mave_core_web/components/dashboard_components/states_test.exs b/test/mave_core_web/components/dashboard_components/states_test.exs
index 397710d..83bf2a2 100644
--- a/test/mave_core_web/components/dashboard_components/states_test.exs
+++ b/test/mave_core_web/components/dashboard_components/states_test.exs
@@ -16,6 +16,7 @@ defmodule MaveCoreWeb.DashboardComponents.StatesTest do
     assert html =~ ~s(data-usage-segment="within-limit")
     assert html =~ ~s(style="width: 25.0%;")
     refute html =~ ~s(data-usage-segment="overage")
+    refute html =~ "text-red-500"
   end
 
   test "usage_bar shows the portion above the limit in red" do
@@ -31,5 +32,6 @@ defmodule MaveCoreWeb.DashboardComponents.StatesTest do
     assert html =~ ~s(data-usage-segment="overage")
     assert html =~ "bg-red-500"
     assert html =~ ~s(style="width: 25.0%;")
+    assert html =~ ~r/data-usage-current[^>]*class="flex-grow text-red-500"/
   end
 end