Add proxy events sort (#560 )

* Add proxy events sort * Fix coderabbit comment * Disable local sort when server pagination is used
Create policies inside resources (#568 )
2026-09-23 00:30:43 -07:00 · 2026-03-10 10:10:53 +01:00 · 2026-03-10 10:10:38 +01:00 · 2026-03-09 10:08:35 +01:00 · 2026-03-06 18:55:28 +01:00 · 2026-03-02 11:32:52 +01:00
172 changed files with 10495 additions and 2004 deletions
@@ -37,6 +37,8 @@ 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
@@ -1,9 +1,9 @@
 [
  {
    "tag": "New",
-    "text": "Custom DNS Zones for Private Network Resolution",
-    "link": "https://netbird.io/knowledge-hub/custom-dns-zones",
-    "linkText": "Read Release Article",
+    "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",
    "variant": "important",
    "isExternal": true,
    "closeable": true,
@@ -14,24 +14,14 @@ server {

    location / {
      try_files $uri $uri.html $uri/ =404;
-      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 "";
+      add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
      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" 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 "";
+      add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
      expires off;
   }
 }
@@ -62,93 +62,9 @@ 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"

@@ -158,7 +74,4 @@ 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
-
-# Reload nginx to pick up the updated CSP and config
-nginx -s reload
+done
@@ -59,7 +59,7 @@
        "ip-cidr": "^3.1.0",
        "js-cookie": "^3.0.5",
        "lodash": "^4.17.23",
-        "lucide-react": "^0.539.0",
+        "lucide-react": "^0.562.0",
        "next": "^16.1.6",
        "next-themes": "^0.2.1",
        "punycode": "^2.3.1",
@@ -67,7 +67,6 @@
        "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",
@@ -75,6 +74,7 @@
        "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",
@@ -90,6 +90,9 @@
        "postcss": "^8",
        "prettier": "3.0.3",
        "tailwindcss": "^3.4.17"
+      },
+      "engines": {
+        "node": ">=20.9.0"
      }
    },
    "node_modules/@alloc/quick-lru": {
@@ -165,6 +168,7 @@
      "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@babel/code-frame": "^7.29.0",
        "@babel/generator": "^7.29.0",
@@ -3027,6 +3031,7 @@
      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.10.tgz",
      "integrity": "sha512-WPigyYuGhgZ/cTPRXB2EwUw+XvsRA3GqHlsP4qteqrnnjDrApbS7MxcGr/hke5iUoeB7E/gQtrs9I37zAJ0Vjw==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "csstype": "^3.2.2"
      }
@@ -3036,6 +3041,7 @@
      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
      "license": "MIT",
+      "peer": true,
      "peerDependencies": {
        "@types/react": "^19.2.0"
      }
@@ -3094,6 +3100,7 @@
      "integrity": "sha512-BtE0k6cjwjLZoZixN0t5AKP0kSzlGu7FctRXYuPAm//aaiZhmfq1JwdYpYr1brzEspYyFeF+8XF5j2VK6oalrA==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@typescript-eslint/scope-manager": "8.54.0",
        "@typescript-eslint/types": "8.54.0",
@@ -3248,13 +3255,13 @@
      }
    },
    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "version": "9.0.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
+      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
      "dev": true,
      "license": "ISC",
      "dependencies": {
-        "brace-expansion": "^2.0.1"
+        "brace-expansion": "^2.0.2"
      },
      "engines": {
        "node": ">=16 || 14 >=14.17"
@@ -3600,7 +3607,8 @@
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-5.5.0.tgz",
      "integrity": "sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
    },
    "node_modules/@xyflow/react": {
      "version": "12.10.0",
@@ -3639,6 +3647,7 @@
      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
      "license": "MIT",
+      "peer": true,
      "bin": {
        "acorn": "bin/acorn"
      },
@@ -3656,9 +3665,9 @@
      }
    },
    "node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
+      "integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==",
      "license": "MIT",
      "dependencies": {
        "fast-deep-equal": "^3.1.1",
@@ -4056,6 +4065,7 @@
        }
      ],
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "baseline-browser-mapping": "^2.9.0",
        "caniuse-lite": "^1.0.30001759",
@@ -4684,6 +4694,7 @@
      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
      "license": "ISC",
