Add Access Control Groups & various UI / UX improvements (#415)

* Update codespell

* Add access control group, add various ui / ux improvements

.github/workflows/codespell.yml

@@ -13,4 +13,4 @@ jobs:
         with:
           only_warn: 1
           skip: package-lock.json,*.svg
-          ignore_words_list: mappin          
+          ignore_words_list: mappin, allTime

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

@@ -5,6 +5,7 @@ import InlineLink from "@components/InlineLink";
 import Paragraph from "@components/Paragraph";
 import SkeletonTable from "@components/skeletons/SkeletonTable";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
+import { usePortalElement } from "@hooks/usePortalElement";
 import useFetchApi from "@utils/api";
 import { ExternalLinkIcon } from "lucide-react";
 import React, { lazy, Suspense } from "react";
@@ -20,6 +21,9 @@ const AccessControlTable = lazy(
 export default function AccessControlPage() {
   const { data: policies, isLoading } = useFetchApi<Policy[]>("/policies");
 
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
   return (
     <PageContainer>
       <GroupsProvider>
@@ -31,12 +35,7 @@ export default function AccessControlPage() {
               icon={<AccessControlIcon size={14} />}
             />
           </Breadcrumbs>
-
-          <h1>
-            {policies && policies.length > 1
-              ? `${policies.length} Access Control Policies`
-              : "Access Control Policies"}
-          </h1>
+          <h1 ref={headingRef}>Access Control Policies</h1>
           <Paragraph>
             Create rules to manage access in your network and define what peers
             can connect.
@@ -57,7 +56,11 @@ export default function AccessControlPage() {
         <RestrictedAccess page={"Access Control"}>
           <PoliciesProvider>
             <Suspense fallback={<SkeletonTable />}>
-              <AccessControlTable isLoading={isLoading} policies={policies} />
+              <AccessControlTable
+                isLoading={isLoading}
+                policies={policies}
+                headingTarget={portalTarget}
+              />
             </Suspense>
           </PoliciesProvider>
         </RestrictedAccess>

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

@@ -4,6 +4,7 @@ import Breadcrumbs from "@components/Breadcrumbs";
 import InlineLink from "@components/InlineLink";
 import Paragraph from "@components/Paragraph";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
+import { usePortalElement } from "@hooks/usePortalElement";
 import useFetchApi from "@utils/api";
 import { ExternalLinkIcon } from "lucide-react";
 import React from "react";
@@ -15,6 +16,9 @@ import ActivityTable from "@/modules/activity/ActivityTable";
 export default function Activity() {
   const { data: events, isLoading } = useFetchApi<ActivityEvent[]>("/events");
 
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
   return (
     <PageContainer>
       <div className={"p-default py-6"}>
@@ -25,11 +29,7 @@ export default function Activity() {
             icon={<ActivityIcon size={13} />}
           />
         </Breadcrumbs>
-        <h1>
-          {events && events.length > 1
-            ? `${events.length} Activity Events`
-            : "Activity Events"}
-        </h1>
+        <h1 ref={headingRef}>Activity Events</h1>
         <Paragraph>
           Here you can see all the account and network activity events.
         </Paragraph>
@@ -48,7 +48,11 @@ export default function Activity() {
         </Paragraph>
       </div>
       <RestrictedAccess page={"Activity"}>
-        <ActivityTable events={events} isLoading={isLoading} />
+        <ActivityTable
+          events={events}
+          isLoading={isLoading}
+          headingTarget={portalTarget}
+        />
       </RestrictedAccess>
     </PageContainer>
   );

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

@@ -5,6 +5,7 @@ import InlineLink from "@components/InlineLink";
 import Paragraph from "@components/Paragraph";
 import SkeletonTable from "@components/skeletons/SkeletonTable";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
+import { usePortalElement } from "@hooks/usePortalElement";
 import useFetchApi from "@utils/api";
 import { ExternalLinkIcon, ServerIcon } from "lucide-react";
 import React, { lazy, Suspense } from "react";
@@ -20,6 +21,9 @@ export default function NameServers() {
   const { data: nameserverGroups, isLoading } =
     useFetchApi<NameserverGroup[]>("/dns/nameservers");
 
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
   return (
     <PageContainer>
       <div className={"p-default py-6"}>
@@ -36,11 +40,7 @@ export default function NameServers() {
             icon={<ServerIcon size={13} />}
           />
         </Breadcrumbs>
-        <h1>
-          {nameserverGroups && nameserverGroups.length > 1
-            ? `${nameserverGroups.length} Nameservers`
-            : "Nameservers"}
-        </h1>
+        <h1 ref={headingRef}>Nameservers</h1>
         <Paragraph>
           Add nameservers for domain name resolution in your NetBird network.
         </Paragraph>
@@ -62,6 +62,7 @@ export default function NameServers() {
           <NameserverGroupTable
             nameserverGroups={nameserverGroups}
             isLoading={isLoading}
+            headingTarget={portalTarget}
           />
         </Suspense>
       </RestrictedAccess>

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

@@ -5,6 +5,7 @@ import InlineLink from "@components/InlineLink";
 import Paragraph from "@components/Paragraph";
 import SkeletonTable from "@components/skeletons/SkeletonTable";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
+import { usePortalElement } from "@hooks/usePortalElement";
 import useFetchApi from "@utils/api";
 import { ExternalLinkIcon } from "lucide-react";
 import React, { lazy, Suspense } from "react";
@@ -23,6 +24,9 @@ export default function NetworkRoutes() {
   const { data: routes, isLoading } = useFetchApi<Route[]>("/routes");
   const groupedRoutes = useGroupedRoutes({ routes });
 
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
   return (
     <PageContainer>
       <RoutesProvider>
@@ -35,11 +39,7 @@ export default function NetworkRoutes() {
                 icon={<NetworkRoutesIcon size={13} />}
               />
             </Breadcrumbs>
-            <h1>
-              {groupedRoutes && groupedRoutes.length > 1
-                ? `${groupedRoutes.length} Network Routes`
-                : "Network Routes"}
-            </h1>
+            <h1 ref={headingRef}>Network Routes</h1>
             <Paragraph>
               Network routes allow you to access other networks like LANs and
               VPCs without installing NetBird on every resource.
@@ -65,6 +65,7 @@ export default function NetworkRoutes() {
                 isLoading={isLoading}
                 groupedRoutes={groupedRoutes}
                 routes={routes}
+                headingTarget={portalTarget}
               />
             </Suspense>
           </RestrictedAccess>

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

@@ -23,6 +23,7 @@ import Separator from "@components/Separator";
 import FullScreenLoading from "@components/ui/FullScreenLoading";
 import LoginExpiredBadge from "@components/ui/LoginExpiredBadge";
 import TextWithTooltip from "@components/ui/TextWithTooltip";
+import { getOperatingSystem } from "@hooks/useOperatingSystem";
 import useRedirect from "@hooks/useRedirect";
 import { IconCloudLock, IconInfoCircle } from "@tabler/icons-react";
 import useFetchApi from "@utils/api";
@@ -54,15 +55,12 @@ 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";
 import type { Peer } from "@/interfaces/Peer";
 import PageContainer from "@/layouts/PageContainer";
-import { AddExitNodeButton } from "@/modules/exit-node/AddExitNodeButton";
-import { useHasExitNodes } from "@/modules/exit-node/useHasExitNodes";
 import useGroupHelper from "@/modules/groups/useGroupHelper";
-import AddRouteDropdownButton from "@/modules/peer/AddRouteDropdownButton";
-import PeerRoutesTable from "@/modules/peer/PeerRoutesTable";
+import { AccessiblePeersSection } from "@/modules/peer/AccessiblePeersSection";
+import { PeerNetworkRoutesSection } from "@/modules/peer/PeerNetworkRoutesSection";
 
 export default function PeerPage() {
   const queryParameter = useSearchParams();
@@ -72,7 +70,7 @@ export default function PeerPage() {
   useRedirect("/peers", false, !peerId);
 
   return peer && !isLoading ? (
-    <PeerProvider peer={peer}>
+    <PeerProvider peer={peer} key={peerId}>
       <PeerOverview />
     </PeerProvider>
   ) : (
@@ -133,7 +131,6 @@ function PeerOverview() {
   };
 
   const { isUser } = useLoggedInUser();
-  const hasExitNodes = useHasExitNodes(peer);
 
   return (
     <PageContainer>
@@ -336,30 +333,19 @@ function PeerOverview() {
           </div>
         </div>
 
-        <Separator />
-
         {isLinux && !isUser ? (
-          <div className={"px-8 py-6"}>
-            <div className={"max-w-6xl"}>
-              <div className={"flex justify-between items-center"}>
-                <div>
-                  <h2>Network Routes</h2>
-                  <Paragraph>
-                    Access other networks without installing NetBird on every
-                    resource.
-                  </Paragraph>
-                </div>
-                <div className={"inline-flex gap-4 justify-end"}>
-                  <div className={"gap-4 flex"}>
-                    <AddExitNodeButton peer={peer} firstTime={!hasExitNodes} />
-                    <AddRouteDropdownButton />
-                  </div>
-                </div>
-              </div>
-              <PeerRoutesTable peer={peer} />
-            </div>
-          </div>
+          <>
+            <Separator />
+            <PeerNetworkRoutesSection peer={peer} />
+          </>
         ) : null}
+
+        {peer?.id && (
+          <>
+            <Separator />
+            <AccessiblePeersSection peerID={peer.id} />
+          </>
+        )}
       </RoutesProvider>
     </PageContainer>
   );

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

@@ -5,6 +5,7 @@ import InlineLink from "@components/InlineLink";
 import Paragraph from "@components/Paragraph";
 import SkeletonTable from "@components/skeletons/SkeletonTable";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
+import { usePortalElement } from "@hooks/usePortalElement";
 import useFetchApi from "@utils/api";
 import { ExternalLinkIcon, ShieldCheck } from "lucide-react";
 import React, { lazy, Suspense } from "react";
@@ -21,6 +22,9 @@ export default function PostureChecksPage() {
   const { data: postureChecks, isLoading } =
     useFetchApi<PostureCheck[]>("/posture-checks");
 
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
   return (
     <PageContainer>
       <GroupsProvider>
@@ -38,17 +42,16 @@ export default function PostureChecksPage() {
               icon={<ShieldCheck size={15} />}
             />
           </Breadcrumbs>
-          <h1>
-            {postureChecks && postureChecks.length > 1
-              ? `${postureChecks.length} Posture Checks`
-              : "Posture Checks"}
-          </h1>
+          <h1 ref={headingRef}>Posture Checks</h1>
           <Paragraph>
             Use posture checks to further restrict access in your network.
           </Paragraph>
           <Paragraph>
             Learn more about
-            <InlineLink href={"https://docs.netbird.io/how-to/manage-posture-checks"} target={"_blank"}>
+            <InlineLink
+              href={"https://docs.netbird.io/how-to/manage-posture-checks"}
+              target={"_blank"}
+            >
               Posture Checks
               <ExternalLinkIcon size={12} />
             </InlineLink>
@@ -60,6 +63,7 @@ export default function PostureChecksPage() {
           <PoliciesProvider>
             <Suspense fallback={<SkeletonTable />}>
               <PostureCheckTable
+                headingTarget={portalTarget}
                 isLoading={isLoading}
                 postureChecks={postureChecks}
               />

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

@@ -5,6 +5,7 @@ import InlineLink from "@components/InlineLink";
 import Paragraph from "@components/Paragraph";
 import SkeletonTable from "@components/skeletons/SkeletonTable";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
+import { usePortalElement } from "@hooks/usePortalElement";
 import useFetchApi from "@utils/api";
 import { ExternalLinkIcon } from "lucide-react";
 import React, { lazy, Suspense, useMemo } from "react";
@@ -38,6 +39,9 @@ export default function SetupKeys() {
     });
   }, [setupKeys, groups]);
 
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
   return (
     <PageContainer>
       <div className={"p-default py-6"}>
@@ -48,11 +52,7 @@ export default function SetupKeys() {
             icon={<SetupKeysIcon size={13} />}
           />
         </Breadcrumbs>
-        <h1>
-          {setupKeys && setupKeys.length > 1
-            ? `${setupKeys.length} Setup Keys`
-            : "Setup Keys"}
-        </h1>
+        <h1 ref={headingRef}>Setup Keys</h1>
         <Paragraph>
           Setup keys are pre-authentication keys that allow to register new
           machines in your network.
@@ -74,6 +74,7 @@ export default function SetupKeys() {
       <RestrictedAccess page={"Setup Keys"}>
         <Suspense fallback={<SkeletonTable />}>
           <SetupKeysTable
+            headingTarget={portalTarget}
             setupKeys={setupKeysWithGroups}
             isLoading={isLoading}
           />

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

@@ -5,6 +5,7 @@ import InlineLink from "@components/InlineLink";
 import Paragraph from "@components/Paragraph";
 import SkeletonTable from "@components/skeletons/SkeletonTable";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
+import { usePortalElement } from "@hooks/usePortalElement";
 import { IconSettings2 } from "@tabler/icons-react";
 import useFetchApi from "@utils/api";
 import { ExternalLinkIcon } from "lucide-react";
@@ -22,6 +23,9 @@ export default function ServiceUsers() {
     "/users?service_user=true",
   );
 
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
   return (
     <PageContainer>
       <div className={"p-default py-6"}>
@@ -38,11 +42,7 @@ export default function ServiceUsers() {
             icon={<IconSettings2 size={17} />}
           />
         </Breadcrumbs>
-        <h1>
-          {users && users.length > 1
-            ? `${users.length} Service Users`
-            : "Service Users"}
-        </h1>
+        <h1 ref={headingRef}>Service Users</h1>
         <Paragraph>
           Use service users to create API tokens and avoid losing automated
           access.
@@ -61,7 +61,11 @@ export default function ServiceUsers() {
       </div>
       <RestrictedAccess page={"Service Users"}>
         <Suspense fallback={<SkeletonTable />}>
-          <ServiceUsersTable users={users} isLoading={isLoading} />
+          <ServiceUsersTable
+            users={users}
+            isLoading={isLoading}
+            headingTarget={portalTarget}
+          />
         </Suspense>
       </RestrictedAccess>
     </PageContainer>

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

@@ -5,6 +5,7 @@ import InlineLink from "@components/InlineLink";
 import Paragraph from "@components/Paragraph";
 import SkeletonTable from "@components/skeletons/SkeletonTable";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
+import { usePortalElement } from "@hooks/usePortalElement";
 import useFetchApi from "@utils/api";
 import { ExternalLinkIcon, User2 } from "lucide-react";
 import React, { lazy, Suspense } from "react";
@@ -19,6 +20,9 @@ export default function TeamUsers() {
     "/users?service_user=false",
   );
 
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
   return (
     <PageContainer>
       <div className={"p-default py-6"}>
@@ -35,7 +39,7 @@ export default function TeamUsers() {
             icon={<User2 size={16} />}
           />
         </Breadcrumbs>
-        <h1>{users && users.length > 1 ? `${users.length} Users` : "Users"}</h1>
+        <h1 ref={headingRef}>Users</h1>
         <Paragraph>
           Manage users and their permissions. Same-domain email users are added
           automatically on first sign-in.
@@ -54,7 +58,11 @@ export default function TeamUsers() {
       </div>
       <RestrictedAccess page={"Users"}>
         <Suspense fallback={<SkeletonTable />}>
-          <UsersTable users={users} isLoading={isLoading} />
+          <UsersTable
+            users={users}
+            isLoading={isLoading}
+            headingTarget={portalTarget}
+          />
         </Suspense>
       </RestrictedAccess>
     </PageContainer>

src/assets/icons/NetBirdIcon.tsx

@@ -5,9 +5,17 @@ import NetBirdLogo from "@/assets/netbird.svg";
 
 type Props = {
   size?: number;
+  className?: string;
 };
-function NetBirdIcon({ size = 16 }: Props) {
-  return <Image src={NetBirdLogo} alt={"Netbird Icon"} width={size} />;
+function NetBirdIcon({ size = 16, className }: Props) {
+  return (
+    <Image
+      src={NetBirdLogo}
+      alt={"Netbird Icon"}
+      width={size}
+      className={className}
+    />
+  );
 }
 
 export default memo(NetBirdIcon);

src/components/Badge.tsx

@@ -2,7 +2,7 @@ import { cn } from "@utils/helpers";
 import { cva, VariantProps } from "class-variance-authority";
 import * as React from "react";
 
-type BadgeVariants = VariantProps<typeof variants>;
+export type BadgeVariants = VariantProps<typeof variants>;
 
 interface Props extends React.HTMLAttributes<HTMLDivElement>, BadgeVariants {
   children: React.ReactNode;
@@ -22,6 +22,9 @@ const variants = cva("", {
       purple: ["bg-purple-950/50 border-purple-500 border text-purple-500"],
       yellow: ["bg-yellow-950 border-yellow-500 border text-yellow-400"],
       gray: ["bg-nb-gray-930/60 border-nb-gray-800/40 text-nb-gray-300 border"],
+      grayer: [
+        "bg-nb-gray-900/40 border-nb-gray-800/40 text-nb-gray-300 border",
+      ],
       "gray-ghost": [
         "bg-nb-gray-900 border-nb-gray-800 text-nb-gray-300 border border-nb-gray-800/50",
       ],
@@ -37,6 +40,7 @@ const variants = cva("", {
       "blue-darker": ["hover:bg-sky-800"],
       red: ["hover:bg-red-950/40"],
       gray: ["hover:bg-nb-gray-900"],
+      grayer: ["hover:bg-nb-gray-900"],
       "gray-ghost": ["hover:bg-nb-gray-900"],
       green: ["hover:bg-green-950/50"],
       netbird: ["hover:bg-netbird-950/50"],
@@ -50,7 +54,7 @@ export default function Badge({
   variant = "blue",
   useHover = false,
   ...props
-}: Props) {
+}: Readonly<Props>) {
   return (
     <div
       className={cn(

src/components/Button.tsx

@@ -49,6 +49,10 @@ export const buttonVariants = cva(
           "bg-white hover:text-black focus:ring-zinc-200/50  hover:bg-gray-100 border-gray-200 text-gray-900",
           "dark:focus:ring-zinc-800/50 dark:bg-white dark:text-gray-800 dark:border-gray-700/40 dark:hover:bg-neutral-200 disabled:dark:bg-nb-gray-920 disabled:dark:text-nb-gray-300",
         ],
+        white: [
+          "focus:ring-white/50 bg-white text-gray-800 border-white outline-none hover:bg-neutral-200 disabled:dark:bg-nb-gray-920 disabled:dark:text-nb-gray-300",
+          "disabled:dark:bg-nb-gray-900 disabled:dark:text-nb-gray-300 disabled:dark:border-nb-gray-900",
+        ],
         outline: [
           "bg-white hover:text-black focus:ring-zinc-200/50  hover:bg-gray-100 border-gray-200 text-gray-900",
           "dark:focus:ring-zinc-800/50 dark:bg-transparent dark:text-netbird dark:border-netbird dark:hover:bg-nb-gray-900/30",
@@ -69,6 +73,7 @@ export const buttonVariants = cva(
       },
       size: {
         xs: "text-xs py-2 px-4",
+        xs2: "text-[0.78rem] py-2 px-4",
         sm: "text-sm py-2.5 px-4",
         md: "text-md py-2.5 px-4",
         lg: "text-lg py-2.5 px-4",

src/components/Checkbox.tsx

@@ -2,19 +2,41 @@
 
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { cn } from "@utils/helpers";
+import { cva, VariantProps } from "class-variance-authority";
 import { Check } from "lucide-react";
 import * as React from "react";
 
+type CheckboxVariants = VariantProps<typeof variants>;
+
+const variants = cva([], {
+  variants: {
+    variant: {
+      default: [
+        "dark:data-[state=unchecked]:bg-nb-gray-950 dark:border-nb-gray-900 dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300 ",
+        "dark:data-[state=checked]:bg-netbird dark:data-[state=checked]:text-neutral-50",
+      ],
+      tableCell: [
+        "dark:data-[state=unchecked]:bg-nb-gray-920 dark:border-nb-gray-800 dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300 ",
+        "dark:data-[state=checked]:bg-netbird dark:data-[state=checked]:text-neutral-50",
+      ],
+    },
+  },
+});
+
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> &
+    CheckboxVariants
+>(({ className, variant = "default", ...props }, ref) => (
   <div className={"h-5 w-5"}>
     <CheckboxPrimitive.Root
       ref={ref}
       className={cn(
-        "dark:data-[state=unchecked]:bg-nb-gray-950",
-        "peer h-5 w-5 shrink-0 rounded-[4px]  border border-neutral-900 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-neutral-900 data-[state=checked]:text-neutral-50 dark:border-nb-gray-900 dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300 dark:data-[state=checked]:bg-netbird dark:data-[state=checked]:text-neutral-50",
+        variants({ variant }),
+        "border-neutral-900",
+        "peer h-5 w-5 shrink-0 rounded-[4px] border",
+        "ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2",
+        "disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-neutral-900 data-[state=checked]:text-neutral-50 ",
         className,
       )}
       {...props}

src/components/Command.tsx

@@ -117,7 +117,7 @@ const CommandItem = React.forwardRef<
     ref={ref}
     className={cn(
       "text-xs flex justify-between py-2 px-3 cursor-pointer items-center rounded-md",
-      "bg-transparent dark:aria-selected:bg-nb-gray-800/50",
+      "bg-transparent dark:aria-selected:bg-nb-gray-800/20",
       className,
     )}
     {...props}

src/components/DatePickerWithRange.tsx

@@ -6,7 +6,7 @@ import { Calendar } from "@components/ui/Calendar";
 import { cn } from "@utils/helpers";
 import dayjs from "dayjs";
 import { Calendar as CalendarIcon } from "lucide-react";
-import React from "react";
+import React, { useMemo, useState } from "react";
 import { DateRange } from "react-day-picker";
 
 interface Props {
@@ -15,38 +15,145 @@ interface Props {
   className?: string;
 }
 
+const defaultRanges = {
+  today: {
+    from: dayjs().startOf("day").toDate(),
+    to: dayjs().endOf("day").toDate(),
+  },
+  yesterday: {
+    from: dayjs().subtract(1, "day").startOf("day").toDate(),
+    to: dayjs().subtract(1, "day").endOf("day").toDate(),
+  },
+  last14Days: {
+    from: dayjs().subtract(14, "day").startOf("day").toDate(),
+    to: dayjs().endOf("day").toDate(),
+  },
+  lastMonth: {
+    from: dayjs().subtract(1, "month").startOf("day").toDate(),
+    to: dayjs().endOf("day").toDate(),
+  },
+  allTime: {
+    from: dayjs("1970-01-01").startOf("day").toDate(),
+    to: dayjs().endOf("day").toDate(),
+  },
+};
+
+const isEqualDateRange = (a: DateRange | undefined, b: DateRange) => {
+  if (!a) return false;
+  const aFromDay = dayjs(a.from).format("YYYY-MM-DD");
+  const aToDay = dayjs(a.to).format("YYYY-MM-DD");
+  const bFromDay = dayjs(b.from).format("YYYY-MM-DD");
+  const bToDay = dayjs(b.to).format("YYYY-MM-DD");
+  return aFromDay === bFromDay && aToDay === bToDay;
+};
+
 export function DatePickerWithRange({ className, value, onChange }: Props) {
+  const isActive = useMemo(() => {
+    return {
+      today: isEqualDateRange(value, defaultRanges.today),
+      yesterday: isEqualDateRange(value, defaultRanges.yesterday),
+      last14Days: isEqualDateRange(value, defaultRanges.last14Days),
+      lastMonth: isEqualDateRange(value, defaultRanges.lastMonth),
+      allTime: isEqualDateRange(value, defaultRanges.allTime),
+    };
+  }, [value]);
+
+  const displayDateValue = useMemo(() => {
+    if (!value) return "Select date range";
+
+    if (isActive.allTime) return "All Time";
+    if (isActive.lastMonth) return "Last Month";
+    if (isActive.last14Days) return "Last 14 Days";
+    if (isActive.yesterday) return "Yesterday";
+    if (isActive.today) return "Today";
+
+    if (!value.to) return dayjs(value.from).format("MMM DD, YYYY").toString();
+    return `${dayjs(value.from).format("MMM DD, YYYY")} - ${dayjs(
+      value.to,
+    ).format("MMM DD, YYYY")}`;
+  }, [value, isActive]);
+
+  const [calendarOpen, setCalendarOpen] = useState(false);
+
+  const updateRangeAndClose = (range: DateRange) => {
+    setCalendarOpen(false);
+    onChange?.(range);
+  };
+
   return (
     <div className={cn("grid gap-2", className)}>
-      <Popover>
+      <Popover open={calendarOpen} onOpenChange={setCalendarOpen}>
         <PopoverTrigger asChild>
           <Button
             id="date"
             variant={"secondary"}
-            className={cn("w-[260px] justify-start text-left font-normal")}
+            className={cn("max-w-[260px] justify-start text-left font-normal")}
           >
-            <CalendarIcon size={16} />
-            {value?.from ? (
-              value.to ? (
-                <>
-                  {dayjs(value.from).format("MMM DD, YYYY")} -{" "}
-                  {dayjs(value.to).format("MMM DD, YYYY")}
-                </>
-              ) : (
-                <>{dayjs(value.from, "LLL dd, y").toString()}</>
-              )
-            ) : (
-              <span>Pick your date range</span>
-            )}
+            <CalendarIcon size={16} className={"shrink-0"} />
+            {displayDateValue}
           </Button>
         </PopoverTrigger>
         <PopoverContent className="w-auto p-0" align="start" sideOffset={10}>
+          <div
+            className={
+              "px-4 py-3 flex flex-wrap gap-2 max-w-[280px] sm:max-w-none border-b border-nb-gray-800 items-center justify-between w-full"
+            }
+          >
+            <div>
+              <CalendarButton
+                label={
+                  <>
+                    <CalendarIcon size={14} className={"shrink-0"} />
+                    All Time
+                  </>
+                }
+                active={isActive.allTime}
+                onClick={() => updateRangeAndClose(defaultRanges.allTime)}
+              />
+            </div>
+            <div className={"flex gap-2 flex-wrap"}>
+              <CalendarButton
+                label={"Last Month"}
+                active={isActive.lastMonth}
+                onClick={() => updateRangeAndClose(defaultRanges.lastMonth)}
+              />
+              <CalendarButton
+                label={"Last 14 Days"}
+                active={isActive.last14Days}
+                onClick={() => updateRangeAndClose(defaultRanges.last14Days)}
+              />
+              <CalendarButton
+                label={"Yesterday"}
+                active={isActive.yesterday}
+                onClick={() => updateRangeAndClose(defaultRanges.yesterday)}
+              />
+              <CalendarButton
+                label={"Today"}
+                active={isActive.today}
+                onClick={() => updateRangeAndClose(defaultRanges.today)}
+              />
+            </div>
+          </div>
           <Calendar
             initialFocus
             mode="range"
             defaultMonth={value?.from}
             selected={value}
-            onSelect={onChange}
+            onSelect={(range) => {
+              let from =
+                range && range.from
+                  ? dayjs(range.from).startOf("day").toDate()
+                  : undefined;
+              let to =
+                range && range.to
+                  ? dayjs(range.to).endOf("day").toDate()
+                  : undefined;
+              if (!from && !to) {
+                onChange?.(undefined);
+                return;
+              }
+              onChange?.({ from, to });
+            }}
             numberOfMonths={2}
           />
         </PopoverContent>
@@ -54,3 +161,25 @@ export function DatePickerWithRange({ className, value, onChange }: Props) {
     </div>
   );
 }
+
+type CalendarButtonProps = {
+  label: string | React.ReactNode;
+  onClick: () => void;
+  active?: boolean;
+};
+
+function CalendarButton({ label, onClick, active }: CalendarButtonProps) {
+  return (
+    <button
+      className={cn(
+        "py-1.5 leading-none px-2.5 rounded-md text-center text-xs transition-all flex gap-2",
+        active
+          ? "bg-nb-gray-800 text-white"
+          : "bg-transparent text-nb-gray-300 hover:bg-nb-gray-900 hover:text-nb-gray-100",
+      )}
+      onClick={onClick}
+    >
+      {label}
+    </button>
+  );
+}

src/components/DisableDarkReader.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { useEffect } from "react";
+
+export const DisableDarkReader = () => {
+  useEffect(() => {
+    try {
+      const lock = document.createElement("meta");
+      lock.name = "darkreader-lock";
+      document.head.appendChild(lock);
+    } catch (e) {}
+  }, []);
+
+  return null;
+};

src/components/FancyToggleSwitch.tsx

@@ -31,7 +31,7 @@ export default function FancyToggleSwitch({
         value
           ? "border-nb-gray-800 bg-nb-gray-900/70"
           : "border-nb-gray-800 bg-nb-gray-900/30 hover:bg-nb-gray-900/40",
-        disabled && "opacity-30 pointer-events-none",
+        disabled && "opacity-50 pointer-events-none",
       )}
     >
       <div className={"flex justify-between gap-10  "}>

src/components/FullTooltip.tsx

@@ -4,6 +4,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@components/Tooltip";
+import { TooltipProps } from "@radix-ui/react-tooltip";
 import { cn } from "@utils/helpers";
 import React, { useState } from "react";
 
@@ -19,7 +20,9 @@ type Props = {
   align?: "end" | "center" | "start";
   side?: "top" | "bottom" | "left" | "right";
   keepOpen?: boolean;
-};
+  customOpen?: boolean;
+  customOnOpenChange?: React.Dispatch<React.SetStateAction<boolean>>;
+} & TooltipProps;
 export default function FullTooltip({
   children,
   content,
@@ -32,6 +35,8 @@ export default function FullTooltip({
   align = "center",
   side = "top",
   keepOpen = false,
+  customOpen,
+  customOnOpenChange,
 }: Props) {
   const [open, setOpen] = useState(!!keepOpen);
 
@@ -42,7 +47,11 @@ export default function FullTooltip({
 
   return !disabled ? (
     <TooltipProvider disableHoverableContent={!interactive}>
-      <Tooltip delayDuration={1} open={open} onOpenChange={handleOpen}>
+      <Tooltip
+        delayDuration={1}
+        open={customOpen || open}
+        onOpenChange={customOnOpenChange || handleOpen}
+      >
         {children && (
           <TooltipTrigger asChild={true}>
             {hoverButton ? (

src/components/Input.tsx

@@ -74,9 +74,10 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           )}
 
           <div
-            className={
-              "absolute left-0 top-0 h-full flex items-center text-xs dark:text-nb-gray-300 pl-3 leading-[0]"
-            }
+            className={cn(
+              "absolute left-0 top-0 h-full flex items-center text-xs dark:text-nb-gray-300 pl-3 leading-[0]",
+              props.disabled && "opacity-30",
+            )}
           >
             {icon}
           </div>
@@ -99,9 +100,10 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           />
 
           <div
-            className={
-              "absolute right-0 top-0 h-full flex items-center text-xs dark:text-nb-gray-300 pr-4 leading-[0]"
-            }
+            className={cn(
+              "absolute right-0 top-0 h-full flex items-center text-xs dark:text-nb-gray-300 pr-4 leading-[0] select-none",
+              props.disabled && "opacity-30",
+            )}
           >
             {customSuffix}
           </div>

src/components/Notification.tsx

@@ -16,6 +16,7 @@ export interface NotifyProps<T> {
   duration?: number;
   icon?: React.ReactNode;
   backgroundColor?: string;
+  preventSuccessToast?: boolean;
 }
 interface NotificationProps<T> extends NotifyProps<T> {
   t: Toast;
@@ -29,12 +30,15 @@ export default function Notification<T>({
   promise,
   loadingMessage,
   duration = 3500,
+  preventSuccessToast = false,
 }: NotificationProps<T>) {
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(!!promise);
 
   const [toastDuration] = useState(duration);
 
+  const [preventSuccess, setPreventSuccess] = useState(false);
+
   const closeToast = () => {
     setTimeout(() => {
       setLoading(false);
@@ -47,6 +51,7 @@ export default function Notification<T>({
     if (promise) {
       promise
         .then(() => {
+          if (preventSuccessToast) setPreventSuccess(true);
           setLoading(false);
           closeToast();
         })
@@ -66,7 +71,7 @@ export default function Notification<T>({
 
   return (
     <AnimatePresence>
-      {t.visible && (
+      {t.visible && !preventSuccess && (
         <motion.div
           initial={{ opacity: 1, y: -50 }}
           animate={{ opacity: 1, y: 0 }}

src/components/PeerGroupSelector.tsx

@@ -1,10 +1,13 @@
 import Badge from "@components/Badge";
 import { Checkbox } from "@components/Checkbox";
 import { CommandItem } from "@components/Command";
+import FullTooltip from "@components/FullTooltip";
 import { Popover, PopoverContent, PopoverTrigger } from "@components/Popover";
 import { ScrollArea } from "@components/ScrollArea";
+import { AccessControlGroupCount } from "@components/ui/AccessControlGroupCount";
 import GroupBadge from "@components/ui/GroupBadge";
-import TextWithTooltip from "@components/ui/TextWithTooltip";
+import GroupBadgeWithEditPeers from "@components/ui/GroupBadgeWithEditPeers";
+import useSortedDropdownOptions from "@hooks/useSortedDropdownOptions";
 import { IconArrowBack } from "@tabler/icons-react";
 import { cn } from "@utils/helpers";
 import { Command, CommandGroup, CommandInput, CommandList } from "cmdk";
@@ -30,6 +33,12 @@ interface MultiSelectProps {
   disabled?: boolean;
   popoverWidth?: "auto" | number;
   hideAllGroup?: boolean;
+  showPeerCount?: boolean;
+  disableInlineRemoveGroup?: boolean;
+  saveGroupAssignments?: boolean;
+  showRoutes?: boolean;
+  disabledGroups?: Group[];
+  dataCy?: string;
 }
 export function PeerGroupSelector({
   onChange,
@@ -39,8 +48,15 @@ export function PeerGroupSelector({
   disabled = false,
   popoverWidth = "auto",
   hideAllGroup = false,
-}: MultiSelectProps) {
-  const { groups, dropdownOptions, setDropdownOptions } = useGroups();
+  showPeerCount = false,
+  disableInlineRemoveGroup = false,
+  saveGroupAssignments = true,
+  showRoutes = false,
+  disabledGroups,
+  dataCy = "group-selector-dropdown",
+}: Readonly<MultiSelectProps>) {
+  const { groups, dropdownOptions, setDropdownOptions, addDropdownOptions } =
+    useGroups();
   const searchRef = React.useRef<HTMLInputElement>(null);
   const [inputRef, { width }] = useElementSize<HTMLButtonElement>();
   const [search, setSearch] = useState("");
@@ -48,9 +64,14 @@ export function PeerGroupSelector({
   // Update dropdown options when groups change
   useEffect(() => {
     if (!groups) return;
-    const sortedGroups = sortBy([...groups], "name") as Group[];
+    const sortedGroups = sortBy([...groups], "name");
 
+    const clientGroups = dropdownOptions.filter(
+      (group) => group.keepClientState,
+    );
     let uniqueGroups = unionBy(sortedGroups, dropdownOptions, "name");
+    uniqueGroups = unionBy(clientGroups, uniqueGroups, "name");
+
     uniqueGroups = hideAllGroup
       ? uniqueGroups.filter((group) => group.name !== "All")
       : uniqueGroups;
@@ -75,16 +96,10 @@ export function PeerGroupSelector({
     const groupPeers: GroupPeer[] | undefined =
       (group?.peers as GroupPeer[]) || [];
 
-    if (peer) {
-      groupPeers &&
-        groupPeers.push({ id: peer?.id as string, name: peer?.name as string });
-    }
+    if (peer) groupPeers?.push({ id: peer?.id as string, name: peer?.name });
 
     if (!group && !option) {
-      setDropdownOptions((previous) => [
-        ...previous,
-        { name: name, peers: groupPeers },
-      ]);
+      addDropdownOptions([{ name: name, peers: groupPeers }]);
     }
 
     if (max == 1 && values.length == 1) {
@@ -137,6 +152,18 @@ export function PeerGroupSelector({
     }
   }, [open, dropdownOptions]);
 
+  const onPeerAssignmentChange = (oldGroup: Group, newGroup: Group) => {
+    const filtered = values.filter((group) => group.name !== oldGroup.name);
+    const union = unionBy([newGroup], filtered, "name");
+    onChange(union);
+  };
+
+  const sortedDropdownOptions = useSortedDropdownOptions(
+    dropdownOptions,
+    values,
+    open,
+  );
+
   return (
     <Popover
       open={open}
@@ -152,12 +179,13 @@ export function PeerGroupSelector({
       <PopoverTrigger asChild>
         <button
           className={cn(
-            "min-h-[46px] w-full relative items-center",
+            "min-h-[46px] w-full relative items-center group",
             "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:pointer-events-none disabled:opacity-30 transition-all",
           )}
           disabled={disabled}
+          data-cy={dataCy}
           ref={inputRef}
         >
           <div
@@ -165,18 +193,48 @@ export function PeerGroupSelector({
               "flex items-center gap-2 border-nb-gray-700 flex-wrap h-full"
             }
           >
-            {values.map((group) => (
-              <GroupBadge
-                className={"py-[3px]"}
-                group={group}
-                key={group.name}
-                onClick={() => {
-                  if (peer != undefined && group.name == "All") return; // Prevent removing the "All" group
-                  toggleGroupByName(group.name);
-                }}
-                showX={peer != undefined ? group.name !== "All" : true}
-              />
-            ))}
+            {values.map((group) => {
+              return (
+                <div
+                  key={group.name}
+                  className={cn(
+                    showPeerCount
+                      ? "flex gap-x-1 gap-y-2 items-center justify-between w-full"
+                      : "",
+                  )}
+                >
+                  {showPeerCount ? (
+                    <GroupBadgeWithEditPeers
+                      className={"py-[3px]"}
+                      group={group}
+                      key={group.name}
+                      showNewBadge={true}
+                      onPeerAssignmentChange={onPeerAssignmentChange}
+                      useSave={saveGroupAssignments}
+                    />
+                  ) : (
+                    <GroupBadge
+                      className={"py-[3px]"}
+                      group={group}
+                      key={group.name}
+                      showNewBadge={true}
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        if (disableInlineRemoveGroup) return;
+                        if (peer != undefined && group.name == "All") return; // Prevent removing the "All" group
+                        toggleGroupByName(group.name);
+                      }}
+                      showX={
+                        peer != undefined
+                          ? group.name !== "All"
+                          : !disableInlineRemoveGroup
+                      }
+                    />
+                  )}
+                </div>
+              );
+            })}
 
             {values.length == 0 && (
               <span className={"pl-1"}>Add or select group(s)...</span>
@@ -184,7 +242,10 @@ export function PeerGroupSelector({
           </div>
 
           <div className={"pl-2"}>
-            <ChevronsUpDown size={18} className={"shrink-0"} />
+            <ChevronsUpDown
+              size={18}
+              className={"shrink-0 group-hover:text-nb-gray-300 transition-all"}
+            />
           </div>
         </button>
       </PopoverTrigger>
@@ -275,38 +336,64 @@ export function PeerGroupSelector({
                   </CommandItem>
                 )}
 
-                {dropdownOptions.slice(0, slice).map((option) => {
+                {sortedDropdownOptions.slice(0, slice).map((option) => {
                   const isSelected =
                     values.find((group) => group.name == option.name) !=
                     undefined;
-                  return (
-                    <CommandItem
-                      key={option.name}
-                      value={option.name + option.id}
-                      onSelect={() => {
-                        if (peer != undefined && option.name == "All") return; // Prevent removing the "All" group
-                        toggleGroupByName(option.name);
-                        searchRef.current?.focus();
-                      }}
-                      onClick={(e) => e.preventDefault()}
-                    >
-                      <div className={"flex items-center gap-2"}>
-                        <Badge variant={"gray-ghost"}>
-                          {folderIcon}
-                          <TextWithTooltip text={option.name} maxChars={30} />
-                        </Badge>
-                      </div>
+                  const peerCount =
+                    option.peers?.length ?? option?.peers_count ?? 0;
 
-                      <div
-                        className={
-                          "text-neutral-500 dark:text-nb-gray-300 font-medium flex items-center gap-2"
-                        }
+                  const isDisabled = disabledGroups
+                    ? disabledGroups?.findIndex((g) => g.id === option.id) !==
+                      -1
+                    : false;
+
+                  return (
+                    <FullTooltip
+                      content={
+                        <div className={"text-xs max-w-xs"}>
+                          This group is already part of the routing peer and can
+                          not be used for the access control groups.
+                        </div>
+                      }
+                      disabled={!isDisabled}
+                      className={"w-full block"}
+                      key={option.name}
+                    >
+                      <CommandItem
+                        key={option.name}
+                        value={option.name + option.id}
+                        disabled={isDisabled}
+                        onSelect={() => {
+                          if (peer != undefined && option.name == "All") return; // Prevent removing the "All" group
+                          if (isDisabled) return;
+                          toggleGroupByName(option.name);
+                          searchRef.current?.focus();
+                        }}
+                        className={cn(isDisabled && "opacity-40")}
+                        onClick={(e) => e.preventDefault()}
                       >
-                        {peerIcon}
-                        {option.peers_count || 0} Peer(s)
-                        <Checkbox checked={isSelected} />
-                      </div>
-                    </CommandItem>
+                        <div className={"flex items-center gap-2"}>
+                          <GroupBadge group={option} showNewBadge={true} />
+                        </div>
+
+                        <div className={"flex items-center gap-5"}>
+                          {option?.id && showRoutes && (
+                            <AccessControlGroupCount group_id={option.id} />
+                          )}
+
+                          <div
+                            className={
+                              "text-neutral-500 dark:text-nb-gray-300 font-medium flex items-center gap-2"
+                            }
+                          >
+                            {peerIcon}
+                            {peerCount} Peer(s)
+                            <Checkbox checked={isSelected} />
+                          </div>
+                        </div>
+                      </CommandItem>
+                    </FullTooltip>
                   );
                 })}
               </ScrollArea>

src/components/PortSelector.tsx

@@ -73,6 +73,7 @@ export function PortSelector({
             "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",
           )}
+          data-cy={"port-selector"}
           disabled={disabled}
           ref={inputRef}
         >
@@ -138,6 +139,7 @@ export function PortSelector({
                   "bg-transparent text-sm outline-none focus-visible:outline-none ring-0 focus-visible:ring-0",
                   "dark:placeholder:text-neutral-500 font-light placeholder:text-neutral-500 pl-10",
                 )}
+                data-cy={"port-input"}
                 typeof={"number"}
                 ref={searchRef}
                 value={search}

src/components/ScrollArea.tsx

@@ -16,8 +16,9 @@ const ScrollArea = React.forwardRef<
   <ScrollAreaPrimitive.Root
     ref={ref}
     className={cn(
-      "relative overflow-hidden will-change-scroll webkit-scroll",
+      "relative will-change-scroll webkit-scroll",
       className,
+      "overflow-hidden",
     )}
     {...props}
   >

src/components/Tabs.tsx

@@ -57,15 +57,15 @@ const TabsList = React.forwardRef<
     )}
     {...props}
   >
-    <ScrollArea>
-      <div className={"relative z-[1] flex flex-nowrap"}>{props.children}</div>
-      <ScrollBar orientation="horizontal" />
-    </ScrollArea>
     <span
       className={
         "absolute left-0 dark:bg-nb-gray-900 bg-nb-gray-100 w-full h-[1px] bottom-0 z-0"
       }
     />
+    <ScrollArea>
+      <div className={"relative z-[1] flex flex-nowrap"}>{props.children}</div>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
   </TabsPrimitive.List>
 ));
 TabsList.displayName = TabsPrimitive.List.displayName;

src/components/Textarea.tsx

@@ -1,11 +1,16 @@
 import Paragraph from "@components/Paragraph";
 import { cn } from "@utils/helpers";
-import { cva } from "class-variance-authority";
+import { cva, VariantProps } from "class-variance-authority";
 import * as React from "react";
 
+type TextareaVariants = VariantProps<typeof inputVariants>;
+
 export interface InputProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    TextareaVariants {
   error?: string;
+  customElement?: React.ReactNode;
+  resize?: boolean;
 }
 
 const inputVariants = cva("", {
@@ -15,6 +20,10 @@ const inputVariants = cva("", {
         "dark:bg-nb-gray-900 dark:placeholder:text-neutral-400/70 placeholder:text-neutral-500 border-neutral-200 dark:border-nb-gray-700",
         "ring-offset-neutral-200/20 dark:ring-offset-neutral-950/50 dark:focus-visible:ring-neutral-500/20 focus-visible:ring-neutral-300/10",
       ],
+      darker: [
+        "dark:bg-nb-gray-900/40 dark:placeholder:text-neutral-400/70 placeholder:text-neutral-500 border-neutral-200 dark:border-nb-gray-900",
+        "ring-offset-neutral-200/20 dark:ring-offset-neutral-950/50 dark:focus-visible:ring-neutral-500/20 focus-visible:ring-neutral-300/10",
+      ],
       error: [
         "dark:bg-red-950/30 dark:placeholder:text-red-400/70 placeholder:text-red-500 border-red-500 dark:border-red-500 text-red-500",
         "ring-offset-red-500/10 dark:ring-offset-red-500/10 dark:focus-visible:ring-red-500/10 focus-visible:ring-red-500/10",
@@ -24,7 +33,10 @@ const inputVariants = cva("", {
 });
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, InputProps>(
-  ({ className, error, ...props }, ref) => {
+  (
+    { className, variant = "default", resize, customElement, error, ...props },
+    ref,
+  ) => {
     return (
       <>
         <div className={cn("flex relative")}>
@@ -32,14 +44,20 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, InputProps>(
             ref={ref}
             {...props}
             className={cn(
-              inputVariants({ variant: error ? "error" : "default" }),
-              "flex w-full rounded-md  bg-white px-3 py-2 text-sm file:bg-transparent file:text-sm file:font-medium  focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50  ",
+              inputVariants({ variant: error ? "error" : variant }),
+              "flex w-full min-h-[42px] rounded-md bg-white px-3 pb-3 pt-2.5 text-sm file:bg-transparent file:text-sm file:font-medium  focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50  ",
               "file:border-0",
               "focus-visible:ring-2 focus-visible:ring-offset-2",
               "border",
+              "overflow-hidden",
               className,
+              resize ? "resize" : "resize-none",
             )}
+            style={{
+              height: variant === "darker" ? "42px" : "auto",
+            }}
           />
+          {customElement && customElement}
         </div>
         {error && (
           <Paragraph className={"text-xs !text-red-500 mt-2"}>

src/components/modal/Modal.tsx

@@ -31,8 +31,9 @@ const ModalOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed top-0 left-0 bottom-0 right-0 grid z-50 bg-black/30 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 dark:bg-neutral-950/70",
+      "fixed top-0 left-0 bottom-0 right-0 grid z-50  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 ",
       "mx-auto place-items-start overflow-y-auto md:py-16",
+      "bg-black/30 dark:bg-black/50 backdrop-blur-sm",
       className,
     )}
     {...props}
@@ -65,7 +66,7 @@ const ModalContent = React.forwardRef<
         <DialogPrimitive.Content
           ref={ref}
           className={cn(
-            "mx-auto relative top-0 z-50 grid w-full  border border-neutral-200 bg-white py-6 dark:shadow-lg shadow-sm duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1  data-[state=open]:slide-in-from-left-1 sm:rounded-lg md:w-full dark:border-nb-gray-900 dark:bg-nb-gray",
+            "mx-auto relative top-0 z-[52] grid w-full  border border-neutral-200 bg-white py-6 dark:shadow-lg shadow-sm duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1  data-[state=open]:slide-in-from-left-1 sm:rounded-lg md:w-full dark:border-nb-gray-900 dark:bg-nb-gray",
             className,
             maxWidthClass,
           )}
@@ -77,7 +78,7 @@ const ModalContent = React.forwardRef<
             {showClose && (
               <DialogPrimitive.Close
                 data-cy={"modal-close"}
-                className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400"
+                className="absolute right-4 z-10 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400"
               >
                 <X className="h-4 w-4" />
                 <span className="sr-only">Close</span>

src/components/skeletons/SkeletonTable.tsx

@@ -1,4 +1,5 @@
 import { cn } from "@utils/helpers";
+import * as React from "react";
 import Skeleton from "react-loading-skeleton";
 
 type Props = {
@@ -8,24 +9,10 @@ type Props = {
 export default function SkeletonTable({ withHeader = true }: Props) {
   return (
     <div className={"w-full"}>
-      {withHeader && (
-        <div
-          className={
-            "flex gap-x-4 gap-y-6 p-default flex-wrap w-full justify-between"
-          }
-        >
-          <div className={"flex gap-x-4 gap-y-6"}>
-            <Skeleton height={42} width={400} className={"rounded-md"} />
-            <Skeleton height={42} width={140} className={"rounded-md"} />
-            <Skeleton height={42} width={190} className={"rounded-md"} />
-            <Skeleton height={42} width={50} className={"rounded-md"} />
-          </div>
-          <Skeleton height={42} width={120} className={"rounded-md"} />
-        </div>
-      )}
+      {withHeader && <SkeletonTableHeader />}
       <Skeleton
         height={48}
-        containerClassName={"flex-1 "}
+        containerClassName={"flex"}
         className={cn(withHeader && "mt-8")}
       />
       <div>
@@ -60,3 +47,28 @@ export function TableSkeletonRow({ odd = false }: RowProps) {
     </div>
   );
 }
+
+type SkeletonTableHeaderProps = {
+  className?: string;
+};
+
+export const SkeletonTableHeader = ({
+  className,
+}: SkeletonTableHeaderProps) => {
+  return (
+    <div
+      className={cn(
+        "flex gap-x-4 gap-y-6 p-default flex-wrap w-full justify-between",
+        className,
+      )}
+    >
+      <div className={"flex gap-x-4 gap-y-6"}>
+        <Skeleton height={42} width={400} className={"rounded-md"} />
+        <Skeleton height={42} width={140} className={"rounded-md"} />
+        <Skeleton height={42} width={190} className={"rounded-md"} />
+        <Skeleton height={42} width={50} className={"rounded-md"} />
+      </div>
+      <Skeleton height={42} width={120} className={"rounded-md"} />
+    </div>
+  );
+};

src/components/table/DataTable.tsx

@@ -11,6 +11,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
+  TableWrapper,
 } from "@components/table/Table";
 import NoResults from "@components/ui/NoResults";
 import {
@@ -30,6 +31,7 @@ import {
   PaginationState,
   Row,
   RowSelectionState,
+  SortingFn,
   SortingState,
   Table as TanStackTable,
   useReactTable,
@@ -54,6 +56,9 @@ declare module "@tanstack/table-core" {
   interface FilterMeta {
     itemRank: RankingInfo;
   }
+  interface SortingFns {
+    checkbox: SortingFn<unknown>;
+  }
 }
 
 const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
@@ -100,6 +105,20 @@ const arrIncludesSomeExact: FilterFn<any> = (
   return value.some((val) => val === rowValue);
 };
 
+const checkboxSort: SortingFn<any> = (rowA, rowB, columnId) => {
+  const valueA =
+    columnId === "select" ? rowA.getIsSelected() : rowA.getValue(columnId);
+  const valueB =
+    columnId === "select" ? rowB.getIsSelected() : rowB.getValue(columnId);
+  if (valueA && !valueB) {
+    return -1;
+  }
+  if (!valueA && valueB) {
+    return 1;
+  }
+  return 0;
+};
+
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
   data: TData[] | undefined;
@@ -125,7 +144,7 @@ interface DataTableProps<TData, TValue> {
   wrapperClassName?: string;
   tableClassName?: string;
   searchClassName?: string;
-  showSearch?: boolean;
+  showSearchAndFilters?: boolean;
   rightSide?: (table: TanStackTable<TData>) => React.ReactNode;
   manualPagination?: boolean;
   showHeader?: boolean;
@@ -134,6 +153,16 @@ interface DataTableProps<TData, TValue> {
   useRowId?: boolean;
   headingTarget?: HTMLHeadingElement | null;
   showResetFilterButton?: boolean;
+  onFilterReset?: () => void;
+  wrapperComponent?: React.ElementType;
+  wrapperProps?: any;
+  keepStateInLocalStorage?: boolean;
+  paginationPaddingClassName?: string;
+  tableCellClassName?: string;
+  initialSelectionState?: RowSelectionState;
+  initialPageSize?: number;
+  uniqueKey?: string;
+  resetRowSelectionOnSearch?: boolean;
 }
 
 export function DataTable<TData, TValue>(props: DataTableProps<TData, TValue>) {
@@ -173,22 +202,41 @@ export function DataTableContent<TData, TValue>({
   useRowId,
   headingTarget,
   showResetFilterButton = true,
+  onFilterReset,
+  showSearchAndFilters = true,
+  wrapperProps,
+  wrapperComponent,
+  keepStateInLocalStorage = true,
+  paginationPaddingClassName,
+  tableCellClassName,
+  initialPageSize = 10,
+  uniqueKey,
+  resetRowSelectionOnSearch = true,
 }: DataTableProps<TData, TValue>) {
   const path = usePathname();
+
   const [columnFilters, setColumnFilters] = useLocalStorage<ColumnFiltersState>(
-    "netbird-table-columns" + path,
+    `netbird-table-columns${uniqueKey ? "/" + (uniqueKey as string) : path}`,
     [],
+    keepStateInLocalStorage,
   );
   const [globalSearch, setGlobalSearch] = useLocalStorage(
-    "netbird-table-search" + path,
+    `netbird-table-search${uniqueKey ? "/" + (uniqueKey as string) : path}`,
     "",
+    keepStateInLocalStorage,
   );
 
   const [paginationState, setPaginationState] =
-    useLocalStorage<PaginationState>("netbird-table-pagination" + path, {
-      pageIndex: 0,
-      pageSize: 10,
-    });
+    useLocalStorage<PaginationState>(
+      `netbird-table-pagination${
+        uniqueKey ? "/" + (uniqueKey as string) : path
+      }`,
+      {
+        pageIndex: 0,
+        pageSize: 10,
+      },
+      keepStateInLocalStorage,
+    );
 
   const hasInitialData = !!(data && data.length > 0);
 
@@ -216,9 +264,12 @@ export function DataTableContent<TData, TValue>({
     initialState: {
       pagination: {
         pageIndex: 0,
-        pageSize: 10,
+        pageSize: initialPageSize || 10,
       },
     },
+    sortingFns: {
+      checkbox: checkboxSort,
+    },
     getRowId: useRowId ? (row) => row.id : undefined,
     onRowSelectionChange: setRowSelection,
     onSortingChange: setSorting,
@@ -250,12 +301,18 @@ export function DataTableContent<TData, TValue>({
     setColumnFilters([]);
     setGlobalSearch("");
     setRowSelection?.({});
+    onFilterReset?.();
   };
 
   return (
     <div className={cn("relative table-fixed-scroll", className)}>
-      {!minimal && (
-        <div className={"flex gap-x-4 gap-y-6 p-default flex-wrap"}>
+      {showSearchAndFilters && (
+        <div
+          className={cn(
+            "flex gap-x-4 gap-y-6 flex-wrap",
+            !minimal && "p-default",
+          )}
+        >
           <DataTableGlobalSearch
             className={searchClassName}
             disabled={!hasInitialData}
@@ -263,7 +320,7 @@ export function DataTableContent<TData, TValue>({
             setGlobalSearch={(val) => {
               table.setPageIndex(0);
               setGlobalSearch(val);
-              setRowSelection?.({});
+              resetRowSelectionOnSearch && setRowSelection?.({});
             }}
             placeholder={searchPlaceholder}
           />
@@ -277,164 +334,179 @@ export function DataTableContent<TData, TValue>({
           </div>
         </div>
       )}
+
       {aboveTable && aboveTable(table)}
-      {!hasInitialData && !isLoading && getStartedCard}
+
+      {!hasInitialData && !isLoading && (
+        <TableWrapper
+          wrapperComponent={wrapperComponent}
+          wrapperProps={wrapperProps}
+        >
+          {getStartedCard}
+        </TableWrapper>
+      )}
 
       {hasInitialData && !isLoading && (
-        <TableComponent
-          className={cn("relative mt-8", tableClassName)}
-          minimal={minimal}
+        <TableWrapper
+          wrapperComponent={wrapperComponent}
+          wrapperProps={wrapperProps}
         >
-          {showHeader && as == "table" && (
-            <TableHeaderComponent minimal={minimal}>
-              {table.getHeaderGroups().map((headerGroup) => (
-                <TableRowComponent key={headerGroup.id} minimal={minimal}>
-                  {headerGroup.headers.map((header) => {
-                    return (
-                      <TableHead
-                        key={header.id}
-                        minimal={minimal}
-                        inset={inset}
-                      >
-                        {header.isPlaceholder
-                          ? null
-                          : flexRender(
-                              header.column.columnDef.header,
-                              header.getContext(),
-                            )}
-                      </TableHead>
-                    );
-                  })}
-                </TableRowComponent>
-              ))}
-            </TableHeaderComponent>
-          )}
-
-          <Accordion
-            asChild={true}
-            type={"multiple"}
-            value={accordion}
-            onValueChange={setAccordion}
+          <TableComponent
+            className={cn("relative mt-8", tableClassName)}
+            minimal={minimal}
           >
-            <TableBodyComponent
-              className={cn(
-                "relative",
-                data == undefined && "blur-sm",
-                wrapperClassName,
-              )}
-            >
-              {table.getRowModel().rows?.length ? (
-                table.getRowModel().rows.map((row) => (
-                  <AccordionItem
-                    value={row.original.id}
-                    asChild={true}
-                    key={row.original.id}
-                  >
-                    <>
-                      <TableRowComponent
-                        minimal={minimal}
-                        data-row-id={row.original.id}
-                        className={cn(
-                          (onRowClick || renderExpandedRow) &&
-                            "cursor-pointer relative group/accordion",
-                          rowClassName,
-                        )}
-                        data-state={row.getIsSelected() && "selected"}
-                        data-accordion={
-                          accordion?.includes(row.original.id)
-                            ? "opened"
-                            : "closed"
-                        }
-                        onClick={(e) => {
-                          if (renderExpandedRow) {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            setAccordion((prev) => {
-                              if (prev?.includes(row.original.id)) {
-                                return prev.filter(
-                                  (item) => item !== row.original.id,
-                                );
-                              } else {
-                                return [...(prev ?? []), row.original.id];
-                              }
-                            });
-                          }
-                        }}
-                      >
-                        <>
-                          {row.getVisibleCells().map((cell) => (
-                            <TableCellComponent
-                              key={cell.id}
-                              className={"relative"}
-                              minimal={minimal}
-                              inset={inset}
-                              onClick={() => {
-                                onRowClick && onRowClick(row, cell.column.id);
-                              }}
-                            >
-                              <div
-                                className={
-                                  "absolute left-0 top-0 w-full h-full z-0"
-                                }
-                              ></div>
-                              <div className={"relative z-[1]"}>
-                                {flexRender(
-                                  cell.column.columnDef.cell,
-                                  cell.getContext(),
-                                )}
-                              </div>
-                            </TableCellComponent>
-                          ))}
-                        </>
-                      </TableRowComponent>
+            {showHeader && as == "table" && (
+              <TableHeaderComponent minimal={minimal}>
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <TableRowComponent key={headerGroup.id} minimal={minimal}>
+                    {headerGroup.headers.map((header) => {
+                      return (
+                        <TableHead
+                          key={header.id}
+                          minimal={minimal}
+                          inset={inset}
+                        >
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                                header.column.columnDef.header,
+                                header.getContext(),
+                              )}
+                        </TableHead>
+                      );
+                    })}
+                  </TableRowComponent>
+                ))}
+              </TableHeaderComponent>
+            )}
 
-                      {renderExpandedRow && (
-                        <AccordionContent asChild={true}>
-                          <TableRowComponent
-                            data-row-id={row.id + "-expanded-row"}
-                            key={row.id + "-expanded-row"}
-                            minimal={minimal}
-                            className={cn(
-                              onRowClick && "cursor-pointer relative",
-                              rowClassName,
-                            )}
-                            data-state={row.getIsSelected() && "selected"}
-                          >
-                            <TableDataUnstyledComponent
-                              className={"w-full"}
-                              colSpan={row.getVisibleCells().length}
+            <Accordion
+              asChild={true}
+              type={"multiple"}
+              value={accordion}
+              onValueChange={setAccordion}
+            >
+              <TableBodyComponent
+                className={cn(
+                  "relative",
+                  data == undefined && "blur-sm",
+                  wrapperClassName,
+                )}
+              >
+                {table.getRowModel().rows?.length ? (
+                  table.getRowModel().rows.map((row) => (
+                    <AccordionItem
+                      value={row.original.id}
+                      asChild={true}
+                      key={row.original.id}
+                    >
+                      <>
+                        <TableRowComponent
+                          minimal={minimal}
+                          data-row-id={row.original.id}
+                          className={cn(
+                            (onRowClick || renderExpandedRow) &&
+                              "cursor-pointer relative group/accordion",
+                            rowClassName,
+                          )}
+                          data-state={row.getIsSelected() && "selected"}
+                          data-accordion={
+                            accordion?.includes(row.original.id)
+                              ? "opened"
+                              : "closed"
+                          }
+                          onClick={(e) => {
+                            if (renderExpandedRow) {
+                              e.preventDefault();
+                              e.stopPropagation();
+                              setAccordion((prev) => {
+                                if (prev?.includes(row.original.id)) {
+                                  return prev.filter(
+                                    (item) => item !== row.original.id,
+                                  );
+                                } else {
+                                  return [...(prev ?? []), row.original.id];
+                                }
+                              });
+                            }
+                          }}
+                        >
+                          <>
+                            {row.getVisibleCells().map((cell) => (
+                              <TableCellComponent
+                                key={cell.id}
+                                className={cn("relative", tableCellClassName)}
+                                minimal={minimal}
+                                inset={inset}
+                                onClick={() => {
+                                  onRowClick && onRowClick(row, cell.column.id);
+                                }}
+                              >
+                                <div
+                                  className={
+                                    "absolute left-0 top-0 w-full h-full z-0"
+                                  }
+                                ></div>
+                                <div className={"relative z-[1]"}>
+                                  {flexRender(
+                                    cell.column.columnDef.cell,
+                                    cell.getContext(),
+                                  )}
+                                </div>
+                              </TableCellComponent>
+                            ))}
+                          </>
+                        </TableRowComponent>
+
+                        {renderExpandedRow && (
+                          <AccordionContent asChild={true}>
+                            <TableRowComponent
+                              data-row-id={row.id + "-expanded-row"}
+                              key={row.id + "-expanded-row"}
+                              minimal={minimal}
+                              className={cn(
+                                onRowClick && "cursor-pointer relative",
+                                rowClassName,
+                              )}
+                              data-state={row.getIsSelected() && "selected"}
                             >
-                              {renderExpandedRow(row.original)}
-                            </TableDataUnstyledComponent>
-                          </TableRowComponent>
-                        </AccordionContent>
-                      )}
-                    </>
-                  </AccordionItem>
-                ))
-              ) : (
-                <TableRowUnstyledComponent>
-                  <TableCellComponent
-                    colSpan={columns.length}
-                    className="!py-4 !px-0 text-center"
-                  >
-                    <NoResults />
-                  </TableCellComponent>
-                </TableRowUnstyledComponent>
-              )}
-            </TableBodyComponent>
-          </Accordion>
-        </TableComponent>
+                              <TableDataUnstyledComponent
+                                className={"w-full"}
+                                colSpan={row.getVisibleCells().length}
+                              >
+                                {renderExpandedRow(row.original)}
+                              </TableDataUnstyledComponent>
+                            </TableRowComponent>
+                          </AccordionContent>
+                        )}
+                      </>
+                    </AccordionItem>
+                  ))
+                ) : (
+                  <TableRowUnstyledComponent>
+                    <TableCellComponent
+                      colSpan={columns.length}
+                      className="!py-0 !px-0 text-center"
+                    >
+                      <NoResults className={"py-4"} />
+                    </TableCellComponent>
+                  </TableRowUnstyledComponent>
+                )}
+              </TableBodyComponent>
+            </Accordion>
+          </TableComponent>
+        </TableWrapper>
       )}
 
       <div className={paginationClassName}>
-        <DataTablePagination table={table} text={text} />
+        <DataTablePagination
+          table={table}
+          text={text}
+          paginationPadding={paginationPaddingClassName}
+        />
       </div>
-      <DataTableHeadingPortal
-        table={table}
-        headingTarget={headingTarget}
-        text={text}
-      />
+
+      <DataTableHeadingPortal table={table} headingTarget={headingTarget} />
     </div>
   );
 }

src/components/table/DataTableHeadingPortal.tsx

@@ -6,24 +6,20 @@ import { createPortal } from "react-dom";
 type Props<TData> = {
   table: Table<TData> | null;
   headingTarget?: HTMLHeadingElement | null;
-  text: string;
 };
+
 export const DataTableHeadingPortal = function <TData>({
   table,
   headingTarget,
-  text = "Items",
 }: Props<TData>) {
   const hasMounted = useRef(false);
 
   if (!headingTarget) return;
-
-  if (!hasMounted.current) {
-    headingTarget.innerHTML = "";
-    hasMounted.current = true;
-  }
+  if (!hasMounted.current) hasMounted.current = true;
 
   const totalItems = table?.getPreFilteredRowModel().rows.length;
   const filteredItems = table?.getFilteredRowModel().rows.length;
+  if (!totalItems || totalItems == 1) return;
 
   const hasAnyFiltersActive =
     table &&
@@ -32,14 +28,16 @@ export const DataTableHeadingPortal = function <TData>({
       table?.getState().globalFilter === ""
     );
 
+  const portalContainer = document.createElement("span");
+  headingTarget.prepend(portalContainer);
+
   return createPortal(
     <Heading
-      text={text}
       hasAnyFilterActive={hasAnyFiltersActive}
       totalItems={totalItems}
       filteredItems={filteredItems}
     />,
-    headingTarget,
+    portalContainer,
   );
 };
 
@@ -47,27 +45,20 @@ type HeadingProps = {
   hasAnyFilterActive: boolean | null;
   filteredItems?: number;
   totalItems?: number;
-  text: string;
 };
 
 const Heading = ({
   hasAnyFilterActive,
   filteredItems,
   totalItems,
-  text,
 }: HeadingProps) => {
-  if (!totalItems || totalItems == 1) {
-    return text;
-  }
-
   if (hasAnyFilterActive) {
     return (
       <>
         <span className={"text-netbird"}>{filteredItems}</span> of {totalItems}{" "}
-        {text}
       </>
     );
   }
 
-  return `${totalItems} ${text}`;
+  return `${totalItems} `;
 };

src/components/table/DataTablePagination.tsx

@@ -1,5 +1,6 @@
 import ButtonGroup from "@components/ButtonGroup";
 import { Table } from "@tanstack/react-table";
+import { cn } from "@utils/helpers";
 import {
   ChevronLeft,
   ChevronRight,
@@ -10,11 +11,13 @@ import {
 interface DataTablePaginationProps<TData> {
   table: Table<TData>;
   text?: string;
+  paginationPadding?: string;
 }
 
 export function DataTablePagination<TData>({
   table,
   text = "rows",
+  paginationPadding = "px-8 py-8",
 }: DataTablePaginationProps<TData>) {
   const allRows = table.getFilteredRowModel().rows.length;
   const rowsPerPage = table.getState().pagination.pageSize;
@@ -25,8 +28,8 @@ export function DataTablePagination<TData>({
   const pageCount = table.getPageCount();
 
   return pageCount > 1 ? (
-    <div className="flex items-center justify-between px-8 py-8">
-      <div className=" text-nb-gray-400">
+    <div className={cn("flex items-center justify-between", paginationPadding)}>
+      <div className="text-nb-gray-400">
         Showing{" "}
         <span className={"font-medium text-white"}>
           {showingFrom} to {showingTo}

src/components/table/Table.tsx

@@ -1,6 +1,25 @@
 import { cn } from "@utils/helpers";
 import * as React from "react";
 
+type TableWrapperProps = {
+  wrapperComponent?: React.ElementType;
+  wrapperProps?: any;
+  children: React.ReactNode;
+};
+
+const TableWrapper = ({
+  wrapperComponent,
+  children,
+  wrapperProps,
+}: TableWrapperProps) => {
+  if (!wrapperComponent) return <>{children}</>;
+  return React.createElement(
+    wrapperComponent,
+    wrapperProps ? wrapperProps : {},
+    children,
+  );
+};
+
 type TableProps = {
   minimal?: boolean;
 };
@@ -164,4 +183,5 @@ export {
   TableHead,
   TableHeader,
   TableRow,
+  TableWrapper,
 };

src/components/ui/AccessControlGroupCount.tsx

@@ -0,0 +1,67 @@
+import FullTooltip from "@components/FullTooltip";
+import useFetchApi from "@utils/api";
+import { uniqBy } from "lodash";
+import { RouteIcon } from "lucide-react";
+import * as React from "react";
+import { useMemo } from "react";
+import Skeleton from "react-loading-skeleton";
+import { Route } from "@/interfaces/Route";
+
+type Props = {
+  group_id: string;
+};
+export const AccessControlGroupCount = ({ group_id }: Props) => {
+  const { data, isLoading } = useFetchApi<Route[]>("/routes");
+
+  const routes = useMemo(() => {
+    const routes = data?.filter((route) => {
+      const groups = route?.access_control_groups;
+      if (!groups) return false;
+      return groups.includes(group_id);
+    });
+    return uniqBy(routes, "network_id");
+  }, [data, group_id]);
+
+  if (isLoading) return <Skeleton width={100} height={16} />;
+
+  return routes && routes.length > 0 ? (
+    <FullTooltip
+      content={
+        <div className={"text-xs max-w-lg w-full gap-2"}>
+          {routes.map((route) => {
+            const domains = route?.domains;
+
+            return (
+              <div
+                key={route.id}
+                className={
+                  "w-full gap-10 flex text-nb-gray-300/80 justify-between"
+                }
+              >
+                <span className={"flex items-center gap-2 text-nb-gray-200"}>
+                  <RouteIcon size={12} /> {route.network_id}
+                </span>
+                {domains ? (
+                  <span className={""}>{domains.join(", ")}</span>
+                ) : (
+                  <span className={"font-mono text-[10px]"}>
+                    {route.network}
+                  </span>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      }
+    >
+      <div
+        className={
+          "text-nb-gray-300 font-medium flex items-center gap-2 hover:text-nb-gray-100 transition-all"
+        }
+      >
+        <RouteIcon size={14} className={"shrink-0"} />
+        {routes.length} Route(s)
+      </div>
+    </FullTooltip>
+  ) : null;
+};

src/components/ui/GroupBadge.tsx

@@ -7,10 +7,11 @@ import { Group } from "@/interfaces/Group";
 
 type Props = {
   group: Group;
-  onClick?: () => void;
+  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
   showX?: boolean;
   children?: React.ReactNode;
   className?: string;
+  showNewBadge?: boolean;
 };
 export default function GroupBadge({
   onClick,
@@ -18,25 +19,41 @@ export default function GroupBadge({
   showX = false,
   children,
   className,
+  showNewBadge = false,
 }: Props) {
+  const isNew = !group?.id;
+
   return (
     <Badge
-      key={group.id}
+      key={group.id || group.name}
       useHover={true}
       variant={"gray-ghost"}
       className={cn("transition-all group whitespace-nowrap", className)}
       onClick={(e) => {
         e.preventDefault();
-        onClick?.();
+        onClick?.(e);
       }}
     >
       <FolderGit2 size={12} className={"shrink-0"} />
+
       <TextWithTooltip text={group?.name || ""} maxChars={20} />
       {children}
+      {isNew && showNewBadge && (
+        <span
+          className={
+            "text-[7px] relative top-[.25px] leading-[0] bg-green-900 border border-green-500/20 py-1.5 px-1 rounded-[3px] text-green-400"
+          }
+        >
+          NEW
+        </span>
+      )}
+
       {showX && (
         <XIcon
           size={12}
-          className={"cursor-pointer group-hover:text-white shrink-0"}
+          className={
+            "cursor-pointer group-hover:text-nb-gray-100 transition-all shrink-0"
+          }
         />
       )}
     </Badge>

src/components/ui/GroupBadgeWithEditPeers.tsx

@@ -0,0 +1,124 @@
+import Badge from "@components/Badge";
+import TextWithTooltip from "@components/ui/TextWithTooltip";
+import { cn } from "@utils/helpers";
+import { EyeIcon, FolderGit2, SquarePen } from "lucide-react";
+import * as React from "react";
+import { useMemo, useState } from "react";
+import { useGroups } from "@/contexts/GroupsProvider";
+import { Group } from "@/interfaces/Group";
+import { AssignPeerToGroupModal } from "@/modules/groups/AssignPeerToGroupModal";
+
+type Props = {
+  group: Group;
+  className?: string;
+  showNewBadge?: boolean;
+  showPeerCount?: boolean;
+  useSave?: boolean;
+  onPeerAssignmentChange?: (oldGroup: Group, newGroup: Group) => void;
+};
+
+export default function GroupBadgeWithEditPeers({
+  group,
+  className,
+  showNewBadge = false,
+  useSave = true,
+  onPeerAssignmentChange,
+}: Readonly<Props>) {
+  const isNew = !group?.id;
+  const [editGroupPeersModal, setEditGroupPeersModal] = useState(false);
+  const { dropdownOptions, addDropdownOptions, updateGroupDropdown } =
+    useGroups();
+
+  const currentGroup = useMemo(() => {
+    return dropdownOptions?.find((g) => g.name === group?.name);
+  }, [group, dropdownOptions]);
+
+  const peerCount =
+    currentGroup?.peers?.length ?? currentGroup?.peers_count ?? 0;
+
+  const updateGroupOptions = (g: Group) => {
+    updateGroupDropdown(group.name, g);
+    onPeerAssignmentChange?.(group, g);
+  };
+
+  const isAllGroup = currentGroup?.name === "All";
+
+  return (
+    <>
+      {currentGroup && editGroupPeersModal && (
+        <AssignPeerToGroupModal
+          useSave={useSave}
+          group={currentGroup}
+          onUpdate={(g) => updateGroupOptions(g)}
+          open={editGroupPeersModal}
+          setOpen={setEditGroupPeersModal}
+        />
+      )}
+
+      <Badge
+        key={group.id ?? group.name}
+        useHover={true}
+        variant={"gray-ghost"}
+        className={cn(
+          "transition-all group group/badge whitespace-nowrap overflow-hidden",
+          className,
+        )}
+        onClick={(e) => {
+          if (!currentGroup) return;
+          e.stopPropagation();
+          setEditGroupPeersModal(true);
+        }}
+      >
+        <div
+          className={
+            "flex flex-col items-start justify-start pt-[0px] pb-[2px]"
+          }
+        >
+          <div
+            className={
+              "text-nb-gray-200 flex gap-1.5 items-center z-10 relative"
+            }
+          >
+            <FolderGit2 size={12} className={"shrink-0"} />
+            <TextWithTooltip text={group?.name || ""} maxChars={20} />
+            {isNew && showNewBadge && (
+              <span
+                className={
+                  "text-[7px] relative -top-[0px] leading-[0] bg-green-900 border border-green-500/20 py-1.5 px-1 rounded-[3px] text-green-400"
+                }
+              >
+                NEW
+              </span>
+            )}
+          </div>
+          <span
+            className={
+              "text-[0.7rem] relative leading-none mt-[2px] text-nb-gray-300 mb-[1px] font-normal flex gap-1.5 items-center group-hover/badge:text-netbird transition-all"
+            }
+          >
+            <span>
+              <span
+                className={
+                  "font-medium text-nb-gray-200 group-hover/badge:text-netbird transition-all"
+                }
+              >
+                {peerCount}
+              </span>{" "}
+              Peers{" "}
+            </span>
+            {isAllGroup ? (
+              <EyeIcon size={11} className={"shrink-0"} />
+            ) : (
+              <SquarePen
+                size={11}
+                className={
+                  "shrink-0 transition-all relative z-10 group-hover/badge:text-netbird text-netbird-400/80"
+                }
+              />
+            )}
+          </span>
+        </div>
+      </Badge>
+    </>
+  );
+}

src/components/ui/InputDomain.tsx

@@ -70,6 +70,7 @@ export default function InputDomain({
           customPrefix={<GlobeIcon size={15} />}
           placeholder={"e.g., example.com"}
           maxWidthClass={"w-full"}
+          data-cy={"domain-input"}
           value={name}
           error={domainError}
           onChange={handleNameChange}

src/components/ui/NoResults.tsx

@@ -1,4 +1,5 @@
 import Paragraph from "@components/Paragraph";
+import { cn } from "@utils/helpers";
 import { FilterX } from "lucide-react";
 import React from "react";
 import Skeleton from "react-loading-skeleton";
@@ -8,23 +9,25 @@ type Props = {
   title?: string;
   description?: string;
   children?: React.ReactNode;
+  className?: string;
 };
 export default function NoResults({
   icon,
   title = "Could not find any results",
   description = "We couldn't find any results. Please try a different search term or change your filters.",
   children,
+  className,
 }: Props) {
   return (
-    <div className={"relative overflow-hidden"}>
+    <div className={cn("relative overflow-hidden", className)}>
       <div
         className={
-          "absolute z-20 bg-gradient-to-b dark:to-nb-gray-950 dark:from-nb-gray-950/70 w-full h-full overflow-hidden"
+          "absolute z-20 bg-gradient-to-b dark:to-nb-gray-950 dark:from-nb-gray-950/70 w-full h-full overflow-hidden top-0"
         }
       ></div>
       <div
         className={
-          "absolute w-full h-full left-0 top-0 z-10 px-5 overflow-hidden"
+          "absolute w-full h-full left-0 top-0 z-10 px-5 overflow-hidden py-4"
         }
       >
         <div className={"flex flex-col gap-2"}>
@@ -33,7 +36,7 @@ export default function NoResults({
           <Skeleton className={"w-full"} height={70} duration={4} />
         </div>
       </div>
-      <div className={"max-w-md mx-auto relative z-20 py-6"}>
+      <div className={cn("max-w-md mx-auto relative z-20 py-6")}>
         <div
           className={
             "mx-auto w-14 h-14 bg-nb-gray-930 flex items-center justify-center mb-3 rounded-md"

src/components/ui/NoResultsCard.tsx

@@ -0,0 +1,59 @@
+import Card from "@components/Card";
+import Paragraph from "@components/Paragraph";
+import { FilterX } from "lucide-react";
+import React from "react";
+import Skeleton from "react-loading-skeleton";
+
+type Props = {
+  icon?: React.ReactNode;
+  title?: string;
+  description?: string;
+  children?: React.ReactNode;
+};
+export default function NoResultsCard({
+  icon,
+  title = "Could not find any results",
+  description = "We couldn't find any results. Please try a different search term or change your filters.",
+  children,
+}: Readonly<Props>) {
+  return (
+    <div className={"px-8 mt-8"}>
+      <Card className={"w-full relative overflow-hidden"}>
+        <div
+          className={
+            "absolute z-20 bg-gradient-to-b  dark:to-nb-gray-950 dark:from-nb-gray-950/40 w-full h-full"
+          }
+        ></div>
+        <div
+          className={
+            "absolute w-full h-full left-0 top-0 z-10 px-5 py-3 overflow-hidden"
+          }
+        >
+          <div className={"flex flex-col gap-2"}>
+            <Skeleton className={"w-full"} height={70} duration={4} />
+            <Skeleton className={"w-full"} height={70} duration={4} />
+            <Skeleton className={"w-full"} height={70} duration={4} />
+            <Skeleton className={"w-full"} height={70} duration={4} />
+            <Skeleton className={"w-full"} height={70} duration={4} />
+          </div>
+        </div>
+        <div className={"max-w-md mx-auto relative z-20 py-8"}>
+          <div
+            className={
+              "mx-auto w-10 h-10 bg-nb-gray-930 flex items-center justify-center mb-3 rounded-md border border-nb-gray-800"
+            }
+          >
+            {icon || <FilterX size={24} />}
+          </div>
+          <div className={"text-center"}>
+            <h1 className={"text-2xl font-medium max-w-lg mx-auto"}>{title}</h1>
+            <Paragraph className={"justify-center my-2 !text-nb-gray-400"}>
+              {description}
+            </Paragraph>
+            {children}
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}

src/components/ui/PeerBadge.tsx

@@ -1,15 +1,84 @@
-import Badge from "@components/Badge";
-import { MonitorSmartphoneIcon } from "lucide-react";
+import Badge, { BadgeVariants } from "@components/Badge";
+import { cn } from "@utils/helpers";
+import { EyeIcon, MonitorSmartphoneIcon, SquarePen } from "lucide-react";
 import * as React from "react";
+import { useMemo, useState } from "react";
+import { useGroups } from "@/contexts/GroupsProvider";
+import { Group } from "@/interfaces/Group";
+import { AssignPeerToGroupModal } from "@/modules/groups/AssignPeerToGroupModal";
 
 type Props = {
   children?: React.ReactNode;
-} & React.HTMLAttributes<HTMLDivElement>;
-export default function PeerBadge({ children }: Props) {
+  group?: Group;
+  useSave?: boolean;
+  onAssignmentChange?: (group: Group) => void;
+} & React.HTMLAttributes<HTMLDivElement> &
+  BadgeVariants;
+export default function PeerBadge({
+  children,
+  group,
+  variant = "gray",
+  className,
+  useSave = true,
+  onAssignmentChange,
+}: Props) {
+  const [editGroupPeersModal, setEditGroupPeersModal] = useState(false);
+
+  const { dropdownOptions, addDropdownOptions } = useGroups();
+
+  const currentGroup = useMemo(() => {
+    return dropdownOptions?.find((g) => g.name === group?.name);
+  }, [group, dropdownOptions]);
+
+  const peerCount = useMemo(() => {
+    let peerCount = currentGroup?.peers_count ?? 0;
+    let countedPeers = currentGroup?.peers?.length ?? 0;
+    if (peerCount !== countedPeers) {
+      peerCount = countedPeers;
+    }
+    return peerCount;
+  }, [currentGroup]);
+
+  const updateGroupOptions = (g: Group) => {
+    addDropdownOptions([g]);
+    onAssignmentChange && onAssignmentChange(g);
+  };
+
   return (
-    <Badge variant={"gray"} className={"px-3 gap-2 whitespace-nowrap"}>
-      <MonitorSmartphoneIcon size={12} />
-      {children}
-    </Badge>
+    <>
+      {currentGroup && editGroupPeersModal && (
+        <AssignPeerToGroupModal
+          useSave={useSave}
+          group={currentGroup}
+          onUpdate={(g) => updateGroupOptions(g)}
+          open={editGroupPeersModal}
+          setOpen={setEditGroupPeersModal}
+        />
+      )}
+
+      <Badge
+        variant={variant}
+        className={cn(className, "px-3 gap-2 whitespace-nowrap")}
+        onClick={(e) => {
+          if (!currentGroup) return;
+          e.stopPropagation();
+          setEditGroupPeersModal(true);
+        }}
+        useHover={!!currentGroup}
+      >
+        {!currentGroup && <MonitorSmartphoneIcon size={12} />}
+        {currentGroup ? <>{peerCount} Peer(s)</> : children}
+
+        {currentGroup && (
+          <>
+            {currentGroup.name == "All" ? (
+              <EyeIcon size={12} />
+            ) : (
+              <SquarePen size={12} />
+            )}
+          </>
+        )}
+      </Badge>
+    </>
   );
 }

src/components/ui/PolicyDirection.tsx

@@ -1,12 +1,13 @@
 import Badge from "@components/Badge";
-import {cn} from "@utils/helpers";
-import React, {useEffect} from "react";
+import { cn } from "@utils/helpers";
+import React, { useEffect } from "react";
 import LongArrowLeftIcon from "@/assets/icons/LongArrowLeftIcon";
 
 type Props = {
   disabled?: boolean;
   value: Direction;
   onChange: (value: Direction) => void;
+  className?: string;
 };
 
 export type Direction = "bi" | "in" | "out";
@@ -15,6 +16,7 @@ export default function PolicyDirection({
   disabled = false,
   value,
   onChange,
+  className,
 }: Props) {
   const toggleIn = () => {
     if (value == "in") {
@@ -40,6 +42,14 @@ export default function PolicyDirection({
     }
   };
 
+  const toggleDirection = () => {
+    if (value == "bi") {
+      onChange("in");
+    } else {
+      onChange("bi");
+    }
+  };
+
   useEffect(() => {
     if (disabled) onChange("bi");
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -48,15 +58,17 @@ export default function PolicyDirection({
   return (
     <div
       className={cn(
-        "flex flex-col gap-2 mt-[23px] cursor-pointer",
+        "flex flex-col gap-2 mt-[23px] cursor-pointer select-none",
         disabled && "opacity-50 pointer-events-none",
+        "hover:opacity-80 transition-all",
+        className,
       )}
+      onClick={toggleDirection}
+      data-cy={"policy-direction"}
     >
       <Badge
         variant={value == "bi" ? "green" : value == "in" ? "blueDark" : "gray"}
         className={"px-4 py-1"}
-        onClick={toggleIn}
-        useHover={true}
       >
         <LongArrowLeftIcon
           size={40}
@@ -72,10 +84,8 @@ export default function PolicyDirection({
         />
       </Badge>
       <Badge
-        useHover={true}
         variant={value == "bi" ? "green" : value == "out" ? "blueDark" : "gray"}
         className={"px-4 py-1"}
-        onClick={toggleOut}
       >
         <LongArrowLeftIcon
           size={40}

src/contexts/GroupsProvider.tsx

@@ -1,8 +1,10 @@
-import useFetchApi from "@utils/api";
+import useFetchApi, { useApiCall } from "@utils/api";
+import { merge, sortBy, unionBy } from "lodash";
 import { usePathname } from "next/navigation";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useLoggedInUser } from "@/contexts/UsersProvider";
 import { Group } from "@/interfaces/Group";
+import { Peer } from "@/interfaces/Peer";
 
 type Props = {
   children: React.ReactNode;
@@ -14,7 +16,11 @@ const GroupContext = React.createContext(
     refresh: () => void;
     dropdownOptions: Group[];
     setDropdownOptions: React.Dispatch<React.SetStateAction<Group[]>>;
+    addDropdownOptions: (options: Group[]) => void;
     isLoading: boolean;
+    createOrUpdate: (group: Group) => Promise<Group>;
+    reset: () => void;
+    updateGroupDropdown: (oldGroupName: string, newGroup: Group) => void;
   },
 );
 
@@ -31,12 +37,82 @@ export default function GroupsProvider({ children }: Props) {
 
 export function GroupsProviderContent({ children }: Props) {
   const { data: groups, mutate, isLoading } = useFetchApi<Group[]>("/groups");
+  const groupRequest = useApiCall<Group>("/groups", true);
   const [dropdownOptions, setDropdownOptions] = useState<Group[]>([]);
 
   const refresh = () => {
     if (groups && !isLoading) mutate().then();
   };
 
+  const reset = () => {
+    mutate();
+    setDropdownOptions([]);
+    addDropdownOptions(groups || []);
+  };
+
+  const addDropdownOptions = (options: Group[]) => {
+    setDropdownOptions((prev) => {
+      let union = unionBy(options, prev, "name");
+      return sortBy(
+        union.map((item) =>
+          merge({}, prev.find((p) => p.name === item.name) || {}, item),
+        ),
+        "name",
+      );
+    });
+  };
+
+  const updateGroupDropdown = (oldGroupName: string, newGroup: Group) => {
+    setDropdownOptions((prev) => {
+      let updated = prev.map((g) => {
+        if (g.name === oldGroupName) {
+          return newGroup;
+        }
+        return g;
+      });
+      return sortBy(updated, "name");
+    });
+  };
+
+  // Update dropdown options when groups change
+  useEffect(() => {
+    if (!groups) return;
+    const sortedGroups = sortBy([...groups], "name");
+    const dropdownGroups = dropdownOptions.filter((g) => g.keepClientState);
+    const union = unionBy(dropdownGroups, sortedGroups, "name");
+    addDropdownOptions(union);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [groups]);
+
+  const createOrUpdate = async (group: Group) => {
+    let peers = group?.peers?.map((p) => {
+      let isString = typeof p === "string";
+      if (isString) return p;
+      let peer = p as Peer;
+      return peer.id;
+    }) as string[];
+
+    if (group.name === "All") return Promise.resolve(group);
+
+    const groupID =
+      group?.id ?? groups?.find((g) => g.name === group.name)?.id ?? undefined;
+
+    if (groupID) {
+      return groupRequest.put(
+        {
+          name: group.name,
+          peers: peers,
+        },
+        `/${group.id}`,
+      );
+    } else {
+      return groupRequest.post({
+        name: group.name,
+        peers: peers,
+      });
+    }
+  };
+
   return (
     <GroupContext.Provider
       value={{
@@ -44,7 +120,11 @@ export function GroupsProviderContent({ children }: Props) {
         refresh,
         dropdownOptions,
         setDropdownOptions,
+        addDropdownOptions,
         isLoading,
+        createOrUpdate,
+        reset,
+        updateGroupDropdown,
       }}
     >
       {children}

src/contexts/PoliciesProvider.tsx

@@ -15,12 +15,15 @@ const PoliciesContext = React.createContext(
       onSuccess?: (p: Policy) => void,
       message?: string,
     ) => void;
+    createPolicy: (policy: Policy) => Promise<Policy>;
   },
 );
 
 export default function PoliciesProvider({ children }: Props) {
   const request = useApiCall<Policy>("/policies");
 
+  const createPolicy = async (policy: Policy) => request.post(policy);
+
   const updatePolicy = async (
     policy: Policy,
     toUpdate: Partial<Policy>,
@@ -29,9 +32,8 @@ export default function PoliciesProvider({ children }: Props) {
   ) => {
     notify({
       title: "Access Control Policy " + policy.name,
-      description: message
-        ? message
-        : "The access control policy was successfully updated",
+      description:
+        message || "The access control policy was successfully updated",
       promise: request
         .put(
           {
@@ -55,7 +57,7 @@ export default function PoliciesProvider({ children }: Props) {
   };
 
   return (
-    <PoliciesContext.Provider value={{ updatePolicy }}>
+    <PoliciesContext.Provider value={{ updatePolicy, createPolicy }}>
       {children}
     </PoliciesContext.Provider>
   );

src/contexts/RoutesProvider.tsx

@@ -56,6 +56,7 @@ export default function RoutesProvider({ children }: Props) {
             metric: toUpdate.metric ?? route.metric ?? 9999,
             masquerade: toUpdate.masquerade ?? route.masquerade ?? true,
             groups: toUpdate.groups ?? route.groups ?? [],
+            access_control_groups: toUpdate.access_control_groups ?? undefined,
           },
           `/${route.id}`,
         )
@@ -90,6 +91,7 @@ export default function RoutesProvider({ children }: Props) {
           metric: route.metric || 9999,
           masquerade: route.masquerade,
           groups: route.groups || [],
+          access_control_groups: route?.access_control_groups || undefined,
         })
         .then((route) => {
           mutate("/routes");

src/hooks/useAutosizeTextArea.ts

@@ -0,0 +1,21 @@
+import { useEffect } from "react";
+
+// Updates the height of a <textarea> when the value changes.
+const useAutosizeTextArea = (
+  textAreaRef: HTMLTextAreaElement | null,
+  value: string,
+) => {
+  useEffect(() => {
+    if (textAreaRef) {
+      // We need to reset the height momentarily to get the correct scrollHeight for the textarea
+      textAreaRef.style.height = "42px";
+      const scrollHeight = textAreaRef.scrollHeight;
+
+      // We then set the height directly, outside the render loop
+      // Trying to set this with state or a ref will product an incorrect value.
+      textAreaRef.style.height = scrollHeight + "px";
+    }
+  }, [textAreaRef, value]);
+};
+
+export default useAutosizeTextArea;

src/hooks/useLocalStorage.tsx

@@ -19,7 +19,10 @@ type SetValue<T> = Dispatch<SetStateAction<T>>;
 export function useLocalStorage<T>(
   key: string,
   initialValue: T,
+  enabled: boolean = true,
 ): [T, SetValue<T>] {
+  const [tempValue, setTempValue] = useState(initialValue);
+
   // Get from local storage then
   // parse stored json or return initialValue
   const readValue = useCallback((): T => {
@@ -39,11 +42,18 @@ export function useLocalStorage<T>(
 
   // State to store our value
   // Pass initial state function to useState so logic is only executed once
-  const [storedValue, setStoredValue] = useState<T>(readValue);
+  const [storedValue, setStoredValue] = useState<T>(
+    enabled ? readValue : initialValue,
+  );
 
   // Return a wrapped version of useState's setter function that ...
   // ... persists the new value to localStorage.
   const setValue: SetValue<T> = useEventCallback((value) => {
+    if (!enabled) {
+      setStoredValue(value);
+      return;
+    }
+
     // Prevent build error "window is undefined" but keeps working
     if (typeof window === "undefined") {
       console.warn(
@@ -69,12 +79,14 @@ export function useLocalStorage<T>(
   });
 
   useEffect(() => {
+    if (!enabled) return;
     setStoredValue(readValue());
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const handleStorageChange = useCallback(
     (event: StorageEvent | CustomEvent) => {
+      if (!enabled) return;
       if ((event as StorageEvent)?.key && (event as StorageEvent).key !== key) {
         return;
       }
@@ -90,6 +102,9 @@ export function useLocalStorage<T>(
   // See: useLocalStorage()
   useEventListener("local-storage", handleStorageChange);
 
+  if (!enabled) {
+    return [tempValue, setTempValue];
+  }
   return [storedValue, setValue];
 }
 

src/hooks/useSortedDropdownOptions.ts

@@ -0,0 +1,36 @@
+import { useEffect, useMemo, useRef } from "react";
+import { Group } from "@/interfaces/Group";
+
+const useSortedDropdownOptions = (
+  dropdownOptions: Group[],
+  values: Group[],
+  isPopupOpen: boolean,
+): Group[] => {
+  const sortOrderRef = useRef<Map<string, number>>(new Map());
+  const prevValuesRef = useRef<Group[]>([]);
+
+  // Update sort order when values change and popup is closed
+  useEffect(() => {
+    if (
+      !isPopupOpen &&
+      JSON.stringify(values) !== JSON.stringify(prevValuesRef.current)
+    ) {
+      sortOrderRef.current = new Map(
+        values.map((group, index) => [group.name, index]),
+      );
+      prevValuesRef.current = values;
+    }
+  }, [values, isPopupOpen]);
+
+  // Sort the dropdown options based on the current sort order
+  return useMemo(() => {
+    const sortOrder = sortOrderRef.current;
+    return [...dropdownOptions].sort((a, b) => {
+      const indexA = sortOrder.get(a.name) ?? Infinity;
+      const indexB = sortOrder.get(b.name) ?? Infinity;
+      return indexA - indexB;
+    });
+  }, [dropdownOptions, sortOrderRef.current]);
+};
+
+export default useSortedDropdownOptions;

src/interfaces/Group.ts

@@ -3,6 +3,8 @@ export interface Group {
   name: string;
   peers?: GroupPeer[] | string[];
   peers_count?: number;
+  // Frontend only
+  keepClientState?: boolean;
 }
 
 export interface GroupPeer {

src/interfaces/Policy.ts

@@ -1,13 +1,14 @@
 import { Group } from "@/interfaces/Group";
+import { PostureCheck } from "@/interfaces/PostureCheck";
 
 export interface Policy {
   id?: string;
   name: string;
   description: string;
   enabled: boolean;
-  query: string;
+  query?: string;
   rules: PolicyRule[];
-  source_posture_checks: string[];
+  source_posture_checks: string[] | PostureCheck[];
 }
 
 export interface PolicyRule {

src/interfaces/Route.ts

@@ -11,6 +11,7 @@ export interface Route {
   masquerade: boolean;
   groups: string[];
   keep_route?: boolean;
+  access_control_groups?: string[];
   // Frontend only
   peer_groups?: string[];
   routesGroups?: string[];
@@ -25,6 +26,7 @@ export interface GroupedRoute {
   network?: string;
   domains?: string[];
   keep_route?: boolean;
+  access_control_groups?: string[];
   network_id: string;
   high_availability_count: number;
   is_using_route_groups: boolean;

src/layouts/AppLayout.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import "../app/globals.css";
+import { DisableDarkReader } from "@components/DisableDarkReader";
 import { TooltipProvider } from "@components/Tooltip";
 import { cn } from "@utils/helpers";
 import dayjs from "dayjs";
@@ -52,6 +53,7 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
             }}
           />
           <NavigationEvents />
+          <DisableDarkReader />
         </AnalyticsProvider>
       </body>
     </html>

src/modules/access-control/AccessControlModal.tsx

@@ -14,7 +14,6 @@ import {
   ModalTrigger,
 } from "@components/modal/Modal";
 import ModalHeader from "@components/modal/ModalHeader";
-import { notify } from "@components/Notification";
 import Paragraph from "@components/Paragraph";
 import { PeerGroupSelector } from "@components/PeerGroupSelector";
 import { PortSelector } from "@components/PortSelector";
@@ -27,10 +26,8 @@ import {
 } from "@components/Select";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@components/Tabs";
 import { Textarea } from "@components/Textarea";
-import PolicyDirection, { Direction } from "@components/ui/PolicyDirection";
-import useFetchApi, { useApiCall } from "@utils/api";
+import PolicyDirection from "@components/ui/PolicyDirection";
 import { cn } from "@utils/helpers";
-import { uniqBy } from "lodash";
 import {
   ArrowRightLeft,
   ExternalLinkIcon,
@@ -42,14 +39,11 @@ import {
   Shield,
   Text,
 } from "lucide-react";
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import { useSWRConfig } from "swr";
+import React, { useMemo, useState } from "react";
 import AccessControlIcon from "@/assets/icons/AccessControlIcon";
-import { usePolicies } from "@/contexts/PoliciesProvider";
-import { Group } from "@/interfaces/Group";
 import { Policy, Protocol } from "@/interfaces/Policy";
 import { PostureCheck } from "@/interfaces/PostureCheck";
-import useGroupHelper from "@/modules/groups/useGroupHelper";
+import { useAccessControl } from "@/modules/access-control/useAccessControl";
 import { PostureCheckTab } from "@/modules/posture-checks/ui/PostureCheckTab";
 import { PostureCheckTabTrigger } from "@/modules/posture-checks/ui/PostureCheckTabTrigger";
 
@@ -62,20 +56,20 @@ type UpdateModalProps = {
   open: boolean;
   onOpenChange?: (open: boolean) => void;
   cell?: string;
+  postureCheckTemplates?: PostureCheck[];
+  onSuccess?: (policy: Policy) => void;
+  useSave?: boolean;
+  allowEditPeers?: boolean;
 };
 
-export default function AccessControlModal({ children }: Props) {
+export default function AccessControlModal({ children }: Readonly<Props>) {
   const [modal, setModal] = useState(false);
 
   return (
-    <>
-      <Modal open={modal} onOpenChange={setModal} key={modal ? 1 : 0}>
-        {children && <ModalTrigger asChild>{children}</ModalTrigger>}
-        {modal && (
-          <AccessControlModalContent onSuccess={() => setModal(false)} />
-        )}
-      </Modal>
-    </>
+    <Modal open={modal} onOpenChange={setModal} key={modal ? 1 : 0}>
+      {children && <ModalTrigger asChild>{children}</ModalTrigger>}
+      {modal && <AccessControlModalContent onSuccess={() => setModal(false)} />}
+    </Modal>
   );
 }
 
@@ -84,19 +78,27 @@ export function AccessControlUpdateModal({
   open,
   onOpenChange,
   cell,
-}: UpdateModalProps) {
+  postureCheckTemplates,
+  onSuccess,
+  useSave = true,
+  allowEditPeers,
+}: Readonly<UpdateModalProps>) {
   return (
-    <>
-      <Modal open={open} onOpenChange={onOpenChange} key={open ? 1 : 0}>
-        {open && (
-          <AccessControlModalContent
-            onSuccess={() => onOpenChange && onOpenChange(false)}
-            policy={policy}
-            cell={cell}
-          />
-        )}
-      </Modal>
-    </>
+    <Modal open={open} onOpenChange={onOpenChange} key={open ? 1 : 0}>
+      {open && (
+        <AccessControlModalContent
+          onSuccess={(p) => {
+            onOpenChange && onOpenChange(false);
+            onSuccess && onSuccess(p);
+          }}
+          policy={policy}
+          cell={cell}
+          postureCheckTemplates={postureCheckTemplates}
+          useSave={useSave}
+          allowEditPeers={allowEditPeers}
+        />
+      )}
+    </Modal>
   );
 }
 
@@ -104,18 +106,43 @@ type ModalProps = {
   onSuccess?: (p: Policy) => void;
   policy?: Policy;
   cell?: string;
+  postureCheckTemplates?: PostureCheck[];
+  useSave?: boolean;
+  allowEditPeers?: boolean;
 };
 
 export function AccessControlModalContent({
   onSuccess,
   policy,
   cell,
-}: ModalProps) {
-  const { data: allPostureChecks, isLoading: isPostureChecksLoading } =
-    useFetchApi<PostureCheck[]>("/posture-checks");
-
-  const { updatePolicy } = usePolicies();
-  const firstRule = policy?.rules ? policy.rules[0] : undefined;
+  postureCheckTemplates,
+  useSave = true,
+  allowEditPeers = false,
+}: Readonly<ModalProps>) {
+  const {
+    portAndDirectionDisabled,
+    destinationGroups,
+    direction,
+    ports,
+    sourceGroups,
+    setSourceGroups,
+    setDestinationGroups,
+    setPorts,
+    setDirection,
+    setProtocol,
+    enabled,
+    setEnabled,
+    setName,
+    setDescription,
+    setPostureChecks,
+    name,
+    protocol,
+    description,
+    postureChecks,
+    submit,
+    isPostureChecksLoading,
+    getPolicyData,
+  } = useAccessControl({ policy, postureCheckTemplates, onSuccess });
 
   const [tab, setTab] = useState(() => {
     if (!cell) return "policy";
@@ -124,144 +151,6 @@ export function AccessControlModalContent({
     return "policy";
   });
 
-  const [enabled, setEnabled] = useState<boolean>(policy?.enabled ?? true);
-  const [ports, setPorts] = useState<number[]>(() => {
-    if (!firstRule) return [];
-    if (firstRule.ports == undefined) return [];
-    if (firstRule.ports.length > 0) {
-      return firstRule.ports.map((p) => Number(p));
-    }
-    return [];
-  });
-  const [protocol, setProtocol] = useState<Protocol>(
-    firstRule ? firstRule.protocol : "all",
-  );
-  const [direction, setDirection] = useState<Direction>(() => {
-    if (firstRule && firstRule?.bidirectional) return "bi";
-    if (firstRule && firstRule?.bidirectional == false) return "in";
-    return "bi";
-  });
-  const [name, setName] = useState(policy?.name || "");
-  const [description, setDescription] = useState(policy?.description || "");
-  const { mutate } = useSWRConfig();
-
-  const policyRequest = useApiCall<Policy>("/policies");
-
-  const [
-    sourceGroups,
-    setSourceGroups,
-    { getGroupsToUpdate: getSourceGroupsToUpdate },
-  ] = useGroupHelper({
-    initial: firstRule ? (firstRule.sources as Group[]) : [],
-  });
-
-  const [
-    destinationGroups,
-    setDestinationGroups,
-    { getGroupsToUpdate: getDestinationGroupsToUpdate },
-  ] = useGroupHelper({
-    initial: firstRule ? (firstRule.destinations as Group[]) : [],
-  });
-
-  const submit = async () => {
-    const g1 = getSourceGroupsToUpdate();
-    const g2 = getDestinationGroupsToUpdate();
-    const createOrUpdateGroups = uniqBy([...g1, ...g2], "name").map(
-      (g) => g.promise,
-    );
-    const groups = await Promise.all(
-      createOrUpdateGroups.map((call) => call()),
-    );
-
-    let sources = sourceGroups
-      .map((g) => {
-        const find = groups.find((group) => group.name === g.name);
-        return find?.id;
-      })
-      .filter((g) => g !== undefined) as string[];
-    let destinations = destinationGroups
-      .map((g) => {
-        const find = groups.find((group) => group.name === g.name);
-        return find?.id;
-      })
-      .filter((g) => g !== undefined) as string[];
-
-    if (direction == "out") {
-      const tmp = sources;
-      sources = destinations;
-      destinations = tmp;
-    }
-
-    const policyObj = {
-      name,
-      description,
-      enabled,
-      source_posture_checks: postureChecks
-        ? postureChecks.map((c) => c.id)
-        : undefined,
-      rules: [
-        {
-          bidirectional: direction == "bi",
-          description,
-          name,
-          action: "accept",
-          protocol,
-          enabled,
-          sources,
-          destinations,
-          ports: ports.length > 0 ? ports.map((p) => p.toString()) : undefined,
-        },
-      ],
-    } as Policy;
-
-    if (policy) {
-      updatePolicy(
-        policy,
-        policyObj,
-        () => {
-          mutate("/policies");
-          onSuccess && onSuccess(policy);
-        },
-        "The policy was successfully saved",
-      );
-    } else {
-      notify({
-        title: "Create Access Control Policy",
-        description: "Policy was created successfully.",
-        loadingMessage: "Creating your policy...",
-        promise: policyRequest.post(policyObj).then((policy) => {
-          mutate("/policies");
-          onSuccess && onSuccess(policy);
-        }),
-      });
-    }
-  };
-
-  const portAndDirectionDisabled = protocol == "icmp" || protocol == "all";
-
-  const [postureChecks, setPostureChecks] = useState<PostureCheck[]>([]);
-  const postureChecksLoaded = useRef(false);
-
-  const initialPostureChecks = useMemo(() => {
-    return (
-      allPostureChecks?.filter((check) => {
-        if (policy?.source_posture_checks) {
-          return policy.source_posture_checks.includes(check.id);
-        }
-        return false;
-      }) || []
-    );
-  }, [policy, allPostureChecks]);
-
-  useEffect(() => {
-    if (postureChecksLoaded.current) return;
-
-    if (initialPostureChecks.length > 0) {
-      postureChecksLoaded.current = true;
-      setPostureChecks(initialPostureChecks);
-    }
-  }, [initialPostureChecks]);
-
   const continuePostureChecksDisabled = useMemo(() => {
     if (sourceGroups.length == 0 || destinationGroups.length == 0) return true;
     if (direction != "bi" && ports.length == 0) return true;
@@ -280,10 +169,18 @@ export function AccessControlModalContent({
     if (p == "all") {
       setPorts([]);
     }
+    if (p == "tcp" || p == "udp") {
+      setDirection("in");
+    }
+  };
+
+  const close = () => {
+    const data = getPolicyData();
+    onSuccess && onSuccess(data);
   };
 
   return (
-    <ModalContent maxWidthClass={"max-w-2xl"}>
+    <ModalContent maxWidthClass={"max-w-3xl"}>
       <ModalHeader
         icon={<AccessControlIcon className={"fill-netbird"} />}
         title={
@@ -320,7 +217,10 @@ export function AccessControlModalContent({
 
         <TabsContent value={"policy"} className={"pb-8"}>
           <div className={"px-8 flex-col flex gap-6"}>
-            <div className={"flex justify-between items-center"}>
+            <div
+              className={"flex justify-between items-center"}
+              data-cy={"protocol-wrapper"}
+            >
               <div>
                 <Label>Protocol</Label>
                 <HelpText className={"max-w-sm"}>
@@ -335,12 +235,15 @@ export function AccessControlModalContent({
                 onValueChange={(v) => handleProtocolChange(v as Protocol)}
               >
                 <SelectTrigger className="w-[140px]">
-                  <div className={"flex items-center gap-3"}>
+                  <div
+                    className={"flex items-center gap-3"}
+                    data-cy={"protocol-select-button"}
+                  >
                     <Share2 size={15} className={"text-nb-gray-300"} />
                     <SelectValue placeholder="Select protocol..." />
                   </div>
                 </SelectTrigger>
-                <SelectContent>
+                <SelectContent data-cy={"protocol-selection"}>
                   <SelectItem value="all">ALL</SelectItem>
                   <SelectItem value="tcp">TCP</SelectItem>
                   <SelectItem value="udp">UDP</SelectItem>
@@ -356,9 +259,14 @@ export function AccessControlModalContent({
                   Source
                 </Label>
                 <PeerGroupSelector
+                  dataCy={"source-group-selector"}
+                  showPeerCount={allowEditPeers}
+                  disableInlineRemoveGroup={false}
                   popoverWidth={500}
+                  showRoutes={false}
                   onChange={setSourceGroups}
                   values={sourceGroups}
+                  saveGroupAssignments={useSave}
                 />
               </div>
               <PolicyDirection
@@ -373,9 +281,14 @@ export function AccessControlModalContent({
                   Destination
                 </Label>
                 <PeerGroupSelector
+                  dataCy={"destination-group-selector"}
+                  showRoutes={true}
+                  showPeerCount={allowEditPeers}
+                  disableInlineRemoveGroup={false}
                   popoverWidth={500}
                   onChange={setDestinationGroups}
                   values={destinationGroups}
+                  saveGroupAssignments={useSave}
                 />
               </div>
             </div>
@@ -435,6 +348,7 @@ export function AccessControlModalContent({
                 autoFocus={true}
                 tabIndex={0}
                 value={name}
+                data-cy={"policy-name"}
                 onChange={(e) => setName(e.target.value)}
                 placeholder={"e.g., Devs to Servers"}
               />
@@ -446,6 +360,7 @@ export function AccessControlModalContent({
               </HelpText>
               <Textarea
                 value={description}
+                data-cy={"policy-description"}
                 onChange={(e) => setDescription(e.target.value)}
                 placeholder={
                   "e.g., Devs are allowed to access servers and servers are allowed to access Devs."
@@ -520,6 +435,7 @@ export function AccessControlModalContent({
                     variant={"primary"}
                     disabled={submitDisabled}
                     onClick={submit}
+                    data-cy={"submit-policy"}
                   >
                     <PlusCircle size={16} />
                     Add Policy
@@ -535,7 +451,13 @@ export function AccessControlModalContent({
               <Button
                 variant={"primary"}
                 disabled={submitDisabled}
-                onClick={submit}
+                onClick={() => {
+                  if (useSave) {
+                    submit();
+                  } else {
+                    close();
+                  }
+                }}
               >
                 Save Changes
               </Button>

src/modules/access-control/table/AccessControlActiveCell.tsx

@@ -1,4 +1,5 @@
 import { ToggleSwitch } from "@components/ToggleSwitch";
+import { cloneDeep } from "@utils/helpers";
 import React, { useMemo } from "react";
 import { mutate } from "swr";
 import { usePolicies } from "@/contexts/PoliciesProvider";
@@ -8,7 +9,7 @@ import { Policy } from "@/interfaces/Policy";
 type Props = {
   policy: Policy;
 };
-export default function AccessControlActiveCell({ policy }: Props) {
+export default function AccessControlActiveCell({ policy }: Readonly<Props>) {
   const { updatePolicy } = usePolicies();
 
   const isChecked = useMemo(() => {
@@ -16,7 +17,7 @@ export default function AccessControlActiveCell({ policy }: Props) {
   }, [policy]);
 
   const update = async (enabled: boolean) => {
-    const rules = [...policy.rules];
+    const rules = cloneDeep(policy.rules);
     rules.forEach((rule) => {
       rule.enabled = enabled;
       rule.sources = rule.sources
@@ -26,8 +27,8 @@ export default function AccessControlActiveCell({ policy }: Props) {
           }) as string[])
         : [];
       rule.destinations = rule.destinations
-        ? (rule.destinations.map((source) => {
-            const group = source as Group;
+        ? (rule.destinations.map((destination) => {
+            const group = destination as Group;
             return group.id;
           }) as string[])
         : [];

src/modules/access-control/table/AccessControlNameCell.tsx

@@ -6,12 +6,14 @@ import ActiveInactiveRow from "@/modules/common-table-rows/ActiveInactiveRow";
 type Props = {
   policy: Policy;
 };
-export default function AccessControlNameCell({ policy }: Props) {
+
+export default function AccessControlNameCell({ policy }: Readonly<Props>) {
   return (
     <ActiveInactiveRow
       active={policy.enabled}
       inactiveDot={"gray"}
       text={policy.name}
+      dataCy={policy.name}
     >
       <DescriptionWithTooltip className={"mt-1"} text={policy.description} />
     </ActiveInactiveRow>

src/modules/access-control/table/AccessControlTable.tsx

@@ -31,6 +31,7 @@ import AccessControlSourcesCell from "@/modules/access-control/table/AccessContr
 type Props = {
   policies?: Policy[];
   isLoading: boolean;
+  headingTarget?: HTMLHeadingElement | null;
 };
 
 export const AccessControlTableColumns: ColumnDef<Policy>[] = [
@@ -161,7 +162,11 @@ export const AccessControlTableColumns: ColumnDef<Policy>[] = [
   },
 ];
 
-export default function AccessControlTable({ policies, isLoading }: Props) {
+export default function AccessControlTable({
+  policies,
+  isLoading,
+  headingTarget,
+}: Props) {
   const { mutate } = useSWRConfig();
   const path = usePathname();
 
@@ -191,8 +196,9 @@ export default function AccessControlTable({ policies, isLoading }: Props) {
         />
       )}
       <DataTable
+        headingTarget={headingTarget}
         isLoading={isLoading}
-        text={"Access Control"}
+        text={"Access Control Policies"}
         sorting={sorting}
         setSorting={setSorting}
         columns={AccessControlTableColumns}
@@ -222,12 +228,14 @@ export default function AccessControlTable({ policies, isLoading }: Props) {
               "It looks like you don't have any policies yet. Policies can allow connections by specific protocol and ports."
             }
             button={
-              <AccessControlModal>
-                <Button variant={"primary"} className={""}>
-                  <PlusCircle size={16} />
-                  Add Policy
-                </Button>
-              </AccessControlModal>
+              <div className={"flex gap-4 items-center justify-center"}>
+                <AccessControlModal>
+                  <Button variant={"primary"} className={""}>
+                    <PlusCircle size={16} />
+                    Add Policy
+                  </Button>
+                </AccessControlModal>
+              </div>
             }
             learnMore={
               <>
@@ -246,12 +254,14 @@ export default function AccessControlTable({ policies, isLoading }: Props) {
         rightSide={() => (
           <>
             {policies && policies?.length > 0 && (
-              <AccessControlModal>
-                <Button variant={"primary"} className={"ml-auto"}>
-                  <PlusCircle size={16} />
-                  Add Policy
-                </Button>
-              </AccessControlModal>
+              <div className={"flex ml-auto gap-4"}>
+                <AccessControlModal>
+                  <Button variant={"primary"} className={"ml-auto"}>
+                    <PlusCircle size={16} />
+                    Add Policy
+                  </Button>
+                </AccessControlModal>
+              </div>
             )}
           </>
         )}

src/modules/access-control/useAccessControl.ts

@@ -0,0 +1,262 @@
+import { notify } from "@components/Notification";
+import { Direction } from "@components/ui/PolicyDirection";
+import useFetchApi, { useApiCall } from "@utils/api";
+import { merge, uniqBy } from "lodash";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useSWRConfig } from "swr";
+import { usePolicies } from "@/contexts/PoliciesProvider";
+import { Group } from "@/interfaces/Group";
+import { Policy, Protocol } from "@/interfaces/Policy";
+import { PostureCheck } from "@/interfaces/PostureCheck";
+import useGroupHelper from "@/modules/groups/useGroupHelper";
+import { usePostureCheck } from "@/modules/posture-checks/usePostureCheck";
+
+type Props = {
+  policy?: Policy;
+  postureCheckTemplates?: PostureCheck[];
+  onSuccess?: (policy: Policy) => void;
+};
+
+// TODO add reducer
+
+export const useAccessControl = ({
+  policy,
+  postureCheckTemplates,
+  onSuccess,
+}: Props = {}) => {
+  const { data: allPostureChecks, isLoading: isPostureChecksLoading } =
+    useFetchApi<PostureCheck[]>("/posture-checks");
+
+  const [postureChecks, setPostureChecks] = useState<PostureCheck[]>([]);
+  const postureChecksLoaded = useRef(false);
+
+  const initialPostureChecks = useMemo(() => {
+    const foundChecks =
+      allPostureChecks?.filter((check) => {
+        if (policy?.source_posture_checks) {
+          if (
+            policy.source_posture_checks.every((id) => typeof id === "string")
+          ) {
+            let checks = policy.source_posture_checks as string[];
+            return checks.includes(check.id);
+          } else {
+            return policy.source_posture_checks.some((c) => {
+              let policyCheck = c as PostureCheck;
+              return policyCheck.id === check.id;
+            });
+          }
+        }
+        return false;
+      }) || [];
+
+    const templates = postureCheckTemplates || [];
+
+    return merge(foundChecks, templates);
+  }, [policy, allPostureChecks, postureCheckTemplates]);
+
+  useEffect(() => {
+    if (postureChecksLoaded.current) return;
+
+    if (initialPostureChecks.length > 0) {
+      postureChecksLoaded.current = true;
+      setPostureChecks(initialPostureChecks);
+    }
+  }, [initialPostureChecks]);
+
+  const { updatePolicy } = usePolicies();
+  const firstRule = policy?.rules ? policy.rules[0] : undefined;
+
+  const [enabled, setEnabled] = useState<boolean>(policy?.enabled ?? true);
+
+  const [ports, setPorts] = useState<number[]>(() => {
+    if (!firstRule) return [];
+    if (firstRule.ports == undefined) return [];
+    if (firstRule.ports.length > 0) {
+      return firstRule.ports.map((p) => Number(p));
+    }
+    return [];
+  });
+
+  const [protocol, setProtocol] = useState<Protocol>(
+    firstRule ? firstRule.protocol : "all",
+  );
+  const [direction, setDirection] = useState<Direction>(() => {
+    if (firstRule && firstRule?.bidirectional) return "bi";
+    if (firstRule && firstRule?.bidirectional == false) return "in";
+    return "bi";
+  });
+  const [name, setName] = useState(policy?.name || "");
+  const [description, setDescription] = useState(policy?.description || "");
+  const { mutate } = useSWRConfig();
+
+  const policyRequest = useApiCall<Policy>("/policies");
+
+  const [
+    sourceGroups,
+    setSourceGroups,
+    { getGroupsToUpdate: getSourceGroupsToUpdate },
+  ] = useGroupHelper({
+    initial: firstRule ? (firstRule.sources as Group[]) : [],
+  });
+
+  const [
+    destinationGroups,
+    setDestinationGroups,
+    { getGroupsToUpdate: getDestinationGroupsToUpdate },
+  ] = useGroupHelper({
+    initial: firstRule ? (firstRule.destinations as Group[]) : [],
+  });
+
+  const { updateOrCreateAndNotify: checkToCreate } = usePostureCheck({});
+  const createPostureChecksWithoutID = async () => {
+    const checks = postureChecks.filter(
+      (check) => check?.id === undefined || check?.id === "",
+    );
+    const createChecks = checks.map((check) => checkToCreate(check));
+    return Promise.all(createChecks);
+  };
+
+  const getPolicyData = () => {
+    let sources = sourceGroups;
+    let destinations = destinationGroups;
+    if (direction == "out") {
+      const tmp = sourceGroups;
+      sources = destinations;
+      destinations = tmp;
+    }
+
+    return {
+      name,
+      description,
+      enabled,
+      source_posture_checks: postureChecks,
+      rules: [
+        {
+          bidirectional: direction == "bi",
+          description,
+          name,
+          sources: sources,
+          destinations: destinations,
+          action: "accept",
+          protocol,
+          enabled,
+          ports: ports.length > 0 ? ports.map((p) => p.toString()) : undefined,
+        },
+      ],
+    } as Policy;
+  };
+
+  const submit = async () => {
+    const g1 = getSourceGroupsToUpdate();
+    const g2 = getDestinationGroupsToUpdate();
+    const createOrUpdateGroups = uniqBy([...g1, ...g2], "name").map(
+      (g) => g.promise,
+    );
+    const groups = await Promise.all(
+      createOrUpdateGroups.map((call) => call()),
+    );
+
+    // Create posture checks if they don't have an ID
+    let hasError = false;
+    let allChecks = postureChecks;
+    await createPostureChecksWithoutID()
+      .then((checks) => {
+        allChecks = [...allChecks, ...(checks as PostureCheck[])];
+      })
+      .catch((e) => {
+        hasError = true;
+        console.error(e);
+      });
+    if (hasError) return;
+
+    let sources = sourceGroups
+      .map((g) => {
+        const find = groups.find((group) => group.name === g.name);
+        return find?.id;
+      })
+      .filter((g) => g !== undefined) as string[];
+    let destinations = destinationGroups
+      .map((g) => {
+        const find = groups.find((group) => group.name === g.name);
+        return find?.id;
+      })
+      .filter((g) => g !== undefined) as string[];
+
+    if (direction == "out") {
+      const tmp = sources;
+      sources = destinations;
+      destinations = tmp;
+    }
+
+    const policyObj = {
+      name,
+      description,
+      enabled,
+      source_posture_checks: postureChecks
+        ? postureChecks.map((c) => c.id)
+        : undefined,
+      rules: [
+        {
+          bidirectional: direction == "bi",
+          description,
+          name,
+          action: "accept",
+          protocol,
+          enabled,
+          sources,
+          destinations,
+          ports: ports.length > 0 ? ports.map((p) => p.toString()) : undefined,
+        },
+      ],
+    } as Policy;
+
+    if (policy && policy?.id !== undefined) {
+      updatePolicy(
+        policy,
+        policyObj,
+        () => {
+          mutate("/policies");
+          onSuccess && onSuccess(policy);
+        },
+        "The policy was successfully saved",
+      );
+    } else {
+      notify({
+        title: "Create Access Control Policy",
+        description: "Policy was created successfully.",
+        loadingMessage: "Creating your policy...",
+        promise: policyRequest.post(policyObj).then((policy) => {
+          mutate("/policies");
+          onSuccess && onSuccess(policy);
+        }),
+      });
+    }
+  };
+
+  const portAndDirectionDisabled = protocol == "icmp" || protocol == "all";
+
+  return {
+    protocol,
+    setProtocol,
+    direction,
+    setDirection,
+    name,
+    setName,
+    description,
+    setDescription,
+    enabled,
+    setEnabled,
+    ports,
+    setPorts,
+    sourceGroups,
+    setSourceGroups,
+    destinationGroups,
+    setDestinationGroups,
+    postureChecks,
+    setPostureChecks,
+    submit,
+    getPolicyData,
+    portAndDirectionDisabled,
+    isPostureChecksLoading,
+  } as const;
+};

src/modules/access-tokens/AccessTokensTable.tsx

@@ -91,6 +91,7 @@ export default function AccessTokensTable({ user }: Props) {
               text={"Access Tokens"}
               tableClassName={"mt-0"}
               minimal={true}
+              showSearchAndFilters={false}
               inset={false}
               sorting={sorting}
               setSorting={setSorting}
@@ -98,8 +99,9 @@ export default function AccessTokensTable({ user }: Props) {
               data={tokens}
             />
           ) : (
-            <div className={"py-3 bg-nb-gray-950 overflow-hidden"}>
+            <div className={"bg-nb-gray-950 overflow-hidden"}>
               <NoResults
+                className={"py-3"}
                 title={"No access tokens"}
                 description={
                   "You don't have any access tokens yet. You can add a token to access the NetBird API."

src/modules/activity/ActivityEventCodeSelector.tsx

@@ -149,7 +149,7 @@ export function ActivityEventCodeSelector({
 
             <ScrollArea
               className={
-                "max-h-[380px] overflow-y-auto flex flex-col gap-1 pl-2 py-2 pr-3"
+                "max-h-[380px] overflow-y-hidden flex flex-col gap-1 pl-2 py-2 pr-3"
               }
             >
               {Object.keys(groupedEventNames).map((group) => {

src/modules/activity/ActivityTable.tsx

@@ -24,6 +24,7 @@ import { ActivityUserSelector } from "@/modules/activity/ActivityUserSelector";
 type Props = {
   events?: ActivityEvent[];
   isLoading: boolean;
+  headingTarget?: HTMLHeadingElement | null;
 };
 
 const ActivityFeedColumnsTable: ColumnDef<ActivityEvent>[] = [
@@ -52,7 +53,14 @@ const ActivityFeedColumnsTable: ColumnDef<ActivityEvent>[] = [
   },
 ];
 
-export default function ActivityTable({ events, isLoading }: Props) {
+const defaultFromDate = dayjs().subtract(14, "day").toDate();
+const defaultToDate = dayjs().toDate();
+
+export default function ActivityTable({
+  events,
+  isLoading,
+  headingTarget,
+}: Props) {
   const { mutate } = useSWRConfig();
   const path = usePathname();
 
@@ -68,8 +76,8 @@ export default function ActivityTable({ events, isLoading }: Props) {
   const [initialDateRange, setInitialDateRange] = useLocalStorage<
     DateRange | undefined
   >("netbird-table-range" + path, {
-    from: dayjs().subtract(14, "day").toDate(),
-    to: dayjs().toDate(),
+    from: defaultFromDate,
+    to: defaultToDate,
   });
 
   // Range for DatePicker
@@ -80,6 +88,7 @@ export default function ActivityTable({ events, isLoading }: Props) {
 
   return (
     <DataTable
+      headingTarget={headingTarget}
       wrapperClassName={"gap-0 flex flex-col"}
       tableClassName={"px-8 mt-10"}
       paginationClassName={"max-w-[800px]"}
@@ -125,6 +134,11 @@ export default function ActivityTable({ events, isLoading }: Props) {
           }
         />
       }
+      onFilterReset={() => {
+        const date = { from: defaultFromDate, to: defaultToDate };
+        setInitialDateRange(date);
+        setDateRange(date);
+      }}
     >
       {(table) => {
         return (

src/modules/activity/ActivityUserSelector.tsx

@@ -175,7 +175,7 @@ export function ActivityUserSelector({
 
             <ScrollArea
               className={
-                "max-h-[380px] overflow-y-auto flex flex-col gap-1 pl-2 py-2 pr-3"
+                "max-h-[380px] overflow-y-hidden flex flex-col gap-1 pl-2 py-2 pr-3"
               }
             >
               <CommandGroup>

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

@@ -11,7 +11,9 @@ type Props = {
   text?: string | React.ReactNode;
   className?: string;
   additionalInfo?: React.ReactNode;
+  dataCy?: string;
 };
+
 export default function ActiveInactiveRow({
   active,
   children,
@@ -20,13 +22,15 @@ export default function ActiveInactiveRow({
   inactiveDot = "gray",
   className,
   additionalInfo,
-}: Props) {
+  dataCy,
+}: Readonly<Props>) {
   return (
     <div
       className={cn(
         "gap-3 dark:text-neutral-300 text-neutral-500 min-w-0",
         className,
       )}
+      data-cy={dataCy}
     >
       {leftSection}
       <div className={"flex flex-col gap-1"}>

src/modules/dns-nameservers/table/NameserverGroupTable.tsx

@@ -85,14 +85,17 @@ export const NameserverGroupTableColumns: ColumnDef<NameserverGroup>[] = [
     cell: ({ cell }) => <NameserverActionCell ns={cell.row.original} />,
   },
 ];
+
 type Props = {
   nameserverGroups?: NameserverGroup[];
   isLoading?: boolean;
+  headingTarget?: HTMLHeadingElement | null;
 };
 
 export default function NameserverGroupTable({
   nameserverGroups,
   isLoading,
+  headingTarget,
 }: Props) {
   const { mutate } = useSWRConfig();
   const path = usePathname();
@@ -123,6 +126,7 @@ export default function NameserverGroupTable({
         />
       )}
       <DataTable
+        headingTarget={headingTarget}
         isLoading={isLoading}
         text={"Network Routes"}
         sorting={sorting}

src/modules/groups/AssignPeerToGroupModal.tsx

@@ -0,0 +1,372 @@
+import Button from "@components/Button";
+import { Checkbox } from "@components/Checkbox";
+import { Modal, ModalContent } from "@components/modal/Modal";
+import ModalHeader from "@components/modal/ModalHeader";
+import { notify } from "@components/Notification";
+import SkeletonTable from "@components/skeletons/SkeletonTable";
+import DataTableHeader from "@components/table/DataTableHeader";
+import NoResultsCard from "@components/ui/NoResultsCard";
+import { ColumnDef, RowSelectionState } from "@tanstack/react-table";
+import useFetchApi, { useApiCall } from "@utils/api";
+import { cn } from "@utils/helpers";
+import { FolderGit2, PencilLineIcon } from "lucide-react";
+import * as React from "react";
+import { useCallback, useEffect, useState } from "react";
+import { useSWRConfig } from "swr";
+import PeerIcon from "@/assets/icons/PeerIcon";
+import { DataTable } from "@/components/table/DataTable";
+import { Group, GroupPeer } from "@/interfaces/Group";
+import { Peer } from "@/interfaces/Peer";
+import { EditGroupNameModal } from "@/modules/groups/EditGroupNameModal";
+import PeerAddressCell from "@/modules/peers/PeerAddressCell";
+import PeerNameCell from "@/modules/peers/PeerNameCell";
+import { PeerOSCell } from "@/modules/peers/PeerOSCell";
+
+type Props = {
+  group: Group;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  onUpdate?: (g: Group) => void;
+  useSave?: boolean;
+};
+
+export const AssignPeerToGroupModal = ({
+  group,
+  open = false,
+  setOpen,
+  onUpdate,
+  useSave = true,
+}: Props) => {
+  return (
+    <Modal open={open} onOpenChange={setOpen} key={open ? "1" : "0"}>
+      {open && (
+        <AssignGroupToPeerModalContent
+          group={group}
+          onSuccess={(g) => {
+            setOpen(false);
+            onUpdate && onUpdate(g);
+          }}
+          useSave={useSave}
+        />
+      )}
+    </Modal>
+  );
+};
+
+type ContentProps = {
+  group: Group;
+  onSuccess?: (g: Group) => void;
+  useSave?: boolean;
+};
+
+export const AssignGroupToPeerModalContent = ({
+  group,
+  onSuccess,
+  useSave,
+}: ContentProps) => {
+  const { data: peers, isLoading } = useFetchApi<Peer[]>("/peers");
+  const { mutate } = useSWRConfig();
+  const groupRequest = useApiCall<Group>("/groups");
+  const [initialPeersSet, setInitialPeersSet] = useState(false);
+  const [selectedRows, setSelectedRows] = useState<RowSelectionState>({});
+  const isAllGroup = group.name === "All";
+  const [sorting, setSorting] = useState([
+    {
+      id: "select",
+      desc: false,
+    },
+    {
+      id: "name",
+      desc: false,
+    },
+  ]);
+
+  const [groupNameModal, setGroupNameModal] = useState(false);
+  const [groupName, setGroupName] = useState(group.name);
+
+  const onGroupNameUpdate = (name: string) => {
+    setGroupNameModal(false);
+    setGroupName(name);
+  };
+
+  // Get initial selected peers
+  const getInitialSelectedPeers = useCallback(() => {
+    if (!group) return undefined;
+    if (!peers) return undefined;
+    let initialSelectedPeers = group?.peers
+      ?.map((p) => {
+        if (typeof p === "string") return p;
+        return p.id;
+      })
+      .filter((p) => p !== undefined) as string[];
+    if (!initialSelectedPeers) return {};
+
+    // Return Record<string, boolean> for initialSelectedPeers
+    return initialSelectedPeers.reduce(
+      (acc, peerId) => {
+        acc[peerId] = true;
+        return acc;
+      },
+      {} as Record<string, boolean>,
+    );
+  }, [group, peers]);
+
+  const handleOnSave = async (selectedPeers: Peer[]) => {
+    if (!useSave) {
+      onSuccess &&
+        onSuccess({
+          ...group,
+          name: groupName,
+          peers: selectedPeers.map((peer) => {
+            return {
+              id: peer.id,
+              name: peer.name,
+            } as GroupPeer;
+          }),
+          peers_count: selectedPeers.length,
+          keepClientState: true,
+        });
+      return;
+    }
+
+    const hasGroupID = !!group?.id;
+    let request;
+
+    if (hasGroupID) {
+      request = () =>
+        groupRequest.put(
+          {
+            name: group.name,
+            peers: selectedPeers.map((peer) => peer.id),
+          },
+          "/" + group?.id,
+        );
+    } else {
+      request = () =>
+        groupRequest.post({
+          name: group.name,
+          peers: selectedPeers.map((peer) => peer.id),
+        });
+    }
+    notify({
+      title: "Saving changes",
+      description: `${group?.name || "Group"} was successfully saved.`,
+      promise: request()
+        .then((g: Group) => {
+          mutate("/groups");
+          onSuccess && onSuccess(g);
+        })
+        .catch(() => {}),
+      loadingMessage: "Updating group...",
+    });
+  };
+
+  useEffect(() => {
+    if (initialPeersSet) return;
+    const initialSelectedPeers = getInitialSelectedPeers();
+    if (initialSelectedPeers === undefined) return;
+    setSelectedRows(initialSelectedPeers);
+    setInitialPeersSet(true);
+  }, [getInitialSelectedPeers, initialPeersSet]);
+
+  return (
+    <ModalContent
+      maxWidthClass={"max-w-4xl"}
+      className={cn(peers && peers.length > 0 ? "pb-0" : "pb-8")}
+      showClose={true}
+    >
+      {groupNameModal && (
+        <EditGroupNameModal
+          initialName={groupName}
+          open={groupNameModal}
+          onOpenChange={setGroupNameModal}
+          onSuccess={onGroupNameUpdate}
+        />
+      )}
+      <div className={"flex items-start justify-between pr-8"}>
+        <ModalHeader
+          title={
+            <div className={"flex items-center gap-2 mb-1 text-nb-gray-100"}>
+              <FolderGit2 size={16} className={"shrink-0"} />
+              <div className={"flex gap-2 items-center"}>
+                {groupName}
+                {groupName !== "All" && (
+                  <button
+                    className={
+                      "flex items-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-neutral-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md cursor-pointer"
+                    }
+                    onClick={() => setGroupNameModal(true)}
+                  >
+                    <PencilLineIcon size={16} />
+                  </button>
+                )}
+              </div>
+            </div>
+          }
+          description={
+            isAllGroup
+              ? "View assigned peers for this group"
+              : "Manage assigned peers for this group"
+          }
+          color={"blue"}
+        />
+      </div>
+
+      {initialPeersSet ? (
+        <DataTable
+          useRowId={true}
+          rowSelection={selectedRows}
+          setRowSelection={setSelectedRows}
+          onRowClick={(row) => row.toggleSelected()}
+          text={"Peers"}
+          resetRowSelectionOnSearch={false}
+          uniqueKey={group?.id ?? group?.name}
+          sorting={sorting}
+          keepStateInLocalStorage={false}
+          setSorting={setSorting}
+          columns={PeersTableColumns}
+          data={initialPeersSet ? peers : undefined}
+          isLoading={isLoading && !initialPeersSet}
+          tableCellClassName={"!py-1 scale-[95%]"}
+          searchPlaceholder={"Search by name, IP or owner..."}
+          minimal={false}
+          columnVisibility={{
+            connected: false,
+            select: !isAllGroup,
+            approval_required: false,
+            group_name_strings: false,
+            group_names: false,
+            ip: false,
+            user_name: false,
+            user_email: false,
+          }}
+          getStartedCard={
+            <NoResultsCard
+              title={"Seems like you don't have any peers"}
+              description={
+                "In order to view or assign peers to a group, you need to have at least one peer."
+              }
+              icon={<PeerIcon className={"fill-nb-gray-200"} size={14} />}
+            />
+          }
+          rightSide={(table) => (
+            <div className={"ml-auto flex items-center gap-5"}>
+              <div className={"text-sm"}>
+                {Object.keys(selectedRows).length > 0 && (
+                  <div className={"text-nb-gray-200"}>
+                    <span className={"text-netbird font-medium"}>
+                      {Object.keys(selectedRows).length}
+                    </span>{" "}
+                    Peer(s) selected
+                  </div>
+                )}
+              </div>
+              {!isAllGroup && (
+                <Button
+                  variant={"primary"}
+                  className={"ml-auto"}
+                  disabled={peers?.length === 0}
+                  onClick={() => {
+                    const selectedPeers = table
+                      .getSelectedRowModel()
+                      .rows.map((row) => row.original);
+                    handleOnSave(selectedPeers).then();
+                  }}
+                >
+                  Confirm Changes
+                </Button>
+              )}
+            </div>
+          )}
+        />
+      ) : (
+        <SkeletonTable withHeader={false} />
+      )}
+    </ModalContent>
+  );
+};
+
+const PeersTableColumns: ColumnDef<Peer>[] = [
+  {
+    id: "select",
+    header: ({ table, column }) => (
+      <div className={"min-w-[20px] max-w-[20px]"}>
+        <Checkbox
+          checked={table.getIsAllPageRowsSelected()}
+          onCheckedChange={(value) => table.toggleAllRowsSelected(!!value)}
+          aria-label="Select all"
+        />
+      </div>
+    ),
+    accessorFn: (peer) => peer.id,
+    sortingFn: "checkbox",
+    cell: ({ row }) => {
+      return (
+        <div className={"min-w-[20px] max-w-[20px]"}>
+          <Checkbox
+            variant={"tableCell"}
+            checked={row.getIsSelected()}
+            onCheckedChange={(value) => row.toggleSelected(!!value)}
+            aria-label="Select row"
+          />
+        </div>
+      );
+    },
+  },
+  {
+    accessorKey: "name",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Name</DataTableHeader>;
+    },
+    sortingFn: "text",
+    cell: ({ row }) => <PeerNameCell peer={row.original} linkToPeer={false} />,
+  },
+  {
+    id: "approval_required",
+    accessorKey: "approval_required",
+    sortingFn: "basic",
+    accessorFn: (peer) => peer.approval_required,
+  },
+  {
+    id: "connected",
+    accessorKey: "connected",
+    accessorFn: (peer) => peer.connected,
+  },
+  {
+    accessorKey: "ip",
+    sortingFn: "text",
+  },
+  {
+    id: "user_name",
+    accessorFn: (peer) => (peer.user ? peer.user?.name : "Unknown"),
+  },
+  {
+    id: "user_email",
+    accessorFn: (peer) => (peer.user ? peer.user?.email : "Unknown"),
+  },
+  {
+    accessorKey: "dns_label",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Address</DataTableHeader>;
+    },
+    cell: ({ row }) => <PeerAddressCell peer={row.original} />,
+  },
+  {
+    accessorKey: "group_name_strings",
+    accessorFn: (peer) => peer.groups?.map((g) => g?.name || "").join(", "),
+    sortingFn: "text",
+  },
+  {
+    accessorKey: "group_names",
+    accessorFn: (peer) => peer.groups?.map((g) => g?.name || ""),
+    sortingFn: "text",
+    filterFn: "arrIncludesSome",
+  },
+  {
+    accessorKey: "os",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>OS</DataTableHeader>;
+    },
+    cell: ({ row }) => <PeerOSCell os={row.original.os} />,
+  },
+];

src/modules/groups/EditGroupNameModal.tsx

@@ -0,0 +1,78 @@
+import Button from "@components/Button";
+import { Input } from "@components/Input";
+import {
+  Modal,
+  ModalClose,
+  ModalContent,
+  ModalFooter,
+} from "@components/modal/Modal";
+import ModalHeader from "@components/modal/ModalHeader";
+import { IconCornerDownLeft } from "@tabler/icons-react";
+import { trim } from "lodash";
+import * as React from "react";
+import { useMemo, useState } from "react";
+
+type Props = {
+  initialName: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSuccess: (name: string) => void;
+};
+export const EditGroupNameModal = ({
+  initialName,
+  onOpenChange,
+  open,
+  onSuccess,
+}: Props) => {
+  const [name, setName] = useState(initialName);
+  const isDisabled = useMemo(() => {
+    if (name === initialName) return true;
+    const trimmedName = trim(name);
+    return trimmedName.length === 0;
+  }, [name, initialName]);
+
+  return (
+    <Modal open={open} onOpenChange={onOpenChange}>
+      <ModalContent maxWidthClass={"max-w-md"}>
+        <form>
+          <ModalHeader
+            title={"Edit Group Name"}
+            description={"Set an easily identifiable name for your group."}
+            color={"blue"}
+          />
+
+          <div className={"p-default flex flex-col gap-4"}>
+            <div>
+              <Input
+                placeholder={"e.g., AWS Servers"}
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+              />
+            </div>
+          </div>
+
+          <ModalFooter className={"items-center"} separator={false}>
+            <div className={"flex gap-3 w-full justify-end"}>
+              <ModalClose asChild={true}>
+                <Button variant={"secondary"} className={"w-full"}>
+                  Cancel
+                </Button>
+              </ModalClose>
+
+              <Button
+                variant={"primary"}
+                className={"w-full"}
+                onClick={() => onSuccess(name)}
+                disabled={isDisabled}
+                type={"submit"}
+              >
+                Confirm
+                <IconCornerDownLeft size={16} />
+              </Button>
+            </div>
+          </ModalFooter>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

src/modules/peer/AccessiblePeersSection.tsx

@@ -0,0 +1,68 @@
+import Paragraph from "@components/Paragraph";
+import SkeletonTable, {
+  SkeletonTableHeader,
+} from "@components/skeletons/SkeletonTable";
+import { usePortalElement } from "@hooks/usePortalElement";
+import useFetchApi from "@utils/api";
+import * as React from "react";
+import { lazy, Suspense } from "react";
+import { useUsers } from "@/contexts/UsersProvider";
+import type { Peer } from "@/interfaces/Peer";
+
+const AccessiblePeersTable = lazy(
+  () => import("@/modules/peer/AccessiblePeersTable"),
+);
+
+type Props = {
+  peerID: string;
+};
+export const AccessiblePeersSection = ({ peerID }: Props) => {
+  const { data: peers, isLoading } = useFetchApi<Peer[]>(
+    `/peers/${peerID}/accessible-peers`,
+  );
+  const { users } = useUsers();
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
+  const peersWithUser = peers?.map((peer) => {
+    if (!users) return peer;
+    return {
+      ...peer,
+      user: users?.find((user) => user.id === peer.user_id),
+    };
+  });
+
+  return (
+    <div className={"py-7 px-8"}>
+      <div className={"max-w-6xl"}>
+        <div className={"flex justify-between items-center mb-5"}>
+          <div>
+            <h2 ref={headingRef}>Accessible Peers</h2>
+            <Paragraph>
+              This peer can connect to the following peers within the NetBird
+              network.
+            </Paragraph>
+          </div>
+        </div>
+
+        <Suspense
+          fallback={
+            <div>
+              <SkeletonTableHeader className={"!p-0"} />
+              <div className={"mt-8 w-full"}>
+                <SkeletonTable withHeader={false} />
+              </div>
+            </div>
+          }
+        >
+          <AccessiblePeersTable
+            peerID={peerID}
+            isLoading={isLoading}
+            peers={peersWithUser}
+            headingTarget={portalTarget}
+          />
+        </Suspense>
+      </div>
+    </div>
+  );
+};

src/modules/peer/AccessiblePeersTable.tsx

@@ -0,0 +1,210 @@
+import ButtonGroup from "@components/ButtonGroup";
+import Card from "@components/Card";
+import { DataTable } from "@components/table/DataTable";
+import DataTableHeader from "@components/table/DataTableHeader";
+import DataTableRefreshButton from "@components/table/DataTableRefreshButton";
+import { DataTableRowsPerPage } from "@components/table/DataTableRowsPerPage";
+import NoResults from "@components/ui/NoResults";
+import { ColumnDef, SortingState } from "@tanstack/react-table";
+import * as React from "react";
+import { useState } from "react";
+import { useSWRConfig } from "swr";
+import PeerIcon from "@/assets/icons/PeerIcon";
+import { Peer } from "@/interfaces/Peer";
+import PeerAddressCell from "@/modules/peers/PeerAddressCell";
+import PeerLastSeenCell from "@/modules/peers/PeerLastSeenCell";
+import PeerNameCell from "@/modules/peers/PeerNameCell";
+import { PeerOSCell } from "@/modules/peers/PeerOSCell";
+
+type Props = {
+  peers?: Peer[];
+  peerID: string;
+  isLoading: boolean;
+  headingTarget?: HTMLHeadingElement | null;
+};
+
+const AccessiblePeersColumns: ColumnDef<Peer>[] = [
+  {
+    accessorKey: "name",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Name</DataTableHeader>;
+    },
+    sortingFn: "text",
+    cell: ({ row }) => <PeerNameCell peer={row.original} />,
+  },
+  {
+    id: "connected",
+    accessorKey: "connected",
+    accessorFn: (peer) => peer.connected,
+  },
+  {
+    accessorKey: "ip",
+    sortingFn: "text",
+  },
+  {
+    id: "user_name",
+    accessorFn: (peer) => (peer.user ? peer.user?.name : "Unknown"),
+  },
+  {
+    id: "user_email",
+    accessorFn: (peer) => (peer.user ? peer.user?.email : "Unknown"),
+  },
+  {
+    accessorKey: "dns_label",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Address</DataTableHeader>;
+    },
+    cell: ({ row }) => <PeerAddressCell peer={row.original} />,
+  },
+  {
+    accessorKey: "last_seen",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Last seen</DataTableHeader>;
+    },
+    sortingFn: "datetime",
+    cell: ({ row }) => <PeerLastSeenCell peer={row.original} />,
+  },
+  {
+    accessorKey: "os",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>OS</DataTableHeader>;
+    },
+    cell: ({ row }) => <PeerOSCell os={row.original.os} />,
+  },
+];
+
+export default function AccessiblePeersTable({
+  peers,
+  isLoading,
+  headingTarget,
+  peerID,
+}: Props) {
+  const { mutate } = useSWRConfig();
+  // Default sorting state of the table
+  const [sorting, setSorting] = useState<SortingState>([
+    {
+      id: "connected",
+      desc: true,
+    },
+    {
+      id: "last_seen",
+      desc: true,
+    },
+    {
+      id: "name",
+      desc: false,
+    },
+  ]);
+
+  return (
+    <DataTable
+      wrapperComponent={Card}
+      wrapperProps={{ className: "mt-6 w-full" }}
+      headingTarget={headingTarget}
+      useRowId={true}
+      sorting={sorting}
+      setSorting={setSorting}
+      minimal={true}
+      showSearchAndFilters={true}
+      inset={false}
+      tableClassName={"mt-0"}
+      text={"Peers"}
+      columns={AccessiblePeersColumns}
+      keepStateInLocalStorage={false}
+      data={peers}
+      searchPlaceholder={"Search by name, IP, owner or group..."}
+      isLoading={isLoading}
+      getStartedCard={
+        <NoResults
+          className={"py-4"}
+          title={"This peer has no accessible peers"}
+          description={
+            "Add more peers to your network or check your access control policies."
+          }
+          icon={<PeerIcon size={20} className={"fill-nb-gray-300"} />}
+        />
+      }
+      columnVisibility={{
+        connected: false,
+        ip: false,
+        user_name: false,
+        user_email: false,
+      }}
+      paginationPaddingClassName={"px-0 pt-8"}
+    >
+      {(table) => (
+        <>
+          <ButtonGroup disabled={peers?.length == 0}>
+            <ButtonGroup.Button
+              disabled={peers?.length == 0}
+              onClick={() => {
+                table.setPageIndex(0);
+                table.setColumnFilters([
+                  {
+                    id: "connected",
+                    value: undefined,
+                  },
+                ]);
+              }}
+              variant={
+                table.getColumn("connected")?.getFilterValue() == undefined
+                  ? "tertiary"
+                  : "secondary"
+              }
+            >
+              All
+            </ButtonGroup.Button>
+            <ButtonGroup.Button
+              onClick={() => {
+                table.setPageIndex(0);
+                table.setColumnFilters([
+                  {
+                    id: "connected",
+                    value: true,
+                  },
+                ]);
+              }}
+              disabled={peers?.length == 0}
+              variant={
+                table.getColumn("connected")?.getFilterValue() == true
+                  ? "tertiary"
+                  : "secondary"
+              }
+            >
+              Online
+            </ButtonGroup.Button>
+            <ButtonGroup.Button
+              onClick={() => {
+                table.setPageIndex(0);
+                table.setColumnFilters([
+                  {
+                    id: "connected",
+                    value: false,
+                  },
+                ]);
+              }}
+              disabled={peers?.length == 0}
+              variant={
+                table.getColumn("connected")?.getFilterValue() == false
+                  ? "tertiary"
+                  : "secondary"
+              }
+            >
+              Offline
+            </ButtonGroup.Button>
+          </ButtonGroup>
+
+          <DataTableRowsPerPage table={table} disabled={peers?.length == 0} />
+
+          <DataTableRefreshButton
+            isDisabled={peers?.length == 0}
+            onClick={() => {
+              mutate("/users").then();
+              mutate(`/peers/${peerID}/accessible-peers`).then();
+            }}
+          />
+        </>
+      )}
+    </DataTable>
+  );
+}

src/modules/peer/PeerNetworkRoutesSection.tsx

@@ -0,0 +1,64 @@
+import Paragraph from "@components/Paragraph";
+import SkeletonTable from "@components/skeletons/SkeletonTable";
+import { usePortalElement } from "@hooks/usePortalElement";
+import * as React from "react";
+import { lazy, Suspense } from "react";
+import { useLoggedInUser } from "@/contexts/UsersProvider";
+import type { Peer } from "@/interfaces/Peer";
+import { AddExitNodeButton } from "@/modules/exit-node/AddExitNodeButton";
+import { useHasExitNodes } from "@/modules/exit-node/useHasExitNodes";
+import AddRouteDropdownButton from "@/modules/peer/AddRouteDropdownButton";
+import usePeerRoutes from "@/modules/peer/usePeerRoutes";
+
+const PeerRoutesTable = lazy(() => import("@/modules/peer/PeerRoutesTable"));
+
+type Props = {
+  peer: Peer;
+};
+
+export const PeerNetworkRoutesSection = ({ peer }: Props) => {
+  const { peerRoutes, isLoading } = usePeerRoutes({ peer });
+  const hasExitNodes = useHasExitNodes(peer);
+  const { isUser } = useLoggedInUser();
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
+  return (
+    <div className={"pt-7 pb-10 px-8"}>
+      <div className={"max-w-6xl"}>
+        <div className={"flex justify-between items-center mb-5"}>
+          <div>
+            <h2 ref={headingRef}>Network Routes</h2>
+            <Paragraph>
+              Access other networks without installing NetBird on every
+              resource.
+            </Paragraph>
+          </div>
+          <div className={"inline-flex gap-4 justify-end"}>
+            <div className={"gap-4 flex"}>
+              <AddExitNodeButton peer={peer} firstTime={!hasExitNodes} />
+              <AddRouteDropdownButton />
+            </div>
+          </div>
+        </div>
+
+        <Suspense
+          fallback={
+            <div>
+              <div className={"mt-0 w-full"}>
+                <SkeletonTable withHeader={false} />
+              </div>
+            </div>
+          }
+        >
+          <PeerRoutesTable
+            peer={peer}
+            isLoading={isLoading}
+            peerRoutes={peerRoutes}
+            headingTarget={portalTarget}
+          />
+        </Suspense>
+      </div>
+    </div>
+  );
+};

src/modules/peer/PeerRoutesTable.tsx

@@ -3,20 +3,21 @@ import { DataTable } from "@components/table/DataTable";
 import DataTableHeader from "@components/table/DataTableHeader";
 import NoResults from "@components/ui/NoResults";
 import { ColumnDef, SortingState } from "@tanstack/react-table";
-import { usePathname } from "next/navigation";
-import React from "react";
+import { cn } from "@utils/helpers";
+import React, { useState } from "react";
 import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
-import { useLocalStorage } from "@/hooks/useLocalStorage";
 import { Peer } from "@/interfaces/Peer";
 import { Route } from "@/interfaces/Route";
 import PeerRouteActionCell from "@/modules/peer/PeerRouteActionCell";
 import PeerRouteActiveCell from "@/modules/peer/PeerRouteActiveCell";
 import PeerRouteNameCell from "@/modules/peer/PeerRouteNameCell";
-import usePeerRoutes from "@/modules/peer/usePeerRoutes";
 import GroupedRouteNetworkRangeCell from "@/modules/route-group/GroupedRouteNetworkRangeCell";
 import RouteDistributionGroupsCell from "@/modules/routes/RouteDistributionGroupsCell";
 
 type Props = {
+  peerRoutes?: Route[];
+  isLoading: boolean;
+  headingTarget?: HTMLHeadingElement | null;
   peer: Peer;
 };
 
@@ -67,50 +68,50 @@ export const RouteTableColumns: ColumnDef<Route>[] = [
   },
 ];
 
-export default function PeerRoutesTable({ peer }: Props) {
-  const path = usePathname();
-
+export default function PeerRoutesTable({
+  peerRoutes,
+  isLoading,
+  peer,
+}: Props) {
   // Default sorting state of the table
-  const [sorting, setSorting] = useLocalStorage<SortingState>(
-    "netbird-table-sort" + path,
-    [
-      {
-        id: "network_id",
-        desc: true,
-      },
-    ],
-  );
-
-  const peerRoutes = usePeerRoutes({ peer });
+  const [sorting, setSorting] = useState<SortingState>([
+    {
+      id: "network_id",
+      desc: true,
+    },
+  ]);
 
   return (
     <>
-      <Card className={"mt-5 w-full"}>
-        {peerRoutes && peerRoutes.length > 0 ? (
-          <DataTable
-            text={"Network Routes"}
-            tableClassName={"mt-0"}
-            minimal={true}
-            inset={false}
-            sorting={sorting}
-            setSorting={setSorting}
-            columns={RouteTableColumns}
-            data={peerRoutes}
+      <DataTable
+        wrapperComponent={Card}
+        wrapperProps={{
+          className: cn("w-full"),
+        }}
+        text={"Network Routes"}
+        tableClassName={"mt-0"}
+        getStartedCard={
+          <NoResults
+            className={"py-4"}
+            title={"This peer has no network routes"}
+            description={
+              "You don't have any assigned network routes yet. You can add this peer to an existing network or create a new network route."
+            }
+            icon={
+              <NetworkRoutesIcon size={20} className={"fill-nb-gray-300"} />
+            }
           />
-        ) : (
-          <div className={"py-8"}>
-            <NoResults
-              title={"This peer has no network routes"}
-              description={
-                "You don't have any assigned network routes yet. You can add this peer to an existing network or create a new network route."
-              }
-              icon={
-                <NetworkRoutesIcon size={20} className={"fill-nb-gray-300"} />
-              }
-            />
-          </div>
-        )}
-      </Card>
+        }
+        minimal={true}
+        showSearchAndFilters={false}
+        inset={false}
+        isLoading={isLoading}
+        sorting={sorting}
+        setSorting={setSorting}
+        columns={RouteTableColumns}
+        data={peerRoutes}
+        paginationPaddingClassName={"px-0 pt-8"}
+      />
     </>
   );
 }

src/modules/peer/usePeerRoutes.tsx

@@ -7,11 +7,12 @@ import { Route } from "@/interfaces/Route";
 type Props = {
   peer: Peer;
 };
+
 export default function usePeerRoutes({ peer }: Props) {
-  const { data: routes } = useFetchApi<Route[]>("/routes");
+  const { data: routes, isLoading } = useFetchApi<Route[]>("/routes");
   const { peerGroups } = usePeerGroups(peer);
 
-  return useMemo(() => {
+  const peerRoutes = useMemo(() => {
     if (!routes) return undefined;
     return routes.filter((route) => {
       const foundPeer = route.peer === peer.id;
@@ -24,4 +25,6 @@ export default function usePeerRoutes({ peer }: Props) {
         : false;
     });
   }, [routes, peer.id, peerGroups]);
+
+  return { peerRoutes, isLoading };
 }

src/modules/peers/PeerNameCell.tsx

@@ -1,3 +1,4 @@
+import { cn } from "@utils/helpers";
 import { useRouter } from "next/navigation";
 import * as React from "react";
 import { useMemo } from "react";
@@ -8,8 +9,9 @@ import { ExitNodePeerIndicator } from "@/modules/exit-node/ExitNodePeerIndicator
 
 type Props = {
   peer: Peer;
+  linkToPeer?: boolean;
 };
-export default function PeerNameCell({ peer }: Props) {
+export default function PeerNameCell({ peer, linkToPeer = true }: Props) {
   const { users } = useUsers();
   const router = useRouter();
   const { isOwnerOrAdmin } = useLoggedInUser();
@@ -21,11 +23,14 @@ export default function PeerNameCell({ peer }: Props) {
   return (
     <div>
       <div
-        className={
-          "flex items-center max-w-[300px] 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"
-        }
+        className={cn(
+          "flex items-center max-w-[300px] gap-2 dark:text-neutral-300 text-neutral-500 transition-all py-2 px-3 rounded-md ",
+          linkToPeer &&
+            "hover:text-neutral-100 hover:bg-nb-gray-800/60 cursor-pointer",
+        )}
         data-testid="peer-name-cell"
-        onClick={() => router.push("/peer?id=" + peer.id)}
+        aria-label={`View details of peer ${peer.name}`}
+        onClick={() => linkToPeer && router.push("/peer?id=" + peer.id)}
       >
         <ActiveInactiveRow
           active={peer.connected}

src/modules/peers/PeersTable.tsx

@@ -53,6 +53,7 @@ const PeersTableColumns: ColumnDef<Peer>[] = [
       <div className={"min-w-[20px] max-w-[20px]"}>
         <Checkbox
           checked={row.getIsSelected()}
+          variant={"tableCell"}
           onCheckedChange={(value) => row.toggleSelected(!!value)}
           aria-label="Select row"
         />
@@ -236,6 +237,7 @@ export default function PeersTable({ peers, isLoading, headingTarget }: Props) {
         data={peers}
         searchPlaceholder={"Search by name, IP, owner or group..."}
         columnVisibility={{
+          select: !isUser,
           connected: false,
           approval_required: false,
           group_name_strings: false,

src/modules/posture-checks/helper/PostureCheckHelper.ts

@@ -0,0 +1,34 @@
+import {
+  GeoLocation,
+  GeoLocationCheck,
+  OperatingSystemVersionCheck,
+} from "@/interfaces/PostureCheck";
+
+export const validateOSCheck = (osCheck?: OperatingSystemVersionCheck) => {
+  if (!osCheck) return;
+  const os = osCheck;
+  if (os.darwin && os.darwin.min_version == "") os.darwin.min_version = "0";
+  if (os.android && os.android.min_version == "") os.android.min_version = "0";
+  if (os.windows && os.windows.min_kernel_version == "")
+    os.windows.min_kernel_version = "0";
+  if (os.linux && os.linux.min_kernel_version == "")
+    os.linux.min_kernel_version = "0";
+  if (os.ios && os.ios.min_version == "") os.ios.min_version = "0";
+  return os;
+};
+
+export const validateLocationCheck = (locationCheck?: GeoLocationCheck) => {
+  if (!locationCheck) return;
+  if (!locationCheck.locations) return;
+  return {
+    action: locationCheck.action,
+    locations: locationCheck.locations.map((location) => {
+      if (location.city_name == "")
+        return { country_code: location.country_code } as GeoLocation;
+      return {
+        country_code: location.country_code,
+        city_name: location.city_name,
+      } as GeoLocation;
+    }),
+  } as GeoLocationCheck;
+};

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

@@ -5,32 +5,27 @@ import { Input } from "@components/Input";
 import { Label } from "@components/Label";
 import { Modal, ModalContent, ModalFooter } from "@components/modal/Modal";
 import ModalHeader from "@components/modal/ModalHeader";
-import { notify } from "@components/Notification";
 import Paragraph from "@components/Paragraph";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@components/Tabs";
 import { Textarea } from "@components/Textarea";
-import { useApiCall } from "@utils/api";
 import { cn } from "@utils/helpers";
 import { isEmpty } from "lodash";
 import { ExternalLinkIcon, LayoutList, ShieldCheck, Text } from "lucide-react";
 import React, { useState } from "react";
-import { useSWRConfig } from "swr";
-import {
-  GeoLocationCheck,
-  OperatingSystemVersionCheck,
-  PostureCheck,
-} from "@/interfaces/PostureCheck";
+import { PostureCheck } from "@/interfaces/PostureCheck";
 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";
 import { PostureCheckProcess } from "@/modules/posture-checks/checks/PostureCheckProcess";
+import { usePostureCheck } from "@/modules/posture-checks/usePostureCheck";
 
 type Props = {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   onSuccess?: (check: PostureCheck) => void;
   postureCheck?: PostureCheck;
+  useSave?: boolean;
 };
 
 export default function PostureCheckModal({
@@ -38,109 +33,28 @@ export default function PostureCheckModal({
   onOpenChange,
   onSuccess,
   postureCheck,
+  useSave = true,
 }: Props) {
-  const postureCheckRequest = useApiCall<PostureCheck>("/posture-checks");
-  const { mutate } = useSWRConfig();
+  const {
+    state: check,
+    dispatch: setCheck,
+    updateOrCreateAndNotify: updateOrCreate,
+  } = usePostureCheck({
+    postureCheck,
+    onSuccess,
+  });
 
-  const [name, setName] = useState(postureCheck?.name || "");
-  const [description, setDescription] = useState(
-    postureCheck?.description || "",
-  );
-
-  const [nbVersionCheck, setNbVersionCheck] = useState(
-    postureCheck?.checks.nb_version_check || undefined,
-  );
-  const [geoLocationCheck, setGeoLocationCheckCheck] = useState(
-    postureCheck?.checks.geo_location_check || undefined,
-  );
-  const [osVersionCheck, setOsVersionCheck] = useState(
-    postureCheck?.checks.os_version_check || undefined,
-  );
-  const [peerNetworkRangeCheck, setPeerNetworkRangeCheck] = useState(
-    postureCheck?.checks.peer_network_range_check || undefined,
-  );
-  const [processCheck, setProcessCheck] = useState(
-    postureCheck?.checks.process_check || undefined,
-  );
-
-  const validateOSCheck = (osCheck?: OperatingSystemVersionCheck) => {
-    if (!osCheck) return;
-    const os = osCheck;
-    if (os.darwin && os.darwin.min_version == "") os.darwin.min_version = "0";
-    if (os.android && os.android.min_version == "")
-      os.android.min_version = "0";
-    if (os.windows && os.windows.min_kernel_version == "")
-      os.windows.min_kernel_version = "0";
-    if (os.linux && os.linux.min_kernel_version == "")
-      os.linux.min_kernel_version = "0";
-    if (os.ios && os.ios.min_version == "") os.ios.min_version = "0";
-    return os;
-  };
-
-  const validateLocationCheck = (locationCheck?: GeoLocationCheck) => {
-    if (!locationCheck) return;
-    if (!locationCheck.locations) return;
-    return {
-      action: locationCheck.action,
-      locations: locationCheck.locations.map((location) => {
-        if (location.city_name == "")
-          return { country_code: location.country_code };
-        return {
-          country_code: location.country_code,
-          city_name: location.city_name,
-        };
-      }),
-    };
-  };
-
-  const updateOrCreatePostureCheck = () => {
-    const newData = {
-      name,
-      description,
-      checks: {
-        nb_version_check: nbVersionCheck,
-        geo_location_check: validateLocationCheck(geoLocationCheck),
-        os_version_check: validateOSCheck(osVersionCheck),
-        peer_network_range_check: peerNetworkRangeCheck,
-        process_check: processCheck,
-      },
-    };
-
-    const updateOrCreate = !postureCheck
-      ? () =>
-          postureCheckRequest.post(newData).then((check: PostureCheck) => {
-            mutate("/posture-checks");
-            onSuccess?.(check);
-            onOpenChange(false);
-          })
-      : () =>
-          postureCheckRequest
-            .put({ ...newData, id: postureCheck.id }, `/${postureCheck.id}`)
-            .then((check: PostureCheck) => {
-              mutate("/posture-checks").then();
-              onSuccess?.(check);
-              onOpenChange(false);
-            });
-
-    notify({
-      title: `Posture Check ${newData.name}`,
-      description: `Posture Check was ${
-        postureCheck ? "updated" : "created"
-      } successfully.`,
-      loadingMessage: `${
-        postureCheck ? "Updating" : "Creating"
-      } your posture check...`,
-      promise: updateOrCreate(),
-    });
+  const close = () => {
+    onSuccess && onSuccess(check);
   };
 
   const isAtLeastOneCheckEnabled =
-    !!nbVersionCheck ||
-    !!geoLocationCheck ||
-    !!osVersionCheck ||
-    !!peerNetworkRangeCheck ||
-    !!processCheck;
-  const canCreate = !isEmpty(name) && isAtLeastOneCheckEnabled;
+    !!check?.checks?.nb_version_check ||
+    !!check?.checks?.geo_location_check ||
+    !!check?.checks?.os_version_check ||
+    !!check?.checks?.peer_network_range_check ||
+    !!check?.checks.process_check;
+  const canCreate = !isEmpty(check?.name) && isAtLeastOneCheckEnabled;
 
   const [tab, setTab] = useState("checks");
 
@@ -186,24 +100,49 @@ export default function PostureCheckModal({
             <TabsContent value={"checks"} className={"pb-6 px-8"}>
               <>
                 <PostureCheckNetBirdVersion
-                  value={nbVersionCheck}
-                  onChange={setNbVersionCheck}
+                  value={check?.checks?.nb_version_check}
+                  onChange={(v) =>
+                    setCheck({
+                      type: "version",
+                      payload: v,
+                    })
+                  }
                 />
                 <PostureCheckGeoLocation
-                  value={geoLocationCheck}
-                  onChange={setGeoLocationCheckCheck}
+                  value={check?.checks?.geo_location_check}
+                  onChange={(v) =>
+                    setCheck({
+                      type: "location",
+                      payload: v,
+                    })
+                  }
                 />
                 <PostureCheckPeerNetworkRange
-                  value={peerNetworkRangeCheck}
-                  onChange={setPeerNetworkRangeCheck}
+                  value={check?.checks?.peer_network_range_check}
+                  onChange={(v) =>
+                    setCheck({
+                      type: "network_range",
+                      payload: v,
+                    })
+                  }
                 />
                 <PostureCheckOperatingSystem
-                  value={osVersionCheck}
-                  onChange={setOsVersionCheck}
+                  value={check?.checks?.os_version_check}
+                  onChange={(v) =>
+                    setCheck({
+                      type: "os",
+                      payload: v,
+                    })
+                  }
                 />
                 <PostureCheckProcess
-                  value={processCheck}
-                  onChange={setProcessCheck}
+                  value={check?.checks?.process_check}
+                  onChange={(v) =>
+                    setCheck({
+                      type: "process_check",
+                      payload: v,
+                    })
+                  }
                 />
               </>
             </TabsContent>
@@ -217,8 +156,13 @@ export default function PostureCheckModal({
                   <Input
                     autoFocus={true}
                     tabIndex={0}
-                    value={name}
-                    onChange={(e) => setName(e.target.value)}
+                    value={check?.name}
+                    onChange={(e) =>
+                      setCheck({
+                        type: "name",
+                        payload: e.target.value,
+                      })
+                    }
                     placeholder={"e.g., NetBird Version > 0.25.0"}
                   />
                 </div>
@@ -229,8 +173,13 @@ export default function PostureCheckModal({
                     policy.
                   </HelpText>
                   <Textarea
-                    value={description}
-                    onChange={(e) => setDescription(e.target.value)}
+                    value={check?.description}
+                    onChange={(e) =>
+                      setCheck({
+                        type: "description",
+                        payload: e.target.value,
+                      })
+                    }
                     placeholder={
                       "e.g., Check if the NetBird version is bigger than 0.25.0"
                     }
@@ -288,7 +237,13 @@ export default function PostureCheckModal({
                   <Button
                     variant={"primary"}
                     disabled={!canCreate}
-                    onClick={updateOrCreatePostureCheck}
+                    onClick={() => {
+                      if (useSave) {
+                        updateOrCreate();
+                      } else {
+                        close();
+                      }
+                    }}
                   >
                     {postureCheck ? "Save Changes" : "Create Posture Check"}
                   </Button>

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

@@ -113,6 +113,7 @@ export const PostureChecksColumns: ColumnDef<PostureCheck>[] = [
           checked={row.getIsSelected()}
           onCheckedChange={(value) => row.toggleSelected(!!value)}
           aria-label="Select row"
+          variant={"tableCell"}
         />
       </div>
     ),

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

@@ -26,6 +26,7 @@ import { PostureCheckPolicyUsageCell } from "@/modules/posture-checks/table/cell
 type Props = {
   isLoading: boolean;
   postureChecks: PostureCheck[] | undefined;
+  headingTarget?: HTMLHeadingElement | null;
 };
 
 const Columns: ColumnDef<PostureCheck>[] = [
@@ -64,7 +65,11 @@ const Columns: ColumnDef<PostureCheck>[] = [
   },
 ];
 
-export default function PostureCheckTable({ postureChecks, isLoading }: Props) {
+export default function PostureCheckTable({
+  postureChecks,
+  isLoading,
+  headingTarget,
+}: Props) {
   const { data: policies } = useFetchApi<Policy[]>("/policies");
   const { mutate } = useSWRConfig();
   const path = usePathname();
@@ -76,7 +81,8 @@ export default function PostureCheckTable({ postureChecks, isLoading }: Props) {
       if (!policies) return check;
       const usage = policies?.filter((policy) => {
         if (!policy.source_posture_checks) return false;
-        return policy.source_posture_checks.includes(checkId);
+        let checks = policy.source_posture_checks as string[];
+        return checks.includes(checkId);
       });
       const isOnePolicyEnabled = usage.some((policy) => policy.enabled);
       return {
@@ -109,11 +115,13 @@ export default function PostureCheckTable({ postureChecks, isLoading }: Props) {
           open={postureCheckModal}
           key={currentRow ? 1 : 0}
           onOpenChange={setPostureCheckModal}
+          onSuccess={() => setPostureCheckModal(false)}
           postureCheck={currentRow}
         />
       )}
 
       <DataTable
+        headingTarget={headingTarget}
         isLoading={isLoading}
         text={"Posture Check"}
         sorting={sorting}
@@ -174,7 +182,10 @@ export default function PostureCheckTable({ postureChecks, isLoading }: Props) {
             learnMore={
               <>
                 Learn more about
-                <InlineLink href={"https://docs.netbird.io/how-to/manage-posture-checks"} 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

@@ -11,14 +11,26 @@ import { ProcessTooltip } from "@/modules/posture-checks/checks/tooltips/Process
 
 type Props = {
   check: PostureCheck;
+  children?: React.ReactNode;
+  disableHover?: boolean;
+  className?: string;
+  onClick?: () => void;
 };
-export const PostureCheckChecksCell = ({ check }: Props) => {
+export const PostureCheckChecksCell = ({
+  check,
+  children,
+  disableHover = false,
+  className,
+  onClick,
+}: Props) => {
   return (
-    <div className={"flex"}>
+    <div className={"flex"} onClick={onClick}>
       <div
-        className={
-          "flex items-center gap-3 bg-nb-gray-900/80 hover:bg-nb-gray-800 border border-nb-gray-800/50 py-1 rounded-full px-1 transition-all"
-        }
+        className={cn(
+          "flex items-center gap-3 bg-nb-gray-900/80  border border-nb-gray-800/50 py-1 rounded-full px-1 transition-all",
+          !disableHover && "hover:bg-nb-gray-800",
+          className,
+        )}
       >
         <div className={"flex -space-x-2 "}>
           {check.checks.nb_version_check && (
@@ -85,6 +97,7 @@ export const PostureCheckChecksCell = ({ check }: Props) => {
             </ProcessTooltip>
           )}
         </div>
+        {children}
       </div>
     </div>
   );

src/modules/posture-checks/ui/PostureCheckTab.tsx

@@ -43,53 +43,59 @@ export const PostureCheckTab = ({
   const [browseModal, setBrowseModal] = useState(false);
   const [currentEditCheck, setCurrentEditCheck] = useState<PostureCheck>();
 
-  return isLoading ? (
-    <TabsContent
-      value={"posture_checks"}
-      className={"px-8 pb-8 mt-3 gap-2 flex flex-col"}
-    >
-      <Skeleton width={"100%"} height={41} />
-      <Skeleton width={"100%"} height={42} />
-      <Skeleton width={"100%"} height={42} />
-      <Skeleton width={"100%"} height={41} />
-    </TabsContent>
-  ) : (
-    <TabsContent value={"posture_checks"} className={"px-8 pb-8 mt-3"}>
-      {checkModal && (
-        <PostureCheckModal
-          open={checkModal}
-          onOpenChange={setCheckModal}
-          onSuccess={(check) => addPostureChecks([check])}
-          postureCheck={currentEditCheck}
-        />
+  return (
+    <TabsContent value={"posture_checks"} className={"px-8 pb-8 mt-3 relative"}>
+      {isLoading && (
+        <div className={"flex flex-col gap-2"}>
+          <Skeleton width={"100%"} height={41} />
+          <Skeleton width={"100%"} height={42} />
+          <Skeleton width={"100%"} height={42} />
+          <Skeleton width={"100%"} height={41} />
+        </div>
       )}
 
-      {browseModal && (
-        <PostureCheckBrowseModal
-          open={browseModal}
-          onOpenChange={setBrowseModal}
-          onSuccess={(check) => addPostureChecks(check)}
-        />
-      )}
+      {!isLoading && (
+        <>
+          {checkModal && (
+            <PostureCheckModal
+              open={checkModal}
+              onOpenChange={setCheckModal}
+              onSuccess={(check) => {
+                addPostureChecks([check]);
+                setCheckModal(false);
+              }}
+              postureCheck={currentEditCheck}
+            />
+          )}
 
-      <div className={"flex flex-col gap-3"}>
-        <PostureCheckMinimalTable
-          data={postureChecks}
-          onEditClick={(check) => {
-            setCurrentEditCheck(check);
-            setCheckModal(true);
-          }}
-          onAddClick={() => {
-            setCurrentEditCheck(undefined);
-            setCheckModal(true);
-          }}
-          onBrowseClick={() => {
-            setCurrentEditCheck(undefined);
-            setBrowseModal(true);
-          }}
-          onRemoveClick={removePostureCheck}
-        />
-      </div>
+          {browseModal && (
+            <PostureCheckBrowseModal
+              open={browseModal}
+              onOpenChange={setBrowseModal}
+              onSuccess={(check) => addPostureChecks(check)}
+            />
+          )}
+
+          <div className={"flex flex-col gap-3"}>
+            <PostureCheckMinimalTable
+              data={postureChecks}
+              onEditClick={(check) => {
+                setCurrentEditCheck(check);
+                setCheckModal(true);
+              }}
+              onAddClick={() => {
+                setCurrentEditCheck(undefined);
+                setCheckModal(true);
+              }}
+              onBrowseClick={() => {
+                setCurrentEditCheck(undefined);
+                setBrowseModal(true);
+              }}
+              onRemoveClick={removePostureCheck}
+            />
+          </div>
+        </>
+      )}
     </TabsContent>
   );
 };

src/modules/posture-checks/usePostureCheck.ts

@@ -0,0 +1,144 @@
+import { notify } from "@components/Notification";
+import { useApiCall } from "@utils/api";
+import { useReducer } from "react";
+import { useSWRConfig } from "swr";
+import { PostureCheck } from "@/interfaces/PostureCheck";
+import {
+  validateLocationCheck,
+  validateOSCheck,
+} from "@/modules/posture-checks/helper/PostureCheckHelper";
+
+// Posture Check Reducer Type
+type PostureCheckReducerType = {
+  state: PostureCheck;
+  action: any;
+};
+
+interface PostureCheckAction {
+  type:
+    | "name"
+    | "description"
+    | "version"
+    | "location"
+    | "os"
+    | "network_range"
+    | "process_check";
+  payload: any;
+}
+
+const postureCheckReducer = (
+  state: PostureCheck,
+  action: PostureCheckAction,
+): PostureCheck => {
+  switch (action.type) {
+    case "name":
+      return { ...state, name: action.payload };
+    case "description":
+      return { ...state, description: action.payload };
+    case "version":
+      return {
+        ...state,
+        checks: {
+          ...state.checks,
+          nb_version_check: action.payload,
+        },
+      };
+    case "location":
+      return {
+        ...state,
+        checks: {
+          ...state.checks,
+          geo_location_check: validateLocationCheck(action.payload),
+        },
+      };
+
+    case "os":
+      return {
+        ...state,
+        checks: {
+          ...state.checks,
+          os_version_check: validateOSCheck(action.payload),
+        },
+      };
+
+    case "network_range":
+      return {
+        ...state,
+        checks: {
+          ...state.checks,
+          peer_network_range_check: action.payload,
+        },
+      };
+
+    case "process_check":
+      return {
+        ...state,
+        checks: {
+          ...state.checks,
+          process_check: action.payload,
+        },
+      };
+
+    default:
+      return state;
+  }
+};
+
+type Props = {
+  postureCheck?: PostureCheck;
+  onSuccess?: (check: PostureCheck) => void;
+};
+export const usePostureCheck = ({ postureCheck, onSuccess }: Props = {}) => {
+  const postureCheckRequest = useApiCall<PostureCheck>("/posture-checks", true);
+  const { mutate } = useSWRConfig();
+  const [state, dispatch] = useReducer(
+    postureCheckReducer,
+    postureCheck || {
+      id: "",
+      name: "",
+      description: "",
+      checks: {
+        nb_version_check: undefined,
+        geo_location_check: undefined,
+        os_version_check: undefined,
+        peer_network_range_check: undefined,
+      },
+    },
+  );
+
+  const updateOrCreate = (check: PostureCheck): Promise<PostureCheck> => {
+    const hasID = check?.id !== "" && check?.id !== undefined;
+    const withoutID = { ...check, id: undefined };
+    return !hasID
+      ? postureCheckRequest.post(withoutID)
+      : postureCheckRequest.put(check, `/${check.id}`);
+  };
+
+  const updateOrCreateAndNotify = async (
+    checkToUpdateOrCreate?: PostureCheck,
+  ) => {
+    const call = () => updateOrCreate(checkToUpdateOrCreate || state);
+    let response = undefined;
+    notify({
+      title: `Posture Check ${state.name}`,
+      description: `Posture Check was ${
+        postureCheck ? "updated" : "created"
+      } successfully.`,
+      loadingMessage: `${
+        postureCheck ? "Updating" : "Creating"
+      } your posture check...`,
+      promise: call().then((check) => {
+        mutate("/posture-checks");
+        onSuccess && onSuccess(check);
+        response = check;
+      }),
+    });
+    if (response === undefined) {
+      return Promise.reject("Failed to create or update posture check");
+    } else {
+      return Promise.resolve(response);
+    }
+  };
+
+  return { state, dispatch, updateOrCreateAndNotify, updateOrCreate };
+};

src/modules/route-group/GroupedRouteNameCell.tsx

@@ -6,7 +6,9 @@ import ActiveInactiveRow from "@/modules/common-table-rows/ActiveInactiveRow";
 type Props = {
   groupedRoute: GroupedRoute;
 };
-export default function GroupedRouteNameCell({ groupedRoute }: Props) {
+export default function GroupedRouteNameCell({
+  groupedRoute,
+}: Readonly<Props>) {
   return (
     <div className={"flex gap-6 items-center min-w-[270px] max-w-[270px]"}>
       <ChevronRightIcon
@@ -25,6 +27,7 @@ export default function GroupedRouteNameCell({ groupedRoute }: Props) {
         active={groupedRoute.enabled}
         inactiveDot={"gray"}
         text={groupedRoute.network_id}
+        dataCy={groupedRoute.network_id}
       >
         <DescriptionWithTooltip
           className={"mt-1"}

src/modules/route-group/NetworkRoutesTable.tsx

@@ -11,7 +11,7 @@ import { ColumnDef, SortingState } from "@tanstack/react-table";
 import { cloneDeep } from "lodash";
 import { ExternalLinkIcon, PlusCircle } from "lucide-react";
 import { usePathname } from "next/navigation";
-import React from "react";
+import React, { useState } from "react";
 import { useSWRConfig } from "swr";
 import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
 import GroupRouteProvider from "@/contexts/GroupRouteProvider";
@@ -110,11 +110,14 @@ type Props = {
   isLoading: boolean;
   groupedRoutes?: GroupedRoute[];
   routes?: Route[];
+  headingTarget?: HTMLHeadingElement | null;
 };
+
 export default function NetworkRoutesTable({
   isLoading,
   groupedRoutes,
   routes,
+  headingTarget,
 }: Props) {
   const { mutate } = useSWRConfig();
   const path = usePathname();
@@ -138,9 +141,13 @@ export default function NetworkRoutesTable({
     ],
   );
 
+  const [routeModal, setRouteModal] = useState(false);
+
   return (
     <RouteAddRoutingPeerProvider>
+      <RouteModal open={routeModal} setOpen={setRouteModal} />
       <DataTable
+        headingTarget={headingTarget}
         isLoading={isLoading}
         text={"Network Routes"}
         sorting={sorting}
@@ -182,12 +189,14 @@ export default function NetworkRoutesTable({
             button={
               <div className={"gap-x-4 flex items-center justify-center"}>
                 <AddExitNodeButton />
-                <RouteModal>
-                  <Button variant={"primary"} className={""}>
-                    <PlusCircle size={16} />
-                    Add Route
-                  </Button>
-                </RouteModal>
+                <Button
+                  variant={"primary"}
+                  className={""}
+                  onClick={() => setRouteModal(true)}
+                >
+                  <PlusCircle size={16} />
+                  Add Route
+                </Button>
               </div>
             }
             learnMore={
@@ -211,12 +220,14 @@ export default function NetworkRoutesTable({
             {routes && routes?.length > 0 && (
               <div className={"gap-x-4 ml-auto flex"}>
                 <AddExitNodeButton />
-                <RouteModal>
-                  <Button variant={"primary"} className={""}>
-                    <PlusCircle size={16} />
-                    Add Route
-                  </Button>
-                </RouteModal>
+                <Button
+                  variant={"primary"}
+                  className={""}
+                  onClick={() => setRouteModal(true)}
+                >
+                  <PlusCircle size={16} />
+                  Add Route
+                </Button>
               </div>
             )}
           </>

src/modules/routes/RouteAccessControlGroups.tsx

@@ -0,0 +1,22 @@
+import MultipleGroups from "@components/ui/MultipleGroups";
+import * as React from "react";
+import { useGroups } from "@/contexts/GroupsProvider";
+import { Group } from "@/interfaces/Group";
+import { Route } from "@/interfaces/Route";
+import EmptyRow from "@/modules/common-table-rows/EmptyRow";
+
+type Props = {
+  route: Route;
+};
+export default function RouteAccessControlGroups({ route }: Props) {
+  const { groups } = useGroups();
+  if (!route?.access_control_groups) return <EmptyRow />;
+
+  const allGroups = route?.access_control_groups
+    .map((group) => {
+      return groups?.find((g) => g.id == group);
+    })
+    .filter((g) => g != undefined) as Group[];
+
+  return <MultipleGroups groups={allGroups} />;
+}

src/modules/routes/RouteAddRoutingPeerModal.tsx

@@ -16,6 +16,7 @@ import Paragraph from "@components/Paragraph";
 import { PeerGroupSelector } from "@components/PeerGroupSelector";
 import { PeerSelector } from "@components/PeerSelector";
 import Separator from "@components/Separator";
+import { uniqBy } from "lodash";
 import { ExternalLinkIcon, PlusCircle } from "lucide-react";
 import React, { useMemo, useState } from "react";
 import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
@@ -62,7 +63,18 @@ function Content({ onSuccess, groupedRoute, peer }: ModalProps) {
   const [routingPeer, setRoutingPeer] = useState<Peer | undefined>(
     peer || undefined,
   );
-  const [groups, setGroups, { save }] = useGroupHelper({
+  const [groups, setGroups, { getGroupsToUpdate }] = useGroupHelper({
+    initial: [],
+  });
+
+  /**
+   * Access Control Groups
+   */
+  const [
+    accessControlGroups,
+    setAccessControlGroups,
+    { getGroupsToUpdate: getAccessControlGroupsToUpdate },
+  ] = useGroupHelper({
     initial: [],
   });
 
@@ -84,10 +96,32 @@ function Content({ onSuccess, groupedRoute, peer }: ModalProps) {
   // Add peer to route
   const createRouteHandler = async () => {
     if (!routeNetwork) return;
-    const saveGroups = await save();
-    const groupIds = saveGroups
-      .map((g) => g.id)
-      .filter((id) => id !== undefined) as string[];
+    // Create groups that do not exist
+    const g2 = getGroupsToUpdate();
+    const g3 = getAccessControlGroupsToUpdate();
+    const createOrUpdateGroups = uniqBy([...g2, ...g3], "name").map(
+      (g) => g.promise,
+    );
+    const createdGroups = await Promise.all(
+      createOrUpdateGroups.map((call) => call()),
+    );
+    // Get distribution group ids
+    const groupIds = groups
+      .map((g) => {
+        const find = createdGroups.find((group) => group.name === g.name);
+        return find?.id;
+      })
+      .filter((g) => g !== undefined) as string[];
+
+    let accessControlGroupIds: string[] | undefined = undefined;
+    if (accessControlGroups.length > 0) {
+      accessControlGroupIds = accessControlGroups
+        .map((g) => {
+          const find = createdGroups.find((group) => group.name === g.name);
+          return find?.id;
+        })
+        .filter((g) => g !== undefined) as string[];
+    }
 
     let useRange = false;
     if (routeNetwork?.domains) {
@@ -109,6 +143,7 @@ function Content({ onSuccess, groupedRoute, peer }: ModalProps) {
         metric: 9999,
         masquerade: true,
         groups: groupIds,
+        access_control_groups: accessControlGroupIds || undefined,
       },
       onSuccess,
       "Peer was successfully added to the route",
@@ -120,8 +155,13 @@ function Content({ onSuccess, groupedRoute, peer }: ModalProps) {
     return !routingPeer || groups.length == 0 || !routeNetwork;
   }, [routingPeer, groups, routeNetwork]);
 
+  const singleRoutingPeerGroups = useMemo(() => {
+    if (!routingPeer) return [];
+    return routingPeer?.groups;
+  }, [routingPeer]);
+
   return (
-    <ModalContent maxWidthClass={"max-w-lg"}>
+    <ModalContent maxWidthClass={"max-w-2xl"}>
       <ModalHeader
         icon={<NetworkRoutesIcon className={"fill-netbird"} />}
         title={"Add New Routing Peer"}
@@ -164,6 +204,18 @@ function Content({ onSuccess, groupedRoute, peer }: ModalProps) {
           </HelpText>
           <PeerGroupSelector onChange={setGroups} values={groups} />
         </div>
+        <div>
+          <Label>Access Control Groups (optional)</Label>
+          <HelpText>
+            These groups offer a more granular control of internal services in
+            your network. They can be used in access control policies to limit
+            and control access of this route.
+          </HelpText>
+          <PeerGroupSelector
+            onChange={setAccessControlGroups}
+            values={accessControlGroups}
+          />
+        </div>
       </div>
       <ModalFooter className={"items-center"}>
         <div className={"w-full"}>

src/modules/routes/RouteModal.tsx

@@ -44,25 +44,91 @@ import {
   Text,
   VenetianMask,
 } from "lucide-react";
+import { useRouter } from "next/navigation";
 import React, { useEffect, useMemo, useReducer, useRef, useState } from "react";
 import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
+import { useDialog } from "@/contexts/DialogProvider";
 import { useRoutes } from "@/contexts/RoutesProvider";
 import { Peer } from "@/interfaces/Peer";
+import { Policy } from "@/interfaces/Policy";
 import { Route } from "@/interfaces/Route";
+import { AccessControlModalContent } from "@/modules/access-control/AccessControlModal";
 import useGroupHelper from "@/modules/groups/useGroupHelper";
 
 type Props = {
   children?: React.ReactNode;
+  open?: boolean;
+  setOpen?: (open: boolean) => void;
 };
 
-export default function RouteModal({ children }: Props) {
-  const [modal, setModal] = useState(false);
+export default function RouteModal({ children, open, setOpen }: Props) {
+  const { confirm } = useDialog();
+  const router = useRouter();
+  const [routePolicyModal, setRoutePolicyModal] = useState(false);
+  const [newPolicy, setNewPolicy] = useState<Policy>();
+
+  const handleCreatePolicyPrompt = async (r: Route) => {
+    console.log(r);
+    if (!r?.access_control_groups) return;
+
+    const choice = await confirm({
+      title: `Do you want to create a new access control policy for the route '${r.network_id}'?`,
+      description:
+        "You have one or more access control groups added to this route. These groups allow you to limit access to this route by using them in access policies.",
+      confirmText: "Create Policy",
+      cancelText: "Later",
+      type: "default",
+    });
+    if (!choice) return;
+
+    const name = `${r.network_id} Policy`;
+    const newPolicy: Policy = {
+      name,
+      description: "",
+      enabled: true,
+      source_posture_checks: [],
+      rules: [
+        {
+          name,
+          description: "",
+          sources: r?.groups || [],
+          destinations: r?.access_control_groups || [],
+          enabled: true,
+          bidirectional: false,
+          action: "accept",
+          protocol: "all",
+          ports: [],
+        },
+      ],
+    };
+    console.log(newPolicy);
+    setNewPolicy(newPolicy);
+    setRoutePolicyModal(true);
+  };
 
   return (
     <>
-      <Modal open={modal} onOpenChange={setModal} key={modal ? 1 : 0}>
+      <Modal open={open} onOpenChange={setOpen} key={open ? 1 : 0}>
         {children && <ModalTrigger asChild>{children}</ModalTrigger>}
-        {modal && <RouteModalContent onSuccess={() => setModal(false)} />}
+        {open && (
+          <RouteModalContent
+            onSuccess={async (r) => {
+              await handleCreatePolicyPrompt(r);
+              setOpen?.(false);
+            }}
+          />
+        )}
+      </Modal>
+
+      <Modal open={routePolicyModal} onOpenChange={setRoutePolicyModal}>
+        {routePolicyModal && newPolicy != undefined && (
+          <AccessControlModalContent
+            onSuccess={() => {
+              router.push("/access-control");
+            }}
+            policy={newPolicy}
+          />
+        )}
       </Modal>
     </>
   );
@@ -82,7 +148,9 @@ export function RouteModalContent({
   isFirstExitNode = false,
 }: ModalProps) {
   const { createRoute } = useRoutes();
-  const [tab, setTab] = useState("network");
+  const [tab, setTab] = useState(
+    exitNode && peer ? "access-control" : "network",
+  );
 
   /**
    * Network Identifier, Description & Network Range
@@ -142,6 +210,17 @@ export function RouteModalContent({
     initial: [],
   });
 
+  /**
+   * Access Control Groups
+   */
+  const [
+    accessControlGroups,
+    setAccessControlGroups,
+    { getGroupsToUpdate: getAccessControlGroupsToUpdate },
+  ] = useGroupHelper({
+    initial: [],
+  });
+
   /**
    * Additional Settings
    */
@@ -153,20 +232,32 @@ export function RouteModalContent({
    * Create Route
    */
   const createRouteHandler = async () => {
+    // Create groups that do not exist
     const g1 = getAllRoutingGroupsToUpdate();
     const g2 = getGroupsToUpdate();
-    const createOrUpdateGroups = uniqBy([...g1, ...g2], "name").map(
+    const g3 = getAccessControlGroupsToUpdate();
+    const createOrUpdateGroups = uniqBy([...g1, ...g2, ...g3], "name").map(
       (g) => g.promise,
     );
     const createdGroups = await Promise.all(
       createOrUpdateGroups.map((call) => call()),
     );
-    const peerGroups = routingPeerGroups
-      .map((g) => {
-        const find = createdGroups.find((group) => group.name === g.name);
-        return find?.id;
-      })
-      .filter((g) => g !== undefined) as string[];
+
+    // Check if routing peer is selected
+    const useSinglePeer = peerTab === "routing-peer";
+
+    // Get group ids of peer groups
+    let peerGroups: string[] = [];
+    if (!useSinglePeer) {
+      peerGroups = routingPeerGroups
+        .map((g) => {
+          const find = createdGroups.find((group) => group.name === g.name);
+          return find?.id;
+        })
+        .filter((g) => g !== undefined) as string[];
+    }
+
+    // Get distribution group ids
     const groupIds = groups
       .map((g) => {
         const find = createdGroups.find((group) => group.name === g.name);
@@ -174,7 +265,16 @@ export function RouteModalContent({
       })
       .filter((g) => g !== undefined) as string[];
 
-    const useSinglePeer = peerTab === "routing-peer";
+    let accessControlGroupIds: string[] | undefined = undefined;
+    if (accessControlGroups.length > 0) {
+      accessControlGroupIds = accessControlGroups
+        .map((g) => {
+          const find = createdGroups.find((group) => group.name === g.name);
+          return find?.id;
+        })
+        .filter((g) => g !== undefined) as string[];
+    }
+
     const domainRouteNames =
       routeType === "domains"
         ? domainRoutes.map((d) => d.name).filter((d) => d !== "")
@@ -194,6 +294,7 @@ export function RouteModalContent({
         metric: Number(metric) || 9999,
         masquerade: masquerade,
         groups: groupIds,
+        access_control_groups: accessControlGroupIds || undefined,
       },
       onSuccess,
     );
@@ -215,6 +316,10 @@ export function RouteModalContent({
     if (!validCIDR) return "Please enter a valid CIDR, e.g., 192.168.1.0/24";
   }, [networkRange]);
 
+  const isGroupsEntered = useMemo(() => {
+    return groups.length > 0;
+  }, [groups]);
+
   /**
    * Allow to create route only when all fields are filled
    */
@@ -223,7 +328,6 @@ export function RouteModalContent({
       (cidrError && cidrError.length > 1) ||
       (peerTab === "peer-group" && routingPeerGroups.length == 0) ||
       (peerTab === "routing-peer" && !routingPeer) ||
-      groups.length == 0 ||
       !isDomainOrRangeEntered
     );
   }, [
@@ -231,7 +335,6 @@ export function RouteModalContent({
     peerTab,
     routingPeerGroups.length,
     routingPeer,
-    groups,
     isDomainOrRangeEntered,
   ]);
 
@@ -255,8 +358,13 @@ export function RouteModalContent({
     return isNetworkEntered && isNameEntered && metricError == "";
   }, [isNetworkEntered, isNameEntered, metricError]);
 
+  const singleRoutingPeerGroups = useMemo(() => {
+    if (!routingPeer) return [];
+    return routingPeer?.groups;
+  }, [routingPeer]);
+
   return (
-    <ModalContent maxWidthClass={"max-w-xl"}>
+    <ModalContent maxWidthClass={"max-w-2xl"}>
       <ModalHeader
         icon={
           exitNode ? (
@@ -285,21 +393,33 @@ export function RouteModalContent({
 
       <Tabs defaultValue={tab} onValueChange={(v) => setTab(v)} value={tab}>
         <TabsList justify={"start"} className={"px-8"}>
-          <TabsTrigger
-            value={"network"}
-            onClick={() => networkRangeRef.current?.focus()}
-          >
-            <RouteIcon
+          {!(exitNode && peer) && (
+            <TabsTrigger
+              value={"network"}
+              onClick={() => networkRangeRef.current?.focus()}
+            >
+              <RouteIcon
+                size={16}
+                className={
+                  "text-nb-gray-500 group-data-[state=active]/trigger:text-netbird transition-all"
+                }
+              />
+              Route
+            </TabsTrigger>
+          )}
+
+          <TabsTrigger value={"access-control"} disabled={!isNetworkEntered}>
+            <FolderGit2
               size={16}
               className={
                 "text-nb-gray-500 group-data-[state=active]/trigger:text-netbird transition-all"
               }
             />
-            Route
+            Groups
           </TabsTrigger>
           <TabsTrigger
             value={"general"}
-            disabled={!isNetworkEntered}
+            disabled={!isGroupsEntered}
             onClick={() => nameRef.current?.focus()}
           >
             <Text
@@ -312,7 +432,7 @@ export function RouteModalContent({
           </TabsTrigger>
           <TabsTrigger
             value={"settings"}
-            disabled={!isNetworkEntered || !isNameEntered}
+            disabled={!isNetworkEntered || !isNameEntered || !isGroupsEntered}
           >
             <Settings2
               size={16}
@@ -324,7 +444,7 @@ export function RouteModalContent({
           </TabsTrigger>
         </TabsList>
         <TabsContent value={"network"} className={"pb-8"}>
-          <div className={"px-8 flex-col flex gap-6"}>
+          <div className={"px-8 flex-col flex gap-4"}>
             <div className={cn(exitNode && "hidden")}>
               <Label>Route Type</Label>
               <HelpText>
@@ -365,6 +485,7 @@ export function RouteModalContent({
                   customPrefix={<NetworkIcon size={16} />}
                   placeholder={"e.g., 172.16.0.0/16"}
                   value={networkRange}
+                  data-cy={"network-range"}
                   className={"font-mono !text-[13px]"}
                   error={cidrError}
                   onChange={(e) => setNetworkRange(e.target.value)}
@@ -377,7 +498,7 @@ export function RouteModalContent({
                 <Label>Domains</Label>
                 <HelpText>
                   Add domains that dynamically resolve to one or more IPv4
-                  addresses
+                  addresses. <br /> A maximum of 32 domains can be added.
                 </HelpText>
                 <div>
                   {domainRoutes.length > 0 && (
@@ -388,6 +509,7 @@ export function RouteModalContent({
                             <InputDomain
                               key={domain.id}
                               value={domain}
+                              data-cy={`domain-input-${i}`}
                               onChange={(d) =>
                                 setDomainRoutes({
                                   type: "UPDATE",
@@ -412,6 +534,8 @@ export function RouteModalContent({
                     variant={"dotted"}
                     className={"w-full"}
                     size={"sm"}
+                    disabled={domainRoutes.length === 32}
+                    data-cy={"add-domain"}
                     onClick={() => setDomainRoutes({ type: "ADD" })}
                   >
                     <PlusIcon size={14} />
@@ -428,6 +552,7 @@ export function RouteModalContent({
                         to active resources remain uninterrupted.
                       </div>
                     }
+                    className={"w-full block"}
                   >
                     <FancyToggleSwitch
                       value={keepRoute}
@@ -499,7 +624,10 @@ export function RouteModalContent({
                 </SegmentedTabs.Content>
               </SegmentedTabs>
             )}
-
+          </div>
+        </TabsContent>
+        <TabsContent value={"access-control"} className={"pb-8"}>
+          <div className={"px-8 flex-col flex gap-6"}>
             <div>
               <Label>Distribution Groups</Label>
               <HelpText>
@@ -511,6 +639,18 @@ export function RouteModalContent({
               </HelpText>
               <PeerGroupSelector onChange={setGroups} values={groups} />
             </div>
+            <div>
+              <Label>Access Control Groups (optional)</Label>
+              <HelpText>
+                These groups allow you to limit access to this route. Simply use
+                these groups as a destination when creating access policies.
+              </HelpText>
+              <PeerGroupSelector
+                dataCy={"access-control-groups-selector"}
+                onChange={setAccessControlGroups}
+                values={accessControlGroups}
+              />
+            </div>
           </div>
         </TabsContent>
         <TabsContent value={"general"} className={"px-8 pb-6"}>
@@ -523,6 +663,7 @@ export function RouteModalContent({
               <Input
                 error={networkIdentifierError}
                 autoFocus={true}
+                data-cy={"network-identifier"}
                 tabIndex={0}
                 ref={nameRef}
                 placeholder={"e.g., aws-eu-central-1-vpc"}
@@ -536,6 +677,7 @@ export function RouteModalContent({
                 Write a short description to add more context to this route.
               </HelpText>
               <Textarea
+                data-cy={"description"}
                 placeholder={
                   "e.g., Route to access all devices in the AWS VPC, located in Frankfurt."
                 }
@@ -589,6 +731,7 @@ export function RouteModalContent({
                 maxWidthClass={"max-w-[200px]"}
                 value={metric}
                 error={metricError}
+                data-cy={"metric"}
                 errorTooltip={true}
                 type={"number"}
                 onChange={(e) => setMetric(e.target.value)}
@@ -628,12 +771,21 @@ export function RouteModalContent({
             </ModalClose>
           )}
 
-          {tab == "general" && (
+          {tab == "access-control" && (
             <Button variant={"secondary"} onClick={() => setTab("network")}>
               Back
             </Button>
           )}
 
+          {tab == "general" && (
+            <Button
+              variant={"secondary"}
+              onClick={() => setTab("access-control")}
+            >
+              Back
+            </Button>
+          )}
+
           {tab == "settings" && (
             <Button variant={"secondary"} onClick={() => setTab("general")}>
               Back
@@ -643,12 +795,21 @@ export function RouteModalContent({
           {tab == "network" && (
             <Button
               variant={"primary"}
-              onClick={() => setTab("general")}
+              onClick={() => setTab("access-control")}
               disabled={!isNetworkEntered}
             >
               Continue
             </Button>
           )}
+          {tab == "access-control" && (
+            <Button
+              variant={"primary"}
+              onClick={() => setTab("general")}
+              disabled={!isGroupsEntered}
+            >
+              Continue
+            </Button>
+          )}
           {tab == "general" && (
             <Button
               variant={"primary"}
@@ -662,6 +823,7 @@ export function RouteModalContent({
             <Button
               variant={"primary"}
               disabled={!canCreateOrSave}
+              data-cy={"submit-route"}
               onClick={createRouteHandler}
             >
               <PlusCircle size={16} />

src/modules/routes/RouteTable.tsx

@@ -4,6 +4,7 @@ import { ColumnDef, SortingState } from "@tanstack/react-table";
 import React, { useMemo, useState } from "react";
 import { useGroups } from "@/contexts/GroupsProvider";
 import { GroupedRoute, Route } from "@/interfaces/Route";
+import RouteAccessControlGroups from "@/modules/routes/RouteAccessControlGroups";
 import RouteActionCell from "@/modules/routes/RouteActionCell";
 import RouteActiveCell from "@/modules/routes/RouteActiveCell";
 import RouteDistributionGroupsCell from "@/modules/routes/RouteDistributionGroupsCell";
@@ -63,6 +64,16 @@ export const RouteTableColumns: ColumnDef<Route>[] = [
     },
     cell: ({ row }) => <RouteDistributionGroupsCell route={row.original} />,
   },
+  {
+    id: "access_control_groups",
+    accessorFn: (r) => r?.access_control_groups?.length,
+    header: ({ column }) => {
+      return (
+        <DataTableHeader column={column}>Access Control Groups</DataTableHeader>
+      );
+    },
+    cell: ({ row }) => <RouteAccessControlGroups route={row.original} />,
+  },
   {
     id: "group_names",
     accessorFn: (row) => {
@@ -118,6 +129,7 @@ export default function RouteTable({ row }: Props) {
       <DataTable
         tableClassName={"mt-0"}
         minimal={true}
+        showSearchAndFilters={false}
         className={"bg-neutral-900/50 py-2"}
         inset={true}
         text={"Network Routes"}

src/modules/routes/RouteUpdateModal.tsx

@@ -151,6 +151,31 @@ function RouteUpdateModalContent({ onSuccess, route, cell }: ModalProps) {
     initial: initialGroups,
   });
 
+  /**
+   * Access Control Groups
+   */
+
+  const initialAccessControlGroups = useMemo(() => {
+    if (!route) return [];
+    if (route?.access_control_groups && allGroups) {
+      return allGroups.filter((g) => {
+        if (!route?.access_control_groups) return [];
+        return route?.access_control_groups && g.id
+          ? route.access_control_groups.includes(g.id)
+          : false;
+      });
+    }
+    return [];
+  }, [route, allGroups]);
+
+  const [
+    accessControlGroups,
+    setAccessControlGroups,
+    { getGroupsToUpdate: getAccessControlGroupsToUpdate },
+  ] = useGroupHelper({
+    initial: initialAccessControlGroups,
+  });
+
   // Additional Settings
   const [enabled, setEnabled] = useState<boolean>(route?.enabled ?? true);
   const [metric, setMetric] = useState(route?.metric || "9999");
@@ -170,18 +195,28 @@ function RouteUpdateModalContent({ onSuccess, route, cell }: ModalProps) {
   const updateRouteHandler = async () => {
     const g1 = getAllRoutingGroupsToUpdate();
     const g2 = getGroupsToUpdate();
-    const createOrUpdateGroups = uniqBy([...g1, ...g2], "name").map(
+    const g3 = getAccessControlGroupsToUpdate();
+    const createOrUpdateGroups = uniqBy([...g1, ...g2, ...g3], "name").map(
       (g) => g.promise,
     );
     const createdGroups = await Promise.all(
       createOrUpdateGroups.map((call) => call()),
     );
-    const peerGroups = routingPeerGroups
-      .map((g) => {
-        const find = createdGroups.find((group) => group.name === g.name);
-        return find?.id;
-      })
-      .filter((g) => g !== undefined) as string[];
+    // Check if routing peer is selected
+    const useSinglePeer = peerTab === "routing-peer";
+
+    // Get group ids of peer groups
+    let peerGroups: string[] = [];
+    if (!useSinglePeer) {
+      peerGroups = routingPeerGroups
+        .map((g) => {
+          const find = createdGroups.find((group) => group.name === g.name);
+          return find?.id;
+        })
+        .filter((g) => g !== undefined) as string[];
+    }
+
+    // Get distribution group ids
     const groupIds = groups
       .map((g) => {
         const find = createdGroups.find((group) => group.name === g.name);
@@ -189,7 +224,15 @@ function RouteUpdateModalContent({ onSuccess, route, cell }: ModalProps) {
       })
       .filter((g) => g !== undefined) as string[];
 
-    const useSinglePeer = peerTab === "routing-peer";
+    let accessControlGroupIds: string[] | undefined = undefined;
+    if (accessControlGroups.length > 0) {
+      accessControlGroupIds = accessControlGroups
+        .map((g) => {
+          const find = createdGroups.find((group) => group.name === g.name);
+          return find?.id;
+        })
+        .filter((g) => g !== undefined) as string[];
+    }
 
     updateRoute(
       route,
@@ -202,6 +245,7 @@ function RouteUpdateModalContent({ onSuccess, route, cell }: ModalProps) {
         metric: Number(metric) || 9999,
         masquerade: masquerade,
         groups: groupIds,
+        access_control_groups: accessControlGroupIds || undefined,
       },
       (r) => {
         onSuccess && onSuccess(r);
@@ -253,8 +297,13 @@ function RouteUpdateModalContent({ onSuccess, route, cell }: ModalProps) {
     }
   }, [route]);
 
+  const singleRoutingPeerGroups = useMemo(() => {
+    if (!routingPeer) return [];
+    return routingPeer?.groups;
+  }, [routingPeer]);
+
   return (
-    <ModalContent maxWidthClass={"max-w-xl"}>
+    <ModalContent maxWidthClass={"max-w-2xl"}>
       <ModalHeader
         icon={<NetworkRoutesIcon className={"fill-netbird"} />}
         title={"Update " + route.network_id}
@@ -328,7 +377,7 @@ function RouteUpdateModalContent({ onSuccess, route, cell }: ModalProps) {
                 <Label>Peer Group</Label>
                 <HelpText>
                   Assign a peer group with Linux machines to be used as
-                  {isExitNode ? " exit nodes." : "routing peers."}
+                  {isExitNode ? " exit nodes." : " routing peers."}
                 </HelpText>
                 <PeerGroupSelector
                   max={1}
@@ -346,6 +395,19 @@ function RouteUpdateModalContent({ onSuccess, route, cell }: ModalProps) {
               </HelpText>
               <PeerGroupSelector onChange={setGroups} values={groups} />
             </div>
+
+            <div>
+              <Label>Access Control Groups (optional)</Label>
+              <HelpText>
+                These groups offer a more granular control of internal services
+                in your network. They can be used in access control policies to
+                limit and control access of this route.
+              </HelpText>
+              <PeerGroupSelector
+                onChange={setAccessControlGroups}
+                values={accessControlGroups}
+              />
+            </div>
           </div>
         </TabsContent>
         <TabsContent value={"general"} className={"px-8 pb-6"}>

src/modules/settings/GroupsTab.tsx

@@ -8,6 +8,7 @@ import { notify } from "@components/Notification";
 import Paragraph from "@components/Paragraph";
 import Separator from "@components/Separator";
 import SkeletonTable from "@components/skeletons/SkeletonTable";
+import { usePortalElement } from "@hooks/usePortalElement";
 import * as Tabs from "@radix-ui/react-tabs";
 import { useApiCall } from "@utils/api";
 import { cn } from "@utils/helpers";
@@ -269,27 +270,36 @@ export default function GroupsTab({ account }: Props) {
           </AnimatePresence>
         )}
       </div>
-      <>
-        <Separator />
-        <div className={"px-8 py-6"}>
-          <div className={"max-w-6xl"}>
-            <div className={"flex justify-between items-center"}>
-              <div>
-                <h2>Groups</h2>
-                <Paragraph>
-                  Here is the overview of the groups of your account. You can
-                  delete the unused ones.
-                </Paragraph>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className={"pb-10"}>
-          <Suspense fallback={<SkeletonTable />}>
-            <GroupsTable />
-          </Suspense>
-        </div>
-      </>
+      <GroupsSection />
     </Tabs.Content>
   );
 }
+
+const GroupsSection = () => {
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
+  return (
+    <>
+      <Separator />
+      <div className={"px-8 py-6"}>
+        <div className={"max-w-6xl"}>
+          <div className={"flex justify-between items-center"}>
+            <div>
+              <h2 ref={headingRef}>Groups</h2>
+              <Paragraph>
+                Here is the overview of the groups of your account. You can
+                delete the unused ones.
+              </Paragraph>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className={"pb-10"}>
+        <Suspense fallback={<SkeletonTable />}>
+          <GroupsTable headingTarget={portalTarget} />
+        </Suspense>
+      </div>
+    </>
+  );
+};

src/modules/settings/GroupsTable.tsx

@@ -185,7 +185,11 @@ export const GroupsTableColumns: ColumnDef<GroupUsage>[] = [
   },
 ];
 
-export default function GroupsTable() {
+type Props = {
+  headingTarget?: HTMLHeadingElement | null;
+};
+
+export default function GroupsTable({ headingTarget }: Props) {
   const groups = useGroupsUsage();
   const path = usePathname();
 
@@ -204,9 +208,8 @@ export default function GroupsTable() {
     <>
       {groups && groups.length > 0 ? (
         <DataTable
-          showSearch={true}
+          headingTarget={headingTarget}
           text={"Groups"}
-          minimal={false}
           inset={false}
           sorting={sorting}
           setSorting={setSorting}
@@ -268,8 +271,9 @@ export default function GroupsTable() {
           )}
         </DataTable>
       ) : (
-        <div className={"py-3 bg-nb-gray-950 overflow-hidden"}>
+        <div className={"bg-nb-gray-950 overflow-hidden"}>
           <NoResults
+            className={"py-3"}
             title={"No groups"}
             description={"You don't have any groups created yet."}
             icon={<FolderGit2Icon size={20} className={"fill-nb-gray-300"} />}

src/modules/setup-keys/SetupKeysTable.tsx

@@ -109,8 +109,14 @@ export const SetupKeysTableColumns: ColumnDef<SetupKey>[] = [
 type Props = {
   setupKeys?: SetupKey[];
   isLoading: boolean;
+  headingTarget?: HTMLHeadingElement | null;
 };
-export default function SetupKeysTable({ setupKeys, isLoading }: Props) {
+
+export default function SetupKeysTable({
+  setupKeys,
+  isLoading,
+  headingTarget,
+}: Props) {
   const { mutate } = useSWRConfig();
   const path = usePathname();
 
@@ -139,6 +145,7 @@ export default function SetupKeysTable({ setupKeys, isLoading }: Props) {
     <>
       {open && <SetupKeyModal open={open} setOpen={setOpen} />}
       <DataTable
+        headingTarget={headingTarget}
         isLoading={isLoading}
         text={"Setup Keys"}
         sorting={sorting}

src/modules/setup-netbird-modal/MacOSTab.tsx

@@ -81,7 +81,7 @@ export default function MacOSTab() {
               >
                 <Button variant={"outline"}>
                   <DownloadIcon size={14} />
-                  Download for M1 & M2
+                  Download for Apple Silicon
                 </Button>
               </Link>
             </div>

src/modules/users/ServiceUsersTable.tsx

@@ -63,9 +63,14 @@ export const ServiceUsersTableColumns: ColumnDef<User>[] = [
 type Props = {
   users?: User[];
   isLoading?: boolean;
+  headingTarget?: HTMLHeadingElement | null;
 };
 
-export default function ServiceUsersTable({ users, isLoading }: Props) {
+export default function ServiceUsersTable({
+  users,
+  isLoading,
+  headingTarget,
+}: Props) {
   useFetchApi("/groups");
   const { mutate } = useSWRConfig();
   const router = useRouter();
@@ -89,6 +94,7 @@ export default function ServiceUsersTable({ users, isLoading }: Props) {
   return (
     <>
       <DataTable
+        headingTarget={headingTarget}
         isLoading={isLoading}
         text={"Service Users"}
         sorting={sorting}

src/modules/users/UsersTable.tsx

@@ -98,9 +98,10 @@ export const UsersTableColumns: ColumnDef<User>[] = [
 type Props = {
   users?: User[];
   isLoading?: boolean;
+  headingTarget?: HTMLHeadingElement | null;
 };
 
-export default function UsersTable({ users, isLoading }: Props) {
+export default function UsersTable({ users, isLoading, headingTarget }: Props) {
   useFetchApi("/groups");
   const { mutate } = useSWRConfig();
   const path = usePathname();
@@ -125,6 +126,7 @@ export default function UsersTable({ users, isLoading }: Props) {
   return (
     <>
       <DataTable
+        headingTarget={headingTarget}
         isLoading={isLoading}
         text={"Users"}
         sorting={sorting}

src/utils/api.tsx

@@ -19,17 +19,23 @@ export type ErrorResponse = {
 
 const config = loadConfig();
 
+type RequestOptions = {
+  signal?: AbortSignal;
+};
+
 async function apiRequest<T>(
   oidcFetch: (input: RequestInfo, init?: RequestInit) => Promise<Response>,
   method: Method,
   url: string,
   data?: any,
+  options?: RequestOptions,
 ) {
   const origin = config.apiOrigin;
 
   const res = await oidcFetch(`${origin}/api${url}`, {
     method,
     body: JSON.stringify(data),
+    signal: options?.signal,
   });
 
   try {
@@ -136,23 +142,23 @@ export function useApiCall<T>(url: string, ignoreError = false) {
   const handleErrors = useApiErrorHandling(ignoreError);
 
   return {
-    post: async (data: any, suffix = "") => {
-      return apiRequest<T>(fetch, "POST", url + suffix, data)
+    post: async (data: any, suffix = "", options?: RequestOptions) => {
+      return apiRequest<T>(fetch, "POST", url + suffix, data, options)
         .then((res) => Promise.resolve(res as T))
         .catch((err) => handleErrors(err as ErrorResponse)) as Promise<T>;
     },
-    put: async (data: any, suffix = "") => {
-      return apiRequest<T>(fetch, "PUT", url + suffix, data)
+    put: async (data: any, suffix = "", options?: RequestOptions) => {
+      return apiRequest<T>(fetch, "PUT", url + suffix, data, options)
         .then((res) => Promise.resolve(res as T))
         .catch((err) => handleErrors(err as ErrorResponse)) as Promise<T>;
     },
-    del: async (data: any = "", suffix = "") => {
-      return apiRequest<T>(fetch, "DELETE", url + suffix, data)
+    del: async (data: any = "", suffix = "", options?: RequestOptions) => {
+      return apiRequest<T>(fetch, "DELETE", url + suffix, data, options)
         .then((res) => Promise.resolve(res as T))
         .catch((err) => handleErrors(err as ErrorResponse)) as Promise<T>;
     },
-    get: async (suffix = "") => {
-      return apiRequest<T>(fetch, "GET", url + suffix)
+    get: async (suffix = "", options?: RequestOptions) => {
+      return apiRequest<T>(fetch, "GET", url + suffix, undefined, options)
         .then((res) => Promise.resolve(res as T))
         .catch((err) => handleErrors(err as ErrorResponse)) as Promise<T>;
     },

src/utils/helpers.ts

@@ -1,4 +1,5 @@
 import { type ClassValue, clsx } from "clsx";
+import deepClone from "lodash/cloneDeep";
 import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
@@ -118,3 +119,15 @@ export function tryGetProcessNameFromPath(path: string) {
     return path;
   }
 }
+
+export function cloneDeep<T>(obj: T): T {
+  try {
+    return JSON.parse(JSON.stringify(obj));
+  } catch (e) {
+    try {
+      return deepClone(obj);
+    } catch (e) {
+      return obj;
+    }
+  }
+}