// FOOTPASS Final · PANNEAU DE GESTION DE STRUCTURE (sous-page plein écran, pattern PgPage) // 5 lots validés : invitations en 3 temps · bandeau Équipe & sièges · fiche personne · // thème or (liseré + bandeau « casquette ») · coffre filtré structure. // Une seule vérité de démo (STP_STAFF / STP_MEMBERS) ; chaque compteur s'en déduit. // Vocabulaire : « autorisation » jamais « mandat » · « Suisse » jamais « Europe » · l'or en touche, jamais en aplat. const { useState: useStateStp, useEffect: useEffectStp } = React; const stpTX = (s) => (typeof TX === 'function' ? TX(s) : s); const stpSlug = (n) => ((n || '').toUpperCase().replace(/[^A-Z]/g, '').slice(0, 4) || 'FTPS'); const stpOrd = (n) => `${n}e`; // ── Icônes locales (vocabulaire trait 1.3, comme le reste de l'app) ── const StpChev = () => ; const StpCheck = ({ s = 11 }) => ; // ── Icônes de la grappe d'en-tête · alignées au pixel sur les piliers (Coffre-fort / Autorisations) ── const StpInsights = () => ; const StpPersonPlus = () => ; const StpPlus = () => ; const StpI = { People: () => , Mail: () => , Shield: ({ check }) => {check ? : null}, Lock: () => , Grid: () => , Card: () => , Gear: () => , Clock: () => , Doc: () => , Chart: () => , Heart: () => , Portal: () => , Pen: () => , Eye: () => , }; const stpDosIc = (k) => k === 'shieldc' ? : k === 'shield' ? : k === 'pen' ? : k === 'clock' ? : k === 'lock' ? : ; // ── Marques de pass (cibles exactes de la référence) ── const STP_PASS = { pro: { label: 'PassPRO', lie: true, price: '19,99', full: '29,99' }, start: { label: 'PassSTART', price: '9,99' }, staff: { label: 'PassSTAFF', price: '1,99' }, }; const StpPB = ({ brand }) => { const p = STP_PASS[brand] || STP_PASS.pro; return {p.label}{p.lie ? lié : null}; }; // Libellés payeur uniques et neutres (référence · point 3) const STP_PAY = { included: ['inc', 'Siège inclus'], structure: ['st', 'Par la structure'], self: ['self', 'À sa charge'] }; const StpPay = ({ pay }) => { const [c, l] = STP_PAY[pay] || STP_PAY.self; return {stpTX(l)}; }; // ── Aperçu public : la page structure telle que les autres la voient (rendue par FPStructSheet) ── const stpPublicStruct = (st) => ({ mine: true, name: st.name, initials: ((st.name || 'S').replace(/[^A-Za-zÀ-ÿ0-9 ]/g, '').split(/\s+/).filter(Boolean).map((w) => w[0]).slice(0, 2).join('') || 'ST').toUpperCase(), type: st.type || 'Agence', roster: [ { initials: 'LF', name: 'Lucas FERREIRA', id2: 'Joueur pro · AS Monaco', fam: 'joueur', pid: 'lucas', passNo: 'FP-2847-9921-LF', cp: 'Alexandre DA COSTA', terr: 'Monde' }, { initials: 'MR', name: 'Mathis RENARD', id2: 'Joueur pro · FC Nantes', fam: 'joueur', pid: 'mathis', passNo: 'FP-7741-0265-MR', cp: 'Alexandre DA COSTA', terr: 'Europe' }, { initials: 'RB', name: 'Rayan BELKACEM', id2: 'Joueur U17 · centre de formation', fam: 'joueur', passNo: 'FP-5521-9080-RB', cp: 'Alexandre DA COSTA', terr: 'France' }, ], privCount: 2, team: [ { initials: 'AD', name: 'Alexandre DA COSTA', id2: 'Agent · Monde', fam: 'agent', me: true, passNo: '2480 1196 0049' }, { initials: 'NR', name: 'Nadia ROUSSEAU', id2: 'Juridique', fam: 'reseau', passNo: 'FP-2204-6612-NR' }, { initials: 'TB', name: 'Théo BLANC', id2: 'Agent · France', fam: 'agent', passNo: 'FP-3310-4471-TB' }, ], }); // ── Vérité de démo · pay : 'included' (couvert par le forfait) | 'structure' (pris en charge en +) | 'self' (à sa charge) ── const STP_STAFF = [ { id: 'me', pole: 'Direction', role: 'Administrateur', brand: 'pro', pay: 'included', admin: true, cls: 'g' }, { id: 'nadia', name: 'Nadia Rousseau', ini: 'NR', photo: (window.STP_PHOTOS||{}).nadia, pole: 'Juridique', role: 'Gestion déléguée', brand: 'pro', pay: 'included', cls: 'b', passNo: 'FP-2204-6612-NR', since: 'avril 2026' }, { id: 'theo', name: 'Théo Blanc', ini: 'TB', photo: (window.STP_PHOTOS||{}).theo, pole: 'Sportif', role: 'Agent', brand: 'pro', pay: 'self', cls: 'v', passNo: 'FP-3310-4471-TB', since: 'mars 2026' }, { id: 'marc', name: 'Marc Keller', ini: 'MK', photo: (window.STP_PHOTOS||{}).marc, pole: 'Scouting', role: 'Scout', brand: 'pro', pay: 'structure', invited: '48 h' }, ]; const STP_MEMBERS = [ { id: 'lucas', peer: 'lucas', brand: 'pro', pay: 'self', role: 'Joueur pro', club: 'AS Monaco' }, { id: 'mathis', peer: 'mathis', brand: 'pro', pay: 'self', role: 'Joueur pro', club: 'FC Nantes' }, { id: 'rayan', name: 'Rayan Belkacem', ini: 'RB', photo: (window.STP_PHOTOS||{}).rayan, cls: 'o', brand: 'start', pay: 'structure', role: 'Joueur U17', club: 'U17 · centre de formation', passNo: 'FP-5521-9080-RB', price: '9,99' }, { id: 'helene', name: 'Hélène Renard', ini: 'HR', photo: (window.STP_PHOTOS||{}).helene, cls: 'r', brand: 'staff', pay: 'structure', role: 'Parent', club: '·', passNo: 'FP-7742-1130-HR', price: '1,99' }, ]; // Dossier complet par membre du staff : autorisations, dossiers du pôle (par statut), accès documentaires, tâches const STP_DOSSIERS = { nadia: { chips: { atr: 2, cours: 3, traite: 14, signe: 8 }, auths: [ { ic: 'shieldc', cls: 'green', t: 'Délégation · Espace Juridique', e: 'Active · gestion des accès du pôle · émise par la structure' }, { ic: 'pen', t: 'Relecture · Convention', e: 'N. Krstić · Information · expire 20 juil.' }, ], dossiers: [ { st: 'atr', cls: 'amber', t: 'Convention · N. Krstić', e: 'Relecture demandée · échéance 18 juil.', pill: ['warn', 'À TRAITER'] }, { st: 'cours', t: 'Avenant · L. Ferreira', e: 'v2.1 en rédaction · avec Théo Blanc', pill: ['', 'EN COURS'] }, { st: 'traite', t: 'Bail · bureaux Genève', e: 'Classé · 2 juin 2026', pill: ['', 'TRAITÉ'] }, { st: 'signe', cls: 'green', t: 'Statuts de la structure', e: 'Administratif · 12 mars 2026', pill: ['ok', 'SIGNÉ'] }, ], access: [ { ic: 'lock', cls: 'gold', t: 'Tout le Juridique · via catégorie', e: 'documents à venir compris', rts: ['Consulter'] }, { ic: 'doc', t: 'Convention · N. Krstić', e: 'droits par document', rts: ['Consulter', 'Réviser', 'Signer'] }, ], tasks: [ { t: 'Relire la convention N. Krstić', e: 'échéance 18 juil. · rappel la veille' }, { t: 'Préparer l’avenant · L. Ferreira', e: 'avec Théo Blanc · pôle Sportif' }, ], }, theo: { chips: { atr: 1, cours: 2, traite: 12, signe: 6 }, auths: [ { ic: 'shieldc', cls: 'green', t: 'Sous-autorisation · mondiale exclusive', e: 'Rayan Belkacem · émise par A. Da Costa · publique' }, { ic: 'shield', t: 'Représentation via la structure', e: 'Lucas Ferreira · expire janv. 2027 · publique' }, { ic: 'clock', cls: 'amber', t: 'Délégation demandée', e: 'Mathis Renard · 12 juil. · votre accord requis' }, ], dossiers: [ { st: 'atr', cls: 'amber', t: 'Contrat image · R. Belkacem', e: 'À valider · échéance 14 juil.', pill: ['warn', 'À TRAITER'] }, { st: 'cours', t: 'Prolongation · L. Ferreira', e: 'Négociation · avec Nadia Rousseau', pill: ['', 'EN COURS'] }, { st: 'traite', t: 'Bon de transfert · saison 25-26', e: 'Classé · 30 juin 2026', pill: ['', 'TRAITÉ'] }, { st: 'signe', cls: 'green', t: 'Prolongation · précédente', e: 'Signé · 2 juil. 2026', pill: ['ok', 'SIGNÉ'] }, ], access: [ { ic: 'doc', t: 'Prolongation · L. Ferreira', e: 'droits par document', rts: ['Consulter', 'Réviser'] }, { ic: 'lock', cls: 'gold', t: 'Clips & data · R. Belkacem', e: 'Performance', rts: ['Consulter'] }, ], tasks: [ { t: 'Finaliser la prolongation L. Ferreira', e: 'échéance 15 juil.' }, { t: 'Valider le contrat image R. Belkacem', e: 'avec Communication' }, ], }, }; const STP_POLES = [ { n: 'Direction', r: 'A. Da Costa', c: 1 }, { n: 'Sportif', r: 'Théo Blanc', c: 2 }, { n: 'Juridique', r: 'Nadia Rousseau · gestion déléguée', c: 1 }, { n: 'Scouting', r: 'Marc Keller · en attente d’arrivée', c: 1 }, { n: 'Communication', r: 'À pourvoir · déléguer à un membre', c: 0 }, ]; const STP_INV_POLES = ['Direction', 'Sportif', 'Juridique', 'Scouting', 'Communication']; const STP_MEM_STATUS = [['all', 'Tous'], ['atr', 'À traiter'], ['cours', 'En cours'], ['traite', 'Traités'], ['signe', 'Signés']]; const STP_TEAM_FILTERS = [['pro', 'PassPRO'], ['start', 'PassSTART'], ['staff', 'PassSTAFF'], ['pay-st', 'Par la structure'], ['pay-self', 'À sa charge']]; const stpNum = (p) => parseFloat(String(p).replace(/\s/g, '').replace(',', '.')) || 0; const stpFmt = (n) => { const s = n.toFixed(2).replace('.', ','); const i = s.indexOf(','); return i > 3 ? s.slice(0, i - 3) + ' ' + s.slice(i - 3) : s; }; const StpAv = ({ p, size }) => { const peer = p.peer && window.FP_PEERS ? FP_PEERS[p.peer] : null; const me = p.id === 'me' ? window.FP_ME : null; const src = p.photo || (me ? me.photo : peer ? peer.photo : null); const st = size ? { width: size, height: size, fontSize: size * 0.32 } : null; return {src ? : (p.ini || (peer ? peer.initials : 'FP'))}; }; const stpName = (p) => (p.id === 'me' ? FP_ME.name : p.name || (window.FP_PEERS && p.peer && FP_PEERS[p.peer] ? FP_PEERS[p.peer].name : '')); const StpSech = ({ label, link, onLink }) => (
{label}{link ? : null}
); const StpRow = ({ ic, cls, av, b, em, pill, chev, onClick }) => ( ); // ═══════ Page · panneau complet ═══════ function StructurePanelPage({ onBack, showToast, onOpenSub }) { const [, bump] = useStateStp(0); useEffectStp(() => { const f = () => bump((n) => n + 1); window.addEventListener('fp:growth', f); return () => window.removeEventListener('fp:growth', f); }, []); const [view, setViewRaw] = useStateStp('home'); // home | team | member | billing | invites | spaces | params // Pile de navigation interne : « Retour » revient à l'écran précédent DANS la structure ; on ne quitte le panneau que depuis le hub. const navRef = React.useRef([]); const setView = (v) => { if (v !== view) navRef.current.push(view); setViewRaw(v); }; const [showStats, setShowStats] = useStateStp(true); // résumé (3 compteurs) · masquable comme Autorisations / Coffre const [pubOpen, setPubOpen] = useStateStp(false); // aperçu de la page structure publique const [mem, setMem] = useStateStp(null); const [teamSeg, setTeamSeg] = useStateStp('all'); const [teamFilter, setTeamFilter] = useStateStp(null); const [teamSearch, setTeamSearch] = useStateStp(false); // recherche Équipe & sièges · même déclencheur d'en-tête que les piliers const [teamQ, setTeamQ] = useStateStp(''); const [memStatus, setMemStatus] = useStateStp('all'); const [tiersOpen, setTiersOpen] = useStateStp(false); // Invitation en 3 temps (LOT 1) const [invFirst, setInvFirst] = useStateStp('Marc'); const [invLast, setInvLast] = useStateStp('Keller'); const [invPole, setInvPole] = useStateStp('Scouting'); const [invPass, setInvPass] = useStateStp('pro'); const [invPayer, setInvPayer] = useStateStp('structure'); const [invGen, setInvGen] = useStateStp(false); const resetGen = () => { if (invGen) setInvGen(false); }; const st = window.fpGetStructure ? fpGetStructure() : null; const tiers = window.FP_ST_TIERS || []; const t = tiers.find((x) => x.id === (st && st.tier)) || tiers[0] || { id: 'Small', staff: '1–5', price: '499,99', inc: 2 }; const tNext = tiers[tiers.indexOf(t) + 1]; const copy = (s, msg) => { try { if (navigator.clipboard) navigator.clipboard.writeText(s); } catch (e) { /* ignore */ } showToast(msg || stpTX('Lien copié')); }; const demo = (m) => () => showToast(stpTX(m)); if (!st) return

