@atlashub/smartstack-cli 3.7.0 → 3.9.0

package/templates/skills/business-analyse/html/src/scripts/11-review-panel.js

@@ -0,0 +1,161 @@
+/* ============================================
+   REVIEW PANEL
+   ============================================ */
+let reviewPanelOpen = false;
+let reviewFilter = 'all';
+
+function toggleReviewPanel() {
+    reviewPanelOpen = !reviewPanelOpen;
+    const panel = document.getElementById('reviewPanel');
+    const body = document.getElementById('appBody');
+    const btn = document.getElementById('reviewToggleBtn');
+
+    if (reviewPanelOpen) {
+        panel.classList.add('visible');
+        body.classList.add('review-open');
+        btn.classList.add('active');
+    } else {
+        panel.classList.remove('visible');
+        body.classList.remove('review-open');
+        btn.classList.remove('active');
+    }
+
+    renderReviewPanel();
+}
+
+function filterReviewComments(filter) {
+    reviewFilter = filter;
+    // Update active filter button
+    document.querySelectorAll('.review-filter-btn').forEach(btn => {
+        btn.classList.toggle('active', btn.dataset.filter === filter);
+    });
+    renderReviewPanel();
+}
+
+function renderReviewPanel() {
+    const comments = data.comments || [];
+
+    // Update header badge
+    const toReviewCount = comments.filter(c => c.status === 'to-review').length;
+    const badge = document.getElementById('reviewBadge');
+    if (badge) {
+        badge.textContent = toReviewCount;
+        badge.classList.toggle('hidden', toReviewCount === 0);
+    }
+
+    // Update stats
+    const totalEl = document.getElementById('reviewStatTotal');
+    const toReviewEl = document.getElementById('reviewStatToReview');
+    const validatedEl = document.getElementById('reviewStatValidated');
+    if (totalEl) totalEl.textContent = comments.length;
+    if (toReviewEl) toReviewEl.textContent = toReviewCount;
+    if (validatedEl) validatedEl.textContent = comments.filter(c => c.status === 'validated').length;
+
+    // Filter comments
+    let filtered = comments;
+    if (reviewFilter === 'to-review') {
+        filtered = comments.filter(c => c.status === 'to-review');
+    } else if (reviewFilter === 'validated') {
+        filtered = comments.filter(c => c.status === 'validated');
+    }
+
+    // Render comment list
+    const container = document.getElementById('reviewCommentsList');
+    if (!container) return;
+
+    if (filtered.length === 0) {
+        container.innerHTML = '<div class="review-empty">Aucun commentaire' +
+            (reviewFilter !== 'all' ? ' avec ce filtre' : '') + '.</div>';
+        return;
+    }
+
+    container.innerHTML = filtered.map((c, i) => {
+        const globalIndex = data.comments.indexOf(c);
+        const sectionLabel = getSectionLabel(c.sectionId);
+        const date = c.timestamp ? new Date(c.timestamp).toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit' }) : '';
+
+        return `
+            <div class="review-comment-item" onclick="navigateToComment('${c.sectionId}', ${c.cardIndex})">
+                <div class="review-comment-section">${sectionLabel}</div>
+                <div class="review-comment-text">${c.content}</div>
+                <div class="review-comment-footer">
+                    <span class="review-comment-author">${c.author || 'Utilisateur'} - ${date}</span>
+                    <div class="review-comment-actions">
+                        <button class="review-action-btn ${c.status === 'validated' ? 'reject' : 'validate'}"
+                            onclick="event.stopPropagation();toggleCommentStatus(${globalIndex})"
+                            title="${c.status === 'validated' ? 'Remettre a revoir' : 'Valider'}">
+                            ${c.status === 'validated' ? 'A revoir' : 'Valider'}
+                        </button>
+                        <button class="review-action-btn delete"
+                            onclick="event.stopPropagation();deleteComment(${globalIndex})"
+                            title="Supprimer">
+                            &#10005;
+                        </button>
+                    </div>
+                </div>
+            </div>
+        `;
+    }).join('');
+}
+
+function getSectionLabel(sectionId) {
+    const labels = {
+        'cadrage-problem': 'Probleme',
+        'cadrage-current': 'Situation actuelle',
+        'cadrage-vision': 'Vision',
+        'cadrage-stakeholders': 'Parties prenantes',
+        'cadrage-scope': 'Perimetre',
+        'cadrage-risks': 'Risques',
+        'cadrage-success': 'Criteres',
+        'decomp-modules': 'Domaines',
+        'decomp-dependencies': 'Dependances',
+        'consol-interactions': 'Interactions',
+        'consol-permissions': 'Acces',
+        'consol-flows': 'Parcours',
+        'handoff-summary': 'Synthese'
+    };
+    if (labels[sectionId]) return labels[sectionId];
+    if (sectionId.startsWith('module-spec-')) {
+        const code = sectionId.replace('module-spec-', '');
+        const mod = data.modules.find(m => m.code === code);
+        return mod ? mod.name : code;
+    }
+    // Handle list-based sectionIds (ucList-*, brList-*, entList-*)
+    const listMatch = sectionId.match(/^(uc|br|ent)List-(.+)$/);
+    if (listMatch) {
+        const tabLabels = { uc: 'Cas d\'utilisation', br: 'Regles metier', ent: 'Donnees' };
+        const mod = data.modules.find(m => m.code === listMatch[2]);
+        const modName = mod ? mod.name : listMatch[2];
+        return modName + ' > ' + (tabLabels[listMatch[1]] || listMatch[1]);
+    }
+    return sectionId;
+}
+
+function navigateToComment(sectionId, cardIndex) {
+    // Handle list-based sectionIds (ucList-*, brList-*, entList-*) → navigate to module + tab
+    const listMatch = sectionId.match(/^(uc|br|ent)List-(.+)$/);
+    if (listMatch) {
+        const [, tabType, moduleCode] = listMatch;
+        showSection('module-spec-' + moduleCode);
+        setTimeout(() => {
+            switchTab(moduleCode, tabType);
+            scrollToCommentThread(sectionId, cardIndex);
+        }, 150);
+    } else {
+        showSection(sectionId);
+        scrollToCommentThread(sectionId, cardIndex);
+    }
+}
+
+function scrollToCommentThread(sectionId, cardIndex) {
+    setTimeout(() => {
+        const thread = document.getElementById('comment-thread-' + sectionId + '-' + cardIndex);
+        if (thread && !thread.classList.contains('visible')) {
+            thread.classList.add('visible');
+        }
+        const container = document.querySelector(`.comment-btn-container[data-section-id="${sectionId}"][data-card-index="${cardIndex}"]`);
+        if (container) {
+            container.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+    }, 100);
+}

package/templates/skills/business-analyse/html/src/styles/01-variables.css

@@ -0,0 +1,38 @@
+/* ============================================
+   DESIGN SYSTEM - SmartStack Business Analysis
+   ============================================ */
+:root {
+    --primary: #6366f1;
+    --primary-dark: #4f46e5;
+    --primary-light: #818cf8;
+    --secondary: #f97316;
+    --accent: #06b6d4;
+    --bg-dark: #0f172a;
+    --bg-card: #1e293b;
+    --bg-hover: #334155;
+    --bg-input: #151d2e;
+    --text: #b8c4d1;
+    --text-muted: #8a9bb0;
+    --text-bright: #e2e8f0;
+    --border: #334155;
+    --border-light: #475569;
+    --success: #22c55e;
+    --warning: #eab308;
+    --error: #ef4444;
+    --info: #3b82f6;
+    --sidebar-width: 280px;
+    --header-height: 52px;
+    --transition-fast: 0.15s ease;
+    --transition-normal: 0.3s ease;
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+html { scroll-behavior: smooth; }
+
+body {
+    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
+    background: var(--bg-dark);
+    color: var(--text);
+    line-height: 1.7;
+    min-height: 100vh;
+}

package/templates/skills/business-analyse/html/src/styles/02-layout.css

@@ -0,0 +1,101 @@
+/* ============================================
+   LAYOUT
+   ============================================ */
+.app { display: flex; flex-direction: column; min-height: 100vh; }
+
+.header {
+    background: var(--bg-card);
+    border-bottom: 1px solid var(--border);
+    height: var(--header-height);
+    display: flex;
+    align-items: center;
+    padding: 0 1.5rem;
+    gap: 1rem;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+}
+
+.header-logo {
+    width: 32px; height: 32px;
+    background: linear-gradient(135deg, var(--primary), var(--secondary));
+    border-radius: 6px;
+    display: flex; align-items: center; justify-content: center;
+    font-weight: 700; font-size: 0.85rem; color: #fff;
+    flex-shrink: 0;
+}
+
+.header-title { font-size: 1rem; font-weight: 600; color: var(--text-bright); }
+.header-sep { width: 1px; height: 24px; background: var(--border); }
+.header-app-name { font-size: 0.9rem; color: var(--primary-light); font-weight: 500; }
+.header-spacer { flex: 1; }
+
+.header-actions { display: flex; gap: 0.5rem; }
+
+.body { display: flex; flex: 1; }
+
+/* ============================================
+   SIDEBAR - Container
+   ============================================ */
+.sidebar {
+    width: var(--sidebar-width);
+    background: var(--bg-card);
+    border-right: 1px solid var(--border);
+    overflow-y: auto;
+    height: calc(100vh - var(--header-height));
+    position: sticky;
+    top: var(--header-height);
+    flex-shrink: 0;
+}
+
+.sidebar::-webkit-scrollbar { width: 4px; }
+.sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
+
+/* ============================================
+   MAIN CONTENT - FULL WIDTH
+   ============================================ */
+.main {
+    flex: 1;
+    padding: 2rem 3rem;
+    overflow-y: auto;
+    height: calc(100vh - var(--header-height));
+}
+
+.section { margin-bottom: 4rem; }
+.section-title {
+    font-size: 1.4rem;
+    color: var(--text-bright);
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 2px solid var(--primary);
+}
+.section-subtitle {
+    font-size: 0.9rem;
+    color: var(--text-muted);
+    margin-bottom: 1.5rem;
+}
+
+/* ============================================
+   RESPONSIVE
+   ============================================ */
+@media (max-width: 768px) {
+    .sidebar { display: none; }
+    .main { padding: 1rem; }
+    .form-row { grid-template-columns: 1fr; }
+    .stakeholder-grid { grid-template-columns: 1fr; }
+}
+
+/* ============================================
+   PRINT
+   ============================================ */
+@media print {
+    .sidebar, .header-actions, .add-btn, .uc-actions, .inline-form, .module-card-remove, .phase-progress { display: none !important; }
+    .main { max-width: 100%; padding: 0; }
+    .section { display: block !important; page-break-inside: avoid; }
+    body { background: #fff; color: #1a1a1a; }
+    .card, .uc-item, .br-item, .module-card, .entity-block, .interaction-item { border-color: #ddd; }
+    .tab-panel { display: block !important; }
+    .tab-bar { display: none; }
+    .review-panel, .comment-btn-container { display: none !important; }
+}

package/templates/skills/business-analyse/html/src/styles/03-navigation.css

@@ -0,0 +1,62 @@
+/* ============================================
+   SIDEBAR - Navigation 5 niveaux
+   ============================================ */
+.nav-group { padding: 1rem 0; }
+.nav-group + .nav-group { border-top: 1px solid var(--border); }
+
+.nav-group-title {
+    font-size: 0.65rem;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--text-muted);
+    padding: 0 1rem;
+    margin-bottom: 0.5rem;
+    font-weight: 600;
+}
+
+.nav-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.45rem 1rem;
+    color: var(--text);
+    text-decoration: none;
+    font-size: 0.85rem;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    border-left: 3px solid transparent;
+}
+.nav-item:hover { background: var(--bg-hover); color: var(--text-bright); }
+.nav-item.active { background: rgba(99,102,241,0.1); border-left-color: var(--primary); color: var(--primary-light); font-weight: 500; }
+
+.nav-item .nav-icon { font-size: 1rem; width: 20px; text-align: center; }
+.nav-item .nav-badge {
+    margin-left: auto;
+    font-size: 0.65rem;
+    background: var(--bg-hover);
+    padding: 0.1rem 0.4rem;
+    border-radius: 10px;
+    color: var(--text-muted);
+}
+
+.nav-children { margin-left: 1.2rem; }
+.nav-children .nav-item { font-size: 0.8rem; padding: 0.3rem 1rem; }
+
+/* ============================================
+   PHASE PROGRESS
+   ============================================ */
+.phase-progress {
+    display: flex; align-items: center; gap: 0.3rem;
+    padding: 0.75rem 1rem; border-bottom: 1px solid var(--border);
+}
+.phase-dot {
+    width: 24px; height: 24px; border-radius: 50%;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 0.6rem; font-weight: 700; color: var(--text-muted);
+    background: var(--bg-hover); border: 2px solid var(--border);
+    transition: all var(--transition-fast);
+}
+.phase-dot.completed { background: var(--success); border-color: var(--success); color: #fff; }
+.phase-dot.current { background: var(--primary); border-color: var(--primary); color: #fff; }
+.phase-line { flex: 1; height: 2px; background: var(--border); }
+.phase-line.completed { background: var(--success); }

package/templates/skills/business-analyse/html/src/styles/04-cards.css

@@ -0,0 +1,196 @@
+/* ============================================
+   BUTTONS
+   ============================================ */
+.btn {
+    padding: 0.4rem 0.9rem;
+    border-radius: 6px;
+    border: 1px solid var(--border);
+    background: var(--bg-hover);
+    color: var(--text);
+    font-size: 0.8rem;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    font-family: inherit;
+}
+.btn:hover { border-color: var(--primary); color: var(--text-bright); }
+.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
+.btn-primary:hover { background: var(--primary-dark); }
+.btn-success { background: var(--success); border-color: var(--success); color: #fff; }
+.btn-sm { padding: 0.25rem 0.6rem; font-size: 0.75rem; }
+
+/* ============================================
+   EDITABLE CARDS
+   ============================================ */
+.card {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    padding: 1.5rem;
+    margin-bottom: 1rem;
+    transition: border-color var(--transition-fast);
+}
+.card:hover { border-color: var(--border-light); }
+
+.card-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 0.75rem;
+}
+.card-label {
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--text-muted);
+    font-weight: 600;
+}
+.card-title {
+    font-size: 1.05rem;
+    color: var(--text-bright);
+    font-weight: 600;
+}
+
+.editable {
+    border: 1px dashed transparent;
+    border-radius: 6px;
+    padding: 0.4rem 0.6rem;
+    transition: all var(--transition-fast);
+    min-height: 1.5em;
+    outline: none;
+}
+.editable:hover { border-color: var(--border-light); background: var(--bg-input); }
+.editable:focus { border-color: var(--primary); background: var(--bg-input); box-shadow: 0 0 0 2px rgba(99,102,241,0.2); }
+.editable[data-placeholder]:empty::before {
+    content: attr(data-placeholder);
+    color: var(--text-muted);
+    font-style: italic;
+}
+
+/* ============================================
+   PRIORITY BADGES
+   ============================================ */
+.priority {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    padding: 0.2rem 0.6rem;
+    border-radius: 12px;
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+.priority-vital { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
+.priority-important { background: rgba(234,179,8,0.15); color: #facc15; border: 1px solid rgba(234,179,8,0.3); }
+.priority-optional { background: rgba(34,197,94,0.15); color: #4ade80; border: 1px solid rgba(34,197,94,0.3); }
+.priority-excluded { background: rgba(100,116,139,0.15); color: #94a3b8; border: 1px solid rgba(100,116,139,0.3); }
+
+/* ============================================
+   STATUS BADGES
+   ============================================ */
+.status {
+    display: inline-flex; align-items: center; gap: 0.3rem;
+    padding: 0.15rem 0.5rem; border-radius: 10px;
+    font-size: 0.7rem; font-weight: 500;
+}
+.status-dot { width: 6px; height: 6px; border-radius: 50%; }
+.status-draft .status-dot { background: var(--text-muted); }
+.status-draft { color: var(--text-muted); }
+.status-progress .status-dot { background: var(--info); }
+.status-progress { color: var(--info); }
+.status-done .status-dot { background: var(--success); }
+.status-done { color: var(--success); }
+
+/* ============================================
+   ADD BUTTON
+   ============================================ */
+.add-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    width: 100%;
+    padding: 0.75rem;
+    border: 2px dashed var(--border);
+    border-radius: 8px;
+    background: transparent;
+    color: var(--text-muted);
+    font-size: 0.85rem;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    font-family: inherit;
+}
+.add-btn:hover {
+    border-color: var(--primary);
+    color: var(--primary-light);
+    background: rgba(99,102,241,0.05);
+}
+
+/* ============================================
+   INLINE FORM (for adding items)
+   ============================================ */
+.inline-form {
+    background: var(--bg-card);
+    border: 2px solid var(--primary);
+    border-radius: 10px;
+    padding: 1.25rem;
+    margin-bottom: 1rem;
+    display: none;
+}
+.inline-form.visible { display: block; }
+.inline-form-title {
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--primary-light);
+    margin-bottom: 1rem;
+}
+.form-group { margin-bottom: 0.75rem; }
+.form-label {
+    display: block;
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    margin-bottom: 0.3rem;
+    font-weight: 500;
+}
+.form-input, .form-textarea, .form-select {
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    background: var(--bg-input);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    color: var(--text);
+    font-size: 0.85rem;
+    font-family: inherit;
+    transition: border-color var(--transition-fast);
+}
+.form-input:focus, .form-textarea:focus, .form-select:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 2px rgba(99,102,241,0.2);
+}
+.form-textarea { min-height: 80px; resize: vertical; }
+.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
+.form-actions {
+    display: flex; gap: 0.5rem; justify-content: flex-end;
+    margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border);
+}
+
+/* ============================================
+   NOTIFICATION BAR
+   ============================================ */
+.notification {
+    position: fixed;
+    bottom: 1.5rem;
+    right: 1.5rem;
+    padding: 0.75rem 1.25rem;
+    border-radius: 8px;
+    font-size: 0.85rem;
+    font-weight: 500;
+    z-index: 200;
+    transform: translateY(100px);
+    opacity: 0;
+    transition: all 0.3s ease;
+}
+.notification.visible { transform: translateY(0); opacity: 1; }
+.notification-success { background: var(--success); color: #fff; }
+.notification-info { background: var(--info); color: #fff; }