feat(executive-dashboard): filter weekly trends to last month + add form type filter

- Weekly Trends table now shows only weeks overlapping the latest complete month
  (W14–W18 for April 2026, filtered via startDate/endDate overlap)
- Section sub-text reflects the filtered range (e.g. W14 – W18)
- Added V1 / EDS / Both toggle buttons in the section header
  - Both: two rows per week with rowspan (existing layout)
  - V1 / EDS: single row per week with its own week cell
- Filter buttons colour-coded: Both=navy, V1=blue, EDS=purple
- Changed section-hdr alignment to center to accommodate the button group

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: subodhkj

dashboards/executive-dashboard.js

@@ -179,10 +179,34 @@ const STYLE = `
 /* ── Section headers ─────────────────────────────────────────────────── */
 .section-hdr{
   display:flex;
-  align-items:baseline;
+  align-items:center;
   gap:12px;
   margin-bottom:14px;
 }
+
+/* ── Form filter buttons ─────────────────────────────────────────────── */
+.form-filter-btns{
+  margin-left:auto;
+  display:flex;
+  gap:6px;
+  align-items:center;
+}
+.form-filter-btn{
+  padding:4px 12px;
+  border-radius:6px;
+  border:1px solid var(--border);
+  background:white;
+  font-size:11px;
+  font-weight:600;
+  color:var(--muted);
+  cursor:pointer;
+  transition:background .15s,color .15s,border-color .15s;
+  font-family:'IBM Plex Sans',system-ui,sans-serif;
+}
+.form-filter-btn:hover{background:#f8fafc}
+.form-filter-btn.active[data-filter="both"]{background:var(--navy);color:white;border-color:var(--navy)}
+.form-filter-btn.active[data-filter="v1"]{background:var(--blue-lt);color:var(--blue);border-color:var(--blue-mid)}
+.form-filter-btn.active[data-filter="eds"]{background:var(--purple-lt);color:var(--purple);border-color:var(--purple-mid)}
 .section-hdr h2{
   font-family:'Playfair Display',Georgia,serif;
   font-size:20px;
@@ -816,8 +840,11 @@ function renderCallouts(callouts) {
   </div>`;
 }
 
-function renderTrendsTable(weeks) {
-  const latest = weeks[weeks.length - 1];
+function renderTrendsTable(weeks, formFilter = 'both') {
+  if (!weeks.length) {
+    return '<p class="empty" style="padding:16px;color:var(--muted)">No weekly data available.</p>';
+  }
+  const last = weeks[weeks.length - 1];
 
   const thead = `
     <thead>
@@ -833,11 +860,44 @@ function renderTrendsTable(weeks) {
     </thead>`;
 
   const rows = weeks.slice().reverse().map((w, i) => {
-    const isLatest = w.week === latest.week;
+    const isLatest = w.week === last.week;
     const isAlt = !isLatest && i % 2 === 1;
     const rowClass = isLatest ? 'row-latest' : isAlt ? 'row-group-alt' : '';
     const contClass = isLatest ? 'row-latest-cont' : isAlt ? 'row-group-alt-cont' : '';
 
+    const weekCell = `
+        <td class="week-cell">
+          <div class="week-num">${w.week || w.label}</div>
+          <div class="week-dates">${w.dateRange || ''}</div>
+          ${w.reportUrl ? `<a class="report-link" href="${w.reportUrl}" target="_blank">Report ↗</a>` : ''}
+        </td>`;
+
+    if (formFilter === 'v1') {
+      return `
+      <tr class="${rowClass}">
+        ${weekCell}
+        <td><span class="form-badge form-v1">V1</span></td>
+        <td class="num num-v1">${fmt(w.v1?.pageViews)}</td>
+        <td class="num num-err">${fmt(w.v1?.jsErrors)}</td>
+        <td class="num num-muted">${fmt(w.v1?.missingResources)}</td>
+        <td class="num num-v1">${w.v1?.visibilityP50 || '—'}</td>
+        <td class="num num-muted">${w.v1?.visibilityP75 || '—'}</td>
+      </tr>`;
+    }
+
+    if (formFilter === 'eds') {
+      return `
+      <tr class="${rowClass}">
+        ${weekCell}
+        <td><span class="form-badge form-eds">EDS</span></td>
+        <td class="num num-eds">${fmt(w.eds?.pageViews)}</td>
+        <td class="num num-eds">${fmt(w.eds?.jsErrors)}</td>
+        <td class="num num-muted">${fmt(w.eds?.missingResources)}</td>
+        <td class="num num-eds">${w.eds?.visibilityP50 || '—'}</td>
+        <td class="num num-muted">${w.eds?.visibilityP75 || '—'}</td>
+      </tr>`;
+    }
+
     return `
       <tr class="${rowClass}">
         <td class="week-cell" rowspan="2">
@@ -974,6 +1034,19 @@ class ExecutiveDashboard extends HTMLElement {
       ? latestMonth.label.split(' ')[0].slice(0, 3).toUpperCase()
       : (latest.week || latest.label);
 
+    const aprilWeeks = latestMonth
+      ? weekly.filter(w => {
+        const wStart = new Date(w.startDate);
+        const wEnd   = new Date(w.endDate);
+        const mStart = new Date(latestMonth.startDate);
+        const mEnd   = new Date(latestMonth.endDate);
+        return wStart <= mEnd && wEnd >= mStart;
+      })
+      : weekly;
+    const trendsFirst = aprilWeeks[0]?.week || '';
+    const trendsLast  = aprilWeeks[aprilWeeks.length - 1]?.week || '';
+    const trendsSubText = `${trendsFirst} – ${trendsLast} · one row per form type`;
+
     wrapper.innerHTML = `
       <div class="hero">
         <div class="hero-left">
@@ -999,9 +1072,14 @@ class ExecutiveDashboard extends HTMLElement {
         <div>
           <div class="section-hdr">
             <h2>Weekly Trends</h2>
-            <span class="section-sub">${weekly[0]?.week || ''} – ${latest.week || latest.label} · one row per form type</span>
+            <span class="section-sub">${trendsSubText}</span>
+            <div class="form-filter-btns" id="trends-filter-btns">
+              <button class="form-filter-btn active" data-filter="both">Both</button>
+              <button class="form-filter-btn" data-filter="v1">V1</button>
+              <button class="form-filter-btn" data-filter="eds">EDS</button>
+            </div>
           </div>
-          ${renderTrendsTable(weekly)}
+          <div id="trends-table-wrap">${renderTrendsTable(aprilWeeks)}</div>
         </div>
 
         <div class="monthly-section">
@@ -1017,6 +1095,21 @@ class ExecutiveDashboard extends HTMLElement {
         </div>
 
       </div>`;
+
+    // Wire up trends form filter
+    const filterBtns = shadow.getElementById('trends-filter-btns');
+    const trendsWrap  = shadow.getElementById('trends-table-wrap');
+    if (filterBtns && trendsWrap) {
+      filterBtns.addEventListener('click', (e) => {
+        const btn = e.target.closest('[data-filter]');
+        if (!btn) {
+          return;
+        }
+        filterBtns.querySelectorAll('.form-filter-btn').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        trendsWrap.innerHTML = renderTrendsTable(aprilWeeks, btn.dataset.filter);
+      });
+    }
   }
 }