Fix dns zone domain validation and peers last seen sort (#595 )

Add reverse proxy auth headers (#593 )
* Add reverse proxy access rules * Fix coderabbit comments * Fix coderabbit comments * Fix coderabbit comments * Add auth header modal * Remove password managers from auth headers * fix unique id * Remove gradient, fix button roundness * update lucide, add additional event auth methods * Clear existing header value on change
2026-09-23 00:30:43 -07:00 · 2026-03-25 17:50:22 +01:00 · 2026-03-25 14:31:36 +01:00 · 2026-03-24 16:01:01 +01:00 · 2026-03-24 16:00:31 +01:00 · 2026-03-18 17:43:00 +01:00
54 changed files with 3739 additions and 1220 deletions
@@ -59,8 +59,8 @@
        "ip-cidr": "^3.1.0",
        "js-cookie": "^3.0.5",
        "lodash": "^4.17.23",
-        "lucide-react": "^0.562.0",
-        "next": "^16.1.6",
+        "lucide-react": "^0.566.0",
+        "next": "^16.1.7",
        "next-themes": "^0.2.1",
        "punycode": "^2.3.1",
        "react": "^19.2.4",
@@ -1213,9 +1213,9 @@
      }
    },
    "node_modules/@next/env": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.1.6.tgz",
-      "integrity": "sha512-N1ySLuZjnAtN3kFnwhAwPvZah8RJxKasD7x1f8shFqhncnWZn4JMfg37diLNuoHsLAlrDfM3g4mawVdtAG8XLQ==",
+      "version": "16.1.7",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.1.7.tgz",
+      "integrity": "sha512-rJJbIdJB/RQr2F1nylZr/PJzamvNNhfr3brdKP6s/GW850jbtR70QlSfFselvIBbcPUOlQwBakexjFzqLzF6pg==",
      "license": "MIT"
    },
    "node_modules/@next/eslint-plugin-next": {
@@ -1229,9 +1229,9 @@
      }
    },
    "node_modules/@next/swc-darwin-arm64": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.1.6.tgz",
-      "integrity": "sha512-wTzYulosJr/6nFnqGW7FrG3jfUUlEf8UjGA0/pyypJl42ExdVgC6xJgcXQ+V8QFn6niSG2Pb8+MIG1mZr2vczw==",
+      "version": "16.1.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.1.7.tgz",
+      "integrity": "sha512-b2wWIE8sABdyafc4IM8r5Y/dS6kD80JRtOGrUiKTsACFQfWWgUQ2NwoUX1yjFMXVsAwcQeNpnucF2ZrujsBBPg==",
      "cpu": [
        "arm64"
      ],
@@ -1245,9 +1245,9 @@
      }
    },
    "node_modules/@next/swc-darwin-x64": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.1.6.tgz",
-      "integrity": "sha512-BLFPYPDO+MNJsiDWbeVzqvYd4NyuRrEYVB5k2N3JfWncuHAy2IVwMAOlVQDFjj+krkWzhY2apvmekMkfQR0CUQ==",
+      "version": "16.1.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.1.7.tgz",
+      "integrity": "sha512-zcnVaaZulS1WL0Ss38R5Q6D2gz7MtBu8GZLPfK+73D/hp4GFMrC2sudLky1QibfV7h6RJBJs/gOFvYP0X7UVlQ==",
      "cpu": [
        "x64"
      ],
@@ -1261,9 +1261,9 @@
      }
    },
    "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.1.6.tgz",
-      "integrity": "sha512-OJYkCd5pj/QloBvoEcJ2XiMnlJkRv9idWA/j0ugSuA34gMT6f5b7vOiCQHVRpvStoZUknhl6/UxOXL4OwtdaBw==",
+      "version": "16.1.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.1.7.tgz",
+      "integrity": "sha512-2ant89Lux/Q3VyC8vNVg7uBaFVP9SwoK2jJOOR0L8TQnX8CAYnh4uctAScy2Hwj2dgjVHqHLORQZJ2wH6VxhSQ==",
      "cpu": [
        "arm64"
      ],
@@ -1277,9 +1277,9 @@
      }
    },
    "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.1.6.tgz",
-      "integrity": "sha512-S4J2v+8tT3NIO9u2q+S0G5KdvNDjXfAv06OhfOzNDaBn5rw84DGXWndOEB7d5/x852A20sW1M56vhC/tRVbccQ==",
+      "version": "16.1.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.1.7.tgz",
+      "integrity": "sha512-uufcze7LYv0FQg9GnNeZ3/whYfo+1Q3HnQpm16o6Uyi0OVzLlk2ZWoY7j07KADZFY8qwDbsmFnMQP3p3+Ftprw==",
      "cpu": [
        "arm64"
      ],
@@ -1293,9 +1293,9 @@
      }
    },
    "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.1.6.tgz",
-      "integrity": "sha512-2eEBDkFlMMNQnkTyPBhQOAyn2qMxyG2eE7GPH2WIDGEpEILcBPI/jdSv4t6xupSP+ot/jkfrCShLAa7+ZUPcJQ==",
+      "version": "16.1.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.1.7.tgz",
+      "integrity": "sha512-KWVf2gxYvHtvuT+c4MBOGxuse5TD7DsMFYSxVxRBnOzok/xryNeQSjXgxSv9QpIVlaGzEn/pIuI6Koosx8CGWA==",
      "cpu": [
        "x64"
      ],
@@ -1309,9 +1309,9 @@
      }
    },
    "node_modules/@next/swc-linux-x64-musl": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.1.6.tgz",
-      "integrity": "sha512-oicJwRlyOoZXVlxmIMaTq7f8pN9QNbdes0q2FXfRsPhfCi8n8JmOZJm5oo1pwDaFbnnD421rVU409M3evFbIqg==",
+      "version": "16.1.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.1.7.tgz",
+      "integrity": "sha512-HguhaGwsGr1YAGs68uRKc4aGWxLET+NevJskOcCAwXbwj0fYX0RgZW2gsOCzr9S11CSQPIkxmoSbuVaBp4Z3dA==",
      "cpu": [
        "x64"
      ],
