modification du dashboard eleve avec stats

eleve/dashboard.php

@@ -1,7 +1,7 @@
 <?php
 /**
- * Dashboard élève (classe fixe + libre)
+ * Dashboard élève - VERSION AMÉLIORÉE
- * Fichier : eleve/dashboard.php
+ * Avec historique des 4 dernières évaluations et graphique de progression
  */
 
 require_once __DIR__ . '/../config/config.php';
@@ -27,9 +27,8 @@ $db = Database::getInstance();
 $isEleveLibre = ($user['id_type'] == 3);
 $isEleveClasse = ($user['id_type'] == 2);
 
-// Récupérer les évaluations disponibles
+// Récupérer les évaluations disponibles (non encore passées)
 if ($isEleveLibre) {
-    // Élève libre : évaluations de type soutien uniquement
     $queryEvals = "SELECT DISTINCT e.*,
                           COALESCE(t.statut, 'non_commence') as statut_tentative,
                           t.note as note_obtenue,
@@ -48,7 +47,6 @@ if ($isEleveLibre) {
     $evaluations = $db->fetchAll($queryEvals, [$user['id_utilisateur']]);
     
 } else {
-    // Élève classe fixe : évaluations de sa classe
     if ($user['id_classe']) {
         $queryEvals = "SELECT DISTINCT e.*,
                               ae.date_debut as debut_acces,
@@ -72,15 +70,53 @@ if ($isEleveLibre) {
     }
 }
 
-// Récupérer les statistiques de l'élève
+// Récupérer les 4 dernières évaluations terminées
+$query4Dernieres = "SELECT 
+                        e.id_evaluation,
+                        e.titre,
+                        e.chapitre,
+                        te.note,
+                        te.pourcentage,
+                        te.date_fin,
+                        te.temps_passe_secondes,
+                        (SELECT COUNT(*) FROM questions WHERE id_evaluation = e.id_evaluation) as nb_questions
+                    FROM tentatives_eleves te
+                    INNER JOIN evaluations e ON te.id_evaluation = e.id_evaluation
+                    WHERE te.id_eleve = ?
+                      AND te.statut = 'terminee'
+                    ORDER BY te.date_fin DESC
+                    LIMIT 4";
+
+$dernieresEvals = $db->fetchAll($query4Dernieres, [$user['id_utilisateur']]);
+
+// Calculer la moyenne des 4 dernières
+$moyenne4Dernieres = 0;
+if (!empty($dernieresEvals)) {
+    $somme = array_sum(array_column($dernieresEvals, 'note'));
+    $moyenne4Dernieres = $somme / count($dernieresEvals);
+}
+
+// Récupérer TOUTES les évaluations terminées pour le graphique
+$queryToutesEvals = "SELECT 
+                        e.id_evaluation,
+                        e.titre,
+                        e.chapitre,
+                        te.note,
+                        te.pourcentage,
+                        te.date_fin
+                    FROM tentatives_eleves te
+                    INNER JOIN evaluations e ON te.id_evaluation = e.id_evaluation
+                    WHERE te.id_eleve = ?
+                      AND te.statut = 'terminee'
+                    ORDER BY te.date_fin ASC";
+
+$toutesEvals = $db->fetchAll($queryToutesEvals, [$user['id_utilisateur']]);
+
+// Récupérer les statistiques générales
 $queryStats = "SELECT 
                    COUNT(DISTINCT t.id_evaluation) as nb_evaluations_passees,
                    COUNT(CASE WHEN t.statut = 'terminee' THEN 1 END) as nb_evaluations_terminees,
-                   AVG(
+                   AVG(CASE WHEN t.statut = 'terminee' THEN t.note ELSE NULL END) as moyenne_generale
-                       CASE WHEN t.statut = 'terminee' 
-                       THEN CEILING((t.note / e.note_totale * 20) * 2) / 2
-                       ELSE NULL END
-                   ) as moyenne_generale
                FROM tentatives_eleves t
                INNER JOIN evaluations e ON t.id_evaluation = e.id_evaluation
                WHERE t.id_eleve = ?";
@@ -98,6 +134,7 @@ $stats = $db->fetchOne($queryStats, [$user['id_utilisateur']]) ?? [
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Dashboard Élève - <?= htmlspecialchars($user['prenom'] . ' ' . $user['nom']) ?></title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
     <style>
         * {
             margin: 0;
@@ -119,7 +156,7 @@ $stats = $db->fetchOne($queryStats, [$user['id_utilisateur']]) ?? [
         }
         
         .header-content {
-            max-width: 1200px;
+            max-width: 1400px;
             margin: 0 auto;
             display: flex;
             justify-content: space-between;
@@ -161,14 +198,14 @@ $stats = $db->fetchOne($queryStats, [$user['id_utilisateur']]) ?? [
         }
         
         .container {
-            max-width: 1200px;
+            max-width: 1400px;
             margin: 30px auto;
             padding: 0 20px;
         }
         
         .stats-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
             gap: 20px;
             margin-bottom: 30px;
         }
@@ -195,6 +232,128 @@ $stats = $db->fetchOne($queryStats, [$user['id_utilisateur']]) ?? [
             color: #333;
         }
         
+        .stat-card .sub-value {
+            font-size: 14px;
+            color: #999;
+            margin-top: 5px;
+        }
+        
+        /* Historique 4 dernières évaluations */
+        .historique-section {
+            background: white;
+            border-radius: 12px;
+            padding: 25px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+            margin-bottom: 30px;
+        }
+        
+        .section-title {
+            font-size: 20px;
+            color: #333;
+            margin-bottom: 20px;
+            padding-bottom: 10px;
+            border-bottom: 2px solid #f0f0f0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .dernieres-evals-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 20px;
+            margin-bottom: 20px;
+        }
+        
+        .eval-card-small {
+            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+            border-radius: 10px;
+            padding: 20px;
+            transition: all 0.3s;
+            border: 2px solid transparent;
+        }
+        
+        .eval-card-small:hover {
+            border-color: #667eea;
+            transform: translateY(-3px);
+            box-shadow: 0 6px 15px rgba(102, 126, 234, 0.2);
+        }
+        
+        .eval-card-small h4 {
+            color: #333;
+            font-size: 15px;
+            margin-bottom: 10px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        
+        .eval-card-small .chapitre {
+            font-size: 11px;
+            color: #666;
+            margin-bottom: 12px;
+        }
+        
+        .note-display-large {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-end;
+            margin-bottom: 8px;
+        }
+        
+        .note-fraction {
+            font-size: 14px;
+            color: #666;
+            font-weight: 600;
+        }
+        
+        .note-sur-20 {
+            font-size: 28px;
+            font-weight: 700;
+            color: #667eea;
+        }
+        
+        .eval-card-small .date {
+            font-size: 11px;
+            color: #999;
+            text-align: right;
+        }
+        
+        .moyenne-4 {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 20px;
+            border-radius: 10px;
+            text-align: center;
+        }
+        
+        .moyenne-4 h3 {
+            font-size: 14px;
+            margin-bottom: 10px;
+            opacity: 0.9;
+        }
+        
+        .moyenne-4 .value {
+            font-size: 42px;
+            font-weight: 700;
+        }
+        
+        /* Graphique progression */
+        .graph-section {
+            background: white;
+            border-radius: 12px;
+            padding: 25px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+            margin-bottom: 30px;
+        }
+        
+        .chart-container {
+            position: relative;
+            height: 300px;
+            margin-top: 20px;
+        }
+        
+        /* Évaluations disponibles */
         .section {
             background: white;
             border-radius: 12px;
@@ -203,14 +362,6 @@ $stats = $db->fetchOne($queryStats, [$user['id_utilisateur']]) ?? [
             margin-bottom: 30px;
         }
         
-        .section-title {
-            font-size: 22px;
-            color: #333;
-            margin-bottom: 20px;
-            padding-bottom: 10px;
-            border-bottom: 2px solid #f0f0f0;
-        }
-        
         .eval-grid {
             display: grid;
             gap: 15px;
@@ -326,6 +477,13 @@ $stats = $db->fetchOne($queryStats, [$user['id_utilisateur']]) ?? [
             border-color: #2196f3;
             color: #1565c0;
         }
+        
+        .no-data-message {
+            text-align: center;
+            padding: 40px;
+            color: #999;
+            font-style: italic;
+        }
     </style>
 </head>
 <body>
@@ -347,7 +505,7 @@ $stats = $db->fetchOne($queryStats, [$user['id_utilisateur']]) ?? [
     </div>
     
     <div class="container">
-        <!-- STATISTIQUES -->
+        <!-- STATISTIQUES GLOBALES -->
         <div class="stats-grid">
             <div class="stat-card">
                 <h3>📚 Évaluations passées</h3>
@@ -366,6 +524,11 @@ $stats = $db->fetchOne($queryStats, [$user['id_utilisateur']]) ?? [
                         ? number_format($stats['moyenne_generale'], 2) . '/20' 
                         : '-' ?>
                 </div>
+                <?php if (!empty($toutesEvals) && count($toutesEvals) > 1): ?>
+                    <div class="sub-value">
+                        Sur <?= count($toutesEvals) ?> évaluation<?= count($toutesEvals) > 1 ? 's' : '' ?>
+                    </div>
+                <?php endif; ?>
             </div>
         </div>
         
@@ -378,6 +541,67 @@ $stats = $db->fetchOne($queryStats, [$user['id_utilisateur']]) ?? [
         </div>
         <?php endif; ?>
         
+        <!-- HISTORIQUE 4 DERNIÈRES ÉVALUATIONS -->
+        <?php if (!empty($dernieresEvals)): ?>
+        <div class="historique-section">
+            <h2 class="section-title">
+                <span>📋 Mes 4 dernières évaluations</span>
+            </h2>
+            
+            <div class="dernieres-evals-grid">
+                <?php foreach ($dernieresEvals as $eval): ?>
+                <div class="eval-card-small">
+                    <h4 title="<?= htmlspecialchars($eval['titre']) ?>">
+                        <?= htmlspecialchars($eval['titre']) ?>
+                    </h4>
+                    <div class="chapitre">
+                        <?= htmlspecialchars($eval['chapitre'] ?? 'Non spécifié') ?>
+                    </div>
+                    
+                    <div class="note-display-large">
+                        <div>
+                            <div class="note-fraction">
+                                <?= number_format($eval['note'], 1) ?>/<?= $eval['nb_questions'] ?> questions
+                            </div>
+                            <div class="note-sur-20">
+                                <?= number_format($eval['note'], 2) ?>/20
+                            </div>
+                        </div>
+                        <div style="text-align: right;">
+                            <div class="note-fraction">
+                                <?= round($eval['pourcentage']) ?>%
+                            </div>
+                            <div style="font-size: 11px; color: #999;">
+                                ⏱️ <?= gmdate('i:s', $eval['temps_passe_secondes']) ?>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="date">
+                        <?= date('d/m/Y à H:i', strtotime($eval['date_fin'])) ?>
+                    </div>
+                </div>
+                <?php endforeach; ?>
+                
+                <!-- Moyenne des 4 dernières -->
+                <div class="moyenne-4">
+                    <h3>Moyenne sur ces 4 évaluations</h3>
+                    <div class="value"><?= number_format($moyenne4Dernieres, 2) ?>/20</div>
+                </div>
+            </div>
+        </div>
+        <?php endif; ?>
+        
+        <!-- GRAPHIQUE PROGRESSION -->
+        <?php if (!empty($toutesEvals) && count($toutesEvals) > 1): ?>
+        <div class="graph-section">
+            <h2 class="section-title">📈 Ma progression</h2>
+            <div class="chart-container">
+                <canvas id="progressionChart"></canvas>
+            </div>
+        </div>
+        <?php endif; ?>
+        
         <!-- ÉVALUATIONS DISPONIBLES -->
         <div class="section">
             <h2 class="section-title">📝 Évaluations disponibles</h2>
@@ -401,7 +625,6 @@ $stats = $db->fetchOne($queryStats, [$user['id_utilisateur']]) ?? [
                                 <p>
                                     <strong>Chapitre :</strong> <?= htmlspecialchars($eval['chapitre'] ?? 'Non spécifié') ?>
                                     | <strong>Durée :</strong> <?= $eval['duree_minutes'] ?? 'Libre' ?> min
-                                    | <strong>Note :</strong> /<?= $eval['note_totale'] ?? 20 ?>
                                 </p>
                                 <?php if (isset($eval['fin_acces'])): ?>
                                     <p style="color: #f57c00;">
@@ -417,10 +640,10 @@ $stats = $db->fetchOne($queryStats, [$user['id_utilisateur']]) ?? [
                                 
                                 <?php if ($statut === 'terminee'): ?>
                                     <span class="note-display">
-                                        <?= number_format($eval['note_obtenue'], 2) ?>/<?= $eval['note_totale'] ?? 20 ?>
+                                        <?= number_format($eval['note_obtenue'], 2) ?>/20
                                     </span>
                                     <span class="status-badge status-termine">✅ Terminé</span>
-                                    <a href="../resultats.php?id_evaluation=<?= $eval['id_evaluation'] ?>" 
+                                    <a href="../voir_resultat.php?id_evaluation=<?= $eval['id_evaluation'] ?>" 
                                        class="btn btn-secondary">
                                         Voir le résultat
                                     </a>
@@ -446,5 +669,150 @@ $stats = $db->fetchOne($queryStats, [$user['id_utilisateur']]) ?? [
             <?php endif; ?>
         </div>
     </div>
+    
+    <?php if (!empty($toutesEvals) && count($toutesEvals) > 1): ?>
+    <script>
+        // Données pour le graphique
+        const toutesEvaluations = <?= json_encode($toutesEvals) ?>;
+        
+        // Préparer les données
+        const labels = toutesEvaluations.map((e, index) => {
+            const date = new Date(e.date_fin);
+            return `Eval ${index + 1}\n${date.getDate()}/${date.getMonth() + 1}`;
+        });
+        
+        const notes = toutesEvaluations.map(e => parseFloat(e.note));
+        
+        // Calculer la moyenne mobile (sur 3 évaluations)
+        const moyennesMobiles = notes.map((note, index, arr) => {
+            if (index < 2) return null;
+            const sum = arr[index - 2] + arr[index - 1] + arr[index];
+            return sum / 3;
+        });
+        
+        // Créer le graphique
+        const ctx = document.getElementById('progressionChart').getContext('2d');
+        new Chart(ctx, {
+            type: 'line',
+            data: {
+                labels: labels,
+                datasets: [
+                    {
+                        label: 'Note (/20)',
+                        data: notes,
+                        borderColor: '#667eea',
+                        backgroundColor: 'rgba(102, 126, 234, 0.1)',
+                        borderWidth: 3,
+                        pointRadius: 6,
+                        pointBackgroundColor: '#667eea',
+                        pointBorderColor: '#fff',
+                        pointBorderWidth: 2,
+                        pointHoverRadius: 8,
+                        tension: 0.3,
+                        fill: true
+                    },
+                    {
+                        label: 'Moyenne mobile (3 évals)',
+                        data: moyennesMobiles,
+                        borderColor: '#28a745',
+                        backgroundColor: 'rgba(40, 167, 69, 0.05)',
+                        borderWidth: 2,
+                        borderDash: [5, 5],
+                        pointRadius: 4,
+                        pointBackgroundColor: '#28a745',
+                        pointBorderColor: '#fff',
+                        pointBorderWidth: 2,
+                        tension: 0.3,
+                        fill: false
+                    }
+                ]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        display: true,
+                        position: 'top',
+                        labels: {
+                            usePointStyle: true,
+                            padding: 15,
+                            font: {
+                                size: 12,
+                                weight: '600'
+                            }
+                        }
+                    },
+                    tooltip: {
+                        backgroundColor: 'rgba(0, 0, 0, 0.8)',
+                        padding: 12,
+                        titleFont: {
+                            size: 13,
+                            weight: 'bold'
+                        },
+                        bodyFont: {
+                            size: 12
+                        },
+                        callbacks: {
+                            title: function(context) {
+                                const index = context[0].dataIndex;
+                                return toutesEvaluations[index].titre;
+                            },
+                            label: function(context) {
+                                const index = context.dataIndex;
+                                const eval = toutesEvaluations[index];
+                                if (context.datasetIndex === 0) {
+                                    return `Note: ${context.parsed.y.toFixed(2)}/20 (${eval.pourcentage}%)`;
+                                } else {
+                                    return context.parsed.y ? `Moyenne mobile: ${context.parsed.y.toFixed(2)}/20` : '';
+                                }
+                            },
+                            afterLabel: function(context) {
+                                if (context.datasetIndex === 0) {
+                                    const index = context.dataIndex;
+                                    const eval = toutesEvaluations[index];
+                                    return `Chapitre: ${eval.chapitre || 'Non spécifié'}`;
+                                }
+                                return '';
+                            }
+                        }
+                    }
+                },
+                scales: {
+                    y: {
+                        beginAtZero: true,
+                        max: 20,
+                        ticks: {
+                            stepSize: 2,
+                            callback: function(value) {
+                                return value + '/20';
+                            },
+                            font: {
+                                size: 11
+                            }
+                        },
+                        grid: {
+                            color: 'rgba(0, 0, 0, 0.05)'
+                        }
+                    },
+                    x: {
+                        ticks: {
+                            font: {
+                                size: 10
+                            }
+                        },
+                        grid: {
+                            display: false
+                        }
+                    }
+                },
+                interaction: {
+                    intersect: false,
+                    mode: 'index'
+                }
+            }
+        });
+    </script>
+    <?php endif; ?>
 </body>
-</html>
+</html>