feat: tableau de bord classeur - plages nommees, TCD/graphiques et KPI par feuille #153

A17 — nouveau endpoint GET /api/file/{vault}/xlsx/dashboard (read_workbook_
dashboard : plages nommees avec portee depuis defined_names read_only,
comptage graphiques/TCD par parts OPC, stats par feuille bornées 500x40 :
cellules/lignes/colonnes/formules/numerique + 8 premieres valeurs en cartes
KPI) et panneau frontend toggled depuis la toolbar (table des plages,
cartes KPI par feuille, hint actions IA). Bouton absent pour .csv et
formats en lecture seule ; le menu structure est saute quand le bouton
n'existe pas. i18n FR/EN (xlsx.dashboard_*), 8 tests backend + 2 tests
JSDOM + contre-preuve (5 echecs sur neutralisation), ruff/mypy 0.

🤖 Generated with Codebuff
Co-Authored-By: Codebuff <[email protected]>

frontend/js/viewer.js

@@ -1163,6 +1163,68 @@ export function renderXlsxViewer(area, data) {
       <div class="xlsx-panels">${panels}</div>
     </div>`;
 
+  // ── #153 A17 — dashboard panel: named ranges, objects, per-sheet KPI ──
+  // Fetched lazily on first open of the dashboard tab; a workbook without
+  // anything notable hides the button entirely (no empty panel).
+  if (!isCsv && !readOnly) {
+    const dashBtn = el("button", {
+      class: "btn-action xlsx-dash-btn",
+      id: "xlsx-dashboard-btn",
+      type: "button",
+      title: t("xlsx.dashboard_btn"),
+    }, [icon("layout-dashboard", 14), document.createTextNode(t("xlsx.dashboard_btn"))]);
+    area.querySelector(".xlsx-toolbar-actions").prepend(dashBtn);
+    dashBtn.addEventListener("click", async () => {
+      const old = area.querySelector(".xlsx-dashboard");
+      if (old) { old.remove(); dashBtn.classList.remove("active"); return; }
+      dashBtn.classList.add("active");
+      const panel = document.createElement("div");
+      panel.className = "xlsx-dashboard";
+      panel.innerHTML = `<div class="xlsx-dashboard-loading">…</div>`;
+      area.querySelector(".xlsx-panels").prepend(panel);
+      try {
+        const dash = await api(
+          `/api/file/${encodeURIComponent(data.vault)}/xlsx/dashboard?path=${encodeURIComponent(data.path)}`,
+        );
+        const rangeRows = (dash.named_ranges || []).map((r) =>
+          `<tr><td><code>${escapeHtml(r.name)}</code></td><td>${escapeHtml(r.scope || "—")}</td><td><code>${escapeHtml(r.ref)}</code></td></tr>`,
+        ).join("");
+        const kpiCards = (dash.sheets || []).map((s) => {
+          const cards = (s.kpi || []).map((k) =>
+            `<span class="xlsx-kpi"><span class="xlsx-kpi-label">${escapeHtml(k.label)}</span><span class="xlsx-kpi-value">${escapeHtml(String(k.value))}</span></span>`,
+          ).join("");
+          return `<div class="xlsx-kpi-sheet">
+            <h4>${escapeHtml(s.name)}</h4>
+            <p class="xlsx-kpi-meta">${escapeHtml(t("xlsx.dashboard_stats", {
+              cells: s.cells, rows: s.rows, cols: s.cols, formulas: s.formulas, numeric: s.numeric,
+            }))}</p>
+            <div class="xlsx-kpi-cards">${cards || "<span class=\"xlsx-kpi-empty\">—</span>"}</div>
+          </div>`;
+        }).join("");
+        panel.innerHTML = `
+          <div class="xlsx-dashboard-head">
+            <h3><i data-lucide="layout-dashboard" style="width:14px;height:14px"></i> ${escapeHtml(t("xlsx.dashboard_title"))}</h3>
+            <span class="xlsx-dashboard-objects">
+              ${escapeHtml(t("xlsx.dashboard_charts", { n: dash.objects?.charts ?? 0 }))}
+              · ${escapeHtml(t("xlsx.dashboard_pivots", { n: dash.objects?.pivots ?? 0 }))}
+            </span>
+          </div>
+          ${(dash.named_ranges || []).length || (dash.sheets || []).length ? "" : `<p class="xlsx-kpi-empty">${escapeHtml(t("xlsx.dashboard_empty"))}</p>`}
+          ${(dash.named_ranges || []).length ? `
+            <table class="csv-table xlsx-ranges-table"><thead><tr>
+              <th>${escapeHtml(t("xlsx.dashboard_nr_name"))}</th>
+              <th>${escapeHtml(t("xlsx.dashboard_nr_scope"))}</th>
+              <th>${escapeHtml(t("xlsx.dashboard_nr_ref"))}</th>
+            </tr></thead><tbody>${rangeRows}</tbody></table>` : ""}
+          <div class="xlsx-kpi-grid">${kpiCards}</div>
+          <p class="xlsx-dashboard-hint">${escapeHtml(t("xlsx.dashboard_hint"))}</p>`;
+        safeCreateIcons();
+      } catch (err) {
+        panel.innerHTML = `<p class="xlsx-kpi-empty">${escapeHtml(t("xlsx.load_error"))}: ${escapeHtml(String(err.message || err))}</p>`;
+      }
+    });
+  }
+
   const saveBtn = area.querySelector("#xlsx-save-btn");
   const panelEls = [...area.querySelectorAll(".xlsx-panel")];
   const dirtyCount = () => area.querySelectorAll("td.xlsx-dirty").length;
@@ -1688,7 +1750,10 @@ export function renderXlsxViewer(area, data) {
   };
 
   // Structure menu: built on demand, positioned under the button.
-  area.querySelector("#xlsx-structure-btn").addEventListener("click", (e) => {
+  // (.csv / read-only workbooks have no such button — the menu block above
+  // is skipped for them.)
+  const structureBtn = area.querySelector("#xlsx-structure-btn");
+  if (structureBtn) structureBtn.addEventListener("click", (e) => {
     const old = area.querySelector(".xlsx-structure-menu");
     if (old) { old.remove(); return; }
     const idx = visibleSheetIndex();

frontend/locales/en.json

@@ -1868,6 +1868,16 @@
   "xlsx.structure_saved": "Structure updated",
   "xlsx.structure_error": "Could not change the structure",
   "xlsx.last_sheet": "The last sheet cannot be deleted",
+  "xlsx.dashboard_btn": "Dashboard",
+  "xlsx.dashboard_title": "Workbook dashboard",
+  "xlsx.dashboard_stats": "{{cells}} cells · {{rows}} rows · {{cols}} columns · {{formulas}} formulas · {{numeric}} numeric values",
+  "xlsx.dashboard_charts": "{{n}} chart(s)",
+  "xlsx.dashboard_pivots": "{{n}} pivot tables",
+  "xlsx.dashboard_empty": "No named range or usable data in this workbook.",
+  "xlsx.dashboard_nr_name": "Name",
+  "xlsx.dashboard_nr_scope": "Scope",
+  "xlsx.dashboard_nr_ref": "Reference",
+  "xlsx.dashboard_hint": "Select a range or open the AI assistant to analyse this data.",
   "xlsx.feature_cached_values": "cached values",
   "xlsx.feature_slicers": "slicers and timelines",
   "xlsx.feature_form_controls": "form controls",

frontend/locales/fr.json

@@ -1868,6 +1868,16 @@
   "xlsx.structure_saved": "Structure mise à jour",
   "xlsx.structure_error": "Modification de la structure impossible",
   "xlsx.last_sheet": "Impossible de supprimer la dernière feuille",
+  "xlsx.dashboard_btn": "Tableau de bord",
+  "xlsx.dashboard_title": "Tableau de bord du classeur",
+  "xlsx.dashboard_stats": "{{cells}} cellules · {{rows}} lignes · {{cols}} colonnes · {{formulas}} formules · {{numeric}} valeurs numériques",
+  "xlsx.dashboard_charts": "{{n}} graphique(s)",
+  "xlsx.dashboard_pivots": "{{n}} TCD",
+  "xlsx.dashboard_empty": "Aucune plage nommée ni donnée exploitable dans ce classeur.",
+  "xlsx.dashboard_nr_name": "Nom",
+  "xlsx.dashboard_nr_scope": "Portée",
+  "xlsx.dashboard_nr_ref": "Référence",
+  "xlsx.dashboard_hint": "Sélectionnez une plage ou ouvrez l'assistant IA pour analyser ces données.",
   "xlsx.feature_cached_values": "valeurs calculées",
   "xlsx.feature_slicers": "segments et chronologies",
   "xlsx.feature_form_controls": "contrôles de formulaire",

frontend/style.css

@@ -11128,6 +11128,97 @@ body.desktop-mode .editor-container {
   background: transparent;
   color: var(--text-primary);
 }
+
+/* #153 A17 — workbook dashboard panel: named ranges table + KPI cards.
+   Colors come from the existing CSS variables (no hardcoded values). */
+.xlsx-dashboard {
+  margin: 8px 0;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--surface);
+}
+.xlsx-dashboard-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 8px;
+}
+.xlsx-dashboard-head h3 {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0;
+  font-size: 0.95rem;
+  color: var(--text-primary);
+}
+.xlsx-dashboard-objects {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+.xlsx-ranges-table {
+  margin-bottom: 10px;
+  font-size: 0.82rem;
+}
+.xlsx-kpi-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 8px;
+}
+.xlsx-kpi-sheet {
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg-secondary);
+}
+.xlsx-kpi-sheet h4 {
+  margin: 0 0 4px;
+  font-size: 0.85rem;
+  color: var(--text-primary);
+}
+.xlsx-kpi-meta {
+  margin: 0 0 6px;
+  font-size: 0.75rem;
+  color: var(--text-muted);
+}
+.xlsx-kpi-cards {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.xlsx-kpi {
+  display: inline-flex;
+  flex-direction: column;
+  min-width: 64px;
+  padding: 4px 8px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--surface);
+}
+.xlsx-kpi-label {
+  font-size: 0.7rem;
+  color: var(--text-muted);
+}
+.xlsx-kpi-value {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.85rem;
+  color: var(--text-primary);
+}
+.xlsx-kpi-empty {
+  color: var(--text-muted);
+  font-size: 0.8rem;
+}
+.xlsx-dashboard-hint {
+  margin: 10px 0 0;
+  font-size: 0.78rem;
+  color: var(--text-muted);
+}
+.xlsx-dashboard-loading {
+  color: var(--text-muted);
+  font-size: 0.8rem;
+}
 .xlsx-structure-item:hover {
   background: var(--bg-secondary);
 }