Update reverse proxy modals (#661)

* add multi-environment deployment options for reverse proxy setup

* refactor reverse proxy modal to handle state updates more robustly

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

@@ -41,18 +41,14 @@ export default function AccessControlPage() {
           <h1 ref={headingRef}>Access Control Policies</h1>
           <Paragraph>
             Create rules to manage access in your network and define what peers
-            can connect.
-          </Paragraph>
-          <Paragraph>
-            Learn more about
+            can connect.{" "}
             <InlineLink
               href={"https://docs.netbird.io/how-to/manage-network-access"}
               target={"_blank"}
             >
-              Access Controls
+              Learn more
               <ExternalLinkIcon size={12} />
             </InlineLink>
-            in our documentation.
           </Paragraph>
         </div>
 

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

@@ -45,18 +45,14 @@ export default function NameServers() {
         </Breadcrumbs>
         <h1 ref={headingRef}>Nameservers</h1>
         <Paragraph>
-          Add nameservers for domain name resolution in your NetBird network.
-        </Paragraph>
-        <Paragraph>
-          Learn more about
+          Add nameservers for domain name resolution in your NetBird network.{" "}
           <InlineLink
             href={"https://docs.netbird.io/how-to/manage-dns-in-your-network"}
             target={"_blank"}
           >
-            DNS
+            Learn more
             <ExternalLinkIcon size={12} />
           </InlineLink>
-          in our documentation.
         </Paragraph>
       </div>
 

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

@@ -52,17 +52,15 @@ export default function NameServerSettings() {
           />
         </Breadcrumbs>
         <h1>DNS Settings</h1>
-        <Paragraph>{"Manage your account's DNS settings."}</Paragraph>
         <Paragraph>
-          Learn more about
+          {"Manage your account's DNS settings."}{" "}
           <InlineLink
             href={"https://docs.netbird.io/how-to/manage-dns-in-your-network"}
             target={"_blank"}
           >
-            DNS
+            Learn more
             <ExternalLinkIcon size={12} />
           </InlineLink>
-          in our documentation.
         </Paragraph>
         <RestrictedAccess page={"DNS Settings"} hasAccess={permission.dns.read}>
           {!isLoading && initialDNSGroups !== undefined ? (

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

@@ -42,15 +42,11 @@ export default function DNSZonePage() {
         </Breadcrumbs>
         <h1 ref={headingRef}>Zones</h1>
         <Paragraph>
-          Manage DNS zones to control domain name resolution for your network.
-        </Paragraph>
-        <Paragraph>
-          Learn more about
+          Manage DNS zones to control domain name resolution for your network.{" "}
           <InlineLink href={DNS_ZONE_DOCS_LINK} target={"_blank"}>
-            DNS Zones
+            Learn more
             <ExternalLinkIcon size={12} />
           </InlineLink>
-          in our documentation.
         </Paragraph>
       </div>
 

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

@@ -39,17 +39,16 @@ export default function Activity() {
           />
         </Breadcrumbs>
         <h1 ref={headingRef}>Audit Events</h1>
-        <Paragraph>Here you can see all the audit activity events.</Paragraph>
         <Paragraph>
-          Learn more about{" "}
+          Audit configuration changes, access policy updates, and peer
+          registration and login events across your network.{" "}
           <InlineLink
             href={"https://docs.netbird.io/how-to/audit-events-logging"}
             target={"_blank"}
           >
-            Audit Events
+            Learn more
             <ExternalLinkIcon size={12} />
           </InlineLink>
-          in our documentation.
         </Paragraph>
       </div>
       <RestrictedAccess page={"Activity"} hasAccess={permission.events.read}>

src/app/(dashboard)/events/proxy/page.tsx

@@ -1,80 +1,5 @@
-"use client";
-
-import Breadcrumbs from "@components/Breadcrumbs";
-import InlineLink from "@components/InlineLink";
-import Paragraph from "@components/Paragraph";
-import { RestrictedAccess } from "@components/ui/RestrictedAccess";
-import dayjs from "dayjs";
-import { ExternalLinkIcon } from "lucide-react";
-import ReverseProxyIcon from "@/assets/icons/ReverseProxyIcon";
-import React, { useMemo } from "react";
-import ActivityIcon from "@/assets/icons/ActivityIcon";
-import { usePermissions } from "@/contexts/PermissionsProvider";
-import ServerPaginationProvider from "@/contexts/ServerPaginationProvider";
-import PageContainer from "@/layouts/PageContainer";
-import ReverseProxyEventsTable from "@/modules/reverse-proxy/events/ReverseProxyEventsTable";
-import { usePortalElement } from "@hooks/usePortalElement";
-import { REVERSE_PROXY_EVENTS_DOCS_LINK } from "@/interfaces/ReverseProxy";
+import { redirect } from "next/navigation";
 
 export default function ProxyEventsPage() {
-  const { permission } = usePermissions();
-  const { ref: headingRef, portalTarget } =
-    usePortalElement<HTMLHeadingElement>();
-
-  const defaultFilters = useMemo(
-    () => ({
-      start_date: dayjs().subtract(7, "day").startOf("day").toISOString(),
-      end_date: dayjs().endOf("day").toISOString(),
-      sort_by: "timestamp",
-      sort_order: "desc",
-    }),
-    [],
-  );
-
-  return (
-    <PageContainer>
-      <div className="p-default py-6">
-        <Breadcrumbs>
-          <Breadcrumbs.Item
-            label="Activity"
-            disabled
-            icon={<ActivityIcon size={13} />}
-          />
-          <Breadcrumbs.Item
-            href="/events/proxy"
-            label="Proxy Events"
-            icon={<ReverseProxyIcon size={15} />}
-          />
-        </Breadcrumbs>
-
-        <h1 ref={headingRef}>Proxy Events</h1>
-
-        <Paragraph>
-          View access logs for your reverse proxy services, including allowed
-          and denied requests.
-        </Paragraph>
-
-        <Paragraph>
-          Learn more about{" "}
-          <InlineLink href={REVERSE_PROXY_EVENTS_DOCS_LINK} target="_blank">
-            Proxy Events <ExternalLinkIcon size={12} />
-          </InlineLink>{" "}
-          in our documentation.
-        </Paragraph>
-      </div>
-
-      <RestrictedAccess
-        page="Proxy Events"
-        hasAccess={permission?.services?.read}
-      >
-        <ServerPaginationProvider
-          url="/events/proxy"
-          defaultPageSize={10}
-          defaultFilters={defaultFilters}
-        >
-          <ReverseProxyEventsTable headingTarget={portalTarget} />
-        </ServerPaginationProvider>
-      </RestrictedAccess>
-    </PageContainer>
-  );
+  redirect("/reverse-proxy/logs");
 }

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

@@ -31,19 +31,14 @@ export default function GroupsPage() {
         </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{" "}
+          Organize peers, users and resources into groups to manage access.{" "}
           <InlineLink
             href={"https://docs.netbird.io/how-to/manage-network-access"}
             target={"_blank"}
           >
-            Groups
+            Learn more
             <ExternalLinkIcon size={12} />
           </InlineLink>
-          in our documentation.
         </Paragraph>
       </div>
       <RestrictedAccess hasAccess={permission.groups.read} page={"Groups"}>

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

@@ -37,28 +37,27 @@ export default function NetworkRoutes() {
           <div className={"p-default py-6"}>
             <Breadcrumbs>
               <Breadcrumbs.Item
-                href={"/network-routes"}
-                label={"Network Routes"}
+                label={"Network Routing"}
                 icon={<NetworkRoutesIcon size={13} />}
               />
+              <Breadcrumbs.Item href={"/network-routes"} label={"Routes"} />
             </Breadcrumbs>
-            <h1 ref={headingRef}>Network Routes</h1>
+            <h1 ref={headingRef}>Routes</h1>
             <Paragraph>
-              Network routes allow you to access other networks like LANs and
-              VPCs without installing NetBird on every resource.
-            </Paragraph>
-            <Paragraph>
-              Learn more about
+              Access other networks like LANs and VPCs without installing
+              NetBird on every resource.{" "}
               <InlineLink
                 href={
                   "https://docs.netbird.io/how-to/routing-traffic-to-private-networks"
                 }
                 target={"_blank"}
+                aria-label={
+                  "Learn more about routing traffic to private networks"
+                }
               >
-                Network Routes
+                Learn more
                 <ExternalLinkIcon size={12} />
               </InlineLink>
-              in our documentation.
             </Paragraph>
 
             <Callout className={"max-w-xl mt-5"} variant={"warning"}>

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

@@ -26,26 +26,22 @@ export default function Networks() {
       <div className={"p-default py-6"}>
         <Breadcrumbs>
           <Breadcrumbs.Item
-            href={"/networks"}
-            label={"Networks"}
+            label={"Network Routing"}
             icon={<NetworkRoutesIcon size={13} />}
           />
+          <Breadcrumbs.Item href={"/networks"} label={"Networks"} />
         </Breadcrumbs>
         <h1 ref={headingRef}>Networks</h1>
         <Paragraph>
-          Networks allow you to access internal resources in LANs and VPCs
-          without installing NetBird on every machine.
-        </Paragraph>
-        <Paragraph>
-          Learn more about
+          Access internal resources in LANs and VPCs without installing NetBird
+          on every machine.{" "}
           <InlineLink
             href={"https://docs.netbird.io/how-to/networks"}
             target={"_blank"}
           >
-            Networks
+            Learn more
             <ExternalLinkIcon size={12} />
           </InlineLink>
-          in our documentation.
         </Paragraph>
       </div>
 

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

@@ -61,6 +61,7 @@ import RoutesProvider from "@/contexts/RoutesProvider";
 import { useHasChanges } from "@/hooks/useHasChanges";
 import type { Group } from "@/interfaces/Group";
 import type { Peer } from "@/interfaces/Peer";
+import type { User } from "@/interfaces/User";
 import PageContainer from "@/layouts/PageContainer";
 import useGroupHelper from "@/modules/groups/useGroupHelper";
 import { AccessiblePeersSection } from "@/modules/peer/AccessiblePeersSection";
@@ -118,8 +119,17 @@ export default function PeerPage() {
   );
 }
 
+// Route the user back to the list view that matches the peer's kind
+// (a real user owner → /peers/users, otherwise /peers/servers). Used
+// for the breadcrumb and the Cancel back-button so they don't bounce
+// through the legacy /peers redirect.
+function peerListPath(user: User | undefined): string {
+  const hasRealUser = !!user && !user.is_service_user;
+  return hasRealUser ? "/peers/users" : "/peers/servers";
+}
+
 function PeerOverview() {
-  const { peer } = usePeer();
+  const { peer, user } = usePeer();
 
   return (
     <PageContainer>
@@ -128,7 +138,7 @@ function PeerOverview() {
           <div className={"p-default py-6 pb-0"}>
             <Breadcrumbs>
               <Breadcrumbs.Item
-                href={"/peers"}
+                href={peerListPath(user)}
                 label={"Peers"}
                 icon={<PeerIcon size={13} />}
               />
@@ -297,7 +307,7 @@ const PeerHeader = () => {
             <Button
               variant={"default"}
               className={"w-full"}
-              onClick={() => router.push("/peers")}
+              onClick={() => router.push(peerListPath(user))}
             >
               Cancel
             </Button>

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

@@ -1,116 +1,5 @@
-"use client";
+import { redirect } from "next/navigation";
 
-import Breadcrumbs from "@components/Breadcrumbs";
-import InlineLink from "@components/InlineLink";
-import Paragraph from "@components/Paragraph";
-import SkeletonTable from "@components/skeletons/SkeletonTable";
-import { usePortalElement } from "@hooks/usePortalElement";
-import { ExternalLinkIcon } from "lucide-react";
-import React, { lazy, Suspense } from "react";
-import PeerIcon from "@/assets/icons/PeerIcon";
-import PeersProvider, { usePeers } from "@/contexts/PeersProvider";
-import { usePermissions } from "@/contexts/PermissionsProvider";
-import { useUsers } from "@/contexts/UsersProvider";
-import PageContainer from "@/layouts/PageContainer";
-import { SetupModalContent } from "@/modules/setup-netbird-modal/SetupModal";
-
-const PeersTable = lazy(() => import("@/modules/peers/PeersTable"));
-
-export default function Peers() {
-  const { isRestricted } = usePermissions();
-
-  return (
-    <PageContainer>
-      {isRestricted ? (
-        <PeersBlockedView />
-      ) : (
-        <PeersProvider>
-          <PeersView />
-        </PeersProvider>
-      )}
-    </PageContainer>
-  );
-}
-
-function PeersView() {
-  const { peers, isLoading } = usePeers();
-  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={"p-default py-6"}>
-        <Breadcrumbs>
-          <Breadcrumbs.Item
-            href={"/peers"}
-            label={"Peers"}
-            icon={<PeerIcon size={13} />}
-          />
-        </Breadcrumbs>
-        <h1 ref={headingRef}>Peers</h1>
-        <Paragraph>
-          A list of all machines and devices connected to your private network.
-          Use this view to manage peers.
-        </Paragraph>
-        <Paragraph>
-          Learn more about{" "}
-          <InlineLink
-            href={"https://docs.netbird.io/how-to/add-machines-to-your-network"}
-            target={"_blank"}
-          >
-            Peers
-            <ExternalLinkIcon size={12} />
-          </InlineLink>
-          in our documentation.
-        </Paragraph>
-      </div>
-      <Suspense fallback={<SkeletonTable />}>
-        <PeersTable
-          isLoading={isLoading}
-          peers={peersWithUser}
-          headingTarget={portalTarget}
-        />
-      </Suspense>
-    </>
-  );
-}
-
-function PeersBlockedView() {
-  return (
-    <div className={"flex items-center justify-center flex-col"}>
-      <div className={"p-default py-6 max-w-3xl text-center"}>
-        <h1>Add new device to your network</h1>
-        <Paragraph className={"inline"}>
-          To get started, install NetBird and log in using your email account.
-          After that you should be connected. If you have further questions
-          check out our{" "}
-          <InlineLink
-            href={"https://docs.netbird.io/how-to/getting-started#installation"}
-            target={"_blank"}
-          >
-            Installation Guide
-            <ExternalLinkIcon size={12} />
-          </InlineLink>
-        </Paragraph>
-      </div>
-      <div className={"px-3 pt-1 pb-8 max-w-3xl w-full"}>
-        <div
-          className={
-            "rounded-md border border-nb-gray-900/70 grid w-full bg-nb-gray-930/40 stepper-bg-variant"
-          }
-        >
-          <SetupModalContent header={false} footer={false} />
-        </div>
-      </div>
-    </div>
-  );
+export default function PeersIndex() {
+  redirect("/peers/users");
 }

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

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

@@ -0,0 +1,123 @@
+"use client";
+
+import Breadcrumbs from "@components/Breadcrumbs";
+import InlineLink from "@components/InlineLink";
+import Paragraph from "@components/Paragraph";
+import SkeletonTable from "@components/skeletons/SkeletonTable";
+import { usePortalElement } from "@hooks/usePortalElement";
+import { ExternalLinkIcon } from "lucide-react";
+import React, { lazy, Suspense, useMemo } from "react";
+import PeerIcon from "@/assets/icons/PeerIcon";
+import PeersProvider, { usePeers } from "@/contexts/PeersProvider";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import { useUsers } from "@/contexts/UsersProvider";
+import PageContainer from "@/layouts/PageContainer";
+import { SetupModalContent } from "@/modules/setup-netbird-modal/SetupModal";
+
+const PeersTable = lazy(() => import("@/modules/peers/PeersTable"));
+
+export default function ServersPage() {
+  const { isRestricted } = usePermissions();
+
+  return (
+    <PageContainer>
+      {isRestricted ? (
+        <ServersBlockedView />
+      ) : (
+        <PeersProvider>
+          <ServersView />
+        </PeersProvider>
+      )}
+    </PageContainer>
+  );
+}
+
+function ServersView() {
+  const { peers, isLoading: isPeersLoading } = usePeers();
+  const { users, isLoading: isUsersLoading } = useUsers();
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
+  // The kind filter classifies peers by whether their owner is a real
+  // user vs a service/no-user, so we must wait until both peers and
+  // users have loaded before joining them — otherwise peers temporarily
+  // render with peer.user === undefined and get misclassified.
+  const isLoading = isPeersLoading || isUsersLoading;
+  const peersWithUser = useMemo(() => {
+    if (!peers || !users) return undefined;
+    return peers.map((peer) => ({
+      ...peer,
+      user: users.find((u) => u.id === peer.user_id),
+    }));
+  }, [peers, users]);
+
+  return (
+    <>
+      <div className={"p-default py-6"}>
+        <Breadcrumbs>
+          <Breadcrumbs.Item
+            label={"Peers"}
+            icon={<PeerIcon size={13} />}
+          />
+          <Breadcrumbs.Item
+            href={"/peers/servers"}
+            label={"Servers"}
+            active
+          />
+        </Breadcrumbs>
+        <h1 ref={headingRef}>Servers</h1>
+        <Paragraph>
+          Servers, VMs, autonomous agents and other unattended machines with no
+          user behind them, typically enrolled with a setup key.{" "}
+          <InlineLink
+            href={
+              "https://docs.netbird.io/how-to/register-machines-using-setup-keys"
+            }
+            target={"_blank"}
+          >
+            Learn more
+            <ExternalLinkIcon size={12} />
+          </InlineLink>
+        </Paragraph>
+      </div>
+      <Suspense fallback={<SkeletonTable />}>
+        <PeersTable
+          isLoading={isLoading}
+          peers={peersWithUser}
+          headingTarget={portalTarget}
+          kind={"servers"}
+        />
+      </Suspense>
+    </>
+  );
+}
+
+function ServersBlockedView() {
+  return (
+    <div className={"flex items-center justify-center flex-col"}>
+      <div className={"p-default py-6 max-w-3xl text-center"}>
+        <h1>Add new server to your network</h1>
+        <Paragraph className={"inline"}>
+          To get started, install NetBird on the server and enroll it using a
+          setup key. If you have further questions check out our{" "}
+          <InlineLink
+            href={"https://docs.netbird.io/how-to/getting-started#installation"}
+            target={"_blank"}
+          >
+            Installation Guide
+            <ExternalLinkIcon size={12} />
+          </InlineLink>
+        </Paragraph>
+      </div>
+      <div className={"px-3 pt-1 pb-8 max-w-3xl w-full"}>
+        <div
+          className={
+            "rounded-md border border-nb-gray-900/70 grid w-full bg-nb-gray-930/40 stepper-bg-variant"
+          }
+        >
+          <SetupModalContent header={false} footer={false} isUserDevice={false} />
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(dashboard)/peers/users/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: `User Devices - ${globalMetaTitle}`,
+};
+export default BlankLayout;

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

@@ -0,0 +1,122 @@
+"use client";
+
+import Breadcrumbs from "@components/Breadcrumbs";
+import InlineLink from "@components/InlineLink";
+import Paragraph from "@components/Paragraph";
+import SkeletonTable from "@components/skeletons/SkeletonTable";
+import { usePortalElement } from "@hooks/usePortalElement";
+import { ExternalLinkIcon } from "lucide-react";
+import React, { lazy, Suspense, useMemo } from "react";
+import PeerIcon from "@/assets/icons/PeerIcon";
+import PeersProvider, { usePeers } from "@/contexts/PeersProvider";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import { useUsers } from "@/contexts/UsersProvider";
+import PageContainer from "@/layouts/PageContainer";
+import { SetupModalContent } from "@/modules/setup-netbird-modal/SetupModal";
+
+const PeersTable = lazy(() => import("@/modules/peers/PeersTable"));
+
+export default function UserDevicesPage() {
+  const { isRestricted } = usePermissions();
+
+  return (
+    <PageContainer>
+      {isRestricted ? (
+        <UserDevicesBlockedView />
+      ) : (
+        <PeersProvider>
+          <UserDevicesView />
+        </PeersProvider>
+      )}
+    </PageContainer>
+  );
+}
+
+function UserDevicesView() {
+  const { peers, isLoading: isPeersLoading } = usePeers();
+  const { users, isLoading: isUsersLoading } = useUsers();
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
+  // The kind filter classifies peers by whether their owner is a real
+  // user vs a service/no-user, so we must wait until both peers and
+  // users have loaded before joining them — otherwise peers temporarily
+  // render with peer.user === undefined and get misclassified.
+  const isLoading = isPeersLoading || isUsersLoading;
+  const peersWithUser = useMemo(() => {
+    if (!peers || !users) return undefined;
+    return peers.map((peer) => ({
+      ...peer,
+      user: users.find((u) => u.id === peer.user_id),
+    }));
+  }, [peers, users]);
+
+  return (
+    <>
+      <div className={"p-default py-6"}>
+        <Breadcrumbs>
+          <Breadcrumbs.Item
+            label={"Peers"}
+            icon={<PeerIcon size={13} />}
+          />
+          <Breadcrumbs.Item
+            href={"/peers/users"}
+            label={"User Devices"}
+            active
+          />
+        </Breadcrumbs>
+        <h1 ref={headingRef}>User Devices</h1>
+        <Paragraph>
+          Laptops, phones and other personal devices with a user behind them,
+          typically added when the user signs in with SSO.{" "}
+          <InlineLink
+            href={"https://docs.netbird.io/how-to/add-machines-to-your-network"}
+            target={"_blank"}
+          >
+            Learn more
+            <ExternalLinkIcon size={12} />
+          </InlineLink>
+        </Paragraph>
+      </div>
+      <Suspense fallback={<SkeletonTable />}>
+        <PeersTable
+          isLoading={isLoading}
+          peers={peersWithUser}
+          headingTarget={portalTarget}
+          kind={"users"}
+        />
+      </Suspense>
+    </>
+  );
+}
+
+function UserDevicesBlockedView() {
+  return (
+    <div className={"flex items-center justify-center flex-col"}>
+      <div className={"p-default py-6 max-w-3xl text-center"}>
+        <h1>Add new device to your network</h1>
+        <Paragraph className={"inline"}>
+          To get started, install NetBird and log in using your email account.
+          After that you should be connected. If you have further questions
+          check out our{" "}
+          <InlineLink
+            href={"https://docs.netbird.io/how-to/getting-started#installation"}
+            target={"_blank"}
+          >
+            Installation Guide
+            <ExternalLinkIcon size={12} />
+          </InlineLink>
+        </Paragraph>
+      </div>
+      <div className={"px-3 pt-1 pb-8 max-w-3xl w-full"}>
+        <div
+          className={
+            "rounded-md border border-nb-gray-900/70 grid w-full bg-nb-gray-930/40 stepper-bg-variant"
+          }
+        >
+          <SetupModalContent header={false} footer={false} isUserDevice />
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -46,18 +46,14 @@ export default function PostureChecksPage() {
           </Breadcrumbs>
           <h1 ref={headingRef}>Posture Checks</h1>
           <Paragraph>
-            Use posture checks to further restrict access in your network.
-          </Paragraph>
-          <Paragraph>
-            Learn more about
+            Use posture checks to further restrict access in your network.{" "}
             <InlineLink
               href={"https://docs.netbird.io/how-to/manage-posture-checks"}
               target={"_blank"}
             >
-              Posture Checks
+              Learn more
               <ExternalLinkIcon size={12} />
             </InlineLink>
-            in our documentation.
           </Paragraph>
         </div>
 

src/app/(dashboard)/reverse-proxy/clusters/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: `Clusters - Reverse Proxy - ${globalMetaTitle}`,
+};
+export default BlankLayout;

src/app/(dashboard)/reverse-proxy/clusters/page.tsx

@@ -0,0 +1,62 @@
+"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 { ExternalLinkIcon } from "lucide-react";
+import React, { lazy, Suspense } from "react";
+import ReverseProxyIcon from "@/assets/icons/ReverseProxyIcon";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import { REVERSE_PROXY_CLUSTERS_DOCS_LINK } from "@/interfaces/ReverseProxy";
+import PageContainer from "@/layouts/PageContainer";
+
+const ClustersTable = lazy(
+  () => import("@/modules/reverse-proxy/clusters/ClustersTable"),
+);
+
+export default function ReverseProxyClustersPage() {
+  const { permission } = usePermissions();
+
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
+  return (
+    <PageContainer>
+      <div className={"p-default py-6"}>
+        <Breadcrumbs>
+          <Breadcrumbs.Item
+            href={"/reverse-proxy/services"}
+            label={"Reverse Proxy"}
+            icon={<ReverseProxyIcon size={16} />}
+          />
+          <Breadcrumbs.Item
+            href={"/reverse-proxy/clusters"}
+            label={"Clusters"}
+            active={true}
+          />
+        </Breadcrumbs>
+        <h1 ref={headingRef}>Clusters</h1>
+        <Paragraph>
+          Proxy clusters that route inbound traffic to your services. Shared
+          clusters are deployed at the server level; account clusters are
+          self-hosted on your own infrastructure.{" "}
+          <InlineLink href={REVERSE_PROXY_CLUSTERS_DOCS_LINK} target={"_blank"}>
+            Learn more
+            <ExternalLinkIcon size={12} />
+          </InlineLink>
+        </Paragraph>
+      </div>
+      <RestrictedAccess
+        page={"Clusters"}
+        hasAccess={permission?.services?.read}
+      >
+        <Suspense fallback={<SkeletonTable />}>
+          <ClustersTable headingTarget={portalTarget} />
+        </Suspense>
+      </RestrictedAccess>
+    </PageContainer>
+  );
+}

src/app/(dashboard)/reverse-proxy/custom-domains/page.tsx

@@ -41,18 +41,14 @@ export default function ReverseProxyCustomDomainsPage() {
         </Breadcrumbs>
         <h1 ref={headingRef}>Domains</h1>
         <Paragraph>
-          Add and manage custom domains for your reverse proxy services.
-        </Paragraph>
-        <Paragraph>
-          Learn more about
+          Add and manage custom domains for your reverse proxy services.{" "}
           <InlineLink
             href={REVERSE_PROXY_CUSTOM_DOMAINS_DOCS_LINK}
             target={"_blank"}
           >
-            Custom Domains
+            Learn more
             <ExternalLinkIcon size={12} />
           </InlineLink>
-          in our documentation.
         </Paragraph>
       </div>
       <RestrictedAccess

src/app/(dashboard)/reverse-proxy/logs/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: `Access Logs - Reverse Proxy - ${globalMetaTitle}`,
+};
+export default BlankLayout;