+      "peer": true,
      "engines": {
        "node": ">=12"
      }
@@ -5212,6 +5223,7 @@
      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.2.tgz",
      "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@eslint-community/eslint-utils": "^4.8.0",
        "@eslint-community/regexpp": "^4.12.1",
@@ -5409,6 +5421,7 @@
      "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@rtsao/scc": "^1.1.0",
        "array-includes": "^3.1.9",
@@ -6010,15 +6023,6 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
-    "node_modules/goober": {
-      "version": "2.1.18",
-      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.18.tgz",
-      "integrity": "sha512-2vFqsaDVIT9Gz7N6kAL++pLpp41l3PfDuusHcjnGLfR6+huZkl6ziX+zgVC3ZxpqWhzH6pyDdGrCeDhMIvwaxw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "csstype": "^3.0.10"
-      }
-    },
    "node_modules/gopd": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -6711,6 +6715,7 @@
      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
      "license": "MIT",
+      "peer": true,
      "bin": {
        "jiti": "bin/jiti.js"
      }
@@ -6918,9 +6923,9 @@
      }
    },
    "node_modules/lucide-react": {
-      "version": "0.539.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.539.0.tgz",
-      "integrity": "sha512-VVISr+VF2krO91FeuCrm1rSOLACQUYVy7NQkzrOty52Y8TlTPcXcMdQFj9bYzBgXbWCiywlwSZ3Z8u6a+6bMlg==",
+      "version": "0.562.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.562.0.tgz",
+      "integrity": "sha512-82hOAu7y0dbVuFfmO4bYF1XEwYk/mEbM5E+b1jgci/udUBEE/R7LF5Ip0CCEmXe8AybRM8L+04eP+LGZeDvkiw==",
      "license": "ISC",
      "peerDependencies": {
        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -6968,9 +6973,9 @@
      }
    },
    "node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
      "license": "ISC",
      "dependencies": {
        "brace-expansion": "^1.1.7"
@@ -7465,6 +7470,7 @@
        }
      ],
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "nanoid": "^3.3.11",
        "picocolors": "^1.1.1",
@@ -7672,6 +7678,7 @@
      "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
      "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -7712,6 +7719,7 @@
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
      "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "scheduler": "^0.27.0"
      },
@@ -7725,23 +7733,6 @@
      "integrity": "sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ==",
      "license": "MIT"
    },
-    "node_modules/react-hot-toast": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.6.0.tgz",
-      "integrity": "sha512-bH+2EBMZ4sdyou/DPrfgIouFpcRLCJ+HoCA32UoAYHn6T3Ur5yfcDCeSr5mwldl6pFOsiocmrXMuoCJ1vV8bWg==",
-      "license": "MIT",
-      "dependencies": {
-        "csstype": "^3.1.3",
-        "goober": "^2.1.16"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "react": ">=16",
-        "react-dom": ">=16"
-      }
-    },
    "node_modules/react-hotjar": {
      "version": "6.3.1",
      "resolved": "https://registry.npmjs.org/react-hotjar/-/react-hotjar-6.3.1.tgz",
@@ -8336,6 +8327,16 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/sonner": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
+      "integrity": "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
    "node_modules/source-map-js": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -8613,6 +8614,7 @@
      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
      "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@alloc/quick-lru": "^5.2.0",
        "arg": "^5.0.2",
@@ -8779,6 +8781,7 @@
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=12"
      },
@@ -8944,6 +8947,7 @@
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
      "license": "Apache-2.0",
+      "peer": true,
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
@@ -9271,6 +9275,7 @@
      "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "funding": {
        "url": "https://github.com/sponsors/colinhacks"
      }
@@ -11,7 +11,6 @@
    "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"
@@ -68,7 +67,7 @@
    "ip-cidr": "^3.1.0",
    "js-cookie": "^3.0.5",
    "lodash": "^4.17.23",
-    "lucide-react": "^0.539.0",
+    "lucide-react": "^0.562.0",
    "next": "^16.1.6",
    "next-themes": "^0.2.1",
    "punycode": "^2.3.1",
@@ -76,7 +75,6 @@
    "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",
@@ -84,6 +82,7 @@
    "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",
@@ -1,96 +0,0 @@
-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!");
@@ -6,5 +6,5 @@ import React from "react";

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

