Mise à jour du projet

.env

@@ -1,15 +1,25 @@
-# Configuration de la base de données
+# ============================================================
+#  Smart Parking v2.0 — Variables d'environnement
+#  Copiez ce fichier en .env à la racine du projet
+# ============================================================
+
+# ── Base de données ──────────────────────────────────────────
 DB_HOST=db
 DB_PORT=3306
 DB_USER=smartparking_user
 DB_PASSWORD=smartparking_pass
 DB_NAME=smartparking
 
-# Configuration JWT
+# ── JWT ──────────────────────────────────────────────────────
-JWT_SECRET=une_chaine_tres_longue_et_secrete_à_changer
+# ⚠️ Changez cette valeur ! Mettez une chaîne longue et aléatoire.
+JWT_SECRET=une_chaine_tres_longue_et_secrete_changez_moi_absolument
 
-# Port du serveur
+# ── Serveur ──────────────────────────────────────────────────
 PORT=3000
-
-# Mode environnement
 NODE_ENV=production
+
+# ── MQTT (Mosquitto) ─────────────────────────────────────────
+# Si Mosquitto tourne dans Docker (service "mqtt") → mqtt
+# Si Mosquitto est installé directement sur le Pi    → localhost
+MQTT_HOST=mqtt
+MQTT_PORT=1883

js/admin.js

@@ -1,94 +1,82 @@
 /**
  * ============================================
  * ADMIN.JS - Panel d'administration
- * Smart Parking - BTS CIEL IR
+ * Smart Parking v3.0
+ * CORRIGÉ :
+ *   - Suppression du graphique d'occupation
+ *   - Historique affiche la date complète
+ *     (jour + mois + année + heure + minute)
  * ============================================
  */
 
-// Initialisation
 document.addEventListener('DOMContentLoaded', () => {
     console.log('⚙️ Initialisation du panel admin...');
-    
-    // Vérifier si l'utilisateur est admin
     if (!isAdmin()) return;
-    
     initAdminPanel();
 });
 
-/**
- * Vérifie si l'utilisateur est admin
- */
 function isAdmin() {
     const user = JSON.parse(localStorage.getItem('smart_parking_user') || 'null');
     return user && user.role === 'admin';
 }
 
-/**
- * Initialise le panel admin
- */
 function initAdminPanel() {
     loadAdminStats();
     initPlacesControl();
     loadUsersTable();
     loadReservationsTable();
-    initOccupancyChart();
     loadHistoryLog();
 
-    // Rafraîchissement périodique
+    // Rafraîchissement périodique toutes les 10 secondes
     setInterval(() => {
         loadAdminStats();
         loadReservationsTable();
+        loadHistoryLog();
     }, 10000);
 }
 
