@silvestv/migration-planificator 3.0.0

package/dist/src/models/types/rule-category.type.js

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

package/dist/src/models/types/rule-priority.type.js

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

package/dist/src/models/types/rule-workload-type.type.js

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

package/dist/src/templates/landing/applications-analyzed.template.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderApplicationsAnalyzed = renderApplicationsAnalyzed;
+const card_app_info_template_1 = require("./card-app-info.template");
+function renderApplicationsAnalyzed(apps) {
+    if (apps.length === 0) {
+        return '';
+    }
+    const appsCards = apps.map(card_app_info_template_1.renderAppCard).join('');
+    return `
+    <section class="mb-8">
+        <h2 class="text-3xl font-bold text-gray-800 mb-6">🚀 Applications Analysées</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            ${appsCards}
+        </div>
+    </section>
+    `;
+}

package/dist/src/templates/landing/card-app-info.template.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderAppCard = renderAppCard;
+function renderAppCard(app) {
+    return `
+    <div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-indigo-500">
+        <h3 class="text-2xl font-bold text-gray-800 mb-2">${app.name}</h3>
+        ${app.description ? `<p class="text-gray-600 mb-4 italic">${app.description}</p>` : ''}
+
+        <div class="mb-4">
+            <h4 class="text-sm font-semibold text-gray-700 mb-2 uppercase">Dépendances</h4>
+            <div class="grid grid-cols-2 gap-3">
+                <div class="bg-blue-50 p-3 rounded-lg">
+                    <p class="text-xs text-blue-600 font-semibold uppercase">Dependencies</p>
+                    <p class="text-2xl font-bold text-blue-700">${app.dependencies}</p>
+                </div>
+                <div class="bg-indigo-50 p-3 rounded-lg">
+                    <p class="text-xs text-indigo-600 font-semibold uppercase">Dev Dependencies</p>
+                    <p class="text-2xl font-bold text-indigo-700">${app.devDependencies}</p>
+                </div>
+            </div>
+        </div>
+
+        <div>
+            <h4 class="text-sm font-semibold text-gray-700 mb-2 uppercase">Architecture Angular</h4>
+            <div class="grid grid-cols-3 gap-3">
+                <div class="bg-green-50 p-3 rounded-lg text-center">
+                    <p class="text-xs text-green-600 font-semibold uppercase">Components</p>
+                    <p class="text-xl font-bold text-green-700">${app.components}</p>
+                </div>
+                <div class="bg-purple-50 p-3 rounded-lg text-center">
+                    <p class="text-xs text-purple-600 font-semibold uppercase">Modules</p>
+                    <p class="text-xl font-bold text-purple-700">${app.modules}</p>
+                </div>
+                <div class="bg-blue-50 p-3 rounded-lg text-center">
+                    <p class="text-xs text-blue-600 font-semibold uppercase">Services</p>
+                    <p class="text-xl font-bold text-blue-700">${app.services}</p>
+                </div>
+                <div class="bg-yellow-50 p-3 rounded-lg text-center">
+                    <p class="text-xs text-yellow-600 font-semibold uppercase">Directives</p>
+                    <p class="text-xl font-bold text-yellow-700">${app.directives}</p>
+                </div>
+                <div class="bg-indigo-50 p-3 rounded-lg text-center">
+                    <p class="text-xs text-indigo-600 font-semibold uppercase">Pipes</p>
+                    <p class="text-xl font-bold text-indigo-700">${app.pipes}</p>
+                </div>
+                <div class="bg-pink-50 p-3 rounded-lg text-center">
+                    <p class="text-xs text-pink-600 font-semibold uppercase">Guards</p>
+                    <p class="text-xl font-bold text-pink-700">${app.guards}</p>
+                </div>
+                <div class="bg-teal-50 p-3 rounded-lg text-center">
+                    <p class="text-xs text-teal-600 font-semibold uppercase">Interceptors</p>
+                    <p class="text-xl font-bold text-teal-700">${app.interceptors}</p>
+                </div>
+                <div class="bg-orange-50 p-3 rounded-lg text-center">
+                    <p class="text-xs text-orange-600 font-semibold uppercase">Resolvers</p>
+                    <p class="text-xl font-bold text-orange-700">${app.resolvers}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    `;
+}

