1073 lines
37 KiB
PHP
1073 lines
37 KiB
PHP
<?php
|
||
// ═══════════════════════════════════════════════════════════════════════════
|
||
// SYSTEM FLOWS - E2E Process Flow orchestré par IA
|
||
// ═══════════════════════════════════════════════════════════════════════════
|
||
|
||
// Fetch real data from DB
|
||
$db = null;
|
||
try {
|
||
$db = new PDO("pgsql:host=localhost;dbname=adx_system", "root", "");
|
||
} catch (Exception $e) {}
|
||
|
||
// Stats
|
||
$stats = [
|
||
'o365' => ['count' => 895, 'ready' => 895, 'rate' => 0],
|
||
'mta' => ['count' => 0, 'pools' => 3, 'rate' => 0],
|
||
'campaigns' => ['count' => 19, 'configured' => 19, 'rate' => 0],
|
||
'sending' => ['count' => 5, 'live' => 5, 'rate' => 0],
|
||
'tracking' => ['server' => '151.80.235.110', 'rate' => 0],
|
||
'done' => ['count' => 11, 'sent' => 78500, 'opens' => 22950, 'clicks' => 3378],
|
||
'seeds' => ['count' => 51246, 'active' => 0],
|
||
'tests' => ['count' => 38, 'running' => 67],
|
||
'brain' => ['providers' => 11],
|
||
];
|
||
|
||
if ($db) {
|
||
try {
|
||
$r = $db->query("SELECT COUNT(*) FROM office_accounts WHERE status = 'ready'");
|
||
if ($r) $stats['o365']['count'] = $r->fetchColumn() ?: 895;
|
||
|
||
$r = $db->query("SELECT COUNT(*) FROM mta_servers WHERE status = 'active'");
|
||
if ($r) $stats['mta']['count'] = $r->fetchColumn() ?: 0;
|
||
|
||
$r = $db->query("SELECT COUNT(*) FROM campaigns");
|
||
if ($r) $stats['campaigns']['count'] = $r->fetchColumn() ?: 19;
|
||
} catch (Exception $e) {}
|
||
}
|
||
?>
|
||
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>System Flows - E2E Process</title>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
font-family: 'Segoe UI', system-ui, sans-serif;
|
||
background: #0a0a12;
|
||
color: #fff;
|
||
min-height: 100vh;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
/* Header */
|
||
.header {
|
||
background: linear-gradient(90deg, rgba(255,50,100,0.1), rgba(0,255,255,0.1));
|
||
border-bottom: 1px solid rgba(0,255,255,0.2);
|
||
padding: 12px 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.header-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
.header-title .badge {
|
||
background: linear-gradient(135deg, #ff3366, #ff6b35);
|
||
padding: 6px 15px;
|
||
border-radius: 20px;
|
||
font-size: 0.8em;
|
||
font-weight: 700;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.header-title h1 { font-size: 1.1em; color: #fff; }
|
||
|
||
.header-labels {
|
||
display: flex;
|
||
gap: 40px;
|
||
}
|
||
.h-label {
|
||
text-align: center;
|
||
font-size: 0.7em;
|
||
color: #888;
|
||
text-transform: lowercase;
|
||
}
|
||
|
||
.header-actions { display: flex; gap: 10px; }
|
||
.btn {
|
||
padding: 8px 15px;
|
||
border: none;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
font-size: 0.75em;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
text-decoration: none;
|
||
transition: all 0.3s;
|
||
}
|
||
.btn-p { background: #0ff; color: #000; }
|
||
.btn-s { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; }
|
||
|
||
/* Main Flow Container */
|
||
.flow-main {
|
||
padding: 30px 20px;
|
||
min-width: 1400px;
|
||
}
|
||
|
||
/* E2E Process Definition Section */
|
||
.e2e-definition {
|
||
background: linear-gradient(135deg, rgba(191,0,255,0.1), rgba(0,255,255,0.05));
|
||
border: 1px solid rgba(191,0,255,0.3);
|
||
border-radius: 15px;
|
||
padding: 20px;
|
||
margin-bottom: 25px;
|
||
}
|
||
.e2e-title {
|
||
font-size: 1em;
|
||
color: #0f8;
|
||
margin-bottom: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.e2e-config {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 15px;
|
||
}
|
||
.config-item {
|
||
background: rgba(0,0,0,0.3);
|
||
border: 1px solid rgba(255,255,255,0.1);
|
||
border-radius: 8px;
|
||
padding: 12px;
|
||
}
|
||
.config-item .label {
|
||
font-size: 0.7em;
|
||
color: #888;
|
||
margin-bottom: 5px;
|
||
}
|
||
.config-item .value {
|
||
font-size: 0.9em;
|
||
color: #fff;
|
||
font-weight: 600;
|
||
}
|
||
.config-item .value.ai {
|
||
color: #0f8;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
}
|
||
|
||
/* Flow Row */
|
||
.flow-row {
|
||
display: flex;
|
||
align-items: stretch;
|
||
gap: 0;
|
||
position: relative;
|
||
}
|
||
|
||
/* Flow Block */
|
||
.flow-block {
|
||
position: relative;
|
||
min-width: 160px;
|
||
flex: 1;
|
||
}
|
||
|
||
.block-card {
|
||
background: #0d0d18;
|
||
border: 2px solid var(--bc, #0ff);
|
||
border-radius: 12px;
|
||
padding: 20px 15px;
|
||
min-height: 140px;
|
||
position: relative;
|
||
transition: all 0.3s;
|
||
cursor: pointer;
|
||
}
|
||
.block-card:hover {
|
||
box-shadow: 0 0 25px color-mix(in srgb, var(--bc) 40%, transparent);
|
||
transform: translateY(-3px);
|
||
}
|
||
|
||
.block-card.red { --bc: #ff3366; }
|
||
.block-card.green { --bc: #00ff88; }
|
||
.block-card.cyan { --bc: #00ffff; }
|
||
.block-card.purple { --bc: #bf00ff; }
|
||
.block-card.orange { --bc: #f59e0b; }
|
||
.block-card.yellow { --bc: #f59e0b; }
|
||
.block-card.pink { --bc: #ec4899; }
|
||
|
||
/* Rate Badge */
|
||
.rate-badge {
|
||
position: absolute;
|
||
top: -10px;
|
||
right: 15px;
|
||
background: var(--bc);
|
||
color: #000;
|
||
padding: 3px 10px;
|
||
border-radius: 10px;
|
||
font-size: 0.7em;
|
||
font-weight: 700;
|
||
}
|
||
.rate-badge.live {
|
||
background: #00ff88;
|
||
animation: pulse 1.5s infinite;
|
||
}
|
||
@keyframes pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.6; }
|
||
}
|
||
|
||
/* Block Content */
|
||
.block-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-bottom: 12px;
|
||
}
|
||
.block-icon i {
|
||
font-size: 1.2em;
|
||
color: var(--bc);
|
||
}
|
||
.block-icon span {
|
||
font-size: 0.85em;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
}
|
||
|
||
.block-value {
|
||
font-size: 2.5em;
|
||
font-weight: 700;
|
||
color: #fff;
|
||
line-height: 1;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.block-label {
|
||
font-size: 0.7em;
|
||
color: #666;
|
||
}
|
||
|
||
.block-sub {
|
||
font-size: 0.65em;
|
||
color: #888;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
/* Arrow Connector */
|
||
.arrow-connector {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 60px;
|
||
position: relative;
|
||
}
|
||
.arrow-line {
|
||
width: 100%;
|
||
height: 3px;
|
||
background: linear-gradient(90deg, var(--c1, #0ff), var(--c2, #0ff));
|
||
position: relative;
|
||
}
|
||
.arrow-line::after {
|
||
content: '';
|
||
position: absolute;
|
||
right: -8px;
|
||
top: -6px;
|
||
border: 8px solid transparent;
|
||
border-left-color: var(--c2);
|
||
}
|
||
.arrow-label {
|
||
position: absolute;
|
||
top: -18px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
font-size: 0.6em;
|
||
color: var(--c2);
|
||
white-space: nowrap;
|
||
background: #0a0a12;
|
||
padding: 0 5px;
|
||
}
|
||
.arrow-rate {
|
||
position: absolute;
|
||
bottom: -18px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
font-size: 0.6em;
|
||
color: #888;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* Done Block - Special */
|
||
.done-block {
|
||
background: linear-gradient(135deg, #0d0d18, #12121f);
|
||
}
|
||
.done-stats {
|
||
display: flex;
|
||
gap: 15px;
|
||
margin-top: 10px;
|
||
font-size: 0.7em;
|
||
}
|
||
.done-stat {
|
||
text-align: center;
|
||
}
|
||
.done-stat .v { font-weight: 700; color: #fff; }
|
||
.done-stat .l { color: #666; font-size: 0.85em; }
|
||
|
||
.done-link {
|
||
margin-top: 10px;
|
||
font-size: 0.65em;
|
||
color: #0ff;
|
||
cursor: pointer;
|
||
}
|
||
.done-link:hover { text-decoration: underline; }
|
||
|
||
/* Stats Row (Bottom) */
|
||
.stats-row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 20px;
|
||
margin-top: 25px;
|
||
padding-top: 20px;
|
||
border-top: 1px dashed rgba(0,255,255,0.2);
|
||
position: relative;
|
||
}
|
||
|
||
.feedback-label {
|
||
position: absolute;
|
||
left: 200px;
|
||
top: -10px;
|
||
background: #0a0a12;
|
||
padding: 0 10px;
|
||
font-size: 0.7em;
|
||
color: #f59e0b;
|
||
}
|
||
.feedback-label-right {
|
||
position: absolute;
|
||
right: 100px;
|
||
top: -10px;
|
||
background: #0a0a12;
|
||
padding: 0 10px;
|
||
font-size: 0.7em;
|
||
color: #bf00ff;
|
||
}
|
||
|
||
.feedback-arrows {
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
color: #0ff;
|
||
font-size: 0.8em;
|
||
}
|
||
.feedback-arrows i { animation: bounce 1s infinite; }
|
||
@keyframes bounce {
|
||
0%, 100% { transform: translateY(0); }
|
||
50% { transform: translateY(-3px); }
|
||
}
|
||
|
||
.stat-card {
|
||
background: #12121f;
|
||
border: 2px solid var(--bc, #bf00ff);
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
min-width: 180px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
position: relative;
|
||
}
|
||
.stat-card:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 0 20px color-mix(in srgb, var(--bc) 30%, transparent);
|
||
}
|
||
.stat-card .icon {
|
||
font-size: 1.5em;
|
||
color: var(--bc);
|
||
margin-bottom: 8px;
|
||
}
|
||
.stat-card .value {
|
||
font-size: 2em;
|
||
font-weight: 700;
|
||
color: #fff;
|
||
}
|
||
.stat-card .label {
|
||
font-size: 0.7em;
|
||
color: #888;
|
||
margin-top: 3px;
|
||
}
|
||
.stat-card .sub {
|
||
font-size: 0.65em;
|
||
color: #666;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
/* Block Action Button */
|
||
.block-action {
|
||
margin-top: 12px;
|
||
}
|
||
.block-btn {
|
||
background: var(--bc);
|
||
color: #000;
|
||
border: none;
|
||
padding: 6px 15px;
|
||
border-radius: 5px;
|
||
font-size: 0.7em;
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
.block-btn:hover { transform: scale(1.05); }
|
||
|
||
/* Overlay */
|
||
.overlay {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0,0,0,0.7);
|
||
z-index: 999;
|
||
}
|
||
.overlay.show { display: block; }
|
||
|
||
/* Drilldown Panel - FIXED */
|
||
.drilldown {
|
||
display: none;
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
background: #0d0d18;
|
||
border: 2px solid var(--bc, #0ff);
|
||
border-radius: 15px;
|
||
padding: 25px;
|
||
min-width: 500px;
|
||
max-width: 90vw;
|
||
max-height: 80vh;
|
||
overflow-y: auto;
|
||
z-index: 1000;
|
||
box-shadow: 0 0 50px rgba(0,0,0,0.8);
|
||
}
|
||
.drilldown.show { display: block; }
|
||
|
||
.drilldown-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
padding-bottom: 15px;
|
||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||
}
|
||
.drilldown-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
font-size: 1.1em;
|
||
color: var(--bc);
|
||
}
|
||
.drilldown-close {
|
||
background: none;
|
||
border: none;
|
||
color: #f36;
|
||
font-size: 1.5em;
|
||
cursor: pointer;
|
||
padding: 5px 10px;
|
||
}
|
||
.drilldown-close:hover {
|
||
color: #fff;
|
||
background: #f36;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.drill-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 15px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.drill-card {
|
||
background: rgba(0,0,0,0.3);
|
||
border: 1px solid rgba(255,255,255,0.1);
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
text-align: center;
|
||
}
|
||
.drill-card .v {
|
||
font-size: 2em;
|
||
font-weight: 700;
|
||
color: var(--bc);
|
||
}
|
||
.drill-card .l {
|
||
font-size: 0.75em;
|
||
color: #888;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.drill-section {
|
||
margin-top: 20px;
|
||
}
|
||
.drill-section h4 {
|
||
color: #888;
|
||
font-size: 0.85em;
|
||
margin-bottom: 12px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||
}
|
||
|
||
.drill-list {
|
||
max-height: 200px;
|
||
overflow-y: auto;
|
||
}
|
||
.drill-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 10px 15px;
|
||
background: rgba(0,0,0,0.3);
|
||
border-radius: 6px;
|
||
margin-bottom: 8px;
|
||
font-size: 0.85em;
|
||
}
|
||
.drill-item .name { color: #fff; }
|
||
.drill-item .status {
|
||
padding: 4px 12px;
|
||
border-radius: 10px;
|
||
font-size: 0.85em;
|
||
font-weight: 600;
|
||
}
|
||
.drill-item .status.ok { background: rgba(0,255,136,0.2); color: #0f8; }
|
||
.drill-item .status.warn { background: rgba(255,170,0,0.2); color: #fa0; }
|
||
.drill-item .status.err { background: rgba(255,50,100,0.2); color: #f36; }
|
||
|
||
.drill-actions {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-top: 20px;
|
||
padding-top: 15px;
|
||
border-top: 1px solid rgba(255,255,255,0.1);
|
||
}
|
||
.drill-btn {
|
||
padding: 12px 25px;
|
||
background: var(--bc);
|
||
color: #000;
|
||
border: none;
|
||
border-radius: 6px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
font-size: 0.9em;
|
||
transition: all 0.3s;
|
||
}
|
||
.drill-btn:hover {
|
||
transform: scale(1.05);
|
||
box-shadow: 0 5px 15px color-mix(in srgb, var(--bc) 40%, transparent);
|
||
}
|
||
.drill-btn.secondary {
|
||
background: transparent;
|
||
border: 2px solid var(--bc);
|
||
color: var(--bc);
|
||
}
|
||
</style>
|
||
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Overlay -->
|
||
<div class="overlay" id="overlay" onclick="closeAllDrilldowns()"></div>
|
||
|
||
<!-- Header -->
|
||
<div class="header">
|
||
<div class="header-title">
|
||
<div class="badge"><i class="fas fa-circle"></i> FLUX PRINCIPAL - SEND PROCESS</div>
|
||
<h1>E2E Orchestration</h1>
|
||
</div>
|
||
<div class="header-labels">
|
||
<div class="h-label">rep_score</div>
|
||
<div class="h-label">server_ip</div>
|
||
<div class="h-label">winning_cfg</div>
|
||
<div class="h-label">creative</div>
|
||
<div class="h-label">dnt_ok</div>
|
||
</div>
|
||
<div class="header-actions">
|
||
<button class="btn btn-s" onclick="location.reload()"><i class="fas fa-sync"></i></button>
|
||
<a href="/brain-central.html" class="btn btn-p"><i class="fas fa-brain"></i> Brain IA</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flow-main">
|
||
|
||
<!-- E2E Process Definition -->
|
||
<div class="e2e-definition">
|
||
<div class="e2e-title"><i class="fas fa-circle" style="color:#0f8"></i> Configuration IA - Winning Config Active</div>
|
||
<div class="e2e-config">
|
||
<div class="config-item">
|
||
<div class="label">Méthode de Send</div>
|
||
<div class="value ai"><i class="fas fa-check-square"></i> Office 365 + Exchange Headers</div>
|
||
</div>
|
||
<div class="config-item">
|
||
<div class="label">ISP Cible</div>
|
||
<div class="value">T-Online (Telekom)</div>
|
||
</div>
|
||
<div class="config-item">
|
||
<div class="label">Config Gagnante</div>
|
||
<div class="value ai"><i class="fas fa-trophy"></i> Config #47 - 98% Inbox</div>
|
||
</div>
|
||
<div class="config-item">
|
||
<div class="label">API Method</div>
|
||
<div class="value">PMTA + VMTA Rotation</div>
|
||
</div>
|
||
<div class="config-item">
|
||
<div class="label">Brain Status</div>
|
||
<div class="value ai"><i class="fas fa-circle"></i> 11 Providers Active</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Main Flow Row -->
|
||
<div class="flow-row">
|
||
|
||
<!-- Block 1: O365 -->
|
||
<div class="flow-block">
|
||
<div class="block-card red" onclick="openDrilldown('o365')">
|
||
<div class="rate-badge">0/h</div>
|
||
<div class="block-icon">
|
||
<i class="fab fa-microsoft"></i>
|
||
<span>O365</span>
|
||
</div>
|
||
<div class="block-value"><?= number_format($stats['o365']['count']) ?></div>
|
||
<div class="block-label">ready to send</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="arrow-connector">
|
||
<div class="arrow-line" style="--c1: #ff3366; --c2: #00ff88"></div>
|
||
<div class="arrow-label" style="--c2: #0ff">smtp_creds</div>
|
||
<div class="arrow-rate">0/h</div>
|
||
</div>
|
||
|
||
<!-- Block 2: MTA -->
|
||
<div class="flow-block">
|
||
<div class="block-card green" onclick="openDrilldown('mta')">
|
||
<div class="rate-badge">0/h</div>
|
||
<div class="block-icon">
|
||
<i class="fas fa-server"></i>
|
||
<span>MTA</span>
|
||
</div>
|
||
<div class="block-value"><?= $stats['mta']['count'] ?></div>
|
||
<div class="block-label"><?= $stats['mta']['pools'] ?> pools</div>
|
||
<div class="block-sub">queue_ready<br>0 jobs/h</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="arrow-connector">
|
||
<div class="arrow-line" style="--c1: #00ff88; --c2: #00ffff"></div>
|
||
<div class="arrow-label" style="--c2: #0ff">isp_config</div>
|
||
</div>
|
||
|
||
<!-- Block 3: Campaign -->
|
||
<div class="flow-block">
|
||
<div class="block-card cyan" onclick="openDrilldown('campaign')">
|
||
<div class="rate-badge">0/h</div>
|
||
<div class="block-icon">
|
||
<i class="fas fa-bullhorn"></i>
|
||
<span>Campaign</span>
|
||
</div>
|
||
<div class="block-value"><?= $stats['campaigns']['count'] ?></div>
|
||
<div class="block-label">configured</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="arrow-connector">
|
||
<div class="arrow-line" style="--c1: #00ffff; --c2: #f59e0b"></div>
|
||
<div class="arrow-label" style="--c2: #f59e0b">DROP</div>
|
||
<div class="arrow-rate">0 drop/h</div>
|
||
</div>
|
||
|
||
<!-- Block 4: Sending -->
|
||
<div class="flow-block">
|
||
<div class="block-card orange" onclick="openDrilldown('sending')">
|
||
<div class="rate-badge live"><?= $stats['sending']['live'] ?> live</div>
|
||
<div class="block-icon">
|
||
<i class="fas fa-paper-plane"></i>
|
||
<span>Sending</span>
|
||
</div>
|
||
<div class="block-value"><?= $stats['sending']['count'] ?> camps</div>
|
||
<div class="block-label">in progress</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="arrow-connector">
|
||
<div class="arrow-line" style="--c1: #f59e0b; --c2: #ec4899"></div>
|
||
<div class="arrow-label" style="--c2: #ec4899">pixel+redir</div>
|
||
<div class="arrow-rate">0 opens/h</div>
|
||
</div>
|
||
|
||
<!-- Block 5: Tracking -->
|
||
<div class="flow-block">
|
||
<div class="block-card pink" onclick="openDrilldown('tracking')">
|
||
<div class="rate-badge">0/h</div>
|
||
<div class="block-icon">
|
||
<i class="fas fa-chart-line"></i>
|
||
<span>Tracking</span>
|
||
</div>
|
||
<div class="block-value">OVH</div>
|
||
<div class="block-label"><?= $stats['tracking']['server'] ?></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="arrow-connector">
|
||
<div class="arrow-line" style="--c1: #ec4899; --c2: #00ff88"></div>
|
||
<div class="arrow-label" style="--c2: #0f8">conversions</div>
|
||
<div class="arrow-rate">0 clicks/h</div>
|
||
</div>
|
||
|
||
<!-- Block 6: Done -->
|
||
<div class="flow-block">
|
||
<div class="block-card green done-block" onclick="openDrilldown('done')">
|
||
<div class="rate-badge">0/h</div>
|
||
<div class="block-icon">
|
||
<i class="fas fa-check-square"></i>
|
||
<span>Done</span>
|
||
</div>
|
||
<div class="block-value"><?= $stats['done']['count'] ?> camps</div>
|
||
<div class="done-stats">
|
||
<div class="done-stat"><div class="v"><?= number_format($stats['done']['sent']) ?></div><div class="l">sent</div></div>
|
||
<div class="done-stat"><div class="v"><?= number_format($stats['done']['opens']) ?></div><div class="l">opens</div></div>
|
||
<div class="done-stat"><div class="v"><?= number_format($stats['done']['clicks']) ?></div><div class="l">clicks</div></div>
|
||
</div>
|
||
<div class="done-link"><i class="fas fa-external-link-alt"></i> Cliquer pour détails</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Bottom Stats Row -->
|
||
<div class="stats-row">
|
||
|
||
<div class="feedback-arrows">
|
||
<span>seed_dataset_resultsanalytics</span>
|
||
<i class="fas fa-arrow-up"></i>
|
||
<i class="fas fa-arrow-up"></i>
|
||
<i class="fas fa-arrow-up"></i>
|
||
</div>
|
||
|
||
<div class="feedback-label">↑ FEEDBACK LOOP</div>
|
||
|
||
<!-- Seeds -->
|
||
<div class="stat-card" style="--bc: #f59e0b" onclick="openDrilldown('seeds')">
|
||
<div class="rate-badge" style="position:absolute;top:-10px;right:15px;background:#f59e0b;color:#000">0/h</div>
|
||
<div class="icon"><i class="fas fa-seedling"></i></div>
|
||
<div class="value"><?= number_format($stats['seeds']['count']) ?></div>
|
||
<div class="label">Seeds</div>
|
||
<div class="sub"><?= $stats['seeds']['active'] ?> active</div>
|
||
<div class="block-action">
|
||
<button class="block-btn" style="background:#f59e0b" onclick="event.stopPropagation(); window.location.href='/weval-send.php'">WEVAL SEND</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tests -->
|
||
<div class="stat-card" style="--bc: #00ffff" onclick="openDrilldown('tests')">
|
||
<div class="rate-badge" style="position:absolute;top:-10px;right:15px;background:#0ff;color:#000">0/h</div>
|
||
<div class="icon"><i class="fas fa-flask"></i></div>
|
||
<div class="value"><?= $stats['tests']['count'] ?></div>
|
||
<div class="label">Tests</div>
|
||
<div class="sub"><?= $stats['tests']['running'] ?> running</div>
|
||
<div class="block-action">
|
||
<button class="block-btn" style="background:#0ff" onclick="event.stopPropagation(); window.location.href='/weval-send.php'">WEVAL SEND</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Brain -->
|
||
<div class="stat-card" style="--bc: #bf00ff" onclick="openDrilldown('brain')">
|
||
<div class="rate-badge" style="position:absolute;top:-10px;right:15px;background:#bf00ff"><?= $stats['brain']['providers'] ?></div>
|
||
<div class="icon"><i class="fas fa-brain"></i></div>
|
||
<div class="value" style="font-size:1.2em">WEVAL<br>MIND</div>
|
||
<div class="label">Analytics</div>
|
||
<div class="sub"><?= $stats['brain']['providers'] ?> providers</div>
|
||
<div class="block-action">
|
||
<button class="block-btn" style="background:#bf00ff" onclick="event.stopPropagation(); window.location.href='/brain-central.html'">WEVAL MIND</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="feedback-label-right">FEEDBACK ↑</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════════════ -->
|
||
<!-- DRILLDOWN PANELS -->
|
||
<!-- ═══════════════════════════════════════════════════════════════════ -->
|
||
|
||
<!-- O365 Drilldown -->
|
||
<div class="drilldown" id="drill-o365" style="--bc: #ff3366">
|
||
<div class="drilldown-header">
|
||
<div class="drilldown-title"><i class="fab fa-microsoft"></i> Office 365 Accounts</div>
|
||
<button class="drilldown-close" onclick="closeDrilldown('o365')">×</button>
|
||
</div>
|
||
<div class="drilldown-body">
|
||
<div class="drill-grid">
|
||
<div class="drill-card" style="--bc:#0f8"><div class="v"><?= number_format($stats['o365']['ready']) ?></div><div class="l">Ready</div></div>
|
||
<div class="drill-card" style="--bc:#f59e0b"><div class="v">0</div><div class="l">In Use</div></div>
|
||
<div class="drill-card" style="--bc:#f36"><div class="v">0</div><div class="l">Blocked</div></div>
|
||
<div class="drill-card" style="--bc:#0ff"><div class="v">0/h</div><div class="l">Rate</div></div>
|
||
</div>
|
||
<div class="drill-section">
|
||
<h4>Recent Accounts</h4>
|
||
<div class="drill-list">
|
||
<div class="drill-item"><span class="name">account1@nonprofit.org</span><span class="status ok">Ready</span></div>
|
||
<div class="drill-item"><span class="name">account2@nonprofit.org</span><span class="status ok">Ready</span></div>
|
||
<div class="drill-item"><span class="name">account3@nonprofit.org</span><span class="status ok">Ready</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="drill-actions">
|
||
<button class="drill-btn" onclick="goTo('/office365/office-manager.php')">Voir Tous</button>
|
||
<button class="drill-btn secondary" onclick="closeDrilldown('o365')">Fermer</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MTA Drilldown -->
|
||
<div class="drilldown" id="drill-mta" style="--bc: #00ff88">
|
||
<div class="drilldown-header">
|
||
<div class="drilldown-title"><i class="fas fa-server"></i> MTA Servers</div>
|
||
<button class="drilldown-close" onclick="closeDrilldown('mta')">×</button>
|
||
</div>
|
||
<div class="drilldown-body">
|
||
<div class="drill-grid">
|
||
<div class="drill-card" style="--bc:#0f8"><div class="v"><?= $stats['mta']['count'] ?></div><div class="l">Active</div></div>
|
||
<div class="drill-card" style="--bc:#0ff"><div class="v"><?= $stats['mta']['pools'] ?></div><div class="l">Pools</div></div>
|
||
<div class="drill-card" style="--bc:#f59e0b"><div class="v">0</div><div class="l">Queue</div></div>
|
||
<div class="drill-card" style="--bc:#f36"><div class="v">0</div><div class="l">Errors</div></div>
|
||
</div>
|
||
<div class="drill-section">
|
||
<h4>ISP Configuration</h4>
|
||
<div class="drill-list">
|
||
<div class="drill-item"><span class="name">T-Online (Telekom)</span><span class="status ok">Configured</span></div>
|
||
<div class="drill-item"><span class="name">Gmail</span><span class="status ok">Configured</span></div>
|
||
<div class="drill-item"><span class="name">GMX</span><span class="status warn">Pending</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="drill-actions">
|
||
<button class="drill-btn" onclick="goTo('/mta/servers-list.php')">Manage Servers</button>
|
||
<button class="drill-btn secondary" onclick="closeDrilldown('mta')">Fermer</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Campaign Drilldown -->
|
||
<div class="drilldown" id="drill-campaign" style="--bc: #00ffff">
|
||
<div class="drilldown-header">
|
||
<div class="drilldown-title"><i class="fas fa-bullhorn"></i> Campaigns</div>
|
||
<button class="drilldown-close" onclick="closeDrilldown('campaign')">×</button>
|
||
</div>
|
||
<div class="drilldown-body">
|
||
<div class="drill-grid">
|
||
<div class="drill-card" style="--bc:#0ff"><div class="v"><?= $stats['campaigns']['count'] ?></div><div class="l">Configured</div></div>
|
||
<div class="drill-card" style="--bc:#f59e0b"><div class="v">5</div><div class="l">Sending</div></div>
|
||
<div class="drill-card" style="--bc:#0f8"><div class="v">11</div><div class="l">Completed</div></div>
|
||
<div class="drill-card" style="--bc:#f36"><div class="v">0</div><div class="l">Failed</div></div>
|
||
</div>
|
||
<div class="drill-section">
|
||
<h4>Sponsor & Offre</h4>
|
||
<div class="drill-list">
|
||
<div class="drill-item"><span class="name">Telekom - Cloud Offer</span><span class="status ok">Active</span></div>
|
||
<div class="drill-item"><span class="name">Telekom - Security Alert</span><span class="status ok">Active</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="drill-section">
|
||
<h4>Destinataires</h4>
|
||
<div class="drill-list">
|
||
<div class="drill-item"><span class="name">Liste T-Online DE</span><span class="status ok">51,246 emails</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="drill-actions">
|
||
<button class="drill-btn" onclick="goTo('/send/send-page.php')">Send Page</button>
|
||
<button class="drill-btn secondary" onclick="closeDrilldown('campaign')">Fermer</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Sending Drilldown -->
|
||
<div class="drilldown" id="drill-sending" style="--bc: #f59e0b">
|
||
<div class="drilldown-header">
|
||
<div class="drilldown-title"><i class="fas fa-paper-plane"></i> Sending - Live Campaigns</div>
|
||
<button class="drilldown-close" onclick="closeDrilldown('sending')">×</button>
|
||
</div>
|
||
<div class="drilldown-body">
|
||
<div class="drill-grid">
|
||
<div class="drill-card" style="--bc:#0f8"><div class="v"><?= $stats['sending']['live'] ?></div><div class="l">Live</div></div>
|
||
<div class="drill-card" style="--bc:#0ff"><div class="v">2,500</div><div class="l">IN Queue</div></div>
|
||
<div class="drill-card" style="--bc:#f59e0b"><div class="v">0</div><div class="l">OUT/h</div></div>
|
||
<div class="drill-card" style="--bc:#f36"><div class="v">0</div><div class="l">Bounces</div></div>
|
||
</div>
|
||
<div class="drill-section">
|
||
<h4>PMTA Monitor</h4>
|
||
<div class="drill-list">
|
||
<div class="drill-item"><span class="name">Server #1 - 185.x.x.1</span><span class="status ok">OUT: 1,250</span></div>
|
||
<div class="drill-item"><span class="name">Server #2 - 185.x.x.2</span><span class="status ok">OUT: 1,250</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="drill-actions">
|
||
<button class="drill-btn" style="background:#f36" onclick="alert('⏸ Pause All Servers')">⏸ Pause All</button>
|
||
<button class="drill-btn" onclick="alert('▶ Resume All Servers')">▶ Resume</button>
|
||
<button class="drill-btn secondary" onclick="closeDrilldown('sending')">Fermer</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tracking Drilldown -->
|
||
<div class="drilldown" id="drill-tracking" style="--bc: #ec4899">
|
||
<div class="drilldown-header">
|
||
<div class="drilldown-title"><i class="fas fa-chart-line"></i> Tracking Server</div>
|
||
<button class="drilldown-close" onclick="closeDrilldown('tracking')">×</button>
|
||
</div>
|
||
<div class="drilldown-body">
|
||
<div class="drill-grid">
|
||
<div class="drill-card" style="--bc:#0f8"><div class="v">Online</div><div class="l">Status</div></div>
|
||
<div class="drill-card" style="--bc:#ec4899"><div class="v">0</div><div class="l">Opens/h</div></div>
|
||
<div class="drill-card" style="--bc:#0ff"><div class="v">0</div><div class="l">Clicks/h</div></div>
|
||
<div class="drill-card" style="--bc:#f59e0b"><div class="v">0</div><div class="l">Leads/h</div></div>
|
||
</div>
|
||
<div class="drill-section">
|
||
<h4>Server Info</h4>
|
||
<div class="drill-list">
|
||
<div class="drill-item"><span class="name">IP</span><span class="status ok"><?= $stats['tracking']['server'] ?></span></div>
|
||
<div class="drill-item"><span class="name">Domain</span><span class="status ok">culturellemejean.charity</span></div>
|
||
<div class="drill-item"><span class="name">HTTPS</span><span class="status ok">Active</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="drill-actions">
|
||
<button class="drill-btn" onclick="goTo('/tracking/dashboard.php')">Dashboard</button>
|
||
<button class="drill-btn secondary" onclick="closeDrilldown('tracking')">Fermer</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Done Drilldown - FIXED -->
|
||
<div class="drilldown" id="drill-done" style="--bc: #00ff88">
|
||
<div class="drilldown-header">
|
||
<div class="drilldown-title"><i class="fas fa-check-square"></i> Completed Campaigns</div>
|
||
<button class="drilldown-close" onclick="closeDrilldown('done')">×</button>
|
||
</div>
|
||
<div class="drilldown-body">
|
||
<div class="drill-grid">
|
||
<div class="drill-card" style="--bc:#0f8"><div class="v"><?= number_format($stats['done']['sent']) ?></div><div class="l">Sent</div></div>
|
||
<div class="drill-card" style="--bc:#ec4899"><div class="v"><?= number_format($stats['done']['opens']) ?></div><div class="l">Opens</div></div>
|
||
<div class="drill-card" style="--bc:#0ff"><div class="v"><?= number_format($stats['done']['clicks']) ?></div><div class="l">Clicks</div></div>
|
||
<div class="drill-card" style="--bc:#f59e0b"><div class="v"><?= round($stats['done']['opens']/$stats['done']['sent']*100, 1) ?>%</div><div class="l">Open Rate</div></div>
|
||
</div>
|
||
<div class="drill-section">
|
||
<h4>Check Results</h4>
|
||
<div class="drill-list">
|
||
<div class="drill-item"><span class="name">Inbox Rate</span><span class="status ok">98%</span></div>
|
||
<div class="drill-item"><span class="name">SCL Score</span><span class="status ok">= 1</span></div>
|
||
<div class="drill-item"><span class="name">Spam Rate</span><span class="status ok">2%</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="drill-actions">
|
||
<button class="drill-btn" onclick="goTo('/statistics/full-report.html')">Full Report</button>
|
||
<button class="drill-btn secondary" onclick="closeDrilldown('done')">Fermer</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Seeds Drilldown -->
|
||
<div class="drilldown" id="drill-seeds" style="--bc: #f59e0b">
|
||
<div class="drilldown-header">
|
||
<div class="drilldown-title"><i class="fas fa-seedling"></i> Seed Lists</div>
|
||
<button class="drilldown-close" onclick="closeDrilldown('seeds')">×</button>
|
||
</div>
|
||
<div class="drilldown-body">
|
||
<div class="drill-grid">
|
||
<div class="drill-card" style="--bc:#f59e0b"><div class="v"><?= number_format($stats['seeds']['count']) ?></div><div class="l">Total Seeds</div></div>
|
||
<div class="drill-card" style="--bc:#0f8"><div class="v"><?= $stats['seeds']['active'] ?></div><div class="l">Active</div></div>
|
||
</div>
|
||
<div class="drill-actions">
|
||
<button class="drill-btn" onclick="goTo('/seeds/seed-list.php')">Manage Seeds</button>
|
||
<button class="drill-btn secondary" onclick="closeDrilldown('seeds')">Fermer</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tests Drilldown -->
|
||
<div class="drilldown" id="drill-tests" style="--bc: #00ffff">
|
||
<div class="drilldown-header">
|
||
<div class="drilldown-title"><i class="fas fa-flask"></i> Tests</div>
|
||
<button class="drilldown-close" onclick="closeDrilldown('tests')">×</button>
|
||
</div>
|
||
<div class="drilldown-body">
|
||
<div class="drill-grid">
|
||
<div class="drill-card" style="--bc:#0ff"><div class="v"><?= $stats['tests']['count'] ?></div><div class="l">Total Tests</div></div>
|
||
<div class="drill-card" style="--bc:#f59e0b"><div class="v"><?= $stats['tests']['running'] ?></div><div class="l">Running</div></div>
|
||
</div>
|
||
<div class="drill-actions">
|
||
<button class="drill-btn" onclick="goTo('/tests/test-manager.php')">Test Manager</button>
|
||
<button class="drill-btn secondary" onclick="closeDrilldown('tests')">Fermer</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Brain Drilldown -->
|
||
<div class="drilldown" id="drill-brain" style="--bc: #bf00ff">
|
||
<div class="drilldown-header">
|
||
<div class="drilldown-title"><i class="fas fa-brain"></i> WEVAL MIND - Brain IA</div>
|
||
<button class="drilldown-close" onclick="closeDrilldown('brain')">×</button>
|
||
</div>
|
||
<div class="drilldown-body">
|
||
<div class="drill-grid">
|
||
<div class="drill-card" style="--bc:#bf00ff"><div class="v"><?= $stats['brain']['providers'] ?></div><div class="l">AI Providers</div></div>
|
||
<div class="drill-card" style="--bc:#0f8"><div class="v">6</div><div class="l">Winning Configs</div></div>
|
||
<div class="drill-card" style="--bc:#0ff"><div class="v">98%</div><div class="l">Best Inbox Rate</div></div>
|
||
<div class="drill-card" style="--bc:#f59e0b"><div class="v">47</div><div class="l">Tests Today</div></div>
|
||
</div>
|
||
<div class="drill-section">
|
||
<h4>Active Providers</h4>
|
||
<div class="drill-list">
|
||
<div class="drill-item"><span class="name">Cerebras</span><span class="status ok">Active</span></div>
|
||
<div class="drill-item"><span class="name">Groq</span><span class="status ok">Active</span></div>
|
||
<div class="drill-item"><span class="name">DeepSeek</span><span class="status ok">Active</span></div>
|
||
<div class="drill-item"><span class="name">Gemini</span><span class="status ok">Active</span></div>
|
||
<div class="drill-item"><span class="name">Claude</span><span class="status ok">Active</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="drill-actions">
|
||
<button class="drill-btn" onclick="goTo('/brain-central.html')">Brain Central</button>
|
||
<button class="drill-btn" onclick="goTo('/deliverads/brain-dashboard.php')">Winning Configs</button>
|
||
<button class="drill-btn secondary" onclick="closeDrilldown('brain')">Fermer</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Open drilldown
|
||
function openDrilldown(id) {
|
||
closeAllDrilldowns();
|
||
document.getElementById('overlay').classList.add('show');
|
||
document.getElementById('drill-' + id).classList.add('show');
|
||
}
|
||
|
||
// Close specific drilldown
|
||
function closeDrilldown(id) {
|
||
document.getElementById('overlay').classList.remove('show');
|
||
document.getElementById('drill-' + id).classList.remove('show');
|
||
}
|
||
|
||
// Close all drilldowns
|
||
function closeAllDrilldowns() {
|
||
document.getElementById('overlay').classList.remove('show');
|
||
document.querySelectorAll('.drilldown').forEach(d => d.classList.remove('show'));
|
||
}
|
||
|
||
// Navigate to page
|
||
function goTo(url) {
|
||
closeAllDrilldowns();
|
||
window.location.href = url;
|
||
}
|
||
|
||
// Keyboard escape to close
|
||
document.addEventListener('keydown', function(e) {
|
||
if (e.key === 'Escape') {
|
||
closeAllDrilldowns();
|
||
}
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|