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/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"><span class="legend-dot" style="background:var(--provider-azure)"></span>Azure</span>
+      <span class="legend-item" id="legend-aws"><span class="legend-dot" style="background:var(--provider-aws)"></span>AWS</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>