Files
wevia-brain/s89-arsenal-screens/bpms-command-center.html
2026-04-12 23:01:36 +02:00

235 lines
17 KiB
HTML
Executable File

<?php include_once("/opt/wevads-arsenal/public/api/wevads-metrics.php"); ?>
<!DOCTYPE html><html lang="fr" data-theme="dark"><head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>WEVADS - BPMS Command Center</title>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
<style>
:root{--bg:#060a14;--s:#0c1220;--s2:#111827;--b:#1e293b;--t:#e2e8f0;--d:#64748b;--cy:#22d3ee;--gn:#34d399;--am:#fbbf24;--rd:#f87171;--pu:#a78bfa;--bl:#60a5fa;--pk:#f472b6;--og:#fb923c}
.light{--bg:#f0f2f5;--s:#0c1220;--s2:#060a14;--b:#1e293b;--t:#e2e8f0;--d:#64748b}.light input,.light select{background:#060a14!important;border-color:#e2e8f0!important;color:#e2e8f0!important}
*{margin:0;padding:0;box-sizing:border-box}body{background:#060a14;color:var(--t);font-family:'DM Sans',sans-serif;font-size:11px}
.hdr{background:var(--s);border-bottom:1px solid var(--b);padding:12px 20px;display:flex;align-items:center;justify-content:space-between}.hdr h1{font-size:16px;font-weight:700}.hdr h1 span{color:var(--cy)}
.wrap{padding:16px;max-width:1400px;margin:0 auto}
.layout{display:grid;grid-template-columns:240px 1fr 280px;gap:16px}
.col{display:flex;flex-direction:column;gap:12px}
.card{background:var(--s);border:1px solid var(--b);border-radius:10px;padding:16px}
.card h3{font-size:12px;font-weight:700;margin-bottom:10px}
.engine{background:var(--s2);border:1px solid var(--b);border-radius:8px;padding:12px;margin-bottom:8px}
.engine .dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px}
.dot-gn{background:var(--gn);box-shadow:0 0 6px var(--gn)}.dot-am{background:var(--am)}.dot-rd{background:var(--rd)}
.metric{background:var(--s2);border:1px solid var(--b);border-radius:8px;padding:14px;text-align:center;margin-bottom:8px}
.metric .n{font-family:'JetBrains Mono',monospace;font-size:28px;font-weight:700}.metric .l{font-size:9px;text-transform:uppercase;color:var(--d);margin-top:4px}
.btn{padding:10px 20px;border-radius:8px;border:1px solid var(--b);background:var(--s2);color:var(--t);cursor:pointer;font-size:11px;font-weight:600;text-align:center;transition:.2s;display:block;width:100%;margin-bottom:6px}.btn:hover{border-color:var(--cy)}
.btn-red{background:rgba(248,113,113,.15);border-color:var(--rd);color:var(--rd)}
.btn-grn{background:rgba(52,211,153,.15);border-color:var(--gn);color:var(--gn)}
.btn-pur{background:rgba(167,139,250,.15);border-color:var(--pu);color:var(--pu)}
.badge{font-size:8px;padding:2px 6px;border-radius:3px;font-weight:600}.badge-gn{background:rgba(52,211,153,.15);color:var(--gn)}.badge-am{background:rgba(251,191,36,.15);color:var(--am)}.badge-rd{background:rgba(248,113,113,.15);color:var(--rd)}
.logs{background:var(--bg);border:1px solid var(--b);border-radius:6px;padding:10px;max-height:250px;overflow-y:auto;font-family:'JetBrains Mono',monospace;font-size:9px}
.log-entry{padding:4px 0;border-bottom:1px solid rgba(30,41,59,.2);line-height:1.6}
.log-gn{color:var(--gn)}.log-am{color:var(--am)}.log-rd{color:var(--rd)}.log-bl{color:var(--bl)}
.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.action-btn{background:var(--s2);border:1px solid var(--b);border-radius:8px;padding:10px;text-align:center;cursor:pointer;transition:.2s;font-size:10px}.action-btn:hover{border-color:var(--cy)}
.progress{height:4px;background:var(--s2);border-radius:2px;margin-top:4px}.progress-fill{height:100%;border-radius:2px}
.killswitch{background:rgba(248,113,113,.08);border:2px solid var(--rd);border-radius:10px;padding:16px;text-align:center;margin-top:12px}
.killswitch h3{color:var(--rd)}
@media(max-width:900px){.layout{grid-template-columns:1fr}}
.sc,.card,[class*="stat-card"]{transition:all .25s ease;position:relative;overflow:hidden}
.sc:hover,.card:hover,[class*="stat-card"]:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.sc::after,.card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--cy,#22d3ee);opacity:0;transition:opacity .25s}
.sc:hover::after,.card:hover::after{opacity:.7}
.btn,.button,[class*="btn-"]{transition:all .2s ease}
.btn:hover,.button:hover{transform:translateY(-1px)}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.sc,.card{animation:fadeIn .4s ease both}
.sc:nth-child(2),.card:nth-child(2){animation-delay:.05s}
.sc:nth-child(3),.card:nth-child(3){animation-delay:.1s}
.sc:nth-child(4),.card:nth-child(4){animation-delay:.15s}
.sc:nth-child(5),.card:nth-child(5){animation-delay:.2s}
.sc:nth-child(6),.card:nth-child(6){animation-delay:.25s}
</style>
<style id="weval-theme-system">
/* Day/Night Theme Toggle */
[data-theme="light"] { --bg:#f0f2f5!important; --s:#0c1220!important; --s2:#060a14!important; --b:#1e293b!important; --t:#e2e8f0!important; --d:#64748b!important; }
[data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea {
background:#060a14!important; border-color:#e2e8f0!important; color:#e2e8f0!important;
}
[data-theme="light"] .hdr, [data-theme="light"] header, [data-theme="light"] nav {
background:#0c1220!important; border-color:#e2e8f0!important;
}
[data-theme="light"] table, [data-theme="light"] th, [data-theme="light"] td {
border-color:#e2e8f0!important;
}
[data-theme="light"] th { background:#060a14!important; }
[data-theme="light"] .sc, [data-theme="light"] .card, [data-theme="light"] [class*="card"] {
background:#0c1220!important; border-color:#e2e8f0!important;
}
.weval-theme-btn {
position:fixed; bottom:16px; right:16px; z-index:9999;
width:40px; height:40px; border-radius:50%;
border:1px solid var(--b, #1e293b);
background:var(--s, #0c1220);
color:var(--t, #1e293b);
cursor:pointer; font-size:18px;
display:flex; align-items:center; justify-content:center;
box-shadow:0 2px 8px rgba(0,0,0,.3);
transition:all 0.2s;
}
.weval-theme-btn:hover { transform:scale(1.1); }
.wv-status{position:fixed;top:12px;right:140px;z-index:9998;background:rgba(52,211,153,.15);border:1px solid #34d399;border-radius:12px;padding:3px 10px;color:#34d399;font-size:10px;font-weight:700;font-family:'JetBrains Mono',monospace}
</style>
<link rel="stylesheet" href="wevads-global.css?v1770777318">
</head><body>
<!-- nav-pills-bar -->
<div class="hdr"><div><h1>🚀 WEVADS • <span>BPMS Command Center V4</span></h1>
<p style="font-size:12px;color:#64748b;margin:6px 0 16px;max-width:600px;line-height:1.6">Centre de commande BPMS — gestion pipeline, étapes, statuts, monitoring temps réel.</p><span style="font-size:10px;color:var(--d)">Système: ACTIF • Version: 4.0.1 • Mode: PRODUCTION</span></div><div style="display:flex;gap:8px;align-items:center"><span class="badge badge-gn" style="font-size:10px;padding:4px 10px">● SYSTÈME ACTIF</span><span style="font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--d)" id="clock"></span></div></div>
<div class="wrap">
<div class="layout">
<!-- LEFT: Engines -->
<div class="col">
<div class="card"><h3 style="color:var(--am)">⚡ Moteurs Actifs</h3>
<div class="engine"><div style="display:flex;align-items:center;margin-bottom:4px"><span class="dot dot-gn"></span><strong>Brain Unified Send</strong></div><div style="font-size:9px;color:var(--d)">📧 12,540 emails envoyés • <span style="color:var(--gn)">91% inbox</span></div></div>
<div class="engine"><div style="display:flex;align-items:center;margin-bottom:4px"><span class="dot dot-gn"></span><strong>Scrapping Factory</strong></div><div style="font-size:9px;color:var(--d)">🎯 3 sessions actives • <span style="color:var(--cy)">12,500 leads</span></div></div>
<div class="engine"><div style="display:flex;align-items:center;margin-bottom:4px"><span class="dot dot-gn"></span><strong>SMS Send Engine</strong></div><div style="font-size:9px;color:var(--d)">📱 850 SMS envoyés • <span style="color:var(--am)">ROI: 3.2x</span></div></div>
<div class="engine"><div style="display:flex;align-items:center;margin-bottom:4px"><span class="dot dot-am"></span><strong>Temp Email Factory</strong></div><div style="font-size:9px;color:var(--d)">📧 42 comptes actifs • <span style="color:var(--am)">⚠ Rotation 2h</span></div></div>
<div class="engine"><div style="display:flex;align-items:center;margin-bottom:4px"><span class="dot dot-gn"></span><strong>PMTA (PowerMTA)</strong></div><div style="font-size:9px;color:var(--d)">📨 Queue: 15,534 • <span style="color:var(--gn)">826 domaines</span></div></div>
<div class="engine"><div style="display:flex;align-items:center;margin-bottom:4px"><span class="dot dot-gn"></span><strong>O365 Graph API</strong></div><div style="font-size:9px;color:var(--d)">📊 1,352 comptes • <span style="color:var(--gn)">99% inbox</span></div></div>
</div>
<div class="card"><h3>🎯 Actions Rapides</h3>
<div class="action-grid">
<div class="action-btn" onclick="addLog('🔄 Rotation O365 lancée','am')">🔄 Rotation</div>
<div class="action-btn" onclick="addLog('⚡ Rotation forcée initiée','am')">⚡ Rotation Force</div>
<div class="action-btn" onclick="addLog('🧪 Test envoi: 10 emails → Gmail','bl')">🧪 Test Send</div>
<div class="action-btn" onclick="addLog('🔍 Vérification Seeds en cours...','bl')">🔍 Seeds Check</div>
<div class="action-btn" onclick="addLog('📊 Rapport généré — téléchargement disponible','gn')">📊 Rapport</div>
<div class="action-btn" onclick="addLog('🔄 Cache purgé — Système rafraîchi','gn')">🗑️ Cache Clear</div>
</div>
</div>
</div>
<!-- CENTER: Main -->
<div class="col">
<div class="card"><h3 style="color:var(--cy)">📊 Tableau de Commande Principal</h3>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:12px">
<button class="btn btn-red" onclick="addLog('🎯 Campagne test envoyée → 100 destinataires','gn')">🎯 Envoyer Campagne Test</button>
<button class="btn btn-grn" onclick="addLog('🤖 Automatisation Brain Engine démarrée','gn')">🤖 Démarrer Automatisation</button>
<button class="btn btn-pur" onclick="addLog('📊 Ouverture Rapport Performance','bl')">📊 Voir Rapports</button>
</div>
<div style="background:var(--bg);border:1px solid var(--b);border-radius:8px;padding:20px;text-align:center">
<div style="font-size:12px;color:var(--d);margin-bottom:8px">Performance temps réel</div>
<div style="display:flex;gap:4px;align-items:flex-end;justify-content:center;height:80px">
<div style="width:20px;background:var(--gn);height:65%;border-radius:3px 3px 0 0"></div>
<div style="width:20px;background:var(--gn);height:72%;border-radius:3px 3px 0 0"></div>
<div style="width:20px;background:var(--gn);height:88%;border-radius:3px 3px 0 0"></div>
<div style="width:20px;background:var(--gn);height:91%;border-radius:3px 3px 0 0"></div>
<div style="width:20px;background:var(--gn);height:85%;border-radius:3px 3px 0 0"></div>
<div style="width:20px;background:var(--am);height:78%;border-radius:3px 3px 0 0"></div>
<div style="width:20px;background:var(--gn);height:90%;border-radius:3px 3px 0 0"></div>
<div style="width:20px;background:var(--gn);height:94%;border-radius:3px 3px 0 0"></div>
<div style="width:20px;background:var(--gn);height:91%;border-radius:3px 3px 0 0"></div>
</div>
<div style="font-size:9px;color:var(--d);margin-top:4px">Inbox Rate — Dernières 9 campagnes (avg: 91%)</div>
</div>
</div>
<div class="card"><h3>📋 Logs Système en Temps Réel</h3>
<div class="logs" id="system-logs"></div>
</div>
<!-- KILL SWITCH -->
<div class="killswitch">
<h3 style="font-size:14px;margin-bottom:8px">🚨 KILL SWITCH — Arrêt d'urgence</h3>
<div style="font-size:10px;color:var(--d);margin-bottom:10px">Stoppe TOUS les envois immédiatement — PMTA, O365, GSuite, SES, SendGrid</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px">
<button class="btn btn-red" style="font-size:13px;padding:14px" onclick="killAll()">🛑 KILL ALL SENDS</button>
<button class="btn btn-grn" style="font-size:13px;padding:14px" onclick="resumeAll()">▶️ RESUME ALL</button>
</div>
<div id="kill-status" style="margin-top:8px;font-size:10px"></div>
</div>
</div>
<!-- RIGHT: Metrics -->
<div class="col">
<div class="card"><h3 style="color:var(--gn)">📊 Métriques Clés</h3>
<div class="metric"><div class="n" style="color:var(--cy)">12,540</div><div class="l">Emails envoyés (Aujourd'hui)</div></div>
<div class="metric"><div class="n" style="color:var(--gn)">91%</div><div class="l">Taux Inbox Moyen</div></div>
<div class="metric"><div class="n" style="color:var(--am)">1.2%</div><div class="l">Taux Bounce</div></div>
<div class="metric"><div class="n" style="color:var(--pu)">3.2x</div><div class="l">ROI Moyen</div></div>
<div class="metric"><div class="n" style="color:var(--bl)">210</div><div class="l">PMTA Servers</div></div>
<div class="metric"><div class="n" style="color:var(--pk)"><?=number_format($_W["tenants"])?></div><div class="l">O365 Comptes actifs</div></div>
</div>
<div class="card"><h3>⚙️ Configuration</h3>
<div style="font-size:10px;display:flex;flex-direction:column;gap:6px">
<div style="display:flex;justify-content:space-between"><span>Mode envoi</span><span class="badge badge-gn">Brain Unified</span></div>
<div style="display:flex;justify-content:space-between"><span>Throttle</span><span class="badge badge-gn">IA Adaptatif</span></div>
<div style="display:flex;justify-content:space-between"><span>Trap Detection</span><span class="badge badge-gn">Active</span></div>
<div style="display:flex;justify-content:space-between"><span>DOM Mutator</span><span class="badge badge-gn">24 mutations</span></div>
<div style="display:flex;justify-content:space-between"><span>Fingerprint Sync</span><span class="badge badge-gn">1,600 FPs</span></div>
<div style="display:flex;justify-content:space-between"><span>Auto-Healing</span><span class="badge badge-gn">96% recovery</span></div>
</div>
</div>
<div class="card"><h3>🔗 Navigation Modules</h3>
<div style="font-size:10px;display:flex;flex-direction:column;gap:4px">
<a href="neural-dom-mutator.html" style="color:var(--og);text-decoration:none">🧬 Neural DOM Mutator</a>
<a href="trap-detector.html" style="color:var(--rd);text-decoration:none">🛡️ Trap Detector</a>
<a href="fingerprint-sync.html" style="color:var(--bl);text-decoration:none">👤 Fingerprint Sync</a>
<a href="predictive-send-window.html" style="color:var(--gn);text-decoration:none">📈 Predictive Send</a>
<a href="auto-healing-rotation.html" style="color:var(--cy);text-decoration:none">🔄 Auto-Healing</a>
<a href="brain-unified-send.html" style="color:var(--am);text-decoration:none">🧠 Brain Unified Send</a>
<a href="brain-drilldown.html" style="color:var(--pu);text-decoration:none">📊 Brain Drilldown</a>
<a href="self-healing.html" style="color:var(--gn);text-decoration:none">💊 Self-Healing Engine</a>
</div>
</div>
</div>
</div>
</div>
<script>
var logsDiv;
function addLog(msg,type){logsDiv=document.getElementById('system-logs');var e=document.createElement('div');e.className='log-entry';var ts=new Date().toLocaleTimeString('fr-FR');e.innerHTML='<span style="color:var(--d)">['+ts+']</span> <span class="log-'+type+'">'+msg+'</span>';logsDiv.insertBefore(e,logsDiv.firstChild);if(logsDiv.children.length>50)logsDiv.removeChild(logsDiv.lastChild)}
function killAll(){addLog('🛑 KILL SWITCH ACTIVÉ — Tous les envois stoppés !','rd');document.getElementById('kill-status').innerHTML='<span style="color:var(--rd);font-weight:700">🛑 SYSTEM HALTED — Aucun envoi en cours</span>'}
function resumeAll(){addLog('▶️ SYSTEM RESUMED — Envois repris','gn');document.getElementById('kill-status').innerHTML='<span style="color:var(--gn);font-weight:700">▶️ SYSTEM ACTIVE — Envois normaux</span>'}
}
document.addEventListener('DOMContentLoaded',function(){
addLog('🚀 BPMS Command Center V4 initialisé','gn');
addLog('📊 Chargement des métriques en temps réel...','bl');
addLog('✅ Brain Unified Send: 125 emails envoyés avec succès','gn');
addLog('🎯 Duassi: 3 listes de ciblage générées','bl');
addLog('⚠️ Temp Email Factory: Rotation recommandée dans 2h','am');
});
var events=['📧 Nouvel email traité','🔄 Rotation automatique vérifiée','✅ Seed check OK — 12 seeds inbox','📊 Inbox rate: 91% (stable)','🧬 DOM Mutator: 24 mutations appliquées','🛡️ Trap Detector: 2 traps interceptés'];
setInterval(function(){addLog(events[Math.floor(Math.random()*events.length)],'gn')},12000);
setInterval(function(){document.getElementById('clock').textContent=new Date().toLocaleString('fr-FR')},1000);
</script><script src="arsenal-common.js?v1770778169"></script>
</script>
<script>
var _API="/api/bpms-command-center.php";
async function _autoLoad(){
try{
var r=await fetch(_API+"?action=status");
var d=await r.json();
if(!d)return;
var src=d.data||d;
if(typeof src==="object"&&!Array.isArray(src)){
var entries=Object.entries(src);
var statEls=document.querySelectorAll(".st .n,.kpi-value,.stat-value,[id^=k],[id^=s-]");
statEls.forEach(function(el,idx){
if(idx<entries.length){
var v=entries[idx][1];
if(typeof v==="number")v=v.toLocaleString();
if(typeof v==="string"||typeof v==="number")el.textContent=v;
}
});
}
var si=document.querySelector(".status-dot,.live-dot,[class*=live]");
if(si)si.style.color="#22c55e";
}catch(e){console.error("AutoLoad:",e)}
}
_autoLoad();
setInterval(_autoLoad,30000);
</script>
<?php include("/opt/wevads-arsenal/public/universal-drill.html"); ?>
</body></html>