Update package-lock.json

config.json

@@ -12,6 +12,5 @@
   "tokenSource": "$NETBIRD_TOKEN_SOURCE",
   "dragQueryParams": "$NETBIRD_DRAG_QUERY_PARAMS",
   "hotjarTrackID": "$NETBIRD_HOTJAR_TRACK_ID",
-  "googleAnalyticsID": "$NETBIRD_GOOGLE_ANALYTICS_ID",
-  "googleTagManagerID": "$NETBIRD_GOOGLE_TAG_MANAGER_ID"
+  "googleAnalyticsID": "$NETBIRD_GOOGLE_ANALYTICS_ID"
 }

docker/init_react_envs.sh

@@ -58,14 +58,13 @@ export NETBIRD_MGMT_API_ENDPOINT=$(echo $NETBIRD_MGMT_API_ENDPOINT | sed -E 's/(
 export NETBIRD_MGMT_GRPC_API_ENDPOINT=${NETBIRD_MGMT_GRPC_API_ENDPOINT}
 export NETBIRD_HOTJAR_TRACK_ID=${NETBIRD_HOTJAR_TRACK_ID}
 export NETBIRD_GOOGLE_ANALYTICS_ID=${NETBIRD_GOOGLE_ANALYTICS_ID}
-export NETBIRD_GOOGLE_TAG_MANAGER_ID=${NETBIRD_GOOGLE_TAG_MANAGER_ID}
 export NETBIRD_TOKEN_SOURCE=${NETBIRD_TOKEN_SOURCE:-accessToken}
 export NETBIRD_DRAG_QUERY_PARAMS=${NETBIRD_DRAG_QUERY_PARAMS:-false}
 
 echo "NetBird latest version: ${NETBIRD_LATEST_VERSION}"
 
 # replace ENVs in the config
-ENV_STR="\$\$USE_AUTH0 \$\$AUTH_AUDIENCE \$\$AUTH_AUTHORITY \$\$AUTH_CLIENT_ID \$\$AUTH_CLIENT_SECRET \$\$AUTH_SUPPORTED_SCOPES \$\$NETBIRD_MGMT_API_ENDPOINT \$\$NETBIRD_MGMT_GRPC_API_ENDPOINT \$\$NETBIRD_HOTJAR_TRACK_ID \$\$NETBIRD_GOOGLE_ANALYTICS_ID \$\$NETBIRD_GOOGLE_TAG_MANAGER_ID \$\$AUTH_REDIRECT_URI \$\$AUTH_SILENT_REDIRECT_URI \$\$NETBIRD_TOKEN_SOURCE \$\$NETBIRD_DRAG_QUERY_PARAMS"
+ENV_STR="\$\$USE_AUTH0 \$\$AUTH_AUDIENCE \$\$AUTH_AUTHORITY \$\$AUTH_CLIENT_ID \$\$AUTH_CLIENT_SECRET \$\$AUTH_SUPPORTED_SCOPES \$\$NETBIRD_MGMT_API_ENDPOINT \$\$NETBIRD_MGMT_GRPC_API_ENDPOINT \$\$NETBIRD_HOTJAR_TRACK_ID \$\$NETBIRD_GOOGLE_ANALYTICS_ID \$\$AUTH_REDIRECT_URI \$\$AUTH_SILENT_REDIRECT_URI \$\$NETBIRD_TOKEN_SOURCE \$\$NETBIRD_DRAG_QUERY_PARAMS"
 
 OIDC_TRUSTED_DOMAINS="/usr/share/nginx/html/OidcTrustedDomains.js"
 envsubst "$ENV_STR" < "$OIDC_TRUSTED_DOMAINS".tmpl > "$OIDC_TRUSTED_DOMAINS"

package.json

@@ -41,8 +41,6 @@
     "@types/react-dom": "^18",
     "@types/react-window": "^1.8.8",
     "autoprefixer": "^10",
-    "chart.js": "^4.4.8",
-    "chroma-js": "^3.1.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "cmdk": "^0.2.0",
@@ -56,9 +54,8 @@
     "flowbite-react": "^0.6.4",
     "framer-motion": "^10.16.4",
     "ip-cidr": "^3.1.0",
-    "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.479.0",
+    "lucide-react": "^0.460.0",
     "next": "^14.2.28",
     "next-themes": "^0.2.1",
     "punycode": "^2.3.1",
@@ -76,15 +73,11 @@
     "swr": "^2.2.4",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7",
-    "timescape": "^0.7.1",
     "typescript": "^5"
   },
   "devDependencies": {
-    "@faker-js/faker": "^9.5.1",
-    "@types/chroma-js": "^3.1.1",
-    "@types/js-cookie": "^3.0.6",
-    "eslint-config-next": "^14.2.28",
     "cypress": "^13.13.0",
+    "eslint-config-next": "^14.2.28",
     "postcss": "^8",
     "prettier": "3.0.3",
     "tailwindcss": "^3"

src/app/(dashboard)/(deprecated)/activity/page.tsx

@@ -1,10 +0,0 @@
-"use client";
-
-import FullScreenLoading from "@components/ui/FullScreenLoading";
-import { useRedirect } from "@hooks/useRedirect";
-import React from "react";
-
-export default function Redirect() {
-  useRedirect("/events/audit");
-  return <FullScreenLoading height={"auto"} />;
-}

src/app/(dashboard)/access-control/page.tsx

@@ -11,7 +11,6 @@ import { ExternalLinkIcon } from "lucide-react";
 import React, { lazy, Suspense } from "react";
 import AccessControlIcon from "@/assets/icons/AccessControlIcon";
 import GroupsProvider from "@/contexts/GroupsProvider";
-import { usePermissions } from "@/contexts/PermissionsProvider";
 import PoliciesProvider from "@/contexts/PoliciesProvider";
 import { Policy } from "@/interfaces/Policy";
 import PageContainer from "@/layouts/PageContainer";
@@ -20,8 +19,6 @@ const AccessControlTable = lazy(
   () => import("@/modules/access-control/table/AccessControlTable"),
 );
 export default function AccessControlPage() {
-  const { permission } = usePermissions();
-
   const { data: policies, isLoading } = useFetchApi<Policy[]>("/policies");
 
   const { ref: headingRef, portalTarget } =
@@ -56,10 +53,7 @@ export default function AccessControlPage() {
           </Paragraph>
         </div>
 
-        <RestrictedAccess
-          page={"Access Control"}
-          hasAccess={permission.policies.read}
-        >
+        <RestrictedAccess page={"Access Control"}>
           <PoliciesProvider>
             <Suspense fallback={<SkeletonTable />}>
               <AccessControlTable

src/app/(dashboard)/activity/page.tsx

@@ -6,19 +6,15 @@ import Paragraph from "@components/Paragraph";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
 import { usePortalElement } from "@hooks/usePortalElement";
 import useFetchApi from "@utils/api";
-import { ExternalLinkIcon, LogsIcon } from "lucide-react";
+import { ExternalLinkIcon } from "lucide-react";
 import React from "react";
 import ActivityIcon from "@/assets/icons/ActivityIcon";
-import { usePermissions } from "@/contexts/PermissionsProvider";
 import { ActivityEvent } from "@/interfaces/ActivityEvent";
 import PageContainer from "@/layouts/PageContainer";
 import ActivityTable from "@/modules/activity/ActivityTable";
 
 export default function Activity() {
-  const { permission } = usePermissions();
-
-  const { data: events, isLoading } =
-    useFetchApi<ActivityEvent[]>("/events/audit");
+  const { data: events, isLoading } = useFetchApi<ActivityEvent[]>("/events");
 
   const { ref: headingRef, portalTarget } =
     usePortalElement<HTMLHeadingElement>();
@@ -28,31 +24,30 @@ export default function Activity() {
       <div className={"p-default py-6"}>
         <Breadcrumbs>
           <Breadcrumbs.Item
+            href={"/activity"}
             label={"Activity"}
-            disabled={true}
             icon={<ActivityIcon size={13} />}
           />
-          <Breadcrumbs.Item
-            href={"/events/audit"}
-            label={"Audit Events"}
-            icon={<LogsIcon size={18} />}
-          />
         </Breadcrumbs>
-        <h1 ref={headingRef}>Audit Events</h1>
-        <Paragraph>Here you can see all the audit activity events.</Paragraph>
+        <h1 ref={headingRef}>Activity Events</h1>
+        <Paragraph>
+          Here you can see all the account and network activity events.
+        </Paragraph>
         <Paragraph>
           Learn more about{" "}
           <InlineLink
-            href={"https://docs.netbird.io/how-to/audit-events-logging"}
+            href={
+              "https://docs.netbird.io/how-to/monitor-system-and-network-activity"
+            }
             target={"_blank"}
           >
-            Audit Events
+            Activity Events
             <ExternalLinkIcon size={12} />
           </InlineLink>
           in our documentation.
         </Paragraph>
       </div>
-      <RestrictedAccess page={"Activity"} hasAccess={permission.events.read}>
+      <RestrictedAccess page={"Activity"}>
         <ActivityTable
           events={events}
           isLoading={isLoading}

src/app/(dashboard)/dns/nameservers/page.tsx

@@ -10,7 +10,6 @@ import useFetchApi from "@utils/api";
 import { ExternalLinkIcon, ServerIcon } from "lucide-react";
 import React, { lazy, Suspense } from "react";
 import DNSIcon from "@/assets/icons/DNSIcon";
-import { usePermissions } from "@/contexts/PermissionsProvider";
 import { NameserverGroup } from "@/interfaces/Nameserver";
 import PageContainer from "@/layouts/PageContainer";
 
@@ -19,8 +18,6 @@ const NameserverGroupTable = lazy(
 );
 
 export default function NameServers() {
-  const { permission } = usePermissions();
-
   const { data: nameserverGroups, isLoading } =
     useFetchApi<NameserverGroup[]>("/dns/nameservers");
 
@@ -60,10 +57,7 @@ export default function NameServers() {
         </Paragraph>
       </div>
 
-      <RestrictedAccess
-        page={"Nameservers"}
-        hasAccess={permission.nameservers.read}
-      >
+      <RestrictedAccess page={"Nameservers"}>
         <Suspense fallback={<SkeletonTable />}>
           <NameserverGroupTable
             nameserverGroups={nameserverGroups}

src/app/(dashboard)/dns/settings/page.tsx

@@ -17,7 +17,6 @@ import React from "react";
 import Skeleton from "react-loading-skeleton";
 import { useSWRConfig } from "swr";
 import DNSIcon from "@/assets/icons/DNSIcon";
-import { usePermissions } from "@/contexts/PermissionsProvider";
 import { useHasChanges } from "@/hooks/useHasChanges";
 import { Group } from "@/interfaces/Group";
 import { NameserverSettings } from "@/interfaces/NameserverSettings";
@@ -26,8 +25,6 @@ import useGroupHelper from "@/modules/groups/useGroupHelper";
 import { useGroupIdsToGroups } from "@/modules/groups/useGroupIdsToGroups";
 
 export default function NameServerSettings() {
-  const { permission } = usePermissions();
-
   const { data: settings, isLoading } =
     useFetchApi<NameserverSettings>("/dns/settings");
 
@@ -64,7 +61,7 @@ export default function NameServerSettings() {
           </InlineLink>
           in our documentation.
         </Paragraph>
-        <RestrictedAccess page={"DNS Settings"} hasAccess={permission.dns.read}>
+        <RestrictedAccess page={"DNS Settings"}>
           {!isLoading && initialDNSGroups !== undefined ? (
             <SettingDisabledManagementGroups initialGroups={initialDNSGroups} />
           ) : (
@@ -89,7 +86,6 @@ const SettingDisabledManagementGroups = ({
 }) => {
   const settingRequest = useApiCall<NameserverSettings>("/dns/settings");
   const { mutate } = useSWRConfig();
-  const { permission } = usePermissions();
 
   const [selectedGroups, setSelectedGroups, { save: saveGroups }] =
     useGroupHelper({
@@ -128,7 +124,6 @@ const SettingDisabledManagementGroups = ({
           dataCy={"dns-groups-selector"}
           onChange={setSelectedGroups}
           values={selectedGroups}
-          disabled={!permission.dns.update}
         />
       </div>
       <div
@@ -140,7 +135,7 @@ const SettingDisabledManagementGroups = ({
           variant={"primary"}
           size={"sm"}
           onClick={saveSettings}
-          disabled={!hasChanges || !permission.dns.update}
+          disabled={!hasChanges}
           data-cy={"save-changes"}
         >
           Save Changes

src/app/(dashboard)/events/audit/layout.tsx

@@ -1,8 +0,0 @@
-import { globalMetaTitle } from "@utils/meta";
-import type { Metadata } from "next";
-import BlankLayout from "@/layouts/BlankLayout";
-
-export const metadata: Metadata = {
-  title: `Audit Events - Activity - ${globalMetaTitle}`,
-};
-export default BlankLayout;

src/app/(dashboard)/network-routes/page.tsx

@@ -11,7 +11,6 @@ import { ExternalLinkIcon } from "lucide-react";
 import React, { lazy, Suspense } from "react";
 import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
 import PeersProvider from "@/contexts/PeersProvider";
-import { usePermissions } from "@/contexts/PermissionsProvider";
 import RoutesProvider from "@/contexts/RoutesProvider";
 import { Route } from "@/interfaces/Route";
 import PageContainer from "@/layouts/PageContainer";
@@ -22,7 +21,6 @@ const NetworkRoutesTable = lazy(
 );
 
 export default function NetworkRoutes() {
-  const { permission } = usePermissions();
   const { data: routes, isLoading } = useFetchApi<Route[]>("/routes");
   const groupedRoutes = useGroupedRoutes({ routes });
 
@@ -61,7 +59,7 @@ export default function NetworkRoutes() {
             </Paragraph>
           </div>
 
-          <RestrictedAccess hasAccess={permission.routes.read}>
+          <RestrictedAccess>
             <Suspense fallback={<SkeletonTable />}>
               <NetworkRoutesTable
                 isLoading={isLoading}

src/app/(dashboard)/network/page.tsx

@@ -21,7 +21,7 @@ import { useSearchParams } from "next/navigation";
 import React, { useMemo, useState } from "react";
 import { useSWRConfig } from "swr";
 import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
-import { usePermissions } from "@/contexts/PermissionsProvider";
+import { useLoggedInUser } from "@/contexts/UsersProvider";
 import { Network } from "@/interfaces/Network";
 import PageContainer from "@/layouts/PageContainer";
 import { NetworkInformationSquare } from "@/modules/networks/misc/NetworkInformationSquare";
@@ -48,8 +48,7 @@ export default function NetworkDetailPage() {
 }
 
 function NetworkOverview({ network }: Readonly<{ network: Network }>) {
-  const { permission } = usePermissions();
-
+  const { isUser } = useLoggedInUser();
   const [networkModal, setNetworkModal] = useState(false);
   const { mutate } = useSWRConfig();
 
@@ -65,7 +64,7 @@ function NetworkOverview({ network }: Readonly<{ network: Network }>) {
             <Breadcrumbs.Item
               href={"/networks"}
               label={"Networks"}
-              disabled={!permission.networks.read}
+              disabled={isUser}
               icon={<NetworkRoutesIcon size={13} />}
             />
             <Breadcrumbs.Item
@@ -88,16 +87,14 @@ function NetworkOverview({ network }: Readonly<{ network: Network }>) {
                 size={"lg"}
                 description={network.description}
               />
-              {permission.networks.update && (
-                <button
-                  className={
-                    "flex items-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-neutral-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md cursor-pointer"
-                  }
-                  onClick={() => setNetworkModal(true)}
-                >
-                  <PencilLineIcon size={18} />
-                </button>
-              )}
+              <button
+                className={
+                  "flex items-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-neutral-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md cursor-pointer"
+                }
+                onClick={() => setNetworkModal(true)}
+              >
+                <PencilLineIcon size={18} />
+              </button>
               <NetworkModal
                 open={networkModal}
                 setOpen={setNetworkModal}

src/app/(dashboard)/networks/page.tsx

@@ -10,14 +10,12 @@ import useFetchApi from "@utils/api";
 import { ExternalLinkIcon } from "lucide-react";
 import React, { Suspense } from "react";
 import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
-import { usePermissions } from "@/contexts/PermissionsProvider";
 import { Network } from "@/interfaces/Network";
 import PageContainer from "@/layouts/PageContainer";
 import NetworksTable from "@/modules/networks/table/NetworksTable";
 
 export default function Networks() {
   const { data: networks, isLoading } = useFetchApi<Network[]>("/networks");
-  const { permission } = usePermissions();
   const { ref: headingRef, portalTarget } =
     usePortalElement<HTMLHeadingElement>();
 
@@ -33,8 +31,8 @@ export default function Networks() {
         </Breadcrumbs>
         <h1 ref={headingRef}>Networks</h1>
         <Paragraph>
-          Networks allow you to access internal resources in LANs and VPCs
-          without installing NetBird on every machine.
+          Networks allow you to access internal resources in LANs and VPCs without
+          installing NetBird on every machine.
         </Paragraph>
         <Paragraph>
           Learn more about
@@ -49,7 +47,7 @@ export default function Networks() {
         </Paragraph>
       </div>
 
-      <RestrictedAccess hasAccess={permission.networks.read}>
+      <RestrictedAccess>
         <Suspense fallback={<SkeletonTable />}>
           <NetworksTable
             data={networks}

src/app/(dashboard)/peers/page.tsx

@@ -9,19 +9,18 @@ import { ExternalLinkIcon } from "lucide-react";
 import React, { lazy, Suspense } from "react";
 import PeerIcon from "@/assets/icons/PeerIcon";
 import PeersProvider, { usePeers } from "@/contexts/PeersProvider";
-import { usePermissions } from "@/contexts/PermissionsProvider";
-import { useUsers } from "@/contexts/UsersProvider";
+import { useLoggedInUser, useUsers } from "@/contexts/UsersProvider";
 import PageContainer from "@/layouts/PageContainer";
 import { SetupModalContent } from "@/modules/setup-netbird-modal/SetupModal";
 
 const PeersTable = lazy(() => import("@/modules/peers/PeersTable"));
 
 export default function Peers() {
-  const { isRestricted } = usePermissions();
+  const { permission } = useLoggedInUser();
 
   return (
     <PageContainer>
-      {isRestricted ? (
+      {permission.dashboard_view === "blocked" ? (
         <PeersBlockedView />
       ) : (
         <PeersProvider>

src/app/(dashboard)/posture-checks/page.tsx

@@ -11,7 +11,6 @@ import { ExternalLinkIcon, ShieldCheck } from "lucide-react";
 import React, { lazy, Suspense } from "react";
 import AccessControlIcon from "@/assets/icons/AccessControlIcon";
 import GroupsProvider from "@/contexts/GroupsProvider";
-import { usePermissions } from "@/contexts/PermissionsProvider";
 import PoliciesProvider from "@/contexts/PoliciesProvider";
 import { PostureCheck } from "@/interfaces/PostureCheck";
 import PageContainer from "@/layouts/PageContainer";
@@ -20,7 +19,6 @@ const PostureCheckTable = lazy(
   () => import("@/modules/posture-checks/table/PostureCheckTable"),
 );
 export default function PostureChecksPage() {
-  const { permission } = usePermissions();
   const { data: postureChecks, isLoading } =
     useFetchApi<PostureCheck[]>("/posture-checks");
 
@@ -61,10 +59,7 @@ export default function PostureChecksPage() {
           </Paragraph>
         </div>
 
-        <RestrictedAccess
-          page={"Posture Checks"}
-          hasAccess={permission.policies.read}
-        >
+        <RestrictedAccess page={"Posture Checks"}>
           <PoliciesProvider>
             <Suspense fallback={<SkeletonTable />}>
               <PostureCheckTable

src/app/(dashboard)/settings/page.tsx

@@ -10,8 +10,7 @@ import {
   ShieldIcon,
 } from "lucide-react";
 import { useSearchParams } from "next/navigation";
-import React, { useEffect, useMemo, useState } from "react";
-import { usePermissions } from "@/contexts/PermissionsProvider";
+import React, { useEffect, useState } from "react";
 import { useLoggedInUser } from "@/contexts/UsersProvider";
 import PageContainer from "@/layouts/PageContainer";
 import { useAccount } from "@/modules/account/useAccount";
@@ -24,15 +23,8 @@ import PermissionsTab from "@/modules/settings/PermissionsTab";
 export default function NetBirdSettings() {
   const queryParams = useSearchParams();
   const queryTab = queryParams.get("tab");
-  const { permission } = usePermissions();
-
-  const initialTab = useMemo(() => {
-    if (permission.settings.read) return "authentication";
-    return "authentication";
-  }, [permission]);
-
-  const [tab, setTab] = useState(queryTab ?? initialTab);
-
+  const [tab, setTab] = useState(queryTab || "authentication");
+  const { isOwner } = useLoggedInUser();
   const account = useAccount();
 
   useEffect(() => {
@@ -45,33 +37,28 @@ export default function NetBirdSettings() {
     <PageContainer>
       <VerticalTabs value={tab} onChange={setTab}>
         <VerticalTabs.List>
-          {permission.settings.read && (
-            <>
-              <VerticalTabs.Trigger value="authentication">
-                <ShieldIcon size={14} />
-                Authentication
-              </VerticalTabs.Trigger>
-              <VerticalTabs.Trigger value="groups">
-                <FolderGit2Icon size={14} />
-                Groups
-              </VerticalTabs.Trigger>
-              <VerticalTabs.Trigger value="permissions">
-                <LockIcon size={14} />
-                Permissions
-              </VerticalTabs.Trigger>
-              <VerticalTabs.Trigger value="networks">
-                <NetworkIcon size={14} />
-                Networks
-              </VerticalTabs.Trigger>
-            </>
-          )}
-
-          <DangerZoneTabTrigger />
+          <VerticalTabs.Trigger value="authentication">
+            <ShieldIcon size={14} />
+            Authentication
+          </VerticalTabs.Trigger>
+          <VerticalTabs.Trigger value="groups">
+            <FolderGit2Icon size={14} />
+            Groups
+          </VerticalTabs.Trigger>
+          <VerticalTabs.Trigger value="permissions">
+            <LockIcon size={14} />
+            Permissions
+          </VerticalTabs.Trigger>
+          <VerticalTabs.Trigger value="networks">
+            <NetworkIcon size={14} />
+            Networks
+          </VerticalTabs.Trigger>
+          <VerticalTabs.Trigger value="danger-zone" disabled={!isOwner}>
+            <AlertOctagonIcon size={14} />
+            Danger zone
+          </VerticalTabs.Trigger>
         </VerticalTabs.List>
-        <RestrictedAccess
-          page={"Settings"}
-          hasAccess={permission.settings.read}
-        >
+        <RestrictedAccess page={"Settings"}>
           <div className={"border-l border-nb-gray-930 w-full"}>
             {account && <AuthenticationTab account={account} />}
             {account && <PermissionsTab account={account} />}
@@ -84,16 +71,3 @@ export default function NetBirdSettings() {
     </PageContainer>
   );
 }
-
-const DangerZoneTabTrigger = () => {
-  const { isOwner } = useLoggedInUser();
-
-  return (
-    isOwner && (
-      <VerticalTabs.Trigger value="danger-zone" disabled={!isOwner}>
-        <AlertOctagonIcon size={14} />
-        Danger zone
-      </VerticalTabs.Trigger>
-    )
-  );
-};

src/app/(dashboard)/setup-keys/page.tsx

@@ -11,7 +11,6 @@ import { ExternalLinkIcon } from "lucide-react";
 import React, { lazy, Suspense, useMemo } from "react";
 import SetupKeysIcon from "@/assets/icons/SetupKeysIcon";
 import { useGroups } from "@/contexts/GroupsProvider";
-import { usePermissions } from "@/contexts/PermissionsProvider";
 import { Group } from "@/interfaces/Group";
 import { SetupKey } from "@/interfaces/SetupKey";
 import PageContainer from "@/layouts/PageContainer";
@@ -22,7 +21,6 @@ const SetupKeysTable = lazy(
 
 export default function SetupKeys() {
   const { data: setupKeys, isLoading } = useFetchApi<SetupKey[]>("/setup-keys");
-  const { permission } = usePermissions();
   const { groups } = useGroups();
 
   const setupKeysWithGroups = useMemo(() => {
@@ -73,10 +71,7 @@ export default function SetupKeys() {
           in our documentation.
         </Paragraph>
       </div>
-      <RestrictedAccess
-        page={"Setup Keys"}
-        hasAccess={permission.setup_keys.read}
-      >
+      <RestrictedAccess page={"Setup Keys"}>
         <Suspense fallback={<SkeletonTable />}>
           <SetupKeysTable
             headingTarget={portalTarget}

src/app/(dashboard)/team/service-users/page.tsx

@@ -11,7 +11,6 @@ import useFetchApi from "@utils/api";
 import { ExternalLinkIcon } from "lucide-react";
 import React, { lazy, Suspense } from "react";
 import TeamIcon from "@/assets/icons/TeamIcon";
-import { usePermissions } from "@/contexts/PermissionsProvider";
 import { User } from "@/interfaces/User";
 import PageContainer from "@/layouts/PageContainer";
 
@@ -20,7 +19,6 @@ const ServiceUsersTable = lazy(
 );
 
 export default function ServiceUsers() {
-  const { permission } = usePermissions();
   const { data: users, isLoading } = useFetchApi<User[]>(
     "/users?service_user=true",
   );
@@ -61,10 +59,7 @@ export default function ServiceUsers() {
           in our documentation.
         </Paragraph>
       </div>
-      <RestrictedAccess
-        page={"Service Users"}
-        hasAccess={permission.users.read}
-      >
+      <RestrictedAccess page={"Service Users"}>
         <Suspense fallback={<SkeletonTable />}>
           <ServiceUsersTable
             users={users}