108 lines
5.5 KiB
HTML
108 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>V78 Real-Wire Dashboard — V83 Enriched</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
:root{--bg:#0a0e17;--bg2:#111827;--bg3:#1a2234;--bd:#1e293b;--wh:#f1f5f9;--mu:#64748b;--mu2:#94a3b8;--ok:#22c55e;--warn:#f59e0b;--fail:#ef4444;--ac:#fbbf24;--cy:#22d3ee;--font:'Plus Jakarta Sans',sans-serif;--mono:'JetBrains Mono',monospace}
|
|
body{background:var(--bg);color:var(--wh);font-family:var(--font);padding:20px 32px}
|
|
a{color:var(--cy);text-decoration:none}
|
|
h1{font-size:22px;font-weight:800;margin-bottom:6px}
|
|
h1 span{color:var(--ac)}
|
|
.sub{font-size:12px;color:var(--mu);margin-bottom:20px;font-family:var(--mono)}
|
|
.btns{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
|
|
.btn{padding:8px 16px;border:1px solid var(--bd);background:var(--bg2);color:var(--wh);border-radius:6px;font-size:12px;font-weight:600;text-decoration:none}
|
|
.btn:hover{border-color:var(--ac)}
|
|
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:24px}
|
|
.stat{background:var(--bg2);border:1px solid var(--bd);border-radius:10px;padding:16px;position:relative}
|
|
.stat.ok{border-color:var(--ok)}
|
|
.stat.warn{border-color:var(--warn)}
|
|
.stat::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:10px 10px 0 0}
|
|
.stat.ok::before{background:var(--ok)}
|
|
.stat.warn::before{background:var(--warn)}
|
|
.st-l{font-size:10px;color:var(--mu);text-transform:uppercase;letter-spacing:.7px;font-weight:700}
|
|
.st-v{font-size:26px;font-weight:800;margin:6px 0;font-family:var(--mono)}
|
|
.st-v.ok{color:var(--ok)}
|
|
.st-v.warn{color:var(--warn)}
|
|
.st-t{font-size:10px;color:var(--mu2)}
|
|
.st-s{font-size:9px;color:var(--mu);margin-top:6px;font-family:var(--mono);border-top:1px solid var(--bd);padding-top:6px}
|
|
.sec{margin:24px 0 10px;font-size:14px;font-weight:700;color:var(--ac);display:flex;align-items:center;gap:8px}
|
|
.sec::before{content:'';display:block;width:3px;height:16px;background:var(--ac);border-radius:2px}
|
|
.list{background:var(--bg2);border:1px solid var(--bd);border-radius:10px;padding:16px}
|
|
.list-item{display:flex;padding:8px 0;border-bottom:1px solid var(--bd);gap:12px;align-items:center;font-size:12px}
|
|
.list-item:last-child{border:none}
|
|
.list-item .k{font-family:var(--mono);color:var(--wh);font-weight:600;flex:0 0 300px}
|
|
.list-item .r{font-size:11px;color:var(--mu)}
|
|
.badge{font-size:10px;padding:3px 8px;border-radius:4px;font-weight:700;font-family:var(--mono)}
|
|
.b-warn{background:rgba(245,158,11,.15);color:var(--warn)}
|
|
.b-oauth{background:rgba(185,116,240,.15);color:#b794f6}
|
|
.loading{padding:40px;text-align:center;color:var(--mu)}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>V78 <span>Real-Wire Dashboard</span> — V83 Enriched</h1>
|
|
<div class="sub">Doctrine #4 honnête · 11 KPIs wirés avec VRAIE data · zero fake</div>
|
|
<div class="btns">
|
|
<a class="btn" href="/weval-technology-platform.html">← WTP</a>
|
|
<a class="btn" href="/business-kpi-dashboard.php">📊 V83 Dashboard original</a>
|
|
<a class="btn" href="/api/v78-real-wire.php">🔧 V78 JSON raw</a>
|
|
</div>
|
|
|
|
<div class="sec">✅ KPIs Wirés V78 (data réelle serveur)</div>
|
|
<div class="stats" id="wired-stats"><div class="loading">Loading...</div></div>
|
|
|
|
<div class="sec">⚠️ Still WARN (server-side data needed)</div>
|
|
<div class="list" id="warn-list"></div>
|
|
|
|
<div class="sec">🔒 Needs OAuth External (Stripe/Zendesk/CRM)</div>
|
|
<div class="list" id="oauth-list"></div>
|
|
|
|
<div style="margin-top:32px;padding:14px;background:var(--bg2);border:1px solid var(--bd);border-radius:10px;font-size:11px;color:var(--mu)">
|
|
<strong style="color:var(--ac)">Doctrine #4 honnête</strong> — toutes les valeurs OK sont calculées depuis <code>/var/log/nginx/access.log</code>, <code>git log</code>, <code>docker ps</code>, <code>df /</code>.
|
|
Aucune valeur fake. Les KPIs still warn ont des sources réelles mais pipeline complet pas encore connecté.
|
|
</div>
|
|
|
|
<script>
|
|
async function load() {
|
|
try {
|
|
const r = await fetch('/api/v78-real-wire.php?t=' + Date.now());
|
|
const d = await r.json();
|
|
// Stats
|
|
const stats = document.getElementById('wired-stats');
|
|
stats.innerHTML = Object.entries(d.wired || {}).map(([k, v]) => `
|
|
<div class="stat ${v.status}">
|
|
<div class="st-l">${k.replace(/_/g, ' ')}</div>
|
|
<div class="st-v ${v.status}">${typeof v.value === 'number' ? v.value.toLocaleString() : v.value}</div>
|
|
<div class="st-t">target: ${typeof v.target === 'number' ? v.target.toLocaleString() : v.target}</div>
|
|
<div class="st-s">${v.source}</div>
|
|
</div>
|
|
`).join('');
|
|
// Warn list
|
|
document.getElementById('warn-list').innerHTML = Object.entries(d.still_warn || {}).map(([k, v]) => `
|
|
<div class="list-item">
|
|
<div class="k">${k}</div>
|
|
<div class="r">${v}</div>
|
|
<span class="badge b-warn">warn</span>
|
|
</div>
|
|
`).join('');
|
|
// OAuth list
|
|
document.getElementById('oauth-list').innerHTML = Object.entries(d.needs_oauth || {}).map(([k, v]) => `
|
|
<div class="list-item">
|
|
<div class="k">${k}</div>
|
|
<div class="r">${v}</div>
|
|
<span class="badge b-oauth">oauth</span>
|
|
</div>
|
|
`).join('');
|
|
} catch(e) {
|
|
document.getElementById('wired-stats').innerHTML = '<div class="loading">Error: ' + e.message + '</div>';
|
|
}
|
|
}
|
|
load();
|
|
setInterval(load, 60000);
|
|
</script>
|
|
</body>
|
|
</html>
|