// shell.jsx — App shell, navigation, routing, role switch, root
const { useState: useS, useEffect: useE, useRef: useSR } = React;
const NAV = [
{ key:'dashboard', label:'Dashboard', icon:'dashboard' },
{ key:'new-lead', label:'Nouveau lead', icon:'plus', accent:true },
{ key:'leads', label:'Mes leads', icon:'list' },
{ key:'commissions', label:'Commissions', icon:'euro' },
{ key:'resources', label:'Ressources', icon:'download' },
{ key:'settings', label:'Paramètres', icon:'settings' },
];
const PAGE_HEAD = {
dashboard: { title:`Bonjour ${window.LBC_DATA.PARTNER.firstName}`, sub:'Voici l\'activité de votre réseau ce mois-ci.', wave:true },
leads: { title:'Mes leads', sub:'Suivez la progression de chaque client recommandé.' },
commissions: { title:'Mes commissions', sub:'Vos gains, versés et à venir.' },
tiers: { title:'Niveaux partenaires', sub:'Plus vous recommandez, plus votre taux augmente.' },
resources: { title:'Ressources partenaires' },
settings: { title:'Paramètres', sub:'Gérez votre profil et vos préférences.' },
};
const SKEL_SCREENS = ['dashboard','leads','commissions','lead-detail'];
if (!window.LBC_LINK) window.LBC_LINK = { status:'devis', payment:null };
function linkAccept(l, method){
return { ...l, status:'accepte', commissionStatus:'attente',
timeline: window.LBC_DATA.buildTimeline('accepte', l.dates),
estValue: l.value, commission: Math.round(l.value * l.rate / 100),
payment: method, deposit: Math.round(l.value*0.3) };
}
function linkEffectue(l){
return { ...l, status:'effectue', commissionStatus:'valide', timeline: window.LBC_DATA.buildTimeline('effectue', l.dates) };
}
function darken(hex, amt) {
try { const n = parseInt(hex.slice(1),16); let r=(n>>16)-amt, g=((n>>8)&255)-amt, b=(n&255)-amt;
r=Math.max(0,Math.min(255,r)); g=Math.max(0,Math.min(255,g)); b=Math.max(0,Math.min(255,b));
return '#'+((1<<24)+(r<<16)+(g<<8)+b).toString(16).slice(1); } catch(e){ return hex; }
}
/* ---- Sidebar (desktop, partner) ---- */
function Sidebar({ screen, go, partner }) {
return (
);
}
/* ---- Topbar (desktop, partner) ---- */
function Topbar({ partner, onBell, unread, onSearch }) {
return (
{partner.company}
Espace partenaire
);
}
function PageHeader({ head, mobile }) {
if (!head) return null;
return (
{head.title}{head.wave?' 👋':''}
{head.sub &&
{head.sub}
}
);
}
function Screen({ screen, ctx }) {
switch(screen) {
case 'dashboard': return ;
case 'new-lead': return ;
case 'leads': return ;
case 'lead-detail': return ;
case 'commissions': return ;
case 'tiers': return ;
case 'resources': return ;
case 'settings': return ;
default: return ;
}
}
function Fab({ go }) {
return (
);
}
/* ---- Desktop app (partner) ---- */
function DesktopApp({ screen, go, ctx, partner, loading, notif }) {
const head = PAGE_HEAD[screen];
const showFab = ['dashboard','leads','commissions'].includes(screen);
const skel = loading && SKEL_SCREENS.includes(screen);
return (
{notif.open &&
}
{showFab &&
}
);
}
/* ---- Mobile ---- */
const MNAV = [
{ key:'dashboard', label:'Accueil', icon:'dashboard' },
{ key:'leads', label:'Leads', icon:'list' },
{ key:'new-lead', label:'Lead', icon:'plus', center:true },
{ key:'commissions', label:'Gains', icon:'euro' },
{ key:'settings', label:'Profil', icon:'user' },
];
function MobileNav({ screen, go }) {
return (
{MNAV.map(n=>{
const active = screen===n.key || (n.key==='leads'&&screen==='lead-detail') || (n.key==='commissions'&&screen==='tiers');
if (n.center) return (
);
return (
);
})}
);
}
function MobileApp({ screen, go, ctx, partner, loading, notif }) {
const head = PAGE_HEAD[screen];
const skel = loading && SKEL_SCREENS.includes(screen);
return (
{notif.open &&
}
{head ?
: null}
{skel ?
:
}
);
}
/* ============== ROOT ============== */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"primary": "#B63D24",
"font": "Geist",
"density": "regular",
"tierStyle": "gradient"
}/*EDITMODE-END*/;
function App() {
const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
const isNarrow = ()=> typeof window!=='undefined' && window.innerWidth < 820;
const [realMobile, setRealMobile] = useS(isNarrow());
const [mode, setMode] = useS(isNarrow()?'mobile':'desktop');
useE(()=>{ const h=()=>{ const m=isNarrow(); setRealMobile(m); setMode(m?'mobile':'desktop'); }; window.addEventListener('resize',h); return ()=>window.removeEventListener('resize',h); }, []);
// Sur un vrai téléphone : plein écran (pas la maquette iPhone). Sur desktop : maquette pour l'aperçu admin.
const Frame = ({ dark, children })=> realMobile ? {children}
: {children};
const [role, setRole] = useS('partner');
const [auth, setAuth] = useS(false);
const [screen, setScreen] = useS('login');
const [adminScreen, setAdminScreen] = useS('i_accueil');
const [clientScreen, setClientScreen] = useS('suivi');
const [clientStatus, setClientStatus] = useS('devis');
const [clientPayment, setClientPayment] = useS(null);
const [clientSolde, setClientSolde] = useS(false);
const [payOpen, setPayOpen] = useS(false);
const [payMode, setPayMode] = useS('acompte');
const [retrievals, setRetrievals] = useS([
]);
const [boxItems, setBoxItems] = useS(()=> window.SEED_BOX.slice());
const [staffAuth, setStaffAuth] = useS(false);
const [sbProfile, setSbProfile] = useS(null);
const [chat, setChat] = useS([{ from:'staff', text:`Bonjour ${window.CLIENT.firstName}, je suis Karim, votre conseiller LBC. Une question sur votre déménagement ?`, time:'09:12' }]);
const [notes, setNotes] = useS([{ who:'TL', text:'Cliente recommandée par notre meilleure agence — à soigner.', time:'29 mai, 14h02' }]);
const [authScreen, setAuthScreen] = useS('login');
const [params, setParams] = useS({});
const [toast, setToast] = useS({ show:false, msg:'' });
// Leads = projection partenaire de la base unique partagée avec le cockpit admin (synchro temps réel)
window.LBC_INT.useStore();
const leads = window.LBC_INT.partnerLeads(window.LBC_DATA.PARTNER.company);
const [loading, setLoading] = useS(false);
const [notifList, setNotifList] = useS(()=> window.LBC_DATA.NOTIFS);
const [notifOpen, setNotifOpen] = useS(false);
const [cmdk, setCmdk] = useS(false);
const [tour, setTour] = useS(false);
const [seenTour, setSeenTour] = useS(false);
const [doc, setDoc] = useS(null);
const partner = window.LBC_DATA.PARTNER;
// apply tweaks
useE(()=>{
const r = document.documentElement;
r.style.setProperty('--brand', tw.primary);
r.style.setProperty('--brand-bright', tw.primary);
r.style.setProperty('--brand-hover', darken(tw.primary, 16));
r.style.setProperty('--font', tw.font);
}, [tw.primary, tw.font]);
// ⌘K
useE(()=>{
const h = (e)=>{ if((e.metaKey||e.ctrlKey) && e.key.toLowerCase()==='k'){ e.preventDefault(); if(auth && role==='partner') setCmdk(v=>!v); }
if(e.key==='Escape'){ setCmdk(false); setNotifOpen(false); } };
window.addEventListener('keydown', h); return ()=>window.removeEventListener('keydown', h);
}, [auth, role]);
const go = (s, p={}) => {
if (role==='admin') { setAdminScreen(s); setParams(p); return; }
if (role==='client') { setClientScreen(s); return; }
setScreen(s); setParams(p); setNotifOpen(false);
if (SKEL_SCREENS.includes(s)) { setLoading(true); setTimeout(()=>setLoading(false), 460); }
};
const showToast = (msg) => { setToast({ show:true, msg }); setTimeout(()=>setToast(t=>({ ...t, show:false })), 2600); };
const openDoc = (kind, lead) => setDoc({ kind, lead });
const addLead = (f) => {
// crée le déménagement (partenaire = société du compte connecté) ; la synchro Supabase le persiste,
// le partenaire le revoit à la reconnexion et l'admin le voit aussi.
window.LBC_INT.addPartnerLead(f);
showToast('Lead envoyé — LBC contacte '+(f.first||'votre client')+' sous 24h');
};
const login = () => { setAuth(true); setScreen('dashboard'); if(!seenTour){ setTimeout(()=>setTour(true), 350); } };
const logout = () => { setAuth(false); setAuthScreen('login'); setScreen('login'); setNotifOpen(false); };
const switchRole = (r) => {
if(r==='client' && window.LBC_SB && window.LBC_SB.fillClientFromMove){
const moves=(window.LBC_INT.store.db.moves)||[];
const mv = moves.find(m=>(m.inventaire||[]).length && Number(m.montant)>0) || moves.find(m=>m.statut==='devis_envoye') || moves.find(m=>(m.inventaire||[]).length) || moves[0];
window.LBC_SB.fillClientFromMove(mv);
const map={ devis_a_envoyer:'recu', devis_envoye:'devis', confirme:'accepte', attente_paiement:'accepte', termine:'effectue', refuse:'recu', annule:'recu' };
setClientStatus(mv?(map[mv.statut]||'devis'):'recu'); setClientScreen('suivi'); setBoxItems([]);
}
setRole(r); setNotifOpen(false); setCmdk(false);
};
const applyProfile = (p) => { setSbProfile(p); const r = p.role==='admin'?'admin':(p.role==='client'?'client':'partner'); setRole(r); setAuth(true); setStaffAuth(true);
if(r==='client'){ setClientScreen('suivi'); setBoxItems([]); const mv=(window.LBC_INT.store.db.moves||[])[0]; const map={ devis_a_envoyer:'recu', devis_envoye:'devis', devis_accepte:'accepte', confirme:'accepte', attente_paiement:'accepte', termine:'effectue', refuse:'recu', annule:'recu' }; setClientStatus(mv?(map[mv.statut]||'devis'):'recu'); }
};
const sbLogout = async () => { try{ if(window.LBC_SB) await window.LBC_SB.signOut(); }catch(e){} setSbProfile(null); setAuth(false); setStaffAuth(false); setRole('partner'); setScreen('login'); };
// Reprise de session : lien magique client OU session déjà active -> connexion auto
useE(()=>{ if(window.LBC_SB && window.LBC_SB.restore){ window.LBC_SB.restore().then(p=>{ if(p) applyProfile(p); }).catch(()=>{}); } }, []);
const acceptDevis = () => { setPayMode('acompte'); setPayOpen(true); };
const paySolde = () => { setPayMode('solde'); setPayOpen(true); };
const completePayment = (method) => {
if (payMode==='solde') {
setClientSolde(true); setClientStatus('termine');
window.LBC_LINK = { ...window.LBC_LINK, status:'effectue', soldePaid:true };
window.LBC_INT.setMoveStatut('L-2420','termine');
setNotifList(ns => [{ id:'eff'+Date.now(), icon:'check', tone:'verse', title:'Déménagement effectué', body:'Élise Moreau a réglé le solde — votre commission est débloquée.', time:'À l\'instant', unread:true }, ...ns]);
showToast('Solde réglé — merci de votre confiance !'); return;
}
setClientStatus('accepte'); setClientPayment(method);
window.LBC_LINK = { status:'accepte', payment:method };
window.LBC_INT.setMoveStatut('L-2420','confirme');
setNotifList(ns => [{ id:'lnk'+Date.now(), icon:'check', tone:'effectue', title:'Lead accepté + acompte versé', body:'Élise Moreau a accepté son devis (Nice → Bordeaux) et réglé l\'acompte.', time:'À l\'instant', unread:true }, ...ns]);
};
const closePayment = () => { setPayOpen(false); if(payMode==='acompte' && clientStatus==='accepte') setClientScreen('suivi'); };
const requestRetrieval = () => {
setRetrievals(rs => rs.some(r=>r.client==='Élise Moreau') ? rs : [{ id:'R-'+Date.now(), client:'Élise Moreau', box:'Box M', requested:'À l\'instant', status:'en attente' }, ...rs]);
showToast('Demande de récupération envoyée — LBC vous recontacte pour planifier');
};
const scheduleRetrieval = (id) => { setRetrievals(rs => rs.map(r=>r.id===id?{...r,status:'planifié'}:r)); showToast('Récupération planifiée — le client est notifié'); };
const boxApi = { items: boxItems,
add:(it)=>setBoxItems(x=>[...x,it]),
remove:(id)=>setBoxItems(x=>x.filter(i=>i.id!==id)),
reorder:(from,to)=>setBoxItems(x=>{ const a=[...x]; const [m]=a.splice(from,1); a.splice(to,0,m); return a; }) };
const chatApi = { msgs: chat,
send:(from,text)=>{ setChat(c=>[...c,{ from, text, time:'à l\'instant' }]);
if(from==='client'){ setNotifList(ns=>[{ id:'msg'+Date.now(), icon:'mail', tone:'devis', title:'Nouveau message client', body:'Élise Moreau vous a écrit.', time:'À l\'instant', unread:true }, ...ns]);
setTimeout(()=>setChat(c=>[...c,{ from:'staff', text:'Bien noté Élise, je m\'en occupe et reviens vers vous très vite.', time:'à l\'instant' }]), 1500); } } };
const notesApi = { notes, add:(text)=>setNotes(n=>[...n,{ who:'TL', text, time:'à l\'instant' }]) };
const unread = notifList.filter(n=>n.unread).length;
const notif = { open:notifOpen, list:notifList, unread,
toggle:()=>setNotifOpen(v=>!v), close:()=>setNotifOpen(false),
readAll:()=>setNotifList(ns=>ns.map(n=>({ ...n, unread:false }))) };
const ctx = { go, leads, partner, addLead, showToast, openDoc, openCmdk:()=>setCmdk(true), tw, mobile:false, id:params.id };
// statement rows for print
const stmtRows = leads.filter(l=>['accepte','effectue','verse'].includes(l.status)).map(l=>({
l, cs: l.commissionStatus==='verse'?{l:'Versé'}:(l.commissionStatus==='valide'?{l:'Validé'}:{l:'En attente'}) }));
let body;
if (window.SbLogin && !sbProfile) {
const sl = ;
body = mode==='mobile' ? {sl} : {sl}
;
} else if (sbProfile && sbProfile.role==='partenaire' && sbProfile.statut!=='actif') {
const pend = (
⏳
Compte en attente de validation
Ton compte partenaire a bien été créé. L'équipe LBC doit le valider avant que tu accèdes à tes leads. Tu y auras accès dès l'activation.
);
body = mode==='mobile' ? {pend} : {pend}
;
} else if (role==='admin' && !staffAuth) {
const Login = window.SbLogin || StaffLogin;
const sl = setStaffAuth(true)} />;
body = mode==='mobile' ? {sl} : {sl}
;
} else if (role==='admin') {
body = mode==='mobile'
?
:
;
} else if (role==='client') {
const clientEl = ;
body = mode==='mobile'
? {clientEl}
: {clientEl}
;
} else if (!auth) {
const AuthScreen = authScreen==='register' ? RegisterScreen : LoginScreen;
const authProps = { mobile: mode==='mobile', onLogin:login, go:(s)=>setAuthScreen(s) };
body = mode==='mobile'
?
: ;
} else {
body = mode==='mobile'
?
:
;
}
const stageCls = 'stage' + (tw.density==='compact'?' density-compact':tw.density==='comfy'?' density-comfy':'');
return (
{(sbProfile && sbProfile.role==='admin') ? 'LBC Platform · Prototype' : 'LBC Déménagement'}
{sbProfile && sbProfile.role==='admin' &&
}
{sbProfile && sbProfile.role==='admin' &&
}
{sbProfile &&
}
{(mode==='mobile' && !realMobile) ?
{body}
: body}
{cmdk && role==='partner' &&
setCmdk(false)} />}
{tour && role==='partner' && { setTour(false); setSeenTour(true); }} />}
{payOpen && role==='client' && }
{doc && setDoc(null)} />}
);
}
ReactDOM.createRoot(document.getElementById('root')).render();