@silvestv/migration-planificator 3.0.0 → 4.1.0

package/dist/src/data/rules/to20/rules-20-recommande.json

@@ -1,151 +1,151 @@
-[
-  {
-    "key": "control_flow_deprecation",
-    "summary": "⚠️ DÉPRÉCIÉ: *ngIf/*ngFor/*ngSwitch (retrait v22)",
-    "description": "Les directives structurelles *ngIf, *ngFor et *ngSwitch sont officiellement dépréciées en Angular 20 et seront complètement retirées en v22. Migrer dès maintenant vers la syntaxe Control Flow (@if, @for, @switch) pour éviter les breaking changes futurs.",
-    "estimated_time_per_occurrence": 3,
-    "onFile": null,
-    "fileTypes": [
-      "*.html",
-      "*.ts"
-    ],
-    "regex": "\\*ng(If|For|Switch)",
-    "category": "template",
-    "auto_fixable": false,
-    "migration_command": "ng generate @angular/core:control-flow",
-    "risk_level": "high",
-    "code_description": "// ⚠️ DÉPRÉCIÉ - Retrait prévu en v22\n<div *ngIf=\"condition\">Content</div>\n<div *ngFor=\"let item of items\">{{ item }}</div>\n\n// Migrer vers Control Flow:\n@if (condition) {\n  <div>Content</div>\n}\n@for (item of items; track item.id) {\n  <div>{{ item }}</div>\n}",
-    "astPattern": {
-      "nodeType": "Attribute",
-      "name": [
-        "*ngIf",
-        "*ngFor",
-        "*ngSwitch",
-        "*ngSwitchCase",
-        "*ngSwitchDefault"
-      ],
-      "excludeContext": [
-        "StringLiteral",
-        "Comment"
-      ]
-    },
-    "doc_url": "https://angular.dev/reference/migrations"
-  },
-  {
-    "key": "signals_stable",
-    "summary": "APIs Signals stabilisées (effect, linkedSignal, toSignal, computed)",
-    "description": "Toutes les APIs de signaux sortent de leur phase expérimentale et deviennent stables en Angular 20: effect, linkedSignal, toSignal, computed. Adopter ces APIs maintenant garantit une stabilité à long terme et des performances optimales.",
-    "estimated_time_per_occurrence": 5,
-    "onFile": null,
-    "fileTypes": [
-      "*.ts"
-    ],
-    "regex": "\\b(effect|linkedSignal|toSignal|computed)\\s*\\(",
-    "category": "signals",
-    "auto_fixable": false,
-    "migration_command": null,
-    "risk_level": "low",
-    "code_description": "// ✅ Maintenant stables (plus 'experimental')\n\neffect(() => {\n  console.log('Value:', mySignal());\n});\n\nconst linked = linkedSignal({\n  source: sourceSignal,\n  computation: () => 'default'\n});\n\nconst fromObs = toSignal(observable$, {\n  initialValue: 'default'\n});",
-    "astPattern": {
-      "nodeType": "CallExpression",
-      "functionName": [
-        "effect",
-        "linkedSignal",
-        "toSignal",
-        "computed"
-      ],
-      "excludeContext": [
-        "StringLiteral",
-        "Comment"
-      ]
-    },
-    "doc_url": "https://angular.dev/reference/migrations"
-  },
-  {
-    "key": "incremental_hydration_stable",
-    "summary": "Hydratation incrémentale stable",
-    "description": "L'hydratation incrémentale passe de expérimental à stable, permettant d'hydrater progressivement les composants Angular côté client. Combiné avec @defer et les triggers d'hydratation, réduit drastiquement le TTI et le JavaScript initial sur mobile.",
-    "estimated_time_per_occurrence": 15,
-    "onFile": null,
-    "fileTypes": [
-      "*.ts",
-      "*.html"
-    ],
-    "regex": "(?<![\"\\'])\\bprovideClientHydration\\s*\\(",
-    "category": "ssr",
-    "auto_fixable": false,
-    "migration_command": null,
-    "risk_level": "medium",
-    "code_description": "// ✅ API stable en v20\n\nbootstrapApplication(App, {\n  providers: [\n    provideClientHydration(withIncrementalHydration())\n  ]\n});\n\n// Template:\n@defer (hydrate on viewport) {\n  <heavy-component />\n}",
-    "astPattern": {
-      "nodeType": "CallExpression",
-      "functionName": "provideClientHydration",
-      "arguments": {
-        "containsCall": {
-          "functionName": "withIncrementalHydration"
-        }
-      },
-      "excludeContext": [
-        "StringLiteral",
-        "Comment"
-      ]
-    },
-    "doc_url": "https://angular.dev/reference/migrations"
-  },
-  {
-    "key": "server_routes_stable",
-    "summary": "Configuration rendu par route stable",
-    "description": "L'API de configuration du rendu par route devient stable, permettant de définir précisément la stratégie (Prerender/Server/Client) pour chaque route. getPrerenderParams génère dynamiquement les paramètres pour le SSG, idéal pour les blogs et e-commerce.",
-    "estimated_time_per_occurrence": 20,
-    "onFile": null,
-    "fileTypes": [
-      "*.ts"
-    ],
-    "regex": "export\\s+const\\s+serverRoutes",
-    "category": "ssr",
-    "auto_fixable": false,
-    "migration_command": null,
-    "risk_level": "medium",
-    "code_description": "// app.routes.server.ts - ✅ API stable\n\nexport const serverRoutes: ServerRoute[] = [\n  { path: '/', renderMode: RenderMode.Prerender },\n  { path: '/api/**', renderMode: RenderMode.Server },\n  { path: '/admin/**', renderMode: RenderMode.Client },\n  {\n    path: '/product/:id',\n    renderMode: RenderMode.Prerender,\n    async getPrerenderParams() {\n      return ids.map(id => ({ id }));\n    }\n  }\n];",
-    "astPattern": {
-      "nodeType": "VariableDeclaration",
-      "name": "serverRoutes",
-      "type": "ServerRoute[]",
-      "exported": true,
-      "excludeContext": [
-        "StringLiteral",
-        "Comment"
-      ]
-    },
-    "doc_url": "https://angular.dev/reference/migrations"
-  },
-  {
-    "key": "zoneless_preview",
-    "summary": "Zoneless en preview développeur avec error handling",
-    "description": "Le mode zoneless entre en preview développeur avec provideBrowserGlobalErrorListeners pour capturer les erreurs non gérées. Élimine Zone.js (~50KB), améliore les performances de 35% (cf YouTube), mais nécessite des tests approfondis avant production.",
-    "estimated_time_per_occurrence": 30,
-    "onFile": null,
-    "fileTypes": [
-      "*.ts",
-      "angular.json"
-    ],
-    "regex": "\\bprovideZonelessChangeDetection\\b\\s*\\(",
-    "category": "architecture",
-    "auto_fixable": false,
-    "migration_command": null,
-    "risk_level": "high",
-    "code_description": "// ✅ Preview développeur\n\nbootstrapApplication(App, {\n  providers: [\n    provideZonelessChangeDetection(),\n    provideBrowserGlobalErrorListeners() // Nouveau\n  ]\n});\n\n// angular.json: retirer \"zone.js\"",
-    "astPattern": {
-      "nodeType": "CallExpression",
-      "functionName": "provideZonelessChangeDetection",
-      "nextProvider": {
-        "missing": "provideBrowserGlobalErrorListeners"
-      },
-      "excludeContext": [
-        "StringLiteral",
-        "Comment"
-      ]
-    },
-    "doc_url": "https://angular.dev/reference/migrations"
-  }
+[
+  {
+    "key": "control_flow_deprecation",
+    "summary": "⚠️ DÉPRÉCIÉ: *ngIf/*ngFor/*ngSwitch (retrait v22)",
+    "description": "Les directives structurelles *ngIf, *ngFor et *ngSwitch sont officiellement dépréciées en Angular 20 et seront complètement retirées en v22. Migrer dès maintenant vers la syntaxe Control Flow (@if, @for, @switch) pour éviter les breaking changes futurs.",
+    "estimated_time_per_occurrence": 3,
+    "onFile": null,
+    "fileTypes": [
+      "*.html",
+      "*.ts"
+    ],
+    "regex": "\\*ng(If|For|Switch)",
+    "category": "template",
+    "isAutoFixable": false,
+    "migration_command": "ng generate @angular/core:control-flow",
+    "risk_level": "high",
+    "code_description": "// ⚠️ DÉPRÉCIÉ - Retrait prévu en v22\n<div *ngIf=\"condition\">Content</div>\n<div *ngFor=\"let item of items\">{{ item }}</div>\n\n// Migrer vers Control Flow:\n@if (condition) {\n  <div>Content</div>\n}\n@for (item of items; track item.id) {\n  <div>{{ item }}</div>\n}",
+    "astPattern": {
+      "nodeType": "Attribute",
+      "name": [
+        "*ngIf",
+        "*ngFor",
+        "*ngSwitch",
+        "*ngSwitchCase",
+        "*ngSwitchDefault"
+      ],
+      "excludeContext": [
+        "StringLiteral",
+        "Comment"
+      ]
+    },
+    "doc_url": "https://angular.dev/reference/migrations"
+  },
+  {
+    "key": "signals_stable",
+    "summary": "APIs Signals stabilisées (effect, linkedSignal, toSignal, computed)",
+    "description": "Toutes les APIs de signaux sortent de leur phase expérimentale et deviennent stables en Angular 20: effect, linkedSignal, toSignal, computed. Adopter ces APIs maintenant garantit une stabilité à long terme et des performances optimales.",
+    "estimated_time_per_occurrence": 5,
+    "onFile": null,
+    "fileTypes": [
+      "*.ts"
+    ],
+    "regex": "\\b(effect|linkedSignal|toSignal|computed)\\s*\\(",
+    "category": "signals",
+    "isAutoFixable": false,
+    "migration_command": null,
+    "risk_level": "low",
+    "code_description": "// ✅ Maintenant stables (plus 'experimental')\n\neffect(() => {\n  console.log('Value:', mySignal());\n});\n\nconst linked = linkedSignal({\n  source: sourceSignal,\n  computation: () => 'default'\n});\n\nconst fromObs = toSignal(observable$, {\n  initialValue: 'default'\n});",
+    "astPattern": {
+      "nodeType": "CallExpression",
+      "functionName": [
+        "effect",
+        "linkedSignal",
+        "toSignal",
+        "computed"
+      ],
+      "excludeContext": [
+        "StringLiteral",
+        "Comment"
+      ]
+    },
+    "doc_url": "https://angular.dev/reference/migrations"
+  },
+  {
+    "key": "incremental_hydration_stable",
+    "summary": "Hydratation incrémentale stable",
+    "description": "L'hydratation incrémentale passe de expérimental à stable, permettant d'hydrater progressivement les composants Angular côté client. Combiné avec @defer et les triggers d'hydratation, réduit drastiquement le TTI et le JavaScript initial sur mobile.",
+    "estimated_time_per_occurrence": 15,
+    "onFile": null,
+    "fileTypes": [
+      "*.ts",
+      "*.html"
+    ],
+    "regex": "(?<![\"\\'])\\bprovideClientHydration\\s*\\(",
+    "category": "ssr",
+    "isAutoFixable": false,
+    "migration_command": null,
+    "risk_level": "medium",
+    "code_description": "// ✅ API stable en v20\n\nbootstrapApplication(App, {\n  providers: [\n    provideClientHydration(withIncrementalHydration())\n  ]\n});\n\n// Template:\n@defer (hydrate on viewport) {\n  <heavy-component />\n}",
+    "astPattern": {
+      "nodeType": "CallExpression",
+      "functionName": "provideClientHydration",
+      "arguments": {
+        "containsCall": {
+          "functionName": "withIncrementalHydration"
+        }
+      },
+      "excludeContext": [
+        "StringLiteral",
+        "Comment"
+      ]
+    },
+    "doc_url": "https://angular.dev/reference/migrations"
+  },
+  {
+    "key": "server_routes_stable",
+    "summary": "Configuration rendu par route stable",
+    "description": "L'API de configuration du rendu par route devient stable, permettant de définir précisément la stratégie (Prerender/Server/Client) pour chaque route. getPrerenderParams génère dynamiquement les paramètres pour le SSG, idéal pour les blogs et e-commerce.",
+    "estimated_time_per_occurrence": 20,
+    "onFile": null,
+    "fileTypes": [
+      "*.ts"
+    ],
+    "regex": "export\\s+const\\s+serverRoutes",
+    "category": "ssr",
+    "isAutoFixable": false,
+    "migration_command": null,
+    "risk_level": "medium",
+    "code_description": "// app.routes.server.ts - ✅ API stable\n\nexport const serverRoutes: ServerRoute[] = [\n  { path: '/', renderMode: RenderMode.Prerender },\n  { path: '/api/**', renderMode: RenderMode.Server },\n  { path: '/admin/**', renderMode: RenderMode.Client },\n  {\n    path: '/product/:id',\n    renderMode: RenderMode.Prerender,\n    async getPrerenderParams() {\n      return ids.map(id => ({ id }));\n    }\n  }\n];",
+    "astPattern": {
+      "nodeType": "VariableDeclaration",
+      "name": "serverRoutes",
+      "type": "ServerRoute[]",
+      "exported": true,
+      "excludeContext": [
+        "StringLiteral",
+        "Comment"
+      ]
+    },
+    "doc_url": "https://angular.dev/reference/migrations"
+  },
+  {
+    "key": "zoneless_preview",
+    "summary": "Zoneless en preview développeur avec error handling",
+    "description": "Le mode zoneless entre en preview développeur avec provideBrowserGlobalErrorListeners pour capturer les erreurs non gérées. Élimine Zone.js (~50KB), améliore les performances de 35% (cf YouTube), mais nécessite des tests approfondis avant production.",
+    "estimated_time_per_occurrence": 30,
+    "onFile": null,
+    "fileTypes": [
+      "*.ts",
+      "angular.json"
+    ],
+    "regex": "\\bprovideZonelessChangeDetection\\b\\s*\\(",
+    "category": "architecture",
+    "isAutoFixable": false,
+    "migration_command": null,
+    "risk_level": "high",
+    "code_description": "// ✅ Preview développeur\n\nbootstrapApplication(App, {\n  providers: [\n    provideZonelessChangeDetection(),\n    provideBrowserGlobalErrorListeners() // Nouveau\n  ]\n});\n\n// angular.json: retirer \"zone.js\"",
+    "astPattern": {
+      "nodeType": "CallExpression",
+      "functionName": "provideZonelessChangeDetection",
+      "nextProvider": {
+        "missing": "provideBrowserGlobalErrorListeners"
+      },
+      "excludeContext": [
+        "StringLiteral",
+        "Comment"
+      ]
+    },
+    "doc_url": "https://angular.dev/reference/migrations"
+  }
 ]

package/dist/src/models/interfaces/{ast-interfaces.js → angular-artifact-counts.interface.js}

@@ -1,5 +1,2 @@
 "use strict";
-/**
- * Interfaces pour l'analyse AST et les matchers
- */
 Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/models/interfaces/base-target.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/models/interfaces/checklist-state.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/models/interfaces/dependency-counts.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/models/interfaces/migration-guide-data.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/models/interfaces/module-info.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/models/interfaces/parallelization.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/models/interfaces/refer-to-pattern.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/models/interfaces/summary-totals.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/models/interfaces/window-with-data.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/templates/workload/dashboard.template.js

@@ -5,59 +5,22 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderDashboard = renderDashboard;
 const core_1 = require("../../utils/core");
+const unified_settings_panel_template_1 = require("./unified-settings-panel.template");
 function renderDashboard(workload) {
     const stats = workload.stats;
     const time = workload.totalTime;
     // Date de départ par défaut : aujourd'hui
     const today = new Date().toISOString().split('T')[0]; // Format YYYY-MM-DD
     return `
+        <!-- Unified Settings Panel (Migrations + Priorités) -->
+        ${(0, unified_settings_panel_template_1.renderUnifiedSettingsPanel)()}
+
         <div class="bg-white rounded-2xl shadow-xl p-8 mb-8">
-            <!-- Header avec titre et sélecteur de migrations -->
-            <div class="flex flex-col md:flex-row md:justify-between md:items-center gap-4 mb-6">
-                <h2 class="text-3xl font-bold text-gray-800 flex items-center">
+            <!-- Header avec titre -->
+            <div class="flex items-center mb-6">
+                <h2 class="text-3xl font-bold text-gray-800">
                     📊 Dashboard Global
-                    <span data-migration-count class="ml-2 px-2 py-1 bg-green-100 text-green-700 text-xs font-semibold rounded-full">Toutes</span>
                 </h2>
-
-                <!-- Migration Selector -->
-                <div class="flex flex-col sm:flex-row gap-2 items-start sm:items-center">
-                    <span class="text-sm font-medium text-gray-700">Migrations :</span>
-                    <div class="flex gap-2 flex-wrap">
-                        <label class="flex items-center gap-1 px-3 py-1.5 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors">
-                            <input
-                                type="checkbox"
-                                data-migration-select="to18"
-                                class="w-4 h-4 text-blue-600 rounded focus:ring-2 focus:ring-blue-500"
-                                checked
-                            />
-                            <span class="text-sm font-medium text-gray-700">To 18</span>
-                        </label>
-                        <label class="flex items-center gap-1 px-3 py-1.5 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors">
-                            <input
-                                type="checkbox"
-                                data-migration-select="to19"
-                                class="w-4 h-4 text-blue-600 rounded focus:ring-2 focus:ring-blue-500"
-                                checked
-                            />
-                            <span class="text-sm font-medium text-gray-700">To 19</span>
-                        </label>
-                        <label class="flex items-center gap-1 px-3 py-1.5 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors">
-                            <input
-                                type="checkbox"
-                                data-migration-select="to20"
-                                class="w-4 h-4 text-blue-600 rounded focus:ring-2 focus:ring-blue-500"
-                                checked
-                            />
-                            <span class="text-sm font-medium text-gray-700">To 20</span>
-                        </label>
-                        <button
-                            data-migration-select-all
-                            class="px-3 py-1.5 bg-blue-100 text-blue-700 text-sm font-semibold rounded-lg hover:bg-blue-200 transition-colors"
-                        >
-                            Toutes
-                        </button>
-                    </div>
-                </div>
             </div>
 
             <!-- KPIs -->

package/dist/src/templates/workload/guide-rule-card.template.js

@@ -50,7 +50,7 @@ function renderGuideRuleCard(rule, matches) {
                             <div class="flex items-center flex-wrap gap-2">
                                 ${(0, shared_1.renderBadge)(rule.risk_level.toUpperCase(), riskColor)}
                                 ${(0, shared_1.renderBadge)(rule.category, 'blue')}
-                                ${rule.auto_fixable ? (0, shared_1.renderBadge)('Auto-fixable', 'green') : ''}
+                                ${rule.isAutoFixable ? (0, shared_1.renderBadge)('Auto-fixable', 'green') : ''}
                             </div>
                         </div>
                     </div>

package/dist/src/templates/workload/rule-modal.template.js

@@ -67,7 +67,7 @@ function renderModalHeader(rule, riskColor) {
                 <div class="flex items-center space-x-2">
                     ${(0, shared_1.renderBadge)(rule.risk_level.toUpperCase(), riskColor)}
                     ${(0, shared_1.renderBadge)(rule.category, 'blue')}
-                    ${rule.auto_fixable ? (0, shared_1.renderBadge)('Auto-fixable', 'green') : ''}
+                    ${rule.isAutoFixable ? (0, shared_1.renderBadge)('Auto-fixable', 'green') : ''}
                 </div>
             </div>
             <button data-modal-close class="text-gray-400 hover:text-gray-600 text-3xl font-bold leading-none">
@@ -198,8 +198,6 @@ function renderAffectedFilesSection(matches) {
 function renderMatchItem(match) {
     const truncatedText = match.matchedText.substring(0, 100);
     const displayText = match.matchedText.length > 100 ? `${truncatedText}...` : truncatedText;
-    // Formater le chemin pour VSCode (forward slashes, lowercase drive letter)
-    const vscodePath = formatVSCodePath(match.filePath);
     return `
         <li class="text-sm">
             <div class="flex items-start justify-between">
@@ -208,7 +206,10 @@ function renderMatchItem(match) {
                     <p class="text-gray-600 mt-1 ml-4 text-xs font-mono bg-white p-2 rounded">${(0, shared_1.escapeHtml)(displayText)}</p>
                 </div>
                 <a
-                    href="vscode://file/${vscodePath}:${match.lineNumber}"
+                    href="#"
+                    data-vscode-open
+                    data-relative-path="${(0, shared_1.escapeHtml)(match.filePath)}"
+                    data-line-number="${match.lineNumber}"
                     class="px-3 py-1.5 text-xs bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium shadow-sm"
                     title="Ouvrir dans VSCode à la ligne ${match.lineNumber}"
                 >
@@ -218,22 +219,6 @@ function renderMatchItem(match) {
         </li>
     `;
 }
-/**
- * Formate un chemin Windows pour VSCode URI
- * VSCode nécessite: forward slashes + lowercase drive letter
- * Exemple: C:\Users\file.ts -> c:/Users/file.ts
- */
-function formatVSCodePath(filePath) {
-    // Remplacer backslashes par forward slashes
-    let formatted = filePath.replace(/\\/g, '/');
-    // Convertir la lettre de lecteur en minuscule (C: -> c:)
-    // Format: "C:/path" ou "C:\path" -> "c:/path"
-    const driveLetterMatch = formatted.match(/^([A-Z]):/);
-    if (driveLetterMatch) {
-        formatted = driveLetterMatch[1].toLowerCase() + formatted.substring(1);
-    }
-    return formatted;
-}
 /**
  * Section Métadonnées
  * Exportée pour réutilisation dans guide-rule-card.template.ts
@@ -257,7 +242,7 @@ function renderMetadataSection(rule) {
                 </div>
                 <div>
                     <span class="font-semibold text-gray-700">Auto-fixable :</span>
-                    <span class="ml-2 text-gray-600">${rule.auto_fixable ? '✅ Oui' : '❌ Non'}</span>
+                    <span class="ml-2 text-gray-600">${rule.isAutoFixable ? '✅ Oui' : '❌ Non'}</span>
                 </div>
             </div>
         </section>

package/dist/src/templates/workload/unified-settings-panel.template.js

@@ -0,0 +1,149 @@
+"use strict";
+/**
+ * Template Unified Settings Panel - Réglages migrations + priorités
+ * Regroupement des filtres de migrations et priorités dans un seul bloc
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderUnifiedSettingsPanel = renderUnifiedSettingsPanel;
+/**
+ * Génère le panel de réglages unifié
+ */
+function renderUnifiedSettingsPanel() {
+    return `
+        <div class="bg-white rounded-2xl shadow-xl p-6 mb-8">
+            <!-- Header avec titre et badge global -->
+            <div class="flex items-center justify-between mb-6">
+                <h2 class="text-2xl font-bold text-gray-800 flex items-center">
+                    ⚙️ Réglages de Filtrage
+                    <span data-total-filters-count class="ml-3 px-3 py-1.5 bg-green-100 text-green-700 text-sm font-semibold rounded-full">
+                        6/6 actifs
+                    </span>
+                </h2>
+            </div>
+
+            <!-- Grid 2 colonnes : Migrations | Priorités -->
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                <!-- Section Migrations -->
+                <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <h3 class="text-lg font-bold text-blue-900 flex items-center">
+                            🔄 Migrations
+                            <span data-migration-count class="ml-2 px-2 py-1 bg-green-100 text-green-700 text-xs font-semibold rounded-full">Toutes</span>
+                        </h3>
+                        <button
+                            data-migration-select-all
+                            class="px-3 py-1.5 bg-blue-100 text-blue-700 text-sm font-semibold rounded-lg hover:bg-blue-200 transition-colors focus:ring-2 focus:ring-blue-500"
+                            aria-label="Sélectionner toutes les migrations"
+                        >
+                            Toutes
+                        </button>
+                    </div>
+
+                    <div class="space-y-3">
+                        <label class="flex items-center gap-3 px-4 py-3 bg-white rounded-lg cursor-pointer hover:bg-blue-50 transition-colors border border-blue-200">
+                            <input
+                                type="checkbox"
+                                data-migration-select="to18"
+                                class="w-5 h-5 text-blue-600 rounded focus:ring-2 focus:ring-blue-500"
+                                checked
+                                aria-label="Migration vers Angular 18"
+                            />
+                            <span class="text-base font-medium text-gray-800">Angular 17 → 18</span>
+                        </label>
+
+                        <label class="flex items-center gap-3 px-4 py-3 bg-white rounded-lg cursor-pointer hover:bg-blue-50 transition-colors border border-blue-200">
+                            <input
+                                type="checkbox"
+                                data-migration-select="to19"
+                                class="w-5 h-5 text-blue-600 rounded focus:ring-2 focus:ring-blue-500"
+                                checked
+                                aria-label="Migration vers Angular 19"
+                            />
+                            <span class="text-base font-medium text-gray-800">Angular 18 → 19</span>
+                        </label>
+
+                        <label class="flex items-center gap-3 px-4 py-3 bg-white rounded-lg cursor-pointer hover:bg-blue-50 transition-colors border border-blue-200">
+                            <input
+                                type="checkbox"
+                                data-migration-select="to20"
+                                class="w-5 h-5 text-blue-600 rounded focus:ring-2 focus:ring-blue-500"
+                                checked
+                                aria-label="Migration vers Angular 20"
+                            />
+                            <span class="text-base font-medium text-gray-800">Angular 19 → 20</span>
+                        </label>
+                    </div>
+                </div>
+
+                <!-- Section Priorités -->
+                <div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <h3 class="text-lg font-bold text-purple-900 flex items-center">
+                            🎯 Priorités
+                            <span data-priority-count class="ml-2 px-2 py-1 bg-green-100 text-green-700 text-xs font-semibold rounded-full">Toutes</span>
+                        </h3>
+                        <button
+                            data-priority-select-all
+                            class="px-3 py-1.5 bg-purple-100 text-purple-700 text-sm font-semibold rounded-lg hover:bg-purple-200 transition-colors focus:ring-2 focus:ring-purple-500"
+                            aria-label="Sélectionner toutes les priorités"
+                        >
+                            Toutes
+                        </button>
+                    </div>
+
+                    <div class="space-y-3">
+                        <label class="flex items-center gap-3 px-4 py-3 bg-white rounded-lg cursor-pointer hover:bg-purple-50 transition-colors border border-purple-200">
+                            <input
+                                type="checkbox"
+                                data-priority-select="obligatoire"
+                                class="w-5 h-5 text-purple-600 rounded focus:ring-2 focus:ring-purple-500"
+                                checked
+                                aria-label="Règles obligatoires"
+                            />
+                            <div class="flex items-center gap-2">
+                                <span class="text-2xl">🔴</span>
+                                <span class="text-base font-medium text-gray-800">Obligatoire</span>
+                            </div>
+                        </label>
+
+                        <label class="flex items-center gap-3 px-4 py-3 bg-white rounded-lg cursor-pointer hover:bg-purple-50 transition-colors border border-purple-200">
+                            <input
+                                type="checkbox"
+                                data-priority-select="recommande"
+                                class="w-5 h-5 text-purple-600 rounded focus:ring-2 focus:ring-purple-500"
+                                checked
+                                aria-label="Règles recommandées"
+                            />
+                            <div class="flex items-center gap-2">
+                                <span class="text-2xl">🟡</span>
+                                <span class="text-base font-medium text-gray-800">Recommandé</span>
+                            </div>
+                        </label>
+
+                        <label class="flex items-center gap-3 px-4 py-3 bg-white rounded-lg cursor-pointer hover:bg-purple-50 transition-colors border border-purple-200">
+                            <input
+                                type="checkbox"
+                                data-priority-select="optionnelle"
+                                class="w-5 h-5 text-purple-600 rounded focus:ring-2 focus:ring-purple-500"
+                                checked
+                                aria-label="Règles optionnelles"
+                            />
+                            <div class="flex items-center gap-2">
+                                <span class="text-2xl">🟢</span>
+                                <span class="text-base font-medium text-gray-800">Optionnel</span>
+                            </div>
+                        </label>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Info Box -->
+            <div class="mt-6 p-4 bg-gray-50 rounded-lg border border-gray-200">
+                <p class="text-sm text-gray-700">
+                    <strong>ℹ️ Info :</strong> Les filtres s'appliquent à l'ensemble du rapport (timelines, gantt, diagrammes et totaux).
+                    Au moins 1 migration et 1 priorité doivent rester sélectionnées.
+                </p>
+            </div>
+        </div>
+    `;
+}