From 5519a79655f7cd77482cc908b62ea3830495d6d8 Mon Sep 17 00:00:00 2001
From: goldpulpy <sawsani1928@gmail.com>
Date: Sun, 22 Mar 2026 00:27:27 +0300
Subject: [PATCH] feat(status): add date display to status tooltip

---
 src/app/frontend/assets/ts/features/status.ts          |  2 ++
 .../assets/ts/shared/services/status.processor.ts      | 10 +++++++++-
 src/app/frontend/assets/ts/shared/types/status.ts      |  2 ++
 src/app/frontend/templates/status/tooltip.html         |  7 +++++++
 4 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/app/frontend/assets/ts/features/status.ts b/src/app/frontend/assets/ts/features/status.ts
index f2ed97f..5785ef0 100644
--- a/src/app/frontend/assets/ts/features/status.ts
+++ b/src/app/frontend/assets/ts/features/status.ts
@@ -68,6 +68,7 @@ export class StatusService {
         isActive: false,
         style: "",
         incidents: undefined,
+        date: undefined,
       };
       return;
     }
@@ -87,6 +88,7 @@ export class StatusService {
       isActive: true,
       incidents: day?.incidents,
       style: style,
+      date: day.date,
     };
   }
   public stop(): void {
diff --git a/src/app/frontend/assets/ts/shared/services/status.processor.ts b/src/app/frontend/assets/ts/shared/services/status.processor.ts
index 86db262..06e1d8a 100644
--- a/src/app/frontend/assets/ts/shared/services/status.processor.ts
+++ b/src/app/frontend/assets/ts/shared/services/status.processor.ts
@@ -163,10 +163,16 @@ export class StatusProcessor {
       const dayStart = startOfDay(day);
       const dayEnd = endOfDay(day);
 
+      const formattedDate = day.toLocaleDateString(LOCALE, {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+      });
+
       const hasActiveMonitor = this.hasActiveMonitorOnDay(monitors, dayEnd);
 
       if (!hasActiveMonitor) {
-        return { color: "bg-empty", index: dayIndex };
+        return { color: "bg-empty", index: dayIndex, date: formattedDate };
       }
 
       const dayIncidents = this.filterIncidentsByDateRange(
@@ -179,6 +185,7 @@ export class StatusProcessor {
         return {
           color: "bg-operational",
           index: dayIndex,
+          date: formattedDate,
           incidents: [],
         };
       }
@@ -191,6 +198,7 @@ export class StatusProcessor {
       return {
         index: dayIndex,
         color: prioritizedIncidents[0].color,
+        date: formattedDate,
         incidents: this.sortIncidentsByLatest(prioritizedIncidents, false),
       };
     });
diff --git a/src/app/frontend/assets/ts/shared/types/status.ts b/src/app/frontend/assets/ts/shared/types/status.ts
index 498be89..746281a 100644
--- a/src/app/frontend/assets/ts/shared/types/status.ts
+++ b/src/app/frontend/assets/ts/shared/types/status.ts
@@ -9,6 +9,7 @@ export interface Tooltip {
   isActive: boolean;
   incidents?: EnrichedIncident[];
   style: string;
+  date?: string;
 }
 
 export interface IncidentConfig {
@@ -26,6 +27,7 @@ export interface EnrichedIncident extends IncidentForStatus, IncidentConfig {
 export interface Days {
   color: string;
   index: number;
+  date: string;
   incidents?: EnrichedIncident[];
 }
 
diff --git a/src/app/frontend/templates/status/tooltip.html b/src/app/frontend/templates/status/tooltip.html
index 947a81d..7ba995f 100644
--- a/src/app/frontend/templates/status/tooltip.html
+++ b/src/app/frontend/templates/status/tooltip.html
@@ -9,6 +9,13 @@
   class="hidden sm:block fixed max-h-96 overflow-y-auto bg-form border border-form-border rounded-form shadow-form p-2 z-50 max-w-xs"
 >
   <div>
+    <div class="mb-2 pb-2 border-b border-form-border">
+      <p
+        class="text-sm font-semibold text-title text-center"
+        x-text="tooltip.date"
+      ></p>
+    </div>
+
     {%
       set variants = [
         {