fix: admin pages authorization issues

apps/web/components/Security/AdminAuthorization.tsx

@@ -0,0 +1,139 @@
+'use client';
+import { useOrg } from '@components/Contexts/OrgContext';
+import { useSession } from '@components/Contexts/SessionContext';
+import { usePathname, useRouter } from 'next/navigation';
+import React from 'react'
+
+type AuthorizationProps = {
+    children: React.ReactNode;
+    // Authorize components rendering or page rendering
+    authorizationMode: 'component' | 'page';
+}
+
+const ADMIN_PATHS = [
+    '/dash/org/*',
+    '/dash/org',
+    '/dash/users/*',
+    '/dash/users',
+    '/dash/courses/*',
+    '/dash/courses',
+    '/dash/org/settings/general',
+]
+
+function AdminAuthorization(props: AuthorizationProps) {
+    const session = useSession() as any;
+    const org = useOrg() as any;
+    const pathname = usePathname();
+    const router = useRouter();
+
+    // States 
+    const [isLoading, setIsLoading] = React.useState(true);
+    const [isAuthorized, setIsAuthorized] = React.useState(false);
+
+
+    // Verify if the user is authenticated
+    const isUserAuthenticated = () => {
+        if (session.isAuthenticated === true) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+
+    // Verify if the user is an Admin (1), Maintainer (2) or Member (3) of the organization
+    const isUserAdmin = () => {
+        const isAdmin = session.roles.some((role: any) => {
+            return (
+                role.org.id === org.id &&
+                (role.role.id === 1 ||
+                    role.role.id === 2 ||
+                    role.role.role_uuid === 'role_global_admin' ||
+                    role.role.role_uuid === 'role_global_maintainer'
+                )
+            );
+        });
+        return isAdmin;
+    };
+
+    function checkPathname(pattern: string, pathname: string) {
+        // Escape special characters in the pattern and replace '*' with a regex pattern
+        const regexPattern = new RegExp(`^${pattern.replace(/\//g, '\\/').replace(/\*/g, '.*')}$`);
+
+        // Test if the pathname matches the regex pattern
+        const isMatch = regexPattern.test(pathname);
+
+        return isMatch;
+    }
+
+
+    const Authorize = () => {
+        if (props.authorizationMode === 'page') {
+
+            // Check if user is in an admin path 
+            if (ADMIN_PATHS.some((path) => checkPathname(path, pathname))) {
+                console.log('Admin path')
+                if (isUserAuthenticated()) {
+                    // Check if the user is an Admin
+                    if (isUserAdmin()) {
+                        setIsAuthorized(true);
+                    }
+                    else {
+                        setIsAuthorized(false);
+                        router.push('/dash');
+                    }
+                }
+                else {
+                    router.push('/login');
+                }
+            }
+
+            else {
+                if (isUserAuthenticated()) {
+                    setIsAuthorized(true);
+                }
+                else {
+                    setIsAuthorized(false);
+                    router.push('/login');
+                }
+            }
+        }
+
+        if (props.authorizationMode === 'component') {
+            // Component mode
+            if (isUserAuthenticated() && isUserAdmin()) {
+                setIsAuthorized(true);
+            }
+            else {
+                setIsAuthorized(false);
+            }
+        }
+    }
+
+    React.useEffect(() => {
+        if (session.isLoading) {
+            return;
+        }
+
+        Authorize();
+        setIsLoading(false);
+    }, [session, org, pathname])
+
+
+
+    return (
+        <>
+
+            {props.authorizationMode === 'component' && isAuthorized === true && props.children}
+            {props.authorizationMode === 'page' && isAuthorized === true && !isLoading && props.children}
+            {props.authorizationMode === 'page' && isAuthorized === false && !isLoading &&
+                <div className='flex justify-center items-center h-screen'>
+                    <h1 className='text-2xl'>You are not authorized to access this page</h1>
+                </div>
+            }
+
+        </>
+    )
+}
+
+export default AdminAuthorization

apps/web/components/Security/AuthenticatedClientElement.tsx

@@ -1,8 +1,5 @@
 'use client';
 import React from "react";
-import useSWR, { mutate } from "swr";
-import { getAPIUrl } from "@services/config/config";
-import { swrFetcher } from "@services/utils/ts/requests";
 import { useSession } from "@components/Contexts/SessionContext";
 import { useOrg } from "@components/Contexts/OrgContext";
 

apps/web/components/Security/HeaderProfileBox.tsx

@@ -1,5 +1,5 @@
 'use client';
-import React, { use, useEffect } from "react";
+import React, { useEffect } from "react";
 import styled from "styled-components";
 import Link from "next/link";
 import Avvvatars from "avvvatars-react";