feat: implement RoleGuard for centralized authorization

- Created reusable RoleGuard component
- Refactored MainLayout to use RoleGuard for admin features
- Reduced manual role checks in the UI layout

apps/admin/src/components/RoleGuard.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { useAuth } from '@/lib/auth';
+
+type Role = 'STUDENT' | 'ADMIN' | 'ORG_MEMBER' | 'ORG_ADMIN' | 'SUPER_ADMIN';
+
+interface RoleGuardProps {
+    children: React.ReactNode;
+    allowedRoles?: Role[];
+    requireSuperAdmin?: boolean;
+    fallback?: React.ReactNode;
+}
+
+/**
+ * RoleGuard component to conditionally render content based on user roles.
+ * 
+ * Usage:
+ * <RoleGuard allowedRoles={['SUPER_ADMIN', 'ADMIN']}>
+ *   <SecretComponent />
+ * </RoleGuard>
+ */
+export const RoleGuard: React.FC<RoleGuardProps> = ({ 
+    children, 
+    allowedRoles, 
+    requireSuperAdmin = false,
+    fallback = null 
+}) => {
+    const { user } = useAuth();
+
+    if (!user) return <>{fallback}</>;
+
+    const userRole = user.role as Role;
+
+    // Special case for Super Admin logic
+    if (requireSuperAdmin) {
+        if (userRole === 'SUPER_ADMIN' || userRole === 'ADMIN') {
+            return <>{children}</>;
+        }
+        return <>{fallback}</>;
+    }
+
+    // Default role check
+    if (allowedRoles && allowedRoles.length > 0) {
+        if (allowedRoles.includes(userRole)) {
+            return <>{children}</>;
+        }
+        return <>{fallback}</>;
+    }
+
+    return <>{children}</>;
+};
+
+export default RoleGuard;

apps/admin/src/components/layouts/MainLayout.tsx

@@ -4,6 +4,8 @@ import { useAuth } from '@/lib/auth';
 import { useTenant } from '@/lib/tenant';
 import { BarChart2, TrendingUp, Users, BookOpen, Mic, Building2, Activity, Lightbulb } from 'lucide-react';
 
+import RoleGuard from '@/components/RoleGuard';
+
 interface MainLayoutProps {
     children: React.ReactNode;
     isSuperAdmin: boolean;
@@ -46,7 +48,7 @@ export default function MainLayout({ children, isSuperAdmin, orgs }: MainLayoutP
                     <span className="truncate">{currentOrg?.name || 'EdTech Admin'}</span>
                 </div>
                 
-                {isSuperAdmin && (
+                <RoleGuard requireSuperAdmin>
                     <div className="mb-8">
                         <label className="block text-[10px] uppercase font-bold text-slate-500 tracking-wider mb-2">Gestion Multi-Tenant</label>
                         <select 
@@ -60,7 +62,7 @@ export default function MainLayout({ children, isSuperAdmin, orgs }: MainLayoutP
                             ))}
                         </select>
                     </div>
-                )}
+                </RoleGuard>
 
                 <nav className="space-y-1 flex-1">
                     {navItems.map(n => (