feat: render admin button for admin role

src/components/navigationBar/nav.tsx

@@ -27,7 +27,8 @@ const ListItem = React.forwardRef<React.ElementRef<"a">, React.ComponentPropsWit
               "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
               className
             )}
-            {...props}>
+            {...props}
+          >
             <div className="text-sm font-medium leading-none">{title}</div>
             <hr />
             <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">{children}</p>
@@ -71,7 +72,8 @@ export function NavigationBar() {
             <Link
               className="flex-none text-xl font-semibold dark:text-white focus:outline-none focus:opacity-80"
               href="/"
-              aria-label="Brand">
+              aria-label="Brand"
+            >
               <span className="inline-flex items-center gap-x-2 text-xl font-semibold dark:text-white">
                 <Image src="/logo.svg" alt="logo" width={50} height={50} />
                 B2DVentures

src/components/navigationBar/profileBar.tsx

@@ -15,6 +15,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { Bell, Heart, Wallet } from "lucide-react";
 import { LogoutButton } from "@/components/auth/logoutButton";
 import useSession from "@/lib/supabase/useSession";
+import { useUserRole } from "@/hooks/useUserRole";
 
 const UnAuthenticatedComponents = () => {
   return (
@@ -34,6 +35,8 @@ const UnAuthenticatedComponents = () => {
 const AuthenticatedComponents = ({ uid }: { uid: string }) => {
   let notifications = 100;
   const displayValue = notifications >= 100 ? "..." : notifications;
+  const { data } = useUserRole();
+
   return (
     <div className="flex gap-3 pl-2 items-center">
       <Link href={"/notification"}>
@@ -62,6 +65,11 @@ const AuthenticatedComponents = ({ uid }: { uid: string }) => {
           <DropdownMenuSeparator />
           <DropdownMenuItem>Settings</DropdownMenuItem>
           <DropdownMenuItem>Support</DropdownMenuItem>
+          {data != null && data != undefined && data.role === "admin" && (
+            <DropdownMenuItem>
+              <Link href="/admin">Admin</Link>
+            </DropdownMenuItem>
+          )}
           <DropdownMenuSeparator />
           <DropdownMenuItem>
             <LogoutButton />

src/hooks/useUserRole.ts

@@ -0,0 +1,41 @@
+"use client";
+
+import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
+import { getUserRole } from "@/lib/data/userQuery";
+import { useQuery } from "@supabase-cache-helpers/postgrest-react-query";
+import { useState, useEffect } from "react";
+import { Session } from "@supabase/supabase-js";
+
+export function useUserRole() {
+  const client = createSupabaseClient();
+  const [session, setSession] = useState<Session | null>(null);
+  const [sessionError, setSessionError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    async function fetchSession() {
+      try {
+        const {
+          data: { session },
+          error,
+        } = await client.auth.getSession();
+        if (error) throw error;
+        setSession(session);
+      } catch (error) {
+        setSessionError(error as Error);
+        console.error("Error fetching session:", error);
+      }
+    }
+
+    fetchSession();
+  }, [client.auth]);
+
+  const { data, isLoading, error: userRoleError } = useQuery(getUserRole(client, session?.user?.id!));
+
+  return {
+    data,
+    isLoading: isLoading || !session,
+    error: userRoleError || sessionError,
+    session,
+    userId: session?.user?.id,
+  };
+}