package/dist/src/templates/landing/card-lib-info.template.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderLibCard = renderLibCard;
+/**
+ * Template pour afficher une card de librairie Nx
+ * Même structure que card-app-info mais avec couleurs différentes (violet/indigo)
+ */
+function renderLibCard(lib) {
+    return `
+    <div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-purple-500">
+        <h3 class="text-2xl font-bold text-gray-800 mb-2">${lib.name}</h3>
+        ${lib.description ? `<p class="text-gray-600 mb-4 italic">${lib.description}</p>` : ''}
+
+        <div class="mb-4">
+            <h4 class="text-sm font-semibold text-gray-700 mb-2 uppercase">Dépendances</h4>
+            <div class="grid grid-cols-2 gap-3">
+                <div class="bg-purple-50 p-3 rounded-lg">
+                    <p class="text-xs text-purple-600 font-semibold uppercase">Dependencies</p>
+                    <p class="text-2xl font-bold text-purple-700">${lib.dependencies}</p>
+                </div>
+                <div class="bg-violet-50 p-3 rounded-lg">
+                    <p class="text-xs text-violet-600 font-semibold uppercase">Dev Dependencies</p>
+                    <p class="text-2xl font-bold text-violet-700">${lib.devDependencies}</p>
+                </div>
+            </div>
+        </div>
+
+        <div>
+            <h4 class="text-sm font-semibold text-gray-700 mb-2 uppercase">Architecture Angular</h4>
+            <div class="grid grid-cols-3 gap-3">
+                <div class="bg-green-50 p-3 rounded-lg text-center">
+                    <p class="text-xs text-green-600 font-semibold uppercase">Components</p>
+                    <p class="text-xl font-bold text-green-700">${lib.components}</p>
+                </div>
+                <div class="bg-purple-50 p-3 rounded-lg text-center">
+                    <p class="text-xs text-purple-600 font-semibold uppercase">Modules</p>
+                    <p class="text-xl font-bold text-purple-700">${lib.modules}</p>
+                </div>
+                <div class="bg-blue-50 p-3 rounded-lg text-center">
+                    <p class="text-xs text-blue-600 font-semibold uppercase">Services</p>
+                    <p class="text-xl font-bold text-blue-700">${lib.services}</p>
+                </div>
+                <div class="bg-yellow-50 p-3 rounded-lg text-center">
+                    <p class="text-xs text-yellow-600 font-semibold uppercase">Directives</p>
+                    <p class="text-xl font-bold text-yellow-700">${lib.directives}</p>
+                </div>
+                <div class="bg-indigo-50 p-3 rounded-lg text-center">
+                    <p class="text-xs text-indigo-600 font-semibold uppercase">Pipes</p>
+                    <p class="text-xl font-bold text-indigo-700">${lib.pipes}</p>
+                </div>
+                <div class="bg-pink-50 p-3 rounded-lg text-center">
+                    <p class="text-xs text-pink-600 font-semibold uppercase">Guards</p>
+                    <p class="text-xl font-bold text-pink-700">${lib.guards}</p>
+                </div>
+                <div class="bg-teal-50 p-3 rounded-lg text-center">
+                    <p class="text-xs text-teal-600 font-semibold uppercase">Interceptors</p>
+                    <p class="text-xl font-bold text-teal-700">${lib.interceptors}</p>
+                </div>
+                <div class="bg-orange-50 p-3 rounded-lg text-center">
+                    <p class="text-xs text-orange-600 font-semibold uppercase">Resolvers</p>
+                    <p class="text-xl font-bold text-orange-700">${lib.resolvers}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    `;
+}