{stpTX('Aucune structure enregistrée.')}

; // ── Compteurs dérivés de la vérité de démo ── const activeStaff = STP_STAFF.filter((m) => !m.invited); const pending = STP_STAFF.filter((m) => m.invited); const seatsActive = activeStaff.length; // 3 const incUsed = Math.min(seatsActive, t.inc); // 2 const seatsExtra = Math.max(0, seatsActive - t.inc); // 1 (Théo) const seatsExtraStr = activeStaff.filter((m) => m.pay === 'structure').length; // sièges suppl. facturés à la structure = 0 const linked = seatsActive + STP_MEMBERS.length; // 7 (une invitation ne compte pas) const coveredMembers = STP_MEMBERS.filter((m) => m.pay === 'structure'); // Rayan, Hélène const coveredCost = coveredMembers.reduce((s, m) => s + stpNum(m.price), 0); // 11,98 const totalYear = stpNum(t.price) + seatsExtraStr * 239.99; // 499,99 aujourd'hui const passCount = { pro: 0, start: 0, staff: 0 }; activeStaff.concat(STP_MEMBERS).forEach((m) => { passCount[m.brand] = (passCount[m.brand] || 0) + 1; }); const stInitials = st.logo ? null : (st.name || 'ST').trim().split(/\s+/).slice(0, 2).map((w) => w[0]).join('').toUpperCase(); // ── Bandeau de synthèse admin (LOT 2) · révélé par l'icône insights, réutilisé sur Équipe & sièges ET Invitations ── const seatSegs = activeStaff.map((m) => (m.pay === 'included' ? 'inc' : 'sup')).concat(pending.map(() => 'inv')); const seatText = `${seatsActive} ${seatsActive > 1 ? stpTX('sièges') : stpTX('siège')} · ${incUsed} ${stpTX('inclus dans')} ${t.id}${seatsExtra > 0 ? ` + ${seatsExtra} ${seatsExtra > 1 ? stpTX('supplémentaires') : stpTX('supplémentaire')}` : ` · ${stpTX('tous inclus')}`}`; const seatNote = pending.length ? `${pending.length} ${pending.length > 1 ? stpTX('invitations en attente') : stpTX('invitation en attente')}` : null; const marc = pending.find((m) => m.pay === 'structure'); const synth = (
{stpTX('Sièges du staff')} {seatNote ? {seatNote} : null}
{seatsActive} {seatsActive > 1 ? stpTX('personnes au staff') : stpTX('personne au staff')}

