widget cache

app/[section]/page.tsx

@@ -10,12 +10,19 @@ const menuItems = {
   missions: "https://example.com/missions"
 }
 
-export default async function SectionPage({ params }: { params: { section: string } }) {
-  const section = params.section;
-  const iframeUrl = menuItems[section as keyof typeof menuItems]
+type PageProps = {
+  params: {
+    section: string;
+  };
+};
+
+export default async function SectionPage({ params }: PageProps) {
+  const sectionSlug = String(params?.section || '');
+  
+  const iframeUrl = menuItems[sectionSlug as keyof typeof menuItems];
   
   if (!iframeUrl) {
-    notFound()
+    notFound();
   }
 
   return (
@@ -27,6 +34,6 @@ export default async function SectionPage({ params }: { params: { section: strin
         allowFullScreen
       />
     </div>
-  )
+  );
 }
 

components/main-nav.tsx

@@ -191,19 +191,19 @@ export function MainNav() {
       title: "ShowCase",
       icon: Lightbulb,
       href: '/showcase',
-      requiredRoles: ["Expression"],
+      requiredRoles: ["expression"],
     },
     {
       title: "Equipes",
       icon: UserCog,
       href: '/equipes',
-      requiredRoles: ["Admin", "Entrepreneurship"],
+      requiredRoles: ["admin", "entrepreneurship"],
     },
     {
       title: "TheMessage",
       icon: Mail,
       href: '/the-message',
-      requiredRoles: ["Mediation", "Expression"],
+      requiredRoles: ["mediation", "expression"],
     },
   ];
 

components/sidebar.tsx

@@ -181,28 +181,28 @@ export function Sidebar({ isOpen, onClose }: SidebarProps) {
       icon: Palette,
       href: "/design",
       iframe: process.env.NEXT_PUBLIC_IFRAME_ARTLAB_URL,
-      requiredRole: "Expression",
+      requiredRole: "expression",
     },
     {
       title: "Gite",
       icon: GitFork,
       href: "/gite",
       iframe: process.env.NEXT_PUBLIC_IFRAME_GITE_URL,
-      requiredRole: ["Coding", "DataIntelligence"],
+      requiredRole: ["coding", "dataintelligence"],
     },
     {
       title: "Calcul",
       icon: Calculator,
       href: "/calcul",
       iframe: process.env.NEXT_PUBLIC_IFRAME_CALCULATION_URL,
-      requiredRole: "DataIntelligence",
+      requiredRole: "dataintelligence",
     },
     {
       title: "Médiation",
       icon: Building2,
       href: "/mediation",
       iframe: process.env.NEXT_PUBLIC_IFRAME_MEDIATIONS_URL,
-      requiredRole: ["Mediation", "Expression"],
+      requiredRole: ["mediation", "expression"],
     },
   ];
 
@@ -288,6 +288,39 @@ export function Sidebar({ isOpen, onClose }: SidebarProps) {
                       {JSON.stringify(session?.user?.role, null, 2)}
                     </pre>
                   </details>
+                  <details>
+                    <summary className="cursor-pointer">Normalized Roles</summary>
+                    <pre className="mt-1 p-1 bg-white text-[10px] overflow-x-auto">
+                      {JSON.stringify(
+                        Array.isArray(session?.user?.role) 
+                          ? session.user.role.map(role => 
+                              typeof role === 'string' 
+                                ? role
+                                    .replace(/^\//, '')
+                                    .replace(/^ROLE_/i, '')
+                                    .replace(/^default-roles-[^/]*\//i, '')
+                                    .toLowerCase()
+                                : ''
+                            )
+                          : []
+                        , null, 2)}
+                    </pre>
+                  </details>
+                  <details>
+                    <summary className="cursor-pointer">Role-Based Items</summary>
+                    <div className="mt-1 p-1 bg-white text-[10px] overflow-x-auto">
+                      {roleSpecificItems.map(item => {
+                        const isVisible = hasRole(item.requiredRole);
+                        return (
+                          <div key={item.title} className="mb-1 pb-1 border-b">
+                            <p><strong>Item:</strong> {item.title}</p>
+                            <p><strong>Required Role:</strong> {JSON.stringify(item.requiredRole)}</p>
+                            <p><strong>Visible:</strong> {isVisible ? '✅' : '❌'}</p>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </details>
                 </div>
               </div>
             )}