first (big) draft

2026-08-07 17:19:49 +02:00
parent 2974a3a4cd
commit 9e78dfa4f2
24 changed files with 3975 additions and 1 deletions
@@ -0,0 +1,76 @@
+<!doctype html>
+<html lang="fr">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>simple-cost-dashboard</title>
+<link rel="stylesheet" href="/static/style.css">
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
+</head>
+<body>
+
+<header class="topbar">
+  <div class="topbar-title">
+    <h1>simple-cost-dashboard</h1>
+    <span class="breadcrumb">coûts AWS / Azure, tous tenants</span>
+  </div>
+</header>
+
+<main class="container">
+
+  <div id="error-banner"></div>
+
+  <div class="kpi-row" id="kpi-row">
+    <div class="card kpi-card">
+      <p class="kpi-label">Coûts — mois en cours</p>
+      <p class="kpi-value" id="kpi-total">—</p>
+    </div>
+    <div class="card kpi-card">
+      <p class="kpi-label">AWS — mois en cours</p>
+      <p class="kpi-value" id="kpi-aws">—</p>
+    </div>
+    <div class="card kpi-card">
+      <p class="kpi-label">Azure — mois en cours</p>
+      <p class="kpi-value" id="kpi-azure">—</p>
+    </div>
+    <div class="card kpi-card">
+      <p class="kpi-label">Tenants en échec de collecte</p>
+      <p class="kpi-value" id="kpi-errors">—</p>
+    </div>
+  </div>
+
+  <p class="section-title">Évolution mensuelle (12 mois glissants)</p>
+  <div class="card chart-card">
+    <div class="chart-card-header">
+      <div>
+        <h2>Coûts par mois</h2>
+        <p class="chart-card-sub">Total AWS + Azure, EUR</p>
+      </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>
+    </div>
+  </div>
+
+  <p class="section-title">Tenants</p>
+  <div class="card" style="padding: 16px 20px 4px;">
+    <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom: 4px; gap: 12px; flex-wrap: wrap;">
+      <input type="search" id="tenant-search" class="search-input" placeholder="Rechercher un tenant…">
+      <div id="month-selection-note" class="selection-note"></div>
+    </div>
+    <p class="chart-card-sub" style="margin: 0 0 12px;">Clique un ou plusieurs mois dans le graphe ci-dessus pour filtrer la table sur cette période.</p>
+    <div id="tenants-table-wrap">
+      <div class="skeleton">Chargement…</div>
+    </div>
+  </div>
+
+</main>
+
+<script src="/static/common.js"></script>
+<script src="/static/app.js"></script>
+</body>
+</html>