{incUsed} {incUsed > 1 ? stpTX('sièges compris dans votre palier') : stpTX('siège compris dans votre palier')} {t.id}

{stpTX('Répartition des pass')} {['pro', 'start', 'staff'].filter((b) => passCount[b]).map((b) => {STP_PASS[b].label} × {passCount[b]})}
{stpTX('Payé par la structure')} {stpFmt(coveredCost)} CHF/{stpTX('mois')} · {coveredMembers.length} {coveredMembers.length > 1 ? stpTX('membres') : stpTX('membre')}
{marc ? (
{stpTX('À l’arrivée de')} {stpName(marc).split(' ')[0]} + 19,99 CHF/{stpTX('mois')}
) : null}
{stpTX('Visible par vous (admin)')}
); // « Nouvelle invitation » · relance le flux en 3 temps depuis un formulaire vierge const newInvite = () => { setInvFirst(''); setInvLast(''); setInvPole('Scouting'); setInvPass('pro'); setInvPayer('structure'); setInvGen(false); try { const sc = document.querySelector('.pg-scroll'); if (sc) sc.scrollTop = 0; } catch (e) {} showToast(stpTX('Nouvelle invitation')); }; const openMember = (p) => { if (p.id === 'me') { onOpenSub('passid'); return; } if (p.invited) { setView('invites'); return; } setMem(p); setMemStatus('all'); setView('member'); }; const openVaultStructure = () => { window.__fpVaultFilter = st.name; window.dispatchEvent(new CustomEvent('fp:vault-filter', { detail: { structure: st.name } })); onOpenSub('vault'); }; const TITLES = { home: 'Ma structure', team: 'Équipe & sièges', member: mem ? stpName(mem) : 'Fiche personne', billing: 'Facturation', invites: 'Invitations', spaces: 'Espaces & rôles', params: 'Paramètres' }; const memberSub = mem && (mem.pole ? `${stpTX(mem.role || mem.pole)} · ${stpTX('Pôle')} ${stpTX(mem.pole)} · ${stpTX('depuis')} ${mem.since || 'mars 2026'}` : `${stpTX(mem.role || 'Joueur')} · ${stpTX(mem.club || '·')}`); const back = () => { if (navRef.current.length) setViewRaw(navRef.current.pop()); else onBack(); }; // ── Grappe d'en-tête · patron des piliers : boutons ronds 44 px, insights en tête dans son anneau, puis actions de l'écran ── const insightsBtn = ( ); const action = view === 'home' ? (
{insightsBtn}
) : view === 'team' ? (
{insightsBtn}
) : view === 'invites' ? (
{insightsBtn}
) : view === 'member' ? (
) : null; // Bandeau « casquette » (LOT 4) · sur tous les écrans structure const gband = (
{st.logo ? : stInitials}{stpTX('Vous agissez au nom de')} {st.name} · {stpTX('vos gestes sont consignés au journal')}
 ); const idHead = (extraPill) => (
{st.logo ? : stInitials} {st.name}{stpTX(st.type || 'Agence')} {extraPill}
); const body = (() => { if (view === 'home') { const all = window.fpListStructures ? fpListStructures() : []; return ( {all.length > 1 ? (
{all.map((x) => )}
) : null} {idHead({stpTX('Palier')} {t.id})} {showStats ? (
2{stpTX('À traiter')}
) : null}
} b={stpTX('Demande d’autorisation')} em={stpTX('Nenad Krstić · représentation · à approuver')} chev onClick={() => onOpenSub('mandates')} /> } b={stpTX('1 invitation expire bientôt')} em={stpTX('Marc Keller · lien 72 h à usage unique')} chev onClick={() => setView('invites')} />
} b={stpTX('Équipe & sièges')} em={`${seatsActive} ${stpTX('staff permanent')} · ${STP_MEMBERS.length} ${stpTX('joueurs & membres')}`} chev onClick={() => setView('team')} /> } b={stpTX('Invitations')} em={stpTX('1 en attente · staff ou Pass lié')} chev onClick={() => setView('invites')} />
} b={stpTX('Autorisations')} em={stpTX('Représentation, délégations · 1 à traiter')} chev onClick={() => onOpenSub('mandates')} /> } b={stpTX('Documents & permissions')} em={stpTX('S’ouvre dans le coffre-fort · filtre structure')} chev onClick={openVaultStructure} /> } b={stpTX('Espaces & rôles')} em={`5 ${stpTX('pôles · qui accède à quoi')}`} chev onClick={() => setView('spaces')} />
} b={stpTX('Aperçu de ma page structure')} em={stpTX('Ce que les autres voient de vous')} chev onClick={() => setPubOpen(true)} />
} b={stpTX('Facturation & abonnement')} em={`${t.id} · ${t.price} CHF/${stpTX('an')} · ${stpTX('à jour')}`} chev onClick={() => setView('billing')} /> } b={stpTX('Paramètres')} em={stpTX('Identité, vérification, zone sensible')} chev onClick={() => setView('params')} />

