Ezra/295 role and profile UI

src/auth/index.ts

@@ -27,6 +27,7 @@ declare module "next-auth" {
     enabled: boolean;
     pending: boolean;
     tag?: string;
+    siteName?: string;
   }
 
   interface Session {
@@ -39,6 +40,7 @@ declare module "next-auth" {
       tag?: string;
       enabled: boolean;
       pending: boolean;
+      siteName?: string;
     } & DefaultSession["user"] &
       PermissionFlags;
   }
@@ -54,6 +56,7 @@ declare module "next-auth/jwt" {
     streamUserId: string | null;
     streamUserToken: string | null;
     tag?: string;
+    siteName?: string;
   }
 }
 
@@ -80,6 +83,7 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
             tag: true,
             streamUserId: true,
             streamUserToken: true,
+            partnerDetails: true, 
             ...PERMISSION_SELECT,
           },
         });
@@ -101,6 +105,10 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
           streamUserId: user.streamUserId,
           streamUserToken: user.streamUserToken,
           tag: user.tag ?? undefined,
+          siteName: 
+            user.type === "PARTNER" && user.partnerDetails
+              ? (user.partnerDetails as { siteName?: string })?.siteName
+              : undefined, 
         };
       },
     }),
@@ -116,6 +124,7 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
         token.streamUserId = user.streamUserId;
         token.streamUserToken = user.streamUserToken;
         token.tag = user.tag;
+        token.siteName = user.siteName;
         PERMISSION_FIELDS.forEach((field) => {
           token[field] = user[field];
         });
@@ -132,6 +141,7 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
       session.user.streamUserId = token.streamUserId;
       session.user.streamUserToken = token.streamUserToken;
       session.user.tag = token.tag;
+      session.user.siteName = token.siteName; 
       PERMISSION_FIELDS.forEach((field) => {
         session.user[field] = Boolean(token[field]);
       });

src/components/NavBarLayout.tsx

@@ -157,6 +157,13 @@ function NavLinks() {
       )}
       {/* Spacer to push the profile and sign out buttons to the bottom */}
       <li className="flex-grow" />
+      <li>
+        <p className="px-2 mb-1 text-sm font-medium line-clamp-3 hidden md:block">
+          <span className="font-normal text-xs text-gray-500">Logged in as</span>
+          <br />
+          {isPartnerUser ? (user?.siteName ?? user?.name) : user?.name }
+        </p>
+      </li>
       <ul className="flex gap-2">
         <li className="flex-1 mt-auto">
           <NavLink
@@ -230,6 +237,13 @@ function ResetButton() {
   );
 }
 
+function getPortalLabel(isPartnerUser: boolean, isSuper?: boolean) {
+  if (isPartnerUser) return "Partner Portal";
+  if (isSuper) return "Admin Portal";
+
+  return "Staff Portal"; 
+}
+
 function DesktopNavbar() {
   const { user } = useUser();
   const isPartnerUser = isPartner(user?.type);
@@ -243,7 +257,7 @@ function DesktopNavbar() {
       <img src="/logo.svg" alt="Hope for Haiti Logo" className="mt-6 mb-2" />
 
       <h1 className="mt-2 font-bold hidden md:block">
-        {isPartnerUser ? "Partner Portal" : "Staff Portal"}
+        {getPortalLabel(isPartnerUser, user?.isSuper)}
       </h1>
 
       <hr className="mt-2 mb-4 h-1 bg-blue-dark border-t-0 w-full" />
@@ -275,7 +289,7 @@ function MobileNavbar() {
         className={`w-full h-full flex flex-col items-start transition-all ${open ? "opacity-100" : "opacity-0"}`}
       >
         <h1 className="m-1.5 mb-1 font-semibold whitespace-nowrap">
-          {isPartnerUser ? "Partner Portal" : "Staff Portal"}
+          {getPortalLabel(isPartnerUser, user?.isSuper)}
         </h1>
 
         <hr className="mt-4 mb-3 h-0.5 bg-blue-dark border-t-0 w-full" />

src/components/context/UserContext.tsx

@@ -11,6 +11,7 @@ export type SessionUser = PermissionFlags & {
   streamUserToken: string | null;
   streamUserId: string | null;
   tag?: string;
+  siteName?: string;
 }
 
 interface UseUserType {