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,83 +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 PeersProvider from "@/contexts/PeersProvider";
-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}
-        >
-          <PeersProvider>
-            <ReverseProxyEventsTable headingTarget={portalTarget} />
-          </PeersProvider>
-        </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/servers/page.tsx

@@ -68,8 +68,16 @@ function ServersView() {
         <h1 ref={headingRef}>Servers</h1>
         <Paragraph>
           Servers, VMs, autonomous agents and other unattended machines with no
-          user behind them, typically enrolled with a{" "}
-          <InlineLink href={"/settings?tab=setup-keys"}>setup key.</InlineLink>
+          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 />}>

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/page.tsx

@@ -42,15 +42,11 @@ export default function ReverseProxyClustersPage() {
         <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.
-        </Paragraph>
-        <Paragraph>
-          Learn more about
+          self-hosted on your own infrastructure.{" "}
           <InlineLink href={REVERSE_PROXY_CLUSTERS_DOCS_LINK} target={"_blank"}>
-            Clusters
+            Learn more
             <ExternalLinkIcon size={12} />
           </InlineLink>
-          in our documentation.
         </Paragraph>
       </div>
       <RestrictedAccess

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;

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

@@ -0,0 +1,77 @@
+"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 PeersProvider from "@/contexts/PeersProvider";
+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";
+
+export default function ProxyLogsPage() {
+  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="Reverse Proxy"
+            disabled
+            icon={<ReverseProxyIcon size={15} />}
+          />
+          <Breadcrumbs.Item
+            href="/reverse-proxy/logs"
+            label="Access Logs"
+            icon={<ReverseProxyIcon size={15} />}
+          />
+        </Breadcrumbs>
+
+        <h1 ref={headingRef}>Access Logs</h1>
+
+        <Paragraph>
+          View access logs for your reverse proxy services, including allowed
+          and denied requests.{" "}
+          <InlineLink href={REVERSE_PROXY_EVENTS_DOCS_LINK} target="_blank">
+            Learn more <ExternalLinkIcon size={12} />
+          </InlineLink>
+        </Paragraph>
+      </div>
+
+      <RestrictedAccess
+        page="Access Logs"
+        hasAccess={permission?.services?.read}
+      >
+        <ServerPaginationProvider
+          url="/events/proxy"
+          defaultPageSize={25}
+          defaultFilters={defaultFilters}
+        >
+          <PeersProvider>
+            <ReverseProxyEventsTable headingTarget={portalTarget} />
+          </PeersProvider>
+        </ServerPaginationProvider>
+      </RestrictedAccess>
+    </PageContainer>
+  );
+}

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

@@ -43,15 +43,11 @@ export default function ReverseProxyServicesPage() {
         </Breadcrumbs>
         <h1 ref={headingRef}>Services</h1>
         <Paragraph>
-          Expose services securely through NetBird&apos;s reverse proxy.
-        </Paragraph>
-        <Paragraph>
-          Learn more about
+          Expose services securely through NetBird&apos;s reverse proxy.{" "}
           <InlineLink href={REVERSE_PROXY_DOCS_LINK} target={"_blank"}>
-            Services
+            Learn more
             <ExternalLinkIcon size={12} />
           </InlineLink>
-          in our documentation.
         </Paragraph>
 
         {isNetBirdHosted() ? (

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

@@ -6,6 +6,7 @@ import {
   AlertOctagonIcon,
   FingerprintIcon,
   FolderGit2Icon,
+  KeyRound,
   LockIcon,
   MonitorSmartphoneIcon,
   NetworkIcon,
@@ -13,7 +14,6 @@ import {
 } from "lucide-react";
 import { useSearchParams } from "next/navigation";
 import React, { useEffect, useMemo, useState } from "react";
-import SetupKeysIcon from "@/assets/icons/SetupKeysIcon";
 import { usePermissions } from "@/contexts/PermissionsProvider";
 import { useLoggedInUser } from "@/contexts/UsersProvider";
 import PageContainer from "@/layouts/PageContainer";
@@ -59,7 +59,7 @@ export default function NetBirdSettings() {
               </VerticalTabs.Trigger>
               {permission.setup_keys.read && (
                 <VerticalTabs.Trigger value="setup-keys">
-                  <SetupKeysIcon size={14} />
+                  <KeyRound size={14} />
                   Setup Keys
                 </VerticalTabs.Trigger>
               )}

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

@@ -47,18 +47,14 @@ export default function ServiceUsers() {
         <h1 ref={headingRef}>Service Users</h1>
         <Paragraph>
           Use service users to create API tokens and avoid losing automated
-          access.
-        </Paragraph>
-        <Paragraph>
-          Learn more about
+          access.{" "}
           <InlineLink
             href={"https://docs.netbird.io/how-to/access-netbird-public-api"}
             target={"_blank"}
           >
-            Service Users
+            Learn more
             <ExternalLinkIcon size={12} />
           </InlineLink>
-          in our documentation.
         </Paragraph>
       </div>
       <RestrictedAccess

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

@@ -46,18 +46,14 @@ export default function TeamUsers() {
         <h1 ref={headingRef}>Users</h1>
         <Paragraph>
           Manage users and their permissions. Same-domain email users are added
-          automatically on first sign-in.
-        </Paragraph>
-        <Paragraph>
-          Learn more about
+          automatically on first sign-in.{" "}
           <InlineLink
             href={"https://docs.netbird.io/how-to/add-users-to-your-network"}
             target={"_blank"}
           >
-            Users
+            Learn more
             <ExternalLinkIcon size={12} />
           </InlineLink>
-          in our documentation.
         </Paragraph>
       </div>
       <RestrictedAccess page={"Users"} hasAccess={permission.users.read}>