@atlashub/smartstack-cli 3.6.0 → 3.8.0

package/templates/skills/business-analyse/html/src/scripts/05-render-specs.js

@@ -0,0 +1,542 @@
+/* ============================================
+   MODULE SPECIFICATION (per module)
+   ============================================ */
+function renderAllModuleSpecs() {
+    const container = document.getElementById('moduleSpecContainer');
+    container.innerHTML = data.modules.map(m => renderModuleSpecSection(m)).join('');
+    // Bind editable fields in module specs
+    container.querySelectorAll('.editable[data-module-field]').forEach(el => {
+        el.addEventListener('blur', function() {
+            const code = this.dataset.moduleCode;
+            const field = this.dataset.moduleField;
+            if (data.moduleSpecs[code]) {
+                data.moduleSpecs[code][field] = this.textContent.trim();
+                autoSave();
+            }
+        });
+    });
+    // Restore currently visible section after re-render
+    restoreCurrentSection();
+}
+
+function renderModuleSpecSection(mod) {
+    const code = mod.code;
+    const spec = data.moduleSpecs[code] || { useCases: [], businessRules: [], entities: [], permissions: [], notes: '' };
+
+    return `
+    <div class="section" id="module-spec-${code}" style="display:none;">
+        <h2 class="section-title">${mod.name}</h2>
+        <p class="section-subtitle">${mod.description || 'Specification detaillee de ce domaine fonctionnel.'}</p>
+
+        <div class="tab-bar">
+            <button class="tab-btn active" onclick="switchTab('${code}', 'uc')">Cas d'utilisation</button>
+            <button class="tab-btn" onclick="switchTab('${code}', 'br')">Regles metier</button>
+            <button class="tab-btn" onclick="switchTab('${code}', 'ent')">Donnees</button>
+            <button class="tab-btn" onclick="switchTab('${code}', 'perm')">Droits d'acces</button>
+            <button class="tab-btn" onclick="switchTab('${code}', 'mock')">Maquettes</button>
+            <button class="tab-btn" onclick="switchTab('${code}', 'notes')">Notes</button>
+        </div>
+
+        <!-- TAB: Cas d'utilisation -->
+        <div class="tab-panel active" id="tab-${code}-uc">
+            <p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:1rem;">Decrivez ce que chaque type d'utilisateur peut faire dans ce domaine. Un cas d'utilisation = une action concrete.</p>
+            <div id="ucList-${code}" class="uc-list">
+                ${spec.useCases.map((uc, i) => renderUseCase(code, uc, i)).join('')}
+            </div>
+            <button class="add-btn" onclick="toggleForm('addUcForm-${code}')">+ Ajouter un cas d'utilisation</button>
+            <div class="inline-form" id="addUcForm-${code}">
+                <div class="inline-form-title">Nouveau cas d'utilisation</div>
+                <div class="form-group">
+                    <label class="form-label">Que fait l'utilisateur ? (exemple : Creer une commande)</label>
+                    <input type="text" class="form-input" id="uc-name-${code}" placeholder="Action concrete de l'utilisateur">
+                </div>
+                <div class="form-group">
+                    <label class="form-label">Qui realise cette action ? (profil utilisateur)</label>
+                    <input type="text" class="form-input" id="uc-actor-${code}" placeholder="Exemple : Responsable de production">
+                </div>
+                <div class="form-group">
+                    <label class="form-label">Deroulement normal, etape par etape (une par ligne)</label>
+                    <textarea class="form-textarea" id="uc-steps-${code}" placeholder="1. L'utilisateur ouvre la page de creation&#10;2. Il remplit les champs obligatoires&#10;3. Il valide le formulaire&#10;4. Le systeme enregistre et confirme"></textarea>
+                </div>
+                <div class="form-group">
+                    <label class="form-label">Que se passe-t-il si quelque chose ne va pas ? (optionnel)</label>
+                    <textarea class="form-textarea" id="uc-alt-${code}" placeholder="Exemple : Si les donnees sont incorrectes, le systeme affiche un message d'erreur" style="min-height:50px;"></textarea>
+                </div>
+                <div class="form-actions">
+                    <button class="btn" onclick="toggleForm('addUcForm-${code}')">Annuler</button>
+                    <button class="btn btn-primary" onclick="addUseCase('${code}')">Ajouter</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- TAB: Regles metier -->
+        <div class="tab-panel" id="tab-${code}-br">
+            <p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:1rem;">Les regles que le systeme doit respecter. Formulez-les sous forme de conditions : "Si... alors... sinon..."</p>
+            <div id="brList-${code}">
+                ${spec.businessRules.map((br, i) => renderBusinessRule(code, br, i)).join('')}
+            </div>
+            <button class="add-btn" onclick="toggleForm('addBrForm-${code}')">+ Ajouter une regle metier</button>
+            <div class="inline-form" id="addBrForm-${code}">
+                <div class="inline-form-title">Nouvelle regle metier</div>
+                <div class="form-group">
+                    <label class="form-label">Nom court de la regle</label>
+                    <input type="text" class="form-input" id="br-name-${code}" placeholder="Exemple : Verification du budget disponible">
+                </div>
+                <div class="form-group">
+                    <label class="form-label">Categorie</label>
+                    <select class="form-select" id="br-cat-${code}">
+                        <option value="validation">Verification (le systeme verifie que...)</option>
+                        <option value="calculation">Calcul (le systeme calcule...)</option>
+                        <option value="workflow">Processus (quand X se produit, alors...)</option>
+                        <option value="security">Securite (seul... peut...)</option>
+                        <option value="data">Donnees (les donnees doivent...)</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label class="form-label">Formulation de la regle (Si... alors... sinon...)</label>
+                    <textarea class="form-textarea" id="br-statement-${code}" placeholder="Si le montant de la commande depasse le budget du client, alors la commande est refusee et un message d'erreur s'affiche"></textarea>
+                </div>
+                <div class="form-group">
+                    <label class="form-label">Exemple concret (optionnel)</label>
+                    <input type="text" class="form-input" id="br-example-${code}" placeholder="Exemple : Commande de 5000 CHF, budget de 2000 CHF -> refusee">
+                </div>
+                <div class="form-actions">
+                    <button class="btn" onclick="toggleForm('addBrForm-${code}')">Annuler</button>
+                    <button class="btn btn-primary" onclick="addBusinessRule('${code}')">Ajouter</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- TAB: Donnees (Entites) -->
+        <div class="tab-panel" id="tab-${code}-ent">
+            <p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:1rem;">Les types de donnees que ce domaine gere. Decrivez les informations importantes a enregistrer pour chaque type.</p>
+            <div id="entList-${code}">
+                ${spec.entities.map((ent, i) => renderEntity(code, ent, i)).join('')}
+            </div>
+            <button class="add-btn" onclick="toggleForm('addEntForm-${code}')">+ Ajouter un type de donnees</button>
+            <div class="inline-form" id="addEntForm-${code}">
+                <div class="inline-form-title">Nouveau type de donnees</div>
+                <div class="form-group">
+                    <label class="form-label">Nom (exemple : Commande, Client, Facture)</label>
+                    <input type="text" class="form-input" id="ent-name-${code}" placeholder="Nom du type de donnees">
+                </div>
+                <div class="form-group">
+                    <label class="form-label">Description : a quoi sert cette donnee ?</label>
+                    <textarea class="form-textarea" id="ent-desc-${code}" placeholder="En une ou deux phrases, decrivez ce que represente cette donnee dans votre activite" style="min-height:50px;"></textarea>
+                </div>
+                <div class="form-group">
+                    <label class="form-label">Informations a enregistrer (une par ligne : Nom - Description)</label>
+                    <textarea class="form-textarea" id="ent-attrs-${code}" placeholder="Numero - Identifiant unique de la commande&#10;Date - Date de creation de la commande&#10;Montant total - Somme des lignes&#10;Statut - Brouillon, Envoyee, Validee, Refusee"></textarea>
+                </div>
+                <div class="form-group">
+                    <label class="form-label">Relations avec d'autres donnees (optionnel, une par ligne)</label>
+                    <textarea class="form-textarea" id="ent-rels-${code}" placeholder="Client - Chaque commande appartient a un client&#10;Ligne de commande - Une commande contient plusieurs lignes" style="min-height:50px;"></textarea>
+                </div>
+                <div class="form-actions">
+                    <button class="btn" onclick="toggleForm('addEntForm-${code}')">Annuler</button>
+                    <button class="btn btn-primary" onclick="addEntity('${code}')">Ajouter</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- TAB: Droits d'acces -->
+        <div class="tab-panel" id="tab-${code}-perm">
+            <p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:1rem;">Definissez qui peut faire quoi dans ce domaine. Cochez les actions autorisees pour chaque profil.</p>
+            <div id="permGrid-${code}">
+                ${renderPermissionGrid(code)}
+            </div>
+            <div style="display:flex;gap:0.75rem;margin-top:1rem;flex-wrap:wrap;">
+                <button class="add-btn" onclick="toggleForm('addRoleForm-${code}')" style="flex:1;min-width:200px;">+ Ajouter un role</button>
+                <button class="add-btn" onclick="toggleForm('addActionForm-${code}')" style="flex:1;min-width:200px;">+ Ajouter une action</button>
+            </div>
+            <div class="inline-form" id="addRoleForm-${code}">
+                <div class="inline-form-title">Nouveau role</div>
+                <div class="form-group">
+                    <label class="form-label">Nom du role</label>
+                    <input type="text" class="form-input" id="role-name-${code}" placeholder="Exemple : Superviseur, Auditeur...">
+                </div>
+                <div class="form-actions">
+                    <button class="btn" onclick="toggleForm('addRoleForm-${code}')">Annuler</button>
+                    <button class="btn btn-primary" onclick="addCustomRole('${code}')">Ajouter</button>
+                </div>
+            </div>
+            <div class="inline-form" id="addActionForm-${code}">
+                <div class="inline-form-title">Nouvelle action</div>
+                <div class="form-group">
+                    <label class="form-label">Nom de l'action</label>
+                    <input type="text" class="form-input" id="action-name-${code}" placeholder="Exemple : Archiver, Imprimer, Approuver...">
+                </div>
+                <div class="form-actions">
+                    <button class="btn" onclick="toggleForm('addActionForm-${code}')">Annuler</button>
+                    <button class="btn btn-primary" onclick="addCustomAction('${code}')">Ajouter</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- TAB: Maquettes -->
+        <div class="tab-panel" id="tab-${code}-mock">
+            <p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:1rem;">Maquettes validees lors de l'analyse. Ces wireframes montrent la structure exacte des ecrans de ce domaine.</p>
+            <div id="mockupContainer-${code}">
+                ${renderModuleMockups(code)}
+            </div>
+        </div>
+
+        <!-- TAB: Notes -->
+        <div class="tab-panel" id="tab-${code}-notes">
+            <p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:1rem;">Notes libres, questions en suspens, elements a clarifier pour ce domaine.</p>
+            <div class="card">
+                <div class="editable" contenteditable="true" data-module-code="${code}" data-module-field="notes" data-placeholder="Notez ici tout ce qui concerne ce domaine : questions, precisions, contraintes particulieres...">${spec.notes || ''}</div>
+            </div>
+        </div>
+    </div>`;
+}
+
+function renderUseCase(code, uc, index) {
+    return `
+        <div class="uc-item">
+            <div class="uc-header">
+                <span class="uc-id">UC-${String(index + 1).padStart(3, '0')}</span>
+                <span class="uc-title">${uc.name}</span>
+                <div class="uc-actions">
+                    <button class="btn btn-sm" onclick="removeUseCase('${code}',${index})">Supprimer</button>
+                </div>
+            </div>
+            <div class="uc-actors"><div class="uc-actor">${uc.actor}</div></div>
+            ${uc.steps ? `<div class="uc-detail-label">Deroulement</div><div class="uc-detail">${uc.steps.replace(/\n/g, '<br>')}</div>` : ''}
+            ${uc.alternative ? `<div class="uc-detail-label">En cas de probleme</div><div class="uc-detail" style="color:var(--warning);">${uc.alternative}</div>` : ''}
+            <div style="padding:0.5rem 0.75rem;border-top:1px solid var(--border);background:var(--bg-input);border-radius:0 0 8px 8px;">
+                <label style="font-size:0.75rem;color:var(--text-muted);display:block;margin-bottom:0.25rem;">Commentaire / Feedback :</label>
+                <textarea class="form-textarea" placeholder="Ajouter un commentaire sur ce cas d'utilisation..."
+                    onblur="updateSpecComment('${code}','uc',${index},this.value)"
+                    style="min-height:45px;font-size:0.8rem;resize:vertical;">${getSpecComment(code, 'uc', index)}</textarea>
+            </div>
+        </div>`;
+}
+
+function addUseCase(code) {
+    const name = document.getElementById('uc-name-' + code).value.trim();
+    if (!name) return;
+    if (!data.moduleSpecs[code]) data.moduleSpecs[code] = { useCases: [], businessRules: [], entities: [], permissions: [], notes: '' };
+
+    data.moduleSpecs[code].useCases.push({
+        name: name,
+        actor: document.getElementById('uc-actor-' + code).value.trim(),
+        steps: document.getElementById('uc-steps-' + code).value.trim(),
+        alternative: document.getElementById('uc-alt-' + code).value.trim()
+    });
+
+    renderAllModuleSpecs();
+    updateCounts();
+    autoSave();
+}
+
+function removeUseCase(code, index) {
+    data.moduleSpecs[code].useCases.splice(index, 1);
+    renderAllModuleSpecs();
+    updateCounts();
+    autoSave();
+}
+
+function renderBusinessRule(code, br, index) {
+    const catColors = { validation: 'br-cat-validation', calculation: 'br-cat-calculation', workflow: 'br-cat-workflow', security: 'br-cat-security', data: 'br-cat-data' };
+    const catLabels = { validation: 'Verification', calculation: 'Calcul', workflow: 'Processus', security: 'Securite', data: 'Donnees' };
+    return `
+        <div style="margin-bottom:0.5rem;">
+            <div class="br-item" style="margin-bottom:0;border-radius:8px 8px 0 0;">
+                <span class="br-category ${catColors[br.category] || 'br-cat-validation'}">${catLabels[br.category] || br.category}</span>
+                <div class="br-text" style="flex:1;">
+                    <div style="font-weight:600;color:var(--text-bright);margin-bottom:0.2rem;">${br.name}</div>
+                    <div>${br.statement}</div>
+                    ${br.example ? `<div style="font-size:0.8rem;color:var(--text-muted);margin-top:0.25rem;font-style:italic;">Exemple : ${br.example}</div>` : ''}
+                </div>
+                <button class="btn btn-sm" onclick="removeBusinessRule('${code}',${index})" style="opacity:0.5;flex-shrink:0;">&#10005;</button>
+            </div>
+            <div style="padding:0.4rem 0.75rem 0.6rem;background:var(--bg-input);border:1px solid var(--border);border-top:0;border-radius:0 0 8px 8px;">
+                <textarea class="form-textarea" placeholder="Commentaire sur cette regle..."
+                    onblur="updateSpecComment('${code}','br',${index},this.value)"
+                    style="min-height:35px;font-size:0.8rem;resize:vertical;">${getSpecComment(code, 'br', index)}</textarea>
+            </div>
+        </div>`;
+}
+
+function addBusinessRule(code) {
+    const name = document.getElementById('br-name-' + code).value.trim();
+    if (!name) return;
+    if (!data.moduleSpecs[code]) data.moduleSpecs[code] = { useCases: [], businessRules: [], entities: [], permissions: [], notes: '' };
+
+    data.moduleSpecs[code].businessRules.push({
+        name: name,
+        category: document.getElementById('br-cat-' + code).value,
+        statement: document.getElementById('br-statement-' + code).value.trim(),
+        example: document.getElementById('br-example-' + code).value.trim()
+    });
+
+    renderAllModuleSpecs();
+    autoSave();
+}
+
+function removeBusinessRule(code, index) {
+    data.moduleSpecs[code].businessRules.splice(index, 1);
+    renderAllModuleSpecs();
+    autoSave();
+}
+
+function renderEntity(code, ent, index) {
+    return `
+        <div class="entity-block">
+            <div class="entity-header">
+                <div>
+                    <div class="entity-name">${ent.name}</div>
+                    <div class="entity-desc">${ent.description || ''}</div>
+                </div>
+                <button class="btn btn-sm" onclick="removeEntity('${code}',${index})" style="opacity:0.5;">Supprimer</button>
+            </div>
+            ${(ent.attributes || []).length > 0 ? `
+            <table class="attr-table">
+                <thead><tr><th>Information</th><th>Description</th></tr></thead>
+                <tbody>
+                    ${ent.attributes.map(a => `<tr><td style="font-weight:500;color:var(--text-bright);">${a.name}</td><td>${a.description || ''}</td></tr>`).join('')}
+                </tbody>
+            </table>` : ''}
+            ${(ent.relationships || []).length > 0 ? `
+            <div style="padding:0.5rem 0.75rem;font-size:0.8rem;color:var(--text-muted);border-top:1px solid var(--border);">
+                Relations : ${ent.relationships.map(r => `<span style="color:var(--accent);">${r}</span>`).join(', ')}
+            </div>` : ''}
+            <div style="padding:0.4rem 0.75rem 0.6rem;background:var(--bg-input);border-top:1px solid var(--border);border-radius:0 0 8px 8px;">
+                <label style="font-size:0.75rem;color:var(--text-muted);display:block;margin-bottom:0.25rem;">Commentaire :</label>
+                <textarea class="form-textarea" placeholder="Commentaire sur cette entite..."
+                    onblur="updateSpecComment('${code}','ent',${index},this.value)"
+                    style="min-height:35px;font-size:0.8rem;resize:vertical;">${getSpecComment(code, 'ent', index)}</textarea>
+            </div>
+        </div>`;
+}
+
+function addEntity(code) {
+    const name = document.getElementById('ent-name-' + code).value.trim();
+    if (!name) return;
+    if (!data.moduleSpecs[code]) data.moduleSpecs[code] = { useCases: [], businessRules: [], entities: [], permissions: [], notes: '' };
+
+    const attrs = document.getElementById('ent-attrs-' + code).value.split('\n').filter(l => l.trim()).map(l => {
+        const parts = l.split(' - ');
+        return { name: parts[0]?.trim() || l.trim(), description: parts.slice(1).join(' - ').trim() };
+    });
+    const rels = document.getElementById('ent-rels-' + code).value.split('\n').filter(l => l.trim());
+
+    data.moduleSpecs[code].entities.push({
+        name: name,
+        description: document.getElementById('ent-desc-' + code).value.trim(),
+        attributes: attrs,
+        relationships: rels
+    });
+
+    renderAllModuleSpecs();
+    autoSave();
+}
+
+function removeEntity(code, index) {
+    data.moduleSpecs[code].entities.splice(index, 1);
+    renderAllModuleSpecs();
+    autoSave();
+}
+
+function getSpecComment(code, type, index) {
+    const key = code + '.' + type + '.' + index;
+    return data.specComments[key] || '';
+}
+
+function updateSpecComment(code, type, index, value) {
+    const key = code + '.' + type + '.' + index;
+    data.specComments[key] = value.trim();
+    autoSave();
+}
+
+function getWireframeComment(code, screen) {
+    return (data.wireframeComments[code] || {})[screen] || '';
+}
+
+function updateWireframeComment(code, screen, value) {
+    if (!data.wireframeComments[code]) data.wireframeComments[code] = {};
+    data.wireframeComments[code][screen] = value.trim();
+    autoSave();
+}
+
+function renderModuleMockups(code) {
+    const wireframes = EMBEDDED_ARTIFACTS?.wireframes?.[code] || [];
+
+    if (wireframes.length === 0) {
+        return `
+            <div class="card" style="text-align:center;padding:2rem;color:var(--text-muted);">
+                <p>Aucune maquette disponible pour ce module.</p>
+                <p style="font-size:0.85rem;margin-top:0.5rem;">Les maquettes seront generees lors de la specification detaillee.</p>
+            </div>`;
+    }
+
+    return wireframes.map((wf, i) => `
+        <div class="mockup-frame" style="${i > 0 ? 'margin-top:1.5rem;' : ''}">
+            <div class="mockup-toolbar">
+                <div class="mockup-dot mockup-dot-red"></div>
+                <div class="mockup-dot mockup-dot-yellow"></div>
+                <div class="mockup-dot mockup-dot-green"></div>
+                <span class="mockup-title">${wf.screen || wf.section}</span>
+            </div>
+            <div class="mockup-content">
+                ${wf.format === 'ascii'
+                    ? `<pre class="ascii-wireframe">${wf.content || ''}</pre>`
+                    : `<div class="svg-wireframe">${wf.content || ''}</div>`}
+            </div>
+            ${wf.description ? `
+            <div class="wireframe-description">
+                <strong>Description:</strong> ${wf.description}
+            </div>` : ''}
+            ${(wf.elements || []).length > 0 ? `
+            <div class="wireframe-metadata">
+                <div><strong>Elements:</strong> ${wf.elements.join(', ')}</div>
+            </div>` : ''}
+            ${(wf.componentMapping || []).length > 0 ? `
+            <details class="wireframe-details">
+                <summary>Mapping composants SmartStack</summary>
+                <table class="mapping-table">
+                    <thead><tr><th>Element maquette</th><th>Composant React</th></tr></thead>
+                    <tbody>
+                        ${wf.componentMapping.map(m =>
+                            `<tr><td>${m.wireframeElement}</td><td><code>${m.reactComponent}</code></td></tr>`
+                        ).join('')}
+                    </tbody>
+                </table>
+            </details>` : ''}
+            <div class="wireframe-comment">
+                <label style="font-size:0.8rem;color:var(--text-muted);display:block;margin-bottom:0.3rem;">Commentaire / Feedback :</label>
+                <textarea class="form-textarea"
+                    data-module="${code}"
+                    data-screen="${wf.screen}"
+                    placeholder="Ajouter un commentaire sur cette maquette (ex: deplacer ce bouton, ajouter une colonne...)"
+                    onblur="updateWireframeComment('${code}', '${wf.screen}', this.value)"
+                    style="min-height:60px;font-size:0.85rem;resize:vertical;"
+                >${getWireframeComment(code, wf.screen)}</textarea>
+            </div>
+        </div>
+    `).join('');
+}
+
+function getPermRoles() {
+    const baseRoles = data.cadrage.stakeholders.length > 0
+        ? data.cadrage.stakeholders.map(s => s.role)
+        : ['Administrateur', 'Responsable', 'Contributeur', 'Lecteur'];
+    return [...baseRoles, ...(data.customRoles || [])];
+}
+
+function getPermActions() {
+    const baseActions = ['Consulter', 'Creer', 'Modifier', 'Supprimer', 'Valider', 'Exporter'];
+    return [...baseActions, ...(data.customActions || [])];
+}
+
+function renderPermissionGrid(code) {
+    const roles = getPermRoles();
+    const actions = getPermActions();
+    const baseRolesCount = data.cadrage.stakeholders.length > 0
+        ? data.cadrage.stakeholders.length
+        : 4;
+    const baseActionsCount = 6;
+
+    const perms = data.moduleSpecs[code]?.permissions || [];
+
+    return `
+        <table class="mock-table" style="background:var(--bg-card);border-radius:8px;overflow:hidden;">
+            <thead><tr>
+                <th>Profil</th>
+                ${actions.map((a, i) => `<th style="text-align:center;">${a}${i >= baseActionsCount ? ' <span onclick="removeCustomAction('+`'${code}','${a}'`+')" style="cursor:pointer;color:var(--danger);font-size:0.7rem;" title="Supprimer cette action">&#10005;</span>' : ''}</th>`).join('')}
+            </tr></thead>
+            <tbody>
+                ${roles.map((role, ri) => `
+                    <tr>
+                        <td style="font-weight:500;color:var(--text-bright);">${role}${ri >= baseRolesCount ? ' <span onclick="removeCustomRole('+`'${code}','${role}'`+')" style="cursor:pointer;color:var(--danger);font-size:0.7rem;" title="Supprimer ce role">&#10005;</span>' : ''}</td>
+                        ${actions.map(action => {
+                            const key = role + '|' + action;
+                            const checked = perms.includes(key);
+                            return `<td style="text-align:center;"><input type="checkbox" ${checked ? 'checked' : ''} onchange="togglePermission('${code}','${key}',this.checked)" style="cursor:pointer;width:16px;height:16px;"></td>`;
+                        }).join('')}
+                    </tr>
+                `).join('')}
+            </tbody>
+        </table>`;
+}
+
+function togglePermission(code, key, checked) {
+    if (!data.moduleSpecs[code]) data.moduleSpecs[code] = { useCases: [], businessRules: [], entities: [], permissions: [], notes: '' };
+    if (!data.moduleSpecs[code].permissions) data.moduleSpecs[code].permissions = [];
+    if (checked) {
+        if (!data.moduleSpecs[code].permissions.includes(key)) data.moduleSpecs[code].permissions.push(key);
+    } else {
+        data.moduleSpecs[code].permissions = data.moduleSpecs[code].permissions.filter(p => p !== key);
+    }
+    autoSave();
+}
+
+function addCustomRole(code) {
+    const input = document.getElementById('role-name-' + code);
+    const name = input.value.trim();
+    if (!name) return;
+    if (!data.customRoles) data.customRoles = [];
+    if (!data.customRoles.includes(name) && !getPermRoles().includes(name)) {
+        data.customRoles.push(name);
+    }
+    input.value = '';
+    toggleForm('addRoleForm-' + code);
+    refreshAllPermGrids();
+    autoSave();
+}
+
+function addCustomAction(code) {
+    const input = document.getElementById('action-name-' + code);
+    const name = input.value.trim();
+    if (!name) return;
+    if (!data.customActions) data.customActions = [];
+    if (!data.customActions.includes(name) && !getPermActions().includes(name)) {
+        data.customActions.push(name);
+    }
+    input.value = '';
+    toggleForm('addActionForm-' + code);
+    refreshAllPermGrids();
+    autoSave();
+}
+
+function removeCustomRole(code, role) {
+    data.customRoles = (data.customRoles || []).filter(r => r !== role);
+    data.modules.forEach(m => {
+        if (data.moduleSpecs[m.code]?.permissions) {
+            data.moduleSpecs[m.code].permissions = data.moduleSpecs[m.code].permissions.filter(p => !p.startsWith(role + '|'));
+        }
+    });
+    refreshAllPermGrids();
+    autoSave();
+}
+
+function removeCustomAction(code, action) {
+    data.customActions = (data.customActions || []).filter(a => a !== action);
+    data.modules.forEach(m => {
+        if (data.moduleSpecs[m.code]?.permissions) {
+            data.moduleSpecs[m.code].permissions = data.moduleSpecs[m.code].permissions.filter(p => !p.endsWith('|' + action));
+        }
+    });
+    refreshAllPermGrids();
+    autoSave();
+}
+
+function refreshAllPermGrids() {
+    data.modules.forEach(m => {
+        const container = document.getElementById('permGrid-' + m.code);
+        if (container) container.innerHTML = renderPermissionGrid(m.code);
+    });
+}
+
+function switchTab(code, tabId) {
+    const section = document.getElementById('module-spec-' + code);
+    if (!section) return;
+    section.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
+    section.querySelectorAll('.tab-panel').forEach(panel => panel.classList.remove('active'));
+    const targetPanel = document.getElementById('tab-' + code + '-' + tabId);
+    if (targetPanel) targetPanel.classList.add('active');
+    const buttons = section.querySelectorAll('.tab-btn');
+    const tabIndex = { uc: 0, br: 1, ent: 2, perm: 3, mock: 4, notes: 5 }[tabId];
+    if (buttons[tabIndex]) buttons[tabIndex].classList.add('active');
+}