@@ -1325,9 +1325,9 @@
      }
    },
    "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.1.6.tgz",
-      "integrity": "sha512-gQmm8izDTPgs+DCWH22kcDmuUp7NyiJgEl18bcr8irXA5N2m2O+JQIr6f3ct42GOs9c0h8QF3L5SzIxcYAAXXw==",
+      "version": "16.1.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.1.7.tgz",
+      "integrity": "sha512-S0n3KrDJokKTeFyM/vGGGR8+pCmXYrjNTk2ZozOL1C/JFdfUIL9O1ATaJOl5r2POe56iRChbsszrjMAdWSv7kQ==",
      "cpu": [
        "arm64"
      ],
@@ -1341,9 +1341,9 @@
      }
    },
    "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.1.6.tgz",
-      "integrity": "sha512-NRfO39AIrzBnixKbjuo2YiYhB6o9d8v/ymU9m/Xk8cyVk+k7XylniXkHwjs4s70wedVffc6bQNbufk5v0xEm0A==",
+      "version": "16.1.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.1.7.tgz",
+      "integrity": "sha512-mwgtg8CNZGYm06LeEd+bNnOUfwOyNem/rOiP14Lsz+AnUY92Zq/LXwtebtUiaeVkhbroRCQ0c8GlR4UT1U+0yg==",
      "cpu": [
        "x64"
      ],
@@ -5768,9 +5768,9 @@
      }
    },
    "node_modules/flatted": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
