feat(tenant): show tenant information next to logo (#1033)

apps/web/auth-action.ts

@@ -151,6 +151,26 @@ export async function getMyProfile(
   const profile = await client.profile.getApiAccountMyProfile();
   return profile;
 }
+export async function getTenantData(token: string) {
+  const client = new AccountServiceClient({
+    TOKEN: token,
+    BASE: process.env.BASE_URL,
+    HEADERS: {
+      "X-Requested-With": "XMLHttpRequest",
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  const session = await client.sessions.getApiAccountSessions();
+  const activeSession = session.items?.[0];
+  if (!activeSession?.tenantId || !activeSession.tenantName) {
+    return undefined;
+  }
+  return {
+    tenantId: activeSession.tenantId,
+    tenantName: activeSession.tenantName,
+  };
+}
 
 export async function signInWithCredentials(credentials: {
   username: string;

apps/web/auth.ts

@@ -6,6 +6,7 @@ import Credentials from "next-auth/providers/credentials";
 import {
   getGrantedPolicies,
   getMyProfile,
+  getTenantData,
   obtainAccessTokenByRefreshToken,
   signInWithCredentials,
 } from "auth-action";
@@ -25,7 +26,6 @@ export interface Token {
 declare module "next-auth" {
   interface User extends Token {
     userName: string;
-    grantedPolicies?: Record<string, boolean>;
   }
 }
 
@@ -35,14 +35,14 @@ declare module "next-auth" {
     access_token?: string;
     user?: GetApiAccountMyProfileResponse;
     grantedPolicies?: Record<string, boolean>;
+    tenantData?: { tenantId: string; tenantName: string };
   }
 }
 declare module "@auth/core/jwt" {
   interface JWT extends Token {
     access_token: string;
     expires_at: number;
     refresh_token: string;
-    grantedPolicies?: Record<string, boolean>;
     error?: "RefreshAccessTokenError";
   }
 }
@@ -120,12 +120,14 @@ export const { handlers, auth, signIn, signOut } = NextAuth({
         };
       }
       const userData = await getMyProfile(typedToken.access_token);
+      const tenantData = await getTenantData(typedToken.access_token);
       const grantedPolicies = await getGrantedPolicies(typedToken.access_token);
       return {
         ...session,
         user: userData,
         access_token: typedToken.access_token,
         grantedPolicies: grantedPolicies || {},
+        tenantData,
       };
     },
     async jwt({ token, user }) {
@@ -137,7 +139,6 @@ export const { handlers, auth, signIn, signOut } = NextAuth({
           access_token: user.access_token,
           expires_at: Math.floor(Date.now() / 1000) + (user.expires_in || 0),
           refresh_token: user.refresh_token,
-          grantedPolicies: user.grantedPolicies,
         };
       } else if (Date.now() < (typedToken.expires_at || 0) * 1000) {
         return token;
@@ -165,7 +166,6 @@ export const { handlers, auth, signIn, signOut } = NextAuth({
         access_token: tokens.access_token,
         expires_at: Math.floor(Date.now() / 1000 + tokens.expires_in),
         refresh_token: tokens.refresh_token ?? token.refresh_token,
-        grantedPolicies: user.grantedPolicies,
       };
     },
   },

apps/web/src/app/[lang]/(main)/layout.tsx

@@ -47,6 +47,7 @@ export default async function Layout({ children, params }: LayoutProps) {
         navbarItems={navbarFromDB}
         prefix=""
         profileMenu={profileMenuProps}
+        tenantData={session?.tenantData}
       />
       <div className="flex h-full flex-col overflow-hidden px-4">
         {children}

packages/ui/src/providers/theme.tsx

@@ -12,6 +12,7 @@ interface ThemeProviderProps {
   profileMenu?: ProfileMenuProps;
   prefix: string;
   lang: string;
+  tenantData?: { tenantId: string; tenantName: string };
   children: JSX.Element;
 }
 interface ThemeContextProps {
@@ -22,6 +23,7 @@ interface ThemeContextProps {
   profileMenu?: ProfileMenuProps;
   lang: string;
   navbarItems: NavbarItemsFromDB[];
+  tenantData?: { tenantId: string; tenantName: string };
 }
 
 const ThemeProviderContext = createContext<ThemeContextProps>({
@@ -31,6 +33,7 @@ const ThemeProviderContext = createContext<ThemeContextProps>({
   lang: "en",
   navbarItems: [],
   profileMenu: undefined,
+  tenantData: undefined,
   logo: "",
 });
 
@@ -47,6 +50,7 @@ export function ThemeProvider({
   profileMenu,
   lang,
   navbarItems,
+  tenantData,
 }: ThemeProviderProps) {
   return (
     <ThemeProviderContext.Provider
@@ -58,6 +62,7 @@ export function ThemeProvider({
         prefix,
         lang,
         profileMenu,
+        tenantData,
       }}
     >
       {children}

packages/ui/src/theme/main-admin-layout/components/logo.tsx

@@ -9,7 +9,7 @@ function Logo() {
   return (
     <Link
       href={baseURL}
-      className="text-primary mr-2 flex items-center justify-between px-2 text-lg font-bold md:mr-6 md:px-0"
+      className="text-primary mr-2 flex items-center justify-between px-2 text-lg font-bold md:mr-2 md:px-0"
     >
       {logo ? (
         <Image

packages/ui/src/theme/main-admin-layout/components/navbar.tsx

@@ -1,6 +1,15 @@
 "use client";
 
 import { IdCardIcon } from "@radix-ui/react-icons";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@repo/ayasofyazilim-ui/atoms/tooltip";
+import {
+  ISection,
+  SectionLayoutNavbar,
+} from "@repo/ayasofyazilim-ui/templates/section-layout-v2";
 import { BreadcrumbItemType, NavbarItemsFromDB } from "@repo/ui/theme/types";
 import {
   BookA,
@@ -37,17 +46,13 @@ import {
   User,
   WalletCards,
 } from "lucide-react";
+import Link from "next/link";
 import BreadcrumbNavigation from "./breadcrumb";
 import LanguageSelector from "./language-selector";
 import Logo from "./logo";
 import SearchBar from "./navbar-searchbar";
 import NotificationsDropdown from "./notifications";
 import ProfileMenu from "./profile-menu";
-import {
-  ISection,
-  SectionLayoutNavbar,
-} from "@repo/ayasofyazilim-ui/templates/section-layout-v2";
-import Link from "next/link";
 
 export default function Navbar({
   prefix,
@@ -56,20 +61,39 @@ export default function Navbar({
   activeSectionLayoutItem,
   navigation,
   lang,
+  tenantData,
 }: {
   prefix: string;
   lang: string;
   navbarItems: NavbarItemsFromDB[];
   navigation: BreadcrumbItemType[];
   sectionLayoutItems: ISection[];
   activeSectionLayoutItem: string;
+  tenantData?: { tenantId: string; tenantName: string };
 }) {
   return (
     <div className="sticky left-0 right-0 top-0 z-50">
       <nav className="bg-white px-1 py-2.5 md:px-4">
         <div className="flex flex-wrap items-center justify-between">
           <div className="flex items-center justify-start">
             <Logo />
+            {tenantData && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    className="text-muted-foreground font-light"
+                    onClick={() => {
+                      navigator.clipboard.writeText(tenantData.tenantId);
+                    }}
+                  >
+                    □ {tenantData.tenantName}
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent className="bg-black">
+                  Click to copy tenant id.
+                </TooltipContent>
+              </Tooltip>
+            )}
           </div>
           <div className="flex items-center lg:order-2">
             <SearchBar navbarItems={navbarItems} prefix={prefix} />

packages/ui/src/theme/main-admin-layout/header-section.tsx

@@ -47,7 +47,7 @@ function findBreadcrumbItems(
 }
 
 export function HeaderSection() {
-  const { navbarItems, prefix, lang } = useTheme();
+  const { navbarItems, prefix, lang, tenantData } = useTheme();
   const pathName = usePathname();
   const {
     activeNavItem,
@@ -128,6 +128,7 @@ export function HeaderSection() {
         sectionLayoutItems={sectionLayoutItems}
         prefix={prefix}
         lang={lang}
+        tenantData={tenantData}
       />
       <PageHeader
         title={pageHeaderProps.title}

packages/ui/src/theme/main-admin-layout/index.tsx

@@ -13,6 +13,7 @@ function MainAdminLayout(props: any) {
       profileMenu={props.profileMenu}
       prefix={props.prefix}
       lang={props.lang}
+      tenantData={props.tenantData}
     >
       <HeaderSection />
     </ThemeProvider>