add js

dashboard.js

@@ -1,15 +1,16 @@
+/* global Chart */  // Permet à l'IDE de reconnaître Chart.js
+
 // -------------------------------
-// 1 - Sélection des widgets
+// 1️⃣ Sélection des widgets
 // -------------------------------
 const climat = document.querySelector('.widget.climat');
 const securite = document.querySelector('.widget.securite');
 const energie = document.querySelector('.widget.energie');
 const lumiere = document.querySelector('.widget.lumiere');
-const graphiques = document.querySelector('.widget.graphiques');
 const alertes = document.querySelector('.widget.alertes');
 
 // -------------------------------
-// 2 - Hover dynamique sur les widgets
+// 2️⃣ Hover dynamique sur les widgets
 // -------------------------------
 function setupHover(widget, colorNormal, colorHover) {
     widget.addEventListener('mouseenter', () => {
@@ -20,63 +21,51 @@ function setupHover(widget, colorNormal, colorHover) {
     });
 }
 
-// Appliquer le hover sur chaque widget
 setupHover(climat, '#ADD8E6', '#87CEEB');
 setupHover(securite, '#D3D3D3', '#C0C0C0');
 setupHover(energie, '#FFFACD', '#FAFAD2');
 setupHover(lumiere, '#F5F5DC', '#FFF8DC');
 
 // -------------------------------
-// 3 - Simulation d'alerte visuelle
+// 3️⃣ Simulation d'alerte visuelle
 // -------------------------------
 function showAlert(widget) {
-    widget.classList.add('alert'); // contour rouge
+    widget.classList.add('alert');
-}
-
-function hideAlert(widget) {
-    widget.classList.remove('alert'); // retire le contour rouge
 }
 
 // Exemple : activer l'alerte sur climat
 showAlert(climat);
 
-// Le bloc Alertes reste visible
+// Le bloc alertes reste visible
 alertes.style.display = 'block';
 
 // -------------------------------
-// 4 - Préparer la zone graphique vide
+// 4️⃣ Graphique Chart.js
 // -------------------------------
 const canvasTemp = document.getElementById('graph-temp');
-if (canvasTemp) {
+if(canvasTemp) {
     const ctx = canvasTemp.getContext('2d');
-    const myChart = new Chart(ctx, {
+    new Chart(ctx, {
         type: 'line',
         data: {
-            labels: [],   // vide pour l'instant
+            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
             datasets: [{
                 label: 'Température',
-                data: [],   // vide pour l'instant
+                data: [20, 22, 19, 23, 21],
                 borderColor: 'blue',
+                backgroundColor: 'rgba(173,216,230,0.2)',
                 tension: 0.4
             }]
         },
         options: {
             responsive: true,
             plugins: {
-                legend: { display: false }
+                legend: { display: true }
             },
             scales: {
-                x: { display: false },
+                x: { display: true, title: { display: true, text: 'Mois' } },
-                y: { display: false }
+                y: { display: true, title: { display: true, text: '°C' } }
             }
         }
     });
-}
-
-// -------------------------------
-// 5 - Fonction de mise à jour future
-// -------------------------------
-function majWidget(widget, valeur) {
-    // futur code pour mettre à jour le widget avec de vraies données
-    // exemple : climat.querySelector('p').innerText = "Température : " + valeur + "°C";
 }

dashboard.php

@@ -6,11 +6,14 @@ if (!isset($_SESSION['user'])) {
 }
 
 include 'include/header.php';
-include 'include/nav.php';
 ?>
 
-    <h2>Dashboard</h2>
+    <h2>Dashboard Smart House</h2>
-    <p>Bienvenue, <?php echo htmlspecialchars($_SESSION['user']); ?> (<?php echo htmlspecialchars($_SESSION['role']); ?>)</p>
+
+    <p>
+        Bienvenue, <?php echo htmlspecialchars($_SESSION['user']); ?>
+        (<?php echo htmlspecialchars($_SESSION['role']); ?>)
+    </p>
 
 <?php if ($_SESSION['role'] === 'Admin'): ?>
     <p>Vous êtes Admin, vous pouvez gérer le site.</p>
@@ -18,4 +21,50 @@ include 'include/nav.php';
     <p>Vous êtes Utilisateur, votre accès est limité.</p>
 <?php endif; ?>
 
+    <!-- DASHBOARD WIDGETS -->
+    <div class="dashboard">
+
+        <div class="widget climat">
+            <span class="icone">🌡️</span>
+            <strong>Climat</strong>
+            <p>Température : –</p>
+            <p>Humidité : –</p>
+            <p>Pression : –</p>
+            <p>Altitude : –</p>
+        </div>
+
+        <div class="widget securite">
+            <span class="icone">🚨</span>
+            <strong>Sécurité</strong>
+            <p>Mouvement : –</p>
+            <p>Distance : –</p>
+        </div>
+
+        <div class="widget energie">
+            <span class="icone">⚡</span>
+            <strong>Énergie</strong>
+            <p>Puissance : –</p>
+            <p>Consommation : –</p>
+        </div>
+
+        <div class="widget lumiere">
+            <span class="icone">💡</span>
+            <strong>Lumière</strong>
+            <p>Lux : –</p>
+        </div>
+
+        <div class="widget graphiques">
+            <span class="icone">📊</span>
+            <strong>Graphiques</strong>
+            <canvas id="graph-temp" width="400" height="150"></canvas>
+        </div>
+
+        <div class="widget alertes">
+            <span class="icone">⚠️</span>
+            <strong>Alertes</strong>
+            <p>– Aucune alerte pour l’instant –</p>
+        </div>
+
+    </div>
+
 <?php include 'include/footer.php'; ?>

include/footer.php

@@ -3,6 +3,5 @@
     <p>© 2026 Smart House</p>
 </footer>
 
-<script src="dashboard.js"></script>
+<!-- JS du dashboard -->
-</body>
+<script src="../dashboard.js"></script>
-</html>

include/header.php

@@ -5,9 +5,12 @@
     <title>Smart House</title>
 
     <!-- CSS principal -->
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="../style.css">
 
-    <!-- Chart.js pour les graphiques -->
+    <!-- Chart.js local -->
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="../js/chart.min.js"></script>
 </head>
-<body>
+<body>
+
+<!-- NAVIGATION -->
+<?php include 'nav.php'; ?>

include/nav.php

@@ -1,16 +1,7 @@
-<?php
-session_start();
-$role = isset($_SESSION['role']) ? $_SESSION['role'] : '';
-?>
-
 <nav>
     <a href="../dashboard.php">Dashboard</a>
-
+    <a href="../admin_users.php">Utilisateurs</a>
-    <?php if ($role === 'Admin'): ?>
+    <a href="../admin_settings.php">Paramètres</a>
-        | <a href="../admin_users.php">Gestion utilisateurs</a>
+    <a href="../logout.php">Déconnexion</a>
-        | <a href="../admin_settings.php">Paramètres</a>
-    <?php endif; ?>
-
-    | <a href="../logout.php">Se déconnecter</a>
 </nav>
 <hr>

style.css

@@ -1,15 +1,11 @@
-/* ------------------ */
 /* GLOBAL */
-/* ------------------ */
 body {
     font-family: Arial, sans-serif;
     margin: 20px;
     background-color: #f0f0f0;
 }
 
-/* ------------------ */
 /* NAVIGATION */
-/* ------------------ */
 nav {
     margin-bottom: 20px;
 }
@@ -25,18 +21,14 @@ nav a:hover {
     color: #007BFF;
 }
 
-/* ------------------ */
 /* DASHBOARD */
-/* ------------------ */
 .dashboard {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 15px;
 }
 
-/* ------------------ */
 /* WIDGETS */
-/* ------------------ */
 .widget {
     padding: 20px;
     border-radius: 10px;
@@ -51,15 +43,8 @@ nav a:hover {
 .energie { background-color: #FFFACD; }
 .lumiere { background-color: #F5F5DC; }
 
-.graphiques {
+.graphiques { grid-column: span 4; background-color: white; }
-    grid-column: span 4;
+.alertes { grid-column: span 4; background-color: #FFC0CB; }
-    background-color: white;
-}
-
-.alertes {
-    grid-column: span 4;
-    background-color: #FFC0CB;
-}
 
 /* icones */
 .icone {