package/dist/src/templates/landing/libs-analyzed.template.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderLibsAnalyzed = renderLibsAnalyzed;
+const card_lib_info_template_1 = require("./card-lib-info.template");
+/**
+ * Template pour afficher les librairies Nx analysées
+ * Utilisé UNIQUEMENT pour les projets Nx Monorepo
+ */
+function renderLibsAnalyzed(libs) {
+    if (libs.length === 0) {
+        return '';
+    }
+    const libsCards = libs.map(card_lib_info_template_1.renderLibCard).join('');
+    return `
+    <section class="mb-8">
+        <h2 class="text-3xl font-bold text-gray-800 mb-6">📚 Librairies Analysées</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            ${libsCards}
+        </div>
+    </section>
+    `;
+}

package/dist/src/templates/landing/nx-summary.template.js

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderNxSummary = renderNxSummary;
+/**
+ * Calcule les totaux pour un ensemble d'apps ou de libs
+ * Note: dependencies et devDependencies ne sont PAS additionnées car elles sont
+ * partagées au niveau global du monorepo Nx
+ */
+function calculateTotals(items) {
+    return items.reduce((totals, item) => ({
+        components: totals.components + item.components,
+        modules: totals.modules + item.modules,
+        services: totals.services + item.services,
+        directives: totals.directives + item.directives,
+        pipes: totals.pipes + item.pipes,
+        guards: totals.guards + item.guards,
+        interceptors: totals.interceptors + item.interceptors,
+        resolvers: totals.resolvers + item.resolvers
+    }), {
+        components: 0,
+        modules: 0,
+        services: 0,
+        directives: 0,
+        pipes: 0,
+        guards: 0,
+        interceptors: 0,
+        resolvers: 0
+    });
+}
+/**
+ * Génère une card de résumé
+ */
+function renderSummaryCard(title, emoji, count, totals, borderColor, accentColor) {
+    return `
+    <div class="bg-white rounded-xl shadow-lg p-6 border-l-4 ${borderColor}">
+        <div class="flex items-center justify-between mb-4">
+            <h3 class="text-2xl font-bold text-gray-800">${emoji} ${title}</h3>
+            <span class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm font-semibold">
+                ${count} ${count > 1 ? 'éléments' : 'élément'}
+            </span>
+        </div>
+
+        <div>
+            <h4 class="text-sm font-semibold text-gray-700 mb-3 uppercase">Architecture Angular Totale</h4>
+            <div class="grid grid-cols-4 gap-3">
+                <div class="bg-green-50 p-3 rounded-lg text-center">
+                    <p class="text-xs text-green-600 font-semibold uppercase">Comp.</p>
+                    <p class="text-2xl font-bold text-green-700">${totals.components}</p>
+                </div>
+                <div class="bg-purple-50 p-3 rounded-lg text-center">
+                    <p class="text-xs text-purple-600 font-semibold uppercase">Mod.</p>
+                    <p class="text-2xl font-bold text-purple-700">${totals.modules}</p>
+                </div>
+                <div class="bg-blue-50 p-3 rounded-lg text-center">
+                    <p class="text-xs text-blue-600 font-semibold uppercase">Serv.</p>
+                    <p class="text-2xl font-bold text-blue-700">${totals.services}</p>
+                </div>
+                <div class="bg-yellow-50 p-3 rounded-lg text-center">
+                    <p class="text-xs text-yellow-600 font-semibold uppercase">Dir.</p>
+                    <p class="text-2xl font-bold text-yellow-700">${totals.directives}</p>
+                </div>
+                <div class="bg-indigo-50 p-3 rounded-lg text-center">
+                    <p class="text-xs text-indigo-600 font-semibold uppercase">Pipes</p>
+                    <p class="text-2xl font-bold text-indigo-700">${totals.pipes}</p>
+                </div>
+                <div class="bg-pink-50 p-3 rounded-lg text-center">
+                    <p class="text-xs text-pink-600 font-semibold uppercase">Guard.</p>
+                    <p class="text-2xl font-bold text-pink-700">${totals.guards}</p>
+                </div>
+                <div class="bg-teal-50 p-3 rounded-lg text-center">
+                    <p class="text-xs text-teal-600 font-semibold uppercase">Int.</p>
+                    <p class="text-2xl font-bold text-teal-700">${totals.interceptors}</p>
+                </div>
+                <div class="bg-orange-50 p-3 rounded-lg text-center">
+                    <p class="text-xs text-orange-600 font-semibold uppercase">Res.</p>
+                    <p class="text-2xl font-bold text-orange-700">${totals.resolvers}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    `;
+}
+/**
+ * Template pour afficher le résumé Nx (3 cards : Apps, Libs, Global)
+ * Utilisé UNIQUEMENT pour les projets Nx Monorepo
+ */
+function renderNxSummary(apps, libs) {
+    // Si pas de données, ne rien afficher
+    if (apps.length === 0 && libs.length === 0) {
+        return '';
+    }
+    const appsTotals = calculateTotals(apps);
+    const libsTotals = calculateTotals(libs);
+    // Totaux globaux = apps + libs (architecture Angular uniquement)
+    const globalTotals = {
+        components: appsTotals.components + libsTotals.components,
+        modules: appsTotals.modules + libsTotals.modules,
+        services: appsTotals.services + libsTotals.services,
+        directives: appsTotals.directives + libsTotals.directives,
+        pipes: appsTotals.pipes + libsTotals.pipes,
+        guards: appsTotals.guards + libsTotals.guards,
+        interceptors: appsTotals.interceptors + libsTotals.interceptors,
+        resolvers: appsTotals.resolvers + libsTotals.resolvers
+    };
+    return `
+    <section class="mb-8">
+        <h2 class="text-3xl font-bold text-gray-800 mb-6">📈 Vue d'Ensemble Nx Monorepo</h2>
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            ${apps.length > 0 ? renderSummaryCard('Totaux Applications', '🚀', apps.length, appsTotals, 'border-blue-500', 'blue') : ''}
+            ${libs.length > 0 ? renderSummaryCard('Totaux Librairies', '📚', libs.length, libsTotals, 'border-purple-500', 'purple') : ''}
+            ${renderSummaryCard('Totaux Global', '🎯', apps.length + libs.length, globalTotals, 'border-green-500', 'green')}
+        </div>
+    </section>
+    `;
+}

