manus-admin/formation-manager-itinova
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Checkpoint: Réorganisation du menu de navigation en 4 zones distinctes avec séparateurs visuels et titres de sections : Tableau de bord, Gestion (Formations, Séquences, Calendrier, Apprenants), Configuration (Utilisateurs, Rappels, Templates d'emails, Configuration SMTP), Analyses (Établissements, Tableau de bord analytique, Rapport public cible)

Browse Source
This commit is contained in:
Manus Sandbox
2025-11-23 18:05:00 -05:00
parent 1e4543e672
commit b96c84d615
2 changed files with 74 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
client/src/components/DashboardLayout.tsx
View File

@@ -27,19 +27,39 @@ import { useLocation } from "wouter";
import { DashboardLayoutSkeleton } from './DashboardLayoutSkeleton'; import { DashboardLayoutSkeleton } from './DashboardLayoutSkeleton';
import { Button } from "./ui/button"; import { Button } from "./ui/button";
const menuItems = [ const menuSections = [
{ icon: LayoutDashboard, label: "Tableau de bord", path: "/admin" }, {
{ icon: GraduationCap, label: "Formations", path: "/admin/formations" }, title: "Tableau de bord",
{ icon: Calendar, label: "Séquences", path: "/admin/sequences" }, items: [
{ icon: CalendarDays, label: "Calendrier", path: "/admin/calendrier" }, { icon: LayoutDashboard, label: "Tableau de bord", path: "/admin" },
{ 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" }, title: "Gestion",
{ icon: Mail, label: "Templates d'emails", path: "/admin/email-templates" }, items: [
{ icon: Settings, label: "Configuration SMTP", path: "/admin/email-config" }, { icon: GraduationCap, label: "Formations", path: "/admin/formations" },
{ icon: TrendingUp, label: "Tableau de bord analytique", path: "/admin/analytics" }, { icon: Calendar, label: "Séquences", path: "/admin/sequences" },
{ icon: BarChart3, label: "Rapport Public Cible", path: "/admin/rapport-public-cible" }, { 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"; const SIDEBAR_WIDTH_KEY = "sidebar-width";
@@ -131,7 +151,7 @@ function DashboardLayoutContent({
const isCollapsed = state === "collapsed"; const isCollapsed = state === "collapsed";
const [isResizing, setIsResizing] = useState(false); const [isResizing, setIsResizing] = useState(false);
const sidebarRef = useRef<HTMLDivElement>(null); 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(); const isMobile = useIsMobile();
useEffect(() => { useEffect(() => {
@@ -218,26 +238,38 @@ function DashboardLayoutContent({
</SidebarHeader> </SidebarHeader>
<SidebarContent className="gap-0"> <SidebarContent className="gap-0">
<SidebarMenu className="px-2 py-1"> {menuSections.map((section, sectionIndex) => (
{menuItems.map(item => { <div key={section.title}>
const isActive = location === item.path; {sectionIndex > 0 && (
return ( <div className="border-t border-border my-2" />
<SidebarMenuItem key={item.path}> )}
<SidebarMenuButton <div className="px-4 py-2">
isActive={isActive} <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
onClick={() => setLocation(item.path)} {section.title}
tooltip={item.label} </h3>
className={`h-10 transition-all font-normal`} </div>
> <SidebarMenu className="px-2 py-1">
<item.icon {section.items.map(item => {
className={`h-4 w-4 ${isActive ? "text-primary" : ""}`} const isActive = location === item.path;
/> return (
<span>{item.label}</span> <SidebarMenuItem key={item.path}>
</SidebarMenuButton> <SidebarMenuButton
</SidebarMenuItem> isActive={isActive}
); onClick={() => setLocation(item.path)}
})} tooltip={item.label}
</SidebarMenu> 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> </SidebarContent>
<SidebarFooter className="p-3"> <SidebarFooter className="p-3">

8
todo.md
View File

@@ -576,3 +576,11 @@
## Correction erreur React #31 dans le calendrier ## 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 - [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)