feat: add services page and API endpoints for service cost breakdown

- Implemented new API endpoints for fetching global services and service tenants details.
- Created a new services.html page with a sidebar for navigation and a chart for service costs.
- Updated frontend JavaScript to handle service data loading and rendering.
- Enhanced the dashboard with provider filtering options for AWS and Azure.
- Added a segmented toggle for selecting the date range for service costs.
- Improved styling for the sidebar and data tables.
- Refactored common utility functions for better reusability across pages.

.gitignore

@@ -8,4 +8,5 @@ config.json
 data/
 .env
 .DS_Store
-.claude/
+.claude/
+TODO.md

README.md

@@ -252,39 +252,3 @@ simple-cost-dashboard/
 │       └── tenant.js             # logique page détail + graphes + drawer ressources
 └── deploy/                     # à venir : manifestes Kubernetes (voir TODO)
 ```
-
-## 9. À faire
-
-**Déploiement Kubernetes** (`deploy/`, pas encore créé) :
-- [ ] Manifeste `Deployment` pour le serveur web (readiness/liveness sur `/health`)
-- [ ] Manifeste `Service` + `Ingress`
-- [ ] Manifeste `CronJob` pour la collecte quotidienne, même image, commande surchargée
-- [ ] `PersistentVolumeClaim` pour `/data` (la base SQLite doit survivre aux redéploiements)
-- [ ] `Secret` Kubernetes pour `config.json` (credentials Azure notamment) plutôt qu'un ConfigMap en clair
-
-**Authentification** :
-- [ ] Basic Auth via l'Ingress (annotation nginx `auth-basic` + `Secret` `htpasswd`) — solution de départ validée
-- [ ] Bascule vers SSO Entra ID (app d'entreprise Azure + groupe) une fois le besoin confirmé — probablement via `oauth2-proxy` en sidecar/Ingress plutôt que dans le code de l'appli, pour ne pas coupler l'auth à FastAPI
-
-**Credentials AWS/Azure en environnement conteneurisé** :
-- [x] AWS : tranché pour des clés IAM dédiées par tenant (`access_key_id`/
-  `secret_access_key` dans `config.json`, droit `ce:GetCostAndUsage`
-  uniquement) plutôt que des profils `~/.aws` — les profils SSO ne
-  fonctionnent pas en conteneur (le refresh du token demande un
-  navigateur). Voir §2. Pas encore fait : créer ces clés IAM dédiées côté
-  AWS pour chaque tenant (elles n'existent pas encore, seuls des profils
-  SSO existent aujourd'hui) — et envisager `sts:AssumeRole` depuis une
-  identité unique si la rotation de 28+ clés IAM statiques devient trop
-  lourde à gérer.
-- [ ] `config.json` (les clés AWS et les `client_secret` Azure) doit passer
-  en `Secret` Kubernetes monté en volume une fois `deploy/` créé, pas en
-  ConfigMap.
-
-**Fiabilité / observabilité** :
-- [ ] Alerte (Slack/email) si un tenant est en échec de collecte plusieurs jours de suite — actuellement visible seulement en se rendant sur le dashboard
-- [ ] Sauvegarde régulière de la base SQLite (le PVC seul ne protège pas d'une corruption)
-- [ ] Limite de rétention ou archivage si le volume de la base grossit significativement à long terme (non urgent : le volume attendu reste faible)
-
-**Fonctionnel** :
-- [ ] Vérifier le rendu du dashboard avec de vraies données (actuellement testé uniquement sur la structure du code, pas sur un run réel bout-en-bout)
-- [ ] Décider si la page globale doit aussi permettre de filtrer/rechercher un tenant si leur nombre grossit beaucoup

api/main.py

@@ -52,6 +52,11 @@ def tenant_page(provider: str, name: str):
     return _read_page("tenant.html")
 
 
+@app.get("/services", response_class=HTMLResponse)
+def services_page():
+    return _read_page("services.html")
+
+
 @app.get("/health")
 def health():
     try:
@@ -74,11 +79,43 @@ def api_overview(months: int = Query(12, ge=1, le=24)):
         conn.close()
 
 
+VALID_RANGES = (1, 7, 30, 365)
+
+
+def _validate_provider_filter(provider: str | None) -> None:
+    if provider is not None and provider not in PROVIDERS:
+        raise HTTPException(status_code=404, detail=f"Provider inconnu : {provider}")
+
+
+@app.get("/api/services")
+def api_services(range: int = Query(30, alias="range"), provider: str | None = Query(None)):
+    if range not in VALID_RANGES:
+        raise HTTPException(status_code=400, detail="range doit être 1, 7, 30 ou 365")
+    _validate_provider_filter(provider)
+    conn = queries.get_connection()
+    try:
+        return queries.global_services(conn, range_days=range, provider=provider)
+    finally:
+        conn.close()
+
+
+@app.get("/api/services/{service_name}/tenants")
+def api_service_tenants(service_name: str, range: int = Query(30, alias="range"), provider: str | None = Query(None)):
+    if range not in VALID_RANGES:
+        raise HTTPException(status_code=400, detail="range doit être 1, 7, 30 ou 365")
+    _validate_provider_filter(provider)
+    conn = queries.get_connection()
+    try:
+        return queries.service_tenants_detail(conn, service_name, range_days=range, provider=provider)
+    finally:
+        conn.close()
+
+
 @app.get("/api/tenant/{provider}/{name}")
 def api_tenant_detail(provider: str, name: str, range: int = Query(30, alias="range")):
     _require_provider(provider)
-    if range not in (7, 30, 365):
+    if range not in VALID_RANGES:
-        raise HTTPException(status_code=400, detail="range doit être 7, 30 ou 365")
+        raise HTTPException(status_code=400, detail="range doit être 1, 7, 30 ou 365")
     conn = queries.get_connection()
     try:
         return queries.tenant_detail(conn, provider, name, range_days=range)

api/queries.py

@@ -365,6 +365,239 @@ def services_for_months(conn: sqlite3.Connection, provider: str, name: str, mont
     return dict(sorted(((k, round(v, 2)) for k, v in totals.items()), key=lambda kv: -kv[1]))
 
 
+# ----------------------------------------------------------------------
+# Vue globale par service (page "Services")
+# ----------------------------------------------------------------------
+
+def _last_n_daily_dates(conn: sqlite3.Connection, n: int, provider: str | None = None) -> list[str]:
+    """Les n dates de collecte journalière les plus récentes, tous tenants
+    confondus (ou un seul provider si filtré) — aligne la fenêtre sur les
+    jours réellement collectés plutôt que sur un simple `today - n` (qui
+    pourrait déborder sur des jours pas encore collectés)."""
+    where = ["granularity = 'daily'", "status = 'ok'"]
+    params: list = []
+    if provider:
+        where.append("provider = ?")
+        params.append(provider)
+    params.append(n)
+
+    rows = conn.execute(
+        f"""
+        SELECT DISTINCT period_start FROM collections
+        WHERE {' AND '.join(where)}
+        ORDER BY period_start DESC LIMIT ?
+        """,
+        params,
+    ).fetchall()
+    return [r["period_start"] for r in rows]
+
+
+def _services_breakdown(totals: dict[str, float], total: float) -> list[dict]:
+    return sorted(
+        (
+            {
+                "service_name": name,
+                "amount": round(amount, 2),
+                "pct": round(amount / total * 100, 1) if total else 0.0,
+            }
+            for name, amount in totals.items()
+        ),
+        key=lambda s: -s["amount"],
+    )
+
+
+def global_services(conn: sqlite3.Connection, range_days: int = 30, provider: str | None = None) -> dict:
+    """Répartition des coûts par service, tous tenants/providers confondus
+    (ou un seul provider si `provider` est fourni).
+
+    range_days=1, 7 ou 30 -> derniers jours réellement collectés (granularité
+                            'daily'), la plus précise.
+    range_days=365       -> 12 derniers mois glissants ; même règle de
+                            priorité 'daily' > 'monthly' par (tenant, mois)
+                            que `_merged_monthly`, pour ne pas compter deux
+                            fois un mois couvert par les deux granularités."""
+    if range_days in (1, 7, 30):
+        days = _last_n_daily_dates(conn, range_days, provider=provider)
+        if not days:
+            return {
+                "mode": "daily", "range_days": range_days, "provider": provider,
+                "period_start": None, "period_end": None,
+                "total": 0.0, "services": [],
+            }
+
+        placeholders = ",".join("?" * len(days))
+        where = [f"c.period_start IN ({placeholders})"]
+        params: list = list(days)
+        if provider:
+            where.append("c.provider = ?")
+            params.append(provider)
+
+        rows = conn.execute(
+            f"""
+            SELECT sc.service_name AS service_name, SUM(sc.amount) AS amount
+            FROM service_costs sc
+            JOIN collections c ON c.id = sc.collection_id
+            WHERE c.status = 'ok' AND c.granularity = 'daily' AND {' AND '.join(where)}
+            GROUP BY sc.service_name
+            """,
+            params,
+        ).fetchall()
+        totals = {r["service_name"]: r["amount"] for r in rows}
+        total = sum(totals.values())
+
+        return {
+            "mode": "daily",
+            "range_days": range_days,
+            "provider": provider,
+            "period_start": min(days),
+            "period_end": max(days),
+            "total": round(total, 2),
+            "services": _services_breakdown(totals, total),
+        }
+
+    month_keys = _last_n_months(12)
+    where = ["substr(c.period_start, 1, 7) >= ?"]
+    params = [month_keys[0]]
+    if provider:
+        where.append("c.provider = ?")
+        params.append(provider)
+
+    rows = conn.execute(
+        f"""
+        SELECT c.provider, c.tenant_name, substr(c.period_start, 1, 7) AS month,
+               c.granularity, sc.service_name AS service_name, SUM(sc.amount) AS amount
+        FROM service_costs sc
+        JOIN collections c ON c.id = sc.collection_id
+        WHERE c.status = 'ok' AND {' AND '.join(where)}
+        GROUP BY c.provider, c.tenant_name, month, c.granularity, sc.service_name
+        """,
+        params,
+    ).fetchall()
+
+    daily_keys = {(r["provider"], r["tenant_name"], r["month"]) for r in rows if r["granularity"] == "daily"}
+    totals: dict[str, float] = {}
+    for r in rows:
+        if r["granularity"] == "monthly" and (r["provider"], r["tenant_name"], r["month"]) in daily_keys:
+            continue
+        totals[r["service_name"]] = totals.get(r["service_name"], 0.0) + r["amount"]
+
+    total = sum(totals.values())
+
+    return {
+        "mode": "monthly",
+        "range_days": None,
+        "provider": provider,
+        "months": month_keys,
+        "total": round(total, 2),
+        "services": _services_breakdown(totals, total),
+    }
+
+
+def service_tenants_detail(
+    conn: sqlite3.Connection, service_name: str, range_days: int = 30, provider: str | None = None
+) -> dict:
+    """Répartition par tenant pour un service donné (clic sur un service de
+    la page Services), sur la même période/règle daily-vs-monthly que
+    `global_services`. `provider` restreint aux tenants d'un seul CSP."""
+    if range_days in (1, 7, 30):
+        days = _last_n_daily_dates(conn, range_days, provider=provider)
+        if not days:
+            return {
+                "mode": "daily", "range_days": range_days, "provider": provider,
+                "period_start": None, "period_end": None,
+                "service_name": service_name, "total": 0.0, "tenants": [],
+            }
+
+        placeholders = ",".join("?" * len(days))
+        where = [f"c.period_start IN ({placeholders})", "sc.service_name = ?"]
+        params: list = [*days, service_name]
+        if provider:
+            where.append("c.provider = ?")
+            params.append(provider)
+
+        rows = conn.execute(
+            f"""
+            SELECT c.provider, c.tenant_name, SUM(sc.amount) AS amount
+            FROM service_costs sc
+            JOIN collections c ON c.id = sc.collection_id
+            WHERE c.status = 'ok' AND c.granularity = 'daily' AND {' AND '.join(where)}
+            GROUP BY c.provider, c.tenant_name
+            """,
+            params,
+        ).fetchall()
+        total = sum(r["amount"] for r in rows)
+        tenants = sorted(
+            (
+                {
+                    "provider": r["provider"], "tenant_name": r["tenant_name"],
+                    "amount": round(r["amount"], 2),
+                    "pct": round(r["amount"] / total * 100, 1) if total else 0.0,
+                }
+                for r in rows
+            ),
+            key=lambda t: -t["amount"],
+        )
+        return {
+            "mode": "daily",
+            "range_days": range_days,
+            "provider": provider,
+            "period_start": min(days),
+            "period_end": max(days),
+            "service_name": service_name,
+            "total": round(total, 2),
+            "tenants": tenants,
+        }
+
+    month_keys = _last_n_months(12)
+    where = ["substr(c.period_start, 1, 7) >= ?", "sc.service_name = ?"]
+    params = [month_keys[0], service_name]
+    if provider:
+        where.append("c.provider = ?")
+        params.append(provider)
+
+    rows = conn.execute(
+        f"""
+        SELECT c.provider, c.tenant_name, substr(c.period_start, 1, 7) AS month,
+               c.granularity, SUM(sc.amount) AS amount
+        FROM service_costs sc
+        JOIN collections c ON c.id = sc.collection_id
+        WHERE c.status = 'ok' AND {' AND '.join(where)}
+        GROUP BY c.provider, c.tenant_name, month, c.granularity
+        """,
+        params,
+    ).fetchall()
+
+    daily_keys = {(r["provider"], r["tenant_name"], r["month"]) for r in rows if r["granularity"] == "daily"}
+    totals: dict[tuple[str, str], float] = {}
+    for r in rows:
+        if r["granularity"] == "monthly" and (r["provider"], r["tenant_name"], r["month"]) in daily_keys:
+            continue
+        key = (r["provider"], r["tenant_name"])
+        totals[key] = totals.get(key, 0.0) + r["amount"]
+
+    total = sum(totals.values())
+    tenants = sorted(
+        (
+            {
+                "provider": tenant_provider, "tenant_name": tenant_name,
+                "amount": round(amount, 2),
+                "pct": round(amount / total * 100, 1) if total else 0.0,
+            }
+            for (tenant_provider, tenant_name), amount in totals.items()
+        ),
+        key=lambda t: -t["amount"],
+    )
+    return {
+        "mode": "monthly",
+        "range_days": None,
+        "provider": provider,
+        "months": month_keys,
+        "service_name": service_name,
+        "total": round(total, 2),
+        "tenants": tenants,
+    }
+
+
 # ----------------------------------------------------------------------
 # Détail par ressource (drawer sur un service)
 # ----------------------------------------------------------------------

frontend/index.html

@@ -9,6 +9,16 @@
 </head>
 <body>
 
+<div class="app-shell">
+<aside class="sidebar">
+  <p class="sidebar-brand">simple-cost-dashboard</p>
+  <nav class="sidebar-nav">
+    <a href="/" class="sidebar-link active">Compte</a>
+    <a href="/services" class="sidebar-link">Services</a>
+  </nav>
+</aside>
+<div class="page">
+
 <header class="topbar">
   <div class="topbar-title">
     <h1>simple-cost-dashboard</h1>
@@ -46,13 +56,18 @@
         <h2>Coûts par mois</h2>
         <p class="chart-card-sub">Total AWS + Azure, EUR</p>
       </div>
+      <div class="segmented-toggle" id="provider-toggle">
+        <button data-provider="all" class="active">Tous</button>
+        <button data-provider="aws">AWS</button>
+        <button data-provider="azure">Azure</button>
+      </div>
     </div>
     <div class="chart-canvas-wrap">
       <canvas id="monthly-chart"></canvas>
     </div>
     <div class="legend">
-      <span class="legend-item"><span class="legend-dot" style="background:var(--provider-aws)"></span>AWS</span>
+      <span class="legend-item" id="legend-aws"><span class="legend-dot" style="background:var(--provider-aws)"></span>AWS</span>
-      <span class="legend-item"><span class="legend-dot" style="background:var(--provider-azure)"></span>Azure</span>
+      <span class="legend-item" id="legend-azure"><span class="legend-dot" style="background:var(--provider-azure)"></span>Azure</span>
     </div>
   </div>
 
@@ -70,6 +85,9 @@
 
 </main>
 
+</div>
+</div>
+
 <script src="/static/common.js"></script>
 <script src="/static/app.js"></script>
 </body>

frontend/services.html

@@ -0,0 +1,79 @@
+<!doctype html>
+<html lang="fr">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Services — simple-cost-dashboard</title>
+<link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+
+<div class="app-shell">
+<aside class="sidebar">
+  <p class="sidebar-brand">simple-cost-dashboard</p>
+  <nav class="sidebar-nav">
+    <a href="/" class="sidebar-link">Compte</a>
+    <a href="/services" class="sidebar-link active">Services</a>
+  </nav>
+</aside>
+<div class="page">
+
+<header class="topbar">
+  <div class="topbar-title">
+    <h1>Services</h1>
+    <span class="breadcrumb">coûts par service, tous tenants confondus</span>
+  </div>
+</header>
+
+<main class="container">
+
+  <div id="error-banner"></div>
+
+  <p class="section-title">Répartition par service</p>
+  <div class="card chart-card">
+    <div class="chart-card-header">
+      <div>
+        <h2 id="services-period-title">30 derniers jours</h2>
+        <p class="chart-card-sub">EUR, converti au taux du jour de collecte</p>
+      </div>
+      <div class="segmented-toggle" id="range-toggle">
+        <button data-range="1">Aujourd'hui</button>
+        <button data-range="7">7 jours</button>
+        <button data-range="30" class="active">30 jours</button>
+        <button data-range="365">1 an</button>
+      </div>
+    </div>
+    <div style="display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin: -4px 0 12px;">
+      <p class="chart-card-sub" style="margin:0;">Clique un service pour voir le détail par tenant.</p>
+      <div class="segmented-toggle" id="provider-toggle">
+        <button data-provider="all" class="active">Tous</button>
+        <button data-provider="aws">AWS</button>
+        <button data-provider="azure">Azure</button>
+      </div>
+    </div>
+    <div id="services-table-wrap">
+      <div class="skeleton">Chargement…</div>
+    </div>
+  </div>
+
+</main>
+
+</div>
+</div>
+
+<div class="drawer-backdrop" id="drawer-backdrop"></div>
+<aside class="drawer" id="tenant-drawer" aria-hidden="true">
+  <div class="drawer-header">
+    <div>
+      <h3 id="drawer-title">Service</h3>
+      <p id="drawer-sub">&nbsp;</p>
+    </div>
+    <button class="drawer-close" id="drawer-close" aria-label="Fermer">&times;</button>
+  </div>
+  <div class="drawer-body" id="drawer-body"></div>
+</aside>
+
+<script src="/static/common.js"></script>
+<script src="/static/services.js"></script>
+</body>
+</html>

frontend/static/app.js

@@ -5,6 +5,7 @@ let allTenants = [];
 let currentMonths = [];
 let currentProvidersTotals = { aws: [], azure: [] };
 let monthlyChart = null;
+let currentProvider = "all";
 const selectedMonths = new Set();
 
 async function loadOverview() {
@@ -60,35 +61,44 @@ function renderMonthlyChart() {
     monthlyChart = null;
   }
 
+  const datasets = [];
+  if (currentProvider === "all" || currentProvider === "aws") {
+    datasets.push({
+      label: "AWS",
+      data: currentProvidersTotals.aws,
+      backgroundColor: colorFor(awsColor),
+      borderColor: surface,
+      borderWidth: { top: 2, right: 0, bottom: 0, left: 0 },
+      borderSkipped: false,
+      borderRadius: { topLeft: 4, topRight: 4 },
+      stack: "total",
+      maxBarThickness: 24,
+    });
+  }
+  if (currentProvider === "all" || currentProvider === "azure") {
+    datasets.push({
+      label: "Azure",
+      data: currentProvidersTotals.azure,
+      backgroundColor: colorFor(azureColor),
+      borderColor: surface,
+      borderWidth: { top: 2, right: 0, bottom: 0, left: 0 },
+      borderSkipped: false,
+      // Arrondi uniquement quand Azure est seul affiché (filtre "Azure") —
+      // en vue empilée "Tous", il est au-dessus d'AWS et déjà arrondi par
+      // le borderRadius du dataset AWS en dessous.
+      borderRadius: currentProvider === "azure" ? { topLeft: 4, topRight: 4 } : undefined,
+      stack: "total",
+      maxBarThickness: 24,
+    });
+  }
+
+  document.getElementById("legend-aws").style.display = currentProvider === "azure" ? "none" : "";
+  document.getElementById("legend-azure").style.display = currentProvider === "aws" ? "none" : "";
+
   const ctx = document.getElementById("monthly-chart").getContext("2d");
   monthlyChart = new Chart(ctx, {
     type: "bar",
-    data: {
+    data: { labels, datasets },
-      labels,
-      datasets: [
-        {
-          label: "AWS",
-          data: currentProvidersTotals.aws,
-          backgroundColor: colorFor(awsColor),
-          borderColor: surface,
-          borderWidth: { top: 2, right: 0, bottom: 0, left: 0 },
-          borderSkipped: false,
-          borderRadius: { topLeft: 4, topRight: 4 },
-          stack: "total",
-          maxBarThickness: 24,
-        },
-        {
-          label: "Azure",
-          data: currentProvidersTotals.azure,
-          backgroundColor: colorFor(azureColor),
-          borderColor: surface,
-          borderWidth: { top: 2, right: 0, bottom: 0, left: 0 },
-          borderSkipped: false,
-          stack: "total",
-          maxBarThickness: 24,
-        },
-      ],
-    },
     options: {
       ...chartBaseOptions(),
       onHover: (evt, elements) => {
@@ -240,8 +250,9 @@ function renderTenantsTable(tenants) {
 
 function filteredTenants() {
   const q = document.getElementById("tenant-search").value.trim().toLowerCase();
-  if (!q) return allTenants;
+  return allTenants.filter(
-  return allTenants.filter((t) => t.name.toLowerCase().includes(q));
+    (t) => (currentProvider === "all" || t.provider === currentProvider) && (!q || t.name.toLowerCase().includes(q))
+  );
 }
 
 function setupSearch() {
@@ -250,6 +261,19 @@ function setupSearch() {
   });
 }
 
+function setupProviderToggle() {
+  const buttons = document.querySelectorAll("#provider-toggle button");
+  buttons.forEach((btn) => {
+    btn.classList.toggle("active", btn.dataset.provider === currentProvider);
+    btn.addEventListener("click", () => {
+      currentProvider = btn.dataset.provider;
+      buttons.forEach((b) => b.classList.toggle("active", b === btn));
+      renderMonthlyChart();
+      renderTenantsTable(filteredTenants());
+    });
+  });
+}
+
 async function init() {
   try {
     const data = await loadOverview();
@@ -258,8 +282,9 @@ async function init() {
     currentProvidersTotals = data.providers_totals;
     renderKpis(data);
     renderMonthlyChart();
-    renderTenantsTable(allTenants);
+    renderTenantsTable(filteredTenants());
     setupSearch();
+    setupProviderToggle();
   } catch (e) {
     document.getElementById("error-banner").innerHTML = `
       <div class="banner error"><strong>Erreur de chargement du dashboard</strong> : ${escapeHtml(e.message)}</div>`;

frontend/static/common.js

@@ -43,6 +43,10 @@ function dayLabel(isoDate) {
   return new Intl.DateTimeFormat("fr-FR", { day: "2-digit", month: "short", timeZone: "UTC" }).format(d);
 }
 
+function rangeLabel(days) {
+  return days === 1 ? "aujourd'hui" : `${days} derniers jours`;
+}
+
 function providerLabel(provider) {
   return provider === "aws" ? "AWS" : provider === "azure" ? "Azure" : provider;
 }

frontend/static/services.js

@@ -0,0 +1,238 @@
+// services.js — page "Services" : répartition des coûts par service, tous
+// tenants/providers confondus, avec sélecteur de période (7j/30j/1 an) et
+// détail par tenant au clic sur un service.
+
+let currentRange = 30;
+let currentProvider = "all";
+let currentServices = [];
+let currentTotal = 0;
+
+const SORT_COLUMNS = [
+  { key: "service_name", label: "Service", numeric: false },
+  { key: "amount", label: "Montant", numeric: true },
+  { key: "pct", label: "Part", numeric: true },
+];
+let sortColumn = "amount";
+let sortDirection = "desc";
+
+async function loadServices(range, provider) {
+  const params = new URLSearchParams({ range });
+  if (provider !== "all") params.set("provider", provider);
+  const res = await fetch(`/api/services?${params}`);
+  if (!res.ok) throw new Error(`API services: HTTP ${res.status}`);
+  return res.json();
+}
+
+function periodTitle(data) {
+  if (data.mode === "monthly") return "12 derniers mois";
+  return rangeLabel(data.range_days);
+}
+
+function sortedServices() {
+  const sorted = [...currentServices];
+  sorted.sort((a, b) => {
+    const cmp =
+      sortColumn === "service_name"
+        ? a.service_name.localeCompare(b.service_name, "fr", { sensitivity: "base" })
+        : a[sortColumn] - b[sortColumn];
+    return sortDirection === "asc" ? cmp : -cmp;
+  });
+  return sorted;
+}
+
+function sortIndicator(column) {
+  if (sortColumn !== column) return "";
+  return sortDirection === "asc" ? " ↑" : " ↓";
+}
+
+function renderServicesTable(data) {
+  document.getElementById("services-period-title").textContent = periodTitle(data);
+  currentServices = data.services;
+  currentTotal = data.total;
+
+  const wrap = document.getElementById("services-table-wrap");
+
+  if (currentServices.length === 0) {
+    wrap.innerHTML = `<div class="empty-state">Aucune donnée de coût sur cette période. Lance <code>collect.py</code> ou <code>import_historical.py</code> pour peupler le dashboard.</div>`;
+    return;
+  }
+
+  renderServicesTableRows();
+}
+
+function renderServicesTableRows() {
+  const wrap = document.getElementById("services-table-wrap");
+  const sorted = sortedServices();
+
+  const headerCells = SORT_COLUMNS.map((col) => {
+    const classes = ["sortable"];
+    if (col.numeric) classes.push("num");
+    if (sortColumn === col.key) classes.push(`sorted-${sortDirection}`);
+    return `<th class="${classes.join(" ")}" data-sort="${col.key}">${col.label}${sortIndicator(col.key)}</th>`;
+  }).join("");
+
+  const rows = sorted
+    .map(
+      (s) => `
+      <tr class="clickable" data-service="${escapeHtml(s.service_name)}" title="Voir le détail par tenant">
+        <td>${escapeHtml(s.service_name)}</td>
+        <td class="num">${formatEUR(s.amount)}</td>
+        <td class="num">${s.pct.toFixed(1)} %</td>
+      </tr>`
+    )
+    .join("");
+
+  wrap.innerHTML = `
+    <table class="data-table">
+      <thead><tr>${headerCells}</tr></thead>
+      <tbody>${rows}</tbody>
+      <tfoot>
+        <tr>
+          <td><strong>Total</strong></td>
+          <td class="num"><strong>${formatEUR(currentTotal)}</strong></td>
+          <td class="num"></td>
+        </tr>
+      </tfoot>
+    </table>`;
+
+  wrap.querySelectorAll("tr.clickable").forEach((tr) => {
+    tr.addEventListener("click", () => openTenantDrawer(tr.dataset.service));
+  });
+
+  wrap.querySelectorAll("th.sortable").forEach((th) => {
+    th.addEventListener("click", () => {
+      const column = th.dataset.sort;
+      if (sortColumn === column) {
+        sortDirection = sortDirection === "asc" ? "desc" : "asc";
+      } else {
+        sortColumn = column;
+        sortDirection = column === "service_name" ? "asc" : "desc";
+      }
+      renderServicesTableRows();
+    });
+  });
+}
+
+async function reloadServices() {
+  try {
+    const data = await loadServices(currentRange, currentProvider);
+    renderServicesTable(data);
+  } catch (e) {
+    document.getElementById("error-banner").innerHTML = `
+      <div class="banner error"><strong>Erreur de chargement</strong> : ${escapeHtml(e.message)}</div>`;
+  }
+}
+
+function setupRangeToggle() {
+  const buttons = document.querySelectorAll("#range-toggle button");
+  buttons.forEach((btn) => {
+    btn.classList.toggle("active", Number(btn.dataset.range) === currentRange);
+    btn.addEventListener("click", () => {
+      currentRange = Number(btn.dataset.range);
+      buttons.forEach((b) => b.classList.toggle("active", b === btn));
+      reloadServices();
+    });
+  });
+}
+
+function setupProviderToggle() {
+  const buttons = document.querySelectorAll("#provider-toggle button");
+  buttons.forEach((btn) => {
+    btn.classList.toggle("active", btn.dataset.provider === currentProvider);
+    btn.addEventListener("click", () => {
+      currentProvider = btn.dataset.provider;
+      buttons.forEach((b) => b.classList.toggle("active", b === btn));
+      reloadServices();
+    });
+  });
+}
+
+// --- Drawer : détail par tenant d'un service ----------------------------
+
+function openTenantDrawer(serviceName) {
+  document.getElementById("drawer-title").textContent = serviceName;
+  document.getElementById("drawer-sub").textContent = "Chargement…";
+  document.getElementById("drawer-body").innerHTML = `<div class="skeleton">Chargement…</div>`;
+  document.getElementById("tenant-drawer").classList.add("open");
+  document.getElementById("tenant-drawer").setAttribute("aria-hidden", "false");
+  document.getElementById("drawer-backdrop").classList.add("open");
+
+  const params = new URLSearchParams({ range: currentRange });
+  if (currentProvider !== "all") params.set("provider", currentProvider);
+
+  fetch(`/api/services/${encodeURIComponent(serviceName)}/tenants?${params}`)
+    .then((res) => {
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      return res.json();
+    })
+    .then((data) => renderDrawerContent(data))
+    .catch((e) => {
+      document.getElementById("drawer-sub").textContent = "";
+      document.getElementById("drawer-body").innerHTML =
+        `<div class="banner error"><strong>Erreur de chargement</strong> : ${escapeHtml(e.message)}</div>`;
+    });
+}
+
+function renderDrawerContent(data) {
+  const subEl = document.getElementById("drawer-sub");
+  const bodyEl = document.getElementById("drawer-body");
+
+  subEl.textContent = data.mode === "monthly" ? "12 derniers mois" : rangeLabel(data.range_days);
+
+  if (!data.tenants.length) {
+    bodyEl.innerHTML = `<div class="empty-state">Aucun tenant n'a de coût sur ce service pour cette période.</div>`;
+    return;
+  }
+
+  bodyEl.innerHTML = data.tenants
+    .map(
+      (t) => `
+      <div class="resource-row clickable" data-provider="${t.provider}" data-name="${escapeHtml(t.tenant_name)}">
+        <div>
+          <div class="resource-name">
+            <span class="provider-badge ${t.provider}">${providerLabel(t.provider)}</span>
+            ${escapeHtml(t.tenant_name)}
+          </div>
+          <div class="resource-pct">${t.pct.toFixed(1)} %</div>
+        </div>
+        <div class="resource-amount">${formatEUR(t.amount)}</div>
+      </div>`
+    )
+    .join("");
+
+  bodyEl.querySelectorAll(".resource-row.clickable").forEach((row) => {
+    row.addEventListener("click", () => {
+      window.location.href = `/tenant/${row.dataset.provider}/${encodeURIComponent(row.dataset.name)}`;
+    });
+  });
+}
+
+function closeTenantDrawer() {
+  document.getElementById("tenant-drawer").classList.remove("open");
+  document.getElementById("tenant-drawer").setAttribute("aria-hidden", "true");
+  document.getElementById("drawer-backdrop").classList.remove("open");
+}
+
+function setupDrawer() {
+  document.getElementById("drawer-close").addEventListener("click", closeTenantDrawer);
+  document.getElementById("drawer-backdrop").addEventListener("click", closeTenantDrawer);
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") closeTenantDrawer();
+  });
+}
+
+async function init() {
+  try {
+    const data = await loadServices(currentRange, currentProvider);
+    renderServicesTable(data);
+    setupRangeToggle();
+    setupProviderToggle();
+    setupDrawer();
+  } catch (e) {
+    document.getElementById("error-banner").innerHTML = `
+      <div class="banner error"><strong>Erreur de chargement</strong> : ${escapeHtml(e.message)}</div>`;
+    document.getElementById("services-table-wrap").innerHTML = "";
+  }
+}
+
+init();

