@silvestv/migration-planificator 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (122) hide show
  1. package/LICENSE +96 -0
  2. package/README.fr.md +359 -0
  3. package/README.md +360 -0
  4. package/SECURITY.md +187 -0
  5. package/dist/client.bundle.js +357 -0
  6. package/dist/src/core/app-analyzer.js +134 -0
  7. package/dist/src/core/ast/matchers/html/html-attribute-matcher.js +86 -0
  8. package/dist/src/core/ast/matchers/html/html-component-matcher.js +40 -0
  9. package/dist/src/core/ast/matchers/html/html-element-matcher.js +54 -0
  10. package/dist/src/core/ast/matchers/html/html-parser.js +58 -0
  11. package/dist/src/core/ast/matchers/html/html-pipe-matcher.js +95 -0
  12. package/dist/src/core/ast/matchers/html/html-text-matcher.js +53 -0
  13. package/dist/src/core/ast/matchers/html/index.js +118 -0
  14. package/dist/src/core/ast/matchers/index.js +377 -0
  15. package/dist/src/core/ast/matchers/ts/collection-matcher.js +51 -0
  16. package/dist/src/core/ast/matchers/ts/context-matcher.js +275 -0
  17. package/dist/src/core/ast/matchers/ts/decorator-matcher.js +465 -0
  18. package/dist/src/core/ast/matchers/ts/expression-matcher.js +237 -0
  19. package/dist/src/core/ast/matchers/ts/file-matcher.js +97 -0
  20. package/dist/src/core/ast/matchers/ts/hierarchy-matcher.js +172 -0
  21. package/dist/src/core/ast/matchers/ts/import-matcher.js +39 -0
  22. package/dist/src/core/ast/matchers/ts/index.js +53 -0
  23. package/dist/src/core/ast/matchers/ts/node-matcher.js +156 -0
  24. package/dist/src/core/ast/matchers/ts/symbol-matcher.js +281 -0
  25. package/dist/src/core/ast/matchers/ts/type-matcher.js +207 -0
  26. package/dist/src/core/ast/matchers/utils/matcher-helpers.js +37 -0
  27. package/dist/src/core/ast/scanner-ast.js +444 -0
  28. package/dist/src/core/project-detector.js +196 -0
  29. package/dist/src/core/project-strategy/index.js +9 -0
  30. package/dist/src/core/project-strategy/nx-strategy.js +130 -0
  31. package/dist/src/core/project-strategy/project-strategy.interface.js +2 -0
  32. package/dist/src/core/project-strategy/standalone-strategy.js +74 -0
  33. package/dist/src/core/project-strategy/strategy-factory.js +15 -0
  34. package/dist/src/core/rules-loader.js +89 -0
  35. package/dist/src/core/scan-reporter.js +316 -0
  36. package/dist/src/core/scanner-delta.js +339 -0
  37. package/dist/src/core/scanner-orchestrator.js +266 -0
  38. package/dist/src/core/scanner-regex.js +298 -0
  39. package/dist/src/core/workload/calculator.js +82 -0
  40. package/dist/src/core/workload/constants.js +15 -0
  41. package/dist/src/core/workload/grouping.js +18 -0
  42. package/dist/src/core/workload/hierarchy-calculator.js +127 -0
  43. package/dist/src/core/workload/index.js +11 -0
  44. package/dist/src/core/workload/metadata.js +20 -0
  45. package/dist/src/core/workload/special-workload.js +101 -0
  46. package/dist/src/core/workload/target-resolver.js +34 -0
  47. package/dist/src/data/angular-migration-rules.json +2337 -0
  48. package/dist/src/data/markdown/angular-migration-17-18.md +408 -0
  49. package/dist/src/data/markdown/angular-migration-18-19.md +600 -0
  50. package/dist/src/data/markdown/angular-migration-19-20.md +521 -0
  51. package/dist/src/data/rules/rearchitecture/rearchitecture-rules.json +66 -0
  52. package/dist/src/data/rules/to18/rules-18-obligatoire.json +374 -0
  53. package/dist/src/data/rules/to18/rules-18-optionnelle.json +188 -0
  54. package/dist/src/data/rules/to18/rules-18-recommande.json +218 -0
  55. package/dist/src/data/rules/to19/rules-19-obligatoire.json +348 -0
  56. package/dist/src/data/rules/to19/rules-19-optionnelle.json +223 -0
  57. package/dist/src/data/rules/to19/rules-19-recommande.json +200 -0
  58. package/dist/src/data/rules/to20/rules-20-obligatoire.json +556 -0
  59. package/dist/src/data/rules/to20/rules-20-optionnelle.json +190 -0
  60. package/dist/src/data/rules/to20/rules-20-recommande.json +151 -0
  61. package/dist/src/index.js +161 -0
  62. package/dist/src/models/chip-config.js +45 -0
  63. package/dist/src/models/interfaces/app-details.interface.js +2 -0
  64. package/dist/src/models/interfaces/ast-interfaces.js +5 -0
  65. package/dist/src/models/interfaces/ast-pattern.interface.js +2 -0
  66. package/dist/src/models/interfaces/client-interfaces.js +6 -0
  67. package/dist/src/models/interfaces/detection-stats.interface.js +2 -0
  68. package/dist/src/models/interfaces/html-match.interface.js +2 -0
  69. package/dist/src/models/interfaces/html-report-data.interface.js +2 -0
  70. package/dist/src/models/interfaces/lib-details.interface.js +2 -0
  71. package/dist/src/models/interfaces/migration-rules.interface.js +2 -0
  72. package/dist/src/models/interfaces/parsed-args.interface.js +2 -0
  73. package/dist/src/models/interfaces/project-info.interface.js +2 -0
  74. package/dist/src/models/interfaces/project-overview-data.interface.js +2 -0
  75. package/dist/src/models/interfaces/rule-match.interface.js +2 -0
  76. package/dist/src/models/interfaces/rule.interface.js +2 -0
  77. package/dist/src/models/interfaces/rules-by-priority.interface.js +2 -0
  78. package/dist/src/models/interfaces/scanner-comparison.interface.js +2 -0
  79. package/dist/src/models/interfaces/special-workload.interface.js +2 -0
  80. package/dist/src/models/interfaces/workload-report.interface.js +2 -0
  81. package/dist/src/models/types/build-block-blob.type.js +2 -0
  82. package/dist/src/models/types/migration-version.type.js +2 -0
  83. package/dist/src/models/types/project-type.type.js +2 -0
  84. package/dist/src/models/types/risk-level.type.js +2 -0
  85. package/dist/src/models/types/rule-category.type.js +2 -0
  86. package/dist/src/models/types/rule-priority.type.js +2 -0
  87. package/dist/src/models/types/rule-workload-type.type.js +2 -0
  88. package/dist/src/templates/landing/applications-analyzed.template.js +18 -0
  89. package/dist/src/templates/landing/card-app-info.template.js +63 -0
  90. package/dist/src/templates/landing/card-lib-info.template.js +67 -0
  91. package/dist/src/templates/landing/libs-analyzed.template.js +22 -0
  92. package/dist/src/templates/landing/nx-summary.template.js +115 -0
  93. package/dist/src/templates/landing/project-overview.template.js +27 -0
  94. package/dist/src/templates/page/index-page.template.js +95 -0
  95. package/dist/src/templates/page/main.template.js +83 -0
  96. package/dist/src/templates/page/migration-guide.template.js +175 -0
  97. package/dist/src/templates/page/workload-report.template.js +53 -0
  98. package/dist/src/templates/workload/dashboard.template.js +184 -0
  99. package/dist/src/templates/workload/filters-panel.template.js +215 -0
  100. package/dist/src/templates/workload/guide-rule-card.template.js +107 -0
  101. package/dist/src/templates/workload/hierarchy-nx.template.js +104 -0
  102. package/dist/src/templates/workload/hierarchy-shared.js +163 -0
  103. package/dist/src/templates/workload/hierarchy-standalone.template.js +36 -0
  104. package/dist/src/templates/workload/hierarchy.template.js +35 -0
  105. package/dist/src/templates/workload/rule-modal.template.js +280 -0
  106. package/dist/src/utils/core/args-parser.js +123 -0
  107. package/dist/src/utils/core/array-helpers.js +18 -0
  108. package/dist/src/utils/core/ast-helpers.js +99 -0
  109. package/dist/src/utils/core/file-helpers.js +109 -0
  110. package/dist/src/utils/core/html-helpers.js +36 -0
  111. package/dist/src/utils/core/index.js +28 -0
  112. package/dist/src/utils/core/logger.js +38 -0
  113. package/dist/src/utils/core/rule-helpers.js +15 -0
  114. package/dist/src/utils/core/workload-formatter.js +6 -0
  115. package/dist/src/utils/shared/array-helpers.js +25 -0
  116. package/dist/src/utils/shared/date-helpers.js +109 -0
  117. package/dist/src/utils/shared/html-helpers.js +37 -0
  118. package/dist/src/utils/shared/index.js +25 -0
  119. package/dist/src/utils/shared/rule-helpers.js +20 -0
  120. package/dist/src/utils/shared/time-formatters.js +76 -0
  121. package/dist/styles.css +2 -0
  122. package/package.json +107 -0
