Add env to disable CSP

.github/pull_request_template.md

@@ -1,12 +0,0 @@
-## Issue ticket number and link
-
-## Documentation
-Select exactly one:
-
-- [ ] I added/updated documentation for this change
-- [ ] Documentation is **not needed** for this change (explain why)
-
-### Docs PR URL (required if "docs added" is checked)
-Paste the PR link from https://github.com/netbirdio/docs here:
-
-https://github.com/netbirdio/docs/pull/__

.github/workflows/docs-ack.yml

@@ -1,105 +0,0 @@
-name: Docs Acknowledgement
-
-on:
-  pull_request:
-    types: [opened, edited, synchronize]
-
-permissions:
-  contents: read
-  pull-requests: read
-
-jobs:
-  docs-ack:
-    name: Require docs PR URL or explicit "not needed"
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Read PR body
-        id: body
-        shell: bash
-        run: |
-          set -euo pipefail
-          BODY_B64=$(jq -r '.pull_request.body // "" | @base64' "$GITHUB_EVENT_PATH")
-          {
-            echo "body_b64=$BODY_B64"
-          } >> "$GITHUB_OUTPUT"
-
-      - name: Validate checkbox selection
-        id: validate
-        shell: bash
-        env:
-          BODY_B64: ${{ steps.body.outputs.body_b64 }}
-        run: |
-          set -euo pipefail
-          if ! body="$(printf '%s' "$BODY_B64" | base64 -d)"; then
-            echo "::error::Failed to decode PR body from base64. Data may be corrupted or missing."
-            exit 1
-          fi
-
-          added_checked=$(printf '%s' "$body" | grep -Ei '^[[:space:]]*-\s*\[x\]\s*I added/updated documentation' | wc -l | tr -d '[:space:]' || true)
-          noneed_checked=$(printf '%s' "$body" | grep -Ei '^[[:space:]]*-\s*\[x\]\s*Documentation is \*\*not needed\*\*' | wc -l | tr -d '[:space:]' || true)
-
-          total=$((added_checked + noneed_checked))
-          if [ "$total" -ne 1 ]; then
-            echo "::error::You must check exactly one docs option in the PR template (either 'docs added' OR 'not needed')."
-            exit 1
-          fi
-
-          if [ "$added_checked" -eq 1 ]; then
-            echo "mode=added" >> "$GITHUB_OUTPUT"
-          else
-            echo "mode=noneed" >> "$GITHUB_OUTPUT"
-          fi
-
-      - name: Extract docs PR URL (when 'docs added')
-        if: steps.validate.outputs.mode == 'added'
-        id: extract
-        shell: bash
-        env:
-          BODY_B64: ${{ steps.body.outputs.body_b64 }}
-        run: |
-          set -euo pipefail
-          body="$(printf '%s' "$BODY_B64" | base64 -d)"
-
-          # Strictly require HTTPS and that it's a PR in netbirdio/docs
-          # e.g., https://github.com/netbirdio/docs/pull/1234
-          url="$(printf '%s' "$body" | grep -Eo 'https://github\.com/netbirdio/docs/pull/[0-9]+' | head -n1 || true)"
-
-          if [ -z "${url:-}" ]; then
-            echo "::error::You checked 'docs added' but didn't include a valid HTTPS PR link to netbirdio/docs (e.g., https://github.com/netbirdio/docs/pull/1234)."
-            exit 1
-          fi
-
-          pr_number="$(printf '%s' "$url" | sed -E 's#.*/pull/([0-9]+)$#\1#')"
-          {
-            echo "url=$url"
-            echo "pr_number=$pr_number"
-          } >> "$GITHUB_OUTPUT"
-
-      - name: Verify docs PR exists (and is open or merged)
-        if: steps.validate.outputs.mode == 'added'
-        uses: actions/github-script@v7
-        id: verify
-        env:
-          PR_NUMBER: ${{ steps.extract.outputs.pr_number }}
-        with:
-          script: |
-            const prNumber = parseInt(process.env.PR_NUMBER, 10);
-            const { data } = await github.rest.pulls.get({
-              owner: 'netbirdio',
-              repo: 'docs',
-              pull_number: prNumber
-            });
-
-            // Allow open or merged PRs
-            const ok = data.state === 'open' || data.merged === true;
-            core.setOutput('state', data.state);
-            core.setOutput('merged', String(!!data.merged));
-            if (!ok) {
-              core.setFailed(`Docs PR #${prNumber} exists but is neither open nor merged (state=${data.state}, merged=${data.merged}).`);
-            }
-          result-encoding: string
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: All good
-        run: echo "Documentation requirement satisfied ✅"

