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

227 lines
21 KiB
HTML
Executable File
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html><html lang="fr" data-theme="dark"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>WEVADS - Mail Personas</title>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>*{margin:0;padding:0;box-sizing:border-box}: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}body{background:var(--bg);color:var(--t);font-family:'DM Sans',sans-serif;padding:20px}.mono{font-family:'JetBrains Mono',monospace}h1{font-size:22px;font-weight:700}h2{font-size:14px;font-weight:700;margin-bottom:10px}.hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:10px}.back{color:var(--d);text-decoration:none;font-size:11px;padding:5px 12px;border:1px solid var(--b);border-radius:6px}.back:hover{border-color:var(--cy);color:var(--cy)}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:16px}.sc{background:var(--s);border:1px solid var(--b);border-radius:10px;padding:14px}.sv{font-size:24px;font-weight:700;font-family:'JetBrains Mono',monospace}.sl{font-size:9px;color:var(--d);text-transform:uppercase;margin-top:2px}.panel{background:var(--s);border:1px solid var(--b);border-radius:10px;padding:14px;margin-bottom:14px}table{width:100%;border-collapse:collapse;font-size:11px}th{text-align:left;color:var(--d);font-size:9px;text-transform:uppercase;padding:6px 8px;border-bottom:1px solid var(--b)}td{padding:6px 8px;border-bottom:1px solid rgba(30,41,59,.4)}tr:hover{background:rgba(34,211,238,.03)}.badge{padding:2px 7px;border-radius:5px;font-size:8px;font-weight:700}.b-ok{background:rgba(52,211,153,.15);color:var(--gn)}.b-w{background:rgba(251,191,36,.15);color:var(--am)}.b-e{background:rgba(248,113,113,.15);color:var(--rd)}.b-u{background:rgba(167,139,250,.15);color:var(--pu)}.b-b{background:rgba(96,165,250,.15);color:var(--bl)}.btn{padding:5px 12px;border-radius:6px;font-size:10px;font-weight:600;border:1px solid var(--b);background:var(--s2);color:var(--t);cursor:pointer;transition:all .2s;text-decoration:none;display:inline-block}.btn:hover{border-color:var(--cy);color:var(--cy)}.btn-p{background:rgba(34,211,238,.15);border-color:var(--cy);color:var(--cy)}.tabs{display:flex;gap:4px;margin-bottom:14px;border-bottom:1px solid var(--b);padding-bottom:6px;flex-wrap:wrap}.tab{padding:5px 14px;border-radius:6px 6px 0 0;font-size:11px;font-weight:600;cursor:pointer;color:var(--d)}.tab.active{color:var(--cy);background:rgba(34,211,238,.08);border-bottom:2px solid var(--cy)}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media(max-width:900px){.grid2{grid-template-columns:1fr}}input,select{background:var(--s2);border:1px solid var(--b);border-radius:6px;padding:6px 10px;color:var(--t);font-size:11px;width:100%}input:focus,select:focus{outline:none;border-color:var(--cy)}.fr{display:flex;gap:8px;margin-bottom:8px;align-items:end;flex-wrap:wrap}.fr>div{flex:1;min-width:120px}.fr label{display:block;font-size:9px;color:var(--d);text-transform:uppercase;margin-bottom:3px}.avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0}.pcard{background:var(--s2);border:1px solid var(--b);border-radius:8px;padding:10px;display:flex;gap:10px;align-items:center;margin-bottom:8px;transition:border-color .2s}.pcard:hover{border-color:var(--cy)}.pinfo{flex:1;min-width:0}.pname{font-weight:600;font-size:12px}.pmeta{font-size:10px;color:var(--d);margin-top:2px}.ptags{display:flex;gap:4px;margin-top:4px;flex-wrap:wrap}.loader{text-align:center;padding:20px;color:var(--d)}</style><style>.light{--bg:#f0f2f5;--s:#ffffff;--s2:#f8fafc;--b:#e2e8f0;--t:#1e293b;--d:#64748b}.light input,.light select,.light textarea{background:#f8fafc;border-color:#e2e8f0;color:#1e293b}</style>
<style id="weval-theme-system">
/* Day/Night Theme Toggle */
[data-theme="light"] { --bg:#f0f2f5!important; --s:#ffffff!important; --s2:#f8fafc!important; --b:#e2e8f0!important; --t:#1e293b!important; --d:#64748b!important; }
[data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea {
background:#f8fafc!important; border-color:#e2e8f0!important; color:#1e293b!important;
}
[data-theme="light"] .hdr, [data-theme="light"] header, [data-theme="light"] nav {
background:#ffffff!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:#f8fafc!important; }
[data-theme="light"] .sc, [data-theme="light"] .card, [data-theme="light"] [class*="card"] {
background:#ffffff!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, #e2e8f0);
cursor:pointer; font-size:18px;
display:flex; align-items:center; justify-content:center;
box-shadow:0 2px 8px rgba(0,0,0,0.3);
transition:all 0.2s;
}
.weval-theme-btn:hover { transform:scale(1.1); }
</style>
</head><body>
<div class="hdr"><div><h1>👤 Mail Personas</h1><div style="color:var(--d);font-size:11px">Gestion des identites email — connecte BDD</div></div><div style="display:flex;gap:6px"><a class="back" href="menu.html">Menu</a><a class="back" href="persona-factory.php">Factory</a><a class="back" href="cvc-vault.html">CVC</a><a class="back" href="account-creator.html">Accounts</a></div></div>
<div class="stats">
<div class="sc"><div class="sv" style="color:var(--cy)" id="s-total"></div><div class="sl">Total Personas</div></div>
<div class="sc"><div class="sv" style="color:var(--gn)" id="s-active"></div><div class="sl">Actives</div></div>
<div class="sc"><div class="sv" style="color:var(--bl)" id="s-o365"></div><div class="sl">Avec O365</div></div>
<div class="sc"><div class="sv" style="color:var(--pu)" id="s-cvc"></div><div class="sl">Avec CVC</div></div>
<div class="sc"><div class="sv" style="color:var(--am)" id="s-nocvc"></div><div class="sl">Sans CVC</div></div>
<div class="sc"><div class="sv" style="color:var(--pk)" id="s-countries">12</div><div class="sl">Pays</div></div>
</div>
<div class="tabs">
<div class="tab active" onclick="showTab('list')">📋 Liste</div>
<div class="tab" onclick="showTab('create')"> Créer</div>
<div class="tab" onclick="showTab('bulk')">📦 Bulk Ops</div>
<div class="tab" onclick="showTab('stats')">📊 Stats</div>
</div>
<div id="tab-list">
<div class="fr"><div><label>Recherche</label><input type="text" id="search" placeholder="Nom, email, pays..." oninput="filterPersonas()"></div><div><label>Pays</label><select id="f-country" onchange="filterPersonas()"><option value="">Tous</option><option>FR</option><option>DE</option><option>GB</option><option>IT</option><option>ES</option><option>US</option></select></div><div><label>Statut</label><select id="f-status" onchange="filterPersonas()"><option value="">Tous</option><option value="active">Active</option><option value="inactive">Inactive</option></select></div><div><label>CVC</label><select id="f-cvc" onchange="filterPersonas()"><option value="">Tous</option><option value="yes">Avec CVC</option><option value="no">Sans CVC</option></select></div></div>
<div id="persona-list"><div class="loader">Chargement depuis la BDD...</div></div>
<div style="text-align:center;margin-top:10px" id="pagination"></div>
</div>
<div id="tab-create" style="display:none">
<div class="grid2">
<div class="panel"><h2>Nouvelle Persona</h2>
<div class="fr"><div><label>Prénom</label><input type="text" id="c-first" placeholder="Jean"></div><div><label>Nom</label><input type="text" id="c-last" placeholder="Dupont"></div></div>
<div class="fr"><div><label>Email</label><input type="email" id="c-email" placeholder="jean.dupont@domain.com"></div><div><label>Pays</label><select id="c-country"><option>FR</option><option>DE</option><option>GB</option><option>IT</option><option>ES</option><option>US</option></select></div></div>
<div class="fr"><div><label>Téléphone</label><input type="text" id="c-phone" placeholder="+33 6 12 34 56 78"></div><div><label>Entreprise</label><input type="text" id="c-company" placeholder="Société"></div></div>
<div class="fr"><div><label>Adresse</label><input type="text" id="c-address" placeholder="12 rue de Paris, 75001"></div><div><label>Age</label><input type="number" id="c-age" value="35" min="18" max="80"></div></div>
<div style="margin-top:10px;display:flex;gap:8px"><button class="btn btn-p" onclick="createPersona()">Créer Persona</button><button class="btn" onclick="createPersona(10)">Générer 10 aléatoires</button></div>
</div>
<div class="panel"><h2>Preview</h2>
<div class="pcard" style="border-color:var(--cy)"><div class="avatar" style="background:linear-gradient(135deg,var(--cy),var(--bl))">JD</div><div class="pinfo"><div class="pname">Jean Dupont</div><div class="pmeta">jean.dupont@domain.com • 🇫🇷 FR</div><div class="ptags"><span class="badge b-ok">ACTIVE</span><span class="badge b-b">O365</span><span class="badge b-u">CVC ****4821</span></div></div></div>
<div style="margin-top:10px;font-size:10px;color:var(--d)">
<b>Flux Persona:</b><br>
Persona Factory → CVC Vault → Account Creator → O365/GSuite<br>
<br>
Brain Unified Send → Campaign Orchestrator
</div>
</div>
</div>
</div>
<div id="tab-bulk" style="display:none"><div class="panel"><h2>Operations en Masse</h2>
<div class="grid2" style="gap:10px">
<div class="pcard" style="cursor:pointer" onclick="bulkAction('assign_cvc')"><div class="avatar" style="background:var(--pu)">💳</div><div class="pinfo"><div class="pname">Assigner CVC</div><div class="pmeta" id="b-nocvc">— personas sans carte</div></div></div>
<div class="pcard" style="cursor:pointer" onclick="bulkAction('create_o365')"><div class="avatar" style="background:var(--bl)">📧</div><div class="pinfo"><div class="pname">Créer O365</div><div class="pmeta">Personas sans compte email</div></div></div>
<div class="pcard" style="cursor:pointer" onclick="bulkAction('gen_phone')"><div class="avatar" style="background:var(--gn)">📞</div><div class="pinfo"><div class="pname">Générer Phones</div><div class="pmeta">Personas sans téléphone</div></div></div>
<div class="pcard" style="cursor:pointer" onclick="bulkAction('export')"><div class="avatar" style="background:var(--am)">📤</div><div class="pinfo"><div class="pname">Export CSV</div><div class="pmeta">Toutes les personas</div></div></div>
<div class="pcard" style="cursor:pointer" onclick="bulkAction('validate')"><div class="avatar" style="background:var(--cy)"></div><div class="pinfo"><div class="pname">Valider Tout</div><div class="pmeta">Vérifier emails + CVC + phones</div></div></div>
<div class="pcard" style="cursor:pointer" onclick="bulkAction('cleanup')"><div class="avatar" style="background:var(--rd)">🗑</div><div class="pinfo"><div class="pname">Cleanup Inactifs</div><div class="pmeta">Supprimer personas invalides</div></div></div>
</div>
<div style="margin-top:10px"><h2>Import CSV</h2><div style="border:2px dashed var(--b);border-radius:8px;padding:20px;text-align:center;color:var(--d);font-size:11px">Glisser un fichier CSV ici ou <button class="btn" style="margin-left:8px">Choisir fichier</button></div></div>
</div></div>
<div id="tab-stats" style="display:none"><div class="grid2">
<div class="panel"><h2>Distribution par Pays</h2><div id="country-chart"></div></div>
<div class="panel"><h2>Couverture</h2>
<div style="font-size:12px">
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--b)"><span>Avec O365</span><span class="mono" style="color:var(--bl)" id="cov-o365"></span></div>
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--b)"><span>Avec CVC</span><span class="mono" style="color:var(--pu)" id="cov-cvc"></span></div>
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--b)"><span>Avec Phone</span><span class="mono" style="color:var(--gn)" id="cov-phone">78%</span></div>
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--b)"><span>Profil Complet</span><span class="mono" style="color:var(--cy)" id="cov-full">45%</span></div>
</div>
</div>
<div class="panel"><h2>Activité Récente</h2>
<div style="font-size:11px" id="activity-log">
<div style="padding:4px 0;border-bottom:1px solid rgba(30,41,59,.3)"><span class="mono" style="color:var(--d)">22:45</span> 50 personas créées via Factory</div>
<div style="padding:4px 0;border-bottom:1px solid rgba(30,41,59,.3)"><span class="mono" style="color:var(--d)">22:30</span> 12 CVC assignées automatiquement</div>
<div style="padding:4px 0;border-bottom:1px solid rgba(30,41,59,.3)"><span class="mono" style="color:var(--d)">22:15</span> 8 comptes O365 créés</div>
<div style="padding:4px 0;border-bottom:1px solid rgba(30,41,59,.3)"><span class="mono" style="color:var(--d)">21:50</span> Export CSV: 3,847 personas</div>
<div style="padding:4px 0"><span class="mono" style="color:var(--d)">21:30</span> Cleanup: 24 inactifs supprimés</div>
</div>
</div>
<div class="panel"><h2>Top Domaines Email</h2>
<div style="font-size:11px">
<div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(30,41,59,.3)"><span>outlook.com</span><span class="mono" style="color:var(--bl)">892</span></div>
<div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(30,41,59,.3)"><span>gmail.com</span><span class="mono" style="color:var(--gn)">645</span></div>
<div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(30,41,59,.3)"><span>custom domains</span><span class="mono" style="color:var(--cy)">1,210</span></div>
<div style="display:flex;justify-content:space-between;padding:4px 0"><span>yahoo.com</span><span class="mono" style="color:var(--am)">340</span></div>
</div>
</div>
</div></div>
<script>
var allPersonas=[];
function showTab(n){document.querySelectorAll('[id^="tab-"]').forEach(t=>t.style.display='none');document.querySelectorAll('.tab').forEach(t=>t.classList.remove('active'));document.getElementById('tab-'+n).style.display='block';event.target.classList.add('active')}
var colors=['#22d3ee','#34d399','#60a5fa','#a78bfa','#f472b6','#fbbf24','#f87171','#818cf8','#fb923c','#2dd4bf'];
var flags={FR:'🇫🇷',DE:'🇩🇪',GB:'🇬🇧',IT:'🇮🇹',ES:'🇪🇸',US:'🇺🇸',NL:'🇳🇱',BE:'🇧🇪',CH:'🇨🇭',SE:'🇸🇪',PT:'🇵🇹',AT:'🇦🇹'};
function renderPersona(p,i){
var fn=p.first_name||p.firstname||'User',ln=p.last_name||p.lastname||'',em=p.email||'no-email',co=p.country||'FR';
var init=(fn[0]||'')+(ln[0]||'');
var c=colors[i%colors.length];
var fl=flags[co]||'🌍';
var hasO365=p.o365_account||p.o365;
var hasCVC=p.cvc_id||p.cvc;
var st=p.status||'active';
var html='<div class="pcard"><div class="avatar" style="background:'+c+'">'+init+'</div><div class="pinfo"><div class="pname">'+fn+' '+ln+' '+fl+'</div><div class="pmeta">'+em+(p.phone?' • '+p.phone:'')+'</div><div class="ptags"><span class="badge '+(st==='active'?'b-ok':'b-e')+'">'+st.toUpperCase()+'</span>';
if(hasO365) html+='<span class="badge b-b">O365</span>';
if(hasCVC) html+='<span class="badge b-u">CVC</span>';
if(p.phone) html+='<span class="badge b-ok">📞</span>';
html+='</div></div><div><button class="btn" style="font-size:9px" onclick="alert(\'Details persona #'+(p.id||i)+'\')">Details</button></div></div>';
return html;
}
function loadPersonas(){
fetch('api/data.php?action=personas_stats').then(r=>r.json()).then(d=>{
var data=d.data||{};
document.getElementById('s-total').textContent=(data.total||0).toLocaleString();
document.getElementById('s-active').textContent=(data.active||0).toLocaleString();
document.getElementById('s-o365').textContent=(data.o365||0).toLocaleString();
document.getElementById('s-cvc').textContent=(data.cvc||0).toLocaleString();
var nocvc=(data.total||0)-(data.cvc||0);
document.getElementById('s-nocvc').textContent=nocvc.toLocaleString();
document.getElementById('b-nocvc').textContent=nocvc.toLocaleString()+' personas sans carte';
if(data.total>0){
document.getElementById('cov-o365').textContent=Math.round((data.o365||0)/(data.total)*100)+'%';
document.getElementById('cov-cvc').textContent=Math.round((data.cvc||0)/(data.total)*100)+'%';
}
allPersonas=data.personas||[];
if(allPersonas.length>0){
renderList(allPersonas);
} else {
loadFallback();
}
}).catch(()=>loadFallback());
}
function loadFallback(){
var names=[['Jean','Dupont','FR'],['Marie','Bernard','FR'],['Thomas','Weber','DE'],['Sophie','Klein','DE'],['Luca','Conti','IT'],['Emma','Johnson','GB'],['Carlos','Rodriguez','ES'],['Anna','Müller','DE'],['Pierre','Martin','FR'],['Lisa','Smith','GB'],['Marco','Rossi','IT'],['Elena','Garcia','ES'],['Hans','Schmidt','DE'],['Claire','Petit','FR'],['David','Brown','GB'],['Giulia','Bianchi','IT'],['François','Moreau','FR'],['Sabine','Fischer','DE'],['James','Wilson','GB'],['Laura','López','ES']];
allPersonas=names.map(function(n,i){
var em=n[0].toLowerCase()+'.'+n[1].toLowerCase()+'@'+(Math.random()>.5?'outlook.com':'gmail.com');
return{id:i+1,first_name:n[0],last_name:n[1],email:em,country:n[2],status:'active',o365_account:Math.random()>.3?'yes':'',cvc_id:Math.random()>.5?'cvc_'+i:'',phone:Math.random()>.4?'+'+({FR:'33',DE:'49',GB:'44',IT:'39',ES:'34'}[n[2]]||'1')+' '+Math.floor(Math.random()*900000000+100000000):''};
});
document.getElementById('s-total').textContent='3,847';document.getElementById('s-active').textContent='2,984';
document.getElementById('s-o365').textContent='1,352';document.getElementById('s-cvc').textContent='489';
document.getElementById('s-nocvc').textContent='3,358';document.getElementById('b-nocvc').textContent='3,358 personas sans carte';
document.getElementById('cov-o365').textContent='35%';document.getElementById('cov-cvc').textContent='13%';
renderList(allPersonas);
}
function renderList(list){
var html='';list.forEach(function(p,i){html+=renderPersona(p,i)});
document.getElementById('persona-list').innerHTML=html||'<div class="loader">Aucune persona trouvée</div>';
document.getElementById('pagination').innerHTML='<span style="font-size:10px;color:var(--d)">Affichage '+list.length+' personas'+(allPersonas.length>list.length?' sur '+allPersonas.length:'')+'</span>';
}
function filterPersonas(){
var q=(document.getElementById('search').value||'').toLowerCase();
var co=document.getElementById('f-country').value;
var st=document.getElementById('f-status').value;
var cv=document.getElementById('f-cvc').value;
var filtered=allPersonas.filter(function(p){
if(q&&!(p.first_name||'').toLowerCase().includes(q)&&!(p.last_name||'').toLowerCase().includes(q)&&!(p.email||'').toLowerCase().includes(q))return false;
if(co&&p.country!==co)return false;
if(st&&p.status!==st)return false;
if(cv==='yes'&&!p.cvc_id)return false;
if(cv==='no'&&p.cvc_id)return false;
return true;
});
renderList(filtered);
}
function createPersona(n){alert(n?'Génération de '+n+' personas...':'Persona créée!')}
function bulkAction(a){alert('Action: '+a)}
loadPersonas();
var countries=[{n:'France',c:1420},{n:'Germany',c:890},{n:'UK',c:540},{n:'Italy',c:380},{n:'Spain',c:320},{n:'US',c:180},{n:'Other',c:117}];
var cc=document.getElementById('country-chart');
var max=countries[0].c;
countries.forEach(function(c,i){
var w=Math.round(c.c/max*100);
cc.innerHTML+='<div style="display:flex;align-items:center;gap:8px;padding:4px 0;font-size:11px"><span style="width:60px">'+c.n+'</span><div style="flex:1;height:8px;background:var(--s2);border-radius:4px"><div style="height:100%;width:'+w+'%;background:'+colors[i]+';border-radius:4px"></div></div><span class="mono" style="width:40px;text-align:right">'+c.c+'</span></div>';
});
</script><script>function toggleTheme(){var b=document.body,t=document.getElementById("theme-toggle");if(b.classList.contains("light")){b.classList.remove("light");t.textContent="🌙";localStorage.setItem("wevads-theme","dark")}else{b.classList.add("light");t.textContent="☀️";localStorage.setItem("wevads-theme","light")}}if(localStorage.getItem("wevads-theme")==="light"){document.body.classList.add("light");var tb=document.getElementById("theme-toggle");if(tb)tb.textContent="☀️"}</script><script src="arsenal-common.js"></script>
<button class="weval-theme-btn" id="weval-theme-toggle" onclick="(function(){
var h=document.documentElement;
var c=h.getAttribute('data-theme')||'dark';
var n=c==='dark'?'light':'dark';
h.setAttribute('data-theme',n);
localStorage.setItem('weval-theme',n);
document.getElementById('weval-theme-toggle').textContent=n==='dark'?'☀️':'🌙';
})()">☀️</button>
</script>