-/**
+// ============================================
- * Charge les statistiques admin
+// STATISTIQUES ADMIN
- */
+// ============================================
-function loadAdminStats() {
-    const users = JSON.parse(localStorage.getItem('smart_parking_users') || '[]');
-    const reservations = JSON.parse(localStorage.getItem('smart_parking_reservations') || '[]');
-    const spots = JSON.parse(localStorage.getItem('smart_parking_spots') || '[]');
 
-    // Calculer les stats
+function loadAdminStats() {
-    const totalUsers = users.length + 1; // +1 pour l'admin par défaut
+    const users        = JSON.parse(localStorage.getItem('smart_parking_users') || '[]');
+    const reservations = JSON.parse(localStorage.getItem('smart_parking_reservations') || '[]');
+    const spots        = JSON.parse(localStorage.getItem('smart_parking_spots') || '[]');
+
+    const totalUsers        = users.length + 1;
     const totalReservations = reservations.length;
-    const totalRevenue = reservations
+    const totalRevenue      = reservations
         .filter(r => r.status === 'active' || r.status === 'completed')
         .reduce((sum, r) => sum + (r.price || 0), 0);
 
-    const occupied = spots.filter(s => s.status === 'occupied').length;
+    const occupied      = spots.filter(s => s.status === 'occupied').length;
-    const reserved = spots.filter(s => s.status === 'reserved').length;
+    const reserved      = spots.filter(s => s.status === 'reserved').length;
     const occupancyRate = spots.length > 0
         ? Math.round(((occupied + reserved) / spots.length) * 100)
         : 0;
 
-    // Mettre à jour l'affichage
+    document.getElementById('adminTotalUsers').textContent        = totalUsers;
-    document.getElementById('adminTotalUsers').textContent = totalUsers;
     document.getElementById('adminTotalReservations').textContent = totalReservations;
-    document.getElementById('adminTotalRevenue').textContent = totalRevenue + '€';
+    document.getElementById('adminTotalRevenue').textContent      = totalRevenue + '€';
-    document.getElementById('adminOccupancyRate').textContent = occupancyRate + '%';
+    document.getElementById('adminOccupancyRate').textContent     = occupancyRate + '%';
 }
 
-/**
+// ============================================
- * Initialise le contrôle des places
+// GESTION DES PLACES
- */
+// ============================================
+
 function initPlacesControl() {
-    const spots = JSON.parse(localStorage.getItem('smart_parking_spots') || '[]');
+    const spots      = JSON.parse(localStorage.getItem('smart_parking_spots') || '[]');
-    
-    // Mettre à jour le champ du nombre de places
     const spotsInput = document.getElementById('adminTotalSpots');
-    if (spotsInput) {
+    if (spotsInput) spotsInput.value = spots.length || 10;
-        spotsInput.value = spots.length || 10;
-    }
 
-    // Bouton de mise à jour
     document.getElementById('updateSpotsBtn')?.addEventListener('click', () => {
         const newCount = parseInt(document.getElementById('adminTotalSpots').value);
         if (newCount < 5 || newCount > 50) {
             Dashboard.showToast('Le nombre de places doit être entre 5 et 50', 'error');
             return;
         }
-        
         if (window.ParkingMap) {
             window.ParkingMap.setTotalSpots(newCount);
             renderAdminPlacesList();
@@ -96,13 +84,9 @@ function initPlacesControl() {
         }
     });
 
-    // Rendre la liste des places
     renderAdminPlacesList();
 }
 
-/**
- * Rend la liste des places dans l'admin
- */
 function renderAdminPlacesList() {
     const container = document.getElementById('adminPlacesList');
     if (!container) return;
@@ -113,60 +97,42 @@ function renderAdminPlacesList() {
         <div
             class="admin-place-item ${spot.status}"
             onclick="toggleSpotStatus(${spot.id})"
-            title="Place ${spot.number} - Cliquez pour changer"
+            title="Place ${spot.number} — Cliquez pour changer"
         >
             ${spot.number}
         </div>
     `).join('');
 }
 
-/**
- * Change le statut d'une place (admin)
- */
 function toggleSpotStatus(spotId) {
     const spots = JSON.parse(localStorage.getItem('smart_parking_spots') || '[]');
-    const spot = spots.find(s => s.id === spotId);
+    const spot  = spots.find(s => s.id === spotId);
-    
     if (!spot) return;
 
-    // Cycle: free -> occupied -> reserved -> free
+    const cycle       = ['free', 'occupied', 'reserved'];
-    const cycle = ['free', 'occupied', 'reserved'];
+    const nextStatus  = cycle[(cycle.indexOf(spot.status) + 1) % cycle.length];
-    const currentIndex = cycle.indexOf(spot.status);
+    spot.status       = nextStatus;
-    const nextStatus = cycle[(currentIndex + 1) % cycle.length];
+    spot.lastUpdate   = new Date().toISOString();
-    
-    spot.status = nextStatus;
-    spot.lastUpdate = new Date().toISOString();
 
     localStorage.setItem('smart_parking_spots', JSON.stringify(spots));
-    
-    // Rafraîchir
     renderAdminPlacesList();
-    if (window.ParkingMap) {
+    if (window.ParkingMap) window.ParkingMap.refresh();
-        window.ParkingMap.refresh();
-    }
     loadAdminStats();
 
-    Dashboard.showToast(`Place ${spot.number} - ${getStatusLabel(nextStatus)}`, 'success');
+    Dashboard.showToast(`Place ${spot.number} — ${getStatusLabel(nextStatus)}`, 'success');
 }
 
-/**
+// ============================================
- * Charge le tableau des utilisateurs
+// TABLEAU UTILISATEURS
- */
+// ============================================
+
 function loadUsersTable() {
     const tbody = document.getElementById('adminUsersTable');
     if (!tbody) return;
 
-    const users = JSON.parse(localStorage.getItem('smart_parking_users') || '[]');
+    const users    = JSON.parse(localStorage.getItem('smart_parking_users') || '[]');
-    
-    // Ajouter l'admin par défaut
     const allUsers = [
-        {
+        { id: 0, name: 'Administrateur', email: 'admin@smartparking.fr', phone: '01 23 45 67 89', role: 'admin' },
-            id: 0,
-            name: 'Administrateur',
-            email: 'admin@smartparking.fr',
-            phone: '01 23 45 67 89',
-            role: 'admin'
-        },
         ...users
     ];
 
@@ -184,9 +150,8 @@ function loadUsersTable() {
             <td>
                 <div class="table-actions">
                     ${user.role !== 'admin' ? `
-                        <button class="btn btn-danger btn-small btn-icon-only" onclick="deleteUser(${user.id})" title="Supprimer">
+                        <button class="btn btn-danger btn-small btn-icon-only"
-                            🗑️
+                            onclick="deleteUser(${user.id})" title="Supprimer">🗑️</button>
-                        </button>
                     ` : '-'}
                 </div>
             </td>
@@ -194,31 +159,27 @@ function loadUsersTable() {
     `).join('');
 }
 
-/**
- * Supprime un utilisateur
- */
 function deleteUser(userId) {
     if (!confirm('Êtes-vous sûr de vouloir supprimer cet utilisateur ?')) return;
 
     let users = JSON.parse(localStorage.getItem('smart_parking_users') || '[]');
-    users = users.filter(u => u.id !== userId);
+    users     = users.filter(u => u.id !== userId);
     localStorage.setItem('smart_parking_users', JSON.stringify(users));
 
-    // Supprimer aussi ses réservations
     let reservations = JSON.parse(localStorage.getItem('smart_parking_reservations') || '[]');
-    reservations = reservations.filter(r => r.userId !== userId);
+    reservations     = reservations.filter(r => r.userId !== userId);
     localStorage.setItem('smart_parking_reservations', JSON.stringify(reservations));
 
     loadUsersTable();
     loadReservationsTable();
     loadAdminStats();
-    
     Dashboard.showToast('Utilisateur supprimé', 'success');
 }
 
-/**
+// ============================================
- * Charge le tableau des réservations
+// TABLEAU RÉSERVATIONS
- */
+// ============================================
+
 function loadReservationsTable() {
     const tbody = document.getElementById('adminReservationsTable');
     if (!tbody) return;
@@ -226,7 +187,7 @@ function loadReservationsTable() {
     const reservations = JSON.parse(localStorage.getItem('smart_parking_reservations') || '[]');
 
     if (reservations.length === 0) {
-        tbody.innerHTML = '<tr><td colspan="8" style="text-align: center; color: var(--text-muted);">Aucune réservation</td></tr>';
+        tbody.innerHTML = '<tr><td colspan="8" style="text-align:center;color:var(--text-muted)">Aucune réservation</td></tr>';
         return;
     }
 
@@ -235,7 +196,7 @@ function loadReservationsTable() {
             <td>#${res.id}</td>
             <td>${res.userName}</td>
             <td>Place ${res.spotNumber}</td>
-            <td>${formatDate(res.date)}</td>
+            <td>${formatDateShort(res.date)}</td>
             <td>${res.startTime} - ${res.endTime}</td>
             <td>${res.price}€</td>
             <td>
@@ -246,12 +207,10 @@ function loadReservationsTable() {
             <td>
                 <div class="table-actions">
                     ${res.status === 'active' ? `
-                        <button class="btn btn-success btn-small btn-icon-only" onclick="completeReservation(${res.id})" title="Terminer">
+                        <button class="btn btn-success btn-small btn-icon-only"
-                            ✓
+                            onclick="completeReservation(${res.id})" title="Terminer">✓</button>
-                        </button>
+                        <button class="btn btn-danger btn-small btn-icon-only"
-                        <button class="btn btn-danger btn-small btn-icon-only" onclick="adminCancelReservation(${res.id})" title="Annuler">
+                            onclick="adminCancelReservation(${res.id})" title="Annuler">✕</button>
-                            ✕
-                        </button>
                     ` : '-'}
                 </div>
             </td>
@@ -259,113 +218,42 @@ function loadReservationsTable() {
     `).join('');
 }
 
-/**
- * Termine une réservation
- */
 function completeReservation(reservationId) {
-    let reservations = JSON.parse(localStorage.getItem('smart_parking_reservations') || '[]');
+    let reservations  = JSON.parse(localStorage.getItem('smart_parking_reservations') || '[]');
     const reservation = reservations.find(r => r.id === reservationId);
+    if (!reservation) return;
 
-    if (reservation) {
+    reservation.status = 'completed';
-        reservation.status = 'completed';
+    localStorage.setItem('smart_parking_reservations', JSON.stringify(reservations));
-        localStorage.setItem('smart_parking_reservations', JSON.stringify(reservations));
 
-        // Libérer la place
+    if (window.ParkingMap) window.ParkingMap.setSpotStatus(reservation.spotId, 'free');
-        if (window.ParkingMap) {
-            window.ParkingMap.setSpotStatus(reservation.spotId, 'free');
-        }
 
-        loadReservationsTable();
+    loadReservationsTable();
-        loadAdminStats();
+    loadAdminStats();
-        Dashboard.showToast('Réservation terminée', 'success');
+    Dashboard.showToast('Réservation terminée', 'success');
-    }
 }
 
-/**
- * Annule une réservation (admin)
- */
 function adminCancelReservation(reservationId) {
     if (!confirm('Êtes-vous sûr de vouloir annuler cette réservation ?')) return;
 
-    let reservations = JSON.parse(localStorage.getItem('smart_parking_reservations') || '[]');
+    let reservations  = JSON.parse(localStorage.getItem('smart_parking_reservations') || '[]');
     const reservation = reservations.find(r => r.id === reservationId);
+    if (!reservation) return;
 
-    if (reservation) {
+    reservation.status = 'cancelled';
-        reservation.status = 'cancelled';
+    localStorage.setItem('smart_parking_reservations', JSON.stringify(reservations));
-        localStorage.setItem('smart_parking_reservations', JSON.stringify(reservations));
 
-        // Libérer la place
+    if (window.ParkingMap) window.ParkingMap.setSpotStatus(reservation.spotId, 'free');
-        if (window.ParkingMap) {
-            window.ParkingMap.setSpotStatus(reservation.spotId, 'free');
-        }
 
-        loadReservationsTable();
+    loadReservationsTable();
-        loadAdminStats();
+    loadAdminStats();
-        Dashboard.showToast('Réservation annulée', 'success');
+    Dashboard.showToast('Réservation annulée', 'success');
-    }
 }
 
-/**
+// ============================================
- * Initialise le graphique d'occupation
+// HISTORIQUE — CORRIGÉ : date complète
- */
+// ============================================
-function initOccupancyChart() {
-    const ctx = document.getElementById('adminOccupancyChart');
-    if (!ctx) return;
 
-    // Générer des données d'exemple
-    const labels = [];
-    const data = [];
-    
-    for (let i = 6; i >= 0; i--) {
-        const date = new Date();
-        date.setDate(date.getDate() - i);
-        labels.push(date.toLocaleDateString('fr-FR', { weekday: 'short' }));
-        data.push(Math.floor(Math.random() * 40) + 30); // 30-70% d'occupation
-    }
-    
-    new Chart(ctx, {
-        type: 'bar',
-        data: {
-            labels: labels,
-            datasets: [{
-                label: 'Taux d\'occupation (%)',
-                data: data,
-                backgroundColor: 'rgba(99, 102, 241, 0.5)',
-                borderColor: 'rgba(99, 102, 241, 1)',
-                borderWidth: 1,
-                borderRadius: 4
-            }]
-        },
-        options: {
-            responsive: true,
-            maintainAspectRatio: false,
-            plugins: {
-                legend: {
-                    labels: { color: '#f1f5f9' }
-                }
-            },
-            scales: {
-                x: {
-                    grid: { color: '#334155' },
-                    ticks: { color: '#94a3b8' }
-                },
-                y: {
-                    min: 0,
-                    max: 100,
-                    grid: { color: '#334155' },
-                    ticks: { 
-                        color: '#94a3b8',
-                        callback: value => value + '%'
-                    }
-                }
-            }
-        }
-    });
-}
-
-/**
- * Charge l'historique
- */
 function loadHistoryLog() {
     const container = document.getElementById('adminLogContainer');
     if (!container) return;
@@ -373,54 +261,61 @@ function loadHistoryLog() {
     const history = JSON.parse(localStorage.getItem('smart_parking_history') || '[]');
 
     if (history.length === 0) {
-        container.innerHTML = '<p style="color: var(--text-muted); text-align: center;">Aucun historique</p>';
+        container.innerHTML = '<p style="color:var(--text-muted);text-align:center">Aucun historique</p>';
         return;
     }
 
-    container.innerHTML = history.slice(0, 20).map(item => `
+    container.innerHTML = history.slice(0, 50).map(item => `
         <div class="log-item">
-            <span class="log-time">${formatTime(item.timestamp)}</span>
+            <span class="log-time">${formatDateComplete(item.timestamp)}</span>
-            <span><strong>${item.action}:</strong> ${item.details}</span>
+            <span><strong>${item.action} :</strong> ${item.details}</span>
         </div>
     `).join('');
 }
 
+// ============================================
+// FONCTIONS DE FORMAT DATE
+// ============================================
+
 /**
- * Formate une date
+ * CORRIGÉ — Affiche la date complète dans l'historique
+ * Avant : seulement "14:32"
+ * Après : "12/06/2025 à 14:32"
  */
-function formatDate(dateString) {
+function formatDateComplete(dateString) {
+    if (!dateString) return 'N/A';
     const date = new Date(dateString);
-    return date.toLocaleDateString('fr-FR', {
+    const jour  = String(date.getDate()).padStart(2, '0');
-        day: '2-digit',
+    const mois  = String(date.getMonth() + 1).padStart(2, '0');
-        month: '2-digit'
+    const annee = date.getFullYear();
+    const heure = String(date.getHours()).padStart(2, '0');
+    const min   = String(date.getMinutes()).padStart(2, '0');
+    return `${jour}/${mois}/${annee} à ${heure}:${min}`;
+}
+
+function formatDateShort(dateString) {
+    if (!dateString) return 'N/A';
+    return new Date(dateString).toLocaleDateString('fr-FR', {
+        day: '2-digit', month: '2-digit'
     });
 }
 
-/**
- * Formate une heure
- */
-function formatTime(dateString) {
-    const date = new Date(dateString);
-    return date.toLocaleTimeString('fr-FR', {
-        hour: '2-digit',
-        minute: '2-digit'
-    });
-}
-
-/**
- * Retourne le label du statut
- */
 function getStatusLabel(status) {
-    const labels = {
+    return {
-        'pending': 'En attente',
+        pending:   'En attente',
-        'active': 'Active',
+        active:    'Active',
-        'completed': 'Terminée',
+        completed: 'Terminée',
-        'cancelled': 'Annulée'
+        cancelled: 'Annulée',
-    };
+        free:      'Libre',
-    return labels[status] || status;
+        occupied:  'Occupée',
+        reserved:  'Réservée'
+    }[status] || status;
 }
 
-// Exporter les fonctions
+// ============================================
+// EXPORT
+// ============================================
+
 window.AdminModule = {
     refresh: () => {
         loadAdminStats();

js/reservation.js

@@ -1,22 +1,21 @@
 /**
  * ============================================
  * RESERVATION.JS - Système de réservation
- * Smart Parking - BTS CIEL IR
+ * Smart Parking v3.0
- * MODIFIÉ : Suppression du QR code, remplacement
+ * CORRIGÉ : ne bloque plus une place pour
- *           par une confirmation simple avec badge
+ *           toujours — vérifie uniquement si
+ *           une voiture est physiquement là
  * ============================================
  */
 
-// Tarifs
 const PRICING = {
-    30: 2,    // 30 min = 2€
+    30: 2,
-    60: 3,    // 1h = 3€
+    60: 3,
-    120: 5,   // 2h = 5€
+    120: 5,
-    240: 8,   // 4h = 8€
+    240: 8,
-    480: 15   // 8h (journée) = 15€
+    480: 15
 };
 
-// Horaires disponibles
 const TIME_SLOTS = [
     '06:00', '06:30', '07:00', '07:30', '08:00', '08:30', '09:00', '09:30',
     '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30',
@@ -25,67 +24,52 @@ const TIME_SLOTS = [
     '22:00'
 ];
 
-// État de la réservation en cours
 let currentReservation = null;
 
-// Initialisation
 document.addEventListener('DOMContentLoaded', () => {
     console.log('📅 Initialisation du système de réservation...');
     initReservationForm();
     initDatePicker();
     initTimeSlots();
     initPricePreview();
-    initConfirmationModal(); // MODIFIÉ : était initPaymentModal()
+    initConfirmationModal();
 });
 
-/**
- * Initialise le formulaire de réservation
- */
 function initReservationForm() {
     const form = document.getElementById('reservationForm');
     if (!form) return;
     form.addEventListener('submit', handleReservationSubmit);
 }
 
-/**
- * Initialise le sélecteur de date
- */
 function initDatePicker() {
     const dateInput = document.getElementById('resDate');
     if (!dateInput) return;
     const today = new Date().toISOString().split('T')[0];
-    dateInput.min = today;
+    dateInput.min   = today;
     dateInput.value = today;
 }
 
-/**
- * Initialise les créneaux horaires
- */
 function initTimeSlots() {
     const select = document.getElementById('resStartTime');
     if (!select) return;
 
     TIME_SLOTS.forEach(time => {
-        const option = document.createElement('option');
+        const option       = document.createElement('option');
-        option.value = time;
+        option.value       = time;
         option.textContent = time;
         select.appendChild(option);
     });
 
-    // Sélectionner le prochain créneau disponible
+    const now          = new Date();
-    const now = new Date();
+    const currentHour  = now.getHours();
-    const currentHour = now.getHours();
+    const currentMins  = now.getMinutes();
-    const currentMinutes = now.getMinutes();
+    const nextSlot     = TIME_SLOTS.find(t => {
-    const nextSlot = TIME_SLOTS.find(t => {
         const [h, m] = t.split(':').map(Number);
-        return h > currentHour || (h === currentHour && m > currentMinutes);
+        return h > currentHour || (h === currentHour && m > currentMins);
     });
     if (nextSlot) select.value = nextSlot;
 }
 
-/**
- * Initialise la prévisualisation du prix
- */
 function initPricePreview() {
     const durationSelect = document.getElementById('resDuration');
     if (!durationSelect) return;
@@ -93,21 +77,21 @@ function initPricePreview() {
     updatePricePreview();
 }
 
-/**
- * Met à jour la prévisualisation du prix
- */
 function updatePricePreview() {
     const duration = parseInt(document.getElementById('resDuration').value);
-    const price = PRICING[duration] || 0;
+    const price    = PRICING[duration] || 0;
     document.getElementById('previewPrice').textContent = price + '€';
 }
 
 /**
  * Gère la soumission du formulaire
- * MODIFIÉ : la réservation est enregistrée ici directement,
+ *
- *           puis le modal de confirmation s'affiche.
+ * CORRIGÉ : on n'empêche plus la réservation si la place
+ * est "reserved" dans le localStorage. On laisse le serveur
+ * vérifier les conflits d'horaire. On bloque uniquement si
+ * une voiture est physiquement détectée (status "occupied").
  */
-function handleReservationSubmit(e) {
+async function handleReservationSubmit(e) {
     e.preventDefault();
 
     const user = JSON.parse(localStorage.getItem('smart_parking_user') || 'null');
@@ -127,12 +111,13 @@ function handleReservationSubmit(e) {
         return;
     }
 
-    // Vérifier que la place est toujours libre
+    // CORRIGÉ : on bloque uniquement si une voiture est physiquement là
+    // Une place "reserved" peut quand même être réservée à un autre horaire
     const spots = JSON.parse(localStorage.getItem('smart_parking_spots') || '[]');
     const spot  = spots.find(s => s.id === spotId);
 
-    if (!spot || spot.status !== 'free') {
+    if (spot && spot.status === 'occupied') {
-        Dashboard.showToast('Cette place n\'est plus disponible', 'error');
+        Dashboard.showToast('Une voiture est déjà sur cette place', 'error');
         if (window.ParkingMap) window.ParkingMap.refresh();
         return;
     }
@@ -142,39 +127,78 @@ function handleReservationSubmit(e) {
     endDate.setMinutes(endDate.getMinutes() + duration);
     const endTime = endDate.toTimeString().slice(0, 5);
 
-    // Construire l'objet réservation
+    // Essayer de créer la réservation via l'API
-    currentReservation = {
+    // Le serveur vérifiera les conflits d'horaire
-        id:          Date.now(),
+    const token = localStorage.getItem('smart_parking_token');
-        userId:      user.id,
-        userName:    user.name,
-        spotId:      spotId,
-        spotNumber:  spot.number,
-        date:        date,
-        startTime:   startTime,
-        endTime:     endTime,
-        duration:    duration,
-        vehicle:     vehicle.toUpperCase(),
-        price:       PRICING[duration],
-        status:      'active',
-        createdAt:   new Date().toISOString()
-    };
 
-    // ---- Enregistrement immédiat (plus de bouton "J'ai payé") ----
+    if (token) {
+        try {
+            const response = await fetch('/api/reservations', {
+                method:  'POST',
+                headers: {
+                    'Content-Type':  'application/json',
+                    'Authorization': 'Bearer ' + token
+                },
+                body: JSON.stringify({
+                    spotId, date, startTime, endTime,
+                    duration, vehicle: vehicle.toUpperCase(),
+                    price: PRICING[duration]
+                })
+            });
 
-    // Sauvegarder la réservation
+            const data = await response.json();
+
+            if (!data.success) {
+                // Le serveur a détecté un conflit ou une erreur
+                Dashboard.showToast(data.message, 'error');
+                return;
+            }
+
+            // Succès via API
+            currentReservation = {
+                id:         data.data.id,
+                userId:     user.id,
+                userName:   user.name,
+                spotId:     spotId,
+                spotNumber: spot ? spot.number : spotId,
+                date, startTime, endTime, duration,
+                vehicle:    vehicle.toUpperCase(),
+                price:      PRICING[duration],
+                status:     'active',
+                createdAt:  new Date().toISOString()
+            };
+
+        } catch (_err) {
+            // Mode offline : enregistrement local
+            currentReservation = creerReservationLocale(
+                user, spotId, spot, date, startTime, endTime, duration, vehicle
+            );
+        }
+    } else {
+        // Pas de token : mode offline
+        currentReservation = creerReservationLocale(
+            user, spotId, spot, date, startTime, endTime, duration, vehicle
+        );
+    }
+
+    // Sauvegarder dans le localStorage
     let reservations = JSON.parse(localStorage.getItem('smart_parking_reservations') || '[]');
     reservations.push(currentReservation);
     localStorage.setItem('smart_parking_reservations', JSON.stringify(reservations));
 
-    // Mettre la place en "réservée" sur la carte
+    // Mettre à jour la carte seulement si la réservation est pour aujourd'hui
-    if (window.ParkingMap) {
+    const today   = new Date().toISOString().split('T')[0];
-        window.ParkingMap.setSpotStatus(currentReservation.spotId, 'reserved');
+    const now     = new Date();
+    const resStart = new Date(date + 'T' + startTime);
+    const diffMin  = (resStart - now) / 60000;
+
+    if (date === today && diffMin <= 30 && window.ParkingMap) {
+        window.ParkingMap.setSpotStatus(spotId, 'reserved');
     }
 
-    // Ajouter à l'historique admin
     addToHistory(
         'Réservation',
-        `Place ${currentReservation.spotNumber} réservée par ${currentReservation.userName} - ${currentReservation.price}€`
+        `Place ${currentReservation.spotNumber} réservée le ${date} de ${startTime} à ${endTime} — ${PRICING[duration]}€`
     );
 
     // Réinitialiser le formulaire
@@ -182,95 +206,84 @@ function handleReservationSubmit(e) {
     initDatePicker();
     updatePricePreview();
 
-    // Afficher le modal de confirmation
     showConfirmationModal();
 }
 
+/**
+ * Crée une réservation en mode offline (localStorage)
+ */
+function creerReservationLocale(user, spotId, spot, date, startTime, endTime, duration, vehicle) {
+    return {
+        id:         Date.now(),
+        userId:     user.id,
+        userName:   user.name,
+        spotId:     spotId,
+        spotNumber: spot ? spot.number : spotId,
+        date, startTime, endTime, duration,
+        vehicle:    vehicle.toUpperCase(),
+        price:      PRICING[duration],
+        status:     'active',
+        createdAt:  new Date().toISOString()
+    };
+}
+
 // ============================================
-// MODAL DE CONFIRMATION (remplace le QR code)
+// MODAL DE CONFIRMATION
 // ============================================
 
-/**
- * Initialise les événements du modal de confirmation
- * REMPLACE : initPaymentModal()
- */
 function initConfirmationModal() {
     document.getElementById('closeConfirmationModal')?.addEventListener('click', hideConfirmationModal);
     document.getElementById('closeConfirmationBtn')?.addEventListener('click', hideConfirmationModal);
 }
 
-/**
- * Affiche le modal de confirmation
- * REMPLACE : showPaymentModal() + generateQRCode()
- */
 function showConfirmationModal() {
     if (!currentReservation) return;
 
     const modal = document.getElementById('confirmationModal');
 
-    // Remplir le récapitulatif
     document.getElementById('paySpot').textContent     = 'Place ' + currentReservation.spotNumber;
     document.getElementById('payDate').textContent     = formatDate(currentReservation.date);
     document.getElementById('payTime').textContent     = currentReservation.startTime + ' - ' + currentReservation.endTime;
     document.getElementById('payDuration').textContent = formatDuration(currentReservation.duration);
     document.getElementById('payTotal').textContent    = currentReservation.price + '€';
 
-    // Afficher le modal
     modal.classList.remove('hidden');
 }
 
-/**
- * Cache le modal de confirmation
- * REMPLACE : hidePaymentModal()
- */
 function hideConfirmationModal() {
     document.getElementById('confirmationModal').classList.add('hidden');
 
-    // Rediriger vers "Mes réservations" après fermeture
     if (window.Dashboard) {
         Dashboard.navigateToPage('my-reservations');
         document.querySelector('[data-page="my-reservations"]')?.classList.add('active');
         document.querySelector('[data-page="reservation"]')?.classList.remove('active');
     }
 
-    // Rafraîchir les stats du profil
     if (window.Dashboard) Dashboard.refreshStats();
 }
 
 // ============================================
-// FONCTIONS UTILITAIRES
+// UTILITAIRES
 // ============================================
 
-/**
- * Ajoute une entrée à l'historique
- */
 function addToHistory(action, details) {
     let history = JSON.parse(localStorage.getItem('smart_parking_history') || '[]');
     history.unshift({
         id:        Date.now(),
-        action:    action,
+        action,
-        details:   details,
+        details,
         timestamp: new Date().toISOString()
     });
     if (history.length > 100) history = history.slice(0, 100);
     localStorage.setItem('smart_parking_history', JSON.stringify(history));
 }
 
-/**
- * Formate une date DD/MM/YYYY
- */
 function formatDate(dateString) {
-    const date = new Date(dateString);
+    return new Date(dateString).toLocaleDateString('fr-FR', {
-    return date.toLocaleDateString('fr-FR', {
+        day: '2-digit', month: '2-digit', year: 'numeric'
-        day:   '2-digit',
-        month: '2-digit',
-        year:  'numeric'
     });
 }
 
-/**
- * Formate une durée en minutes vers texte lisible
- */
 function formatDuration(minutes) {
     if (minutes >= 480) return 'Journée (8h)';
     if (minutes >= 60) {
@@ -281,10 +294,4 @@ function formatDuration(minutes) {
     return `${minutes} min`;
 }
 
-// Exporter les fonctions publiques
+window.Reservation = { PRICING, TIME_SLOTS, formatDuration, addToHistory };
-window.Reservation = {
-    PRICING,
-    TIME_SLOTS,
-    formatDuration,
-    addToHistory
-};

pages/dashboard.html

@@ -6,8 +6,7 @@
     <title>Smart Parking - Dashboard</title>
     <link rel="stylesheet" href="../css/style.css">
     <link rel="stylesheet" href="../css/dashboard.css">
-    <!-- SUPPRIMÉ : qrcode.min.js (plus nécessaire) -->
+    <!-- Chart.js retiré car le graphique d'occupation a été supprimé -->
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>
 <body>
     <!-- Header -->
@@ -21,25 +20,19 @@
             </div>
             <nav class="nav">
                 <a href="#map" class="nav-link active" data-page="map">
-                    <span class="nav-icon">🗺️</span>
+                    <span class="nav-icon">🗺️</span>Carte
-                    Carte
                 </a>
                 <a href="#reservation" class="nav-link" data-page="reservation">
-                    <span class="nav-icon">📅</span>
+                    <span class="nav-icon">📅</span>Réservation
-                    Réservation
                 </a>
                 <a href="#my-reservations" class="nav-link" data-page="my-reservations">
-                    <span class="nav-icon">🎫</span>
+                    <span class="nav-icon">🎫</span>Mes réservations
-                    Mes réservations
                 </a>
                 <a href="#profile" class="nav-link" data-page="profile">
-                    <span class="nav-icon">👤</span>
+                    <span class="nav-icon">👤</span>Profil
-                    Profil
                 </a>
-                <!-- Lien admin (visible uniquement pour admin) -->
                 <a href="#admin" class="nav-link admin-only hidden" data-page="admin">
-                    <span class="nav-icon">⚙️</span>
+                    <span class="nav-icon">⚙️</span>Admin
-                    Admin
                 </a>
             </nav>
             <div class="header-right">
@@ -48,24 +41,19 @@
                     <span id="userRole" class="user-role">Client</span>
                 </div>
                 <button id="logoutBtn" class="btn btn-secondary btn-small">
-                    <span class="btn-icon">🚪</span>
+                    <span class="btn-icon">🚪</span>Déconnexion
-                    Déconnexion
                 </button>
             </div>
         </div>
     </header>
 
-    <!-- Main Content -->
     <main class="main">
-        <!-- PAGE: CARTE DES PLACES -->
+
+        <!-- ═══ PAGE : CARTE DES PLACES ═══ -->
         <section id="map" class="page active">
             <div class="container">
-                <h2 class="page-title">
+                <h2 class="page-title"><span class="icon">🗺️</span>Carte du Parking</h2>
-                    <span class="icon">🗺️</span>
-                    Carte du Parking
-                </h2>
 
-                <!-- Statistiques des places -->
                 <div class="stats-grid">
                     <div class="stat-card free">
                         <div class="stat-icon">✅</div>
@@ -97,30 +85,16 @@
                     </div>
                 </div>
 
-                <!-- Carte des places -->
                 <div class="parking-section">
                     <div class="parking-map-container">
                         <h3>Vue du parking</h3>
-                        <div class="parking-map" id="parkingMap">
+                        <div class="parking-map" id="parkingMap"></div>
-                            <!-- Les places seront générées par JS -->
-                        </div>
                         <div class="legend">
-                            <div class="legend-item">
+                            <div class="legend-item"><span class="legend-color free"></span><span>Libre</span></div>
-                                <span class="legend-color free"></span>
+                            <div class="legend-item"><span class="legend-color occupied"></span><span>Occupée</span></div>
-                                <span>Libre</span>
+                            <div class="legend-item"><span class="legend-color reserved"></span><span>Réservée</span></div>
-                            </div>
-                            <div class="legend-item">
-                                <span class="legend-color occupied"></span>
-                                <span>Occupée</span>
-                            </div>
-                            <div class="legend-item">
-                                <span class="legend-color reserved"></span>
-                                <span>Réservée</span>
-                            </div>
                         </div>
                     </div>
-
-                    <!-- Détails de la place sélectionnée -->
                     <div class="spot-details-container">
                         <h3>Détails de la place</h3>
                         <div id="spotDetails" class="spot-details">
@@ -129,42 +103,23 @@
                     </div>
                 </div>
 
-                <!-- Tarifs -->
                 <div class="pricing-section">
                     <h3>💰 Nos tarifs</h3>
                     <div class="pricing-cards">
-                        <div class="pricing-card">
+                        <div class="pricing-card"><h4>30 minutes</h4><span class="price">2€</span></div>
-                            <h4>30 minutes</h4>
+                        <div class="pricing-card"><h4>1 heure</h4><span class="price">3€</span></div>
-                            <span class="price">2€</span>
+                        <div class="pricing-card"><h4>2 heures</h4><span class="price">5€</span></div>
-                        </div>
+                        <div class="pricing-card"><h4>4 heures</h4><span class="price">8€</span></div>
-                        <div class="pricing-card">
+                        <div class="pricing-card"><h4>Journée</h4><span class="price">15€</span></div>
-                            <h4>1 heure</h4>
-                            <span class="price">3€</span>
-                        </div>
-                        <div class="pricing-card">
-                            <h4>2 heures</h4>
-                            <span class="price">5€</span>
-                        </div>
-                        <div class="pricing-card">
-                            <h4>4 heures</h4>
-                            <span class="price">8€</span>
-                        </div>
-                        <div class="pricing-card">
-                            <h4>Journée</h4>
-                            <span class="price">15€</span>
-                        </div>
                     </div>
                 </div>
             </div>
         </section>
 
-        <!-- PAGE: RÉSERVATION -->
+        <!-- ═══ PAGE : RÉSERVATION ═══ -->
         <section id="reservation" class="page hidden">
             <div class="container">
-                <h2 class="page-title">
+                <h2 class="page-title"><span class="icon">📅</span>Réserver une place</h2>
-                    <span class="icon">📅</span>
-                    Réserver une place
-                </h2>
 
                 <div class="reservation-form-container">
                     <form id="reservationForm" class="reservation-form">
@@ -180,7 +135,6 @@
                                 <input type="date" id="resDate" class="form-control" required>
                             </div>
                         </div>
-
                         <div class="form-row">
                             <div class="form-group">
                                 <label for="resStartTime">Heure d'arrivée</label>
@@ -191,34 +145,29 @@
                             <div class="form-group">
                                 <label for="resDuration">Durée</label>
                                 <select id="resDuration" class="form-control" required>
-                                    <option value="30">30 min - 2€</option>
+                                    <option value="30">30 min — 2€</option>
-                                    <option value="60">1h - 3€</option>
+                                    <option value="60">1h — 3€</option>
-                                    <option value="120" selected>2h - 5€</option>
+                                    <option value="120" selected>2h — 5€</option>
-                                    <option value="240">4h - 8€</option>
+                                    <option value="240">4h — 8€</option>
-                                    <option value="480">Journée (8h) - 15€</option>
+                                    <option value="480">Journée (8h) — 15€</option>
                                 </select>
                             </div>
                         </div>
-
                         <div class="form-group">
                             <label for="resVehicle">Plaque d'immatriculation</label>
                             <input type="text" id="resVehicle" class="form-control" placeholder="AB-123-CD" required>
                         </div>
-
                         <div class="price-preview">
                             <span>Prix total :</span>
                             <span id="previewPrice" class="price-amount">5€</span>
                         </div>
-
-                        <!-- MODIFIÉ : bouton "Valider la réservation" au lieu de "Procéder au paiement" -->
                         <button type="submit" class="btn btn-primary btn-block">
-                            <span class="btn-icon">✅</span>
+                            <span class="btn-icon">✅</span>Valider la réservation
-                            Valider la réservation
                         </button>
                     </form>
                 </div>
 
-                <!-- REMPLACÉ : Modal de confirmation (sans QR code) -->
+                <!-- Modal de confirmation -->
                 <div id="confirmationModal" class="modal hidden">
                     <div class="modal-content">
                         <div class="modal-header">
@@ -226,43 +175,22 @@
                             <button class="modal-close" id="closeConfirmationModal">&times;</button>
                         </div>
                         <div class="modal-body">
-                            <!-- Récapitulatif -->
                             <div class="payment-summary">
                                 <h4>Récapitulatif</h4>
-                                <div class="summary-row">
+                                <div class="summary-row"><span>Place :</span><span id="paySpot">-</span></div>
-                                    <span>Place :</span>
+                                <div class="summary-row"><span>Date :</span><span id="payDate">-</span></div>
-                                    <span id="paySpot">-</span>
+                                <div class="summary-row"><span>Heure :</span><span id="payTime">-</span></div>
-                                </div>
+                                <div class="summary-row"><span>Durée :</span><span id="payDuration">-</span></div>
-                                <div class="summary-row">
+                                <div class="summary-row total"><span>Total :</span><span id="payTotal">-</span></div>
-                                    <span>Date :</span>
-                                    <span id="payDate">-</span>
-                                </div>
-                                <div class="summary-row">
-                                    <span>Heure :</span>
-                                    <span id="payTime">-</span>
-                                </div>
-                                <div class="summary-row">
-                                    <span>Durée :</span>
-                                    <span id="payDuration">-</span>
-                                </div>
-                                <div class="summary-row total">
-                                    <span>Total :</span>
-                                    <span id="payTotal">-</span>
-                                </div>
                             </div>
-
-                            <!-- Message de confirmation -->
                             <div class="confirmation-message">
                                 <div class="confirmation-icon">🏷️</div>
                                 <h4>Merci pour votre réservation !</h4>
                                 <p>Votre place est bien réservée.<br>
                                 Vous recevrez votre <strong>badge d'accès dans les 24 heures</strong>.</p>
                             </div>
-
-                            <!-- Bouton fermer -->
                             <button id="closeConfirmationBtn" class="btn btn-primary btn-block">
-                                <span class="btn-icon">✅</span>
+                                <span class="btn-icon">✅</span>Fermer
-                                Fermer
                             </button>
                         </div>
                     </div>
@@ -270,44 +198,30 @@
             </div>
         </section>
 
-        <!-- PAGE: MES RÉSERVATIONS -->
+        <!-- ═══ PAGE : MES RÉSERVATIONS ═══ -->
         <section id="my-reservations" class="page hidden">
             <div class="container">
-                <h2 class="page-title">
+                <h2 class="page-title"><span class="icon">🎫</span>Mes réservations</h2>
-                    <span class="icon">🎫</span>
+                <div id="myReservationsList" class="reservations-list"></div>
-                    Mes réservations
-                </h2>
-
-                <div id="myReservationsList" class="reservations-list">
-                    <!-- Généré par JS -->
-                </div>
-
                 <div id="noReservations" class="empty-state">
                     <span class="empty-icon">📭</span>
-                    <p>Vous n'avez aucune réservation active</p>
+                    <p>Vous n'avez aucune réservation</p>
                     <a href="#reservation" class="btn btn-primary">Faire une réservation</a>
                 </div>
             </div>
         </section>
 
-        <!-- PAGE: PROFIL -->
+        <!-- ═══ PAGE : PROFIL ═══ -->
         <section id="profile" class="page hidden">
             <div class="container">
-                <h2 class="page-title">
+                <h2 class="page-title"><span class="icon">👤</span>Mon profil</h2>
-                    <span class="icon">👤</span>
-                    Mon profil
-                </h2>
-
                 <div class="profile-container">
                     <div class="profile-card">
                         <div class="profile-header">
-                            <div class="profile-avatar">
+                            <div class="profile-avatar"><span id="profileAvatar">👤</span></div>
-                                <span id="profileAvatar">👤</span>
-                            </div>
                             <h3 id="profileName">-</h3>
                             <span id="profileRole" class="role-badge">Client</span>
                         </div>
-
                         <form id="profileForm" class="profile-form">
                             <div class="form-group">
                                 <label>Nom complet</label>
@@ -323,15 +237,14 @@
                             </div>
                             <div class="form-group">
                                 <label>Nouveau mot de passe</label>
-                                <input type="password" id="profileNewPassword" class="form-control" placeholder="Laisser vide pour ne pas changer">
+                                <input type="password" id="profileNewPassword" class="form-control"
+                                    placeholder="Laisser vide pour ne pas changer">
                             </div>
                             <button type="submit" class="btn btn-primary">
-                                <span class="btn-icon">💾</span>
+                                <span class="btn-icon">💾</span>Mettre à jour
-                                Mettre à jour
                             </button>
                         </form>
                     </div>
-
                     <div class="profile-stats">
                         <h3>Statistiques</h3>
                         <div class="stats-cards">
@@ -353,13 +266,10 @@
             </div>
         </section>
 
-        <!-- PAGE: ADMIN (visible uniquement pour admin) -->
+        <!-- ═══ PAGE : ADMIN ═══ -->
         <section id="admin" class="page hidden admin-page">
             <div class="container">
-                <h2 class="page-title">
+                <h2 class="page-title"><span class="icon">⚙️</span>Administration</h2>
-                    <span class="icon">⚙️</span>
-                    Administration
-                </h2>
 
                 <!-- Stats admin -->
                 <div class="admin-stats-grid">
@@ -388,87 +298,66 @@
                         <div class="form-group">
                             <label>Nombre total de places</label>
                             <div class="input-group">
-                                <input type="number" id="adminTotalSpots" class="form-control" min="5" max="50" value="10">
+                                <input type="number" id="adminTotalSpots" class="form-control"
+                                    min="5" max="50" value="10">
                                 <button id="updateSpotsBtn" class="btn btn-primary">Mettre à jour</button>
                             </div>
                         </div>
                     </div>
-                    <div class="admin-places-list" id="adminPlacesList">
+                    <div class="admin-places-list" id="adminPlacesList"></div>
-                        <!-- Généré par JS -->
-                    </div>
                 </div>
 
-                <!-- Gestion des utilisateurs -->
+                <!-- Utilisateurs -->
                 <div class="admin-section">
                     <h3>👥 Utilisateurs</h3>
                     <div class="table-container">
                         <table class="data-table">
                             <thead>
                                 <tr>
-                                    <th>ID</th>
+                                    <th>ID</th><th>Nom</th><th>Email</th>
-                                    <th>Nom</th>
+                                    <th>Téléphone</th><th>Rôle</th><th>Actions</th>
-                                    <th>Email</th>
-                                    <th>Téléphone</th>
-                                    <th>Rôle</th>
-                                    <th>Actions</th>
                                 </tr>
                             </thead>
-                            <tbody id="adminUsersTable">
+                            <tbody id="adminUsersTable"></tbody>
-                                <!-- Généré par JS -->
-                            </tbody>
                         </table>
                     </div>
                 </div>
 
-                <!-- Toutes les réservations -->
+                <!-- Réservations -->
                 <div class="admin-section">
                     <h3>📅 Toutes les réservations</h3>
                     <div class="table-container">
                         <table class="data-table">
                             <thead>
                                 <tr>
-                                    <th>ID</th>
+                                    <th>ID</th><th>Client</th><th>Place</th><th>Date</th>
-                                    <th>Client</th>
+                                    <th>Horaire</th><th>Prix</th><th>Statut</th><th>Actions</th>
-                                    <th>Place</th>
-                                    <th>Date</th>
-                                    <th>Horaire</th>
-                                    <th>Prix</th>
-                                    <th>Statut</th>
-                                    <th>Actions</th>
                                 </tr>
                             </thead>
-                            <tbody id="adminReservationsTable">
+                            <tbody id="adminReservationsTable"></tbody>
-                                <!-- Généré par JS -->
-                            </tbody>
                         </table>
                     </div>
                 </div>
 
-                <!-- Graphique d'occupation -->
+                <!-- ═══ GRAPHIQUE D'OCCUPATION SUPPRIMÉ ici ═══ -->
-                <div class="admin-section">
-                    <h3>📊 Statistiques d'occupation</h3>
-                    <div class="chart-container">
-                        <canvas id="adminOccupancyChart"></canvas>
-                    </div>
-                </div>
 
                 <!-- Historique -->
                 <div class="admin-section">
                     <h3>📜 Historique</h3>
-                    <div class="log-container" id="adminLogContainer">
+                    <div class="log-container" id="adminLogContainer"></div>
-                        <!-- Généré par JS -->
-                    </div>
                 </div>
+
             </div>
         </section>
+
     </main>
 
-    <!-- Toast notifications -->
     <div id="toastContainer" class="toast-container"></div>
 
     <script src="../js/dashboard.js"></script>
     <script src="../js/map.js"></script>
     <script src="../js/reservation.js"></script>
     <script src="../js/admin.js"></script>
+    <!-- Chart.js et admin.js n'utilisent plus le graphique -->
 </body>
 </html>

server/db/database.js

@@ -1,8 +1,10 @@
 /**
  * ============================================
  * DATABASE.JS - Gestion MariaDB
- * Smart Parking v2.0
+ * Smart Parking v3.0
- * AJOUTÉ : expireReservations() — libère auto les places
+ * AJOUTÉ : checkReservationConflict()
+ *          → vérifie les conflits d'horaire
+ *            au lieu de bloquer toute la place
  * ============================================
  */
 
@@ -123,7 +125,7 @@ async function initDatabase() {
                     [i, `SENSOR_${String(i).padStart(3, '0')}`, 'free']
                 );
             }
-            console.log('✅ 10 places créées (toutes libres)');
+            console.log('✅ 10 places créées');
         }
 
     } catch (err) {
@@ -227,6 +229,34 @@ async function createReservation(userId, spotId, date, startTime, endTime, durat
     return { id: result.insertId };
 }
 
+/**
+ * ⭐ NOUVELLE FONCTION — Vérification des conflits d'horaire
+ *
+ * Problème corrigé : avant, quand une place était réservée,
+ * elle restait bloquée pour TOUS les jours et TOUTES les heures.
+ *
+ * Maintenant on vérifie uniquement s'il y a une réservation
+ * qui se chevauche sur la MÊME date et le MÊME créneau horaire.
+ *
+ * Exemple :
+ *   Place 2 réservée aujourd'hui 10h-11h ✅
+ *   Place 2 réservée aujourd'hui 14h-15h ✅ (pas de conflit)
+ *   Place 2 réservée demain 10h-11h       ✅ (pas de conflit)
+ *   Place 2 réservée aujourd'hui 10h30-11h30 ❌ (conflit !)
+ */
+async function checkReservationConflict(spotId, date, startTime, endTime) {
+    const [rows] = await pool.query(`
+        SELECT id FROM reservations
+        WHERE spot_id = ?
+          AND date = ?
+          AND status IN ('active', 'pending')
+          AND start_time < ?
+          AND end_time > ?
+    `, [spotId, date, endTime, startTime]);
+
+    return rows.length > 0;  // true = conflit, false = créneau libre
+}
+
 async function getReservationById(id) {
     const [rows] = await pool.query(
         `SELECT r.*, s.number AS spot_number
@@ -270,16 +300,10 @@ async function updateReservationStatus(id, status) {
 }
 
 /**
- * ⭐ NOUVELLE FONCTION — Expiration automatique des réservations
+ * Expiration automatique des réservations
- *
+ * Appelée toutes les 60 secondes par server.js
- * Cherche toutes les réservations actives dont la date+heure de fin
- * est déjà dépassée, les passe en "completed" et libère les places.
- *
- * Appelée toutes les 60 secondes par server.js.
- * Cela résout le problème des places qui restent "réservées" indéfiniment.
  */
 async function expireReservations() {
-    // Trouver les réservations actives dont l'heure de fin est passée
     const [expiredRows] = await pool.query(`
         SELECT r.id, r.spot_id, r.user_id, s.number AS spot_number
         FROM reservations r
@@ -289,20 +313,14 @@ async function expireReservations() {
     `);
 
     for (const res of expiredRows) {
-        // Passer la réservation en "completed"
         await pool.query(
             "UPDATE reservations SET status = 'completed' WHERE id = ?",
             [res.id]
         );
-
-        // Libérer la place (la passer en "free")
-        // (le capteur Arduino prendra le relais ensuite si une voiture est encore là)
         await pool.query(
             "UPDATE spots SET status = 'free', last_update = NOW() WHERE id = ?",
             [res.spot_id]
         );
-
-        // Ajouter à l'historique
         await pool.query(
             'INSERT INTO history (action, details, user_id) VALUES (?, ?, ?)',
             [
@@ -364,7 +382,7 @@ async function getStats(days = 7) {
 }
 
 // ============================================
-// MQTT EVENTS
+// MQTT
 // ============================================
 
 async function recordMqttEvent(topic, message) {
@@ -388,18 +406,13 @@ module.exports = {
     pool,
     initDatabase,
     closeDatabase,
-    // Utilisateurs
     createUser, getUserByEmail, getUserById, getAllUsers, updateUser, deleteUser,
-    // Places
     createSpot, getAllSpots, getSpotById, updateSpotStatus, deleteAllSpots,
-    // Réservations
+    createReservation, checkReservationConflict,
-    createReservation, getReservationById, getReservationsByUser,
+    getReservationById, getReservationsByUser,
     getAllReservations, updateReservationStatus,
-    expireReservations,   // ← NOUVEAU
+    expireReservations,
-    // Historique
     addHistory, getHistory,
-    // Stats
     recordStats, getStats,
-    // MQTT
     recordMqttEvent
 };

server/routes/api.js

@@ -1,9 +1,10 @@
 /**
  * ============================================
  * API ROUTES - Routes de l'API REST
- * Smart Parking - BTS CIEL IR
+ * Smart Parking v3.0
- * CORRIGÉ : annulation libère bien la place
+ * CORRIGÉ : réservation vérifie les conflits
- *           ajout route /complete pour l'admin
+ *           d'horaire au lieu de bloquer la place
+ *           définitivement
  * ============================================
  */
 
@@ -110,11 +111,7 @@ router.post('/spots/init', authenticateToken, requireAdmin, async (req, res) =>
         const spotCount = Math.min(Math.max(parseInt(req.body.count) || 10, 5), 50);
         await db.deleteAllSpots();
         for (let i = 1; i <= spotCount; i++) {
-            let status = 'free';
+            await db.createSpot(i, `SENSOR_${String(i).padStart(3, '0')}`, 'free');
-            const rand = Math.random();
-            if (rand > 0.85) status = 'reserved';
-            else if (rand > 0.60) status = 'occupied';
-            await db.createSpot(i, `SENSOR_${String(i).padStart(3, '0')}`, status);
         }
         await db.addHistory('Réinitialisation places', `${spotCount} places créées`, req.user.id);
         res.json({ success: true, message: `${spotCount} places créées` });
@@ -145,21 +142,71 @@ router.get('/reservations/all', authenticateToken, requireAdmin, async (req, res
     }
 });
 
+/**
+ * POST /api/reservations
+ *
+ * CORRIGÉ : on ne bloque plus la place entière définitivement.
+ * On vérifie uniquement s'il y a un CONFLIT d'horaire sur
+ * la même date et le même créneau.
+ *
+ * Exemple de ce qui est maintenant possible :
+ *   Place 2 — 10h-11h aujourd'hui    ✅
+ *   Place 2 — 14h-15h aujourd'hui    ✅ (pas de conflit)
+ *   Place 2 — 10h-11h demain         ✅ (pas de conflit)
+ *   Place 2 — 10h30-11h30 aujourd'hui ❌ (conflit !)
+ */
 router.post('/reservations', authenticateToken, async (req, res) => {
     try {
         const { spotId, date, startTime, endTime, duration, vehicle, price } = req.body;
+
         if (!spotId || !date || !startTime || !endTime || !duration || !price)
             return res.status(400).json({ success: false, message: 'Tous les champs sont requis' });
+
         const spot = await db.getSpotById(spotId);
-        if (!spot || spot.status !== 'free')
+        if (!spot)
-            return res.status(409).json({ success: false, message: "Cette place n'est plus disponible" });
+            return res.status(404).json({ success: false, message: 'Place introuvable' });
+
+        // CORRIGÉ : bloquer uniquement si une voiture est physiquement là
+        if (spot.status === 'occupied')
+            return res.status(409).json({ success: false, message: "Une voiture est déjà sur cette place" });
+
+        // CORRIGÉ : vérifier les conflits d'horaire au lieu du statut global
+        const conflict = await db.checkReservationConflict(spotId, date, startTime, endTime);
+        if (conflict)
+            return res.status(409).json({
+                success: false,
+                message: `Cette place est déjà réservée sur ce créneau. Choisissez un autre horaire ou une autre date.`
+            });
+
         const paymentCode = 'PARK' + Date.now().toString().slice(-8);
         const result = await db.createReservation(
             req.user.id, spotId, date, startTime, endTime, duration, vehicle, price, paymentCode
         );
-        await db.updateSpotStatus(spotId, 'reserved');
+
-        await db.addHistory('Nouvelle réservation', `Place ${spot.number} - ${price}EUR`, req.user.id);
+        // On ne change le statut de la place QUE si la réservation est pour aujourd'hui
-        res.status(201).json({ success: true, message: 'Réservation créée', data: { id: result.id, paymentCode } });
+        // et que l'heure de début est maintenant ou dans moins de 30 minutes
+        const now      = new Date();
+        const today    = now.toISOString().split('T')[0];
+        const resStart = new Date(`${date}T${startTime}`);
+        const diffMin  = (resStart - now) / 60000;
+
+        if (date === today && diffMin <= 30) {
+            await db.updateSpotStatus(spotId, 'reserved');
+        }
+        // Pour une réservation future, le statut de la place reste inchangé
+        // Le timer d'expiration (server.js) le mettra à jour au bon moment
+
+        await db.addHistory(
+            'Nouvelle réservation',
+            `Place ${spot.number} réservée le ${date} de ${startTime} à ${endTime} — ${price}EUR`,
+            req.user.id
+        );
+
+        res.status(201).json({
+            success: true,
+            message: 'Réservation créée',
+            data: { id: result.id, paymentCode }
+        });
     } catch (err) {
         console.error('❌ Erreur create reservation:', err.message);
         res.status(500).json({ success: false, message: 'Erreur serveur' });
@@ -168,7 +215,6 @@ router.post('/reservations', authenticateToken, async (req, res) => {
 
 /**
  * PUT /api/reservations/:id/cancel
- * CORRIGÉ : libère désormais la place associée
  */
 router.put('/reservations/:id/cancel', authenticateToken, async (req, res) => {
     try {
@@ -179,10 +225,10 @@ router.put('/reservations/:id/cancel', authenticateToken, async (req, res) => {
             return res.status(403).json({ success: false, message: 'Accès refusé' });
 
         await db.updateReservationStatus(req.params.id, 'cancelled');
-        await db.updateSpotStatus(reservation.spot_id, 'free');   // ← BUG CORRIGÉ ICI
+        await db.updateSpotStatus(reservation.spot_id, 'free');
         await db.addHistory(
             'Annulation réservation',
-            `Reservation #${req.params.id} annulee - place ${reservation.spot_id} liberee`,
+            `Réservation #${req.params.id} annulée — place ${reservation.spot_number} libérée`,
             req.user.id
         );
         res.json({ success: true, message: 'Réservation annulée' });
@@ -193,7 +239,7 @@ router.put('/reservations/:id/cancel', authenticateToken, async (req, res) => {
 });
 
 /**
- * PUT /api/reservations/:id/complete  (admin uniquement)
+ * PUT /api/reservations/:id/complete (admin)
  */
 router.put('/reservations/:id/complete', authenticateToken, requireAdmin, async (req, res) => {
     try {
@@ -205,7 +251,7 @@ router.put('/reservations/:id/complete', authenticateToken, requireAdmin, async
         await db.updateSpotStatus(reservation.spot_id, 'free');
         await db.addHistory(
             'Réservation terminée',
-            `Reservation #${req.params.id} terminee - place ${reservation.spot_id} liberee`,
+            `Réservation #${req.params.id} terminée — place ${reservation.spot_number} libérée`,
             req.user.id
         );
         res.json({ success: true, message: 'Réservation terminée' });
@@ -221,11 +267,11 @@ router.put('/reservations/:id/complete', authenticateToken, requireAdmin, async
 
 router.get('/stats', authenticateToken, async (req, res) => {
     try {
-        const spots = await db.getAllSpots();
+        const spots        = await db.getAllSpots();
-        const total = spots.length;
+        const total        = spots.length;
-        const free  = spots.filter(s => s.status === 'free').length;
+        const free         = spots.filter(s => s.status === 'free').length;
-        const occupied = spots.filter(s => s.status === 'occupied').length;
+        const occupied     = spots.filter(s => s.status === 'occupied').length;
-        const reserved = spots.filter(s => s.status === 'reserved').length;
+        const reserved     = spots.filter(s => s.status === 'reserved').length;
         const occupancyRate = total > 0 ? Math.round(((occupied + reserved) / total) * 100) : 0;
         res.json({ success: true, data: { total, free, occupied, reserved, occupancyRate } });
     } catch (err) {
@@ -244,7 +290,7 @@ router.get('/history', authenticateToken, requireAdmin, async (req, res) => {
 });
 
 router.get('/status', (_req, res) => {
-    res.json({ success: true, message: 'Smart Parking API operationnelle', version: '1.0.0', timestamp: new Date().toISOString() });
+    res.json({ success: true, message: 'Smart Parking API opérationnelle', version: '3.0.0', timestamp: new Date().toISOString() });
 });
 
 module.exports = router;