From 5dd1536a7c4da14ed0fac71021a63ef379122251 Mon Sep 17 00:00:00 2001
From: Gustavo Saiani <gustavo@poe.ma>
Date: Fri, 3 Apr 2026 23:13:01 -0300
Subject: [PATCH] Show date range on monthly report page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The report covers the last 30 days but the page didn't say so —
now it displays "Mar 4 – Apr 3" (or equivalent) above the total.
---
 app.py               |  5 ++++-
 static/app.js        | 13 ++++++++++++-
 static/style.css     |  6 ++++++
 tests/test_report.py |  2 ++
 4 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/app.py b/app.py
index a7efbcf..26094b9 100644
--- a/app.py
+++ b/app.py
@@ -662,7 +662,10 @@ def monthly_report(
         for r in db.fetchall()
     ]
     total_ms = sum(t["total_ms"] for t in tasks)
-    return {"tasks": tasks, "total_ms": total_ms}
+    from datetime import datetime, timezone
+    period_start = datetime.fromtimestamp(thirty_days_ago_ms / 1000, tz=timezone.utc).strftime("%Y-%m-%d")
+    period_end = datetime.now(timezone.utc).strftime("%Y-%m-%d")
+    return {"tasks": tasks, "total_ms": total_ms, "period_start": period_start, "period_end": period_end}
 
 
 def count_today_sessions(user_id: int, db) -> int:
diff --git a/static/app.js b/static/app.js
index f3baad2..08f6667 100644
--- a/static/app.js
+++ b/static/app.js
@@ -2263,7 +2263,9 @@ async function initReportPage() {
       .filter(t => t.total_ms > 0)
       .sort((a, b) => b.total_ms - a.total_ms);
     const total_ms = tasks.reduce((a, t) => a + t.total_ms, 0);
-    renderReport(contentEl, { tasks, total_ms });
+    const period_start = new Date(thirtyDaysAgo).toISOString().slice(0, 10);
+    const period_end = new Date().toISOString().slice(0, 10);
+    renderReport(contentEl, { tasks, total_ms, period_start, period_end });
     return;
   }
 
@@ -2307,7 +2309,16 @@ function renderReport(el, data) {
       </div>`;
   }).join('');
 
+  const fmtDate = iso => {
+    const d = new Date(iso + 'T12:00:00');
+    return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+  };
+  const periodLabel = data.period_start && data.period_end
+    ? `${fmtDate(data.period_start)} – ${fmtDate(data.period_end)}`
+    : 'Last 30 days';
+
   el.innerHTML = `
+    <div class="report-period">${periodLabel}</div>
     <div class="report-total">
       <span class="report-total-label">Total</span>
       <span class="report-total-time">${fmtHM(data.total_ms)}</span>
diff --git a/static/style.css b/static/style.css
index f6c0814..67ee4ea 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1605,6 +1605,12 @@ html[data-theme="dark"] .sl-date-input { color-scheme: dark; }
   margin-bottom: 24px;
 }
 
+.report-period {
+  font-size: 14px;
+  color: var(--dimmer);
+  margin-bottom: 8px;
+}
+
 .report-total {
   display: flex;
   justify-content: space-between;
diff --git a/tests/test_report.py b/tests/test_report.py
index 27ee6d5..ca68781 100644
--- a/tests/test_report.py
+++ b/tests/test_report.py
@@ -31,6 +31,8 @@ def test_report_empty(client, alice):
     body = r.json()
     assert body["tasks"] == []
     assert body["total_ms"] == 0
+    assert "period_start" in body
+    assert "period_end" in body
 
 
 def test_report_includes_recent_sessions(client, alice):