From f46a5d96528cbcef2332554c95c635ba24c9261e Mon Sep 17 00:00:00 2001
From: Xor290 <free6nk33@gmail.com>
Date: Wed, 21 Jan 2026 16:26:15 +0100
Subject: [PATCH] chore: add create user route

---
 backend/gestion/db/db_alert.go                |   3 +-
 backend/gestion/docker-compose.yml            |  51 ++
 backend/gestion/handlers/alert.go             |  12 +-
 backend/gestion/handlers/auth.go              |  55 +-
 backend/gestion/routes/routes.go              |   1 +
 frontend-prep/src/api/api.ts                  |   2 +-
 frontend-prep/src/api/api_admin.ts            |  47 +-
 frontend-prep/src/api/api_cabine.ts           |   2 +-
 frontend-prep/src/api/api_delivery.ts         |   2 +-
 .../src/components/ProductDetailsModal.tsx    | 612 ++++++++++--------
 .../src/pages/AdminAlerts/AdminAlerts.tsx     |   6 +-
 .../src/pages/AdminUsers/AdminUsers.css       | 153 +++++
 .../src/pages/AdminUsers/AdminUsers.tsx       | 247 ++++++-
 .../src/pages/CabineAlert/CabineAlerts.css    |   8 +-
 .../src/pages/CabineAlert/CabineAlerts.tsx    |   6 +-
 .../src/pages/User/ProductDetail.tsx          | 480 +++++++-------
 16 files changed, 1160 insertions(+), 527 deletions(-)
 create mode 100644 backend/gestion/docker-compose.yml