.gitignore

@@ -37,8 +37,6 @@ next-env.d.ts
 
 # config
 .local-config.json
-.test-config.json
-cypress.env.json
 .configs/.local-config.zitadel.json
 .configs/.staging-config.json
 .configs/.temp-config.json

announcements.json

@@ -1,9 +1,9 @@
 [
   {
     "tag": "New",
-    "text": "NetBird Reverse Proxy - Expose internal services to the public with automatic TLS and optional authentication.",
-    "link": "https://docs.netbird.io/manage/reverse-proxy",
-    "linkText": "Learn more",
+    "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,

docker/default.conf

@@ -14,14 +14,24 @@ server {
 
     location / {
       try_files $uri $uri.html $uri/ =404;
-      add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
+      add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0" always;
+      add_header X-Frame-Options "SAMEORIGIN" always;
+      add_header X-Content-Type-Options "nosniff" always;
+      add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
+      add_header Content-Security-Policy "default-src 'self' 'unsafe-inline' 'unsafe-eval' data: blob: ws: wss: https:;" always;
+      add_header Last-Modified "";
       expires off;
    }
 
    error_page 404 /404.html;
    location = /404.html {
       internal;
-      add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
+      add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0" always;
+      add_header X-Frame-Options "SAMEORIGIN" always;
+      add_header X-Content-Type-Options "nosniff" always;
+      add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
+      add_header Content-Security-Policy "default-src 'self' 'unsafe-inline' 'unsafe-eval' data: blob: ws: wss: https:;" always;
+      add_header Last-Modified "";
       expires off;
    }
 }

docker/init_react_envs.sh

@@ -62,9 +62,93 @@ 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}
+export NETBIRD_CSP=${NETBIRD_CSP}
+export NETBIRD_CSP_CONNECT_SRC=${NETBIRD_CSP_CONNECT_SRC}
+export NETBIRD_DISABLE_CSP=${NETBIRD_DISABLE_CSP}
 
 echo "NetBird latest version: ${NETBIRD_LATEST_VERSION}"
 
+# Build CSP
+if [[ "${NETBIRD_DISABLE_CSP}" == "true" ]]; then
+    echo "CSP disabled via NETBIRD_DISABLE_CSP"
+    sed -i '/add_header Content-Security-Policy/d' /etc/nginx/http.d/default.conf
+else
+  FIRST_PARTY_CSP="https://pkgs.netbird.io"
+  FIRST_PARTY_CSP_CONNECT_SRC="$NETBIRD_CSP_CONNECT_SRC"
+  THIRD_PARTY_CSP=""
+  THIRD_PARTY_CSP_CONNECT_SRC="https://api.github.com/repos/netbirdio/netbird/releases/latest https://raw.githubusercontent.com/netbirdio/dashboard/"
+  THIRD_PARTY_CSP_SCRIPT_SRC=""
+
+  CSP_DOMAINS=""
+  CSP_DOMAINS_CONNECT_SRC=""
+
+  if [[ -n "${NETBIRD_CSP}" ]]; then
+      CSP_DOMAINS="$CSP_DOMAINS $NETBIRD_CSP"
+  fi
+
+  # Add AUTH_AUTHORITY to CSP
+  if [[ -n "${AUTH_AUTHORITY}" ]]; then
+      CSP_DOMAINS="$CSP_DOMAINS $AUTH_AUTHORITY"
+  fi
+
+  # Add AUTH_AUDIENCE to CSP
+  if [[ -n "${AUTH_AUDIENCE}" && "${AUTH_AUDIENCE}" != "none" && "${AUTH_AUDIENCE}" == *.* ]]; then
+      if [[ "${AUTH_AUDIENCE}" == *"http://"* || "${AUTH_AUDIENCE}" == *"https://"* ]]; then
+          CSP_DOMAINS="$CSP_DOMAINS $AUTH_AUDIENCE"
+      else
+          CSP_DOMAINS="$CSP_DOMAINS https://$AUTH_AUDIENCE"
+      fi
+  fi
+
+  # Add NETBIRD_MGMT_API_ENDPOINT to CSP
+  if [[ -n "${NETBIRD_MGMT_API_ENDPOINT}" ]]; then
+      MGMT_HOST=$(echo "$NETBIRD_MGMT_API_ENDPOINT" | sed -E 's|https?://||' | cut -d'/' -f1)
+      if [[ -n "$MGMT_HOST" ]]; then
+          if [[ "$NETBIRD_MGMT_API_ENDPOINT" == https://* ]]; then
+              CSP_DOMAINS="$CSP_DOMAINS $NETBIRD_MGMT_API_ENDPOINT"
+              CSP_DOMAINS_CONNECT_SRC="$CSP_DOMAINS_CONNECT_SRC wss://$MGMT_HOST"
+          elif [[ "$NETBIRD_MGMT_API_ENDPOINT" == http://* ]]; then
+              CSP_DOMAINS="$CSP_DOMAINS $NETBIRD_MGMT_API_ENDPOINT"
+              CSP_DOMAINS_CONNECT_SRC="$CSP_DOMAINS_CONNECT_SRC ws://$MGMT_HOST"
+          fi
+      fi
+  fi
+
+  # Add LETSENCRYPT_DOMAIN to CSP
+  if [[ -n "${LETSENCRYPT_DOMAIN}" && "${LETSENCRYPT_DOMAIN}" != "none" ]]; then
+      if [[ "$LETSENCRYPT_DOMAIN" == *"localhost"* ]]; then
+          CSP_DOMAINS="$CSP_DOMAINS http://$LETSENCRYPT_DOMAIN"
+          CSP_DOMAINS_CONNECT_SRC="$CSP_DOMAINS_CONNECT_SRC ws://$LETSENCRYPT_DOMAIN ws://*.$LETSENCRYPT_DOMAIN"
+      else
+          CSP_DOMAINS="$CSP_DOMAINS https://$LETSENCRYPT_DOMAIN"
+          CSP_DOMAINS_CONNECT_SRC="$CSP_DOMAINS_CONNECT_SRC wss://$LETSENCRYPT_DOMAIN wss://*.$LETSENCRYPT_DOMAIN"
+      fi
+  fi
+
+  CSP_CONNECT_SRC="$CSP_DOMAINS $CSP_DOMAINS_CONNECT_SRC $FIRST_PARTY_CSP $FIRST_PARTY_CSP_CONNECT_SRC $THIRD_PARTY_CSP $THIRD_PARTY_CSP_CONNECT_SRC"
+  CSP_FRAME_SRC="$CSP_DOMAINS $FIRST_PARTY_CSP $THIRD_PARTY_CSP"
+  CSP_SCRIPT_SRC="$CSP_DOMAINS $FIRST_PARTY_CSP $THIRD_PARTY_CSP $THIRD_PARTY_CSP_SCRIPT_SRC"
+
+  # Remove duplicates
+  CSP_CONNECT_SRC=$(echo $CSP_CONNECT_SRC | tr ' ' '\n' | grep -v '^$' | sort -u | tr '\n' ' ' | sed 's/ $//')
+  CSP_FRAME_SRC=$(echo $CSP_FRAME_SRC | tr ' ' '\n' | grep -v '^$' | sort -u | tr '\n' ' ' | sed 's/ $//')
+  CSP_SCRIPT_SRC=$(echo $CSP_SCRIPT_SRC | tr ' ' '\n' | grep -v '^$' | sort -u | tr '\n' ' ' | sed 's/ $//')
+
+  # Update CSP in nginx config
+  CSP_POLICY="default-src 'none'; connect-src 'self' $CSP_CONNECT_SRC; frame-src 'self' $CSP_FRAME_SRC; script-src 'self' 'wasm-unsafe-eval' $CSP_SCRIPT_SRC; font-src 'self'; img-src * data:; manifest-src 'self'; style-src 'self' 'unsafe-inline'; frame-ancestors 'self'; base-uri 'self'; form-action 'self'; upgrade-insecure-requests;"
+  CSP_HEADER="add_header Content-Security-Policy \"$CSP_POLICY\" always;"
+
+  # Escape sed special characters in replacement string (& | \)
+  CSP_HEADER=$(printf '%s' "$CSP_HEADER" | sed -e 's/[\\&|]/\\&/g')
+
+  echo "CSP header: $CSP_HEADER"
+
+  # Replace CSP header in nginx config
+  sed -i "s|add_header Content-Security-Policy \"[^\"]*\" always;|$CSP_HEADER|g" /etc/nginx/http.d/default.conf || {
+      echo "Failed to replace CSP header"
+  }
+fi
+
 # 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 \$\$NETBIRD_WASM_PATH"
 
@@ -74,4 +158,7 @@ for f in $(grep -R -l AUTH_SUPPORTED_SCOPES /usr/share/nginx/html); do
     cp "$f" "$f".copy
     envsubst "$ENV_STR" < "$f".copy > "$f"
     rm "$f".copy
-done
+done
+
+# Reload nginx to pick up the updated CSP and config
+nginx -s reload

package.json

@@ -11,6 +11,7 @@
     "dev": "next dev -p 3000",
     "turbo": "next dev -p 3000 --turbo",
     "build": "next build",
+    "postbuild": "node postbuild.js",
     "start": "next start",
     "lint": "next lint",
     "cypress:open": "cypress open"
@@ -67,14 +68,15 @@
     "ip-cidr": "^3.1.0",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.23",
-    "lucide-react": "^0.566.0",
-    "next": "16.1.7",
+    "lucide-react": "^0.539.0",
+    "next": "^16.1.6",
     "next-themes": "^0.2.1",
     "punycode": "^2.3.1",
     "react": "^19.2.4",
     "react-day-picker": "^9.13.0",
     "react-dom": "^19.2.4",
     "react-ga4": "^2.1.0",
+    "react-hot-toast": "^2.4.1",
     "react-hotjar": "^6.3.1",
     "react-hotkeys-hook": "^4.4.1",
     "react-icons": "^5.5.0",
@@ -82,16 +84,12 @@
     "react-loading-skeleton": "^3.3.1",
     "react-responsive": "^9.0.2",
     "react-virtuoso": "^4.9.0",
-    "sonner": "^2.0.7",
     "swr": "^2.2.4",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7",
     "timescape": "^0.7.1",
     "typescript": "^5"
   },
-  "overrides": {
-    "minimatch": ">=10.2.1"
-  },
   "devDependencies": {
     "@faker-js/faker": "^9.5.1",
     "@types/chroma-js": "^3.1.1",

postbuild.js

@@ -0,0 +1,96 @@
+const { resolve, join } = require("path");
+const { createHash } = require("crypto");
+const {
+  readFileSync,
+  writeFileSync,
+  mkdirSync,
+  readdirSync,
+  statSync,
+} = require("fs");
+
+process.env.NODE_ENV = "production";
+const PLACEHOLDER = "NB_INLINE_SCRIPT_PLACEHOLDER";
+console.log("Starting post-build script to extract inline scripts...");
+
+// Function to find HTML files recursively
+function findHtmlFiles(dir) {
+  const files = [];
+  const entries = readdirSync(dir);
+
+  for (const entry of entries) {
+    const fullPath = join(dir, entry);
+    const stat = statSync(fullPath);
+
+    if (stat.isDirectory()) {
+      files.push(...findHtmlFiles(fullPath));
+    } else if (entry.endsWith(".html")) {
+      files.push(fullPath);
+    }
+  }
+
+  return files;
+}
+
+// For Next.js export output, the files are in the 'out' directory
+const baseDir = resolve("out");
+const htmlFiles = findHtmlFiles(baseDir);
+
+console.log(`Found ${htmlFiles.length} .html files to process`);
+
+// Ensure assets directory exists
+const assetsDir = `${baseDir}/assets`;
+mkdirSync(assetsDir, { recursive: true });
+
+htmlFiles.forEach((file) => {
+  // Read file contents
+  const contents = readFileSync(file, "utf8");
+  const scripts = [];
+
+  // Extract inline scripts
+  const newFile = contents.replace(
+    /<script(?![^>]*src)([^>]*)>(.+?)<\/script>/gs,
+    (match, attributes, scriptContent) => {
+      // Skip if script has src attribute (external script)
+      if (attributes.includes("src=")) {
+        return match;
+      }
+
+      const addPlaceholderString = scripts.length === 0;
+      const cleanedScript = scriptContent.trim();
+
+      if (cleanedScript) {
+        scripts.push(
+          `${cleanedScript}${cleanedScript.endsWith(";") ? "" : ";"}`,
+        );
+      }
+
+      return addPlaceholderString ? PLACEHOLDER : "";
+    },
+  );
+
+  // Early exit if no inline scripts found
+  if (!scripts.length) {
+    console.log(`No inline scripts found`);
+    return;
+  }
+
+  // Combine scripts and create hash
+  const chunk = scripts.join("\n");
+  const hash = createHash("md5").update(chunk).digest("hex").slice(0, 8);
+  const chunkFileName = `chunk.${hash}.js`;
+  const chunkPath = `${assetsDir}/${chunkFileName}`;
+
+  // Write the chunk file
+  writeFileSync(chunkPath, chunk, "utf8");
+
+  // Replace placeholder string with script tag
+  const updatedFile = newFile.replace(
+    PLACEHOLDER,
+    `<script src="/assets/${chunkFileName}" crossorigin=""></script>`,
+  );
+
+  // Write updated HTML file
+  writeFileSync(file, updatedFile, "utf8");
+});
+
+console.log("Post-build script completed successfully!");

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

@@ -6,5 +6,5 @@ import React from "react";
 
 export default function Redirect() {
   useRedirect("/events/audit");
-  return <FullScreenLoading fullScreen={false} />;
+  return <FullScreenLoading height={"auto"} />;
 }

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

@@ -11,5 +11,5 @@ export default function DNS() {
     router.push("/dns/nameservers");
   }, [router]);
 
-  return <FullScreenLoading fullScreen={false} />;
+  return <FullScreenLoading height={"auto"} />;
 }

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

@@ -1,80 +0,0 @@
-"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";
-
-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>
-  );
-}

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

@@ -61,7 +61,7 @@ export default function NetworkRoutes() {
               in our documentation.
             </Paragraph>
 
-            <Callout className={"max-w-xl mt-5"} variant={"warning"}>
+            <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.{" "}

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

@@ -12,13 +12,14 @@ import {
 } from "@components/DropdownMenu";
 import FullTooltip from "@components/FullTooltip";
 import InlineLink from "@components/InlineLink";
+import Separator from "@components/Separator";
+import FullScreenLoading from "@components/ui/FullScreenLoading";
 import useRedirect from "@hooks/useRedirect";
 import useFetchApi from "@utils/api";
-import { cn, singularize } from "@utils/helpers";
+import { cn } from "@utils/helpers";
 import {
   ArrowUpRightIcon,
   HelpCircle,
-  Layers3Icon,
   MoreVertical,
   PencilLineIcon,
   ServerIcon,
@@ -27,29 +28,19 @@ import {
   Trash2,
 } from "lucide-react";
 import { useRouter, useSearchParams } from "next/navigation";
-import React, { useMemo } from "react";
-import useUrlTab from "@/hooks/useUrlTab";
+import React, { useMemo, useState } from "react";
+import { useSWRConfig } from "swr";
 import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
 import { usePermissions } from "@/contexts/PermissionsProvider";
-import { Network, NetworkResource, NetworkRouter } from "@/interfaces/Network";
+import { Network } from "@/interfaces/Network";
 import PageContainer from "@/layouts/PageContainer";
 import { NetworkInformationSquare } from "@/modules/networks/misc/NetworkInformationSquare";
-import { NetworkAccessControlProvider } from "@/modules/networks/NetworkAccessControlProvider";
 import {
   NetworkProvider,
   useNetworksContext,
 } from "@/modules/networks/NetworkProvider";
-import { ResourcesTabContent } from "@/modules/networks/resources/ResourcesTabContent";
-import { NetworkRoutingPeersTabContent } from "@/modules/networks/routing-peers/NetworkRoutingPeersTabContent";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@components/Tabs";
-import PeerIcon from "@/assets/icons/PeerIcon";
-import ReverseProxyIcon from "@/assets/icons/ReverseProxyIcon";
-import { ReverseProxyFlatTargetsTabContent } from "@/modules/reverse-proxy/targets/flat/ReverseProxyFlatTargetsTabContent";
-import ReverseProxiesProvider, {
-  flattenReverseProxies,
-  useReverseProxies,
-} from "@/contexts/ReverseProxiesProvider";
-import { SkeletonNetwork } from "@components/skeletons/SkeletonNetwork";
+import { ResourcesSection } from "@/modules/networks/resources/ResourcesSection";
+import { NetworkRoutingPeersSection } from "@/modules/networks/routing-peers/NetworkRoutingPeersSection";
 
 export default function NetworkDetailPage() {
   const queryParameter = useSearchParams();
@@ -62,34 +53,17 @@ export default function NetworkDetailPage() {
   useRedirect("/networks", false, !networkId);
 
   return network && !isLoading ? (
-    <ReverseProxiesProvider initialNetwork={network}>
-      <NetworkOverview network={network} />
-    </ReverseProxiesProvider>
+    <NetworkOverview network={network} />
   ) : (
-    <SkeletonNetwork />
+    <FullScreenLoading />
   );
 }
 
 function NetworkOverview({ network }: Readonly<{ network: Network }>) {
   const { permission } = usePermissions();
 
-  const { data: resources, isLoading: isResourcesLoading } = useFetchApi<
-    NetworkResource[]
-  >(`/networks/${network.id}/resources`);
-  const { data: routers, isLoading: isRoutersLoading } = useFetchApi<
-    NetworkRouter[]
-  >(`/networks/${network.id}/routers`);
-
-  const { reverseProxies, isLoading: isServicesLoading } = useReverseProxies();
-  const services = useMemo(
-    () => flattenReverseProxies({ reverseProxies, network }),
-    [reverseProxies, network],
-  );
-
-  const [tab, setTab] = useUrlTab(
-    ["resources", "routing-peers", "services"],
-    "resources",
-  );
+  const [networkModal, setNetworkModal] = useState(false);
+  const { mutate } = useSWRConfig();
 
   const isActive = !!(
     network?.routing_peers_count && network.routing_peers_count > 0
@@ -97,103 +71,56 @@ function NetworkOverview({ network }: Readonly<{ network: Network }>) {
 
   return (
     <PageContainer>
-      <NetworkAccessControlProvider>
-        <NetworkProvider network={network}>
-          <div className={"p-default py-6"}>
-            <Breadcrumbs>
-              <Breadcrumbs.Item
-                href={"/networks"}
-                label={"Networks"}
-                disabled={!permission.networks.read}
-                icon={<NetworkRoutesIcon size={13} />}
-              />
-              <Breadcrumbs.Item
-                href={"/network"}
-                label={network.name}
-                active={true}
-              />
-            </Breadcrumbs>
+      <NetworkProvider network={network}>
+        <div className={"p-default py-6 mb-4"}>
+          <Breadcrumbs>
+            <Breadcrumbs.Item
+              href={"/networks"}
+              label={"Networks"}
+              disabled={!permission.networks.read}
+              icon={<NetworkRoutesIcon size={13} />}
+            />
+            <Breadcrumbs.Item
+              href={"/network"}
+              label={network.name}
+              active={true}
+            />
+          </Breadcrumbs>
 
-            <div className={"flex justify-between max-w-6xl"}>
+          <div className={"flex justify-between max-w-6xl"}>
+            <div
+              className={"w-full lg:w-1/2 flex justify-between items-center"}
+            >
               <div
-                className={"w-full lg:w-1/2 flex justify-between items-center"}
+                className={cn(
+                  "flex items-center w-full",
+                  !network.description && "gap-2",
+                )}
               >
-                <div
-                  className={cn(
-                    "flex items-center w-full",
-                    !network.description && "gap-2",
-                  )}
-                >
-                  <NetworkInformationSquare
-                    name={network.name}
-                    active={isActive}
-                    size={"lg"}
-                    description={network.description}
-                  />
-                </div>
-                <NetworkActions />
+                <NetworkInformationSquare
+                  name={network.name}
+                  active={isActive}
+                  size={"lg"}
+                  description={network.description}
+                />
               </div>
-            </div>
-
-            <div className={"flex gap-10 w-full mt-8 max-w-6xl items-start"}>
-              <NetworkInformationCard network={network} />
+              <NetworkProvider network={network}>
+                <NetworkActions />
+              </NetworkProvider>
             </div>
           </div>
 
-          <Tabs
-            defaultValue={tab}
-            onValueChange={setTab}
-            value={tab}
-            className={"pb-0 mb-0"}
-          >
-            <TabsList justify={"start"} className={"px-8"}>
-              <TabsTrigger value={"resources"}>
-                <Layers3Icon size={14} />
-                {singularize("Resources", network?.resources?.length)}
-              </TabsTrigger>
-              <TabsTrigger value={"routing-peers"}>
-                <PeerIcon
-                  size={12}
-                  className={
-                    "fill-nb-gray-500 group-data-[state=active]/trigger:fill-netbird transition-all"
-                  }
-                />
-                {singularize("Routing Peers", network?.routing_peers_count)}
-              </TabsTrigger>
-              <TabsTrigger value={"services"}>
-                <ReverseProxyIcon
-                  size={16}
-                  className={
-                    "fill-nb-gray-500 group-data-[state=active]/trigger:fill-netbird transition-all"
-                  }
-                />
-                {singularize("Services", services.length)}
-              </TabsTrigger>
-            </TabsList>
+          <div className={"flex gap-10 w-full mt-8 max-w-6xl items-start"}>
+            <NetworkInformationCard network={network} />
+          </div>
+        </div>
 
-            <TabsContent value={"resources"} className={"pb-8"}>
-              <ResourcesTabContent
-                data={resources}
-                isLoading={isResourcesLoading}
-              />
-            </TabsContent>
-
-            <TabsContent value={"routing-peers"} className={"pb-8"}>
-              <NetworkRoutingPeersTabContent
-                routers={routers}
-                isLoading={isRoutersLoading}
-              />
-            </TabsContent>
-
-            <TabsContent value={"services"} className={"pb-8"}>
-              <ReverseProxyFlatTargetsTabContent
-                targets={services}
-                isLoading={isServicesLoading}
-              />
-            </TabsContent>
-          </Tabs>
-        </NetworkProvider>
-      </NetworkAccessControlProvider>
+        <Separator />
+        <ResourcesSection network={network} />
+        <div className={"h-3"} />
+        <Separator />
+        <NetworkRoutingPeersSection network={network} />
+      </NetworkProvider>
     </PageContainer>
   );
 }

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

@@ -105,7 +105,7 @@ function PeersBlockedView() {
       <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"
+            "rounded-md border border-nb-gray-900/70 grid w-full bg-nb-gray-930/40"
           }
         >
           <SetupModalContent header={false} footer={false} />

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

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

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

@@ -1,70 +0,0 @@
-"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 ReverseProxiesProvider from "@/contexts/ReverseProxiesProvider";
-import { REVERSE_PROXY_CUSTOM_DOMAINS_DOCS_LINK } from "@/interfaces/ReverseProxy";
-import PageContainer from "@/layouts/PageContainer";
-
-const CustomDomainsTable = lazy(
-  () => import("@/modules/reverse-proxy/domain/CustomDomainsTable"),
-);
-
-export default function ReverseProxyCustomDomainsPage() {
-  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/custom-domains"}
-            label={"Custom Domains"}
-            active={true}
-          />
-        </Breadcrumbs>
-        <h1 ref={headingRef}>Domains</h1>
-        <Paragraph>
-          Add and manage custom domains for your reverse proxy services.
-        </Paragraph>
-        <Paragraph>
-          Learn more about
-          <InlineLink
-            href={REVERSE_PROXY_CUSTOM_DOMAINS_DOCS_LINK}
-            target={"_blank"}
-          >
-            Custom Domains
-            <ExternalLinkIcon size={12} />
-          </InlineLink>
-          in our documentation.
-        </Paragraph>
-      </div>
-      <RestrictedAccess
-        page={"Custom Domains"}
-        hasAccess={permission?.services?.read}
-      >
-        <ReverseProxiesProvider>
-          <Suspense fallback={<SkeletonTable />}>
-            <CustomDomainsTable headingTarget={portalTarget} />
-          </Suspense>
-        </ReverseProxiesProvider>
-      </RestrictedAccess>
-    </PageContainer>
-  );
-}

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

@@ -1,15 +0,0 @@
-"use client";
-
-import FullScreenLoading from "@components/ui/FullScreenLoading";
-import { useRouter } from "next/navigation";
-import { useEffect } from "react";
-
-export default function ReverseProxyRedirectPage() {
-  const router = useRouter();
-
-  useEffect(() => {
-    router.replace("/reverse-proxy/services");
-  }, [router]);
-
-  return <FullScreenLoading fullScreen={false} />;
-}

src/app/(dashboard)/reverse-proxy/self-hosted-proxies/layout.tsx

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