package/dist/src/templates/landing/project-overview.template.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderProjectOverview = renderProjectOverview;
+function renderProjectOverview(data) {
+    return `
+    <header class="bg-white rounded-2xl shadow-2xl p-8 mb-8">
+        <h1 class="text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600 mb-4">
+            Rapport de Migration Angular
+        </h1>
+        <p class="text-gray-600 text-lg mb-4">
+            Analyse et planification de charge pour migrations Angular 17→18, 18→19, 19→20
+        </p>
+        <div class="bg-gray-50 rounded-lg p-4 mb-6">
+            <h3 class="text-lg font-semibold text-gray-700 mb-2">Projet analysé</h3>
+            <p class="text-gray-600"><strong>Nom:</strong> ${data.name}</p>
+            <p class="text-gray-600"><strong>Type:</strong> ${data.type}</p>
+            ${data.angularVersion ? `<p class="text-gray-600"><strong>Version Angular:</strong> ${data.angularVersion}</p>` : ''}
+            ${data.appsCount > 0 ? `<p class="text-gray-600"><strong>Applications:</strong> ${data.appsCount}</p>` : ''}
+        </div>
+        <div class="flex gap-4">
+            <span class="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg font-medium">Angular 17→18</span>
+            <span class="px-4 py-2 bg-indigo-100 text-indigo-700 rounded-lg font-medium">Angular 18→19</span>
+            <span class="px-4 py-2 bg-purple-100 text-purple-700 rounded-lg font-medium">Angular 19→20</span>
+        </div>
+    </header>
+    `;
+}

package/dist/src/templates/page/index-page.template.js