diff --git a/backend/gestion/db/db_alert.go b/backend/gestion/db/db_alert.go
index 820d85da..282f33e9 100644
--- a/backend/gestion/db/db_alert.go
+++ b/backend/gestion/db/db_alert.go
@@ -68,8 +68,7 @@ func (d *Database) GetAllAlerts() ([]models.AlertPolicy, error) {
 func (d *Database) DeleteAlertPolicy(id int) error {
 
 	query := `
-		UPDATE alerte_policy
-		SET status = 'false', updated_at = CURRENT_TIMESTAMP
+		DELETE FROM alerte_policy
 		WHERE id = $1
 	`
 	_, err := d.Exec(query, id)
diff --git a/backend/gestion/docker-compose.yml b/backend/gestion/docker-compose.yml
new file mode 100644
index 00000000..7820ec89
--- /dev/null
+++ b/backend/gestion/docker-compose.yml
@@ -0,0 +1,51 @@
+services:
+    postgres:
+        image: postgres:16
+        container_name: gestion_postgres
+        restart: unless-stopped
+        environment:
+            POSTGRES_USER: ${DB_USER}
+            POSTGRES_PASSWORD: ${DB_PASSWORD}
+            POSTGRES_DB: ${DB_NAME}
+        ports:
+            - "${DB_PORT}:5432"
+        volumes:
+            - postgres_data:/var/lib/postgresql/data
+        networks:
+            - gestion-net
+        healthcheck:
+            test: ["CMD-SHELL", "pg_isready -U ${DB_USER}"]
+            interval: 10s
+            timeout: 5s
+            retries: 5
+
+    redis:
+        image: redis:7
+        container_name: gestion_redis
+        restart: unless-stopped
+        command:
+            [
+                "redis-server",
+                "--appendonly",
+                "yes",
+                "--requirepass",
+                "${REDIS_PASSWORD}",
+            ]
+        ports:
+            - "${REDIS_PORT}:6379"
+        volumes:
+            - redis_data:/data
+        networks:
+            - gestion-net
+        healthcheck:
+            test: ["CMD", "redis-cli", "--raw", "incr", "ping"]
+            interval: 10s
+            timeout: 5s
+            retries: 5
+
+networks:
+    gestion-net:
+
+volumes:
+    postgres_data:
+    redis_data:
diff --git a/backend/gestion/handlers/alert.go b/backend/gestion/handlers/alert.go
index 4d70e01a..34a062f3 100644
--- a/backend/gestion/handlers/alert.go
+++ b/backend/gestion/handlers/alert.go
@@ -46,7 +46,11 @@ func DeleteAlert(c *gin.Context) {
 		c.JSON(http.StatusBadRequest, gin.H{"error": "ID d'alerte invalide"})
 		return
 	}
-
+	userRole := c.GetString("role")
+	if userRole != "livreur" && userRole != "admin" {
+		c.JSON(http.StatusForbidden, gin.H{"error": "Accès réservé aux livreurs"})
+		return
+	}
 	err = database.DeleteAlertPolicy(alertID)
 	if err != nil {
 		c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
@@ -68,7 +72,11 @@ func GetAlert(c *gin.Context) {
 		c.JSON(http.StatusBadRequest, gin.H{"error": "ID d'alerte invalide"})
 		return
 	}
-
+	userRole := c.GetString("role")
+	if userRole != "livreur" && userRole != "admin" && userRole != "cabine" {
+		c.JSON(http.StatusForbidden, gin.H{"error": "Accès réservé aux livreurs et aux administrateurs"})
+		return
+	}
 	alert, err := database.GetAlertPolicy(alertID)
 	if err != nil {
 		c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
diff --git a/backend/gestion/handlers/auth.go b/backend/gestion/handlers/auth.go
index 743368a7..579e6277 100644
--- a/backend/gestion/handlers/auth.go
+++ b/backend/gestion/handlers/auth.go
@@ -607,8 +607,14 @@ func HealthCheck(c *gin.Context) {
 // GetAllUsers récupère tous les utilisateurs (Admin only)
 func GetAllUsers(c *gin.Context) {
 	database := c.MustGet("database").(*db.Database)
+	userRole := c.GetString("role")
 
+	if userRole != "admin" && userRole != "cabine" {
+		c.JSON(http.StatusForbidden, gin.H{"error": "Accès réservé aux livreurs et aux administrateurs"})
+		return
+	}
 	users, err := database.GetAllUsers()
+
 	if err != nil {
 		log.Printf("❌ [GET_ALL_USERS] Erreur: %v", err)
 		c.JSON(http.StatusInternalServerError, gin.H{"error": "Erreur récupération"})
@@ -634,7 +640,11 @@ func GetAllUsers(c *gin.Context) {
 
 func GetAllDeliveryMen(c *gin.Context) {
 	database := c.MustGet("database").(*db.Database)
-
+	userRole := c.GetString("role")
+	if userRole != "cabine" && userRole != "admin" {
+		c.JSON(http.StatusForbidden, gin.H{"error": "Accès réservé aux livreurs et aux administrateurs"})
+		return
+	}
 	users, err := database.GetAllDeliveryMen()
 	if err != nil {
 		log.Printf("❌ [GET_ALL_USERS] Erreur: %v", err)
@@ -662,7 +672,11 @@ func GetAllDeliveryMen(c *gin.Context) {
 // GET /api/v1/admin/clients
 func GetAllClients(c *gin.Context) {
 	database := c.MustGet("database").(*db.Database)
-
+	userRole := c.GetString("role")
+	if userRole != "cabine" && userRole != "admin" {
+		c.JSON(http.StatusForbidden, gin.H{"error": "Accès réservé aux livreurs et aux administrateurs"})
+		return
+	}
 	clients, err := database.GetAllClients()
 	if err != nil {
 		log.Printf("❌ [GET_ALL_CLIENTS] Erreur: %v", err)
@@ -705,7 +719,11 @@ func DeleteUser(c *gin.Context) {
 		c.JSON(http.StatusBadRequest, gin.H{"error": "ID invalide"})
 		return
 	}
-
+	userRole := c.GetString("role")
+	if userRole != "admin" {
+		c.JSON(http.StatusForbidden, gin.H{"error": "Accès réservé aux livreurs et aux administrateurs"})
+		return
+	}
 	err = database.DeleteUser(id)
 	if err != nil {
 		log.Printf("❌ [DELETE_USER] Erreur: %v", err)
@@ -728,7 +746,11 @@ func DeleteClient(c *gin.Context) {
 		c.JSON(http.StatusBadRequest, gin.H{"error": "ID invalide"})
 		return
 	}
-
+	userRole := c.GetString("role")
+	if userRole != "cabine" && userRole != "admin" {
+		c.JSON(http.StatusForbidden, gin.H{"error": "Accès réservé aux livreurs et aux administrateurs"})
+		return
+	}
 	err = database.DeleteClient(id)
 	if err != nil {
 		log.Printf("❌ [DELETE_CLIENT] Erreur: %v", err)
@@ -739,3 +761,28 @@ func DeleteClient(c *gin.Context) {
 	log.Printf("✅ [DELETE_CLIENT] Client %d supprimé", id)
 	c.JSON(http.StatusOK, gin.H{"message": "Client supprimé"})
 }
+
+func CreateUser(c *gin.Context) {
+	database := c.MustGet("database").(*db.Database)
+
+	var user models.User
+	if err := c.ShouldBindJSON(&user); err != nil {
+		log.Printf("❌ [CREATE_USER] Erreur de liaison JSON: %v", err)
+		c.JSON(http.StatusBadRequest, gin.H{"error": "Erreur de liaison JSON"})
+		return
+	}
+	userRole := c.GetString("role")
+	if userRole != "cabine" && userRole != "admin" {
+		c.JSON(http.StatusForbidden, gin.H{"error": "Accès réservé aux livreurs et aux administrateurs"})
+		return
+	}
+	err := database.CreateUser(&user)
+	if err != nil {
+		log.Printf("❌ [CREATE_USER] Erreur: %v", err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": "Erreur création"})
+		return
+	}
+
+	log.Printf("✅ [CREATE_USER] Utilisateur %d créé", user.ID)
+	c.JSON(http.StatusCreated, gin.H{"message": "Utilisateur créé"})
+}
diff --git a/backend/gestion/routes/routes.go b/backend/gestion/routes/routes.go
index ff171efe..a46a3cbf 100644
--- a/backend/gestion/routes/routes.go
+++ b/backend/gestion/routes/routes.go
@@ -127,6 +127,7 @@ func SetupRoutes(router *gin.Engine, database *db.Database, geoService *services
 		adminGroupV2.PUT("/users/:id", handlers.UpdateUserByAdmin)     // ✅ Modifier un user
 		adminGroupV2.DELETE("/clients/:id", handlers.DeleteClient)
 		adminGroupV2.DELETE("/users/:id", handlers.DeleteUser)
+		adminGroupV2.POST("/users", handlers.CreateUser)
 		// Get location livreur
 		adminGroupV2.GET("/commands/:id/deliveryman/location", handlers.GetDeliverymanLocationForCommand)
 		// ============================================
diff --git a/frontend-prep/src/api/api.ts b/frontend-prep/src/api/api.ts
index 3681e2ca..964ef90f 100644
--- a/frontend-prep/src/api/api.ts
+++ b/frontend-prep/src/api/api.ts
@@ -5,7 +5,7 @@
 // ✅ loginUser et registerUser retournent AuthResponse
 // ✅ sessionStorage (pas localStorage)
 
-const API_URL = "/api/v1";
+const API_URL = "http://localhost:8080/api/v1";
 import type {
     ConfirmReceptionResponse,
     CheckoutCartResponse,
diff --git a/frontend-prep/src/api/api_admin.ts b/frontend-prep/src/api/api_admin.ts
index 4229774e..c9058a56 100644
--- a/frontend-prep/src/api/api_admin.ts
+++ b/frontend-prep/src/api/api_admin.ts
@@ -15,7 +15,7 @@ import type {
     DeliveryPersonDetails,
     DeliveryPersonStats,
 } from "./api_admin_types";
-const API_URL = "/api/v2";
+const API_URL = "http://localhost:8080/api/v2";
 
 // ============================================
 // 🔐 TYPES - ADMIN
@@ -2583,6 +2583,50 @@ export const deleteAlertAdmin = async (
     }
 };
 
+export const CreateUser = async (
+    username: string,
+    password: string,
+    role: string,
+) => {
+    try {
+        const token = sessionStorage.getItem("admin_token");
+        const response = await fetch(`${API_URL}/admin/protected/users`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: `Bearer ${token}`,
+            },
+            body: JSON.stringify({ username, password, role }),
+        });
+
+        const data = await response.json();
+
+        if (!response.ok) {
+            console.error("❌ [CREATE_USER] Erreur API:", data);
+            return {
+                success: false,
+                error: data.error || "Erreur création utilisateur",
+            };
+        }
+
+        console.log("✅ [CREATE_USER] Utilisateur créé avec succès");
+
+        return {
+            success: true,
+            message: data.message || "Utilisateur créé avec succès",
+        };
+    } catch (error) {
+        console.error("❌ [CREATE_USER] Erreur fetch:", error);
+        return {
+            success: false,
+            error:
+                error instanceof Error
+                    ? error.message
+                    : "Erreur réseau inconnue",
+        };
+    }
+};
+
 // ============================================
 // 🔄 EXPORT PAR DÉFAUT
 // ============================================
@@ -2592,6 +2636,7 @@ export default {
     registerAdmin,
     loginAdmin,
     logoutAdmin,
+    CreateUser,
 
     // JWT Utils
     extractAdminUsernameFromToken,
diff --git a/frontend-prep/src/api/api_cabine.ts b/frontend-prep/src/api/api_cabine.ts
index 4b97222b..dec754b5 100644
--- a/frontend-prep/src/api/api_cabine.ts
+++ b/frontend-prep/src/api/api_cabine.ts
@@ -5,7 +5,7 @@
 // ✅ Utilise /api/v1/cabine/* endpoints uniquement
 // ✅ sessionStorage pour la persistance
 
-const API_URL = "/api/v1/cabine";
+const API_URL = "http://localhost:8080/api/v1/cabine";
 import type {
     DeliveryPerson,
     DeliveryPersonsStats,
diff --git a/frontend-prep/src/api/api_delivery.ts b/frontend-prep/src/api/api_delivery.ts
index 2f233d2f..c1eba814 100644
--- a/frontend-prep/src/api/api_delivery.ts
+++ b/frontend-prep/src/api/api_delivery.ts
@@ -4,7 +4,7 @@
 // ✅ Fonctions helper pour le dashboard livreur
 // ✅ Utilise /api/v1/livreur/* endpoints
 
-const API_URL = "/api/v1/livreur";
+const API_URL = "http://localhost:8080/api/v1/livreur";
 
 // ============================================
 // 🔐 TYPES - LIVREUR
diff --git a/frontend-prep/src/components/ProductDetailsModal.tsx b/frontend-prep/src/components/ProductDetailsModal.tsx
index be32d478..99b8ac3e 100644
--- a/frontend-prep/src/components/ProductDetailsModal.tsx
+++ b/frontend-prep/src/components/ProductDetailsModal.tsx
@@ -5,296 +5,358 @@
 // ✅ Galerie de médias (images/vidéos)
 // ✅ Informations complètes
 
-import React, { useState } from 'react';
-import { 
-  X, 
-  Package, 
-  DollarSign, 
-  Box, 
-  Calendar,
-  ChevronLeft,
-  ChevronRight,
-  Image as ImageIcon,
-  Video as VideoIcon,
-  Play
-} from 'lucide-react';
-import type { Product } from '../api/api_admin_types';  // ✅ CORRIGÉ
-import './ProductModal.css';
+import React, { useState } from "react";
+import {
+    X,
+    Package,
+    DollarSign,
+    Box,
+    Calendar,
+    ChevronLeft,
+    ChevronRight,
+    Image as ImageIcon,
+    Video as VideoIcon,
+    Play,
+} from "lucide-react";
+import type { Product } from "../api/api_admin_types"; // ✅ CORRIGÉ
+import "./ProductModal.css";
 
 interface ProductDetailsModalProps {
-  product: Product;
-  onClose: () => void;
+    product: Product;
+    onClose: () => void;
 }
 
-const ProductDetailsModal: React.FC<ProductDetailsModalProps> = ({ product, onClose }) => {
-  // ============================================
-  // 📝 STATE
-  // ============================================
-  const [currentMediaIndex, setCurrentMediaIndex] = useState(0);
+const ProductDetailsModal: React.FC<ProductDetailsModalProps> = ({
+    product,
+    onClose,
+}) => {
+    // ============================================
+    // 📝 STATE
+    // ============================================
+    const [currentMediaIndex, setCurrentMediaIndex] = useState(0);
 
-  // ============================================
-  // 🎨 HELPER FUNCTIONS
-  // ============================================
-  const getCategoryLabel = (category: string): string => {
-    switch (category) {
-      case 'weed&hash': return 'Weed & Hash';
-      case 'zipette&co': return 'Zipette & Co';
-      case 'gros&semi': return 'Gros & Semi';
-      default: return category;
-    }
-  };
+    // ============================================
+    // 🎨 HELPER FUNCTIONS
+    // ============================================
+    const getCategoryLabel = (category: string): string => {
+        switch (category) {
+            case "weed&hash":
+                return "Weed & Hash";
+            case "zipette&co":
+                return "Zipette & Co";
+            case "gros&semi":
+                return "Gros & Semi";
+            default:
+                return category;
+        }
+    };
 
-  const formatDate = (dateString?: string): string => {
-    if (!dateString) return 'N/A';
-    const date = new Date(dateString);
-    return date.toLocaleDateString('fr-FR', {
-      day: '2-digit',
-      month: 'long',
-      year: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit'
-    });
-  };
+    const formatDate = (dateString?: string): string => {
+        if (!dateString) return "N/A";
+        const date = new Date(dateString);
+        return date.toLocaleDateString("fr-FR", {
+            day: "2-digit",
+            month: "long",
+            year: "numeric",
+            hour: "2-digit",
+            minute: "2-digit",
+        });
+    };
 
-  const hasMedia = product.media && product.media.length > 0;
-  const currentMedia = hasMedia && product.media ? product.media[currentMediaIndex] : null;
+    const hasMedia = product.media && product.media.length > 0;
+    const currentMedia =
+        hasMedia && product.media ? product.media[currentMediaIndex] : null;
 
-  const nextMedia = () => {
-    if (hasMedia && product.media && currentMediaIndex < product.media.length - 1) {
-      setCurrentMediaIndex(currentMediaIndex + 1);
-    }
-  };
+    const nextMedia = () => {
+        if (
+            hasMedia &&
+            product.media &&
+            currentMediaIndex < product.media.length - 1
+        ) {
+            setCurrentMediaIndex(currentMediaIndex + 1);
+        }
+    };
 
-  const prevMedia = () => {
-    if (hasMedia && currentMediaIndex > 0) {
-      setCurrentMediaIndex(currentMediaIndex - 1);
-    }
-  };
+    const prevMedia = () => {
+        if (hasMedia && currentMediaIndex > 0) {
+            setCurrentMediaIndex(currentMediaIndex - 1);
+        }
+    };
 
-  // ============================================
-  // 🎨 RENDER
-  // ============================================
-  return (
-    <>
-      <div className="modal-overlay" onClick={onClose} />
-      <div className="product-modal details-modal">
-        {/* Header */}
-        <div className="modal-header">
-          <div className="header-title-section">
-            <Package size={24} className="header-icon" />
-            <div>
-              <h2>{product.name}</h2>
-              <p className="modal-subtitle">{getCategoryLabel(product.category)}</p>
-            </div>
-          </div>
-          <button className="close-modal" onClick={onClose}>
-            <X size={24} />
-          </button>
-        </div>
-
-        {/* Content */}
-        <div className="modal-content details-content">
-          {/* Galerie de médias */}
-          {hasMedia && (
-            <div className="media-gallery">
-              <div className="media-viewer">
-                {currentMedia?.type === 'image' ? (
-                  <img 
-                    src={`http://localhost:8080${currentMedia.url}`}
-                    alt={product.name}
-                    className="media-display"
-                  />
-                ) : currentMedia?.type === 'video' ? (
-                  <div className="video-container">
-                    <video 
-                      src={`http://localhost:8080${currentMedia.url}`}
-                      controls
-                      className="media-display"
-                    >
-                      Votre navigateur ne supporte pas la lecture de vidéos.
-                    </video>
-                  </div>
-                ) : (
-                  <div className="media-placeholder">
-                    <Package size={64} />
-                    <p>Aucun média disponible</p>
-                  </div>
-                )}
-
-                {/* Navigation */}
-                {product.media && product.media.length > 1 && (
-                  <>
-                    <button 
-                      className="media-nav prev"
-                      onClick={prevMedia}
-                      disabled={currentMediaIndex === 0}
-                    >
-                      <ChevronLeft size={24} />
-                    </button>
-                    <button 
-                      className="media-nav next"
-                      onClick={nextMedia}
-                      disabled={currentMediaIndex === product.media.length - 1}
-                    >
-                      <ChevronRight size={24} />
-                    </button>
-                  </>
-                )}
-
-                {/* Compteur */}
-                <div className="media-counter">
-                  {currentMediaIndex + 1} / {product.media?.length || 0}
-                </div>
-              </div>
-
-              {/* Miniatures */}
-              {product.media && product.media.length > 1 && (
-                <div className="media-thumbnails">
-                  {product.media.map((media, index) => (
-                    <button
-                      key={index}
-                      className={`thumbnail ${index === currentMediaIndex ? 'active' : ''}`}
-                      onClick={() => setCurrentMediaIndex(index)}
-                    >
-                      {media.type === 'image' ? (
-                        <img 
-                          src={`http://localhost:8080${media.url}`}
-                          alt={`Media ${index + 1}`}
-                        />
-                      ) : (
-                        <div className="video-thumb">
-                          <Play size={20} />
+    // ============================================
+    // 🎨 RENDER
+    // ============================================
+    return (
+        <>
+            <div className="modal-overlay" onClick={onClose} />
+            <div className="product-modal details-modal">
+                {/* Header */}
+                <div className="modal-header">
+                    <div className="header-title-section">
+                        <Package size={24} className="header-icon" />
+                        <div>
+                            <h2>{product.name}</h2>
+                            <p className="modal-subtitle">
+                                {getCategoryLabel(product.category)}
+                            </p>
                         </div>
-                      )}
-                    </button>
-                  ))}
-                </div>
-              )}
-            </div>
-          )}
-
-          {/* Pas de médias */}
-          {!hasMedia && (
-            <div className="no-media-placeholder">
-              <ImageIcon size={64} />
-              <p>Aucun média disponible pour ce produit</p>
-            </div>
-          )}
-
-          {/* Informations détaillées */}
-          <div className="details-grid">
-            {/* Description */}
-            <div className="detail-section full-width">
-              <h3 className="section-title">
-                <Package size={18} />
-                Description
-              </h3>
-              <p className="detail-description">{product.description}</p>
-            </div>
-
-            {/* Stock */}
-            <div className="detail-section">
-              <h3 className="section-title">
-                <Box size={18} />
-                Stock Disponible
-              </h3>
-              <div className={`stock-badge ${product.stock > 0 ? 'in-stock' : 'out-of-stock'}`}>
-                {product.stock}g
-              </div>
-            </div>
-
-            {/* Catégorie */}
-            <div className="detail-section">
-              <h3 className="section-title">
-                <Package size={18} />
-                Catégorie
-              </h3>
-              <div className="category-badge">
-                {getCategoryLabel(product.category)}
-              </div>
-            </div>
-
-            {/* Prix */}
-            <div className="detail-section full-width">
-              <h3 className="section-title">
-                <DollarSign size={18} />
-                Tarifs
-              </h3>
-              <div className="prices-table">
-                {product.prices && product.prices.length > 0 ? (
-                  product.prices.map((price, index) => (
-                    <div key={index} className="price-row-display">
-                      <div className="price-quantity">
-                        <span className="quantity-value">{price.quantity}g</span>
-                      </div>
-                      <div className="price-arrow">→</div>
-                      <div className="price-amount">
-                        <span className="amount-value">{price.price.toFixed(2)}€</span>
-                      </div>
                     </div>
-                  ))
-                ) : (
-                  <p className="no-data">Aucun tarif défini</p>
-                )}
-              </div>
-            </div>
-
-            {/* Statistiques médias */}
-            {hasMedia && product.media && (
-              <div className="detail-section full-width">
-                <h3 className="section-title">
-                  <ImageIcon size={18} />
-                  Médias
-                </h3>
-                <div className="media-stats">
-                  <div className="media-stat">
-                    <ImageIcon size={20} />
-                    <span>{product.media.filter(m => m.type === 'image').length} Image{product.media.filter(m => m.type === 'image').length > 1 ? 's' : ''}</span>
-                  </div>
-                  <div className="media-stat">
-                    <VideoIcon size={20} />
-                    <span>{product.media.filter(m => m.type === 'video').length} Vidéo{product.media.filter(m => m.type === 'video').length > 1 ? 's' : ''}</span>
-                  </div>
+                    <button className="close-modal" onClick={onClose}>
+                        <X size={24} />
+                    </button>
                 </div>
-              </div>
-            )}
 
-            {/* Dates */}
-            {product.created_at && (
-              <div className="detail-section">
-                <h3 className="section-title">
-                  <Calendar size={18} />
-                  Créé le
-                </h3>
-                <p className="date-text">{formatDate(product.created_at)}</p>
-              </div>
-            )}
+                {/* Content */}
+                <div className="modal-content details-content">
+                    {/* Galerie de médias */}
+                    {hasMedia && (
+                        <div className="media-gallery">
+                            <div className="media-viewer">
+                                {currentMedia?.type === "image" ? (
+                                    <img
+                                        src={`http://localhost:8080${currentMedia.url}`}
+                                        alt={product.name}
+                                        className="media-display"
+                                    />
+                                ) : currentMedia?.type === "video" ? (
+                                    <div className="video-container">
+                                        <video
+                                            src={`http://localhost:8080${currentMedia.url}`}
+                                            controls
+                                            className="media-display"
+                                        >
+                                            Votre navigateur ne supporte pas la
+                                            lecture de vidéos.
+                                        </video>
+                                    </div>
+                                ) : (
+                                    <div className="media-placeholder">
+                                        <Package size={64} />
+                                        <p>Aucun média disponible</p>
+                                    </div>
+                                )}
 
-            {product.updated_at && (
-              <div className="detail-section">
-                <h3 className="section-title">
-                  <Calendar size={18} />
-                  Modifié le
-                </h3>
-                <p className="date-text">{formatDate(product.updated_at)}</p>
-              </div>
-            )}
-          </div>
-        </div>
+                                {/* Navigation */}
+                                {product.media && product.media.length > 1 && (
+                                    <>
+                                        <button
+                                            className="media-nav prev"
+                                            onClick={prevMedia}
+                                            disabled={currentMediaIndex === 0}
+                                        >
+                                            <ChevronLeft size={24} />
+                                        </button>
+                                        <button
+                                            className="media-nav next"
+                                            onClick={nextMedia}
+                                            disabled={
+                                                currentMediaIndex ===
+                                                product.media.length - 1
+                                            }
+                                        >
+                                            <ChevronRight size={24} />
+                                        </button>
+                                    </>
+                                )}
 
-        {/* Footer */}
-        <div className="modal-actions">
-          <button 
-            type="button" 
-            className="action-button primary full-width"
-            onClick={onClose}
-          >
-            Fermer
-          </button>
-        </div>
-      </div>
-    </>
-  );
+                                {/* Compteur */}
+                                <div className="media-counter">
+                                    {currentMediaIndex + 1} /{" "}
+                                    {product.media?.length || 0}
+                                </div>
+                            </div>
+
+                            {/* Miniatures */}
+                            {product.media && product.media.length > 1 && (
+                                <div className="media-thumbnails">
+                                    {product.media.map((media, index) => (
+                                        <button
+                                            key={index}
+                                            className={`thumbnail ${index === currentMediaIndex ? "active" : ""}`}
+                                            onClick={() =>
+                                                setCurrentMediaIndex(index)
+                                            }
+                                        >
+                                            {media.type === "image" ? (
+                                                <img
+                                                    src={`http://localhost:8080${media.url}`}
+                                                    alt={`Media ${index + 1}`}
+                                                />
+                                            ) : (
+                                                <div className="video-thumb">
+                                                    <Play size={20} />
+                                                </div>
+                                            )}
+                                        </button>
+                                    ))}
+                                </div>
+                            )}
+                        </div>
+                    )}
+
+                    {/* Pas de médias */}
+                    {!hasMedia && (
+                        <div className="no-media-placeholder">
+                            <ImageIcon size={64} />
+                            <p>Aucun média disponible pour ce produit</p>
+                        </div>
+                    )}
+
+                    {/* Informations détaillées */}
+                    <div className="details-grid">
+                        {/* Description */}
+                        <div className="detail-section full-width">
+                            <h3 className="section-title">
+                                <Package size={18} />
+                                Description
+                            </h3>
+                            <p className="detail-description">
+                                {product.description}
+                            </p>
+                        </div>
+
+                        {/* Stock */}
+                        <div className="detail-section">
+                            <h3 className="section-title">
+                                <Box size={18} />
+                                Stock Disponible
+                            </h3>
+                            <div
+                                className={`stock-badge ${product.stock > 0 ? "in-stock" : "out-of-stock"}`}
+                            >
+                                {product.stock}g
+                            </div>
+                        </div>
+
+                        {/* Catégorie */}
+                        <div className="detail-section">
+                            <h3 className="section-title">
+                                <Package size={18} />
+                                Catégorie
+                            </h3>
+                            <div className="category-badge">
+                                {getCategoryLabel(product.category)}
+                            </div>
+                        </div>
+
+                        {/* Prix */}
+                        <div className="detail-section full-width">
+                            <h3 className="section-title">
+                                <DollarSign size={18} />
+                                Tarifs
+                            </h3>
+                            <div className="prices-table">
+                                {product.prices && product.prices.length > 0 ? (
+                                    product.prices.map((price, index) => (
+                                        <div
+                                            key={index}
+                                            className="price-row-display"
+                                        >
+                                            <div className="price-quantity">
+                                                <span className="quantity-value">
+                                                    {price.quantity}g
+                                                </span>
+                                            </div>
+                                            <div className="price-arrow">→</div>
+                                            <div className="price-amount">
+                                                <span className="amount-value">
+                                                    {price.price.toFixed(2)}€
+                                                </span>
+                                            </div>
+                                        </div>
+                                    ))
+                                ) : (
+                                    <p className="no-data">
+                                        Aucun tarif défini
+                                    </p>
+                                )}
+                            </div>
+                        </div>
+
+                        {/* Statistiques médias */}
+                        {hasMedia && product.media && (
+                            <div className="detail-section full-width">
+                                <h3 className="section-title">
+                                    <ImageIcon size={18} />
+                                    Médias
+                                </h3>
+                                <div className="media-stats">
+                                    <div className="media-stat">
+                                        <ImageIcon size={20} />
+                                        <span>
+                                            {
+                                                product.media.filter(
+                                                    (m) => m.type === "image",
+                                                ).length
+                                            }{" "}
+                                            Image
+                                            {product.media.filter(
+                                                (m) => m.type === "image",
+                                            ).length > 1
+                                                ? "s"
+                                                : ""}
+                                        </span>
+                                    </div>
+                                    <div className="media-stat">
+                                        <VideoIcon size={20} />
+                                        <span>
+                                            {
+                                                product.media.filter(
+                                                    (m) => m.type === "video",
+                                                ).length
+                                            }{" "}
+                                            Vidéo
+                                            {product.media.filter(
+                                                (m) => m.type === "video",
+                                            ).length > 1
+                                                ? "s"
+                                                : ""}
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+
+                        {/* Dates */}
+                        {product.created_at && (
+                            <div className="detail-section">
+                                <h3 className="section-title">
+                                    <Calendar size={18} />
+                                    Créé le
+                                </h3>
+                                <p className="date-text">
+                                    {formatDate(product.created_at)}
+                                </p>
+                            </div>
+                        )}
+
+                        {product.updated_at && (
+                            <div className="detail-section">
+                                <h3 className="section-title">
+                                    <Calendar size={18} />
+                                    Modifié le
+                                </h3>
+                                <p className="date-text">
+                                    {formatDate(product.updated_at)}
+                                </p>
+                            </div>
+                        )}
+                    </div>
+                </div>
+
+                {/* Footer */}
+                <div className="modal-actions">
+                    <button
+                        type="button"
+                        className="action-button primary full-width"
+                        onClick={onClose}
+                    >
+                        Fermer
+                    </button>
+                </div>
+            </div>
+        </>
+    );
 };
 
-export default ProductDetailsModal;
\ No newline at end of file
+export default ProductDetailsModal;
diff --git a/frontend-prep/src/pages/AdminAlerts/AdminAlerts.tsx b/frontend-prep/src/pages/AdminAlerts/AdminAlerts.tsx
index 4d4887a0..fbfdc8f6 100644
--- a/frontend-prep/src/pages/AdminAlerts/AdminAlerts.tsx
+++ b/frontend-prep/src/pages/AdminAlerts/AdminAlerts.tsx
@@ -377,21 +377,21 @@ function AdminAlerts() {
 
                     <div className="alerts-filter-buttons">
                         <button
-                            className={`filter-btn ${statusFilter === "all" ? "active" : ""}`}
+                            className={`filter-btn-2 ${statusFilter === "all" ? "active" : ""}`}
                             onClick={() => setStatusFilter("all")}
                         >
                             <Filter size={16} />
                             Toutes ({alerts.length})
                         </button>
                         <button
-                            className={`filter-btn ${statusFilter === "true" ? "active" : ""}`}
+                            className={`filter-btn-2 ${statusFilter === "true" ? "active" : ""}`}
                             onClick={() => setStatusFilter("true")}
                         >
                             <Shield size={16} />
                             Actives ({stats.active})
                         </button>
                         <button
-                            className={`filter-btn ${statusFilter === "false" ? "active" : ""}`}
+                            className={`filter-btn-2 ${statusFilter === "false" ? "active" : ""}`}
                             onClick={() => setStatusFilter("false")}
                         >
                             <CheckCircle size={16} />
diff --git a/frontend-prep/src/pages/AdminUsers/AdminUsers.css b/frontend-prep/src/pages/AdminUsers/AdminUsers.css
index e9f6b918..5753b830 100644
--- a/frontend-prep/src/pages/AdminUsers/AdminUsers.css
+++ b/frontend-prep/src/pages/AdminUsers/AdminUsers.css
@@ -1291,3 +1291,156 @@
         grid-template-columns: 1fr;
     }
 }
+
+/* ============================================
+   ⭐ BOUTON CRÉER UTILISATEUR
+   ============================================ */
+.create-user-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    padding: 0.9rem 1.5rem;
+    background: linear-gradient(135deg, #7c3aed, #6d28d9);
+    border: 1px solid rgba(16, 185, 129, 0.3);
+    border-radius: 12px;
+    color: white;
+    font-size: 0.95rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    white-space: nowrap;
+}
+.create-user-btn:hover {
+    background: linear-gradient(135deg, #6d28d9, #5b21b6);
+    border-color: #5b21b6;
+    transform: translateY(-2px);
+    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
+}
+.create-user-btn:active {
+    transform: translateY(0);
+}
+/* ============================================
+   ⭐ MODAL CRÉATION UTILISATEUR
+   ============================================ */
+.create-user-modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 90%;
+    max-width: 550px;
+    max-height: 90vh;
+    background: linear-gradient(145deg, #1f1f1f 0%, #0a0a0a 100%);
+    border: 2px solid #5b21b6;
+    border-radius: 24px;
+    z-index: 10000;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    box-shadow:
+        0 0 0 1px rgba(0, 0, 0, 0.5),
+        0 24px 80px rgba(16, 185, 129, 0.3),
+        0 12px 40px rgba(0, 0, 0, 0.8),
+        inset 0 1px 0 rgba(255, 255, 255, 0.03);
+    animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.create-user-modal .modal-header {
+    background: linear-gradient(135deg, #6d28d9, #5b21b6);
+    border-bottom: 1px solid rgba(16, 185, 129, 0.3);
+}
+.create-user-modal .modal-header h2 {
+    color: white;
+}
+.create-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+}
+.form-group label {
+    color: white;
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+.form-group input,
+.form-group select {
+    width: 100%;
+    background: linear-gradient(
+        135deg,
+        rgba(20, 20, 20, 0.8),
+        rgba(10, 10, 10, 0.9)
+    );
+    border: 2px solid rgba(16, 185, 129, 0.2);
+    border-radius: 12px;
+    padding: 1rem 1.2rem;
+    color: #ffffff;
+    font-size: 0.98rem;
+    font-weight: 600;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    outline: none;
+}
+.form-group select {
+    cursor: pointer;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 1rem center;
+    background-size: 20px;
+    padding-right: 3rem;
+
+    /* ✅ Force le style natif du navigateur */
+    color-scheme: dark;
+}
+
+/* ✅ STYLE DES OPTIONS - utiliser color-scheme */
+.form-group select option {
+    background-color: #000000;
+    color: #ffffff;
+}
+
+.form-group input:focus,
+.form-group select:focus {
+    background: linear-gradient(
+        135deg,
+        rgba(25, 25, 25, 0.9),
+        rgba(15, 15, 15, 0.95)
+    );
+    border-color: #5b21b6;
+    box-shadow:
+        inset 0 2px 6px rgba(0, 0, 0, 0.5),
+        0 0 0 4px rgba(16, 185, 129, 0.15),
+        0 4px 16px rgba(16, 185, 129, 0.3);
+    transform: translateY(-1px);
+}
+.form-group input::placeholder {
+    color: #555;
+    font-style: italic;
+}
+.form-group select {
+    cursor: pointer;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 1rem center;
+    background-size: 20px;
+    padding-right: 3rem;
+}
+/* Responsive */
+@media (max-width: 768px) {
+    .users-header {
+        flex-direction: column;
+    }
+    .create-user-btn {
+        width: 100%;
+        justify-content: center;
+    }
+    .create-user-modal {
+        width: 95%;
+    }
+}
diff --git a/frontend-prep/src/pages/AdminUsers/AdminUsers.tsx b/frontend-prep/src/pages/AdminUsers/AdminUsers.tsx
index 8f057c72..9414ed2f 100644
--- a/frontend-prep/src/pages/AdminUsers/AdminUsers.tsx
+++ b/frontend-prep/src/pages/AdminUsers/AdminUsers.tsx
@@ -17,6 +17,7 @@ import {
     CheckCircle,
     Leaf,
     Wind,
+    UserPlus,
 } from "lucide-react";
 import AdminLayout from "../../components/AdminLayout";
 import "./AdminUsers.css";
@@ -26,10 +27,12 @@ import {
     isAdminAuthenticated,
     deleteUserAdmin, // ⭐ AJOUTÉ
     deleteClientAdmin, // ⭐ AJOUTÉ
+    CreateUser,
 } from "../../api/api_admin";
 import type { ClientResponse } from "../../api/api_admin";
 import type { AdminResponse } from "../../api/api_admin_types";
 import EditUserModal from "../../components/EditUserModal";
+import Toast from "../../components/Toast";
 
 interface User {
     id: number;
@@ -72,7 +75,22 @@ function AdminUsers() {
     const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
     const [userToDelete, setUserToDelete] = useState<User | null>(null);
     const [deleteLoading, setDeleteLoading] = useState(false);
-
+    const [showCreateModal, setShowCreateModal] = useState(false);
+    const [createUsername, setCreateUsername] = useState("");
+    const [createPassword, setCreatePassword] = useState("");
+    const [createRole, setCreateRole] = useState<
+        "livreur" | "admin" | "cabine"
+    >("admin");
+    const [toast, setToast] = useState<{
+        show: boolean;
+        message: string;
+        type: "success" | "error" | "warning" | "info";
+    }>({
+        show: false,
+        message: "",
+        type: "success",
+    });
+    const [createLoading, setCreateLoading] = useState(false);
     // Stats
     const [stats, setStats] = useState({
         total: 0,
@@ -181,7 +199,6 @@ function AdminUsers() {
 
             // Si erreur 401, rediriger vers login
             if (error instanceof Error && error.message.includes("401")) {
-                console.log("🔓 [AdminUsers] Token invalide - Redirection");
                 sessionStorage.removeItem("admin_token");
                 sessionStorage.removeItem("admin_username");
                 navigate("/login-admin/admin", { replace: true });
@@ -193,7 +210,102 @@ function AdminUsers() {
             setLoading(false);
         }
     };
+    const handleCreateUser = () => {
+        setShowCreateModal(true);
+        // Reset form
+        setCreateUsername("");
+        setCreatePassword("");
+        setCreateRole("admin");
+    };
+    const confirmCreateUser = async () => {
+        // Validation
+        if (!createUsername.trim()) {
+            setToast({
+                show: true,
+                message: "Le nom d'utilisateur est requis",
+                type: "error",
+            });
+            return;
+        }
+        if (!createPassword.trim()) {
+            setToast({
+                show: true,
+                message: "Le mot de passe est requis",
+                type: "error",
+            });
+            return;
+        }
+        if (createPassword.length < 6) {
+            setToast({
+                show: true,
+                message: "Le mot de passe doit contenir au moins 6 caractères",
+                type: "error",
+            });
+            return;
+        }
 
+        setCreateLoading(true);
+
+        try {
+            console.log("➕ [CREATE] Création utilisateur:", {
+                username: createUsername,
+                role: createRole,
+            });
+
+            const result = await CreateUser(
+                createUsername.trim(),
+                createPassword,
+                createRole,
+            );
+
+            if (result.success) {
+                // ✅ TOAST DE SUCCÈS
+                setToast({
+                    show: true,
+                    message: `${createUsername} (${createRole}) créé avec succès !`,
+                    type: "success",
+                });
+
+                // Fermer la modal
+                setShowCreateModal(false);
+
+                // Reset form
+                setCreateUsername("");
+                setCreatePassword("");
+                setCreateRole("admin");
+
+                // Recharger la liste
+                if (filterRole !== "all") {
+                    await fetchUsersByRole(filterRole);
+                } else {
+                    await fetchUsers();
+                }
+            } else {
+                // ✅ TOAST D'ERREUR
+                setToast({
+                    show: true,
+                    message: `Erreur: ${result.error || "Impossible de créer l'utilisateur"}`,
+                    type: "error",
+                });
+            }
+        } catch (error) {
+            // ✅ TOAST D'ERREUR
+            setToast({
+                show: true,
+                message: `Erreur réseau: ${error instanceof Error ? error.message : "Erreur inconnue"}`,
+                type: "error",
+            });
+        } finally {
+            setCreateLoading(false);
+        }
+    };
+
+    const cancelCreate = () => {
+        setShowCreateModal(false);
+        setCreateUsername("");
+        setCreatePassword("");
+        setCreateRole("admin");
+    };
     // ✅ NOUVELLE FONCTION: Récupérer les utilisateurs par rôle
     const fetchUsersByRole = async (role: FilterRole) => {
         // ✅ Vérifier l'auth avant de charger les données
@@ -431,10 +543,9 @@ function AdminUsers() {
 
     const getRoleLabel = (role: string) => {
         const labels: { [key: string]: string } = {
-            client: "Client",
             livreur: "Livreur",
             admin: "Administrateur",
-            cabine: "Opérateur Cabine",
+            cabine: "Cabine",
         };
         return labels[role] || role;
     };
@@ -614,9 +725,25 @@ function AdminUsers() {
         <AdminLayout>
             <div className="admin-container">
                 {/* Header */}
+                {toast.show && (
+                    <Toast
+                        message={toast.message}
+                        type={toast.type}
+                        duration={3000}
+                        onClose={() => setToast({ ...toast, show: false })}
+                    />
+                )}
                 <div className="users-header">
                     <div className="header-content">
                         <h1>Gestion des Utilisateurs</h1>
+                        {/* ⭐ NOUVEAU BOUTON */}
+                        <button
+                            className="create-user-btn"
+                            onClick={handleCreateUser}
+                        >
+                            <UserPlus size={20} />
+                            <span>Créer un utilisateur</span>
+                        </button>
                     </div>
                 </div>
 
@@ -1420,6 +1547,118 @@ function AdminUsers() {
                         </div>
                     </>
                 )}
+                {showCreateModal && (
+                    <>
+                        <div className="modal-overlay" onClick={cancelCreate} />
+                        <div className="create-user-modal">
+                            <div className="modal-header">
+                                <h2>Créer un nouvel utilisateur</h2>
+                                <button
+                                    className="close-modal"
+                                    onClick={cancelCreate}
+                                >
+                                    <XCircle size={24} />
+                                </button>
+                            </div>
+
+                            <div className="modal-content">
+                                <div className="create-form">
+                                    <div className="form-group">
+                                        <label htmlFor="create-username">
+                                            Nom d'utilisateur *
+                                        </label>
+                                        <input
+                                            id="create-username"
+                                            type="text"
+                                            placeholder="Entrez le nom d'utilisateur"
+                                            value={createUsername}
+                                            onChange={(e) =>
+                                                setCreateUsername(
+                                                    e.target.value,
+                                                )
+                                            }
+                                            autoFocus
+                                        />
+                                    </div>
+
+                                    <div className="form-group">
+                                        <label htmlFor="create-password">
+                                            Mot de passe *
+                                        </label>
+                                        <input
+                                            id="create-password"
+                                            type="password"
+                                            placeholder="Minimum 8 caractères"
+                                            value={createPassword}
+                                            onChange={(e) =>
+                                                setCreatePassword(
+                                                    e.target.value,
+                                                )
+                                            }
+                                        />
+                                    </div>
+
+                                    <div className="form-group">
+                                        <label htmlFor="create-role">
+                                            Rôle *
+                                        </label>
+                                        <select
+                                            id="create-role"
+                                            value={createRole}
+                                            onChange={(e) =>
+                                                setCreateRole(
+                                                    e.target
+                                                        .value as typeof createRole,
+                                                )
+                                            }
+                                        >
+                                            <option value="livreur">
+                                                Livreur
+                                            </option>
+                                            <option value="cabine">
+                                                Cabine
+                                            </option>
+                                            <option value="admin">
+                                                Administrateur
+                                            </option>
+                                        </select>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div className="modal-actions">
+                                <button
+                                    className="action-button secondary"
+                                    onClick={cancelCreate}
+                                    disabled={createLoading}
+                                >
+                                    Annuler
+                                </button>
+                                <button
+                                    className="action-button primary"
+                                    onClick={confirmCreateUser}
+                                    disabled={
+                                        createLoading ||
+                                        !createUsername.trim() ||
+                                        !createPassword.trim()
+                                    }
+                                >
+                                    {createLoading ? (
+                                        <>
+                                            <span className="spinner" />
+                                            <span>Création...</span>
+                                        </>
+                                    ) : (
+                                        <>
+                                            <UserPlus size={18} />
+                                            <span>Créer l'utilisateur</span>
+                                        </>
+                                    )}
+                                </button>
+                            </div>
+                        </div>
+                    </>
+                )}
             </div>
 
             {/* Modal d'édition */}
diff --git a/frontend-prep/src/pages/CabineAlert/CabineAlerts.css b/frontend-prep/src/pages/CabineAlert/CabineAlerts.css
index 4375f01d..49854d13 100644
--- a/frontend-prep/src/pages/CabineAlert/CabineAlerts.css
+++ b/frontend-prep/src/pages/CabineAlert/CabineAlerts.css
@@ -254,7 +254,7 @@
     flex-wrap: wrap;
 }
 
-.filter-btn {
+.filter-btn-2 {
     padding: 0.75rem 1.5rem;
     background: linear-gradient(
         135deg,
@@ -274,7 +274,7 @@
     white-space: nowrap;
 }
 
-.filter-btn:hover {
+.filter-btn-2:hover {
     background: linear-gradient(
         135deg,
         rgba(255, 255, 255, 0.08) 0%,
@@ -284,7 +284,7 @@
     color: white;
 }
 
-.filter-btn.active {
+.filter-btn-2.active {
     background: linear-gradient(135deg, #ef4444, #dc2626);
     border-color: rgba(239, 68, 68, 0.5);
     color: white;
@@ -862,7 +862,7 @@
         padding: 0.75rem;
     }
 
-    .filter-btn {
+    .filter-btn-2 {
         padding: 0.65rem 1rem;
         font-size: 0.85rem;
     }
diff --git a/frontend-prep/src/pages/CabineAlert/CabineAlerts.tsx b/frontend-prep/src/pages/CabineAlert/CabineAlerts.tsx
index a7b74e0e..4e649c10 100644
--- a/frontend-prep/src/pages/CabineAlert/CabineAlerts.tsx
+++ b/frontend-prep/src/pages/CabineAlert/CabineAlerts.tsx
@@ -337,21 +337,21 @@ function CabineAlerts() {
 
                     <div className="alerts-filter-buttons">
                         <button
-                            className={`filter-btn ${statusFilter === "all" ? "active" : ""}`}
+                            className={`filter-btn-2 ${statusFilter === "all" ? "active" : ""}`}
                             onClick={() => setStatusFilter("all")}
                         >
                             <Filter size={16} />
                             Toutes ({alerts.length})
                         </button>
                         <button
-                            className={`filter-btn ${statusFilter === "true" ? "active" : ""}`}
+                            className={`filter-btn-2 ${statusFilter === "true" ? "active" : ""}`}
                             onClick={() => setStatusFilter("true")}
                         >
                             <Shield size={16} />
                             Actives ({stats.active})
                         </button>
                         <button
-                            className={`filter-btn ${statusFilter === "false" ? "active" : ""}`}
+                            className={`filter-btn-2 ${statusFilter === "false" ? "active" : ""}`}
                             onClick={() => setStatusFilter("false")}
                         >
                             <CheckCircle size={16} />
diff --git a/frontend-prep/src/pages/User/ProductDetail.tsx b/frontend-prep/src/pages/User/ProductDetail.tsx
index 50e14a7e..e4e9eda6 100644
--- a/frontend-prep/src/pages/User/ProductDetail.tsx
+++ b/frontend-prep/src/pages/User/ProductDetail.tsx
@@ -1,252 +1,280 @@
-import { useParams, useNavigate } from 'react-router-dom';
-import { useState, useEffect } from 'react';
-import { getProductById, isUserAuthenticated } from '../../api/api';
-import type { Product } from '../../api/api';
-import { useCart } from '../../context/CartContext';
-import Navbar from '../../components/Navbar';
-import './ProductDetail.css';
+import { useParams, useNavigate } from "react-router-dom";
+import { useState, useEffect } from "react";
+import { getProductById, isUserAuthenticated } from "../../api/api";
+import type { Product } from "../../api/api";
+import { useCart } from "../../context/CartContext";
+import Navbar from "../../components/Navbar";
+import Toast from "../../components/Toast";
+import "./ProductDetail.css";
 
 function ProductDetail() {
-  const { id } = useParams<{ id: string }>();
-  const navigate = useNavigate();
-  const { addToCart } = useCart();
-  
-  const [product, setProduct] = useState<Product | null>(null);
-  const [loading, setLoading] = useState<boolean>(true);
-  const [error, setError] = useState<string | null>(null);
+    const { id } = useParams<{ id: string }>();
+    const navigate = useNavigate();
+    const { addToCart } = useCart();
 
-  // floats
-  const [selectedGrams, setSelectedGrams] = useState<number | null>(null);
-  const [selectedPrice, setSelectedPrice] = useState<number>(0.0);
-  
-  // ✅ VÉRIFICATION INITIALE DE L'AUTHENTIFICATION
-  useEffect(() => {
-    const checkAuth = () => {
-      if (!isUserAuthenticated()) {
-        console.log('❌ [ProductDetail] Utilisateur non authentifié, redirection vers /login/client');
-        navigate('/login/client', { replace: true });
-      }
-    };
+    const [product, setProduct] = useState<Product | null>(null);
+    const [loading, setLoading] = useState<boolean>(true);
+    const [error, setError] = useState<string | null>(null);
 
-    checkAuth();
-  }, [navigate]);
+    // floats
+    const [selectedGrams, setSelectedGrams] = useState<number | null>(null);
+    const [selectedPrice, setSelectedPrice] = useState<number>(0.0);
 
-  // ✅ VÉRIFICATION CONTINUE (toutes les 5 secondes)
-  useEffect(() => {
-    const authInterval = setInterval(() => {
-      if (!isUserAuthenticated()) {
-        console.log('❌ [ProductDetail] Session expirée, redirection vers /login/client');
-        navigate('/login/client', { replace: true });
-      }
-    }, 5000);
+    // ✅ TOAST STATE
+    const [toast, setToast] = useState<{
+        show: boolean;
+        message: string;
+        type: "success" | "error" | "warning" | "info";
+    }>({
+        show: false,
+        message: "",
+        type: "success",
+    });
 
-    return () => clearInterval(authInterval);
-  }, [navigate]);
-  
-  useEffect(() => {
-    if (id) loadProduct(Number(id));
-  }, [id]);
-  
-  const loadProduct = async (productId: number) => {
-    // ✅ Vérifier l'auth avant de charger le produit
-    if (!isUserAuthenticated()) {
-      console.log('❌ [loadProduct] Non authentifié');
-      navigate('/login/client', { replace: true });
-      return;
-    }
-
-    setLoading(true);
-    setError(null);
-
-    try {
-      const response = await getProductById(productId);
-      
-      if (response.success && response.data) {
-        const fixedProduct = {
-          ...response.data,
-          prices: response.data.prices?.map((p: { quantity: number; price: number }) => ({
-            quantity: parseFloat(String(p.quantity)),
-            price: parseFloat(String(p.price)),
-          })) || []
+    // ✅ VÉRIFICATION INITIALE DE L'AUTHENTIFICATION
+    useEffect(() => {
+        const checkAuth = () => {
+            if (!isUserAuthenticated()) {
+                console.log(
+                    "❌ [ProductDetail] Utilisateur non authentifié, redirection vers /login/client",
+                );
+                navigate("/login/client", { replace: true });
+            }
         };
 
-        setProduct(fixedProduct);
+        checkAuth();
+    }, [navigate]);
 
-        // initialise le prix par défaut (float)
-        if (fixedProduct.prices.length > 0) {
-          setSelectedGrams(fixedProduct.prices[0].quantity);
-          setSelectedPrice(fixedProduct.prices[0].price);
+    // ✅ VÉRIFICATION CONTINUE (toutes les 5 secondes)
+    useEffect(() => {
+        const authInterval = setInterval(() => {
+            if (!isUserAuthenticated()) {
+                console.log(
+                    "❌ [ProductDetail] Session expirée, redirection vers /login/client",
+                );
+                navigate("/login/client", { replace: true });
+            }
+        }, 5000);
+
+        return () => clearInterval(authInterval);
+    }, [navigate]);
+
+    useEffect(() => {
+        if (id) loadProduct(Number(id));
+    }, [id]);
+
+    const loadProduct = async (productId: number) => {
+        // ✅ Vérifier l'auth avant de charger le produit
+        if (!isUserAuthenticated()) {
+            console.log("❌ [loadProduct] Non authentifié");
+            navigate("/login/client", { replace: true });
+            return;
         }
 
-      } else {
-        setError(response.message || 'Produit non trouvé');
-      }
-    } catch (err: any) {
-      setError(err.message || 'Erreur lors du chargement du produit');
-    } finally {
-      setLoading(false);
-    }
-  };
-  
-  const handleGramsChange = (quantity: number) => {
-    const floatQty = parseFloat(String(quantity));
-    setSelectedGrams(floatQty);
+        setLoading(true);
+        setError(null);
 
-    const priceOption = product?.prices?.find(
-      p => p.quantity === floatQty
-    );
+        try {
+            const response = await getProductById(productId);
 
-    if (priceOption) {
-      setSelectedPrice(parseFloat(String(priceOption.price)));
-    }
-  };
-  
-  const handleAddToCart = () => {
-    // ✅ Vérifier l'auth avant d'ajouter au panier
-    if (!isUserAuthenticated()) {
-      console.log('❌ [handleAddToCart] Non authentifié');
-      navigate('/login/client', { replace: true });
-      return;
+            if (response.success && response.data) {
+                const fixedProduct = {
+                    ...response.data,
+                    prices:
+                        response.data.prices?.map(
+                            (p: { quantity: number; price: number }) => ({
+                                quantity: parseFloat(String(p.quantity)),
+                                price: parseFloat(String(p.price)),
+                            }),
+                        ) || [],
+                };
+
+                setProduct(fixedProduct);
+
+                // initialise le prix par défaut (float)
+                if (fixedProduct.prices.length > 0) {
+                    setSelectedGrams(fixedProduct.prices[0].quantity);
+                    setSelectedPrice(fixedProduct.prices[0].price);
+                }
+            } else {
+                setError(response.message || "Produit non trouvé");
+            }
+        } catch (err: any) {
+            setError(err.message || "Erreur lors du chargement du produit");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleGramsChange = (quantity: number) => {
+        const floatQty = parseFloat(String(quantity));
+        setSelectedGrams(floatQty);
+
+        const priceOption = product?.prices?.find(
+            (p) => p.quantity === floatQty,
+        );
+
+        if (priceOption) {
+            setSelectedPrice(parseFloat(String(priceOption.price)));
+        }
+    };
+
+    const handleAddToCart = () => {
+        // ✅ Vérifier l'auth avant d'ajouter au panier
+        if (!isUserAuthenticated()) {
+            console.log("❌ [handleAddToCart] Non authentifié");
+            navigate("/login/client", { replace: true });
+            return;
+        }
+
+        if (!product || isOutOfStock || selectedGrams === null) {
+            // ✅ Toast d'erreur si conditions non remplies
+            setToast({
+                show: true,
+                message: "Veuillez sélectionner une quantité",
+                type: "error",
+            });
+            return;
+        }
+
+        addToCart({
+            product_id: product.id,
+            name_product: product.name,
+            category: product.category,
+            quantity: selectedGrams,
+            price: selectedPrice,
+        });
+
+        // ✅ Toast de succès
+        setToast({
+            show: true,
+            message: `${product.name} (${selectedGrams}g) ajouté au panier !`,
+            type: "success",
+        });
+    };
+
+    if (loading) {
+        return (
+            <>
+                <Navbar />
+                <div className="product-detail-container">
+                    <div className="loading-container">
+                        <p>Chargement du produit...</p>
+                    </div>
+                </div>
+            </>
+        );
     }
 
-    if (!product || isOutOfStock || selectedGrams === null) return;
+    if (error || !product) {
+        return (
+            <>
+                <Navbar />
+                <div className="product-detail-container">
+                    <div className="error-message">
+                        <h2>{error || "Produit non trouvé"}</h2>
+                        <button
+                            onClick={() => navigate("/user/accueil")}
+                            className="back-button"
+                        >
+                            Retour aux produits
+                        </button>
+                    </div>
+                </div>
+            </>
+        );
+    }
+
+    const isOutOfStock = product.stock === 0;
+    const hasValidPrices = product.prices && product.prices.length > 0;
 
-    addToCart({
-      product_id: product.id,
-      name_product: product.name,
-      category: product.category,
-      quantity: selectedGrams,
-      price: selectedPrice,
-    });
-  };
-  
-  // ✅ FIXED: Gestion correcte du type media (string[] | undefined)
-  const getProductImage = (product: Product): string => {
-    if (!product.media || product.media.length === 0) {
-      return '/default-product.jpg';
-    }
-    
-    // ✅ product.media est de type string[] selon l'interface Product
-    const firstMedia = product.media[0];
-    
-    // ✅ Vérifier si c'est une string directement ou un objet
-    if (typeof firstMedia === 'string') {
-      return firstMedia;
-    }
-    
-    // ✅ Si c'est un objet avec une propriété url, l'extraire
-    if (firstMedia && typeof firstMedia === 'object' && 'url' in firstMedia) {
-      const mediaUrl = (firstMedia as any).url;
-      return mediaUrl || '/default-product.jpg';
-    }
-    
-    return '/default-product.jpg';
-  };
-  
-  if (loading) {
     return (
-      <>
-        <Navbar />
-        <div className="product-detail-container">
-          <div className="loading-container">
-            <p>Chargement du produit...</p>
-          </div>
-        </div>
-      </>
-    );
-  }
-  
-  if (error || !product) {
-    return (
-      <>
-        <Navbar />
-        <div className="product-detail-container">
-          <div className="error-message">
-            <h2>{error || 'Produit non trouvé'}</h2>
-            <button onClick={() => navigate('/user/accueil')} className="back-button">
-              Retour aux produits
-            </button>
-          </div>
-        </div>
-      </>
-    );
-  }
-  
-  const isOutOfStock = product.stock === 0;
-  const hasValidPrices = product.prices && product.prices.length > 0;
-  
-  return (
-    <>
-      <Navbar />
+        <>
+            <Navbar />
 
-      <div className="product-detail-container">
-        <button onClick={() => navigate(-1)} className="back-button">
-          ← Retour
-        </button>
-
-        <div className="product-detail-content">
-
-          <div className={`product-image-section ${isOutOfStock ? 'out-of-stock' : ''}`}>
-            <img 
-              src={getProductImage(product)} 
-              alt={product.name} 
-              className="product-detail-image" 
-            />
-            {isOutOfStock && <div className="sold-out-badge">SOLD OUT</div>}
-          </div>
-
-          <div className="product-info-section">
-
-            <h1 className="product-detail-name">{product.name}</h1>
-
-            {selectedPrice > 0 && (
-              <p className="product-detail-price">
-                {selectedPrice.toFixed(2)} € {selectedGrams && `pour ${selectedGrams}g`}
-              </p>
+            {/* ✅ TOAST NOTIFICATION */}
+            {toast.show && (
+                <Toast
+                    message={toast.message}
+                    type={toast.type}
+                    duration={3000}
+                    onClose={() => setToast({ ...toast, show: false })}
+                />
             )}
 
-            <div className="product-description">
-              <h3>Description</h3>
-              <p>{product.description || 'Aucune description disponible.'}</p>
-            </div>
-            
-            <div className="product-stock-info">
-              {hasValidPrices && (
-                <div className="grams-selector">
-                  <label htmlFor="grams">Quantité:</label>
+            <div className="product-detail-container">
+                <button onClick={() => navigate(-1)} className="back-button">
+                    ← Retour
+                </button>
 
-                  <select
-                    id="grams"
-                    value={selectedGrams ?? ''}
-                    onChange={(e) => handleGramsChange(parseFloat(e.target.value))}
-                    className="grams-dropdown"
-                    disabled={isOutOfStock}
-                  >
-                    <option value="">Choisir une quantité</option>
+                <div className="product-detail-content">
+                    <div className="product-info-section">
+                        <h1 className="product-detail-name">{product.name}</h1>
 
-                    {product.prices && product.prices.map((p) => (
-                      <option key={p.quantity} value={p.quantity}>
-                        {p.quantity}g - {p.price.toFixed(2)} €
-                      </option>
-                    ))}
-                  </select>
+                        {selectedPrice > 0 && (
+                            <p className="product-detail-price">
+                                {selectedPrice.toFixed(2)} €{" "}
+                                {selectedGrams && `pour ${selectedGrams}g`}
+                            </p>
+                        )}
+
+                        <div className="product-description">
+                            <h3>Description</h3>
+                            <p>
+                                {product.description ||
+                                    "Aucune description disponible."}
+                            </p>
+                        </div>
+
+                        <div className="product-stock-info">
+                            {hasValidPrices && (
+                                <div className="grams-selector">
+                                    <label htmlFor="grams">Quantité:</label>
+
+                                    <select
+                                        id="grams"
+                                        value={selectedGrams ?? ""}
+                                        onChange={(e) =>
+                                            handleGramsChange(
+                                                parseFloat(e.target.value),
+                                            )
+                                        }
+                                        className="grams-dropdown"
+                                        disabled={isOutOfStock}
+                                    >
+                                        <option value="">
+                                            Choisir une quantité
+                                        </option>
+
+                                        {product.prices &&
+                                            product.prices.map((p) => (
+                                                <option
+                                                    key={p.quantity}
+                                                    value={p.quantity}
+                                                >
+                                                    {p.quantity}g -{" "}
+                                                    {p.price.toFixed(2)} €
+                                                </option>
+                                            ))}
+                                    </select>
+                                </div>
+                            )}
+                        </div>
+
+                        <button
+                            className={`add-to-cart-button ${isOutOfStock || selectedGrams === null ? "disabled" : ""}`}
+                            onClick={handleAddToCart}
+                            disabled={isOutOfStock || selectedGrams === null}
+                        >
+                            {isOutOfStock
+                                ? "Rupture de stock"
+                                : "Ajouter au panier"}
+                        </button>
+                    </div>
                 </div>
-              )}
             </div>
-
-            <button 
-              className={`add-to-cart-button ${(isOutOfStock || selectedGrams === null) ? 'disabled' : ''}`}
-              onClick={handleAddToCart}
-              disabled={isOutOfStock || selectedGrams === null}
-            >
-              {isOutOfStock ? 'Rupture de stock' : 'Ajouter au panier'}
-            </button>
-
-          </div>
-        </div>
-      </div>
-    </>
-  );
+        </>
+    );
 }
 
-export default ProductDetail;
\ No newline at end of file
+export default ProductDetail;