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.

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>