@@ -0,0 +1,95 @@
+"use strict";
+/**
+ * Template : Landing Page (index.html)
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderIndexPage = renderIndexPage;
+const core_1 = require("../../utils/core");
+function renderIndexPage(projectInfo, cssContent, timestamp, version) {
+    const dateStr = timestamp.split('T')[0];
+    return `
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Migration Planner - ${projectInfo.name}</title>
+    <style>${cssContent}</style>
+</head>
+<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen p-8">
+    <div class="max-w-4xl mx-auto">
+        <!-- Header -->
+        <div class="text-center mb-12">
+            <h1 class="text-5xl font-bold text-gray-800 mb-4">🚀 Migration Planner</h1>
+            <p class="text-xl text-gray-600">${projectInfo.name}</p>
+            <p class="text-sm text-gray-500 mt-2">Généré le ${(0, core_1.formatDate)(timestamp)}</p>
+        </div>
+
+        <!-- Cards -->
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+            <!-- Workload Planner (Dashboard Global) -->
+            <a href="workload-planner.html" class="block bg-white rounded-2xl shadow-xl p-8 hover:shadow-2xl transition-shadow">
+                <div class="text-6xl mb-4">📊</div>
+                <h2 class="text-2xl font-bold text-gray-800 mb-3">Dashboard Global</h2>
+                <p class="text-gray-600 mb-4">
+                    Dashboard interactif complet : charge de travail détaillée, configuration multi-devs,
+                    temps éditables, charts et hiérarchie pliable.
+                </p>
+                <div class="flex items-center text-blue-600 font-semibold">
+                    Accéder au dashboard
+                    <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+                    </svg>
+                </div>
+            </a>
+
+            <!-- Migration Guide -->
+            <a href="migration-guide.html" class="block bg-white rounded-2xl shadow-xl p-8 hover:shadow-2xl transition-shadow">
+                <div class="text-6xl mb-4">📖</div>
+                <h2 class="text-2xl font-bold text-gray-800 mb-3">Migration Guide</h2>
+                <p class="text-gray-600 mb-4">
+                    Guide méthodologique étape par étape : checklists interactives, bonnes pratiques,
+                    commandes de migration, fichiers concernés.
+                </p>
+                <div class="flex items-center text-blue-600 font-semibold">
+                    Accéder au guide
+                    <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+                    </svg>
+                </div>
+            </a>
+        </div>
+
+        <!-- Info Section -->
+        <div class="mt-12 bg-white rounded-2xl shadow-xl p-8">
+            <h3 class="text-xl font-bold text-gray-800 mb-4">📦 Informations Projet</h3>
+            <dl class="grid grid-cols-2 gap-4">
+                <div>
+                    <dt class="text-sm font-medium text-gray-500">Type</dt>
+                    <dd class="text-lg font-semibold text-gray-800">${projectInfo.type}</dd>
+                </div>
+                <div>
+                    <dt class="text-sm font-medium text-gray-500">Version Angular</dt>
+                    <dd class="text-lg font-semibold text-gray-800">${projectInfo.angularVersion || 'N/A'}</dd>
+                </div>
+                <div>
+                    <dt class="text-sm font-medium text-gray-500">Applications</dt>
+                    <dd class="text-lg font-semibold text-gray-800">${projectInfo.apps.length}</dd>
+                </div>
+                <div>
+                    <dt class="text-sm font-medium text-gray-500">Chemin</dt>
+                    <dd class="text-sm text-gray-600 truncate">${projectInfo.path}</dd>
+                </div>
+            </dl>
+        </div>
+
+        <!-- Footer -->
+        <footer class="mt-8 text-center text-gray-600 text-sm">
+            <p class="mb-1">Angular Migration Planner v${version || '1.0.0'}</p>
+            <p class="text-gray-500">Généré le ${(0, core_1.formatDate)(timestamp)}</p>
+        </footer>
+    </div>
+</body>
+</html>
+    `.trim();
+}

package/dist/src/templates/page/main.template.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderMainPage = renderMainPage;
+const project_overview_template_1 = require("../landing/project-overview.template");
+const nx_summary_template_1 = require("../landing/nx-summary.template");
+const applications_analyzed_template_1 = require("../landing/applications-analyzed.template");
+const libs_analyzed_template_1 = require("../landing/libs-analyzed.template");
+const core_1 = require("../../utils/core");
+function renderMainPage(projectInfo, cssContent, workloadReport, uniqueRules, uniqueFiles, workloadReportPath, version) {
+    const projectOverview = (0, project_overview_template_1.renderProjectOverview)({
+        name: projectInfo.name,
+        type: projectInfo.type,
+        angularVersion: projectInfo.angularVersion,
+        appsCount: projectInfo.apps.length
+    });
+    // Séparation Apps / Libs pour Nx Monorepo
+    const isNxMonorepo = projectInfo.type === 'nx-monorepo';
+    const nxSummarySection = isNxMonorepo ? (0, nx_summary_template_1.renderNxSummary)(projectInfo.apps, projectInfo.libs) : '';
+    const applicationsSection = (0, applications_analyzed_template_1.renderApplicationsAnalyzed)(projectInfo.apps);
+    const librariesSection = isNxMonorepo ? (0, libs_analyzed_template_1.renderLibsAnalyzed)(projectInfo.libs) : '';
+    return `
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Rapport de Migration Angular - ${projectInfo.name}</title>
+    <style>${cssContent}</style>
+</head>
+<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen p-8">
+    <div class="max-w-7xl mx-auto">
+        ${projectOverview}
+
+        ${nxSummarySection}
+
+        ${applicationsSection}
+
+        ${librariesSection}
+
+        <main class="bg-white rounded-2xl shadow-2xl p-8">
+            <h2 class="text-3xl font-bold text-gray-800 mb-6">Vue d'ensemble</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+                <div class="bg-gradient-to-br from-blue-50 to-blue-100 p-6 rounded-xl">
+                    <h3 class="text-xl font-semibold text-blue-900 mb-2">Règles détectées</h3>
+                    <p class="text-4xl font-bold text-blue-600">${uniqueRules || 0}</p>
+                </div>
+                <div class="bg-gradient-to-br from-indigo-50 to-indigo-100 p-6 rounded-xl">
+                    <h3 class="text-xl font-semibold text-indigo-900 mb-2">Fichiers impactés</h3>
+                    <p class="text-4xl font-bold text-indigo-600">${uniqueFiles || 0}</p>
+                </div>
+                <div class="bg-gradient-to-br from-purple-50 to-purple-100 p-6 rounded-xl">
+                    <h3 class="text-xl font-semibold text-purple-900 mb-2">Temps estimé</h3>
+                    <p class="text-4xl font-bold text-purple-600">${workloadReport ? (0, core_1.formatTime)(workloadReport.totalTime.minutes, workloadReport.totalTime.hours, workloadReport.totalTime.days) : '0h'}</p>
+                </div>
+            </div>
+            ${workloadReportPath ? `
+            <div class="flex justify-center">
+                <a href="${workloadReportPath}" class="inline-flex items-center px-8 py-4 bg-blue-600 text-white text-lg font-semibold rounded-xl hover:bg-blue-700 transition-colors shadow-lg hover:shadow-xl">
+                    <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+                    </svg>
+                    Accéder à la planification de migration
+                </a>
+            </div>
+            ` : `
+            <div class="mt-8 p-4 bg-yellow-50 border-l-4 border-yellow-400 rounded">
+                <p class="text-yellow-800">
+                    <strong>Note:</strong> Rapport de synthèse. Utilisez le rapport de planification complet pour plus de détails.
+                </p>
+            </div>
+            `}
+        </main>
+
+        <!-- Footer avec version -->
+        <footer class="mt-12 text-center text-gray-600 text-sm">
+            <p class="mb-1">Angular Migration Planner v${version || '1.0.0'}</p>
+            <p class="text-gray-500">Généré le ${new Date().toLocaleDateString('fr-FR', { year: 'numeric', month: 'long', day: 'numeric' })}</p>
+        </footer>
+    </div>
+</body>
+</html>
+    `;
+}