0.38) finish(); }catch(_){} };
let mc=0;
const down=(e)=>{ drawing=true; last=null; scratch(pos(e)); e.preventDefault(); };
const move=(e)=>{ if(!drawing) return; scratch(pos(e)); if((++mc%5)===0) check(); e.preventDefault(); };
const up=()=>{ if(!drawing) return; drawing=false; check(); };
cv.addEventListener('mousedown',down); cv.addEventListener('mousemove',move); window.addEventListener('mouseup',up);
cv.addEventListener('touchstart',down,{passive:false}); cv.addEventListener('touchmove',move,{passive:false}); window.addEventListener('touchend',up);
function removeListeners(){ cv.removeEventListener('mousedown',down); cv.removeEventListener('mousemove',move); window.removeEventListener('mouseup',up); cv.removeEventListener('touchstart',down); cv.removeEventListener('touchmove',move); window.removeEventListener('touchend',up); }
return removeListeners;
},[done]);
const revealed = done; // contenu visible
return
🎟️ Carte à gratter
SEMAINE
Une offre surprise par semaine pour tes proches. Gratte, puis envoie le code.
{tier.badge}
{offer.label}
{revealed &&
CODE : {code} }
{boom &&
}
{boom && confetti.map((c,i)=>(
))}
{!revealed &&
}
{revealed &&
📲 Envoyer à un proche }
;
}
// ════════ CLASSEMENT ════════
function RankInner({ d }) {
const [mode, setMode] = useState('cagnotte'); // 'cagnotte' (€ du mois) | 'perf' (taux de transfo)
const val = (p) => mode==='cagnotte' ? (p.total||0) : (p.taux||0);
const big = (p) => mode==='cagnotte' ? `${p.total||0}€` : `${p.taux||0}%`;
const sub = (p) => mode==='cagnotte' ? `${p.signed||0} inscrits ce mois` : `${p.convertis||0} convertis / ${p.traites||0}`;
const lb = [...d.leaderboard].sort((a,b)=> val(b)-val(a) || (b.signed||0)-(a.signed||0));
lb.forEach((p,i)=> p._rank = i+1);
const top3 = lb.slice(0,3);
const podium = top3.length>=3 ? [top3[1],top3[0],top3[2]] : top3;
const heights=[104,134,88];
const meRow = lb.find(x=>x.me);
const isLeader = !!meRow && meRow._rank===1;
const anyValue = lb.some(p=>val(p)>0);
const toFirst = (lb.length&&meRow) ? Math.max(0, val(lb[0])-val(meRow)) : 0;
const unit = mode==='cagnotte' ? '€' : ' pts';
const pct = Math.min(100, Math.round((d.cagnotte/d.goal)*100));
const Seg = ({ id, label }) => (
setMode(id)} style={{ flex:1, border:'none', cursor:'pointer', borderRadius:10, padding:'9px 0', ...hk, fontSize:13.5, fontWeight:700, background:mode===id?T.volt:'transparent', color:mode===id?T.ink:T.muted }}>{label}
);
if (!d.leaderboard || !d.leaderboard.length) return Chargement du classement…
;
return (
{mode==='perf' &&
Taux de transformation (convertis ÷ traités), équitable quels que soient les jours travaillés.
}
{podium.map((p,k)=>{ const top=p._rank===1; return
{p.me?'Toi':p.name.split(' ')[0]}
{big(p)}
{p._rank}
; })}
{!anyValue ? La compétition démarre 🔥 : isLeader ? Tu es en tête 🔥 : <>Plus que {toFirst}{unit} pour la 1re place}
Équipe 4D Gym
{lb.map(p=>(
{p._rank}
{p.me?`Toi · ${p.name}`:p.name}
{sub(p)}
{big(p)}
))}
);
}
// Onglet combiné Primes + Classement (toggle en haut).
function ScreenGains({ d, go, H }) {
const [view, setView] = useState('primes');
return
{[['primes','💰 Mes primes'],['rank','🏆 Classement']].map(([id,lb])=>(
setView(id)} style={{ flex:1, border:'none', cursor:'pointer', borderRadius:9, padding:'10px 0', ...hk, fontSize:14, fontWeight:700, background:view===id?T.volt:'transparent', color:view===id?T.ink:T.muted }}>{lb}
))}
{view==='primes' ? ;
}
// ════════ SÉANCES D'ESSAI DU JOUR ════════
function ScreenSessions({ d, go, H }) {
const today = todayISO();
const tomorrow = plusDaysISO(1);
const all = (d.allLeads||[]).filter(l=> l.seanceEssai).map(l=>({ ...l, jour:l.seanceEssai.slice(0,10) }))
.filter(l=> l.jour >= today)
.sort((a,b)=> a.seanceEssai.localeCompare(b.seanceEssai));
const todays = all.filter(l=> l.jour===today);
const tomos = all.filter(l=> l.jour===tomorrow);
const later = all.filter(l=> l.jour>tomorrow);
const [waLead, setWaLead] = useState(null);
const heureOf = (l)=> hasTime(l.seanceEssai) ? new Date(l.seanceEssai).toLocaleTimeString('fr-FR',{hour:'2-digit',minute:'2-digit'}).replace(':','h') : '';
const dayPhrase = (l)=> l.jour===today ? "aujourd'hui" : l.jour===tomorrow ? 'demain' : 'le '+fmtFR(l.jour).slice(0,5);
// 2 propositions courtes, ton 4D (tutoiement, pas de tournure bancale), date-aware (veille / jour J).
const waMsgs = (l)=>{ const p=l.name.split(' ')[0]; const h=heureOf(l); const j=dayPhrase(l); const at=h?` à ${h}`:''; return [
{ label:'✅ Confirmer (à envoyer la veille)', text:`Salut ${p}, c'est ${d.me} de 4D Gym au Thor. Je te confirme ta séance d'essai ${j}${at}. On t'attend au ${GYM_ADDR}, viens comme tu es 💪` },
{ label:'📅 Rappel du jour J', text:`Salut ${p}, on se voit${h?` à ${h}`:''} tout à l'heure pour ta séance d'essai 💪 On t'attend, viens comme tu es. À toute !` },
]; };
const Row = (l)=>{
const heure = heureOf(l) || '—';
return H.openLead(l, all)} style={{ display:'flex', alignItems:'center', gap:12, padding:'12px 0', borderBottom:`1px solid ${T.line}`, cursor:'pointer' }}>
{l.name}
{l.seanceProspect?'📅 Calendly':'👤 '+(l.assigne||'staff')}
{l.converted && ✅ inscrit }
e.stopPropagation()}>
H.call(l)} title="Appeler" style={{ width:38, height:38, borderRadius:11, border:'none', cursor:'pointer', background:GREEN, display:'flex', alignItems:'center', justifyContent:'center' }}>
setWaLead(l)} title="WhatsApp" style={{ width:38, height:38, borderRadius:11, border:'none', cursor:'pointer', background:'#1Fae5a', display:'flex', alignItems:'center', justifyContent:'center', fontSize:17 }}>📲
Séances d'essai
H.walkin()} style={{ ...btn(T.volt, 'var(--volt-ink)'), padding:'9px 14px', fontSize:13.5, fontWeight:800, borderRadius:999 }}>➕ Sur place
Qui vient tester la salle. Pense à confirmer la veille ou le matin.
🎯 Aujourd'hui · {todays.length}
{todays.length ?
{todays.map(Row)}
:
Aucune séance d'essai aujourd'hui.
}
{tomos.length>0 && <>
Demain · {tomos.length} {tomos.map(Row)}
}
{later.length>0 && <>
Plus tard · {later.length} {later.map(Row)}
}
{waLead && setWaLead(null)}>
{sheetTitle('Confirmer la séance')}
Choisis le message, WhatsApp s'ouvre pré-rempli.
}
;
}
// ════════ NOUVEAUTÉS (changelog) ════════
// Le plus récent en haut. À chaque grosse mise à jour, on ajoute un bloc.
const CHANGELOG = [
{ date:'15 juin 2026', title:'Version 1.0 — Lancement 🚀',
news:[
'🎨 Nouvelle app "staff" complète (design sombre), en ligne sur leads.4dgymclub.com, ajoutable à l\'écran d\'accueil (icône fusée)',
'📞 Phoning : file du jour (nouveaux en rouge + relances), appel direct, WhatsApp pré-rempli, notes, statuts (RDV, pas intéressé, mauvais numéro)',
'💰 Cagnotte du mois animée + primes (MRR 5€ / comptant 10€), versées au closeur',
'📊 Tes 2 taux (RDV pris, convertis sur RDV) + entonnoir cliquable',
'🏆 Classement 2 vues : Cagnotte (€) et Performance (taux de closing, équitable) — reparti à 0 le 15/06',
'⭐ Avis Google gamifiés : paliers 30=50€, 50=70€, 100=100€ pour toute l\'équipe',
'⭐ Récolter un avis : QR code à montrer en face à face + lien/message WhatsApp prêt',
'🎟️ Carte à gratter hebdo pour l\'entourage (offre surprise, 1 ticket/semaine, code unique, partage WhatsApp)',
'📅 Séances Calendly automatiques : les réservations des prospects arrivent dans "Séances fixées" (avec bouton Confirmer)',
'🔴 Rappels dans la journée : "rappeler à midi/14h…" + "Pas de réponse → +2h" + section "À rappeler maintenant"',
'🆘 Filet "À reprendre" : un lead d\'un conseiller absent ne se perd plus (visible par l\'équipe)',
'🗓️ Relances jour par jour + sélecteur (aujourd\'hui / demain / un jour précis)',
'💡 Cagnotte : potentiel à gagner affiché (leads chauds en attente)',
'🤳 Photo de profil perso + couleur de l\'app (Volt, Vert, Bleu, Rose, Blanc) + mode Jour/Nuit',
'🧭 Guide interactif au 1er lancement (+ "Revoir le guide")',
'🔔 Notifications Telegram au patron (parrainage, carte à gratter, demande d\'avis)',
'📈 Suivi des connexions de l\'équipe (côté admin) : qui s\'est connecté, combien de fois',
'🐞 Bouton "Signaler un bug" + écran "Notes de version"',
'✨ Écran de lancement : slogans motivants + citations de grandes personnalités',
],
fixes:[
'WhatsApp : n\'éjecte plus l\'app quand on envoie un message (correction PWA)',
'Relances : affichées par date, plus de "lead déjà traité" qui revient',
'Classement Performance : un closing compte même sur un vieux lead (par date de conversion)',
'Cagnotte : inclut les primes avis pour atteindre l\'objectif 300€',
'Mode jour : éléments qui étaient invisibles maintenant lisibles',
'Affichage : l\'app remplit tout l\'écran (plus d\'espace vide en bas)',
'Séances : on distingue celles réservées par le prospect (Calendly) de celles fixées par l\'employé',
],
},
];
// ════════ PROFIL ════════
function ScreenProfile({ d, go, H, onLogout }) {
const sortedM = [...d.leaderboard].sort((a,b)=>(b.total||0)-(a.total||0));
const myRank = sortedM.findIndex(x=>x.me)+1; const rank = myRank>0 ? '#'+myRank : '—';
const [acc, setAcc] = useState(()=>{ try{ return (JSON.parse(localStorage.getItem('4ds_accent')||'null')||{}).name||'Volt'; }catch(_){ return 'Volt'; } });
const [mode, setModeS] = useState(getMode());
const [info, setInfo] = useState(null);
const [news, setNews] = useState(false);
const [activity, setActivity] = useState(null);
const [seenSheet, setSeenSheet] = useState(null);
const [photoVer, setPhotoVer] = useState(0);
const [photoBusy, setPhotoBusy] = useState(false);
const fileRef = useRef(null);
const isAdmin = d.me === ADMIN;
const canSeeNotes = isAdmin || d.me === 'Dev';
const onPickPhoto = (e) => {
const file = e.target.files && e.target.files[0]; if(!file) return;
if(!/^image\//.test(file.type)) { alert('Choisis une image.'); return; }
setPhotoBusy(true);
const img = new Image();
img.onload = () => {
const S=128, cv=document.createElement('canvas'); cv.width=S; cv.height=S; const ctx=cv.getContext('2d');
const r=Math.max(S/img.width, S/img.height), w=img.width*r, h=img.height*r;
ctx.drawImage(img, (S-w)/2, (S-h)/2, w, h);
let q=0.6, url=cv.toDataURL('image/jpeg', q);
while(url.length>42000 && q>0.3){ q-=0.1; url=cv.toDataURL('image/jpeg', q); }
URL.revokeObjectURL(img.src);
api('/api/photo', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ dataUrl:url }) })
.then(res=>{ if(res&&res.ok){ window.__photos = { ...(window.__photos||{}), [d.me]: url }; setPhotoVer(v=>v+1); } else { alert('Échec : '+((res&&res.reason)||'envoi')); } })
.catch(()=>alert('Échec de l\'envoi'))
.finally(()=>setPhotoBusy(false));
};
img.onerror = ()=>{ setPhotoBusy(false); alert('Image illisible.'); };
img.src = URL.createObjectURL(file);
};
useEffect(()=>{ if(isAdmin){ api('/api/activity').then(a=>setActivity(a.items||[])).catch(()=>{}); } },[]);
const s = d.stats || {};
const objectifsBody =
💰 Cagnotte {d.goal} € ce mois.
{s.doubleFrom > 0 &&
🔥 Bonus ×2 {s.doubleFrom} inscriptions , tes primes doublent : MRR {(s.primeMrr||5)*2}€ , comptant {(s.primeComptant||10)*2}€ .
}
⭐ Avis Google (équipe)
;
const menu = [
{ label:'Objectifs', onClick:()=>setInfo({ title:'Tes objectifs', body:objectifsBody }) },
{ label:'Historique versements', onClick:()=>go('gains') },
{ label:'Leads archivés', onClick:()=>H.openCat('perdus','Leads archivés') },
{ label:'🧭 Revoir le guide', onClick:()=>H.replayTour() },
...(canSeeNotes ? [{ label:'📋 Notes de version', onClick:()=>setNews(true) }] : []),
{ label:'Notifications', onClick:()=>setInfo({ title:'Notifications', body:'Bientôt : rappels automatiques pour tes relances du jour et tes nouveaux leads.' }) },
{ label:'🐞 Signaler un bug', href:'https://wa.me/33640921143?text='+encodeURIComponent(`🐞 Bug app 4D\nDe : ${d.me}\nÉcran : \nCe qui s'est passé : \n`) },
{ label:'Aide & contact manager', href:'https://wa.me/33640921143?text='+encodeURIComponent("Salut, j'ai une question sur l'appli 4D") },
];
return
{d.me}
{photoBusy?'Envoi de la photo…':'Touche ta photo pour la changer'}
{[['Prime du mois',fmt(d.cagnotte),T.volt],['Inscrits',String(d.inscrits),T.text],['Rang',rank,T.text]].map(([k,v,c])=>(
))}
{isAdmin && <>
ACTIVITÉ ÉQUIPE · ADMIN
{!activity &&
Chargement…
}
{activity && activity.map((m,i)=>{ const recent = m.lastSeen && (Date.now()-new Date(m.lastSeen).getTime() < 86400000); return (
m.count>0 && setSeenSheet(m)} style={{ display:'flex', alignItems:'center', gap:12, padding:'11px 0', borderBottom: i
0?'pointer':'default' }}>
{m.name}
{m.count>0?`${m.count} connexion${m.count>1?'s':''}${m.count>0?' · voir ›':''}`:'pas encore connecté'}
{relTime(m.lastSeen)}
); })}
VOIR L'INTERFACE D'UN MEMBRE · ADMIN
{(d.team||[]).filter(m=>m!==ADMIN).map((m,i,arr)=>(
H.setViewAs(m)} style={{ display:'flex', alignItems:'center', gap:12, padding:'11px 0', borderBottom:i
{m}
👁 Voir ›
))}
Lecture seule, sans compter de connexion.
}
AFFICHAGE
{[['night','🌙 Nuit'],['day','☀️ Jour']].map(([id,lb])=>(
{ setMode(id); setModeS(id); }} style={{ flex:1, border:'none', cursor:'pointer', borderRadius:9, padding:'10px 0', ...hk, fontSize:14, fontWeight:700, background:mode===id?T.volt:'transparent', color:mode===id?T.ink:T.muted }}>{lb}
))}
COULEUR DE L'APP
{ACCENTS.map(a=>({ applyAccent(a); setAcc(a.name); }}
style={{ width:40, height:40, borderRadius:999, background:a.hex, cursor:'pointer',
border: acc===a.name?'3px solid #fff':`2px solid ${T.line}`, boxShadow: acc===a.name?`0 0 0 3px ${hexRgba(a.hex,0.4)}`:'none' }} />))}
Juste pour toi, sur ton téléphone.
{menu.map(it=> it.href
?
{it.label}
:
{it.label}
)}
{news && setNews(false)}>
{sheetTitle('📋 Notes de version')}
L'historique des évolutions de l'app.
{CHANGELOG.map((v,i)=>(
{v.title}
{v.date}
{v.news && v.news.length>0 && <>
✨ NOUVEAUTÉS
{v.news.map((t,k)=>(
• {t}
))}
}
{v.fixes && v.fixes.length>0 && <>
🔧 CORRECTIONS
{v.fixes.map((t,k)=>(
• {t}
))}
}
))}
setNews(false)} style={{ width:'100%', marginTop:16, ...obtn, color:T.muted }}>Fermer
}
{info && setInfo(null)}>
{sheetTitle(info.title)}
{info.body}
setInfo(null)} style={{ width:'100%', marginTop:16, ...obtn, color:T.muted }}>Fermer
}
{seenSheet && setSeenSheet(null)}>
{seenSheet.name}
{seenSheet.count} connexion{seenSheet.count>1?'s':''} au total
DERNIÈRES SESSIONS
{(seenSheet.history||[]).length===0 &&
Aucun historique.
}
{(seenSheet.history||[]).map((iso,i)=>{ const dt=new Date(iso); return (
{dt.toLocaleDateString('fr-FR',{weekday:'short', day:'2-digit', month:'2-digit'})}
{String(dt.getHours()).padStart(2,'0')}h{String(dt.getMinutes()).padStart(2,'0')}
); })}
setSeenSheet(null)} style={{ width:'100%', marginTop:16, ...obtn, color:T.muted }}>Fermer
}
;
}
// ════════ Feuilles (sheets) ════════
function Sheet({ children, onClose, tall }) {
return
e.stopPropagation()} style={{ position:'relative', width:'100%', maxWidth:480, background:T.surface, borderRadius:'22px 22px 0 0', padding:'20px 20px calc(20px + env(safe-area-inset-bottom))', border:`1px solid ${T.line}`, ...hk, color:T.text, maxHeight:'94vh', overflowY:'auto' }}>
{onClose &&
✕
}
{children}
;
}
const sheetTitle = (t) => {t}
;
// Fiche d'un lead, SWIPEABLE : glisse gauche/droite pour passer au lead suivant/précédent.
function LeadSheet({ state, setSheet, H, onClose }) {
const { list, index } = state;
const lead = list[index];
const [dir, setDir] = useState('next');
const [notes, setNotes] = useState(null);
const startX = useRef(null);
useEffect(()=>{ if(!lead) return; setNotes(null);
api('/api/notes?id='+encodeURIComponent(lead.id)).then(j=>setNotes((j.notes||[]).filter(n=>n.text&&n.text.trim()))).catch(()=>setNotes([]));
},[lead && lead.id]);
if (!lead) return null;
const go = (delta) => { const ni = index + delta; if (ni >= 0 && ni < list.length) { setDir(delta>0?'next':'prev'); setSheet({ list, index: ni }); } };
const onStart = (x) => { startX.current = x; };
const onEnd = (x) => { if (startX.current == null) return; const dx = x - startX.current; startX.current = null; if (dx < -45) go(1); else if (dx > 45) go(-1); };
return
go(-1)} disabled={index<=0} style={{ background:'none', border:'none', color:index>0?T.text:T.line, fontSize:24, cursor:'pointer', padding:'0 6px' }}>‹
{index+1} / {list.length} · glisse ← →
go(1)} disabled={index>=list.length-1} style={{ background:'none', border:'none', color:index›
{/* Zone de swipe = haut de la carte (les boutons gardent un clic normal) */}
onStart(e.touches[0].clientX)} onTouchEnd={e=>onEnd(e.changedTouches[0].clientX)}
onPointerDown={e=>{ onStart(e.clientX); try{ e.currentTarget.setPointerCapture(e.pointerId); }catch(_){} }}
onPointerUp={e=>onEnd(e.clientX)} style={{ touchAction:'pan-y', cursor:'grab' }}>
{lead.name}
{lead.urgent && NOUVEAU }
{lead.phone||'pas de numéro'}{lead.plan?` · ${lead.plan}`:''}
HISTORIQUE
{notes===null &&
Chargement des notes…
}
{notes && notes.length===0 &&
Aucune note pour l'instant.
}
{notes && notes.length>0 &&
{notes.map((n,i)=>(
{n.text}
))}
}
Fermer
;
}
// RDV / relance / pas intéressé / note
function ActionSheet({ state, onClose, onDone }) {
const { lead, mode } = state;
const isRdv = mode==='rdv', isRel = mode==='relance', dated = isRdv||isRel;
const [date, setDate] = useState(isRdv?plusDaysISO(1):isRel?plusDaysISO(1):'');
const [time, setTime] = useState('18:00');
const [note, setNote] = useState('');
const [busy, setBusy] = useState(false);
const titles = { rdv:'Séance d’essai le', relance:'Relancer le', pasinteresse:'Pas intéressé', note:'Note rapide' };
const quicks = isRdv ? [['Aujourd’hui',0],['Demain',1],['Dans 2 j',2]] : isRel ? [['Demain',1],['Dans 2 j',2],['Dans 1 sem',7]] : [];
const submit = async (skipDate) => {
if (dated && !skipDate && isSunday(date)) { setDate(plusDaysISO(1)); return; }
setBusy(true);
const sig = note.trim() ? (noteSign()+' : '+note.trim()) : '';
try {
if (isRdv) { const p={}; if(!skipDate&&date) p.date = time?new Date(`${date}T${time}`).toISOString():date; if(sig)p.note=sig; await act(lead.id,'rdv',p); }
else if (isRel) { if(!date){setBusy(false);return;} const p={date}; if(sig)p.note=sig; await act(lead.id,'relance',p); }
else if (mode==='pasinteresse') { await act(lead.id,'pasinteresse', sig?{note:sig}:{}); }
else { if(!sig){setBusy(false);return;} await act(lead.id,'note',{note:sig}); }
onDone((isRdv||mode==='pasinteresse') ? lead.id : null);
} catch(e){ setBusy(false); alert('Échec : '+e.message); }
};
return
{sheetTitle(titles[mode])}
{dated && <>
{isRel && <>
RAPPELER AUJOURD'HUI À
{[['Dans 1h',inHoursISO(1)],['🕛 Midi',todayAtISO(12)],['14h',todayAtISO(14)],['16h',todayAtISO(16)],['17h',todayAtISO(17)]].map(([lb,iso])=>(
setDate(iso)} style={{ ...obtn, padding:'8px 12px', fontSize:13, flex:'1 0 28%', borderColor: date===iso?T.volt:T.line, color: date===iso?T.volt:T.text }}>{lb} ))}
OU UN AUTRE JOUR
}
{quicks.map(([lb,n])=>(setDate(plusDaysISO(n))} style={{ ...obtn, flex:1, padding:'9px 0', fontSize:13 }}>{lb} ))}
{isSunday(date) && Fermé le dimanche, choisis un autre jour.
}
}
{noteSign()}