package/templates/skills/business-analyse/html/src/scripts/06-render-consolidation.js

@@ -0,0 +1,105 @@
+/* ============================================
+   CONSOLIDATION
+   ============================================ */
+function renderConsolidation() {
+    renderConsolInteractions();
+    renderConsolPermissions();
+}
+
+function renderConsolInteractions() {
+    const container = document.getElementById('consolInteractions');
+    if (!container || data.dependencies.length === 0) return;
+
+    container.innerHTML = data.dependencies.map(d => {
+        const fromName = data.modules.find(m => m.code === d.from)?.name || d.from;
+        const toName = data.modules.find(m => m.code === d.to)?.name || d.to;
+        return `
+            <div class="interaction-item">
+                <span style="font-weight:600;color:var(--text-bright);">${fromName}</span>
+                <span class="interaction-arrow">&#8594;</span>
+                <span style="font-weight:600;color:var(--text-bright);">${toName}</span>
+                <span class="interaction-type">Dependance</span>
+                <span style="flex:1;font-size:0.8rem;color:var(--text-muted);">${d.description || ''}</span>
+            </div>`;
+    }).join('');
+}
+
+function renderConsolPermissions() {
+    const container = document.getElementById('consolPermissions');
+    if (!container || data.modules.length === 0) return;
+
+    const roles = getPermRoles();
+
+    let html = '<table class="mock-table" style="background:var(--bg-card);border-radius:8px;overflow:hidden;">';
+    html += '<thead><tr><th>Profil</th>';
+    data.modules.forEach(m => { html += `<th style="text-align:center;">${m.name || m.code}</th>`; });
+    html += '</tr></thead><tbody>';
+
+    roles.forEach(role => {
+        html += `<tr><td style="font-weight:500;color:var(--text-bright);">${role}</td>`;
+        data.modules.forEach(m => {
+            const perms = (data.moduleSpecs[m.code]?.permissions || []).filter(p => p.startsWith(role + '|'));
+            const count = perms.length;
+            const color = count > 4 ? 'var(--success)' : count > 2 ? 'var(--warning)' : count > 0 ? 'var(--text-muted)' : 'var(--border)';
+            html += `<td style="text-align:center;color:${color};font-weight:600;">${count > 0 ? count + ' droits' : 'Aucun'}</td>`;
+        });
+        html += '</tr>';
+    });
+
+    html += '</tbody></table>';
+    container.innerHTML = html;
+}
+
+/* ============================================
+   E2E FLOWS
+   ============================================ */
+function addE2EFlow() {
+    const name = document.getElementById('flow-name').value.trim();
+    if (!name) return;
+
+    const steps = document.getElementById('flow-steps').value.split('\n').filter(l => l.trim()).map(l => {
+        const parts = l.split(' - ');
+        return { module: parts[0]?.trim() || '', action: parts.slice(1).join(' - ').trim() || l.trim() };
+    });
+
+    data.consolidation.e2eFlows.push({
+        name: name,
+        steps: steps,
+        actors: document.getElementById('flow-actors').value.trim()
+    });
+
+    renderE2EFlows();
+    toggleForm('addFlowForm');
+    clearForm('addFlowForm');
+    autoSave();
+}
+
+function removeE2EFlow(index) {
+    data.consolidation.e2eFlows.splice(index, 1);
+    renderE2EFlows();
+    autoSave();
+}
+
+function renderE2EFlows() {
+    const container = document.getElementById('e2eFlowsList');
+    if (!container) return;
+
+    container.innerHTML = data.consolidation.e2eFlows.map((flow, fi) => `
+        <div class="card" style="margin-bottom:1rem;">
+            <div class="card-header">
+                <span class="card-title">${flow.name}</span>
+                <button class="btn btn-sm" onclick="removeE2EFlow(${fi})" style="opacity:0.5;">Supprimer</button>
+            </div>
+            ${flow.actors ? `<div style="font-size:0.8rem;color:var(--text-muted);margin-bottom:0.5rem;">Intervenants : ${flow.actors}</div>` : ''}
+            <div class="e2e-flow">
+                ${flow.steps.map((s, i) => `
+                    <div class="e2e-step">
+                        <div class="e2e-step-module">${s.module}</div>
+                        <div class="e2e-step-action">${s.action}</div>
+                    </div>
+                    ${i < flow.steps.length - 1 ? '<div class="process-arrow">&#8594;</div>' : ''}
+                `).join('')}
+            </div>
+        </div>
+    `).join('');
+}