Remove integrations from public repo and sync changes (#369)

* Change icon size

* Remove integrations

* Add no cache header

* Add analytics event tracking

* Add small announcement improvements

* Remove peer approval setting

* Do not load countries when user has no permission

* Add tab query params to settings

* Decrease navigation font size

* Change order of providers

* Increase padding for modals

* Show page only when user is fully loaded and found

* Remove unused state

* Remove integrations page

.github/workflows/build_and_push.yml

@@ -2,6 +2,7 @@ name: build and push
 on:
   push:
     branches:
+      - "feature/**"
       - main
     tags:
       - "**"

docker/default.conf

@@ -1,4 +1,3 @@
-# simple server configuration to replace nginx's default
 server {
 	listen 80 default_server;
 	listen [::]:80 default_server;
@@ -7,10 +6,14 @@ server {
 
     location / {
       try_files $uri $uri.html $uri/ =404;
+      add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
+      expires off;
    }
 
    error_page 404 /404.html;
    location = /404.html {
       internal;
+      add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
+      expires off;
    }
 }

package-lock.json

@@ -27,6 +27,7 @@
         "@tabler/icons-react": "^2.39.0",
         "@tanstack/match-sorter-utils": "^8.8.4",
         "@tanstack/react-table": "^8.10.7",
+        "@types/crypto-js": "^4.2.2",
         "@types/lodash": "^4.14.200",
         "@types/node": "20.10.6",
         "@types/react": "^18",
@@ -35,6 +36,7 @@
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.0.0",
         "cmdk": "^0.2.0",
+        "crypto-js": "^4.2.0",
         "date-fns": "^2.30.0",
         "dayjs": "^1.11.10",
         "eslint": "^8",
@@ -1661,6 +1663,11 @@
       "resolved": "https://registry.npmjs.org/@types/base64-js/-/base64-js-1.3.2.tgz",
       "integrity": "sha512-Q2Xn2/vQHRGLRXhQ5+BSLwhHkR3JVflxVKywH0Q6fVoAiUE8fFYL2pE5/l2ZiOiBDfA8qUqRnSxln4G/NFz1Sg=="
     },
+    "node_modules/@types/crypto-js": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@types/crypto-js/-/crypto-js-4.2.2.tgz",
+      "integrity": "sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ=="
+    },
     "node_modules/@types/jquery": {
       "version": "3.5.29",
       "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.29.tgz",
@@ -2974,6 +2981,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/crypto-js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
+      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
+    },
     "node_modules/css-mediaquery": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",

package.json

@@ -32,6 +32,7 @@
     "@tabler/icons-react": "^2.39.0",
     "@tanstack/match-sorter-utils": "^8.8.4",
     "@tanstack/react-table": "^8.10.7",
+    "@types/crypto-js": "^4.2.2",
     "@types/lodash": "^4.14.200",
     "@types/node": "20.10.6",
     "@types/react": "^18",
@@ -40,6 +41,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "cmdk": "^0.2.0",
+    "crypto-js": "^4.2.0",
     "date-fns": "^2.30.0",
     "dayjs": "^1.11.10",
     "eslint": "^8",

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

@@ -5,14 +5,12 @@ import InlineLink from "@components/InlineLink";
 import Paragraph from "@components/Paragraph";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
 import useFetchApi from "@utils/api";
-import { isLocalDev, isNetBirdHosted } from "@utils/netbird";
 import { ExternalLinkIcon } from "lucide-react";
 import React from "react";
 import ActivityIcon from "@/assets/icons/ActivityIcon";
 import { ActivityEvent } from "@/interfaces/ActivityEvent";
 import PageContainer from "@/layouts/PageContainer";
 import ActivityTable from "@/modules/activity/ActivityTable";
-import { EventStreamingCard } from "@/modules/integrations/event-streaming/EventStreamingCard";
 
 export default function Activity() {
   const { data: events, isLoading } = useFetchApi<ActivityEvent[]>("/events");
@@ -50,7 +48,6 @@ export default function Activity() {
         </Paragraph>
       </div>
       <RestrictedAccess page={"Activity"}>
-        {(isLocalDev() || isNetBirdHosted()) && <EventStreamingCard />}
         <ActivityTable events={events} isLoading={isLoading} />
       </RestrictedAccess>
     </PageContainer>

src/app/(dashboard)/integrations/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: `Integrations - ${globalMetaTitle}`,
-};
-export default BlankLayout;

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

@@ -1,39 +0,0 @@
-"use client";
-
-import { RestrictedAccess } from "@components/ui/RestrictedAccess";
-import { VerticalTabs } from "@components/VerticalTabs";
-import { FileText, FingerprintIcon } from "lucide-react";
-import { useSearchParams } from "next/navigation";
-import React, { useState } from "react";
-import PageContainer from "@/layouts/PageContainer";
-import EventStreamingTab from "@/modules/integrations/event-streaming/EventStreamingTab";
-import IdentityProviderTab from "@/modules/integrations/idp-sync/IdentityProviderTab";
-
-export default function Integrations() {
-  const searchParams = useSearchParams();
-  const currentTab = searchParams.get("tab");
-  const [tab, setTab] = useState(currentTab || "event-streaming");
-
-  return (
-    <PageContainer>
-      <VerticalTabs value={tab} onChange={setTab}>
-        <VerticalTabs.List>
-          <VerticalTabs.Trigger value="event-streaming">
-            <FileText size={14} />
-            Event Streaming
-          </VerticalTabs.Trigger>
-          <VerticalTabs.Trigger value="identity-provider">
-            <FingerprintIcon size={14} />
-            Identity Provider
-          </VerticalTabs.Trigger>
-        </VerticalTabs.List>
-        <RestrictedAccess page={"Integrations"}>
-          <div className={"border-l border-nb-gray-930 w-full"}>
-            <EventStreamingTab />
-            <IdentityProviderTab />
-          </div>
-        </RestrictedAccess>
-      </VerticalTabs>
-    </PageContainer>
-  );
-}

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

@@ -26,25 +26,32 @@ import TextWithTooltip from "@components/ui/TextWithTooltip";
 import { IconCloudLock, IconInfoCircle } from "@tabler/icons-react";
 import useFetchApi from "@utils/api";
 import dayjs from "dayjs";
-import { trim } from "lodash";
+import { isEmpty, trim } from "lodash";
 import {
   Cpu,
+  FlagIcon,
   Globe,
   History,
+  LockIcon,
   MapPin,
   MonitorSmartphoneIcon,
+  NetworkIcon,
   PencilIcon,
   TerminalSquare,
 } from "lucide-react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { toASCII } from "punycode";
 import React, { useMemo, useState } from "react";
+import Skeleton from "react-loading-skeleton";
 import { useSWRConfig } from "swr";
+import RoundedFlag from "@/assets/countries/RoundedFlag";
 import CircleIcon from "@/assets/icons/CircleIcon";
 import NetBirdIcon from "@/assets/icons/NetBirdIcon";
 import PeerIcon from "@/assets/icons/PeerIcon";
+import { useCountries } from "@/contexts/CountryProvider";
 import PeerProvider, { usePeer } from "@/contexts/PeerProvider";
 import RoutesProvider from "@/contexts/RoutesProvider";
+import { useLoggedInUser } from "@/contexts/UsersProvider";
 import { useHasChanges } from "@/hooks/useHasChanges";
 import { getOperatingSystem } from "@/hooks/useOperatingSystem";
 import { OperatingSystem } from "@/interfaces/OperatingSystem";
@@ -119,6 +126,8 @@ function PeerOverview() {
     });
   };
 
+  const { isUser } = useLoggedInUser();
+
   return (
     <PageContainer>
       <RoutesProvider>
@@ -139,33 +148,35 @@ function PeerOverview() {
                   <CircleIcon
                     active={peer.connected}
                     size={12}
-                    className={"mb-[3px]"}
+                    className={"mb-[3px] shrink-0"}
                   />
                   <TextWithTooltip text={name} maxChars={30} />
 
-                  <Modal
-                    open={showEditNameModal}
-                    onOpenChange={setShowEditNameModal}
-                  >
-                    <ModalTrigger>
-                      <div
-                        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"
-                        }
-                      >
-                        <PencilIcon size={16} />
-                      </div>
-                    </ModalTrigger>
-                    <EditNameModal
-                      onSuccess={(newName) => {
-                        setName(newName);
-                        setShowEditNameModal(false);
-                      }}
-                      peer={peer}
-                      initialName={name}
-                      key={showEditNameModal ? 1 : 0}
-                    />
-                  </Modal>
+                  {!isUser && (
+                    <Modal
+                      open={showEditNameModal}
+                      onOpenChange={setShowEditNameModal}
+                    >
+                      <ModalTrigger>
+                        <div
+                          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"
+                          }
+                        >
+                          <PencilIcon size={16} />
+                        </div>
+                      </ModalTrigger>
+                      <EditNameModal
+                        onSuccess={(newName) => {
+                          setName(newName);
+                          setShowEditNameModal(false);
+                        }}
+                        peer={peer}
+                        initialName={name}
+                        key={showEditNameModal ? 1 : 0}
+                      />
+                    </Modal>
+                  )}
                 </h1>
                 <LoginExpiredBadge loginExpired={peer.login_expired} />
               </div>
@@ -187,7 +198,7 @@ function PeerOverview() {
                 variant={"primary"}
                 className={"w-full"}
                 onClick={() => updatePeer()}
-                disabled={!hasChanges}
+                disabled={!hasChanges || isUser}
               >
                 Save Changes
               </Button>
@@ -205,18 +216,32 @@ function PeerOverview() {
                       "flex gap-2 items-center !text-nb-gray-300 text-xs"
                     }
                   >
-                    <IconInfoCircle size={14} />
-                    <span>
-                      Login expiration is disabled for all peers added with an
-                      setup-key.
-                    </span>
+                    {!peer.user_id ? (
+                      <>
+                        <>
+                          <IconInfoCircle size={14} />
+                          <span>
+                            Login expiration is disabled for all peers added
+                            with an setup-key.
+                          </span>
+                        </>
+                      </>
+                    ) : (
+                      <>
+                        <LockIcon size={14} />
+                        <span>
+                          {`You don't have the required permissions to update this
+                          setting.`}
+                        </span>
+                      </>
+                    )}
                   </div>
                 }
                 className={"w-full block"}
-                disabled={!!peer.user_id}
+                disabled={!!peer.user_id && !isUser}
               >
                 <FancyToggleSwitch
