Valide

Vue/Accueil/index.php

@@ -160,16 +160,25 @@
     -->
 
     <!-- Graphiques (placeholders) -->
+    <div class="grid-1">
+        <div class="card">
+            <h3><?= _('Évolution des sinistres par mois') ?></h3>
+            <div class="chart">
+                <canvas id="claimsLine"></canvas>
+            </div>
+        </div>
+    </div>
+
     <div class="grid-2">
         <div class="card">
-            <h3><?= _('Sinistralité') ?></h3>
+            <h3><?= _('Sinitralité') ?></h3>
             <div class="chart">
                 <canvas id="lossRatioBar"></canvas>
             </div>
         </div>
 
         <div class="card">
-            <h3><?= _('Répartition des sinistres')?></h3>
+            <h3><?= _('Sinistres par garantie')?></h3>
             <div class="chart">
                 <canvas id="claimsPie"></canvas>
             </div>
@@ -182,7 +191,7 @@
 <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
 
 <script>
-    // Répartition des sinistres
+    // Sinistres par garantie
     const dataClaims = <?= $dataTabClaims ?>;
     new Chart(document.getElementById('claimsPie'), {
         type: 'doughnut',
@@ -199,6 +208,26 @@
         }
     });
 
+    // Evolution des sinistres par mois
+    const dataClaimsMonth = <?= $dataTabClaimsMonth ?>;
+    new Chart(document.getElementById('claimsLine'), {
+        type: 'line',
+        data: {
+            labels: dataClaimsMonth.months,
+            datasets: [{
+                label: "Sinistres",
+                data: dataClaimsMonth.monthlyClaims,
+                tension: 0.4,
+                fill: true
+            }]
+        },
+        options: {
+            scales: {
+                y: { beginAtZero: false }
+            }
+        }
+    });
+
     // Sinistralité
     new Chart(document.getElementById('lossRatioBar'), {
         type: 'bar',

Vue/gabarit.php

@@ -214,50 +214,6 @@ console.groupEnd();
             });
         </script>
         
-        <!-- ============================================
-            CSS DE SECOURS INLINE (garanti de fonctionner)
-            ============================================ -->
-        <style>
-            /* CSS DE SECOURS - S'applique immédiatement */
-            :root {
-                --office-primary: #b7472a;
-                --office-secondary: #2b579a;
-                --office-light: #f3f2f1;
-            }
-            
-            /* Styles de base garantis */
-            body {
-                font-family: 'Segoe UI', Arial, sans-serif !important;
-                margin: 0 !important;
-                padding: 0 !important;
-                min-height: 100vh !important;
-            }
-            
-            /* Debug visuel */
-            .css-loaded-indicator {
-                position: fixed !important;
-                top: 10px !important;
-                right: 10px !important;
-                background: #27ae60 !important;
-                color: white !important;
-                padding: 8px 12px !important;
-                border-radius: 4px !important;
-                z-index: 99999 !important;
-                font-size: 12px !important;
-                font-weight: bold !important;
-                display: none;
-            }
-            
-            /* Forcer la visibilité pendant le chargement */
-            [class*="app-"] {
-                min-height: 20px !important;
-                min-width: 20px !important;
-            }
-
-            .context-body {
-                background-color: #d0d0d0 !important;
-            }
-        </style>
         
         <!-- Open Graph pour le partage -->
         <meta property="og:title" content="INTER-SANTE Portail RH">
@@ -613,6 +569,19 @@ console.groupEnd();
             </div>
         </div>
 
+    <script type="text/javascript">
+		raffraichier_gabarit();
+	</script>
+
+	<script type="text/javascript">
+      $('#timer').timer({
+            duration: '60s',
+                callback: function() {
+                raffraichier_messagerie();
+            },
+            repeat: true
+      });
+    </script>
         
         <!-- JavaScript Libraries -->
         <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>