package/dist/src/templates/page/migration-guide.template.js ADDED
@@ -0,0 +1,175 @@
1
+ "use strict";
2
+ /**
3
+ * Template : Page Migration Guide
4
+ * Guide méthodologique étape par étape pour accompagner la migration Angular
5
+ */
6
+ Object.defineProperty(exports, "__esModule", { value: true });
7
+ exports.renderMigrationGuidePage = renderMigrationGuidePage;
8
+ /**
9
+ * Génère le HTML de la page Migration Guide
10
+ */
11
+ function renderMigrationGuidePage(data, cssContent, jsContent, timestamp, version) {
12
+ const { rules, matches, projectInfo, rulePriorityMap, ruleMigrationMap } = data;
13
+ return `
14
+ <!DOCTYPE html>
15
+ <html lang="fr">
16
+ <head>
17
+ <meta charset="UTF-8">
18
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
19
+ <title>Migration Guide - ${projectInfo.name}</title>
20
+ <style>${cssContent}</style>
21
+ </head>
22
+ <body class="bg-gray-50 min-h-screen">
23
+ <!-- Header -->
24
+ <header class="bg-gradient-to-r from-blue-600 to-indigo-700 text-white shadow-lg">
25
+ <div class="max-w-7xl mx-auto px-6 py-8">
26
+ <div class="flex items-center justify-between">
27
+ <div>
28
+ <h1 class="text-4xl font-bold mb-2">📖 Migration Guide</h1>
29
+ <p class="text-blue-100">Guide méthodologique étape par étape - ${projectInfo.name}</p>
30
+ </div>
31
+ <a href="migration-planner.html"
32
+ class="px-6 py-3 bg-white text-blue-600 font-semibold rounded-lg hover:bg-blue-50 transition-colors shadow-md">
33
+ ← Retour
34
+ </a>
35
+ </div>
36
+ </div>
37
+ </header>
38
+
39
+ <!-- Main Content -->
40
+ <main class="max-w-7xl mx-auto px-6 py-8">
41
+ <!-- Sélecteur de Migration -->
42
+ <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
43
+ <div class="flex items-center justify-between">
44
+ <div>
45
+ <h2 class="text-2xl font-bold text-gray-800 mb-2">Sélectionner la migration</h2>
46
+ <p class="text-gray-600">Choisissez la version cible Angular pour afficher le guide correspondant</p>
47
+ </div>
48
+ <select
49
+ id="migration-selector"
50
+ class="px-6 py-3 text-lg font-semibold border-2 border-blue-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 cursor-pointer"
51
+ >
52
+ <option value="to18">Angular 17 → 18</option>
53
+ <option value="to19">Angular 18 → 19</option>
54
+ <option value="to20">Angular 19 → 20</option>
55
+ </select>
56
+ </div>
57
+
58
+ <!-- Compteur progression -->
59
+ <div class="mt-6 pt-6 border-t border-gray-200">
60
+ <div class="flex items-center justify-between">
61
+ <div>
62
+ <span class="text-sm font-medium text-gray-600">Progression</span>
63
+ <div class="flex items-center space-x-3 mt-1">
64
+ <div class="w-64 h-3 bg-gray-200 rounded-full overflow-hidden">
65
+ <div id="progress-bar" class="h-full bg-green-500 transition-all duration-300" style="width: 0%"></div>
66
+ </div>
67
+ <span id="progress-text" class="text-sm font-semibold text-gray-700">0 / 0 règles complétées</span>
68
+ </div>
69
+ </div>
70
+ <button
71
+ id="reset-checklist-btn"
72
+ class="px-4 py-2 text-sm bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors"
73
+ >
74
+ Réinitialiser
75
+ </button>
76
+ </div>
77
+ </div>
78
+ </div>
79
+
80
+ <!-- Instructions -->
81
+ <div class="bg-blue-50 border-l-4 border-blue-500 rounded-lg p-6 mb-8">
82
+ <h3 class="text-lg font-bold text-blue-900 mb-3">💡 Comment utiliser ce guide ?</h3>
83
+ <ul class="space-y-2 text-blue-800">
84
+ <li>✅ <strong>Cochez</strong> les règles au fur et à mesure de leur complétion</li>
85
+ <li>🔴 Commencez par les <strong>Routines + Obligatoires</strong> (priorité absolue)</li>
86
+ <li>⚡ Utilisez les <strong>commandes de migration</strong> fournies pour automatiser les changements</li>
87
+ <li>📂 Cliquez sur <strong>"Ouvrir"</strong> pour accéder directement aux fichiers impactés dans VSCode</li>
88
+ <li>📖 Consultez la <strong>documentation</strong> officielle en cas de doute</li>
89
+ </ul>
90
+ </div>
91
+
92
+ <!-- Section 1: Routine + Obligatoire (PRIORITÉ ABSOLUE) -->
93
+ <section id="section-routine-obligatoire" class="mb-8 migration-section" data-migration="all">
94
+ <div class="bg-gradient-to-r from-red-500 to-red-600 text-white rounded-t-xl p-6">
95
+ <div class="flex items-center justify-between">
96
+ <div>
97
+ <h2 class="text-2xl font-bold mb-1">🔴 PRIORITÉ ABSOLUE - Routine + Obligatoire</h2>
98
+ <p class="text-red-100">Tâches critiques à effectuer en premier (manuelles + code)</p>
99
+ </div>
100
+ <span id="count-routine-obligatoire" class="text-3xl font-bold">0</span>
101
+ </div>
102
+ </div>
103
+ <div id="cards-routine-obligatoire" class="bg-white rounded-b-xl shadow-lg p-6">
104
+ <!-- Cards injectées dynamiquement -->
105
+ </div>
106
+ </section>
107
+
108
+ <!-- Section 2: Obligatoire -->
109
+ <section id="section-obligatoire" class="mb-8 migration-section" data-migration="all">
110
+ <div class="bg-gradient-to-r from-orange-500 to-orange-600 text-white rounded-t-xl p-6">
111
+ <div class="flex items-center justify-between">
112
+ <div>
113
+ <h2 class="text-2xl font-bold mb-1">🔴 Obligatoire</h2>
114
+ <p class="text-orange-100">Modifications critiques pour la compatibilité</p>
115
+ </div>
116
+ <span id="count-obligatoire" class="text-3xl font-bold">0</span>
117
+ </div>
118
+ </div>
119
+ <div id="cards-obligatoire" class="bg-white rounded-b-xl shadow-lg p-6">
120
+ <!-- Cards injectées dynamiquement -->
121
+ </div>
122
+ </section>
123
+
124
+ <!-- Section 3: Recommandé -->
125
+ <section id="section-recommande" class="mb-8 migration-section" data-migration="all">
126
+ <div class="bg-gradient-to-r from-yellow-500 to-yellow-600 text-white rounded-t-xl p-6">
127
+ <div class="flex items-center justify-between">
128
+ <div>
129
+ <h2 class="text-2xl font-bold mb-1">🟡 Recommandé</h2>
130
+ <p class="text-yellow-100">Bonnes pratiques fortement conseillées</p>
131
+ </div>
132
+ <span id="count-recommande" class="text-3xl font-bold">0</span>
133
+ </div>
134
+ </div>
135
+ <div id="cards-recommande" class="bg-white rounded-b-xl shadow-lg p-6">
136
+ <!-- Cards injectées dynamiquement -->
137
+ </div>
138
+ </section>
139
+
140
+ <!-- Section 4: Optionnel -->
141
+ <section id="section-optionnelle" class="mb-8 migration-section" data-migration="all">
142
+ <div class="bg-gradient-to-r from-green-500 to-green-600 text-white rounded-t-xl p-6">
143
+ <div class="flex items-center justify-between">
144
+ <div>
145
+ <h2 class="text-2xl font-bold mb-1">🟢 Optionnel</h2>
146
+ <p class="text-green-100">Améliorations facultatives</p>
147
+ </div>
148
+ <span id="count-optionnelle" class="text-3xl font-bold">0</span>
149
+ </div>
150
+ </div>
151
+ <div id="cards-optionnelle" class="bg-white rounded-b-xl shadow-lg p-6">
152
+ <!-- Cards injectées dynamiquement -->
153
+ </div>
154
+ </section>
155
+ </main>
156
+
157
+ <!-- Footer -->
158
+ <footer class="bg-white border-t border-gray-200 py-6 mt-12">
159
+ <div class="max-w-7xl mx-auto px-6 text-center text-gray-600">
160
+ <p>Angular Migration Planner v${version || '1.0.0'}</p>
161
+ <p class="mt-2 text-sm">Généré le ${new Date(timestamp).toLocaleDateString('fr-FR')}</p>
162
+ </div>
163
+ </footer>
164
+
165
+ <!-- Données injectées pour le client -->
166
+ <script>
167
+ window.__MIGRATION_GUIDE_DATA__ = ${JSON.stringify({ rules, matches, projectInfo, rulePriorityMap, ruleMigrationMap })};
168
+ </script>
169
+
170
+ <!-- Client JS -->
171
+ <script>${jsContent}</script>
172
+ </body>
173
+ </html>
174
+ `.trim();
175
+ }
package/dist/src/templates/page/workload-report.template.js ADDED
@@ -0,0 +1,53 @@
1
+ "use strict";
2
+ /**
3
+ * Template complet : Workload Report (Template 1)
4
+ */
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.renderWorkloadReport = renderWorkloadReport;
7
+ const core_1 = require("../../utils/core");
8
+ const dashboard_template_1 = require("../workload/dashboard.template");
9
+ const hierarchy_template_1 = require("../workload/hierarchy.template");
10
+ const filters_panel_template_1 = require("../workload/filters-panel.template");
11
+ const rule_modal_template_1 = require("../workload/rule-modal.template");
12
+ function renderWorkloadReport(data, cssContent, jsContent, version) {
13
+ const projectInfo = data.workloadReport.projectInfo;
14
+ const workload = data.workloadReport;
15
+ return `
16
+ <!DOCTYPE html>
17
+ <html lang="fr">
18
+ <head>
19
+ <meta charset="UTF-8">
20
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
21
+ <title>Workload Report - ${projectInfo.name}</title>
22
+ <style>${cssContent}</style>
23
+ </head>
24
+ <body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen p-8">
25
+ <div class="max-w-7xl mx-auto">
26
+
27
+ ${(0, dashboard_template_1.renderDashboard)(workload)}
28
+
29
+ ${(0, filters_panel_template_1.renderFiltersPanel)()}
30
+
31
+ ${(0, hierarchy_template_1.renderHierarchy)(workload)}
32
+
33
+ <!-- Footer -->
34
+ <footer class="mt-8 text-center text-gray-600 text-sm">
35
+ <p class="mb-1">Angular Migration Planner v${version || '1.0.0'}</p>
36
+ <p class="text-gray-500">Généré le ${(0, core_1.formatDate)(data.timestamp)}</p>
37
+ </footer>
38
+ </div>
39
+
40
+ <!-- Modals (générées dynamiquement pour chaque règle) -->
41
+ ${(0, rule_modal_template_1.renderRuleModals)(data.rules, data.matches)}
42
+
43
+ <!-- Data inlinée -->
44
+ <script>
45
+ window.__REPORT_DATA__ = ${(0, core_1.escapeJson)(data)};
46
+ </script>
47
+
48
+ <!-- Client-side bundle -->
49
+ <script>${jsContent}</script>
50
+ </body>
51
+ </html>
52
+ `.trim();
53
+ }
package/dist/src/templates/workload/dashboard.template.js ADDED
@@ -0,0 +1,184 @@
1
+ "use strict";
2
+ /**
3
+ * Template Dashboard avec KPIs et configuration
4
+ */
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.renderDashboard = renderDashboard;
7
+ const core_1 = require("../../utils/core");
8
+ function renderDashboard(workload) {
9
+ const stats = workload.stats;
10
+ const time = workload.totalTime;
11
+ // Date de départ par défaut : aujourd'hui
12
+ const today = new Date().toISOString().split('T')[0]; // Format YYYY-MM-DD
13
+ return `
14
+ <div class="bg-white rounded-2xl shadow-xl p-8 mb-8">
15
+ <!-- Header avec titre et sélecteur de migrations -->
16
+ <div class="flex flex-col md:flex-row md:justify-between md:items-center gap-4 mb-6">
17
+ <h2 class="text-3xl font-bold text-gray-800 flex items-center">
18
+ 📊 Dashboard Global
19
+ <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>
20
+ </h2>
21
+
22
+ <!-- Migration Selector -->
23
+ <div class="flex flex-col sm:flex-row gap-2 items-start sm:items-center">
24
+ <span class="text-sm font-medium text-gray-700">Migrations :</span>
25
+ <div class="flex gap-2 flex-wrap">
26
+ <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">
27
+ <input
28
+ type="checkbox"
29
+ data-migration-select="to18"
30
+ class="w-4 h-4 text-blue-600 rounded focus:ring-2 focus:ring-blue-500"
31
+ checked
32
+ />
33
+ <span class="text-sm font-medium text-gray-700">To 18</span>
34
+ </label>
35
+ <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">
36
+ <input
37
+ type="checkbox"
38
+ data-migration-select="to19"
39
+ class="w-4 h-4 text-blue-600 rounded focus:ring-2 focus:ring-blue-500"
40
+ checked
41
+ />
42
+ <span class="text-sm font-medium text-gray-700">To 19</span>
43
+ </label>
44
+ <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">
45
+ <input
46
+ type="checkbox"
47
+ data-migration-select="to20"
48
+ class="w-4 h-4 text-blue-600 rounded focus:ring-2 focus:ring-blue-500"
49
+ checked
50
+ />
51
+ <span class="text-sm font-medium text-gray-700">To 20</span>
52
+ </label>
53
+ <button
54
+ data-migration-select-all
55
+ class="px-3 py-1.5 bg-blue-100 text-blue-700 text-sm font-semibold rounded-lg hover:bg-blue-200 transition-colors"
56
+ >
57
+ Toutes
58
+ </button>
59
+ </div>
60
+ </div>
61
+ </div>
62
+
63
+ <!-- KPIs -->
64
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
65
+ <div class="bg-gradient-to-br from-blue-50 to-blue-100 p-6 rounded-xl">
66
+ <h3 class="text-lg font-semibold text-blue-900 mb-2">Charge totale</h3>
67
+ <p class="text-3xl font-bold text-blue-600" data-global-time>${(0, core_1.formatTime)(time.minutes, time.hours, time.days)}</p>
68
+ </div>
69
+ <div class="bg-gradient-to-br from-indigo-50 to-indigo-100 p-6 rounded-xl">
70
+ <h3 class="text-lg font-semibold text-indigo-900 mb-2">Règles actives</h3>
71
+ <p class="text-3xl font-bold text-indigo-600">${stats.uniqueRules}</p>
72
+ </div>
73
+ <div class="bg-gradient-to-br from-purple-50 to-purple-100 p-6 rounded-xl">
74
+ <h3 class="text-lg font-semibold text-purple-900 mb-2">Occurrences</h3>
75
+ <p class="text-3xl font-bold text-purple-600">${stats.totalOccurrences}</p>
76
+ </div>
77
+ <div class="bg-gradient-to-br from-pink-50 to-pink-100 p-6 rounded-xl">
78
+ <h3 class="text-lg font-semibold text-pink-900 mb-2">Fichiers spéciaux</h3>
79
+ <p class="text-3xl font-bold text-pink-600">${stats.totalSpecialWorkloadFiles}</p>
80
+ </div>
81
+ </div>
82
+
83
+ <!-- Charts Container -->
84
+ <!-- Ligne 1 : Migration + Apps & Libs (Nx) + Priorité -->
85
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8" id="charts-row-1">
86
+ <div class="bg-gray-50 rounded-xl p-4">
87
+ <h4 class="text-md font-semibold text-gray-700 mb-3 text-center">Répartition par Migration</h4>
88
+ <canvas id="chart-migrations" width="300" height="300"></canvas>
89
+ </div>
90
+
91
+ <!-- Apps & Libs (Nx uniquement, remplacé par vide si Standalone) -->
92
+ <div id="chart-targets-container" class="bg-gray-50 rounded-xl p-4" style="display: none;">
93
+ <h4 class="text-md font-semibold text-gray-700 mb-3 text-center">Répartition par Apps & Libs</h4>
94
+ <canvas id="chart-targets" width="300" height="300"></canvas>
95
+ </div>
96
+
97
+ <div class="bg-gray-50 rounded-xl p-4">
98
+ <h4 class="text-md font-semibold text-gray-700 mb-3 text-center">Par Priorité</h4>
99
+ <canvas id="chart-priorities" width="300" height="300"></canvas>
100
+ </div>
101
+ </div>
102
+
103
+ <!-- Ligne 2 : Top 10 Règles (100% width) -->
104
+ <div class="bg-gray-50 rounded-xl p-6 mb-8">
105
+ <div class="flex justify-between items-center mb-4">
106
+ <h4 class="text-md font-semibold text-gray-700">Top 10 Règles</h4>
107
+ <button
108
+ id="toggle-rules-details"
109
+ class="px-4 py-2 text-sm font-medium text-blue-600 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors"
110
+ >
111
+ Voir détails (20 règles)
112
+ </button>
113
+ </div>
114
+ <div style="height: 400px;">
115
+ <canvas id="chart-top-rules"></canvas>
116
+ </div>
117
+ </div>
118
+
119
+ <!-- Config Multi-Devs -->
120
+ <div class="bg-gray-50 rounded-xl p-6 mb-8">
121
+ <h3 class="text-xl font-bold text-gray-800 mb-4">⚙️ Configuration Équipe</h3>
122
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
123
+ <div>
124
+ <label class="block text-sm font-medium text-gray-700 mb-2">
125
+ Date de départ
126
+ </label>
127
+ <input
128
+ type="date"
129
+ data-start-date
130
+ value="${today}"
131
+ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
132
+ />
133
+ </div>
134
+ <div>
135
+ <label class="block text-sm font-medium text-gray-700 mb-2">
136
+ Nombre de développeurs
137
+ </label>
138
+ <input
139
+ type="number"
140
+ data-dev-count
141
+ min="1"
142
+ max="20"
143
+ value="1"
144
+ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
145
+ />
146
+ </div>
147
+ <div>
148
+ <label class="block text-sm font-medium text-gray-700 mb-2">
149
+ Heures par jour
150
+ </label>
151
+ <input
152
+ type="number"
153
+ data-hours-per-day
154
+ min="1"
155
+ max="10"
156
+ step="0.5"
157
+ value="7"
158
+ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
159
+ />
160
+ </div>
161
+ </div>
162
+ <div class="mt-4 p-4 bg-blue-50 rounded-lg">
163
+ <p class="text-sm text-blue-800">
164
+ <strong>Temps ajusté :</strong>
165
+ <span data-adjusted-time>${(0, core_1.formatTime)(time.minutes, time.hours, time.days)}</span>
166
+ <span class="ml-2 text-blue-600" data-dev-info>(1 développeur)</span>
167
+ </p>
168
+ </div>
169
+ </div>
170
+
171
+ <!-- Gantt Timeline -->
172
+ <div class="bg-gray-50 rounded-xl p-6">
173
+ <h3 class="text-xl font-bold text-gray-800 mb-4">📅 Timeline Migrations</h3>
174
+ <p class="text-sm text-gray-600 mb-4">
175
+ Séquençage strict : To18 → To19 → To20.
176
+ Les tâches <strong class="text-red-700">obligatoires</strong> s'exécutent séquentiellement,
177
+ les autres sont <strong class="text-red-700">parallélisables</strong> selon le nombre de développeurs.
178
+ Survolez les barres pour voir les détails.
179
+ </p>
180
+ <div id="gantt-timeline" class="overflow-x-auto"></div>
181
+ </div>
182
+ </div>
183
+ `;
184
+ }
package/dist/src/templates/workload/filters-panel.template.js ADDED
@@ -0,0 +1,215 @@
1
+ "use strict";
2
+ /**
3
+ * Template pour le panel de filtres avec accordion
4
+ */
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.renderFiltersPanel = renderFiltersPanel;
7
+ /**
8
+ * Génère le panel de filtres complet avec accordion
9
+ */
10
+ function renderFiltersPanel() {
11
+ return `
12
+ <div class="bg-white rounded-2xl shadow-xl mb-8 sticky top-4 z-20 overflow-hidden transition-all duration-300">
13
+ <!-- Header Compact (toujours visible - 80px max) -->
14
+ <div class="p-4 cursor-pointer hover:bg-gray-50 transition-colors" data-filter-toggle>
15
+ <!-- Ligne unique : titre, chips/badge, compteurs, actions -->
16
+ <div class="flex items-center justify-between">
17
+ <div class="flex items-center gap-3 flex-1 min-w-0">
18
+ <div class="flex items-center space-x-2 flex-shrink-0">
19
+ <span class="text-2xl">🔍</span>
20
+ <h2 class="text-xl font-bold text-gray-800">Filtres</h2>
21
+ </div>
22
+
23
+ <!-- Chips actifs (affichés si < 9 filtres) -->
24
+ <div
25
+ class="flex flex-wrap gap-2 min-h-0 flex-1"
26
+ data-active-chips-container
27
+ onclick="event.stopPropagation()"
28
+ >
29
+ <!-- Chips générés dynamiquement -->
30
+ </div>
31
+
32
+ <!-- Badge count (affiché si >= 9 filtres) -->
33
+ <span
34
+ data-filter-active-count
35
+ class="px-3 py-1 bg-blue-100 text-blue-700 text-sm font-semibold rounded-full flex-shrink-0 hidden"
36
+ >
37
+ 0 actif
38
+ </span>
39
+
40
+ <!-- Navigateur règles -->
41
+ <div class="flex items-center gap-2 flex-shrink-0 mr-4" onclick="event.stopPropagation()">
42
+ <button
43
+ data-filter-prev
44
+ class="p-1.5 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-all disabled:opacity-30 disabled:cursor-not-allowed"
45
+ title="Règle précédente"
46
+ >
47
+ <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
48
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
49
+ </svg>
50
+ </button>
51
+ <span data-filter-position class="text-xs text-gray-600 font-medium min-w-16 text-center">0 / 0</span>
52
+ <button
53
+ data-filter-next
54
+ class="p-1.5 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-all disabled:opacity-30 disabled:cursor-not-allowed"
55
+ title="Règle suivante"
56
+ >
57
+ <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
58
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
59
+ </svg>
60
+ </button>
61
+ </div>
62
+
63
+ <span data-filter-count class="text-sm text-gray-600 font-medium flex-shrink-0 mr-4">0 / 0 règles</span>
64
+ </div>
65
+ <div class="flex items-center space-x-3 flex-shrink-0">
66
+ <button
67
+ data-filter-clear
68
+ class="px-4 py-2 text-sm bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-all hover:scale-105 active:scale-95"
69
+ onclick="event.stopPropagation()"
70
+ >
71
+ Effacer
72
+ </button>
73
+ <div class="w-8 h-8 flex items-center justify-center rounded-lg bg-gray-100 transition-transform duration-300" data-filter-chevron>
74
+ <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
75
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
76
+ </svg>
77
+ </div>
78
+ </div>
79
+ </div>
80
+ </div>
81
+
82
+ <!-- Contenu développable -->
83
+ <div class="overflow-hidden transition-all duration-300" data-filter-content style="max-height: 0;">
84
+ <div class="p-6 pt-0 border-t border-gray-200">
85
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
86
+ <!-- Search Bar -->
87
+ <div class="md:col-span-4">
88
+ <label class="block text-sm font-medium text-gray-700 mb-2">
89
+ 🔎 Recherche textuelle
90
+ </label>
91
+ <input
92
+ type="text"
93
+ data-filter-search
94
+ placeholder="Rechercher une règle..."
95
+ class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
96
+ />
97
+ </div>
98
+
99
+ <!-- Risk Level Filters -->
100
+ <div>
101
+ <label class="block text-sm font-semibold text-gray-800 mb-3">
102
+ ⚠️ Niveau de Risque
103
+ </label>
104
+ <div class="space-y-2">
105
+ <label class="flex items-center space-x-2 cursor-pointer group">
106
+ <input type="checkbox" data-filter-risk="critical" class="w-4 h-4 text-red-600 rounded focus:ring-red-500 cursor-pointer" />
107
+ <span class="text-sm text-gray-700 group-hover:text-red-600 transition-colors">🔴 Critical</span>
108
+ </label>
109
+ <label class="flex items-center space-x-2 cursor-pointer group">
110
+ <input type="checkbox" data-filter-risk="high" class="w-4 h-4 text-orange-600 rounded focus:ring-orange-500 cursor-pointer" />
111
+ <span class="text-sm text-gray-700 group-hover:text-orange-600 transition-colors">🟠 High</span>
112
+ </label>
113
+ <label class="flex items-center space-x-2 cursor-pointer group">
114
+ <input type="checkbox" data-filter-risk="medium" class="w-4 h-4 text-yellow-600 rounded focus:ring-yellow-500 cursor-pointer" />
115
+ <span class="text-sm text-gray-700 group-hover:text-yellow-600 transition-colors">🟡 Medium</span>
116
+ </label>
117
+ <label class="flex items-center space-x-2 cursor-pointer group">
118
+ <input type="checkbox" data-filter-risk="low" class="w-4 h-4 text-green-600 rounded focus:ring-green-500 cursor-pointer" />
119
+ <span class="text-sm text-gray-700 group-hover:text-green-600 transition-colors">🟢 Low</span>
120
+ </label>
121
+ </div>
122
+ </div>
123
+
124
+ <!-- Category Filters -->
125
+ <div>
126
+ <label class="block text-sm font-semibold text-gray-800 mb-3">
127
+ 📂 Catégorie
128
+ </label>
129
+ <div class="space-y-2">
130
+ <label class="flex items-center space-x-2 cursor-pointer group">
131
+ <input type="checkbox" data-filter-category="environment" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-500 cursor-pointer" />
132
+ <span class="text-sm text-gray-700 group-hover:text-blue-600 transition-colors">Environment</span>
133
+ </label>
134
+ <label class="flex items-center space-x-2 cursor-pointer group">
135
+ <input type="checkbox" data-filter-category="imports" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-500 cursor-pointer" />
136
+ <span class="text-sm text-gray-700 group-hover:text-blue-600 transition-colors">Imports</span>
137
+ </label>
138
+ <label class="flex items-center space-x-2 cursor-pointer group">
139
+ <input type="checkbox" data-filter-category="api" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-500 cursor-pointer" />
140
+ <span class="text-sm text-gray-700 group-hover:text-blue-600 transition-colors">API</span>
141
+ </label>
142
+ <label class="flex items-center space-x-2 cursor-pointer group">
143
+ <input type="checkbox" data-filter-category="routing" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-500 cursor-pointer" />
144
+ <span class="text-sm text-gray-700 group-hover:text-blue-600 transition-colors">Routing</span>
145
+ </label>
146
+ <label class="flex items-center space-x-2 cursor-pointer group">
147
+ <input type="checkbox" data-filter-category="template" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-500 cursor-pointer" />
148
+ <span class="text-sm text-gray-700 group-hover:text-blue-600 transition-colors">Template</span>
149
+ </label>
150
+ <label class="flex items-center space-x-2 cursor-pointer group">
151
+ <input type="checkbox" data-filter-category="test" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-500 cursor-pointer" />
152
+ <span class="text-sm text-gray-700 group-hover:text-blue-600 transition-colors">Test</span>
153
+ </label>
154
+ <label class="flex items-center space-x-2 cursor-pointer group">
155
+ <input type="checkbox" data-filter-category="ssr" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-500 cursor-pointer" />
156
+ <span class="text-sm text-gray-700 group-hover:text-blue-600 transition-colors">SSR</span>
157
+ </label>
158
+ </div>
159
+ </div>
160
+
161
+ <!-- Rule Type Filters -->
162
+ <div>
163
+ <label class="block text-sm font-semibold text-gray-800 mb-3">
164
+ 🏷️ Type de Règle
165
+ </label>
166
+ <div class="space-y-2">
167
+ <label class="flex items-center space-x-2 cursor-pointer group">
168
+ <input type="checkbox" data-filter-type="standard" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-500 cursor-pointer" />
169
+ <span class="text-sm text-gray-700 group-hover:text-blue-600 transition-colors">Standard</span>
170
+ </label>
171
+ <label class="flex items-center space-x-2 cursor-pointer group">
172
+ <input type="checkbox" data-filter-type="routine" class="w-4 h-4 text-teal-600 rounded focus:ring-teal-500 cursor-pointer" />
173
+ <span class="text-sm text-gray-700 group-hover:text-teal-600 transition-colors">Routine</span>
174
+ </label>
175
+ <label class="flex items-center space-x-2 cursor-pointer group">
176
+ <input type="checkbox" data-filter-type="special" class="w-4 h-4 text-pink-600 rounded focus:ring-pink-500 cursor-pointer" />
177
+ <span class="text-sm text-gray-700 group-hover:text-pink-600 transition-colors">Special</span>
178
+ </label>
179
+ <label class="flex items-center space-x-2 cursor-pointer group">
180
+ <input type="checkbox" data-filter-type="combined" class="w-4 h-4 text-purple-600 rounded focus:ring-purple-500 cursor-pointer" />
181
+ <span class="text-sm text-gray-700 group-hover:text-purple-600 transition-colors">Combined</span>
182
+ </label>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- Info/Help -->
187
+ <div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-4 rounded-xl border border-blue-200">
188
+ <h4 class="text-sm font-semibold text-blue-900 mb-2 flex items-center">
189
+ <span class="mr-2">💡</span> Conseils
190
+ </h4>
191
+ <ul class="text-xs text-blue-800 space-y-1.5">
192
+ <li class="flex items-start">
193
+ <span class="mr-1.5">•</span>
194
+ <span>Combinez plusieurs filtres</span>
195
+ </li>
196
+ <li class="flex items-start">
197
+ <span class="mr-1.5">•</span>
198
+ <span>Recherche en temps réel</span>
199
+ </li>
200
+ <li class="flex items-start">
201
+ <span class="mr-1.5">•</span>
202
+ <span>Filtres persistés</span>
203
+ </li>
204
+ <li class="flex items-start">
205
+ <span class="mr-1.5">•</span>
206
+ <span>Cliquez sur l'en-tête pour replier</span>
207
+ </li>
208
+ </ul>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ `;
215
+ }