frontend/static/style.css

@@ -132,11 +132,103 @@ a {
 }
 
 .container {
-  max-width: 1240px;
+  /* width: 100% est nécessaire ici : .page (son parent) est en
+     display:flex, et des marges auto sur l'axe transversal désactivent
+     l'étirement flex par défaut — sans ce width, .container retombe sur
+     un calcul "taille selon son contenu" au lieu de remplir l'espace
+     disponible jusqu'à max-width. */
+  width: 100%;
+  max-width: 1520px;
   margin: 0 auto;
   padding: 28px 32px 64px;
 }
 
+/* ---------------------------------------------------------------- */
+/* Sidebar de navigation */
+/* ---------------------------------------------------------------- */
+
+.app-shell {
+  display: flex;
+  min-height: 100vh;
+  align-items: stretch;
+}
+
+.sidebar {
+  width: 220px;
+  flex: none;
+  background: var(--surface-1);
+  border-right: 1px solid var(--border);
+  padding: 20px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.sidebar-brand {
+  padding: 0 20px 16px;
+  margin: 0 0 12px;
+  font-size: 14px;
+  font-weight: 600;
+  border-bottom: 1px solid var(--border);
+}
+
+.sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 0 12px;
+}
+
+.sidebar-link {
+  display: block;
+  padding: 9px 12px;
+  border-radius: var(--radius-control);
+  color: var(--text-secondary);
+  text-decoration: none;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.sidebar-link:hover {
+  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
+  color: var(--text-primary);
+}
+
+.sidebar-link.active {
+  background: color-mix(in srgb, var(--series-1) 14%, transparent);
+  color: var(--series-1);
+}
+
+.page {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+@media (max-width: 700px) {
+  .app-shell {
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .sidebar {
+    width: auto;
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+    padding: 12px;
+  }
+
+  .sidebar-brand {
+    display: none;
+  }
+
+  .sidebar-nav {
+    flex-direction: row;
+    padding: 0;
+  }
+}
+
 .section-title {
   font-size: 13px;
   font-weight: 600;
@@ -207,23 +299,6 @@ a {
   display: none;
 }
 
-/* ---------------------------------------------------------------- */
-/* Grille de graphiques */
-/* ---------------------------------------------------------------- */
-
-.chart-grid {
-  display: grid;
-  grid-template-columns: 1.4fr 1fr;
-  gap: 16px;
-  align-items: stretch;
-}
-
-@media (max-width: 860px) {
-  .chart-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
 .chart-card {
   padding: 20px 20px 12px;
   display: flex;
@@ -299,14 +374,14 @@ a {
   outline-offset: -1px;
 }
 
-.range-toggle {
+.segmented-toggle {
   display: inline-flex;
   border: 1px solid var(--border);
   border-radius: var(--radius-control);
   overflow: hidden;
 }
 
-.range-toggle button {
+.segmented-toggle button {
   border: none;
   background: transparent;
   color: var(--text-secondary);
@@ -316,11 +391,11 @@ a {
   font-family: inherit;
 }
 
-.range-toggle button + button {
+.segmented-toggle button + button {
   border-left: 1px solid var(--border);
 }
 
-.range-toggle button.active {
+.segmented-toggle button.active {
   background: var(--series-1);
   color: #ffffff;
   font-weight: 500;
@@ -369,6 +444,21 @@ table.data-table {
   white-space: nowrap;
 }
 
+.data-table thead th.sortable {
+  cursor: pointer;
+  user-select: none;
+}
+
+.data-table thead th.sortable:hover {
+  color: var(--text-primary);
+}
+
+.data-table thead th.sorted-asc,
+.data-table thead th.sorted-desc {
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
 .data-table td {
   padding: 10px 12px;
   border-bottom: 1px solid var(--gridline);
@@ -379,6 +469,11 @@ table.data-table {
   border-bottom: none;
 }
 
+.data-table tfoot td {
+  padding: 10px 12px;
+  border-top: 1px solid var(--gridline);
+}
+
 .data-table tbody tr.clickable {
   cursor: pointer;
 }
@@ -578,6 +673,17 @@ table.data-table {
   border-bottom: none;
 }
 
+.resource-row.clickable {
+  cursor: pointer;
+  margin: 0 -8px;
+  padding: 10px 8px;
+  border-radius: var(--radius-control);
+}
+
+.resource-row.clickable:hover {
+  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
+}
+
 .resource-name {
   font-size: 13px;
   overflow-wrap: anywhere;

frontend/static/tenant.js

@@ -68,12 +68,13 @@ function renderKpis(data) {
   if (isMonthly) {
     document.getElementById("kpi-current-label").textContent = `Total — ${p.months.length} derniers mois`;
   } else {
-    document.getElementById("kpi-current-label").textContent = `Total — ${p.range_days} derniers jours`;
+    document.getElementById("kpi-current-label").textContent = `Total — ${rangeLabel(p.range_days)}`;
   }
   document.getElementById("kpi-current").textContent = formatEUR(p.current_total);
 
   if (!isMonthly) {
-    document.getElementById("kpi-previous-label").textContent = `Total — ${p.range_days} jours précédents`;
+    document.getElementById("kpi-previous-label").textContent =
+      p.range_days === 1 ? "Total — veille" : `Total — ${p.range_days} jours précédents`;
     document.getElementById("kpi-previous").textContent = p.has_previous ? formatEUR(p.previous_total) : "—";
 
     const deltaEl = document.getElementById("kpi-delta");
@@ -99,7 +100,7 @@ function renderDailyChart(data) {
 
   document.getElementById("daily-chart-title").textContent = isMonthly
     ? `Coûts mensuels — ${p.months.length} derniers mois`
-    : `Coûts journaliers — ${p.range_days} derniers jours`;
+    : `Coûts journaliers — ${rangeLabel(p.range_days)}`;
 
   if (dailyChart) {
     dailyChart.destroy();

frontend/tenant.html

@@ -9,6 +9,16 @@
 </head>
 <body>
 
+<div class="app-shell">
+<aside class="sidebar">
+  <p class="sidebar-brand">simple-cost-dashboard</p>
+  <nav class="sidebar-nav">
+    <a href="/" class="sidebar-link active">Compte</a>
+    <a href="/services" class="sidebar-link">Services</a>
+  </nav>
+</aside>
+<div class="page">
+
 <header class="topbar">
   <div class="topbar-title">
     <h1 id="tenant-title">Chargement…</h1>
@@ -46,7 +56,8 @@
         <h2 id="daily-chart-title">Coûts journaliers</h2>
         <p class="chart-card-sub">EUR, converti au taux du jour de collecte</p>
       </div>
-      <div class="range-toggle" id="range-toggle">
+      <div class="segmented-toggle" id="range-toggle">
+        <button data-range="1">Aujourd'hui</button>
         <button data-range="7">7 jours</button>
         <button data-range="30">30 jours</button>
         <button data-range="365">1 an</button>
@@ -60,28 +71,28 @@
 
   <p class="section-title" id="services-section-title">Répartition par service (30 derniers jours)</p>
   <div id="services-selection-note" class="selection-note" style="margin: -8px 0 14px;"></div>
-  <div class="chart-grid">
+
-    <div class="card chart-card">
+  <div class="card chart-card" style="margin-bottom: 16px;">
-      <div class="chart-card-header">
+    <div class="chart-card-header">
-        <div>
+      <div>
-          <h2>Top services</h2>
+        <h2>Top services</h2>
-          <p class="chart-card-sub" id="services-chart-sub">&nbsp;</p>
+        <p class="chart-card-sub" id="services-chart-sub">&nbsp;</p>
-        </div>
-      </div>
-      <div class="chart-canvas-wrap">
-        <canvas id="services-chart"></canvas>
       </div>
     </div>
-    <div class="card chart-card">
+    <div class="chart-canvas-wrap">
-      <div class="chart-card-header">
+      <canvas id="services-chart"></canvas>
-        <div>
+    </div>
-          <h2>Détail</h2>
+  </div>
-        </div>
+
-      </div>
+  <div class="card chart-card">
-      <div id="services-table-wrap">
+    <div class="chart-card-header">
-        <div class="skeleton">Chargement…</div>
+      <div>
+        <h2>Détail</h2>
       </div>
     </div>
+    <div id="services-table-wrap">
+      <div class="skeleton">Chargement…</div>
+    </div>
   </div>
 
 </main>
@@ -98,6 +109,9 @@
   <div class="drawer-body" id="drawer-body"></div>
 </aside>
 
+</div>
+</div>
+
 <script src="/static/common.js"></script>
 <script src="/static/tenant.js"></script>
 </body>