Checkpoint: Colorisation des icônes du menu latéral par catégorie pour améliorer la navigation visuelle et l'identification rapide des sections : Tableau de bord en bleu (text-blue-600), Gestion en vert (text-green-600), Configuration en orange (text-orange-600), Traçabilité en violet (text-purple-600), et Analyses en rose (text-pink-600). Ajout d'une fonction getCategoryColor() dans DashboardLayout.tsx qui applique automatiquement la couleur appropriée aux titres de section, chevrons et icônes de menu selon la catégorie. Les icônes actives conservent la couleur primaire pour indiquer la page courante. Cette amélioration visuelle facilite la navigation et rend l'interface plus intuitive et moderne.

client/src/components/DashboardLayout.tsx

@@ -27,6 +27,18 @@ import { useLocation } from "wouter";
 import { DashboardLayoutSkeleton } from './DashboardLayoutSkeleton';
 import { Button } from "./ui/button";
 
+// Couleurs par catégorie de menu
+const getCategoryColor = (sectionTitle: string) => {
+  const colors: Record<string, string> = {
+    "Tableau de bord": "text-blue-600",
+    "Gestion": "text-green-600",
+    "Configuration": "text-orange-600",
+    "Traçabilité": "text-purple-600",
+    "Analyses": "text-pink-600",
+  };
+  return colors[sectionTitle] || "";
+};
+
 const menuSections = [
   {
     title: "Tableau de bord",
@@ -307,11 +319,11 @@ function DashboardLayoutContent({
                     onClick={() => toggleSection(section.title)}
                     className="w-full px-4 py-2 flex items-center justify-between hover:bg-accent/50 transition-colors rounded-md mx-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                   >
-                    <h3 className="text-xs font-semibold text-blue-600 uppercase tracking-wider">
+                    <h3 className={`text-xs font-semibold uppercase tracking-wider ${getCategoryColor(section.title)}`}>
                       {section.title}
                     </h3>
                     <ChevronDown 
-                      className={`h-3 w-3 text-blue-600 transition-transform duration-200 ${
+                      className={`h-3 w-3 transition-transform duration-200 ${getCategoryColor(section.title)} ${
                         isOpen ? 'rotate-180' : ''
                       }`}
                     />
@@ -332,7 +344,7 @@ function DashboardLayoutContent({
                                 className={`h-10 transition-all font-normal`}
                               >
                                 <item.icon
-                                  className={`h-4 w-4 ${isActive || isSubItemActive ? "text-primary" : ""}`}
+                                  className={`h-4 w-4 ${isActive || isSubItemActive ? "text-primary" : getCategoryColor(section.title)}`}
                                 />
                                 <span>{item.label}</span>
                               </SidebarMenuButton>

todo.md

@@ -576,3 +576,7 @@
 ## Cohérence visuelle des icônes
 - [x] Vérifier et corriger la couleur de l'icône corbeille (rouge) sur toutes les pages
 - [x] Vérifier et corriger la couleur de l'icône œil (bleu) sur toutes les pages
+
+## Colorisation des icônes du menu latéral
+- [x] Appliquer des couleurs par catégorie aux icônes du menu (Tableau de bord: bleu, Gestion: vert, Configuration: orange, Traçabilité: violet, Analyses: rose)
+- [x] Vérifier l'affichage visuel du menu colorisé