{stpTX('La structure est la porte, pas le portefeuille : elle ne paie que son staff, chaque membre garde son propre Pass.')}

 ); } if (view === 'team') { const tq = teamQ.trim().toLowerCase(); const matchQ = (m) => !tq || `${stpName(m)} ${stpTX(m.role || '')} ${stpTX(m.pole || '')} ${stpTX(m.club || '')}`.toLowerCase().includes(tq); const matchF = (m) => { if (!teamFilter) return true; if (teamFilter === 'pay-st') return m.pay !== 'self'; if (teamFilter === 'pay-self') return m.pay === 'self'; return m.brand === teamFilter; }; const staffList = STP_STAFF.filter((m) => matchF(m) && matchQ(m)); const memberList = STP_MEMBERS.filter((m) => matchF(m) && matchQ(m)); const showStaff = teamSeg !== 'members' && staffList.length > 0; const showMembers = teamSeg !== 'staff' && memberList.length > 0; const memberRow = (m) => ( ); return ( {showStats ? synth : null} {teamSearch ? (
setTeamQ(e.target.value)} placeholder={stpTX('Nom, rôle, pôle, club…')} aria-label={stpTX('Rechercher')} /> {teamQ ? : null}
) : null}
{STP_TEAM_FILTERS.map(([k, l]) => )}
{showStaff ? (
{staffList.map(memberRow)}
 ) : null} {showMembers ? (
{memberList.map(memberRow)}
 ) : null} {!showStaff && !showMembers ?

{stpTX(teamQ.trim() ? 'Aucune personne pour cette recherche.' : 'Aucune personne pour ce filtre.')}

: null}

{stpTX('Le compte appartient à la personne : si elle part, compte et historique restent, ses accès à la structure expirent automatiquement, son PassPRO repasse à 29,99 CHF/mois.')}

 ); } if (view === 'member' && mem) { const d = STP_DOSSIERS[mem.id]; const isStaff = !!mem.pole; const memFam = /joueur/i.test(mem.role || '') ? 'joueur' : /agent/i.test(mem.role || '') ? 'agent' : /juri|avocat|médec|conseil/i.test((mem.role || '') + ' ' + (mem.pole || '')) ? 'reseau' : 'staff'; const memRoleColor = window.m4RoleColor ? window.m4RoleColor(memFam) : null; const passNo = mem.passNo || (mem.peer && FP_PEERS[mem.peer] ? FP_PEERS[mem.peer].passNo : 'FP-····-····'); const dossShown = d ? (memStatus === 'all' ? d.dossiers : d.dossiers.filter((x) => x.st === memStatus)) : []; return (
{stpName(mem)} {stpTX(mem.role || mem.pole || 'Membre')}{!mem.pole && mem.club && mem.club !== '·' ? ` · ${stpTX(mem.club)}` : ''} {passNo}
{d ? (
{STP_MEM_STATUS.map(([k, l]) => )}

{stpTX('Compteurs filtrés sur son pôle :')} {stpTX(mem.pole)}. {stpTX('Ce sont des filtres de statut.')}

{d.auths.map((a, i) => (
{stpDosIc(a.ic)} {stpTX(a.t)}{stpTX(a.e)}
))}
{dossShown.length ? dossShown.map((x, i) => ( )) :
{stpTX('Aucun dossier pour ce statut dans l’aperçu.')}
}
{d.access.map((a, i) => (
{stpDosIc(a.ic)} {stpTX(a.t)}{stpTX(a.e)}{a.rts.map((r, j) => {stpTX(r)})}
))}
{d.tasks.map((x, i) => (
{stpTX(x.t)}{stpTX(x.e)}
))}
) : (
{stpTX('Pass')}{stpTX(mem.pass || (STP_PASS[mem.brand].label + (mem.brand === 'pro' ? ' lié' : '')))}
{stpTX('N° Pass')}{passNo}
{stpTX('Club')}{stpTX(mem.club || '·')}
} b={stpTX('Autorisations le concernant')} em={stpTX('Représentation, délégations')} chev onClick={() => onOpenSub('mandates')} /> } b={stpTX('Documents partagés')} em={stpTX('Dans le coffre · filtre structure')} chev onClick={openVaultStructure} />
)} ); } if (view === 'billing') { return (
{stpTX('Statut')} {st.kind === 'request' ? stpTX('Vérification en cours · 24 h') : stpTX('Active · vérifiée')}
{stpTX('Palier')}{`${t.id} · ${stpTX('staff')} ${t.staff}`}
{stpTX('Forfait annuel')}{`${t.price} CHF`}
{stpTX('Prochaine échéance')}{stpTX('12 mars 2027')}
{`${stpTX('Inclus dans')} ${t.id}`}{`${t.inc} ${stpTX('sièges')}`}
{stpTX('Supplémentaires')}{seatsExtraStr ? `${seatsExtraStr} × 19,99 CHF/${stpTX('mois')}` : `${seatsExtra} ${stpTX('siège à sa charge · 0 CHF pour la structure')}`}
{stpTX('Total structure / an')}{`${stpFmt(totalYear)} CHF`}

{stpTX('Aucun siège supplémentaire facturé à la structure aujourd’hui : le siège de Théo Blanc est à sa charge.')}

setTiersOpen(true)} />
{tNext ? } b={`${tNext.id} · ${stpTX('dès')} ${(tNext.staff || '').split('–')[0]} ${stpTX('permanents')}`} em={`${tNext.price} CHF/${stpTX('an')} · ${tNext.inc} ${stpTX('sièges inclus · proposé, jamais imposé')}`} onClick={() => setTiersOpen(true)} /> : null}
{coveredMembers.map((m) => } b={stpName(m)} em={`${STP_PASS[m.brand].label} · ${m.price} CHF/${stpTX('mois')} · ${stpTX('par la structure')}`} chev onClick={demo('Prise en charge par membre · démo')} />)}

