From b96c84d615e294487c325f12aa5d4ff937898e10 Mon Sep 17 00:00:00 2001
From: Manus Sandbox <sandbox@manus.ai>
Date: Sun, 23 Nov 2025 18:05:00 -0500
Subject: [PATCH] =?UTF-8?q?Checkpoint:=20R=C3=A9organisation=20du=20menu?=
 =?UTF-8?q?=20de=20navigation=20en=204=20zones=20distinctes=20avec=20s?=
 =?UTF-8?q?=C3=A9parateurs=20visuels=20et=20titres=20de=20sections=20:=20T?=
 =?UTF-8?q?ableau=20de=20bord,=20Gestion=20(Formations,=20S=C3=A9quences,?=
 =?UTF-8?q?=20Calendrier,=20Apprenants),=20Configuration=20(Utilisateurs,?=
 =?UTF-8?q?=20Rappels,=20Templates=20d'emails,=20Configuration=20SMTP),=20?=
 =?UTF-8?q?Analyses=20(=C3=89tablissements,=20Tableau=20de=20bord=20analyt?=
 =?UTF-8?q?ique,=20Rapport=20public=20cible)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/DashboardLayout.tsx | 100 ++++++++++++++--------
 todo.md                                   |   8 ++
 2 files changed, 74 insertions(+), 34 deletions(-)

diff --git a/client/src/components/DashboardLayout.tsx b/client/src/components/DashboardLayout.tsx
index 96cb844..6691b71 100644
--- a/client/src/components/DashboardLayout.tsx
+++ b/client/src/components/DashboardLayout.tsx
@@ -27,19 +27,39 @@ import { useLocation } from "wouter";
 import { DashboardLayoutSkeleton } from './DashboardLayoutSkeleton';
 import { Button } from "./ui/button";
 
-const menuItems = [
-  { icon: LayoutDashboard, label: "Tableau de bord", path: "/admin" },
-  { icon: GraduationCap, label: "Formations", path: "/admin/formations" },
-  { icon: Calendar, label: "Séquences", path: "/admin/sequences" },
-  { icon: CalendarDays, label: "Calendrier", path: "/admin/calendrier" },
-  { icon: Bell, label: "Rappels", path: "/admin/rappels" },
-  { icon: Users, label: "Apprenants", path: "/admin/apprenants" },
-  { icon: Building2, label: "Établissements", path: "/admin/etablissements" },
-  { icon: UserCog, label: "Utilisateurs", path: "/admin/users" },
-  { icon: Mail, label: "Templates d'emails", path: "/admin/email-templates" },
-  { icon: Settings, label: "Configuration SMTP", path: "/admin/email-config" },
-  { icon: TrendingUp, label: "Tableau de bord analytique", path: "/admin/analytics" },
-  { icon: BarChart3, label: "Rapport Public Cible", path: "/admin/rapport-public-cible" },
+const menuSections = [
+  {
+    title: "Tableau de bord",
+    items: [
+      { icon: LayoutDashboard, label: "Tableau de bord", path: "/admin" },
+    ]
+  },
+  {
+    title: "Gestion",
+    items: [
+      { icon: GraduationCap, label: "Formations", path: "/admin/formations" },
+      { icon: Calendar, label: "Séquences", path: "/admin/sequences" },
+      { icon: CalendarDays, label: "Calendrier", path: "/admin/calendrier" },
+      { icon: Users, label: "Apprenants", path: "/admin/apprenants" },
+    ]
+  },
+  {
+    title: "Configuration",
+    items: [
+      { icon: UserCog, label: "Utilisateurs", path: "/admin/users" },
+      { icon: Bell, label: "Rappels", path: "/admin/rappels" },
+      { icon: Mail, label: "Templates d'emails", path: "/admin/email-templates" },
+      { icon: Settings, label: "Configuration SMTP", path: "/admin/email-config" },
+    ]
+  },
+  {
+    title: "Analyses",
+    items: [
+      { icon: Building2, label: "Établissements", path: "/admin/etablissements" },
+      { icon: TrendingUp, label: "Tableau de bord analytique", path: "/admin/analytics" },
+      { icon: BarChart3, label: "Rapport Public Cible", path: "/admin/rapport-public-cible" },
+    ]
+  },
 ];
 
 const SIDEBAR_WIDTH_KEY = "sidebar-width";
@@ -131,7 +151,7 @@ function DashboardLayoutContent({
   const isCollapsed = state === "collapsed";
   const [isResizing, setIsResizing] = useState(false);
   const sidebarRef = useRef<HTMLDivElement>(null);
-  const activeMenuItem = menuItems.find(item => item.path === location);
+  const activeMenuItem = menuSections.flatMap(section => section.items).find(item => item.path === location);
   const isMobile = useIsMobile();
 
   useEffect(() => {
@@ -218,26 +238,38 @@ function DashboardLayoutContent({
           </SidebarHeader>
 
           <SidebarContent className="gap-0">
-            <SidebarMenu className="px-2 py-1">
-              {menuItems.map(item => {
-                const isActive = location === item.path;
-                return (
-                  <SidebarMenuItem key={item.path}>
-                    <SidebarMenuButton
-                      isActive={isActive}
-                      onClick={() => setLocation(item.path)}
-                      tooltip={item.label}
-                      className={`h-10 transition-all font-normal`}
-                    >
-                      <item.icon
-                        className={`h-4 w-4 ${isActive ? "text-primary" : ""}`}
-                      />
-                      <span>{item.label}</span>
-                    </SidebarMenuButton>
-                  </SidebarMenuItem>
-                );
-              })}
-            </SidebarMenu>
+            {menuSections.map((section, sectionIndex) => (
+              <div key={section.title}>
+                {sectionIndex > 0 && (
+                  <div className="border-t border-border my-2" />
+                )}
+                <div className="px-4 py-2">
+                  <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+                    {section.title}
+                  </h3>
+                </div>
+                <SidebarMenu className="px-2 py-1">
+                  {section.items.map(item => {
+                    const isActive = location === item.path;
+                    return (
+                      <SidebarMenuItem key={item.path}>
+                        <SidebarMenuButton
+                          isActive={isActive}
+                          onClick={() => setLocation(item.path)}
+                          tooltip={item.label}
+                          className={`h-10 transition-all font-normal`}
+                        >
+                          <item.icon
+                            className={`h-4 w-4 ${isActive ? "text-primary" : ""}`}
+                          />
+                          <span>{item.label}</span>
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    );
+                  })}
+                </SidebarMenu>
+              </div>
+            ))}
           </SidebarContent>
 
           <SidebarFooter className="p-3">
diff --git a/todo.md b/todo.md
index ea37442..4576b8a 100644
--- a/todo.md
+++ b/todo.md
@@ -576,3 +576,11 @@
 ## Correction erreur React #31 dans le calendrier
 
 - [x] Corriger l'erreur d'objet passé comme enfant React dans le modal de détails du calendrier
+
+## Réorganisation du menu du tableau de bord
+
+- [x] Réorganiser le menu en 4 zones distinctes avec séparateurs visuels
+  - Zone 1 : Tableau de bord
+  - Zone 2 : Gestion (Formations, Séquences, Calendrier, Apprenants)
+  - Zone 3 : Configuration (Utilisateurs, Rappels, Templates d'emails, Configuration SMTP)
+  - Zone 4 : Analyses (Établissements, Tableau de bord analytique, Rapport public cible)