diff --git a/apps/web/app/(use-page-wrapper)/layout.tsx b/apps/web/app/(use-page-wrapper)/layout.tsx
index 878635c237..cecdb5b371 100644
--- a/apps/web/app/(use-page-wrapper)/layout.tsx
+++ b/apps/web/app/(use-page-wrapper)/layout.tsx
@@ -1,6 +1,8 @@
import { headers } from "next/headers";
import Script from "next/script";
+import { NavigationPermissionsProvider } from "@calcom/features/shell/permissions/NavigationPermissionsProvider";
+
import PageWrapper from "@components/PageWrapperAppDir";
export default async function PageWrapperLayout({ children }: { children: React.ReactNode }) {
@@ -21,7 +23,7 @@ export default async function PageWrapperLayout({ children }: { children: React.
].filter((script): script is { id: string; script: string } => !!script.script);
return (
- <>
+
{children}
{scripts.map((script) => (
@@ -36,6 +38,6 @@ export default async function PageWrapperLayout({ children }: { children: React.
/>
))}
- >
+
);
}
diff --git a/packages/features/shell/navigation/NavigationItem.tsx b/packages/features/shell/navigation/NavigationItem.tsx
index 7b59c7ed0f..72affdd75b 100644
--- a/packages/features/shell/navigation/NavigationItem.tsx
+++ b/packages/features/shell/navigation/NavigationItem.tsx
@@ -4,6 +4,7 @@ import React, { Fragment, useState, useEffect } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
+import { sessionStorage } from "@calcom/lib/webstorage";
import classNames from "@calcom/ui/classNames";
import { Badge } from "@calcom/ui/components/badge";
import { Icon } from "@calcom/ui/components/icon";
diff --git a/packages/features/shell/navigation/useShouldDisplayNavigationItem.ts b/packages/features/shell/navigation/useShouldDisplayNavigationItem.ts
index ffba4b37c8..75ed5ee181 100644
--- a/packages/features/shell/navigation/useShouldDisplayNavigationItem.ts
+++ b/packages/features/shell/navigation/useShouldDisplayNavigationItem.ts
@@ -1,10 +1,27 @@
import { useFlagMap } from "@calcom/features/flags/context/provider";
import { isKeyInObject } from "@calcom/lib/isKeyInObject";
+import {
+ useNavigationPermissions,
+ type NavigationItemName,
+} from "../permissions/NavigationPermissionsProvider";
import type { NavigationItemType } from "./NavigationItem";
export function useShouldDisplayNavigationItem(item: NavigationItemType) {
const flags = useFlagMap();
- if (isKeyInObject(item.name, flags)) return flags[item.name];
+ const { permissions: navigationPermissions, isLoading } = useNavigationPermissions();
+
+ if (isKeyInObject(item.name, flags) && flags[item.name] === false) {
+ return false;
+ }
+
+ if (isLoading) {
+ return true;
+ }
+
+ if (item.name in navigationPermissions) {
+ return navigationPermissions[item.name as NavigationItemName];
+ }
+
return true;
}
diff --git a/packages/features/shell/permissions/NavigationPermissionsProvider.tsx b/packages/features/shell/permissions/NavigationPermissionsProvider.tsx
new file mode 100644
index 0000000000..d452fc8fcf
--- /dev/null
+++ b/packages/features/shell/permissions/NavigationPermissionsProvider.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import React, { createContext, useContext } from "react";
+
+import { trpc } from "@calcom/trpc/react";
+
+import type { NavigationItemName, NavigationPermissions } from "./types";
+import { DEFAULT_PERMISSIONS } from "./types";
+
+export type { NavigationItemName, NavigationPermissions };
+
+/**
+ * Context for navigation permissions
+ */
+const NavigationPermissionsContext = createContext<{
+ permissions: NavigationPermissions;
+ isLoading: boolean;
+} | null>(null);
+
+/**
+ * Hook to access navigation permissions from context
+ * @returns NavigationPermissions object with boolean flags for each navigation item
+ */
+export function useNavigationPermissions(): { permissions: NavigationPermissions; isLoading: boolean } {
+ const context = useContext(NavigationPermissionsContext);
+ if (context === null) {
+ return {
+ permissions: DEFAULT_PERMISSIONS,
+ isLoading: false,
+ };
+ }
+ return context;
+}
+
+/**
+ * Hook to check if a specific navigation item should be displayed
+ * @param itemName The navigation item name to check
+ * @returns boolean indicating if the item should be displayed
+ */
+export function useNavigationPermission(itemName: NavigationItemName): boolean {
+ const { permissions } = useNavigationPermissions();
+ return permissions[itemName];
+}
+
+/**
+ * Provider component for navigation permissions
+ * Fetches permissions client-side using tRPC
+ */
+export function NavigationPermissionsProvider({ children }: { children: React.ReactNode }) {
+ const { data: permissions, isLoading } = trpc.viewer.pbac.getNavigationPermissions.useQuery(undefined, {
+ staleTime: 5 * 60 * 1000,
+ refetchOnWindowFocus: false,
+ });
+
+ const contextValue = {
+ permissions: permissions || DEFAULT_PERMISSIONS,
+ isLoading,
+ };
+
+ return (
+
+ {children}
+
+ );
+}
diff --git a/packages/features/shell/permissions/types.ts b/packages/features/shell/permissions/types.ts
new file mode 100644
index 0000000000..a24ea8dec8
--- /dev/null
+++ b/packages/features/shell/permissions/types.ts
@@ -0,0 +1,19 @@
+/**
+ * Navigation permission mapping for menu items
+ */
+export const NAVIGATION_PERMISSION_MAP = {
+ members: "organization.listMembers",
+ teams: "team.read",
+ insights: "insights.read",
+} as const;
+
+export const DEFAULT_PERMISSIONS = Object.fromEntries(
+ Object.keys(NAVIGATION_PERMISSION_MAP).map((key) => [key, true])
+) as NavigationPermissions;
+
+export type NavigationItemName = keyof typeof NAVIGATION_PERMISSION_MAP;
+
+/**
+ * Navigation permissions object containing boolean flags for each navigation item
+ */
+export type NavigationPermissions = Record;
diff --git a/packages/lib/server/repository/membership.ts b/packages/lib/server/repository/membership.ts
index 6063f14136..9850ddccb1 100644
--- a/packages/lib/server/repository/membership.ts
+++ b/packages/lib/server/repository/membership.ts
@@ -1,7 +1,7 @@
import { availabilityUserSelect, prisma, type PrismaTransaction } from "@calcom/prisma";
-import { MembershipRole } from "@calcom/prisma/enums";
import type { Prisma, Membership, PrismaClient } from "@calcom/prisma/client";
+import { MembershipRole } from "@calcom/prisma/enums";
import { credentialForCalendarServiceSelect } from "@calcom/prisma/selects/credential";
import logger from "../../logger";
diff --git a/packages/lib/webstorage.ts b/packages/lib/webstorage.ts
index c703bfda05..9522799179 100644
--- a/packages/lib/webstorage.ts
+++ b/packages/lib/webstorage.ts
@@ -34,3 +34,35 @@ export const localStorage = {
}
},
};
+
+export const sessionStorage = {
+ getItem(key: string) {
+ try {
+ // eslint-disable-next-line @calcom/eslint/avoid-web-storage
+ return window.sessionStorage.getItem(key);
+ } catch (e) {
+ // In case storage is restricted. Possible reasons
+ // 1. Third Party Context in Chrome Incognito mode.
+ return null;
+ }
+ },
+ setItem(key: string, value: string) {
+ try {
+ // eslint-disable-next-line @calcom/eslint/avoid-web-storage
+ window.sessionStorage.setItem(key, value);
+ } catch (e) {
+ // In case storage is restricted. Possible reasons
+ // 1. Third Party Context in Chrome Incognito mode.
+ // 2. Storage limit reached
+ return;
+ }
+ },
+ removeItem: (key: string) => {
+ try {
+ // eslint-disable-next-line @calcom/eslint/avoid-web-storage
+ window.sessionStorage.removeItem(key);
+ } catch (e) {
+ return;
+ }
+ },
+};
diff --git a/packages/trpc/server/routers/viewer/pbac/_router.tsx b/packages/trpc/server/routers/viewer/pbac/_router.tsx
index c3c07b8e09..b314d39263 100644
--- a/packages/trpc/server/routers/viewer/pbac/_router.tsx
+++ b/packages/trpc/server/routers/viewer/pbac/_router.tsx
@@ -5,6 +5,12 @@ import { isValidPermissionString } from "@calcom/features/pbac/domain/types/perm
import type { PermissionString } from "@calcom/features/pbac/domain/types/permission-registry";
import { PermissionCheckService } from "@calcom/features/pbac/services/permission-check.service";
import { RoleService } from "@calcom/features/pbac/services/role.service";
+import {
+ NAVIGATION_PERMISSION_MAP,
+ DEFAULT_PERMISSIONS,
+ type NavigationItemName,
+} from "@calcom/features/shell/permissions/types";
+import { MembershipRepository } from "@calcom/lib/server/repository/membership";
import prisma from "@calcom/prisma";
import { RoleType, MembershipRole } from "@calcom/prisma/enums";
@@ -33,6 +39,30 @@ export const permissionsRouter = router({
return await permissionCheckService.getUserPermissions(ctx.user.id);
}),
+ getNavigationPermissions: authedProcedure.query(async ({ ctx }) => {
+ if (!ctx.user?.id) {
+ return DEFAULT_PERMISSIONS;
+ }
+
+ const teamIds = await MembershipRepository.findUserTeamIds({ userId: ctx.user.id });
+ if (teamIds.length === 0) {
+ return DEFAULT_PERMISSIONS;
+ }
+
+ const permissionService = new PermissionCheckService();
+ const navigationItems = Object.keys(NAVIGATION_PERMISSION_MAP) as Array;
+
+ const permissionChecks = await Promise.all(
+ navigationItems.map((itemName) =>
+ permissionService.getTeamIdsWithPermission(ctx.user.id, NAVIGATION_PERMISSION_MAP[itemName])
+ )
+ );
+
+ return Object.fromEntries(
+ navigationItems.map((itemName, index) => [itemName, permissionChecks[index].length > 0])
+ ) as Record;
+ }),
+
checkPermission: authedProcedure
.input(
z.object({