{`${stpTX('Total pris en charge')} : ${coveredMembers.length} ${stpTX('membres')} · ${stpFmt(coveredCost)} CHF/${stpTX('mois')}. ${stpTX('Chaque membre paie son propre Pass ; la structure peut le prendre en charge, membre par membre.')}`}

} b={stpTX('Forfait annuel') + ' ' + t.id} em={`12 ${stpTX('mars')} 2026 · ${t.price} CHF`} pill={['', 'PDF']} onClick={demo('Facture téléchargée (démo)')} /> } b={stpTX('Portail client')} em={stpTX('Moyen de paiement, TVA, reçus')} chev onClick={demo('Portail client · démo')} />

{stpTX('Aucune reconduction cachée : annuel = 12 × mensuel. Vos données restent exportables.')}

{tiersOpen ? ( setTiersOpen(false)} title={stpTX('Les 6 paliers structurels')}>
{tiers.map((x) => (
{`${x.id} · ${stpTX('staff')} ${x.staff}`}{x.id === t.id ? : null}{`${x.price} CHF/${stpTX('an')} · ${x.inc} ${stpTX('sièges')}`}
))}

{stpTX('Palier selon le staff permanent uniquement. Jusqu’à Confirmed : paiement direct, essai 10 jours. Dès Established : sur demande, activation sous 24 h.')}

 ) : null} ); } if (view === 'invites') { const slug = stpSlug(st.name); const p = STP_PASS[invPass]; const passLabel = `${p.label}${p.lie ? ' lié' : ''}`; const payerLabel = invPayer === 'structure' ? stpTX('par la structure') : stpTX('à sa charge'); const isSeat = invPass === 'pro'; // un pôle + PassPRO = siège staff const seatAfter = seatsActive + 1; // ce nouvel arrivant = 4e siège const extraAfter = Math.max(0, seatAfter - t.inc);// 2e au-delà des 2 inclus const covered = seatAfter <= t.inc; const link = `footpass.app/s/${slug}-${isSeat ? 'STAFF' : 'MEMBER'}-2201`; const canGen = invFirst.trim() && invLast.trim(); const seatDetail = isSeat ? (covered ? stpTX('siège inclus, déjà couvert par le forfait') : `${stpOrd(seatAfter)} ${stpTX('siège staff')}, ${stpOrd(extraAfter)} ${stpTX('au-delà des')} ${t.inc} ${stpTX('inclus')} : +${p.price} CHF/${stpTX('mois')} ${stpTX('à son arrivée')}`) : (invPayer === 'structure' ? `${stpTX('pris en charge')} ${p.price} CHF/${stpTX('mois')}` : `${p.price} CHF/${stpTX('mois')} ${stpTX('à sa charge')}`); const structEm = isSeat ? (covered ? `${stpTX('Siège inclus · déjà couvert par le forfait')} · 0 CHF ${stpTX('en plus')}.` : `${stpOrd(seatAfter)} ${stpTX('siège staff')} · ${stpOrd(extraAfter)} ${stpTX('au-delà des')} ${t.inc} ${stpTX('inclus')} : +${p.price} CHF/${stpTX('mois')} ${stpTX('à son arrivée')}.`) : `${stpTX('Pris en charge par la structure')} · ${p.price} CHF/${stpTX('mois')}.`; const passCard = (k, sub) => { const pp = STP_PASS[k]; return ( ); }; return ( {showStats ? synth : null}
1{stpTX('Qui')}
{STP_INV_POLES.map((po) => )}

{stpTX('Le prénom et le nom génèrent le lien personnel et la ligne « En attente ».')}

2{stpTX('Quel pass')}
{passCard('pro', `${stpTX('Acteurs du football professionnel, joueurs pros compris')} · ${stpTX('staff : siège décompté du quota')} · 29,99 CHF/${stpTX('mois')} ${stpTX('hors structure')}.`)} {passCard('start', stpTX('Jeunes joueurs, parents, encadrants amateurs · prix fixe, jamais réduit, lié ou non.'))} {passCard('staff', stpTX('Membres occasionnels ou passifs · interne à la structure uniquement · n’existe que lié.'))}
3{stpTX('Qui paye')}

{stpTX('Réglable pour chaque invitation · la prise en charge est une option, jamais une obligation.')}

{stpTX('Récapitulatif')} {`${invFirst || '·'} ${invLast || ''} · ${stpTX(invPole)} · ${passLabel} · ${payerLabel}`} {`${stpTX('Lien personnel à usage unique · valable 72 h')} · ${seatDetail}`}
{invGen ? (
{link}
) : ( )}
{pending.map((m) => (
{m.name}{stpTX(m.pole)} · {stpTX('lien 72 h · expire dans')} {m.invited}
))}

{stpTX('Une invitation acceptée devient un siège (staff) ou un Pass lié (joueurs & membres) · visible immédiatement dans Équipe & sièges.')}

 ); } if (view === 'spaces') { return (
{STP_POLES.map((p) => ( } b={stpTX(p.n)} em={`${stpTX(p.r)}${p.c ? ' · ' + p.c + ' ' + stpTX(p.c > 1 ? 'personnes' : 'personne') : ''}`} chev onClick={demo('Gestion de l’espace · démo')} /> ))}

{stpTX('Un espace = un pôle de votre structure. Déléguer sa gestion donne à un membre les droits d’y accueillir, retirer et autoriser · révocable en un geste.')}

 ); } // params return ( {idHead()}
{stpTX('Nom')}{st.name}
{stpTX('Type')}{stpTX(st.type || 'Agence')}
{stpTX('Pays')}{stpTX('Suisse')}
{stpTX('Vérification')} {st.kind === 'request' ? stpTX('En cours · 24 h') : stpTX('Vérifiée par FOOTPASS')}
} b={stpTX('Logo & couleur')} em={stpTX('Identité visuelle de la structure')} chev onClick={demo('Logo & couleur · démo')} /> } b={stpTX('Documents de vérification')} em={stpTX('Registre du commerce, statuts')} chev onClick={demo('Documents de vérification · démo')} />

{stpTX('La suppression libère tous les sièges à l’échéance ; chaque membre conserve son compte et son Pass.')}

 ); })(); return {body}{pubOpen && window.FPStructSheet ? setPubOpen(false)} /> : null}; } Object.assign(window, { StructurePanelPage });