-                  disabled={!peer.user_id}
+                  disabled={!peer.user_id || isUser}
                   value={loginExpiration}
                   onChange={setLoginExpiration}
                   label={
@@ -230,33 +255,74 @@ function PeerOverview() {
                   }
                 />
               </FullTooltip>
-              <FancyToggleSwitch
-                value={ssh}
-                onChange={(set) =>
-                  !set
-                    ? setSsh(false)
-                    : openSSHDialog().then((confirm) => setSsh(confirm))
+              <FullTooltip
+                content={
+                  <div
+                    className={
+                      "flex gap-2 items-center !text-nb-gray-300 text-xs"
+                    }
+                  >
+                    <LockIcon size={14} />
+                    <span>
+                      {`You don't have the required permissions to update this
+                          setting.`}
+                    </span>
+                  </div>
                 }
-                label={
-                  <>
-                    <TerminalSquare size={16} />
-                    SSH Access
-                  </>
-                }
-                helpText={
-                  "Enable the SSH server on this peer to access the machine via an secure shell."
-                }
-              />
+                interactive={false}
+                className={"w-full block"}
+                disabled={!isUser}
+              >
+                <FancyToggleSwitch
+                  value={ssh}
+                  disabled={isUser}
+                  onChange={(set) =>
+                    !set
+                      ? setSsh(false)
+                      : openSSHDialog().then((confirm) => setSsh(confirm))
+                  }
+                  label={
+                    <>
+                      <TerminalSquare size={16} />
+                      SSH Access
+                    </>
+                  }
+                  helpText={
+                    "Enable the SSH server on this peer to access the machine via an secure shell."
+                  }
+                />
+              </FullTooltip>
+
               <div>
                 <Label>Assigned Groups</Label>
                 <HelpText>
                   Use groups to control what this peer can access.
                 </HelpText>
-                <PeerGroupSelector
-                  onChange={setSelectedGroups}
-                  values={selectedGroups}
-                  peer={peer}
-                />
+                <FullTooltip
+                  content={
+                    <div
+                      className={
+                        "flex gap-2 items-center !text-nb-gray-300 text-xs"
+                      }
+                    >
+                      <LockIcon size={14} />
+                      <span>
+                        {`You don't have the required permissions to update this
+                          setting.`}
+                      </span>
+                    </div>
+                  }
+                  interactive={false}
+                  className={"w-full block"}
+                  disabled={!isUser}
+                >
+                  <PeerGroupSelector
+                    disabled={isUser}
+                    onChange={setSelectedGroups}
+                    values={selectedGroups}
+                    peer={peer}
+                  />
+                </FullTooltip>
               </div>
             </div>
           </div>
@@ -264,7 +330,7 @@ function PeerOverview() {
 
         <Separator />
 
-        {isLinux ? (
+        {isLinux && !isUser ? (
           <div className={"px-8 py-6"}>
             <div className={"max-w-6xl"}>
               <div className={"flex justify-between items-center"}>
@@ -291,10 +357,18 @@ function PeerOverview() {
 }
 
 function PeerInformationCard({ peer }: { peer: Peer }) {
+  const { isLoading, getRegionByPeer } = useCountries();
+
+  const countryText = useMemo(() => {
+    return getRegionByPeer(peer);
+  }, [getRegionByPeer, peer]);
+
   return (
     <Card>
       <Card.List>
         <Card.ListItem
+          copy
+          copyText={"NetBird IP-Address"}
           label={
             <>
               <MapPin size={16} />
@@ -305,6 +379,20 @@ function PeerInformationCard({ peer }: { peer: Peer }) {
         />
 
         <Card.ListItem
+          copy
+          copyText={"Public IP-Address"}
+          label={
+            <>
+              <NetworkIcon size={16} />
+              Public IP-Address
+            </>
+          }
+          value={peer.connection_ip}
+        />
+
+        <Card.ListItem
+          copy
+          copyText={"Domain name"}
           label={
             <>
               <Globe size={16} />
@@ -313,7 +401,10 @@ function PeerInformationCard({ peer }: { peer: Peer }) {
           }
           value={peer.dns_label}
         />
+
         <Card.ListItem
+          copy
+          copyText={"Hostname"}
           label={
             <>
               <MonitorSmartphoneIcon size={16} />
@@ -322,6 +413,35 @@ function PeerInformationCard({ peer }: { peer: Peer }) {
           }
           value={peer.hostname}
         />
+
+        <Card.ListItem
+          label={
+            <>
+              <FlagIcon size={16} />
+              Region
+            </>
+          }
+          tooltip={false}
+          value={
+            isEmpty(peer.country_code) ? (
+              "Unknown"
+            ) : (
+              <>
+                {isLoading ? (
+                  <Skeleton width={140} />
+                ) : (
+                  <div className={"flex gap-2 items-center"}>
+                    <div className={"border-0 border-nb-gray-800 rounded-full"}>
+                      <RoundedFlag country={peer.country_code} size={12} />
+                    </div>
+                    {countryText}
+                  </div>
+                )}
+              </>
+            )
+          }
+        />
+
         <Card.ListItem
           label={
             <>
@@ -347,6 +467,7 @@ function PeerInformationCard({ peer }: { peer: Peer }) {
                 ")"
           }
         />
+
         <Card.ListItem
           label={
             <>

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

@@ -6,17 +6,39 @@ import Paragraph from "@components/Paragraph";
 import SkeletonTable from "@components/skeletons/SkeletonTable";
 import useFetchApi from "@utils/api";
 import { ExternalLinkIcon } from "lucide-react";
-import React, { lazy, Suspense } from "react";
+import React, { lazy, Suspense, useEffect } from "react";
 import PeerIcon from "@/assets/icons/PeerIcon";
-import { useUsers } from "@/contexts/UsersProvider";
+import { useGroups } from "@/contexts/GroupsProvider";
+import { useLoggedInUser, useUsers } from "@/contexts/UsersProvider";
 import { Peer } from "@/interfaces/Peer";
 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 { permission } = useLoggedInUser();
+
+  return (
+    <PageContainer>
+      {permission?.dashboard_view === "blocked" ? (
+        <PeersBlockedView />
+      ) : (
+        <PeersView />
+      )}
+    </PageContainer>
+  );
+}
+
+function PeersView() {
   const { data: peers, isLoading } = useFetchApi<Peer[]>("/peers");
   const { users } = useUsers();
+  const { refresh } = useGroups();
+
+  useEffect(() => {
+    refresh();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const peersWithUser = peers?.map((peer) => {
     if (!users) return peer;
@@ -27,7 +49,7 @@ export default function Peers() {
   });
 
   return (
-    <PageContainer>
+    <>
       <div className={"p-default py-6"}>
         <Breadcrumbs>
           <Breadcrumbs.Item
@@ -56,6 +78,37 @@ export default function Peers() {
       <Suspense fallback={<SkeletonTable />}>
         <PeersTable isLoading={isLoading} peers={peersWithUser} />
       </Suspense>
-    </PageContainer>
+    </>
+  );
+}
+
+function PeersBlockedView() {
+  return (
+    <div className={"flex items-center justify-center flex-col"}>
+      <div className={"p-default py-6 max-w-3xl text-center"}>
+        <h1>Add new device to your network</h1>
+        <Paragraph className={"inline"}>
+          To get started, install NetBird and log in using your email account.
+          After that you should be connected. If you have further questions
+          check out our{" "}
+          <InlineLink
+            href={"https://docs.netbird.io/how-to/getting-started#installation"}
+            target={"_blank"}
+          >
+            Installation Guide
+            <ExternalLinkIcon size={12} />
+          </InlineLink>
+        </Paragraph>
+      </div>
+      <div className={"px-3 pt-1 pb-8 max-w-3xl w-full"}>
+        <div
+          className={
+            "rounded-md border border-nb-gray-900/70 grid w-full bg-nb-gray-930/40 stepper-bg-variant"
+          }
+        >
+          <SetupModalContent header={false} footer={false} />
+        </div>
+      </div>
+    </div>
   );
 }

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

@@ -48,7 +48,7 @@ export default function PostureChecksPage() {
           </Paragraph>
           <Paragraph>
             Learn more about
-            <InlineLink href={"#"} target={"_blank"}>
+            <InlineLink href={"https://docs.netbird.io/how-to/manage-posture-checks"} target={"_blank"}>
               Posture Checks
               <ExternalLinkIcon size={12} />
             </InlineLink>

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

@@ -2,20 +2,35 @@
 
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
 import { VerticalTabs } from "@components/VerticalTabs";
-import { AlertOctagonIcon, FolderGit2Icon, ShieldIcon } from "lucide-react";
-import React, { useState } from "react";
+import {
+  AlertOctagonIcon,
+  FolderGit2Icon,
+  LockIcon,
+  ShieldIcon,
+} from "lucide-react";
+import { useSearchParams } from "next/navigation";
+import React, { useEffect, useState } from "react";
 import { useLoggedInUser } from "@/contexts/UsersProvider";
 import PageContainer from "@/layouts/PageContainer";
 import { useAccount } from "@/modules/account/useAccount";
 import AuthenticationTab from "@/modules/settings/AuthenticationTab";
 import DangerZoneTab from "@/modules/settings/DangerZoneTab";
 import GroupsTab from "@/modules/settings/GroupsTab";
+import PermissionsTab from "@/modules/settings/PermissionsTab";
 
 export default function NetBirdSettings() {
-  const [tab, setTab] = useState("authentication");
+  const queryParams = useSearchParams();
+  const queryTab = queryParams.get("tab");
+  const [tab, setTab] = useState(queryTab || "authentication");
   const { isOwner } = useLoggedInUser();
   const account = useAccount();
 
+  useEffect(() => {
+    if (queryTab) {
+      setTab(queryTab);
+    }
+  }, [queryTab]);
+
   return (
     <PageContainer>
       <VerticalTabs value={tab} onChange={setTab}>
@@ -28,6 +43,10 @@ export default function NetBirdSettings() {
             <FolderGit2Icon size={14} />
             Groups
           </VerticalTabs.Trigger>
+          <VerticalTabs.Trigger value="permissions">
+            <LockIcon size={14} />
+            Permissions
+          </VerticalTabs.Trigger>
           <VerticalTabs.Trigger value="danger-zone" disabled={!isOwner}>
             <AlertOctagonIcon size={14} />
             Danger zone
@@ -36,6 +55,7 @@ export default function NetBirdSettings() {
         <RestrictedAccess page={"Settings"}>
           <div className={"border-l border-nb-gray-930 w-full"}>
             {account && <AuthenticationTab account={account} />}
+            {account && <PermissionsTab account={account} />}
             {account && <GroupsTab account={account} />}
             {account && <DangerZoneTab account={account} />}
           </div>

src/app/(dashboard)/team/user/page.tsx

@@ -57,7 +57,7 @@ function UserOverview({ user }: Props) {
   const router = useRouter();
   const userRequest = useApiCall<User>("/users");
   const { mutate } = useSWRConfig();
-  const { loggedInUser, isOwnerOrAdmin } = useLoggedInUser();
+  const { loggedInUser, isOwnerOrAdmin, isUser } = useLoggedInUser();
   const isLoggedInUser = loggedInUser ? loggedInUser?.id === user.id : false;
 
   const initialGroups = user.auto_groups;
@@ -104,6 +104,7 @@ function UserOverview({ user }: Props) {
           <Breadcrumbs.Item
             href={"/team"}
             label={"Team"}
+            disabled={isUser}
             icon={<TeamIcon size={13} />}
           />
 
@@ -117,6 +118,7 @@ function UserOverview({ user }: Props) {
             <Breadcrumbs.Item
               href={"/team/users"}
               label={"Users"}
+              disabled={isUser}
               icon={<User2 size={16} />}
             />
           )}
@@ -156,28 +158,30 @@ function UserOverview({ user }: Props) {
               </h1>
             </div>
           </div>
-          <div className={"flex gap-4"}>
-            <Button
-              variant={"default"}
-              className={"w-full"}
-              onClick={() => {
-                user.is_service_user
-                  ? router.push("/team/service-users")
-                  : router.push("/team/users");
-              }}
-            >
-              Cancel
-            </Button>
+          {!isUser && (
+            <div className={"flex gap-4"}>
+              <Button
+                variant={"default"}
+                className={"w-full"}
+                onClick={() => {
+                  user.is_service_user
+                    ? router.push("/team/service-users")
+                    : router.push("/team/users");
+                }}
+              >
+                Cancel
+              </Button>
 
-            <Button
-              variant={"primary"}
-              className={"w-full"}
-              disabled={!hasChanges}
-              onClick={save}
-            >
-              Save Changes
-            </Button>
-          </div>
+              <Button
+                variant={"primary"}
+                className={"w-full"}
+                disabled={!hasChanges}
+                onClick={save}
+              >
+                Save Changes
+              </Button>
+            </div>
+          )}
         </div>
 
         <div className={"flex gap-10 w-full mt-8 max-w-6xl"}>
@@ -190,6 +194,7 @@ function UserOverview({ user }: Props) {
                   Groups will be assigned to peers added by this user.
                 </HelpText>
                 <PeerGroupSelector
+                  disabled={isUser}
                   onChange={setSelectedGroups}
                   values={selectedGroups}
                 />

src/app/globals.css

@@ -64,4 +64,8 @@ p {
     display: table;
     position: relative;
     width: 100%;
+}
+
+.stepper-bg-variant .step-circle {
+    @apply !border-[#1d2024];
 }

src/assets/icons/IconProperties.tsx

@@ -5,7 +5,7 @@ export type IconProps = {
 };
 
 export const defaultIconProps: IconProps = {
-  size: 16,
+  size: 15,
   className:
     "dark:fill-nb-gray-400 fill-gray-500 peer-data-[active=true]/icon:dark:fill-white peer-data-[active=true]/icon:fill-gray-900 shrink-0",
   autoHeight: false,

src/assets/netbird-full.svg

@@ -0,0 +1,19 @@
+<svg width="133" height="23" viewBox="0 0 133 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_0_3)">
+<path d="M46.9438 7.5013C48.1229 8.64688 48.7082 10.3025 48.7082 12.4683V21.6663H46.1411V12.8362C46.1411 11.2809 45.7481 10.0851 44.9704 9.26566C44.1928 8.43783 43.1308 8.0281 41.7846 8.0281C40.4383 8.0281 39.3345 8.45455 38.5234 9.30747C37.7123 10.1604 37.3109 11.4063 37.3109 13.0369V21.6663H34.7188V6.06305H37.3109V8.28732C37.821 7.49294 38.5234 6.87416 39.4014 6.43934C40.2878 6.00452 41.2578 5.78711 42.3197 5.78711C44.2179 5.78711 45.7565 6.36408 46.9355 7.50966L46.9438 7.5013Z" fill="#F2F2F2"/>
+<path d="M67.1048 14.8344H54.6288C54.7208 16.373 55.2476 17.5771 56.2092 18.4384C57.1708 19.2997 58.3331 19.7345 59.6961 19.7345C60.8166 19.7345 61.7531 19.4753 62.4973 18.9485C63.2499 18.4301 63.7767 17.7277 64.0777 16.858H66.8706C66.4525 18.3548 65.6163 19.5756 64.3621 20.5205C63.1078 21.4571 61.5525 21.9337 59.6878 21.9337C58.2077 21.9337 56.8865 21.5992 55.7159 20.9386C54.5452 20.278 53.6337 19.3331 52.9648 18.1039C52.2958 16.8831 51.9697 15.4616 51.9697 13.8477C51.9697 12.2339 52.2958 10.8207 52.9397 9.60825C53.5836 8.39578 54.495 7.45924 55.6573 6.80702C56.828 6.15479 58.1659 5.82031 59.6878 5.82031C61.2096 5.82031 62.4806 6.14643 63.6178 6.79029C64.7551 7.43416 65.6331 8.32052 66.2518 9.44938C66.8706 10.5782 67.18 11.8576 67.18 13.2791C67.18 13.7725 67.1549 14.2909 67.0964 14.8428L67.1048 14.8344ZM63.8603 10.1769C63.4255 9.4661 62.8318 8.92258 62.0793 8.55465C61.3267 8.18673 60.4989 8.00277 59.5874 8.00277C58.2746 8.00277 57.1625 8.42086 56.2427 9.25705C55.3228 10.0932 54.796 11.2472 54.6623 12.7356H64.5126C64.5126 11.7489 64.2952 10.896 63.8603 10.1852V10.1769Z" fill="#F2F2F2"/>
+<path d="M73.7695 8.20355V17.4016C73.7695 18.1626 73.9284 18.6977 74.2545 19.0071C74.5806 19.3165 75.1409 19.4754 75.9352 19.4754H77.8418V21.6662H75.5088C74.0622 21.6662 72.9835 21.3317 72.2644 20.6711C71.5452 20.0105 71.1857 18.9151 71.1857 17.3933V8.19519H69.1621V6.0629H71.1857V2.13281H73.7779V6.0629H77.8501V8.19519H73.7779L73.7695 8.20355Z" fill="#F2F2F2"/>
+<path d="M85.9022 6.68902C86.9307 6.10369 88.093 5.80266 89.4058 5.80266C90.8106 5.80266 92.0732 6.13714 93.1937 6.79773C94.3142 7.46668 95.2006 8.39485 95.8444 9.59896C96.4883 10.8031 96.8144 12.2079 96.8144 13.7966C96.8144 15.3854 96.4883 16.7818 95.8444 18.011C95.2006 19.2486 94.3142 20.2018 93.1854 20.8875C92.0565 21.5732 90.7939 21.916 89.4141 21.916C88.0344 21.916 86.8805 21.6234 85.8687 21.0297C84.8569 20.4443 84.0876 19.6918 83.5775 18.7803V21.6568H80.9854V0.601562H83.5775V8.97182C84.1127 8.04365 84.8904 7.28272 85.9105 6.69738L85.9022 6.68902ZM93.4529 10.7362C92.9763 9.86654 92.3408 9.19759 91.5297 8.74605C90.7186 8.29451 89.8322 8.06037 88.8706 8.06037C87.909 8.06037 87.0394 8.29451 86.2366 8.75441C85.4255 9.22268 84.7817 9.89163 84.2967 10.778C83.8117 11.6643 83.5692 12.6845 83.5692 13.8384C83.5692 14.9924 83.8117 16.046 84.2967 16.9323C84.7817 17.8187 85.4255 18.4877 86.2366 18.9559C87.0394 19.4242 87.9174 19.65 88.8706 19.65C89.8239 19.65 90.727 19.4158 91.5297 18.9559C92.3324 18.4877 92.9763 17.8187 93.4529 16.9323C93.9296 16.046 94.1637 15.0091 94.1637 13.8134C94.1637 12.6176 93.9296 11.6142 93.4529 10.7362Z" fill="#F2F2F2"/>
+<path d="M100.318 3.01864C99.9749 2.67581 99.8076 2.25771 99.8076 1.76436C99.8076 1.27101 99.9749 0.852913 100.318 0.510076C100.661 0.167238 101.079 0 101.572 0C102.065 0 102.45 0.167238 102.784 0.510076C103.119 0.852913 103.286 1.27101 103.286 1.76436C103.286 2.25771 103.119 2.67581 102.784 3.01864C102.45 3.36148 102.049 3.52872 101.572 3.52872C101.095 3.52872 100.661 3.36148 100.318 3.01864ZM102.826 6.06237V21.6657H100.234V6.06237H102.826Z" fill="#F2F2F2"/>
+<path d="M111.773 6.52155C112.617 6.0282 113.646 5.77734 114.867 5.77734V8.45315H114.181C111.28 8.45315 109.825 10.0252 109.825 13.1776V21.6649H107.232V6.06165H109.825V8.5953C110.276 7.70058 110.928 7.00654 111.773 6.51319V6.52155Z" fill="#F2F2F2"/>
+<path d="M117.861 9.60732C118.505 8.40321 119.391 7.46668 120.52 6.80609C121.649 6.1455 122.92 5.81102 124.325 5.81102C125.537 5.81102 126.666 6.09533 127.711 6.64721C128.757 7.20746 129.551 7.94331 130.103 8.85475V0.601562H132.72V21.6735H130.103V18.7385C129.593 19.6667 128.832 20.436 127.828 21.0297C126.825 21.6317 125.646 21.9244 124.3 21.9244C122.953 21.9244 121.657 21.5816 120.528 20.8959C119.4 20.2102 118.513 19.257 117.869 18.0194C117.226 16.7818 116.899 15.377 116.899 13.805C116.899 12.233 117.226 10.8114 117.869 9.60732H117.861ZM129.392 10.7613C128.915 9.89163 128.28 9.22268 127.469 8.75441C126.658 8.28614 125.771 8.06037 124.81 8.06037C123.848 8.06037 122.962 8.28614 122.159 8.74605C121.356 9.20595 120.729 9.86654 120.253 10.7362C119.776 11.6058 119.542 12.6343 119.542 13.8134C119.542 14.9924 119.776 16.046 120.253 16.9323C120.729 17.8187 121.365 18.4877 122.159 18.9559C122.953 19.4242 123.84 19.65 124.81 19.65C125.78 19.65 126.666 19.4158 127.469 18.9559C128.272 18.4877 128.915 17.8187 129.392 16.9323C129.869 16.046 130.103 15.0175 130.103 13.8384C130.103 12.6594 129.869 11.6393 129.392 10.7613Z" fill="#F2F2F2"/>
+<path d="M21.4651 0.568359C17.8193 0.902835 16.0047 3.00167 15.3191 4.06363L4.66602 22.5183H17.5182L30.1949 0.568359H21.4651Z" fill="#F68330"/>
+<path d="M17.5265 22.5187L0 3.9302C0 3.9302 19.8177 -1.39633 21.7493 15.2188L17.5265 22.5187Z" fill="#F68330"/>
+<path d="M14.9255 4.75055L9.54883 14.0657L17.5177 22.5196L21.7405 15.2029C21.0715 9.49174 18.287 6.37276 14.9255 4.74219" fill="#F35E32"/>
+</g>
+<defs>
+<clipPath id="clip0_0_3">
+<rect width="132.72" height="22.5186" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/components/Breadcrumbs.tsx

@@ -15,13 +15,25 @@ type ItemProps = {
   label: string;
   icon?: React.ReactNode;
   active?: boolean;
+  disabled?: boolean;
 };
 
-export const Item = ({ href, label, icon, active }: ItemProps) => {
+export const Item = ({
+  href,
+  label,
+  icon,
+  active,
+  disabled = false,
+}: ItemProps) => {
   const router = useRouter();
 
   return (
-    <div className={"flex items-center gap-2 group"}>
+    <div
+      className={cn(
+        "flex items-center gap-2 group",
+        disabled && "pointer-events-none",
+      )}
+    >
       <ChevronRightIcon
         size={16}
         className={"text-nb-gray-400 group-first:hidden"}

src/components/Card.tsx

@@ -30,6 +30,8 @@ type CardListItemProps = {
   value: React.ReactNode;
   className?: string;
   copy?: boolean;
+  copyText?: string;
+  tooltip?: boolean;
 };
 
 function CardListItem({
@@ -37,6 +39,8 @@ function CardListItem({
   value,
   className,
   copy = false,
+  copyText,
+  tooltip = true,
 }: CardListItemProps) {
   const [, copyToClipBoard] = useCopyToClipboard(value as string);
 
@@ -54,11 +58,18 @@ function CardListItem({
           copy && "cursor-pointer hover:text-nb-gray-300 transition-all",
         )}
         onClick={() =>
-          copy && copyToClipBoard(`${label} has been copied to clipboard.`)
+          copy &&
+          copyToClipBoard(
+            `${copyText ? copyText : label} has been copied to clipboard.`,
+          )
         }
       >
-        <TextWithTooltip text={value as string} maxChars={40} />
-        {copy && <Copy size={13} />}
+        {tooltip ? (
+          <TextWithTooltip text={value as string} maxChars={40} />
+        ) : (
+          value
+        )}
+        {copy && <Copy size={13} className={"shrink-0"} />}
       </div>
     </li>
   );

src/components/CopyToClipboardText.tsx

@@ -28,12 +28,16 @@ export default function CopyToClipboardText({ children, message }: Props) {
 
       {copied ? (
         <CheckIcon
-          className={"text-nb-gray-100 opacity-0 group-hover:opacity-100"}
+          className={
+            "text-nb-gray-100 opacity-0 group-hover:opacity-100 shrink-0"
+          }
           size={12}
         />
       ) : (
         <CopyIcon
-          className={"text-nb-gray-100 opacity-0 group-hover:opacity-100"}
+          className={
+            "text-nb-gray-100 opacity-0 group-hover:opacity-100 shrink-0"
+          }
           size={12}
         />
       )}

src/components/FullTooltip.tsx

@@ -50,6 +50,7 @@ export default function FullTooltip({
                 className={cn(
                   isAction ? "cursor-pointer" : "cursor-default",
                   "inline-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",
+                  className,
                 )}
               >
                 {children}

src/components/PeerGroupSelector.tsx

@@ -86,8 +86,6 @@ export function PeerGroupSelector({
     }
 
     if (max == 1) setOpen(false);
-
-    setSearch("");
   };
 
   // Remove group from the groupOptions if it does not have an id
@@ -145,6 +143,7 @@ export function PeerGroupSelector({
             "min-h-[46px] w-full relative items-center",
             "border border-neutral-200 dark:border-nb-gray-700 justify-between py-2 px-3",
             "rounded-md bg-white text-sm dark:bg-nb-gray-900/40 flex dark:text-neutral-400/70 text-neutral-500 cursor-pointer hover:dark:bg-nb-gray-900/50",
+            "disabled:pointer-events-none disabled:opacity-30",
           )}
           disabled={disabled}
           ref={inputRef}

src/components/PeerSelector.tsx

@@ -1,7 +1,6 @@
 import { CommandItem } from "@components/Command";
 import { Popover, PopoverContent, PopoverTrigger } from "@components/Popover";
 import { ScrollArea } from "@components/ScrollArea";
-import SmallOSIcon from "@components/ui/SmallOSIcon";
 import TextWithTooltip from "@components/ui/TextWithTooltip";
 import { IconArrowBack } from "@tabler/icons-react";
 import useFetchApi from "@utils/api";
@@ -11,6 +10,7 @@ import { sortBy, trim, unionBy } from "lodash";
 import { ChevronsUpDown, MapPin, SearchIcon } from "lucide-react";
 import * as React from "react";
 import { useEffect, useMemo, useState } from "react";
+import { FcLinux } from "react-icons/fc";
 import { useElementSize } from "@/hooks/useElementSize";
 import { getOperatingSystem } from "@/hooks/useOperatingSystem";
 import { OperatingSystem } from "@/interfaces/OperatingSystem";
@@ -45,7 +45,7 @@ export function PeerSelector({
 
     // Filter out peers that are not linux
     options = options.filter((peer) => {
-      return getOperatingSystem(peer.os) == OperatingSystem.LINUX;
+      return getOperatingSystem(peer.os) === OperatingSystem.LINUX;
     });
 
     // Filter out excluded peers
@@ -56,7 +56,7 @@ export function PeerSelector({
       });
     }
 
-    setDropdownOptions(unionBy(options, dropdownOptions, "name"));
+    setDropdownOptions(unionBy(options, dropdownOptions, "id"));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [peers]);
 
@@ -100,6 +100,12 @@ export function PeerSelector({
     }
   }, [open, dropdownOptions]);
 
+  const LinuxIcon = (
+    <span className={"grayscale brightness-[100%] contrast-[40%]"}>
+      <FcLinux className={"text-white text-lg min-w-[20px] brightness-150"} />
+    </span>
+  );
+
   return (
     <Popover
       open={open}
@@ -135,7 +141,7 @@ export function PeerSelector({
                 }
               >
                 <div className={"flex items-center gap-2.5 text-sm"}>
-                  <SmallOSIcon os={value.os} />
+                  {LinuxIcon}
                   <TextWithTooltip text={value.name} maxChars={20} />
                 </div>
 
@@ -249,7 +255,7 @@ export function PeerSelector({
                         }}
                       >
                         <div className={"flex items-center gap-2.5 text-sm"}>
-                          <SmallOSIcon os={option.os} />
+                          {LinuxIcon}
                           <TextWithTooltip text={option.name} maxChars={20} />
                         </div>
 

src/components/SidebarItem.tsx

@@ -60,7 +60,7 @@ export default function SidebarItem({
         <li className={"px-4 cursor-pointer"}>
           <button
             className={classNames(
-              "rounded-lg text-base w-full ",
+              "rounded-lg text-[.95rem] w-full ",
               "font-normal ",
               className,
               isChild ? "pl-7 pr-2 py-2 mt-1 mb-0.5" : "py-2 px-3",

src/components/Steps.tsx

@@ -36,7 +36,7 @@ const Step = ({ children, step, line = true, center = false }: StepProps) => {
         className={cn(
           "h-[34px] w-[34px] shrink-0 rounded-full  flex items-center justify-center font-medium text-xs relative z-0 border-4  transition-all",
           "dark:bg-nb-gray-900 dark:text-nb-gray-400 dark:border-nb-gray dark:group-hover:bg-nb-gray-800",
-          "bg-nb-gray-100 text-nb-gray-400 border-white group-hover:bg-nb-gray-200",
+          "bg-nb-gray-100 text-nb-gray-400 border-white group-hover:bg-nb-gray-200 step-circle",
         )}
       >
         {step}

src/components/skeletons/SkeletonPeerDetail.tsx

@@ -0,0 +1,36 @@
+import Skeleton from "react-loading-skeleton";
+
+export default function SkeletonPeerDetail() {
+  return (
+    <div className={"w-full mt-6 p-default"}>
+      <div className={"flex flex-wrap w-full justify-between max-w-6xl "}>
+        <Skeleton height={24} width={300} className={"rounded-md"} />
+      </div>
+      <div className={"flex flex-wrap w-full justify-between mt-4 max-w-6xl "}>
+        <Skeleton height={42} width={400} className={"rounded-md"} />
+        <div className={"flex gap-3"}>
+          <Skeleton height={42} width={80} className={"rounded-md"} />
+          <Skeleton height={42} width={120} className={"rounded-md"} />
+        </div>
+      </div>
+      <div
+        className={
+          "flex flex-wrap w-full justify-between mt-6 max-w-6xl gap-10"
+        }
+      >
+        <Skeleton
+          height={400}
+          width={"100%"}
+          className={"rounded-md"}
+          containerClassName={"flex-1 "}
+        />
+        <Skeleton
+          height={300}
+          width={"100%"}
+          className={"rounded-md opacity-30"}
+          containerClassName={"flex-1 "}
+        />
+      </div>
+    </div>
+  );
+}

src/components/table/DataTable.tsx

@@ -2,6 +2,7 @@
 import SkeletonTable from "@components/skeletons/SkeletonTable";
 import DataTableGlobalSearch from "@components/table/DataTableGlobalSearch";
 import { DataTablePagination } from "@components/table/DataTablePagination";
+import DataTableResetFilterButton from "@components/table/DataTableResetFilterButton";
 import {
   Table,
   TableBody,
@@ -223,6 +224,15 @@ export function DataTableContent<TData, TValue>({
   const TableDataUnstyledComponent = as === "table" ? "td" : "div";
   const TableRowUnstyledComponent = as === "table" ? "tr" : "div";
 
+  /**
+   * Reset all filters, search & set pagination to first page
+   */
+  const resetFilters = () => {
+    table.setPageIndex(0);
+    setColumnFilters([]);
+    setGlobalSearch("");
+  };
+
   return (
     <div className={cn("relative table-fixed-scroll", className)}>
       {!minimal && (
@@ -238,6 +248,7 @@ export function DataTableContent<TData, TValue>({
             placeholder={searchPlaceholder}
           />
           {children && children(table)}
+          <DataTableResetFilterButton onClick={resetFilters} table={table} />
           <div className={"flex gap-4 flex-wrap grow"}>
             <div className={"flex gap-4 flex-wrap"}></div>
             {rightSide && rightSide(table)}

src/components/table/DataTableResetFilterButton.tsx

@@ -0,0 +1,55 @@
+import Button from "@components/Button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@components/Tooltip";
+import { Table } from "@tanstack/react-table";
+import { FilterX } from "lucide-react";
+import * as React from "react";
+import { useState } from "react";
+
+interface Props<TData> {
+  table: Table<TData>;
+  onClick: () => void;
+}
+
+export default function DataTableResetFilterButton<TData>({
+  table,
+  onClick,
+}: Props<TData>) {
+  const [hovered, setHovered] = useState(false);
+  const isDisabled =
+    table.getState().columnFilters.length <= 0 &&
+    table.getState().globalFilter === "";
+
+  return !isDisabled ? (
+    <Tooltip delayDuration={1}>
+      <TooltipTrigger
+        asChild={true}
+        onMouseOver={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+        onClick={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <Button
+          className={"h-[42px]"}
+          variant={"secondary"}
+          disabled={isDisabled}
+          onClick={onClick}
+        >
+          <FilterX size={16} />
+        </Button>
+      </TooltipTrigger>
+
+      <TooltipContent
+        sideOffset={10}
+        className={"px-3 py-2"}
+        onPointerDownOutside={(event) => {
+          if (hovered) event.preventDefault();
+        }}
+      >
+        <span className={"text-xs text-neutral-300"}>
+          Reset Filters & Search
+        </span>
+      </TooltipContent>
+    </Tooltip>
+  ) : null;
+}

src/components/ui/AnnouncementBanner.tsx

@@ -0,0 +1,92 @@
+import InlineLink from "@components/InlineLink";
+import { cn } from "@utils/helpers";
+import { cva, VariantProps } from "class-variance-authority";
+import { ArrowRightIcon, XIcon } from "lucide-react";
+import * as React from "react";
+import { useAnnouncement } from "@/contexts/AnnouncementProvider";
+
+const variants = cva(
+  {},
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-nb-gray-900/50 border-nb-gray-800/30 border-b text-nb-gray-200",
+        important: "from-netbird to-netbird-400 bg-gradient-to-b text-white",
+      },
+      tagBadge: {
+        default: "bg-nb-gray-200/10 text-nb-gray-100 font-medium",
+        important: "bg-white text-netbird font-medium",
+      },
+      closeButton: {
+        default:
+          "bg-nb-gray-900 rounded-md p-1 text-nb-gray-300 hover:bg-nb-gray-800",
+        important:
+          "bg-netbird-100 rounded-md p-1 text-netbird-600 hover:bg-white",
+      },
+      inlineLink: {
+        default: "text-nb-blue-400 hover:underline",
+        important: "!text-white underline hover:opacity-80",
+      },
+    },
+  },
+);
+
+export type AnnouncementVariant = VariantProps<typeof variants>;
+
+export const AnnouncementBanner = () => {
+  const { bannerHeight, closeAnnouncement, announcements } = useAnnouncement();
+  const announcement = announcements?.find((a) => a.isOpen);
+
+  return announcement ? (
+    <div
+      className={cn(
+        "flex items-center justify-center text-sm px-8 font-light",
+        variants({ variant: announcement.variant }),
+      )}
+      style={{ height: bannerHeight }}
+    >
+      <div className={"flex items-center gap-2"}>
+        {announcement.tag && (
+          <div
+            className={cn(
+              "bg-nb-gray-200/10 backdrop-blur text-nb-gray-100 font-medium tracking-wide uppercase text-[10px] py-2.5 px-2 rounded-md leading-[0]",
+              variants({ tagBadge: announcement.variant }),
+            )}
+          >
+            {announcement.tag}
+          </div>
+        )}
+        <div>
+          {announcement.text}
+          {announcement.link && (
+            <InlineLink
+              href={announcement.link || "#"}
+              target={announcement.isExternal ? "_blank" : undefined}
+              className={cn(
+                "ml-2 !text-sm",
+                variants({ inlineLink: announcement.variant }),
+              )}
+            >
+              {announcement.linkText || "Learn more"}
+              <ArrowRightIcon size={14} />
+            </InlineLink>
+          )}
+        </div>
+      </div>
+      {announcement.closeable && (
+        <div className={"absolute right-0 px-4"}>
+          <div
+            className={cn(
+              "rounded-md p-1 text-nb-gray-300 transition-all cursor-pointer",
+              variants({ closeButton: announcement.variant }),
+            )}
+            onClick={() => closeAnnouncement(announcement.hash)}
+          >
+            <XIcon size={14} />
+          </div>
+        </div>
+      )}
+    </div>
+  ) : null;
+};

src/components/ui/CountrySelector.tsx

@@ -2,19 +2,16 @@ import {
   SelectDropdown,
   SelectOption,
 } from "@components/select/SelectDropdown";
-import useFetchApi from "@utils/api";
 import { createElement, useMemo } from "react";
 import RoundedFlag from "@/assets/countries/RoundedFlag";
-import { Country } from "@/interfaces/Country";
+import { useCountries } from "@/contexts/CountryProvider";
 
 type Props = {
   value: string;
   onChange: (value: string) => void;
 };
 export const CountrySelector = ({ value, onChange }: Props) => {
-  const { data: countries, isLoading } = useFetchApi<Country[]>(
-    "/locations/countries",
-  );
+  const { countries, isLoading } = useCountries();
 
   const countryList = useMemo(() => {
     return countries?.map((country) => {

src/components/ui/GroupBadge.tsx

@@ -27,11 +27,14 @@ export default function GroupBadge({
       className={cn("transition-all group whitespace-nowrap", className)}
       onClick={onClick}
     >
-      <FolderGit2 size={12} />
+      <FolderGit2 size={12} className={"shrink-0"} />
       <TextWithTooltip text={group.name} maxChars={20} />
       {children}
       {showX && (
-        <XIcon size={12} className={"cursor-pointer group-hover:text-white"} />
+        <XIcon
+          size={12}
+          className={"cursor-pointer group-hover:text-white shrink-0"}
+        />
       )}
     </Badge>
   );

src/components/ui/LoginExpiredBadge.tsx

@@ -10,7 +10,7 @@ export default function LoginExpiredBadge({ loginExpired }: Props) {
     <Tooltip delayDuration={1}>
       <TooltipTrigger>
         <Badge variant={"red"} className={"px-3"}>
-          <AlertTriangle size={14} className={"mr-1"} />
+          <AlertTriangle size={13} className={"mr-1"} />
           Login required
         </Badge>
       </TooltipTrigger>

src/components/ui/MinimalList.tsx

@@ -5,7 +5,9 @@ import * as React from "react";
 type Props = {
   data: {
     label: string;
-    value: string;
+    value: string | React.ReactNode;
+    noCopy?: boolean;
+    tooltip?: boolean;
   }[];
   className?: string;
 };
@@ -16,10 +18,11 @@ export const MinimalList = ({ data, className }: Props) => {
         {data.map((item, index) => {
           return (
             <Card.ListItem
-              copy
+              copy={!item.noCopy}
               label={item.label}
               value={item.value}
               key={index}
+              tooltip={item.tooltip !== false}
             />
           );
         })}

src/components/ui/SmallOSIcon.tsx

@@ -1,26 +0,0 @@
-import Image from "next/image";
-import { useMemo } from "react";
-import { FaWindows } from "react-icons/fa6";
-import { FcAndroidOs, FcLinux } from "react-icons/fc";
-import AppleLogo from "@/assets/os-icons/apple.svg";
-import { getOperatingSystem } from "@/hooks/useOperatingSystem";
-import { OperatingSystem } from "@/interfaces/OperatingSystem";
-
-export default function SmallOSIcon({ os }: { os: string }) {
-  const icon = useMemo(() => {
-    return getOperatingSystem(os.toLowerCase());
-  }, [os]);
-
-  if (icon === OperatingSystem.WINDOWS)
-    return <FaWindows className={"text-white text-md min-w-[20px]"} />;
-  if (icon === OperatingSystem.APPLE)
-    return (
-      <div className={"min-w-[20px] flex items-center justify-center"}>
-        <Image src={AppleLogo} alt={""} width={12} />
-      </div>
-    );
-  if (icon === OperatingSystem.ANDROID)
-    return <FcAndroidOs className={"text-white text-xl min-w-[20px]"} />;
-
-  return <FcLinux className={"text-white text-lg min-w-[20px]"} />;
-}

src/components/ui/TextWithTooltip.tsx

@@ -24,11 +24,12 @@ export default function TextWithTooltip({
     <FullTooltip
       disabled={charCount <= maxChars || hideTooltip}
       interactive={false}
+      className={"truncate w-full"}
       content={
         <div className={"max-w-xs break-all whitespace-normal"}>{text}</div>
       }
     >
-      <span className={cn(className)}>
+      <span className={cn(className, "truncate")}>
         {charCount > maxChars ? text && `${text.slice(0, maxChars)}...` : text}
       </span>
     </FullTooltip>

src/components/ui/UserDropdown.tsx

@@ -36,6 +36,7 @@ export default function UserDropdown() {
   useHotkeys("shift+mod+l", () => logout(), []);
 
   const [dropdownOpen, setDropdownOpen] = useState(false);
+  const { permission } = useLoggedInUser();
 
   return (
     <DropdownMenu
@@ -67,19 +68,23 @@ export default function UserDropdown() {
         </DropdownMenuLabel>
 
         <DropdownMenuSeparator />
-        <DropdownMenuItem
-          onClick={() => {
-            setDropdownOpen(false);
-            if (loggedInUser) {
-              router.push(`/team/user?id=${loggedInUser.id}`);
-            }
-          }}
-        >
-          <div className={"flex gap-3 items-center"}>
-            <User2 size={14} />
-            Profile Settings
-          </div>
-        </DropdownMenuItem>
+
+        {permission.dashboard_view !== "blocked" && (
+          <DropdownMenuItem
+            onClick={() => {
+              setDropdownOpen(false);
+              if (loggedInUser) {
+                router.push(`/team/user?id=${loggedInUser.id}`);
+              }
+            }}
+          >
+            <div className={"flex gap-3 items-center"}>
+              <User2 size={14} />
+              Profile Settings
+            </div>
+          </DropdownMenuItem>
+        )}
+
         <DropdownMenuItem onClick={logoutSession}>
           <div className={"flex gap-3 items-center"}>
             <LogOutIcon size={14} />

src/contexts/AnalyticsProvider.tsx

@@ -19,6 +19,7 @@ const AnalyticsContext = React.createContext(
   {} as {
     initialized: boolean;
     trackPageView: () => void;
+    trackEvent: (category: string, action: string, label: string) => void;
   },
 );
 const config = loadConfig();
@@ -51,8 +52,20 @@ export default function AnalyticsProvider({ children }: Props) {
     ReactGA.send({ hitType: "pageview", page: path, title: document.title });
   };
 
+  const trackEvent = (category: string, action: string, label: string) => {
+    if (isProduction() && ReactGA.isInitialized) {
+      ReactGA.event({
+        category: category,
+        action: action,
+        label: label,
+      });
+    }
+  };
+
   return (
-    <AnalyticsContext.Provider value={{ initialized, trackPageView }}>
+    <AnalyticsContext.Provider
+      value={{ initialized, trackPageView, trackEvent }}
+    >
       {children}
     </AnalyticsContext.Provider>
   );

src/contexts/AnnouncementProvider.tsx

@@ -0,0 +1,103 @@
+import { AnnouncementVariant } from "@components/ui/AnnouncementBanner";
+import { useLocalStorage } from "@hooks/useLocalStorage";
+import md5 from "crypto-js/md5";
+import React, { useEffect, useState } from "react";
+import { useLoggedInUser } from "@/contexts/UsersProvider";
+
+const initialAnnouncements: Announcement[] = [];
+
+export interface Announcement extends AnnouncementVariant {
+  tag: string;
+  text: string;
+  link?: string;
+  linkText?: string;
+  isExternal?: boolean;
+  closeable: boolean;
+  isCloudOnly: boolean;
+}
+
+interface AnnouncementInfo extends Announcement {
+  isOpen: boolean;
+  hash: string;
+}
+
+type Props = {
+  children: React.ReactNode;
+};
+
+const AnnouncementContext = React.createContext(
+  {} as {
+    bannerHeight: number;
+    announcements?: AnnouncementInfo[];
+    closeAnnouncement: (hash: string) => void;
+    setAnnouncements: React.Dispatch<
+      React.SetStateAction<AnnouncementInfo[] | undefined>
+    >;
+  },
+);
+
+const bannerHeight = 40;
+
+export default function AnnouncementProvider({ children }: Props) {
+  const [height, setHeight] = useState(0);
+  const [closedAnnouncements, setClosedAnnouncements] = useLocalStorage<
+    string[]
+  >("netbird-closed-announcements", []);
+  const [announcements, setAnnouncements] = useState<AnnouncementInfo[]>();
+  const { permission } = useLoggedInUser();
+
+  useEffect(() => {
+    if (announcements && announcements.length > 0) return;
+    if (permission?.dashboard_view === "blocked") return;
+    const initial = initialAnnouncements.map((announcement) => {
+      const hash = md5(announcement.text).toString();
+      const isOpen = !closedAnnouncements.some((h) => h === hash);
+      return {
+        ...announcement,
+        hash,
+        isOpen,
+      } as AnnouncementInfo;
+    });
+    if (initial.length > 0) {
+      setAnnouncements(initial);
+    }
+  }, [closedAnnouncements, announcements]);
+
+  const closeAnnouncement = (hash: string) => {
+    setClosedAnnouncements([...closedAnnouncements, hash]);
+    setAnnouncements(() => {
+      return announcements?.map((a) => {
+        if (a.hash === hash) {
+          return { ...a, isOpen: false };
+        }
+        return a;
+      });
+    });
+  };
+
+  useEffect(() => {
+    const isAnnouncementOpen = announcements?.some((a) => a.isOpen);
+    if (isAnnouncementOpen) {
+      setHeight(bannerHeight);
+    } else {
+      setHeight(0);
+    }
+  }, [announcements]);
+
+  return (
+    <AnnouncementContext.Provider
+      value={{
+        bannerHeight: height,
+        announcements,
+        closeAnnouncement,
+        setAnnouncements,
+      }}
+    >
+      {children}
+    </AnnouncementContext.Provider>
+  );
+}
+
+export const useAnnouncement = () => {
+  return React.useContext(AnnouncementContext);
+};

src/contexts/ApplicationProvider.tsx

@@ -3,7 +3,14 @@ import FullScreenLoading from "@components/ui/FullScreenLoading";
 import { useApiCall } from "@utils/api";
 import { useIsMd } from "@utils/responsive";
 import { getLatestNetbirdRelease } from "@utils/version";
-import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { useLocalStorage } from "@/hooks/useLocalStorage";
 import { User } from "@/interfaces/User";
 import type { NetbirdRelease } from "@/interfaces/Version";
@@ -32,13 +39,27 @@ export default function ApplicationProvider({ children }: Props) {
   const userRequest = useApiCall<User[]>("/users", true);
   const [show, setShow] = useState(false);
   const requestCalled = useRef(false);
+  const maxTries = 3;
+
+  const populateCache = useCallback(
+    async (tries = 0) => {
+      if (tries >= maxTries) {
+        setShow(true);
+        return Promise.reject();
+      }
+      try {
+        await userRequest.get().then(() => setShow(true));
+        return Promise.resolve();
+      } catch (e) {
+        setTimeout(() => populateCache(tries + 1), 500);
+      }
+    },
+    [userRequest, setShow],
+  );
 
   useEffect(() => {
     if (!requestCalled.current) {
-      userRequest
-        .get()
-        .then(() => setShow(true))
-        .catch(() => setShow(true));
+      populateCache().then();
       requestCalled.current = true;
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps

src/contexts/CountryProvider.tsx

@@ -0,0 +1,64 @@
+import useFetchApi from "@utils/api";
+import React, { useCallback } from "react";
+import { useLoggedInUser } from "@/contexts/UsersProvider";
+import { Country } from "@/interfaces/Country";
+import { Peer } from "@/interfaces/Peer";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+const CountryContext = React.createContext(
+  {} as {
+    countries: Country[] | undefined;
+    isLoading: boolean;
+    getRegionByPeer: (peer: Peer) => string;
+  },
+);
+
+export default function CountryProvider({ children }: Props) {
+  const { permission } = useLoggedInUser();
+
+  const getRegionByPeer = (peer: Peer) => "Unknown";
+
+  return permission?.dashboard_view != "full" ? (
+    <CountryContext.Provider
+      value={{ countries: [], isLoading: false, getRegionByPeer }}
+    >
+      {children}
+    </CountryContext.Provider>
+  ) : (
+    <CountryProviderContent>{children}</CountryProviderContent>
+  );
+}
+
+function CountryProviderContent({ children }: Props) {
+  const { data: countries, isLoading } = useFetchApi<Country[]>(
+    "/locations/countries",
+    true,
+    false,
+  );
+
+  const getRegionByPeer = useCallback(
+    (peer: Peer) => {
+      if (!countries) return "Unknown";
+      const country = countries.find(
+        (c) => c.country_code === peer.country_code,
+      );
+      if (!country) return "Unknown";
+      if (!peer.city_name) return country.country_name;
+      return `${country.country_name}, ${peer.city_name}`;
+    },
+    [countries],
+  );
+
+  return (
+    <CountryContext.Provider value={{ countries, isLoading, getRegionByPeer }}>
+      {children}
+    </CountryContext.Provider>
+  );
+}
+
+export const useCountries = () => {
+  return React.useContext(CountryContext);
+};

src/contexts/DialogProvider.tsx

@@ -81,10 +81,13 @@ export default function DialogProvider({ children }: Props) {
             />
 
             {dialogOptions.children && (
-              <div className={"px-8 pt-4"}>{dialogOptions.children}</div>
+              <div className={"px-8 pt-0"}>{dialogOptions.children}</div>
             )}
 
-            <ModalFooter className={"items-center gap-2"} separator={false}>
+            <ModalFooter
+              className={"items-center gap-2 pt-5"}
+              separator={false}
+            >
               <ModalClose asChild={true}>
                 <Button
                   variant={"secondary"}

src/contexts/GroupsProvider.tsx

@@ -1,5 +1,7 @@
 import useFetchApi from "@utils/api";
+import { usePathname } from "next/navigation";
 import React, { useState } from "react";
+import { useLoggedInUser } from "@/contexts/UsersProvider";
 import { Group } from "@/interfaces/Group";
 
 type Props = {
@@ -12,20 +14,38 @@ const GroupContext = React.createContext(
     refresh: () => void;
     dropdownOptions: Group[];
     setDropdownOptions: React.Dispatch<React.SetStateAction<Group[]>>;
+    isLoading: boolean;
   },
 );
 
 export default function GroupsProvider({ children }: Props) {
-  const { data: groups, mutate } = useFetchApi<Group[]>("/groups");
+  const path = usePathname();
+  const { permission } = useLoggedInUser();
+
+  return path === "/peers" && permission.dashboard_view == "blocked" ? (
+    <>{children}</>
+  ) : (
+    <GroupsProviderContent>{children}</GroupsProviderContent>
+  );
+}
+
+export function GroupsProviderContent({ children }: Props) {
+  const { data: groups, mutate, isLoading } = useFetchApi<Group[]>("/groups");
   const [dropdownOptions, setDropdownOptions] = useState<Group[]>([]);
 
   const refresh = () => {
-    mutate().then();
+    if (groups && !isLoading) mutate().then();
   };
 
   return (
     <GroupContext.Provider
-      value={{ groups, refresh, dropdownOptions, setDropdownOptions }}
+      value={{
+        groups,
+        refresh,
+        dropdownOptions,
+        setDropdownOptions,
+        isLoading,
+      }}
     >
       {children}
     </GroupContext.Provider>

src/contexts/PeerProvider.tsx

@@ -1,4 +1,5 @@
 import { notify } from "@components/Notification";
+import SkeletonPeerDetail from "@components/skeletons/SkeletonPeerDetail";
 import { useApiCall } from "@utils/api";
 import React, { useMemo } from "react";
 import { useSWRConfig } from "swr";
@@ -27,12 +28,13 @@ const PeerContext = React.createContext(
     ) => Promise<Peer>;
     openSSHDialog: () => Promise<boolean>;
     deletePeer: () => void;
+    isLoading: boolean;
   },
 );
 
 export default function PeerProvider({ children, peer }: Props) {
   const user = usePeerUser(peer);
-  const peerGroups = usePeerGroups(peer);
+  const { peerGroups, isLoading } = usePeerGroups(peer);
   const peerRequest = useApiCall<Peer>("/peers");
   const { confirm } = useDialog();
   const { mutate } = useSWRConfig();
@@ -94,12 +96,22 @@ export default function PeerProvider({ children, peer }: Props) {
     });
   };
 
-  return (
+  return !isLoading ? (
     <PeerContext.Provider
-      value={{ peer, peerGroups, user, update, openSSHDialog, deletePeer }}
+      value={{
+        peer,
+        peerGroups,
+        user,
+        update,
+        openSSHDialog,
+        deletePeer,
+        isLoading,
+      }}
     >
       {children}
     </PeerContext.Provider>
+  ) : (
+    <SkeletonPeerDetail />
   );
 }
 
@@ -108,9 +120,9 @@ export default function PeerProvider({ children, peer }: Props) {
  * @param peer
  */
 export const usePeerGroups = (peer?: Peer) => {
-  const { groups } = useGroups();
+  const { groups, isLoading } = useGroups();
 
-  return useMemo(() => {
+  const peerGroups = useMemo(() => {
     if (!peer) return [];
     const peerGroups = groups?.filter((group) => {
       const foundGroup = group.peers?.find((p) => {
@@ -121,6 +133,8 @@ export const usePeerGroups = (peer?: Peer) => {
     });
     return peerGroups || [];
   }, [groups, peer]);
+
+  return { peerGroups, isLoading };
 };
 
 /**

src/contexts/UsersProvider.tsx

@@ -1,6 +1,7 @@
 import FullScreenLoading from "@components/ui/FullScreenLoading";
 import useFetchApi from "@utils/api";
 import React, { useMemo } from "react";
+import { Permission } from "@/interfaces/Permission";
 import { User } from "@/interfaces/User";
 
 type Props = {
@@ -26,7 +27,7 @@ export default function UsersProvider({ children }: Props) {
     return users?.find((user) => user.is_current);
   }, [users]);
 
-  return !isLoading ? (
+  return !isLoading && loggedInUser ? (
     <UsersContext.Provider value={{ users, refresh, loggedInUser }}>
       {children}
     </UsersContext.Provider>
@@ -43,5 +44,19 @@ export const useLoggedInUser = () => {
   const isAdmin = loggedInUser ? loggedInUser?.role === "admin" : false;
   const isUser = !isOwner && !isAdmin;
   const isOwnerOrAdmin = isOwner || isAdmin;
-  return { loggedInUser, isOwner, isAdmin, isUser, isOwnerOrAdmin } as const;
+
+  const permission = useMemo(() => {
+    return {
+      dashboard_view: loggedInUser?.permissions.dashboard_view || "blocked",
+    } as Permission;
+  }, [loggedInUser]);
+
+  return {
+    loggedInUser,
+    isOwner,
+    isAdmin,
+    isUser,
+    isOwnerOrAdmin,
+    permission,
+  } as const;
 };

src/hooks/useOperatingSystem.ts

@@ -13,10 +13,13 @@ export default function useOperatingSystem() {
 }
 
 export const getOperatingSystem = (os: string) => {
-  if (os.includes("darwin")) return OperatingSystem.APPLE as const;
-  if (os.includes("mac")) return OperatingSystem.APPLE as const;
-  if (os.includes("android")) return OperatingSystem.ANDROID as const;
-  if (os.includes("ios")) return OperatingSystem.IOS as const;
-  if (os.includes("win")) return OperatingSystem.WINDOWS as const;
+  if (os.toLowerCase().includes("darwin"))
+    return OperatingSystem.APPLE as const;
+  if (os.toLowerCase().includes("mac")) return OperatingSystem.APPLE as const;
+  if (os.toLowerCase().includes("android"))
+    return OperatingSystem.ANDROID as const;
+  if (os.toLowerCase().includes("ios")) return OperatingSystem.IOS as const;
+  if (os.toLowerCase().includes("windows"))
+    return OperatingSystem.WINDOWS as const;
   return OperatingSystem.LINUX as const;
 };

src/interfaces/Account.ts

@@ -10,5 +10,6 @@ export interface Account {
     jwt_groups_enabled: boolean;
     jwt_groups_claim_name: string;
     jwt_allow_groups: string[];
+    regular_users_view_blocked: boolean;
   };
 }

src/interfaces/IdentityProvider.ts

@@ -17,6 +17,14 @@ export interface AzureADIntegration {
   user_group_prefixes: string[];
 }
 
+export interface OktaIntegration {
+  id: string;
+  enabled: boolean;
+  group_prefixes: string[];
+  user_group_prefixes: string[];
+  auth_token: string;
+}
+
 export interface IdentityProviderLog {
   id: number;
   level: string;

src/interfaces/Peer.ts

@@ -20,4 +20,7 @@ export interface Peer {
   login_expired: boolean;
   login_expiration_enabled: boolean;
   approval_required: boolean;
+  city_name: string;
+  country_code: string;
+  connection_ip: string;
 }

src/interfaces/Permission.ts

@@ -0,0 +1,3 @@
+export interface Permission {
+  dashboard_view: "limited" | "full" | "blocked";
+}

src/interfaces/PostureCheck.ts

@@ -9,6 +9,7 @@ export interface PostureCheck {
     nb_version_check?: NetBirdVersionCheck;
     os_version_check?: OperatingSystemVersionCheck;
     geo_location_check?: GeoLocationCheck;
+    peer_network_range_check?: PeerNetworkRangeCheck;
   };
   policies?: Policy[];
   active?: boolean;
@@ -47,6 +48,11 @@ export interface GeoLocation {
   city_name: string;
 }
 
+export interface PeerNetworkRangeCheck {
+  ranges: string[];
+  action: "allow" | "deny";
+}
+
 export const windowsKernelVersions: SelectOption[] = [
   { value: "5.0", label: "Windows 2000" },
   { value: "5.1", label: "Windows XP" },

src/interfaces/User.ts

@@ -1,3 +1,5 @@
+import { Permission } from "@/interfaces/Permission";
+
 export interface User {
   id: string;
   email?: string;
@@ -9,6 +11,7 @@ export interface User {
   is_service_user?: boolean;
   is_blocked?: boolean;
   last_login?: Date;
+  permissions: Permission;
 }
 
 export enum Role {

src/layouts/DashboardLayout.tsx

@@ -9,13 +9,17 @@ import { useIsSm, useIsXs } from "@utils/responsive";
 import { AnimatePresence, motion } from "framer-motion";
 import { XIcon } from "lucide-react";
 import React from "react";
+import AnnouncementProvider, {
+  useAnnouncement,
+} from "@/contexts/AnnouncementProvider";
 import ApplicationProvider, {
   useApplicationContext,
 } from "@/contexts/ApplicationProvider";
+import CountryProvider from "@/contexts/CountryProvider";
 import GroupsProvider from "@/contexts/GroupsProvider";
-import UsersProvider from "@/contexts/UsersProvider";
+import UsersProvider, { useLoggedInUser } from "@/contexts/UsersProvider";
 import Navigation from "@/layouts/Navigation";
-import Navbar from "./Header";
+import Navbar, { headerHeight } from "./Header";
 
 export default function DashboardLayout({
   children,
@@ -25,9 +29,13 @@ export default function DashboardLayout({
   return (
     <ApplicationProvider>
       <UsersProvider>
-        <GroupsProvider>
-          <DashboardPageContent>{children}</DashboardPageContent>
-        </GroupsProvider>
+        <AnnouncementProvider>
+          <GroupsProvider>
+            <CountryProvider>
+              <DashboardPageContent>{children}</DashboardPageContent>
+            </CountryProvider>
+          </GroupsProvider>
+        </AnnouncementProvider>
       </UsersProvider>
     </ApplicationProvider>
   );
@@ -38,9 +46,10 @@ function DashboardPageContent({ children }: { children: React.ReactNode }) {
   const { mobileNavOpen, toggleMobileNav } = useApplicationContext();
   const isSm = useIsSm();
   const isXs = useIsXs();
+  const { permission } = useLoggedInUser();
 
   const navOpenPageWidth = isSm ? "50%" : isXs ? "65%" : "80%";
-
+  const { bannerHeight } = useAnnouncement();
   return (
     <div className={cn("flex flex-col h-screen", mobileNavOpen && "flex")}>
       {mobileNavOpen && (
@@ -142,13 +151,16 @@ function DashboardPageContent({ children }: { children: React.ReactNode }) {
             }}
           >
             <Navbar />
+
             <div
               className={"flex flex-row flex-grow"}
               style={{
-                height: "calc(100vh - 75px)",
+                height: `calc(100vh - ${headerHeight + bannerHeight}px)`,
               }}
             >
-              <Navigation hideOnMobile />
+              {permission.dashboard_view !== "blocked" && (
+                <Navigation hideOnMobile />
+              )}
               {children}
             </div>
           </motion.div>

src/layouts/Header.tsx

@@ -1,59 +1,99 @@
 "use client";
 
 import Button from "@components/Button";
+import { AnnouncementBanner } from "@components/ui/AnnouncementBanner";
 import DarkModeToggle from "@components/ui/DarkModeToggle";
 import UserDropdown from "@components/ui/UserDropdown";
-import { Navbar } from "flowbite-react";
+import { cn } from "@utils/helpers";
 import { MenuIcon } from "lucide-react";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 import NetBirdLogo from "@/assets/netbird.svg";
+import NetBirdLogoFull from "@/assets/netbird-full.svg";
+import { useAnnouncement } from "@/contexts/AnnouncementProvider";
 import { useApplicationContext } from "@/contexts/ApplicationProvider";
+import { useLoggedInUser } from "@/contexts/UsersProvider";
+
+export const headerHeight = 75;
 
 export default function NavbarWithDropdown() {
   const router = useRouter();
   const Logo = useMemo(() => {
-    return <Image src={NetBirdLogo} width={30} alt={"NetBird Logo"} />;
+    return (
+      <>
+        <Image
+          src={NetBirdLogoFull}
+          height={22}
+          alt={"NetBird Logo"}
+          className={"hidden md:block"}
+        />
+        <Image
+          src={NetBirdLogo}
+          width={30}
+          alt={"NetBird Logo"}
+          className={"md:hidden"}
+        />
+      </>
+    );
   }, []);
 
   const { toggleMobileNav } = useApplicationContext();
+  const { bannerHeight } = useAnnouncement();
+  const { permission } = useLoggedInUser();
 
   return (
     <>
-      <Navbar
-        fluid
-        className={
-          "border-b dark:border-zinc-700/40 fixed z-50 h-[75px] px-3 md:px-4 w-full"
-        }
+      <div
+        className={"fixed z-50 w-full"}
+        style={{
+          height: headerHeight + bannerHeight,
+        }}
       >
-        <div className={"flex items-center gap-4 md:hidden"}>
-          <Button
-            className={"!px-3 md:hidden"}
-            variant={"default-outline"}
-            onClick={toggleMobileNav}
-          >
-            <div>
-              <MenuIcon size={20} className={"relative"} />
-            </div>
-          </Button>
-        </div>
-        <Navbar.Brand
-          onClick={() => router.push("/peers")}
-          className={"cursor-pointer hover:opacity-70 transition-all"}
+        <AnnouncementBanner />
+        <div
+          className={cn(
+            "bg-white px-2 py-4 dark:border-gray-700 dark:bg-nb-gray/50 backdrop-blur-lg sm:px-6",
+            "border-b dark:border-zinc-700/40 px-3 md:px-4 w-full",
+            "flex justify-between items-center transition-all",
+          )}
         >
-          {Logo}
-        </Navbar.Brand>
-
-        <div className="flex md:order-2 gap-4">
-          <div className={"hidden md:block"}>
-            <DarkModeToggle />
+          <div className={"flex items-center gap-4 md:hidden"}>
+            <Button
+              className={cn(
+                "!px-3 md:hidden",
+                permission.dashboard_view == "blocked" &&
+                  "opacity-0 pointer-events-none",
+              )}
+              variant={"default-outline"}
+              onClick={toggleMobileNav}
+            >
+              <div>
+                <MenuIcon size={20} className={"relative"} />
+              </div>
+            </Button>
+          </div>
+          <div
+            onClick={() => router.push("/peers")}
+            className={"cursor-pointer hover:opacity-70 transition-all"}
+          >
+            {Logo}
           </div>
 
-          <UserDropdown />
+          <div className="flex md:order-2 gap-4">
+            <div className={"hidden md:block"}>
+              <DarkModeToggle />
+            </div>
+
+            <UserDropdown />
+          </div>
         </div>
-      </Navbar>
-      <div className={"h-[75px]"}></div>
+      </div>
+      <div
+        style={{
+          height: headerHeight + bannerHeight,
+        }}
+      ></div>
     </>
   );
 }

src/layouts/Navigation.tsx

@@ -2,21 +2,21 @@
 
 import { ScrollArea } from "@components/ScrollArea";
 import { cn } from "@utils/helpers";
-import { isLocalDev, isNetBirdHosted } from "@utils/netbird";
 import { CustomFlowbiteTheme, Sidebar } from "flowbite-react";
 import { SidebarItemGroupProps } from "flowbite-react/lib/esm/components/Sidebar/SidebarItemGroup";
 import AccessControlIcon from "@/assets/icons/AccessControlIcon";
 import ActivityIcon from "@/assets/icons/ActivityIcon";
 import DNSIcon from "@/assets/icons/DNSIcon";
 import DocsIcon from "@/assets/icons/DocsIcon";
-import IntegrationIcon from "@/assets/icons/IntegrationIcon";
 import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
 import PeerIcon from "@/assets/icons/PeerIcon";
 import SettingsIcon from "@/assets/icons/SettingsIcon";
 import SetupKeysIcon from "@/assets/icons/SetupKeysIcon";
 import TeamIcon from "@/assets/icons/TeamIcon";
 import SidebarItem from "@/components/SidebarItem";
+import { useAnnouncement } from "@/contexts/AnnouncementProvider";
 import { useLoggedInUser } from "@/contexts/UsersProvider";
+import { headerHeight } from "@/layouts/Header";
 
 const customTheme: CustomFlowbiteTheme["sidebar"] = {
   root: {
@@ -34,6 +34,7 @@ export default function Navigation({
   hideOnMobile = false,
 }: Props) {
   const { isUser } = useLoggedInUser();
+  const { bannerHeight } = useAnnouncement();
 
   return (
     <Sidebar
@@ -42,123 +43,133 @@ export default function Navigation({
         hideOnMobile ? "hidden md:block" : "",
         fullWidth
           ? "w-auto max-w-[22rem]"
-          : "w-[15rem] min-w-[15rem] overflow-y-auto",
+          : "w-[15rem] max-w-[15rem] min-w-[15rem] overflow-y-auto",
       )}
       theme={customTheme}
       style={{
-        height: fullWidth ? "calc(100vh - 75px)" : "100%",
+        height: fullWidth
+          ? `calc(100vh - ${headerHeight + bannerHeight}px)`
+          : "100%",
       }}
     >
-      <Sidebar.Items className={cn(fullWidth ? "w-10/12" : "fixed")}>
+      <Sidebar.Items className={cn(fullWidth ? "w-10/12" : "fixed h-full")}>
         <ScrollArea
           style={{
-            height: !fullWidth ? "calc(100vh - 75px)" : "100%",
+            height: !fullWidth
+              ? `calc(100vh - ${headerHeight + bannerHeight}px)`
+              : "100%",
           }}
-          className={"pt-4"}
         >
-          <SidebarItemGroup>
-            <SidebarItem icon={<PeerIcon />} label="Peers" href={"/peers"} />
-
-            {!isUser && (
-              <>
+          <div
+            className={
+              "flex flex-col justify-between pt-4 w-[15rem] max-w-[15rem] min-w-[15rem]"
+            }
+            style={{
+              height: !fullWidth
+                ? `calc(100vh - ${headerHeight + bannerHeight}px)`
+                : "100%",
+            }}
+          >
+            <div>
+              <SidebarItemGroup>
                 <SidebarItem
-                  icon={<SetupKeysIcon />}
-                  label="Setup Keys"
-                  href={"/setup-keys"}
+                  icon={<PeerIcon />}
+                  label="Peers"
+                  href={"/peers"}
                 />
-                <SidebarItem
-                  icon={<AccessControlIcon />}
-                  label="Access Control"
-                  collapsible
-                >
+
+                {!isUser && (
+                  <>
+                    <SidebarItem
+                      icon={<SetupKeysIcon />}
+                      label="Setup Keys"
+                      href={"/setup-keys"}
+                    />
+                    <SidebarItem
+                      icon={<AccessControlIcon />}
+                      label="Access Control"
+                      collapsible
+                    >
+                      <SidebarItem
+                        label="Policies"
+                        href={"/access-control"}
+                        isChild
+                        exactPathMatch={true}
+                      />
+                      <SidebarItem
+                        label="Posture Checks"
+                        isChild
+                        href={"/posture-checks"}
+                        exactPathMatch={true}
+                      />
+                    </SidebarItem>
+
+                    <SidebarItem
+                      icon={<NetworkRoutesIcon />}
+                      label="Network Routes"
+                      href={"/network-routes"}
+                    />
+                    <SidebarItem
+                      icon={<DNSIcon />}
+                      label="DNS"
+                      collapsible
+                      exactPathMatch={true}
+                    >
+                      <SidebarItem
+                        label="Nameservers"
+                        isChild
+                        href={"/dns/nameservers"}
+                      />
+                      <SidebarItem
+                        label="DNS Settings"
+                        isChild
+                        href={"/dns/settings"}
+                      />
+                    </SidebarItem>
+                    <SidebarItem icon={<TeamIcon />} label="Team" collapsible>
+                      <SidebarItem label="Users" isChild href={"/team/users"} />
+                      <SidebarItem
+                        label="Service Users"
+                        isChild
+                        href={"/team/service-users"}
+                      />
+                    </SidebarItem>
+                    <SidebarItem
+                      icon={<ActivityIcon />}
+                      label="Activity"
+                      href={"/activity"}
+                    />
+                  </>
+                )}
+
+                {isUser && (
                   <SidebarItem
-                    label="Policies"
-                    href={"/access-control"}
-                    isChild
+                    icon={<DocsIcon />}
+                    href={"https://docs.netbird.io/"}
+                    target={"_blank"}
+                    label="Documentation"
+                  />
+                )}
+              </SidebarItemGroup>
+              {!isUser && (
+                <SidebarItemGroup>
+                  <SidebarItem
+                    icon={<SettingsIcon />}
+                    label="Settings"
+                    href={"/settings"}
                     exactPathMatch={true}
                   />
-                  <SidebarItem
-                    label="Posture Checks"
-                    isChild
-                    href={"/posture-checks"}
-                    exactPathMatch={true}
-                  />
-                </SidebarItem>
 
-                <SidebarItem
-                  icon={<NetworkRoutesIcon />}
-                  label="Network Routes"
-                  href={"/network-routes"}
-                />
-                <SidebarItem
-                  icon={<DNSIcon />}
-                  label="DNS"
-                  collapsible
-                  exactPathMatch={true}
-                >
                   <SidebarItem
-                    label="Nameservers"
-                    isChild
-                    href={"/dns/nameservers"}
+                    icon={<DocsIcon />}
+                    href={"https://docs.netbird.io/"}
+                    target={"_blank"}
+                    label="Documentation"
                   />
-                  <SidebarItem
-                    label="DNS Settings"
-                    isChild
-                    href={"/dns/settings"}
-                  />
-                </SidebarItem>
-                <SidebarItem icon={<TeamIcon />} label="Team" collapsible>
-                  <SidebarItem label="Users" isChild href={"/team/users"} />
-                  <SidebarItem
-                    label="Service Users"
-                    isChild
-                    href={"/team/service-users"}
-                  />
-                </SidebarItem>
-                <SidebarItem
-                  icon={<ActivityIcon />}
-                  label="Activity"
-                  href={"/activity"}
-                />
-              </>
-            )}
-
-            {isUser && (
-              <SidebarItem
-                icon={<DocsIcon />}
-                href={"https://docs.netbird.io/"}
-                target={"_blank"}
-                label="Documentation"
-              />
-            )}
-          </SidebarItemGroup>
-
-          {!isUser && (
-            <SidebarItemGroup>
-              <SidebarItem
-                icon={<SettingsIcon />}
-                label="Settings"
-                href={"/settings"}
-                exactPathMatch={true}
-              />
-
-              {(isLocalDev() || isNetBirdHosted()) && (
-                <SidebarItem
-                  icon={<IntegrationIcon />}
-                  label="Integrations"
-                  href={"/integrations"}
-                  exactPathMatch={true}
-                />
+                </SidebarItemGroup>
               )}
-
-              <SidebarItem
-                icon={<DocsIcon />}
-                href={"https://docs.netbird.io/"}
-                target={"_blank"}
-                label="Documentation"
-              />
-            </SidebarItemGroup>
-          )}
+            </div>
+          </div>
         </ScrollArea>
       </Sidebar.Items>
     </Sidebar>
@@ -167,7 +178,10 @@ export default function Navigation({
 
 export function SidebarItemGroup(props: SidebarItemGroupProps) {
   return (
-    <Sidebar.ItemGroup className={"dark:border-zinc-700/40"} {...props}>
+    <Sidebar.ItemGroup
+      className={"dark:border-zinc-700/40 space-y-1.5"}
+      {...props}
+    >
       {props.children}
     </Sidebar.ItemGroup>
   );

src/modules/activity/ActivityDescription.tsx

@@ -31,6 +31,10 @@ export default function ActivityDescription({ event }: Props) {
 
   if (!m) return null;
 
+  /**
+   * Setup Key
+   */
+
   if (event.activity_code == "setupkey.revoke")
     return (
       <div className={"inline"}>
@@ -54,13 +58,6 @@ export default function ActivityDescription({ event }: Props) {
       </div>
     );
 
-  if (event.activity_code == "dashboard.login")
-    return (
-      <div className={"inline"}>
-        <Value>{m.username}</Value> logged in to the dashboard
-      </div>
-    );
-
   if (event.activity_code == "setupkey.group.delete")
     return (
       <div className={"inline"}>
@@ -77,6 +74,20 @@ export default function ActivityDescription({ event }: Props) {
       </div>
     );
 
+  /**
+   * Dashboard
+   */
+  if (event.activity_code == "dashboard.login")
+    return (
+      <div className={"inline"}>
+        <Value>{m.username}</Value> logged in to the dashboard
+      </div>
+    );
+
+  /**
+   * Policy
+   */
+
   if (event.activity_code == "policy.update")
     return (
       <div className={"inline"}>
@@ -98,6 +109,10 @@ export default function ActivityDescription({ event }: Props) {
       </div>
     );
 
+  /**
+   * Route
+   */
+
   if (event.activity_code == "route.delete")
     return (
       <div className={"inline"}>
@@ -122,6 +137,10 @@ export default function ActivityDescription({ event }: Props) {
       </div>
     );
 
+  /**
+   * User
+   */
+
   if (event.activity_code == "user.peer.delete")
     return (
       <div className={"inline"}>
@@ -150,6 +169,86 @@ export default function ActivityDescription({ event }: Props) {
       </div>
     );
 
+  if (event.activity_code == "user.invite")
+    return (
+      <div className={"inline"}>
+        <Value>{event.meta.username}</Value> <Value>{event.meta.email}</Value>{" "}
+        was invited.
+      </div>
+    );
+
+  if (event.activity_code == "user.group.add")
+    return (
+      <div className={"inline"}>
+        Group <Value>{event.meta.group}</Value> was added to user{" "}
+        <Value>{event.meta.username}</Value>
+      </div>
+    );
+
+  if (event.activity_code == "user.block")
+    return (
+      <div className={"inline"}>
+        User <Value>{event.meta.username}</Value>{" "}
+        <Value>{event.meta.email}</Value>
+        was blocked
+      </div>
+    );
+
+  if (event.activity_code == "user.unblock")
+    return (
+      <div className={"inline"}>
+        User <Value>{event.meta.username}</Value>{" "}
+        <Value>{event.meta.email}</Value>
+        was unblocked
+      </div>
+    );
+
+  if (event.activity_code == "user.delete")
+    return (
+      <div className={"inline"}>
+        User <Value>{event.meta.username}</Value>{" "}
+        <Value>{event.meta.email}</Value> was deleted
+      </div>
+    );
+
+  if (event.activity_code == "user.group.delete")
+    return (
+      <div className={"inline"}>
+        Group <Value>{event.meta.group}</Value> was removed from user{" "}
+        <Value>{event.meta.username}</Value> <Value>{event.meta.email}</Value>
+      </div>
+    );
+
+  if (event.activity_code == "user.role.update")
+    return (
+      <div className={"inline"}>
+        Role <Value>{event.meta.role}</Value> was updated of user{" "}
+        <Value>{event.meta.username}</Value> <Value>{event.meta.email}</Value>
+      </div>
+    );
+
+  /**
+   * Service User
+   */
+
+  if (event.activity_code == "service.user.create")
+    return (
+      <div className={"inline"}>
+        Service user <Value>{event.meta.name}</Value> was created
+      </div>
+    );
+
+  if (event.activity_code == "service.user.delete")
+    return (
+      <div className={"inline"}>
+        Service user <Value>{event.meta.name}</Value> was deleted
+      </div>
+    );
+
+  /**
+   * Peer
+   */
+
   if (event.activity_code == "peer.group.delete")
     return (
       <div className={"inline"}>
@@ -216,6 +315,10 @@ export default function ActivityDescription({ event }: Props) {
       </div>
     );
 
+  /**
+   * Group
+   */
+
   if (event.activity_code == "group.add")
     return (
       <div className={"inline"}>
@@ -223,6 +326,17 @@ export default function ActivityDescription({ event }: Props) {
       </div>
     );
 
+  if (event.activity_code == "group.delete")
+    return (
+      <div className={"inline"}>
+        Group <Value>{event.meta.name}</Value> was deleted
+      </div>
+    );
+
+  /**
+   * Account
+   */
+
   if (event.activity_code == "account.create")
     return (
       <div className={"inline"}>
@@ -230,21 +344,18 @@ export default function ActivityDescription({ event }: Props) {
       </div>
     );
 
-  if (event.activity_code == "user.invite")
-    return (
-      <div className={"inline"}>
-        <Value>{event.meta.username}</Value> <Value>{event.meta.email}</Value>{" "}
-        was invited.
-      </div>
-    );
+  if (event.activity_code == "account.setting.peer.login.expiration.update")
+    return <div className={"inline"}>Global login expiration was updated</div>;
 
-  if (event.activity_code == "user.group.add")
-    return (
-      <div className={"inline"}>
-        Group <Value>{event.meta.group}</Value> was added to user{" "}
-        <Value>{event.meta.username}</Value>
-      </div>
-    );
+  if (event.activity_code == "account.setting.peer.login.expiration.enable")
+    return <div className={"inline"}>Global login expiration was enabled</div>;
+
+  if (event.activity_code == "account.setting.peer.login.expiration.disable")
+    return <div className={"inline"}>Global login expiration was disabled</div>;
+
+  /**
+   * Nameserver
+   */
 
   if (event.activity_code == "nameserver.group.add")
     return (
@@ -267,14 +378,9 @@ export default function ActivityDescription({ event }: Props) {
       </div>
     );
 
-  if (event.activity_code == "account.setting.peer.login.expiration.update")
-    return <div className={"inline"}>Global login expiration was updated</div>;
-
-  if (event.activity_code == "account.setting.peer.login.expiration.enable")
-    return <div className={"inline"}>Global login expiration was enabled</div>;
-
-  if (event.activity_code == "account.setting.peer.login.expiration.disable")
-    return <div className={"inline"}>Global login expiration was disabled</div>;
+  /**
+   * Personal Access Token
+   */
 
   if (event.activity_code == "personal.access.token.create")
     return (
@@ -292,68 +398,9 @@ export default function ActivityDescription({ event }: Props) {
       </div>
     );
 
-  if (event.activity_code == "user.block")
-    return (
-      <div className={"inline"}>
-        User <Value>{event.meta.username}</Value>{" "}
-        <Value>{event.meta.email}</Value>
-        was blocked
-      </div>
-    );
-
-  if (event.activity_code == "user.unblock")
-    return (
-      <div className={"inline"}>
-        User <Value>{event.meta.username}</Value>{" "}
-        <Value>{event.meta.email}</Value>
-        was unblocked
-      </div>
-    );
-
-  if (event.activity_code == "user.delete")
-    return (
-      <div className={"inline"}>
-        User <Value>{event.meta.username}</Value>{" "}
-        <Value>{event.meta.email}</Value> was deleted
-      </div>
-    );
-
-  if (event.activity_code == "user.group.delete")
-    return (
-      <div className={"inline"}>
-        Group <Value>{event.meta.group}</Value> was removed from user{" "}
-        <Value>{event.meta.username}</Value> <Value>{event.meta.email}</Value>
-      </div>
-    );
-
-  if (event.activity_code == "user.role.update")
-    return (
-      <div className={"inline"}>
-        Role <Value>{event.meta.role}</Value> was updated of user{" "}
-        <Value>{event.meta.username}</Value> <Value>{event.meta.email}</Value>
-      </div>
-    );
-
-  if (event.activity_code == "service.user.create")
-    return (
-      <div className={"inline"}>
-        Service user <Value>{event.meta.name}</Value> was created
-      </div>
-    );
-
-  if (event.activity_code == "service.user.delete")
-    return (
-      <div className={"inline"}>
-        Service user <Value>{event.meta.name}</Value> was deleted
-      </div>
-    );
-
-  if (event.activity_code == "group.delete")
-    return (
-      <div className={"inline"}>
-        Group <Value>{event.meta.name}</Value> was deleted
-      </div>
-    );
+  /**
+   * Integration
+   */
 
   if (event.activity_code == "integration.create") {
     if (!event.meta.platform) return "Integration created";
@@ -385,7 +432,10 @@ export default function ActivityDescription({ event }: Props) {
     );
   }
 
-  // Group was added to DNS Management Setting that disables DNS for the group
+  /**
+   * DNS
+   */
+
   if (event.activity_code == "dns.setting.disabled.management.group.add")
     return (
       <div className={"inline"}>
@@ -402,6 +452,31 @@ export default function ActivityDescription({ event }: Props) {
       </div>
     );
 
+  /**
+   * Posture Checks
+   */
+
+  if (event.activity_code == "posture.check.updated")
+    return (
+      <div className={"inline"}>
+        Posture check <Value> {m.name}</Value> was updated
+      </div>
+    );
+
+  if (event.activity_code == "posture.check.created")
+    return (
+      <div className={"inline"}>
+        Posture check <Value> {m.name}</Value> was created
+      </div>
+    );
+
+  if (event.activity_code == "posture.check.deleted")
+    return (
+      <div className={"inline"}>
+        Posture check <Value> {m.name}</Value> was deleted
+      </div>
+    );
+
   // TODO add activity texts
   // rule.add
   // rule.update

src/modules/activity/ActivityTypeIcon.tsx

@@ -12,6 +12,7 @@ import {
   NetworkIcon,
   Server,
   Shield,
+  ShieldCheck,
   User,
 } from "lucide-react";
 import React from "react";
@@ -70,6 +71,10 @@ export default function ActivityTypeIcon({
     return <User size={size} className={cn(DEFAULT_CLASSES, className)} />;
   } else if (code.startsWith("service")) {
     return <Cog size={size} className={cn(DEFAULT_CLASSES, className)} />;
+  } else if (code.startsWith("posture")) {
+    return (
+      <ShieldCheck size={size} className={cn(DEFAULT_CLASSES, className)} />
+    );
   } else {
     return (
       <HelpCircleIcon size={size} className={cn(DEFAULT_CLASSES, className)} />

src/modules/common-table-rows/GroupsRow.tsx

@@ -14,6 +14,7 @@ import { FolderGit2 } from "lucide-react";
 import * as React from "react";
 import { useMemo } from "react";
 import { useGroups } from "@/contexts/GroupsProvider";
+import { useLoggedInUser } from "@/contexts/UsersProvider";
 import { Group } from "@/interfaces/Group";
 import { Peer } from "@/interfaces/Peer";
 import useGroupHelper from "@/modules/groups/useGroupHelper";
@@ -38,6 +39,7 @@ export default function GroupsRow({
   peer,
 }: Props) {
   const { groups: allGroups } = useGroups();
+  const { isUser } = useLoggedInUser();
 
   // Get the group by the id
   const foundGroups = useMemo(() => {
@@ -54,7 +56,7 @@ export default function GroupsRow({
         onClick={(e) => {
           e.preventDefault();
           e.stopPropagation();
-          setModal && setModal(true);
+          setModal && !isUser && setModal(true);
         }}
       >
         <MultipleGroups groups={foundGroups} label={label} />

src/modules/groups/useGroupHelper.tsx

@@ -30,7 +30,7 @@ export default function useGroupHelper({ initial = [], peer }: Props) {
   }, [groups, initial]);
 
   const [selectedGroups, setSelectedGroups] = useState<Group[]>(initialGroups);
-  const peerGroups = usePeerGroups(peer);
+  const { peerGroups } = usePeerGroups(peer);
 
   const save = async () => {
     return Promise.all(getAllGroupCalls()).then((groups) => {

src/modules/integrations/IntegrationCard.tsx

@@ -1,104 +0,0 @@
-import Button from "@components/Button";
-import InlineLink from "@components/InlineLink";
-import Paragraph from "@components/Paragraph";
-import { ToggleSwitch } from "@components/ToggleSwitch";
-import { cn } from "@utils/helpers";
-import { ExternalLinkIcon, Repeat } from "lucide-react";
-import { StaticImport } from "next/dist/shared/lib/get-img-props";
-import Image from "next/image";
-import * as React from "react";
-
-type Props<T> = {
-  image: StaticImport | string;
-  name: string;
-  description: string;
-  url: {
-    title: string;
-    href: string;
-  };
-  data?: T;
-  switchState: boolean;
-  onEnabledChange: (enabled: boolean) => void;
-  children?: React.ReactNode;
-  onSetup?: () => void;
-  disabled?: boolean;
-  hideSwitch?: boolean;
-};
-
-export function IntegrationCard<T>({
-  image,
-  name,
-  description,
-  url,
-  data,
-  switchState,
-  onEnabledChange,
-  children,
-  onSetup,
-  disabled,
-  hideSwitch = false,
-}: Props<T>) {
-  return (
-    <div
-      className={cn(
-        " border border-nb-gray-900/50 p-5 rounded-lg transition-all max-w-[360px] flex flex-col justify-between gap-4",
-        switchState ? "bg-nb-gray-930/50" : "bg-nb-gray-930/30",
-        disabled && "opacity-60 pointer-events-none",
-      )}
-    >
-      <div className={"flex flex-col gap-4"}>
-        <div className={"flex justify-between"}>
-          <div className={"flex gap-4"}>
-            <div
-              className={
-                "h-12 w-12 flex items-center justify-center rounded-md bg-nb-gray-900/70 p-2 border border-nb-gray-900/70"
-              }
-            >
-              <Image src={image} alt={name} className={"rounded-[4px]"} />
-            </div>
-            <div>
-              <h3 className={""}>{name}</h3>
-              <InlineLink
-                href={url.href}
-                target={"_blank"}
-                className={"text-sm font-light"}
-                variant={"faded"}
-              >
-                {url.title}
-                <ExternalLinkIcon size={12} />
-              </InlineLink>
-            </div>
-          </div>
-          {!hideSwitch && (
-            <div className={"flex items-center"}>
-              <ToggleSwitch
-                checked={switchState}
-                onCheckedChange={onEnabledChange}
-                className={"grow"}
-              />
-            </div>
-          )}
-        </div>
-        <div>
-          <Paragraph className={"text-sm font-light"}>{description}</Paragraph>
-        </div>
-      </div>
-
-      {data == undefined ? (
-        <div>
-          <Button
-            variant={"secondary"}
-            size={"xs"}
-            className={"w-full items-center"}
-            onClick={onSetup}
-          >
-            <Repeat size={13} />
-            Connect {name}
-          </Button>
-        </div>
-      ) : (
-        children
-      )}
-    </div>
-  );
-}

src/modules/integrations/IntegrationModalHeader.tsx

@@ -1,56 +0,0 @@
-import Paragraph from "@components/Paragraph";
-import { cn } from "@utils/helpers";
-import { ArrowRightLeft } from "lucide-react";
-import { StaticImport } from "next/dist/shared/lib/get-img-props";
-import Image from "next/image";
-import * as React from "react";
-import netBirdLogo from "@/assets/netbird.svg";
-
-type Props = {
-  image: StaticImport | string;
-  title: string;
-  description: string;
-};
-export const IntegrationModalHeader = ({
-  image,
-  title,
-  description,
-}: Props) => {
-  return (
-    <>
-      <div className={"flex justify-center items-center gap-4 mt-5"}>
-        <div
-          className={
-            "h-12 w-12 flex items-center justify-center rounded-md bg-nb-gray-900/70 p-2 border border-nb-gray-900/70"
-          }
-        >
-          <Image
-            src={netBirdLogo}
-            alt={"NetBird"}
-            className={"rounded-[4px]"}
-          />
-        </div>
-        <div>
-          <ArrowRightLeft size={24} className={"text-netbird"} />
-        </div>
-        <div
-          className={
-            "h-12 w-12 flex items-center justify-center rounded-md bg-nb-gray-900/70 p-2 border border-nb-gray-900/70"
-          }
-        >
-          <Image src={image} alt={""} className={"rounded-[4px]"} />
-        </div>
-      </div>
-      <div
-        className={
-          "mx-auto text-center flex flex-col items-center justify-center mt-6 z-[1]"
-        }
-      >
-        <h2 className={"text-lg my-0 leading-[1.5 text-center]"}>{title}</h2>
-        <Paragraph className={cn("text-sm text-center max-w-[450px] px-4")}>
-          {description}
-        </Paragraph>
-      </div>
-    </>
-  );
-};

src/modules/integrations/event-streaming/EventStreamingCard.tsx

@@ -1,70 +0,0 @@
-import { IconCircleFilled } from "@tabler/icons-react";
-import useFetchApi from "@utils/api";
-import { cn } from "@utils/helpers";
-import { FileText } from "lucide-react";
-import Image from "next/image";
-import { useRouter } from "next/navigation";
-import * as React from "react";
-import datadogLogo from "@/assets/integrations/datadog.png";
-import { EventStream } from "@/interfaces/EventStream";
-
-export const EventStreamingCard = () => {
-  const { data: eventStreamIntegrations } = useFetchApi<EventStream[]>(
-    "/integrations/event-streaming",
-  );
-  const dataDogSettings = eventStreamIntegrations?.find(
-    (integration) => integration.platform === "datadog",
-  );
-
-  const enabled = dataDogSettings ? dataDogSettings.enabled : false;
-  const router = useRouter();
-
-  return (
-    <div className={"p-default pb-6"}>
-      <div
-        onClick={() => router.push("/integrations")}
-        className={cn(
-          "border cursor-pointer border-nb-gray-900/50 bg-nb-gray-900/30 hover:bg-nb-gray-900/50 py-3 pl-3 pr-5 rounded-lg transition-all min-w-[310px] max-w-[400px]",
-        )}
-      >
-        <div className={"inline-flex gap-4 w-full"}>
-          <div
-            className={
-              "h-10 w-10 shrink-0 flex items-center justify-center rounded-md bg-nb-gray-900/70 p-2 border border-nb-gray-900/70"
-            }
-          >
-            {dataDogSettings?.enabled && (
-              <Image
-                src={datadogLogo}
-                alt={"Datadog"}
-                className={"rounded-[4px]"}
-              />
-            )}
-
-            {!dataDogSettings && <FileText size={16} />}
-          </div>
-          <div className={""}>
-            <div className={"flex items-center gap-3 justify-between"}>
-              <div className={"font-medium text-sm flex gap-2 items-center"}>
-                Event Streaming
-              </div>
-              <div
-                className={cn(
-                  "text-xs flex gap-2 items-center mb-2 font-medium",
-                  enabled ? "text-green-500" : "text-nb-gray-500",
-                )}
-              >
-                <IconCircleFilled size={8} />
-                {enabled ? "Enabled" : "Disabled"}
-              </div>
-            </div>
-
-            <p className={"text-xs font-light !text-nb-gray-300 "}>
-              Stream your activity events to third-party services.
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

src/modules/integrations/event-streaming/EventStreamingTab.tsx

@@ -1,49 +0,0 @@
-import Breadcrumbs from "@components/Breadcrumbs";
-import InlineLink from "@components/InlineLink";
-import Paragraph from "@components/Paragraph";
-import * as Tabs from "@radix-ui/react-tabs";
-import { ExternalLinkIcon, FileText } from "lucide-react";
-import React from "react";
-import IntegrationIcon from "@/assets/icons/IntegrationIcon";
-import Datadog from "@/modules/integrations/event-streaming/datadog/Datadog";
-
-export default function EventStreamingTab() {
-  return (
-    <Tabs.Content value={"event-streaming"}>
-      <div className={"p-default py-6"}>
-        <Breadcrumbs>
-          <Breadcrumbs.Item
-            href={"/integrations"}
-            label={"Integrations"}
-            icon={<IntegrationIcon size={13} />}
-          />
-          <Breadcrumbs.Item
-            href={"/integrations"}
-            label={"Event Streaming"}
-            icon={<FileText size={14} />}
-            active
-          />
-        </Breadcrumbs>
-        <h1>Event Streaming</h1>
-        <Paragraph>
-          Event Streaming allows you to stream NetBirds activity events to
-          different third-party services.
-        </Paragraph>
-        <Paragraph>
-          Learn more about{" "}
-          <InlineLink
-            href={"https://docs.netbird.io/how-to/activity-event-streaming"}
-            target={"_blank"}
-          >
-            Event Streaming
-            <ExternalLinkIcon size={12} />
-          </InlineLink>
-          in our documentation.
-        </Paragraph>
-        <div className={"gap-6 mt-6 flex flex-wrap"}>
-          <Datadog />
-        </div>
-      </div>
-    </Tabs.Content>
-  );
-}

src/modules/integrations/event-streaming/datadog/Datadog.tsx

@@ -1,75 +0,0 @@
-import { notify } from "@components/Notification";
-import { SkeletonIntegration } from "@components/skeletons/SkeletonIntegration";
-import useFetchApi, { useApiCall } from "@utils/api";
-import * as React from "react";
-import { useState } from "react";
-import { useSWRConfig } from "swr";
-import integrationImage from "@/assets/integrations/datadog.png";
-import { useDialog } from "@/contexts/DialogProvider";
-import { EventStream } from "@/interfaces/EventStream";
-import DatadogSetup from "@/modules/integrations/event-streaming/datadog/DatadogSetup";
-import { IntegrationCard } from "@/modules/integrations/IntegrationCard";
-
-export default function Datadog() {
-  const { mutate } = useSWRConfig();
-  const { data: eventStreamIntegrations, isLoading } = useFetchApi<
-    EventStream[]
-  >("/integrations/event-streaming");
-
-  const dataDogSettings = eventStreamIntegrations?.find(
-    (integration) => integration.platform === "datadog",
-  );
-
-  const integrationRequest = useApiCall<EventStream>(
-    "/integrations/event-streaming",
-  );
-
-  const [setupModal, setSetupModal] = useState(false);
-  const { confirm } = useDialog();
-
-  const toggleSwitch = async () => {
-    if (!dataDogSettings) return setSetupModal(true);
-
-    const choice = await confirm({
-      title: `Disconnect Datadog?`,
-      description:
-        "Disconnecting deletes the current configuration. You will need to start the setup process again.",
-      confirmText: "Disconnect",
-      cancelText: "Cancel",
-      type: "warning",
-    });
-    if (!choice) return;
-
-    notify({
-      title: "Datadog Integration",
-      description: `Datadog was successfully disconnected`,
-      promise: integrationRequest.del({}, "/" + dataDogSettings.id).then(() => {
-        mutate("/integrations/event-streaming");
-      }),
-      loadingMessage: "Disconnecting integration...",
-    });
-  };
-
-  return isLoading ? (
-    <>
-      <SkeletonIntegration />
-    </>
-  ) : (
-    <>
-      <IntegrationCard
-        name="Datadog"
-        description="Datadog is a monitoring service for cloud-scale applications."
-        url={{
-          title: "datadoghq.com",
-          href: "https://www.datadoghq.com/",
-        }}
-        image={integrationImage}
-        data={dataDogSettings}
-        switchState={!dataDogSettings ? false : dataDogSettings.enabled}
-        onEnabledChange={toggleSwitch}
-        onSetup={() => setSetupModal(true)}
-      ></IntegrationCard>
-      <DatadogSetup open={setupModal} onOpenChange={setSetupModal} />
-    </>
-  );
-}

src/modules/integrations/event-streaming/datadog/DatadogRegions.ts

@@ -1,44 +0,0 @@
-import { CountryEURounded } from "@/assets/countries/CountryEURounded";
-import { CountryJPRounded } from "@/assets/countries/CountryJPRounded";
-import { CountryUSRounded } from "@/assets/countries/CountryUSRounded";
-
-export const DatadogRegions = [
-  {
-    name: "Europe (EU)",
-    site_url: "https://app.datadoghq.eu",
-    send_logs_url: "https://http-intake.logs.datadoghq.eu/api/v2/logs",
-    icon: CountryEURounded,
-  },
-  {
-    name: "United States (US1)",
-    site_url: "https://app.datadoghq.com",
-    send_logs_url: "https://http-intake.logs.datadoghq.com/api/v2/logs",
-    icon: CountryUSRounded,
-  },
-  {
-    name: "United States (US3)",
-    site_url: "https://us3.datadoghq.com",
-    send_logs_url: "https://http-intake.logs.us3.datadoghq.com/api/v2/logs",
-    icon: CountryUSRounded,
-  },
-  {
-    name: "United States (US5)",
-    site_url: "https://us5.datadoghq.com",
-    send_logs_url: "https://http-intake.logs.us5.datadoghq.com/api/v2/logs",
-    icon: CountryUSRounded,
-  },
-  {
-    name: "United States (US1-FED)",
-    site_url: "https://app.ddog-gov.com",
-    send_logs_url: "https://http-intake.logs.ddog-gov.com/api/v2/logs",
-    icon: CountryUSRounded,
-  },
-  {
-    name: "Japan (AP1)",
-    site_url: "https://ap1.datadoghq.com",
-    send_logs_url: "https://http-intake.logs.ap1.datadoghq.com/api/v2/logs",
-    icon: CountryJPRounded,
-  },
-] as const;
-
-export const DatadogApiKeysPage = "/organization-settings/api-keys";

src/modules/integrations/event-streaming/datadog/DatadogSetup.tsx

@@ -1,277 +0,0 @@
-import Button from "@components/Button";
-import InlineLink from "@components/InlineLink";
-import { Input } from "@components/Input";
-import { Modal, ModalContent, ModalFooter } from "@components/modal/Modal";
-import { notify } from "@components/Notification";
-import {
-  SelectDropdown,
-  SelectOption,
-} from "@components/select/SelectDropdown";
-import Steps from "@components/Steps";
-import { GradientFadedBackground } from "@components/ui/GradientFadedBackground";
-import { IconArrowLeft, IconArrowRight } from "@tabler/icons-react";
-import { useApiCall } from "@utils/api";
-import { cn } from "@utils/helpers";
-import {
-  ExternalLinkIcon,
-  Globe,
-  GlobeIcon,
-  KeyRound,
-  Repeat,
-} from "lucide-react";
-import Link from "next/link";
-import React, { useState } from "react";
-import { useSWRConfig } from "swr";
-import datadogLogo from "@/assets/integrations/datadog.png";
-import { EventStream } from "@/interfaces/EventStream";
-import {
-  DatadogApiKeysPage,
-  DatadogRegions,
-} from "@/modules/integrations/event-streaming/datadog/DatadogRegions";
-import { IntegrationModalHeader } from "@/modules/integrations/IntegrationModalHeader";
-
-type Props = {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onSuccess?: () => void;
-};
-
-export default function DatadogSetup({ open, onOpenChange, onSuccess }: Props) {
-  return (
-    <>
-      <Modal open={open} onOpenChange={onOpenChange} key={open ? 1 : 0}>
-        <SetupContent
-          onSuccess={() => {
-            onOpenChange(false);
-            onSuccess && onSuccess();
-          }}
-        />
-      </Modal>
-    </>
-  );
-}
-
-type ModalProps = {
-  onSuccess: () => void;
-};
-
-export function SetupContent({ onSuccess }: ModalProps) {
-  const { mutate } = useSWRConfig();
-
-  const integrationRequest = useApiCall<EventStream>(
-    "/integrations/event-streaming",
-  );
-
-  const datadogRegions = DatadogRegions.map((region) => {
-    return {
-      label: region.name,
-      value: region.send_logs_url,
-      icon: region.icon,
-    } as SelectOption;
-  });
-
-  const [selectedRegion, setSelectedRegion] = useState(datadogRegions[0].value);
-
-  const changeRegion = (region: string) => {
-    setSelectedRegion(region);
-    setApiUrl(region);
-  };
-
-  const [apiKey, setApiKey] = useState("");
-  const [apiUrl, setApiUrl] = useState(datadogRegions[0].value);
-  const [step, setStep] = useState(1);
-
-  const apiKeyEntered = apiKey.length > 0 && apiKey != "";
-  const apiUrlEntered = apiUrl.length > 0 && apiUrl != "";
-  const apiKeyAndUrlEntered = apiKeyEntered && apiUrlEntered;
-
-  const apiPageUrl =
-    DatadogRegions.find((region) => region.send_logs_url == apiUrl)?.site_url +
-    DatadogApiKeysPage;
-
-  const connect = async () => {
-    notify({
-      title: "Datadog Integration",
-      description: `Datadog was successfully connected to NetBird.`,
-      promise: integrationRequest
-        .post({
-          platform: "datadog",
-          config: {
-            api_key: apiKey,
-            api_url: apiUrl,
-          },
-          enabled: true,
-        })
-        .then(() => {
-          mutate("/integrations/event-streaming");
-          onSuccess();
-        }),
-      loadingMessage: "Setting up integration...",
-    });
-  };
-
-  return (
-    <ModalContent
-      maxWidthClass={cn("relative", step === 1 ? "max-w-md" : "max-w-lg")}
-      showClose={true}
-    >
-      <GradientFadedBackground />
-
-      <IntegrationModalHeader
-        image={datadogLogo}
-        title={"Connect NetBird with Datadog"}
-        description={
-          "Start streaming your NetBird activity events to Datadog. Follow the steps below to get started."
-        }
-      />
-
-      {step == 1 && (
-        <div className={"px-8 py-3 flex flex-col mt-4 z-0"}>
-          <p className={"font-medium flex gap-3 items-center text-base"}>
-            <GlobeIcon size={16} />
-            Select your Datadog region
-          </p>
-          <p className={"mb-3 mt-2"}>
-            To identify which region you are on please check out the{" "}
-            <InlineLink
-              href={"https://docs.datadoghq.com/getting_started/site/"}
-              target={"_blank"}
-              variant={"default"}
-              className={"inline"}
-            >
-              Datadog Documentation.
-            </InlineLink>
-          </p>
-          <SelectDropdown
-            value={selectedRegion}
-            onChange={changeRegion}
-            options={datadogRegions}
-          />
-          <div className={"mt-3 hidden"}>
-            <Input
-              type={"text"}
-              className={"w-full"}
-              customPrefix={
-                <div className={"flex items-center gap-2"}>
-                  <Globe size={16} className={"text-nb-gray-300"} />
-                </div>
-              }
-              placeholder={"https://http-intake.logs.datadoghq.eu/api/v2/logs"}
-              value={apiUrl}
-              onChange={(e) => setApiUrl(e.target.value)}
-            />
-          </div>
-
-          <div className={"mb-3"}></div>
-        </div>
-      )}
-
-      {step == 2 && (
-        <div className={"px-8 py-3 flex flex-col gap-0 mt-4 z-0"}>
-          <p className={"font-medium flex gap-3 items-center text-base"}>
-            <KeyRound size={16} />
-            Get your Datadog API Key
-          </p>
-          <Steps>
-            <Steps.Step step={1}>
-              <p>Navigate to Datadogs API Keys page</p>
-              <div className={"flex gap-4"}>
-                <Link href={apiPageUrl} passHref target={"_blank"}>
-                  <Button variant={"primary"} size={"xs"}>
-                    <ExternalLinkIcon size={14} />
-                    API Keys
-                  </Button>
-                </Link>
-              </div>
-            </Steps.Step>
-            <Steps.Step step={2}>
-              <p className={"font-normal"}>
-                Click{" "}
-                <div
-                  className={
-                    "inline-flex bg-nb-gray-900 py-1.5 px-2.5 rounded-md text-xs items-center mx-0.5"
-                  }
-                >
-                  + New Key
-                </div>{" "}
-                at the top
-              </p>
-            </Steps.Step>
-            <Steps.Step step={3}>
-              <p className={"font-normal"}>
-                Give it a descriptive name like{" "}
-                <div
-                  className={
-                    "inline-flex bg-nb-gray-900 py-1.5 px-2.5 rounded-md text-xs items-center mx-0.5"
-                  }
-                >
-                  NetBird Activity Events
-                </div>
-                and click{" "}
-                <div
-                  className={
-                    "inline-flex bg-nb-gray-900 py-1.5 px-2.5 rounded-md text-xs items-center mx-0.5"
-                  }
-                >
-                  Create Key
-                </div>
-              </p>
-            </Steps.Step>
-            <Steps.Step step={4} line={false}>
-              <p className={"font-normal"}>Enter your API-Key</p>
-            </Steps.Step>
-          </Steps>
-          <div className={"mb-4"}>
-            <Input
-              type={"text"}
-              className={"w-full"}
-              customPrefix={
-                <div className={"flex items-center gap-2"}>
-                  <KeyRound size={16} className={"text-nb-gray-300"} />
-                </div>
-              }
-              placeholder={"1c17401cf170f7ac33dd9dcdf8040eb2"}
-              value={apiKey}
-              onChange={(e) => setApiKey(e.target.value)}
-            />
-          </div>
-        </div>
-      )}
-
-      <ModalFooter className={"items-center gap-4"}>
-        {step == 1 && (
-          <Button
-            variant={"primary"}
-            className={"w-full"}
-            disabled={!apiUrlEntered}
-            onClick={() => setStep(2)}
-          >
-            Continue
-            <IconArrowRight size={16} />
-          </Button>
-        )}
-        {step == 2 && (
-          <>
-            <Button
-              variant={"secondary"}
-              className={"w-full"}
-              onClick={() => setStep(1)}
-            >
-              <IconArrowLeft size={16} />
-              Back
-            </Button>
-            <Button
-              variant={"primary"}
-              className={"w-full"}
-              disabled={!apiKeyAndUrlEntered}
-              onClick={connect}
-            >
-              <Repeat size={16} />
-              Connect
-            </Button>
-          </>
-        )}
-      </ModalFooter>
-    </ModalContent>
-  );
-}

src/modules/integrations/idp-sync/GroupPrefixInput.tsx

@@ -1,109 +0,0 @@
-import Button from "@components/Button";
-import { Input } from "@components/Input";
-import { useDebounce } from "@hooks/useDebounce";
-import { Folder, MinusCircleIcon, PlusIcon } from "lucide-react";
-import * as React from "react";
-import { useEffect, useState } from "react";
-
-type GroupPrefixInputProps = {
-  value: string[];
-  onChange: (values: string[]) => void;
-  addText?: string;
-  icon?: React.ReactNode;
-  text?: string;
-  placeholder?: string;
-};
-
-export function GroupPrefixInput({
-  value,
-  onChange,
-  addText = "Add group filter",
-  icon = <Folder size={14} />,
-  text = "Group starts with...",
-  placeholder = "e.g., NetBird_",
-}: GroupPrefixInputProps) {
-  const [groupPrefixes, setGroupPrefixes] = useState<string[]>(value);
-  const prefixes = useDebounce(groupPrefixes, 100);
-
-  useEffect(() => {
-    onChange(prefixes);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [prefixes]);
-
-  const onChangeHandler = (
-    e: React.ChangeEvent<HTMLInputElement>,
-    index: number,
-  ) => {
-    const newPrefixes = [...groupPrefixes];
-    newPrefixes[index] = e.target.value;
-    setGroupPrefixes(newPrefixes);
-  };
-
-  const onRemoveGroupPrefix = (index: number) => {
-    setGroupPrefixes((p) => {
-      const newPrefixes = [...p];
-      newPrefixes.splice(index, 1);
-      return newPrefixes;
-    });
-  };
-
-  const onAddGroupPrefix = () => {
-    setGroupPrefixes((p) => {
-      const newPrefixes = [...p];
-      newPrefixes.push("");
-      return newPrefixes;
-    });
-  };
-
-  return (
-    <div className={"mt-4"}>
-      {groupPrefixes.length > 0 && (
-        <div className={"flex gap-3 w-full mb-3"}>
-          <div className={"flex flex-col gap-2 w-full"}>
-            {groupPrefixes.map((g, i) => {
-              return (
-                <div className={"flex gap-2 w-full"} key={i}>
-                  <div className={"w-full"}>
-                    <Input
-                      customPrefix={
-                        <div className={"flex gap-2 items-center"}>
-                          {icon}
-                          <span>{text}</span>
-                        </div>
-                      }
-                      placeholder={placeholder}
-                      maxWidthClass={"w-full"}
-                      value={g}
-                      className={" !text-[13px]"}
-                      onKeyDown={(event) => {
-                        if (event.code === "Space") event.preventDefault();
-                      }}
-                      onChange={(e) => onChangeHandler(e, i)}
-                    />
-                  </div>
-                  <Button
-                    className={"h-[42px]"}
-                    variant={"default-outline"}
-                    onClick={() => onRemoveGroupPrefix(i)}
-                  >
-                    <MinusCircleIcon size={15} />
-                  </Button>
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      )}
-
-      <Button
-        variant={"dotted"}
-        className={"w-full"}
-        size={"sm"}
-        onClick={onAddGroupPrefix}
-      >
-        <PlusIcon size={14} />
-        {addText}
-      </Button>
-    </div>
-  );
-}

src/modules/integrations/idp-sync/IdentityProviderTab.tsx

@@ -1,87 +0,0 @@
-import Breadcrumbs from "@components/Breadcrumbs";
-import InlineLink from "@components/InlineLink";
-import { Label } from "@components/Label";
-import Paragraph from "@components/Paragraph";
-import { SkeletonIntegration } from "@components/skeletons/SkeletonIntegration";
-import * as Tabs from "@radix-ui/react-tabs";
-import { ExternalLinkIcon, FingerprintIcon } from "lucide-react";
-import React from "react";
-import IntegrationIcon from "@/assets/icons/IntegrationIcon";
-import { useAccount } from "@/modules/account/useAccount";
-import { AzureAD } from "@/modules/integrations/idp-sync/azure-ad/AzureAD";
-import { GoogleWorkspace } from "@/modules/integrations/idp-sync/google-workspace/GoogleWorkspace";
-import { useIntegrations } from "@/modules/integrations/idp-sync/useIntegrations";
-
-export default function IdentityProviderTab() {
-  const account = useAccount();
-
-  useIntegrations();
-
-  return (
-    <Tabs.Content value={"identity-provider"}>
-      <div className={"p-default py-6"}>
-        <Breadcrumbs>
-          <Breadcrumbs.Item
-            href={"/integrations"}
-            label={"Integrations"}
-            icon={<IntegrationIcon size={13} />}
-          />
-          <Breadcrumbs.Item
-            href={"/settings"}
-            label={"Identity Provider"}
-            icon={<FingerprintIcon size={14} />}
-            active
-          />
-        </Breadcrumbs>
-        <h1>Identity Provider</h1>
-        <Paragraph>
-          Configure your preferred Identity Provider (IdP) to synchronize your
-          users and groups to NetBird.
-        </Paragraph>
-        <Paragraph>
-          Learn more about{" "}
-          <InlineLink href={"#"} target={"_blank"}>
-            Identity Provider
-            <ExternalLinkIcon size={12} />
-          </InlineLink>
-          in our documentation.
-        </Paragraph>
-        <div className={"gap-6 mt-6 flex flex-wrap"}>
-          {!account ? (
-            <>
-              <SkeletonIntegration loadingHeight={196} />
-              <SkeletonIntegration loadingHeight={196} />
-            </>
-          ) : (
-            <>
-              <GoogleWorkspace />
-              <AzureAD />
-            </>
-          )}
-        </div>
-        <div className={"flex flex-col gap-6 max-w-md mt-10"}>
-          <div
-            className={
-              "bg-netbird-950 px-6 py-4 rounded-md border border-netbird-500 "
-            }
-          >
-            <Label className={"!text-netbird-100 text-md"}>
-              Looking to enable a custom Identity Provider like Okta or
-              Jumpcloud?
-            </Label>
-            <p className={"!text-netbird-200 mt-2"}>
-              Please contact us at{" "}
-              <InlineLink
-                href={"mailto:support@netbird.io"}
-                className={"inline !text-netbird-500 font-medium"}
-              >
-                {" "}
-                support@netbird.io
-              </InlineLink>{" "}
-            </p>
-          </div>
-        </div>
-      </div>
-    </Tabs.Content>
-  );
-}

src/modules/integrations/idp-sync/azure-ad/AzureAD.tsx

@@ -1,158 +0,0 @@
-import Button from "@components/Button";
-import FullTooltip from "@components/FullTooltip";
-import { notify } from "@components/Notification";
-import { SkeletonIntegration } from "@components/skeletons/SkeletonIntegration";
-import useFetchApi, { useApiCall } from "@utils/api";
-import dayjs from "dayjs";
-import { RefreshCw, Settings } from "lucide-react";
-import * as React from "react";
-import { useEffect, useState } from "react";
-import { useSWRConfig } from "swr";
-import integrationImage from "@/assets/integrations/entra-id.png";
-import {
-  AzureADIntegration,
-  IdentityProviderLog,
-} from "@/interfaces/IdentityProvider";
-import AzureADConfiguration from "@/modules/integrations/idp-sync/azure-ad/AzureADConfiguration";
-import AzureADSetup from "@/modules/integrations/idp-sync/azure-ad/AzureADSetup";
-import { useIntegrations } from "@/modules/integrations/idp-sync/useIntegrations";
-import { IntegrationCard } from "@/modules/integrations/IntegrationCard";
-
-export const AzureAD = () => {
-  const { mutate } = useSWRConfig();
-  const [setupModal, setSetupModal] = useState(false);
-
-  const {
-    azure: integration,
-    isAnyIntegrationEnabled,
-    isAzureLoading,
-  } = useIntegrations();
-  const azureRequest = useApiCall<AzureADIntegration>(
-    "/integrations/azure-idp",
-  );
-
-  const [enabled, setEnabled] = useState(
-    integration ? integration.enabled : false,
-  );
-
-  useEffect(() => {
-    setEnabled(integration?.enabled ?? false);
-  }, [integration]);
-
-  const toggleSwitch = async (state: boolean) => {
-    if (!integration) return setSetupModal(true);
-
-    notify({
-      title: "Entra ID (Azure AD) Integration",
-      description: `Entra ID (Azure AD) was successfully ${
-        state ? "enabled" : "disabled"
-      }`,
-      promise: azureRequest
-        .put(
-          {
-            enabled: state,
-          },
-          "/" + integration.id,
-        )
-        .then(() => {
-          mutate("/integrations/azure-idp");
-          setEnabled(state);
-        }),
-      loadingMessage: "Updating integration...",
-    });
-  };
-
-  return isAzureLoading ? (
-    <SkeletonIntegration loadingHeight={197} />
-  ) : (
-    <>
-      <IntegrationCard
-        name="Entra ID (Azure AD)"
-        description="Microsoft Entra ID is a cloud-based identity and access management solution."
-        url={{
-          title: "microsoft.com",
-          href: "https://www.microsoft.com/en-us/security/business/identity-access/microsoft-entra-id",
-        }}
-        image={integrationImage}
-        data={integration}
-        disabled={enabled ? false : isAnyIntegrationEnabled}
-        switchState={enabled}
-        onEnabledChange={toggleSwitch}
-        onSetup={() => setSetupModal(true)}
-      >
-        {integration && <ConfigurationButton config={integration} />}
-      </IntegrationCard>
-      <AzureADSetup
-        open={setupModal}
-        onOpenChange={setSetupModal}
-        onSuccess={() => setEnabled(true)}
-      />
-    </>
-  );
-};
-
-type ConfigurationProps = {
-  config: AzureADIntegration;
-};
-const ConfigurationButton = ({ config }: ConfigurationProps) => {
-  const { data: logs } = useFetchApi<IdentityProviderLog[]>(
-    `/integrations/azure-idp/${config.id}/logs`,
-  );
-  const { mutate } = useSWRConfig();
-  const syncRequest = useApiCall<{ response: boolean }>(
-    `/integrations/azure-idp/${config.id}/sync`,
-  );
-
-  const [configModal, setConfigModal] = useState(false);
-
-  const forceSync = async () => {
-    notify({
-      title: "Entra ID (Azure AD) Integration",
-      description: `Entra ID (Azure AD) was successfully synced`,
-      loadingMessage: "Syncing integration...",
-      promise: syncRequest.post({}).then(() => {
-        mutate(`/integrations/azure-idp/${config.id}/logs`);
-      }),
-    });
-  };
-
-  return (
-    <>
-      <div className={"flex gap-2"}>
-        <FullTooltip
-          content={
-            <div className={"text-xs"}>
-              Force synchronization of users and groups
-            </div>
-          }
-          disabled={!config.enabled}
-          className={"w-full"}
-          interactive={false}
-        >
-          <Button
-            variant={"secondary"}
-            size={"xs"}
-            className={"w-full items-center"}
-            onClick={forceSync}
-            disabled={!config.enabled}
-          >
-            <RefreshCw size={14} />
-            Synced {dayjs().to(logs?.[0]?.timestamp)}
-          </Button>
-        </FullTooltip>
-
-        <Button
-          variant={"secondary"}
-          size={"xs"}
-          className={"items-center"}
-          onClick={() => {
-            setConfigModal(true);
-          }}
-        >
-          <Settings size={14} />
-        </Button>
-      </div>
-      <AzureADConfiguration open={configModal} onOpenChange={setConfigModal} />
-    </>
-  );
-};

src/modules/integrations/idp-sync/azure-ad/AzureADConfiguration.tsx

@@ -1,372 +0,0 @@
-import Button from "@components/Button";
-import HelpText from "@components/HelpText";
-import { Input } from "@components/Input";
-import { Label } from "@components/Label";
-import {
-  Modal,
-  ModalClose,
-  ModalContent,
-  ModalFooter,
-} from "@components/modal/Modal";
-import { notify } from "@components/Notification";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@components/Tabs";
-import { GradientFadedBackground } from "@components/ui/GradientFadedBackground";
-import { useHasChanges } from "@hooks/useHasChanges";
-import { useApiCall } from "@utils/api";
-import { cn } from "@utils/helpers";
-import {
-  AlertOctagon,
-  Box,
-  Cog,
-  Folder,
-  FolderGit2,
-  KeyRound,
-  RefreshCw,
-  UserCircle,
-} from "lucide-react";
-import React, { useState } from "react";
-import { useSWRConfig } from "swr";
-import integrationImage from "@/assets/integrations/entra-id.png";
-import { useDialog } from "@/contexts/DialogProvider";
-import { AzureADIntegration } from "@/interfaces/IdentityProvider";
-import { GroupPrefixInput } from "@/modules/integrations/idp-sync/GroupPrefixInput";
-import { useIntegrations } from "@/modules/integrations/idp-sync/useIntegrations";
-import { IntegrationModalHeader } from "@/modules/integrations/IntegrationModalHeader";
-
-type Props = {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onSuccess?: () => void;
-};
-
-export default function AzureADConfiguration({
-  open,
-  onOpenChange,
-  onSuccess,
-}: Props) {
-  const { azure } = useIntegrations();
-
-  return (
-    <>
-      <Modal open={open} onOpenChange={onOpenChange} key={open ? 1 : 0}>
-        {azure && (
-          <ConfigurationContent
-            onSuccess={() => {
-              onOpenChange(false);
-              onSuccess && onSuccess();
-            }}
-            config={azure}
-          />
-        )}
-      </Modal>
-    </>
-  );
-}
-
-type ModalProps = {
-  onSuccess: () => void;
-  config: AzureADIntegration;
-};
-
-export function ConfigurationContent({ onSuccess, config }: ModalProps) {
-  const { mutate } = useSWRConfig();
-  const { confirm } = useDialog();
-
-  const [tab, setTab] = useState<string>("settings");
-
-  const azureRequest = useApiCall<AzureADIntegration>(
-    "/integrations/azure-idp",
-  );
-
-  const clientSecretPlaceholder = "******************************";
-  const [clientSecret, setClientSecret] = useState(clientSecretPlaceholder);
-
-  const [clientId, setClientId] = useState(config.clientId);
-  const [tenantId, setTenantId] = useState(config.tenantId);
-  const [interval, setInterval] = useState(config.syncInterval.toString());
-
-  const [groupPrefixes, setGroupPrefixes] = useState<string[]>(
-    config.group_prefixes || [],
-  );
-  const [userGroupPrefixes, setUserGroupPrefixes] = useState<string[]>(
-    config.user_group_prefixes || [],
-  );
-
-  const deleteIntegration = async () => {
-    const choice = await confirm({
-      title: `Delete integration?`,
-      description: "Are you sure you want to delete this integration?",
-      confirmText: "Delete",
-      cancelText: "Cancel",
-      type: "danger",
-    });
-
-    if (!choice) return;
-
-    notify({
-      title: "Entra ID (Azure AD) Integration",
-      description: `Entra ID (Azure AD) was successfully deleted`,
-      promise: azureRequest.del({}, `/${config.id}`).then(() => {
-        mutate("/integrations/azure-idp");
-        onSuccess();
-      }),
-      loadingMessage: "Deleting integration...",
-    });
-  };
-
-  const updateIntegration = async () => {
-    notify({
-      title: "Entra ID (Azure AD) Integration",
-      description: `Entra ID (Azure AD) was successfully updated`,
-      promise: azureRequest
-        .put(
-          {
-            client_id: clientId,
-            tenant_id: tenantId,
-            client_secret:
-              clientSecretPlaceholder == clientSecret
-                ? undefined
-                : btoa(clientSecret),
-            sync_interval: interval ? parseInt(interval) : 300,
-            group_prefixes: groupPrefixes || [],
-            user_group_prefixes: userGroupPrefixes || [],
-          },
-          `/${config.id}`,
-        )
-        .then(() => {
-          mutate("/integrations/azure-idp");
-          onSuccess();
-        }),
-      loadingMessage: "Updating integration...",
-    });
-  };
-
-  const { hasChanges } = useHasChanges([
-    clientId,
-    tenantId,
-    clientSecret,
-    interval,
-    groupPrefixes,
-    userGroupPrefixes,
-  ]);
-
-  return (
-    <ModalContent
-      maxWidthClass={cn("relative max-w-xl")}
-      showClose={true}
-      className={""}
-      autoFocus={false}
-    >
-      <GradientFadedBackground />
-
-      <IntegrationModalHeader
-        image={integrationImage}
-        title={"Entra ID (Azure AD) Configuration"}
-        description={"Sync your users and groups from Entra ID to NetBird."}
-      />
-
-      <Tabs
-        defaultValue={tab}
-        onValueChange={(v) => setTab(v)}
-        className={"mt-6"}
-      >
-        <TabsList justify={"start"} className={"px-8"}>
-          <TabsTrigger value={"settings"}>
-            <Cog
-              size={16}
-              className={
-                "text-nb-gray-500 group-data-[state=active]/trigger:text-netbird transition-all"
-              }
-            />
-            Settings
-          </TabsTrigger>
-          <TabsTrigger value={"group-sync"}>
-            <FolderGit2
-              size={16}
-              className={
-                "text-nb-gray-500 group-data-[state=active]/trigger:text-netbird transition-all"
-              }
-            />
-            Group Sync
-          </TabsTrigger>
-          <TabsTrigger value={"user-sync"}>
-            <UserCircle
-              size={16}
-              className={
-                "text-nb-gray-500 group-data-[state=active]/trigger:text-netbird transition-all"
-              }
-            />
-            User Sync
-          </TabsTrigger>
-          <TabsTrigger value={"danger"}>
-            <AlertOctagon
-              size={16}
-              className={
-                "text-nb-gray-500 group-data-[state=active]/trigger:text-netbird transition-all"
-              }
-            />
-            Danger Zone
-          </TabsTrigger>
-        </TabsList>
-        <TabsContent value={"settings"} className={"px-8 text-sm"}>
-          <div className={"flex-col gap-3 flex"}>
-            <Input
-              type={"text"}
-              autoCorrect={"off"}
-              autoComplete={"off"}
-              className={"w-full"}
-              customPrefix={
-                <div className={"min-w-[165px] flex gap-2 items-center"}>
-                  <Box size={16} />
-                  Application (client) ID
-                </div>
-              }
-              placeholder={"62d3a656-c87d-4f30-a242-5b6347e29e9f"}
-              value={clientId}
-              onChange={(e) => setClientId(e.target.value)}
-            />
-            <Input
-              autoCorrect={"off"}
-              autoComplete={"off"}
-              type={"text"}
-              className={"w-full"}
-              customPrefix={
-                <div className={"min-w-[165px] flex gap-2 items-center"}>
-                  <Folder size={16} />
-                  Directory (tenant) ID
-                </div>
-              }
-              placeholder={"5d60468a-65b7-45eb-a61a-53ecfbcd1ea3"}
-              value={tenantId}
-              onChange={(e) => setTenantId(e.target.value)}
-            />
-
-            <Input
-              autoCorrect={"off"}
-              type={"text"}
-              className={"w-full"}
-              customPrefix={
-                <div className={"min-w-[165px] flex gap-2 items-center"}>
-                  <KeyRound size={16} />
-                  Client Secret
-                </div>
-              }
-              placeholder={"YdV7Q~JJ62Xl.LvYoBanxZR2sJA2va_3UbqvncY8"}
-              value={clientSecret}
-              onChange={(e) => setClientSecret(e.target.value)}
-            />
-
-            <div className={"flex justify-between mt-4"}>
-              <div>
-                <Label>Sync Interval</Label>
-                <HelpText className={"max-w-[300px]"}>
-                  The interval in seconds when the synchronization should
-                  happen.
-                </HelpText>
-              </div>
-              <Input
-                maxWidthClass={"max-w-[400px]"}
-                placeholder={"300"}
-                min={1}
-                max={99999}
-                value={interval}
-                type={"number"}
-                onChange={(e) => setInterval(e.target.value)}
-                customPrefix={
-                  <RefreshCw size={16} className={"text-nb-gray-300"} />
-                }
-                customSuffix={"Seconds"}
-              />
-            </div>
-          </div>
-        </TabsContent>
-
-        <TabsContent value={"group-sync"} className={"px-8"}>
-          <div>
-            <Label>
-              <div className={"flex gap-2 items-center"}>
-                <FolderGit2 size={16} />
-                Synchronize Groups
-              </div>
-            </Label>
-            <HelpText className={"max-w-lg mt-2"}>
-              By default,{" "}
-              <span className={"text-netbird font-semibold"}>All Groups</span>{" "}
-              will be synchronized from your IdP to NetBird. <br />
-              If you want to synchronize only groups that start with a specific
-              prefix, you can add them below.
-            </HelpText>
-          </div>
-          <GroupPrefixInput value={groupPrefixes} onChange={setGroupPrefixes} />
-        </TabsContent>
-
-        <TabsContent value={"user-sync"} className={"px-8"}>
-          <div>
-            <Label>
-              <div className={"flex gap-2 items-center"}>
-                <UserCircle size={16} />
-                Synchronize Users
-              </div>
-            </Label>
-            <HelpText className={"max-w-lg mt-2"}>
-              By default,{" "}
-              <span className={"text-netbird font-semibold"}>All Users</span>{" "}
-              will be synchronized from your IdP to NetBird. <br />
-              If you want to synchronize only users that belong to a specific
-              group, you can add them below.
-            </HelpText>
-          </div>
-          <GroupPrefixInput
-            addText={"Add user group filter"}
-            text={"User group starts with..."}
-            value={userGroupPrefixes}
-            onChange={setUserGroupPrefixes}
-          />
-        </TabsContent>
-
-        <TabsContent value={"danger"} className={"px-8"}>
-          <div>
-            <Label>
-              <div className={"flex gap-2 items-center"}>
-                <AlertOctagon size={16} />
-                Delete Integration
-              </div>
-            </Label>
-            <HelpText className={"max-w-lg mt-2"}>
-              Deleting this integration will remove the ability to sync users
-              and groups from your IdP to NetBird. If you delete the integration
-              you will need to reconfigure it again to enable the
-              synchronization.
-            </HelpText>
-          </div>
-          <Button
-            variant={"danger"}
-            size={"xs"}
-            className={"mt-3"}
-            onClick={deleteIntegration}
-          >
-            Delete Integration
-          </Button>
-        </TabsContent>
-      </Tabs>
-      <div className={"h-6"}></div>
-
-      <ModalFooter className={"items-center gap-4"}>
-        <ModalClose asChild={true}>
-          <Button variant={"secondary"} className={"w-full"}>
-            Cancel
-          </Button>
-        </ModalClose>
-
-        <Button
-          variant={"primary"}
-          className={"w-full"}
-          disabled={!hasChanges}
-          onClick={updateIntegration}
-        >
-          Save
-        </Button>
-      </ModalFooter>
-    </ModalContent>
-  );
-}

src/modules/integrations/idp-sync/azure-ad/AzureADSetup.tsx

@@ -1,498 +0,0 @@
-import Button from "@components/Button";
-import HelpText from "@components/HelpText";
-import InlineLink from "@components/InlineLink";
-import { Input } from "@components/Input";
-import { Modal, ModalContent, ModalFooter } from "@components/modal/Modal";
-import { notify } from "@components/Notification";
-import Steps from "@components/Steps";
-import { GradientFadedBackground } from "@components/ui/GradientFadedBackground";
-import { Lightbox } from "@components/ui/Lightbox";
-import { Mark } from "@components/ui/Mark";
-import { MinimalList } from "@components/ui/MinimalList";
-import { IconArrowLeft, IconArrowRight } from "@tabler/icons-react";
-import { useApiCall } from "@utils/api";
-import { cn } from "@utils/helpers";
-import { isEmpty } from "lodash";
-import {
-  Box,
-  Clock4,
-  Folder,
-  FolderGit2,
-  KeyRound,
-  PlusCircle,
-  Repeat,
-  Settings2,
-  Shield,
-  UserCircle,
-} from "lucide-react";
-import React, { useState } from "react";
-import { useSWRConfig } from "swr";
-import integrationImage from "@/assets/integrations/entra-id.png";
-import { AzureADIntegration } from "@/interfaces/IdentityProvider";
-import azureGrantAdmin from "@/modules/integrations/idp-sync/azure-ad/images/azure-grant-admin-conset.png";
-import { IntegrationModalHeader } from "@/modules/integrations/IntegrationModalHeader";
-import { GroupPrefixInput } from "../GroupPrefixInput";
-
-type Props = {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onSuccess?: () => void;
-};
-
-export default function AzureADSetup({ open, onOpenChange, onSuccess }: Props) {
-  return (
-    <>
-      <Modal open={open} onOpenChange={onOpenChange} key={open ? 1 : 0}>
-        <SetupContent
-          onSuccess={() => {
-            onOpenChange(false);
-            onSuccess && onSuccess();
-          }}
-        />
-      </Modal>
-    </>
-  );
-}
-
-type ModalProps = {
-  onSuccess: () => void;
-};
-
-export function SetupContent({ onSuccess }: ModalProps) {
-  const { mutate } = useSWRConfig();
-  const azureRequest = useApiCall<AzureADIntegration>(
-    "/integrations/azure-idp",
-  );
-
-  const [step, setStep] = useState(0);
-  const maxSteps = 6;
-
-  const [clientSecret, setClientSecret] = useState("");
-  const [clientId, setClientId] = useState("");
-  const [tenantId, setTenantId] = useState("");
-
-  const clientSecretEntered = !isEmpty(clientSecret);
-  const clientIdEntered = !isEmpty(clientId);
-  const tenantIdEntered = !isEmpty(tenantId);
-
-  const allEntered = clientIdEntered && tenantIdEntered && clientSecretEntered;
-
-  const isDisabled =
-    (step == 8 && !clientSecretEntered) || (step == 9 && !allEntered);
-
-  const [groupPrefixes, setGroupPrefixes] = useState<string[]>([]);
-  const [userGroupPrefixes, setUserGroupPrefixes] = useState<string[]>([]);
-
-  const connect = async () => {
-    notify({
-      title: "Entra ID Integration",
-      description: `Entra ID was successfully connected to NetBird.`,
-      promise: azureRequest
-        .post({
-          client_secret: btoa(clientSecret), // Encode client secret to base64
-          client_id: clientId,
-          tenant_id: tenantId,
-          group_prefixes: groupPrefixes || [],
-          user_group_prefixes: userGroupPrefixes || [],
-        })
-        .then(() => {
-          mutate("/integrations/azure-idp");
-          onSuccess();
-        }),
-      loadingMessage: "Setting up integration...",
-    });
-  };
-
-  return (
-    <ModalContent
-      maxWidthClass={cn("relative", step == 0 ? "max-w-md" : "max-w-xl")}
-      showClose={true}
-      className={""}
-      onEscapeKeyDown={(e) => step > 0 && e.preventDefault()}
-      onInteractOutside={(e) => step > 0 && e.preventDefault()}
-      onPointerDownOutside={(e) => step > 0 && e.preventDefault()}
-    >
-      <GradientFadedBackground />
-
-      {step > 0 && (
-        <div className={"flex gap-2 w-full items-center justify-center mb-4"}>
-          {Array.from({ length: maxSteps }).map((_, index) => (
-            <div
-              key={index}
-              className={cn(
-                "w-8 h-1 rounded-full bg-nb-gray-800",
-                step >= index + 1 && "bg-netbird",
-              )}
-            />
-          ))}
-        </div>
-      )}
-
-      <IntegrationModalHeader
-        image={integrationImage}
-        title={"Connect NetBird with Entra ID (Azure AD)"}
-        description={
-          "Start syncing your users and groups from Entra ID to NetBird. Follow the steps below to get started."
-        }
-      />
-
-      {step == 0 && (
-        <div
-          className={
-            "px-8 py-3 flex z-0 flex-col gap-0 text-sm mb-3 text-center justify-center items-center"
-          }
-        >
-          <div
-            className={
-              "mt-6 text-base font-medium text-nb-gray-100 flex gap-2 items-center justify-center"
-            }
-          >
-            <Shield size={16} />
-            Required Permissions
-          </div>
-          <p className={"mt-2 !text-nb-gray-300 !leading-[1.5]"}>
-            Ensure that you have an an{" "}
-            <span className={"text-nb-gray-100 font-semibold"}>
-              Azure AD user account
-            </span>{" "}
-            with the following{" "}
-            <span className={"text-nb-gray-100 font-semibold"}>
-              permissions
-            </span>
-            .{" "}
-            {
-              "If you don't have the required permissions, ask your Azure AD administrator to grant them to you."
-            }
-          </p>
-          <div
-            className={
-              "flex items-center flex-col gap-0 mt-2 w-full justify-center max-w-lg"
-            }
-          >
-            <div
-              className={
-                "py-2 px-6 flex items-center gap-2 rounded-md w-full justify-center bg-nb-gray-930/0 text-nb-gray-200"
-              }
-            >
-              <PlusCircle size={14} className={"text-sky-500"} />
-              Create Azure AD applications
-            </div>
-            <div
-              className={
-                "py-2 px-6 flex items-center gap-2 rounded-md w-full justify-center bg-nb-gray-930/0 text-nb-gray-200"
-              }
-            >
-              <Settings2 size={14} className={"text-sky-500"} />
-              Manage Azure AD applications
-            </div>
-          </div>
-        </div>
-      )}
-
-      {step == 1 && (
-        <div className={"px-8 py-3 flex flex-col gap-0 mt-4"}>
-          <p className={"font-medium flex gap-3 items-center text-base"}>
-            <Box size={20} />
-            Create and configure Azure AD application
-          </p>
-          <Steps>
-            <Steps.Step step={1}>
-              <p>
-                Navigate to{"  "}
-                <InlineLink
-                  className={"inline"}
-                  target={"_blank"}
-                  href={
-                    "https://portal.azure.com/#view/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/~/Overview"
-                  }
-                >
-                  Azure Active Directory
-                </InlineLink>
-              </p>
-            </Steps.Step>
-            <Steps.Step step={2}>
-              <p className={"font-normal"}>
-                Click <Mark>App Registrations</Mark> in the left menu then click
-                on the <Mark>+ New registration</Mark> button to create a new
-                application.
-              </p>
-            </Steps.Step>
-            <Steps.Step step={3} line={false}>
-              <p className={"font-normal"}>
-                Fill in the form with the following values and click{" "}
-                <Mark>Register</Mark>
-              </p>
-            </Steps.Step>
-          </Steps>
-
-          <MinimalList
-            data={[
-              {
-                label: "Name",
-                value: "NetBird",
-              },
-              {
-                label: "Account Types",
-                value:
-                  "Accounts in this organizational directory only (Default Directory only - Single tenant)",
-              },
-              {
-                label: "Redirect Type",
-                value: "Single-page application (SPA)",
-              },
-              {
-                label: "Redirect URI",
-                value: "https://app.netbird.io/silent-auth",
-              },
-            ]}
-          />
-        </div>
-      )}
-
-      {step == 2 && (
-        <div className={"px-8 py-3 flex flex-col gap-0 mt-4"}>
-          <p className={"font-medium flex gap-3 items-center text-base"}>
-            <Shield size={20} />
-            Add API permissions
-          </p>
-          <Steps>
-            <Steps.Step step={1}>
-              <p className={"font-normal"}>
-                Click <Mark>API permissions</Mark> on the left side menu
-              </p>
-            </Steps.Step>
-            <Steps.Step step={2}>
-              <p className={"font-normal"}>
-                Click <Mark>Add a permission</Mark> then{" "}
-                <Mark>Microsoft Graph</Mark> and then on the{" "}
-                <Mark>Application permissions</Mark> tab.
-              </p>
-            </Steps.Step>
-            <Steps.Step step={3}>
-              <p className={"font-normal"}>
-                In <Mark>Select permissions</Mark> select{" "}
-                <Mark>User.Read.All</Mark> and <Mark>Group.Read.All</Mark> and
-                click <Mark>Add permissions</Mark>
-              </p>
-            </Steps.Step>
-            <Steps.Step step={4} line={false}>
-              <p className={"font-normal"}>
-                Click <Mark>Grant admin conset for Default Directory</Mark> and
-                click <Mark>Yes</Mark>
-              </p>
-              <Lightbox image={azureGrantAdmin} />
-            </Steps.Step>
-          </Steps>
-        </div>
-      )}
-
-      {step == 3 && (
-        <div className={"px-8 py-3 flex flex-col gap-0 mt-4"}>
-          <p className={"font-medium flex gap-3 items-center text-base"}>
-            <KeyRound size={20} />
-            Generate client secret
-          </p>
-          <Steps>
-            <Steps.Step step={1}>
-              <p className={"font-normal"}>
-                Navigate to <Mark>Certificates & secrets</Mark> on left side
-                menu
-              </p>
-            </Steps.Step>
-            <Steps.Step step={2}>
-              <p className={"font-normal"}>
-                Click on <Mark>+ New client secret</Mark>
-              </p>
-            </Steps.Step>
-            <Steps.Step step={3}>
-              <p className={"font-normal"}>
-                Add <Mark copy>NetBird</Mark> as the description and click{" "}
-                <Mark>Add</Mark>
-              </p>
-            </Steps.Step>
-            <Steps.Step step={4} line={false}>
-              <p className={"font-normal"}>
-                Copy the <Mark>Value</Mark> and paste it here
-              </p>
-            </Steps.Step>
-          </Steps>
-          <div className={"mb-4"}>
-            <Input
-              type={"text"}
-              className={"w-full"}
-              customPrefix={
-                <div className={"flex items-center gap-2"}>
-                  <KeyRound size={16} className={"text-nb-gray-300"} />
-                </div>
-              }
-              placeholder={"YdV7Q~JJ62Xl.LvYoBanxZR2sJA2va_3UbqvncY8"}
-              value={clientSecret}
-              onChange={(e) => setClientSecret(e.target.value)}
-            />
-          </div>
-        </div>
-      )}
-
-      {step == 4 && (
-        <div className={"px-8 py-3 flex flex-col gap-0 mt-4"}>
-          <p className={"font-medium flex gap-3 items-center text-base"}>
-            <Box size={20} />
-            Enter Application ID and Directory ID
-          </p>
-          <Steps>
-            <Steps.Step step={1}>
-              <p className={"font-normal"}>
-                Navigate to{" "}
-                <InlineLink
-                  target={"_blank"}
-                  className={"inline"}
-                  href={
-                    "https://portal.azure.com/#view/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/~/RegisteredApps"
-                  }
-                >
-                  Owner applications
-                </InlineLink>
-              </p>
-            </Steps.Step>
-            <Steps.Step step={2} line={false}>
-              <p className={"font-normal"}>
-                Select <Mark>NetBird</Mark> application in overview page and
-                enter your <Mark>Application (client) ID</Mark> and{" "}
-                <Mark>Directory (tenant) ID</Mark>
-              </p>
-            </Steps.Step>
-          </Steps>
-          <div className={"mb-4 flex flex-col gap-3"}>
-            <Input
-              type={"text"}
-              className={"w-full"}
-              customPrefix={
-                <div className={"min-w-[165px] flex gap-2 items-center"}>
-                  <Box size={16} />
-                  Application (client) ID
-                </div>
-              }
-              placeholder={"62d3a656-c87d-4f30-a242-5b6347e29e9f"}
-              value={clientId}
-              onChange={(e) => setClientId(e.target.value)}
-            />
-            <Input
-              type={"text"}
-              className={"w-full"}
-              customPrefix={
-                <div className={"min-w-[165px] flex gap-2 items-center"}>
-                  <Folder size={16} />
-                  Directory (tenant) ID
-                </div>
-              }
-              placeholder={"5d60468a-65b7-45eb-a61a-53ecfbcd1ea3"}
-              value={tenantId}
-              onChange={(e) => setTenantId(e.target.value)}
-            />
-          </div>
-        </div>
-      )}
-
-      {step == 5 && (
-        <div className={"px-8 py-3 flex flex-col gap-0 mt-4"}>
-          <p className={"font-medium flex gap-3 items-center text-base"}>
-            <FolderGit2 size={20} />
-            Groups to be synchronized
-          </p>
-
-          <div className={"mb-4 flex flex-col gap-1"}>
-            <div>
-              <HelpText className={"max-w-lg mt-2 text-sm"}>
-                By default,{" "}
-                <span className={"text-netbird font-semibold"}>All Groups</span>{" "}
-                will be synchronized from your IdP to NetBird. <br />
-                If you want to synchronize only groups that start with a
-                specific prefix, you can add them below.
-              </HelpText>
-            </div>
-            <GroupPrefixInput
-              value={groupPrefixes}
-              onChange={setGroupPrefixes}
-            />
-          </div>
-        </div>
-      )}
-
-      {step == 6 && (
-        <div className={"px-8 py-3 flex flex-col gap-0 mt-4"}>
-          <p className={"font-medium flex gap-3 items-center text-base"}>
-            <UserCircle size={18} />
-            Users to be synchronized
-          </p>
-
-          <div className={"mb-4 flex flex-col gap-1"}>
-            <div>
-              <HelpText className={"max-w-lg mt-2 text-sm"}>
-                By default,{" "}
-                <span className={"text-netbird font-semibold"}>All Users</span>{" "}
-                will be synchronized from your IdP to NetBird. <br />
-                If you want to synchronize only users that belong to a specific
-                group, you can add them below.
-              </HelpText>
-            </div>
-
-            <GroupPrefixInput
-              addText={"Add user group filter"}
-              text={"User group starts with..."}
-              value={userGroupPrefixes}
-              onChange={setUserGroupPrefixes}
-            />
-          </div>
-        </div>
-      )}
-
-      <ModalFooter className={"items-center gap-4"}>
-        {step > 0 && (
-          <Button
-            variant={"secondary"}
-            className={"w-full"}
-            onClick={() => setStep(step - 1)}
-          >
-            <IconArrowLeft size={16} />
-            Back
-          </Button>
-        )}
-        {step >= 0 && step < maxSteps && (
-          <Button
-            variant={"primary"}
-            className={"w-full"}
-            disabled={isDisabled}
-            onClick={() => setStep(step + 1)}
-          >
-            {step == 0 ? "Get Started" : "Continue"}
-            <IconArrowRight size={16} />
-          </Button>
-        )}
-        {step == maxSteps && (
-          <Button
-            variant={"primary"}
-            className={"w-full"}
-            disabled={isDisabled}
-            onClick={connect}
-          >
-            <Repeat size={16} />
-            Connect
-          </Button>
-        )}
-      </ModalFooter>
-      {step == 0 && (
-        <div
-          className={
-            "text-center z-0 mt-2.5 text-xs text-nb-gray-300 flex items-center justify-center gap-2 font-normal"
-          }
-        >
-          <Clock4 size={12} />
-          <div>
-            Estimated setup time:
-            <span className={"font-medium"}> 10-20 Minutes</span>
-          </div>
-        </div>
-      )}
-    </ModalContent>
-  );
-}

src/modules/integrations/idp-sync/google-workspace/GoogleWorkspace.tsx

@@ -1,168 +0,0 @@
-import Button from "@components/Button";
-import FullTooltip from "@components/FullTooltip";
-import { notify } from "@components/Notification";
-import { SkeletonIntegration } from "@components/skeletons/SkeletonIntegration";
-import useFetchApi, { useApiCall } from "@utils/api";
-import dayjs from "dayjs";
-import { isEmpty } from "lodash";
-import { RefreshCw, Settings } from "lucide-react";
-import * as React from "react";
-import { useEffect, useMemo, useState } from "react";
-import { useSWRConfig } from "swr";
-import integrationImage from "@/assets/integrations/google-workspace.png";
-import {
-  AzureADIntegration,
-  GoogleWorkspaceIntegration,
-  IdentityProviderLog,
-} from "@/interfaces/IdentityProvider";
-import GoogleWorkspaceConfiguration from "@/modules/integrations/idp-sync/google-workspace/GoogleWorkspaceConfiguration";
-import GoogleWorkspaceSetup from "@/modules/integrations/idp-sync/google-workspace/GoogleWorkspaceSetup";
-import { useIntegrations } from "@/modules/integrations/idp-sync/useIntegrations";
-import { IntegrationCard } from "@/modules/integrations/IntegrationCard";
-
-export const GoogleWorkspace = () => {
-  const { mutate } = useSWRConfig();
-  const [setupModal, setSetupModal] = useState(false);
-
-  const {
-    google: integration,
-    isAnyIntegrationEnabled,
-    isGoogleLoading,
-  } = useIntegrations();
-  const googleRequest = useApiCall<AzureADIntegration>(
-    "/integrations/google-idp",
-  );
-
-  const [enabled, setEnabled] = useState(
-    integration ? integration.enabled : false,
-  );
-
-  useEffect(() => {
-    setEnabled(integration?.enabled ?? false);
-  }, [integration]);
-
-  const toggleSwitch = async (state: boolean) => {
-    if (!integration) return setSetupModal(true);
-
-    notify({
-      title: "Google Workspace Integration",
-      description: `Google Workspace was successfully ${
-        state ? "enabled" : "disabled"
-      }`,
-      promise: googleRequest
-        .put(
-          {
-            enabled: state,
-          },
-          "/" + integration.id,
-        )
-        .then(() => {
-          mutate("/integrations/google-idp");
-          setEnabled(state);
-        }),
-      loadingMessage: "Updating integration...",
-    });
-  };
-
-  return isGoogleLoading ? (
-    <SkeletonIntegration loadingHeight={197} />
-  ) : (
-    <>
-      <IntegrationCard
-        name="Google Workspace"
-        description="A flexible, innovative solution for people and organizations to achieve more."
-        url={{
-          title: "workspace.google.com",
-          href: "https://workspace.google.com/",
-        }}
-        image={integrationImage}
-        data={integration}
-        disabled={enabled ? false : isAnyIntegrationEnabled}
-        switchState={enabled}
-        onEnabledChange={toggleSwitch}
-        onSetup={() => setSetupModal(true)}
-      >
-        {integration && <ConfigurationButton config={integration} />}
-      </IntegrationCard>
-      <GoogleWorkspaceSetup
-        open={setupModal}
-        onOpenChange={setSetupModal}
-        onSuccess={() => setEnabled(true)}
-      />
-    </>
-  );
-};
-
-type ConfigurationProps = {
-  config: GoogleWorkspaceIntegration;
-};
-const ConfigurationButton = ({ config }: ConfigurationProps) => {
-  const { data: logs } = useFetchApi<IdentityProviderLog[]>(
-    `/integrations/google-idp/${config.id}/logs`,
-  );
-  const { mutate } = useSWRConfig();
-  const syncRequest = useApiCall<{ response: boolean }>(
-    `/integrations/google-idp/${config.id}/sync`,
-  );
-
-  const [configModal, setConfigModal] = useState(false);
-
-  const forceSync = async () => {
-    notify({
-      title: "Google Workspace Integration",
-      description: `Google Workspace was successfully synced`,
-      loadingMessage: "Syncing integration...",
-      promise: syncRequest.post({}).then(() => {
-        mutate(`/integrations/google-idp/${config.id}/logs`);
-      }),
-    });
-  };
-
-  const lastSync = useMemo(() => {
-    if (isEmpty(logs)) return "Not synchronized";
-    return "Synced " + dayjs().to(logs?.[0]?.timestamp);
-  }, [logs]);
-
-  return (
-    <>
-      <div className={"flex gap-2"}>
-        <FullTooltip
-          content={
-            <div className={"text-xs"}>
-              Force synchronization of users and groups
-            </div>
-          }
-          disabled={!config.enabled}
-          className={"w-full"}
-          interactive={false}
-        >
-          <Button
-            variant={"secondary"}
-            size={"xs"}
-            className={"w-full items-center"}
-            onClick={forceSync}
-            disabled={!config.enabled}
-          >
-            <RefreshCw size={14} />
-            {lastSync}
-          </Button>
-        </FullTooltip>
-
-        <Button
-          variant={"secondary"}
-          size={"xs"}
-          className={"items-center"}
-          onClick={() => {
-            setConfigModal(true);
-          }}
-        >
-          <Settings size={14} />
-        </Button>
-      </div>
-      <GoogleWorkspaceConfiguration
-        open={configModal}
-        onOpenChange={setConfigModal}
-      />
-    </>
-  );
-};

src/modules/integrations/idp-sync/google-workspace/GoogleWorkspaceConfiguration.tsx

@@ -1,361 +0,0 @@
-import Button from "@components/Button";
-import HelpText from "@components/HelpText";
-import { Input } from "@components/Input";
-import { JSONFileUpload } from "@components/JSONFileUpload";
-import { Label } from "@components/Label";
-import {
-  Modal,
-  ModalClose,
-  ModalContent,
-  ModalFooter,
-} from "@components/modal/Modal";
-import { notify } from "@components/Notification";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@components/Tabs";
-import { GradientFadedBackground } from "@components/ui/GradientFadedBackground";
-import { useHasChanges } from "@hooks/useHasChanges";
-import { useApiCall } from "@utils/api";
-import { cn } from "@utils/helpers";
-import {
-  AlertOctagon,
-  Box,
-  Cog,
-  FolderGit2,
-  KeyRound,
-  RefreshCw,
-  UserCircle,
-} from "lucide-react";
-import React, { useState } from "react";
-import { useSWRConfig } from "swr";
-import integrationImage from "@/assets/integrations/google-workspace.png";
-import { useDialog } from "@/contexts/DialogProvider";
-import { GoogleWorkspaceIntegration } from "@/interfaces/IdentityProvider";
-import { GroupPrefixInput } from "@/modules/integrations/idp-sync/GroupPrefixInput";
-import { useIntegrations } from "@/modules/integrations/idp-sync/useIntegrations";
-import { IntegrationModalHeader } from "@/modules/integrations/IntegrationModalHeader";
-
-type Props = {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onSuccess?: () => void;
-};
-
-export default function GoogleWorkspaceConfiguration({
-  open,
-  onOpenChange,
-  onSuccess,
-}: Props) {
-  const { google } = useIntegrations();
-
-  return (
-    <>
-      <Modal open={open} onOpenChange={onOpenChange} key={open ? 1 : 0}>
-        {google && (
-          <ConfigurationContent
-            onSuccess={() => {
-              onOpenChange(false);
-              onSuccess && onSuccess();
-            }}
-            config={google}
-          />
-        )}
-      </Modal>
-    </>
-  );
-}
-
-type ModalProps = {
-  onSuccess: () => void;
-  config: GoogleWorkspaceIntegration;
-};
-
-export function ConfigurationContent({ onSuccess, config }: ModalProps) {
-  const { mutate } = useSWRConfig();
-  const { confirm } = useDialog();
-
-  const [tab, setTab] = useState<string>("settings");
-
-  const googleRequest = useApiCall<GoogleWorkspaceIntegration>(
-    "/integrations/google-idp",
-  );
-
-  const accountKeyPlaceholder = "******************************";
-  const [serviceAccountKey, setServiceAccountKey] = useState(
-    accountKeyPlaceholder,
-  );
-
-  const [customerID, setCustomerID] = useState(config.customerId);
-  const [interval, setInterval] = useState(config.syncInterval.toString());
-
-  const [groupPrefixes, setGroupPrefixes] = useState<string[]>(
-    config.group_prefixes || [],
-  );
-  const [userGroupPrefixes, setUserGroupPrefixes] = useState<string[]>(
-    config.user_group_prefixes || [],
-  );
-
-  const deleteIntegration = async () => {
-    const choice = await confirm({
-      title: `Delete integration?`,
-      description: "Are you sure you want to delete this integration?",
-      confirmText: "Delete",
-      cancelText: "Cancel",
-      type: "danger",
-    });
-
-    if (!choice) return;
-
-    notify({
-      title: "Google Workspace Integration",
-      description: `Google Workspace was successfully deleted`,
-      promise: googleRequest.del({}, `/${config.id}`).then(() => {
-        mutate("/integrations/google-idp");
-        onSuccess();
-      }),
-      loadingMessage: "Deleting integration...",
-    });
-  };
-
-  const updateIntegration = async () => {
-    notify({
-      title: "Google Workspace Integration",
-      description: `Google Workspace was successfully updated`,
-      promise: googleRequest
-        .put(
-          {
-            customerId: customerID,
-            service_account_key:
-              accountKeyPlaceholder == serviceAccountKey
-                ? undefined
-                : serviceAccountKey,
-            sync_interval: interval ? parseInt(interval) : 300,
-            group_prefixes: groupPrefixes || [],
-            user_group_prefixes: userGroupPrefixes || [],
-          },
-          `/${config.id}`,
-        )
-        .then(() => {
-          mutate("/integrations/google-idp");
-          onSuccess();
-        }),
-      loadingMessage: "Updating integration...",
-    });
-  };
-
-  const { hasChanges } = useHasChanges([
-    customerID,
-    serviceAccountKey,
-    interval,
-    groupPrefixes,
-    userGroupPrefixes,
-  ]);
-
-  return (
-    <ModalContent
-      maxWidthClass={cn("relative max-w-xl")}
-      showClose={true}
-      className={""}
-      autoFocus={false}
-    >
-      <GradientFadedBackground />
-
-      <IntegrationModalHeader
-        image={integrationImage}
-        title={"Google Workspace Configuration"}
-        description={"Sync your users and groups from Google Workspace."}
-      />
-
-      <Tabs
-        defaultValue={tab}
-        onValueChange={(v) => setTab(v)}
-        className={"mt-6"}
-      >
-        <TabsList justify={"start"} className={"px-8"}>
-          <TabsTrigger value={"settings"}>
-            <Cog
-              size={16}
-              className={
-                "text-nb-gray-500 group-data-[state=active]/trigger:text-netbird transition-all"
-              }
-            />
-            Settings
-          </TabsTrigger>
-          <TabsTrigger value={"group-sync"}>
-            <FolderGit2
-              size={16}
-              className={
-                "text-nb-gray-500 group-data-[state=active]/trigger:text-netbird transition-all"
-              }
-            />
-            Group Sync
-          </TabsTrigger>
-          <TabsTrigger value={"user-sync"}>
-            <UserCircle
-              size={16}
-              className={
-                "text-nb-gray-500 group-data-[state=active]/trigger:text-netbird transition-all"
-              }
-            />
-            User Sync
-          </TabsTrigger>
-          <TabsTrigger value={"danger"}>
-            <AlertOctagon
-              size={16}
-              className={
-                "text-nb-gray-500 group-data-[state=active]/trigger:text-netbird transition-all"
-              }
-            />
-            Danger Zone
-          </TabsTrigger>
-        </TabsList>
-        <TabsContent value={"settings"} className={"px-8 text-sm"}>
-          <div className={"flex-col gap-3 flex"}>
-            <Input
-              type={"text"}
-              autoCorrect={"off"}
-              autoComplete={"off"}
-              className={"w-full"}
-              customPrefix={
-                <div className={"min-w-[165px] flex gap-2 items-center"}>
-                  <Box size={16} />
-                  Customer ID
-                </div>
-              }
-              placeholder={"62d3a656-c87d-4f30-a242-5b6347e29e9f"}
-              value={customerID}
-              onChange={(e) => setCustomerID(e.target.value)}
-            />
-
-            <Input
-              autoCorrect={"off"}
-              type={"text"}
-              className={"w-full"}
-              customPrefix={
-                <div className={"min-w-[165px] flex gap-2 items-center"}>
-                  <KeyRound size={16} />
-                  Service Account Key
-                </div>
-              }
-              placeholder={"YdV7Q~JJ62Xl.LvYoBanxZR2sJA2va_3UbqvncY8"}
-              value={serviceAccountKey}
-              readOnly={true}
-            />
-
-            <JSONFileUpload
-              value={serviceAccountKey}
-              onChange={(val) => setServiceAccountKey(btoa(val))}
-            />
-
-            <div className={"flex justify-between mt-4"}>
-              <div>
-                <Label>Sync Interval</Label>
-                <HelpText className={"max-w-[300px]"}>
-                  The interval in seconds when the synchronization should
-                  happen.
-                </HelpText>
-              </div>
-              <Input
-                maxWidthClass={"max-w-[400px]"}
-                placeholder={"300"}
-                min={1}
-                max={99999}
-                value={interval}
-                type={"number"}
-                onChange={(e) => setInterval(e.target.value)}
-                customPrefix={
-                  <RefreshCw size={16} className={"text-nb-gray-300"} />
-                }
-                customSuffix={"Seconds"}
-              />
-            </div>
-          </div>
-        </TabsContent>
-
-        <TabsContent value={"group-sync"} className={"px-8"}>
-          <div>
-            <Label>
-              <div className={"flex gap-2 items-center"}>
-                <FolderGit2 size={16} />
-                Synchronize Groups
-              </div>
-            </Label>
-            <HelpText className={"max-w-lg mt-2"}>
-              By default,{" "}
-              <span className={"text-netbird font-semibold"}>All Groups</span>{" "}
-              will be synchronized from your IdP to NetBird. <br />
-              If you want to synchronize only groups that start with a specific
-              prefix, you can add them below.
-            </HelpText>
-          </div>
-          <GroupPrefixInput value={groupPrefixes} onChange={setGroupPrefixes} />
-        </TabsContent>
-
-        <TabsContent value={"user-sync"} className={"px-8"}>
-          <div>
-            <Label>
-              <div className={"flex gap-2 items-center"}>
-                <UserCircle size={16} />
-                Synchronize Users
-              </div>
-            </Label>
-            <HelpText className={"max-w-lg mt-2"}>
-              By default,{" "}
-              <span className={"text-netbird font-semibold"}>All Users</span>{" "}
-              will be synchronized from your IdP to NetBird. <br />
-              If you want to synchronize only users that belong to a specific
-              group, you can add them below.
-            </HelpText>
-          </div>
-          <GroupPrefixInput
-            addText={"Add user group filter"}
-            text={"User group starts with..."}
-            value={userGroupPrefixes}
-            onChange={setUserGroupPrefixes}
-          />
-        </TabsContent>
-
-        <TabsContent value={"danger"} className={"px-8"}>
-          <div>
-            <Label>
-              <div className={"flex gap-2 items-center"}>
-                <AlertOctagon size={16} />
-                Delete Integration
-              </div>
-            </Label>
-            <HelpText className={"max-w-lg mt-2"}>
-              Deleting this integration will remove the ability to sync users
-              and groups from your IdP to NetBird. If you delete the integration
-              you will need to reconfigure it again to enable the
-              synchronization.
-            </HelpText>
-          </div>
-          <Button
-            variant={"danger"}
-            size={"xs"}
-            className={"mt-3"}
-            onClick={deleteIntegration}
-          >
-            Delete Integration
-          </Button>
-        </TabsContent>
-      </Tabs>
-      <div className={"h-6"}></div>
-
-      <ModalFooter className={"items-center gap-4"}>
-        <ModalClose asChild={true}>
-          <Button variant={"secondary"} className={"w-full"}>
-            Cancel
-          </Button>
-        </ModalClose>
-
-        <Button
-          variant={"primary"}
-          className={"w-full"}
-          disabled={!hasChanges}
-          onClick={updateIntegration}
-        >
-          Save
-        </Button>
-      </ModalFooter>
-    </ModalContent>
-  );
-}

src/modules/integrations/idp-sync/google-workspace/GoogleWorkspaceSetup.tsx

@@ -1,632 +0,0 @@
-import Button from "@components/Button";
-import HelpText from "@components/HelpText";
-import InlineLink from "@components/InlineLink";
-import { Input } from "@components/Input";
-import { JSONFileUpload } from "@components/JSONFileUpload";
-import { Modal, ModalContent, ModalFooter } from "@components/modal/Modal";
-import { notify } from "@components/Notification";
-import Steps from "@components/Steps";
-import { GradientFadedBackground } from "@components/ui/GradientFadedBackground";
-import { Lightbox } from "@components/ui/Lightbox";
-import { Mark } from "@components/ui/Mark";
-import { MinimalList } from "@components/ui/MinimalList";
-import { IconArrowLeft, IconArrowRight } from "@tabler/icons-react";
-import { useApiCall } from "@utils/api";
-import { cn } from "@utils/helpers";
-import { isEmpty } from "lodash";
-import {
-  Box,
-  Clock4,
-  FolderCog2,
-  FolderGit2,
-  KeyRound,
-  Mail,
-  MailPlus,
-  PlusCircle,
-  Repeat,
-  Settings2,
-  Shield,
-  UserCircle,
-} from "lucide-react";
-import React, { useState } from "react";
-import { useSWRConfig } from "swr";
-import integrationImage from "@/assets/integrations/google-workspace.png";
-import { GoogleWorkspaceIntegration } from "@/interfaces/IdentityProvider";
-import googleAssignServiceAccount from "@/modules/integrations/idp-sync/google-workspace/images/google-assign-service-account.png";
-import googleEditServiceAccount from "@/modules/integrations/idp-sync/google-workspace/images/google-edit-service-account.png";
-import googlePrivilegesReview from "@/modules/integrations/idp-sync/google-workspace/images/google-privileges-review.png";
-import { IntegrationModalHeader } from "@/modules/integrations/IntegrationModalHeader";
-import { GroupPrefixInput } from "../GroupPrefixInput";
-
-type Props = {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onSuccess?: () => void;
-};
-
-export default function GoogleWorkspaceSetup({
-  open,
-  onOpenChange,
-  onSuccess,
-}: Props) {
-  return (
-    <>
-      <Modal open={open} onOpenChange={onOpenChange} key={open ? 1 : 0}>
-        <SetupContent
-          onSuccess={() => {
-            onOpenChange(false);
-            onSuccess && onSuccess();
-          }}
-        />
-      </Modal>
-    </>
-  );
-}
-
-type ModalProps = {
-  onSuccess: () => void;
-};
-
-export function SetupContent({ onSuccess }: ModalProps) {
-  const { mutate } = useSWRConfig();
-  const googleRequest = useApiCall<GoogleWorkspaceIntegration>(
-    "/integrations/google-idp",
-  );
-
-  const [step, setStep] = useState(0);
-  const maxSteps = 9;
-
-  const [serviceAccountKey, setServiceAccountKey] = useState("");
-  const [customerID, setCustomerID] = useState("");
-  const [serviceAccountMail, setServiceAccountMail] = useState("");
-
-  const clientSecretEntered = !isEmpty(serviceAccountKey);
-  const customerIDEntered = !isEmpty(customerID);
-  const serviceAccountMailEntered = !isEmpty(serviceAccountMail);
-
-  const allEntered =
-    clientSecretEntered && customerIDEntered && serviceAccountMailEntered;
-
-  const isDisabled =
-    (step == 2 && !serviceAccountMailEntered) ||
-    (step == 3 && !clientSecretEntered) ||
-    (step == 7 && !customerIDEntered);
-
-  const [groupPrefixes, setGroupPrefixes] = useState<string[]>([]);
-  const [userGroupPrefixes, setUserGroupPrefixes] = useState<string[]>([]);
-
-  const connect = async () => {
-    notify({
-      title: "Google Workspace Integration",
-      description: `Google Workspace was successfully connected to NetBird.`,
-      promise: googleRequest
-        .post({
-          service_account_key: btoa(serviceAccountKey), // Encode client secret to base64
-          customer_id: customerID,
-          group_prefixes: groupPrefixes || [],
-          user_group_prefixes: userGroupPrefixes || [],
-        })
-        .then(() => {
-          mutate("/integrations/google-idp");
-          onSuccess();
-        }),
-      loadingMessage: "Setting up integration...",
-    });
-  };
-
-  return (
-    <ModalContent
-      maxWidthClass={cn("relative", step == 0 ? "max-w-md" : "max-w-xl")}
-      showClose={true}
-      className={""}
-      onEscapeKeyDown={(e) => step > 0 && e.preventDefault()}
-      onInteractOutside={(e) => step > 0 && e.preventDefault()}
-      onPointerDownOutside={(e) => step > 0 && e.preventDefault()}
-    >
-      <GradientFadedBackground />
-
-      {step > 0 && (
-        <div className={"flex gap-2 w-full items-center justify-center mb-4"}>
-          {Array.from({ length: maxSteps }).map((_, index) => (
-            <div
-              key={index}
-              className={cn(
-                "w-8 h-1 rounded-full bg-nb-gray-800",
-                step >= index + 1 && "bg-netbird",
-              )}
-            />
-          ))}
-        </div>
-      )}
-
-      <IntegrationModalHeader
-        image={integrationImage}
-        title={"Connect NetBird with Google Workspace"}
-        description={
-          "Start syncing your users and groups from Google Workspace to NetBird. Follow the steps below to get started."
-        }
-      />
-
-      {step == 0 && (
-        <div
-          className={
-            "px-8 py-3 flex z-0 flex-col gap-0 text-sm mb-3 text-center justify-center items-center"
-          }
-        >
-          <div
-            className={
-              "mt-6 text-base font-medium text-nb-gray-100 flex gap-2 items-center justify-center"
-            }
-          >
-            <Shield size={16} />
-            Required Permissions
-          </div>
-          <p className={"mt-2 !text-nb-gray-300 !leading-[1.5]"}>
-            Ensure that you have an an{" "}
-            <span className={"text-nb-gray-100 font-semibold"}>
-              Google Workspace user account
-            </span>{" "}
-            with the following{" "}
-            <span className={"text-nb-gray-100 font-semibold"}>
-              permissions
-            </span>
-            .{" "}
-            {
-              "If you don't have the required permissions, ask your workspace administrator to grant them to you."
-            }
-          </p>
-          <div
-            className={
-              "flex items-center flex-col gap-0 mt-2 w-full justify-center max-w-lg"
-            }
-          >
-            <div
-              className={
-                "py-2 px-6 flex items-center gap-2 rounded-md w-full justify-center bg-nb-gray-930/0 text-nb-gray-200"
-              }
-            >
-              <PlusCircle size={14} className={"text-sky-500"} />
-              Create Google Workspace applications
-            </div>
-            <div
-              className={
-                "py-2 px-6 flex items-center gap-2 rounded-md w-full justify-center bg-nb-gray-930/0 text-nb-gray-200"
-              }
-            >
-              <Settings2 size={14} className={"text-sky-500"} />
-              Manage Google Workspace applications
-            </div>
-          </div>
-        </div>
-      )}
-
-      {step == 1 && (
-        <div className={"px-8 py-3 flex flex-col gap-0 mt-4"}>
-          <p className={"font-medium flex gap-3 items-center text-base"}>
-            <UserCircle size={20} />
-            Create a service account
-          </p>
-          <Steps>
-            <Steps.Step step={1}>
-              <p>
-                Navigate to{"  "}
-                <InlineLink
-                  className={"inline"}
-                  target={"_blank"}
-                  href={"https://console.cloud.google.com/apis/credentials"}
-                >
-                  API Credentials
-                </InlineLink>
-              </p>
-            </Steps.Step>
-            <Steps.Step step={2}>
-              <p className={"font-normal"}>
-                Click <Mark>CREATE CREDENTIALS</Mark> at the top and select{" "}
-                <Mark>Service account</Mark>
-              </p>
-            </Steps.Step>
-            <Steps.Step step={3} line={false}>
-              <p className={"font-normal"}>
-                Fill in the form with the following values and click{" "}
-                <Mark>DONE</Mark>
-              </p>
-            </Steps.Step>
-          </Steps>
-
-          <MinimalList
-            data={[
-              {
-                label: "Service account name",
-                value: "NetBird",
-              },
-              {
-                label: "Service account ID",
-                value: "netbird",
-              },
-            ]}
-          />
-        </div>
-      )}
-
-      {step == 2 && (
-        <div className={"px-8 py-3 flex flex-col gap-0 mt-4"}>
-          <p className={"font-medium flex gap-3 items-center text-base"}>
-            <Mail size={20} />
-            Get your service account email
-          </p>
-          <Steps>
-            <Steps.Step step={1}>
-              <p>
-                Navigate to{"  "}
-                <InlineLink
-                  className={"inline"}
-                  target={"_blank"}
-                  href={
-                    "https://console.cloud.google.com/iam-admin/serviceaccounts"
-                  }
-                >
-                  Service Accounts
-                </InlineLink>
-              </p>
-            </Steps.Step>
-            <Steps.Step step={1}>
-              <p className={"font-normal"}>
-                Click <Mark>NetBird</Mark> to edit the service account. Copy the
-                service account email address.
-              </p>
-              <Lightbox image={googleEditServiceAccount} />
-            </Steps.Step>
-            <Steps.Step step={2} line={false}>
-              <p className={"font-normal"}>
-                Enter your service account email address
-              </p>
-            </Steps.Step>
-          </Steps>
-          <div className={"mb-4"}>
-            <Input
-              type={"text"}
-              className={"w-full"}
-              customPrefix={
-                <div className={"flex items-center gap-2"}>
-                  <Mail size={16} className={"text-nb-gray-300"} />
-                </div>
-              }
-              placeholder={"netbird@loadtests-347817.iam.gserviceaccount.com"}
-              value={serviceAccountMail}
-              onChange={(e) => setServiceAccountMail(e.target.value)}
-            />
-          </div>
-        </div>
-      )}
-
-      {step == 3 && (
-        <div className={"px-8 py-3 flex flex-col gap-0 mt-4"}>
-          <p className={"font-medium flex gap-3 items-center text-base"}>
-            <KeyRound size={20} />
-            Create service account key
-          </p>
-          <Steps>
-            <Steps.Step step={1}>
-              <p className={"font-normal"}>
-                On the same page, now click the <Mark>Keys</Mark> tab, open the{" "}
-                <Mark>Add key</Mark> dropdown and select{" "}
-                <Mark>Create new key</Mark>
-              </p>
-            </Steps.Step>
-            <Steps.Step step={3}>
-              <p className={"font-normal"}>
-                Select <Mark>JSON</Mark> as the key type and click{" "}
-                <Mark>Create</Mark>
-              </p>
-            </Steps.Step>
-            <Steps.Step step={4} line={false}>
-              <p className={"font-normal"}>
-                Most browsers immediately download the new key and save it in a
-                download folder on your computer. Read how to manage and secure
-                your service keys{" "}
-                <InlineLink
-                  href={
-                    "https://cloud.google.com/iam/docs/best-practices-for-managing-service-account-keys#temp-locations"
-                  }
-                  target={"_blank"}
-                >
-                  here
-                </InlineLink>
-                .
-              </p>
-            </Steps.Step>
-          </Steps>
-          <div className={"mb-4 z-0 relative"}>
-            <JSONFileUpload
-              value={serviceAccountKey}
-              onChange={setServiceAccountKey}
-            />
-            {serviceAccountKey && (
-              <div className={"mt-3"}>
-                <Input
-                  type={"text"}
-                  className={"w-full"}
-                  customPrefix={
-                    <div className={"flex items-center gap-2"}>
-                      <KeyRound size={16} className={"text-nb-gray-300"} />
-                    </div>
-                  }
-                  placeholder={"YdV7Q~JJ62Xl.LvYoBanxZR2sJA2va_3UbqvncY8"}
-                  value={btoa(serviceAccountKey)}
-                  readOnly={true}
-                />
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-
-      {step == 4 && (
-        <div className={"px-8 py-3 flex flex-col gap-0 mt-4"}>
-          <p className={"font-medium flex gap-3 items-center text-base"}>
-            <FolderCog2 size={20} />
-            Create admin role
-          </p>
-          <Steps>
-            <Steps.Step step={1}>
-              <p>
-                Navigate to{"  "}
-                <InlineLink
-                  className={"inline"}
-                  target={"_blank"}
-                  href={"https://admin.google.com/ac/home"}
-                >
-                  Admin Console
-                </InlineLink>
-              </p>
-            </Steps.Step>
-            <Steps.Step step={2}>
-              <p className={"font-normal"}>
-                Select <Mark>Account</Mark> on the left menu and then click{" "}
-                <Mark>Admin Roles</Mark>
-              </p>
-            </Steps.Step>
-            <Steps.Step step={3} line={false}>
-              <p className={"font-normal"}>
-                Click <Mark>Create new role</Mark> and fill in the form with the
-                following values
-              </p>
-            </Steps.Step>
-          </Steps>
-          <MinimalList
-            data={[
-              {
-                label: "Name",
-                value: "User and Group Management ReadOnly",
-              },
-              {
-                label: "Description",
-                value: "User and Group Management ReadOnly",
-              },
-            ]}
-          />
-        </div>
-      )}
-
-      {step == 5 && (
-        <div className={"px-8 py-3 flex flex-col gap-0 mt-4"}>
-          <p className={"font-medium flex gap-3 items-center text-base"}>
-            <Shield size={20} />
-            Add role privileges
-          </p>
-          <Steps>
-            <Steps.Step step={1}>
-              <p className={"font-normal"}>
-                Scroll down to <Mark>Admin API privileges</Mark> and add the
-                following privileges to the role
-              </p>
-              <MinimalList
-                className={"mt-2 mb-0"}
-                data={[
-                  {
-                    label: "Users",
-                    value: "Read",
-                  },
-                  {
-                    label: "Groups",
-                    value: "Read",
-                  },
-                ]}
-              />
-            </Steps.Step>
-            <Steps.Step step={2} line={false}>
-              <p className={"font-normal"}>
-                Verify preview of assigned Admin API privileges to ensure that
-                everything is properly configured, and then click{" "}
-                <Mark>CREATE ROLE</Mark>
-              </p>
-              <Lightbox image={googlePrivilegesReview} />
-            </Steps.Step>
-          </Steps>
-        </div>
-      )}
-
-      {step == 6 && (
-        <div className={"px-8 py-3 flex flex-col gap-0 mt-4"}>
-          <p className={"font-medium flex gap-3 items-center text-base"}>
-            <MailPlus size={20} />
-            Assign service account
-          </p>
-          <Steps>
-            <Steps.Step step={1}>
-              <p className={"font-normal"}>
-                Click <Mark>Assign service accounts</Mark>
-              </p>
-            </Steps.Step>
-            <Steps.Step step={2}>
-              <p className={"font-normal"}>
-                Enter your <Mark>E-Mail</Mark> and then click <Mark>ADD</Mark>
-              </p>
-              <MinimalList
-                className={"mt-2 mb-0"}
-                data={[
-                  {
-                    label: "E-Mail",
-                    value: serviceAccountMail,
-                  },
-                ]}
-              />
-            </Steps.Step>
-            <Steps.Step step={3} line={false}>
-              <p className={"font-normal"}>
-                Click <Mark>ASSIGN ROLE</Mark>
-              </p>
-              <Lightbox image={googleAssignServiceAccount} />
-            </Steps.Step>
-          </Steps>
-        </div>
-      )}
-
-      {step == 7 && (
-        <div className={"px-8 py-3 flex flex-col gap-0 mt-4"}>
-          <p className={"font-medium flex gap-3 items-center text-base"}>
-            <Box size={20} />
-            Enter Customer ID
-          </p>
-          <Steps>
-            <Steps.Step step={1}>
-              <p className={"font-normal"}>
-                Navigate to{" "}
-                <InlineLink
-                  target={"_blank"}
-                  className={"inline"}
-                  href={
-                    "https://admin.google.com/ac/accountsettings/profile?hl=en_US"
-                  }
-                >
-                  Account Settings
-                </InlineLink>
-              </p>
-            </Steps.Step>
-            <Steps.Step step={2} line={false}>
-              <p className={"font-normal"}>
-                Take note of the <Mark>Customer ID</Mark> and enter it below
-              </p>
-            </Steps.Step>
-          </Steps>
-          <div className={"mb-4 flex flex-col gap-3"}>
-            <Input
-              type={"text"}
-              className={"w-full"}
-              customPrefix={
-                <div className={"min-w-[165px] flex gap-2 items-center"}>
-                  <Box size={16} />
-                  Customer ID
-                </div>
-              }
-              placeholder={"C03f4c3po"}
-              value={customerID}
-              onChange={(e) => setCustomerID(e.target.value)}
-            />
-          </div>
-        </div>
-      )}
-
-      {step == 8 && (
-        <div className={"px-8 py-3 flex flex-col gap-0 mt-4"}>
-          <p className={"font-medium flex gap-3 items-center text-base"}>
-            <FolderGit2 size={20} />
-            Groups to be synchronized
-          </p>
-
-          <div className={"mb-4 flex flex-col gap-1"}>
-            <div>
-              <HelpText className={"max-w-lg mt-2 text-sm"}>
-                By default,{" "}
-                <span className={"text-netbird font-semibold"}>All Groups</span>{" "}
-                will be synchronized from your IdP to NetBird. <br />
-                If you want to synchronize only groups that start with a
-                specific prefix, you can add them below.
-              </HelpText>
-            </div>
-            <GroupPrefixInput
-              value={groupPrefixes}
-              onChange={setGroupPrefixes}
-            />
-          </div>
-        </div>
-      )}
-
-      {step == 9 && (
-        <div className={"px-8 py-3 flex flex-col gap-0 mt-4"}>
-          <p className={"font-medium flex gap-3 items-center text-base"}>
-            <UserCircle size={18} />
-            Users to be synchronized
-          </p>
-
-          <div className={"mb-4 flex flex-col gap-1"}>
-            <div>
-              <HelpText className={"max-w-lg mt-2 text-sm"}>
-                By default,{" "}
-                <span className={"text-netbird font-semibold"}>All Users</span>{" "}
-                will be synchronized from your IdP to NetBird. <br />
-                If you want to synchronize only users that belong to a specific
-                group, you can add them below.
-              </HelpText>
-            </div>
-
-            <GroupPrefixInput
-              addText={"Add user group filter"}
-              text={"User group starts with..."}
-              value={userGroupPrefixes}
-              onChange={setUserGroupPrefixes}
-            />
-          </div>
-        </div>
-      )}
-
-      <ModalFooter className={"items-center gap-4"}>
-        {step > 0 && (
-          <Button
-            variant={"secondary"}
-            className={"w-full"}
-            onClick={() => setStep(step - 1)}
-          >
-            <IconArrowLeft size={16} />
-            Back
-          </Button>
-        )}
-        {step >= 0 && step < maxSteps && (
-          <Button
-            variant={"primary"}
-            className={"w-full"}
-            disabled={isDisabled}
-            onClick={() => setStep(step + 1)}
-          >
-            {step == 0 ? "Get Started" : "Continue"}
-            <IconArrowRight size={16} />
-          </Button>
-        )}
-        {step == maxSteps && (
-          <Button
-            variant={"primary"}
-            className={"w-full"}
-            disabled={!allEntered}
-            onClick={connect}
-          >
-            <Repeat size={16} />
-            Connect
-          </Button>
-        )}
-      </ModalFooter>
-      {step == 0 && (
-        <div
-          className={
-            "text-center z-0 mt-2.5 text-xs text-nb-gray-300 flex items-center justify-center gap-2 font-normal"
-          }
-        >
-          <Clock4 size={12} />
-          <div>
-            Estimated setup time:
-            <span className={"font-medium"}> 10-20 Minutes</span>
-          </div>
-        </div>
-      )}
-    </ModalContent>
-  );
-}

src/modules/integrations/idp-sync/useIntegrations.tsx

@@ -1,27 +0,0 @@
-import useFetchApi from "@utils/api";
-import {
-  AzureADIntegration,
-  GoogleWorkspaceIntegration,
-} from "@/interfaces/IdentityProvider";
-
-export const useIntegrations = () => {
-  const { data: azureIntegrations, isLoading: isAzureLoading } = useFetchApi<
-    AzureADIntegration[]
-  >("/integrations/azure-idp");
-  const { data: googleIntegrations, isLoading: isGoogleLoading } = useFetchApi<
-    GoogleWorkspaceIntegration[]
-  >("/integrations/google-idp");
-
-  const azure = azureIntegrations?.[0];
-  const google = googleIntegrations?.[0];
-
-  const isAnyIntegrationEnabled = azure?.enabled || google?.enabled;
-
-  return {
-    azure,
-    google,
-    isAnyIntegrationEnabled,
-    isAzureLoading,
-    isGoogleLoading,
-  };
-};

src/modules/peer/usePeerRoutes.tsx

@@ -9,7 +9,7 @@ type Props = {
 };
 export default function usePeerRoutes({ peer }: Props) {
   const { data: routes } = useFetchApi<Route[]>("/routes");
-  const peerGroups = usePeerGroups(peer);
+  const { peerGroups } = usePeerGroups(peer);
 
   return useMemo(() => {
     if (!routes) return undefined;

src/modules/peers/PeerAddressCell.tsx

@@ -1,43 +1,61 @@
 import CopyToClipboardText from "@components/CopyToClipboardText";
-import TextWithTooltip from "@components/ui/TextWithTooltip";
+import FullTooltip from "@components/FullTooltip";
 import { cn } from "@utils/helpers";
+import { isEmpty } from "lodash";
 import { GlobeIcon } from "lucide-react";
+import React from "react";
+import RoundedFlag from "@/assets/countries/RoundedFlag";
 import { Peer } from "@/interfaces/Peer";
+import { PeerAddressTooltipContent } from "@/modules/peers/PeerAddressTooltipContent";
 
 type Props = {
   peer: Peer;
 };
 export default function PeerAddressCell({ peer }: Props) {
   return (
-    <div className={"flex gap-4 items-center min-w-[320px] max-w-[320px]"}>
+    <FullTooltip
+      side={"top"}
+      interactive={false}
+      contentClassName={"p-0"}
+      content={<PeerAddressTooltipContent peer={peer} />}
+    >
       <div
-        className={cn(
-          "flex items-center justify-center rounded-md h-8 w-8 shrink-0",
-          peer.connected ? "bg-green-600" : "bg-nb-gray-800 opacity-50",
-        )}
+        className={
+          "flex gap-4 items-center min-w-[320px] max-w-[320px] group/cell transition-all hover:bg-nb-gray-800/10 py-2 px-3 rounded-md cursor-default"
+        }
+        onClick={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+        }}
       >
-        <GlobeIcon size={14} className={"shrink-0"} />
-      </div>
-      <div className="flex flex-col gap-0 dark:text-neutral-300 text-neutral-500 font-light">
-        <CopyToClipboardText
-          message={"DNS label has been copied to your clipboard"}
+        <div
+          className={cn(
+            "flex items-center justify-center rounded-full h-8 w-8 shrink-0 bg-nb-gray-920/80 transition-all",
+          )}
         >
-          <span className={"font-normal"}>
-            <TextWithTooltip
-              text={peer.dns_label}
-              maxChars={40}
-              className={"whitespace-nowrap"}
-            />
-          </span>
-        </CopyToClipboardText>
-        <CopyToClipboardText
-          message={"IP address has been copied to your clipboard"}
-        >
-          <span className={"dark:text-nb-gray-400 font-mono font-thin text-xs"}>
-            {peer.ip}
-          </span>
-        </CopyToClipboardText>
+          {isEmpty(peer.country_code) ? (
+            <GlobeIcon size={16} className={"text-nb-gray-300"} />
+          ) : (
+            <RoundedFlag country={peer.country_code} size={20} />
+          )}
+        </div>
+        <div className="flex flex-col gap-0 dark:text-neutral-300 text-neutral-500 font-light truncate">
+          <CopyToClipboardText
+            message={"DNS label has been copied to your clipboard"}
+          >
+            <span className={"font-normal truncate"}>{peer.dns_label}</span>
+          </CopyToClipboardText>
+          <CopyToClipboardText
+            message={"IP address has been copied to your clipboard"}
+          >
+            <span
+              className={"dark:text-nb-gray-400 font-mono font-thin text-xs"}
+            >
+              {peer.ip}
+            </span>
+          </CopyToClipboardText>
+        </div>
       </div>
-    </div>
+    </FullTooltip>
   );
 }

src/modules/peers/PeerAddressTooltipContent.tsx

@@ -0,0 +1,74 @@
+import { FlagIcon, GlobeIcon, MapPin, NetworkIcon } from "lucide-react";
+import * as React from "react";
+import { useMemo } from "react";
+import Skeleton from "react-loading-skeleton";
+import { useCountries } from "@/contexts/CountryProvider";
+import { Peer } from "@/interfaces/Peer";
+
+type Props = {
+  peer: Peer;
+};
+export const PeerAddressTooltipContent = ({ peer }: Props) => {
+  const { isLoading, getRegionByPeer } = useCountries();
+
+  const countryText = useMemo(() => {
+    return getRegionByPeer(peer);
+  }, [getRegionByPeer, peer]);
+
+  return (
+    <div
+      className={"text-xs flex flex-col"}
+      onClick={(e) => {
+        e.stopPropagation();
+        e.preventDefault();
+      }}
+    >
+      <ListItem
+        icon={<MapPin size={14} />}
+        label={"NetBird IP"}
+        value={peer.ip}
+      />
+      <ListItem
+        icon={<NetworkIcon size={14} />}
+        label={"Public IP"}
+        value={peer.connection_ip}
+      />
+      <ListItem
+        icon={<GlobeIcon size={14} />}
+        label={"Domain"}
+        value={peer.dns_label}
+      />
+      <ListItem
+        icon={<FlagIcon size={14} />}
+        label={"Region"}
+        value={
+          isLoading && !countryText ? <Skeleton width={100} /> : countryText
+        }
+      />
+    </div>
+  );
+};
+
+const ListItem = ({
+  icon,
+  label,
+  value,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: string | React.ReactNode;
+}) => {
+  return (
+    <div
+      className={
+        "flex justify-between gap-10 border-b border-nb-gray-920 py-2 px-4 last:border-b-0"
+      }
+    >
+      <div className={"flex items-center gap-2 text-nb-gray-100 font-medium"}>
+        {icon}
+        {label}
+      </div>
+      <div className={"text-nb-gray-400"}>{value}</div>
+    </div>
+  );
+};

src/modules/peers/PeerOSCell.tsx

@@ -42,7 +42,7 @@ export function PeerOSCell({ os }: { os: string }) {
 
 export function OSLogo({ os }: { os: string }) {
   const icon = useMemo(() => {
-    return getOperatingSystem(os.toLowerCase());
+    return getOperatingSystem(os);
   }, [os]);
 
   if (icon === OperatingSystem.WINDOWS)

src/modules/peers/PeersTable.tsx

@@ -17,6 +17,7 @@ import React from "react";
 import { useSWRConfig } from "swr";
 import PeerIcon from "@/assets/icons/PeerIcon";
 import PeerProvider from "@/contexts/PeerProvider";
+import { useLoggedInUser } from "@/contexts/UsersProvider";
 import { useLocalStorage } from "@/hooks/useLocalStorage";
 import { Group } from "@/interfaces/Group";
 import { Peer } from "@/interfaces/Peer";
@@ -133,6 +134,7 @@ const PeersTableColumns: ColumnDef<Peer>[] = [
     ),
   },
   {
+    id: "actions",
     accessorKey: "id",
     header: "",
     cell: ({ row }) => (
@@ -176,6 +178,8 @@ export default function PeersTable({ peers, isLoading }: Props) {
       "name",
     ) as Group[]) || ([] as Group[]);
 
+  const { isUser } = useLoggedInUser();
+
   return (
     <DataTable
       onRowClick={(row) => router.push("/peer?id=" + row.original.id)}
@@ -193,6 +197,7 @@ export default function PeersTable({ peers, isLoading }: Props) {
         ip: false,
         user_name: false,
         user_email: false,
+        actions: !isUser,
       }}
       isLoading={isLoading}
       getStartedCard={
@@ -229,6 +234,29 @@ export default function PeersTable({ peers, isLoading }: Props) {
       {(table) => (
         <>
           <ButtonGroup disabled={peers?.length == 0}>
+            <ButtonGroup.Button
+              disabled={peers?.length == 0}
+              onClick={() => {
+                table.setPageIndex(0);
+                table.setColumnFilters([
+                  {
+                    id: "connected",
+                    value: undefined,
+                  },
+                  {
+                    id: "approval_required",
+                    value: undefined,
+                  },
+                ]);
+              }}
+              variant={
+                table.getColumn("connected")?.getFilterValue() == undefined
+                  ? "tertiary"
+                  : "secondary"
+              }
+            >
+              All
+            </ButtonGroup.Button>
             <ButtonGroup.Button
               onClick={() => {
                 table.setPageIndex(0);
@@ -253,13 +281,12 @@ export default function PeersTable({ peers, isLoading }: Props) {
               Online
             </ButtonGroup.Button>
             <ButtonGroup.Button
-              disabled={peers?.length == 0}
               onClick={() => {
                 table.setPageIndex(0);
                 table.setColumnFilters([
                   {
                     id: "connected",
-                    value: undefined,
+                    value: false,
                   },
                   {
                     id: "approval_required",
@@ -267,13 +294,14 @@ export default function PeersTable({ peers, isLoading }: Props) {
                   },
                 ]);
               }}
+              disabled={peers?.length == 0}
               variant={
-                table.getColumn("connected")?.getFilterValue() == undefined
+                table.getColumn("connected")?.getFilterValue() == false
                   ? "tertiary"
                   : "secondary"
               }
             >
-              All
+              Offline
             </ButtonGroup.Button>
           </ButtonGroup>
 

src/modules/posture-checks/checks/PostureCheckGeoLocation.tsx

@@ -171,7 +171,7 @@ const CheckContent = ({ value, onChange }: Props) => {
         <div className={"w-full"}>
           <Paragraph className={"text-sm mt-auto"}>
             Learn more about
-            <InlineLink href={"#"} target={"_blank"}>
+            <InlineLink href={"https://docs.netbird.io/how-to/manage-posture-checks#geolocation-check"} target={"_blank"}>
               Country & Region Check
               <ExternalLinkIcon size={12} />
             </InlineLink>

src/modules/posture-checks/checks/PostureCheckNetBirdVersion.tsx

@@ -86,7 +86,7 @@ const CheckContent = ({ value, onChange }: Props) => {
         <div className={"w-full"}>
           <Paragraph className={"text-sm mt-auto"}>
             Learn more about
-            <InlineLink href={"#"} target={"_blank"}>
+            <InlineLink href={"https://docs.netbird.io/how-to/manage-posture-checks#net-bird-client-version-check"} target={"_blank"}>
               Client Version Check
               <ExternalLinkIcon size={12} />
             </InlineLink>

src/modules/posture-checks/checks/PostureCheckOperatingSystem.tsx

@@ -215,7 +215,7 @@ const CheckContent = ({ value, onChange }: Props) => {
         <div className={"w-full"}>
           <Paragraph className={"text-sm mt-auto"}>
             Learn more about
-            <InlineLink href={"#"} target={"_blank"}>
+            <InlineLink href={"https://docs.netbird.io/how-to/manage-posture-checks#operating-system-version-check"} target={"_blank"}>
               Operating System Check
               <ExternalLinkIcon size={12} />
             </InlineLink>

src/modules/posture-checks/checks/PostureCheckPeerNetworkRange.tsx

@@ -0,0 +1,219 @@
+import Button from "@components/Button";
+import HelpText from "@components/HelpText";
+import InlineLink from "@components/InlineLink";
+import { Input } from "@components/Input";
+import { Label } from "@components/Label";
+import { ModalClose, ModalFooter } from "@components/modal/Modal";
+import Paragraph from "@components/Paragraph";
+import { RadioGroup, RadioGroupItem } from "@components/RadioGroup";
+import cidr from "ip-cidr";
+import { isEmpty, uniqueId } from "lodash";
+import {
+  ExternalLinkIcon,
+  MinusCircleIcon,
+  NetworkIcon,
+  PlusCircle,
+  ShieldCheck,
+  ShieldXIcon,
+} from "lucide-react";
+import * as React from "react";
+import { useMemo, useState } from "react";
+import { PeerNetworkRangeCheck } from "@/interfaces/PostureCheck";
+import { PostureCheckCard } from "@/modules/posture-checks/ui/PostureCheckCard";
+
+type Props = {
+  value?: PeerNetworkRangeCheck;
+  onChange: (value: PeerNetworkRangeCheck | undefined) => void;
+};
+
+export const PostureCheckPeerNetworkRange = ({ value, onChange }: Props) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <PostureCheckCard
+      open={open}
+      setOpen={setOpen}
+      key={open ? 1 : 0}
+      icon={<NetworkIcon size={16} />}
+      title={"Peer Network Range"}
+      modalWidthClass={"max-w-xl"}
+      description={
+        "Restrict access by allowing or blocking peer network ranges."
+      }
+      iconClass={"bg-gradient-to-tr from-blue-500 to-blue-400"}
+      active={value !== undefined}
+      onReset={() => onChange(undefined)}
+    >
+      <CheckContent
+        value={value}
+        onChange={(v) => {
+          onChange(v);
+          setOpen(false);
+        }}
+      />
+    </PostureCheckCard>
+  );
+};
+
+interface NetworkRange {
+  id: string;
+  value: string;
+}
+
+const CheckContent = ({ value, onChange }: Props) => {
+  const [allowOrDeny, setAllowOrDeny] = useState<string>(
+    value?.action ? value.action : "allow",
+  );
+
+  const [networkRanges, setNetworkRanges] = useState<NetworkRange[]>(
+    value?.ranges
+      ? value.ranges.map((r) => {
+          return {
+            id: uniqueId("range"),
+            value: r,
+          };
+        })
+      : [],
+  );
+
+  const handleNetworkRangeChange = (id: string, value: string) => {
+    const newRanges = networkRanges.map((r) =>
+      r.id === id ? { ...r, value } : r,
+    );
+    setNetworkRanges(newRanges);
+  };
+
+  const removeNetworkRange = (id: string) => {
+    const newRanges = networkRanges.filter((r) => r.id !== id);
+    setNetworkRanges(newRanges);
+  };
+
+  const addNetworkRange = () => {
+    setNetworkRanges([...networkRanges, { id: uniqueId("range"), value: "" }]);
+  };
+
+  const validateNetworkRange = (networkRange: string) => {
+    if (networkRange == "") return "";
+    const validCIDR = cidr.isValidAddress(networkRange);
+    if (!validCIDR) return "Please enter a valid CIDR, e.g., 192.168.1.0/24";
+    return "";
+  };
+
+  const cidrErrors = useMemo(() => {
+    if (networkRanges && networkRanges.length > 0) {
+      return networkRanges.map((r) => {
+        return {
+          id: r.id,
+          error: validateNetworkRange(r.value),
+        };
+      });
+    } else {
+      return [];
+    }
+  }, [networkRanges]);
+
+  const hasErrorsOrIsEmpty = useMemo(() => {
+    if (networkRanges.length === 0) return true;
+    return cidrErrors.some((e) => e.error !== "");
+  }, [networkRanges, cidrErrors]);
+
+  return (
+    <>
+      <div className={"flex flex-col px-8 gap-2 pb-6"}>
+        <div className={"flex justify-between items-start gap-10 mt-2"}>
+          <div>
+            <Label>Allow or Block Ranges</Label>
+            <HelpText className={""}>
+              Choose whether you want to allow or block specific peer network
+              ranges
+            </HelpText>
+          </div>
+          <RadioGroup value={allowOrDeny} onChange={setAllowOrDeny}>
+            <RadioGroupItem value={"allow"} variant={"green"}>
+              <ShieldCheck size={16} />
+              Allow
+            </RadioGroupItem>
+            <RadioGroupItem value={"deny"} variant={"red"}>
+              <ShieldXIcon size={16} />
+              Block
+            </RadioGroupItem>
+          </RadioGroup>
+        </div>
+        {networkRanges.length > 0 && (
+          <div className={"mb-2 flex flex-col gap-2 w-full "}>
+            {networkRanges.map((ipRange) => {
+              return (
+                <div key={ipRange.id} className={"flex gap-2"}>
+                  <div className={"w-full"}>
+                    <Input
+                      customPrefix={<NetworkIcon size={16} />}
+                      placeholder={"e.g., 172.16.0.0/16"}
+                      value={ipRange.value}
+                      error={cidrErrors.find((e) => e.id === ipRange.id)?.error}
+                      errorTooltip={false}
+                      className={"font-mono !text-[13px] w-full"}
+                      onChange={(e) =>
+                        handleNetworkRangeChange(ipRange.id, e.target.value)
+                      }
+                    />
+                  </div>
+
+                  <Button
+                    className={"h-[42px]"}
+                    variant={"default-outline"}
+                    onClick={() => removeNetworkRange(ipRange.id)}
+                  >
+                    <MinusCircleIcon size={15} />
+                  </Button>
+                </div>
+              );
+            })}
+          </div>
+        )}
+        <Button variant={"dotted"} size={"sm"} onClick={addNetworkRange}>
+          <PlusCircle size={16} />
+          Add Network Range
+        </Button>
+      </div>
+      <ModalFooter className={"items-center"}>
+        <div className={"w-full"}>
+          <Paragraph className={"text-sm mt-auto"}>
+            Learn more about
+            <InlineLink
+              href={
+                "https://docs.netbird.io/how-to/manage-posture-checks#peer-network-range-check"
+              }
+              target={"_blank"}
+            >
+              Peer Network Range Check
+              <ExternalLinkIcon size={12} />
+            </InlineLink>
+          </Paragraph>
+        </div>
+        <div className={"flex gap-3 w-full justify-end"}>
+          <ModalClose asChild={true}>
+            <Button variant={"secondary"}>Cancel</Button>
+          </ModalClose>
+          <Button
+            variant={"primary"}
+            disabled={hasErrorsOrIsEmpty}
+            onClick={() => {
+              if (isEmpty(networkRanges)) {
+                onChange(undefined);
+              } else {
+                onChange({
+                  action: allowOrDeny as "allow" | "deny",
+                  ranges: networkRanges
+                    .map((r) => r.value)
+                    .filter((r) => r !== ""),
+                });
+              }
+            }}
+          >
+            Save
+          </Button>
+        </div>
+      </ModalFooter>
+    </>
+  );
+};

src/modules/posture-checks/checks/tooltips/PeerNetworkRangeTooltip.tsx

@@ -0,0 +1,67 @@
+import Badge from "@components/Badge";
+import FullTooltip from "@components/FullTooltip";
+import { ScrollArea } from "@components/ScrollArea";
+import { NetworkIcon } from "lucide-react";
+import * as React from "react";
+import { PeerNetworkRangeCheck } from "@/interfaces/PostureCheck";
+
+type Props = {
+  check?: PeerNetworkRangeCheck;
+  children?: React.ReactNode;
+};
+export const PeerNetworkRangeTooltip = ({ check, children }: Props) => {
+  return check ? (
+    <FullTooltip
+      className={"w-full"}
+      interactive={true}
+      contentClassName={"p-0"}
+      content={
+        <div
+          className={"text-neutral-300 text-sm max-w-xs flex flex-col gap-1"}
+        >
+          <div className={"px-4 pt-3"}>
+            {check.action == "allow" ? (
+              <span>
+                <span className={"text-green-500 font-semibold"}>
+                  Allow only
+                </span>{" "}
+                the following peer network ranges
+              </span>
+            ) : (
+              <span>
+                <span className={"text-red-500 font-semibold"}>Block</span> the
+                following peer network ranges
+              </span>
+            )}
+          </div>
+
+          <ScrollArea
+            className={"max-h-[275px] overflow-y-auto flex flex-col px-4"}
+          >
+            <div className={"flex flex-col gap-1.5 mt-1 text-xs mb-3.5"}>
+              {check.ranges.map((ipRange, index) => {
+                return (
+                  <Badge
+                    variant={"gray"}
+                    useHover={false}
+                    key={index}
+                    className={
+                      "justify-start font-medium font-mono text-[11px]"
+                    }
+                  >
+                    <NetworkIcon size={10} />
+                    {ipRange}
+                  </Badge>
+                );
+              })}
+            </div>
+          </ScrollArea>
+        </div>
+      }
+    >
+      {children}
+    </FullTooltip>
+  ) : (
+    children
+  );
+};

src/modules/posture-checks/modal/PostureCheckModal.tsx

@@ -23,6 +23,7 @@ import {
 import { PostureCheckGeoLocation } from "@/modules/posture-checks/checks/PostureCheckGeoLocation";
 import { PostureCheckNetBirdVersion } from "@/modules/posture-checks/checks/PostureCheckNetBirdVersion";
 import { PostureCheckOperatingSystem } from "@/modules/posture-checks/checks/PostureCheckOperatingSystem";
+import { PostureCheckPeerNetworkRange } from "@/modules/posture-checks/checks/PostureCheckPeerNetworkRange";
 
 type Props = {
   open: boolean;
@@ -54,6 +55,9 @@ export default function PostureCheckModal({
   const [osVersionCheck, setOsVersionCheck] = useState(
     postureCheck?.checks.os_version_check || undefined,
   );
+  const [peerNetworkRangeCheck, setPeerNetworkRangeCheck] = useState(
+    postureCheck?.checks.peer_network_range_check || undefined,
+  );
 
   const validateOSCheck = (osCheck?: OperatingSystemVersionCheck) => {
     if (!osCheck) return;
@@ -93,6 +97,7 @@ export default function PostureCheckModal({
         nb_version_check: nbVersionCheck,
         geo_location_check: validateLocationCheck(geoLocationCheck),
         os_version_check: validateOSCheck(osVersionCheck),
+        peer_network_range_check: peerNetworkRangeCheck,
       },
     };
 
@@ -125,7 +130,10 @@ export default function PostureCheckModal({
   };
 
   const isAtLeastOneCheckEnabled =
-    !!nbVersionCheck || !!geoLocationCheck || !!osVersionCheck;
+    !!nbVersionCheck ||
+    !!geoLocationCheck ||
+    !!osVersionCheck ||
+    !!peerNetworkRangeCheck;
   const canCreate = !isEmpty(name) && isAtLeastOneCheckEnabled;
 
   const [tab, setTab] = useState("checks");
@@ -180,6 +188,10 @@ export default function PostureCheckModal({
                   value={osVersionCheck}
                   onChange={setOsVersionCheck}
                 />
+                <PostureCheckPeerNetworkRange
+                  value={peerNetworkRangeCheck}
+                  onChange={setPeerNetworkRangeCheck}
+                />
               </>
             </TabsContent>
             <TabsContent value={"general"} className={"pb-8 px-8"}>
@@ -221,9 +233,7 @@ export default function PostureCheckModal({
               <Paragraph className={"text-sm mt-auto"}>
                 Learn more about
                 <InlineLink
-                  href={
-                    "https://docs.netbird.io/how-to/routing-traffic-to-private-networks"
-                  }
+                  href={"https://docs.netbird.io/how-to/manage-posture-checks"}
                   target={"_blank"}
                 >
                   Posture Checks

src/modules/posture-checks/table/PostureCheckTable.tsx

@@ -174,7 +174,7 @@ export default function PostureCheckTable({ postureChecks, isLoading }: Props) {
             learnMore={
               <>
                 Learn more about
-                <InlineLink href={"#"} target={"_blank"}>
+                <InlineLink href={"https://docs.netbird.io/how-to/manage-posture-checks"} target={"_blank"}>
                   Posture Checks
                   <ExternalLinkIcon size={12} />
                 </InlineLink>

src/modules/posture-checks/table/cells/PostureCheckChecksCell.tsx

@@ -1,11 +1,12 @@
 import { cn } from "@utils/helpers";
-import { Disc3Icon, FlagIcon } from "lucide-react";
+import { Disc3Icon, FlagIcon, NetworkIcon } from "lucide-react";
 import * as React from "react";
 import NetBirdIcon from "@/assets/icons/NetBirdIcon";
 import { PostureCheck } from "@/interfaces/PostureCheck";
 import { GeoLocationTooltip } from "@/modules/posture-checks/checks/tooltips/GeoLocationTooltip";
 import { NetBirdVersionTooltip } from "@/modules/posture-checks/checks/tooltips/NetBirdVersionTooltip";
 import { OperatingSystemTooltip } from "@/modules/posture-checks/checks/tooltips/OperatingSystemTooltip";
+import { PeerNetworkRangeTooltip } from "@/modules/posture-checks/checks/tooltips/PeerNetworkRangeTooltip";
 
 type Props = {
   check: PostureCheck;
@@ -56,6 +57,20 @@ export const PostureCheckChecksCell = ({ check }: Props) => {
               </div>
             </OperatingSystemTooltip>
           )}
+
+          {check.checks.peer_network_range_check && (
+            <PeerNetworkRangeTooltip
+              check={check.checks.peer_network_range_check}
+            >
+              <div
+                className={cn(
+                  "bg-gradient-to-tr from-blue-500 to-blue-400 h-8 w-8 rounded-full flex items-center justify-center relative z-[8] hover:scale-[1.1] transition-all",
+                )}
+              >
+                <NetworkIcon size={14} />
+              </div>
+            </PeerNetworkRangeTooltip>
+          )}
         </div>
       </div>
     </div>

src/modules/settings/AuthenticationTab.tsx

@@ -15,9 +15,8 @@ import {
 } from "@components/Select";
 import * as Tabs from "@radix-ui/react-tabs";
 import { useApiCall } from "@utils/api";
-import { cn } from "@utils/helpers";
-import { isLocalDev, isNetBirdHosted } from "@utils/netbird";
-import { CalendarClock, ShieldIcon, TimerReset, VoteIcon } from "lucide-react";
+import { cn, isInt } from "@utils/helpers";
+import { CalendarClock, ShieldIcon, TimerReset } from "lucide-react";
 import React, { useMemo, useState } from "react";
 import { useSWRConfig } from "swr";
 import SettingsIcon from "@/assets/icons/SettingsIcon";
@@ -55,16 +54,21 @@ export default function AuthenticationTab({ account }: Props) {
   const [expiresInSeconds] = useState(
     account.settings.peer_login_expiration || 86400,
   );
+
   const [expiresIn, setExpiresIn] = useState(() => {
-    if (expiresInSeconds <= 86400) return "1";
-    return Math.round(expiresInSeconds / 86400).toString();
+    if (expiresInSeconds <= 172800) {
+      const hours = expiresInSeconds / 3600;
+      return isInt(hours) ? hours.toString() : hours.toFixed(2).toString();
+    }
+    const days = expiresInSeconds / 86400;
+    return isInt(days) ? days.toString() : days.toFixed(2).toString();
   });
 
   /**
    * Interval
    */
   const initialInterval = useMemo(() => {
-    if (Number(expiresIn) <= 86400) return "hours";
+    if (expiresInSeconds <= 172800) return "hours";
     return "days";
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -138,22 +142,6 @@ export default function AuthenticationTab({ account }: Props) {
         </div>
 
         <div className={"flex flex-col gap-6 w-full mt-8"}>
-          {(isLocalDev() || isNetBirdHosted()) && (
-            <div>
-              <FancyToggleSwitch
-                value={peerApproval}
-                onChange={setPeerApproval}
-                label={
-                  <>
-                    <VoteIcon size={15} />
-                    Peer approval
-                  </>
-                }
-                helpText={"Require peers to be approved by an administrator."}
-              />
-            </div>
-          )}
-
           <div>
             <FancyToggleSwitch
               value={loginExpiration}

src/modules/settings/GroupsTab.tsx

@@ -50,7 +50,7 @@ export default function GroupsTab({ account }: Props) {
    * JWT Group Sync
    */
   const [jwtGroupSync, setJwtGroupSync] = useState<boolean>(
-    account.settings.groups_propagation_enabled,
+    account.settings.jwt_groups_enabled,
   );
   const [jwtGroupsClaimName, setJwtGroupsClaimName] = useState(
     account.settings.jwt_groups_claim_name,

src/modules/settings/PermissionsTab.tsx

@@ -0,0 +1,100 @@
+import Breadcrumbs from "@components/Breadcrumbs";
+import Button from "@components/Button";
+import FancyToggleSwitch from "@components/FancyToggleSwitch";
+import { notify } from "@components/Notification";
+import * as Tabs from "@radix-ui/react-tabs";
+import { useApiCall } from "@utils/api";
+import { GaugeIcon, LockIcon } from "lucide-react";
+import React, { useState } from "react";
+import { useSWRConfig } from "swr";
+import SettingsIcon from "@/assets/icons/SettingsIcon";
+import { useHasChanges } from "@/hooks/useHasChanges";
+import { Account } from "@/interfaces/Account";
+
+type Props = {
+  account: Account;
+};
+
+export default function PermissionsTab({ account }: Props) {
+  const { mutate } = useSWRConfig();
+  const saveRequest = useApiCall<Account>("/accounts/" + account.id);
+
+  const [userViewBlocked, setUserViewBlocked] = useState<boolean>(
+    account?.settings.regular_users_view_blocked ?? false,
+  );
+
+  const { hasChanges, updateRef } = useHasChanges([userViewBlocked]);
+
+  const saveChanges = async () => {
+    notify({
+      title: "Permission Settings",
+      description: "Permissions were updated successfully.",
+      promise: saveRequest
+        .put({
+          id: account.id,
+          settings: {
+            regular_users_view_blocked: userViewBlocked,
+            groups_propagation_enabled:
+              account.settings?.groups_propagation_enabled,
+            peer_login_expiration_enabled:
+              account.settings?.peer_login_expiration_enabled,
+            peer_login_expiration: account.settings?.peer_login_expiration,
+            jwt_groups_enabled: account.settings?.jwt_groups_enabled,
+            jwt_groups_claim_name: account.settings?.jwt_groups_claim_name,
+            jwt_allow_groups: account.settings?.jwt_allow_groups,
+          },
+        })
+        .then(() => {
+          mutate("/accounts");
+          updateRef([userViewBlocked]);
+        }),
+      loadingMessage: "Updating permissions...",
+    });
+  };
+
+  return (
+    <Tabs.Content value={"permissions"} className={"w-full"}>
+      <div className={"p-default py-6 max-w-xl"}>
+        <Breadcrumbs>
+          <Breadcrumbs.Item
+            href={"/settings"}
+            label={"Settings"}
+            icon={<SettingsIcon size={13} />}
+          />
+          <Breadcrumbs.Item
+            href={"/settings?tab=permissions"}
+            label={"Permissions"}
+            icon={<LockIcon size={14} />}
+            active
+          />
+        </Breadcrumbs>
+        <div className={"flex items-start justify-between"}>
+          <h1>Permissions</h1>
+          <Button
+            variant={"primary"}
+            disabled={!hasChanges}
+            onClick={saveChanges}
+          >
+            Save Changes
+          </Button>
+        </div>
+
+        <div className={"flex flex-col gap-6 mt-8 mb-3"}>
+          <FancyToggleSwitch
+            value={userViewBlocked}
+            onChange={setUserViewBlocked}
+            label={
+              <>
+                <GaugeIcon size={15} />
+                Restrict dashboard for regular users
+              </>
+            }
+            helpText={
+              "Access to the dashboard will be limited and regular users will not be able to view any peers."
+            }
+          />
+        </div>
+      </div>
+    </Tabs.Content>
+  );
+}