Eliminada dependencia de llave de servicio para el manejo de usuarios y eliminado el hard-code de los roles

supabase.tsx
Se añadieron los roles al contexto de autenticación. Se modificó la interfaz de UserClaims que consiste en la información que se obtiene de los usuarios. Se obtienen los roles desde la base de datos.

_authenticated.tsx
Ya todos pueden ver el enlace a la página de facultades.

login.tsx
Se movió el enlace de '¿Olvidaste tu contraseña?' a después del input de la contraseña, para mejorar la usabilidad.

usuarios.tsx
- La obtención de los usuarios ahora se hace a con el cliente de llave anónima de supabase y se obtiene de tablas en el esquema public a través de una función de PostgreSQL.
- La información de los roles se obtiene del contexto de autenticación para mostrarla en la página.
- El RolePill se movió a dentro del componente para poder usar la información del contexto.
- Se añadieron validaciones para poder crear un usuario.
- Se muestra la información para editar los usuarios y se actualiza en la BDD con una función de PostgreSQL.

src/auth/supabase.tsx

@@ -10,20 +10,29 @@ export interface SupabaseAuthState {
   isAuthenticated: boolean
   user: User | null
   claims: UserClaims | null
+  roles: RolCatalogo[] | null
   login: (email: string, password: string) => Promise<void>
   logout: () => Promise<void>
   isLoading: boolean
 }
 
-type Role = string;
+export interface RolCatalogo {
+  id: string
+  nombre: string
+  icono: string
+  nombre_clase: string
+  label: string
+}
 
-type UserClaims = {
-  claims_admin: boolean
-  clave: string
+export type Role = string;
+
+export type UserClaims = {
+  id: string | null
+  clave?: string
   nombre: string
   apellidos: string
-  title: string
-  avatar: string | null
+  title?: string
+  avatar?: string | null
   carrera_id?: string | null
   facultad_id?: string | null
   facultad_color?: string | null  // 🎨 NEW
@@ -35,6 +44,7 @@ const SupabaseAuthContext = createContext<SupabaseAuthState | undefined>(undefin
 export function SupabaseAuthProvider({ children }: { children: React.ReactNode }) {
   const [user, setUser] = useState<User | null>(null)
   const [claims, setClaims] = useState<UserClaims | null>(null)
+  const [roles, setRoles] = useState<RolCatalogo[] | null>(null)
   const [isAuthenticated, setIsAuthenticated] = useState(false)
   const [isLoading, setIsLoading] = useState(true)
 
@@ -52,6 +62,11 @@ export function SupabaseAuthProvider({ children }: { children: React.ReactNode }
     supabase.auth.getSession().then(({ data: { session } }) => {
       handleSession(session)
     })
+
+    // Carga roles catálogo
+    fetchRoles().then(fetchedRoles => {
+      setRoles(fetchedRoles);
+    });
   
     // Suscripción a cambios de sesión
     const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
@@ -75,7 +90,7 @@ export function SupabaseAuthProvider({ children }: { children: React.ReactNode }
 
   return (
     <SupabaseAuthContext.Provider
-      value={{ isAuthenticated, user, claims, login, logout, isLoading }}
+      value={{ isAuthenticated, user, claims, roles, login, logout, isLoading }}
     >
       {children}
     </SupabaseAuthContext.Provider>
@@ -123,9 +138,25 @@ async function buildClaims(session: Session | null): Promise<UserClaims | null>
       return null;
     }
 
-    return data[0];
+    return {
+      ...data[0],
+      id: null
+    };
   } catch (e) {
     console.error('Error inesperado:', e);
     return null;
   }
 }
+
+async function fetchRoles(): Promise<RolCatalogo[]> {
+  const { data, error } = await supabase
+    .from("roles_catalogo")
+    .select("id, nombre, icono, nombre_clase, label");
+
+  if (error) {
+    console.error("Error al obtener los roles:", error.message);
+    return [];
+  }
+
+  return data || [];
+}