-      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+      "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
      "license": "ISC"
    },
    "node_modules/for-each": {
@@ -6923,9 +6923,9 @@
      }
    },
    "node_modules/lucide-react": {
-      "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==",
+      "version": "0.566.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.566.0.tgz",
+      "integrity": "sha512-b18qC/JAh1X9rVKlF5EtSIyumdIYuh78b0JShynZnHbcaWR4AW4oZyi8Ms/aQYVSnLPlAnMhug2hSr19BgVZAw==",
      "license": "ISC",
      "peerDependencies": {
        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -7067,14 +7067,14 @@
      "license": "MIT"
    },
    "node_modules/next": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/next/-/next-16.1.6.tgz",
-      "integrity": "sha512-hkyRkcu5x/41KoqnROkfTm2pZVbKxvbZRuNvKXLRXxs3VfyO0WhY50TQS40EuKO9SW3rBj/sF3WbVwDACeMZyw==",
+      "version": "16.1.7",
+      "resolved": "https://registry.npmjs.org/next/-/next-16.1.7.tgz",
+      "integrity": "sha512-WM0L7WrSvKwoLegLYr6V+mz+RIofqQgVAfHhMp9a88ms0cFX8iX9ew+snpWlSBwpkURJOUdvCEt3uLl3NNzvWg==",
      "license": "MIT",
      "dependencies": {
-        "@next/env": "16.1.6",
+        "@next/env": "16.1.7",
        "@swc/helpers": "0.5.15",
-        "baseline-browser-mapping": "^2.8.3",
+        "baseline-browser-mapping": "^2.9.19",
        "caniuse-lite": "^1.0.30001579",
        "postcss": "8.4.31",
        "styled-jsx": "5.1.6"
@@ -7086,14 +7086,14 @@
        "node": ">=20.9.0"
      },
      "optionalDependencies": {
-        "@next/swc-darwin-arm64": "16.1.6",
-        "@next/swc-darwin-x64": "16.1.6",
-        "@next/swc-linux-arm64-gnu": "16.1.6",
-        "@next/swc-linux-arm64-musl": "16.1.6",
-        "@next/swc-linux-x64-gnu": "16.1.6",
-        "@next/swc-linux-x64-musl": "16.1.6",
-        "@next/swc-win32-arm64-msvc": "16.1.6",
-        "@next/swc-win32-x64-msvc": "16.1.6",
+        "@next/swc-darwin-arm64": "16.1.7",
+        "@next/swc-darwin-x64": "16.1.7",
+        "@next/swc-linux-arm64-gnu": "16.1.7",
+        "@next/swc-linux-arm64-musl": "16.1.7",
+        "@next/swc-linux-x64-gnu": "16.1.7",
+        "@next/swc-linux-x64-musl": "16.1.7",
+        "@next/swc-win32-arm64-msvc": "16.1.7",
+        "@next/swc-win32-x64-msvc": "16.1.7",
        "sharp": "^0.34.4"
      },
      "peerDependencies": {
@@ -67,8 +67,8 @@
    "ip-cidr": "^3.1.0",
    "js-cookie": "^3.0.5",
    "lodash": "^4.17.23",
-    "lucide-react": "^0.562.0",
-    "next": "^16.1.6",
+    "lucide-react": "^0.566.0",
+    "next": "^16.1.7",
    "next-themes": "^0.2.1",
    "punycode": "^2.3.1",
    "react": "^19.2.4",
@@ -8,8 +8,12 @@ export default function ReverseProxyIcon(props: IconProps) {
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
      {...iconProperties(props)}
+      fill={"currentColor"}
    >
-      <path d="M11.4488 2.1499C11.7903 1.95003 12.2097 1.95003 12.5513 2.1499L16.5018 4.46123L12 7.03523L7.49823 4.46123L11.4488 2.1499ZM6.44447 6.46472L6.44444 10.2784L2.93531 12.3315L7.53662 14.8399L10.8889 12.8787V9.00593L6.44447 6.46472ZM2 14.3992V18.7395C2 19.1477 2.21366 19.5247 2.55984 19.7272L6.44446 22V16.8223L2 14.3992ZM8.66668 22L12 20.0497L15.3333 22V16.7994L12 14.8492L8.66668 16.7993V22ZM17.5556 22L21.4401 19.7272C21.7863 19.5247 22 19.1477 22 18.7395V14.3992L17.5556 16.8223V22ZM21.0647 12.3315L17.5556 10.2784V6.46474L13.1111 9.00593V12.8787L16.4634 14.8399L21.0647 12.3315Z" />
+      <path
+        fill={"currentColor"}
+        d="M11.4488 2.1499C11.7903 1.95003 12.2097 1.95003 12.5513 2.1499L16.5018 4.46123L12 7.03523L7.49823 4.46123L11.4488 2.1499ZM6.44447 6.46472L6.44444 10.2784L2.93531 12.3315L7.53662 14.8399L10.8889 12.8787V9.00593L6.44447 6.46472ZM2 14.3992V18.7395C2 19.1477 2.21366 19.5247 2.55984 19.7272L6.44446 22V16.8223L2 14.3992ZM8.66668 22L12 20.0497L15.3333 22V16.7994L12 14.8492L8.66668 16.7993V22ZM17.5556 22L21.4401 19.7272C21.7863 19.5247 22 19.1477 22 18.7395V14.3992L17.5556 16.8223V22ZM21.0647 12.3315L17.5556 10.2784V6.46474L13.1111 9.00593V12.8787L16.4634 14.8399L21.0647 12.3315Z"
+      />
    </svg>
  );
 }
@@ -74,7 +74,7 @@ export const buttonVariants = cva(
          "",
        ],
        "danger-text": [
-          "dark:bg-transparent dark:text-red-500 dark:hover:text-red-600 dark:border-transparent !px-0 !shadow-none !py-0 focus:ring-red-500/30 dark:ring-offset-neutral-950/50",
+          "dark:bg-transparent dark:text-red-500 dark:hover:text-red-600 dark:border-transparent !px-0 !shadow-none !py-0 focus:ring-red-500/30 dark:ring-offset-neutral-950/50 rounded-sm",
        ],
        "default-outline": [
          "dark:ring-offset-nb-gray-950/50 dark:focus:ring-nb-gray-500/20",
@@ -80,13 +80,15 @@ export const DeviceCard = ({
            hideTooltip={true}
          />
        </span>
-        <span
-          className={
-            "text-sm font-normal text-nb-gray-400 relative whitespace-nowrap"
-          }
-        >
-          <TruncatedText text={descriptionText} maxWidth={"160px"} />
-        </span>
+        {descriptionText && (
+          <span
+            className={
+              "text-sm font-normal text-nb-gray-400 relative whitespace-nowrap"
+            }
+          >
+            <TruncatedText text={descriptionText} maxWidth={"160px"} />
+          </span>
+        )}
      </div>
    </div>
  );
@@ -8,6 +8,7 @@ type Props = {
  description: ReactNode;
  icon?: ReactNode;
  className?: string;
+  disabled?: boolean;
 };

 export const RadioCard = ({
@@ -16,15 +17,18 @@ export const RadioCard = ({
  description,
  className,
  icon,
+  disabled,
 }: Props) => {
  return (
    <RadioGroup.Item
      value={value}
+      disabled={disabled}
      className={cn(
        "peer relative block cursor-pointer rounded-lg border border-nb-gray-900 bg-nb-gray-930/60 px-5 py-3 transition-all focus:outline-none",
        "data-[state=checked]:border-nb-gray-400 data-[state=checked]:bg-nb-gray-920",
        "outline-none focus:ring-0 focus:bg-nb-gray-930 focus:border-nb-gray-920",
        "hover:bg-nb-gray-930",
+        "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-nb-gray-930/60",
        className,
      )}
    >
@@ -77,23 +77,56 @@ const SelectItem = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {
    extra?: React.ReactNode;
+    icon?: React.ReactNode;
+    description?: React.ReactNode;
  }
->(({ className, children, extra, ...props }, ref) => (
+>(({ className, children, extra, icon, description, ...props }, ref) => (
  <SelectPrimitive.Item
    ref={ref}
    className={cn(
-      "relative flex w-full select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-gray-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-nb-gray-900 dark:focus:text-neutral-50 dark:text-gray-400 cursor-pointer",
+      "relative flex w-full select-none items-center rounded-md py-1.5 text-sm outline-none focus:bg-gray-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-nb-gray-900 dark:focus:text-neutral-50 dark:text-gray-400 cursor-pointer",
+      icon ? "pl-2 pr-8" : "pl-8 pr-2",
+      description && "py-2",
      className,
    )}
    {...props}
  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    {icon ? (
+      <>
+        <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+          <SelectPrimitive.ItemIndicator>
+            <Check className="h-4 w-4" />
+          </SelectPrimitive.ItemIndicator>
+        </span>
+        <div className="flex items-center gap-2">
+          <span className="flex-shrink-0">{icon}</span>
+          <div className="flex flex-col">
+            <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+            {description && (
+              <span className="text-xs text-nb-gray-300 font-normal">
+                {description}
+              </span>
+            )}
+          </div>
+        </div>
+      </>
+    ) : (
+      <>
+        <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+          <SelectPrimitive.ItemIndicator>
+            <Check className="h-4 w-4" />
+          </SelectPrimitive.ItemIndicator>
+        </span>
+        <div className="flex flex-col">
+          <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+          {description && (
+            <span className="text-xs text-nb-gray-300 font-normal">
+              {description}
+            </span>
+          )}
+        </div>
+      </>
+    )}
    {extra}
  </SelectPrimitive.Item>
 ));
@@ -48,6 +48,9 @@ interface SelectDropdownProps {
  children?: React.ReactNode;
  maxHeight?: number;
  triggerClassName?: string;
+  iconSize?: number;
+  truncate?: boolean;
+  compact?: boolean;
 }

 export function SelectDropdown({
@@ -68,6 +71,9 @@ export function SelectDropdown({
  children,
  maxHeight,
  triggerClassName,
+  iconSize = 14,
+  truncate = false,
+  compact = false,
 }: Readonly<SelectDropdownProps>) {
  const [inputRef, { width }] = useElementSize<HTMLButtonElement>();

@@ -107,15 +113,18 @@ export function SelectDropdown({

  const SelectedItem = () => {
    return (
-      <div className={"flex items-center gap-2.5"}>
-        {selected?.icon && <selected.icon size={14} width={14} />}
+      <div className={cn("flex items-center gap-2.5", truncate && "min-w-0")}>
+        {selected?.icon && <selected.icon size={iconSize} width={iconSize} />}
        <div
          className={cn(
            "flex flex-col text-sm font-medium",
            size === "xs" && "text-xs",
+            truncate && "min-w-0",
          )}
        >
-          <span className={"text-nb-gray-200"}>{selected?.label}</span>
+          <span className={cn("text-nb-gray-200", truncate && "truncate")}>
+            {selected?.label}
+          </span>
        </div>
      </div>
    );
@@ -216,20 +225,22 @@ export function SelectDropdown({

            <ScrollArea
              className={cn(
-                "overflow-y-auto flex flex-col gap-1 pl-2 pr-3",
-                !showSearch && "pt-2",
+                "overflow-y-auto flex flex-col gap-1",
+                compact ? "pl-1 pr-1" : "pl-2 pr-3",
+                !showSearch && (compact ? "pt-1" : "pt-2"),
              )}
              style={{
                maxHeight: maxHeight ?? 380,
              }}
            >
              <CommandGroup>
-                <div className={"grid grid-cols-1 gap-1 pb-2 w-full"}>
+                <div className={cn("grid grid-cols-1 gap-1 w-full", compact ? "pb-1" : "pb-2")}>
                  {filteredItems.map((option) => (
                    <SelectDropdownItem
                      option={option}
                      toggle={toggle}
                      key={option.value}
+                      iconSize={iconSize}
                      showValue={showValues}
                      size={size}
                    />
@@ -249,11 +260,13 @@ const SelectDropdownItem = ({
  toggle,
  showValue = false,
  size = "sm",
+  iconSize = 14,
 }: {
  option: SelectOption;
  toggle: (value: string) => void;
  showValue?: boolean;
  size: "xs" | "sm";
+  iconSize?: number;
 }) => {
  const value = option.value || "" + option.label || "";
  const elementRef = useRef<HTMLDivElement>(null);
@@ -285,7 +298,12 @@ const SelectDropdownItem = ({
              option?.disabled && "cursor-not-allowed",
            )}
          >
-            {option.icon && <option.icon size={14} width={14} />}
+            {option.icon && (
+              <div className={"shrink-0"}>
+                <option.icon size={iconSize} width={iconSize} />
+              </div>
+            )}
+
            {option?.renderItem && option.renderItem()}
            {!option?.renderItem && (
              <div
@@ -1,15 +1,20 @@
 import * as React from "react";
 import Skeleton from "react-loading-skeleton";
+import { cn } from "@utils/helpers";

-export const SkeletonDeviceCard = () => {
+type Props = {
+  className?: string;
+};
+
+export const SkeletonDeviceCard = ({ className = "min-h-[59px]" }: Props) => {
  return (
-    <div className={"min-h-[59px] relative -left-2"}>
-      <div className={"py-2 pr-4 pl-2 flex gap-3"}>
-        <Skeleton height={36} width={36} />
-        <div className={"flex flex-col pr-[1.15rem]"}>
-          <Skeleton height={16} width={70} />
-          <Skeleton height={16} width={140} />
-        </div>
+    <div
+      className={cn("py-2 pr-4 pl-2 flex gap-3 relative -left-2", className)}
+    >
+      <Skeleton height={36} width={36} />
+      <div className={"flex flex-col pr-[1.15rem]"}>
+        <Skeleton height={16} width={70} />
+        <Skeleton height={16} width={140} />
      </div>
    </div>
  );
@@ -53,6 +53,7 @@ declare module "@tanstack/table-core" {
  }
  interface SortingFns {
    checkbox: SortingFn<unknown>;
+    datetime: SortingFn<unknown>;
  }
 }

@@ -99,6 +100,15 @@ const arrIncludesSomeExact: FilterFn<any> = (
  return value.some((val) => val === rowValue);
 };

+const datetimeSort: SortingFn<any> = (rowA, rowB, columnId) => {
+  const aConnected = rowA.original?.connected;
+  const bConnected = rowB.original?.connected;
+  if (aConnected !== bConnected) return aConnected ? 1 : -1;
+  const a = dayjs(rowA.getValue(columnId)).valueOf();
+  const b = dayjs(rowB.getValue(columnId)).valueOf();
+  return a - b;
+};
+
 const checkboxSort: SortingFn<any> = (rowA, rowB, columnId) => {
  const valueA =
    columnId === "select" ? rowA.getIsSelected() : rowA.getValue(columnId);
@@ -324,6 +334,7 @@ export function DataTable<TData, TValue>({
    },
    sortingFns: {
      checkbox: checkboxSort,
+      datetime: datetimeSort,
    },
    getRowId: useRowId ? (row) => row.id : undefined,
    onRowSelectionChange: setRowSelection,
@@ -14,6 +14,7 @@ type Props = {
  center?: boolean;
  className?: string;
  sorting?: boolean;
+  onSort?: () => void;
  name?: string;
 };
 export default function DataTableHeader({
@@ -23,14 +24,20 @@ export default function DataTableHeader({
  center,
  className,
  sorting = true,
+  onSort,
  name,
 }: Props) {
  const serverPagination = useOptionalServerPagination();

  const handleSort = () => {
-    const direction = column.getIsSorted() === "asc" ? "desc" : "asc";
-    column.toggleSorting(direction === "desc");
+    if (onSort) {
+      onSort();
+    } else {
+      const direction = column.getIsSorted() === "asc" ? "desc" : "asc";
+      column.toggleSorting(direction === "desc");
+    }
    if (name && serverPagination?.setSort) {
+      const direction = column.getIsSorted() === "asc" ? "desc" : "asc";
      serverPagination.setSort(name, direction);
    }
  };
@@ -9,8 +9,11 @@ import { useCountries } from "@/contexts/CountryProvider";
 type Props = {
  value: string;
  onChange: (value: string) => void;
+  iconSize?: number;
+  popoverWidth?: "auto" | "content" | number;
+  truncate?: boolean;
 };
-export const CountrySelector = ({ value, onChange }: Props) => {
+export const CountrySelector = ({ value, onChange, iconSize = 20, popoverWidth, truncate }: Props) => {
  const { countries, isLoading } = useCountries();

  const countryList = useMemo(() => {
@@ -22,7 +25,7 @@ export const CountrySelector = ({ value, onChange }: Props) => {
      }) =>
        createElement(RoundedFlag, {
          country: country.country_code,
-          size: 20,
+          size: iconSize,
          ...props,
        });
      return {
@@ -42,7 +45,10 @@ export const CountrySelector = ({ value, onChange }: Props) => {
        searchPlaceholder={"Search country..."}
        value={value}
        onChange={onChange}
+        iconSize={iconSize}
        options={countryList || []}
+        popoverWidth={popoverWidth}
+        truncate={truncate}
      />
    </div>
  );
@@ -13,7 +13,11 @@ const CountryContext = React.createContext(
    countries: Country[] | undefined;
    isLoading: boolean;
    getRegionByPeer: (peer: Peer) => string;
-    getRegionText: (country_code: string, city_name: string) => string;
+    getRegionText: (
+      country_code: string,
+      city_name: string,
+      subdivision_code?: string,
+    ) => string;
  },
 );

@@ -21,7 +25,11 @@ export default function CountryProvider({ children }: Props) {
  const { isRestricted } = usePermissions();

  const getRegionByPeer = (peer: Peer) => "Unknown";
-  const getRegionText = (country_code: string, city_name: string) => "Unknown";
+  const getRegionText = (
+    country_code: string,
+    city_name: string,
+    subdivision_code?: string,
+  ) => "Unknown";

  return isRestricted ? (
    <CountryContext.Provider
@@ -47,12 +55,14 @@ function CountryProviderContent({ children }: Props) {
  );

  const getRegionText = useCallback(
-    (country_code: string, city_name: string) => {
+    (country_code: string, city_name: string, subdivision_code?: string) => {
      if (!countries) return "Unknown";
      const country = countries.find((c) => c.country_code === country_code);
      if (!country) return "Unknown";
-      if (!city_name) return country.country_name;
-      return `${country.country_name}, ${city_name}`;
+      const parts = [country.country_name];
+      if (subdivision_code) parts.push(subdivision_code);
+      if (city_name) parts.push(city_name);
+      return parts.join(", ");
    },
    [countries],
  );
@@ -26,6 +26,8 @@ import ReverseProxyTargetModal from "@/modules/reverse-proxy/targets/ReverseProx

 type ReverseProxiesContextValue = {
  reverseProxies: ReverseProxy[] | undefined;
+  resources: NetworkResource[] | undefined;
+  peers: Peer[] | undefined;
  isLoading: boolean;
  openModal: (options?: OpenModalOptions) => void;
  openTargetModal: (options: OpenTargetModalOptions) => void;
@@ -93,7 +95,7 @@ export default function ReverseProxiesProvider({
  const { data: rawReverseProxies, isLoading } = useFetchApi<ReverseProxy[]>(
    "/reverse-proxies/services",
  );
-  const request = useApiCall<ReverseProxy>("/reverse-proxies/services");
+  const request = useApiCall<ReverseProxy>("/reverse-proxies/services", true);

  // Peers & Resources for resolving target destinations
  const { data: peers } = useFetchApi<Peer[]>("/peers");
@@ -465,6 +467,8 @@ export default function ReverseProxiesProvider({
    <ReverseProxiesContext.Provider
      value={{
        reverseProxies,
+        resources,
+        peers,
        isLoading,
        openModal,
        openTargetModal,
@@ -26,6 +26,7 @@ export interface Account {
    lazy_connection_enabled: boolean;
    embedded_idp_enabled?: boolean;
    auto_update_version: string;
+    auto_update_always: boolean;
    local_auth_disabled?: boolean;
  };
  onboarding?: AccountOnboarding;
@@ -1,16 +1,34 @@
+export enum ServiceMode {
+  HTTP = "http",
+  TCP = "tcp",
+  UDP = "udp",
+  TLS = "tls",
+}
+
 export interface ReverseProxy {
  id?: string;
  name: string;
  domain: string;
+  mode?: ServiceMode;
+  listen_port?: number;
+  port_auto_assigned?: boolean;
  proxy_cluster?: string;
  targets: ReverseProxyTarget[];
  enabled: boolean;
  pass_host_header?: boolean;
  rewrite_redirects?: boolean;
  auth?: ReverseProxyAuth;
+  access_restrictions?: AccessRestrictions;
  meta?: ReverseProxyMeta;
 }

+export interface AccessRestrictions {
+  allowed_cidrs?: string[];
+  blocked_cidrs?: string[];
+  allowed_countries?: string[];
+  blocked_countries?: string[];
+}
+
 export interface ReverseProxyMeta {
  created_at: string;
  status: ReverseProxyStatus;
@@ -31,8 +49,10 @@ export type ServiceTargetOptionsPathRewrite = "preserve";
 export interface ServiceTargetOptions {
  skip_tls_verify?: boolean;
  request_timeout?: string;
+  session_idle_timeout?: string;
  path_rewrite?: ServiceTargetOptionsPathRewrite;
  custom_headers?: Record<string, string>;
+  proxy_protocol?: boolean;
 }

 export interface ReverseProxyTarget {
@@ -65,6 +85,13 @@ export interface ReverseProxyAuth {
  link_auth?: {
    enabled: boolean;
  };
+  header_auths?: HeaderAuthConfig[];
+}
+
+export interface HeaderAuthConfig {
+  enabled: boolean;
+  header: string;
+  value: string;
 }

 export interface ReverseProxyDomain {
@@ -73,6 +100,8 @@ export interface ReverseProxyDomain {
  validated: boolean;
  type: ReverseProxyDomainType;
  target_cluster?: string;
+  supports_custom_ports?: boolean;
+  require_subdomain?: boolean;
 }

 export enum ReverseProxyDomainType {
@@ -90,6 +119,15 @@ export enum ReverseProxyTargetType {
 export enum ReverseProxyTargetProtocol {
  HTTP = "http",
  HTTPS = "https",
+  TCP = "tcp",
+  UDP = "udp",
+}
+
+export enum EventProtocol {
+  HTTP = "http",
+  TCP = "tcp",
+  UDP = "udp",
+  TLS = "tls",
 }

 export interface ReverseProxyEvent {
@@ -107,12 +145,32 @@ export interface ReverseProxyEvent {
  auth_method_used?: string;
  country_code?: string;
  city_name?: string;
+  subdivision_code?: string;
+  bytes_upload: number;
+  bytes_download: number;
+  protocol?: EventProtocol;
+}
+
+export function isL4Event(event: ReverseProxyEvent): boolean {
+  return (
+    event.protocol === EventProtocol.TCP ||
+    event.protocol === EventProtocol.UDP ||
+    event.protocol === EventProtocol.TLS
+  );
 }

 export interface ReverseProxyFlatTarget extends ReverseProxyTarget {
  proxy: ReverseProxy;
 }

+export function isL4Mode(mode?: ServiceMode): boolean {
+  return (
+    mode === ServiceMode.TCP ||
+    mode === ServiceMode.UDP ||
+    mode === ServiceMode.TLS
+  );
+}
+
 export const REVERSE_PROXY_DOCS_LINK =
  "https://docs.netbird.io/manage/reverse-proxy";

@@ -139,3 +197,9 @@ export const REVERSE_PROXY_DOMAIN_VERIFICATION_LINK =

 export const REVERSE_PROXY_EVENTS_DOCS_LINK =
  "https://docs.netbird.io/manage/reverse-proxy/access-logs";
+
+export const REVERSE_PROXY_ACCESS_CONTROL_DOCS_LINK =
+  "https://docs.netbird.io/manage/reverse-proxy";
+
+export const REVERSE_PROXY_TROUBLESHOOTING_DOCS_LINK =
+  "https://docs.netbird.io/manage/reverse-proxy#troubleshooting";
@@ -91,10 +91,11 @@ export function DNSZoneModalContent({
    if (domain == "") return "";
    const valid = validator.isValidDomain(domain, {
      allowWildcard: false,
-      allowOnlyTld: false,
+      allowOnlyTld: true,
+      preventLeadingAndTrailingDots: true,
    });
    if (!valid) {
-      return "Please enter a valid domain, e.g. company.internal or intra.example.com";
+      return "Please enter a valid domain, e.g. internal, company.internal or intra.example.com";
    }
  }, [domain]);

@@ -309,7 +309,7 @@ export function ResourceModalContent({
                  }
                >
                  <span className={"relative top-[1px]"}>
-                    Additional Options (optional)
+                    Optional Settings
                  </span>
                </AccordionTrigger>
                <AccordionContent className={""}>
@@ -138,8 +138,18 @@ const PeersTableColumns: ColumnDef<Peer>[] = [
  },
  {
    accessorKey: "last_seen",
-    header: ({ column }) => {
-      return <DataTableHeader column={column}>Last seen</DataTableHeader>;
+    header: ({ column, table }) => {
+      return (
+        <DataTableHeader
+          column={column}
+          onSort={() => {
+            const desc = column.getIsSorted() === "desc";
+            table.setSorting([{ id: "last_seen", desc: !desc }]);
+          }}
+        >
+          Last seen
+        </DataTableHeader>
+      );
    },
    sortingFn: "datetime",
    cell: ({ row }) => <PeerLastSeenCell peer={row.original} />,
@@ -226,17 +236,13 @@ export default function PeersTable({
    "netbird-table-sort" + path,
    [
      {
-        id: "connected",
+        id: "last_seen",
        desc: true,
      },
      {
        id: "name",
        desc: false,
      },
-      {
-        id: "last_seen",
-        desc: true,
-      },
    ],
  );

@@ -0,0 +1,315 @@
+import { useEffect, useMemo, useReducer, useRef } from "react";
+import { Label } from "@components/Label";
+import HelpText from "@components/HelpText";
+import Button from "@components/Button";
+import { Input } from "@components/Input";
+import cidr from "ip-cidr";
+import {
+  FlagIcon,
+  MinusCircleIcon,
+  NetworkIcon,
+  PlusIcon,
+  ShieldCheckIcon,
+  ShieldXIcon,
+  WorkflowIcon,
+} from "lucide-react";
+import {
+  SelectDropdown,
+  SelectOption,
+} from "@components/select/SelectDropdown";
+import { CountrySelector } from "@/components/ui/CountrySelector";
+import { AccessRestrictions } from "@/interfaces/ReverseProxy";
+
+type AccessAction = "allow" | "block";
+type AccessRuleType = "country" | "ip" | "cidr";
+
+const ACTION_OPTIONS: SelectOption[] = [
+  {
+    label: "Allow Only",
+    value: "allow",
+    icon: (props) => <ShieldCheckIcon {...props} className="text-green-500" />,
+  },
+  {
+    label: "Block Only",
+    value: "block",
+    icon: (props) => <ShieldXIcon {...props} className="text-red-500" />,
+  },
+];
+
+const TYPE_OPTIONS: SelectOption[] = [
+  {
+    label: "Country",
+    value: "country",
+    icon: (props) => <FlagIcon {...props} />,
+  },
+  {
+    label: "IP Address",
+    value: "ip",
+    icon: (props) => <WorkflowIcon {...props} />,
+  },
+  {
+    label: "CIDR Block",
+    value: "cidr",
+    icon: (props) => <NetworkIcon {...props} />,
+  },
+];
+
+type AccessRule = {
+  id: string;
+  action: AccessAction;
+  type: AccessRuleType;
+  value: string;
+};
+
+type RulesAction =
+  | { type: "add" }
+  | { type: "remove"; id: string }
+  | {
+      type: "update";
+      id: string;
+      field: "action" | "type" | "value";
+      value: string;
+    };
+
+const nextId = () => crypto.randomUUID();
+
+function rulesReducer(state: AccessRule[], action: RulesAction): AccessRule[] {
+  switch (action.type) {
+    case "add":
+      return [
+        ...state,
+        { id: nextId(), action: "allow", type: "country", value: "" },
+      ];
+    case "remove":
+      return state.filter((r) => r.id !== action.id);
+    case "update":
+      return state.map((r) => {
+        if (r.id !== action.id) return r;
+        if (action.field === "type") {
+          return { ...r, type: action.value as AccessRuleType, value: "" };
+        }
+        return { ...r, [action.field]: action.value };
+      });
+  }
+}
+
+function restrictionsToRules(
+  restrictions: AccessRestrictions | undefined,
+): AccessRule[] {
+  if (!restrictions) return [];
+  const rules: AccessRule[] = [];
+  restrictions.allowed_countries?.forEach((v) =>
+    rules.push({ id: nextId(), action: "allow", type: "country", value: v }),
+  );
+  restrictions.blocked_countries?.forEach((v) =>
+    rules.push({ id: nextId(), action: "block", type: "country", value: v }),
+  );
+  restrictions.allowed_cidrs?.forEach((v) => {
+    const isIp = v.endsWith("/32");
+    rules.push({ id: nextId(), action: "allow", type: isIp ? "ip" : "cidr", value: isIp ? v.replace(/\/32$/, "") : v });
+  });
+  restrictions.blocked_cidrs?.forEach((v) => {
+    const isIp = v.endsWith("/32");
+    rules.push({ id: nextId(), action: "block", type: isIp ? "ip" : "cidr", value: isIp ? v.replace(/\/32$/, "") : v });
+  });
+  return rules;
+}
+
+function rulesToRestrictions(
+  rules: AccessRule[],
+): AccessRestrictions | undefined {
+  const allowed_countries: string[] = [];
+  const blocked_countries: string[] = [];
+  const allowed_cidrs: string[] = [];
+  const blocked_cidrs: string[] = [];
+
+  for (const rule of rules) {
+    if (!rule.value) continue;
+    if (rule.type === "country") {
+      if (rule.action === "allow") allowed_countries.push(rule.value);
+      else blocked_countries.push(rule.value);
+    } else {
+      const value = rule.type === "ip" && !rule.value.includes("/") ? `${rule.value}/32` : rule.value;
+      if (rule.action === "allow") allowed_cidrs.push(value);
+      else blocked_cidrs.push(value);
+    }
+  }
+
+  const hasAny =
+    allowed_countries.length > 0 ||
+    blocked_countries.length > 0 ||
+    allowed_cidrs.length > 0 ||
+    blocked_cidrs.length > 0;
+
+  if (!hasAny) return undefined;
+
+  return {
+    ...(allowed_countries.length > 0 && { allowed_countries }),
+    ...(blocked_countries.length > 0 && { blocked_countries }),
+    ...(allowed_cidrs.length > 0 && { allowed_cidrs }),
+    ...(blocked_cidrs.length > 0 && { blocked_cidrs }),
+  };
+}
+
+type Props = {
+  value: AccessRestrictions | undefined;
+  onChange: (value: AccessRestrictions | undefined) => void;
+  onValidationChange?: (hasErrors: boolean) => void;
+};
+
+function validateRule(rule: AccessRule): string {
+  if (rule.type === "country" || !rule.value) return "";
+  if (rule.type === "ip") {
+    const val = rule.value.includes("/") ? rule.value : `${rule.value}/32`;
+    if (!cidr.isValidAddress(val)) {
+      return "Please enter a valid IP address, e.g., 85.203.15.42";
+    }
+  } else {
+    if (!rule.value.includes("/") || !cidr.isValidAddress(rule.value)) {
+      return "Please enter a valid CIDR block, e.g., 74.125.0.0/16";
+    }
+  }
+  return "";
+}
+
+export const ReverseProxyAccessControlRules = ({ value, onChange, onValidationChange }: Props) => {
+  const [rules, dispatch] = useReducer(
+    rulesReducer,
+    value,
+    restrictionsToRules,
+  );
+
+  const errors = useMemo(
+    () => Object.fromEntries(rules.map((r) => [r.id, validateRule(r)])),
+    [rules],
+  );
+
+  const hasErrors = useMemo(
+    () => Object.values(errors).some((e) => e !== ""),
+    [errors],
+  );
+
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+
+  const onValidationChangeRef = useRef(onValidationChange);
+  onValidationChangeRef.current = onValidationChange;
+
+  useEffect(() => {
+    onChangeRef.current(rulesToRestrictions(rules));
+  }, [rules]);
+
+  useEffect(() => {
+    onValidationChangeRef.current?.(hasErrors);
+  }, [hasErrors]);
+
+  return (
+    <div className={"flex-col flex"}>
+      <div>
+        <Label>Access Control Rules</Label>
+        <HelpText>
+          Define rules to allow or block traffic based on country, IP address,
+          or CIDR block.
+          <br />
+          Block rules always take priority over allow rules.
+        </HelpText>
+      </div>
+      {rules.length > 0 && (
+        <div className="flex flex-col gap-3 mt-1 mb-4">
+          {rules.map((rule) => (
+            <div key={rule.id} className="flex items-center">
+              <div className="w-[160px] shrink-0 [&_button]:rounded-r-none [&_button]:w-[160px]">
+                <SelectDropdown
+                  value={rule.action}
+                  onChange={(v) =>
+                    dispatch({
+                      type: "update",
+                      id: rule.id,
+                      field: "action",
+                      value: v,
+                    })
+                  }
+                  options={ACTION_OPTIONS}
+                  compact
+                />
+              </div>
+
+              <div className="w-[160px] shrink-0 -ml-px [&_button]:rounded-none [&_button]:w-[160px]">
+                <SelectDropdown
+                  value={rule.type}
+                  onChange={(v) =>
+                    dispatch({
+                      type: "update",
+                      id: rule.id,
+                      field: "type",
+                      value: v,
+                    })
+                  }
+                  options={TYPE_OPTIONS}
+                  compact
+                />
+              </div>
+
+              <div className="flex-1 min-w-0 -ml-px [&_button]:rounded-l-none [&_input]:rounded-l-none">
+                {rule.type === "country" ? (
+                  <CountrySelector
+                    iconSize={16}
+                    popoverWidth={350}
+                    truncate
+                    value={rule.value}
+                    onChange={(v) =>
+                      dispatch({
+                        type: "update",
+                        id: rule.id,
+                        field: "value",
+                        value: v,
+                      })
+                    }
+                  />
+                ) : (
+                  <Input
+                    placeholder={
+                      rule.type === "ip"
+                        ? "e.g., 85.203.15.42"
+                        : "e.g., 74.125.0.0/16"
+                    }
+                    value={rule.value}
+                    onChange={(e) =>
+                      dispatch({
+                        type: "update",
+                        id: rule.id,
+                        field: "value",
+                        value: e.target.value,
+                      })
+                    }
+                    error={errors[rule.id]}
+                    errorTooltip={true}
+                    maxWidthClass="w-full"
+                  />
+                )}
+              </div>
+
+              <Button
+                variant="default-outline"
+                className="h-[42px] w-[42px] !px-0 shrink-0 ml-2"
+                onClick={() => dispatch({ type: "remove", id: rule.id })}
+                aria-label="Remove rule"
+              >
+                <MinusCircleIcon size={14} />
+              </Button>
+            </div>
+          ))}
+        </div>
+      )}
+      <Button
+        variant="dotted"
+        className="w-full"
+        size="sm"
+        onClick={() => dispatch({ type: "add" })}
+      >
+        <PlusIcon size={14} />
+        Add Rule
+      </Button>
+    </div>
+  );
+};
Author	SHA1	Message	Date
Eduard Gert	0841caecbb	Fix dns zone domain validation and peers last seen sort (#595 )	2026-03-25 17:50:22 +01:00
Eduard Gert	c7846760d1	Add reverse proxy auth headers (#593 ) * Add reverse proxy access rules * Fix coderabbit comments * Fix coderabbit comments * Fix coderabbit comments * Add auth header modal * Remove password managers from auth headers * fix unique id * Remove gradient, fix button roundness * update lucide, add additional event auth methods * Clear existing header value on change	2026-03-25 14:31:36 +01:00
Viktor Liu	8c283b6ef9	Support optional subdomain for reverse proxy domains (#589 )	2026-03-24 16:01:01 +01:00
Eduard Gert	34ae3b4da6	Add reverse proxy access rules (#592 ) * Add reverse proxy access rules * Fix coderabbit comments * Fix coderabbit comments * Fix coderabbit comments	2026-03-24 16:00:31 +01:00
Viktor LiuandEduard Gert	aff2365ef7	Add layer 4 protocol support to reverse proxy (#579 ) * Add layer 4 proto support * Fix initialResource fallback and UDP session_idle_timeout * Fix tlsResourceId init for resource-driven create flows, UDP timeout label * Address PR review: ServiceMode enum, resource init fix, modal title, a11y * Add L4 protocol values to ReverseProxyTargetProtocol, remove unsafe double cast * Add aria-labels to L4 port/host inputs * Unify domain input for all service modes including L4 * Support L4 proxy events * Fix custom port reset on edit and show port in L4 service link * Remove redundant listen port from L4 target cell * Show link only for HTTP/TLS services, copy-on-click for TCP/UDP * Move mode badge before domain and use fixed width for alignment * Fix HTTP services to open as link instead of copy * Hide old proxy clusters from L4 domain selector * Move service type inside modal * Update auth cell * Add target selector component * Extract into separate components * hide services types for not supported clusters * Remove advanced settings tab in http targetmodal and use accordion instead * Update advanced settings * Update target device row * Update text * Add type cell * Fix flat target name cell * Update modal title * Fix edit target in flat table * Remove unused proxycluster interface * Move proxy type icon into type component * sync cloud * use emptyrow * fix l4 type * fix duplicate error notification * Set the correct target type * Fix subnet host editable * Fix subnet host editable * hide selector when initial resource or peer * Rename dropdown * Update text * update status cell * merge cloud * Update tooltips * Address coderabbit comments * Fix skeleton device card * Update listen port tooltip * Adjust padding * update package-lock.json * bump next to 16.1.7 --------- Co-authored-by: Eduard Gert <kontakt@eduardgert.de>	2026-03-18 17:43:00 +01:00
Zoltan PappandEduard Gert	bad057d415	[dashboard] feat: add auto_update_always toggle to client settings (#580 ) * [dashboard] feat: add auto_update_always toggle to client settings Add "Always Update" toggle to the Clients settings tab that controls whether updates are installed automatically in the background or require user interaction from the UI. Includes a warning icon and caution callout when enabled to highlight the risk of disrupting active connections. * [dashboard] fix: improve auto-update UI clarity and toggle label Clarify that automatic updates require user interaction by updating the description. Rename "Always Update" to "Force Automatic Updates" for clarity. Move warning callout below the toggle switch instead of inside it. * Update src/modules/settings/ClientSettingsTab.tsx Co-authored-by: Eduard Gert <kontakt@eduardgert.de> --------- Co-authored-by: Eduard Gert <kontakt@eduardgert.de>	2026-03-16 15:35:44 +01:00
Misha Bragin	4d846e2c94	Improve text for optional resource setiings (#584 )	2026-03-12 20:48:09 +01:00