From 20f18d8890f286f800d640d9d580dcdd8a5a80aa Mon Sep 17 00:00:00 2001
From: Aram Petrosyan <aram.petrosyan.88@gmail.com>
Date: Sun, 8 Mar 2026 19:48:06 +0400
Subject: [PATCH] fix(insights): dynamic hour labels in hourly breakdown chart

Replace fixed hour labels (12am, 6am, 12pm, 6pm, 11pm) with dynamic
labels derived from hourlyData. Now displays every even hour (12am, 2am,
4am, etc.) for better alignment with the chart bars.

Made-with: Cursor
---
 .../src/components/insights/bento-dashboard.tsx    | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/insights/bento-dashboard.tsx b/frontend/src/components/insights/bento-dashboard.tsx
index 21bc38d..7311310 100644
--- a/frontend/src/components/insights/bento-dashboard.tsx
+++ b/frontend/src/components/insights/bento-dashboard.tsx
@@ -114,13 +114,13 @@ function HourlyBreakdownChart({
           })}
         </div>
       </div>
-      {/* Hour labels */}
-      <div className="flex justify-between mt-1 text-[10px] text-muted-foreground ml-8">
-        <span>12am</span>
-        <span>6am</span>
-        <span>12pm</span>
-        <span>6pm</span>
-        <span>11pm</span>
+      {/* Hour labels - even hours only (12am, 2am, 4am, ...) */}
+      <div className="flex gap-[2px] mt-1 text-[10px] text-muted-foreground ml-8">
+        {hourlyData.filter((_, i) => i % 2 === 0).map((hour) => (
+          <div key={hour.HourLabel} className="flex-1 min-w-0 text-center truncate">
+            {hour.HourLabel}
+          </div>
+        ))}
       </div>
     </TooltipProvider>
   );