-  return <FullScreenLoading height={"auto"} />;
+  return <FullScreenLoading fullScreen={false} />;
 }
@@ -0,0 +1,80 @@
+"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>
+  );
+}
@@ -61,7 +61,7 @@ export default function NetworkRoutes() {
              in our documentation.
            </Paragraph>

-            <Callout className={"max-w-xl mt-3"} variant={"warning"}>
+            <Callout className={"max-w-xl mt-5"} variant={"warning"}>
              <span>
                We recommend using the new Networks concept to easier visualise
                and manage access to your resources.{" "}
@@ -12,14 +12,13 @@ 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 } from "@utils/helpers";
+import { cn, singularize } from "@utils/helpers";
 import {
  ArrowUpRightIcon,
  HelpCircle,
+  Layers3Icon,
  MoreVertical,
  PencilLineIcon,
  ServerIcon,
@@ -28,19 +27,29 @@ import {
  Trash2,
 } from "lucide-react";
 import { useRouter, useSearchParams } from "next/navigation";
-import React, { useMemo, useState } from "react";
-import { useSWRConfig } from "swr";
+import React, { useMemo } from "react";
+import useUrlTab from "@/hooks/useUrlTab";
 import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
 import { usePermissions } from "@/contexts/PermissionsProvider";
-import { Network } from "@/interfaces/Network";
+import { Network, NetworkResource, NetworkRouter } 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 { ResourcesSection } from "@/modules/networks/resources/ResourcesSection";
-import { NetworkRoutingPeersSection } from "@/modules/networks/routing-peers/NetworkRoutingPeersSection";
+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";

 export default function NetworkDetailPage() {
  const queryParameter = useSearchParams();
@@ -53,17 +62,34 @@ export default function NetworkDetailPage() {
  useRedirect("/networks", false, !networkId);

  return network && !isLoading ? (
-    <NetworkOverview network={network} />
+    <ReverseProxiesProvider initialNetwork={network}>
+      <NetworkOverview network={network} />
+    </ReverseProxiesProvider>
  ) : (
-    <FullScreenLoading />
+    <SkeletonNetwork />
  );
 }

 function NetworkOverview({ network }: Readonly<{ network: Network }>) {
  const { permission } = usePermissions();

-  const [networkModal, setNetworkModal] = useState(false);
-  const { mutate } = useSWRConfig();
+  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 isActive = !!(
    network?.routing_peers_count && network.routing_peers_count > 0
@@ -71,56 +97,103 @@ function NetworkOverview({ network }: Readonly<{ network: Network }>) {

  return (
    <PageContainer>
-      <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>
+      <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>

-          <div className={"flex justify-between max-w-6xl"}>
-            <div
-              className={"w-full lg:w-1/2 flex justify-between items-center"}
-            >
+            <div className={"flex justify-between max-w-6xl"}>
              <div
-                className={cn(
-                  "flex items-center w-full",
-                  !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}
-                />
-              </div>
-              <NetworkProvider 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>
                <NetworkActions />
-              </NetworkProvider>
+              </div>
+            </div>
+
+            <div className={"flex gap-10 w-full mt-8 max-w-6xl items-start"}>
+              <NetworkInformationCard network={network} />
            </div>
          </div>

-          <div className={"flex gap-10 w-full mt-8 max-w-6xl items-start"}>
-            <NetworkInformationCard network={network} />
-          </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>

-        <Separator />
-        <ResourcesSection network={network} />
-        <div className={"h-3"} />
-        <Separator />
-        <NetworkRoutingPeersSection network={network} />
-      </NetworkProvider>
+            <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>
    </PageContainer>
  );
 }
@@ -26,6 +26,7 @@ import { RestrictedAccess } from "@components/ui/RestrictedAccess";
 import TextWithTooltip from "@components/ui/TextWithTooltip";
 import useRedirect from "@hooks/useRedirect";
 import useFetchApi from "@utils/api";
+import { singularize } from "@utils/helpers";
 import dayjs from "dayjs";
 import { isEmpty, trim } from "lodash";
 import {
@@ -36,13 +37,14 @@ import {
  FlagIcon,
  Globe,
  History,
+  ListIcon,
  MapPin,
  MonitorSmartphoneIcon,
  NetworkIcon,
  PencilIcon,
  RadioTowerIcon,
-  TimerResetIcon,
 } from "lucide-react";
+import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import { toASCII } from "punycode";
 import React, { useMemo, useState } from "react";
@@ -52,21 +54,27 @@ import RoundedFlag from "@/assets/countries/RoundedFlag";
 import CircleIcon from "@/assets/icons/CircleIcon";
 import NetBirdIcon from "@/assets/icons/NetBirdIcon";
 import PeerIcon from "@/assets/icons/PeerIcon";
+import ReverseProxyIcon from "@/assets/icons/ReverseProxyIcon";
 import { useCountries } from "@/contexts/CountryProvider";
 import PeerProvider, { usePeer } from "@/contexts/PeerProvider";
 import { usePermissions } from "@/contexts/PermissionsProvider";
 import RoutesProvider from "@/contexts/RoutesProvider";
 import { useHasChanges } from "@/hooks/useHasChanges";
+import type { Group } from "@/interfaces/Group";
 import type { Peer } from "@/interfaces/Peer";
 import PageContainer from "@/layouts/PageContainer";
 import useGroupHelper from "@/modules/groups/useGroupHelper";
 import { AccessiblePeersSection } from "@/modules/peer/AccessiblePeersSection";
 import { PeerNetworkRoutesSection } from "@/modules/peer/PeerNetworkRoutesSection";
 import { PeerRemoteJobsSection } from "@/modules/peer/PeerRemoteJobsSection";
+import ReverseProxiesProvider, {
+  flattenReverseProxies,
+  useReverseProxies,
+} from "@/contexts/ReverseProxiesProvider";
+import { ReverseProxyFlatTargetsTabContent } from "@/modules/reverse-proxy/targets/flat/ReverseProxyFlatTargetsTabContent";
 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() {
@@ -99,10 +107,12 @@ export default function PeerPage() {
      />
    );

-  return peer && !isLoading ? (
-    <PeerProvider peer={peer} key={peerId} isPeerDetailPage={true}>
-      <PeerOverview key={peer?.id} />
-    </PeerProvider>
+  return peer && peer.id && !isLoading ? (
+    <ReverseProxiesProvider initialPeer={peer}>
+      <PeerProvider peer={peer} key={peerId} isPeerDetailPage={true}>
+        <PeerOverview key={peer?.id} />
+      </PeerProvider>
+    </ReverseProxiesProvider>
  ) : (
    <FullScreenLoading />
  );
@@ -114,38 +124,60 @@ function PeerOverview() {
  return (
    <PageContainer>
      <RoutesProvider>
-        <div className={"p-default py-6 pb-0"}>
-          <Breadcrumbs>
-            <Breadcrumbs.Item
-              href={"/peers"}
-              label={"Peers"}
-              icon={<PeerIcon size={13} />}
-            />
-            <Breadcrumbs.Item label={peer.ip} active />
-          </Breadcrumbs>
-          <PeerGeneralInformation />
-        </div>
-        <PeerOverviewTabs />
+        <PeerSettingsProvider>
+          <div className={"p-default py-6 pb-0"}>
+            <Breadcrumbs>
+              <Breadcrumbs.Item
+                href={"/peers"}
+                label={"Peers"}
+                icon={<PeerIcon size={13} />}
+              />
+              <Breadcrumbs.Item label={peer.ip} active />
+            </Breadcrumbs>
+            <PeerHeader />
+          </div>
+          <PeerOverviewTabs />
+        </PeerSettingsProvider>
      </RoutesProvider>
    </PageContainer>
  );
 }

-const PeerGeneralInformation = () => {
-  const router = useRouter();
+type PeerSettingsContextType = {
+  selectedGroups: Group[];
+  setSelectedGroups: React.Dispatch<React.SetStateAction<Group[]>>;
+  hasChanges: boolean;
+  updatePeer: (newName?: string) => Promise<void>;
+  name: string;
+  setName: (name: string) => void;
+  tab: string;
+  setTab: (tab: string) => void;
+};
+
+const PeerSettingsContext = React.createContext<PeerSettingsContextType | null>(
+  null,
+);
+
+const usePeerSettings = () => {
+  const context = React.useContext(PeerSettingsContext);
+  if (!context) {
+    throw new Error("usePeerSettings must be used within PeerSettingsProvider");
+  }
+  return context;
+};
+
+const PeerSettingsProvider = ({ children }: { children: React.ReactNode }) => {
  const { mutate } = useSWRConfig();
-  const { peer, user, peerGroups, update } = usePeer();
+  const { peer, peerGroups, update } = usePeer();
+  const { permission } = usePermissions();
  const [name, setName] = useState(peer.name);
-  const [showEditNameModal, setShowEditNameModal] = useState(false);
+  const [tab, setTab] = useState("overview");
  const [selectedGroups, setSelectedGroups, { getAllGroupCalls }] =
    useGroupHelper({
      initial: peerGroups?.filter((g) => g?.name !== "All"),
      peer,
    });

-  /**
-   * Detect if there are changes in the peer information, if there are changes, then enable the save button.
-   */
  const { hasChanges, updateRef: updateHasChangedRef } = useHasChanges([
    selectedGroups,
  ]);
@@ -175,7 +207,31 @@ const PeerGeneralInformation = () => {
    });
  };

+  return (
+    <PeerSettingsContext.Provider
+      value={{
+        selectedGroups,
+        setSelectedGroups,
+        hasChanges,
+        updatePeer,
+        name,
+        setName,
+        tab,
+        setTab,
+      }}
+    >
+      {children}
+    </PeerSettingsContext.Provider>
+  );
+};
+
+const PeerHeader = () => {
+  const router = useRouter();
+  const { peer, user } = usePeer();
  const { permission } = usePermissions();
+  const { name, setName, hasChanges, updatePeer, tab } = usePeerSettings();
+  const [showEditNameModal, setShowEditNameModal] = useState(false);
+  const isOverviewTab = tab === "overview";

  return (
    <>
@@ -236,49 +292,145 @@ const PeerGeneralInformation = () => {
            </div>
          )}
        </div>
-        <div className={"flex gap-4"}>
-          <Button
-            variant={"default"}
-            className={"w-full"}
-            onClick={() => router.push("/peers")}
-          >
-            Cancel
-          </Button>
-          <Button
-            variant={"primary"}
-            className={"w-full"}
-            onClick={() => updatePeer()}
-            disabled={
-              !hasChanges || !permission.peers.read || !permission.groups.update
-            }
-          >
-            Save Changes
-          </Button>
-        </div>
+        {isOverviewTab && (
+          <div className={"flex gap-4"}>
+            <Button
+              variant={"default"}
+              className={"w-full"}
+              onClick={() => router.push("/peers")}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant={"primary"}
+              className={"w-full"}
+              onClick={() => updatePeer()}
+              disabled={
+                !hasChanges ||
+                !permission.peers.update ||
+                !permission.groups.update
+              }
+            >
+              Save Changes
+            </Button>
+          </div>
+        )}
      </div>
+    </>
+  );
+};

+const PeerOverviewTabs = () => {
+  const { peer } = usePeer();
+  const { permission } = usePermissions();
+  const { reverseProxies, isLoading: isServicesLoading } = useReverseProxies();
+  const { tab, setTab } = usePeerSettings();
+
+  const flatTargets = useMemo(
+    () => flattenReverseProxies({ reverseProxies, peer }),
+    [reverseProxies, peer],
+  );
+
+  return (
+    <Tabs
+      defaultValue={tab}
+      onValueChange={setTab}
+      value={tab}
+      className={"pt-4 pb-0 mb-0"}
+    >
+      <TabsList justify={"start"} className={"px-8"}>
+        <TabsTrigger value={"overview"}>
+          <ListIcon size={16} />
+          Overview
+        </TabsTrigger>
+
+        {permission.routes.read && (
+          <TabsTrigger value={"network-routes"}>
+            <NetworkIcon size={16} />
+            Network Routes
+          </TabsTrigger>
+        )}
+
+        {peer?.id && permission.peers.read && (
+          <TabsTrigger value={"accessible-peers"}>
+            <MonitorSmartphoneIcon size={16} />
+            Accessible Peers
+          </TabsTrigger>
+        )}
+
+        {peer?.id && permission.services?.read && (
+          <TabsTrigger value={"reverse-proxies"}>
+            <ReverseProxyIcon
+              size={16}
+              className="fill-nb-gray-400 group-data-[state=active]/trigger:fill-netbird"
+            />
+            {singularize("Services", flatTargets.length)}
+          </TabsTrigger>
+        )}
+
+        {peer?.id && permission.peers.delete && (
+          <TabsTrigger value={"peer-job"}>
+            <RadioTowerIcon size={16} />
+            Remote Jobs
+          </TabsTrigger>
+        )}
+      </TabsList>
+
+      <TabsContent value={"overview"} className={"pb-8"}>
+        <PeerOverviewTabContent />
+      </TabsContent>
+
+      {permission.routes.read && (
+        <TabsContent value={"network-routes"} className={"pb-8"}>
+          <PeerNetworkRoutesSection peer={peer} />
+        </TabsContent>
+      )}
+
+      {peer?.id && permission.peers.read && (
+        <TabsContent value={"accessible-peers"} className={"pb-8"}>
+          <AccessiblePeersSection peerID={peer.id} />
+        </TabsContent>
+      )}
+
+      {peer?.id && permission.services?.read && (
+        <TabsContent value={"reverse-proxies"} className={"pb-8"}>
+          <ReverseProxyFlatTargetsTabContent
+            targets={flatTargets}
+            isLoading={isServicesLoading}
+            hideResourceColumn
+            emptyTableTitle={"This peer has no services"}
+            emptyTableDescription={
+              "Add your services to this peer and securely expose them through NetBird's reverse proxy"
+            }
+          />
+        </TabsContent>
+      )}
+
+      {peer.id && permission.peers.delete && (
+        <TabsContent value={"peer-job"} className={"pb-8"}>
+          <PeerRemoteJobsSection peerID={peer.id} />
+        </TabsContent>
+      )}
+    </Tabs>
+  );
+};
+
+const PeerOverviewTabContent = () => {
+  const { peer } = usePeer();
+  const { permission } = usePermissions();
+  const { selectedGroups, setSelectedGroups } = usePeerSettings();
+
+  return (
+    <div className={"px-8"}>
      <div
        className={
-          "flex-wrap xl:flex-nowrap flex gap-10 w-full mt-5 max-w-6xl items-start"
+          "flex-wrap xl:flex-nowrap flex gap-10 w-full items-start pt-2 max-w-6xl"
        }
      >
        <PeerInformationCard peer={peer} />

-        <div className={"flex flex-col gap-6 lg:w-1/2 transition-all"}>
+        <div className={"flex flex-col gap-8 lg:w-1/2 transition-all"}>
          <PeerExpirationSettings />
-
-          <PeerSSHToggle />
-
-          {/* Remote Access Buttons */}
-          <div>
-            <Label>Remote Access</Label>
-            <HelpText>Connect directly to this peer via SSH or RDP.</HelpText>
-            <div className="flex gap-3">
-              <SSHButton peer={peer} />
-              <RDPButton peer={peer} />
-            </div>
-          </div>
-
          {permission.groups.read && (
            <div>
              <Label>Assigned Groups</Label>
@@ -294,67 +446,21 @@ const PeerGeneralInformation = () => {
              />
            </div>
          )}
+
+          <PeerSSHToggle />
+
+          {/* Remote Access Buttons */}
+          <div>
+            <Label>Remote Access</Label>
+            <HelpText>Connect directly to this peer via SSH or RDP.</HelpText>
+            <div className="flex gap-3">
+              <SSHButton peer={peer} />
+              <RDPButton peer={peer} />
+            </div>
+          </div>
        </div>
      </div>
-    </>
-  );
-};
-
-const PeerOverviewTabs = () => {
-  const { peer } = usePeer();
-  const { permission } = usePermissions();
-
-  const [tab, setTab] = useState(
-    permission.routes.read ? "network-routes" : "accessible-peers",
-  );
-
-  return (
-    <Tabs
-      defaultValue={tab}
-      onValueChange={(v) => setTab(v)}
-      value={tab}
-      className={"pt-10 pb-0 mb-0"}
-    >
-      <TabsList justify={"start"} className={"px-8"}>
-        {permission.routes.read && (
-          <TabsTrigger value={"network-routes"}>
-            <NetworkIcon size={16} />
-            Network Routes
-          </TabsTrigger>
-        )}
-
-        {peer?.id && permission.peers.read && (
-          <TabsTrigger value={"accessible-peers"}>
-            <MonitorSmartphoneIcon size={16} />
-            Accessible Peers
-          </TabsTrigger>
-        )}
-
-        {peer?.id && permission.peers.delete && (
-          <TabsTrigger value={"peer-job"}>
-            <RadioTowerIcon size={16} />
-            Remote Jobs
-          </TabsTrigger>
-        )}
-      </TabsList>
-
-      {permission.routes.read && (
-        <TabsContent value={"network-routes"} className={"pb-8"}>
-          <PeerNetworkRoutesSection peer={peer} />
-        </TabsContent>
-      )}
-
-      {peer?.id && permission.peers.read && (
-        <TabsContent value={"accessible-peers"} className={"pb-8"}>
-          <AccessiblePeersSection peerID={peer.id} />
-        </TabsContent>
-      )}
-      {peer.id && permission.peers.delete && (
-        <TabsContent value={"peer-job"} className={"pb-8"}>
-          <PeerRemoteJobsSection peerID={peer.id} />
-        </TabsContent>
-      )}
-    </Tabs>
+    </div>
  );
 };

@@ -541,9 +647,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) +
+                  ")"
            }
          />

@@ -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"
+            "rounded-md border border-nb-gray-900/70 grid w-full bg-nb-gray-930/40 stepper-bg-variant"
          }
        >
          <SetupModalContent header={false} footer={false} />
@@ -0,0 +1,8 @@
+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;
@@ -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 { 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>
+  );
+}
@@ -0,0 +1,15 @@
+"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} />;
+}
@@ -0,0 +1,8 @@
+import { globalMetaTitle } from "@utils/meta";
+import type { Metadata } from "next";
+import BlankLayout from "@/layouts/BlankLayout";
+
+export const metadata: Metadata = {
+  title: `Services - Reverse Proxy - ${globalMetaTitle}`,
+};
+export default BlankLayout;
@@ -0,0 +1,83 @@
+"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_DOCS_LINK } from "@/interfaces/ReverseProxy";
+import PageContainer from "@/layouts/PageContainer";
+import { Callout } from "@components/Callout";
+import { isNetBirdHosted } from "@utils/netbird";
+
+const ReverseProxyTable = lazy(
+  () => import("@/modules/reverse-proxy/table/ReverseProxyTable"),
+);
+
+export default function ReverseProxyServicesPage() {
+  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/services"}
+            label={"Services"}
+            active={true}
+          />
+        </Breadcrumbs>
+        <h1 ref={headingRef}>Services</h1>
+        <Paragraph>
+          Expose services securely through NetBird&apos;s reverse proxy.
+        </Paragraph>
+        <Paragraph>
+          Learn more about
+          <InlineLink href={REVERSE_PROXY_DOCS_LINK} target={"_blank"}>
+            Services
+            <ExternalLinkIcon size={12} />
+          </InlineLink>
+          in our documentation.
+        </Paragraph>
+
+        {isNetBirdHosted() ? (
+          <Callout className={"max-w-xl mt-5"} variant={"info"}>
+            NetBird&apos;s Reverse Proxy is currently in beta and available at
+            no cost during this period. Features, functionality, and pricing are
+            subject to change upon release.
+          </Callout>
+        ) : (
+          <Callout className={"max-w-xl mt-5"} variant={"info"}>
+            NetBird&apos;s Reverse Proxy is currently in beta. <br /> Features
+            and functionality are subject to change upon release.
+          </Callout>
+        )}
+      </div>
+
+      <RestrictedAccess
+        page={"Services"}
+        hasAccess={permission?.services?.read}
+      >
+        <ReverseProxiesProvider>
+          <Suspense fallback={<SkeletonTable />}>
+            <ReverseProxyTable headingTarget={portalTarget} />
+          </Suspense>
+        </ReverseProxiesProvider>
+      </RestrictedAccess>
+    </PageContainer>
+  );
+}
@@ -56,7 +56,7 @@ export default function NetBirdSettings() {
                Authentication
              </VerticalTabs.Trigger>
              {account?.settings?.embedded_idp_enabled &&
-                permission.identity_providers.read && (
+                permission?.identity_providers?.read && (
                  <VerticalTabs.Trigger value="identity-providers">
                    <FingerprintIcon size={14} />
                    Identity Providers
Author	SHA1	Message	Date
Eduard Gert	c0c1f4688e	Add proxy events sort (#560 ) * Add proxy events sort * Fix coderabbit comment * Disable local sort when server pagination is used	2026-03-10 10:10:53 +01:00
Eduard Gert	b5a8f751ba	Create policies inside resources (#568 ) * Add acl tooltips * Adjust resource modal and add tooltips * Prevent nextjs navigation trigger on tab change * Update wording * add acl into resource * Refactor resource policies * Add prop to hide group edit and disable redirect * Add skeleton loader to network page * Create policy for new resources * Show existing policies if groups are matching * Add confirm dialog after creating resource without policy * Add dialog if user edits policy that is used in multiple resources * Add callout when selecting resource groups containing policies * Add dialog if deleting policies containing resources * Fix stale policies and new group creation in resource modal * Remove whitespace * Fix sort * Cleanup * Address coderabbit comments * Fix policy alignment * Fix initial resource * disable selector if user did not select resource groups * Consider current resource when editing / deleting policy * Remove unused mutate * Fix dot position * Remove ask for policy * Fix policy index * Fix multiple resource confirm dialog on policy cell	2026-03-10 10:10:38 +01:00
Eduard Gert	10a8e7b745	Fix stale certificate issued state (#575 ) * Fix stale certificate issued state * fix coderabbit	2026-03-09 10:08:35 +01:00
Viktor Liu	60e8394010	Add per-target options to reverse proxy (#576 )	2026-03-06 18:55:28 +01:00
Eduard Gert	9420214059	Bump minimatch and ajv dependencies (#572 )	2026-03-02 11:32:52 +01:00
Maycon Santos Claude Opus 4.6 Eduard Gert	b949f60afe	Feature/client service expose (#567 ) * add draft * add reverse proxy activities * move peer expose settings into client settings tab and fix activity descriptions Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * prevent false positive group report * add docs link * allow save when groups are added to the setting * Add loading skeleton to client settings, update icon, use grouphelper to allow creating new groups, remove .patch * mv expose settings from extra settings --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: Eduard Gert <kontakt@eduardgert.de>	2026-02-24 14:54:58 +01:00
Eduard Gert	d498e4cc25	Fix dns records pagination (#566 )	2026-02-20 21:42:26 +01:00
Eduard Gert	130dc0c32c	Fix group unused filter (#565 )	2026-02-19 10:32:14 +01:00
Eduard Gert	f5824d6ddb	Allow empty groups for reverse proxy sso auth (#563 )	2026-02-18 16:27:13 +01:00
Eduard Gert	829395f908	Add hover to reverse proxy auth methods (#564 )	2026-02-18 13:39:19 +01:00
Eduard Gert	8eebec78b4	Preserve query params for ssh and rdp (#559 )	2026-02-16 17:34:08 +01:00
raghvendra	3e01a6dafd	refactor: simplify FullScreenLoading to use boolean prop instead of string union (#555 )	2026-02-16 11:10:26 +01:00
Maycon Santos	1555b94043	Fix service cluster status (#556 )	2026-02-16 09:23:22 +01:00
Eduard Gert	6c62127d42	Update announcement (#553 )	2026-02-13 20:56:40 +01:00
Eduard Gert	b71d0fde89	Add reverse proxy (#552 ) * New Features * Full Reverse Proxy UI: Services, Targets, Clusters, Custom Domains (with verification) and a Proxy Events page. * In-app modals for service auth (SSO, password, PIN) and a new PIN input component. * Improvements * Network & Peer pages: tabbed views (Resources, Routing Peers, Services) and improved tables, search and filters. * Toast stacking/visibility and global toast styling refined.	2026-02-13 18:59:16 +01:00
Misha Bragin	84c239ce30	Indicate that local user auth is disabled (#551 )	2026-02-12 15:16:34 +01:00
Aaron Dewes	ba66201c64	Remove architecture info tooltip for MacOS (#550 ) * Remove architecture info tooltip for MacOS Previously, this tooltip helped users determine which binary to download. Since #501, there is only one universal binary download link, so keeping the tooltip explaining how to determine the CPU architecture is unnecessary. * fix: Remove unused imports	2026-02-12 11:21:08 +01:00