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/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="chart-card-header">
-        <div>
-          <h2>Top services</h2>
-          <p class="chart-card-sub" id="services-chart-sub">&nbsp;</p>
-        </div>
-      </div>
-      <div class="chart-canvas-wrap">
-        <canvas id="services-chart"></canvas>
+
+  <div class="card chart-card" style="margin-bottom: 16px;">
+    <div class="chart-card-header">
+      <div>
+        <h2>Top services</h2>
+        <p class="chart-card-sub" id="services-chart-sub">&nbsp;</p>
       </div>
     </div>
-    <div class="card chart-card">
-      <div class="chart-card-header">
-        <div>
-          <h2>Détail</h2>
-        </div>
-      </div>
-      <div id="services-table-wrap">
-        <div class="skeleton">Chargement…</div>
+    <div class="chart-canvas-wrap">
+      <canvas id="services-chart"></canvas>
+    </div>
+  </div>
+
+  <div class="card chart-card">
+    <div class="chart-card-header">
+      <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>