commit v_1 Tutoriel

.vs/RGC/v17/DocumentLayout.backup.json

@@ -50,6 +50,10 @@
             {
               "$type": "Bookmark",
               "Name": "ST:131:0:{1fc202d4-d401-403c-9834-5b218574bb67}"
+            },
+            {
+              "$type": "Bookmark",
+              "Name": "ST:0:0:{1c4feeaa-4718-4aa9-859d-94ce25d182ba}"
             }
           ]
         }

.vs/RGC/v17/DocumentLayout.json

@@ -1,7 +1,12 @@
 {
   "Version": 1,
   "WorkspaceRootPath": "C:\\Users\\oimer\\source\\repos\\RGC\\",
-  "Documents": [],
+  "Documents": [
+    {
+      "AbsoluteMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|C:\\Users\\oimer\\source\\repos\\RGC\\SuiviREForamteur\\suivireforamteur\\src\\HistoriquePage.tsx||{0F2454B1-A556-402D-A7D0-1FDE7F99DEE0}",
+      "RelativeMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|solutionrelative:SuiviREForamteur\\suivireforamteur\\src\\HistoriquePage.tsx||{0F2454B1-A556-402D-A7D0-1FDE7F99DEE0}"
+    }
+  ],
   "DocumentGroupContainers": [
     {
       "Orientation": 0,
@@ -9,7 +14,7 @@
       "DocumentGroups": [
         {
           "DockedWidth": 200,
-          "SelectedChildIndex": -1,
+          "SelectedChildIndex": 11,
           "Children": [
             {
               "$type": "Bookmark",
@@ -54,6 +59,19 @@
             {
               "$type": "Bookmark",
               "Name": "ST:0:0:{1c4feeaa-4718-4aa9-859d-94ce25d182ba}"
+            },
+            {
+              "$type": "Document",
+              "DocumentIndex": 0,
+              "Title": "HistoriquePage.tsx",
+              "DocumentMoniker": "C:\\Users\\oimer\\source\\repos\\RGC\\SuiviREForamteur\\suivireforamteur\\src\\HistoriquePage.tsx",
+              "RelativeDocumentMoniker": "SuiviREForamteur\\suivireforamteur\\src\\HistoriquePage.tsx",
+              "ToolTip": "C:\\Users\\oimer\\source\\repos\\RGC\\SuiviREForamteur\\suivireforamteur\\src\\HistoriquePage.tsx",
+              "RelativeToolTip": "SuiviREForamteur\\suivireforamteur\\src\\HistoriquePage.tsx",
+              "ViewState": "AgIAAEIFAAAAAAAAAAAEwFAFAAALAAAAAAAAAA==",
+              "Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.003213|",
+              "WhenOpened": "2026-02-13T08:45:05.704Z",
+              "EditorCaption": ""
             }
           ]
         }

.vs/VSWorkspaceState.json

@@ -2,7 +2,10 @@
   "ExpandedNodes": [
     "",
     "\\SuiviREForamteur",
-    "\\SuiviREForamteur\\suivireforamteur"
+    "\\SuiviREForamteur\\suivireforamteur",
+    "\\SuiviREForamteur\\suivireforamteur\\public",
+    "\\SuiviREForamteur\\suivireforamteur\\src"
   ],
+  "SelectedNode": "\\SuiviREForamteur\\suivireforamteur\\src\\HistoriquePage.tsx",
   "PreviewInSolutionExplorer": false
 }

SuiviREForamteur/suivireforamteur/src/HistoriquePage.tsx

@@ -941,6 +941,188 @@ body {
         min-width: 800px;
     }
 }
+/* ✨ Bouton Tutoriel */
+.tutorial-button {
+    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+    color: white;
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 12px;
+    cursor: pointer;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    transition: all 0.3s ease;
+    font-size: 0.85rem;
+    white-space: nowrap;
+    box-shadow: 0 2px 4px rgba(139, 92, 246, 0.3);
+}
+
+.tutorial-button:hover {
+    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 12px rgba(139, 92, 246, 0.4);
+}
+
+/* ✨ Modal Tutoriel */
+.tutorial-modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(8px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2000;
+    padding: 1rem;
+    animation: fadeIn 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+.tutorial-modal {
+    background: white;
+    border-radius: 24px;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
+    max-width: 700px;
+    width: 100%;
+    overflow: hidden;
+    animation: slideIn 0.4s ease-out;
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(30px) scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+.tutorial-modal-header {
+    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+    color: white;
+    padding: 2rem;
+    text-align: center;
+}
+
+.tutorial-modal-header h2 {
+    font-size: 1.8rem;
+    margin-bottom: 0.5rem;
+    font-weight: 700;
+}
+
+.tutorial-modal-header p {
+    font-size: 1rem;
+    opacity: 0.95;
+}
+
+.tutorial-modal-content {
+    padding: 2rem;
+    max-height: 60vh;
+    overflow-y: auto;
+}
+
+.tutorial-step-list {
+    list-style: none;
+    margin: 1rem 0;
+}
+
+.tutorial-step-list li {
+    padding: 1rem;
+    margin-bottom: 0.75rem;
+    background: #f8fafc;
+    border-radius: 12px;
+    border-left: 4px solid #8b5cf6;
+    display: flex;
+    align-items: start;
+    gap: 0.75rem;
+    transition: all 0.3s ease;
+}
+
+.tutorial-step-list li:hover {
+    background: #ede9fe;
+    transform: translateX(5px);
+}
+
+.tutorial-step-icon {
+    font-size: 1.5rem;
+    flex-shrink: 0;
+}
+
+.tutorial-step-content {
+    flex: 1;
+}
+
+.tutorial-step-title {
+    font-weight: 600;
+    color: #1e293b;
+    margin-bottom: 0.25rem;
+    font-size: 1rem;
+}
+
+.tutorial-step-desc {
+    color: #64748b;
+    font-size: 0.9rem;
+    line-height: 1.5;
+}
+
+.tutorial-highlight-box {
+    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
+    padding: 1rem;
+    border-radius: 12px;
+    border-left: 4px solid #22c55e;
+    margin: 1rem 0;
+}
+
+.tutorial-highlight-box strong {
+    color: #166534;
+    display: block;
+    margin-bottom: 0.5rem;
+    font-size: 1rem;
+}
+
+.tutorial-highlight-box p {
+    color: #14532d;
+    line-height: 1.6;
+    font-size: 0.9rem;
+}
+
+.tutorial-modal-footer {
+    padding: 1.5rem 2rem;
+    background: #f8fafc;
+    text-align: center;
+}
+
+.tutorial-close-button {
+    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
+    color: white;
+    border: none;
+    padding: 0.75rem 2rem;
+    border-radius: 12px;
+    font-weight: 700;
+    cursor: pointer;
+    font-size: 1rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 6px -1px rgba(34, 197, 94, 0.3);
+}
+
+.tutorial-close-button:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 10px 20px -5px rgba(34, 197, 94, 0.4);
+}
 `;
 
 // ═══════════════════════════════════════════════════════
@@ -1106,6 +1288,7 @@ const HistoriquePage: React.FC<HistoriquePageProps> = ({
     const [editCommentaireFormateur, setEditCommentaireFormateur] = useState<string>('');
     const [editDateEvalTuteur, setEditDateEvalTuteur] = useState<string>('');
     const [editCommentaireRRE, setEditCommentaireRRE] = useState<string>('');
+    const [showTutorial, setShowTutorial] = useState<boolean>(false);
 
     // ✅ Vérifier si l'utilisateur peut modifier (pas lecteur)
     const effectiveRole = impersonatedUser?.role || user.role;
@@ -1316,18 +1499,21 @@ const HistoriquePage: React.FC<HistoriquePageProps> = ({
     }, [records, filter, campusFilter, promoFilter, studentFilter]);
 
     const dynamicStatusCounts = useMemo(() => {
-        // OUI = les deux sont OUI
+        let oui = 0;
-        const oui = preFilteredRecords.filter(r =>
+        let partiel = 0;
-            r.autoEvaluation === 'OUI' && r.evaluationTuteur === 'OUI'
+        let non = 0;
-        ).length;
 
-        // PARTIEL = les deux sont PARTIEL
+        preFilteredRecords.forEach(r => {
-        const partiel = preFilteredRecords.filter(r =>
+            // Compter auto-évaluation
-            r.autoEvaluation === 'PARTIEL' && r.evaluationTuteur === 'PARTIEL'
+            if (r.autoEvaluation === 'OUI') oui++;
-        ).length;
+            else if (r.autoEvaluation === 'PARTIEL') partiel++;
+            else non++; // NON ou vide
 
-        // NON = tout le reste (combinaisons mixtes, NON, vide, etc.)
+            // Compter évaluation tuteur
-        const non = preFilteredRecords.length - oui - partiel;
+            if (r.evaluationTuteur === 'OUI') oui++;
+            else if (r.evaluationTuteur === 'PARTIEL') partiel++;
+            else non++; // NON ou vide
+        });
 
         return {
             tous: preFilteredRecords.length,
@@ -1342,19 +1528,16 @@ const HistoriquePage: React.FC<HistoriquePageProps> = ({
             if (statusFilter === 'tous') return true;
 
             if (statusFilter === 'OUI') {
-                return r.autoEvaluation === 'OUI' && r.evaluationTuteur === 'OUI';
+                return r.autoEvaluation === 'OUI' || r.evaluationTuteur === 'OUI';
             }
 
             if (statusFilter === 'PARTIEL') {
-                // PARTIEL = les deux sont PARTIEL
+                return r.autoEvaluation === 'PARTIEL' || r.evaluationTuteur === 'PARTIEL';
-                return r.autoEvaluation === 'PARTIEL' && r.evaluationTuteur === 'PARTIEL';
             }
 
             if (statusFilter === 'NON') {
-                // NON = tout ce qui n'est ni OUI/OUI ni PARTIEL/PARTIEL
+                return r.autoEvaluation === 'NON' || !r.autoEvaluation ||
-                const isOui = r.autoEvaluation === 'OUI' && r.evaluationTuteur === 'OUI';
+                    r.evaluationTuteur === 'NON' || !r.evaluationTuteur;
-                const isPartiel = r.autoEvaluation === 'PARTIEL' && r.evaluationTuteur === 'PARTIEL';
-                return !isOui && !isPartiel;
             }
 
             return true;
@@ -1800,6 +1983,10 @@ const HistoriquePage: React.FC<HistoriquePageProps> = ({
                 </div>
                 <div className="nav-right">
                     <span className="user-name">{displayName}</span>
+                    {/* ✨ Bouton Tutoriel */}
+                    <button onClick={() => setShowTutorial(true)} className="tutorial-button">
+                        <span>📚</span> Tutoriel
+                    </button>
                     <button onClick={onLogout} className="logout-button">
                         <span>🚪</span> Déconnexion
                     </button>
@@ -2525,6 +2712,96 @@ const HistoriquePage: React.FC<HistoriquePageProps> = ({
                 </div>,
                 document.body
             )}
+            {/* ✨ Modal Tutoriel */}
+            {showTutorial && createPortal(
+                <div className="tutorial-modal-overlay" onClick={() => setShowTutorial(false)}>
+                    <div className="tutorial-modal" onClick={(e) => e.stopPropagation()}>
+                        <div className="tutorial-modal-header">
+                            <h2>📜 Tutoriel - Page Historique</h2>
+                            <p>Guide rapide d'utilisation</p>
+                        </div>
+
+                        <div className="tutorial-modal-content">
+                            <h3 style={{ color: '#1e293b', fontSize: '1.3rem', marginBottom: '1rem' }}>
+                                🎯 Comment utiliser cette page ?
+                            </h3>
+
+                            <ul className="tutorial-step-list">
+                                <li>
+                                    <span className="tutorial-step-icon">🔍</span>
+                                    <div className="tutorial-step-content">
+                                        <div className="tutorial-step-title">Rechercher et filtrer</div>
+                                        <div className="tutorial-step-desc">
+                                            Utilisez la barre de recherche et les filtres (Campus, Promotion, Étudiant, Statut)
+                                            pour trouver rapidement les apprenants.
+                                        </div>
+                                    </div>
+                                </li>
+
+                                <li>
+                                    <span className="tutorial-step-icon">👁️</span>
+                                    <div className="tutorial-step-content">
+                                        <div className="tutorial-step-title">Voir l'historique complet</div>
+                                        <div className="tutorial-step-desc">
+                                            Cliquez sur l'icône 👁️ pour ouvrir la fenêtre de détail avec l'historique
+                                            complet des modifications et le formulaire de saisie.
+                                        </div>
+                                    </div>
+                                </li>
+
+                                <li>
+                                    <span className="tutorial-step-icon">✏️</span>
+                                    <div className="tutorial-step-content">
+                                        <div className="tutorial-step-title">Ajouter une nouvelle action</div>
+                                        <div className="tutorial-step-desc">
+                                            Dans la fenêtre de détail, remplissez le formulaire selon votre rôle
+                                            (Auto-éval, Éval tuteur, Date, Commentaires) puis cliquez sur "Ajouter l'action".
+                                        </div>
+                                    </div>
+                                </li>
+
+                                <li>
+                                    <span className="tutorial-step-icon">📄</span>
+                                    <div className="tutorial-step-content">
+                                        <div className="tutorial-step-title">Exporter en PDF</div>
+                                        <div className="tutorial-step-desc">
+                                            Cliquez sur l'icône 📄 pour générer et télécharger un PDF complet
+                                            avec toutes les données et l'historique de l'apprenant.
+                                        </div>
+                                    </div>
+                                </li>
+
+                                <li>
+                                    <span className="tutorial-step-icon">📊</span>
+                                    <div className="tutorial-step-content">
+                                        <div className="tutorial-step-title">Trier les données</div>
+                                        <div className="tutorial-step-desc">
+                                            Cliquez sur n'importe quel en-tête de colonne (Nom, Date, Statut...)
+                                            pour trier les résultats par ordre croissant ou décroissant.
+                                        </div>
+                                    </div>
+                                </li>
+                            </ul>
+
+                            <div className="tutorial-highlight-box">
+                                <strong>💡 Bon à savoir</strong>
+                                <p>
+                                    Toutes les modifications sont enregistrées.
+                                    L'historique est permanent et assure une traçabilité complète de chaque dossier.
+                                </p>
+                            </div>
+                        </div>
+
+                        <div className="tutorial-modal-footer">
+                            <button className="tutorial-close-button" onClick={() => setShowTutorial(false)}>
+                                <span>🚀</span>
+                                <span>J'ai compris, commencer !</span>
+                            </button>
+                        </div>
+                    </div>
+                </div>,
+                document.body
+            )}
         </div>
     );
 };