Show date range on monthly report page (#108)

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.

Author: gusaiani

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:

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>

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;

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):