feat(audit): separate quick and advanced diagnosis (#48)

* feat(audit): separate quick diagnosis from advanced diagnosis (#46)

Add generic preliminary assessment support to the evaluation system.
EROOM quick diagnosis now has its own score card, intro modal, and
result modal with recommendation. Scoring formula aligned with the
official EROOM Excel template.

* fix(audit): hide advanced summary when only quick diagnosis answered

Advanced score, context and radar chart now stay hidden until at least
one category 1-6 question has an answer. Prevents step 0 alone from
displaying a misleading score of 0 ("Mature") and an empty radar.

Addresses remaining acceptance criteria of #46: "no detailed summary
for step 0 alone" and "synthesis progressively available during
advanced diagnosis".

Author: emmanuelperu

plans/eroom-evolution.md

@@ -0,0 +1,89 @@
+# Plan : Issue #46 — Séparer diagnostic rapide et diagnostic avancé
+
+## Contexte
+
+L'audit EROOM a 2 niveaux : catégorie 0 (Quick Diagnosis, 1-5) et catégories 1-6 (Advanced Diagnosis, qualitatif). Actuellement, seul le score avancé est stocké et affiché. `calculateQuickDiagnosisScore()` existe déjà mais n'est jamais appelé dans le flux de sauvegarde.
+
+**Objectif** : afficher les deux scores séparément sur la page projet, avec un message de recommandation pour le diagnostic rapide. L'approche doit être **générique** pour supporter d'autres types d'évaluation avec étape préliminaire à l'avenir.
+
+## Architecture : étape préliminaire générique
+
+### Configuration dans `EVALUATION_TYPES` (`src/types/evaluation.ts`)
+
+Chaque type d'évaluation peut déclarer une étape préliminaire via sa config :
+
+```typescript
+preliminary?: {
+    label: string;                // "Quick Diagnosis" pour EROOM
+    blocking: boolean;            // true = score minimal requis pour continuer
+    minScore?: number;            // seuil minimal (utilisé si blocking: true)
+    thresholds: { low: number; high: number };
+    recommendations: {
+        low: string;              // score ≤ low
+        medium: string;           // low < score ≤ high
+        high: string;             // score > high
+    };
+}
+```
+
+`blocking: false` → l'utilisateur peut toujours passer aux étapes avancées. Si un futur type d'évaluation a `blocking: true` avec `minScore: 40`, l'UI empêchera de continuer si le score préliminaire est en dessous.
+
+## Ce qui a été fait
+
+### 1. `src/types/evaluation.ts` — Types et config ✅
+
+- Interface `PreliminaryConfig` avec `label`, `blocking`, `minScore?`, `thresholds`, `recommendations`
+- `preliminary?: PreliminaryConfig` dans `EvaluationTypeInfo`
+- `preliminaryScore?: number | null` dans `Evaluation`
+- Config EROOM : `blocking: false`, seuils 25/50
+
+### 2. `src/services/evaluation-service.ts` — Score préliminaire ✅
+
+- `computePreliminaryScore()` : trouve la catégorie 0 et calcule le score
+- `saveEroomPreliminaryScore()` : sauvegarde explicite du score préliminaire (appelée uniquement depuis "Quick Evaluate", pas depuis l'auto-save)
+- `finalizeEroomEvaluation()` : sauvegarde aussi le `preliminaryScore`
+
+### 3. `src/services/project-view-service.ts` — Données d'affichage ✅
+
+- Interface `PreliminaryDisplayData` avec score, details, label, recommendation, blocking, blocked
+- `buildPreliminaryDisplayData()` : lit la config du type d'évaluation (générique)
+- `getPreliminaryRecommendation()` : génère la recommandation selon les seuils
+- `getEvaluationDisplayData()` retourne `preliminary: PreliminaryDisplayData | null`
+- `scoreTitle` adapté : "Advanced Diagnosis Score" quand une étape préliminaire existe
+
+### 4. `src/pages/projects/view.astro` — Affichage dual ✅
+
+- Carte Quick Diagnosis au-dessus de la carte Advanced (cercle w-24, `role="region"`, `aria-labelledby`)
+- Carte masquée par défaut, visible si `preliminaryScore !== null`
+- Titre du radar chart adapté dynamiquement
+
+### 5. `src/pages/audit-eroom.astro` — UX du flux d'audit ✅
+
+- **Modale d'intro** au chargement : explique l'échelle 1-5, bouton "Start Quick Diagnosis"
+- **Bouton "Quick Evaluate"** au lieu de "Next" au step 0
+- **Modale de résultat** : score en cercle coloré, recommandation, choix "Back to Project" / "Continue Advanced Diagnosis"
+- Modale ne réapparaît plus si `preliminaryScore` déjà sauvegardé (démarre au step 1)
+
+### 6. `src/utils/eroom-scoring.ts` — Formule corrigée ✅
+
+- Formule alignée avec l'Excel EROOM officiel : `sum(5 - answer) / (totalQuestions × 4) × 100`
+- Correspond à `(1 - (answer-1)/4) × weight` de l'Excel (tous poids à 1.0)
+- Unanswered = 0 potentiel (comme l'Excel)
+
+### 7. Tests mis à jour ✅
+
+- Tests de `calculateQuickDiagnosisScore` adaptés à la nouvelle formule
+- 2 tests ajoutés : score max (tout à 1 → 100%) et score min (tout à 5 → 0%)
+- 167 tests passent
+
+## Ce qui ne change PAS
+
+- `src/components/RadarChart.astro` — Reçoit ses données, pas concerné
+- Dashboard (`index.astro`) — Le score préliminaire n'est pas affiché sur les cartes
+- API Green Score — Pas de `preliminary` dans sa config, rien ne change
+
+## Ce qui reste à faire
+
+- [ ] Tests manuels approfondis (différents scénarios de scoring)
+- [ ] Vérifier le rendu responsive des modales et de la carte Quick Diagnosis
+- [ ] Vérifier le comportement avec des évaluations existantes en localStorage (rétrocompatibilité)

plans/issue-46-separate-diagnostics.md

@@ -66,18 +66,66 @@ const auditSteps: AuditStep[] = categories.map((category) => ({
             <AuditNavigation/>
         </form>
     </div>
+
+    <!-- Quick Diagnosis: Intro Modal -->
+    <div id="introModal"
+         class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
+         role="dialog" aria-modal="true" aria-labelledby="introModalTitle">
+        <div class="glass-card max-w-lg w-full mx-4 p-6" role="document">
+            <h2 id="introModalTitle" class="text-xl font-bold mb-3">Quick Diagnosis</h2>
+            <p class="text-muted mb-2">
+                Before diving into the detailed evaluation, start with the <strong>quick diagnosis</strong>.
+            </p>
+            <p class="text-muted mb-2">
+                Rate each question from 1 to 5 based on available information:
+            </p>
+            <ul class="text-sm text-muted mb-4 list-disc pl-5 space-y-1">
+                <li><strong>1</strong> = not mastered / unknown</li>
+                <li><strong>5</strong> = mastered, measured, optimized</li>
+            </ul>
+            <p class="text-sm text-muted mb-6">
+                If the quick score is very low, a detailed evaluation may not be necessary.
+            </p>
+            <div class="flex justify-end">
+                <button class="btn btn-primary" id="introModalClose">Start Quick Diagnosis</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Quick Diagnosis: Result Modal -->
+    <div id="quickResultModal"
+         class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50 backdrop-blur-sm"
+         role="dialog" aria-modal="true" aria-labelledby="quickResultTitle">
+        <div class="glass-card max-w-md w-full mx-4 p-6 text-center" role="document">
+            <h2 id="quickResultTitle" class="text-xl font-bold mb-4">Quick Diagnosis Result</h2>
+            <div class="flex justify-center mb-4">
+                <div class="w-24 h-24 rounded-full border-6 flex items-center justify-center bg-white/5"
+                     id="quickResultCircle">
+                    <span class="text-4xl font-extrabold" id="quickResultScore">--</span>
+                </div>
+            </div>
+            <p class="text-sm text-muted mb-1" id="quickResultLabel">Level</p>
+            <p class="text-sm text-muted mt-3 leading-relaxed" id="quickResultRecommendation"></p>
+            <div class="flex justify-center gap-3 mt-6">
+                <a id="quickResultBackLink" href="/" class="btn btn-secondary">Back to Project</a>
+                <button class="btn btn-primary" id="quickResultContinue">Continue Advanced Diagnosis</button>
+            </div>
+        </div>
+    </div>
 </Layout>
 
 <script>
-    import {EvaluationType} from "../types/evaluation";
-    import {saveEroomProgressiveScore, finalizeEroomEvaluation} from "../services/evaluation-service";
+    import {EvaluationType, EVALUATION_TYPES} from "../types/evaluation";
+    import {saveEroomProgressiveScore, saveEroomPreliminaryScore, finalizeEroomEvaluation, getScoreDetailsByType} from "../services/evaluation-service";
     import {getProject} from "../services/project-service";
-    import {validateEroomCompletion} from "../utils/eroom-scoring";
+    import {validateEroomCompletion, calculateQuickDiagnosisScore} from "../utils/eroom-scoring";
     import type {EroomCategory, EroomAnswerValue} from "../types/eroom";
     import eroomData from "../data/eroom-data-model-1-1.json";
     import {showToast} from "../utils/toast";
 
     const categories = eroomData.categories as EroomCategory[];
+    const preliminaryConfig = EVALUATION_TYPES[EvaluationType.EROOM].preliminary!;
+    const preliminaryCategory = categories.find(c => !c.includeInScore)!;
     const progressCounter = document.getElementById("progressCounter");
 
     let currentStep = 0;
@@ -143,15 +191,108 @@ const auditSteps: AuditStep[] = categories.map((category) => ({
             if (nextBtn) nextBtn.style.display = "none";
             if (submitBtn) submitBtn.style.display = "block";
         } else {
-            if (nextBtn) nextBtn.style.display = "block";
+            if (nextBtn) {
+                nextBtn.style.display = "block";
+                // Step 0 = quick diagnosis → special label
+                nextBtn.textContent = currentStep === 0 ? 'Quick Evaluate' : 'Next';
+            }
             if (submitBtn) submitBtn.style.display = "none";
         }
 
         // Scroll to top
         window.scrollTo({top: 0, behavior: "smooth"});
     }
 
+    // ========================================================================
+    // QUICK DIAGNOSIS MODALS
+    // ========================================================================
+
+    const introModal = document.getElementById("introModal");
+    const introModalClose = document.getElementById("introModalClose");
+    const quickResultModal = document.getElementById("quickResultModal");
+    const quickResultContinue = document.getElementById("quickResultContinue");
+    const quickResultBackLink = document.getElementById("quickResultBackLink") as HTMLAnchorElement | null;
+
+    // Set back link to project view
+    const urlParamsClient = new URLSearchParams(window.location.search);
+    const projectIdParam = urlParamsClient.get("projectId");
+    if (quickResultBackLink && projectIdParam) {
+        quickResultBackLink.href = `/projects/view?id=${projectIdParam}&evaluationType=eroom`;
+    }
+
+    /**
+     * Show the quick diagnosis result modal with score and recommendation
+     */
+    function showQuickResultModal() {
+        const answers = collectAnswers();
+        const { score } = calculateQuickDiagnosisScore(answers, preliminaryCategory.questions);
+        const details = getScoreDetailsByType(score, EvaluationType.EROOM);
+
+        // Determine recommendation from config thresholds
+        let recommendation: string;
+        if (score <= preliminaryConfig.thresholds.low) {
+            recommendation = preliminaryConfig.recommendations.low;
+        } else if (score <= preliminaryConfig.thresholds.high) {
+            recommendation = preliminaryConfig.recommendations.medium;
+        } else {
+            recommendation = preliminaryConfig.recommendations.high;
+        }
+
+        // Update modal content
+        const scoreEl = document.getElementById("quickResultScore");
+        const circleEl = document.getElementById("quickResultCircle");
+        const labelEl = document.getElementById("quickResultLabel");
+        const recoEl = document.getElementById("quickResultRecommendation");
+
+        if (scoreEl) scoreEl.textContent = score.toString();
+        if (labelEl) labelEl.textContent = details.text;
+        if (circleEl) {
+            circleEl.style.borderColor = details.color;
+            circleEl.style.boxShadow = `0 0 16px ${details.shadow}`;
+            circleEl.style.backgroundColor = details.shadow;
+        }
+        if (recoEl) recoEl.textContent = recommendation;
+
+        // Show modal
+        if (quickResultModal) {
+            quickResultModal.classList.remove("hidden");
+            quickResultModal.classList.add("flex");
+            quickResultContinue?.focus();
+        }
+    }
+
+    // Intro modal: close and focus on first question
+    introModalClose?.addEventListener("click", () => {
+        if (introModal) {
+            introModal.classList.add("hidden");
+            introModal.classList.remove("flex");
+        }
+        // Focus the first interactive element in the audit form
+        const firstInput = document.querySelector('.step-content[data-step="0"] input') as HTMLElement | null;
+        firstInput?.focus();
+    });
+
+    // Quick result modal: continue to advanced diagnosis
+    quickResultContinue?.addEventListener("click", () => {
+        if (quickResultModal) {
+            quickResultModal.classList.add("hidden");
+            quickResultModal.classList.remove("flex");
+        }
+        currentStep = 1;
+        updateUI();
+    });
+
+    // Next button: intercept at step 0 to show quick result modal
     nextBtn?.addEventListener("click", () => {
+        if (currentStep === 0) {
+            // Save answers + preliminary score, then show result
+            saveAnswers();
+            if (projectId) {
+                saveEroomPreliminaryScore(projectId, collectAnswers(), categories);
+            }
+            showQuickResultModal();
+            return;
+        }
         if (currentStep < totalSteps - 1) {
             currentStep++;
             updateUI();
@@ -301,6 +442,24 @@ const auditSteps: AuditStep[] = categories.map((category) => ({
     // Load answers on init
     loadAnswers();
 
+    // Check if quick diagnosis was already completed
+    const hasPreliminaryScore = (() => {
+        if (!projectId) return false;
+        const project = getProject(projectId);
+        const evaluation = project?.evaluations[evaluationType];
+        return evaluation?.preliminaryScore !== undefined && evaluation?.preliminaryScore !== null;
+    })();
+
+    if (hasPreliminaryScore) {
+        // Skip intro modal and start at step 1 (advanced diagnosis)
+        if (introModal) {
+            introModal.classList.add("hidden");
+            introModal.classList.remove("flex");
+        }
+        currentStep = 1;
+        updateUI();
+    }
+
     // Initialize progress counter
     updateProgress(collectAnswers());
 

src/pages/audit-eroom.astro

@@ -77,8 +77,24 @@ const evaluationTypes = getAvailableEvaluationTypes()
                 </div>
             </div>
 
-            <div class="md:col-span-1">
-                <div class="glass-card text-center">
+            <div class="md:col-span-1 space-y-6">
+                <!-- Preliminary Assessment Card (hidden by default) -->
+                <div class="glass-card text-center hidden" id="preliminaryCard" role="region" aria-labelledby="preliminaryTitle">
+                    <h3 class="text-base font-medium text-muted mb-4" id="preliminaryTitle">Quick Diagnosis</h3>
+                    <div class="flex justify-center mb-3">
+                        <div
+                            class="w-24 h-24 rounded-full border-6 flex items-center justify-center bg-white/5 shadow-[0_0_16px_rgba(0,0,0,0.1)]"
+                            id="preliminaryCircle"
+                        >
+                            <span class="text-4xl font-extrabold" id="preliminaryScore">--</span>
+                        </div>
+                    </div>
+                    <p class="text-sm text-muted" id="preliminaryLabel">Level</p>
+                    <p class="text-xs text-muted mt-3 leading-relaxed" id="preliminaryRecommendation"></p>
+                </div>
+
+                <!-- Advanced / Main Score Card -->
+                <div class="glass-card text-center" id="advancedCard" role="region" aria-labelledby="scoreTitle">
                     <h3 class="text-base font-medium text-muted mb-4" id="scoreTitle">Current Score</h3>
                     <div class="flex justify-center mb-4">
                         <div
@@ -161,6 +177,15 @@ const evaluationTypes = getAvailableEvaluationTypes()
         const scoreCircleEl = document.getElementById('scoreCircle')
         const scoreContextEl = document.getElementById('scoreContext')
         const chartCard = document.getElementById('chartCard')
+        const chartTitleEl = chartCard?.querySelector('h2')
+
+        // Preliminary card elements
+        const preliminaryCard = document.getElementById('preliminaryCard')
+        const preliminaryTitleEl = document.getElementById('preliminaryTitle')
+        const preliminaryScoreEl = document.getElementById('preliminaryScore')
+        const preliminaryCircleEl = document.getElementById('preliminaryCircle')
+        const preliminaryLabelEl = document.getElementById('preliminaryLabel')
+        const preliminaryRecommendationEl = document.getElementById('preliminaryRecommendation')
         const deleteBtn = document.getElementById('deleteBtn')
         const deleteModal = document.getElementById('deleteModal')
         const deleteProjectNameEl = document.getElementById('deleteProjectName')
@@ -249,6 +274,32 @@ const evaluationTypes = getAvailableEvaluationTypes()
                     }
                 }
 
+            // Preliminary Assessment Card
+            if (preliminaryCard) {
+                if (displayData.preliminary) {
+                    const { score: pScore, details, label, recommendation } = displayData.preliminary
+                    preliminaryCard.classList.remove('hidden')
+                    if (preliminaryTitleEl) preliminaryTitleEl.textContent = label
+                    if (preliminaryScoreEl) preliminaryScoreEl.textContent = pScore.toString()
+                    if (preliminaryLabelEl) preliminaryLabelEl.textContent = details.text
+                    if (preliminaryCircleEl) {
+                        preliminaryCircleEl.style.borderColor = details.color
+                        preliminaryCircleEl.style.boxShadow = `0 0 16px ${details.shadow}`
+                        preliminaryCircleEl.style.backgroundColor = details.shadow
+                    }
+                    if (preliminaryRecommendationEl) preliminaryRecommendationEl.textContent = recommendation
+                } else {
+                    preliminaryCard.classList.add('hidden')
+                }
+            }
+
+            // Chart title adapts when a preliminary step exists
+            if (chartTitleEl) {
+                chartTitleEl.textContent = displayData.preliminary
+                    ? 'Advanced Diagnosis - Score by Section'
+                    : 'Score by Section'
+            }
+
             // Radar Chart
             if (chartCard) {
                 if (displayData.chartData.length > 0) {