Fix version comparison (#544)

* Update announcement

* Fix repeated fetches

.github/workflows/build_and_push.yml

@@ -2,7 +2,6 @@ name: build and push
 on:
   push:
     branches:
-      - "feature/**"
       - main
     tags:
       - "**"
@@ -55,8 +54,19 @@ jobs:
           fileName: "ironrdp_web_bg.wasm"
           out-file-path: 'public/ironrdp-pkg'
 
+      - name: Get version from tag
+        id: version
+        run: |
+          if [[ "${{ github.ref }}" == refs/tags/* ]]; then
+            echo "version=${GITHUB_REF#refs/tags/}" >> $GITHUB_OUTPUT
+          else
+            echo "version=development" >> $GITHUB_OUTPUT
+          fi
+
       - name: Build
         run: npm run build
+        env:
+          NEXT_PUBLIC_DASHBOARD_VERSION: ${{ steps.version.outputs.version }}
       -
         name: Set up QEMU
         uses: docker/setup-qemu-action@v2

CONTRIBUTOR_LICENSE_AGREEMENT.md

@@ -1,7 +1,7 @@
 ##  Contributor License Agreement
 
 This Contributor License Agreement (referred to as the "Agreement") is entered into by the individual 
-submitting this Agreement and NetBird GmbH, c/o Max-Beer-Straße 2-4 Münzstraße 12 10178 Berlin, Germany, 
+submitting this Agreement and NetBird GmbH, Brunnenstraße 196, 10119 Berlin, Germany, 
 referred to as "NetBird" (collectively, the "Parties"). The Agreement outlines the terms and conditions 
 under which NetBird may utilize software contributions provided by the Contributor for inclusion in 
 its software development projects. By submitting this Agreement, the Contributor confirms their acceptance 

announcements.json

@@ -0,0 +1,12 @@
+[
+  {
+    "tag": "New",
+    "text": "Custom DNS Zones for Private Network Resolution",
+    "link": "https://netbird.io/knowledge-hub/custom-dns-zones",
+    "linkText": "Read Release Article",
+    "variant": "important",
+    "isExternal": true,
+    "closeable": true,
+    "isCloudOnly": false
+  }
+]

config.json

@@ -13,5 +13,6 @@
   "dragQueryParams": "$NETBIRD_DRAG_QUERY_PARAMS",
   "hotjarTrackID": "$NETBIRD_HOTJAR_TRACK_ID",
   "googleAnalyticsID": "$NETBIRD_GOOGLE_ANALYTICS_ID",
-  "googleTagManagerID": "$NETBIRD_GOOGLE_TAG_MANAGER_ID"
-}
+  "googleTagManagerID": "$NETBIRD_GOOGLE_TAG_MANAGER_ID",
+  "wasmPath": "$NETBIRD_WASM_PATH"
+}

docker/init_react_envs.sh

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

next.config.js

@@ -7,6 +7,8 @@ const nextConfig = {
   reactStrictMode: false,
   env: {
     APP_ENV: process.env.APP_ENV || "production",
+    NEXT_PUBLIC_DASHBOARD_VERSION:
+      process.env.NEXT_PUBLIC_DASHBOARD_VERSION || "development",
   },
 };
 

package.json

@@ -56,17 +56,17 @@
     "date-fns": "^2.30.0",
     "dayjs": "^1.11.10",
     "elkjs": "^0.10.0",
-    "eslint": "^8",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "flowbite": "^1.8.1",
     "flowbite-react": "^0.6.4",
     "framer-motion": "^10.16.4",
+    "ip-address": "^10.1.0",
     "ip-cidr": "^3.1.0",
     "js-cookie": "^3.0.5",
-    "lodash": "^4.17.21",
+    "lodash": "^4.17.23",
     "lucide-react": "^0.539.0",
-    "next": "^14.2.28",
+    "next": "^14.2.35",
     "next-themes": "^0.2.1",
     "punycode": "^2.3.1",
     "react": "^18.3.1",
@@ -90,10 +90,10 @@
     "@faker-js/faker": "^9.5.1",
     "@types/chroma-js": "^3.1.1",
     "@types/js-cookie": "^3.0.6",
-    "eslint-config-next": "^14.2.28",
-    "cypress": "^13.13.0",
+    "eslint": "^9.39.1",
+    "eslint-config-next": "^16.0.5",
     "postcss": "^8",
     "prettier": "3.0.3",
-    "tailwindcss": "^3"
+    "tailwindcss": "^3.4.17"
   }
 }

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

@@ -33,7 +33,7 @@ export default function AccessControlPage() {
         <div className={"p-default py-6"}>
           <Breadcrumbs>
             <Breadcrumbs.Item
-              href={"/policies"}
+              href={"/access-control"}
               label={"Access Control"}
               icon={<AccessControlIcon size={14} />}
             />

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

@@ -7,7 +7,7 @@ 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 { ExternalLinkIcon } from "lucide-react";
 import React, { lazy, Suspense } from "react";
 import DNSIcon from "@/assets/icons/DNSIcon";
 import { usePermissions } from "@/contexts/PermissionsProvider";
@@ -15,7 +15,7 @@ import { NameserverGroup } from "@/interfaces/Nameserver";
 import PageContainer from "@/layouts/PageContainer";
 
 const NameserverGroupTable = lazy(
-  () => import("@/modules/dns-nameservers/table/NameserverGroupTable"),
+  () => import("@/modules/dns/nameservers/table/NameserverGroupTable"),
 );
 
 export default function NameServers() {
@@ -32,7 +32,7 @@ export default function NameServers() {
       <div className={"p-default py-6"}>
         <Breadcrumbs>
           <Breadcrumbs.Item
-            href={"/dns"}
+            href={"/dns/nameservers"}
             label={"DNS"}
             icon={<DNSIcon size={13} />}
           />
@@ -40,7 +40,7 @@ export default function NameServers() {
             href={"/dns/nameservers"}
             label={"Nameservers"}
             active
-            icon={<ServerIcon size={13} />}
+            icon={<DNSIcon size={13} />}
           />
         </Breadcrumbs>
         <h1 ref={headingRef}>Nameservers</h1>

src/app/(dashboard)/dns/zones/layout.tsx

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

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

@@ -0,0 +1,70 @@
+"use client";
+
+import Breadcrumbs from "@components/Breadcrumbs";
+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";
+import DNSIcon from "@/assets/icons/DNSIcon";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import { DNS_ZONE_DOCS_LINK, DNSZone } from "@/interfaces/DNS";
+import PageContainer from "@/layouts/PageContainer";
+import { DNSZonesProvider } from "@/modules/dns/zones/DNSZonesProvider";
+import DNSZoneIcon from "@/assets/icons/DNSZoneIcon";
+
+const DNSZonesTable = lazy(
+  () => import("@/modules/dns/zones/table/DNSZonesTable"),
+);
+
+export default function DNSZonePage() {
+  const { permission } = usePermissions();
+
+  const { data: zones, isLoading } = useFetchApi<DNSZone[]>("/dns/zones");
+
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
+  return (
+    <PageContainer>
+      <div className={"p-default py-6"}>
+        <Breadcrumbs>
+          <Breadcrumbs.Item label={"DNS"} icon={<DNSIcon size={13} />} />
+          <Breadcrumbs.Item
+            href={"/dns/zones"}
+            label={"Zones"}
+            active
+            icon={<DNSZoneIcon size={16} />}
+          />
+        </Breadcrumbs>
+        <h1 ref={headingRef}>Zones</h1>
+        <Paragraph>
+          Manage DNS zones to control domain name resolution for your network.
+        </Paragraph>
+        <Paragraph>
+          Learn more about
+          <InlineLink href={DNS_ZONE_DOCS_LINK} target={"_blank"}>
+            DNS Zones
+            <ExternalLinkIcon size={12} />
+          </InlineLink>
+          in our documentation.
+        </Paragraph>
+      </div>
+
+      <RestrictedAccess page={"DNS Zones"} hasAccess={permission?.dns?.read}>
+        <Suspense fallback={<SkeletonTable />}>
+          <DNSZonesProvider>
+            <DNSZonesTable
+              isLoading={isLoading}
+              headingTarget={portalTarget}
+              data={zones}
+            />
+          </DNSZonesProvider>
+        </Suspense>
+      </RestrictedAccess>
+    </PageContainer>
+  );
+}

src/app/(dashboard)/group/layout.tsx

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

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

@@ -0,0 +1,340 @@
+"use client";
+
+import Breadcrumbs from "@components/Breadcrumbs";
+import FullTooltip from "@components/FullTooltip";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@components/Tabs";
+import FullScreenLoading from "@components/ui/FullScreenLoading";
+import { GroupBadgeIcon } from "@components/ui/GroupBadgeIcon";
+import { PageNotFound } from "@components/ui/PageNotFound";
+import { RestrictedAccess } from "@components/ui/RestrictedAccess";
+import useRedirect from "@hooks/useRedirect";
+import useFetchApi from "@utils/api";
+import { cn, singularize } from "@utils/helpers";
+import { FolderGit2Icon, Layers3Icon, PencilIcon } from "lucide-react";
+import { useSearchParams } from "next/navigation";
+import React, { useState } from "react";
+import AccessControlIcon from "@/assets/icons/AccessControlIcon";
+import DNSIcon from "@/assets/icons/DNSIcon";
+import DNSZoneIcon from "@/assets/icons/DNSZoneIcon";
+import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
+import PeerIcon from "@/assets/icons/PeerIcon";
+import SetupKeysIcon from "@/assets/icons/SetupKeysIcon";
+import TeamIcon from "@/assets/icons/TeamIcon";
+import { GroupProvider, useGroupContext } from "@/contexts/GroupProvider";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import RoutesProvider from "@/contexts/RoutesProvider";
+import { Group, GROUP_TOOLTIP_TEXT } from "@/interfaces/Group";
+import PageContainer from "@/layouts/PageContainer";
+import { GroupDNSZonesSection } from "@/modules/groups/details/GroupDNSZonesSection";
+import { GroupNameserversSection } from "@/modules/groups/details/GroupNameserversSection";
+import { GroupNetworkRoutesSection } from "@/modules/groups/details/GroupNetworkRoutesSection";
+import { GroupPeersSection } from "@/modules/groups/details/GroupPeersSection";
+import { GroupPoliciesSection } from "@/modules/groups/details/GroupPoliciesSection";
+import { GroupResourcesSection } from "@/modules/groups/details/GroupResourcesSection";
+import { GroupSetupKeysSection } from "@/modules/groups/details/GroupSetupKeysSection";
+import { GroupUsersSection } from "@/modules/groups/details/GroupUsersSection";
+import useGroupDetails from "@/modules/groups/details/useGroupDetails";
+
+export default function GroupPage() {
+  const queryParameter = useSearchParams();
+  const { isRestricted } = usePermissions();
+  const groupId = queryParameter.get("id");
+  const {
+    data: group,
+    isLoading,
+    error,
+  } = useFetchApi<Group>(`/groups/${groupId}`, true);
+
+  useRedirect("/groups", false, !groupId || isRestricted);
+
+  if (isRestricted) {
+    return (
+      <PageContainer>
+        <RestrictedAccess page={"Group Information"} />
+      </PageContainer>
+    );
+  }
+
+  if (error)
+    return (
+      <PageNotFound
+        title={error?.message}
+        description={
+          "The group you are attempting to access cannot be found. It may have been deleted, or you may not have permission to view it. Please verify the URL or return to the dashboard."
+        }
+      />
+    );
+
+  return group && !isLoading ? (
+    <PageContainer>
+      <RoutesProvider>
+        <GroupProvider group={group} isDetailPage={true}>
+          <div className={"p-default py-6 pb-0 w-full mb-[6px]"}>
+            <Breadcrumbs>
+              <Breadcrumbs.Item
+                href={"/groups"}
+                label={"Groups"}
+                icon={<FolderGit2Icon size={14} />}
+              />
+              <Breadcrumbs.Item label={group.name} active />
+            </Breadcrumbs>
+            <GroupDetailsName />
+          </div>
+          <GroupOverviewTabs group={group} />
+        </GroupProvider>
+      </RoutesProvider>
+    </PageContainer>
+  ) : (
+    <FullScreenLoading />
+  );
+}
+
+const GroupDetailsName = () => {
+  const { group, isJWTGroup, isAllowedToRename, openGroupRenameModal } =
+    useGroupContext();
+  const { permission } = usePermissions();
+
+  return (
+    <div className={"w-full"}>
+      <h1 className={"flex items-center gap-3 w-full whitespace-nowrap"}>
+        <GroupBadgeIcon id={group?.id} issued={group?.issued} size={20} />
+        {group.name}
+        {group.name !== "All" && permission?.groups?.update && (
+          <div>
+            <FullTooltip
+              content={
+                <div className={"text-xs max-w-xs"}>
+                  {isJWTGroup
+                    ? GROUP_TOOLTIP_TEXT.RENAME.JWT
+                    : GROUP_TOOLTIP_TEXT.RENAME.INTEGRATION}
+                </div>
+              }
+              interactive={false}
+              disabled={isAllowedToRename}
+              className={"w-full block"}
+            >
+              <div
+                className={cn(
+                  "flex h-8 w-8 items-center justify-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-neutral-100 transition-all hover:bg-nb-gray-800/60 rounded-md cursor-pointer",
+                  !isAllowedToRename &&
+                    "opacity-40 cursor-not-allowed pointer-events-none",
+                )}
+                onClick={openGroupRenameModal}
+              >
+                <PencilIcon size={16} />
+              </div>
+            </FullTooltip>
+          </div>
+        )}
+      </h1>
+    </div>
+  );
+};
+
+const validAllGroupTabs = [
+  "policies",
+  "resources",
+  "network-routes",
+  "nameservers",
+  "zones",
+];
+
+const validOtherGroupTabs = ["users", "peers", "setup-keys"];
+
+const GroupOverviewTabs = ({ group }: { group: Group }) => {
+  const searchParams = useSearchParams();
+
+  const getInitialTab = () => {
+    const isAllGroup = group.name === "All";
+    const tabParam = searchParams.get("tab");
+    const validTabs = isAllGroup
+      ? validAllGroupTabs
+      : [...validAllGroupTabs, ...validOtherGroupTabs];
+    if (tabParam === null) return isAllGroup ? "policies" : "users";
+    if (isAllGroup) {
+      return validTabs.includes(tabParam) ? tabParam : "policies";
+    }
+    return validTabs.includes(tabParam) ? tabParam : "users";
+  };
+
+  const [tab, setTab] = useState(getInitialTab());
+  const { groupDetails, isLoading } = useGroupDetails(group?.id || "");
+
+  const peersCount = groupDetails?.peers_count || 0;
+  const usersCount = groupDetails?.users?.length || 0;
+  const policiesCount = groupDetails?.policies?.length || 0;
+  const resourcesCount = groupDetails?.resources_count || 0;
+  const routesCount = groupDetails?.routes?.length || 0;
+  const nameserversCount = groupDetails?.nameservers?.length || 0;
+  const zonesCount = groupDetails?.zones?.length || 0;
+  const setupKeysCount = groupDetails?.setupKeys?.length || 0;
+
+  return (
+    <Tabs
+      defaultValue={tab}
+      onValueChange={(v) => setTab(v)}
+      value={tab}
+      className={"pt-2 pb-0 mb-0"}
+    >
+      <TabsList justify={"start"} className={"px-8"}>
+        {group.name !== "All" && (
+          <TabsTrigger
+            value={"users"}
+            className={groupDetails === null ? "animate-pulse" : ""}
+          >
+            <TeamIcon
+              size={12}
+              className={
+                "fill-nb-gray-500 group-data-[state=active]/trigger:fill-netbird transition-all"
+              }
+            />
+            {singularize("Users", usersCount)}
+          </TabsTrigger>
+        )}
+
+        {group.name !== "All" && (
+          <TabsTrigger
+            value={"peers"}
+            className={groupDetails === null ? "animate-pulse" : ""}
+          >
+            <PeerIcon
+              size={12}
+              className={
+                "fill-nb-gray-500 group-data-[state=active]/trigger:fill-netbird transition-all"
+              }
+            />
+            {singularize("Peers", peersCount)}
+          </TabsTrigger>
+        )}
+
+        <TabsTrigger
+          value={"policies"}
+          className={groupDetails === null ? "animate-pulse" : ""}
+        >
+          <AccessControlIcon
+            size={12}
+            className={
+              "fill-nb-gray-500 group-data-[state=active]/trigger:fill-netbird transition-all"
+            }
+          />
+          {singularize("Policies", policiesCount)}
+        </TabsTrigger>
+
+        <TabsTrigger
+          value={"resources"}
+          className={groupDetails === null ? "animate-pulse" : ""}
+        >
+          <Layers3Icon size={14} />
+          {singularize("Resources", resourcesCount)}
+        </TabsTrigger>
+
+        <TabsTrigger
+          value={"network-routes"}
+          className={groupDetails === null ? "animate-pulse" : ""}
+        >
+          <NetworkRoutesIcon
+            size={12}
+            className={
+              "fill-nb-gray-500 group-data-[state=active]/trigger:fill-netbird transition-all"
+            }
+          />
+          {singularize("Network Routes", routesCount)}
+        </TabsTrigger>
+
+        <TabsTrigger
+          value={"nameservers"}
+          className={groupDetails === null ? "animate-pulse" : ""}
+        >
+          <DNSIcon
+            size={12}
+            className={
+              "fill-nb-gray-500 group-data-[state=active]/trigger:fill-netbird transition-all"
+            }
+          />
+          {singularize("Nameservers", nameserversCount)}
+        </TabsTrigger>
+
+        <TabsTrigger
+          value={"zones"}
+          className={groupDetails === null ? "animate-pulse" : ""}
+        >
+          <DNSZoneIcon
+            size={16}
+            className={
+              "fill-nb-gray-500 group-data-[state=active]/trigger:fill-netbird transition-all"
+            }
+          />
+          {singularize("Zones", zonesCount)}
+        </TabsTrigger>
+
+        {group.name !== "All" && (
+          <TabsTrigger
+            value={"setup-keys"}
+            className={groupDetails === null ? "animate-pulse" : ""}
+          >
+            <SetupKeysIcon
+              size={12}
+              className={
+                "fill-nb-gray-500 group-data-[state=active]/trigger:fill-netbird transition-all"
+              }
+            />
+            {singularize("Setup Keys", setupKeysCount)}
+          </TabsTrigger>
+        )}
+      </TabsList>
+
+      <TabsContent value={"users"} className={"pb-8"}>
+        <GroupUsersSection users={groupDetails?.users} isLoading={isLoading} />
+      </TabsContent>
+
+      <TabsContent value={"peers"} className={"pb-8"}>
+        <GroupPeersSection
+          peers={groupDetails?.peersOfGroup}
+          isLoading={isLoading}
+        />
+      </TabsContent>
+
+      <TabsContent value={"policies"} className={"pb-8"}>
+        <GroupPoliciesSection
+          policies={groupDetails?.policies}
+          isLoading={isLoading}
+        />
+      </TabsContent>
+
+      <TabsContent value={"resources"} className={"pb-8"}>
+        <GroupResourcesSection
+          resources={groupDetails?.networkResources}
+          isLoading={isLoading}
+        />
+      </TabsContent>
+
+      <TabsContent value={"network-routes"} className={"pb-8"}>
+        <GroupNetworkRoutesSection
+          routes={groupDetails?.routes}
+          isLoading={isLoading}
+        />
+      </TabsContent>
+
+      <TabsContent value={"nameservers"} className={"pb-8"}>
+        <GroupNameserversSection
+          nameserverGroups={groupDetails?.nameservers}
+          isLoading={isLoading}
+        />
+      </TabsContent>
+
+      <TabsContent value={"zones"} className={"pb-8"}>
+        <GroupDNSZonesSection
+          zones={groupDetails?.zones}
+          isLoading={isLoading}
+        />
+      </TabsContent>
+
+      <TabsContent value={"setup-keys"} className={"pb-8"}>
+        <GroupSetupKeysSection
+          setupKeys={groupDetails?.setupKeys}
+          isLoading={isLoading}
+        />
+      </TabsContent>
+    </Tabs>
+  );
+};

src/app/(dashboard)/groups/layout.tsx

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

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

@@ -0,0 +1,56 @@
+"use client";
+
+import Paragraph from "@components/Paragraph";
+import SkeletonTable from "@components/skeletons/SkeletonTable";
+import { RestrictedAccess } from "@components/ui/RestrictedAccess";
+import { usePortalElement } from "@hooks/usePortalElement";
+import { ExternalLinkIcon, FolderGit2Icon } from "lucide-react";
+import React, { lazy, Suspense } from "react";
+import Breadcrumbs from "@/components/Breadcrumbs";
+import InlineLink from "@/components/InlineLink";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import PageContainer from "@/layouts/PageContainer";
+
+const GroupsTable = lazy(() => import("@/modules/groups/table/GroupsTable"));
+
+export default function GroupsPage() {
+  const { permission } = usePermissions();
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
+  return (
+    <PageContainer>
+      <div className={"p-default py-6"}>
+        <Breadcrumbs>
+          <Breadcrumbs.Item
+            href={"/groups"}
+            label={"Groups"}
+            icon={<FolderGit2Icon size={14} />}
+            active
+          />
+        </Breadcrumbs>
+        <h1 ref={headingRef}>Groups</h1>
+        <Paragraph>
+          Here is the overview of the groups of your organization. You can
+          delete the unused ones.
+        </Paragraph>
+        <Paragraph>
+          Learn more about{" "}
+          <InlineLink
+            href={"https://docs.netbird.io/how-to/manage-network-access"}
+            target={"_blank"}
+          >
+            Groups
+            <ExternalLinkIcon size={12} />
+          </InlineLink>
+          in our documentation.
+        </Paragraph>
+      </div>
+      <RestrictedAccess hasAccess={permission.groups.read} page={"Groups"}>
+        <Suspense fallback={<SkeletonTable />}>
+          <GroupsTable headingTarget={portalTarget} />
+        </Suspense>
+      </RestrictedAccess>
+    </PageContainer>
+  );
+}

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

@@ -7,7 +7,7 @@ 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 { ArrowUpRightIcon, ExternalLinkIcon } from "lucide-react";
 import React, { lazy, Suspense } from "react";
 import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
 import PeersProvider from "@/contexts/PeersProvider";
@@ -16,6 +16,7 @@ import RoutesProvider from "@/contexts/RoutesProvider";
 import { Route } from "@/interfaces/Route";
 import PageContainer from "@/layouts/PageContainer";
 import useGroupedRoutes from "@/modules/route-group/useGroupedRoutes";
+import { Callout } from "@components/Callout";
 
 const NetworkRoutesTable = lazy(
   () => import("@/modules/route-group/NetworkRoutesTable"),
@@ -59,6 +60,17 @@ export default function NetworkRoutes() {
               </InlineLink>
               in our documentation.
             </Paragraph>
+
+            <Callout className={"max-w-xl mt-3"} variant={"warning"}>
+              <span>
+                We recommend using the new Networks concept to easier visualise
+                and manage access to your resources.{" "}
+                <InlineLink href={"/networks"}>
+                  Go to Networks
+                  <ArrowUpRightIcon size={14} />
+                </InlineLink>
+              </span>
+            </Callout>
           </div>
 
           <RestrictedAccess hasAccess={permission.routes.read}>

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

@@ -1,7 +1,15 @@
 "use client";
 
 import Breadcrumbs from "@components/Breadcrumbs";
+import Button from "@components/Button";
 import Card from "@components/Card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@components/DropdownMenu";
 import FullTooltip from "@components/FullTooltip";
 import InlineLink from "@components/InlineLink";
 import Separator from "@components/Separator";
@@ -12,12 +20,14 @@ import { cn } from "@utils/helpers";
 import {
   ArrowUpRightIcon,
   HelpCircle,
+  MoreVertical,
   PencilLineIcon,
   ServerIcon,
   ShieldCheckIcon,
   ShieldXIcon,
+  Trash2,
 } from "lucide-react";
-import { useSearchParams } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import React, { useMemo, useState } from "react";
 import { useSWRConfig } from "swr";
 import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
@@ -25,8 +35,10 @@ import { usePermissions } from "@/contexts/PermissionsProvider";
 import { Network } from "@/interfaces/Network";
 import PageContainer from "@/layouts/PageContainer";
 import { NetworkInformationSquare } from "@/modules/networks/misc/NetworkInformationSquare";
-import NetworkModal from "@/modules/networks/NetworkModal";
-import { NetworkProvider } from "@/modules/networks/NetworkProvider";
+import {
+  NetworkProvider,
+  useNetworksContext,
+} from "@/modules/networks/NetworkProvider";
 import { ResourcesSection } from "@/modules/networks/resources/ResourcesSection";
 import { NetworkRoutingPeersSection } from "@/modules/networks/routing-peers/NetworkRoutingPeersSection";
 
@@ -77,35 +89,24 @@ function NetworkOverview({ network }: Readonly<{ network: Network }>) {
 
           <div className={"flex justify-between max-w-6xl"}>
             <div
-              className={cn(
-                "flex items-center",
-                !network.description && "gap-2",
-              )}
+              className={"w-full lg:w-1/2 flex justify-between items-center"}
             >
-              <NetworkInformationSquare
-                name={network.name}
-                active={isActive}
-                size={"lg"}
-                description={network.description}
-              />
-              {permission.networks.update && (
-                <button
-                  className={
-                    "flex items-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-neutral-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md cursor-pointer"
-                  }
-                  onClick={() => setNetworkModal(true)}
-                >
-                  <PencilLineIcon size={18} />
-                </button>
-              )}
-              <NetworkModal
-                open={networkModal}
-                setOpen={setNetworkModal}
-                onUpdated={() => {
-                  mutate(`/networks/${network.id}`);
-                }}
-                network={network}
-              />
+              <div
+                className={cn(
+                  "flex items-center w-full",
+                  !network.description && "gap-2",
+                )}
+              >
+                <NetworkInformationSquare
+                  name={network.name}
+                  active={isActive}
+                  size={"lg"}
+                  description={network.description}
+                />
+              </div>
+              <NetworkProvider network={network}>
+                <NetworkActions />
+              </NetworkProvider>
             </div>
           </div>
 
@@ -124,6 +125,56 @@ function NetworkOverview({ network }: Readonly<{ network: Network }>) {
   );
 }
 
+function NetworkActions() {
+  const { permission } = usePermissions();
+  const { deleteNetwork, openEditNetworkModal, network } = useNetworksContext();
+  const router = useRouter();
+
+  if (!network) return;
+
+  return (
+    <DropdownMenu modal={false}>
+      <DropdownMenuTrigger
+        asChild={true}
+        onClick={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+        }}
+      >
+        <Button variant={"secondary"} className={"!px-3"}>
+          <MoreVertical size={16} className={"shrink-0"} />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-auto" align="end">
+        <DropdownMenuItem
+          onClick={() => openEditNetworkModal(network)}
+          disabled={!permission.networks.update}
+        >
+          <div className={"flex gap-3 items-center"}>
+            <PencilLineIcon size={14} className={"shrink-0"} />
+            Rename
+          </div>
+        </DropdownMenuItem>
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuItem
+          onClick={() =>
+            deleteNetwork(network).then(() => router.push("/networks"))
+          }
+          variant={"danger"}
+          disabled={!permission.networks.delete}
+        >
+          <div className={"flex gap-3 items-center"}>
+            <Trash2 size={14} className={"shrink-0"} />
+            Delete
+          </div>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
 function NetworkInformationCard({ network }: Readonly<{ network: Network }>) {
   const isHighlyAvailable = !!(
     network?.routing_peers_count && network?.routing_peers_count >= 2
@@ -154,7 +205,7 @@ function NetworkInformationCard({ network }: Readonly<{ network: Network }>) {
   const policyCount = network.policies?.length ?? 0;
 
   return (
-    <Card>
+    <Card className={"w-full lg:w-1/2"}>
       <Card.List>
         <Card.ListItem
           tooltip={false}

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

@@ -4,8 +4,6 @@ import Breadcrumbs from "@components/Breadcrumbs";
 import Button from "@components/Button";
 import { Callout } from "@components/Callout";
 import Card from "@components/Card";
-import FancyToggleSwitch from "@components/FancyToggleSwitch";
-import FullTooltip from "@components/FullTooltip";
 import HelpText from "@components/HelpText";
 import { Input } from "@components/Input";
 import { Label } from "@components/Label";
@@ -28,22 +26,21 @@ import { RestrictedAccess } from "@components/ui/RestrictedAccess";
 import TextWithTooltip from "@components/ui/TextWithTooltip";
 import useRedirect from "@hooks/useRedirect";
 import useFetchApi from "@utils/api";
-import { cn } from "@utils/helpers";
 import dayjs from "dayjs";
 import { isEmpty, trim } from "lodash";
 import {
+  ArrowRightIcon,
   Barcode,
   CalendarDays,
   Cpu,
   FlagIcon,
   Globe,
   History,
-  LockIcon,
   MapPin,
   MonitorSmartphoneIcon,
   NetworkIcon,
   PencilIcon,
-  TerminalSquare,
+  RadioTowerIcon,
   TimerResetIcon,
 } from "lucide-react";
 import { useRouter, useSearchParams } from "next/navigation";
@@ -64,10 +61,13 @@ import type { Peer } from "@/interfaces/Peer";
 import PageContainer from "@/layouts/PageContainer";
 import useGroupHelper from "@/modules/groups/useGroupHelper";
 import { AccessiblePeersSection } from "@/modules/peer/AccessiblePeersSection";
-import { PeerExpirationToggle } from "@/modules/peer/PeerExpirationToggle";
 import { PeerNetworkRoutesSection } from "@/modules/peer/PeerNetworkRoutesSection";
+import { PeerRemoteJobsSection } from "@/modules/peer/PeerRemoteJobsSection";
+import { PeerSSHToggle } from "@/modules/peer/PeerSSHToggle";
 import { RDPButton } from "@/modules/remote-access/rdp/RDPButton";
 import { SSHButton } from "@/modules/remote-access/ssh/SSHButton";
+import Link from "next/link";
+import { PeerExpirationSettings } from "@/modules/peer/PeerExpirationSettings";
 
 export default function PeerPage() {
   const queryParameter = useSearchParams();
@@ -81,13 +81,6 @@ export default function PeerPage() {
 
   useRedirect("/peers", false, !peerId || isRestricted);
 
-  const peerKey = useMemo(() => {
-    let id = peer?.id ?? "";
-    let ssh = peer?.ssh_enabled ? "1" : "0";
-    let expiration = peer?.login_expiration_enabled ? "1" : "0";
-    return `${id}-${ssh}-${expiration}`;
-  }, [peer]);
-
   if (isRestricted) {
     return (
       <PageContainer>
@@ -107,8 +100,8 @@ export default function PeerPage() {
     );
 
   return peer && !isLoading ? (
-    <PeerProvider peer={peer} key={peerId}>
-      <PeerOverview key={peerKey} />
+    <PeerProvider peer={peer} key={peerId} isPeerDetailPage={true}>
+      <PeerOverview key={peer?.id} />
     </PeerProvider>
   ) : (
     <FullScreenLoading />
@@ -141,19 +134,12 @@ function PeerOverview() {
 const PeerGeneralInformation = () => {
   const router = useRouter();
   const { mutate } = useSWRConfig();
-  const { peer, user, peerGroups, openSSHDialog, update } = usePeer();
-  const [ssh, setSsh] = useState(peer.ssh_enabled);
+  const { peer, user, peerGroups, update } = usePeer();
   const [name, setName] = useState(peer.name);
   const [showEditNameModal, setShowEditNameModal] = useState(false);
-  const [loginExpiration, setLoginExpiration] = useState(
-    peer.login_expiration_enabled,
-  );
-  const [inactivityExpiration, setInactivityExpiration] = useState(
-    peer.inactivity_expiration_enabled,
-  );
   const [selectedGroups, setSelectedGroups, { getAllGroupCalls }] =
     useGroupHelper({
-      initial: peerGroups,
+      initial: peerGroups?.filter((g) => g?.name !== "All"),
       peer,
     });
 
@@ -161,10 +147,7 @@ const PeerGeneralInformation = () => {
    * Detect if there are changes in the peer information, if there are changes, then enable the save button.
    */
   const { hasChanges, updateRef: updateHasChangedRef } = useHasChanges([
-    ssh,
     selectedGroups,
-    loginExpiration,
-    inactivityExpiration,
   ]);
 
   const updatePeer = async (newName?: string) => {
@@ -174,9 +157,6 @@ const PeerGeneralInformation = () => {
     if (permission.peers.update) {
       const updateRequest = update({
         name: newName ?? name,
-        ssh,
-        loginExpiration,
-        inactivityExpiration,
       });
       batchCall = groupCalls ? [...groupCalls, updateRequest] : [updateRequest];
     } else {
@@ -189,12 +169,7 @@ const PeerGeneralInformation = () => {
       promise: Promise.all(batchCall).then(() => {
         mutate("/peers/" + peer.id);
         mutate("/groups");
-        updateHasChangedRef([
-          ssh,
-          selectedGroups,
-          loginExpiration,
-          inactivityExpiration,
-        ]);
+        updateHasChangedRef([selectedGroups]);
       }),
       loadingMessage: "Saving the peer...",
     });
@@ -245,9 +220,21 @@ const PeerGeneralInformation = () => {
             </h1>
             <LoginExpiredBadge loginExpired={peer.login_expired} />
           </div>
-          <div className={"flex items-center gap-8"}>
-            <Paragraph className={"flex items-center"}>{user?.email}</Paragraph>
-          </div>
+          {(user?.id || user?.email) && (
+            <div className={"flex items-center gap-8"}>
+              <Paragraph className={"flex items-center"}>
+                <Link
+                  href={`/team/user?id=${user?.id}`}
+                  className={
+                    "hover:text-nb-gray-200 transition-all flex items-center gap-1"
+                  }
+                >
+                  {user?.email || user?.id}
+                  <ArrowRightIcon size={14} />
+                </Link>
+              </Paragraph>
+            </div>
+          )}
         </div>
         <div className={"flex gap-4"}>
           <Button
@@ -278,77 +265,9 @@ const PeerGeneralInformation = () => {
         <PeerInformationCard peer={peer} />
 
         <div className={"flex flex-col gap-6 lg:w-1/2 transition-all"}>
-          <div>
-            <PeerExpirationToggle
-              peer={peer}
-              value={loginExpiration}
-              icon={<TimerResetIcon size={16} />}
-              onChange={(state) => {
-                setLoginExpiration(state);
-                !state && setInactivityExpiration(false);
-              }}
-            />
-            {permission.peers.update && !!peer?.user_id && (
-              <div
-                className={cn(
-                  "border border-nb-gray-900 border-t-0 rounded-b-md bg-nb-gray-940 px-[1.28rem] pt-3 pb-5 flex flex-col gap-4 mx-[0.25rem]",
-                  !loginExpiration
-                    ? "opacity-50 pointer-events-none"
-                    : "bg-nb-gray-930/80",
-                )}
-              >
-                <PeerExpirationToggle
-                  peer={peer}
-                  variant={"blank"}
-                  value={inactivityExpiration}
-                  onChange={setInactivityExpiration}
-                  title={"Require login after disconnect"}
-                  description={
-                    "Enable to require authentication after users disconnect from management for 10 minutes."
-                  }
-                  className={
-                    !loginExpiration ? "opacity-40 pointer-events-none" : ""
-                  }
-                />
-              </div>
-            )}
-          </div>
+          <PeerExpirationSettings />
 
-          <FullTooltip
-            content={
-              <div
-                className={"flex gap-2 items-center !text-nb-gray-300 text-xs"}
-              >
-                <LockIcon size={14} />
-                <span>
-                  {`You don't have the required permissions to update this
-                          setting.`}
-                </span>
-              </div>
-            }
-            interactive={false}
-            className={"w-full block"}
-            disabled={permission.peers.update}
-          >
-            <FancyToggleSwitch
-              value={ssh}
-              disabled={!permission.peers.update}
-              onChange={(set) =>
-                !set
-                  ? setSsh(false)
-                  : openSSHDialog().then((confirm) => setSsh(confirm))
-              }
-              label={
-                <>
-                  <TerminalSquare size={16} />
-                  SSH Access
-                </>
-              }
-              helpText={
-                "Enable the SSH server on this peer to access the machine via an secure shell."
-              }
-            />
-          </FullTooltip>
+          <PeerSSHToggle />
 
           {/* Remote Access Buttons */}
           <div>
@@ -410,6 +329,13 @@ const PeerOverviewTabs = () => {
             Accessible Peers
           </TabsTrigger>
         )}
+
+        {peer?.id && permission.peers.delete && (
+          <TabsTrigger value={"peer-job"}>
+            <RadioTowerIcon size={16} />
+            Remote Jobs
+          </TabsTrigger>
+        )}
       </TabsList>
 
       {permission.routes.read && (
@@ -423,6 +349,11 @@ const PeerOverviewTabs = () => {
           <AccessiblePeersSection peerID={peer.id} />
         </TabsContent>
       )}
+      {peer.id && permission.peers.delete && (
+        <TabsContent value={"peer-job"} className={"pb-8"}>
+          <PeerRemoteJobsSection peerID={peer.id} />
+        </TabsContent>
+      )}
     </Tabs>
   );
 };
@@ -610,9 +541,9 @@ function PeerInformationCard({ peer }: Readonly<{ peer: Peer }>) {
               peer.connected
                 ? "just now"
                 : dayjs(peer.last_seen).format("D MMMM, YYYY [at] h:mm A") +
-                  " (" +
-                  dayjs().to(peer.last_seen) +
-                  ")"
+                " (" +
+                dayjs().to(peer.last_seen) +
+                ")"
             }
           />