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 { 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">